From 920765f171343b81624f8467b07bef22b37bd4a1 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 1 Oct 2024 12:38:05 +0300
Subject: [PATCH] KeyFilter demos added

---
 apps/showcase/assets/menu/menu.json           |   5 +
 .../doc/keyfilter/AccessibilityDoc.vue        |   5 +
 apps/showcase/doc/keyfilter/ImportDoc.vue     |  20 +++
 apps/showcase/doc/keyfilter/PresetsDoc.vue    | 155 ++++++++++++++++++
 apps/showcase/doc/keyfilter/RegexDoc.vue      |  79 +++++++++
 apps/showcase/doc/keyfilter/RegexWordDoc.vue  |  63 +++++++
 apps/showcase/pages/keyfilter/index.vue       |  45 +++++
 7 files changed, 372 insertions(+)
 create mode 100644 apps/showcase/doc/keyfilter/AccessibilityDoc.vue
 create mode 100644 apps/showcase/doc/keyfilter/ImportDoc.vue
 create mode 100644 apps/showcase/doc/keyfilter/PresetsDoc.vue
 create mode 100644 apps/showcase/doc/keyfilter/RegexDoc.vue
 create mode 100644 apps/showcase/doc/keyfilter/RegexWordDoc.vue
 create mode 100644 apps/showcase/pages/keyfilter/index.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index d1d6512b1..7ecbd3729 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -129,6 +129,11 @@
                             "name": "InputText",
                             "to": "/inputtext"
                         },
+                        {
+                            "name": "KeyFilter",
+                            "to": "/keyfilter",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "Knob",
                             "to": "/knob"
diff --git a/apps/showcase/doc/keyfilter/AccessibilityDoc.vue b/apps/showcase/doc/keyfilter/AccessibilityDoc.vue
new file mode 100644
index 000000000..eecc56bf9
--- /dev/null
+++ b/apps/showcase/doc/keyfilter/AccessibilityDoc.vue
@@ -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>
diff --git a/apps/showcase/doc/keyfilter/ImportDoc.vue b/apps/showcase/doc/keyfilter/ImportDoc.vue
new file mode 100644
index 000000000..6b5c362cb
--- /dev/null
+++ b/apps/showcase/doc/keyfilter/ImportDoc.vue
@@ -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>
diff --git a/apps/showcase/doc/keyfilter/PresetsDoc.vue b/apps/showcase/doc/keyfilter/PresetsDoc.vue
new file mode 100644
index 000000000..1c6bf0b5e
--- /dev/null
+++ b/apps/showcase/doc/keyfilter/PresetsDoc.vue
@@ -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>
diff --git a/apps/showcase/doc/keyfilter/RegexDoc.vue b/apps/showcase/doc/keyfilter/RegexDoc.vue
new file mode 100644
index 000000000..16632f13d
--- /dev/null
+++ b/apps/showcase/doc/keyfilter/RegexDoc.vue
@@ -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 &lt; &gt; * ! </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 &lt; &gt; * ! </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 &lt; &gt; * ! </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>
diff --git a/apps/showcase/doc/keyfilter/RegexWordDoc.vue b/apps/showcase/doc/keyfilter/RegexWordDoc.vue
new file mode 100644
index 000000000..feb2d1255
--- /dev/null
+++ b/apps/showcase/doc/keyfilter/RegexWordDoc.vue
@@ -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>
diff --git a/apps/showcase/pages/keyfilter/index.vue b/apps/showcase/pages/keyfilter/index.vue
new file mode 100644
index 000000000..89499616c
--- /dev/null
+++ b/apps/showcase/pages/keyfilter/index.vue
@@ -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>