x-next 1.0.1 → 1.2.0

package/dist/es/components/tabs/Tabs.js

@@ -0,0 +1,290 @@
+import { defineComponent as k, toRefs as D, computed as l, reactive as O, ref as L, provide as H, watch as _, createVNode as v, nextTick as E } from "vue";
+import R from "./tabs-nav.js";
+import { tabsInjectionKey as U } from "./context.js";
+import { isUndefined as m } from "../../_utils/is.js";
+import { useSize as V } from "../../_hooks/use-size.js";
+import { useChildrenComponents as q } from "../../_hooks/use-children-components.js";
+import { getClassNameMixin as F } from "../../_utils/config.js";
+const ee = /* @__PURE__ */ k({
+  name: "Tabs",
+  props: {
+    /**
+     * @zh 当前选中的标签的 `key`
+     * @en The `key` of the currently selected label
+     * @vModel
+     */
+    activeKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * @zh 默认选中的标签的`key`（非受控状态，为空时选中第一个标签页）
+     * @en The `key` of the tab selected by default (uncontrolled state, select the first tab page when it is empty)
+     */
+    defaultActiveKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * @zh 选项卡的位置
+     * @en Position of the tab
+     * @values 'left', 'right', 'top', 'bottom'
+     */
+    position: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * @zh 选项卡的大小
+     * @en The size of the tab
+     * @values 'mini', 'small', 'medium', 'large'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 选项卡的类型
+     * @en The type of tab
+     * @values 'line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'
+     */
+    type: {
+      type: String,
+      default: "line"
+    },
+    /**
+     * @zh 选项卡的方向
+     * @en The direction of tab
+     * @values 'horizontal', 'vertical'
+     */
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * @zh 是否开启可编辑模式
+     * @en Whether to enable editable mode
+     */
+    editable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否显示增加按钮（仅在可编辑模式可用）
+     * @en Whether to display the add button (only available in editable mode)
+     */
+    showAddButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否在不显示标签时销毁内容
+     * @en Whether to destroy the content when the label is not displayed
+     * @version 2.27.0
+     */
+    destroyOnHide: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否在首次展示标签时挂载内容
+     * @en Whether to mount the content when the label is first displayed
+     */
+    lazyLoad: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 高度撑满容器，只在水平模式下生效。
+     * @en The height of the container is fully supported, and it only takes effect in horizontal mode.
+     */
+    justify: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否开启选项内容过渡动画
+     * @en Whether to enable option content transition animation
+     */
+    animation: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 选项卡头部是否存在水平边距。仅对 `type` 等于 `line`、`text` 类型的选项卡生效
+     * @en Whether there is a horizontal margin on the header of the tab. Only valid for tabs with `type` equal to `line` and `text` type
+     * @version 2.10.0
+     */
+    headerPadding: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 创建标签后是否切换到新标签（最后一个）
+     * @en Whether to switch to a new tab after creating a tab (the last one)
+     * @version 2.18.0
+     */
+    autoSwitch: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否隐藏内容
+     * @en Whether to hide content
+     * @version 2.25.0
+     */
+    hideContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 触发方式
+     * @en Trigger method
+     * @values 'hover','click'
+     * @version 2.34.0
+     */
+    trigger: {
+      type: String,
+      default: "click"
+    },
+    /**
+     * @zh 被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整
+     * @en The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally
+     * @values 'start', 'end', 'center', 'auto', number
+     */
+    scrollPosition: {
+      type: [String, Number],
+      default: "auto"
+    }
+  },
+  emits: {
+    "update:activeKey": (t) => !0,
+    /**
+     * @zh 当前标签值改变时触发
+     * @en Triggered when the current tag value changes
+     * @property { string | number } key
+     */
+    change: (t) => !0,
+    /**
+     * @zh 用户点击标签时触发
+     * @en Triggered when the user clicks on the tab
+     * @property { string | number } key
+     */
+    tabClick: (t, i) => !0,
+    /**
+     * @zh 用户点击增加按钮时触发
+     * @en Triggered when the user clicks the add button
+     */
+    add: (t) => !0,
+    /**
+     * @zh 用户点击删除按钮时触发
+     * @en Triggered when the user clicks the delete button
+     * @property { string | number } key
+     */
+    delete: (t, i) => !0
+  },
+  /**
+   * @zh 选项卡额外内容
+   * @en Additional tab content
+   * @slot extra
+   */
+  setup(t, {
+    emit: i,
+    slots: c
+  }) {
+    const {
+      size: C,
+      lazyLoad: S,
+      destroyOnHide: z,
+      trigger: A
+    } = D(t), n = F("tabs"), {
+      mergedSize: h
+    } = V(C), u = l(() => t.direction === "vertical" ? "left" : t.position), g = l(() => ["left", "right"].includes(u.value) ? "vertical" : "horizontal"), {
+      children: b,
+      components: P
+    } = q("TabPane"), y = O(/* @__PURE__ */ new Map()), p = l(() => {
+      const e = [];
+      return P.value.forEach((a) => {
+        const d = y.get(a);
+        d && e.push(d);
+      }), e;
+    }), o = l(() => p.value.map((e) => e.key)), w = (e, a) => {
+      y.set(e, a);
+    }, N = (e) => {
+      y.delete(e);
+    }, r = L(t.defaultActiveKey), s = l(() => {
+      const e = t.activeKey ?? r.value;
+      return m(e) || o.value.length > 0 && !o.value.includes(e) ? o.value[0] : e;
+    }), K = l(() => {
+      const e = o.value.indexOf(s.value);
+      return e === -1 ? 0 : e;
+    });
+    H(U, {
+      lazyLoad: S,
+      destroyOnHide: z,
+      activeKey: s,
+      addItem: w,
+      removeItem: N,
+      trigger: A
+    });
+    const x = (e) => {
+      !m(e) && e !== s.value && (r.value = e, i("update:activeKey", e), i("change", e));
+    }, I = (e, a) => {
+      x(e), i("tabClick", e, a);
+    }, T = (e) => {
+      i("add", e), t.autoSwitch && E(() => {
+        const a = o.value[o.value.length - 1];
+        x(a);
+      });
+    }, M = (e, a) => {
+      i("delete", e, a);
+    };
+    _(o, (e, a) => {
+      if (e.length === 0) return;
+      const d = t.activeKey ?? r.value;
+      if (m(d) || e.includes(d)) return;
+      const j = a.indexOf(d), f = e[Math.min(Math.max(j, 0), e.length - 1)];
+      m(f) || (r.value = f, i("update:activeKey", f), i("change", f));
+    });
+    const B = () => v("div", {
+      class: [n.element("content"), {
+        [`${n.element("content")}-hide`]: t.hideContent
+      }]
+    }, [v("div", {
+      class: [n.element("content--list"), {
+        [`${n.element("content--list")}-animation`]: t.animation
+      }],
+      style: {
+        marginLeft: `-${K.value * 100}%`
+      }
+    }, [b.value])]), $ = l(() => [n.block, n.modifier(g.value), n.modifier(u.value), n.modifier(`type-${t.type}`), n.modifier(`size-${h.value}`), {
+      [n.modifier("justify")]: t.justify
+    }]);
+    return () => {
+      var e;
+      return b.value = (e = c.default) == null ? void 0 : e.call(c), v("div", {
+        class: $.value
+      }, [u.value === "bottom" && B(), v(R, {
+        tabs: p.value,
+        activeKey: s.value,
+        activeIndex: K.value,
+        direction: g.value,
+        position: u.value,
+        editable: t.editable,
+        animation: t.animation,
+        showAddButton: t.showAddButton,
+        headerPadding: t.headerPadding,
+        scrollPosition: t.scrollPosition,
+        size: h.value,
+        type: t.type,
+        onClick: I,
+        onAdd: T,
+        onDelete: M
+      }, {
+        extra: c.extra
+      }), u.value !== "bottom" && B()]);
+    };
+  }
+});
+export {
+  ee as default
+};

