@koi-design/uxd-ui 12.1.36-beta.0

package/lib/components/Table/HeadTable.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var Scrollbar = require('../Scrollbar/Scrollbar.js');
+var BaseTable = require('./BaseTable.js');
+var dom = require('../../utils/dom.js');
+var pluginVue_exportHelper = require('../../_virtual/plugin-vue_export-helper.js');
+
+const _sfc_main = vue.defineComponent({
+  name: "HeadTable",
+  components: {
+    BaseTable: BaseTable["default"],
+    Scrollbar: Scrollbar["default"]
+  },
+  props: {
+    columns: {
+      type: Array
+    }
+  },
+  emits: ["head-scroll"],
+  setup(props, { emit }) {
+    const {
+      prefixCls,
+      saveRef
+    } = vue.inject("tableContext", {});
+    const scrollbarWidth = dom.measureScrollbar({ direction: "vertical" });
+    return {
+      prefixCls,
+      saveRef,
+      scrollbarWidth,
+      handleScroll: (e) => {
+        emit("head-scroll", e);
+      }
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseTable = vue.resolveComponent("BaseTable");
+  const _component_Scrollbar = vue.resolveComponent("Scrollbar");
+  return vue.openBlock(), vue.createBlock(_component_Scrollbar, {
+    ref: _ctx.saveRef("headTable"),
+    class: vue.normalizeClass([`${_ctx.prefixCls}-header`]),
+    "hide-bar": "",
+    onScroll: _ctx.handleScroll
+  }, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_BaseTable, {
+        columns: _ctx.columns,
+        "show-header": true,
+        "show-body": false
+      }, null, 8, ["columns"])
+    ]),
+    _: 1
+  }, 8, ["class", "onScroll"]);
+}
+var HeadTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Table\\HeadTable.vue"]]);
+
+exports["default"] = HeadTable;
+//# sourceMappingURL=HeadTable.js.map

package/lib/components/Table/HeadTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadTable.js","sources":["../../../../src/components/Table/HeadTable.vue"],"sourcesContent":["<template>\n  <Scrollbar :ref=\"saveRef('headTable')\" :class=\"[`${prefixCls}-header`]\" hide-bar @scroll=\"handleScroll\">\n    <BaseTable :columns=\"columns\" :show-header=\"true\" :show-body=\"false\" />\n  </Scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue';\nimport type { PropType } from 'vue';\nimport Scrollbar from '../Scrollbar/Scrollbar';\nimport BaseTable from './BaseTable.vue';\nimport { measureScrollbar } from '../../utils/dom';\nimport type { InnerColumn, TableContext } from './Table.type';\n\nexport default defineComponent({\n  name: 'HeadTable',\n  components: {\n    BaseTable,\n    Scrollbar\n  },\n  props: {\n    columns: {\n      type: Array as PropType<InnerColumn[]>\n    }\n  },\n  emits: ['head-scroll'],\n  setup(props, { emit }) {\n    const {\n      prefixCls,\n      saveRef\n      // props: { headerSticky }\n    } = inject<TableContext>('tableContext', {} as TableContext);\n    const scrollbarWidth = measureScrollbar({ direction: 'vertical' });\n\n    // const headStyle = computed(() => {\n    //   const style = {} as CSSProperties;\n    //   const scrollbarWidthOfHeader = measureScrollbar({\n    //     direction: 'horizontal',\n    //     className: `${prefixCls.value}-hide-scrollbar`\n    //   });\n    //   if (scrollbarWidthOfHeader > 0) {\n    //     style.marginBottom = `-${scrollbarWidthOfHeader}px`;\n    //     style.paddingBottom = '0px';\n    //     style.minHeight = `${scrollbarWidth}px`;\n    //     // style.overflowX = 'scroll';\n    //     // style.overflowY = scrollbarWidth === 0 ? 'hidden' : 'scroll';\n    //   }\n    //   if (headerSticky.value !== undefined) {\n    //     style.position = 'sticky';\n    //     style.top = `${headerSticky.value}px`;\n    //     style.marginBottom = `0px`;\n    //     style.scrollbarWidth = `none`;\n    //   }\n    //   return style;\n    // });\n\n    return {\n      prefixCls,\n      saveRef,\n      scrollbarWidth,\n      // headStyle,\n      handleScroll: (e: any) => {\n        emit('head-scroll', e);\n      }\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","BaseTable","Scrollbar","inject","measureScrollbar","_createBlock","_normalizeClass","_createVNode"],"mappings":";;;;;;;;;;AAcA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,eACVC;AAAA,eACAC;AAAA;AACF,EACA,OAAO;AAAA,IACL,SAAS;AAAA,MACP,MAAM;AAAA;AACR;AACF,EACA,OAAO,CAAC,aAAa;AAAA,EACrB,MAAM,OAAO,EAAE,QAAQ;UACf;AAAA,MACJ;AAAA,MACA;AAAA,QAEEC,WAAqB,gBAAgB,EAAkB;UACrD,iBAAiBC,qBAAiB,EAAE,WAAW,YAAY;WAwB1D;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEA,cAAc,CAAC,MAAW;aACnB,eAAe,CAAC;AAAA;AACvB;AACF;AAEJ,CAAC;;;;0BAjECC,gBAEY;IAFA,KAAK,aAAO;IAAgB,OAAKC,uBAAM,uBAAS;IAAY;IAAU,UAAQ;;yBACxF,MAAuE;AAAA,MAAvEC,gBAAuE;QAA3D,SAAS;QAAU,eAAa;AAAA,QAAO,aAAW;AAAA;;;;;;;;;"}

