@qi-tian-da-sheng/bin-project-ui 1.0.0

package/es/packages/components/tabs/src/tab-nav-item.vue.mjs

@@ -0,0 +1,74 @@
+import { defineComponent as p, computed as k, openBlock as n, createElementBlock as r, normalizeClass as i, createElementVNode as m, unref as o, Fragment as d, renderList as C, createBlock as b, resolveDynamicComponent as y, createTextVNode as x, toDisplayString as N, createCommentVNode as h } from "vue";
+import B from "../../icon/src/icon.vue.mjs";
+import s from "./tabs-props.mjs";
+import c from "./tab-panel-props.mjs";
+import { isArray as z } from "../../../tools/extra/types.mjs";
+import { useNS as P } from "../../../hooks/useNS.mjs";
+const F = ["draggable"], V = p({
+  name: "PTabNavItem",
+  inheritAttrs: !1
+}), T = /* @__PURE__ */ p({
+  ...V,
+  props: {
+    draggable: {
+      type: Boolean
+    },
+    index: Number,
+    active: {
+      type: Boolean
+    },
+    theme: s.theme,
+    size: s.size,
+    placement: s.placement,
+    label: {
+      type: null
+    },
+    disabled: c.disabled,
+    removable: c.removable,
+    value: c.value,
+    onClick: Function,
+    onRemove: Function
+  },
+  setup(v) {
+    const e = v, u = (t) => {
+      var l;
+      e.disabled || (l = e.onClick) == null || l.call(e, t);
+    }, f = (t) => {
+      var l;
+      t && t.stopPropagation(), (l = e.onRemove) == null || l.call(e, { value: e.value, index: e.index, e: t });
+    }, a = P("tabs__nav"), _ = k(() => [
+      a.b("item"),
+      a.m("card", e.theme === "card"),
+      a.is(e.placement, e.placement !== void 0),
+      a.is(e.disabled, "disabled"),
+      a.is(e.active, "active"),
+      a.size(e.size)
+    ]);
+    return (t, l) => (n(), r("div", {
+      class: i(_.value),
+      draggable: e.draggable,
+      onClick: u
+    }, [
+      m("div", {
+        class: i([o(a).b("item-wrapper"), o(a).is(e.active, "active"), o(a).is(e.disabled, "disabled")])
+      }, [
+        m("span", {
+          class: i(o(a).bb("text", "wrapper"))
+        }, [
+          o(z)(e.label) ? (n(!0), r(d, { key: 0 }, C(e.label, (g) => (n(), b(y(g)))), 256)) : (n(), r(d, { key: 1 }, [
+            x(N(e.label), 1)
+          ], 64))
+        ], 2),
+        e.removable && !e.disabled ? (n(), b(B, {
+          key: 0,
+          class: i(o(a).bb("remove", "btn")),
+          target: "close",
+          onClick: f
+        }, null, 8, ["class"])) : h("", !0)
+      ], 2)
+    ], 10, F));
+  }
+});
+export {
+  T as default
+};

package/es/packages/components/tabs/src/tab-nav-item.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./tab-nav-item.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/tabs/src/tab-nav.vue.mjs

