@nuxt/ui 2.9.0 → 2.10.0

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

@@ -1,10 +1,23 @@
 <template>
   <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: '' }"
@@ -28,7 +41,7 @@
       <UButton
         v-if="nextButton"
         :size="size"
-        :disabled="!canGoNext"
+        :disabled="!canGoLastOrNext"
         :class="[ui.base, ui.rounded]"
         v-bind="{ ...ui.default.nextButton, ...nextButton }"
         :ui="{ rounded: '' }"
@@ -36,6 +49,19 @@
         @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>
 
@@ -88,6 +114,22 @@ export default defineComponent({
       type: Object,
       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: () => config.default.prevButton
@@ -168,8 +210,20 @@ export default defineComponent({
       }
       return items;
     });
-    const canGoPrev = computed(() => currentPage.value > 1);
-    const canGoNext = computed(() => currentPage.value < pages.value.length);
+    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;
@@ -177,13 +231,13 @@ 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++;
@@ -195,11 +249,13 @@ export default defineComponent({
       currentPage,
       pages,
       displayedPages,
-      canGoPrev,
-      canGoNext,
+      canGoLastOrNext,
+      canGoFirstOrPrev,
       onClickPrev,
       onClickNext,
-      onClickPage
+      onClickPage,
+      onClickFirst,
+      onClickLast
     };
   }
 });

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

@@ -31,6 +31,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Button>;
         default: () => Button;
     };
+    showFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
+    lastButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
     prevButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -59,11 +75,13 @@ declare const _default: import("vue").DefineComponent<{
     currentPage: import("vue").WritableComputedRef<number>;
     pages: import("vue").ComputedRef<number[]>;
     displayedPages: import("vue").ComputedRef<(string | number)[]>;
-    canGoPrev: import("vue").ComputedRef<boolean>;
-    canGoNext: import("vue").ComputedRef<boolean>;
+    canGoLastOrNext: import("vue").ComputedRef<boolean>;
+    canGoFirstOrPrev: import("vue").ComputedRef<boolean>;
     onClickPrev: () => void;
     onClickNext: () => void;
     onClickPage: (page: number | string) => void;
+    onClickFirst: () => void;
+    onClickLast: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
@@ -95,6 +113,22 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Button>;
         default: () => Button;
     };
+    showFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    firstButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
+    lastButton: {
+        type: PropType<Button>;
+        default: () => Button;
+    };
     prevButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -122,11 +156,15 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     size: string | number | symbol;
     max: number;
+    divider: string;
     pageCount: number;
     activeButton: Button;
     inactiveButton: Button;
+    showFirst: boolean;
+    showLast: boolean;
+    firstButton: Button;
+    lastButton: Button;
     prevButton: Button;
     nextButton: Button;
-    divider: string;
 }, {}>;
 export default _default;

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

@@ -26,7 +26,7 @@
       >
         <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
           <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
-            {{ item.label }}
+            <span class="truncate">{{ item.label }}</span>
           </slot>
         </button>
       </HTab>

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

@@ -1,8 +1,11 @@
 <template>
   <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
     <Transition appear v-bind="ui.transition">
-      <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
-        <slot />
+      <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 :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
+          <slot />
+        </div>
       </div>
     </Transition>
   </div>
