primevue 3.29.2 → 3.30.0

package/tooltip/tooltip.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tooltip=function(e){"use strict";let t;function o(e){e.$_ptooltipModifiers.focus?(e.addEventListener("focus",p),e.addEventListener("blur",a)):(e.addEventListener("mouseenter",i),e.addEventListener("mouseleave",n),e.addEventListener("click",r)),e.addEventListener("keydown",u)}function l(e){e.$_ptooltipModifiers.focus?(e.removeEventListener("focus",p),e.removeEventListener("blur",a)):(e.removeEventListener("mouseenter",i),e.removeEventListener("mouseleave",n),e.removeEventListener("click",r)),e.removeEventListener("keydown",u)}function i(e){const t=e.currentTarget;s(t,t.$_ptooltipShowDelay)}function n(e){const t=e.currentTarget;v(t,t.$_ptooltipHideDelay)}function p(e){const t=e.currentTarget;s(t,t.$_ptooltipShowDelay)}function a(e){const t=e.currentTarget;v(t,t.$_ptooltipHideDelay)}function r(e){const t=e.currentTarget;v(t,t.$_ptooltipHideDelay)}function u(e){"Escape"===e.code&&v(e.currentTarget,hideDelay)}function d(t){if(t.$_ptooltipDisabled)return;let o=function(t){const o=""!==t.$_ptooltipIdAttr?t.$_ptooltipIdAttr:e.UniqueComponentId()+"_tooltip";t.$_ptooltipId=o;let l=document.createElement("div");l.id=o;let i=document.createElement("div");i.className="p-tooltip-arrow",l.appendChild(i);let n=document.createElement("div");n.className="p-tooltip-text",t.$_ptooltipEscape?n.innerHTML=t.$_ptooltipValue:(n.innerHTML="",n.appendChild(document.createTextNode(t.$_ptooltipValue)));l.setAttribute("role","tooltip"),l.appendChild(n),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?(y(e),h(e)&&(H(e),h(e)&&y(e))):t.left?(g(e),h(e)&&(_(e),h(e)&&(y(e),h(e)&&(H(e),h(e)&&g(e))))):t.bottom?(H(e),h(e)&&(y(e),h(e)&&H(e))):(_(e),h(e)&&(g(e),h(e)&&(y(e),h(e)&&(H(e),h(e)&&_(e)))))}(t),e.DomHandler.fadeIn(o,250),window.addEventListener("resize",(function o(){e.DomHandler.isTouchDevice()||v(t),this.removeEventListener("resize",o)})),function(t){t.$_ptooltipScrollHandler||(t.$_ptooltipScrollHandler=new e.ConnectedOverlayScrollHandler(t,(function(){v(t)}))),t.$_ptooltipScrollHandler.bindScrollListener()}(t),e.ZIndexUtils.set("tooltip",o,t.$_ptooltipZIndex)}function s(e,o){void 0!==o?t=setTimeout((()=>d(e)),o):d(e)}function c(e){m(e),function(e){e.$_ptooltipScrollHandler&&e.$_ptooltipScrollHandler.unbindScrollListener()}(e)}function v(e,o){clearTimeout(t),void 0!==o?setTimeout((()=>c(e)),o):c(e)}function f(e){return document.getElementById(e.$_ptooltipId)}function m(t){if(t){let o=f(t);o&&o.parentElement&&(e.ZIndexUtils.clear(o),document.body.removeChild(o)),t.$_ptooltipId=null}}function $(t){let o=t.getBoundingClientRect();return{left:o.left+e.DomHandler.getWindowScrollLeft(),top:o.top+e.DomHandler.getWindowScrollTop()}}function _(t){D(t,"right");let o=f(t),l=$(t),i=l.left+e.DomHandler.getOuterWidth(t),n=l.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(o))/2;o.style.left=i+"px",o.style.top=n+"px"}function g(t){D(t,"left");let o=f(t),l=$(t),i=l.left-e.DomHandler.getOuterWidth(o),n=l.top+(e.DomHandler.getOuterHeight(t)-e.DomHandler.getOuterHeight(o))/2;o.style.left=i+"px",o.style.top=n+"px"}function y(t){D(t,"top");let o=f(t),l=$(t),i=l.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(o))/2,n=l.top-e.DomHandler.getOuterHeight(o);o.style.left=i+"px",o.style.top=n+"px"}function H(t){D(t,"bottom");let o=f(t),l=$(t),i=l.left+(e.DomHandler.getOuterWidth(t)-e.DomHandler.getOuterWidth(o))/2,n=l.top+e.DomHandler.getOuterHeight(t);o.style.left=i+"px",o.style.top=n+"px"}function D(e,t){let o=f(e);o.style.left="-999px",o.style.top="-999px",o.className=`p-tooltip p-component p-tooltip-${t} ${e.$_ptooltipClass||""}`}function h(t){let o=f(t),l=o.getBoundingClientRect(),i=l.top,n=l.left,p=e.DomHandler.getOuterWidth(o),a=e.DomHandler.getOuterHeight(o),r=e.DomHandler.getViewport();return n+p>r.width||n<0||i<0||i+a>r.height}function b(t){return e.DomHandler.hasClass(t,"p-inputwrapper")?e.DomHandler.findSingle(t,"input"):t}function E(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(t,l){let i=b(t);if(i.$_ptooltipModifiers=E(l),l.value){if("string"==typeof l.value)i.$_ptooltipValue=l.value,i.$_ptooltipDisabled=!1,i.$_ptooltipEscape=!1,i.$_ptooltipClass=null,i.$_ptooltipFitContent=!0,i.$_ptooltipShowDelay=0,i.$_ptooltipHideDelay=0;else if("object"==typeof l.value&&l.value){if(e.ObjectUtils.isEmpty(l.value.value)||""===l.value.value.trim())return;i.$_ptooltipValue=l.value.value,i.$_ptooltipDisabled=!!l.value.disabled===l.value.disabled&&l.value.disabled,i.$_ptooltipEscape=!!l.value.escape===l.value.escape&&l.value.escape,i.$_ptooltipClass=l.value.class,i.$_ptooltipFitContent=!!l.value.fitContent!==l.value.fitContent||l.value.fitContent,i.$_ptooltipIdAttr=l.value.id||"",i.$_ptooltipShowDelay=l.value.showDelay||0,i.$_ptooltipHideDelay=l.value.hideDelay||0}i.$_ptooltipZIndex=l.instance.$primevue&&l.instance.$primevue.config&&l.instance.$primevue.config.zIndex.tooltip,o(i)}},unmounted(e){let t=b(e);m(t),l(t),t.$_ptooltipScrollHandler&&(t.$_ptooltipScrollHandler.destroy(),t.$_ptooltipScrollHandler=null)},updated(t,i){let n=b(t);if(n.$_ptooltipModifiers=E(i),i.value){if("string"==typeof i.value)n.$_ptooltipValue=i.value,n.$_ptooltipDisabled=!1,n.$_ptooltipEscape=!1,n.$_ptooltipClass=null,n.$_ptooltipIdAttr="",n.$_ptooltipShowDelay=0,n.$_ptooltipHideDelay=0,o(n);else if("object"==typeof i.value&&i.value){if(e.ObjectUtils.isEmpty(i.value.value)||""===i.value.value.trim())return void l(n);n.$_ptooltipValue=i.value.value,n.$_ptooltipDisabled=!!i.value.disabled===i.value.disabled&&i.value.disabled,n.$_ptooltipEscape=!!i.value.escape===i.value.escape&&i.value.escape,n.$_ptooltipClass=i.value.class,n.$_ptooltipFitContent=!!i.value.fitContent!==i.value.fitContent||i.value.fitContent,n.$_ptooltipIdAttr=i.value.id||"",n.$_ptooltipShowDelay=i.value.showDelay||0,n.$_ptooltipHideDelay=i.value.hideDelay||0,o(n)}}else l(n)}}}(primevue.utils);
+this.primevue=this.primevue||{},this.primevue.tooltip=function(t,e,o){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=i(e),l=o.useStyle("\n.p-tooltip {\n    position:absolute;\n    display:none;\n    padding: .25em .5rem;\n    max-width: 12.5rem;\n}\n\n.p-tooltip.p-tooltip-right,\n.p-tooltip.p-tooltip-left {\n    padding: 0 .25rem;\n}\n\n.p-tooltip.p-tooltip-top,\n.p-tooltip.p-tooltip-bottom {\n    padding:.25em 0;\n}\n\n.p-tooltip .p-tooltip-text {\n   white-space: pre-line;\n   word-break: break-word;\n}\n\n.p-tooltip-arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n}\n\n.p-tooltip-right .p-tooltip-arrow {\n    top: 50%;\n    left: 0;\n    margin-top: -.25rem;\n    border-width: .25em .25em .25em 0;\n}\n\n.p-tooltip-left .p-tooltip-arrow {\n    top: 50%;\n    right: 0;\n    margin-top: -.25rem;\n    border-width: .25em 0 .25em .25rem;\n}\n\n.p-tooltip.p-tooltip-top {\n    padding: .25em 0;\n}\n\n.p-tooltip-top .p-tooltip-arrow {\n    bottom: 0;\n    left: 50%;\n    margin-left: -.25rem;\n    border-width: .25em .25em 0;\n}\n\n.p-tooltip-bottom .p-tooltip-arrow {\n    top: 0;\n    left: 50%;\n    margin-left: -.25rem;\n    border-width: 0 .25em .25rem;\n}\n",{name:"tooltip",manual:!0});function r(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(t,e){if(t){if("string"==typeof t)return p(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?p(t,e):void 0}}function p(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o<e;o++)i[o]=t[o];return i}function a(t,e){var o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var i,n,l,r,s=[],p=!0,a=!1;try{if(l=(o=o.call(t)).next,0===e){if(Object(o)!==o)return;p=!1}else for(;!(p=(i=l.call(o)).done)&&(s.push(i.value),s.length!==e);p=!0);}catch(t){a=!0,n=t}finally{try{if(!p&&null!=o.return&&(r=o.return(),Object(r)!==r))return}finally{if(a)throw n}}return s}}function u(t){if(Array.isArray(t))return t}function d(t){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},d(t)}return n.default.extend({css:{classes:{root:"p-tooltip p-component",arrow:"p-tooltip-arrow",text:"p-tooltip-text"},loadStyle:l.load}}).extend("tooltip",{beforeMount:function(e,o){var i,n,l,r=this.getTarget(e);if(r.$_ptooltipModifiers=this.getModifiers(o),o.value){if("string"==typeof o.value)r.$_ptooltipValue=o.value,r.$_ptooltipDisabled=!1,r.$_ptooltipEscape=!1,r.$_ptooltipClass=null,r.$_ptooltipFitContent=!0,r.$_ptooltipIdAttr=t.UniqueComponentId()+"_tooltip",r.$_ptooltipShowDelay=0,r.$_ptooltipHideDelay=0;else if("object"===d(o.value)&&o.value){if(t.ObjectUtils.isEmpty(o.value.value)||""===o.value.value.trim())return;r.$_ptooltipValue=o.value.value,r.$_ptooltipDisabled=!!o.value.disabled===o.value.disabled&&o.value.disabled,r.$_ptooltipEscape=!!o.value.escape===o.value.escape&&o.value.escape,r.$_ptooltipClass=o.value.class||"",r.$_ptooltipFitContent=!!o.value.fitContent!==o.value.fitContent||o.value.fitContent,r.$_ptooltipIdAttr=o.value.id||t.UniqueComponentId()+"_tooltip",r.$_ptooltipShowDelay=o.value.showDelay||0,r.$_ptooltipHideDelay=o.value.hideDelay||0}r.$_ptooltipZIndex=null===(i=o.instance.$primevue)||void 0===i||null===(i=i.config)||void 0===i||null===(i=i.zIndex)||void 0===i?void 0:i.tooltip,r.unstyled=(null===(n=o.instance.$primevue)||void 0===n||null===(n=n.config)||void 0===n?void 0:n.unstyled)||(null===(l=o.value)||void 0===l?void 0:l.unstyled)||!1,this.bindEvents(r,o),e.setAttribute("data-pd-tooltip",!0)}},updated:function(e,o){var i,n,l=this.getTarget(e);if(l.$_ptooltipModifiers=this.getModifiers(o),this.unbindEvents(l),o.value){if("string"==typeof o.value)l.$_ptooltipValue=o.value,l.$_ptooltipDisabled=!1,l.$_ptooltipEscape=!1,l.$_ptooltipClass=null,l.$_ptooltipIdAttr=l.$_ptooltipIdAttr||t.UniqueComponentId()+"_tooltip",l.$_ptooltipShowDelay=0,l.$_ptooltipHideDelay=0,this.bindEvents(l,o);else if("object"===d(o.value)&&o.value){if(t.ObjectUtils.isEmpty(o.value.value)||""===o.value.value.trim())return void this.unbindEvents(l,o);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,l.$_ptooltipIdAttr=o.value.id||l.$_ptooltipIdAttr||t.UniqueComponentId()+"_tooltip",l.$_ptooltipShowDelay=o.value.showDelay||0,l.$_ptooltipHideDelay=o.value.hideDelay||0,this.bindEvents(l,o)}l.unstyled=(null===(i=o.instance.$primevue)||void 0===i||null===(i=i.config)||void 0===i?void 0:i.unstyled)||(null===(n=o.value)||void 0===n?void 0:n.unstyled)||!1}},unmounted:function(t,e){var o=this.getTarget(t);this.remove(o),this.unbindEvents(o,e),o.$_ptooltipScrollHandler&&(o.$_ptooltipScrollHandler.destroy(),o.$_ptooltipScrollHandler=null)},timer:void 0,methods:{bindEvents:function(t,e){var o=this;t.$_ptooltipModifiers.focus?(t.$_focusevent=function(t){return o.onFocus(t,e)},t.addEventListener("focus",t.$_focusevent),t.addEventListener("blur",this.onBlur.bind(this))):(t.$_mouseenterevent=function(t){return o.onMouseEnter(t,e)},t.addEventListener("mouseenter",t.$_mouseenterevent),t.addEventListener("mouseleave",this.onMouseLeave.bind(this)),t.addEventListener("click",this.onClick.bind(this))),t.addEventListener("keydown",this.onKeydown.bind(this))},unbindEvents:function(t){t.$_ptooltipModifiers.focus?(t.removeEventListener("focus",t.$_focusevent),t.$_focusevent=null,t.removeEventListener("blur",this.onBlur.bind(this))):(t.removeEventListener("mouseenter",t.$_mouseenterevent),t.$_mouseenterevent=null,t.removeEventListener("mouseleave",this.onMouseLeave.bind(this)),t.removeEventListener("click",this.onClick.bind(this))),t.removeEventListener("keydown",this.onKeydown.bind(this))},bindScrollListener:function(e){var o=this;e.$_ptooltipScrollHandler||(e.$_ptooltipScrollHandler=new t.ConnectedOverlayScrollHandler(e,(function(){o.hide(e)}))),e.$_ptooltipScrollHandler.bindScrollListener()},unbindScrollListener:function(t){t.$_ptooltipScrollHandler&&t.$_ptooltipScrollHandler.unbindScrollListener()},onMouseEnter:function(t,e){var o=t.currentTarget;this.show(o,e,o.$_ptooltipShowDelay)},onMouseLeave:function(t){var e=t.currentTarget;this.hide(e,e.$_ptooltipHideDelay)},onFocus:function(t,e){var o=t.currentTarget;this.show(o,e,o.$_ptooltipShowDelay)},onBlur:function(t){var e=t.currentTarget;this.hide(e,e.$_ptooltipHideDelay)},onClick:function(t){var e=t.currentTarget;this.hide(e,e.$_ptooltipHideDelay)},onKeydown:function(t){"Escape"===t.code&&this.hide(t.currentTarget,t.currentTarget.$_ptooltipHideDelay)},tooltipActions:function(e,o){if(!e.$_ptooltipDisabled&&t.DomHandler.isExist(e)){var i=this.create(e,o);this.align(e),!e.unstyled&&t.DomHandler.fadeIn(i,250);var n=this;window.addEventListener("resize",(function o(){t.DomHandler.isTouchDevice()||n.hide(e),window.removeEventListener("resize",o)})),this.bindScrollListener(e),t.ZIndexUtils.set("tooltip",i,e.$_ptooltipZIndex)}},show:function(t,e,o){var i=this;void 0!==o?this.timer=setTimeout((function(){return i.tooltipActions(t,e)}),o):this.tooltipActions(t,e)},tooltipRemoval:function(t){this.remove(t),this.unbindScrollListener(t)},hide:function(t,e){var o=this;clearTimeout(this.timer),void 0!==e?setTimeout((function(){return o.tooltipRemoval(t)}),e):this.tooltipRemoval(t)},getTooltipElement:function(t){return document.getElementById(t.$_ptooltipId)},create:function(e,o){var i=t.DomHandler.createElement("div",{class:!e.unstyled&&this.cx("arrow"),"p-bind":this.ptm("arrow")}),n=t.DomHandler.createElement("div",{class:!e.unstyled&&this.cx("text"),"p-bind":this.ptm("text")});e.$_ptooltipEscape?n.innerHTML=e.$_ptooltipValue:(n.innerHTML="",n.appendChild(document.createTextNode(e.$_ptooltipValue)));var l=t.DomHandler.createElement("div",{id:e.$_ptooltipIdAttr,role:"tooltip",style:{display:"inline-block",width:e.$_ptooltipFitContent?"fit-content":void 0},class:[!e.unstyled&&this.cx("root"),e.$_ptooltipClass],"p-bind":this.ptm("root")},i,n);return document.body.appendChild(l),e.$_ptooltipId=l.id,this.$el=l,l},remove:function(e){if(e){var o=this.getTooltipElement(e);o&&o.parentElement&&(t.ZIndexUtils.clear(o),document.body.removeChild(o)),e.$_ptooltipId=null}},align:function(t){var e=t.$_ptooltipModifiers;e.top?(this.alignTop(t),this.isOutOfBounds(t)&&(this.alignBottom(t),this.isOutOfBounds(t)&&this.alignTop(t))):e.left?(this.alignLeft(t),this.isOutOfBounds(t)&&(this.alignRight(t),this.isOutOfBounds(t)&&(this.alignTop(t),this.isOutOfBounds(t)&&(this.alignBottom(t),this.isOutOfBounds(t)&&this.alignLeft(t))))):e.bottom?(this.alignBottom(t),this.isOutOfBounds(t)&&(this.alignTop(t),this.isOutOfBounds(t)&&this.alignBottom(t))):(this.alignRight(t),this.isOutOfBounds(t)&&(this.alignLeft(t),this.isOutOfBounds(t)&&(this.alignTop(t),this.isOutOfBounds(t)&&(this.alignBottom(t),this.isOutOfBounds(t)&&this.alignRight(t)))))},getHostOffset:function(e){var o=e.getBoundingClientRect();return{left:o.left+t.DomHandler.getWindowScrollLeft(),top:o.top+t.DomHandler.getWindowScrollTop()}},alignRight:function(e){this.preAlign(e,"right");var o=this.getTooltipElement(e),i=this.getHostOffset(e),n=i.left+t.DomHandler.getOuterWidth(e),l=i.top+(t.DomHandler.getOuterHeight(e)-t.DomHandler.getOuterHeight(o))/2;o.style.left=n+"px",o.style.top=l+"px"},alignLeft:function(e){this.preAlign(e,"left");var o=this.getTooltipElement(e),i=this.getHostOffset(e),n=i.left-t.DomHandler.getOuterWidth(o),l=i.top+(t.DomHandler.getOuterHeight(e)-t.DomHandler.getOuterHeight(o))/2;o.style.left=n+"px",o.style.top=l+"px"},alignTop:function(e){this.preAlign(e,"top");var o=this.getTooltipElement(e),i=this.getHostOffset(e),n=i.left+(t.DomHandler.getOuterWidth(e)-t.DomHandler.getOuterWidth(o))/2,l=i.top-t.DomHandler.getOuterHeight(o);o.style.left=n+"px",o.style.top=l+"px"},alignBottom:function(e){this.preAlign(e,"bottom");var o=this.getTooltipElement(e),i=this.getHostOffset(e),n=i.left+(t.DomHandler.getOuterWidth(e)-t.DomHandler.getOuterWidth(o))/2,l=i.top+t.DomHandler.getOuterHeight(e);o.style.left=n+"px",o.style.top=l+"px"},preAlign:function(e,o){var i=this.getTooltipElement(e);i.style.left="-999px",i.style.top="-999px",t.DomHandler.removeClass(i,"p-tooltip-".concat(i.$_ptooltipPosition)),t.DomHandler.addClass(i,"p-tooltip-".concat(o)),i.$_ptooltipPosition=o},isOutOfBounds:function(e){var o=this.getTooltipElement(e),i=o.getBoundingClientRect(),n=i.top,l=i.left,r=t.DomHandler.getOuterWidth(o),s=t.DomHandler.getOuterHeight(o),p=t.DomHandler.getViewport();return l+r>p.width||l<0||n<0||n+s>p.height},getTarget:function(e){return t.DomHandler.hasClass(e,"p-inputwrapper")?t.DomHandler.findSingle(e,"input"):e},getModifiers:function(t){return t.modifiers&&Object.keys(t.modifiers).length?t.modifiers:t.arg&&"object"===d(t.arg)?Object.entries(t.arg).reduce((function(t,e){var o,i,n=(i=2,u(o=e)||a(o,i)||s(o,i)||r()),l=n[0];return"event"!==l&&"position"!==l||(t[n[1]]=!0),t}),{}):{}}}})}(primevue.utils,primevue.basedirective,primevue.usestyle);

