Update MaskDoc.vue

pull/4899/head
tugcekucukoglu 2023-11-28 16:06:32 +03:00
parent 9ec1374534
commit 47c4cad9c5
1 changed files with 17 additions and 17 deletions

View File

@ -7,17 +7,17 @@
</DocSectionText> </DocSectionText>
<div class="card p-fluid flex flex-wrap gap-3"> <div class="card p-fluid flex flex-wrap gap-3">
<div class="flex-auto"> <div class="flex-auto">
<label for="ssn">SSN</label> <label for="ssn" class="font-bold block mb-2">SSN</label>
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="phone">Phone</label> <label for="phone" class="font-bold block mb-2">Phone</label>
<InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" /> <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="serial">Serial</label> <label for="serial" class="font-bold block mb-2">Serial</label>
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" /> <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
</div> </div>
</div> </div>
@ -34,17 +34,17 @@ export default {
code: { code: {
basic: ` basic: `
<div class="flex-auto"> <div class="flex-auto">
<label for="ssn">SSN</label> <label for="ssn" class="font-bold block mb-2">SSN</label>
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="phone">Phone</label> <label for="phone" class="font-bold block mb-2">Phone</label>
<InputMask v-model="value2" date="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" /> <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="serial">Serial</label> <label for="serial" class="font-bold block mb-2">Serial</label>
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" /> <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
</div> </div>
`, `,
@ -52,18 +52,18 @@ export default {
<template> <template>
<div class="card p-fluid flex flex-wrap gap-3"> <div class="card p-fluid flex flex-wrap gap-3">
<div class="flex-auto"> <div class="flex-auto">
<label for="ssn">SSN</label> <label for="ssn" class="font-bold block mb-2">SSN</label>
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="phone">Phone</label> <label for="phone" class="font-bold block mb-2">Phone</label>
<InputMask v-model="value2" date="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" /> <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="serial">Serial</label> <label for="serial" class="font-bold block mb-2">Serial</label>
<InputMask id="serial" v-model="value2" mask="a*-999-a999" placeholder="a*-999-a999" /> <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
</div> </div>
</div> </div>
</template> </template>
@ -79,23 +79,23 @@ export default {
} }
} }
<\/script> <\/script>
`, `,
composition: ` composition: `
<template> <template>
<div class="card p-fluid flex flex-wrap gap-3"> <div class="card p-fluid flex flex-wrap gap-3">
<div class="flex-auto"> <div class="flex-auto">
<label for="ssn">SSN</label> <label for="ssn" class="font-bold block mb-2">SSN</label>
<InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" /> <InputMask id="ssn" v-model="value1" mask="999-99-9999" placeholder="999-99-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="phone">Phone</label> <label for="phone" class="font-bold block mb-2">Phone</label>
<InputMask v-model="value2" date="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" /> <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<label for="serial">Serial</label> <label for="serial" class="font-bold block mb-2">Serial</label>
<InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" /> <InputMask id="serial" v-model="value3" mask="a*-999-a999" placeholder="a*-999-a999" />
</div> </div>
</div> </div>