@svgrid/grid 2.2.32 → 2.4.0

package/src/SvMaskedInput.svelte

@@ -1,122 +1,122 @@
-<script lang="ts">
-  /**
-   * SvMaskedInput - a pattern-masked text input (#=digit, A=letter, *=alnum;
-   * other chars are literals). Parity: Smart `smart-masked-text-box`. Emits both
-   * the masked display value and the raw (unmasked) value.
-   *
-   * The styled renderer over the headless `createMaskedInput` core; the mask
-   * formatting + state live in the core, spread here via prop-getters. The box,
-   * size, invalid state, clear button and adornments are owned by SvField's
-   * `frame` chrome.
-   */
-  import type { Snippet } from 'svelte'
-  import { unmask } from './datetime/mask'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createMaskedInput } from './createMaskedInput.svelte'
-
-  type Props = SvEditorProps & {
-    value?: string
-    /** Called with (masked, raw, complete). */
-    onChange?: (masked: string, raw: string, complete: boolean) => void
-    mask?: string
-    placeholder?: string
-    /** Show a clear (x) button when there is a value. */
-    clearable?: boolean
-    /** Leading adornment (icon/button) inside the field. */
-    leading?: Snippet
-    /** Trailing adornment (icon/button) inside the field. */
-    trailing?: Snippet
-    /** Plain-text affix at the start. */
-    prefix?: string
-    /** Plain-text affix at the end. */
-    suffix?: string
-    /** @deprecated Use `leading`. */
-    prefixIcon?: Snippet
-    /** @deprecated Use `trailing`. */
-    suffixIcon?: Snippet
-    /** Stretch to the container width. */
-    block?: boolean
-    /** Control width in px (ignored when `block`). Default 200. */
-    width?: number
-  }
-
-  let {
-    value = $bindable(''),
-    onChange,
-    mask = '',
-    placeholder,
-    disabled = false,
-    readonly = false,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    loading = false,
-    clearable = false,
-    leading,
-    trailing,
-    prefix,
-    suffix,
-    prefixIcon,
-    suffixIcon,
-    block = false,
-    width = 200,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-mask')
-  const uid = $derived(id ?? autoId)
-
-  const mi = createMaskedInput({
-    value: () => value,
-    // Write the masked `value` (so `bind:value` works) AND fire `onChange`.
-    onChange: (m, r, c) => { value = m; onChange?.(m, r, c) },
-    mask: () => mask,
-    placeholder: () => placeholder,
-    disabled: () => disabled,
-    readonly: () => readonly,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-    ariaLabel: () => ariaLabel,
-  })
-</script>
-
-<SvField
-  frame
-  id={uid}
-  {label}
-  {hint}
-  {error}
-  {required}
-  {dir}
-  {size}
-  {invalid}
-  {disabled}
-  {readonly}
-  {loading}
-  {block}
-  {width}
-  leading={leading ?? prefixIcon}
-  trailing={trailing ?? suffixIcon}
-  {prefix}
-  {suffix}
-  clearable={clearable}
-  showClear={!!mi.masked}
-  onclear={() => { value = ''; onChange?.('', '', false) }}
->
-  <input class="sv-masked__input" {...mi.inputProps()} />
-  {#if name}<input type="hidden" {name} value={mask ? unmask(mi.masked, mask) : mi.masked} />{/if}
-</SvField>
-
-<style>
-  .sv-masked__input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
-</style>
+<script lang="ts">
+  /**
+   * SvMaskedInput - a pattern-masked text input (#=digit, A=letter, *=alnum;
+   * other chars are literals). Parity: Smart `smart-masked-text-box`. Emits both
+   * the masked display value and the raw (unmasked) value.
+   *
+   * The styled renderer over the headless `createMaskedInput` core; the mask
+   * formatting + state live in the core, spread here via prop-getters. The box,
+   * size, invalid state, clear button and adornments are owned by SvField's
+   * `frame` chrome.
+   */
+  import type { Snippet } from 'svelte'
+  import { unmask } from './datetime/mask'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createMaskedInput } from './createMaskedInput.svelte'
+
+  type Props = SvEditorProps & {
+    value?: string
+    /** Called with (masked, raw, complete). */
+    onChange?: (masked: string, raw: string, complete: boolean) => void
+    mask?: string
+    placeholder?: string
+    /** Show a clear (x) button when there is a value. */
+    clearable?: boolean
+    /** Leading adornment (icon/button) inside the field. */
+    leading?: Snippet
+    /** Trailing adornment (icon/button) inside the field. */
+    trailing?: Snippet
+    /** Plain-text affix at the start. */
+    prefix?: string
+    /** Plain-text affix at the end. */
+    suffix?: string
+    /** @deprecated Use `leading`. */
+    prefixIcon?: Snippet
+    /** @deprecated Use `trailing`. */
+    suffixIcon?: Snippet
+    /** Stretch to the container width. */
+    block?: boolean
+    /** Control width in px (ignored when `block`). Default 200. */
+    width?: number
+  }
+
+  let {
+    value = $bindable(''),
+    onChange,
+    mask = '',
+    placeholder,
+    disabled = false,
+    readonly = false,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    loading = false,
+    clearable = false,
+    leading,
+    trailing,
+    prefix,
+    suffix,
+    prefixIcon,
+    suffixIcon,
+    block = false,
+    width = 200,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-mask')
+  const uid = $derived(id ?? autoId)
+
+  const mi = createMaskedInput({
+    value: () => value,
+    // Write the masked `value` (so `bind:value` works) AND fire `onChange`.
+    onChange: (m, r, c) => { value = m; onChange?.(m, r, c) },
+    mask: () => mask,
+    placeholder: () => placeholder,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+</script>
+
+<SvField
+  frame
+  id={uid}
+  {label}
+  {hint}
+  {error}
+  {required}
+  {dir}
+  {size}
+  {invalid}
+  {disabled}
+  {readonly}
+  {loading}
+  {block}
+  {width}
+  leading={leading ?? prefixIcon}
+  trailing={trailing ?? suffixIcon}
+  {prefix}
+  {suffix}
+  clearable={clearable}
+  showClear={!!mi.masked}
+  onclear={() => { value = ''; onChange?.('', '', false) }}
+>
+  <input class="sv-masked__input" {...mi.inputProps()} />
+  {#if name}<input type="hidden" {name} value={mask ? unmask(mi.masked, mask) : mi.masked} />{/if}
+</SvField>
+
+<style>
+  .sv-masked__input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
+</style>

package/src/SvMenu.svelte

@@ -1,124 +1,124 @@
-<script lang="ts" module>
-  export type { MenuItem } from './SvMenuList.svelte'
-</script>
-
-<script lang="ts">
-  /**
-   * SvMenu - a dropdown / context menu: a trigger opens a portalled, animated
-   * menu surface with submenus, separators, icons, shortcuts and full keyboard
-   * (arrows, Enter, Escape, ArrowRight/Left for submenus). Portals to <body> so it
-   * escapes any clipping. Parity: Smart menu / context-menu.
-   *
-   * ```svelte
-   * <SvMenu items={items} onSelect={(i) => run(i)}>
-   *   {#snippet anchor()}<button>Actions</button>{/snippet}
-   * </SvMenu>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import { getFocusable } from './a11y/focus-trap'
-  import { type EditorDir } from './editor-contract'
-  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
-
-  let {
-    items,
-    open = $bindable(false),
-    onOpenChange,
-    onSelect,
-    ariaLabel,
-    anchor,
-    dir,
-  }: {
-    items: ReadonlyArray<MenuItem>
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    onSelect?: (item: MenuItem) => void
-    ariaLabel?: string
-    anchor?: Snippet
-    /** Text direction (rtl mirrors the submenu chevron + flips ArrowLeft/Right). */
-    dir?: EditorDir
-  } = $props()
-
-  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
-
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
-
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-  function updatePos() {
-    if (!anchorEl) return
-    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight: Math.min(items.length, 10) * 34 + 8, minWidth: 180 })
-  }
-  /** Return focus to the trigger. Every dismissal path (Escape, item selection,
-   *  outside-click, Tab) funnels through the effect cleanup below, so this
-   *  fires uniformly instead of dropping focus to <body> on close. */
-  function focusTrigger() {
-    if (!anchorEl) return
-    ;(getFocusable(anchorEl)[0] ?? anchorEl)?.focus?.()
-  }
-
-  $effect(() => {
-    if (!open) return
-    updatePos()
-    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
-    const rp = () => updatePos()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    // Outside-click dismissal via the shared layer stack (Escape stays owned by
-    // SvMenuList's keyboard handling, so closeOnEscape is off here).
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnEscape: false,
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      layer.release()
-      // Only on an actual close (not a mid-open rerun from e.g. `items` changing).
-      if (!open) focusTrigger()
-    }
-  })
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
-<span
-  bind:this={anchorEl}
-  class="sv-menu__anchor"
-  aria-haspopup="menu"
-  aria-expanded={open}
-  onclick={toggle}
->
-  {@render anchor?.()}
-</span>
-
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-menu"
-    use:portalToBody
-    use:popIn={{ up: rect.openUpward }}
-    style:position="fixed"
-    style:top={`${rect.top}px`}
-    style:left={`${rect.left}px`}
-    dir={resolvedDir}
-    aria-label={ariaLabel}
-  >
-    <SvMenuList {items} onclose={() => setOpen(false)} onselect={(i) => onSelect?.(i)} dir={resolvedDir} />
-  </div>
-{/if}
-
-<style>
-  .sv-menu__anchor { display: inline-flex; }
-  :global(.sv-menu) {
-    z-index: 2147483646; min-width: 180px;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
-  }
-</style>
+<script lang="ts" module>
+  export type { MenuItem } from './SvMenuList.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvMenu - a dropdown / context menu: a trigger opens a portalled, animated
+   * menu surface with submenus, separators, icons, shortcuts and full keyboard
+   * (arrows, Enter, Escape, ArrowRight/Left for submenus). Portals to <body> so it
+   * escapes any clipping. Parity: Smart menu / context-menu.
+   *
+   * ```svelte
+   * <SvMenu items={items} onSelect={(i) => run(i)}>
+   *   {#snippet anchor()}<button>Actions</button>{/snippet}
+   * </SvMenu>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import { getFocusable } from './a11y/focus-trap'
+  import { type EditorDir } from './editor-contract'
+  import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
+
+  let {
+    items,
+    open = $bindable(false),
+    onOpenChange,
+    onSelect,
+    ariaLabel,
+    anchor,
+    dir,
+  }: {
+    items: ReadonlyArray<MenuItem>
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    onSelect?: (item: MenuItem) => void
+    ariaLabel?: string
+    anchor?: Snippet
+    /** Text direction (rtl mirrors the submenu chevron + flips ArrowLeft/Right). */
+    dir?: EditorDir
+  } = $props()
+
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+  function updatePos() {
+    if (!anchorEl) return
+    rect = anchoredRect(anchorEl.getBoundingClientRect(), { estimatedHeight: Math.min(items.length, 10) * 34 + 8, minWidth: 180 })
+  }
+  /** Return focus to the trigger. Every dismissal path (Escape, item selection,
+   *  outside-click, Tab) funnels through the effect cleanup below, so this
+   *  fires uniformly instead of dropping focus to <body> on close. */
+  function focusTrigger() {
+    if (!anchorEl) return
+    ;(getFocusable(anchorEl)[0] ?? anchorEl)?.focus?.()
+  }
+
+  $effect(() => {
+    if (!open) return
+    updatePos()
+    queueMicrotask(() => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])')?.focus())
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true)
+    window.addEventListener('resize', rp)
+    // Outside-click dismissal via the shared layer stack (Escape stays owned by
+    // SvMenuList's keyboard handling, so closeOnEscape is off here).
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnEscape: false,
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', rp, true)
+      window.removeEventListener('resize', rp)
+      layer.release()
+      // Only on an actual close (not a mid-open rerun from e.g. `items` changing).
+      if (!open) focusTrigger()
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
+<span
+  bind:this={anchorEl}
+  class="sv-menu__anchor"
+  aria-haspopup="menu"
+  aria-expanded={open}
+  onclick={toggle}
+>
+  {@render anchor?.()}
+</span>
+
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-menu"
+    use:portalToBody
+    use:popIn={{ up: rect.openUpward }}
+    style:position="fixed"
+    style:top={`${rect.top}px`}
+    style:left={`${rect.left}px`}
+    dir={resolvedDir}
+    aria-label={ariaLabel}
+  >
+    <SvMenuList {items} onclose={() => setOpen(false)} onselect={(i) => onSelect?.(i)} dir={resolvedDir} />
+  </div>
+{/if}
+
+<style>
+  .sv-menu__anchor { display: inline-flex; }
+  :global(.sv-menu) {
+    z-index: 2147483646; min-width: 180px;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
+  }
+</style>