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

Refactor #5681, #5682, #5683 - For AutoComplete, CascadeSelect, Tree, TreeSelect

pull/5701/head
tugcekucukoglu 2024-05-03 14:46:02 +03:00
parent 4c481aef89
commit d9d2be9cca
16 changed files with 213 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/lib/autocomplete/AutoComplete.d.ts vendored
View File

@ -149,26 +149,26 @@ export interface AutoCompletePassThroughOptions {
*/ */
input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType; input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the input multiple's DOM element.
*/ */
container?: AutoCompletePassThroughOptionType; inputMultiple?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the token's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
token?: AutoCompletePassThroughOptionType; chip?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
tokenLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>; chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the remove token icon's DOM element. * Used to pass attributes to the chip icon's DOM element.
*/ */
removeTokenIcon?: AutoCompletePassThroughOptionType; chipIcon?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the input token's DOM element. * Used to pass attributes to the input chip's DOM element.
*/ */
inputToken?: AutoCompletePassThroughOptionType; inputChip?: AutoCompletePassThroughOptionType;
/** /**
* Used to pass attributes to the loading icon's DOM element. * Used to pass attributes to the loading icon's DOM element.
*/ */
@ -441,6 +441,10 @@ export interface AutoCompleteProps {
* @deprecated since v3.27.0. Use 'removetokenicon' slot. * @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/ */
removeTokenIcon?: string | undefined; removeTokenIcon?: string | undefined;
/**
* Icon to display in chip remove action.
*/
chipIcon?: string | undefined;
/** /**
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
* @type {VirtualScrollerProps} * @type {VirtualScrollerProps}
@ -658,7 +662,9 @@ export interface AutoCompleteSlots {
class: string; class: string;
}): VNode[]; }): VNode[];
/** /**
* Custom remove token icon template in multiple mode. * @deprecated since v4.0. Use 'chipicon' slot instead.
* Custom chip icon template in multiple mode.
* @param {Object} scope - chip icon slot's params.
*/ */
removetokenicon(scope: { removetokenicon(scope: {
/** /**
@ -681,6 +687,31 @@ export interface AutoCompleteSlots {
*/ */
removeCallback: (event: Event, index: number) => void; removeCallback: (event: Event, index: number) => void;
}): VNode[]; }): VNode[];
/**
* Custom chip icon template in multiple mode.
* @param {Object} scope - chip icon slot's params.
*/
chipicon(scope: {
/**
* Style class of the icon.
*/
class: string;
/**
* Index of the token.
*/
index: number;
/**
* Remove token icon function.
* @param {Event} event - Browser event
* @deprecated since v3.39.0. Use 'removeCallback' property instead.
*/
onClick: (event: Event, index: number) => void;
/**
* Remove token icon function.
* @param {Event} event - Browser event
*/
removeCallback: (event: Event, index: number) => void;
}): VNode[];
/** /**
* Custom loading icon template. * Custom loading icon template.
*/ */

11
components/lib/autocomplete/AutoComplete.vue
View File

@ -33,7 +33,7 @@
<ul <ul
v-if="multiple" v-if="multiple"
ref="multiContainer" ref="multiContainer"
:class="cx('container')" :class="cx('inputMultiple')"
tabindex="-1" tabindex="-1"
role="listbox" role="listbox"
aria-orientation="horizontal" aria-orientation="horizontal"
@ -41,7 +41,7 @@
@focus="onMultipleContainerFocus" @focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur" @blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown" @keydown="onMultipleContainerKeyDown"
v-bind="ptm('container')" v-bind="ptm('inputMultiple')"
> >
<li <li
v-for="(option, i) of modelValue" v-for="(option, i) of modelValue"
@ -56,14 +56,15 @@
v-bind="ptm('token')" v-bind="ptm('token')"
> >
<slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)"> <slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
<Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('tokenLabel')"> <!-- TODO: removetokenicon and removeTokenIcon deprecated since v4.0. Use chipicon slot and chipIcon prop-->
<Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon || chipIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')">
<template #removeicon> <template #removeicon>
<slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" /> <slot :name="$slots.removetokenicon ? 'removetokenicon' : 'chipicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
</template> </template>
</Chip> </Chip>
</slot> </slot>
</li> </li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')"> <li :class="cx('inputChip')" role="option" v-bind="ptm('inputChip')">
<input <input
ref="focusInput" ref="focusInput"
:id="inputId" :id="inputId"

10
components/lib/autocomplete/BaseAutoComplete.vue
View File

@ -107,7 +107,7 @@ export default {
}, },
dropdownIcon: { dropdownIcon: {
type: String, type: String,
default: undefined default: null
}, },
dropdownClass: { dropdownClass: {
type: [String, Object], type: [String, Object],
@ -115,11 +115,15 @@ export default {
}, },
loadingIcon: { loadingIcon: {
type: String, type: String,
default: undefined default: null
}, },
removeTokenIcon: { removeTokenIcon: {
type: String, type: String,
default: undefined default: null
},
chipIcon: {
type: String,
default: null
}, },
virtualScrollerOptions: { virtualScrollerOptions: {
type: Object, type: Object,

10
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -233,21 +233,21 @@ const classes = {
} }
], ],
input: 'p-autocomplete-input', input: 'p-autocomplete-input',
container: ({ props, instance }) => [ inputMultiple: ({ props, instance }) => [
'p-autocomplete-input-multiple', 'p-autocomplete-input-multiple',
{ {
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
} }
], ],
token: ({ instance, i }) => [ chip: ({ instance, i }) => [
'p-autocomplete-chip', 'p-autocomplete-chip',
{ {
'p-focus': instance.focusedMultipleOptionIndex === i 'p-focus': instance.focusedMultipleOptionIndex === i
} }
], ],
tokenLabel: 'p-autocomplete-chip-label', chipLabel: 'p-autocomplete-chip-label',
removeTokenIcon: 'p-autocomplete-chip-icon', chipIcon: 'p-autocomplete-chip-icon',
inputToken: 'p-autocomplete-input-chip', inputChip: 'p-autocomplete-input-chip',
loadingIcon: 'p-autocomplete-loader', loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown', dropdownButton: 'p-autocomplete-dropdown',
panel: ({ instance }) => [ panel: ({ instance }) => [

12
components/lib/cascadeselect/BaseCascadeSelect.vue
View File

@ -52,6 +52,18 @@ export default {
type: null, type: null,
default: null default: null
}, },
overlayClass: {
type: [String, Object],
default: null
},
overlayStyle: {
type: Object,
default: null
},
overlayProps: {
type: null,
default: null
},
appendTo: { appendTo: {
type: [String, Object], type: [String, Object],
default: 'body' default: 'body'

43
components/lib/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -91,7 +91,7 @@ export interface CascadeSelectPassThroughOptions {
/** /**
* Used to pass attributes to the dropdown button's DOM element. * Used to pass attributes to the dropdown button's DOM element.
*/ */
dropdownButton?: CascadeSelectPassThroughOptionType; dropdown?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the dropdown icon's DOM element. * Used to pass attributes to the dropdown icon's DOM element.
*/ */
@ -101,9 +101,13 @@ export interface CascadeSelectPassThroughOptions {
*/ */
loadingIcon?: CascadeSelectPassThroughOptionType; loadingIcon?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the panel's DOM element. * Used to pass attributes to the overlay's DOM element.
*/ */
panel?: CascadeSelectPassThroughOptionType; overlay?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the list container's DOM element.
*/
listContainer?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */
@ -113,13 +117,17 @@ export interface CascadeSelectPassThroughOptions {
*/ */
item?: CascadeSelectPassThroughOptionType; item?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: CascadeSelectPassThroughOptionType; itemContent?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the text's DOM element. * Used to pass attributes to the item text's DOM element.
*/ */
text?: CascadeSelectPassThroughOptionType; itemText?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the item list's DOM element.
*/
itemList?: CascadeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the group icon's DOM element. * Used to pass attributes to the group icon's DOM element.
*/ */
@ -307,17 +315,32 @@ export interface CascadeSelectProps {
*/ */
inputProps?: InputHTMLAttributes | undefined; inputProps?: InputHTMLAttributes | undefined;
/** /**
* Inline style of the overlay panel. * @deprecated since v4.0. Use 'overlayStyle' prop.
* Inline style of the overlay overlay.
*/ */
panelStyle?: object | undefined; panelStyle?: object | undefined;
/** /**
* Style class of the overlay panel. * @deprecated since v4.0. Use 'overlayClass' prop.
* Style class of the overlay overlay.
*/ */
panelClass?: string | object | undefined; panelClass?: string | object | undefined;
/** /**
* Used to pass all properties of the HTMLDivElement to the overlay panel inside the component. * @deprecated since v4.0. Use 'overlayProps' prop.
* Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
*/ */
panelProps?: HTMLAttributes | undefined; panelProps?: HTMLAttributes | undefined;
/**
* Inline style of the overlay overlay.
*/
overlayStyle?: object | undefined;
/**
* Style class of the overlay overlay.
*/
overlayClass?: string | object | undefined;
/**
* Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
*/
overlayProps?: HTMLAttributes | undefined;
/** /**
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself. * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
* @defaultValue body * @defaultValue body

14
components/lib/cascadeselect/CascadeSelect.vue
View File

@ -30,7 +30,7 @@
{{ label }} {{ label }}
</slot> </slot>
</span> </span>
<div :class="cx('dropdownButton')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdownButton')"> <div :class="cx('dropdown')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdown')">
<slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')"> <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
<span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" /> <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
@ -44,8 +44,16 @@
</span> </span>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }"> <div
<div :class="cx('wrapper')" v-bind="ptm('wrapper')"> v-if="overlayVisible"
:ref="overlayRef"
:class="[cx('overlay'), panelClass, overlayClass]"
:style="[panelStyle, overlayStyle]"
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
>
<div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<CascadeSelectSub <CascadeSelectSub
:id="id + '_tree'" :id="id + '_tree'"
role="tree" role="tree"

8
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')"> <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('itemList')">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)"> <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li <li
:id="getOptionId(processedOption)" :id="getOptionId(processedOption)"
@ -17,9 +17,9 @@
:data-p-focus="isOptionFocused(processedOption)" :data-p-focus="isOptionFocused(processedOption)"
:data-p-disabled="isOptionDisabled(processedOption)" :data-p-disabled="isOptionDisabled(processedOption)"
> >
<div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')"> <div v-ripple :class="cx('itemContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'itemContent')">
<component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" /> <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
<span v-else :class="cx('text')" v-bind="getPTOptions(processedOption, index, 'text')">{{ getOptionLabelToRender(processedOption) }}</span> <span v-else :class="cx('itemText')" v-bind="getPTOptions(processedOption, index, 'itemText')">{{ getOptionLabelToRender(processedOption) }}</span>
<template v-if="isOptionGroup(processedOption)"> <template v-if="isOptionGroup(processedOption)">
<component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" /> <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" />
<span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" /> <span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
@ -29,7 +29,7 @@
<CascadeSelectSub <CascadeSelectSub
v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)" v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
role="group" role="group"
:class="cx('sublist')" :class="cx('itemList')"
:selectId="selectId" :selectId="selectId"
:focusedOptionId="focusedOptionId" :focusedOptionId="focusedOptionId"
:options="getOptionGroupChildren(processedOption)" :options="getOptionGroupChildren(processedOption)"

14
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -209,17 +209,17 @@ const classes = {
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0) 'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
} }
], ],
dropdownButton: 'p-cascadeselect-dropdown', dropdown: 'p-cascadeselect-dropdown',
loadingIcon: 'p-cascadeselect-loading-icon', loadingIcon: 'p-cascadeselect-loading-icon',
dropdownIcon: 'p-cascadeselect-dropdown-icon', dropdownIcon: 'p-cascadeselect-dropdown-icon',
panel: ({ instance }) => [ overlay: ({ instance }) => [
'p-cascadeselect-overlay p-component', 'p-cascadeselect-overlay p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
wrapper: 'p-cascadeselect-list-container', listContainer: 'p-cascadeselect-list-container',
rootList: 'p-cascadeselect-list', list: 'p-cascadeselect-list',
item: ({ instance, processedOption }) => [ item: ({ instance, processedOption }) => [
'p-cascadeselect-item', 'p-cascadeselect-item',
{ {
@ -229,10 +229,10 @@ const classes = {
'p-disabled': instance.isOptionDisabled(processedOption) 'p-disabled': instance.isOptionDisabled(processedOption)
} }
], ],
content: 'p-cascadeselect-item-content', itemContent: 'p-cascadeselect-item-content',
text: 'p-cascadeselect-item-text', itemText: 'p-cascadeselect-item-text',
groupIcon: 'p-cascadeselect-group-icon', groupIcon: 'p-cascadeselect-group-icon',
sublist: 'p-cascadeselect-overlay p-cascadeselect-item-list' itemList: 'p-cascadeselect-overlay p-cascadeselect-item-list'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

45
components/lib/tree/Tree.d.ts vendored
View File

@ -112,35 +112,35 @@ export interface TreePassThroughOptions<T = any> {
* Used to pass attributes to the input's DOM element. * Used to pass attributes to the input's DOM element.
* @see {@link InputTextPassThroughOptions} * @see {@link InputTextPassThroughOptions}
*/ */
input?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>; filterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the search icon's DOM element. * Used to pass attributes to the filter icon's DOM element.
*/ */
searchIcon?: TreePassThroughOptionType<T>; filterIcon?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the wrapper's DOM element. * Used to pass attributes to the wrapper's DOM element.
*/ */
wrapper?: TreePassThroughOptionType<T>; wrapper?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the root children's DOM element.
*/ */
container?: TreePassThroughOptionType<T>; rootChildren?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the node's DOM element. * Used to pass attributes to the node's DOM element.
*/ */
node?: TreePassThroughOptionType<T>; node?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the node content's DOM element.
*/ */
content?: TreePassThroughOptionType<T>; nodeContent?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the toggler's DOM element. * Used to pass attributes to the node toggle button's DOM element.
*/ */
toggler?: TreePassThroughOptionType<T>; nodeToggleButton?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the toggler icon's DOM element. * Used to pass attributes to the node toggle icon's DOM element.
*/ */
togglerIcon?: TreePassThroughOptionType<T>; nodeToggleIcon?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the checkbox's DOM element. * Used to pass attributes to the checkbox's DOM element.
*/ */
@ -150,17 +150,17 @@ export interface TreePassThroughOptions<T = any> {
*/ */
nodeIcon?: TreePassThroughOptionType<T>; nodeIcon?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the node label's DOM element.
*/ */
label?: TreePassThroughOptionType<T>; nodeLabel?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the subgroup's DOM element. * Used to pass attributes to the node children's DOM element.
*/ */
subgroup?: TreePassThroughOptionType<T>; nodeChildren?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the loading overlay's DOM element. * Used to pass attributes to the mask's DOM element.
*/ */
loadingOverlay?: TreePassThroughOptionType<T>; mask?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the loading icon's DOM element. * Used to pass attributes to the loading icon's DOM element.
*/ */
@ -349,6 +349,7 @@ export interface TreeSlots {
class: string; class: string;
}): VNode[]; }): VNode[];
/** /**
* @deprecated since v4.0. Use 'filtericon' slot instead.
* Custom search icon template. * Custom search icon template.
* @param {Object} scope - searchicon slot's params. * @param {Object} scope - searchicon slot's params.
*/ */
@ -358,6 +359,16 @@ export interface TreeSlots {
*/ */
class: string; class: string;
}): VNode[]; }): VNode[];
/**
* Custom search icon template.
* @param {Object} scope - filtericon slot's params.
*/
filtericon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/** /**
* Custom toggler icon template. * Custom toggler icon template.
* @param {Object} scope - togglericon slot's params. * @param {Object} scope - togglericon slot's params.

11
components/lib/tree/Tree.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<template v-if="loading && loadingMode === 'mask'"> <template v-if="loading && loadingMode === 'mask'">
<div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')"> <div :class="cx('mask')" v-bind="ptm('mask')">
<slot name="loadingicon" :class="cx('loadingIcon')"> <slot name="loadingicon" :class="cx('loadingIcon')">
<i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" /> <i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
<SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" /> <SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" />
@ -9,13 +9,14 @@
</div> </div>
</template> </template>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')"> <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<InputText v-model="filterValue" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" /> <InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" />
<slot name="searchicon" :class="cx('searchIcon')"> <!--TODO: searchicon deprecated since v4.0-->
<SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" /> <slot :name="$slots.searchicon ? 'searchicon' : 'filtericon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
</slot> </slot>
</div> </div>
<div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')"> <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
<ul :class="cx('container')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')"> <ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
<TreeNode <TreeNode
v-for="(node, index) of valueToRender" v-for="(node, index) of valueToRender"
:key="node.key" :key="node.key"

24
components/lib/tree/TreeNode.vue
View File

@ -12,18 +12,18 @@
:aria-checked="ariaChecked" :aria-checked="ariaChecked"
:tabindex="index === 0 ? 0 : -1" :tabindex="index === 0 ? 0 : -1"
@keydown="onKeyDown" @keydown="onKeyDown"
v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')" v-bind="level === 1 ? getPTOptions('node') : ptm('nodeChildren')"
> >
<div :class="cx('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable"> <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
<button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')"> <button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
<template v-if="node.loading && loadingMode === 'icon'"> <template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" /> <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" /> <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
</template> </template>
<template v-else> <template v-else>
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" /> <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" /> <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
</template> </template>
</button> </button>
<Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :indeterminate="partialChecked" :class="cx('nodeCheckbox')" :tabindex="-1" :unstyled="unstyled" :pt="getPTOptions('nodeCheckbox')" :data-p-partialchecked="partialChecked"> <Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :indeterminate="partialChecked" :class="cx('nodeCheckbox')" :tabindex="-1" :unstyled="unstyled" :pt="getPTOptions('nodeCheckbox')" :data-p-partialchecked="partialChecked">
@ -33,12 +33,12 @@
</Checkbox> </Checkbox>
<component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]" v-bind="getPTOptions('nodeIcon')"></component> <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]" v-bind="getPTOptions('nodeIcon')"></component>
<span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span> <span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
<span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop> <span :class="cx('nodeLabel')" v-bind="getPTOptions('nodeLabel')" @keydown.stop>
<component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" /> <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
<template v-else>{{ label(node) }}</template> <template v-else>{{ label(node) }}</template>
</span> </span>
</div> </div>
<ul v-if="hasChildren && expanded" :class="cx('subgroup')" role="group" v-bind="ptm('subgroup')"> <ul v-if="hasChildren && expanded" :class="cx('nodeChildren')" role="group" v-bind="ptm('nodeChildren')">
<TreeNode <TreeNode
v-for="childNode of node.children" v-for="childNode of node.children"
:key="childNode.key" :key="childNode.key"
@ -134,7 +134,7 @@ export default {
}); });
}, },
onClick(event) { onClick(event) {
if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="toggler"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="toggler"]')) { if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="nodetogglebutton"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="nodetogglebutton"]')) {
this.toggleClicked = false; this.toggleClicked = false;
return; return;
@ -199,7 +199,7 @@ export default {
} }
}, },
onArrowDown(event) { onArrowDown(event) {
const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target; const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
const listElement = nodeElement.children[1]; const listElement = nodeElement.children[1];
if (listElement) { if (listElement) {
@ -244,7 +244,7 @@ export default {
}); });
}, },
onArrowLeft(event) { onArrowLeft(event) {
const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]'); const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="nodetogglebutton"]');
if (this.level === 0 && !this.expanded) { if (this.level === 0 && !this.expanded) {
return false; return false;
@ -272,7 +272,7 @@ export default {
this.setAllNodesTabIndexes(); this.setAllNodesTabIndexes();
}, },
setAllNodesTabIndexes() { setAllNodesTabIndexes() {
const nodes = DomHandler.find(this.$refs.currentNode.closest('[data-pc-section="container"]'), '[role="treeitem"]'); const nodes = DomHandler.find(this.$refs.currentNode.closest('[data-pc-section="rootchildren"]'), '[role="treeitem"]');
const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true'); const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');

24
components/lib/tree/style/TreeStyle.js
View File

@ -159,7 +159,7 @@ const theme = ({ dt }) => `
height: 2rem; height: 2rem;
} }
.p-tree-mask { .p-tree .p-tree-mask {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
display: flex; display: flex;
@ -188,15 +188,15 @@ const classes = {
'p-tree-flex-scrollable': props.scrollHeight === 'flex' 'p-tree-flex-scrollable': props.scrollHeight === 'flex'
} }
], ],
loadingOverlay: 'p-tree-mask p-component-overlay', mask: 'p-tree-mask p-component-overlay',
loadingIcon: 'p-tree-loading-icon', loadingIcon: 'p-tree-loading-icon',
filterContainer: 'p-tree-filter-container', filterContainer: 'p-tree-filter-container',
input: 'p-tree-filter-input', filterInput: 'p-tree-filter-input',
searchIcon: 'p-tree-filter-icon', filterIcon: 'p-tree-filter-icon',
wrapper: 'p-tree-root', wrapper: 'p-tree-root', //TODO: discuss
container: 'p-tree-root-children', rootChildren: 'p-tree-root-children',
node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }], node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }],
content: ({ instance }) => [ nodeContent: ({ instance }) => [
'p-tree-node-content', 'p-tree-node-content',
instance.node.styleClass, instance.node.styleClass,
{ {
@ -204,13 +204,13 @@ const classes = {
'p-tree-node-selected': instance.checkboxMode && instance.$parentInstance.highlightOnSelect ? instance.checked : instance.selected 'p-tree-node-selected': instance.checkboxMode && instance.$parentInstance.highlightOnSelect ? instance.checked : instance.selected
} }
], ],
toggler: 'p-tree-node-toggle-button', nodeToggleButton: 'p-tree-node-toggle-button',
togglerIcon: 'p-tree-node-toggle-icon', nodeToggleIcon: 'p-tree-node-toggle-icon',
nodeTogglerIcon: 'p-tree-node-toggler-icon', //todo: discuss nodeTogglerIcon: 'p-tree-node-toggler-icon', //TODO: discuss
nodeCheckbox: 'p-tree-node-checkbox', nodeCheckbox: 'p-tree-node-checkbox',
nodeIcon: 'p-tree-node-icon', nodeIcon: 'p-tree-node-icon',
label: 'p-tree-node-label', nodeLabel: 'p-tree-node-label',
subgroup: 'p-tree-node-children' nodeChildren: 'p-tree-node-children'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

32
components/lib/treeselect/TreeSelect.d.ts vendored
View File

@ -81,22 +81,22 @@ export interface TreeSelectPassThroughOptions {
*/ */
label?: TreeSelectPassThroughOptionType; label?: TreeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the token's DOM element. * Used to pass attributes to the chip's DOM element.
*/ */
token?: TreeSelectPassThroughOptionType; chip?: TreeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the Chip. * Used to pass attributes to the Chip.
* @see {@link ChipPassThroughOptions} * @see {@link ChipPassThroughOptions}
*/ */
tokenLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>; chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
/** /**
* Used to pass attributes to the trigger's DOM element. * Used to pass attributes to the dropdown's DOM element.
*/ */
trigger?: TreeSelectPassThroughOptionType; dropdown?: TreeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the trigger icon's DOM element. * Used to pass attributes to the dropdown icon's DOM element.
*/ */
triggerIcon?: TreeSelectPassThroughOptionType; dropdownIcon?: TreeSelectPassThroughOptionType;
/** /**
* Used to pass attributes to the panel's DOM element. * Used to pass attributes to the panel's DOM element.
*/ */
@ -325,13 +325,9 @@ export interface TreeSelectSlots {
*/ */
empty(): VNode[]; empty(): VNode[];
/** /**
* @deprecated since v4.0. use 'dropdownicon' slot instead.
* Custom indicator template. * Custom indicator template.
* @deprecated since v3.27.0. Use 'triggericon' slot. * @param {Object} scope - dropdownicon slot's params.
*/
indicator(): VNode[];
/**
* Custom indicator template.
* @param {Object} scope - triggericon slot's params.
*/ */
triggericon(scope: { triggericon(scope: {
/** /**
@ -339,6 +335,16 @@ export interface TreeSelectSlots {
*/ */
class: string; class: string;
}): VNode[]; }): VNode[];
/**
* Custom indicator template.
* @param {Object} scope - dropdownicon slot's params.
*/
dropdownicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/** /**
* Custom item toggler icon template. * Custom item toggler icon template.
* @param {Object} scope - item toggler icon slot's params. * @param {Object} scope - item toggler icon slot's params.

11
components/lib/treeselect/TreeSelect.vue
View File

@ -29,17 +29,18 @@
{{ label || 'empty' }} {{ label || 'empty' }}
</template> </template>
<template v-else-if="display === 'chip'"> <template v-else-if="display === 'chip'">
<div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')"> <div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
<Chip :class="cx('tokenLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('tokenLabel')" /> <Chip :class="cx('chipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('chipLabel')" />
</div> </div>
<template v-if="emptyValue">{{ placeholder || 'empty' }}</template> <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
</template> </template>
</slot> </slot>
</div> </div>
</div> </div>
<div :class="cx('trigger')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')"> <div :class="cx('dropdown')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('dropdown')">
<slot name="triggericon" :class="cx('triggerIcon')"> <!-- TODO: triggericon is deprecated since v4.0 -->
<component :is="'ChevronDownIcon'" :class="cx('triggerIcon')" v-bind="ptm('triggerIcon')" /> <slot :name="$slots.triggericon ? 'triggericon' : 'dropdownicon'" :class="cx('dropdownIcon')">
<component :is="'ChevronDownIcon'" :class="cx('dropdownIcon')" v-bind="ptm('dropdownIcon')" />
</slot> </slot>
</div> </div>
<Portal :appendTo="appendTo"> <Portal :appendTo="appendTo">

8
components/lib/treeselect/style/TreeSelectStyle.js
View File

@ -140,10 +140,10 @@ const classes = {
'p-treeselect-label-empty': !props.placeholder && instance.emptyValue 'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
} }
], ],
token: 'p-treeselect-chip', chip: 'p-treeselect-chip',
tokenLabel: 'p-treeselect-chip-label', chipLabel: 'p-treeselect-chip-label',
trigger: 'p-treeselect-dropdown', dropdown: 'p-treeselect-dropdown',
triggerIcon: 'p-treeselect-dropdown-icon', dropdownIcon: 'p-treeselect-dropdown-icon',
panel: ({ instance }) => [ panel: ({ instance }) => [
'p-treeselect-overlay p-component', 'p-treeselect-overlay p-component',
{ {