@brumaombra/ui-vintage 0.7.8 → 0.7.9

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

@@ -1,83 +1,93 @@
 <script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
-import { reactive, ref, watch } from "vue"
-import { cn } from "../../../lib/utils"
-import { provideCommandContext } from "."
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui';
+import { reactive, ref, watch } from 'vue';
+import { cn } from '../../../lib/utils';
+import { provideCommandContext } from '.';
 
-const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
-  modelValue: "",
-})
+// Props
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+    modelValue: ''
+});
 
-const emits = defineEmits<ListboxRootEmits>()
+// Emits
+const emits = defineEmits<ListboxRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+// Forward props
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
 
-const { contains } = useFilter({ sensitivity: "base" })
+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()
-})
+watch(
+    () => 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>
-</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>
+</template>

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

@@ -1,31 +1,41 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { useForwardPropsEmits } from "reka-ui"
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../dialog'
-import Command from "./Command.vue"
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+import { useForwardPropsEmits } from 'reka-ui';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '../dialog';
+import Command from './Command.vue';
 
+// Props
 const props = withDefaults(defineProps<DialogRootProps & {
-  title?: string
-  description?: string
+    title?: string;
+    description?: string;
 }>(), {
-  title: "Command Palette",
-  description: "Search for a command to run...",
-})
-const emits = defineEmits<DialogRootEmits>()
+    title: 'Command Palette',
+    description: 'Search for a command to run...'
+});
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<DialogRootEmits>();
+
+// Forward props
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 ">
-      <DialogHeader class="sr-only">
-        <DialogTitle>{{ title }}</DialogTitle>
-        <DialogDescription>{{ description }}</DialogDescription>
-      </DialogHeader>
-      <Command>
-        <slot v-bind="slotProps" />
-      </Command>
-    </DialogContent>
-  </Dialog>
-</template>
+    <Dialog v-slot="slotProps" v-bind="forwarded">
+        <DialogContent class="overflow-hidden p-0">
+            <DialogHeader class="sr-only">
+                <DialogTitle>{{ title }}</DialogTitle>
+                <DialogDescription>{{ description }}</DialogDescription>
+            </DialogHeader>
+            <Command>
+                <slot v-bind="slotProps" />
+            </Command>
+        </DialogContent>
+    </Dialog>
+</template>

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

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Primitive } from "reka-ui"
-import { computed } from "vue"
-import { cn } from "../../../lib/utils"
-import { useCommand } from "."
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive } from 'reka-ui';
+import { computed } from 'vue';
+import { cn } from '../../../lib/utils';
+import { useCommand } from '.';
 
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
+const { filterState } = useCommand();
+const isRender = computed(
+    () => !!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>
-</template>
+    <Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,47 +1,44 @@
 <script setup lang="ts">
-import type { ListboxGroupProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted } from "vue"
-import { cn } from "../../../lib/utils"
-import { provideCommandGroupContext, useCommand } from "."
+import type { ListboxGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { cn } from '../../../lib/utils';
+import { provideCommandGroupContext, useCommand } from '.';
 
+// Props
 const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes["class"]
-  heading?: string
-}>()
+    class?: HTMLAttributes['class'];
+    heading?: string;
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const { allGroups, filterState } = useCommand()
-const id = useId()
+const { allGroups, filterState } = useCommand();
+const id = useId();
 
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+const isRender = computed(() =>
+    !filterState.search ? true : filterState.filtered.groups.has(id),
+);
 
-provideCommandGroupContext({ 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-light) px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-(--text-secondary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark)">
-      {{ heading }}
-    </ListboxGroupLabel>
-    <div class="p-2">
-      <slot />
-    </div>
-  </ListboxGroup>
-</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-light) px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-(--text-secondary-light) dark:border-(--border-dark) dark:text-(--text-secondary-dark)">
+            {{ heading }}
+        </ListboxGroupLabel>
+        <div class="p-2">
+            <slot />
+        </div>
+    </ListboxGroup>
+</template>

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

@@ -1,31 +1,35 @@
 <script setup lang="ts">
-import type { ListboxFilterProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Search01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { ListboxFilter, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { useCommand } from "."
+import type { ListboxFilterProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Search01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { ListboxFilter, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { useCommand } from '.';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false,
+});
 
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes["class"]
-}>()
+// Props
+const props = defineProps<ListboxFilterProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 
-const { filterState } = useCommand()
+const { filterState } = useCommand();
 </script>
 
 <template>
-  <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
-    <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 opacity-50" />
-    <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-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
-  </div>
-</template>
+    <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
+        <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 opacity-50" />
+        <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-md 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

@@ -1,76 +1,79 @@
 <script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit, useCurrentElement } from "@vueuse/core"
-import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui"
-import { computed, onMounted, onUnmounted, ref } from "vue"
-import { cn } from "../../../lib/utils"
-import { useCommand, useCommandGroup } from "."
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit, useCurrentElement } from '@vueuse/core';
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { useCommand, useCommandGroup } from '.';
 
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<ListboxItemEmits>()
+// Props
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<ListboxItemEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const id = useId()
-const { filterState, allItems, allGroups } = useCommand()
-const groupContext = useCommandGroup()
+// Forward props
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+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)
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
+    if (!(currentElement.value instanceof HTMLElement)) return;
 
-  // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ""))
+    // textValue to perform filter
+    allItems.value.set(
+        id,
+        currentElement.value.textContent ?? props.value?.toString() ?? '',
+    );
 
-  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-(--text-secondary-light) outline-hidden transition-colors duration-200 select-none data-[highlighted]:bg-(--bg-selected-light) data-[highlighted]:text-(--text-primary-light) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-(--text-secondary-dark) dark:data-[highlighted]:bg-(--bg-selected-dark) dark:data-[highlighted]:text-(--text-primary-dark) [&_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>
+    <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-(--text-secondary-light) outline-hidden transition-colors duration-200 select-none data-highlighted:bg-(--bg-selected-light) data-highlighted:text-(--text-primary-light) data-disabled:pointer-events-none data-disabled:opacity-50 dark:text-(--text-secondary-dark) dark:data-highlighted:bg-(--bg-selected-dark) dark:data-highlighted:text-(--text-primary-dark) [&_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

@@ -1,25 +1,28 @@
 <script setup lang="ts">
-import type { ListboxContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ListboxContent, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { ListboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ListboxContent, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwarded = useForwardProps(delegatedProps)
+// Forward props
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ListboxContent
-    data-slot="command-list"
-    v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ListboxContent>
-</template>
+    <ListboxContent data-slot="command-list" 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

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { SeparatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { Separator } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+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>
-</template>
+    <Separator data-slot="command-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
+        <slot />
+    </Separator>
+</template>