Merge pull request #13 from healerlab/features/docs

feat: update separator support and resolve issue

Author: HealerNguyen

README.md

@@ -49,6 +49,11 @@ const handleFinish = (otpCode: string) => {
 const handleChange = (otpCode: string) => {
   // write logic with changed code
 }
+
+const getCodeWithSeparator = () => {
+  // get code with separator
+  // otpInput?.value?.genResultWithSeparator()
+}
 </script>
 ```
 
@@ -64,6 +69,8 @@ Use the component in your template:
   :outlined="true"
   ref="otpInput"
   :only-number="true"
+  separator="-" // separator support
+  separatorType="middle" // middle or all
 />
 ```
 
@@ -88,6 +95,11 @@ This is minimal style for your input, you can change it to match your use-case:
       outline: none
     }
   }
+
+  :deep(span) {
+    padding: 0 0px 0 10px;
+    font-size: 30px;
+  }
 }
 </style>
 ```

docs/.vitepress/config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       { text: 'Home', link: '/' },
       { text: 'Get Started', link: '/usage-examples' },
       {
-        text: '0.0.5',
+        text: '0.0.8',
         items: [
           {
             text: 'Changelog',

docs/api.md

@@ -25,6 +25,8 @@ This page demonstrates usage of props and events provided by HOtpInput.
 | inputClassName | `String` | `null` | The class name to use for each input element. |
 | onChange | `Function` | `null` | Callback event that return OTP code when we made a change in inputs. `(otpCode: string)` |
 | onFinish | `Function` | `null` | Callback event that return OTP code when we fully typed all inputs. `(otpCode: string)` |
+| separator | `String` | `null` | Separator to be rendered. |
+| separatorType | `String` | `middle` | Default separator position if separator is not null |
 
 See the [Vue3 Simple OTP Input](https://www.npmjs.com/package/@healerlab/vue3-simple-otp-input) package for more information.
 

docs/usage-examples.md

@@ -56,6 +56,8 @@ Use the component in your template:
   :outlined="true"
   ref="otpInput"
   :only-number="true"
+  separator="-"
+  separatorType="middle"
 />
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@healerlab/vue3-simple-otp-input",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Powerful, lightweight, and reusable OTP input component for Vue 3",
   "main": "./dist/h-otp-input.umd.cjs",
   "module": "./dist/h-otp-input.js",
@@ -70,6 +70,6 @@
     "url": "https://github.com/healerlab/vue3-simple-otp-input.git"
   },
   "dependencies": {
-    "@healerlab/vue3-simple-otp-input": "^0.0.5"
+    "@healerlab/vue3-simple-otp-input": "^0.0.8"
   }
 }

src/App.vue

@@ -10,6 +10,9 @@
       :outlined="true"
       ref="otpInput"
       :only-number="true"
+      autocomplete="off"
+      separator="-"
+      separatorType="middle"
     />
   </div>
 </template>
@@ -19,14 +22,21 @@ const otpInput = ref<any>(null)
 import HOtpInput from './components/HOtpInput.vue'
 const handleComplete = (otpCode: string) => {
   console.log(111, otpCode);
+  // getInputWithSeparator()
 }
 
 const handleChange = (otpCode: string) => {
   console.log(222, otpCode);
 }
+
+// const getInputWithSeparator = () => {
+// console.log(otpInput?.value?.genResultWithSeparator());
+// }
 </script>
 <style lang="scss" scoped>
 .otp-input {
+  display: flex;
+  align-items: center;
   :deep(input) {
     outline: none;
     width: 30px;
@@ -42,5 +52,10 @@ const handleChange = (otpCode: string) => {
       outline: none
     }
   }
+
+  :deep(span) {
+    padding: 0 0px 0 10px;
+    font-size: 30px;
+  }
 }
 </style>

src/components/HOtpInput.vue

@@ -1,29 +1,31 @@
 <template>
   <div class="hl-input-container m-auto text-center" :class="wrapperClassName">
-    <input
-      v-for="(input, index) in length"
-      :element-num="input"
-      :id="generateInputId(index)"
-      :ref="(el) => generateRef(index, el)"
-      :key="index"
-      v-model="inputValues[index]"
-      :type="type"
-      maxlength="1"
-      :style="{
-        borderBottom: hlBorderColor(index),
-        color: fontColor,
-        ...conditionClass(index)
-      }"
-      :class="inputClassName"
-      :disabled="disabled"
-      :readonly="readonly"
-      contenteditable="true"
-      @keydown="(e: KeyboardEvent) => handleKeydown(e)"
-      @keyup="handleInputFocus(index)"
-      @paste.prevent="handlePastedValues"
-      @input="returnFullString()"
-      @focus="handleFocus(index)"
-    />
+    <template v-for="(input, index) in length" :key="index">
+      <input
+        :element-num="input"
+        :id="generateInputId(index)"
+        :ref="(el) => generateRef(index, el)"
+        v-model="inputValues[index]"
+        :type="type"
+        maxlength="1"
+        :style="{
+          borderBottom: hlBorderColor(index),
+          color: fontColor,
+          ...conditionClass(index)
+        }"
+        :class="inputClassName"
+        :disabled="disabled"
+        :readonly="readonly"
+        contenteditable="true"
+        @keydown="(e: KeyboardEvent) => handleKeydown(e)"
+        @keyup="handleInputFocus(index)"
+        @paste.prevent="handlePastedValues"
+        @input="returnFullString()"
+        @focus="handleFocus(index)"
+        :autocomplete="autocomplete"
+      />
+      <div v-if="separator && checkSeparatorType(index)" class="hl-separator"><span>{{ separator }}</span></div>
+    </template>
   </div>
 </template>
 
@@ -93,6 +95,20 @@ const props = defineProps({
   inputClassName: {
     type: String,
     default: ""
+  },
+  autocomplete: {
+    type: [String],
+    default: 'off'
+  },
+  separator: {
+    type: String,
+    default: ''
+  },
+  separatorType: {
+    type: String as PropType<"middle" | "all">,
+    default: "middle",
+    validator: (value: string) =>
+        ["middle", "all"].includes(value),
   }
 })
 
@@ -105,6 +121,14 @@ watch(
   }
 )
 
+const checkSeparatorType = (index: number) => {
+  if (props.separatorType === 'middle') {
+    return index === props.length / 2 -1
+  } else {
+    return index < props.length - 1
+  }
+}
+
 const inputRefs: any = {}
 const inputValues = ref([])
 const currentActiveIndex = ref(-1)
@@ -116,10 +140,6 @@ const clear = () => {
   currentActiveIndex.value = -1
 }
 
-defineExpose({
-  clear
-});
-
 const handleKeydown = (event: KeyboardEvent) => {
   if (!props.onlyNumber) {
     return
@@ -205,6 +225,18 @@ const returnFullString = () => {
   }
 }
 
+const genResultWithSeparator = () => {
+  const data = inputValues.value.join('')
+  if (!props.separator) return data
+  if (props.separatorType === 'middle') {             
+    const newArr =  data.split('')
+    newArr.splice(props.length / 2, 0, props.separator)
+    return newArr.join('')
+  } else {    
+    return data.split('').join(props.separator)
+  }
+}
+
 onMounted(() => {
   if (props.autoFocus) {
     inputRefs && inputRefs[0].focus()
@@ -231,4 +263,9 @@ const outlineFocusClass = (isFocus:  boolean) => {
   }
   return 'none'
 }
+
+defineExpose({
+  clear,
+  genResultWithSeparator
+});
 </script>

yarn.lock

@@ -271,18 +271,6 @@
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
   integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
 
-"@healerlab/vue3-simple-otp-input@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.4.tgz#46fb48ddaf07773cf955909e49aa4d20fb8089e3"
-  integrity sha512-Pmb3bB99MCaB8yd7Jv7sijrIYWbXVuoLF8GQn7mA2yo5J7guTm9u1dJnq+nDNxWm2f9v7xQlJbAWwzs7h64/YA==
-
-"@healerlab/vue3-simple-otp-input@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.5.tgz#f491c01b3f45c47068de703b794a2fe5a04fd059"
-  integrity sha512-qKvlbAgfAzuORsw2migjYBSUh2iWvScDfja51IGWWtbplSuIBVWwvCttY4JB1+eavR/GrOhiwXDBSa4Esd6bug==
-  dependencies:
-    "@healerlab/vue3-simple-otp-input" "^0.0.4"
-
 "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"