package/tree/BaseTree.vue

@@ -0,0 +1,211 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+}
+
+.p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-tree-wrapper {
+    overflow: auto;
+}
+
+.p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+}
+
+.p-treenode-content {
+    display: flex;
+    align-items: center;
+}
+
+.p-tree-filter {
+    width: 100%;
+}
+
+.p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+}
+
+.p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tree-flex-scrollable {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    flex-direction: column;
+}
+
+.p-tree-flex-scrollable .p-tree-wrapper {
+    flex: 1;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-tree p-component',
+        {
+            'p-tree-selectable': props.selectionMode != null,
+            'p-tree-loading': props.loading,
+            'p-tree-flex-scrollable': props.scrollHeight === 'flex'
+        }
+    ],
+    loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
+    loadingIcon: 'p-tree-loading-icon',
+    filterContainer: 'p-tree-filter-container',
+    input: 'p-tree-filter p-inputtext p-component',
+    searchIcon: 'p-tree-filter-icon',
+    wrapper: 'p-tree-wrapper',
+    container: 'p-tree-container',
+    node: ({ instance }) => ['p-treenode', { 'p-treenode-leaf': instance.leaf }],
+    content: ({ instance }) => [
+        'p-treenode-content',
+        instance.node.styleClass,
+        {
+            'p-treenode-selectable': instance.selectable,
+            'p-highlight': instance.checkboxMode ? instance.checked : instance.selected
+        }
+    ],
+    toggler: 'p-tree-toggler p-link',
+    togglerIcon: 'p-tree-toggler-icon',
+    checkboxContainer: 'p-checkbox p-component',
+    checkbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-indeterminate': instance.partialChecked
+        }
+    ],
+    checkboxIcon: 'p-checkbox-icon',
+    nodeIcon: ({ instance }) => ['p-treenode-icon', instance.node.icon],
+    label: 'p-treenode-label',
+    subgroup: 'p-treenode-children'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'tree', manual: true });
+
+export default {
+    name: 'BaseTree',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        metaKeySelection: {
+            type: Boolean,
+            default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: undefined
+        },
+        filter: {
+            type: Boolean,
+            default: false
+        },
+        filterBy: {
+            type: String,
+            default: 'label'
+        },
+        filterMode: {
+            type: String,
+            default: 'lenient'
+        },
+        filterPlaceholder: {
+            type: String,
+            default: null
+        },
+        filterLocale: {
+            type: String,
+            default: undefined
+        },
+        scrollHeight: {
+            type: String,
+            default: null
+        },
+        level: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/tree/Tree.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type TreePassThroughOptionType = TreePassThroughAttributes | ((options: TreePassThroughMethodOptions) => TreePassThroughAttributes) | null | undefined;
@@ -16,6 +17,7 @@ export declare type TreePassThroughOptionType = TreePassThroughAttributes | ((op
  * Custom passthrough(pt) option method.
  */
 export interface TreePassThroughMethodOptions {
+    instance: any;
     props: TreeProps;
     state: TreeState;
     context: TreeContext;
@@ -110,14 +112,6 @@ export interface TreePassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: TreePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the loading overlay's DOM element.
-     */
-    loadingOverlay?: TreePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the loading icon's DOM element.
-     */
-    loadingIcon?: TreePassThroughOptionType;
     /**
      * Uses to pass attributes to the filter container's DOM element.
      */
@@ -178,6 +172,19 @@ export interface TreePassThroughOptions {
      * Uses to pass attributes to the subgroup's DOM element.
      */
     subgroup?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreePassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -298,6 +305,11 @@ export interface TreeProps {
      * @type {TreePassThroughOptions}
      */
     pt?: TreePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
@@ -307,11 +319,21 @@ export interface TreeSlots {
     /**
      * Custom loading icon template.
      */
-    loadingicon(): VNode[];
+    loadingicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom search icon template.
      */
-    searchicon(): VNode[];
+    searchicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom toggler icon template.
      */

package/tree/Tree.vue

@@ -1,21 +1,21 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree">
         <template v-if="loading">
-            <div class="p-tree-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
-                <slot name="loadingicon">
-                    <i v-if="loadingIcon" :class="['p-tree-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
-                    <SpinnerIcon v-else spin class="p-tree-loading-icon" v-bind="ptm('loadingIcon')" />
+            <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
+                <slot name="loadingicon" :class="cx('loadingIcon')">
+                    <i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                    <SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" />
                 </slot>
             </div>
         </template>
-        <div v-if="filter" class="p-tree-filter-container" v-bind="ptm('filterContainer')">
-            <input v-model="filterValue" type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
-            <slot name="searchicon">
-                <SearchIcon class="p-tree-filter-icon" v-bind="ptm('searchIcon')" />
+        <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
+            <input v-model="filterValue" type="text" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
+            <slot name="searchicon" :class="cx('searchIcon')">
+                <SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" />
             </slot>
         </div>
-        <div class="p-tree-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
-            <ul class="p-tree-container" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')">
+        <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
+            <ul :class="cx('container')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')">
                 <TreeNode
                     v-for="(node, index) of valueToRender"
                     :key="node.key"
@@ -37,82 +37,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import SearchIcon from 'primevue/icons/search';
 import SpinnerIcon from 'primevue/icons/spinner';
 import { ObjectUtils } from 'primevue/utils';
+import BaseTree from './BaseTree.vue';
 import TreeNode from './TreeNode.vue';
 
 export default {
     name: 'Tree',
-    extends: BaseComponent,
+    extends: BaseTree,
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
-    props: {
-        value: {
-            type: null,
-            default: null
-        },
-        expandedKeys: {
-            type: null,
-            default: null
-        },
-        selectionKeys: {
-            type: null,
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: null
-        },
-        metaKeySelection: {
-            type: Boolean,
-            default: true
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        loadingIcon: {
-            type: String,
-            default: undefined
-        },
-        filter: {
-            type: Boolean,
-            default: false
-        },
-        filterBy: {
-            type: String,
-            default: 'label'
-        },
-        filterMode: {
-            type: String,
-            default: 'lenient'
-        },
-        filterPlaceholder: {
-            type: String,
-            default: null
-        },
-        filterLocale: {
-            type: String,
-            default: undefined
-        },
-        scrollHeight: {
-            type: String,
-            default: null
-        },
-        level: {
-            type: Number,
-            default: 0
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     data() {
         return {
             d_expandedKeys: this.expandedKeys || {},
@@ -275,16 +209,6 @@ 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'
-                }
-            ];
-        },
         filteredValue() {
             let filteredNodes = [];
             const searchFields = this.filterBy.split(',');
@@ -317,87 +241,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-tree-container {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    overflow: auto;
-}
-
-.p-treenode-children {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-}
-
-.p-tree-wrapper {
-    overflow: auto;
-}
-
-.p-treenode-selectable {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-tree-toggler {
-    cursor: pointer;
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-}
-
-.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
-    visibility: hidden;
-}
-
-.p-treenode-content {
-    display: flex;
-    align-items: center;
-}
-
-.p-tree-filter {
-    width: 100%;
-}
-
-.p-tree-filter-container {
-    position: relative;
-    display: block;
-    width: 100%;
-}
-
-.p-tree-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -0.5rem;
-}
-
-.p-tree-loading {
-    position: relative;
-    min-height: 4rem;
-}
-
-.p-tree .p-tree-loading-overlay {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-tree-flex-scrollable {
-    display: flex;
-    flex: 1;
-    height: 100%;
-    flex-direction: column;
-}
-
-.p-tree-flex-scrollable .p-tree-wrapper {
-    flex: 1;
-}
-</style>