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

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

@@ -0,0 +1,83 @@
+import { defineComponent as p, useSlots as v, ref as a, openBlock as b, createBlock as _, mergeProps as w, unref as t, createSlots as B, withCtx as f, createVNode as $, normalizeClass as h, renderSlot as O, nextTick as P } from "vue";
+import S from "../../floating/src/floating.vue.mjs";
+import T from "../../message/src/message-box.vue.mjs";
+import { PPopconfirmProps as q } from "./popconfirm.mjs";
+import { useAttrs as A } from "../../../hooks/useAttrs.mjs";
+import { useNS as D } from "../../../hooks/useNS.mjs";
+const N = p({
+  name: "p-popconfirm",
+  inheritAttrs: !1
+}), G = /* @__PURE__ */ p({
+  ...N,
+  props: { ...q },
+  emits: ["close", "closed", "open", "opened", "cancel", "confirm"],
+  setup(d, { emit: m }) {
+    const r = D("popconfirm"), e = d, o = m, u = v(), s = a(void 0), c = a(void 0), k = () => {
+      o("open"), P().then(() => {
+        s.value.open();
+      });
+    }, l = () => {
+      s.value.open(), c.value.close();
+    }, y = () => {
+      l(), o("close");
+    }, g = () => {
+      l(), o("cancel");
+    }, C = () => {
+      l(), o("confirm");
+    };
+    return (x, n) => (b(), _(S, w({
+      ref_key: "floating",
+      ref: c
+    }, t(A)("scoped").value, {
+      class: t(r).namespace,
+      trigger: e.trigger,
+      placement: e.placement,
+      transition: e.transition,
+      "open-delay": e.openDelay,
+      "close-delay": e.closeDelay,
+      disabled: e.disabled,
+      offset: e.offset,
+      "close-on-click-body": e.closeOnClickBody,
+      "open-on-mounted": e.openOnMounted,
+      teleported: e.teleported,
+      "show-arrow": e.showArrow,
+      "floating-class": e.floatingClass,
+      reference: e.reference,
+      "quick-track": e.quickTrack,
+      onOpen: k,
+      onOpened: n[0] || (n[0] = (i) => o("opened")),
+      onClose: n[1] || (n[1] = (i) => o("close")),
+      onClosed: n[2] || (n[2] = (i) => o("closed"))
+    }), B({
+      default: f(() => [
+        $(T, {
+          ref_key: "messageBox",
+          ref: s,
+          class: h(t(r).e("inner")),
+          transition: e.transition,
+          type: e.type,
+          "cancel-btn-text": e.cancelBtnText,
+          "confirm-btn-text": e.confirmBtnText,
+          title: e.text,
+          icon: e.icon,
+          "icon-color": e.iconColor,
+          onClose: y,
+          onCancel: g,
+          onConfirm: C
+        }, null, 8, ["class", "transition", "type", "cancel-btn-text", "confirm-btn-text", "title", "icon", "icon-color"])
+      ]),
+      _: 2
+    }, [
+      t(u).default ? {
+        name: "reference",
+        fn: f(() => [
+          O(x.$slots, "default")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["class", "trigger", "placement", "transition", "open-delay", "close-delay", "disabled", "offset", "close-on-click-body", "open-on-mounted", "teleported", "show-arrow", "floating-class", "reference", "quick-track"]));
+  }
+});
+export {
+  G as default
+};

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

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

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

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

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

@@ -0,0 +1,28 @@
+const o = {
+  /**
+   * @description 视口大小是否不再改变
+   */
+  noResize: Boolean,
+  /**
+   * @description 滚动条是否始终显示
+   */
+  always: Boolean,
+  /**
+   * @description 是否使用原生滚动条
+   */
+  native: Boolean,
+  /**
+   * @description 滚动条是否显示在视口外面
+   */
+  isOutside: Boolean,
+  /**
+   * @description 是否开启跳转
+   */
+  quickJump: {
+    type: Boolean,
+    default: !0
+  }
+};
+export {
+  o as PScrollbarProps
+};

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

@@ -0,0 +1,138 @@
+import { defineComponent as R, ref as p, openBlock as P, createElementBlock as $, normalizeClass as w, unref as i, createElementVNode as W, renderSlot as A, Fragment as F, normalizeStyle as B, createCommentVNode as J } from "vue";
+import { PScrollbarProps as j } from "./scrollbar.mjs";
+import { useEventListener as x, unrefElement as t, useResizeObserver as D, useMutationObserver as G } from "@vueuse/core";
+import { useNS as I } from "../../../hooks/useNS.mjs";
+const K = ["data-always", "data-native"], Q = R({
+  name: "PScrollbar",
+  inheritAttrs: !0
+}), ot = /* @__PURE__ */ R({
+  ...Q,
+  props: { ...j },
+  emits: ["scroll"],
+  setup(N, { emit: V }) {
+    const s = I("scrollbar"), n = N, q = V, o = p(void 0), k = p(void 0), h = p(void 0), L = p(void 0), f = p(void 0), H = p(0);
+    let u;
+    const T = p({
+      top: "0",
+      right: "0",
+      height: "0"
+    }), O = p({
+      bottom: "0",
+      left: "0",
+      width: "0"
+    }), r = {
+      x: 0,
+      y: 0
+    }, E = {
+      x: 0,
+      y: 0
+    }, X = {
+      x: 0,
+      y: 0
+    }, Y = {
+      x: 0,
+      y: 0
+    }, S = (e) => {
+      X.x = e.clientX, X.y = e.clientY, r.x = X.x - E.x, r.y = X.y - E.y;
+      const l = t(o), c = t(h), d = t(f), m = l.scrollHeight, a = l.scrollWidth, v = c.offsetHeight, b = d.offsetWidth;
+      u === "thumbY" ? t(o).scrollTop = m * r.y / v + Y.y : u === "thumbX" && (t(o).scrollLeft = a * r.x / b + Y.x);
+    }, C = (e) => {
+      if (e.target !== e.currentTarget) return;
+      e.stopPropagation();
+      const l = t(o), c = t(h), d = t(k), m = t(L), a = t(f), v = l.scrollHeight, b = l.scrollWidth, y = c.offsetHeight, g = a.offsetWidth;
+      r.y = e.clientY - c.getBoundingClientRect().top - d.offsetHeight / 2, r.x = e.clientX - a.getBoundingClientRect().left - m.offsetWidth / 2, r.y = Math.min(Math.max(0, r.y), c.offsetHeight - d.offsetHeight), r.x = Math.min(Math.max(0, r.x), a.offsetWidth - m.offsetWidth), u === "thumbY" ? t(o).scrollTo({
+        top: v * r.y / y,
+        behavior: "smooth"
+      }) : u === "thumbX" && t(o).scrollTo({
+        left: b * r.x / g,
+        behavior: "smooth"
+      });
+    }, M = () => {
+      if (n.native) return;
+      const e = t(o), l = t(h), c = t(f), {
+        scrollHeight: d,
+        scrollWidth: m,
+        offsetHeight: a,
+        offsetWidth: v
+      } = e, b = l.offsetHeight, y = c.offsetWidth, g = a * b / d, _ = v * y / m;
+      g === b ? t(h).style.opacity = "0" : t(h).style.opacity = "", _ === y ? t(f).style.opacity = "0" : t(f).style.opacity = "", T.value.height = `${g}px`, O.value.width = `${_}px`;
+    }, z = () => {
+      if (n.native) return;
+      const e = t(o), l = t(h), c = t(f), { scrollHeight: d, scrollWidth: m, scrollTop: a, scrollLeft: v } = e, b = l.offsetHeight, y = c.offsetWidth, g = a * b / d, _ = v * y / m;
+      T.value.top = `${g}px`, O.value.left = `${_}px`;
+    };
+    return x(o, "scroll", () => {
+      const e = t(o);
+      z(), q("scroll", e.scrollLeft, e.scrollTop);
+    }), n.quickJump && (x(h, "click", (e) => {
+      u = "thumbY", C(e);
+    }), x(f, "click", (e) => {
+      u = "thumbX", C(e);
+    })), n.noResize || D(o, () => {
+      z(), M();
+    }), G(o, () => {
+      z(), M();
+    }, {
+      attributes: !0,
+      childList: !0,
+      subtree: !0
+    }), x(k, "mousedown", (e) => {
+      E.y = e.clientY, Y.y = t(o).scrollTop, u = "thumbY", H.value = 1, t(document.body).addEventListener("mousemove", S);
+    }), x(L, "mousedown", (e) => {
+      E.x = e.clientX, Y.x = t(o).scrollLeft, u = "thumbX", H.value = 2, t(document.body).addEventListener("mousemove", S);
+    }), x(document.body, "mouseup", () => {
+      H.value = 0, t(document.body).removeEventListener("mousemove", S);
+    }), (e, l) => (P(), $("div", {
+      class: w(i(s).namespace),
+      "data-always": n.always,
+      "data-native": n.native
+    }, [
+      W("div", {
+        ref_key: "wrap",
+        ref: o,
+        class: w(i(s).e("wrapper"))
+      }, [
+        A(e.$slots, "default")
+      ], 2),
+      n.native ? J("", !0) : (P(), $(F, { key: 0 }, [
+        W("div", {
+          ref_key: "barY",
+          ref: h,
+          class: w([
+            i(s).e("bar"),
+            i(s).is("vertical"),
+            i(s).is(n.isOutside, "outside"),
+            i(s).is(H.value === 1, "active")
+          ])
+        }, [
+          W("div", {
+            ref_key: "thumbY",
+            ref: k,
+            class: w([i(s).e("thumb"), i(s).is("round")]),
+            style: B(T.value)
+          }, null, 6)
+        ], 2),
+        W("div", {
+          ref_key: "barX",
+          ref: f,
+          class: w([
+            i(s).e("bar"),
+            i(s).is("horizontal"),
+            i(s).is(n.isOutside, "outside"),
+            i(s).is(H.value === 2, "active")
+          ])
+        }, [
+          W("div", {
+            ref_key: "thumbX",
+            ref: L,
+            class: w([i(s).e("thumb"), i(s).is("round")]),
+            style: B(O.value)
+          }, null, 6)
+        ], 2)
+      ], 64))
+    ], 10, K));
+  }
+});
+export {
+  ot as default
+};

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

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

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

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

package/es/packages/components/switch/src/switch-txt.vue.mjs

@@ -0,0 +1,48 @@
+import { defineComponent as i, ref as f, watch as l, openBlock as c, createElementBlock as m, toDisplayString as p } from "vue";
+import { unrefElement as u } from "@vueuse/core";
+const d = /* @__PURE__ */ i({
+  __name: "switch-txt",
+  props: {
+    active: Boolean,
+    txt: String
+  },
+  setup(n) {
+    const e = n, a = f(null), o = [
+      {
+        opacity: "0",
+        transform: "translateX(15px)"
+      },
+      {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    ], s = [
+      {
+        opacity: "0",
+        transform: "translateX(-15px)"
+      },
+      {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    ];
+    return l(() => e.active, (r) => {
+      const t = u(a);
+      t && (r ? t.animate(o, {
+        duration: 200,
+        fill: "forwards",
+        easing: "linear"
+      }) : t.animate(s, {
+        duration: 200,
+        fill: "forwards",
+        easing: "linear"
+      }));
+    }, { immediate: !1 }), (r, t) => (c(), m("span", {
+      ref_key: "txt",
+      ref: a
+    }, p(e.txt), 513));
+  }
+});
+export {
+  d as default
+};

package/es/packages/components/switch/src/switch-txt.vue2.mjs

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

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

@@ -0,0 +1,137 @@
+const t = {
+  /**
+   * @property {boolean} modelValue - 开关的绑定值
+   * @description 控制开关的开/关状态
+   * @default false
+   * @example
+   * <p-switch v-model="isOpen" />
+   * // isOpen: true - 开启, false - 关闭
+   */
+  modelValue: Boolean,
+  /**
+   * @property {ElementSizes} size - 组件大小（高度）
+   * @description 控制开关的尺寸大小
+   * @default undefined (默认尺寸)
+   * @values 'small' | 'large'
+   * @example
+   * <p-switch size="small" />
+   * <p-switch size="large" />
+   */
+  size: String,
+  /**
+   * @property {ElementTypes | 'cyan'} type - 开关的类型主题
+   * @description 控制开关开启状态的颜色主题
+   * @default undefined (默认 primary)
+   * @values 'success' | 'info' | 'warning' | 'danger' | 'cyan'
+   * @example
+   * <p-switch type="success" />
+   * <p-switch type="danger" />
+   */
+  type: String,
+  /**
+   * @property {string} inactiveText - 开关关闭状态时的文字
+   * @description 开关状态为 off 时显示的文本
+   * @default undefined
+   * @example
+   * <p-switch inactive-text="关闭" />
+   */
+  inactiveText: String,
+  /**
+   * @property {string} activeText - 开关开启状态时的文字
+   * @description 开关状态为 on 时显示的文本
+   * @default undefined
+   * @example
+   * <p-switch active-text="开启" inactive-text="关闭" />
+   */
+  activeText: String,
+  /**
+   * @property {string} inactiveIcon - 开关关闭状态时的图标
+   * @description 开关状态为 off 时显示的图标名称
+   * @default undefined
+   * @example
+   * <p-switch inactive-icon="close" active-icon="check" />
+   */
+  inactiveIcon: String,
+  /**
+   * @property {string} activeIcon - 开关开启状态时的图标
+   * @description 开关状态为 on 时显示的图标名称
+   * @default undefined
+   * @example
+   * <p-switch active-icon="check" />
+   */
+  activeIcon: String,
+  /**
+   * @property {string} triggerIcon - 开关滑块中的图标
+   * @description 显示在开关滑块中心的图标名称
+   * @default undefined
+   * @example
+   * <p-switch trigger-icon="star" />
+   */
+  triggerIcon: String,
+  /**
+   * @property {string} color - 开关的自定义颜色
+   * @description 自定义开关开启状态的颜色，优先级高于 type
+   * @default undefined
+   * @example
+   * <p-switch color="#67C23A" />
+   * <p-switch color="var(--custom-color)" />
+   */
+  color: String,
+  /**
+   * @property {boolean} disabled - 是否禁用开关
+   * @description 禁用后开关不可点击，且显示禁用样式
+   * @default false
+   * @example
+   * <p-switch :disabled="true" />
+   */
+  disabled: Boolean,
+  /**
+   * @property {boolean} loading - 是否处于加载中
+   * @description 加载状态下显示加载图标，开关不可点击
+   * @default false
+   * @example
+   * <p-switch :loading="isSubmitting" />
+   */
+  loading: Boolean,
+  /**
+   * @property {string} textStatus - 文本显示位置
+   * @description 控制 on/off 文本是否显示在开关轨道内部
+   * @default undefined (显示在外部)
+   * @values 'inside' | 'outside'
+   * - inside: 文本显示在轨道内，会忽略图标
+   * - outside: 文本显示在轨道外两侧
+   * @example
+   * <p-switch text-status="inside" active-text="ON" inactive-text="OFF" />
+   */
+  textStatus: String,
+  /**
+   * @property {Function} beforeChange - 开关状态改变前的回调
+   * @description 异步控制开关状态的切换，需要手动调用 done 函数
+   * @default undefined
+   * @param {Function} done - 完成状态切换的函数
+   * @example
+   * ```vue
+   * <p-switch
+   *   v-model="value"
+   *   :before-change="handleBeforeChange"
+   * />
+   * 
+   * <script setup>
+   * const handleBeforeChange = (done) => {
+   *   // 执行异步操作，如 API 请求
+   *   fetch('/api/toggle')
+   *     .then(() => {
+   *       done()  // 成功后切换状态
+   *     })
+   *     .catch(() => {
+   *       // 失败时不调用 done，状态不变
+   *     })
+   * }
+   * <\/script>
+   * ```
+   */
+  beforeChange: Function
+};
+export {
+  t as PSwitchProps
+};

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

@@ -0,0 +1,103 @@
+import { defineComponent as v, computed as c, openBlock as r, createElementBlock as u, normalizeStyle as C, normalizeClass as o, createElementVNode as d, unref as a, createVNode as p, createTextVNode as g, toDisplayString as f, createCommentVNode as s, mergeProps as S, createBlock as m } from "vue";
+import N from "./switch-txt.vue.mjs";
+import n from "../../icon/src/icon.vue.mjs";
+import { PSwitchProps as T } from "./switch.mjs";
+import { getClrVar as h } from "../../../tools/extra/css.mjs";
+import { useNS as w } from "../../../hooks/useNS.mjs";
+const I = v({
+  name: "PSwitch",
+  inheritAttrs: !1
+}), j = /* @__PURE__ */ v({
+  ...I,
+  props: { ...T },
+  emits: ["update:modelValue", "change"],
+  setup(V, { emit: _ }) {
+    const t = w("switch"), e = V, i = _, x = c(() => [
+      t.namespace,
+      t.is("checked", e.modelValue),
+      t.is("disabled", e.disabled),
+      t.is("loading", e.loading),
+      t.m(e.size)
+    ]), y = c(() => {
+      const l = e.color ? e.color : e.type ? h(e.type) : h("primary");
+      return {
+        [t.cssVar("color")]: l
+      };
+    }), k = c(() => e.modelValue ? e.activeText : e.inactiveText), b = () => {
+      const l = () => {
+        e.loading || e.disabled || (e.modelValue ? (i("update:modelValue", !1), i("change", "off")) : (i("update:modelValue", !0), i("change", "on")));
+      };
+      e.beforeChange && e.beforeChange(l), e.beforeChange || l();
+    };
+    return (l, P) => (r(), u("div", {
+      class: o(x.value),
+      style: C(y.value),
+      onClick: b
+    }, [
+      d("input", {
+        class: o(a(t).e("input")),
+        type: "radio",
+        placeholder: "ヾ(≧▽≦*)o"
+      }, null, 2),
+      e.textStatus !== "inside" ? (r(), u("span", {
+        key: 0,
+        class: o([
+          a(t).e("label"),
+          a(t).em("label", "left"),
+          a(t).is("active", !e.modelValue)
+        ])
+      }, [
+        p(n, {
+          target: e.inactiveIcon
+        }, null, 8, ["target"]),
+        g(" " + f(e.inactiveText), 1)
+      ], 2)) : s("", !0),
+      d("div", S({
+        class: [
+          a(t).e("inner"),
+          a(t).is("round")
+        ]
+      }, l.$attrs), [
+        d("span", {
+          class: o([
+            a(t).e("trigger"),
+            a(t).is("round")
+          ])
+        }, [
+          e.triggerIcon && !e.loading ? (r(), m(n, {
+            key: 0,
+            class: "p-switch__trigger__icon",
+            target: e.triggerIcon
+          }, null, 8, ["target"])) : s("", !0),
+          e.loading ? (r(), m(n, {
+            key: 1,
+            target: "loading",
+            rotating: ""
+          })) : s("", !0)
+        ], 2),
+        e.textStatus === "inside" ? (r(), m(N, {
+          key: 0,
+          class: o(a(t).e("text")),
+          txt: k.value,
+          active: e.modelValue
+        }, null, 8, ["class", "txt", "active"])) : s("", !0)
+      ], 16),
+      e.textStatus !== "inside" ? (r(), u("span", {
+        key: 1,
+        class: o([
+          a(t).e("label"),
+          a(t).em("label", "right"),
+          a(t).is("active", e.modelValue)
+        ])
+      }, [
+        p(n, {
+          target: e.activeIcon
+        }, null, 8, ["target"]),
+        g(" " + f(e.activeText), 1)
+      ], 2)) : s("", !0)
+    ], 6));
+  }
+});
+export {
+  j as default
+};

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

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

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

@@ -0,0 +1,8 @@
+import m from "./src/tabs.vue.mjs";
+import t from "./src/tab-panel.vue.mjs";
+import { withInstall as o } from "../../tools/vn/with-install.mjs";
+const n = o(m), s = o(t);
+export {
+  s as TabPanel,
+  n as Tabs
+};

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

@@ -0,0 +1,63 @@
+import { defineComponent as u, ref as i, watch as z, nextTick as m, onMounted as S, computed as k, openBlock as x, createElementBlock as C, normalizeStyle as B, normalizeClass as N } from "vue";
+import f from "./tabs-props.mjs";
+import { useResizeObserver as P } from "@vueuse/core";
+import { debounce as w } from "../../../tools/decorator/debounce.mjs";
+import { useNS as R } from "../../../hooks/useNS.mjs";
+const A = u({
+  name: "PTabNavBar",
+  inheritAttrs: !1
+}), O = /* @__PURE__ */ u({
+  ...A,
+  props: {
+    navs: {
+      type: Array
+    },
+    placement: f.placement,
+    value: f.value
+  },
+  setup(v) {
+    const e = v, r = i(), l = i(), a = () => l.value = _();
+    z([() => e.navs, () => e.value, () => e.placement], () => {
+      m(() => {
+        a();
+      });
+    }), S(() => {
+      m(() => {
+        a();
+      });
+    }), P(
+      r,
+      w(() => {
+        a();
+      }, 35)
+    );
+    const c = R("tabs__bar"), d = k(() => [
+      c.namespace,
+      c.is(e.placement, e.placement !== void 0)
+    ]), _ = () => {
+      var s, n;
+      if (e.placement && e.navs) {
+        const b = ["left", "right"].includes(e.placement.toLowerCase()), [o, h] = b ? ["height", "top"] : ["width", "left"];
+        let p = 0, t = 0;
+        for (; t < e.navs.length && ((s = e.navs[t].props) == null ? void 0 : s.value) !== e.value; t++)
+          if ((n = e.navs[t]) != null && n.el) {
+            const y = getComputedStyle(e.navs[t].el)[o], g = parseFloat(y);
+            p += g;
+          }
+        return e.navs[t] ? {
+          [h]: `${p}px`,
+          [o]: e.navs[t].el ? getComputedStyle(e.navs[t].el)[o] : "0px"
+        } : {};
+      }
+    };
+    return (s, n) => (x(), C("div", {
+      class: N(d.value),
+      style: B(l.value),
+      ref_key: "barRef",
+      ref: r
+    }, null, 6));
+  }
+});
+export {
+  O as default
+};

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

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