@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,11 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tabs'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps } from '../types'
 import type { DynamicSlots, PartialString } from '../types/utils'
 
@@ -11,7 +13,7 @@ const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme>
 
 const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
 
-export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+export interface TabsItem {
   label?: string
   icon?: string
   avatar?: AvatarProps
@@ -19,11 +21,12 @@ export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
   content?: string
   /** A unique value for the tab item. Defaults to the index. */
   value?: string | number
+  disabled?: boolean
 }
 
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -42,7 +45,12 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    * The content of the tabs, can be disabled to prevent rendering the content.
    * @defaultValue true
    */
-  content?: boolean | Omit<TabsContentProps, 'as' | 'asChild' | 'value'>
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
   class?: any
   ui?: PartialString<typeof tabs.slots>
 }
@@ -57,24 +65,45 @@ export type TabsSlots<T extends { slot?: string }> = {
   trailing: SlotProps<T>
   content: SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({
+  defaultProps: {
+    items: [{
+      label: 'Tab1',
+      avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' },
+      content: 'This is the content shown for Tab1'
+    }, {
+      label: 'Tab2',
+      icon: 'i-lucide-user',
+      content: 'And, this is the content for Tab2'
+    }, {
+      label: 'Tab3',
+      icon: 'i-lucide-bell',
+      content: 'Finally, this is the content for Tab3'
+    }]
+  }
+})
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">
-import { computed, toRef } from 'vue'
-import { defu } from 'defu'
-import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { get } from '../utils'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<TabsProps<T>>(), {
   content: true,
   defaultValue: '0',
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  unmountOnHide: true,
+  labelKey: 'label'
 })
 const emits = defineEmits<TabsEmits>()
 const slots = defineSlots<TabsSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'activationMode', 'modelValue'), emits)
