glib-web 3.4.3 → 3.4.4

package/components/fields/_otp.vue

@@ -1,161 +1,138 @@
 <template>
   <div :style="$styles()" :class="$classes()">
-    <div v-if="spec.type === 'text'">
-      <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="val[index]" type="text" maxlength="1"
-        class="otp-input" @input="handleInput($event, index)" @keydown="handleKeydown($event, index)"
-        @paste="handlePaste($event, index)" @focus="handleFocus($event, index)" @blur="handleBlur($event, index)"
-        @click="handleClick($event)" />
-      <label class="hint">{{ spec.hint }}</label>
+    <div>
+      <div v-for="i in otpLength" :key="i" class="otp-input">
+        <input v-model="otp[i - 1]" :id="'otp-' + i" :maxlength="1" @input="onInput(i)" @keydown="onKeyDown(i, $event)"
+          @focus="onFocus(i)" @paste="onPaste(i, $event)" ref="otpInput" type="text" />
+      </div>
+      <input type="hidden" :name="fieldName" v-model="fieldModel" />
     </div>
-    <div v-else>
-      <input v-for="(digit, index) in digits" :key="index" ref="input" :value="val[index]" type="number"
-        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
-        maxlength="1" class="otp-input" @input="handleInput($event, index)" @keydown="handleKeydown($event, index)"
-        @paste="handlePaste($event, index)" @focus="handleFocus($event, index)" @blur="handleBlur($event, index)"
-        @click="handleClick($event)" />
-      <label class="hint">{{ spec.hint }}</label>
-    </div>
-    <input type="hidden" :name="fieldName" v-model="fieldModel" />
+    <label class="hint" v-if="hint == true">{{ spec.hint }}</label>
   </div>
 </template>
 
 <script>
-import bus from '../../utils/eventBus'
-
 export default {
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      otp: (this.spec.value || '').toString().split(""),
-      alignment: this.spec.align === null ? 'left' : this.spec.align
-    }
+      otpLength: this.spec.length,
+      otp: new Array(6).fill(''),
+      hint: false
+    };
   },
-  computed: {
-    otpValue() {
-      if (!this.otp) return ''
+  // created() {
+  //   if (this.spec.value) {
+  //     const valueString = this.spec.value.toString();
 
-      // concatenate the digits into a single string
-      return this.otp.join("");
-    },
-    digits() {
-      return this.spec.length
-    },
-    val() {
-      const field = this.fieldModel == null ? [] : this.fieldModel.toString().split("")
+  //     for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
+  //       this.otp[i] = valueString[i];
+  //     }
 
-      if (this.alignment === 'right') {
-        if (this.spec.valueIf == null) {
-          if (this.digits > this.otp.length && this.otp.length != 0) {
-            const results = []
-            for (let i = 0; i < (this.digits - this.otp.length); i++) {
-              results.push('')
-            }
-            return Reflect.apply(Array.prototype.concat, results, this.otp)
-          } else {
-            return field
-          }
-        } else {
-          return field
-        }
-      } else {
-        if (this.spec.valueIf == null) {
-          return this.otp
-        } else {
-          return field
-        }
+  //   }
+
+  // },
+  mounted() {
+    if (this.spec.valueIf) {
+      const valueString = this.fieldModel.toString();
+
+      for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
+        this.otp[i] = valueString[i];
       }
-    },
+    }
   },
-  methods: {
-    created() {
-      this.fieldModel = this.otpValue;
-    },
-    handleInput(event, index) {
-      if (event.target.value.length === 1) {
-        this.focusNext(index);
+  watch: {
+    fieldModel(newFieldModel) {
+      let valueString = '';
+
+      if (newFieldModel !== '') {
+        valueString = isNaN(newFieldModel) ? '' : parseInt(newFieldModel).toString();
       }
-      this.val[index] = event.target.value;
-      this.fieldModel = this.otp.join("");
-    },
-    handleKeydown(event, index) {
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        if (this.otp[index] !== "") {
-          this.otp[index] = ""
-        } else {
-          this.focusPrevious(index);
-          this.otp[index - 1] = ""
+      this.otp = []
+      for (let i = 0; i < valueString.length; i++) {
+        this.otp[i] = valueString[i];
+      }
+
+    }
+  },
+  methods: {
+    $ready() {
+      if (this.spec.value) {
+        const valueString = this.spec.value.toString();
+
+        for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
+          this.otp[i] = valueString[i];
         }
       }
     },
-    handlePaste(event, index) {
-      event.preventDefault();
-      const pasted = event.clipboardData
-        .getData("text")
-        .slice(0, this.digits - index);
-      for (let i = 0; i < pasted.length; i++) {
-        this.$set(this.otp, index + i, pasted[i]);
+    onInput(index) {
+      if (this.otp[index - 1] && index < this.otpLength) {
+        this.$refs['otpInput'][index].focus();
       }
-      this.focusNext(index + pasted.length - 1);
-    },
-    handleFocus(event, index) {
-      if (index > 0 && this.otp[index - 1] === "") {
-        this.focusPrevious(index);
+      this.fieldModel = this.otp.join("");
+      if (this.spec.hint) {
+        this.hint = true
       }
     },
-    handleBlur(event, index) {
-      if (this.otp.filter(digit => digit === "").length === 0) {
-        bus.$emit("complete", this.otp.join(""));
+    onKeyDown(index, event) {
+      if (event.key === 'Backspace' && !this.otp[index - 1] && index > 1) {
+        this.$refs['otpInput'][index - 2].focus();
       }
     },
-    focusNext(index) {
-      if (index < this.digits - 1) {
-        this.$refs.input[index + 1].focus();
+    onFocus(index) {
+      if (this.otp[index - 1]) {
+        this.$refs['otpInput'][index - 1].select();
       }
     },
-    focusPrevious(index) {
-      if (index > 0) {
-        this.$refs.input[index - 1].focus();
+    onPaste(index, event) {
+      event.preventDefault();
+      const clipboardData = event.clipboardData.getData('text');
+      const clipboardDigits = clipboardData.replace(/\D/g, '');
+      const remainingLength = this.otpLength - index + 1;
+      const pasteDigits = clipboardDigits.slice(0, remainingLength);
+
+      for (let i = 0; i < pasteDigits.length; i++) {
+        this.otp[index - 1 + i] = pasteDigits[i];
       }
-    },
-    handleClick(event) {
-      event.target.select();
+
+      this.$refs['otpInput'][this.otpLength - 1].focus();
     }
-  }
+  },
 };
 </script>
+
 <style scoped>
 .otp-input {
+  display: inline-block;
+  width: 2rem;
+  text-align: center;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+input {
   border: 1px solid #47495f;
   text-align: center;
   width: 50px;
   height: 50px;
   border-radius: 4px;
   font-size: 24px;
-  margin: 8px;
 }
 
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-/* Firefox */
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-.hint {
-  display: none;
-}
+@media (max-width: 768px) {
+  .otp-input {
+    width: 1rem;
+    margin-right: 24px;
+    margin-bottom: 24px;
+  }
 
-input:focus~.hint,
-input:focus-visible~.hint {
-  display: block;
-  padding: 8px 16px;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "",
   "main": "index.js",
   "scripts": {