primevue 3.16.2 → 3.18.0

package/colorpicker/colorpicker.esm.js

@@ -64,6 +64,17 @@ var script = {
     colorHandle: null,
     hueView: null,
     hueHandle: null,
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.hsbValue = this.toHSB(newValue);
+
+                if (this.selfUpdate) this.selfUpdate = false;
+                else this.updateUI();
+            }
+        }
+    },
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindDragListeners();
@@ -83,26 +94,14 @@ var script = {
     mounted() {
         this.updateUI();
     },
-    watch: {
-        modelValue: {
-            immediate: true,
-            handler(newValue) {
-                this.hsbValue = this.toHSB(newValue);
-
-                if (this.selfUpdate)
-                    this.selfUpdate = false;
-                else
-                    this.updateUI();
-            }
-        }
-    },
     methods: {
         pickColor(event) {
             let rect = this.colorSelector.getBoundingClientRect();
             let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
             let left = rect.left + document.body.scrollLeft;
-            let saturation = Math.floor(100 * (Math.max(0, Math.min(150, ((event.pageX || event.changedTouches[0].pageX)- left)))) / 150);
-            let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
+            let saturation = Math.floor((100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left))) / 150);
+            let brightness = Math.floor((100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
+
             this.hsbValue = this.validateHSB({
                 h: this.hsbValue.h,
                 s: saturation,
@@ -113,12 +112,13 @@ var script = {
             this.updateColorHandle();
             this.updateInput();
             this.updateModel();
-            this.$emit('change', {event: event, value: this.modelValue});
+            this.$emit('change', { event: event, value: this.modelValue });
         },
         pickHue(event) {
             let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+
             this.hsbValue = this.validateHSB({
-                h: Math.floor(360 * (150 - Math.max(0, Math.min(150, ((event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
+                h: Math.floor((360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150),
                 s: 100,
                 b: 100
             });
@@ -128,21 +128,21 @@ var script = {
             this.updateHue();
             this.updateModel();
             this.updateInput();
-            this.$emit('change', {event: event, value: this.modelValue});
+            this.$emit('change', { event: event, value: this.modelValue });
         },
         updateModel() {
-            switch(this.format) {
+            switch (this.format) {
                 case 'hex':
                     this.$emit('update:modelValue', this.HSBtoHEX(this.hsbValue));
-                break;
+                    break;
 
                 case 'rgb':
                     this.$emit('update:modelValue', this.HSBtoRGB(this.hsbValue));
-                break;
+                    break;
 
                 case 'hsb':
                     this.$emit('update:modelValue', this.hsbValue);
-                break;
+                    break;
             }
         },
         updateColorSelector() {
@@ -152,18 +152,19 @@ var script = {
                     s: 100,
                     b: 100
                 });
+
                 this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
             }
         },
         updateColorHandle() {
             if (this.colorHandle) {
-                this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
-                this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
+                this.colorHandle.style.left = Math.floor((150 * this.hsbValue.s) / 100) + 'px';
+                this.colorHandle.style.top = Math.floor((150 * (100 - this.hsbValue.b)) / 100) + 'px';
             }
         },
         updateHue() {
             if (this.hueHandle) {
-                this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
+                this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h) / 360) + 'px';
             }
         },
         updateInput() {
@@ -193,19 +194,24 @@ var script = {
         },
         validateHEX(hex) {
             var len = 6 - hex.length;
+
             if (len > 0) {
                 var o = [];
-                for (var i=0; i<len; i++) {
+
+                for (var i = 0; i < len; i++) {
                     o.push('0');
                 }
+
                 o.push(hex);
                 hex = o.join('');
             }
+
             return hex;
         },
         HEXtoRGB(hex) {
-            let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-            return {r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF)};
+            let hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
+
+            return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
         },
         HEXtoHSB(hex) {
             return this.RGBtoHSB(this.HEXtoRGB(hex));
@@ -219,8 +225,10 @@ var script = {
             var min = Math.min(rgb.r, rgb.g, rgb.b);
             var max = Math.max(rgb.r, rgb.g, rgb.b);
             var delta = max - min;
+
             hsb.b = max;
-            hsb.s = max !== 0 ? 255 * delta / max : 0;
+            hsb.s = max !== 0 ? (255 * delta) / max : 0;
+
             if (hsb.s !== 0) {
                 if (rgb.r === max) {
                     hsb.h = (rgb.g - rgb.b) / delta;
@@ -232,49 +240,76 @@ var script = {
             } else {
                 hsb.h = -1;
             }
+
             hsb.h *= 60;
+
             if (hsb.h < 0) {
                 hsb.h += 360;
             }
-            hsb.s *= 100/255;
-            hsb.b *= 100/255;
+
+            hsb.s *= 100 / 255;
+            hsb.b *= 100 / 255;
+
             return hsb;
         },
         HSBtoRGB(hsb) {
             var rgb = {
-                r: null, g: null, b: null
+                r: null,
+                g: null,
+                b: null
             };
             var h = Math.round(hsb.h);
-            var s = Math.round(hsb.s*255/100);
-            var v = Math.round(hsb.b*255/100);
+            var s = Math.round((hsb.s * 255) / 100);
+            var v = Math.round((hsb.b * 255) / 100);
+
             if (s === 0) {
                 rgb = {
                     r: v,
                     g: v,
                     b: v
                 };
-            }
-            else {
+            } else {
                 var t1 = v;
-                var t2 = (255-s)*v/255;
-                var t3 = (t1-t2)*(h%60)/60;
-                if (h===360) h = 0;
-                if (h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3;}
-                else if (h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3;}
-                else if (h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3;}
-                else if (h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3;}
-                else if (h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3;}
-                else if (h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3;}
-                else {rgb.r=0; rgb.g=0;	rgb.b=0;}
-            }
-            return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+                var t2 = ((255 - s) * v) / 255;
+                var t3 = ((t1 - t2) * (h % 60)) / 60;
+
+                if (h === 360) h = 0;
+
+                if (h < 60) {
+                    rgb.r = t1;
+                    rgb.b = t2;
+                    rgb.g = t2 + t3;
+                } else if (h < 120) {
+                    rgb.g = t1;
+                    rgb.b = t2;
+                    rgb.r = t1 - t3;
+                } else if (h < 180) {
+                    rgb.g = t1;
+                    rgb.r = t2;
+                    rgb.b = t2 + t3;
+                } else if (h < 240) {
+                    rgb.b = t1;
+                    rgb.r = t2;
+                    rgb.g = t1 - t3;
+                } else if (h < 300) {
+                    rgb.b = t1;
+                    rgb.g = t2;
+                    rgb.r = t2 + t3;
+                } else if (h < 360) {
+                    rgb.r = t1;
+                    rgb.g = t2;
+                    rgb.b = t1 - t3;
+                } else {
+                    rgb.r = 0;
+                    rgb.g = 0;
+                    rgb.b = 0;
+                }
+            }
+
+            return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
         },
         RGBtoHEX(rgb) {
-            var hex = [
-                rgb.r.toString(16),
-                rgb.g.toString(16),
-                rgb.b.toString(16)
-            ];
+            var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
 
             for (var key in hex) {
                 if (hex[key].length === 1) {
@@ -294,18 +329,17 @@ var script = {
                 switch (this.format) {
                     case 'hex':
                         hsb = this.HEXtoHSB(value);
-                    break;
+                        break;
 
                     case 'rgb':
                         hsb = this.RGBtoHSB(value);
-                    break;
+                        break;
 
                     case 'hsb':
                         hsb = value;
-                    break;
+                        break;
                 }
-            }
-            else {
+            } else {
                 hsb = this.HEXtoHSB(this.defaultColor);
             }
 
@@ -337,10 +371,8 @@ var script = {
             }
         },
         alignOverlay() {
-            if (this.appendTo === 'self')
-                DomHandler.relativePosition(this.picker, this.$refs.input);
-            else
-                DomHandler.absolutePosition(this.picker, this.$refs.input);
+            if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);
+            else DomHandler.absolutePosition(this.picker, this.$refs.input);
         },
         onInputClick() {
             if (this.disabled) {
@@ -350,18 +382,18 @@ var script = {
             this.overlayVisible = !this.overlayVisible;
         },
         onInputKeydown(event) {
-            switch(event.which) {
+            switch (event.which) {
                 //space
                 case 32:
                     this.overlayVisible = !this.overlayVisible;
                     event.preventDefault();
-                break;
+                    break;
 
                 //escape and tab
                 case 27:
                 case 9:
                     this.overlayVisible = false;
-                break;
+                    break;
             }
         },
         onColorMousedown(event) {
@@ -434,6 +466,7 @@ var script = {
                         this.overlayVisible = false;
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -466,6 +499,7 @@ var script = {
                         this.overlayVisible = false;
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -530,21 +564,26 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-colorpicker p-component', {'p-colorpicker-overlay': !this.inline}];
+            return ['p-colorpicker p-component', { 'p-colorpicker-overlay': !this.inline }];
         },
         inputClass() {
-            return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
+            return ['p-colorpicker-preview p-inputtext', { 'p-disabled': this.disabled }];
         },
         pickerClass() {
-            return ['p-colorpicker-panel', this.panelClass, {
-                'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-colorpicker-panel',
+                this.panelClass,
+                {
+                    'p-colorpicker-overlay-panel': !this.inline,
+                    'p-disabled': this.disabled,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'Portal': Portal
+        Portal: Portal
     }
 };
 
@@ -659,7 +698,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n";
+var css_248z = "\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n    width: 150px;\n    height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n    position: absolute;\n    top: 0px;\n    left: 150px;\n    border-radius: 100%;\n    width: 10px;\n    height: 10px;\n    border-width: 1px;\n    border-style: solid;\n    margin: -5px 0 0 -5px;\n    cursor: pointer;\n    opacity: 0.85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: 0.85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n    position: absolute;\n    top: 150px;\n    left: 0px;\n    width: 21px;\n    margin-left: -2px;\n    margin-top: -5px;\n    height: 10px;\n    border-width: 2px;\n    border-style: solid;\n    opacity: 0.85;\n    cursor: pointer;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/colorpicker/colorpicker.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import o from"primevue/portal";import{resolveComponent as s,openBlock as r,createElementBlock as l,normalizeClass as a,createCommentVNode as h,createVNode as u,withCtx as d,Transition as p,createElementVNode as c}from"vue";var b={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),s=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:s}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var s=o,r=(255-n)*o/255,l=i%60*(s-r)/60;360===i&&(i=0),i<60?(t.r=s,t.b=r,t.g=r+l):i<120?(t.g=s,t.b=r,t.r=s-l):i<180?(t.g=s,t.r=r,t.b=r+l):i<240?(t.b=s,t.r=r,t.g=s-l):i<300?(t.b=s,t.g=r,t.r=r+l):i<360?(t.r=s,t.g=r,t.b=s-l):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){"self"===this.appendTo?t.relativePosition(this.picker,this.$refs.input):t.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(e){this.disabled||(this.colorDragging=!0,this.pickColor(e),t.addClass(this.$el,"p-colorpicker-dragging"),e.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,t.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(e){this.disabled||(this.hueDragging=!0,this.pickHue(e),t.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o}};const g=["tabindex","disabled"],m={class:"p-colorpicker-content"},v={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n     width: 150px;\n     height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n     position: absolute;\n     top: 0px;\n     left: 150px;\n     border-radius: 100%;\n     width: 10px;\n     height: 10px;\n     border-width: 1px;\n     border-style: solid;\n     margin: -5px 0 0 -5px;\n     cursor: pointer;\n     opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: .85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n     position: absolute;\n     top: 150px;\n     left: 0px;\n     width: 21px;\n     margin-left: -2px;\n     margin-top: -5px;\n     height: 10px;\n     border-width: 2px;\n     border-style: solid;\n     opacity: .85;\n     cursor: pointer;\n}\n"),b.render=function(e,t,i,n,o,b){const f=s("Portal");return r(),l("div",{ref:"container",class:a(b.containerClass)},[i.inline?h("",!0):(r(),l("input",{key:0,ref:"input",type:"text",class:a(b.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>b.onInputClick&&b.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>b.onInputKeydown&&b.onInputKeydown(...e))},null,42,g)),u(f,{appendTo:i.appendTo,disabled:i.inline},{default:d((()=>[u(p,{name:"p-connected-overlay",onEnter:b.onOverlayEnter,onLeave:b.onOverlayLeave,onAfterLeave:b.onOverlayAfterLeave},{default:d((()=>[i.inline||o.overlayVisible?(r(),l("div",{key:0,ref:b.pickerRef,class:a(b.pickerClass),onClick:t[10]||(t[10]=(...e)=>b.onOverlayClick&&b.onOverlayClick(...e))},[c("div",m,[c("div",{ref:b.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>b.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>b.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>b.onDrag(e)),onTouchend:t[5]||(t[5]=e=>b.onDragEnd())},[c("div",v,[c("div",{ref:b.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),c("div",{ref:b.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>b.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>b.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>b.onDrag(e)),onTouchend:t[9]||(t[9]=e=>b.onDragEnd())},[c("div",{ref:b.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):h("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)};export{b as default};
+import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import o from"primevue/portal";import{resolveComponent as s,openBlock as r,createElementBlock as l,normalizeClass as a,createCommentVNode as h,createVNode as u,withCtx as d,Transition as p,createElementVNode as c}from"vue";var b={name:"ColorPicker",emits:["update:modelValue","change","show","hide"],props:{modelValue:{type:null,default:null},defaultColor:{type:null,default:"ff0000"},inline:{type:Boolean,default:!1},format:{type:String,default:"hex"},disabled:{type:Boolean,default:!1},tabindex:{type:String,default:null},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},appendTo:{type:String,default:"body"},panelClass:null},data:()=>({overlayVisible:!1}),hsbValue:null,outsideClickListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,scrollHandler:null,resizeListener:null,hueDragging:null,colorDragging:null,selfUpdate:null,picker:null,colorSelector:null,colorHandle:null,hueView:null,hueHandle:null,watch:{modelValue:{immediate:!0,handler(e){this.hsbValue=this.toHSB(e),this.selfUpdate?this.selfUpdate=!1:this.updateUI()}}},beforeUnmount(){this.unbindOutsideClickListener(),this.unbindDragListeners(),this.unbindResizeListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.picker&&this.autoZIndex&&e.clear(this.picker),this.clearRefs()},mounted(){this.updateUI()},methods:{pickColor(e){let t=this.colorSelector.getBoundingClientRect(),i=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),n=t.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-n))/150),s=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-i)))/150);this.hsbValue=this.validateHSB({h:this.hsbValue.h,s:o,b:s}),this.selfUpdate=!0,this.updateColorHandle(),this.updateInput(),this.updateModel(),this.$emit("change",{event:e,value:this.modelValue})},pickHue(e){let t=this.hueView.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.hsbValue=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150),s:100,b:100}),this.selfUpdate=!0,this.updateColorSelector(),this.updateHue(),this.updateModel(),this.updateInput(),this.$emit("change",{event:e,value:this.modelValue})},updateModel(){switch(this.format){case"hex":this.$emit("update:modelValue",this.HSBtoHEX(this.hsbValue));break;case"rgb":this.$emit("update:modelValue",this.HSBtoRGB(this.hsbValue));break;case"hsb":this.$emit("update:modelValue",this.hsbValue)}},updateColorSelector(){if(this.colorSelector){let e=this.validateHSB({h:this.hsbValue.h,s:100,b:100});this.colorSelector.style.backgroundColor="#"+this.HSBtoHEX(e)}},updateColorHandle(){this.colorHandle&&(this.colorHandle.style.left=Math.floor(150*this.hsbValue.s/100)+"px",this.colorHandle.style.top=Math.floor(150*(100-this.hsbValue.b)/100)+"px")},updateHue(){this.hueHandle&&(this.hueHandle.style.top=Math.floor(150-150*this.hsbValue.h/360)+"px")},updateInput(){this.$refs.input&&(this.$refs.input.style.backgroundColor="#"+this.HSBtoHEX(this.hsbValue))},updateUI(){this.updateHue(),this.updateColorHandle(),this.updateInput(),this.updateColorSelector()},validateHSB:e=>({h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}),validateRGB:e=>({r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}),validateHEX(e){var t=6-e.length;if(t>0){for(var i=[],n=0;n<t;n++)i.push("0");i.push(e),e=i.join("")}return e},HEXtoRGB(e){let t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},HEXtoHSB(e){return this.RGBtoHSB(this.HEXtoRGB(e))},RGBtoHSB(e){var t={h:0,s:0,b:0},i=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b),o=n-i;return t.b=n,t.s=0!==n?255*o/n:0,0!==t.s?e.r===n?t.h=(e.g-e.b)/o:e.g===n?t.h=2+(e.b-e.r)/o:t.h=4+(e.r-e.g)/o:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},HSBtoRGB(e){var t={r:null,g:null,b:null},i=Math.round(e.h),n=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===n)t={r:o,g:o,b:o};else{var s=o,r=(255-n)*o/255,l=i%60*(s-r)/60;360===i&&(i=0),i<60?(t.r=s,t.b=r,t.g=r+l):i<120?(t.g=s,t.b=r,t.r=s-l):i<180?(t.g=s,t.r=r,t.b=r+l):i<240?(t.b=s,t.r=r,t.g=s-l):i<300?(t.b=s,t.g=r,t.r=r+l):i<360?(t.r=s,t.g=r,t.b=s-l):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBtoHEX(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var i in t)1===t[i].length&&(t[i]="0"+t[i]);return t.join("")},HSBtoHEX(e){return this.RGBtoHEX(this.HSBtoRGB(e))},toHSB(e){let t;if(e)switch(this.format){case"hex":t=this.HEXtoHSB(e);break;case"rgb":t=this.RGBtoHSB(e);break;case"hsb":t=e}else t=this.HEXtoHSB(this.defaultColor);return t},onOverlayEnter(t){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&e.set("overlay",t,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){"self"===this.appendTo?t.relativePosition(this.picker,this.$refs.input):t.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.which){case 32:this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case 27:case 9:this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(e){this.disabled||(this.colorDragging=!0,this.pickColor(e),t.addClass(this.$el,"p-colorpicker-dragging"),e.preventDefault())},onDrag(e){this.colorDragging&&(this.pickColor(e),e.preventDefault()),this.hueDragging&&(this.pickHue(e),e.preventDefault())},onDragEnd(){this.colorDragging=!1,this.hueDragging=!1,t.removeClass(this.$el,"p-colorpicker-dragging"),this.unbindDragListeners()},onHueMousedown(e){this.disabled||(this.bindDragListeners(),this.onHueDragStart(e))},onHueDragStart(e){this.disabled||(this.hueDragging=!0,this.pickHue(e),t.addClass(this.$el,"p-colorpicker-dragging"))},isInputClicked(e){return this.$refs.input&&this.$refs.input.isSameNode(e.target)},bindDragListeners(){this.bindDocumentMouseMoveListener(),this.bindDocumentMouseUpListener()},unbindDragListeners(){this.unbindDocumentMouseMoveListener(),this.unbindDocumentMouseUpListener()},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.picker&&!this.picker.contains(e.target)&&!this.isInputClicked(e)&&(this.overlayVisible=!1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&(this.overlayVisible=!1)},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},bindDocumentMouseMoveListener(){this.documentMouseMoveListener||(this.documentMouseMoveListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.documentMouseMoveListener))},unbindDocumentMouseMoveListener(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null)},bindDocumentMouseUpListener(){this.documentMouseUpListener||(this.documentMouseUpListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseUpListener(){this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},pickerRef(e){this.picker=e},colorSelectorRef(e){this.colorSelector=e},colorHandleRef(e){this.colorHandle=e},hueViewRef(e){this.hueView=e},hueHandleRef(e){this.hueHandle=e},clearRefs(){this.picker=null,this.colorSelector=null,this.colorHandle=null,this.hueView=null,this.hueHandle=null},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.$el})}},computed:{containerClass(){return["p-colorpicker p-component",{"p-colorpicker-overlay":!this.inline}]},inputClass(){return["p-colorpicker-preview p-inputtext",{"p-disabled":this.disabled}]},pickerClass(){return["p-colorpicker-panel",this.panelClass,{"p-colorpicker-overlay-panel":!this.inline,"p-disabled":this.disabled,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Portal:o}};const g=["tabindex","disabled"],m={class:"p-colorpicker-content"},v={class:"p-colorpicker-color"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-colorpicker {\n    display: inline-block;\n}\n.p-colorpicker-dragging {\n    cursor: pointer;\n}\n.p-colorpicker-overlay {\n    position: relative;\n}\n.p-colorpicker-panel {\n    position: relative;\n    width: 193px;\n    height: 166px;\n}\n.p-colorpicker-overlay-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-colorpicker-preview {\n    cursor: pointer;\n}\n.p-colorpicker-panel .p-colorpicker-content {\n    position: relative;\n}\n.p-colorpicker-panel .p-colorpicker-color-selector {\n    width: 150px;\n    height: 150px;\n    top: 8px;\n    left: 8px;\n    position: absolute;\n}\n.p-colorpicker-panel .p-colorpicker-color {\n    width: 150px;\n    height: 150px;\n}\n.p-colorpicker-panel .p-colorpicker-color-handle {\n    position: absolute;\n    top: 0px;\n    left: 150px;\n    border-radius: 100%;\n    width: 10px;\n    height: 10px;\n    border-width: 1px;\n    border-style: solid;\n    margin: -5px 0 0 -5px;\n    cursor: pointer;\n    opacity: 0.85;\n}\n.p-colorpicker-panel .p-colorpicker-hue {\n    width: 17px;\n    height: 150px;\n    top: 8px;\n    left: 167px;\n    position: absolute;\n    opacity: 0.85;\n}\n.p-colorpicker-panel .p-colorpicker-hue-handle {\n    position: absolute;\n    top: 150px;\n    left: 0px;\n    width: 21px;\n    margin-left: -2px;\n    margin-top: -5px;\n    height: 10px;\n    border-width: 2px;\n    border-style: solid;\n    opacity: 0.85;\n    cursor: pointer;\n}\n"),b.render=function(e,t,i,n,o,b){const f=s("Portal");return r(),l("div",{ref:"container",class:a(b.containerClass)},[i.inline?h("",!0):(r(),l("input",{key:0,ref:"input",type:"text",class:a(b.inputClass),readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>b.onInputClick&&b.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>b.onInputKeydown&&b.onInputKeydown(...e))},null,42,g)),u(f,{appendTo:i.appendTo,disabled:i.inline},{default:d((()=>[u(p,{name:"p-connected-overlay",onEnter:b.onOverlayEnter,onLeave:b.onOverlayLeave,onAfterLeave:b.onOverlayAfterLeave},{default:d((()=>[i.inline||o.overlayVisible?(r(),l("div",{key:0,ref:b.pickerRef,class:a(b.pickerClass),onClick:t[10]||(t[10]=(...e)=>b.onOverlayClick&&b.onOverlayClick(...e))},[c("div",m,[c("div",{ref:b.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>b.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>b.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>b.onDrag(e)),onTouchend:t[5]||(t[5]=e=>b.onDragEnd())},[c("div",v,[c("div",{ref:b.colorHandleRef,class:"p-colorpicker-color-handle"},null,512)])],544),c("div",{ref:b.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>b.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>b.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>b.onDrag(e)),onTouchend:t[9]||(t[9]=e=>b.onDragEnd())},[c("div",{ref:b.hueHandleRef,class:"p-colorpicker-hue-handle"},null,512)],544)])],2)):h("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],2)};export{b as default};