@nepdatejs/datepicker 0.0.0-stage → 0.1.1

package/src/input.ts

@@ -0,0 +1,128 @@
+import {
+  formatDate,
+  formatMessage,
+  fromIsoDate,
+  getLocale,
+  isWithin,
+  parseDate,
+  toCalendar,
+  type AdDate,
+  type CalendarDate,
+  type CalendarSystem,
+  type DateFormatPattern,
+  type LocaleCode,
+} from '@nepdatejs/core';
+import type { DateDetail, DateError } from './types';
+
+/** What a picker allows, in any calendar. */
+export interface InputLimits {
+  readonly min: CalendarDate;
+  readonly max: CalendarDate;
+  /** Whether the app set min/max (else they are the edges of the BS table). Picks the message. */
+  readonly hasMin?: boolean;
+  readonly hasMax?: boolean;
+  readonly isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+}
+
+export type ParseResult =
+  | { readonly kind: 'empty' }
+  | { readonly kind: 'date'; readonly date: AdDate }
+  | { readonly kind: 'error'; readonly error: DateError };
+
+/**
+ * Read what the user typed: year first, ASCII or Devanagari digits, in the
+ * calendar on screen. All date work is done by core (docs/plan D-005).
+ */
+export function parseInput(
+  text: string,
+  calendar: CalendarSystem,
+  limits: InputLimits,
+  locale: LocaleCode,
+  format: DateFormatPattern = 'iso',
+): ParseResult {
+  if (text.trim() === '') {
+    return { kind: 'empty' };
+  }
+  const messages = getLocale(locale).messages;
+  const date = parseDate(text, calendar);
+  if (!date) {
+    return {
+      kind: 'error',
+      error: { code: 'format', message: messages.invalidFormat[calendar] },
+    };
+  }
+  const error = checkDate(date, calendar, limits, locale, format);
+
+  return error
+    ? { kind: 'error', error }
+    : { kind: 'date', date: toCalendar(date, 'AD') };
+}
+
+/** Null when the day is allowed; otherwise a translated error. */
+export function checkDate(
+  date: CalendarDate,
+  calendar: CalendarSystem,
+  limits: InputLimits,
+  locale: LocaleCode,
+  format: DateFormatPattern = 'iso',
+): DateError | null {
+  const messages = getLocale(locale).messages;
+  if (!isWithin(date, limits.min, limits.max)) {
+    const values = {
+      min: formatInput(limits.min, calendar, format, locale),
+      max: formatInput(limits.max, calendar, format, locale),
+    };
+    const template =
+      limits.hasMin === limits.hasMax
+        ? messages.outOfRange
+        : limits.hasMin
+          ? messages.onOrAfter
+          : messages.onOrBefore;
+
+    return { code: 'range', message: formatMessage(template, values) };
+  }
+  if (limits.isDateDisabled?.(date)) {
+    return { code: 'disabled', message: messages.unavailable };
+  }
+
+  return null;
+}
+
+/** How the input shows a date: in the calendar on screen, with the locale's digits. */
+export function formatInput(
+  date: CalendarDate | null,
+  calendar: CalendarSystem,
+  format: DateFormatPattern,
+  locale: LocaleCode,
+): string {
+  return date ? formatDate(toCalendar(date, calendar), format, locale) : '';
+}
+
+/** "10 October 2026 AD": the same day in the other calendar. */
+export function equivalentText(
+  date: CalendarDate | null,
+  calendar: CalendarSystem,
+  locale: LocaleCode,
+): string | null {
+  if (!date) {
+    return null;
+  }
+  const other: CalendarSystem = calendar === 'BS' ? 'AD' : 'BS';
+
+  return `${formatDate(toCalendar(date, other), 'long', locale)} ${getLocale(locale).calendarNames[other]}`;
+}
+
+export function placeholderText(calendar: CalendarSystem, locale: LocaleCode): string {
+  return `YYYY-MM-DD (${getLocale(locale).calendarNames[calendar]})`;
+}
+
+/** An AD "YYYY-MM-DD" string as a date; anything else is null. */
+export function readIso(value: string | null | undefined): AdDate | null {
+  return value ? fromIsoDate(value) : null;
+}
+
+export function detailOf(date: CalendarDate | null): DateDetail | null {
+  return date
+    ? Object.freeze({ ad: toCalendar(date, 'AD'), bs: toCalendar(date, 'BS') })
+    : null;
+}

