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

Multiselect demo update

pull/358/head
cagataycivici 2020-07-01 15:32:03 +03:00
parent 5400fe9ecc
commit 38ed215624
2 changed files with 79 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/multiselect/MultiSelectDemo.vue
View File

@ -11,23 +11,23 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /> <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
<h5>Advanced with Templating and Filtering</h5> <h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"> <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<span>{{option.brand}}</span> <div>{{option.name}}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> <template v-if="!slotProps.value || slotProps.value.length === 0">
Select Brands Select Countries
</template> </template>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-car-option"> <div class="country-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<span>{{slotProps.option.brand}}</span> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
@ -44,18 +44,26 @@ import MultiSelectDoc from './MultiSelectDoc';
export default { export default {
data() { data() {
return { return {
selectedCars1: null, selectedCities: null,
selectedCars2: null, selectedCountries: null,
cars: [ cities: [
{brand: 'Audi', value: 'Audi'}, {name: 'New York', code: 'NY'},
{brand: 'BMW', value: 'BMW'}, {name: 'Rome', code: 'RM'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'London', code: 'LDN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Istanbul', code: 'IST'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'Paris', code: 'PRS'}
{brand: 'Mercedes', value: 'Mercedes'}, ],
{brand: 'Renault', value: 'Renault'}, countries: [
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Australia', code: 'AU'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Brazil', code: 'BR'},
{name: 'China', code: 'CN'},
{name: 'Egypt', code: 'EG'},
{name: 'France', code: 'FR'},
{name: 'Germany', code: 'DE'},
{name: 'India', code: 'IN'},
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
] ]
} }
}, },
@ -76,32 +84,17 @@ export default {
padding-bottom: .25rem; padding-bottom: .25rem;
} }
.p-multiselect-car-option { .country-item-value {
display: flex;
align-items: center;
img {
margin-right: .5rem;
width: 24px;
}
}
.p-multiselect-car-token {
padding: .25rem .5rem; padding: .25rem .5rem;
margin: 0 0.286rem 0 0;
border-radius: 3px; border-radius: 3px;
display: inline-flex; display: inline-flex;
}
.p-multiselect-car-token img {
width: 17px;
margin-right: .5rem; margin-right: .5rem;
align-items: center; background-color: var(--primary-color);
} color: var(--primary-color-text);
.p-multiselect-car-token { img.flag {
background: #2196f3; width: 17px;
color: #ffffff; }
} }
} }
</style> </style>

95
src/views/multiselect/MultiSelectDoc.vue
View File

@ -279,24 +279,24 @@ data() {
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; &lt;h5&gt;Basic&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /&gt; &lt;MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" /&gt;
&lt;h3&gt;Advanced with Templating and Filtering&lt;/h3&gt; &lt;h5&gt;Advanced with Templating and Filtering&lt;/h5&gt;
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true"&gt; &lt;MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt; &lt;div&gt;{{option.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt; &lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
Select Brands Select Countries
&lt;template&gt; &lt;/template&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt; &lt;div class="country-item"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;div&gt;{{slotProps.option.name}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/MultiSelect&gt; &lt;/MultiSelect&gt;
@ -305,23 +305,31 @@ data() {
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
export default { export default {
data() { data() {
return { return {
selectedCars1: null, selectedCities: null,
selectedCars2: null, selectedCountries: null,
cars: [ cities: [
{brand: 'Audi', value: 'Audi'}, {name: 'New York', code: 'NY'},
{brand: 'BMW', value: 'BMW'}, {name: 'Rome', code: 'RM'},
{brand: 'Fiat', value: 'Fiat'}, {name: 'London', code: 'LDN'},
{brand: 'Honda', value: 'Honda'}, {name: 'Istanbul', code: 'IST'},
{brand: 'Jaguar', value: 'Jaguar'}, {name: 'Paris', code: 'PRS'}
{brand: 'Mercedes', value: 'Mercedes'}, ],
{brand: 'Renault', value: 'Renault'}, countries: [
{brand: 'Volkswagen', value: 'Volkswagen'}, {name: 'Australia', code: 'AU'},
{brand: 'Volvo', value: 'Volvo'} {name: 'Brazil', code: 'BR'},
] {name: 'China', code: 'CN'},
} {name: 'Egypt', code: 'EG'},
} {name: 'France', code: 'FR'},
{name: 'Germany', code: 'DE'},
{name: 'India', code: 'IN'},
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
]
}
}
} }
</CodeHighlight> </CodeHighlight>
@ -336,32 +344,17 @@ export default {
padding-bottom: .25rem; padding-bottom: .25rem;
} }
.p-multiselect-car-option { .country-item-value {
display: flex;
align-items: center;
img {
margin-right: .5rem;
width: 24px;
}
}
.p-multiselect-car-token {
padding: .25rem .5rem; padding: .25rem .5rem;
margin: 0 0.286rem 0 0;
border-radius: 3px; border-radius: 3px;
display: inline-flex; display: inline-flex;
}
.p-multiselect-car-token img {
width: 17px;
margin-right: .5rem; margin-right: .5rem;
align-items: center; background-color: var(--primary-color);
} color: var(--primary-color-text);
.p-multiselect-car-token { img.flag {
background: #2196f3; width: 17px;
color: #ffffff; }
} }
} }
</CodeHighlight> </CodeHighlight>