@bagelink/vue 0.0.789 → 0.0.791

package/dist/style.css

@@ -914,6 +914,43 @@ data[data-v-5f91f598] {
 	direction: ltr;
 }
 
+.otp_wrap[data-v-539a9fdb] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.digit-box[data-v-539a9fdb] {
+    height: 3rem;
+    flex-grow: 1;
+    border: 1px solid var(--bgl-primary-tint);
+    display: inline-block;
+    background: var(--bgl-gray-light);
+    border-radius: 5px;
+    margin: 5px;
+    text-align: center;
+    font-size: 2.4rem;
+    -moz-appearance: textfield; /* Firefox */
+    caret-color: transparent;
+}
+.digit-box[data-v-539a9fdb]::-webkit-outer-spin-button,
+.digit-box[data-v-539a9fdb]::-webkit-inner-spin-button {
+    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
+    margin: 0;
+}
+.digit-box[data-v-539a9fdb]:focus {
+  outline: 1px solid var(--bgl-primary);
+  filter: drop-shadow(0 0 0.25rem var(--bgl-primary));
+}
+.digit-box[type="number"][data-v-539a9fdb] {
+    -moz-appearance: textfield; /* Firefox */
+}
+@media screen and (max-width: 910px) {
+.digit-box[data-v-539a9fdb] {
+    padding: 0.25rem;
+}
+}
+
 .m-password {
 	margin-block: calc(var(--input-height) / 2 - 15px);
 }
@@ -1563,61 +1600,61 @@ p {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-739e3acb] {
+.bagel-input textarea[data-v-194260fc] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-739e3acb] {
+.bagel-input.text-input textarea[data-v-194260fc] {
 	resize: none;
 }
-.code textarea[data-v-739e3acb] {
+.code textarea[data-v-194260fc] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-739e3acb]::placeholder {
+.code textarea[data-v-194260fc]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-739e3acb] {
+.bagel-input.small[data-v-194260fc] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-739e3acb] {
+.bagel-input.dense label[data-v-194260fc] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-739e3acb]:disabled {
+.bagel-input input[data-v-194260fc]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-739e3acb] {
+.bagel-input label[data-v-194260fc] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-739e3acb] {
+.textInputIconWrap .bgl_icon-font[data-v-194260fc] {
 	color: var(--bgl-gray);
 	position: absolute;
     bottom: 0px;
     inset-inline-end: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
-.textInputIconWrap input[data-v-739e3acb]{
+.textInputIconWrap input[data-v-194260fc]{
 	padding-inline-end: 2rem;
 }
-.txtInputIconStart .iconStart[data-v-739e3acb] {
+.txtInputIconStart .iconStart[data-v-194260fc] {
 	color: var(--bgl-gray);
 	position: absolute;
     bottom: 0px;
     inset-inline-start: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
-.txtInputIconStart input[data-v-739e3acb]{
+.txtInputIconStart input[data-v-194260fc]{
 	padding-inline-start: 2rem;
 }
-.txtInputIconStart textarea[data-v-739e3acb] {
+.txtInputIconStart textarea[data-v-194260fc] {
 	padding-inline-start: 2rem;
 }
-.bagel-input.small textarea[data-v-739e3acb] {
+.bagel-input.small textarea[data-v-194260fc] {
 	height: 30px;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.789",
+  "version": "0.0.791",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const props = defineProps<{ digitCount: number, default?: string, modelValue?: string }>()
+
+const emit = defineEmits(['update:modelValue', 'complete'])
+const digits = reactive<(number | string | null)[]>([])
+const otpCont = $ref<HTMLElement>()
+
+function handlePaste(event: ClipboardEvent, index: number) {
+	event.preventDefault()
+	const { clipboardData } = event
+	const pastedText = clipboardData?.getData('text').replace(/\D/g, '') // Ensure only numeric digits are pasted
+	const pastedDigits = pastedText?.split('')
+	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() {
+	if (isDigitsFull()) {
+		emit('complete', digits.join(''))
+	} else {
+		emit('update:modelValue', digits.join(''))
+	}
+}
+
+function handleKeyDown(event: KeyboardEvent, index: number) {
+	const noPreventKeys = ['Tab', 'ArrowRight', 'ArrowLeft', 'Control', 'Shift', 'Alt', 'Meta']
+	if (noPreventKeys.includes(event.key)) {
+		return
+	}
+
+	if (event.key === 'Backspace') {
+		digits[index] = null
+
+		if (index !== 0) {
+			const prevDigit = otpCont?.children[index - 1] as any
+			prevDigit.focus()
+		}
+		emitUpdate()
+		return
+	}
+
+	const numberRegex = /^\d$/
+	if (numberRegex.test(event.key)) {
+		digits[index] = event.key
+
+		if (index !== props.digitCount - 1) {
+			setTimeout(() => {
+				const nextDigit = otpCont?.children[index + 1] as any
+				nextDigit.focus()
+			}, 10)
+		}
+		emitUpdate()
+	}
+}
+
+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] = null
+	}
+}
+
+function isDigitsFull() {
+	for (const elem of digits) {
+		if (elem == null || elem == undefined) {
+			return false
+		}
+	}
+	return true
+}
+</script>
+
+<template>
+	<div ref="otpCont" class="otp_wrap">
+		<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)"
+		>
+	</div>
+</template>
+
+<style scoped>
+.otp_wrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.digit-box {
+    height: 3rem;
+    flex-grow: 1;
+    border: 1px solid var(--bgl-primary-tint);
+    display: inline-block;
+    background: var(--bgl-gray-light);
+    border-radius: 5px;
+    margin: 5px;
+    text-align: center;
+    font-size: 2.4rem;
+    -moz-appearance: textfield; /* Firefox */
+    caret-color: transparent;
+}
+
+.digit-box::-webkit-outer-spin-button,
+.digit-box::-webkit-inner-spin-button {
+    -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
+    margin: 0;
+}
+
+.digit-box:focus {
+  outline: 1px solid var(--bgl-primary);
+  filter: drop-shadow(0 0 0.25rem var(--bgl-primary));
+}
+
+.digit-box[type="number"] {
+    -moz-appearance: textfield; /* Firefox */
+}
+
+@media screen and (max-width: 910px) {
+  .digit-box {
+    padding: 0.25rem;
+  }
+}
+</style>

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

@@ -194,7 +194,7 @@ onMounted(() => {
 	position: absolute;
     bottom: 0px;
     inset-inline-end: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
 .textInputIconWrap input{
 	padding-inline-end: 2rem;
@@ -205,7 +205,7 @@ onMounted(() => {
 	position: absolute;
     bottom: 0px;
     inset-inline-start: 0.25rem;
-	margin-block: calc(var(--input-height) / 2 - 16px);
+	margin-block: calc(var(--input-height) / 2 - 13px);
 }
 .txtInputIconStart input{
 	padding-inline-start: 2rem;

package/src/components/form/inputs/index.ts

@@ -5,6 +5,7 @@ export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as FileUpload } from './FileUpload.vue'
 export { default as JSONInput } from './JSONInput.vue'
+export { default as OTP } from './OTP.vue'
 export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'