@nuxt/ui 2.21.0 → 2.22.0

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

@@ -218,7 +218,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose?: (...args: any[]) => any;
     onOpen?: (...args: any[]) => any;
 }>, {
-    class: any;
     ui: {
         wrapper?: string;
         container?: string;
@@ -245,6 +244,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    class: any;
     defaultOpen: boolean;
     unmount: boolean;
     items: AccordionItem[];
@@ -428,17 +428,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         size: {
-            type: PropType<import("../../types/button").ButtonSize>;
+            type: PropType<import("../../types/button.js").ButtonSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/button").ButtonColor>;
+            type: PropType<import("../../types/button.js").ButtonColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/button").ButtonVariant>;
+            type: PropType<import("../../types/button.js").ButtonVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -747,17 +747,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         size: {
-            type: PropType<import("../../types/button").ButtonSize>;
+            type: PropType<import("../../types/button.js").ButtonSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/button").ButtonColor>;
+            type: PropType<import("../../types/button.js").ButtonColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/button").ButtonVariant>;
+            type: PropType<import("../../types/button.js").ButtonVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -949,10 +949,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>> & Readonly<{}>, {
         type: string;
-        size: import("../../types/button").ButtonSize;
-        class: any;
-        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        disabled: boolean;
+        size: import("../../types/button.js").ButtonSize;
         ui: {
             base?: string;
             font?: string;
@@ -1037,10 +1034,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
-        color: import("../../types/button").ButtonColor;
-        variant: import("../../types/button").ButtonVariant;
+        color: import("../../types/button.js").ButtonColor;
+        variant: import("../../types/button.js").ButtonVariant;
         truncate: 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";
@@ -1051,12 +1049,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         prefetchedClass: string;
         external: boolean;
         leading: boolean;
+        disabled: boolean;
         href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         rel: any;
-        label: string;
         icon: string;
+        class: any;
         block: boolean;
         square: boolean;
+        label: string;
         loading: boolean;
         padded: boolean;
         loadingIcon: string;
@@ -1312,9 +1312,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";
@@ -1325,6 +1324,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";

package/dist/runtime/components/elements/Alert.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
-    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
+    <div class="flex" :class="[ui.gap, { 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }]">
       <slot name="icon" :icon="icon">
         <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       </slot>
@@ -9,12 +9,12 @@
       </slot>
 
       <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>
@@ -22,18 +22,18 @@
 
         <div v-if="(description || $slots.description) && (actions.length || $slots.actions)" :class="ui.actions">
           <slot name="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)" />
           </slot>
         </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 || $slots.actions)">
           <slot name="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)" />
           </slot>
         </template>
 
-        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton || {}, ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -5,6 +5,7 @@ declare const config: {
     inner: string;
     title: string;
     description: string;
+    descriptionOnly: string;
     actions: string;
     shadow: string;
     rounded: string;
@@ -15,7 +16,7 @@ declare const config: {
     };
     avatar: {
         base: string;
-        size: import("../../types/avatar").AvatarSize;
+        size: import("../../types/avatar.js").AvatarSize;
     };
     color: {
         white: {
@@ -34,9 +35,9 @@ declare const config: {
         icon: any;
         closeButton: any;
         actionButton: {
-            size: import("../../types/button").ButtonSize;
-            color: import("../../types/button").ButtonColor;
-            variant: import("../../types/button").ButtonVariant;
+            size: import("../../types/button.js").ButtonSize;
+            color: import("../../types/button.js").ButtonColor;
+            variant: import("../../types/button.js").ButtonVariant;
         };
     };
 };
@@ -91,6 +92,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         inner: string;
         title: string;
         description: string;
+        descriptionOnly: string;
         actions: string;
         shadow: string;
         rounded: string;
@@ -101,7 +103,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         avatar: {
             base: string;
-            size: import("../../types/avatar").AvatarSize;
+            size: import("../../types/avatar.js").AvatarSize;
         };
         color: {
             white: {
@@ -120,9 +122,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             icon: any;
             closeButton: any;
             actionButton: {
-                size: import("../../types/button").ButtonSize;
-                color: import("../../types/button").ButtonColor;
-                variant: import("../../types/button").ButtonVariant;
+                size: import("../../types/button.js").ButtonSize;
+                color: import("../../types/button.js").ButtonColor;
+                variant: import("../../types/button.js").ButtonVariant;
             };
         };
     }>;
@@ -180,12 +182,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     onClose?: (...args: any[]) => any;
 }>, {
-    class: any;
     ui: {
         wrapper?: string;
         inner?: string;
         title?: string;
         description?: string;
+        descriptionOnly?: string;
         actions?: string;
         shadow?: string;
         rounded?: string;
@@ -196,7 +198,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>;
         color?: DeepPartial<{
             white: {
@@ -215,9 +217,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             icon: any;
             closeButton: any;
             actionButton: {
-                size: import("../../types/button").ButtonSize;
-                color: import("../../types/button").ButtonColor;
-                variant: import("../../types/button").ButtonVariant;
+                size: import("../../types/button.js").ButtonSize;
+                color: import("../../types/button.js").ButtonColor;
+                variant: import("../../types/button.js").ButtonVariant;
             };
         }, any>;
     } & {
@@ -233,6 +235,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     icon: string;
     closeButton: Button;
     actions: AlertAction[];
+    class: any;
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         name: {
@@ -301,17 +304,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;
         };
@@ -484,17 +487,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;
         };
@@ -575,8 +578,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;
@@ -641,11 +643,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;
@@ -722,17 +725,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         size: {
-            type: PropType<import("../../types/button").ButtonSize>;
+            type: PropType<import("../../types/button.js").ButtonSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/button").ButtonColor>;
+            type: PropType<import("../../types/button.js").ButtonColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/button").ButtonVariant>;
+            type: PropType<import("../../types/button.js").ButtonVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1041,17 +1044,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         size: {
-            type: PropType<import("../../types/button").ButtonSize>;
+            type: PropType<import("../../types/button.js").ButtonSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         color: {
-            type: PropType<import("../../types/button").ButtonColor>;
+            type: PropType<import("../../types/button.js").ButtonColor>;
             default: () => string;
             validator(value: string): boolean;
         };
         variant: {
-            type: PropType<import("../../types/button").ButtonVariant>;
+            type: PropType<import("../../types/button.js").ButtonVariant>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1243,10 +1246,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
     }>> & Readonly<{}>, {
         type: string;
-        size: import("../../types/button").ButtonSize;
-        class: any;
-        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        disabled: boolean;
+        size: import("../../types/button.js").ButtonSize;
         ui: {
             base?: string;
             font?: string;
@@ -1331,10 +1331,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
-        color: import("../../types/button").ButtonColor;
-        variant: import("../../types/button").ButtonVariant;
+        color: import("../../types/button.js").ButtonColor;
+        variant: import("../../types/button.js").ButtonVariant;
         truncate: 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";
@@ -1345,12 +1346,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         prefetchedClass: string;
         external: boolean;
         leading: boolean;
+        disabled: boolean;
         href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         rel: any;
-        label: string;
         icon: string;
+        class: any;
         block: boolean;
         square: boolean;
+        label: string;
         loading: boolean;
         padded: boolean;
         loadingIcon: string;
@@ -1606,9 +1609,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";
@@ -1619,6 +1621,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";

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -240,7 +240,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     size: AvatarSize;
-    class: any;
     ui: {
         wrapper?: string;
         background?: string;
@@ -305,9 +304,10 @@ 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: AvatarChipColor;
     chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";

package/dist/runtime/components/elements/Badge.vue.d.ts

@@ -161,7 +161,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     size: BadgeSize;
-    class: any;
     ui: {
         base?: string;
         rounded?: string;
@@ -217,8 +216,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     color: BadgeColor;
     variant: BadgeVariant;
     leading: boolean;
-    label: string | number;
     icon: string;
+    class: any;
+    label: string | number;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -470,9 +470,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     type: string;
     size: ButtonSize;
-    class: any;
-    to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-    disabled: boolean;
     ui: {
         base?: string;
         font?: string;
@@ -561,6 +558,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     variant: ButtonVariant;
     truncate: 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";
@@ -571,12 +569,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     prefetchedClass: string;
     external: boolean;
     leading: boolean;
+    disabled: boolean;
     href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
     rel: any;
-    label: string;
     icon: string;
+    class: any;
     block: boolean;
     square: boolean;
+    label: string;
     loading: boolean;
     padded: boolean;
     loadingIcon: string;
@@ -832,9 +832,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";
@@ -845,6 +844,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";

package/dist/runtime/components/elements/Carousel.vue

@@ -43,9 +43,9 @@
             role="tab"
             :aria-selected="page === currentPage"
             :class="[
-              ui.indicators.base,
-              page === currentPage ? ui.indicators.active : ui.indicators.inactive
-            ]"
+  ui.indicators.base,
+  page === currentPage ? ui.indicators.active : ui.indicators.inactive
+]"
             :aria-label="`set slide ${page}`"
             @click="onClick(page)"
           />