{"version":3,"file":"BnlCMnZm.js","sources":["../../../../components/Base/NewTable.vue"],"sourcesContent":["<template>\n    <table class=\"divide-y divide-gray-200 table-auto bg-white w-full\">\n        <thead class=\"\">\n        <tr class=\"\">\n            <td v-if=\"showSelect\" class=\"w-8 px-6 rounded-tl-md py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer\">\n                <slot name=\"selectHeader\">\n                    Fallbact for select\n                </slot>\n            </td>\n            <th\n            \n            class=\"px-6 py-3 text-left text-xs min-w-[150px] font-medium text-gray-500 uppercase tracking-wider cursor-pointer\"\n            v-for=\"(column, index) in columns\"\n            :class=\"\n                [index === 0 ? 'rounded-tl-md' : '',\n                index === columns.length - 1 ? '' : '']\n            \"\n            :key=\"column.key\"\n            >\n            {{ column.label }}\n            </th>\n        </tr>\n        </thead>\n        <tbody class=\"bg-white\">\n        <tr\n            class=\"cursor-pointer hover:bg-gray-50 group m-0 p-0 h-full\"\n            :class=\"[\n              false ? 'bg-blue-50 border-blue-500' : '',\n              index === allRows.length - 1 ? '' : 'border-b',\n              checkedRowIds?.includes(row.id) ? 'bg-blue-50' : 'bg-white'\n            ]\"\n            v-for=\"(row, index) in allRows\"\n            :key=\"row.id\"\n            @mouseenter=\"hoveredRow = index\"\n            @mouseleave=\"hoveredRow = null\"\n            @click.stop=\"rowClicked(row.id)\"\n            ref=\"tableRows\"\n        >\n            <td v-if=\"showSelect\" :class=\"index === allRows.length-1 ? '' : ''\" class=\"w-8 px-6 py-4 whitespace-nowrap font-normal text-sm text-gray-500\">\n              <slot name=\"selectRow\" :row=\"row\">\n                Fallback for select\n              </slot>\n            </td>\n            <td\n            class=\"px-6 py-4 whitespace-nowrap font-normal text-sm text-gray-500\"\n            v-for=\"(column, cindex) in columns\"\n            :class=\"\n                [cindex === 0 ? 'rounded-bl-md' : '',\n                cindex === columns.length - 1 ? 'rounded-br-md' : '']\n            \"\n            :key=\"column.key\" >\n            <slot :name=\"`${column.key}-data`\" :row=\"row\" :ind=\"index\">\n                <div class=\"relative\">\n                {{ row[column.key] }}\n                </div>\n            </slot>\n            </td>\n            <transition name=\"fade\">\n            <td class=\"absolute right-0\" v-show=\"hoveredRow === index\">\n              <div v-if=\"!row.hideActions\" @click.stop=\"toggleActionDropdown(row.id)\" v-click-outside=\"closeActionDropdown\" class=\"pl-6 pr-5 -mr-[1px] flex items-center justify-center -mt-[1px] bg-gradient-to-r from-white/0 via-white to-white bg-opacity-50\" :class=\"index === allRows.length-1 ? `rounded-br-md` : ''\" :style=\"{ height: `${heights[index]}px` }\">\n                <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M14.5 4C14.5 5.38071 13.3807 6.5 12 6.5C10.6193 6.5 9.5 5.38071 9.5 4C9.5 2.61929 10.6193 1.5 12 1.5C13.3807 1.5 14.5 2.61929 14.5 4Z\" fill=\"#000000\"></path> <path d=\"M14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z\" fill=\"#000000\"></path> <path d=\"M12 22.5C13.3807 22.5 14.5 21.3807 14.5 20C14.5 18.6193 13.3807 17.5 12 17.5C10.6193 17.5 9.5 18.6193 9.5 20C9.5 21.3807 10.6193 22.5 12 22.5Z\" fill=\"#000000\"></path> </g></svg>\n                <div v-show=\"row.showActionDropdown\">\n                    <div class=\"flex flex-row space-x-4 items-center justify-center\">\n                    <transition\n                        enter-active-class=\"transition ease-out duration-100\"\n                        enter-class=\"transform opacity-0 scale-95\"\n                        enter-to-class=\"transform opacity-100 scale-100\"\n                        leave-active-class=\"transition ease-in duration-75\"\n                        leave-class=\"transform opacity-100 scale-100\"\n                        leave-to-class=\"transform opacity-0 scale-95\">\n                        <div\n                        class=\"z-20 origin-top-right absolute mr-32 mb-2 mt-14 w-36 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none text-gray-700 text-sm\"\n                        role=\"menu\"\n                        aria-orientation=\"vertical\"\n                        aria-labelledby=\"user-menu-button\"\n                        tabindex=\"-1\">\n                            <slot name=\"actions\" :row=\"row\"> Fallback </slot>\n                        </div>\n                    </transition>\n                    </div>\n                </div>\n              </div>\n            </td>\n          </transition>\n        </tr>\n        </tbody>\n    </table>\n</template>\n\n<style scoped>\n  .shadow-inner-right {\n    box-shadow: inset -20px 0 10px -10px rgba(0, 0, 0, 0.04);\n  }\n\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: opacity 0.2s ease;\n  }\n  .fade-enter-from,\n  .fade-leave-to {\n    opacity: 0;\n  }\n</style>\n\n<script setup>\nimport { ref } from \"vue\";\n\nconst props = defineProps({\n  columns: {\n    type: Array,\n    required: true,\n  },\n  rows: {\n    type: Array,\n    required: true,\n  },\n  showSelect: {\n    type: Boolean,\n    required: true,\n  },\n  checkedRowIds: {\n    type: Array,\n    required: false,\n    default: () => [] // ✅ Add this\n  }\n});\n\nconst tableRows = ref([])\nconst heights = ref([])\nconst hoveredRow = ref(null);\nconst emit = defineEmits([\"rowClicked\"]);\nconst allRows = ref(props.rows?.map(row => ({\n  ...row,\n  showActionDropdown: false\n})));\n\nwatch(() => props.rows, async (newRows) => {\n    allRows.value = newRows?.map(row => ({\n      ...row,\n      showActionDropdown: false\n    }));\n\n    await nextTick();\n    heights.value = tableRows.value.map(el => el?.getBoundingClientRect().height || 0);\n  },\n  { immediate: true, deep: true }\n);\n\nconst toggleActionDropdown = (id) => {\n  allRows.value.forEach((ns, index) => {\n    if (ns.id === id) {\n      allRows.value[index].showActionDropdown =\n        !allRows.value[index].showActionDropdown;\n    } else {\n      allRows.value[index].showActionDropdown = false;\n    }\n  });\n};\n\nconst closeActionDropdown = () => {\n  allRows.value.forEach((ns, index) => {\n    allRows.value[index].showActionDropdown = false;\n  });\n};\n\nconst rowClicked = (id) => {\n  emit(\"rowClicked\", id)\n}\n\nonMounted(() => {\n  nextTick(() => {\n    heights.value = tableRows.value.map(el => el?.getBoundingClientRect().height || 0);\n  });\n})\n</script>\n"],"names":["props","__props","tableRows","ref","heights","hoveredRow","emit","__emit","allRows","_a","row","watch","newRows","nextTick","el","toggleActionDropdown","id","ns","index","closeActionDropdown","rowClicked","onMounted"],"mappings":"gtEA2GA,MAAMA,EAAQC,EAoBRC,EAAYC,EAAI,EAAE,EAClBC,EAAUD,EAAI,EAAE,EAChBE,EAAaF,EAAI,IAAI,EACrBG,EAAOC,EACPC,EAAUL,GAAIM,EAAAT,EAAM,OAAN,YAAAS,EAAY,IAAIC,IAAQ,CAC1C,GAAGA,EACH,mBAAoB,EACtB,GAAG,EAEHC,EAAM,IAAMX,EAAM,KAAM,MAAOY,GAAY,CACvCJ,EAAQ,MAAQI,GAAA,YAAAA,EAAS,IAAIF,IAAQ,CACnC,GAAGA,EACH,mBAAoB,EACrB,IAED,MAAMG,EAAQ,EACdT,EAAQ,MAAQF,EAAU,MAAM,IAAIY,IAAMA,GAAA,YAAAA,EAAI,wBAAwB,SAAU,CAAC,CAClF,EACD,CAAE,UAAW,GAAM,KAAM,EAAM,CACjC,EAEA,MAAMC,EAAwBC,GAAO,CACnCR,EAAQ,MAAM,QAAQ,CAACS,EAAIC,IAAU,CAC/BD,EAAG,KAAOD,EACZR,EAAQ,MAAMU,CAAK,EAAE,mBACnB,CAACV,EAAQ,MAAMU,CAAK,EAAE,mBAExBV,EAAQ,MAAMU,CAAK,EAAE,mBAAqB,EAEhD,CAAG,CACH,EAEMC,EAAsB,IAAM,CAChCX,EAAQ,MAAM,QAAQ,CAACS,EAAIC,IAAU,CACnCV,EAAQ,MAAMU,CAAK,EAAE,mBAAqB,EAC9C,CAAG,CACH,EAEME,EAAcJ,GAAO,CACzBV,EAAK,aAAcU,CAAE,CACvB,EAEA,OAAAK,EAAU,IAAM,CACdR,EAAS,IAAM,CACbT,EAAQ,MAAQF,EAAU,MAAM,IAAIY,IAAMA,GAAA,YAAAA,EAAI,wBAAwB,SAAU,CAAC,CACrF,CAAG,CACH,CAAC"}