From 1068d127b458715350773645482d55057a108165 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 30 Sep 2024 10:06:16 +0300
Subject: [PATCH] Material AutoComplete

---
 .../doc/autocomplete/FloatLabelDoc.vue        |  8 +--
 .../doc/autocomplete/IftaLabelDoc.vue         |  8 +--
 apps/showcase/doc/autocomplete/InvalidDoc.vue | 27 +++++---
 .../showcase/doc/autocomplete/MultipleDoc.vue |  8 +--
 apps/showcase/pages/autocomplete/index.vue    | 12 ++--
 .../autocomplete/style/AutoCompleteStyle.js   |  4 ++
 .../presets/material/autocomplete/index.js    | 67 +++++++++++++++++--
 .../themes/src/presets/material/base/index.js |  8 +--
 .../themes/src/presets/material/chip/index.js |  2 +-
 .../src/presets/material/colorpicker/index.js |  4 +-
 10 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/apps/showcase/doc/autocomplete/FloatLabelDoc.vue b/apps/showcase/doc/autocomplete/FloatLabelDoc.vue
index b1dc12591..9788b002d 100644
--- a/apps/showcase/doc/autocomplete/FloatLabelDoc.vue
+++ b/apps/showcase/doc/autocomplete/FloatLabelDoc.vue
@@ -9,7 +9,7 @@
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -37,7 +37,7 @@ export default {
 </FloatLabel>
 
 <FloatLabel variant="in">
-    <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" />
+    <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
     <label for="in_label">In Label</label>
 </FloatLabel>
 
@@ -55,7 +55,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
@@ -93,7 +93,7 @@ export default {
         </FloatLabel>
 
         <FloatLabel variant="in">
-            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
             <label for="in_label">In Label</label>
         </FloatLabel>
 
diff --git a/apps/showcase/doc/autocomplete/IftaLabelDoc.vue b/apps/showcase/doc/autocomplete/IftaLabelDoc.vue
index d6815a0a4..ad680907a 100644
--- a/apps/showcase/doc/autocomplete/IftaLabelDoc.vue
+++ b/apps/showcase/doc/autocomplete/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
             <label for="ac">Identifier</label>
         </IftaLabel>
     </div>
@@ -20,7 +20,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
     <label for="ac">Identifier</label>
 </IftaLabel>
 `,
@@ -28,7 +28,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
             <label for="ac">Identifier</label>
         </IftaLabel>
     </div>
@@ -54,7 +54,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" />
+            <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
             <label for="ac">Identifier</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/autocomplete/InvalidDoc.vue b/apps/showcase/doc/autocomplete/InvalidDoc.vue
index 453738695..99978e2e6 100644
--- a/apps/showcase/doc/autocomplete/InvalidDoc.vue
+++ b/apps/showcase/doc/autocomplete/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">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,16 +13,19 @@
 export default {
     data() {
         return {
-            value: '',
+            value1: '',
+            value2: '',
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -29,7 +33,8 @@ export default {
 export default {
     data() {
         return {
-            value: '',
+            value1: '',
+                value2: '',
             items: []
         };
     },
@@ -43,15 +48,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" :invalid="value === ''"/>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value = ref("");
+const value1 = ref('');
+const value2 = ref('');
 const items = ref([]);
 
 const search = (event) => {
diff --git a/apps/showcase/doc/autocomplete/MultipleDoc.vue b/apps/showcase/doc/autocomplete/MultipleDoc.vue
index f870122f2..f36b9b72e 100644
--- a/apps/showcase/doc/autocomplete/MultipleDoc.vue
+++ b/apps/showcase/doc/autocomplete/MultipleDoc.vue
@@ -7,7 +7,7 @@
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -25,7 +25,7 @@ export default {
 <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
 <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
 `,
                 options: `
 <template>
@@ -34,7 +34,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" variant="filled" />
     </div>
 </template>
 
@@ -62,7 +62,7 @@ export default {
         <AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />
 
         <label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
-        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
+        <AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" variant="filled" />
     </div>
 </template>
 
diff --git a/apps/showcase/pages/autocomplete/index.vue b/apps/showcase/pages/autocomplete/index.vue
index bed3addfc..3d824b4cb 100755
--- a/apps/showcase/pages/autocomplete/index.vue
+++ b/apps/showcase/pages/autocomplete/index.vue
@@ -74,9 +74,9 @@ export default {
                     component: VirtualScrollDoc
                 },
                 {
-                    id: 'multiple',
-                    label: 'Multiple',
-                    component: MultipleDoc
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
                 },
                 {
                     id: 'floatlabel',
@@ -89,9 +89,9 @@ export default {
                     component: IftaLabelDoc
                 },
                 {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
                 },
                 {
                     id: 'invalid',
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index d86a4a3bc..1e8c597b6 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -172,6 +172,10 @@ const theme = ({ dt }) => `
 .p-variant-filled.p-autocomplete-input-multiple {
     background: ${dt('autocomplete.filled.background')};
 }
+    
+.p-autocomplete:not(.p-disabled):hover .p-variant-filled.p-autocomplete-input-multiple {
+    background: ${dt('autocomplete.filled.hover.background')};
+}
 
 .p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple  {
     background: ${dt('autocomplete.filled.focus.background')};
diff --git a/packages/themes/src/presets/material/autocomplete/index.js b/packages/themes/src/presets/material/autocomplete/index.js
index c221bdda7..a6c0007cb 100644
--- a/packages/themes/src/presets/material/autocomplete/index.js
+++ b/packages/themes/src/presets/material/autocomplete/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}',
@@ -53,17 +54,17 @@ export default {
         padding: '{list.option.group.padding}'
     },
     dropdown: {
-        width: '2.5rem',
+        width: '3rem',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
         borderRadius: '{form.field.border.radius}',
         focusRing: {
-            width: '{focus.ring.width}',
-            style: '{focus.ring.style}',
-            color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
-            shadow: '{focus.ring.shadow}'
+            width: '0',
+            style: 'none',
+            color: 'unset',
+            offset: '0',
+            shadow: 'none'
         }
     },
     chip: {
@@ -93,5 +94,57 @@ export default {
                 activeColor: '{surface.100}'
             }
         }
-    }
+    },
+    style: ({ dt }) => `
+.p-autocomplete-dropdown:focus-visible {
+    background: ${dt('autocomplete.dropdown.hover.background')};
+}
+
+.p-variant-filled.p-autocomplete-input-multiple {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('autocomplete.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.focus.border.color')}, ${dt('autocomplete.focus.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.border.color')}, ${dt('autocomplete.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-autocomplete:not(.p-disabled):hover .p-variant-filled.p-autocomplete-input-multiple {
+    background: ${dt('autocomplete.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.focus.border.color')}, ${dt('autocomplete.focus.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.hover.border.color')}, ${dt('autocomplete.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {
+    outline: 0 none;
+    background: ${dt('autocomplete.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.focus.border.color')}, ${dt('autocomplete.focus.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.border.color')}, ${dt('autocomplete.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-autocomplete:not(.p-disabled).p-focus:hover .p-variant-filled.p-autocomplete-input-multiple {
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.focus.border.color')}, ${dt('autocomplete.focus.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.hover.border.color')}, ${dt('autocomplete.hover.border.color')});
+}
+
+.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.invalid.border.color')}, ${dt('autocomplete.invalid.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.invalid.border.color')}, ${dt(
+        'autocomplete.invalid.border.color'
+    )});
+}
+
+.p-autocomplete.p-invalid.p-focus .p-autocomplete-input-multiple  {
+    background-image: linear-gradient(to bottom, ${dt('autocomplete.invalid.border.color')}, ${dt('autocomplete.invalid.border.color')}), linear-gradient(to bottom, ${dt('autocomplete.invalid.border.color')}, ${dt(
+        'autocomplete.invalid.border.color'
+    )});
+}
+`
 };
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 95537c171..f3725a081 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -34,11 +34,11 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '2px',
-            style: 'solid',
-            color: '{primary.color}',
+            width: '0',
+            style: 'none',
+            color: 'unset',
             offset: '0',
