@rupe/v-datepicker 1.0.0-alpha.0

package/src/date/calendar.ts

@@ -0,0 +1,242 @@
+/*
+ * Implementation ported from from from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/calendar/create.ts
+*/
+
+import type { DateValue, DayOfWeek } from '@internationalized/date'
+import type { Grid } from './types'
+import type { DateRange } from '@/shared'
+import { CalendarDate, endOfMonth, endOfYear, getDayOfWeek, startOfMonth, startOfYear } from '@internationalized/date'
+import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek } from './comparators'
+import { chunk } from './utils'
+
+export type WeekDayFormat = 'narrow' | 'short' | 'long'
+
+export type CreateSelectProps = {
+  /**
+   * The date object representing the date (usually the first day of the month/year).
+   */
+  dateObj: DateValue
+}
+
+export type CreateMonthProps = {
+  /**
+   * The date object representing the month's date (usually the first day of the month).
+   */
+  dateObj: DateValue
+
+  /**
+   * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
+   */
+  weekStartsOn: number
+
+  /**
+   * Whether to always render 6 weeks in the calendar, even if the month doesn't
+   * span 6 weeks.
+   */
+  fixedWeeks: boolean
+
+  /**
+   * The locale to use when creating the calendar month.
+   */
+  locale: string
+}
+
+/**
+ * Retrieves an array of date values representing the days between
+ * the provided start and end dates.
+ */
+export function getDaysBetween(start: DateValue, end: DateValue) {
+  const days: DateValue[] = []
+  let dCurrent = start.add({ days: 1 })
+  const dEnd = end
+  while (dCurrent.compare(dEnd) < 0) {
+    days.push(dCurrent)
+    dCurrent = dCurrent.add({ days: 1 })
+  }
+  return days
+}
+
+export function createMonth(props: CreateMonthProps): Grid<DateValue> {
+  const { dateObj, weekStartsOn, fixedWeeks, locale } = props
+  const daysInMonth = getDaysInMonth(dateObj)
+
+  const datesArray = Array.from({ length: daysInMonth }, (_, i) => dateObj.set({ day: i + 1 }))
+
+  const firstDayOfMonth = startOfMonth(dateObj)
+  const lastDayOfMonth = endOfMonth(dateObj)
+
+  const lastSunday = getLastFirstDayOfWeek(firstDayOfMonth, weekStartsOn, locale)
+  const nextSaturday = getNextLastDayOfWeek(lastDayOfMonth, weekStartsOn, locale)
+
+  const lastMonthDays = getDaysBetween(lastSunday.subtract({ days: 1 }), firstDayOfMonth)
+  const nextMonthDays = getDaysBetween(lastDayOfMonth, nextSaturday.add({ days: 1 }))
+
+  const totalDays = lastMonthDays.length + datesArray.length + nextMonthDays.length
+
+  if (fixedWeeks && totalDays < 42) {
+    const extraDays = 42 - totalDays
+
+    let startFrom = nextMonthDays[nextMonthDays.length - 1]
+
+    if (!startFrom)
+      startFrom = endOfMonth(dateObj)
+
+    const extraDaysArray = Array.from({ length: extraDays }, (_, i) => {
+      const incr = i + 1
+      return startFrom.add({ days: incr })
+    })
+    nextMonthDays.push(...extraDaysArray)
+  }
+
+  const allDays = lastMonthDays.concat(datesArray, nextMonthDays)
+
+  const weeks = chunk(allDays, 7)
+
+  return {
+    value: dateObj,
+    cells: allDays,
+    rows: weeks,
+  }
+}
+
+type SetMonthProps = CreateMonthProps & {
+  numberOfMonths: number | undefined
+  currentMonths?: Grid<DateValue>[]
+}
+
+type SetYearProps = CreateSelectProps & {
+  numberOfMonths?: number
+  pagedNavigation?: boolean
+}
+
+type SetDecadeProps = CreateSelectProps & {
+  startIndex?: number
+  endIndex: number
+}
+
+export function startOfDecade(dateObj: DateValue) {
+  // round to the lowest nearest 10 when building the decade
+  return startOfYear(dateObj.subtract({ years: dateObj.year - Math.floor(dateObj.year / 10) * 10 }).set({ day: 1, month: 1 }))
+}
+
+export function endOfDecade(dateObj: DateValue) {
+  // round to the lowest nearest 10 when building the decade
+  return endOfYear(dateObj.add({ years: Math.ceil((dateObj.year + 1) / 10) * 10 - dateObj.year - 1 }).set({ day: 35, month: 12 }))
+}
+
+export function createDecade(props: SetDecadeProps): DateValue[] {
+  const { dateObj, startIndex, endIndex } = props
+
+  const decadeArray = Array.from({ length: Math.abs(startIndex ?? 0) + endIndex }, (_, i) =>
+    i <= Math.abs((startIndex ?? 0))
+      ? dateObj.subtract({ years: i }).set({ day: 1, month: 1 })
+      : dateObj.add({ years: i - endIndex }).set({ day: 1, month: 1 }))
+
+  decadeArray.sort((a: DateValue, b: DateValue) => a.year - b.year)
+
+  return decadeArray
+}
+
+export function createYear(props: SetYearProps): DateValue[] {
+  const { dateObj, numberOfMonths = 1, pagedNavigation = false } = props
+
+  if (numberOfMonths && pagedNavigation) {
+    const monthsArray = Array.from({ length: Math.floor(12 / numberOfMonths) }, (_, i) => startOfMonth(dateObj.set({ month: i * numberOfMonths + 1 })))
+
+    return monthsArray
+  }
+
+  const monthsArray = Array.from({ length: 12 }, (_, i) => startOfMonth(dateObj.set({ month: i + 1 })))
+  return monthsArray
+}
+
+export function createMonths(props: SetMonthProps) {
+  const { numberOfMonths, dateObj, ...monthProps } = props
+
+  const months: Grid<DateValue>[] = []
+
+  if (!numberOfMonths || numberOfMonths === 1) {
+    months.push(
+      createMonth({
+        ...monthProps,
+        dateObj,
+      }),
+    )
+    return months
+  }
+
+  months.push(
+    createMonth({
+      ...monthProps,
+      dateObj,
+    }),
+  )
+
+  // Create all the months, starting with the current month
+  for (let i = 1; i < numberOfMonths; i++) {
+    const nextMonth = dateObj.add({ months: i })
+    months.push(
+      createMonth({
+        ...monthProps,
+        dateObj: nextMonth,
+      }),
+    )
+  }
+
+  return months
+}
+
+export function createYearRange({ start, end }: DateRange): DateValue[] {
+  const years: DateValue[] = []
+
+  if (!start || !end)
+    return years
+
+  let current = start
+
+  while (current.compare(end) <= 0) {
+    years.push(current)
+    // Move to the first day of the next year
+    current = current.add({ years: 1 })
+  }
+
+  return years
+}
+
+export function createDateRange({ start, end }: DateRange): DateValue[] {
+  const dates: DateValue[] = []
+
+  if (!start || !end)
+    return dates
+
+  let current = start
+
+  while (current.compare(end) <= 0) {
+    dates.push(current)
+    current = current.add({ days: 1 })
+  }
+
+  return dates
+}
+
+/**
+ * Returns the locale-specific week number
+ */
+export function getWeekNumber(date: DateValue, locale: string = 'en-US', firstDayOfWeek?: DayOfWeek): number {
+  const firstDayOfYear = new CalendarDate(date.year, 1, 1)
+
+  const firstDayOfYearWeekday = getDayOfWeek(firstDayOfYear, locale, firstDayOfWeek)
+
+  const firstWeekStart = firstDayOfYear.subtract({ days: firstDayOfYearWeekday })
+
+  // If date is before the first week start It belongs to the last week of the previous year
+  if (date.compare(firstWeekStart) < 0) {
+    const prevYearDate = new CalendarDate(date.year - 1, 12, 31)
+    return getWeekNumber(prevYearDate, locale, firstDayOfWeek)
+  }
+
+  const days = getDaysBetween(firstWeekStart, date)
+
+  // Week number is days divided by 7 plus 1
+  return Math.floor(days.length / 7) + 1
+}

