primevue/colorpicker/colorpicker.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.colorpicker=function(e,t,i,n,o){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=r(e),l=r(t),a=r(i),d={name:"ColorPicker",extends:s.default,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&&n.ZIndexUtils.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),r=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:r}),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 r=o,s=(255-n)*o/255,l=i%60*(r-s)/60;360===i&&(i=0),i<60?(t.r=r,t.b=s,t.g=s+l):i<120?(t.g=r,t.b=s,t.r=r-l):i<180?(t.g=r,t.r=s,t.b=s+l):i<240?(t.b=r,t.r=s,t.g=r-l):i<300?(t.b=r,t.g=s,t.r=s+l):i<360?(t.r=r,t.g=s,t.b=r-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(e){this.updateUI(),this.alignOverlay(),this.bindOutsideClickListener(),this.bindScrollListener(),this.bindResizeListener(),this.autoZIndex&&n.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay),this.$emit("show")},onOverlayLeave(){this.unbindOutsideClickListener(),this.unbindScrollListener(),this.unbindResizeListener(),this.clearRefs(),this.$emit("hide")},onOverlayAfterLeave(e){this.autoZIndex&&n.ZIndexUtils.clear(e)},alignOverlay(){"self"===this.appendTo?n.DomHandler.relativePosition(this.picker,this.$refs.input):n.DomHandler.absolutePosition(this.picker,this.$refs.input)},onInputClick(){this.disabled||(this.overlayVisible=!this.overlayVisible)},onInputKeydown(e){switch(e.code){case"Space":this.overlayVisible=!this.overlayVisible,e.preventDefault();break;case"Escape":case"Tab":this.overlayVisible=!1}},onColorMousedown(e){this.disabled||(this.bindDragListeners(),this.onColorDragStart(e))},onColorDragStart(e){this.disabled||(this.colorDragging=!0,this.pickColor(e),n.DomHandler.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,n.DomHandler.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),n.DomHandler.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 n.ConnectedOverlayScrollHandler(this.$refs.container,(()=>{this.overlayVisible&&(this.overlayVisible=!1)}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!n.DomHandler.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){l.default.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:a.default}};const h=["tabindex","disabled"];return 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"),d.render=function(e,t,i,n,r,s){const l=o.resolveComponent("Portal");return o.openBlock(),o.createElementBlock("div",o.mergeProps({ref:"container",class:s.containerClass},e.ptm("root")),[i.inline?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("input",o.mergeProps({key:0,ref:"input",type:"text",class:s.inputClass,readonly:"readonly",tabindex:i.tabindex,disabled:i.disabled,onClick:t[0]||(t[0]=(...e)=>s.onInputClick&&s.onInputClick(...e)),onKeydown:t[1]||(t[1]=(...e)=>s.onInputKeydown&&s.onInputKeydown(...e))},e.ptm("input")),null,16,h)),o.createVNode(l,{appendTo:i.appendTo,disabled:i.inline},{default:o.withCtx((()=>[o.createVNode(o.Transition,{name:"p-connected-overlay",onEnter:s.onOverlayEnter,onLeave:s.onOverlayLeave,onAfterLeave:s.onOverlayAfterLeave},{default:o.withCtx((()=>[i.inline||r.overlayVisible?(o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:s.pickerRef,class:s.pickerClass,onClick:t[10]||(t[10]=(...e)=>s.onOverlayClick&&s.onOverlayClick(...e))},e.ptm("panel")),[o.createElementVNode("div",o.mergeProps({class:"p-colorpicker-content"},e.ptm("content")),[o.createElementVNode("div",o.mergeProps({ref:s.colorSelectorRef,class:"p-colorpicker-color-selector",onMousedown:t[2]||(t[2]=e=>s.onColorMousedown(e)),onTouchstart:t[3]||(t[3]=e=>s.onColorDragStart(e)),onTouchmove:t[4]||(t[4]=e=>s.onDrag(e)),onTouchend:t[5]||(t[5]=e=>s.onDragEnd())},e.ptm("selector")),[o.createElementVNode("div",o.mergeProps({class:"p-colorpicker-color"},e.ptm("color")),[o.createElementVNode("div",o.mergeProps({ref:s.colorHandleRef,class:"p-colorpicker-color-handle"},e.ptm("colorHandler")),null,16)],16)],16),o.createElementVNode("div",o.mergeProps({ref:s.hueViewRef,class:"p-colorpicker-hue",onMousedown:t[6]||(t[6]=e=>s.onHueMousedown(e)),onTouchstart:t[7]||(t[7]=e=>s.onHueDragStart(e)),onTouchmove:t[8]||(t[8]=e=>s.onDrag(e)),onTouchend:t[9]||(t[9]=e=>s.onDragEnd())},e.ptm("hue")),[o.createElementVNode("div",o.mergeProps({ref:s.hueHandleRef,class:"p-colorpicker-hue-handle"},e.ptm("hueHandler")),null,16)],16)],16)],16)):o.createCommentVNode("",!0)])),_:1},8,["onEnter","onLeave","onAfterLeave"])])),_:1},8,["appendTo","disabled"])],16)},d}(primevue.basecomponent,primevue.overlayeventbus,primevue.portal,primevue.utils,Vue);