-            shadow: 'none'
+            shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)'
         },
         disabledOpacity: '0.38',
         iconSize: '1rem',
diff --git a/packages/themes/src/presets/material/chip/index.js b/packages/themes/src/presets/material/chip/index.js
index 886a7cf42..94a4f8a7d 100644
--- a/packages/themes/src/presets/material/chip/index.js
+++ b/packages/themes/src/presets/material/chip/index.js
@@ -20,7 +20,7 @@ export default {
             style: '{focus.ring.style}',
             color: '{focus.ring.color}',
             offset: '{focus.ring.offset}',
-            shadow: '{form.field.focus.ring.shadow}'
+            shadow: '{focus.ring.shadow}'
         }
     },
     colorScheme: {
diff --git a/packages/themes/src/presets/material/colorpicker/index.js b/packages/themes/src/presets/material/colorpicker/index.js
index 8738f80d7..d048be88f 100644
--- a/packages/themes/src/presets/material/colorpicker/index.js
+++ b/packages/themes/src/presets/material/colorpicker/index.js
@@ -3,8 +3,8 @@ export default {
         transitionDuration: '{transition.duration}'
     },
     preview: {
-        width: '1.5rem',
-        height: '1.5rem',
+        width: '2rem',
+        height: '2rem',
         borderRadius: '{form.field.border.radius}',
         focusRing: {
             width: '{focus.ring.width}',