@eslamdevui/ui 4.1.1-rc.1 → 4.3.0

package/dist/runtime/components/CheckboxGroup.vue

@@ -31,7 +31,7 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   color: { type: null, required: false },
   indicator: { type: null, required: false },
-  icon: { type: [String, Object], required: false }
+  icon: { type: null, required: false }
 });
 const emits = defineEmits(["update:modelValue", "change"]);
 const slots = defineSlots();
@@ -46,7 +46,8 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkboxGroup ||
   required: props.required,
   orientation: props.orientation,
   color: props.color,
-  variant: props.variant
+  variant: props.variant,
+  disabled: disabled.value
 }));
 function normalizeItem(item) {
   if (item === null) {
@@ -94,11 +95,12 @@ function onUpdate(value) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+    <fieldset data-slot="fieldset" :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="ui.legend({ class: props.ui?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -113,7 +115,8 @@ function onUpdate(value) {
         :name="name"
         :disabled="item.disabled || disabled"
         :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-slot="item"
+        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" :item="item" />

package/dist/runtime/components/CheckboxGroup.vue.d.ts

@@ -71,8 +71,12 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
     label: SlotProps<T[number]>;
     description: SlotProps<T[number]>;
 }
-declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
@@ -80,8 +84,8 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Chip.d.vue.ts

@@ -37,6 +37,8 @@ export interface ChipSlots {
     default(props?: {}): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -49,8 +51,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
     inset: boolean;
     standalone: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Chip.vue

@@ -34,12 +34,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chip || {} })
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" :class="ui.base({ class: props.ui?.base })">
+    <span v-if="show" data-slot="base" :class="ui.base({ class: props.ui?.base })">
       <slot name="content">
         {{ text }}
       </slot>

package/dist/runtime/components/Chip.vue.d.ts

