@rupe/v-datepicker 1.0.0-alpha.0

package/src/shared/date/parser.ts

@@ -0,0 +1,252 @@
+import type { DateFields, DateValue } from "@internationalized/date";
+import type { Ref } from "vue";
+import type { Formatter } from "..";
+import type {
+  DateSegmentPart,
+  Granularity,
+  HourCycle,
+  SegmentContentObj,
+  SegmentPart,
+  SegmentValueObj,
+  TimeSegmentPart,
+} from "../date";
+import { isZonedDateTime, toDate } from "../../date";
+import {
+  DATE_SEGMENT_PARTS,
+  EDITABLE_SEGMENT_PARTS,
+  getOptsByGranularity,
+  getPlaceholder,
+  isDateSegmentPart,
+  isSegmentPart,
+  normalizeHourCycle,
+  TIME_SEGMENT_PARTS,
+} from "../date";
+
+const calendarDateTimeGranularities = ["hour", "minute", "second"];
+
+type SyncDateSegmentValuesProps = {
+  value: DateValue;
+  formatter: Formatter;
+};
+
+type SyncTimeSegmentValuesProps = {
+  value: DateValue;
+  formatter: Formatter;
+};
+
+export function syncTimeSegmentValues(props: SyncTimeSegmentValuesProps) {
+  return Object.fromEntries(
+    TIME_SEGMENT_PARTS.map((part) => {
+      if (part === "dayPeriod")
+        return [part, props.formatter.dayPeriod(toDate(props.value))];
+      return [part, props.value[part as keyof DateValue]];
+    }),
+  ) as SegmentValueObj;
+}
+
+export function syncSegmentValues(props: SyncDateSegmentValuesProps) {
+  const { formatter } = props;
+
+  const dateValues = DATE_SEGMENT_PARTS.map((part) => {
+    return [part, props.value[part]];
+  });
+  if ("hour" in props.value) {
+    const timeValues = syncTimeSegmentValues({ value: props.value, formatter });
+
+    return {
+      ...Object.fromEntries(dateValues),
+      ...timeValues,
+    } as SegmentValueObj;
+  }
+
+  return Object.fromEntries(dateValues) as SegmentValueObj;
+}
+
+export function initializeTimeSegmentValues(
+  granularity: "hour" | "minute" | "second",
+): SegmentValueObj {
+  return Object.fromEntries(
+    TIME_SEGMENT_PARTS.map((part) => {
+      if (part === "dayPeriod") return [part, "AM"];
+      return [part, null];
+    }).filter(([key]) => {
+      if (key === "literal" || key === null) return false;
+      if (granularity === "minute" && key === "second") return false;
+      if (granularity === "hour" && (key === "second" || key === "minute"))
+        return false;
+      else return true;
+    }),
+  );
+}
+
+export function initializeSegmentValues(
+  granularity: Granularity,
+): SegmentValueObj {
+  const initialParts = EDITABLE_SEGMENT_PARTS.map((part) => {
+    if (part === "dayPeriod") return [part, "AM"];
+
+    return [part, null];
+  }).filter(([key]) => {
+    if (key === "literal" || key === null) return false;
+    if (granularity === "minute" && key === "second") return false;
+    if (granularity === "hour" && (key === "second" || key === "minute"))
+      return false;
+    if (granularity === "day")
+      return (
+        !calendarDateTimeGranularities.includes(key) && key !== "dayPeriod"
+      );
+    else return true;
+  });
+
+  return Object.fromEntries(initialParts);
+}
+
+type SharedContentProps = {
+  granularity: Granularity;
+  dateRef: DateValue;
+  formatter: Formatter;
+  hideTimeZone: boolean;
+  hourCycle: HourCycle;
+  isTimeValue?: boolean;
+};
+
+type CreateContentObjProps = SharedContentProps & {
+  segmentValues: SegmentValueObj;
+  locale: Ref<string>;
+};
+
+type CreateContentArrProps = SharedContentProps & {
+  contentObj: SegmentContentObj;
+};
+
+function createContentObj(props: CreateContentObjProps) {
+  const { segmentValues, formatter, locale } = props;
+  function getPartContent(part: DateSegmentPart | TimeSegmentPart) {
+    if ("hour" in segmentValues) {
+      const value = segmentValues[part];
+      if (value !== null) {
+        if (part === "day") {
+          return formatter.part(
+            props.dateRef.set({
+              [part as keyof DateFields]: value,
+              /**
+               * Edge case for the day field:
+               *
+               * 1. If the month is filled,
+               *   we need to ensure that the day snaps to the maximum value of that month.
+               * 2. If the month is not filled,
+               *   we default to the month with the maximum number of days (here just using January, 31 days),
+               *   so that user can input any possible day.
+               */
+              month: segmentValues.month ?? 1,
+            }),
+            part,
+            { hourCycle: normalizeHourCycle(props.hourCycle) },
+          );
+        }
+        return formatter.part(props.dateRef.set({ [part]: value }), part, {
+          hourCycle: normalizeHourCycle(props.hourCycle),
+        });
+      } else {
+        return getPlaceholder(part, "", locale.value);
+      }
+    } else {
+      if (isDateSegmentPart(part)) {
+        const value = segmentValues[part];
+        if (value !== null) {
+          if (part === "day") {
+            return formatter.part(
+              props.dateRef.set({
+                [part]: value,
+                // Same logic as above for the day field
+                month: segmentValues.month ?? 1,
+              }),
+              part,
+            );
+          }
+
+          return formatter.part(props.dateRef.set({ [part]: value }), part);
+        } else {
+          return getPlaceholder(part, "", locale.value);
+        }
+      }
+      return "";
+    }
+  }
+
+  const content = Object.keys(segmentValues).reduce((obj, part) => {
+    if (!isSegmentPart(part)) return obj;
+    if ("hour" in segmentValues && part === "dayPeriod") {
+      const value = segmentValues[part];
+
+      if (value !== null) obj[part] = value;
+      else obj[part] = getPlaceholder(part, "AM", locale.value);
+    } else {
+      obj[part] = getPartContent(part);
+    }
+
+    return obj;
+  }, {} as SegmentContentObj);
+
+  return content;
+}
+
+function createContentArr(props: CreateContentArrProps) {
+  const {
+    granularity,
+    formatter,
+    contentObj,
+    hideTimeZone,
+    hourCycle,
+    isTimeValue,
+  } = props;
+  const parts = formatter.toParts(
+    props.dateRef,
+    getOptsByGranularity(granularity, hourCycle, isTimeValue),
+  );
+
+  const segmentContentArr = parts
+    .map((part) => {
+      const defaultParts = ["literal", "timeZoneName", null];
+
+      if (defaultParts.includes(part.type) || !isSegmentPart(part.type)) {
+        return {
+          part: part.type,
+          value: part.value,
+        };
+      }
+
+      return {
+        part: part.type,
+        value: contentObj[part.type],
+      };
+    })
+    .filter((segment): segment is { part: SegmentPart; value: string } => {
+      if (segment.part === null || segment.value === null) return false;
+      if (
+        segment.part === "timeZoneName" &&
+        (!isZonedDateTime(props.dateRef) || hideTimeZone)
+      )
+        return false;
+
+      return true;
+    });
+
+  return segmentContentArr;
+}
+
+type CreateContentProps = CreateContentObjProps;
+
+export function createContent(props: CreateContentProps) {
+  const contentObj = createContentObj(props);
+
+  const contentArr = createContentArr({
+    contentObj,
+    ...props,
+  });
+
+  return {
+    obj: contentObj,
+    arr: contentArr,
+  };
+}

