@manohub/ui 0.6.0

package/dist/components/input/index.js

@@ -0,0 +1,334 @@
+import { defineComponent, ref, computed, createVNode, mergeProps, createTextVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const Input = /* @__PURE__ */ defineComponent({
+  name: "Input",
+  inheritAttrs: false,
+  props: {
+    /** 受控值 */
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    /** 非受控初始值 */
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /** 原生 input 类型（`password` 时自动出现可见性切换） */
+    type: {
+      type: String,
+      default: "text"
+    },
+    /** 尺寸档（与全库 `ControlSize` 同表：24 / 28 / 32） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /** 校验态（下发 `aria-invalid`，样式走协议不看 data-*）；等价于 `status="error"` */
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    /** 校验状态（`invalid` 的显式写法；两者同时给以 `status` 为准） */
+    status: {
+      type: String,
+      default: void 0
+    },
+    /** 有内容时显示清除按钮 */
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否带边框；`false` 用于表格内编辑 / 行内编辑（无框、无底） */
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    maxlength: {
+      type: Number,
+      default: void 0
+    },
+    /** 右侧字数统计（单行须给 `maxlength` 才有意义） */
+    showCount: {
+      type: Boolean,
+      default: false
+    },
+    /** 自动聚焦（进页面即可输入，如搜索框） */
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    /** 值变更回调（每次输入都调） */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 回车回调 */
+    onEnter: {
+      type: Function,
+      default: void 0
+    },
+    /* ===== 触发器形态（`as="button"`，给复合件用的口子） =====
+     * 整件的**表壳、附加位与状态规则一并复用**，只把「控件元素」从 `<input>` 换成 `<button>`：
+     * 于是 `Select` 这类件能拿到输入框的框与内距、内建清除位、右侧图标位与三态反馈，同时保留
+     * 原生 `<button>` 才有的语义（如 `popovertarget` 触发 popover —— 该属性只认 button）。
+     * 缺省 `as="input"` 的渲染路径除本组 prop 外零变化。 */
+    /** 控件元素形态：`input` 文本输入（缺省）/ `button` 触发器 */
+    as: {
+      type: String,
+      default: "input"
+    },
+    /** 追加到**控件元素**上的类（复合件挂自己的排版类用；本件的 `class` 仍落表壳） */
+    controlClass: {
+      type: String,
+      default: void 0
+    },
+    /** 展开到**控件元素**上的属性（触发器形态要 `popovertarget` / `aria-*` / `onKeydown` 落到控件上） */
+    controlAttrs: {
+      type: Object,
+      default: void 0
+    },
+    /** 显式覆盖清除位显隐；不给时仍按「有内容」判定（多选类复合件没有单值可判） */
+    hasValue: {
+      type: Boolean,
+      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 revealed = ref(false);
+    const visualStatus = computed(() => props.status ?? (props.invalid ? "error" : void 0));
+    const isInvalid = computed(() => visualStatus.value === "error");
+    const commit = (value) => {
+      if (props.modelValue === void 0) inner.value = value;
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+    };
+    const onInput = (event) => {
+      const el = event.target;
+      commit(el.value);
+      if (props.modelValue !== void 0 && props.modelValue !== el.value) el.value = props.modelValue;
+    };
+    const onKeydown = (event) => {
+      if (event.key === "Enter") props.onEnter?.(current.value ?? "");
+      if (event.key === "Delete" && props.clearable) commit("");
+    };
+    const inputType = computed(() => props.type === "password" && revealed.value ? "text" : props.type);
+    const isTrigger = computed(() => props.as === "button");
+    const controlClasses = computed(() => ["mh-input", isTrigger.value ? "mh-input--trigger" : "", props.size === "md" ? "" : `mh-input--${props.size}`, props.bordered ? "" : "mh-input--borderless", visualStatus.value ? `is-${visualStatus.value}` : "", props.disabled ? "is-disabled" : "", props.controlClass].filter(Boolean).join(" "));
+    const showClear = computed(() => props.clearable && (props.hasValue ?? !!current.value));
+    return () => createVNode("div", {
+      "class": ["mh-input__wrap", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.prefix ? createVNode("span", {
+      "class": "mh-input__prefix"
+    }, [slots.prefix()]) : null, isTrigger.value ? (
+      /* 触发器形态：控件是 `<button type="button">` —— 显式 `button` 不能省，缺省是 `submit`，
+         放进表单会提交。内容走默认插槽；键盘事件由 `controlAttrs` 交给消费方 ——
+         本件的 Enter / Delete 是**输入框**语义，触发器有自己的一套（如 `↓` 开面板），不在此套用。 */
+      createVNode("button", mergeProps({
+        "type": "button"
+      }, props.controlAttrs, {
+        "class": controlClasses.value,
+        "disabled": props.disabled,
+        "aria-invalid": isInvalid.value ? "true" : void 0
+      }), [slots.default ? slots.default() : null])
+    ) : createVNode("input", {
+      "class": controlClasses.value,
+      "type": inputType.value,
+      "value": current.value,
+      "placeholder": props.placeholder,
+      "disabled": props.disabled,
+      "readonly": props.readonly,
+      "maxlength": props.maxlength,
+      "autofocus": props.autofocus,
+      "aria-invalid": isInvalid.value ? "true" : void 0,
+      "onInput": onInput,
+      "onKeydown": onKeydown
+    }, null), showClear.value ? createVNode("button", {
+      "type": "button",
+      "class": "mh-input__clear",
+      "aria-label": "清除",
+      "tabindex": -1,
+      "onClick": () => commit("")
+    }, [createVNode(Icon, {
+      "name": "close",
+      "size": 10,
+      "class": "mh-input__clear-icon"
+    }, null)]) : null, !isTrigger.value && props.type === "password" ? createVNode("button", {
+      "type": "button",
+      "class": ["mh-input__eye", revealed.value ? "is-on" : ""].filter(Boolean).join(" "),
+      "aria-label": revealed.value ? "隐藏密码" : "显示密码",
+      "aria-pressed": revealed.value ? "true" : "false",
+      "tabindex": -1,
+      "onClick": () => revealed.value = !revealed.value
+    }, [createVNode(Icon, {
+      "name": "eye",
+      "class": "mh-input__eye-icon"
+    }, null)]) : null, slots.suffix ? createVNode("span", {
+      "class": "mh-input__suffix"
+    }, [slots.suffix()]) : null, !isTrigger.value && props.showCount ? createVNode("span", {
+      "class": "mh-input__counter"
+    }, [current.value?.length ?? 0, createTextVNode("/"), props.maxlength ?? 0]) : null]);
+  }
+});
+const Textarea = /* @__PURE__ */ defineComponent({
+  name: "Textarea",
+  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: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String,
+      default: void 0
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    maxlength: {
+      type: Number,
+      default: void 0
+    },
+    showCount: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    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 visualStatus = computed(() => props.status ?? (props.invalid ? "error" : void 0));
+    const isInvalid = computed(() => visualStatus.value === "error");
+    const autoRows = computed(() => {
+      if (!props.autoSize) return props.rows;
+      const option = typeof props.autoSize === "object" ? props.autoSize : {};
+      const min = option.minRows ?? 2;
+      const max = option.maxRows ?? 6;
+      const lines = (current.value ?? "").split("\n").length;
+      return Math.min(Math.max(lines, min), max);
+    });
+    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-input__wrap", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("textarea", {
+      "class": ["mh-input", "mh-input--textarea", props.size === "md" ? "" : `mh-input--${props.size}`, props.bordered ? "" : "mh-input--borderless", visualStatus.value ? `is-${visualStatus.value}` : "", props.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
+      "rows": autoRows.value,
+      "value": current.value,
+      "placeholder": props.placeholder,
+      "disabled": props.disabled,
+      "readonly": props.readonly,
+      "maxlength": props.maxlength,
+      "autofocus": props.autofocus,
+      "aria-invalid": isInvalid.value ? "true" : void 0,
+      "onInput": onInput
+    }, null), props.showCount ? createVNode("span", {
+      "class": "mh-input__counter"
+    }, [current.value?.length ?? 0, createTextVNode("/"), props.maxlength ?? 0]) : null]);
+  }
+});
+const InputDisplay = /* @__PURE__ */ defineComponent({
+  name: "InputDisplay",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("span", {
+      "class": ["mh-input--display", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default ? slots.default() : props.value]);
+  }
+});
+Object.assign(Input, {
+  Textarea,
+  Display: InputDisplay
+});
+export {
+  Input,
+  Textarea
+};

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

