@nuxt/ui 3.1.3 → 3.2.0

package/dist/runtime/components/CommandPalette.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/command-palette";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
@@ -26,10 +26,13 @@ const props = defineProps({
   as: { type: null, required: false },
   icon: { type: String, required: false },
   selectedIcon: { type: String, required: false },
+  trailingIcon: { type: String, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: String, required: false },
+  back: { type: [Boolean, Object], required: false, default: true },
+  backIcon: { type: String, required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   labelKey: { type: String, required: false, default: "label" },
@@ -40,6 +43,7 @@ const props = defineProps({
   modelValue: { type: null, required: false, default: "" },
   defaultValue: { type: null, required: false },
   highlightOnHover: { type: Boolean, required: false },
+  selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false }
 });
@@ -48,7 +52,7 @@ const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "selectionBehavior"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading", "loadingIcon"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
 const fuse = computed(() => defu({}, props.fuse, {
@@ -60,7 +64,10 @@ const fuse = computed(() => defu({}, props.fuse, {
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
 }));
-const items = computed(() => props.groups?.filter((group) => {
+const history = ref([]);
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t("commandPalette.placeholder"));
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1]] : props.groups);
+const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`);
     return false;
@@ -69,7 +76,7 @@ const items = computed(() => props.groups?.filter((group) => {
     return false;
   }
   return true;
-}).flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
+})?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
 function getGroupWithItems(group, items2) {
   if (group?.postFilter && typeof group.postFilter === "function") {
@@ -86,7 +93,7 @@ function getGroupWithItems(group, items2) {
     })
   };
 }
-const groups = computed(() => {
+const filteredGroups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
@@ -97,37 +104,87 @@ const groups = computed(() => {
     return acc;
   }, {});
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = props.groups?.find((group2) => group2.id === id);
+    const group = groups.value?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
     return getGroupWithItems(group, items2);
   }).filter((group) => !!group);
-  const nonFuseGroups = props.groups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
   }, [...fuseGroups]);
 });
+const listboxRootRef = useTemplateRef("listboxRootRef");
+function navigate(item) {
+  if (!item.children?.length) {
+    return;
+  }
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    items: item.children
+  });
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function navigateBack() {
+  if (!history.value.length) {
+    return;
+  }
+  history.value.pop();
+  searchTerm.value = "";
+  listboxRootRef.value?.highlightFirstItem();
+}
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack();
+  }
+}
+function onSelect(e, item) {
+  if (item.children?.length) {
+    e.preventDefault();
+    navigate(item);
+  } else {
+    item.onSelect?.(e);
+  }
+}
 </script>
 
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
         variant="none"
         :autofocus="autofocus"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
       >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="typeof back === 'object' ? back : {}"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
         <template v-if="close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
-              size="md"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
@@ -141,8 +198,8 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey) }}
           </ListboxGroupLabel>
@@ -150,10 +207,10 @@ const groups = computed(() => {
           <ListboxItem
             v-for="(item, index) in group.items"
             :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
             :disabled="item.disabled"
             as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
           >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
               <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -184,13 +241,20 @@ const groups = computed(() => {
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="item.children && item.children.length > 0"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                         <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                       </span>
+
                       <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                     </slot>
 
-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                     </ListboxItemIndicator>
                   </span>

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

@@ -21,12 +21,17 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     loading?: boolean;
     disabled?: boolean;
     slot?: string;
+    /**
+     * The placeholder to display when the item has children.
+     */
+    placeholder?: string;
+    children?: CommandPaletteItem[];
     onSelect?(e?: Event): void;
     class?: any;
     ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
     id: string;
     label?: string;
     slot?: string;
@@ -45,7 +50,7 @@ export interface CommandPaletteGroup<T> {
      */
     highlightedIcon?: string;
 }
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -63,6 +68,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     selectedIcon?: string;
+    /**
+     * The icon displayed when an item has children.
+     * @defaultValue appConfig.ui.icons.chevronRight
+     * @IconifyIcon
+     */
+    trailingIcon?: string;
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -86,6 +97,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
      * @IconifyIcon
      */
     closeIcon?: string;
+    /**
+     * Display a button to navigate back in history.
+     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    back?: boolean | ButtonProps;
+    /**
+     * The icon displayed in the back button.
+     * @defaultValue appConfig.ui.icons.arrowLeft
+     * @IconifyIcon
+     */
+    backIcon?: string;
     groups?: G[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -108,21 +131,22 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
     class?: any;
     ui?: CommandPalette['slots'];
 }
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
     'update:open': [value: boolean];
 };
 type SlotProps<T> = (props: {
     item: T;
     index: number;
 }) => any;
-export type CommandPaletteSlots<G extends {
-    slot?: string;
-}, T extends {
-    slot?: string;
-}> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
     'empty'(props: {
         searchTerm?: string;
     }): any;
+    'back'(props: {
+        ui: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
     'close'(props: {
         ui: {
             [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;

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

@@ -31,31 +31,15 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
 declare const _default: <T extends ArrayOrNested<ContextMenuItem>>(__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<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & ContextMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ContextMenuSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -34,31 +34,15 @@ type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: DropdownMenuContentSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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 } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
@@ -20,7 +20,7 @@ const props = defineProps({
   } },
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
-  transform: { type: Boolean, required: false, default: true },
+  transform: { type: null, required: false, default: () => true },
   attach: { type: Boolean, required: false, default: true },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -80,9 +80,9 @@ const errors = ref([]);
 provide("form-errors", errors);
 const inputs = ref({});
 provide(formInputsInjectionKey, inputs);
-const dirtyFields = /* @__PURE__ */ new Set();
-const touchedFields = /* @__PURE__ */ new Set();
-const blurredFields = /* @__PURE__ */ new Set();
+const dirtyFields = reactive(/* @__PURE__ */ new Set());
+const touchedFields = reactive(/* @__PURE__ */ new Set());
+const blurredFields = reactive(/* @__PURE__ */ new Set());
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -205,6 +205,6 @@ defineExpose({
     :class="ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

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

@@ -1,5 +1,5 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, InferOutput } from '../types/form';
-export interface FormProps<S extends FormSchema> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, FormData } from '../types/form';
+export interface FormProps<S extends FormSchema, T extends boolean = true> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
@@ -27,7 +27,7 @@ export interface FormProps<S extends FormSchema> {
      * If true, schema transformations will be applied to the state on submit.
      * @defaultValue `true`
      */
-    transform?: boolean;
+    transform?: T;
     /**
      * If true, this form will attach to its parent Form (if any) and validate at the same time.
      * @defaultValue `true`
@@ -40,26 +40,27 @@ export interface FormProps<S extends FormSchema> {
      */
     loadingAuto?: boolean;
     class?: any;
-    onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export interface FormEmits<S extends FormSchema> {
-    (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void;
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
     (e: 'error', payload: FormErrorEvent): void;
 }
 export interface FormSlots {
     default(props?: {
         errors: FormError[];
+        loading: boolean;
     }): any;
 }
-declare const _default: <S extends FormSchema>(__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<{
+declare const _default: <S extends FormSchema, T extends boolean = true>(__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<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
-        readonly onSubmit?: ((payload: FormSubmitEvent<InferOutput<S>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<InferInput<S>>>): void;
+        readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S>;
+    emit: FormEmits<S, T>;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -301,11 +301,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
                 }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
                     $slots: Readonly<{
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     }> & {
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     };
@@ -465,11 +465,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
                 }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
                     $slots: Readonly<{
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     }> & {
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     };

package/dist/runtime/components/InputNumber.vue

@@ -43,13 +43,14 @@ const props = defineProps({
   id: { type: String, required: false },
   name: { type: String, required: false },
   formatOptions: { type: null, required: false },
-  disableWheelChange: { type: Boolean, required: false }
+  disableWheelChange: { type: Boolean, required: false },
+  invertWheelChange: { type: Boolean, required: false }
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
 const { t, code: codeLocale } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange"), emits);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const locale = computed(() => props.locale || codeLocale.value);

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

@@ -4,7 +4,7 @@ import theme from '#build/ui/input-number';
 import type { ButtonProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>;
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'