vft 0.0.374 → 0.0.375

package/lib/components/tabs/tab-nav.vue2.cjs

@@ -1 +1,319 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),q=require("@vueuse/core"),N=require("@vft/utils"),_=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const V=require("../icon/index.cjs"),P=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const y=require("@vft/constants"),ee=require("./types.cjs"),te=require("./tab-bar.vue2.cjs"),ae=e.defineComponent({name:"vft-tab-nav"}),ne=e.defineComponent({...ae,props:{panes:{},editable:{type:Boolean},addable:{type:Boolean},stretch:{type:Boolean},showBar:{type:Boolean,default:!1},closeIconCfg:{},addIconCfg:{},arrowLeftIconCfg:{},arrowRightIconCfg:{},fixTabCount:{default:0},fixExtraScrollWidth:{default:0},trigger:{default:"click"},currentName:{default:""},tabBarReduceDistance:{default:0}},emits:["tabClick","tabRemove","tabAdd","tabContextmenu"],setup(n,{expose:F,emit:A}){const C=A,M=P.useNamespace("tab-nav"),L=e.getCurrentInstance(),g=e.inject(ee.TabsRootContextKey);g||_.throwError(M.b(),"<vft-tabs><tab-nav /></vft-tabs>");const o=P.useNamespace("tabs"),W=q.useDocumentVisibility(),K=q.useWindowFocus(),I=e.ref(),d=e.ref(),h=e.ref(),E=e.ref(),R=e.ref({}),O=e.ref(),u=e.ref(!1),f=e.ref(0),B=e.ref(!1),w=e.ref(!0),S=e.shallowRef(),x=e.computed(()=>["top","bottom"].includes(g.props.tabPosition)?"width":"height"),j=e.computed(()=>({transform:`translate${x.value==="width"?"X":"Y"}(-${f.value}px)`})),H=()=>{if(!d.value)return;const t=d.value[`offset${N.capitalize(x.value)}`],a=f.value;a&&(f.value=a>t?a-t:0)},U=()=>{if(!d.value||!h.value)return;const t=h.value[`offset${N.capitalize(x.value)}`],a=d.value[`offset${N.capitalize(x.value)}`],l=f.value;t-l<=a||(f.value=t-l>a*2?l+a:t-a)},p=async()=>{const t=h.value,a=E.value;if(!u.value||!I.value||!d.value||!t)return;await e.nextTick();const l=R.value[n.currentName];if(!l)return;const T=d.value,v=["top","bottom"].includes(g.props.tabPosition),c=l.getBoundingClientRect(),s=T.getBoundingClientRect(),m=v?t.offsetWidth-s.width:t.offsetHeight-s.height,r=f.value;let b=r;const i=n.fixTabCount?(a?.offsetWidth||0)+n.fixExtraScrollWidth:0;v?(c.left-i<s.left&&(b=r-(s.left-c.left+i)),c.right>s.right&&(b=r+c.right-s.right)):(c.top<s.top&&(b=r-(s.top-c.top)),c.bottom>s.bottom&&(b=r+(c.bottom-s.bottom))),b=Math.max(b,0),f.value=Math.min(b,m)},z=()=>{if(!h.value||!d.value)return;const t=h.value[`offset${N.capitalize(x.value)}`],a=d.value[`offset${N.capitalize(x.value)}`],l=f.value;a<t?(u.value=u.value||{},u.value.prev=l,u.value.next=l+a<t,t-l<a&&(f.value=t-a)):(u.value=!1,l>0&&(f.value=0))},X=t=>{const a=t.code,{up:l,down:T,left:v,right:c}=y.EVENT_CODE;if(![l,T,v,c].includes(a))return;const s=Array.from(t.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")),m=s.indexOf(t.target);let r;a===v||a===l?m===0?r=s.length-1:r=m-1:m<s.length-1?r=m+1:r=0,s[r].focus(),s[r].click(),$()},$=()=>{w.value&&(B.value=!0)},k=()=>B.value=!1,Y=(t,a)=>{R.value[a]=t},G=async()=>{await e.nextTick(),R.value[n.currentName]?.focus({preventScroll:!0})};e.watch(W,t=>{t==="hidden"?w.value=!1:t==="visible"&&setTimeout(()=>w.value=!0,50)}),e.watch(K,t=>{t?setTimeout(()=>w.value=!0,50):w.value=!1}),q.useResizeObserver(I,z),e.onMounted(()=>setTimeout(()=>p(),0)),e.onUpdated(()=>z()),F({scrollToActiveTab:p,removeFocus:k,focusActiveTab:G,tabListRef:h,tabBarRef:O,scheduleRender:()=>e.triggerRef(S)}),e.watch(()=>n.panes,()=>L.update(),{flush:"post"});const J=e.computed(()=>u.value?[e.createVNode("span",{class:[o.e("nav-prev"),o.is("disabled",!u.value.prev)],onClick:H},[n.arrowLeftIconCfg?.icon?e.createVNode(V.VftIcon,n.arrowLeftIconCfg,null):null]),e.createVNode("span",{class:[o.e("nav-next"),o.is("disabled",!u.value.next)],onClick:U},[n.arrowRightIconCfg?.icon?e.createVNode(V.VftIcon,n.arrowRightIconCfg,null):null])]:null),Q=e.computed(()=>t=>n.panes.slice(0,t)?.map((a,l)=>{const T=a.uid,v=a.props.disabled,c=a.props.name??a.index??`${l}`,s=!v&&(a.isClosable||n.editable);a.index=`${l}`;const m=s?e.createVNode("span",{class:"is-icon-close",onClick:i=>C("tabRemove",a,i)},[n.closeIconCfg?.icon?e.createVNode(V.VftIcon,n.closeIconCfg,null):null]):null,r=a.slots.label?.()||a.props.label,b=!v&&a.active?0:-1;return e.createVNode("div",e.mergeProps({ref:i=>Y(i,c),class:[o.e("item"),o.is(g.props.tabPosition),o.is("active",a.active),o.is("disabled",v),o.is("closable",s),o.is("focus",B.value)],id:`tab-${c}`,key:`tab-${T}`,"aria-controls":`pane-${c}`,role:"tab","aria-selected":a.active,tabindex:b,onFocus:()=>$(),onBlur:()=>k()},{[n.trigger==="click"?"onClick":"onMouseenter"]:i=>{k(),C("tabClick",a,c,i)}},{onContextmenu:i=>{i.preventDefault(),C("tabContextmenu",{pane:a,index:l,event:i})},onKeydown:i=>{s&&(i.code===y.EVENT_CODE.delete||i.code===y.EVENT_CODE.backspace)&&C("tabRemove",a,i)}}),[r,m])})),Z=n.editable||n.addable?e.createVNode("span",{class:o.e("new-tab"),tabindex:"0",onClick:()=>C("tabAdd"),onKeydown:t=>{t.code===y.EVENT_CODE.enter&&C("tabAdd")}},[n.addIconCfg?.icon?e.createVNode(V.VftIcon,n.addIconCfg,null):null]):null;e.useSlots();const D=(t=!1)=>(S.value,n.panes.length>0?e.createVNode("div",{class:[o.e("nav"),o.is(g.props.tabPosition),o.is("fixed-nav",t),o.is("stretch",n.stretch&&["top","bottom"].includes(g.props.tabPosition))],ref:t?E:h,style:t?{}:j.value,role:"tablist",onKeydown:X},[n.showBar?e.createVNode(te.default,{ref:O,tabs:[...n.panes],tabRefs:R.value,tabBarReduceDistance:n.tabBarReduceDistance},null):null,Q.value(t?n.fixTabCount:void 0)]):null);return()=>(S.value,e.createVNode("div",{ref:I,class:[o.e("nav-wrap"),o.is("scrollable",!!u.value),o.is(g.props.tabPosition)]},[J.value,e.createVNode("div",{class:[o.e("nav-scroll"),o.is("have-fixed-tab",!!n.fixTabCount)],ref:d},[D(),n.fixTabCount?D(!0):null,Z])]))}});exports.default=ne;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@vueuse/core");
+const utils = require("@vft/utils");
+const error = require("../../utils/error.cjs");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index$1 = require("../icon/index.cjs");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const constants = require("@vft/constants");
+const types = require("./types.cjs");
+const tabBar_vue_vue_type_script_setup_true_lang = require("./tab-bar.vue2.cjs");
+const __default__ = vue.defineComponent({
+  name: "vft-tab-nav"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    panes: {},
+    editable: {
+      type: Boolean
+    },
+    addable: {
+      type: Boolean
+    },
+    stretch: {
+      type: Boolean
+    },
+    showBar: {
+      type: Boolean,
+      default: false
+    },
+    closeIconCfg: {},
+    addIconCfg: {},
+    arrowLeftIconCfg: {},
+    arrowRightIconCfg: {},
+    fixTabCount: {
+      default: 0
+    },
+    fixExtraScrollWidth: {
+      default: 0
+    },
+    trigger: {
+      default: "click"
+    },
+    currentName: {
+      default: ""
+    },
+    tabBarReduceDistance: {
+      default: 0
+    }
+  },
+  emits: ["tabClick", "tabRemove", "tabAdd", "tabContextmenu"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const emit = __emit;
+    const ns_nav = index.useNamespace("tab-nav");
+    const vm = vue.getCurrentInstance();
+    const rootTabs = vue.inject(types.TabsRootContextKey);
+    if (!rootTabs) error.throwError(ns_nav.b(), "<vft-tabs><tab-nav /></vft-tabs>");
+    const ns = index.useNamespace("tabs");
+    const visibility = core.useDocumentVisibility();
+    const focused = core.useWindowFocus();
+    const tabNavRef = vue.ref();
+    const navScrollRef = vue.ref();
+    const navRef = vue.ref();
+    const navFixedRef = vue.ref();
+    const tabRefsMap = vue.ref({});
+    const tabBarRef = vue.ref();
+    const scrollable = vue.ref(false);
+    const navOffset = vue.ref(0);
+    const isFocus = vue.ref(false);
+    const focusable = vue.ref(true);
+    const tracker = vue.shallowRef();
+    const sizeName = vue.computed(() => ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height");
+    const navStyle = vue.computed(() => {
+      const dir = sizeName.value === "width" ? "X" : "Y";
+      return {
+        transform: `translate${dir}(-${navOffset.value}px)`
+      };
+    });
+    const scrollPrev = () => {
+      if (!navScrollRef.value) return;
+      const containerSize = navScrollRef.value[`offset${utils.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (!currentOffset) return;
+      navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;
+    };
+    const scrollNext = () => {
+      if (!navScrollRef.value || !navRef.value) return;
+      const navSize = navRef.value[`offset${utils.capitalize(sizeName.value)}`];
+      const containerSize = navScrollRef.value[`offset${utils.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (navSize - currentOffset <= containerSize) return;
+      navOffset.value = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
+    };
+    const scrollToActiveTab = async () => {
+      const nav = navRef.value;
+      const navFixed = navFixedRef.value;
+      if (!scrollable.value || !tabNavRef.value || !navScrollRef.value || !nav) return;
+      await vue.nextTick();
+      const activeTab = tabRefsMap.value[__props.currentName];
+      if (!activeTab) return;
+      const navScroll = navScrollRef.value;
+      const isHorizontal = ["top", "bottom"].includes(rootTabs.props.tabPosition);
+      const activeTabBounding = activeTab.getBoundingClientRect();
+      const navScrollBounding = navScroll.getBoundingClientRect();
+      const maxOffset = isHorizontal ? nav.offsetWidth - navScrollBounding.width : nav.offsetHeight - navScrollBounding.height;
+      const currentOffset = navOffset.value;
+      let newOffset = currentOffset;
+      const navFixedWidth = __props.fixTabCount ? (navFixed?.offsetWidth || 0) + __props.fixExtraScrollWidth : 0;
+      if (isHorizontal) {
+        if (activeTabBounding.left - navFixedWidth < navScrollBounding.left) {
+          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left + navFixedWidth);
+        }
+        if (activeTabBounding.right > navScrollBounding.right) {
+          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+        }
+      } else {
+        if (activeTabBounding.top < navScrollBounding.top) {
+          newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
+        }
+        if (activeTabBounding.bottom > navScrollBounding.bottom) {
+          newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+        }
+      }
+      newOffset = Math.max(newOffset, 0);
+      navOffset.value = Math.min(newOffset, maxOffset);
+    };
+    const update = () => {
+      if (!navRef.value || !navScrollRef.value) return;
+      const navSize = navRef.value[`offset${utils.capitalize(sizeName.value)}`];
+      const containerSize = navScrollRef.value[`offset${utils.capitalize(sizeName.value)}`];
+      const currentOffset = navOffset.value;
+      if (containerSize < navSize) {
+        scrollable.value = scrollable.value || {};
+        scrollable.value.prev = currentOffset;
+        scrollable.value.next = currentOffset + containerSize < navSize;
+        if (navSize - currentOffset < containerSize) {
+          navOffset.value = navSize - containerSize;
+        }
+      } else {
+        scrollable.value = false;
+        if (currentOffset > 0) {
+          navOffset.value = 0;
+        }
+      }
+    };
+    const changeTab = (e) => {
+      const code = e.code;
+      const {
+        up,
+        down,
+        left,
+        right
+      } = constants.EVENT_CODE;
+      if (![up, down, left, right].includes(code)) return;
+      const tabList = Array.from(e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)"));
+      const currentIndex = tabList.indexOf(e.target);
+      let nextIndex;
+      if (code === left || code === up) {
+        if (currentIndex === 0) {
+          nextIndex = tabList.length - 1;
+        } else {
+          nextIndex = currentIndex - 1;
+        }
+      } else {
+        if (currentIndex < tabList.length - 1) {
+          nextIndex = currentIndex + 1;
+        } else {
+          nextIndex = 0;
+        }
+      }
+      tabList[nextIndex].focus();
+      tabList[nextIndex].click();
+      setFocus();
+    };
+    const setFocus = () => {
+      if (focusable.value) isFocus.value = true;
+    };
+    const removeFocus = () => isFocus.value = false;
+    const setRefs = (el, key) => {
+      tabRefsMap.value[key] = el;
+    };
+    const focusActiveTab = async () => {
+      await vue.nextTick();
+      const activeTab = tabRefsMap.value[__props.currentName];
+      activeTab?.focus({
+        preventScroll: true
+      });
+    };
+    vue.watch(visibility, (visibility2) => {
+      if (visibility2 === "hidden") {
+        focusable.value = false;
+      } else if (visibility2 === "visible") {
+        setTimeout(() => focusable.value = true, 50);
+      }
+    });
+    vue.watch(focused, (focused2) => {
+      if (focused2) {
+        setTimeout(() => focusable.value = true, 50);
+      } else {
+        focusable.value = false;
+      }
+    });
+    core.useResizeObserver(tabNavRef, update);
+    vue.onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
+    vue.onUpdated(() => update());
+    __expose({
+      scrollToActiveTab,
+      removeFocus,
+      focusActiveTab,
+      tabListRef: navRef,
+      tabBarRef,
+      scheduleRender: () => vue.triggerRef(tracker)
+    });
+    vue.watch(() => __props.panes, () => vm.update(), {
+      flush: "post"
+    });
+    const scrollBtn = vue.computed(() => {
+      return scrollable.value ? [vue.createVNode("span", {
+        "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
+        "onClick": scrollPrev
+      }, [__props.arrowLeftIconCfg?.icon ? vue.createVNode(index$1.VftIcon, __props.arrowLeftIconCfg, null) : null]), vue.createVNode("span", {
+        "class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
+        "onClick": scrollNext
+      }, [__props.arrowRightIconCfg?.icon ? vue.createVNode(index$1.VftIcon, __props.arrowRightIconCfg, null) : null])] : null;
+    });
+    const tabs = vue.computed(() => {
+      return (fixedNumber) => {
+        return __props.panes.slice(0, fixedNumber)?.map((pane, index2) => {
+          const uid = pane.uid;
+          const disabled = pane.props.disabled;
+          const tabName = pane.props.name ?? pane.index ?? `${index2}`;
+          const closable = !disabled && (pane.isClosable || __props.editable);
+          pane.index = `${index2}`;
+          const btnClose = closable ? vue.createVNode("span", {
+            "class": "is-icon-close",
+            "onClick": (ev) => emit("tabRemove", pane, ev)
+          }, [__props.closeIconCfg?.icon ? vue.createVNode(index$1.VftIcon, __props.closeIconCfg, null) : null]) : null;
+          const tabLabelContent = pane.slots.label?.() || pane.props.label;
+          const tabindex = !disabled && pane.active ? 0 : -1;
+          return vue.createVNode("div", vue.mergeProps({
+            "ref": (el) => setRefs(el, tabName),
+            "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), ns.is("closable", closable), ns.is("focus", isFocus.value)],
+            "id": `tab-${tabName}`,
+            "key": `tab-${uid}`,
+            "aria-controls": `pane-${tabName}`,
+            "role": "tab",
+            "aria-selected": pane.active,
+            "tabindex": tabindex,
+            "onFocus": () => setFocus(),
+            "onBlur": () => removeFocus()
+          }, {
+            [__props.trigger === "click" ? "onClick" : "onMouseenter"]: (ev) => {
+              removeFocus();
+              emit("tabClick", pane, tabName, ev);
+            }
+          }, {
+            "onContextmenu": (event) => {
+              event.preventDefault();
+              emit("tabContextmenu", {
+                pane,
+                index: index2,
+                event
+              });
+            },
+            "onKeydown": (ev) => {
+              if (closable && (ev.code === constants.EVENT_CODE.delete || ev.code === constants.EVENT_CODE.backspace)) {
+                emit("tabRemove", pane, ev);
+              }
+            }
+          }), [...[tabLabelContent, btnClose]]);
+        });
+      };
+    });
+    const newButton = __props.editable || __props.addable ? vue.createVNode("span", {
+      "class": ns.e("new-tab"),
+      "tabindex": "0",
+      "onClick": () => emit("tabAdd"),
+      "onKeydown": (ev) => {
+        if (ev.code === constants.EVENT_CODE.enter) emit("tabAdd");
+      }
+    }, [__props.addIconCfg?.icon ? vue.createVNode(index$1.VftIcon, __props.addIconCfg, null) : null]) : null;
+    vue.useSlots();
+    const renderTabs = (isfixed = false) => {
+      tracker.value;
+      return __props.panes.length > 0 ? vue.createVNode("div", {
+        "class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("fixed-nav", isfixed), ns.is("stretch", __props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))],
+        "ref": isfixed ? navFixedRef : navRef,
+        "style": isfixed ? {} : navStyle.value,
+        "role": "tablist",
+        "onKeydown": changeTab
+      }, [...[__props.showBar ? vue.createVNode(tabBar_vue_vue_type_script_setup_true_lang.default, {
+        "ref": tabBarRef,
+        "tabs": [...__props.panes],
+        "tabRefs": tabRefsMap.value,
+        "tabBarReduceDistance": __props.tabBarReduceDistance
+      }, null) : null, tabs.value(isfixed ? __props.fixTabCount : void 0)]]) : null;
+    };
+    return () => {
+      tracker.value;
+      return vue.createVNode("div", {
+        "ref": tabNavRef,
+        "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
+      }, [scrollBtn.value, vue.createVNode("div", {
+        "class": [ns.e("nav-scroll"), ns.is("have-fixed-tab", !!__props.fixTabCount)],
+        "ref": navScrollRef
+      }, [renderTabs(), __props.fixTabCount ? renderTabs(true) : null, newButton])]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/tabs/tab-pane.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-pane.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tabPane_vue_vue_type_script_setup_true_lang = require("./tab-pane.vue2.cjs");
+exports.default = tabPane_vue_vue_type_script_setup_true_lang.default;

package/lib/components/tabs/tab-pane.vue2.cjs

@@ -1 +1,88 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),p=require("@vueuse/core");require("@vft/utils");const y=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const q=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const h=require("./types.cjs"),g=["id","aria-hidden","aria-labelledby"],C=e.defineComponent({name:"vft-tab-pane"}),B=e.defineComponent({...C,props:{label:{},name:{},closable:{type:Boolean},disabled:{type:Boolean},lazy:{type:Boolean}},setup(n){const u=q.useNamespace("tab-pane"),r=e.getCurrentInstance(),i=e.useSlots(),t=e.inject(h.TabsRootContextKey);t||y.throwError(u.b(),"usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");const c=e.ref(),o=e.ref(),v=e.computed(()=>n.closable||t.props.closable),a=p.eagerComputed(()=>t.currentName.value===(n.name??o.value)),d=e.ref(a.value),s=e.computed(()=>n.name??o.value),b=p.eagerComputed(()=>!n.lazy||d.value||a.value),m=()=>c.value?.contains(document.activeElement);e.watch(a,l=>{l&&(d.value=!0)});const f=e.reactive({uid:r.uid,getVnode:()=>r.vnode,slots:i,props:r.props,paneName:s,active:a,index:o,isClosable:v,isFocusInsidePane:m,attrs:r.attrs});return t.registerPane(f),e.onBeforeUnmount(()=>{t.unregisterPane(f)}),e.onBeforeUpdate(()=>{i.label&&t.nav$.value?.scheduleRender()}),(l,R)=>e.unref(b)?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,id:`pane-${s.value}`,ref_key:"paneRef",ref:c,class:e.normalizeClass(e.unref(u).b()),role:"tabpanel","aria-hidden":!e.unref(a),"aria-labelledby":`tab-${s.value}`},[e.renderSlot(l.$slots,"default")],10,g)),[[e.vShow,e.unref(a)]]):e.createCommentVNode("",!0)}});exports.default=B;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@vueuse/core");
+require("@vft/utils");
+const error = require("../../utils/error.cjs");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const types = require("./types.cjs");
+const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
+const __default__ = vue.defineComponent({
+  name: "vft-tab-pane"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    label: {},
+    name: {},
+    closable: { type: Boolean },
+    disabled: { type: Boolean },
+    lazy: { type: Boolean }
+  },
+  setup(__props) {
+    const ns = index.useNamespace("tab-pane");
+    const instance = vue.getCurrentInstance();
+    const slots = vue.useSlots();
+    const tabsRoot = vue.inject(types.TabsRootContextKey);
+    if (!tabsRoot)
+      error.throwError(ns.b(), "usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");
+    const paneRef = vue.ref();
+    const index$1 = vue.ref();
+    const isClosable = vue.computed(() => __props.closable || tabsRoot.props.closable);
+    const active = core.eagerComputed(
+      () => tabsRoot.currentName.value === (__props.name ?? index$1.value)
+    );
+    const loaded = vue.ref(active.value);
+    const paneName = vue.computed(() => __props.name ?? index$1.value);
+    const shouldBeRender = core.eagerComputed(
+      () => !__props.lazy || loaded.value || active.value
+    );
+    const isFocusInsidePane = () => {
+      return paneRef.value?.contains(document.activeElement);
+    };
+    vue.watch(active, (val) => {
+      if (val) loaded.value = true;
+    });
+    const pane = vue.reactive({
+      uid: instance.uid,
+      getVnode: () => instance.vnode,
+      slots,
+      props: instance.props,
+      paneName,
+      active,
+      index: index$1,
+      isClosable,
+      isFocusInsidePane,
+      attrs: instance.attrs
+    });
+    tabsRoot.registerPane(pane);
+    vue.onBeforeUnmount(() => {
+      tabsRoot.unregisterPane(pane);
+    });
+    vue.onBeforeUpdate(() => {
+      if (slots.label) tabsRoot.nav$.value?.scheduleRender();
+    });
+    return (_ctx, _cache) => {
+      return vue.unref(shouldBeRender) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        id: `pane-${paneName.value}`,
+        ref_key: "paneRef",
+        ref: paneRef,
+        class: vue.normalizeClass(vue.unref(ns).b()),
+        role: "tabpanel",
+        "aria-hidden": !vue.unref(active),
+        "aria-labelledby": `tab-${paneName.value}`
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1)), [
+        [vue.vShow, vue.unref(active)]
+      ]) : vue.createCommentVNode("", true);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/tabs/tabs.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tabs.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tabs_vue_vue_type_script_setup_true_lang = require("./tabs.vue2.cjs");
+exports.default = tabs_vue_vue_type_script_setup_true_lang.default;

package/lib/components/tabs/tabs.vue2.cjs

@@ -1 +1,215 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("@vueuse/core");const C=require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const S=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");const A=require("../../hooks/use-ordered-children/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const E=require("@vft/constants"),k=require("./tab-nav.vue2.cjs"),M=require("./types.cjs"),D=t.defineComponent({name:"vft-tabs"}),z=t.defineComponent({...D,props:{closable:{type:Boolean},addable:{type:Boolean,default:!1},modelValue:{},editable:{type:Boolean},tabPosition:{default:"top"},beforeLeave:{},stretch:{type:Boolean},showBar:{type:Boolean,default:!0},tabBarReduceDistance:{default:0},closeIconCfg:{},addIconCfg:{},arrowLeftIconCfg:{},arrowRightIconCfg:{},fixTabCount:{default:0},fixExtraScrollWidth:{default:0},trigger:{default:"click"}},emits:["update:modelValue","tabClick","tabContextMenu","tabChange","tabRemove","tabAdd","edit"],setup(a,{expose:g,emit:h}){const r=h,c=S.useNamespace("tabs"),v=t.getCurrentInstance(),l=t.useSlots(),m=t.computed(()=>["left","right"].includes(a.tabPosition)),{children:u,addChild:I,removeChild:w,ChildrenSorter:x}=A.useOrderedChildren(t.getCurrentInstance(),"vft-tab-pane"),s=t.ref(),i=t.ref(a.modelValue??"0"),f=async(e,n=!1)=>{if(!(i.value===e||C.isUndefined(e)))try{let o;if(a.beforeLeave){const d=a.beforeLeave(e,i.value);o=d instanceof Promise?await d:d}else o=!0;if(o!==!1){const d=u.value.find(L=>L.paneName===i.value)?.isFocusInsidePane();i.value=e,n&&(r(E.UPDATE_MODEL_EVENT,e),r("tabChange",e)),s.value?.removeFocus?.(),d&&s.value?.focusActiveTab()}}catch{}},T=(e,n,o)=>{e.props.disabled||(r("tabClick",e,o),f(n,!0))},N=(e,n)=>{e.props.disabled||C.isUndefined(e.props.name)||(n.stopPropagation(),r("edit",e.props.name,"remove"),r("tabRemove",e.props.name))},P=()=>{r("edit",void 0,"add"),r("tabAdd")},b=e=>{const n=e.el.firstChild,o=["bottom","right"].includes(a.tabPosition)?e.children[0].el:e.children[1].el;n!==o&&n.before(o)};t.watch(()=>a.modelValue,e=>f(e)),t.watch(i,async()=>{await t.nextTick(),s.value?.scrollToActiveTab()});const R=(e,n,o)=>{r("tabContextMenu",e,n,o)},V=t.computed(()=>t.createVNode("div",{class:c.e("content")},[l.default?.()]));t.provide(M.TabsRootContextKey,{props:v.props,currentName:i,registerPane:I,unregisterPane:w,nav$:s}),g({currentName:i});const q=t.computed(()=>({icon:"icon-plus",size:12,...a.addIconCfg})),y=t.computed(()=>({icon:"icon-close",size:14,...a.closeIconCfg})),B=t.computed(()=>({icon:"icon-arrow-left",size:18,...a.arrowLeftIconCfg})),p=t.computed(()=>({icon:"icon-arrow-right",size:18,...a.arrowRightIconCfg}));return()=>{const e=()=>t.createVNode(k.default,{ref:s,currentName:i.value,editable:a.editable,panes:u.value,stretch:a.stretch,showBar:a.showBar,closeIconCfg:y.value,addIconCfg:q.value,arrowRightIconCfg:p.value,arrowLeftIconCfg:B.value,fixTabCount:a.fixTabCount,fixExtraScrollWidth:a.fixExtraScrollWidth,addable:a.addable,tabBarReduceDistance:a.tabBarReduceDistance,trigger:a.trigger,onTabClick:T,onTabRemove:N,onTabAdd:P,onTabContextmenu:R},null),n=t.createVNode("div",{class:[c.e("header"),m.value&&c.e("header-vertical"),c.is(a.tabPosition)]},[t.createVNode(x,null,{default:e,$stable:!0}),l.navRight?t.createVNode("div",{class:"nav-right"},[l.navRight?.()]):null]);return t.createVNode("div",{class:[c.b(),c.m(a.tabPosition)],onVnodeMounted:b,onVnodeUpdated:b},[V.value,n])}}});exports.default=z;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+require("@vueuse/core");
+const utils = require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+const index$1 = require("../../hooks/use-ordered-children/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const constants = require("@vft/constants");
+const tabNav_vue_vue_type_script_setup_true_lang = require("./tab-nav.vue2.cjs");
+const types = require("./types.cjs");
+const __default__ = vue.defineComponent({
+  name: "vft-tabs"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    closable: {
+      type: Boolean
+    },
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {},
+    editable: {
+      type: Boolean
+    },
+    tabPosition: {
+      default: "top"
+    },
+    beforeLeave: {},
+    stretch: {
+      type: Boolean
+    },
+    showBar: {
+      type: Boolean,
+      default: true
+    },
+    tabBarReduceDistance: {
+      default: 0
+    },
+    closeIconCfg: {},
+    addIconCfg: {},
+    arrowLeftIconCfg: {},
+    arrowRightIconCfg: {},
+    fixTabCount: {
+      default: 0
+    },
+    fixExtraScrollWidth: {
+      default: 0
+    },
+    trigger: {
+      default: "click"
+    }
+  },
+  emits: ["update:modelValue", "tabClick", "tabContextMenu", "tabChange", "tabRemove", "tabAdd", "edit"],
+  setup(__props, {
+    expose: __expose,
+    emit: __emit
+  }) {
+    const emit = __emit;
+    const ns = index.useNamespace("tabs");
+    const vm = vue.getCurrentInstance();
+    const slots = vue.useSlots();
+    const isVertical = vue.computed(() => ["left", "right"].includes(__props.tabPosition));
+    const {
+      children: panes,
+      addChild: registerPane,
+      removeChild: unregisterPane,
+      ChildrenSorter: PanesSorter
+    } = index$1.useOrderedChildren(vue.getCurrentInstance(), "vft-tab-pane");
+    const nav$ = vue.ref();
+    const currentName = vue.ref(__props.modelValue ?? "0");
+    const setCurrentName = async (value, trigger = false) => {
+      if (currentName.value === value || utils.isUndefined(value)) return;
+      try {
+        let canLeave;
+        if (__props.beforeLeave) {
+          const result = __props.beforeLeave(value, currentName.value);
+          canLeave = result instanceof Promise ? await result : result;
+        } else {
+          canLeave = true;
+        }
+        if (canLeave !== false) {
+          const isFocusInsidePane = panes.value.find((item) => item.paneName === currentName.value)?.isFocusInsidePane();
+          currentName.value = value;
+          if (trigger) {
+            emit(constants.UPDATE_MODEL_EVENT, value);
+            emit("tabChange", value);
+          }
+          nav$.value?.removeFocus?.();
+          if (isFocusInsidePane) {
+            nav$.value?.focusActiveTab();
+          }
+        }
+      } catch {
+      }
+    };
+    const handleTabClick = (tab, tabName, event) => {
+      if (tab.props.disabled) return;
+      emit("tabClick", tab, event);
+      setCurrentName(tabName, true);
+    };
+    const handleTabRemove = (pane, ev) => {
+      if (pane.props.disabled || utils.isUndefined(pane.props.name)) return;
+      ev.stopPropagation();
+      emit("edit", pane.props.name, "remove");
+      emit("tabRemove", pane.props.name);
+    };
+    const handleTabAdd = () => {
+      emit("edit", void 0, "add");
+      emit("tabAdd");
+    };
+    const swapChildren = (vnode) => {
+      const actualFirstChild = vnode.el.firstChild;
+      const firstChild = ["bottom", "right"].includes(__props.tabPosition) ? vnode.children[0].el : vnode.children[1].el;
+      if (actualFirstChild !== firstChild) {
+        actualFirstChild.before(firstChild);
+      }
+    };
+    vue.watch(() => __props.modelValue, (modelValue) => setCurrentName(modelValue));
+    vue.watch(currentName, async () => {
+      await vue.nextTick();
+      nav$.value?.scrollToActiveTab();
+    });
+    const handleContextmenu = (pane, index2, ev) => {
+      emit("tabContextMenu", pane, index2, ev);
+    };
+    const panels = vue.computed(() => {
+      return vue.createVNode("div", {
+        "class": ns.e("content")
+      }, [slots.default?.()]);
+    });
+    vue.provide(types.TabsRootContextKey, {
+      props: vm.props,
+      currentName,
+      registerPane,
+      unregisterPane,
+      nav$
+    });
+    __expose({
+      currentName
+    });
+    const _addIconCfg = vue.computed(() => {
+      return {
+        icon: "icon-plus",
+        size: 12,
+        ...__props.addIconCfg
+      };
+    });
+    const _closeIconCfg = vue.computed(() => {
+      return {
+        icon: "icon-close",
+        size: 14,
+        ...__props.closeIconCfg
+      };
+    });
+    const _arrowLeftIconCfg = vue.computed(() => {
+      return {
+        icon: "icon-arrow-left",
+        size: 18,
+        ...__props.arrowLeftIconCfg
+      };
+    });
+    const _arrowRightIconCfg = vue.computed(() => {
+      return {
+        icon: "icon-arrow-right",
+        size: 18,
+        ...__props.arrowRightIconCfg
+      };
+    });
+    return () => {
+      const tabNav = () => vue.createVNode(tabNav_vue_vue_type_script_setup_true_lang.default, {
+        "ref": nav$,
+        "currentName": currentName.value,
+        "editable": __props.editable,
+        "panes": panes.value,
+        "stretch": __props.stretch,
+        "showBar": __props.showBar,
+        "closeIconCfg": _closeIconCfg.value,
+        "addIconCfg": _addIconCfg.value,
+        "arrowRightIconCfg": _arrowRightIconCfg.value,
+        "arrowLeftIconCfg": _arrowLeftIconCfg.value,
+        "fixTabCount": __props.fixTabCount,
+        "fixExtraScrollWidth": __props.fixExtraScrollWidth,
+        "addable": __props.addable,
+        "tabBarReduceDistance": __props.tabBarReduceDistance,
+        "trigger": __props.trigger,
+        "onTabClick": handleTabClick,
+        "onTabRemove": handleTabRemove,
+        "onTabAdd": handleTabAdd,
+        "onTabContextmenu": handleContextmenu
+      }, null);
+      const header = vue.createVNode("div", {
+        "class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(__props.tabPosition)]
+      }, [vue.createVNode(PanesSorter, null, {
+        default: tabNav,
+        $stable: true
+      }), slots.navRight ? vue.createVNode("div", {
+        "class": "nav-right"
+      }, [slots.navRight?.()]) : null]);
+      return vue.createVNode("div", {
+        "class": [ns.b(), ns.m(__props.tabPosition)],
+        "onVnodeMounted": swapChildren,
+        "onVnodeUpdated": swapChildren
+      }, [panels.value, header]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/tabs/types.cjs

@@ -1 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./tabs.vue2.cjs");const t=Symbol("tabsRootContextKey");exports.TabsRootContextKey=t;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./tabs.vue2.cjs");
+const TabsRootContextKey = Symbol("tabsRootContextKey");
+exports.TabsRootContextKey = TabsRootContextKey;