primevue 4.3.9 → 4.4.1

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,26 @@ var script$2 = {
       type: Number,
       "default": 0
     },
+    draggableNodes: {
+      type: Boolean,
+      "default": null
+    },
+    droppableNodes: {
+      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,29 +121,82 @@ 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; }
-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'],
+  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
@@ -149,10 +221,38 @@ var script$1 = {
       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: function data() {
+    return {
+      isPrevDropPointHovered: false,
+      isNextDropPointHovered: false,
+      isNodeDropHovered: false
+    };
+  },
   mounted: function mounted() {
     this.setAllNodesTabIndexes();
   },
@@ -289,6 +389,205 @@ var script$1 = {
     onTabKey: function onTabKey() {
       this.setAllNodesTabIndexes();
     },
+    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,
+        dragNode = _this$$pcTree.dragNode,
+        dragNodeIndex = _this$$pcTree.dragNodeIndex,
+        dragNodeSubNodes = _this$$pcTree.dragNodeSubNodes,
+        dragDropService = _this$$pcTree.dragDropService;
+      if (!this.node || dragNodeIndex == null || !dragNode || !dragNodeSubNodes) {
+        return null;
+      }
+      var position = this.dropPosition;
+      var 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: function onNodeDrop(event) {
+      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;
+        if (isValidDrop) {
+          if (this.validateDrop) {
+            this.$emit('node-drop', {
+              originalEvent: event,
+              value: this.rootNodes,
+              dragNode: dragNode,
+              dropNode: this.node,
+              index: this.index,
+              accept: function accept() {
+                var updatedNodes = _this5.insertNodeOnDrop();
+                _this5.$emit('node-drop', {
+                  originalEvent: event,
+                  value: updatedNodes,
+                  dragNode: dragNode,
+                  dropNode: _this5.node,
+                  index: _this5.index
+                });
+              }
+            });
+          } else {
+            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;
+      }
+    },
+    onNodeDragStart: function onNodeDragStart(event) {
+      if (this.isNodeDraggable) {
+        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"]');
+        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.dataTransfer.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) {
+      if (this.isDroppable) {
+        event.dataTransfer.dropEffect = 'copy';
+        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;
+        }
+      } else {
+        event.dataTransfer.dropEffect = 'none';
+      }
+      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;
+    },
+    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 +763,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.draggableNodes;
+    },
+    isDroppable: function isDroppable() {
+      return this.droppableNodes && 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 +808,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 +827,41 @@ 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[14] || (_cache[14] = 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);
+    }),
+    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[8] || (_cache[8] = function () {
+      return $options.onNodeDragEnd && $options.onNodeDragEnd.apply($options, arguments);
+    }),
+    onDrop: _cache[9] || (_cache[9] = 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 +935,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 +959,25 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       selectionMode: $props.selectionMode,
       selectionKeys: $props.selectionKeys,
       onCheckboxChange: $options.propagateUp,
+      draggableScope: $props.draggableScope,
+      draggableNodes: $props.draggableNodes,
+      droppableNodes: $props.droppableNodes,
+      validateDrop: $props.validateDrop,
+      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", "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", "draggableNodes", "droppableNodes", "validateDrop", "unstyled", "pt"]);
   }), 128))], 16)) : createCommentVNode("", true)], 16, _hoisted_1$1);
 }
 
@@ -627,18 +1000,58 @@ 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', 'node-dragenter', 'node-dragleave', 'update:value', 'drag-enter', 'drag-leave'],
   data: function 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: function expandedKeys(newValue) {
       this.d_expandedKeys = newValue;
     }
   },
+  mounted: function mounted() {
+    var _this = this;
+    if (this.droppableNodes) {
+      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 +1207,169 @@ var script = {
         }) || matched;
       }
       return matched;
+    },
+    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
+        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);
+    },
+    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();
+          }
+          return false;
+        }
+      }
+      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.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
+        event.dataTransfer.dropEffect = 'copy';
+      } else {
+        event.dataTransfer.dropEffect = 'none';
+      }
+      event.preventDefault();
+    },
+    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.droppableNodes) {
+        var 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: 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.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,
+              accept: function accept() {
+                _this2.processTreeDrop(dragNode, dragNodeIndex);
+              }
+            });
+          } else {
+            this.$emit('node-drop', {
+              originalEvent: event,
+              value: this.value,
+              dragNode: dragNode,
+              dropNode: null,
+              index: dragNodeIndex
+            });
+            this.processTreeDrop(dragNode, dragNodeIndex);
+          }
+        }
+      }
     }
   },
   computed: {
@@ -802,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 _iterator3 = _createForOfIteratorHelper(this.value),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(this.value),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var node = _step3.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var node = _step4.value;
           var _node = _objectSpread$1({}, node);
           var paramsWithoutNode = {
             searchFields: searchFields,
@@ -818,15 +1394,22 @@ var script = {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.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 +1450,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 +1522,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 +1532,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 +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,
+      validateDrop: _ctx.validateDrop,
+      onNodeDrop: $options.onNodeDrop,
+      onNodeDragenter: $options.onNodeDragEnter,
+      onNodeDragleave: $options.onNodeDragLeave,
+      onValueChange: $options.onValueChanged,
       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", "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)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "footer", {
     value: _ctx.value,
     expandedKeys: _ctx.expandedKeys,
     selectionKeys: _ctx.selectionKeys