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

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

@@ -0,0 +1,69 @@
+const e = {
+  /**
+   * @property {BadgeType} type - 徽章类型
+   * @description 控制徽章的颜色主题
+   * @default undefined (默认主题)
+   * @values 'success' | 'info' | 'warning' | 'danger' | 'primary'
+   * @example
+   * <p-badge type="danger" value="5">
+   *   <p-icon target="bell" />
+   * </p-badge>
+   */
+  type: String,
+  /**
+   * @property {string} variant - 徽章的表现形式
+   * @description 控制徽章的视觉风格
+   * @default undefined (默认实心徽章)
+   * @values 'empty' | 'fantasy'
+   * - empty: 空心徽章，仅有边框
+   * - fantasy: 幻彩徽章，渐变色效果
+   * @example
+   * <p-badge variant="empty" value="new">
+   *   <p-button>新闻</p-button>
+   * </p-badge>
+   */
+  variant: String,
+  /**
+   * @property {string | number} value - 徽章文本内容
+   * @description 徽章显示的内容，可以是数字或文字
+   * @default undefined
+   * @example
+   * <p-badge :value="12">数字徽章</p-badge>
+   * <p-badge value="new">文字徽章</p-badge>
+   * <p-badge value="hot">热门标签</p-badge>
+   */
+  value: {
+    type: [String, Number]
+  },
+  /**
+   * @property {string | number} maxvalue - 最大显示值
+   * @description 当 value 为数字类型且超过此值时，显示为 "maxvalue+"
+   * @default 99
+   * @example
+   * <p-badge :value="100" :maxvalue="99">
+   *   <!-- 显示为 "99+" -->
+   *   <p-button>消息</p-button>
+   * </p-badge>
+   * <p-badge :value="50" :maxvalue="99">
+   *   <!-- 显示为 "50" -->
+   *   <p-button>消息</p-button>
+   * </p-badge>
+   */
+  maxvalue: {
+    type: [String, Number],
+    default: 99
+  },
+  /**
+   * @property {boolean} hidden - 是否隐藏徽章
+   * @description 控制徽章的显示/隐藏状态
+   * @default false
+   * @example
+   * <p-badge :value="count" :hidden="count === 0">
+   *   <p-icon target="message" />
+   * </p-badge>
+   */
+  hidden: Boolean
+};
+export {
+  e as PBadgeProps
+};

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

@@ -0,0 +1,44 @@
+import { defineComponent as s, useSlots as d, ref as _, computed as h, toRef as l, watch as v, unref as x, openBlock as n, createBlock as y, withCtx as k, renderSlot as g, createElementBlock as B } from "vue";
+import w from "../../abstract/src/partial.vue.mjs";
+import { PBadgeProps as b } from "./badge.mjs";
+import { useBadge as P } from "../../../hooks/useBadge.mjs";
+import { isEmpty as $, isNumber as C } from "../../../tools/extra/types.mjs";
+const E = s({
+  name: "PBadge",
+  inheritAttrs: !1
+}), q = /* @__PURE__ */ s({
+  ...E,
+  props: { ...b },
+  setup(u, { expose: p }) {
+    const e = u, i = d();
+    let t = _(null);
+    const f = h(() => !$(e.maxvalue) && C(e.value) && e.value > Number(e.maxvalue) ? `${e.maxvalue}+` : e.value), { hidden: a, show: o, setTxt: m, stop: c } = P(t, {
+      value: f,
+      type: l(e, "type"),
+      variant: l(e, "variant")
+    });
+    return v(() => e.hidden, (r) => r ? a() : o()), p({
+      hidden: a,
+      show: o,
+      setTxt: m,
+      stop: c
+    }), (r, N) => x(i).default ? (n(), y(w, {
+      key: 0,
+      ref_key: "target",
+      ref: t
+    }, {
+      default: k(() => [
+        g(r.$slots, "default")
+      ]),
+      _: 3
+    }, 512)) : (n(), B("span", {
+      key: 1,
+      ref_key: "target",
+      ref: t,
+      style: { display: "inline-block", width: "10px", height: "10px" }
+    }, null, 512));
+  }
+});
+export {
+  q as default
+};

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

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

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

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

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

