primevue 4.3.9 → 4.4.1

package/tree/Tree.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :data-p="containerDataP" v-bind="ptmi('root')">
+    <div :class="cx('root')" @dragover="onDragOver" @dragenter="onDragEnter" @dragleave="onDragLeave" @drop="onDrop" :data-p="containerDataP" v-bind="ptmi('root')">
         <template v-if="loading && loadingMode === 'mask'">
             <div :class="cx('mask')" v-bind="ptm('mask')">
                 <slot name="loadingicon" :class="cx('loadingIcon')">
@@ -19,11 +19,12 @@
         </IconField>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" :data-p="wrapperDataP" v-bind="ptm('wrapper')">
             <slot name="header" :value="value" :expandedKeys="expandedKeys" :selectionKeys="selectionKeys" />
-            <ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
+            <ul v-if="!empty" :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"
                     :node="node"
+                    :rootNodes="valueToRender"
                     :templates="$slots"
                     :level="level + 1"
                     :index="index"
@@ -34,10 +35,23 @@
                     :selectionKeys="selectionKeys"
                     @checkbox-change="onCheckboxChange"
                     :loadingMode="loadingMode"
+                    :draggableNodes="draggableNodes"
+                    :droppableNodes="droppableNodes"
+                    :draggableScope="draggableScope"
+                    :validateDrop="validateDrop"
+                    @node-drop="onNodeDrop"
+                    @node-dragenter="onNodeDragEnter"
+                    @node-dragleave="onNodeDragLeave"
+                    @value-change="onValueChanged"
                     :unstyled="unstyled"
                     :pt="pt"
                 ></TreeNode>
             </ul>
+            <div v-else-if="empty && !$pcTreeSelect" :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
+                <slot name="empty">
+                    {{ emptyMessageText }}
+                </slot>
+            </div>
             <slot name="footer" :value="value" :expandedKeys="expandedKeys" :selectionKeys="selectionKeys" />
         </div>
     </div>
@@ -52,24 +66,65 @@ import IconField from 'primevue/iconfield';
 import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import BaseTree from './BaseTree.vue';
+import { useTreeDragDropService } from './TreeDragDropService';
 import TreeNode from './TreeNode.vue';
 
 export default {
     name: 'Tree',
     extends: BaseTree,
     inheritAttrs: false,
-    emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 'filter'],
+    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 || {},
-            filterValue: null
+            filterValue: null,
+            dragNode: null,
+            dragNodeSubNodes: null,
+            dragNodeIndex: null,
+            dragNodeScope: null,
+            dragHover: null
         };
     },
+    inject: {
+        $pcTreeSelect: { default: null }
+    },
+    dragDropService: null,
+    dragStartCleanup: null,
+    dragStopCleanup: null,
     watch: {
         expandedKeys(newValue) {
             this.d_expandedKeys = newValue;
         }
     },
