@maihcx/super-date 0.3.0

package/src/ts/core/overlay.ts

@@ -0,0 +1,127 @@
+/**
+ * overlay.ts — builds and updates the visual overlay that sits on top of
+ * the hidden native date/time input.
+ */
+
+import { Segment } from '../types/segment.type';
+import { tokenValue, tokenPlaceholder } from './format';
+import { InputKind } from './format';
+
+const CALENDAR_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round"
+  stroke-linejoin="round" aria-hidden="true">
+  <rect x="3" y="4" width="18" height="18" rx="2"/>
+  <line x1="16" y1="2" x2="16" y2="6"/>
+  <line x1="8" y1="2" x2="8" y2="6"/>
+  <line x1="3" y1="10" x2="21" y2="10"/>
+</svg>`;
+
+const CLOCK_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+  stroke="currentColor" stroke-width="2" stroke-linecap="round"
+  stroke-linejoin="round" aria-hidden="true">
+  <circle cx="12" cy="12" r="10"/>
+  <polyline points="12 6 12 12 16 14"/>
+</svg>`;
+
+export interface OverlayElements {
+  wrapper: HTMLElement;
+  overlay: HTMLElement;
+  segEls: HTMLElement[];
+}
+
+/**
+ * Wrap `input` in a `.superdate-wrapper`, inject the overlay element and
+ * segment spans. Returns references to every created element.
+ */
+export function buildOverlay(
+  input: HTMLInputElement,
+  segments: Segment[],
+  onSegmentClick: (idx: number) => void,
+  onIconClick: () => void,
+  kind: InputKind = 'date',
+): OverlayElements {
+  // ── Wrapper ─────────────────────────────────────────────────────────────────
+  const wrapper = document.createElement('div');
+  wrapper.className = 'superdate-wrapper';
+  wrapper.style.width = input.style.width || '';
+
+  input.parentNode!.insertBefore(wrapper, input);
+  wrapper.appendChild(input);
+
+  input.classList.add('superdate-input');
+  input.style.display = 'block';
+  input.style.boxSizing = 'border-box';
+
+  // ── Overlay ──────────────────────────────────────────────────────────────────
+  const overlay = document.createElement('div');
+  overlay.className = 'superdate-overlay';
+
+  const segEls: HTMLElement[] = [];
+
+  segments.forEach((seg, i) => {
+    const el = document.createElement('span');
+    el.className = 'superdate-seg';
+    if (seg.token) {
+      el.dataset.token = seg.token;
+      el.dataset.idx = String(i);
+      el.setAttribute('tabindex', '-1');
+      el.addEventListener('click', (e) => {
+        e.stopPropagation();
+        onSegmentClick(i);
+      });
+    }
+    overlay.appendChild(el);
+    segEls.push(el);
+  });
+
+  // ── Icon (calendar for date/datetime-local, clock for time) ─────────────────
+  const icon = document.createElement('span');
+  icon.className = 'superdate-icon';
+  icon.innerHTML = kind === 'time' ? CLOCK_ICON_SVG : CALENDAR_ICON_SVG;
+  icon.addEventListener('click', (e) => {
+    e.stopPropagation();
+    onIconClick();
+  });
+  overlay.appendChild(icon);
+
+  wrapper.appendChild(overlay);
+
+  return { wrapper, overlay, segEls };
+}
+
+/**
+ * Re-render all segment spans from the current date/time value.
+ */
+export function renderSegments(
+  segments: Segment[],
+  segEls: HTMLElement[],
+  date: Date | null,
+): void {
+  segments.forEach((seg, i) => {
+    const el = segEls[i];
+    if (!seg.token) {
+      el.textContent = seg.text;
+      return;
+    }
+    const val = tokenValue(seg.token, date);
+    if (val) {
+      el.textContent = val;
+      el.classList.remove('empty');
+    } else {
+      el.textContent = tokenPlaceholder(seg.token);
+      el.classList.add('empty');
+    }
+  });
+}
+
+/**
+ * Mark one segment element as active (highlighted), deactivate all others.
+ */
+export function activateSegmentEl(segEls: HTMLElement[], idx: number): void {
+  segEls.forEach((el, i) => el.classList.toggle('active', i === idx));
+}
+
+/** Remove active highlight from all segment elements. */
+export function deactivateAll(segEls: HTMLElement[]): void {
+  segEls.forEach(el => el.classList.remove('active'));
+}

package/src/ts/core/registry.ts

