vft 0.0.4 → 0.0.6

package/lib/components/tabs/index.d.ts

@@ -0,0 +1,356 @@
+export declare const VftTabs: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    type: {
+        type: import("vue").PropType<import("./types").TabsType | undefined>;
+        required: false;
+    };
+    closable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    addable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<Numberish>;
+        required: true;
+    };
+    editable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    tabPosition: {
+        type: import("vue").PropType<"left" | "right" | "top" | "bottom" | undefined>;
+        required: false;
+    };
+    beforeLeave: {
+        type: import("vue").PropType<Function | undefined>;
+        required: false;
+    };
+    stretch: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    addIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    arrowLeftIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    arrowRightIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+}, {
+    currentName: import("vue").Ref<Numberish>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (name: Numberish) => boolean;
+    tabClick: (pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        props: {
+            label: string;
+            name: Numberish;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        attrs: Record<string, any>;
+    }, ev: Event) => boolean;
+    tabContextMenu: (pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        props: {
+            label: string;
+            name: Numberish;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        attrs: Record<string, any>;
+    }, index: number, ev: Event) => boolean;
+    tabChange: (name: Numberish) => boolean;
+    edit: (paneName: Numberish | undefined, action: "remove" | "add") => boolean;
+    tabRemove: (name: Numberish) => boolean;
+    tabAdd: () => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<import("./types").TabsType | undefined>;
+        required: false;
+    };
+    closable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    addable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    modelValue: {
+        type: import("vue").PropType<Numberish>;
+        required: true;
+    };
+    editable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    tabPosition: {
+        type: import("vue").PropType<"left" | "right" | "top" | "bottom" | undefined>;
+        required: false;
+    };
+    beforeLeave: {
+        type: import("vue").PropType<Function | undefined>;
+        required: false;
+    };
+    stretch: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    closeIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    addIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    arrowLeftIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+    arrowRightIconCfg: {
+        type: import("vue").PropType<import("..").IconProps | undefined>;
+        required: false;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((name: Numberish) => any) | undefined;
+    onTabClick?: ((pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        props: {
+            label: string;
+            name: Numberish;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        attrs: Record<string, any>;
+    }, ev: Event) => any) | undefined;
+    onTabContextMenu?: ((pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        props: {
+            label: string;
+            name: Numberish;
+            closable: boolean;
+            disabled: boolean;
+            lazy: boolean;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        attrs: Record<string, any>;
+    }, index: number, ev: Event) => any) | undefined;
+    onTabChange?: ((name: Numberish) => any) | undefined;
+    onEdit?: ((paneName: Numberish | undefined, action: "remove" | "add") => any) | undefined;
+    onTabRemove?: ((name: Numberish) => any) | undefined;
+    onTabAdd?: (() => any) | undefined;
+}, {}>> & {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            label: {
+                type: import("vue").PropType<string | undefined>;
+                required: false;
+            };
+            name: {
+                type: import("vue").PropType<Numberish | undefined>;
+                required: false;
+            };
+            closable: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+            lazy: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            label: {
+                type: import("vue").PropType<string | undefined>;
+                required: false;
+            };
+            name: {
+                type: import("vue").PropType<Numberish | undefined>;
+                required: false;
+            };
+            closable: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+            disabled: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+            lazy: {
+                type: import("vue").PropType<boolean | undefined>;
+                required: false;
+            };
+        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        label: {
+            type: import("vue").PropType<string | undefined>;
+            required: false;
+        };
+        name: {
+            type: import("vue").PropType<Numberish | undefined>;
+            required: false;
+        };
+        closable: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        disabled: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+        lazy: {
+            type: import("vue").PropType<boolean | undefined>;
+            required: false;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    name: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    closable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    lazy: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+export declare const VftTabPane: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    name: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    closable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    lazy: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string | undefined>;
+        required: false;
+    };
+    name: {
+        type: import("vue").PropType<Numberish | undefined>;
+        required: false;
+    };
+    closable: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+    lazy: {
+        type: import("vue").PropType<boolean | undefined>;
+        required: false;
+    };
+}>>, {}>>;
+export default VftTabs;
+export * from './types';

package/lib/components/tabs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../utils/vue/install.js");require("vue");require("@vue/shared");require("@vft/utils");const a=require("./tabs.vue2.js"),t=require("./tab-pane.vue2.js"),r=require("./types.js"),u=e.withInstall(a.default,t.default),s=e.withNoopInstall(t.default);exports.TabsRootContextKey=r.TabsRootContextKey;exports.VftTabPane=s;exports.VftTabs=u;exports.default=u;
+//# sourceMappingURL=index.js.map

