@nuxt/ui 4.3.0 → 4.5.0

package/README.md

@@ -1,7 +1,7 @@
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
   <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
-  <img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <img alt="Nuxt UI" width="830" height="436" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
 </picture>
 
 # Nuxt UI
@@ -37,19 +37,19 @@ Kickstart your project with one of our ready-to-use Nuxt UI templates or follow
 ## Installation
 
 ```bash [pnpm]
-pnpm add @nuxt/ui
+pnpm add @nuxt/ui tailwindcss
 ```
 
 ```bash [yarn]
-yarn add @nuxt/ui
+yarn add @nuxt/ui tailwindcss
 ```
 
 ```bash [npm]
-npm install @nuxt/ui
+npm install @nuxt/ui tailwindcss
 ```
 
 ```bash [bun]
-bun add @nuxt/ui
+bun add @nuxt/ui tailwindcss
 ```
 
 ### Nuxt
@@ -125,6 +125,9 @@ Thank you for considering contributing to Nuxt UI. Here are a few ways you can g
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
 - Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
+> [!TIP]
+> We provide a [contributing skill](https://github.com/nuxt/ui/tree/v4/.claude/skills/contributing) for AI assistants to help you contribute to Nuxt UI. It will automatically guide you through component structure, theming patterns, testing conventions, and documentation guidelines when working in this repository.
+
 ## Local Development
 
 Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute.

package/cli/package.json

@@ -5,7 +5,7 @@
     ".": "./index.mjs"
   },
   "dependencies": {
-    "citty": "^0.1.6",
+    "citty": "^0.2.1",
     "consola": "^3.4.2",
     "pathe": "^2.0.3",
     "scule": "^1.3.0"

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.3.0",
+  "version": "4.5.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.DegC4tw1.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.BrgdrRzy.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,9 +11,9 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.3.0";
+const version = "4.5.0";
 
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name,
     version,
@@ -49,7 +49,7 @@ const module = defineNuxtModule({
       }
     }
     await registerModule("@nuxt/icon", "icon", {
-      cssLayer: "components"
+      cssLayer: "base"
     });
     if (options.fonts) {
       await registerModule("@nuxt/fonts", "fonts", {
@@ -136,4 +136,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

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

@@ -37,6 +37,11 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
      * @IconifyIcon
      */
     trailingIcon?: IconProps['name'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -68,8 +73,12 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     open: boolean;
     ui: Accordion['ui'];
 }>;
-declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AccordionProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -79,8 +88,8 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Accordion.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -14,9 +15,10 @@ const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
   trailingIcon: { type: null, required: false },
+  valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   collapsible: { type: Boolean, required: false, default: true },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -27,6 +29,7 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("accordion", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion || {} })({
   disabled: props.disabled
@@ -34,35 +37,35 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
-      :value="item.value || String(index)"
+      :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
     >
-      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
-        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" data-slot="header" :class="ui.header({ class: [uiProp?.header, item.ui?.header] })">
+        <AccordionTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger], disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: [uiProp?.leadingIcon, item?.ui?.leadingIcon] })" />
           </slot>
 
-          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label] })">
             <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
           </span>
 
           <slot name="trailing" :item="item" :index="index" :open="open" :ui="ui">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" data-slot="trailingIcon" :class="ui.trailingIcon({ class: [uiProp?.trailingIcon, item.ui?.trailingIcon] })" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
-      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open" :ui="ui">
-          <div data-slot="body" :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
+          <div data-slot="body" :class="ui.body({ class: [uiProp?.body, item.ui?.body] })">
             <slot :name="item.slot ? `${item.slot}-body` : 'body'" :item="item" :index="index" :open="open" :ui="ui">
               {{ item.content }}
             </slot>

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

@@ -37,6 +37,11 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
      * @IconifyIcon
      */
     trailingIcon?: IconProps['name'];
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -68,8 +73,12 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     open: boolean;
     ui: Accordion['ui'];
 }>;
-declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AccordionProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AccordionItem>(__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<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -79,8 +88,8 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -66,13 +66,15 @@ export interface AlertSlots {
         ui: Alert['ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    orientation: Alert["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Alert.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/alert";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -24,12 +25,13 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("alert", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} })({
   color: props.color,
   variant: props.variant,
@@ -39,32 +41,32 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot name="leading" :ui="ui">
-      <UAvatar v-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
-      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
+      <UAvatar v-if="avatar" :size="uiProp?.avatarSize || ui.avatarSize()" v-bind="avatar" data-slot="avatar" :class="ui.avatar({ class: uiProp?.avatar })" />
+      <UIcon v-else-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
     </slot>
 
-    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+      <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description">
           {{ description }}
         </slot>
       </div>
 
-      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
         </slot>
       </div>
     </div>
 
-    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
+    <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" data-slot="actions" :class="ui.actions({ class: uiProp?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
@@ -80,7 +82,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.alert || {} }
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
           data-slot="close"
-          :class="ui.close({ class: props.ui?.close })"
+          :class="ui.close({ class: uiProp?.close })"
           @click="emits('update:open', false)"
         />
       </slot>

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

@@ -66,13 +66,15 @@ export interface AlertSlots {
         ui: Alert['ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    orientation: Alert["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,8 +10,10 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -21,8 +23,8 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -10,8 +10,10 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Messages>(__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<AppProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -21,8 +23,8 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

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

@@ -92,12 +92,92 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     }): any;
     footer(props?: {}): any;
 } & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
-declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AuthFormProps<T, F> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "submit", payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__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<AuthFormProps<T, F> & {
+        onSubmit?: ((payload: FormSubmitEvent<import("vue").Reactive<InferInput<T>>>) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<any>>;
+        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
+            validate: {
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: false | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<import("../types").FormData<T, T_1>>;
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: true | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<false | import("../types").FormData<T, T_1>>;
+            };
+            errors: import("vue").Ref<{
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[], import("../types").FormErrorWithId[] | {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[]>;
+            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            submit(): Promise<void>;
+            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[];
+            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            disabled: import("vue").ComputedRef<boolean>;
+            loading: import("vue").Ref<boolean, boolean>;
+            dirty: import("vue").ComputedRef<boolean>;
+            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+        }> | null, import("vue").ShallowUnwrapRef<{
+            validate: {
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: false | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<import("../types").FormData<T, T_1>>;
+                <T_1 extends boolean>(opts: {
+                    name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
+                    silent?: true | undefined;
+                    nested?: boolean;
+                    transform?: T_1 | undefined;
+                }): Promise<false | import("../types").FormData<T, T_1>>;
+            };
+            errors: import("vue").Ref<{
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[], import("../types").FormErrorWithId[] | {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[]>;
+            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            submit(): Promise<void>;
+            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+                id?: string | undefined;
+                name?: string | undefined;
+                message: string;
+            }[];
+            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
+            disabled: import("vue").ComputedRef<boolean>;
+            loading: import("vue").Ref<boolean, boolean>;
+            dirty: import("vue").ComputedRef<boolean>;
+            dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+            touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
+        }> | null>>;
         state: import("vue").Reactive<InferInput<T>>;
     }>) => void;
     attrs: any;
@@ -106,8 +186,8 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};