svelte-date-input 0.0.0-stage → 0.1.0

package/dist/shared/format.js

@@ -0,0 +1,99 @@
+const tokenPattern = /y+|M{1,4}|d{1,2}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|a|'(?:[^']|'')*'|[^yMdHhmsa']+/g;
+const segmentByTokenLetter = {
+    H: 'hour24',
+    M: 'month',
+    a: 'amPm',
+    d: 'day',
+    h: 'hour12',
+    m: 'minute',
+    s: 'second',
+    y: 'year',
+};
+/**
+ * Parses a format based on Unicode Technical Standard #35, e.g. `y-MM-dd h:mm:ss a`.
+ */
+export function parseFormat(format) {
+    const parts = [];
+    for (const match of format.matchAll(tokenPattern)) {
+        const text = match[0];
+        const first = text.charAt(0);
+        const segment = segmentByTokenLetter[first];
+        if (first === "'") {
+            parts.push({ type: 'literal', text: text.slice(1, -1).replace(/''/g, "'") });
+        }
+        else if (segment) {
+            parts.push({ type: 'segment', segment, token: text });
+        }
+        else {
+            parts.push({ type: 'literal', text });
+        }
+    }
+    return parts;
+}
+/**
+ * Builds the format a given locale uses, limited to the fields needed by the input kind and detail.
+ */
+export function getDefaultFormatParts(locale, kind, detail) {
+    const options = {};
+    if (kind !== 'time') {
+        options.year = 'numeric';
+        if (detail !== 'year') {
+            options.month = 'numeric';
+            options.day = 'numeric';
+        }
+    }
+    if (kind !== 'date') {
+        options.hour = 'numeric';
+        if (detail === 'minute' || detail === 'second') {
+            options.minute = 'numeric';
+        }
+        if (detail === 'second') {
+            options.second = 'numeric';
+        }
+    }
+    const formatter = new Intl.DateTimeFormat(locale, options);
+    const uses12Hours = formatter.resolvedOptions().hour12 === true;
+    const parts = [];
+    for (const part of formatter.formatToParts(new Date(2017, 0, 1, 13, 2, 3))) {
+        switch (part.type) {
+            case 'year':
+                parts.push({ type: 'segment', segment: 'year', token: 'y' });
+                break;
+            case 'month':
+                parts.push({ type: 'segment', segment: 'month', token: 'M' });
+                break;
+            case 'day':
+                parts.push({ type: 'segment', segment: 'day', token: 'd' });
+                break;
+            case 'hour':
+                parts.push(uses12Hours
+                    ? { type: 'segment', segment: 'hour12', token: 'h' }
+                    : { type: 'segment', segment: 'hour24', token: 'H' });
+                break;
+            case 'minute':
+                parts.push({ type: 'segment', segment: 'minute', token: 'm' });
+                break;
+            case 'second':
+                parts.push({ type: 'segment', segment: 'second', token: 's' });
+                break;
+            case 'dayPeriod':
+                parts.push({ type: 'segment', segment: 'amPm', token: 'a' });
+                break;
+            case 'literal':
+                parts.push({ type: 'literal', text: part.value });
+                break;
+            default:
+        }
+    }
+    return parts;
+}
+export function getMonthNames(locale, style) {
+    const formatter = new Intl.DateTimeFormat(locale, { month: style });
+    return Array.from({ length: 12 }, (_, index) => formatter.format(new Date(2017, index, 1)));
+}
+export function getAmPmLabels(locale) {
+    const formatter = new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true });
+    const label = (hour) => formatter.formatToParts(new Date(2017, 0, 1, hour)).find((part) => part.type === 'dayPeriod')
+        ?.value ?? (hour < 12 ? 'AM' : 'PM');
+    return [label(5), label(17)];
+}

package/dist/shared/types.d.ts

@@ -0,0 +1,6 @@
+export type InputKind = 'date' | 'time' | 'datetime';
+export type SegmentName = 'year' | 'month' | 'day' | 'hour12' | 'hour24' | 'minute' | 'second' | 'amPm';
+export type DateDetail = 'year' | 'month';
+export type TimeDetail = 'hour' | 'minute' | 'second';
+export type InputDetail = DateDetail | TimeDetail;
+export type LooseValuePiece = string | Date | null;

package/dist/shared/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "svelte-date-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Segmented date, time and datetime input fields for your Svelte app. Base package of svelte-time-input and svelte-datetime-input.",
+  "keywords": [
+    "date",
+    "date-input",
+    "input",
+    "svelte"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Adhi Ravishankar",
+    "email": "adhiravishankar@gmail.com"
+  },
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "!**/*.spec.*"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.svelte"
+  ],
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*.css": "./dist/*.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "svelte-package --input src --output dist",
+    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"",
+    "format": "vp fmt --check",
+    "lint": "vp lint",
+    "prepack": "npm run clean && npm run build",
+    "test": "npm run lint && npm run tsc && npm run format && npm run unit",
+    "tsc": "svelte-check --tsconfig ./tsconfig.json",
+    "unit": "vp test",
+    "watch": "svelte-package --input src --output dist --watch"
+  },
+  "dependencies": {
+    "@wojtekmaj/date-utils": "^2.0.2",
+    "get-user-locale": "^3.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@vitest/browser-playwright": "5.0.5",
+    "playwright": "^1.64.1",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
+    "vite-plus": "1.4.0",
+    "vitest": "5.0.5",
+    "vitest-browser-svelte": "^3.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}

package/src/DateInput.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import SegmentedInput from './SegmentedInput.svelte';
+
+  import type { ComponentProps } from 'svelte';
+  import type { DateDetail, LooseValuePiece } from './shared/types.js';
+
+  type DateInputProps = Omit<
+    ComponentProps<typeof SegmentedInput>,
+    | 'hourAriaLabel'
+    | 'hourPlaceholder'
+    | 'kind'
+    | 'maxDetail'
+    | 'minuteAriaLabel'
+    | 'minutePlaceholder'
+    | 'onChange'
+    | 'secondAriaLabel'
+    | 'secondPlaceholder'
+    | 'amPmAriaLabel'
+    | 'value'
+  > & {
+    /**
+     * The most detailed field the user shall see.
+     *
+     * @default 'month'
+     */
+    maxDetail?: DateDetail;
+    onChange?: (value: Date | null, shouldCloseWidgets: boolean) => void;
+    value?: LooseValuePiece;
+  };
+
+  let { onChange, ...props }: DateInputProps = $props();
+</script>
+
+<SegmentedInput
+  {...props}
+  kind="date"
+  onChange={(value, shouldCloseWidgets) => onChange?.(value as Date | null, shouldCloseWidgets)}
+/>