package/lib/components/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/tabs/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@vft-ui/utils'\nimport Tabs from './tabs.vue';\nimport TabPane from './tab-pane.vue';\n\nexport const VftTabs = withInstall(Tabs, TabPane)\nexport const VftTabPane = withNoopInstall(TabPane)\nexport default VftTabs\n\nexport * from './types';\n"],"names":["VftTabs","withInstall","Tabs","TabPane","VftTabPane","withNoopInstall"],"mappings":"gTAIaA,EAAUC,EAAAA,YAAYC,EAAA,QAAMC,SAAO,EACnCC,EAAaC,kBAAgBF,EAAO,OAAA"}

package/lib/components/tabs/style/css.js

@@ -0,0 +1,2 @@
+"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-tabs.css");
+//# sourceMappingURL=css.js.map

package/lib/components/tabs/style/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/components/tabs/style/index.js

@@ -0,0 +1,2 @@
+"use strict";require("../../../theme-style/src/base.scss.js");require("../../../theme-style/src/tabs.scss.js");
+//# sourceMappingURL=index.js.map

package/lib/components/tabs/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/components/tabs/tab-bar.vue.d.ts

@@ -0,0 +1,51 @@
+import type { PropType as __PropType } from 'vue';
+import type { CSSProperties } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    tabs: {
+        type: __PropType<{
+            uid: number;
+            slots: Readonly<{
+                [name: string]: import("vue").Slot | undefined;
+            }>;
+            props: {
+                label: string;
+                name: Numberish;
+                closable: boolean;
+                disabled: boolean;
+                lazy: boolean;
+            };
+            paneName: string | number | undefined;
+            active: boolean;
+            index: string | undefined;
+            isClosable: boolean;
+            attrs: Record<string, any>;
+        }[]>;
+        required: true;
+    };
+}, {
+    ref: import("vue").Ref<HTMLDivElement | undefined>;
+    update: () => CSSProperties;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabs: {
+        type: __PropType<{
+            uid: number;
+            slots: Readonly<{
+                [name: string]: import("vue").Slot | undefined;
+            }>;
+            props: {
+                label: string;
+                name: Numberish;
+                closable: boolean;
+                disabled: boolean;
+                lazy: boolean;
+            };
+            paneName: string | number | undefined;
+            active: boolean;
+            index: string | undefined;
+            isClosable: boolean;
+            attrs: Record<string, any>;
+        }[]>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/lib/components/tabs/tab-bar.vue.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-bar.vue2.js");exports.default=e.default;
+//# sourceMappingURL=tab-bar.vue.js.map

package/lib/components/tabs/tab-bar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/components/tabs/tab-bar.vue2.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S=require("./types.js"),w=require("../../hooks/use-namespace/index.js");require("@vue/shared");const u=require("@vft/utils"),$=require("@vueuse/core"),q=e.defineComponent({__name:"tab-bar",props:{tabs:null},setup(g,{expose:v}){const a=g,_=e.getCurrentInstance(),l=e.inject(S.TabsRootContextKey),p=w.useNamespace("tabs"),o=e.ref(),f=e.ref(),h=()=>{let t=0,r=0;const s=["top","bottom"].includes(l.props.tabPosition)?"width":"height",b=s==="width"?"x":"y",x=b==="x"?"left":"top";return a.tabs.every(d=>{var m,y;const n=(y=(m=_.parent)==null?void 0:m.refs)==null?void 0:y[`tab-${d.uid}`];if(!n)return!1;if(!d.active)return!0;t=n[`offset${u.capitalize(x)}`],r=n[`client${u.capitalize(s)}`];const c=window.getComputedStyle(n);return s==="width"&&(a.tabs.length>1&&(r-=Number.parseFloat(c.paddingLeft)+Number.parseFloat(c.paddingRight)),t+=Number.parseFloat(c.paddingLeft)),!1}),{[s]:`${r}px`,transform:`translate${u.capitalize(b)}(${t}px)`}},i=()=>f.value=h();e.watch(()=>a.tabs,async()=>{await e.nextTick(),i()},{immediate:!0});const z=e.computed(()=>l.props.tabPosition);return $.useResizeObserver(o,()=>i()),v({ref:o,update:i}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"barRef",ref:o,class:e.normalizeClass([e.unref(p).e("active-bar"),e.unref(p).is(e.unref(z))]),style:e.normalizeStyle(f.value)},null,6))}});exports.default=q;
+//# sourceMappingURL=tab-bar.vue2.js.map

