From 4a7675890ae4a62fb7f207da195aa99ec3a46c3a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Sep 2024 01:38:06 +0300
Subject: [PATCH] Material MultiSelect

---
 .../doc/multiselect/FloatLabelDoc.vue         |  8 +--
 .../showcase/doc/multiselect/IftaLabelDoc.vue |  8 +--
 apps/showcase/doc/multiselect/InvalidDoc.vue  | 36 +++++++++-----
 apps/showcase/pages/multiselect/index.vue     | 10 ++--
 .../src/floatlabel/style/FloatLabelStyle.js   |  2 +-
 .../src/iftalabel/style/IftaLabelStyle.js     |  2 +-
 .../src/multiselect/style/MultiSelectStyle.js |  4 ++
 .../src/presets/material/multiselect/index.js | 49 ++++++++++++++++++-
 8 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/apps/showcase/doc/multiselect/FloatLabelDoc.vue b/apps/showcase/doc/multiselect/FloatLabelDoc.vue
index d78378fb6..e9adce82e 100644
--- a/apps/showcase/doc/multiselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/multiselect/FloatLabelDoc.vue
@@ -9,7 +9,7 @@
         </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" />
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" 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-80" variant="in">
-    <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" 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-80" variant="in">
-            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" 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-80" variant="in">
-            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+            <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
diff --git a/apps/showcase/doc/multiselect/IftaLabelDoc.vue b/apps/showcase/doc/multiselect/IftaLabelDoc.vue
index d449d9c29..d4b417236 100644
--- a/apps/showcase/doc/multiselect/IftaLabelDoc.vue
+++ b/apps/showcase/doc/multiselect/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </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" />
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
             <label for="ms_cities">Cities</label>
         </IftaLabel>
     </div>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" />
+    <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
     <label for="ms_cities">Cities</label>
 </IftaLabel>
 `,
@@ -34,7 +34,7 @@ export default {
 <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" />
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
             <label for="ms_cities">Cities</label>
         </IftaLabel>
     </div>
@@ -61,7 +61,7 @@ export default {
 <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" />
+            <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full"variant="filled" />
             <label for="ms_cities">Cities</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/multiselect/InvalidDoc.vue b/apps/showcase/doc/multiselect/InvalidDoc.vue
index 8e0b0a991..33f901399 100644
--- a/apps/showcase/doc/multiselect/InvalidDoc.vue
+++ b/apps/showcase/doc/multiselect/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">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities?.length === 0" class="w-full md:w-80" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,7 +13,8 @@
 export default {
     data() {
         return {
-            selectedCities: [],
+            selectedCities1: [],
+            selectedCities2: [],
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -22,14 +24,18 @@ export default {
             ],
             code: {
                 basic: `
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-    :maxSelectedLabels="3" :invalid="selectedCities === null"  class="w-full md:w-80" />
+<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+        :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+        :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" :invalid="selectedCities === null"  class="w-full md:w-80" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
     </div>
 </template>
 
@@ -37,7 +43,8 @@ export default {
 export default {
     data() {
         return {
-            selectedCities: [],
+            selectedCities1: [],
+            selectedCities2: [],
             cities: [
                 { name: 'New York', code: 'NY' },
                 { name: 'Rome', code: 'RM' },
@@ -52,16 +59,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities"
-            :maxSelectedLabels="3" :invalid="selectedCities === null"  class="w-full md:w-80" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
+        <MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" 
+                :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const selectedCities = ref([]);
+const selectedCities1 = ref([]);
+const selectedCities2 = ref([]);
 const cities = ref([
     { name: 'New York', code: 'NY' },
     { name: 'Rome', code: 'RM' },
diff --git a/apps/showcase/pages/multiselect/index.vue b/apps/showcase/pages/multiselect/index.vue
index 7c538e089..3b2ca60ad 100755
--- a/apps/showcase/pages/multiselect/index.vue
+++ b/apps/showcase/pages/multiselect/index.vue
@@ -72,6 +72,11 @@ export default {
                     label: 'VirtualScroll',
                     component: VirtualScrollDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -82,11 +87,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
index 197132d0d..0c718325c 100644
--- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
+++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
@@ -78,7 +78,7 @@ const theme = ({ dt }) => `
 .p-floatlabel-in .p-inputtext,
 .p-floatlabel-in .p-textarea,
 .p-floatlabel-in .p-select-label,
-.p-floatlabel-in .p-multiselect-label-container,
+.p-floatlabel-in .p-multiselect-label,
 .p-floatlabel-in .p-autocomplete-input-multiple,
 .p-floatlabel-in .p-cascadeselect-label,
 .p-floatlabel-in .p-treeselect-label {
diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
index ea8aba53e..5a3bd4be4 100644
--- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
+++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
@@ -23,7 +23,7 @@ const theme = ({ dt }) => `
 .p-iftalabel .p-inputtext,
 .p-iftalabel .p-textarea,
 .p-iftalabel .p-select-label,
-.p-iftalabel .p-multiselect-label-container,
+.p-iftalabel .p-multiselect-label,
 .p-iftalabel .p-autocomplete-input-multiple,
 .p-iftalabel .p-cascadeselect-label,
 .p-iftalabel .p-treeselect-label {
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index 6820d06a8..457287a39 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -31,6 +31,10 @@ const theme = ({ dt }) => `
     background: ${dt('multiselect.filled.background')};
 }
 
+.p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('multiselect.filled.hover.background')};
+}
+
 .p-multiselect.p-variant-filled.p-focus {
     background: ${dt('multiselect.filled.focus.background')};
 }
diff --git a/packages/themes/src/presets/material/multiselect/index.js b/packages/themes/src/presets/material/multiselect/index.js
index 57ff4db09..d98e708ba 100644
--- a/packages/themes/src/presets/material/multiselect/index.js
+++ b/packages/themes/src/presets/material/multiselect/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}',
@@ -52,7 +53,7 @@ export default {
         selectedFocusColor: '{list.option.selected.focus.color}',
         padding: '{list.option.padding}',
         borderRadius: '{list.option.border.radius}',
-        gap: '0.5rem'
+        gap: '0.75rem'
     },
     optionGroup: {
         background: '{list.option.group.background}',
@@ -65,5 +66,49 @@ export default {
     },
     emptyMessage: {
         padding: '{list.option.padding}'
-    }
+    },
+    style: ({ dt }) => `
+.p-multiselect.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('multiselect.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.border.color')}, ${dt('multiselect.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-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('multiselect.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.hover.border.color')}, ${dt('multiselect.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    outline: 0 none;
+    background: ${dt('multiselect.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.border.color')}, ${dt('multiselect.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-multiselect.p-variant-filled:not(.p-disabled).p-focus:hover {
+    background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.hover.border.color')}, ${dt('multiselect.hover.border.color')});
+}
+
+.p-multiselect.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')});
+}
+
+.p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus  {
+    background-image: linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')});
+}
+`
 };