@@ -0,0 +1,223 @@
+import { defineComponent as H, ref as p, computed as C, watch as X, onMounted as ce, openBlock as R, createElementBlock as N, normalizeStyle as Y, normalizeClass as d, unref as l, createElementVNode as g, createBlock as j, Transition as q, withCtx as G, createVNode as O, createCommentVNode as A, resolveDynamicComponent as ve, nextTick as fe, h as w } from "vue";
+import ue from "./tab-nav-bar.vue.mjs";
+import de from "./tab-nav-item.vue.mjs";
+import D from "../../icon/src/icon.vue.mjs";
+import o from "./tabs-props.mjs";
+import me from "../../../hooks/useDragSort.mjs";
+import { isFunction as be } from "../../../tools/extra/types.mjs";
+import { useNS as pe } from "../../../hooks/useNS.mjs";
+const he = H({
+  name: "PTabNav",
+  inheritAttrs: !1
+}), Te = /* @__PURE__ */ H({
+  ...he,
+  props: {
+    theme: o.theme,
+    panels: {
+      type: Array,
+      default: () => []
+    },
+    action: Array,
+    value: o.value,
+    placement: o.placement,
+    scrollPosition: o.scrollPosition,
+    size: o.size,
+    disabled: o.disabled,
+    addable: o.addable,
+    onChange: o.onChange,
+    onAdd: o.onAdd,
+    onRemove: o.onRemove,
+    dragSort: o.dragSort,
+    onDragSort: o.onDragSort
+  },
+  setup(J) {
+    const e = J, m = p(0), L = p(), W = p(), M = p(), P = p(), V = p(), _ = p(), y = p(0), T = () => ({
+      navsContainer: L.value,
+      navsWrap: W.value,
+      leftOperations: M.value,
+      rightOperations: P.value,
+      toRightBtn: V.value,
+      activeTab: _.value
+    }), { setNavsWrap: K } = me(e), S = C(() => m.value > 1), x = C(() => m.value < y.value - 1), c = (t) => (t == null ? void 0 : t.offsetWidth) || 0, Q = (t) => (t == null ? void 0 : t.offsetLeft) || 0, U = (t) => {
+      var n;
+      const { value: a, disabled: r } = t;
+      if (r || e.value === a)
+        return !1;
+      (n = e.onChange) == null || n.call(e, a);
+    }, Z = (t) => {
+      var a;
+      (a = e.onAdd) == null || a.call(e, { e: t });
+    }, ee = ({ value: t, index: a, e: r }) => {
+      var n;
+      (n = e.onRemove) == null || n.call(e, { value: t, index: a, e: r });
+    }, te = (t, a) => {
+      t != null && t.$el && a === e.value && _.value !== t.$el && (_.value = t.$el, z());
+    }, k = (t) => {
+      m.value = Math.max(0, Math.min(t, y.value));
+    }, E = () => {
+      fe(() => {
+        y.value = se(T());
+      });
+    }, z = () => {
+      setTimeout(() => {
+        e.scrollPosition && k(ne(T(), m.value, e.scrollPosition));
+      }, 0);
+    }, ae = (t) => {
+      if (!S.value && !x.value) return;
+      t.preventDefault();
+      const { deltaX: a, deltaY: r } = t;
+      Math.abs(a) > Math.abs(r) ? k(m.value + a) : k(m.value + r);
+    }, F = (t) => {
+      k(le(T(), m.value, t));
+    }, ne = (t, a, r) => {
+      const { navsContainer: n, activeTab: i, rightOperations: v, leftOperations: b } = t, u = c(i), f = c(n), h = Q(i), B = c(v), $ = c(b);
+      if (r === "auto") {
+        if (h - $ < a)
+          return h - $;
+        if (h + u > a + f - B)
+          return h + u - f + B;
+      } else {
+        if (r === "start")
+          return h - $;
+        if (r === "center")
+          return h + (u - f) / 2;
+        if (r === "end")
+          return h + u - f + B;
+      }
+      return a;
+    }, se = (t) => {
+      const { navsWrap: a, navsContainer: r, rightOperations: n, toRightBtn: i } = t, v = c(a), b = c(r), u = c(n), f = c(i);
+      return v - b + u - f;
+    }, le = (t, a, r) => {
+      const { navsContainer: n, activeTab: i } = t, v = c(n), b = c(i);
+      return r === "next" ? a + v - b : a - v + b;
+    };
+    X([() => e.placement, () => e.panels], E), X([() => e.scrollPosition], z), ce(() => {
+      K(W.value), E(), z();
+    });
+    const s = pe("tabs__nav"), I = C(() => {
+      if (e.placement)
+        return ["left", "right"].includes(e.placement.toLowerCase());
+    }), re = C(() => I.value ? {} : {
+      transform: `translate3d(${-m.value}px, 0, 0)`
+    }), oe = C(() => e.addable ? { "min-height": "40px" } : null), ie = () => {
+      const t = e.panels.map((a, r) => {
+        var u;
+        let n = a, i;
+        (u = n == null ? void 0 : n.children) != null && u.label ? i = n.children.label() : be(n.label) ? i = n.label(w) : i = n.label || `选项卡${r + 1}`;
+        let v = e.dragSort;
+        v && n.draggable === !1 && (v = n.draggable);
+        const b = {
+          draggable: v,
+          index: r,
+          active: n.value === e.value,
+          theme: e.theme,
+          size: e.size,
+          placement: e.placement,
+          label: i,
+          disabled: e.disabled || n.disabled,
+          removable: n.removable,
+          value: n.value,
+          ref: (f) => te(f, n.value),
+          onClick: () => U(n),
+          onRemove: (f) => ee(f)
+        };
+        return w(de, { ...b });
+      });
+      return e.theme !== "card" ? [w(ue, {
+        placement: e.placement,
+        value: e.value,
+        navs: t
+      }), t] : t;
+    };
+    return (t, a) => (R(), N("div", {
+      class: d(l(s).namespace),
+      style: Y(oe.value),
+      ref_key: "navsContainerRef",
+      ref: L
+    }, [
+      g("div", {
+        ref_key: "leftOperationsRef",
+        ref: M,
+        class: d([l(s).b("operations"), l(s).b("operations--left")])
+      }, [
+        S.value ? (R(), j(q, {
+          key: 0,
+          name: "fade",
+          mode: "out-in",
+          appear: ""
+        }, {
+          default: G(() => [
+            g("div", {
+              class: d([l(s).b("btn"), l(s).bb("left", "btn"), l(s).size(e.size)]),
+              onClick: a[0] || (a[0] = (r) => F("prev"))
+            }, [
+              O(D, { target: "left" })
+            ], 2)
+          ]),
+          _: 1
+        })) : A("", !0)
+      ], 2),
+      g("div", {
+        ref_key: "rightOperationsRef",
+        ref: P,
+        class: d([l(s).b("operations"), l(s).b("operations--right")])
+      }, [
+        O(q, {
+          name: "fade",
+          mode: "out-in",
+          appear: ""
+        }, {
+          default: G(() => [
+            x.value ? (R(), N("div", {
+              key: 0,
+              class: d([l(s).b("btn"), l(s).bb("right", "btn"), l(s).size(e.size)]),
+              onClick: a[1] || (a[1] = (r) => F("next"))
+            }, [
+              O(D, { target: "right" })
+            ], 2)) : A("", !0)
+          ]),
+          _: 1
+        }),
+        e.addable ? (R(), N("div", {
+          key: 0,
+          class: d([l(s).b("btn"), l(s).bb("add", "btn"), l(s).size(e.size)]),
+          ref_key: "toRightBtnRef",
+          ref: V,
+          onClick: Z
+        }, [
+          O(D, { target: "add" })
+        ], 2)) : A("", !0)
+      ], 2),
+      g("div", {
+        class: d([
+          l(s).b("container"),
+          l(s).m("card", e.theme === "card"),
+          l(s).is(e.placement, e.placement !== void 0),
+          l(s).is("addable", e.addable)
+        ])
+      }, [
+        g("div", {
+          class: d([l(s).b("scroll"), l(s).is(S.value || x.value, "scrollable")]),
+          onWheel: ae
+        }, [
+          g("div", {
+            class: d([
+              l(s).b("wrap"),
+              l(s).is("smooth", !0),
+              l(s).is("vertical", I.value)
+            ]),
+            style: Y(re.value),
+            ref_key: "navsWrapRef",
+            ref: W
+          }, [
+            (R(), j(ve(ie)))
+          ], 6)
+        ], 34)
+      ], 2)
+    ], 6));
+  }
+});
+export {
+  Te as default
+};

