Fixed #6584 - AutoComplete is using token from the deprecated InputChips

pull/6596/head
Cagatay Civici 2024-10-16 10:42:44 +03:00
parent 42b24c1ab9
commit 8ae578327c
6 changed files with 38 additions and 6 deletions

View File

@ -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" variant="filled" />
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
</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" variant="filled" />
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
`,
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" variant="filled" />
<AutoComplete v-model="value2" inputId="multiple-ac-2" mulmultiple fluidtiple @complete="search" :typeahead="false" />
</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" variant="filled" />
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />
</div>
</template>

View File

@ -201,8 +201,8 @@ const theme = ({ dt }) => `
}
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
background: ${dt('inputchips.chip.focus.background')};
color: ${dt('inputchips.chip.focus.color')};
background: ${dt('autocomplete.chip.focus.background')};
color: ${dt('autocomplete.chip.focus.color')};
}
.p-autocomplete-input-chip {

View File

@ -75,6 +75,10 @@ export default {
},
colorScheme: {
light: {
chip: {
focusBackground: '{surface.200}',
color: '{surface.800}'
},
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
@ -85,6 +89,10 @@ export default {
}
},
dark: {
chip: {
focusBackground: '{surface.700}',
color: '{surface.0}'
},
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',

View File

@ -75,6 +75,10 @@ export default {
},
colorScheme: {
light: {
chip: {
focusBackground: '{surface.200}',
color: '{surface.800}'
},
dropdown: {
background: '{surface.50}',
hoverBackground: '{surface.100}',
@ -85,6 +89,10 @@ export default {
}
},
dark: {
chip: {
focusBackground: '{surface.700}',
color: '{surface.0}'
},
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',

View File

@ -75,6 +75,10 @@ export default {
},
colorScheme: {
light: {
chip: {
focusBackground: '{surface.300}',
color: '{surface.950}'
},
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
@ -85,6 +89,10 @@ export default {
}
},
dark: {
chip: {
focusBackground: '{surface.600}',
color: '{surface.0}'
},
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',

View File

@ -79,12 +79,20 @@ export default {
},
colorScheme: {
light: {
chip: {
focusBackground: '{surface.300}',
color: '{surface.900}'
},
dropdown: {
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}'
}
},
dark: {
chip: {
focusBackground: '{surface.600}',
color: '{surface.0}'
},
dropdown: {
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}'