@shwfed/nuxt 0.7.8 → 0.7.9

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -66,8 +66,6 @@ type __VLS_Props = {
      * Structured command entries for profile menu and command palette.
      */
     commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
-    read?: <T>(identity: string) => Effect.Effect<T>;
-    write?: <T>(identity: string, value: T) => Effect.Effect<void>;
 };
 declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/app.vue

@@ -9,7 +9,6 @@ import { useI18n } from "vue-i18n";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
 import { setGlobalDslContext } from "../plugins/cel/context";
-import { setQueryConfigAccessors } from "../utilities/query-config/global";
 import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
@@ -26,9 +25,7 @@ const { t } = useI18n();
 const props = defineProps({
   dsl: { type: null, required: false },
   sidebar: { type: Array, required: false },
-  commands: { type: Array, required: false },
-  read: { type: Function, required: false },
-  write: { type: Function, required: false }
+  commands: { type: Array, required: false }
 });
 const { active, tabs, nameOf, close } = useNavigationTabs(() => props.sidebar ?? []);
 const ui = reactive({
@@ -50,9 +47,6 @@ const { start: startProfileCloseTimer, stop: stopProfileCloseTimer } = useTimeou
 const { meta_k } = useMagicKeys();
 whenever(() => meta_k?.value, () => ui.isCommandPaletteOpen = !ui.isCommandPaletteOpen);
 setGlobalDslContext(await props.dsl?.pipe(Effect.scoped).pipe(Effect.runPromise) ?? {});
-if (props.read !== void 0 && props.write !== void 0) {
-  setQueryConfigAccessors(props.read, props.write);
-}
 const {
   isFavorited: isNavigationFavorited,
   canBeFavorited: canBeNavigationFavorited,

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

@@ -66,8 +66,6 @@ type __VLS_Props = {
      * Structured command entries for profile menu and command palette.
      */
     commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
-    read?: <T>(identity: string) => Effect.Effect<T>;
-    write?: <T>(identity: string, value: T) => Effect.Effect<void>;
 };
 declare var __VLS_108: {}, __VLS_124: {}, __VLS_347: {};
 type __VLS_Slots = {} & {

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

@@ -0,0 +1,155 @@
+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>]>;
+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>>>;
+} & {
+    modelValue?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    orientation?: "horizontal" | "vertical" | "floating";
+    fields: Effect.Effect<ReadonlyArray<z.infer<typeof FieldC>>>;
+} & {
+    modelValue?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, unknown>) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical" | "floating";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/fields.vue

@@ -0,0 +1,312 @@
+<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();
+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 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 });
+}
+</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'
+]"
+  >
+    <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"
+        :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>
+    </template>
+
+    <slot />
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "clear": "清空",
+    "select-placeholder": "选择…"
+  },
+  "ja": {
+    "clear": "クリア",
+    "select-placeholder": "選択…"
+  },
+  "en": {
+    "clear": "Clear",
+    "select-placeholder": "Select…"
+  }
+}
+</i18n>