package/src/mask.ts

@@ -0,0 +1,42 @@
+const DIGIT = '[0-9\u0966-\u096f]';
+const DIGITS_ONLY = new RegExp(`^${DIGIT}{1,8}$`);
+const YEAR_MONTH = new RegExp(`^(${DIGIT}{4}-${DIGIT}{2})(${DIGIT}?)$`);
+
+/**
+ * Add the dashes of YYYY-MM-DD while the user types digits: "2083" becomes
+ * "2083-", "208306" becomes "2083-06-" and a pasted "20830624" becomes
+ * "2083-06-24". ASCII and Devanagari digits keep their script, and a
+ * separator typed straight after a dash is dropped, so typing the dashes
+ * yourself works too. Only text that grew at the end (typing, or a paste into
+ * an empty field) is touched: deleting, editing in the middle and other
+ * separators ("2083/6/4") are left as the user wrote them. Pure.
+ */
+export function maskDateText(next: string, previous = ''): string {
+  if (next.length <= previous.length || !next.startsWith(previous)) {
+    return next;
+  }
+  if (previous.endsWith('-') && /^[-./]$/.test(next.slice(previous.length))) {
+    // The user typed the separator the mask already added.
+    return previous;
+  }
+  if (DIGITS_ONLY.test(next)) {
+    // Every character is one ASCII or Devanagari digit, so string offsets are safe.
+    let out = next.slice(0, 4);
+    if (next.length >= 4) {
+      out += '-';
+    }
+    out += next.slice(4, 6);
+    if (next.length >= 6) {
+      out += '-';
+    }
+
+    return out + next.slice(6);
+  }
+  const yearMonth = YEAR_MONTH.exec(next);
+  if (yearMonth) {
+    // "2083-06" → "2083-06-"; "2083-062" → "2083-06-2".
+    return `${yearMonth[1] ?? ''}-${yearMonth[2] ?? ''}`;
+  }
+
+  return next;
+}

package/src/multi.ts

