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

components/lib/listbox/BaseListbox.vue

@@ -62,6 +62,14 @@ export default {
             type: Boolean,
             default: true
         },
+        highlightOnSelect: {
+            type: Boolean,
+            default: true
+        },
+        checkmark: {
+            type: Boolean,
+            default: false
+        },
         filterMessage: {
             type: String,
             default: null

components/lib/listbox/Listbox.d.ts

@@ -164,6 +164,14 @@ export interface ListboxPassThroughOptions<T = any> {
      * Used to pass attributes to the option's DOM element.
      */
     option?: ListboxPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the option check icon's DOM element.
+     */
+    optionCheckIcon?: ListboxPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the option blank icon's DOM element.
+     */
+    optionBlankIcon?: ListboxPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the emptyMessage's DOM element.
      */
@@ -351,6 +359,16 @@ export interface ListboxProps {
      * @defaultValue true
      */
     focusOnHover?: boolean | undefined;
+    /**
+     *  Whether the selected option will be add highlight class.
+     *  @defaultValue true
+     */
+    highlightOnSelect?: boolean | undefined;
+    /**
+     *  Whether the selected option will be shown with a check mark.
+     *  @defaultValue false
+     */
+    checkmark?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * @defaultValue '{0} results are available'

components/lib/listbox/Listbox.vue

@@ -91,6 +91,10 @@
                                 :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                 :data-p-disabled="isOptionDisabled(option)"
                             >
+                                <template v-if="checkmark">
+                                    <CheckIcon v-if="isSelected(option)" :class="cx('optionCheckIcon')" v-bind="ptm('optionCheckIcon')" />
+                                    <BlankIcon v-else :class="cx('optionBlankIcon')" v-bind="ptm('optionBlankIcon')" />
+                                </template>
                                 <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                             </li>
                         </template>
@@ -131,6 +135,8 @@
 <script>
 import { FilterService } from 'primevue/api';
 import IconField from 'primevue/iconfield';
+import BlankIcon from 'primevue/icons/blank';
+import CheckIcon from 'primevue/icons/check';
 import SearchIcon from 'primevue/icons/search';
 import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
@@ -754,7 +760,9 @@ export default {
         VirtualScroller,
         InputIcon,
         IconField,
-        SearchIcon
+        SearchIcon,
+        CheckIcon,
+        BlankIcon
     }
 };
 </script>

components/lib/listbox/style/ListboxStyle.d.ts

@@ -17,6 +17,8 @@ export enum ListboxClasses {
     list = 'p-listbox-list',
     optionGroup = 'p-listbox-option-group',
     option = 'p-listbox-option',
+    optionCheckIcon = 'p-listbox-option-check-icon',
+    optionBlankIcon = 'p-listbox-option-blank-icon',
     emptyMessage = 'p-listbox-empty-message'
 }
 

components/lib/listbox/style/ListboxStyle.js

@@ -55,6 +55,8 @@ const theme = ({ dt }) => `
 }
 
 .p-listbox-option {
+    display: flex;
+    align-items: center;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -85,6 +87,13 @@ const theme = ({ dt }) => `
     color: ${dt('listbox.option.focus.color')};
 }
 
+.p-listbox-option-check-icon {
+    position: relative;
+    margin-left: -0.375rem;
+    margin-right: 0.375rem;
+    color: ${dt('listbox.checkmark.color')};
+}
+
 .p-listbox-option-group {
     margin: 0;
     padding: ${dt('listbox.option.group.padding')};
@@ -112,14 +121,16 @@ const classes = {
     listContainer: 'p-listbox-list-container',
     list: 'p-listbox-list',
     optionGroup: 'p-listbox-option-group',
-    option: ({ instance, option, index, getItemOptions }) => [
+    option: ({ instance, props, option, index, getItemOptions }) => [
         'p-listbox-option',
         {
-            'p-listbox-option-selected': instance.isSelected(option),
+            'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,
             'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
+    optionCheckIcon: 'p-listbox-option-check-icon',
+    optionBlankIcon: 'p-listbox-option-blank-icon',
     emptyMessage: 'p-listbox-empty-message'
 };
 

components/lib/themes/aura/listbox/index.js

@@ -42,6 +42,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    checkmark: {
+        color: '{list.option.color}'
+    },
     emptyMessage: {
         padding: '{list.option.padding}'
     }

components/lib/themes/lara/listbox/index.js

@@ -42,6 +42,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    checkmark: {
+        color: '{list.option.color}'
+    },
     emptyMessage: {
         padding: '{list.option.padding}'
     }