diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue index f14ce08a7..7099cd648 100644 --- a/components/lib/dropdown/BaseDropdown.vue +++ b/components/lib/dropdown/BaseDropdown.vue @@ -130,6 +130,14 @@ export default { type: Boolean, default: true }, + highlightOnSelect: { + type: Boolean, + default: false + }, + showTick: { + type: Boolean, + default: true + }, filterMessage: { type: String, default: null diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts index 3bb49f28d..52c75157e 100755 --- a/components/lib/dropdown/Dropdown.d.ts +++ b/components/lib/dropdown/Dropdown.d.ts @@ -143,6 +143,18 @@ export interface DropdownPassThroughOptions { * Used to pass attributes to the item's DOM element. */ item?: DropdownPassThroughOptionType; + /** + * Used to pass attributes to the item label's DOM element. + */ + itemLabel?: DropdownPassThroughOptionType; + /** + * Used to pass attributes to the tick icon's DOM element. + */ + tickIcon?: DropdownPassThroughOptionType; + /** + * Used to pass attributes to the bank icon's DOM element. + */ + blankIcon?: DropdownPassThroughOptionType; /** * Used to pass attributes to the empty message's DOM element. */ @@ -418,6 +430,16 @@ export interface DropdownProps { * @defaultValue true */ focusOnHover?: boolean | undefined; + /** + * Highlights automatically the first item. + * @defaultValue false + */ + highlightOnSelect?: boolean | undefined; + /** + * Whether the selected option will be shown with a tick. + * @defaultValue true + */ + showTick?: 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/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue index a22956844..90b5d33d1 100755 --- a/components/lib/dropdown/Dropdown.vue +++ b/components/lib/dropdown/Dropdown.vue @@ -127,7 +127,13 @@ :data-p-disabled="isOptionDisabled(option)" v-bind="getPTItemOptions(option, getItemOptions, i, 'item')" > - {{ getOptionLabel(option) }} + + + {{ getOptionLabel(option) }} +
  • @@ -169,6 +175,8 @@ diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js index 079838082..95ee34469 100644 --- a/components/lib/dropdown/style/DropdownStyle.js +++ b/components/lib/dropdown/style/DropdownStyle.js @@ -61,6 +61,8 @@ const css = ` white-space: nowrap; position: relative; overflow: hidden; + display: flex; + align-items: center; } .p-dropdown-item-group { @@ -134,14 +136,16 @@ const classes = { wrapper: 'p-dropdown-items-wrapper', list: 'p-dropdown-items', itemGroup: 'p-dropdown-item-group', - item: ({ instance, state, option, focusedOption }) => [ + item: ({ instance, props, state, option, focusedOption }) => [ 'p-dropdown-item', { - 'p-highlight': instance.isSelected(option), + 'p-highlight': instance.isSelected(option) && props.highlightOnSelect, 'p-focus': state.focusedOptionIndex === focusedOption, 'p-disabled': instance.isOptionDisabled(option) } ], + tickIcon: 'p-dropdown-tick-icon', + blankIcon: 'p-dropdown-blank-icon', emptyMessage: 'p-dropdown-empty-message' }; diff --git a/components/lib/icons/blank/index.d.ts b/components/lib/icons/blank/index.d.ts new file mode 100644 index 000000000..29ac9263b --- /dev/null +++ b/components/lib/icons/blank/index.d.ts @@ -0,0 +1,12 @@ +import { Icon } from '../../icons/index'; +import { GlobalComponentConstructor } from '../../ts-helpers'; + +declare class BlankIcon extends Icon {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + BlankIcon: GlobalComponentConstructor; + } +} + +export default BlankIcon; diff --git a/components/lib/icons/blank/index.vue b/components/lib/icons/blank/index.vue new file mode 100644 index 000000000..95d12e2ee --- /dev/null +++ b/components/lib/icons/blank/index.vue @@ -0,0 +1,13 @@ + + diff --git a/components/lib/icons/blank/package.json b/components/lib/icons/blank/package.json new file mode 100644 index 000000000..2ec76c38f --- /dev/null +++ b/components/lib/icons/blank/package.json @@ -0,0 +1,9 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts", + "browser": { + "./sfc": "./index.vue" + } +} diff --git a/components/lib/metergroup/MeterGroup.d.ts b/components/lib/metergroup/MeterGroup.d.ts index 4f18ab53e..74135e7cb 100644 --- a/components/lib/metergroup/MeterGroup.d.ts +++ b/components/lib/metergroup/MeterGroup.d.ts @@ -93,7 +93,7 @@ export interface MeterGroupContext { /** * Current value of the meter item */ - value: MeterItemOptions; + value: MeterItem; /** * Current index of the meter item */ @@ -103,7 +103,7 @@ export interface MeterGroupContext { /** * Defines valid properties of a meter item. */ -export interface MeterItemOptions { +export interface MeterItem { /** * Current label of the meter item. */ @@ -133,7 +133,7 @@ export interface MeterGroupProps { /** * Current value of the metergroup. */ - value?: MeterItemOptions[] | undefined; + value?: MeterItem[] | undefined; /** * Mininum boundary value. * @defaultValue 0 @@ -187,7 +187,7 @@ export interface MeterGroupSlots { /** * Current value of the component */ - value: MeterItemOptions[]; + value: MeterItem[]; /** * Total percent of the metergroup items */ @@ -204,7 +204,7 @@ export interface MeterGroupSlots { /** * Current value of the meter item */ - value: MeterItemOptions; + value: MeterItem; /** * Current index of the meter item */ @@ -233,7 +233,7 @@ export interface MeterGroupSlots { /** * Current value of the component */ - value: MeterItemOptions; + value: MeterItem; /** * Style class of the icon */ @@ -246,7 +246,7 @@ export interface MeterGroupSlots { /** * Current value of the component */ - value: MeterItemOptions[]; + value: MeterItem[]; /** * Total percent of the metergroup items */ @@ -263,7 +263,7 @@ export interface MeterGroupSlots { /** * Current value of the component */ - value: MeterItemOptions[]; + value: MeterItem[]; /** * Total percent of the metergroup items */ diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json index 7373c50af..1f47cec77 100644 --- a/doc/common/apidoc/index.json +++ b/doc/common/apidoc/index.json @@ -23743,6 +23743,30 @@ "default": "", "description": "Used to pass attributes to the item's DOM element." }, + { + "name": "itemLabel", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the item label's DOM element." + }, + { + "name": "tickIcon", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the tick icon's DOM element." + }, + { + "name": "blankIcon", + "optional": true, + "readonly": false, + "type": "DropdownPassThroughOptionType", + "default": "", + "description": "Used to pass attributes to the bank icon's DOM element." + }, { "name": "emptyMessage", "optional": true, @@ -24230,6 +24254,22 @@ "default": "true", "description": "When enabled, the focus is placed on the hovered option." }, + { + "name": "highlightOnSelect", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Highlights automatically the first item." + }, + { + "name": "showTick", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Whether the selected option will be shown with a tick." + }, { "name": "filterMessage", "optional": true, @@ -28064,6 +28104,7 @@ "icons/arrowup": {}, "icons/ban": {}, "icons/bars": {}, + "icons/blank": {}, "icons/calendar": {}, "icons/check": {}, "icons/chevrondown": {}, @@ -35517,7 +35558,7 @@ "name": "value", "optional": false, "readonly": false, - "type": "MeterItemOptions", + "type": "MeterItem", "default": "", "description": "Current value of the meter item" }, @@ -35532,7 +35573,7 @@ ], "methods": [] }, - "MeterItemOptions": { + "MeterItem": { "description": "Defines valid properties of a meter item.", "relatedProp": "", "props": [ @@ -35585,7 +35626,7 @@ "name": "value", "optional": true, "readonly": false, - "type": "MeterItemOptions[]", + "type": "MeterItem[]", "default": "", "description": "Current value of the metergroup." }, @@ -35667,7 +35708,7 @@ { "name": "scope", "optional": false, - "type": "{\n \t value: MeterItemOptions, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" + "type": "{\n \t value: MeterItem, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" } ], "returnType": "VNode[]", @@ -35679,7 +35720,7 @@ { "name": "scope", "optional": false, - "type": "{\n \t value: MeterItemOptions, // Current value of the meter item\n \t index: number, // Current index of the meter item\n \t class: string, // Style class of the meter item\n \t orientation: string, // Current orientation of the component\n \t size: string, // Current width of the meter item\n \t totalPercent: number, // Total percent of the metergroup items\n }" + "type": "{\n \t value: MeterItem, // Current value of the meter item\n \t index: number, // Current index of the meter item\n \t class: string, // Style class of the meter item\n \t orientation: string, // Current orientation of the component\n \t size: string, // Current width of the meter item\n \t totalPercent: number, // Total percent of the metergroup items\n }" } ], "returnType": "VNode[]", @@ -35691,7 +35732,7 @@ { "name": "scope", "optional": false, - "type": "{\n \t value: MeterItemOptions, // Current value of the component\n \t class: string, // Style class of the icon\n }" + "type": "{\n \t value: MeterItem, // Current value of the component\n \t class: string, // Style class of the icon\n }" } ], "returnType": "VNode[]", @@ -35703,7 +35744,7 @@ { "name": "scope", "optional": false, - "type": "{\n \t value: MeterItemOptions, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" + "type": "{\n \t value: MeterItem, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" } ], "returnType": "VNode[]", @@ -35715,7 +35756,7 @@ { "name": "scope", "optional": false, - "type": "{\n \t value: MeterItemOptions, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" + "type": "{\n \t value: MeterItem, // Current value of the component\n \t totalPercent: number, // Total percent of the metergroup items\n \t percentages: number, // Array of sequential sum of values of metergroup items\n }" } ], "returnType": "VNode[]", diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 8b9ee4e3e..94f6b5d2e 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -121,6 +121,7 @@ const ICON_ALIAS = { 'primevue/icons/arrowup': path.resolve(__dirname, './components/lib/icons/arrowup/index.vue'), 'primevue/icons/ban': path.resolve(__dirname, './components/lib/icons/ban/index.vue'), 'primevue/icons/bars': path.resolve(__dirname, './components/lib/icons/bars/index.vue'), + 'primevue/icons/blank': path.resolve(__dirname, './components/lib/icons/blank/index.vue'), 'primevue/icons/calendar': path.resolve(__dirname, './components/lib/icons/calendar/index.vue'), 'primevue/icons/check': path.resolve(__dirname, './components/lib/icons/check/index.vue'), 'primevue/icons/chevrondown': path.resolve(__dirname, './components/lib/icons/chevrondown/index.vue'), diff --git a/rollup.config.js b/rollup.config.js index 26b2e0e16..38ddd8895 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -26,6 +26,7 @@ const CORE_ICON_DEPENDENCIES = { 'primevue/icons/arrowup': 'primevue.icons.arrowup', 'primevue/icons/ban': 'primevue.icons.ban', 'primevue/icons/bars': 'primevue.icons.bars', + 'primevue/icons/blank': 'primevue.icons.blank', 'primevue/icons/calendar': 'primevue.icons.calendar', 'primevue/icons/check': 'primevue.icons.check', 'primevue/icons/chevrondown': 'primevue.icons.chevrondown',