vft 0.0.375 → 0.0.376

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

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

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

@@ -1,4 +1,4 @@
-import _sfc_main from "./tab-pane.vue2.js";
+import f from "./tab-pane.vue2.js";
 export {
-  _sfc_main as default
+  f as default
 };

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

@@ -1,20 +1,18 @@
-import { defineComponent, getCurrentInstance, useSlots, inject, ref, computed, watch, reactive, onBeforeUnmount, onBeforeUpdate, withDirectives, createCommentVNode, unref, createElementBlock, openBlock, normalizeClass, renderSlot, vShow } from "vue";
-import { eagerComputed } from "@vueuse/core";
+import { defineComponent as b, getCurrentInstance as C, useSlots as g, inject as R, ref as i, computed as f, watch as k, reactive as w, onBeforeUnmount as N, onBeforeUpdate as _, withDirectives as $, createCommentVNode as x, unref as n, createElementBlock as z, openBlock as E, normalizeClass as P, renderSlot as S, vShow as I } from "vue";
+import { eagerComputed as v } from "@vueuse/core";
 import "@vft/utils";
-import { throwError } from "../../utils/error.js";
+import { throwError as U } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { useNamespace as V } 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 } from "./types.js";
-const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
-const __default__ = defineComponent({
+import { TabsRootContextKey as j } from "./types.js";
+const D = ["id", "aria-hidden", "aria-labelledby"], F = b({
   name: "vft-tab-pane"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
+}), X = /* @__PURE__ */ b({
+  ...F,
   props: {
     label: {},
     name: {},
@@ -22,67 +20,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     disabled: { type: Boolean },
     lazy: { type: Boolean }
   },
-  setup(__props) {
-    const ns = useNamespace("tab-pane");
-    const instance = getCurrentInstance();
-    const slots = useSlots();
-    const tabsRoot = inject(TabsRootContextKey);
-    if (!tabsRoot)
-      throwError(ns.b(), "usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");
-    const paneRef = ref();
-    const index = ref();
-    const isClosable = computed(() => __props.closable || tabsRoot.props.closable);
-    const active = eagerComputed(
-      () => tabsRoot.currentName.value === (__props.name ?? index.value)
-    );
-    const loaded = ref(active.value);
-    const paneName = computed(() => __props.name ?? index.value);
-    const shouldBeRender = eagerComputed(
-      () => !__props.lazy || loaded.value || active.value
-    );
-    const isFocusInsidePane = () => {
-      return paneRef.value?.contains(document.activeElement);
-    };
-    watch(active, (val) => {
-      if (val) loaded.value = true;
-    });
-    const pane = reactive({
-      uid: instance.uid,
-      getVnode: () => instance.vnode,
-      slots,
-      props: instance.props,
-      paneName,
-      active,
-      index,
-      isClosable,
-      isFocusInsidePane,
-      attrs: instance.attrs
-    });
-    tabsRoot.registerPane(pane);
-    onBeforeUnmount(() => {
-      tabsRoot.unregisterPane(pane);
+  setup(a) {
+    const c = V("tab-pane"), o = C(), u = g(), e = R(j);
+    e || U(c.b(), "usage: <vft-tabs><vft-tab-pane /></vft-tabs/>");
+    const d = i(), r = i(), h = f(() => a.closable || e.props.closable), t = v(
+      () => e.currentName.value === (a.name ?? r.value)
+    ), m = i(t.value), s = f(() => a.name ?? r.value), y = v(
+      () => !a.lazy || m.value || t.value
+    ), B = () => d.value?.contains(document.activeElement);
+    k(t, (l) => {
+      l && (m.value = !0);
     });
-    onBeforeUpdate(() => {
-      if (slots.label) tabsRoot.nav$.value?.scheduleRender();
+    const p = w({
+      uid: o.uid,
+      getVnode: () => o.vnode,
+      slots: u,
+      props: o.props,
+      paneName: s,
+      active: t,
+      index: r,
+      isClosable: h,
+      isFocusInsidePane: B,
+      attrs: o.attrs
     });
-    return (_ctx, _cache) => {
-      return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
-        key: 0,
-        id: `pane-${paneName.value}`,
-        ref_key: "paneRef",
-        ref: paneRef,
-        class: normalizeClass(unref(ns).b()),
-        role: "tabpanel",
-        "aria-hidden": !unref(active),
-        "aria-labelledby": `tab-${paneName.value}`
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 10, _hoisted_1)), [
-        [vShow, unref(active)]
-      ]) : createCommentVNode("", true);
-    };
+    return e.registerPane(p), N(() => {
+      e.unregisterPane(p);
+    }), _(() => {
+      u.label && e.nav$.value?.scheduleRender();
+    }), (l, K) => n(y) ? $((E(), z("div", {
+      key: 0,
+      id: `pane-${s.value}`,
+      ref_key: "paneRef",
+      ref: d,
+      class: P(n(c).b()),
+      role: "tabpanel",
+      "aria-hidden": !n(t),
+      "aria-labelledby": `tab-${s.value}`
+    }, [
+      S(l.$slots, "default")
+    ], 10, D)), [
+      [I, n(t)]
+    ]) : x("", !0);
   }
 });
 export {
-  _sfc_main as default
+  X as default
 };

package/es/components/tabs/tabs.vue.js

@@ -1,4 +1,4 @@
-import _sfc_main from "./tabs.vue2.js";
+import f from "./tabs.vue2.js";
 export {
-  _sfc_main as default
+  f as default
 };