{"version":3,"file":"CodeInput-a78578af.js","sources":["../../../../../../../assets/overlay/login/cloud1.png","../../../../../../../assets/overlay/login/cloud3.png","../../../../../../../assets/overlay/login/cloud2.png","../../../../../../../assets/overlay/login/cloud4.png","../../../../../../../assets/overlay/login/cloud_bitcoin.png","../../../../../../../assets/overlay/login/cloud_small.png","../../../../../../../assets/overlay/login/login-building.svg","../../src/overlay/components/modals/auth/CodeInput.vue"],"sourcesContent":["export default \"__VITE_PUBLIC_ASSET__f47d0a8b__\"","export default \"__VITE_PUBLIC_ASSET__0c0970b5__\"","export default \"__VITE_PUBLIC_ASSET__63470803__\"","export default \"__VITE_PUBLIC_ASSET__6cc16682__\"","export default \"__VITE_PUBLIC_ASSET__cabe1fa8__\"","export default \"__VITE_PUBLIC_ASSET__8116f8bd__\"","export default \"__VITE_PUBLIC_ASSET__5813f50a__\"","<template>\n  <div\n    :class=\"{\n      'code-input-container': true,\n      [className]: !!className,\n    }\"\n  >\n    <div class=\"code-input\">\n      <p v-if=\"title\" class=\"title\">{{ title }}</p>\n      <template v-for=\"(v, index) in values\" :key=\"index\">\n        <input\n          v-depixel\n          :ref=\"\n            (el) => {\n              if (el) inputs[index + 1] = el;\n            }\n          \"\n          class=\"w-14 h-14 rounded-lg border border-gray outline-none focus:outline-none focus:border-primary focus:ring-0 text-center transition-all\"\n          :type=\"type\"\n          :style=\"{\n            width: `${props.fieldWidth}px`,\n            height: `${props.fieldHeight}px`,\n          }\"\n          :autoFocus=\"autoFocus && index === autoFocusIndex\"\n          :data-id=\"index\"\n          :value=\"v\"\n          :required=\"props.required\"\n          :disabled=\"props.disabled\"\n          maxlength=\"1\"\n          placeholder=\"x\"\n          @input=\"onValueChange\"\n          @focus=\"onFocus\"\n          @keydown=\"onKeyDown\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, toRef, onBeforeUpdate, PropType } from \"vue\";\nconst props = defineProps({\n  className: String,\n  fields: {\n    type: Number,\n    default: 3,\n  },\n  fieldWidth: {\n    type: Number,\n    default: 56,\n  },\n  fieldHeight: {\n    type: Number,\n    default: 56,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  required: {\n    type: Boolean,\n    default: true,\n  },\n  type: {\n    type: String as PropType<\"number\" | \"text\">,\n    default: \"number\",\n  },\n  title: String,\n});\nconst emit = defineEmits([\"change\", \"complete\"]);\nconst KEY_CODE = {\n  backspace: 8,\n  left: 37,\n  up: 38,\n  right: 39,\n  down: 40,\n};\nconst values = ref([]);\nconst iRefs = ref([]);\nconst inputs = ref([]);\nconst fields = toRef(props, \"fields\");\nconst autoFocusIndex = ref(0);\nconst autoFocus = true;\nconst initVals = () => {\n  let vals;\n  if (values.value && values.value.length) {\n    vals = [];\n    for (let i = 0; i < fields.value; i++) {\n      vals.push(values.value[i] || \"\");\n    }\n    autoFocusIndex.value =\n      values.value.length >= fields.value ? 0 : values.value.length;\n  } else {\n    vals = Array(fields.value).fill(\"\");\n  }\n  iRefs.value = [];\n  for (let i = 0; i < fields.value; i++) {\n    iRefs.value.push(i + 1);\n  }\n  values.value = vals;\n};\nconst onFocus = (e) => {\n  e.target.select(e);\n};\nconst onValueChange = (e) => {\n  const index = parseInt(e.target.dataset.id);\n  // e.target.value = e.target.value.replace(/[^\\d]/gi, \"\");\n  // this.handleKeys[index] = false;\n  if (!(e.target.value as string).match(/[A-Za-z0-9]/)) {\n    e.target.value = \"\";\n    return;\n  }\n  let next;\n  const value = e.target.value;\n  values.value = Object.assign([], values.value);\n  if (value.length > 1) {\n    let nextIndex = value.length + index - 1;\n    if (nextIndex >= fields.value) {\n      nextIndex = fields.value - 1;\n    }\n    next = iRefs.value[nextIndex];\n    const split = value.split(\"\");\n    split.forEach((item, i) => {\n      const cursor = index + i;\n      if (cursor < fields.value) {\n        values.value[cursor] = item;\n      }\n    });\n  } else {\n    next = iRefs.value[index + 1];\n    values.value[index] = value;\n  }\n  if (next) {\n    const element = inputs.value[next];\n    element.focus();\n    element.select();\n  }\n  triggerChange(values.value);\n};\nconst onKeyDown = (e) => {\n  const index = parseInt(e.target.dataset.id);\n  const prevIndex = index - 1;\n  const nextIndex = index + 1;\n  const prev = iRefs.value[prevIndex];\n  const next = iRefs.value[nextIndex];\n  switch (e.keyCode) {\n    case KEY_CODE.backspace: {\n      e.preventDefault();\n      const vals = [...values.value];\n      if (values.value[index]) {\n        vals[index] = \"\";\n        values.value = vals;\n        triggerChange(vals);\n      } else if (prev) {\n        vals[prevIndex] = \"\";\n        inputs.value[prev].focus();\n        values.value = vals;\n        triggerChange(vals);\n      }\n      break;\n    }\n    case KEY_CODE.left:\n      e.preventDefault();\n      if (prev) {\n        inputs.value[prev].focus();\n      }\n      break;\n    case KEY_CODE.right:\n      e.preventDefault();\n      if (next) {\n        inputs.value[next].focus();\n      }\n      break;\n    case KEY_CODE.up:\n    case KEY_CODE.down:\n      e.preventDefault();\n      break;\n    default:\n      // this.handleKeys[index] = true;\n      break;\n  }\n};\nconst triggerChange = (values = values.value) => {\n  const val = values.join(\"\");\n  emit(\"change\", val);\n  if (val.length >= fields.value) {\n    emit(\"complete\", val);\n  }\n};\ninitVals();\nonBeforeUpdate(() => {\n  inputs.value = [];\n});\n</script>\n\n<style scoped>\n.code-input-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 20px;\n}\n.code-input {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 8px;\n}\n.code-input > input {\n  border: solid 1px #a8adb7;\n  font-family: \"Depixel\";\n  font-size: 20px;\n  border-radius: 8px;\n  text-align: inherit;\n  transition: 0.2s all ease-in-out;\n  color: #525461;\n  box-sizing: border-box;\n  -webkit-appearance: initial;\n  -moz-appearance: textfield;\n}\n.code-input > input:focus {\n  outline: none;\n  border: 2px solid #39a8a3;\n  caret-color: #39a8a3;\n}\n.title {\n  margin: 0;\n  height: 20px;\n  padding-bottom: 10px;\n}\n</style>\n"],"names":["values"],"mappings":"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"}