@@ -0,0 +1,318 @@
+import {
+  formatMessage,
+  getLocale,
+  toCalendar,
+  toIsoDate,
+  type AdDate,
+  type CalendarSystem,
+} from '@nepdatejs/core';
+import { createCalendar, isDayList } from '@nepdatejs/calendar';
+import { createEmitter, inputLimits, localeOf, panelOptions } from './base';
+import { formatInput, parseInput, placeholderText, readIso } from './input';
+import { maskDateText } from './mask';
+import type {
+  DateDetail,
+  DateError,
+  MultiDatePickerActions,
+  MultiDatePickerOptions,
+  MultiDatePickerState,
+  MultiDatePickerStore,
+} from './types';
+
+const SEPARATOR = /[,\s\u060c]+/;
+
+/**
+ * A picker for several separate days (PICK-001). The value is a sorted list of
+ * AD "YYYY-MM-DD" strings; the input lists the days in the calendar on screen,
+ * separated by ", ", and clicking a day in the panel adds or removes it. The
+ * list is always written as YYYY-MM-DD so it can be typed back.
+ */
+export function createMultiDatePicker(
+  initial: MultiDatePickerOptions = {},
+): MultiDatePickerStore {
+  let options: MultiDatePickerOptions = { ...initial };
+  let calendar: CalendarSystem = options.calendar ?? options.defaultCalendar ?? 'BS';
+  let dates = readAll(options.value ?? options.defaultValue);
+  let value = valuesOf(dates);
+  let text = format(dates);
+  let error: DateError | null = null;
+  /** False while the typed text has a problem: then it is left as typed. */
+  let textOk = true;
+  let open = false;
+  let destroyed = false;
+
+  const panel = createCalendar({
+    ...panelOptions(options, calendar),
+    selectionMode: 'multiple',
+    selected: dates,
+    onSelect: (selection) => {
+      if (isDayList(selection)) {
+        pick(selection.map((day) => toCalendar(day, 'AD')));
+      }
+    },
+  });
+  let snapshot = build();
+  const emitter = createEmitter(() => {
+    snapshot = build();
+  });
+  panel.subscribe(() => {
+    emitter.notify();
+  });
+
+  function build(): MultiDatePickerState {
+    return Object.freeze({
+      value,
+      dates: detailsOf(dates),
+      text,
+      calendar,
+      canSwitchCalendar: options.calendar === undefined,
+      open: open || options.inline === true,
+      inline: options.inline === true,
+      error,
+      placeholder: placeholderText(calendar, localeOf(options)),
+      calendarState: panel.getState(),
+    });
+  }
+
+  function format(list: readonly AdDate[]): string {
+    return list
+      .map((day) => formatInput(day, calendar, 'iso', localeOf(options)))
+      .join(', ');
+  }
+
+  function tooMany(count: number): DateError | null {
+    const max = options.maxDates;
+
+    return max !== undefined && count > max
+      ? {
+          code: 'tooMany',
+          message: formatMessage(getLocale(localeOf(options)).messages.tooManyDates, {
+            max: String(max),
+          }),
+        }
+      : null;
+  }
+
+  function syncPanel(): void {
+    panel.setOptions({ ...panelOptions(options, calendar), selected: dates });
+  }
+
+  /** Change the value; queue onChange when it differs and the user caused it. */
+  function setDates(next: readonly AdDate[], byUser: boolean): void {
+    const sorted = unique(next);
+    const nextValue = valuesOf(sorted);
+    const changed = nextValue.join() !== value.join();
+    dates = sorted;
+    value = nextValue;
+    syncPanel();
+    if (changed && byUser) {
+      const details = detailsOf(sorted);
+      emitter.after(() => options.onChange?.(nextValue, details));
+    }
+  }
+
+  function pick(next: readonly AdDate[]): void {
+    emitter.act(() => {
+      error = tooMany(next.length);
+      if (error) {
+        syncPanel(); // undo the calendar's toggle
+        return;
+      }
+      text = format(unique(next));
+      textOk = true;
+      setDates(next, true);
+      if (options.closeOnSelect === true) {
+        open = false;
+      }
+    });
+  }
+
+  const actions: MultiDatePickerActions = {
+    type(next) {
+      if (destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        text = options.mask === false ? next : maskLast(next, text);
+        const limits = inputLimits(options, panel);
+        const parsed: AdDate[] = [];
+        let firstError: DateError | null = null;
+        for (const token of text.split(SEPARATOR)) {
+          const result = parseInput(token, calendar, limits, localeOf(options));
+          if (result.kind === 'date') {
+            parsed.push(result.date);
+          } else if (result.kind === 'error') {
+            firstError ??= result.error;
+          }
+        }
+        error = firstError ?? tooMany(unique(parsed).length);
+        textOk = error === null;
+        setDates(parsed, true);
+      });
+    },
+    blur() {
+      emitter.act(() => {
+        if (textOk) {
+          text = format(dates);
+        }
+      });
+    },
+    clear() {
+      emitter.act(() => {
+        text = '';
+        error = null;
+        textOk = true;
+        setDates([], true);
+      });
+    },
+    setValue(next) {
+      emitter.act(() => {
+        applyValue(next);
+      });
+    },
+    open() {
+      emitter.act(() => {
+        open = true;
+        const first = dates[0];
+        if (first) {
+          panel.actions.goTo(first);
+        }
+      });
+    },
+    close() {
+      emitter.act(() => {
+        open = false;
+      });
+    },
+    toggle() {
+      if (open) {
+        actions.close();
+      } else {
+        actions.open();
+      }
+    },
+    switchCalendar(next) {
+      if (options.calendar !== undefined || next === calendar || destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        calendar = next;
+        if (textOk) {
+          text = format(dates);
+        }
+        syncPanel();
+        emitter.after(() => options.onCalendarChange?.(next));
+      });
+    },
+    select(day) {
+      if (destroyed) {
+        return false;
+      }
+      const before = value;
+      emitter.act(() => {
+        panel.actions.select(day);
+      });
+
+      return value !== before;
+    },
+    remove(iso) {
+      emitter.act(() => {
+        error = null;
+        const next = dates.filter((day) => toIsoDate(day) !== iso);
+        text = format(next);
+        textOk = true;
+        setDates(next, true);
+      });
+    },
+    reset() {
+      emitter.act(() => {
+        const next = readAll(options.defaultValue);
+        error = null;
+        text = format(next);
+        textOk = true;
+        setDates(next, true);
+      });
+    },
+  };
+
+  /** An outside value: replaces the text only when it is a different value (echo guard). */
+  function applyValue(next: readonly string[] | undefined): void {
+    const nextDates = readAll(next);
+    if (valuesOf(nextDates).join() === value.join()) {
+      return;
+    }
+    error = null;
+    text = format(nextDates);
+    textOk = true;
+    setDates(nextDates, false);
+  }
+
+  return {
+    getState: () => snapshot,
+    subscribe: (listener) => emitter.subscribe(listener),
+    setOptions(changes) {
+      if (destroyed) {
+        return;
+      }
+      emitter.act(() => {
+        const before = { calendar, locale: localeOf(options) };
+        options = { ...options, ...changes };
+        if (options.calendar !== undefined) {
+          calendar = options.calendar;
+        }
+        if ('value' in changes) {
+          applyValue(changes.value);
+        }
+        if (
+          (before.calendar !== calendar || before.locale !== localeOf(options)) &&
+          textOk
+        ) {
+          text = format(dates);
+        }
+        syncPanel();
+      });
+    },
+    actions,
+    calendar: panel,
+    destroy() {
+      destroyed = true;
+      panel.destroy();
+      emitter.clear();
+    },
+  };
+}
+
+function readAll(values: readonly string[] | undefined): AdDate[] {
+  return unique((values ?? []).map(readIso).filter((day) => day !== null));
+}
+
+function unique(list: readonly AdDate[]): AdDate[] {
+  const byValue = new Map(list.map((day) => [toIsoDate(day), day]));
+
+  return [...byValue.entries()]
+    .sort(([a], [b]) => (a < b ? -1 : 1))
+    .map(([, day]) => day);
+}
+
+function valuesOf(list: readonly AdDate[]): readonly string[] {
+  return Object.freeze(list.map((day) => toIsoDate(day)));
+}
+
+function detailsOf(list: readonly AdDate[]): readonly DateDetail[] {
+  return Object.freeze(
+    list.map((day) => Object.freeze({ ad: day, bs: toCalendar(day, 'BS') })),
+  );
+}
+
+/** Mask only the day being typed: the text after the last separator. */
+function maskLast(next: string, previous: string): string {
+  if (!next.startsWith(previous)) {
+    return next;
+  }
+  const match = /^(.*[,\s\u060c])?([^,\s\u060c]*)$/.exec(next);
+  const head = match?.[1] ?? '';
+  const tail = match?.[2] ?? next;
+  const previousTail = previous.length > head.length ? previous.slice(head.length) : '';
+
+  return head + maskDateText(tail, previousTail);
+}