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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/345/head
onursenture 2020-05-13 11:14:57 +03:00
parent 1bad1094e1 8bc1d39742
commit 3f1db92ff6
2 changed files with 65 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,15 +12,15 @@
<MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<h3>Advanced with Templating and Filtering</h3>
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
<MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
<img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
<div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
<template v-if="!slotProps.value || slotProps.value.length === 0">
Select Brands
</div>
</template>
</template>
<template #option="slotProps">
<div class="p-multiselect-car-option">
@ -64,47 +64,41 @@ export default {
<style lang="scss" scoped>
.p-multiselect {
min-width: 15em;
min-width: 15rem;
}
.p-multiselect-car-option {
display: inline-block;
vertical-align: middle;
img {
vertical-align: middle;
margin-right: .5em;
width: 24px;
/deep/ .multiselect-custom {
.p-multiselect-label:not(.p-placeholder) {
padding-top: .25rem;
padding-bottom: .25rem;
}
span {
margin-top: .125em;
.p-multiselect-car-option {
display: flex;
align-items: center;
img {
margin-right: .5rem;
width: 24px;
}
}
}
.p-multiselect-car-token,
.p-multiselect-empty-car-token {
padding: 2px 4px;
margin: 0 0.286em 0 0;
display: inline-block;
vertical-align: middle;
height: 1.857em;
border-radius: 3px;
}
.p-multiselect-car-token {
padding: .25rem .5rem;
margin: 0 0.286rem 0 0;
border-radius: 3px;
display: inline-flex;
}
.p-multiselect-car-token img {
width: 20px;
vertical-align: middle;
margin-right: .5em
}
.p-multiselect-car-token img {
width: 17px;
margin-right: .5rem;
align-items: center;
}
.p-multiselect-car-token {
background: #007ad9;
color: #ffffff;
}
.p-multiselect-empty-car-token {
background: #d95f00;
color: #ffffff;
.p-multiselect-car-token {
background: #2196f3;
color: #ffffff;
}
}
</style>

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

@ -43,9 +43,9 @@ data() {
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
Select Brands
&lt;/div&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
Select Brands
&lt;template&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt;
@ -289,9 +289,9 @@ data() {
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt;
&lt;div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0"&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
Select Brands
&lt;/div&gt;
&lt;template&gt;
&lt;/template&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt;
@ -327,48 +327,42 @@ export default {
<CodeHighlight lang="css">
.p-multiselect {
min-width: 15em;
min-width: 15rem;
}
.p-multiselect-car-option {
display: inline-block;
vertical-align: middle;
/deep/ .multiselect-custom {
.p-multiselect-label:not(.p-placeholder) {
padding-top: .25rem;
padding-bottom: .25rem;
}
img {
vertical-align: middle;
margin-right: .5em;
width: 24px;
}
.p-multiselect-car-option {
display: flex;
align-items: center;
span {
margin-top: .125em;
}
}
img {
margin-right: .5rem;
width: 24px;
}
}
.p-multiselect-car-token,
.p-multiselect-empty-car-token {
padding: 2px 4px;
margin: 0 0.286em 0 0;
display: inline-block;
vertical-align: middle;
height: 1.857em;
border-radius: 3px;
}
.p-multiselect-car-token {
padding: .25rem .5rem;
margin: 0 0.286rem 0 0;
border-radius: 3px;
display: inline-flex;
}
.p-multiselect-car-token img {
width: 20px;
vertical-align: middle;
margin-right: .5em
}
.p-multiselect-car-token img {
width: 17px;
margin-right: .5rem;
align-items: center;
}
.p-multiselect-car-token {
background: #007ad9;
color: #ffffff;
}
.p-multiselect-empty-car-token {
background: #d95f00;
color: #ffffff;
.p-multiselect-car-token {
background: #2196f3;
color: #ffffff;
}
}
</CodeHighlight>
</TabPanel>