primevue 3.51.0 → 3.52.0

package/rating/rating.esm.js

@@ -64,13 +64,13 @@ var script = {
     };
   },
   watch: {
-    '$attrs.name': {
-      immediate: true,
-      handler: function handler(newValue) {
-        this.name = newValue || UniqueComponentId();
-      }
+    '$attrs.name': function $attrsName(newValue) {
+      this.name = newValue || UniqueComponentId();
     }
   },
+  mounted: function mounted() {
+    this.name = this.name || UniqueComponentId();
+  },
   methods: {
     getPTOptions: function getPTOptions(key, value) {
       return this.ptm(key, {

package/rating/rating.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/ban";import n from"primevue/icons/star";import t from"primevue/icons/starfill";import{UniqueComponentId as o,DomHandler as a}from"primevue/utils";import c from"primevue/basecomponent";import i from"primevue/rating/style";import{openBlock as l,createElementBlock as s,mergeProps as r,createElementVNode as u,renderSlot as d,normalizeClass as p,createBlock as f,resolveDynamicComponent as m,createCommentVNode as h,Fragment as I,renderList as b}from"vue";var v={name:"Rating",extends:{name:"BaseRating",extends:c,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},style:i,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":{immediate:!0,handler:function(e){this.name=e||o()}}},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=a.getFirstFocusableElement(e.currentTarget);t&&a.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:t,StarIcon:n,BanIcon:e}},y=["data-p-focused"],g=["name","checked","disabled","readonly","aria-label"],x=["onClick","data-p-active","data-p-focused"],O=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];v.render=function(e,n,t,o,a,c){return l(),s("div",r({class:e.cx("root")},e.ptmi("root")),[e.cancel?(l(),s("div",r({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[u("span",r({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",r({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,g)],16),d(e.$slots,"cancelicon",{class:p(e.cx("cancelIcon"))},(function(){return[(l(),f(m(e.cancelIcon?"span":"BanIcon"),r({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,y)):h("",!0),(l(!0),s(I,null,b(e.stars,(function(t){return l(),s("div",r({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[u("span",r({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[u("input",r({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,O)],16),t<=e.modelValue?d(e.$slots,"onicon",{key:0,value:t,class:p(e.cx("onIcon"))},(function(){return[(l(),f(m(e.onIcon?"span":"StarFillIcon"),r({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):d(e.$slots,"officon",{key:1,value:t,class:p(e.cx("offIcon"))},(function(){return[(l(),f(m(e.offIcon?"span":"StarIcon"),r({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,x)})),128))],16)};export{v as default};
+import e from"primevue/icons/ban";import n from"primevue/icons/star";import t from"primevue/icons/starfill";import{UniqueComponentId as o,DomHandler as a}from"primevue/utils";import c from"primevue/basecomponent";import i from"primevue/rating/style";import{openBlock as l,createElementBlock as s,mergeProps as u,createElementVNode as r,renderSlot as d,normalizeClass as p,createBlock as f,resolveDynamicComponent as m,createCommentVNode as h,Fragment as I,renderList as b}from"vue";var v={name:"Rating",extends:{name:"BaseRating",extends:c,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},style:i,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":function(e){this.name=e||o()}},mounted:function(){this.name=this.name||o()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=a.getFirstFocusableElement(e.currentTarget);t&&a.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:t,StarIcon:n,BanIcon:e}},y=["data-p-focused"],g=["name","checked","disabled","readonly","aria-label"],x=["onClick","data-p-active","data-p-focused"],O=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];v.render=function(e,n,t,o,a,c){return l(),s("div",u({class:e.cx("root")},e.ptmi("root")),[e.cancel?(l(),s("div",u({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[r("span",u({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[r("input",u({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,g)],16),d(e.$slots,"cancelicon",{class:p(e.cx("cancelIcon"))},(function(){return[(l(),f(m(e.cancelIcon?"span":"BanIcon"),u({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,y)):h("",!0),(l(!0),s(I,null,b(e.stars,(function(t){return l(),s("div",u({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[r("span",u({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[r("input",u({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,O)],16),t<=e.modelValue?d(e.$slots,"onicon",{key:0,value:t,class:p(e.cx("onIcon"))},(function(){return[(l(),f(m(e.onIcon?"span":"StarFillIcon"),u({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):d(e.$slots,"officon",{key:1,value:t,class:p(e.cx("offIcon"))},(function(){return[(l(),f(m(e.offIcon?"span":"StarIcon"),u({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,x)})),128))],16)};export{v as default};

package/rating/rating.js

@@ -68,13 +68,13 @@ this.primevue.rating = (function (BanIcon, StarIcon, StarFillIcon, utils, BaseCo
         };
       },
       watch: {
-        '$attrs.name': {
-          immediate: true,
-          handler: function handler(newValue) {
-            this.name = newValue || utils.UniqueComponentId();
-          }
+        '$attrs.name': function $attrsName(newValue) {
+          this.name = newValue || utils.UniqueComponentId();
         }
       },
+      mounted: function mounted() {
+        this.name = this.name || utils.UniqueComponentId();
+      },
       methods: {
         getPTOptions: function getPTOptions(key, value) {
           return this.ptm(key, {

package/rating/rating.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.rating=function(e,n,t,o,a,c,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e),s=i(n),u=i(t),d={name:"Rating",extends:{name:"BaseRating",extends:i(a).default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},style:i(c).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":{immediate:!0,handler:function(e){this.name=e||o.UniqueComponentId()}}},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},p=["data-p-focused"],m=["name","checked","disabled","readonly","aria-label"],f=["onClick","data-p-active","data-p-focused"],h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];return d.render=function(e,n,t,o,a,c){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:e.cx("root")},e.ptmi("root")),[e.cancel?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,m)],16),l.renderSlot(e.$slots,"cancelicon",{class:l.normalizeClass(e.cx("cancelIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),l.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,p)):l.createCommentVNode("",!0),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.stars,(function(t){return l.openBlock(),l.createElementBlock("div",l.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,h)],16),t<=e.modelValue?l.renderSlot(e.$slots,"onicon",{key:0,value:t,class:l.normalizeClass(e.cx("onIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),l.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"officon",{key:1,value:t,class:l.normalizeClass(e.cx("offIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),l.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,f)})),128))],16)},d}(primevue.icons.ban,primevue.icons.star,primevue.icons.starfill,primevue.utils,primevue.basecomponent,primevue.rating.style,Vue);
+this.primevue=this.primevue||{},this.primevue.rating=function(e,n,t,o,a,c,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e),s=i(n),u=i(t),d={name:"Rating",extends:{name:"BaseRating",extends:i(a).default,props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:void 0},offIcon:{type:String,default:void 0},cancelIcon:{type:String,default:void 0}},style:i(c).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:modelValue","change","focus","blur"],data:function(){return{name:this.$attrs.name,focusedOptionIndex:-1,isFocusVisibleItem:!0}},watch:{"$attrs.name":function(e){this.name=e||o.UniqueComponentId()}},mounted:function(){this.name=this.name||o.UniqueComponentId()},methods:{getPTOptions:function(e,n){return this.ptm(e,{context:{active:n<=this.modelValue,focused:n===this.focusedOptionIndex}})},onOptionClick:function(e,n){if(!this.readonly&&!this.disabled){this.onOptionSelect(e,n),this.isFocusVisibleItem=!1;var t=o.DomHandler.getFirstFocusableElement(e.currentTarget);t&&o.DomHandler.focus(t)}},onFocus:function(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur:function(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange:function(e,n){this.onOptionSelect(e,n),this.isFocusVisibleItem=!0},onOptionSelect:function(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel:function(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel:function(){return this.$primevue.config.locale.clear},starAriaLabel:function(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},components:{StarFillIcon:u.default,StarIcon:s.default,BanIcon:r.default}},p=["data-p-focused"],m=["name","checked","disabled","readonly","aria-label"],f=["onClick","data-p-active","data-p-focused"],h=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];return d.render=function(e,n,t,o,a,c){return l.openBlock(),l.createElementBlock("div",l.mergeProps({class:e.cx("root")},e.ptmi("root")),[e.cancel?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("cancelItem"),onClick:n[3]||(n[3]=function(e){return c.onOptionClick(e,0)})},c.getPTOptions("cancelItem",0),{"data-p-focused":0===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenCancelInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:"0",name:a.name,checked:0===e.modelValue,disabled:e.disabled,readonly:e.readonly,"aria-label":c.cancelAriaLabel(),onFocus:n[0]||(n[0]=function(e){return c.onFocus(e,0)}),onBlur:n[1]||(n[1]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:n[2]||(n[2]=function(e){return c.onChange(e,0)})},e.ptm("hiddenCancelInput")),null,16,m)],16),l.renderSlot(e.$slots,"cancelicon",{class:l.normalizeClass(e.cx("cancelIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.cancelIcon?"span":"BanIcon"),l.mergeProps({class:[e.cx("cancelIcon"),e.cancelIcon]},e.ptm("cancelIcon")),null,16,["class"]))]}))],16,p)):l.createCommentVNode("",!0),(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.stars,(function(t){return l.openBlock(),l.createElementBlock("div",l.mergeProps({key:t,class:e.cx("item",{value:t}),onClick:function(e){return c.onOptionClick(e,t)}},c.getPTOptions("item",t),{"data-p-active":t<=e.modelValue,"data-p-focused":t===a.focusedOptionIndex}),[l.createElementVNode("span",l.mergeProps({class:"p-hidden-accessible"},e.ptm("hiddenItemInputWrapper"),{"data-p-hidden-accessible":!0}),[l.createElementVNode("input",l.mergeProps({type:"radio",value:t,name:a.name,checked:e.modelValue===t,disabled:e.disabled,readonly:e.readonly,"aria-label":c.starAriaLabel(t),onFocus:function(e){return c.onFocus(e,t)},onBlur:n[4]||(n[4]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)}),onChange:function(e){return c.onChange(e,t)}},e.ptm("hiddenItemInput")),null,16,h)],16),t<=e.modelValue?l.renderSlot(e.$slots,"onicon",{key:0,value:t,class:l.normalizeClass(e.cx("onIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.onIcon?"span":"StarFillIcon"),l.mergeProps({class:[e.cx("onIcon"),e.onIcon]},e.ptm("onIcon")),null,16,["class"]))]})):l.renderSlot(e.$slots,"officon",{key:1,value:t,class:l.normalizeClass(e.cx("offIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.offIcon?"span":"StarIcon"),l.mergeProps({class:[e.cx("offIcon"),e.offIcon]},e.ptm("offIcon")),null,16,["class"]))]}))],16,f)})),128))],16)},d}(primevue.icons.ban,primevue.icons.star,primevue.icons.starfill,primevue.utils,primevue.basecomponent,primevue.rating.style,Vue);

