@shwfed/nuxt 0.11.7 → 0.11.8

package/dist/module.d.mts

@@ -1,5 +1,6 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export { FieldsInstance } from '../dist/runtime/components/fields-instance.js';
+export { FieldsSlotProps } from '../dist/runtime/components/ui/fields/slot-props.js';
 
 type Wrap<T> = T extends object ? Readonly<{
     [P in keyof T]?: Wrap<T[P]>;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/fields.d.vue.ts

@@ -1,8 +1,10 @@
 import { Effect } from 'effect';
 import { type FieldsConfigInput } from './ui/fields/Fields.vue.js';
+import type { FieldsSlotProps } from './ui/fields/slot-props.js';
 export { CalendarFieldC, EmptyFieldC, FieldC, FieldsBodyC, FieldsBodyInputC, FieldsConfigC, FieldsConfigInputC, NumberFieldC, SelectFieldC, SlotFieldC, StringFieldC, CURRENT_COMPATIBILITY_DATE, KIND, SUPPORTED_COMPATIBILITY_DATES, createFieldsConfig, } from './ui/fields/Fields.vue.js';
 export type { EmptyField, Field, FieldsBody, FieldsBodyInput, FieldsConfig, FieldsConfigInput, SlotField, } from './ui/fields/Fields.vue.js';
 export type { FieldsInstance } from './fields-instance.js';
+export type { FieldsSlotProps } from './ui/fields/slot-props.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -259,11 +261,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         style?: string | undefined;
     }>) => any) | undefined;
     "onInitial-value-ready"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    [x: string]: ((props: {
-        style: import("vue").CSSProperties;
-    }) => any) | undefined;
-}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Record<string, (_props?: FieldsSlotProps) => unknown>>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/fields.vue

@@ -11,6 +11,7 @@ const props = defineProps({
   config: { type: null, required: false }
 });
 const emit = defineEmits(["update:config", "initial-value-ready"]);
+const slots = defineSlots();
 const modelValue = defineModel("modelValue", { type: Object, ...{
   default: () => ({})
 } });
@@ -83,7 +84,7 @@ export {
     @initial-value-ready="handleInitialValueReady"
   >
     <template
-      v-for="(_, slotName) in $slots"
+      v-for="(_, slotName) in slots"
       #[slotName]="slotProps"
     >
       <slot

package/dist/runtime/components/fields.vue.d.ts

@@ -1,8 +1,10 @@
 import { Effect } from 'effect';
 import { type FieldsConfigInput } from './ui/fields/Fields.vue.js';
+import type { FieldsSlotProps } from './ui/fields/slot-props.js';
 export { CalendarFieldC, EmptyFieldC, FieldC, FieldsBodyC, FieldsBodyInputC, FieldsConfigC, FieldsConfigInputC, NumberFieldC, SelectFieldC, SlotFieldC, StringFieldC, CURRENT_COMPATIBILITY_DATE, KIND, SUPPORTED_COMPATIBILITY_DATES, createFieldsConfig, } from './ui/fields/Fields.vue.js';
 export type { EmptyField, Field, FieldsBody, FieldsBodyInput, FieldsConfig, FieldsConfigInput, SlotField, } from './ui/fields/Fields.vue.js';
 export type { FieldsInstance } from './fields-instance.js';
+export type { FieldsSlotProps } from './ui/fields/slot-props.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -259,11 +261,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         style?: string | undefined;
     }>) => any) | undefined;
     "onInitial-value-ready"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    [x: string]: ((props: {
-        style: import("vue").CSSProperties;
-    }) => any) | undefined;
-}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Record<string, (_props?: FieldsSlotProps) => unknown>>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ui/button-configurator/ButtonConfiguratorDialog.vue

