@hina-ui/vue 1.7.10 → 1.7.12

package/dist/shared/primitives/pin-input/index.ts

@@ -1,126 +1,423 @@
-import { arrowNavigation } from '../arrow-navigation'
-
-export type PinInputValue = Array<string | number | undefined>
+export interface PinRange {
+  start: number
+  end: number
+}
 
-const NUMBER = /^\d*$/
-const NON_NUMBER = /\D/g
-const NAVIGATION_KEYS = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']
+export interface PinInputSelection extends PinRange {
+  focused: boolean
+}
 
-export function pinInputValues(value: unknown): PinInputValue {
-  return Array.isArray(value) ? [...value] : []
+export interface PinEdit extends PinRange {
+  value: string
 }
 
-export function isPinInputComplete(values: PinInputValue, count: number, numeric: boolean) {
-  return values.filter(value => !!value || (numeric && value === 0)).length === count
+export interface PinCell {
+  char: string
+  active: boolean
+  caret: boolean
 }
 
-export function stripPinNonNumbers(value: string) {
-  return value.replace(NON_NUMBER, '')
+export interface PinInputOptions {
+  length: () => number
+  numeric: () => boolean
+  value: () => string
+  rtl: () => boolean
+  cells: () => ArrayLike<Element>
+  change: (value: string) => void
+  select: (selection: PinInputSelection) => void
 }
 
-function removeTrailingEmptyStrings(values: PinInputValue) {
-  while (values.length && values[values.length - 1] === '') values.pop()
-  return values
+export interface PinInputController {
+  sync: () => void
+  dispose: () => void
 }
 
-export function setPinValueAt(
-  current: PinInputValue,
-  index: number,
-  value: string,
-  numeric: boolean,
-) {
-  const values = [...current]
-  if (numeric) {
-    const number = +value
-    if (value === '' || Number.isNaN(number)) delete values[index]
-    else values[index] = number
-  } else values[index] = value
-  return removeTrailingEmptyStrings(values)
+const FULL_WIDTH = /[！-～]/g
+const UNSUPPORTED = /[\s\p{C}]|[\u{10000}-\u{10FFFF}]/gu
+const NON_DIGIT = /\D/g
+const IDLE: PinInputSelection = { focused: false, start: 0, end: 0 }
+
+export function cleanPinText(text: string, numeric: boolean) {
+  const folded = text.replace(FULL_WIDTH, character =>
+    String.fromCharCode(character.charCodeAt(0) - 0xfee0),
+  )
+  return folded.replace(numeric ? NON_DIGIT : UNSUPPORTED, '')
 }
 
-export function spreadPinValue(
-  current: PinInputValue,
-  characters: string,
-  index: number,
-  count: number,
-  numeric: boolean,
-) {
-  const values = [...current]
-  const start = characters.length >= count ? 0 : index
-  const end = Math.min(start + characters.length, count)
-  const filled: number[] = []
-  for (let at = start; at < end; at++) {
-    const character = characters[at - start]!
-    if (numeric) {
-      const number = Number.parseInt(character)
-      if (Number.isNaN(number)) continue
-      values[at] = number
-    } else values[at] = character
-    filled.push(at)
-  }
-  return { values, filled, end }
+export function pinInputValue(value: string, length: number) {
+  return value.slice(0, Math.max(0, length))
 }
 
-export type PinTextAction =
-  | { kind: 'clear' }
-  | { kind: 'filter'; value: string }
-  | { kind: 'spread'; characters: string }
-  | { kind: 'single'; character: string }
-
-export function resolvePinComposition(value: string, numeric: boolean): PinTextAction {
-  const text = numeric ? stripPinNonNumbers(value) : value
-  if (numeric && !text) return { kind: 'clear' }
-  if (text.length > 1) return { kind: 'spread', characters: text }
-  return { kind: 'single', character: text }
+export function pinSelectionAt(
+  caret: number,
+  size: number,
+  length: number,
+  backward = false,
+): [number, number] {
+  if (caret >= size) return size < length || !size ? [size, size] : [size - 1, size]
+  if (backward && caret > 0) return [caret - 1, caret]
+  return [caret, caret + 1]
 }
 
-export function resolvePinInput(
-  data: string | null | undefined,
-  value: string,
+export function editPinValue(
+  base: string,
+  raw: string,
+  selection: PinRange | null,
+  length: number,
   numeric: boolean,
-): PinTextAction {
-  if ((data?.length ?? 0) > 1) return { kind: 'spread', characters: value }
-  if (numeric && !NUMBER.test(value)) return { kind: 'filter', value: stripPinNonNumbers(value) }
-  return { kind: 'single', character: data || value.slice(-1) }
+  type = '',
+): PinEdit {
+  const limit = Math.min(base.length, raw.length)
+  let prefix = 0
+  while (prefix < limit && base[prefix] === raw[prefix]) prefix++
+  if (selection) prefix = Math.min(prefix, selection.start)
+  let suffix = 0
+  while (suffix < limit - prefix && base[base.length - 1 - suffix] === raw[raw.length - 1 - suffix])
+    suffix++
+  if (selection) suffix = Math.max(0, Math.min(suffix, base.length - selection.end))
+  const inserted = raw.slice(prefix, raw.length - suffix)
+  const removed = base.length - suffix - prefix
+  const kept = cleanPinText(inserted, numeric)
+  if (inserted && !kept)
+    return {
+      value: base,
+      start: selection?.start ?? prefix,
+      end: selection?.end ?? prefix + removed,
+    }
+  const value =
+    kept.length >= length
+      ? kept.slice(0, length)
+      : (base.slice(0, prefix) + kept + base.slice(prefix + Math.max(removed, kept.length))).slice(
+          0,
+          length,
+        )
+  const caret = kept.length >= length ? length : prefix + kept.length
+  const [start, end] = pinSelectionAt(
+    caret,
+    value.length,
+    length,
+    !kept && type.includes('Backward'),
+  )
+  return { value, start, end }
 }
 
-export function resolvePinPaste(text: string, numeric: boolean) {
-  return numeric ? stripPinNonNumbers(text) : text
+export function movePinSelection(
+  selection: PinRange,
+  backward: boolean,
+  size: number,
+  length: number,
+  target: number | 'previous' | 'next',
+  extend: boolean,
+): PinRange & { backward: boolean } {
+  const last = Math.max(0, Math.min(size, length - 1))
+  const collapsed = selection.start === selection.end
+  const focus = collapsed || backward ? selection.start : selection.end - 1
+  const anchor = collapsed ? selection.start : backward ? selection.end - 1 : selection.start
+  const wide = selection.end - selection.start > 1
+  const stepped =
+    target === 'previous'
+      ? wide && !extend
+        ? selection.start
+        : focus - 1
+      : target === 'next'
+        ? wide && !extend
+          ? selection.end
+          : focus + 1
+        : target
+  const next = Math.max(0, Math.min(stepped, last))
+  if (!extend) {
+    const [start, end] = pinSelectionAt(next, size, length)
+    return { start, end, backward: false }
+  }
+  const start = Math.min(anchor, next)
+  const end = Math.min(Math.max(anchor, next) + 1, size)
+  return { start: Math.min(start, end), end, backward: next < anchor }
 }
 
-export function pinFocusRedirect(values: PinInputValue, count: number, index: number) {
-  for (let at = 0; at < count; at++)
-    if (values[at] === '' || values[at] === undefined) return at < index ? at : -1
-  return -1
+export function pinCells(value: string, length: number, selection: PinInputSelection): PinCell[] {
+  const collapsed = selection.start === selection.end
+  return Array.from({ length: Math.max(0, length) }, (_, index) => {
+    const char = value[index] ?? ''
+    const active =
+      selection.focused &&
+      (collapsed ? index === selection.start : index >= selection.start && index < selection.end)
+    return { char, active, caret: active && !char }
+  })
 }
 
-export function isPinNavigationKey(key: string) {
-  return NAVIGATION_KEYS.includes(key)
+export function pinCellAt(cells: ArrayLike<Element>, x: number) {
+  let nearest = 0
+  let distance = Infinity
+  for (let index = 0; index < cells.length; index++) {
+    const rect = cells[index]!.getBoundingClientRect()
+    const gap = x < rect.left ? rect.left - x : x > rect.right ? x - rect.right : 0
+    if (gap < distance) {
+      distance = gap
+      nearest = index
+    }
+  }
+  return nearest
 }
 
-export function navigatePin(
-  event: KeyboardEvent,
-  current: HTMLElement | null,
-  inputs: HTMLElement[],
-  dir: 'ltr' | 'rtl',
-) {
-  arrowNavigation(event, current, undefined, {
-    itemsArray: inputs,
-    focus: true,
-    loop: false,
-    arrowKeyOptions: 'horizontal',
-    dir,
-  })
+function activeElement(document: Document) {
+  let active = document.activeElement
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement
+  return active
 }
 
-export function pinPlaceholder(
-  element: HTMLInputElement,
-  active: Element | null,
-  placeholder: string,
-) {
-  element.placeholder = !element.value && element === active ? '' : placeholder
-}
+export function createPinInput(
+  input: HTMLInputElement,
+  options: PinInputOptions,
+): PinInputController {
+  const document = input.ownerDocument
+  const shown = () => pinInputValue(options.value(), options.length())
+  let text = shown()
+  let base: string | null = null
+  let anchor: PinRange | null = null
+  let live: PinEdit | null = null
+  let composing = false
+  let pointer = 'mouse'
+  let pressed = false
+  let away = false
+  let landing = false
+  let disposed = false
+  let view = IDLE
+
+  const focused = () => activeElement(document) === input
+
+  function range(): PinRange {
+    const start = Math.min(input.selectionStart ?? text.length, text.length)
+    return { start, end: Math.max(start, Math.min(input.selectionEnd ?? start, text.length)) }
+  }
+
+  function publish() {
+    const next = !focused()
+      ? IDLE
+      : { focused: true, ...(composing && live ? { start: live.start, end: live.end } : range()) }
+    if (next.focused === view.focused && next.start === view.start && next.end === view.end) return
+    view = next
+    options.select(next)
+  }
+
+  function place(start: number, end: number, backward = false) {
+    if (!focused()) return
+    if (input.selectionStart === start && input.selectionEnd === end) return
+    input.setSelectionRange(start, end, backward ? 'backward' : 'forward')
+  }
+
+  function settle() {
+    const { start, end } = range()
+    if (start !== end) return
+    const [from, to] = pinSelectionAt(start, text.length, options.length())
+    place(from, to)
+  }
+
+  function emit(value: string) {
+    if (value === text) return
+    text = value
+    options.change(value)
+    queueMicrotask(sync)
+  }
+
+  function sync() {
+    if (disposed) return
+    const next = shown()
+    if (next !== text) {
+      text = next
+      composing = false
+      base = anchor = live = null
+    } else if (composing || input.value === text) return
+    if (input.value !== text) {
+      const caret = Math.min(input.selectionStart ?? text.length, text.length)
+      input.value = text
+      const [start, end] = pinSelectionAt(caret, text.length, options.length())
+      place(start, end)
+    }
+    publish()
+  }
+
+  function derive(type: string): PinEdit {
+    const length = options.length()
+    const numeric = options.numeric()
+    if (type.startsWith('history')) {
+      const value = cleanPinText(input.value, numeric).slice(0, length)
+      const caret = Math.min(input.selectionStart ?? value.length, value.length)
+      const [start, end] = pinSelectionAt(caret, value.length, length)
+      return { value, start, end }
+    }
+    return editPinValue(base ?? text, input.value, anchor, length, numeric, type)
+  }
+
+  function preview(type: string) {
+    composing = true
+    base ??= text
+    live = derive(type)
+    emit(live.value)
+    publish()
+  }
+
+  function commit(type: string) {
+    const edit = derive(type)
+    composing = false
+    base = anchor = live = null
+    if (input.value !== edit.value) input.value = edit.value
+    emit(edit.value)
+    place(edit.start, edit.end, type.includes('Backward'))
+    publish()
+  }
 
-export function pinInputLabel(index: number, count: number) {
-  return `pin input ${index + 1} of ${count}`
+  function onBeforeInput(event: InputEvent) {
+    landing = false
+    if (composing || event.isComposing) return
+    if (
+      event.inputType === 'insertText' &&
+      event.data &&
+      !cleanPinText(event.data, options.numeric())
+    ) {
+      event.preventDefault()
+      return
+    }
+    base = input.value
+    anchor = range()
+  }
+
+  function onInput(event: Event) {
+    const { inputType = '', isComposing } = event as InputEvent
+    if (composing || isComposing) preview(inputType)
+    else if (base !== null || input.value !== text) commit(inputType)
+  }
+
+  function onCompositionStart() {
+    landing = false
+    composing = true
+    base = input.value
+    anchor = range()
+  }
+
+  function onCompositionEnd() {
+    if (composing) commit('insertCompositionText')
+  }
+
+  function land() {
+    const size = text.length
+    if (size && size >= options.length()) place(0, size)
+    else place(size, size)
+  }
+
+  function onSelection() {
+    if (composing) return
+    if (focused()) {
+      if (landing) land()
+      else settle()
+    }
+    publish()
+  }
+
+  function onFocus() {
+    landing = !pressed && !away && !composing
+    if (landing) land()
+    away = false
+    publish()
+  }
+
+  function onBlur() {
+    away = !document.hasFocus()
+    pressed = false
+    landing = false
+    if (composing) commit('insertCompositionText')
+    publish()
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    landing = false
+    if (composing || event.isComposing || event.keyCode === 229) return
+    if (event.metaKey || event.ctrlKey || event.altKey) return
+    const { key } = event
+    const forward = options.rtl() ? 'ArrowLeft' : 'ArrowRight'
+    const back = options.rtl() ? 'ArrowRight' : 'ArrowLeft'
+    const target =
+      key === forward
+        ? 'next'
+        : key === back
+          ? 'previous'
+          : key === 'Home'
+            ? 0
+            : key === 'End'
+              ? options.length()
+              : null
+    if (target === null) return
+    event.preventDefault()
+    const next = movePinSelection(
+      range(),
+      input.selectionDirection === 'backward',
+      text.length,
+      options.length(),
+      target,
+      event.shiftKey,
+    )
+    place(next.start, next.end, next.backward)
+    publish()
+  }
+
+  function pick(event: MouseEvent) {
+    if (composing) return
+    if (event.detail > 1 && text) place(0, text.length)
+    else {
+      const index = Math.min(pinCellAt(options.cells(), event.clientX), text.length)
+      const [start, end] = pinSelectionAt(index, text.length, options.length())
+      place(start, end)
+    }
+    publish()
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    landing = false
+    pointer = event.pointerType
+    pressed = pointer !== 'mouse'
+  }
+
+  function onMouseDown(event: MouseEvent) {
+    if (event.button !== 0 || pointer !== 'mouse' || input.disabled) return
+    event.preventDefault()
+    pressed = true
+    input.focus()
+    pressed = false
+    pick(event)
+  }
+
+  function onClick(event: MouseEvent) {
+    const touched = pressed
+    pressed = false
+    if (touched && pointer !== 'mouse') pick(event)
+  }
+
+  const listeners: Array<[EventTarget, string, (event: never) => void]> = [
+    [input, 'beforeinput', onBeforeInput],
+    [input, 'input', onInput],
+    [input, 'compositionstart', onCompositionStart],
+    [input, 'compositionend', onCompositionEnd],
+    [input, 'select', onSelection],
+    [input, 'focus', onFocus],
+    [input, 'blur', onBlur],
+    [input, 'keydown', onKeydown],
+    [input, 'pointerdown', onPointerDown],
+    [input, 'mousedown', onMouseDown],
+    [input, 'click', onClick],
+    [document, 'selectionchange', onSelection],
+  ]
+  for (const [target, type, listener] of listeners)
+    target.addEventListener(type, listener as EventListener)
+
+  if (input.value !== text) input.value = text
+  if (focused()) settle()
+  publish()
+
+  return {
+    sync,
+    dispose() {
+      disposed = true
+      for (const [target, type, listener] of listeners)
+        target.removeEventListener(type, listener as EventListener)
+    },
+  }
 }

package/dist/shared/styles/interaction.css

@@ -132,7 +132,9 @@
   @media (hover: hover) {
     &:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
-      ):not([data-invalid]) {
+      ):not([data-invalid]),
+    :where([data-hn-field-group]:hover:not(:has(input:focus-visible)))
+      &:not([data-disabled]):not([data-invalid]) {
       background-color: color-mix(
         in oklab,
         var(--hn-field-bg, var(--hn-surface)) calc(100% - var(--hn-state-hover-opacity) * 100%),
@@ -142,7 +144,9 @@
 
     &[data-invalid]:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
-      ) {
+      ),
+    :where([data-hn-field-group]:hover:not(:has(input:focus-visible)))
+      &[data-invalid]:not([data-disabled]) {
       background-color: color-mix(
         in oklab,
         color-mix(

package/dist/shared/styles/line-clamp.css

@@ -9,14 +9,18 @@
   min-width: 0;
 }
 
+.hn-line-clamp {
+  display: flow-root;
+}
+
 .hn-line-clamp:not([data-expanded]),
 .hn-line-clamp[data-animating],
 .hn-line-clamp[data-measuring] {
   overflow: hidden;
 }
 
-.hn-line-clamp:not([data-expanded]):not([data-animating]),
-.hn-line-clamp[data-measuring] {
+.hn-line-clamp:not([data-expanded]):not([data-animating]):not([data-measuring='full']),
+.hn-line-clamp[data-measuring='clamped'] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--hn-line-clamp, 3);

package/dist/shared/styles/motion.css

@@ -510,8 +510,14 @@
   }
 }
 
+@layer components {
+  .hn-anim-collapse {
+    display: flow-root;
+  }
+}
+
 @utility hn-anim-collapse {
-  overflow: hidden;
+  overflow: clip;
   &[data-state='open'] {
     animation: hn-collapse-in var(--hn-duration-base) var(--hn-ease-move);
   }

package/dist/shared/styles/pin-input.css

@@ -0,0 +1,84 @@
+.hn-pin-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  color: transparent;
+  caret-color: transparent;
+  cursor: text;
+  font-family: ui-monospace, monospace;
+  font-size: var(--hn-pin-size, 2.5rem);
+  line-height: 1;
+  letter-spacing: -0.5em;
+  appearance: none;
+  forced-color-adjust: none;
+}
+
+@supports (-webkit-touch-callout: none) {
+  .hn-pin-native {
+    left: -1px;
+    right: 1px;
+    font-weight: 100;
+    font-stretch: ultra-condensed;
+    font-optical-sizing: none;
+    letter-spacing: -0.6em;
+  }
+}
+
+.hn-pin-native:disabled {
+  cursor: not-allowed;
+}
+
+.hn-pin-native::selection {
+  background: transparent;
+  color: transparent;
+}
+
+.hn-pin-native::-ms-reveal {
+  display: none;
+}
+
+.hn-pin-native::-ms-clear {
+  display: none;
+}
+
+.hn-pin-native::-webkit-credentials-auto-fill-button,
+.hn-pin-native::-webkit-contacts-auto-fill-button,
+.hn-pin-native::-webkit-strong-password-auto-fill-button,
+.hn-pin-native::-webkit-caps-lock-indicator {
+  display: none !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.hn-pin-native:-webkit-autofill {
+  opacity: 0;
+}
+
+.hn-pin-native:autofill {
+  opacity: 0;
+}
+
+[data-hn-pin-cell]::before {
+  content: '\200b';
+}
+
+.hn-pin-caret {
+  width: 1px;
+  height: 1.25em;
+  background-color: var(--hn-fg-default);
+  animation: hn-pin-caret 1.2s step-end infinite;
+}
+
+@keyframes hn-pin-caret {
+  50% {
+    opacity: 0;
+  }
+}

package/dist/shared/styles/spoiler.css

@@ -1,3 +1,9 @@
+@property --hn-nz-t {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --hn-iris-len {
   syntax: '<percentage>';
   inherits: false;

package/dist/shared/styles/tokens.css

@@ -13,6 +13,7 @@
 @import './stepper.css';
 @import './float-button.css';
 @import './line-clamp.css';
+@import './pin-input.css';
 @import './masonry.css';
 @import './carousel.css';
 @import './base.css';