Implemented InputMask

apps/labs/assets/data/menu.json

@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "InputMask",
+                    "to": "/inputmask"
+                },
                 {
                     "name": "InputText",
                     "to": "/inputtext"

apps/labs/doc/inputmask/BasicDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask is used with the <i>v-model</i> property for two-way value binding.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/DisabledDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="99-999999" placeholder="Disabled" disabled />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/FilledDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" variant="filled" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/ImportDoc.vue

@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `
+import InputMask from '@/plex/inputmask';
+`
+        };
+    }
+};
+</script>

apps/labs/doc/inputmask/InvalidDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value" mask="99-999999" placeholder="Serial Key" :invalid="!value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value" mask="99-999999" placeholder="Serial Key" :invalid="!value" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/MaskDoc.vue

@@ -0,0 +1,64 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Mask format can be a combination of the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and <i>*</i> for alphanumberic characters. In addition, formatting characters like <i>(</i>, <i>)</i> ,
+            <i>-</i> are also accepted.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap gap-4">
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+
+        <div class="flex-auto">
+            <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" fluid />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/OptionalDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/SizesDoc.vue

@@ -0,0 +1,39 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>InputMask provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <InputMask v-model="value1" placeholder="Small" size="small" mask="99-999999" />
+        <InputMask v-model="value2" placeholder="Normal" mask="99-999999" />
+        <InputMask v-model="value3" placeholder="Large" size="large" mask="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+`);
+</script>

apps/labs/doc/inputmask/SlotCharDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <InputMask v-model="value" placeholder="mm/dd/yyyy" mask="99/99/9999" slotChar="mm/dd/yyyy" />
+    </div>
+</template>
+
+<script setup>
+import InputMask from '@/plex/inputmask';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/pages/inputmask/index.vue

@@ -0,0 +1,64 @@
+<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" />
+</template>
+
+<script setup>
+import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
+import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
+import FilledDoc from '@/doc/inputmask/FilledDoc.vue';
+import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
+import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
+import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
+import OptionalDoc from '@/doc/inputmask/OptionalDoc.vue';
+import SizesDoc from '@/doc/inputmask/SizesDoc.vue';
+import SlotCharDoc from '@/doc/inputmask/SlotCharDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'mask',
+        label: 'Mask',
+        component: MaskDoc
+    },
+    {
+        id: 'optional',
+        label: 'Optional',
+        component: OptionalDoc
+    },
+    {
+        id: 'slotchar',
+        label: 'SlotChar',
+        component: SlotCharDoc
+    },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
+    {
+        id: 'sizes',
+        label: 'Sizes',
+        component: SizesDoc
+    },
+    {
+        id: 'invalid',
+        label: 'Invalid',
+        component: InvalidDoc
+    },
+    {
+        id: 'disabled',
+        label: 'Disabled',
+        component: DisabledDoc
+    }
+]);
+</script>

apps/labs/plex/inputmask/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <InputMask unstyled :pt="theme" />
+</template>
+
+<script setup>
+import InputMask from 'primevue/inputmask';
+import { ref } from 'vue';
+
+const theme = ref({
+    root: `appearance-none rounded-md outline-none
+        bg-surface-0 dark:bg-surface-950
+        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        disabled:bg-surface-200 disabled:text-surface-500 
+        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        p-invalid:border-red-400 dark:p-invalid:border-red-300
+        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
+        px-3 py-2 p-fluid:w-full
+        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
+        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
+});
+</script>