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

package/es/components/Tabs/TabNav.mjs

@@ -0,0 +1,504 @@
+import { defineComponent, ref, reactive, computed, nextTick, onMounted, onUpdated, onBeforeUnmount, watch, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode, withCtx, normalizeStyle, createBlock, Fragment, renderList, mergeProps, createTextVNode, toDisplayString } from 'vue';
+import { UIcon } from '../Icon/index.mjs';
+import { URoundClose, ULineLeft, ULineRight, ULineAdd } from '@koi-design/uxd-icon';
+import TabBar from './TabBar.mjs';
+import Render from '../base/Render.mjs';
+import useResizeObserver from '../base/hooks/useResizeObserver.mjs';
+import useGlobalConfig from '../base/hooks/useGlobalConfig.mjs';
+import KeyCode from '../../utils/KeyCode.mjs';
+import { debounce } from '../../utils/tools.mjs';
+import { tabNavProps, tabNavEmits } from './Tabs.type.mjs';
+import _export_sfc from '../../_virtual/plugin-vue_export-helper.mjs';
+
+const _sfc_main = defineComponent({
+  name: "UTabNav",
+  components: {
+    TabBar,
+    UIcon,
+    URoundClose,
+    ULineLeft,
+    ULineRight,
+    ULineAdd,
+    URender: Render
+  },
+  props: tabNavProps,
+  emits: tabNavEmits,
+  setup(props, { emit }) {
+    const { prefixCls } = useGlobalConfig("tab-nav");
+    const stateValue = ref(props.modelValue);
+    const scrollable = reactive({
+      show: false,
+      prev: false,
+      next: false
+    });
+    const container = ref(null);
+    const tabNavRefs = reactive({});
+    const saveRef = (key) => {
+      return (el) => {
+        tabNavRefs[key] = el;
+      };
+    };
+    const isVertical = computed(() => {
+      return props.tabPosition === "left" || props.tabPosition === "right";
+    });
+    const getOffsetWH = (node) => {
+      let prop = "offsetWidth";
+      if (isVertical.value) {
+        prop = "offsetHeight";
+      }
+      return node[prop];
+    };
+    let stateOffset = 0;
+    const navStyle = ref({});
+    const getMinOffset = () => {
+      const { nav } = tabNavRefs;
+      const tabNavContainer = tabNavRefs.navScroll;
+      const navWH = getOffsetWH(nav);
+      const containerWH = getOffsetWH(tabNavContainer);
+      return containerWH - navWH;
+    };
+    const setOffset = (offset) => {
+      const target = Math.min(0, offset);
+      if (stateOffset !== target) {
+        stateOffset = target;
+      }
+      const direction = isVertical.value ? "Y" : "X";
+      navStyle.value = {
+        ...navStyle.value,
+        transform: `translate${direction}(${target}px)`
+      };
+    };
+    const updateScroll = () => {
+      const { nav } = tabNavRefs;
+      if (!nav)
+        return;
+      const minOffset = getMinOffset();
+      if (minOffset < 0) {
+        scrollable.show = true;
+        scrollable.prev = stateOffset < 0;
+        scrollable.next = minOffset < stateOffset;
+        if (stateOffset < minOffset) {
+          setOffset(minOffset);
+        }
+      } else {
+        scrollable.show = false;
+        if (stateOffset < 0) {
+          setOffset(0);
+        }
+      }
+    };
+    const scrollToActiveTab = () => {
+      if (!scrollable.show)
+        return;
+      const activeKey = props.modelValue;
+      const activeTab = tabNavRefs[`tab_${activeKey}`];
+      const tabNavContainer = tabNavRefs.navScroll;
+      if (!activeTab)
+        return;
+      const containerBounding = tabNavContainer.getBoundingClientRect();
+      const activeTabBounding = activeTab.getBoundingClientRect();
+      const propLT = isVertical.value ? "top" : "left";
+      const containerLT = containerBounding[propLT];
+      const activeTabLT = activeTabBounding[propLT];
+      const propRB = isVertical.value ? "bottom" : "right";
+      const containerRB = containerBounding[propRB];
+      const activeTabRB = activeTabBounding[propRB];
+      let offset = stateOffset;
+      if (containerLT > activeTabLT) {
+        offset += containerLT - activeTabLT;
+        setOffset(offset);
+      } else if (containerRB < activeTabRB) {
+        offset -= activeTabRB - containerRB;
+        setOffset(offset);
+      }
+    };
+    const handleScrollPrev = () => {
+      if (!scrollable.prev)
+        return;
+      const containerWH = getOffsetWH(tabNavRefs.navScroll);
+      setOffset(stateOffset + containerWH);
+    };
+    const handleScrollNext = () => {
+      if (!scrollable.next)
+        return;
+      const containerWH = getOffsetWH(tabNavRefs.navScroll);
+      setOffset(stateOffset - containerWH);
+    };
+    const handleTabNavScroll = (evt) => {
+      if (!scrollable.show)
+        return;
+      evt.preventDefault();
+      navStyle.value = {
+        ...navStyle.value,
+        transitionDuration: "0s"
+      };
+      setOffset(stateOffset + evt.wheelDelta);
+      nextTick(() => {
+        navStyle.value = {
+          ...navStyle.value,
+          transitionDuration: ""
+        };
+      });
+    };
+    onMounted(() => {
+      updateScroll();
+      setTimeout(() => scrollToActiveTab(), 300);
+    });
+    const preTabPosition = ref(props.tabPosition);
+    const preAcitve = ref(props.modelValue);
+    const update = () => {
+      if (preTabPosition.value !== props.tabPosition) {
+        setOffset(0);
+      }
+      updateScroll();
+      if (preAcitve.value !== props.modelValue) {
+        nextTick(() => {
+          setTimeout(() => {
+            scrollToActiveTab();
+          }, 300);
+        });
+      }
+      preTabPosition.value = props.tabPosition;
+      preAcitve.value = props.modelValue;
+    };
+    onUpdated(() => {
+      update();
+    });
+    const debounceResize = debounce(() => {
+      updateScroll();
+      setTimeout(() => {
+        scrollToActiveTab();
+      }, 300);
+    }, 200);
+    useResizeObserver(container, debounceResize);
+    onBeforeUnmount(() => {
+      debounceResize.cancel();
+    });
+    const getClosable = (pane) => {
+      if (props.editable || props.closable) {
+        if (pane.closable === void 0) {
+          return true;
+        }
+        return pane.closable;
+      }
+      return pane.closable;
+    };
+    const emitValueChange = (val) => {
+      stateValue.value = val;
+      if (props.modelValue) {
+        emit("update:modelValue", val);
+      }
+    };
+    const getNextActiveTab = (next) => {
+      const activeKey = props.modelValue;
+      const children = [];
+      props.tabs.forEach((tab) => {
+        if (tab && !tab.disabled) {
+          if (next) {
+            children.push(tab);
+          } else {
+            children.unshift(tab);
+          }
+        }
+      });
+      const { length } = children;
+      let ret = length && children[0];
+      children.every((c, i) => {
+        if (c.key === activeKey) {
+          if (i === length - 1) {
+            ret = children[0];
+          } else {
+            ret = children[i + 1];
+          }
+          return false;
+        }
+        return true;
+      });
+      return ret;
+    };
+    watch(
+      () => props.modelValue,
+      (val) => {
+        stateValue.value = val;
+      }
+    );
+    const getActivePane = () => {
+      const activeKey = stateValue.value;
+      const pane = props.tabs.find((x) => x.key === activeKey);
+      return pane;
+    };
+    const handleTabClick = async (pane, index, e) => {
+      if (pane.disabled) {
+        return;
+      }
+      const guard = props.guard;
+      if (guard == null ? void 0 : guard.onClickBefore) {
+        const res = await guard.onClickBefore(e);
+        if (!res)
+          return;
+      }
+      emitValueChange(pane.key);
+      emit("tab-click", pane, index, e);
+      if (guard == null ? void 0 : guard.onClickAfter)
+        guard.onClickAfter(e);
+    };
+    const handleTabRemove = (pane, index, e) => {
+      if (pane.disabled) {
+        return;
+      }
+      emit("tab-remove", pane, index, e);
+    };
+    const handleTabAdd = (e) => {
+      emit("tab-add", e);
+    };
+    const handleTabChange = (tab) => {
+      emitValueChange(tab.key);
+      const index = props.tabs.findIndex((x) => x.key === tab.key);
+      emit("tab-click", tab, index);
+    };
+    const handleTabNavKeydown = (e) => {
+      const { which } = e;
+      switch (which) {
+        case KeyCode.RIGHT:
+        case KeyCode.DOWN: {
+          const newTab = getNextActiveTab(true);
+          newTab && handleTabChange(newTab);
+          break;
+        }
+        case KeyCode.LEFT:
+        case KeyCode.UP: {
+          const newTab = getNextActiveTab(false);
+          newTab && handleTabChange(newTab);
+          break;
+        }
+        case KeyCode.DELETE: {
+          const activePane = getActivePane();
+          if (activePane) {
+            const closable = getClosable(activePane);
+            if (closable) {
+              handleTabRemove(activePane);
+            }
+          }
+          break;
+        }
+        case KeyCode.INSERT: {
+          if (props.editable || props.addable) {
+            handleTabAdd();
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    };
+    const tabBarRef = ref(null);
+    let observer = null;
+    const handleNavChange = () => {
+      var _a;
+      (_a = tabBarRef.value) == null ? void 0 : _a.update();
+    };
+    watch(tabNavRefs, () => {
+      if (tabNavRefs.nav && !observer) {
+        observer = new MutationObserver(handleNavChange);
+        observer.observe(tabNavRefs.nav, {
+          childList: true,
+          subtree: true,
+          attributes: false
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    });
+    provide("TabNavContext", {
+      tabNavRefs
+    });
+    return {
+      stateValue,
+      prefixCls,
+      scrollToActiveTab,
+      scrollable,
+      container,
+      saveRef,
+      isVertical,
+      getClosable,
+      navStyle,
+      tabBarRef,
+      handleTabClick,
+      handleTabRemove,
+      handleTabAdd,
+      handleTabNavKeydown,
+      handleScrollPrev,
+      handleScrollNext,
+      handleTabNavScroll
+    };
+  }
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ULineLeft = resolveComponent("ULineLeft");
+  const _component_UIcon = resolveComponent("UIcon");
+  const _component_TabBar = resolveComponent("TabBar");
+  const _component_URender = resolveComponent("URender");
+  const _component_URoundClose = resolveComponent("URoundClose");
+  const _component_ULineRight = resolveComponent("ULineRight");
+  const _component_ULineAdd = resolveComponent("ULineAdd");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass({
+      [`${_ctx.prefixCls}-bar`]: true,
+      [`${_ctx.prefixCls}-${_ctx.type}`]: true,
+      [`${_ctx.prefixCls}-${_ctx.size}`]: true,
+      [`${_ctx.prefixCls}-${_ctx.tabPosition}-bar`]: true,
+      [`${_ctx.prefixCls}-vertical`]: _ctx.isVertical,
+      [`${_ctx.prefixCls}-extra-${_ctx.extraPosition}`]: !_ctx.isVertical,
+      [`${_ctx.prefixCls}-centered`]: !_ctx.isVertical && _ctx.centered
+    }),
+    tabindex: "0",
+    onKeydown: _cache[4] || (_cache[4] = (...args) => _ctx.handleTabNavKeydown && _ctx.handleTabNavKeydown(...args))
+  }, [
+    _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(`${_ctx.prefixCls}-extra-content`)
+    }, [
+      renderSlot(_ctx.$slots, "extra", {}, () => [
+        createCommentVNode(' <span v-if="addable || editable" :class="`${prefixCls}-add-btn`" @click.stop="handleTabAdd">\n          <UIcon>\n            <ULineAdd />\n          </UIcon>\n        </span> ')
+      ])
+    ], 2)) : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      ref: "container",
+      class: normalizeClass([
+        `${_ctx.prefixCls}-container`,
+        {
+          [`${_ctx.prefixCls}-scrolling`]: _ctx.scrollable.show
+        }
+      ]),
+      onWheel: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleTabNavScroll && _ctx.handleTabNavScroll(...args), ["stop"]))
+    }, [
+      _ctx.scrollable.show ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass([
+          `${_ctx.prefixCls}-btn`,
+          `${_ctx.prefixCls}-prev`,
+          {
+            [`${_ctx.prefixCls}-btn-disabled`]: !_ctx.scrollable.prev
+          }
+        ]),
+        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleScrollPrev && _ctx.handleScrollPrev(...args), ["stop"]))
+      }, [
+        createVNode(_component_UIcon, null, {
+          default: withCtx(() => [
+            createVNode(_component_ULineLeft)
+          ]),
+          _: 1
+        })
+      ], 2)) : createCommentVNode("v-if", true),
+      createElementVNode("div", {
+        ref: _ctx.saveRef("navScroll"),
+        class: normalizeClass(`${_ctx.prefixCls}-scroll`)
+      }, [
+        createElementVNode("div", {
+          ref: _ctx.saveRef("nav"),
+          style: normalizeStyle(_ctx.navStyle),
+          class: normalizeClass([`${_ctx.prefixCls}-content`])
+        }, [
+          _ctx.type === "line" ? (openBlock(), createBlock(_component_TabBar, {
+            key: 0,
+            ref: "tabBarRef",
+            tabs: _ctx.tabs,
+            active: _ctx.stateValue,
+            "tab-position": _ctx.tabPosition,
+            "prefix-cls": _ctx.prefixCls,
+            animated: _ctx.animated,
+            "fixed-distance": _ctx.fixedDistance
+          }, null, 8, ["tabs", "active", "tab-position", "prefix-cls", "animated", "fixed-distance"])) : createCommentVNode("v-if", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.key,
+              ref_for: true,
+              ref: _ctx.saveRef(`tab_${item.key}`),
+              class: normalizeClass({
+                [`${_ctx.prefixCls}-item`]: true,
+                [`${_ctx.prefixCls}-item-active`]: _ctx.stateValue ? _ctx.stateValue === item.key : index === 0,
+                [`${_ctx.prefixCls}-item-disabled`]: item.disabled,
+                [`${_ctx.prefixCls}-item-closable`]: (_ctx.editable || _ctx.closable) && item.closable
+              }),
+              onClick: (e) => _ctx.handleTabClick(item, index, e)
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass({
+                  [`${_ctx.prefixCls}-item-content`]: true
+                })
+              }, [
+                item.slot !== void 0 ? (openBlock(), createBlock(_component_URender, {
+                  key: 0,
+                  render: item.slot
+                }, null, 8, ["render"])) : _ctx.$slots.tab ? renderSlot(_ctx.$slots, "tab", mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, { item })) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                  createTextVNode(toDisplayString(item.label), 1)
+                ], 64)),
+                _ctx.editable || _ctx.closable ? (openBlock(), createElementBlock("span", {
+                  key: 3,
+                  class: normalizeClass({
+                    [`${_ctx.prefixCls}-item-close`]: true,
+                    [`${_ctx.prefixCls}-item-close-hidden`]: item.closable === false
+                  }),
+                  onClick: withModifiers((e) => _ctx.handleTabRemove(item, index, e), ["stop"])
+                }, [
+                  createVNode(_component_UIcon, null, {
+                    default: withCtx(() => [
+                      createVNode(_component_URoundClose)
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_2)) : createCommentVNode("v-if", true)
+              ], 2)
+            ], 10, _hoisted_1);
+          }), 128))
+        ], 6)
+      ], 2),
+      _ctx.scrollable.show ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass([
+          `${_ctx.prefixCls}-btn`,
+          `${_ctx.prefixCls}-next`,
+          {
+            [`${_ctx.prefixCls}-btn-disabled`]: !_ctx.scrollable.next
+          }
+        ]),
+        onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handleScrollNext && _ctx.handleScrollNext(...args), ["stop"]))
+      }, [
+        createVNode(_component_UIcon, null, {
+          default: withCtx(() => [
+            createVNode(_component_ULineRight)
+          ]),
+          _: 1
+        })
+      ], 2)) : createCommentVNode("v-if", true),
+      _ctx.addable || _ctx.editable ? (openBlock(), createElementBlock("div", {
+        key: 2,
+        class: normalizeClass({
+          [`${_ctx.prefixCls}-item`]: true,
+          [`${_ctx.prefixCls}-item-add-btn`]: true
+        }),
+        onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleTabAdd && _ctx.handleTabAdd(...args), ["stop"]))
+      }, [
+        createVNode(_component_UIcon, null, {
+          default: withCtx(() => [
+            createVNode(_component_ULineAdd)
+          ]),
+          _: 1
+        })
+      ], 2)) : createCommentVNode("v-if", true)
+    ], 34)
+  ], 34);
+}
+var TabNav = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:\\br-fe\\uxd-ui\\src\\components\\Tabs\\TabNav.vue"]]);
+
+export { TabNav as default };
+//# sourceMappingURL=TabNav.mjs.map

package/es/components/Tabs/TabNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.mjs","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          <ULineLeft />\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) => 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) => handleTabRemove(item, index, e)\"\n              >\n                <UIcon>\n                  <URoundClose />\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          <ULineRight />\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          <ULineAdd />\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 { URoundClose, ULineLeft, ULineRight, ULineAdd } from '@koi-design/uxd-icon';\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    URoundClose,\n    ULineLeft,\n    ULineRight,\n    ULineAdd,\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":["URender","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_createVNode","_normalizeStyle","_createBlock","_Fragment","_mergeProps","_withModifiers"],"mappings":"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"}