@brumaombra/ui-vintage 0.9.0 → 0.9.2

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

@@ -9,9 +9,9 @@ import { provideCommandGroupContext, useCommand } from '.';
 
 // Props
 const props = defineProps<ListboxGroupProps & {
-    class?: HTMLAttributes['class'];
-    heading?: string;
-    stagger?: boolean;
+	class?: HTMLAttributes['class'];
+	heading?: string;
+	stagger?: boolean;
 }>();
 
 // Omit local props from delegated props
@@ -19,40 +19,40 @@ const delegatedProps = reactiveOmit(props, 'class', 'stagger');
 
 // Items float in one after another when the group mounts (same timing as the dropdown menu)
 const staggerClass = [
-    '[&>*]:animate-[uv-float-in_240ms_var(--ease-out-expo)_both] [&>*]:[--uv-float-offset:-3px]',
-    '[&>*:nth-child(2)]:[animation-delay:16ms]',
-    '[&>*:nth-child(3)]:[animation-delay:32ms]',
-    '[&>*:nth-child(4)]:[animation-delay:48ms]',
-    '[&>*:nth-child(5)]:[animation-delay:64ms]',
-    '[&>*:nth-child(6)]:[animation-delay:80ms]',
-    '[&>*:nth-child(7)]:[animation-delay:96ms]',
-    '[&>*:nth-child(8)]:[animation-delay:112ms]',
-    '[&>*:nth-child(n+9)]:[animation-delay:128ms]'
+	'[&>*]:animate-[uv-float-in_240ms_var(--ease-out-expo)_both] [&>*]:[--uv-float-offset:-3px]',
+	'[&>*:nth-child(2)]:[animation-delay:16ms]',
+	'[&>*:nth-child(3)]:[animation-delay:32ms]',
+	'[&>*:nth-child(4)]:[animation-delay:48ms]',
+	'[&>*:nth-child(5)]:[animation-delay:64ms]',
+	'[&>*:nth-child(6)]:[animation-delay:80ms]',
+	'[&>*:nth-child(7)]:[animation-delay:96ms]',
+	'[&>*:nth-child(8)]:[animation-delay:112ms]',
+	'[&>*:nth-child(n+9)]:[animation-delay:128ms]'
 ].join(' ');
 
 const { allGroups, filterState } = useCommand();
 const id = useId();
 
 const isRender = computed(() =>
-    !filterState.search ? true : filterState.filtered.groups.has(id),
+	!filterState.search ? true : filterState.filtered.groups.has(id),
 );
 
 provideCommandGroupContext({ id });
 onMounted(() => {
-    if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+	if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
 });
 onUnmounted(() => {
-    allGroups.value.delete(id);
+	allGroups.value.delete(id);
 });
 </script>
 
 <template>
-    <ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden', props.class)" :hidden="isRender ? undefined : true">
-        <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-border px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-            {{ heading }}
-        </ListboxGroupLabel>
-        <div :class="cn('p-2', props.stagger && staggerClass)">
-            <slot />
-        </div>
-    </ListboxGroup>
+	<ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden', props.class)" :hidden="isRender ? undefined : true">
+		<ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-border px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+			{{ heading }}
+		</ListboxGroupLabel>
+		<div :class="cn('p-2', props.stagger && staggerClass)">
+			<slot />
+		</div>
+	</ListboxGroup>
 </template>

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

@@ -2,14 +2,14 @@
 import type { ListboxFilterProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Search01Icon } from '@hugeicons/core-free-icons';
+import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ListboxFilter, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 import { useCommand } from '.';
 
 defineOptions({
-    inheritAttrs: false,
+	inheritAttrs: false,
 });
 
 // Props
@@ -24,12 +24,12 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-    <div data-slot="command-input-wrapper" class="flex h-12 items-center gap-3 border-b border-border px-4">
-        <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 text-muted-foreground" />
-        <ListboxFilter v-bind="{ ...forwardedProps, ...$attrs }" v-model="filterState.search" data-slot="command-input" auto-focus :class="cn(
-            'placeholder:text-muted-foreground flex h-10 w-full rounded bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            props.class,
-        )
-            " />
-    </div>
+	<div data-slot="command-input-wrapper" class="flex h-12 items-center gap-3 border-b border-border px-4">
+		<HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 text-muted-foreground" />
+		<ListboxFilter v-bind="{ ...forwardedProps, ...$attrs }" v-model="filterState.search" data-slot="command-input" auto-focus :class="cn(
+			'placeholder:text-muted-foreground flex h-10 w-full rounded bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+			props.class,
+		)
+			" />
+	</div>
 </template>

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

