orion-design 0.1.31 → 0.1.33

package/dist/components/Tabs/index.js

@@ -1,156 +1,93 @@
 import "lodash-es";
-import { ref, watch, defineComponent, getCurrentInstance, inject, nextTick, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, computed, onMounted, onUpdated, createVNode, provide, renderSlot, useSlots, reactive, onUnmounted, withDirectives, vShow, createCommentVNode } from "vue";
-import { withInstall } from "../_util/vue/install.js";
-import { ElIcon } from "element-plus";
-import { isNumber, isUndefined } from "../_util/types.js";
-import { e as isString$1 } from "../../functions-BeMkokbY.js";
-import { buildProps, definePropType } from "../_util/vue/props/runtime.js";
-import { UPDATE_MODEL_EVENT } from "../_constants/event.js";
-import { useNamespace } from "../_hooks/use-namespace/index.js";
-import { useOrderedChildren } from "../_hooks/use-ordered-children/index.js";
-import { tabsRootContextKey } from "./constants.js";
-import { t as tryOnScopeDispose, r as resolveUnref, i as isClient, b as isString, n as noop, c as tryOnMounted, d as identity, e as computedEager } from "../../index-D1m0KTpK.js";
-import { capitalize } from "../_util/strings.js";
-import { throwError } from "../_util/error.js";
-import { e as arrow_left_default, f as arrow_right_default } from "../../index-DkwIULcN.js";
-import { mutable } from "../_util/typescript.js";
-import { EVENT_CODE } from "../_constants/aria.js";
-import { tabBarProps } from "./tab-bar.js";
-import { tabPaneProps } from "./tab-pane.js";
-function unrefElement(elRef) {
-  var _a;
-  const plain = resolveUnref(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+import { ref as h, watch as B, defineComponent as M, getCurrentInstance as D, inject as H, nextTick as K, onBeforeUnmount as Pe, openBlock as ue, createElementBlock as fe, normalizeClass as de, unref as k, normalizeStyle as Ne, computed as F, onMounted as ve, onUpdated as Ee, createVNode as O, provide as we, renderSlot as L, useSlots as Te, reactive as Se, onUnmounted as xe, withDirectives as $e, vShow as Ce, createCommentVNode as Ie } from "vue";
+import { withInstall as Be } from "../_util/vue/install.js";
+import { ElIcon as J } from "element-plus";
+import { isNumber as ke, isUndefined as ze } from "../_util/types.js";
+import { e as Re } from "../../functions-DzLqXvGt.js";
+import { buildProps as be, definePropType as pe } from "../_util/vue/props/runtime.js";
+import { UPDATE_MODEL_EVENT as me } from "../_constants/event.js";
+import { useNamespace as V } from "../_hooks/use-namespace/index.js";
+import { useOrderedChildren as Ae } from "../_hooks/use-ordered-children/index.js";
+import { tabsRootContextKey as Q } from "./constants.js";
+import { t as he, r as ye, i as Oe, b as Le, n as Fe, c as Me, d as Ve, e as Z } from "../../index-C9tCD90X.js";
+import { capitalize as I } from "../_util/strings.js";
+import { throwError as q } from "../_util/error.js";
+import { e as Qe, f as Ue } from "../../index-ChkLOmNK.js";
+import { mutable as We } from "../_util/typescript.js";
+import { EVENT_CODE as je } from "../_constants/aria.js";
+import { tabBarProps as De } from "./tab-bar.js";
+import { tabPaneProps as He } from "./tab-pane.js";
+function ge(e) {
+  var t;
+  const a = ye(e);
+  return (t = a == null ? void 0 : a.$el) != null ? t : a;
 }
-const defaultWindow = isClient ? window : void 0;
-const defaultDocument = isClient ? window.document : void 0;
-function useEventListener(...args) {
-  let target;
-  let events;
-  let listeners;
-  let options;
-  if (isString(args[0]) || Array.isArray(args[0])) {
-    [events, listeners, options] = args;
-    target = defaultWindow;
-  } else {
-    [target, events, listeners, options] = args;
-  }
-  if (!target)
-    return noop;
-  if (!Array.isArray(events))
-    events = [events];
-  if (!Array.isArray(listeners))
-    listeners = [listeners];
-  const cleanups = [];
-  const cleanup = () => {
-    cleanups.forEach((fn) => fn());
-    cleanups.length = 0;
-  };
-  const register = (el, event, listener, options2) => {
-    el.addEventListener(event, listener, options2);
-    return () => el.removeEventListener(event, listener, options2);
+const G = Oe ? window : void 0, Ke = Oe ? window.document : void 0;
+function W(...e) {
+  let t, a, s, n;
+  if (Le(e[0]) || Array.isArray(e[0]) ? ([a, s, n] = e, t = G) : [t, a, s, n] = e, !t)
+    return Fe;
+  Array.isArray(a) || (a = [a]), Array.isArray(s) || (s = [s]);
+  const P = [], d = () => {
+    P.forEach((r) => r()), P.length = 0;
+  }, u = (r, i, f, b) => (r.addEventListener(i, f, b), () => r.removeEventListener(i, f, b)), y = B(() => [ge(t), ye(n)], ([r, i]) => {
+    d(), r && P.push(...a.flatMap((f) => s.map((b) => u(r, f, b, i))));
+  }, { immediate: !0, flush: "post" }), v = () => {
+    y(), d();
   };
-  const stopWatch = watch(() => [unrefElement(target), resolveUnref(options)], ([el, options2]) => {
-    cleanup();
-    if (!el)
-      return;
-    cleanups.push(...events.flatMap((event) => {
-      return listeners.map((listener) => register(el, event, listener, options2));
-    }));
-  }, { immediate: true, flush: "post" });
-  const stop = () => {
-    stopWatch();
-    cleanup();
-  };
-  tryOnScopeDispose(stop);
-  return stop;
+  return he(v), v;
 }
-function useSupported(callback, sync = false) {
-  const isSupported = ref();
-  const update = () => isSupported.value = Boolean(callback());
-  update();
-  tryOnMounted(update, sync);
-  return isSupported;
+function qe(e, t = !1) {
+  const a = h(), s = () => a.value = !!e();
+  return s(), Me(s, t), a;
 }
-const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-const globalKey = "__vueuse_ssr_handlers__";
-_global[globalKey] = _global[globalKey] || {};
-function useDocumentVisibility({ document = defaultDocument } = {}) {
-  if (!document)
-    return ref("visible");
-  const visibility = ref(document.visibilityState);
-  useEventListener(document, "visibilitychange", () => {
-    visibility.value = document.visibilityState;
-  });
-  return visibility;
+const ee = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, te = "__vueuse_ssr_handlers__";
+ee[te] = ee[te] || {};
+function Ge({ document: e = Ke } = {}) {
+  if (!e)
+    return h("visible");
+  const t = h(e.visibilityState);
+  return W(e, "visibilitychange", () => {
+    t.value = e.visibilityState;
+  }), t;
 }
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+var ae = Object.getOwnPropertySymbols, Xe = Object.prototype.hasOwnProperty, Ye = Object.prototype.propertyIsEnumerable, Je = (e, t) => {
+  var a = {};
+  for (var s in e)
+    Xe.call(e, s) && t.indexOf(s) < 0 && (a[s] = e[s]);
+  if (e != null && ae)
+    for (var s of ae(e))
+      t.indexOf(s) < 0 && Ye.call(e, s) && (a[s] = e[s]);
+  return a;
 };
-function useResizeObserver(target, callback, options = {}) {
-  const _a = options, { window: window2 = defaultWindow } = _a, observerOptions = __objRest$2(_a, ["window"]);
-  let observer;
-  const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
+function j(e, t, a = {}) {
+  const s = a, { window: n = G } = s, P = Je(s, ["window"]);
+  let d;
+  const u = qe(() => n && "ResizeObserver" in n), y = () => {
+    d && (d.disconnect(), d = void 0);
+  }, v = B(() => ge(e), (i) => {
+    y(), u.value && n && i && (d = new ResizeObserver(t), d.observe(i, P));
+  }, { immediate: !0, flush: "post" }), r = () => {
+    y(), v();
   };
-  const stopWatch = watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported.value && window2 && el) {
-      observer = new ResizeObserver(callback);
-      observer.observe(el, observerOptions);
-    }
-  }, { immediate: true, flush: "post" });
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
+  return he(r), {
+    isSupported: u,
+    stop: r
   };
 }
-var SwipeDirection;
-(function(SwipeDirection2) {
-  SwipeDirection2["UP"] = "UP";
-  SwipeDirection2["RIGHT"] = "RIGHT";
-  SwipeDirection2["DOWN"] = "DOWN";
-  SwipeDirection2["LEFT"] = "LEFT";
-  SwipeDirection2["NONE"] = "NONE";
-})(SwipeDirection || (SwipeDirection = {}));
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+var ne;
+(function(e) {
+  e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
+})(ne || (ne = {}));
+var Ze = Object.defineProperty, se = Object.getOwnPropertySymbols, et = Object.prototype.hasOwnProperty, tt = Object.prototype.propertyIsEnumerable, oe = (e, t, a) => t in e ? Ze(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, at = (e, t) => {
+  for (var a in t || (t = {}))
+    et.call(t, a) && oe(e, a, t[a]);
+  if (se)
+    for (var a of se(t))
+      tt.call(t, a) && oe(e, a, t[a]);
+  return e;
 };
-const _TransitionPresets = {
+const nt = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -176,115 +113,80 @@ const _TransitionPresets = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-__spreadValues({
-  linear: identity
-}, _TransitionPresets);
-function useWindowFocus({ window: window2 = defaultWindow } = {}) {
-  if (!window2)
-    return ref(false);
-  const focused = ref(window2.document.hasFocus());
-  useEventListener(window2, "blur", () => {
-    focused.value = false;
-  });
-  useEventListener(window2, "focus", () => {
-    focused.value = true;
-  });
-  return focused;
+at({
+  linear: Ve
+}, nt);
+function st({ window: e = G } = {}) {
+  if (!e)
+    return h(!1);
+  const t = h(e.document.hasFocus());
+  return W(e, "blur", () => {
+    t.value = !1;
+  }), W(e, "focus", () => {
+    t.value = !0;
+  }), t;
 }
-const COMPONENT_NAME$2 = "OTabBar";
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: COMPONENT_NAME$2
-  },
+const re = "OTabBar", ot = /* @__PURE__ */ M({
+  name: re,
   __name: "tab-bar",
-  props: tabBarProps,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const instance = getCurrentInstance();
-    const rootTabs = inject(tabsRootContextKey);
-    if (!rootTabs) throwError(COMPONENT_NAME$2, "<o-tabs><o-tab-bar /></p-tabs>");
-    const ns = useNamespace("tabs");
-    const barRef = ref();
-    const barStyle = ref();
-    const getBarStyle = () => {
-      let offset = 0;
-      let tabSize = 0;
-      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
-      const sizeDir = sizeName === "width" ? "x" : "y";
-      const position = sizeDir === "x" ? "left" : "top";
-      props.tabs.every((tab) => {
-        var _a, _b;
-        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
-        if (!$el) return false;
-        if (!tab.active) {
-          return true;
-        }
-        offset = $el[`offset${capitalize(position)}`];
-        tabSize = $el[`client${capitalize(sizeName)}`];
-        const tabStyles = window.getComputedStyle($el);
-        if (sizeName === "width") {
-          tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
-          offset += Number.parseFloat(tabStyles.paddingLeft);
-        }
-        return false;
-      });
-      return {
-        [sizeName]: `${tabSize}px`,
-        transform: `translate${capitalize(sizeDir)}(${offset}px)`
+  props: De,
+  setup(e, { expose: t }) {
+    const a = e, s = D(), n = H(Q);
+    n || q(re, "<o-tabs><o-tab-bar /></p-tabs>");
+    const P = V("tabs"), d = h(), u = h(), y = () => {
+      let b = 0, o = 0;
+      const p = ["top", "bottom"].includes(n.props.tabPosition) ? "width" : "height", N = p === "width" ? "x" : "y", x = N === "x" ? "left" : "top";
+      return a.tabs.every((C) => {
+        var A, R;
+        const $ = (R = (A = s.parent) == null ? void 0 : A.refs) == null ? void 0 : R[`tab-${C.uid}`];
+        if (!$) return !1;
+        if (!C.active)
+          return !0;
+        b = $[`offset${I(x)}`], o = $[`client${I(p)}`];
+        const z = window.getComputedStyle($);
+        return p === "width" && (o -= Number.parseFloat(z.paddingLeft) + Number.parseFloat(z.paddingRight), b += Number.parseFloat(z.paddingLeft)), !1;
+      }), {
+        [p]: `${o}px`,
+        transform: `translate${I(N)}(${b}px)`
       };
-    };
-    const update = () => barStyle.value = getBarStyle();
-    const saveObserver = [];
-    const observerTabs = () => {
-      var _a;
-      saveObserver.forEach((observer) => observer.stop());
-      saveObserver.length = 0;
-      const list = (_a = instance.parent) == null ? void 0 : _a.refs;
-      if (!list) return;
-      for (const key in list) {
-        if (key.startsWith("tab-")) {
-          const _el = list[key];
-          if (_el) {
-            saveObserver.push(useResizeObserver(_el, update));
+    }, v = () => u.value = y(), r = [], i = () => {
+      var o;
+      r.forEach((p) => p.stop()), r.length = 0;
+      const b = (o = s.parent) == null ? void 0 : o.refs;
+      if (b) {
+        for (const p in b)
+          if (p.startsWith("tab-")) {
+            const N = b[p];
+            N && r.push(j(N, v));
           }
-        }
       }
     };
-    watch(
-      () => props.tabs,
+    B(
+      () => a.tabs,
       async () => {
-        await nextTick();
-        update();
-        observerTabs();
+        await K(), v(), i();
       },
-      { immediate: true }
+      { immediate: !0 }
     );
-    const barObserever = useResizeObserver(barRef, () => update());
-    onBeforeUnmount(() => {
-      saveObserver.forEach((observer) => observer.stop());
-      saveObserver.length = 0;
-      barObserever.stop();
-    });
-    __expose({
+    const f = j(d, () => v());
+    return Pe(() => {
+      r.forEach((b) => b.stop()), r.length = 0, f.stop();
+    }), t({
       /** @description tab root html element */
-      ref: barRef,
+      ref: d,
       /** @description method to manually update tab bar style */
-      update
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "barRef",
-        ref: barRef,
-        class: normalizeClass([unref(ns).e("active-bar"), unref(ns).is(unref(rootTabs).props.tabPosition)]),
-        style: normalizeStyle(barStyle.value)
-      }, null, 6);
-    };
+      update: v
+    }), (b, o) => (ue(), fe("div", {
+      ref_key: "barRef",
+      ref: d,
+      class: de([k(P).e("active-bar"), k(P).is(k(n).props.tabPosition)]),
+      style: Ne(u.value)
+    }, null, 6));
   }
-});
-const tabNavProps = buildProps({
+}), rt = be({
   panes: {
-    type: definePropType(Array),
-    default: () => mutable([])
+    type: pe(Array),
+    default: () => We([])
   },
   currentName: {
     type: [String, Number],
@@ -296,222 +198,122 @@ const tabNavProps = buildProps({
     default: "card"
   },
   stretch: Boolean
-});
-const tabNavEmits = {
-  tabClick: (tab, tabName, ev) => ev instanceof Event,
-  tabRemove: (tab, ev) => ev instanceof Event
-};
-const COMPONENT_NAME$1 = "OTabNav";
-const TabNav = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1,
-  props: tabNavProps,
-  emits: tabNavEmits,
-  setup(props, {
-    expose,
-    emit
+}), it = {
+  tabClick: (e, t, a) => a instanceof Event,
+  tabRemove: (e, t) => t instanceof Event
+}, ie = "OTabNav", lt = /* @__PURE__ */ M({
+  name: ie,
+  props: rt,
+  emits: it,
+  setup(e, {
+    expose: t,
+    emit: a
   }) {
-    const rootTabs = inject(tabsRootContextKey);
-    if (!rootTabs) throwError(COMPONENT_NAME$1, `<o-tabs><o-tab-nav /></o-tabs>`);
-    const ns = useNamespace("tabs");
-    const visibility = useDocumentVisibility();
-    const focused = useWindowFocus();
-    const navScroll$ = ref();
-    const nav$ = ref();
-    const el$ = ref();
-    const tabBarRef = ref();
-    const scrollable = ref(false);
-    const navOffset = ref(0);
-    const isFocus = ref(false);
-    const focusable = ref(true);
-    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 (!navScroll$.value) return;
-      const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
-      const currentOffset = navOffset.value;
-      if (!currentOffset) return;
-      const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
-      navOffset.value = newOffset;
-    };
-    const scrollNext = () => {
-      if (!navScroll$.value || !nav$.value) return;
-      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
-      const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];
-      const currentOffset = navOffset.value;
-      if (navSize - currentOffset <= containerSize) return;
-      const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
-      navOffset.value = newOffset;
-    };
-    const scrollToActiveTab = async () => {
-      const nav = nav$.value;
-      if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;
-      await nextTick();
-      const activeTab = el$.value.querySelector(".is-active");
-      if (!activeTab) return;
-      const navScroll = navScroll$.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;
-      if (isHorizontal) {
-        if (activeTabBounding.left < navScrollBounding.left) {
-          newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
-        }
-        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 = () => {
-      var _a;
-      if (!nav$.value || !navScroll$.value) return;
-      props.stretch && ((_a = tabBarRef.value) == null ? void 0 : _a.update());
-      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];
-      const containerSize = navScroll$.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({
-        preventScroll: true
-      });
-      tabList[nextIndex].click();
-      setFocus();
-    };
-    const setFocus = () => {
-      if (focusable.value) isFocus.value = true;
-    };
-    const removeFocus = () => isFocus.value = false;
-    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(el$, update);
-    onMounted(() => setTimeout(() => scrollToActiveTab(), 0));
-    onUpdated(() => update());
-    expose({
-      scrollToActiveTab,
-      removeFocus
-    });
-    return () => {
-      const scrollBtn = scrollable.value ? [createVNode("span", {
-        "class": [ns.e("nav-prev"), ns.is("disabled", !scrollable.value.prev)],
-        "onClick": scrollPrev
-      }, [createVNode(ElIcon, null, {
-        default: () => [createVNode(arrow_left_default, null, null)]
-      })]), createVNode("span", {
-        "class": [ns.e("nav-next"), ns.is("disabled", !scrollable.value.next)],
-        "onClick": scrollNext
-      }, [createVNode(ElIcon, null, {
-        default: () => [createVNode(arrow_right_default, null, null)]
-      })])] : null;
-      const tabs = props.panes.map((pane, index2) => {
-        var _a, _b;
-        const uid = pane.uid;
-        const disabled = pane.props.disabled;
-        const tabName = pane.props.name ?? pane.index ?? `${index2}`;
-        pane.index = `${index2}`;
-        const tabLabelContent = ((_b = (_a = pane.slots).label) == null ? void 0 : _b.call(_a)) || pane.props.label;
-        const tabindex = !disabled && pane.active ? 0 : -1;
-        return createVNode("div", {
-          "ref": `tab-${uid}`,
-          "class": [ns.e("item"), ns.is(rootTabs.props.tabPosition), ns.is("active", pane.active), ns.is("disabled", disabled), 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(),
-          "onClick": (ev) => {
-            removeFocus();
-            emit("tabClick", pane, tabName, ev);
+    const s = H(Q);
+    s || q(ie, "<o-tabs><o-tab-nav /></o-tabs>");
+    const n = V("tabs"), P = Ge(), d = st(), u = h(), y = h(), v = h(), r = h(), i = h(!1), f = h(0), b = h(!1), o = h(!0), p = F(() => ["top", "bottom"].includes(s.props.tabPosition) ? "width" : "height"), N = F(() => ({
+      transform: `translate${p.value === "width" ? "X" : "Y"}(-${f.value}px)`
+    })), x = () => {
+      if (!u.value) return;
+      const l = u.value[`offset${I(p.value)}`], m = f.value;
+      if (!m) return;
+      const c = m > l ? m - l : 0;
+      f.value = c;
+    }, C = () => {
+      if (!u.value || !y.value) return;
+      const l = y.value[`offset${I(p.value)}`], m = u.value[`offset${I(p.value)}`], c = f.value;
+      if (l - c <= m) return;
+      const w = l - c > m * 2 ? c + m : l - m;
+      f.value = w;
+    }, $ = async () => {
+      const l = y.value;
+      if (!i.value || !v.value || !u.value || !l) return;
+      await K();
+      const m = v.value.querySelector(".is-active");
+      if (!m) return;
+      const c = u.value, w = ["top", "bottom"].includes(s.props.tabPosition), E = m.getBoundingClientRect(), _ = c.getBoundingClientRect(), S = w ? l.offsetWidth - _.width : l.offsetHeight - _.height, T = f.value;
+      let g = T;
+      w ? (E.left < _.left && (g = T - (_.left - E.left)), E.right > _.right && (g = T + E.right - _.right)) : (E.top < _.top && (g = T - (_.top - E.top)), E.bottom > _.bottom && (g = T + (E.bottom - _.bottom))), g = Math.max(g, 0), f.value = Math.min(g, S);
+    }, z = () => {
+      var w;
+      if (!y.value || !u.value) return;
+      e.stretch && ((w = r.value) == null || w.update());
+      const l = y.value[`offset${I(p.value)}`], m = u.value[`offset${I(p.value)}`], c = f.value;
+      m < l ? (i.value = i.value || {}, i.value.prev = c, i.value.next = c + m < l, l - c < m && (f.value = l - m)) : (i.value = !1, c > 0 && (f.value = 0));
+    }, A = (l) => {
+      const m = l.code, {
+        up: c,
+        down: w,
+        left: E,
+        right: _
+      } = je;
+      if (![c, w, E, _].includes(m)) return;
+      const S = Array.from(l.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")), T = S.indexOf(l.target);
+      let g;
+      m === E || m === c ? T === 0 ? g = S.length - 1 : g = T - 1 : T < S.length - 1 ? g = T + 1 : g = 0, S[g].focus({
+        preventScroll: !0
+      }), S[g].click(), R();
+    }, R = () => {
+      o.value && (b.value = !0);
+    }, U = () => b.value = !1;
+    return B(P, (l) => {
+      l === "hidden" ? o.value = !1 : l === "visible" && setTimeout(() => o.value = !0, 50);
+    }), B(d, (l) => {
+      l ? setTimeout(() => o.value = !0, 50) : o.value = !1;
+    }), j(v, z), ve(() => setTimeout(() => $(), 0)), Ee(() => z()), t({
+      scrollToActiveTab: $,
+      removeFocus: U
+    }), () => {
+      const l = i.value ? [O("span", {
+        class: [n.e("nav-prev"), n.is("disabled", !i.value.prev)],
+        onClick: x
+      }, [O(J, null, {
+        default: () => [O(Qe, null, null)]
+      })]), O("span", {
+        class: [n.e("nav-next"), n.is("disabled", !i.value.next)],
+        onClick: C
+      }, [O(J, null, {
+        default: () => [O(Ue, null, null)]
+      })])] : null, m = e.panes.map((c, w) => {
+        var X, Y;
+        const E = c.uid, _ = c.props.disabled, S = c.props.name ?? c.index ?? `${w}`;
+        c.index = `${w}`;
+        const T = ((Y = (X = c.slots).label) == null ? void 0 : Y.call(X)) || c.props.label, g = !_ && c.active ? 0 : -1;
+        return O("div", {
+          ref: `tab-${E}`,
+          class: [n.e("item"), n.is(s.props.tabPosition), n.is("active", c.active), n.is("disabled", _), n.is("focus", b.value)],
+          id: `tab-${S}`,
+          key: `tab-${E}`,
+          "aria-controls": `pane-${S}`,
+          role: "tab",
+          "aria-selected": c.active,
+          tabindex: g,
+          onFocus: () => R(),
+          onBlur: () => U(),
+          onClick: (_e) => {
+            U(), a("tabClick", c, S, _e);
           }
-        }, [...[tabLabelContent]]);
+        }, [T]);
       });
-      return createVNode("div", {
-        "ref": el$,
-        "class": [ns.e("nav-wrap"), ns.is("scrollable", !!scrollable.value), ns.is(rootTabs.props.tabPosition)]
-      }, [scrollBtn, createVNode("div", {
-        "class": ns.e("nav-scroll"),
-        "ref": navScroll$
-      }, [createVNode("div", {
-        "class": [ns.e("nav"), ns.is(rootTabs.props.tabPosition), ns.is("stretch", props.stretch && ["top", "bottom"].includes(rootTabs.props.tabPosition))],
-        "ref": nav$,
-        "style": navStyle.value,
-        "role": "tablist",
-        "onKeydown": changeTab
-      }, [...[!props.type ? createVNode(_sfc_main$1, {
-        "ref": tabBarRef,
-        "tabs": [...props.panes]
-      }, null) : null, tabs]])])]);
+      return O("div", {
+        ref: v,
+        class: [n.e("nav-wrap"), n.is("scrollable", !!i.value), n.is(s.props.tabPosition)]
+      }, [l, O("div", {
+        class: n.e("nav-scroll"),
+        ref: u
+      }, [O("div", {
+        class: [n.e("nav"), n.is(s.props.tabPosition), n.is("stretch", e.stretch && ["top", "bottom"].includes(s.props.tabPosition))],
+        ref: y,
+        style: N.value,
+        role: "tablist",
+        onKeydown: A
+      }, [e.type ? null : O(ot, {
+        ref: r,
+        tabs: [...e.panes]
+      }, null), m])])]);
     };
   }
-});
-const tabsProps = buildProps({
+}), ct = be({
   /**
    * @description type of Tab
    */
@@ -538,183 +340,136 @@ const tabsProps = buildProps({
    * @description hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented
    */
   beforeLeave: {
-    type: definePropType(Function),
-    default: () => true
+    type: pe(Function),
+    default: () => !0
   },
   /**
    * @description whether width of tab automatically fits its container
    */
   stretch: Boolean
-});
-const isPaneName = (value) => isString$1(value) || isNumber(value);
-const tabsEmits = {
-  [UPDATE_MODEL_EVENT]: (name) => isPaneName(name),
-  tabClick: (pane, ev) => ev instanceof Event,
-  tabChange: (name) => isPaneName(name)
-};
-const Tabs = /* @__PURE__ */ defineComponent({
+}), le = (e) => Re(e) || ke(e), ut = {
+  [me]: (e) => le(e),
+  tabClick: (e, t) => t instanceof Event,
+  tabChange: (e) => le(e)
+}, ft = /* @__PURE__ */ M({
   name: "OTabs",
-  props: tabsProps,
-  emits: tabsEmits,
-  setup(props, {
-    emit,
-    slots,
-    expose
+  props: ct,
+  emits: ut,
+  setup(e, {
+    emit: t,
+    slots: a,
+    expose: s
   }) {
-    const ns = useNamespace("tabs");
-    const isVertical = computed(() => ["left", "right"].includes(props.tabPosition));
-    const {
-      children: panes,
-      addChild: sortPane,
-      removeChild: unregisterPane
-    } = useOrderedChildren(getCurrentInstance(), "OTabPane");
-    const nav$ = ref();
-    const currentName = ref(props.modelValue ?? "0");
-    const setCurrentName = async (value, trigger = false) => {
-      var _a, _b, _c;
-      if (currentName.value === value || isUndefined(value)) return;
-      try {
-        const canLeave = await ((_a = props.beforeLeave) == null ? void 0 : _a.call(props, value, currentName.value));
-        if (canLeave !== false) {
-          currentName.value = value;
-          if (trigger) {
-            emit(UPDATE_MODEL_EVENT, value);
-            emit("tabChange", value);
-          }
-          (_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
+    const n = V("tabs"), P = F(() => ["left", "right"].includes(e.tabPosition)), {
+      children: d,
+      addChild: u,
+      removeChild: y
+    } = Ae(D(), "OTabPane"), v = h(), r = h(e.modelValue ?? "0"), i = async (o, p = !1) => {
+      var N, x, C;
+      if (!(r.value === o || ze(o)))
+        try {
+          await ((N = e.beforeLeave) == null ? void 0 : N.call(e, o, r.value)) !== !1 && (r.value = o, p && (t(me, o), t("tabChange", o)), (C = (x = v.value) == null ? void 0 : x.removeFocus) == null || C.call(x));
+        } catch {
         }
-      } catch {
-      }
+    }, f = (o, p, N) => {
+      o.props.disabled || (i(p, !0), t("tabClick", o, N));
     };
-    const handleTabClick = (tab, tabName, event) => {
-      if (tab.props.disabled) return;
-      setCurrentName(tabName, true);
-      emit("tabClick", tab, event);
-    };
-    watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
-    watch(currentName, async () => {
-      var _a;
-      await nextTick();
-      (_a = nav$.value) == null ? void 0 : _a.scrollToActiveTab();
-    });
-    provide(tabsRootContextKey, {
-      props,
-      currentName,
-      registerPane: (pane) => {
-        panes.value.push(pane);
+    B(() => e.modelValue, (o) => i(o)), B(r, async () => {
+      var o;
+      await K(), (o = v.value) == null || o.scrollToActiveTab();
+    }), we(Q, {
+      props: e,
+      currentName: r,
+      registerPane: (o) => {
+        d.value.push(o);
       },
-      sortPane,
-      unregisterPane
-    });
-    expose({
-      currentName
+      sortPane: u,
+      unregisterPane: y
+    }), s({
+      currentName: r
     });
-    const TabNavRenderer = ({
-      render
-    }) => {
-      return render();
-    };
+    const b = ({
+      render: o
+    }) => o();
     return () => {
-      const leftExtra = slots["left-extra"];
-      const rightExtra = slots["right-extra"];
-      const header = createVNode("div", {
-        "class": [ns.e("header"), isVertical.value && ns.e("header-vertical"), ns.is(props.tabPosition)]
-      }, [leftExtra && createVNode("div", {
-        "class": ns.e("extra-content-left")
-      }, [renderSlot(slots, "left-extra")]), createVNode(TabNavRenderer, {
-        "render": () => {
-          const hasLabelSlot = panes.value.some((pane) => pane.slots.label);
-          return createVNode(TabNav, {
-            ref: nav$,
-            currentName: currentName.value,
-            type: props.type,
-            panes: panes.value,
-            stretch: props.stretch,
-            onTabClick: handleTabClick
+      const o = a["left-extra"], p = a["right-extra"], N = O("div", {
+        class: [n.e("header"), P.value && n.e("header-vertical"), n.is(e.tabPosition)]
+      }, [o && O("div", {
+        class: n.e("extra-content-left")
+      }, [L(a, "left-extra")]), O(b, {
+        render: () => {
+          const C = d.value.some(($) => $.slots.label);
+          return O(lt, {
+            ref: v,
+            currentName: r.value,
+            type: e.type,
+            panes: d.value,
+            stretch: e.stretch,
+            onTabClick: f
           }, {
-            $stable: !hasLabelSlot
+            $stable: !C
           });
         }
-      }, null), rightExtra && createVNode("div", {
-        "class": ns.e("extra-content-right")
-      }, [renderSlot(slots, "right-extra")])]);
-      const panels = createVNode("div", {
-        "class": ns.e("content")
-      }, [renderSlot(slots, "default")]);
-      return createVNode("div", {
-        "class": [ns.b(), ns.m(props.tabPosition), {
-          [ns.m("card")]: props.type === "card",
-          [ns.m("border-card")]: props.type === "border-card"
+      }, null), p && O("div", {
+        class: n.e("extra-content-right")
+      }, [L(a, "right-extra")])]), x = O("div", {
+        class: n.e("content")
+      }, [L(a, "default")]);
+      return O("div", {
+        class: [n.b(), n.m(e.tabPosition), {
+          [n.m("card")]: e.type === "card",
+          [n.m("border-card")]: e.type === "border-card"
         }]
-      }, [panels, header]);
+      }, [x, N]);
     };
   }
-});
-const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
-const COMPONENT_NAME = "OTabPane";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: COMPONENT_NAME
-  },
+}), dt = ["id", "aria-hidden", "aria-labelledby"], ce = "OTabPane", vt = /* @__PURE__ */ M({
+  name: ce,
   __name: "tab-pane",
-  props: tabPaneProps,
-  setup(__props) {
-    const props = __props;
-    const instance = getCurrentInstance();
-    const slots = useSlots();
-    const tabsRoot = inject(tabsRootContextKey);
-    if (!tabsRoot) throwError(COMPONENT_NAME, "usage: <o-tabs><o-tab-pane /></o-tabs/>");
-    const ns = useNamespace("tab-pane");
-    const index2 = ref();
-    const active = computedEager(() => tabsRoot.currentName.value === (props.name ?? index2.value));
-    const loaded = ref(active.value);
-    const paneName = computed(() => props.name ?? index2.value);
-    const shouldBeRender = computedEager(() => !props.lazy || loaded.value || active.value);
-    watch(active, (val) => {
-      if (val) loaded.value = true;
-    });
-    const pane = reactive({
-      uid: instance.uid,
-      slots,
-      props,
-      paneName,
-      active,
-      index: index2
+  props: He,
+  setup(e) {
+    const t = e, a = D(), s = Te(), n = H(Q);
+    n || q(ce, "usage: <o-tabs><o-tab-pane /></o-tabs/>");
+    const P = V("tab-pane"), d = h(), u = Z(() => n.currentName.value === (t.name ?? d.value)), y = h(u.value), v = F(() => t.name ?? d.value), r = Z(() => !t.lazy || y.value || u.value);
+    B(u, (f) => {
+      f && (y.value = !0);
     });
-    tabsRoot.registerPane(pane);
-    onMounted(() => {
-      tabsRoot.sortPane(pane);
+    const i = Se({
+      uid: a.uid,
+      slots: s,
+      props: t,
+      paneName: v,
+      active: u,
+      index: d
     });
-    onUnmounted(() => {
-      tabsRoot.unregisterPane(pane.uid);
-    });
-    return (_ctx, _cache) => {
-      return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
-        key: 0,
-        id: `pane-${paneName.value}`,
-        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 n.registerPane(i), ve(() => {
+      n.sortPane(i);
+    }), xe(() => {
+      n.unregisterPane(i.uid);
+    }), (f, b) => k(r) ? $e((ue(), fe("div", {
+      key: 0,
+      id: `pane-${v.value}`,
+      class: de(k(P).b()),
+      role: "tabpanel",
+      "aria-hidden": !k(u),
+      "aria-labelledby": `tab-${v.value}`
+    }, [
+      L(f.$slots, "default")
+    ], 10, dt)), [
+      [Ce, k(u)]
+    ]) : Ie("", !0);
   }
-});
-const index = withInstall(Tabs, {
-  TabPane: _sfc_main
+}), kt = Be(ft, {
+  TabPane: vt
 });
 export {
-  index as default,
-  tabBarProps,
-  tabNavEmits,
-  tabNavProps,
-  tabPaneProps,
-  tabsEmits,
-  tabsProps,
-  tabsRootContextKey
+  kt as default,
+  De as tabBarProps,
+  it as tabNavEmits,
+  rt as tabNavProps,
+  He as tabPaneProps,
+  ut as tabsEmits,
+  ct as tabsProps,
+  Q as tabsRootContextKey
 };
 //# sourceMappingURL=index.js.map