primevue 4.3.9 → 4.4.0

package/tree/index.mjs

@@ -1,4 +1,4 @@
-import { cn } from '@primeuix/utils';
+import { getAttribute, findSingle, find, getOuterWidth, getOuterHeight, cn } from '@primeuix/utils';
 import { isFunction, resolveFieldData } from '@primeuix/utils/object';
 import SearchIcon from '@primevue/icons/search';
 import SpinnerIcon from '@primevue/icons/spinner';
@@ -7,14 +7,13 @@ import InputIcon from 'primevue/inputicon';
 import InputText from 'primevue/inputtext';
 import BaseComponent from '@primevue/core/basecomponent';
 import TreeStyle from 'primevue/tree/style';
-import { getAttribute, findSingle, find } from '@primeuix/utils/dom';
+import { reactive, resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createCommentVNode, createElementVNode, normalizeClass, withDirectives, createBlock, Fragment, resolveDynamicComponent, withCtx, withModifiers, createTextVNode, toDisplayString, renderList, renderSlot, createVNode } from 'vue';
 import CheckIcon from '@primevue/icons/check';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronRightIcon from '@primevue/icons/chevronright';
 import MinusIcon from '@primevue/icons/minus';
 import Checkbox from 'primevue/checkbox';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, withDirectives, createBlock, Fragment, resolveDynamicComponent, normalizeClass, withCtx, withModifiers, createTextVNode, toDisplayString, renderList, renderSlot, createVNode } from 'vue';
 
 var script$2 = {
   name: 'BaseTree',
@@ -84,6 +83,22 @@ var script$2 = {
       type: Number,
       "default": 0
     },
+    dragdrop: {
+      type: Boolean,
+      "default": null
+    },
+    draggableScope: {
+      type: [String, Array],
+      "default": null
+    },
+    droppableScope: {
+      type: [String, Array],
+      "default": null
+    },
+    validateDrop: {
+      type: Boolean,
+      "default": false
+    },
     ariaLabelledby: {
       type: String,
       "default": null
@@ -102,6 +117,51 @@ var script$2 = {
   }
 };
 
+var dragState = reactive({
+  isDragging: false,
+  dragNode: null,
+  dragScope: null
+});
+var dragStartHandlers = new Set();
+var dragStopHandlers = new Set();
+function useTreeDragDropService() {
+  var startDrag = function startDrag(event) {
+    dragState.isDragging = true;
+    dragState.dragNode = event.node;
+    dragState.dragScope = event.scope;
+    dragStartHandlers.forEach(function (handler) {
+      return handler(event);
+    });
+  };
+  var stopDrag = function stopDrag(event) {
+    dragState.isDragging = false;
+    dragState.dragNode = null;
+    dragState.dragScope = null;
+    dragStopHandlers.forEach(function (handler) {
+      return handler(event);
+    });
+  };
+  var onDragStart = function onDragStart(handler) {
+    dragStartHandlers.add(handler);
+    return function () {
+      return dragStartHandlers["delete"](handler);
+    };
+  };
+  var onDragStop = function onDragStop(handler) {
+    dragStopHandlers.add(handler);
+    return function () {
+      return dragStopHandlers["delete"](handler);
+    };
+  };
+  return {
+    dragState: dragState,
+    startDrag: startDrag,
+    stopDrag: stopDrag,
+    onDragStart: onDragStart,
+    onDragStop: onDragStop
+  };
+}
+
 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; }
