@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.10

package/dist/runtime/components/ColorPicker.vue

@@ -0,0 +1,265 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/color-picker'
+
+const appConfig = _appConfig as AppConfig & { ui: { colorPicker: Partial<typeof theme> } }
+
+const colorPicker = tv({ extend: tv(theme), ...(appConfig.ui?.colorPicker || {}) })
+
+type ColorPickerVariants = VariantProps<typeof colorPicker>
+
+type HSVColor = {
+  h: number
+  s: number
+  v: number
+}
+
+export type ColorPickerProps = {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * Throttle time in ms for the color picker
+   */
+  throttle?: number
+  /**
+   * Disable the color picker
+   */
+  disabled?: boolean
+  /**
+   * The default value of the color picker
+   */
+  defaultValue?: string
+  /**
+   * Format of the color
+   * @defaultValue 'hex'
+   */
+  format?: 'hex' | 'rgb' | 'hsl' | 'hwb'
+  size?: ColorPickerVariants['size']
+  class?: any
+  ui?: Partial<typeof colorPicker.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, toValue } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useEventListener, useElementBounding, watchThrottled, watchPausable } from '@vueuse/core'
+import { isClient } from '@vueuse/shared'
+import Color from 'color'
+
+const props = withDefaults(defineProps<ColorPickerProps>(), {
+  format: 'hex',
+  throttle: 50,
+  defaultValue: '#FFFFFF'
+})
+const modelValue = defineModel<string>(undefined)
+
+const pickedColor = computed<HSVColor>({
+  get() {
+    try {
+      const color = Color(modelValue.value || props.defaultValue)
+      return color.hsv().object() as HSVColor
+    } catch (_) {
+      return { h: 0, s: 0, v: 100 }
+    }
+  },
+  set(value) {
+    const color = Color.hsv(value.h, value.s, value.v)
+
+    switch (props.format) {
+      case 'rgb':
+        modelValue.value = color.rgb().string()
+        break
+      case 'hsl':
+        modelValue.value = color.hsl().string()
+        break
+      case 'hwb':
+        modelValue.value = color.hwb().string()
+        break
+      case 'hex':
+      default:
+        modelValue.value = color.hex()
+    }
+  }
+})
+
+function useColorDraggable(targetElement: MaybeRefOrGetter<HTMLElement | null>,
+  containerElement: MaybeRefOrGetter<HTMLElement | null>,
+  axis: 'x' | 'y' | 'both' = 'both',
+  initialPosition = { x: 0, y: 0 },
+  disabled?: MaybeRefOrGetter<boolean | undefined>
+) {
+  const position = ref<{ x: number, y: number }>(initialPosition)
+  const pressedDelta = ref<{ x: number, y: number }>()
+  const targetRect = useElementBounding(targetElement)
+  const containerRect = useElementBounding(containerElement)
+
+  function start(event: PointerEvent) {
+    if (toValue(disabled)) return event.preventDefault()
+
+    const container = toValue(containerElement)
+
+    pressedDelta.value = {
+      x: event.clientX - (container ? event.clientX - containerRect.left.value + container.scrollLeft : targetRect.left.value),
+      y: event.clientY - (container ? event.clientY - containerRect.top.value + container.scrollTop : targetRect.top.value)
+    }
+
+    move(event)
+  }
+
+  function move(event: PointerEvent) {
+    if (!pressedDelta.value) return
+
+    const container = toValue(containerElement)
+    let { x, y } = position.value
+
+    if (container && (axis === 'x' || axis === 'both')) {
+      x = Math.min(Math.max(0, (event.clientX - pressedDelta.value.x) / container.scrollWidth * 100), 100)
+    }
+
+    if (container && (axis === 'y' || axis === 'both')) {
+      y = Math.min(Math.max(0, (event.clientY - pressedDelta.value.y) / container.scrollHeight * 100), 100)
+    }
+
+    position.value = { x, y }
+  }
+
+  function end() {
+    if (!pressedDelta.value) {
+      return
+    }
+
+    pressedDelta.value = undefined
+  }
+
+  if (isClient) {
+    useEventListener(containerElement, 'pointerdown', start)
+    useEventListener(window, 'pointermove', move)
+    useEventListener(window, 'pointerup', end)
+  }
+
+  return {
+    position
+  }
+}
+
+function normalizeHue(hue: number, dir: 'left' | 'right' = 'left'): number {
+  if (dir === 'right') {
+    return (hue * 100) / 360
+  }
+
+  return (hue / 100) * 360
+}
+
+function normalizeBrightness(brightness: number): number {
+  return 100 - brightness
+}
+
+const selectorRef = ref<HTMLDivElement | null>(null)
+const selectorThumbRef = ref<HTMLDivElement | null>(null)
+const trackRef = ref<HTMLDivElement | null>(null)
+const trackThumbRef = ref<HTMLDivElement | null>(null)
+
+const disabled = computed(() => props.disabled)
+
+const { position: selectorThumbPosition } = useColorDraggable(selectorThumbRef, selectorRef, 'both', {
+  x: pickedColor.value.s,
+  y: normalizeBrightness(pickedColor.value.v)
+}, disabled)
+
+const { position: trackThumbPosition } = useColorDraggable(trackThumbRef, trackRef, 'y', {
+  x: 0,
+  y: normalizeHue(pickedColor.value.h, 'right')
+}, disabled)
+
+const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsb) => {
+  selectorThumbPosition.value = {
+    x: hsb.s,
+    y: normalizeBrightness(hsb.v)
+  }
+  trackThumbPosition.value = {
+    x: 0,
+    y: normalizeHue(hsb.h, 'right')
+  }
+})
+
+watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
+  pauseWatchColor()
+
+  pickedColor.value = {
+    h: normalizeHue(trackThumbPosition.value.y),
+    s: selectorThumbPosition.value.x,
+    v: normalizeBrightness(selectorThumbPosition.value.y)
+  }
+
+  nextTick(resumeWatchColor)
+}, { throttle: () => props.throttle })
+
+const trackThumbColor = computed(() => Color({
+  h: normalizeHue(trackThumbPosition.value.y),
+  s: 100,
+  v: 100
+}).hex())
+
+const selectorStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value
+}))
+
+const selectorThumbStyle = computed(() => ({
+  backgroundColor: Color(modelValue.value || props.defaultValue).hex(),
+  left: `${selectorThumbPosition.value.x}%`,
+  top: `${selectorThumbPosition.value.y}%`
+}))
+
+const trackThumbStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value,
+  top: `${trackThumbPosition.value.y}%`
+}))
+
+const ui = computed(() => colorPicker({
+  size: props.size
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
+    <div :class="ui.picker({ class: props.ui?.picker })">
+      <div
+        ref="selectorRef"
+        :class="ui.selector({ class: props.ui?.selector })"
+        :style="selectorStyle"
+      >
+        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : undefined"
+          />
+        </div>
+      </div>
+      <div
+        ref="trackRef"
+        :class="ui.track({ class: props.ui?.track })"
+        data-color-picker-track
+      >
+        <div
+          ref="trackThumbRef"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : undefined"
+        />
+      </div>
+    </div>
+  </Primitive>
+</template>
+
+<style scoped>
+[data-color-picker-background]{background-image:linear-gradient(0deg,#000 0,transparent),linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}[data-color-picker-track]{background-image:linear-gradient(0deg,red,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red)}
+</style>

package/dist/runtime/components/CommandPalette.vue

@@ -1,37 +1,156 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/command-palette";
-const appConfig = _appConfig;
-const commandPalette = tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui'
+import type { FuseResult } from 'fuse.js'
+import type { AppConfig } from '@nuxt/schema'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/command-palette'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
+
+const commandPalette = tv({ extend: tv(theme), ...(appConfig.ui?.commandPalette || {}) })
+
+export interface CommandPaletteItem {
+  prefix?: string
+  label?: string
+  suffix?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  kbds?: KbdProps['value'][] | KbdProps[]
+  active?: boolean
+  loading?: boolean
+  disabled?: boolean
+  slot?: string
+  onSelect?(e?: Event): void
+}
+
+export interface CommandPaletteGroup<T> {
+  id: string
+  label?: string
+  slot?: string
+  items?: T[]
+  /**
+   * Whether to filter group items with [useFuse](https://vueuse.org/integrations/useFuse).
+   * When `true`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue false
+   */
+  ignoreFilter?: boolean
+  /** Filter group items after the search happened. */
+  postFilter?: (searchTerm: string, items: T[]) => T[]
+  /** The icon displayed when an item is highlighted. */
+  highlightedIcon?: string
+}
+
+export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The icon displayed in the input.
+   * @defaultValue appConfig.ui.icons.search
+   */
+  icon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The placeholder text for the input.
+   * @defaultValue 'Type a command or search...'
+   */
+  placeholder?: InputProps['placeholder']
+  /**
+   * Display a close button in the input (useful when inside a Modal for example).
+   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  groups?: G[]
+  /**
+   * Options for [useFuse](https://vueuse.org/integrations/useFuse).
+   * @defaultValue {
+      fuseOptions: {
+        ignoreLocation: true,
+        threshold: 0.1,
+        keys: ['label', 'suffix']
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: true
+    }
+   */
+  fuse?: UseFuseOptions<T>
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  class?: any
+  ui?: PartialString<typeof commandPalette.slots>
+}
+
+export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+  'update:open': [value: boolean]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+  'empty'(props: { searchTerm?: string }): any
+  'close'(props: { ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+} & DynamicSlots<G, SlotProps<T>> & DynamicSlots<T, SlotProps<T>>
+
+extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
 import { computed } from 'vue'
-import { ComboboxRoot, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxViewport, ComboboxGroup, ComboboxLabel, ComboboxItem, ComboboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'radix-vue'
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { useAppConfig } from '#imports'
+import { useLocale } from '../composables/useLocale'
+import { omit, get } from '../utils'
+import { highlight } from '../utils/fuse'
 import UIcon from './Icon.vue'
 import UAvatar from './Avatar.vue'
+import UButton from './Button.vue'
 import UChip from './Chip.vue'
 import UKbd from './Kbd.vue'
 import UInput from './Input.vue'
-import { omit } from '../utils'
-import { highlight } from '../utils/fuse'
 
 const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   modelValue: '',
-  placeholder: 'Type a command or search...'
+  placeholder: 'Type a command or search...',
+  labelKey: 'label'
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<G, T>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
 
+const { t } = useLocale()
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'selectedValue', 'resetSearchTermOnBlur'), emits)
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
 const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon', 'placeholder'))
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -41,7 +160,7 @@ const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     ignoreLocation: true,
     threshold: 0.1,
-    keys: ['label', 'suffix']
+    keys: [props.labelKey, 'suffix']
   },
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
@@ -53,7 +172,7 @@ const items = computed(() => props.groups?.filter((group) => {
     return false
   }
 
-  if (group.filter === false) {
+  if (group.ignoreFilter) {
     return false
   }
 
@@ -72,8 +191,8 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
     items: items.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
-        labelHtml: highlight<T>(item, searchTerm.value, 'label'),
-        suffixHtml: highlight<T>(item, searchTerm.value, undefined, ['label'])
+        labelHtml: highlight<T>(item, searchTerm.value, props.labelKey),
+        suffixHtml: highlight<T>(item, searchTerm.value, undefined, [props.labelKey])
       }
     })
   }
@@ -87,7 +206,7 @@ const groups = computed(() => {
     }
 
     acc[item.group] ||= []
-    acc[item.group].push({ ...item, matches })
+    acc[item.group]?.push({ ...item, matches })
 
     return acc
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
@@ -101,21 +220,22 @@ const groups = computed(() => {
     return getGroupWithItems(group, items)
   }).filter(group => !!group)
 
-  const nonFuseGroups = props.groups?.filter(group => group.filter === false && group.items?.length).map((group) => {
-    return getGroupWithItems(group, group.items || [])
-  }) || []
+  const nonFuseGroups = props.groups
+    ?.map((group, index) => ({ ...group, index }))
+    ?.filter(group => group.ignoreFilter && group.items?.length)
+    ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
 
-  return [
-    ...fuseGroups,
-    ...nonFuseGroups
-  ]
+  return nonFuseGroups.reduce((acc, group) => {
+    acc.splice(group.index, 0, group)
+    return acc
+  }, [...fuseGroups])
 })
 </script>
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ComboboxRoot v-bind="rootProps" v-model:search-term="searchTerm" open :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <ComboboxInput as-child>
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         variant="none"
         autofocus
@@ -130,9 +250,9 @@ const groups = computed(() => {
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
               size="md"
-              color="gray"
+              color="neutral"
               variant="ghost"
-              aria-label="Close"
+              :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : undefined"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
@@ -140,71 +260,70 @@ const groups = computed(() => {
           </slot>
         </template>
       </UInput>
-    </ComboboxInput>
+    </ListboxFilter>
 
-    <ComboboxPortal disabled>
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" :dismissable="false">
-        <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">
-          <slot name="empty" :search-term="searchTerm">
-            {{ searchTerm ? `No results for ${searchTerm}` : 'No results' }}
-          </slot>
-        </ComboboxEmpty>
-
-        <ComboboxViewport :class="ui.viewport({ class: props.ui?.viewport })">
-          <ComboboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
-            <ComboboxLabel v-if="group.label" :class="ui.label({ class: props.ui?.label })">
-              {{ group.label }}
-            </ComboboxLabel>
-
-            <ComboboxItem
-              v-for="(item, index) in group.items"
-              :key="`group-${groupIndex}-${index}`"
-              :value="omit(item, ['matches' as any, 'group' as any, 'select', 'labelHtml', 'suffixHtml'])"
-              :disabled="item.disabled"
-              :class="ui.item({ class: props.ui?.item })"
-              @select="item.select"
-            >
-              <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
-                <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                  <UAvatar v-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
-                  <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                  <UChip
-                    v-else-if="item.chip"
-                    :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
-                    inset
-                    standalone
-                    v-bind="item.chip"
-                    :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
-                  />
-                </slot>
+    <ListboxContent :class="ui.content({ class: props.ui?.content })">
+      <div v-if="groups?.length" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+          <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
+            {{ get(group, props.labelKey as string) }}
+          </ListboxGroupLabel>
 
-                <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
-                  <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
-                    <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
+          <ListboxItem
+            v-for="(item, index) in group.items"
+            :key="`group-${groupIndex}-${index}`"
+            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :disabled="item.disabled"
+            :class="ui.item({ class: props.ui?.item, active: item.active })"
+            @select="item.onSelect"
+          >
+            <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
+              <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
+                <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
+                <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: item.active })" />
+                <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: item.active })" />
+                <UChip
+                  v-else-if="item.chip"
+                  :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                  inset
+                  standalone
+                  v-bind="item.chip"
+                  :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: item.active })"
+                />
+              </slot>
 
-                    <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase })" v-html="item.labelHtml || item.label" />
+              <span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: item.active })">
+                <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
+                  <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>
 
-                    <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix })" v-html="item.suffixHtml || item.suffix" />
-                  </slot>
-                </span>
+                  <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
 
-                <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
-                  <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                    <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
-                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" 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 })" />
-                  </slot>
+                  <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: item.active })" v-html="item.suffixHtml || item.suffix" />
+                </slot>
+              </span>
 
-                  <ComboboxItemIndicator as-child>
-                    <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
-                  </ComboboxItemIndicator>
-                </span>
-              </slot>
-            </ComboboxItem>
-          </ComboboxGroup>
-        </ComboboxViewport>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+              <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
+                <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
+                  <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
+                    <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" 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 })" />
+                </slot>
+
+                <ListboxItemIndicator as-child>
+                  <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+                </ListboxItemIndicator>
+              </span>
+            </slot>
+          </ListboxItem>
+        </ListboxGroup>
+      </div>
+
+      <div v-else :class="ui.empty({ class: props.ui?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t('commandPalette.noMatch', { searchTerm }) : t('commandPalette.noData') }}
+        </slot>
+      </div>
+    </ListboxContent>
+  </ListboxRoot>
 </template>