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>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -37,7 +37,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -55,7 +55,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -93,7 +93,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel variant="in"> <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> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>

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

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <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> <label for="ac">Identifier</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -20,7 +20,7 @@ export default {
code: { code: {
basic: ` basic: `
<IftaLabel> <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> <label for="ac">Identifier</label>
</IftaLabel> </IftaLabel>
`, `,
@ -28,7 +28,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <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> <label for="ac">Identifier</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -54,7 +54,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel> <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> <label for="ac">Identifier</label>
</IftaLabel> </IftaLabel>
</div> </div>

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

@ -2,8 +2,9 @@
<DocSectionText v-bind="$attrs"> <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> <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> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<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" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,16 +13,19 @@
export default { export default {
data() { data() {
return { return {
value: '', value1: '',
value2: '',
items: [], items: [],
code: { code: {
basic: ` 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: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<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" />
</div> </div>
</template> </template>
@ -29,7 +33,8 @@ export default {
export default { export default {
data() { data() {
return { return {
value: '', value1: '',
value2: '',
items: [] items: []
}; };
}, },
@ -43,15 +48,17 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<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" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const value = ref(""); const value1 = ref('');
const value2 = ref('');
const items = ref([]); const items = ref([]);
const search = (event) => { 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" /> <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> <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> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -25,7 +25,7 @@ export default {
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" /> <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> <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: ` options: `
<template> <template>
@ -34,7 +34,7 @@ export default {
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" /> <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> <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> </div>
</template> </template>
@ -62,7 +62,7 @@ export default {
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" /> <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> <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> </div>
</template> </template>

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

@ -74,9 +74,9 @@ export default {
component: VirtualScrollDoc component: VirtualScrollDoc
}, },
{ {
id: 'multiple', id: 'filled',
label: 'Multiple', label: 'Filled',
component: MultipleDoc component: FilledDoc
}, },
{ {
id: 'floatlabel', id: 'floatlabel',
@ -89,9 +89,9 @@ export default {
component: IftaLabelDoc component: IftaLabelDoc
}, },
{ {
id: 'filled', id: 'multiple',
label: 'Filled', label: 'Multiple',
component: FilledDoc component: MultipleDoc
}, },
{ {
id: 'invalid', id: 'invalid',

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

@ -173,6 +173,10 @@ const theme = ({ dt }) => `
background: ${dt('autocomplete.filled.background')}; 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 { .p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.filled.focus.background')}; background: ${dt('autocomplete.filled.focus.background')};
} }

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

@ -3,6 +3,7 @@ export default {
background: '{form.field.background}', background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}', filledBackground: '{form.field.filled.background}',
filledHoverBackground: '{form.field.filled.hover.background}',
filledFocusBackground: '{form.field.filled.focus.background}', filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}', hoverBorderColor: '{form.field.hover.border.color}',
@ -53,17 +54,17 @@ export default {
padding: '{list.option.group.padding}' padding: '{list.option.group.padding}'
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '3rem',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}', hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}', activeBorderColor: '{form.field.border.color}',
borderRadius: '{form.field.border.radius}', borderRadius: '{form.field.border.radius}',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '0',
style: '{focus.ring.style}', style: 'none',
color: '{focus.ring.color}', color: 'unset',
offset: '{focus.ring.offset}', offset: '0',
shadow: '{focus.ring.shadow}' shadow: 'none'
} }
}, },
chip: { chip: {
@ -93,5 +94,57 @@ export default {
activeColor: '{surface.100}' 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: { semantic: {
transitionDuration: '0.2s', transitionDuration: '0.2s',
focusRing: { focusRing: {
width: '2px', width: '0',
style: 'solid', style: 'none',
color: '{primary.color}', color: 'unset',
offset: '0', offset: '0',
shadow: 'none' shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)'
}, },
disabledOpacity: '0.38', disabledOpacity: '0.38',
iconSize: '1rem', iconSize: '1rem',

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

@ -20,7 +20,7 @@ export default {
style: '{focus.ring.style}', style: '{focus.ring.style}',
color: '{focus.ring.color}', color: '{focus.ring.color}',
offset: '{focus.ring.offset}', offset: '{focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}' shadow: '{focus.ring.shadow}'
} }
}, },
colorScheme: { colorScheme: {

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

@ -3,8 +3,8 @@ export default {
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'
}, },
preview: { preview: {
width: '1.5rem', width: '2rem',
height: '1.5rem', height: '2rem',
borderRadius: '{form.field.border.radius}', borderRadius: '{form.field.border.radius}',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',