vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add template sample to inputotp

pull/5323/head
Cagatay Civici 2024-02-22 09:40:19 +03:00
parent 067da063a8
commit abfd15d075
3 changed files with 169 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/lib/inputotp/InputOtp.vue
View File

@ -1,20 +1,21 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<OtpInputText
v-for="i in length"
:key="i"
v-model="tokens[i - 1]"
:type="inputType"
:class="cx('input')"
maxlength="1"
:inputmode="inputMode"
@input="onInput"
@focus="onFocus"
@blur="onBlur"
@paste="onPaste"
@keydown="onKeyDown($event, i - 1)"
:pt="ptm('input')"
/>
<template v-for="i in length" :key="i">
<slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)">
<OtpInputText
:value="tokens[i - 1]"
:type="inputType"
:class="cx('input')"
:inputmode="inputMode"
@input="onInput($event, i - 1)"
@focus="onFocus($event)"
@blur="onBlur($event)"
@paste="onPaste($event)"
@keydown="onKeyDown($event)"
:pt="ptm('input')"
/>
</slot>
</template>
</div>
</template>
@ -41,6 +42,20 @@ export default {
}
},
methods: {
getTemplateAttrs(index) {
return {
value: this.tokens[index]
};
},
getTemplateEvents(index) {
return {
input: (event) => this.onInput(event, index),
keydown: (event) => this.onKeyDown(event),
focus: (event) => this.onFocus(event),
blur: (event) => this.onBlur(event),
paste: (event) => this.onPaste(event)
};
},
getPTOptions(key) {
const _ptm = key === 'root' ? this.ptmi : this.ptm;
@ -51,9 +66,15 @@ export default {
}
});
},
onInput(event) {
this.moveToNext(event);
onInput(event, index) {
this.tokens[index] = event.target.value;
this.updateModel(event);
if (event.inputType === 'deleteContentBackward') {
this.moveToPrev(event);
} else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
this.moveToNext(event);
}
},
updateModel(event) {
const newValue = this.tokens.join('');
@ -87,7 +108,7 @@ export default {
onBlur(event) {
this.$emit('blur', event);
},
onKeyDown(event, index) {
onKeyDown(event) {
const keyCode = event.keyCode;
switch (keyCode) {
@ -109,14 +130,6 @@ export default {
break;
case 8:
event.preventDefault();
this.tokens[index] = '';
this.moveToPrev(event);
this.updateModel(event);
break;
default:
if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
event.preventDefault();

124
doc/inputotp/TemplateDoc.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
`,
options: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
};
<\/script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
<\/style>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<InputOtp v-model="value">
<template #default="{ attrs, events }">
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
</template>
</InputOtp>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
<\/style>
`
}
};
}
};
</script>
<style scoped>
.custom-otp-input {
width: 40px;
font-size: 36px;
border: 0 none;
appearance: none;
text-align: center;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid var(--surface-500);
}
.custom-otp-input:focus {
outline: 0 none;
border-bottom-color: var(--primary-color);
}
</style>

6
pages/inputotp/index.vue
View File

@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
import PTComponent from '@/doc/inputotp/pt/index.vue';
import ThemingDoc from '@/doc/inputotp/theming/index.vue';
@ -35,6 +36,11 @@ export default {
label: 'Integer Only',
component: IntegerOnlyDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'accessibility',
label: 'Accessibility',