KeyFilter demos added
tugcekucukoglu
parent
b2bbbe2135
commit
920765f171
|
|
@ -129,6 +129,11 @@
|
|||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
},
|
||||
{
|
||||
"name": "KeyFilter",
|
||||
"to": "/keyfilter",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Knob",
|
||||
"to": "/knob"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<p>Refer to <PrimeVueNuxtLink to="/inputtext">InputText</PrimeVueNuxtLink> accessibility documentation for the InputText of the component.</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import KeyFilter from 'primevue/keyfilter';
|
||||
|
||||
app.directive('keyfilter', KeyFilter);
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>KeyFilter provides various presets configured with the <i>v-keyfilter</i> directive.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-3 mb-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integer" class="font-bold block mb-2"> Integer </label>
|
||||
<InputText id="integer" v-model="integer" v-keyfilter.int fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="number" class="font-bold block mb-2"> Number </label>
|
||||
<InputText id="number" v-model="number" v-keyfilter.num fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="money" class="font-bold block mb-2"> Money </label>
|
||||
<InputText id="money" v-model="money" v-keyfilter.money fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="hex" class="font-bold block mb-2"> Hex </label>
|
||||
<InputText id="hex" v-model="hex" v-keyfilter.hex fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphabetic" class="font-bold block mb-2"> Alphabetic </label>
|
||||
<InputText id="alphabetic" v-model="alphabetic" v-keyfilter.alpha fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphanumeric" class="font-bold block mb-2"> Alphanumeric </label>
|
||||
<InputText id="alphanumeric" v-model="alphanumeric" v-keyfilter.alphanum fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
integer: null,
|
||||
number: null,
|
||||
money: null,
|
||||
hex: null,
|
||||
alphabetic: null,
|
||||
alphanumeric: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputText v-keyfilter.int />
|
||||
<InputText v-keyfilter.num />
|
||||
<InputText v-keyfilter.money />
|
||||
<InputText v-keyfilter.hex />
|
||||
<InputText v-keyfilter.alpha />
|
||||
<InputText v-keyfilter.alphanum />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-3 mb-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integer" class="font-bold block mb-2"> Integer </label>
|
||||
<InputText id="integer" v-model="integer" v-keyfilter.int fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="number" class="font-bold block mb-2"> Number </label>
|
||||
<InputText id="number" v-model="number" v-keyfilter.num fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="money" class="font-bold block mb-2"> Money </label>
|
||||
<InputText id="money" v-model="money" v-keyfilter.money fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="hex" class="font-bold block mb-2"> Hex </label>
|
||||
<InputText id="hex" v-model="hex" v-keyfilter.hex fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphabetic" class="font-bold block mb-2"> Alphabetic </label>
|
||||
<InputText id="alphabetic" v-model="alphabetic" v-keyfilter.alpha fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphanumeric" class="font-bold block mb-2"> Alphanumeric </label>
|
||||
<InputText id="alphanumeric" v-model="alphanumeric" v-keyfilter.alphanum fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
integer: null,
|
||||
number: null,
|
||||
money: null,
|
||||
hex: null,
|
||||
alphabetic: null,
|
||||
alphanumeric: null
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex flex-wrap gap-3 mb-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integer" class="font-bold block mb-2"> Integer </label>
|
||||
<InputText id="integer" v-model="integer" v-keyfilter.int fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="number" class="font-bold block mb-2"> Number </label>
|
||||
<InputText id="number" v-model="number" v-keyfilter.num fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="money" class="font-bold block mb-2"> Money </label>
|
||||
<InputText id="money" v-model="money" v-keyfilter.money fluid />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="hex" class="font-bold block mb-2"> Hex </label>
|
||||
<InputText id="hex" v-model="hex" v-keyfilter.hex fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphabetic" class="font-bold block mb-2"> Alphabetic </label>
|
||||
<InputText id="alphabetic" v-model="alphabetic" v-keyfilter.alpha fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="alphanumeric" class="font-bold block mb-2"> Alphanumeric </label>
|
||||
<InputText id="alphanumeric" v-model="alphanumeric" v-keyfilter.alphanum fluid />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const integer = ref(null);
|
||||
const number = ref(null);
|
||||
const money = ref(null);
|
||||
const hex = ref(null);
|
||||
const alphabetic = ref(null);
|
||||
const alphanumeric = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In addition to the presets, a regular expression can be configured for customization of blocking a single key press.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="spacekey" class="font-bold block mb-2"> Block Space </label>
|
||||
<InputText id="spacekey" v-model="spacekey" v-keyfilter="/[^\s]/" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="chars" class="font-bold block mb-2"> Block < > * ! </label>
|
||||
<InputText id="chars" v-model="chars" v-keyfilter="/^[^<>*!]+$/" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
spacekey: null,
|
||||
chars: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputText v-model="spacekey" v-keyfilter="/[^\s]/" />
|
||||
<InputText v-model="chars" v-keyfilter="/^[^<>*!]+$/" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="spacekey" class="font-bold block mb-2"> Block Space </label>
|
||||
<InputText id="spacekey" v-model="spacekey" v-keyfilter="/[^\s]/" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="chars" class="font-bold block mb-2"> Block < > * ! </label>
|
||||
<InputText id="chars" v-model="chars" v-keyfilter="/^[^<>*!]+$/" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
spacekey: null,
|
||||
chars: null
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-3">
|
||||
<div class="flex-auto">
|
||||
<label for="spacekey" class="font-bold block mb-2"> Block Space </label>
|
||||
<InputText id="spacekey" v-model="spacekey" v-keyfilter="/[^\s]/" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="chars" class="font-bold block mb-2"> Block < > * ! </label>
|
||||
<InputText id="chars" v-model="chars" v-keyfilter="/^[^<>*!]+$/" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const spacekey = ref(null);
|
||||
const chars = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>In addition to the presets, a regular expression can be used to validate the entire word using <i>validateOnly</i> option.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<div>
|
||||
<label for="numkeys" class="font-bold block mb-2"> Block Numeric (allow "+" only once at start) </label>
|
||||
<InputText id="numkeys" v-model="text" v-keyfilter="{ pattern: /^[+]?(\d{1,12})?$/, validateOnly: true }" />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: null,
|
||||
code: {
|
||||
basic: `
|
||||
<InputText v-model="text" v-keyfilter="{ pattern: /^[+]?(\d{1,12})?$/, validateOnly: true }" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div>
|
||||
<label for="numkeys" class="font-bold block mb-2"> Block Numeric (allow "+" only once at start) </label>
|
||||
<InputText id="numkeys" v-model="text" v-keyfilter="{ pattern: /^[+]?(\d{1,12})?$/, validateOnly: true }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text: null
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<div>
|
||||
<label for="numkeys" class="font-bold block mb-2"> Block Numeric (allow "+" only once at start) </label>
|
||||
<InputText id="numkeys" v-model="text" v-keyfilter="{ pattern: /^[+]?(\d{1,12})?$/, validateOnly: true }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const text = ref(null);
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<DocComponent title="Vue KeyFilter Component" header="KeyFilter" description="KeyFilter is a built-in feature of InputText to restrict user input based on a regular expression." :componentDocs="docs" :apiDocs="['KeyFilter']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/keyfilter/AccessibilityDoc.vue';
|
||||
import ImportDoc from '@/doc/keyfilter/ImportDoc.vue';
|
||||
import PresetsDoc from '@/doc/keyfilter/PresetsDoc.vue';
|
||||
import RegexDoc from '@/doc/keyfilter/RegexDoc.vue';
|
||||
import RegexWordDoc from '@/doc/keyfilter/RegexWordDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'presets',
|
||||
label: 'Presets',
|
||||
component: PresetsDoc
|
||||
},
|
||||
{
|
||||
id: 'regex',
|
||||
label: 'Regex (Single Keypress)',
|
||||
component: RegexDoc
|
||||
},
|
||||
{
|
||||
id: 'regexword',
|
||||
label: 'Regex (Whole Word)',
|
||||
component: RegexWordDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue