@manohub/ui 0.6.0

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

@@ -0,0 +1,199 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type IconName } from '@manohub/icon';
+import type { ControlSize } from '../control-size';
+export interface StepsItem {
+    /** 步骤标题 */
+    title: string;
+    /** 节点内的图标名（缺省显示序号；已完成步一律显示 `check`） */
+    icon?: IconName;
+}
+export type StepsVariant = 'node' | 'bar';
+/**
+ * 步骤条（**自绘**；节点式 + 燕尾段式 + 进度条）。
+ *
+ * ## 状态怎么给
+ *
+ * 只认一个数：`current`（当前步下标，0 起）。**小于它的都是已完成**、大于它是未开始 —— 由本件按下标算出
+ * `--done` / `--current` 与连线是否 `--active`，调用方不必自己拼类名。
+ *
+ * 连线取「**当前步之后那一段**」为活动档（规范实测取向）：已完成步之后的连线仍是灰的，别做成"已完成段全蓝"。
+ *
+ * ## 两种形态的判据
+ *
+ * - `variant="node"`（缺省）：节点 + 同行标题 + 点线折角箭头，段长弹性 —— 步骤数少、要给每步留标题时用；
+ * - `variant="bar"`：燕尾段条（定宽 140、相邻重叠 10），只有当前段是主色 —— 段数固定、像进度分段时用。
+ *
+ * 步骤条**不可点**（规范未演示跳步）：要跳转请在步骤旁自己放操作，或改用别的件。
+ *
+ * 进度条（`Steps.Progress`）单列，用于"跑到百分之几"这类无步骤语义的场景。
+ *
+ * @example
+ * <Steps :steps="[{title:'填单'},{title:'审批'},{title:'完成'}]" :current="1" />
+ *
+ * @example 燕尾段式
+ * <Steps variant="bar" :steps="[{title:'支付明细'},{title:'确认'}]" :current="0" />
+ */
+export declare const Steps: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 步骤表（标题 + 可选节点图标） */
+    steps: {
+        type: PropType<StepsItem[]>;
+        default: () => never[];
+    };
+    /** 当前步下标（0 起）；小于它的算已完成 */
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<StepsVariant>;
+        default: string;
+    };
+    /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 步骤表（标题 + 可选节点图标） */
+    steps: {
+        type: PropType<StepsItem[]>;
+        default: () => never[];
+    };
+    /** 当前步下标（0 起）；小于它的算已完成 */
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<StepsVariant>;
+        default: string;
+    };
+    /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: ControlSize;
+    variant: StepsVariant;
+    current: number;
+    steps: StepsItem[];
+}, SlotsType<{
+    title?: (context: {
+        item: StepsItem;
+        index: number;
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const StepsCompound: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        /** 步骤表（标题 + 可选节点图标） */
+        steps: {
+            type: PropType<StepsItem[]>;
+            default: () => never[];
+        };
+        /** 当前步下标（0 起）；小于它的算已完成 */
+        current: {
+            type: NumberConstructor;
+            default: number;
+        };
+        variant: {
+            type: PropType<StepsVariant>;
+            default: string;
+        };
+        /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        size: ControlSize;
+        variant: StepsVariant;
+        current: number;
+        steps: StepsItem[];
+    }, true, {}, SlotsType<{
+        title?: (context: {
+            item: StepsItem;
+            index: number;
+        }) => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        /** 步骤表（标题 + 可选节点图标） */
+        steps: {
+            type: PropType<StepsItem[]>;
+            default: () => never[];
+        };
+        /** 当前步下标（0 起）；小于它的算已完成 */
+        current: {
+            type: NumberConstructor;
+            default: number;
+        };
+        variant: {
+            type: PropType<StepsVariant>;
+            default: string;
+        };
+        /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        size: ControlSize;
+        variant: StepsVariant;
+        current: number;
+        steps: StepsItem[];
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    /** 步骤表（标题 + 可选节点图标） */
+    steps: {
+        type: PropType<StepsItem[]>;
+        default: () => never[];
+    };
+    /** 当前步下标（0 起）；小于它的算已完成 */
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<StepsVariant>;
+        default: string;
+    };
+    /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    size: ControlSize;
+    variant: StepsVariant;
+    current: number;
+    steps: StepsItem[];
+}, {}, string, SlotsType<{
+    title?: (context: {
+        item: StepsItem;
+        index: number;
+    }) => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Progress: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        value: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        value: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & Readonly<{}>, {
+        value: number;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type StepsCompoundType = typeof StepsCompound;

package/dist/components/steps/index.js

@@ -0,0 +1,117 @@
+import { defineComponent, createVNode, Fragment } from "vue";
+import { Icon } from "@manohub/icon";
+const Steps = /* @__PURE__ */ defineComponent({
+  name: "Steps",
+  inheritAttrs: false,
+  props: {
+    /** 步骤表（标题 + 可选节点图标） */
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    /** 当前步下标（0 起）；小于它的算已完成 */
+    current: {
+      type: Number,
+      default: 0
+    },
+    variant: {
+      type: String,
+      default: "node"
+    },
+    /** 尺寸档（只覆盖 `--ui-steps-*` 令牌） */
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const root = ["mh-steps", props.size === "md" ? "" : `mh-steps--${props.size}`, attrs.class].filter(Boolean).join(" ");
+      const style = attrs.style;
+      if (props.variant === "bar") {
+        return createVNode("div", {
+          "class": ["mh-steps__bar", attrs.class].filter(Boolean).join(" "),
+          "style": style
+        }, [props.steps.map((step, index) => createVNode("span", {
+          "key": `${step.title}-${index}`,
+          "class": ["mh-steps__seg", index === props.current ? "mh-steps__seg--active" : ""].filter(Boolean).join(" ")
+        }, [createVNode("span", null, [index + 1]), slots.title ? slots.title({
+          item: step,
+          index
+        }) : step.title]))]);
+      }
+      return createVNode("div", {
+        "class": root,
+        "style": style
+      }, [props.steps.map((step, index) => {
+        const state = index < props.current ? "mh-steps__step--done" : index === props.current ? "mh-steps__step--current" : "";
+        return createVNode(Fragment, {
+          "key": `${step.title}-${index}`
+        }, [index > 0 ? createVNode("span", {
+          "class": [
+            "mh-steps__connector",
+            // 连线在「步 index-1 之后」：当前步之后那一段才转蓝
+            index - 1 === props.current ? "mh-steps__connector--active" : ""
+          ].filter(Boolean).join(" ")
+        }, null) : null, createVNode("div", {
+          "class": ["mh-steps__step", state].filter(Boolean).join(" ")
+        }, [createVNode("span", {
+          "class": "mh-steps__node"
+        }, [index < props.current ? createVNode(Icon, {
+          "name": "check",
+          "class": "mh-steps__node-icon",
+          "size": 16
+        }, null) : step.icon ? createVNode(Icon, {
+          "name": step.icon,
+          "class": "mh-steps__node-icon",
+          "size": 16
+        }, null) : index + 1]), createVNode("span", {
+          "class": "mh-steps__title"
+        }, [slots.title ? slots.title({
+          item: step,
+          index
+        }) : step.title])])]);
+      })]);
+    };
+  }
+});
+const StepsProgress = /* @__PURE__ */ defineComponent({
+  name: "StepsProgress",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    return () => {
+      const percent = Math.min(100, Math.max(0, props.value));
+      return createVNode("div", {
+        "class": ["mh-steps__progress", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style,
+        "role": "progressbar",
+        "aria-valuenow": percent,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, [createVNode("span", {
+        "class": "mh-steps__progress-fill",
+        "style": {
+          width: `${percent}%`
+        }
+      }, null)]);
+    };
+  }
+});
+Object.assign(Steps, {
+  Progress: StepsProgress
+});
+export {
+  Steps
+};

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

@@ -0,0 +1,150 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+/**
+ * 开关（**自绘**，不封装 farris）。
+ *
+ * 统一词表（与 `Checkbox` / `Radio` 同款）：`modelValue` / `onChange` / `disabled` / `size`。
+ * 三档尺寸：`sm` 28×14 / `md` 36×18（表格与列表档）/ `lg` 50×24（表单档）——
+ * 几何全在样式层的 `--ui-switch-*` 令牌里，档位只覆盖令牌。`form` 是 `size="lg"` 的既有写法。
+ *
+ * 实现要点（与 `Checkbox` 同配方）：
+ * - 真实 `<input type="checkbox">` 负责可访问性与键盘（Tab / Space），视觉由轨道 + 滑块自绘；
+ * - 结构固定 `input → label → track > knob`：样式层靠**通用兄弟** `~` 命中轨道（文字可夹在中间）；
+ * - 选中态三源等价：原生 `:checked` / 组件下发 `data-state` / 静态档 `.is-checked`；
+ * - `labelPosition` 用 flex `order` 翻转，**不改 DOM 顺序** —— 否则那条 `~` 兄弟规则立刻失效。
+ *
+ * @example
+ * <Switch modelValue={on} label="启用" onChange={(v) => (on = v)} />
+ *
+ * @example 轨道内文案 + 尺寸 + 加载
+ * <Switch v-model={auto} checkedText="开" uncheckedText="关" size="lg" loading={saving} />
+ */
+export declare const Switch: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控开关值 */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 开关文字（复杂内容走默认插槽） */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（28×14 / 36×18 / 50×24） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 表单档（= `size="lg"`；表格/列表里用缺省档） */
+    form: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    labelPosition: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /** 选中时轨道内的文案（给了就自动把轨道加宽到能放下两个字） */
+    checkedText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 未选中时轨道内的文案 */
+    uncheckedText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 加载中：吞掉点击（置 disabled）+ 轨道内转圈 */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自动聚焦 */
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变更回调；参数为新值 */
+    onChange: {
+        type: PropType<(v: boolean) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (v: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 受控开关值 */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 开关文字（复杂内容走默认插槽） */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（28×14 / 36×18 / 50×24） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 表单档（= `size="lg"`；表格/列表里用缺省档） */
+    form: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    labelPosition: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    /** 选中时轨道内的文案（给了就自动把轨道加宽到能放下两个字） */
+    checkedText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 未选中时轨道内的文案 */
+    uncheckedText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 加载中：吞掉点击（置 disabled）+ 轨道内转圈 */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自动聚焦 */
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变更回调；参数为新值 */
+    onChange: {
+        type: PropType<(v: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+    size: ControlSize;
+    disabled: boolean;
+    form: boolean;
+    label: string;
+    onChange: (v: boolean) => void;
+    loading: boolean;
+    autofocus: boolean;
+    modelValue: boolean;
+    labelPosition: "left" | "right";
+    checkedText: string;
+    uncheckedText: string;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/switch/index.js

@@ -0,0 +1,103 @@
+import { defineComponent, computed, createVNode } from "vue";
+const Switch = /* @__PURE__ */ defineComponent({
+  name: "Switch",
+  inheritAttrs: false,
+  props: {
+    /** 受控开关值 */
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /** 开关文字（复杂内容走默认插槽） */
+    label: {
+      type: String,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（28×14 / 36×18 / 50×24） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 表单档（= `size="lg"`；表格/列表里用缺省档） */
+    form: {
+      type: Boolean,
+      default: false
+    },
+    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    labelPosition: {
+      type: String,
+      default: "left"
+    },
+    /** 选中时轨道内的文案（给了就自动把轨道加宽到能放下两个字） */
+    checkedText: {
+      type: String,
+      default: void 0
+    },
+    /** 未选中时轨道内的文案 */
+    uncheckedText: {
+      type: String,
+      default: void 0
+    },
+    /** 加载中：吞掉点击（置 disabled）+ 轨道内转圈 */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 自动聚焦 */
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    /** 值变更回调；参数为新值 */
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const resolvedSize = computed(() => props.form ? "lg" : props.size);
+    const hasTrackText = computed(() => !!props.checkedText || !!props.uncheckedText);
+    const handleChange = (event) => {
+      const next = event.target.checked;
+      emit("update:modelValue", next);
+      props.onChange?.(next);
+    };
+    return () => createVNode("label", {
+      "class": ["mh-switch", resolvedSize.value === "md" ? "" : `mh-switch--${resolvedSize.value}`, props.form ? "mh-switch--form" : "", hasTrackText.value ? "mh-switch--with-text" : "", props.labelPosition === "right" ? "mh-switch--label-right" : "", props.loading ? "is-loading" : "", props.disabled ? "is-disabled" : "", props.modelValue ? "is-checked" : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("input", {
+      "class": "mh-switch__input",
+      "type": "checkbox",
+      "checked": props.modelValue,
+      "disabled": props.disabled || props.loading,
+      "autofocus": props.autofocus,
+      "onChange": handleChange
+    }, null), slots.default || props.label ? createVNode("span", {
+      "class": "mh-switch__label"
+    }, [slots.default ? slots.default() : props.label]) : null, createVNode("span", {
+      "class": "mh-switch__track",
+      "data-state": props.modelValue ? "checked" : "unchecked"
+    }, [props.loading ? createVNode("span", {
+      "class": "mh-switch__spinner"
+    }, null) : hasTrackText.value ? createVNode("span", {
+      "class": "mh-switch__track-text"
+    }, [props.modelValue ? props.checkedText : props.uncheckedText]) : null, createVNode("span", {
+      "class": "mh-switch__knob"
+    }, null)])]);
+  }
+});
+export {
+  Switch
+};