package/src/shared/date/parts.ts

@@ -0,0 +1,32 @@
+/*
+  * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/date-field/_internal/helpers.ts
+*/
+
+import type { DateSegmentPart, EditableSegmentPart, SegmentPart, TimeSegmentPart } from './types'
+
+export const DATE_SEGMENT_PARTS = ['day', 'month', 'year'] as const
+export const TIME_SEGMENT_PARTS = ['hour', 'minute', 'second', 'dayPeriod'] as const
+export const NON_EDITABLE_SEGMENT_PARTS = ['literal', 'timeZoneName'] as const
+export const EDITABLE_SEGMENT_PARTS = [...DATE_SEGMENT_PARTS, ...TIME_SEGMENT_PARTS] as const
+export const EDITABLE_TIME_SEGMENT_PARTS = [...TIME_SEGMENT_PARTS] as const
+export const ALL_SEGMENT_PARTS = [
+  ...EDITABLE_SEGMENT_PARTS,
+  ...NON_EDITABLE_SEGMENT_PARTS,
+] as const
+export const ALL_EXCEPT_LITERAL_PARTS = ALL_SEGMENT_PARTS.filter(part => part !== 'literal')
+
+export function isDateSegmentPart(part: unknown): part is DateSegmentPart {
+  return DATE_SEGMENT_PARTS.includes(part as DateSegmentPart)
+}
+
+export function isTimeSegmentPart(part: unknown): part is TimeSegmentPart {
+  return TIME_SEGMENT_PARTS.includes(part as TimeSegmentPart)
+}
+
+export function isSegmentPart(part: string): part is EditableSegmentPart {
+  return EDITABLE_SEGMENT_PARTS.includes(part as EditableSegmentPart)
+}
+
+export function isAnySegmentPart(part: unknown): part is SegmentPart {
+  return ALL_SEGMENT_PARTS.includes(part as EditableSegmentPart)
+}