package/es/packages/components/tabs/src/tab-nav.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./tab-nav.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/tabs/src/tab-panel-props.mjs

@@ -0,0 +1,59 @@
+const e = {
+  /**
+   * 用于自定义选项卡导航，同 panel
+   */
+  default: {
+    type: Function
+  },
+  /**
+   * 选项卡内容隐藏时是否销毁
+   */
+  destroyOnHide: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * 是否禁用当前选项卡
+   */
+  disabled: Boolean,
+  /**
+   * 选项卡组件开启允许拖动排序时，当前选项卡是否允许拖动
+   */
+  draggable: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * 选项卡名称，可自定义选项卡导航内容
+   */
+  label: {
+    type: [String, Function]
+  },
+  /**
+   * 是否启用选项卡懒加载
+   */
+  lazy: Boolean,
+  /**
+   * 用于自定义选项卡面板内容
+   */
+  panel: {
+    type: [String, Function]
+  },
+  /**
+   * 当前选项卡是否允许移除
+   */
+  removable: Boolean,
+  /**
+   * 选项卡的值，唯一标识
+   */
+  value: {
+    type: [String, Number]
+  },
+  /**
+   * 点击删除按钮时触发
+   */
+  onRemove: Function
+};
+export {
+  e as default
+};

package/es/packages/components/tabs/src/tab-panel.vue.mjs

