Skip to content

Commit 8bd6b0a

Browse files
authored
Merge pull request #13 from healerlab/features/docs
feat: update separator support and resolve issue
2 parents ed52efd + e2f45d9 commit 8bd6b0a

File tree

8 files changed

+99
-43
lines changed

8 files changed

+99
-43
lines changed

README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ const handleFinish = (otpCode: string) => {
4949
const handleChange = (otpCode: string) => {
5050
// write logic with changed code
5151
}
52+
53+
const getCodeWithSeparator = () => {
54+
// get code with separator
55+
// otpInput?.value?.genResultWithSeparator()
56+
}
5257
</script>
5358
```
5459

@@ -64,6 +69,8 @@ Use the component in your template:
6469
:outlined="true"
6570
ref="otpInput"
6671
:only-number="true"
72+
separator="-" // separator support
73+
separatorType="middle" // middle or all
6774
/>
6875
```
6976

@@ -88,6 +95,11 @@ This is minimal style for your input, you can change it to match your use-case:
8895
outline: none
8996
}
9097
}
98+
99+
:deep(span) {
100+
padding: 0 0px 0 10px;
101+
font-size: 30px;
102+
}
91103
}
92104
</style>
93105
```

docs/.vitepress/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default defineConfig({
1919
{ text: 'Home', link: '/' },
2020
{ text: 'Get Started', link: '/usage-examples' },
2121
{
22-
text: '0.0.5',
22+
text: '0.0.8',
2323
items: [
2424
{
2525
text: 'Changelog',

docs/api.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ This page demonstrates usage of props and events provided by HOtpInput.
2525
| inputClassName | `String` | `null` | The class name to use for each input element. |
2626
| onChange | `Function` | `null` | Callback event that return OTP code when we made a change in inputs. `(otpCode: string)` |
2727
| onFinish | `Function` | `null` | Callback event that return OTP code when we fully typed all inputs. `(otpCode: string)` |
28+
| separator | `String` | `null` | Separator to be rendered. |
29+
| separatorType | `String` | `middle` | Default separator position if separator is not null |
2830

2931
See the [Vue3 Simple OTP Input](https://www.npmjs.com/package/@healerlab/vue3-simple-otp-input) package for more information.
3032

docs/usage-examples.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ Use the component in your template:
5656
:outlined="true"
5757
ref="otpInput"
5858
:only-number="true"
59+
separator="-"
60+
separatorType="middle"
5961
/>
6062
```
6163

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@healerlab/vue3-simple-otp-input",
33
"private": false,
4-
"version": "0.0.8",
4+
"version": "0.0.9",
55
"description": "Powerful, lightweight, and reusable OTP input component for Vue 3",
66
"main": "./dist/h-otp-input.umd.cjs",
77
"module": "./dist/h-otp-input.js",
@@ -70,6 +70,6 @@
7070
"url": "https://github.com/healerlab/vue3-simple-otp-input.git"
7171
},
7272
"dependencies": {
73-
"@healerlab/vue3-simple-otp-input": "^0.0.5"
73+
"@healerlab/vue3-simple-otp-input": "^0.0.8"
7474
}
7575
}

src/App.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
:outlined="true"
1111
ref="otpInput"
1212
:only-number="true"
13+
autocomplete="off"
14+
separator="-"
15+
separatorType="middle"
1316
/>
1417
</div>
1518
</template>
@@ -19,14 +22,21 @@ const otpInput = ref<any>(null)
1922
import HOtpInput from './components/HOtpInput.vue'
2023
const handleComplete = (otpCode: string) => {
2124
console.log(111, otpCode);
25+
// getInputWithSeparator()
2226
}
2327
2428
const handleChange = (otpCode: string) => {
2529
console.log(222, otpCode);
2630
}
31+
32+
// const getInputWithSeparator = () => {
33+
// console.log(otpInput?.value?.genResultWithSeparator());
34+
// }
2735
</script>
2836
<style lang="scss" scoped>
2937
.otp-input {
38+
display: flex;
39+
align-items: center;
3040
:deep(input) {
3141
outline: none;
3242
width: 30px;
@@ -42,5 +52,10 @@ const handleChange = (otpCode: string) => {
4252
outline: none
4353
}
4454
}
55+
56+
:deep(span) {
57+
padding: 0 0px 0 10px;
58+
font-size: 30px;
59+
}
4560
}
4661
</style>

