@nuxt/ui 4.3.0 → 4.5.0

package/dist/runtime/components/Footer.vue

@@ -6,39 +6,41 @@ import theme from "#build/ui/footer";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import UContainer from "./Container.vue";
 const props = defineProps({
   as: { type: null, required: false, default: "footer" },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("footer", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footer || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: props.ui?.top })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.top" data-slot="top" :class="ui.top({ class: uiProp?.top })">
       <slot name="top" />
     </div>
 
-    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
-      <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
+    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
+      <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
         <slot name="right" />
       </div>
 
-      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
         <slot />
       </div>
 
-      <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+      <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
         <slot name="left" />
       </div>
     </UContainer>
 
-    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: props.ui?.bottom })">
+    <div v-if="!!slots.bottom" data-slot="bottom" :class="ui.bottom({ class: uiProp?.bottom })">
       <slot name="bottom" />
     </div>
   </Primitive>

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

@@ -18,9 +18,11 @@ export interface FooterSlots {
     top(props?: {}): any;
     bottom(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -49,8 +49,10 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
         active: boolean;
     }): any;
 }
-declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -60,8 +62,8 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
 }>) => 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/FooterColumns.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/footer-columns";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { pickLinkProps } from "../utils/link";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";
@@ -15,43 +16,44 @@ const props = defineProps({
   as: { type: null, required: false, default: "nav" },
   class: { type: null, required: false },
   columns: { type: Array, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("footerColumns", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="ui.left({ class: uiProp?.left })">
       <slot name="left" />
     </div>
 
-    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="ui.center({ class: uiProp?.center })">
       <slot>
         <div v-for="(column, index) in columns" :key="index">
-          <h3 data-slot="label" :class="ui.label({ class: props.ui?.label })">
+          <h3 data-slot="label" :class="ui.label({ class: uiProp?.label })">
             <slot name="column-label" :column="column">
               {{ column.label }}
             </slot>
           </h3>
 
-          <ul data-slot="list" :class="ui.list({ class: props.ui?.list })">
-            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
+          <ul data-slot="list" :class="ui.list({ class: uiProp?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="ui.item({ class: [uiProp?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
-                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
+                <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [uiProp?.link, link.ui?.link, link.class], active })">
                   <slot name="link" :link="link" :active="active" :ui="ui">
                     <slot name="link-leading" :link="link" :active="active" :ui="ui">
-                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
+                      <UIcon v-if="link.icon" :name="link.icon" data-slot="linkLeadingIcon" :class="ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 
-                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [props.ui?.linkLabel, link.ui?.linkLabel], active })">
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="ui.linkLabel({ class: [uiProp?.linkLabel, link.ui?.linkLabel], active })">
                       <slot name="link-label" :link="link" :active="active">
                         {{ link.label }}
                       </slot>
 
-                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
+                      <UIcon v-if="link.target === '_blank'" :name="appConfig.ui.icons.external" data-slot="linkLabelExternalIcon" :class="ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.ui?.linkLabelExternalIcon], active })" />
                     </span>
 
                     <slot name="link-trailing" :link="link" :active="active" />
@@ -64,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns
       </slot>
     </div>
 
-    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: props.ui?.right })">
+    <div v-if="!!slots.right" data-slot="right" :class="ui.right({ class: uiProp?.right })">
       <slot name="right" />
     </div>
   </Primitive>

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

@@ -49,8 +49,10 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
         active: boolean;
     }): any;
 }
-declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -60,8 +62,8 @@ declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullabl
 }>) => 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/Form.d.vue.ts

@@ -47,6 +47,9 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      */
     loadingAuto?: boolean;
     class?: any;
+    ui?: {
+        base?: any;
+    };
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
@@ -59,8 +62,13 @@ export interface FormSlots {
         loading: boolean;
     }): any;
 }
-declare const __VLS_export: <S extends FormSchema, 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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<S, T, N> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, 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<FormProps<S, T, N> & {
+        onError?: ((event: FormErrorEvent) => any) | undefined;
+        onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -108,8 +116,8 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
 }>) => 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/Form.vue

@@ -3,11 +3,12 @@ import theme from "#build/ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive, useTemplateRef } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 import { validateSchema, getAtPath, setAtPath } from "../utils/form";
 import { FormValidationException } from "../types/form";
 const props = defineProps({
@@ -25,13 +26,16 @@ const props = defineProps({
   nested: { type: Boolean, required: false },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
+  ui: { type: Object, required: false },
   onSubmit: { type: Function, required: false }
 });
 const emits = defineEmits(["submit", "error"]);
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("form", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.form || {} }));
 const formId = props.id ?? useId();
+const formRef = useTemplateRef("formRef");
 const bus = useEventBus(`form-${formId}`);
 const parentBus = props.nested === true && inject(
   formBusInjectionKey,
@@ -252,6 +256,9 @@ const api = {
     }
   },
   async submit() {
+    if (formRef.value instanceof HTMLFormElement && formRef.value.reportValidity() === false) {
+      return;
+    }
     await onSubmitWrapper(new Event("submit"));
   },
   getErrors(name) {
@@ -285,7 +292,8 @@ defineExpose(api);
   <component
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
-    :class="ui({ class: props.class })"
+    ref="formRef"
+    :class="ui({ class: [uiProp?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" :loading="loading" />

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

@@ -47,6 +47,9 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      */
     loadingAuto?: boolean;
     class?: any;
+    ui?: {
+        base?: any;
+    };
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
@@ -59,8 +62,13 @@ export interface FormSlots {
         loading: boolean;
     }): any;
 }