-const contentProps = toRef(() => defu(props.content || {}, { forceMount: true }) as TabsContentProps)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
 
 const ui = computed(() => tabs({
   color: props.color,
@@ -91,12 +120,12 @@ const ui = computed(() => tabs({
 
       <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: props.ui?.trigger })">
         <slot name="leading" :item="item" :index="index">
-          <UAvatar v-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-          <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
 
-        <span v-if="item.label || !!slots.default" :class="ui.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ item.label }}</slot>
+        <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
         </span>
 
         <slot name="trailing" :item="item" :index="index" />
@@ -104,7 +133,7 @@ const ui = computed(() => tabs({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" v-bind="contentProps" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: props.ui?.content })">
         <slot :name="item.slot || 'content'" :item="item" :index="index">
           {{ item.content }}
         </slot>

package/dist/runtime/components/Textarea.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/textarea'
+import { tv } from '../utils/tv'
 
 const appConfig = _appConfig as AppConfig & { ui: { textarea: Partial<typeof theme> } }
 
@@ -11,6 +12,11 @@ const textarea = tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })
 type TextareaVariants = VariantProps<typeof textarea>
 
 export interface TextareaProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
   id?: string
   name?: string
   /** The placeholder text when the textarea is empty. */
@@ -44,6 +50,7 @@ export interface TextareaSlots {
 
 <script setup lang="ts">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { Primitive } from 'reka-ui'
 import { useFormField } from '../composables/useFormField'
 import { looseToNumber } from '../utils'
 
@@ -59,7 +66,7 @@ const emits = defineEmits<TextareaEmits>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 
 const ui = computed(() => textarea({
   color: color.value,
@@ -151,7 +158,7 @@ function autoResize() {
   }
 }
 
-watch(() => modelValue, () => {
+watch(modelValue, () => {
   nextTick(autoResize)
 })
 
@@ -167,7 +174,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <textarea
       :id="id"
       ref="textareaRef"
@@ -185,5 +192,5 @@ onMounted(() => {
     />
 
     <slot />
-  </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Toast.vue

@@ -1,9 +1,11 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
@@ -27,11 +29,12 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * Display a list of actions:
    * - under the title and description if multiline
    * - next to the close button if not multiline
+   * `{ size: 'xs' }`{lang="ts-type"}
    */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.
-   * `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
   close?: ButtonProps | boolean
@@ -53,15 +56,19 @@ export interface ToastSlots {
   actions(props?: {}): any
   close(props: { ui: any }): any
 }
+
+extendDevtoolsMeta<ToastProps>({ ignore: true })
 </script>
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
+import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true
@@ -69,7 +76,9 @@ const props = withDefaults(defineProps<ToastProps>(), {
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
 
+const { t } = useLocale()
 const appConfig = useAppConfig()
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
 
 const multiline = computed(() => !!props.title && !!props.description)
@@ -145,9 +154,9 @@ defineExpose({
             v-if="close"
             :icon="closeIcon || appConfig.ui.icons.close"
             size="md"
-            color="gray"
+            color="neutral"
             variant="link"
-            aria-label="Close"
+            :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : undefined"
             :class="ui.close({ class: props.ui?.close })"
             @click.stop

package/dist/runtime/components/Toaster.vue

@@ -1,9 +1,11 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { ToastProviderProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { ToastProviderProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toaster'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
 const appConfig = _appConfig as AppConfig & { ui: { toaster: Partial<typeof theme> } }
 
@@ -18,6 +20,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   expand?: boolean
+  /**
+   * Render the toaster in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
   class?: any
   ui?: Partial<typeof toaster.slots>
 }
@@ -25,18 +32,25 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
   default(props?: {}): any
 }
+
+export default {
+  name: 'Toaster'
+}
+
+extendDevtoolsMeta({ example: 'ToasterExample' })
 </script>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
+import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useToast } from '../composables/useToast'
-import UToast from './Toast.vue'
 import { omit } from '../utils'
+import UToast from './Toast.vue'
 
 const props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,
+  portal: true,
   duration: 5000
 })
 defineSlots<ToasterSlots>()
@@ -113,18 +127,20 @@ function getOffset(index: number) {
       @click="toast.click && toast.click(toast)"
     />
 
-    <ToastViewport
-      :data-expanded="expanded"
-      :class="ui.viewport({ class: props.class })"
-      :style="{
-        '--scale-factor': '0.05',
-        '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
-        '--gap': position?.startsWith('top') ? '16px' : '-16px',
-        '--front-height': `${frontHeight}px`,
-        '--height': `${height}px`
-      }"
-      @mouseenter="hovered = true"
-      @mouseleave="hovered = false"
-    />
+    <ToastPortal :disabled="!portal">
+      <ToastViewport
+        :data-expanded="expanded"
+        :class="ui.viewport({ class: [props.class, props.ui?.viewport] })"
+        :style="{
+          '--scale-factor': '0.05',
+          '--translate-factor': position?.startsWith('top') ? '1px' : '-1px',
+          '--gap': position?.startsWith('top') ? '16px' : '-16px',
+          '--front-height': `${frontHeight}px`,
+          '--height': `${height}px`
+        }"
+        @mouseenter="hovered = true"
+        @mouseleave="hovered = false"
+      />
+    </ToastPortal>
   </ToastProvider>
 </template>

package/dist/runtime/components/Tooltip.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof theme> } }
@@ -17,7 +18,7 @@ export interface TooltipProps extends TooltipRootProps {
   kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The content of the tooltip.
-   * @defaultValue { side: 'bottom', sideOffset: 8 }
+   * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
   content?: Omit<TooltipContentProps, 'as' | 'asChild'>
   /**
@@ -40,12 +41,14 @@ export interface TooltipSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
+
+extendDevtoolsMeta({ example: 'TooltipExample', defaultProps: { text: 'Hello world!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import UKbd from './Kbd.vue'
 
@@ -56,7 +59,7 @@ const emits = defineEmits<TooltipEmits>()
 const slots = defineSlots<TooltipSlots>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration', 'disableHoverableContent', 'disableClosingTrigger', 'disabled', 'ignoreNonKeyboardFocus'), emits)
-const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as TooltipContentProps)
 const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -67,12 +70,12 @@ const ui = computed(() => tooltip({
 
 <template>
   <TooltipRoot v-slot="{ open }" v-bind="rootProps">
-    <TooltipTrigger v-if="!!slots.default" as-child>
+    <TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 
     <TooltipPortal :disabled="!portal">
-      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [props.class, props.ui?.content] })">
+      <TooltipContent v-bind="contentProps" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })">
         <slot name="content">
           <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 

package/dist/runtime/composables/defineLocale.d.ts

@@ -0,0 +1,9 @@
+import type { Locale, Direction, Messages } from '../types/locale';
+interface DefineLocaleOptions {
+    name: string;
+    code: string;
+    dir?: Direction;
+    messages: Messages;
+}
+export declare function defineLocale(options: DefineLocaleOptions): Locale;
+export {};

package/dist/runtime/composables/defineLocale.js

@@ -0,0 +1,4 @@
+import { defu } from "defu";
+export function defineLocale(options) {
+  return defu(options, { dir: "ltr" });
+}

package/dist/runtime/composables/defineShortcuts.d.ts

@@ -11,5 +11,5 @@ export interface ShortcutsOptions {
     chainDelay?: number;
 }
 export declare function extractShortcuts(items: any[] | any[][]): Record<string, Handler>;
-export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): void;
+export declare function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): import("@vueuse/core").Fn;
 export {};

package/dist/runtime/composables/defineShortcuts.js

@@ -1,15 +1,14 @@
 import { ref, computed, toValue } from "vue";
 import { useEventListener, useActiveElement, useDebounceFn } from "@vueuse/core";
-import { useKbd } from "../composables/useKbd.js";
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/;
 const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/;
 export function extractShortcuts(items) {
   const shortcuts = {};
   function traverse(items2) {
     items2.forEach((item) => {
-      if (item.kbds?.length && (item.select || item.click)) {
+      if (item.kbds?.length && (item.onSelect || item.onClick)) {
         const shortcutKey = item.kbds.join("_");
-        shortcuts[shortcutKey] = item.select || item.click;
+        shortcuts[shortcutKey] = item.onSelect || item.onClick;
       }
       if (item.children) {
         traverse(item.children.flat());
@@ -28,7 +27,6 @@ export function defineShortcuts(config, options = {}) {
     chainedInputs.value.splice(0, chainedInputs.value.length);
   };
   const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800);
-  const { macOS } = useKbd();
   const activeElement = useActiveElement();
   const onKeyDown = (e) => {
     if (!e.key) {
@@ -114,10 +112,6 @@ export function defineShortcuts(config, options = {}) {
         };
       }
       shortcut.chained = chained;
-      if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
-        shortcut.metaKey = false;
-        shortcut.ctrlKey = true;
-      }
       if (typeof shortcutConfig === "function") {
         shortcut.handler = shortcutConfig;
       } else if (typeof shortcutConfig === "object") {
@@ -137,5 +131,5 @@ export function defineShortcuts(config, options = {}) {
       return shortcut;
     }).filter(Boolean);
   });
-  useEventListener("keydown", onKeyDown);
+  return useEventListener("keydown", onKeyDown);
 }

package/dist/runtime/composables/extendDevtoolsMeta.d.ts

@@ -0,0 +1,7 @@
+export type DevtoolsMeta<T> = {
+    defaultProps?: T;
+    example?: string;
+    ignore?: boolean;
+    ignoreProps?: string[];
+};
+export declare function extendDevtoolsMeta<T>(_meta: DevtoolsMeta<T>): void;

package/dist/runtime/composables/extendDevtoolsMeta.js

@@ -0,0 +1,2 @@
+export function extendDevtoolsMeta(_meta) {
+}

package/dist/runtime/composables/useAvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import { type ComputedRef, type InjectionKey } from 'vue';
-import type { AvatarGroupProps } from '../types/index.js';
+import type { AvatarGroupProps } from '../types';
 export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<{
     size: AvatarGroupProps['size'];
 }>>;

package/dist/runtime/composables/useButtonGroup.d.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, ComputedRef } from 'vue';
-import type { ButtonGroupProps } from '../components/ButtonGroup.vue.js';
-import type { GetObjectField } from '../types/utils.js';
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue';
+import type { GetObjectField } from '../types/utils';
 export declare const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
     size: ButtonGroupProps['size'];
     orientation: ButtonGroupProps['orientation'];

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -1,7 +1,10 @@
 import { type MaybeRefOrGetter } from 'vue';
+import type { AvatarProps } from '../types';
 export interface UseComponentIconsProps {
     /** Display an icon based on the `leading` and `trailing` props. */
     icon?: string;
+    /** Display an avatar on the left side. */
+    avatar?: AvatarProps;
     /** When `true`, the icon will be displayed on the left side. */
     leading?: boolean;
     /** Display an icon on the left side. */

package/dist/runtime/composables/useFormField.d.ts

@@ -1,14 +1,13 @@
 import { type InjectionKey, type Ref, type ComputedRef } from 'vue';
 import { type UseEventBusReturn } from '@vueuse/core';
-import type { FormFieldProps } from '../types/index.js';
-import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form.js';
-import type { GetObjectField } from '../types/utils.js';
+import type { FormFieldProps } from '../types';
+import type { FormEvent, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form';
+import type { GetObjectField } from '../types/utils';
 type Props<T> = {
     id?: string;
     name?: string;
     size?: GetObjectField<T, 'size'>;
     color?: GetObjectField<T, 'color'>;
-    eagerValidation?: boolean;
     legend?: string;
     highlight?: boolean;
     disabled?: boolean;
@@ -17,9 +16,14 @@ export declare const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjec
 export declare const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent, string>>;
 export declare const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>>;
 export declare const inputIdInjectionKey: InjectionKey<Ref<string | undefined>>;
-export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, string>>>;
+export declare const formInputsInjectionKey: InjectionKey<Ref<Record<string, {
+    id?: string;
+    pattern?: RegExp;
+}>>>;
+export declare const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>>;
 export declare function useFormField<T>(props?: Props<T>, opts?: {
     bind?: boolean;
+    deferInputValidation?: boolean;
 }): {
     id: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;

package/dist/runtime/composables/useFormField.js

@@ -5,6 +5,7 @@ export const formBusInjectionKey = Symbol("nuxt-ui.form-events");
 export const formFieldInjectionKey = Symbol("nuxt-ui.form-field");
 export const inputIdInjectionKey = Symbol("nuxt-ui.input-id");
 export const formInputsInjectionKey = Symbol("nuxt-ui.form-inputs");
+export const formLoadingInjectionKey = Symbol("nuxt-ui.form-loading");
 export function useFormField(props, opts) {
   const formOptions = inject(formOptionsInjectionKey, void 0);
   const formBus = inject(formBusInjectionKey, void 0);
@@ -18,25 +19,28 @@ export function useFormField(props, opts) {
       inputId.value = props?.id;
     }
     if (formInputs && formField.value.name && inputId.value) {
-      formInputs.value[formField.value.name] = inputId.value;
+      formInputs.value[formField.value.name] = { id: inputId.value, pattern: formField.value.errorPattern };
     }
   }
-  const blurred = ref(false);
+  const touched = ref(false);
   function emitFormEvent(type, name) {
     if (formBus && formField && name) {
       formBus.emit({ type, name });
     }
   }
   function emitFormBlur() {
+    touched.value = true;
     emitFormEvent("blur", formField?.value.name);
-    blurred.value = true;
   }
   function emitFormChange() {
+    touched.value = true;
     emitFormEvent("change", formField?.value.name);
   }
   const emitFormInput = useDebounceFn(
     () => {
-      emitFormEvent("input", formField?.value.name);
+      if (!opts?.deferInputValidation || touched.value || formField?.value.eagerValidation) {
+        emitFormEvent("input", formField?.value.name);
+      }
     },
     formField?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
   );

package/dist/runtime/composables/useKbd.d.ts

@@ -1,10 +1,16 @@
+type KbdKeysSpecificMap = {
+    meta: string;
+    alt: string;
+    ctrl: string;
+};
 export declare const kbdKeysMap: {
     meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
     command: string;
     shift: string;
-    ctrl: string;
     option: string;
-    alt: string;
     enter: string;
     delete: string;
     backspace: string;
@@ -21,8 +27,9 @@ export declare const kbdKeysMap: {
     end: string;
 };
 export type KbdKey = keyof typeof kbdKeysMap;
+export type KbdKeySpecific = keyof KbdKeysSpecificMap;
 export declare const useKbd: () => {
     macOS: import("vue").ComputedRef<false | "" | RegExpMatchArray | null | undefined>;
-    metaSymbol: import("vue").Ref<string, string>;
     getKbdKey: (value?: KbdKey | string) => string | undefined;
 };
+export {};