fix(CommandPalette): generics and default types

Author: sandros94

src/runtime/components/CommandPalette.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui'
+import type { AcceptableValue, ListboxRootProps, ListboxRootEmits } from 'reka-ui'
 import type { FuseResult } from 'fuse.js'
 import type { AppConfig } from '@nuxt/schema'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
@@ -30,7 +30,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   onSelect?(e?: Event): void
 }
 
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
   id: string
   label?: string
   slot?: string
@@ -47,7 +47,7 @@ export interface CommandPaletteGroup<T> {
   highlightedIcon?: string
 }
 
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -108,13 +108,13 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   ui?: PartialString<typeof commandPalette.slots>
 }
 
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends AcceptableValue = AcceptableValue> = ListboxRootEmits<T> & {
   'update:open': [value: boolean]
 }
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
+type SlotProps<T extends CommandPaletteItem = CommandPaletteItem> = (props: { item: T, index: number }) => any
 
-export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
   'empty'(props: { searchTerm?: string }): any
   'close'(props: { ui: any }): any
   'item': SlotProps<T>
@@ -126,7 +126,7 @@ export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?:
 extendDevtoolsMeta({ example: 'CommandPaletteExample', ignoreProps: ['groups'] })
 </script>
 
-<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
+<script setup lang="ts" generic="T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>">
 import { computed } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
@@ -146,13 +146,13 @@ import ULink from './Link.vue'
 import UInput from './Input.vue'
 import UKbd from './Kbd.vue'
 
-const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
+const props = withDefaults(defineProps<CommandPaletteProps<T, G>>(), {
   modelValue: '',
   labelKey: 'label',
   autofocus: true
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
-const slots = defineSlots<CommandPaletteSlots<G, T>>()
+const slots = defineSlots<CommandPaletteSlots<T, G>>()
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })