vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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

pull/5161/head
Cagatay Civici 2024-01-24 13:49:15 +03:00
parent c6858625bc cc7a3bc09b
commit 3aeb3622ef
11 changed files with 146 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/dropdown/BaseDropdown.vue
View File

@ -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

22
components/lib/dropdown/Dropdown.d.ts vendored
View File

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

24
components/lib/dropdown/Dropdown.vue
View File

@ -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,
Portal: Portal,
TimesIcon: TimesIcon,
ChevronDownIcon: ChevronDownIcon,
SpinnerIcon: SpinnerIcon,
FilterIcon: FilterIcon
VirtualScroller,
Portal,
TimesIcon,
ChevronDownIcon,
SpinnerIcon,
FilterIcon,
CheckIcon,
BlankIcon
}
};
</script>

8
components/lib/dropdown/style/DropdownStyle.js
View File

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

12
components/lib/icons/blank/index.d.ts vendored Normal file
View File

@ -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;

13
components/lib/icons/blank/index.vue Normal file
View File

@ -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>

9
components/lib/icons/blank/package.json Normal file
View File

@ -0,0 +1,9 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts",
"browser": {
"./sfc": "./index.vue"
}
}

16
components/lib/metergroup/MeterGroup.d.ts vendored
View File

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

57
doc/common/apidoc/index.json
View File

@ -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>[]",

1
nuxt-vite.config.js
View File

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

1
rollup.config.js
View File

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