@@ -234,6 +234,9 @@ function normalizeOptionalString(value) {
 function getGeneralErrorKey(field) {
   return `general.${field}`;
 }
+function getNodeErrorKey(itemId, field) {
+  return `${itemId}.${field}`;
+}
 function clearError(key) {
   const nextErrors = {};
   for (const [errorKey, errorValue] of Object.entries(validationErrors.value)) {
@@ -243,6 +246,18 @@ function clearError(key) {
   }
   validationErrors.value = nextErrors;
 }
+function clearNodeError(itemId, field) {
+  clearError(getNodeErrorKey(itemId, field));
+}
+function clearNodeErrors(itemId) {
+  const nextErrors = {};
+  for (const [errorKey, errorValue] of Object.entries(validationErrors.value)) {
+    if (!errorKey.startsWith(`${itemId}.`)) {
+      Reflect.set(nextErrors, errorKey, errorValue);
+    }
+  }
+  validationErrors.value = nextErrors;
+}
 function isCopyableNode(node) {
   if (!node) {
     return false;
@@ -300,6 +315,7 @@ function addDropdown() {
 }
 function deleteItem(itemId) {
   draftTree.value = removeButtonConfiguratorSubtree(draftTree.value, itemId);
+  clearNodeErrors(itemId);
   if (selectedItemId.value === itemId) {
     selectedItemId.value = "general";
   }
@@ -329,6 +345,22 @@ function updateSelectedTitle(value) {
     };
   });
 }
+function updateSelectedNodeId(value) {
+  const node = selectedNode.value;
+  if (!node || !isCopyableNode(node)) {
+    return;
+  }
+  clearNodeError(node.itemId, "id");
+  draftTree.value = updateButtonConfiguratorNode(draftTree.value, node.itemId, (item) => {
+    if (item.type === "group") {
+      return item;
+    }
+    return {
+      ...item,
+      id: String(value).trim()
+    };
+  });
+}
 function updateSelectedTooltip(value) {
   const node = selectedNode.value;
   if (!node || node.item.type !== "button") {
@@ -486,6 +518,41 @@ function showImportErrorWithCopyAction(message, onClick) {
     }
   });
 }
+function validateEditableNodeIds() {
+  const errors = {};
+  const idOwners = {};
+  let firstInvalidItemId;
+  for (const node of draftTree.value.nodes) {
+    if (!isCopyableNode(node)) {
+      continue;
+    }
+    const idResult = z.uuid().safeParse(node.item.id);
+    if (!idResult.success) {
+      errors[getNodeErrorKey(node.itemId, "id")] = t("button-id-invalid");
+      firstInvalidItemId = firstInvalidItemId ?? node.itemId;
+      continue;
+    }
+    const existingIdOwner = idOwners[node.item.id];
+    if (existingIdOwner !== void 0) {
+      errors[getNodeErrorKey(node.itemId, "id")] = t("button-id-duplicate");
+      errors[getNodeErrorKey(existingIdOwner, "id")] = t("button-id-duplicate");
+      firstInvalidItemId = firstInvalidItemId ?? node.itemId;
+      continue;
+    }
+    idOwners[node.item.id] = node.itemId;
+  }
+  if (Object.keys(errors).length === 0) {
+    return true;
+  }
+  validationErrors.value = {
+    ...validationErrors.value,
+    ...errors
+  };
+  if (firstInvalidItemId) {
+    selectedItemId.value = firstInvalidItemId;
+  }
+  return false;
+}
 function buildDraftConfig() {
   const generalStyleResult = ButtonsStyleC.safeParse(draftStyle.value);
   if (!generalStyleResult.success) {
@@ -496,6 +563,9 @@ function buildDraftConfig() {
     selectedItemId.value = "general";
     return;
   }
+  if (!validateEditableNodeIds()) {
+    return;
+  }
   const bodyResult = ButtonBodyC.safeParse({
     gap: draftGap.value,
     style: generalStyleResult.data,
@@ -535,7 +605,8 @@ function buildAiPromptHeaderMarkdown() {
 function buildMarkdownNotes() {
   return [
     "## \u6CE8\u610F\u4E8B\u9879",
-    "- \u6240\u6709 `group.id`\u3001\u6309\u94AE `id`\u3001\u4E0B\u62C9\u6309\u94AE `id` \u90FD\u5FC5\u987B\u4FDD\u7559\u73B0\u6709 UUID\uFF0C\u4E0D\u8981\u751F\u6210\u65B0\u7684 ID \u66FF\u6362\u5DF2\u6709\u9879\u3002",
+    "- \u5148\u5728\u4EE3\u7801\u91CC\u751F\u6210\u5E76\u4F7F\u7528 UUID\uFF0C\u518D\u628A\u540C\u4E00\u4E2A `id` \u7C98\u8D34\u5230\u6309\u94AE\u914D\u7F6E\u4E2D\u3002",
+    "- \u6309\u94AE\u548C\u4E0B\u62C9\u6309\u94AE\u7684 `id` \u90FD\u5FC5\u987B\u552F\u4E00\u4E14\u7B26\u5408 UUID \u683C\u5F0F\u3002",
     "- `groups` \u662F\u6839\u7EA7\u6309\u94AE\u7EC4\u5217\u8868\uFF1B\u4E0B\u62C9\u6309\u94AE\u53EA\u80FD\u5B58\u5728\u4E8E\u6309\u94AE\u7EC4\u5185\u3002",
     "- \u4E0B\u62C9\u6309\u94AE\u7684 `items` \u53EA\u80FD\u662F\u6309\u94AE\u5217\u8868\uFF0C\u4E0D\u80FD\u518D\u5D4C\u5957\u4E0B\u62C9\u6309\u94AE\u6216\u6309\u94AE\u7EC4\u3002",
     "- `style` \u5FC5\u987B\u662F\u8FD4\u56DE\u6837\u5F0F\u5BF9\u8C61\u7684 CEL \u8868\u8FBE\u5F0F\u5B57\u7B26\u4E32\uFF1B\u5982\u679C\u4E0D\u80FD\u786E\u5B9A\u4E0A\u4E0B\u6587\u53D8\u91CF\uFF0C\u8BF7\u5148\u8BF4\u660E\u9650\u5236\u3002"
@@ -623,7 +694,7 @@ function buildPasteConfigErrorMarkdown(source, error) {
     "",
     "## \u5F53\u524D\u4EFB\u52A1",
     "\u7528\u6237\u628A\u4E00\u6BB5\u914D\u7F6E\u7C98\u8D34\u56DE\u6309\u94AE\u914D\u7F6E\u5668\u65F6\u5931\u8D25\u4E86\u3002\u8BF7\u57FA\u4E8E\u4E0B\u9762\u7684\u539F\u59CB\u5185\u5BB9\u548C\u62A5\u9519\u4FEE\u590D\u5F53\u524D\u914D\u7F6E\u3002",
-    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\uFF0C\u4E0D\u8981\u91CD\u5EFA\u73B0\u6709\u9879\uFF0C\u4E5F\u4E0D\u8981\u66FF\u73B0\u6709\u9879\u751F\u6210\u65B0\u7684 UUID\u3002",
+    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\u3002\u4EE3\u7801\u91CC\u7684 UUID \u5E94\u89C6\u4E3A\u6765\u6E90\uFF0C\u4E0D\u8981\u65E0\u610F\u4E49\u5730\u91CD\u5EFA\u73B0\u6709\u9879\u3002",
     "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u8F93\u51FA\u914D\u7F6E\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\uFF1B\u5982\u679C\u8FD4\u56DE\u914D\u7F6E\uFF0C\u5FC5\u987B\u653E\u5728 Markdown code block \u4E2D\u3002",
     "",
     buildPasteConfigErrorDetails(source, error),
@@ -830,6 +901,14 @@ function confirmChanges() {
             {{ selectedItemId === "general" ? t("general-description") : t("detail-description") }}
           </p>
 
+          <p
+            v-if="selectedNode && validationErrors[getNodeErrorKey(selectedNode.itemId, 'id')]"
+            data-slot="button-configurator-id-error"
+            class="mt-4 text-xs text-red-500"
+          >
+            {{ validationErrors[getNodeErrorKey(selectedItemId, "id")] }}
+          </p>
+
           <div class="mt-6 flex flex-wrap gap-2">
             <Button
               v-if="canAddGroup"
@@ -912,6 +991,18 @@ function confirmChanges() {
             data-slot="button-configurator-button"
             class="mt-6 grid gap-4"
           >
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("button-id") }}</span>
+              <Input
+                data-slot="button-configurator-button-id"
+                :model-value="selectedButton.id"
+                :aria-invalid="validationErrors[getNodeErrorKey(selectedItemId, 'id')] ? 'true' : void 0"
+                :placeholder="t('button-id-placeholder')"
+                class="font-mono text-sm"
+                @update:model-value="updateSelectedNodeId"
+              />
+            </label>
+
             <label class="flex flex-col gap-2">
               <span class="text-xs font-medium text-zinc-500">{{ t("button-title") }}</span>
               <Locale
@@ -999,6 +1090,18 @@ function confirmChanges() {
             data-slot="button-configurator-dropdown"
             class="mt-6 grid gap-4"
           >
+            <label class="flex flex-col gap-2">
+              <span class="text-xs font-medium text-zinc-500">{{ t("dropdown-id") }}</span>
+              <Input
+                data-slot="button-configurator-dropdown-id"
+                :model-value="selectedDropdown.id"
+                :aria-invalid="validationErrors[getNodeErrorKey(selectedItemId, 'id')] ? 'true' : void 0"
+                :placeholder="t('button-id-placeholder')"
+                class="font-mono text-sm"
+                @update:model-value="updateSelectedNodeId"
+              />
+            </label>
+
             <label class="flex flex-col gap-2">
               <span class="text-xs font-medium text-zinc-500">{{ t("dropdown-title") }}</span>
               <Locale
@@ -1155,7 +1258,7 @@ function confirmChanges() {
     "copy-config-failed": "复制配置失败，请先修正当前配置中的错误。",
     "general": "总览",
     "general-description": "在这里管理按钮组和按钮组之间的间距。",
-    "detail-description": "编辑当前选中节点，或调整它的子项顺序。",
+    "detail-description": "先在代码里准备好 UUID / Effect，再把 UUID 粘贴到这里继续配置。",
     "search": "搜索按钮",
     "no-matches": "没有匹配的按钮。",
     "group-label": "按钮组",
@@ -1171,6 +1274,11 @@ function confirmChanges() {
     "general-style": "通用样式表达式",
     "general-style-placeholder": "例如返回一个 style map，例如 display: flex",
     "general-style-invalid": "样式表达式无效",
+    "button-id": "按钮 ID",
+    "dropdown-id": "下拉 ID",
+    "button-id-placeholder": "粘贴代码里已经生成的 UUID",
+    "button-id-invalid": "按钮 ID 必须是合法的 UUID",
+    "button-id-duplicate": "按钮 ID 不能重复",
     "button-title": "按钮名称",
     "tooltip": "提示",
     "button-icon": "按钮图标",
@@ -1207,7 +1315,7 @@ function confirmChanges() {
     "copy-config-failed": "Failed to copy the config. Fix the current config errors first.",
     "general": "General",
     "general-description": "Manage button groups and the gap between them.",
-    "detail-description": "Edit the selected node and reorder its children.",
+    "detail-description": "Prepare the UUID or effect in code first, then paste the UUID here to continue configuring.",
     "search": "Search buttons",
     "no-matches": "No matching buttons.",
     "group-label": "Group",
@@ -1223,6 +1331,11 @@ function confirmChanges() {
     "general-style": "Shared style expression",
     "general-style-placeholder": "Return a style map, for example display: flex",
     "general-style-invalid": "The style expression is invalid",
+    "button-id": "Button ID",
+    "dropdown-id": "Dropdown ID",
+    "button-id-placeholder": "Paste the UUID generated in code",
+    "button-id-invalid": "Button ID must be a valid UUID",
+    "button-id-duplicate": "Button ID must be unique",
     "button-title": "Button title",
     "tooltip": "Tooltip",
     "button-icon": "Button icon",
@@ -1259,7 +1372,7 @@ function confirmChanges() {
     "copy-config-failed": "設定のコピーに失敗しました。現在の設定エラーを先に修正してください。",
     "general": "全体",
     "general-description": "ボタングループとその間隔を管理します。",
-    "detail-description": "選択中ノードを編集し、子項目を並び替えます。",
+    "detail-description": "先にコード側で UUID / Effect を準備し、その UUID をここへ貼り付けて設定を続けます。",
     "search": "ボタンを検索",
     "no-matches": "一致するボタンがありません。",
     "group-label": "グループ",
@@ -1275,6 +1388,11 @@ function confirmChanges() {
     "general-style": "共通スタイル式",
     "general-style-placeholder": "例: style map を返す式。例: display: flex",
     "general-style-invalid": "スタイル式が無効です",
+    "button-id": "ボタン ID",
+    "dropdown-id": "ドロップダウン ID",
+    "button-id-placeholder": "コードで生成した UUID を貼り付け",
+    "button-id-invalid": "ボタン ID は有効な UUID である必要があります",
+    "button-id-duplicate": "ボタン ID は重複できません",
     "button-title": "ボタン名",
     "tooltip": "ツールチップ",
     "button-icon": "ボタンアイコン",
@@ -1311,7 +1429,7 @@ function confirmChanges() {
     "copy-config-failed": "설정 복사에 실패했습니다. 먼저 현재 설정 오류를 수정해 주세요.",
     "general": "전체",
     "general-description": "버튼 그룹과 그룹 간 간격을 관리합니다.",
-    "detail-description": "선택한 노드를 편집하고 하위 항목 순서를 조정합니다.",
+    "detail-description": "먼저 코드에서 UUID / Effect 를 준비한 뒤, 같은 UUID 를 여기 붙여 넣어 설정을 이어갑니다.",
     "search": "버튼 검색",
     "no-matches": "일치하는 버튼이 없습니다.",
     "group-label": "그룹",
@@ -1327,6 +1445,11 @@ function confirmChanges() {
     "general-style": "공통 스타일 식",
     "general-style-placeholder": "예: style map 을 반환하는 식. 예: display: flex",
     "general-style-invalid": "스타일 식이 올바르지 않습니다",
+    "button-id": "버튼 ID",
+    "dropdown-id": "드롭다운 ID",
+    "button-id-placeholder": "코드에서 생성한 UUID 붙여 넣기",
+    "button-id-invalid": "버튼 ID 는 올바른 UUID 여야 합니다",
+    "button-id-duplicate": "버튼 ID 는 중복될 수 없습니다",
     "button-title": "버튼 이름",
     "tooltip": "툴팁",
     "button-icon": "버튼 아이콘",

package/dist/runtime/components/ui/fields/Fields.d.vue.ts

@@ -3,6 +3,7 @@ import type { CSSProperties } from 'vue';
 export { CalendarFieldC, CURRENT_COMPATIBILITY_DATE, EmptyFieldC, FieldC, FieldsBodyC, FieldsBodyInputC, FieldsConfigC, FieldsConfigInputC, KIND, NumberFieldC, SelectFieldC, SlotFieldC, SUPPORTED_COMPATIBILITY_DATES, StringFieldC, ValidationRuleC, createFieldsConfig, validationC, } from './schema.js';
 export type { EmptyField, Field, FieldsBody, FieldsBodyInput, FieldsConfig, FieldsConfigInput, SlotField, ValidationRule, } from './schema.js';
 export type { FieldsInstance } from '../../fields-instance.js';
+export type { FieldsSlotProps } from './slot-props.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -499,13 +500,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         style?: string | undefined;
     }>) => any) | undefined;
     "onInitial-value-ready"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    [x: string]: ((props: {
-        style: CSSProperties;
-    }) => any) | undefined;
-} & {
-    default?: (props: {}) => any;
-}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Record<string, (_props?: Readonly<{
+    style: CSSProperties;
+    valid: Effect.Effect<boolean, never>;
+    form: Readonly<Record<string, unknown>>;
+}>) => unknown>>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ui/fields/Fields.vue

@@ -7,7 +7,7 @@ import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { format, parse } from "date-fns";
 import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
-import { nextTick, ref, toRaw, useId, watch, watchEffect } from "vue";
+import { computed, nextTick, readonly, ref, toRaw, useId, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { useCheating } from "#imports";
 import { Calendar } from "../calendar";
@@ -28,6 +28,7 @@ const defaultConfig = createFieldsConfig({
 const props = defineProps({
   config: { type: null, required: true }
 });
+defineSlots();
 const emit = defineEmits(["update:config", "initial-value-ready"]);
 const config = computedAsync(async () => FieldsConfigC.parse(await props.config.pipe(Effect.runPromise) ?? defaultConfig));
 const { t, locale } = useI18n();
@@ -318,12 +319,14 @@ function handleConfiguratorConfirm(nextConfig) {
   displayConfig.value = cloneConfig(nextConfig);
   emit("update:config", nextConfig);
 }
+const valid = Effect.async((resume) => {
+  void waitForReady().then(() => {
+    resume(Effect.sync(() => validateFields()));
+  });
+});
+const slotForm = computed(() => readonly(modelValue.value));
 const fieldsApi = {
-  valid: Effect.async((resume) => {
-    void waitForReady().then(() => {
-      resume(Effect.sync(() => validateFields()));
-    });
-  })
+  valid
 };
 defineExpose(fieldsApi);
 watch(config, (value) => {
@@ -427,7 +430,9 @@ export {
       <slot
         v-if="field.type === 'slot'"
         :name="field.id"
+        :form="slotForm"
         :style="getFieldStyle(field)"
+        :valid="valid"
       />
       <div
         v-else-if="field.type === 'empty'"

package/dist/runtime/components/ui/fields/Fields.vue.d.ts

@@ -3,6 +3,7 @@ import type { CSSProperties } from 'vue';
 export { CalendarFieldC, CURRENT_COMPATIBILITY_DATE, EmptyFieldC, FieldC, FieldsBodyC, FieldsBodyInputC, FieldsConfigC, FieldsConfigInputC, KIND, NumberFieldC, SelectFieldC, SlotFieldC, SUPPORTED_COMPATIBILITY_DATES, StringFieldC, ValidationRuleC, createFieldsConfig, validationC, } from './schema.js';
 export type { EmptyField, Field, FieldsBody, FieldsBodyInput, FieldsConfig, FieldsConfigInput, SlotField, ValidationRule, } from './schema.js';
 export type { FieldsInstance } from '../../fields-instance.js';
+export type { FieldsSlotProps } from './slot-props.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
@@ -499,13 +500,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         style?: string | undefined;
     }>) => any) | undefined;
     "onInitial-value-ready"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    [x: string]: ((props: {
-        style: CSSProperties;
-    }) => any) | undefined;
-} & {
-    default?: (props: {}) => any;
-}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Record<string, (_props?: Readonly<{
+    style: CSSProperties;
+    valid: Effect.Effect<boolean, never>;
+    form: Readonly<Record<string, unknown>>;
+}>) => unknown>>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ui/fields/slot-props.d.ts

@@ -0,0 +1,7 @@
+import type { Effect } from 'effect';
+import type { CSSProperties } from 'vue';
+export type FieldsSlotProps = Readonly<{
+    style: CSSProperties;
+    valid: Effect.Effect<boolean, never>;
+    form: Readonly<Record<string, unknown>>;
+}>;

package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue

@@ -489,6 +489,17 @@ function updateSelectedFieldTitle(value) {
     title: value
   }));
 }
+function updateSelectedFieldId(value) {
+  const selected = selectedField.value;
+  if (!selected || selected.field.type !== "slot") {
+    return;
+  }
+  clearFieldError(selected.draftId, "id");
+  updateDraftField(selected.draftId, (field) => field.type === "slot" ? {
+    ...field,
+    id: String(value).trim()
+  } : field);
+}
 async function copySelectedFieldId() {
   const selected = selectedField.value;
   if (!selected) {
@@ -932,6 +943,12 @@ function getSchemaIssues(field) {
     }
   }
 }
+function getSchemaIssueMessage(issue, path) {
+  if (path[0] === "id") {
+    return t("field-id-invalid");
+  }
+  return issue.message;
+}
 function normalizeIssuePath(path) {
   const normalizedPath = [];
   for (const segment of path) {
@@ -987,11 +1004,12 @@ function validateDraftFields() {
       firstInvalidItemId = firstInvalidItemId ?? item.draftId;
     }
     for (const issue of getSchemaIssues(item.field)) {
-      const issueKey = getIssueErrorKey(item.draftId, normalizeIssuePath(issue.path));
+      const issuePath = normalizeIssuePath(issue.path);
+      const issueKey = getIssueErrorKey(item.draftId, issuePath);
       if (!issueKey) {
         continue;
       }
-      setError(errors, issueKey, issue.message);
+      setError(errors, issueKey, getSchemaIssueMessage(issue, issuePath));
       firstInvalidItemId = firstInvalidItemId ?? item.draftId;
     }
   }
@@ -1091,7 +1109,8 @@ function buildDslGuideMarkdown() {
     "- `select.options` \u901A\u5E38\u8FD4\u56DE\u5217\u8868\uFF1B`label` / `value` / `key` \u7528\u6765\u63CF\u8FF0\u5355\u4E2A\u9009\u9879\u5982\u4F55\u6620\u5C04\u3002",
     "",
     "### 3. \u5B57\u6BB5\u7C7B\u578B\u7EA6\u675F",
-    "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u5305\u542B\u7A33\u5B9A\u7684 UUID `id`\u3002",
+    "- \u4EE3\u7801\u91CC\u5E94\u5148\u751F\u6210\u5E76\u4F7F\u7528 UUID\uFF0C\u518D\u628A\u540C\u4E00\u4E2A `id` \u7C98\u8D34\u56DE\u5B57\u6BB5\u914D\u7F6E\u3002",
+    "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u5305\u542B\u552F\u4E00\u4E14\u5408\u6CD5\u7684 UUID `id`\u3002",
     "- \u53EA\u6709\u975E `slot` / `empty` \u5B57\u6BB5\u53EF\u4EE5\u914D\u7F6E `path`\uFF0C\u5E76\u53C2\u4E0E\u8868\u5355\u503C\u8BFB\u5199\u3002",
     "- `slot` \u548C `empty` \u5B57\u6BB5\u90FD\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF0C\u53EA\u5141\u8BB8 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002"
   ].join("\n");
@@ -1099,7 +1118,8 @@ function buildDslGuideMarkdown() {
 function buildMarkdownNotes() {
   return [
     "## \u6CE8\u610F\u4E8B\u9879",
-    "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u4FDD\u7559\u73B0\u6709 `id`\uFF0C\u4E0D\u8981\u751F\u6210\u65B0\u7684 `id` \u66FF\u6362\u5DF2\u6709\u5B57\u6BB5\u3002",
+    "- \u5148\u5728\u4EE3\u7801\u91CC\u751F\u6210\u5E76\u4F7F\u7528 UUID\uFF0C\u518D\u628A\u540C\u4E00\u4E2A `id` \u7C98\u8D34\u5230\u5B57\u6BB5\u914D\u7F6E\u4E2D\u3002",
+    "- \u6240\u6709\u5B57\u6BB5 `id` \u90FD\u5FC5\u987B\u552F\u4E00\u4E14\u7B26\u5408 UUID \u683C\u5F0F\u3002",
     "- `slot` \u4E0E `empty` \u5B57\u6BB5\u53EA\u80FD\u4F7F\u7528 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
     "- \u975E `slot` / `empty` \u5B57\u6BB5\u7684 `path` \u5FC5\u987B\u552F\u4E00\u4E14\u4E0D\u80FD\u4E3A\u7A7A\u3002",
     "- \u8868\u8FBE\u5F0F\u5B57\u6BB5\u5FC5\u987B\u4E25\u683C\u9075\u5B88 schema \u7EA6\u675F\uFF1B\u5982\u679C schema \u4E0D\u652F\u6301\uFF0C\u5C31\u76F4\u63A5\u8BF4\u660E\u9650\u5236\u3002"
@@ -1187,7 +1207,7 @@ function buildPasteConfigErrorMarkdown(source, error) {
     "",
     "## \u5F53\u524D\u4EFB\u52A1",
     "\u7528\u6237\u628A\u4E00\u6BB5\u914D\u7F6E\u7C98\u8D34\u56DE\u5B57\u6BB5\u914D\u7F6E\u5668\u65F6\u5931\u8D25\u4E86\u3002\u8BF7\u57FA\u4E8E\u4E0B\u9762\u7684\u539F\u59CB\u5185\u5BB9\u548C\u62A5\u9519\u4FEE\u590D\u5F53\u524D\u914D\u7F6E\u3002",
-    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\uFF0C\u4E0D\u8981\u53D1\u660E schema \u4E2D\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5\uFF0C\u4E5F\u4E0D\u8981\u66FF\u73B0\u6709\u5B57\u6BB5\u751F\u6210\u65B0\u7684 ID\u3002",
+    "\u8BF7\u4F18\u5148\u4FEE\u590D\u6700\u5C0F\u5FC5\u8981\u8303\u56F4\uFF0C\u4E0D\u8981\u53D1\u660E schema \u4E2D\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5\u3002\u4EE3\u7801\u91CC\u7684 UUID \u5E94\u89C6\u4E3A\u6765\u6E90\uFF0C\u4E0D\u8981\u65E0\u610F\u4E49\u5730\u91CD\u5EFA\u73B0\u6709\u5B57\u6BB5\u3002",
     "\u53EA\u6709\u5F53\u7528\u6237\u660E\u786E\u8981\u6C42\u8F93\u51FA\u914D\u7F6E\u65F6\uFF0C\u624D\u8FD4\u56DE\u5B8C\u6574\u914D\u7F6E\uFF1B\u5982\u679C\u8FD4\u56DE\u914D\u7F6E\uFF0C\u5FC5\u987B\u653E\u5728 Markdown code block \u4E2D\u3002",
     "",
     buildPasteConfigErrorDetails(source, error),
@@ -1525,6 +1545,26 @@ function confirmChanges() {
               {{ validationErrors[getFieldErrorKey(selectedField.draftId, "id")] }}
             </p>
 
+            <section
+              v-if="selectedField.field.type === 'slot'"
+              data-slot="fields-configurator-field-id-section"
+              class="flex flex-col gap-2"
+            >
+              <label class="flex flex-col gap-2">
+                <span class="text-xs font-medium text-zinc-500">
+                  {{ t("field-id") }}
+                </span>
+                <Input
+                  data-slot="fields-configurator-field-id-input"
+                  :model-value="selectedField.field.id"
+                  :aria-invalid="validationErrors[getFieldErrorKey(selectedField.draftId, 'id')] ? 'true' : void 0"
+                  :placeholder="t('field-id-placeholder')"
+                  class="font-mono text-sm"
+                  @update:model-value="updateSelectedFieldId"
+                />
+              </label>
+            </section>
+
             <section
               v-if="!isPassiveField(selectedField.field)"
               data-slot="fields-configurator-field-path-section"
@@ -2188,6 +2228,8 @@ function confirmChanges() {
     "field-type-empty": "空白",
     "field-type-slot": "插槽",
     "field-id": "字段 ID",
+    "field-id-placeholder": "粘贴代码里已经生成的 UUID",
+    "field-id-invalid": "字段 ID 必须是合法的 UUID",
     "field-id-duplicate": "字段 ID 不能重复",
     "field-path": "字段路径",
     "field-path-placeholder": "例如 profile.name",
@@ -2291,6 +2333,8 @@ function confirmChanges() {
     "field-type-empty": "空白",
     "field-type-slot": "スロット",
     "field-id": "フィールド ID",
+    "field-id-placeholder": "コードで生成した UUID を貼り付け",
+    "field-id-invalid": "フィールド ID は有効な UUID である必要があります",
     "field-id-duplicate": "フィールド ID は重複できません",
     "field-path": "フィールドパス",
     "field-path-placeholder": "例: profile.name",
@@ -2394,6 +2438,8 @@ function confirmChanges() {
     "field-type-empty": "Empty",
     "field-type-slot": "Slot",
     "field-id": "Field ID",
+    "field-id-placeholder": "Paste the UUID generated in code",
+    "field-id-invalid": "Field ID must be a valid UUID",
     "field-id-duplicate": "Field ID must be unique",
     "field-path": "Field path",
     "field-path-placeholder": "For example profile.name",

package/dist/types.d.mts

@@ -6,6 +6,8 @@ export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<
 
 export { type FieldsInstance } from '../dist/runtime/components/fields-instance.js'
 
+export { type FieldsSlotProps } from '../dist/runtime/components/ui/fields/slot-props.js'
+
 export { default } from './module.mjs'
 
 export { type Env } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "",
   "license": "MIT",
   "type": "module",