primevue 3.16.2 → 3.18.0

package/treeselect/treeselect.js

@@ -15,22 +15,26 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
         props: {
             modelValue: null,
             options: Array,
-    		scrollHeight: {
-    			type: String,
-    			default: '400px'
-    		},
-    		placeholder: String,
-    		disabled: Boolean,
-            tabindex: String,
-            selectionMode: {
+            scrollHeight: {
                 type: String,
-                default: 'single'
+                default: '400px'
             },
-            panelClass: {
+            placeholder: {
                 type: String,
                 default: null
             },
-            panelProps: null,
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            tabindex: {
+                type: Number,
+                default: null
+            },
+            selectionMode: {
+                type: String,
+                default: 'single'
+            },
             appendTo: {
                 type: String,
                 default: 'body'
@@ -47,25 +51,53 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                 type: Boolean,
                 default: true
             },
-            inputId: String,
-            inputClass: String,
-            inputStyle: null,
-            inputProps: null,
+            inputId: {
+                type: String,
+                default: null
+            },
+            inputClass: {
+                type: String,
+                default: null
+            },
+            inputStyle: {
+                type: null,
+                default: null
+            },
+            inputProps: {
+                type: null,
+                default: null
+            },
+            panelClass: {
+                type: String,
+                default: null
+            },
+            panelProps: {
+                type: null,
+                default: null
+            },
             'aria-labelledby': {
                 type: String,
-    			default: null
+                default: null
             },
             'aria-label': {
                 type: String,
                 default: null
             }
         },
+        data() {
+            return {
+                focused: false,
+                overlayVisible: false,
+                expandedKeys: {}
+            };
+        },
         watch: {
             modelValue: {
-                handler: function() {
+                handler: function () {
                     if (!this.selfChange) {
                         this.updateTreeState();
                     }
+
                     this.selfChange = false;
                 },
                 immediate: true
@@ -74,13 +106,6 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                 this.updateTreeState();
             }
         },
-        data() {
-            return {
-                focused: false,
-                overlayVisible: false,
-                expandedKeys: {}
-            };
-        },
         outsideClickListener: null,
         resizeListener: null,
         scrollHandler: null,
@@ -123,10 +148,8 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             },
             onClick(event) {
                 if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !utils.DomHandler.hasClass(event.target, 'p-treeselect-close')) {
-                    if (this.overlayVisible)
-                        this.hide();
-                    else
-                        this.show();
+                    if (this.overlayVisible) this.hide();
+                    else this.show();
 
                     this.$refs.focusInput.focus();
                 }
@@ -150,33 +173,30 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                 this.expandedKeys = keys;
             },
             onKeyDown(event) {
-                switch(event.code) {
+                switch (event.code) {
                     case 'Down':
                     case 'ArrowDown':
                         if (this.overlayVisible) {
                             if (utils.DomHandler.findSingle(this.overlay, '.p-highlight')) {
                                 utils.DomHandler.findSingle(this.overlay, '.p-highlight').focus();
-                            }
-                            else utils.DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
-                        }
-                        else {
+                            } else utils.DomHandler.findSingle(this.overlay, '.p-treenode').children[0].focus();
+                        } else {
                             this.show();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     case 'Space':
                     case 'Enter':
                         if (this.overlayVisible) {
                             this.hide();
-                        }
-                        else {
+                        } else {
                             this.show();
                         }
 
                         event.preventDefault();
-                    break;
+                        break;
 
                     case 'Escape':
                     case 'Tab':
@@ -184,7 +204,8 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                             this.hide();
                             event.preventDefault();
                         }
-                    break;
+
+                        break;
                 }
             },
             onOverlayEnter(el) {
@@ -209,8 +230,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             alignOverlay() {
                 if (this.appendTo === 'self') {
                     utils.DomHandler.relativePosition(this.overlay, this.$el);
-                }
-                else {
+                } else {
                     this.overlay.style.minWidth = utils.DomHandler.getOuterWidth(this.$el) + 'px';
                     utils.DomHandler.absolutePosition(this.overlay, this.$el);
                 }
@@ -222,6 +242,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                             this.hide();
                         }
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -254,6 +275,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                             this.hide();
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -287,8 +309,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                             this.findSelectedNodes(childNode, keys, selectedNodes);
                         }
                     }
