Demo updates for Password

apps/showcase/doc/password/FloatLabelDoc.vue

@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" />
+            <Password v-model="value2" inputId="in_label" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -36,7 +36,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel variant="in">
-    <Password v-model="value2" inputId="in_label" />
+    <Password v-model="value2" inputId="in_label" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -54,7 +54,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" />
+            <Password v-model="value2" inputId="in_label" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -86,7 +86,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <Password v-model="value2" inputId="in_label" />
+            <Password v-model="value2" inputId="in_label" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 

apps/showcase/doc/password/IftaLabelDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel>
-            <Password v-model="value" inputId="password" />
+            <Password v-model="value" inputId="password" variant="filled" />
             <label for="password">Password</label>
         </IftaLabel>
     </div>
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <Password v-model="value" inputId="password" />
+    <Password v-model="value" inputId="password" variant="filled" />
     <label for="password">Password</label>
 </IftaLabel>
 `,
@@ -27,7 +27,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <Password v-model="value" inputId="password" />
+            <Password v-model="value" inputId="password" variant="filled" />
             <label for="password">Password</label>
         </IftaLabel>
     </div>
@@ -47,7 +47,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <Password v-model="value" inputId="password" />
+            <Password v-model="value" inputId="password" variant="filled" />
             <label for="password">Password</label>
         </IftaLabel>
     </div>

apps/showcase/doc/password/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">
-        <Password v-model="value" :invalid="value === null" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,18 @@
 export default {
     data() {
         return {
-            value: null,
+            value1: null,
+            value2: null,
             code: {
                 basic: `
-<Password v-model="value" :invalid="value === null"  />
+<Password v-model="value1" :invalid="!value1" />
+<Password v-model="value2" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :invalid="value === null"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -28,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            value: null
+            value1: null,
+            value2: null
         }
     }
 };
@@ -36,15 +41,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <Password v-model="value" :invalid="value === null"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <Password v-model="value1" :invalid="!value1" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
 <\/script>
 `
             }

apps/showcase/pages/password/index.vue

@@ -52,6 +52,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -62,11 +67,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',