InputMask pt demo added
parent
9685f1b05a
commit
c1a506287b
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>InputMask is used as a controlled input with <i>v-model</i> properties.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<InputMask
|
||||||
|
id="basic"
|
||||||
|
v-model="value"
|
||||||
|
mask="99-999999"
|
||||||
|
placeholder="99-999999"
|
||||||
|
:pt="{
|
||||||
|
root: { class: 'border-teal-400' }
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: '',
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-content-center">
|
||||||
|
<InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const value = ref(null);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>{{ $attrs.description }}</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>InputMask Pass Through</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||||
|
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||||
|
import PtDoc from './PTDoc.vue';
|
||||||
|
import PTImage from './PTImage.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'pt.image',
|
||||||
|
label: 'Wireframe',
|
||||||
|
component: PTImage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt.doc.inputmask',
|
||||||
|
label: 'InputMask PT Options',
|
||||||
|
component: DocApiTable,
|
||||||
|
data: getPTOption('InputMask')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt.demo',
|
||||||
|
label: 'Demo',
|
||||||
|
component: PtDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,5 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue Mask Component" header="InputMask" description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone." :componentDocs="docs" :apiDocs="['InputMask']" />
|
<DocComponent
|
||||||
|
title="Vue Mask Component"
|
||||||
|
header="InputMask"
|
||||||
|
description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['InputMask']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -7,13 +14,14 @@ import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
|
import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
|
||||||
import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
|
import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
|
||||||
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
|
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
|
||||||
import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
|
|
||||||
import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
|
import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
|
||||||
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
|
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
|
||||||
import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
|
import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
|
||||||
import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
|
import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
|
||||||
import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
|
import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
|
||||||
import StyleDoc from '@/doc/inputmask/StyleDoc.vue';
|
import StyleDoc from '@/doc/inputmask/StyleDoc.vue';
|
||||||
|
import VeeValidateDoc from '@/doc/inputmask/form/VeeValidateDoc.vue';
|
||||||
|
import PTComponent from '@/doc/inputmask/pt/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -81,7 +89,8 @@ export default {
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
ptComponent: PTComponent
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue