@nuxt/ui 3.0.1 → 3.1.0

package/dist/runtime/components/CommandPalette.vue

@@ -1,255 +1,116 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-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 { tv } from '../utils/tv'
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps } from '../types'
-import type { DynamicSlots, PartialString } from '../types/utils'
-
-const appConfigCommandPalette = _appConfig as AppConfig & { ui: { commandPalette: Partial<typeof theme> } }
-
-const commandPalette = tv({ extend: tv(theme), ...(appConfigCommandPalette.ui?.commandPalette || {}) })
-
-export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
-  prefix?: string
-  label?: string
-  suffix?: string
-  /**
-   * @IconifyIcon
-   */
-  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.
-   * @IconifyIcon
-   */
-  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
-   * @IconifyIcon
-   */
-  icon?: string
-  /**
-   * The icon displayed when an item is selected.
-   * @defaultValue appConfig.ui.icons.check
-   * @IconifyIcon
-   */
-  selectedIcon?: string
-  /**
-   * The placeholder text for the input.
-   * @defaultValue 'Type a command or search...'
-   */
-  placeholder?: InputProps['placeholder']
-  /**
-   * Automatically focus the input when component is mounted.
-   * @defaultValue true
-   */
-  autofocus?: boolean
-  /**
-   * Display a close button in the input (useful when inside a Modal for example).
-   * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
-   * @emits 'update:open'
-   * @defaultValue false
-   */
-  close?: boolean | Partial<ButtonProps>
-  /**
-   * The icon displayed in the close button.
-   * @defaultValue appConfig.ui.icons.close
-   * @IconifyIcon
-   */
-  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>>
-
+<script>
+import theme from "#build/ui/command-palette";
 </script>
 
-<script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
-import { computed } from '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 { pickLinkProps } from '../utils/link'
-import UIcon from './Icon.vue'
-import UAvatar from './Avatar.vue'
-import UButton from './Button.vue'
-import UChip from './Chip.vue'
-import ULinkBase from './LinkBase.vue'
-import ULink from './Link.vue'
-import UInput from './Input.vue'
-import UKbd from './Kbd.vue'
-
-const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
-  modelValue: '',
-  labelKey: 'label',
-  autofocus: true
-})
-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', 'highlightOnHover'), emits)
-const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = commandPalette()
-
+<script setup>
+import { computed } from "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 { tv } from "../utils/tv";
+import { highlight } from "../utils/fuse";
+import { pickLinkProps } from "../utils/link";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+import UChip from "./Chip.vue";
+import ULinkBase from "./LinkBase.vue";
+import ULink from "./Link.vue";
+import UInput from "./Input.vue";
+import UKbd from "./Kbd.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: String, required: false },
+  selectedIcon: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false, default: true },
+  close: { type: [Boolean, Object], required: false },
+  closeIcon: { type: String, required: false },
+  groups: { type: Array, required: false },
+  fuse: { type: Object, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false, default: "" },
+  defaultValue: { type: null, required: false },
+  highlightOnHover: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
+const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
+const inputProps = useForwardProps(reactivePick(props, "loading", "loadingIcon"));
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     ignoreLocation: true,
     threshold: 0.1,