package/lib/components/Table/HeadTable.vue.d.ts

@@ -0,0 +1,19 @@
+import type { PropType } from 'vue';
+import type { InnerColumn } from './Table.type';
+declare const _default: import("vue").DefineComponent<{
+    columns: {
+        type: PropType<InnerColumn[]>;
+    };
+}, {
+    prefixCls: import("vue").ComputedRef<string>;
+    saveRef: import("./Table.type").SaveRef;
+    scrollbarWidth: number;
+    handleScroll: (e: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "head-scroll"[], "head-scroll", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<InnerColumn[]>;
+    };
+}>> & {
+    "onHead-scroll"?: (...args: any[]) => any;
+}, {}, {}>;
+export default _default;

package/lib/components/Table/Table.js

@@ -0,0 +1,374 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index = require('../Spin/index.js');
+var index$1 = require('../Pagination/index.js');
+var tools = require('../../utils/tools.js');
+var TableBox = require('./TableBox.js');
+var useGlobalConfig = require('../base/hooks/useGlobalConfig.js');
+var ResizeObserver = require('../base/ResizeObserver.js');
+var useUpdateColumns = require('./hooks/useUpdateColumns.js');
+var useUpdateDatas = require('./hooks/useUpdateDatas.js');
+var useTableResize = require('./hooks/useTableResize.js');
+var useExpander = require('./hooks/useExpander.js');
+var useSelection = require('./hooks/useSelection.js');
+var useDraggable = require('./hooks/useDraggable.js');
+var useFilterSortPage = require('./hooks/useFilterSortPage.js');
+var Table_type = require('./Table.type.js');
+var pluginVue_exportHelper = require('../../_virtual/plugin-vue_export-helper.js');
+
+const _sfc_main = vue.defineComponent({
+  name: "UTable",
+  components: {
+    TableBox: TableBox["default"],
+    Spin: index.USpin,
+    Pagination: index$1.UPagination,
+    ResizeObserver: ResizeObserver["default"]
+  },
+  props: Table_type.tableProps,
+  emits: Table_type.tableEmits,
+  setup(props, { slots, emit }) {
+    const { prefixCls, config: globalConfig } = useGlobalConfig["default"]("table");
+    const showResizeLine = vue.ref(false);
+    const tableRefs = vue.reactive({});
+    const saveRef = (key) => {
+      return (el) => {
+        tableRefs[key] = el;
+      };
+    };
+    const locale = vue.computed(() => {
+      return { ...globalConfig.locale.table, ...props.locale };
+    });
+    const isBorder = vue.computed(() => {
+      const b = props.variant === "border" || props.border;
+      return b;
+    });
+    const { updatedDatas } = useUpdateDatas["default"](props);
+    const {
+      hasAction,
+      hasSorters,
+      hasFilters,
+      isSortColumn,
+      isAscend,
+      isDescend,
+      hasAscend,
+      hasDescend,
+      toggleSortOrder,
+      setColumnFilter,
+      currentDatas,
+      paginationOptions,
+      computedPageTotal,
+      handlePageChange,
+      handlePageSizeChange
+    } = useFilterSortPage["default"](props, updatedDatas, emit);
+    const { setRowRefs, draggableColumn } = useDraggable["default"](props, tableRefs);
+    const {
+      expandedRowKeys,
+      showChildrenRowKeys,
+      handleExpandChange,
+      isRowExpanded,
+      expandedRowRender,
+      isTreeTable,
+      expandColumn,
+      expandIconColumnIndex
+    } = useExpander["default"](props, slots, currentDatas, emit);
+    const { selectionColumn } = useSelection["default"](props, updatedDatas, currentDatas, prefixCls, locale);
+    const { updatedColumns, isColumnFixed, isLeftFixed, isRightFixed, leftColumns, rightColumns } = useUpdateColumns["default"](props, slots, {
+      draggableColumn,
+      expandColumn,
+      selectionColumn
+    });
+    const {
+      sizesMap,
+      handleResize,
+      isScrollX,
+      scrollPosition,
+      setScrollPositionClass,
+      resetScrollX,
+      tableWidth,
+      clearResizeTimer,
+      setResizeWidth
+    } = useTableResize["default"](updatedColumns, tableRefs, prefixCls, isColumnFixed, props);
+    const debouncedHandleResize = tools.debounce(handleResize, 150);
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        setTimeout(() => {
+          handleResize();
+          resetScrollX();
+        }, 0);
+      });
+    });
+    vue.onUpdated(() => {
+      vue.nextTick(() => {
+        handleResize();
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      if (debouncedHandleResize) {
+        debouncedHandleResize.cancel();
+      }
+      clearResizeTimer();
+    });
+    const scrollable = vue.computed(() => {
+      return props.maxHeight || isScrollX.value || isColumnFixed.value;
+    });
+    let lastScrollLeft = 0;
+    const handleBodyScrollX = (e) => {
+      if (e.currentTarget !== e.target) {
+        return;
+      }
+      const { target } = e;
+      const { bodyTable, headTable } = tableRefs;
+      if (target.scrollLeft !== lastScrollLeft && isScrollX.value) {
+        if (target === bodyTable.wrapRef && headTable) {
+          headTable.setScrollLeft(target.scrollLeft);
+        } else if (target === (headTable == null ? void 0 : headTable.wrapRef) && bodyTable) {
+          bodyTable.setScrollLeft(target.scrollLeft);
+        }
+        setScrollPositionClass();
+      }
+      lastScrollLeft = target.scrollLeft;
+    };
+    const handleBodyScroll = (e) => {
+      handleBodyScrollX(e);
+    };
+    vue.watch(
+      () => props.data,
+      (val) => {
+        if (val.length === 0 && isScrollX.value) {
+          vue.nextTick(() => {
+            resetScrollX();
+          });
+        }
+      }
+    );
+    const emptyText = vue.computed(() => {
+      return props.data.length ? locale.value.notFoundText : locale.value.noDataText;
+    });
+    const currentHoverKey = vue.ref(null);
+    const onRowMouseEnter = (data, index, e) => {
+      emit("row-mouseenter", data, index, e);
+    };
+    const onRowMouseLeave = (data, index, e) => {
+      emit("row-mouseleave", data, index, e);
+    };
+    const onRowClick = (data, index, e) => {
+      emit("row-click", data, index, e);
+    };
+    const onRowDoubleClick = (data, index, e) => {
+      emit("row-doubleclick", data, index, e);
+    };
+    const onRowContextMenu = (data, index, e) => {
+      emit("row-contextmenu", data, index, e);
+    };
+    const onHeaderCellClick = (column, e) => {
+      emit("header-click", column, e);
+    };
+    const handleColumnResize = (columnWidth, changeWidth, column, event) => {
+      emit("column-resize", columnWidth, changeWidth, column, event);
+    };
+    const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading } = vue.toRefs(props);
+    vue.provide("tableContext", {
+      prefixCls,
+      locale,
+      data: currentDatas,
+      saveRef,
+      tableRefs,
+      showResizeLine,
+      props: {
+        showHeader,
+        maxHeight,
+        expandIcon,
+        rowClassName,
+        indentSize,
+        emptyText,
+        showSummary,
+        disabledHover,
+        expandIndent,
+        headerSticky,
+        loading
+      },
+      slots,
+      expand: {
+        expandedRowRender,
+        expandedRowKeys,
+        showChildrenRowKeys,
+        isRowExpanded,
+        expandIconColumnIndex,
+        handleExpandChange,
+        isTreeTable
+      },
+      size: {
+        tableWidth,
+        sizesMap,
+        isScrollX,
+        setResizeWidth,
+        handleColumnResize,
+        debouncedHandleResize
+      },
+      fixed: {
+        isColumnFixed,
+        currentHoverKey
+      },
+      draggable: {
+        setRowRefs
+      },
+      rowEvents: {
+        onRowMouseEnter,
+        onRowMouseLeave,
+        onRowClick,
+        onRowDoubleClick,
+        onRowContextMenu
+      },
+      headerEvents: {
+        onHeaderCellClick
+      },
+      filterAndSorter: {
+        hasAction,
+        hasSorters,
+        hasFilters,
+        isSortColumn,
+        isAscend,
+        isDescend,
+        hasAscend,
+        hasDescend,
+        toggleSortOrder,
+        setColumnFilter
+      },
+      pagination: paginationOptions
+    });
+    return {
+      prefixCls,
+      saveRef,
+      showResizeLine,
+      updatedColumns,
+      currentDatas,
+      paginationOptions,
+      computedPageTotal,
+      isBorder,
+      isLeftFixed,
+      leftColumns,
+      isRightFixed,
+      rightColumns,
+      scrollable,
+      scrollPosition,
+      handleBodyScroll,
+      handleBodyScrollX,
+      emptyText,
+      debouncedHandleResize,
+      handlePageChange,
+      handlePageSizeChange
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Pagination = vue.resolveComponent("Pagination");
+  const _component_TableBox = vue.resolveComponent("TableBox");
+  const _component_Spin = vue.resolveComponent("Spin");
+  const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
+  return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass([`${_ctx.prefixCls}-wrapper`]),
+        style: vue.normalizeStyle({ width: typeof _ctx.width === "number" ? `${_ctx.width}px` : _ctx.width })
+      }, [
+        _ctx.showPagination && _ctx.pagination && (_ctx.pagination.position === "top" || _ctx.pagination.position === "both") ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass({
+            [`${_ctx.prefixCls}-pagination`]: true,
+            [`${_ctx.prefixCls}-pagination-top`]: true,
+            [`${_ctx.prefixCls}-pagination-right`]: _ctx.pagination && _ctx.pagination.align === "right"
+          })
+        }, [
+          vue.createVNode(_component_Pagination, vue.mergeProps(_ctx.paginationOptions, {
+            total: _ctx.computedPageTotal,
+            onChange: _ctx.handlePageChange,
+            onPageSizeChange: _ctx.handlePageSizeChange
+          }), null, 16, ["total", "onChange", "onPageSizeChange"])
+        ], 2)) : vue.createCommentVNode("v-if", true),
+        vue.createElementVNode("div", {
+          ref: _ctx.saveRef("table"),
+          class: vue.normalizeClass([
+            _ctx.prefixCls,
+            `${_ctx.prefixCls}-${_ctx.size}`,
+            {
+              [`${_ctx.prefixCls}-${_ctx.variant}`]: !_ctx.isBorder,
+              [`${_ctx.prefixCls}-border`]: !!_ctx.isBorder,
+              [`${_ctx.prefixCls}-radius`]: _ctx.variant !== "ghost" && !_ctx.border && _ctx.radius,
+              [`${_ctx.prefixCls}-empty`]: !_ctx.data.length,
+              [`${_ctx.prefixCls}-without-column-header`]: !_ctx.showHeader,
+              [`${_ctx.prefixCls}-fixed-header`]: !!_ctx.maxHeight,
+              [`${_ctx.prefixCls}-layout-fixed`]: true,
+              [`${_ctx.prefixCls}-scroll-position-left`]: _ctx.scrollPosition === "left" || _ctx.scrollPosition === "both",
+              [`${_ctx.prefixCls}-scroll-position-right`]: _ctx.scrollPosition === "right" || _ctx.scrollPosition === "both",
+              [`${_ctx.prefixCls}-dragging`]: _ctx.showResizeLine,
+              [`${_ctx.prefixCls}-stripe`]: _ctx.stripe
+            }
+          ])
+        }, [
+          _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(`${_ctx.prefixCls}-title`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "title")
+          ], 2)) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`${_ctx.prefixCls}-content`)
+          }, [
+            vue.createVNode(_component_TableBox, {
+              columns: _ctx.updatedColumns,
+              onHeadScroll: _ctx.handleBodyScrollX,
+              onBodyScroll: _ctx.handleBodyScroll
+            }, null, 8, ["columns", "onHeadScroll", "onBodyScroll"]),
+            !_ctx.currentDatas.length ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(`${_ctx.prefixCls}-placeholder`)
+            }, [
+              vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(_ctx.emptyText), 1)
+              ])
+            ], 2)) : vue.createCommentVNode("v-if", true)
+          ], 2),
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref: _ctx.saveRef("resizeLine"),
+            class: vue.normalizeClass(`${_ctx.prefixCls}-resize-line`)
+          }, null, 2), [
+            [vue.vShow, _ctx.showResizeLine]
+          ]),
+          _ctx.loadingType === "spinner" ? (vue.openBlock(), vue.createBlock(_component_Spin, {
+            key: 1,
+            fix: "",
+            loading: _ctx.loading
+          }, null, 8, ["loading"])) : vue.createCommentVNode("v-if", true)
+        ], 2),
+        _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(`${_ctx.prefixCls}-footer`)
+        }, [
+          vue.renderSlot(_ctx.$slots, "footer")
+        ], 2)) : vue.createCommentVNode("v-if", true),
+        _ctx.showPagination && (_ctx.pagination && _ctx.pagination.position !== "top" || !_ctx.pagination) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 2,
+          class: vue.normalizeClass({
+            [`${_ctx.prefixCls}-pagination`]: true,
+            [`${_ctx.prefixCls}-pagination-bottom`]: true,
+            [`${_ctx.prefixCls}-pagination-right`]: _ctx.pagination && _ctx.pagination.align === "right"
+          })
+        }, [
+          vue.createVNode(_component_Pagination, vue.mergeProps(_ctx.paginationOptions, {
+            total: _ctx.computedPageTotal,
+            onChange: _ctx.handlePageChange,
+            onPageSizeChange: _ctx.handlePageSizeChange
+          }), null, 16, ["total", "onChange", "onPageSizeChange"])
+        ], 2)) : vue.createCommentVNode("v-if", true)
+      ], 6)
+    ]),
+    _: 3
+  }, 8, ["onResize"]);
+}
+var Table = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Table\\Table.vue"]]);
+
+exports["default"] = Table;
+//# sourceMappingURL=Table.js.map

