Label support for Select

apps/showcase/doc/select/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-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="dd-city">Select a City</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" 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,
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -26,16 +38,36 @@ export default {
             code: {
                 basic: `
 <FloatLabel class="w-full md:w-56">
-    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+    <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-    <label for="dd-city">Select a City</label>
+    <label for="over_label">Over Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56" variant="in">
+    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+    <label for="in_label">In Label</label>
+</FloatLabel>
+
+<FloatLabel class="w-full md:w-56" variant="on">
+    <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" 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-stretch gap-4">
         <FloatLabel class="w-full md:w-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="dd-city">Select a City</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="on_label">On Label</label>
         </FloatLabel>
     </div>
 </template>
@@ -44,7 +76,9 @@ export default {
 export default {
     data() {
         return {
-            selectedCity: 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-stretch gap-4">
         <FloatLabel class="w-full md:w-56">
-            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value1" inputId="over_label" :options="cities" optionLabel="name" class="w-full" />
-            <label for="dd-city">Select a City</label>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="in">
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel class="w-full md:w-56" variant="on">
+            <Select v-model="value3" inputId="on_label" :options="cities" optionLabel="name" 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 selectedCity = 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' },

apps/showcase/doc/select/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-56">
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedCity: 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>
+    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+    <label for="dd-city">City</label>
+</IftaLabel>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <IftaLabel>
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+export default {
+    data() {
+        return {
+            selectedCity: 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>
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+            <label for="dd-city">City</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+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>

apps/showcase/pages/select/index.vue

@@ -13,6 +13,7 @@ import FilledDoc from '@/doc/select/FilledDoc.vue';
 import FilterDoc from '@/doc/select/FilterDoc.vue';
 import FloatLabelDoc from '@/doc/select/FloatLabelDoc.vue';
 import GroupDoc from '@/doc/select/GroupDoc.vue';
+import IftaLabelDoc from '@/doc/select/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/select/ImportDoc.vue';
 import InvalidDoc from '@/doc/select/InvalidDoc.vue';
 import LazyVirtualScrollDoc from '@/doc/select/LazyVirtualScrollDoc.vue';
@@ -86,6 +87,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

@@ -36,10 +36,10 @@ const theme = ({ dt }) => `
 .p-floatlabel:has(textarea.p-filled) label,
 .p-floatlabel:has(.p-inputwrapper-focus) label,
 .p-floatlabel:has(.p-inputwrapper-filled) label {
-    top: ${dt('floatlabel.over.focus.top')};
+    top: ${dt('floatlabel.over.active.top')};
     transform: translateY(0);
-    font-size: ${dt('floatlabel.focus.font.size')};
+    font-size: ${dt('floatlabel.active.font.size')};
-    font-weight: ${dt('floatlabel.label.focus.font.weight')};
+    font-weight: ${dt('floatlabel.label.active.font.weight')};
 }
 
 .p-floatlabel:has(input.p-filled) label,
@@ -55,7 +55,7 @@ const theme = ({ dt }) => `
     color: ${dt('floatlabel.focus.color')};
 }
 
-.p-floatlabel .p-placeholder,
+/*.p-floatlabel .p-placeholder,
 .p-floatlabel input::placeholder,
 .p-floatlabel .p-inputtext::placeholder {
     opacity: 0;
@@ -69,10 +69,11 @@ const theme = ({ dt }) => `
     opacity: 1;
     transition-property: all;
     transition-timing-function: ease;
-}
+}*/
 
 .p-floatlabel-in .p-inputtext,