+    mounted() {
+        if (this.droppableNodes) {
+            this.dragDropService = useTreeDragDropService();
+
+            this.dragStartCleanup = this.dragDropService.onDragStart((event) => {
+                this.dragNode = event.node;
+                this.dragNodeSubNodes = event.subNodes;
+                this.dragNodeIndex = event.index;
+                this.dragNodeScope = event.scope;
+            });
+
+            this.dragStopCleanup = this.dragDropService.onDragStop(() => {
+                this.dragNode = null;
+                this.dragNodeSubNodes = null;
+                this.dragNodeIndex = null;
+                this.dragNodeScope = null;
+                this.dragHover = false;
+            });
+        }
+    },
+    beforeUnmount() {
+        if (this.dragStartCleanup) {
+            this.dragStartCleanup();
+        }
+
+        if (this.dragStopCleanup) {
+            this.dragStopCleanup();
+        }
+    },
     methods: {
         onNodeToggle(node) {
             const key = node.key;
@@ -220,6 +275,177 @@ export default {
             }
 
             return matched;
+        },
+        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
+                return false;
+            } else if (this.isValidDragScope(dragNodeScope)) {
+                let allow = true;
+
+                if (dropNode) {
+                    if (dragNode === dropNode) {
+                        allow = false;
+                    } else {
+                        let parent = dropNode.parent;
+
+                        while (parent != null) {
+                            if (parent === dragNode) {
+                                allow = false;
+
+                                break;
+                            }
+
+                            parent = parent.parent;
+                        }
+                    }
+                }
+
+                return allow;
+            } else {
+                return false;
+            }
+        },
+        allowNodeDrop(dropNode) {
+            return this.allowDrop(this.dragNode, dropNode, this.dragNodeScope);
+        },
+        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;
+        },
+        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.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+                event.dataTransfer.dropEffect = 'copy';
+            } else {
+                event.dataTransfer.dropEffect = 'none';
+            }
+
+            event.preventDefault();
+        },
+        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.droppableNodes) {
+                let rect = event.currentTarget.getBoundingClientRect();
+
+                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) {
+            this.dragNodeSubNodes.splice(dragNodeIndex, 1);
+            const newValue = [...(this.value || []), dragNode];
+            this.$emit('update:value', newValue);
+
+            this.dragDropService.stopDrag({
+                node: dragNode
+            });
+        },
+        onDrop(event) {
+            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,
+                            accept: () => {
+                                this.processTreeDrop(dragNode, dragNodeIndex);
+                            }
+                        });
+                    } else {
+                        this.$emit('node-drop', {
+                            originalEvent: event,
+                            value: this.value,
+                            dragNode: dragNode,
+                            dropNode: null,
+                            index: dragNodeIndex
+                        });
+
+                        this.processTreeDrop(dragNode, dragNodeIndex);
+                    }
+                }
+            }
         }
     },
     computed: {
@@ -247,6 +473,12 @@ export default {
             if (this.filterValue && this.filterValue.trim().length > 0) return this.filteredValue;
             else return this.value;
         },
+        empty() {
+            return !this.valueToRender || this.valueToRender.length === 0;
+        },
+        emptyMessageText() {
+            return this.$primevue.config?.locale?.emptyMessage || '';
+        },
         containerDataP() {
             return cn({
                 loading: this.loading,

package/tree/TreeNode.vue

@@ -14,7 +14,23 @@
         @keydown="onKeyDown"
         v-bind="getPTOptions('node')"
     >
-        <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
+        <div v-if="isPrevDropPointActive" :class="cx('dropPoint')" aria-hidden="true" />
+        <div
+            :class="cx('nodeContent')"
+            :style="node.style"
+            :draggable="isDraggable"
+            @click="onClick"
+            @touchend="onTouchEnd"
+            @dragstart="onNodeDragStart"
+            @dragover="onNodeDragOver"
+            @dragenter="onNodeDragEnter"
+            @dragleave="onNodeDragLeave"
+            @dragend="onNodeDragEnd"
+            @drop="onNodeDrop"
+            v-bind="getPTOptions('nodeContent')"
+            :data-p-selected="checkboxMode ? checked : selected"
+            :data-p-selectable="selectable"
+        >
             <button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" :data-p-leaf="leaf" v-bind="getPTOptions('nodeToggleButton')">
                 <template v-if="node.loading && loadingMode === 'icon'">
                     <!-- TODO: nodetogglericon deprecated since v4.0-->
@@ -50,11 +66,14 @@
                 <template v-else>{{ label(node) }}</template>
             </span>
         </div>
+        <div v-if="isNextDropPointActive" :class="cx('dropPoint')" aria-hidden="true" />
         <ul v-if="hasChildren && expanded" :class="cx('nodeChildren')" role="group" v-bind="ptm('nodeChildren')">
             <TreeNode
                 v-for="(childNode, index) of node.children"
                 :key="childNode.key"
                 :node="childNode"
+                :parentNode="node"
+                :rootNodes="rootNodes"
                 :templates="templates"
                 :level="level + 1"
                 :index="index"
@@ -65,6 +84,14 @@
                 :selectionMode="selectionMode"
                 :selectionKeys="selectionKeys"
                 @checkbox-change="propagateUp"
+                :draggableScope="draggableScope"
+                :draggableNodes="draggableNodes"
+                :droppableNodes="droppableNodes"
+                :validateDrop="validateDrop"
+                @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"
             />
@@ -73,7 +100,7 @@
 </template>
 
 <script>
-import { find, findSingle, getAttribute } from '@primeuix/utils/dom';
+import { find, findSingle, getAttribute, getOuterHeight, getOuterWidth } from '@primeuix/utils';
 import BaseComponent from '@primevue/core/basecomponent';
 import CheckIcon from '@primevue/icons/check';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
@@ -87,12 +114,20 @@ export default {
     name: 'TreeNode',
     hostName: 'Tree',
     extends: BaseComponent,
-    emits: ['node-toggle', 'node-click', 'checkbox-change'],
+    emits: ['node-toggle', 'node-click', 'checkbox-change', 'node-drop', 'value-change', 'node-dragenter', 'node-dragleave'],
     props: {
         node: {
             type: null,
             default: null
         },
+        parentNode: {
+            type: null,
+            default: null
+        },
+        rootNodes: {
+            type: Array,
+            default: null
+        },
         expandedKeys: {
             type: null,
             default: null
@@ -117,10 +152,38 @@ export default {
             type: Number,
             default: null
         },
+        draggableScope: {
+            type: [String, Array],
+            default: null
+        },
+        draggableNodes: {
+            type: Boolean,
+            default: null
+        },
+        droppableNodes: {
+            type: Boolean,
+            default: null
+        },
+        validateDrop: {
+            type: Boolean,
+            default: false
+        },
         index: null
     },
     nodeTouched: false,
     toggleClicked: false,
+    inject: {
+        $pcTree: {
+            default: undefined
+        }
+    },
+    data() {
+        return {
+            isPrevDropPointHovered: false,
+            isNextDropPointHovered: false,
+            isNodeDropHovered: false
+        };
+    },
     mounted() {
         this.setAllNodesTabIndexes();
     },
@@ -288,6 +351,208 @@ export default {
         onTabKey() {
             this.setAllNodesTabIndexes();
         },
+        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 null;
+            }
+
+            const position = this.dropPosition;
+            let updatedNodes = this.removeNodeFromTree(this.rootNodes, dragNode);
+
+            if (position < 0) {
+                // insert before a Node
+                updatedNodes = this.insertNodeInSiblings(updatedNodes, this.node.key, dragNode, 0);
+            } else if (position > 0) {
+                // insert after a Node
+                updatedNodes = this.insertNodeInSiblings(updatedNodes, this.node.key, dragNode, 1);
+            } else {
+                // insert as child of a Node
+                updatedNodes = this.addNodeAsChild(updatedNodes, this.node.key, dragNode);
+            }
+
+            this.$emit('value-change', { nodes: updatedNodes });
+
+            dragDropService.stopDrag({
+                node: dragNode,
+                subNodes: updatedNodes,
+                index: dragNodeIndex
+            });
+
+            return updatedNodes;
+        },
+        onNodeDrop(event) {
+            if (this.isDroppable) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const { dragNode } = this.$pcTree;
+                const position = this.dropPosition;
+                const isValidDrop = position !== 0 || (position === 0 && this.isNodeDroppable);
+
+                if (isValidDrop) {
+                    if (this.validateDrop) {
+                        this.$emit('node-drop', {
+                            originalEvent: event,
+                            value: this.rootNodes,
+                            dragNode: dragNode,
+                            dropNode: this.node,
+                            index: this.index,
+                            accept: () => {
+                                const updatedNodes = this.insertNodeOnDrop();
+
+                                this.$emit('node-drop', {
+                                    originalEvent: event,
+                                    value: updatedNodes,
+                                    dragNode: dragNode,
+                                    dropNode: this.node,
+                                    index: this.index
+                                });
+                            }
+                        });
+                    } else {
+                        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;
+            }
+        },
+        onNodeDragStart(event) {
+            if (this.isNodeDraggable) {
+                event.dataTransfer.effectAllowed = 'all';
+                event.dataTransfer.setData('text', 'data');
+
+                const target = event.currentTarget;
+                const dragEl = target.cloneNode(true);
+                const toggler = dragEl.querySelector('[data-pc-section="nodetogglebutton"]');
+                const checkbox = dragEl.querySelector('[data-pc-name="pcnodecheckbox"]');
+
+                target.setAttribute('data-p-dragging', 'true');
+                dragEl.style.width = getOuterWidth(target) + 'px';
+                dragEl.style.height = getOuterHeight(target) + 'px';
+                dragEl.setAttribute('data-pc-section', 'drag-image');
+                toggler.style.visibility = 'hidden';
+                checkbox?.remove();
+                document.body.appendChild(dragEl);
+                event.dataTransfer.setDragImage(dragEl, 0, 0);
+
+                setTimeout(() => document.body.removeChild(dragEl), 0);
+
+                this.$pcTree.dragDropService.startDrag({
+                    node: this.node,
+                    subNodes: this.subNodes,
+                    index: this.index,
+                    scope: this.draggableScope
+                });
+            } else {
+                event.preventDefault();
+            }
+        },
+        onNodeDragOver(event) {
+            if (this.isDroppable) {
+                event.dataTransfer.dropEffect = 'copy';
+                const nodeElement = event.currentTarget;
+                const rect = nodeElement.getBoundingClientRect();
+                const y = event.clientY - rect.top;
+
+                this.isPrevDropPointHovered = false;
+                this.isNextDropPointHovered = false;
+                this.isNodeDropHovered = false;
+
+                if (y < rect.height * 0.25) {
+                    this.isPrevDropPointHovered = true;
+                } else if (y > rect.height * 0.75) {
+                    this.isNextDropPointHovered = true;
+                } else if (this.isNodeDroppable) {
+                    this.isNodeDropHovered = true;
+                }
+            } else {
+                event.dataTransfer.dropEffect = 'none';
+            }
+
+            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;
+        },
+        onNodeDragEnd(event) {
+            event.currentTarget?.removeAttribute('data-p-dragging');
+
+            this.$pcTree.dragDropService.stopDrag({
+                node: this.node,
+                subNodes: this.subNodes,
+                index: this.index
+            });
+        },
         setAllNodesTabIndexes() {
             const nodes = find(this.$refs.currentNode.closest('[data-pc-section="rootchildren"]'), '[role="treeitem"]');
 
@@ -458,6 +723,33 @@ export default {
         },
         ariaSelected() {
             return this.checkboxMode ? this.checked : undefined;
+        },
+        isPrevDropPointActive() {
+            return this.isPrevDropPointHovered && this.isDroppable;
+        },
+        isNextDropPointActive() {
+            return this.isNextDropPointHovered && this.isDroppable;
+        },
+        dropPosition() {
+            return this.isPrevDropPointActive ? -1 : this.isNextDropPointActive ? 1 : 0;
+        },
+        subNodes() {
+            return this.parentNode ? this.parentNode.children : this.rootNodes;
+        },
+        isDraggable() {
+            return this.draggableNodes;
+        },
+        isDroppable() {
+            return this.droppableNodes && this.$pcTree.allowNodeDrop(this.node);
+        },
+        isNodeDraggable() {
+            return this.node?.draggable !== false && this.isDraggable;
+        },
+        isNodeDroppable() {
+            return this.node?.droppable !== false && this.isDroppable;
+        },
+        isNodeDropActive() {
+            return this.isNodeDropHovered && this.isNodeDroppable;
         }
     },
     components: {