@personizely/ui 0.0.42

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

@@ -0,0 +1,202 @@
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    v-model="modelValue"
+    v-model:open="open"
+    :reset-search-term-on-blur="false"
+    @update:open="onToggle"
+  >
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger
+        ref="button"
+        role="combobox"
+        :aria-disabled="disabled"
+        :aria-expanded="open"
+        :tabindex="null"
+        :class="cn('flex gap-1.5 h-8 text-left items-center w-full justify-between rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:break-all',
+                   (multiple && Array.isArray(modelValue) && modelValue.length === 0) || !modelValue ? 'text-muted-foreground' : '',
+                   props.class
+        )"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+      >
+        <span class="pointer-events-none">
+          <slot v-if="multiple && Array.isArray(modelValue) && (modelValue.length || $slots.label)" name="label" v-bind="{ options: selectedOptions }">
+            {{ selectedOptionsLabel || modelValue!.length + ' selected' }}
+          </slot>
+          <slot v-else-if="!multiple && (modelValue || $slots.label)" name="label" v-bind="{ option: selectedOption }">
+            {{ selectedOptionLabel || modelValue }}
+          </slot>
+          <template v-else>
+            {{ placeholder }}
+          </template>
+        </span>
+        <ChevronDown class="w-4 h-4 min-w-4 opacity-50" />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal :disabled="disablePortal" :to="opts.portalTo">
+      <ComboboxContent :side-offset="5">
+        <ComboboxInput
+          class="border-b"
+          :model-value="searchTerm"
+          :placeholder="searchPlaceholder"
+          :loading="loading"
+          :display-value="() => ''"
+          @update:model-value="(v) => {
+          if (v !== searchTerm) {
+            searchTerm = v
+          }
+        }"
+          @change.stop
+          @input.stop
+          @keydown.tab.prevent
+        />
+        <ComboboxViewport class="max-h-[300px] overflow-y-auto overflow-x-hidden">
+          <ComboboxEmpty />
+
+          <ComboboxGroup class="p-1 empty:p-0">
+            <ComboboxItem
+              v-for="(option, index) in preparedOptions"
+              :key="option[keys.id] || option[keys.value] || index"
+              :value="option[keys.value]"
+              :disabled="option[keys.disabled] || disabled"
+              @select="onSelect($event, option)"
+            >
+              <slot name="option" v-bind="{ option }">
+                {{ option[keys.label] || option }}
+              </slot>
+              <ComboboxItemIndicator as-child>
+                <Check class="ml-auto h-4 w-4 text-muted-foreground" />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </ComboboxGroup>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed, ref, type ComponentInstance } from 'vue'
+import {
+  ComboboxItemIndicator,
+  ComboboxAnchor,
+  ComboboxPortal,
+  ComboboxTrigger,
+  ComboboxViewport,
+  type ComboboxItemEmits,
+  type ComboboxRootEmits,
+  type ComboboxRootProps,
+  type ComboboxInputProps
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import ComboboxRoot from './ComboboxRoot.vue'
+import ComboboxContent from './ComboboxContent.vue'
+import ComboboxItem from './ComboboxItem.vue'
+import ComboboxInput from './ComboboxInput.vue'
+import ComboboxEmpty from './ComboboxEmpty.vue'
+import ComboboxGroup from './ComboboxGroup.vue'
+import { Check } from 'lucide-vue-next'
+import { ChevronDown } from 'lucide-vue-next'
+import { type CustomOption, type Keys, type Option, prepareOptions } from '@/utils/options'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+import { getOptions } from '@/options-provider'
+
+const modelValue = defineModel<ComboboxRootProps['modelValue']>()
+const searchTerm = defineModel<ComboboxInputProps['modelValue']>('searchTerm', { default: '' })
+
+const props = withDefaults(defineProps<Omit<ComboboxRootProps, 'modelValue' | 'resetSearchTermOnBlur'> & {
+  class?: HTMLAttributes['class']
+  placeholder?: string
+  loading?: boolean
+  disablePortal?: boolean
+  searchPlaceholder?: string
+  keys?: Keys
+  options: string[] | Option[] | CustomOption[] | { [key:string]: string }
+}>(), {
+  disablePortal: false,
+  loading: false,
+  placeholder: 'Select a value...',
+  searchPlaceholder: 'Search...',
+  keys: () => ({
+    id: 'id',
+    label: 'label',
+    help: 'help',
+    value: 'value',
+    disabled: 'disabled'
+  })
+})
+
+const emits = defineEmits<Omit<ComboboxRootEmits, 'update:modelValue'> & {
+  blur: [event: MouseEvent]
+  focus: [event: MouseEvent]
+  select: [option: Option | CustomOption],
+  'update:searchTerm': [value: string]
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'placeholder', 'searchPlaceholder', 'keys', 'options', 'disablePortal', 'searchTerm', 'modelValue'])
+const delegatedEmits = useEmitAsProps(emits, ['blur', 'focus', 'select', 'update:searchTerm', 'update:modelValue'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+const opts = getOptions()
+
+defineSlots<{
+  'label'(props: { option: CustomOption | undefined | null } | { options: Array<Option | CustomOption> }): any
+  'option'(props: { option: Option | CustomOption }): any
+}>()
+
+const button = ref<ComponentInstance<typeof ComboboxTrigger>>()
+const open = ref(false)
+
+const onSelect = (_event: ComboboxItemEmits['select'][0], option: Option | CustomOption) => {
+  emits('select', option)
+}
+
+const onToggle = (open: boolean) => {
+  requestAnimationFrame(() => {
+    if (!open) {
+      button.value?.$el.focus()
+    }
+  })
+}
+
+const selectedOption = computed(() => {
+  if (modelValue.value) {
+    return preparedOptions.value.find((o) => {
+      return o[props.keys.value] === modelValue.value
+    })
+  }
+
+  return null
+})
+
+const selectedOptions = computed(() => {
+  if (Array.isArray(modelValue.value)) {
+    return preparedOptions.value.filter((o) => {
+      return (<Array<unknown>>modelValue.value).includes(o[props.keys.value])
+    })
+  }
+
+  return []
+})
+
+const selectedOptionLabel = computed(() => {
+  if (selectedOption.value) {
+    return selectedOption.value[props.keys.label]
+  }
+
+  return null
+})
+
+const selectedOptionsLabel = computed(() => {
+  if (selectedOptions.value) {
+    return selectedOptions.value.map(o => o[props.keys.label]).join(', ')
+  }
+
+  return null
+})
+
+const preparedOptions = computed(() => prepareOptions(props.options, props.keys))
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('z-50 min-w-(--reka-popper-anchor-width) rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper'
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-4 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { ComboboxEmpty } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <SelectGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden text-foreground', props.class)"
+  >
+    <SelectLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </SelectLabel>
+    <slot />
+  </SelectGroup>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxGroupProps } from 'reka-ui'
+import { SelectGroup, SelectLabel } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex items-center relative">
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2 pointer-events-none">
+      <Search class="size-4 text-muted-foreground" />
+    </span>
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      role="searchbox"
+      :aria-expanded="null"
+      size="10"
+      :class="cn(
+        'flex h-8 w-full ps-8 bg-transparent py-1 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+        loading ? 'pe-8' : 'pe-2'
+      )"
+    />
+    <span v-if="loading" class="absolute end-0 inset-y-0 flex items-center justify-center px-2 pointer-events-none">
+      <ProgressCircular class="size-4 text-muted-foreground" />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { ProgressCircular } from '@/components/ui/progress-circular'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class'],
+  loading: boolean
+}>(), {
+  loading: false
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+
+

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

@@ -0,0 +1,26 @@
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent aria-selected:font-medium data-disabled:pointer-events-none data-disabled:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn(props.class)"
+    as-child
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: ''
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { ComboboxSeparator } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

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

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

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

@@ -0,0 +1,55 @@
+<template>
+  <Popover class="p-0">
+    <template #trigger>
+      <Button
+        variant="outline"
+        :class="cn(
+          'justify-start text-left font-normal',
+          !modelValue && 'text-muted-foreground',
+          props.class
+        )"
+      >
+        <template #icon>
+          <CalendarIcon class="size-3 min-w-3" />
+        </template>
+        <slot v-if="modelValue" name="label">
+          <span class="truncate">{{ formatter.format(modelValue.toDate(getLocalTimeZone())) }}</span>
+        </slot>
+        <template v-else>
+          <span class="truncate">{{ placeholder }}</span>
+        </template>
+      </Button>
+    </template>
+    <Calendar
+      v-model="modelValue"
+      :multiple="false"
+      initial-focus
+    />
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import {
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone
+} from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { Calendar } from '@/components/ui/calendar'
+import { Button } from '@/components/ui/button'
+import { Popover } from '@/components/ui/popover'
+import { cn } from '@/utils/tailwind'
+import { type HTMLAttributes } from 'vue'
+
+const modelValue = defineModel<DateValue>()
+const props = withDefaults(defineProps<{
+  placeholder?: string
+  class?: HTMLAttributes['class']
+  formatter?: DateFormatter
+}>(), {
+  placeholder: 'Pick a date',
+  formatter: () => new DateFormatter('en-US', {
+    dateStyle: 'long'
+  })
+})
+</script>

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

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

