From 4293c938ce6344746c0a522ac5e754c213c5f349 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 20 Sep 2024 12:28:05 +0300
Subject: [PATCH] Label support for select components

---
 .../doc/cascadeselect/FloatLabelDoc.vue       |  85 ++++--
 .../doc/cascadeselect/IftaLabelDoc.vue        | 288 ++++++++++++++++++
 .../doc/multiselect/FloatLabelDoc.vue         |  74 ++++-
 .../showcase/doc/multiselect/IftaLabelDoc.vue |  87 ++++++
 apps/showcase/doc/select/IftaLabelDoc.vue     |   4 +-
 .../showcase/doc/treeselect/FloatLabelDoc.vue |  74 ++++-
 apps/showcase/doc/treeselect/IftaLabelDoc.vue | 111 +++++++
 apps/showcase/pages/cascadeselect/index.vue   |   6 +
 apps/showcase/pages/multiselect/index.vue     |   6 +
 apps/showcase/pages/treeselect/index.vue      |   6 +
 .../src/floatlabel/style/FloatLabelStyle.js   |  10 +-
 .../src/iftalabel/style/IftaLabelStyle.js     |   5 +-
 12 files changed, 702 insertions(+), 54 deletions(-)
 create mode 100644 apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
 create mode 100644 apps/showcase/doc/multiselect/IftaLabelDoc.vue
 create mode 100644 apps/showcase/doc/treeselect/IftaLabelDoc.vue

