@slexn/codecenter-ui 1.0.0

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

@@ -0,0 +1,649 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { computed, ref, watch } from "vue"
+import {
+  CalendarIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClockIcon,
+} from "@lucide/vue"
+import {
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export type DatePickerMode = "single" | "range" | "time"
+
+export interface DatePickerSingleObjectValue {
+  date?: string
+}
+
+export interface DatePickerRangeObjectValue {
+  start?: string
+  end?: string
+}
+
+export type DatePickerValue =
+  | string
+  | DatePickerSingleObjectValue
+  | DatePickerRangeObjectValue
+  | null
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"]
+    contentClass?: HTMLAttributes["class"]
+    disabled?: boolean
+    max?: string
+    min?: string
+    mode?: DatePickerMode
+    modelValue?: DatePickerValue
+    placeholder?: string
+    range?: boolean
+    timePlaceholder?: string
+  }>(),
+  {
+    mode: "single",
+    placeholder: "Pick a date",
+    range: false,
+    timePlaceholder: "Pick time",
+  },
+)
+
+const emit = defineEmits<{
+  "update:modelValue": [value: DatePickerValue]
+  change: [value: DatePickerValue]
+}>()
+
+const open = ref(false)
+const dateValue = ref("")
+const startValue = ref("")
+const endValue = ref("")
+const hoveredDate = ref("")
+const timeHour = ref("")
+const timeMinute = ref("")
+const timeMinuteInput = ref<HTMLInputElement | null>(null)
+const visibleMonth = ref(getMonthDate(new Date()))
+
+const isRange = computed(() => props.range || props.mode === "range")
+const isTimeOnly = computed(() => props.mode === "time")
+
+const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+
+const calendarTitle = computed(() =>
+  new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    year: "numeric",
+  }).format(visibleMonth.value),
+)
+
+const calendarDays = computed(() => {
+  const year = visibleMonth.value.getFullYear()
+  const month = visibleMonth.value.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const gridStart = new Date(year, month, 1 - firstDay.getDay())
+  const rangeBounds = getActiveRangeBounds()
+  const today = formatLocalDate(new Date())
+
+  return Array.from({ length: 42 }, (_, index) => {
+    const day = new Date(
+      gridStart.getFullYear(),
+      gridStart.getMonth(),
+      gridStart.getDate() + index,
+    )
+    const value = formatLocalDate(day)
+    const selected = isDateSelected(value)
+    const rangeActive = selected || isDateInRange(value) || isDateInPreviewRange(value)
+
+    return {
+      currentMonth: day.getMonth() === month,
+      date: value,
+      day: day.getDate(),
+      disabled: isDateDisabled(value),
+      rangeActive,
+      rangeEnd: rangeActive && rangeBounds?.end === value,
+      rangeStart: rangeActive && rangeBounds?.start === value,
+      selected,
+      today: value === today,
+    }
+  })
+})
+
+const displayValue = computed(() => {
+  if (isRange.value) {
+    const rangeLabel = [
+      formatDateLabel(startValue.value),
+      formatDateLabel(endValue.value),
+    ].filter(Boolean).join(" - ")
+
+    return rangeLabel
+  }
+
+  return formatDateLabel(dateValue.value)
+})
+
+const hasDisplayValue = computed(() => displayValue.value.length > 0)
+
+function extractDatePart(value: string) {
+  const match = value.match(/\d{4}-\d{2}-\d{2}/)
+
+  return match?.[0] ?? ""
+}
+
+function extractTimePart(value: string) {
+  const match = value.match(/(?:T|\s)?(\d{2}:\d{2})/)
+
+  return match?.[1] ?? ""
+}
+
+function formatLocalDate(date: Date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, "0")
+  const day = String(date.getDate()).padStart(2, "0")
+
+  return `${year}-${month}-${day}`
+}
+
+function parseLocalDate(value: string) {
+  const [year, month, day] = value.split("-").map(Number)
+
+  if (!year || !month || !day) return null
+
+  return new Date(year, month - 1, day)
+}
+
+function getMonthDate(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function getTimeParts(value: string) {
+  const [hour = "", minute = ""] = value.split(":")
+
+  return {
+    hour,
+    minute,
+  }
+}
+
+function sanitizeTimeInput(value: string) {
+  return value.replace(/\D/g, "").slice(0, 2)
+}
+
+function normalizeTimeInput(value: string, max: number) {
+  if (!value) return ""
+
+  const number = Number(value)
+
+  if (Number.isNaN(number)) return ""
+
+  return String(Math.min(number, max)).padStart(2, "0")
+}
+
+function getCompleteTimeValue() {
+  if (!timeHour.value || !timeMinute.value) return ""
+
+  const hour = normalizeTimeInput(timeHour.value, 23)
+  const minute = normalizeTimeInput(timeMinute.value, 59)
+
+  if (!hour || !minute) return ""
+
+  return `${hour}:${minute}`
+}
+
+function setTimeModelValue(value: string | null) {
+  emit("update:modelValue", value)
+  emit("change", value)
+}
+
+function emitCompleteTimeValue() {
+  const value = getCompleteTimeValue()
+
+  if (!value || timeHour.value.length < 2 || timeMinute.value.length < 2) return
+
+  const [hour, minute] = value.split(":")
+
+  timeHour.value = hour
+  timeMinute.value = minute
+  setTimeModelValue(value)
+}
+
+function handleTimeInput(part: "hour" | "minute", event: Event) {
+  if (props.disabled) return
+
+  const value = sanitizeTimeInput((event.target as HTMLInputElement).value)
+
+  if (part === "hour") {
+    timeHour.value = value
+
+    if (value.length === 2) {
+      timeMinuteInput.value?.focus()
+    }
+  } else {
+    timeMinute.value = value
+  }
+
+  emitCompleteTimeValue()
+}
+
+function commitTimeInput(part: "hour" | "minute") {
+  if (props.disabled) return
+
+  if (part === "hour") {
+    timeHour.value = normalizeTimeInput(timeHour.value, 23)
+  } else {
+    timeMinute.value = normalizeTimeInput(timeMinute.value, 59)
+  }
+
+  const value = getCompleteTimeValue()
+
+  if (value) {
+    const [hour, minute] = value.split(":")
+
+    timeHour.value = hour
+    timeMinute.value = minute
+    setTimeModelValue(value)
+    return
+  }
+
+  if (!timeHour.value && !timeMinute.value) {
+    setTimeModelValue(null)
+  }
+}
+
+function selectInputText(event: FocusEvent) {
+  const input = event.target as HTMLInputElement
+
+  input.select()
+}
+
+function formatDateLabel(value: string) {
+  if (!value) return ""
+
+  const [year, month, day] = value.split("-").map(Number)
+
+  if (!year || !month || !day) return value
+
+  return new Intl.DateTimeFormat(undefined, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }).format(new Date(year, month - 1, day))
+}
+
+function setVisibleMonthFromValue(value: string) {
+  const date = parseLocalDate(value)
+
+  if (!date) return
+
+  visibleMonth.value = getMonthDate(date)
+}
+
+function isDateDisabled(value: string) {
+  return Boolean(
+    (props.min && value < props.min)
+    || (props.max && value > props.max),
+  )
+}
+
+function isDateSelected(value: string) {
+  if (isRange.value) {
+    return value === startValue.value || value === endValue.value
+  }
+
+  return value === dateValue.value
+}
+
+function isDateInRange(value: string) {
+  if (!isRange.value || !startValue.value || !endValue.value) return false
+
+  return value > startValue.value && value < endValue.value
+}
+
+function isDateInPreviewRange(value: string) {
+  if (
+    !isRange.value
+    || !startValue.value
+    || endValue.value
+    || !hoveredDate.value
+  ) {
+    return false
+  }
+
+  const start = startValue.value < hoveredDate.value
+    ? startValue.value
+    : hoveredDate.value
+  const end = startValue.value < hoveredDate.value
+    ? hoveredDate.value
+    : startValue.value
+
+  return value >= start && value <= end
+}
+
+function getActiveRangeBounds() {
+  if (!isRange.value || !startValue.value) return null
+
+  const boundary = endValue.value || hoveredDate.value || startValue.value
+
+  return startValue.value <= boundary
+    ? { start: startValue.value, end: boundary }
+    : { start: boundary, end: startValue.value }
+}
+
+function moveMonth(months: number) {
+  visibleMonth.value = new Date(
+    visibleMonth.value.getFullYear(),
+    visibleMonth.value.getMonth() + months,
+    1,
+  )
+}
+
+function selectCalendarDate(value: string) {
+  if (props.disabled || isDateDisabled(value)) return
+
+  let shouldClose = false
+  hoveredDate.value = ""
+
+  if (isRange.value) {
+    if (!startValue.value || endValue.value) {
+      startValue.value = value
+      endValue.value = ""
+    } else if (value < startValue.value) {
+      endValue.value = startValue.value
+      startValue.value = value
+      shouldClose = true
+    } else {
+      endValue.value = value
+      shouldClose = true
+    }
+  } else {
+    dateValue.value = value
+    shouldClose = true
+  }
+
+  setVisibleMonthFromValue(value)
+  emitValue()
+
+  if (shouldClose) {
+    open.value = false
+  }
+}
+
+function setRangeHoveredDate(value: string) {
+  if (
+    !isRange.value
+    || !startValue.value
+    || endValue.value
+    || isDateDisabled(value)
+  ) {
+    return
+  }
+
+  hoveredDate.value = value
+}
+
+function clearRangeHoveredDate() {
+  hoveredDate.value = ""
+}
+
+function syncFromModelValue(value: DatePickerValue | undefined) {
+  dateValue.value = ""
+  startValue.value = ""
+  endValue.value = ""
+  hoveredDate.value = ""
+  timeHour.value = ""
+  timeMinute.value = ""
+
+  if (!value) return
+
+  if (typeof value === "string") {
+    if (isTimeOnly.value) {
+      const timeParts = getTimeParts(extractTimePart(value))
+
+      timeHour.value = timeParts.hour
+      timeMinute.value = timeParts.minute
+      return
+    }
+
+    if (isRange.value) {
+      startValue.value = extractDatePart(value)
+      return
+    }
+
+    dateValue.value = extractDatePart(value)
+    if (dateValue.value) setVisibleMonthFromValue(dateValue.value)
+    return
+  }
+
+  if (isRange.value) {
+    const rangeValue = value as DatePickerRangeObjectValue
+
+    startValue.value = rangeValue.start ? extractDatePart(rangeValue.start) : ""
+    endValue.value = rangeValue.end ? extractDatePart(rangeValue.end) : ""
+    if (startValue.value || endValue.value) {
+      setVisibleMonthFromValue(startValue.value || endValue.value)
+    }
+    return
+  }
+
+  const singleValue = value as DatePickerSingleObjectValue
+
+  dateValue.value = singleValue.date ? extractDatePart(singleValue.date) : ""
+  if (dateValue.value) setVisibleMonthFromValue(dateValue.value)
+}
+
+function createModelValue(): DatePickerValue {
+  if (isTimeOnly.value) return getCompleteTimeValue() || null
+
+  if (isRange.value) {
+    const next: DatePickerRangeObjectValue = {}
+
+    if (startValue.value) next.start = startValue.value
+    if (endValue.value) next.end = endValue.value
+
+    return Object.keys(next).length ? next : null
+  }
+
+  return dateValue.value || null
+}
+
+function emitValue() {
+  const value = createModelValue()
+
+  emit("update:modelValue", value)
+  emit("change", value)
+}
+
+watch(
+  () => [props.modelValue, props.mode, props.range] as const,
+  ([value]) => syncFromModelValue(value),
+  { deep: true, immediate: true },
+)
+</script>
+
+<template>
+  <div
+    v-if="isTimeOnly"
+    v-bind="$attrs"
+    data-slot="date-picker-time-field"
+    role="group"
+    :aria-disabled="props.disabled ? 'true' : undefined"
+    :aria-label="props.timePlaceholder"
+    :class="
+      cn(
+        'border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full items-center gap-2 rounded-md border px-3 py-1 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]',
+        props.disabled && 'cursor-not-allowed opacity-50',
+        props.class,
+      )
+    "
+  >
+    <ClockIcon aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" />
+
+    <input
+      data-slot="date-picker-hour-input"
+      :value="timeHour"
+      :disabled="props.disabled"
+      aria-label="Hour"
+      autocomplete="off"
+      class="h-7 w-8 bg-transparent text-center text-sm font-medium tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+      inputmode="numeric"
+      maxlength="2"
+      pattern="[0-9]*"
+      placeholder="HH"
+      type="text"
+      @blur="commitTimeInput('hour')"
+      @focus="selectInputText"
+      @input="handleTimeInput('hour', $event)"
+    />
+
+    <span aria-hidden="true" class="text-sm font-medium text-muted-foreground">
+      :
+    </span>
+
+    <input
+      ref="timeMinuteInput"
+      data-slot="date-picker-minute-input"
+      :value="timeMinute"
+      :disabled="props.disabled"
+      aria-label="Minute"
+      autocomplete="off"
+      class="h-7 w-8 bg-transparent text-center text-sm font-medium tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+      inputmode="numeric"
+      maxlength="2"
+      pattern="[0-9]*"
+      placeholder="MM"
+      type="text"
+      @blur="commitTimeInput('minute')"
+      @focus="selectInputText"
+      @input="handleTimeInput('minute', $event)"
+    />
+  </div>
+
+  <PopoverRoot v-else v-model:open="open">
+    <PopoverTrigger as-child>
+      <button
+        v-bind="$attrs"
+        data-slot="date-picker-trigger"
+        type="button"
+        :disabled="props.disabled"
+        :class="
+          cn(
+            'border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 py-2 text-left text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+            !hasDisplayValue && 'text-muted-foreground',
+            props.class,
+          )
+        "
+      >
+        <CalendarIcon aria-hidden="true" class="size-4 shrink-0" />
+        <span class="min-w-0 flex-1 truncate">
+          {{ hasDisplayValue ? displayValue : props.placeholder }}
+        </span>
+      </button>
+    </PopoverTrigger>
+
+    <PopoverPortal>
+      <PopoverContent
+        data-slot="date-picker-content"
+        align="start"
+        :side-offset="4"
+        :class="
+          cn(
+            'bg-popover text-popover-foreground 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 z-50 w-72 max-w-[calc(100vw-2rem)] rounded-md border p-3 shadow-md outline-none',
+            props.contentClass,
+          )
+        "
+      >
+        <div data-slot="date-picker-panel" class="flex flex-col gap-3">
+          <div data-slot="date-picker-calendar" class="grid gap-3">
+            <div class="flex items-center justify-between">
+              <button
+                data-slot="date-picker-prev-month"
+                type="button"
+                aria-label="Previous month"
+                class="hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-md text-foreground transition-colors outline-none focus-visible:ring-2"
+                @click="moveMonth(-1)"
+              >
+                <ChevronLeftIcon aria-hidden="true" class="size-4" />
+              </button>
+
+              <div
+                data-slot="date-picker-calendar-heading"
+                class="text-base font-semibold"
+              >
+                {{ calendarTitle }}
+              </div>
+
+              <button
+                data-slot="date-picker-next-month"
+                type="button"
+                aria-label="Next month"
+                class="hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-md text-foreground transition-colors outline-none focus-visible:ring-2"
+                @click="moveMonth(1)"
+              >
+                <ChevronRightIcon aria-hidden="true" class="size-4" />
+              </button>
+            </div>
+
+            <div
+              data-slot="date-picker-weekdays"
+              class="grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground"
+            >
+              <span v-for="day in weekDays" :key="day">
+                {{ day }}
+              </span>
+            </div>
+
+            <div
+              data-slot="date-picker-days"
+              :class="cn('grid grid-cols-7', isRange ? 'gap-0' : 'gap-1')"
+              @mouseleave="clearRangeHoveredDate"
+            >
+              <button
+                v-for="day in calendarDays"
+                :key="day.date"
+                data-slot="date-picker-day"
+                type="button"
+                :aria-label="formatDateLabel(day.date)"
+                :aria-current="day.today ? 'date' : undefined"
+                :aria-pressed="day.selected"
+                :disabled="day.disabled"
+                :class="
+                  cn(
+                    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring relative flex h-8 w-full items-center justify-center rounded-md text-sm font-medium transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40',
+                    !day.currentMonth && !day.rangeActive && 'text-muted-foreground/60',
+                    day.rangeActive && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+                    isRange && day.rangeActive && 'rounded-none',
+                    isRange && day.rangeStart && !day.rangeEnd && 'rounded-l-md',
+                    isRange && day.rangeEnd && !day.rangeStart && 'rounded-r-md',
+                    isRange && day.rangeStart && day.rangeEnd && 'rounded-md',
+                  )
+                "
+                @click="selectCalendarDate(day.date)"
+                @focus="setRangeHoveredDate(day.date)"
+                @mouseenter="setRangeHoveredDate(day.date)"
+              >
+                <span>{{ day.day }}</span>
+                <span
+                  v-if="day.today"
+                  aria-hidden="true"
+                  :class="
+                    cn(
+                      'absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full',
+                      day.rangeActive ? 'bg-primary-foreground' : 'bg-primary',
+                    )
+                  "
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as DatePicker } from "./DatePicker.vue"
+export type {
+  DatePickerMode,
+  DatePickerRangeObjectValue,
+  DatePickerSingleObjectValue,
+  DatePickerValue,
+} from "./DatePicker.vue"

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

@@ -0,0 +1,19 @@
+<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,17 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose, useForwardProps } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </DialogClose>
+</template>