@shwfed/nuxt 0.7.9 → 0.7.11

package/dist/runtime/components/fields.d.vue.ts

@@ -1,152 +1,174 @@
-import z from 'zod';
-import { Effect } from 'effect';
-export declare const StringFieldC: z.ZodObject<{
-    type: z.ZodLiteral<"string">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    discardEmptyString: z.ZodOptional<z.ZodBoolean>;
-    maxLength: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>;
-export declare const NumberFieldC: z.ZodObject<{
-    type: z.ZodLiteral<"number">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    min: z.ZodOptional<z.ZodString>;
-    max: z.ZodOptional<z.ZodString>;
-    step: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>;
-export declare const SelectFieldC: z.ZodObject<{
-    type: z.ZodLiteral<"select">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    options: z.ZodString;
-    label: z.ZodString;
-    value: z.ZodString;
-    key: z.ZodString;
-    style: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>;
-export declare const CalendarFieldC: z.ZodObject<{
-    type: z.ZodLiteral<"calendar">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    mode: z.ZodEnum<{
-        year: "year";
-        month: "month";
-        date: "date";
-    }>;
-    display: z.ZodOptional<z.ZodString>;
-    value: z.ZodString;
-    disableDate: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>;
-export declare const FieldC: z.ZodUnion<readonly [z.ZodObject<{
-    type: z.ZodLiteral<"string">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    discardEmptyString: z.ZodOptional<z.ZodBoolean>;
-    maxLength: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>, z.ZodObject<{
-    type: z.ZodLiteral<"number">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    min: z.ZodOptional<z.ZodString>;
-    max: z.ZodOptional<z.ZodString>;
-    step: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>, z.ZodObject<{
-    type: z.ZodLiteral<"select">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    options: z.ZodString;
-    label: z.ZodString;
-    value: z.ZodString;
-    key: z.ZodString;
-    style: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>, z.ZodObject<{
-    type: z.ZodLiteral<"calendar">;
-    path: z.ZodString;
-    title: z.ZodArray<z.ZodObject<{
-        locale: z.ZodString;
-        message: z.ZodString;
-    }, z.core.$strip>>;
-    icon: z.ZodOptional<z.ZodString>;
-    style: z.ZodOptional<z.ZodString>;
-    mode: z.ZodEnum<{
-        year: "year";
-        month: "month";
-        date: "date";
-    }>;
-    display: z.ZodOptional<z.ZodString>;
-    value: z.ZodString;
-    disableDate: z.ZodOptional<z.ZodString>;
-    hidden: z.ZodOptional<z.ZodString>;
-    disabled: z.ZodOptional<z.ZodString>;
-}, z.core.$strip>]>;
+import type { Field } from './ui/fields/Fields.vue.js';
+export { CalendarFieldC, FieldC, NumberFieldC, SelectFieldC, StringFieldC, } from './ui/fields/Fields.vue.js';
+export type { Field } from './ui/fields/Fields.vue.js';
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     orientation?: "horizontal" | "vertical" | "floating";
-    fields: Effect.Effect<ReadonlyArray<z.infer<typeof FieldC>>>;
+    fields: import("effect").Effect.Effect<ReadonlyArray<Field>>;
 } & {
     modelValue?: Record<string, unknown>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: Record<string, unknown>) => any;
+    "update:fields": (args_0: readonly ({
+        type: "string";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        discardEmptyString?: boolean | undefined;
+        maxLength?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "number";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        min?: string | undefined;
+        max?: string | undefined;
+        step?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "select";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        options: string;
+        label: string;
+        value: string;
+        key: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "calendar";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        mode: "year" | "month" | "date";
+        value: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        display?: string | undefined;
+        disableDate?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    })[]) => any;
 }, string, import("vue").PublicProps, Readonly<{
     orientation?: "horizontal" | "vertical" | "floating";
-    fields: Effect.Effect<ReadonlyArray<z.infer<typeof FieldC>>>;
+    fields: import("effect").Effect.Effect<ReadonlyArray<Field>>;
 } & {
     modelValue?: Record<string, unknown>;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+    "onUpdate:fields"?: ((args_0: readonly ({
+        type: "string";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        discardEmptyString?: boolean | undefined;
+        maxLength?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "number";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        min?: string | undefined;
+        max?: string | undefined;
+        step?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "select";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        options: string;
+        label: string;
+        value: string;
+        key: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "calendar";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        mode: "year" | "month" | "date";
+        value: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        display?: string | undefined;
+        disableDate?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    })[]) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical" | "floating";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
+    [x: string]: ((props: any) => any) | undefined;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/fields.vue

@@ -1,312 +1,47 @@
-<script>
-import { Icon } from "@iconify/vue";
-import { useId } from "vue";
-import { useNuxtApp } from "#app";
-import { Field, FieldLabel } from "./ui/field";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupCombobox, InputGroupInput, InputGroupNumberField } from "./ui/input-group";
-import { CommandGroup, CommandItem } from "./ui/command";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { Calendar } from "./ui/calendar";
-import { useI18n } from "vue-i18n";
-import { deleteProperty, getProperty, hasProperty, setProperty } from "dot-prop";
-import { useCheating } from "#imports";
-import { Skeleton } from "./ui/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";
-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: z.array(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")
-});
-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: z.array(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")
-});
-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: z.array(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")
-});
-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: z.array(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")
-});
-export const FieldC = z.union([
-  StringFieldC,
-  NumberFieldC,
-  SelectFieldC,
-  CalendarFieldC
-]);
-</script>
-
 <script setup>
-const id = useId();
+import UiFields from "./ui/fields/Fields.vue";
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
   orientation: { type: String, required: false, default: "horizontal" },
   fields: { type: null, required: true }
 });