package/src/shared/date/placeholders.ts

@@ -0,0 +1,221 @@
+/*
+ * Implementation ported from from from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/placeholders.ts
+*/
+
+const supportedLocales = [
+  'ach',
+  'af',
+  'am',
+  'an',
+  'ar',
+  'ast',
+  'az',
+  'be',
+  'bg',
+  'bn',
+  'br',
+  'bs',
+  'ca',
+  'cak',
+  'ckb',
+  'cs',
+  'cy',
+  'da',
+  'de',
+  'dsb',
+  'el',
+  'en',
+  'eo',
+  'es',
+  'et',
+  'eu',
+  'fa',
+  'ff',
+  'fi',
+  'fr',
+  'fy',
+  'ga',
+  'gd',
+  'gl',
+  'he',
+  'hr',
+  'hsb',
+  'hu',
+  'ia',
+  'id',
+  'it',
+  'ja',
+  'ka',
+  'kk',
+  'kn',
+  'ko',
+  'lb',
+  'lo',
+  'lt',
+  'lv',
+  'meh',
+  'ml',
+  'ms',
+  'nl',
+  'nn',
+  'no',
+  'oc',
+  'pl',
+  'pt',
+  'rm',
+  'ro',
+  'ru',
+  'sc',
+  'scn',
+  'sk',
+  'sl',
+  'sr',
+  'sv',
+  'szl',
+  'tg',
+  'th',
+  'tr',
+  'uk',
+  'zh-CN',
+  'zh-TW',
+] as const
+
+const placeholderFields = ['year', 'month', 'day'] as const
+
+type PlaceholderField = (typeof placeholderFields)[number]
+export type SupportedLocale = (typeof supportedLocales)[number]
+export type PlaceholderMap = Record<SupportedLocale, Record<PlaceholderField, string>>
+
+const placeholders: PlaceholderMap = {
+  'ach': { year: 'mwaka', month: 'dwe', day: 'nino' },
+  'af': { year: 'jjjj', month: 'mm', day: 'dd' },
+  'am': { year: 'ዓዓዓዓ', month: 'ሚሜ', day: 'ቀቀ' },
+  'an': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'ar': { year: 'سنة', month: 'شهر', day: 'يوم' },
+  'ast': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'az': { year: 'iiii', month: 'aa', day: 'gg' },
+  'be': { year: 'гггг', month: 'мм', day: 'дд' },
+  'bg': { year: 'гггг', month: 'мм', day: 'дд' },
+  'bn': { year: 'yyyy', month: 'মিমি', day: 'dd' },
+  'br': { year: 'bbbb', month: 'mm', day: 'dd' },
+  'bs': { year: 'gggg', month: 'mm', day: 'dd' },
+  'ca': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'cak': { year: 'jjjj', month: 'ii', day: 'q\'q\'' },
+  'ckb': { year: 'ساڵ', month: 'مانگ', day: 'ڕۆژ' },
+  'cs': { year: 'rrrr', month: 'mm', day: 'dd' },
+  'cy': { year: 'bbbb', month: 'mm', day: 'dd' },
+  'da': { year: 'åååå', month: 'mm', day: 'dd' },
+  'de': { year: 'jjjj', month: 'mm', day: 'tt' },
+  'dsb': { year: 'llll', month: 'mm', day: 'źź' },
+  'el': { year: 'εεεε', month: 'μμ', day: 'ηη' },
+  'en': { year: 'yyyy', month: 'mm', day: 'dd' },
+  'eo': { year: 'jjjj', month: 'mm', day: 'tt' },
+  'es': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'et': { year: 'aaaa', month: 'kk', day: 'pp' },
+  'eu': { year: 'uuuu', month: 'hh', day: 'ee' },
+  'fa': { year: 'سال', month: 'ماه', day: 'روز' },
+  'ff': { year: 'hhhh', month: 'll', day: 'ññ' },
+  'fi': { year: 'vvvv', month: 'kk', day: 'pp' },
+  'fr': { year: 'aaaa', month: 'mm', day: 'jj' },
+  'fy': { year: 'jjjj', month: 'mm', day: 'dd' },
+  'ga': { year: 'bbbb', month: 'mm', day: 'll' },
+  'gd': { year: 'bbbb', month: 'mm', day: 'll' },
+  'gl': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'he': { year: 'שנה', month: 'חודש', day: 'יום' },
+  'hr': { year: 'gggg', month: 'mm', day: 'dd' },
+  'hsb': { year: 'llll', month: 'mm', day: 'dd' },
+  'hu': { year: 'éééé', month: 'hh', day: 'nn' },
+  'ia': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'id': { year: 'tttt', month: 'bb', day: 'hh' },
+  'it': { year: 'aaaa', month: 'mm', day: 'gg' },
+  'ja': { year: ' 年 ', month: '月', day: '日' },
+  'ka': { year: 'წწწწ', month: 'თთ', day: 'რრ' },
+  'kk': { year: 'жжжж', month: 'аа', day: 'кк' },
+  'kn': { year: 'ವವವವ', month: 'ಮಿಮೀ', day: 'ದಿದಿ' },
+  'ko': { year: '연도', month: '월', day: '일' },
+  'lb': { year: 'jjjj', month: 'mm', day: 'dd' },
+  'lo': { year: 'ປປປປ', month: 'ດດ', day: 'ວວ' },
+  'lt': { year: 'mmmm', month: 'mm', day: 'dd' },
+  'lv': { year: 'gggg', month: 'mm', day: 'dd' },
+  'meh': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'ml': { year: 'വർഷം', month: 'മാസം', day: 'തീയതി' },
+  'ms': { year: 'tttt', month: 'mm', day: 'hh' },
+  'nl': { year: 'jjjj', month: 'mm', day: 'dd' },
+  'nn': { year: 'åååå', month: 'mm', day: 'dd' },
+  'no': { year: 'åååå', month: 'mm', day: 'dd' },
+  'oc': { year: 'aaaa', month: 'mm', day: 'jj' },
+  'pl': { year: 'rrrr', month: 'mm', day: 'dd' },
+  'pt': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'rm': { year: 'oooo', month: 'mm', day: 'dd' },
+  'ro': { year: 'aaaa', month: 'll', day: 'zz' },
+  'ru': { year: 'гггг', month: 'мм', day: 'дд' },
+  'sc': { year: 'aaaa', month: 'mm', day: 'dd' },
+  'scn': { year: 'aaaa', month: 'mm', day: 'jj' },
+  'sk': { year: 'rrrr', month: 'mm', day: 'dd' },
+  'sl': { year: 'llll', month: 'mm', day: 'dd' },
+  'sr': { year: 'гггг', month: 'мм', day: 'дд' },
+  'sv': { year: 'åååå', month: 'mm', day: 'dd' },
+  'szl': { year: 'rrrr', month: 'mm', day: 'dd' },
+  'tg': { year: 'сссс', month: 'мм', day: 'рр' },
+  'th': { year: 'ปปปป', month: 'ดด', day: 'วว' },
+  'tr': { year: 'yyyy', month: 'aa', day: 'gg' },
+  'uk': { year: 'рррр', month: 'мм', day: 'дд' },
+  'zh-CN': { year: '年', month: '月', day: '日' },
+  'zh-TW': { year: '年', month: '月', day: '日' },
+}
+
+function getPlaceholderObj(locale: SupportedLocale | (string & {})) {
+  if (!isSupportedLocale(locale)) {
+    const localeLanguage = getLocaleLanguage(locale)
+    if (!isSupportedLocale(localeLanguage))
+      return placeholders.en
+
+    else
+      return placeholders[localeLanguage]
+  }
+  else {
+    return placeholders[locale]
+  }
+}
+
+type Field = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod'
+
+export function getPlaceholder(
+  field: Field,
+  value: string,
+  locale: SupportedLocale | (string & {}),
+) {
+  if (isPlaceholderField(field))
+    return getPlaceholderObj(locale)[field]
+
+  if (isDefaultField(field))
+    return value
+
+  if (isTimeField(field))
+    return '––'
+
+  return ''
+}
+
+function isSupportedLocale(locale: string): locale is SupportedLocale {
+  return supportedLocales.includes(locale as SupportedLocale)
+}
+
+function isPlaceholderField(field: unknown): field is PlaceholderField {
+  return placeholderFields.includes(field as PlaceholderField)
+}
+
+function isTimeField(field: unknown): field is 'hour' | 'minute' | 'second' {
+  return field === 'hour' || field === 'minute' || field === 'second'
+}
+
+function isDefaultField(field: unknown): field is 'era' | 'dayPeriod' {
+  return field === 'era' || field === 'dayPeriod'
+}
+
+function getLocaleLanguage(locale: string) {
+  if (Intl.Locale)
+    return new Intl.Locale(locale).language
+
+  return locale.split('-')[0]
+}