@@ -0,0 +1,162 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/**
+ * 布局间距档：**只开放令牌档位，不开放任意 px**（`none/sm/md/lg/xl` → `0 / --ui-space-1/2/3/4`）。
+ *
+ * 间距一旦可以随手写，同一个页面里就会出现 6/7/9/10/14 这些「看着差不多」的值，
+ * 而它们在不同缩放档、不同人手里会继续分叉 —— 与「应用侧只写布局」是同一条理由的另一面。
+ */
+export type LayoutGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/** 交叉轴对齐（`align-items`）；主轴排布用 `justify` */
+export type LayoutAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+/** 主轴排布（`justify-content`）：`between` = 两端对齐（左文右操作这种） */
+export type LayoutJustify = 'start' | 'center' | 'end' | 'between';
+/** 栅格列数**上限**（传了它才切成等分栅格；实际列数还受最小列宽约束，窄了会自动减列） */
+export type LayoutColumns = 1 | 2 | 3 | 4;
+/** 栅格单元跨格数：不应超过所在行的 `columns`（超了 auto-fit 会为它多开轨道） */
+export type LayoutSpan = 1 | 2 | 3 | 4;
+/**
+ * 布局原子件族（命名空间，**本身不是组件**）。
+ *
+ * | 成员 | 干什么 | 什么时候用 |
+ * |---|---|---|
+ * | `Layout.Row` | **排「行」**：竖排（一条一行往下堆）；传 `columns` 则一行分 n 列（列数上限 + 窄了自动减列） | 逐条清单 / 摘要字段 / 并排字段与卡片 |
+ * | `Layout.Column` | **排「列」**：水平容器（内容左右排），同时是 `Row columns` 的栅格单元 | 徽标 + 文本 / 标签 + 值 / 控件 + 按钮 / 一行里的一格 |
+ *
+ * ## 命名与方向口径（别再改回去）
+ *
+ * - **方向按表格语义定**：行与行上下相邻 ⇒ `Row` 竖排；列与列左右相邻 ⇒ `Column` 横排。
+ * - `columns` 说的是「**这一行分几列**」（每行摆几格），不是「这个容器有几种方向」。
+ * - 嵌套：要分栏 / 栅格就 `Row columns={n}` + `Column`；一格里要上下堆，就在 `Column` 里再放 `Row`。
+ * - **公开面只出 `Layout`**，不平级导出 `Row` / `Column` —— 通用词会与 `TableColumn`
+ *   在一份 import 清单里混读，也破坏「成族子件用点号」的约定（`Page.Header` / `Form.Item`）。
+ *
+ * ## 与其它件的边界
+ *
+ * - 表单里并排字段用 `Form columns={2}`（它管 label 列与行距），不要用本族拼表单；
+ * - 页面级两栏（各自滚动）用 `Page.Split`；
+ * - 只有「块与块怎么摆」这一件事归本族，滚动 / 工具位 / 卡片外观都不归它。
+ */
+export declare const Layout: {
+    Row: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<LayoutGap>;
+            default: string;
+        };
+        /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+        align: {
+            type: PropType<LayoutAlign>;
+            default: undefined;
+        };
+        /** 主轴排布（竖排时是纵向）；不传即 `start` */
+        justify: {
+            type: PropType<LayoutJustify>;
+            default: undefined;
+        };
+        /** 列数；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格，列数恒为 n） */
+        columns: {
+            type: PropType<LayoutColumns>;
+            default: undefined;
+        };
+        /** **希望**的单元最小宽度（px）；缺省取令牌 `--ui-grid-column-min`。容器放不下 n 列时列会等分收窄 */
+        minColumnWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<LayoutGap>;
+            default: string;
+        };
+        /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+        align: {
+            type: PropType<LayoutAlign>;
+            default: undefined;
+        };
+        /** 主轴排布（竖排时是纵向）；不传即 `start` */
+        justify: {
+            type: PropType<LayoutJustify>;
+            default: undefined;
+        };
+        /** 列数；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格，列数恒为 n） */
+        columns: {
+            type: PropType<LayoutColumns>;
+            default: undefined;
+        };
+        /** **希望**的单元最小宽度（px）；缺省取令牌 `--ui-grid-column-min`。容器放不下 n 列时列会等分收窄 */
+        minColumnWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        justify: LayoutJustify;
+        gap: LayoutGap;
+        align: LayoutAlign;
+        columns: LayoutColumns;
+        minColumnWidth: number;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Column: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<LayoutGap>;
+            default: string;
+        };
+        /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+        align: {
+            type: PropType<LayoutAlign>;
+            default: undefined;
+        };
+        /** 单元内主轴排布；不传即 `start` */
+        justify: {
+            type: PropType<LayoutJustify>;
+            default: undefined;
+        };
+        /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+        span: {
+            type: PropType<LayoutSpan>;
+            default: number;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<LayoutGap>;
+            default: string;
+        };
+        /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+        align: {
+            type: PropType<LayoutAlign>;
+            default: undefined;
+        };
+        /** 单元内主轴排布；不传即 `start` */
+        justify: {
+            type: PropType<LayoutJustify>;
+            default: undefined;
+        };
+        /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+        span: {
+            type: PropType<LayoutSpan>;
+            default: number;
+        };
+    }>> & Readonly<{}>, {
+        wrap: boolean;
+        justify: LayoutJustify;
+        span: LayoutSpan;
+        gap: LayoutGap;
+        align: LayoutAlign;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/components/layout/index.js

@@ -0,0 +1,100 @@
+import { defineComponent, createVNode } from "vue";
+function modifier(base, name, value) {
+  return value === void 0 || value === "" ? "" : `${base}--${name}-${value}`;
+}
+const LayoutColumn = /* @__PURE__ */ defineComponent({
+  name: "LayoutColumn",
+  inheritAttrs: false,
+  props: {
+    /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+      type: String,
+      default: "md"
+    },
+    /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+    align: {
+      type: String,
+      default: void 0
+    },
+    /** 单元内主轴排布；不传即 `start` */
+    justify: {
+      type: String,
+      default: void 0
+    },
+    /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+    span: {
+      type: Number,
+      default: 1
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-layout-column", modifier("mh-layout-column", "gap", props.gap), modifier("mh-layout-column", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-column", "justify", props.justify) : "", props.wrap ? "mh-layout-column--wrap" : "", props.span > 1 ? `mh-layout-column--span-${props.span}` : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default?.()]);
+  }
+});
+const LayoutRow = /* @__PURE__ */ defineComponent({
+  name: "LayoutRow",
+  inheritAttrs: false,
+  props: {
+    /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+      type: String,
+      default: "md"
+    },
+    /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+    align: {
+      type: String,
+      default: void 0
+    },
+    /** 主轴排布（竖排时是纵向）；不传即 `start` */
+    justify: {
+      type: String,
+      default: void 0
+    },
+    /** 列数；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格，列数恒为 n） */
+    columns: {
+      type: Number,
+      default: void 0
+    },
+    /** **希望**的单元最小宽度（px）；缺省取令牌 `--ui-grid-column-min`。容器放不下 n 列时列会等分收窄 */
+    minColumnWidth: {
+      type: Number,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const isGrid = props.columns !== void 0;
+      const style = {
+        ...attrs.style ?? {}
+      };
+      if (props.minColumnWidth) style["--mh-layout-row-min"] = `${props.minColumnWidth}px`;
+      return createVNode("div", {
+        "class": ["mh-layout-row", modifier("mh-layout-row", "gap", props.gap), modifier("mh-layout-row", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-row", "justify", props.justify) : "", isGrid ? "mh-layout-row--grid" : "", isGrid ? modifier("mh-layout-row", "columns", props.columns) : "", attrs.class].filter(Boolean).join(" "),
+        "style": style
+      }, [slots.default?.()]);
+    };
+  }
+});
+const Layout = {
+  Row: LayoutRow,
+  Column: LayoutColumn
+};
+export {
+  Layout
+};