@brumaombra/ui-vintage 0.7.8 → 0.7.10

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>

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

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+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>
-</template>
+    <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

@@ -1,25 +1,29 @@
-import type { Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { Ref } from 'vue';
+import { createContext } from 'reka-ui';
 
-export { default as Command } from "./Command.vue"
-export { default as CommandDialog } from "./CommandDialog.vue"
-export { default as CommandEmpty } from "./CommandEmpty.vue"
-export { default as CommandGroup } from "./CommandGroup.vue"
-export { default as CommandInput } from "./CommandInput.vue"
-export { default as CommandItem } from "./CommandItem.vue"
-export { default as CommandList } from "./CommandList.vue"
-export { default as CommandSeparator } from "./CommandSeparator.vue"
-export { default as CommandShortcut } from "./CommandShortcut.vue"
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+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> }
-  }
-}>("Command")
+    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
-}>("CommandGroup")
+    id?: string;
+}>('CommandGroup');

package/src/components/ui/date-picker/DatePicker.vue

@@ -1,63 +1,72 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
-import { Calendar03Icon } from '@hugeicons/core-free-icons'
-import { HugeiconsIcon } from '@hugeicons/vue'
-import type { DateValue } from 'reka-ui'
-import { computed, ref } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Button } from '../button'
-import { Calendar } from '../calendar'
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '../popover'
+import type { HTMLAttributes } from 'vue';
+import { DateFormatter, getLocalTimeZone, today, } from '@internationalized/date';
+import { Calendar03Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { DateValue } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { Calendar } from '../calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 
+// Props
 const props = withDefaults(defineProps<{
-    defaultValue?: DateValue
-    modelValue?: DateValue
-    minValue?: DateValue
-    maxValue?: DateValue
-    placeholder?: string
-    disabled?: boolean
-    class?: HTMLAttributes['class']
-    contentClass?: HTMLAttributes['class']
+    defaultValue?: DateValue;
+    modelValue?: DateValue;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
 }>(), {
     placeholder: 'Pick a date',
-    disabled: false,
-})
+    disabled: false
+});
 
+// Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: DateValue | undefined): void
-}>()
+    (e: 'update:modelValue', payload: DateValue | undefined): void;
+}>();
 
-const internalDate = ref<DateValue | undefined>(props.defaultValue)
-const isControlled = computed(() => props.modelValue !== undefined)
+const internalDate = ref<DateValue | undefined>(props.defaultValue);
+const isControlled = computed(() => props.modelValue !== undefined);
 
 const date = computed({
-    get: () => (isControlled.value ? props.modelValue : internalDate.value) as any,
+    get: () =>
+        (isControlled.value ? props.modelValue : internalDate.value) as any,
     set: (value: DateValue | undefined) => {
-        if (!isControlled.value)
-            internalDate.value = value
+        if (!isControlled.value) internalDate.value = value;
 
-        emits('update:modelValue', value)
+        emits('update:modelValue', value);
     },
-})
+});
 
-const defaultPlaceholder = computed(() => (date.value ?? today(getLocalTimeZone())) as any)
+const defaultPlaceholder = computed(
+    () => (date.value ?? today(getLocalTimeZone())) as any,
+);
 
 const formatter = new DateFormatter('en-US', {
     dateStyle: 'long',
-})
+});
 </script>
 
 <template>
     <Popover v-slot="{ close }">
         <PopoverTrigger as-child>
-            <Button variant="secondary" :disabled="disabled" :class="cn('h-[52px] w-[240px] justify-start text-left font-normal enabled:active:scale-100', !date && 'text-muted-foreground', props.class)">
+            <Button variant="secondary" :disabled="disabled" :class="cn(
+                'h-13 w-60 justify-start text-left font-normal enabled:active:scale-100',
+                !date && 'text-muted-foreground',
+                props.class,
+            )
+                ">
                 <HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
-                {{ date ? formatter.format(date.toDate(getLocalTimeZone())) : placeholder }}
+                {{
+                    date
+                        ? formatter.format(date.toDate(getLocalTimeZone()))
+                        : placeholder
+                }}
             </Button>
         </PopoverTrigger>
         <PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">

package/src/components/ui/date-picker/index.ts

@@ -1,2 +1,2 @@
-export { default as DatePicker } from './DatePicker.vue'
-export { default } from './DatePicker.vue'
+export { default as DatePicker } from './DatePicker.vue';
+export { default } from './DatePicker.vue';