diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue index 7192140d1..7968418ec 100644 --- a/components/lib/listbox/BaseListbox.vue +++ b/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 diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts index 9f4a3c268..c554f4aeb 100755 --- a/components/lib/listbox/Listbox.d.ts +++ b/components/lib/listbox/Listbox.d.ts @@ -164,6 +164,14 @@ export interface ListboxPassThroughOptions { * Used to pass attributes to the option's DOM element. */ option?: ListboxPassThroughOptionType; + /** + * Used to pass attributes to the option check icon's DOM element. + */ + optionCheckIcon?: ListboxPassThroughOptionType; + /** + * Used to pass attributes to the option blank icon's DOM element. + */ + optionBlankIcon?: ListboxPassThroughOptionType; /** * 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' diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue index 7210c6a08..126284ecf 100755 --- a/components/lib/listbox/Listbox.vue +++ b/components/lib/listbox/Listbox.vue @@ -91,6 +91,10 @@ :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)" :data-p-disabled="isOptionDisabled(option)" > + {{ getOptionLabel(option) }} @@ -131,6 +135,8 @@ diff --git a/components/lib/listbox/style/ListboxStyle.d.ts b/components/lib/listbox/style/ListboxStyle.d.ts index 805385332..4441e903f 100644 --- a/components/lib/listbox/style/ListboxStyle.d.ts +++ b/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' } diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js index 600a7e285..dca6683f2 100644 --- a/components/lib/listbox/style/ListboxStyle.js +++ b/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' }; diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js index a3d2512f8..f3241d947 100644 --- a/components/lib/themes/aura/listbox/index.js +++ b/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}' } diff --git a/components/lib/themes/lara/listbox/index.js b/components/lib/themes/lara/listbox/index.js index a3d2512f8..f3241d947 100644 --- a/components/lib/themes/lara/listbox/index.js +++ b/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}' } diff --git a/doc/listbox/CheckmarkDoc.vue b/doc/listbox/CheckmarkDoc.vue new file mode 100644 index 000000000..073f31513 --- /dev/null +++ b/doc/listbox/CheckmarkDoc.vue @@ -0,0 +1,75 @@ + + + diff --git a/pages/listbox/index.vue b/pages/listbox/index.vue index fa64c6151..4a344c3f2 100755 --- a/pages/listbox/index.vue +++ b/pages/listbox/index.vue @@ -5,6 +5,7 @@