Fixed #6534 - TreeSelect: new option slot

pull/6537/head
tugcekucukoglu 2024-10-07 12:42:07 +03:00
parent caf25f2be6
commit 0125015937
4 changed files with 32 additions and 7 deletions

View File

@ -357,6 +357,10 @@ export interface TreeSlots {
* Selection state
*/
selected: boolean;
/**
* Expanded state
*/
expanded: boolean;
}): VNode[];
/**
* Custom loading icon template.

View File

@ -46,7 +46,7 @@
<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('nodeLabel')" v-bind="getPTOptions('nodeLabel')" @keydown.stop>
<component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" :selected="checkboxMode ? checked : selected" />
<component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" :expanded="expanded" :selected="checkboxMode ? checked : selected" />
<template v-else>{{ label(node) }}</template>
</span>
</div>

View File

@ -343,6 +343,24 @@ export interface TreeSelectSlots {
*/
placeholder: string;
}): VNode[];
/**
* Custom option template.
* @param {Object} scope - option slot's params.
*/
option(scope: {
/**
* Current node
*/
node: TreeNode | any;
/**
* Selection state
*/
selected: boolean;
/**
* Expanded state
*/
expanded: boolean;
}): VNode[];
/**
* Custom header template.
* @param {Object} scope - header slot's params.

View File

@ -84,15 +84,18 @@
:unstyled="unstyled"
:pt="ptm('pcTree')"
>
<template v-if="$slots.itemtoggleicon" #toggleicon="iconProps">
<slot name="itemtoggleicon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
<template v-if="$slots.option" #default="optionSlotProps">
<slot name="option" :node="optionSlotProps.node" :expanded="optionSlotProps.expanded" :selected="optionSlotProps.selected" />
</template>
<template v-if="$slots.itemtoggleicon" #toggleicon="iconSlotProps">
<slot name="itemtoggleicon" :node="iconSlotProps.node" :expanded="iconSlotProps.expanded" :class="iconSlotProps.class" />
</template>
<!--TODO: itemtogglericon deprecated since v4.0-->
<template v-else-if="$slots.itemtogglericon" #togglericon="iconProps">
<slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
<template v-else-if="$slots.itemtogglericon" #togglericon="iconSlotProps">
<slot name="itemtogglericon" :node="iconSlotProps.node" :expanded="iconSlotProps.expanded" :class="iconSlotProps.class" />
</template>
<template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
<slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
<template v-if="$slots.itemcheckboxicon" #checkboxicon="iconSlotProps">
<slot name="itemcheckboxicon" :checked="iconSlotProps.checked" :partialChecked="iconSlotProps.partialChecked" :class="iconSlotProps.class" />
</template>
</TSTree>
<div v-if="emptyOptions && !loading" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">