package/src/Divider.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  type DividerProps = {
+    class: string;
+    text: string;
+  };
+
+  let { class: className, text }: DividerProps = $props();
+
+  // Keep whitespace from collapsing between input fields
+  const content = $derived(text.replace(/[  ]/g, ' '));
+</script>
+
+<span class={className}>{content}</span>

package/src/SegmentInput.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  type SegmentInputProps = {
+    ariaLabel?: string;
+    /** Base class name; the input gets `${className}__input` and `${className}__${name}`. */
+    className: string;
+    disabled?: boolean;
+    /** Characters that move focus to the next field when typed. */
+    dividers?: string;
+    form?: string;
+    max: number;
+    maxLength: number;
+    min: number;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    placeholder: string;
+    required?: boolean;
+    showLeadingZeros?: boolean;
+    value: string;
+  };
+
+  let {
+    ariaLabel,
+    className,
+    disabled,
+    dividers = '',
+    form,
+    max,
+    maxLength,
+    min,
+    name,
+    onChange,
+    onNavigate,
+    placeholder,
+    required,
+    showLeadingZeros = false,
+    value,
+  }: SegmentInputProps = $props();
+
+  const hasLeadingZero = $derived(showLeadingZeros && value !== '' && Number(value) < 10);
+
+  function onInput(event: Event & { currentTarget: HTMLInputElement }) {
+    const element = event.currentTarget;
+    const raw = element.value.replace(/\D/g, '');
+    const normalized = raw === '' ? '' : String(Number(raw));
+
+    element.value = normalized;
+    onChange(normalized);
+
+    if (raw.length >= maxLength || (raw !== '' && Number(raw) * 10 > max)) {
+      onNavigate(element, 1);
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    const element = event.currentTarget;
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      onNavigate(element, event.key === 'ArrowLeft' ? -1 : 1);
+    } else if (event.key === 'Backspace' && element.value === '') {
+      event.preventDefault();
+      onNavigate(element, -1);
+    } else if (event.key.length === 1 && dividers.includes(event.key)) {
+      event.preventDefault();
+      onNavigate(element, 1);
+    }
+  }
+
+  function onFocus(event: FocusEvent & { currentTarget: HTMLInputElement }) {
+    event.currentTarget.select();
+  }
+</script>
+
+{#if hasLeadingZero}
+  <span class="{className}__leadingZero">0</span>
+{/if}
+<input
+  aria-label={ariaLabel}
+  class={[
+    `${className}__input`,
+    `${className}__${name.replace(/12|24/, '')}`,
+    hasLeadingZero && `${className}__input--hasLeadingZero`,
+  ]}
+  data-input="true"
+  data-segment={name}
+  {disabled}
+  {form}
+  inputmode="numeric"
+  {max}
+  {min}
+  {name}
+  oninput={onInput}
+  onfocus={onFocus}
+  onkeydown={onKeyDown}
+  {placeholder}
+  {required}
+  step="1"
+  style:width="{Math.max(1, (value || placeholder).length)}ch"
+  type="number"
+  {value}
+/>

package/src/SegmentSelect.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  type SegmentSelectProps = {
+    ariaLabel?: string;
+    className: string;
+    disabled?: boolean;
+    form?: string;
+    name: string;
+    onChange: (value: string) => void;
+    onNavigate: (element: HTMLElement, direction: -1 | 1) => void;
+    options: { label: string; value: string }[];
+    placeholder: string;
+    required?: boolean;
+    value: string;
+  };
+
+  let {
+    ariaLabel,
+    className,
+    disabled,
+    form,
+    name,
+    onChange,
+    onNavigate,
+    options,
+    placeholder,
+    required,
+    value,
+  }: SegmentSelectProps = $props();
+
+  function onKeyDown(event: KeyboardEvent & { currentTarget: HTMLSelectElement }) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      onNavigate(event.currentTarget, event.key === 'ArrowLeft' ? -1 : 1);
+    }
+  }
+</script>
+
+<select
+  aria-label={ariaLabel}
+  class={[`${className}__input`, `${className}__${name}`]}
+  data-input="true"
+  data-segment={name}
+  data-select="true"
+  {disabled}
+  {form}
+  {name}
+  onchange={(event) => onChange(event.currentTarget.value)}
+  onkeydown={onKeyDown}
+  {required}
+  {value}
+>
+  <option value="">{placeholder}</option>
+  {#each options as option (option.value)}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</select>