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