package/src/components/ui/date-range-picker/DateRangePicker.vue

@@ -0,0 +1,137 @@
+<template>
+  <Popover v-model:open="isOpen" class="p-0">
+    <template #trigger>
+      <Button
+        variant="outline"
+        :class="cn(
+          'justify-start text-left font-normal',
+          !modelValue.start && 'text-muted-foreground',
+          props.class
+        )"
+      >
+        <template #icon>
+          <CalendarIcon class="size-3 min-w-3" />
+        </template>
+        <template v-if="modelValue.start">
+          <span class="truncate">
+            <template v-if="modelValue.end">
+              {{ formatter.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ formatter.format(modelValue.end.toDate(getLocalTimeZone())) }}
+            </template>
+
+            <template v-else>
+              {{ formatter.format(modelValue.start.toDate(getLocalTimeZone())) }}
+            </template>
+          </span>
+        </template>
+        <template v-else>
+          <span class="truncate">{{ placeholder }}</span>
+        </template>
+      </Button>
+    </template>
+    <div class="flex">
+      <div v-if="presets.length > 0" class="p-3 flex flex-col gap-1">
+        <Button
+          v-for="preset in presets"
+          :key="preset.label"
+          size="sm"
+          :aria-selected="isSelectedPreset(preset.value)"
+          :variant="isSelectedPreset(preset.value) ? 'secondary' : 'ghost'"
+          class="justify-start min-w-28"
+          @click="dateRange = preset.value"
+        >
+          {{ preset.label }}
+        </Button>
+      </div>
+      <RangeCalendar
+        v-bind="forwarded"
+        v-model="dateRange"
+        :number-of-months="2"
+        :prevent-deselect="true"
+      />
+    </div>
+    <div class="p-3 flex justify-end gap-2">
+      <Button variant="ghost" size="sm" @click="reset">
+        Reset
+      </Button>
+      <Button :disabled="!dateRange.start && !dateRange.end" size="sm" @click="apply">
+        Apply
+      </Button>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import {
+  DateFormatter,
+  getLocalTimeZone
+} from '@internationalized/date'
+import {
+  type DateRange,
+  type RangeCalendarRootProps
+} from 'reka-ui'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { RangeCalendar } from '@/components/ui/range-calendar'
+import { Button } from '@/components/ui/button'
+import { Popover } from '@/components/ui/popover'
+import { cn } from '@/utils/tailwind'
+import { type HTMLAttributes, type Ref, ref, watch } from 'vue'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+
+const emit = defineEmits(['update:modelValue'])
+const props = withDefaults(defineProps<Omit<RangeCalendarRootProps, 'placeholder' | 'modelValue'> & {
+  placeholder?: string
+  formatter?: DateFormatter
+  class?: HTMLAttributes['class']
+  modelValue: DateRange
+  presets?: Array<{ label: string, value: DateRange }>
+}>(), {
+  placeholder: 'Pick a date range',
+  initialFocus: false,
+  defaultValue: () => ({ start: undefined, end: undefined }),
+  numberOfMonths: 2,
+  presets: () => [],
+  formatter: () => new DateFormatter('en-US', {
+    dateStyle: 'long'
+  })
+})
+
+const delegatedProps = useDelegatedProps(props, ['class', 'placeholder', 'formatter', 'presets', 'modelValue'])
+const delegatedEmits = useEmitAsProps(emit, ['update:modelValue'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+
+const isOpen = ref(false)
+
+const dateRange = ref({
+  start: props.modelValue.start,
+  end: props.modelValue.end
+}) as Ref<DateRange>
+
+watch(() => props.modelValue, (to) => {
+  dateRange.value = {
+    start: to ? to.start : undefined,
+    end: to ? to.end : undefined
+  }
+})
+
+const reset = () => {
+  emit('update:modelValue', props.defaultValue)
+  isOpen.value = false
+}
+
+const apply = () => {
+  emit('update:modelValue', dateRange.value)
+  isOpen.value = false
+}
+
+const isSelectedPreset = (value: DateRange) => {
+  const { end, start } = dateRange.value
+  return start && value.start
+    ? start.compare(value.start) === 0
+    : start === value.start
+    && end && value.end
+      ? end.compare(value.end) === 0
+      : end === value.end
+}
+</script>

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

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