@@ -72,6 +75,8 @@ export default defineComponent({
       attrs,
       isOpen,
       wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       container
     };
   }

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

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
     wrapperClass: import("vue").ComputedRef<string>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     container: Ref<import("@vueuse/core").MaybeElement>;
 }, 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: {
@@ -51,8 +52,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     popper: PopperOptions;

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

@@ -6,7 +6,7 @@
       </TransitionChild>
 
       <div :class="ui.inner">
-        <div :class="[ui.container, ui.padding]">
+        <div :class="[ui.container, !fullscreen && ui.padding]">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
             <HDialogPanel
               :class="[

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

@@ -74,8 +74,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     class: any;

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

@@ -1,6 +1,12 @@
 <template>
   <Transition appear v-bind="ui.transition">
-    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <div
+      :class="wrapperClass"
+      role="status" 
+      v-bind="attrs"
+      @mouseover="onMouseover" 
+      @mouseleave="onMouseleave"
+    >
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
           <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="wrapperClass" role="region" v-bind="attrs">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification

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

@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,18 +8,21 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
-        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-          <slot name="panel" :open="open" :close="close" />
-        </HPopoverPanel>
+        <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)]" />
+          <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+            <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
+          </HPopoverPanel>
+        </div>
       </Transition>
     </div>
   </HPopover>
