@nepdatejs/vanilla 0.0.0-stage → 0.1.1

package/src/date-picker.ts

@@ -0,0 +1,91 @@
+/** `@nepdatejs/vanilla/date-picker`: just the date picker (element, view and mount function). */
+import type { DatePickerState } from '@nepdatejs/datepicker';
+import { NepDatePickerElement } from './date-picker-element';
+import { DatePickerView, type DatePickerViewOptions } from './picker-view';
+import { defineElement, ELEMENT_NAMES } from './registry';
+
+export { NepDatePickerElement };
+export { DatePickerView, type DatePickerViewOptions, type Theme } from './picker-view';
+
+/** Register <nep-date-picker> (skipped if already defined). */
+export function defineDatePicker(registry?: CustomElementRegistry): void {
+  defineElement(ELEMENT_NAMES.datePicker, NepDatePickerElement, registry);
+}
+
+export interface DatePickerHandle {
+  readonly view: DatePickerView;
+  getValue(): string;
+  getState(): DatePickerState;
+  setValue(value: string): void;
+  setOptions(changes: Partial<DatePickerViewOptions>): void;
+  open(): void;
+  close(): void;
+  destroy(): void;
+}
+
+/**
+ * Mount a date picker without custom elements.
+ *
+ * - Given a container, renders the field into it.
+ * - Given an <input>, hides it and keeps its value in step with the picker
+ *   (AD "YYYY-MM-DD"), so existing forms and server code keep working.
+ */
+export function createDatePicker(
+  target: HTMLElement,
+  options: DatePickerViewOptions = {},
+): DatePickerHandle {
+  const enhanced = target instanceof HTMLInputElement ? target : null;
+  let host = target;
+  if (enhanced) {
+    host = document.createElement('span');
+    enhanced.after(host);
+    enhanced.hidden = true;
+  }
+  const view = new DatePickerView(host, {
+    ...(enhanced
+      ? {
+          defaultValue: enhanced.value,
+          name: undefined,
+          required: enhanced.required,
+          disabled: enhanced.disabled,
+        }
+      : {}),
+    ...options,
+    onChange: (value, detail) => {
+      if (enhanced) {
+        enhanced.value = value;
+        enhanced.dispatchEvent(new Event('input', { bubbles: true }));
+        enhanced.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+      options.onChange?.(value, detail);
+    },
+  });
+
+  return {
+    view,
+    getValue: () => view.getState().value,
+    getState: () => view.getState(),
+    setValue: (value) => {
+      view.store.actions.setValue(value);
+      if (enhanced) {
+        enhanced.value = view.getState().value;
+      }
+    },
+    setOptions: (changes) => {
+      view.setOptions(changes);
+    },
+    open: () => {
+      view.open();
+    },
+    close: () => {
+      view.close();
+    },
+    destroy: () => {
+      view.destroy();
+      if (enhanced) {
+        host.remove();
+        enhanced.hidden = false;
+      }
+    },
+  };
+}

package/src/date-range-picker-element.ts

@@ -0,0 +1,201 @@
+import type { RangePreset } from '@nepdatejs/datepicker';
+import { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';
+import {
+  Base,
+  str,
+  bool,
+  calendarAttr,
+  int,
+  onUnlessFalse,
+  panelLayout,
+  theme,
+  presetIds,
+  swallowInnerChange,
+  type RichProps,
+} from './element-utils';
+
+/**
+ * <nep-date-range-picker name="leave" min-days="1"></nep-date-range-picker>
+ *
+ * Two BS/AD fields sharing one panel. The form receives `${name}-start` and
+ * `${name}-end` (or `start-name` / `end-name`). Fires `change` with { value }.
+ */
+export class NepDateRangePickerElement extends Base {
+  static readonly formAssociated = true;
+  static readonly observedAttributes: readonly string[] = [
+    'start',
+    'end',
+    'name',
+    'start-name',
+    'end-name',
+    'min',
+    'max',
+    'calendar',
+    'default-calendar',
+    'locale',
+    'min-days',
+    'max-days',
+    'disabled',
+    'required',
+    'theme',
+    'panel-layout',
+    'mask',
+    'inline',
+    'start-label',
+    'end-label',
+    'presets',
+    'fiscal-years',
+  ];
+
+  view: DateRangePickerView | null = null;
+  private readonly internals: ElementInternals | null;
+  private rich: RichProps = {};
+  private customPresets: readonly RangePreset[] | undefined;
+  private unsubscribe: (() => void) | null = null;
+
+  constructor() {
+    super();
+    this.internals =
+      typeof this.attachInternals === 'function' ? this.attachInternals() : null;
+    swallowInnerChange(this);
+  }
+
+  get value(): { start: string; end: string } {
+    return this.view?.getState().value ?? { start: '', end: '' };
+  }
+  set value(next: { start: string; end: string }) {
+    this.view?.store.actions.setValue(next);
+  }
+  set holidays(next: RichProps['holidays']) {
+    this.rich = { ...this.rich, holidays: next };
+    this.view?.setOptions({ holidays: next });
+  }
+  set isDateDisabled(next: RichProps['isDateDisabled']) {
+    this.rich = { ...this.rich, isDateDisabled: next };
+    this.view?.setOptions({ isDateDisabled: next });
+  }
+  /** Shortcuts, including custom { id, label, resolve } ones. Overrides the presets attribute. */
+  get presets(): readonly RangePreset[] | undefined {
+    return this.customPresets ?? (presetIds(this) as readonly RangePreset[] | undefined);
+  }
+  set presets(next: readonly RangePreset[] | undefined) {
+    this.customPresets = next;
+    this.view?.setOptions({ presets: this.presets });
+  }
+
+  connectedCallback(): void {
+    if (this.view) {
+      return;
+    }
+    const view = new DateRangePickerView(this, {
+      ...this.readOptions(),
+      defaultValue: { start: str(this, 'start') ?? '', end: str(this, 'end') ?? '' },
+      onChange: (value) => {
+        this.dispatchEvent(
+          new CustomEvent('change', { bubbles: true, detail: { value } }),
+        );
+      },
+      onOpenChange: (open) => {
+        this.dispatchEvent(
+          new CustomEvent(open ? 'nep-open' : 'nep-close', { bubbles: true }),
+        );
+      },
+    });
+    this.view = view;
+    this.unsubscribe = view.store.subscribe(() => {
+      this.syncForm();
+    });
+    this.syncForm();
+  }
+
+  disconnectedCallback(): void {
+    this.unsubscribe?.();
+    this.view?.destroy();
+    this.view = null;
+  }
+
+  attributeChangedCallback(): void {
+    this.view?.setOptions(this.readOptions());
+    this.syncForm();
+  }
+
+  formResetCallback(): void {
+    this.view?.store.actions.reset();
+  }
+
+  formDisabledCallback(disabled: boolean): void {
+    this.view?.setOptions({ disabled: disabled || bool(this, 'disabled') });
+  }
+
+  private names(): { start: string | undefined; end: string | undefined } {
+    const name = str(this, 'name');
+
+    return {
+      start: str(this, 'start-name') ?? (name ? `${name}-start` : undefined),
+      end: str(this, 'end-name') ?? (name ? `${name}-end` : undefined),
+    };
+  }
+
+  private readOptions(): DateRangePickerViewOptions {
+    const names = this.names();
+
+    return {
+      ...this.rich,
+      startName: names.start,
+      endName: names.end,
+      hiddenInput: this.internals === null,
+      min: str(this, 'min'),
+      max: str(this, 'max'),
+      calendar: calendarAttr(this, 'calendar'),
+      defaultCalendar: calendarAttr(this, 'default-calendar'),
+      locale: str(this, 'locale'),
+      minDays: int(this, 'min-days'),
+      maxDays: int(this, 'max-days'),
+      disabled: bool(this, 'disabled'),
+      required: bool(this, 'required'),
+      theme: theme(this),
+      panelLayout: panelLayout(this),
+      mask: onUnlessFalse(this, 'mask'),
+      inline: this.hasAttribute('inline'),
+      startLabel: str(this, 'start-label'),
+      endLabel: str(this, 'end-label'),
+      fiscalYearView: bool(this, 'fiscal-years'),
+      presets: this.presets,
+    };
+  }
+
+  private syncForm(): void {
+    const view = this.view;
+    if (!view || !this.internals) {
+      return;
+    }
+    const state = view.getState();
+    const names = this.names();
+    const data = new FormData();
+    if (names.start && state.value.start) {
+      data.append(names.start, state.value.start);
+    }
+    if (names.end && state.value.end) {
+      data.append(names.end, state.value.end);
+    }
+    this.internals.setFormValue(data);
+    if (state.error) {
+      this.internals.setValidity(
+        { customError: true },
+        state.error.message,
+        view.inputs.start,
+      );
+    } else if (
+      bool(this, 'required') &&
+      (state.value.start === '' || state.value.end === '')
+    ) {
+      this.internals.setValidity(
+        { valueMissing: true },
+        'Please choose a start and end date.',
+        view.inputs.start,
+      );
+    } else {
+      this.internals.setValidity({});
+    }
+  }
+}

package/src/date-range-picker.ts

@@ -0,0 +1,20 @@
+/** `@nepdatejs/vanilla/date-range-picker`: just the range picker. */
+import { NepDateRangePickerElement } from './date-range-picker-element';
+import { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';
+import { defineElement, ELEMENT_NAMES } from './registry';
+
+export { NepDateRangePickerElement };
+export { DateRangePickerView, type DateRangePickerViewOptions } from './range-view';
+
+/** Register <nep-date-range-picker> (skipped if already defined). */
+export function defineDateRangePicker(registry?: CustomElementRegistry): void {
+  defineElement(ELEMENT_NAMES.dateRangePicker, NepDateRangePickerElement, registry);
+}
+
+/** Mount a date range picker into a container. */
+export function createDateRangePicker(
+  container: HTMLElement,
+  options: DateRangePickerViewOptions = {},
+): DateRangePickerView {
+  return new DateRangePickerView(container, options);
+}

package/src/date-time-picker-element.ts

@@ -0,0 +1,191 @@
+import type { SinglePreset } from '@nepdatejs/datepicker';
+import { DateTimePickerView, type DateTimePickerViewOptions } from './datetime-view';
+import {
+  Base,
+  str,
+  bool,
+  calendarAttr,
+  int,
+  onUnlessFalse,
+  panelLayout,
+  theme,
+  presetIds,
+  swallowInnerChange,
+  type RichProps,
+} from './element-utils';
+
+/**
+ * <nep-date-time-picker name="starts-at" minute-step="15"></nep-date-time-picker>
+ *
+ * A form-associated BS/AD date + time field. The form receives one instant as
+ * an ISO timestamp with the zone's offset ("2026-10-18T14:30:00+05:45").
+ * Fires `change` with { value, ad, bs, time }.
+ */
+export class NepDateTimePickerElement extends Base {
+  static readonly formAssociated = true;
+  static readonly observedAttributes: readonly string[] = [
+    'value',
+    'min',
+    'max',
+    'calendar',
+    'default-calendar',
+    'locale',
+    'name',
+    'required',
+    'disabled',
+    'theme',
+    'panel-layout',
+    'mask',
+    'inline',
+    'time-zone',
+    'hour12',
+    'minute-step',
+    'default-time',
+    'label',
+    'time-label',
+    'presets',
+  ];
+
+  view: DateTimePickerView | null = null;
+  private readonly internals: ElementInternals | null;
+  private rich: RichProps = {};
+  private unsubscribe: (() => void) | null = null;
+
+  constructor() {
+    super();
+    this.internals =
+      typeof this.attachInternals === 'function' ? this.attachInternals() : null;
+    swallowInnerChange(this);
+  }
+
+  get value(): string {
+    return this.view?.getState().value ?? '';
+  }
+  set value(next: string) {
+    this.view?.store.actions.setValue(next);
+  }
+  set holidays(next: RichProps['holidays']) {
+    this.rich = { ...this.rich, holidays: next };
+    this.view?.setOptions({ holidays: next });
+  }
+  set isDateDisabled(next: RichProps['isDateDisabled']) {
+    this.rich = { ...this.rich, isDateDisabled: next };
+    this.view?.setOptions({ isDateDisabled: next });
+  }
+
+  connectedCallback(): void {
+    if (this.view) {
+      return;
+    }
+    const view = new DateTimePickerView(this, {
+      ...this.readOptions(),
+      defaultValue: str(this, 'value'),
+      onChange: (value, detail) => {
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            bubbles: true,
+            detail: {
+              value,
+              ad: detail?.ad ?? null,
+              bs: detail?.bs ?? null,
+              time: detail?.time ?? null,
+            },
+          }),
+        );
+      },
+      onOpenChange: (open) => {
+        this.dispatchEvent(
+          new CustomEvent(open ? 'nep-open' : 'nep-close', { bubbles: true }),
+        );
+      },
+    });
+    this.view = view;
+    this.unsubscribe = view.store.subscribe(() => {
+      this.syncForm();
+    });
+    this.syncForm();
+  }
+
+  disconnectedCallback(): void {
+    this.unsubscribe?.();
+    this.view?.destroy();
+    this.view = null;
+  }
+
+  attributeChangedCallback(
+    name: string,
+    previous: string | null,
+    next: string | null,
+  ): void {
+    if (!this.view || previous === next) {
+      return;
+    }
+    if (name === 'value') {
+      this.view.store.actions.setValue(next ?? '');
+    }
+    this.view.setOptions(this.readOptions());
+    this.syncForm();
+  }
+
+  formResetCallback(): void {
+    this.view?.store.actions.reset();
+  }
+
+  formDisabledCallback(disabled: boolean): void {
+    this.view?.setOptions({ disabled: disabled || bool(this, 'disabled') });
+  }
+
+  override focus(options?: FocusOptions): void {
+    this.view?.dateInput.focus(options);
+  }
+
+  private readOptions(): DateTimePickerViewOptions {
+    return {
+      ...this.rich,
+      min: str(this, 'min'),
+      max: str(this, 'max'),
+      calendar: calendarAttr(this, 'calendar'),
+      defaultCalendar: calendarAttr(this, 'default-calendar'),
+      locale: str(this, 'locale'),
+      name: str(this, 'name'),
+      hiddenInput: this.internals === null,
+      required: bool(this, 'required'),
+      disabled: bool(this, 'disabled'),
+      theme: theme(this),
+      panelLayout: panelLayout(this),
+      mask: onUnlessFalse(this, 'mask'),
+      inline: this.hasAttribute('inline'),
+      timeZone: str(this, 'time-zone'),
+      hour12: bool(this, 'hour12'),
+      minuteStep: int(this, 'minute-step'),
+      defaultTime: str(this, 'default-time'),
+      ariaLabel: str(this, 'label'),
+      timeLabel: str(this, 'time-label'),
+      presets: presetIds(this) as readonly SinglePreset[] | undefined,
+    };
+  }
+
+  private syncForm(): void {
+    const view = this.view;
+    if (!view || !this.internals) {
+      return;
+    }
+    const state = view.getState();
+    this.internals.setFormValue(state.value === '' ? null : state.value);
+    if (state.error) {
+      this.internals.setValidity(
+        { customError: true },
+        state.error.message,
+        state.error.field === 'time' ? view.timeInput : view.dateInput,
+      );
+    } else if (bool(this, 'required') && state.value === '') {
+      this.internals.setValidity(
+        { valueMissing: true },
+        'Please choose a date and time.',
+        view.dateInput,
+      );
+    } else {
+      this.internals.setValidity({});
+    }
+  }
+}

package/src/date-time-picker.ts

@@ -0,0 +1,20 @@
+/** `@nepdatejs/vanilla/date-time-picker`: just the date + time picker. */
+import { NepDateTimePickerElement } from './date-time-picker-element';
+import { DateTimePickerView, type DateTimePickerViewOptions } from './datetime-view';
+import { defineElement, ELEMENT_NAMES } from './registry';
+
+export { NepDateTimePickerElement };
+export { DateTimePickerView, type DateTimePickerViewOptions } from './datetime-view';
+
+/** Register <nep-date-time-picker> (skipped if already defined). */
+export function defineDateTimePicker(registry?: CustomElementRegistry): void {
+  defineElement(ELEMENT_NAMES.dateTimePicker, NepDateTimePickerElement, registry);
+}
+
+/** Mount a date + time picker into a container. */
+export function createDateTimePicker(
+  container: HTMLElement,
+  options: DateTimePickerViewOptions = {},
+): DateTimePickerView {
+  return new DateTimePickerView(container, options);
+}