package/src/date/comparators.ts

@@ -0,0 +1,199 @@
+import type { DateValue } from '@internationalized/date'
+import type { Matcher } from './types'
+import { CalendarDateTime, getDayOfWeek, getLocalTimeZone, parseDate, parseDateTime, parseZonedDateTime, toCalendar, ZonedDateTime } from '@internationalized/date'
+
+/**
+ * Given a date string and a reference `DateValue` object, parse the
+ * string to the same type as the reference object.
+ *
+ * Useful for parsing strings from data attributes, which are always
+ * strings, to the same type being used by the date component.
+ */
+export function parseStringToDateValue(dateStr: string, referenceVal: DateValue): DateValue {
+  let dateValue: DateValue
+  if (isZonedDateTime(referenceVal))
+    dateValue = parseZonedDateTime(dateStr)
+
+  else if (isCalendarDateTime(referenceVal))
+    dateValue = parseDateTime(dateStr)
+
+  else
+    dateValue = parseDate(dateStr)
+
+  return dateValue.calendar !== referenceVal.calendar ? toCalendar(dateValue, referenceVal.calendar) : dateValue
+}
+
+/**
+ * Given a `DateValue` object, convert it to a native `Date` object.
+ * If a timezone is provided, the date will be converted to that timezone.
+ * If no timezone is provided, the date will be converted to the local timezone.
+ */
+export function toDate(dateValue: DateValue, tz: string = getLocalTimeZone()) {
+  if (isZonedDateTime(dateValue))
+    return dateValue.toDate()
+  else
+    return dateValue.toDate(tz)
+}
+
+export function isCalendarDateTime(dateValue: DateValue): dateValue is CalendarDateTime {
+  return dateValue instanceof CalendarDateTime
+}
+
+export function isZonedDateTime(dateValue: DateValue): dateValue is ZonedDateTime {
+  return dateValue instanceof ZonedDateTime
+}
+
+export function hasTime(dateValue: DateValue) {
+  return isCalendarDateTime(dateValue) || isZonedDateTime(dateValue)
+}
+
+/**
+ * Given a date, return the number of days in the month.
+ */
+export function getDaysInMonth(date: Date | DateValue) {
+  if (date instanceof Date) {
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    /**
+     * By using zero as the day, we get the
+     * last day of the previous month, which
+     * is the month we originally passed in.
+     */
+    return new Date(year, month, 0).getDate()
+  }
+  else {
+    return date.set({ day: 100 }).day
+  }
+}
+
+/**
+ * Determine if a date is before the reference date.
+ * @param dateToCompare - is this date before the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` before this date
+ *
+ * @see {@link isBeforeOrSame} for inclusive
+ */
+export function isBefore(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) < 0
+}
+
+/**
+ * Determine if a date is after the reference date.
+ * @param dateToCompare - is this date after the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` after this date
+ *
+ * @see {@link isAfterOrSame} for inclusive
+ */
+export function isAfter(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) > 0
+}
+
+/**
+ * Determine if a date is before or the same as the reference date.
+ *
+ * @param dateToCompare - the date to compare
+ * @param referenceDate - the reference date to make the comparison against
+ *
+ * @see {@link isBefore} for non-inclusive
+ */
+export function isBeforeOrSame(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) <= 0
+}
+
+/**
+ * Determine if a date is after or the same as the reference date.
+ *
+ * @param dateToCompare - is this date after or the same as the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` after or the same as this date
+ *
+ * @see {@link isAfter} for non-inclusive
+ */
+export function isAfterOrSame(dateToCompare: DateValue, referenceDate: DateValue) {
+  return dateToCompare.compare(referenceDate) >= 0
+}
+
+/**
+ * Determine if a date is inclusively between a start and end reference date.
+ *
+ * @param date - is this date inclusively between the `start` and `end` dates
+ * @param start - the start reference date to make the comparison against
+ * @param end - the end reference date to make the comparison against
+ *
+ * @see {@link isBetween} for non-inclusive
+ */
+export function isBetweenInclusive(date: DateValue, start: DateValue, end: DateValue) {
+  return isAfterOrSame(date, start) && isBeforeOrSame(date, end)
+}
+
+/**
+ * Determine if a date is between a start and end reference date.
+ *
+ * @param date - is this date between the `start` and `end` dates
+ * @param start - the start reference date to make the comparison against
+ * @param end - the end reference date to make the comparison against
+ *
+ * @see {@link isBetweenInclusive} for inclusive
+ */
+export function isBetween(date: DateValue, start: DateValue, end: DateValue) {
+  return isAfter(date, start) && isBefore(date, end)
+}
+
+export function getLastFirstDayOfWeek<T extends DateValue = DateValue>(
+  date: T,
+  firstDayOfWeek: number,
+  locale: string,
+): T {
+  const day = getDayOfWeek(date, locale)
+
+  if (firstDayOfWeek > day)
+    return date.subtract({ days: day + 7 - firstDayOfWeek }) as T
+
+  if (firstDayOfWeek === day)
+    return date as T
+
+  return date.subtract({ days: day - firstDayOfWeek }) as T
+}
+
+export function getNextLastDayOfWeek<T extends DateValue = DateValue>(
+  date: T,
+  firstDayOfWeek: number,
+  locale: string,
+): T {
+  const day = getDayOfWeek(date, locale)
+  const lastDayOfWeek = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1
+
+  if (day === lastDayOfWeek)
+    return date as T
+
+  if (day > lastDayOfWeek)
+    return date.add({ days: 7 - day + lastDayOfWeek }) as T
+
+  return date.add({ days: lastDayOfWeek - day }) as T
+}
+
+export function areAllDaysBetweenValid(
+  start: DateValue,
+  end: DateValue,
+  isUnavailable: Matcher | undefined,
+  isDisabled: Matcher | undefined,
+  isHighlightable?: Matcher | undefined,
+) {
+  if (isUnavailable === undefined && isDisabled === undefined && isHighlightable === undefined)
+    return true
+
+  let dCurrent = start.add({ days: 1 })
+  if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+    && !isHighlightable?.(dCurrent)) {
+    return false
+  }
+
+  const dEnd = end
+  while (dCurrent.compare(dEnd) < 0) {
+    dCurrent = dCurrent.add({ days: 1 })
+    if ((isDisabled?.(dCurrent) || isUnavailable?.(dCurrent))
+      && !isHighlightable?.(dCurrent)) {
+      return false
+    }
+  }
+  return true
+}