diff --git a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
index 22f6377b3..cca0a139d 100644
--- a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/cascadeselect/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">
-        <FloatLabel>
-            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
-            <label for="cs-city">City</label>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
@@ -15,7 +25,9 @@
 export default {
     data() {
         return {
-            selectedCity: null,
+            value1: null,
+            value2: null,
+            value3: null,
             countries: [
                 {
                     name: 'Australia',
@@ -92,19 +104,37 @@ export default {
             ],
             code: {
                 basic: `
-<FloatLabel>
-    <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-        :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
-    <label for="cs-city">City</label>
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56">
+    <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="on_label">On Label</label>
 </FloatLabel>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <FloatLabel>
-            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
-            <label for="cs-city">City</label>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -113,7 +143,9 @@ export default {
 export default {
     data() {
         return {
-            selectedCity: null,
+            value1: null,
+            value2: null,
+            value3: null,
             countries: [
                 {
                     name: 'Australia',
@@ -195,11 +227,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <FloatLabel>
-            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
-            <label for="cs-city">City</label>
+    <div class="card flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value1" inputId="over_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56">
+            <CascadeSelect v-model="value3" inputId="on_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -207,7 +248,9 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const selectedCity = ref();
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
 const countries = ref([
     {
         name: 'Australia',
diff --git a/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue b/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..12ea799c3
--- /dev/null
+++ b/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
@@ -0,0 +1,288 @@
+<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 class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            code: {
+                basic: `
+<IftaLabel class="w-full md:w-56">
+    <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+    <label for="cs_city">City</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-56">
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" />
+            <label for="cs_city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/multiselect/FloatLabelDoc.vue b/apps/showcase/doc/multiselect/FloatLabelDoc.vue
index c3fe31a60..d78378fb6 100644
--- a/apps/showcase/doc/multiselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/multiselect/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-end gap-4">
         <FloatLabel class="w-full md:w-80">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="ms-cities">MultiSelect</label>
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" />
@@ -15,7 +25,9 @@
 export default {
     data() {
         return {
-            selectedCities: null,
+            value1: null,
+            value2: null,
+            value3: null,
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -26,16 +38,36 @@ export default {
             code: {
                 basic: `
 <FloatLabel class="w-full md:w-80">
-    <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-    <label for="ms-cities">MultiSelect</label>
+    <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="in">
+    <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="on">
+    <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <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 class="w-full md:w-80">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="ms-cities">MultiSelect</label>
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -44,7 +76,9 @@ export default {
 export default {
     data() {
         return {
-            selectedCities: null,
+            value1: null,
+            value2: null,
+            value3: null,
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -59,10 +93,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel class="w-full md:w-80">
-            <MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
-            <label for="ms-cities">MultiSelect</label>
+            <MultiSelect id="over_label" v-model="value1" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <MultiSelect id="on_label" v-model="value3" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -70,7 +114,9 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const selectedCities = ref();
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
 const cities = ref([
     { name: 'New York', code: 'NY' },
     { name: 'Rome', code: 'RM' },
diff --git a/apps/showcase/doc/multiselect/IftaLabelDoc.vue b/apps/showcase/doc/multiselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..207e0d25d
--- /dev/null
+++ b/apps/showcase/doc/multiselect/IftaLabelDoc.vue
@@ -0,0 +1,87 @@
+<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 class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="ms_cities">MultiSelect</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ],
+            code: {
+                basic: `
+ <IftaLabel>
+    <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <label for="ms_cities">MultiSelect</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="ms_cities">MultiSelect</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            cities: [
+                { name: 'New York', code: 'NY' },
+                { name: 'Rome', code: 'RM' },
+                { name: 'London', code: 'LDN' },
+                { name: 'Istanbul', code: 'IST' },
+                { name: 'Paris', code: 'PRS' }
+            ]
+        };
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <label for="ms_cities">MultiSelect</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/select/IftaLabelDoc.vue b/apps/showcase/doc/select/IftaLabelDoc.vue
index 054b33cba..2be02a37f 100644
--- a/apps/showcase/doc/select/IftaLabelDoc.vue
+++ b/apps/showcase/doc/select/IftaLabelDoc.vue
@@ -33,7 +33,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <IftaLabel>
+        <IftaLabel class="w-full md:w-56">
             <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">City</label>
         </IftaLabel>
@@ -60,7 +60,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <IftaLabel>
+        <IftaLabel class="w-full md:w-56">
             <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
             <label for="dd-city">City</label>
         </IftaLabel>
diff --git a/apps/showcase/doc/treeselect/FloatLabelDoc.vue b/apps/showcase/doc/treeselect/FloatLabelDoc.vue
index f6509dff7..871026e4a 100644
--- a/apps/showcase/doc/treeselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/treeselect/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-end gap-4">
         <FloatLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
-            <label>Tree Select</label>
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
@@ -18,20 +28,42 @@ export default {
     data() {
         return {
             nodes: null,
-            selectedValue: null,
+            value1: null,
+            value2: null,
+            value3: null,
             code: {
                 basic: `
 <FloatLabel class="w-full md:w-80">
-    <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
-    <label>Tree Select</label>
+    <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="in">
+    <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-80" variant="on">
+    <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+    <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 class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
-            <label>Tree Select</label>
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -43,7 +75,9 @@ export default {
     data() {
         return {
             nodes: null,
-            selectedValue: null,
+            value1: null,
+            value2: null,
+            value3: null
         }
     },
     mounted() {
@@ -54,10 +88,20 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel class="w-full md:w-80">
-            <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
-            <label>Tree Select</label>
+            <TreeSelect v-model="value1" inputId="over_label" :options="nodes" class="w-full" />
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="in">
+            <TreeSelect v-model="value2" inputId="in_label" :options="nodes" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-80" variant="on">
+            <TreeSelect v-model="value3" inputId="on_label" :options="nodes" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -67,7 +111,9 @@ import { ref, onMounted } from 'vue';
 import { NodeService } from './service/NodeService';
 
 const nodes = ref(null);
-const selectedValue = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
 
 onMounted(() => {
     NodeService.getTreeNodes().then((data) => (nodes.value = data));
diff --git a/apps/showcase/doc/treeselect/IftaLabelDoc.vue b/apps/showcase/doc/treeselect/IftaLabelDoc.vue
new file mode 100644
index 000000000..2a15c5ba0
--- /dev/null
+++ b/apps/showcase/doc/treeselect/IftaLabelDoc.vue
@@ -0,0 +1,111 @@
+<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 class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import { NodeService } from '/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+            code: {
+                basic: `
+<IftaLabel class="w-full md:w-80">
+    <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+    <label for="t_file">File</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script>
+import { NodeService } from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedValue: null,
+        }
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes     = data));
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel class="w-full md:w-80">
+            <TreeSelect v-model="selectedValue" inputId="t_file" :options="nodes" class="w-full" />
+            <label for="t_file">File</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>
+`,
+                data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+            }
+        };
+    },
+    mounted() {
+        NodeService.getTreeNodes().then((data) => (this.nodes = data));
+    }
+};
+</script>
diff --git a/apps/showcase/pages/cascadeselect/index.vue b/apps/showcase/pages/cascadeselect/index.vue
index 4b04636ed..20b2d79cc 100644
--- a/apps/showcase/pages/cascadeselect/index.vue
+++ b/apps/showcase/pages/cascadeselect/index.vue
@@ -16,6 +16,7 @@ import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
 import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
 import FilledDoc from '@/doc/cascadeselect/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/cascadeselect/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
 import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
@@ -52,6 +53,11 @@ export default {
                     label: 'Float Label',
                     component: FloatLabelDoc
                 },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',
diff --git a/apps/showcase/pages/multiselect/index.vue b/apps/showcase/pages/multiselect/index.vue
index 9e4340533..7c538e089 100755
--- a/apps/showcase/pages/multiselect/index.vue
+++ b/apps/showcase/pages/multiselect/index.vue
@@ -19,6 +19,7 @@ import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
 import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
 import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
 import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
+import IftaLabelDoc from '@/doc/multiselect/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
 import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
@@ -76,6 +77,11 @@ export default {
                     label: 'Float Label',
                     component: FloatLabelDoc
                 },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',
diff --git a/apps/showcase/pages/treeselect/index.vue b/apps/showcase/pages/treeselect/index.vue
index e965c0cbf..b6c5c2284 100644
--- a/apps/showcase/pages/treeselect/index.vue
+++ b/apps/showcase/pages/treeselect/index.vue
@@ -17,6 +17,7 @@ import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
 import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
 import FilledDoc from '@/doc/treeselect/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
+import IftaLabelDoc from '@/doc/treeselect/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
 import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
 import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
@@ -52,6 +53,11 @@ export default {
                     label: 'Float Label',
                     component: FloatLabelDoc
                 },
+                {
+                    id: 'iftalabel',
+                    label: 'Ifta Label',
+                    component: IftaLabelDoc
+                },
                 {
                     id: 'filled',
                     label: 'Filled',
diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
index c9fa64b83..e2738b36a 100644
--- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
+++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
@@ -73,7 +73,10 @@ const theme = ({ dt }) => `
 
 .p-floatlabel-in .p-inputtext,
 .p-floatlabel-in .p-textarea,
-.p-floatlabel-in .p-select-label {
+.p-floatlabel-in .p-select-label,
+.p-floatlabel-in .p-multiselect-label,
+.p-floatlabel-in .p-cascadeselect-label,
+.p-floatlabel-in .p-treeselect-label {
     padding-top: ${dt('floatlabel.in.input.padding.top')};
 }
 
@@ -88,7 +91,10 @@ const theme = ({ dt }) => `
 }
 
 .p-floatlabel-on .p-inputtext,
-.p-floatlabel-on .p-select-label {
+.p-floatlabel-on .p-select-label,
+.p-floatlabel-on .p-multiselect-label,
+.p-floatlabel-on .p-cascadeselect-label,
+.p-floatlabel-on .p-treeselect-label {
     padding-top: ${dt('floatlabel.on.input.padding.top')};
     padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
 }
diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
index 30f830879..75620fbb5 100644
--- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
+++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
@@ -22,7 +22,10 @@ const theme = ({ dt }) => `
 
 .p-iftalabel .p-inputtext,
 .p-iftalabel .p-textarea,
-.p-iftalabel .p-select-label {
+.p-iftalabel .p-select-label,
+.p-iftalabel .p-multiselect-label,
+.p-iftalabel .p-cascadeselect-label,
+.p-iftalabel .p-treeselect-label {
     padding-top: ${dt('iftalabel.input.padding.top')};
 }