@leavepulse/ui 0.44.0 → 0.45.0

package/src/composables/useHotkeys.ts

@@ -30,11 +30,30 @@ import { topModalElement } from "../components/modalDepth"
  *
  * Modifier note: Ctrl and Meta are one modifier here, since macOS binds ⌘ where
  * the rest bind Ctrl. Label the difference in the UI, not in the binding.
+ *
+ * Sequences ("g i", as on GitHub and Gmail) are bindings with `sequence`. A key
+ * that starts a sequence is held while the next one is awaited: if it
+ * continues a sequence, the sequence runs; if not, or after the timeout, the
+ * single-key binding on the held key (if any) runs, and the new key is handled
+ * as a fresh press. A key that starts no sequence runs at once, so sequences
+ * cost nothing to the bindings they do not collide with.
  */
 
-export interface HotkeyBinding {
-  /** Layout-produced key, compared case-insensitively ("l", "f2", "escape"). */
+/** One key of a sequence: a bare key ("g") or a full chord. */
+export interface HotkeyStep {
   key: string
+  code?: string
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+}
+
+export interface HotkeyBinding {
+  /**
+   * Layout-produced key, compared case-insensitively ("l", "f2", "escape").
+   * Required unless the binding is a `sequence`.
+   */
+  key?: string
   /**
    * Physical key position ("KeyL", "F2", "Digit1"). Matches on its own, which
    * is what makes non-Latin layouts work.
@@ -44,6 +63,16 @@ export interface HotkeyBinding {
   ctrl?: boolean
   shift?: boolean
   alt?: boolean
+  /**
+   * Keys pressed one after another: `"g i"`, or steps for chords and physical
+   * positions (`[{ key: "g", code: "KeyG" }, { key: "i", code: "KeyI" }]`).
+   * The string form splits on spaces, so a Space step needs the array form.
+   */
+  sequence?: string | (string | HotkeyStep)[]
+  /** How long a sequence waits for its next key, in ms. Default 1000. */
+  timeout?: number
+  /** Extra condition checked on every press; `false` leaves the key alone. */
+  when?: (event: KeyboardEvent) => boolean
   /**
    * Runs even while a text field has focus. Only for shortcuts that mean
    * something there — Escape, and the palette the user reaches from anywhere.
@@ -82,15 +111,20 @@ export interface HotkeyHelp {
   /**
    * Written the way it reads, "+"-separated. Defaults to one built from the
    * binding; set it where the binding is not the whole story, such as the
-   * second key of a chord ("G+D") or a key that needs Shift to type ("?").
+   * key that needs Shift to type ("?"). Sequences read with spaces: "G I".
    */
   combo?: string
 }
 
 export interface ShortcutEntry {
-  /** Rendered one <kbd> per "+"-separated key, so write it the way it reads. */
+  /**
+   * Rendered one <kbd> per "+"-separated key, so write it the way it reads.
+   * Spaces separate the steps of a sequence ("G I", "Ctrl+K Ctrl+S").
+   */
   combo: string
   label: string
+  /** Another mounted binding answers the same keys at the same priority. */
+  conflict?: boolean
 }
 
 export interface ShortcutGroup {
@@ -155,7 +189,10 @@ function isTextEntry(target: EventTarget | null): boolean {
 
 const MODIFIER_KEYS = new Set(["control", "meta", "shift", "alt"])
 
-export function matchesHotkey(event: KeyboardEvent, binding: HotkeyBinding): boolean {
+type KeyLike = Pick<KeyboardEvent, "key" | "code" | "ctrlKey" | "metaKey" | "shiftKey" | "altKey">
+
+export function matchesHotkey(event: KeyLike, binding: HotkeyBinding | HotkeyStep): boolean {
+  if (binding.key === undefined) return false
   const key = binding.key.toLowerCase()
   const ctrlHeld = event.ctrlKey || event.metaKey
   const wantsCtrl = Boolean(binding.ctrl) || key === "control" || key === "meta"
@@ -173,6 +210,31 @@ export function matchesHotkey(event: KeyboardEvent, binding: HotkeyBinding): boo
   )
 }
 
+/** The keys a binding waits for, in order: one step for a plain binding. */
+export function hotkeySteps(binding: HotkeyBinding): HotkeyStep[] {
+  const raw = binding.sequence
+  if (raw === undefined) {
+    if (binding.key === undefined) return []
+    const { key, code, ctrl, shift, alt } = binding
+    return [{ key, code, ctrl, shift, alt }]
+  }
+  const list = typeof raw === "string" ? raw.trim().split(/\s+/) : raw
+  return list.map((step) => (typeof step === "string" ? { key: step } : step))
+}
+
+/**
+ * Where a run of presses stands against a binding: "full" when they spell it
+ * out, "prefix" when more keys would, otherwise null.
+ */
+export function sequenceProgress(presses: KeyLike[], binding: HotkeyBinding): "full" | "prefix" | null {
+  const steps = hotkeySteps(binding)
+  if (!steps.length || presses.length > steps.length) return null
+  for (let i = 0; i < presses.length; i++) {
+    if (!matchesHotkey(presses[i]!, steps[i]!)) return null
+  }
+  return presses.length === steps.length ? "full" : "prefix"
+}
+
 /**
  * Bind a list of hotkeys for as long as the calling component is mounted.
  *
@@ -240,13 +302,35 @@ function insideOf(entry: MountedHotkeys, layer: Element): boolean {
   return !!node && layer.contains(node)
 }
 
-function onKeydown(event: KeyboardEvent) {
-  if (event.isComposing || event.defaultPrevented) return
+interface Candidate {
+  binding: HotkeyBinding
+  event: KeyboardEvent
+}
+
+const DEFAULT_TIMEOUT = 1000
+const pressed: KeyLike[] = []
+let held: Candidate[] = []
+let holdTimer: ReturnType<typeof setTimeout> | undefined
+const pendingKeys = ref<string[]>([])
+
+/**
+ * The keys of a sequence typed so far ("G" after the first key of "g i"),
+ * empty when nothing is pending. For a "G…" hint while the next key is awaited.
+ */
+export const pendingHotkey = computed(() => pendingKeys.value)
+
+function snapshot(event: KeyboardEvent): KeyLike {
+  const { key, code, ctrlKey, metaKey, shiftKey, altKey } = event
+  return { key, code, ctrlKey, metaKey, shiftKey, altKey }
+}
+
+function eligible(event: KeyboardEvent): HotkeyBinding[] {
   const inTextEntry = isTextEntry(event.target)
   const blocker = event.key === "Escape" ? topLayer() : topModalElement()
   const entries = [...mounted].sort(
     (a, b) => Number(toValue(b.priority) || 0) - Number(toValue(a.priority) || 0) || b.order - a.order,
   )
+  const out: HotkeyBinding[] = []
   for (const entry of entries) {
     if (toValue(entry.enabled) === false || !inScope(event.target, entry.scope)) continue
     const covered = !!blocker && !insideOf(entry, blocker)
@@ -254,12 +338,78 @@ function onKeydown(event: KeyboardEvent) {
       if (inTextEntry && !binding.allowInInput) continue
       if (event.repeat && binding.repeat === false) continue
       if (covered && !binding.overLayers) continue
-      if (!matchesHotkey(event, binding)) continue
-      if (binding.handler(event) === false) continue
+      if (binding.when && !binding.when(event)) continue
+      out.push(binding)
+    }
+  }
+  return out
+}
+
+function run(candidates: Candidate[]): boolean {
+  for (const { binding, event } of candidates) {
+    if (binding.handler(event) !== false) return true
+  }
+  return false
+}
+
+function resetSequence() {
+  clearTimeout(holdTimer)
+  holdTimer = undefined
+  pressed.length = 0
+  held = []
+  pendingKeys.value = []
+}
+
+function flushHeld() {
+  const waiting = held
+  resetSequence()
+  run(waiting)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.isComposing || event.defaultPrevented) return
+  if (pressed.length && MODIFIER_KEYS.has(event.key.toLowerCase())) return
+  if (pressed.length && event.key === "Escape") {
+    resetSequence()
+  }
+  const presses = [...pressed, snapshot(event)]
+  const bindings = eligible(event)
+  const full: Candidate[] = []
+  let waitFor = 0
+  for (const binding of bindings) {
+    const progress = sequenceProgress(presses, binding)
+    if (progress === "full") full.push({ binding, event })
+    else if (progress === "prefix") waitFor = Math.max(waitFor, binding.timeout ?? DEFAULT_TIMEOUT)
+  }
+  if (waitFor) {
+    clearTimeout(holdTimer)
+    pressed.push(snapshot(event))
+    held = full
+    pendingKeys.value = pressed.map(pressLabel)
+    holdTimer = setTimeout(flushHeld, waitFor)
+    event.preventDefault()
+    return
+  }
+  if (full.length) {
+    resetSequence()
+    if (run(full)) {
       event.preventDefault()
       return
     }
   }
+  if (pressed.length) {
+    flushHeld()
+    onKeydown(event)
+  }
+}
+
+function pressLabel(press: KeyLike): string {
+  return chordOf({
+    key: press.key,
+    ctrl: press.ctrlKey || press.metaKey,
+    alt: press.altKey,
+    shift: press.shiftKey && press.key.length !== 1,
+  })
 }
 
 export function useHotkeys(
@@ -280,8 +430,10 @@ export function useHotkeys(
   }
   onMounted(() => {
     mounted.add(entry)
+    warnConflicts()
     if (!state.listening) {
       window.addEventListener("keydown", onKeydown)
+      window.addEventListener("blur", resetSequence)
       state.listening = true
     }
   })
@@ -289,7 +441,9 @@ export function useHotkeys(
     mounted.delete(entry)
     if (!mounted.size && state.listening) {
       window.removeEventListener("keydown", onKeydown)
+      window.removeEventListener("blur", resetSequence)
       state.listening = false
+      resetSequence()
     }
   })
 }
@@ -307,10 +461,110 @@ const KEY_NAMES: Record<string, string> = {
   arrowright: "→",
 }
 
+function chordOf(step: HotkeyStep): string {
+  const key = step.key.toLowerCase()
+  const name = KEY_NAMES[key] ?? (key.length === 1 || /^f\d+$/.test(key) ? key.toUpperCase() : step.key)
+  return [step.ctrl && "Ctrl", step.alt && "Alt", step.shift && "Shift", name].filter(Boolean).join("+")
+}
+
 function comboOf(binding: HotkeyBinding): string {
-  const key = binding.key.toLowerCase()
-  const name = KEY_NAMES[key] ?? (key.length === 1 || /^f\d+$/.test(key) ? key.toUpperCase() : binding.key)
-  return [binding.ctrl && "Ctrl", binding.alt && "Alt", binding.shift && "Shift", name].filter(Boolean).join("+")
+  return hotkeySteps(binding).map(chordOf).join(" ")
+}
+
+/** Identity of the keys a binding answers, for telling two of them apart. */
+function signatureOf(binding: HotkeyBinding): string {
+  return hotkeySteps(binding)
+    .map((step) => {
+      const key = step.key.toLowerCase()
+      const symbol = key.length === 1 && key === key.toUpperCase()
+      const shift = step.shift === undefined && symbol ? "*" : String(Boolean(step.shift))
+      return `${Boolean(step.ctrl)}:${Boolean(step.alt)}:${shift}:${key}`
+    })
+    .join(" ")
+}
+
+export interface HotkeyConflict {
+  /** The keys both answer, written as in the shortcut reference. */
+  combo: string
+  /** `help` labels of the clashing bindings; unlabelled ones are omitted. */
+  labels: string[]
+  priority: number
+}
+
+/**
+ * Pure part of `hotkeyConflicts`: bindings from different `useHotkeys` calls
+ * answering the same keys at the same priority within the same scope. Within
+ * one call a repeat is deliberate (the first may decline), and a binding with
+ * `when` is conditional by design, so neither counts.
+ */
+export function findHotkeyConflicts(
+  groups: { bindings: HotkeyBinding[]; priority: number; scope: unknown }[],
+): HotkeyConflict[] {
+  const scopeIds = new Map<unknown, number>()
+  const seen = new Map<string, { combo: string; labels: string[]; owners: Set<number>; priority: number }>()
+  groups.forEach((group, owner) => {
+    if (!scopeIds.has(group.scope)) scopeIds.set(group.scope, scopeIds.size)
+    for (const binding of group.bindings) {
+      if (binding.when || !hotkeySteps(binding).length) continue
+      const id = `${group.priority}|${scopeIds.get(group.scope)}|${signatureOf(binding)}`
+      const slot = seen.get(id) ?? {
+        combo: binding.help?.combo ?? comboOf(binding),
+        labels: [],
+        owners: new Set<number>(),
+        priority: group.priority,
+      }
+      slot.owners.add(owner)
+      if (binding.help && !slot.labels.includes(binding.help.label)) slot.labels.push(binding.help.label)
+      seen.set(id, slot)
+    }
+  })
+  return [...seen.values()]
+    .filter((slot) => slot.owners.size > 1)
+    .map(({ combo, labels, priority }) => ({ combo, labels, priority }))
+}
+
+/** Bindings among the mounted ones that answer the same keys. */
+export const hotkeyConflicts = computed<HotkeyConflict[]>(() =>
+  findHotkeyConflicts(
+    [...mounted]
+      .filter((entry) => toValue(entry.enabled) !== false)
+      .map((entry) => ({
+        bindings: entry.read(),
+        priority: Number(toValue(entry.priority) || 0),
+        scope: toValue(entry.scope) ?? null,
+      })),
+  ),
+)
+
+const warned = new Set<string>()
+
+declare const process: { env: { NODE_ENV?: string } }
+
+/*
+ * Written as the literal `process.env.NODE_ENV` so the consumer's bundler
+ * replaces it (Vite and webpack both do for dependencies); where nothing
+ * replaces it and no `process` exists, the warning simply stays off.
+ */
+function isDev(): boolean {
+  try {
+    return process.env.NODE_ENV !== "production"
+  } catch {
+    return false
+  }
+}
+
+function warnConflicts() {
+  if (!isDev()) return
+  for (const conflict of hotkeyConflicts.value) {
+    const id = `${conflict.priority}|${conflict.combo}`
+    if (warned.has(id)) continue
+    warned.add(id)
+    console.warn(
+      `[@leavepulse/ui] ${conflict.combo} is bound more than once at priority ${conflict.priority}`
+        + (conflict.labels.length ? ` (${conflict.labels.join(", ")})` : "")
+        + "; only the most recently mounted one runs unless it declines.",
+    )
+  }
 }
 
 /**
@@ -321,13 +575,15 @@ function comboOf(binding: HotkeyBinding): string {
  */
 export const activeShortcuts = computed<ShortcutGroup[]>(() => {
   const groups = new Map<string, ShortcutEntry[]>()
+  const clashing = new Set(hotkeyConflicts.value.map((c) => c.combo))
   for (const entry of mounted) {
     if (toValue(entry.enabled) === false) continue
     for (const binding of entry.read()) {
       if (!binding.help) continue
       const combo = binding.help.combo ?? comboOf(binding)
       const entries = groups.get(binding.help.group) ?? []
-      if (!entries.some((e) => e.combo === combo)) entries.push({ combo, label: binding.help.label })
+      const conflict = clashing.has(combo) || undefined
+      if (!entries.some((e) => e.combo === combo)) entries.push({ combo, label: binding.help.label, conflict })
       groups.set(binding.help.group, entries)
     }
   }

package/src/composables/useInputMask.ts

@@ -0,0 +1,254 @@
+import { computed, toValue, type MaybeRefOrGetter } from "vue"
+
+/*
+ * Format-as-you-type for a native <input> without losing the caret.
+ *
+ * A mask is a string of tokens and literals: "+0 (000) 000-00-00",
+ * "0000 0000 0000 0000", "AA-0000". Each token accepts one character; anything
+ * else is a literal the mask inserts itself. A backslash makes the next mask
+ * character literal ("\\0" is a literal zero). A list of masks picks the first
+ * one the typed characters fit, and a function derives the mask from the raw
+ * value typed so far (card networks, phone plans).
+ *
+ * The caret is tracked by how many accepted characters sit before it, not by
+ * its offset, so inserting a literal ahead of it never shoves it backwards.
+ * Literals are only written once a character follows them, so Backspace walks
+ * back naturally instead of hitting an auto-inserted separator.
+ */
+
+export type MaskToken = RegExp | { pattern: RegExp; transform?: (ch: string) => string }
+export type MaskTokens = Record<string, MaskToken>
+export type MaskSpec = string | readonly string[] | ((raw: string) => string)
+
+export const DEFAULT_MASK_TOKENS: MaskTokens = {
+  "0": /\d/,
+  a: /\p{L}/u,
+  A: { pattern: /\p{L}/u, transform: (ch) => ch.toLocaleUpperCase() },
+  "*": /[\p{L}\d]/u,
+}
+
+type Slot = { literal: string } | { test: (ch: string) => boolean; transform: (ch: string) => string }
+
+export interface MaskResult {
+  masked: string
+  raw: string
+  /** Caret offset in `masked`. */
+  caret: number
+  /** Every token of the mask is filled. */
+  complete: boolean
+}
+
+export interface MaskOptions {
+  mask: MaskSpec
+  tokens?: MaskTokens
+  /**
+   * Caret position: an offset into `input`, or with `fromRaw` the number of raw
+   * characters before it. Defaults to the end.
+   */
+  caret?: number
+  /** `input` holds raw characters only; literals in it are never consumed as mask literals. */
+  fromRaw?: boolean
+}
+
+function tester(token: MaskToken): { test: (ch: string) => boolean; transform: (ch: string) => string } {
+  const pattern = token instanceof RegExp ? token : token.pattern
+  const re = new RegExp(pattern.source, pattern.flags.replace(/[gy]/g, ""))
+  const transform = token instanceof RegExp ? undefined : token.transform
+  return { test: (ch) => re.test(ch), transform: transform ?? ((ch) => ch) }
+}
+
+export function parseMask(mask: string, tokens: MaskTokens = DEFAULT_MASK_TOKENS): Slot[] {
+  const slots: Slot[] = []
+  const chars = Array.from(mask)
+  for (let i = 0; i < chars.length; i++) {
+    const ch = chars[i]!
+    if (ch === "\\" && i + 1 < chars.length) {
+      slots.push({ literal: chars[++i]! })
+      continue
+    }
+    const token = tokens[ch]
+    slots.push(token ? tester(token) : { literal: ch })
+  }
+  return slots
+}
+
+interface Run extends MaskResult {
+  overflow: boolean
+  /** Offsets in the input of the characters consumed as tokens. */
+  tokenOffsets: number[]
+}
+
+function run(slots: Slot[], input: string, caret: number, fromRaw: boolean): Run {
+  const tokenStarts: number[] = []
+  const tokenEnds: number[] = []
+  const tokenOffsets: number[] = []
+  let out = ""
+  let raw = ""
+  let pending = ""
+  let si = 0
+  let offset = 0
+  let before = 0
+  let overflow = false
+  for (const ch of input) {
+    const at = offset
+    offset += ch.length
+    if (si >= slots.length) {
+      if (slots.some((s) => "test" in s && s.test(ch))) overflow = true
+      continue
+    }
+    while (si < slots.length) {
+      const slot = slots[si]!
+      if ("literal" in slot) {
+        pending += slot.literal
+        si++
+        if (!fromRaw && slot.literal === ch) break
+        continue
+      }
+      if (slot.test(ch)) {
+        const value = slot.transform(ch)
+        out += pending
+        pending = ""
+        tokenStarts.push(out.length)
+        out += value
+        tokenEnds.push(out.length)
+        raw += value
+        tokenOffsets.push(at)
+        si++
+        if (fromRaw ? raw.length <= caret : at < caret) before++
+      }
+      break
+    }
+  }
+  const rest = slots.slice(si)
+  const complete = !rest.some((s) => "test" in s)
+  // A fully typed mask also shows its closing literals ("(000)" ends with ")").
+  if (complete && out) out += pending + rest.map((s) => ("literal" in s ? s.literal : "")).join("")
+  const at = before === 0 ? (tokenStarts[0] ?? 0) : tokenEnds[before - 1]!
+  return {
+    masked: out,
+    raw,
+    caret: complete && before === tokenEnds.length ? out.length : at,
+    complete,
+    overflow,
+    tokenOffsets,
+  }
+}
+
+function resolve(options: MaskOptions, input: string, caret: number): Run {
+  const tokens = options.tokens ?? DEFAULT_MASK_TOKENS
+  const fromRaw = !!options.fromRaw
+  const { mask } = options
+  if (typeof mask === "string") return run(parseMask(mask, tokens), input, caret, fromRaw)
+  if (typeof mask === "function") {
+    let current = mask("")
+    let result = run(parseMask(current, tokens), input, caret, fromRaw)
+    for (let i = 0; i < 4; i++) {
+      const next = mask(result.raw)
+      if (next === current) break
+      current = next
+      result = run(parseMask(current, tokens), input, caret, fromRaw)
+    }
+    return result
+  }
+  let last: Run | undefined
+  for (const m of mask) {
+    last = run(parseMask(m, tokens), input, caret, fromRaw)
+    if (!last.overflow) return last
+  }
+  return last ?? run([], input, caret, fromRaw)
+}
+
+/** Format `input` through a mask and map the caret into the result. */
+export function applyMask(input: string, options: MaskOptions): MaskResult {
+  const caret = options.caret ?? (options.fromRaw ? Number.POSITIVE_INFINITY : input.length)
+  const { masked, raw, caret: at, complete } = resolve(options, input, caret)
+  return { masked, raw, caret: at, complete }
+}
+
+/**
+ * The value after deleting one accepted character next to a collapsed caret,
+ * skipping over literals, or null when there is nothing to delete that way.
+ */
+export function maskDelete(
+  value: string,
+  caret: number,
+  direction: "backward" | "forward",
+  options: Omit<MaskOptions, "caret" | "fromRaw">,
+): MaskResult | null {
+  const { tokenOffsets, raw } = resolve(options, value, caret)
+  const index =
+    direction === "backward"
+      ? tokenOffsets.filter((o) => o < caret).length - 1
+      : tokenOffsets.findIndex((o) => o >= caret)
+  if (index < 0) return null
+  const chars = Array.from(raw)
+  chars.splice(index, 1)
+  return applyMask(chars.join(""), { ...options, caret: index, fromRaw: true })
+}
+
+export interface UseInputMaskOptions {
+  mask: MaybeRefOrGetter<MaskSpec | undefined>
+  tokens?: MaybeRefOrGetter<MaskTokens | undefined>
+  /** Called with every value the user produces. */
+  onChange?: (masked: string, raw: string, complete: boolean) => void
+}
+
+/**
+ * Bind `onBeforeInput`, `onInput` and `onCompositionEnd` to the input, and show
+ * `format(model).masked` as its value.
+ */
+export function useInputMask(options: UseInputMaskOptions) {
+  const spec = computed(() => {
+    const mask = toValue(options.mask)
+    return mask === undefined || mask === "" ? undefined : { mask, tokens: toValue(options.tokens) }
+  })
+
+  function format(value: string | null | undefined): MaskResult {
+    const s = spec.value
+    const text = value ?? ""
+    return s ? applyMask(text, s) : { masked: text, raw: text, caret: text.length, complete: true }
+  }
+
+  function commit(el: HTMLInputElement, result: MaskResult): void {
+    if (el.value !== result.masked) el.value = result.masked
+    if (el.ownerDocument.activeElement === el) {
+      try {
+        el.setSelectionRange(result.caret, result.caret)
+      } catch {
+        // Input types without a selection cannot place a caret.
+      }
+    }
+    options.onChange?.(result.masked, result.raw, result.complete)
+  }
+
+  function onBeforeInput(event: InputEvent): void {
+    const s = spec.value
+    const el = event.target
+    if (!s || event.isComposing || !(el instanceof HTMLInputElement)) return
+    const backward = event.inputType === "deleteContentBackward"
+    if (!backward && event.inputType !== "deleteContentForward") return
+    const start = el.selectionStart
+    if (start === null || start !== el.selectionEnd) return
+    event.preventDefault()
+    const result = maskDelete(el.value, start, backward ? "backward" : "forward", s)
+    if (result) commit(el, result)
+  }
+
+  function reformat(el: HTMLInputElement): void {
+    const s = spec.value
+    if (!s) return
+    commit(el, applyMask(el.value, { ...s, caret: el.selectionStart ?? el.value.length }))
+  }
+
+  /** Attach to `input`. Composition is left alone until it ends. */
+  function onInput(event: Event): void {
+    if ((event as InputEvent).isComposing || !(event.target instanceof HTMLInputElement)) return
+    reformat(event.target)
+  }
+
+  function onCompositionEnd(event: CompositionEvent): void {
+    if (event.target instanceof HTMLInputElement) reformat(event.target)
+  }
+
+  return { active: computed(() => !!spec.value), format, onBeforeInput, onInput, onCompositionEnd }
+}