@movk/nuxt 1.1.1 → 1.2.0

package/dist/runtime/{utils → auto-form}/field-utils.d.ts

@@ -1,8 +1,6 @@
 import type { VNode } from 'vue';
 import type { AutoFormField } from '../types/auto-form.js';
-/**
- * 字段分类
- */
+/** 将字段列表分类为叶子/嵌套/数组/布局四组 */
 export declare function classifyFields(fields: AutoFormField[]): {
     leafFields: AutoFormField[];
     nestedFields: AutoFormField[];
@@ -10,25 +8,11 @@ export declare function classifyFields(fields: AutoFormField[]): {
     layoutFields: AutoFormField[];
     hasComplexFields: boolean;
 };
-/**
- * 优化的字段类型检测 - 基于 meta.type 判断
- * @param field - 自动表单字段
- * @returns 是否为叶子字段（非 object 和 array）
- */
 export declare function isLeafField(field: AutoFormField): boolean;
-/**
- * 获取字段类型
- * @param field - 自动表单字段
- * @returns 字段类型
- */
 export declare function getFieldType(field: AutoFormField): 'leaf' | 'nested';
-/**
- * 收集字段默认值
- */
+/** 递归收集字段的默认值，object 类型返回嵌套结构，叶子类型直接返回值 */
 export declare function collectFieldDefaults(field: AutoFormField): {} | null | undefined;
-/**
- * 从 SelectMenuItem 数组中提取枚举值
- */
+/** 从 items 选项中提取枚举值，支持对象格式（取 valueKey/value/label）和原始值 */
 export declare function extractEnumValuesFromItems(items: any, valueKey?: string): string[];
-/** 创建提示插槽工厂 */
+/** 创建数组项的 hint 插槽渲染函数，根据层级和字段类型组合删除按钮与折叠图标 */
 export declare function createHintSlotFactory(removeCallback: (count?: number) => void): (field: AutoFormField, path: string, open?: boolean, count?: number) => VNode | undefined;

package/dist/runtime/{utils → auto-form}/field-utils.js

@@ -95,7 +95,6 @@ export function createHintSlotFactory(removeCallback) {
       color: "error",
       variant: "ghost",
       size: "xs",
-      square: true,
       onClick: (event) => {
         event?.stopPropagation();
         removeCallback(count);
@@ -104,7 +103,7 @@ export function createHintSlotFactory(removeCallback) {
     if (!isObject) {
       return deleteButton;
     }
-    return h("div", { class: "flex items-center gap-2" }, [
+    return h("div", { class: "flex items-center gap-1.5" }, [
       deleteButton,
       chevronIcon
     ]);

package/dist/runtime/auto-form/metadata.d.ts

@@ -0,0 +1,22 @@
+import type { z } from 'zod';
+/**
+ * 应用元数据到 Zod schema
+ */
+export declare function applyMeta<T extends z.ZodType>(schema: T, meta?: unknown): T;
+/**
+ * 从 Zod schema 中提取 AutoForm 元数据
+ *
+ * 通过 BFS 遍历以下路径读取 meta：
+ * - schema.meta() — Zod v4 全局 registry
+ * - schema._zod.parent — .refine()/.check() 创建新实例时设置的父引用
+ * - schema.unwrap() — 可选/默认值等包装类型
+ * - schema.def.innerType / .in / .out / .schema — 结构性内层类型
+ *
+ * 收集所有层级的 meta 并合并，外层优先级更高。
+ */
+export declare function getAutoFormMetadata(schema: z.ZodType): Record<string, any>;
+/**
+ * 提取错误消息和元数据
+ * @returns [errorMessage, metadata]
+ */
+export declare function extractErrorAndMeta(controlMeta?: any): [string | undefined, any];

package/dist/runtime/auto-form/metadata.js

@@ -0,0 +1,53 @@
+import { isObject } from "@movk/core";
+import { AUTOFORM_META } from "../constants/auto-form.js";
+export function applyMeta(schema, meta) {
+  const normalizedMeta = isObject(meta) ? meta : {};
+  return schema.meta(normalizedMeta);
+}
+export function getAutoFormMetadata(schema) {
+  const queue = [schema];
+  const visited = /* @__PURE__ */ new Set();
+  const collectedMetas = [];
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current || visited.has(current))
+      continue;
+    visited.add(current);
+    const meta = typeof current.meta === "function" ? current.meta() : void 0;
+    if (meta && isObject(meta)) {
+      const typedMeta = meta;
+      const normalizedMeta = typedMeta?.[AUTOFORM_META.KEY] && isObject(typedMeta[AUTOFORM_META.KEY]) ? typedMeta[AUTOFORM_META.KEY] : typedMeta;
+      collectedMetas.push(normalizedMeta);
+    }
+    if (typeof current.unwrap === "function") {
+      try {
+        queue.push(current.unwrap());
+      } catch {
+      }
+    }
+    if (current?._zod?.parent)
+      queue.push(current._zod.parent);
+    const def = current?.def || current?._def;
+    if (def?.innerType)
+      queue.push(def.innerType);
+    if (def?.in)
+      queue.push(def.in);
+    if (def?.out)
+      queue.push(def.out);
+    if (def?.schema)
+      queue.push(def.schema);
+  }
+  if (collectedMetas.length === 0)
+    return {};
+  return Object.assign({}, ...collectedMetas.reverse());
+}
+export function extractErrorAndMeta(controlMeta) {
+  if (typeof controlMeta === "string") {
+    return [controlMeta, void 0];
+  }
+  if (controlMeta && isObject(controlMeta) && "error" in controlMeta) {
+    const { error, ...meta } = controlMeta;
+    return [error, meta];
+  }
+  return [void 0, controlMeta];
+}

package/dist/runtime/auto-form/provider.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from 'vue';
+import type { AutoFormField, AutoFormFieldContext } from '../types/auto-form.js';
+/** 初始化表单上下文工厂并通过 provide 注入给所有子渲染器 */
+export declare function useAutoFormProvider<T extends Record<string, any>>(state: Ref<T>, slots: Record<string, any>): {
+    createFieldContext: (field: AutoFormField, extraProps?: Record<string, any>) => AutoFormFieldContext;
+    createSlotProps: (field: AutoFormField, extraProps?: Record<string, any>) => AutoFormFieldContext;
+    resolveFieldProp: <T_1 = any>(field: AutoFormField, prop: string, defaultValue?: T_1, extraProps?: Record<string, any>) => T_1 | undefined;
+    renderFieldSlot: (fn?: (props?: any) => any, slotProps?: any) => any;
+    getResolvedFieldSlots: (field: AutoFormField, extraProps?: Record<string, any>) => undefined;
+    renderControl: (field: AutoFormField, extraProps?: Record<string, any>) => any;
+    createSlotResolver: (field: AutoFormField, extraProps?: Record<string, any>) => {
+        hasSlot(name: string): boolean;
+        renderSlot(name: string, slotProps: any): any;
+    };
+    createFormFieldSlots: (field: AutoFormField, slotResolver: ReturnType<(field: AutoFormField, extraProps?: Record<string, any>) => {
+        hasSlot(name: string): boolean;
+        renderSlot(name: string, slotProps: any): any;
+    }>, extraProps?: Record<string, any>) => Record<string, any>;
+    createCollapsibleEnhancer: (field: AutoFormField, extraProps?: Record<string, any>) => {
+        collapsibleConfig: any;
+        shouldShowCollapsible: any;
+        isHidden: any;
+        enhancedField: any;
+    };
+};
+/** 注入表单上下文，必须在 AutoForm 子渲染器中调用 */
+export declare function useAutoFormInjector(): any;

package/dist/runtime/{internal/useAutoFormProvider.js → auto-form/provider.js}

@@ -2,7 +2,7 @@ import { UIcon } from "#components";
 import defu from "defu";
 import { computed, h, inject, isVNode, provide, resolveDynamicComponent, unref } from "vue";
 import { getPath, setPath } from "@movk/core";
-import { enhanceEventProps, resolveReactiveValue } from "../utils/auto-form.js";
+import { enhanceEventProps, resolveReactiveValue } from "./reactive-utils.js";
 const AUTO_FORM_CONTEXT_KEY = Symbol("AUTO_FORM_CONTEXT_KEY");
 export function useAutoFormProvider(state, slots) {
   function createFieldContext(field, extraProps) {

package/dist/runtime/{utils → auto-form}/reactive-utils.d.ts

@@ -1,30 +1,12 @@
 import type { ReactiveValue, AnyObject } from '@movk/core';
 import type { AutoFormFieldContext } from '../types/auto-form.js';
-/**
- * 响应式值解析
- * @param value - 响应式值
- * @param context - 表单字段上下文
- * @returns 解析后的值
- */
+/** 解析单个响应式值：函数则以 context 调用，ref 则解包，否则原样返回 */
 export declare function resolveReactiveValue(value: ReactiveValue<any, any>, context: AutoFormFieldContext): any;
-/**
- * 响应式对象解析
- * @param obj - 要解析的对象
- * @param context - 表单字段上下文
- * @param depth - 当前递归深度（防止无限递归）
- * @returns 解析后的对象
- */
+/** 递归解析对象/数组中所有响应式值，VNode 和 ref 不再展开以防止意外渲染 */
 export declare function resolveReactiveObject<T extends Record<string, any>>(obj: T, context: AutoFormFieldContext, depth?: number): T;
-/**
- * 增强的事件属性处理 - 提升性能和安全性
- * @param originalProps - 原始属性对象
- * @param ctx - 表单字段上下文
- * @returns 增强后的属性对象
- */
+/** 为 onXxx 事件 prop 自动追加 context 作为最后一个参数，方便用户在事件回调中访问表单状态 */
 export declare function enhanceEventProps(originalProps: AnyObject, ctx: AutoFormFieldContext): Record<string, any>;
-/**
- * VNode 渲染组件 - 修复水合错误
- */
+/** 渲染任意 VNode 内容（slot 函数返回值、h() 结果等），单子节点直接返回，多个节点包入 Fragment */
 export declare function VNodeRender(props: {
     node: unknown;
 }): any;

package/dist/runtime/{utils → auto-form}/schema-introspector.d.ts

@@ -1,13 +1,7 @@
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 import type { AutoFormControls, AutoFormField } from '../types/auto-form.js';
 import type { ZodAutoFormFieldMeta } from '../types/zod.js';
-/**
- * Schema 内省 - 递归解析 Zod Schema 为表单字段结构
- */
+/** 将 Zod schema 递归解析为 AutoFormField 列表（schema 遍历的核心入口） */
 export declare function introspectSchema(schema: z.ZodType, mapping: AutoFormControls, path: string, globalMeta?: ZodAutoFormFieldMeta): AutoFormField[];
-/**
- * 提取纯净的数据 schema（去除所有布局标记）
- * @param schema - 包含布局标记的 ZodObject
- * @returns 纯净的 ZodObject，只包含数据字段
- */
+/** 将含布局标记的 schema 还原为纯字段 schema，用于 Zod 表单校验 */
 export declare function extractPureSchema<T extends z.ZodObject<any, any>>(schema: T): z.ZodObject<any, any>;

package/dist/runtime/{utils → auto-form}/schema-introspector.js

@@ -1,14 +1,18 @@
 import { markRaw } from "vue";
-import { z as zod } from "zod/v4";
+import { z as zod } from "zod";
 import { joinPath, startCase, toPath, isFunction, isObject } from "@movk/core";
-import { useAutoForm } from "../composables/useAutoForm.js";
+import { getAutoFormMetadata } from "./metadata.js";
 import { AUTOFORM_LIMITS, AUTOFORM_META } from "../constants/auto-form.js";
+function getUnwrappedSchema(schema) {
+  const def = schema?.def || schema?._def;
+  return def?.innerType || def?.in || def?.schema || void 0;
+}
 function extractDecorators(schema) {
   const decorators = {};
   let cur = schema;
   let coreSchema = schema;
   while (cur) {
-    const def = cur?.def;
+    const def = cur?.def || cur?._def;
     if (!def?.type)
       break;
     switch (def.type) {
@@ -22,9 +26,11 @@ function extractDecorators(schema) {
         decorators.defaultValue = isFunction(def.defaultValue) ? def.defaultValue() : def.defaultValue;
         break;
     }
-    const next = def?.innerType;
+    const next = getUnwrappedSchema(cur);
     if (!next)
       break;
+    if (next === cur)
+      break;
     cur = next;
     coreSchema = next;
   }
@@ -34,7 +40,6 @@ function extractDecorators(schema) {
   return { decorators, coreSchema };
 }
 function extractSchemaInfo(schema, globalMeta, autoGeneratedLabel) {
-  const { getAutoFormMetadata } = useAutoForm();
   const customMeta = getAutoFormMetadata(schema);
   const { decorators, coreSchema } = extractDecorators(schema);
   const computedType = customMeta?.component ? void 0 : customMeta?.type ?? coreSchema?.type;
@@ -47,7 +52,6 @@ function extractSchemaInfo(schema, globalMeta, autoGeneratedLabel) {
     ...globalMeta,
     ...customMeta,
     type: computedType,
-    // 如果有 overwrite,则进行合并
     ...customMeta?.overwrite && isObject(customMeta.overwrite) ? customMeta.overwrite : {}
   };
   return { decorators, mergedMeta, coreSchema };
@@ -162,14 +166,13 @@ export function introspectSchema(schema, mapping, path, globalMeta = {}) {
     if (enumValues && enumValues.length > 0) {
       field.meta.controlProps = {
         items: enumValues,
-        ...field.meta.controlProps || {}
+        ...field.meta.controlProps
       };
     }
   }
   return [field];
 }
 function isLayoutMarker(schema) {
-  const { getAutoFormMetadata } = useAutoForm();
   const meta = getAutoFormMetadata(schema);
   return meta?.type === AUTOFORM_META.LAYOUT_KEY;
 }
@@ -177,7 +180,6 @@ function processLayoutShape(shape) {
   const resultShape = {};
   for (const [key, fieldSchema] of Object.entries(shape)) {
     if (isLayoutMarker(fieldSchema)) {
-      const { getAutoFormMetadata } = useAutoForm();
       const meta = getAutoFormMetadata(fieldSchema);
       const layoutFields = meta?.layout?.fields;
       if (layoutFields && isObject(layoutFields)) {

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

@@ -1,5 +1,5 @@
 import type { ButtonProps, FormEmits, FormProps, InferInput } from '@nuxt/ui';
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 import type { ZodAutoFormFieldMeta } from '../types/zod.js';
 import type { AutoFormControls, AutoFormSlotProps, DynamicFormSlots } from '../types/auto-form.js';
 export interface AutoFormProps<S extends z.ZodObject, T extends boolean = true, N extends boolean = false> extends FormProps<S, T, N> {
@@ -27,19 +27,18 @@ export type AutoFormSlots<T extends object> = {
 } & DynamicFormSlots<T>;
 declare const __VLS_export: <S extends z.ZodObject, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormProps<S, T, N> & {
-        onError?: ((event: import("@nuxt/ui/.").FormErrorEvent) => any) | undefined;
-        onSubmit?: ((event: import("@nuxt/ui/.").FormSubmitEvent<import("@nuxt/ui/.").FormData<S, T>>) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<any, any>>;
+        formRef: any;
         reset: () => void;
         clear: () => void;
     }>) => void;
     attrs: any;
     slots: AutoFormSlots<N extends false ? Partial<InferInput<S>> : never>;
-    emit: ((evt: "error", event: import("@nuxt/ui/.").FormErrorEvent) => void) & ((evt: "submit", event: import("@nuxt/ui/.").FormSubmitEvent<import("@nuxt/ui/.").FormData<S, T>>) => void);
+    emit: any;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/AutoForm.vue

@@ -1,14 +1,13 @@
 <script setup>
 import { UForm } from "#components";
 import { computed, onMounted, ref, useTemplateRef } from "vue";
-import { useAutoFormProvider } from "../internal/useAutoFormProvider";
+import { useAutoFormProvider } from "../auto-form/provider";
 import { getPath, setPath } from "@movk/core";
-import { classifyFields, extractPureSchema, introspectSchema } from "../utils/auto-form";
-import AutoFormRendererArray from "./auto-form-renderer/AutoFormRendererArray.vue";
-import AutoFormRendererField from "./auto-form-renderer/AutoFormRendererField.vue";
-import AutoFormRendererLayout from "./auto-form-renderer/AutoFormRendererLayout.vue";
-import AutoFormRendererNested from "./auto-form-renderer/AutoFormRendererNested.vue";
+import { classifyFields } from "../auto-form/field-utils";
+import { extractPureSchema, introspectSchema } from "../auto-form/schema-introspector";
 import { useAutoForm } from "../composables/useAutoForm";
+import AutoFormRendererChildren from "./auto-form-renderer/AutoFormRendererChildren.vue";
+import AutoFormRendererField from "./auto-form-renderer/AutoFormRendererField.vue";
 const {
   schema,
   controls,
@@ -37,6 +36,7 @@ const {
   transform: { type: null, required: false },
   nested: { type: Boolean, required: false },
   class: { type: null, required: false },
+  ui: { type: Object, required: false },
   onSubmit: { type: Function, required: false }
 });
 defineEmits(["submit", "error"]);
@@ -54,8 +54,7 @@ const controlsMapping = computed(() => ({
 const fields = computed(() => {
   if (!schema)
     return [];
-  const items = introspectSchema(schema, controlsMapping.value, "", globalMeta);
-  return items;
+  return introspectSchema(schema, controlsMapping.value, "", globalMeta);
 });
 function resolveDefaultValue(fields2, stateValue) {
   if (!fields2.length)
@@ -134,33 +133,11 @@ defineExpose({
       <slot name="header" v-bind="{ errors, loading, fields: visibleFields, state }" />
 
       <template v-if="renderData.hasComplexFields">
-        <template v-for="field in renderData.allFields" :key="field.path">
-          <AutoFormRendererField
-            v-if="renderData.leafFields.includes(field)"
-            :field="field"
-            :schema="schema"
-            :extra-props="{ errors, loading }"
-          />
-          <AutoFormRendererArray
-            v-else-if="renderData.arrayFields.includes(field)"
-            :field="field"
-            :schema="schema"
-            :extra-props="{ errors, loading }"
-            :add-button-props="addButtonProps"
-          />
-          <AutoFormRendererLayout
-            v-else-if="renderData.layoutFields.includes(field)"
-            :field="field"
-            :schema="schema"
-            :extra-props="{ errors, loading }"
-          />
-          <AutoFormRendererNested
-            v-else
-            :field="field"
-            :schema="schema"
-            :extra-props="{ errors, loading }"
-          />
-        </template>
+        <AutoFormRendererChildren
+          :fields="renderData.allFields"
+          :schema="schema"
+          :extra-props="{ errors, loading }"
+        />
       </template>
 
       <template v-else>

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

@@ -1,5 +1,5 @@
 import type { ButtonProps, FormEmits, FormProps, InferInput } from '@nuxt/ui';
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 import type { ZodAutoFormFieldMeta } from '../types/zod.js';
 import type { AutoFormControls, AutoFormSlotProps, DynamicFormSlots } from '../types/auto-form.js';
 export interface AutoFormProps<S extends z.ZodObject, T extends boolean = true, N extends boolean = false> extends FormProps<S, T, N> {
@@ -27,19 +27,18 @@ export type AutoFormSlots<T extends object> = {
 } & DynamicFormSlots<T>;
 declare const __VLS_export: <S extends z.ZodObject, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormProps<S, T, N> & {
-        onError?: ((event: import("@nuxt/ui/.").FormErrorEvent) => any) | undefined;
-        onSubmit?: ((event: import("@nuxt/ui/.").FormSubmitEvent<import("@nuxt/ui/.").FormData<S, T>>) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<any, any>>;
+        formRef: any;
         reset: () => void;
         clear: () => void;
     }>) => void;
     attrs: any;
     slots: AutoFormSlots<N extends false ? Partial<InferInput<S>> : never>;
-    emit: ((evt: "error", event: import("@nuxt/ui/.").FormErrorEvent) => void) & ((evt: "submit", event: import("@nuxt/ui/.").FormSubmitEvent<import("@nuxt/ui/.").FormData<S, T>>) => void);
+    emit: any;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,11 +1,15 @@
-import type { ColorChooserProps } from '../types/components.js';
+import type { ButtonProps, ColorPickerProps, PopoverProps } from '@nuxt/ui';
+export interface ColorChooserProps<P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ ColorPickerProps {
+    /** 弹出层组件属性 */
+    popoverProps?: PopoverProps<P>;
+    /** 按钮组件属性 */
+    buttonProps?: ButtonProps;
+}
 declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<"click"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<P> & {
         modelValue?: string;
     }) & {
-        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-        "onClose:prevent"?: (() => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
@@ -20,7 +24,7 @@ declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props:
     } & {
         anchor?: (props: any) => any;
     };
-    emit: (((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void)) & ((evt: "update:modelValue", value: string | undefined) => void);
+    emit: any & ((event: "update:modelValue", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/ColorChooser.vue

@@ -1,10 +1,7 @@
 <script setup>
 import { UPopover, UButton, UColorPicker, UIcon } from "#components";
 import { computed } from "vue";
-const {
-  buttonProps,
-  popoverProps
-} = defineProps({
+const props = defineProps({
   popoverProps: { type: Object, required: false },
   buttonProps: { type: Object, required: false }
 });
@@ -12,7 +9,7 @@ const emit = defineEmits(["close:prevent", "update:open"]);
 defineOptions({ inheritAttrs: false });
 const modelValue = defineModel({ type: String });
 const label = computed(() => {
-  return modelValue.value || buttonProps?.label || "\u9009\u62E9\u989C\u8272";
+  return modelValue.value || props.buttonProps?.label || "\u9009\u62E9\u989C\u8272";
 });
 const chipStyle = computed(() => ({
   backgroundColor: modelValue.value || ""
@@ -20,14 +17,14 @@ const chipStyle = computed(() => ({
 </script>
 
 <template>
-  <UPopover v-bind="popoverProps" @close:prevent="emit('close:prevent')" @update:open="emit('update:open', $event)">
+  <UPopover v-bind="props.popoverProps" @close:prevent="emit('close:prevent')" @update:open="emit('update:open', $event)">
     <template #default="defaultSlotProps">
       <slot v-bind="defaultSlotProps">
         <UButton
           color="neutral"
           variant="subtle"
           class="w-full"
-          v-bind="buttonProps"
+          v-bind="props.buttonProps"
           :label="label"
         >
           <template #leading="leading">

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

@@ -1,11 +1,15 @@
-import type { ColorChooserProps } from '../types/components.js';
+import type { ButtonProps, ColorPickerProps, PopoverProps } from '@nuxt/ui';
+export interface ColorChooserProps<P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ ColorPickerProps {
+    /** 弹出层组件属性 */
+    popoverProps?: PopoverProps<P>;
+    /** 按钮组件属性 */
+    buttonProps?: ButtonProps;
+}
 declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<"click"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<P> & {
         modelValue?: string;
     }) & {
-        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-        "onClose:prevent"?: (() => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
@@ -20,7 +24,7 @@ declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props:
     } & {
         anchor?: (props: any) => any;
     };
-    emit: (((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void)) & ((evt: "update:modelValue", value: string | undefined) => void);
+    emit: any & ((event: "update:modelValue", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,15 +1,21 @@
-import type { DateValue } from '@internationalized/date';
-import type { DatePickerProps, ValueType } from '../types/components.js';
+import type { DateFormatterOptions } from '../composables/useDateFormatter.js';
+import type { ButtonProps, CalendarProps, PopoverProps } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import { useDateFormatter } from '../composables/useDateFormatter.js';
+export type LabelFormat = 'iso' | 'formatted' | 'date' | 'timestamp' | 'unix';
+export interface DatePickerProps<R extends boolean, M extends boolean, P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ OmitByKey<CalendarProps<R, M>, 'modelValue'>, DateFormatterOptions {
+    /** 按钮组件属性 */
+    buttonProps?: ButtonProps;
+    /** 弹出层组件属性 */
+    popoverProps?: PopoverProps<P>;
+    /** 按钮上展示文本的格式 */
+    labelFormat?: LabelFormat | ((formatter: ReturnType<typeof useDateFormatter>, modelValue: CalendarProps<R, M>['modelValue']) => string);
+}
 declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(DatePickerProps<R, M, P> & {
-        modelValue?: ValueType<R, M>;
+        modelValue?: CalendarProps<R, M>["modelValue"];
     }) & {
-        "onUpdate:modelValue"?: ((value: ValueType<R, M>) => any) | undefined;
-        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
-        "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
-        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
-        "onClose:prevent"?: (() => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
@@ -30,7 +36,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean, P extends "cl
     } & {
         'week-day'?: (props: any) => any;
     };
-    emit: (((evt: "update:modelValue", date: R extends true ? import("reka-ui").DateRange | null : M extends true ? DateValue[] | undefined : DateValue | undefined) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: import("reka-ui").DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void) & ((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void)) & ((evt: "update:modelValue", value: ValueType<R, M>) => void);
+    emit: any;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,15 +1,21 @@
-import type { DateValue } from '@internationalized/date';
-import type { DatePickerProps, ValueType } from '../types/components.js';
+import type { DateFormatterOptions } from '../composables/useDateFormatter.js';
+import type { ButtonProps, CalendarProps, PopoverProps } from '@nuxt/ui';
+import type { OmitByKey } from '@movk/core';
+import { useDateFormatter } from '../composables/useDateFormatter.js';
+export type LabelFormat = 'iso' | 'formatted' | 'date' | 'timestamp' | 'unix';
+export interface DatePickerProps<R extends boolean, M extends boolean, P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ OmitByKey<CalendarProps<R, M>, 'modelValue'>, DateFormatterOptions {
+    /** 按钮组件属性 */
+    buttonProps?: ButtonProps;
+    /** 弹出层组件属性 */
+    popoverProps?: PopoverProps<P>;
+    /** 按钮上展示文本的格式 */
+    labelFormat?: LabelFormat | ((formatter: ReturnType<typeof useDateFormatter>, modelValue: CalendarProps<R, M>['modelValue']) => string);
+}
 declare const __VLS_export: <R extends boolean, M extends boolean, P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(DatePickerProps<R, M, P> & {
-        modelValue?: ValueType<R, M>;
+        modelValue?: CalendarProps<R, M>["modelValue"];
     }) & {
-        "onUpdate:modelValue"?: ((value: ValueType<R, M>) => any) | undefined;
-        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
-        "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
-        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
-        "onClose:prevent"?: (() => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P_1;
     } ? P_1 : {});
@@ -30,7 +36,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean, P extends "cl
     } & {
         'week-day'?: (props: any) => any;
     };
-    emit: (((evt: "update:modelValue", date: R extends true ? import("reka-ui").DateRange | null : M extends true ? DateValue[] | undefined : DateValue | undefined) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: import("reka-ui").DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void) & ((evt: "close:prevent") => void) & ((evt: "update:open", value: boolean) => void)) & ((evt: "update:modelValue", value: ValueType<R, M>) => void);
+    emit: any;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };