@nepdatejs/vanilla 0.0.0-bootstrap → 0.1.0

package/src/datetime-view.ts

@@ -0,0 +1,459 @@
+import { getLocale, type CalendarSystem } from '@nepdatejs/core';
+import {
+  createDateTimePicker,
+  type DateTimePickerOptions,
+  type DateTimePickerState,
+  type DateTimePickerStore,
+  type TimeCell,
+} from '@nepdatejs/datepicker';
+import {
+  onBackdropPointer,
+  onEscape,
+  onOutsidePointer,
+  restoreFocus,
+  trackPosition,
+  type PanelLayout,
+} from '@nepdatejs/dom';
+import { CalendarView } from './calendar-view';
+import { el, icon, setAttrs, setPopupMode, setText, uid } from './dom';
+import type { Theme } from './picker-view';
+import {
+  PANEL_WIDTH,
+  PANEL_WIDTH_WITH_PRESETS,
+  PresetList,
+  TIME_COLUMNS_WIDTH,
+} from './preset-list';
+
+export interface DateTimePickerViewOptions extends DateTimePickerOptions {
+  readonly name?: string | undefined;
+  readonly hiddenInput?: boolean | undefined;
+  readonly required?: boolean | undefined;
+  readonly disabled?: boolean | undefined;
+  /** 'sheet' opens a bottom sheet; 'popover' sits beside the field; 'auto' (default) uses the sheet below 480px. */
+  readonly panelLayout?: PanelLayout | undefined;
+  readonly theme?: Theme | undefined;
+  readonly ariaLabel?: string | undefined;
+  readonly timeLabel?: string | undefined;
+  readonly id?: string | undefined;
+  readonly onOpenChange?: ((open: boolean) => void) | undefined;
+}
+
+const VIEW_KEYS = new Set([
+  'name',
+  'hiddenInput',
+  'required',
+  'disabled',
+  'theme',
+  'panelLayout',
+  'ariaLabel',
+  'timeLabel',
+  'id',
+  'onOpenChange',
+  'onChange',
+]);
+
+/** A date input and a time input sharing one panel: calendar plus hour/minute columns. */
+export class DateTimePickerView {
+  readonly store: DateTimePickerStore;
+  readonly dateInput: HTMLInputElement;
+  readonly timeInput: HTMLInputElement;
+  private options: DateTimePickerViewOptions;
+  private readonly field: HTMLDivElement;
+  private readonly row: HTMLDivElement;
+  private readonly dateBox: HTMLDivElement;
+  private readonly timeBox: HTMLDivElement;
+  private readonly toggleButton: HTMLButtonElement;
+  private readonly hint: HTMLParagraphElement;
+  private readonly panel: HTMLDivElement;
+  private readonly segment: HTMLDivElement;
+  private readonly nowButton: HTMLButtonElement;
+  private readonly doneButton: HTMLButtonElement;
+  private readonly hours: HTMLDivElement;
+  private readonly minutes: HTMLDivElement;
+  private readonly time: HTMLDivElement;
+  private readonly hidden: HTMLInputElement;
+  private readonly calendarView: CalendarView;
+  private readonly presetList: PresetList;
+  private readonly unsubscribe: () => void;
+  private closePanel: (() => void) | null = null;
+  private wasOpen = false;
+
+  constructor(host: HTMLElement, options: DateTimePickerViewOptions = {}) {
+    this.options = { ...options };
+    this.store = createDateTimePicker({
+      ...storeOptions(options),
+      onChange: (value, detail) => {
+        this.options.onChange?.(value, detail);
+      },
+    });
+    const id = options.id ?? uid('ndp-datetime');
+    this.dateInput = el('input', {
+      class: 'ndp-input__control',
+      id,
+      type: 'text',
+      inputmode: 'numeric',
+      autocomplete: 'off',
+      'aria-controls': `${id}-panel`,
+    });
+    this.timeInput = el('input', {
+      class: 'ndp-input__control',
+      id: `${id}-time`,
+      type: 'text',
+      autocomplete: 'off',
+    });
+    this.toggleButton = el(
+      'button',
+      { type: 'button', class: 'ndp-icon-button', 'data-action': 'toggle' },
+      [icon('calendar')],
+    );
+    this.dateBox = el('div', { class: 'ndp-input' }, [
+      this.dateInput,
+      el('span', { class: 'ndp-input__actions' }, [this.toggleButton]),
+    ]);
+    this.timeBox = el('div', { class: 'ndp-input ndp-input--time' }, [this.timeInput]);
+    this.row = el('div', { class: 'ndp-datetime' }, [this.dateBox, this.timeBox]);
+    this.hint = el('p', {
+      class: 'ndp-hint',
+      id: `${id}-hint`,
+      'aria-live': 'polite',
+      hidden: true,
+    });
+    this.hidden = el('input', { type: 'hidden' });
+    this.segment = el('div', { class: 'ndp-segment', role: 'group' }, [
+      el('button', { type: 'button', class: 'ndp-segment__item', 'data-calendar': 'BS' }),
+      el('button', { type: 'button', class: 'ndp-segment__item', 'data-calendar': 'AD' }),
+    ]);
+    this.nowButton = el('button', {
+      type: 'button',
+      class: 'ndp-button',
+      'data-action': 'now',
+    });
+    this.doneButton = el('button', {
+      type: 'button',
+      class: 'ndp-button',
+      'data-variant': 'primary',
+      'data-action': 'done',
+    });
+    this.hours = el('div', {
+      class: 'ndp-time__column',
+      role: 'group',
+      'data-unit': 'hour',
+    });
+    this.minutes = el('div', {
+      class: 'ndp-time__column',
+      role: 'group',
+      'data-unit': 'minute',
+    });
+    this.time = el('div', { class: 'ndp-time', role: 'group' }, [
+      this.hours,
+      this.minutes,
+    ]);
+    const calendarRoot = el('div', { class: 'ndp-panel__calendar' });
+    this.presetList = new PresetList((presetId) => {
+      this.store.actions.applyPreset(presetId);
+    });
+    this.panel = el(
+      'div',
+      {
+        class: 'ndp-panel',
+        id: `${id}-panel`,
+
+        hidden: true,
+      },
+      [
+        el('div', { class: 'ndp-panel__body' }, [
+          this.presetList.element,
+          calendarRoot,
+          this.time,
+        ]),
+        el('div', { class: 'ndp-panel__footer' }, [
+          this.segment,
+          el('span', {}, [this.nowButton, this.doneButton]),
+        ]),
+      ],
+    );
+    this.field = el('div', { class: 'ndp-field' }, [
+      this.row,
+      this.hint,
+      this.panel,
+      this.hidden,
+    ]);
+    host.append(this.field);
+    this.calendarView = new CalendarView(calendarRoot, this.store.calendar, {
+      locale: () => this.options.locale,
+      onDayActivate: (date) => {
+        this.store.actions.selectDate(date);
+      },
+    });
+
+    this.dateInput.addEventListener('input', () => {
+      this.store.actions.typeDate(this.dateInput.value);
+    });
+    this.dateInput.addEventListener('blur', () => {
+      this.store.actions.blurDate();
+    });
+    this.dateInput.addEventListener('keydown', (event) => {
+      if (event.key === 'ArrowDown' && (event.altKey || this.dateInput.value === '')) {
+        event.preventDefault();
+        this.open();
+      }
+    });
+    this.timeInput.addEventListener('input', () => {
+      this.store.actions.typeTime(this.timeInput.value);
+    });
+    this.timeInput.addEventListener('blur', () => {
+      this.store.actions.blurTime();
+    });
+    this.field.addEventListener('click', this.onClick);
+    this.unsubscribe = this.store.subscribe(() => {
+      this.render();
+    });
+    this.render();
+  }
+
+  getState(): DateTimePickerState {
+    return this.store.getState();
+  }
+
+  setOptions(changes: Partial<DateTimePickerViewOptions>): void {
+    this.options = { ...this.options, ...changes };
+    const forStore = storeOptions(changes);
+    if (Object.keys(forStore).length > 0) {
+      this.store.setOptions(forStore);
+    } else {
+      this.render();
+    }
+  }
+
+  open(): void {
+    if (!this.options.disabled) {
+      this.store.actions.open();
+    }
+  }
+
+  close(): void {
+    this.store.actions.close();
+  }
+
+  destroy(): void {
+    this.closePanel?.();
+    this.unsubscribe();
+    this.calendarView.destroy();
+    this.field.remove();
+  }
+
+  private render(): void {
+    const state = this.store.getState();
+    const locale = getLocale(this.options.locale);
+    const disabled = this.options.disabled ?? false;
+    const hint = state.error?.message ?? state.equivalentText;
+
+    if (this.dateInput.value !== state.dateText) {
+      this.dateInput.value = state.dateText;
+    }
+    if (this.timeInput.value !== state.timeText) {
+      this.timeInput.value = state.timeText;
+    }
+    this.dateInput.setCustomValidity(
+      state.error?.field === 'date' ? state.error.message : '',
+    );
+    this.timeInput.setCustomValidity(
+      state.error?.field === 'time' ? state.error.message : '',
+    );
+    setAttrs(this.dateInput, {
+      placeholder: state.placeholder,
+      disabled,
+      required: this.options.required ?? false,
+      'aria-label': this.options.ariaLabel ?? null,
+      'aria-invalid': state.error?.field === 'date' ? 'true' : null,
+      'aria-describedby': hint ? this.hint.id : null,
+    });
+    setAttrs(this.timeInput, {
+      placeholder: state.timePlaceholder,
+      disabled,
+      'aria-label': this.options.timeLabel ?? locale.labels.time,
+      'aria-invalid': state.error?.field === 'time' ? 'true' : null,
+      'aria-describedby': hint ? this.hint.id : null,
+    });
+    setAttrs(this.dateBox, {
+      'data-invalid': state.error?.field === 'date',
+      'data-disabled': disabled,
+    });
+    setAttrs(this.timeBox, {
+      'data-invalid': state.error?.field === 'time',
+      'data-disabled': disabled,
+    });
+    setAttrs(this.field, { 'data-ndp-theme': this.options.theme ?? null });
+    setAttrs(this.panel, {
+      'data-ndp-theme': this.options.theme ?? null,
+      'aria-label': locale.labels.chooseDate,
+    });
+    setAttrs(this.toggleButton, {
+      disabled,
+      'aria-label': locale.labels.openCalendar,
+      'aria-expanded': state.open ? 'true' : 'false',
+    });
+    this.hint.hidden = hint === null;
+    setText(this.hint, hint ?? '');
+    setAttrs(this.hint, { 'data-error': state.error !== null });
+
+    this.segment.hidden = !state.canSwitchCalendar;
+    setAttrs(this.segment, { 'aria-label': locale.labels.calendar });
+    for (const button of this.segment.querySelectorAll<HTMLButtonElement>('button')) {
+      const calendar = button.dataset['calendar'] as CalendarSystem;
+      setText(button, locale.calendarNames[calendar]);
+      setAttrs(button, {
+        'aria-pressed': calendar === state.calendar ? 'true' : 'false',
+      });
+    }
+    setText(this.nowButton, locale.labels.now);
+    setText(this.doneButton, locale.labels.done);
+    setAttrs(this.time, { 'aria-label': locale.labels.time });
+    setAttrs(this.hours, { 'aria-label': locale.labels.hour });
+    setAttrs(this.minutes, { 'aria-label': locale.labels.minute });
+    renderColumn(this.hours, state.hours);
+    renderColumn(this.minutes, state.minutes);
+    this.presetList.render(state.presets, locale.labels.presets);
+
+    const name = this.options.hiddenInput === false ? undefined : this.options.name;
+    setAttrs(this.hidden, { name: name ?? null });
+    this.hidden.value = state.value;
+    this.hidden.disabled = name === undefined || disabled;
+    setPopupMode(state, [this.dateInput], this.toggleButton, this.panel);
+    this.syncPanel(state.open && !state.inline);
+    this.panel.hidden = !state.inline && !this.wasOpen;
+    this.panel.style.setProperty(
+      '--ndp-panel-width',
+      state.inline ? `${String(this.panelWidth())}px` : null,
+    );
+  }
+
+  private panelWidth(): number {
+    return (
+      (this.store.getState().presets.length > 0
+        ? PANEL_WIDTH_WITH_PRESETS
+        : PANEL_WIDTH) + TIME_COLUMNS_WIDTH
+    );
+  }
+
+  private syncPanel(open: boolean): void {
+    if (open === this.wasOpen) {
+      return;
+    }
+    this.wasOpen = open;
+    this.options.onOpenChange?.(open);
+    if (open) {
+      this.panel.hidden = false;
+      const stopTracking = trackPosition(this.row, this.panel, {
+        width: this.panelWidth(),
+        layout: this.options.panelLayout,
+      });
+      const stopOutside = onOutsidePointer([this.field], () => {
+        this.store.actions.close();
+      });
+      const stopBackdrop = onBackdropPointer(this.panel, () => {
+        this.store.actions.close();
+      });
+      const stopEscape = onEscape(() => {
+        this.store.actions.close();
+        restoreFocus(this.dateInput);
+      });
+      this.closePanel = () => {
+        stopTracking();
+        stopOutside();
+        stopBackdrop();
+        stopEscape();
+        this.panel.hidden = true;
+      };
+      for (const item of this.time.querySelectorAll<HTMLElement>(
+        '[aria-pressed="true"]',
+      )) {
+        if (typeof item.scrollIntoView === 'function') {
+          item.scrollIntoView({ block: 'nearest' });
+        }
+      }
+      this.calendarView.focusGrid();
+    } else {
+      this.closePanel?.();
+      this.closePanel = null;
+    }
+  }
+
+  private readonly onClick = (event: MouseEvent): void => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target || this.calendarView.element.contains(target)) {
+      return;
+    }
+    const item = target.closest<HTMLButtonElement>('.ndp-time-item');
+    if (item) {
+      const unit = item.parentElement?.dataset['unit'];
+      const value = Number(item.dataset['value']);
+      if (unit === 'hour') {
+        this.store.actions.selectHour(value);
+      } else {
+        this.store.actions.selectMinute(value);
+      }
+      return;
+    }
+    const calendar = target.closest<HTMLElement>('[data-calendar]')?.dataset['calendar'];
+    if (calendar === 'BS' || calendar === 'AD') {
+      this.store.actions.switchCalendar(calendar);
+      return;
+    }
+    switch (target.closest<HTMLElement>('[data-action]')?.dataset['action']) {
+      case 'toggle':
+        if (this.store.getState().open) {
+          this.close();
+        } else {
+          this.open();
+        }
+        break;
+      case 'now':
+        this.store.actions.selectNow();
+        break;
+      case 'done':
+        this.close();
+        this.dateInput.focus();
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+function renderColumn(column: HTMLElement, cells: readonly TimeCell[]): void {
+  if (column.children.length !== cells.length) {
+    column.replaceChildren(
+      ...cells.map((cell) =>
+        el('button', {
+          type: 'button',
+          class: 'ndp-time-item',
+          'data-value': cell.value,
+        }),
+      ),
+    );
+  }
+  cells.forEach((cell, index) => {
+    const button = column.children[index];
+    if (button) {
+      setText(button, cell.label);
+      setAttrs(button, {
+        'data-value': cell.value,
+        'aria-pressed': cell.isSelected ? 'true' : 'false',
+      });
+    }
+  });
+}
+
+function storeOptions(
+  options: Partial<DateTimePickerViewOptions>,
+): Partial<DateTimePickerOptions> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(options)) {
+    if (!VIEW_KEYS.has(key)) {
+      out[key] = value;
+    }
+  }
+
+  return out;
+}