-.p-floatlabel-in .p-textarea {
+.p-floatlabel-in .p-textarea,
+.p-floatlabel-in .p-select-label {
     padding-top: ${dt('floatlabel.in.input.padding.top')};
 }
 
@@ -83,10 +84,11 @@ const theme = ({ dt }) => `
 .p-floatlabel-in:has(textarea.p-filled) label,
 .p-floatlabel-in:has(.p-inputwrapper-focus) label,
 .p-floatlabel-in:has(.p-inputwrapper-filled) label {
-    top: ${dt('floatlabel.in.focus.top')};
+    top: ${dt('floatlabel.in.active.top')};
 }
 
-.p-floatlabel-on .p-inputtext {
+.p-floatlabel-on .p-inputtext,
+.p-floatlabel-on .p-select-label {
     padding-top: ${dt('floatlabel.on.input.padding.top')};
     padding-bottom: ${dt('floatlabel.on.input.padding.bottom')};
 }
@@ -100,8 +102,8 @@ const theme = ({ dt }) => `
 .p-floatlabel-on:has(.p-inputwrapper-filled) label {
     top: 0;
     transform: translateY(-50%);
-    background: ${dt('floatlabel.on.focus.background')};
+    background: ${dt('floatlabel.on.active.background')};
-    padding: ${dt('floatlabel.on.focus.padding')};
+    padding: ${dt('floatlabel.on.active.padding')};
 }
 `;
 

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

@@ -21,7 +21,8 @@ const theme = ({ dt }) => `
 }
 
 .p-iftalabel .p-inputtext,
-.p-iftalabel .p-textarea {
+.p-iftalabel .p-textarea,
+.p-iftalabel .p-select-label {
     padding-top: ${dt('iftalabel.input.padding.top')};
 }
 
@@ -36,7 +37,7 @@ const theme = ({ dt }) => `
     color: ${dt('iftalabel.focus.color')};
 }
 
-.p-iftalabel .p-placeholder,
+/*.p-iftalabel .p-placeholder,
 .p-iftalabel input::placeholder,
 .p-iftalabel .p-inputtext::placeholder {
     opacity: 0;
@@ -50,7 +51,7 @@ const theme = ({ dt }) => `
     opacity: 1;
     transition-property: all;
     transition-timing-function: ease;
-}
+}*/
 `;
 
 const classes = {

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

@@ -8,13 +8,13 @@ export default {
         positionX: '{form.field.padding.x}',
         positionY: '{form.field.padding.y}',
         fontWeight: '500',
-        focus: {
+        active: {
             fontSize: '0.75rem',
             fontWeight: '400'
         }
     },
     over: {
-        focus: {
+        active: {
             top: '-1.25rem'
         }
     },
@@ -22,7 +22,7 @@ export default {
         input: {
             paddingTop: '1.5rem'
         },
-        focus: {
+        active: {
             top: '{form.field.padding.y}'
         }
     },
@@ -31,7 +31,7 @@ export default {
             paddingTop: '1rem',
             paddingBottom: '1rem'
         },
-        focus: {
+        active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'
         }

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

@@ -8,13 +8,13 @@ export default {
         positionX: '{form.field.padding.x}',
         positionY: '{form.field.padding.y}',
         fontWeight: '500',
-        focus: {
+        active: {
-            fontSize: '0.875rem',
+            fontSize: '0.75rem',
             fontWeight: '400'
         }
     },
     over: {
-        focus: {
+        active: {
             top: '-1.375rem'
         }
     },
@@ -22,7 +22,7 @@ export default {
         input: {
             paddingTop: '1.875rem'
         },
-        focus: {
+        active: {
             top: '{form.field.padding.y}'
         }
     },
@@ -31,7 +31,7 @@ export default {
             paddingTop: '1.25rem',
             paddingBottom: '1.25rem'
         },
-        focus: {
+        active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'
         }

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

@@ -8,13 +8,13 @@ export default {
         positionX: '{form.field.padding.x}',
         positionY: '{form.field.padding.y}',
         fontWeight: '500',
-        focus: {
+        active: {
             fontSize: '0.75rem',
             fontWeight: '400'
         }
     },
     over: {
-        focus: {
+        active: {
             top: '-1.25rem'
         }
     },
@@ -22,7 +22,7 @@ export default {
         input: {
             paddingTop: '1.5rem'
         },
-        focus: {
+        active: {
             top: '{form.field.padding.y}'
         }
     },
@@ -31,7 +31,7 @@ export default {
             paddingTop: '1rem',
             paddingBottom: '1rem'
         },
-        focus: {
+        active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'
         }