@nuxt/ui 2.11.0 → 2.12.0

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -30,18 +30,18 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): any;
     };
-    class: {
-        type: PropType<any>;
-        default: undefined;
-    };
     size: {
         type: PropType<ToggleSize>;
         default: any;
         validator(value: string): boolean;
     };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -49,13 +49,13 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | null | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
     containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: StringConstructor;
         default: null;
@@ -85,24 +85,25 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): any;
     };
-    class: {
-        type: PropType<any>;
-        default: undefined;
-    };
     size: {
         type: PropType<ToggleSize>;
         default: any;
         validator(value: string): boolean;
     };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }, {
     size: ToggleSize;
-    ui: Partial<any>;
+    ui: any;
     id: string;
     color: any;
     name: string;

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

@@ -33,11 +33,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -6,11 +6,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -25,14 +25,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     as: string;
 }, {}>;

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

@@ -21,11 +21,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -6,11 +6,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -25,14 +25,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     as: string;
 }, {}>;

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

@@ -59,11 +59,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -82,16 +82,11 @@ export default defineComponent({
       );
     });
     const borderClass = computed(() => {
-      const typeClass = {
-        solid: "border-solid",
-        dotted: "border-dotted",
-        dashed: "border-dashed"
-      }[props.type];
       return twJoin(
         ui.value.border.base,
         isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
         isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
-        typeClass
+        ui.value.border.type[props.type]
       );
     });
     return {

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

@@ -25,11 +25,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -64,15 +64,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     orientation: "horizontal" | "vertical";
-    ui: Partial<any>;
+    ui: any;
     icon: string;
     avatar: Avatar;
     type: "solid" | "dotted" | "dashed";

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

@@ -15,11 +15,11 @@ export default defineComponent({
   props: {
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -2,11 +2,11 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -17,14 +17,14 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
 }, {}>;
 export default _default;

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

@@ -5,19 +5,19 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass'])"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
             <UIcon
               v-if="link.icon"
               :name="link.icon"
-              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+              :class="twMerge(twJoin(ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : ''), link.iconClass)"
             />
           </slot>
 
           <slot :link="link" :index="index" :is-active="index === links.length - 1">
-            {{ link.label }}
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">{{ link.label }}</span>
           </slot>
         </ULink>
 
@@ -34,6 +34,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 { useUI } from "../../composables/useUI";
@@ -58,11 +59,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -71,7 +72,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit
+      omit,
+      twMerge,
+      twJoin
     };
   }
 });

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
 import { omit } from '../../utils';
 import type { BreadcrumbLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
@@ -12,11 +13,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -24,6 +25,8 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     omit: typeof omit;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<BreadcrumbLink[]>;
@@ -35,14 +38,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     divider: string;
     links: BreadcrumbLink[];

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

@@ -14,14 +14,14 @@
       <HComboboxInput
         ref="comboboxInput"
         :value="query"
-        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
+        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding, closeButton && ui.input.closeButton.padding]"
         :placeholder="placeholder"
         :aria-label="placeholder"
         autocomplete="off"
         @change="query = $event.target.value"
       />
 
-      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
+      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton.base" @click="onClear" />
     </div>
 
     <HComboboxOptions
@@ -165,11 +165,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],
@@ -205,44 +205,53 @@ export default defineComponent({
       const commands2 = [];
       for (const group of props.groups) {
         if (!group.search) {
-          commands2.push(...group.commands.map((command) => ({ ...command, group: group.key })));
+          commands2.push(...group.commands?.map((command) => ({ ...command, group: group.key })) || []);
         }
       }
       return commands2;
     });
     const searchResults = ref({});
     const { results } = useFuse(query, commands, options);
