orion-design 1.0.4 → 1.0.6

package/dist/components/Tabs/index.js

@@ -1,475 +1,99 @@
 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-LOH6x_02.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 { g as Qe, i as Ue } from "../../index-CIR6wX_E.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 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();
-  };
-  return he(v), v;
-}
-function qe(e, t = !1) {
-  const a = h(), s = () => a.value = !!e();
-  return s(), Me(s, t), a;
-}
-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 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 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();
-  };
-  return he(r), {
-    isSupported: u,
-    stop: r
-  };
-}
-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 nt = {
-  easeInSine: [0.12, 0, 0.39, 0],
-  easeOutSine: [0.61, 1, 0.88, 1],
-  easeInOutSine: [0.37, 0, 0.63, 1],
-  easeInQuad: [0.11, 0, 0.5, 0],
-  easeOutQuad: [0.5, 1, 0.89, 1],
-  easeInOutQuad: [0.45, 0, 0.55, 1],
-  easeInCubic: [0.32, 0, 0.67, 0],
-  easeOutCubic: [0.33, 1, 0.68, 1],
-  easeInOutCubic: [0.65, 0, 0.35, 1],
-  easeInQuart: [0.5, 0, 0.75, 0],
-  easeOutQuart: [0.25, 1, 0.5, 1],
-  easeInOutQuart: [0.76, 0, 0.24, 1],
-  easeInQuint: [0.64, 0, 0.78, 0],
-  easeOutQuint: [0.22, 1, 0.36, 1],
-  easeInOutQuint: [0.83, 0, 0.17, 1],
-  easeInExpo: [0.7, 0, 0.84, 0],
-  easeOutExpo: [0.16, 1, 0.3, 1],
-  easeInOutExpo: [0.87, 0, 0.13, 1],
-  easeInCirc: [0.55, 0, 1, 0.45],
-  easeOutCirc: [0, 0.55, 0.45, 1],
-  easeInOutCirc: [0.85, 0, 0.15, 1],
-  easeInBack: [0.36, 0, 0.66, -0.56],
-  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;
-}
-const re = "OTabBar", ot = /* @__PURE__ */ M({
-  name: re,
-  __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)`
-      };
-    }, 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));
-          }
-      }
-    };
-    B(
-      () => a.tabs,
-      async () => {
-        await K(), v(), i();
-      },
-      { immediate: !0 }
-    );
-    const f = j(d, () => v());
-    return Pe(() => {
-      r.forEach((b) => b.stop()), r.length = 0, f.stop();
-    }), t({
-      /** @description tab root html element */
-      ref: d,
-      /** @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));
-  }
-}), rt = be({
-  panes: {
-    type: pe(Array),
-    default: () => We([])
-  },
-  currentName: {
-    type: [String, Number],
-    default: ""
-  },
-  type: {
-    type: String,
-    values: ["card", "border-card", ""],
-    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 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);
-          }
-        }, [T]);
-      });
-      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])])]);
-    };
-  }
-}), ct = be({
-  /**
-   * @description type of Tab
-   */
-  type: {
-    type: String,
-    values: ["card", "border-card", ""],
-    default: "card"
-  },
-  /**
-   * @description binding value, name of the selected tab
-   */
-  modelValue: {
-    type: [String, Number]
-  },
-  /**
-   * @description position of tabs
-   */
-  tabPosition: {
-    type: String,
-    values: ["top", "right", "bottom", "left"],
-    default: "top"
-  },
-  /**
-   * @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
-  },
-  /**
-   * @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({
+import { defineComponent as m, mergeModels as u, useSlots as f, useModel as g, computed as P, openBlock as p, createBlock as c, unref as r, createSlots as y, withCtx as o, renderSlot as s } from "vue";
+import { withInstall as V } from "../_util/vue/install.js";
+import { ElTabs as $, ElTabPane as z } from "element-plus";
+const C = /* @__PURE__ */ m({
   name: "OTabs",
-  props: ct,
-  emits: ut,
-  setup(e, {
-    emit: t,
-    slots: a,
-    expose: s
-  }) {
-    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 {
-        }
-    }, f = (o, p, N) => {
-      o.props.disabled || (i(p, !0), t("tabClick", o, N));
-    };
-    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: u,
-      unregisterPane: y
-    }), s({
-      currentName: r
-    });
-    const b = ({
-      render: o
-    }) => o();
-    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
-          }, {
-            $stable: !C
-          });
-        }
-      }, 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"
-        }]
-      }, [x, N]);
+  inheritAttrs: !1,
+  __name: "tabs",
+  props: /* @__PURE__ */ u({
+    type: { default: "card" },
+    closable: { type: Boolean, default: !1 },
+    tabPosition: { default: "top" },
+    stretch: { type: Boolean, default: !1 },
+    beforeLeave: { type: Function, default: () => !0 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ u(["tab-click", "tab-change", "tab-remove", "tab-add"], ["update:modelValue"]),
+  setup(n, { emit: d }) {
+    const a = f(), b = g(n, "modelValue"), i = P(() => a["right-extra"] && ["top", "bottom"].indexOf(n.tabPosition) > -1), l = d, h = (e, t) => {
+      l("tab-click", e, t);
+    }, v = (e) => {
+      l("tab-change", e);
+    }, T = (e) => {
+      l("tab-remove", e);
+    }, k = () => {
+      l("tab-add");
     };
+    return (e, t) => (p(), c(r($), {
+      modelValue: b.value,
+      "onUpdate:modelValue": t[0] || (t[0] = (B) => b.value = B),
+      type: e.type,
+      closable: e.closable,
+      "tab-position": e.tabPosition,
+      stretch: e.stretch,
+      "before-leave": e.beforeLeave,
+      onTabClick: h,
+      onTabChange: v,
+      onTabRemove: T,
+      onTabAdd: k,
+      addable: i.value,
+      class: "orion-tabs"
+    }, y({
+      default: o(() => [
+        s(e.$slots, "default")
+      ]),
+      _: 2
+    }, [
+      i.value ? {
+        name: "add-icon",
+        fn: o(() => [
+          s(e.$slots, "right-extra")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["modelValue", "type", "closable", "tab-position", "stretch", "before-leave", "addable"]));
   }
-}), dt = ["id", "aria-hidden", "aria-labelledby"], ce = "OTabPane", vt = /* @__PURE__ */ M({
-  name: ce,
+}), A = /* @__PURE__ */ m({
+  name: "OTabPane",
+  inheritAttrs: !1,
   __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);
-    });
-    const i = Se({
-      uid: a.uid,
-      slots: s,
-      props: t,
-      paneName: v,
-      active: u,
-      index: d
-    });
-    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}`
+  props: {
+    label: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    name: {},
+    closable: { type: Boolean, default: !1 },
+    lazy: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const d = f();
+    return (a, b) => (p(), c(r(z), {
+      label: a.label,
+      disabled: a.disabled,
+      name: a.name,
+      closable: a.closable,
+      lazy: a.lazy
+    }, y({
+      default: o(() => [
+        s(a.$slots, "default")
+      ]),
+      _: 2
     }, [
-      L(f.$slots, "default")
-    ], 10, dt)), [
-      [Ce, k(u)]
-    ]) : Ie("", !0);
+      r(d).label ? {
+        name: "label",
+        fn: o(() => [
+          s(a.$slots, "label")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "disabled", "name", "closable", "lazy"]));
   }
-}), kt = Be(ft, {
-  TabPane: vt
+}), E = V(C, {
+  TabPane: A
 });
 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
+  E as default
 };
 //# sourceMappingURL=index.js.map