@svgrid/grid 1.2.21 → 1.2.23

package/src/SvTimePicker.svelte

@@ -0,0 +1,359 @@
+<script lang="ts" module>
+  export type TimeValue = Date | string | number | null
+</script>
+
+<script lang="ts">
+  /**
+   * SvTimePicker - an analog clock-dial time picker (parity: Smart
+   * `smart-time-picker`). 12/24-hour, minute snapping, hour->minute auto-switch,
+   * pointer-drag + keyboard. Works standalone and as the SvGrid `time` editor.
+   * All visuals come from `--sg-*` tokens so every theme applies for free.
+   */
+  type Props = {
+    /** Date, "HH:MM[:SS]" string, or epoch ms. */
+    value?: TimeValue
+    /** Fires with a Date (today's date carrying the picked time). */
+    onChange?: (value: Date) => void
+    format?: '12-hour' | '24-hour'
+    minuteInterval?: number
+    /** After picking an hour, jump the dial to minutes. Default true. */
+    autoSwitchToMinutes?: boolean
+    /** Show the Now footer button. */
+    footer?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    name?: string
+    /** Which dial opens first. */
+    selection?: 'hour' | 'minute'
+  }
+
+  let {
+    value = null,
+    onChange,
+    format = '24-hour',
+    minuteInterval = 1,
+    autoSwitchToMinutes = true,
+    footer = false,
+    disabled = false,
+    readonly = false,
+    name,
+    selection = 'hour',
+  }: Props = $props()
+
+  const is12 = $derived(format === '12-hour')
+  const isInteractive = $derived(!disabled && !readonly)
+
+  function parseValue(v: TimeValue): { h: number; m: number } {
+    if (v == null) { const n = new Date(); return { h: n.getHours(), m: n.getMinutes() } }
+    if (typeof v === 'string') {
+      const mt = v.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/)
+      if (mt) return { h: Math.min(23, +mt[1]!), m: Math.min(59, +mt[2]!) }
+      const d = new Date(v)
+      if (!isNaN(d.getTime())) return { h: d.getHours(), m: d.getMinutes() }
+      const n = new Date(); return { h: n.getHours(), m: n.getMinutes() }
+    }
+    const d = new Date(v)
+    return { h: d.getHours(), m: d.getMinutes() }
+  }
+
+  let hours = $state(0)
+  let minutes = $state(0)
+  let sel = $state<'hour' | 'minute'>('hour')
+  let seeded = false
+  let lastKey = '￿'
+  $effect(() => {
+    const { h, m } = parseValue(value)
+    const key = `${h}:${m}`
+    if (key !== lastKey) {
+      lastKey = key
+      hours = h
+      minutes = m
+      if (!seeded) { seeded = true; sel = selection }
+    }
+  })
+
+  const displayHour = $derived(is12 ? (hours % 12 === 0 ? 12 : hours % 12) : hours)
+  const isPm = $derived(hours >= 12)
+  const mm = $derived(String(minutes).padStart(2, '0'))
+
+  // --- Dial geometry ---
+  const SIZE = 240
+  const C = SIZE / 2
+  const OUTER = C - 22
+  const INNER = C - 58
+
+  function pointAt(angleDeg: number, r: number) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180
+    return { x: C + r * Math.cos(rad), y: C + r * Math.sin(rad) }
+  }
+
+  type Tick = { label: string; x: number; y: number; value: number; ring: 'outer' | 'inner' }
+
+  const hourTicks = $derived.by<Tick[]>(() => {
+    const ticks: Tick[] = []
+    if (is12) {
+      for (let i = 0; i < 12; i++) {
+        const h = i === 0 ? 12 : i
+        const p = pointAt(i * 30, OUTER)
+        ticks.push({ label: String(h), x: p.x, y: p.y, value: h, ring: 'outer' })
+      }
+    } else {
+      for (let i = 0; i < 12; i++) {
+        const outer = pointAt(i * 30, OUTER) // 12..23
+        const inner = pointAt(i * 30, INNER) // 00..11
+        const ho = i + 12
+        const hi = i
+        ticks.push({ label: String(ho).padStart(2, '0'), x: outer.x, y: outer.y, value: ho, ring: 'outer' })
+        ticks.push({ label: hi === 0 ? '00' : String(hi).padStart(2, '0'), x: inner.x, y: inner.y, value: hi, ring: 'inner' })
+      }
+    }
+    return ticks
+  })
+
+  const minuteTicks = $derived.by<Tick[]>(() =>
+    Array.from({ length: 12 }, (_, i) => {
+      const v = i * 5
+      const p = pointAt(i * 30, OUTER)
+      return { label: String(v).padStart(2, '0'), x: p.x, y: p.y, value: v, ring: 'outer' as const }
+    }),
+  )
+
+  // Hand endpoint for the current selection.
+  const handAngle = $derived(
+    sel === 'hour'
+      ? (is12 ? (displayHour % 12) * 30 : (hours % 12) * 30)
+      : minutes * 6,
+  )
+  const handRadius = $derived(sel === 'hour' && !is12 && hours % 12 === hours && hours < 12 ? INNER : OUTER)
+  const handEnd = $derived(pointAt(handAngle, handRadius))
+
+  // --- Emit ---
+  function emit() {
+    const d = new Date()
+    d.setHours(hours, minutes, 0, 0)
+    onChange?.(d)
+  }
+
+  function setHourFromDisplay(h12OrH: number, ring: 'outer' | 'inner') {
+    if (is12) {
+      // Preserve AM/PM.
+      const base = h12OrH % 12
+      hours = isPm ? base + 12 : base
+    } else {
+      hours = ring === 'inner' ? h12OrH : h12OrH
+    }
+    lastKey = `${hours}:${minutes}`
+    emit()
+    if (autoSwitchToMinutes) sel = 'minute'
+  }
+
+  function snap(m: number) {
+    const step = Math.max(1, Math.floor(minuteInterval))
+    return (Math.round(m / step) * step) % 60
+  }
+
+  function setMinute(m: number) {
+    minutes = snap(m)
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  function setAmPm(pm: boolean) {
+    if (pm === isPm) return
+    hours = pm ? (hours % 12) + 12 : hours % 12
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  // --- Pointer drag on the dial ---
+  let dialEl: SVGSVGElement | null = null
+  let dragging = false
+
+  function angleFromEvent(e: PointerEvent): { angle: number; dist: number } {
+    const rect = dialEl!.getBoundingClientRect()
+    const scale = SIZE / rect.width
+    const x = (e.clientX - rect.left) * scale - C
+    const y = (e.clientY - rect.top) * scale - C
+    let deg = (Math.atan2(y, x) * 180) / Math.PI + 90
+    if (deg < 0) deg += 360
+    return { angle: deg, dist: Math.hypot(x, y) }
+  }
+
+  function applyPointer(e: PointerEvent) {
+    if (!isInteractive) return
+    const { angle, dist } = angleFromEvent(e)
+    if (sel === 'hour') {
+      const idx = Math.round(angle / 30) % 12
+      if (is12) {
+        const h = idx === 0 ? 12 : idx
+        const base = h % 12
+        hours = isPm ? base + 12 : base
+      } else {
+        const inner = dist < (OUTER + INNER) / 2
+        hours = inner ? idx : idx + 12
+      }
+      lastKey = `${hours}:${minutes}`
+      emit()
+    } else {
+      const m = Math.round(angle / 6) % 60
+      setMinute(m)
+    }
+  }
+
+  function onDialPointerDown(e: PointerEvent) {
+    if (!isInteractive) return
+    dragging = true
+    dialEl?.setPointerCapture(e.pointerId)
+    applyPointer(e)
+  }
+  function onDialPointerMove(e: PointerEvent) {
+    if (dragging) applyPointer(e)
+  }
+  function onDialPointerUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    dialEl?.releasePointerCapture(e.pointerId)
+    if (sel === 'hour' && autoSwitchToMinutes) sel = 'minute'
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!isInteractive) return
+    const step = sel === 'minute' ? Math.max(1, Math.floor(minuteInterval)) : 1
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+      e.preventDefault()
+      if (sel === 'hour') { hours = (hours + 1) % 24 } else { minutes = (minutes + step) % 60 }
+      lastKey = `${hours}:${minutes}`; emit()
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+      e.preventDefault()
+      if (sel === 'hour') { hours = (hours + 23) % 24 } else { minutes = (minutes - step + 60) % 60 }
+      lastKey = `${hours}:${minutes}`; emit()
+    } else if (e.key === 'Tab' && !e.shiftKey && sel === 'hour') {
+      sel = 'minute'
+    }
+  }
+
+  function now() {
+    const n = new Date()
+    hours = n.getHours(); minutes = n.getMinutes()
+    lastKey = `${hours}:${minutes}`
+    emit()
+  }
+
+  function isActiveHour(t: Tick): boolean {
+    if (is12) return t.value === displayHour
+    return t.value === hours
+  }
+</script>
+
+<div class="sv-tp" class:sv-tp--disabled={disabled} role="group" aria-label="Time picker">
+  <div class="sv-tp__head">
+    <button type="button" class="sv-tp__seg" class:is-active={sel === 'hour'} onclick={() => (sel = 'hour')} disabled={disabled}>
+      {String(displayHour).padStart(2, '0')}
+    </button>
+    <span class="sv-tp__colon">:</span>
+    <button type="button" class="sv-tp__seg" class:is-active={sel === 'minute'} onclick={() => (sel = 'minute')} disabled={disabled}>
+      {mm}
+    </button>
+    {#if is12}
+      <div class="sv-tp__ampm">
+        <button type="button" class:is-active={!isPm} onclick={() => setAmPm(false)} disabled={disabled}>AM</button>
+        <button type="button" class:is-active={isPm} onclick={() => setAmPm(true)} disabled={disabled}>PM</button>
+      </div>
+    {/if}
+  </div>
+
+  <svg
+    bind:this={dialEl}
+    class="sv-tp__dial"
+    viewBox={`0 0 ${SIZE} ${SIZE}`}
+    width="100%"
+    role="slider"
+    tabindex={disabled ? -1 : 0}
+    aria-label={sel === 'hour' ? 'Hour' : 'Minute'}
+    aria-valuenow={sel === 'hour' ? hours : minutes}
+    aria-valuemin="0"
+    aria-valuemax={sel === 'hour' ? 23 : 59}
+    onpointerdown={onDialPointerDown}
+    onpointermove={onDialPointerMove}
+    onpointerup={onDialPointerUp}
+    onpointercancel={onDialPointerUp}
+    onkeydown={onKeydown}
+  >
+    <circle class="sv-tp__face" cx={C} cy={C} r={C - 4} />
+    <!-- hand -->
+    <line class="sv-tp__hand" x1={C} y1={C} x2={handEnd.x} y2={handEnd.y} />
+    <circle class="sv-tp__hub" cx={C} cy={C} r="3" />
+    <circle class="sv-tp__knob" cx={handEnd.x} cy={handEnd.y} r="15" />
+    {#if sel === 'hour'}
+      {#each hourTicks as t (t.ring + '-' + t.value)}
+        <text class="sv-tp__num" class:is-active={isActiveHour(t)} class:is-inner={t.ring === 'inner'} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {:else}
+      {#each minuteTicks as t (t.value)}
+        <text class="sv-tp__num" class:is-active={t.value === minutes} x={t.x} y={t.y} dominant-baseline="central" text-anchor="middle">{t.label}</text>
+      {/each}
+    {/if}
+  </svg>
+
+  {#if footer}
+    <div class="sv-tp__footer">
+      <button type="button" class="sv-tp__now" onclick={now} disabled={disabled}>Now</button>
+    </div>
+  {/if}
+
+  {#if name}<input type="hidden" {name} value={`${String(hours).padStart(2, '0')}:${mm}`} />{/if}
+</div>
+
+<style>
+  .sv-tp {
+    --_accent: var(--sg-accent, #2563eb);
+    --_bg: var(--sg-bg, #fff);
+    --_fg: var(--sg-fg, #0f172a);
+    --_muted: var(--sg-muted, #64748b);
+    --_border: var(--sg-border, #e2e8f0);
+    --_face: var(--sg-header-bg, #f1f5f9);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; flex-direction: column; gap: 10px; align-items: center;
+    width: 260px; padding: 12px;
+    background: var(--_bg); color: var(--_fg);
+    border: 1px solid var(--_border); border-radius: calc(var(--_radius) + 4px);
+    user-select: none;
+  }
+  .sv-tp--disabled { opacity: 0.55; pointer-events: none; }
+
+  .sv-tp__head { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
+  .sv-tp__seg {
+    font-size: 30px; font-weight: 700; line-height: 1;
+    background: none; border: 0; color: var(--_muted); cursor: pointer;
+    padding: 2px 6px; border-radius: var(--_radius);
+  }
+  .sv-tp__seg.is-active { color: var(--_accent); background: color-mix(in srgb, var(--_accent) 12%, transparent); }
+  .sv-tp__colon { font-size: 28px; font-weight: 700; color: var(--_muted); }
+  .sv-tp__ampm { display: flex; flex-direction: column; margin-left: 8px; gap: 2px; }
+  .sv-tp__ampm button {
+    font-size: 11px; font-weight: 700; padding: 3px 8px;
+    background: none; border: 1px solid var(--_border); border-radius: 6px; color: var(--_muted); cursor: pointer;
+  }
+  .sv-tp__ampm button.is-active { background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent); }
+
+  .sv-tp__dial { touch-action: none; cursor: pointer; outline: none; display: block; width: 100%; height: auto; aspect-ratio: 1; }
+  .sv-tp__dial:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; border-radius: 50%; }
+  .sv-tp__face { fill: var(--_face); }
+  .sv-tp__hand { stroke: var(--_accent); stroke-width: 2; }
+  .sv-tp__hub { fill: var(--_accent); }
+  .sv-tp__knob { fill: var(--_accent); opacity: 0.9; }
+  .sv-tp__num {
+    font-size: 13px; fill: var(--_fg); pointer-events: none;
+    font-family: inherit;
+  }
+  .sv-tp__num.is-inner { font-size: 11px; fill: var(--_muted); }
+  .sv-tp__num.is-active { fill: var(--sg-on-accent, #fff); font-weight: 700; }
+
+  .sv-tp__footer { width: 100%; display: flex; justify-content: center; border-top: 1px solid var(--_border); padding-top: 8px; }
+  .sv-tp__now {
+    padding: 5px 14px; font: inherit; font-size: 12px; font-weight: 600;
+    background: none; border: 1px solid var(--_border); border-radius: var(--_radius);
+    color: var(--_accent); cursor: pointer;
+  }
+  .sv-tp__now:hover { background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+</style>

package/src/SvTimePicker.test.ts

@@ -0,0 +1,98 @@
+/**
+ * Component tests for SvTimePicker. jsdom lacks real SVG layout, so pointer-drag
+ * geometry is exercised lightly; the header/segment/AM-PM/keyboard logic (where
+ * the value math lives) is covered directly.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvTimePicker from './SvTimePicker.svelte'
+
+function mountTp(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvTimePicker, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+const segs = (t: HTMLElement) => t.querySelectorAll<HTMLButtonElement>('.sv-tp__seg')
+
+describe('SvTimePicker render', () => {
+  it('shows the seeded time (24h)', () => {
+    const { target, destroy } = mountTp({ value: '14:30' })
+    try {
+      expect(segs(target)[0]!.textContent!.trim()).toBe('14')
+      expect(segs(target)[1]!.textContent!.trim()).toBe('30')
+      expect(target.querySelector('.sv-tp__ampm')).toBeNull() // no AM/PM in 24h
+    } finally { destroy() }
+  })
+
+  it('shows 12-hour display with AM/PM', () => {
+    const { target, destroy } = mountTp({ value: '14:30', format: '12-hour' })
+    try {
+      expect(segs(target)[0]!.textContent!.trim()).toBe('02') // 14 -> 2 PM
+      const ampm = target.querySelectorAll<HTMLButtonElement>('.sv-tp__ampm button')
+      expect(ampm[1]!.classList.contains('is-active')).toBe(true) // PM active
+    } finally { destroy() }
+  })
+
+  it('renders 24 hour ticks (two rings) in 24h and 12 in 12h', () => {
+    const a = mountTp({ value: '10:00' })
+    try {
+      expect(a.target.querySelectorAll('.sv-tp__num').length).toBe(24)
+    } finally { a.destroy() }
+    const b = mountTp({ value: '10:00', format: '12-hour' })
+    try {
+      expect(b.target.querySelectorAll('.sv-tp__num').length).toBe(12)
+    } finally { b.destroy() }
+  })
+})
+
+describe('SvTimePicker interaction', () => {
+  it('AM/PM toggle shifts the hour by 12 and emits', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '02:15', format: '12-hour', onChange: (d: Date) => (got = d) })
+    try {
+      const pm = target.querySelectorAll<HTMLButtonElement>('.sv-tp__ampm button')[1]!
+      pm.click()
+      flushSync()
+      expect(got).not.toBeNull()
+      expect((got as unknown as Date).getHours()).toBe(14) // 2 AM -> 2 PM
+      expect((got as unknown as Date).getMinutes()).toBe(15)
+    } finally { destroy() }
+  })
+
+  it('keyboard bumps the selected field', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '10:00', selection: 'minute', minuteInterval: 15, onChange: (d: Date) => (got = d) })
+    try {
+      const dial = target.querySelector<SVGSVGElement>('.sv-tp__dial')!
+      dial.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }))
+      flushSync()
+      expect((got as unknown as Date).getMinutes()).toBe(15) // +interval
+    } finally { destroy() }
+  })
+
+  it('clicking the minute segment switches the active dial', () => {
+    const { target, destroy } = mountTp({ value: '10:00' })
+    try {
+      segs(target)[1]!.click()
+      flushSync()
+      expect(segs(target)[1]!.classList.contains('is-active')).toBe(true)
+      // minute dial shows 00,05,...,55 (12 labels)
+      expect(target.querySelectorAll('.sv-tp__num').length).toBe(12)
+    } finally { destroy() }
+  })
+
+  it('Now sets the current time', () => {
+    let got: Date | null = null
+    const { target, destroy } = mountTp({ value: '00:00', footer: true, onChange: (d: Date) => (got = d) })
+    try {
+      target.querySelector<HTMLButtonElement>('.sv-tp__now')!.click()
+      flushSync()
+      expect(got).not.toBeNull()
+      const now = new Date()
+      expect((got as unknown as Date).getHours()).toBe(now.getHours())
+    } finally { destroy() }
+  })
+})

package/src/SvToggleButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * SvToggleButton - a button with a pressed on/off state (aria-pressed).
+   * Parity: Smart `smart-toggle-button`. Controlled via `pressed` + `onChange`.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    pressed?: boolean
+    onChange?: (pressed: boolean) => void
+    disabled?: boolean
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { pressed = false, onChange, disabled = false, size = 'md', ariaLabel, children }: Props = $props()
+
+  function toggle() {
+    if (disabled) return
+    onChange?.(!pressed)
+  }
+</script>
+
+<button
+  type="button"
+  class="sv-toggle sv-toggle--{size}"
+  class:is-pressed={pressed}
+  aria-pressed={pressed}
+  aria-label={ariaLabel}
+  {disabled}
+  onclick={toggle}
+>
+  {#if children}{@render children()}{/if}
+</button>
+
+<style>
+  .sv-toggle {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    font: inherit; font-weight: 600; line-height: 1;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--_border); border-radius: var(--_radius); cursor: pointer; user-select: none;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .sv-toggle--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-toggle--md { padding: 8px 13px; font-size: 13px; }
+  .sv-toggle--lg { padding: 11px 17px; font-size: 15px; }
+  .sv-toggle:hover:not([disabled]):not(.is-pressed) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-toggle.is-pressed {
+    background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
+  }
+  .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>