primevue 4.3.8 → 4.4.0

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,19 @@
                     :selectionKeys="selectionKeys"
                     @checkbox-change="onCheckboxChange"
                     :loadingMode="loadingMode"
+                    :draggableScope="draggableScope"
+                    :dragdrop="dragdrop"
+                    :validateDrop="validateDrop"
+                    @node-drop="onNodeDrop"
                     :unstyled="unstyled"
                     :pt="pt"
                 ></TreeNode>
             </ul>
+            <div v-else :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 +62,62 @@ 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', 'update:value'],
     data() {
         return {
             d_expandedKeys: this.expandedKeys || {},
-            filterValue: null
+            filterValue: null,
+            dragNode: null,
+            dragNodeSubNodes: null,
+            dragNodeIndex: null,
+            dragNodeScope: null,
+            dragHover: null
         };
     },
+    dragDropService: null,
+    dragStartCleanup: null,
+    dragStopCleanup: null,
     watch: {
         expandedKeys(newValue) {
             this.d_expandedKeys = newValue;
         }
     },
+    mounted() {
+        if (this.dragdrop) {
+            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 +268,127 @@ export default {
             }
 
             return matched;
+        },
+        onNodeDrop(event) {
+            this.$emit('node-drop', event);
+        },
+        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);
+        },
+        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;
+                                }
+                            }
+                        }
+                    }
+                }
+                return false;
+            } else {
+                return true;
+            }
+        },
+        onDragOver(event) {
+            if (this.dragdrop && (!this.value || this.value.length === 0)) {
+                event.dataTransfer.dropEffect = 'move';
+                event.preventDefault();
+            }
+        },
+        onDragEnter() {
+            if (this.dragdrop && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+                this.dragHover = true;
+            }
+        },
+        onDragLeave(event) {
+            if (this.dragdrop) {
+                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) {
+                    this.dragHover = false;
+                }
+            }
+        },
+        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.dragdrop && (!this.value || this.value.length === 0)) {
+                event.preventDefault();
+                let dragNode = this.dragNode;
+
+                if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
+                    let dragNodeIndex = this.dragNodeIndex;
+
+                    if (this.validateDrop) {
+                        this.$emit('node-drop', {
+                            originalEvent: event,
+                            dragNode: dragNode,
+                            dropNode: null,
+                            index: dragNodeIndex,
+                            accept: () => {
+                                this.processTreeDrop(dragNode, dragNodeIndex);
+                            }
+                        });
+                    } else {
+                        this.$emit('node-drop', {
+                            originalEvent: event,
+                            dragNode: dragNode,
+                            dropNode: null,
+                            index: dragNodeIndex
+                        });
+
+                        this.processTreeDrop(dragNode, dragNodeIndex);
+                    }
+                }
+            }
         }
     },
     computed: {
@@ -247,6 +416,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,22 @@
         @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"
+            @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 +65,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 +83,10 @@
                 :selectionMode="selectionMode"
                 :selectionKeys="selectionKeys"
                 @checkbox-change="propagateUp"
+                :draggableScope="draggableScope"
+                :dragdrop="dragdrop"
+                :validateDrop="validateDrop"
+                @node-drop="onChildNodeDrop"
                 :unstyled="unstyled"
                 :pt="pt"
             />
@@ -73,7 +95,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 +109,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'],
     props: {
         node: {
             type: null,
             default: null
         },
+        parentNode: {
+            type: null,
+            default: null
+        },
+        rootNodes: {
+            type: Array,
+            default: null
+        },
         expandedKeys: {
             type: null,
             default: null
@@ -117,10 +147,34 @@ export default {
             type: Number,
             default: null
         },
+        draggableScope: {
+            type: [String, Array],
+            default: null
+        },
+        dragdrop: {
+            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 +342,147 @@ export default {
         onTabKey() {
             this.setAllNodesTabIndexes();
         },
+        onChildNodeDrop(event) {
+            this.$emit('node-click', event);
+        },
+        insertNodeOnDrop() {
+            const { dragNode, dragNodeIndex, dragNodeSubNodes, dragDropService } = this.$pcTree;
+
+            if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
+                return;
+            }
+
+            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);
+
+            if (position < 0) {
+                // insert before a Node
+                subNodes.splice(dropIndex, 0, dragNode);
+            } else if (position > 0) {
+                // insert after a Node
+                subNodes.splice(dropIndex + 1, 0, dragNode);
+            } else {
+                // insert as child of a Node
+                this.node.children = this.node.children || [];
+                this.node.children.push(dragNode);
+            }
+
+            dragDropService.stopDrag({
+                node: dragNode,
+                subNodes,
+                index: dragNodeIndex
+            });
+        },
+        onNodeDrop(event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (this.isDroppable) {
+                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,
+                            dragNode: dragNode,
+                            dropNode: this.node,
+                            index: this.index,
+                            accept: () => {
+                                this.insertNodeOnDrop();
+                            }
+                        });
+                    } else {
+                        this.insertNodeOnDrop();
+                        this.$emit('node-drop', {
+                            originalEvent: event,
+                            dragNode: dragNode,
+                            dropNode: this.node,
+                            index: this.index
+                        });
+                    }
+                }
+            }
+
+            this.isPrevDropPointHovered = false;
+            this.isNextDropPointHovered = false;
+            this.isNodeDropHovered = false;
+        },
+        onNodeDragStart(event) {
+            if (this.isNodeDraggable) {
+                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) {
+            event.dataTransfer.dropEffect = 'move';
+
+            if (this.isDroppable) {
+                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;
+                }
+            }
+
+            if (this.dragdrop) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        },
+        onNodeDragLeave() {
+            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 +653,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.dragdrop;
+        },
+        isDroppable() {
+            return this.dragdrop && 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: {

package/tree/index.d.ts

@@ -97,6 +97,29 @@ export interface TreeFilterEvent {
     value: string;
 }
 
+/**
+ * Custom node drop event.
+ * @see {@link TreeEmitsOptions.node-drop}
+ */
+export interface TreeNodeDropEvent {
+    /**
+     * Original event
+     */
+    originalEvent: Event;
+    /**
+     * Dragged node
+     */
+    dragNode: TreeNode;
+    /**
+     * Dropped node
+     */
+    dropNode: TreeNode;
+    /**
+     * Index of the dropped node
+     */
+    index: number;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link TreeProps.pt}
@@ -173,6 +196,14 @@ export interface TreePassThroughOptions<T = any> {
      * Used to pass attributes to the loading icon's DOM element.
      */
     loadingIcon?: TreePassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreePassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the drop point's DOM element.
+     */
+    dropPoint?: TreePassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -312,6 +343,26 @@ export interface TreeProps {
      * Height of the scroll viewport in fixed units or the 'flex' keyword for a dynamic size.
      */
     scrollHeight?: HintedString<'flex'> | undefined;
+    /**
+     * Whether the nodes are draggable and droppable.
+     * @defaultValue null
+     */
+    dragdrop?: boolean | undefined;
+    /**
+     * Scope of the draggable nodes to match a droppableScope.
+     * @defaultValue null
+     */
+    draggableScope?: string | string[] | undefined;
+    /**
+     * Scope of the droppable nodes to match a draggableScope.
+     * @defaultValue null
+     */
+    droppableScope?: string | string[] | undefined;
+    /**
+     * When enabled, drop can be accepted or rejected based on condition defined at node-drop.
+     * @defaultValue false
+     */
+    validateDrop?: boolean | undefined;
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -501,6 +552,10 @@ export interface TreeSlots {
          */
         selectionKeys: TreeSelectionKeys;
     }): VNode[];
+    /**
+     * Custom empty template.
+     */
+    empty(): VNode[];
     /**
      * Optional slots.
      * @todo
@@ -512,6 +567,11 @@ export interface TreeSlots {
  * Defines valid emits in Tree component.
  */
 export interface TreeEmitsOptions {
+    /**
+     * Emitted when the value change.
+     * @param {TreeNode} value - New value.
+     */
+    'update:value'(value: TreeNode[]): void;
     /**
      * Emitted when the expanded keys change.
      * @param {TreeNode} value - New expanded keys.
@@ -542,6 +602,11 @@ export interface TreeEmitsOptions {
      * @param {TreeNode} node - Node instance.
      */
     'node-collapse'(node: TreeNode): void;
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeNode} node - Node instance.
+     */
+    'node-drop'(node: TreeNodeDropEvent): void;
     /**
      * Callback to invoke on filter input.
      * @param {TreeFilterEvent} event - Custom filter event.