@brumaombra/ui-vintage 0.6.8 → 0.7.3

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

@@ -0,0 +1,83 @@
+<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 "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+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>,
+  },
+})
+
+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
+  }
+
+  // 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 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
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  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>

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

@@ -0,0 +1,31 @@
+<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"
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: "Command Palette",
+  description: "Search for a command to run...",
+})
+const emits = defineEmits<DialogRootEmits>()
+
+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>

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

@@ -0,0 +1,27 @@
+<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 "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+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>

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

@@ -0,0 +1,47 @@
+<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 "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  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>

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

@@ -0,0 +1,31 @@
+<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 "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+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>

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

@@ -0,0 +1,76 @@
+<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 "."
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+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
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // 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)
+    }
+  }
+})
+onUnmounted(() => {
+  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>

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

@@ -0,0 +1,25 @@
+<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"
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+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>

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

@@ -0,0 +1,17 @@
+<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"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+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>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<{
+  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>

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

@@ -0,0 +1,25 @@
+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 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")
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>("CommandGroup")

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

@@ -0,0 +1,67 @@
+<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'
+
+const props = withDefaults(defineProps<{
+    defaultValue?: DateValue
+    modelValue?: DateValue
+    minValue?: DateValue
+    maxValue?: DateValue
+    placeholder?: string
+    disabled?: boolean
+    class?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
+}>(), {
+    placeholder: 'Pick a date',
+    disabled: false,
+})
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: DateValue | undefined): void
+}>()
+
+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,
+    set: (value: DateValue | undefined) => {
+        if (!isControlled.value)
+            internalDate.value = value
+
+        emits('update:modelValue', value)
+    },
+})
+
+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)">
+                <HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
+                {{ date ? formatter.format(date.toDate(getLocalTimeZone())) : placeholder }}
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">
+            <Calendar v-model="date" :default-placeholder="defaultPlaceholder" :min-value="props.minValue" :max-value="props.maxValue" layout="month-and-year" initial-focus @update:model-value="close" />
+        </PopoverContent>
+    </Popover>
+</template>

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

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

package/src/components/ui/date-time-picker/DateTimePicker.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { fromDate, getLocalTimeZone, toCalendarDate } from '@internationalized/date'
+import type { DateValue } from 'reka-ui'
+import { computed, ref } from 'vue'
+import { cn } from '../../../lib/utils'
+import { DatePicker } from '../date-picker'
+import { TimePicker } from '../time-picker'
+
+const props = withDefaults(defineProps<{
+    defaultValue?: Date | null
+    modelValue?: Date | null
+    minDate?: Date | null
+    maxDate?: Date | null
+    step?: string | number
+    disabled?: boolean
+    datePlaceholder?: string
+    class?: HTMLAttributes['class']
+    datePickerClass?: HTMLAttributes['class']
+    timePickerClass?: HTMLAttributes['class']
+    datePickerContentClass?: HTMLAttributes['class']
+}>(), {
+    defaultValue: null,
+    minDate: null,
+    maxDate: null,
+    step: 60,
+    disabled: false,
+    datePlaceholder: 'Pick a date',
+})
+
+const emits = defineEmits<{
+    (e: 'update:modelValue', payload: Date | null): void
+}>()
+
+const localTimeZone = getLocalTimeZone()
+const internalValue = ref<Date | null>(props.defaultValue)
+const isControlled = computed(() => props.modelValue !== undefined)
+
+const value = computed({
+    get: () => (isControlled.value ? props.modelValue : internalValue.value) ?? null,
+    set: (nextValue: Date | null) => {
+        const resolvedValue = clampDate(nextValue)
+
+        if (!isControlled.value)
+            internalValue.value = resolvedValue
+
+        emits('update:modelValue', resolvedValue)
+    },
+})
+
+const toPickerDateValue = (date: Date | null | undefined): DateValue | undefined => {
+    if (!(date instanceof Date) || Number.isNaN(date.getTime()))
+        return undefined
+
+    return toCalendarDate(fromDate(date, localTimeZone))
+}
+
+const toTimeString = (date: Date | null | undefined) => {
+    if (!(date instanceof Date) || Number.isNaN(date.getTime()))
+        return ''
+
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+const buildDate = (dateValue: DateValue | undefined, timeValue: string) => {
+    if (!dateValue)
+        return null
+
+    const [hours = '0', minutes = '0'] = (timeValue || '00:00').split(':')
+    const nextDate = new Date(
+        dateValue.year,
+        dateValue.month - 1,
+        dateValue.day,
+        Number(hours),
+        Number(minutes),
+        0,
+        0,
+    )
+
+    return Number.isNaN(nextDate.getTime()) ? null : nextDate
+}
+
+const areSameCalendarDay = (left: DateValue | undefined, right: DateValue | undefined) => {
+    if (!left || !right)
+        return false
+
+    return left.year === right.year
+        && left.month === right.month
+        && left.day === right.day
+}
+
+const clampDate = (date: Date | null) => {
+    if (!date)
+        return null
+
+    if (props.minDate && date.getTime() < props.minDate.getTime())
+        return new Date(props.minDate)
+
+    if (props.maxDate && date.getTime() > props.maxDate.getTime())
+        return new Date(props.maxDate)
+
+    return date
+}
+
+const getFallbackDate = () => value.value ?? props.minDate ?? props.maxDate ?? new Date()
+
+const dateValue = computed({
+    get: () => toPickerDateValue(value.value),
+    set: (nextDateValue: DateValue | undefined) => {
+        if (!nextDateValue) {
+            value.value = null
+            return
+        }
+
+        const fallbackTime = toTimeString(value.value ?? props.minDate ?? props.maxDate)
+        value.value = buildDate(nextDateValue, fallbackTime)
+    },
+})
+
+const timeValue = computed({
+    get: () => toTimeString(value.value),
+    set: (nextTimeValue: string) => {
+        value.value = buildDate(toPickerDateValue(getFallbackDate()), nextTimeValue || toTimeString(getFallbackDate()))
+    },
+})
+
+const minDateValue = computed(() => toPickerDateValue(props.minDate))
+const maxDateValue = computed(() => toPickerDateValue(props.maxDate))
+
+const minTimeValue = computed(() => {
+    const selectedDate = dateValue.value
+    const minimumDate = minDateValue.value
+
+    return areSameCalendarDay(selectedDate, minimumDate) ? toTimeString(props.minDate) : undefined
+})
+
+const maxTimeValue = computed(() => {
+    const selectedDate = dateValue.value
+    const maximumDate = maxDateValue.value
+
+    return areSameCalendarDay(selectedDate, maximumDate) ? toTimeString(props.maxDate) : undefined
+})
+</script>
+
+<template>
+    <div :class="cn('grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]', props.class)">
+        <div>
+            <DatePicker
+                v-model="dateValue"
+                :disabled="props.disabled"
+                :placeholder="props.datePlaceholder"
+                :min-value="minDateValue"
+                :max-value="maxDateValue"
+                :class="cn('w-full', props.datePickerClass)"
+                :content-class="props.datePickerContentClass"
+            />
+        </div>
+
+        <div>
+            <TimePicker
+                v-model="timeValue"
+                :disabled="props.disabled"
+                :step="props.step"
+                :min="minTimeValue"
+                :max="maxTimeValue"
+                :class="cn('w-full', props.timePickerClass)"
+            />
+        </div>
+    </div>
+</template>

package/{dist/components/ui/date-time-picker/index.d.ts → src/components/ui/date-time-picker/index.ts}

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

package/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>