@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/combobox/ComboboxItem.vue

@@ -2,7 +2,7 @@
 import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -18,22 +18,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxItem data-slot="combobox-item" v-bind="forwarded" :class="cn(
-        'relative flex w-full cursor-pointer items-center gap-3 rounded py-2 pr-9 pl-3 text-left text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
-        'data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-        props.class
-    )
-        ">
-        <slot />
+	<ComboboxItem data-slot="combobox-item" v-bind="forwarded" :class="cn(
+		'relative flex w-full cursor-pointer items-center gap-3 rounded py-2 pr-9 pl-3 text-left text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
+		'data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+		props.class
+	)
+		">
+		<slot />
 
-        <!-- Trailing check indicator (pops in when selected) -->
-        <span class="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
-            <ComboboxItemIndicator>
-                <slot name="indicator-icon">
-                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
-                </slot>
-            </ComboboxItemIndicator>
-        </span>
-    </ComboboxItem>
+		<!-- Trailing check indicator (pops in when selected) -->
+		<span class="pointer-events-none absolute right-3 flex size-4 items-center justify-center text-primary">
+			<ComboboxItemIndicator>
+				<slot name="indicator-icon">
+					<HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+				</slot>
+			</ComboboxItemIndicator>
+		</span>
+	</ComboboxItem>
 </template>

package/src/components/ui/combobox/ComboboxList.vue

@@ -6,18 +6,18 @@ import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits
 import { cn } from '../../../lib/utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<ComboboxContentProps & {
-    class?: HTMLAttributes['class'];
-    viewportClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
+	viewportClass?: HTMLAttributes['class'];
 }>(), {
-    position: 'popper',
-    align: 'start',
-    sideOffset: 6,
-    collisionPadding: 8
+	position: 'popper',
+	align: 'start',
+	sideOffset: 6,
+	collisionPadding: 8
 });
 
 // Emits
@@ -28,16 +28,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxPortal>
-        <ComboboxContent data-slot="combobox-list" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground z-50 flex w-(--reka-combobox-trigger-width) max-h-[min(var(--reka-combobox-content-available-height),20rem)] flex-col overflow-hidden rounded border border-border shadow-elevated-lg outline-hidden',
-            props.class
-        )
-            ">
-            <!-- Scrollable viewport -->
-            <ComboboxViewport data-slot="combobox-viewport" :class="cn('min-h-0 scroll-py-1 p-1', props.viewportClass)">
-                <slot />
-            </ComboboxViewport>
-        </ComboboxContent>
-    </ComboboxPortal>
+	<ComboboxPortal>
+		<ComboboxContent data-slot="combobox-list" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground z-50 flex w-(--reka-combobox-trigger-width) max-h-[min(var(--reka-combobox-content-available-height),20rem)] flex-col overflow-hidden rounded border border-border shadow-elevated-lg outline-hidden',
+			props.class
+		)
+			">
+			<!-- Scrollable viewport -->
+			<ComboboxViewport data-slot="combobox-viewport" :class="cn('min-h-0 scroll-py-1 p-1', props.viewportClass)">
+				<slot />
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
 </template>

package/src/components/ui/combobox/ComboboxSelect.vue

@@ -2,7 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import type { AcceptableValue } from 'reka-ui';
 import { computed, ref } from 'vue';
