@bagelink/vue 1.15.241 → 1.15.245

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.241",
+  "version": "1.15.245",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/form/inputs/OTP.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { BagelInputShellProps } from './bagelInputShell'
 import { useBagelInputShell } from './bagelInputShell'
 
@@ -12,6 +12,8 @@ const props = defineProps<{
 	color?: string
 } & BagelInputShellProps>()
 
+const emit = defineEmits(['update:modelValue', 'complete'])
+
 const { shellClass, shellStyle: baseShellStyle } = useBagelInputShell(props)
 
 const digitColor = computed(() => {
@@ -25,88 +27,49 @@ const shellStyle = computed(() => {
 	if (!color) { return baseShellStyle.value }
 	return { ...baseShellStyle.value, '--bgl-otp-digit-color': color }
 })
-const hasValue = computed(() => digits.some(d => d !== undefined && d !== ''))
-
-const emit = defineEmits(['update:modelValue', 'complete'])
-const digits = reactive<(number | string | undefined)[]>([])
-const otpCont = ref<HTMLElement>()
-
-function handlePaste(event: ClipboardEvent, index: number) {
-	event.preventDefault()
-	const { clipboardData } = event
-	const pastedText = clipboardData?.getData('text').replaceAll(/\D/g, '') // Ensure only numeric digits are pasted
-	const pastedDigits = [...(pastedText ?? '')]
-	if (!pastedDigits) { return }
-	for (let i = 0; i < pastedDigits.length; i++) {
-		const digit = pastedDigits[i]
-		if (index + i < digits.length) {
-			digits[index + i] = digit
-		}
-	}
-	emitUpdate()
-}
 
-function emitUpdate() {
-	emit('update:modelValue', digits.join(''))
-	if (isDigitsFull()) {
-		emit('complete', digits.join(''))
-	}
-}
-
-function handleKeyDown(event: KeyboardEvent, index: number) {
-	const noPreventKeys = ['Tab', 'ArrowRight', 'ArrowLeft', 'Control', 'Shift', 'Alt', 'Meta']
-	if (noPreventKeys.includes(event.key)) {
-		return
-	}
-
-	const preventKeys = ['ArrowUp', 'ArrowDown']
-	if (preventKeys.includes(event.key)) {
-		event.preventDefault()
-		return
-	}
-
-	if (event.key === 'Backspace') {
-		digits[index] = undefined
+// ── Single-input model ──────────────────────────────────────────────────────
+// One real <input> holds the whole code; the N boxes below are display-only
+// mirrors. A single field is what makes OS SMS OTP autofill work — iOS/web need
+// `autocomplete="one-time-code"` on ONE input (a split field never triggers it),
+// and Android's SMS Retriever pastes the whole code at once.
+const inputEl = ref<HTMLInputElement>()
+
+const value = ref<string>(
+	(props.default ?? props.modelValue ?? '').replace(/\D/g, '').slice(0, props.digitCount),
+)
+
+// Reflect external modelValue changes (e.g. a parent "reset" back to '').
+watch(() => props.modelValue, (next) => {
+	const clean = (next ?? '').replace(/\D/g, '').slice(0, props.digitCount)
+	if (clean !== value.value) { value.value = clean }
+})
 
-		if (index !== 0) {
-			const prevDigit = otpCont.value?.children[index - 1] as any
-			prevDigit.focus()
-		}
-		emitUpdate()
-		return
-	}
+const digits = computed(() => {
+	const chars = value.value.split('')
+	return Array.from({ length: props.digitCount }, (_, i) => chars[i] ?? '')
+})
 
-	const numberRegex = /^\d$/
-	if (numberRegex.test(event.key)) {
-		digits[index] = event.key
-
-		if (index !== props.digitCount - 1) {
-			setTimeout(() => {
-				const nextDigit = otpCont.value?.children[index + 1] as any
-				nextDigit.focus()
-			}, 10)
-		}
-		emitUpdate()
+const hasValue = computed(() => value.value.length > 0)
+// The "active" box is the next empty slot (or the last one when full).
+const activeIndex = computed(() => Math.min(value.value.length, props.digitCount - 1))
+const focused = ref(false)
+
+function setValue(next: string) {
+	const clean = next.replace(/\D/g, '').slice(0, props.digitCount)
+	value.value = clean
+	emit('update:modelValue', clean)
+	if (clean.length === props.digitCount) {
+		emit('complete', clean)
 	}
 }
 
-if (props.default && props.default.length === props.digitCount) {
-	for (let i = 0; i < props.digitCount; i++) {
-		digits[i] = props.default.charAt(i)
-	}
-} else {
-	for (let i = 0; i < props.digitCount; i++) {
-		digits[i] = undefined
-	}
+function onInput(e: Event) {
+	setValue((e.target as HTMLInputElement).value)
 }
 
-function isDigitsFull() {
-	for (const elem of digits) {
-		if (elem === undefined) {
-			return false
-		}
-	}
-	return true
+function focusInput() {
+	inputEl.value?.focus()
 }
 </script>
 
@@ -114,14 +77,37 @@ function isDigitsFull() {
 	<div
 		class="otp-input" :class="[shellClass, { 'has-value': hasValue }]" :style="shellStyle"
 		tabindex="-1"
+		@click="focusInput"
 	>
-		<div ref="otpCont" class="otp_wrap ltr" :class="{ 'has-error': !!error }">
+		<div class="otp_wrap ltr" :class="{ 'has-error': !!error }">
+			<!-- The single, real input. Transparent + overlaid on the boxes so OS
+					 autofill, paste, and typing all target it. -->
 			<input
-				v-for="(_el, ind) in digits" :key="ind" :value="digits[ind] || ''" type="number" inputmode="numeric"
-				class="digit-box" :autofocus="ind === 0" maxlength="1" pattern="[0-9]*"
-				oninput="this.value = this.value.slice(0, 1)" @keydown="handleKeyDown($event, ind)"
-				@paste="handlePaste($event, ind)" @keyup.prevent
+				ref="inputEl"
+				class="otp-hidden-input"
+				:value="value"
+				type="text"
+				inputmode="numeric"
+				autocomplete="one-time-code"
+				:maxlength="digitCount"
+				:autofocus="true"
+				name="one-time-code"
+				pattern="[0-9]*"
+				aria-label="verification code"
+				@input="onInput"
+				@focus="focused = true"
+				@blur="focused = false"
 			>
+
+			<!-- Display-only mirror boxes. -->
+			<div
+				v-for="(d, ind) in digits" :key="ind"
+				class="digit-box"
+				:class="{ 'is-active': focused && ind === activeIndex, 'is-filled': d !== '' }"
+				aria-hidden="true"
+			>
+				{{ d }}
+			</div>
 		</div>
 		<div v-if="error" class="otp-error-message txt-center txt10 pt-05">
 			{{ error }}
@@ -134,46 +120,61 @@ function isDigitsFull() {
 .otp-error-message {
 color: var(--bgl-red);
 }
-.otp_wrap.has-error input,
-.otp_wrap.has-error textarea {
+.otp_wrap.has-error .digit-box {
 outline: 1px solid var(--bgl-red) !important;
 }
 
 .otp_wrap {
+position: relative;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
+cursor: text;
+}
+
+/* Real input sits on top of the boxes, fully transparent, so taps/focus/autofill
+   land on it. The digits render in the boxes below. */
+.otp-hidden-input {
+position: absolute;
+inset: 0;
+width: 100%;
+height: 100%;
+margin: 0;
+padding: 0;
+border: 0;
+background: transparent;
+color: transparent;
+caret-color: transparent;
+text-align: center;
+font-size: 1px;
+letter-spacing: 0;
+z-index: 2;
+outline: none;
+-webkit-tap-highlight-color: transparent;
 }
+.otp-hidden-input::selection { background: transparent; }
 
 .digit-box {
 height: 3rem;
-flex-grow: 1;
+aspect-ratio: 1;
+flex: 0 0 auto;
 color: var(--bgl-otp-digit-color, inherit);
 border: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary-tint));
-display: inline-block;
+display: inline-flex;
+align-items: center;
+justify-content: center;
 background: var(--bgl-gray-light);
 border-radius: 5px;
 margin: 5px;
 text-align: center;
 font-size: 2.4rem;
--moz-appearance: textfield;
-/* Firefox */
-caret-color: transparent;
-/* Remove spinner arrows */
-appearance: textfield;
-/* Standardized property */
-}
-
-/* Remove spinner arrows for Webkit browsers */
-.digit-box::-webkit-outer-spin-button,
-.digit-box::-webkit-inner-spin-button {
--webkit-appearance: none;
-appearance: none;
-margin: 0;
+font-variant-numeric: tabular-nums;
+user-select: none;
+transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.digit-box:focus {
+.digit-box.is-active {
 outline: 1px solid var(--bgl-input-label-active-color, var(--bgl-primary));
 filter: drop-shadow(0 0 0.25rem var(--bgl-input-label-active-color, var(--bgl-primary)));
 outline-offset: 1px;
@@ -181,14 +182,17 @@ outline-offset: 1px;
 
 /* ── frame variant ──────────────────────────────────────────────────────── */
 
+.otp-input {
+	width: 100%;
+}
+
 .otp-input.frame .digit-box {
 background: transparent;
 outline: 1.5px solid var(--bgl-border-color);
 outline-offset: -1px;
-transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.otp-input.frame .digit-box:focus {
+.otp-input.frame .digit-box.is-active {
 outline-color: var(--bgl-input-label-active-color, var(--bgl-primary));
 outline-width: 2px;
 box-shadow:
@@ -204,14 +208,6 @@ outline: 1.5px solid var(--bgl-border-color);
 outline-offset: -1px;
 }
 
- /* Redundant, already covered above */
-/* .digit-box[type="number"] {
--moz-appearance: textfield;
-} */
- .relative {
- 	position: relative !important;
- }
-
 @media screen and (max-width: 910px) {
 .digit-box {
 	padding: 0.25rem;