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

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

components/lib/dropdown/Dropdown.d.ts

@@ -143,6 +143,18 @@ export interface DropdownPassThroughOptions<T = any> {
      * Used to pass attributes to the item's DOM element.
      */
     item?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the tick icon's DOM element.
+     */
+    tickIcon?: DropdownPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the bank icon's DOM element.
+     */
+    blankIcon?: DropdownPassThroughOptionType<T>;
     /**
      * 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'

components/lib/dropdown/Dropdown.vue

@@ -127,7 +127,13 @@
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
                                         >
-                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
+                                            <template v-if="showTick">
+                                                <CheckIcon v-if="isSelected(option)" :class="cx('tickIcon')" v-bind="ptm('tickIcon')" />
+                                                <BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
+                                            </template>
+                                            <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
+                                                <span v-bind="ptm('itemLabel')">{{ getOptionLabel(option) }}</span>
+                                            </slot>
                                         </li>
                                     </template>
                                     <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
@@ -169,6 +175,8 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import BlankIcon from 'primevue/icons/blank';
+import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import FilterIcon from 'primevue/icons/filter';
 import SpinnerIcon from 'primevue/icons/spinner';
@@ -962,12 +970,14 @@ export default {
         ripple: Ripple
     },
     components: {
-        VirtualScroller: VirtualScroller,
+        VirtualScroller,
-        Portal: Portal,
+        Portal,
-        TimesIcon: TimesIcon,
+        TimesIcon,
-        ChevronDownIcon: ChevronDownIcon,
+        ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
+        SpinnerIcon,
-        FilterIcon: FilterIcon
+        FilterIcon,
+        CheckIcon,
+        BlankIcon
     }
 };
 </script>

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'
 };
 

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<BlankIcon>;
+    }
+}
+
+export default BlankIcon;

components/lib/icons/blank/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" v-bind="pti()">
+        <rect width="1" height="1" fill="currentColor" fill-opacity="0" />
+    </svg>
+</template>
+<script>
+import BaseIcon from 'primevue/baseicon';
+
+export default {
+    name: 'BlankIcon',
+    extends: BaseIcon
+};
+</script>

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"
+    }
+}

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
          */

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<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item label's DOM element."
+                        },
+                        {
+                            "name": "tickIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the tick icon's DOM element."
+                        },
+                        {
+                            "name": "blankIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "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 <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItem</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -35679,7 +35720,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Current index of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">orientation</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Current orientation of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">size</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Current width of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItem</span>, <span class=\"doc-option-parameter-type\">// Current value of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Current index of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">orientation</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Current orientation of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">size</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Current width of the meter item</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -35691,7 +35732,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItem</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -35703,7 +35744,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItem</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -35715,7 +35756,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItemOptions</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">value</span>: <span class=\"doc-option-parameter-type\">MeterItem</span>, <span class=\"doc-option-parameter-type\">// Current value of the component</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">totalPercent</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Total percent of the metergroup items</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">percentages</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Array of sequential sum of values of metergroup items</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",

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'),

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',