Add material select

apps/showcase/doc/inputtext/FloatLabelDoc.vue

@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" autocomplete="off" />
+            <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -36,7 +36,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel variant="in">
-    <InputText id="in_label" v-model="value2" />
+    <InputText id="in_label" v-model="value2" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -54,7 +54,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" />
+            <InputText id="in_label" v-model="value2" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -86,7 +86,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <InputText id="in_label" v-model="value2" />
+            <InputText id="in_label" v-model="value2" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 

apps/showcase/doc/select/FloatLabelDoc.vue

@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -43,7 +43,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel class="w-full md:w-56" variant="in">
-    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+    <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -61,7 +61,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -100,7 +100,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel class="w-full md:w-56" variant="in">
-            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" />
+            <Select v-model="value2" inputId="in_label" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 

apps/showcase/doc/select/IftaLabelDoc.vue

@@ -4,7 +4,7 @@
     </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" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="dd-city">City</label>
         </IftaLabel>
     </div>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
+    <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
     <label for="dd-city">City</label>
 </IftaLabel>
 `,
@@ -34,7 +34,7 @@ export default {
 <template>
     <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" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="dd-city">City</label>
         </IftaLabel>
     </div>
@@ -61,7 +61,7 @@ export default {
 <template>
     <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" />
+            <Select v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" variant="filled" />
             <label for="dd-city">City</label>
         </IftaLabel>
     </div>

apps/showcase/doc/select/InvalidDoc.vue

@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null" class="w-full md:w-56" />
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,7 +13,8 @@
 export default {
     data() {
         return {
-            selectedCity: null,
+            selectedCity1: null,
+            selectedCity2: null,
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -22,12 +24,14 @@ export default {
             ],
             code: {
                 basic: `
-<Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null"  class="w-full md:w-56" />
+<Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+<Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null"  class="w-full md:w-56" />
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
     </div>
 </template>
 
@@ -35,7 +39,8 @@ export default {
 export default {
     data() {
         return {
-            selectedCity: null,
+            selectedCity1: null,
+            selectedCity2: null,
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -50,15 +55,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex flex-wrap justify-center gap-4">
-        <Select v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="selectedCity === null"  class="w-full md:w-56" />
+        <Select v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity1" class="w-full md:w-56" />
+        <Select v-model="selectedCity2" :options="cities" optionLabel="name" placeholder="Select a City" :invalid="!selectedCity2" class="w-full md:w-56" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const selectedCity = ref();
+const selectedCity1 = ref(null);
+const selectedCity2 = ref(null);
 const cities = ref([
     { name: 'New York', code: 'NY' },
     { name: 'Rome', code: 'RM' },

apps/showcase/pages/select/index.vue

@@ -82,6 +82,11 @@ export default {
                     label: 'Lazy Virtual Scroll',
                     component: LazyVirtualScrollDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -92,11 +97,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',

packages/primevue/src/inputtext/style/InputTextStyle.js

@@ -37,6 +37,10 @@ const theme = ({ dt }) => `
     background: ${dt('inputtext.filled.background')};
 }
 
+.p-inputtext.p-variant-filled:enabled:hover {
+    border-color: ${dt('inputtext.filled.hover.background')};
+}
+
 .p-inputtext.p-variant-filled:enabled:focus {
     background: ${dt('inputtext.filled.focus.background')};
 }

packages/primevue/src/select/style/SelectStyle.js

@@ -30,7 +30,11 @@ const theme = ({ dt }) => `
     background: ${dt('select.filled.background')};
 }
 
-.p-select.p-variant-filled.p-focus {
+.p-select.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('select.filled.hover.background')};
+}
+
+.p-select.p-variant-filled:not(.p-disabled).p-focus {
     background: ${dt('select.filled.focus.background')};
 }
 

packages/themes/src/presets/material/select/index.js

@@ -3,6 +3,7 @@ export default {
         background: '{form.field.background}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
+        filledHoverBackground: '{form.field.filled.hover.background}',
         filledFocusBackground: '{form.field.filled.focus.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
@@ -69,5 +70,49 @@ export default {
     },
     emptyMessage: {
         padding: '{list.option.padding}'
-    }
+    },
+    style: ({ dt }) => `
+.p-select.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('select.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.border.color')}, ${dt('select.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+
+.p-select.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('select.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.hover.border.color')}, ${dt('select.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-select.p-variant-filled:not(.p-disabled).p-focus {
+    outline: 0 none;
+    background: ${dt('select.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.border.color')}, ${dt('select.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-select.p-variant-filled:not(.p-disabled).p-focus:hover {
+    background-image: linear-gradient(to bottom, ${dt('select.focus.border.color')}, ${dt('select.focus.border.color')}), linear-gradient(to bottom, ${dt('select.hover.border.color')}, ${dt('select.hover.border.color')});
+}
+
+.p-select.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')}), linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')});
+}
+
+.p-select.p-variant-filled.p-invalid:not(.p-disabled).p-focus  {
+    background-image: linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')}), linear-gradient(to bottom, ${dt('select.invalid.border.color')}, ${dt('select.invalid.border.color')});
+}
+`
 };