@@ -24,58 +24,58 @@ const { filterState, allItems, allGroups } = useCommand();
 const groupContext = useCommandGroup();
 
 const isRender = computed(() => {
-    if (!filterState.search) {
-        return true;
-    } else {
-        const filteredCurrentItem = filterState.filtered.items.get(id);
-        // If the filtered items is undefined means not in the all times map yet
-        // Do the first render to add into the map
-        if (filteredCurrentItem === undefined) {
-            return true;
-        }
+	if (!filterState.search) {
+		return true;
+	} else {
+		const filteredCurrentItem = filterState.filtered.items.get(id);
+		// If the filtered items is undefined means not in the all times map yet
+		// Do the first render to add into the map
+		if (filteredCurrentItem === undefined) {
+			return true;
+		}
 
-        // Check with filter
-        return filteredCurrentItem > 0;
-    }
+		// Check with filter
+		return filteredCurrentItem > 0;
+	}
 });
 
 const itemRef = ref();
 const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-    if (!(currentElement.value instanceof HTMLElement)) return;
+	if (!(currentElement.value instanceof HTMLElement)) return;
 
-    // Index both the rendered text and a string value (used as extra search keywords)
-    const keywords = typeof props.value === 'string' ? props.value : '';
-    allItems.value.set(
-        id,
-        `${currentElement.value.textContent ?? ''} ${keywords}`.trim(),
-    );
+	// Index both the rendered text and a string value (used as extra search keywords)
+	const keywords = typeof props.value === 'string' ? props.value : '';
+	allItems.value.set(
+		id,
+		`${currentElement.value.textContent ?? ''} ${keywords}`.trim(),
+	);
 
-    const groupId = groupContext?.id;
-    if (groupId) {
-        if (!allGroups.value.has(groupId)) {
-            allGroups.value.set(groupId, new Set([id]));
-        } else {
-            allGroups.value.get(groupId)?.add(id);
-        }
-    }
+	const groupId = groupContext?.id;
+	if (groupId) {
+		if (!allGroups.value.has(groupId)) {
+			allGroups.value.set(groupId, new Set([id]));
+		} else {
+			allGroups.value.get(groupId)?.add(id);
+		}
+	}
 });
 onUnmounted(() => {
-    allItems.value.delete(id);
+	allItems.value.delete(id);
 });
 </script>
 
 <template>
-    <ListboxItem v-if="isRender" v-bind="forwarded" :id="id" ref="itemRef" data-slot="command-item" :class="cn(
-        'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-muted-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100 data-[state=checked]:before:scale-y-100',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-current',
-        props.class,
-    )" @select="
-            () => {
-                filterState.search = '';
-            }
-        ">
-        <slot />
-    </ListboxItem>
+	<ListboxItem v-if="isRender" v-bind="forwarded" :id="id" ref="itemRef" data-slot="command-item" :class="cn(
+		'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-muted-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+		'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100 data-[state=checked]:before:scale-y-100',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-current',
+		props.class,
+	)" @select="
+			() => {
+				filterState.search = '';
+			}
+		">
+		<slot />
+	</ListboxItem>
 </template>

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

@@ -20,13 +20,13 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <ListboxContent data-slot="command-list" :aria-label="t('uiVintage.commandDialog.title')" v-bind="forwarded" :class="cn(
-        'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto',
-        props.class,
-    )
-        ">
-        <div role="presentation">
-            <slot />
-        </div>
-    </ListboxContent>
+	<ListboxContent data-slot="command-list" :aria-label="t('uiVintage.commandDialog.title')" v-bind="forwarded" :class="cn(
+		'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto',
+		props.class,
+	)
+		">
+		<div role="presentation">
+			<slot />
+		</div>
+	</ListboxContent>
 </template>

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

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <Separator data-slot="command-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
-        <slot />
-    </Separator>
+	<Separator data-slot="command-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
+		<slot />
+	</Separator>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <span data-slot="command-shortcut" :class="cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        props.class,
-    )
-        ">
-        <slot />
-    </span>
+	<span data-slot="command-shortcut" :class="cn(
+		'text-muted-foreground ml-auto text-xs tracking-widest',
+		props.class,
+	)
+		">
+		<slot />
+	</span>
 </template>

package/src/components/ui/command/index.ts

@@ -12,18 +12,18 @@ export { default as CommandSeparator } from './CommandSeparator.vue';
 export { default as CommandShortcut } from './CommandShortcut.vue';
 
 export const [useCommand, provideCommandContext] = createContext<{
-    allItems: Ref<Map<string, string>>;
-    allGroups: Ref<Map<string, Set<string>>>;
-    filterState: {
-        search: string;
-        filtered: {
-            count: number;
-            items: Map<string, number>;
-            groups: Set<string>;
-        };
-    };
+	allItems: Ref<Map<string, string>>;
+	allGroups: Ref<Map<string, Set<string>>>;
+	filterState: {
+		search: string;
+		filtered: {
+			count: number;
+			items: Map<string, number>;
+			groups: Set<string>;
+		};
+	};
 }>('Command');
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-    id?: string;
+	id?: string;
 }>('CommandGroup');