@@ -0,0 +1,141 @@
+/**
+ * registry.ts — SuperDateRegistry tracks bound selectors and uses a single
+ * MutationObserver to auto-initialise matching inputs added to the DOM later.
+ * Supports input[type="date"], input[type="time"], and input[type="datetime-local"].
+ */
+
+import { BindEntry } from '../types/bind-entry.type';
+import { SuperDateOptions } from '../types/super-date.type';
+import { SuperDateInstance, INSTANCE_KEY } from './instance';
+
+let observer: MutationObserver | null = null;
+let bindings: BindEntry[] = [];
+
+const DESTROYED_ATTR = 'data-superdate-destroyed';
+const SUPPORTED_TYPES = new Set(['date', 'time', 'datetime-local']);
+
+// ── Destroyed-marker helpers ──────────────────────────────────────────────────
+
+function isDestroyed(el: HTMLInputElement): boolean {
+  return el.hasAttribute(DESTROYED_ATTR);
+}
+
+function markDestroyed(el: HTMLInputElement): void {
+  el.setAttribute(DESTROYED_ATTR, '');
+}
+
+function clearDestroyedBySelector(selector: string): void {
+  document.querySelectorAll<HTMLInputElement>(selector).forEach(el => {
+    el.removeAttribute(DESTROYED_ATTR);
+  });
+}
+
+// ── Options normalisation ─────────────────────────────────────────────────────
+
+function defaultOpts(options: SuperDateOptions = {}): Required<SuperDateOptions> {
+  return {
+    format: options.format ?? 'dd/MM/yyyy',
+    timeFormat: options.timeFormat ?? 'HH:mm',
+    dateTimeDelimiter: options.dateTimeDelimiter ?? ' ',
+    locale: options.locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en'),
+  };
+}
+
+// ── Initialisation helpers ────────────────────────────────────────────────────
+
+function createInstance(el: HTMLInputElement, opts: Required<SuperDateOptions>): void {
+  el[INSTANCE_KEY] = new SuperDateInstance(
+    el,
+    opts.format,
+    opts.timeFormat,
+    opts.dateTimeDelimiter,
+  );
+}
+
+function canInit(el: HTMLInputElement): boolean {
+  return SUPPORTED_TYPES.has(el.type) && !el[INSTANCE_KEY] && !isDestroyed(el);
+}
+
+function initAll(selector: string, opts: Required<SuperDateOptions>): void {
+  document.querySelectorAll<HTMLInputElement>(selector).forEach(el => {
+    if (canInit(el)) createInstance(el, opts);
+  });
+}
+
+/**
+ * Try to initialise any input in `node` (or node itself) against all
+ * registered bindings. Called from the MutationObserver callback.
+ */
+function tryInit(node: Element): void {
+  for (const binding of bindings) {
+    // Direct match
+    if (node instanceof HTMLInputElement && node.matches(binding.selector) && canInit(node)) {
+      createInstance(node, binding.options);
+    }
+    // Descendant matches
+    node.querySelectorAll<HTMLInputElement>(binding.selector).forEach(el => {
+      if (canInit(el)) createInstance(el, binding.options);
+    });
+  }
+}
+
+function startObserver(): void {
+  observer = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      for (const node of Array.from(mutation.addedNodes)) {
+        if (node instanceof Element) tryInit(node);
+      }
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+}
+
+// ── Public registry ───────────────────────────────────────────────────────────
+
+export class SuperDateRegistry {
+
+  public version: string = '';
+  public name: string = '';
+
+  /**
+   * Bind SuperDate to all current **and future** matching inputs.
+   * Safe to call multiple times with different selectors.
+   */
+  bind(selector: string, options: SuperDateOptions = {}): this {
+    const opts = defaultOpts(options);
+    bindings.push({ selector, options: opts });
+
+    clearDestroyedBySelector(selector);
+    initAll(selector, opts);
+
+    if (!observer) startObserver();
+
+    return this;
+  }
+
+  /**
+   * Manually enhance a single element.
+   * Returns the existing instance if one is already attached.
+   */
+  init(el: HTMLInputElement, options: SuperDateOptions = {}): SuperDateInstance {
+    if (el[INSTANCE_KEY]) return el[INSTANCE_KEY]!;
+
+    el.removeAttribute(DESTROYED_ATTR);
+    const opts = defaultOpts(options);
+    const instance = new SuperDateInstance(el, opts.format, opts.timeFormat, opts.dateTimeDelimiter);
+    el[INSTANCE_KEY] = instance;
+    return instance;
+  }
+
+  /**
+   * Remove the enhancement from a single element and mark it with
+   * [data-superdate-destroyed] so the MutationObserver won't re-bind it.
+   */
+  destroy(el: HTMLInputElement): void {
+    if (el[INSTANCE_KEY]) {
+      el[INSTANCE_KEY]!.destroy();
+      delete el[INSTANCE_KEY];
+    }
+    markDestroyed(el);
+  }
+}