package/src/define.ts

@@ -0,0 +1,16 @@
+import { defineCalendar } from './calendar';
+import { defineDatePicker } from './date-picker';
+import { defineDateRangePicker } from './date-range-picker';
+import { defineDateTimePicker } from './date-time-picker';
+import { defineMultiDatePicker } from './multi-date-picker';
+
+export { ELEMENT_NAMES } from './registry';
+
+/** Register all five custom elements (skips any already defined). Safe to call more than once. */
+export function defineElements(registry?: CustomElementRegistry): void {
+  defineDatePicker(registry);
+  defineCalendar(registry);
+  defineDateRangePicker(registry);
+  defineDateTimePicker(registry);
+  defineMultiDatePicker(registry);
+}

package/src/dom.ts

@@ -0,0 +1,109 @@
+/** Tiny DOM builders. Text goes through textContent; nothing user-supplied becomes HTML. */
+
+type Attrs = Record<string, string | number | boolean | null | undefined>;
+
+export function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attrs: Attrs = {},
+  children: (Node | string)[] = [],
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  setAttrs(node, attrs);
+  node.append(...children);
+
+  return node;
+}
+
+/** Set, update or remove attributes: false/null/undefined removes, true sets "". */
+export function setAttrs(node: Element, attrs: Attrs): void {
+  for (const [name, value] of Object.entries(attrs)) {
+    if (value === false || value === null || value === undefined) {
+      node.removeAttribute(name);
+    } else {
+      const text = value === true ? '' : String(value);
+      if (node.getAttribute(name) !== text) {
+        node.setAttribute(name, text);
+      }
+    }
+  }
+}
+
+export function setText(node: Node, text: string): void {
+  if (node.textContent !== text) {
+    node.textContent = text;
+  }
+}
+
+let counter = 0;
+/** A document-unique id for aria-controls / aria-describedby. */
+export function uid(prefix: string): string {
+  counter += 1;
+
+  return `${prefix}-${counter}`;
+}
+
+const SVG = 'http://www.w3.org/2000/svg';
+const PATHS: Record<IconName, string[]> = {
+  'chevron-left': ['M10 3.5 5.5 8l4.5 4.5'],
+  'chevron-right': ['M6 3.5 10.5 8 6 12.5'],
+  calendar: [
+    'M2 6.5h12',
+    'M5.5 1.5v3',
+    'M10.5 1.5v3',
+    'M4 3h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z',
+  ],
+  close: ['M4 4l8 8', 'M12 4l-8 8'],
+};
+
+export type IconName = 'chevron-left' | 'chevron-right' | 'calendar' | 'close';
+
+/** The Figma icon set at 16px, drawn with currentColor. */
+export function icon(name: IconName): SVGSVGElement {
+  const svg = document.createElementNS(SVG, 'svg');
+  svg.setAttribute('viewBox', '0 0 16 16');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.5');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  for (const d of PATHS[name]) {
+    const path = document.createElementNS(SVG, 'path');
+    path.setAttribute('d', d);
+    svg.append(path);
+  }
+
+  return svg;
+}
+
+/**
+ * Popup or inline: an inline picker's calendar is always in the page, so its
+ * inputs are plain text fields, its toggle is hidden and its panel is a group
+ * in normal flow rather than a top-layer dialog.
+ */
+export function setPopupMode(
+  state: { readonly open: boolean; readonly inline: boolean },
+  inputs: readonly HTMLElement[],
+  toggle: HTMLElement,
+  panel: HTMLElement,
+): void {
+  const { inline } = state;
+  for (const input of inputs) {
+    setAttrs(input, {
+      role: inline ? null : 'combobox',
+      'aria-haspopup': inline ? null : 'dialog',
+      'aria-expanded': inline ? null : String(state.open),
+    });
+  }
+  toggle.hidden = inline;
+  setAttrs(panel, {
+    role: inline ? 'group' : 'dialog',
+    popover: inline ? null : 'manual',
+  });
+  if (inline) {
+    panel.dataset['layout'] = 'inline';
+  } else if (panel.dataset['layout'] === 'inline') {
+    delete panel.dataset['layout'];
+  }
+}

