webcoreui 1.1.0 → 1.2.0

package/components/Input/input.ts

@@ -1,62 +1,62 @@
-import type { Snippet } from 'svelte'
-
-export type InputTarget = {
-    currentTarget: HTMLInputElement
-}
-
-export type InputProps = {
-    type?: 'text'
-        | 'email'
-        | 'password'
-        | 'number'
-        | 'tel'
-        | 'url'
-        | 'search'
-        | 'file'
-        | 'date'
-        | 'datetime-local'
-        | 'month'
-        | 'week'
-        | 'time'
-        | 'color'
-    theme?: 'info'
-        | 'success'
-        | 'warning'
-        | 'alert'
-        | 'fill'
-        | null
-    value?: string | number
-    name?: string
-    placeholder?: string
-    label?: string
-    disabled?: boolean
-    subText?: string
-    maxLength?: number
-    min?: number
-    max?: number
-    step?: number
-    multiple?: boolean
-    pattern?: string
-    required?: boolean
-    autofocus?: boolean
-    autocomplete?: 'on' | 'off'
-    className?: string
-    labelClassName?: string
-    [key: string]: any
-}
-
-export type SvelteInputProps = {
-    onChange?: (event: Event & InputTarget) => void
-    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
-    onInput?: (event: any) => void
-    onClick?: (event: MouseEvent & InputTarget) => void
-    children?: Snippet
-} & InputProps
-
-export type ReactInputProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
-    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
-    children?: React.ReactNode
-} & InputProps
+import type { Snippet } from 'svelte'
+
+export type InputTarget = {
+    currentTarget: HTMLInputElement
+}
+
+export type InputProps = {
+    type?: 'text'
+        | 'email'
+        | 'password'
+        | 'number'
+        | 'tel'
+        | 'url'
+        | 'search'
+        | 'file'
+        | 'date'
+        | 'datetime-local'
+        | 'month'
+        | 'week'
+        | 'time'
+        | 'color'
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | 'fill'
+        | null
+    value?: string | number
+    name?: string
+    placeholder?: string
+    label?: string
+    disabled?: boolean
+    subText?: string
+    maxLength?: number
+    min?: number
+    max?: number
+    step?: number
+    multiple?: boolean
+    pattern?: string
+    required?: boolean
+    autofocus?: boolean
+    autocomplete?: 'on' | 'off' | 'one-time-code'
+    className?: string
+    labelClassName?: string
+    [key: string]: any
+}
+
+export type SvelteInputProps = {
+    onChange?: (event: Event & InputTarget) => void
+    onKeyUp?: (event: KeyboardEvent & InputTarget) => void
+    onInput?: (event: any) => void
+    onClick?: (event: MouseEvent & InputTarget) => void
+    children?: Snippet
+} & InputProps
+
+export type ReactInputProps = {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
+    children?: React.ReactNode
+} & InputProps

package/components/Modal/Modal.astro

@@ -1,75 +1,75 @@
----
-import type { ModalProps } from './modal'
-
-import Button from '../Button/Button.astro'
-
-import alert from '../../icons/alert.svg?raw'
-import success from '../../icons/circle-check.svg?raw'
-import closeIcon from '../../icons/close.svg?raw'
-import info from '../../icons/info.svg?raw'
-import warning from '../../icons/warning.svg?raw'
-
-import styles from './modal.module.scss'
-
-interface Props extends ModalProps {}
-
-const iconMap = {
-    info,
-    success,
-    warning,
-    alert
-}
-
-const {
-    title,
-    subTitle,
-    showCloseIcon = true,
-    closeOnEsc = true,
-    closeOnOverlay = true,
-    transparent,
-    theme,
-    id,
-    className,
-    ...rest
-} = Astro.props
-
-const close = [
-    showCloseIcon && 'icon',
-    closeOnEsc && 'esc',
-    closeOnOverlay && 'overlay'
-].filter(Boolean).join(',')
-
-const classes = [
-    styles.modal,
-    transparent && styles.transparent,
-    theme && styles[theme],
-    className
-]
----
-
-<dialog
-    class:list={classes}
-    id={id}
-    data-close={close.length ? close : undefined}
-    {...rest}
->
-    {showCloseIcon && (
-        <Button
-            theme="flat"
-            className={styles.close}
-            data-id="close"
-            aria-label="close"
-        >
-            <Fragment set:html={closeIcon} />
-        </Button>
-    )}
-    {title && (
-        <strong class={styles.title}>
-            {theme && <Fragment set:html={iconMap[theme]} />}
-            {title}
-        </strong>
-    )}
-    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
-    <slot />
-</dialog>
-<div class={styles.overlay} />
+---
+import type { ModalProps } from './modal'
+
+import Button from '../Button/Button.astro'
+
+import alert from '../../icons/alert.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import closeIcon from '../../icons/close.svg?raw'
+import info from '../../icons/info.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+
+import styles from './modal.module.scss'
+
+interface Props extends ModalProps {}
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const {
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    transparent,
+    theme,
+    id,
+    className,
+    ...rest
+} = Astro.props
+
+const close = [
+    showCloseIcon && 'icon',
+    closeOnEsc && 'esc',
+    closeOnOverlay && 'overlay'
+].filter(Boolean).join(',')
+
+const classes = [
+    styles.modal,
+    transparent && styles.transparent,
+    theme && styles[theme],
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+    {...rest}
+>
+    {showCloseIcon && (
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+            aria-label="close"
+        >
+            <Fragment set:html={closeIcon} />
+        </Button>
+    )}
+    {title && (
+        <strong class={styles.title}>
+            {theme && <Fragment set:html={iconMap[theme]} />}
+            {title}
+        </strong>
+    )}
+    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
+    <slot />
+</dialog>
+<div class={styles.overlay} />

package/components/Modal/modal.ts

@@ -1,25 +1,25 @@
-import type { Snippet } from 'svelte'
-
-export type ModalProps = {
-    title?: string
-    subTitle?: string
-    showCloseIcon?: boolean
-    closeOnEsc?: boolean
-    closeOnOverlay?: boolean
-    transparent?: boolean
-    id?: string
-    className?: string
-    theme?: 'info'
-        | 'success'
-        | 'warning'
-        | 'alert'
-    [key: string]: any
-}
-
-export type SvelteModalProps = {
-    children: Snippet
-} & ModalProps
-
-export type ReactModalProps = {
-    children?: React.ReactNode
-} & ModalProps
+import type { Snippet } from 'svelte'
+
+export type ModalProps = {
+    title?: string
+    subTitle?: string
+    showCloseIcon?: boolean
+    closeOnEsc?: boolean
+    closeOnOverlay?: boolean
+    transparent?: boolean
+    id?: string
+    className?: string
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+    [key: string]: any
+}
+
+export type SvelteModalProps = {
+    children: Snippet
+} & ModalProps
+
+export type ReactModalProps = {
+    children?: React.ReactNode
+} & ModalProps

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>