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;
/**
* 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.
* @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.
*/
@ -441,6 +441,10 @@ export interface AutoCompleteProps {
* @deprecated since v3.27.0. Use 'removetokenicon' slot.
*/
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.
* @type {VirtualScrollerProps}
@ -658,7 +662,9 @@ export interface AutoCompleteSlots {
class: string;
}): 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: {
/**
@ -681,6 +687,31 @@ export interface AutoCompleteSlots {
*/
removeCallback: (event: Event, index: number) => void;
}): 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.
*/

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

@ -33,7 +33,7 @@
<ul
v-if="multiple"
ref="multiContainer"
:class="cx('container')"
:class="cx('inputMultiple')"
tabindex="-1"
role="listbox"
aria-orientation="horizontal"
@ -41,7 +41,7 @@
@focus="onMultipleContainerFocus"
@blur="onMultipleContainerBlur"
@keydown="onMultipleContainerKeyDown"
v-bind="ptm('container')"
v-bind="ptm('inputMultiple')"
>
<li
v-for="(option, i) of modelValue"
@ -56,14 +56,15 @@
v-bind="ptm('token')"
>
<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>
<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>
</Chip>
</slot>
</li>
<li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
<li :class="cx('inputChip')" role="option" v-bind="ptm('inputChip')">
<input
ref="focusInput"
:id="inputId"

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

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

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

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

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

@ -52,6 +52,18 @@ export default {
type: null,
default: null
},
overlayClass: {
type: [String, Object],
default: null
},
overlayStyle: {
type: Object,
default: null
},
overlayProps: {
type: null,
default: null
},
appendTo: {
type: [String, Object],
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.
*/
dropdownButton?: CascadeSelectPassThroughOptionType;
dropdown?: CascadeSelectPassThroughOptionType;
/**
* Used to pass attributes to the dropdown icon's DOM element.
*/
@ -101,9 +101,13 @@ export interface CascadeSelectPassThroughOptions {
*/
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.
*/
@ -113,13 +117,17 @@ export interface CascadeSelectPassThroughOptions {
*/
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.
*/
@ -307,17 +315,32 @@ export interface CascadeSelectProps {
*/
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;
/**
* Style class of the overlay panel.
* @deprecated since v4.0. Use 'overlayClass' prop.
* Style class of the overlay overlay.
*/
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;
/**
* 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.
* @defaultValue body

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

@ -30,7 +30,7 @@
{{ label }}
</slot>
</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')">
<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')" />
@ -44,8 +44,16 @@
</span>
<Portal :appendTo="appendTo">
<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 :class="cx('wrapper')" v-bind="ptm('wrapper')">
<div
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
:id="id + '_tree'"
role="tree"

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

@ -1,5 +1,5 @@
<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)">
<li
:id="getOptionId(processedOption)"
@ -17,9 +17,9 @@
:data-p-focus="isOptionFocused(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" />
<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)">
<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')" />
@ -29,7 +29,7 @@
<CascadeSelectSub
v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
role="group"
:class="cx('sublist')"
:class="cx('itemList')"
:selectId="selectId"
:focusedOptionId="focusedOptionId"
: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)
}
],
dropdownButton: 'p-cascadeselect-dropdown',
dropdown: 'p-cascadeselect-dropdown',
loadingIcon: 'p-cascadeselect-loading-icon',
dropdownIcon: 'p-cascadeselect-dropdown-icon',
panel: ({ instance }) => [
overlay: ({ instance }) => [
'p-cascadeselect-overlay p-component',
{
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
wrapper: 'p-cascadeselect-list-container',
rootList: 'p-cascadeselect-list',
listContainer: 'p-cascadeselect-list-container',
list: 'p-cascadeselect-list',
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
{
@ -229,10 +229,10 @@ const classes = {
'p-disabled': instance.isOptionDisabled(processedOption)
}
],
content: 'p-cascadeselect-item-content',
text: 'p-cascadeselect-item-text',
itemContent: 'p-cascadeselect-item-content',
itemText: 'p-cascadeselect-item-text',
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({

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.
* @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.
*/
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.
*/
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.
*/
@ -150,17 +150,17 @@ export interface TreePassThroughOptions<T = any> {
*/
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.
*/
@ -349,6 +349,7 @@ export interface TreeSlots {
class: string;
}): VNode[];
/**
* @deprecated since v4.0. Use 'filtericon' slot instead.
* Custom search icon template.
* @param {Object} scope - searchicon slot's params.
*/
@ -358,6 +359,16 @@ export interface TreeSlots {
*/
class: string;
}): 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.
* @param {Object} scope - togglericon slot's params.

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

@ -1,7 +1,7 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<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')">
<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')" />
@ -9,13 +9,14 @@
</div>
</template>
<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')" />
<slot name="searchicon" :class="cx('searchIcon')">
<SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" />
<InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" />
<!--TODO: searchicon deprecated since v4.0-->
<slot :name="$slots.searchicon ? 'searchicon' : 'filtericon'" :class="cx('filterIcon')">
<SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
</slot>
</div>
<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
v-for="(node, index) of valueToRender"
:key="node.key"

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

@ -12,18 +12,18 @@
:aria-checked="ariaChecked"
:tabindex="index === 0 ? 0 : -1"
@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">
<button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
<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('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
<template v-if="node.loading && loadingMode === 'icon'">
<component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
<SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
</template>
<template v-else>
<component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('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('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
</template>
</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">
@ -33,12 +33,12 @@
</Checkbox>
<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 :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" />
<template v-else>{{ label(node) }}</template>
</span>
</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
v-for="childNode of node.children"
:key="childNode.key"
@ -134,7 +134,7 @@ export default {
});
},
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;
return;
@ -199,7 +199,7 @@ export default {
}
},
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];
if (listElement) {
@ -244,7 +244,7 @@ export default {
});
},
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) {
return false;
@ -272,7 +272,7 @@ export default {
this.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');

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

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

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

@ -81,22 +81,22 @@ export interface TreeSelectPassThroughOptions {
*/
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.
* @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.
*/
@ -325,13 +325,9 @@ export interface TreeSelectSlots {
*/
empty(): VNode[];
/**
* @deprecated since v4.0. use 'dropdownicon' slot instead.
* Custom indicator template.
* @deprecated since v3.27.0. Use 'triggericon' slot.
*/
indicator(): VNode[];
/**
* Custom indicator template.
* @param {Object} scope - triggericon slot's params.
* @param {Object} scope - dropdownicon slot's params.
*/
triggericon(scope: {
/**
@ -339,6 +335,16 @@ export interface TreeSelectSlots {
*/
class: string;
}): 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.
* @param {Object} scope - item toggler icon slot's params.

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

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