@bagelink/vue 1.15.239 → 1.15.243

package/package.json

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

package/src/components/Image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineOptions({ name: 'BglImage', inheritAttrs: true })
+defineOptions({ name: 'BglImage', inheritAttrs: false })
 import { Skeleton, normalizeDimension, Icon, useImageSrc } from '@bagelink/vue'
 import { Comment, computed, useSlots, type StyleValue, type VNode } from 'vue'
 
@@ -68,14 +68,18 @@ const imgFit = computed(() => props.fit ?? 'cover')
 </script>
 
 <template>
-	<!-- Framed mode: ratio box with gradient base, blended photo, and overlay slot. -->
+	<!-- Framed mode: ratio box with gradient base, blended photo, and overlay slot.
+	     Multi-root component → bind $attrs explicitly so class/style (e.g. flex-shrink-0) land on the frame. -->
 	<div
 		v-if="framed"
+		v-bind="$attrs"
 		class="bgl-image-frame relative overflow-hidden"
 		:class="ratioClass"
 		:style="{
 			width: normalizeDimension(width),
+			minWidth: normalizeDimension(width),
 			height: ratio ? undefined : normalizeDimension(height),
+			minHeight: ratio ? undefined : normalizeDimension(height),
 			background: gradientCss,
 			borderRadius: radiusStyle,
 		}"

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,59 @@ 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;
 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;
+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;
@@ -185,10 +184,9 @@ outline-offset: 1px;
 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 +202,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;

package/src/components/layout/Tabs.vue

@@ -20,6 +20,8 @@ const props = defineProps<{
 	fullWidthMobile?: boolean
 	alignTxt?: 'center' | 'start' | 'end'
 	alignTxtMobile?: 'center' | 'start' | 'end'
+	/** Horizontally center the tab bar (content panels stay full-width). */
+	center?: boolean
 	icon?: IconType
 	iconEnd?: IconType
 	iconSize?: number | string
@@ -41,6 +43,12 @@ const slctTab = computed({
 	},
 })
 
+/** Props forwarded to TabsNav — omit `center` (layout-only here). */
+const navProps = computed(() => {
+	const { center: _center, modelValue: _mv, ...rest } = props
+	return rest
+})
+
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
@@ -55,10 +63,10 @@ const tabComponent = defineComponent({
 </script>
 
 <template>
-	<div class="bgl_tabs grid gap-05">
-		<div class="flex justify-content-center">
+	<div class="bgl_tabs">
+		<div :class="center ? 'flex justify-content-center' : undefined">
 			<TabsNav
-				v-bind="{ ...props, ...attrs }"
+				v-bind="{ ...navProps, ...attrs }"
 				v-model="slctTab"
 				:group="group"
 			/>