@@ -0,0 +1,36 @@
+import { defineComponent as c, inject as v, computed as s, ref as f, watch as d, withDirectives as _, openBlock as r, createElementBlock as l, normalizeClass as C, Fragment as P, renderList as h, unref as y, createBlock as k, resolveDynamicComponent as N, vShow as b, createCommentVNode as w } from "vue";
+import B from "./tab-panel-props.mjs";
+import { useContent as D } from "../../../tools/element/render-node.mjs";
+import { useNS as x } from "../../../hooks/useNS.mjs";
+const z = c({
+  name: "PTabPanel",
+  inheritAttrs: !1
+}), H = /* @__PURE__ */ c({
+  ...z,
+  props: { ...B },
+  setup(u) {
+    const n = u, i = D()("default", "panel"), a = v("tabs"), e = s(() => n.value === (a == null ? void 0 : a.activeValue.value)), t = f(n.lazy ? !0 : !e.value);
+    d(
+      e,
+      () => {
+        e.value ? t.value && (t.value = !1) : n.destroyOnHide || (t.value = !0);
+      },
+      { immediate: !0 }
+    );
+    const o = x("tabs-panel"), m = s(() => [
+      o.namespace,
+      o.is(e.value, "active")
+    ]);
+    return (S, V) => t.value ? w("", !0) : _((r(), l("div", {
+      key: 0,
+      class: C(m.value)
+    }, [
+      (r(!0), l(P, null, h(y(i), (p) => (r(), k(N(p)))), 256))
+    ], 2)), [
+      [b, e.value]
+    ]);
+  }
+});
+export {
+  H as default
+};

package/es/packages/components/tabs/src/tab-panel.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./tab-panel.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/tabs/src/tabs-props.mjs

