@koi-design/uxd-ui 14.0.4 → 14.0.6

package/lib/components/Table/tableUnits/TableCell.js

@@ -9,9 +9,10 @@ var index = require('../../Skeleton/index.js');
 var Render = require('../../base/Render.js');
 var ExpandIcon = require('./ExpandIcon.js');
 require('../../../utils/index.js');
-var utils = require('../utils.js');
+var ResizeObserver = require('../../base/ResizeObserver.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var dom = require('../../../utils/dom.js');
+var tools = require('../../../utils/tools.js');
 
 const USkeletonItem = index.USkeleton.Item;
 const _sfc_main = vue.defineComponent({
@@ -21,7 +22,8 @@ const _sfc_main = vue.defineComponent({
     ExpandIcon: ExpandIcon["default"],
     UTooltip: index$1.UTooltip,
     USkeleton: index.USkeleton,
-    USkeletonItem
+    USkeletonItem,
+    ResizeObserver: ResizeObserver["default"]
   },
   props: {
     prefixCls: {
@@ -62,12 +64,12 @@ const _sfc_main = vue.defineComponent({
       props: { indentSize },
       expand: { handleExpandChange, isRowExpanded },
       filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },
-      size: { sizesMap },
       pagination
     } = vue.inject("tableContext", {});
     const cellRef = vue.ref();
     const ellipsisSpanRef = vue.ref();
     const isOverflow = vue.ref(false);
+    const isMinWidth = vue.ref(false);
     const renderFn = vue.computed(() => {
       const { render } = props.column;
       return render || null;
@@ -112,6 +114,9 @@ const _sfc_main = vue.defineComponent({
       if (right !== void 0) {
         style.right = `${right}px`;
       }
+      if (isMinWidth.value) {
+        style.width = `${props.column.minWidth}px`;
+      }
       return style;
     });
     const handleExpand = (e) => {
@@ -129,26 +134,25 @@ const _sfc_main = vue.defineComponent({
         e
       );
     };
-    vue.watch(
-      () => sizesMap,
-      () => {
+    const checkWidth = ({ target, width }) => {
+      vue.nextTick(() => {
         if (ellipsisSpanRef.value) {
-          const cell = cellRef.value;
+          const cell = target;
           const padding = (Number.parseInt(dom.getStyle(cell, "paddingLeft")) || 0) + (Number.parseInt(dom.getStyle(cell, "paddingRight")) || 0);
           const span = ellipsisSpanRef.value;
           const range = document.createRange();
           range.setStart(span, 0);
           range.setEnd(span, span.childNodes.length);
           const rangeWidth = range.getBoundingClientRect().width;
-          const colKey = utils.getColumnKey(props.column);
-          const cellWidth = sizesMap[colKey];
-          if (rangeWidth + padding > cellWidth) {
+          if (rangeWidth + padding > width) {
             isOverflow.value = true;
+          } else {
+            isOverflow.value = false;
           }
         }
-      },
-      { deep: true }
-    );
+      });
+    };
+    const debouncedHandleResize = tools.debounce((args) => checkWidth(args), 100);
     return {
       tablePrefixCls,
       isRender,
@@ -168,97 +172,106 @@ const _sfc_main = vue.defineComponent({
       pagination,
       cellRef,
       ellipsisSpanRef,
-      isOverflow
+      isOverflow,
+      debouncedHandleResize
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _a;
   const _component_USkeletonItem = vue.resolveComponent("USkeletonItem");
   const _component_USkeleton = vue.resolveComponent("USkeleton");
   const _component_ExpandIcon = vue.resolveComponent("ExpandIcon");
   const _component_Render = vue.resolveComponent("Render");
   const _component_UTooltip = vue.resolveComponent("UTooltip");
-  return _ctx.showCell ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
-    key: 0,
-    ref: "cellRef"
-  }, _ctx.tdProps, {
-    class: {
-      [`${_ctx.prefixCls}-cell-custom`]: !!((_a = _ctx.tdProps) == null ? void 0 : _a.class),
-      [`${_ctx.column.className}`]: !!_ctx.column.className,
-      [`${_ctx.prefixCls}-cell-ellipsis`]: !!_ctx.column.ellipsis,
-      [`${_ctx.prefixCls}-cell-break-word`]: !!_ctx.column.width,
-      [`${_ctx.tablePrefixCls}-column-has-actions`]: _ctx.hasAction(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-has-sorters`]: _ctx.hasSorters(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-has-filters`]: _ctx.hasFilters(_ctx.column),
-      [`${_ctx.tablePrefixCls}-column-sort`]: _ctx.isSortColumn(_ctx.column)
-    },
-    style: _ctx.tdStyle
-  }), [
-    _ctx.skeleton ? (vue.openBlock(), vue.createBlock(_component_USkeleton, {
-      key: 0,
-      class: vue.normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
-      active: ""
-    }, {
-      default: vue.withCtx(() => [
-        _ctx.column.skeleton ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
-          return vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
-            key: ski,
-            type: _ctx.column.skeleton[ski].type,
-            style: vue.normalizeStyle(_ctx.column.skeleton[ski].style)
-          }, null, 8, ["type", "style"]);
-        }), 128)) : (vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
-          key: 1,
-          type: "text",
-          style: { "width": "50%" }
-        }))
-      ]),
-      _: 1
-    }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-      _ctx.expandIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
-          style: vue.normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
-        }, null, 6),
-        vue.createVNode(_component_ExpandIcon, {
-          "need-indent-spaced": "",
-          expandable: !!_ctx.data.children,
-          "need-loading": _ctx.data.children === true,
-          "row-key": _ctx.rowKey,
-          expanded: _ctx.isRowExpanded(_ctx.rowKey, true),
-          onExpand: _ctx.handleExpand,
-          onAsyncExpand: _ctx.handleAsyncExpand
-        }, null, 8, ["expandable", "need-loading", "row-key", "expanded", "onExpand", "onAsyncExpand"])
-      ], 64)) : vue.createCommentVNode("v-if", true),
-      _ctx.isRender ? (vue.openBlock(), vue.createBlock(_component_Render, {
-        key: 1,
-        render: () => {
-          var _a2;
-          return (_a2 = _ctx.renderFn) == null ? void 0 : _a2.call(_ctx, {
-            row: _ctx.data,
-            index: _ctx.index,
-            rowKey: _ctx.rowKey,
-            pagination: _ctx.pagination,
-            column: _ctx.column
-          });
-        }
-      }, null, 8, ["render"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-        _ctx.column.ellipsis && _ctx.displayCell ? (vue.openBlock(), vue.createBlock(_component_UTooltip, {
+  const _component_ResizeObserver = vue.resolveComponent("ResizeObserver");
+  return vue.openBlock(), vue.createBlock(_component_ResizeObserver, { onResize: _ctx.debouncedHandleResize }, {
+    default: vue.withCtx(() => {
+      var _a;
+      return [
+        _ctx.showCell ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
           key: 0,
-          title: _ctx.displayCell.toString(),
-          disabled: !_ctx.isOverflow,
-          "mouse-enter-delay": 0.5
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("span", { ref: "ellipsisSpanRef" }, vue.toDisplayString(_ctx.displayCell), 513)
-          ]),
-          _: 1
-        }, 8, ["title", "disabled"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          vue.createTextVNode(vue.toDisplayString(_ctx.displayCell), 1)
-        ], 64))
-      ], 64))
-    ], 64))
-  ], 16)) : vue.createCommentVNode("v-if", true);
+          ref: "cellRef"
+        }, _ctx.tdProps, {
+          class: {
+            [`${_ctx.prefixCls}-cell-custom`]: !!((_a = _ctx.tdProps) == null ? void 0 : _a.class),
+            [`${_ctx.column.className}`]: !!_ctx.column.className,
+            [`${_ctx.prefixCls}-cell-ellipsis`]: !!_ctx.column.ellipsis,
+            [`${_ctx.prefixCls}-cell-break-word`]: !!_ctx.column.width,
+            [`${_ctx.tablePrefixCls}-column-has-actions`]: _ctx.hasAction(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-has-sorters`]: _ctx.hasSorters(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-has-filters`]: _ctx.hasFilters(_ctx.column),
+            [`${_ctx.tablePrefixCls}-column-sort`]: _ctx.isSortColumn(_ctx.column)
+          },
+          style: _ctx.tdStyle
+        }), [
+          _ctx.skeleton ? (vue.openBlock(), vue.createBlock(_component_USkeleton, {
+            key: 0,
+            class: vue.normalizeClass(`${_ctx.prefixCls}-skeleton-wrap`),
+            active: ""
+          }, {
+            default: vue.withCtx(() => [
+              _ctx.column.skeleton ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(Array(_ctx.column.skeleton.length), (_, ski) => {
+                return vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
+                  key: ski,
+                  type: _ctx.column.skeleton[ski].type,
+                  style: vue.normalizeStyle(_ctx.column.skeleton[ski].style)
+                }, null, 8, ["type", "style"]);
+              }), 128)) : (vue.openBlock(), vue.createBlock(_component_USkeletonItem, {
+                key: 1,
+                type: "text",
+                style: { "width": "50%" }
+              }))
+            ]),
+            _: 1
+          }, 8, ["class"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            _ctx.expandIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(`${_ctx.prefixCls}-indent indent-level-${_ctx.indent}`),
+                style: vue.normalizeStyle({ paddingLeft: `${_ctx.indentSize * _ctx.indent}px` })
+              }, null, 6),
+              vue.createVNode(_component_ExpandIcon, {
+                "need-indent-spaced": "",
+                expandable: !!_ctx.data.children,
+                "need-loading": _ctx.data.children === true,
+                "row-key": _ctx.rowKey,
+                expanded: _ctx.isRowExpanded(_ctx.rowKey, true),
+                onExpand: _ctx.handleExpand,
+                onAsyncExpand: _ctx.handleAsyncExpand
+              }, null, 8, ["expandable", "need-loading", "row-key", "expanded", "onExpand", "onAsyncExpand"])
+            ], 64)) : vue.createCommentVNode("v-if", true),
+            _ctx.isRender ? (vue.openBlock(), vue.createBlock(_component_Render, {
+              key: 1,
+              render: () => {
+                var _a2;
+                return (_a2 = _ctx.renderFn) == null ? void 0 : _a2.call(_ctx, {
+                  row: _ctx.data,
+                  index: _ctx.index,
+                  rowKey: _ctx.rowKey,
+                  pagination: _ctx.pagination,
+                  column: _ctx.column
+                });
+              }
+            }, null, 8, ["render"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+              _ctx.column.ellipsis && _ctx.displayCell ? (vue.openBlock(), vue.createBlock(_component_UTooltip, {
+                key: 0,
+                title: _ctx.displayCell.toString(),
+                disabled: !_ctx.isOverflow,
+                "mouse-enter-delay": 0.5
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", { ref: "ellipsisSpanRef" }, vue.toDisplayString(_ctx.displayCell), 513)
+                ]),
+                _: 1
+              }, 8, ["title", "disabled"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                vue.createTextVNode(vue.toDisplayString(_ctx.displayCell), 1)
+              ], 64))
+            ], 64))
+          ], 64))
+        ], 16)) : vue.createCommentVNode("v-if", true)
+      ];
+    }),
+    _: 1
+  }, 8, ["onResize"]);
 }
 var TableCell = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/Documents/uxd/uxd-ui/src/components/Table/tableUnits/TableCell.vue"]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n  <td\n    v-if=\"showCell\"\n    ref=\"cellRef\"\n    v-bind=\"tdProps\"\n    :class=\"{\n      [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n      [`${column.className}`]: !!column.className,\n      [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n      [`${prefixCls}-cell-break-word`]: !!column.width,\n      [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n      [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n      [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n      [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n    }\"\n    :style=\"tdStyle\"\n  >\n    <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n      <template v-if=\"column.skeleton\">\n        <USkeletonItem\n          v-for=\"(_, ski) in Array(column.skeleton.length)\"\n          :key=\"ski\"\n          :type=\"column.skeleton[ski].type\"\n          :style=\"column.skeleton[ski].style\"\n        />\n      </template>\n      <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n    </USkeleton>\n    <template v-else>\n      <template v-if=\"expandIcon\">\n        <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n        <ExpandIcon\n          need-indent-spaced\n          :expandable=\"!!(data as any).children\"\n          :need-loading=\"(data as any).children === true\"\n          :row-key=\"rowKey\"\n          :expanded=\"isRowExpanded(rowKey, true)\"\n          @expand=\"handleExpand\"\n          @async-expand=\"handleAsyncExpand\"\n        />\n      </template>\n      <Render\n        v-if=\"isRender\"\n        :render=\"\n          () => {\n            return renderFn?.({\n              row: data,\n              index,\n              rowKey,\n              pagination,\n              column\n            });\n          }\n        \"\n      />\n      <template v-else>\n        <template v-if=\"column.ellipsis && displayCell\">\n          <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n            <span ref=\"ellipsisSpanRef\">\n              {{ displayCell }}\n            </span>\n          </UTooltip>\n        </template>\n        <template v-else>\n          {{ displayCell }}\n        </template>\n      </template>\n    </template>\n  </td>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { getStyle } from '../../../utils';\nimport { getColumnKey } from '../utils';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n  name: 'TableCell',\n  components: {\n    Render,\n    ExpandIcon,\n    UTooltip,\n    USkeleton,\n    USkeletonItem\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    column: {\n      type: Object as PropType<InnerColumn>,\n      required: true\n    },\n    data: {\n      type: Object as PropType<Record<string, any>>,\n      required: true\n    },\n    rowKey: {\n      type: [String, Number],\n      required: true\n    },\n    index: {\n      type: Number,\n      required: true\n    },\n    indent: {\n      type: Number,\n      default: 20\n    },\n    expandIcon: {\n      type: Boolean,\n      default: false\n    },\n    skeleton: {\n      type: Boolean,\n      default: false\n    }\n  },\n  setup(props) {\n    const {\n      prefixCls: tablePrefixCls,\n      props: { indentSize },\n      expand: { handleExpandChange, isRowExpanded },\n      filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n      size: { sizesMap },\n      pagination\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cellRef = ref();\n    const ellipsisSpanRef = ref();\n    const isOverflow = ref(false);\n\n    const renderFn = computed(() => {\n      const { render } = props.column;\n      return render || null;\n    });\n\n    const isRender = computed(() => {\n      return renderFn.value !== null;\n    });\n\n    const displayCell = computed(() => {\n      const { key, dataIndex } = props.column;\n      const record = props.data;\n      return get(record, dataIndex || key);\n    });\n\n    const tdProps = ref({});\n    const showCell = ref(true);\n\n    watch(\n      () => [props.column, props.data, props.index],\n      () => {\n        const { customCell } = props.column;\n        const attrs = {} as Record<string, any>;\n        // if (ellipsis && !render) {\n        //   attrs.title = displayCell.value;\n        // }\n        if (customCell) {\n          const { data, index } = props;\n          const _props = customCell(data, index);\n          const { colSpan, rowSpan } = _props;\n          showCell.value = colSpan !== 0 && rowSpan !== 0;\n          Object.keys(_props).forEach((key) => {\n            attrs[key] = _props[key];\n          });\n        }\n        tdProps.value = attrs;\n      },\n      { immediate: true }\n    );\n\n    const tdStyle = computed(() => {\n      const style = {} as CSSProperties;\n      const { align, left, right } = props.column;\n      if (align) {\n        style.textAlign = align;\n      }\n      if (left !== undefined) {\n        style.left = `${left}px`;\n      }\n      if (right !== undefined) {\n        style.right = `${right}px`;\n      }\n      return style;\n    });\n\n    const handleExpand = (e: any) => {\n      handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n    };\n\n    const handleAsyncExpand = (e: any, done: () => void) => {\n      handleExpandChange(\n        {\n          row: props.data,\n          rowKey: props.rowKey,\n          async: true,\n          tree: true,\n          done\n        },\n        e\n      );\n    };\n\n    watch(\n      () => sizesMap,\n      () => {\n        if (ellipsisSpanRef.value) {\n          const cell = cellRef.value;\n          const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) || 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) || 0);\n          const span = ellipsisSpanRef.value;\n          const range = document.createRange();\n          range.setStart(span, 0);\n          range.setEnd(span, span.childNodes.length);\n          const rangeWidth = range.getBoundingClientRect().width;\n\n          const colKey = getColumnKey(props.column);\n          const cellWidth = sizesMap[colKey];\n          if (rangeWidth + padding > cellWidth) {\n            isOverflow.value = true;\n          }\n        }\n      },\n      { deep: true }\n    );\n\n    return {\n      tablePrefixCls,\n      isRender,\n      renderFn,\n      displayCell,\n      tdProps,\n      tdStyle,\n      indentSize,\n      handleExpand,\n      handleAsyncExpand,\n      isRowExpanded,\n      showCell,\n      hasAction,\n      hasSorters,\n      hasFilters,\n      isSortColumn,\n      pagination,\n      cellRef,\n      ellipsisSpanRef,\n      isOverflow\n    };\n  }\n});\n</script>\n"],"names":["USkeleton","defineComponent","Render","ExpandIcon","UTooltip","inject","ref","computed","get","getStyle","getColumnKey","_createElementBlock","_mergeProps","_createBlock","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../src/components/Table/tableUnits/TableCell.vue"],"sourcesContent":["<template>\n  <ResizeObserver @resize=\"debouncedHandleResize\">\n    <td\n      v-if=\"showCell\"\n      ref=\"cellRef\"\n      v-bind=\"tdProps\"\n      :class=\"{\n      [`${prefixCls}-cell-custom`]: !!(tdProps as any)?.class,\n      [`${column.className}`]: !!column.className,\n      [`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,\n      [`${prefixCls}-cell-break-word`]: !!column.width,\n      [`${tablePrefixCls}-column-has-actions`]: hasAction(column),\n      [`${tablePrefixCls}-column-has-sorters`]: hasSorters(column),\n      [`${tablePrefixCls}-column-has-filters`]: hasFilters(column),\n      [`${tablePrefixCls}-column-sort`]: isSortColumn(column)\n    }\"\n      :style=\"tdStyle\"\n    >\n      <USkeleton v-if=\"skeleton\" :class=\"`${prefixCls}-skeleton-wrap`\" active>\n        <template v-if=\"column.skeleton\">\n          <USkeletonItem\n            v-for=\"(_, ski) in Array(column.skeleton.length)\"\n            :key=\"ski\"\n            :type=\"column.skeleton[ski].type\"\n            :style=\"column.skeleton[ski].style\"\n          />\n        </template>\n        <USkeletonItem v-else type=\"text\" style=\"width: 50%\" />\n      </USkeleton>\n      <template v-else>\n        <template v-if=\"expandIcon\">\n          <span :class=\"`${prefixCls}-indent indent-level-${indent}`\" :style=\"{ paddingLeft: `${indentSize * indent}px` }\" />\n          <ExpandIcon\n            need-indent-spaced\n            :expandable=\"!!(data as any).children\"\n            :need-loading=\"(data as any).children === true\"\n            :row-key=\"rowKey\"\n            :expanded=\"isRowExpanded(rowKey, true)\"\n            @expand=\"handleExpand\"\n            @async-expand=\"handleAsyncExpand\"\n          />\n        </template>\n        <Render\n          v-if=\"isRender\"\n          :render=\"\n            () => {\n              return renderFn?.({\n                row: data,\n                index,\n                rowKey,\n                pagination,\n                column\n              });\n            }\n          \"\n        />\n        <template v-else>\n          <template v-if=\"column.ellipsis && displayCell\">\n            <UTooltip :title=\"displayCell.toString()\" :disabled=\"!isOverflow\" :mouse-enter-delay=\"0.5\">\n              <span ref=\"ellipsisSpanRef\">\n                {{ displayCell }}\n              </span>\n            </UTooltip>\n          </template>\n          <template v-else>\n            {{ displayCell }}\n          </template>\n        </template>\n      </template>\n    </td>\n  </ResizeObserver>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, watch, ref, nextTick } from 'vue';\nimport type { PropType, CSSProperties } from 'vue';\nimport { get } from 'lodash-unified';\nimport UTooltip from '@uxd-ui/components/Tooltip';\nimport USkeleton from '@uxd-ui/components/Skeleton';\nimport Render from '../../base/Render';\nimport ExpandIcon from './ExpandIcon.vue';\nimport type { InnerColumn, TableContext } from '../Table.type';\nimport { debounce, getStyle } from '../../../utils';\nimport ResizeObserver from '../../base/ResizeObserver';\n\nconst USkeletonItem = USkeleton.Item;\n\nexport default defineComponent({\n  name: 'TableCell',\n  components: {\n    Render,\n    ExpandIcon,\n    UTooltip,\n    USkeleton,\n    USkeletonItem,\n    ResizeObserver\n  },\n  props: {\n    prefixCls: {\n      type: String\n    },\n    column: {\n      type: Object as PropType<InnerColumn>,\n      required: true\n    },\n    data: {\n      type: Object as PropType<Record<string, any>>,\n      required: true\n    },\n    rowKey: {\n      type: [String, Number],\n      required: true\n    },\n    index: {\n      type: Number,\n      required: true\n    },\n    indent: {\n      type: Number,\n      default: 20\n    },\n    expandIcon: {\n      type: Boolean,\n      default: false\n    },\n    skeleton: {\n      type: Boolean,\n      default: false\n    }\n  },\n  setup(props) {\n    const {\n      prefixCls: tablePrefixCls,\n      props: { indentSize },\n      expand: { handleExpandChange, isRowExpanded },\n      filterAndSorter: { hasAction, hasSorters, hasFilters, isSortColumn },\n      // size: { sizesMap },\n      pagination\n    } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const cellRef = ref();\n    const ellipsisSpanRef = ref();\n    const isOverflow = ref(false);\n    const isMinWidth = ref(false);\n\n    const renderFn = computed(() => {\n      const { render } = props.column;\n      return render || null;\n    });\n\n    const isRender = computed(() => {\n      return renderFn.value !== null;\n    });\n\n    const displayCell = computed(() => {\n      const { key, dataIndex } = props.column;\n      const record = props.data;\n      return get(record, dataIndex || key);\n    });\n\n    const tdProps = ref({});\n    const showCell = ref(true);\n\n    watch(\n      () => [props.column, props.data, props.index],\n      () => {\n        const { customCell } = props.column;\n        const attrs = {} as Record<string, any>;\n        // if (ellipsis && !render) {\n        //   attrs.title = displayCell.value;\n        // }\n        if (customCell) {\n          const { data, index } = props;\n          const _props = customCell(data, index);\n          const { colSpan, rowSpan } = _props;\n          showCell.value = colSpan !== 0 && rowSpan !== 0;\n          Object.keys(_props).forEach((key) => {\n            attrs[key] = _props[key];\n          });\n        }\n        tdProps.value = attrs;\n      },\n      { immediate: true }\n    );\n\n    const tdStyle = computed(() => {\n      const style = {} as CSSProperties;\n      const { align, left, right } = props.column;\n      if (align) {\n        style.textAlign = align;\n      }\n      if (left !== undefined) {\n        style.left = `${left}px`;\n      }\n      if (right !== undefined) {\n        style.right = `${right}px`;\n      }\n      if (isMinWidth.value) {\n        style.width = `${props.column.minWidth}px`;\n      }\n      return style;\n    });\n\n    const handleExpand = (e: any) => {\n      handleExpandChange({ row: props.data, rowKey: props.rowKey, tree: true }, e);\n    };\n\n    const handleAsyncExpand = (e: any, done: () => void) => {\n      handleExpandChange(\n        {\n          row: props.data,\n          rowKey: props.rowKey,\n          async: true,\n          tree: true,\n          done\n        },\n        e\n      );\n    };\n\n    const checkWidth = ({ target, width }: { target: HTMLElement; width: number }) => {\n      nextTick(() => {\n        if (ellipsisSpanRef.value) {\n          const cell = target;\n          const padding = (Number.parseInt(getStyle(cell, 'paddingLeft')) || 0) + (Number.parseInt(getStyle(cell, 'paddingRight')) || 0);\n          const span = ellipsisSpanRef.value;\n          const range = document.createRange();\n          range.setStart(span, 0);\n          range.setEnd(span, span.childNodes.length);\n          const rangeWidth = range.getBoundingClientRect().width;\n\n          // const cellWidth = Number(getStyle(cell, 'width'));\n          if (rangeWidth + padding > width) {\n            isOverflow.value = true;\n          } else {\n            isOverflow.value = false;\n          }\n        }\n      });\n    };\n\n    // onMounted(() => {\n    //   checkOverflow(cellRef.value);\n    // });\n\n    const debouncedHandleResize = debounce((args: any) => checkWidth(args), 100);\n\n    return {\n      tablePrefixCls,\n      isRender,\n      renderFn,\n      displayCell,\n      tdProps,\n      tdStyle,\n      indentSize,\n      handleExpand,\n      handleAsyncExpand,\n      isRowExpanded,\n      showCell,\n      hasAction,\n      hasSorters,\n      hasFilters,\n      isSortColumn,\n      pagination,\n      cellRef,\n      ellipsisSpanRef,\n      isOverflow,\n      debouncedHandleResize\n    };\n  }\n});\n</script>\n"],"names":["USkeleton","defineComponent","Render","ExpandIcon","UTooltip","ResizeObserver","inject","ref","computed","get","getStyle","debounce","_createBlock","_createElementBlock","_mergeProps","_normalizeClass","_Fragment","_normalizeStyle","_createElementVNode","_createVNode","_a"],"mappings":"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"}

