@nuxt/ui 2.21.0 → 2.22.0

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -20,13 +20,13 @@ declare const config: {
     };
     avatar: {
         base: string;
-        size: import("../../types/avatar").AvatarSize;
+        size: import("../../types/avatar.js").AvatarSize;
     };
     badge: {
         base: string;
-        color: import("../../types/badge").BadgeColor;
-        variant: import("../../types/badge").BadgeVariant;
-        size: import("../../types/badge").BadgeSize;
+        color: import("../../types/badge.js").BadgeColor;
+        variant: import("../../types/badge.js").BadgeVariant;
+        size: import("../../types/badge.js").BadgeSize;
     };
     divider: {
         wrapper: {
@@ -69,13 +69,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         avatar: {
             base: string;
-            size: import("../../types/avatar").AvatarSize;
+            size: import("../../types/avatar.js").AvatarSize;
         };
         badge: {
             base: string;
-            color: import("../../types/badge").BadgeColor;
-            variant: import("../../types/badge").BadgeVariant;
-            size: import("../../types/badge").BadgeSize;
+            color: import("../../types/badge.js").BadgeColor;
+            variant: import("../../types/badge.js").BadgeVariant;
+            size: import("../../types/badge.js").BadgeSize;
         };
         divider: {
             wrapper: {
@@ -106,7 +106,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    class: any;
     ui: {
         wrapper?: string;
         base?: string;
@@ -126,13 +125,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
         avatar?: DeepPartial<{
             base: string;
-            size: import("../../types/avatar").AvatarSize;
+            size: import("../../types/avatar.js").AvatarSize;
         }, any>;
         badge?: DeepPartial<{
             base: string;
-            color: import("../../types/badge").BadgeColor;
-            variant: import("../../types/badge").BadgeVariant;
-            size: import("../../types/badge").BadgeSize;
+            color: import("../../types/badge.js").BadgeColor;
+            variant: import("../../types/badge.js").BadgeVariant;
+            size: import("../../types/badge.js").BadgeSize;
         }, any>;
         divider?: DeepPartial<{
             wrapper: {
@@ -144,6 +143,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    class: any;
     links: VerticalNavigationLink[] | VerticalNavigationLink[][];
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -213,17 +213,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -396,17 +396,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -487,8 +487,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        size: import("../../types/avatar").AvatarSize;
-        class: any;
+        size: import("../../types/avatar.js").AvatarSize;
         ui: {
             wrapper?: string;
             background?: string;
@@ -553,11 +552,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             strategy?: Strategy;
         };
         as: string | Record<string, any>;
-        text: string;
         alt: string;
         icon: string;
+        class: any;
+        text: string;
         src: string | boolean;
-        chipColor: import("../../types/avatar").AvatarChipColor;
+        chipColor: import("../../types/avatar.js").AvatarChipColor;
         chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
         chipText: string | number;
         imgClass: string;
@@ -610,17 +610,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     UBadge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         size: {
-            type: PropType<import("../../types/badge").BadgeSize>;
+            type: PropType<import("../../types/badge.js").BadgeSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/badge").BadgeColor>;
+            type: PropType<import("../../types/badge.js").BadgeColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/badge").BadgeVariant>;
+            type: PropType<import("../../types/badge.js").BadgeVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -718,17 +718,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         trailingIconClass: import("vue").ComputedRef<string>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
-            type: PropType<import("../../types/badge").BadgeSize>;
+            type: PropType<import("../../types/badge.js").BadgeSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/badge").BadgeColor>;
+            type: PropType<import("../../types/badge.js").BadgeColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/badge").BadgeVariant>;
+            type: PropType<import("../../types/badge.js").BadgeVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -814,8 +814,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        size: import("../../types/badge").BadgeSize;
-        class: any;
+        size: import("../../types/badge.js").BadgeSize;
         ui: {
             base?: string;
             rounded?: string;
@@ -868,11 +867,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
-        color: import("../../types/badge").BadgeColor;
-        variant: import("../../types/badge").BadgeVariant;
+        color: import("../../types/badge.js").BadgeColor;
+        variant: import("../../types/badge.js").BadgeVariant;
         leading: boolean;
-        label: string | number;
         icon: string;
+        class: any;
+        label: string | number;
         leadingIcon: string;
         trailingIcon: string;
         trailing: boolean;
@@ -1126,9 +1126,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>> & Readonly<{}>, {
         type: string;
-        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        disabled: boolean;
         target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
+        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         activeClass: string;
         exactActiveClass: string;
         ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
@@ -1139,6 +1138,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         prefetchedClass: string;
         external: boolean;
         as: string;
+        disabled: boolean;
         active: boolean;
         exact: boolean;
         exactQuery: boolean | "partial";
@@ -1157,11 +1157,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: any;
         };
         avatar: {
-            type: PropType<import("../../types/avatar").Avatar>;
+            type: PropType<import("../../types/avatar.js").Avatar>;
             default: any;
         };
         size: {
-            type: PropType<import("../../types/divider").DividerSize>;
+            type: PropType<import("../../types/divider.js").DividerSize>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1224,7 +1224,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 avatar: {
                     base: string;
-                    size: import("../../types/avatar").AvatarSize;
+                    size: import("../../types/avatar.js").AvatarSize;
                 };
                 label: string;
                 default: {
@@ -1281,7 +1281,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             };
             label: string;
             default: {
@@ -1305,11 +1305,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: any;
         };
         avatar: {
-            type: PropType<import("../../types/avatar").Avatar>;
+            type: PropType<import("../../types/avatar.js").Avatar>;
             default: any;
         };
         size: {
-            type: PropType<import("../../types/divider").DividerSize>;
+            type: PropType<import("../../types/divider.js").DividerSize>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1372,7 +1372,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 };
                 avatar: {
                     base: string;
-                    size: import("../../types/avatar").AvatarSize;
+                    size: import("../../types/avatar.js").AvatarSize;
                 };
                 label: string;
                 default: {
@@ -1386,8 +1386,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>> & Readonly<{}>, {
         type: "solid" | "dotted" | "dashed";
-        size: import("../../types/divider").DividerSize;
-        class: any;
+        size: import("../../types/divider.js").DividerSize;
         ui: {
             wrapper?: DeepPartial<{
                 base: string;
@@ -1432,7 +1431,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
             avatar?: DeepPartial<{
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             }, any>;
             label?: string;
             default?: DeepPartial<{
@@ -1444,10 +1443,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
-        avatar: import("../../types/avatar").Avatar;
-        label: string;
+        avatar: import("../../types/avatar.js").Avatar;
         orientation: "horizontal" | "vertical";
         icon: string;
+        class: any;
+        label: string;
     }, {}, {
         UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
             name: {
@@ -1516,17 +1516,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: () => any;
             };
             size: {
-                type: PropType<import("../../types/avatar").AvatarSize>;
+                type: PropType<import("../../types/avatar.js").AvatarSize>;
                 default: () => string;
                 validator(value: string): boolean;
             };
             chipColor: {
-                type: PropType<import("../../types/avatar").AvatarChipColor>;
+                type: PropType<import("../../types/avatar.js").AvatarChipColor>;
                 default: () => any;
                 validator(value: string): boolean;
             };
             chipPosition: {
-                type: PropType<import("../../types/avatar").AvatarChipPosition>;
+                type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
                 default: () => string;
                 validator(value: string): boolean;
             };
@@ -1699,17 +1699,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: () => any;
             };
             size: {
-                type: PropType<import("../../types/avatar").AvatarSize>;
+                type: PropType<import("../../types/avatar.js").AvatarSize>;
                 default: () => string;
                 validator(value: string): boolean;
             };
             chipColor: {
-                type: PropType<import("../../types/avatar").AvatarChipColor>;
+                type: PropType<import("../../types/avatar.js").AvatarChipColor>;
                 default: () => any;
                 validator(value: string): boolean;
             };
             chipPosition: {
-                type: PropType<import("../../types/avatar").AvatarChipPosition>;
+                type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
                 default: () => string;
                 validator(value: string): boolean;
             };
@@ -1790,8 +1790,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: () => {};
             };
         }>> & Readonly<{}>, {
-            size: import("../../types/avatar").AvatarSize;
-            class: any;
+            size: import("../../types/avatar.js").AvatarSize;
             ui: {
                 wrapper?: string;
                 background?: string;
@@ -1856,11 +1855,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 strategy?: Strategy;
             };
             as: string | Record<string, any>;
-            text: string;
             alt: string;
             icon: string;
+            class: any;
+            text: string;
             src: string | boolean;
-            chipColor: import("../../types/avatar").AvatarChipColor;
+            chipColor: import("../../types/avatar.js").AvatarChipColor;
             chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
             chipText: string | number;
             imgClass: string;

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

@@ -118,7 +118,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }>, {
-    class: any;
     ui: {
         wrapper?: string;
         container?: string;
@@ -154,6 +153,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     popper: PopperOptions;
+    class: any;
     modelValue: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/overlays/Modal.vue

@@ -10,12 +10,12 @@
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
             <HDialogPanel
               :class="[
-                ui.base,
-                ui.background,
-                ui.ring,
-                ui.shadow,
-                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin]
-              ]"
+  ui.base,
+  ui.background,
+  ui.ring,
+  ui.shadow,
+  fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin]
+]"
             >
               <slot />
             </HDialogPanel>

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -161,9 +161,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onClose-prevented"?: (...args: any[]) => any;
     "onAfter-leave"?: (...args: any[]) => any;
 }>, {
-    class: any;
-    appear: boolean;
-    transition: boolean;
     ui: {
         wrapper?: string;
         inner?: string;
@@ -203,9 +200,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    transition: boolean;
+    appear: boolean;
     overlay: boolean;
     preventClose: boolean;
     fullscreen: boolean;
+    class: any;
     modelValue: boolean;
 }, {}, {
     HDialog: import("vue").DefineComponent<{

package/dist/runtime/components/overlays/Modals.client.vue

@@ -8,11 +8,9 @@
   />
 </template>
 
-<script lang="ts" setup>
-import { inject } from 'vue'
-import { useModal, modalInjectionKey } from '../../composables/useModal'
-
-const modalState = inject(modalInjectionKey)
-
-const { isOpen, reset } = useModal()
+<script setup>
+import { inject } from "vue";
+import { useModal, modalInjectionKey } from "../../composables/useModal";
+const modalState = inject(modalInjectionKey);
+const { isOpen, reset } = useModal();
 </script>

package/dist/runtime/components/overlays/Modals.client.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/overlays/Notification.vue

@@ -13,27 +13,27 @@
           <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
           <div :class="ui.inner">
-            <p v-if="(title || $slots.title)" :class="ui.title">
+            <p v-if="title || $slots.title" :class="ui.title">
               <slot name="title" :title="title">
                 {{ title }}
               </slot>
             </p>
-            <div v-if="(description || $slots.description)" :class="twMerge(ui.description, !title && !$slots.title && 'mt-0 leading-5')">
+            <div v-if="description || $slots.description" :class="twMerge(ui.description, !title && !$slots.title && ui.descriptionOnly)">
               <slot name="description" :description="description">
                 {{ description }}
               </slot>
             </div>
 
             <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton || {}, ...action }" @click.stop="onAction(action)" />
             </div>
           </div>
-          <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+          <div v-if="closeButton || !description && !$slots.description && actions.length" :class="twMerge(ui.actions, 'mt-0')">
             <template v-if="!description && !$slots.description && actions.length">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton || {}, ...action }" @click.stop="onAction(action)" />
             </template>
 
-            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
+            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton || {}, ...closeButton }" @click.stop="onClose" />
           </div>
         </div>
         <div v-if="timeout" :class="progressClass" :style="progressStyle" />