@shwfed/nuxt 0.11.36 → 0.11.38

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

@@ -15,7 +15,7 @@ import { mergeDslContexts, useCELContext } from "../../../plugins/cel/context";
 import { Calendar } from "../calendar";
 import { Button } from "../button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
-import { Field, FieldContent, FieldError, FieldLabel } from "../field";
+import { Field, FieldContent, FieldError, FieldLabel, FieldLegend, FieldSet } from "../field";
 import FieldsConfiguratorDialog from "../fields-configurator/FieldsConfiguratorDialog.vue";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupNumberField, InputGroupTextarea } from "../input-group";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../popover";
@@ -25,7 +25,7 @@ import { getLocalizedText } from "../../../utils/coders";
 import { FieldsConfigC, createFieldsConfig } from "./schema";
 const id = useId();
 const defaultConfig = createFieldsConfig({
-  fields: []
+  groups: []
 });
 const props = defineProps({
   config: { type: null, required: true }
@@ -53,7 +53,10 @@ function cloneConfig(config2) {
   const nextConfig = {
     kind: config2.kind,
     compatibilityDate: config2.compatibilityDate,
-    fields: config2.fields.slice()
+    groups: config2.groups.map((group) => ({
+      ...group,
+      fields: group.fields.slice()
+    }))
   };
   if (config2.orientation) {
     nextConfig.orientation = config2.orientation;
@@ -129,6 +132,30 @@ function getFieldPartStyle(styleExpression) {
 function getFieldStyle(field) {
   return getFieldPartStyle(field.style);
 }
+function getGroupStyle(group, config2) {
+  const style = usesContentsOrientation(config2) ? getConfigStyle(config2) : {};
+  const groupStyle = group.style ? evaluateExpression(group.style, { form: modelValue.value, id: group.id }, {}) : {};
+  if (!groupStyle || typeof groupStyle !== "object" || Array.isArray(groupStyle)) {
+    return style;
+  }
+  for (const [key, value] of Object.entries(groupStyle)) {
+    if (typeof value === "string" || typeof value === "number") {
+      Reflect.set(style, key, value);
+    }
+  }
+  return style;
+}
+function getGroupTitle(group) {
+  const title = getLocalizedText(group.title, locale.value);
+  if (!title) {
+    return void 0;
+  }
+  const normalizedTitle = title.trim();
+  return normalizedTitle.length > 0 ? normalizedTitle : void 0;
+}
+function getConfigFields(config2) {
+  return config2.groups.flatMap((group) => group.fields);
+}
 function getFieldContainerStyle(field, config2) {
   if (!isPassiveField(field) && usesContentsOrientation(config2)) {
     return {};
@@ -150,6 +177,12 @@ function getFieldContentStyle(field, config2) {
 function isPassiveField(field) {
   return field.type === "slot" || field.type === "empty";
 }
+function isLabeledDisplayField(field) {
+  return field.type === "markdown";
+}
+function isInteractiveField(field) {
+  return !isLabeledDisplayField(field);
+}
 function toCalendarDateValue(value, valueFormat) {
   if (typeof value !== "string") return void 0;
   const date = parse(value, valueFormat, /* @__PURE__ */ new Date());
@@ -173,8 +206,8 @@ function getFieldValue(field) {
   return getProperty(modelValue.value, field.path);
 }
 function initializeFieldValues(config2) {
-  for (const field of config2.fields) {
-    if (isPassiveField(field) || !field.initialValue) {
+  for (const field of getConfigFields(config2)) {
+    if (isPassiveField(field) || isLabeledDisplayField(field) || !field.initialValue) {
       continue;
     }
     const initialValueResult = tryEvaluateExpression(field.initialValue, { form: modelValue.value });
@@ -226,6 +259,24 @@ function getFileIcon(filename) {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
   return FILE_EXTENSION_ICONS[ext] ?? "vscode-icons:default-file";
 }
+const MIME_TO_ICON = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "vscode-icons:file-type-excel",
+  "application/vnd.ms-excel": "vscode-icons:file-type-excel",
+  "application/pdf": "vscode-icons:file-type-pdf2",
+  "application/msword": "vscode-icons:file-type-word",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "vscode-icons:file-type-word",
+  "application/vnd.ms-powerpoint": "vscode-icons:file-type-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "vscode-icons:file-type-powerpoint",
+  "application/x-zip-compressed": "vscode-icons:file-type-zip",
+  "application/zip": "vscode-icons:file-type-zip",
+  "image/png": "vscode-icons:file-type-image",
+  "image/jpg": "vscode-icons:file-type-image",
+  "image/jpeg": "vscode-icons:file-type-image"
+};
+function getUploadTemplateIcon(field) {
+  const first = field.accept?.[0];
+  return (first && MIME_TO_ICON[first]) ?? "fluent:arrow-download-20-regular";
+}
 function getUploadAcceptString(field) {
   if (!field.accept || field.accept.length === 0) {
     return void 0;
@@ -474,8 +525,8 @@ function validateField(field) {
 }
 function validateFields() {
   const nextValidationErrors = {};
-  for (const field of displayConfig.value.fields) {
-    if (isPassiveField(field)) {
+  for (const field of getConfigFields(displayConfig.value)) {
+    if (isPassiveField(field) || isLabeledDisplayField(field)) {
       continue;
     }
     const failure = getValidationFailure(field);
@@ -492,6 +543,9 @@ function isFieldInvalid(field) {
 function getFieldLabel(field) {
   return getLocalizedText(field.title, locale.value) ?? field.path;
 }
+function getDisplayFieldLabel(field) {
+  return getLocalizedText(field.title, locale.value) ?? field.id;
+}
 function isFieldRequired(field) {
   return field.required === true;
 }
@@ -500,6 +554,13 @@ function renderValidationMessage(field) {
   if (!error) return "";
   return $md.inline`${error.message}`(mergeDslContexts(error.context, dslContext));
 }
+function renderMarkdownField(field) {
+  const source = getLocalizedText(field.locale, locale.value) ?? "";
+  if (source.trim().length === 0) {
+    return "";
+  }
+  return $md.block`${source}`(mergeDslContexts({ form: modelValue.value }, dslContext));
+}
 function isCalendarDateDisabled(field, date) {
   if (!field.disableDate) {
     return false;
@@ -556,8 +617,8 @@ watch(config, (value) => {
 }, { immediate: true });
 watchEffect(() => {
   const activePaths = /* @__PURE__ */ new Set();
-  for (const field of displayConfig.value.fields) {
-    if (!isPassiveField(field) && !isFieldHidden(field) && !isFieldDisabled(field)) {
+  for (const field of getConfigFields(displayConfig.value)) {
+    if (!isPassiveField(field) && !isFieldHidden(field) && !isLabeledDisplayField(field) && !isFieldDisabled(field)) {
       activePaths.add(field.path);
     }
   }
@@ -585,11 +646,13 @@ export {
   CURRENT_COMPATIBILITY_DATE,
   EmptyFieldC,
   FieldC,
+  FieldGroupC,
   FieldsBodyC,
   FieldsBodyInputC,
   FieldsConfigC,
   FieldsConfigInputC,
   KIND,
+  MarkdownFieldC,
   NumberFieldC,
   SelectFieldC,
   SlotFieldC,
@@ -607,7 +670,7 @@ export {
     :class="[
   'relative p-1 -m-1 border border-dashed',
   isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent',
-  isConfigBordered(displayConfig) ? '!p-0 !m-0 border-solid border-zinc-200' : ''
+  isConfigBordered(displayConfig) ? '!p-0 !m-0 border-transparent' : ''
 ]"
     :style="getConfigStyle(displayConfig)"
   >
@@ -635,176 +698,455 @@ export {
       class="absolute inset-0 z-10 w-full h-full"
     />
 
-    <template
-      v-for="field in displayConfig.fields"
-      :key="field.id"
+    <FieldSet
+      v-for="group in displayConfig.groups"
+      :key="group.id"
+      data-slot="fields-group"
+      :data-group-id="group.id"
+      :class="[
+  isConfigBordered(displayConfig) ? 'overflow-hidden rounded-md border border-zinc-200' : ''
+]"
+      :style="getGroupStyle(group, displayConfig)"
     >
-      <div
-        v-if="field.type === 'slot' && isConfigBordered(displayConfig)"
-        :class="'border-b border-r border-zinc-200'"
-        :style="getFieldStyle(field)"
+      <FieldLegend
+        v-if="getGroupTitle(group)"
+        data-slot="fields-group-legend"
+        class="px-2 pt-2"
       >
+        {{ getGroupTitle(group) }}
+      </FieldLegend>
+
+      <template
+        v-for="field in group.fields"
+        :key="field.id"
+      >
+        <div
+          v-if="field.type === 'slot' && isConfigBordered(displayConfig)"
+          :class="'border-b border-r border-zinc-200'"
+          :style="getFieldStyle(field)"
+        >
+          <slot
+            :name="field.id"
+            :form="slotForm"
+            :style="{}"
+            :valid="valid"
+          />
+        </div>
         <slot
+          v-else-if="field.type === 'slot'"
           :name="field.id"
           :form="slotForm"
-          :style="{}"
+          :style="getFieldStyle(field)"
           :valid="valid"
         />
-      </div>
-      <slot
-        v-else-if="field.type === 'slot'"
-        :name="field.id"
-        :form="slotForm"
-        :style="getFieldStyle(field)"
-        :valid="valid"
-      />
-      <div
-        v-else-if="field.type === 'empty'"
-        :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
-        :style="getFieldStyle(field)"
-      />
-      <div
-        v-else-if="field.type === 'upload' && !isFieldHidden(field)"
-        :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
-        :style="getFieldContainerStyle(field, displayConfig)"
-        class="flex flex-col gap-2 p-2"
-      >
-        <p class="text-sm font-medium text-zinc-700">
-          <span class="inline-flex items-start gap-0.5">
-            <span>{{ getFieldLabel(field) }}</span>
-            <sup
-              v-if="isFieldRequired(field)"
-              class="text-red-500 leading-none"
-            >*</sup>
-          </span>
-        </p>
-        <button
-          v-if="field.template"
-          type="button"
-          class="inline-flex items-center gap-1 self-start text-sm text-[--el-color-primary] hover:underline disabled:opacity-50"
-          :disabled="templateDownloading[field.id]"
-          @click="handleTemplateDownload(field)"
-        >
-          <Icon
-            :icon="templateDownloading[field.id] ? 'svg-spinners:ring-resize' : 'fluent:arrow-download-20-regular'"
-            class="text-base"
-          />
-          {{ t("upload-download-template") }}
-        </button>
-        <label
-          v-if="getUploadFiles(field).length < getUploadMaxCount(field)"
-          :class="[
-  'flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 transition-colors',
-  isFieldDisabled(field) ? 'cursor-not-allowed border-zinc-200 opacity-50' : 'border-zinc-300 hover:border-zinc-400 hover:bg-zinc-50'
-]"
-          @drop="handleUploadDrop(field, $event)"
-          @dragover="handleUploadDragOver"
+        <div
+          v-else-if="field.type === 'empty'"
+          :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
+          :style="getFieldStyle(field)"
+        />
+        <Field
+          v-else-if="field.type === 'markdown' && !isFieldHidden(field)"
+          :orientation="getConfigOrientation(displayConfig)"
+          :style="getFieldContainerStyle(field, displayConfig)"
         >
-          <Icon
-            :icon="field.icon ?? 'fluent:cloud-arrow-up-20-regular'"
-            class="text-4xl text-zinc-400"
-          />
-          <p
-            v-if="field.description"
-            class="text-sm text-zinc-600"
-            v-html="$md.inline`${getLocalizedText(field.description, locale) ?? ''}`()"
-          />
-          <p
-            v-else
-            class="text-sm text-zinc-600"
+          <FieldLabel
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
+            :style="getFieldLabelStyle(field, displayConfig)"
           >
-            {{ t("upload-click-or-drag") }}
-          </p>
-          <p class="text-xs text-zinc-400">
-            {{ getUploadDescription(field) || t("upload-accept-all") }}
-          </p>
-          <input
-            type="file"
-            class="sr-only"
-            :accept="getUploadAcceptString(field)"
-            :disabled="isFieldDisabled(field)"
-            :multiple="getUploadMaxCount(field) !== 1"
-            @change="handleUploadInputChange(field, $event)"
+            <span>{{ getDisplayFieldLabel(field) }}</span>
+          </FieldLabel>
+          <FieldContent
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2' : void 0"
+            :style="getFieldContentStyle(field, displayConfig)"
           >
-        </label>
-        <ul
-          v-if="getUploadFiles(field).length > 0"
-          class="flex flex-col gap-1"
+            <div
+              data-slot="fields-markdown"
+              v-html="renderMarkdownField(field)"
+            />
+          </FieldContent>
+        </Field>
+        <div
+          v-else-if="field.type === 'upload' && !isFieldHidden(field)"
+          :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+          :style="getFieldContainerStyle(field, displayConfig)"
+          class="flex flex-col gap-2 p-2"
         >
-          <li
-            v-for="(file, fileIndex) in getUploadFiles(field)"
-            :key="`${field.id}:${fileIndex}:${file.name}`"
-            class="flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-2"
+          <p class="text-sm font-medium text-zinc-700">
+            <span class="inline-flex items-start gap-0.5">
+              <span>{{ getFieldLabel(field) }}</span>
+              <sup
+                v-if="isFieldRequired(field)"
+                class="text-red-500 leading-none"
+              >*</sup>
+            </span>
+          </p>
+          <label
+            v-if="getUploadFiles(field).length < getUploadMaxCount(field)"
+            :class="[
+  'flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-8 transition-colors',
+  isFieldDisabled(field) ? 'cursor-not-allowed border-zinc-200 opacity-50' : 'border-zinc-300 hover:border-zinc-400 hover:bg-zinc-50'
+]"
+            @drop="handleUploadDrop(field, $event)"
+            @dragover="handleUploadDragOver"
           >
             <Icon
-              :icon="getFileIcon(file.name)"
-              class="shrink-0 text-lg"
+              :icon="field.icon ?? 'fluent:cloud-arrow-up-20-regular'"
+              class="text-4xl text-zinc-400"
             />
-            <span class="flex-1 truncate text-sm text-zinc-700">{{ file.name }}</span>
             <button
+              v-if="field.template"
               type="button"
-              class="shrink-0 text-zinc-300 transition-colors hover:text-red-500"
-              :disabled="isFieldDisabled(field)"
-              @click="removeUploadFile(field, fileIndex)"
+              class="inline-flex items-center gap-1.5 rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm text-zinc-600 transition-colors hover:border-[--el-color-primary] hover:text-[--el-color-primary] disabled:opacity-50"
+              :disabled="templateDownloading[field.id]"
+              @click.prevent.stop="handleTemplateDownload(field)"
             >
               <Icon
-                icon="fluent:delete-20-regular"
-                class="text-lg"
+                :icon="templateDownloading[field.id] ? 'svg-spinners:ring-resize' : getUploadTemplateIcon(field)"
+                class="text-base"
               />
+              {{ getLocalizedText(field.templateName, locale) ?? t("upload-download-template") }}
             </button>
-          </li>
-        </ul>
-      </div>
-      <Field
-        v-else-if="!isFieldHidden(field)"
-        :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
-        :data-invalid="isFieldInvalid(field) ? 'true' : void 0"
-        :orientation="getConfigOrientation(displayConfig)"
-        :style="getFieldContainerStyle(field, displayConfig)"
-      >
-        <FieldLabel
-          :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${id}:${field.path}` : void 0"
-          :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
-          :style="getFieldLabelStyle(field, displayConfig)"
-        >
-          <span class="inline-flex items-start gap-0.5">
-            <span>{{ getFieldLabel(field) }}</span>
-            <sup
-              v-if="isFieldRequired(field)"
-              class="text-red-500 leading-none"
-            >*</sup>
-          </span>
-          <span v-if="isCheating">
-            <span class="font-mono">{{ field.path }}</span>
-          </span>
-        </FieldLabel>
-        <FieldContent
-          :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-          :style="getFieldContentStyle(field, displayConfig)"
+            <p
+              v-if="field.description"
+              class="text-sm text-zinc-600"
+              v-html="$md.inline`${getLocalizedText(field.description, locale) ?? ''}`()"
+            />
+            <p
+              v-else
+              class="text-sm text-zinc-600"
+            >
+              {{ t("upload-click-or-drag") }}
+            </p>
+            <p class="text-xs text-zinc-400">
+              {{ getUploadDescription(field) || t("upload-accept-all") }}
+            </p>
+            <input
+              type="file"
+              class="sr-only"
+              :accept="getUploadAcceptString(field)"
+              :disabled="isFieldDisabled(field)"
+              :multiple="getUploadMaxCount(field) !== 1"
+              @change="handleUploadInputChange(field, $event)"
+            >
+          </label>
+          <ul
+            v-if="getUploadFiles(field).length > 0"
+            class="flex flex-col gap-1"
+          >
+            <li
+              v-for="(file, fileIndex) in getUploadFiles(field)"
+              :key="`${field.id}:${fileIndex}:${file.name}`"
+              class="flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-2"
+            >
+              <Icon
+                :icon="getFileIcon(file.name)"
+                class="shrink-0 text-lg"
+              />
+              <span class="flex-1 truncate text-sm text-zinc-700">{{ file.name }}</span>
+              <button
+                type="button"
+                class="shrink-0 text-zinc-300 transition-colors hover:text-red-500"
+                :disabled="isFieldDisabled(field)"
+                @click="removeUploadFile(field, fileIndex)"
+              >
+                <Icon
+                  icon="fluent:delete-20-regular"
+                  class="text-lg"
+                />
+              </button>
+            </li>
+          </ul>
+        </div>
+        <Field
+          v-else-if="isInteractiveField(field) && !isFieldHidden(field)"
+          :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+          :data-invalid="isFieldInvalid(field) ? 'true' : void 0"
+          :orientation="getConfigOrientation(displayConfig)"
+          :style="getFieldContainerStyle(field, displayConfig)"
         >
-          <Popover
-            v-if="field.type === 'calendar'"
-            @update:open="(open) => handleCalendarOpenChange(field, open)"
+          <FieldLabel
+            :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${id}:${field.path}` : void 0"
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
+            :style="getFieldLabelStyle(field, displayConfig)"
+          >
+            <span class="inline-flex items-start gap-0.5">
+              <span>{{ getFieldLabel(field) }}</span>
+              <sup
+                v-if="isFieldRequired(field)"
+                class="text-red-500 leading-none"
+              >*</sup>
+            </span>
+            <span v-if="isCheating">
+              <span class="font-mono">{{ field.path }}</span>
+            </span>
+          </FieldLabel>
+          <FieldContent
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2' : void 0"
+            :style="getFieldContentStyle(field, displayConfig)"
           >
-            <PopoverAnchor as-child>
-              <InputGroup :data-disabled="isFieldDisabled(field) ? 'true' : void 0">
-                <PopoverTrigger as-child>
-                  <InputGroupInput
-                    :model-value="displayCalendarValue(getProperty(modelValue, field.path), field.display, field.value)"
-                    class="text-left"
+            <Popover
+              v-if="field.type === 'calendar'"
+              @update:open="(open) => handleCalendarOpenChange(field, open)"
+            >
+              <PopoverAnchor as-child>
+                <InputGroup :data-disabled="isFieldDisabled(field) ? 'true' : void 0">
+                  <PopoverTrigger as-child>
+                    <InputGroupInput
+                      :model-value="displayCalendarValue(getProperty(modelValue, field.path), field.display, field.value)"
+                      class="text-left"
+                      :disabled="isFieldDisabled(field)"
+                      :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                      readonly
+                      @blur="handleCalendarBlur(field)"
+                    />
+                  </PopoverTrigger>
+                  <InputGroupAddon v-if="field.icon">
+                    <Icon
+                      :icon="field.icon"
+                    />
+                  </InputGroupAddon>
+                  <InputGroupAddon
+                    v-if="hasProperty(modelValue, field.path)"
+                    align="inline-end"
+                    :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
+                  >
+                    <Tooltip :delay-duration="800">
+                      <TooltipTrigger>
+                        <InputGroupButton as-child>
+                          <button
+                            type="button"
+                            class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                            :disabled="isFieldDisabled(field)"
+                            @click="deleteProperty(modelValue, field.path)"
+                          >
+                            <Icon
+                              icon="fluent:dismiss-20-regular"
+                            />
+                          </button>
+                        </InputGroupButton>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {{ t("clear") }}
+                      </TooltipContent>
+                    </Tooltip>
+                  </InputGroupAddon>
+                </InputGroup>
+              </PopoverAnchor>
+              <PopoverContent class="w-72">
+                <Calendar
+                  :locale="locale"
+                  :layout="field.mode"
+                  :model-value="toCalendarDateValue(getProperty(modelValue, field.path), field.value)"
+                  :disabled="isFieldDisabled(field)"
+                  :is-date-disabled="field.disableDate ? (date) => isCalendarDateDisabled(field, date) : void 0"
+                  @update:model-value="(value) => {
+  if (value === void 0) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, format(value.toDate(getLocalTimeZone()), field.value));
+  }
+}"
+                />
+              </PopoverContent>
+            </Popover>
+            <template v-else>
+              <template v-if="field.type === 'select'">
+                <Popover
+                  v-for="selectState in [getSelectFieldState(field)]"
+                  :key="`${field.id}:select:${selectState.selectedKey ?? 'empty'}`"
+                  :open="selectOpen[field.path] === true"
+                  @update:open="(open) => handleSelectOpenChange(field, open)"
+                >
+                  <PopoverAnchor as-child>
+                    <InputGroup :data-disabled="isFieldDisabled(field) ? 'true' : void 0">
+                      <PopoverTrigger as-child>
+                        <InputGroupInput
+                          :id="`${id}:${field.path}`"
+                          :model-value="getSelectDisplayValue(selectState, selectState.selectedKey)"
+                          :disabled="isFieldDisabled(field)"
+                          :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                          :placeholder="t('select-placeholder')"
+                          class="text-left"
+                          readonly
+                          @blur="handleSelectBlur(field)"
+                        />
+                      </PopoverTrigger>
+                      <InputGroupAddon v-if="field.icon">
+                        <Icon
+                          :icon="field.icon"
+                        />
+                      </InputGroupAddon>
+                      <InputGroupAddon
+                        v-if="hasProperty(modelValue, field.path)"
+                        align="inline-end"
+                        :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
+                      >
+                        <Tooltip :delay-duration="800">
+                          <TooltipTrigger>
+                            <InputGroupButton as-child>
+                              <button
+                                type="button"
+                                class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                                :disabled="isFieldDisabled(field)"
+                                @click="clearSelectField(field)"
+                              >
+                                <Icon
+                                  icon="fluent:dismiss-20-regular"
+                                />
+                              </button>
+                            </InputGroupButton>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {{ t("clear") }}
+                          </TooltipContent>
+                        </Tooltip>
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </PopoverAnchor>
+
+                  <PopoverContent
+                    class="p-0"
+                    :style="{ width: 'var(--reka-popover-trigger-width)' }"
+                  >
+                    <Command
+                      :model-value="selectState.selectedKey"
+                      :disabled="isFieldDisabled(field)"
+                      selection-behavior="toggle"
+                      @update:model-value="(value) => handleSelectCommandValueChange(field, selectState, value)"
+                    >
+                      <CommandInput :placeholder="t('select-search-placeholder')" />
+                      <CommandList>
+                        <CommandEmpty as-child>
+                          <section class="h-32 flex flex-col text-lg items-center justify-center gap-2 select-none">
+                            <Icon
+                              icon="fluent:app-recent-20-regular"
+                              class="text-zinc-400 text-2xl!"
+                            />
+                            <p class="text-zinc-500">
+                              {{ t("select-empty") }}
+                            </p>
+                          </section>
+                        </CommandEmpty>
+                        <CommandGroup>
+                          <CommandItem
+                            v-for="option in selectState.options"
+                            :key="option.key"
+                            data-slot="select-option"
+                            :value="option.key"
+                            class="data-highlighted:bg-zinc-50 data-highlighted:text-zinc-700 data-[state=checked]:bg-zinc-100 data-[state=checked]:text-zinc-700 transition cursor-pointer relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+                          >
+                            {{ option.label }}
+                          </CommandItem>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </template>
+
+              <template v-else-if="field.type === 'radio'">
+                <RadioGroupRoot
+                  v-for="radioState in [getSelectFieldState(field)]"
+                  :key="`${field.id}:radio:${radioState.selectedKey ?? 'empty'}`"
+                  :model-value="radioState.selectedKey"
+                  :disabled="isFieldDisabled(field)"
+                  :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                  class="flex flex-wrap gap-x-4 gap-y-1.5"
+                  @update:model-value="(value) => handleSelectValueChange(field, radioState, value)"
+                  @focusout="validateField(field)"
+                >
+                  <label
+                    v-for="option in radioState.options"
+                    :key="option.key"
+                    class="flex items-center gap-1.5 text-sm cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+                    :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+                  >
+                    <RadioGroupItem
+                      :value="option.key"
+                      data-slot="radio-group-item"
+                      class="size-4 rounded-full border border-zinc-300 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) focus:outline-none focus-visible:ring-1 focus-visible:ring-(--primary) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-colors"
+                    >
+                      <RadioGroupIndicator class="flex items-center justify-center">
+                        <span class="size-1.5 rounded-full bg-white" />
+                      </RadioGroupIndicator>
+                    </RadioGroupItem>
+                    {{ option.label }}
+                  </label>
+                </RadioGroupRoot>
+              </template>
+
+              <InputGroup
+                v-else
+                :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+                :class="field.type === 'textarea' ? 'h-auto flex-col items-stretch' : void 0"
+              >
+                <div
+                  v-if="field.type === 'textarea'"
+                  class="flex min-w-0 w-full items-center"
+                >
+                  <InputGroupTextarea
+                    :id="`${id}:${field.path}`"
+                    :model-value="getProperty(modelValue, field.path)"
+                    :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
                     :disabled="isFieldDisabled(field)"
                     :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-                    readonly
-                    @blur="handleCalendarBlur(field)"
+                    @update:model-value="(value) => {
+  if (!value && !field.discardEmptyString) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+                    @blur="validateField(field)"
                   />
-                </PopoverTrigger>
-                <InputGroupAddon v-if="field.icon">
+                  <InputGroupAddon v-if="field.icon">
+                    <Icon
+                      :icon="field.icon"
+                    />
+                  </InputGroupAddon>
+                </div>
+                <InputGroupInput
+                  v-if="field.type === 'string'"
+                  :id="`${id}:${field.path}`"
+                  :treat-empty-as-different-state-from-null="!!field.discardEmptyString"
+                  :model-value="getProperty(modelValue, field.path)"
+                  :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
+                  :disabled="isFieldDisabled(field)"
+                  :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
+                  @update:model-value="(value) => {
+  if (!value && !field.discardEmptyString) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+                  @blur="validateField(field)"
+                />
+                <InputGroupNumberField
+                  v-if="field.type === 'number'"
+                  :id="`${id}:${field.path}`"
+                  :model-value="getProperty(modelValue, field.path) ?? null"
+                  :min="field.min ? $dsl.evaluate`${field.min}`() : void 0"
+                  :max="field.max ? $dsl.evaluate`${field.max}`() : void 0"
+                  :step="field.step ? $dsl.evaluate`${field.step}`() : void 0"
+                  :disabled="isFieldDisabled(field)"
+                  :invalid="isFieldInvalid(field)"
+                  @update:model-value="(value) => {
+  if (!value && value !== 0) {
+    deleteProperty(modelValue, field.path);
+  } else {
+    setProperty(modelValue, field.path, value);
+  }
+}"
+                  @blur="validateField(field)"
+                />
+                <InputGroupAddon v-if="field.type !== 'textarea' && field.icon">
                   <Icon
                     :icon="field.icon"
                   />
                 </InputGroupAddon>
                 <InputGroupAddon
-                  v-if="hasProperty(modelValue, field.path)"
+                  v-if="field.type !== 'textarea' && hasProperty(modelValue, field.path)"
                   align="inline-end"
                   :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
                 >
@@ -828,299 +1170,60 @@ export {
                     </TooltipContent>
                   </Tooltip>
                 </InputGroupAddon>
-              </InputGroup>
-            </PopoverAnchor>
-            <PopoverContent class="w-72">
-              <Calendar
-                :locale="locale"
-                :layout="field.mode"
-                :model-value="toCalendarDateValue(getProperty(modelValue, field.path), field.value)"
-                :disabled="isFieldDisabled(field)"
-                :is-date-disabled="field.disableDate ? (date) => isCalendarDateDisabled(field, date) : void 0"
-                @update:model-value="(value) => {
-  if (value === void 0) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, format(value.toDate(getLocalTimeZone()), field.value));
-  }
-}"
-              />
-            </PopoverContent>
-          </Popover>
-          <template v-else>
-            <template v-if="field.type === 'select'">
-              <Popover
-                v-for="selectState in [getSelectFieldState(field)]"
-                :key="`${field.id}:select:${selectState.selectedKey ?? 'empty'}`"
-                :open="selectOpen[field.path] === true"
-                @update:open="(open) => handleSelectOpenChange(field, open)"
-              >
-                <PopoverAnchor as-child>
-                  <InputGroup :data-disabled="isFieldDisabled(field) ? 'true' : void 0">
-                    <PopoverTrigger as-child>
-                      <InputGroupInput
-                        :id="`${id}:${field.path}`"
-                        :model-value="getSelectDisplayValue(selectState, selectState.selectedKey)"
-                        :disabled="isFieldDisabled(field)"
-                        :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-                        :placeholder="t('select-placeholder')"
-                        class="text-left"
-                        readonly
-                        @blur="handleSelectBlur(field)"
-                      />
-                    </PopoverTrigger>
-                    <InputGroupAddon v-if="field.icon">
-                      <Icon
-                        :icon="field.icon"
-                      />
-                    </InputGroupAddon>
-                    <InputGroupAddon
-                      v-if="hasProperty(modelValue, field.path)"
-                      align="inline-end"
-                      :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
-                    >
-                      <Tooltip :delay-duration="800">
-                        <TooltipTrigger>
-                          <InputGroupButton as-child>
-                            <button
-                              type="button"
-                              class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                              :disabled="isFieldDisabled(field)"
-                              @click="clearSelectField(field)"
-                            >
-                              <Icon
-                                icon="fluent:dismiss-20-regular"
-                              />
-                            </button>
-                          </InputGroupButton>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {{ t("clear") }}
-                        </TooltipContent>
-                      </Tooltip>
-                    </InputGroupAddon>
-                  </InputGroup>
-                </PopoverAnchor>
-
-                <PopoverContent
-                  class="p-0"
-                  :style="{ width: 'var(--reka-popover-trigger-width)' }"
+                <InputGroupAddon
+                  v-if="field.type === 'string' && field.maxLength && getProperty(modelValue, field.path)"
+                  align="inline-end"
                 >
-                  <Command
-                    :model-value="selectState.selectedKey"
-                    :disabled="isFieldDisabled(field)"
-                    selection-behavior="toggle"
-                    @update:model-value="(value) => handleSelectCommandValueChange(field, selectState, value)"
+                  <span class="text-xs text-zinc-400 font-mono">
+                    <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
+                  </span>
+                </InputGroupAddon>
+                <InputGroupAddon
+                  v-if="field.type === 'textarea' && (hasProperty(modelValue, field.path) || field.maxLength && getProperty(modelValue, field.path))"
+                  align="block-end"
+                >
+                  <Tooltip
+                    v-if="hasProperty(modelValue, field.path)"
+                    :delay-duration="800"
                   >
-                    <CommandInput :placeholder="t('select-search-placeholder')" />
-                    <CommandList>
-                      <CommandEmpty as-child>
-                        <section class="h-32 flex flex-col text-lg items-center justify-center gap-2 select-none">
+                    <TooltipTrigger>
+                      <InputGroupButton as-child>
+                        <button
+                          type="button"
+                          class="text-zinc-300 hover:text-zinc-500 transition-colors"
+                          :disabled="isFieldDisabled(field)"
+                          @click="deleteProperty(modelValue, field.path)"
+                        >
                           <Icon
-                            icon="fluent:app-recent-20-regular"
-                            class="text-zinc-400 text-2xl!"
+                            icon="fluent:dismiss-20-regular"
                           />
-                          <p class="text-zinc-500">
-                            {{ t("select-empty") }}
-                          </p>
-                        </section>
-                      </CommandEmpty>
-                      <CommandGroup>
-                        <CommandItem
-                          v-for="option in selectState.options"
-                          :key="option.key"
-                          data-slot="select-option"
-                          :value="option.key"
-                          class="data-highlighted:bg-zinc-50 data-highlighted:text-zinc-700 data-[state=checked]:bg-zinc-100 data-[state=checked]:text-zinc-700 transition cursor-pointer relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
-                        >
-                          {{ option.label }}
-                        </CommandItem>
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </template>
-
-            <template v-else-if="field.type === 'radio'">
-              <RadioGroupRoot
-                v-for="radioState in [getSelectFieldState(field)]"
-                :key="`${field.id}:radio:${radioState.selectedKey ?? 'empty'}`"
-                :model-value="radioState.selectedKey"
-                :disabled="isFieldDisabled(field)"
-                :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-                class="flex flex-wrap gap-x-4 gap-y-1.5"
-                @update:model-value="(value) => handleSelectValueChange(field, radioState, value)"
-                @focusout="validateField(field)"
-              >
-                <label
-                  v-for="option in radioState.options"
-                  :key="option.key"
-                  class="flex items-center gap-1.5 text-sm cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
-                  :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
-                >
-                  <RadioGroupItem
-                    :value="option.key"
-                    data-slot="radio-group-item"
-                    class="size-4 rounded-full border border-zinc-300 data-[state=checked]:border-(--primary) data-[state=checked]:bg-(--primary) focus:outline-none focus-visible:ring-1 focus-visible:ring-(--primary) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-colors"
+                        </button>
+                      </InputGroupButton>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {{ t("clear") }}
+                    </TooltipContent>
+                  </Tooltip>
+                  <span
+                    v-if="field.maxLength && getProperty(modelValue, field.path)"
+                    class="text-xs text-zinc-400 font-mono"
                   >
-                    <RadioGroupIndicator class="flex items-center justify-center">
-                      <span class="size-1.5 rounded-full bg-white" />
-                    </RadioGroupIndicator>
-                  </RadioGroupItem>
-                  {{ option.label }}
-                </label>
-              </RadioGroupRoot>
+                    <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
+                  </span>
+                </InputGroupAddon>
+              </InputGroup>
             </template>
 
-            <InputGroup
-              v-else
-              :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
-              :class="field.type === 'textarea' ? 'h-auto flex-col items-stretch' : void 0"
+            <FieldError
+              v-if="isFieldInvalid(field)"
+              :class="usesContentsOrientation(displayConfig) ? 'static pt-1' : void 0"
             >
-              <div
-                v-if="field.type === 'textarea'"
-                class="flex min-w-0 w-full items-center"
-              >
-                <InputGroupTextarea
-                  :id="`${id}:${field.path}`"
-                  :model-value="getProperty(modelValue, field.path)"
-                  :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
-                  :disabled="isFieldDisabled(field)"
-                  :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-                  @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-                  @blur="validateField(field)"
-                />
-                <InputGroupAddon v-if="field.icon">
-                  <Icon
-                    :icon="field.icon"
-                  />
-                </InputGroupAddon>
-              </div>
-              <InputGroupInput
-                v-if="field.type === 'string'"
-                :id="`${id}:${field.path}`"
-                :treat-empty-as-different-state-from-null="!!field.discardEmptyString"
-                :model-value="getProperty(modelValue, field.path)"
-                :maxlength="field.maxLength ? $dsl.evaluate`${field.maxLength}`() : void 0"
-                :disabled="isFieldDisabled(field)"
-                :aria-invalid="isFieldInvalid(field) ? 'true' : void 0"
-                @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-                @blur="validateField(field)"
-              />
-              <InputGroupNumberField
-                v-if="field.type === 'number'"
-                :id="`${id}:${field.path}`"
-                :model-value="getProperty(modelValue, field.path) ?? null"
-                :min="field.min ? $dsl.evaluate`${field.min}`() : void 0"
-                :max="field.max ? $dsl.evaluate`${field.max}`() : void 0"
-                :step="field.step ? $dsl.evaluate`${field.step}`() : void 0"
-                :disabled="isFieldDisabled(field)"
-                :invalid="isFieldInvalid(field)"
-                @update:model-value="(value) => {
-  if (!value && value !== 0) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-                @blur="validateField(field)"
-              />
-              <InputGroupAddon v-if="field.type !== 'textarea' && field.icon">
-                <Icon
-                  :icon="field.icon"
-                />
-              </InputGroupAddon>
-              <InputGroupAddon
-                v-if="field.type !== 'textarea' && hasProperty(modelValue, field.path)"
-                align="inline-end"
-                :class="getConfigOrientation(displayConfig) === 'floating' ? 'group-data-[disabled=true]/input-group:hidden' : void 0"
-              >
-                <Tooltip :delay-duration="800">
-                  <TooltipTrigger>
-                    <InputGroupButton as-child>
-                      <button
-                        type="button"
-                        class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                        :disabled="isFieldDisabled(field)"
-                        @click="deleteProperty(modelValue, field.path)"
-                      >
-                        <Icon
-                          icon="fluent:dismiss-20-regular"
-                        />
-                      </button>
-                    </InputGroupButton>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {{ t("clear") }}
-                  </TooltipContent>
-                </Tooltip>
-              </InputGroupAddon>
-              <InputGroupAddon
-                v-if="field.type === 'string' && field.maxLength && getProperty(modelValue, field.path)"
-                align="inline-end"
-              >
-                <span class="text-xs text-zinc-400 font-mono">
-                  <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-                </span>
-              </InputGroupAddon>
-              <InputGroupAddon
-                v-if="field.type === 'textarea' && (hasProperty(modelValue, field.path) || field.maxLength && getProperty(modelValue, field.path))"
-                align="block-end"
-              >
-                <Tooltip
-                  v-if="hasProperty(modelValue, field.path)"
-                  :delay-duration="800"
-                >
-                  <TooltipTrigger>
-                    <InputGroupButton as-child>
-                      <button
-                        type="button"
-                        class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                        :disabled="isFieldDisabled(field)"
-                        @click="deleteProperty(modelValue, field.path)"
-                      >
-                        <Icon
-                          icon="fluent:dismiss-20-regular"
-                        />
-                      </button>
-                    </InputGroupButton>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {{ t("clear") }}
-                  </TooltipContent>
-                </Tooltip>
-                <span
-                  v-if="field.maxLength && getProperty(modelValue, field.path)"
-                  class="text-xs text-zinc-400 font-mono"
-                >
-                  <span class="inline-block text-right">{{ String(getProperty(modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-                </span>
-              </InputGroupAddon>
-            </InputGroup>
-          </template>
-
-          <FieldError
-            v-if="isFieldInvalid(field)"
-            :class="usesContentsOrientation(displayConfig) ? 'static pt-1' : void 0"
-          >
-            <span v-html="renderValidationMessage(field)" />
-          </FieldError>
-        </FieldContent>
-      </Field>
-    </template>
+              <span v-html="renderValidationMessage(field)" />
+            </FieldError>
+          </FieldContent>
+        </Field>
+      </template>
+    </FieldSet>
 
     <slot />
   </div>