primevue 3.16.2 → 3.18.0

package/tooltip/tooltip.js

@@ -4,11 +4,11 @@ this.primevue.tooltip = (function (utils) {
 
     function bindEvents(el) {
         const modifiers = el.$_ptooltipModifiers;
+
         if (modifiers.focus) {
             el.addEventListener('focus', onFocus);
             el.addEventListener('blur', onBlur);
-        }
-        else {
+        } else {
             el.addEventListener('mouseenter', onMouseEnter);
             el.addEventListener('mouseleave', onMouseLeave);
             el.addEventListener('click', onClick);
@@ -17,11 +17,11 @@ this.primevue.tooltip = (function (utils) {
 
     function unbindEvents(el) {
         const modifiers = el.$_ptooltipModifiers;
+
         if (modifiers.focus) {
             el.removeEventListener('focus', onFocus);
             el.removeEventListener('blur', onBlur);
-        }
-        else {
+        } else {
             el.removeEventListener('mouseenter', onMouseEnter);
             el.removeEventListener('mouseleave', onMouseLeave);
             el.removeEventListener('click', onClick);
@@ -30,7 +30,7 @@ this.primevue.tooltip = (function (utils) {
 
     function bindScrollListener(el) {
         if (!el.$_ptooltipScrollHandler) {
-            el.$_ptooltipScrollHandler = new utils.ConnectedOverlayScrollHandler(el, function() {
+            el.$_ptooltipScrollHandler = new utils.ConnectedOverlayScrollHandler(el, function () {
                 hide(el);
             });
         }
@@ -70,6 +70,7 @@ this.primevue.tooltip = (function (utils) {
         }
 
         let tooltipElement = create(el);
+
         align(el);
         utils.DomHandler.fadeIn(tooltipElement, 250);
 
@@ -77,6 +78,7 @@ this.primevue.tooltip = (function (utils) {
             if (!utils.DomHandler.isTouchDevice()) {
                 hide(el);
             }
+
             this.removeEventListener('resize', onWindowResize);
         });
 
@@ -95,23 +97,25 @@ this.primevue.tooltip = (function (utils) {
 
     function create(el) {
         const id = utils.UniqueComponentId() + '_tooltip';
+
         el.$_ptooltipId = id;
 
         let container = document.createElement('div');
+
         container.id = id;
 
         let tooltipArrow = document.createElement('div');
+
         tooltipArrow.className = 'p-tooltip-arrow';
         container.appendChild(tooltipArrow);
 
         let tooltipText = document.createElement('div');
-        tooltipText.className = 'p-tooltip-text';
 
+        tooltipText.className = 'p-tooltip-text';
 
         if (el.$_ptooltipEscape) {
             tooltipText.innerHTML = el.$_ptooltipValue;
-        }
-        else {
+        } else {
             tooltipText.innerHTML = '';
             tooltipText.appendChild(document.createTextNode(el.$_ptooltipValue));
         }
@@ -131,10 +135,12 @@ this.primevue.tooltip = (function (utils) {
     function remove(el) {
         if (el) {
             let tooltipElement = getTooltipElement(el);
+
             if (tooltipElement && tooltipElement.parentElement) {
                 utils.ZIndexUtils.clear(tooltipElement);
                 document.body.removeChild(tooltipElement);
             }
+
             el.$_ptooltipId = null;
         }
     }
@@ -144,6 +150,7 @@ this.primevue.tooltip = (function (utils) {
 
         if (modifiers.top) {
             alignTop(el);
+
             if (isOutOfBounds(el)) {
                 alignBottom(el);
 
@@ -151,9 +158,9 @@ this.primevue.tooltip = (function (utils) {
                     alignTop(el);
                 }
             }
-        }
-        else if (modifiers.left) {
+        } else if (modifiers.left) {
             alignLeft(el);
+
             if (isOutOfBounds(el)) {
                 alignRight(el);
 
@@ -169,9 +176,9 @@ this.primevue.tooltip = (function (utils) {
                     }
                 }
             }
-        }
-        else if (modifiers.bottom) {
+        } else if (modifiers.bottom) {
             alignBottom(el);
+
             if (isOutOfBounds(el)) {
                 alignTop(el);
 
@@ -179,9 +186,9 @@ this.primevue.tooltip = (function (utils) {
                     alignBottom(el);
                 }
             }
-        }
-        else {
+        } else {
             alignRight(el);
+
             if (isOutOfBounds(el)) {
                 alignLeft(el);
 
@@ -205,7 +212,7 @@ this.primevue.tooltip = (function (utils) {
         let targetLeft = offset.left + utils.DomHandler.getWindowScrollLeft();
         let targetTop = offset.top + utils.DomHandler.getWindowScrollTop();
 
-        return {left: targetLeft, top: targetTop};
+        return { left: targetLeft, top: targetTop };
     }
 
     function alignRight(el) {
@@ -214,6 +221,7 @@ this.primevue.tooltip = (function (utils) {
         let hostOffset = getHostOffset(el);
         let left = hostOffset.left + utils.DomHandler.getOuterWidth(el);
         let top = hostOffset.top + (utils.DomHandler.getOuterHeight(el) - utils.DomHandler.getOuterHeight(tooltipElement)) / 2;
+
         tooltipElement.style.left = left + 'px';
         tooltipElement.style.top = top + 'px';
     }
@@ -224,6 +232,7 @@ this.primevue.tooltip = (function (utils) {
         let hostOffset = getHostOffset(el);
         let left = hostOffset.left - utils.DomHandler.getOuterWidth(tooltipElement);
         let top = hostOffset.top + (utils.DomHandler.getOuterHeight(el) - utils.DomHandler.getOuterHeight(tooltipElement)) / 2;
+
         tooltipElement.style.left = left + 'px';
         tooltipElement.style.top = top + 'px';
     }
@@ -234,6 +243,7 @@ this.primevue.tooltip = (function (utils) {
         let hostOffset = getHostOffset(el);
         let left = hostOffset.left + (utils.DomHandler.getOuterWidth(el) - utils.DomHandler.getOuterWidth(tooltipElement)) / 2;
         let top = hostOffset.top - utils.DomHandler.getOuterHeight(tooltipElement);
+
         tooltipElement.style.left = left + 'px';
         tooltipElement.style.top = top + 'px';
     }
@@ -244,15 +254,17 @@ this.primevue.tooltip = (function (utils) {
         let hostOffset = getHostOffset(el);
         let left = hostOffset.left + (utils.DomHandler.getOuterWidth(el) - utils.DomHandler.getOuterWidth(tooltipElement)) / 2;
         let top = hostOffset.top + utils.DomHandler.getOuterHeight(el);
+
         tooltipElement.style.left = left + 'px';
         tooltipElement.style.top = top + 'px';
     }
 
     function preAlign(el, position) {
         let tooltipElement = getTooltipElement(el);
+
         tooltipElement.style.left = -999 + 'px';
         tooltipElement.style.top = -999 + 'px';
-        tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass||''}`;
+        tooltipElement.className = `p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
     }
 
     function isOutOfBounds(el) {
@@ -264,11 +276,11 @@ this.primevue.tooltip = (function (utils) {
         let height = utils.DomHandler.getOuterHeight(tooltipElement);
         let viewport = utils.DomHandler.getViewport();
 
-        return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
+        return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
     }
 
     function getTarget(el) {
-        return utils.DomHandler.hasClass(el, 'p-inputwrapper') ? utils.DomHandler.findSingle(el, 'input'): el;
+        return utils.DomHandler.hasClass(el, 'p-inputwrapper') ? utils.DomHandler.findSingle(el, 'input') : el;
     }
 
     function getModifiers(options) {
@@ -281,6 +293,7 @@ this.primevue.tooltip = (function (utils) {
         if (options.arg && typeof options.arg === 'object') {
             return Object.entries(options.arg).reduce((acc, [key, val]) => {
                 if (key === 'event' || key === 'position') acc[val] = true;
+
                 return acc;
             }, {});
         }
@@ -291,6 +304,7 @@ this.primevue.tooltip = (function (utils) {
     const Tooltip = {
         beforeMount(el, options) {
             let target = getTarget(el);
+
             target.$_ptooltipModifiers = getModifiers(options);
 
             if (!options.value) return;
@@ -300,9 +314,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
                 target.$_ptooltipFitContent = true;
-            }
-            else if (typeof options.value === 'object' && options.value) {
-                if (options.value.value === undefined || options.value.value === null || options.value.value.trim() === '') return;
+            } else if (typeof options.value === 'object' && options.value) {
+                if (utils.ObjectUtils.isEmpty(options.value.value)) return;
                 else {
                     /* eslint-disable */
                     target.$_ptooltipValue = options.value.value;
@@ -338,9 +351,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipDisabled = false;
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
-            }
-            else if (typeof options.value === 'object' && options.value) {
-                if (options.value.value === undefined || options.value.value === null || options.value.value.trim() === '') return;
+            } else if (typeof options.value === 'object' && options.value) {
+                if (utils.ObjectUtils.isEmpty(options.value.value)) return;
                 else {
                     /* eslint-disable */
                     target.$_ptooltipValue = options.value.value;

package/tooltip/tooltip.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tooltip=function(e){"use strict";function t(e){p(e.currentTarget)}function l(e){r(e.currentTarget)}function o(e){p(e.currentTarget)}function n(e){r(e.currentTarget)}function i(e){r(e.currentTarget)}function p(t){if(t.$_ptooltipDisabled)return;let l=function(t){const l=e.UniqueComponentId()+"_tooltip";t.$_ptooltipId=l;let o=document.createElement("div");o.id=l;let n=document.createElement("div");n.className="p-tooltip-arrow",o.appendChild(n);let i=document.createElement("div");i.className="p-tooltip-text",t.$_ptooltipEscape?i.innerHTML=t.$_ptooltipValue:(i.innerHTML="",i.appendChild(document.createTextNode(t.$_ptooltipValue)));o.appendChild(i),document.body.appendChild(o),o.style.display="inline-block",t.$_ptooltipFitContent&&(o.style.width="fit-content");return o}(t);!function(e){const t=e.$_ptooltipModifiers;t.top?(v(e),$(e)&&(f(e),$(e)&&v(e))):t.left?(c(e),$(e)&&(s(e),$(e)&&(v(e),$(e)&&(f(e),$(e)&&c(e))))):t.bottom?(f(e),$(e)&&(v(e),$(e)&&f(e))):(s(e),$(e)&&(c(e),$(e)&&(v(e),$(e)&&(f(e),$(e)&&s(e)))))}(t),e.DomHandler.fadeIn(l,250),window.addEventListener("resize",(function l(){e.DomHandler.isTouchDevice()||r(t),this.removeEventListener("resize",l)})),function(t){t.$_ptooltipScrollHandler||(t.$_ptooltipScrollHandler=new e.ConnectedOverlayScrollHandler(t,(function(){r(t)}))),t.$_ptooltipScrollHandler.bindScrollListener()}(t),e.ZIndexUtils.set("tooltip",l,t.$_ptooltipZIndex)}function r(e){u(e),function(e){e.$_ptooltipScrollHandler&&e.$_ptooltipScrollHandler.unbindScrollListener()}(e)}function a(e){return document.getElementById(e.$_ptooltipId)}function u(t){if(t){let l=a(t);l&&l.parentElement&&(e.ZIndexUtils.clear(l),document.body.removeChild(l)),t.$_ptooltipId=null}}function d(t){let l=t.getBoundingClientRect();return{left:l.left+e.DomHandler.getWindowScrollLeft(),top:l.top+e.DomHandler.getWindowScrollTop()}}function s(t){m(t,"right");let l=a(t),o=d(t),n=o.left+e.DomHandler.getOuterWidth(t),i=o.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(l))/2;l.style.left=n+"px",l.style.top=i+"px"}function c(t){m(t,"left");let l=a(t),o=d(t),n=o.left-e.DomHandler.getOuterWidth(l),i=o.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(l))/2;l.style.left=n+"px",l.style.top=i+"px"}function v(t){m(t,"top");let l=a(t),o=d(t),n=o.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(l))/2,i=o.top-e.DomHandler.getOuterHeight(l);l.style.left=n+"px",l.style.top=i+"px"}function f(t){m(t,"bottom");let l=a(t),o=d(t),n=o.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(l))/2,i=o.top+e.DomHandler.getOuterHeight(t);l.style.left=n+"px",l.style.top=i+"px"}function m(e,t){let l=a(e);l.style.left="-999px",l.style.top="-999px",l.className=`p-tooltip p-component p-tooltip-${t} ${e.$_ptooltipClass||""}`}function $(t){let l=a(t),o=l.getBoundingClientRect(),n=o.top,i=o.left,p=e.DomHandler.getOuterWidth(l),r=e.DomHandler.getOuterHeight(l),u=e.DomHandler.getViewport();return i+p>u.width||i<0||n<0||n+r>u.height}function g(t){return e.DomHandler.hasClass(t,"p-inputwrapper")?e.DomHandler.findSingle(t,"input"):t}function _(e){return e.modifiers&&Object.keys(e.modifiers).length?e.modifiers:e.arg&&"object"==typeof e.arg?Object.entries(e.arg).reduce(((e,[t,l])=>("event"!==t&&"position"!==t||(e[l]=!0),e)),{}):{}}return{beforeMount(e,p){let r=g(e);if(r.$_ptooltipModifiers=_(p),p.value){if("string"==typeof p.value)r.$_ptooltipValue=p.value,r.$_ptooltipDisabled=!1,r.$_ptooltipEscape=!1,r.$_ptooltipClass=null,r.$_ptooltipFitContent=!0;else if("object"==typeof p.value&&p.value){if(void 0===p.value.value||null===p.value.value||""===p.value.value.trim())return;r.$_ptooltipValue=p.value.value,r.$_ptooltipDisabled=!!p.value.disabled===p.value.disabled&&p.value.disabled,r.$_ptooltipEscape=!!p.value.escape===p.value.escape&&p.value.escape,r.$_ptooltipClass=p.value.class,r.$_ptooltipFitContent=!!p.value.fitContent!==p.value.fitContent||p.value.fitContent}r.$_ptooltipZIndex=p.instance.$primevue&&p.instance.$primevue.config&&p.instance.$primevue.config.zIndex.tooltip,function(e){e.$_ptooltipModifiers.focus?(e.addEventListener("focus",o),e.addEventListener("blur",n)):(e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",l),e.addEventListener("click",i))}(r)}},unmounted(p){let r=g(p);u(r),function(e){e.$_ptooltipModifiers.focus?(e.removeEventListener("focus",o),e.removeEventListener("blur",n)):(e.removeEventListener("mouseenter",t),e.removeEventListener("mouseleave",l),e.removeEventListener("click",i))}(r),r.$_ptooltipScrollHandler&&(r.$_ptooltipScrollHandler.destroy(),r.$_ptooltipScrollHandler=null),e.ZIndexUtils.clear(p)},updated(e,t){let l=g(e);if(l.$_ptooltipModifiers=_(t),t.value)if("string"==typeof t.value)l.$_ptooltipValue=t.value,l.$_ptooltipDisabled=!1,l.$_ptooltipEscape=!1,l.$_ptooltipClass=null;else if("object"==typeof t.value&&t.value){if(void 0===t.value.value||null===t.value.value||""===t.value.value.trim())return;l.$_ptooltipValue=t.value.value,l.$_ptooltipDisabled=!!t.value.disabled===t.value.disabled&&t.value.disabled,l.$_ptooltipEscape=!!t.value.escape===t.value.escape&&t.value.escape,l.$_ptooltipClass=t.value.class,l.$_ptooltipFitContent=!!t.value.fitContent!==t.value.fitContent||t.value.fitContent}}}}(primevue.utils);
+this.primevue=this.primevue||{},this.primevue.tooltip=function(e){"use strict";function t(e){p(e.currentTarget)}function o(e){r(e.currentTarget)}function l(e){p(e.currentTarget)}function n(e){r(e.currentTarget)}function i(e){r(e.currentTarget)}function p(t){if(t.$_ptooltipDisabled)return;let o=function(t){const o=e.UniqueComponentId()+"_tooltip";t.$_ptooltipId=o;let l=document.createElement("div");l.id=o;let n=document.createElement("div");n.className="p-tooltip-arrow",l.appendChild(n);let i=document.createElement("div");i.className="p-tooltip-text",t.$_ptooltipEscape?i.innerHTML=t.$_ptooltipValue:(i.innerHTML="",i.appendChild(document.createTextNode(t.$_ptooltipValue)));l.appendChild(i),document.body.appendChild(l),l.style.display="inline-block",t.$_ptooltipFitContent&&(l.style.width="fit-content");return l}(t);!function(e){const t=e.$_ptooltipModifiers;t.top?(f(e),$(e)&&(v(e),$(e)&&f(e))):t.left?(c(e),$(e)&&(s(e),$(e)&&(f(e),$(e)&&(v(e),$(e)&&c(e))))):t.bottom?(v(e),$(e)&&(f(e),$(e)&&v(e))):(s(e),$(e)&&(c(e),$(e)&&(f(e),$(e)&&(v(e),$(e)&&s(e)))))}(t),e.DomHandler.fadeIn(o,250),window.addEventListener("resize",(function o(){e.DomHandler.isTouchDevice()||r(t),this.removeEventListener("resize",o)})),function(t){t.$_ptooltipScrollHandler||(t.$_ptooltipScrollHandler=new e.ConnectedOverlayScrollHandler(t,(function(){r(t)}))),t.$_ptooltipScrollHandler.bindScrollListener()}(t),e.ZIndexUtils.set("tooltip",o,t.$_ptooltipZIndex)}function r(e){u(e),function(e){e.$_ptooltipScrollHandler&&e.$_ptooltipScrollHandler.unbindScrollListener()}(e)}function a(e){return document.getElementById(e.$_ptooltipId)}function u(t){if(t){let o=a(t);o&&o.parentElement&&(e.ZIndexUtils.clear(o),document.body.removeChild(o)),t.$_ptooltipId=null}}function d(t){let o=t.getBoundingClientRect();return{left:o.left+e.DomHandler.getWindowScrollLeft(),top:o.top+e.DomHandler.getWindowScrollTop()}}function s(t){m(t,"right");let o=a(t),l=d(t),n=l.left+e.DomHandler.getOuterWidth(t),i=l.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(o))/2;o.style.left=n+"px",o.style.top=i+"px"}function c(t){m(t,"left");let o=a(t),l=d(t),n=l.left-e.DomHandler.getOuterWidth(o),i=l.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(o))/2;o.style.left=n+"px",o.style.top=i+"px"}function f(t){m(t,"top");let o=a(t),l=d(t),n=l.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(o))/2,i=l.top-e.DomHandler.getOuterHeight(o);o.style.left=n+"px",o.style.top=i+"px"}function v(t){m(t,"bottom");let o=a(t),l=d(t),n=l.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(o))/2,i=l.top+e.DomHandler.getOuterHeight(t);o.style.left=n+"px",o.style.top=i+"px"}function m(e,t){let o=a(e);o.style.left="-999px",o.style.top="-999px",o.className=`p-tooltip p-component p-tooltip-${t} ${e.$_ptooltipClass||""}`}function $(t){let o=a(t),l=o.getBoundingClientRect(),n=l.top,i=l.left,p=e.DomHandler.getOuterWidth(o),r=e.DomHandler.getOuterHeight(o),u=e.DomHandler.getViewport();return i+p>u.width||i<0||n<0||n+r>u.height}function g(t){return e.DomHandler.hasClass(t,"p-inputwrapper")?e.DomHandler.findSingle(t,"input"):t}function _(e){return e.modifiers&&Object.keys(e.modifiers).length?e.modifiers:e.arg&&"object"==typeof e.arg?Object.entries(e.arg).reduce(((e,[t,o])=>("event"!==t&&"position"!==t||(e[o]=!0),e)),{}):{}}return{beforeMount(p,r){let a=g(p);if(a.$_ptooltipModifiers=_(r),r.value){if("string"==typeof r.value)a.$_ptooltipValue=r.value,a.$_ptooltipDisabled=!1,a.$_ptooltipEscape=!1,a.$_ptooltipClass=null,a.$_ptooltipFitContent=!0;else if("object"==typeof r.value&&r.value){if(e.ObjectUtils.isEmpty(r.value.value))return;a.$_ptooltipValue=r.value.value,a.$_ptooltipDisabled=!!r.value.disabled===r.value.disabled&&r.value.disabled,a.$_ptooltipEscape=!!r.value.escape===r.value.escape&&r.value.escape,a.$_ptooltipClass=r.value.class,a.$_ptooltipFitContent=!!r.value.fitContent!==r.value.fitContent||r.value.fitContent}a.$_ptooltipZIndex=r.instance.$primevue&&r.instance.$primevue.config&&r.instance.$primevue.config.zIndex.tooltip,function(e){e.$_ptooltipModifiers.focus?(e.addEventListener("focus",l),e.addEventListener("blur",n)):(e.addEventListener("mouseenter",t),e.addEventListener("mouseleave",o),e.addEventListener("click",i))}(a)}},unmounted(p){let r=g(p);u(r),function(e){e.$_ptooltipModifiers.focus?(e.removeEventListener("focus",l),e.removeEventListener("blur",n)):(e.removeEventListener("mouseenter",t),e.removeEventListener("mouseleave",o),e.removeEventListener("click",i))}(r),r.$_ptooltipScrollHandler&&(r.$_ptooltipScrollHandler.destroy(),r.$_ptooltipScrollHandler=null),e.ZIndexUtils.clear(p)},updated(t,o){let l=g(t);if(l.$_ptooltipModifiers=_(o),o.value)if("string"==typeof o.value)l.$_ptooltipValue=o.value,l.$_ptooltipDisabled=!1,l.$_ptooltipEscape=!1,l.$_ptooltipClass=null;else if("object"==typeof o.value&&o.value){if(e.ObjectUtils.isEmpty(o.value.value))return;l.$_ptooltipValue=o.value.value,l.$_ptooltipDisabled=!!o.value.disabled===o.value.disabled&&o.value.disabled,l.$_ptooltipEscape=!!o.value.escape===o.value.escape&&o.value.escape,l.$_ptooltipClass=o.value.class,l.$_ptooltipFitContent=!!o.value.fitContent!==o.value.fitContent||o.value.fitContent}}}}(primevue.utils);

package/tree/Tree.d.ts

@@ -46,6 +46,14 @@ export interface TreeNode {
      * Optional
      */
     [key: string]: any;
+    /**
+     * Icon to use in expanded state.
+     */
+    expandedIcon?: string;
+    /**
+     * Icon to use in collapsed state.
+     */
+    collapsedIcon?: string;
 }
 
 type TreeSelectionModeType = 'single' | 'multiple' | 'checkbox' | undefined;
@@ -149,9 +157,9 @@ export declare type TreeEmits = {
      */
     'update:expandedKeys': (value: TreeExpandedKeys) => void;
     /**
-      * Emitted when the selection keys change.
-      * @param {TreeSelectionKeys} value - New selection keys.
-      */
+     * Emitted when the selection keys change.
+     * @param {TreeSelectionKeys} value - New selection keys.
+     */
     'update:selectionKeys': (event: TreeSelectionKeys) => void;
     /**
      * Callback to invoke when a node is selected.
@@ -173,13 +181,13 @@ export declare type TreeEmits = {
      * @param {TreeNode} node - Node instance.
      */
     'node-collapse': (node: TreeNode) => void;
-}
+};
 
-declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> { }
+declare class Tree extends ClassComponent<TreeProps, TreeSlots, TreeEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Tree: GlobalComponentConstructor<Tree>
+        Tree: GlobalComponentConstructor<Tree>;
     }
 }
 
@@ -193,7 +201,7 @@ declare module '@vue/runtime-core' {
  *
  * Demos:
  *
- * - [Tree](https://www.primefaces.org/primevue/showcase/#/tree)
+ * - [Tree](https://www.primefaces.org/primevue/tree)
  *
  */
 export default Tree;

package/tree/Tree.vue

@@ -5,16 +5,26 @@
                 <i :class="loadingIconClass" />
             </div>
         </template>
-        <div class="p-tree-filter-container" v-if="filter">
-            <input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder"
-                @keydown="onFilterKeydown" v-model="filterValue" />
+        <div v-if="filter" class="p-tree-filter-container">
+            <input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" />
             <span class="p-tree-filter-icon pi pi-search"></span>
         </div>
-        <div class="p-tree-wrapper" :style="{maxHeight: scrollHeight}">
+        <div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }">
             <ul class="p-tree-container" role="tree">
-                <TreeNode v-for="(node, index) of valueToRender" :key="node.key" :node="node" :templates="$slots" :level="level + 1" :index="index"
-                    :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
-                    :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
+                <TreeNode
+                    v-for="(node, index) of valueToRender"
+                    :key="node.key"
+                    :node="node"
+                    :templates="$slots"
+                    :level="level + 1"
+                    :index="index"
+                    :expandedKeys="d_expandedKeys"
+                    @node-toggle="onNodeToggle"
+                    @node-click="onNodeClick"
+                    :selectionMode="selectionMode"
+                    :selectionKeys="selectionKeys"
+                    @checkbox-change="onCheckboxChange"
+                ></TreeNode>
             </ul>
         </div>
     </div>
@@ -22,7 +32,7 @@
 
 <script>
 import TreeNode from './TreeNode.vue';
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Tree',
@@ -89,7 +99,7 @@ export default {
         return {
             d_expandedKeys: this.expandedKeys || {},
             filterValue: null
-        }
+        };
     },
     watch: {
         expandedKeys(newValue) {
@@ -103,13 +113,12 @@ export default {
             if (this.d_expandedKeys[key]) {
                 delete this.d_expandedKeys[key];
                 this.$emit('node-collapse', node);
-            }
-            else {
+            } else {
                 this.d_expandedKeys[key] = true;
                 this.$emit('node-expand', node);
             }
 
-            this.d_expandedKeys = {...this.d_expandedKeys};
+            this.d_expandedKeys = { ...this.d_expandedKeys };
             this.$emit('update:expandedKeys', this.d_expandedKeys);
         },
         onNodeClick(event) {
@@ -123,35 +132,30 @@ export default {
         onCheckboxChange(event) {
             this.$emit('update:selectionKeys', event.selectionKeys);
 
-            if (event.check)
-                this.$emit('node-select', event.node);
-            else
-                this.$emit('node-unselect', event.node);
+            if (event.check) this.$emit('node-select', event.node);
+            else this.$emit('node-unselect', event.node);
         },
         handleSelectionWithMetaKey(event) {
             const originalEvent = event.originalEvent;
             const node = event.node;
-            const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
             const selected = this.isNodeSelected(node);
             let _selectionKeys;
 
             if (selected && metaKey) {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else {
-                    _selectionKeys = {...this.selectionKeys};
+                } else {
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
                 }
 
                 this.$emit('node-unselect', node);
-            }
-            else {
+            } else {
                 if (this.isSingleSelectionMode()) {
                     _selectionKeys = {};
-                }
-                else if (this.isMultipleSelectionMode()) {
-                    _selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {});
+                } else if (this.isMultipleSelectionMode()) {
+                    _selectionKeys = !metaKey ? {} : this.selectionKeys ? { ...this.selectionKeys } : {};
                 }
 
                 _selectionKeys[node.key] = true;
@@ -169,22 +173,19 @@ export default {
                 if (selected) {
                     _selectionKeys = {};
                     this.$emit('node-unselect', node);
-                }
-                else {
+                } else {
                     _selectionKeys = {};
                     _selectionKeys[node.key] = true;
                     this.$emit('node-select', node);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
-                    _selectionKeys = {...this.selectionKeys};
+                    _selectionKeys = { ...this.selectionKeys };
                     delete _selectionKeys[node.key];
 
                     this.$emit('node-unselect', node);
-                }
-                else {
-                    _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+                } else {
+                    _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
                     _selectionKeys[node.key] = true;
 
                     this.$emit('node-select', node);
@@ -200,10 +201,10 @@ export default {
             return this.selectionMode === 'multiple';
         },
         isNodeSelected(node) {
-            return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[node.key] === true : false;
+            return this.selectionMode && this.selectionKeys ? this.selectionKeys[node.key] === true : false;
         },
         isChecked(node) {
-            return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked: false;
+            return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked : false;
         },
         isNodeLeaf(node) {
             return node.leaf === false ? false : !(node.children && node.children.length);
@@ -216,11 +217,15 @@ export default {
         findFilteredNodes(node, paramsWithoutNode) {
             if (node) {
                 let matched = false;
+
                 if (node.children) {
                     let childNodes = [...node.children];
+
                     node.children = [];
+
                     for (let childNode of childNodes) {
-                        let copyChildNode = {...childNode};
+                        let copyChildNode = { ...childNode };
+
                         if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
                             matched = true;
                             node.children.push(copyChildNode);
@@ -233,17 +238,19 @@ export default {
                 }
             }
         },
-        isFilterMatched(node, {searchFields, filterText, strict}) {
+        isFilterMatched(node, { searchFields, filterText, strict }) {
             let matched = false;
-            for(let field of searchFields) {
+
+            for (let field of searchFields) {
                 let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
-                if(fieldValue.indexOf(filterText) > -1) {
+
+                if (fieldValue.indexOf(filterText) > -1) {
                     matched = true;
                 }
             }
 
             if (!matched || (strict && !this.isNodeLeaf(node))) {
-                matched = this.findFilteredNodes(node, {searchFields, filterText, strict}) || matched;
+                matched = this.findFilteredNodes(node, { searchFields, filterText, strict }) || matched;
             }
 
             return matched;
@@ -251,11 +258,14 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-tree p-component', {
-                'p-tree-selectable': this.selectionMode != null,
-                'p-tree-loading': this.loading,
-                'p-tree-flex-scrollable': this.scrollHeight === 'flex'
-            }];
+            return [
+                'p-tree p-component',
+                {
+                    'p-tree-selectable': this.selectionMode != null,
+                    'p-tree-loading': this.loading,
+                    'p-tree-flex-scrollable': this.scrollHeight === 'flex'
+                }
+            ];
         },
         loadingIconClass() {
             return ['p-tree-loading-icon pi-spin', this.loadingIcon];
@@ -267,11 +277,13 @@ export default {
             const strict = this.filterMode === 'strict';
 
             for (let node of this.value) {
-                let _node = {...node};
-                let paramsWithoutNode = {searchFields, filterText, strict};
+                let _node = { ...node };
+                let paramsWithoutNode = { searchFields, filterText, strict };
 
-                if ((strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
-                    (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))) {
+                if (
+                    (strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
+                    (!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))
+                ) {
                     filteredNodes.push(_node);
                 }
             }
@@ -279,16 +291,14 @@ export default {
             return filteredNodes;
         },
         valueToRender() {
-            if (this.filterValue && this.filterValue.trim().length > 0)
-                return this.filteredValue;
-            else
-                return this.value;
+            if (this.filterValue && this.filterValue.trim().length > 0) return this.filteredValue;
+            else return this.value;
         }
     },
     components: {
-        'TreeNode': TreeNode
+        TreeNode: TreeNode
     }
-}
+};
 </script>
 
 <style>
@@ -347,7 +357,7 @@ export default {
 .p-tree-filter-icon {
     position: absolute;
     top: 50%;
-    margin-top: -.5rem;
+    margin-top: -0.5rem;
 }
 
 .p-tree-loading {