webcoreui 1.1.0-beta.3 → 1.2.0-0

package/components/OTPInput/OTPInput.astro

@@ -1,96 +1,194 @@
----
-import type { OTPInputProps } from './otpinput'
-
-import Input from '../Input/Input.astro'
-
-import styles from './otpinput.module.scss'
-
-interface Props extends OTPInputProps {}
-
-const {
-    name,
-    disabled,
-    length = 6,
-    groupLength = 0,
-    separator = '•',
-    label,
-    subText,
-    className,
-    ...rest
-} = Astro.props
-
-const classes = [
-    styles.wrapper,
-    className
-]
-
-const inputPlaceholders = Array.from({ length }, (_, i) => i + 1)
-    .reduce<(number | string)[]>((acc, num, i) =>
-        groupLength > 0 && i % groupLength === 0 && i !== 0
-            ? [...acc, separator, num]
-            : [...acc, num]
-    , [])
----
-
-<div class:list={classes}>
-    {label && (
-        <label
-            for={name}
-            class={styles.label}
-            set:html={label}
-        />
-    )}
-
-    <div class={styles['input-wrapper']}>
-        <Input
-            name={name || 'otp'}
-            data-id="w-input-otp"
-            disabled={disabled}
-            maxlength={length}
-            required={true}
-            {...rest}
-        />
-
-        <div class={styles.placeholders}>
-            {inputPlaceholders.map((placeholder, index) => (
-                <div
-                    class={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
-                    data-active={index === 0 ? true : undefined}
-                    data-separator={typeof placeholder === 'string' ? true : undefined}
-                >
-                    {typeof placeholder === 'string' ? placeholder : ''}
-                </div>
-            ))}
-        </div>
-    </div>
-
-    {subText && (
-        <div class={styles.subtext} set:html={subText} />
-    )}
-</div>
-
-<script>
-    import { on } from '../../utils/DOMUtils'
-
-    const addEventListeners = () => {
-        on('[data-id="w-input-otp"]', 'input', (event: Event) => {
-            const target = event.target as HTMLInputElement
-            const value = target.value
-            const placeholders = Array.from(target.nextElementSibling!.children)
-                .filter(child => !(child as HTMLDivElement).dataset.separator)
-
-
-            placeholders.forEach((placeholder, index) => {
-                const placeholderElement = placeholder as HTMLDivElement
-
-                placeholderElement.innerText = value[index] || ''
-                placeholderElement.dataset.active = value.length === index
-                    ? 'true'
-                    : 'false'
-            })
-        }, true)
-    }
-
-    on(document, 'astro:after-swap', addEventListeners)
-    addEventListeners()
-</script>
+---
+import type { OTPInputProps } from './otpinput'
+
+import Input from '../Input/Input.astro'
+
+import styles from './otpinput.module.scss'
+
+interface Props extends OTPInputProps {}
+
+const {
+    name = 'otp',
+    disabled,
+    length = 6,
+    groupLength = 0,
+    separator = '•',
+    label,
+    subText,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = [
+    styles.wrapper,
+    className
+]
+
+const inputs = Array.from({ length }, (_, i) => i + 1)
+    .reduce<(number | string)[]>((acc, num, i) =>
+        groupLength > 0 && i % groupLength === 0 && i !== 0
+            ? [...acc, separator, num]
+            : [...acc, num]
+    , [])
+---
+
+<div class:list={classes}>
+    {label && (
+        <label
+            for={`${name}-0`}
+            class={styles.label}
+            set:html={label}
+        />
+    )}
+
+    <div class={styles['input-wrapper']} data-length={length}>
+        {inputs.map((input, index) =>
+            typeof input === 'string' ? (
+                <div class={styles.separator}>{input}</div>
+            ) : (
+                <Input
+                    id={`${name}-${index}`}
+                    class={styles.input}
+                    type="text"
+                    maxlength="1"
+                    disabled={disabled}
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    data-id="w-input-otp"
+                    data-index={input}
+                    aria-label={`OTP digit ${input + 1}`}
+                    {...rest}
+                />
+            )
+        )}
+    </div>
+
+    {subText && <div class={styles.subtext}>{subText}</div>}
+</div>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+    import { dispatch } from '../../utils/event'
+
+    const focus = (direction: 'next' | 'prev', wrapper: HTMLElement | null, clear?: boolean) => {
+        const index = Number(wrapper?.dataset.active)
+        const nextIndex = direction === 'next' ? index + 1 : index - 1
+
+        const input = wrapper?.querySelector(`[data-index="${nextIndex}"]`)
+
+        if (input instanceof HTMLInputElement) {
+            input.focus()
+
+            if (clear) {
+                input.value = ''
+            }
+        }
+    }
+
+    const addEventListeners = () => {
+        on('[data-id="w-input-otp"]', 'keydown', (event: KeyboardEvent) => {
+            const target = event.target as HTMLInputElement
+
+            if (event.key === 'Backspace' || event.key === 'Delete') {
+                if (!target.value) {
+                    focus('prev', target.parentElement, true)
+                }
+            }
+
+            if (event.key === 'ArrowLeft') {
+                focus('prev', target.parentElement)
+            }
+
+            if (event.key === 'ArrowRight') {
+                focus('next', target.parentElement)
+            }
+        }, true)
+
+        on('[data-id="w-input-otp"]', 'input', (event: Event) => {
+            const target = event.target
+
+            if (!(target instanceof HTMLInputElement)) {
+                return
+            }
+
+            const index = Number(target.dataset.index)
+            const emptyIndex = Array.from(target.parentElement?.querySelectorAll('input') || [])
+                .findIndex(element => !element.value) + 1
+
+            if (emptyIndex !== 0 && emptyIndex < index) {
+                const emptyElement = target.parentElement?.querySelector(`[data-index="${emptyIndex}"]`)
+                const nextFocusElement = target.parentElement?.querySelector(`[data-index="${emptyIndex + 1}"]`)
+
+                if (emptyElement instanceof HTMLInputElement) {
+                    emptyElement.value = target.value
+                }
+
+                if (nextFocusElement instanceof HTMLInputElement) {
+                    nextFocusElement.focus()
+                }
+
+                target.value = ''
+
+                return
+            }
+
+            if (target.value) {
+                focus('next', target.parentElement)
+            }
+        }, true)
+
+        on('[data-id="w-input-otp"]', 'keyup', (event: Event) => {
+            const target = event.target
+            const container = target instanceof HTMLInputElement ? target.parentElement : null
+
+            if (container) {
+                const value = Array.from(container.querySelectorAll('input') || [])
+                    .map(input => input.value)
+                    .join('')
+
+                dispatch('otpOnChange', value)
+            }
+        }, true)
+
+        on('[data-id="w-input-otp"]', 'paste', (event: ClipboardEvent) => {
+            event.preventDefault()
+
+            const target = event.target
+            const container = target instanceof HTMLInputElement ? target.parentElement : null
+
+            if (container) {
+                const inputLength = Number(container.dataset.length)
+                const paste = event.clipboardData?.getData('text') ?? ''
+                const nextIndex = Math.min(paste.length + 1, inputLength)
+                const focusInput = container.querySelector(`[data-index="${nextIndex}"]`)
+
+                if (focusInput instanceof HTMLInputElement) {
+                    focusInput.focus()
+                }
+
+                paste.split('').slice(0, inputLength).forEach((char, i) => {
+                    const input = container.querySelector(`[data-index="${i + 1}"]`)
+
+                    if (input instanceof HTMLInputElement) {
+                        input.value = char
+                    }
+                })
+            }
+        }, true)
+
+        on('[data-id="w-input-otp"]', 'focus', (event: Event) => {
+            const target = event.target
+
+            if (target instanceof HTMLInputElement) {
+                if (target.parentElement) {
+                    target.parentElement.dataset.active = target.dataset.index
+                }
+
+                setTimeout(() => target.select(), 0)
+            }
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
+</script>

package/components/OTPInput/OTPInput.svelte

@@ -8,7 +8,7 @@
     import styles from './otpinput.module.scss'
 
     let {
-        name,
+        name = 'otp',
         disabled,
         length = 6,
         groupLength = 0,
@@ -25,44 +25,159 @@
         className
     ])
 
-    const inputPlaceholders = Array.from({ length }, (_, i) => i + 1)
+    const inputs = Array.from({ length }, (_, i) => i + 1)
         .reduce<(number | string)[]>((acc, num, i) =>
             groupLength > 0 && i % groupLength === 0 && i !== 0
                 ? [...acc, separator, num]
                 : [...acc, num]
         , [])
 
-    const getAdjustedIndex = (index: number) => inputPlaceholders
-        .slice(0, index)
-        .filter(placeholder => typeof placeholder !== 'string')
-        .length
+    const focus = (direction: 'next' | 'prev', wrapper: HTMLElement | null, clear?: boolean) => {
+        const index = Number(wrapper?.dataset.active)
+        const nextIndex = direction === 'next' ? index + 1 : index - 1
+
+        const input = wrapper?.querySelector(`[data-index="${nextIndex}"]`)
+
+        if (input instanceof HTMLInputElement) {
+            input.focus()
+
+            if (clear) {
+                input.value = ''
+            }
+        }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        const target = event.target as HTMLInputElement
+
+        if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (!target.value) {
+                focus('prev', target.parentElement, true)
+            }
+        }
+
+        if (event.key === 'ArrowLeft') {
+            focus('prev', target.parentElement)
+        }
+
+        if (event.key === 'ArrowRight') {
+            focus('next', target.parentElement)
+        }
+    }
+
+    const handleInput = (event: Event) => {
+        const target = event.target
+
+        if (!(target instanceof HTMLInputElement)) {
+            return
+        }
+
+        const index = Number(target.dataset.index)
+        const emptyIndex = Array.from(target.parentElement?.querySelectorAll('input') || [])
+            .findIndex(element => !element.value) + 1
+
+        if (emptyIndex !== 0 && emptyIndex < index) {
+            const emptyElement = target.parentElement?.querySelector(`[data-index="${emptyIndex}"]`)
+            const nextFocusElement = target.parentElement?.querySelector(`[data-index="${emptyIndex + 1}"]`)
+
+            if (emptyElement instanceof HTMLInputElement) {
+                emptyElement.value = target.value
+            }
+
+            if (nextFocusElement instanceof HTMLInputElement) {
+                nextFocusElement.focus()
+            }
+
+            target.value = ''
+
+            return
+        }
+
+        if (target.value) {
+            focus('next', target.parentElement)
+        }
+    }
+
+    const handlePaste = (event: ClipboardEvent) => {
+        event.preventDefault()
+
+        const target = event.target
+        const container = target instanceof HTMLInputElement ? target.parentElement : null
+
+        if (container) {
+            const paste = event.clipboardData?.getData('text') ?? ''
+            const nextIndex = Math.min(paste.length + 1, length)
+            const focusInput = container.querySelector(`[data-index="${nextIndex}"]`)
+
+            if (focusInput instanceof HTMLInputElement) {
+                focusInput.focus()
+            }
+
+            paste.split('').slice(0, length).forEach((char, i) => {
+                const input = container.querySelector(`[data-index="${i + 1}"]`)
+
+                if (input instanceof HTMLInputElement) {
+                    input.value = char
+                }
+            })
+        }
+    }
+
+    const handleFocus = (event: Event) => {
+        const target = event.target
+
+        if (target instanceof HTMLInputElement) {
+            if (target.parentElement) {
+                target.parentElement.dataset.active = target.dataset.index
+            }
+
+            setTimeout(() => target.select(), 0)
+        }
+    }
+
+    const handleKeyUp = (event: Event) => {
+        const target = event.target
+        const container = target instanceof HTMLInputElement ? target.parentElement : null
+
+        if (container) {
+            const newValue = Array.from(container.querySelectorAll('input') || [])
+                .map(input => input.value)
+                .join('')
+
+            value = newValue
+        }
+    }
 </script>
 
 <div class={classes}>
     {#if label}
-        <label for={name} class={styles.label}>{@html label}</label>
+        <label for={`${name}-0`} class={styles.label}>{@html label}</label>
     {/if}
 
     <div class={styles['input-wrapper']}>
-        <Input
-            name={name || 'otp'}
-            disabled={disabled}
-            maxlength={length}
-            required={true}
-            bind:value
-            {...rest}
-        />
-
-        <div class={styles.placeholders}>
-            {#each inputPlaceholders as placeholder, index}
-                <div
-                    class={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
-                    data-active={getAdjustedIndex(index) === value.length ? true : undefined}
-                >
-                    {typeof placeholder === 'string' ? placeholder : value[getAdjustedIndex(index)]}
-                </div>
-            {/each}
-        </div>
+        {#each inputs as input, index}
+            {#if typeof input === 'string'}
+                <div class={styles.separator}>{input}</div>
+            {:else}
+                <Input
+                    id={`${name}-${index}`}
+                    className={styles.input}
+                    type="text"
+                    maxlength="1"
+                    disabled={disabled}
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    data-index={input}
+                    aria-label={`OTP digit ${input + 1}`}
+                    onkeydown={handleKeyDown}
+                    onKeyUp={handleKeyUp}
+                    onfocus={handleFocus}
+                    onInput={handleInput}
+                    onpaste={handlePaste}
+                    {...rest}
+                />
+            {/if}
+        {/each}
     </div>
 
     {#if subText}