@nuxt/ui 4.11.1 → 4.11.3

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" width="830" height="436" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/banner-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset=".github/assets/banner-light.png">
+  <img alt="Nuxt UI" width="900" height="472" src=".github/assets/banner-light.png">
 </picture>
 
 # Nuxt UI

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.11.1",
+  "version": "4.11.3",
   "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, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.DCJ9twx8.mjs';
+import { d as defaultOptions, r as resolveColors, c as getDefaultConfig, g as getClientBundleIcons, f as publicComposables, a as addTemplates } from './shared/ui.CNAeRcb0.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -14,7 +14,7 @@ import 'tinyglobby';
 import 'mlly';
 
 const name = "@nuxt/ui";
-const version = "4.11.1";
+const version = "4.11.3";
 
 const module$1 = defineNuxtModule({
   meta: {

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

@@ -27,7 +27,7 @@ export interface AccordionItem {
     value?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    ui?: Partial<Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>>;
     [key: string]: any;
 }
 export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {

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

@@ -27,7 +27,7 @@ export interface AccordionItem {
     value?: string;
     disabled?: boolean;
     class?: any;
-    ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    ui?: Partial<Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>>;
     [key: string]: any;
 }
 export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {

package/dist/runtime/components/App.vue

@@ -12,6 +12,7 @@ import { localeContextInjectionKey } from "../composables/useLocale";
 import { portalTargetInjectionKey } from "../composables/usePortal";
 import UToaster from "./Toaster.vue";
 import UOverlayProvider from "./OverlayProvider.vue";
+import en from "../locale/en";
 const props = defineProps({
   tooltip: { type: Object, required: false },
   toaster: { type: [Object, null], required: false },
@@ -25,7 +26,7 @@ defineSlots();
 const configProviderProps = useForwardProps(reactivePick(props, "scrollBody"));
 const tooltipProps = toRef(() => props.tooltip);
 const toasterProps = toRef(() => props.toaster);
-const locale = toRef(() => props.locale);
+const locale = toRef(() => props.dir ? { ...props.locale || en, dir: props.dir } : props.locale);
 provide(localeContextInjectionKey, locale);
 const portal = toRef(() => props.portal);
 provide(portalTargetInjectionKey, portal);

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

@@ -119,12 +119,14 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<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;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
@@ -153,12 +155,14 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<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;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<false | FormData<T, T_1>>;
             };
             errors: {

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

@@ -119,12 +119,14 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<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;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<false | FormData<T, T_1>>;
             };
             errors: {
@@ -153,12 +155,14 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     silent?: false | undefined;
                     nested?: boolean;
                     transform?: T_1 | undefined;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<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;
+                    isCurrent?: (() => boolean) | undefined;
                 }): Promise<false | FormData<T, T_1>>;
             };
             errors: {

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

@@ -16,7 +16,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     avatar?: AvatarProps;
     slot?: string;
     class?: any;
-    ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
+    ui?: Partial<Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>>;
     [key: string]: any;
 }
 export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {

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

@@ -16,7 +16,7 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
     avatar?: AvatarProps;
     slot?: string;
     class?: any;
-    ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>;
+    ui?: Partial<Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>>;
     [key: string]: any;
 }
 export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {

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

@@ -17,7 +17,7 @@ type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = CarouselValue | {
     class?: any;
-    ui?: Pick<Carousel['slots'], 'item'>;
+    ui?: Partial<Pick<Carousel['slots'], 'item'>>;
     [key: string]: any;
 };
 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {

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

@@ -17,7 +17,7 @@ type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = CarouselValue | {
     class?: any;
-    ui?: Pick<Carousel['slots'], 'item'>;
+    ui?: Partial<Pick<Carousel['slots'], 'item'>>;
     [key: string]: any;
 };
 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {

package/dist/runtime/components/ChatPrompt.vue

@@ -83,7 +83,7 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+  <Primitive :as="props.as" :method="props.as === 'form' ? 'post' : void 0" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
     <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

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

@@ -19,7 +19,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
+    ui?: Partial<Pick<CheckboxGroup['slots'], 'item'>> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
 export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {

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

@@ -19,7 +19,7 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
+    ui?: Partial<Pick<CheckboxGroup['slots'], 'item'>> & Omit<Required<CheckboxProps>['ui'], 'root'>;
     [key: string]: any;
 };
 export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'highlight' | 'indicator' | 'icon'> {

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

@@ -37,7 +37,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     children?: CommandPaletteItem[];
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {

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

@@ -37,7 +37,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     children?: CommandPaletteItem[];
     onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Partial<Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {

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

@@ -37,7 +37,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {

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

@@ -37,7 +37,7 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {

package/dist/runtime/components/DashboardNavbar.vue

@@ -52,7 +52,7 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.dashboardNavbar |
           <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
+        <h1 v-if="props.title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ props.title }}
           </slot>

package/dist/runtime/components/DashboardSearch.vue

@@ -60,7 +60,7 @@ const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" }
 useRuntimeHook("dashboard:search:toggle", () => {
   open.value = !open.value;
 });
-const { t } = useLocale();
+const { t, locale } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "trailingIcon", "selectedIcon", "childrenIcon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "back", "backIcon", "disabled", "highlightOnHover", "labelKey", "descriptionKey", "preserveGroupOrder", "virtualize", "searchDelay"));
@@ -136,8 +136,8 @@ defineExpose({
 <template>
   <UModal
     v-model:open="open"
-    :title="props.title || t('dashboardSearch.title')"
-    :description="props.description || t('dashboardSearch.description')"
+    :title="props.title || locale.messages.dashboardSearch?.title || t('dashboardSearchButton.label')"
+    :description="props.description || locale.messages.dashboardSearch?.description"
     v-bind="modalProps"
     data-slot="modal"
     :class="ui.modal({ class: [props.ui?.modal, props.class] })"

package/dist/runtime/components/DashboardSidebar.vue

@@ -40,7 +40,7 @@ const props = useComponentProps("dashboardSidebar", _props);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
 const route = useRoute();
-const { t } = useLocale();
+const { t, locale } = useLocale();
 const appConfig = useAppConfig();
 const dashboardContext = useDashboard({
   storageKey: "dashboard",
@@ -134,8 +134,8 @@ function toggleOpen() {
 
   <Menu
     v-model:open="open"
-    :title="t('dashboardSidebar.title')"
-    :description="t('dashboardSidebar.description')"
+    :title="locale.messages.dashboardSidebar?.title || t('dashboardSidebarToggle.open')"
+    :description="locale.messages.dashboardSidebar?.description"
     v-bind="menuProps"
     :ui="{
   overlay: ui.overlay({ class: props.ui?.overlay }),

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

@@ -41,7 +41,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {

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

@@ -41,7 +41,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Partial<Pick<DropdownMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {

package/dist/runtime/components/EditorToolbar.vue

@@ -138,11 +138,12 @@ function getButtonProps(item) {
     }
   }
   return defu(baseProps, {
-    color: props.color,
-    activeColor: props.activeColor,
-    activeVariant: props.activeVariant,
-    variant: props.variant,
-    size: props.size
+    "aria-label": baseProps.label ? void 0 : item.tooltip?.text,
+    "color": props.color,
+    "activeColor": props.activeColor,
+    "activeVariant": props.activeVariant,
+    "variant": props.variant,
+    "size": props.size
   });
 }
 function getDropdownProps(item) {

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

@@ -12,7 +12,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+    ui?: Partial<Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>>;
 }
 export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
     label: string;

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

@@ -12,7 +12,7 @@ export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
      */
     icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+    ui?: Partial<Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>>;
 }
 export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
     label: string;

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

@@ -79,12 +79,14 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
                 silent?: false | undefined;
                 nested?: boolean;
                 transform?: T_1 | undefined;
+                isCurrent?: () => boolean;
             }): Promise<FormData<S, T_1>>;
             <T_1 extends boolean>(opts: {
                 name?: keyof InferInput<S> | (keyof InferInput<S>)[] | undefined;
                 silent?: true | undefined;
                 nested?: boolean;
                 transform?: T_1 | undefined;
+                isCurrent?: () => boolean;
             }): Promise<FormData<S, T_1> | false>;
         };
         errors: import("vue").Ref<{

package/dist/runtime/components/Form.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive, useTemplateRef } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive, useTemplateRef, unref, toRaw } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from "../composables/useFormField";
@@ -54,7 +54,7 @@ const nestedForms = ref(/* @__PURE__ */ new Map());
 onMounted(async () => {
   if (parentBus) {
     await nextTick();
-    parentBus.emit({ type: "attach", validate: _validate, formId, name: props.name, api });
+    parentBus.emit({ type: "attach", validate: _validate, clearDirty, formId, name: props.name, api });
   }
 });
 onUnmounted(() => {
@@ -66,25 +66,37 @@ onUnmounted(() => {
 onMounted(async () => {
   bus.on(async (event) => {
     if (event.type === "attach") {
-      nestedForms.value.set(event.formId, { validate: event.validate, name: event.name, api: event.api });
-    } else if (event.type === "detach") {
-      nestedForms.value.delete(event.formId);
-    } else if (props.validateOn?.includes(event.type) && !loading.value) {
-      if (event.type !== "input") {
-        await _validate({ name: event.name, silent: true, nested: false });
-      } else if (event.eager || blurredFields.has(event.name)) {
-        await _validate({ name: event.name, silent: true, nested: false });
-      }
+      nestedForms.value.set(event.formId, { validate: event.validate, clearDirty: event.clearDirty, name: event.name, api: event.api });
+      return;
     }
-    if (event.type === "blur") {
-      blurredFields.add(event.name);
+    if (event.type === "detach") {
+      nestedForms.value.delete(event.formId);
+      return;
     }
-    if (event.type === "change" || event.type === "input" || event.type === "blur" || event.type === "focus") {
+    if (event.track !== false) {
+      if (event.type === "blur") {
+        blurredFields.add(event.name);
+      }
+      if (event.type === "change" || event.type === "input") {
+        dirtyFields.add(event.name);
+        dirtyEpochs.set(event.name, epoch);
+      }
+      if (event.type === "input") {
+        inputEpochs.set(event.name, epoch);
+      }
       touchedFields.add(event.name);
     }
-    if (event.type === "change" || event.type === "input") {
-      dirtyFields.add(event.name);
-    }
+    if (event.validate === false || !props.validateOn?.includes(event.type) || loading.value) return;
+    if (event.type === "input" && (inputEpochs.get(event.name) !== epoch || !(event.eager || blurredFields.has(event.name)))) return;
+    const run = (validationRuns.get(event.name) ?? 0) + 1;
+    validationRuns.set(event.name, run);
+    const startEpoch = epoch;
+    await _validate({
+      name: event.name,
+      silent: true,
+      nested: false,
+      isCurrent: () => validationRuns.get(event.name) === run && epoch === startEpoch
+    });
   });
 });
 const errors = ref([]);
@@ -94,6 +106,18 @@ provide(formInputsInjectionKey, inputs);
 const dirtyFields = reactive(/* @__PURE__ */ new Set());
 const touchedFields = reactive(/* @__PURE__ */ new Set());
 const blurredFields = reactive(/* @__PURE__ */ new Set());
+let epoch = 0;
+const inputEpochs = /* @__PURE__ */ new Map();
+const validationRuns = /* @__PURE__ */ new Map();
+const dirtyEpochs = /* @__PURE__ */ new Map();
+function clearDirty() {
+  for (const field of dirtyFields) {
+    if (dirtyEpochs.get(field) !== epoch) dirtyFields.delete(field);
+  }
+  for (const form of nestedForms.value.values()) {
+    form.clearDirty();
+  }
+}
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -115,6 +139,7 @@ async function getErrors() {
 }
 async function _validate(opts = { silent: false, nested: false, transform: false }) {
   const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name;
+  if (!names) epoch++;
   let nestedResults = [];
   let nestedErrors = [];
   if (!names && opts.nested) {
@@ -126,25 +151,30 @@ async function _validate(opts = { silent: false, nested: false, transform: false
     nestedResults = results.filter((r) => r.output !== void 0);
   }
   const currentErrors = await getErrors();
+  if (opts.isCurrent?.() === false) return false;
   const allErrors = [...currentErrors, ...nestedErrors];
+  let failedErrors = allErrors;
   if (names) {
-    errors.value = filterErrorsByNames(allErrors, names);
+    const matchesNames = nameMatcher(names);
+    failedErrors = allErrors.filter(matchesNames);
+    errors.value = [...errors.value.filter((error) => !matchesNames(error)), ...failedErrors];
   } else {
     errors.value = allErrors;
   }
-  if (errors.value?.length) {
+  if (failedErrors.length) {
     if (opts.silent) return false;
-    throw new FormValidationException(formId, errors.value);
+    throw new FormValidationException(formId, failedErrors);
   }
   if (opts.transform) {
+    let output = transformedState.value;
     nestedResults.forEach((result) => {
       if (result.name) {
         setAtPath(transformedState.value, result.name, result.output);
       } else {
-        Object.assign(transformedState.value, result.output);
+        output = Object.assign(output ?? { ...toRaw(state.value) }, result.output);
       }
     });
-    return transformedState.value ?? state.value;
+    return output ?? state.value;
   }
   return state.value;
 }
@@ -156,7 +186,7 @@ async function onSubmitWrapper(payload) {
   try {
     event.data = await _validate({ nested: true, transform: props.transform });
     await props.onSubmit?.(event);
-    dirtyFields.clear();
+    clearDirty();
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error;
@@ -215,17 +245,14 @@ function getNestedTarget(target, formPath) {
   }
   return target;
 }
-function filterErrorsByNames(allErrors, names) {
+function nameMatcher(names) {
   const nameSet = new Set(names);
   const patterns = names.map((name) => inputs.value?.[name]?.pattern).filter(Boolean);
-  const matchesNames = (error) => {
+  return (error) => {
     if (!error.name) return false;
     if (nameSet.has(error.name)) return true;
     return patterns.some((pattern) => pattern.test(error.name));
   };
-  const keepErrors = errors.value.filter((error) => !matchesNames(error));
-  const newErrors = allErrors.filter(matchesNames);
-  return [...keepErrors, ...newErrors];
 }
 function filterErrorsByTarget(currentErrors, target) {
   return currentErrors.filter(
@@ -273,14 +300,14 @@ const api = {
     ) : [];
     const nestedErrors = [];
     for (const form of nestedForms.value.values()) {
-      if (matchesTarget(name, form.name)) form.api.clear();
+      if (matchesTarget(name, form.name)) form.api.clear(name instanceof RegExp ? void 0 : getNestedTarget(name, form.name || ""));
       nestedErrors.push(...getFormErrors(form));
     }
     errors.value = [...localErrors, ...nestedErrors];
   },
   disabled,
   loading,
-  dirty: computed(() => !!dirtyFields.size),
+  dirty: computed(() => !!dirtyFields.size || Array.from(nestedForms.value.values()).some((form) => unref(form.api.dirty))),
   dirtyFields: readonly(dirtyFields),
   blurredFields: readonly(blurredFields),
   touchedFields: readonly(touchedFields)

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

@@ -79,12 +79,14 @@ declare const __VLS_export: <S extends FormSchema, T extends boolean = true, N e
                 silent?: false | undefined;
                 nested?: boolean;
                 transform?: T_1 | undefined;
+                isCurrent?: () => boolean;
             }): Promise<FormData<S, T_1>>;
             <T_1 extends boolean>(opts: {
                 name?: keyof InferInput<S> | (keyof InferInput<S>)[] | undefined;
                 silent?: true | undefined;
                 nested?: boolean;
                 transform?: T_1 | undefined;
+                isCurrent?: () => boolean;
             }): Promise<FormData<S, T_1> | false>;
         };
         errors: import("vue").Ref<{

package/dist/runtime/components/Header.vue

@@ -35,7 +35,7 @@ const slots = defineSlots();
 const props = useComponentProps("header", _props);
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const route = useRoute();
-const { t } = useLocale();
+const { t, locale } = useLocale();
 const appConfig = useAppConfig();
 const [DefineLeftTemplate, ReuseLeftTemplate] = createReusableTemplate();
 const [DefineRightTemplate, ReuseRightTemplate] = createReusableTemplate();
@@ -117,8 +117,8 @@ function toggleOpen() {
 
   <Menu
     v-model:open="open"
-    :title="t('header.title')"
-    :description="t('header.description')"
+    :title="locale.messages.header?.title || t('header.open')"
+    :description="locale.messages.header?.description"
     v-bind="menuProps"
     :ui="{
   overlay: ui.overlay({ class: props.ui?.overlay }),