@@ -0,0 +1,95 @@
+const t = {
+  /**
+   * @property {buttonTypes} type - 按钮的类型
+   * @description 控制按钮的主要颜色和语义
+   * @default undefined
+   * @values 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'
+   * @example
+   * <p-button type="primary">主要按钮</p-button>
+   * <p-button type="success">成功按钮</p-button>
+   */
+  type: String,
+  /**
+   * @property {string} nativeType - 按钮的原生 HTML 类型
+   * @description 原生 button 元素的 type 属性
+   * @default 'button'
+   * @values 'button' | 'submit' | 'reset'
+   * @example
+   * <p-button nativeType="submit">提交表单</p-button>
+   */
+  nativeType: {
+    type: String,
+    default: "button"
+  },
+  /**
+   * @property {ElementSizes} size - 按钮的尺寸
+   * @description 控制按钮的大小
+   * @default undefined (默认尺寸)
+   * @values 'small' | 'large'
+   * @example
+   * <p-button size="small">小型按钮</p-button>
+   * <p-button size="large">大型按钮</p-button>
+   */
+  size: String,
+  /**
+   * @property {string} variant - 按钮的主题变体
+   * @description 控制按钮的视觉风格和交互效果
+   * @default undefined (默认实心按钮)
+   * @values 'ghost' | 'fantasy' | 'empty'
+   * - ghost: 幽灵按钮，透明背景
+   * - fantasy: 幻彩按钮，渐变色效果
+   * - empty: 空心按钮，仅有边框
+   * @example
+   * <p-button variant="ghost">幽灵按钮</p-button>
+   * <p-button variant="fantasy">幻彩按钮</p-button>
+   */
+  variant: String,
+  /**
+   * @property {string} status - 按钮的形状状态
+   * @description 控制按钮的外观形状
+   * @default undefined (默认矩形)
+   * @values 'round' | 'circle'
+   * - round: 圆角按钮
+   * - circle: 圆形按钮（通常用于图标按钮）
+   * @example
+   * <p-button status="round">圆角按钮</p-button>
+   * <p-button status="circle" prefix-icon="search"></p-button>
+   */
+  status: String,
+  /**
+   * @property {boolean} disabled - 是否禁用按钮
+   * @description 禁用后按钮不可点击，且显示禁用样式
+   * @default false
+   * @example
+   * <p-button :disabled="true">禁用按钮</p-button>
+   */
+  disabled: Boolean,
+  /**
+   * @property {boolean} loading - 按钮是否处于加载状态
+   * @description 加载状态下显示加载图标，按钮不可点击
+   * @default false
+   * @example
+   * <p-button :loading="isSubmitting">提交</p-button>
+   */
+  loading: Boolean,
+  /**
+   * @property {string} prefixIcon - 按钮的前缀图标
+   * @description 显示在按钮文本前面的图标名称
+   * @default undefined
+   * @example
+   * <p-button prefix-icon="search">搜索</p-button>
+   * <p-button prefix-icon="upload">上传</p-button>
+   */
+  prefixIcon: String,
+  /**
+   * @property {string} suffixIcon - 按钮的后缀图标
+   * @description 显示在按钮文本后面的图标名称
+   * @default undefined
+   * @example
+   * <p-button suffix-icon="arrow-right">下一步</p-button>
+   */
+  suffixIcon: String
+};
+export {
+  t as PButtonProps
+};

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