package/lib/components/tabs/tab-bar.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.vue2.js","sources":["../../../../../packages/components/tabs/tab-bar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type TabsPaneContext, TabsRootContextKey } from './types';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { capitalize } from '@vft/utils';\nimport { getCurrentInstance, inject, nextTick, ref, watch, computed } from 'vue';\nimport { useResizeObserver } from '@vueuse/core';\n\nimport type { CSSProperties } from 'vue';\n\nconst props = defineProps({\n  \"tabs\": null\n});\n\nconst instance = getCurrentInstance()!;\nconst rootTabs = inject(TabsRootContextKey)!;\n\nconst ns = useNamespace('tabs');\n\nconst barRef = ref<HTMLDivElement>();\nconst barStyle = ref<CSSProperties>();\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0;\n  let tabSize = 0;\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition!)\n    ? 'width'\n    : 'height';\n  const sizeDir = sizeName === 'width' ? 'x' : 'y';\n  const position = sizeDir === 'x' ? 'left' : 'top';\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement;\n    if (!$el) return false;\n\n    if (!tab.active) {\n      return true;\n    }\n    offset = $el[`offset${capitalize(position)}`];\n    tabSize = $el[`client${capitalize(sizeName)}`];\n\n    const tabStyles = window.getComputedStyle($el);\n\n    if (sizeName === 'width') {\n      if (props.tabs.length > 1) {\n        tabSize -=\n          Number.parseFloat(tabStyles.paddingLeft) +\n          Number.parseFloat(tabStyles.paddingRight);\n      }\n      offset += Number.parseFloat(tabStyles.paddingLeft);\n    }\n    return false;\n  });\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`\n  };\n};\n\nconst update = () => (barStyle.value = getBarStyle());\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick();\n    update();\n  },\n  { immediate: true }\n);\n\nconst _tabPosition = computed(() => {\n  return rootTabs.props.tabPosition!;\n});\n\nuseResizeObserver(barRef, () => update());\n\ndefineExpose({\n  ref: barRef,\n  update\n});\n</script>\n\n<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(_tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n"],"names":["instance","getCurrentInstance","rootTabs","inject","TabsRootContextKey","ns","useNamespace","barRef","ref","barStyle","getBarStyle","offset","tabSize","sizeName","sizeDir","position","props","tab","$el","_b","_a","capitalize","tabStyles","update","watch","nextTick","_tabPosition","computed","useResizeObserver","expose"],"mappings":"gXAaMA,EAAWC,EAAAA,qBACXC,EAAWC,SAAOC,EAAAA,kBAAkB,EAEpCC,EAAKC,eAAa,MAAM,EAExBC,EAASC,EAAAA,MACTC,EAAWD,EAAAA,MAEXE,EAAc,IAAqB,CACvC,IAAIC,EAAS,EACTC,EAAU,EAER,MAAAC,EAAW,CAAC,MAAO,QAAQ,EAAE,SAASX,EAAS,MAAM,WAAY,EACnE,QACA,SACEY,EAAUD,IAAa,QAAU,IAAM,IACvCE,EAAWD,IAAY,IAAM,OAAS,MAEtC,OAAAE,EAAA,KAAK,MAAOC,GAAQ,SACxB,MAAMC,GAAMC,GAAAC,EAAApB,EAAS,SAAT,YAAAoB,EAAiB,OAAjB,YAAAD,EAAwB,OAAOF,EAAI,OAC/C,GAAI,CAACC,EAAY,MAAA,GAEb,GAAA,CAACD,EAAI,OACA,MAAA,GAETN,EAASO,EAAI,SAASG,EAAW,WAAAN,CAAQ,GAAG,EAC5CH,EAAUM,EAAI,SAASG,EAAW,WAAAR,CAAQ,GAAG,EAEvC,MAAAS,EAAY,OAAO,iBAAiBJ,CAAG,EAE7C,OAAIL,IAAa,UACXG,EAAM,KAAK,OAAS,IAEpBJ,GAAA,OAAO,WAAWU,EAAU,WAAW,EACvC,OAAO,WAAWA,EAAU,YAAY,GAElCX,GAAA,OAAO,WAAWW,EAAU,WAAW,GAE5C,EAAA,CACR,EAEM,CACL,CAACT,CAAQ,EAAG,GAAGD,MACf,UAAW,YAAYS,EAAW,WAAAP,CAAO,KAAKH,MAAA,CAChD,EAGIY,EAAS,IAAOd,EAAS,MAAQC,EAAY,EAEnDc,EAAA,MACE,IAAMR,EAAM,KACZ,SAAY,CACV,MAAMS,EAAS,SAAA,EACRF,GACT,EACA,CAAE,UAAW,EAAK,CAAA,EAGd,MAAAG,EAAeC,EAAAA,SAAS,IACrBzB,EAAS,MAAM,WACvB,EAEiB0B,OAAAA,EAAAA,kBAAArB,EAAQ,IAAMgB,EAAA,CAAQ,EAE3BM,EAAA,CACX,IAAKtB,EACL,OAAAgB,CAAA,CACD"}

package/lib/components/tabs/tab-nav.vue.d.ts

