KeyFilter demos added
tugcekucukoglu
parent
b2bbbe2135
commit
920765f171
|
|
@ -129,6 +129,11 @@
|
||||||
"name": "InputText",
|
"name": "InputText",
|
||||||
"to": "/inputtext"
|
"to": "/inputtext"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "KeyFilter",
|
||||||
|
"to": "/keyfilter",
|
||||||
|
"badge": "NEW"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Knob",
|
"name": "Knob",
|
||||||
"to": "/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