package/lib/components/Table/tableUnits/TableCell.vue.d.ts

@@ -52,6 +52,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     cellRef: import("vue").Ref<any, any>;
     ellipsisSpanRef: import("vue").Ref<any, any>;
     isOverflow: import("vue").Ref<boolean, boolean>;
+    debouncedHandleResize: import("../../../utils").DebounceReturn;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;
@@ -108,7 +109,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         expandIcon: {
             type: PropType<import("../../../utils").IconPropType>;
-            default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+            default: any;
         };
         needIndentSpaced: {
             type: BooleanConstructor;
@@ -134,7 +135,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         expandIcon: {
             type: PropType<import("../../../utils").IconPropType>;
-            default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+            default: any;
         };
         needIndentSpaced: {
             type: BooleanConstructor;
@@ -149,7 +150,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         "onAsync-expand"?: (...args: any[]) => any;
     }>, {
         expanded: boolean;
-        expandIcon: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+        expandIcon: any;
         expandable: boolean;
         needIndentSpaced: boolean;
         needLoading: boolean;
@@ -1126,5 +1127,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, {}, {
         ImageIcon: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    ResizeObserver: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onResize?: (...args: any[]) => any;
+    }>, {
+        disabled: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/Table/tableUnits/TableRow.vue.d.ts

@@ -151,6 +151,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         cellRef: import("vue").Ref<any, any>;
         ellipsisSpanRef: import("vue").Ref<any, any>;
         isOverflow: import("vue").Ref<boolean, boolean>;
+        debouncedHandleResize: import("../../../utils").DebounceReturn;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         prefixCls: {
             type: StringConstructor;
@@ -207,7 +208,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             expandIcon: {
                 type: PropType<import("../../..").IconPropType>;
-                default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+                default: any;
             };
             needIndentSpaced: {
                 type: BooleanConstructor;
@@ -233,7 +234,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             expandIcon: {
                 type: PropType<import("../../..").IconPropType>;
-                default: () => import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+                default: any;
             };
             needIndentSpaced: {
                 type: BooleanConstructor;
@@ -248,7 +249,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             "onAsync-expand"?: (...args: any[]) => any;
         }>, {
             expanded: boolean;
-            expandIcon: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+            expandIcon: any;
             expandable: boolean;
             needIndentSpaced: boolean;
             needLoading: boolean;
@@ -1225,6 +1226,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, {}, {
             ImageIcon: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        ResizeObserver: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "resize"[], "resize", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            disabled: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & Readonly<{
+            onResize?: (...args: any[]) => any;
+        }>, {
+            disabled: boolean;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/components/Tabs/TabNav.js

@@ -19,7 +19,7 @@ const _sfc_main = vue.defineComponent({
   components: {
     TabBar: TabBar["default"],
     UIcon: index.UIcon,
-    CircleX: lucideVueNext.CircleX,
+    X: lucideVueNext.X,
     ChevronLeft: lucideVueNext.ChevronLeft,
     ChevronRight: lucideVueNext.ChevronRight,
     Plus: lucideVueNext.Plus,
@@ -348,7 +348,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_UIcon = vue.resolveComponent("UIcon");
   const _component_TabBar = vue.resolveComponent("TabBar");
   const _component_URender = vue.resolveComponent("URender");
-  const _component_CircleX = vue.resolveComponent("CircleX");
+  const _component_X = vue.resolveComponent("X");
   const _component_ChevronRight = vue.resolveComponent("ChevronRight");
   const _component_Plus = vue.resolveComponent("Plus");
   return vue.openBlock(), vue.createElementBlock("div", {
@@ -456,7 +456,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, [
                   vue.createVNode(_component_UIcon, null, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_component_CircleX)
+                      vue.createVNode(_component_X)
                     ]),
                     _: 1
                   })
@@ -487,7 +487,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.addable || _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 2,
         class: vue.normalizeClass({
-          [`${_ctx.prefixCls}-item`]: true,
           [`${_ctx.prefixCls}-item-add-btn`]: true
         }),
         onClick: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleTabAdd && _ctx.handleTabAdd(...args), ["stop"]))

package/lib/components/Tabs/TabNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNav.js","sources":["../../../../src/components/Tabs/TabNav.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      [`${prefixCls}-bar`]: true,\n      [`${prefixCls}-${type}`]: true,\n      [`${prefixCls}-${size}`]: true,\n      [`${prefixCls}-${tabPosition}-bar`]: true,\n      [`${prefixCls}-vertical`]: isVertical,\n      [`${prefixCls}-extra-${extraPosition}`]: !isVertical,\n      [`${prefixCls}-centered`]: !isVertical && centered\n    }\"\n    tabindex=\"0\"\n    @keydown=\"handleTabNavKeydown\"\n  >\n    <div v-if=\"$slots.extra\" :class=\"`${prefixCls}-extra-content`\">\n      <slot name=\"extra\">\n        <!-- <span v-if=\"addable || editable\" :class=\"`${prefixCls}-add-btn`\" @click.stop=\"handleTabAdd\">\n          <UIcon>\n            <ULineAdd />\n          </UIcon>\n        </span> -->\n      </slot>\n    </div>\n\n    <div\n      ref=\"container\"\n      :class=\"[\n        `${prefixCls}-container`,\n        {\n          [`${prefixCls}-scrolling`]: scrollable.show\n        }\n      ]\"\n      @wheel.stop=\"handleTabNavScroll\"\n    >\n      <span\n        v-if=\"scrollable.show\"\n        :class=\"[\n          `${prefixCls}-btn`,\n          `${prefixCls}-prev`,\n          {\n            [`${prefixCls}-btn-disabled`]: !scrollable.prev\n          }\n        ]\"\n        @click.stop=\"handleScrollPrev\"\n      >\n        <UIcon>\n          <ChevronLeft />\n        </UIcon>\n      </span>\n      <div :ref=\"saveRef('navScroll')\" :class=\"`${prefixCls}-scroll`\">\n        <div :ref=\"saveRef('nav')\" :style=\"navStyle\" :class=\"[`${prefixCls}-content`]\">\n          <TabBar\n            v-if=\"type === 'line'\"\n            ref=\"tabBarRef\"\n            :tabs=\"tabs\"\n            :active=\"stateValue\"\n            :tab-position=\"tabPosition\"\n            :prefix-cls=\"prefixCls\"\n            :animated=\"animated\"\n            :fixed-distance=\"fixedDistance\"\n          />\n\n          <div\n            v-for=\"(item, index) in tabs\"\n            :key=\"item.key\"\n            :ref=\"saveRef(`tab_${item.key}`)\"\n            :class=\"{\n              [`${prefixCls}-item`]: true,\n              [`${prefixCls}-item-active`]: stateValue ? stateValue === item.key : index === 0,\n              [`${prefixCls}-item-disabled`]: item.disabled,\n              [`${prefixCls}-item-closable`]: (editable || closable) && item.closable\n            }\"\n            @click=\"(e: any) => handleTabClick(item, index, e)\"\n          >\n            <span\n              :class=\"{\n                [`${prefixCls}-item-content`]: true\n              }\"\n            >\n              <URender v-if=\"item.slot !== undefined\" :render=\"item.slot\" />\n              <template v-else-if=\"$slots.tab\">\n                <slot name=\"tab\" v-bind=\"{ item }\" />\n              </template>\n              <template v-else>{{ item.label }}</template>\n\n              <span\n                v-if=\"editable || closable\"\n                :class=\"{\n                  [`${prefixCls}-item-close`]: true,\n                  [`${prefixCls}-item-close-hidden`]: item.closable === false\n                }\"\n                @click.stop=\"(e: any) => handleTabRemove(item, index, e)\"\n              >\n                <UIcon>\n                  <CircleX />\n                </UIcon>\n              </span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <span\n        v-if=\"scrollable.show\"\n        :class=\"[\n          `${prefixCls}-btn`,\n          `${prefixCls}-next`,\n          {\n            [`${prefixCls}-btn-disabled`]: !scrollable.next\n          }\n        ]\"\n        @click.stop=\"handleScrollNext\"\n      >\n        <UIcon>\n          <ChevronRight />\n        </UIcon>\n      </span>\n      <div\n        v-if=\"addable || editable\"\n        :class=\"{\n          [`${prefixCls}-item`]: true,\n          [`${prefixCls}-item-add-btn`]: true\n        }\"\n        @click.stop=\"handleTabAdd\"\n      >\n        <UIcon>\n          <Plus />\n        </UIcon>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, defineComponent, reactive, provide, computed, watch, nextTick, onMounted, onBeforeUnmount, onUpdated } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { CircleX, ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next';\nimport TabBar from './TabBar.vue';\nimport URender from '../base/Render';\nimport useResizeObserver from '../base/hooks/useResizeObserver';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport KeyCode from '../../utils/KeyCode';\nimport { debounce } from '../../utils/tools';\nimport { tabNavProps, tabNavEmits } from './Tabs.type';\nimport type { TabsGuard, TabInfo, TabPaneInstance } from './Tabs.type';\n\nexport default defineComponent({\n  name: 'UTabNav',\n  components: {\n    TabBar,\n    UIcon,\n    CircleX,\n    ChevronLeft,\n    ChevronRight,\n    Plus,\n    URender\n  },\n  props: tabNavProps,\n  emits: tabNavEmits,\n  setup(props, { emit }) {\n    const { prefixCls } = useGlobalConfig('tab-nav');\n    const stateValue = ref(props.modelValue);\n    const scrollable = reactive({\n      show: false,\n      prev: false,\n      next: false\n    });\n    const container = ref(null);\n    const tabNavRefs = reactive({} as Record<string, Element>);\n\n    const saveRef = (key: string) => {\n      return (el: any) => {\n        tabNavRefs[key] = el;\n      };\n    };\n    // ========= scroll ==========\n    // #region\n    const isVertical = computed(() => {\n      return props.tabPosition === 'left' || props.tabPosition === 'right';\n    });\n\n    const getOffsetWH = (node: any) => {\n      let prop = 'offsetWidth';\n      if (isVertical.value) {\n        prop = 'offsetHeight';\n      }\n      return node[prop];\n    };\n    let stateOffset = 0;\n    const navStyle = ref({});\n\n    const getMinOffset = () => {\n      const { nav } = tabNavRefs;\n      const tabNavContainer = tabNavRefs.navScroll;\n      const navWH = getOffsetWH(nav);\n      const containerWH = getOffsetWH(tabNavContainer);\n      return containerWH - navWH;\n    };\n\n    const setOffset = (offset: number) => {\n      const target = Math.min(0, offset);\n      if (stateOffset !== target) {\n        stateOffset = target;\n      }\n      const direction = isVertical.value ? 'Y' : 'X';\n      navStyle.value = {\n        ...navStyle.value,\n        transform: `translate${direction}(${target}px)`\n      };\n    };\n\n    const updateScroll = () => {\n      const { nav } = tabNavRefs;\n      if (!nav) return;\n      const minOffset = getMinOffset();\n      if (minOffset < 0) {\n        scrollable.show = true;\n        scrollable.prev = stateOffset < 0;\n        scrollable.next = minOffset < stateOffset;\n        if (stateOffset < minOffset) {\n          setOffset(minOffset);\n        }\n      } else {\n        scrollable.show = false;\n        if (stateOffset < 0) {\n          setOffset(0);\n        }\n      }\n    };\n\n    const scrollToActiveTab = () => {\n      if (!scrollable.show) return;\n      const activeKey = props.modelValue;\n      const activeTab = tabNavRefs[`tab_${activeKey}`];\n      const tabNavContainer = tabNavRefs.navScroll;\n      if (!activeTab) return;\n      const containerBounding = tabNavContainer.getBoundingClientRect();\n      const activeTabBounding = activeTab.getBoundingClientRect();\n      const propLT = isVertical.value ? 'top' : 'left';\n      const containerLT = containerBounding[propLT];\n      const activeTabLT = activeTabBounding[propLT];\n      const propRB = isVertical.value ? 'bottom' : 'right';\n      const containerRB = containerBounding[propRB];\n      const activeTabRB = activeTabBounding[propRB];\n\n      let offset = stateOffset;\n      if (containerLT > activeTabLT) {\n        offset += containerLT - activeTabLT;\n        setOffset(offset);\n      } else if (containerRB < activeTabRB) {\n        offset -= activeTabRB - containerRB;\n        setOffset(offset);\n      }\n    };\n\n    const handleScrollPrev = () => {\n      if (!scrollable.prev) return;\n      const containerWH = getOffsetWH(tabNavRefs.navScroll);\n      setOffset(stateOffset + containerWH);\n    };\n\n    const handleScrollNext = () => {\n      if (!scrollable.next) return;\n      const containerWH = getOffsetWH(tabNavRefs.navScroll);\n      setOffset(stateOffset - containerWH);\n    };\n\n    const handleTabNavScroll = (evt: WheelEvent) => {\n      if (!scrollable.show) return;\n\n      evt.preventDefault();\n\n      navStyle.value = {\n        ...navStyle.value,\n        transitionDuration: '0s'\n      };\n      setOffset(stateOffset + (evt as any).wheelDelta);\n      nextTick(() => {\n        navStyle.value = {\n          ...navStyle.value,\n          transitionDuration: ''\n        };\n      });\n    };\n\n    onMounted(() => {\n      updateScroll();\n      setTimeout(() => scrollToActiveTab(), 300);\n    });\n\n    const preTabPosition = ref(props.tabPosition);\n    const preAcitve = ref(props.modelValue);\n    const update = () => {\n      if (preTabPosition.value !== props.tabPosition) {\n        setOffset(0);\n      }\n      updateScroll();\n      if (preAcitve.value !== props.modelValue) {\n        nextTick(() => {\n          setTimeout(() => {\n            scrollToActiveTab();\n          }, 300);\n        });\n      }\n      preTabPosition.value = props.tabPosition;\n      preAcitve.value = props.modelValue;\n    };\n\n    onUpdated(() => {\n      update();\n    });\n\n    const debounceResize = debounce(() => {\n      updateScroll();\n      setTimeout(() => {\n        scrollToActiveTab();\n      }, 300);\n    }, 200);\n\n    useResizeObserver(container, debounceResize);\n\n    onBeforeUnmount(() => {\n      debounceResize.cancel();\n    });\n\n    // #endregion\n\n    // ========== event =============\n    // #region\n    const getClosable = (pane: TabInfo | TabPaneInstance) => {\n      if (props.editable || props.closable) {\n        if (pane.closable === undefined) {\n          return true;\n        }\n        return pane.closable;\n      }\n      return pane.closable;\n    };\n\n    const emitValueChange = (val: string) => {\n      stateValue.value = val;\n      if (props.modelValue) {\n        emit('update:modelValue', val);\n      }\n    };\n\n    const getNextActiveTab = (next: boolean) => {\n      const activeKey = props.modelValue;\n      const children: TabInfo[] = [];\n      props.tabs.forEach((tab) => {\n        if (tab && !tab.disabled) {\n          if (next) {\n            children.push(tab);\n          } else {\n            children.unshift(tab);\n          }\n        }\n      });\n\n      const { length } = children;\n      let ret = length && children[0];\n      children.every((c, i) => {\n        if (c.key === activeKey) {\n          if (i === length - 1) {\n            ret = children[0];\n          } else {\n            ret = children[i + 1];\n          }\n          return false;\n        }\n        return true;\n      });\n      return ret;\n    };\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        stateValue.value = val;\n      }\n    );\n\n    const getActivePane = () => {\n      const activeKey = stateValue.value;\n      const pane = props.tabs.find((x) => x.key === activeKey);\n      return pane;\n    };\n\n    const handleTabClick = async (pane: TabInfo | TabPaneInstance, index: number, e: any) => {\n      if (pane.disabled) {\n        return;\n      }\n      const guard = props.guard as TabsGuard;\n      if (guard?.onClickBefore) {\n        const res = await guard.onClickBefore(e);\n        if (!res) return;\n      }\n      emitValueChange(pane.key);\n      emit('tab-click', pane, index, e);\n      if (guard?.onClickAfter) guard.onClickAfter(e);\n    };\n\n    const handleTabRemove = (pane: TabInfo | TabPaneInstance, index?: number, e?: any) => {\n      if (pane.disabled) {\n        return;\n      }\n      emit('tab-remove', pane, index, e);\n    };\n\n    const handleTabAdd = (e?: any) => {\n      emit('tab-add', e);\n    };\n\n    const handleTabChange = (tab: TabInfo) => {\n      emitValueChange(tab.key);\n      const index = props.tabs.findIndex((x) => x.key === tab.key);\n      emit('tab-click', tab, index);\n    };\n\n    const handleTabNavKeydown = (e: KeyboardEvent) => {\n      const { which } = e;\n\n      switch (which) {\n        case KeyCode.RIGHT:\n        case KeyCode.DOWN: {\n          const newTab = getNextActiveTab(true);\n          newTab && handleTabChange(newTab);\n          break;\n        }\n        case KeyCode.LEFT:\n        case KeyCode.UP: {\n          const newTab = getNextActiveTab(false);\n          newTab && handleTabChange(newTab);\n          break;\n        }\n        case KeyCode.DELETE: {\n          const activePane = getActivePane();\n          if (activePane) {\n            const closable = getClosable(activePane);\n            if (closable) {\n              handleTabRemove(activePane);\n            }\n          }\n          break;\n        }\n        case KeyCode.INSERT: {\n          if (props.editable || props.addable) {\n            handleTabAdd();\n          }\n          break;\n        }\n        default:\n          break;\n      }\n    };\n    // #endregion\n\n    const tabBarRef = ref<InstanceType<typeof TabBar> | null>(null);\n    let observer: MutationObserver | null = null;\n\n    const handleNavChange = () => {\n      tabBarRef.value?.update();\n    };\n\n    watch(tabNavRefs, () => {\n      if (tabNavRefs.nav && !observer) {\n        observer = new MutationObserver(handleNavChange);\n        observer.observe(tabNavRefs.nav, {\n          childList: true,\n          subtree: true,\n          attributes: false\n        });\n      }\n    });\n\n    onBeforeUnmount(() => {\n      if (observer) {\n        observer.disconnect();\n        observer = null;\n      }\n    });\n\n    provide('TabNavContext', {\n      tabNavRefs\n    });\n\n    return {\n      stateValue,\n      prefixCls,\n      scrollToActiveTab,\n      scrollable,\n      container,\n      saveRef,\n      isVertical,\n      getClosable,\n      navStyle,\n      tabBarRef,\n      handleTabClick,\n      handleTabRemove,\n      handleTabAdd,\n      handleTabNavKeydown,\n      handleScrollPrev,\n      handleScrollNext,\n      handleTabNavScroll\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","TabBar","UIcon","CircleX","ChevronLeft","ChevronRight","Plus","URender","tabNavProps","tabNavEmits","useGlobalConfig","ref","reactive","computed","debounce","KeyCode","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_createVNode","_normalizeStyle","_createBlock","_Fragment","_mergeProps","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;AAiJA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,WACAC;AAAA,aACAC;AAAA,iBACAC;AAAA,kBACAC;AAAA,UACAC;AAAA,aACAC;AAAA;AACF,EACA,OAAOC;AAAA,EACP,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,QAAQ;UACf,EAAE,cAAcC,2BAAgB,SAAS;UACzC,aAAaC,QAAI,MAAM,UAAU;UACjC,aAAaC,aAAS;AAAA,MAC1B,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,KACP;UACK,YAAYD,QAAI,IAAI;UACpB,aAAaC,aAAS,EAA6B;UAEnD,UAAU,CAAC,QAAgB;aACxB,CAAC,OAAY;mBACP,OAAO;AAAA;AACpB;UAII,aAAaC,aAAS,MAAM;aACzB,MAAM,gBAAgB,UAAU,MAAM,gBAAgB;AAAA,KAC9D;UAEK,cAAc,CAAC,SAAc;UAC7B,OAAO;UACP,WAAW,OAAO;eACb;AAAA;aAEF,KAAK;AAAA;QAEV,cAAc;UACZ,WAAWF,QAAI,EAAE;UAEjB,eAAe,MAAM;YACnB,EAAE,QAAQ;YACV,kBAAkB,WAAW;YAC7B,QAAQ,YAAY,GAAG;YACvB,cAAc,YAAY,eAAe;aACxC,cAAc;AAAA;UAGjB,YAAY,CAAC,WAAmB;YAC9B,SAAS,KAAK,IAAI,GAAG,MAAM;UAC7B,gBAAgB,QAAQ;sBACZ;AAAA;YAEV,YAAY,WAAW,QAAQ,MAAM;eAClC,QAAQ;AAAA,QACf,GAAG,SAAS;AAAA,QACZ,WAAW,YAAY,aAAa;AAAA;AACtC;UAGI,eAAe,MAAM;YACnB,EAAE,QAAQ;UACZ,CAAC;;YACC,YAAY;UACd,YAAY,GAAG;mBACN,OAAO;mBACP,OAAO,cAAc;mBACrB,OAAO,YAAY;YAC1B,cAAc,WAAW;oBACjB,SAAS;AAAA;AACrB,aACK;mBACM,OAAO;YACd,cAAc,GAAG;oBACT,CAAC;AAAA;AACb;AACF;UAGI,oBAAoB,MAAM;UAC1B,CAAC,WAAW;;YACV,YAAY,MAAM;YAClB,YAAY,WAAW,OAAO;YAC9B,kBAAkB,WAAW;UAC/B,CAAC;;YACC,oBAAoB,gBAAgB;YACpC,oBAAoB,UAAU;YAC9B,SAAS,WAAW,QAAQ,QAAQ;YACpC,cAAc,kBAAkB;YAChC,cAAc,kBAAkB;YAChC,SAAS,WAAW,QAAQ,WAAW;YACvC,cAAc,kBAAkB;YAChC,cAAc,kBAAkB;UAElC,SAAS;UACT,cAAc,aAAa;kBACnB,cAAc;kBACd,MAAM;AAAA,iBACP,cAAc,aAAa;kBAC1B,cAAc;kBACd,MAAM;AAAA;AAClB;UAGI,mBAAmB,MAAM;UACzB,CAAC,WAAW;;YACV,cAAc,YAAY,WAAW,SAAS;gBAC1C,cAAc,WAAW;AAAA;UAG/B,mBAAmB,MAAM;UACzB,CAAC,WAAW;;YACV,cAAc,YAAY,WAAW,SAAS;gBAC1C,cAAc,WAAW;AAAA;UAG/B,qBAAqB,CAAC,QAAoB;UAC1C,CAAC,WAAW;;UAEZ;eAEK,QAAQ;AAAA,QACf,GAAG,SAAS;AAAA,QACZ,oBAAoB;AAAA;gBAEZ,cAAe,IAAY,UAAU;mBACtC,MAAM;iBACJ,QAAQ;AAAA,UACf,GAAG,SAAS;AAAA,UACZ,oBAAoB;AAAA;AACtB,OACD;AAAA;kBAGO,MAAM;;iBAEH,MAAM,qBAAqB,GAAG;AAAA,KAC1C;UAEK,iBAAiBA,QAAI,MAAM,WAAW;UACtC,YAAYA,QAAI,MAAM,UAAU;UAChC,SAAS,MAAM;UACf,eAAe,UAAU,MAAM,aAAa;kBACpC,CAAC;AAAA;;UAGT,UAAU,UAAU,MAAM,YAAY;qBAC/B,MAAM;qBACF,MAAM;;AACG,aACjB,GAAG;AAAA,SACP;AAAA;qBAEY,QAAQ,MAAM;gBACnB,QAAQ,MAAM;AAAA;kBAGhB,MAAM;;AACP,KACR;UAEK,iBAAiBG,eAAS,MAAM;;iBAEzB,MAAM;;AACG,SACjB,GAAG;AAAA,OACL,GAAG;iCAEY,WAAW,cAAc;wBAE3B,MAAM;qBACL;AAAO,KACvB;UAMK,cAAc,CAAC,SAAoC;UACnD,MAAM,YAAY,MAAM,UAAU;YAChC,KAAK,aAAa,QAAW;iBACxB;AAAA;eAEF,KAAK;AAAA;aAEP,KAAK;AAAA;UAGR,kBAAkB,CAAC,QAAgB;iBAC5B,QAAQ;UACf,MAAM,YAAY;aACf,qBAAqB,GAAG;AAAA;AAC/B;UAGI,mBAAmB,CAAC,SAAkB;YACpC,YAAY,MAAM;YAClB,WAAsB;YACtB,KAAK,QAAQ,CAAC,QAAQ;YACtB,OAAO,CAAC,IAAI,UAAU;cACpB,MAAM;qBACC,KAAK,GAAG;AAAA,iBACZ;qBACI,QAAQ,GAAG;AAAA;AACtB;AACF,OACD;YAEK,EAAE,WAAW;UACf,MAAM,UAAU,SAAS;eACpB,MAAM,CAAC,GAAG,MAAM;YACnB,EAAE,QAAQ,WAAW;cACnB,MAAM,SAAS,GAAG;kBACd,SAAS;AAAA,iBACV;kBACC,SAAS,IAAI;AAAA;iBAEd;AAAA;eAEF;AAAA,OACR;aACM;AAAA;;MAIP,MAAM,MAAM;AAAA,MACZ,CAAC,QAAQ;mBACI,QAAQ;AAAA;AACrB;UAGI,gBAAgB,MAAM;YACpB,YAAY,WAAW;YACvB,OAAO,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,QAAQ,SAAS;aAChD;AAAA;UAGH,iBAAiB,OAAO,MAAiC,OAAe,MAAW;UACnF,KAAK,UAAU;;;YAGb,QAAQ,MAAM;UAChB,+BAAO,eAAe;cAClB,MAAM,MAAM,MAAM,cAAc,CAAC;YACnC,CAAC;;;sBAES,KAAK,GAAG;WACnB,aAAa,MAAM,OAAO,CAAC;UAC5B,+BAAO;cAAoB,aAAa,CAAC;AAAA;UAGzC,kBAAkB,CAAC,MAAiC,OAAgB,MAAY;UAChF,KAAK,UAAU;;;WAGd,cAAc,MAAM,OAAO,CAAC;AAAA;UAG7B,eAAe,CAAC,MAAY;WAC3B,WAAW,CAAC;AAAA;UAGb,kBAAkB,CAAC,QAAiB;sBACxB,IAAI,GAAG;YACjB,QAAQ,MAAM,KAAK,UAAU,CAAC,MAAM,EAAE,QAAQ,IAAI,GAAG;WACtD,aAAa,KAAK,KAAK;AAAA;UAGxB,sBAAsB,CAAC,MAAqB;YAC1C,EAAE,UAAU;cAEV;AAAA,aACDC,mBAAQ;AAAA,aACRA,mBAAQ,MAAM;gBACX,SAAS,iBAAiB,IAAI;oBAC1B,gBAAgB,MAAM;;;AAElC,aACKA,mBAAQ;AAAA,aACRA,mBAAQ,IAAI;gBACT,SAAS,iBAAiB,KAAK;oBAC3B,gBAAgB,MAAM;;;AAElC,aACKA,mBAAQ,QAAQ;gBACb,aAAa;cACf,YAAY;kBACR,WAAW,YAAY,UAAU;gBACnC,UAAU;8BACI,UAAU;AAAA;AAC5B;;;AAGJ,aACKA,mBAAQ,QAAQ;cACf,MAAM,YAAY,MAAM,SAAS;;AACtB;;;AAGjB;;;;UAOE,YAAYJ,QAAwC,IAAI;QAC1D,WAAoC;UAElC,kBAAkB,MAAM;AAtUlC;sBAuUgB,6BAAO;AAAA;cAGb,YAAY,MAAM;UAClB,WAAW,OAAO,CAAC,UAAU;mBACpB,IAAI,iBAAiB,eAAe;iBACtC,QAAQ,WAAW,KAAK;AAAA,UAC/B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,SACb;AAAA;AACH,KACD;wBAEe,MAAM;UAChB,UAAU;iBACH;mBACE;AAAA;AACb,KACD;gBAEO,iBAAiB;AAAA,MACvB;AAAA,KACD;WAEM;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;;;;;;;;0BAxfCK,uBAgIM;IA/HH,OAAKC;UAAc,uBAAS;AAAA,UAAyB,kBAAa,cAAI;AAAA,UAAqB,kBAAa,cAAI;AAAA,UAAqB,kBAAa,yBAAW;AAAA,UAAyB,4BAAuB;UAAsB,wBAAmB,uBAAa,CAAM;UAAsB,4BAAS,CAAe,mBAAc;;IASlU,UAAS;AAAA,IACR,WAAO,uCAAE;;IAEC,YAAO,0BAAlBD,uBAQM;;MARoB,OAAKC,sBAAK,8BAAS;AAAA;MAC3CC,eAMO,0BANP,MAMO;AAAA,QALLC;;;IAQJC,uBAwGM;MAvGJ,KAAI;AAAA,MACH,OAAKH;WAAe;;cAA+C,6BAAwB,gBAAW;AAAA;;MAMtG,SAAK,yDAAO,6DAAkB;;MAGvB,gBAAW,yBADnBD,uBAcO;;QAZJ,OAAKC;aAAiB;aAA8B;;gBAA8C,gCAAS,CAAmB,gBAAW;AAAA;;QAOzI,SAAK,yDAAO,yDAAgB;;QAE7BI,gBAEQ;+BADN,MAAe;AAAA,YAAfA,gBAAe;;;;;MAGnBD,uBAmDM;QAnDA,KAAK,aAAO;QAAgB,OAAKH,sBAAK,uBAAS;AAAA;QACnDG,uBAiDM;UAjDA,KAAK,aAAO;UAAU,OAAKE,mBAAE,aAAQ;AAAA,UAAG,OAAKL,uBAAM,wBAAS;;UAExD,cAAI,2BADZM,gBASE;;YAPA,KAAI;AAAA,YACH,MAAM;YACN,QAAQ;YACR,gBAAc;YACd,cAAY;YACZ,UAAU;YACV,kBAAgB;;gCAGnBP,uBAoCMQ,mCAnCoB,WAAI,CAApB,MAAM,UAAK;oCADrBR,uBAoCM;cAlCH,KAAK,KAAK;AAAA;cACV,KAAK,aAAO,OAAQ,KAAK,KAAG;AAAA,cAC5B,OAAKC;oBAAsB,wBAAS;AAAA,oBAAkC,+BAA0B,kBAAa,oBAAe,KAAK,MAAM,UAAK;AAAA,oBAA0B,iCAA4B,KAAK;AAAA,oBAA4B,kCAA6B,iBAAY,kBAAa,KAAK;AAAA;cAM9R,SAAK,CAAG,MAAW,oBAAe,MAAM,OAAO,CAAC;AAAA;cAEjDG,uBAuBO;gBAtBJ,OAAKH;sBAAwB,gCAAS;AAAA;;gBAIxB,KAAK,SAAS,2BAA7BM,gBAA8D;;kBAArB,QAAQ,KAAK;AAAA,2CACjC,YAAO,MAC1BL,eAAqC,oBAArCO,eAAqC;AAAA;;qBAAV,6BAE7BT,uBAA4CQ;0DAAxB,KAAK,KAAK;;gBAGtB,iBAAY,kCADpBR,uBAWO;;kBATJ,OAAKC;wBAA0B,8BAAS;AAAA,wBAA4C,qCAAgC,KAAK,aAAQ;AAAA;kBAIjI,SAAKS,mBAAQ,MAAW,qBAAgB,MAAM,OAAO,CAAC;;kBAEvDL,gBAEQ;yCADN,MAAW;AAAA,sBAAXA,gBAAW;;;;;;;;;;MAQf,gBAAW,yBADnBL,uBAcO;;QAZJ,OAAKC;aAAiB;aAA8B;;gBAA8C,gCAAS,CAAmB,gBAAW;AAAA;;QAOzI,SAAK,yDAAO,yDAAgB;;QAE7BI,gBAEQ;+BADN,MAAgB;AAAA,YAAhBA,gBAAgB;;;;;MAIZ,gBAAW,kCADnBL,uBAWM;;QATH,OAAKC;cAAkB,wBAAS;AAAA,cAA8B,gCAAS;AAAA;QAIvE,SAAK,yDAAO,iDAAY;;QAEzBI,gBAEQ;+BADN,MAAQ;AAAA,YAARA,gBAAQ;;;;;;;;;;;;"}
+{"version":3,"file":"TabNav.js","sources":["../../../../src/components/Tabs/TabNav.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{\n      [`${prefixCls}-bar`]: true,\n      [`${prefixCls}-${type}`]: true,\n      [`${prefixCls}-${size}`]: true,\n      [`${prefixCls}-${tabPosition}-bar`]: true,\n      [`${prefixCls}-vertical`]: isVertical,\n      [`${prefixCls}-extra-${extraPosition}`]: !isVertical,\n      [`${prefixCls}-centered`]: !isVertical && centered\n    }\"\n    tabindex=\"0\"\n    @keydown=\"handleTabNavKeydown\"\n  >\n    <div v-if=\"$slots.extra\" :class=\"`${prefixCls}-extra-content`\">\n      <slot name=\"extra\">\n        <!-- <span v-if=\"addable || editable\" :class=\"`${prefixCls}-add-btn`\" @click.stop=\"handleTabAdd\">\n          <UIcon>\n            <ULineAdd />\n          </UIcon>\n        </span> -->\n      </slot>\n    </div>\n\n    <div\n      ref=\"container\"\n      :class=\"[\n        `${prefixCls}-container`,\n        {\n          [`${prefixCls}-scrolling`]: scrollable.show\n        }\n      ]\"\n      @wheel.stop=\"handleTabNavScroll\"\n    >\n      <span\n        v-if=\"scrollable.show\"\n        :class=\"[\n          `${prefixCls}-btn`,\n          `${prefixCls}-prev`,\n          {\n            [`${prefixCls}-btn-disabled`]: !scrollable.prev\n          }\n        ]\"\n        @click.stop=\"handleScrollPrev\"\n      >\n        <UIcon>\n          <ChevronLeft />\n        </UIcon>\n      </span>\n      <div :ref=\"saveRef('navScroll')\" :class=\"`${prefixCls}-scroll`\">\n        <div :ref=\"saveRef('nav')\" :style=\"navStyle\" :class=\"[`${prefixCls}-content`]\">\n          <TabBar\n            v-if=\"type === 'line'\"\n            ref=\"tabBarRef\"\n            :tabs=\"tabs\"\n            :active=\"stateValue\"\n            :tab-position=\"tabPosition\"\n            :prefix-cls=\"prefixCls\"\n            :animated=\"animated\"\n            :fixed-distance=\"fixedDistance\"\n          />\n\n          <div\n            v-for=\"(item, index) in tabs\"\n            :key=\"item.key\"\n            :ref=\"saveRef(`tab_${item.key}`)\"\n            :class=\"{\n              [`${prefixCls}-item`]: true,\n              [`${prefixCls}-item-active`]: stateValue ? stateValue === item.key : index === 0,\n              [`${prefixCls}-item-disabled`]: item.disabled,\n              [`${prefixCls}-item-closable`]: (editable || closable) && item.closable\n            }\"\n            @click=\"(e: any) => handleTabClick(item, index, e)\"\n          >\n            <span\n              :class=\"{\n                [`${prefixCls}-item-content`]: true\n              }\"\n            >\n              <URender v-if=\"item.slot !== undefined\" :render=\"item.slot\" />\n              <template v-else-if=\"$slots.tab\">\n                <slot name=\"tab\" v-bind=\"{ item }\" />\n              </template>\n              <template v-else>{{ item.label }}</template>\n\n              <span\n                v-if=\"editable || closable\"\n                :class=\"{\n                  [`${prefixCls}-item-close`]: true,\n                  [`${prefixCls}-item-close-hidden`]: item.closable === false\n                }\"\n                @click.stop=\"(e: any) => handleTabRemove(item, index, e)\"\n              >\n                <UIcon>\n                  <X />\n                </UIcon>\n              </span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <span\n        v-if=\"scrollable.show\"\n        :class=\"[\n          `${prefixCls}-btn`,\n          `${prefixCls}-next`,\n          {\n            [`${prefixCls}-btn-disabled`]: !scrollable.next\n          }\n        ]\"\n        @click.stop=\"handleScrollNext\"\n      >\n        <UIcon>\n          <ChevronRight />\n        </UIcon>\n      </span>\n      <div\n        v-if=\"addable || editable\"\n        :class=\"{\n          [`${prefixCls}-item-add-btn`]: true\n        }\"\n        @click.stop=\"handleTabAdd\"\n      >\n        <UIcon>\n          <Plus />\n        </UIcon>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, defineComponent, reactive, provide, computed, watch, nextTick, onMounted, onBeforeUnmount, onUpdated } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { ChevronLeft, ChevronRight, Plus, X } from 'lucide-vue-next';\nimport TabBar from './TabBar.vue';\nimport URender from '../base/Render';\nimport useResizeObserver from '../base/hooks/useResizeObserver';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport KeyCode from '../../utils/KeyCode';\nimport { debounce } from '../../utils/tools';\nimport { tabNavProps, tabNavEmits } from './Tabs.type';\nimport type { TabsGuard, TabInfo, TabPaneInstance } from './Tabs.type';\n\nexport default defineComponent({\n  name: 'UTabNav',\n  components: {\n    TabBar,\n    UIcon,\n    X,\n    ChevronLeft,\n    ChevronRight,\n    Plus,\n    URender\n  },\n  props: tabNavProps,\n  emits: tabNavEmits,\n  setup(props, { emit }) {\n    const { prefixCls } = useGlobalConfig('tab-nav');\n    const stateValue = ref(props.modelValue);\n    const scrollable = reactive({\n      show: false,\n      prev: false,\n      next: false\n    });\n    const container = ref(null);\n    const tabNavRefs = reactive({} as Record<string, Element>);\n\n    const saveRef = (key: string) => {\n      return (el: any) => {\n        tabNavRefs[key] = el;\n      };\n    };\n    // ========= scroll ==========\n    // #region\n    const isVertical = computed(() => {\n      return props.tabPosition === 'left' || props.tabPosition === 'right';\n    });\n\n    const getOffsetWH = (node: any) => {\n      let prop = 'offsetWidth';\n      if (isVertical.value) {\n        prop = 'offsetHeight';\n      }\n      return node[prop];\n    };\n    let stateOffset = 0;\n    const navStyle = ref({});\n\n    const getMinOffset = () => {\n      const { nav } = tabNavRefs;\n      const tabNavContainer = tabNavRefs.navScroll;\n      const navWH = getOffsetWH(nav);\n      const containerWH = getOffsetWH(tabNavContainer);\n      return containerWH - navWH;\n    };\n\n    const setOffset = (offset: number) => {\n      const target = Math.min(0, offset);\n      if (stateOffset !== target) {\n        stateOffset = target;\n      }\n      const direction = isVertical.value ? 'Y' : 'X';\n      navStyle.value = {\n        ...navStyle.value,\n        transform: `translate${direction}(${target}px)`\n      };\n    };\n\n    const updateScroll = () => {\n      const { nav } = tabNavRefs;\n      if (!nav) return;\n      const minOffset = getMinOffset();\n      if (minOffset < 0) {\n        scrollable.show = true;\n        scrollable.prev = stateOffset < 0;\n        scrollable.next = minOffset < stateOffset;\n        if (stateOffset < minOffset) {\n          setOffset(minOffset);\n        }\n      } else {\n        scrollable.show = false;\n        if (stateOffset < 0) {\n          setOffset(0);\n        }\n      }\n    };\n\n    const scrollToActiveTab = () => {\n      if (!scrollable.show) return;\n      const activeKey = props.modelValue;\n      const activeTab = tabNavRefs[`tab_${activeKey}`];\n      const tabNavContainer = tabNavRefs.navScroll;\n      if (!activeTab) return;\n      const containerBounding = tabNavContainer.getBoundingClientRect();\n      const activeTabBounding = activeTab.getBoundingClientRect();\n      const propLT = isVertical.value ? 'top' : 'left';\n      const containerLT = containerBounding[propLT];\n      const activeTabLT = activeTabBounding[propLT];\n      const propRB = isVertical.value ? 'bottom' : 'right';\n      const containerRB = containerBounding[propRB];\n      const activeTabRB = activeTabBounding[propRB];\n\n      let offset = stateOffset;\n      if (containerLT > activeTabLT) {\n        offset += containerLT - activeTabLT;\n        setOffset(offset);\n      } else if (containerRB < activeTabRB) {\n        offset -= activeTabRB - containerRB;\n        setOffset(offset);\n      }\n    };\n\n    const handleScrollPrev = () => {\n      if (!scrollable.prev) return;\n      const containerWH = getOffsetWH(tabNavRefs.navScroll);\n      setOffset(stateOffset + containerWH);\n    };\n\n    const handleScrollNext = () => {\n      if (!scrollable.next) return;\n      const containerWH = getOffsetWH(tabNavRefs.navScroll);\n      setOffset(stateOffset - containerWH);\n    };\n\n    const handleTabNavScroll = (evt: WheelEvent) => {\n      if (!scrollable.show) return;\n\n      evt.preventDefault();\n\n      navStyle.value = {\n        ...navStyle.value,\n        transitionDuration: '0s'\n      };\n      setOffset(stateOffset + (evt as any).wheelDelta);\n      nextTick(() => {\n        navStyle.value = {\n          ...navStyle.value,\n          transitionDuration: ''\n        };\n      });\n    };\n\n    onMounted(() => {\n      updateScroll();\n      setTimeout(() => scrollToActiveTab(), 300);\n    });\n\n    const preTabPosition = ref(props.tabPosition);\n    const preAcitve = ref(props.modelValue);\n    const update = () => {\n      if (preTabPosition.value !== props.tabPosition) {\n        setOffset(0);\n      }\n      updateScroll();\n      if (preAcitve.value !== props.modelValue) {\n        nextTick(() => {\n          setTimeout(() => {\n            scrollToActiveTab();\n          }, 300);\n        });\n      }\n      preTabPosition.value = props.tabPosition;\n      preAcitve.value = props.modelValue;\n    };\n\n    onUpdated(() => {\n      update();\n    });\n\n    const debounceResize = debounce(() => {\n      updateScroll();\n      setTimeout(() => {\n        scrollToActiveTab();\n      }, 300);\n    }, 200);\n\n    useResizeObserver(container, debounceResize);\n\n    onBeforeUnmount(() => {\n      debounceResize.cancel();\n    });\n\n    // #endregion\n\n    // ========== event =============\n    // #region\n    const getClosable = (pane: TabInfo | TabPaneInstance) => {\n      if (props.editable || props.closable) {\n        if (pane.closable === undefined) {\n          return true;\n        }\n        return pane.closable;\n      }\n      return pane.closable;\n    };\n\n    const emitValueChange = (val: string) => {\n      stateValue.value = val;\n      if (props.modelValue) {\n        emit('update:modelValue', val);\n      }\n    };\n\n    const getNextActiveTab = (next: boolean) => {\n      const activeKey = props.modelValue;\n      const children: TabInfo[] = [];\n      props.tabs.forEach((tab) => {\n        if (tab && !tab.disabled) {\n          if (next) {\n            children.push(tab);\n          } else {\n            children.unshift(tab);\n          }\n        }\n      });\n\n      const { length } = children;\n      let ret = length && children[0];\n      children.every((c, i) => {\n        if (c.key === activeKey) {\n          if (i === length - 1) {\n            ret = children[0];\n          } else {\n            ret = children[i + 1];\n          }\n          return false;\n        }\n        return true;\n      });\n      return ret;\n    };\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        stateValue.value = val;\n      }\n    );\n\n    const getActivePane = () => {\n      const activeKey = stateValue.value;\n      const pane = props.tabs.find((x) => x.key === activeKey);\n      return pane;\n    };\n\n    const handleTabClick = async (pane: TabInfo | TabPaneInstance, index: number, e: any) => {\n      if (pane.disabled) {\n        return;\n      }\n      const guard = props.guard as TabsGuard;\n      if (guard?.onClickBefore) {\n        const res = await guard.onClickBefore(e);\n        if (!res) return;\n      }\n      emitValueChange(pane.key);\n      emit('tab-click', pane, index, e);\n      if (guard?.onClickAfter) guard.onClickAfter(e);\n    };\n\n    const handleTabRemove = (pane: TabInfo | TabPaneInstance, index?: number, e?: any) => {\n      if (pane.disabled) {\n        return;\n      }\n      emit('tab-remove', pane, index, e);\n    };\n\n    const handleTabAdd = (e?: any) => {\n      emit('tab-add', e);\n    };\n\n    const handleTabChange = (tab: TabInfo) => {\n      emitValueChange(tab.key);\n      const index = props.tabs.findIndex((x) => x.key === tab.key);\n      emit('tab-click', tab, index);\n    };\n\n    const handleTabNavKeydown = (e: KeyboardEvent) => {\n      const { which } = e;\n\n      switch (which) {\n        case KeyCode.RIGHT:\n        case KeyCode.DOWN: {\n          const newTab = getNextActiveTab(true);\n          newTab && handleTabChange(newTab);\n          break;\n        }\n        case KeyCode.LEFT:\n        case KeyCode.UP: {\n          const newTab = getNextActiveTab(false);\n          newTab && handleTabChange(newTab);\n          break;\n        }\n        case KeyCode.DELETE: {\n          const activePane = getActivePane();\n          if (activePane) {\n            const closable = getClosable(activePane);\n            if (closable) {\n              handleTabRemove(activePane);\n            }\n          }\n          break;\n        }\n        case KeyCode.INSERT: {\n          if (props.editable || props.addable) {\n            handleTabAdd();\n          }\n          break;\n        }\n        default:\n          break;\n      }\n    };\n    // #endregion\n\n    const tabBarRef = ref<InstanceType<typeof TabBar> | null>(null);\n    let observer: MutationObserver | null = null;\n\n    const handleNavChange = () => {\n      tabBarRef.value?.update();\n    };\n\n    watch(tabNavRefs, () => {\n      if (tabNavRefs.nav && !observer) {\n        observer = new MutationObserver(handleNavChange);\n        observer.observe(tabNavRefs.nav, {\n          childList: true,\n          subtree: true,\n          attributes: false\n        });\n      }\n    });\n\n    onBeforeUnmount(() => {\n      if (observer) {\n        observer.disconnect();\n        observer = null;\n      }\n    });\n\n    provide('TabNavContext', {\n      tabNavRefs\n    });\n\n    return {\n      stateValue,\n      prefixCls,\n      scrollToActiveTab,\n      scrollable,\n      container,\n      saveRef,\n      isVertical,\n      getClosable,\n      navStyle,\n      tabBarRef,\n      handleTabClick,\n      handleTabRemove,\n      handleTabAdd,\n      handleTabNavKeydown,\n      handleScrollPrev,\n      handleScrollNext,\n      handleTabNavScroll\n    };\n  }\n});\n</script>\n"],"names":["defineComponent","TabBar","UIcon","X","ChevronLeft","ChevronRight","Plus","URender","tabNavProps","tabNavEmits","useGlobalConfig","ref","reactive","computed","debounce","KeyCode","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_createVNode","_normalizeStyle","_createBlock","_Fragment","_mergeProps","_withModifiers"],"mappings":"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"}

package/lib/components/Tabs/TabNav.vue.d.ts

@@ -492,7 +492,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         color: string;
         spin: boolean;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Record<string, any>;
-    CircleX: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+    X: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     ChevronLeft: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
     Plus: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;

package/lib/components/Tabs/Tabs.d.ts

@@ -634,7 +634,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             color: string;
             spin: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Record<string, any>;
-        CircleX: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
+        X: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         ChevronLeft: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
         Plus: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;