From 8d4396863cd94f81d7972cca71425484ef38579c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Sep 2024 23:54:53 +0300
Subject: [PATCH] Material CascadeSelect and Chip

---
 .../doc/cascadeselect/FloatLabelDoc.vue       |  8 +--
 .../doc/cascadeselect/IftaLabelDoc.vue        |  8 +--
 .../showcase/doc/cascadeselect/InvalidDoc.vue | 44 ++++++++++++----
 apps/showcase/pages/cascadeselect/index.vue   | 10 ++--
 .../cascadeselect/style/CascadeSelectStyle.js |  6 ++-
 .../presets/material/cascadeselect/index.js   | 51 ++++++++++++++++++-
 .../themes/src/presets/material/chip/index.js | 16 +++---
 7 files changed, 109 insertions(+), 34 deletions(-)

diff --git a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
index cca0a139d..879f8dae3 100644
--- a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
@@ -9,7 +9,7 @@
         </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" />
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -110,7 +110,7 @@ export default {
 </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" />
+    <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -128,7 +128,7 @@ export default {
         </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" />
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -234,7 +234,7 @@ export default {
         </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" />
+            <CascadeSelect v-model="value2" inputId="in_label" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
diff --git a/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue b/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
index bb2fc2048..12e9c81be 100644
--- a/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
+++ b/apps/showcase/doc/cascadeselect/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </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" />
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="cs_city">City</label>
         </IftaLabel>
     </div>
@@ -93,7 +93,7 @@ export default {
             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" />
+    <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
     <label for="cs_city">City</label>
 </IftaLabel>
 `,
@@ -101,7 +101,7 @@ export default {
 <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" />
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="cs_city">City</label>
         </IftaLabel>
     </div>
@@ -195,7 +195,7 @@ export default {
 <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" />
+            <CascadeSelect v-model="selectedCity" inputId="cs_city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full" variant="filled" />
             <label for="cs_city">City</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/cascadeselect/InvalidDoc.vue b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
index 9ba5f28ea..1ac1b0b23 100644
--- a/apps/showcase/doc/cascadeselect/InvalidDoc.vue
+++ b/apps/showcase/doc/cascadeselect/InvalidDoc.vue
@@ -2,8 +2,19 @@
     <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">
-        <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect
+            v-model="selectedCity2"
+            :invalid="!selectedCity2"
+            :options="countries"
+            optionLabel="cname"
+            optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']"
+            class="w-full sm:w-56"
+            placeholder="Select a City"
+            variant="filled"
+        />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,7 +23,8 @@
 export default {
     data() {
         return {
-            selectedCity: null,
+            selectedCity1: null,
+            selectedCity2: null,
             countries: [
                 {
                     name: 'Australia',
@@ -89,14 +101,20 @@ export default {
             ],
             code: {
                 basic: `
-<CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+<div class="card flex flex-wrap justify-center gap-4">
+    <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+    <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+        :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
+</div>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
             :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
     </div>
 </template>
 
@@ -104,7 +122,8 @@ export default {
 export default {
     data() {
         return {
-            selectedCity: null,
+            selectedCity1: null,
+            selectedCity2: null,
             countries: [
                 {
                     name: 'Australia',
@@ -186,16 +205,19 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :invalid="selectedCity === null"  :options="countries" optionLabel="cname" optionGroupLabel="name"
+    <div class="card flex flex-wrap justify-center gap-4">
+        <CascadeSelect v-model="selectedCity1" :invalid="!selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
             :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity2" :invalid="!selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const selectedCity = ref();
+const selectedCity1 = ref(null);
+const selectedCity2 = ref(null);
 const countries = ref([
     {
         name: 'Australia',
diff --git a/apps/showcase/pages/cascadeselect/index.vue b/apps/showcase/pages/cascadeselect/index.vue
index 20b2d79cc..962ffdf43 100644
--- a/apps/showcase/pages/cascadeselect/index.vue
+++ b/apps/showcase/pages/cascadeselect/index.vue
@@ -48,6 +48,11 @@ export default {
                     label: 'Loading State',
                     component: LoadingStateDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -58,11 +63,6 @@ export default {
                     label: 'Ifta Label',
                     component: IftaLabelDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index eb0629b44..19b518a04 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -24,13 +24,17 @@ const theme = ({ dt }) => `
     border-color: ${dt('cascadeselect.focus.border.color')};
     box-shadow: ${dt('cascadeselect.focus.ring.shadow')};
     outline: ${dt('cascadeselect.focus.ring.width')} ${dt('cascadeselect.focus.ring.style')} ${dt('cascadeselect.focus.ring.color')};
-    outline-offset: ${dt('multiscascadeselectelect.focus.ring.offset')};
+    outline-offset: ${dt('cascadeselect.focus.ring.offset')};
 }
 
 .p-cascadeselect.p-variant-filled {
     background: ${dt('cascadeselect.filled.background')};
 }
 
+.p-cascadeselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('cascadeselect.filled.hover.background')};
+}
+
 .p-cascadeselect.p-variant-filled.p-focus {
     background: ${dt('cascadeselect.filled.focus.background')};
 }
diff --git a/packages/themes/src/presets/material/cascadeselect/index.js b/packages/themes/src/presets/material/cascadeselect/index.js
index 3e1b10f51..948865679 100644
--- a/packages/themes/src/presets/material/cascadeselect/index.js
+++ b/packages/themes/src/presets/material/cascadeselect/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}',
@@ -54,5 +55,53 @@ export default {
             focusColor: '{list.option.icon.focus.color}',
             size: '0.875rem'
         }
-    }
+    },
+    style: ({ dt }) => `
+.p-cascadeselect.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('cascadeselect.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.border.color')}, ${dt('cascadeselect.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-cascadeselect.p-variant-filled:not(.p-disabled):hover {
+    background: ${dt('cascadeselect.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.hover.border.color')}, ${dt('cascadeselect.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus {
+    outline: 0 none;
+    background: ${dt('cascadeselect.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.border.color')}, ${dt('cascadeselect.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-cascadeselect.p-variant-filled:not(.p-disabled).p-focus:hover {
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.focus.border.color')}, ${dt('cascadeselect.focus.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.hover.border.color')}, ${dt('cascadeselect.hover.border.color')});
+}
+
+.p-cascadeselect.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt('cascadeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt(
+        'cascadeselect.invalid.border.color'
+    )});
+}
+
+.p-select.p-variant-filled.p-invalid:not(.p-disabled).p-focus  {
+    background-image: linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt('cascadeselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('cascadeselect.invalid.border.color')}, ${dt(
+        'cascadeselect.invalid.border.color'
+    )});
+}
+`
 };
diff --git a/packages/themes/src/presets/material/chip/index.js b/packages/themes/src/presets/material/chip/index.js
index d441cf033..886a7cf42 100644
--- a/packages/themes/src/presets/material/chip/index.js
+++ b/packages/themes/src/presets/material/chip/index.js
@@ -1,14 +1,14 @@
 export default {
     root: {
-        borderRadius: '16px',
+        borderRadius: '2rem',
         paddingX: '0.75rem',
-        paddingY: '0.5rem',
+        paddingY: '0.75rem',
         gap: '0.5rem',
         transitionDuration: '{transition.duration}'
     },
     image: {
-        width: '2rem',
-        height: '2rem'
+        width: '2.25rem',
+        height: '2.25rem'
     },
     icon: {
         size: '1rem'
@@ -26,14 +26,14 @@ export default {
     colorScheme: {
         light: {
             root: {
-                background: '{surface.100}',
-                color: '{surface.800}'
+                background: '{surface.200}',
+                color: '{surface.900}'
             },
             icon: {
-                color: '{surface.800}'
+                color: '{surface.600}'
             },
             removeIcon: {
-                color: '{surface.800}'
+                color: '{surface.600}'
             }
         },
         dark: {