package/scrollpanel/ScrollPanel.vue

@@ -69,14 +69,13 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': {
-            immediate: true,
-            handler: function (newValue) {
-                this.id = newValue || UniqueComponentId();
-            }
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.$el.offsetParent) {
             this.initialize();
         }
@@ -130,22 +129,27 @@ export default {
                 this.scrollYRatio = ownHeight / totalHeight;
 
                 this.frame = this.requestAnimationFrame(() => {
-                    if (this.scrollXRatio >= 1) {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                        this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                    if (this.$refs.xBar) {
+                        if (this.scrollXRatio >= 1) {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                        }
                     }
 
-                    if (this.scrollYRatio >= 1) {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                        this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                    if (this.$refs.yBar) {
+                        if (this.scrollYRatio >= 1) {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                            this.$refs.yBar.style.cssText =
+                                'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                        }
                     }
                 });
             }

package/scrollpanel/scrollpanel.cjs.js

@@ -53,14 +53,12 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': {
-      immediate: true,
-      handler: function handler(newValue) {
-        this.id = newValue || utils.UniqueComponentId();
-      }
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || utils.UniqueComponentId();
     }
   },
   mounted: function mounted() {
+    this.id = this.id || utils.UniqueComponentId();
     if (this.$el.offsetParent) {
       this.initialize();
     }
@@ -109,21 +107,25 @@ var script = {
         var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
         this.scrollYRatio = ownHeight / totalHeight;
         this.frame = this.requestAnimationFrame(function () {
-          if (_this.scrollXRatio >= 1) {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-            _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+          if (_this.$refs.xBar) {
+            if (_this.scrollXRatio >= 1) {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+              _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+            }
           }
-          if (_this.scrollYRatio >= 1) {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-            _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+          if (_this.$refs.yBar) {
+            if (_this.scrollYRatio >= 1) {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+              _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+            }
           }
         });
       }

package/scrollpanel/scrollpanel.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/scrollpanel/style"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s(t).default,props:{step:{type:Number,default:5}},style:s(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e.UniqueComponentId()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),o=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===o&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var s=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/s,this.frame=this.requestAnimationFrame((function(){t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+o+"px;"),t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/s*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];r.render=function(e,t,n,s,r,c){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[o.createElementVNode("div",o.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16,i)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},module.exports=r;
+"use strict";var e=require("primevue/utils"),t=require("primevue/basecomponent"),n=require("primevue/scrollpanel/style"),o=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s(t).default,props:{step:{type:Number,default:5}},style:s(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e.UniqueComponentId()}},mounted:function(){this.id=this.id||e.UniqueComponentId(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),o=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===o&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var s=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/s,this.frame=this.requestAnimationFrame((function(){t.$refs.xBar&&(t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+o+"px;")),t.$refs.yBar&&(t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/s*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;"))}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];r.render=function(e,t,n,s,r,c){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:e.cx("root")},e.ptmi("root")),[o.createElementVNode("div",o.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16,i)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},module.exports=r;

package/scrollpanel/scrollpanel.esm.js

@@ -46,14 +46,12 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': {
-      immediate: true,
-      handler: function handler(newValue) {
-        this.id = newValue || UniqueComponentId();
-      }
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || UniqueComponentId();
     }
   },
   mounted: function mounted() {
+    this.id = this.id || UniqueComponentId();
     if (this.$el.offsetParent) {
       this.initialize();
     }
@@ -102,21 +100,25 @@ var script = {
         var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
         this.scrollYRatio = ownHeight / totalHeight;
         this.frame = this.requestAnimationFrame(function () {
-          if (_this.scrollXRatio >= 1) {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-            _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+          if (_this.$refs.xBar) {
+            if (_this.scrollXRatio >= 1) {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+              _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+            }
           }
-          if (_this.scrollYRatio >= 1) {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-            !_this.isUnstyled && DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-          } else {
-            _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-            !_this.isUnstyled && DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-            _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+          if (_this.$refs.yBar) {
+            if (_this.scrollYRatio >= 1) {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+              !_this.isUnstyled && DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+            } else {
+              _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+              !_this.isUnstyled && DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+              _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+            }
           }
         });
       }

package/scrollpanel/scrollpanel.esm.min.js

@@ -1 +1 @@
-import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import s from"primevue/basecomponent";import n from"primevue/scrollpanel/style";import{openBlock as o,createElementBlock as i,mergeProps as r,createElementVNode as a,renderSlot as l}from"vue";var c={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s,props:{step:{type:Number,default:5}},style:n,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var e=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),n=t.getHeight(this.$el)-parseInt(s.height,10);"none"!==e["max-height"]&&0===n&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(e["max-height"],10)?e["max-height"]:this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar:function(){var e=this;if(this.$refs.content){var s=this.$refs.content.scrollWidth,n=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/s;var o=this.$refs.content.scrollHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){e.scrollXRatio>=1?(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.xBar,"p-scrollpanel-hidden")):(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.xBar,"p-scrollpanel-hidden"),e.$refs.xBar.style.cssText="width:"+Math.max(100*e.scrollXRatio,10)+"%; left:"+e.$refs.content.scrollLeft/s*100+"%;bottom:"+n+"px;"),e.scrollYRatio>=1?(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.yBar,"p-scrollpanel-hidden")):(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.yBar,"p-scrollpanel-hidden"),e.$refs.yBar.style.cssText="height:"+Math.max(100*e.scrollYRatio,10)+"%; top: calc("+e.$refs.content.scrollTop/o*100+"% - "+e.$refs.xBar.clientHeight+"px);right:"+i+"px;")}))}},onYBarMouseDown:function(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown:function(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var s=this;this.clearTimer(),this.timer=setTimeout((function(){s.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,s=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=s/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,s=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=s/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},u=["id"],h=["aria-controls","aria-valuenow"],d=["aria-controls","aria-valuenow"];c.render=function(e,t,s,n,c,p){return o(),i("div",r({class:e.cx("root")},e.ptmi("root")),[a("div",r({class:e.cx("wrapper")},e.ptm("wrapper")),[a("div",r({ref:"content",id:p.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return p.onScroll&&p.onScroll.apply(p,arguments)}),onMouseenter:t[1]||(t[1]=function(){return p.moveBar&&p.moveBar.apply(p,arguments)})},e.ptm("content")),[l(e.$slots,"default")],16,u)],16),a("div",r({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":p.contentId,"aria-valuenow":c.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return p.onXBarMouseDown&&p.onXBarMouseDown.apply(p,arguments)}),onKeydown:t[3]||(t[3]=function(e){return p.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[5]||(t[5]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)}),onBlur:t[6]||(t[6]=function(){return p.onBlur&&p.onBlur.apply(p,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,h),a("div",r({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":p.contentId,"aria-valuenow":c.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return p.onYBarMouseDown&&p.onYBarMouseDown.apply(p,arguments)}),onKeydown:t[8]||(t[8]=function(e){return p.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[10]||(t[10]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,d)],16)};export{c as default};
+import{UniqueComponentId as e,DomHandler as t}from"primevue/utils";import s from"primevue/basecomponent";import n from"primevue/scrollpanel/style";import{openBlock as o,createElementBlock as i,mergeProps as r,createElementVNode as a,renderSlot as l}from"vue";var c={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:s,props:{step:{type:Number,default:5}},style:n,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e()}},mounted:function(){this.id=this.id||e(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var e=getComputedStyle(this.$el),s=getComputedStyle(this.$refs.xBar),n=t.getHeight(this.$el)-parseInt(s.height,10);"none"!==e["max-height"]&&0===n&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(s.height,10)>parseInt(e["max-height"],10)?e["max-height"]:this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar:function(){var e=this;if(this.$refs.content){var s=this.$refs.content.scrollWidth,n=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/s;var o=this.$refs.content.scrollHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){e.$refs.xBar&&(e.scrollXRatio>=1?(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.xBar,"p-scrollpanel-hidden")):(e.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.xBar,"p-scrollpanel-hidden"),e.$refs.xBar.style.cssText="width:"+Math.max(100*e.scrollXRatio,10)+"%; left:"+e.$refs.content.scrollLeft/s*100+"%;bottom:"+n+"px;")),e.$refs.yBar&&(e.scrollYRatio>=1?(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!e.isUnstyled&&t.addClass(e.$refs.yBar,"p-scrollpanel-hidden")):(e.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!e.isUnstyled&&t.removeClass(e.$refs.yBar,"p-scrollpanel-hidden"),e.$refs.yBar.style.cssText="height:"+Math.max(100*e.scrollYRatio,10)+"%; top: calc("+e.$refs.content.scrollTop/o*100+"% - "+e.$refs.xBar.clientHeight+"px);right:"+i+"px;"))}))}},onYBarMouseDown:function(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown:function(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var s=this;this.clearTimer(),this.timer=setTimeout((function(){s.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,s=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=s/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,s=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=s/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&t.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},u=["id"],h=["aria-controls","aria-valuenow"],d=["aria-controls","aria-valuenow"];c.render=function(e,t,s,n,c,p){return o(),i("div",r({class:e.cx("root")},e.ptmi("root")),[a("div",r({class:e.cx("wrapper")},e.ptm("wrapper")),[a("div",r({ref:"content",id:p.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return p.onScroll&&p.onScroll.apply(p,arguments)}),onMouseenter:t[1]||(t[1]=function(){return p.moveBar&&p.moveBar.apply(p,arguments)})},e.ptm("content")),[l(e.$slots,"default")],16,u)],16),a("div",r({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":p.contentId,"aria-valuenow":c.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return p.onXBarMouseDown&&p.onXBarMouseDown.apply(p,arguments)}),onKeydown:t[3]||(t[3]=function(e){return p.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[5]||(t[5]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)}),onBlur:t[6]||(t[6]=function(){return p.onBlur&&p.onBlur.apply(p,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,h),a("div",r({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":p.contentId,"aria-valuenow":c.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return p.onYBarMouseDown&&p.onYBarMouseDown.apply(p,arguments)}),onKeydown:t[8]||(t[8]=function(e){return p.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return p.onKeyUp&&p.onKeyUp.apply(p,arguments)}),onFocus:t[10]||(t[10]=function(){return p.onFocus&&p.onFocus.apply(p,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,d)],16)};export{c as default};

package/scrollpanel/scrollpanel.js

@@ -50,14 +50,12 @@ this.primevue.scrollpanel = (function (utils, BaseComponent, ScrollPanelStyle, v
         };
       },
       watch: {
-        '$attrs.id': {
-          immediate: true,
-          handler: function handler(newValue) {
-            this.id = newValue || utils.UniqueComponentId();
-          }
+        '$attrs.id': function $attrsId(newValue) {
+          this.id = newValue || utils.UniqueComponentId();
         }
       },
       mounted: function mounted() {
+        this.id = this.id || utils.UniqueComponentId();
         if (this.$el.offsetParent) {
           this.initialize();
         }
@@ -106,21 +104,25 @@ this.primevue.scrollpanel = (function (utils, BaseComponent, ScrollPanelStyle, v
             var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
             this.scrollYRatio = ownHeight / totalHeight;
             this.frame = this.requestAnimationFrame(function () {
-              if (_this.scrollXRatio >= 1) {
-                _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-              } else {
-                _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
-                _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+              if (_this.$refs.xBar) {
+                if (_this.scrollXRatio >= 1) {
+                  _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                  !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+                } else {
+                  _this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                  !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
+                  _this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; left:' + _this.$refs.content.scrollLeft / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
+                }
               }
-              if (_this.scrollYRatio >= 1) {
-                _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-              } else {
-                _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
-                _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+              if (_this.$refs.yBar) {
+                if (_this.scrollYRatio >= 1) {
+                  _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                  !_this.isUnstyled && utils.DomHandler.addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+                } else {
+                  _this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                  !_this.isUnstyled && utils.DomHandler.removeClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
+                  _this.$refs.yBar.style.cssText = 'height:' + Math.max(_this.scrollYRatio * 100, 10) + '%; top: calc(' + _this.$refs.content.scrollTop / totalHeight * 100 + '% - ' + _this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                }
               }
             });
           }

package/scrollpanel/scrollpanel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:o(t).default,props:{step:{type:Number,default:5}},style:o(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":{immediate:!0,handler:function(t){this.id=t||e.UniqueComponentId()}}},mounted:function(){this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),s=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===s&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var o=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+s+"px;"),t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/o*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];return r.render=function(e,t,n,o,r,c){return s.openBlock(),s.createElementBlock("div",s.mergeProps({class:e.cx("root")},e.ptmi("root")),[s.createElementVNode("div",s.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[s.createElementVNode("div",s.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16,i)],16),s.createElementVNode("div",s.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),s.createElementVNode("div",s.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},r}(primevue.utils,primevue.basecomponent,primevue.scrollpanel.style,Vue);
+this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r={name:"ScrollPanel",extends:{name:"BaseScrollPanel",extends:o(t).default,props:{step:{type:Number,default:5}},style:o(n).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:function(){return{id:this.$attrs.id,orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}},watch:{"$attrs.id":function(t){this.id=t||e.UniqueComponentId()}},mounted:function(){this.id=this.id||e.UniqueComponentId(),this.$el.offsetParent&&this.initialize()},updated:function(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount:function(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize:function(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight:function(){var t=getComputedStyle(this.$el),n=getComputedStyle(this.$refs.xBar),s=e.DomHandler.getHeight(this.$el)-parseInt(n.height,10);"none"!==t["max-height"]&&0===s&&(this.$el.style.height=this.$refs.content.offsetHeight+parseInt(n.height,10)>parseInt(t["max-height"],10)?t["max-height"]:this.$refs.content.offsetHeight+parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)+parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth)+"px")},moveBar:function(){var t=this;if(this.$refs.content){var n=this.$refs.content.scrollWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=this.$refs.content.clientWidth/n;var o=this.$refs.content.scrollHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=this.$refs.content.clientHeight/o,this.frame=this.requestAnimationFrame((function(){t.$refs.xBar&&(t.scrollXRatio>=1?(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.xBar,"p-scrollpanel-hidden")):(t.$refs.xBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.xBar,"p-scrollpanel-hidden"),t.$refs.xBar.style.cssText="width:"+Math.max(100*t.scrollXRatio,10)+"%; left:"+t.$refs.content.scrollLeft/n*100+"%;bottom:"+s+"px;")),t.$refs.yBar&&(t.scrollYRatio>=1?(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","true"),!t.isUnstyled&&e.DomHandler.addClass(t.$refs.yBar,"p-scrollpanel-hidden")):(t.$refs.yBar.setAttribute("data-p-scrollpanel-hidden","false"),!t.isUnstyled&&e.DomHandler.removeClass(t.$refs.yBar,"p-scrollpanel-hidden"),t.$refs.yBar.style.cssText="height:"+Math.max(100*t.scrollYRatio,10)+"%; top: calc("+t.$refs.content.scrollTop/o*100+"% - "+t.$refs.xBar.clientHeight+"px);right:"+r+"px;"))}))}},onYBarMouseDown:function(t){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=t.pageY,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","true"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onXBarMouseDown:function(t){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=t.pageX,this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),t.preventDefault()},onScroll:function(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown:function(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp:function(){this.clearTimer()},repeat:function(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer:function(e,t){var n=this;this.clearTimer(),this.timer=setTimeout((function(){n.repeat(e,t)}),40)},clearTimer:function(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove:function(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar:function(e){var t=this,n=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollLeft+=n/t.scrollXRatio}))},onMouseMoveForYBar:function(e){var t=this,n=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((function(){t.$refs.content.scrollTop+=n/t.scrollYRatio}))},onFocus:function(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur:function(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp:function(){this.$refs.yBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),this.$refs.xBar.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),document.body.setAttribute("data-p-scrollpanel-grabbed","false"),!this.isUnstyled&&e.DomHandler.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame:function(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh:function(){this.moveBar()},scrollTop:function(e){var t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;this.$refs.content.scrollTop=e=e>t?t:e>0?e:0},timeoutFrame:function(e){setTimeout(e,0)},bindDocumentMouseListeners:function(){var e=this;this.documentMouseMoveListener||(this.documentMouseMoveListener=function(t){e.onDocumentMouseMove(t)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=function(t){e.onDocumentMouseUp(t)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners:function(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener:function(){var e=this;this.documentResizeListener||(this.documentResizeListener=function(){e.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener:function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}},computed:{contentId:function(){return this.id+"_content"}}},i=["id"],a=["aria-controls","aria-valuenow"],l=["aria-controls","aria-valuenow"];return r.render=function(e,t,n,o,r,c){return s.openBlock(),s.createElementBlock("div",s.mergeProps({class:e.cx("root")},e.ptmi("root")),[s.createElementVNode("div",s.mergeProps({class:e.cx("wrapper")},e.ptm("wrapper")),[s.createElementVNode("div",s.mergeProps({ref:"content",id:c.contentId,class:e.cx("content"),onScroll:t[0]||(t[0]=function(){return c.onScroll&&c.onScroll.apply(c,arguments)}),onMouseenter:t[1]||(t[1]=function(){return c.moveBar&&c.moveBar.apply(c,arguments)})},e.ptm("content")),[s.renderSlot(e.$slots,"default")],16,i)],16),s.createElementVNode("div",s.mergeProps({ref:"xBar",class:e.cx("barx"),tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-controls":c.contentId,"aria-valuenow":r.lastScrollLeft,onMousedown:t[2]||(t[2]=function(){return c.onXBarMouseDown&&c.onXBarMouseDown.apply(c,arguments)}),onKeydown:t[3]||(t[3]=function(e){return c.onKeyDown(e)}),onKeyup:t[4]||(t[4]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[5]||(t[5]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)}),onBlur:t[6]||(t[6]=function(){return c.onBlur&&c.onBlur.apply(c,arguments)})},e.ptm("barx"),{"data-pc-group-section":"bar"}),null,16,a),s.createElementVNode("div",s.mergeProps({ref:"yBar",class:e.cx("bary"),tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-controls":c.contentId,"aria-valuenow":r.lastScrollTop,onMousedown:t[7]||(t[7]=function(){return c.onYBarMouseDown&&c.onYBarMouseDown.apply(c,arguments)}),onKeydown:t[8]||(t[8]=function(e){return c.onKeyDown(e)}),onKeyup:t[9]||(t[9]=function(){return c.onKeyUp&&c.onKeyUp.apply(c,arguments)}),onFocus:t[10]||(t[10]=function(){return c.onFocus&&c.onFocus.apply(c,arguments)})},e.ptm("bary"),{"data-pc-group-section":"bar"}),null,16,l)],16)},r}(primevue.utils,primevue.basecomponent,primevue.scrollpanel.style,Vue);

package/sidebar/BaseSidebar.vue

@@ -52,6 +52,15 @@ export default {
         return {
             $parentInstance: this
         };
+    },
+    watch: {
+        dismissable(newValue) {
+            if (newValue) {
+                this.bindOutsideClickListener();
+            } else {
+                this.unbindOutsideClickListener();
+            }
+        }
     }
 };
 </script>

package/sidebar/sidebar.cjs.js

@@ -68,6 +68,15 @@ var script$1 = {
     return {
       $parentInstance: this
     };
+  },
+  watch: {
+    dismissable: function dismissable(newValue) {
+      if (newValue) {
+        this.bindOutsideClickListener();
+      } else {
+        this.unbindOutsideClickListener();
+      }
+    }
   }
 };
 

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/portal"),o=require("primevue/ripple"),i=require("primevue/utils"),s=require("primevue/basecomponent"),r=require("primevue/sidebar/style"),l=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(o),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&i.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&i.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&i.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&i.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];h.render=function(e,t,n,o,i,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[i.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},module.exports=h;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/portal"),i=require("primevue/ripple"),o=require("primevue/utils"),s=require("primevue/basecomponent"),r=require("primevue/sidebar/style"),l=require("vue");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(e),u=c(t),d=c(n),m=c(i),h={name:"Sidebar",extends:{name:"BaseSidebar",extends:c(s).default,props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},header:{type:null,default:null},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:void 0},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},style:c(r).default,provide:function(){return{$parentInstance:this}},watch:{dismissable:function(e){e?this.bindOutsideClickListener():this.unbindOutsideClickListener()}}},inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],data:function(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,documentKeydownListener:null,updated:function(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount:function(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide:function(){this.$emit("update:visible",!1)},onEnter:function(){this.$emit("show"),this.focus(),this.bindDocumentKeyDownListener(),this.autoZIndex&&o.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter:function(){this.enableDocumentSettings()},onBeforeLeave:function(){this.modal&&!this.isUnstyled&&o.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave:function(){this.$emit("hide")},onAfterLeave:function(){this.autoZIndex&&o.ZIndexUtils.clear(this.mask),this.unbindDocumentKeyDownListener(),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick:function(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus:function(){var e=function(e){return e&&e.querySelector("[autofocus]")},t=this.$slots.header&&e(this.headerContainer);t||(t=this.$slots.default&&e(this.container))||(t=this.closeButton),t&&o.DomHandler.focus(t)},enableDocumentSettings:function(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&o.DomHandler.blockBodyScroll()},disableDocumentSettings:function(){this.unbindOutsideClickListener(),this.blockScroll&&o.DomHandler.unblockBodyScroll()},onKeydown:function(e){"Escape"===e.code&&this.hide()},containerRef:function(e){this.container=e},maskRef:function(e){this.mask=e},contentRef:function(e){this.content=e},headerContainerRef:function(e){this.headerContainer=e},closeButtonRef:function(e){this.closeButton=e},bindDocumentKeyDownListener:function(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeydown,document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener:function(){this.documentKeydownListener&&(document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},bindOutsideClickListener:function(){var e=this;this.outsideClickListener||(this.outsideClickListener=function(t){e.isOutsideClicked(t)&&e.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener:function(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked:function(e){return this.container&&!this.container.contains(e.target)}},computed:{fullScreen:function(){return"full"===this.position},closeAriaLabel:function(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:a.default,ripple:m.default},components:{Portal:d.default,TimesIcon:u.default}},f=["aria-modal"],p=["aria-label"];h.render=function(e,t,n,i,o,s){var r=l.resolveComponent("Portal"),c=l.resolveDirective("ripple"),a=l.resolveDirective("focustrap");return l.openBlock(),l.createBlock(r,null,{default:l.withCtx((function(){return[o.containerVisible?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.maskRef,onMousedown:t[1]||(t[1]=function(){return s.onMaskClick&&s.onMaskClick.apply(s,arguments)}),class:e.cx("mask"),style:e.sx("mask",!0,{position:e.position})},e.ptm("mask")),[l.createVNode(l.Transition,l.mergeProps({name:"p-sidebar",onEnter:s.onEnter,onAfterEnter:s.onAfterEnter,onBeforeLeave:s.onBeforeLeave,onLeave:s.onLeave,onAfterLeave:s.onAfterLeave,appear:""},e.ptm("transition")),{default:l.withCtx((function(){return[e.visible?l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:s.containerRef,class:e.cx("root"),role:"complementary","aria-modal":e.modal},e.ptmi("root")),[e.$slots.container?l.renderSlot(e.$slots,"container",{key:0,onClose:s.hide,closeCallback:s.hide}):(l.openBlock(),l.createElementBlock(l.Fragment,{key:1},[l.createElementVNode("div",l.mergeProps({ref:s.headerContainerRef,class:e.cx("header")},e.ptm("header")),[l.renderSlot(e.$slots,"header",{class:l.normalizeClass(e.cx("title"))},(function(){return[e.header?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,class:e.cx("title")},e.ptm("title")),l.toDisplayString(e.header),17)):l.createCommentVNode("",!0)]})),e.showCloseIcon?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,ref:s.closeButtonRef,type:"button",class:e.cx("closeButton"),"aria-label":s.closeAriaLabel,onClick:t[0]||(t[0]=function(){return s.hide&&s.hide.apply(s,arguments)})},e.ptm("closeButton"),{"data-pc-group-section":"iconcontainer"}),[l.renderSlot(e.$slots,"closeicon",{class:l.normalizeClass(e.cx("closeIcon"))},(function(){return[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.closeIcon?"span":"TimesIcon"),l.mergeProps({class:[e.cx("closeIcon"),e.closeIcon]},e.ptm("closeIcon")),null,16,["class"]))]}))],16,p)),[[c]]):l.createCommentVNode("",!0)],16),l.createElementVNode("div",l.mergeProps({ref:s.contentRef,class:e.cx("content")},e.ptm("content")),[l.renderSlot(e.$slots,"default")],16)],64))],16,f)),[[a]]):l.createCommentVNode("",!0)]})),_:3},16,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],16)):l.createCommentVNode("",!0)]})),_:3})},module.exports=h;

package/sidebar/sidebar.esm.js

@@ -57,6 +57,15 @@ var script$1 = {
     return {
       $parentInstance: this
     };
+  },
+  watch: {
+    dismissable: function dismissable(newValue) {
+      if (newValue) {
+        this.bindOutsideClickListener();
+      } else {
+        this.unbindOutsideClickListener();
+      }
+    }
   }
 };