package/src/element-utils.ts

@@ -0,0 +1,86 @@
+/** Attribute parsing and shared helpers for the custom elements. */
+import {
+  toIsoDate,
+  type CalendarDate,
+  type CalendarSystem,
+  type Weekday,
+} from '@nepdatejs/core';
+import type { EventMarker, HolidayInput, HolidayLookup } from '@nepdatejs/calendar';
+import type { PanelLayout } from '@nepdatejs/dom';
+import type { Theme } from './picker-view';
+
+/** Lets this module load during server rendering, where HTMLElement does not exist. */
+export const Base: typeof HTMLElement =
+  typeof HTMLElement === 'undefined'
+    ? (Object as unknown as typeof HTMLElement)
+    : HTMLElement;
+
+/** Options that cannot be attributes: functions and lists. Set them as properties. */
+export interface RichProps {
+  holidays?: readonly HolidayInput[] | HolidayLookup | undefined;
+  events?: ((date: CalendarDate) => readonly EventMarker[]) | undefined;
+  isDateDisabled?: ((date: CalendarDate) => boolean) | undefined;
+}
+
+export function str(element: Element, name: string): string | undefined {
+  return element.getAttribute(name) ?? undefined;
+}
+export function bool(element: Element, name: string): boolean {
+  return element.hasAttribute(name);
+}
+/** An attribute that is on unless set to "false". */
+export function onUnlessFalse(element: Element, name: string): boolean | undefined {
+  const value = element.getAttribute(name);
+  return value === null ? undefined : value !== 'false';
+}
+export function calendarAttr(element: Element, name: string): CalendarSystem | undefined {
+  const value = element.getAttribute(name)?.toUpperCase();
+  return value === 'BS' || value === 'AD' ? value : undefined;
+}
+export function weekday(element: Element, name: string): Weekday | undefined {
+  const value = Number(element.getAttribute(name) ?? NaN);
+  return Number.isInteger(value) && value >= 0 && value <= 6
+    ? (value as Weekday)
+    : undefined;
+}
+export function int(element: Element, name: string): number | undefined {
+  const value = Number(element.getAttribute(name) ?? NaN);
+  return Number.isInteger(value) ? value : undefined;
+}
+export function theme(element: Element): Theme | undefined {
+  const value = element.getAttribute('theme');
+  return value === 'light' || value === 'dark' || value === 'auto' ? value : undefined;
+}
+
+export function panelLayout(element: Element): PanelLayout | undefined {
+  const value = element.getAttribute('panel-layout');
+  return value === 'auto' || value === 'popover' || value === 'sheet' ? value : undefined;
+}
+
+/** presets="today, last7Days" → ['today', 'last7Days']; unknown ids show as disabled. */
+export function presetIds(element: Element): readonly string[] | undefined {
+  const value = element.getAttribute('presets');
+  return value === null
+    ? undefined
+    : value
+        .split(',')
+        .map((id) => id.trim())
+        .filter(Boolean);
+}
+
+/** Stop the inner inputs' native change events: the element fires its own. */
+export function swallowInnerChange(host: HTMLElement): void {
+  host.addEventListener(
+    'change',
+    (event) => {
+      if (event.target !== host) {
+        event.stopPropagation();
+      }
+    },
+    true,
+  );
+}
+
+export function isoOf(date: CalendarDate | null): string {
+  return date ? toIsoDate(date) : '';
+}

package/src/global.ts

@@ -0,0 +1,7 @@
+/**
+ * The all-in-one <script> build: core, calendar, datepicker, dom and these
+ * elements, registered on load. Exposes the API as window.NepDateElements.
+ */
+import './auto-define';
+
+export * from './index';

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @nepdatejs/vanilla: the BS/AD date picker and calendar for plain JavaScript,
+ * as custom elements and as a small imperative API. No side effects; import
+ * '@nepdatejs/vanilla/define' (or call defineElements) to register the elements.
+ *
+ * Each element also has its own entry, so a page that needs one picker ships
+ * only that one: '@nepdatejs/vanilla/date-picker', '/calendar',
+ * '/date-range-picker', '/date-time-picker' and '/multi-date-picker'.
+ */
+export * from './date-picker';
+export * from './calendar';
+export * from './date-range-picker';
+export * from './date-time-picker';
+export * from './multi-date-picker';
+export { defineElements, ELEMENT_NAMES } from './define';