primevue 4.4.0 → 4.5.0

package/tree/BaseTree.vue

@@ -70,7 +70,11 @@ export default {
             type: Number,
             default: 0
         },
-        dragdrop: {
+        draggableNodes: {
+            type: Boolean,
+            default: null
+        },
+        droppableNodes: {
             type: Boolean,
             default: null
         },

package/tree/Tree.vue

@@ -35,15 +35,19 @@
                     :selectionKeys="selectionKeys"
                     @checkbox-change="onCheckboxChange"
                     :loadingMode="loadingMode"
+                    :draggableNodes="draggableNodes"
+                    :droppableNodes="droppableNodes"
                     :draggableScope="draggableScope"
-                    :dragdrop="dragdrop"
                     :validateDrop="validateDrop"
                     @node-drop="onNodeDrop"
+                    @node-dragenter="onNodeDragEnter"
+                    @node-dragleave="onNodeDragLeave"
+                    @value-change="onValueChanged"
                     :unstyled="unstyled"
                     :pt="pt"
                 ></TreeNode>
             </ul>
-            <div v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+            <div v-else-if="empty && !$pcTreeSelect" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
                 <slot name="empty">
                     {{ emptyMessageText }}
                 </slot>
@@ -69,7 +73,7 @@ export default {
     name: 'Tree',
     extends: BaseTree,
     inheritAttrs: false,
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter', 'node-drop', 'update:value'],
+    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter', 'node-drop', 'node-dragenter', 'node-dragleave', 'update:value', 'drag-enter', 'drag-leave'],
     data() {
         return {
             d_expandedKeys: this.expandedKeys || {},
@@ -81,6 +85,9 @@ export default {
             dragHover: null
         };
     },
+    inject: {
+        $pcTreeSelect: { default: null }
+    },
     dragDropService: null,
     dragStartCleanup: null,
     dragStopCleanup: null,
@@ -90,7 +97,7 @@ export default {
         }
     },
     mounted() {
-        if (this.dragdrop) {
+        if (this.droppableNodes) {
             this.dragDropService = useTreeDragDropService();
 
             this.dragStartCleanup = this.dragDropService.onDragStart((event) => {
@@ -272,6 +279,16 @@ export default {
         onNodeDrop(event) {
             this.$emit('node-drop', event);
         },
+        onNodeDragEnter(event) {
+            this.$emit('node-dragenter', event);
+        },
+        onNodeDragLeave(event) {
+            this.$emit('node-dragleave', event);
+        },
+        onValueChanged(event) {
+            this.dragNodeSubNodes.splice(this.dragNodeIndex, 1);
+            this.$emit('update:value', event.nodes);
+        },
         allowDrop(dragNode, dropNode, dragNodeScope) {
             if (!dragNode) {
                 //prevent random html elements to be dragged
@@ -305,49 +322,79 @@ export default {
         allowNodeDrop(dropNode) {
             return this.allowDrop(this.dragNode, dropNode, this.dragNodeScope);
         },
-        isValidDragScope(dragScope) {
-            let dropScope = this.droppableScope;
-
-            if (dropScope !== null) {
-                if (typeof dropScope === 'string') {
-                    if (typeof dragScope === 'string') return dropScope === dragScope;
-                    else if (Array.isArray(dragScope)) return dragScope.indexOf(dropScope) != -1;
-                } else if (Array.isArray(dropScope)) {
-                    if (typeof dragScope === 'string') {
-                        return dropScope.indexOf(dragScope) != -1;
-                    } else if (Array.isArray(dragScope)) {
-                        for (let s of dropScope) {
-                            for (let ds of dragScope) {
-                                if (s === ds) {
-                                    return true;
-                                }
-                            }
+        hasCommonScope(dragScope, dropScope) {
+            if (dragScope === null && dropScope === null) {
+                return true;
+            } else if (dragScope === null || dropScope === null) {
+                return false;
+            }
+
+            if (typeof dropScope === 'string') {
+                if (typeof dragScope === 'string') {
+                    return dragScope === dropScope;
+                } else if (Array.isArray(dragScope)) {
+                    return dragScope.indexOf(dropScope) !== -1;
+                }
+            } else if (Array.isArray(dropScope)) {
+                if (typeof dragScope === 'string') {
+                    return dropScope.indexOf(dragScope) !== -1;
+                } else if (Array.isArray(dragScope)) {
+                    for (let ds of dragScope) {
+                        if (dropScope.indexOf(ds) !== -1) {
+                            return true;
                         }
                     }
+                    return false;
                 }
-                return false;
-            } else {
+            }
+
+            return false;
+        },
+        isValidDragScope(dragScope) {
+            if (this.droppableScope === null) {
                 return true;
             }
+
+            return this.hasCommonScope(dragScope, this.droppableScope);
+        },
+        isSameTreeScope(dragScope) {
+            return this.hasCommonScope(dragScope, this.draggableScope);
         },
         onDragOver(event) {
-            if (this.dragdrop && (!this.value || this.value.length === 0)) {
-                event.dataTransfer.dropEffect = 'move';
-                event.preventDefault();
+            if (this.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+                event.dataTransfer.dropEffect = 'copy';
+            } else {
+                event.dataTransfer.dropEffect = 'none';
             }
+
+            event.preventDefault();
         },
-        onDragEnter() {
-            if (this.dragdrop && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+        onDragEnter(event) {
+            if (this.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
                 this.dragHover = true;
+
+                this.$emit('drag-enter', {
+                    originalEvent: event,
+                    value: this.value,
+                    dragNode: this.dragNode,
+                    dragNodeScope: this.dragNodeScope
+                });
             }
         },
         onDragLeave(event) {
-            if (this.dragdrop) {
+            if (this.droppableNodes) {
                 let rect = event.currentTarget.getBoundingClientRect();
 
-                if (event.x > rect.left + rect.width || event.x < rect.left || event.y > rect.top + rect.height || event.y < rect.top) {
+                if (event.x >= parseInt(rect.right) || event.x <= parseInt(rect.left) || event.y >= parseInt(rect.bottom) || event.y <= parseInt(rect.top)) {
                     this.dragHover = false;
                 }
+
+                this.$emit('drag-leave', {
+                    originalEvent: event,
+                    value: this.value,
+                    dragNode: this.dragNode,
+                    dragNodeScope: this.dragNodeScope
+                });
             }
         },
         processTreeDrop(dragNode, dragNodeIndex) {
@@ -360,16 +407,25 @@ export default {
             });
         },
         onDrop(event) {
-            if (this.dragdrop && (!this.value || this.value.length === 0)) {
+            if (this.droppableNodes) {
                 event.preventDefault();
                 let dragNode = this.dragNode;
 
                 if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
                     let dragNodeIndex = this.dragNodeIndex;
 
+                    if (this.isSameTreeScope(this.dragNodeScope)) {
+                        this.dragDropService.stopDrag({
+                            node: dragNode
+                        });
+
+                        return;
+                    }
+
                     if (this.validateDrop) {
                         this.$emit('node-drop', {
                             originalEvent: event,
+                            value: this.value,
                             dragNode: dragNode,
                             dropNode: null,
                             index: dragNodeIndex,
@@ -380,6 +436,7 @@ export default {
                     } else {
                         this.$emit('node-drop', {
                             originalEvent: event,
+                            value: this.value,
                             dragNode: dragNode,
                             dropNode: null,
                             index: dragNodeIndex

package/tree/TreeNode.vue

@@ -23,6 +23,7 @@
             @touchend="onTouchEnd"
             @dragstart="onNodeDragStart"
             @dragover="onNodeDragOver"
+            @dragenter="onNodeDragEnter"
             @dragleave="onNodeDragLeave"
             @dragend="onNodeDragEnd"
             @drop="onNodeDrop"
@@ -84,9 +85,13 @@
                 :selectionKeys="selectionKeys"
                 @checkbox-change="propagateUp"
                 :draggableScope="draggableScope"
-                :dragdrop="dragdrop"
+                :draggableNodes="draggableNodes"
+                :droppableNodes="droppableNodes"
                 :validateDrop="validateDrop"
-                @node-drop="onChildNodeDrop"
+                @node-drop="$emit('node-drop', $event)"
+                @node-dragenter="$emit('node-dragenter', $event)"
+                @node-dragleave="$emit('node-dragleave', $event)"
+                @value-change="$emit('value-change', $event)"
                 :unstyled="unstyled"
                 :pt="pt"
             />
@@ -109,7 +114,7 @@ export default {
     name: 'TreeNode',
     hostName: 'Tree',
     extends: BaseComponent,
-    emits: ['node-toggle', 'node-click', 'checkbox-change', 'node-drop'],
+    emits: ['node-toggle', 'node-click', 'checkbox-change', 'node-drop', 'value-change', 'node-dragenter', 'node-dragleave'],
     props: {
         node: {
             type: null,
@@ -151,7 +156,11 @@ export default {
             type: [String, Array],
             default: null
         },
-        dragdrop: {
+        draggableNodes: {
+            type: Boolean,
+            default: null
+        },
+        droppableNodes: {
             type: Boolean,
             default: null
         },
@@ -342,46 +351,85 @@ export default {
         onTabKey() {
             this.setAllNodesTabIndexes();
         },
-        onChildNodeDrop(event) {
-            this.$emit('node-click', event);
+        removeNodeFromTree(nodes, nodeToRemove) {
+            return nodes.reduce((acc, node) => {
+                if (node.key === nodeToRemove.key) {
+                    return acc;
+                }
+                if (node.children && node.children.length > 0) {
+                    const updatedChildren = this.removeNodeFromTree(node.children, nodeToRemove);
+                    acc.push({ ...node, children: updatedChildren });
+                } else {
+                    acc.push(node);
+                }
+
+                return acc;
+            }, []);
+        },
+        insertNodeInSiblings(nodes, targetKey, nodeToInsert, offset) {
+            const targetIndex = nodes.findIndex((n) => n.key === targetKey);
+
+            if (targetIndex !== -1) {
+                return nodes.toSpliced(targetIndex + offset, 0, nodeToInsert);
+            }
+
+            return nodes.map((node) => {
+                if (node.children && node.children.length > 0) {
+                    return { ...node, children: this.insertNodeInSiblings(node.children, targetKey, nodeToInsert, offset) };
+                }
+
+                return node;
+            });
+        },
+        addNodeAsChild(nodes, parentKey, nodeToInsert) {
+            return nodes.map((node) => {
+                if (node.key === parentKey) {
+                    return { ...node, children: [...(node.children || []), nodeToInsert] };
+                }
+
+                if (node.children && node.children.length > 0) {
+                    return { ...node, children: this.addNodeAsChild(node.children, parentKey, nodeToInsert) };
+                }
+
+                return node;
+            });
         },
         insertNodeOnDrop() {
             const { dragNode, dragNodeIndex, dragNodeSubNodes, dragDropService } = this.$pcTree;
 
             if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
-                return;
+                return null;
             }
 
             const position = this.dropPosition;
-            const subNodes = this.subNodes || [];
-            const index = this.index || 0;
-            const dropIndex = dragNodeSubNodes === subNodes ? (dragNodeIndex > index ? index : index - 1) : index;
-
-            dragNodeSubNodes.splice(dragNodeIndex, 1);
+            let updatedNodes = this.removeNodeFromTree(this.rootNodes, dragNode);
 
             if (position < 0) {
                 // insert before a Node
-                subNodes.splice(dropIndex, 0, dragNode);
+                updatedNodes = this.insertNodeInSiblings(updatedNodes, this.node.key, dragNode, 0);
             } else if (position > 0) {
                 // insert after a Node
-                subNodes.splice(dropIndex + 1, 0, dragNode);
+                updatedNodes = this.insertNodeInSiblings(updatedNodes, this.node.key, dragNode, 1);
             } else {
                 // insert as child of a Node
-                this.node.children = this.node.children || [];
-                this.node.children.push(dragNode);
+                updatedNodes = this.addNodeAsChild(updatedNodes, this.node.key, dragNode);
             }
 
+            this.$emit('value-change', { nodes: updatedNodes });
+
             dragDropService.stopDrag({
                 node: dragNode,
-                subNodes,
+                subNodes: updatedNodes,
                 index: dragNodeIndex
             });
+
+            return updatedNodes;
         },
         onNodeDrop(event) {
-            event.preventDefault();
-            event.stopPropagation();
-
             if (this.isDroppable) {
+                event.preventDefault();
+                event.stopPropagation();
+
                 const { dragNode } = this.$pcTree;
                 const position = this.dropPosition;
                 const isValidDrop = position !== 0 || (position === 0 && this.isNodeDroppable);
@@ -390,32 +438,44 @@ export default {
                     if (this.validateDrop) {
                         this.$emit('node-drop', {
                             originalEvent: event,
+                            value: this.rootNodes,
                             dragNode: dragNode,
                             dropNode: this.node,
                             index: this.index,
                             accept: () => {
-                                this.insertNodeOnDrop();
+                                const updatedNodes = this.insertNodeOnDrop();
+
+                                this.$emit('node-drop', {
+                                    originalEvent: event,
+                                    value: updatedNodes,
+                                    dragNode: dragNode,
+                                    dropNode: this.node,
+                                    index: this.index
+                                });
                             }
                         });
                     } else {
-                        this.insertNodeOnDrop();
+                        const updatedNodes = this.insertNodeOnDrop();
+
                         this.$emit('node-drop', {
                             originalEvent: event,
+                            value: updatedNodes,
                             dragNode: dragNode,
                             dropNode: this.node,
                             index: this.index
                         });
                     }
                 }
-            }
 
-            this.isPrevDropPointHovered = false;
-            this.isNextDropPointHovered = false;
-            this.isNodeDropHovered = false;
+                this.isPrevDropPointHovered = false;
+                this.isNextDropPointHovered = false;
+                this.isNodeDropHovered = false;
+            }
         },
         onNodeDragStart(event) {
             if (this.isNodeDraggable) {
-                event.dataTransfer?.setData('text', 'data');
+                event.dataTransfer.effectAllowed = 'all';
+                event.dataTransfer.setData('text', 'data');
 
                 const target = event.currentTarget;
                 const dragEl = target.cloneNode(true);
@@ -429,7 +489,7 @@ export default {
                 toggler.style.visibility = 'hidden';
                 checkbox?.remove();
                 document.body.appendChild(dragEl);
-                event.dataTransfer?.setDragImage(dragEl, 0, 0);
+                event.dataTransfer.setDragImage(dragEl, 0, 0);
 
                 setTimeout(() => document.body.removeChild(dragEl), 0);
 
@@ -444,9 +504,8 @@ export default {
             }
         },
         onNodeDragOver(event) {
-            event.dataTransfer.dropEffect = 'move';
-
             if (this.isDroppable) {
+                event.dataTransfer.dropEffect = 'copy';
                 const nodeElement = event.currentTarget;
                 const rect = nodeElement.getBoundingClientRect();
                 const y = event.clientY - rect.top;
@@ -462,14 +521,25 @@ export default {
                 } else if (this.isNodeDroppable) {
                     this.isNodeDropHovered = true;
                 }
+            } else {
+                event.dataTransfer.dropEffect = 'none';
             }
 
-            if (this.dragdrop) {
+            if (this.droppableNodes) {
                 event.preventDefault();
                 event.stopPropagation();
             }
         },
+        onNodeDragEnter() {
+            this.$emit('node-dragenter', {
+                node: this.node
+            });
+        },
         onNodeDragLeave() {
+            this.$emit('node-dragleave', {
+                node: this.node
+            });
+
             this.isPrevDropPointHovered = false;
             this.isNextDropPointHovered = false;
             this.isNodeDropHovered = false;
@@ -667,10 +737,10 @@ export default {
             return this.parentNode ? this.parentNode.children : this.rootNodes;
         },
         isDraggable() {
-            return this.dragdrop;
+            return this.draggableNodes;
         },
         isDroppable() {
-            return this.dragdrop && this.$pcTree.allowNodeDrop(this.node);
+            return this.droppableNodes && this.$pcTree.allowNodeDrop(this.node);
         },
         isNodeDraggable() {
             return this.node?.draggable !== false && this.isDraggable;

package/tree/index.d.ts

@@ -106,6 +106,10 @@ export interface TreeNodeDropEvent {
      * Original event
      */
     originalEvent: Event;
+    /**
+     * New tree value state
+     */
+    value: TreeNode[];
     /**
      * Dragged node
      */
@@ -120,6 +124,52 @@ export interface TreeNodeDropEvent {
     index: number;
 }
 
+/**
+ * Custom tree drag enter event.
+ * @see {@link TreeEmitsOptions.drag-enter}
+ */
+export interface TreeDragEnterEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Current tree value state
+     */
+    value: TreeNode[];
+    /**
+     * Dragged node
+     */
+    dragNode: TreeNode;
+    /**
+     * Dragged node's scope
+     */
+    dragNodeScope: string;
+}
+
+/**
+ * Custom tree drag leave event.
+ * @see {@link TreeEmitsOptions.drag-leave}
+ */
+export interface TreeDragLeaveEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Current tree value state
+     */
+    value: TreeNode[];
+    /**
+     * Dragged node
+     */
+    dragNode: TreeNode;
+    /**
+     * Dragged node's scope
+     */
+    dragNodeScope: string;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link TreeProps.pt}
@@ -344,10 +394,15 @@ export interface TreeProps {
      */
     scrollHeight?: HintedString<'flex'> | undefined;
     /**
-     * Whether the nodes are draggable and droppable.
+     * Whether the nodes are draggable.
      * @defaultValue null
      */
-    dragdrop?: boolean | undefined;
+    draggableNodes?: boolean | undefined;
+    /**
+     * Whether the nodes are droppable.
+     * @defaultValue null
+     */
+    droppableNodes?: boolean | undefined;
     /**
      * Scope of the draggable nodes to match a droppableScope.
      * @defaultValue null
@@ -604,14 +659,34 @@ export interface TreeEmitsOptions {
     'node-collapse'(node: TreeNode): void;
     /**
      * Callback to invoke when a node is collapsed.
+     * @param {TreeNode} event
+     */
+    'node-drop'(event: TreeNodeDropEvent): void;
+    /**
+     * Callback to invoke when a dragged element enters a node.
      * @param {TreeNode} node - Node instance.
      */
-    'node-drop'(node: TreeNodeDropEvent): void;
+    'node-dragenter'(node: TreeNode): void;
+    /**
+     * Callback to invoke when a dragged element leaves a node.
+     * @param {TreeNode} node - Node instance.
+     */
+    'node-dragleave'(node: TreeNode): void;
     /**
      * Callback to invoke on filter input.
      * @param {TreeFilterEvent} event - Custom filter event.
      */
     'filter'(event: TreeFilterEvent): void;
+    /**
+     * Callback to invoke on drag enter.
+     * @param {TreeDragEnterEvent} event - Custom drag enter event.
+     */
+    'drag-enter'(event: TreeDragEnterEvent): void;
+    /**
+     * Callback to invoke on drag leave.
+     * @param {TreeDragLeaveEvent} event - Custom drag leave event.
+     */
+    'drag-leave'(event: TreeDragLeaveEvent): void;
 }
 
 export declare type TreeEmits = EmitFn<TreeEmitsOptions>;