@transsionfe/semi-ui-vue 0.0.6 → 0.0.7

package/lib/es/components/tabs/TabBar.vue.js

@@ -1,486 +0,0 @@
-import { defineComponent as le, useSlots as ae, ref as K, onMounted as ce, onBeforeUnmount as de, watch as me, computed as O, openBlock as S, createElementBlock as j, normalizeStyle as ue, normalizeClass as ye, createBlock as I, unref as H, resolveDynamicComponent as G, Fragment as be, renderList as fe, createCommentVNode as we, h as d, nextTick as h } from "vue";
-import he from "classnames";
-import { cssClasses as a } from "@douyinfe/semi-foundation/tabs/constants";
-import { getUuidv4 as ve } from "@douyinfe/semi-foundation/utils/uuid";
-import { isEmpty as Be } from "lodash-es";
-import x from "./TabItem.vue.js";
-import _ from "../dropdown/index.js";
-import U from "../button/Button.vue.js";
-import "../button/button.css";
-import Te from "../overflowList/OverflowList.vue.js";
-import "../overflowList/overflowList.css";
-import ge from "../icons/icons/IconChevronLeft.vue.js";
-import Ae from "../icons/icons/IconChevronRight.vue.js";
-import pe from "../icons/icons/IconChevronDown.vue.js";
-const Ke = ["aria-orientation", "data-uuid"], Ee = /* @__PURE__ */ le({
-  name: "TabBar",
-  __name: "TabBar",
-  props: {
-    activeKey: {},
-    className: {},
-    collapsible: { type: Boolean },
-    list: {},
-    onTabClick: {},
-    showRestInDropdown: { type: Boolean, default: !0 },
-    size: {},
-    style: {},
-    tabBarExtraContent: {},
-    tabPosition: {},
-    type: {},
-    dropdownClassName: {},
-    dropdownStyle: {},
-    closable: { type: Boolean },
-    deleteTabItem: {},
-    handleKeyDown: {},
-    more: {},
-    onVisibleTabsChange: {},
-    visibleTabsStyle: {},
-    arrowPosition: {},
-    renderArrow: {},
-    dropdownProps: {}
-  },
-  setup(u) {
-    const n = u, z = ae(), B = K(""), N = K(!0), f = K(0);
-    ce(() => {
-      B.value = ve();
-    }), de(() => {
-      g.value.forEach((e) => {
-        e.disconnect();
-      }), g.value.clear();
-    }), me(
-      () => n.activeKey,
-      (e, o) => {
-        e !== o && n.collapsible && L();
-      }
-    );
-    const X = O(() => {
-      const { type: e, className: o, tabPosition: t, collapsible: i } = n;
-      return [
-        o,
-        {
-          [a.TABS_BAR]: !0,
-          [a.TABS_BAR_LINE]: e === "line",
-          [a.TABS_BAR_CARD]: e === "card",
-          [a.TABS_BAR_BUTTON]: e === "button",
-          [a.TABS_BAR_SLASH]: e === "slash",
-          [`${a.TABS_BAR}-${t}`]: t,
-          [`${a.TABS_BAR}-collapse`]: i
-        }
-      ];
-    }), T = (e) => e === n.activeKey, y = (e) => `${e}-bar`, J = (e) => e.replace(/-bar$/, ""), k = (e, o) => {
-      var t;
-      (t = n.onTabClick) == null || t.call(n, e, o);
-    }, Q = (e) => d("span", null, e), M = () => {
-      var b;
-      const { tabBarExtraContent: e, type: o, size: t } = n;
-      if (!e)
-        return null;
-      const i = typeof e == "function" ? e() : e, s = { float: "right" }, l = ((b = i == null ? void 0 : i.props) == null ? void 0 : b.style) || {}, r = [
-        a.TABS_BAR_EXTRA,
-        {
-          [`${a.TABS_BAR}-${o}-extra`]: o,
-          [`${a.TABS_BAR}-${o}-extra-${t}`]: t
-        }
-      ], c = { ...s, ...l };
-      return d(
-        "div",
-        {
-          class: r,
-          style: c,
-          "x-semi-prop": "tabBarExtraContent"
-        },
-        i
-      );
-    }, E = (e, o = "nearest", t) => {
-      const i = document.querySelector(
-        `[data-uuid="${B.value}"] .${a.TABS_TAB}[data-scrollkey="${e}"]`
-      );
-      i && i.scrollIntoView({
-        behavior: t || "smooth",
-        block: "nearest",
-        inline: o
-      });
-    }, L = (e, o) => {
-      const t = y(n.activeKey);
-      E(t, e, o);
-    }, P = (e, o, t) => {
-      if (!e.length)
-        return;
-      let i;
-      if (o === "start")
-        i = e[e.length - 1];
-      else {
-        const r = document.querySelector(
-          `[data-uuid="${B.value}"] .${a.TABS_BAR}-overflow-list .semi-overflow-list-scroll-wrapper`
-        );
-        if (r) {
-          const c = r.scrollLeft, b = r.clientWidth, v = c + b;
-          for (let w = 0; w < e.length; w++) {
-            const A = e[w], D = y(A.itemKey), C = document.querySelector(
-              `[data-uuid="${B.value}"] .${a.TABS_TAB}[data-scrollkey="${D}"]`
-            );
-            if (C) {
-              const V = r.getBoundingClientRect(), R = C.getBoundingClientRect(), p = R.left - V.left + c, $ = p + R.width;
-              if (!(p >= c && $ <= v + 2) && p >= c && $ > v) {
-                i = A;
-                break;
-              }
-            }
-          }
-          i || (i = e[0]);
-        } else
-          i = e[0];
-      }
-      if (!i)
-        return;
-      const s = y(i.itemKey);
-      E(s, o === "start" ? "start" : "end");
-    }, W = K(/* @__PURE__ */ new Map()), q = K(/* @__PURE__ */ new Map()), g = K(/* @__PURE__ */ new Map()), Y = (e, o) => {
-      if (q.value.set(e, o), o)
-        h(() => {
-          const i = (() => {
-            const s = document.querySelector(`[data-uuid="${B.value}"]`);
-            if (!s) return null;
-            const l = s.getBoundingClientRect(), r = document.querySelectorAll(".semi-portal-inner");
-            for (const c of Array.from(r)) {
-              const b = c, v = b.getBoundingClientRect();
-              if (!(b.querySelector(".semi-dropdown-menu") !== null)) continue;
-              if (Math.abs(v.top - l.bottom) < 50 || Math.abs(v.bottom - l.top) < 50)
-                return b;
-            }
-            return null;
-          })();
-          if (i) {
-            const s = g.value.get(e);
-            s && s.disconnect();
-            const l = new ResizeObserver((c) => {
-              requestAnimationFrame(() => {
-                h(() => {
-                  f.value++;
-                });
-              });
-            });
-            l.observe(i), g.value.set(e, l);
-            const r = () => {
-              h(() => {
-                f.value++;
-              });
-            };
-            setTimeout(r, 50), setTimeout(r, 150), setTimeout(r, 300);
-          } else {
-            const s = () => {
-              h(() => {
-                f.value++;
-              });
-            };
-            setTimeout(s, 100), setTimeout(s, 200), setTimeout(s, 350);
-          }
-        });
-      else {
-        const t = g.value.get(e);
-        t && (t.disconnect(), g.value.delete(e));
-      }
-    }, Z = (e, o, t) => {
-      var $;
-      const i = e.map((m) => m.itemKey).join(","), s = (($ = W.value.get(t)) == null ? void 0 : $.map((m) => m.itemKey).join(",")) || "";
-      i !== s && (W.value.set(t, e), q.value.get(t) ? h(() => {
-        setTimeout(() => {
-          h(() => {
-            f.value++;
-          });
-        }, 50);
-      }) : h(() => {
-        f.value++;
-      }));
-      const l = [
-        {
-          [`${a.TABS_BAR}-arrow-${t}`]: t,
-          [`${a.TABS_BAR}-arrow`]: !0
-        }
-      ], r = {
-        flexShrink: 0,
-        flexGrow: 0
-      };
-      if (Be(e))
-        return d(
-          "div",
-          {
-            role: "presentation",
-            class: l,
-            style: r
-          },
-          [
-            d(U, {
-              disabled: !0,
-              icon: o,
-              theme: "borderless"
-            })
-          ]
-        );
-      const { dropdownClassName: c, dropdownStyle: b, showRestInDropdown: v, dropdownProps: w } = n, A = !e.length, D = d(
-        _.Menu,
-        null,
-        () => e.map((m) => {
-          const F = m.icon ? Q(m.icon) : null;
-          return d(
-            _.Item,
-            {
-              key: m.itemKey,
-              onClick: (se) => k(m.itemKey, se),
-              active: T(m.itemKey)
-            },
-            () => [F, m.tab]
-          );
-        })
-      ), C = d(
-        "div",
-        {
-          role: "presentation",
-          class: l,
-          style: {
-            ...r,
-            display: "inline-block"
-          },
-          onClick: (m) => {
-            P(e, t);
-          }
-        },
-        [
-          d(U, {
-            disabled: A,
-            icon: o,
-            theme: "borderless"
-          })
-        ]
-      ), V = [
-        c,
-        {
-          [`${a.TABS_BAR}-dropdown`]: !0
-        }
-      ], R = (w == null ? void 0 : w[t]) ?? {}, p = R.onVisibleChange;
-      return v ? d(
-        _,
-        {
-          ...R,
-          key: `${f.value}-${t}`,
-          rePosKey: `${f.value}-${t}`,
-          className: he(V),
-          clickToHide: !0,
-          clickTriggerToHide: !0,
-          position: t === "start" ? "bottomLeft" : "bottomRight",
-          render: A ? null : D,
-          showTick: !0,
-          style: b,
-          trigger: "hover",
-          disableFocusListener: !0,
-          onVisibleChange: (m) => {
-            Y(t, m), p && p(m);
-          }
-        },
-        () => C
-      ) : C;
-    }, ee = (e) => e.map((o, t) => {
-      const i = t === 0 ? "start" : "end", s = d(t === 0 ? ge : Ae), l = Z(o, s, i);
-      if (z.arrow) {
-        const r = z.arrow({
-          items: o,
-          pos: i,
-          handleArrowClick: () => P(o, i),
-          defaultNode: l
-        });
-        if (r && Array.isArray(r) && r.length > 0) {
-          const c = r[0];
-          if (c && typeof c == "object" && c.props) {
-            const b = c.props.style || {};
-            c.props.style = {
-              ...b,
-              flexShrink: 0,
-              flexGrow: 0
-            };
-          }
-          return c;
-        }
-        return l;
-      }
-      if (n.renderArrow) {
-        const r = n.renderArrow(o, i, () => P(o, i), l);
-        if (r && typeof r == "object" && r.props) {
-          const c = r.props.style || {};
-          r.props.style = {
-            ...c,
-            flexShrink: 0,
-            flexGrow: 0
-          };
-        }
-        return r;
-      }
-      return l;
-    }), te = (e, o) => d(x, {
-      key: y(e.itemKey),
-      "data-scrollkey": y(e.itemKey),
-      disabled: e.disabled,
-      icon: e.icon,
-      itemKey: e.itemKey,
-      tab: e.tab,
-      closable: e.closable,
-      selected: T(e.itemKey),
-      size: n.size,
-      type: n.type,
-      tabPosition: n.tabPosition,
-      handleKeyDown: n.handleKeyDown,
-      deleteTabItem: n.deleteTabItem,
-      onClick: k
-    }), oe = O(() => n.list.map((e) => {
-      const { itemKey: o } = e;
-      return {
-        key: y(o),
-        active: T(o),
-        ...e
-      };
-    })), re = (e) => {
-      var t;
-      const o = /* @__PURE__ */ new Map();
-      e.forEach((i, s) => {
-        o.set(J(s), i);
-      }), N.value && Array.from(o.values()).some((s) => s) && (L("nearest", "auto"), N.value = !1), h(() => {
-        f.value++;
-      }), (t = n.onVisibleTabsChange) == null || t.call(n, o);
-    }, ie = () => {
-      const { list: e, more: o, type: t } = n;
-      let i = [], s = d(
-        "div",
-        {
-          class: [
-            {
-              [`${a.TABS_BAR}-more-trigger`]: !0,
-              [`${a.TABS_BAR}-more-trigger-${t}`]: !0
-            }
-          ],
-          style: {
-            marginLeft: t === "line" ? "24px" : t === "card" || t === "button" ? "8px" : "0",
-            fontSize: "14px"
-          }
-        },
-        [
-          d(
-            "div",
-            {
-              class: `${a.TABS_BAR}-more-trigger-content`,
-              style: {
-                alignItems: "center"
-              }
-            },
-            [
-              d("div", null, "更多"),
-              // TODO: Add locale support
-              d(pe, {
-                class: `${a.TABS_BAR}-more-trigger-content-icon`
-              })
-            ]
-          )
-        ]
-      ), l;
-      if (typeof o == "number")
-        l = e.length - Math.min(o, e.length), i = e.slice(0, l).map(
-          (r) => d(x, {
-            key: y(r.itemKey),
-            "data-scrollkey": y(r.itemKey),
-            disabled: r.disabled,
-            icon: r.icon,
-            itemKey: r.itemKey,
-            tab: r.tab,
-            closable: r.closable,
-            selected: T(r.itemKey),
-            size: n.size,
-            type: n.type,
-            tabPosition: n.tabPosition,
-            handleKeyDown: n.handleKeyDown,
-            deleteTabItem: n.deleteTabItem,
-            onClick: k
-          })
-        );
-      else if (typeof o == "object")
-        l = e.length - Math.min(o.count, e.length), i = e.slice(0, l).map(
-          (r) => d(x, {
-            key: y(r.itemKey),
-            "data-scrollkey": y(r.itemKey),
-            disabled: r.disabled,
-            icon: r.icon,
-            itemKey: r.itemKey,
-            tab: r.tab,
-            closable: r.closable,
-            selected: T(r.itemKey),
-            size: n.size,
-            type: n.type,
-            tabPosition: n.tabPosition,
-            handleKeyDown: n.handleKeyDown,
-            deleteTabItem: n.deleteTabItem,
-            onClick: k
-          })
-        ), o.render && (s = o.render());
-      else if (o !== void 0)
-        throw new Error("[Semi Tabs]: invalid tab props format: more");
-      return d("div", null, [
-        ...i,
-        ne(e.slice(l), o == null ? void 0 : o.dropdownProps, s)
-      ]);
-    }, ne = (e, o, t) => d(
-      _,
-      {
-        trigger: "hover",
-        showTick: !0,
-        position: "bottomLeft",
-        class: `${a.TABS_BAR}-more-dropdown-${n.type}`,
-        clickToHide: !0,
-        menu: e.map((i) => ({
-          node: "item",
-          name: i.tab,
-          icon: i.icon,
-          onClick: (s) => n.onTabClick(i.itemKey, s),
-          active: n.activeKey === i.itemKey
-        })),
-        ...o
-      },
-      () => t
-    );
-    return (e, o) => (S(), j("div", {
-      role: "tablist",
-      "aria-orientation": u.tabPosition === "left" ? "vertical" : "horizontal",
-      class: ye(X.value),
-      style: ue(u.style),
-      "data-uuid": B.value
-    }, [
-      u.collapsible ? (S(), I(H(Te), {
-        key: 0,
-        items: oe.value,
-        overflowRenderDirection: u.arrowPosition,
-        wrapperStyle: u.visibleTabsStyle,
-        overflowRenderer: ee,
-        renderMode: "scroll",
-        className: `${H(a).TABS_BAR}-overflow-list`,
-        style: { minWidth: 0, maxWidth: "100%" },
-        visibleItemRenderer: te,
-        onVisibleStateChange: re
-      }, null, 8, ["items", "overflowRenderDirection", "wrapperStyle", "className", "visibleItemRenderer"])) : u.more ? (S(), I(G(ie()), { key: 1 })) : (S(!0), j(be, { key: 2 }, fe(u.list, (t) => (S(), I(x, {
-        key: y(t.itemKey),
-        "data-scrollkey": y(t.itemKey),
-        disabled: t.disabled,
-        icon: t.icon,
-        itemKey: t.itemKey,
-        tab: t.tab,
-        closable: t.closable,
-        selected: T(t.itemKey),
-        size: u.size,
-        type: u.type,
-        tabPosition: u.tabPosition,
-        handleKeyDown: u.handleKeyDown,
-        deleteTabItem: u.deleteTabItem,
-        onClick: k
-      }, null, 8, ["data-scrollkey", "disabled", "icon", "itemKey", "tab", "closable", "selected", "size", "type", "tabPosition", "handleKeyDown", "deleteTabItem"]))), 128)),
-      M() ? (S(), I(G(M()), { key: 3 })) : we("", !0)
-    ], 14, Ke));
-  }
-});
-export {
-  Ee as default
-};