package/dist/es/components/tabs/context.js

@@ -0,0 +1,4 @@
+const o = Symbol("ArcoTabs");
+export {
+  o as tabsInjectionKey
+};

package/dist/es/components/tabs/index.js

@@ -0,0 +1,10 @@
+import e from "./Tabs.js";
+import t from "./TabPane.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as a } from "../../_utils/config.js";
+const b = o(a("Tabs"), e), f = o(a("TabPane"), t);
+export {
+  f as TabPane,
+  b as Tabs,
+  b as default
+};

package/dist/es/components/tabs/tabs-button.js

@@ -0,0 +1,62 @@
+import { defineComponent as d, computed as u, createVNode as n, isVNode as f } from "vue";
+import m from "../_components/icon-hover/index.vue.js";
+import s from "../../icons/_self/left.js";
+import b from "../../icons/_self/right.js";
+import y from "../../icons/_self/up.js";
+import v from "../../icons/_self/down.js";
+import { getClassNameMixin as x } from "../../_utils/config.js";
+import { useLocale as h } from "../../locale/index.js";
+function g(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !f(t);
+}
+const B = /* @__PURE__ */ d({
+  name: "TabsButton",
+  props: {
+    type: {
+      type: String,
+      default: "next"
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    onClick: {
+      type: Function
+    }
+  },
+  emits: ["click"],
+  setup(t, {
+    emit: l
+  }) {
+    const e = x("tabs-nav-button"), {
+      t: o
+    } = h(), r = (i) => {
+      t.disabled || l("click", t.type, i);
+    }, c = () => t.direction === "horizontal" ? t.type === "next" ? n(b, null, null) : n(s, null, null) : t.type === "next" ? n(v, null, null) : n(y, null, null), a = u(() => [e.block, {
+      [e.modifier("disabled")]: t.disabled,
+      [e.modifier("left")]: t.direction === "horizontal" && t.type === "previous",
+      [e.modifier("right")]: t.direction === "horizontal" && t.type === "next",
+      [e.modifier("up")]: t.direction === "vertical" && t.type === "previous",
+      [e.modifier("down")]: t.direction === "vertical" && t.type === "next"
+    }]);
+    return () => {
+      let i;
+      return n(m, {
+        as: "button",
+        class: a.value,
+        disabled: t.disabled,
+        "aria-label": t.type === "previous" ? o("tabs.scrollPrev") : o("tabs.scrollNext"),
+        onClick: r
+      }, g(i = c()) ? i : {
+        default: () => [i]
+      });
+    };
+  }
+});
+export {
+  B as default
+};

package/dist/es/components/tabs/tabs-nav-ink.vue.js

@@ -0,0 +1,13 @@
+import o from "./tabs-nav-ink.vue2.js";
+import { openBlock as r, createElementBlock as s, normalizeStyle as t, normalizeClass as l } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+function a(e, c, m, p, i, f) {
+  return r(), s("div", {
+    class: l(e.cls),
+    style: t(e.style)
+  }, null, 6);
+}
+const $ = /* @__PURE__ */ n(o, [["render", a]]);
+export {
+  $ as default
+};

package/dist/es/components/tabs/tabs-nav-ink.vue2.js

@@ -0,0 +1,49 @@
+import { defineComponent as v, toRefs as r, ref as c, computed as f, onMounted as m, nextTick as b, onUpdated as p } from "vue";
+import { getClassNameMixin as x } from "../../_utils/config.js";
+const k = v({
+  name: "TabsNavInk",
+  props: {
+    activeTabRef: {
+      type: Object
+    },
+    direction: {
+      type: String
+    },
+    disabled: Boolean,
+    animation: Boolean
+  },
+  setup(e) {
+    const { activeTabRef: t } = r(e), i = x("tabs--nav--ink"), a = c(0), n = c(0), d = f(() => e.direction === "vertical" ? {
+      top: `${a.value}px`,
+      height: `${n.value}px`
+    } : {
+      left: `${a.value}px`,
+      width: `${n.value}px`
+    }), o = () => {
+      if (t.value) {
+        const l = e.direction === "vertical" ? t.value.offsetTop : t.value.offsetLeft, s = e.direction === "vertical" ? t.value.offsetHeight : t.value.offsetWidth;
+        (l !== a.value || s !== n.value) && (a.value = l, n.value = s);
+      }
+    };
+    m(() => {
+      b(() => o());
+    }), p(() => {
+      o();
+    });
+    const u = f(() => [
+      i.block,
+      {
+        [i.modifier("animation")]: e.animation,
+        [i.modifier("disabled")]: e.disabled
+      }
+    ]);
+    return {
+      className: i,
+      cls: u,
+      style: d
+    };
+  }
+});
+export {
+  k as default
+};

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

@@ -0,0 +1,216 @@
+import { defineComponent as ae, toRefs as le, ref as y, computed as h, watch as I, nextTick as N, onMounted as ie, createVNode as r } from "vue";
+import { getTabListStyle as ne, updateScrollOffset as oe } from "./utils.js";
+import re from "./tabs-tab.vue.js";
+import W from "./tabs-button.js";
+import ue from "./tabs-nav-ink.vue.js";
+import se from "../_components/icon-hover/index.vue.js";
+import de from "../../icons/_self/plus.js";
+import O from "../../_container/resize-observer.js";
+import { isUndefined as P, isNumber as fe } from "../../_utils/is.js";
+import { getClassNameMixin as ce } from "../../_utils/config.js";
+import { useLocale as ve } from "../../locale/index.js";
+const Re = /* @__PURE__ */ ae({
+  name: "TabsNav",
+  props: {
+    tabs: {
+      type: Array,
+      required: !0
+    },
+    direction: {
+      type: String,
+      required: !0
+    },
+    type: {
+      type: String,
+      required: !0
+    },
+    activeKey: {
+      type: [String, Number]
+    },
+    activeIndex: {
+      type: Number,
+      required: !0
+    },
+    position: {
+      type: String,
+      required: !0
+    },
+    size: {
+      type: String,
+      required: !0
+    },
+    showAddButton: {
+      type: Boolean,
+      default: !1
+    },
+    editable: {
+      type: Boolean,
+      default: !1
+    },
+    animation: {
+      type: Boolean,
+      required: !0
+    },
+    headerPadding: {
+      type: Boolean,
+      default: !0
+    },
+    scrollPosition: {
+      type: String,
+      default: "auto"
+    }
+  },
+  emits: ["click", "add", "delete"],
+  setup(a, {
+    emit: z,
+    slots: R
+  }) {
+    const {
+      tabs: $,
+      activeKey: S,
+      activeIndex: p,
+      direction: T,
+      scrollPosition: s
+    } = le(a), u = ce("tabs--nav"), {
+      t: q
+    } = ve(), n = y(), m = y(), g = y({}), b = h(() => {
+      if (!P(S.value))
+        return g.value[S.value];
+    }), C = y(), L = h(() => a.editable && ["line", "card", "card-gutter"].includes(a.type)), d = y(!1), B = y(0), k = y(0), o = y(0), M = () => {
+      var e, t;
+      return (T.value === "vertical" ? (e = n.value) == null ? void 0 : e.offsetHeight : (t = n.value) == null ? void 0 : t.offsetWidth) ?? 0;
+    }, D = () => !m.value || !n.value ? 0 : T.value === "vertical" ? m.value.offsetHeight - n.value.offsetHeight : m.value.offsetWidth - n.value.offsetWidth, w = () => {
+      d.value = K(), d.value ? (B.value = M(), k.value = D(), o.value > k.value && (o.value = k.value)) : o.value = 0;
+    }, K = () => n.value && m.value ? a.direction === "vertical" ? m.value.offsetHeight > n.value.offsetHeight : m.value.offsetWidth > n.value.offsetWidth : !1, f = (e) => {
+      (!n.value || !m.value || e < 0) && (e = 0), o.value = Math.min(e, k.value);
+    }, E = () => {
+      if (!b.value || !n.value || !d.value) return;
+      oe(n.value, T.value);
+      const e = T.value === "horizontal", t = e ? "offsetLeft" : "offsetTop", c = e ? "offsetWidth" : "offsetHeight", l = b.value[t], i = b.value[c], v = n.value[c], ee = window.getComputedStyle(b.value), te = e ? s.value === "end" ? "marginRight" : "marginLeft" : s.value === "end" ? "marginBottom" : "marginTop", x = parseFloat(ee[te]) || 0;
+      s.value === "auto" ? l < o.value ? f(l - x) : l + i > o.value + v && f(l + i - v + x) : s.value === "center" ? f(l + (i - v + x) / 2) : s.value === "start" ? f(l - x) : s.value === "end" ? f(l + i - v + x) : fe(s.value) && f(l - s.value);
+    }, U = (e) => {
+      if (!d.value) return;
+      e.preventDefault();
+      const {
+        deltaX: t,
+        deltaY: c
+      } = e;
+      Math.abs(t) > Math.abs(c) ? f(o.value + t) : f(o.value + c);
+    }, j = (e, t) => {
+      z("click", e, t);
+    }, F = () => a.tabs.filter((e) => !e.disabled), V = (e) => {
+      N(() => {
+        var t;
+        (t = g.value[e]) == null || t.focus();
+      });
+    }, X = (e) => {
+      const t = F();
+      if (t.length === 0) return;
+      const c = t.findIndex((v) => v.key === S.value), l = c === -1 ? 0 : c;
+      let i;
+      if (a.direction === "horizontal" && e.key === "ArrowRight" || a.direction === "vertical" && e.key === "ArrowDown" ? i = (l + 1) % t.length : a.direction === "horizontal" && e.key === "ArrowLeft" || a.direction === "vertical" && e.key === "ArrowUp" ? i = (l - 1 + t.length) % t.length : e.key === "Home" ? i = 0 : e.key === "End" && (i = t.length - 1), !P(i)) {
+        e.preventDefault();
+        const v = t[i].key;
+        z("click", v, e), V(v);
+      }
+    }, Y = (e, t) => {
+      z("delete", e, t);
+    }, A = (e) => {
+      const t = e === "previous" ? o.value - B.value : o.value + B.value;
+      f(t);
+    }, G = () => {
+      w(), C.value && C.value.$forceUpdate();
+    };
+    I($, () => {
+      N(() => {
+        const e = new Set(a.tabs.map((t) => String(t.key)));
+        Object.keys(g.value).forEach((t) => {
+          e.has(t) || delete g.value[t];
+        }), w();
+      });
+    }), I([p, s], () => {
+      setTimeout(() => {
+        E();
+      }, 0);
+    }), ie(() => {
+      w();
+    });
+    const H = () => !L.value || !a.showAddButton ? null : r(se, {
+      as: "button",
+      "aria-label": q("tabs.add"),
+      class: u.element("add-btn"),
+      onClick: (e) => z("add", e)
+    }, {
+      default: () => [r(de, null, null)]
+    }), J = h(() => [u.block, u.modifier(a.direction), u.modifier(a.position), u.modifier(`size-${a.size}`), u.modifier(`type-${a.type}`)]), Q = h(() => [`${u.element("tab")}--list`, {
+      [`${u.element("tab")}--list-no-padding`]: !a.headerPadding && ["line", "text"].includes(a.type) && a.direction === "horizontal"
+    }]), Z = h(() => ne({
+      direction: a.direction,
+      type: a.type,
+      offset: o.value
+    })), _ = h(() => [u.element("tab"), {
+      [`${u.element("tab")}-scroll`]: d.value
+    }]);
+    return () => {
+      var e;
+      return r("div", {
+        class: J.value,
+        role: "tablist",
+        "aria-orientation": a.direction,
+        onKeydown: X
+      }, [d.value && r(W, {
+        type: "previous",
+        direction: a.direction,
+        disabled: o.value <= 0,
+        onClick: A
+      }, null), r(O, {
+        onResize: () => w()
+      }, {
+        default: () => [r("div", {
+          class: _.value,
+          ref: n,
+          onWheel: U
+        }, [r(O, {
+          onResize: G
+        }, {
+          default: () => [r("div", {
+            ref: m,
+            class: Q.value,
+            style: Z.value
+          }, [a.tabs.map((t, c) => r(re, {
+            key: t.key,
+            ref: (l) => {
+              l != null && l.$el && (g.value[t.key] = l.$el);
+            },
+            active: t.key === S.value,
+            tab: t,
+            editable: a.editable,
+            onClick: j,
+            onDelete: Y
+          }, {
+            default: () => {
+              var l, i;
+              return [((i = (l = t.slots).title) == null ? void 0 : i.call(l)) ?? t.title];
+            }
+          })), a.type === "line" && b.value && r(ue, {
+            ref: C,
+            activeTabRef: b.value,
+            direction: a.direction,
+            disabled: !1,
+            animation: a.animation
+          }, null)])]
+        }), !d.value && H()])]
+      }), d.value && r(W, {
+        type: "next",
+        direction: a.direction,
+        disabled: o.value >= k.value,
+        onClick: A
+      }, null), r("div", {
+        class: u.element("extra")
+      }, [d.value && H(), (e = R.extra) == null ? void 0 : e.call(R)])]);
+    };
+  }
+});
+export {
+  Re as default
+};

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

@@ -0,0 +1,36 @@
+import n from "./tabs-tab.vue2.js";
+import { resolveComponent as a, openBlock as o, createElementBlock as i, mergeProps as r, createElementVNode as d, normalizeClass as t, renderSlot as c, createBlock as b, withModifiers as m, withCtx as p, createVNode as f, createCommentVNode as u } from "vue";
+import v from "../../_virtual/_plugin-vue_export-helper.js";
+const h = ["tabindex", "aria-selected", "aria-disabled"];
+function k(e, C, N, $, B, V) {
+  const s = a("icon-close"), l = a("icon-hover");
+  return o(), i("div", r({
+    role: "tab",
+    tabindex: e.active && !e.tab.disabled ? 0 : -1,
+    "aria-selected": e.active,
+    "aria-disabled": e.tab.disabled || void 0,
+    class: e.cls
+  }, e.eventHandlers), [
+    d("span", {
+      class: t(e.className.element("title"))
+    }, [
+      c(e.$slots, "default")
+    ], 2),
+    e.editable && e.tab.closable ? (o(), b(l, {
+      key: 0,
+      as: "button",
+      "aria-label": e.t("tabs.close", { title: String(e.tab.title ?? e.tab.key) }),
+      class: t(e.className.element("close-btn")),
+      onClick: m(e.handleDelete, ["stop"])
+    }, {
+      default: p(() => [
+        f(s)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "class", "onClick"])) : u("", !0)
+  ], 16, h);
+}
+const E = /* @__PURE__ */ v(n, [["render", k]]);
+export {
+  E as default
+};