@manohub/ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,335 @@
+import { defineComponent, createVNode, mergeProps, ref, computed, onBeforeUnmount, isVNode } from "vue";
+import { Icon } from "@manohub/icon";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CodeView = /* @__PURE__ */ defineComponent({
+  name: "CodeView",
+  inheritAttrs: false,
+  props: {
+    code: {
+      type: String,
+      default: ""
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    language: {
+      type: String,
+      default: ""
+    },
+    copyable: {
+      type: Boolean,
+      default: false
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: void 0
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    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] CodeBlock.View：当前环境无法写入剪贴板，复制未生效");
+      }
+      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-block", "mh-code-block--inline", props.plain ? "mh-code-block--plain" : "", extra].filter(Boolean).join(" "),
+          "style": style
+        }, [content]);
+      }
+      const copyLabel = copied.value ? "已复制" : "复制代码";
+      const limited = props.maxHeight === void 0 ? void 0 : {
+        maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+        overflow: "auto"
+      };
+      return createVNode("div", {
+        "class": ["mh-code-block", props.wrap ? "mh-code-block--wrap" : "", extra].filter(Boolean).join(" "),
+        "style": style
+      }, [createVNode("pre", {
+        "class": "mh-code-block__view",
+        "style": limited
+      }, [content]), props.language ? createVNode("span", {
+        "class": "mh-code-block__lang"
+      }, [props.language]) : null, props.copyable ? createVNode("button", {
+        "type": "button",
+        "class": ["mh-button", "mh-button--icon", "mh-code-block__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]);
+    };
+  }
+});
+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-block", "mh-code-block--editable", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("textarea", {
+      "class": "mh-code-block__editor",
+      "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-block__lang"
+    }, [props.language]) : null]);
+  }
+});
+const CodeBlockBase = /* @__PURE__ */ defineComponent({
+  name: "CodeBlock",
+  inheritAttrs: false,
+  props: {
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    /* —— 只读档（`editable` 为假时生效） —— */
+    code: {
+      type: String,
+      default: ""
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    copyable: {
+      type: Boolean,
+      default: false
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    onCopy: {
+      type: Function,
+      default: void 0
+    },
+    /* —— 编辑档（`editable` 为真时生效） —— */
+    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
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /* —— 两档共用 —— */
+    language: {
+      type: String,
+      default: ""
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    return () => {
+      let _slot;
+      const shared = {
+        language: props.language,
+        maxHeight: props.maxHeight,
+        class: attrs.class,
+        style: attrs.style
+      };
+      if (props.editable) {
+        return createVNode(CodeEditor, mergeProps(shared, {
+          "modelValue": props.modelValue,
+          "defaultValue": props.defaultValue,
+          "placeholder": props.placeholder,
+          "rows": props.rows,
+          "autoSize": props.autoSize,
+          "readonly": props.readonly,
+          "disabled": props.disabled,
+          "onChange": props.onChange,
+          "onUpdate:modelValue": (v) => emit("update:modelValue", v)
+        }), null);
+      }
+      const view = {
+        ...shared,
+        code: props.code,
+        inline: props.inline,
+        plain: props.plain,
+        copyable: props.copyable,
+        wrap: props.wrap,
+        onCopy: props.onCopy
+      };
+      const body = slots.default;
+      return body ? createVNode(CodeView, view, _isSlot(_slot = body()) ? _slot : {
+        default: () => [_slot]
+      }) : createVNode(CodeView, view, null);
+    };
+  }
+});
+const CodeBlock = Object.assign(CodeBlockBase, {
+  View: CodeView,
+  Editor: CodeEditor
+});
+export {
+  CodeBlock,
+  CodeEditor,
+  CodeView
+};

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

@@ -1,6 +1,6 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 export type DialogWidth = 'md' | 'lg';
-/** 语义档：决定标题左侧裸符号的图形与颜色（缺省不渲染图标） */
+/** 语义档：决定标题左侧图标的图形与颜色（缺省不渲染图标） */
 export type DialogTone = 'info' | 'success' | 'warning' | 'error';
 /**
  * 对话框（**自绘**；模态语义与遮罩全由原生 `<dialog>` 给）。
@@ -50,7 +50,7 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
     /**
      * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
      * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
-     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     * 它**只加一个带圈语义图标与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
      */
     tone: {
         type: PropType<DialogTone>;
@@ -157,7 +157,7 @@ export declare const Dialog: import("vue").DefineComponent<import("vue").Extract
     /**
      * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
      * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
-     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     * 它**只加一个带圈语义图标与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
      */
     tone: {
         type: PropType<DialogTone>;

package/dist/components/dialog/index.js

@@ -2,10 +2,10 @@ import { defineComponent, ref, watch, onMounted, onBeforeUnmount, computed, crea
 import { Icon } from "@manohub/icon";
 import { Button } from "../button/index.js";
 const TONE_ICON = {
-  info: "info",
-  success: "check",
-  warning: "alert",
-  error: "close"
+  info: "info-circle",
+  success: "check-circle",
+  warning: "alert-circle",
+  error: "close-circle"
 };
 const Dialog = /* @__PURE__ */ defineComponent({
   name: "Dialog",
@@ -24,7 +24,7 @@ const Dialog = /* @__PURE__ */ defineComponent({
     /**
      * 语义档（缺省不渲染图标）：`warning` / `error` 用于「这一步有风险」的确认 ——
      * 服务层的 `confirm()` / `alert()` 就是靠它把「删除确认」与「保存成功」区分开的。
-     * 它**只加一个裸符号与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
+     * 它**只加一个带圈语义图标与配色**，不改标题文案、不动底栏按钮的语义（危险色仍由 `okDanger` 定）。
      */
     tone: {
       type: String,

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

@@ -41,7 +41,12 @@ export interface FilterProps {
     title?: string;
     /** 标题下的说明小字（透传给 `Form.Header`） */
     description?: string;
-    /** label 列宽（px）；缺省 `56`（见 `FILTER_LABEL_WIDTH`），透传给 `Form` */
+    /**
+     * label 列宽（px），透传给 `Form`。
+     *
+     * **缺省不设**：不传即与 `Form` 一致（取令牌 `--ui-form-label-width`，120）。
+     * 想收窄（筛选条的标签多为四字）就显式传，例如 `labelWidth={68}`。
+     */
     labelWidth?: number;
     /** 受控条件快照（`条件名 → 值`）；不传即非受控（由 `defaultValue` 起） */
     modelValue?: FilterValues;
@@ -79,7 +84,8 @@ export interface FilterItemProps {
  * 增量只有一处 —— **读写的值都是归一后的**（`'all'` / 空数组 / 空值 → 空串），
  * 于是消费方直接把 `value` 绑给控件，不必自己处理哨兵。
  *
- * 字段宽**自适应**：容器够宽一行排下，窄了整体换行（列距 24 / 行距 16）。
+ * 字段宽**自适应**：字段区是 `Form` 的多列动态档（`Filter` 传 `columns="auto"`），
+ * 故本件只输出 `Form.Item` 自己的类 —— 列宽由那条网格轨道算，换行下来的字段与上一行逐列对齐。
  *
  * @example
  * <Filter.Item code="status" label="授权状态">

package/dist/components/filter/index.js

@@ -2,8 +2,6 @@ import { defineComponent, createVNode, ref, h, Fragment } from "vue";
 import { Button } from "../button/index.js";
 import { FormItem, Form } from "../form/index.js";
 const FILTER_ALL = "all";
-const FILTER_LABEL_WIDTH = 68;
-const FILTER_GAP = 16;
 function normalizeFilterValue(value) {
   if (Array.isArray(value)) {
     const kept = value.map((item) => normalizeFilterValue(item)).filter((item) => item !== "");
@@ -96,7 +94,7 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       emit("update:modelValue", next);
       props.onReset?.(next);
     };
-    const onFieldsKeydown = (event) => {
+    const onFormKeydown = (event) => {
       if (event.key !== "Enter" || event.isComposing) return;
       const target = event.target;
       if (target?.tagName !== "INPUT" || target.closest("[popover]")) return;
@@ -118,30 +116,23 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       "ref": formRef,
       "class": ["mh-filter__form", attrs.class].filter(Boolean).join(" "),
       "style": attrs.style,
-      "labelWidth": props.labelWidth ?? FILTER_LABEL_WIDTH,
-      "gap": FILTER_GAP,
+      "labelWidth": props.labelWidth,
+      "columns": "auto",
+      "onKeydown": onFormKeydown,
       "modelValue": props.modelValue,
       "defaultValue": props.defaultValue,
       "onChange": onFormChange
     }, {
-      default: () => [
-        /* 插槽一律走对象形态：TSX 的 `v-slots={{…}}` 会被当**普通属性**丢掉
-           （见 `list-view/index.tsx` 同款记录），而多子节点直传会触发
-           「Non-function value encountered for default slot」告警（同 `page/index.tsx`）。 */
-        h(Form.Header, {
+      default: () => {
+        const raw = slots.default?.();
+        const fields = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
+        return [h(Form.Header, {
           title: props.title,
           description: props.description
         }, {
           extra: renderActions
-        }),
-        // 字段区也用插槽对象形态传子节点：`h()` 的第三参不收 `null`（`slots.default?.()` 的返回可能是 null）
-        h("div", {
-          class: "mh-filter__fields",
-          onKeydown: onFieldsKeydown
-        }, {
-          default: () => slots.default?.()
-        })
-      ]
+        }), ...fields];
+      }
     });
   }
 });
@@ -181,7 +172,7 @@ const FilterItem = /* @__PURE__ */ defineComponent({
       "required": props.required,
       "error": props.error,
       "hint": props.hint,
-      "class": ["mh-filter__item", attrs.class].filter(Boolean).join(" "),
+      "class": attrs.class,
       "style": attrs.style
     }, {
       default: (scope) => slots.default?.({

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

@@ -99,6 +99,18 @@ export interface FormProps {
     defaultValue?: FormValues;
     /** 值变更（快照含**全部已登记字段**，未设值的字段为 `undefined`） */
     onChange?: (values: FormValues) => void;
+    /**
+     * 根节点的键盘事件（**转发到表单根**）。
+     *
+     * 本件是 `inheritAttrs: false`，根节点只显式绑 `class` / `style` —— 不声明的监听器会被**静默丢掉**
+     * （与该文件里已修过的「消费方 style 被静默丢弃」同款前科）。而根节点就是「全部字段行的容器」，
+     * 故它是「字段区层面的委托」的落点：本包 `Filter` 的「字段区回车 = 查询」就搭在这条通道上
+     * （构造 `Filter` 时因此不必再套一层只为挂事件的壳 —— 那会改变 `class` / `style` 的落点）。
+     *
+     * **有意只开这一条**：其它监听器（如 `onClick`）不转发；要把某一条也接进来，先当一次公开行为变更裁决。
+     * 要不要拦、拦哪些按键（本包 `Filter` 收窄到「`<input>` 上的回车」）由调用方自己判断，本件只转发。
+     */
+    onKeydown?: (event: KeyboardEvent) => void;
 }
 export interface FormItemProps {
     /**
@@ -193,6 +205,15 @@ export interface FormItemProps {
  * `{ y, x }` 上下 / 左右分别给，缺省 0（贴容器边）。页面里的表单在 `Panel.Body` 里、内距由那块给；
  * **弹窗 / 抽屉里没有别的容器**给内距，就用表单自带的 `padding={{ y: 16, x: 20 }}`。
  *
+ * ## 键盘事件（`onKeydown` 转发到根节点）
+ *
+ * `onKeydown` 是本件的**声明式入口**（缺省不绑）：传进来的处理器绑在根节点上 ——
+ * 本件是 `inheritAttrs: false`，根节点只显式绑 `class` / `style`，不声明的监听器会被静默丢掉。
+ * 根节点即「全部字段行的容器」，因此它是「字段区层面的委托」的落点：本包 `Filter` 的
+ * 「字段区回车 = 查询」就搭在这里，构造 `Filter` 时**不必**再套一层只为挂事件的壳
+ * （那会改变 `class` / `style` 的落点）。要不要拦、拦哪些按键由调用方自己判断，本件只转发。
+ * **有意只开这一条**：其它监听器不转发，扩张要先当一次公开行为变更裁决。
+ *
  * ## 只读值（摘要 / 详情）
  *
  * 「向导最后一步的确认摘要」「详情弹窗」不需要另起一套描述列表件 —— 只用表单行本身，
@@ -455,6 +476,11 @@ export declare const Form: {
             type: PropType<(values: FormValues) => void>;
             default: undefined;
         };
+        /** 根节点的键盘事件（转发到表单根；缺省不绑）—— 用途与边界见 `FormProps` 的同名注释 */
+        onKeydown: {
+            type: PropType<(event: KeyboardEvent) => void>;
+            default: undefined;
+        };
     }>> & Readonly<{
         "onUpdate:modelValue"?: ((values: FormValues) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -463,6 +489,7 @@ export declare const Form: {
         padding: Padding;
         layout: "horizontal" | "vertical";
         onChange: (values: FormValues) => void;
+        onKeydown: (event: KeyboardEvent) => void;
         defaultValue: FormValues;
         gap: number;
         columns: FormColumns;
@@ -544,12 +571,18 @@ export declare const Form: {
             type: PropType<(values: FormValues) => void>;
             default: undefined;
         };
+        /** 根节点的键盘事件（转发到表单根；缺省不绑）—— 用途与边界见 `FormProps` 的同名注释 */
+        onKeydown: {
+            type: PropType<(event: KeyboardEvent) => void>;
+            default: undefined;
+        };
     }>> & Readonly<{
         "onUpdate:modelValue"?: ((values: FormValues) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         padding: Padding;
         layout: "horizontal" | "vertical";
         onChange: (values: FormValues) => void;
+        onKeydown: (event: KeyboardEvent) => void;
         defaultValue: FormValues;
         gap: number;
         columns: FormColumns;
@@ -626,6 +659,11 @@ export declare const Form: {
         type: PropType<(values: FormValues) => void>;
         default: undefined;
     };
+    /** 根节点的键盘事件（转发到表单根；缺省不绑）—— 用途与边界见 `FormProps` 的同名注释 */
+    onKeydown: {
+        type: PropType<(event: KeyboardEvent) => void>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((values: FormValues) => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -634,6 +672,7 @@ export declare const Form: {
     padding: Padding;
     layout: "horizontal" | "vertical";
     onChange: (values: FormValues) => void;
+    onKeydown: (event: KeyboardEvent) => void;
     defaultValue: FormValues;
     gap: number;
     columns: FormColumns;

package/dist/components/form/index.js

@@ -236,6 +236,11 @@ const FormRoot = /* @__PURE__ */ defineComponent({
     onChange: {
       type: Function,
       default: void 0
+    },
+    /** 根节点的键盘事件（转发到表单根；缺省不绑）—— 用途与边界见 `FormProps` 的同名注释 */
+    onKeydown: {
+      type: Function,
+      default: void 0
     }
   },
   emits: {
@@ -313,6 +318,7 @@ const FormRoot = /* @__PURE__ */ defineComponent({
       } = splitFormHeader(list);
       return createVNode("div", {
         "class": ["mh-form", columnsClass(), props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
+        "onKeydown": props.onKeydown,
         "style": [
           mergePartStyle(attrs.style, props.padding),
           /* 行距同时下发实体 `gap` 与变量：多列的轨道下限公式要用**同一个**行距值算 ——