webcoreui 1.1.0 → 1.2.0

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}

package/components/OTPInput/OTPInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import type { OTPInputProps } from './otpinput'
 
 import Input from '../Input/Input.tsx'
@@ -8,7 +8,7 @@ import { classNames } from '../../utils/classNames'
 import styles from './otpinput.module.scss'
 
 const OTPInput = ({
-    name,
+    name = 'otp',
     disabled,
     length = 6,
     groupLength = 0,
@@ -16,68 +16,172 @@ const OTPInput = ({
     label,
     subText,
     className,
-    value,
     onChange,
     ...rest
 }: OTPInputProps) => {
-    const [inputValue, setValue] = useState(value || '')
-
     const classes = classNames([
         styles.wrapper,
         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: React.KeyboardEvent<HTMLInputElement>) => {
+        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: React.FormEvent<HTMLInputElement>) => {
+        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
+        }
 
-    const updateInput = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setValue(event.target.value)
-        onChange?.(inputValue)
+        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: React.KeyboardEvent<HTMLInputElement>) => {
+        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('')
+
+            onChange?.(newValue)
+        }
     }
 
     return (
         <div className={classes}>
             {label && (
                 <label
-                    htmlFor={name}
+                    htmlFor={`${name}-0`}
                     className={styles.label}
                     dangerouslySetInnerHTML={{ __html: label }}
                 />
             )}
 
             <div className={styles['input-wrapper']}>
-                <Input
-                    name={name || 'otp'}
-                    disabled={disabled}
-                    maxLength={length}
-                    required={true}
-                    value={inputValue}
-                    onChange={updateInput}
-                    {...rest}
-                />
-
-                <div className={styles.placeholders}>
-                    {inputPlaceholders.map((placeholder, index) => (
-                        <div
+                {inputs.map((input, index) =>
+                    typeof input === 'string' ? (
+                        <div className={styles.separator} key={index}>{input}</div>
+                    ) : (
+                        <Input
                             key={index}
-                            className={typeof placeholder === 'string' ? styles.separator : styles.placeholder}
-                            data-active={getAdjustedIndex(index) === inputValue.length ? true : undefined}
-                        >
-                            {typeof placeholder === 'string'
-                                ? placeholder
-                                : inputValue[getAdjustedIndex(index)]}
-                        </div>
-                    ))}
-                </div>
+                            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}
+                        />
+                    )
+                )}
             </div>
 
             {subText && (

package/components/OTPInput/otpinput.module.scss

@@ -1,85 +1,59 @@
-@use '../../scss/config.scss' as *;
-
-.wrapper {
-    @include layout(flex, column, xs);
-
-    .label {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
-    }
-
-    .input-wrapper {
-        @include position(relative);
-
-        input {
-            @include visibility(0);
-            @include position(absolute, t0, l0);
-            @include size(h40px);
-        }
-    }
-
-    .placeholders {
-        @include layout(flex);
-    }
-
-    .placeholder {
-        @include layout(flex, center);
-        @include border(top, primary-50);
-        @include border(bottom, primary-50);
-        @include border(right, primary-50);
-        @include size(40px);
-
-        &:first-child {
-            @include border(primary-50);
-            @include border-radius(left);
-        }
-
-        &:last-child {
-            @include border(primary-50);
-            @include border(left, 0);
-            @include border-radius(right);
-        }
-
-        &[data-active="true"] {
-            @include border(primary);
-
-            &::before {
-                @include size(w1px, h15px);
-                @include background(primary);
-
-                content: '';
-                animation: flash 1s infinite forwards;
-            }
-        }
-    }
-
-    .separator {
-        @include size(40px);
-        @include layout(flex, center);
-
-        + .placeholder {
-            @include border(left, primary-50);
-
-            &[data-active="true"] {
-                @include border(left, primary);
-            }
-        }
-    }
-
-    .subtext {
-        @include typography(md, primary-30);
-        @include spacing(mt-xs);
-    }
-}
-
-@keyframes flash {
-    0% {
-        @include visibility(0);
-    }
-    50% {
-        @include visibility(1);
-    }
-    100% {
-        @include visibility(0);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.wrapper {
+    @include layout(flex, column, xs);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .input-wrapper {
+        @include position(relative);
+        @include layout(flex);
+
+        input {
+            @include border-radius(none);
+            @include size(40px);
+            @include typography(center, default);
+            
+            &:not(:first-child) {
+                @include border(left, 0);
+            }
+
+            &:first-child {
+                @include border-radius(left);
+            }
+
+            &:last-child {
+                @include border-radius(right);
+            }
+        }
+
+        .separator + input {
+            @include border(left, primary-50);
+        }
+    }
+
+    .separator {
+        @include size(40px);
+        @include layout(flex, center);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}
+
+@keyframes flash {
+    0% {
+        @include visibility(0);
+    }
+    50% {
+        @include visibility(1);
+    }
+    100% {
+        @include visibility(0);
+    }
+}

package/components/Pagination/Pagination.astro

@@ -139,20 +139,20 @@ const generatedPages = pages?.length
 
         Array.from(paginations).forEach(element => {
             const pagination = element as HTMLUListElement
-            const totalPages = Number(pagination.dataset.totalPages)
             let currentPage = Number(pagination.dataset.currentPage)
 
             element.addEventListener('click', event => {
                 const target = event.target as HTMLButtonElement
                 const navigated = target.nodeName === 'BUTTON'
-                    && !target.dataset.active
+                    && target.dataset.active !== 'true'
                     && !target.disabled
 
                 if (navigated) {
                     const prevPageButton = element.querySelector('[data-page="prev"]') as HTMLButtonElement
                     const nextPageButton = element.querySelector('[data-page="next"]') as HTMLButtonElement
-                    const currentPageButton = element.querySelector('[data-active]') as HTMLButtonElement
+                    const currentPageButton = element.querySelector('[data-active="true"]') as HTMLButtonElement
                     const previousPage = currentPage
+                    const totalPages = Number(pagination.dataset.totalPages)
 
                     const pageElements = Array
                         .from(pagination.children)

package/components/Pagination/Pagination.svelte

@@ -35,16 +35,16 @@
         className
     ])
 
-    const calculatedTotalPages = totalPages
+    const calculatedTotalPages = $derived(totalPages
         || pages?.length
-        || 0
+        || 0)
 
-    const generatedPages = pages?.length
+    const generatedPages = $derived(pages?.length
         ? pages
         : Array(totalPages || 0).fill(0).map((_, index) => ({
             ...(index === 0 && { active: true }),
             label: index + 1
-        }))
+        })))
 
     const paginate = (to: string | number) => {
         const previousPage = calculatedCurrentPage

package/components/Pagination/pagination.module.scss

@@ -6,7 +6,7 @@
 
     list-style-type: none;
 
-    &.primary [data-active] {
+    &.primary [data-active="true"] {
         @include typography(primary-70);
         @include background(primary-20);
     }
@@ -21,7 +21,7 @@
 
         cursor: pointer;
 
-        &[data-active] {
+        &[data-active="true"] {
             @include background(primary);
             @include size(w20px);
             @include border-radius(lg);
@@ -41,7 +41,7 @@
         }
     }
 
-    [data-active] {
+    [data-active="true"] {
         @include typography(primary);
         box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
     }