vft 0.0.239 → 0.0.241

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

@@ -1,52 +1,61 @@
-import { defineComponent as $, getCurrentInstance as S, inject as C, ref as y, watch as N, nextTick as R, computed as k, createElementBlock as B, openBlock as F, normalizeStyle as P, normalizeClass as T, unref as g } from "vue";
-import { TabsRootContextKey as L } from "./types.js";
-import { useResizeObserver as j } from "@vueuse/core";
-import { capitalize as p } from "@vft/utils";
+import { defineComponent as N, inject as S, ref as d, watch as $, nextTick as k, onBeforeUnmount as B, computed as C, createElementBlock as E, openBlock as O, normalizeStyle as T, normalizeClass as F, unref as h } from "vue";
+import { isUndefined as P } from "lodash-es";
+import { TabsRootContextKey as j } from "./types.js";
+import { useResizeObserver as v } from "@vueuse/core";
+import { capitalize as f } from "@vft/utils";
 import "../../utils/ns-cover.js";
-import "lodash-es";
-import { useNamespace as D } from "../../hooks/use-namespace/index.js";
+import { useNamespace as L } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const Q = /* @__PURE__ */ $({
+const Q = /* @__PURE__ */ N({
   __name: "tab-bar",
   props: {
-    tabs: {}
+    tabs: {},
+    tabRefs: {}
   },
-  setup(h, { expose: x }) {
-    const s = h, v = S(), c = C(L), l = D("tabs"), a = y(), m = y(), _ = () => {
-      let t = 0, e = 0;
-      const o = ["top", "bottom"].includes(c.props.tabPosition) ? "width" : "height", f = o === "width" ? "x" : "y", z = f === "x" ? "left" : "top";
-      return s.tabs.every((u) => {
-        var b, d;
-        const r = (d = (b = v.parent) == null ? void 0 : b.refs) == null ? void 0 : d[`tab-${u.uid}`];
-        if (!r) return !1;
-        if (!u.active)
+  setup(y, { expose: g }) {
+    const o = y, l = S(j), m = L("tabs"), i = d(), b = d(), x = () => {
+      let e = 0, s = 0;
+      const a = ["top", "bottom"].includes(l.props.tabPosition) ? "width" : "height", u = a === "width" ? "x" : "y", z = u === "x" ? "left" : "top";
+      return o.tabs.every((p) => {
+        if (P(p.paneName)) return !1;
+        const n = o.tabRefs[p.paneName];
+        if (!n) return !1;
+        if (!p.active)
           return !0;
-        t = r[`offset${p(z)}`], e = r[`client${p(o)}`];
-        const i = window.getComputedStyle(r);
-        return o === "width" && s.tabs.length > 1 && (e -= Number.parseFloat(i.paddingLeft) + Number.parseFloat(i.paddingRight), t += Number.parseFloat(i.paddingLeft)), !1;
+        e = n[`offset${f(z)}`], s = n[`client${f(a)}`];
+        const c = window.getComputedStyle(n);
+        return a === "width" && (s -= Number.parseFloat(c.paddingLeft) + Number.parseFloat(c.paddingRight), e += Number.parseFloat(c.paddingLeft)), !1;
       }), {
-        [o]: `${e}px`,
-        transform: `translate${p(f)}(${t}px)`
+        [a]: `${s}px`,
+        transform: `translate${f(u)}(${e}px)`
       };
-    }, n = () => m.value = _();
-    N(
-      () => s.tabs,
+    }, r = () => b.value = x(), t = [], R = () => {
+      t.forEach((e) => e.stop()), t.length = 0, Object.values(o.tabRefs).forEach((e) => {
+        t.push(v(e, r));
+      });
+    };
+    $(
+      () => o.tabs,
       async () => {
-        await R(), n();
+        await k(), r(), R();
       },
       { immediate: !0 }
     );
-    const w = k(() => c.props.tabPosition);
-    return j(a, () => n()), x({
-      ref: a,
-      update: n
-    }), (t, e) => (F(), B("div", {
+    const _ = v(i, () => r());
+    B(() => {
+      t.forEach((e) => e.stop()), t.length = 0, _.stop();
+    });
+    const w = C(() => l.props.tabPosition);
+    return g({
+      ref: i,
+      update: r
+    }), (e, s) => (O(), E("div", {
       ref_key: "barRef",
-      ref: a,
-      class: T([g(l).e("active-bar"), g(l).is(w.value)]),
-      style: P(m.value)
+      ref: i,
+      class: F([h(m).e("active-bar"), h(m).is(w.value)]),
+      style: T(b.value)
     }, null, 6));
   }
 });

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

@@ -1,4 +1,4 @@
-import { type IconProps } from 'vft/es/components';
+import { type IconProps, type TabPaneName } from 'vft/es/components';
 import type { TabsPaneContext } from './types';
 interface TabNavProps {
     panes: TabsPaneContext[];
@@ -18,21 +18,26 @@ interface TabNavProps {
     fixExtraScrollWidth?: number;
     /** tab 触发方式 */
     trigger?: 'click' | 'hover';
+    currentName?: TabPaneName;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<TabNavProps>, {
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabNavProps>>, {
     scrollToActiveTab: () => Promise<void>;
     removeFocus: () => boolean;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    focusActiveTab: () => Promise<void>;
+    tabListRef: import("vue").Ref<any, any>;
+    tabBarRef: import("vue").Ref<any, any>;
+    scheduleRender: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     tabClick: (...args: any[]) => void;
     tabRemove: (...args: any[]) => void;
     tabAdd: (...args: any[]) => void;
     tabContextmenu: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabNavProps>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabNavProps>>> & Readonly<{
     onTabClick?: ((...args: any[]) => any) | undefined;
     onTabRemove?: ((...args: any[]) => any) | undefined;
     onTabAdd?: ((...args: any[]) => any) | undefined;
     onTabContextmenu?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -1,7 +1,7 @@
-import { defineComponent as D, getCurrentInstance as et, inject as it, ref as b, computed as S, watch as z, onMounted as rt, onUpdated as nt, createVNode as s, mergeProps as at, useSlots as lt, nextTick as st } from "vue";
-import { useDocumentVisibility as ct, useWindowFocus as ut, useResizeObserver as mt } from "@vueuse/core";
-import { capitalize as y } from "@vft/utils";
-import { throwError as ft } from "../../utils/error.js";
+import { defineComponent as V, getCurrentInstance as it, inject as at, ref as f, shallowRef as nt, computed as I, watch as z, onMounted as rt, onUpdated as lt, triggerRef as st, createVNode as c, mergeProps as ct, useSlots as ut, nextTick as M } from "vue";
+import { useDocumentVisibility as mt, useWindowFocus as ft, useResizeObserver as vt } from "@vueuse/core";
+import { capitalize as T } from "@vft/utils";
+import { throwError as pt } from "../../utils/error.js";
 import "../../utils/ns-cover.js";
 import "lodash-es";
 import "../alert/index.js";
@@ -34,7 +34,7 @@ import "../form/index.js";
 import "../full-screen/index.js";
 import "../header-layout/index.js";
 import "../horizontal-menu/index.js";
-import { VftIcon as $ } from "../icon/index.js";
+import { VftIcon as k } from "../icon/index.js";
 import "../icon-text/index.js";
 import "../iframe-layout/index.js";
 import "../image/index.js";
@@ -91,20 +91,20 @@ import "../md-comment/index.js";
 import "../md-container/index.js";
 import "../md-tabs/index.js";
 import "../md-vue-playground/index.js";
-import { useNamespace as V } from "../../hooks/use-namespace/index.js";
+import { useNamespace as K } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
 import "../message/index.js";
 import "../infinite-scroll/index.js";
 import "../progress-i/index.js";
-import { EVENT_CODE as k } from "@vft/constants";
-import { TabsRootContextKey as pt } from "./types.js";
-import vt from "./tab-bar.vue2.js";
-const dt = D({
+import { EVENT_CODE as B } from "@vft/constants";
+import { TabsRootContextKey as dt } from "./types.js";
+import bt from "./tab-bar.vue2.js";
+const gt = V({
   name: "vft-tab-nav"
-}), fe = /* @__PURE__ */ D({
-  ...dt,
+}), vo = /* @__PURE__ */ V({
+  ...gt,
   props: {
     panes: {},
     editable: {
@@ -132,138 +132,145 @@ const dt = D({
     },
     trigger: {
       default: "click"
+    },
+    currentName: {
+      default: ""
     }
   },
   emits: ["tabClick", "tabRemove", "tabAdd", "tabContextmenu"],
-  setup(i, {
-    expose: q,
+  setup(o, {
+    expose: D,
     emit: H
   }) {
-    var W;
-    const C = H, j = V("tab-nav"), U = et(), g = it(pt);
-    g || ft(j.b(), "<vft-tabs><tab-nav /></vft-tabs>");
-    const r = V("tabs"), X = ct(), Y = ut(), I = b(), p = b(), x = b(), P = b(), c = b(!1), u = b(0), B = b(!1), T = b(!0), w = S(() => ["top", "bottom"].includes(g.props.tabPosition) ? "width" : "height"), G = S(() => ({
-      transform: `translate${w.value === "width" ? "X" : "Y"}(-${u.value}px)`
-    })), J = () => {
-      if (!p.value) return;
-      const t = p.value[`offset${y(w.value)}`], e = u.value;
-      e && (u.value = e > t ? e - t : 0);
-    }, Q = () => {
-      if (!p.value || !x.value) return;
-      const t = x.value[`offset${y(w.value)}`], e = p.value[`offset${y(w.value)}`], o = u.value;
-      t - o <= e || (u.value = t - o > e * 2 ? o + e : t - e);
-    }, N = async () => {
-      const t = x.value, e = P.value;
-      if (!c.value || !I.value || !p.value || !t) return;
-      await st();
-      const o = I.value.querySelector(".is-active");
-      if (!o) return;
-      const h = p.value, d = ["top", "bottom"].includes(g.props.tabPosition), a = o.getBoundingClientRect(), n = h.getBoundingClientRect(), m = d ? t.offsetWidth - n.width : t.offsetHeight - n.height, l = u.value;
-      let v = l;
-      const R = i.fixTabCount ? ((e == null ? void 0 : e.offsetWidth) || 0) + i.fixExtraScrollWidth : 0;
-      d ? (a.left - R < n.left && (v = l - (n.left - a.left + R)), a.right > n.right && (v = l + a.right - n.right)) : (a.top < n.top && (v = l - (n.top - a.top)), a.bottom > n.bottom && (v = l + (a.bottom - n.bottom))), v = Math.max(v, 0), u.value = Math.min(v, m);
-    }, A = () => {
-      if (!x.value || !p.value) return;
-      const t = x.value[`offset${y(w.value)}`], e = p.value[`offset${y(w.value)}`], o = u.value;
-      e < t ? (c.value = c.value || {}, c.value.prev = o, c.value.next = o + e < t, t - o < e && (u.value = t - e)) : (c.value = !1, o > 0 && (u.value = 0));
-    }, Z = (t) => {
-      const e = t.code, {
-        up: o,
-        down: h,
-        left: d,
-        right: a
-      } = k;
-      if (![o, h, d, a].includes(e)) return;
-      const n = Array.from(t.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")), m = n.indexOf(t.target);
-      let l;
-      e === d || e === o ? m === 0 ? l = n.length - 1 : l = m - 1 : m < n.length - 1 ? l = m + 1 : l = 0, n[l].focus(), n[l].click(), E();
+    const C = H, j = K("tab-nav"), q = it(), g = at(dt);
+    g || pt(j.b(), "<vft-tabs><tab-nav /></vft-tabs>");
+    const i = K("tabs"), U = mt(), X = ft(), S = f(), v = f(), h = f(), F = f(), y = f({}), P = f(), u = f(!1), m = f(0), $ = f(!1), w = f(!0), N = nt(), x = I(() => ["top", "bottom"].includes(g.props.tabPosition) ? "width" : "height"), Y = I(() => ({
+      transform: `translate${x.value === "width" ? "X" : "Y"}(-${m.value}px)`
+    })), G = () => {
+      if (!v.value) return;
+      const t = v.value[`offset${T(x.value)}`], e = m.value;
+      e && (m.value = e > t ? e - t : 0);
+    }, J = () => {
+      if (!v.value || !h.value) return;
+      const t = h.value[`offset${T(x.value)}`], e = v.value[`offset${T(x.value)}`], n = m.value;
+      t - n <= e || (m.value = t - n > e * 2 ? n + e : t - e);
+    }, A = async () => {
+      const t = h.value, e = F.value;
+      if (!u.value || !S.value || !v.value || !t) return;
+      await M();
+      const n = y.value[o.currentName];
+      if (!n) return;
+      const R = v.value, p = ["top", "bottom"].includes(g.props.tabPosition), r = n.getBoundingClientRect(), a = R.getBoundingClientRect(), b = p ? t.offsetWidth - a.width : t.offsetHeight - a.height, s = m.value;
+      let d = s;
+      const l = o.fixTabCount ? (e?.offsetWidth || 0) + o.fixExtraScrollWidth : 0;
+      p ? (r.left - l < a.left && (d = s - (a.left - r.left + l)), r.right > a.right && (d = s + r.right - a.right)) : (r.top < a.top && (d = s - (a.top - r.top)), r.bottom > a.bottom && (d = s + (r.bottom - a.bottom))), d = Math.max(d, 0), m.value = Math.min(d, b);
     }, E = () => {
-      T.value && (B.value = !0);
-    }, O = () => B.value = !1;
-    z(X, (t) => {
-      t === "hidden" ? T.value = !1 : t === "visible" && setTimeout(() => T.value = !0, 50);
-    }), z(Y, (t) => {
-      t ? setTimeout(() => T.value = !0, 50) : T.value = !1;
-    }), mt(I.value, A), rt(() => setTimeout(() => N(), 0)), nt(() => A()), q({
-      scrollToActiveTab: N,
-      removeFocus: O
-    }), z(() => i.panes, () => U.update(), {
+      if (!h.value || !v.value) return;
+      const t = h.value[`offset${T(x.value)}`], e = v.value[`offset${T(x.value)}`], n = m.value;
+      e < t ? (u.value = u.value || {}, u.value.prev = n, u.value.next = n + e < t, t - n < e && (m.value = t - e)) : (u.value = !1, n > 0 && (m.value = 0));
+    }, Q = (t) => {
+      const e = t.code, {
+        up: n,
+        down: R,
+        left: p,
+        right: r
+      } = B;
+      if (![n, R, p, r].includes(e)) return;
+      const a = Array.from(t.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")), b = a.indexOf(t.target);
+      let s;
+      e === p || e === n ? b === 0 ? s = a.length - 1 : s = b - 1 : b < a.length - 1 ? s = b + 1 : s = 0, a[s].focus(), a[s].click(), L();
+    }, L = () => {
+      w.value && ($.value = !0);
+    }, O = () => $.value = !1, Z = (t, e) => {
+      y.value[e] = t;
+    }, _ = async () => {
+      await M(), y.value[o.currentName]?.focus({
+        preventScroll: !0
+      });
+    };
+    z(U, (t) => {
+      t === "hidden" ? w.value = !1 : t === "visible" && setTimeout(() => w.value = !0, 50);
+    }), z(X, (t) => {
+      t ? setTimeout(() => w.value = !0, 50) : w.value = !1;
+    }), vt(S, E), rt(() => setTimeout(() => A(), 0)), lt(() => E()), D({
+      scrollToActiveTab: A,
+      removeFocus: O,
+      focusActiveTab: _,
+      tabListRef: h,
+      tabBarRef: P,
+      scheduleRender: () => st(N)
+    }), z(() => o.panes, () => q.update(), {
       flush: "post"
     });
-    const _ = S(() => {
-      var t, e;
-      return c.value ? [s("span", {
-        class: [r.e("nav-prev"), r.is("disabled", !c.value.prev)],
-        onClick: J
-      }, [(t = i.arrowLeftIconCfg) != null && t.icon ? s($, i.arrowLeftIconCfg, null) : null]), s("span", {
-        class: [r.e("nav-next"), r.is("disabled", !c.value.next)],
-        onClick: Q
-      }, [(e = i.arrowRightIconCfg) != null && e.icon ? s($, i.arrowRightIconCfg, null) : null])] : null;
-    }), tt = S(() => (t) => {
-      var e;
-      return (e = i.panes.slice(0, t)) == null ? void 0 : e.map((o, h) => {
-        var L, K, M;
-        const d = o.uid, a = o.props.disabled, n = o.props.name ?? o.index ?? `${h}`, m = !a && (o.isClosable || i.editable);
-        o.index = `${h}`;
-        const l = m ? s("span", {
-          class: "is-icon-close",
-          onClick: (f) => C("tabRemove", o, f)
-        }, [(L = i.closeIconCfg) != null && L.icon ? s($, i.closeIconCfg, null) : null]) : null, v = ((M = (K = o.slots).label) == null ? void 0 : M.call(K)) || o.props.label, R = !a && o.active ? 0 : -1;
-        return s("div", at({
-          ref: `tab-${d}`,
-          class: [r.e("item"), r.is(g.props.tabPosition), r.is("active", o.active), r.is("disabled", a), r.is("closable", m), r.is("focus", B.value)],
-          id: `tab-${n}`,
-          key: `tab-${d}`,
-          "aria-controls": `pane-${n}`,
-          role: "tab",
-          "aria-selected": o.active,
-          tabindex: R,
-          onFocus: () => E(),
-          onBlur: () => O()
-        }, {
-          [i.trigger === "click" ? "onClick" : "onMouseenter"]: (f) => {
-            O(), C("tabClick", o, n, f);
-          }
-        }, {
-          onContextmenu: (f) => {
-            f.preventDefault(), C("tabContextmenu", {
-              pane: o,
-              index: h,
-              event: f
-            });
-          },
-          onKeydown: (f) => {
-            m && (f.code === k.delete || f.code === k.backspace) && C("tabRemove", o, f);
-          }
-        }), [v, l]);
-      });
-    }), ot = i.editable || i.addable ? s("span", {
-      class: r.e("new-tab"),
+    const tt = I(() => u.value ? [c("span", {
+      class: [i.e("nav-prev"), i.is("disabled", !u.value.prev)],
+      onClick: G
+    }, [o.arrowLeftIconCfg?.icon ? c(k, o.arrowLeftIconCfg, null) : null]), c("span", {
+      class: [i.e("nav-next"), i.is("disabled", !u.value.next)],
+      onClick: J
+    }, [o.arrowRightIconCfg?.icon ? c(k, o.arrowRightIconCfg, null) : null])] : null), et = I(() => (t) => o.panes.slice(0, t)?.map((e, n) => {
+      const R = e.uid, p = e.props.disabled, r = e.props.name ?? e.index ?? `${n}`, a = !p && (e.isClosable || o.editable);
+      e.index = `${n}`;
+      const b = a ? c("span", {
+        class: "is-icon-close",
+        onClick: (l) => C("tabRemove", e, l)
+      }, [o.closeIconCfg?.icon ? c(k, o.closeIconCfg, null) : null]) : null, s = e.slots.label?.() || e.props.label, d = !p && e.active ? 0 : -1;
+      return c("div", ct({
+        ref: (l) => Z(l, r),
+        class: [i.e("item"), i.is(g.props.tabPosition), i.is("active", e.active), i.is("disabled", p), i.is("closable", a), i.is("focus", $.value)],
+        id: `tab-${r}`,
+        key: `tab-${R}`,
+        "aria-controls": `pane-${r}`,
+        role: "tab",
+        "aria-selected": e.active,
+        tabindex: d,
+        onFocus: () => L(),
+        onBlur: () => O()
+      }, {
+        [o.trigger === "click" ? "onClick" : "onMouseenter"]: (l) => {
+          O(), C("tabClick", e, r, l);
+        }
+      }, {
+        onContextmenu: (l) => {
+          l.preventDefault(), C("tabContextmenu", {
+            pane: e,
+            index: n,
+            event: l
+          });
+        },
+        onKeydown: (l) => {
+          a && (l.code === B.delete || l.code === B.backspace) && C("tabRemove", e, l);
+        }
+      }), [s, b]);
+    })), ot = o.editable || o.addable ? c("span", {
+      class: i.e("new-tab"),
       tabindex: "0",
       onClick: () => C("tabAdd"),
       onKeydown: (t) => {
-        t.code === k.enter && C("tabAdd");
+        t.code === B.enter && C("tabAdd");
       }
-    }, [(W = i.addIconCfg) != null && W.icon ? s($, i.addIconCfg, null) : null]) : null;
-    lt();
-    const F = (t = !1) => s("div", {
-      class: [r.e("nav"), r.is(g.props.tabPosition), r.is("fixed-nav", t), r.is("stretch", i.stretch && ["top", "bottom"].includes(g.props.tabPosition))],
-      ref: t ? P : x,
-      style: t ? {} : G.value,
+    }, [o.addIconCfg?.icon ? c(k, o.addIconCfg, null) : null]) : null;
+    ut();
+    const W = (t = !1) => (N.value, o.panes.length > 0 ? c("div", {
+      class: [i.e("nav"), i.is(g.props.tabPosition), i.is("fixed-nav", t), i.is("stretch", o.stretch && ["top", "bottom"].includes(g.props.tabPosition))],
+      ref: t ? F : h,
+      style: t ? {} : Y.value,
       role: "tablist",
-      onKeydown: Z
-    }, [i.showBar ? s(vt, {
-      tabs: [...i.panes]
-    }, null) : null, tt.value(t ? i.fixTabCount : void 0)]);
-    return () => s("div", {
-      ref: I,
-      class: [r.e("nav-wrap"), r.is("scrollable", !!c.value), r.is(g.props.tabPosition)]
-    }, [_.value, s("div", {
-      class: [r.e("nav-scroll"), r.is("have-fixed-tab", !!i.fixTabCount)],
-      ref: p
-    }, [F(), i.fixTabCount ? F(!0) : null, ot])]);
+      onKeydown: Q
+    }, [o.showBar ? c(bt, {
+      ref: P,
+      tabs: [...o.panes],
+      tabRefs: y.value
+    }, null) : null, et.value(t ? o.fixTabCount : void 0)]) : null);
+    return () => (N.value, c("div", {
+      ref: S,
+      class: [i.e("nav-wrap"), i.is("scrollable", !!u.value), i.is(g.props.tabPosition)]
+    }, [tt.value, c("div", {
+      class: [i.e("nav-scroll"), i.is("have-fixed-tab", !!o.fixTabCount)],
+      ref: v
+    }, [W(), o.fixTabCount ? W(!0) : null, ot])]));
   }
 });
 export {
-  fe as default
+  vo as default
 };

package/es/components/tabs/tab-pane.vue.d.ts

@@ -10,9 +10,11 @@ interface TabPaneProps {
     /** 标签是否延迟渲染 */
     lazy?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<TabPaneProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabPaneProps>>>, {}, {}>, {
+declare function __VLS_template(): {
     default?(_: {}): any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabPaneProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<TabPaneProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/es/components/tabs/tab-pane.vue2.js

@@ -1,18 +1,18 @@
-import { defineComponent as b, getCurrentInstance as y, useSlots as C, inject as B, ref as m, computed as d, watch as g, reactive as w, onMounted as N, onUnmounted as k, withDirectives as x, createCommentVNode as z, unref as o, createElementBlock as R, openBlock as S, normalizeClass as _, renderSlot as $, vShow as E } from "vue";
-import { eagerComputed as p } from "@vueuse/core";
+import { defineComponent as f, getCurrentInstance as C, useSlots as B, inject as g, ref as i, computed as u, watch as R, reactive as k, onMounted as w, onUnmounted as N, withDirectives as _, createCommentVNode as x, unref as o, createElementBlock as z, openBlock as S, normalizeClass as $, renderSlot as E, vShow as P } from "vue";
+import { eagerComputed as d } from "@vueuse/core";
 import "@vft/utils";
-import { throwError as P } from "../../utils/error.js";
+import { throwError as j } from "../../utils/error.js";
 import "../../utils/ns-cover.js";
 import "lodash-es";
-import { useNamespace as j } from "../../hooks/use-namespace/index.js";
+import { useNamespace as D } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { TabsRootContextKey as D } from "./types.js";
-const I = ["id", "aria-hidden", "aria-labelledby"], K = b({
+import { TabsRootContextKey as I } from "./types.js";
+const K = ["id", "aria-hidden", "aria-labelledby"], M = f({
   name: "vft-tab-pane"
-}), Q = /* @__PURE__ */ b({
-  ...K,
+}), W = /* @__PURE__ */ f({
+  ...M,
   props: {
     label: {},
     name: {},
@@ -21,40 +21,46 @@ const I = ["id", "aria-hidden", "aria-labelledby"], K = b({
     lazy: { type: Boolean }
   },
   setup(a) {
-    const i = j("tab-pane"), n = y(), v = C(), t = B(D);
-    t || P(i.b(), "usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");
-    const r = m(), f = d(() => a.closable || t.props.closable), e = p(() => t.currentName.value === (a.name ?? r.value)), c = m(e.value), s = d(() => a.name ?? r.value), h = p(() => !a.lazy || c.value || e.value);
-    g(e, (l) => {
-      l && (c.value = !0);
+    const c = D("tab-pane"), n = C(), b = B(), t = g(I);
+    t || j(c.b(), "usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");
+    const v = i(), r = i(), y = u(() => a.closable || t.props.closable), e = d(
+      () => t.currentName.value === (a.name ?? r.value)
+    ), m = i(e.value), s = u(() => a.name ?? r.value), h = d(
+      () => !a.lazy || m.value || e.value
+    );
+    R(e, (l) => {
+      l && (m.value = !0);
     });
-    const u = w({
+    const p = k({
       uid: n.uid,
-      slots: v,
+      slots: b,
       props: n.props,
       paneName: s,
       active: e,
       index: r,
-      isClosable: f,
+      isClosable: y,
       attrs: n.attrs
     });
-    return N(() => {
-      t.registerPane(u);
-    }), k(() => {
-      t.unregisterPane(u.uid);
-    }), (l, M) => o(h) ? x((S(), R("div", {
+    return w(() => {
+      t.registerPane(p);
+    }), N(() => {
+      t.unregisterPane(p.uid);
+    }), (l, T) => o(h) ? _((S(), z("div", {
       key: 0,
       id: `pane-${s.value}`,
-      class: _(o(i).b()),
+      ref_key: "paneRef",
+      ref: v,
+      class: $(o(c).b()),
       role: "tabpanel",
       "aria-hidden": !o(e),
       "aria-labelledby": `tab-${s.value}`
     }, [
-      $(l.$slots, "default")
-    ], 10, I)), [
-      [E, o(e)]
-    ]) : z("", !0);
+      E(l.$slots, "default")
+    ], 10, K)), [
+      [P, o(e)]
+    ]) : x("", !0);
   }
 });
 export {
-  Q as default
+  W as default
 };