-                }
-                else {
+                } else {
                     for (let childNode of this.options) {
                         this.findSelectedNodes(childNode, keys, selectedNodes);
                     }
@@ -298,8 +319,10 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                 return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
             },
             updateTreeState() {
-                let keys = {...this.modelValue};
+                let keys = { ...this.modelValue };
+
                 this.expandedKeys = {};
+
                 if (keys && this.options) {
                     this.updateTreeBranchState(null, null, keys);
                 }
@@ -317,8 +340,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                             this.updateTreeBranchState(childNode, path, keys);
                         }
                     }
-                }
-                else {
+                } else {
                     for (let childNode of this.options) {
                         this.updateTreeBranchState(childNode, [], keys);
                     }
@@ -334,6 +356,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             scrollValueInView() {
                 if (this.overlay) {
                     let selectedItem = utils.DomHandler.findSingle(this.overlay, 'li.p-highlight');
+
                     if (selectedItem) {
                         selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
                     }
@@ -363,15 +386,21 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                 ];
             },
             panelStyleClass() {
-                return ['p-treeselect-panel p-component', this.panelClass, {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-treeselect-panel p-component',
+                    this.panelClass,
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             selectedNodes() {
                 let selectedNodes = [];
+
                 if (this.modelValue && this.options) {
-                    let keys = {...this.modelValue};
+                    let keys = { ...this.modelValue };
+
                     this.findSelectedNodes(null, keys, selectedNodes);
                 }
 
@@ -379,7 +408,8 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             },
             label() {
                 let value = this.selectedNodes;
-                return value.length ? value.map(node => node.label).join(', '): this.placeholder;
+
+                return value.length ? value.map((node) => node.label).join(', ') : this.placeholder;
             },
             emptyMessageText() {
                 return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
@@ -395,11 +425,11 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
             }
         },
         components: {
-            'TSTree': Tree__default["default"],
-            'Portal': Portal__default["default"]
+            TSTree: Tree__default["default"],
+            Portal: Portal__default["default"]
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
@@ -426,9 +456,9 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
         vue.createElementVNode("div", _hoisted_1, [
           vue.createElementVNode("input", vue.mergeProps({
             ref: "focusInput",
+            id: $props.inputId,
             type: "text",
             role: "combobox",
-            id: $props.inputId,
             class: $props.inputClass,
             style: $props.inputStyle,
             readonly: "",
@@ -460,8 +490,8 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.selectedNodes, (node) => {
                         return (vue.openBlock(), vue.createElementBlock("div", {
-                          class: "p-treeselect-token",
-                          key: node.key
+                          key: node.key,
+                          class: "p-treeselect-token"
                         }, [
                           vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(node.label), 1)
                         ]))
@@ -508,7 +538,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
                       }),
                       vue.createElementVNode("div", {
                         class: "p-treeselect-items-wrapper",
-                        style: vue.normalizeStyle({'max-height': $props.scrollHeight})
+                        style: vue.normalizeStyle({ 'max-height': $props.scrollHeight })
                       }, [
                         vue.createVNode(_component_TSTree, {
                           id: $options.listId,
@@ -575,7 +605,7 @@ this.primevue.treeselect = (function (utils, OverlayEventBus, Tree, Ripple, Port
       }
     }
 
-    var css_248z = "\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label  {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+    var css_248z = "\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
     styleInject(css_248z);
 
     script.render = render;

package/treeselect/treeselect.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),r=o(l),d=o(i),c=o(n),p={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:String,disabled:Boolean,tabindex:String,selectionMode:{type:String,default:"single"},panelClass:{type:String,default:null},panelProps:null,appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:String,inputClass:String,inputStyle:null,inputProps:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(t){this.disabled||this.overlay&&this.overlay.contains(t.target)||e.DomHandler.hasClass(t.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(t){switch(t.code){case"Down":case"ArrowDown":this.overlayVisible?e.DomHandler.findSingle(this.overlay,".p-highlight")?e.DomHandler.findSingle(this.overlay,".p-highlight").focus():e.DomHandler.findSingle(this.overlay,".p-treenode").children[0].focus():this.show(),t.preventDefault();break;case"Space":case"Enter":this.overlayVisible?this.hide():this.show(),t.preventDefault();break;case"Escape":case"Tab":this.overlayVisible&&(this.hide(),t.preventDefault())}},onOverlayEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=e.DomHandler.getOuterWidth(this.$el)+"px",e.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let t=e.DomHandler.findSingle(this.overlay,"li.p-highlight");t&&t.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>e.UniqueComponentId()+"_list"},components:{TSTree:r.default,Portal:c.default},directives:{ripple:d.default}};const h={class:"p-hidden-accessible"},u=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],y={class:"p-treeselect-label-container"},m={class:"p-treeselect-token-label"},f=["aria-expanded"],b=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label  {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),p.render=function(e,t,l,i,n,o){const a=s.resolveComponent("TSTree"),r=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[6]||(t[6]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",h,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",type:"text",role:"combobox",id:l.inputId,class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,u)]),s.createElementVNode("div",y,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{class:"p-treeselect-token",key:e.key},[s.createElementVNode("span",m,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[b]))],8,f),s.createVNode(r,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(a,{id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},p}(primevue.utils,primevue.overlayeventbus,primevue.tree,primevue.ripple,primevue.portal,Vue);
+this.primevue=this.primevue||{},this.primevue.treeselect=function(e,t,l,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),r=o(l),d=o(i),c=o(n),p={name:"TreeSelect",emits:["update:modelValue","before-show","before-hide","change","show","hide","node-select","node-unselect","node-expand","node-collapse","focus","blur"],props:{modelValue:null,options:Array,scrollHeight:{type:String,default:"400px"},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:null},selectionMode:{type:String,default:"single"},appendTo:{type:String,default:"body"},emptyMessage:{type:String,default:null},display:{type:String,default:"comma"},metaKeySelection:{type:Boolean,default:!0},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},panelClass:{type:String,default:null},panelProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1,overlayVisible:!1,expandedKeys:{}}),watch:{modelValue:{handler:function(){this.selfChange||this.updateTreeState(),this.selfChange=!1},immediate:!0},options(){this.updateTreeState()}},outsideClickListener:null,resizeListener:null,scrollHandler:null,overlay:null,selfChange:!1,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.overlay&&(e.ZIndexUtils.clear(this.overlay),this.overlay=null)},mounted(){this.updateTreeState()},methods:{show(){this.$emit("before-show"),this.overlayVisible=!0},hide(){this.$emit("before-hide"),this.overlayVisible=!1,this.$refs.focusInput.focus()},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)},onClick(t){this.disabled||this.overlay&&this.overlay.contains(t.target)||e.DomHandler.hasClass(t.target,"p-treeselect-close")||(this.overlayVisible?this.hide():this.show(),this.$refs.focusInput.focus())},onSelectionChange(e){this.selfChange=!0,this.$emit("update:modelValue",e),this.$emit("change",e)},onNodeSelect(e){this.$emit("node-select",e),"single"===this.selectionMode&&this.hide()},onNodeUnselect(e){this.$emit("node-unselect",e)},onNodeToggle(e){this.expandedKeys=e},onKeyDown(t){switch(t.code){case"Down":case"ArrowDown":this.overlayVisible?e.DomHandler.findSingle(this.overlay,".p-highlight")?e.DomHandler.findSingle(this.overlay,".p-highlight").focus():e.DomHandler.findSingle(this.overlay,".p-treenode").children[0].focus():this.show(),t.preventDefault();break;case"Space":case"Enter":this.overlayVisible?this.hide():this.show(),t.preventDefault();break;case"Escape":case"Tab":this.overlayVisible&&(this.hide(),t.preventDefault())}},onOverlayEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.scrollValueInView(),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.$emit("hide"),this.overlay=null},onOverlayAfterLeave(t){e.ZIndexUtils.clear(t)},alignOverlay(){"self"===this.appendTo?e.DomHandler.relativePosition(this.overlay,this.$el):(this.overlay.style.minWidth=e.DomHandler.getOuterWidth(this.$el)+"px",e.DomHandler.absolutePosition(this.overlay,this.$el))},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new e.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!e.DomHandler.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isOutsideClicked(e){return!(this.$el.isSameNode(e.target)||this.$el.contains(e.target)||this.overlay&&this.overlay.contains(e.target))},overlayRef(e){this.overlay=e},onOverlayClick(e){a.default.emit("overlay-click",{originalEvent:e,target:this.$el})},findSelectedNodes(e,t,l){if(e){if(this.isSelected(e,t)&&(l.push(e),delete t[e.key]),Object.keys(t).length&&e.children)for(let i of e.children)this.findSelectedNodes(i,t,l)}else for(let e of this.options)this.findSelectedNodes(e,t,l)},isSelected(e,t){return"checkbox"===this.selectionMode?t[e.key]&&t[e.key].checked:t[e.key]},updateTreeState(){let e={...this.modelValue};this.expandedKeys={},e&&this.options&&this.updateTreeBranchState(null,null,e)},updateTreeBranchState(e,t,l){if(e){if(this.isSelected(e,l)&&(this.expandPath(t),delete l[e.key]),Object.keys(l).length&&e.children)for(let i of e.children)t.push(e.key),this.updateTreeBranchState(i,t,l)}else for(let e of this.options)this.updateTreeBranchState(e,[],l)},expandPath(e){if(e.length>0)for(let t of e)this.expandedKeys[t]=!0},scrollValueInView(){if(this.overlay){let t=e.DomHandler.findSingle(this.overlay,"li.p-highlight");t&&t.scrollIntoView({block:"nearest",inline:"start"})}}},computed:{containerClass(){return["p-treeselect p-component p-inputwrapper",{"p-treeselect-chip":"chip"===this.display,"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":!this.emptyValue,"p-inputwrapper-focus":this.focused||this.overlayVisible}]},labelClass(){return["p-treeselect-label",{"p-placeholder":this.label===this.placeholder,"p-treeselect-label-empty":!this.placeholder&&this.emptyValue}]},panelStyleClass(){return["p-treeselect-panel p-component",this.panelClass,{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},selectedNodes(){let e=[];if(this.modelValue&&this.options){let t={...this.modelValue};this.findSelectedNodes(null,t,e)}return e},label(){let e=this.selectedNodes;return e.length?e.map((e=>e.label)).join(", "):this.placeholder},emptyMessageText(){return this.emptyMessage||this.$primevue.config.locale.emptyMessage},emptyValue(){return!this.modelValue||0===Object.keys(this.modelValue).length},emptyOptions(){return!this.options||0===this.options.length},listId:()=>e.UniqueComponentId()+"_list"},components:{TSTree:r.default,Portal:c.default},directives:{ripple:d.default}};const h={class:"p-hidden-accessible"},u=["id","disabled","tabindex","aria-labelledby","aria-label","aria-expanded","aria-controls"],y={class:"p-treeselect-label-container"},m={class:"p-treeselect-token-label"},f=["aria-expanded"],b=s.createElementVNode("span",{class:"p-treeselect-trigger-icon pi pi-chevron-down"},null,-1),v={key:0,class:"p-treeselect-empty-message"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===l&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-treeselect {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    cursor: pointer;\n    position: relative;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n.p-treeselect-trigger {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-treeselect-label-container {\n    overflow: hidden;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    cursor: pointer;\n}\n.p-treeselect-label {\n    display: block;\n    white-space: nowrap;\n    cursor: pointer;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.p-treeselect-label-empty {\n    overflow: hidden;\n    visibility: hidden;\n}\n.p-treeselect-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-treeselect .p-treeselect-panel {\n    min-width: 100%;\n}\n.p-treeselect-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-treeselect-items-wrapper {\n    overflow: auto;\n}\n.p-fluid .p-treeselect {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),p.render=function(e,t,l,i,n,o){const a=s.resolveComponent("TSTree"),r=s.resolveComponent("Portal");return s.openBlock(),s.createElementBlock("div",{ref:"container",class:s.normalizeClass(o.containerClass),onClick:t[6]||(t[6]=(...e)=>o.onClick&&o.onClick(...e))},[s.createElementVNode("div",h,[s.createElementVNode("input",s.mergeProps({ref:"focusInput",id:l.inputId,type:"text",role:"combobox",class:l.inputClass,style:l.inputStyle,readonly:"",disabled:l.disabled,tabindex:l.disabled?-1:l.tabindex,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-haspopup":"tree","aria-expanded":n.overlayVisible,"aria-controls":o.listId,onFocus:t[0]||(t[0]=e=>o.onFocus(e)),onBlur:t[1]||(t[1]=e=>o.onBlur(e)),onKeydown:t[2]||(t[2]=e=>o.onKeyDown(e))},l.inputProps),null,16,u)]),s.createElementVNode("div",y,[s.createElementVNode("div",{class:s.normalizeClass(o.labelClass)},[s.renderSlot(e.$slots,"value",{value:o.selectedNodes,placeholder:l.placeholder},(()=>["comma"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(o.label||"empty"),1)],64)):"chip"===l.display?(s.openBlock(),s.createElementBlock(s.Fragment,{key:1},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.selectedNodes,(e=>(s.openBlock(),s.createElementBlock("div",{key:e.key,class:"p-treeselect-token"},[s.createElementVNode("span",m,s.toDisplayString(e.label),1)])))),128)),o.emptyValue?(s.openBlock(),s.createElementBlock(s.Fragment,{key:0},[s.createTextVNode(s.toDisplayString(l.placeholder||"empty"),1)],64)):s.createCommentVNode("",!0)],64)):s.createCommentVNode("",!0)]))],2)]),s.createElementVNode("div",{class:"p-treeselect-trigger",role:"button","aria-haspopup":"tree","aria-expanded":n.overlayVisible},[s.renderSlot(e.$slots,"indicator",{},(()=>[b]))],8,f),s.createVNode(r,{appendTo:l.appendTo},{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-connected-overlay",onEnter:o.onOverlayEnter,onLeave:o.onOverlayLeave,onAfterLeave:o.onOverlayAfterLeave},{default:s.withCtx((()=>[n.overlayVisible?(s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.overlayRef,onClick:t[5]||(t[5]=(...e)=>o.onOverlayClick&&o.onOverlayClick(...e)),class:o.panelStyleClass},l.panelProps),[s.renderSlot(e.$slots,"header",{value:l.modelValue,options:l.options}),s.createElementVNode("div",{class:"p-treeselect-items-wrapper",style:s.normalizeStyle({"max-height":l.scrollHeight})},[s.createVNode(a,{id:o.listId,value:l.options,selectionMode:l.selectionMode,"onUpdate:selectionKeys":o.onSelectionChange,selectionKeys:l.modelValue,expandedKeys:n.expandedKeys,"onUpdate:expandedKeys":o.onNodeToggle,metaKeySelection:l.metaKeySelection,onNodeExpand:t[3]||(t[3]=t=>e.$emit("node-expand",t)),onNodeCollapse:t[4]||(t[4]=t=>e.$emit("node-collapse",t)),onNodeSelect:o.onNodeSelect,onNodeUnselect:o.onNodeUnselect,level:0},null,8,["id","value","selectionMode","onUpdate:selectionKeys","selectionKeys","expandedKeys","onUpdate:expandedKeys","metaKeySelection","onNodeSelect","onNodeUnselect"]),o.emptyOptions?(s.openBlock(),s.createElementBlock("div",v,[s.renderSlot(e.$slots,"empty",{},(()=>[s.createTextVNode(s.toDisplayString(o.emptyMessageText),1)]))])):s.createCommentVNode("",!0)],4),s.renderSlot(e.$slots,"footer",{value:l.modelValue,options:l.options})],16)):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo"])],2)},p}(primevue.utils,primevue.overlayeventbus,primevue.tree,primevue.ripple,primevue.portal,Vue);

package/treetable/BodyCell.vue

@@ -1,9 +1,9 @@
 <template>
     <td :style="containerStyle" :class="containerClass">
-        <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp('expander')" :style="togglerStyle" tabindex="-1" v-ripple>
+        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1">
             <i :class="togglerIcon"></i>
         </button>
-        <div :class="['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': checkboxFocused}]" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp('expander')" role="checkbox" :aria-checked="checked">
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" role="checkbox" :aria-checked="checked">
             <div class="p-hidden-accessible">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
             </div>
@@ -11,18 +11,20 @@
                 <span :class="checkboxIcon"></span>
             </div>
         </div>
-        <component :is="column.children.body" :node="node" :column="column" v-if="column.children && column.children.body" />
-        <template v-else><span>{{resolveFieldData(node.data, columnProp('field'))}}</span></template>
+        <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
+        <template v-else
+            ><span>{{ resolveFieldData(node.data, columnProp('field')) }}</span></template
+        >
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
-import Ripple from 'primevue/ripple'
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'BodyCell',
-    emits: ['node-toggle','checkbox-toggle'],
+    emits: ['node-toggle', 'checkbox-toggle'],
     props: {
         node: {
             type: Object,
@@ -65,7 +67,7 @@ export default {
         return {
             styleObject: {},
             checkboxFocused: false
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -87,20 +89,24 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -120,15 +126,19 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('bodyClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('bodyClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         },
         togglerStyle() {
             return {
@@ -137,20 +147,20 @@ export default {
             };
         },
         togglerIcon() {
-            return ['p-treetable-toggler-icon pi', {'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded}];
+            return ['p-treetable-toggler-icon pi', { 'pi-chevron-right': !this.expanded, 'pi-chevron-down': this.expanded }];
         },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
         },
         checkboxClass() {
-            return ['p-checkbox-box', {'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked}];
+            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
         },
         checkboxIcon() {
-            return ['p-checkbox-icon', {'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked}];
+            return ['p-checkbox-icon', { 'pi pi-check': this.checked, 'pi pi-minus': this.partialChecked }];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/treetable/FooterCell.vue

@@ -1,12 +1,12 @@
 <template>
     <td :style="containerStyle" :class="containerClass">
-        <component :is="column.children.footer" :column="column" v-if="column.children && column.children.footer" />
-        {{columnProp('footer')}}
+        <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
+        {{ columnProp('footer') }}
     </td>
 </template>
 
 <script>
-import {DomHandler,ObjectUtils} from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'FooterCell',
@@ -19,7 +19,7 @@ export default {
     data() {
         return {
             styleObject: {}
-        }
+        };
     },
     mounted() {
         if (this.columnProp('frozen')) {
@@ -38,20 +38,24 @@ export default {
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
+
                 if (align === 'right') {
                     let right = 0;
                     let next = this.$el.nextElementSibling;
+
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
+
                     this.styleObject.right = right + 'px';
-                }
-                else {
+                } else {
                     let left = 0;
                     let prev = this.$el.previousElementSibling;
+
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
+
                     this.styleObject.left = left + 'px';
                 }
             }
@@ -59,16 +63,20 @@ export default {
     },
     computed: {
         containerClass() {
-            return [this.columnProp('footerClass'), this.columnProp('class'), {
-                'p-frozen-column': this.columnProp('frozen')
-            }];
+            return [
+                this.columnProp('footerClass'),
+                this.columnProp('class'),
+                {
+                    'p-frozen-column': this.columnProp('frozen')
+                }
+            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');
             let columnStyle = this.columnProp('style');
 
-            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
         }
     }
-}
+};
 </script>