@nuxt/ui 2.11.0 → 2.11.1

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,7 +49,7 @@ 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>;
@@ -85,24 +85,24 @@ 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;
 }, {
     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

@@ -58,11 +58,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/navigation/Breadcrumb.vue.d.ts

@@ -12,11 +12,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>;
@@ -35,14 +35,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;

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

@@ -6,7 +6,7 @@
         :size="size"
         :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.firstButton, ...firstButton }"
+        v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
         :ui="{ rounded: '' }"
         aria-label="First"
         @click="onClickFirst"
@@ -19,7 +19,7 @@
         :size="size"
         :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.prevButton, ...prevButton }"
+        v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
         :ui="{ rounded: '' }"
         aria-label="Prev"
         @click="onClickPrev"
@@ -31,7 +31,7 @@
       :key="`${page}-${index}`"
       :size="size"
       :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)"
@@ -43,7 +43,7 @@
         :size="size"
         :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.nextButton, ...nextButton }"
+        v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
         :ui="{ rounded: '' }"
         aria-label="Next"
         @click="onClickNext"
@@ -56,7 +56,7 @@
         :size="size"
         :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
-        v-bind="{ ...ui.default.lastButton, ...lastButton }"
+        v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
         :ui="{ rounded: '' }"
         aria-label="Last"
         @click="onClickLast"
@@ -144,11 +144,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue"],

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

@@ -61,11 +61,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -143,17 +143,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
-    ui: Partial<any>;
+    ui: any;
     class: any;
     max: number;
     divider: string;

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

@@ -86,11 +86,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "change"],
@@ -105,6 +105,9 @@ export default defineComponent({
       if (!tab) {
         return;
       }
+      if (!markerRef.value) {
+        return;
+      }
       markerRef.value.style.top = `${tab.offsetTop}px`;
       markerRef.value.style.left = `${tab.offsetLeft}px`;
       markerRef.value.style.width = `${tab.offsetWidth}px`;
@@ -114,16 +117,16 @@ export default defineComponent({
       selectedIndex.value = index;
       emit("change", index);
       if (props.modelValue !== void 0) {
-        emit("update:modelValue", index);
+        emit("update:modelValue", selectedIndex.value);
       }
-      calcMarkerSize(index);
+      calcMarkerSize(selectedIndex.value);
     }
     useResizeObserver(listRef, () => {
       calcMarkerSize(selectedIndex.value);
     });
     watch(() => props.modelValue, (value) => {
       selectedIndex.value = value;
-      calcMarkerSize(value);
+      calcMarkerSize(selectedIndex.value);
     });
     onMounted(() => calcMarkerSize(selectedIndex.value));
     return {