@@ -119,12 +179,20 @@ var script$1 = {
   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
@@ -149,10 +217,34 @@ var script$1 = {
       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: function data() {
+    return {
+      isPrevDropPointHovered: false,
+      isNextDropPointHovered: false,
+      isNodeDropHovered: false
+    };
+  },
   mounted: function mounted() {
     this.setAllNodesTabIndexes();
   },
@@ -289,6 +381,139 @@ var script$1 = {
     onTabKey: function onTabKey() {
       this.setAllNodesTabIndexes();
     },
+    onChildNodeDrop: function onChildNodeDrop(event) {
+      this.$emit('node-click', event);
+    },
+    insertNodeOnDrop: function insertNodeOnDrop() {
+      var _this$$pcTree = this.$pcTree,
+        dragNode = _this$$pcTree.dragNode,
+        dragNodeIndex = _this$$pcTree.dragNodeIndex,
+        dragNodeSubNodes = _this$$pcTree.dragNodeSubNodes,
+        dragDropService = _this$$pcTree.dragDropService;
+      if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
+        return;
+      }
+      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);
+      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: subNodes,
+        index: dragNodeIndex
+      });
+    },
+    onNodeDrop: function onNodeDrop(event) {
+      var _this2 = this;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.isDroppable) {
+        var dragNode = this.$pcTree.dragNode;
+        var position = this.dropPosition;
+        var 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: function accept() {
+                _this2.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: 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');
+        var target = event.currentTarget;
+        var dragEl = target.cloneNode(true);
+        var toggler = dragEl.querySelector('[data-pc-section="nodetogglebutton"]');
+        var 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 === 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);
+        setTimeout(function () {
+          return 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: function onNodeDragOver(event) {
+      event.dataTransfer.dropEffect = 'move';
+      if (this.isDroppable) {
+        var nodeElement = event.currentTarget;
+        var rect = nodeElement.getBoundingClientRect();
+        var 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: function onNodeDragLeave() {
+      this.isPrevDropPointHovered = false;
+      this.isNextDropPointHovered = false;
+      this.isNodeDropHovered = false;
+    },
+    onNodeDragEnd: function onNodeDragEnd(event) {
+      var _event$currentTarget;
+      (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.removeAttribute('data-p-dragging');
+      this.$pcTree.dragDropService.stopDrag({
+        node: this.node,
+        subNodes: this.subNodes,
+        index: this.index
+      });
+    },
     setAllNodesTabIndexes: function setAllNodesTabIndexes() {
       var nodes = find(this.$refs.currentNode.closest('[data-pc-section="rootchildren"]'), '[role="treeitem"]');
       var hasSelectedNode = _toConsumableArray$1(nodes).some(function (node) {
@@ -464,6 +689,35 @@ var script$1 = {
     },
     ariaSelected: function ariaSelected() {
       return this.checkboxMode ? this.checked : undefined;
+    },
+    isPrevDropPointActive: function isPrevDropPointActive() {
+      return this.isPrevDropPointHovered && this.isDroppable;
+    },
+    isNextDropPointActive: function isNextDropPointActive() {
+      return this.isNextDropPointHovered && this.isDroppable;
+    },
+    dropPosition: function dropPosition() {
+      return this.isPrevDropPointActive ? -1 : this.isNextDropPointActive ? 1 : 0;
+    },
+    subNodes: function subNodes() {
+      return this.parentNode ? this.parentNode.children : this.rootNodes;
+    },
+    isDraggable: function isDraggable() {
+      return this.dragdrop;
+    },
+    isDroppable: function isDroppable() {
+      return this.dragdrop && this.$pcTree.allowNodeDrop(this.node);
+    },
+    isNodeDraggable: function isNodeDraggable() {
+      var _this$node;
+      return ((_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.draggable) !== false && this.isDraggable;
+    },
+    isNodeDroppable: function isNodeDroppable() {
+      var _this$node2;
+      return ((_this$node2 = this.node) === null || _this$node2 === void 0 ? void 0 : _this$node2.droppable) !== false && this.isDroppable;
+    },
+    isNodeDropActive: function isNodeDropActive() {
+      return this.isNodeDropHovered && this.isNodeDroppable;
     }
   },
   components: {
@@ -480,7 +734,7 @@ var script$1 = {
 };
 
 var _hoisted_1$1 = ["aria-label", "aria-selected", "aria-expanded", "aria-setsize", "aria-posinset", "aria-level", "aria-checked", "tabindex"];
-var _hoisted_2$1 = ["data-p-selected", "data-p-selectable"];
+var _hoisted_2$1 = ["draggable", "data-p-selected", "data-p-selectable"];
 var _hoisted_3$1 = ["data-p-leaf"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_SpinnerIcon = resolveComponent("SpinnerIcon");
@@ -499,18 +753,38 @@ 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[4] || (_cache[4] = function () {
+    onKeydown: _cache[9] || (_cache[9] = function () {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     })
-  }, $options.getPTOptions('node')), [createElementVNode("div", mergeProps({
+  }, $options.getPTOptions('node')), [$options.isPrevDropPointActive ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    "class": normalizeClass(_ctx.cx('dropPoint')),
+    "aria-hidden": "true"
+  }, null, 2)) : createCommentVNode("", true), createElementVNode("div", mergeProps({
     "class": _ctx.cx('nodeContent'),
+    style: $props.node.style,
+    draggable: $options.isDraggable,
     onClick: _cache[2] || (_cache[2] = function () {
       return $options.onClick && $options.onClick.apply($options, arguments);
     }),
     onTouchend: _cache[3] || (_cache[3] = function () {
       return $options.onTouchEnd && $options.onTouchEnd.apply($options, arguments);
     }),
-    style: $props.node.style
+    onDragstart: _cache[4] || (_cache[4] = function () {
+      return $options.onNodeDragStart && $options.onNodeDragStart.apply($options, arguments);
+    }),
+    onDragover: _cache[5] || (_cache[5] = function () {
+      return $options.onNodeDragOver && $options.onNodeDragOver.apply($options, arguments);
+    }),
+    onDragleave: _cache[6] || (_cache[6] = function () {
+      return $options.onNodeDragLeave && $options.onNodeDragLeave.apply($options, arguments);
+    }),
+    onDragend: _cache[7] || (_cache[7] = function () {
+      return $options.onNodeDragEnd && $options.onNodeDragEnd.apply($options, arguments);
+    }),
+    onDrop: _cache[8] || (_cache[8] = function () {
+      return $options.onNodeDrop && $options.onNodeDrop.apply($options, arguments);
+    })
   }, $options.getPTOptions('nodeContent'), {
     "data-p-selected": $options.checkboxMode ? $options.checked : $options.selected,
     "data-p-selectable": $options.selectable
@@ -584,14 +858,20 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     selected: $options.checkboxMode ? $options.checked : $options.selected
   }, null, 8, ["node", "expanded", "selected"])) : (openBlock(), createElementBlock(Fragment, {
     key: 1
-  }, [createTextVNode(toDisplayString($options.label($props.node)), 1)], 64))], 16)], 16, _hoisted_2$1), $options.hasChildren && $options.expanded ? (openBlock(), createElementBlock("ul", mergeProps({
-    key: 0,
+  }, [createTextVNode(toDisplayString($options.label($props.node)), 1)], 64))], 16)], 16, _hoisted_2$1), $options.isNextDropPointActive ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    "class": normalizeClass(_ctx.cx('dropPoint')),
+    "aria-hidden": "true"
+  }, null, 2)) : createCommentVNode("", true), $options.hasChildren && $options.expanded ? (openBlock(), createElementBlock("ul", mergeProps({
+    key: 2,
     "class": _ctx.cx('nodeChildren'),
     role: "group"
   }, _ctx.ptm('nodeChildren')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.node.children, function (childNode, index) {
     return openBlock(), createBlock(_component_TreeNode, {
       key: childNode.key,
       node: childNode,
+      parentNode: $props.node,
+      rootNodes: $props.rootNodes,
       templates: $props.templates,
       level: $props.level + 1,
       index: index,
@@ -602,9 +882,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       selectionMode: $props.selectionMode,
       selectionKeys: $props.selectionKeys,
       onCheckboxChange: $options.propagateUp,
+      draggableScope: $props.draggableScope,
+      dragdrop: $props.dragdrop,
+      validateDrop: $props.validateDrop,
+      onNodeDrop: $options.onChildNodeDrop,
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["node", "templates", "level", "index", "loadingMode", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "unstyled", "pt"]);
+    }, null, 8, ["node", "parentNode", "rootNodes", "templates", "level", "index", "loadingMode", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "draggableScope", "dragdrop", "validateDrop", "onNodeDrop", "unstyled", "pt"]);
   }), 128))], 16)) : createCommentVNode("", true)], 16, _hoisted_1$1);
 }
 
