@manohub/ui 0.6.0

package/dist/components/button/index.js

@@ -0,0 +1,191 @@
+import { defineComponent, computed, createVNode, mergeProps, Fragment } from "vue";
+import { Icon } from "@manohub/icon";
+const Button = /* @__PURE__ */ defineComponent({
+  name: "Button",
+  inheritAttrs: false,
+  props: {
+    /** 按钮型（缺省 `secondary`，与规范「次要为默认」一致） */
+    variant: {
+      type: String,
+      default: "secondary"
+    },
+    /** 尺寸：`sm` 24 / `md` 32（标准）/ `lg` 40 */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 外形：胶囊 / 正圆（缺省方角，跟主题圆角令牌） */
+    shape: {
+      type: String,
+      default: "default"
+    },
+    /** 危险色（正交修饰：把该型的色彩槽位换成错误色；`variant="danger"` 是它的等价写法） */
+    danger: {
+      type: Boolean,
+      default: false
+    },
+    /** 撑满父容器宽度（表单底栏 / 移动端主操作） */
+    block: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 加载态：吞掉点击（置 disabled）+ 环 + **主色底降透明**（显式合成，字与环不变） */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 图标名（`@manohub/icon` 的闭合枚举，写错名字编译期即报错）；自定义图标走 `icon` 插槽 */
+    icon: {
+      type: String,
+      default: void 0
+    },
+    /** 尾部图标名（菜单按钮的箭头用 `caret`，这个是普通尾图标） */
+    trailingIcon: {
+      type: String,
+      default: void 0
+    },
+    /** 渲染下拉箭头（菜单按钮形态；转向由 popup.css 承担） */
+    caret: {
+      type: Boolean,
+      default: false
+    },
+    /** 菜单按钮结构（文本区 ‖ 分割线 ‖ 箭头区） */
+    menu: {
+      type: Boolean,
+      default: false
+    },
+    /** 原生按钮类型（缺省 `button`：不给默认值会让表单里的按钮意外提交） */
+    type: {
+      type: String,
+      default: "button"
+    },
+    /** 给了就渲染成 `<a>`（链接按钮：新窗口打开 / 复制链接地址都靠它） */
+    href: {
+      type: String,
+      default: void 0
+    },
+    /** `<a>` 形态的打开方式（如 `_blank`） */
+    target: {
+      type: String,
+      default: void 0
+    },
+    /** 原生 title（图标按钮的无障碍提示） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 原生 popover 目标 id（菜单按钮用；开合交给操作层） */
+    popoverTarget: {
+      type: String,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const isDanger = computed(() => props.danger || props.variant === "danger");
+    const baseVariant = computed(() => props.variant === "danger" ? "primary" : props.variant);
+    const classes = computed(() => ["mh-button", `mh-button--${baseVariant.value}`, props.size === "md" ? "" : `mh-button--${props.size}`, props.shape === "default" ? "" : `mh-button--${props.shape}`, isDanger.value ? "mh-button--danger" : "", props.block ? "mh-button--block" : "", props.menu ? "mh-button--menu" : "", props.loading ? "mh-button--loading" : "", props.disabled ? "is-disabled" : "", attrs.class].filter(Boolean).join(" "));
+    const renderIcon = (name, cls) => slots.icon && cls === "mh-button__icon" ? slots.icon() : name ? createVNode(Icon, {
+      "name": name,
+      "class": cls
+    }, null) : null;
+    const content = () => {
+      const body = props.menu ? createVNode("span", {
+        "class": "mh-button__label"
+      }, [slots.default?.()]) : slots.default?.();
+      return createVNode(Fragment, null, [props.loading ? createVNode("span", {
+        "class": "mh-button__spinner"
+      }, null) : renderIcon(props.icon, "mh-button__icon"), body, props.menu ? createVNode("span", {
+        "class": "mh-button__divider"
+      }, null) : null, props.caret ? createVNode(Icon, {
+        "name": "chevron-down",
+        "class": "mh-button__caret mh-popup-caret"
+      }, null) : null, props.trailingIcon ? createVNode(Icon, {
+        "name": props.trailingIcon,
+        "class": "mh-button__icon"
+      }, null) : null]);
+    };
+    return () => {
+      const common = {
+        ...attrs,
+        class: classes.value,
+        style: attrs.style,
+        title: props.title
+      };
+      if (props.href) {
+        return createVNode("a", mergeProps(common, {
+          "href": props.href,
+          "target": props.target,
+          "rel": props.target === "_blank" ? "noopener noreferrer" : void 0,
+          "aria-disabled": props.disabled || props.loading ? "true" : void 0,
+          "onClick": (event) => {
+            if (props.disabled || props.loading) {
+              event.preventDefault();
+              return;
+            }
+            props.onClick?.(event);
+          }
+        }), [content()]);
+      }
+      return createVNode("button", mergeProps(common, {
+        "type": props.type,
+        "disabled": props.disabled || props.loading
+      }, {
+        popovertarget: props.popoverTarget
+      }, {
+        "onClick": props.onClick
+      }), [content()]);
+    };
+  }
+});
+const ButtonGroup = /* @__PURE__ */ defineComponent({
+  name: "ButtonGroup",
+  inheritAttrs: false,
+  props: {
+    /** 连体档（工具条 / 连体切换：相邻边重合，首末保留圆角） */
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("span", {
+      "class": ["mh-button__group", props.compact ? "mh-button__group--compact" : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default?.()]);
+  }
+});
+const ButtonDivider = /* @__PURE__ */ defineComponent({
+  name: "ButtonDivider",
+  inheritAttrs: false,
+  setup(_props, {
+    attrs
+  }) {
+    return () => createVNode("span", {
+      "class": ["mh-button__divider", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, null);
+  }
+});
+Object.assign(Button, {
+  Group: ButtonGroup,
+  Divider: ButtonDivider
+});
+export {
+  Button
+};

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

@@ -0,0 +1,161 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface CapsuleOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+/** 外形档：`pill` = 胶囊（缺省）；`square` = 圆角矩形（轨道与选中项同取复选框档圆角） */
+export type CapsuleShape = 'pill' | 'square';
+/**
+ * 胶囊选择器（**自绘**；一组互斥选项，选中项白底胶囊浮在轨道上）。
+ *
+ * ## 结构与键盘全靠原生
+ *
+ * 渲染的是「**平级相邻、开关在前**」的 `<input type="radio">` + `<label for>`：
+ * 样式层靠 `input:checked + .mh-capsule__item` 选态，故**顺序不能调**（input 必须紧邻项之前）；
+ * 项上带 `for`/`id` 是为了整项可点（开关自身是 1px 隐身盒、`pointer-events: none`）。
+ * Tab 进组、← → 换项、空格选中、跳过禁用项 —— 都是原生 radio 组的行为，本件不写键盘代码。
+ *
+ * ## 外形档（`shape`）
+ *
+ * - `pill`（缺省）：整条轨道与选中项都是胶囊形（圆角取圆角满档令牌）；
+ * - `square`：整组变圆角矩形，**轨道与选中项同取复选框档圆角**（比控件档更方），
+ *   与方角控件并排排版时用；只覆盖圆角令牌，几何与颜色一律不变。
+ *
+ * ## 与面板组合（页签用法）
+ *
+ * 外面套 `styles/operations/tabset.css` 的 `.mh-tabset`：**同一组 `name` 的 radio** 既是本件的选项、
+ * 也是操作层的档位开关（第 n 项 ↔ 第 n 块面板）。本件不认识 tabset，tabset 也不认识本件（两层零互指）。
+ *
+ * 状态三源等价：原生 `input:checked` / 组件下发 `[data-state='active'|'inactive']` / 静态档 `.is-selected`。
+ *
+ * ## 必须有值
+ *
+ * 单选语义就是必选其一：受控传 `modelValue`，非受控由 `defaultValue` 起，**两者都没给时缺省选中第一个
+ * 可选项**（跳过禁用项；没有可选项才是空值）—— 与 `Radio.Group` / `Radio.Card` / `Tabset` 同一条口径。
+ *
+ * @example 选项表
+ * <Capsule :options="[{label:'全部',value:'all'}]" v-model="v" />
+ *
+ * @example 方形档（与方角控件并排时用）
+ * <Capsule shape="square" :options="[{label:'全部',value:'all'}]" v-model="v" />
+ *
+ * @example 与面板组合（页签）
+ * <div class="mh-tabset">
+ *   <Capsule name="t1" :options="tabs" v-model="v" />
+ *   <div class="mh-tabset-panels">…第 n 块面板…</div>
+ * </div>
+ */
+export declare const Capsule: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 选项表（也可用默认插槽自排） */
+    options: {
+        type: PropType<CapsuleOption[]>;
+        default: undefined;
+    };
+    /** 受控值；不传即非受控（由 `defaultValue` 起，再缺省则为第一个可选项） */
+    modelValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始值（缺省 = 第一个可选项） */
+    defaultValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 整组禁用 */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 外形：`pill` 胶囊（缺省）/ `square` 圆角矩形（轨道与选中项同取复选框档圆角） */
+    shape: {
+        type: PropType<CapsuleShape>;
+        default: string;
+    };
+    /** 撑满父容器（每项等分宽度） */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 选中变化回调 */
+    onChange: {
+        type: PropType<(value: string | number) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (v: string | number) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 选项表（也可用默认插槽自排） */
+    options: {
+        type: PropType<CapsuleOption[]>;
+        default: undefined;
+    };
+    /** 受控值；不传即非受控（由 `defaultValue` 起，再缺省则为第一个可选项） */
+    modelValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始值（缺省 = 第一个可选项） */
+    defaultValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 整组禁用 */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 外形：`pill` 胶囊（缺省）/ `square` 圆角矩形（轨道与选中项同取复选框档圆角） */
+    shape: {
+        type: PropType<CapsuleShape>;
+        default: string;
+    };
+    /** 撑满父容器（每项等分宽度） */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 选中变化回调 */
+    onChange: {
+        type: PropType<(value: string | number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: string | number) => any) | undefined;
+}>, {
+    block: boolean;
+    size: ControlSize;
+    disabled: boolean;
+    name: string;
+    onChange: (value: string | number) => void;
+    shape: CapsuleShape;
+    options: CapsuleOption[];
+    defaultValue: string | number | undefined;
+    modelValue: string | number | undefined;
+}, SlotsType<{
+    default?: (context: {
+        value: string | number | undefined;
+        select: (value: string | number) => void;
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/capsule/index.js

@@ -0,0 +1,101 @@
+import { defineComponent, ref, computed, createVNode, Fragment } from "vue";
+const Capsule = /* @__PURE__ */ defineComponent({
+  name: "Capsule",
+  inheritAttrs: false,
+  props: {
+    /** 选项表（也可用默认插槽自排） */
+    options: {
+      type: Array,
+      default: void 0
+    },
+    /** 受控值；不传即非受控（由 `defaultValue` 起，再缺省则为第一个可选项） */
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 非受控初始值（缺省 = 第一个可选项） */
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 原生分组名（与 tabset 组合时**必须**给，操作层靠它认组；缺省自动生成） */
+    name: {
+      type: String,
+      default: void 0
+    },
+    /** 整组禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 外形：`pill` 胶囊（缺省）/ `square` 圆角矩形（轨道与选中项同取复选框档圆角） */
+    shape: {
+      type: String,
+      default: "pill"
+    },
+    /** 撑满父容器（每项等分宽度） */
+    block: {
+      type: Boolean,
+      default: false
+    },
+    /** 选中变化回调 */
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const group = `mh-capsule-${Math.random().toString(36).slice(2, 10)}`;
+    const inner = ref(props.defaultValue);
+    const current = computed(() => props.modelValue ?? inner.value ?? props.options?.find((option) => !option.disabled)?.value);
+    const select = (value) => {
+      const option = props.options?.find((item) => item.value === value);
+      if (props.disabled || option?.disabled) return;
+      if (props.modelValue === void 0) inner.value = value;
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+    };
+    return () => createVNode("div", {
+      "class": ["mh-capsule", props.size === "md" ? "" : `mh-capsule--${props.size}`, props.shape === "square" ? "mh-capsule--square" : "", props.block ? "mh-capsule--block" : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default ? slots.default({
+      value: current.value,
+      select
+    }) : props.options?.map((option, index) => {
+      const id = `${group}-${index}`;
+      const checked = option.value === current.value;
+      return createVNode(Fragment, {
+        "key": String(option.value)
+      }, [createVNode("input", {
+        "class": "mh-capsule__input",
+        "type": "radio",
+        "id": id,
+        "name": props.name ?? group,
+        "value": option.value,
+        "checked": checked,
+        "disabled": props.disabled || option.disabled,
+        "onChange": () => select(option.value)
+      }, null), createVNode("label", {
+        "class": ["mh-capsule__item", props.disabled || option.disabled ? "is-disabled" : "", checked ? "is-selected" : ""].filter(Boolean).join(" "),
+        "for": id,
+        "data-state": checked ? "active" : "inactive"
+      }, [option.label])]);
+    })]);
+  }
+});
+export {
+  Capsule
+};