@@ -0,0 +1,121 @@
+import type { PropType as __PropType } from 'vue';
+import { type IconProps } from 'vft/es/components';
+import type { TabsType } from './types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    panes: {
+        type: __PropType<{
+            uid: number;
+            slots: Readonly<{
+                [name: string]: import("vue").Slot | undefined;
+            }>;
+            props: {
+                label: string;
+                name: Numberish;
+                closable: boolean;
+                disabled: boolean;
+                lazy: boolean;
+            };
+            paneName: string | number | undefined;
+            active: boolean;
+            index: string | undefined;
+            isClosable: boolean;
+            attrs: Record<string, any>;
+        }[]>;
+        required: true;
+    };
+    editable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    addable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<TabsType | undefined>;
+        required: false;
+    };
+    stretch: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    closeIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    addIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    arrowLeftIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    arrowRightIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+}, {
+    scrollToActiveTab: () => Promise<void>;
+    removeFocus: () => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("tabClick" | "tabRemove" | "tabAdd" | "tabContextmenu")[], "tabClick" | "tabRemove" | "tabAdd" | "tabContextmenu", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    panes: {
+        type: __PropType<{
+            uid: number;
+            slots: Readonly<{
+                [name: string]: import("vue").Slot | undefined;
+            }>;
+            props: {
+                label: string;
+                name: Numberish;
+                closable: boolean;
+                disabled: boolean;
+                lazy: boolean;
+            };
+            paneName: string | number | undefined;
+            active: boolean;
+            index: string | undefined;
+            isClosable: boolean;
+            attrs: Record<string, any>;
+        }[]>;
+        required: true;
+    };
+    editable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    addable: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    type: {
+        type: __PropType<TabsType | undefined>;
+        required: false;
+    };
+    stretch: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    closeIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    addIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    arrowLeftIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+    arrowRightIconCfg: {
+        type: __PropType<IconProps | undefined>;
+        required: false;
+    };
+}>> & {
+    onTabClick?: ((...args: any[]) => any) | undefined;
+    onTabRemove?: ((...args: any[]) => any) | undefined;
+    onTabAdd?: ((...args: any[]) => any) | undefined;
+    onTabContextmenu?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/lib/components/tabs/tab-nav.vue.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-nav.vue2.js");exports.default=e.default;
+//# sourceMappingURL=tab-nav.vue.js.map

package/lib/components/tabs/tab-nav.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-nav.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue");require("../divider/index.js");const N=require("../icon/index.js");require("../avatar/index.js");require("../empty/index.js");require("../result/index.js");require("../exception/index.js");require("./index.js");const X=require("../../hooks/use-namespace/index.js");require("@vue/shared");const V=require("@vft/utils"),y=require("@vft/constants"),Y=require("./types.js"),T=require("@vueuse/core"),G=require("./tab-bar.vue2.js"),J=o.defineComponent({__name:"tab-nav",props:{panes:null,editable:{type:Boolean},addable:{type:Boolean},type:null,stretch:{type:Boolean},closeIconCfg:null,addIconCfg:null,arrowLeftIconCfg:null,arrowRightIconCfg:null},emits:["tabClick","tabRemove","tabAdd","tabContextmenu"],setup(l,{expose:R,emit:m}){var S;const P=o.getCurrentInstance(),C=o.inject(Y.TabsRootContextKey),n=X.useNamespace("tabs"),A=T.useDocumentVisibility(),D=T.useWindowFocus(),x=o.ref(),b=o.ref(),h=o.ref(),f=o.ref(!1),d=o.ref(0),I=o.ref(!1),w=o.ref(!0),p=o.computed(()=>["top","bottom"].includes(C.props.tabPosition)?"width":"height"),F=o.computed(()=>({transform:`translate${p.value==="width"?"X":"Y"}(-${d.value}px)`})),L=()=>{if(!b.value)return;const t=b.value[`offset${V.capitalize(p.value)}`],e=d.value;e&&(d.value=e>t?e-t:0)},M=()=>{if(!b.value||!h.value)return;const t=h.value[`offset${V.capitalize(p.value)}`],e=b.value[`offset${V.capitalize(p.value)}`],a=d.value;t-a<=e||(d.value=t-a>e*2?a+e:t-e)},$=async()=>{const t=h.value;if(!f.value||!x.value||!b.value||!t)return;await o.nextTick();const e=x.value.querySelector(".is-active");if(!e)return;const a=b.value,g=["top","bottom"].includes(C.props.tabPosition),i=e.getBoundingClientRect(),s=a.getBoundingClientRect(),u=g?t.offsetWidth-s.width:t.offsetHeight-s.height,r=d.value;let c=r;g?(i.left<s.left&&(c=r-(s.left-i.left)),i.right>s.right&&(c=r+i.right-s.right)):(i.top<s.top&&(c=r-(s.top-i.top)),i.bottom>s.bottom&&(c=r+(i.bottom-s.bottom))),c=Math.max(c,0),d.value=Math.min(c,u)},O=()=>{if(!h.value||!b.value)return;const t=h.value[`offset${V.capitalize(p.value)}`],e=b.value[`offset${V.capitalize(p.value)}`],a=d.value;e<t?(f.value=f.value||{},f.value.prev=a,f.value.next=a+e<t,t-a<e&&(d.value=t-e)):(f.value=!1,a>0&&(d.value=0))},K=t=>{const e=t.code,{up:a,down:g,left:i,right:s}=y.EVENT_CODE;if(![a,g,i,s].includes(e))return;const u=Array.from(t.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")),r=u.indexOf(t.target);let c;e===i||e===a?r===0?c=u.length-1:c=r-1:r<u.length-1?c=r+1:c=0,u[c].focus(),u[c].click(),z()},z=()=>{w.value&&(I.value=!0)},q=()=>I.value=!1;o.watch(A,t=>{t==="hidden"?w.value=!1:t==="visible"&&setTimeout(()=>w.value=!0,50)}),o.watch(D,t=>{t?setTimeout(()=>w.value=!0,50):w.value=!1}),T.useResizeObserver(x,O),o.onMounted(()=>setTimeout(()=>$(),0)),o.onUpdated(()=>O()),R({scrollToActiveTab:$,removeFocus:q}),o.watch(()=>l.panes,()=>P.update(),{flush:"post"});const j=o.computed(()=>{var t,e;return f.value?[o.createVNode("span",{class:[n.e("nav-prev"),n.is("disabled",!f.value.prev)],onClick:L},[(t=l.arrowLeftIconCfg)!=null&&t.icon?o.createVNode(N.VftIcon,l.arrowLeftIconCfg,null):null]),o.createVNode("span",{class:[n.e("nav-next"),n.is("disabled",!f.value.next)],onClick:M},[(e=l.arrowRightIconCfg)!=null&&e.icon?o.createVNode(N.VftIcon,l.arrowRightIconCfg,null):null])]:null}),H=o.computed(()=>{var t;return(t=l.panes)==null?void 0:t.map((e,a)=>{var E,k,B;const g=e.uid,i=e.props.disabled,s=e.props.name??e.index??`${a}`,u=!i&&(e.isClosable||l.editable);e.index=`${a}`;const r=u?o.createVNode("span",{class:"is-icon-close",onClick:v=>m("tabRemove",e,v)},[(E=l.closeIconCfg)!=null&&E.icon?o.createVNode(N.VftIcon,l.closeIconCfg,null):null]):null,c=((B=(k=e.slots).label)==null?void 0:B.call(k))||e.props.label,U=!i&&e.active?0:-1;return o.createVNode("div",{ref:`tab-${g}`,class:[n.e("item"),n.is(C.props.tabPosition),n.is("active",e.active),n.is("disabled",i),n.is("closable",u),n.is("focus",I.value)],id:`tab-${s}`,key:`tab-${g}`,"aria-controls":`pane-${s}`,role:"tab","aria-selected":e.active,tabindex:U,onFocus:()=>z(),onBlur:()=>q(),onClick:v=>{q(),m("tabClick",e,s,v)},onContextmenu:v=>{v.preventDefault(),m("tabContextmenu",{pane:e,index:a,event:v})},onKeydown:v=>{u&&(v.code===y.EVENT_CODE.delete||v.code===y.EVENT_CODE.backspace)&&m("tabRemove",e,v)}},[c,r])})}),W=l.editable||l.addable?o.createVNode("span",{class:n.e("new-tab"),tabindex:"0",onClick:()=>m("tabAdd"),onKeydown:t=>{t.code===y.EVENT_CODE.enter&&m("tabAdd")}},[(S=l.addIconCfg)!=null&&S.icon?o.createVNode(N.VftIcon,l.addIconCfg,null):null]):null;return()=>o.createVNode("div",{ref:x,class:[n.e("nav-wrap"),n.is("scrollable",!!f.value),n.is(C.props.tabPosition)]},[j.value,o.createVNode("div",{class:n.e("nav-scroll"),ref:b},[o.createVNode("div",{class:[n.e("nav"),n.is(C.props.tabPosition),n.is("stretch",l.stretch&&["top","bottom"].includes(C.props.tabPosition))],ref:h,style:F.value,role:"tablist",onKeydown:K},[l.type?null:o.createVNode(G.default,{tabs:[...l.panes]},null),H.value]),W])])}});exports.default=J;
+//# sourceMappingURL=tab-nav.vue2.js.map

