@shwfed/nuxt 0.11.50 → 0.11.51

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

@@ -6,15 +6,21 @@ import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { format, parse } from "date-fns";
-import { deleteProperty, getProperty, setProperty } from "dot-prop";
+import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
 import { computed, nextTick, readonly, ref, toRaw, useId, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { useCheating } from "#imports";
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
 import { mergeDslContexts, useCELContext } from "../../../plugins/cel/context";
+import { Calendar } from "../calendar";
 import { Button } from "../button";
-import FieldsBody from "./FieldsBody.vue";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
+import { Field, FieldContent, FieldError, FieldLabel, 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";
 import { Skeleton } from "../skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { getLocalizedText } from "../../../utils/coders";
 import { FieldsConfigC, createFieldsConfig } from "./schema";
 const id = useId();
@@ -25,7 +31,7 @@ const defaultConfig = createFieldsConfig({
 const props = defineProps({
   config: { type: null, required: true }
 });
-const slots = defineSlots();
+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();
@@ -44,23 +50,35 @@ const isReady = ref(false);
 const hasInitializedFieldValues = ref(false);
 const hasEmittedInitialValueReady = ref(false);
 const readyResolvers = [];
-function requireSlotProps(slotProps) {
-  if (!slotProps) {
-    throw new TypeError("missing slot props");
-  }
-  return slotProps;
-}
 function cloneConfig(config2) {
-  return structuredClone(toRaw(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;
+  }
+  if (config2.bordered) {
+    nextConfig.bordered = config2.bordered;
+  }
+  if (config2.style) {
+    nextConfig.style = config2.style;
+  }
+  return nextConfig;
 }
-function getBodyOrientation(body) {
-  return body.orientation ?? "horizontal";
+function getConfigOrientation(config2) {
+  return config2.orientation ?? "horizontal";
 }
-function usesContentsOrientation(body) {
-  return getBodyOrientation(body) === "contents";
+function usesContentsOrientation(config2) {
+  return getConfigOrientation(config2) === "contents";
 }
-function isBodyBordered(body) {
-  return usesContentsOrientation(body) && body.bordered === true;
+function isConfigBordered(config2) {
+  return usesContentsOrientation(config2) && config2.bordered === true;
 }
 function tryEvaluateExpression(source, context) {
   try {
@@ -81,12 +99,12 @@ function evaluateExpression(source, context, fallback) {
   }
   return result.value;
 }
-function getBodyStyle(body) {
+function getConfigStyle(config2) {
   const style = {};
-  if (!body.style) {
+  if (!config2.style) {
     return style;
   }
-  const styleMap = evaluateExpression(body.style, { form: modelValue.value }, {});
+  const styleMap = evaluateExpression(config2.style, { form: modelValue.value }, {});
   if (!styleMap || typeof styleMap !== "object" || Array.isArray(styleMap)) {
     return style;
   }
@@ -116,8 +134,8 @@ function getFieldPartStyle(styleExpression) {
 function getFieldStyle(field) {
   return getFieldPartStyle(field.style);
 }
-function getGroupStyle(group, body) {
-  const style = usesContentsOrientation(body) ? getBodyStyle(body) : {};
+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;
@@ -129,57 +147,42 @@ function getGroupStyle(group, body) {
   }
   return style;
 }
-function getBodyEntries(body) {
+function getConfigEntries(config2) {
   return [
-    ...body.fields.map((field) => ({
+    ...config2.fields.map((field) => ({
       key: `field:${field.id}`,
       field
     })),
-    ...(body.groups ?? []).map((group) => ({
+    ...config2.groups.map((group) => ({
       key: `group:${group.id}`,
       group
     }))
   ];
 }
-function visitFields(fields, visitor, visible) {
-  for (const field of fields) {
-    const fieldVisible = field.type === "empty" ? visible : visible && !isFieldHidden(field);
-    visitor(field, fieldVisible);
-    if (field.type === "container") {
-      visitFields(field.fields, visitor, fieldVisible);
-    }
-  }
-}
-function visitBodyFields(body, visitor) {
-  visitFields(body.fields, visitor, true);
-  for (const group of body.groups ?? []) {
-    visitFields(group.fields, visitor, true);
-  }
+function getConfigFields(config2) {
+  return [...config2.fields, ...config2.groups.flatMap((group) => group.fields)];
 }
-function getFieldContainerStyle(field, body) {
-  if (field.type === "slot" || field.type === "container") {
-    return {};
-  }
-  if (!isPassiveField(field) && usesContentsOrientation(body)) {
+function getFieldContainerStyle(field, config2) {
+  if (!isPassiveField(field) && usesContentsOrientation(config2)) {
     return {};
   }
   return getFieldStyle(field);
 }
-function getFieldLabelStyle(field, body) {
-  if (!usesContentsOrientation(body)) {
+function getFieldLabelStyle(field, config2) {
+  if (!usesContentsOrientation(config2)) {
     return {};
   }
   return getFieldPartStyle(field.labelStyle);
 }
-function getFieldContentStyle(field, body) {
-  const style = usesContentsOrientation(body) ? getFieldPartStyle(field.contentStyle) : {};
-  if (usesContentsOrientation(body) && isFieldLabelHidden(field) && style.gridColumn === void 0) {
+function getFieldContentStyle(field, config2) {
+  const style = usesContentsOrientation(config2) ? getFieldPartStyle(field.contentStyle) : {};
+  if (usesContentsOrientation(config2) && isFieldLabelHidden(field) && style.gridColumn === void 0) {
     style.gridColumn = "1 / -1";
   }
   return style;
 }
-function getMarkdownBodyContentStyle(field, body) {
-  if (!usesContentsOrientation(body)) {
+function getMarkdownBodyContentStyle(field, config2) {
+  if (!usesContentsOrientation(config2)) {
     return {};
   }
   return {
@@ -190,8 +193,11 @@ function getMarkdownBodyContentStyle(field, body) {
 function isPassiveField(field) {
   return field.type === "slot" || field.type === "empty";
 }
+function isMarkdownDisplayField(field) {
+  return field.type === "markdown" || field.type === "markdown-body";
+}
 function isInteractiveField(field) {
-  return field.type !== "slot" && field.type !== "empty" && field.type !== "markdown" && field.type !== "markdown-body" && field.type !== "container";
+  return !isMarkdownDisplayField(field);
 }
 function isFieldLabelHidden(field) {
   return field.hideLabel === true;
@@ -219,13 +225,13 @@ function getFieldValue(field) {
   return getProperty(modelValue.value, field.path);
 }
 function initializeFieldValues(config2) {
-  visitBodyFields(config2, (field) => {
-    if (!isInteractiveField(field) || !field.initialValue) {
-      return;
+  for (const field of getConfigFields(config2)) {
+    if (isPassiveField(field) || isMarkdownDisplayField(field) || !field.initialValue) {
+      continue;
     }
     const initialValueResult = tryEvaluateExpression(field.initialValue, { form: modelValue.value });
     if (!initialValueResult.ok) {
-      return;
+      continue;
     }
     const initialValue = initialValueResult.value;
     setProperty(
@@ -233,7 +239,7 @@ function initializeFieldValues(config2) {
       field.path,
       field.type === "number" && typeof initialValue === "bigint" ? Number(initialValue) : initialValue
     );
-  });
+  }
 }
 const MIME_LABELS = {
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "Excel",
@@ -538,15 +544,15 @@ function validateField(field) {
 }
 function validateFields() {
   const nextValidationErrors = {};
-  visitBodyFields(displayConfig.value, (field, visible) => {
-    if (!visible || !isInteractiveField(field)) {
-      return;
+  for (const field of getConfigFields(displayConfig.value)) {
+    if (isPassiveField(field) || isMarkdownDisplayField(field)) {
+      continue;
     }
     const failure = getValidationFailure(field);
     if (failure) {
       nextValidationErrors[field.path] = failure;
     }
-  });
+  }
   validationErrors.value = nextValidationErrors;
   return Object.keys(nextValidationErrors).length === 0;
 }
@@ -557,10 +563,7 @@ function getFieldLabel(field) {
   return getLocalizedText(field.title, locale.value) ?? field.path;
 }
 function getDisplayFieldLabel(field) {
-  if ("title" in field && field.title) {
-    return getLocalizedText(field.title, locale.value) ?? field.id;
-  }
-  return field.id;
+  return getLocalizedText(field.title, locale.value) ?? field.id;
 }
 function isFieldRequired(field) {
   return field.required === true;
@@ -612,30 +615,6 @@ function handleCalendarBlur(field) {
     }
   }, 0);
 }
-function getFieldMaxLength(field) {
-  if (!field.maxLength) {
-    return void 0;
-  }
-  return evaluateExpression(field.maxLength, void 0, void 0);
-}
-function getNumberFieldMin(field) {
-  if (!field.min) {
-    return void 0;
-  }
-  return evaluateExpression(field.min, void 0, void 0);
-}
-function getNumberFieldMax(field) {
-  if (!field.max) {
-    return void 0;
-  }
-  return evaluateExpression(field.max, void 0, void 0);
-}
-function getNumberFieldStep(field) {
-  if (!field.step) {
-    return void 0;
-  }
-  return evaluateExpression(field.step, void 0, void 0);
-}
 function handleConfiguratorConfirm(nextConfig) {
   displayConfig.value = cloneConfig(nextConfig);
   emit("update:config", nextConfig);
@@ -667,11 +646,11 @@ watch(config, (value) => {
 }, { immediate: true });
 watchEffect(() => {
   const activePaths = /* @__PURE__ */ new Set();
-  visitBodyFields(displayConfig.value, (field, visible) => {
-    if (visible && isInteractiveField(field) && !isFieldDisabled(field)) {
+  for (const field of getConfigFields(displayConfig.value)) {
+    if (!isPassiveField(field) && !isFieldHidden(field) && !isMarkdownDisplayField(field) && !isFieldDisabled(field)) {
       activePaths.add(field.path);
     }
-  });
+  }
   for (const path of Object.keys(validationErrors.value)) {
     if (!activePaths.has(path)) {
       clearFieldValidation(path);
@@ -688,71 +667,11 @@ watchEffect(() => {
     }
   }
 });
-const renderContext = computed(() => ({
-  id,
-  isCheating: isCheating.value,
-  modelValue: modelValue.value,
-  slotForm: slotForm.value,
-  valid,
-  calendarOpen: calendarOpen.value,
-  selectOpen: selectOpen.value,
-  templateDownloading: templateDownloading.value,
-  getBodyEntries,
-  getBodyOrientation,
-  isBodyBordered,
-  getBodyStyle,
-  getGroupStyle,
-  getFieldStyle,
-  getFieldContainerStyle,
-  getFieldLabelStyle,
-  getFieldContentStyle,
-  getMarkdownBodyContentStyle,
-  isInteractiveField,
-  isFieldLabelHidden,
-  isFieldHidden,
-  isFieldDisabled,
-  isFieldInvalid,
-  getFieldLabel,
-  getDisplayFieldLabel,
-  isFieldRequired,
-  renderValidationMessage,
-  renderMarkdownField,
-  renderMarkdownBodyField,
-  toCalendarDateValue,
-  displayCalendarValue,
-  isCalendarDateDisabled,
-  handleCalendarOpenChange,
-  handleCalendarBlur,
-  validateField,
-  getFieldMaxLength,
-  getNumberFieldMin,
-  getNumberFieldMax,
-  getNumberFieldStep,
-  getSelectFieldState,
-  getSelectDisplayValue,
-  handleSelectValueChange,
-  handleSelectOpenChange,
-  handleSelectBlur,
-  handleSelectCommandValueChange,
-  clearSelectField,
-  getUploadTemplateIcon,
-  getUploadAcceptString,
-  getUploadDescription,
-  getUploadMaxCount,
-  getUploadFiles,
-  handleUploadInputChange,
-  handleUploadDrop,
-  handleUploadDragOver,
-  handleTemplateDownload,
-  getFileIcon,
-  removeUploadFile
-}));
 </script>
 
 <script>
 export {
   CalendarFieldC,
-  ContainerFieldC,
   CURRENT_COMPATIBILITY_DATE,
   EmptyFieldC,
   FieldC,
@@ -769,7 +688,6 @@ export {
   SlotFieldC,
   SUPPORTED_COMPATIBILITY_DATES,
   StringFieldC,
-  TextareaFieldC,
   UploadFieldC,
   ValidationRuleC,
   createFieldsConfig,
@@ -782,9 +700,9 @@ 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',
-  isBodyBordered(displayConfig) ? '!p-0 !m-0 border-transparent' : ''
+  isConfigBordered(displayConfig) ? '!p-0 !m-0 border-transparent' : ''
 ]"
-    :style="getBodyStyle(displayConfig)"
+    :style="getConfigStyle(displayConfig)"
   >
     <Button
       v-if="isCheating"
@@ -810,20 +728,567 @@ export {
       class="absolute inset-0 z-10 w-full h-full"
     />
 
-    <FieldsBody
-      :body="displayConfig"
-      :renderer="renderContext"
+    <component
+      :is="entry.group ? FieldSet : 'div'"
+      v-for="entry in getConfigEntries(displayConfig)"
+      :key="entry.key"
+      :data-slot="entry.group ? 'fields-group' : 'fields-root-entry'"
+      :data-group-id="entry.group?.id"
+      :class="entry.group ? [
+  isConfigBordered(displayConfig) ? 'overflow-hidden border border-zinc-200 [[data-slot=fields-group]+&]:border-t-0 [&>[data-slot=field]:last-child>[data-slot=field-label]]:border-b-0 [&>[data-slot=field]:last-child>[data-slot=field-content]]:border-r-0 [&>[data-slot=field]:last-child>[data-slot=field-content]]:border-b-0 [&>div:last-child]:border-r-0 [&>div:last-child]:border-b-0' : ''
+] : void 0"
+      :style="entry.group ? getGroupStyle(entry.group, displayConfig) : { display: 'contents' }"
     >
       <template
-        v-for="(_, slotName) in slots"
-        #[slotName]="slotProps"
+        v-for="field in entry.group ? entry.group.fields : entry.field ? [entry.field] : []"
+        :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
-          :name="slotName"
-          v-bind="requireSlotProps(slotProps)"
+          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)"
         />
+        <Field
+          v-else-if="field.type === 'markdown' && !isFieldHidden(field)"
+          :orientation="getConfigOrientation(displayConfig)"
+          :style="getFieldContainerStyle(field, displayConfig)"
+        >
+          <FieldLabel
+            v-if="!isFieldLabelHidden(field)"
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200' : void 0"
+            :style="getFieldLabelStyle(field, displayConfig)"
+          >
+            <span>{{ getDisplayFieldLabel(field) }}</span>
+          </FieldLabel>
+          <FieldContent
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2 items-center justify-center text-center' : void 0"
+            :style="getFieldContentStyle(field, displayConfig)"
+          >
+            <div
+              class="text-center"
+              data-slot="fields-markdown"
+              v-html="renderMarkdownField(field)"
+            />
+          </FieldContent>
+        </Field>
+        <Field
+          v-else-if="field.type === 'markdown-body' && !isFieldHidden(field)"
+          :orientation="getConfigOrientation(displayConfig)"
+          :style="getFieldContainerStyle(field, displayConfig)"
+        >
+          <FieldContent
+            :class="isConfigBordered(displayConfig) ? 'border-b border-r border-zinc-200 p-2' : void 0"
+            :style="getMarkdownBodyContentStyle(field, displayConfig)"
+          >
+            <div
+              data-slot="fields-markdown-body"
+              v-html="renderMarkdownBodyField(field)"
+            />
+          </FieldContent>
+        </Field>
+        <Field
+          v-else-if="field.type === 'upload' && !isFieldHidden(field)"
+          :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+          :data-invalid="isFieldInvalid(field) ? 'true' : void 0"
+          :orientation="getConfigOrientation(displayConfig)"
+          :style="getFieldContainerStyle(field, displayConfig)"
+        >
+          <FieldLabel
+            v-if="!isFieldLabelHidden(field)"
+            :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)"
+          >
+            <div
+              :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+              class="flex flex-col gap-2"
+            >
+              <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="field.icon ?? 'fluent:cloud-arrow-up-20-regular'"
+                  class="text-4xl text-zinc-400"
+                />
+                <button
+                  v-if="field.template"
+                  type="button"
+                  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="templateDownloading[field.id] ? 'svg-spinners:ring-resize' : getUploadTemplateIcon(field)"
+                    class="text-base"
+                  />
+                  {{ getLocalizedText(field.templateName, locale) ?? t("upload-download-template") }}
+                </button>
+                <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>
+            <FieldError
+              v-if="isFieldInvalid(field)"
+              :class="usesContentsOrientation(displayConfig) ? 'static pt-1' : void 0"
+            >
+              <span v-html="renderValidationMessage(field)" />
+            </FieldError>
+          </FieldContent>
+        </Field>
+        <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)"
+        >
+          <FieldLabel
+            v-if="!isFieldLabelHidden(field)"
+            :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)"
+          >
+            <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"
+                    @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>
-    </FieldsBody>
+    </component>
 
     <slot />
   </div>