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

Material MultiSelect

pull/6494/head
Cagatay Civici 2024-09-29 01:38:06 +03:00
parent 7f023ec0af
commit 4a7675890a
8 changed files with 89 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in"> <FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -43,7 +43,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in"> <FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -61,7 +61,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in"> <FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>
@ -100,7 +100,7 @@ export default {
</FloatLabel> </FloatLabel>
<FloatLabel class="w-full md:w-80" variant="in"> <FloatLabel class="w-full md:w-80" variant="in">
<MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect id="in_label" v-model="value2" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="in_label">In Label</label> <label for="in_label">In Label</label>
</FloatLabel> </FloatLabel>

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

@ -4,7 +4,7 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-80"> <IftaLabel class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="ms_cities">Cities</label> <label for="ms_cities">Cities</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -26,7 +26,7 @@ export default {
code: { code: {
basic: ` basic: `
<IftaLabel> <IftaLabel>
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="ms_cities">Cities</label> <label for="ms_cities">Cities</label>
</IftaLabel> </IftaLabel>
`, `,
@ -34,7 +34,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-80"> <IftaLabel class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" variant="filled" />
<label for="ms_cities">Cities</label> <label for="ms_cities">Cities</label>
</IftaLabel> </IftaLabel>
</div> </div>
@ -61,7 +61,7 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<IftaLabel class="w-full md:w-80"> <IftaLabel class="w-full md:w-80">
<MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full" /> <MultiSelect v-model="selectedCities" inputId="ms_cities" :options="cities" optionLabel="name" filter :maxSelectedLabels="3" class="w-full"variant="filled" />
<label for="ms_cities">Cities</label> <label for="ms_cities">Cities</label>
</IftaLabel> </IftaLabel>
</div> </div>

36
apps/showcase/doc/multiselect/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">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities?.length === 0" class="w-full md:w-80" /> <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities" :maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,7 +13,8 @@
export default { export default {
data() { data() {
return { return {
selectedCities: [], selectedCities1: [],
selectedCities2: [],
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -22,14 +24,18 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" /> :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" /> :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
</div> </div>
</template> </template>
@ -37,7 +43,8 @@ export default {
export default { export default {
data() { data() {
return { return {
selectedCities: [], selectedCities1: [],
selectedCities2: [],
cities: [ cities: [
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },
@ -52,16 +59,19 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex flex-wrap justify-center gap-4">
<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" filter placeholder="Select Cities" <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities === null" class="w-full md:w-80" /> :maxSelectedLabels="3" :invalid="selectedCities1?.length === 0" class="w-full md:w-80" />
<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" filter placeholder="Select Cities"
:maxSelectedLabels="3" :invalid="selectedCities2?.length === 0" class="w-full md:w-80" variant="filled" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const selectedCities = ref([]); const selectedCities1 = ref([]);
const selectedCities2 = ref([]);
const cities = ref([ const cities = ref([
{ name: 'New York', code: 'NY' }, { name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' }, { name: 'Rome', code: 'RM' },

10
apps/showcase/pages/multiselect/index.vue
View File

@ -72,6 +72,11 @@ export default {
label: 'VirtualScroll', label: 'VirtualScroll',
component: VirtualScrollDoc component: VirtualScrollDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'floatlabel', id: 'floatlabel',
label: 'Float Label', label: 'Float Label',
@ -82,11 +87,6 @@ export default {
label: 'Ifta Label', label: 'Ifta Label',
component: IftaLabelDoc component: IftaLabelDoc
}, },
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{ {
id: 'invalid', id: 'invalid',
label: 'Invalid', label: 'Invalid',

2
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -78,7 +78,7 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-inputtext, .p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea, .p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label, .p-floatlabel-in .p-select-label,
.p-floatlabel-in .p-multiselect-label-container, .p-floatlabel-in .p-multiselect-label,
.p-floatlabel-in .p-autocomplete-input-multiple, .p-floatlabel-in .p-autocomplete-input-multiple,
.p-floatlabel-in .p-cascadeselect-label, .p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label { .p-floatlabel-in .p-treeselect-label {

2
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -23,7 +23,7 @@ const theme = ({ dt }) => `
.p-iftalabel .p-inputtext, .p-iftalabel .p-inputtext,
.p-iftalabel .p-textarea, .p-iftalabel .p-textarea,
.p-iftalabel .p-select-label, .p-iftalabel .p-select-label,
.p-iftalabel .p-multiselect-label-container, .p-iftalabel .p-multiselect-label,
.p-iftalabel .p-autocomplete-input-multiple, .p-iftalabel .p-autocomplete-input-multiple,
.p-iftalabel .p-cascadeselect-label, .p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label { .p-iftalabel .p-treeselect-label {

4
packages/primevue/src/multiselect/style/MultiSelectStyle.js
View File

@ -31,6 +31,10 @@ const theme = ({ dt }) => `
background: ${dt('multiselect.filled.background')}; background: ${dt('multiselect.filled.background')};
} }
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('multiselect.filled.hover.background')};
}
.p-multiselect.p-variant-filled.p-focus { .p-multiselect.p-variant-filled.p-focus {
background: ${dt('multiselect.filled.focus.background')}; background: ${dt('multiselect.filled.focus.background')};
} }

49
packages/themes/src/presets/material/multiselect/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}',
@ -52,7 +53,7 @@ export default {
selectedFocusColor: '{list.option.selected.focus.color}', selectedFocusColor: '{list.option.selected.focus.color}',
padding: '{list.option.padding}', padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}', borderRadius: '{list.option.border.radius}',
gap: '0.5rem' gap: '0.75rem'
}, },
optionGroup: { optionGroup: {
background: '{list.option.group.background}', background: '{list.option.group.background}',
@ -65,5 +66,49 @@ export default {
}, },
emptyMessage: { emptyMessage: {
padding: '{list.option.padding}' padding: '{list.option.padding}'
} },
style: ({ dt }) => `
.p-multiselect.p-variant-filled {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: ${dt('multiselect.filled.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.border.color')}, ${dt('multiselect.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-multiselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('multiselect.filled.hover.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.hover.border.color')}, ${dt('multiselect.hover.border.color')});
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
outline: 0 none;
background: ${dt('multiselect.filled.focus.background')} no-repeat;
background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.border.color')}, ${dt('multiselect.border.color')});
background-size: 100% 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
border-color: transparent;
}
.p-multiselect.p-variant-filled:not(.p-disabled).p-focus:hover {
background-image: linear-gradient(to bottom, ${dt('multiselect.focus.border.color')}, ${dt('multiselect.focus.border.color')}), linear-gradient(to bottom, ${dt('multiselect.hover.border.color')}, ${dt('multiselect.hover.border.color')});
}
.p-multiselect.p-variant-filled.p-invalid {
background-image: linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')});
}
.p-multiselect.p-variant-filled.p-invalid:not(.p-disabled).p-focus {
background-image: linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')}), linear-gradient(to bottom, ${dt('multiselect.invalid.border.color')}, ${dt('multiselect.invalid.border.color')});
}
`
}; };