@shwfed/nuxt 0.11.47 → 0.11.48

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

@@ -0,0 +1,720 @@
+<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>