+    function getGroupWithCommands(group, commands2) {
+      if (!group) {
+        return;
+      }
+      if (group.filter && typeof group.filter === "function") {
+        commands2 = group.filter(query.value, commands2);
+      }
+      return {
+        ...group,
+        commands: commands2.slice(0, options.value.resultLimit)
+      };
+    }
     const groups = computed(() => {
-      const groups2 = [];
-      const groupedCommands = {};
-      for (const command of results.value) {
-        groupedCommands[command.item.group] ||= [];
-        groupedCommands[command.item.group].push(command);
+      if (!results.value) {
+        return [];
       }
-      for (const key in groupedCommands) {
-        const group = props.groups.find((group2) => group2.key === key);
-        let commands2 = groupedCommands[key].map((result) => {
-          const { item, ...data } = result;
-          return {
-            ...item,
-            ...data
-          };
-        });
-        if (group.filter && typeof group.filter === "function") {
-          commands2 = group.filter(query.value, commands2);
+      const groupedCommands = results.value.reduce((acc, command) => {
+        const { item, ...data } = command;
+        if (!item.group) {
+          return acc;
         }
-        groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
-      }
-      for (const group of props.groups) {
-        if (group.search && searchResults.value[group.key]?.length) {
-          let commands2 = searchResults.value[group.key] || [];
-          if (group.filter && typeof group.filter === "function") {
-            commands2 = group.filter(query.value, commands2);
-          }
-          groups2.push({ ...group, commands: commands2.slice(0, options.value.resultLimit) });
+        acc[item.group] ||= [];
+        acc[item.group].push({ ...item, ...data });
+        return acc;
+      }, {});
+      const groups2 = Object.entries(groupedCommands).map(([key, commands2]) => {
+        const group = props.groups.find((group2) => group2.key === key);
+        if (!group) {
+          return null;
         }
-      }
-      return groups2;
+        return getGroupWithCommands(group, commands2);
+      }).filter(Boolean);
+      const searchGroups = props.groups.filter((group) => !!group.search && searchResults.value[group.key]?.length).map((group) => {
+        const commands2 = searchResults.value[group.key] || [];
+        return getGroupWithCommands(group, [...commands2]);
+      });
+      return [
+        ...groups2,
+        ...searchGroups
+      ];
     });
     const debouncedSearch = useDebounceFn(async () => {
       const searchableGroups = props.groups.filter((group) => !!group.search);
@@ -270,7 +279,7 @@ export default defineComponent({
       return twJoin(
         ui.value.input.icon.base,
         ui.value.input.icon.size,
-        (props.loading || isLoading.value) && props.loadingIcon && "animate-spin"
+        (props.loading || isLoading.value) && props.loadingIcon && ui.value.input.icon.loading
       );
     });
     const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));

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

@@ -84,18 +84,25 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: ComputedRef<any>;
     attrs: ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    groups: ComputedRef<Group[]>;
+    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>;
     query: import("vue").Ref<string>;
     iconName: ComputedRef<string | undefined>;
@@ -186,17 +193,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     icon: string;
     closeButton: Button;
     class: any;
@@ -213,8 +220,8 @@ declare const _default: import("vue").DefineComponent<{
     loadingIcon: string;
     nullable: boolean;
     selectedIcon: string;
-    searchable: boolean;
     debounce: number;
+    searchable: boolean;
     groups: Group[];
     groupAttribute: string;
     commandAttribute: string;

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

@@ -146,7 +146,5 @@ export default defineComponent({
 </script>
 
 <style>
-mark {
-  @apply bg-primary-400;
-}
+mark{@apply bg-primary-400}
 </style>

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

@@ -4,9 +4,9 @@
       <UButton
         v-if="firstButton && showFirst"
         :size="size"
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.firstButton, ...firstButton }"
+        v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
         :ui="{ rounded: '' }"
         aria-label="First"
         @click="onClickFirst"
@@ -17,9 +17,9 @@
       <UButton
         v-if="prevButton"
         :size="size"
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoFirstOrPrev || disabled"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.prevButton, ...prevButton }"
+        v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
         :ui="{ rounded: '' }"
         aria-label="Prev"
         @click="onClickPrev"
@@ -30,8 +30,9 @@
       v-for="(page, index) of displayedPages"
       :key="`${page}-${index}`"
       :size="size"
+      :disabled="disabled"
       :label="`${page}`"
-      v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
+      v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
       :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
       :ui="{ rounded: '' }"
       @click="() => onClickPage(page)"
@@ -41,9 +42,9 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.nextButton, ...nextButton }"
+        v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
         :ui="{ rounded: '' }"
         aria-label="Next"
         @click="onClickNext"
@@ -54,9 +55,9 @@
       <UButton
         v-if="lastButton && showLast"
         :size="size"
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoLastOrNext || disabled"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.lastButton, ...lastButton }"
+        v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
         :ui="{ rounded: '' }"
         aria-label="Last"
         @click="onClickLast"
@@ -99,6 +100,10 @@ export default defineComponent({
         return value >= 5 && value < Number.MAX_VALUE;
       }
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
       default: () => config.default.size,
@@ -144,11 +149,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue"],