@@ -0,0 +1,96 @@
+const e = {
+  /**
+   * @description 选项卡右侧的操作区域
+   */
+  action: {
+    type: [String, Function]
+  },
+  /**
+   * @description 选项卡是否可增加
+   */
+  addable: Boolean,
+  /**
+   * @description 是否禁用选项卡
+   */
+  disabled: Boolean,
+  /**
+   * @description 是否开启拖拽调整顺序
+   */
+  dragSort: Boolean,
+  /**
+   * @description 选项卡列表
+   */
+  list: {
+    type: Array
+  },
+  /**
+   * @description 选项卡位置
+   */
+  placement: {
+    type: String,
+    default: "top",
+    validator(t) {
+      return t ? ["left", "top", "bottom", "right"].includes(t) : !0;
+    }
+  },
+  /**
+   * @description Tab 较多的时候，选中滑块滚动最终停留的位置
+   */
+  scrollPosition: {
+    type: String,
+    default: "auto",
+    validator(t) {
+      return t ? ["auto", "start", "center", "end"].includes(t) : !0;
+    }
+  },
+  /**
+   * @description 组件尺寸
+   */
+  size: {
+    type: String,
+    default: "normal",
+    validator(t) {
+      return t ? ["small", "normal", "large"].includes(t) : !0;
+    }
+  },
+  /**
+   * @description 选项卡风格，包含 默认风格 和 卡片风格两种
+   */
+  theme: {
+    type: String,
+    default: "normal",
+    validator(t) {
+      return t ? ["normal", "card"].includes(t) : !0;
+    }
+  },
+  /**
+   * @description 激活的选项卡值
+   */
+  value: {
+    type: [String, Number],
+    default: void 0
+  },
+  modelValue: {
+    type: [String, Number],
+    default: void 0
+  },
+  /**
+   * @description 添加选项卡时触发
+   */
+  onAdd: Function,
+  /**
+   * @description 激活的选项卡发生变化时触发
+   */
+  onChange: Function,
+  /**
+   * @description 拖拽排序时触发
+   */
+  onDragSort: Function,
+  /**
+   * @description 删除选项卡时触发
+   */
+  onRemove: Function
+};
+export {
+  e as default
+};

package/es/packages/components/tabs/src/tabs.vue.mjs

@@ -0,0 +1,97 @@
+import { defineComponent as A, useSlots as B, toRefs as E, provide as x, openBlock as l, createElementBlock as h, normalizeClass as F, unref as $, Fragment as C, createBlock as u, resolveDynamicComponent as f, h as m } from "vue";
+import j from "./tab-nav.vue.mjs";
+import H from "./tab-panel.vue.mjs";
+import I from "./tabs-props.mjs";
+import M from "../../../hooks/useVModel.mjs";
+import { usePNode as O } from "../../../tools/element/render-node.mjs";
+import { useNS as q } from "../../../hooks/useNS.mjs";
+import { isArray as S } from "../../../tools/extra/types.mjs";
+const w = A({
+  name: "PTabs",
+  inheritAttrs: !1
+}), Y = /* @__PURE__ */ A({
+  ...w,
+  props: { ...I },
+  setup(T) {
+    const e = T, b = O(), p = B(), { value: k, modelValue: y } = E(e), [v, D] = M(k, y, void 0, e.onChange);
+    x("tabs", { activeValue: v });
+    const V = (t) => {
+      D(t);
+    }, N = (t) => {
+      var n;
+      (n = e.onAdd) == null || n.call(e, { e: t });
+    }, R = ({ value: t, index: n, e: a }) => {
+      var c;
+      (c = e.onRemove) == null || c.call(e, { value: t, index: n, e: a });
+    }, z = (t) => {
+      var n;
+      (n = e.onDragSort) == null || n.call(e, t);
+    }, g = () => {
+      var a;
+      const t = b("default") || ((a = p.default) == null ? void 0 : a.call(p, {}));
+      if (!t || !S(t))
+        return [];
+      const n = (c) => {
+        let s = [];
+        return c.forEach((o) => {
+          var i;
+          const r = o;
+          r.children && S(r.children) ? s = s.concat(n(r.children)) : ((i = r.type) == null ? void 0 : i.name) === "PTabPanel" && s.push(o);
+        }), s;
+      };
+      return n(t);
+    }, d = q("tabs"), _ = () => {
+      var s;
+      const t = ((s = e.list) != null && s.length ? e.list : g()) || [], n = b("action"), a = t.map((o) => {
+        const r = o;
+        return o.props && Object.keys(o.props).forEach((i) => {
+          r[i] = o.props[i];
+        }), r;
+      }), c = {
+        theme: e.theme,
+        value: v.value,
+        size: e.size,
+        disabled: e.disabled,
+        placement: e.placement,
+        scrollPosition: e.scrollPosition,
+        addable: e.addable,
+        panels: a,
+        action: n,
+        dragSort: e.dragSort,
+        onDragSort: (o) => z(o),
+        onChange: (o) => V(o),
+        onAdd: (o) => N(o),
+        onRemove: (o) => R(o)
+      };
+      return m("div", {
+        class: [
+          d.e("header"),
+          d.is(e.placement)
+        ]
+      }, [
+        m(j, { ...c })
+      ]);
+    }, P = () => {
+      var n;
+      const t = g();
+      if ((n = e.list) != null && n.length)
+        return e.list.map((a) => m(H, { ...a }));
+      if (t && t.length)
+        return m("div", { class: d.e("content") }, t.map((a) => m(a, {})));
+    };
+    return (t, n) => (l(), h("div", {
+      class: F($(d).namespace)
+    }, [
+      e.placement !== "bottom" ? (l(), h(C, { key: 0 }, [
+        (l(), u(f(_))),
+        (l(), u(f(P)))
+      ], 64)) : (l(), h(C, { key: 1 }, [
+        (l(), u(f(P))),
+        (l(), u(f(_)))
+      ], 64))
+    ], 2));
+  }
+});
+export {
+  Y as default
+};