src/components/HOtpInput.vue

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
<template>
22
<div class="hl-input-container m-auto text-center" :class="wrapperClassName">
3-
<input
4-
v-for="(input, index) in length"
5-
:element-num="input"
6-
:id="generateInputId(index)"
7-
:ref="(el) => generateRef(index, el)"
8-
:key="index"
9-
v-model="inputValues[index]"
10-
:type="type"
11-
maxlength="1"
12-
:style="{
13-
borderBottom: hlBorderColor(index),
14-
color: fontColor,
15-
...conditionClass(index)
16-
}"
17-
:class="inputClassName"
18-
:disabled="disabled"
19-
:readonly="readonly"
20-
contenteditable="true"
21-
@keydown="(e: KeyboardEvent) => handleKeydown(e)"
22-
@keyup="handleInputFocus(index)"
23-
@paste.prevent="handlePastedValues"
24-
@input="returnFullString()"
25-
@focus="handleFocus(index)"
26-
/>
3+
<template v-for="(input, index) in length" :key="index">
4+
<input
5+
:element-num="input"
6+
:id="generateInputId(index)"
7+
:ref="(el) => generateRef(index, el)"
8+
v-model="inputValues[index]"
9+
:type="type"
10+
maxlength="1"
11+
:style="{
12+
borderBottom: hlBorderColor(index),
13+
color: fontColor,
14+
...conditionClass(index)
15+
}"
16+
:class="inputClassName"
17+
:disabled="disabled"
18+
:readonly="readonly"
19+
contenteditable="true"
20+
@keydown="(e: KeyboardEvent) => handleKeydown(e)"
21+
@keyup="handleInputFocus(index)"
22+
@paste.prevent="handlePastedValues"
23+
@input="returnFullString()"
24+
@focus="handleFocus(index)"
25+
:autocomplete="autocomplete"
26+
/>
27+
<div v-if="separator && checkSeparatorType(index)" class="hl-separator"><span>{{ separator }}</span></div>
28+
</template>
2729
</div>
2830
</template>
2931

@@ -93,6 +95,20 @@ const props = defineProps({
9395
inputClassName: {
9496
type: String,
9597
default: ""
98+
},
99+
autocomplete: {
100+
type: [String],
101+
default: 'off'
102+
},
103+
separator: {
104+
type: String,
105+
default: ''
106+
},
107+
separatorType: {
108+
type: String as PropType<"middle" | "all">,
109+
default: "middle",
110+
validator: (value: string) =>
111+
["middle", "all"].includes(value),
96112
}
97113
})
98114
@@ -105,6 +121,14 @@ watch(
105121
}
106122
)
107123
124+
const checkSeparatorType = (index: number) => {
125+
if (props.separatorType === 'middle') {
126+
return index === props.length / 2 -1
127+
} else {
128+
return index < props.length - 1
129+
}
130+
}
131+
108132
const inputRefs: any = {}
109133
const inputValues = ref([])
110134
const currentActiveIndex = ref(-1)
@@ -116,10 +140,6 @@ const clear = () => {
116140
currentActiveIndex.value = -1
117141
}
118142
119-
defineExpose({
120-
clear
121-
});
122-
123143
const handleKeydown = (event: KeyboardEvent) => {
124144
if (!props.onlyNumber) {
125145
return
@@ -205,6 +225,18 @@ const returnFullString = () => {
205225
}
206226
}
207227
228+
const genResultWithSeparator = () => {
229+
const data = inputValues.value.join('')
230+
if (!props.separator) return data
231+
if (props.separatorType === 'middle') {
232+
const newArr = data.split('')
233+
newArr.splice(props.length / 2, 0, props.separator)
234+
return newArr.join('')
235+
} else {
236+
return data.split('').join(props.separator)
237+
}
238+
}
239+
208240
onMounted(() => {
209241
if (props.autoFocus) {
210242
inputRefs && inputRefs[0].focus()
@@ -231,4 +263,9 @@ const outlineFocusClass = (isFocus: boolean) => {
231263
}
232264
return 'none'
233265
}
266+
267+
defineExpose({
268+
clear,
269+
genResultWithSeparator
270+
});
234271
</script>

yarn.lock

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -271,18 +271,6 @@
271271
resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
272272
integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
273273

274-
"@healerlab/vue3-simple-otp-input@^0.0.4":
275-
version "0.0.4"
276-
resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.4.tgz#46fb48ddaf07773cf955909e49aa4d20fb8089e3"
277-
integrity sha512-Pmb3bB99MCaB8yd7Jv7sijrIYWbXVuoLF8GQn7mA2yo5J7guTm9u1dJnq+nDNxWm2f9v7xQlJbAWwzs7h64/YA==
278-
279-
"@healerlab/vue3-simple-otp-input@^0.0.5":
280-
version "0.0.5"
281-
resolved "https://registry.yarnpkg.com/@healerlab/vue3-simple-otp-input/-/vue3-simple-otp-input-0.0.5.tgz#f491c01b3f45c47068de703b794a2fe5a04fd059"
282-
integrity sha512-qKvlbAgfAzuORsw2migjYBSUh2iWvScDfja51IGWWtbplSuIBVWwvCttY4JB1+eavR/GrOhiwXDBSa4Esd6bug==
283-
dependencies:
284-
"@healerlab/vue3-simple-otp-input" "^0.0.4"
285-
286274
"@jridgewell/sourcemap-codec@^1.4.15":
287275
version "1.4.15"
288276
resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"

0 commit comments

Comments
 (0)