@nuxt/ui 2.17.0 → 2.18.0

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

@@ -1,10 +1,81 @@
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command, Button } from '../../types';
+import type { Group, Command, Button, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    container: string;
+    input: {
+        wrapper: string;
+        base: string;
+        padding: string;
+        height: string;
+        size: string;
+        icon: {
+            base: string;
+            loading: string;
+            size: string;
+            padding: string;
+        };
+        closeButton: {
+            base: string;
+            padding: string;
+        };
+    };
+    emptyState: {
+        wrapper: string;
+        label: string;
+        queryLabel: string;
+        icon: string;
+    };
+    group: {
+        wrapper: string;
+        label: string;
+        container: string;
+        command: {
+            base: string;
+            active: string;
+            inactive: string;
+            label: string;
+            prefix: string;
+            suffix: string;
+            container: string;
+            icon: {
+                base: string;
+                active: string;
+                inactive: string;
+            };
+            selectedIcon: {
+                base: string;
+            };
+            avatar: {
+                base: string;
+                size: "2xs";
+            };
+            chip: {
+                base: string;
+            };
+            disabled: string;
+            shortcuts: string;
+        };
+        active: string;
+        inactive: string;
+    };
+    default: {
+        icon: string;
+        loadingIcon: string;
+        emptyState: {
+            icon: string;
+            label: string;
+            queryLabel: string;
+        };
+        closeButton: any;
+        selectedIcon: string;
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor | NumberConstructor)[];
-        default: null;
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        default: any;
     };
     by: {
         type: StringConstructor;
@@ -28,19 +99,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     groups: {
         type: PropType<Group[]>;
-        default: () => never[];
+        default: () => any[];
     };
     icon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     loadingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     selectedIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     closeButton: {
         type: PropType<Button>;
@@ -52,7 +123,11 @@ declare const _default: import("vue").DefineComponent<{
             label: string;
             queryLabel: string;
         }>;
-        default: () => any;
+        default: () => {
+            icon: string;
+            label: string;
+            queryLabel: string;
+        };
     };
     placeholder: {
         type: StringConstructor;
@@ -87,33 +162,110 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: ComputedRef<any>;
+    ui: ComputedRef<{
+        wrapper: string;
+        container: string;
+        input: {
+            wrapper: string;
+            base: string;
+            padding: string;
+            height: string;
+            size: string;
+            icon: {
+                base: string;
+                loading: string;
+                size: string;
+                padding: string;
+            };
+            closeButton: {
+                base: string;
+                padding: string;
+            };
+        };
+        emptyState: {
+            wrapper: string;
+            label: string;
+            queryLabel: string;
+            icon: string;
+        };
+        group: {
+            wrapper: string;
+            label: string;
+            container: string;
+            command: {
+                base: string;
+                active: string;
+                inactive: string;
+                label: string;
+                prefix: string;
+                suffix: string;
+                container: string;
+                icon: {
+                    base: string;
+                    active: string;
+                    inactive: string;
+                };
+                selectedIcon: {
+                    base: string;
+                };
+                avatar: {
+                    base: string;
+                    size: "2xs";
+                };
+                chip: {
+                    base: string;
+                };
+                disabled: string;
+                shortcuts: string;
+            };
+            active: string;
+            inactive: string;
+        };
+        default: {
+            icon: string;
+            loadingIcon: string;
+            emptyState: {
+                icon: string;
+                label: string;
+                queryLabel: string;
+            };
+            closeButton: any;
+            selectedIcon: string;
+        };
+    }>;
     attrs: ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     groups: ComputedRef<(Group | {
         commands: Command[];
         key: string;
-        active?: string | undefined;
-        inactive?: string | undefined;
-        search?: Function | undefined;
-        filter?: Function | undefined;
-    } | undefined)[]>;
-    comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement> | undefined>;
+        active?: string;
+        inactive?: string;
+        search?: Function;
+        filter?: Function;
+        static?: Boolean;
+    })[]>;
+    comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement>>;
     query: import("vue").Ref<string>;
-    iconName: ComputedRef<string | undefined>;
+    iconName: ComputedRef<string>;
     iconClass: ComputedRef<string>;