package/es/packages/components/tabs/src/tabs.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./tabs.vue.mjs";
+export {
+  f as default
+};

package/es/packages/components/tag/index.mjs

@@ -0,0 +1,6 @@
+import o from "./src/tag.vue.mjs";
+import { withInstall as t } from "../../tools/vn/with-install.mjs";
+const i = t(o);
+export {
+  i as Tag
+};

package/es/packages/components/tag/src/tag.mjs

@@ -0,0 +1,58 @@
+const t = {
+  /**
+   * @property {string} type - 标签的类型
+   * @description 控制标签的颜色主题
+   * @default undefined
+   * @values 'primary' | 'success' | 'info' | 'warning' | 'danger'
+   * @example
+   * <p-tag type="primary">主要</p-tag>
+   * <p-tag type="success">成功</p-tag>
+   * <p-tag type="danger">危险</p-tag>
+   */
+  type: String,
+  /**
+   * @property {ElementSizes} size - 标签的大小
+   * @description 控制标签的尺寸
+   * @default undefined (默认尺寸)
+   * @values 'small' | 'large'
+   * @example
+   * <p-tag size="small">小标签</p-tag>
+   * <p-tag size="large">大标签</p-tag>
+   */
+  size: String,
+  /**
+   * @property {string} variant - 标签的主题风格
+   * @description 控制标签的视觉风格
+   * @default undefined (默认浅色)
+   * @values 'dark' | 'light'
+   * - dark: 深色主题，深色背景 + 白色文字
+   * - light: 浅色主题，浅色背景 + 深色文字
+   * @example
+   * <p-tag variant="dark">深色标签</p-tag>
+   * <p-tag variant="light">浅色标签</p-tag>
+   */
+  variant: String,
+  /**
+   * @property {string} status - 标签的形状状态
+   * @description 控制标签的外观形状
+   * @default undefined (默认直角)
+   * @values 'round'
+   * - round: 圆角标签
+   * @example
+   * <p-tag status="round">圆角标签</p-tag>
+   */
+  status: String,
+  /**
+   * @property {boolean} closable - 是否可以被关闭
+   * @description 控制标签是否显示关闭按钮
+   * @default false
+   * @example
+   * <p-tag :closable="true" @close="handleClose">
+   *   可关闭标签
+   * </p-tag>
+   */
+  closable: Boolean
+};
+export {
+  t as PTagProps
+};