@@ -627,18 +911,53 @@ var script = {
   name: 'Tree',
   "extends": script$2,
   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: function 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: function expandedKeys(newValue) {
       this.d_expandedKeys = newValue;
     }
   },
+  mounted: function mounted() {
+    var _this = this;
+    if (this.dragdrop) {
+      this.dragDropService = useTreeDragDropService();
+      this.dragStartCleanup = this.dragDropService.onDragStart(function (event) {
+        _this.dragNode = event.node;
+        _this.dragNodeSubNodes = event.subNodes;
+        _this.dragNodeIndex = event.index;
+        _this.dragNodeScope = event.scope;
+      });
+      this.dragStopCleanup = this.dragDropService.onDragStop(function () {
+        _this.dragNode = null;
+        _this.dragNodeSubNodes = null;
+        _this.dragNodeIndex = null;
+        _this.dragNodeScope = null;
+        _this.dragHover = false;
+      });
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    if (this.dragStartCleanup) {
+      this.dragStartCleanup();
+    }
+    if (this.dragStopCleanup) {
+      this.dragStopCleanup();
+    }
+  },
   methods: {
     onNodeToggle: function onNodeToggle(node) {
       var key = node.key;
@@ -794,6 +1113,134 @@ var script = {
         }) || matched;
       }
       return matched;
+    },
+    onNodeDrop: function onNodeDrop(event) {
+      this.$emit('node-drop', event);
+    },
+    allowDrop: function allowDrop(dragNode, dropNode, dragNodeScope) {
+      if (!dragNode) {
+        //prevent random html elements to be dragged
+        return false;
+      } else if (this.isValidDragScope(dragNodeScope)) {
+        var allow = true;
+        if (dropNode) {
+          if (dragNode === dropNode) {
+            allow = false;
+          } else {
+            var parent = dropNode.parent;
+            while (parent != null) {
+              if (parent === dragNode) {
+                allow = false;
+                break;
+              }
+              parent = parent.parent;
+            }
+          }
+        }
+        return allow;
+      } else {
+        return false;
+      }
+    },
+    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();
+                }
+              }
+            } catch (err) {
+              _iterator3.e(err);
+            } finally {
+              _iterator3.f();
+            }
+          }
+        }
+        return false;
+      } else {
+        return true;
+      }
+    },
+    onDragOver: function onDragOver(event) {
+      if (this.dragdrop && (!this.value || this.value.length === 0)) {
+        event.dataTransfer.dropEffect = 'move';
+        event.preventDefault();
+      }
+    },
+    onDragEnter: function onDragEnter() {
+      if (this.dragdrop && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+        this.dragHover = true;
+      }
+    },
+    onDragLeave: function onDragLeave(event) {
+      if (this.dragdrop) {
+        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) {
+          this.dragHover = false;
+        }
+      }
+    },
+    processTreeDrop: function processTreeDrop(dragNode, dragNodeIndex) {
+      this.dragNodeSubNodes.splice(dragNodeIndex, 1);
+      var newValue = [].concat(_toConsumableArray(this.value || []), [dragNode]);
+      this.$emit('update:value', newValue);
+      this.dragDropService.stopDrag({
+        node: dragNode
+      });
+    },
+    onDrop: function onDrop(event) {
+      var _this2 = this;
+      if (this.dragdrop && (!this.value || this.value.length === 0)) {
+        event.preventDefault();
+        var dragNode = this.dragNode;
+        if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
+          var dragNodeIndex = this.dragNodeIndex;
+          if (this.validateDrop) {
+            this.$emit('node-drop', {
+              originalEvent: event,
+              dragNode: dragNode,
+              dropNode: null,
+              index: dragNodeIndex,
+              accept: function accept() {
+                _this2.processTreeDrop(dragNode, dragNodeIndex);
+              }
+            });
+          } else {
+            this.$emit('node-drop', {
+              originalEvent: event,
+              dragNode: dragNode,
+              dropNode: null,
+              index: dragNodeIndex
+            });
+            this.processTreeDrop(dragNode, dragNodeIndex);
+          }
+        }
+      }
     }
   },
   computed: {
@@ -802,11 +1249,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 _iterator3 = _createForOfIteratorHelper(this.value),
-        _step3;
+      var _iterator5 = _createForOfIteratorHelper(this.value),
+        _step5;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var node = _step3.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var node = _step5.value;
           var _node = _objectSpread$1({}, node);
           var paramsWithoutNode = {
             searchFields: searchFields,
@@ -818,15 +1265,22 @@ var script = {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator3.f();
+        _iterator5.f();
       }
       return filteredNodes;
     },
     valueToRender: function valueToRender() {
       if (this.filterValue && this.filterValue.trim().length > 0) return this.filteredValue;else return this.value;
     },
+    empty: function empty() {
+      return !this.valueToRender || this.valueToRender.length === 0;
+    },
+    emptyMessageText: function emptyMessageText() {
+      var _this$$primevue$confi;
+      return ((_this$$primevue$confi = this.$primevue.config) === null || _this$$primevue$confi === void 0 || (_this$$primevue$confi = _this$$primevue$confi.locale) === null || _this$$primevue$confi === void 0 ? void 0 : _this$$primevue$confi.emptyMessage) || '';
+    },
     containerDataP: function containerDataP() {
       return cn({
         loading: this.loading,
@@ -867,6 +1321,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_TreeNode = resolveComponent("TreeNode");
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root'),
+    onDragover: _cache[1] || (_cache[1] = function () {
+      return $options.onDragOver && $options.onDragOver.apply($options, arguments);
+    }),
+    onDragenter: _cache[2] || (_cache[2] = function () {
+      return $options.onDragEnter && $options.onDragEnter.apply($options, arguments);
+    }),
+    onDragleave: _cache[3] || (_cache[3] = function () {
+      return $options.onDragLeave && $options.onDragLeave.apply($options, arguments);
+    }),
+    onDrop: _cache[4] || (_cache[4] = function () {
+      return $options.onDrop && $options.onDrop.apply($options, arguments);
+    }),
     "data-p": $options.containerDataP
   }, _ctx.ptmi('root')), [_ctx.loading && _ctx.loadingMode === 'mask' ? (openBlock(), createElementBlock("div", mergeProps({
     key: 0,
@@ -927,7 +1393,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     value: _ctx.value,
     expandedKeys: _ctx.expandedKeys,
     selectionKeys: _ctx.selectionKeys
-  }), createElementVNode("ul", mergeProps({
+  }), !$options.empty ? (openBlock(), createElementBlock("ul", mergeProps({
+    key: 0,
     "class": _ctx.cx('rootChildren'),
     role: "tree",
     "aria-labelledby": _ctx.ariaLabelledby,
@@ -936,6 +1403,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createBlock(_component_TreeNode, {
       key: node.key,
       node: node,
+      rootNodes: $options.valueToRender,
       templates: _ctx.$slots,
       level: _ctx.level + 1,
       index: index,
@@ -946,10 +1414,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       selectionKeys: _ctx.selectionKeys,
       onCheckboxChange: $options.onCheckboxChange,
       loadingMode: _ctx.loadingMode,
+      draggableScope: _ctx.draggableScope,
+      dragdrop: _ctx.dragdrop,
+      validateDrop: _ctx.validateDrop,
+      onNodeDrop: $options.onNodeDrop,
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
-    }, null, 8, ["node", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "loadingMode", "unstyled", "pt"]);
-  }), 128))], 16, _hoisted_3), renderSlot(_ctx.$slots, "footer", {
+    }, 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({
+    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", {
     value: _ctx.value,
     expandedKeys: _ctx.expandedKeys,
     selectionKeys: _ctx.selectionKeys