@shwfed/config 2.2.0 → 2.2.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "shwfed",
   "configKey": "shwfed",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/form/FormUnitRenderer.d.vue.ts

@@ -0,0 +1,9 @@
+import type { FieldValue, FormUnitValue } from './schema.js';
+type __VLS_Props = {
+    unit: FormUnitValue;
+    evaluateMedia: (expression: string) => boolean;
+    isHidden?: (field: FieldValue) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/FormUnitRenderer.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { DEFAULT_GAP } from "./schema";
+import { findField } from "./utils/resolve";
+defineOptions({ name: "ShwfedFormUnitRenderer" });
+const props = defineProps({
+  unit: { type: Object, required: true },
+  evaluateMedia: { type: Function, required: true },
+  isHidden: { type: Function, required: false }
+});
+function pickLayout(sets) {
+  for (const set of sets) {
+    if (!set.media) return set;
+    try {
+      if (props.evaluateMedia(set.media)) return set;
+    } catch (err) {
+      console.error(`[shwfed-form] failed to evaluate layout media for ${set.name}:`, err);
+    }
+  }
+  return sets[sets.length - 1];
+}
+const activeLayout = ref();
+onMounted(() => {
+  activeLayout.value = pickLayout(props.unit.layouts);
+});
+watch(() => props.unit.layouts, (sets) => {
+  activeLayout.value = pickLayout(sets);
+}, { deep: false });
+const warnedMissing = /* @__PURE__ */ new Set();
+const placedFields = computed(() => {
+  const layout = activeLayout.value?.layout;
+  if (!layout) return [];
+  const out = [];
+  for (const field of props.unit.fields) {
+    const placement = layout.placements[field.id];
+    if (!placement) continue;
+    if (props.isHidden?.(field)) continue;
+    const entry = findField(field.type, field.compatibilityDate);
+    if (!entry) {
+      const key = `${field.type}@${field.compatibilityDate}`;
+      if (!warnedMissing.has(key)) {
+        warnedMissing.add(key);
+        console.warn(`[shwfed-form] no registered field type for ${key}`);
+      }
+      continue;
+    }
+    out.push({ field, placement, entry });
+  }
+  return out;
+});
+function cellStyle(placement) {
+  const [[x1, y1], [x2, y2]] = placement.area;
+  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`, "min-width: 0"];
+  const h = placement.h && placement.h !== "stretch" ? placement.h : null;
+  const v = placement.v && placement.v !== "stretch" ? placement.v : null;
+  if (h || v) {
+    parts.push("display: flex");
+    const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
+    if (h) parts.push(`justify-content: ${toFlex(h)}`);
+    if (v) parts.push(`align-items: ${toFlex(v)}`);
+  }
+  return parts.join("; ");
+}
+const gridStyle = computed(() => {
+  const l = activeLayout.value?.layout;
+  if (!l) return "";
+  const colTemplate = `repeat(${l.columns}, minmax(0, 1fr))`;
+  let rowTemplate = "";
+  if (l.rows) {
+    const grows = Array.from({ length: l.rows }, () => false);
+    for (const p of placedFields.value) {
+      if (!p.entry.metadata.h.grow) continue;
+      const [[, y1], [, y2]] = p.placement.area;
+      const lo = Math.max(1, y1);
+      const hi = Math.min(l.rows, y2 - 1);
+      for (let r = lo; r <= hi; r++) grows[r - 1] = true;
+    }
+    rowTemplate = grows.map((g) => g ? "auto" : "minmax(auto, 1fr)").join(" ");
+  }
+  const gap = `calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`;
+  const colGap = l.columns > 1 ? `min(${gap}, calc(100% / ${l.columns - 1}))` : gap;
+  const parts = [
+    "display: grid",
+    `grid-template-columns: ${colTemplate}`,
+    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
+    `column-gap: ${colGap}`,
+    `row-gap: ${gap}`,
+    l.style ?? ""
+  ].filter(Boolean);
+  return parts.join("; ");
+});
+const rendered = computed(
+  () => placedFields.value.map((p) => ({
+    key: p.field.id,
+    style: cellStyle(p.placement),
+    component: p.entry.runtime,
+    fieldId: p.field.id,
+    config: p.field
+  }))
+);
+</script>
+
+<template>
+  <div :style="gridStyle">
+    <div
+      v-for="r in rendered"
+      :key="r.key"
+      :style="r.style"
+    >
+      <component
+        :is="r.component"
+        :field-id="r.fieldId"
+        :config="r.config"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/form/FormUnitRenderer.vue.d.ts

@@ -0,0 +1,9 @@
+import type { FieldValue, FormUnitValue } from './schema.js';
+type __VLS_Props = {
+    unit: FormUnitValue;
+    evaluateMedia: (expression: string) => boolean;
+    isHidden?: (field: FieldValue) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.d.vue.ts

@@ -43,6 +43,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -85,6 +86,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.vue

@@ -26,6 +26,7 @@ import {
   SelectTrigger,
   SelectValue
 } from "../../../../ui/select";
+import { Switch } from "../../../../ui/switch";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
 import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
 import { schema } from "./schema";
@@ -76,6 +77,14 @@ function onStepChange(v) {
     value.value = { ...value.value, step: v };
   }
 }
+function onValueAsStringChange(next) {
+  if (next) {
+    value.value = { ...value.value, valueAsString: true };
+  } else {
+    const { valueAsString: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
 </script>
 
 <template>
@@ -300,6 +309,28 @@ function onStepChange(v) {
       </Field>
     </div>
 
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('valueAsString')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('valueAsString')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("valueAsString") }}
+      </FieldLabel>
+      <div>
+        <Switch
+          :model-value="value.valueAsString ?? false"
+          @update:model-value="onValueAsStringChange"
+        />
+      </div>
+    </Field>
+
     <div class="grid grid-cols-2 gap-3">
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.vue.d.ts

@@ -43,6 +43,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -85,6 +86,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/runtime.vue

@@ -62,8 +62,18 @@ const formatOptions = computed(() => ({
 }));
 const { draft, commit } = useFieldValue({
   binding: () => props.config.binding,
-  fromState: (raw) => typeof raw === "number" && Number.isFinite(raw) ? raw : void 0,
-  toState: (next) => typeof next === "number" && Number.isFinite(next) ? next : null
+  fromState: (raw) => {
+    if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+    if (typeof raw === "string" && raw.length > 0) {
+      const n = Number(raw);
+      return Number.isFinite(n) ? n : void 0;
+    }
+    return void 0;
+  },
+  toState: (next) => {
+    if (typeof next !== "number" || !Number.isFinite(next)) return null;
+    return props.config.valueAsString ? String(next) : next;
+  }
 });
 function applyRounding(n, precision, mode) {
   const factor = 10 ** precision;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/schema.d.ts

@@ -49,6 +49,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     precision: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
     roundingMode: Schema.optional<Schema.Literal<["round", "floor", "ceil"]>>;
     step: Schema.optional<Schema.refine<number, typeof Schema.Number>>;
+    valueAsString: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     min: Schema.optional<Schema.Schema<string, string, never>>;
     max: Schema.optional<Schema.Schema<string, string, never>>;
     id: Schema.refine<string, typeof Schema.String>;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/schema.js

@@ -55,6 +55,10 @@ export function schema(configure) {
       title: "\u6B65\u957F",
       description: "\u53D6\u503C\u7684\u6700\u5C0F\u6B65\u957F\uFF1B\u7559\u7A7A\u65F6\u4E0D\u9650\u5236\uFF08\u4EFB\u610F\u7CBE\u5EA6\uFF09"
     })),
+    valueAsString: Schema.optional(Schema.Boolean.annotations({
+      title: "\u4EE5\u5B57\u7B26\u4E32\u8BFB\u5199",
+      description: "\u5F00\u542F\u540E\u8868\u5355\u72B6\u6001\u4EE5\u5B57\u7B26\u4E32\u5F62\u5F0F\u5B58\u50A8\u8BE5\u503C\uFF08\u9002\u7528\u4E8E\u540E\u7AEF\u4F7F\u7528 `DECIMAL` / `BIGINT` \u7B49\u9700\u8981\u539F\u6837\u56DE\u4F20\u7684\u5B57\u6BB5\uFF09\uFF1B\u5173\u95ED\u65F6\u82E5\u8BFB\u5230\u7684\u662F\u6570\u503C\u5B57\u7B26\u4E32\u4E5F\u4F1A\u88AB\u89E3\u6790\uFF0C\u4F46\u5199\u56DE\u4ECD\u4E3A\u6570\u503C\u3002\u6CE8\u610F\uFF1A\u8F93\u5165\u65F6\u4ECD\u7ECF\u8FC7 JavaScript \u6D6E\u70B9\u6570\uFF0C\u4EC5\u80FD\u5728\u300C\u88C5\u8F7D-\u56DE\u4F20\u300D\u672A\u7F16\u8F91\u573A\u666F\u4E0B\u4FDD\u7559\u7CBE\u5EA6"
+    })),
     min: Schema.optional(CelNumber.annotations({
       title: "\u6700\u5C0F\u503C",
       description: "\u5141\u8BB8\u8F93\u5165\u7684\u6700\u5C0F\u503C\u8868\u8FBE\u5F0F\uFF1B\u7559\u7A7A\u65F6\u4E0D\u9650\u5236\u4E0B\u9650"

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.d.vue.ts

@@ -51,6 +51,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly rangeSeparatorIcon?: string | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -101,6 +102,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly rangeSeparatorIcon?: string | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.vue

@@ -28,6 +28,7 @@ import {
   SelectTrigger,
   SelectValue
 } from "../../../../ui/select";
+import { Switch } from "../../../../ui/switch";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
 import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
 import { schema } from "./schema";
@@ -112,6 +113,14 @@ function setSeparatorIcon(next) {
     value.value = { ...value.value, rangeSeparatorIcon: trimmed };
   }
 }
+function onValueAsStringChange(next) {
+  if (next) {
+    value.value = { ...value.value, valueAsString: true };
+  } else {
+    const { valueAsString: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
 </script>
 
 <template>
@@ -468,6 +477,28 @@ function setSeparatorIcon(next) {
           @update:model-value="setSeparatorIcon"
         />
       </Field>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('valueAsString')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('valueAsString')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("valueAsString") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.valueAsString ?? false"
+            @update:model-value="onValueAsStringChange"
+          />
+        </div>
+      </Field>
     </div>
 
     <div class="grid grid-cols-3 gap-3">

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.vue.d.ts

@@ -51,6 +51,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly rangeSeparatorIcon?: string | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -101,6 +102,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly rangeSeparatorIcon?: string | undefined;
+        readonly valueAsString?: boolean | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/runtime.vue

@@ -63,15 +63,23 @@ const formatOptions = computed(() => ({
   useGrouping: false,
   maximumFractionDigits: 20
 }));
+function asNumber(raw) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "string" && raw.length > 0) {
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : void 0;
+  }
+  return void 0;
+}
 function asRange(raw) {
   if (!Array.isArray(raw) || raw.length !== 2) return void 0;
-  const [a, b] = raw;
-  if (typeof a !== "number" || typeof b !== "number") return void 0;
-  if (!Number.isFinite(a) || !Number.isFinite(b)) return void 0;
+  const a = asNumber(raw[0]);
+  const b = asNumber(raw[1]);
+  if (a == null || b == null) return void 0;
   return [a, b];
 }
-function asNumber(raw) {
-  return typeof raw === "number" && Number.isFinite(raw) ? raw : void 0;
+function shape(n) {
+  return props.config.valueAsString ? String(n) : n;
 }
 const uncontrolled = ref(void 0);
 const model = computed({
@@ -91,11 +99,11 @@ const model = computed({
       return;
     }
     if (typeof binding === "string") {
-      setAt(binding, next ?? null);
+      setAt(binding, next ? [shape(next[0]), shape(next[1])] : null);
       return;
     }
-    setAt(binding[0], next?.[0] ?? null);
-    setAt(binding[1], next?.[1] ?? null);
+    setAt(binding[0], next ? shape(next[0]) : null);
+    setAt(binding[1], next ? shape(next[1]) : null);
   }
 });
 const localStart = ref(model.value?.[0]);

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/schema.d.ts

@@ -56,6 +56,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
     precision: Schema.optional<Schema.refine<number, Schema.filter<typeof Schema.Number>>>;
     roundingMode: Schema.optional<Schema.Literal<["round", "floor", "ceil"]>>;
     step: Schema.optional<Schema.refine<number, typeof Schema.Number>>;
+    valueAsString: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     min: Schema.optional<Schema.Schema<string, string, never>>;
     max: Schema.optional<Schema.Schema<string, string, never>>;
     rangeSeparatorIcon: Schema.optional<Schema.refine<string, typeof Schema.String>>;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/schema.js

@@ -66,6 +66,10 @@ export function schema(configure) {
       title: "\u6B65\u957F",
       description: "\u53D6\u503C\u7684\u6700\u5C0F\u6B65\u957F\uFF1B\u7559\u7A7A\u65F6\u4E0D\u9650\u5236\uFF08\u4EFB\u610F\u7CBE\u5EA6\uFF09"
     })),
+    valueAsString: Schema.optional(Schema.Boolean.annotations({
+      title: "\u4EE5\u5B57\u7B26\u4E32\u8BFB\u5199",
+      description: "\u5F00\u542F\u540E\u8868\u5355\u72B6\u6001\u4EE5\u5B57\u7B26\u4E32\u5F62\u5F0F\u5B58\u50A8\u4E24\u7AEF\u7684\u503C\uFF08\u9002\u7528\u4E8E\u540E\u7AEF\u4F7F\u7528 `DECIMAL` / `BIGINT` \u7B49\u9700\u8981\u539F\u6837\u56DE\u4F20\u7684\u5B57\u6BB5\uFF09\uFF1B\u5173\u95ED\u65F6\u82E5\u8BFB\u5230\u7684\u662F\u6570\u503C\u5B57\u7B26\u4E32\u4E5F\u4F1A\u88AB\u89E3\u6790\uFF0C\u4F46\u5199\u56DE\u4ECD\u4E3A\u6570\u503C\u3002\u6CE8\u610F\uFF1A\u8F93\u5165\u65F6\u4ECD\u7ECF\u8FC7 JavaScript \u6D6E\u70B9\u6570\uFF0C\u4EC5\u80FD\u5728\u300C\u88C5\u8F7D-\u56DE\u4F20\u300D\u672A\u7F16\u8F91\u573A\u666F\u4E0B\u4FDD\u7559\u7CBE\u5EA6"
+    })),
     min: Schema.optional(CelNumber.annotations({
       title: "\u6700\u5C0F\u503C",
       description: "\u5141\u8BB8\u8F93\u5165\u7684\u6700\u5C0F\u503C\u8868\u8FBE\u5F0F\uFF1B\u540C\u65F6\u4F5C\u7528\u4E8E\u8D77\u59CB\u4E0E\u7ED3\u675F\u8F93\u5165"

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/config.d.vue.ts

@@ -33,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -42,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -89,7 +89,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -98,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/config.vue

@@ -96,7 +96,7 @@ const reorderable = computed({
     :field-cel-scope="FIELD_CEL_SCOPE"
   >
     <template #extras-pane>
-      <div class="flex flex-col gap-3 p-6">
+      <div class="flex flex-col gap-3">
         <div class="grid grid-cols-2 gap-3">
           <Field orientation="vertical">
             <FieldLabel class="text-xs text-zinc-500">

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/config.vue.d.ts

@@ -33,7 +33,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -42,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;
@@ -89,7 +89,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
         readonly compatibilityDate: "2026-05-13";
         readonly min?: number | undefined;
         readonly max?: number | undefined;
-        readonly binding?: string | undefined;
         readonly unit: Readonly<{
             fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
             layouts: readonly Readonly<{
@@ -98,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
                 layout: import("../../../schema.js").LayoutValue;
             }>[];
         }>;
+        readonly binding?: string | undefined;
         readonly addLabel?: readonly [{
             readonly locale: "zh";
             readonly message: string;

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/row.vue

@@ -1,11 +1,9 @@
 <script setup>
 import { cel as _rawCel } from "../../../../../utils/cel";
 import { Effect } from "effect";
-import { computed, onMounted, ref, watch } from "vue";
 import { celBindings, injectCELContext, provideCELContext } from "../../../../../utils/cel-context";
-import { DEFAULT_GAP } from "../../../schema";
+import FormUnitRenderer from "../../../FormUnitRenderer.vue";
 import { useDerived, useDerivedQuiescence } from "../../../utils/derived";
-import { findField } from "../../../utils/resolve";
 import { provideFormState } from "../../../utils/state";
 defineOptions({ name: "ShwfedListFieldRow" });
 const state = defineModel({ type: Object, ...{ required: true } });
@@ -37,109 +35,14 @@ useDerived({
   formState,
   quiescence: useDerivedQuiescence()
 });
-function pickLayout(sets) {
-  for (const set of sets) {
-    if (!set.media) return set;
-    try {
-      if (Effect.runSync($cel(set.media))) return set;
-    } catch (err) {
-      console.error(`[shwfed-form] list field: failed to evaluate layout media for ${set.name}:`, err);
-    }
-  }
-  return sets[sets.length - 1];
-}
-const activeLayout = ref();
-onMounted(() => {
-  activeLayout.value = pickLayout(props.unit.layouts);
-});
-watch(() => props.unit.layouts, (sets) => {
-  activeLayout.value = pickLayout(sets);
-}, { deep: false });
-const warnedMissing = /* @__PURE__ */ new Set();
-const placedFields = computed(() => {
-  const layout = activeLayout.value?.layout;
-  if (!layout) return [];
-  const out = [];
-  for (const field of props.unit.fields) {
-    const placement = layout.placements[field.id];
-    if (!placement) continue;
-    const entry = findField(field.type, field.compatibilityDate);
-    if (!entry) {
-      const key = `${field.type}@${field.compatibilityDate}`;
-      if (!warnedMissing.has(key)) {
-        warnedMissing.add(key);
-        console.warn(`[shwfed-form] list field: no registered field type for ${key}`);
-      }
-      continue;
-    }
-    out.push({ field, placement, entry });
-  }
-  return out;
-});
-const gridStyle = computed(() => {
-  const l = activeLayout.value?.layout;
-  if (!l) return "";
-  const colTemplate = `repeat(${l.columns}, minmax(0, 1fr))`;
-  let rowTemplate = "";
-  if (l.rows) {
-    const grows = Array.from({ length: l.rows }, () => false);
-    for (const p of placedFields.value) {
-      if (!p.entry.metadata.h.grow) continue;
-      const [[, y1], [, y2]] = p.placement.area;
-      const lo = Math.max(1, y1);
-      const hi = Math.min(l.rows, y2 - 1);
-      for (let r = lo; r <= hi; r++) grows[r - 1] = true;
-    }
-    rowTemplate = grows.map((g) => g ? "auto" : "minmax(auto, 1fr)").join(" ");
-  }
-  const gap = `calc(${l.gap ?? DEFAULT_GAP} * 0.25rem)`;
-  const colGap = l.columns > 1 ? `min(${gap}, calc(100% / ${l.columns - 1}))` : gap;
-  const parts = [
-    "display: grid",
-    `grid-template-columns: ${colTemplate}`,
-    rowTemplate ? `grid-template-rows: ${rowTemplate}` : "",
-    `column-gap: ${colGap}`,
-    `row-gap: ${gap}`,
-    l.style ?? ""
-  ].filter(Boolean);
-  return parts.join("; ");
-});
-function cellStyle(placement) {
-  const [[x1, y1], [x2, y2]] = placement.area;
-  const parts = [`grid-column: ${x1} / ${x2}`, `grid-row: ${y1} / ${y2}`, "min-width: 0"];
-  const h = placement.h && placement.h !== "stretch" ? placement.h : null;
-  const v = placement.v && placement.v !== "stretch" ? placement.v : null;
-  if (h || v) {
-    parts.push("display: flex");
-    const toFlex = (a) => a === "start" ? "flex-start" : a === "end" ? "flex-end" : "center";
-    if (h) parts.push(`justify-content: ${toFlex(h)}`);
-    if (v) parts.push(`align-items: ${toFlex(v)}`);
-  }
-  return parts.join("; ");
+function evaluateMedia(expression) {
+  return Effect.runSync($cel(expression));
 }
-const rendered = computed(
-  () => placedFields.value.map((p) => ({
-    key: p.field.id,
-    style: cellStyle(p.placement),
-    component: p.entry.runtime,
-    fieldId: p.field.id,
-    config: p.field
-  }))
-);
 </script>
 
 <template>
-  <div :style="gridStyle">
-    <div
-      v-for="r in rendered"
-      :key="r.key"
-      :style="r.style"
-    >
-      <component
-        :is="r.component"
-        :field-id="r.fieldId"
-        :config="r.config"
-      />
-    </div>
-  </div>
+  <FormUnitRenderer
+    :unit="unit"
+    :evaluate-media="evaluateMedia"
+  />
 </template>

package/dist/runtime/components/form/fields/2026-05-13/com.shwfed.form.field.list/schema.d.ts

@@ -47,11 +47,11 @@ export declare function schema(configure: (env: Environment) => void): Schema.re
     readonly compatibilityDate: "2026-05-13";
     readonly min?: number | undefined;
     readonly max?: number | undefined;
-    readonly binding?: string | undefined;
     readonly unit: Readonly<{
         fields: ReadonlyArray<import("../../../schema.js").FieldValue>;
         layouts: ReadonlyArray<import("../../../schema.js").LayoutSetValue>;
     }>;
+    readonly binding?: string | undefined;
     readonly addLabel?: readonly [{
         readonly locale: "zh";
         readonly message: string;