package/lib/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../../src/components/Table/Table.vue"],"sourcesContent":["<template>\n  <ResizeObserver @resize=\"debouncedHandleResize\">\n    <div :class=\"[`${prefixCls}-wrapper`]\" :style=\"{ width: typeof width === 'number' ? `${width}px` : width }\">\n      <div\n        v-if=\"showPagination && pagination && (pagination.position === 'top' || pagination.position === 'both')\"\n        :class=\"{\n          [`${prefixCls}-pagination`]: true,\n          [`${prefixCls}-pagination-top`]: true,\n          [`${prefixCls}-pagination-right`]: pagination && pagination.align === 'right'\n        }\"\n      >\n        <Pagination v-bind=\"paginationOptions\" :total=\"computedPageTotal\" @change=\"handlePageChange\" @page-size-change=\"handlePageSizeChange\" />\n      </div>\n      <div\n        :ref=\"saveRef('table')\"\n        :class=\"[\n          prefixCls,\n          `${prefixCls}-${size}`,\n          {\n            [`${prefixCls}-${variant}`]: !isBorder,\n            [`${prefixCls}-border`]: !!isBorder,\n            [`${prefixCls}-radius`]: variant !== 'ghost' && !border && radius,\n            [`${prefixCls}-empty`]: !data.length,\n            [`${prefixCls}-without-column-header`]: !showHeader,\n            [`${prefixCls}-fixed-header`]: !!maxHeight,\n            [`${prefixCls}-layout-fixed`]: true,\n            [`${prefixCls}-scroll-position-left`]: scrollPosition === 'left' || scrollPosition === 'both',\n            [`${prefixCls}-scroll-position-right`]: scrollPosition === 'right' || scrollPosition === 'both',\n            [`${prefixCls}-dragging`]: showResizeLine,\n            [`${prefixCls}-stripe`]: stripe\n          }\n        ]\"\n      >\n        <div v-if=\"$slots.title\" :class=\"`${prefixCls}-title`\">\n          <slot name=\"title\" />\n        </div>\n        <div :class=\"`${prefixCls}-content`\">\n          <TableBox :columns=\"updatedColumns\" @head-scroll=\"handleBodyScrollX\" @body-scroll=\"handleBodyScroll\" />\n          <div v-if=\"!currentDatas.length\" :class=\"`${prefixCls}-placeholder`\">\n            <slot name=\"empty\">\n              {{ emptyText }}\n            </slot>\n          </div>\n        </div>\n        <div v-show=\"showResizeLine\" :ref=\"saveRef('resizeLine')\" :class=\"`${prefixCls}-resize-line`\" />\n        <Spin v-if=\"loadingType === 'spinner'\" fix :loading=\"loading\" />\n      </div>\n      <div v-if=\"$slots.footer\" :class=\"`${prefixCls}-footer`\">\n        <slot name=\"footer\" />\n      </div>\n      <div\n        v-if=\"showPagination && ((pagination && pagination.position !== 'top') || !pagination)\"\n        :class=\"{\n          [`${prefixCls}-pagination`]: true,\n          [`${prefixCls}-pagination-bottom`]: true,\n          [`${prefixCls}-pagination-right`]: pagination && pagination.align === 'right'\n        }\"\n      >\n        <Pagination v-bind=\"paginationOptions\" :total=\"computedPageTotal\" @change=\"handlePageChange\" @page-size-change=\"handlePageSizeChange\" />\n      </div>\n    </div>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, provide, reactive, toRefs, ref, onMounted, nextTick, onBeforeUnmount, onUpdated, watch } from 'vue';\nimport Spin from '@uxd-ui/components/Spin';\nimport Pagination from '@uxd-ui/components/Pagination';\nimport { debounce } from '../../utils/tools';\n// import Container from '../base/Container';\nimport TableBox from './TableBox.vue';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport ResizeObserver from '../base/ResizeObserver';\nimport useUpdateColumns from './hooks/useUpdateColumns';\nimport useUpdateDatas from './hooks/useUpdateDatas';\nimport useTableResize from './hooks/useTableResize';\nimport useExpander from './hooks/useExpander';\nimport useSelection from './hooks/useSelection';\nimport useDraggable from './hooks/useDraggable';\nimport useFilterSortPage from './hooks/useFilterSortPage';\nimport { tableProps, tableEmits, type SaveRef, type TableRefs, type TableColumn, type InnerColumn } from './Table.type';\n\nexport default defineComponent({\n  name: 'UTable',\n  components: {\n    TableBox,\n    Spin,\n    Pagination,\n    ResizeObserver\n  },\n  props: tableProps,\n  emits: tableEmits,\n  setup(props, { slots, emit }) {\n    const { prefixCls, config: globalConfig } = useGlobalConfig('table');\n    const showResizeLine = ref(false);\n    const tableRefs = reactive({} as TableRefs);\n    const saveRef: SaveRef = (key: string) => {\n      return (el: any) => {\n        tableRefs[key] = el;\n      };\n    };\n\n    const locale = computed(() => {\n      return { ...globalConfig.locale.table, ...props.locale };\n    });\n\n    const isBorder = computed(() => {\n      const b = props.variant === 'border' || props.border;\n      return b;\n    });\n\n    // ============ datas ===============\n    const { updatedDatas } = useUpdateDatas(props);\n\n    // ============= sort & fitler =============\n    const {\n      hasAction,\n      hasSorters,\n      hasFilters,\n      isSortColumn,\n      isAscend,\n      isDescend,\n      hasAscend,\n      hasDescend,\n      toggleSortOrder,\n      setColumnFilter,\n      currentDatas,\n      paginationOptions,\n      computedPageTotal,\n      handlePageChange,\n      handlePageSizeChange\n    } = useFilterSortPage(props, updatedDatas, emit);\n\n    // ================  draggable ====================\n    const { setRowRefs, draggableColumn } = useDraggable(props, tableRefs);\n\n    // ================  expander ====================\n    const {\n      expandedRowKeys,\n      showChildrenRowKeys,\n      handleExpandChange,\n      isRowExpanded,\n      expandedRowRender,\n      isTreeTable,\n      expandColumn,\n      expandIconColumnIndex\n    } = useExpander(props, slots, currentDatas, emit);\n\n    const { selectionColumn } = useSelection(props, updatedDatas, currentDatas, prefixCls, locale);\n\n    // ============ columns ===============\n    const { updatedColumns, isColumnFixed, isLeftFixed, isRightFixed, leftColumns, rightColumns } = useUpdateColumns(props, slots, {\n      draggableColumn,\n      expandColumn,\n      selectionColumn\n    });\n\n    // ============ resize ==============\n    // #region\n    const {\n      sizesMap,\n      handleResize,\n      isScrollX,\n      // fixedHeadRowsHeight,\n      // fixedBodyRowsHeight,\n      scrollPosition,\n      // syncFixedTableRowHeight,\n      setScrollPositionClass,\n      resetScrollX,\n      tableWidth,\n      clearResizeTimer,\n      setResizeWidth\n    } = useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props);\n\n    const debouncedHandleResize = debounce(handleResize, 150);\n\n    onMounted(() => {\n      nextTick(() => {\n        setTimeout(() => {\n          handleResize();\n          resetScrollX();\n        }, 0);\n      });\n    });\n\n    onUpdated(() => {\n      nextTick(() => {\n        handleResize();\n      });\n    });\n\n    onBeforeUnmount(() => {\n      if (debouncedHandleResize) {\n        debouncedHandleResize.cancel();\n      }\n      clearResizeTimer();\n    });\n    // #endregion\n\n    // ============ scroll ===============\n    // #region\n    const scrollable = computed(() => {\n      return props.maxHeight || isScrollX.value || isColumnFixed.value;\n    });\n\n    let lastScrollLeft = 0;\n    const handleBodyScrollX = (e: any) => {\n      if (e.currentTarget !== e.target) {\n        return;\n      }\n\n      const { target } = e;\n      const { bodyTable, headTable } = tableRefs;\n\n      if (target.scrollLeft !== lastScrollLeft && isScrollX.value) {\n        if (target === (bodyTable as any).wrapRef && headTable) {\n          (headTable as any).setScrollLeft(target.scrollLeft);\n        } else if (target === (headTable as any)?.wrapRef && bodyTable) {\n          (bodyTable as any).setScrollLeft(target.scrollLeft);\n        }\n        setScrollPositionClass();\n      }\n      lastScrollLeft = target.scrollLeft;\n    };\n\n    const handleBodyScroll = (e: any) => {\n      handleBodyScrollX(e);\n    };\n\n    watch(\n      () => props.data,\n      (val) => {\n        if (val.length === 0 && isScrollX.value) {\n          nextTick(() => {\n            resetScrollX();\n          });\n        }\n      }\n    );\n    // #endregion\n    // ============ empty ================\n    const emptyText = computed(() => {\n      return props.data.length ? locale.value.notFoundText : locale.value.noDataText;\n    });\n\n    // ===========row hover & event ================\n    // #region\n    const currentHoverKey = ref(null);\n    const onRowMouseEnter = (data: Record<string, any>, index: number, e: Event) => {\n      emit('row-mouseenter', data, index, e);\n    };\n    const onRowMouseLeave = (data: Record<string, any>, index: number, e: Event) => {\n      emit('row-mouseleave', data, index, e);\n    };\n    const onRowClick = (data: Record<string, any>, index: number, e: Event) => {\n      emit('row-click', data, index, e);\n    };\n    const onRowDoubleClick = (data: Record<string, any>, index: number, e: Event) => {\n      emit('row-doubleclick', data, index, e);\n    };\n    const onRowContextMenu = (data: Record<string, any>, index: number, e: Event) => {\n      emit('row-contextmenu', data, index, e);\n    };\n    // #endregion\n\n    // ============= other event =================\n    // #region\n    const onHeaderCellClick = (column: TableColumn, e: Event) => {\n      emit('header-click', column, e);\n    };\n\n    const handleColumnResize = (columnWidth: number, changeWidth: number, column: InnerColumn, event: Event) => {\n      emit('column-resize', columnWidth, changeWidth, column, event);\n    };\n    // #endregion\n\n    // ============= provide =================\n\n    const { showHeader, maxHeight, expandIcon, rowClassName, indentSize, showSummary, disabledHover, expandIndent, headerSticky, loading } =\n      toRefs(props);\n\n    provide('tableContext', {\n      prefixCls,\n      locale,\n      data: currentDatas,\n      saveRef,\n      tableRefs,\n      showResizeLine,\n      props: {\n        showHeader,\n        maxHeight,\n        expandIcon,\n        rowClassName,\n        indentSize,\n        emptyText,\n        showSummary,\n        disabledHover,\n        expandIndent,\n        headerSticky,\n        loading\n      },\n      slots,\n      expand: {\n        expandedRowRender,\n        expandedRowKeys,\n        showChildrenRowKeys,\n        isRowExpanded,\n        expandIconColumnIndex,\n        handleExpandChange,\n        isTreeTable\n      },\n      size: {\n        tableWidth,\n        sizesMap,\n        isScrollX,\n        setResizeWidth,\n        handleColumnResize,\n        debouncedHandleResize\n      },\n      fixed: {\n        isColumnFixed,\n        currentHoverKey\n      },\n      draggable: {\n        setRowRefs\n      },\n      rowEvents: {\n        onRowMouseEnter,\n        onRowMouseLeave,\n        onRowClick,\n        onRowDoubleClick,\n        onRowContextMenu\n      },\n      headerEvents: {\n        onHeaderCellClick\n      },\n      filterAndSorter: {\n        hasAction,\n        hasSorters,\n        hasFilters,\n        isSortColumn,\n        isAscend,\n        isDescend,\n        hasAscend,\n        hasDescend,\n        toggleSortOrder,\n        setColumnFilter\n      },\n      pagination: paginationOptions\n    });\n    return {\n      prefixCls,\n      saveRef,\n      showResizeLine,\n      updatedColumns,\n      currentDatas,\n      paginationOptions,\n      computedPageTotal,\n      isBorder,\n      isLeftFixed,\n      leftColumns,\n      isRightFixed,\n      rightColumns,\n      scrollable,\n      scrollPosition,\n      handleBodyScroll,\n      handleBodyScrollX,\n      emptyText,\n      debouncedHandleResize,\n      handlePageChange,\n      handlePageSizeChange\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","TableBox","Spin","Pagination","ResizeObserver","tableProps","tableEmits","useGlobalConfig","ref","reactive","computed","useUpdateDatas","useFilterSortPage","useDraggable","useExpander","useSelection","useUpdateColumns","useTableResize","debounce","toRefs","_createBlock","_createElementVNode","_normalizeClass","_normalizeStyle","_createElementBlock","_createVNode","_mergeProps","_renderSlot"],"mappings":"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"}