-import { Cancel01Icon, Search01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
@@ -18,26 +19,26 @@ import type { ComboboxSelectModelValue, ComboboxSelectOption, ComboboxSelectValu
 
 // Props
 const props = withDefaults(defineProps<{
-    modelValue?: ComboboxSelectModelValue;
-    options: ComboboxSelectOption[];
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    size?: 'sm' | 'default';
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
+	modelValue?: ComboboxSelectModelValue;
+	options: ComboboxSelectOption[];
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyText?: string;
+	multiple?: boolean;
+	disabled?: boolean;
+	size?: 'sm' | 'default';
+	class?: HTMLAttributes['class'];
+	contentClass?: HTMLAttributes['class'];
 }>(), {
-    modelValue: undefined,
-    multiple: false,
-    disabled: false,
-    size: 'default'
+	modelValue: undefined,
+	multiple: false,
+	disabled: false,
+	size: 'default'
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:modelValue': [value: ComboboxSelectModelValue];
+	'update:modelValue': [value: ComboboxSelectModelValue];
 }>();
 
 const { t } = useI18n();
@@ -55,39 +56,39 @@ const emptyLabel = computed(() => props.emptyText ?? t('uiVintage.combobox.empty
 
 // Normalized selection
 const selectedValues = computed<ComboboxSelectValue[]>(() => {
-    if (Array.isArray(props.modelValue)) return props.modelValue;
-    return props.modelValue == null ? [] : [props.modelValue];
+	if (Array.isArray(props.modelValue)) return props.modelValue;
+	return props.modelValue == null ? [] : [props.modelValue];
 });
 
 // Lookup options by value
 const optionMap = computed(() => new Map(props.options.map(option => [option.value, option])));
 
 const selectedOptions = computed(() => selectedValues.value
-    .map(value => optionMap.value.get(value))
-    .filter((option): option is ComboboxSelectOption => !!option));
+	.map(value => optionMap.value.get(value))
+	.filter((option): option is ComboboxSelectOption => !!option));
 
 const selectedOption = computed(() => (props.multiple ? undefined : selectedOptions.value[0]));
 
 // Value handed to reka (array in multiple mode)
 const rootValue = computed<AcceptableValue | AcceptableValue[] | undefined>(() => {
-    if (props.multiple) return selectedValues.value;
-    return selectedValues.value[0];
+	if (props.multiple) return selectedValues.value;
+	return selectedValues.value[0];
 });
 
 // Label shown inside the input for single selection
 const displayValue = (value: unknown) => {
-    if (props.multiple || value == null || Array.isArray(value)) return '';
-    return optionMap.value.get(value as ComboboxSelectValue)?.label ?? '';
+	if (props.multiple || value == null || Array.isArray(value)) return '';
+	return optionMap.value.get(value as ComboboxSelectValue)?.label ?? '';
 };
 
 // Placeholder switches to a search prompt (or the current label) while open
 const inputPlaceholder = computed(() => {
-    if (props.multiple) {
-        if (open.value || selectedOptions.value.length) return searchPlaceholderText.value;
-        return placeholderText.value;
-    }
-    if (open.value) return selectedOption.value?.label ?? searchPlaceholderText.value;
-    return placeholderText.value;
+	if (props.multiple) {
+		if (open.value || selectedOptions.value.length) return searchPlaceholderText.value;
+		return placeholderText.value;
+	}
+	if (open.value) return selectedOption.value?.label ?? searchPlaceholderText.value;
+	return placeholderText.value;
 });
 
 // Leading icon mirrors the selected option icon when closed
@@ -95,68 +96,68 @@ const showsOptionIcon = computed(() => !open.value && !!selectedOption.value?.ic
 const leadingIcon = computed(() => (showsOptionIcon.value && selectedOption.value?.icon) || Search01Icon);
 
 const handleUpdate = (value: unknown) => {
-    if (props.multiple) {
-        emits('update:modelValue', Array.isArray(value) ? [...value] as ComboboxSelectValue[] : []);
-        return;
-    }
-    emits('update:modelValue', (value ?? null) as ComboboxSelectModelValue);
+	if (props.multiple) {
+		emits('update:modelValue', Array.isArray(value) ? [...value] as ComboboxSelectValue[] : []);
+		return;
+	}
+	emits('update:modelValue', (value ?? null) as ComboboxSelectModelValue);
 };
 
 // Clear the text on open so the whole list is visible (single mode keeps the label as placeholder)
 const handleOpenChange = (value: boolean) => {
-    open.value = value;
-    interacted.value = true;
-    if (value) searchTerm.value = '';
+	open.value = value;
+	interacted.value = true;
+	if (value) searchTerm.value = '';
 };
 
 // Remove a tag in multiple mode
 const removeValue = (value: ComboboxSelectValue) => {
-    if (props.disabled) return;
-    emits('update:modelValue', selectedValues.value.filter(item => item !== value));
+	if (props.disabled) return;
+	emits('update:modelValue', selectedValues.value.filter(item => item !== value));
 };
 
 // Backspace on an empty input removes the last tag
 const handleKeydown = (event: KeyboardEvent) => {
-    if (!props.multiple || event.key !== 'Backspace' || searchTerm.value) return;
-    const last = selectedValues.value[selectedValues.value.length - 1];
-    if (last !== undefined) removeValue(last);
+	if (!props.multiple || event.key !== 'Backspace' || searchTerm.value) return;
+	const last = selectedValues.value[selectedValues.value.length - 1];
+	if (last !== undefined) removeValue(last);
 };
 </script>
 
 <template>
-    <Combobox :model-value="rootValue" :multiple="props.multiple" :disabled="props.disabled" :open="open" data-slot="combobox-select" :class="cn('w-full', props.class)" @update:model-value="handleUpdate" @update:open="handleOpenChange">
-        <!-- Field -->
-        <ComboboxAnchor :size="props.size" :class="props.multiple && selectedOptions.length ? 'py-2' : undefined">
-            <!-- Leading icon -->
-            <HugeiconsIcon :key="showsOptionIcon ? `option-${selectedOption?.value}` : 'search'" :icon="leadingIcon" :class="cn('size-4', interacted && 'animate-uv-pop')" />
-
-            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
-                <!-- Selected tags (multiple mode) -->
-                <TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
-                    <span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
-                        <HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
-                        <span class="truncate">{{ option.label }}</span>
-                        <button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
-                            <HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
-                        </button>
-                    </span>
-                </TransitionGroup>
-
-                <!-- Search input -->
-                <ComboboxInput v-model="searchTerm" :display-value="displayValue" :placeholder="inputPlaceholder" :disabled="props.disabled" @keydown="handleKeydown" />
-            </div>
-
-            <!-- Chevron trigger -->
-            <ComboboxTrigger />
-        </ComboboxAnchor>
-
-        <!-- Options list -->
-        <ComboboxList :class="props.contentClass">
-            <ComboboxEmpty>{{ emptyLabel }}</ComboboxEmpty>
-
-            <ComboboxItem v-for="option in props.options" :key="option.value" :value="option.value" :text-value="option.label" :disabled="option.disabled">
-                <SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
-            </ComboboxItem>
-        </ComboboxList>
-    </Combobox>
+	<Combobox :model-value="rootValue" :multiple="props.multiple" :disabled="props.disabled" :open="open" data-slot="combobox-select" :class="cn('w-full', props.class)" @update:model-value="handleUpdate" @update:open="handleOpenChange">
+		<!-- Field -->
+		<ComboboxAnchor :size="props.size" :class="props.multiple && selectedOptions.length ? 'py-2' : undefined">
+			<!-- Leading icon -->
+			<HugeiconsIcon :key="showsOptionIcon ? `option-${selectedOption?.value}` : 'search'" :icon="leadingIcon" :class="cn('size-4', interacted && 'animate-uv-pop')" />
+
+			<div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+				<!-- Selected tags (multiple mode) -->
+				<TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
+					<span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
+						<HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
+						<span class="truncate">{{ option.label }}</span>
+						<button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
+							<HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
+						</button>
+					</span>
+				</TransitionGroup>
+
+				<!-- Search input -->
+				<ComboboxInput v-model="searchTerm" :display-value="displayValue" :placeholder="inputPlaceholder" :disabled="props.disabled" @keydown="handleKeydown" />
+			</div>
+
+			<!-- Chevron trigger -->
+			<ComboboxTrigger />
+		</ComboboxAnchor>
+
+		<!-- Options list -->
+		<ComboboxList :class="props.contentClass">
+			<ComboboxEmpty>{{ emptyLabel }}</ComboboxEmpty>
+
+			<ComboboxItem v-for="option in props.options" :key="option.value" :value="option.value" :text-value="option.label" :disabled="option.disabled">
+				<SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
+			</ComboboxItem>
+		</ComboboxList>
+	</Combobox>
 </template>

package/src/components/ui/combobox/ComboboxSeparator.vue

@@ -12,5 +12,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+	<ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
 </template>

package/src/components/ui/combobox/ComboboxTrigger.vue

@@ -2,7 +2,7 @@
 import type { ComboboxTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ComboboxTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -15,14 +15,14 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
-        'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
-        props.class
-    )
-        ">
-        <slot>
-            <!-- Chevron rotates with a spring while open -->
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-current transition-transform duration-300 ease-spring group-data-[state=open]/combobox-trigger:rotate-180" />
-        </slot>
-    </ComboboxTrigger>
+	<ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
+		'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
+		props.class
+	)
+		">
+		<slot>
+			<!-- Chevron rotates with a spring while open -->
+			<HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-current transition-transform duration-300 ease-spring group-data-[state=open]/combobox-trigger:rotate-180" />
+		</slot>
+	</ComboboxTrigger>
 </template>

package/src/components/ui/combobox/types.ts

@@ -5,11 +5,11 @@ export type ComboboxSelectValue = string | number;
 
 // Option rendered by ComboboxSelect
 export interface ComboboxSelectOption {
-    value: ComboboxSelectValue;
-    label: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition;
-    disabled?: boolean;
+	value: ComboboxSelectValue;
+	label: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition;
+	disabled?: boolean;
 }
 
 // v-model shape of ComboboxSelect (array when `multiple`)

package/src/components/ui/command/Command.vue

@@ -9,7 +9,7 @@ import { provideCommandContext } from '.';
 
 // Props
 const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-    modelValue: ''
+	modelValue: ''
 });
 
 // Emits
@@ -26,68 +26,68 @@ const allGroups = ref<Map<string, Set<string>>>(new Map());
 
 const { contains } = useFilter({ sensitivity: 'base' });
 const filterState = reactive({
-    search: '',
-    filtered: {
-        /** The count of all visible items. */
-        count: 0,
-        /** Map from visible item id to its search score. */
-        items: new Map() as Map<string, number>,
-        /** Set of groups with at least one visible item. */
-        groups: new Set() as Set<string>,
-    },
+	search: '',
+	filtered: {
+		/** The count of all visible items. */
+		count: 0,
+		/** Map from visible item id to its search score. */
+		items: new Map() as Map<string, number>,
+		/** Set of groups with at least one visible item. */
+		groups: new Set() as Set<string>,
+	},
 });
 
 function filterItems() {
-    if (!filterState.search) {
-        filterState.filtered.count = allItems.value.size;
-        // Do nothing, each item will know to show itself because search is empty
-        return;
-    }
+	if (!filterState.search) {
+		filterState.filtered.count = allItems.value.size;
+		// Do nothing, each item will know to show itself because search is empty
+		return;
+	}
 
-    // Reset the groups
-    filterState.filtered.groups = new Set();
-    let itemCount = 0;
+	// Reset the groups
+	filterState.filtered.groups = new Set();
+	let itemCount = 0;
 
-    // Check which items should be included
-    for (const [id, value] of allItems.value) {
-        const score = contains(value, filterState.search);
-        filterState.filtered.items.set(id, score ? 1 : 0);
-        if (score) itemCount++;
-    }
+	// Check which items should be included
+	for (const [id, value] of allItems.value) {
+		const score = contains(value, filterState.search);
+		filterState.filtered.items.set(id, score ? 1 : 0);
+		if (score) itemCount++;
+	}
 
-    // Check which groups have at least 1 item shown
-    for (const [groupId, group] of allGroups.value) {
-        for (const itemId of group) {
-            if (filterState.filtered.items.get(itemId)! > 0) {
-                filterState.filtered.groups.add(groupId);
-                break;
-            }
-        }
-    }
+	// Check which groups have at least 1 item shown
+	for (const [groupId, group] of allGroups.value) {
+		for (const itemId of group) {
+			if (filterState.filtered.items.get(itemId)! > 0) {
+				filterState.filtered.groups.add(groupId);
+				break;
+			}
+		}
+	}
 
-    filterState.filtered.count = itemCount;
+	filterState.filtered.count = itemCount;
 }
 
 watch(
-    () => filterState.search,
-    () => {
-        filterItems();
-    },
+	() => filterState.search,
+	() => {
+		filterItems();
+	},
 );
 
 provideCommandContext({
-    allItems,
-    allGroups,
-    filterState,
+	allItems,
+	allGroups,
+	filterState,
 });
 </script>
 
 <template>
-    <ListboxRoot data-slot="command" v-bind="forwarded" :class="cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded transition-colors duration-300 ease-in-out',
-        props.class,
-    )
-        ">
-        <slot />
-    </ListboxRoot>
+	<ListboxRoot data-slot="command" v-bind="forwarded" :class="cn(
+		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded transition-colors duration-300 ease-in-out',
+		props.class,
+	)
+		">
+		<slot />
+	</ListboxRoot>
 </template>

