various-ui/es/components/table2/index.vue2.mjs.map

This is a test version of the Vue 3 component library

{"version":3,"file":"index.vue2.mjs","sources":["../../../../packages/components/table2/index.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({ name: \"UiTable2\" });\n</script>\n<template>\r\n    <div class=\"ui-table2\" ref=\"container\" :class=\"{ 'ui-table2-selector': ['checkbox', 'children', 'radio'].includes(selector || '') }\">\r\n        <!-- * 表格头部区域 -->\r\n        <div class=\"ui-table2-header\">\r\n            <div class=\"ui-table2-row\" ref=\"head\">\r\n                <!-- * 遍历生成表格列 -->\r\n                <div class=\"ui-table2-column\" v-for=\"row in option\" :key=\"row.key\" :name=\"row.key\" :style=\"disposable.align(row)\">\r\n                    <!-- * 表格文本内容区域 -->\r\n                    <span class=\"ui-table2-context\">\r\n                        <slot :name=\"row.slot || row.key + '_head'\" :data=\"row\">{{ row.name }}</slot>\r\n                    </span>\r\n\r\n                    <!-- * 表格排序控件 -->\r\n                    <div class=\"ui-table2-sort\" v-if=\"row.sort\" @click=\"methods.sort(row)\">\r\n                        <div class=\"ui-table2-trigger\" :class=\"{ 'ui-active': sorts.key == row.key && sorts.value == 'asc' }\"></div>\r\n                        <div class=\"ui-table2-trigger\" :class=\"{ 'ui-active': sorts.key == row.key && sorts.value == 'desc' }\"></div>\r\n                    </div>\r\n\r\n                    <!-- * 表格额外控件 -->\r\n                    <ui-tooltip class=\"ui-table2-extra\" v-if=\"row.extra\" v-bind=\"disposable.extra(row)\">\r\n                        <ui-icon :name=\"row['extra-icon'] || 'filter'\" />\r\n                        <template #content>\r\n                            <slot :name=\"row.slot || row.key + '_extra'\" :data=\"row\"></slot>\r\n                        </template>\r\n                    </ui-tooltip>\r\n\r\n                    <!-- * 表格解释控件 -->\r\n                    <ui-tooltip-follow class=\"ui-table2-explain\" v-if=\"row.explain\" :class-extra-name=\"row['explain-name']\">\r\n                        <ui-icon :name=\"row['explain-icon'] || 'explain'\" />\r\n                        <template #content>\r\n                            <slot :name=\"row.slot || row.key + '_explain'\" :data=\"row\">{{ row.explain }}</slot>\r\n                        </template>\r\n                    </ui-tooltip-follow>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- * 表格内容区域 -->\r\n        <ui-simplebar :height=\"height\" trigger=\"Hover\">\r\n            <div class=\"ui-table2-bodys\" ref=\"main\">\r\n                <!-- * 无数据处理 -->\r\n                <div class=\"ui-table2-body ui-table2-error\" v-if=\"!data?.length && error\">\r\n                    <div class=\"ui-table2-row\">{{ error }}</div>\r\n                </div>\r\n\r\n                <!-- * 内容 -->\r\n                <template v-else>\r\n                    <template v-for=\"(value, index) in data\">\r\n                        <div class=\"ui-table2-body\" ref=\"bodys\" v-bind=\"disposable.body(value, index)\" @click=\"methods.select(index)\">\r\n                            <!-- * 表格行 -->\r\n                            <div class=\"ui-table2-row\">\r\n                                <!-- * 遍历生成表格列 -->\r\n                                <template v-for=\"row in option\">\r\n                                    <div class=\"ui-table2-column\" :class=\"row.className\" :name=\"row.key\" :style=\"disposable.align(row)\">\r\n                                        <!-- * 表格文本内容区域 -->\r\n                                        <div class=\"ui-table2-context\">\r\n                                            <slot :name=\"row.slot || row.key\" :data=\"value\">{{ value[row.key] }}</slot>\r\n                                        </div>\r\n                                    </div>\r\n                                </template>\r\n                            </div>\r\n\r\n                            <!-- * 嵌套表格 -->\r\n                            <Transition v-on=\"ons.animation\">\r\n                                <div class=\"ui-table2-children\" v-if=\"childrens.includes(index)\">\r\n                                    <slot name=\"children\" :data=\"value\"></slot>\r\n                                </div>\r\n                            </Transition>\r\n                        </div>\r\n                    </template>\r\n                </template>\r\n            </div>\r\n        </ui-simplebar>\r\n    </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n//* Vue\r\nimport { onMounted, onBeforeUnmount } from \"vue\";\r\n//* 组件引入\r\nimport UiIcon from \"@various/components/icon\";\r\nimport UiSimplebar from \"@various/components/simplebar\";\r\nimport { UiTooltip, UiTooltipFollow } from \"@various/components/tooltip\";\r\n//* 组件属性\r\nimport { UiTablePropsOption2, UiTableEmits2 } from \"./src/component\";\r\nimport { useComposable } from \"./src/composable\";\r\n\r\n//* 组件属性注册\r\nconst define = defineProps(UiTablePropsOption2);\r\nconst emits = defineEmits(UiTableEmits2);\r\n\r\n//* 组合函数\r\nconst { ons, refs, nodes, watchs, methods, variable, disposable } = useComposable(define, emits);\r\nconst { sorts, childrens } = refs;\r\nconst { container, bodys, head, main } = nodes;\r\nconst { sort, radio, checkbox, children } = methods;\r\n\r\n//* 组件挂载时，初始化\r\nonMounted(() => {\r\n    if (!container.value) return;\r\n    else {\r\n        //* 注册observer\r\n        variable.observer.value = new ResizeObserver(() => {\r\n            //* 检测表格尺寸是否发生变更\r\n            if (container.value?.clientWidth && variable.size != container.value.clientWidth) {\r\n                //* 缓存上一个尺寸\r\n                variable.size = container.value.clientWidth;\r\n                //* 重新计算表格宽度\r\n                methods.init();\r\n            }\r\n        });\r\n        //* 挂载观察者\r\n        variable.observer.value.observe(container.value);\r\n    }\r\n});\r\n\r\n//* 组件卸载时，移除观察者\r\nonBeforeUnmount(() => {\r\n    //* 移除观察者\r\n    variable.observer.value?.disconnect();\r\n    //* 移除侦听器\r\n    watchs.watch_stop?.();\r\n});\r\n\r\n//* 组件属性导出\r\n;\r\ndefineExpose({ sort, radio, checkbox, children });\r\n</script>\r\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAA6B,WAAA,GAAAA,eAAA,CAAyB,EAAE,IAAA,EAAM,YAAY,CAAA,CAAA;;;;;;AA0F1E,IAAA,MAAM,MAAS,GAAA,OAAA,CAAA;AACf,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAGd,IAAM,MAAA,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,OAAS,EAAA,QAAA,EAAU,UAAW,EAAA,GAAI,aAAc,CAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AAC/F,IAAM,MAAA,EAAE,KAAO,EAAA,SAAA,EAAc,GAAA,IAAA,CAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,KAAO,EAAA,IAAA,EAAM,MAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,QAAA,EAAU,UAAa,GAAA,OAAA,CAAA;AAG5C,IAAA,SAAA,CAAU,MAAM;AACZ,MAAI,IAAA,CAAC,UAAU,KAAO,EAAA,OAAA;AAAA,WACjB;AAED,QAAA,QAAA,CAAS,QAAS,CAAA,KAAA,GAAQ,IAAI,cAAA,CAAe,MAAM;;AAE/C,UAAI,IAAA,CAAA,CAAA,EAAA,GAAA,SAAA,CAAU,UAAV,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,KAAe,SAAS,IAAQ,IAAA,SAAA,CAAU,MAAM,WAAa,EAAA;AAE9E,YAAS,QAAA,CAAA,IAAA,GAAO,UAAU,KAAM,CAAA,WAAA,CAAA;AAEhC,YAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AAAA,WACjB;AAAA,SACH,CAAA,CAAA;AAED,QAAA,QAAA,CAAS,QAAS,CAAA,KAAA,CAAM,OAAQ,CAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACnD;AAAA,KACH,CAAA,CAAA;AAGD,IAAA,eAAA,CAAgB,MAAM;;AAElB,MAAS,CAAA,EAAA,GAAA,QAAA,CAAA,QAAA,CAAS,UAAlB,IAAyB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,EAAA,CAAA;AAEzB,MAAA,CAAA,EAAA,GAAA,MAAA,CAAO,UAAP,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA;AAAA,KACH,CAAA,CAAA;AAGD,IAAA,CAAA;AACA,IAAA,QAAA,CAAa,EAAE,IAAA,EAAM,KAAO,EAAA,QAAA,EAAU,UAAU,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}