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

src/views/multiselect/MultiSelectDemo.vue

@@ -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;
+}
+
+/deep/ .multiselect-custom {
+    .p-multiselect-label:not(.p-placeholder) {
+        padding-top: .25rem;
+        padding-bottom: .25rem;
     }
 
     .p-multiselect-car-option {
-    display: inline-block;
+        display: flex;
-    vertical-align: middle;
+        align-items: center;
 
         img {
-        vertical-align: middle;
+            margin-right: .5rem;
-        margin-right: .5em;
             width: 24px;
         }
-
-    span {
-        margin-top: .125em;
-    }
-}
-
-.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 img {
-    width: 20px;
-    vertical-align: middle;
-    margin-right: .5em
     }
 
     .p-multiselect-car-token {
-    background: #007ad9;
+        padding: .25rem .5rem;
-    color: #ffffff;
+        margin: 0 0.286rem 0 0;
+        border-radius: 3px;
+        display: inline-flex;
     }
 
-.p-multiselect-empty-car-token {
+    .p-multiselect-car-token img {
-    background: #d95f00;
+        width: 17px;
+        margin-right: .5rem;
+        align-items: center;
+    }
+
+    .p-multiselect-car-token {
+        background: #2196f3;
         color: #ffffff;
     }
+}
 </style>

src/views/multiselect/MultiSelectDoc.vue

@@ -43,9 +43,9 @@ data() {
 			<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">
@@ -289,9 +289,9 @@ data() {
             <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">
@@ -327,49 +327,43 @@ export default {
 
 <CodeHighlight lang="css">
 .p-multiselect {
-	min-width: 15em;
+    min-width: 15rem;
+}
+
+/deep/ .multiselect-custom {
+    .p-multiselect-label:not(.p-placeholder) {
+        padding-top: .25rem;
+        padding-bottom: .25rem;
     }
 
     .p-multiselect-car-option {
-	display: inline-block;
+        display: flex;
-	vertical-align: middle;
+        align-items: center;
 
         img {
-		vertical-align: middle;
+            margin-right: .5rem;
-		margin-right: .5em;
             width: 24px;
         }
-
-	span {
-		margin-top: .125em;
-	}
-}
-
-.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 img {
-	width: 20px;
-	vertical-align: middle;
-	margin-right: .5em
     }
 
     .p-multiselect-car-token {
-	background: #007ad9;
+        padding: .25rem .5rem;
-	color: #ffffff;
+        margin: 0 0.286rem 0 0;
+        border-radius: 3px;
+        display: inline-flex;
     }
 
-.p-multiselect-empty-car-token {
+    .p-multiselect-car-token img {
-	background: #d95f00;
+        width: 17px;
+        margin-right: .5rem;
+        align-items: center;
+    }
+
+    .p-multiselect-car-token {
+        background: #2196f3;
         color: #ffffff;
     }
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>