-    keys: [props.labelKey, 'suffix']
+    keys: [props.labelKey, "suffix"]
   },
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
-}))
-
+}));
 const items = computed(() => props.groups?.filter((group) => {
   if (!group.id) {
-    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
-    return false
+    console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`);
+    return false;
   }
-
   if (group.ignoreFilter) {
-    return false
+    return false;
   }
-
-  return true
-}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
-
-const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
-
-function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matches'] })[]) {
-  if (group?.postFilter && typeof group.postFilter === 'function') {
-    items = group.postFilter(searchTerm.value, items)
+  return true;
+}).flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
+const { results: fuseResults } = useFuse(searchTerm, items, fuse);
+function getGroupWithItems(group, items2) {
+  if (group?.postFilter && typeof group.postFilter === "function") {
+    items2 = group.postFilter(searchTerm.value, items2);
   }
-
   return {
     ...group,
-    items: items.slice(0, fuse.value.resultLimit).map((item) => {
+    items: items2.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
-        labelHtml: highlight<T>(item, searchTerm.value, props.labelKey),
-        suffixHtml: highlight<T>(item, searchTerm.value, undefined, [props.labelKey])
-      }
+        labelHtml: highlight(item, searchTerm.value, props.labelKey),
+        suffixHtml: highlight(item, searchTerm.value, void 0, [props.labelKey])
+      };
     })
-  }
+  };
 }
-
 const groups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
-    const { item, matches } = result
+    const { item, matches } = result;
     if (!item.group) {
-      return acc
+      return acc;
     }
-
-    acc[item.group] ||= []
-    acc[item.group]?.push({ ...item, matches })
-
-    return acc
-  }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
-
-  const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
-    const group = props.groups?.find(group => group.id === id)
+    acc[item.group] ||= [];
+    acc[item.group]?.push({ ...item, matches });
+    return acc;
+  }, {});
+  const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
+    const group = props.groups?.find((group2) => group2.id === id);
     if (!group) {
-      return
+      return;
     }
-
-    return getGroupWithItems(group, items)
-  }).filter(group => !!group)
-
-  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 getGroupWithItems(group, items2);
+  }).filter((group) => !!group);
+  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 nonFuseGroups.reduce((acc, group) => {
-    acc.splice(group.index, 0, group)
-    return acc
-  }, [...fuseGroups])
-})
+    acc.splice(group.index, 0, group);
+    return acc;
+  }, [...fuseGroups]);
+});
 </script>
 
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <ListboxFilter v-model="searchTerm" as-child>
@@ -257,7 +118,6 @@ const groups = computed(() => {
         :placeholder="placeholder || t('commandPalette.placeholder')"
         variant="none"
         :autofocus="autofocus"
-        size="lg"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
@@ -271,7 +131,7 @@ const groups = computed(() => {
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
-              v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+              v-bind="typeof close === 'object' ? close : {}"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
@@ -282,15 +142,15 @@ const groups = computed(() => {
 
     <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) }}
+        <ListboxGroup v-for="group in groups" :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 })">
+            {{ get(group, props.labelKey) }}
           </ListboxGroupLabel>
 
           <ListboxItem
             v-for="(item, index) in group.items"
-            :key="`group-${groupIndex}-${index}`"
-            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :key="`group-${group.id}-${index}`"
+            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml'])"
             :disabled="item.disabled"
             as-child
             @select="item.onSelect"
@@ -301,10 +161,10 @@ const groups = computed(() => {
                   <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: 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: active || item.active })" />
+                    <UAvatar v-else-if="item.avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: active || item.active })" />
                     <UChip
                       v-else-if="item.chip"
-                      :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                      :size="props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
                       inset
                       standalone
                       v-bind="item.chip"
@@ -312,11 +172,11 @@ const groups = computed(() => {
                     />
                   </slot>
 
-                  <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: active || item.active })">
+                  <span v-if="item.labelHtml || get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: 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.itemLabelBase({ class: props.ui?.itemLabelBase, active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
+                      <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
 
                       <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
                     </slot>
@@ -325,7 +185,7 @@ const groups = computed(() => {
                   <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" />
+                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="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 })" />
                     </slot>

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

@@ -0,0 +1,173 @@
+import type { ListboxRootProps, ListboxRootEmits } from 'reka-ui';
+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 } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
+export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
+    prefix?: string;
+    label?: string;
+    suffix?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps;
+    chip?: ChipProps;
+    kbds?: KbdProps['value'][] | KbdProps[];
+    active?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    slot?: string;
+    onSelect?(e?: Event): void;
+    [key: string]: any;
+}
+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.
+     * @IconifyIcon
+     */
+    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
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * The icon displayed when an item is selected.
+     * @defaultValue appConfig.ui.icons.check
+     * @IconifyIcon
+     */
+    selectedIcon?: string;
+    /**
+     * The placeholder text for the input.
+     * @defaultValue t('commandPalette.placeholder')
+     */
+    placeholder?: InputProps['placeholder'];
+    /**
+     * Automatically focus the input when component is mounted.
+     * @defaultValue true
+     */
+    autofocus?: boolean;
+    /**
+     * Display a close button in the input (useful when inside a Modal for example).
+     * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
+     * @emits 'update:open'
+     * @defaultValue false
+     */
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    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?: 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: {
+            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
+        };
+    }): any;
+    'item': SlotProps<T>;
+    'item-leading': SlotProps<T>;
+    'item-label': SlotProps<T>;
+    'item-trailing': SlotProps<T>;
+} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
+declare const _default: <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<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ({
+        searchTerm?: string;
+    } & CommandPaletteProps<G, T>) & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        empty(props: {
+            searchTerm?: string;
+        }): any;
+        close(props: {
+            ui: { [K in keyof Required<CommandPalette["slots"]>]: (props?: Record<string, any>) => string; };
+        }): any;
+        item: SlotProps<T>;
+        'item-leading': SlotProps<T>;
+        'item-label': SlotProps<T>;
+        'item-trailing': SlotProps<T>;
+    } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>> & {
+        empty(props: {
+            searchTerm?: string;
+        }): any;
+        close(props: {
+            ui: { [K in keyof Required<CommandPalette["slots"]>]: (props?: Record<string, any>) => string; };
+        }): any;
+        item: SlotProps<T>;
+        'item-leading': SlotProps<T>;
+        'item-label': SlotProps<T>;
+        'item-trailing': SlotProps<T>;
+    } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
+    emit: (((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: T;
+    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((evt: "update:searchTerm", value: string) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Container.vue

@@ -1,36 +1,23 @@
-<script lang="ts">
-import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/container'
-import { tv } from '../utils/tv'
-
-const appConfigContainer = _appConfig as AppConfig & { ui: { container: Partial<typeof theme> } }
-
-const container = tv({ extend: tv(theme), ...(appConfigContainer.ui?.container || {}) })
-
-export interface ContainerProps {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  class?: any
-}
-
-export interface ContainerSlots {
-  default(props?: {}): any
-}
+<script>
+import theme from "#build/ui/container";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-
-const props = defineProps<ContainerProps>()
-defineSlots<ContainerSlots>()
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="container({ class: props.class })">
+  <Primitive :as="as" :class="ui({ class: props.class })">
     <slot />
   </Primitive>
 </template>

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

@@ -0,0 +1,27 @@
+export interface ContainerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+}
+export interface ContainerSlots {
+    default(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<ContainerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<ContainerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<ContainerSlots> & ContainerSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};