package/lib/es/components/tabs/TabItem.vue.js

@@ -1,89 +0,0 @@
-import { defineComponent as v, ref as w, computed as r, isVNode as f, openBlock as i, createElementBlock as o, normalizeClass as s, unref as d, createBlock as m, resolveDynamicComponent as u, Fragment as k, createTextVNode as C, toDisplayString as $, createCommentVNode as T } from "vue";
-import { cssClasses as b } from "@douyinfe/semi-foundation/tabs/constants";
-import N from "../icons/icons/IconClose.vue.js";
-const V = ["id", "data-tabkey", "data-scrollkey", "aria-controls", "aria-disabled", "aria-selected", "tabindex"], P = /* @__PURE__ */ v({
-  __name: "TabItem",
-  props: {
-    tab: {},
-    icon: {},
-    size: {},
-    type: {},
-    tabPosition: {},
-    selected: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    itemKey: {},
-    handleKeyDown: {},
-    deleteTabItem: {},
-    onClick: {}
-  },
-  setup(a, { expose: B }) {
-    const t = a, c = w(), n = b.TABS_TAB, K = r(() => {
-      const { icon: e } = t;
-      return f(e) || typeof e == "function" || typeof e == "object" && e !== null && ("__name" in e || "setup" in e || "render" in e || "name" in e || "props" in e);
-    }), I = r(() => {
-      const { type: e, tabPosition: l, selected: D, disabled: S, size: y } = t;
-      return [
-        n,
-        `${n}-${e}`,
-        `${n}-${l}`,
-        `${n}-single`,
-        {
-          [b.TABS_TAB_ACTIVE]: D,
-          [b.TABS_TAB_DISABLED]: S,
-          [`${n}-small`]: y === "small",
-          [`${n}-medium`]: y === "medium"
-        }
-      ];
-    }), A = (e) => {
-      var l;
-      (l = t.handleKeyDown) == null || l.call(t, e, t.itemKey, t.closable);
-    }, h = (e) => {
-      var l;
-      t.disabled || (l = t.onClick) == null || l.call(t, t.itemKey, e);
-    }, x = (e) => {
-      var l;
-      (l = t.deleteTabItem) == null || l.call(t, t.itemKey, e);
-    };
-    return B({
-      tabItemRef: c,
-      $el: c
-    }), (e, l) => (i(), o("div", {
-      id: `semiTab${a.itemKey}`,
-      ref_key: "tabItemRef",
-      ref: c,
-      class: s(I.value),
-      role: "tab",
-      "data-tabkey": `semiTab${a.itemKey}`,
-      "data-scrollkey": `${a.itemKey}-bar`,
-      "aria-controls": `semiTabPanel${a.itemKey}`,
-      "aria-disabled": a.disabled ? "true" : "false",
-      "aria-selected": a.selected ? "true" : "false",
-      tabindex: a.selected ? 0 : -1,
-      onKeydown: A,
-      onClick: h
-    }, [
-      a.icon ? (i(), o("span", {
-        key: 0,
-        class: s(`${d(n)}-icon`)
-      }, [
-        K.value ? (i(), m(u(a.icon), { key: 0 })) : (i(), o(k, { key: 1 }, [
-          C($(a.icon), 1)
-        ], 64))
-      ], 2)) : T("", !0),
-      f(a.tab) ? (i(), m(u(a.tab), { key: 1 })) : (i(), o(k, { key: 2 }, [
-        C($(a.tab), 1)
-      ], 64)),
-      a.closable ? (i(), m(d(N), {
-        key: 3,
-        "aria-label": "Close",
-        role: "button",
-        class: s(`${d(n)}-icon-close`),
-        onClick: x
-      }, null, 8, ["class"])) : T("", !0)
-    ], 42, V));
-  }
-});
-export {
-  P as default
-};