package/src/components/ui/command/CommandDialog.vue

@@ -11,9 +11,9 @@ import Command from './Command.vue';
 
 // Props
 const props = defineProps<DialogRootProps & {
-    title?: string;
-    description?: string;
-    contentClass?: HTMLAttributes['class'];
+	title?: string;
+	description?: string;
+	contentClass?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
@@ -29,15 +29,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <Dialog v-slot="slotProps" v-bind="forwarded">
-        <DialogContent :class="cn('top-[12vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl', props.contentClass)">
-            <DialogHeader class="sr-only">
-                <DialogTitle>{{ resolvedTitle }}</DialogTitle>
-                <DialogDescription>{{ resolvedDescription }}</DialogDescription>
-            </DialogHeader>
-            <Command>
-                <slot v-bind="slotProps" />
-            </Command>
-        </DialogContent>
-    </Dialog>
+	<Dialog v-slot="slotProps" v-bind="forwarded">
+		<DialogContent :class="cn('top-[12vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl', props.contentClass)">
+			<DialogHeader class="sr-only">
+				<DialogTitle>{{ resolvedTitle }}</DialogTitle>
+				<DialogDescription>{{ resolvedDescription }}</DialogDescription>
+			</DialogHeader>
+			<Command>
+				<slot v-bind="slotProps" />
+			</Command>
+		</DialogContent>
+	</Dialog>
 </template>

package/src/components/ui/command/CommandEmpty.vue

@@ -15,12 +15,12 @@ const delegatedProps = reactiveOmit(props, 'class');
 
 const { filterState } = useCommand();
 const isRender = computed(
-    () => !!filterState.search && filterState.filtered.count === 0,
+	() => !!filterState.search && filterState.filtered.count === 0,
 );
 </script>
 
 <template>
-    <Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
-        <slot />
-    </Primitive>
+	<Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+		<slot />
+	</Primitive>
 </template>