@nuxt/ui 2.8.1 → 2.10.0

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

@@ -4,7 +4,7 @@
     :model-value="modelValue"
     :multiple="multiple"
     :nullable="nullable"
-    :class="wrapperClass"
+    :class="ui.wrapper"
     v-bind="attrs"
     as="div"
     @update:model-value="onSelect"
@@ -16,17 +16,12 @@
         :value="query"
         :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
         :placeholder="placeholder"
+        :aria-label="placeholder"
         autocomplete="off"
         @change="query = $event.target.value"
       />
 
-      <UButton
-        v-if="closeButton"
-        v-bind="{ ...ui.default.closeButton, ...closeButton }"
-        :class="ui.input.closeButton"
-        aria-label="Close"
-        @click="onClear"
-      />
+      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
     </div>
 
     <HComboboxOptions
@@ -67,19 +62,20 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, defineComponent } from "vue";
+import { ref, computed, watch, toRef, onMounted, defineComponent } from "vue";
 import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from "@headlessui/vue";
 import { useDebounceFn } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
-import { twMerge, twJoin } from "tailwind-merge";
-import { groupBy, map, omit } from "lodash-es";
+import { twJoin } from "tailwind-merge";
 import { defu } from "defu";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import CommandPaletteGroup from "./CommandPaletteGroup.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { commandPalette } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette);
 export default defineComponent({
   components: {
     HCombobox,
@@ -121,23 +117,23 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.icon
+      default: () => config.default.icon
     },
     loadingIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.loadingIcon
+      default: () => config.default.loadingIcon
     },
     selectedIcon: {
       type: String,
-      default: () => appConfig.ui.commandPalette.default.selectedIcon
+      default: () => config.default.selectedIcon
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.commandPalette.default.closeButton
+      default: () => config.default.closeButton
     },
     emptyState: {
       type: Object,
-      default: () => appConfig.ui.commandPalette.default.emptyState
+      default: () => config.default.emptyState
     },
     placeholder: {
       type: String,
@@ -167,15 +163,18 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "close"],
-  setup(props, { emit, attrs, expose }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.commandPalette));
+  setup(props, { emit, expose }) {
+    const { ui, attrs } = useUI("commandPalette", toRef(props, "ui"), config, toRef(props, "class"));
     const query = ref("");
     const comboboxInput = ref();
     const comboboxApi = ref(null);
@@ -202,27 +201,49 @@ export default defineComponent({
       resultLimit: 12,
       matchAllWhenSearchEmpty: true
     }));
-    const commands = computed(() => props.groups.filter((group) => !group.search).reduce((acc, group) => {
-      return acc.concat(group.commands.map((command) => ({ ...command, group: group.key })));
-    }, []));
+    const commands = computed(() => {
+      const commands2 = [];
+      for (const group of props.groups) {
+        if (!group.search) {
+          commands2.push(...group.commands.map((command) => ({ ...command, group: group.key })));
+        }
+      }
+      return commands2;
+    });
     const searchResults = ref({});
     const { results } = useFuse(query, commands, options);