package/src/date/index.ts

@@ -0,0 +1,3 @@
+export * from './calendar'
+export * from './comparators'
+export * from './types'

package/src/date/types.ts

@@ -0,0 +1,37 @@
+/*
+  * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/types.ts
+*/
+
+import type { DateValue } from '@internationalized/date'
+
+export type { DateValue }
+
+export type Matcher = (date: DateValue) => boolean
+
+export type Grid<T> = {
+  /**
+   * A `DateValue` used to represent the month. Since days
+   * from the previous and next months may be included in the
+   * calendar grid, we need a source of truth for the value
+   * the grid is representing.
+   */
+  value: DateValue
+
+  /**
+   * An array of arrays representing the weeks in the calendar.
+   * Each sub-array represents a week, and contains the dates for each
+   * day in that week. This structure is useful for rendering the calendar
+   * grid using a table, where each row represents a week and each cell
+   * represents a day.
+   */
+  rows: T[][]
+
+  /**
+   * An array of all the dates in the current month, including dates from
+   * the previous and next months that are used to fill out the calendar grid.
+   * This array is useful for rendering the calendar grid in a customizable way,
+   * as it provides all the dates that should be displayed in the grid in a flat
+   * array.
+   */
+  cells: T[]
+}

package/src/date/utils.ts