package/lib/components/tabs/tab-nav.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-nav.vue2.js","sources":["../../../../../packages/components/tabs/tab-nav.vue"],"sourcesContent":["<script lang=\"tsx\" setup>\nimport {\n  computed,\n  type CSSProperties,\n  getCurrentInstance,\n  inject,\n  nextTick,\n  onMounted,\n  onUpdated,\n  ref,\n  watch\n} from 'vue';\nimport { type IconProps, VftIcon } from '@vft-ui/components';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { capitalize } from '@vft/utils';\nimport { EVENT_CODE } from '@vft/constants';\nimport { TabsRootContextKey } from './types';\nimport type { TabsPaneContext, TabsType, Scrollable } from './types';\nimport { useDocumentVisibility, useResizeObserver, useWindowFocus } from '@vueuse/core';\nimport TabBar from './tab-bar.vue';\n\ninterface TabNavProps {\n  panes: TabsPaneContext[];\n  /** 标签是否同时可增加和关闭 */\n  editable?: boolean;\n  /** 标签是否可增加 */\n  addable?: boolean;\n  /** tab 类型 */\n  type?: TabsType;\n  stretch?: boolean;\n  /** 图标配置 */\n  closeIconCfg?: IconProps;\n  addIconCfg?: IconProps;\n  arrowLeftIconCfg?: IconProps;\n  arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n  \"panes\": null,\n  \"editable\": { type: Boolean,  },\n  \"addable\": { type: Boolean,  },\n  \"type\": null,\n  \"stretch\": { type: Boolean,  },\n  \"closeIconCfg\": null,\n  \"addIconCfg\": null,\n  \"arrowLeftIconCfg\": null,\n  \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits(['tabClick', 'tabRemove', 'tabAdd', 'tabContextmenu']);\n\nconst vm = getCurrentInstance()!;\n\n// 获取从 index.vue 提供的数据信息\nconst rootTabs = inject(TabsRootContextKey)!;\n\nconst ns = useNamespace('tabs');\nconst visibility = useDocumentVisibility();\nconst focused = useWindowFocus();\n\n// 整个 nav dom 包含前进后退 btn (vri-tabs__nav-wrap)\nconst el$ = ref<HTMLDivElement>();\n// el$ 子节点 包含 newButton (vri-tabs__nav-scroll)\nconst navScroll$ = ref<HTMLDivElement>();\n// navScroll$ 子节点 (vri-tabs__nav)\nconst nav$ = ref<HTMLDivElement>();\n\n/** 是否展示左右滚动 */\nconst scrollable = ref<false | Scrollable>(false);\n// 记录滚动时的偏移量\nconst navOffset = ref(0);\nconst isFocus = ref(false);\nconst focusable = ref(true);\n\n// 根据 tabPosition 确定 sizeName 是 width or height\nconst sizeName = computed(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition!) ? 'width' : 'height');\n\n// 设置 tab 导航栏的 translateX or translateY 的偏移量\nconst navStyle = computed<CSSProperties>(() => {\n  const dir = sizeName.value === 'width' ? 'X' : 'Y';\n  return {\n    transform: `translate${dir}(-${navOffset.value}px)`\n  };\n});\n\n// 向前滚动\nconst scrollPrev = () => {\n  if (!navScroll$.value) return;\n  const containerSize =\n    navScroll$.value[`offset${capitalize(sizeName.value)}`];\n  const currentOffset = navOffset.value;\n\n  if (!currentOffset) return;\n\n  navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;\n};\n\n// 向后滚动\nconst scrollNext = () => {\n  if (!navScroll$.value || !nav$.value) return;\n\n  const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n  const containerSize =\n    navScroll$.value[`offset${capitalize(sizeName.value)}`];\n  const currentOffset = navOffset.value;\n\n  if (navSize - currentOffset <= containerSize) return;\n\n  navOffset.value = navSize - currentOffset > containerSize * 2\n    ? currentOffset + containerSize\n    : navSize - containerSize;\n};\n\n// 滚动到激活的 tab 主要是获取 navOffset 的值\nconst scrollToActiveTab = async() => {\n  const nav = nav$.value;\n  if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;\n\n  await nextTick();\n\n  const activeTab = el$.value.querySelector('.is-active');\n  if (!activeTab) return;\n\n  const navScroll = navScroll$.value;\n  const isHorizontal = ['top', 'bottom'].includes(\n    rootTabs.props.tabPosition!\n  );\n  const activeTabBounding = activeTab.getBoundingClientRect();\n  // vri-tabs__nav-scroll\n  const navScrollBounding = navScroll.getBoundingClientRect();\n  const maxOffset = isHorizontal\n    ? nav.offsetWidth - navScrollBounding.width\n    : nav.offsetHeight - navScrollBounding.height;\n\n  const currentOffset = navOffset.value;\n\n  let newOffset = currentOffset;\n\n  if (isHorizontal) {\n    if (activeTabBounding.left < navScrollBounding.left) {\n      newOffset =\n        currentOffset - (navScrollBounding.left - activeTabBounding.left);\n    }\n    if (activeTabBounding.right > navScrollBounding.right) {\n      newOffset =\n        currentOffset + activeTabBounding.right - navScrollBounding.right;\n    }\n  } else {\n    if (activeTabBounding.top < navScrollBounding.top) {\n      newOffset =\n        currentOffset - (navScrollBounding.top - activeTabBounding.top);\n    }\n    if (activeTabBounding.bottom > navScrollBounding.bottom) {\n      newOffset =\n        currentOffset +\n        (activeTabBounding.bottom - navScrollBounding.bottom);\n    }\n  }\n  newOffset = Math.max(newOffset, 0);\n  navOffset.value = Math.min(newOffset, maxOffset);\n};\n\nconst update = () => {\n  if (!nav$.value || !navScroll$.value) return;\n  // 根据 position 的不同 获取 nav$(vri-tabs__nav) 的 offsetWidth or offsetHeight\n  const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n  // 获取到 navScroll$ 的 offsetWidth or offsetHeight\n  const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];\n  // 获取到当前的偏移量\n  const currentOffset = navOffset.value;\n  // 由于 navScroll$ 的 overflow 是 hidden，所以当 vri-tabs__nav 撑开时其宽度可能会超过 vri-tabs__nav-scroll\n  if (containerSize < navSize) {\n    scrollable.value = scrollable.value || {};\n    scrollable.value.prev = currentOffset;\n    scrollable.value.next = currentOffset + containerSize < navSize;\n    if (navSize - currentOffset < containerSize) {\n      navOffset.value = navSize - containerSize;\n    }\n  } else {\n    scrollable.value = false;\n    if (currentOffset > 0) {\n      navOffset.value = 0;\n    }\n  }\n};\n\nconst changeTab = (e: KeyboardEvent) => {\n  const code = e.code;\n\n  const { up, down, left, right } = EVENT_CODE;\n  if (![up, down, left, right].includes(code)) return;\n\n  // 左右上下键更换tab\n  const tabList = Array.from(\n    (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n      '[role=tab]:not(.is-disabled)'\n    )\n  );\n  const currentIndex = tabList.indexOf(e.target as HTMLDivElement);\n\n  let nextIndex: number;\n  if (code === left || code === up) {\n    // left\n    if (currentIndex === 0) {\n      // first\n      nextIndex = tabList.length - 1;\n    } else {\n      nextIndex = currentIndex - 1;\n    }\n  } else {\n    // right\n    if (currentIndex < tabList.length - 1) {\n      // not last\n      nextIndex = currentIndex + 1;\n    } else {\n      nextIndex = 0;\n    }\n  }\n  tabList[nextIndex].focus(); // 改变焦点元素\n  tabList[nextIndex].click(); // 选中下一个tab\n  setFocus();\n};\n\nconst setFocus = () => {\n  if (focusable.value) isFocus.value = true;\n};\nconst removeFocus = () => (isFocus.value = false);\n\nwatch(visibility, (visibility) => {\n  if (visibility === 'hidden') {\n    focusable.value = false;\n  } else if (visibility === 'visible') {\n    setTimeout(() => (focusable.value = true), 50);\n  }\n});\n\nwatch(focused, (focused) => {\n  if (focused) {\n    setTimeout(() => (focusable.value = true), 50);\n  } else {\n    focusable.value = false;\n  }\n});\n\n// 监听 resize 触发 update\nuseResizeObserver(el$, update);\n\nonMounted(() => setTimeout(() => scrollToActiveTab(), 0));\nonUpdated(() => update());\n\ndefineExpose({\n  scrollToActiveTab,\n  removeFocus\n});\n\nwatch(\n  () => __props.panes,\n  () => vm.update(),\n  { flush: 'post' }\n);\n\n// 前进后退标签\nconst scrollBtn = computed(() => {\n  return scrollable.value\n    ? [\n      <span\n        class={[\n          ns.e('nav-prev'),\n          ns.is('disabled', !scrollable.value.prev)\n        ]}\n        onClick={scrollPrev}\n      >\n        {__props.arrowLeftIconCfg?.icon ? <VftIcon {...__props.arrowLeftIconCfg}></VftIcon> : null}\n      </span>,\n      <span\n        class={[\n          ns.e('nav-next'),\n          ns.is('disabled', !scrollable.value.next)\n        ]}\n        onClick={scrollNext}\n      >\n         {__props.arrowRightIconCfg?.icon ? <VftIcon {...__props.arrowRightIconCfg}></VftIcon> : null}\n      </span>\n    ]\n    : null;\n});\n\n// 渲染 tab-pane\nconst tabs = computed(() => {\n  return __props.panes?.map((pane, index) => {\n    const uid = pane.uid;\n    const disabled = pane.props.disabled;\n    const tabName = pane.props.name ?? pane.index ?? `${index}`;\n    const closable = !disabled && (pane.isClosable || __props.editable);\n    pane.index = `${index}`;\n\n    // 关闭标签图标\n    const btnClose = closable ? (\n      <span class=\"is-icon-close\" onClick={(ev: MouseEvent) => emit('tabRemove', pane, ev)}>\n        {__props.closeIconCfg?.icon ? <VftIcon {...__props.closeIconCfg}></VftIcon> : null}\n      </span>\n    ) : null;\n\n    const tabLabelContent = pane.slots.label?.() || pane.props.label;\n    const tabindex = !disabled && pane.active ? 0 : -1;\n\n    return (\n      <div\n        ref={`tab-${uid}`}\n        class={[\n          ns.e('item'),\n          ns.is(rootTabs.props.tabPosition!),\n          ns.is('active', pane.active),\n          ns.is('disabled', disabled),\n          ns.is('closable', closable),\n          ns.is('focus', isFocus.value)\n        ]}\n        id={`tab-${tabName}`}\n        key={`tab-${uid}`}\n        aria-controls={`pane-${tabName}`}\n        role=\"tab\"\n        aria-selected={pane.active}\n        tabindex={tabindex}\n        onFocus={() => setFocus()}\n        onBlur={() => removeFocus()}\n        onClick={(ev: MouseEvent) => {\n          removeFocus();\n          emit('tabClick', pane, tabName, ev);\n        }}\n        onContextmenu={(event) => {\n          event.preventDefault();\n          emit('tabContextmenu', { pane, index, event });\n        }}\n        onKeydown={(ev: KeyboardEvent) => {\n          if (\n            closable &&\n            (ev.code === EVENT_CODE.delete ||\n              ev.code === EVENT_CODE.backspace)\n          ) {\n            emit('tabRemove', pane, ev);\n          }\n        }}\n      >\n        {...[tabLabelContent, btnClose]}\n      </div>\n    );\n  });\n});\n\n// 增加 tab 的 dom\nconst newButton =\n  __props.editable || __props.addable ? (\n    <span\n      class={ns.e('new-tab')}\n      tabindex=\"0\"\n      onClick={() => emit('tabAdd')}\n      onKeydown={(ev: KeyboardEvent) => {\n        if (ev.code === EVENT_CODE.enter) emit('tabAdd');\n      }}\n    >\n      {__props.addIconCfg?.icon ? <VftIcon {...__props.addIconCfg}></VftIcon> : null}\n    </span>\n  ) : null;\n\ndefineRender(() => {\n  return (\n    <div\n      ref={el$}\n      class={[\n        ns.e('nav-wrap'),\n        ns.is('scrollable', !!scrollable.value),\n        ns.is(rootTabs.props.tabPosition!)\n      ]}\n    >\n      {scrollBtn.value}\n      <div class={ns.e('nav-scroll')} ref={navScroll$}>\n        <div\n          class={[\n            ns.e('nav'),\n            ns.is(rootTabs.props.tabPosition!),\n            ns.is(\n              'stretch',\n              __props.stretch &&\n              ['top', 'bottom'].includes(rootTabs.props.tabPosition!)\n            )\n          ]}\n          ref={nav$}\n          style={navStyle.value}\n          role=\"tablist\"\n          onKeydown={changeTab}\n        >\n          {...[\n            !__props.type ? <TabBar tabs={[...__props.panes]} /> : null,\n            tabs.value\n          ]}\n        </div>\n        {newButton}\n      </div>\n    </div>\n  );\n});\n</script>\n"],"names":["vm","getCurrentInstance","rootTabs","inject","TabsRootContextKey","ns","useNamespace","visibility","useDocumentVisibility","focused","useWindowFocus","el$","ref","navScroll$","nav$","scrollable","navOffset","isFocus","focusable","sizeName","computed","includes","props","tabPosition","navStyle","transform","value","scrollPrev","containerSize","capitalize","currentOffset","scrollNext","navSize","scrollToActiveTab","nav","nextTick","activeTab","querySelector","navScroll","isHorizontal","activeTabBounding","getBoundingClientRect","navScrollBounding","maxOffset","offsetWidth","width","offsetHeight","height","newOffset","left","right","top","bottom","Math","max","min","update","prev","next","changeTab","e","code","up","down","EVENT_CODE","tabList","Array","from","currentTarget","querySelectorAll","currentIndex","indexOf","target","nextIndex","length","focus","click","setFocus","removeFocus","watch","setTimeout","useResizeObserver","onMounted","onUpdated","expose","__props","panes","flush","scrollBtn","_createVNode","is","arrowLeftIconCfg","icon","VftIcon","arrowRightIconCfg","tabs","map","pane","index","uid","disabled","tabName","name","closable","isClosable","editable","btnClose","ev","emit","closeIconCfg","tabLabelContent","slots","label","tabindex","active","onFocus","onBlur","event","preventDefault","delete","backspace","newButton","addable","onClick","enter","addIconCfg","stretch","type","TabBar"],"mappings":"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"}