@manohub/ui 0.6.0

package/dist/components/code/index.js

@@ -0,0 +1,117 @@
+import { defineComponent, ref, onBeforeUnmount, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const Code = /* @__PURE__ */ defineComponent({
+  name: "Code",
+  inheritAttrs: false,
+  props: {
+    /** 代码文本（也可用默认插槽给复杂内容）；**复制进剪贴板的就是它** */
+    code: {
+      type: String,
+      default: ""
+    },
+    /** 行内 chip（缺省是代码块） */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /** 行内中性档（不强调的短标识） */
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    /** 右上角语言角标（如 `sql` / `json` / `vue`）；只做标注，**不做语法高亮** */
+    language: {
+      type: String,
+      default: ""
+    },
+    /** 代码块右上角的复制按钮 */
+    copyable: {
+      type: Boolean,
+      default: false
+    },
+    /** 最大高度（数字按 px）：超出后**块内滚动**，用于长日志/长配置 */
+    maxHeight: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 允许软换行（缺省保持 `pre` 的横向不换行 + 横向滚动） */
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    /** 复制结果回调：`true` = 真的写进剪贴板了 */
+    onCopy: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const copied = ref(false);
+    let timer;
+    onBeforeUnmount(() => {
+      if (timer) clearTimeout(timer);
+    });
+    const copy = async () => {
+      const text = props.code;
+      let ok = false;
+      try {
+        if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+          ok = true;
+        }
+      } catch {
+        ok = false;
+      }
+      if (!ok) {
+        console.warn("[ui] Code：当前环境无法写入剪贴板，复制未生效");
+      }
+      copied.value = ok;
+      if (ok) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => copied.value = false, 1500);
+      }
+      props.onCopy?.(ok);
+    };
+    return () => {
+      const extra = attrs.class;
+      const style = attrs.style;
+      const content = slots.default ? slots.default() : props.code;
+      if (props.inline) {
+        return createVNode("code", {
+          "class": ["mh-code", props.plain ? "mh-code--plain" : "", extra].filter(Boolean).join(" "),
+          "style": style
+        }, [content]);
+      }
+      const copyLabel = copied.value ? "已复制" : "复制代码";
+      return createVNode("div", {
+        "class": ["mh-code__wrap", extra].filter(Boolean).join(" "),
+        "style": style
+      }, [createVNode("pre", {
+        "class": ["mh-code--block", props.wrap ? "mh-code--wrap" : ""].filter(Boolean).join(" "),
+        "style": props.maxHeight === void 0 ? void 0 : {
+          maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+          overflow: "auto"
+        }
+      }, [content]), props.language ? createVNode("span", {
+        "class": "mh-code__lang"
+      }, [props.language]) : null, props.copyable ? createVNode("button", {
+        "type": "button",
+        "class": ["mh-button", "mh-button--icon", "mh-code__copy", copied.value ? "is-copied" : ""].filter(Boolean).join(" "),
+        "data-state": copied.value ? "copied" : "idle",
+        "aria-label": copyLabel,
+        "title": copyLabel,
+        "onClick": copy
+      }, [createVNode(Icon, {
+        "name": copied.value ? "check" : "copy",
+        "class": "mh-button__icon"
+      }, null)]) : null]);
+    };
+  }
+});
+export {
+  Code
+};

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

