@manohub/ui 0.6.0

package/dist/components/badge/index.d.ts

@@ -0,0 +1,132 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export type BadgeTone = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error';
+export type BadgeShape = 'soft' | 'outline' | 'plain';
+export type BadgeSize = 'sm' | 'md';
+export type BadgeDot = 'filled' | 'ring';
+/** 状态点语义（与 `tone` 同源，只是换了一套更常用的叫法） */
+export type BadgeStatus = 'success' | 'processing' | 'default' | 'warning' | 'error';
+/**
+ * 徽标 / 标签 —— 三种用法，按「传了什么」自动选形态：
+ *
+ * 1. **内容徽标**（默认插槽 = 徽标文字）：`tone × shape × size × dot` 的正交组合。
+ *    吃掉的分身：前 4 个应用各自手搓徽标（状态胶囊、准入状态、类型标签、结论徽标）。
+ * 2. **数字角标**（传了 `count`）：独立显示，或包裹子元素后钉在其右上角
+ *    （此时默认插槽的含义从「徽标文字」变成「被包裹的内容」，与主流库一致）。
+ * 3. **状态点 + 文字**（传了 `status`）：`● 已完成` 这种最轻的状态表达。
+ *
+ * 形态（`shape`）：
+ * - `soft`：浅底 + 同色文字（标签）
+ * - `outline`：浅底 + 同色描边；`tone="default"` 时退化为白底 + 中性描边 + 正文色（状态胶囊）
+ * - `plain`：无底无框，靠圆点表达状态
+ *
+ * @example 内容徽标
+ * <Badge tone="success" shape="outline" size="md" dot="filled">运行中</Badge>
+ *
+ * @example 数字角标（包裹子元素时钉右上角）
+ * <Badge count={12}><Avatar letter="张" /></Badge>
+ * <Badge count={120} :overflow-count="99" />   // 渲染 99+
+ *
+ * @example 状态点
+ * <Badge status="processing" text="运行中" />
+ */
+export declare const Badge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<BadgeTone>;
+        default: string;
+    };
+    /** 形态：soft（浅底）/ outline（描边）/ plain（无底 + 圆点） */
+    shape: {
+        type: PropType<BadgeShape>;
+        default: string;
+    };
+    size: {
+        type: PropType<BadgeSize>;
+        default: string;
+    };
+    /** 前置圆点：`true`（= 实心）/ `'filled'` 实心 / `'ring'` 空心；不传则无圆点 */
+    dot: {
+        type: PropType<boolean | BadgeDot>;
+        default: undefined;
+    };
+    /** 数字角标（给了就走角标形态；默认插槽随之变成「被包裹的内容」） */
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** 数字上限，超出显示 `n+` */
+    overflowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** `count` 为 0 时是否仍显示 */
+    showZero: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 状态点语义（给了就走状态形态） */
+    status: {
+        type: PropType<BadgeStatus>;
+        default: undefined;
+    };
+    /** 状态文字（`status` 形态；也可用默认插槽） */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<BadgeTone>;
+        default: string;
+    };
+    /** 形态：soft（浅底）/ outline（描边）/ plain（无底 + 圆点） */
+    shape: {
+        type: PropType<BadgeShape>;
+        default: string;
+    };
+    size: {
+        type: PropType<BadgeSize>;
+        default: string;
+    };
+    /** 前置圆点：`true`（= 实心）/ `'filled'` 实心 / `'ring'` 空心；不传则无圆点 */
+    dot: {
+        type: PropType<boolean | BadgeDot>;
+        default: undefined;
+    };
+    /** 数字角标（给了就走角标形态；默认插槽随之变成「被包裹的内容」） */
+    count: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** 数字上限，超出显示 `n+` */
+    overflowCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** `count` 为 0 时是否仍显示 */
+    showZero: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 状态点语义（给了就走状态形态） */
+    status: {
+        type: PropType<BadgeStatus>;
+        default: undefined;
+    };
+    /** 状态文字（`status` 形态；也可用默认插槽） */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    size: BadgeSize;
+    dot: boolean | BadgeDot;
+    shape: BadgeShape;
+    count: number;
+    status: BadgeStatus;
+    tone: BadgeTone;
+    overflowCount: number;
+    showZero: boolean;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/badge/index.js

@@ -0,0 +1,99 @@
+import { defineComponent, computed, createVNode } from "vue";
+const STATUS_TONE = {
+  success: "success",
+  processing: "primary",
+  default: "default",
+  warning: "warning",
+  error: "error"
+};
+const Badge = /* @__PURE__ */ defineComponent({
+  name: "Badge",
+  inheritAttrs: false,
+  props: {
+    tone: {
+      type: String,
+      default: "default"
+    },
+    /** 形态：soft（浅底）/ outline（描边）/ plain（无底 + 圆点） */
+    shape: {
+      type: String,
+      default: "soft"
+    },
+    size: {
+      type: String,
+      default: "sm"
+    },
+    /** 前置圆点：`true`（= 实心）/ `'filled'` 实心 / `'ring'` 空心；不传则无圆点 */
+    dot: {
+      type: [Boolean, String],
+      default: void 0
+    },
+    /** 数字角标（给了就走角标形态；默认插槽随之变成「被包裹的内容」） */
+    count: {
+      type: Number,
+      default: void 0
+    },
+    /** 数字上限，超出显示 `n+` */
+    overflowCount: {
+      type: Number,
+      default: 99
+    },
+    /** `count` 为 0 时是否仍显示 */
+    showZero: {
+      type: Boolean,
+      default: false
+    },
+    /** 状态点语义（给了就走状态形态） */
+    status: {
+      type: String,
+      default: void 0
+    },
+    /** 状态文字（`status` 形态；也可用默认插槽） */
+    text: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const countText = computed(() => {
+      if (props.count === void 0) return null;
+      if (props.count === 0 && !props.showZero) return null;
+      return props.count > props.overflowCount ? `${props.overflowCount}+` : String(props.count);
+    });
+    const dotKind = computed(() => props.dot === true ? "filled" : props.dot === false || props.dot === void 0 ? void 0 : props.dot);
+    return () => {
+      const style = attrs.style;
+      const extra = attrs.class;
+      if (props.status) {
+        return createVNode("span", {
+          "class": ["mh-badge--status", `mh-badge--${STATUS_TONE[props.status]}`, extra].filter(Boolean).join(" "),
+          "style": style
+        }, [createVNode("span", {
+          "class": "mh-badge__status-dot"
+        }, null), props.text ?? slots.default?.()]);
+      }
+      if (props.count !== void 0) {
+        if (countText.value === null && !slots.default) return null;
+        return createVNode("span", {
+          "class": ["mh-badge--count", extra].filter(Boolean).join(" "),
+          "style": style
+        }, [slots.default?.(), countText.value !== null ? createVNode("sup", {
+          "class": ["mh-badge__count", `mh-badge--${props.tone}`].join(" ")
+        }, [countText.value]) : null]);
+      }
+      return createVNode("span", {
+        "class": ["mh-badge", `mh-badge--${props.tone}`, `mh-badge--${props.shape}`, `mh-badge--${props.size}`, dotKind.value ? `mh-badge--dot-${dotKind.value}` : "", extra].filter(Boolean).join(" "),
+        "style": style
+      }, [dotKind.value ? createVNode("span", {
+        "class": "mh-badge__dot"
+      }, null) : null, slots.default?.()]);
+    };
+  }
+});
+export {
+  Badge
+};