-declare const __VLS_export: <S extends FormSchema, 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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<FormProps<S, T, N> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "error", event: FormErrorEvent) => void) & ((evt: "submit", event: FormSubmitEvent<FormData<S, T>>) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends FormSchema, 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<FormProps<S, T, N> & {
+        onError?: ((event: FormErrorEvent) => any) | undefined;
+        onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
@@ -108,8 +116,8 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
 }>) => 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/FormField.d.vue.ts

@@ -57,9 +57,11 @@ export interface FormFieldSlots {
         error?: boolean | string;
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
+    error: boolean | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/FormField.vue

@@ -6,6 +6,7 @@ import theme from "#build/ui/form-field";
 import { computed, ref, inject, provide, useId, watch } from "vue";
 import { Primitive, Label } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 const props = defineProps({
@@ -23,10 +24,11 @@ const props = defineProps({
   validateOnInputDelay: { type: Number, required: false },
   orientation: { type: null, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("formField", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.formField || {} })({
   size: props.size,
   required: props.required,
@@ -58,36 +60,36 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="labelWrapper" :class="ui.labelWrapper({ class: uiProp?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: props.ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="ui.hint({ class: uiProp?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
       </p>
     </div>
 
-    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
+    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: uiProp?.container })]">
       <slot :error="error" />
-      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="ui.error({ class: uiProp?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="ui.help({ class: uiProp?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

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

@@ -57,9 +57,11 @@ export interface FormFieldSlots {
         error?: boolean | string;
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {
+    error: boolean | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -32,6 +32,11 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
      * @defaultValue 'right'
      */
     toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
     class?: any;
     ui?: Header['slots'];
 }
@@ -52,21 +57,25 @@ export interface HeaderSlots {
         close?: () => void;
     }): any;
 }
-declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {
         open?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: HeaderSlots;
-    emit: (evt: "update:open", value: boolean) => void;
+    emit: (event: "update:open", value: boolean) => void;
 }>) => 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/Header.vue

@@ -8,6 +8,7 @@ import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig, useRoute } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
@@ -26,14 +27,16 @@ const props = defineProps({
   menu: { type: null, required: false },
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "right" },
+  autoClose: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
-  ui: { type: null, required: false }
+  ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const route = useRoute();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("header", props);
 const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
 const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
@@ -42,6 +45,7 @@ const ariaLabel = computed(() => {
   return (slotText || props.title || "Nuxt UI").trim();
 });
 watch(() => route.fullPath, () => {
+  if (!props.autoClose) return;
   open.value = false;
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.header || {} })());
@@ -71,18 +75,18 @@ function toggleOpen() {
         :icon="open ? appConfig.ui.icons.close : appConfig.ui.icons.menu"
         v-bind="typeof toggle === 'object' ? toggle : {}"
         data-slot="toggle"
-        :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
+        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
         @click="toggleOpen"
       />
     </slot>
   </DefineToggleTemplate>
 
   <DefineLeftTemplate>
-    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left">
-        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <ULink :to="to" :aria-label="ariaLabel" data-slot="title" :class="ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -92,20 +96,20 @@ function toggleOpen() {
   </DefineLeftTemplate>
 
   <DefineRightTemplate>
-    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
       <slot name="right" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />
     </div>
   </DefineRightTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <slot name="top" />
 
-    <UContainer data-slot="container" :class="ui.container({ class: props.ui?.container })">
+    <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <ReuseLeftTemplate />
 
-      <div data-slot="center" :class="ui.center({ class: props.ui?.center })">
+      <div data-slot="center" :class="ui.center({ class: uiProp?.center })">
         <slot />
       </div>
 
@@ -121,19 +125,19 @@ function toggleOpen() {
     :description="t('header.description')"
     v-bind="menuProps"
     :ui="{
-  overlay: ui.overlay({ class: props.ui?.overlay }),
-  content: ui.content({ class: props.ui?.content })
+  overlay: ui.overlay({ class: uiProp?.overlay }),
+  content: ui.content({ class: uiProp?.content })
 }"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
-        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+        <div v-if="mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header })">
           <ReuseLeftTemplate />
 
           <ReuseRightTemplate />
         </div>
 
-        <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
+        <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
           <slot name="body" />
         </div>
       </slot>

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

@@ -32,6 +32,11 @@ export interface HeaderProps<T extends HeaderMode = HeaderMode> {
      * @defaultValue 'right'
      */
     toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
     class?: any;
     ui?: Header['slots'];
 }
@@ -52,21 +57,25 @@ export interface HeaderSlots {
         close?: () => void;
     }): any;
 }
-declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {
         open?: boolean;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", value: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: HeaderSlots;
-    emit: (evt: "update:open", value: boolean) => void;
+    emit: (event: "update:open", value: boolean) => void;
 }>) => 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/Icon.d.vue.ts

@@ -4,6 +4,6 @@ export interface IconProps {
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;