Use cn for data-p

apps/labs/doc/inputtext/SizesDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
+        <p>InputText 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">
         <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />

apps/labs/nuxt.config.js

@@ -34,15 +34,10 @@ export default defineNuxtConfig({
     runtimeConfig: {
         GITHUB_TOKEN: ''
     },
-    primevue: {
-        options: {
-            theme: 'none'
-        }
-    },
     app: {
         baseURL: baseUrl,
         head: {
-            title: 'Tailwind CSS based Vue UI Component Library',
+            title: 'Plex UI Component Library for Vue.js',
             meta: [
                 { charset: 'utf-8' },
                 { name: 'viewport', content: 'width=device-width, initial-scale=1' },

apps/labs/plex/inputtext/index.vue

@@ -22,6 +22,6 @@ const theme = ref({
         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`
+        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
 });
 </script>

packages/primevue/src/inputtext/InputText.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils/classnames';
 import { mergeProps } from 'vue';
 import BaseInputText from './BaseInputText.vue';
 
@@ -28,21 +29,12 @@ export default {
             );
         },
         dataP() {
-            const p = [];
+            return cn({
-            if (this.$invalid) {
+                invalid: this.$invalid,
-                p.push('invalid');
+                fluid: this.$fluid,
-            }
+                filled: this.$variant === 'filled',
-            if (this.size) {
+                [this.size]: this.size
-                p.push(this.size);
+            });
-            }
-            if (this.$fluid) {
-                p.push('fluid');
-            }
-            if (this.$variant === 'filled') {
-                p.push('filled');
-            }
-
-            return p.join(' ');
         }
     }
 };