@nuxt/ui 2.16.0 → 2.18.0

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -1,4 +1,28 @@
 import type { PropType } from 'vue';
+import type { Strategy } from '../../types.js';
+declare const config: {
+    base: string;
+    background: string;
+    divide: string;
+    ring: string;
+    rounded: string;
+    shadow: string;
+    body: {
+        base: string;
+        background: string;
+        padding: string;
+    };
+    header: {
+        base: string;
+        background: string;
+        padding: string;
+    };
+    footer: {
+        base: string;
+        background: string;
+        padding: string;
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     as: {
         type: StringConstructor;
@@ -9,11 +33,35 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        base: string;
+        background: string;
+        divide: string;
+        ring: string;
+        rounded: string;
+        shadow: string;
+        body: {
+            base: string;
+            background: string;
+            padding: string;
+        };
+        header: {
+            base: string;
+            background: string;
+            padding: string;
+        };
+        footer: {
+            base: string;
+            background: string;
+            padding: string;
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -28,12 +76,14 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
-    class: any;
+    ui: {};
     as: string;
-    ui: any;
+    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -1,4 +1,10 @@
 import type { PropType } from 'vue';
+import type { Strategy } from '../../types.js';
+declare const config: {
+    base: string;
+    padding: string;
+    constrained: string;
+};
 declare const _default: import("vue").DefineComponent<{
     as: {
         type: StringConstructor;
@@ -9,11 +15,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        base: string;
+        padding: string;
+        constrained: string;
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -28,12 +40,14 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
-    class: any;
+    ui: {};
     as: string;
-    ui: any;
+    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/layout/Divider.vue

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

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -1,21 +1,72 @@
 import type { PropType } from 'vue';
-import type { Avatar, DividerSize } from '../../types';
+import type { Avatar, DividerSize, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+    container: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+    border: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+        size: {
+            horizontal: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            vertical: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        type: {
+            solid: string;
+            dotted: string;
+            dashed: string;
+        };
+    };
+    icon: {
+        base: string;
+    };
+    avatar: {
+        base: string;
+        size: "2xs";
+    };
+    label: string;
+    default: {
+        size: "2xs";
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     label: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     icon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     avatar: {
         type: PropType<Avatar>;
-        default: null;
+        default: any;
     };
     size: {
         type: PropType<DividerSize>;
-        default: () => any;
+        default: () => "2xs";
         validator(value: string): boolean;
     };
     orientation: {
@@ -33,11 +84,63 @@ 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: {
+            base: string;
+            horizontal: string;
+            vertical: string;
+        };
+        container: {
+            base: string;
+            horizontal: string;
+            vertical: string;
+        };
+        border: {
+            base: string;
+            horizontal: string;
+            vertical: string;
+            size: {
+                horizontal: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+                vertical: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            };
+            type: {
+                solid: string;
+                dotted: string;
+                dashed: string;
+            };
+        };
+        icon: {
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "2xs";
+        };
+        label: string;
+        default: {
+            size: "2xs";
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -47,19 +150,19 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     icon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     avatar: {
         type: PropType<Avatar>;
-        default: null;
+        default: any;
     };
     size: {
         type: PropType<DividerSize>;
-        default: () => any;
+        default: () => "2xs";
         validator(value: string): boolean;
     };
     orientation: {
@@ -77,17 +180,19 @@ declare const _default: import("vue").DefineComponent<{
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
+    orientation: "horizontal" | "vertical";
     size: DividerSize;
+    ui: {};
     type: "solid" | "dotted" | "dashed";
     label: string;
-    class: any;
-    avatar: Avatar;
-    orientation: "horizontal" | "vertical";
-    ui: any;
     icon: string;
+    avatar: any;
+    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/layout/Skeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="skeletonClass" v-bind="attrs" />
+  <component :is="as" :class="skeletonClass" v-bind="attrs" />
 </template>
 
 <script>
@@ -13,6 +13,10 @@ const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.skeleton, skeleto
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    as: {
+      type: String,
+      default: "div"
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -1,30 +1,53 @@
 import type { PropType } from 'vue';
+import type { Strategy } from '../../types.js';
+declare const config: {
+    base: string;
+    background: string;
+    rounded: string;
+};
 declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
     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<{
+        base: string;
+        background: string;
+        rounded: string;
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     skeletonClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
+    ui: {};
+    as: string;
     class: any;
-    ui: any;
 }, {}>;
 export default _default;

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

@@ -5,8 +5,8 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="getULinkProps(link)"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
+          v-bind="getULinkProps(link)"
           @click="link.click"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
@@ -36,8 +36,7 @@
 <script>
 import { defineComponent, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import ULink from "../elements/Link.vue";
+import { UIcon, ULink } from "#components";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, getULinkProps } from "../../utils";
 import appConfig from "#build/app.config";

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

@@ -1,25 +1,66 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import type { BreadcrumbLink } from '../../types';
+import type { BreadcrumbLink, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    ol: string;
+    li: string;
+    base: string;
+    label: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    divider: {
+        base: string;
+    };
+    active: string;
+    inactive: string;
+    default: {
+        divider: string;
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     links: {
         type: PropType<BreadcrumbLink[]>;
-        default: () => never[];
+        default: () => any[];
     };
     divider: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     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;
+        ol: string;
+        li: string;
+        base: string;
+        label: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        divider: {
+            base: string;
+        };
+        active: string;
+        inactive: string;
+        default: {
+            divider: string;
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -29,23 +70,25 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<BreadcrumbLink[]>;
-        default: () => never[];
+        default: () => any[];
     };
     divider: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     class: {
         type: PropType<any>;
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
+    ui: {};
     class: any;
-    ui: any;
     divider: string;
     links: BreadcrumbLink[];
 }, {}>;

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

@@ -68,8 +68,7 @@ import { useDebounceFn } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { twJoin } from "tailwind-merge";
 import { defu } from "defu";
-import UIcon from "../elements/Icon.vue";
-import UButton from "../elements/Button.vue";
+import { UIcon, UButton } from "#components";
 import CommandPaletteGroup from "./CommandPaletteGroup.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
@@ -205,7 +204,7 @@ export default defineComponent({
     const commands = computed(() => {
       const commands2 = [];
       for (const group of props.groups) {
-        if (!group.search) {
+        if (!group.search && !group.static) {
           commands2.push(...group.commands?.map((command) => ({ ...command, group: group.key })) || []);
         }
       }
@@ -249,9 +248,13 @@ export default defineComponent({
         const commands2 = searchResults.value[group.key] || [];
         return getGroupWithCommands(group, [...commands2]);
       });
+      const staticGroups = props.groups.filter((group) => group.static && group.commands?.length).map((group) => {
+        return getGroupWithCommands(group, group.commands);
+      });
       return [
         ...groups2,
-        ...searchGroups
+        ...searchGroups,
+        ...staticGroups
       ];
     });
     const debouncedSearch = useDebounceFn(async () => {
@@ -283,7 +286,10 @@ export default defineComponent({
         (props.loading || isLoading.value) && props.loadingIcon && ui.value.input.icon.loading
       );
     });
-    const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));
+    const emptyState = computed(() => {
+      if (props.emptyState === null) return null;
+      return { ...ui.value.default.emptyState, ...props.emptyState };
+    });
     function activateFirstOption() {
       setTimeout(() => {
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));