package/lib/es/components/tabs/TabPane.vue.js

@@ -1,77 +0,0 @@
-import { defineComponent as I, ref as v, inject as S, computed as r, watch as p, openBlock as B, createElementBlock as h, normalizeStyle as K, normalizeClass as C, createVNode as O, withCtx as M, createElementVNode as R, mergeProps as V, unref as H, renderSlot as k, createCommentVNode as W } from "vue";
-import { cssClasses as a } from "@douyinfe/semi-foundation/tabs/constants";
-import { TabsContextKey as $ } from "./context.js";
-import g from "../_cssAnimation/index.vue.js";
-const z = ["id", "aria-labelledby", "aria-hidden", "tabindex"], F = /* @__PURE__ */ I({
-  name: "TabPane",
-  __name: "TabPane",
-  props: {
-    className: {},
-    disabled: { type: Boolean },
-    icon: {},
-    itemKey: {},
-    style: {},
-    tab: {},
-    closable: { type: Boolean },
-    tabIndex: {}
-  },
-  setup(s, { expose: _ }) {
-    const l = s, A = v(), c = v(!1), t = S($, {}), n = r(() => t.activeKey === l.itemKey);
-    n.value && (c.value = !0), p(n, (e) => {
-      e && (c.value = !0);
-    });
-    const T = r(() => [
-      l.className,
-      {
-        [a.TABS_PANE_INACTIVE]: !n.value,
-        [a.TABS_PANE_ACTIVE]: n.value,
-        [a.TABS_PANE]: !0
-      }
-    ]), y = r(() => {
-      const { lazyRender: e } = t;
-      return e ? c.value : !0;
-    }), b = (e, m, i, d) => {
-      if (m && e && Array.isArray(i) && i.length) {
-        const u = i.findIndex((o) => o.itemKey === e), f = i.findIndex((o) => o.itemKey === m), x = i.findIndex((o) => o.itemKey === d);
-        return u === f ? x > u : f < u;
-      }
-      return !1;
-    }, N = r(() => {
-      const e = b(t.activeKey, l.itemKey, t.panes || [], t.prevActiveKey);
-      return t.tabPosition === "top" ? e ? a.TABS_PANE_ANIMATE_RIGHT_SHOW : a.TABS_PANE_ANIMATE_LEFT_SHOW : e ? a.TABS_PANE_ANIMATE_BOTTOM_SHOW : a.TABS_PANE_ANIMATE_TOP_SHOW;
-    }), E = r(() => !(t.panes || []).find((e) => e.itemKey === t.prevActiveKey)), P = r(() => t.tabPaneMotion && n.value && !E.value && !t.forceDisableMotion);
-    return _({
-      tabPaneRef: A
-    }), (e, m) => (B(), h("div", {
-      id: `semiTabPanel${s.itemKey}`,
-      ref_key: "tabPaneRef",
-      ref: A,
-      role: "tabpanel",
-      "aria-labelledby": `semiTab${s.itemKey}`,
-      class: C(T.value),
-      style: K(s.style),
-      "aria-hidden": n.value ? "false" : "true",
-      tabindex: s.tabIndex || 0,
-      "x-semi-prop": "children"
-    }, [
-      O(g, {
-        motion: P.value,
-        animationState: n.value ? "enter" : "leave",
-        startClassName: N.value
-      }, {
-        default: M(({ animationClassName: i, animationEventsNeedBind: d }) => [
-          R("div", V({
-            class: [H(a).TABS_PANE_MOTION_OVERLAY, i],
-            "x-semi-prop": "children"
-          }, d), [
-            y.value ? k(e.$slots, "default", { key: 0 }) : W("", !0)
-          ], 16)
-        ]),
-        _: 3
-      }, 8, ["motion", "animationState", "startClassName"])
-    ], 14, z));
-  }
-});
-export {
-  F as default
-};