vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Material AutoComplete

pull/6501/head
Cagatay Civici 2024-09-30 10:06:16 +03:00
parent 08a4f00b50
commit 1068d127b4
10 changed files with 106 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/autocomplete/FloatLabelDoc.vue
View File

@ -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>

8
apps/showcase/doc/autocomplete/IftaLabelDoc.vue
View File

@ -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>

27
apps/showcase/doc/autocomplete/InvalidDoc.vue
View File

@ -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) => {

8
apps/showcase/doc/autocomplete/MultipleDoc.vue
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" />
<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>

12
apps/showcase/pages/autocomplete/index.vue
View File

@ -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',

4
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -173,6 +173,10 @@ const theme = ({ dt }) => `
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')};
}

65
packages/themes/src/presets/material/autocomplete/index.js
View File

@ -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'
)});
}
`
};

8
packages/themes/src/presets/material/base/index.js
View File

@ -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',

2
packages/themes/src/presets/material/chip/index.js
View File

@ -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: {

4
packages/themes/src/presets/material/colorpicker/index.js
View File

@ -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}',