ep-craft 0.1.21 → 0.1.23

package/dist/components/tabs/tab-nav.d.ts

@@ -0,0 +1,295 @@
+import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue';
+import type { TabBarInstance } from './tab-bar';
+import type { TabPaneName, TabsPaneContext } from './constants';
+export declare const tabNavProps: {
+    readonly panes: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (((new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[])) | null)[], unknown, unknown, () => [], boolean>;
+    readonly currentName: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    readonly editable: BooleanConstructor;
+    readonly type: import("@element-plus/utils").EpPropFinalized<StringConstructor, "" | "card" | "border-card", unknown, "", boolean>;
+    readonly stretch: BooleanConstructor;
+    readonly tabindex: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
+};
+export declare const tabNavEmits: {
+    tabClick: (tab: TabsPaneContext, tabName: TabPaneName, ev: Event) => boolean;
+    tabRemove: (tab: TabsPaneContext, ev: Event) => boolean;
+};
+export type TabNavProps = ExtractPropTypes<typeof tabNavProps>;
+export type TabNavPropsPublic = ExtractPublicPropTypes<typeof tabNavProps>;
+export type TabNavEmits = typeof tabNavEmits;
+declare const TabNav: import("vue").DefineComponent<ExtractPropTypes<{
+    readonly panes: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (((new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[])) | null)[], unknown, unknown, () => [], boolean>;
+    readonly currentName: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    readonly editable: BooleanConstructor;
+    readonly type: import("@element-plus/utils").EpPropFinalized<StringConstructor, "" | "card" | "border-card", unknown, "", boolean>;
+    readonly stretch: BooleanConstructor;
+    readonly tabindex: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    tabClick: (tab: TabsPaneContext, tabName: TabPaneName, ev: Event) => boolean;
+    tabRemove: (tab: TabsPaneContext, ev: Event) => boolean;
+}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    readonly panes: import("@element-plus/utils").EpPropFinalized<(new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (((new (...args: any[]) => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[]) | (() => {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[])) | null)[], unknown, unknown, () => [], boolean>;
+    readonly currentName: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    readonly editable: BooleanConstructor;
+    readonly type: import("@element-plus/utils").EpPropFinalized<StringConstructor, "" | "card" | "border-card", unknown, "", boolean>;
+    readonly stretch: BooleanConstructor;
+    readonly tabindex: import("@element-plus/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
+}>> & Readonly<{
+    onTabClick?: ((tab: {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }, tabName: TabPaneName, ev: Event) => any) | undefined;
+    onTabRemove?: ((tab: {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }, ev: Event) => any) | undefined;
+}>, {
+    readonly stretch: boolean;
+    readonly tabindex: import("@element-plus/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    readonly type: import("@element-plus/utils").EpPropMergeType<StringConstructor, "" | "card" | "border-card", unknown>;
+    readonly editable: boolean;
+    readonly panes: {
+        uid: number;
+        getVnode: () => import("vue").VNode;
+        slots: import("vue").Slots;
+        props: {
+            label?: string | undefined;
+            name?: string | number | undefined;
+            closable?: boolean | undefined;
+            disabled?: boolean | undefined;
+            lazy?: boolean | undefined;
+        };
+        paneName: TabPaneName | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+        isFocusInsidePane: () => boolean | undefined;
+    }[];
+    readonly currentName: import("@element-plus/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type TabNavInstance = InstanceType<typeof TabNav> & {
+    scrollToActiveTab: () => Promise<void>;
+    removeFocus: () => void;
+    focusActiveTab: () => void;
+    scheduleRender: () => void;
+    tabListRef: HTMLDivElement | undefined;
+    tabBarRef: TabBarInstance | undefined;
+};
+export default TabNav;

package/dist/components/tabs/tab-nav.js

@@ -0,0 +1,297 @@
+import { defineComponent as me, inject as be, ref as v, shallowRef as he, computed as b, watch as j, onMounted as pe, onUpdated as ge, triggerRef as Re, nextTick as q } from "vue";
+import { useDocumentVisibility as Ee, useWindowFocus as Te, useElementSize as G, useResizeObserver as Ce } from "@vueuse/core";
+import "@vue/shared";
+import { clamp as Se } from "lodash-unified";
+import { throwError as we } from "../../utils/error.js";
+import { isGreaterThan as W } from "../../utils/numbers.js";
+import { rAF as U } from "../../utils/raf.js";
+import { mutable as xe } from "../../utils/typescript.js";
+import { getEventCode as X } from "../../utils/dom/event.js";
+import { ArrowLeft as ye, ArrowRight as Ne, Close as Be } from "@element-plus/icons-vue";
+import { buildProps as Oe, definePropType as ke } from "../../utils/vue/props/runtime.js";
+import { EVENT_CODE as C } from "../../constants/aria.js";
+import { ElIcon as M } from "../icon/index.js";
+import { useNamespace as ze } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-size/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "../../hooks/use-delayed-toggle/index.js";
+import "../../hooks/use-aria/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "../../hooks/use-empty-values/index.js";
+import Pe from "../../hooks/use-wheel/index.js";
+import $e from "./tab-bar.vue.js";
+import { tabsRootContextKey as Ae } from "./constants.js";
+import { useTabNavTouch as We } from "./composables/use-tab-nav-touch.js";
+const Me = Oe({
+  panes: {
+    type: ke(Array),
+    default: () => xe([])
+  },
+  currentName: {
+    type: [String, Number],
+    default: ""
+  },
+  editable: Boolean,
+  type: {
+    type: String,
+    values: ["card", "border-card", ""],
+    default: ""
+  },
+  stretch: Boolean,
+  /**
+   * @description tab-nav tabindex
+   */
+  tabindex: {
+    type: [String, Number],
+    default: void 0
+  }
+}), Fe = {
+  tabClick: (c, x, S) => S instanceof Event,
+  tabRemove: (c, x) => x instanceof Event
+}, Y = "ElTabNav", rt = me({
+  name: Y,
+  props: Me,
+  emits: Fe,
+  setup(c, { expose: x, emit: S }) {
+    const h = be(Ae);
+    h || we(Y, "<el-tabs><tab-nav /></el-tabs>");
+    const n = ze("tabs"), J = Ee(), Q = Te(), u = v(), d = v(), N = v(), y = v({}), B = v(), i = v(!1), l = v(0), O = v(!1), w = v(!0), k = v(!1), F = he(), p = b(
+      () => ["top", "bottom"].includes(h.props.tabPosition)
+    ), E = b(() => p.value ? "width" : "height"), Z = b(() => {
+      const e = E.value === "width" ? "X" : "Y";
+      return {
+        transition: k.value || se.value ? "none" : void 0,
+        transform: `translate${e}(-${l.value}px)`
+      };
+    }), { width: ee, height: te } = G(u), { width: ae, height: oe } = G(
+      d,
+      { width: 0, height: 0 },
+      { box: "border-box" }
+    ), z = b(
+      () => p.value ? ee.value : te.value
+    ), P = b(
+      () => p.value ? ae.value : oe.value
+    ), { onWheel: ne } = Pe(
+      {
+        atStartEdge: b(() => l.value <= 0),
+        atEndEdge: b(
+          () => P.value - l.value <= z.value
+        ),
+        layout: b(
+          () => p.value ? "horizontal" : "vertical"
+        )
+      },
+      (e) => {
+        l.value = Se(
+          l.value + e,
+          0,
+          P.value - z.value
+        );
+      }
+    ), le = (e) => {
+      k.value = !0, ne(e), U(() => {
+        k.value = !1;
+      });
+    }, {
+      isTouchScrolling: se,
+      handleTouchStart: ce,
+      handleTouchMove: ie,
+      handleTouchEnd: L
+    } = We({
+      scrollable: i,
+      navOffset: l,
+      navSize: P,
+      navContainerSize: z,
+      isHorizontal: p
+    }), re = () => {
+      if (!u.value) return;
+      const e = u.value.getBoundingClientRect()[E.value], a = l.value;
+      if (!a) return;
+      const t = a > e ? a - e : 0;
+      l.value = t;
+    }, ue = () => {
+      if (!u.value || !d.value) return;
+      const e = d.value.getBoundingClientRect()[E.value], a = u.value.getBoundingClientRect()[E.value], t = l.value;
+      if (!W(e - t, a)) return;
+      const o = e - t > a * 2 ? t + a : e - a;
+      l.value = o;
+    }, I = async () => {
+      const e = d.value;
+      if (!i.value || !N.value || !u.value || !e) return;
+      await q();
+      const a = y.value[c.currentName];
+      if (!a) return;
+      const t = u.value, o = a.getBoundingClientRect(), r = t.getBoundingClientRect(), s = r.left + 1, g = r.right - 1, T = e.getBoundingClientRect(), A = p.value ? T.width - r.width : T.height - r.height, R = l.value;
+      let f = R;
+      p.value ? (o.left < s && (f = R - (s - o.left)), o.right > g && (f = R + o.right - g)) : (o.top < r.top && (f = R - (r.top - o.top)), o.bottom > r.bottom && (f = R + (o.bottom - r.bottom))), f = Math.max(f, 0), l.value = Math.min(f, A);
+    }, _ = () => {
+      var o;
+      if (!d.value || !u.value) return;
+      c.stretch && ((o = B.value) == null || o.update());
+      const e = d.value.getBoundingClientRect()[E.value], a = u.value.getBoundingClientRect()[E.value], t = l.value;
+      a < e ? (i.value = i.value || {}, i.value.prev = t, i.value.next = W(
+        e,
+        t + a
+      ), W(a, e - t) && (l.value = e - a)) : (i.value = !1, t > 0 && (l.value = 0));
+    }, ve = (e) => {
+      const a = X(e);
+      let t = 0;
+      switch (a) {
+        case C.left:
+        case C.up:
+          t = -1;
+          break;
+        case C.right:
+        case C.down:
+          t = 1;
+          break;
+        default:
+          return;
+      }
+      const o = Array.from(
+        e.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")
+      );
+      let s = o.indexOf(e.target) + t;
+      s < 0 ? s = o.length - 1 : s >= o.length && (s = 0), o[s].focus({ preventScroll: !0 }), o[s].click(), H();
+    }, H = () => {
+      w.value && (O.value = !0);
+    }, $ = () => O.value = !1, fe = (e, a) => {
+      y.value[a] = e;
+    }, de = async () => {
+      await q();
+      const e = y.value[c.currentName];
+      e == null || e.focus({ preventScroll: !0 });
+    };
+    return j(J, (e) => {
+      e === "hidden" ? w.value = !1 : e === "visible" && setTimeout(() => w.value = !0, 50);
+    }), j(Q, (e) => {
+      e ? setTimeout(() => w.value = !0, 50) : w.value = !1;
+    }), Ce(N, () => {
+      U(_);
+    }), pe(() => setTimeout(() => I(), 0)), ge(() => _()), x({
+      scrollToActiveTab: I,
+      removeFocus: $,
+      focusActiveTab: de,
+      tabListRef: d,
+      tabBarRef: B,
+      scheduleRender: () => Re(F)
+    }), () => {
+      const e = i.value ? [
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            class: [
+              n.e("nav-prev"),
+              n.is("disabled", !i.value.prev)
+            ],
+            onClick: re
+          },
+          /* @__PURE__ */ React.createElement(M, null, /* @__PURE__ */ React.createElement(ye, null))
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            class: [
+              n.e("nav-next"),
+              n.is("disabled", !i.value.next)
+            ],
+            onClick: ue
+          },
+          /* @__PURE__ */ React.createElement(M, null, /* @__PURE__ */ React.createElement(Ne, null))
+        )
+      ] : null, a = c.panes.map((t, o) => {
+        var K, D;
+        const r = t.uid, s = t.props.disabled, g = t.props.name ?? t.index ?? `${o}`, T = !s && (t.isClosable || t.props.closable !== !1 && c.editable);
+        t.index = `${o}`;
+        const A = T ? /* @__PURE__ */ React.createElement(
+          M,
+          {
+            class: "is-icon-close",
+            onClick: (m) => S("tabRemove", t, m)
+          },
+          /* @__PURE__ */ React.createElement(Be, null)
+        ) : null, R = ((D = (K = t.slots).label) == null ? void 0 : D.call(K)) || t.props.label, f = !s && t.active ? c.tabindex ?? h.props.tabindex : -1;
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            ref: (m) => fe(m, g),
+            class: [
+              n.e("item"),
+              n.is(h.props.tabPosition),
+              n.is("active", t.active),
+              n.is("disabled", s),
+              n.is("closable", T),
+              n.is("focus", O.value)
+            ],
+            id: `tab-${g}`,
+            key: `tab-${r}`,
+            "aria-controls": `pane-${g}`,
+            role: "tab",
+            "aria-selected": t.active,
+            tabindex: f,
+            onFocus: () => H(),
+            onBlur: () => $(),
+            onClick: (m) => {
+              $(), S("tabClick", t, g, m);
+            },
+            onKeydown: (m) => {
+              const V = X(m);
+              T && (V === C.delete || V === C.backspace) && S("tabRemove", t, m);
+            }
+          },
+          R,
+          A
+        );
+      });
+      return F.value, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: N,
+          class: [
+            n.e("nav-wrap"),
+            n.is("scrollable", !!i.value),
+            n.is(h.props.tabPosition)
+          ]
+        },
+        e,
+        /* @__PURE__ */ React.createElement("div", { class: n.e("nav-scroll"), ref: u }, c.panes.length > 0 ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            class: [
+              n.e("nav"),
+              n.is(h.props.tabPosition),
+              n.is(
+                "stretch",
+                c.stretch && ["top", "bottom"].includes(h.props.tabPosition)
+              )
+            ],
+            ref: d,
+            style: Z.value,
+            role: "tablist",
+            onKeydown: ve,
+            onWheel: le,
+            onTouchstart: ce,
+            onTouchmove: ie,
+            onTouchend: L,
+            onTouchcancel: L
+          },
+          c.type ? null : /* @__PURE__ */ React.createElement(
+            $e,
+            {
+              ref: B,
+              tabs: [...c.panes],
+              tabRefs: y.value
+            }
+          ),
+          a
+        ) : null)
+      );
+    };
+  }
+});
+export {
+  rt as default,
+  Fe as tabNavEmits,
+  Me as tabNavProps
+};