Merge pull request #15 from healerlab/features/docs

Features/docs

Author: HealerNguyen

docs/.vitepress/config.ts

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

docs/.vitepress/theme/custom.css

@@ -13,4 +13,14 @@
 }
 .otp-input input:focus {
   outline: none
+}
+
+.otp-input {
+  display: flex;
+  align-items: center;
+}
+
+.otp-input div span {
+  padding: 0 0px 0 10px;
+  font-size: 30px;
 }

docs/api.md

@@ -26,8 +26,8 @@ This page demonstrates usage of props and events provided by HOtpInput.
 | 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 |
-
+| separatorType | `String` | `"middle", "all"` | Default separator position if separator is not null |
+| genResultWithSeparator | `Function` | `null` | Using this event, exposed from otp component to get code with separator |
 See the [Vue3 Simple OTP Input](https://www.npmjs.com/package/@healerlab/vue3-simple-otp-input) package for more information.
 
 
@@ -43,12 +43,15 @@ const { HOtpInput } = pkg
 const otpInput = ref(null)
 const otpCode = ref()
 const otpCodeChange = ref()
+const otpWithSeparator = ref()
 
 const handleFinish = (code: string) => {
   otpCode.value = code
+  otpWithSeparator.value = otpInput?.value?.genResultWithSeparator()
 }
 
 const handleChange = (code: string) => {
+  otpWithSeparator.value = ''
   otpCodeChange.value = code
   if (!code) otpCode.value = ''
 }
@@ -65,6 +68,7 @@ const isReadonly = ref(false)
 const isAllowPaste = ref(false)
 const otpLength = ref(6)
 const currentOtpType = ref('text')
+const currentSeparator = ref('middle')
 
 const changeOnlyNumber = () => {
   otpInput.value.clear()
@@ -78,6 +82,8 @@ const changeOTPLength = (isInCrease: boolean) => {
 const changeOtpType = () => {
   currentOtpType.value = currentOtpType.value === "password" ? "text" : "password"
 }
+
+const changeSeparator = () => currentSeparator.value = currentSeparator.value === "middle" ? "all" : "middle"
 </script>
 <label>Current OTP Length is: `{{ otpLength }}`</label> <br />
 <label><input type="checkbox" :checked="isOutlined" @change="isOutlined = !isOutlined"> Outlined</label>
@@ -87,6 +93,7 @@ const changeOtpType = () => {
 <label><input type="checkbox" :checked="isReadonly" @change="isReadonly = !isReadonly"> Readonly</label>
 <label><input type="checkbox" :checked="isAllowPaste" @change="isAllowPaste = !isAllowPaste"> AllowPaste</label> <br />
 <label><input type="checkbox" @change="changeOtpType"> OTP type: `{{ currentOtpType }}`</label> <br />
+<label><input type="checkbox" @change="changeSeparator"> Separator: `{{ currentSeparator }}`</label> <br />
 
 
 <a @click="changeOTPLength(false)" href="javascript:void(0)">Change OTP Length to 4</a>
@@ -107,10 +114,14 @@ const changeOtpType = () => {
   :disabled="isDisabled"
   :readonly="isReadonly"
   :allowPaste="isAllowPaste"
+  :separatorType="currentSeparator"
+  separator="-"
 />
 <!-- Using
 <button @click="clearOtp">Clear OTP</button> -->
 
 <span>The final OTP code is: `{{ otpCode }}`</span>
 <br />
-<span>The OTP changed to:  `{{ otpCodeChange }}`</span>
+<span>The OTP changed to:  `{{ otpCodeChange }}`</span>
+<br />
+<span>The OTP with separator:  `{{ otpWithSeparator }}`</span> (get code by calling genResultWithSeparator() exposed from otp component)

docs/usage-examples.md

@@ -82,6 +82,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>
 ```

package.json

@@ -70,6 +70,6 @@
     "url": "https://github.com/healerlab/vue3-simple-otp-input.git"
   },
   "dependencies": {
-    "@healerlab/vue3-simple-otp-input": "^0.0.8"
+    "@healerlab/vue3-simple-otp-input": "^0.0.9"
   }
 }

yarn.lock

@@ -271,6 +271,32 @@
   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"
+
+"@healerlab/vue3-simple-otp-input@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.8.tgz#28ae5004d2f56e9e75ddcbade41497d5287e40da"
+  integrity sha512-DBY3/Y3rmQisq+tMc93wvg/y1M7uM5R/IuVMnuD4J5DiJlLbiqo4g01mR/F+gZbs8vdqFUxKotQ77amPXlujHw==
+  dependencies:
+    "@healerlab/vue3-simple-otp-input" "^0.0.5"
+
+"@healerlab/vue3-simple-otp-input@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.9.tgz#1c9caf9ab231640e7e7de29f8e2d4235cc2fb600"
+  integrity sha512-joK5kc4fqxq2XmX2K8ZKrzE+SrKQgESK/8+W93A1xrW2Jmvzi8AcMMKwE+6OH7Hftv2Ns12Hje/Ln1yAU6dDDQ==
+  dependencies:
+    "@healerlab/vue3-simple-otp-input" "^0.0.8"
+
 "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"