primevue 4.4.0 → 4.5.0

package/tree/index.mjs

@@ -83,7 +83,11 @@ var script$2 = {
       type: Number,
       "default": 0
     },
-    dragdrop: {
+    draggableNodes: {
+      type: Boolean,
+      "default": null
+    },
+    droppableNodes: {
       type: Boolean,
       "default": null
     },
@@ -164,22 +168,22 @@ function useTreeDragDropService() {
 
 function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
-function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
-function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray$1(r) { return _arrayWithoutHoles$1(r) || _iterableToArray$1(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread$1(); }
 function _nonIterableSpread$1() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
 function _iterableToArray$1(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles$1(r) { if (Array.isArray(r)) return _arrayLikeToArray$1(r); }
 function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
+function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script$1 = {
   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,
@@ -221,7 +225,11 @@ var script$1 = {
       type: [String, Array],
       "default": null
     },
-    dragdrop: {
+    draggableNodes: {
+      type: Boolean,
+      "default": null
+    },
+    droppableNodes: {
       type: Boolean,
       "default": null
     },
@@ -381,8 +389,55 @@ var script$1 = {
     onTabKey: function onTabKey() {
       this.setAllNodesTabIndexes();
     },
-    onChildNodeDrop: function onChildNodeDrop(event) {
-      this.$emit('node-click', event);
+    removeNodeFromTree: function removeNodeFromTree(nodes, nodeToRemove) {
+      var _this2 = this;
+      return nodes.reduce(function (acc, node) {
+        if (node.key === nodeToRemove.key) {
+          return acc;
+        }
+        if (node.children && node.children.length > 0) {
+          var updatedChildren = _this2.removeNodeFromTree(node.children, nodeToRemove);
+          acc.push(_objectSpread$2(_objectSpread$2({}, node), {}, {
+            children: updatedChildren
+          }));
+        } else {
+          acc.push(node);
+        }
+        return acc;
+      }, []);
+    },
+    insertNodeInSiblings: function insertNodeInSiblings(nodes, targetKey, nodeToInsert, offset) {
+      var _this3 = this;
+      var targetIndex = nodes.findIndex(function (n) {
+        return n.key === targetKey;
+      });
+      if (targetIndex !== -1) {
+        return nodes.toSpliced(targetIndex + offset, 0, nodeToInsert);
+      }
+      return nodes.map(function (node) {
+        if (node.children && node.children.length > 0) {
+          return _objectSpread$2(_objectSpread$2({}, node), {}, {
+            children: _this3.insertNodeInSiblings(node.children, targetKey, nodeToInsert, offset)
+          });
+        }
+        return node;
+      });
+    },
+    addNodeAsChild: function addNodeAsChild(nodes, parentKey, nodeToInsert) {
+      var _this4 = this;
+      return nodes.map(function (node) {
+        if (node.key === parentKey) {
+          return _objectSpread$2(_objectSpread$2({}, node), {}, {
+            children: [].concat(_toConsumableArray$1(node.children || []), [nodeToInsert])
+          });
+        }
+        if (node.children && node.children.length > 0) {
+          return _objectSpread$2(_objectSpread$2({}, node), {}, {
+            children: _this4.addNodeAsChild(node.children, parentKey, nodeToInsert)
+          });
+        }
+        return node;
+      });
     },
     insertNodeOnDrop: function insertNodeOnDrop() {
       var _this$$pcTree = this.$pcTree,
@@ -391,35 +446,35 @@ var script$1 = {
         dragNodeSubNodes = _this$$pcTree.dragNodeSubNodes,
         dragDropService = _this$$pcTree.dragDropService;
       if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
-        return;
+        return null;
       }
       var position = this.dropPosition;
-      var subNodes = this.subNodes || [];
-      var index = this.index || 0;
-      var dropIndex = dragNodeSubNodes === subNodes ? dragNodeIndex > index ? index : index - 1 : index;
-      dragNodeSubNodes.splice(dragNodeIndex, 1);
+      var 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,
+        subNodes: updatedNodes,
         index: dragNodeIndex
       });
+      return updatedNodes;
     },
     onNodeDrop: function onNodeDrop(event) {
-      var _this2 = this;
-      event.preventDefault();
-      event.stopPropagation();
+      var _this5 = this;
       if (this.isDroppable) {
+        event.preventDefault();
+        event.stopPropagation();
         var dragNode = this.$pcTree.dragNode;
         var position = this.dropPosition;
         var isValidDrop = position !== 0 || position === 0 && this.isNodeDroppable;
@@ -427,32 +482,41 @@ var script$1 = {
           if (this.validateDrop) {
             this.$emit('node-drop', {
               originalEvent: event,
+              value: this.rootNodes,
               dragNode: dragNode,
               dropNode: this.node,
               index: this.index,
               accept: function accept() {
-                _this2.insertNodeOnDrop();
+                var updatedNodes = _this5.insertNodeOnDrop();
+                _this5.$emit('node-drop', {
+                  originalEvent: event,
+                  value: updatedNodes,
+                  dragNode: dragNode,
+                  dropNode: _this5.node,
+                  index: _this5.index
+                });
               }
             });
           } else {
-            this.insertNodeOnDrop();
+            var 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: function onNodeDragStart(event) {
       if (this.isNodeDraggable) {
-        var _event$dataTransfer, _event$dataTransfer2;
-        (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 || _event$dataTransfer.setData('text', 'data');
+        event.dataTransfer.effectAllowed = 'all';
+        event.dataTransfer.setData('text', 'data');
         var target = event.currentTarget;
         var dragEl = target.cloneNode(true);
         var toggler = dragEl.querySelector('[data-pc-section="nodetogglebutton"]');
@@ -464,7 +528,7 @@ var script$1 = {
         toggler.style.visibility = 'hidden';
         checkbox === null || checkbox === void 0 || checkbox.remove();
         document.body.appendChild(dragEl);
-        (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 || _event$dataTransfer2.setDragImage(dragEl, 0, 0);
+        event.dataTransfer.setDragImage(dragEl, 0, 0);
         setTimeout(function () {
           return document.body.removeChild(dragEl);
         }, 0);
@@ -479,8 +543,8 @@ var script$1 = {
       }
     },
     onNodeDragOver: function onNodeDragOver(event) {
-      event.dataTransfer.dropEffect = 'move';
       if (this.isDroppable) {
+        event.dataTransfer.dropEffect = 'copy';
         var nodeElement = event.currentTarget;
         var rect = nodeElement.getBoundingClientRect();
         var y = event.clientY - rect.top;
@@ -494,13 +558,23 @@ var script$1 = {
         } else if (this.isNodeDroppable) {
           this.isNodeDropHovered = true;
         }
+      } else {
+        event.dataTransfer.dropEffect = 'none';
       }
-      if (this.dragdrop) {
+      if (this.droppableNodes) {
         event.preventDefault();
         event.stopPropagation();
       }
     },
+    onNodeDragEnter: function onNodeDragEnter() {
+      this.$emit('node-dragenter', {
+        node: this.node
+      });
+    },
     onNodeDragLeave: function onNodeDragLeave() {
+      this.$emit('node-dragleave', {
+        node: this.node
+      });
       this.isPrevDropPointHovered = false;
       this.isNextDropPointHovered = false;
       this.isNodeDropHovered = false;
@@ -703,10 +777,10 @@ var script$1 = {
       return this.parentNode ? this.parentNode.children : this.rootNodes;
     },
     isDraggable: function isDraggable() {
-      return this.dragdrop;
+      return this.draggableNodes;
     },
     isDroppable: function isDroppable() {
-      return this.dragdrop && this.$pcTree.allowNodeDrop(this.node);
+      return this.droppableNodes && this.$pcTree.allowNodeDrop(this.node);
     },
     isNodeDraggable: function isNodeDraggable() {
       var _this$node;
@@ -753,7 +827,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-level": $props.level,
     "aria-checked": $options.ariaChecked,
     tabindex: $props.index === 0 ? 0 : -1,
-    onKeydown: _cache[9] || (_cache[9] = function () {
+    onKeydown: _cache[14] || (_cache[14] = function () {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     })
   }, $options.getPTOptions('node')), [$options.isPrevDropPointActive ? (openBlock(), createElementBlock("div", {
@@ -776,13 +850,16 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     onDragover: _cache[5] || (_cache[5] = function () {
       return $options.onNodeDragOver && $options.onNodeDragOver.apply($options, arguments);
     }),
-    onDragleave: _cache[6] || (_cache[6] = function () {
+    onDragenter: _cache[6] || (_cache[6] = function () {
+      return $options.onNodeDragEnter && $options.onNodeDragEnter.apply($options, arguments);
+    }),
+    onDragleave: _cache[7] || (_cache[7] = function () {
       return $options.onNodeDragLeave && $options.onNodeDragLeave.apply($options, arguments);
     }),
-    onDragend: _cache[7] || (_cache[7] = function () {
+    onDragend: _cache[8] || (_cache[8] = function () {
       return $options.onNodeDragEnd && $options.onNodeDragEnd.apply($options, arguments);
     }),
-    onDrop: _cache[8] || (_cache[8] = function () {
+    onDrop: _cache[9] || (_cache[9] = function () {
       return $options.onNodeDrop && $options.onNodeDrop.apply($options, arguments);
     })
   }, $options.getPTOptions('nodeContent'), {
@@ -883,12 +960,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       selectionKeys: $props.selectionKeys,
       onCheckboxChange: $options.propagateUp,
       draggableScope: $props.draggableScope,
-      dragdrop: $props.dragdrop,
+      draggableNodes: $props.draggableNodes,
+      droppableNodes: $props.droppableNodes,
       validateDrop: $props.validateDrop,
-      onNodeDrop: $options.onChildNodeDrop,
+      onNodeDrop: _cache[10] || (_cache[10] = function ($event) {
+        return _ctx.$emit('node-drop', $event);
+      }),
+      onNodeDragenter: _cache[11] || (_cache[11] = function ($event) {
+        return _ctx.$emit('node-dragenter', $event);
+      }),
+      onNodeDragleave: _cache[12] || (_cache[12] = function ($event) {
+        return _ctx.$emit('node-dragleave', $event);
+      }),
+      onValueChange: _cache[13] || (_cache[13] = function ($event) {
+        return _ctx.$emit('value-change', $event);
+      }),
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["node", "parentNode", "rootNodes", "templates", "level", "index", "loadingMode", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "draggableScope", "dragdrop", "validateDrop", "onNodeDrop", "unstyled", "pt"]);
+    }, null, 8, ["node", "parentNode", "rootNodes", "templates", "level", "index", "loadingMode", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "draggableScope", "draggableNodes", "droppableNodes", "validateDrop", "unstyled", "pt"]);
   }), 128))], 16)) : createCommentVNode("", true)], 16, _hoisted_1$1);
 }
 
@@ -911,7 +1000,7 @@ var script = {
   name: 'Tree',
   "extends": script$2,
   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: function data() {
     return {
       d_expandedKeys: this.expandedKeys || {},
@@ -923,6 +1012,11 @@ var script = {
       dragHover: null
     };
   },
+  inject: {
+    $pcTreeSelect: {
+      "default": null
+    }
+  },
   dragDropService: null,
   dragStartCleanup: null,
   dragStopCleanup: null,
@@ -933,7 +1027,7 @@ var script = {
   },
   mounted: function mounted() {
     var _this = this;
-    if (this.dragdrop) {
+    if (this.droppableNodes) {
       this.dragDropService = useTreeDragDropService();
       this.dragStartCleanup = this.dragDropService.onDragStart(function (event) {
         _this.dragNode = event.node;
@@ -1117,6 +1211,16 @@ var script = {
     onNodeDrop: function onNodeDrop(event) {
       this.$emit('node-drop', event);
     },
+    onNodeDragEnter: function onNodeDragEnter(event) {
+      this.$emit('node-dragenter', event);
+    },
+    onNodeDragLeave: function onNodeDragLeave(event) {
+      this.$emit('node-dragleave', event);
+    },
+    onValueChanged: function onValueChanged(event) {
+      this.dragNodeSubNodes.splice(this.dragNodeIndex, 1);
+      this.$emit('update:value', event.nodes);
+    },
     allowDrop: function allowDrop(dragNode, dropNode, dragNodeScope) {
       if (!dragNode) {
         //prevent random html elements to be dragged
@@ -1145,64 +1249,81 @@ var script = {
     allowNodeDrop: function allowNodeDrop(dropNode) {
       return this.allowDrop(this.dragNode, dropNode, this.dragNodeScope);
     },
-    isValidDragScope: function isValidDragScope(dragScope) {
-      var 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)) {
-            var _iterator3 = _createForOfIteratorHelper(dropScope),
-              _step3;
-            try {
-              for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-                var s = _step3.value;
-                var _iterator4 = _createForOfIteratorHelper(dragScope),
-                  _step4;
-                try {
-                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-                    var ds = _step4.value;
-                    if (s === ds) {
-                      return true;
-                    }
-                  }
-                } catch (err) {
-                  _iterator4.e(err);
-                } finally {
-                  _iterator4.f();
-                }
+    hasCommonScope: function 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)) {
+          var _iterator3 = _createForOfIteratorHelper(dragScope),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var ds = _step3.value;
+              if (dropScope.indexOf(ds) !== -1) {
+                return true;
               }
-            } catch (err) {
-              _iterator3.e(err);
-            } finally {
-              _iterator3.f();
             }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
           }
+          return false;
         }
-        return false;
-      } else {
+      }
+      return false;
+    },
+    isValidDragScope: function isValidDragScope(dragScope) {
+      if (this.droppableScope === null) {
         return true;
       }
+      return this.hasCommonScope(dragScope, this.droppableScope);
+    },
+    isSameTreeScope: function isSameTreeScope(dragScope) {
+      return this.hasCommonScope(dragScope, this.draggableScope);
     },
     onDragOver: function 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: function onDragEnter() {
-      if (this.dragdrop && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+    onDragEnter: function 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: function onDragLeave(event) {
-      if (this.dragdrop) {
+      if (this.droppableNodes) {
         var 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: function processTreeDrop(dragNode, dragNodeIndex) {
@@ -1215,14 +1336,21 @@ var script = {
     },
     onDrop: function onDrop(event) {
       var _this2 = this;
-      if (this.dragdrop && (!this.value || this.value.length === 0)) {
+      if (this.droppableNodes) {
         event.preventDefault();
         var dragNode = this.dragNode;
         if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
           var 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,
@@ -1233,6 +1361,7 @@ var script = {
           } else {
             this.$emit('node-drop', {
               originalEvent: event,
+              value: this.value,
               dragNode: dragNode,
               dropNode: null,
               index: dragNodeIndex
@@ -1249,11 +1378,11 @@ var script = {
       var searchFields = isFunction(this.filterBy) ? [this.filterBy] : this.filterBy.split(',');
       var filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
       var strict = this.filterMode === 'strict';
-      var _iterator5 = _createForOfIteratorHelper(this.value),
-        _step5;
+      var _iterator4 = _createForOfIteratorHelper(this.value),
+        _step4;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var node = _step5.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var node = _step4.value;
           var _node = _objectSpread$1({}, node);
           var paramsWithoutNode = {
             searchFields: searchFields,
@@ -1265,9 +1394,9 @@ var script = {
           }
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator5.f();
+        _iterator4.f();
       }
       return filteredNodes;
     },
@@ -1414,19 +1543,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       selectionKeys: _ctx.selectionKeys,
       onCheckboxChange: $options.onCheckboxChange,
       loadingMode: _ctx.loadingMode,
+      draggableNodes: _ctx.draggableNodes,
+      droppableNodes: _ctx.droppableNodes,
       draggableScope: _ctx.draggableScope,
-      dragdrop: _ctx.dragdrop,
       validateDrop: _ctx.validateDrop,
       onNodeDrop: $options.onNodeDrop,
+      onNodeDragenter: $options.onNodeDragEnter,
+      onNodeDragleave: $options.onNodeDragLeave,
+      onValueChange: $options.onValueChanged,
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["node", "rootNodes", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "loadingMode", "draggableScope", "dragdrop", "validateDrop", "onNodeDrop", "unstyled", "pt"]);
-  }), 128))], 16, _hoisted_3)) : (openBlock(), createElementBlock("div", mergeProps({
+    }, null, 8, ["node", "rootNodes", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "loadingMode", "draggableNodes", "droppableNodes", "draggableScope", "validateDrop", "onNodeDrop", "onNodeDragenter", "onNodeDragleave", "onValueChange", "unstyled", "pt"]);
+  }), 128))], 16, _hoisted_3)) : $options.empty && !$options.$pcTreeSelect ? (openBlock(), createElementBlock("div", mergeProps({
     key: 1,
     "class": _ctx.cx('emptyMessage')
   }, _ctx.ptm('emptyMessage')), [renderSlot(_ctx.$slots, "empty", {}, function () {
     return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
-  })], 16)), renderSlot(_ctx.$slots, "footer", {
+  })], 16)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
     value: _ctx.value,
     expandedKeys: _ctx.expandedKeys,
     selectionKeys: _ctx.selectionKeys