From 4baef3a58d7961df0413b518ec3432acac2a8c3a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Sep 2024 23:59:00 +0300
Subject: [PATCH] Material InputMask

---
 apps/showcase/doc/inputmask/FloatLabelDoc.vue |  8 +++---
 apps/showcase/doc/inputmask/IftaLabelDoc.vue  |  8 +++---
 apps/showcase/doc/inputmask/InvalidDoc.vue    | 27 ++++++++++++-------
 apps/showcase/pages/inputmask/index.vue       | 10 +++----
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/showcase/doc/inputmask/FloatLabelDoc.vue b/apps/showcase/doc/inputmask/FloatLabelDoc.vue
index 367a4f599..a0dc4a6b1 100644
--- a/apps/showcase/doc/inputmask/FloatLabelDoc.vue
+++ b/apps/showcase/doc/inputmask/FloatLabelDoc.vue
@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" />
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -36,7 +36,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel variant="in">
-    <InputMask id="in_label" v-model="value2" mask="999-99-9999" />
+    <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -54,7 +54,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" />
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -87,7 +87,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputMask id="in_label" v-model="value2" mask="999-99-9999" />
+            <InputMask id="in_label" v-model="value2" mask="999-99-9999" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
diff --git a/apps/showcase/doc/inputmask/IftaLabelDoc.vue b/apps/showcase/doc/inputmask/IftaLabelDoc.vue
index b45fc3ac4..ee7072fcf 100644
--- a/apps/showcase/doc/inputmask/IftaLabelDoc.vue
+++ b/apps/showcase/doc/inputmask/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" autocomplete="off" />
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" autocomplete="off" variant="filled" />
             <label for="ssn">SSN</label>
         </IftaLabel>
     </div>
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <InputMask id="ssn" v-model="value" mask="999-99-9999" />
+    <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
     <label for="ssn">SSN</label>
 </IftaLabel>
 `,
@@ -27,7 +27,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" />
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
             <label for="ssn">SSN</label>
         </IftaLabel>
     </div>
@@ -47,7 +47,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputMask id="ssn" v-model="value" mask="999-99-9999" />
+            <InputMask id="ssn" v-model="value" mask="999-99-9999" variant="filled" />
             <label for="ssn">SSN</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/inputmask/InvalidDoc.vue b/apps/showcase/doc/inputmask/InvalidDoc.vue
index ec01fe702..ac7b3e6e3 100644
--- a/apps/showcase/doc/inputmask/InvalidDoc.vue
+++ b/apps/showcase/doc/inputmask/InvalidDoc.vue
@@ -2,8 +2,9 @@
     <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 justify-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" :invalid="value === ''" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,18 @@
 export default {
     data() {
         return {
-            value: '',
+            value1: '',
+            value2: '',
             code: {
                 basic: `
-<InputMask v-model="value" mask="99-999999" placeholder="99-999999" :invalid="value ===''"  />
+<InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+<InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" :invalid="value ===''"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
     </div>
 </template>
 
@@ -28,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            value: ''
+            value1: '',
+            value2: ''
         }
     }
 }
@@ -37,15 +42,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" :invalid="value ===''"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
     </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('');
+const value1 = ref('');
+const value2 = ref('');
 <\/script>
         `
             }
diff --git a/apps/showcase/pages/inputmask/index.vue b/apps/showcase/pages/inputmask/index.vue
index a05ca10fc..6b9deae3b 100755
--- a/apps/showcase/pages/inputmask/index.vue
+++ b/apps/showcase/pages/inputmask/index.vue
@@ -54,6 +54,11 @@ export default {
                     label: 'SlotChar',
                     component: SlotCharDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -64,11 +69,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',