@@ -0,0 +1,18 @@
+/**
+ * Splits an array into chunks of a given size.
+ * @param arr The array to split.
+ * @param size The size of each chunk.
+ * @returns An array of arrays, where each sub-array has `size` elements from the original array.
+ * @example ```ts
+ * const arr = [1, 2, 3, 4, 5, 6, 7, 8];
+ * const chunks = chunk(arr, 3);
+ * // chunks = [[1, 2, 3], [4, 5, 6], [7, 8]]
+ * ```
+ */
+export function chunk<T>(arr: T[], size: number): T[][] {
+  const result = []
+  for (let i = 0; i < arr.length; i += size)
+    result.push(arr.slice(i, i + size))
+
+  return result
+}

package/src/index.ts

@@ -0,0 +1,78 @@
+import {
+  DatePickerRoot,
+  DatePickerHeader,
+  DatePickerHeading,
+  DatePickerGrid,
+  DatePickerCell,
+  DatePickerHeadCell,
+  DatePickerNext,
+  DatePickerPrev,
+  DatePickerGridHead,
+  DatePickerGridBody,
+  DatePickerGridRow,
+  DatePickerCellTrigger,
+  DatePickerInput,
+  DatePickerCalendar,
+  DatePickerField,
+  DatePickerAnchor,
+  DatePickerArrow,
+  DatePickerClose,
+  DatePickerTrigger,
+  DatePickerContent,
+  DatePickerMonthHeading,
+  DatePickerYearHeading,
+  DatePickerMonthYearOverlay,
+  DatePickerOverlayItem,
+} from "./components/DatePicker/index";
+
+export const DatePicker = {
+  Root: DatePickerRoot,
+  Header: DatePickerHeader,
+  Heading: DatePickerHeading,
+  Grid: DatePickerGrid,
+  Cell: DatePickerCell,
+  HeadCell: DatePickerHeadCell,
+  Next: DatePickerNext,
+  Prev: DatePickerPrev,
+  GridHead: DatePickerGridHead,
+  GridBody: DatePickerGridBody,
+  GridRow: DatePickerGridRow,
+  CellTrigger: DatePickerCellTrigger,
+  Input: DatePickerInput,
+  Calendar: DatePickerCalendar,
+  Field: DatePickerField,
+  Anchor: DatePickerAnchor,
+  Arrow: DatePickerArrow,
+  Close: DatePickerClose,
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent,
+  MonthHeading: DatePickerMonthHeading,
+  YearHeading: DatePickerYearHeading,
+  MonthYearOverlay: DatePickerMonthYearOverlay,
+  OverlayItem: DatePickerOverlayItem,
+} as {
+  Root: typeof DatePickerRoot;
+  Header: typeof DatePickerHeader;
+  Heading: typeof DatePickerHeading;
+  Grid: typeof DatePickerGrid;
+  Cell: typeof DatePickerCell;
+  HeadCell: typeof DatePickerHeadCell;
+  Next: typeof DatePickerNext;
+  Prev: typeof DatePickerPrev;
+  GridHead: typeof DatePickerGridHead;
+  GridBody: typeof DatePickerGridBody;
+  GridRow: typeof DatePickerGridRow;
+  CellTrigger: typeof DatePickerCellTrigger;
+  Input: typeof DatePickerInput;
+  Calendar: typeof DatePickerCalendar;
+  Field: typeof DatePickerField;
+  Anchor: typeof DatePickerAnchor;
+  Arrow: typeof DatePickerArrow;
+  Close: typeof DatePickerClose;
+  Trigger: typeof DatePickerTrigger;
+  Content: typeof DatePickerContent;
+  MonthHeading: typeof DatePickerMonthHeading;
+  YearHeading: typeof DatePickerYearHeading;
+  MonthYearOverlay: typeof DatePickerMonthYearOverlay;
+  OverlayItem: typeof DatePickerOverlayItem;
+};

