@nuxt/ui 2.18.5 → 2.18.6

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.5",
+  "version": "2.18.6",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.18.5";
+const version = "2.18.6";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

package/dist/runtime/components/data/Table.vue

@@ -44,7 +44,7 @@
       </thead>
       <tbody :class="ui.tbody">
         <tr v-if="loadingState && loading && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
             <slot name="loading-state">
               <div :class="ui.loadingState.wrapper">
                 <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
@@ -57,7 +57,7 @@
         </tr>
 
         <tr v-else-if="emptyState && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
             <slot name="empty-state">
               <div :class="ui.emptyState.wrapper">
                 <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
@@ -82,7 +82,7 @@
               >
                 <UButton
                   v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
-                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
+                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'].join(' ') } }"
                   @click="toggleOpened(index)"
                 />
               </td>

package/dist/runtime/components/data/Table.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, AriaAttributes } from 'vue';
-import type { Strategy, Button, ProgressColor, ProgressAnimation } from '../../types/index.js';
+import type { Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;
@@ -183,7 +183,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -397,7 +397,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -417,7 +417,90 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         color: ProgressColor;
         animation: ProgressAnimation;
     };
-    ui: {};
+    ui: {
+        wrapper?: string;
+        base?: string;
+        divide?: string;
+        thead?: string;
+        tbody?: string;
+        caption?: string;
+        tr?: DeepPartial<{
+            base: string;
+            selected: string;
+            active: string;
+        }, any>;
+        th?: DeepPartial<{
+            base: string;
+            padding: string;
+            color: string;
+            font: string;
+            size: string;
+        }, any>;
+        td?: DeepPartial<{
+            base: string;
+            padding: string;
+            color: string;
+            font: string;
+            size: string;
+        }, any>;
+        checkbox?: DeepPartial<{
+            padding: string;
+        }, any>;
+        loadingState?: DeepPartial<{
+            wrapper: string;
+            label: string;
+            icon: string;
+        }, any>;
+        emptyState?: DeepPartial<{
+            wrapper: string;
+            label: string;
+            icon: string;
+        }, any>;
+        expand?: DeepPartial<{
+            icon: string;
+        }, any>;
+        progress?: DeepPartial<{
+            wrapper: string;
+        }, any>;
+        default?: DeepPartial<{
+            sortAscIcon: string;
+            sortDescIcon: string;
+            sortButton: {
+                icon: string;
+                trailing: boolean;
+                square: boolean;
+                color: "gray";
+                variant: "ghost";
+                class: string;
+            };
+            expandButton: {
+                icon: string;
+                color: "gray";
+                variant: "ghost";
+                size: "xs";
+                class: string;
+            };
+            checkbox: {
+                color: "primary";
+            };
+            progress: {
+                color: "primary";
+                animation: "carousel";
+            };
+            loadingState: {
+                icon: string;
+                label: string;
+            };
+            emptyState: {
+                icon: string;
+                label: string;
+            };
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
+        strategy?: Strategy;
+    };
     modelValue: unknown[];
     loading: boolean;
     loadingState: {
@@ -561,7 +644,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 font: string;
                 rounded: string;
@@ -880,7 +963,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 font: string;
                 rounded: string;
@@ -1033,7 +1116,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: string;
         size: import("../../types/button").ButtonSize;
         class: any;
-        to: any;
+        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         disabled: boolean;
         truncate: boolean;
         target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
@@ -1049,10 +1132,93 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         leading: boolean;
         color: import("../../types/button").ButtonColor;
         variant: import("../../types/button").ButtonVariant;
-        href: any;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         rel: any;
         label: string;
-        ui: {};
+        ui: {
+            base?: string;
+            font?: string;
+            rounded?: string;
+            truncate?: string;
+            block?: string;
+            inline?: string;
+            size?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            gap?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            padding?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            square?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            color?: DeepPartial<{
+                white: {
+                    solid: string;
+                    ghost: string;
+                };
+                gray: {
+                    solid: string;
+                    ghost: string;
+                    link: string;
+                };
+                black: {
+                    solid: string;
+                    link: string;
+                };
+            }, any>;
+            variant?: DeepPartial<{
+                solid: string;
+                outline: string;
+                soft: string;
+                ghost: string;
+                link: string;
+            }, any>;
+            icon?: DeepPartial<{
+                base: string;
+                loading: string;
+                size: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            }, any>;
+            default?: DeepPartial<{
+                size: string;
+                variant: string;
+                color: string;
+                loadingIcon: string;
+            }, any>;
+        } & {
+            [key: string]: any;
+        } & {
+            strategy?: Strategy;
+        };
         icon: string;
         block: boolean;
         square: boolean;
@@ -1311,7 +1477,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
         }>> & Readonly<{}>, {
             type: string;
-            to: any;
+            to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
             disabled: boolean;
             target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
             activeClass: string;
@@ -1329,7 +1495,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             exactQuery: boolean;
             exactHash: boolean;
             inactiveClass: string;
-            href: any;
+            href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
             rel: any;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -1381,7 +1547,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 wrapper: string;
                 indicator: {
                     container: {
@@ -1594,7 +1760,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 wrapper: string;
                 indicator: {
                     container: {
@@ -1678,7 +1844,84 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         max: number | any[];
         animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
         color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-        ui: {};
+        ui: {
+            wrapper?: string;
+            indicator?: DeepPartial<{
+                container: {
+                    base: string;
+                    width: string;
+                    transition: string;
+                };
+                align: string;
+                width: string;
+                color: string;
+                size: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    '2xl': string;
+                };
+            }, any>;
+            progress?: DeepPartial<{
+                base: string;
+                width: string;
+                size: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    '2xl': string;
+                };
+                rounded: string;
+                track: string;
+                bar: string;
+                color: string;
+                background: string;
+                indeterminate: {
+                    base: string;
+                    rounded: string;
+                };
+            }, any>;
+            steps?: DeepPartial<{
+                base: string;
+                color: string;
+                size: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    '2xl': string;
+                };
+            }, any>;
+            step?: DeepPartial<{
+                base: string;
+                align: string;
+                active: string;
+                first: string;
+            }, any>;
+            animation?: DeepPartial<{
+                carousel: string;
+                'carousel-inverse': string;
+                swing: string;
+                elastic: string;
+            }, any>;
+            default?: DeepPartial<{
+                color: string;
+                size: string;
+                animation: string;
+            }, any>;
+        } & {
+            [key: string]: any;
+        } & {
+            strategy?: Strategy;
+        };
         value: number;
         indicator: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -1733,7 +1976,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 wrapper: string;
                 container: string;
                 base: string;
@@ -1833,7 +2076,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 wrapper: string;
                 container: string;
                 base: string;
@@ -1865,7 +2108,28 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         disabled: boolean;
         color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
         label: string;
-        ui: {};
+        ui: {
+            wrapper?: string;
+            container?: string;
+            base?: string;
+            form?: string;
+            rounded?: string;
+            color?: string;
+            background?: string;
+            border?: string;
+            ring?: string;
+            inner?: string;
+            label?: string;
+            required?: string;
+            help?: string;
+            default?: DeepPartial<{
+                color: string;
+            }, any>;
+        } & {
+            [key: string]: any;
+        } & {
+            strategy?: Strategy;
+        };
         id: string;
         modelValue: boolean | unknown[];
         value: string | number | boolean | Record<string, any>;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { AccordionItem, Strategy } from '../../types/index.js';
+import type { AccordionItem, DeepPartial, Strategy } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     container: string;
@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -209,7 +209,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => string;
     };
     ui: {
-        type: PropType<Partial<typeof config> & {
+        type: PropType<DeepPartial<typeof config> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -218,7 +218,32 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onOpen?: (...args: any[]) => any;
 }>, {
     class: any;
-    ui: {};
+    ui: {
+        wrapper?: string;
+        container?: string;
+        item?: DeepPartial<{
+            base: string;
+            size: string;
+            color: string;
+            padding: string;
+            icon: string;
+        }, any>;
+        transition?: DeepPartial<{
+            enterActiveClass: string;
+            leaveActiveClass: string;
+        }, any>;
+        default?: DeepPartial<{
+            openIcon: string;
+            closeIcon: string;
+            class: string;
+            variant: "soft";
+            truncate: boolean;
+        }, any>;
+    } & {
+        [key: string]: any;
+    } & {
+        strategy?: Strategy;
+    };
     defaultOpen: boolean;
     unmount: boolean;
     items: AccordionItem[];
@@ -453,7 +478,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 font: string;
                 rounded: string;
@@ -772,7 +797,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => "";
         };
         ui: {
-            type: PropType<Partial<{
+            type: PropType<DeepPartial<{
                 base: string;
                 font: string;
                 rounded: string;
@@ -925,7 +950,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: string;
         size: import("../../types/button").ButtonSize;
         class: any;
-        to: any;
+        to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         disabled: boolean;
         truncate: boolean;
         target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
@@ -941,10 +966,93 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         leading: boolean;
         color: import("../../types/button").ButtonColor;
         variant: import("../../types/button").ButtonVariant;
-        href: any;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         rel: any;
         label: string;
-        ui: {};
+        ui: {
+            base?: string;
+            font?: string;
+            rounded?: string;
+            truncate?: string;
+            block?: string;
+            inline?: string;
+            size?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            gap?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            padding?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            square?: DeepPartial<{
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            }, any>;
+            color?: DeepPartial<{
+                white: {
+                    solid: string;
+                    ghost: string;
+                };
+                gray: {
+                    solid: string;
+                    ghost: string;
+                    link: string;
+                };
+                black: {
+                    solid: string;
+                    link: string;
+                };
+            }, any>;
+            variant?: DeepPartial<{
+                solid: string;
+                outline: string;
+                soft: string;
+                ghost: string;
+                link: string;
+            }, any>;
+            icon?: DeepPartial<{
+                base: string;
+                loading: string;
+                size: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            }, any>;
+            default?: DeepPartial<{
+                size: string;
+                variant: string;
+                color: string;
+                loadingIcon: string;
+            }, any>;
+        } & {
+            [key: string]: any;
+        } & {
+            strategy?: Strategy;
+        };
         icon: string;
         block: boolean;
         square: boolean;
@@ -1203,7 +1311,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
         }>> & Readonly<{}>, {
             type: string;
-            to: any;
+            to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
             disabled: boolean;
             target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
             activeClass: string;
@@ -1221,7 +1329,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             exactQuery: boolean;
             exactHash: boolean;
             inactiveClass: string;
-            href: any;
+            href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
             rel: any;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;