@@ -0,0 +1,56 @@
+import { defineComponent as l, computed as g, openBlock as n, createElementBlock as k, mergeProps as b, createBlock as s, createCommentVNode as r, renderSlot as y } from "vue";
+import a from "../../icon/src/icon.vue.mjs";
+import { PButtonProps as _ } from "./button.mjs";
+import { useNS as B } from "../../../hooks/useNS.mjs";
+const C = ["disabled", "type"], P = l({
+  name: "PButton",
+  inheritAttrs: !1
+}), N = /* @__PURE__ */ l({
+  ...P,
+  props: { ..._ },
+  emits: ["click"],
+  setup(d, { emit: c }) {
+    const e = B("button"), t = d, m = c, p = g(() => [
+      e.namespace,
+      // 'p-button'
+      e.m(t.type),
+      // 'p-button--primary'
+      e.m(t.size),
+      // 'p-button--large'
+      e.m(t.variant),
+      // 'p-button--fantasy'
+      e.is(t.status),
+      // 'is-round' 或 'is-circle'
+      e.is(t.disabled, "disabled"),
+      // 'is-disabled'
+      e.is(t.loading, "loading")
+      // 'is-loading'
+    ]), u = (o) => {
+      m("click", o);
+    };
+    return (o, i) => (n(), k("button", b({ ref: "container" }, o.$attrs, {
+      class: p.value,
+      disabled: t.disabled || t.loading,
+      type: t.nativeType,
+      onClick: i[0] || (i[0] = (f) => u(f))
+    }), [
+      o.loading ? (n(), s(a, {
+        key: 0,
+        target: "loading",
+        rotating: ""
+      })) : r("", !0),
+      t.loading ? r("", !0) : (n(), s(a, {
+        key: 1,
+        target: t.prefixIcon
+      }, null, 8, ["target"])),
+      y(o.$slots, "default"),
+      t.loading ? r("", !0) : (n(), s(a, {
+        key: 2,
+        target: t.suffixIcon
+      }, null, 8, ["target"]))
+    ], 16, C));
+  }
+});
+export {
+  N as default
+};

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

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

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

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

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

@@ -0,0 +1,99 @@
+const e = {
+  /**
+   * @description 对话框消息头的标题
+   */
+  title: {
+    type: String,
+    default: "default title"
+  },
+  /**
+   * @description 是否显示消息头中的关闭图标
+   */
+  showCloseIcon: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 消息尾中取消按钮的文本
+   */
+  cancelBtnText: String,
+  /**
+   * @description 消息尾中确认按钮的文本
+   */
+  confirmBtnText: String,
+  /**
+   * @description 消息尾中按钮的大小
+   */
+  btnSize: String,
+  /**
+   * @description 是否去除消息头
+   */
+  noHeader: Boolean,
+  /**
+   * @description 是否去除消息体
+   */
+  noBody: Boolean,
+  /**
+   * @description 是否去除消息尾
+   */
+  noFooter: Boolean,
+  /**
+   * @description 对话框的过渡动画
+   */
+  transition: String,
+  /**
+   * @description 对话框是否可以被拖动
+   */
+  draggable: Boolean,
+  /**
+   * @description 对话框距离浏览器视口顶部的距离
+   */
+  top: {
+    type: String,
+    default: "20vh"
+  },
+  /**
+   * @description 对话框关闭事件前的回调函数，若设置此项, 需要手动调用done函数关闭对话框
+   */
+  beforeClose: Function,
+  /**
+   * @description 是否显示遮罩
+   */
+  modal: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 是否可以通过按下ESC来关闭对话框
+   */
+  closeOnPressEscape: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 在显示遮罩的情况下, 是否可以通过点击遮罩关闭对话框
+   */
+  closeOnClickMark: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 对话框出现时, 是否禁止浏览器的滚动行为
+   */
+  lockScroll: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @description 是否挂载到body元素下面, 在层级混乱时开启此项
+   */
+  appendToBody: Boolean,
+  /**
+   * @description 对话框打开/关闭的绑定值
+   */
+  modelValue: Boolean,
+  part: Boolean
+};
+export {
+  e as PDialogProps
+};

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