package/src/ts/global.ts

@@ -0,0 +1,33 @@
+/**
+ * SuperDate — lightweight TypeScript date-input enhancer.
+ *
+ * Hides the native browser chrome, renders a fully custom overlay,
+ * and supports keyboard editing, copy/paste, and custom date formats.
+ *
+ * Usage:
+ *   import SuperDate from 'superdate';
+ *   SuperDate.bind('.date-field');
+ *   SuperDate.bind('[data-datepicker]', { format: 'MM/dd/yyyy' });
+ */
+
+import "../css/index.css"
+
+import { SuperDateRegistry } from './core/registry';
+
+declare global {
+    var GLOBAL_SDATE: SuperDateRegistry;
+}
+
+/** Singleton registry — the default export used in most projects. */
+if (typeof globalThis.GLOBAL_SDATE == "undefined") {
+    globalThis.GLOBAL_SDATE = new SuperDateRegistry();
+}
+var SuperDate = globalThis.GLOBAL_SDATE;
+
+const __LIB_VERSION__ = "LIB_VERSION";
+const __LIB_NAME__ = "LIB_NAME";
+
+SuperDate.version = __LIB_VERSION__;
+SuperDate.name = __LIB_NAME__;
+
+export default SuperDate;

package/src/ts/index.ts

@@ -0,0 +1,26 @@
+/**
+ * SuperDate — lightweight TypeScript date-input enhancer.
+ *
+ * Hides the native browser chrome, renders a fully custom overlay,
+ * and supports keyboard editing, copy/paste, and custom date formats.
+ *
+ * Usage:
+ *   import SuperDate from 'superdate';
+ *   SuperDate.bind('.date-field');
+ *   SuperDate.bind('[data-datepicker]', { format: 'MM/dd/yyyy' });
+ */
+
+import "../css/index.css"
+
+import { SuperDateRegistry } from './core/registry';
+
+/** Singleton registry — the default export used in most projects. */
+const SuperDate = new SuperDateRegistry();
+
+const __LIB_VERSION__ = "LIB_VERSION";
+const __LIB_NAME__ = "LIB_NAME";
+
+SuperDate.version = __LIB_VERSION__;
+SuperDate.name = __LIB_NAME__;
+
+export default SuperDate;

package/src/ts/types/bind-entry.type.ts

@@ -0,0 +1,6 @@
+import { SuperDateOptions } from "./super-date.type";
+
+export interface BindEntry {
+  selector: string;
+  options: Required<SuperDateOptions>;
+}

package/src/ts/types/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/ts/types/date-token.type.ts

@@ -0,0 +1,9 @@
+/** A single recognized date/time token in a format string. */
+export type DateToken =
+  // Date tokens
+  | 'dd' | 'MM' | 'yyyy' | 'yy' | 'd' | 'M'
+  // Time tokens
+  | 'HH' | 'H'   // 24h hours (padded / unpadded)
+  | 'hh' | 'h'   // 12h hours (padded / unpadded)
+  | 'mm'          // minutes (padded)  — NOTE: lowercase mm = minutes, uppercase MM = months
+  | 'ss';         // seconds (padded)

package/src/ts/types/segment.type.ts

@@ -0,0 +1,8 @@
+import { DateToken } from "./date-token.type";
+
+export interface Segment {
+  token: DateToken | null; // null → literal text
+  text: string;
+  start: number; // character position in the format string
+  end: number;
+}

package/src/ts/types/super-date.type.ts

@@ -0,0 +1,14 @@
+export interface SuperDateOptions {
+  /** Default display format for date inputs, e.g. "dd/MM/yyyy". Can be overridden per-element
+   *  via the `data-date-format` attribute. */
+  format?: string;
+  /** Default display format for time tokens, e.g. "HH:mm" or "HH:mm:ss".
+   *  Can be overridden per-element via `data-time-format` attribute. */
+  timeFormat?: string;
+  /** Delimiter between date part and time part in datetime-local inputs.
+   *  Can be overridden per-element via `data-date-time-delimiter` attribute.
+   *  Defaults to " " (space). */
+  dateTimeDelimiter?: string;
+  /** Locale used for month/weekday names. Defaults to navigator.language. */
+  locale?: string;
+}