InputText starter

apps/showcase/layouts/AppConfigurator.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="config-panel hidden">
         <div class="config-panel-content">
+            <div class="config-panel-settings">
+                <span class="config-panel-label">Tailwind - Aura</span>
+                <SelectButton v-model="mode" @update:modelValue="onTailwindChange" :options="modeOptions" :unselectable="false" />
+            </div>
+            <div class="border-0 border-b border-surface-200" />
             <div class="config-panel-colors">
                 <span class="config-panel-label">Primary</span>
                 <div>
@@ -33,10 +38,6 @@
                 <span class="config-panel-label">Presets</span>
                 <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
             </div>
-            <div class="config-panel-settings">
-                <span class="config-panel-label">Tailwind - Aura</span>
-                <ToggleSwitch :modelValue="tailwindActive" @update:modelValue="onTailwindChange" />
-            </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Ripple</span>
                 <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
@@ -115,7 +116,9 @@ export default {
                     name: 'ocean',
                     palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
                 }
-            ]
+            ],
+            mode: 'Styled',
+            modeOptions: ['Styled', 'Unstyled']
         };
     },
     methods: {
@@ -272,8 +275,8 @@ export default {
             this.$primevue.config.ripple = value;
         },
         onTailwindChange(value) {
-            this.$primevue.config.unstyled = value;
+            this.$primevue.config.unstyled = value !== 'Styled';
-            this.$primevue.config.pt = value ? TailwindAura : undefined;
+            this.$primevue.config.pt = value !== 'Styled' ? TailwindAura : undefined;
         },
         onPresetChange(value) {
             this.$appState.preset = value;

packages/primevue/src/inputtext/InputText.vue

@@ -1,5 +1,5 @@
 <template>
-    <input type="text" :class="cx('root')" :value="modelValue" :aria-invalid="invalid || undefined" @input="onInput" v-bind="getPTOptions('root')" />
+    <input type="text" :class="cx('root')" :value="modelValue" :aria-invalid="invalid" :data-pc-disabled="isDisabled" :data-pc-filled="filled" :data-pc-invalid="invalid" @input="onInput" v-bind="getPTOptions('root')" />
 </template>
 
 <script>
@@ -17,7 +17,7 @@ export default {
             return _ptm(key, {
                 context: {
                     filled: this.filled,
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                    disabled: this.isDisabled
                 }
             });
         },
@@ -28,6 +28,9 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
+        },
+        isDisabled() {
+            return this.$attrs.disabled || this.$attrs.disabled === '';
         }
     }
 };

packages/tailwindcss-presets/src/aura/floatlabel/index.ts

@@ -0,0 +1,28 @@
+import type { FloatLabelPassThroughOptions } from 'primevue/floatlabel';
+
+export default {
+    root: {
+        class: [
+            'block relative',
+
+            // Base Label Appearance
+            '[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+            '[&>*:last-child]:absolute',
+            '[&>*:last-child]:top-1/2',
+            '[&>*:last-child]:-translate-y-1/2',
+            '[&>*:last-child]:left-3',
+            '[&>*:last-child]:pointer-events-none',
+            '[&>*:last-child]:transition-all',
+            '[&>*:last-child]:duration-200',
+            '[&>*:last-child]:ease',
+
+            // Focus Label Appearance
+            '[&>*:last-child]:has-[:focus]:-top-3',
+            '[&>*:last-child]:has-[:focus]:text-sm',
+
+            // Filled Input Label Appearance
+            '[&>*:last-child]:has-[data-pc-filled=true]:-top-3',
+            '[&>*:last-child]:has-[data-pc-filled=true]:text-sm'
+        ]
+    }
+} as FloatLabelPassThroughOptions;

packages/tailwindcss-presets/src/aura/index.ts

@@ -1,9 +1,15 @@
 import type { PrimeVuePTOptions } from 'primevue/config';
+import floatlabel from './floatlabel';
 import global from './global';
+import inputgroup from './inputgroup';
+import inputgroupaddon from './inputgroupaddon';
 import inputtext from './inputtext';
 
 export default {
     global,
     directives: {},
-    inputtext
+    inputtext,
+    floatlabel,
+    inputgroup,
+    inputgroupaddon
 } as PrimeVuePTOptions;

packages/tailwindcss-presets/src/aura/inputgroup/index.ts

