Float and Ifta label support for textarea

apps/showcase/doc/textarea/FloatLabelDoc.vue

@@ -2,10 +2,20 @@
     <DocSectionText v-bind="$attrs">
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center items-stretch gap-4">
         <FloatLabel>
-            <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" class="h-full" />
-            <label>Username</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" class="h-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" class="h-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
@@ -15,20 +25,42 @@
 export default {
     data() {
         return {
-            value: '',
+            value1: '',
+            value2: '',
+            value3: '',
             code: {
                 basic: `
 <FloatLabel>
-    <Textarea v-model="value" rows="5" cols="30" />
+    <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-    <label>Username</label>
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel variant="in">
+    <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel variant="on">
+    <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+    <label for="on_label">On Label</label>
 </FloatLabel>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
-            <Textarea v-model="value" rows="5" cols="30" />
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-            <label>Username</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -37,7 +69,9 @@ export default {
 export default {
     data() {
         return {
-            value: ''
+            value1: '',
+            value2: '',
+            value3: ''
         }
     }
 };
@@ -45,10 +79,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
-            <Textarea v-model="value" rows="5" cols="30" />
+            <Textarea id="over_label" v-model="value1" rows="5" cols="30" style="resize: none" />
-            <label>Username</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <Textarea id="over_label" v-model="value2" rows="5" cols="30" style="resize: none" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <Textarea id="over_label" v-model="value3" rows="5" cols="30" style="resize: none" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -56,7 +100,9 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('');
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
 <\/script>
 `
             }

apps/showcase/doc/textarea/IftaLabelDoc.vue

@@ -0,0 +1,66 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>IftaLabel is used to create infield top aligned labels. Visit <PrimeVueNuxtLink to="/iftalabel">IftaLabel</PrimeVueNuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            description: null,
+            code: {
+                basic: `
+<IftaLabel>
+    <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+    <label for="description">Description</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Textarea id="description" v-model="value" rows="5" cols="30" style="resize: none" />
+            <label for="description">Description</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/pages/textarea/index.vue

@@ -17,6 +17,7 @@ import BasicDoc from '@/doc/textarea/BasicDoc.vue';
 import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
 import FilledDoc from '@/doc/textarea/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc.vue';
 import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
@@ -46,6 +47,11 @@ export default {
                     label: 'Float Label',
                     component: FloatLabelDoc
                 },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',

packages/primevue/src/floatlabel/style/FloatLabelStyle.js

@@ -10,7 +10,7 @@ const theme = ({ dt }) => `
     position: absolute;
     pointer-events: none;
     top: 50%;
-    margin-top: -.5rem;
+    transform: translateY(-50%);
     transition-property: all;
     transition-timing-function: ease;
     line-height: 1;
@@ -20,8 +20,9 @@ const theme = ({ dt }) => `
     transition-duration: ${dt('floatlabel.transition.duration')};
 }
 
-.p-floatlabel:has(textarea) label {
+.p-floatlabel:has(.p-textarea) label {
-    top: 1rem;
+    top: ${dt('floatlabel.position.y')};
+    transform: translateY(0);
 }
 
 .p-floatlabel:has(.p-invalid) label {
@@ -36,7 +37,7 @@ const theme = ({ dt }) => `
 .p-floatlabel:has(.p-inputwrapper-focus) label,
 .p-floatlabel:has(.p-inputwrapper-filled) label {
     top: ${dt('floatlabel.over.focus.top')};
-    margin-top: 0;
+    transform: translateY(0);
     font-size: ${dt('floatlabel.focus.font.size')};
     font-weight: ${dt('floatlabel.label.focus.font.weight')};
 }
@@ -47,7 +48,7 @@ const theme = ({ dt }) => `
     color: ${dt('floatlabel.active.color')};
 }
 
-.p-floatlabel:has(input:focus) label ,
+.p-floatlabel:has(input:focus) label,
 .p-floatlabel:has(input:-webkit-autofill) label,
 .p-floatlabel:has(textarea:focus) label ,
 .p-floatlabel:has(.p-inputwrapper-focus) label  {
@@ -70,7 +71,8 @@ const theme = ({ dt }) => `
     transition-timing-function: ease;
 }
 
-.p-floatlabel-in .p-inputtext {
+.p-floatlabel-in .p-inputtext,
+.p-floatlabel-in .p-textarea {
     padding-top: ${dt('floatlabel.in.input.padding.top')};
 }
 

packages/primevue/src/iftalabel/style/IftaLabelStyle.js

@@ -20,14 +20,11 @@ const theme = ({ dt }) => `
     transition-duration: ${dt('iftalabel.transition.duration')};
 }
 
-.p-iftalabel .p-inputtext {
+.p-iftalabel .p-inputtext,
+.p-iftalabel .p-textarea {
     padding-top: ${dt('iftalabel.input.padding.top')};
 }
 
-.p-iftalabel:has(textarea) label {
-    top: 1rem;
-}
-
 .p-iftalabel:has(.p-invalid) label {
     color: ${dt('iftalabel.invalid.color')};
 }

packages/themes/src/presets/aura/floatlabel/index.js

@@ -6,6 +6,7 @@ export default {
         invalidColor: '{form.field.float.label.invalid.color}',
         transitionDuration: '0.2s',
         positionX: '{form.field.padding.x}',
+        positionY: '{form.field.padding.y}',
         fontWeight: '500',
         focus: {
             fontSize: '0.75rem',

packages/themes/src/presets/lara/floatlabel/index.js

@@ -6,6 +6,7 @@ export default {
         invalidColor: '{form.field.float.label.invalid.color}',
         transitionDuration: '0.2s',
         positionX: '{form.field.padding.x}',
+        positionY: '{form.field.padding.y}',
         fontWeight: '500',
         focus: {
             fontSize: '0.875rem',
@@ -14,7 +15,7 @@ export default {
     },
     over: {
         focus: {
-            top: '-1.25rem'
+            top: '-1.375rem'
         }
     },
     in: {

packages/themes/src/presets/nora/floatlabel/index.js

@@ -6,9 +6,10 @@ export default {
         invalidColor: '{form.field.float.label.invalid.color}',
         transitionDuration: '0.2s',
         positionX: '{form.field.padding.x}',
+        positionY: '{form.field.padding.y}',
         fontWeight: '500',
         focus: {
-            fontSize: '0.875rem',
+            fontSize: '0.75rem',
             fontWeight: '400'
         }
     },