@shwfed/nuxt 0.7.8 → 0.7.10

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

@@ -0,0 +1,441 @@
+<script>
+import { Icon } from "@iconify/vue";
+import { useNuxtApp } from "#app";
+import { ref, toRaw, useId, watchEffect } from "vue";
+import { Field, FieldContent, FieldError, FieldLabel } from "../field";
+import { Button } from "../button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupCombobox, InputGroupInput, InputGroupNumberField } from "../input-group";
+import { CommandGroup, CommandItem } from "../command";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../popover";
+import { Calendar } from "../calendar";
+import { useI18n } from "vue-i18n";
+import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
+import { useCheating } from "#imports";
+import { Skeleton } from "../skeleton";
+import z from "zod";
+import { Effect } from "effect";
+import { computedAsync } from "@vueuse/core";
+import { localeC, dotPropC, expressionC } from "../../../utils/coders";
+import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
+import { format, parse } from "date-fns";
+import { TZDate } from "@date-fns/tz";
+import FieldsConfiguratorDialog from "../fields-configurator/FieldsConfiguratorDialog.vue";
+const ValidationRuleC = z.object({
+  expression: expressionC("bool", { value: "dyn", form: "map<string, dyn>" }).describe("\u8FD4\u56DE\u5E03\u5C14\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u53EF\u4F7F\u7528 value \u548C form \u53D8\u91CF"),
+  message: z.string().describe("\u6821\u9A8C\u5931\u8D25\u65F6\u5C55\u793A\u7684 Markdown \u6D88\u606F\uFF0C\u53EF\u5728 {{ expression }} \u4E2D\u4F7F\u7528 value \u548C form \u53D8\u91CF")
+}).readonly();
+const validationC = z.array(ValidationRuleC).readonly().optional().describe("\u5B57\u6BB5\u5931\u7126\u65F6\u6309\u987A\u5E8F\u6267\u884C\u7684\u6821\u9A8C\u89C4\u5219\uFF0C\u547D\u4E2D\u7B2C\u4E00\u4E2A\u5931\u8D25\u89C4\u5219\u540E\u505C\u6B62");
+export const StringFieldC = z.object({
+  type: z.literal("string").describe("\u5355\u884C\u6587\u672C\u8F93\u5165\u5B57\u6BB5\uFF0C\u7ED1\u5B9A string \u7C7B\u578B\u7684\u503C"),
+  path: dotPropC,
+  title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
+  discardEmptyString: z.boolean().optional().describe("\u4E3A true \u65F6\uFF0C\u7A7A\u5B57\u7B26\u4E32\u4F5C\u4E3A\u6709\u6548\u503C\u5B58\u50A8\uFF1B\u5426\u5219\u6E05\u7A7A\u8F93\u5165\u5C06\u5220\u9664\u5BF9\u5E94\u5C5E\u6027"),
+  maxLength: expressionC("int").optional().describe('\u8FD4\u56DE\u6574\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u9650\u5236\u8F93\u5165\u7684\u6700\u5927\u5B57\u7B26\u6570\uFF0C\u5982 "100"'),
+  hidden: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u9690\u85CF\u8FD9\u4E2A\u5B57\u6BB5"),
+  disabled: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u7981\u7528\u8FD9\u4E2A\u5B57\u6BB5"),
+  validation: validationC
+});
+export const NumberFieldC = z.object({
+  type: z.literal("number").describe("\u6570\u5B57\u8F93\u5165\u5B57\u6BB5\uFF0C\u7ED1\u5B9A number \u7C7B\u578B\u7684\u503C"),
+  path: dotPropC,
+  title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
+  min: expressionC("double").optional().describe('\u8FD4\u56DE\u6D6E\u70B9\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u9650\u5236\u5141\u8BB8\u7684\u6700\u5C0F\u503C\uFF0C\u5982 "0.0"'),
+  max: expressionC("double").optional().describe('\u8FD4\u56DE\u6D6E\u70B9\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u9650\u5236\u5141\u8BB8\u7684\u6700\u5927\u503C\uFF0C\u5982 "100.0"'),
+  step: expressionC("double").optional().describe('\u8FD4\u56DE\u6D6E\u70B9\u6570\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u6570\u503C\u9012\u589E\u6B65\u957F\uFF0C\u5982 "0.5"'),
+  hidden: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u9690\u85CF\u8FD9\u4E2A\u5B57\u6BB5"),
+  disabled: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u7981\u7528\u8FD9\u4E2A\u5B57\u6BB5"),
+  validation: validationC
+});
+export const SelectFieldC = z.object({
+  type: z.literal("select").describe("\u4E0B\u62C9\u9009\u62E9\u5B57\u6BB5\uFF0C\u4ECE\u9884\u5B9A\u4E49\u9009\u9879\u4E2D\u9009\u53D6\u4E00\u4E2A\u503C"),
+  path: dotPropC,
+  title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
+  options: expressionC(/^list/).describe("\u5168\u90E8\u5019\u9009\u9879"),
+  label: expressionC("string", { option: "dyn" }).describe("\u8FD4\u56DE\u5B57\u7B26\u4E32\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u63D0\u4F9B option \u53D8\u91CF\uFF0C\u751F\u6210\u8BE5\u9009\u9879\u7684\u663E\u793A\u6587\u672C"),
+  value: expressionC(/.+/, { option: "dyn" }).describe("\u8FD4\u56DE\u4EFB\u610F\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u63D0\u4F9B option \u53D8\u91CF\uFF0C\u8FD4\u56DE\u503C\u5C06\u88AB\u5199\u5165\u7ED1\u5B9A\u5B57\u6BB5"),
+  key: expressionC("string", { option: "dyn" }).describe("\u8FD4\u56DE\u5B57\u7B26\u4E32\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u63D0\u4F9B option \u53D8\u91CF\uFF0C\u8FD4\u56DE\u503C\u4E0E\u9009\u9879\u6784\u6210\u5168\u6620\u5C04"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
+  hidden: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u9690\u85CF\u8FD9\u4E2A\u5B57\u6BB5"),
+  disabled: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u7981\u7528\u8FD9\u4E2A\u5B57\u6BB5"),
+  validation: validationC
+});
+export const CalendarFieldC = z.object({
+  type: z.literal("calendar").describe("\u65E5\u671F\u9009\u62E9\u5B57\u6BB5\uFF0C\u901A\u8FC7\u5F39\u51FA\u65E5\u5386\u9762\u677F\u9009\u62E9\u65E5\u671F"),
+  path: dotPropC,
+  title: localeC.describe("\u5B57\u6BB5\u6807\u7B7E\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  icon: z.string().optional().describe("Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u663E\u793A\u5728\u8F93\u5165\u6846\u5185\u4FA7"),
+  style: z.string().optional().describe("CSS \u6837\u5F0F\u5BF9\u8C61\u8868\u8FBE\u5F0F\uFF0C\u63A7\u5236\u5B57\u6BB5\u7684\u5E03\u5C40\u4E0E\u5916\u89C2"),
+  mode: z.enum(["year", "month", "date"]).describe("\u65E5\u5386\u9009\u62E9\u7CBE\u5EA6\uFF1Ayear \u4EC5\u9009\u5E74\uFF0Cmonth \u9009\u5E74\u6708\uFF0Cdate \u9009\u5E74\u6708\u65E5"),
+  display: z.string().optional().describe('date-fns \u683C\u5F0F\u5B57\u7B26\u4E32\uFF0C\u63A7\u5236\u8F93\u5165\u6846\u4E2D\u7684\u5C55\u793A\u683C\u5F0F\uFF0C\u5982 "yyyy\u5E74MM\u6708dd\u65E5"\uFF1B\u7559\u7A7A\u5219\u663E\u793A\u539F\u59CB\u5B58\u50A8\u503C'),
+  value: z.string().describe('date-fns \u683C\u5F0F\u5B57\u7B26\u4E32\uFF0C\u5B9A\u4E49\u65E5\u671F\u5728 model \u4E2D\u7684\u5B58\u50A8\u683C\u5F0F\uFF0C\u5982 "yyyy-MM-dd"'),
+  disableDate: expressionC("bool", { date: "Date" }).optional().describe("\u8FD4\u56DE\u5E03\u5C14\u503C\u7684 CEL \u8868\u8FBE\u5F0F\uFF0C\u4EE5 date\uFF08Date \u7C7B\u578B\uFF09\u4E3A\u53D8\u91CF\uFF0C\u8FD4\u56DE true \u65F6\u8BE5\u65E5\u671F\u5728\u65E5\u5386\u4E2D\u88AB\u7981\u7528"),
+  hidden: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u9690\u85CF\u8FD9\u4E2A\u5B57\u6BB5"),
+  disabled: expressionC("bool", { form: "map<string, dyn>" }).optional().describe("\u4E3A true \u65F6\uFF0C\u7981\u7528\u8FD9\u4E2A\u5B57\u6BB5"),
+  validation: validationC
+});
+export const FieldC = z.union([
+  StringFieldC,
+  NumberFieldC,
+  SelectFieldC,
+  CalendarFieldC
+]);
+</script>
+
+<script setup>
+const id = useId();
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  fields: { type: null, required: true }
+});
+const emit = defineEmits(["update:fields"]);
+const fields = computedAsync(async () => z.array(FieldC).readonly().parse(await props.fields.pipe(Effect.runPromise)));
+const { t, locale } = useI18n();
+const { $dsl, $md } = useNuxtApp();
+const modelValue = defineModel("modelValue", { type: Object, ...{
+  default: () => ({})
+} });
+const isCheating = useCheating();
+const isConfiguratorOpen = ref(false);
+const validationErrors = ref({});
+const calendarOpen = ref({});
+function toCalendarDateValue(value, valueFormat) {
+  if (typeof value !== "string") return void 0;
+  const date = parse(value, valueFormat, /* @__PURE__ */ new Date());
+  if (Number.isNaN(date.getTime())) return void 0;
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+}
+function displayCalendarValue(stored, displayFormat, valueFormat) {
+  if (displayFormat) {
+    const dateVal = toCalendarDateValue(stored, valueFormat);
+    if (dateVal) return format(dateVal.toDate(getLocalTimeZone()), displayFormat);
+  }
+  return stored ?? "";
+}
+function isFieldHidden(field) {
+  return $dsl.evaluate`${field.hidden || "false"}`({ form: modelValue.value });
+}
+function isFieldDisabled(field) {
+  return $dsl.evaluate`${field.disabled || "false"}`({ form: modelValue.value });
+}
+function getFieldValue(field) {
+  return getProperty(modelValue.value, field.path);
+}
+function clearFieldValidation(path) {
+  Reflect.deleteProperty(validationErrors.value, path);
+}
+function snapshotValidationContext(field) {
+  const form = structuredClone(toRaw(modelValue.value));
+  return {
+    value: getProperty(form, field.path),
+    form
+  };
+}
+function validateField(field) {
+  if (!field.validation?.length || isFieldHidden(field) || isFieldDisabled(field)) {
+    clearFieldValidation(field.path);
+    return;
+  }
+  const context = {
+    value: getFieldValue(field),
+    form: modelValue.value
+  };
+  for (const rule of field.validation) {
+    if (!$dsl.evaluate`${rule.expression}`(context)) {
+      validationErrors.value[field.path] = {
+        message: rule.message,
+        context: snapshotValidationContext(field)
+      };
+      return;
+    }
+  }
+  clearFieldValidation(field.path);
+}
+function isFieldInvalid(field) {
+  return validationErrors.value[field.path] !== void 0;
+}
+function renderValidationMessage(field) {
+  const error = validationErrors.value[field.path];
+  if (!error) return "";
+  return $md.inline`${error.message}`(error.context);
+}
+function handleCalendarOpenChange(field, open) {
+  if (open) {
+    calendarOpen.value[field.path] = true;
+    return;
+  }
+  Reflect.deleteProperty(calendarOpen.value, field.path);
+  validateField(field);
+}
+function handleCalendarBlur(field) {
+  window.setTimeout(() => {
+    if (!calendarOpen.value[field.path]) {
+      validateField(field);
+    }
+  }, 0);
+}
+function handleConfiguratorConfirm(nextFields) {
+  emit("update:fields", nextFields);
+}
+watchEffect(() => {
+  const activePaths = /* @__PURE__ */ new Set();
+  for (const field of fields.value ?? []) {
+    if (!isFieldHidden(field) && !isFieldDisabled(field)) {
+      activePaths.add(field.path);
+    }
+  }
+  for (const path of Object.keys(validationErrors.value)) {
+    if (!activePaths.has(path)) {
+      clearFieldValidation(path);
+    }
+  }
+  for (const path of Object.keys(calendarOpen.value)) {
+    if (!activePaths.has(path)) {
+      Reflect.deleteProperty(calendarOpen.value, path);
+    }
+  }
+});
+</script>
+
+<template>
+  <div
+    :class="[
+  'relative p-1 border border-dashed',
+  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
+]"
+  >
+    <Button
+      v-if="isCheating"
+      data-slot="fields-configurator-trigger"
+      variant="ghost"
+      size="sm"
+      type="button"
+      class="absolute right-3 top-3 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
+      @click="isConfiguratorOpen = true"
+    >
+      <Icon icon="fluent:settings-20-regular" />
+    </Button>
+
+    <FieldsConfiguratorDialog
+      v-if="fields"
+      v-model:open="isConfiguratorOpen"
+      :fields="fields"
+      @confirm="handleConfiguratorConfirm"
+    />
+
+    <Skeleton
+      v-if="fields === void 0"
+      class="absolute inset-0 z-10 w-full h-full"
+    />
+
+    <template
+      v-for="field in fields"
+      :key="field.path"
+    >
+      <Field
+        v-if="!isFieldHidden(field)"
+        :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+        :data-invalid="isFieldInvalid(field) ? 'true' : void 0"
+        :orientation="orientation"
+        :style="field.style ? $dsl.evaluate`${field.style}`() : {}"
+      >
+        <FieldLabel :for="['string', 'number'].includes(field.type) ? `${id}:${field.path}` : void 0">
+          {{ field.title.find((r) => r.locale === locale)?.message ?? field.title[0]?.message }}
+          <span v-if="isCheating">
+            <span class="font-mono">{{ field.path }}</span>
+          </span>
+        </FieldLabel>
+        <FieldContent>
+          <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="orientation === '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) => !!$dsl.evaluate`${field.disableDate}`({ date: new TZDate(date.toDate(getLocalTimeZone())) }) : 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>
+          <InputGroup
+            v-else
+            :data-disabled="isFieldDisabled(field) ? 'true' : void 0"
+          >
+            <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)"
+            />
+            <InputGroupCombobox
+              v-if="field.type === 'select'"
+              :disabled="isFieldDisabled(field)"
+              :invalid="isFieldInvalid(field)"
+              @blur="validateField(field)"
+            >
+              <CommandGroup>
+                <CommandItem
+                  v-for="option in $dsl.evaluate`${field.options}`()"
+                  :key="$dsl.evaluate`${field.key}`({ option })"
+                  :value="$dsl.evaluate`${field.key}`({ option })"
+                  @select="setProperty(modelValue, field.path, $dsl.evaluate`${field.value}`({ option }))"
+                >
+                  {{ $dsl.evaluate`${field.label}`({ option }) }}
+                </CommandItem>
+              </CommandGroup>
+            </InputGroupCombobox>
+            <InputGroupAddon v-if="field.icon">
+              <Icon
+                :icon="field.icon"
+              />
+            </InputGroupAddon>
+            <InputGroupAddon
+              v-if="hasProperty(modelValue, field.path)"
+              align="inline-end"
+              :class="orientation === '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>
+          </InputGroup>
+
+          <FieldError v-if="isFieldInvalid(field)">
+            <span v-html="renderValidationMessage(field)" />
+          </FieldError>
+        </FieldContent>
+      </Field>
+    </template>
+
+    <slot />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "clear": "清空",
+    "select-placeholder": "选择…"
+  },
+  "ja": {
+    "clear": "クリア",
+    "select-placeholder": "選択…"
+  },
+  "en": {
+    "clear": "Clear",
+    "select-placeholder": "Select…"
+  }
+}
+</i18n>