@manohub/ui 0.6.0

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

@@ -0,0 +1,331 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface CheckboxOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+/**
+ * 复选框（**自建**，不封装 farris）。
+ *
+ * 形态与 `Switch` / `Radio` 对齐（统一词表 `modelValue` / `onChange` / `disabled` / `size`，
+ * 三档尺寸只覆盖 `--ui-checkbox-*` 令牌）。
+ *
+ * 实现要点：
+ * - 真实 `<input type="checkbox">` 负责可访问性与键盘（Tab / Space），视觉由旁边的方块自绘；
+ * - 方块用 `data-state`（`checked` / `indeterminate` / `unchecked`）承载状态，样式全部走 `--ui-*` 令牌；
+ *   与 `Table` 勾选列同一套状态协议；
+ * - **除 `class` / `style` 外的属性透传到真实 `<input>`**：`aria-label`、`id`、`name` 与事件只有挂在
+ *   可交互元素上才算数（挂到根 `label` 上读屏与表单都取不到）。本件 `inheritAttrs: false`，
+ *   不透传就会**静默丢掉** —— `Table` 的勾选列正是靠这条拿到 `aria-label`。
+ * - **选中 / 半选填主色**（没有色彩角色维度）：与 `Switch` 的选中轨道、`Table` 勾选列
+ *   （复用本件）以及 `@aihub/theme` 的「已选择背景取主色」三处同一口径。
+ *   要再引入中性面填充请做成 `tone` 的第二档，**不要**把默认改回深色；
+ * - 半选（`indeterminate`）是**旁路态**：点击后由消费方自行决定落到 `checked` 还是 `unchecked`。
+ *
+ * @example
+ * <Checkbox modelValue={row.enabled} onChange={(v) => (row.enabled = v)}>是否生效</Checkbox>
+ *
+ * @example 全选 / 半选
+ * <Checkbox indeterminate={someChecked && !allChecked}
+ *   modelValue={allChecked} onChange={(v) => toggleAll(v)}>全选</Checkbox>
+ *
+ * @example 多选组（值就是选中项的数组）
+ * <Checkbox.Group v-model={picked} options={[{ label: '读', value: 'r' }]} />
+ */
+export declare const Checkbox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控勾选值 */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 自动聚焦 */
+    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;
+    };
+    /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 自动聚焦 */
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变更回调；参数为新勾选值 */
+    onChange: {
+        type: PropType<(v: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, {
+    size: ControlSize;
+    disabled: boolean;
+    onChange: (v: boolean) => void;
+    autofocus: boolean;
+    modelValue: boolean;
+    indeterminate: boolean;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const CheckboxCompound: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        /** 受控勾选值 */
+        modelValue: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+        /** 自动聚焦 */
+        autofocus: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 值变更回调；参数为新勾选值 */
+        onChange: {
+            type: PropType<(v: boolean) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        'update:modelValue': (v: boolean) => true;
+    }, import("vue").PublicProps, {
+        size: ControlSize;
+        disabled: boolean;
+        onChange: (v: boolean) => void;
+        autofocus: boolean;
+        modelValue: boolean;
+        indeterminate: boolean;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        /** 受控勾选值 */
+        modelValue: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+        indeterminate: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+        /** 自动聚焦 */
+        autofocus: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 值变更回调；参数为新勾选值 */
+        onChange: {
+            type: PropType<(v: boolean) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        size: ControlSize;
+        disabled: boolean;
+        onChange: (v: boolean) => void;
+        autofocus: boolean;
+        modelValue: boolean;
+        indeterminate: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    /** 受控勾选值 */
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 自动聚焦 */
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变更回调；参数为新勾选值 */
+    onChange: {
+        type: PropType<(v: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: boolean) => any) | undefined;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (v: boolean) => true;
+}, string, {
+    size: ControlSize;
+    disabled: boolean;
+    onChange: (v: boolean) => void;
+    autofocus: boolean;
+    modelValue: boolean;
+    indeterminate: boolean;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Group: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 选项表 */
+        options: {
+            type: PropType<CheckboxOption[]>;
+            default: () => never[];
+        };
+        /** 受控值（选中项的 value 数组） */
+        modelValue: {
+            type: PropType<Array<string | number>>;
+            default: undefined;
+        };
+        /** 非受控初值 */
+        defaultValue: {
+            type: PropType<Array<string | number>>;
+            default: () => never[];
+        };
+        /** 纵向排列（缺省横向换行） */
+        vertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 整组禁用 */
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 尺寸档（透传给组内每一项） */
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+        /** 值变更回调；参数为新的选中数组 */
+        onChange: {
+            type: PropType<(v: Array<string | number>) => void>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        'update:modelValue': (v: Array<string | number>) => true;
+    }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 选项表 */
+        options: {
+            type: PropType<CheckboxOption[]>;
+            default: () => never[];
+        };
+        /** 受控值（选中项的 value 数组） */
+        modelValue: {
+            type: PropType<Array<string | number>>;
+            default: undefined;
+        };
+        /** 非受控初值 */
+        defaultValue: {
+            type: PropType<Array<string | number>>;
+            default: () => never[];
+        };
+        /** 纵向排列（缺省横向换行） */
+        vertical: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 整组禁用 */
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 尺寸档（透传给组内每一项） */
+        size: {
+            type: PropType<ControlSize>;
+            default: string;
+        };
+        /** 值变更回调；参数为新的选中数组 */
+        onChange: {
+            type: PropType<(v: Array<string | number>) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((v: (string | number)[]) => any) | undefined;
+    }>, {
+        size: ControlSize;
+        vertical: boolean;
+        disabled: boolean;
+        onChange: (v: Array<string | number>) => void;
+        options: CheckboxOption[];
+        defaultValue: (string | number)[];
+        modelValue: (string | number)[];
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type CheckboxCompoundType = typeof CheckboxCompound;

package/dist/components/checkbox/index.js

@@ -0,0 +1,165 @@
+import { defineComponent, ref, computed, watchEffect, createVNode, mergeProps } from "vue";
+import { Icon } from "@manohub/icon";
+const Checkbox = /* @__PURE__ */ defineComponent({
+  name: "Checkbox",
+  inheritAttrs: false,
+  props: {
+    /** 受控勾选值 */
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /** 半选态（视觉与 `input.indeterminate` 同步；不改变 `modelValue`） */
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 自动聚焦 */
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    /** 值变更回调；参数为新勾选值 */
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const inputRef = ref(null);
+    const inputAttrs = computed(() => {
+      const {
+        class: _class,
+        style: _style,
+        ...rest
+      } = attrs;
+      return rest;
+    });
+    watchEffect(() => {
+      if (inputRef.value) inputRef.value.indeterminate = props.indeterminate;
+    });
+    const handleChange = (event) => {
+      const next = event.target.checked;
+      emit("update:modelValue", next);
+      props.onChange?.(next);
+    };
+    return () => {
+      const state = props.indeterminate ? "indeterminate" : props.modelValue ? "checked" : "unchecked";
+      return createVNode("label", {
+        "class": ["mh-checkbox", props.size === "md" ? "" : `mh-checkbox--${props.size}`, props.disabled ? "is-disabled" : "", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [createVNode("input", mergeProps(inputAttrs.value, {
+        "ref": inputRef,
+        "class": "mh-checkbox__input",
+        "type": "checkbox",
+        "checked": props.modelValue,
+        "disabled": props.disabled,
+        "autofocus": props.autofocus,
+        "onChange": handleChange
+      }), null), createVNode("span", {
+        "class": "mh-checkbox__box",
+        "data-state": state
+      }, [props.indeterminate ? createVNode("span", {
+        "class": "mh-checkbox__dash"
+      }, null) : createVNode(Icon, {
+        "name": "check",
+        "class": "mh-checkbox__icon"
+      }, null)]), slots.default ? createVNode("span", {
+        "class": "mh-checkbox__label"
+      }, [slots.default()]) : null]);
+    };
+  }
+});
+const CheckboxGroup = /* @__PURE__ */ defineComponent({
+  name: "CheckboxGroup",
+  inheritAttrs: false,
+  props: {
+    /** 选项表 */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /** 受控值（选中项的 value 数组） */
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
+    /** 非受控初值 */
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    /** 纵向排列（缺省横向换行） */
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    /** 整组禁用 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（透传给组内每一项） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 值变更回调；参数为新的选中数组 */
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const inner = ref(props.defaultValue);
+    const current = computed(() => props.modelValue ?? inner.value);
+    const toggle = (value, checked) => {
+      const next = checked ? [...current.value, value] : current.value.filter((item) => item !== value);
+      if (props.modelValue === void 0) inner.value = next;
+      emit("update:modelValue", next);
+      props.onChange?.(next);
+    };
+    return () => createVNode("div", {
+      "class": ["mh-checkbox__group", props.vertical ? "mh-checkbox__group--vertical" : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [props.options.map((option) => createVNode(Checkbox, {
+      "key": String(option.value),
+      "modelValue": current.value.includes(option.value),
+      "disabled": props.disabled || option.disabled,
+      "size": props.size,
+      "onChange": (checked) => toggle(option.value, checked)
+    }, {
+      default: () => option.label
+    })), slots.default?.()]);
+  }
+});
+Object.assign(Checkbox, {
+  Group: CheckboxGroup
+});
+export {
+  Checkbox
+};

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

@@ -0,0 +1,134 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/**
+ * 代码（**自绘**；行内 chip / 代码块 / 语言角标 / 复制位）—— **只读展示件**。
+ *
+ * 三种形态：`inline`（行内 chip，如版本号、规则 ID）、`inline + plain`（中性档）、
+ * 缺省（代码块 + 右上角 hover / 聚焦显形的方形图标复制按钮 + 可选语言角标）。
+ * 代码块**缺省不折行**（横向滚动，缩进与列对齐不被破坏），`wrap` 才软换行。
+ *
+ * **编辑态用 `CodeEditor`**（本件只管展示）：要「只读看 + 就地改」，把两件组合起来用
+ * ——只读时用本件渲染（可接已高亮节点），切到编辑时换成 `CodeEditor`。
+ *
+ * ## 高亮由消费方声明（本件不做语法高亮）
+ *
+ * 本件不认识任何语言：`language` 只画右上角的**角标**，**不做**分词着色。
+ * 需要高亮时走**默认插槽**传入已高亮过的节点（VNode / 已转义好的 HTML 片段皆可），
+ * 此时 `code` 仍应给**纯文本**——它是复制进剪贴板的内容（插槽内容是渲染结果，不能拿去复制）。
+ *
+ * ## 复制按钮的面归按钮族（`.mh-button--icon`）
+ *
+ * 本件只补定位与显隐（见 `styles/components/code.css`）；按钮挂在宿主 `.mh-code__wrap` 上
+ * 而**不是代码块里** —— 代码块是 `overflow-x: auto` 的滚动容器，放进去会被裁掉。
+ *
+ * ## 复制动作与降级
+ *
+ * 走 `navigator.clipboard.writeText`（**唯一需要 JS 的部分**，按 copied 状态二选一图标）。
+ * 环境没有该 API（旧浏览器、非安全上下文）或写入被拒时：不谎报成功，`onCopy(false)` 交回结果
+ * 并 `console.warn` 一次 —— 消费方据此提示「请手动复制」（本件不自己弹提示，避免与页面的提示口径两套）。
+ *
+ * @example 行内
+ * <Code inline>v1.2.0</Code>
+ * <Code inline plain>RULE-1024</Code>
+ *
+ * @example 代码块 + 语言角标 + 复制
+ * <Code :code="sql" language="sql" copyable @copy="(ok) => ok || showManualTip()" />
+ *
+ * @example 高亮交给消费方（`code` 仍是复制用的纯文本）
+ * <Code :code="sql" language="sql" copyable>
+ *   <span v-html="highlightedSql" />
+ * </Code>
+ */
+export declare const Code: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 代码文本（也可用默认插槽给复杂内容）；**复制进剪贴板的就是它** */
+    code: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 行内 chip（缺省是代码块） */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 行内中性档（不强调的短标识） */
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 右上角语言角标（如 `sql` / `json` / `vue`）；只做标注，**不做语法高亮** */
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 代码块右上角的复制按钮 */
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 最大高度（数字按 px）：超出后**块内滚动**，用于长日志/长配置 */
+    maxHeight: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** 允许软换行（缺省保持 `pre` 的横向不换行 + 横向滚动） */
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 复制结果回调：`true` = 真的写进剪贴板了 */
+    onCopy: {
+        type: PropType<(ok: boolean) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 代码文本（也可用默认插槽给复杂内容）；**复制进剪贴板的就是它** */
+    code: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 行内 chip（缺省是代码块） */
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 行内中性档（不强调的短标识） */
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 右上角语言角标（如 `sql` / `json` / `vue`）；只做标注，**不做语法高亮** */
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 代码块右上角的复制按钮 */
+    copyable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 最大高度（数字按 px）：超出后**块内滚动**，用于长日志/长配置 */
+    maxHeight: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    /** 允许软换行（缺省保持 `pre` 的横向不换行 + 横向滚动） */
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 复制结果回调：`true` = 真的写进剪贴板了 */
+    onCopy: {
+        type: PropType<(ok: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    inline: boolean;
+    wrap: boolean;
+    plain: boolean;
+    code: string;
+    onCopy: (ok: boolean) => void;
+    language: string;
+    copyable: boolean;
+    maxHeight: string | number;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;