Add filled variant support

apps/labs/doc/inputtext/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">
+        <PlexInputText v-model="value" variant="filled" />
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <PlexInputText v-model="value" variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import PlexInputText from '@/plex/inputtext';
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`);
+</script>

apps/labs/pages/inputtext/index.vue

@@ -6,6 +6,7 @@
 import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 /*import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';*/
+import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@@ -22,11 +23,16 @@ const docs = ref([
         label: 'Basic',
         component: BasicDoc
     },
+    {
+        id: 'filled',
+        label: 'Filled',
+        component: FilledDoc
+    },
     {
         id: 'sizes',
         label: 'Sizes',
         component: SizesDoc
-    }/*,
+    } /*,
     {
         id: 'helptext',
         label: 'Help Text',

apps/labs/plex/inputtext/index.vue

@@ -9,6 +9,7 @@ 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 

apps/labs/tailwind.config.js

@@ -11,6 +11,7 @@ export default {
             addVariant('p-small', '&[data-p~="small"]')
             addVariant('p-large', '&[data-p~="large"]')
             addVariant('p-fluid', '&[data-p~="fluid"]')
+            addVariant('p-filled', '&[data-p~="filled"]')
         })
     ],
     theme: {

packages/primevue/src/inputtext/InputText.vue

@@ -30,13 +30,16 @@ export default {
         dataP() {
             const p = [];
             if (this.$invalid) {
-                p.push('invalid')
+                p.push('invalid');
             }
             if (this.size) {
-                p.push(this.size)
+                p.push(this.size);
             }
             if (this.$fluid) {
-                p.push('fluid')
+                p.push('fluid');
+            }
+            if (this.$variant === 'filled') {
+                p.push('filled');
             }
 
             return p.join(' ');