package/src/shared/date/segment.ts

@@ -0,0 +1,50 @@
+import { useKbd } from "..";
+
+export function isSegmentNavigationKey(key: string) {
+  const kbd = useKbd();
+  if (key === kbd.ARROW_RIGHT || key === kbd.ARROW_LEFT) return true;
+  return false;
+}
+
+export function isNumberString(value: string) {
+  if (Number.isNaN(Number.parseInt(value))) return false;
+  return true;
+}
+
+export function isAcceptableSegmentKey(key: string) {
+  const kbd = useKbd();
+  const acceptableSegmentKeys = [
+    kbd.ENTER,
+    kbd.ARROW_UP,
+    kbd.ARROW_DOWN,
+    kbd.ARROW_LEFT,
+    kbd.ARROW_RIGHT,
+    kbd.BACKSPACE,
+    kbd.SPACE,
+    "a",
+    "A",
+    "p",
+    "P",
+  ];
+  if (acceptableSegmentKeys.includes(key)) return true;
+  if (isNumberString(key)) return true;
+  return false;
+}
+
+export function getSegmentElements(parentElement: HTMLElement): Element[] {
+  return Array.from(
+    parentElement.querySelectorAll("[data-reka-date-field-segment]"),
+  ).filter(
+    (item) => item.getAttribute("data-reka-date-field-segment") !== "literal",
+  );
+}
+
+export function getTimeFieldSegmentElements(
+  parentElement: HTMLElement,
+): Element[] {
+  return Array.from(
+    parentElement.querySelectorAll("[data-reka-time-field-segment]"),
+  ).filter(
+    (item) => item.getAttribute("data-reka-time-field-segment") !== "literal",
+  );
+}

package/src/shared/date/types.ts

@@ -0,0 +1,50 @@
+/*
+  * 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 }
+import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from './parts'
+
+// Days of the week, starting with Sunday
+const daysOfWeek = [0, 1, 2, 3, 4, 5, 6] as const
+export type DayOfWeek = {
+  daysOfWeek: (typeof daysOfWeek)[number][]
+}
+
+export type DateStep = {
+  year?: number
+  month?: number
+  day?: number
+  hour?: number
+  minute?: number
+  second?: number
+  millisecond?: number
+}
+
+export type DateRange = {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}
+
+export type HourCycle = 12 | 24 | undefined
+
+export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number]
+export type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number]
+export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number]
+export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number]
+export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart
+
+export type AnyExceptLiteral = Exclude<SegmentPart, 'literal'>
+
+export type DayPeriod = 'AM' | 'PM' | null
+export type DateSegmentObj = {
+  [K in DateSegmentPart]: number | null;
+}
+export type TimeSegmentObj = {
+  [K in TimeSegmentPart]: K extends 'dayPeriod' ? DayPeriod : number | null;
+}
+export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj
+export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj
+export type SegmentContentObj = Record<EditableSegmentPart, string>