orion-design 0.1.29 → 0.1.31

package/dist/components/Tabs/index.js

@@ -1,93 +1,156 @@
 import "lodash-es";
-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-C6P_0wAy.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;
+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;
 }
-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 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);
   };
-  return he(v), v;
+  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;
 }
-function qe(e, t = !1) {
-  const a = h(), s = () => a.value = !!e();
-  return s(), Me(s, t), a;
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
 }
-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;
+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;
 }
-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;
+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;
 };
-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();
+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;
+    }
   };
-  return he(r), {
-    isSupported: u,
-    stop: r
+  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
   };
 }
-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;
+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;
 };
-const nt = {
+const _TransitionPresets = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -113,80 +176,115 @@ const nt = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-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;
+__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;
 }
-const re = "OTabBar", ot = /* @__PURE__ */ M({
-  name: re,
+const COMPONENT_NAME$2 = "OTabBar";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: COMPONENT_NAME$2
+  },
   __name: "tab-bar",
-  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)`
+  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)`
       };
-    }, 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));
+    };
+    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));
           }
+        }
       }
     };
-    B(
-      () => a.tabs,
+    watch(
+      () => props.tabs,
       async () => {
-        await K(), v(), i();
+        await nextTick();
+        update();
+        observerTabs();
       },
-      { immediate: !0 }
+      { immediate: true }
     );
-    const f = j(d, () => v());
-    return Pe(() => {
-      r.forEach((b) => b.stop()), r.length = 0, f.stop();
-    }), t({
+    const barObserever = useResizeObserver(barRef, () => update());
+    onBeforeUnmount(() => {
+      saveObserver.forEach((observer) => observer.stop());
+      saveObserver.length = 0;
+      barObserever.stop();
+    });
+    __expose({
       /** @description tab root html element */
-      ref: d,
+      ref: barRef,
       /** @description method to manually update tab bar style */
-      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));
+      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);
+    };
   }
-}), rt = be({
+});
+const tabNavProps = buildProps({
   panes: {
-    type: pe(Array),
-    default: () => We([])
+    type: definePropType(Array),
+    default: () => mutable([])
   },
   currentName: {
     type: [String, Number],
@@ -198,122 +296,222 @@ const re = "OTabBar", ot = /* @__PURE__ */ M({
     default: "card"
   },
   stretch: Boolean
-}), 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 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
   }) {
-    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);
+    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);
           }
-        }, [T]);
+        }, [...[tabLabelContent]]);
       });
-      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])])]);
+      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]])])]);
     };
   }
-}), ct = be({
+});
+const tabsProps = buildProps({
   /**
    * @description type of Tab
    */
@@ -340,136 +538,183 @@ const re = "OTabBar", ot = /* @__PURE__ */ M({
    * @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: pe(Function),
-    default: () => !0
+    type: definePropType(Function),
+    default: () => true
   },
   /**
    * @description whether width of tab automatically fits its container
    */
   stretch: Boolean
-}), le = (e) => Re(e) || ke(e), ut = {
-  [me]: (e) => le(e),
-  tabClick: (e, t) => t instanceof Event,
-  tabChange: (e) => le(e)
-}, ft = /* @__PURE__ */ M({
+});
+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({
   name: "OTabs",
-  props: ct,
-  emits: ut,
-  setup(e, {
-    emit: t,
-    slots: a,
-    expose: s
+  props: tabsProps,
+  emits: tabsEmits,
+  setup(props, {
+    emit,
+    slots,
+    expose
   }) {
-    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 {
+    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);
         }
-    }, f = (o, p, N) => {
-      o.props.disabled || (i(p, !0), t("tabClick", o, N));
+      } catch {
+      }
     };
-    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);
+    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);
       },
-      sortPane: u,
-      unregisterPane: y
-    }), s({
-      currentName: r
+      sortPane,
+      unregisterPane
+    });
+    expose({
+      currentName
     });
-    const b = ({
-      render: o
-    }) => o();
+    const TabNavRenderer = ({
+      render
+    }) => {
+      return render();
+    };
     return () => {
-      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
+      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
           }, {
-            $stable: !C
+            $stable: !hasLabelSlot
           });
         }
-      }, 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"
+      }, 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"
         }]
-      }, [x, N]);
+      }, [panels, header]);
     };
   }
-}), dt = ["id", "aria-hidden", "aria-labelledby"], ce = "OTabPane", vt = /* @__PURE__ */ M({
-  name: ce,
+});
+const _hoisted_1 = ["id", "aria-hidden", "aria-labelledby"];
+const COMPONENT_NAME = "OTabPane";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: COMPONENT_NAME
+  },
   __name: "tab-pane",
-  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);
+  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
     });
-    const i = Se({
-      uid: a.uid,
-      slots: s,
-      props: t,
-      paneName: v,
-      active: u,
-      index: d
+    tabsRoot.registerPane(pane);
+    onMounted(() => {
+      tabsRoot.sortPane(pane);
     });
-    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);
+    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);
+    };
   }
-}), kt = Be(ft, {
-  TabPane: vt
+});
+const index = withInstall(Tabs, {
+  TabPane: _sfc_main
 });
 export {
-  kt as default,
-  De as tabBarProps,
-  it as tabNavEmits,
-  rt as tabNavProps,
-  He as tabPaneProps,
-  ut as tabsEmits,
-  ct as tabsProps,
-  Q as tabsRootContextKey
+  index as default,
+  tabBarProps,
+  tabNavEmits,
+  tabNavProps,
+  tabPaneProps,
+  tabsEmits,
+  tabsProps,
+  tabsRootContextKey
 };
 //# sourceMappingURL=index.js.map