feat: initial commit

2026-09-09 06:46:27 +03:30
commit 0ed6bed028
214 changed files with 20177 additions and 0 deletions
@@ -0,0 +1,138 @@
+<!-- Ported from legacy henza_pwa/src/components/input/otpInput.vue -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import SingleOtpInput from './SingleOtpInput.vue'
+
+const BACKSPACE = 8
+const LEFT_ARROW = 37
+const RIGHT_ARROW = 39
+const DELETE = 46
+
+const props = withDefaults(
+  defineProps<{
+    defaultFocus?: boolean
+    numInputs?: number
+    separator?: string
+    inputClasses?: string
+    inputType?: string
+    shouldAutoFocus?: boolean
+    placeholder?: string
+    disabled?: boolean
+  }>(),
+  { numInputs: 4, shouldAutoFocus: false, disabled: false },
+)
+const emit = defineEmits<{
+  (e: 'on-change', value: string | number): void
+  (e: 'on-complete', value: string): void
+}>()
+
+const activeInput = ref(0)
+const otp = ref<string[]>([])
+const oldOtp = ref<string[]>([])
+
+const handleOnFocus = (index: number) => {
+  if (props.defaultFocus && index < props.numInputs && !otp.value[index]) {
+    activeInput.value = otp.value.length
+  } else activeInput.value = index
+}
+const handleOnBlur = () => {
+  activeInput.value = -1
+}
+
+const checkFilledAllInputs = () => {
+  if (otp.value.join('').length === props.numInputs) {
+    return emit('on-complete', otp.value.join(''))
+  }
+  return 'Wait until the user enters the required number of characters'
+}
+
+const focusInput = (input: number) => {
+  activeInput.value = Math.max(Math.min(props.numInputs - 1, input), 0)
+}
+const focusNextInput = () => focusInput(activeInput.value + 1)
+const focusPrevInput = () => focusInput(activeInput.value - 1)
+
+const changeCodeAtFocus = (value: number | string) => {
+  oldOtp.value = Object.assign([], otp.value)
+
+  if (typeof value === 'string' && value === '') otp.value.splice(activeInput.value, 1)
+  else otp.value[activeInput.value] = value as string
+
+  if (oldOtp.value.join('') !== otp.value.join('')) {
+    emit('on-change', otp.value.join(''))
+    checkFilledAllInputs()
+  }
+}
+
+const handleOnPaste = (event: Event) => {
+  event.preventDefault()
+  const clipboardEvent = event as ClipboardEvent
+  const pastedData = (clipboardEvent.clipboardData?.getData('text/plain') ?? '').slice(0, props.numInputs - activeInput.value).split('')
+  if (props.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
+    return 'Invalid pasted data'
+  }
+  const currentCharsInOtp = otp.value.slice(0, activeInput.value)
+  const combinedWithPastedData = currentCharsInOtp.concat(pastedData)
+
+  combinedWithPastedData.slice(0, props.numInputs).forEach((value, i) => {
+    otp.value[i] = value
+  })
+
+  focusInput(combinedWithPastedData.slice(0, props.numInputs).length)
+  return checkFilledAllInputs()
+}
+
+const handleOnChange = (value: number | string) => {
+  changeCodeAtFocus(value)
+  focusNextInput()
+}
+
+const handleOnKeyDown = (event: KeyboardEvent) => {
+  switch (event.keyCode) {
+    case BACKSPACE:
+      event.preventDefault()
+      changeCodeAtFocus('')
+      focusPrevInput()
+      break
+    case DELETE:
+      event.preventDefault()
+      changeCodeAtFocus('')
+      break
+    case LEFT_ARROW:
+      event.preventDefault()
+      focusPrevInput()
+      break
+    case RIGHT_ARROW:
+      event.preventDefault()
+      focusNextInput()
+      break
+    default:
+      break
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex ltr justify-around w-full">
+      <SingleOtpInput
+        v-for="(item, i) in numInputs"
+        :key="i"
+        :focus="activeInput === i"
+        :value="otp[i]"
+        :separator="separator"
+        :input-type="inputType"
+        :input-classes="inputClasses"
+        :is-last-child="i === numInputs - 1"
+        :should-auto-focus="shouldAutoFocus"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @on-change="handleOnChange"
+        @on-keydown="handleOnKeyDown"
+        @on-paste="handleOnPaste"
+        @on-focus="handleOnFocus(i)"
+        @on-blur="handleOnBlur"
+      />
+    </div>
+  </div>
+</template>