-    emptyState: ComputedRef<any>;
+    emptyState: ComputedRef<{
+        icon: string;
+        label: string;
+        queryLabel: string;
+    }>;
     onSelect: (option: Command | Command[]) => void;
     onClear: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close")[], "update:modelValue" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor | NumberConstructor)[];
-        default: null;
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        default: any;
     };
     by: {
         type: StringConstructor;
@@ -137,19 +289,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     groups: {
         type: PropType<Group[]>;
-        default: () => never[];
+        default: () => any[];
     };
     icon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     loadingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     selectedIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     closeButton: {
         type: PropType<Button>;
@@ -161,7 +313,11 @@ declare const _default: import("vue").DefineComponent<{
             label: string;
             queryLabel: string;
         }>;
-        default: () => any;
+        default: () => {
+            icon: string;
+            label: string;
+            queryLabel: string;
+        };
     };
     placeholder: {
         type: StringConstructor;
@@ -196,37 +352,39 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClose?: ((...args: any[]) => any) | undefined;
+    onClose?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
+    ui: {};
+    icon: string;
     class: any;
-    ui: any;
+    closeButton: Button;
+    modelValue: string | number | unknown[] | Record<string, any>;
     loading: boolean;
-    icon: string;
     loadingIcon: string;
-    modelValue: string | number | Record<string, any> | unknown[];
-    by: string;
-    emptyState: {
-        icon: string;
-        label: string;
-        queryLabel: string;
-    };
     multiple: boolean;
     placeholder: string;
-    closeButton: Button;
     nullable: boolean;
+    by: string;
     selectedIcon: string;
     debounce: number;
     searchable: boolean;
     groupAttribute: string;
     commandAttribute: string;
+    emptyState: {
+        icon: string;
+        label: string;
+        queryLabel: string;
+    };
     groups: Group[];
     autoselect: boolean;
     autoclear: boolean;
-    fuse: UseFuseOptions<Command>;
+    fuse: {};
 }, {}>;
 export default _default;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue

@@ -72,9 +72,7 @@
 <script>
 import { computed, defineComponent } from "vue";
 import { ComboboxOption as HComboboxOption, provideUseId } from "@headlessui/vue";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UKbd from "../elements/Kbd.vue";
+import { UIcon, UAvatar, UKbd } from "#components";
 import { useId } from "#imports";
 export default defineComponent({
   components: {

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

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
-import type { Group } from '../../types';
+import type { Command, Group } from '../../types.js';
+import { commandPalette } from '#ui/ui.config';
 declare const _default: import("vue").DefineComponent<{
     group: {
         type: PropType<Group>;
@@ -22,15 +23,12 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<typeof commandPalette>;
         required: true;
     };
 }, {
     label: import("vue").ComputedRef<any>;
-    highlight: (text: string, { indices, value }: {
-        indices: number[][];
-        value: string;
-    }) => string;
+    highlight: (text: string, { indices, value }: Command["matches"][number]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: PropType<Group>;
@@ -53,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<typeof commandPalette>;
         required: true;
     };
 }>>, {

package/dist/runtime/components/navigation/HorizontalNavigation.vue

@@ -54,10 +54,7 @@
 <script>
 import { toRef, defineComponent, computed } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UBadge from "../elements/Badge.vue";
-import ULink from "../elements/Link.vue";
+import { UIcon, UAvatar, UBadge, ULink } from "#components";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, getULinkProps } from "../../utils";
 import appConfig from "#build/app.config";

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

@@ -1,21 +1,74 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { HorizontalNavigationLink } from '../../types';
+import type { HorizontalNavigationLink, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    container: string;
+    inner: string;
+    base: string;
+    before: string;
+    after: string;
+    active: string;
+    inactive: string;
+    label: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    avatar: {
+        base: string;
+        size: "2xs";
+    };
+    badge: {
+        base: string;
+        color: "gray";
+        variant: "solid";
+        size: "xs";
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     links: {
-        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
-        default: () => never[];
+        type: PropType<HorizontalNavigationLink[][] | HorizontalNavigationLink[]>;
+        default: () => any[];
     };
     class: {
         type: PropType<any>;
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        wrapper: string;
+        container: string;
+        inner: string;
+        base: string;
+        before: string;
+        after: string;
+        active: string;
+        inactive: string;
+        label: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        avatar: {
+            base: string;
+            size: "2xs";
+        };
+        badge: {
+            base: string;
+            color: "gray";
+            variant: "solid";
+            size: "xs";
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -25,20 +78,22 @@ declare const _default: import("vue").DefineComponent<{
     twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
-        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
-        default: () => never[];
+        type: PropType<HorizontalNavigationLink[][] | HorizontalNavigationLink[]>;
+        default: () => any[];
     };
     class: {
         type: PropType<any>;
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
+    ui: {};
     class: any;
-    ui: any;
     links: HorizontalNavigationLink[] | HorizontalNavigationLink[][];
 }, {}>;
 export default _default;

package/dist/runtime/components/navigation/Pagination.vue

@@ -190,8 +190,7 @@ export default defineComponent({
         return items;
       }
       items.push(1);
-      if (beforeWrapped)
-        items.push(props.divider);
+      if (beforeWrapped) items.push(props.divider);
       if (!afterWrapped) {
         const addedItems = current + r + 2 - totalPages;
         for (let i = current - r - addedItems; i <= current - r - 1; i++) {
@@ -207,8 +206,7 @@ export default defineComponent({
           items.push(i);
         }
       }
-      if (afterWrapped)
-        items.push(props.divider);
+      if (afterWrapped) items.push(props.divider);
       if (r2 < totalPages) {
         items.push(totalPages);
       }

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

@@ -1,5 +1,40 @@
 import type { PropType } from 'vue';
-import type { Button, ButtonSize } from '../../types';
+import type { RouteLocationRaw } from '#vue-router';
+import type { Button, ButtonSize, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    base: string;
+    rounded: string;
+    default: {
+        size: string;
+        activeButton: {
+            color: "primary";
+        };
+        inactiveButton: {
+            color: "white";
+        };
+        firstButton: {
+            color: "white";
+            class: string;
+            icon: string;
+        };
+        lastButton: {
+            color: "white";
+            class: string;
+            icon: string;
+        };
+        prevButton: {
+            color: "white";
+            class: string;
+            icon: string;
+        };
+        nextButton: {
+            color: "white";
+            class: string;
+            icon: string;
+        };
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -24,12 +59,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ButtonSize>;
-        default: () => any;
+        default: () => string;
         validator(value: string): boolean;
     };
     to: {
         type: PropType<(page: number) => RouteLocationRaw>;
-        default: null;
+        default: any;
     };
     activeButton: {
         type: PropType<Button>;
@@ -72,11 +107,46 @@ declare const _default: import("vue").DefineComponent<{
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        wrapper: string;
+        base: string;
+        rounded: string;
+        default: {
+            size: string;
+            activeButton: {
+                color: "primary";
+            };
+            inactiveButton: {
+                color: "white";
+            };
+            firstButton: {
+                color: "white";
+                class: string;
+                icon: string;
+            };
+            lastButton: {
+                color: "white";
+                class: string;
+                icon: string;
+            };
+            prevButton: {
+                color: "white";
+                class: string;
+                icon: string;
+            };
+            nextButton: {
+                color: "white";
+                class: string;
+                icon: string;
+            };
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -114,12 +184,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ButtonSize>;
-        default: () => any;
+        default: () => string;
         validator(value: string): boolean;
     };
     to: {
         type: PropType<(page: number) => RouteLocationRaw>;
-        default: null;
+        default: any;
     };
     activeButton: {
         type: PropType<Button>;
@@ -162,17 +232,19 @@ declare const _default: import("vue").DefineComponent<{
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     size: ButtonSize;
-    class: any;
-    disabled: boolean;
+    ui: {};
     to: (page: number) => RouteLocationRaw;
-    ui: any;
+    disabled: boolean;
+    class: any;
     max: number;
     prevButton: Button;
     nextButton: Button;

package/dist/runtime/components/navigation/Tabs.vue

@@ -25,6 +25,16 @@
         as="template"
       >
         <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
+          <slot
+            name="icon"
+            :item="item"
+            :index="index"
+            :selected="selected"
+            :disabled="disabled"
+          >
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.list.tab.icon" />
+          </slot>
+
           <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
             <span class="truncate">{{ item.label }}</span>
           </slot>