diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index ae151a87624..8c5547a2d89 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -8686,6 +8686,20 @@ "docs": "Context changed", "docsTags": [] }, + { + "event": "nodeClicked", + "detail": "string", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Node clicked event", + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ] + }, { "event": "nodeRemoved", "detail": "any", @@ -8694,6 +8708,20 @@ "composed": true, "docs": "Emits removed nodes", "docsTags": [] + }, + { + "event": "nodeToggled", + "detail": "{ id: string; isExpaned: boolean; }", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Node toggled event", + "docsTags": [ + { + "name": "since", + "text": "1.5.0" + } + ] } ], "styles": [], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 8f945d306f0..aad37315aa6 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -3820,10 +3820,20 @@ declare namespace LocalJSX { * Context changed */ "onContextChange"?: (event: IxTreeCustomEvent) => void; + /** + * Node clicked event + * @since 1.5.0 + */ + "onNodeClicked"?: (event: IxTreeCustomEvent) => void; /** * Emits removed nodes */ "onNodeRemoved"?: (event: IxTreeCustomEvent) => void; + /** + * Node toggled event + * @since 1.5.0 + */ + "onNodeToggled"?: (event: IxTreeCustomEvent<{ id: string; isExpaned: boolean }>) => void; /** * Render function of tree items */ diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx index 7bf16c638f7..abbe7aa6c08 100644 --- a/packages/core/src/components/tree/tree.tsx +++ b/packages/core/src/components/tree/tree.tsx @@ -67,6 +67,18 @@ export class Tree { */ @Event() contextChange: EventEmitter; + /** + * Node toggled event + * @since 1.5.0 + */ + @Event() nodeToggled: EventEmitter<{ id: string; isExpaned: boolean }>; + + /** + * Node clicked event + * @since 1.5.0 + */ + @Event() nodeClicked: EventEmitter; + /** * Emits removed nodes */ @@ -96,6 +108,7 @@ export class Tree { e.stopPropagation(); const context = this.getContext(list[index].id); context.isExpanded = !context.isExpanded; + this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded }); this.setContext(item.id, context); }; el.addEventListener('toggle', toggleCallback); @@ -160,6 +173,7 @@ export class Tree { const context = this.getContext(item.id); context.isSelected = true; this.setContext(item.id, context); + this.nodeClicked.emit(item.id); }; el.addEventListener('itemClick', itemClickCallback); this.itemClickListener.set(el, itemClickCallback); diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index f42d2526abb..5a905112962 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -599,6 +599,8 @@ export const IxTree = /*@__PURE__*/ defineContainer('ix-tree', undef 'renderItem', 'context', 'contextChange', + 'nodeToggled', + 'nodeClicked', 'nodeRemoved' ]);