@nuxt/ui 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/runtime/components/Stepper.vue

@@ -18,6 +18,9 @@ export interface StepperItem {
   value?: string | number
   title?: string
   description?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   content?: string
   disabled?: boolean
@@ -30,8 +33,18 @@ export interface StepperProps<T extends StepperItem> extends Pick<StepperRootPro
    */
   as?: any
   items: T[]
+  /**
+   * @defaultValue 'md'
+   */
   size?: StepperVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: StepperVariants['color']
+  /**
+   * The orientation of the stepper.
+   * @defaultValue 'horizontal'
+   */
   orientation?: StepperVariants['orientation']
   /**
    * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.

package/dist/runtime/components/Switch.vue

@@ -19,18 +19,31 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SwitchVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SwitchVariants['size']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
-  /** Display an icon when the switch is checked. */
+  /**
+   * Display an icon when the switch is checked.
+   * @IconifyIcon
+   */
   checkedIcon?: string
-  /** Display an icon when the switch is unchecked. */
+  /**
+   * Display an icon when the switch is unchecked.
+   * @IconifyIcon
+   */
   uncheckedIcon?: string
   label?: string
   description?: string

package/dist/runtime/components/Table.vue

@@ -82,7 +82,13 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
   sticky?: boolean
   /** Whether the table should be in loading state. */
   loading?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
   loadingColor?: TableVariants['loadingColor']
+  /**
+   * @defaultValue 'carousel'
+   */
   loadingAnimation?: TableVariants['loadingAnimation']
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
@@ -155,6 +161,7 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
 export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
+  loading: (props?: {}) => any
   caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
@@ -169,7 +176,7 @@ import { reactiveOmit } from '@vueuse/core'
 import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
-defineSlots<TableSlots<T>>()
+const slots = defineSlots<TableSlots<T>>()
 
 const { t } = useLocale()
 
@@ -353,7 +360,13 @@ defineExpose({
           </template>
         </template>
 
-        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-else-if="loading && !!slots['loading']">
+          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+            <slot name="loading" />
+          </td>
+        </tr>
+
+        <tr v-else>
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ t('table.noData') }}

package/dist/runtime/components/Tabs.vue

@@ -14,6 +14,9 @@ const tabs = tv({ extend: tv(theme), ...(appConfigTabs.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   slot?: string
@@ -32,8 +35,17 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    */
   as?: any
   items?: T[]
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TabsVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
   variant?: TabsVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TabsVariants['size']
   /**
    * The orientation of the tabs.

package/dist/runtime/components/Textarea.vue

@@ -22,8 +22,17 @@ export interface TextareaProps {
   name?: string
   /** The placeholder text when the textarea is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TextareaVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: TextareaVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TextareaVariants['size']
   required?: boolean
   autofocus?: boolean
@@ -65,7 +74,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
 defineSlots<TextareaSlots>()
 const emits = defineEmits<TextareaEmits>()
 
-const [modelValue, modelModifiers] = defineModel<string | number>()
+const [modelValue, modelModifiers] = defineModel<string | number | null>()
 
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 
@@ -85,15 +94,19 @@ function autoFocus() {
 }
 
 // Custom function to handle the v-model properties
-function updateInput(value: string) {
+function updateInput(value: string | null) {
   if (modelModifiers.trim) {
-    value = value.trim()
+    value = value?.trim() ?? null
   }
 
   if (modelModifiers.number) {
     value = looseToNumber(value)
   }
 
+  if (modelModifiers.nullify) {
+    value ||= null
+  }
+
   modelValue.value = value
   emitFormInput()
 }

package/dist/runtime/components/Toast.vue

@@ -22,9 +22,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   as?: any
   title?: StringOrVNode
   description?: StringOrVNode
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:
@@ -42,6 +52,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   class?: any

package/dist/runtime/components/Toaster.vue

@@ -13,6 +13,10 @@ const toaster = tv({ extend: tv(theme), ...(appConfigToaster.ui?.toaster || {})
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'bottom-right'
+   */
   position?: ToasterVariants['position']
   /**
    * Expand the toasts to show multiple toasts at once.

package/dist/runtime/components/Tree.vue

@@ -14,8 +14,14 @@ const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
 type TreeVariants = VariantProps<typeof tree>
 
 export type TreeItem = {
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   label?: string
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   defaultExpanded?: boolean
   disabled?: boolean
@@ -32,7 +38,13 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
    * @defaultValue 'ul'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TreeVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TreeVariants['size']
   /**
    * The key used to get the value from the item.
@@ -47,16 +59,19 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
   /**
    * The icon displayed on the right side of a parent node.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when a parent node is expanded.
    * @defaultValue appConfig.ui.icons.folderOpen
+   * @IconifyIcon
    */
   expandedIcon?: string
   /**
    * The icon displayed when a parent node is collapsed.
    * @defaultValue appConfig.ui.icons.folder
+   * @IconifyIcon
    */
   collapsedIcon?: string
   items?: T[]

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

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

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

@@ -1,23 +1,33 @@
 import { type MaybeRefOrGetter } from 'vue';
 import type { AvatarProps } from '../types';
 export interface UseComponentIconsProps {
-    /** Display an icon based on the `leading` and `trailing` props. */
+    /**
+     * Display an icon based on the `leading` and `trailing` props.
+     * @IconifyIcon
+     */
     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. */
+    /**
+     * Display an icon on the left side.
+     * @IconifyIcon
+     */
     leadingIcon?: string;
     /** When `true`, the icon will be displayed on the right side. */
     trailing?: boolean;
-    /** Display an icon on the right side. */
+    /**
+     * Display an icon on the right side.
+     * @IconifyIcon
+     */
     trailingIcon?: string;
     /** When `true`, the loading icon will be displayed. */
     loading?: boolean;
     /**
      * The icon when the `loading` prop is `true`.
      * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
      */
     loadingIcon?: string;
 }

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

@@ -1,4 +1,4 @@
 import type { InjectionKey, Ref } from 'vue';
-import type { Locale } from '../types/locale';
-export declare const localeContextInjectionKey: InjectionKey<Ref<Locale | undefined>>;
-export declare const useLocale: (localeOverrides?: Ref<Locale | undefined>) => import("../utils/locale").LocaleContext;
+import type { Locale, Messages } from '../types/locale';
+export declare const localeContextInjectionKey: InjectionKey<Ref<Locale<unknown> | undefined>>;
+export declare const useLocale: (localeOverrides?: Ref<Locale<Messages> | undefined>) => import("../utils/locale").LocaleContext<Messages>;

package/dist/runtime/composables/useLocale.js

@@ -1,10 +1,10 @@
-import { computed, inject, ref } from "vue";
+import { computed, inject, toRef } from "vue";
+import { createSharedComposable } from "@vueuse/core";
 import { buildLocaleContext } from "../utils/locale.js";
 import en from "../locale/en.js";
-import { createSharedComposable } from "@vueuse/core";
 export const localeContextInjectionKey = Symbol("nuxt-ui.locale-context");
 const _useLocale = (localeOverrides) => {
-  const locale = localeOverrides || inject(localeContextInjectionKey, ref());
+  const locale = localeOverrides || toRef(inject(localeContextInjectionKey));
   return buildLocaleContext(computed(() => locale.value || en));
 };
 export const useLocale = createSharedComposable(_useLocale);

package/dist/runtime/locale/ar.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/az.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/bn.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/cs.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/da.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/de.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/el.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/en.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/es.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/et.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/fa_ir.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/fi.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/fr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/he.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/hi.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/hu.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/id.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/index.d.ts

@@ -5,13 +5,15 @@ export { default as cs } from './cs';
 export { default as da } from './da';
 export { default as de } from './de';
 export { default as el } from './el';
-export { default as et } from './et';
 export { default as en } from './en';
 export { default as es } from './es';
+export { default as et } from './et';
 export { default as fa_ir } from './fa_ir';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as he } from './he';
 export { default as hi } from './hi';
+export { default as hu } from './hu';
 export { default as id } from './id';
 export { default as it } from './it';
 export { default as ja } from './ja';
@@ -31,4 +33,3 @@ export { default as uk } from './uk';
 export { default as vi } from './vi';
 export { default as zh_cn } from './zh_cn';
 export { default as zh_tw } from './zh_tw';
-export { default as he } from './he';

package/dist/runtime/locale/index.js

@@ -5,13 +5,15 @@ export { default as cs } from "./cs.js";
 export { default as da } from "./da.js";
 export { default as de } from "./de.js";
 export { default as el } from "./el.js";
-export { default as et } from "./et.js";
 export { default as en } from "./en.js";
 export { default as es } from "./es.js";
+export { default as et } from "./et.js";
 export { default as fa_ir } from "./fa_ir.js";
 export { default as fi } from "./fi.js";
 export { default as fr } from "./fr.js";
+export { default as he } from "./he.js";
 export { default as hi } from "./hi.js";
+export { default as hu } from "./hu.js";
 export { default as id } from "./id.js";
 export { default as it } from "./it.js";
 export { default as ja } from "./ja.js";
@@ -31,4 +33,3 @@ export { default as uk } from "./uk.js";
 export { default as vi } from "./vi.js";
 export { default as zh_cn } from "./zh_cn.js";
 export { default as zh_tw } from "./zh_tw.js";
-export { default as he } from "./he.js";

package/dist/runtime/locale/it.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ja.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/km.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ko.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/nb_no.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/nl.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/pl.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/pt.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/pt_br.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/ru.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/sk.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/sv.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/th.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/tr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/uk.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/vi.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/zh_cn.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/locale/zh_tw.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("../types").Locale;
+import type { Messages } from '../types';
+declare const _default: import("../types").Locale<Messages>;
 export default _default;

package/dist/runtime/plugins/colors.js

@@ -41,5 +41,7 @@ export default defineNuxtPlugin(() => {
       innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))"
     }];
   }
-  useHead(headData);
+  if (!nuxtApp.isVue) {
+    useHead(headData);
+  }
 });