@@ -48,6 +51,10 @@ export default defineComponent({
       default: "click",
       validator: (value) => ["click", "hover"].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -91,7 +98,13 @@ export default defineComponent({
     });
     const containerStyle = computed(() => {
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+      const padding = `${offsetDistance}px`;
+      return props.mode === "hover" ? {
+        paddingTop: padding,
+        paddingBottom: padding,
+        paddingLeft: padding,
+        paddingRight: padding
+      } : {};
     });
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
@@ -130,6 +143,8 @@ export default defineComponent({
       ui,
       attrs,
       popover: popover2,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,

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

@@ -6,6 +6,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -36,14 +40,19 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     popover: any;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     } | {
         paddingTop?: undefined;
         paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
@@ -53,6 +62,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -82,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
     popper: PopperOptions;
     class: any;
     disabled: boolean;
+    open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;

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

@@ -76,8 +76,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: Partial<any>;
     class: any;

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

@@ -6,17 +6,21 @@
 
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
-        <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
-          <slot name="text">
-            {{ text }}
-          </slot>
+        <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)]" />
 
-          <span v-if="shortcuts?.length" :class="ui.shortcuts">
-            <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
-            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
-              {{ shortcut }}
-            </Ukbd>
-          </span>
+          <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
+            <slot name="text">
+              {{ text }}
+            </slot>
+  
+            <span v-if="shortcuts?.length" :class="ui.shortcuts">
+              <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+              <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
+                {{ shortcut }}
+              </Ukbd>
+            </span>
+          </div>
         </div>
       </Transition>
     </div>
@@ -109,6 +113,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       open,

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

@@ -38,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     open: import("vue").Ref<boolean>;

package/dist/runtime/composables/useFormGroup.d.ts

@@ -1,12 +1,12 @@
 type InputProps = {
     id?: string;
-    size?: string;
+    size?: string | number | symbol;
     color?: string;
     name?: string;
 };
 export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
-    inputId: import("vue").ComputedRef<any>;
-    name: import("vue").ComputedRef<any>;
+    inputId: import("vue").Ref<string | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
     size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string | undefined>;
     emitFormBlur: () => void;

package/dist/runtime/composables/useFormGroup.mjs

@@ -1,11 +1,19 @@
-import { inject, ref, computed } from "vue";
+import { inject, ref, computed, onMounted } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 export const useFormGroup = (inputProps, config) => {
   const formBus = inject("form-events", void 0);
   const formGroup = inject("form-group", void 0);
-  if (formGroup) {
-    formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value;
-  }
+  const formInputs = inject("form-inputs", void 0);
+  const inputId = ref(inputProps?.id);
+  onMounted(() => {
+    inputId.value = inputProps?.id ?? formGroup?.inputId.value;
+    if (formGroup) {
+      formGroup.inputId.value = inputId.value;
+      if (formInputs) {
+        formInputs.value[formGroup.name.value] = inputId;
+      }
+    }
+  });
   const blurred = ref(false);
   function emitFormEvent(type, path) {
     if (formBus) {
@@ -25,9 +33,12 @@ export const useFormGroup = (inputProps, config) => {
     }
   }, 300);
   return {
-    inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
+    inputId,
     name: computed(() => inputProps?.name ?? formGroup?.name.value),
-    size: computed(() => inputProps?.size ?? formGroup?.size.value ?? config?.default?.size),
+    size: computed(() => {
+      const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null;
+      return inputProps?.size ?? formGroupSize ?? config?.default?.size;
+    }),
     color: computed(() => formGroup?.error?.value ? "red" : inputProps?.color),
     emitFormBlur,
     emitFormInput,

package/dist/runtime/composables/usePopper.d.ts

@@ -1,10 +1,10 @@
 import type { Ref } from 'vue';
-import { VirtualElement } from '@popperjs/core/lib/popper-lite';
+import type { VirtualElement } from '@popperjs/core/lib/popper-lite';
 import type { Instance } from '@popperjs/core';
-import { MaybeElement } from '@vueuse/core';
+import type { MaybeElement } from '@vueuse/core';
 import type { PopperOptions } from '../types/popper';
 export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
-export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
+export declare function usePopper({ locked, overflowPadding, offsetDistance, offsetSkid, gpuAcceleration, adaptive, scroll, resize, arrow, placement, strategy }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>): readonly [Ref<MaybeElement>, Ref<MaybeElement>, Ref<{
     state: {
         elements: {
             reference: Element | {

package/dist/runtime/composables/usePopper.mjs

@@ -5,9 +5,10 @@ import offset from "@popperjs/core/lib/modifiers/offset";
 import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow";
 import computeStyles from "@popperjs/core/lib/modifiers/computeStyles";
 import eventListeners from "@popperjs/core/lib/modifiers/eventListeners";
+import arrowModifier from "@popperjs/core/lib/modifiers/arrow";
 import { unrefElement } from "@vueuse/core";
 export const createPopper = popperGenerator({
-  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners]
+  defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners, arrowModifier]
 });
 export function usePopper({
   locked = false,
@@ -18,6 +19,7 @@ export function usePopper({
   adaptive = true,
   scroll = true,
   resize = true,
+  arrow = false,
   placement,
   strategy
 }, virtualReference) {
@@ -71,6 +73,10 @@ export function usePopper({
               scroll,
               resize
             }
+          },
+          {
+            name: "arrow",
+            enabled: arrow
           }
         ]
       };

package/dist/runtime/composables/useUI.d.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue';
-import { Strategy } from '../types';
+import type { Strategy } from '../types';
 export declare const useUI: <T>(key: any, $ui: Ref<Partial<T & {
     strategy: Strategy;
-}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>) => {
+}> | undefined>, $config?: T | Ref<T> | undefined, $wrapperClass?: Ref<string>, withAppConfig?: boolean) => {
     ui: import("vue").ComputedRef<T>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;

package/dist/runtime/composables/useUI.mjs

@@ -1,7 +1,7 @@
 import { computed, toValue, useAttrs } from "vue";
 import { useAppConfig } from "#imports";
 import { mergeConfig, omit, get } from "../utils/index.mjs";
-export const useUI = (key, $ui, $config, $wrapperClass) => {
+export const useUI = (key, $ui, $config, $wrapperClass, withAppConfig = false) => {
   const $attrs = useAttrs();
   const appConfig = useAppConfig();
   const ui = computed(() => {
@@ -12,7 +12,7 @@ export const useUI = (key, $ui, $config, $wrapperClass) => {
       _ui?.strategy || appConfig.ui?.strategy,
       _wrapperClass ? { wrapper: _wrapperClass } : {},
       _ui || {},
-      process.dev ? get(appConfig.ui, key, {}) : {},
+      process.dev || withAppConfig ? get(appConfig.ui, key, {}) : {},
       _config || {}
     );
   });

package/dist/runtime/types/command-palette.d.ts

@@ -23,5 +23,6 @@ export interface Group {
   inactive?: string
   commands?: Command[]
   search?: Function
+  filter?: Function
   [key: string]: any
 }