@manohub/ui 0.6.0

package/dist/components/form/index.js

@@ -0,0 +1,329 @@
+import { defineComponent, inject, watch, createVNode, createTextVNode, provide, toRef, ref, computed, isVNode } from "vue";
+import { mergePartStyle } from "../part-padding.js";
+const FORM_LABEL_WIDTH = /* @__PURE__ */ Symbol("mh-form-label-width");
+const FORM_CONTROL_WIDTH = /* @__PURE__ */ Symbol("mh-form-control-width");
+const FORM_LABEL_ALIGN = /* @__PURE__ */ Symbol("mh-form-label-align");
+const FORM_TEXT_EMPTY = "—";
+const FORM_STORE = /* @__PURE__ */ Symbol("mh-form-store");
+const FormItem = /* @__PURE__ */ defineComponent({
+  name: "FormItem",
+  inheritAttrs: false,
+  props: {
+    /** 字段名（绑定的键）；不传即纯布局行（值由消费方自己在控件上绑定） */
+    name: {
+      type: String,
+      default: void 0
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ""
+    },
+    hint: {
+      type: String,
+      default: ""
+    },
+    labelWidth: {
+      type: Number,
+      default: void 0
+    },
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    controlWidth: {
+      type: Number,
+      default: void 0
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    /** `undefined` 与「传了空串」必须区分：前者走插槽（控件形态），后者是「值为空的只读行」 */
+    text: {
+      type: String,
+      default: void 0
+    },
+    /** 只读展示行（label 弱化，内容走插槽）：用于控件位是徽标 / 链接这类非文本的只读内容 */
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const inheritedLabelWidth = inject(FORM_LABEL_WIDTH, void 0);
+    const inheritedLabelAlign = inject(FORM_LABEL_ALIGN, void 0);
+    const inheritedControlWidth = inject(FORM_CONTROL_WIDTH, void 0);
+    const store = inject(FORM_STORE, null);
+    if (props.name) store?.register(props.name);
+    watch(() => props.name, (name) => {
+      if (name) store?.register(name);
+    });
+    const setValue = (value) => {
+      if (props.name) store?.write(props.name, value);
+    };
+    const clear = () => setValue(void 0);
+    const scope = () => ({
+      value: props.name ? store?.read(props.name) : void 0,
+      setValue,
+      clear
+    });
+    return () => {
+      const labelWidth = props.labelWidth ?? inheritedLabelWidth?.value;
+      const labelAlign = props.labelAlign ?? inheritedLabelAlign?.value;
+      const controlWidth = props.controlWidth ?? inheritedControlWidth?.value;
+      const styles = [attrs.style, labelWidth ? {
+        "--mh-form-label-width": `${labelWidth}px`
+      } : null].filter(Boolean);
+      const showLabel = !!props.label || props.required;
+      const hasText = props.text !== void 0;
+      const textIsEmpty = hasText && !props.text.trim();
+      const isReadonlyRow = hasText || props.readonly;
+      return createVNode("div", {
+        "class": [
+          "mh-form-item",
+          props.error ? "is-invalid" : "",
+          props.fullWidth ? "mh-form-item--full" : "",
+          // 右对齐是基类默认值，只有左对齐需要额外的修饰类（两处都挂会让「谁胜出」依赖源码顺序）
+          labelAlign === "left" ? "mh-form-item--label-left" : "",
+          // 只读展示行：label 降一档为次要色，与值拉开层级（样式见 `.mh-form-item--readonly .mh-form-item__label`）
+          isReadonlyRow ? "mh-form-item--readonly" : "",
+          attrs.class
+        ].filter(Boolean).join(" "),
+        "data-invalid": props.error ? "true" : "false",
+        "style": styles
+      }, [showLabel ? createVNode("label", {
+        "class": "mh-form-item__label"
+      }, [createVNode("span", {
+        "class": "mh-form-item__label-text"
+      }, [props.label]), props.required ? createVNode("span", {
+        "class": "mh-form-item__required"
+      }, [createTextVNode("*")]) : null]) : null, createVNode("div", {
+        "class": "mh-form-item__control",
+        "style": controlWidth ? {
+          maxWidth: `${controlWidth}px`
+        } : void 0
+      }, [hasText ? (
+        /*
+         * 只读文本形态（摘要 / 详情行）：控件位直接渲染业务值，占位与换行规则都在组件里
+         * —— 应用侧不再自绘 label/value 表格（那套几何与表单行迟早会漂开）。
+         */
+        createVNode("div", {
+          "class": "mh-form-item__text",
+          "data-empty": textIsEmpty ? "true" : "false"
+        }, [textIsEmpty ? FORM_TEXT_EMPTY : props.text])
+      ) : slots.default?.(scope()), props.error ? createVNode("div", {
+        "class": "mh-form-item__error"
+      }, [props.error]) : null, props.hint ? createVNode("div", {
+        "class": "mh-form-item__hint"
+      }, [props.hint]) : null])]);
+    };
+  }
+});
+const FormHeader = /* @__PURE__ */ defineComponent({
+  name: "FormHeader",
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const hasTitleRow = !!props.title || !!slots.extra;
+      if (!hasTitleRow && !props.description) return null;
+      return createVNode("div", {
+        "class": ["mh-form__header", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [hasTitleRow ? createVNode("div", {
+        "class": "mh-form__title"
+      }, [props.title ? createVNode("span", {
+        "class": "mh-form__title-text"
+      }, [props.title]) : null, slots.extra ? createVNode("div", {
+        "class": "mh-form__title-extra"
+      }, [slots.extra()]) : null]) : null, props.description ? createVNode("div", {
+        "class": "mh-form__description"
+      }, [props.description]) : null]);
+    };
+  }
+});
+function splitFormHeader(children) {
+  const header = [];
+  const rest = [];
+  for (const child of children) {
+    if (isVNode(child) && child.type === FormHeader) header.push(child);
+    else rest.push(child);
+  }
+  return {
+    header,
+    rest
+  };
+}
+const FormRoot = /* @__PURE__ */ defineComponent({
+  name: "Form",
+  inheritAttrs: false,
+  props: {
+    /** 表单级 label 列宽（px）；`Form.Item` 的 `labelWidth` 优先级更高 */
+    labelWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** 表单级 label 对齐；`Form.Item` 的 `labelAlign` 优先级更高 */
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    /** 表单级控件列宽上限（px）；`Form.Item` 的 `controlWidth` 优先级更高 */
+    controlWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    columns: {
+      type: Number,
+      default: 1
+    },
+    /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    },
+    /**
+     * 排布：`horizontal`（label 在左，缺省）/ `vertical`（label 在控件上方）。
+     *
+     * 窄容器（抽屉 / 移动端）与「字段名很长」的场景请用纵向 —— 横向时 label 列宽会把控件压得很窄。
+     */
+    layout: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * 行距（px，字段行之间 / 与 `Form.Header` 之间）；缺省沿用样式里的 8px 档。
+     *
+     * 筛选条这类「上行 + 一行字段」的紧凑排布要 16（设计稿口径）；长表单也可以调松。
+     */
+    gap: {
+      type: Number,
+      default: void 0
+    },
+    /** 受控表单值（字段名 → 值）；不传即非受控（由 `defaultValue` 起） */
+    modelValue: {
+      type: Object,
+      default: void 0
+    },
+    /** 非受控初值；其中的键会一并成为快照的键（不必等字段挂载） */
+    defaultValue: {
+      type: Object,
+      default: void 0
+    },
+    /** 值变更（快照含**全部已登记字段**，未设值的字段为 `undefined`） */
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (values) => true
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    provide(FORM_LABEL_WIDTH, toRef(props, "labelWidth"));
+    provide(FORM_LABEL_ALIGN, toRef(props, "labelAlign"));
+    provide(FORM_CONTROL_WIDTH, toRef(props, "controlWidth"));
+    const inner = ref({
+      ...props.defaultValue ?? {}
+    });
+    const registered = ref([]);
+    const source = computed(() => props.modelValue ?? inner.value);
+    const names = computed(() => [.../* @__PURE__ */ new Set([...registered.value, ...Object.keys(props.defaultValue ?? {})])]);
+    const values = computed(() => {
+      const out = {};
+      for (const name of names.value) out[name] = source.value[name];
+      return out;
+    });
+    const register = (name) => {
+      if (name && !registered.value.includes(name)) registered.value = [...registered.value, name];
+    };
+    const apply = (next) => {
+      if (props.modelValue === void 0) inner.value = next;
+      emit("update:modelValue", next);
+      props.onChange?.(next);
+    };
+    const write = (name, value) => {
+      register(name);
+      apply({
+        ...values.value,
+        [name]: value
+      });
+    };
+    provide(FORM_STORE, {
+      register,
+      read: (name) => source.value[name],
+      write
+    });
+    expose({
+      /** 当前快照（含全部已登记字段） */
+      getValues: () => values.value,
+      /**
+       * 清空全部字段（置 `undefined`；受控模式下同样会发 `update:modelValue`）。
+       *
+       * **返回清空后的快照**：受控时外部还没回写 `modelValue`，调用方此刻再 `getValues()`
+       * 会读到清空前的旧值 —— 直接吃返回值才不依赖回写时序。
+       */
+      clear: () => {
+        const cleared = {};
+        for (const name of names.value) cleared[name] = void 0;
+        apply(cleared);
+        return cleared;
+      }
+    });
+    return () => {
+      const raw = slots.default?.();
+      const list = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
+      const {
+        header,
+        rest
+      } = splitFormHeader(list);
+      return createVNode("div", {
+        "class": ["mh-form", props.columns === 2 ? "mh-form--two-column" : "", props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
+        "style": [mergePartStyle(attrs.style, props.padding), props.gap !== void 0 ? {
+          gap: `${props.gap}px`
+        } : null]
+      }, [header, rest]);
+    };
+  }
+});
+const Form = Object.assign(FormRoot, {
+  Header: FormHeader,
+  Item: FormItem
+});
+export {
+  Form,
+  FormHeader,
+  FormItem
+};