@nuxt/ui 2.10.0 → 2.11.1

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"],
@@ -181,7 +181,7 @@ export default defineComponent({
     const isLoading = ref(false);
     onMounted(() => {
       if (props.autoselect) {
-        activateFirstOption();
+        activateNextOption();
       }
     });
     onMounted(() => {
@@ -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);
@@ -254,12 +263,11 @@ export default defineComponent({
         searchResults.value[group.key] = await group.search(query.value);
       }));
       isLoading.value = false;
+      activateFirstOption();
     }, props.debounce);
     watch(query, () => {
       debouncedSearch();
-      setTimeout(() => {
-        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
-      }, 0);
+      activateFirstOption();
     });
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
@@ -271,11 +279,16 @@ 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 }));
     function activateFirstOption() {
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
+      }, 0);
+    }
+    function activateNextOption() {
       setTimeout(() => {
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
       }, 0);

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,19 +193,19 @@ 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: any;
     icon: string;
     closeButton: Button;
-    ui: Partial<any>;
     class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: 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

@@ -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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Button } from '../../types';
+import type { Button, ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -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>;
@@ -101,7 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         validate(value: any): boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -143,18 +143,18 @@ 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;
 }, {
-    ui: Partial<any>;
+    size: ButtonSize;
+    ui: any;
     class: any;
-    size: string | number | symbol;
     max: number;
     divider: string;
     pageCount: number;

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 {

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

@@ -20,11 +20,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>;
@@ -34,8 +34,8 @@ declare const _default: import("vue").DefineComponent<{
     listRef: import("vue").Ref<HTMLElement | undefined>;
     itemRefs: import("vue").Ref<HTMLElement[]>;
     markerRef: import("vue").Ref<HTMLElement | undefined>;
-    selectedIndex: import("vue").Ref<number>;
-    onChange: (index: any) => void;
+    selectedIndex: import("vue").Ref<number | undefined>;
+    onChange: (index: number) => void;
 }, 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<{
     modelValue: {
         type: NumberConstructor;
@@ -56,21 +56,21 @@ 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;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    orientation: "horizontal" | "vertical";
+    ui: any;
     class: any;
     modelValue: number;
     items: TabItem[];
-    orientation: "horizontal" | "vertical";
     defaultIndex: number;
 }, {}>;
 export default _default;

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

@@ -61,11 +61,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/VerticalNavigation.vue.d.ts

@@ -8,11 +8,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>;
@@ -27,14 +27,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;
     links: VerticalNavigationLink[];
 }, {}>;

package/dist/runtime/components/overlays/ContextMenu.vue

@@ -2,7 +2,8 @@
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <Transition appear v-bind="ui.transition">
       <div>
-        <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+        <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
+
         <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
           <slot />
         </div>
@@ -39,11 +40,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -15,11 +15,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>;
@@ -45,17 +45,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;
     popper: PopperOptions;
     class: any;
     modelValue: boolean;

package/dist/runtime/components/overlays/Modal.vue

@@ -14,10 +14,7 @@
                 ui.background,
                 ui.ring,
                 ui.shadow,
-                fullscreen ? 'w-screen' : ui.width,
-                fullscreen ? 'h-screen' : ui.height,
-                fullscreen ? 'rounded-none' : ui.rounded,
-                fullscreen ? 'm-0' : ui.margin
+                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
               ]"
             >
               <slot />
@@ -72,11 +69,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "close"],

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -26,11 +26,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>;
@@ -67,17 +67,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;
     class: any;
     modelValue: boolean;
     appear: boolean;