@@ -37,6 +37,8 @@ export interface ChipSlots {
     default(props?: {}): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps & {
     show?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -49,8 +51,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
     inset: boolean;
     standalone: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Collapsible.d.vue.ts

@@ -20,6 +20,8 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
@@ -27,8 +29,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Collap
 }>, {
     unmountOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Collapsible.vue

@@ -25,12 +25,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible |
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <slot name="content" />
     </CollapsibleContent>
   </CollapsibleRoot>

package/dist/runtime/components/Collapsible.vue.d.ts

@@ -20,6 +20,8 @@ export interface CollapsibleSlots {
     }): any;
     content(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
@@ -27,8 +29,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Collap
 }>, {
     unmountOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ColorPicker.d.vue.ts

@@ -32,6 +32,8 @@ export type ColorPickerProps = {
     class?: any;
     ui?: ColorPicker['slots'];
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -45,5 +47,3 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     throttle: number;
     format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/ColorPicker.vue

@@ -178,16 +178,18 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
-    <div :class="ui.picker({ class: props.ui?.picker })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : void 0">
+    <div data-slot="picker" :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
+        data-slot="selector"
         :class="ui.selector({ class: props.ui?.selector })"
         :style="selectorStyle"
       >
-        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+        <div data-slot="selectorBackground" :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
           <div
             ref="selectorThumbRef"
+            data-slot="selectorThumb"
             :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
             :style="selectorThumbStyle"
             :data-disabled="disabled ? true : void 0"
@@ -196,11 +198,13 @@ const trackThumbStyle = computed(() => ({
       </div>
       <div
         ref="trackRef"
+        data-slot="track"
         :class="ui.track({ class: props.ui?.track })"
         data-color-picker-track
       >
         <div
           ref="trackThumbRef"
+          data-slot="trackThumb"
           :class="ui.trackThumb({ class: props.ui?.trackThumb })"
           :style="trackThumbStyle"
           :data-disabled="disabled ? true : void 0"

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -32,6 +32,8 @@ export type ColorPickerProps = {
     class?: any;
     ui?: ColorPicker['slots'];
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     modelValue?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -45,5 +47,3 @@ declare const __VLS_export: import("vue").DefineComponent<ColorPickerProps & {
     throttle: number;
     format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types';
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps, LinkPropsKeys } from '../types';
 import type { GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
@@ -98,7 +98,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @emits 'update:open'
      * @defaultValue false
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -110,7 +110,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
      * @defaultValue true
      */
-    back?: boolean | ButtonProps;
+    back?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the back button.
      * @defaultValue appConfig.ui.icons.arrowLeft
@@ -194,13 +194,17 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
-declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps;
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<G, T>;
@@ -211,8 +215,8 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/CommandPalette.vue

@@ -6,14 +6,15 @@ import theme from "#build/ui/command-palette";
 import { computed, ref, useTemplateRef, toRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
-import { tv } from "../utils/tv";
 import { highlight } from "../utils/fuse";
 import { pickLinkProps } from "../utils/link";
+import { getEstimateSize } from "../utils/virtualizer";
+import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
@@ -22,18 +23,19 @@ import ULinkBase from "./LinkBase.vue";
 import ULink from "./Link.vue";
 import UInput from "./Input.vue";
 import UKbd from "./Kbd.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
-  trailingIcon: { type: [String, Object], required: false },
-  selectedIcon: { type: [String, Object], required: false },
-  childrenIcon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
+  trailingIcon: { type: null, required: false },
+  selectedIcon: { type: null, required: false },
+  childrenIcon: { type: null, required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
-  closeIcon: { type: [String, Object], required: false },
+  closeIcon: { type: null, required: false },
   back: { type: [Boolean, Object], required: false, default: true },
-  backIcon: { type: [String, Object], required: false },
+  backIcon: { type: null, required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
   virtualize: { type: [Boolean, Object], required: false, default: false },
@@ -49,7 +51,7 @@ const props = defineProps({
   highlightOnHover: { type: Boolean, required: false, default: true },
   selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: [String, Object], required: false }
+  loadingIcon: { type: null, required: false }
 });
 const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
 const slots = defineSlots();
@@ -58,7 +60,12 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading"));
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, { estimateSize: 32 }));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey)
+  });
+});
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -101,13 +108,15 @@ const items = computed(() => groups.value?.filter((group) => {
   return true;
 })?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
-function getGroupWithItems(group, items2) {
+const throttledFuseResults = refThrottled(fuseResults, 16, true);
+function processGroupItems(group, items2) {
+  let processedItems = items2;
   if (group?.postFilter && typeof group.postFilter === "function") {
-    items2 = group.postFilter(searchTerm.value, items2);
+    processedItems = group.postFilter(searchTerm.value, processedItems);
   }
   return {
     ...group,
-    items: items2.slice(0, fuse.value.resultLimit).map((item) => {
+    items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
         labelHtml: highlight(item, searchTerm.value, props.labelKey),
@@ -117,7 +126,8 @@ function getGroupWithItems(group, items2) {
   };
 }
 const filteredGroups = computed(() => {
-  const groupsById = fuseResults.value.reduce((acc, result) => {
+  const currentGroups = groups.value;
+  const groupsById = throttledFuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
       return acc;
@@ -128,32 +138,40 @@ const filteredGroups = computed(() => {
   }, {});
   if (props.preserveGroupOrder) {
     const processedGroups = [];
-    for (const group of groups.value || []) {
+    for (const group of currentGroups || []) {
       if (!group.items?.length) {
         continue;
       }
       const items2 = group.ignoreFilter ? group.items : groupsById[group.id];
-      if (items2?.length) {
-        processedGroups.push(getGroupWithItems(group, items2));
+      if (!items2?.length) {
+        continue;
+      }
+      const processedGroup = processGroupItems(group, items2);
+      if (processedGroup.items?.length) {
+        processedGroups.push(processedGroup);
       }
     }
     return processedGroups;
   }
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = groups.value?.find((group2) => group2.id === id);
+    const group = currentGroups?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
-    return getGroupWithItems(group, items2);
+    const processedGroup = processGroupItems(group, items2);
+    return processedGroup.items?.length ? processedGroup : void 0;
   }).filter((group) => !!group);
-  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = currentGroups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => {
+    const processedGroup = processGroupItems(group, group.items || []);
+    return { ...processedGroup, index: group.index };
+  })?.filter((group) => group.items?.length) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
   }, [...fuseGroups]);
 });
 const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group.items || []));
-const listboxRootRef = useTemplateRef("listboxRootRef");
+const rootRef = useTemplateRef("rootRef");
 function navigate(item) {
   if (!item.children?.length) {
     return;
@@ -166,7 +184,7 @@ function navigate(item) {
     items: item.children
   });
   searchTerm.value = "";
-  listboxRootRef.value?.highlightFirstItem();
+  rootRef.value?.highlightFirstItem();
 }
 function navigateBack() {
   if (!history.value.length) {
@@ -174,7 +192,7 @@ function navigateBack() {
   }
   history.value.pop();
   searchTerm.value = "";
-  listboxRootRef.value?.highlightFirstItem();
+  rootRef.value?.highlightFirstItem();
 }
 function onBackspace() {
   if (!searchTerm.value) {
@@ -200,57 +218,61 @@ function onSelect(e, item) {
       @select="onSelect($event, item)"
     >
       <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-        <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
           <slot :name="item.slot || group?.slot || 'item'" :item="item" :index="index" :ui="ui">
             <slot :name="item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index" :ui="ui">
-              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-              <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-              <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+              <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
               <UChip
                 v-else-if="item.chip"
                 :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
                 inset
                 standalone
                 v-bind="item.chip"
+                data-slot="itemLeadingChip"
                 :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
               />
             </slot>
 
-            <span v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
-              <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+            <span v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
                 <slot :name="item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index" :ui="ui">
-                  <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                  <span v-if="item.prefix" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
 
-                  <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
+                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey) }}</span>
 
-                  <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
                 </slot>
               </span>
 
-              <span v-if="get(item, props.descriptionKey)" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
                 <slot :name="item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`" :item="item" :index="index" :ui="ui">
                   {{ get(item, props.descriptionKey) }}
                 </slot>
               </span>
             </span>
 
-            <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+            <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
               <slot :name="item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index" :ui="ui">
                 <UIcon
                   v-if="item.children && item.children.length > 0"
                   :name="childrenIcon || appConfig.ui.icons.chevronRight"
+                  data-slot="itemTrailingIcon"
                   :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
                 />
 
-                <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                   <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                 </span>
 
-                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" data-slot="itemTrailingHighlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
               </slot>
 
               <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
               </ListboxItemIndicator>
             </span>
           </slot>
@@ -259,7 +281,7 @@ function onSelect(e, item) {
     </ListboxItem>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"
@@ -269,6 +291,7 @@ function onSelect(e, item) {
         :loading-icon="loadingIcon"
         :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
+        data-slot="input"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
       >
@@ -280,6 +303,7 @@ function onSelect(e, item) {
               variant="link"
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
+              data-slot="back"
               :class="ui.back({ class: props.ui?.back })"
               @click="navigateBack"
             />
@@ -295,6 +319,7 @@ function onSelect(e, item) {
               variant="ghost"
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"
+              data-slot="close"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
@@ -303,8 +328,8 @@ function onSelect(e, item) {
       </UInput>
     </ListboxFilter>
 
-    <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <ListboxVirtualizer
           v-if="!!virtualize"
           v-slot="{ option: item, virtualItem }"
@@ -316,8 +341,8 @@ function onSelect(e, item) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               {{ get(group, props.labelKey) }}
             </ListboxGroupLabel>
 
@@ -332,14 +357,14 @@ function onSelect(e, item) {
         </template>
       </div>
 
-      <div v-else :class="ui.empty({ class: props.ui?.empty })">
+      <div v-else data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :ui="ui" />
     </div>
   </ListboxRoot>