-    const groups = computed(() => [
-      ...map(groupBy(results.value, (command) => command.item.group), (results2, key) => {
-        const commands2 = results2.map((result) => {
+    const groups = computed(() => {
+      const groups2 = [];
+      const groupedCommands = {};
+      for (const command of results.value) {
+        groupedCommands[command.item.group] ||= [];
+        groupedCommands[command.item.group].push(command);
+      }
+      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
           };
         });
-        return {
-          ...props.groups.find((group) => group.key === key),
-          commands: commands2.slice(0, options.value.resultLimit)
-        };
-      }),
-      ...props.groups.filter((group) => !!group.search).map((group) => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter((group) => group.commands.length)
-    ]);
+        if (group.filter && typeof group.filter === "function") {
+          commands2 = group.filter(query.value, commands2);
+        }
+        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) });
+        }
+      }
+      return groups2;
+    });
     const debouncedSearch = useDebounceFn(async () => {
       const searchableGroups = props.groups.filter((group) => !!group.search);
       if (!searchableGroups.length) {
@@ -240,7 +261,6 @@ export default defineComponent({
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));
       }, 0);
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const iconName = computed(() => {
       if ((props.loading || isLoading.value) && props.loadingIcon) {
         return props.loadingIcon;
@@ -284,14 +304,13 @@ export default defineComponent({
       results
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       // eslint-disable-next-line vue/no-dupe-keys
       groups,
       comboboxInput,
       query,
-      wrapperClass,
       iconName,
       iconClass,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,11 +1,9 @@
-/// <reference types="lodash" />
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
-import type { Group, Command } from '../../types/command-palette';
-import type { Button } from '../../types/button';
+import type { Group, Command, Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: null;
     };
     by: {
@@ -46,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     emptyState: {
         type: PropType<{
@@ -84,24 +82,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UseFuseOptions<Command>>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: ComputedRef<any>;
-    groups: ComputedRef<{
-        commands: any;
-        key: string;
-        active?: string | undefined;
-        inactive?: string | undefined;
-    }[]>;
+    attrs: ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    groups: ComputedRef<Group[]>;
     comboboxInput: import("vue").Ref<ComponentPublicInstance<HTMLInputElement> | undefined>;
     query: import("vue").Ref<string>;
-    wrapperClass: ComputedRef<string>;
     iconName: ComputedRef<string | undefined>;
     iconClass: ComputedRef<string>;
     emptyState: ComputedRef<any>;
@@ -109,7 +105,7 @@ declare const _default: import("vue").DefineComponent<{
     onClear: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         default: null;
     };
     by: {
@@ -150,7 +146,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     emptyState: {
         type: PropType<{
@@ -188,17 +184,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UseFuseOptions<Command>>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     icon: string;
     closeButton: Button;
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
     loading: boolean;

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

@@ -105,7 +105,7 @@ export default defineComponent({
     },
     ui: {
       type: Object,
-      default: () => ({})
+      required: true
     }
   },
   setup(props) {

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Group } from '../../types/command-palette';
+import type { Group } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     group: {
         type: PropType<Group>;
@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     ui: {
         type: PropType<any>;
-        default: () => {};
+        required: true;
     };
 }, {
     label: import("vue").ComputedRef<any>;
@@ -54,10 +54,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     ui: {
         type: PropType<any>;
-        default: () => {};
+        required: true;
     };
 }>>, {
-    ui: any;
     query: string;
 }, {}>;
 export default _default;

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

@@ -1,13 +1,27 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
+    <slot name="first" :on-click="onClickFirst">
+      <UButton
+        v-if="firstButton && showFirst"
+        :size="size"
+        :disabled="!canGoFirstOrPrev"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.firstButton, ...firstButton }"
+        :ui="{ rounded: '' }"
+        aria-label="First"
+        @click="onClickFirst"
+      />
+    </slot>
+
     <slot name="prev" :on-click="onClickPrev">
       <UButton
         v-if="prevButton"
         :size="size"
-        :disabled="!canGoPrev"
+        :disabled="!canGoFirstOrPrev"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.prevButton, ...prevButton }"
         :ui="{ rounded: '' }"
+        aria-label="Prev"
         @click="onClickPrev"
       />
     </slot>
@@ -27,24 +41,39 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoNext"
+        :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.nextButton, ...nextButton }"
         :ui="{ rounded: '' }"
+        aria-label="Next"
         @click="onClickNext"
       />
     </slot>
+
+    <slot name="last" :on-click="onClickLast">
+      <UButton
+        v-if="lastButton && showLast"
+        :size="size"
+        :disabled="!canGoLastOrNext"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.lastButton, ...lastButton }"
+        :ui="{ rounded: '' }"
+        aria-label="Last"
+        @click="onClickLast"
+      />
+    </slot>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
+import { computed, toRef, defineComponent } from "vue";
 import UButton from "../elements/Button.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { pagination, button } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.pagination, pagination);
+const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 export default defineComponent({
   components: {
     UButton
@@ -67,45 +96,64 @@ export default defineComponent({
       type: Number,
       default: 7,
       validate(value) {
-        return value >= 7 && value < Number.MAX_VALUE;
+        return value >= 5 && value < Number.MAX_VALUE;
       }
     },
     size: {
       type: String,
-      default: () => appConfig.ui.pagination.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.button.size).includes(value);
+        return Object.keys(buttonConfig.size).includes(value);
       }
     },
     activeButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.activeButton
+      default: () => config.default.activeButton
     },
     inactiveButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.inactiveButton
+      default: () => config.default.inactiveButton
+    },
+    showFirst: {
+      type: Boolean,
+      default: false
+    },
+    showLast: {
+      type: Boolean,
+      default: false
+    },
+    firstButton: {
+      type: Object,
+      default: () => config.default.firstButton
+    },
+    lastButton: {
+      type: Object,
+      default: () => config.default.lastButton
     },
     prevButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.prevButton
+      default: () => config.default.prevButton
     },
     nextButton: {
       type: Object,
-      default: () => appConfig.ui.pagination.default.nextButton
+      default: () => config.default.nextButton
     },
     divider: {
       type: String,
       default: "\u2026"
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.pagination));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("pagination", toRef(props, "ui"), config, toRef(props, "class"));
     const currentPage = computed({
       get() {
         return props.modelValue;
@@ -116,50 +164,66 @@ export default defineComponent({
     });
     const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1));
     const displayedPages = computed(() => {
-      if (!props.max || pages.value.length <= 5) {
-        return pages.value;
-      } else {
-        const current = currentPage.value;
-        const max = pages.value.length;
-        const r = Math.floor((Math.min(props.max, max) - 5) / 2);
-        const r1 = current - r;
-        const r2 = current + r;
-        const beforeWrapped = r1 - 1 > 1;
-        const afterWrapped = r2 + 1 < max;
-        const items = [1];
-        if (beforeWrapped)
-          items.push(props.divider);
-        if (!afterWrapped) {
-          const addedItems = current + r + 2 - max;
-          for (let i = current - r - addedItems; i <= current - r - 1; i++) {
-            items.push(i);
-          }
-        }
-        for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) {
+      const totalPages = pages.value.length;
+      const current = currentPage.value;
+      const maxDisplayedPages = Math.max(props.max, 5);
+      const r = Math.floor((Math.min(maxDisplayedPages, totalPages) - 5) / 2);
+      const r1 = current - r;
+      const r2 = current + r;
+      const beforeWrapped = r1 - 1 > 1;
+      const afterWrapped = r2 + 1 < totalPages;
+      const items = [];
+      if (totalPages <= maxDisplayedPages) {
+        for (let i = 1; i <= totalPages; i++) {
           items.push(i);
         }
-        if (!beforeWrapped) {
-          const addedItems = 1 - (current - r - 2);
-          for (let i = current + r + 1; i <= current + r + addedItems; i++) {
-            items.push(i);
-          }
-        }
-        if (afterWrapped)
-          items.push(props.divider);
-        if (r2 < max)
-          items.push(max);
-        if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
-          items[1] = 2;
+        return items;
+      }
+      items.push(1);
+      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++) {
+          items.push(i);
         }
-        if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
-          items[items.length - 2] = items.length - 1;
+      }
+      for (let i = Math.max(2, r1); i <= Math.min(totalPages, r2); i++) {
+        items.push(i);
+      }
+      if (!beforeWrapped) {
+        const addedItems = 1 - (current - r - 2);
+        for (let i = current + r + 1; i <= current + r + addedItems; i++) {
+          items.push(i);
         }
-        return items;
       }
+      if (afterWrapped)
+        items.push(props.divider);
+      if (r2 < totalPages) {
+        items.push(totalPages);
+      }
+      if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
+        items[1] = 2;
+      }
+      if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
+        items[items.length - 2] = items.length - 1;
+      }
+      return items;
     });
-    const canGoPrev = computed(() => currentPage.value > 1);
-    const canGoNext = computed(() => currentPage.value < pages.value.length);
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const canGoFirstOrPrev = computed(() => currentPage.value > 1);
+    const canGoLastOrNext = computed(() => currentPage.value < pages.value.length);
+    function onClickFirst() {
+      if (!canGoFirstOrPrev.value) {
+        return;
+      }
+      currentPage.value = 1;
+    }
+    function onClickLast() {
+      if (!canGoLastOrNext.value) {
+        return;
+      }
+      currentPage.value = pages.value.length;
+    }
     function onClickPage(page) {
       if (typeof page === "string") {
         return;
@@ -167,30 +231,31 @@ export default defineComponent({
       currentPage.value = page;
     }
     function onClickPrev() {
-      if (!canGoPrev.value) {
+      if (!canGoFirstOrPrev.value) {
         return;
       }
       currentPage.value--;
     }
     function onClickNext() {
-      if (!canGoNext.value) {
+      if (!canGoLastOrNext.value) {
         return;
       }
       currentPage.value++;
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       currentPage,
       pages,
       displayedPages,
-      canGoPrev,
-      canGoNext,
-      wrapperClass,
+      canGoLastOrNext,
+      canGoFirstOrPrev,
       onClickPrev,
       onClickNext,
-      onClickPage
+      onClickPage,
+      onClickFirst,
+      onClickLast
     };
   }
 });