@@ -0,0 +1,163 @@
+import { type PropType } from 'vue';
+/** 自适应高度的行数区间（`true` 等价于 `{ minRows: 3, maxRows: 12 }`） */
+export interface CodeEditorAutoSize {
+    minRows?: number;
+    maxRows?: number;
+}
+/** `CodeEditor` 的公开 props */
+export interface CodeEditorProps {
+    /** 受控值 */
+    modelValue?: string;
+    /** 非受控初始值 */
+    defaultValue?: string;
+    /** 空值提示 */
+    placeholder?: string;
+    /** 固定可见行数（`autoSize: false` 时生效；缺省 4） */
+    rows?: number;
+    /**
+     * 按内容行数自适应高度（**本件缺省开启**，与 `Textarea` 的缺省相反：
+     * 代码区按内容长高是常态，固定行数才是特例）。
+     */
+    autoSize?: boolean | CodeEditorAutoSize;
+    /** 最大高度（数字按 px）：超出后**框内滚动** */
+    maxHeight?: string | number;
+    /** 只读态（原生 `readonly`：仍可选中、可滚动、可复制，只是不可改） */
+    readonly?: boolean;
+    /** 禁用态 */
+    disabled?: boolean;
+    /** 右上角语言角标（如 `sql` / `json`）；只做标注，**不做语法高亮** */
+    language?: string;
+    /** 值变更回调（每次输入都调） */
+    onChange?: (v: string) => void;
+}
+/**
+ * 可编辑代码区（**自绘**；等宽多行 + 按行自适应 + 可限高内滚 + 只读/禁用态）。
+ *
+ * 与只读展示件 `Code` 是一对：**看**用 `Code`（可按只读块观感渲染已高亮节点），
+ * **改**用本件。两件视觉同源（同底 / 同圆角 / 同等宽字），互切时块体不跳。
+ *
+ * ## 与 `Textarea` 的分工（不要重复造）
+ *
+ * 表单里的普通多行文本用 `Input.Textarea`；本件服务**代码**：等宽字、去掉拼写检查与自动大写、
+ * 折行行为按代码区的口径来。两者共用同一套受控词表（`modelValue` / `onChange` / `readonly` / `disabled`）。
+ *
+ * ## 不做的事（有意）
+ *
+ * - **不做语法高亮**：编辑态就是原生 `textarea`，着色一律交给消费方（只读态用 `Code` 的插槽接高亮）；
+ * - **不内建动作按钮**（编辑 / 保存 / 取消 / 复制）：动作条由消费方在外部摆放，本件只负责"能改"；
+ * - 不做行号、不做 Tab 缩进接管（会与浏览器的焦点导航与粘贴行为打架）。
+ *
+ * ## 自适应高度怎么算
+ *
+ * 按 `\n` **计数行数**在 `minRows` / `maxRows` 间截断（同 `Input.Textarea`）：不测 `scrollHeight`
+ * ——那要在每次输入后读布局（强制同步回流），且软换行 / 隐藏容器 / SSR 下都拿不到可靠值。
+ * 代价是**超长单行不会自己长高**（此时由 `maxHeight` + 框内滚动兜底，或由外层容器限宽）。
+ *
+ * @example 受控
+ * <CodeEditor v-model="sql" language="sql" placeholder="写一条 SQL" />
+ *
+ * @example 固定高度 + 限高内滚
+ * <CodeEditor v-model="config" :auto-size="false" :rows="6" :max-height="240" language="json" />
+ *
+ * @example 只读切换（动作按钮由外部摆放）
+ * <CodeEditor v-model="draft" :readonly="!editing" :max-height="320" />
+ * <Button v-if="!editing" @click="editing = true">编辑</Button>
+ */
+export declare const CodeEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    autoSize: {
+        type: PropType<boolean | CodeEditorAutoSize>;
+        default: boolean;
+    };
+    maxHeight: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    onChange: {
+        type: PropType<(v: string) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (v: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    rows: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    autoSize: {
+        type: PropType<boolean | CodeEditorAutoSize>;
+        default: boolean;
+    };
+    maxHeight: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    language: {
+        type: StringConstructor;
+        default: string;
+    };
+    onChange: {
+        type: PropType<(v: string) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    onChange: (v: string) => void;
+    defaultValue: string;
+    placeholder: string;
+    rows: number;
+    modelValue: string;
+    readonly: boolean;
+    autoSize: boolean | CodeEditorAutoSize;
+    language: string;
+    maxHeight: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/code-editor/index.js

@@ -0,0 +1,98 @@
+import { defineComponent, ref, computed, createVNode } from "vue";
+const CodeEditor = /* @__PURE__ */ defineComponent({
+  name: "CodeEditor",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    rows: {
+      type: Number,
+      default: void 0
+    },
+    autoSize: {
+      type: [Boolean, Object],
+      default: true
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: void 0
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    language: {
+      type: String,
+      default: ""
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  setup(props, {
+    emit,
+    attrs
+  }) {
+    const inner = ref(props.defaultValue);
+    const current = computed(() => props.modelValue ?? inner.value);
+    const visibleRows = computed(() => {
+      if (props.autoSize === false) return props.rows ?? 4;
+      const option = typeof props.autoSize === "object" ? props.autoSize : {};
+      const min = option.minRows ?? 3;
+      const max = option.maxRows ?? 12;
+      const lines = (current.value ?? "").split("\n").length;
+      return Math.min(Math.max(lines, min), max);
+    });
+    const areaStyle = computed(() => props.maxHeight === void 0 ? void 0 : {
+      maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+      overflow: "auto"
+    });
+    const onInput = (event) => {
+      const el = event.target;
+      const value = el.value;
+      if (props.modelValue === void 0) inner.value = value;
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+      if (props.modelValue !== void 0 && props.modelValue !== value) el.value = props.modelValue;
+    };
+    return () => createVNode("div", {
+      "class": ["mh-code-editor", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("textarea", {
+      "class": "mh-code-editor__area",
+      "rows": visibleRows.value,
+      "value": current.value,
+      "placeholder": props.placeholder,
+      "readonly": props.readonly,
+      "disabled": props.disabled,
+      "style": areaStyle.value,
+      "spellcheck": false,
+      "autocapitalize": "off",
+      "autocomplete": "off",
+      "onInput": onInput
+    }, null), props.language ? createVNode("span", {
+      "class": "mh-code-editor__lang"
+    }, [props.language]) : null]);
+  }
+});
+export {
+  CodeEditor
+};

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

@@ -0,0 +1,125 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface CollapseProps {
+    /** 头行标题。需要更复杂的内容（计数、行内按钮）用 `title` 插槽；尾部用 `extra` 插槽 */
+    title?: string;
+    /**
+     * 受控展开态。不传即**非受控**（由 `defaultOpen` 起，之后自己管）。
+     * 受控时父级不同步回写，本件会把 DOM 拨回 `open` 的值（见下方「受控」注释）。
+     */
+    open?: boolean;
+    /** 非受控初始展开态，缺省收起（与原生 `<details>` 一致：不写 open 即收起） */
+    defaultOpen?: boolean;
+    /** 开合回调（受控与非受控都会调） */
+    onToggle?: (open: boolean) => void;
+}
+/** 复合写法（与 `Card` / `Panel` 同款：成员走点号，不平级导出） */
+export declare const Collapse: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        open: {
+            type: PropType<boolean | undefined>;
+            default: undefined;
+        };
+        defaultOpen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 禁用：头行不可点（键盘与点击都挡住），用于「条件不满足时不给展开」 */
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        onToggle: {
+            type: PropType<(open: boolean) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        open: boolean | undefined;
+        disabled: boolean;
+        title: string;
+        onToggle: (open: boolean) => void;
+        defaultOpen: boolean;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+        title?: () => VNodeChild;
+        extra?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        open: {
+            type: PropType<boolean | undefined>;
+            default: undefined;
+        };
+        defaultOpen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 禁用：头行不可点（键盘与点击都挡住），用于「条件不满足时不给展开」 */
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        onToggle: {
+            type: PropType<(open: boolean) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        open: boolean | undefined;
+        disabled: boolean;
+        title: string;
+        onToggle: (open: boolean) => void;
+        defaultOpen: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    open: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 禁用：头行不可点（键盘与点击都挡住），用于「条件不满足时不给展开」 */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onToggle: {
+        type: PropType<(open: boolean) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    open: boolean | undefined;
+    disabled: boolean;
+    title: string;
+    onToggle: (open: boolean) => void;
+    defaultOpen: boolean;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    extra?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Stack: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type CollapseCompound = typeof Collapse;

package/dist/components/collapse/index.js

@@ -0,0 +1,95 @@
+import { defineComponent, ref, computed, watch, createVNode, nextTick } from "vue";
+import { Icon } from "@manohub/icon";
+const CollapseRoot = /* @__PURE__ */ defineComponent({
+  name: "Collapse",
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    /** 禁用：头行不可点（键盘与点击都挡住），用于「条件不满足时不给展开」 */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onToggle: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const el = ref(null);
+    const innerOpen = ref(props.defaultOpen);
+    const isOpen = computed(() => props.open ?? innerOpen.value);
+    const onToggle = (event) => {
+      const next = event.target.open;
+      if (props.open === void 0) {
+        innerOpen.value = next;
+      } else if (next !== props.open) {
+        void nextTick(() => {
+          if (el.value) el.value.open = props.open;
+        });
+      }
+      props.onToggle?.(next);
+    };
+    watch(isOpen, (value) => {
+      if (el.value && el.value.open !== value) el.value.open = value;
+    }, {
+      flush: "post"
+    });
+    return () => createVNode("details", {
+      "ref": el,
+      "class": ["mh-collapse", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style,
+      "open": isOpen.value,
+      "data-disabled": props.disabled ? "true" : void 0,
+      "onToggle": onToggle
+    }, [createVNode("summary", {
+      "class": "mh-collapse-header",
+      "aria-disabled": props.disabled ? "true" : void 0,
+      "onClick": (event) => {
+        if (props.disabled) event.preventDefault();
+      }
+    }, [slots.title ? slots.title() : props.title ? createVNode("span", {
+      "class": "mh-collapse-title"
+    }, [props.title]) : null, createVNode("span", {
+      "class": "mh-collapse-extra"
+    }, [slots.extra?.(), createVNode(Icon, {
+      "name": "chevron-down",
+      "class": "mh-collapse-caret"
+    }, null)])]), slots.default?.()]);
+  }
+});
+const CollapseStack = /* @__PURE__ */ defineComponent({
+  name: "CollapseStack",
+  inheritAttrs: false,
+  slots: Object,
+  setup(_props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-collapse-stack", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default?.()]);
+  }
+});
+const Collapse = Object.assign(CollapseRoot, {
+  Stack: CollapseStack
+});
+export {
+  Collapse
+};

package/dist/components/control-size.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 控件尺寸档（`sm` / `md` / `lg`）—— 全库唯一的尺寸词表。
+ *
+ * 为什么单独成文件而不是跟着某个件走：它是**跨件**的公共词汇（`Checkbox` / `Button` /
+ * `Input` / `Select` / `Switch` / `Capsule` 等共用），故落在包级 `components/` 根下、
+ * 由各件引回；下游若要用同一套词表，从这里导出即可。
+ */
+export type ControlSize = 'sm' | 'md' | 'lg';