@@ -0,0 +1,140 @@
+import { defineComponent as m, computed as P, ref as c, watch as D, onMounted as E, openBlock as I, createBlock as O, Teleport as L, withDirectives as N, createElementVNode as A, normalizeClass as F, createVNode as H, mergeProps as j, unref as u, createSlots as q, withCtx as i, renderSlot as d, vShow as G, nextTick as J } from "vue";
+import K from "../../message/src/message-box.vue.mjs";
+import { useEventListener as Q, unrefElement as R } from "@vueuse/core";
+import { PDialogProps as U } from "./dialog.mjs";
+import { useMark as W } from "../../../hooks/useMark.mjs";
+import { useLockScroll as X } from "../../../hooks/useLockScroll.mjs";
+import { IndexManager as Y } from "../../../tools/managers/index-manager.mjs";
+import { useAttrs as Z } from "../../../hooks/useAttrs.mjs";
+import { useNS as ee } from "../../../hooks/useNS.mjs";
+const oe = m({
+  name: "PDialog",
+  inheritAttrs: !1
+}), ue = /* @__PURE__ */ m({
+  ...oe,
+  props: { ...U },
+  emits: ["update:modelValue", "open", "opened", "close", "closed", "cancel", "confirm", "hidden"],
+  setup(p, { expose: v, emit: h }) {
+    const l = ee("dialog"), e = p, t = h, k = P(() => [
+      l.namespace,
+      l.is(e.part, "part")
+    ]), n = c(null), a = c(null), { lockScroll: g, unLockScroll: b } = X(), { mark: y, hiddenMark: x, showMark: S } = W(a, e.part ? "part" : "cover"), w = new Y(), r = c(e.modelValue);
+    let s = !0;
+    const C = function() {
+      r.value = !0, s = !0, t("update:modelValue", !0), t("open"), R(a).style.zIndex = w.nextIndex().toString(), e.lockScroll && !e.part && g(), e.modal && S();
+    }, B = function(o) {
+      t("close", o);
+    }, T = function() {
+      s = !1, t("hidden"), t("update:modelValue", !1), e.modal && x();
+    }, V = function() {
+      t("cancel");
+    }, M = function() {
+      t("confirm");
+    }, _ = function() {
+      t("opened");
+    }, $ = function() {
+      e.lockScroll && !e.part && b(), r.value = !1, t("closed");
+    }, f = async function() {
+      await J(), n.value.open();
+    }, z = function() {
+      if (s) {
+        n.value.close("system"), s = !1;
+        return;
+      }
+      n.value.hidden();
+    };
+    return D(() => e.modelValue, (o) => o ? f() : z()), E(() => {
+      e.modelValue && f();
+    }), e.closeOnClickMark && e.modal && Q(y, "click", () => {
+      n.value.close("mark");
+    }), v({
+      /**
+       * @description func, 打开消息框, 会触发 open 事件
+       */
+      open: () => n.value.open(),
+      /**
+       * @description func, 关闭消息框, 会触发 close 事件
+       */
+      close: (o) => n.value.close(o),
+      /**
+       * @description func, 关闭消息框, 无副作用
+       */
+      hidden: () => n.value.hidden(),
+      /**
+       * @description func, 关闭/打开消息框, 无副作用
+       */
+      toggle: () => n.value.toggle(),
+      /**
+       * @description func, 关闭消息框, 触发 cancel 事件
+       */
+      cancel: () => n.value.cancel(),
+      /**
+       * @description func, 关闭消息框, 触发 confirm 事件
+       */
+      confirm: () => n.value.confirm()
+    }), (o, ne) => (I(), O(L, {
+      to: "body",
+      disabled: !e.appendToBody
+    }, [
+      N(A("div", {
+        ref_key: "container",
+        ref: a,
+        class: F(k.value)
+      }, [
+        H(K, j({
+          ref_key: "messageBox",
+          ref: n
+        }, u(Z)("scoped").value, {
+          class: u(l).e("inner"),
+          transition: e.transition || "p-transition-fadeDown",
+          title: e.title,
+          "no-header": e.noHeader,
+          "no-body": e.noBody,
+          "no-footer": e.noFooter,
+          "show-close-icon": e.showCloseIcon,
+          "cancel-btn-text": e.cancelBtnText,
+          "confirm-btn-text": e.confirmBtnText,
+          "btn-size": e.btnSize,
+          "close-on-press-escape": e.closeOnPressEscape,
+          draggable: e.draggable,
+          top: e.top,
+          "before-close": e.beforeClose,
+          onCancel: V,
+          onConfirm: M,
+          onOpen: C,
+          onOpened: _,
+          onClose: B,
+          onClosed: $,
+          onHidden: T
+        }), q({ _: 2 }, [
+          o.$slots.header ? {
+            name: "header",
+            fn: i(() => [
+              d(o.$slots, "header")
+            ]),
+            key: "0"
+          } : void 0,
+          o.$slots.default ? {
+            name: "default",
+            fn: i(() => [
+              d(o.$slots, "default")
+            ]),
+            key: "1"
+          } : void 0,
+          o.$slots.footer ? {
+            name: "footer",
+            fn: i(() => [
+              d(o.$slots, "footer")
+            ]),
+            key: "2"
+          } : void 0
+        ]), 1040, ["class", "transition", "title", "no-header", "no-body", "no-footer", "show-close-icon", "cancel-btn-text", "confirm-btn-text", "btn-size", "close-on-press-escape", "draggable", "top", "before-close"])
+      ], 2), [
+        [G, r.value]
+      ])
+    ], 8, ["disabled"]));
+  }
+});
+export {
+  ue as default
+};

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

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

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

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

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