package/src/shared/arrays.ts

@@ -0,0 +1,66 @@
+import { isEqual } from 'ohash'
+
+/**
+ * The function `areEqual` compares two arrays and returns true if they are equal in length and have
+ * the same elements at corresponding indexes.
+ * @param {any[]} arrayA - An array of any type of elements.
+ * @param {any[]} arrayB - It looks like you haven't provided the value for `arrayB`. Could you please
+ * provide the arrayB value so that I can assist you further?
+ * @returns The function `areEqual` is returning a boolean value, either `true` if the two input arrays
+ * `arrayA` and `arrayB` are equal, or `false` if they are not equal.
+ */
+export function areEqual(arrayA: any[], arrayB: any[]): boolean {
+  if (arrayA.length !== arrayB.length)
+    return false
+
+  for (let index = 0; index < arrayA.length; index++) {
+    if (arrayA[index] !== arrayB[index])
+      return false
+  }
+
+  return true
+}
+
+/**
+ * Splits an array into chunks of a given size.
+ * @param arr The array to split.
+ * @param size The size of each chunk.
+ * @returns An array of arrays, where each sub-array has `size` elements from the original array.
+ * @example ```ts
+ * const arr = [1, 2, 3, 4, 5, 6, 7, 8];
+ * const chunks = chunk(arr, 3);
+ * // chunks = [[1, 2, 3], [4, 5, 6], [7, 8]]
+ * ```
+ */
+export function chunk<T>(arr: T[], size: number): T[][] {
+  const result = []
+  for (let i = 0; i < arr.length; i += size)
+    result.push(arr.slice(i, i + size))
+
+  return result
+}
+
+/**
+ * The function `findValuesBetween` takes an array and two values, then returns a subarray containing
+ * elements between the first occurrence of the start value and the first occurrence of the end value
+ * in the array.
+ * @param {T[]} array - The `array` parameter is an array of values of type `T`.
+ * @param {T} start - The `start` parameter is the value that marks the beginning of the range you want
+ * to find in the array.
+ * @param {T} end - The `end` parameter in the `findValuesBetween` function represents the end value
+ * that you want to find in the array. This function will return a subarray of values that are between
+ * the `start` and `end` values in the original array.
+ * @returns The `findValuesBetween` function returns an array of values from the input array that are
+ * between the `start` and `end` values (inclusive). If either the `start` or `end` values are not
+ * found in the input array, an empty array is returned.
+ */
+export function findValuesBetween<T>(array: T[], start: T, end: T) {
+  const startIndex = array.findIndex(i => isEqual(i, start))
+  const endIndex = array.findIndex(i => isEqual(i, end))
+  if (startIndex === -1 || endIndex === -1)
+    return []
+
+  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b)
+
+  return array.slice(minIndex, maxIndex + 1)
+}

package/src/shared/component/Arrow.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../../components/Primitive";
+import { useForwardExpose } from "../useForwardExpose";
+
+export interface ArrowProps extends PrimitiveProps {
+  /**
+   * The width of the arrow in pixels.
+   *
+   * @defaultValue 10
+   */
+  width?: number;
+  /**
+   * The height of the arrow in pixels.
+   *
+   * @defaultValue 5
+   */
+  height?: number;
+  /**
+   * When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
+   *
+   * @defaultValue false
+   */
+  rounded?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../../components/Primitive";
+
+const props = withDefaults(defineProps<ArrowProps>(), {
+  width: 10,
+  height: 5,
+  as: "svg",
+});
+
+useForwardExpose();
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :width="width"
+    :height="height"
+    :viewBox="asChild ? undefined : '0 0 12 6'"
+    :preserveAspectRatio="asChild ? undefined : 'none'"
+  >
+    <slot>
+      <path v-if="!rounded" d="M0 0L6 6L12 0" />
+      <path
+        v-else
+        d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0"
+      />
+    </slot>
+  </Primitive>
+</template>