-const fields = computedAsync(async () => z.array(FieldC).readonly().parse(await props.fields.pipe(Effect.runPromise)));
-const { t, locale } = useI18n();
-const { $dsl } = useNuxtApp();
+const emit = defineEmits(["update:fields"]);
 const modelValue = defineModel("modelValue", { type: Object, ...{
   default: () => ({})
 } });
-const isCheating = useCheating();
-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 handleFieldsUpdate(fields) {
+  emit("update:fields", fields);
 }
 </script>
 
+<script>
+export {
+  CalendarFieldC,
+  FieldC,
+  NumberFieldC,
+  SelectFieldC,
+  StringFieldC
+} from "./ui/fields/Fields.vue";
+</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'
-]"
+  <UiFields
+    v-bind="$attrs"
+    v-model="modelValue"
+    :orientation="props.orientation"
+    :fields="props.fields"
+    @update:fields="handleFieldsUpdate"
   >
-    <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"
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
     >
-      <Field
-        v-if="!isFieldHidden(field)"
-        :data-disabled="isFieldDisabled(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>
-        <Popover v-if="field.type === 'calendar'">
-          <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)"
-                  readonly
-                />
-              </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)"
-            @update:model-value="(value) => {
-  if (!value && !field.discardEmptyString) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-          />
-          <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)"
-            @update:model-value="(value) => {
-  if (!value && value !== 0) {
-    deleteProperty(modelValue, field.path);
-  } else {
-    setProperty(modelValue, field.path, value);
-  }
-}"
-          />
-          <InputGroupCombobox
-            v-if="field.type === 'select'"
-            :disabled="isFieldDisabled(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>
-      </Field>
+      <slot
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
     </template>
-
-    <slot />
-  </div>
+  </UiFields>
 </template>
-
-<i18n lang="json">
-{
-  "zh": {
-    "clear": "清空",
-    "select-placeholder": "选择…"
-  },
-  "ja": {
-    "clear": "クリア",
-    "select-placeholder": "選択…"
-  },
-  "en": {
-    "clear": "Clear",
-    "select-placeholder": "Select…"
-  }
-}
-</i18n>