@shwfed/nuxt 0.10.0 → 0.10.1

package/dist/runtime/components/ui/fields/schema.js

@@ -11,6 +11,21 @@ export const StringFieldC = z.object({
   type: z.literal("string").describe("\u5355\u884C\u6587\u672C\u8F93\u5165\u5B57\u6BB5\uFF0C\u7ED1\u5B9A string \u7C7B\u578B\u7684\u503C"),
   path: dotPropC,
   title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  required: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u4EC5\u5728\u5B57\u6BB5\u6807\u7B7E\u540E\u663E\u793A\u5FC5\u586B\u63D0\u793A\u661F\u53F7\uFF0C\u4E0D\u5F71\u54CD\u5B9E\u9645\u6821\u9A8C\u903B\u8F91"),
+  icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
+  discardEmptyString: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u7A7A\u5B57\u7B26\u4E32\u4F5C\u4E3A\u6709\u6548\u503C\u5B58\u50A8\uFF1B\u5426\u5219\u6E05\u7A7A\u8F93\u5165\u5C06\u5220\u9664\u5BF9\u5E94\u5C5E\u6027"),
+  maxLength: expressionC("int").optional().describe('\u8FD4\u56DE\u6574\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u9650\u5236\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570\uFF0C\u5982 "100"'),
+  hidden: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u9690\u85CF\u8FD9\u4E2A\u5B57\u6BB5"),
+  disabled: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u7981\u7528\u8FD9\u4E2A\u5B57\u6BB5"),
+  validation: validationC
+});
+export const TextareaFieldC = z.object({
+  id: fieldIdC,
+  type: z.literal("textarea").describe("\u591A\u884C\u6587\u672C\u8F93\u5165\u5B57\u6BB5\uFF0C\u7ED1\u5B9A string \u7C7B\u578B\u7684\u503C"),
+  path: dotPropC,
+  title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  required: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u4EC5\u5728\u5B57\u6BB5\u6807\u7B7E\u540E\u663E\u793A\u5FC5\u586B\u63D0\u793A\u661F\u53F7\uFF0C\u4E0D\u5F71\u54CD\u5B9E\u9645\u6821\u9A8C\u903B\u8F91"),
   icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
   style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
   discardEmptyString: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u7A7A\u5B57\u7B26\u4E32\u4F5C\u4E3A\u6709\u6548\u503C\u5B58\u50A8\uFF1B\u5426\u5219\u6E05\u7A7A\u8F93\u5165\u5C06\u5220\u9664\u5BF9\u5E94\u5C5E\u6027"),
@@ -24,6 +39,7 @@ export const NumberFieldC = z.object({
   type: z.literal("number").describe("\u6570\u5B57\u8F93\u5165\u5B57\u6BB5\uFF0C\u7ED1\u5B9A number \u7C7B\u578B\u7684\u503C"),
   path: dotPropC,
   title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  required: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u4EC5\u5728\u5B57\u6BB5\u6807\u7B7E\u540E\u663E\u793A\u5FC5\u586B\u63D0\u793A\u661F\u53F7\uFF0C\u4E0D\u5F71\u54CD\u5B9E\u9645\u6821\u9A8C\u903B\u8F91"),
   icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
   style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
   min: expressionC("double").optional().describe('\u8FD4\u56DE\u6D6E\u70B9\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u9650\u5236\u5141\u8BB8\u7684\u6700\u5C0F\u503C\uFF0C\u5982 "0.0"'),
@@ -38,6 +54,7 @@ export const SelectFieldC = z.object({
   type: z.literal("select").describe("\u4E0B\u62C9\u9009\u62E9\u5B57\u6BB5\uFF0C\u4ECE\u9884\u5B9A\u4E49\u9009\u9879\u4E2D\u9009\u53D6\u4E00\u4E2A\u503C"),
   path: dotPropC,
   title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  required: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u4EC5\u5728\u5B57\u6BB5\u6807\u7B7E\u540E\u663E\u793A\u5FC5\u586B\u63D0\u793A\u661F\u53F7\uFF0C\u4E0D\u5F71\u54CD\u5B9E\u9645\u6821\u9A8C\u903B\u8F91"),
   icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
   options: expressionC(/^list/).describe("\u5168\u90E8\u5019\u9009\u9879"),
   label: expressionC("string", { option: "dyn" }).describe("\u8FD4\u56DE\u5B57\u7B26\u4E32\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u63D0\u4F9B option \u53D8\u91CF\uFF0C\u751F\u6210\u8BE5\u9009\u9879\u7684\u663E\u793A\u6587\u672C"),
@@ -53,6 +70,7 @@ export const CalendarFieldC = z.object({
   type: z.literal("calendar").describe("\u65E5\u671F\u9009\u62E9\u5B57\u6BB5\uFF0C\u901A\u8FC7\u5F39\u51FA\u65E5\u5386\u9762\u677F\u9009\u62E9\u65E5\u671F"),
   path: dotPropC,
   title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  required: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u4EC5\u5728\u5B57\u6BB5\u6807\u7B7E\u540E\u663E\u793A\u5FC5\u586B\u63D0\u793A\u661F\u53F7\uFF0C\u4E0D\u5F71\u54CD\u5B9E\u9645\u6821\u9A8C\u903B\u8F91"),
   icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
   style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
   mode: z.enum(["year", "month", "date"]).describe("\u65E5\u5386\u9009\u62E9\u7CBE\u5EA6\uFF1Ayear \u4EC5\u9009\u5E74\uFF0Cmonth \u9009\u5E74\u6708\uFF0Cdate \u9009\u5E74\u6708\u65E5"),
@@ -68,12 +86,19 @@ export const SlotFieldC = z.strictObject({
   type: z.literal("slot").describe("\u5177\u540D\u63D2\u69FD\u5B57\u6BB5\uFF0C\u901A\u8FC7\u5B57\u6BB5 id \u5BF9\u5E94\u7684\u5177\u540D\u63D2\u69FD\u6E32\u67D3\u5185\u5BB9"),
   style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u6C42\u503C\u540E\u901A\u8FC7 scoped slot \u7684 style prop \u4F20\u7ED9\u6D88\u8D39\u8005")
 });
+export const EmptyFieldC = z.strictObject({
+  id: fieldIdC,
+  type: z.literal("empty").describe("\u7A7A\u767D\u5B57\u6BB5\uFF0C\u6309\u987A\u5E8F\u6E32\u67D3\u4E00\u4E2A\u7A7A div\uFF0C\u53EA\u80FD\u901A\u8FC7 style \u63A7\u5236\u5E03\u5C40"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u6C42\u503C\u540E\u4F5C\u4E3A\u7A7A div \u7684\u5185\u8054\u6837\u5F0F")
+});
 export const FieldC = z.discriminatedUnion("type", [
   StringFieldC,
+  TextareaFieldC,
   NumberFieldC,
   SelectFieldC,
   CalendarFieldC,
-  SlotFieldC
+  SlotFieldC,
+  EmptyFieldC
 ]);
 export const FieldsOrientationC = z.enum(["horizontal", "vertical", "floating"]);
 export const FieldsStyleC = expressionC(/^map/, {

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

@@ -17,6 +17,26 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 locale: "zh" | "ja" | "en" | "ko";
                 message: string;
             }[];
+            required?: boolean | undefined;
+            icon?: string | undefined;
+            style?: string | undefined;
+            discardEmptyString?: boolean | undefined;
+            maxLength?: string | undefined;
+            hidden?: string | undefined;
+            disabled?: string | undefined;
+            validation?: readonly Readonly<{
+                expression: string;
+                message: string;
+            }>[] | undefined;
+        } | {
+            id: string;
+            type: "textarea";
+            path: string;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             discardEmptyString?: boolean | undefined;
@@ -35,6 +55,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 locale: "zh" | "ja" | "en" | "ko";
                 message: string;
             }[];
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             min?: string | undefined;
@@ -58,6 +79,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             label: string;
             value: string;
             key: string;
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             hidden?: string | undefined;
@@ -76,6 +98,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             }[];
             mode: "date" | "month" | "year";
             value: string;
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             display?: string | undefined;
@@ -90,6 +113,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             id: string;
             type: "slot";
             style?: string | undefined;
+        } | {
+            id: string;
+            type: "empty";
+            style?: string | undefined;
         })[];
         orientation?: "vertical" | "horizontal" | "floating" | undefined;
         style?: string | undefined;
@@ -105,6 +132,26 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 locale: "zh" | "ja" | "en" | "ko";
                 message: string;
             }[];
+            required?: boolean | undefined;
+            icon?: string | undefined;
+            style?: string | undefined;
+            discardEmptyString?: boolean | undefined;
+            maxLength?: string | undefined;
+            hidden?: string | undefined;
+            disabled?: string | undefined;
+            validation?: readonly Readonly<{
+                expression: string;
+                message: string;
+            }>[] | undefined;
+        } | {
+            id: string;
+            type: "textarea";
+            path: string;
+            title: readonly {
+                locale: "zh" | "ja" | "en" | "ko";
+                message: string;
+            }[];
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             discardEmptyString?: boolean | undefined;
@@ -123,6 +170,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
                 locale: "zh" | "ja" | "en" | "ko";
                 message: string;
             }[];
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             min?: string | undefined;
@@ -146,6 +194,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             label: string;
             value: string;
             key: string;
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             hidden?: string | undefined;
@@ -164,6 +213,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             }[];
             mode: "date" | "month" | "year";
             value: string;
+            required?: boolean | undefined;
             icon?: string | undefined;
             style?: string | undefined;
             display?: string | undefined;
@@ -178,6 +228,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
             id: string;
             type: "slot";
             style?: string | undefined;
+        } | {
+            id: string;
+            type: "empty";
+            style?: string | undefined;
         })[];
         orientation?: "vertical" | "horizontal" | "floating" | undefined;
         style?: string | undefined;

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

@@ -7,12 +7,14 @@ import { computed, nextTick, ref, toRaw, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   CalendarFieldC,
+  EmptyFieldC,
   FieldsConfigC,
+  FieldsStyleC,
   NumberFieldC,
   SelectFieldC,
   SlotFieldC,
   StringFieldC,
-  FieldsStyleC
+  TextareaFieldC
 } from "../fields/schema";
 import { cn } from "../../../utils/cn";
 import { Button } from "../button";
@@ -54,9 +56,11 @@ const sortableItemIds = ref([]);
 const validationErrors = ref({});
 const fieldTypeOptions = computed(() => [
   { type: "string", label: t("field-type-string") },
+  { type: "textarea", label: t("field-type-textarea") },
   { type: "number", label: t("field-type-number") },
   { type: "select", label: t("field-type-select") },
   { type: "calendar", label: t("field-type-calendar") },
+  { type: "empty", label: t("field-type-empty") },
   { type: "slot", label: t("field-type-slot") }
 ]);
 const generalItem = computed(() => ({
@@ -67,7 +71,7 @@ const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase())
 const selectedField = computed(() => draftFields.value.find((field) => field.draftId === selectedItemId.value));
 const selectedFieldValidationRules = computed(() => {
   const field = selectedField.value?.field;
-  if (!field || field.type === "slot") {
+  if (!field || field.type === "slot" || field.type === "empty") {
     return [];
   }
   return field.validation ?? [];
@@ -99,10 +103,14 @@ function normalizeOrientation(value) {
 function getFieldTypeLabel(type) {
   return t(`field-type-${type}`);
 }
-function getSlotFieldLabel(field) {
-  return t("slot-field", {
-    id: field.id.slice(0, 8)
-  });
+function isPassiveField(field) {
+  return field.type === "slot" || field.type === "empty";
+}
+function getSlotFieldLabel(_) {
+  return getFieldTypeLabel("slot");
+}
+function getEmptyFieldLabel(_) {
+  return getFieldTypeLabel("empty");
 }
 function getUnnamedFieldLabel(field) {
   return t("unnamed-field", {
@@ -110,7 +118,7 @@ function getUnnamedFieldLabel(field) {
   });
 }
 function getFieldChineseTitle(field) {
-  if (field.type === "slot") {
+  if (isPassiveField(field)) {
     return void 0;
   }
   const zhTitle = field.title.find((item) => item.locale === "zh");
@@ -124,14 +132,17 @@ function getFieldListLabel(field) {
   if (field.type === "slot") {
     return getSlotFieldLabel(field);
   }
+  if (field.type === "empty") {
+    return getEmptyFieldLabel(field);
+  }
   return getFieldChineseTitle(field) ?? getUnnamedFieldLabel(field);
 }
 const fieldItems = computed(() => draftFields.value.map((item) => ({
   itemId: item.draftId,
   fieldId: item.field.id,
   label: getFieldListLabel(item.field),
-  path: item.field.type === "slot" ? void 0 : item.field.path,
-  searchMeta: item.field.type === "slot" ? item.field.id : [item.field.path, item.field.id].filter(Boolean).join(" "),
+  path: isPassiveField(item.field) ? void 0 : item.field.path,
+  searchMeta: isPassiveField(item.field) ? item.field.id : [item.field.path, item.field.id].filter(Boolean).join(" "),
   type: item.field.type
 })));
 const filteredFieldItems = computed(() => {
@@ -201,9 +212,11 @@ function normalizeValidationRules(validation) {
 function normalizeField(field) {
   switch (field.type) {
     case "string":
+    case "textarea":
       return {
         ...field,
         path: field.path.trim(),
+        required: field.required ? true : void 0,
         icon: normalizeOptionalString(field.icon ?? ""),
         style: normalizeOptionalString(field.style ?? ""),
         maxLength: normalizeOptionalString(field.maxLength ?? ""),
@@ -216,6 +229,7 @@ function normalizeField(field) {
       return {
         ...field,
         path: field.path.trim(),
+        required: field.required ? true : void 0,
         icon: normalizeOptionalString(field.icon ?? ""),
         style: normalizeOptionalString(field.style ?? ""),
         min: normalizeOptionalString(field.min ?? ""),
@@ -229,6 +243,7 @@ function normalizeField(field) {
       return {
         ...field,
         path: field.path.trim(),
+        required: field.required ? true : void 0,
         icon: normalizeOptionalString(field.icon ?? ""),
         style: normalizeOptionalString(field.style ?? ""),
         options: field.options.trim(),
@@ -243,6 +258,7 @@ function normalizeField(field) {
       return {
         ...field,
         path: field.path.trim(),
+        required: field.required ? true : void 0,
         icon: normalizeOptionalString(field.icon ?? ""),
         style: normalizeOptionalString(field.style ?? ""),
         display: normalizeOptionalString(field.display ?? ""),
@@ -257,6 +273,11 @@ function normalizeField(field) {
         ...field,
         style: normalizeOptionalString(field.style ?? "")
       };
+    case "empty":
+      return {
+        ...field,
+        style: normalizeOptionalString(field.style ?? "")
+      };
   }
 }
 function createField(type) {
@@ -264,6 +285,7 @@ function createField(type) {
   const id = createFieldId();
   switch (type) {
     case "string":
+    case "textarea":
       return {
         id,
         type,
@@ -297,6 +319,11 @@ function createField(type) {
         mode: "date",
         value: "yyyy-MM-dd"
       };
+    case "empty":
+      return {
+        id,
+        type
+      };
     case "slot":
       return {
         id,
@@ -469,7 +496,7 @@ async function copyFieldId(fieldId) {
 }
 function updateSelectedFieldPath(value) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type === "slot") {
+  if (!selected || isPassiveField(selected.field)) {
     return;
   }
   clearFieldError(selected.draftId, "path");
@@ -511,13 +538,28 @@ function updateSelectedFieldDisabled(value) {
     disabled: normalizeOptionalString(String(value))
   }));
 }
+function updateSelectedFieldRequired(value) {
+  const selected = selectedField.value;
+  if (!selected || isPassiveField(selected.field)) {
+    return;
+  }
+  updateDraftField(selected.draftId, (field) => {
+    if (isPassiveField(field)) {
+      return field;
+    }
+    return {
+      ...field,
+      required: value ? true : void 0
+    };
+  });
+}
 function updateSelectedStringDiscardEmpty(value) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type !== "string") {
+  if (!selected || selected.field.type !== "string" && selected.field.type !== "textarea") {
     return;
   }
   updateDraftField(selected.draftId, (field) => {
-    if (field.type !== "string") {
+    if (field.type !== "string" && field.type !== "textarea") {
       return field;
     }
     return {
@@ -528,12 +570,12 @@ function updateSelectedStringDiscardEmpty(value) {
 }
 function updateSelectedStringMaxLength(value) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type !== "string") {
+  if (!selected || selected.field.type !== "string" && selected.field.type !== "textarea") {
     return;
   }
   clearFieldError(selected.draftId, "maxLength");
   updateDraftField(selected.draftId, (field) => {
-    if (field.type !== "string") {
+    if (field.type !== "string" && field.type !== "textarea") {
       return field;
     }
     return {
@@ -724,11 +766,11 @@ function updateSelectedCalendarDisableDate(value) {
 }
 function addValidationRule() {
   const selected = selectedField.value;
-  if (!selected || selected.field.type === "slot") {
+  if (!selected || isPassiveField(selected.field)) {
     return;
   }
   updateDraftField(selected.draftId, (field) => {
-    if (field.type === "slot") {
+    if (isPassiveField(field)) {
       return field;
     }
     return {
@@ -745,7 +787,7 @@ function addValidationRule() {
 }
 function updateValidationRule(index, updater) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type === "slot") {
+  if (!selected || isPassiveField(selected.field)) {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -755,7 +797,7 @@ function updateValidationRule(index, updater) {
   }
   const nextValidation = validation.map((rule, ruleIndex) => ruleIndex === index ? updater(rule) : rule);
   updateDraftField(selected.draftId, (field) => {
-    if (field.type === "slot") {
+    if (isPassiveField(field)) {
       return field;
     }
     return {
@@ -788,7 +830,7 @@ function updateSelectedValidationMessage(index, value) {
 }
 function moveValidationRule(index, offset) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type === "slot") {
+  if (!selected || isPassiveField(selected.field)) {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -805,7 +847,7 @@ function moveValidationRule(index, offset) {
   nextValidation[index] = targetRule;
   nextValidation[nextIndex] = currentRule;
   updateDraftField(selected.draftId, (field) => {
-    if (field.type === "slot") {
+    if (isPassiveField(field)) {
       return field;
     }
     return {
@@ -817,7 +859,7 @@ function moveValidationRule(index, offset) {
 }
 function deleteValidationRule(index) {
   const selected = selectedField.value;
-  if (!selected || selected.field.type === "slot") {
+  if (!selected || isPassiveField(selected.field)) {
     return;
   }
   const validation = selected.field.validation ?? [];
@@ -827,7 +869,7 @@ function deleteValidationRule(index) {
   clearValidationRuleError(selected.draftId, index, "expression");
   clearValidationRuleError(selected.draftId, index, "message");
   updateDraftField(selected.draftId, (field) => {
-    if (field.type === "slot") {
+    if (isPassiveField(field)) {
       return field;
     }
     const validation2 = field.validation ?? [];
@@ -848,6 +890,10 @@ function getSchemaIssues(field) {
       const result = StringFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
     }
+    case "textarea": {
+      const result = TextareaFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
     case "number": {
       const result = NumberFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
@@ -864,6 +910,10 @@ function getSchemaIssues(field) {
       const result = SlotFieldC.safeParse(field);
       return result.success ? [] : result.error.issues;
     }
+    case "empty": {
+      const result = EmptyFieldC.safeParse(field);
+      return result.success ? [] : result.error.issues;
+    }
   }
 }
 function normalizeIssuePath(path) {
@@ -903,7 +953,7 @@ function validateDraftFields() {
     } else {
       idOwners[item.field.id] = item.draftId;
     }
-    if (item.field.type !== "slot") {
+    if (!isPassiveField(item.field)) {
       const existingPathOwner = pathOwners[item.field.path];
       if (item.field.path.length === 0) {
         setError(errors, getFieldErrorKey(item.draftId, "path"), t("field-path-required"));
@@ -1020,16 +1070,16 @@ function buildDslGuideMarkdown() {
     "",
     "### 3. \u5B57\u6BB5\u7C7B\u578B\u7EA6\u675F",
     "- \u6240\u6709\u5B57\u6BB5\u90FD\u5FC5\u987B\u5305\u542B\u7A33\u5B9A\u7684 UUID `id`\u3002",
-    "- \u53EA\u6709\u975E `slot` \u5B57\u6BB5\u53EF\u4EE5\u914D\u7F6E `path`\uFF0C\u5E76\u53C2\u4E0E\u8868\u5355\u503C\u8BFB\u5199\u3002",
-    "- `slot` \u5B57\u6BB5\u4E0D\u4F1A\u7ED1\u5B9A\u6A21\u578B\u503C\uFF0C\u53EA\u901A\u8FC7 `field.id` \u5BF9\u5E94\u7684\u5177\u540D\u63D2\u69FD\u6E32\u67D3\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");
 }
 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",
-    "- `slot` \u5B57\u6BB5\u53EA\u80FD\u4F7F\u7528 `id`\u3001`type` \u548C\u53EF\u9009\u7684 `style`\u3002",
-    "- \u975E `slot` \u5B57\u6BB5\u7684 `path` \u5FC5\u987B\u552F\u4E00\u4E14\u4E0D\u80FD\u4E3A\u7A7A\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"
   ].join("\n");
 }
@@ -1454,7 +1504,7 @@ function confirmChanges() {
             </p>
 
             <section
-              v-if="selectedField.field.type !== 'slot'"
+              v-if="!isPassiveField(selectedField.field)"
               data-slot="fields-configurator-field-path-section"
               class="flex flex-col gap-2"
             >
@@ -1483,7 +1533,7 @@ function confirmChanges() {
             </section>
 
             <section
-              v-if="selectedField.field.type !== 'slot'"
+              v-if="!isPassiveField(selectedField.field)"
               data-slot="fields-configurator-field-label-section"
               class="flex flex-col gap-2"
             >
@@ -1507,8 +1557,8 @@ function confirmChanges() {
             </section>
 
             <section
-              v-if="selectedField.field.type === 'slot'"
-              data-slot="fields-configurator-slot-options"
+              v-if="isPassiveField(selectedField.field)"
+              data-slot="fields-configurator-passive-options"
               class="grid gap-4 md:grid-cols-2"
             >
               <label class="flex flex-col gap-2 md:col-span-2">
@@ -1537,6 +1587,18 @@ function confirmChanges() {
               data-slot="fields-configurator-field-general-options"
               class="grid gap-4 md:grid-cols-2"
             >
+              <label class="flex items-center justify-between gap-3 rounded-md border border-zinc-200 px-3 py-2 md:col-span-2">
+                <div class="flex flex-col gap-1">
+                  <span class="text-sm font-medium text-zinc-800">{{ t("field-required") }}</span>
+                  <span class="text-xs text-zinc-500">{{ t("field-required-description") }}</span>
+                </div>
+                <Switch
+                  data-slot="fields-configurator-field-required-switch"
+                  :model-value="selectedField.field.required ?? false"
+                  @update:model-value="updateSelectedFieldRequired"
+                />
+              </label>
+
               <label class="flex flex-col gap-2">
                 <span class="text-xs font-medium text-zinc-500">
                   {{ t("field-style") }}
@@ -1599,7 +1661,7 @@ function confirmChanges() {
             </section>
 
             <section
-              v-if="selectedField.field.type === 'string'"
+              v-if="selectedField.field.type === 'string' || selectedField.field.type === 'textarea'"
               data-slot="fields-configurator-string-options"
               class="grid gap-4 md:grid-cols-2"
             >
@@ -1867,7 +1929,7 @@ function confirmChanges() {
             </section>
 
             <section
-              v-if="selectedField.field.type !== 'slot'"
+              v-if="!isPassiveField(selectedField.field)"
               data-slot="fields-configurator-validation"
               class="flex flex-col gap-4"
             >
@@ -2077,9 +2139,11 @@ function confirmChanges() {
     "add-field": "新增字段",
     "field-type": "字段类型",
     "field-type-string": "文本",
+    "field-type-textarea": "多行文本",
     "field-type-number": "数字",
     "field-type-select": "选择",
     "field-type-calendar": "日期",
+    "field-type-empty": "空白",
     "field-type-slot": "插槽",
     "field-id": "字段 ID",
     "field-id-duplicate": "字段 ID 不能重复",
@@ -2091,6 +2155,8 @@ function confirmChanges() {
     "copy-field-id-short": "复制 ID",
     "copy-field-id-failed": "复制字段 ID 失败，请检查剪贴板权限。",
     "field-label": "字段标题",
+    "field-required": "显示必填提示",
+    "field-required-description": "开启后仅在标签后显示红色星号，不会自动添加校验规则。",
     "field-icon": "图标",
     "field-icon-placeholder": "例如 fluent:person-20-regular",
     "field-style": "样式表达式",
@@ -2139,6 +2205,7 @@ function confirmChanges() {
     "no-matches": "没有匹配的字段。",
     "no-validation-rules": "暂未配置校验规则。",
     "unnamed-field": "未命名{type}字段",
+    "empty-field": "空白 {id}",
     "slot-field": "插槽 {id}",
     "no-fields": "还没有字段。",
     "drag-field": "拖拽调整字段顺序：{field}",
@@ -2173,9 +2240,11 @@ function confirmChanges() {
     "add-field": "フィールドを追加",
     "field-type": "フィールド種別",
     "field-type-string": "テキスト",
+    "field-type-textarea": "複数行テキスト",
     "field-type-number": "数値",
     "field-type-select": "選択",
     "field-type-calendar": "日付",
+    "field-type-empty": "空白",
     "field-type-slot": "スロット",
     "field-id": "フィールド ID",
     "field-id-duplicate": "フィールド ID は重複できません",
@@ -2187,6 +2256,8 @@ function confirmChanges() {
     "copy-field-id-short": "ID をコピー",
     "copy-field-id-failed": "フィールド ID のコピーに失敗しました。クリップボード権限を確認してください。",
     "field-label": "フィールドラベル",
+    "field-required": "必須ヒントを表示",
+    "field-required-description": "有効にするとラベルの後ろに赤い星印だけを表示し、検証ルールは自動追加しません。",
     "field-icon": "アイコン",
     "field-icon-placeholder": "例: fluent:person-20-regular",
     "field-style": "スタイル式",
@@ -2235,6 +2306,7 @@ function confirmChanges() {
     "no-matches": "一致するフィールドがありません。",
     "no-validation-rules": "検証ルールはまだありません。",
     "unnamed-field": "未命名の{type}フィールド",
+    "empty-field": "空白 {id}",
     "slot-field": "スロット {id}",
     "no-fields": "フィールドがありません。",
     "drag-field": "{field} の順序をドラッグで変更",
@@ -2269,9 +2341,11 @@ function confirmChanges() {
     "add-field": "Add field",
     "field-type": "Field type",
     "field-type-string": "Text",
+    "field-type-textarea": "Textarea",
     "field-type-number": "Number",
     "field-type-select": "Select",
     "field-type-calendar": "Date",
+    "field-type-empty": "Empty",
     "field-type-slot": "Slot",
     "field-id": "Field ID",
     "field-id-duplicate": "Field ID must be unique",
@@ -2283,6 +2357,8 @@ function confirmChanges() {
     "copy-field-id-short": "Copy ID",
     "copy-field-id-failed": "Failed to copy the field ID. Check clipboard permissions.",
     "field-label": "Field label",
+    "field-required": "Show required hint",
+    "field-required-description": "When enabled, only a red asterisk is shown after the label. No validation rule is added automatically.",
     "field-icon": "Icon",
     "field-icon-placeholder": "For example fluent:person-20-regular",
     "field-style": "Style expression",
@@ -2331,6 +2407,7 @@ function confirmChanges() {
     "no-matches": "No matching fields.",
     "no-validation-rules": "No validation rules yet.",
     "unnamed-field": "Untitled {type} field",
+    "empty-field": "Empty {id}",
     "slot-field": "Slot {id}",
     "no-fields": "No fields yet.",
     "drag-field": "Drag to reorder field {field}",