@@ -0,0 +1,22 @@
+import type { InputGroupPassThroughOptions } from 'primevue/inputgroup';
+
+export default {
+    root: {
+        class: [
+            //GRoup
+            // 'group/inputgroup',
+            'flex items-stretch w-full',
+            '[&>[data-pc-name=inputtext]]:flex-1',
+            '[&>[data-pc-name=inputtext]]:w-[1%]',
+            '[&>[data-pc-name=inputtext]]:-ml-px',
+            '[&>[data-pc-name=inputtext]]:rounded-none',
+            '[&>[data-pc-name=inputtext]]:border-0',
+            '[&>[data-pc-name=inputtext]]:border-y',
+            '[&>[data-pc-name=inputtext]]:border-l',
+            '[&>*:first-child]:has-[[data-pc-name=inputtext]]:ml-0',
+            '[&>*:first-child]:has-[[data-pc-name=inputtext]]:rounded-l-md',
+            '[&>*:last-child]:has-[[data-pc-name=inputtext]]:border-r',
+            '[&>*:last-child]:has-[[data-pc-name=inputtext]]:rounded-r-md'
+        ]
+    }
+} as InputGroupPassThroughOptions;

packages/tailwindcss-presets/src/aura/inputgroupaddon/index.ts

@@ -0,0 +1,30 @@
+import type { InputGroupAddonPassThroughOptions } from 'primevue/inputgroupaddon';
+
+export default {
+    root: {
+        class: [
+            // Flex
+            'flex items-center justify-center',
+
+            // Shape
+            'first:rounded-l-md',
+            'last:rounded-r-md',
+            'border-y',
+
+            'last:border-r',
+            'border-l',
+            'border-r-0',
+
+            // Space
+            'p-2',
+
+            // Size
+            'min-w-[2.5rem]',
+
+            // Color
+            'bg-transparent dark:bg-surface-900',
+            'text-surface-800 dark:text-white/80',
+            'border-surface-300 dark:border-surface-700'
+        ]
+    }
+} as InputGroupAddonPassThroughOptions;

packages/tailwindcss-presets/src/aura/inputtext/index.ts

@@ -6,9 +6,6 @@ export default {
             // Font
             'leading-none',
 
-            // Flex
-            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
-
             // Spacing
             'm-0',
             {
@@ -18,32 +15,27 @@ export default {
             },
 
             // Shape
-            { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+            'rounded-md',
-            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
-            { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
-            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
 
             // Colors
             'text-surface-800 dark:text-white/80',
             'placeholder:text-surface-400 dark:placeholder:text-surface-500',
-            { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
             'border',
-            { 'border-surface-300 dark:border-surface-700': !props.invalid },
+            'data-[pc-disabled=false]:bg-surface-0 dark:data-[pc-disabled=false]:bg-surface-950',
+            'data-[pc-invalid=false]:border-surface-300 dark:data-[pc-invalid=false]:border-surface-700',
 
             // Invalid State
-            'invalid:focus:ring-red-200',
+            'data-[pc-invalid=true]:focus:ring-red-200',
-            'invalid:hover:border-red-500',
+            'data-[pc-invalid=true]:hover:border-red-500',
-            { 'border-red-500 dark:border-red-400': props.invalid },
+            'data-[pc-invalid=true]:border-red-500 dark:data-[pc-invalid=true]:border-red-400',
 
             // States
-            {
+            'data-[pc-disabled=false]:hover:border-surface-400 dark:data-[pc-disabled=false]:hover:border-surface-600',
-                'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+            'data-[pc-disabled=false]:focus:outline-none data-[pc-disabled=false]:focus:outline-offset-0 data-[pc-disabled=false]:focus:ring-1 data-[pc-disabled=false]:focus:ring-primary-500 dark:data-[pc-disabled=false]:focus:ring-primary-400 data-[pc-disabled=false]:focus:z-10',
-                'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+            'data-[pc-disabled=true]:bg-surface-200 dark:data-[pc-disabled=true]:bg-surface-700 data-[pc-disabled=true]:select-none data-[pc-disabled=true]:pointer-events-none data-[pc-disabled=true]:cursor-default',
-                'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
-            },
 
             // Filled State *for FloatLabel
-            { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+            // { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
 
             // Misc
             'appearance-none',