@@ -0,0 +1,44 @@
+const t = {
+  /**
+   * @description 分割线的方向. 此项不具备响应式，请确保该值不会被改变
+   */
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  /**
+   * @description 分割线的类型
+   */
+  status: {
+    type: String,
+    default: "solid"
+  },
+  /**
+   * @description 分割线分割出来的宽度/高度
+   */
+  gap: {
+    type: Number
+  },
+  /**
+   * @description 分割线的文本
+   */
+  text: String,
+  /**
+   * @description 分割线文本所处的位置. 此项不具备响应式，请确保该值不会被改变
+   */
+  placement: {
+    type: String,
+    default: "center"
+  },
+  /**
+   * @description 分割线文本的前缀图标
+   */
+  prefixIcon: String,
+  /**
+   * @description 分割线文本的后缀图标
+   */
+  suffixIcon: String
+};
+export {
+  t as PDividerProps
+};

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

@@ -0,0 +1,48 @@
+import { defineComponent as m, useSlots as y, computed as r, ref as o, openBlock as n, createElementBlock as s, normalizeStyle as k, normalizeClass as a, createElementVNode as x, unref as c, createVNode as i, renderSlot as S, Fragment as V, createTextVNode as N, toDisplayString as h } from "vue";
+import l from "../../icon/src/icon.vue.mjs";
+import { PDividerProps as z } from "./divider.mjs";
+import { px as B } from "../../../tools/extra/css.mjs";
+import { useNS as C } from "../../../hooks/useNS.mjs";
+const D = m({
+  name: "p-divider",
+  inheritAttrs: !0
+}), T = /* @__PURE__ */ m({
+  ...D,
+  props: { ...z },
+  setup(p) {
+    const t = C("divider"), e = p, d = y(), f = r(() => [
+      t.namespace,
+      t.m(e.status),
+      t.m(e.direction),
+      t.m(e.placement)
+    ]), u = r(() => ({
+      [t.cssVar("gap")]: B(e.gap, 15),
+      [t.cssVar("placement")]: e.placement
+    })), _ = o(void 0), v = o(void 0);
+    return (g, E) => (n(), s("div", {
+      ref_key: "divider",
+      ref: v,
+      class: a(f.value),
+      style: k(u.value)
+    }, [
+      x("span", {
+        class: a(c(t).e("content")),
+        ref_key: "content",
+        ref: _
+      }, [
+        i(l, {
+          target: e.prefixIcon
+        }, null, 8, ["target"]),
+        c(d).default ? S(g.$slots, "default", { key: 0 }) : (n(), s(V, { key: 1 }, [
+          N(h(e.text), 1)
+        ], 64)),
+        i(l, {
+          target: e.suffixIcon
+        }, null, 8, ["target"])
+      ], 2)
+    ], 6));
+  }
+});
+export {
+  T as default
+};

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

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

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

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