@shwfed/nuxt 0.11.46 → 0.11.48

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

@@ -6,21 +6,15 @@ import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { format, parse } from "date-fns";
-import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
+import { deleteProperty, getProperty, 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 { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
-import { Field, FieldContent, FieldError, FieldLabel, FieldSet } from "../field";
+import FieldsBody from "./FieldsBody.vue";
 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();
@@ -31,7 +25,7 @@ const defaultConfig = createFieldsConfig({
 const props = defineProps({
   config: { type: null, required: true }
 });
-defineSlots();
+const slots = 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();
@@ -50,35 +44,23 @@ const isReady = ref(false);
 const hasInitializedFieldValues = ref(false);
 const hasEmittedInitialValueReady = ref(false);
 const readyResolvers = [];
-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;
-  }
-  if (config2.bordered) {
-    nextConfig.bordered = config2.bordered;
+function requireSlotProps(slotProps) {
+  if (!slotProps) {
+    throw new TypeError("missing slot props");
   }
-  if (config2.style) {
-    nextConfig.style = config2.style;
-  }
-  return nextConfig;
+  return slotProps;
+}
+function cloneConfig(config2) {
+  return structuredClone(toRaw(config2));
 }
-function getConfigOrientation(config2) {
-  return config2.orientation ?? "horizontal";
+function getBodyOrientation(body) {
+  return body.orientation ?? "horizontal";
 }
-function usesContentsOrientation(config2) {
-  return getConfigOrientation(config2) === "contents";
+function usesContentsOrientation(body) {
+  return getBodyOrientation(body) === "contents";
 }
-function isConfigBordered(config2) {
-  return usesContentsOrientation(config2) && config2.bordered === true;
+function isBodyBordered(body) {
+  return usesContentsOrientation(body) && body.bordered === true;
 }
 function tryEvaluateExpression(source, context) {
   try {
@@ -99,12 +81,12 @@ function evaluateExpression(source, context, fallback) {
   }
   return result.value;
 }
-function getConfigStyle(config2) {
+function getBodyStyle(body) {
   const style = {};
-  if (!config2.style) {
+  if (!body.style) {
     return style;
   }
-  const styleMap = evaluateExpression(config2.style, { form: modelValue.value }, {});
+  const styleMap = evaluateExpression(body.style, { form: modelValue.value }, {});
   if (!styleMap || typeof styleMap !== "object" || Array.isArray(styleMap)) {
     return style;
   }
@@ -134,8 +116,8 @@ function getFieldPartStyle(styleExpression) {
 function getFieldStyle(field) {
   return getFieldPartStyle(field.style);
 }
-function getGroupStyle(group, config2) {
-  const style = usesContentsOrientation(config2) ? getConfigStyle(config2) : {};
+function getGroupStyle(group, body) {
+  const style = usesContentsOrientation(body) ? getBodyStyle(body) : {};
   const groupStyle = group.style ? evaluateExpression(group.style, { form: modelValue.value, id: group.id }, {}) : {};
   if (!groupStyle || typeof groupStyle !== "object" || Array.isArray(groupStyle)) {
     return style;
@@ -147,48 +129,69 @@ function getGroupStyle(group, config2) {
   }
   return style;
 }
-function getConfigEntries(config2) {
+function getBodyEntries(body) {
   return [
-    ...config2.fields.map((field) => ({
+    ...body.fields.map((field) => ({
       key: `field:${field.id}`,
       field
     })),
-    ...config2.groups.map((group) => ({
+    ...(body.groups ?? []).map((group) => ({
       key: `group:${group.id}`,
       group
     }))
   ];
 }
-function getConfigFields(config2) {
-  return [...config2.fields, ...config2.groups.flatMap((group) => group.fields)];
+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 getFieldContainerStyle(field, config2) {
-  if (!isPassiveField(field) && usesContentsOrientation(config2)) {
+function getFieldContainerStyle(field, body) {
+  if (field.type === "slot" || field.type === "container") {
+    return {};
+  }
+  if (!isPassiveField(field) && usesContentsOrientation(body)) {
     return {};
   }
   return getFieldStyle(field);
 }
-function getFieldLabelStyle(field, config2) {
-  if (!usesContentsOrientation(config2)) {
+function getFieldLabelStyle(field, body) {
+  if (!usesContentsOrientation(body)) {
     return {};
   }
   return getFieldPartStyle(field.labelStyle);
 }
-function getFieldContentStyle(field, config2) {
-  const style = usesContentsOrientation(config2) ? getFieldPartStyle(field.contentStyle) : {};
-  if (usesContentsOrientation(config2) && isFieldLabelHidden(field) && style.gridColumn === void 0) {
+function getFieldContentStyle(field, body) {
+  const style = usesContentsOrientation(body) ? getFieldPartStyle(field.contentStyle) : {};
+  if (usesContentsOrientation(body) && isFieldLabelHidden(field) && style.gridColumn === void 0) {
     style.gridColumn = "1 / -1";
   }
   return style;
 }
+function getMarkdownBodyContentStyle(field, body) {
+  if (!usesContentsOrientation(body)) {
+    return {};
+  }
+  return {
+    ...getFieldStyle(field),
+    gridColumn: "1 / -1"
+  };
+}
 function isPassiveField(field) {
   return field.type === "slot" || field.type === "empty";
 }
-function isLabeledDisplayField(field) {
-  return field.type === "markdown";
-}
 function isInteractiveField(field) {
-  return !isLabeledDisplayField(field);
+  return field.type !== "slot" && field.type !== "empty" && field.type !== "markdown" && field.type !== "markdown-body" && field.type !== "container";
 }
 function isFieldLabelHidden(field) {
   return field.hideLabel === true;
@@ -216,13 +219,13 @@ function getFieldValue(field) {
   return getProperty(modelValue.value, field.path);
 }
 function initializeFieldValues(config2) {
-  for (const field of getConfigFields(config2)) {
-    if (isPassiveField(field) || isLabeledDisplayField(field) || !field.initialValue) {
-      continue;
+  visitBodyFields(config2, (field) => {
+    if (!isInteractiveField(field) || !field.initialValue) {
+      return;
     }
     const initialValueResult = tryEvaluateExpression(field.initialValue, { form: modelValue.value });
     if (!initialValueResult.ok) {
-      continue;
+      return;
     }
     const initialValue = initialValueResult.value;
     setProperty(
@@ -230,7 +233,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",
@@ -535,15 +538,15 @@ function validateField(field) {
 }
 function validateFields() {
   const nextValidationErrors = {};
-  for (const field of getConfigFields(displayConfig.value)) {
-    if (isPassiveField(field) || isLabeledDisplayField(field)) {
-      continue;
+  visitBodyFields(displayConfig.value, (field, visible) => {
+    if (!visible || !isInteractiveField(field)) {
+      return;
     }
     const failure = getValidationFailure(field);
     if (failure) {
       nextValidationErrors[field.path] = failure;
     }
-  }
+  });
   validationErrors.value = nextValidationErrors;
   return Object.keys(nextValidationErrors).length === 0;
 }
@@ -554,7 +557,10 @@ function getFieldLabel(field) {
   return getLocalizedText(field.title, locale.value) ?? field.path;
 }
 function getDisplayFieldLabel(field) {
-  return getLocalizedText(field.title, locale.value) ?? field.id;
+  if ("title" in field && field.title) {
+    return getLocalizedText(field.title, locale.value) ?? field.id;
+  }
+  return field.id;
 }
 function isFieldRequired(field) {
   return field.required === true;
@@ -566,9 +572,19 @@ function renderValidationMessage(field) {
 }
 function renderMarkdownField(field) {
   const source = getLocalizedText(field.locale, locale.value) ?? "";
+  return renderMarkdownSource(source, false);
+}
+function renderMarkdownBodyField(field) {
+  const source = getLocalizedText(field.locale, locale.value) ?? "";
+  return renderMarkdownSource(source, field.inline === true);
+}
+function renderMarkdownSource(source, inline) {
   if (source.trim().length === 0) {
     return "";
   }
+  if (inline) {
+    return $md.inline`${source}`(mergeDslContexts({ form: modelValue.value }, dslContext));
+  }
   return $md.block`${source}`(mergeDslContexts({ form: modelValue.value }, dslContext));
 }
 function isCalendarDateDisabled(field, date) {
@@ -596,6 +612,30 @@ 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);
@@ -627,11 +667,11 @@ watch(config, (value) => {
 }, { immediate: true });
 watchEffect(() => {
   const activePaths = /* @__PURE__ */ new Set();
-  for (const field of getConfigFields(displayConfig.value)) {
-    if (!isPassiveField(field) && !isFieldHidden(field) && !isLabeledDisplayField(field) && !isFieldDisabled(field)) {
+  visitBodyFields(displayConfig.value, (field, visible) => {
+    if (visible && isInteractiveField(field) && !isFieldDisabled(field)) {
       activePaths.add(field.path);
     }
-  }
+  });
   for (const path of Object.keys(validationErrors.value)) {
     if (!activePaths.has(path)) {
       clearFieldValidation(path);
@@ -648,11 +688,71 @@ 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,
@@ -662,12 +762,14 @@ export {
   FieldsConfigC,
   FieldsConfigInputC,
   KIND,
+  MarkdownBodyFieldC,
   MarkdownFieldC,
   NumberFieldC,
   SelectFieldC,
   SlotFieldC,
   SUPPORTED_COMPATIBILITY_DATES,
   StringFieldC,
+  TextareaFieldC,
   UploadFieldC,
   ValidationRuleC,
   createFieldsConfig,
@@ -680,9 +782,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',
-  isConfigBordered(displayConfig) ? '!p-0 !m-0 border-transparent' : ''
+  isBodyBordered(displayConfig) ? '!p-0 !m-0 border-transparent' : ''
 ]"
-    :style="getConfigStyle(displayConfig)"
+    :style="getBodyStyle(displayConfig)"
   >
     <Button
       v-if="isCheating"
@@ -708,552 +810,20 @@ export {
       class="absolute inset-0 z-10 w-full h-full"
     />
 
-    <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' }"
+    <FieldsBody
+      :body="displayConfig"
+      :renderer="renderContext"
     >
       <template
-        v-for="field in entry.group ? entry.group.fields : entry.field ? [entry.field] : []"
-        :key="field.id"
+        v-for="(_, slotName) in slots"
+        #[slotName]="slotProps"
       >
-        <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="getFieldStyle(field)"
-          :valid="valid"
+          :name="slotName"
+          v-bind="requireSlotProps(slotProps)"
         />
-        <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 === '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>
-    </component>
+    </FieldsBody>
 
     <slot />
   </div>