@shwfed/nuxt 0.11.49 → 0.11.51

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

@@ -1,720 +0,0 @@
-<script setup>
-import { useNuxtApp } from "#app";
-import { getLocalTimeZone } from "@internationalized/date";
-import { Icon } from "@iconify/vue";
-import { format } from "date-fns";
-import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
-import { useI18n } from "vue-i18n";
-import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
-import { getLocalizedText } from "../../../utils/coders";
-import { Calendar } from "../calendar";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
-import { Field as UiField, FieldContent, FieldError, FieldLabel, FieldSet } from "../field";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupNumberField, InputGroupTextarea } from "../input-group";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../popover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
-defineOptions({
-  name: "FieldsBody"
-});
-defineProps({
-  body: { type: Object, required: true },
-  renderer: { type: Object, required: true },
-  applyStyle: { type: Boolean, required: false }
-});
-const slots = defineSlots();
-const { $md } = useNuxtApp();
-const { t, locale } = useI18n();
-function getContainerBody(field) {
-  return {
-    orientation: field.bodyOrientation,
-    bordered: field.bodyBordered,
-    style: field.bodyStyle,
-    fields: field.fields,
-    groups: []
-  };
-}
-function requireSlotProps(slotProps) {
-  if (!slotProps) {
-    throw new TypeError("missing slot props");
-  }
-  return slotProps;
-}
-function hasVisibleTitle(field) {
-  return "title" in field && Array.isArray(field.title) && field.title.length > 0;
-}
-</script>
-
-<template>
-  <div
-    data-slot="fields-body"
-    :style="applyStyle ? renderer.getBodyStyle(body) : void 0"
-  >
-    <component
-      :is="entry.group ? FieldSet : 'div'"
-      v-for="entry in renderer.getBodyEntries(body)"
-      :key="entry.key"
-      :data-slot="entry.group ? 'fields-group' : 'fields-root-entry'"
-      :data-group-id="entry.group?.id"
-      :class="entry.group ? [
-  renderer.isBodyBordered(body) ? '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 ? renderer.getGroupStyle(entry.group, body) : { display: 'contents' }"
-    >
-      <template
-        v-for="field in entry.group ? entry.group.fields : entry.field ? [entry.field] : []"
-        :key="field.id"
-      >
-        <div
-          v-if="field.type === 'slot' && !hasVisibleTitle(field) && !renderer.isFieldHidden(field) && renderer.isBodyBordered(body)"
-          class="border-b border-r border-zinc-200"
-          :style="renderer.getFieldStyle(field)"
-        >
-          <slot
-            :name="field.id"
-            :form="renderer.slotForm"
-            :style="{}"
-            :valid="renderer.valid"
-          />
-        </div>
-        <slot
-          v-else-if="field.type === 'slot' && !hasVisibleTitle(field) && !renderer.isFieldHidden(field)"
-          :name="field.id"
-          :form="renderer.slotForm"
-          :style="renderer.getFieldStyle(field)"
-          :valid="renderer.valid"
-        />
-        <div
-          v-else-if="field.type === 'empty'"
-          :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-          :style="renderer.getFieldStyle(field)"
-        />
-        <UiField
-          v-else-if="field.type === 'markdown' && !renderer.isFieldHidden(field)"
-          :orientation="renderer.getBodyOrientation(body)"
-          :style="renderer.getFieldContainerStyle(field, body)"
-        >
-          <FieldLabel
-            v-if="!renderer.isFieldLabelHidden(field)"
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-            :style="renderer.getFieldLabelStyle(field, body)"
-          >
-            <span>{{ renderer.getDisplayFieldLabel(field) }}</span>
-          </FieldLabel>
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2 items-center justify-center text-center' : void 0"
-            :style="renderer.getFieldContentStyle(field, body)"
-          >
-            <div
-              class="text-center"
-              data-slot="fields-markdown"
-              v-html="renderer.renderMarkdownField(field)"
-            />
-          </FieldContent>
-        </UiField>
-        <UiField
-          v-else-if="field.type === 'markdown-body' && !renderer.isFieldHidden(field)"
-          :orientation="renderer.getBodyOrientation(body)"
-          :style="renderer.getFieldContainerStyle(field, body)"
-        >
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-            :style="renderer.getMarkdownBodyContentStyle(field, body)"
-          >
-            <div
-              data-slot="fields-markdown-body"
-              v-html="renderer.renderMarkdownBodyField(field)"
-            />
-          </FieldContent>
-        </UiField>
-        <UiField
-          v-else-if="field.type === 'slot' && hasVisibleTitle(field) && !renderer.isFieldHidden(field)"
-          :orientation="renderer.getBodyOrientation(body)"
-          :style="renderer.getFieldContainerStyle(field, body)"
-        >
-          <FieldLabel
-            v-if="!renderer.isFieldLabelHidden(field)"
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-            :style="renderer.getFieldLabelStyle(field, body)"
-          >
-            <span class="inline-flex items-start gap-0.5">
-              <span>{{ renderer.getDisplayFieldLabel(field) }}</span>
-              <sup
-                v-if="renderer.isFieldRequired(field)"
-                class="text-red-500 leading-none"
-              >*</sup>
-            </span>
-          </FieldLabel>
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-            :style="renderer.getFieldContentStyle(field, body)"
-          >
-            <slot
-              :name="field.id"
-              :form="renderer.slotForm"
-              :style="renderer.getFieldStyle(field)"
-              :valid="renderer.valid"
-            />
-          </FieldContent>
-        </UiField>
-        <UiField
-          v-else-if="field.type === 'container' && !renderer.isFieldHidden(field)"
-          :orientation="renderer.getBodyOrientation(body)"
-        >
-          <FieldLabel
-            v-if="!renderer.isFieldLabelHidden(field)"
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-            :style="renderer.getFieldLabelStyle(field, body)"
-          >
-            <span class="inline-flex items-start gap-0.5">
-              <span>{{ renderer.getDisplayFieldLabel(field) }}</span>
-              <sup
-                v-if="renderer.isFieldRequired(field)"
-                class="text-red-500 leading-none"
-              >*</sup>
-            </span>
-          </FieldLabel>
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-            :style="renderer.getFieldContentStyle(field, body)"
-          >
-            <FieldsBody
-              :body="getContainerBody(field)"
-              :renderer="renderer"
-              :apply-style="true"
-            >
-              <template
-                v-for="(_, slotName) in slots"
-                #[slotName]="slotProps"
-              >
-                <slot
-                  :name="slotName"
-                  v-bind="requireSlotProps(slotProps)"
-                />
-              </template>
-            </FieldsBody>
-          </FieldContent>
-        </UiField>
-        <UiField
-          v-else-if="field.type === 'upload' && !renderer.isFieldHidden(field)"
-          :data-disabled="renderer.isFieldDisabled(field) ? 'true' : void 0"
-          :data-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-          :orientation="renderer.getBodyOrientation(body)"
-          :style="renderer.getFieldContainerStyle(field, body)"
-        >
-          <FieldLabel
-            v-if="!renderer.isFieldLabelHidden(field)"
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-            :style="renderer.getFieldLabelStyle(field, body)"
-          >
-            <span class="inline-flex items-start gap-0.5">
-              <span>{{ renderer.getFieldLabel(field) }}</span>
-              <sup
-                v-if="renderer.isFieldRequired(field)"
-                class="text-red-500 leading-none"
-              >*</sup>
-            </span>
-            <span v-if="renderer.isCheating">
-              <span class="font-mono">{{ field.path }}</span>
-            </span>
-          </FieldLabel>
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-            :style="renderer.getFieldContentStyle(field, body)"
-          >
-            <div
-              :data-disabled="renderer.isFieldDisabled(field) ? 'true' : void 0"
-              class="flex flex-col gap-2"
-            >
-              <label
-                v-if="renderer.getUploadFiles(field).length < renderer.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',
-  renderer.isFieldDisabled(field) ? 'cursor-not-allowed border-zinc-200 opacity-50' : 'border-zinc-300 hover:border-zinc-400 hover:bg-zinc-50'
-]"
-                @drop="renderer.handleUploadDrop(field, $event)"
-                @dragover="renderer.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="renderer.templateDownloading[field.id]"
-                  @click.prevent.stop="renderer.handleTemplateDownload(field)"
-                >
-                  <Icon
-                    :icon="renderer.templateDownloading[field.id] ? 'svg-spinners:ring-resize' : renderer.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">
-                  {{ renderer.getUploadDescription(field) || t("upload-accept-all") }}
-                </p>
-                <input
-                  type="file"
-                  class="sr-only"
-                  :accept="renderer.getUploadAcceptString(field)"
-                  :disabled="renderer.isFieldDisabled(field)"
-                  :multiple="renderer.getUploadMaxCount(field) !== 1"
-                  @change="renderer.handleUploadInputChange(field, $event)"
-                >
-              </label>
-              <ul
-                v-if="renderer.getUploadFiles(field).length > 0"
-                class="flex flex-col gap-1"
-              >
-                <li
-                  v-for="(file, fileIndex) in renderer.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="renderer.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="renderer.isFieldDisabled(field)"
-                    @click="renderer.removeUploadFile(field, fileIndex)"
-                  >
-                    <Icon
-                      icon="fluent:delete-20-regular"
-                      class="text-lg"
-                    />
-                  </button>
-                </li>
-              </ul>
-            </div>
-            <FieldError
-              v-if="renderer.isFieldInvalid(field)"
-              :class="renderer.getBodyOrientation(body) === 'contents' ? 'static pt-1' : void 0"
-            >
-              <span v-html="renderer.renderValidationMessage(field)" />
-            </FieldError>
-          </FieldContent>
-        </UiField>
-        <UiField
-          v-else-if="renderer.isInteractiveField(field) && !renderer.isFieldHidden(field)"
-          :data-disabled="renderer.isFieldDisabled(field) ? 'true' : void 0"
-          :data-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-          :orientation="renderer.getBodyOrientation(body)"
-          :style="renderer.getFieldContainerStyle(field, body)"
-        >
-          <FieldLabel
-            v-if="!renderer.isFieldLabelHidden(field)"
-            :for="['string', 'textarea', 'number', 'select'].includes(field.type) ? `${renderer.id}:${field.path}` : void 0"
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200' : void 0"
-            :style="renderer.getFieldLabelStyle(field, body)"
-          >
-            <span class="inline-flex items-start gap-0.5">
-              <span>{{ renderer.getFieldLabel(field) }}</span>
-              <sup
-                v-if="renderer.isFieldRequired(field)"
-                class="text-red-500 leading-none"
-              >*</sup>
-            </span>
-            <span v-if="renderer.isCheating">
-              <span class="font-mono">{{ field.path }}</span>
-            </span>
-          </FieldLabel>
-          <FieldContent
-            :class="renderer.isBodyBordered(body) ? 'border-b border-r border-zinc-200 p-2' : void 0"
-            :style="renderer.getFieldContentStyle(field, body)"
-          >
-            <Popover
-              v-if="field.type === 'calendar'"
-              @update:open="(open) => renderer.handleCalendarOpenChange(field, open)"
-            >
-              <PopoverAnchor as-child>
-                <InputGroup :data-disabled="renderer.isFieldDisabled(field) ? 'true' : void 0">
-                  <PopoverTrigger as-child>
-                    <InputGroupInput
-                      :model-value="renderer.displayCalendarValue(getProperty(renderer.modelValue, field.path), field.display, field.value)"
-                      class="text-left"
-                      :disabled="renderer.isFieldDisabled(field)"
-                      :aria-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-                      readonly
-                      @blur="renderer.handleCalendarBlur(field)"
-                    />
-                  </PopoverTrigger>
-                  <InputGroupAddon v-if="field.icon">
-                    <Icon
-                      :icon="field.icon"
-                    />
-                  </InputGroupAddon>
-                  <InputGroupAddon
-                    v-if="hasProperty(renderer.modelValue, field.path)"
-                    align="inline-end"
-                    :class="renderer.getBodyOrientation(body) === '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="renderer.isFieldDisabled(field)"
-                            @click="deleteProperty(renderer.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="renderer.toCalendarDateValue(getProperty(renderer.modelValue, field.path), field.value)"
-                  :disabled="renderer.isFieldDisabled(field)"
-                  :is-date-disabled="field.disableDate ? (date) => renderer.isCalendarDateDisabled(field, date) : void 0"
-                  @update:model-value="(value) => {
-  if (value === void 0) {
-    deleteProperty(renderer.modelValue, field.path);
-  } else {
-    setProperty(renderer.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 [renderer.getSelectFieldState(field)]"
-                  :key="`${field.id}:select:${selectState.selectedKey ?? 'empty'}`"
-                  :open="renderer.selectOpen[field.path] === true"
-                  @update:open="(open) => renderer.handleSelectOpenChange(field, open)"
-                >
-                  <PopoverAnchor as-child>
-                    <InputGroup :data-disabled="renderer.isFieldDisabled(field) ? 'true' : void 0">
-                      <PopoverTrigger as-child>
-                        <InputGroupInput
-                          :id="`${renderer.id}:${field.path}`"
-                          :model-value="renderer.getSelectDisplayValue(selectState, selectState.selectedKey)"
-                          :disabled="renderer.isFieldDisabled(field)"
-                          :aria-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-                          :placeholder="t('select-placeholder')"
-                          class="text-left"
-                          readonly
-                          @blur="renderer.handleSelectBlur(field)"
-                        />
-                      </PopoverTrigger>
-                      <InputGroupAddon v-if="field.icon">
-                        <Icon
-                          :icon="field.icon"
-                        />
-                      </InputGroupAddon>
-                      <InputGroupAddon
-                        v-if="hasProperty(renderer.modelValue, field.path)"
-                        align="inline-end"
-                        :class="renderer.getBodyOrientation(body) === '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="renderer.isFieldDisabled(field)"
-                                @click="renderer.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="renderer.isFieldDisabled(field)"
-                      selection-behavior="toggle"
-                      @update:model-value="(value) => renderer.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 [renderer.getSelectFieldState(field)]"
-                  :key="`${field.id}:radio:${radioState.selectedKey ?? 'empty'}`"
-                  :model-value="radioState.selectedKey"
-                  :disabled="renderer.isFieldDisabled(field)"
-                  :aria-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-                  class="flex flex-wrap gap-x-4 gap-y-1.5"
-                  @update:model-value="(value) => renderer.handleSelectValueChange(field, radioState, value)"
-                  @focusout="renderer.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="renderer.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="renderer.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="`${renderer.id}:${field.path}`"
-                    :model-value="getProperty(renderer.modelValue, field.path)"
-                    :maxlength="renderer.getFieldMaxLength(field)"
-                    :disabled="renderer.isFieldDisabled(field)"
-                    :aria-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-                    @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(renderer.modelValue, field.path);
-  } else {
-    setProperty(renderer.modelValue, field.path, value);
-  }
-}"
-                    @blur="renderer.validateField(field)"
-                  />
-                  <InputGroupAddon v-if="field.icon">
-                    <Icon
-                      :icon="field.icon"
-                    />
-                  </InputGroupAddon>
-                </div>
-                <InputGroupInput
-                  v-if="field.type === 'string'"
-                  :id="`${renderer.id}:${field.path}`"
-                  :treat-empty-as-different-state-from-null="!!field.discardEmptyString"
-                  :model-value="getProperty(renderer.modelValue, field.path)"
-                  :maxlength="renderer.getFieldMaxLength(field)"
-                  :disabled="renderer.isFieldDisabled(field)"
-                  :aria-invalid="renderer.isFieldInvalid(field) ? 'true' : void 0"
-                  @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(renderer.modelValue, field.path);
-  } else {
-    setProperty(renderer.modelValue, field.path, value);
-  }
-}"
-                  @blur="renderer.validateField(field)"
-                />
-                <InputGroupNumberField
-                  v-if="field.type === 'number'"
-                  :id="`${renderer.id}:${field.path}`"
-                  :model-value="getProperty(renderer.modelValue, field.path) ?? null"
-                  :min="renderer.getNumberFieldMin(field)"
-                  :max="renderer.getNumberFieldMax(field)"
-                  :step="renderer.getNumberFieldStep(field)"
-                  :disabled="renderer.isFieldDisabled(field)"
-                  :invalid="renderer.isFieldInvalid(field)"
-                  @update:model-value="(value) => {
-  if (!value && value !== 0) {
-    deleteProperty(renderer.modelValue, field.path);
-  } else {
-    setProperty(renderer.modelValue, field.path, value);
-  }
-}"
-                  @blur="renderer.validateField(field)"
-                />
-                <InputGroupAddon v-if="field.type !== 'textarea' && field.icon">
-                  <Icon
-                    :icon="field.icon"
-                  />
-                </InputGroupAddon>
-                <InputGroupAddon
-                  v-if="field.type !== 'textarea' && hasProperty(renderer.modelValue, field.path)"
-                  align="inline-end"
-                  :class="renderer.getBodyOrientation(body) === '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="renderer.isFieldDisabled(field)"
-                          @click="deleteProperty(renderer.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(renderer.modelValue, field.path)"
-                  align="inline-end"
-                >
-                  <span class="text-xs text-zinc-400 font-mono">
-                    <span class="inline-block text-right">{{ String(getProperty(renderer.modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-                  </span>
-                </InputGroupAddon>
-                <InputGroupAddon
-                  v-if="field.type === 'textarea' && (hasProperty(renderer.modelValue, field.path) || field.maxLength && getProperty(renderer.modelValue, field.path))"
-                  align="block-end"
-                >
-                  <Tooltip
-                    v-if="hasProperty(renderer.modelValue, field.path)"
-                    :delay-duration="800"
-                  >
-                    <TooltipTrigger>
-                      <InputGroupButton as-child>
-                        <button
-                          type="button"
-                          class="text-zinc-300 hover:text-zinc-500 transition-colors"
-                          :disabled="renderer.isFieldDisabled(field)"
-                          @click="deleteProperty(renderer.modelValue, field.path)"
-                        >
-                          <Icon
-                            icon="fluent:dismiss-20-regular"
-                          />
-                        </button>
-                      </InputGroupButton>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {{ t("clear") }}
-                    </TooltipContent>
-                  </Tooltip>
-                  <span
-                    v-if="field.maxLength && getProperty(renderer.modelValue, field.path)"
-                    class="text-xs text-zinc-400 font-mono"
-                  >
-                    <span class="inline-block text-right">{{ String(getProperty(renderer.modelValue, field.path) ?? "").length }}</span>/{{ field.maxLength }}
-                  </span>
-                </InputGroupAddon>
-              </InputGroup>
-            </template>
-
-            <FieldError
-              v-if="renderer.isFieldInvalid(field)"
-              :class="renderer.getBodyOrientation(body) === 'contents' ? 'static pt-1' : void 0"
-            >
-              <span v-html="renderer.renderValidationMessage(field)" />
-            </FieldError>
-          </FieldContent>
-        </UiField>
-      </template>
-    </component>
-  </div>
-</template>
-
-<i18n lang="json">
-{
-  "zh": {
-    "clear": "清空",
-    "select-empty": "无搜索结果",
-    "select-search-placeholder": "搜索…",
-    "select-placeholder": "选择…",
-    "upload-click-or-drag": "点击或拖拽文件到此处上传",
-    "upload-accept-description": "仅接受 {formats} 格式文件",
-    "upload-accept-or": "或",
-    "upload-accept-all": "接受所有格式文件",
-    "upload-download-template": "下载模板"
-  },
-  "ja": {
-    "clear": "クリア",
-    "select-empty": "検索結果がありません",
-    "select-search-placeholder": "検索…",
-    "select-placeholder": "選択…",
-    "upload-click-or-drag": "クリックまたはドラッグしてアップロード",
-    "upload-accept-description": "{formats} 形式のみアップロードできます",
-    "upload-accept-or": "または",
-    "upload-accept-all": "すべての形式を受け付けます",
-    "upload-download-template": "テンプレートをダウンロード"
-  },
-  "en": {
-    "clear": "Clear",
-    "select-empty": "No search results",
-    "select-search-placeholder": "Search…",
-    "select-placeholder": "Select…",
-    "upload-click-or-drag": "Click or drag files here to upload",
-    "upload-accept-description": "Only {formats} files are accepted",
-    "upload-accept-or": "or",
-    "upload-accept-all": "All file formats are accepted",
-    "upload-download-template": "Download template"
-  }
-}
-</i18n>