vue-gradient-component/dist/vue-gradient-component.umd.min.js

Color picker with gradient options

(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-gradient-component"]=e(require("vue")):t["vue-gradient-component"]=e(t["Vue"])})("undefined"!==typeof self?self:this,(function(t){return function(){var e={522:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".options-block{display:flex}.options-block__preview{flex:2}.options-block__options{flex:10}.picker{margin-left:120px}.color-picker__body,.color-picker__color-panel,.color-picker__gradient{margin-bottom:15px}.preview-block{margin-top:10px;display:flex;align-items:center}",""]),e["default"]=l},526:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".angle-block[data-v-7ec0ecb2]{width:30px;height:30px;position:relative}.angle-block[data-v-7ec0ecb2],.angle-point[data-v-7ec0ecb2]{border:2px solid;border-radius:50%}.angle-point[data-v-7ec0ecb2]{width:5px;height:5px;position:absolute}",""]),e["default"]=l},788:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,"#picker-body{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.picker-body__pointer{position:absolute;border-radius:50%;z-index:2}.picker-body__first{background:linear-gradient(90deg,#fff 0,transparent)}.picker-body__first,.picker-body__second{position:absolute;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.picker-body__second{background:linear-gradient(180deg,transparent 0,#000)}",""]),e["default"]=l},112:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".color-block[data-v-247fc8f2]{position:relative;border-radius:12px}.color-pointer[data-v-247fc8f2]{position:absolute;border-radius:50%;z-index:2;top:2px}.color-canvas[data-v-247fc8f2]{width:100%;height:100%;border-radius:12px}",""]),e["default"]=l},791:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".gradient-background[data-v-927334b6]{border-radius:12px;position:relative}.gradient-pointer[data-v-927334b6]{position:absolute;border-radius:50%;z-index:3;top:2px;cursor:pointer}.color-canvas[data-v-927334b6]{width:100%;height:100%;border-radius:12px}",""]),e["default"]=l},408:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=o(667),a=o.n(l),c=new URL(o(34),o.b),d=s()(n()),u=a()(c);d.push([t.id,".opacity-background[data-v-59204c07],.opacity-block[data-v-59204c07]{position:relative;border-radius:12px}.opacity-background[data-v-59204c07]{background:url("+u+")}.opacity-pointer[data-v-59204c07]{position:absolute;border-radius:50%;z-index:2;top:2px}",""]),e["default"]=d},339:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".output-block{margin-left:15px}.output-block__input{padding-left:15px;height:30px;font-size:16px;border-radius:12px;font-weight:700;outline:none;text-align:center}",""]),e["default"]=l},53:function(t,e,o){"use strict";o.r(e);var i=o(81),n=o.n(i),r=o(645),s=o.n(r),l=s()(n());l.push([t.id,".preview{border-radius:12px}",""]),e["default"]=l},645:function(t){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o="",i="undefined"!==typeof e[5];return e[4]&&(o+="@supports (".concat(e[4],") {")),e[2]&&(o+="@media ".concat(e[2]," {")),i&&(o+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),o+=t(e),i&&(o+="}"),e[2]&&(o+="}"),e[4]&&(o+="}"),o})).join("")},e.i=function(t,o,i,n,r){"string"===typeof t&&(t=[[null,t,void 0]]);var s={};if(i)for(var l=0;l<this.length;l++){var a=this[l][0];null!=a&&(s[a]=!0)}for(var c=0;c<t.length;c++){var d=[].concat(t[c]);i&&s[d[0]]||("undefined"!==typeof r&&("undefined"===typeof d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),o&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=o):d[2]=o),n&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=n):d[4]="".concat(n)),e.push(d))}},e}},667:function(t){"use strict";t.exports=function(t,e){return e||(e={}),t?(t=String(t.__esModule?t.default:t),/^['"].*['"]$/.test(t)&&(t=t.slice(1,-1)),e.hash&&(t+=e.hash),/["'() \t\n]|(%20)/.test(t)||e.needQuotes?'"'.concat(t.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):t):t}},81:function(t){"use strict";t.exports=function(t){return t[1]}},744:function(t,e){"use strict";e.Z=(t,e)=>{const o=t.__vccOpts||t;for(const[i,n]of e)o[i]=n;return o}},390:function(t,e,o){var i=o(522);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("fd22503e",i,!0,{sourceMap:!1,shadowMode:!1})},909:function(t,e,o){var i=o(526);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("e43f5f0a",i,!0,{sourceMap:!1,shadowMode:!1})},55:function(t,e,o){var i=o(788);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("35012c54",i,!0,{sourceMap:!1,shadowMode:!1})},831:function(t,e,o){var i=o(112);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("f9562340",i,!0,{sourceMap:!1,shadowMode:!1})},683:function(t,e,o){var i=o(791);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("f4573e50",i,!0,{sourceMap:!1,shadowMode:!1})},364:function(t,e,o){var i=o(408);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("1ada2b1c",i,!0,{sourceMap:!1,shadowMode:!1})},196:function(t,e,o){var i=o(339);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("49d0877e",i,!0,{sourceMap:!1,shadowMode:!1})},721:function(t,e,o){var i=o(53);i.__esModule&&(i=i.default),"string"===typeof i&&(i=[[t.id,i,""]]),i.locals&&(t.exports=i.locals);var n=o(402).Z;n("81ea4ad0",i,!0,{sourceMap:!1,shadowMode:!1})},402:function(t,e,o){"use strict";function i(t,e){for(var o=[],i={},n=0;n<e.length;n++){var r=e[n],s=r[0],l=r[1],a=r[2],c=r[3],d={id:t+":"+n,css:l,media:a,sourceMap:c};i[s]?i[s].parts.push(d):o.push(i[s]={id:s,parts:[d]})}return o}o.d(e,{Z:function(){return g}});var n="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!n)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},s=n&&(document.head||document.getElementsByTagName("head")[0]),l=null,a=0,c=!1,d=function(){},u=null,p="data-vue-ssr-id",h="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function g(t,e,o,n){c=o,u=n||{};var s=i(t,e);return f(s),function(e){for(var o=[],n=0;n<s.length;n++){var l=s[n],a=r[l.id];a.refs--,o.push(a)}e?(s=i(t,e),f(s)):s=[];for(n=0;n<o.length;n++){a=o[n];if(0===a.refs){for(var c=0;c<a.parts.length;c++)a.parts[c]();delete r[a.id]}}}}function f(t){for(var e=0;e<t.length;e++){var o=t[e],i=r[o.id];if(i){i.refs++;for(var n=0;n<i.parts.length;n++)i.parts[n](o.parts[n]);for(;n<o.parts.length;n++)i.parts.push(v(o.parts[n]));i.parts.length>o.parts.length&&(i.parts.length=o.parts.length)}else{var s=[];for(n=0;n<o.parts.length;n++)s.push(v(o.parts[n]));r[o.id]={id:o.id,refs:1,parts:s}}}}function m(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function v(t){var e,o,i=document.querySelector("style["+p+'~="'+t.id+'"]');if(i){if(c)return d;i.parentNode.removeChild(i)}if(h){var n=a++;i=l||(l=m()),e=b.bind(null,i,n,!1),o=b.bind(null,i,n,!0)}else i=m(),e=w.bind(null,i),o=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else o()}}var y=function(){var t=[];return function(e,o){return t[e]=o,t.filter(Boolean).join("\n")}}();function b(t,e,o,i){var n=o?"":i.css;if(t.styleSheet)t.styleSheet.cssText=y(e,n);else{var r=document.createTextNode(n),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function w(t,e){var o=e.css,i=e.media,n=e.sourceMap;if(i&&t.setAttribute("media",i),u.ssrId&&t.setAttribute(p,e.id),n&&(o+="\n/*# sourceURL="+n.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),t.styleSheet)t.styleSheet.cssText=o;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(o))}}},34:function(t){"use strict";t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjIiPjxwYXRoIGQ9Ik00IDB2NEgwVjB6TTggNHY0SDRWNHoiLz48L2c+PC9zdmc+"},203:function(e){"use strict";e.exports=t}},o={};function i(t){var n=o[t];if(void 0!==n)return n.exports;var r=o[t]={id:t,exports:{}};return e[t](r,r.exports,i),r.exports}i.m=e,function(){i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,{a:e}),e}}(),function(){i.d=function(t,e){for(var o in e)i.o(e,o)&&!i.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})}}(),function(){i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}(),function(){i.p=""}(),function(){i.b=document.baseURI||self.location.href}();var n={};return function(){"use strict";if(i.r(n),i.d(n,{default:function(){return Y}}),"undefined"!==typeof window){var t=window.document.currentScript,e=t&&t.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(i.p=e[1])}var o=i(203);const r={class:"color-picker"},s={key:0},l={class:"preview-block"};function a(t,e,i,n,a,c){const d=(0,o.resolveComponent)("picker-angle"),u=(0,o.resolveComponent)("picker-body"),p=(0,o.resolveComponent)("picker-gradient"),h=(0,o.resolveComponent)("picker-color-panel"),g=(0,o.resolveComponent)("picker-opacity"),f=(0,o.resolveComponent)("picker-preview"),m=(0,o.resolveComponent)("picker-output");return(0,o.openBlock)(),(0,o.createElementBlock)("div",r,["gradient"===i.mode?((0,o.openBlock)(),(0,o.createElementBlock)("div",s,[(0,o.createVNode)(d,{onChange:c.changeAngle,"point-color":i.anglePointColor,"circle-color":i.angleCircleColor},null,8,["onChange","point-color","circle-color"])])):(0,o.createCommentVNode)("",!0),(0,o.createVNode)(u,{class:"color-picker__body",color:a.shade.rgb,onInput:c.colorInput,width:i.width,height:i.pickerBodyHeight,"point-size":i.pickerBodyPointSize,"point-color":i.pickerBodyPointColor},null,8,["color","onInput","width","height","point-size","point-color"]),"gradient"===i.mode?((0,o.openBlock)(),(0,o.createBlock)(p,{key:1,width:i.width,height:i.optionBlockHeight,"point-size":i.pickerGradientPointSize,class:"color-picker__gradient",color:c.normalColor,onUpdate:c.setGradientPoints},null,8,["width","height","point-size","color","onUpdate"])):(0,o.createCommentVNode)("",!0),(0,o.createVNode)(h,{onInput:e[0]||(e[0]=t=>a.shade=t),class:"color-picker__color-panel",width:i.width,height:i.optionBlockHeight,"point-size":i.pickerOptionPointSize,"point-color":i.pickerOptionPointColor},null,8,["width","height","point-size","point-color"]),(0,o.createVNode)(g,{class:"color-picker__opacity",onInput:e[1]||(e[1]=t=>a.opacity=t),width:i.width,height:i.optionBlockHeight,"point-size":i.pickerOptionPointSize,"point-color":i.pickerOptionPointColor,color:c.normalColor},null,8,["width","height","point-size","point-color","color"]),(0,o.createElementVNode)("div",l,[(0,o.createVNode)(f,{background:c.previewBackground,width:i.previewWidth,height:i.previewHeight},null,8,["background","width","height"]),"normal"===i.mode?((0,o.openBlock)(),(0,o.createBlock)(m,{key:0,color:c.previewBackground,outputType:i.outputTextType},null,8,["color","outputType"])):(0,o.createCommentVNode)("",!0)])])}var c={methods:{rgba2hex(t){let e,o=t.replace(/\s/g,"").match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),i=(o&&o[4]||"").trim(),n=o?(256|o[1]).toString(16).slice(1)+(256|o[2]).toString(16).slice(1)+(256|o[3]).toString(16).slice(1):t;return e=""!==i?i:"01",e=(255*e|256).toString(16).slice(1),n+=e,n},pointsToGradient(t,e,o){if(t=t.sort(((t,e)=>t.position-e.position)),"linear"===e){let e="";for(const o of t)e+=`${o.color} ${o.position}%,`;return e=e.substring(0,e.length-1),`linear-gradient(${o}deg, ${e})`}if("radial"===e){let e="";for(const o of t)e+=`${o.color} ${o.position}%,`;return e=e.substring(0,e.length-1),`radial-gradient(${e})`}},getRotationCoordinate(t){const e=t*(-Math.PI/180);return{x1:`${Math.round(50+50*Math.sin(e))}%`,y1:`${Math.round(50+50*Math.cos(e))}%`,x2:`${Math.round(50+50*Math.sin(e+Math.PI))}%`,y2:`${Math.round(50+50*Math.cos(e+Math.PI))}%`}},pointsToSvgDefs(t,e,o=0){const i=this.getRotationCoordinate(o);let n="";for(let r of t)n+=`<stop offset="${r.position}%" stop-color="${r.color}"/>`;return`<${e}Gradient x1="${i.x1}" x2="${i.x2}" y1="${i.y1}" y2="${i.y2}">\n        ${n}</${e}Gradient>`}}};const d=["width","height"];function u(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{id:"picker-body",onMousedown:e[0]||(e[0]=(...t)=>s.mouseDown&&s.mouseDown(...t)),onMouseup:e[1]||(e[1]=(...t)=>s.mouseUp&&s.mouseUp(...t)),style:(0,o.normalizeStyle)(s.calculatedStyle)},[(0,o.createElementVNode)("div",{class:"picker-body__pointer",style:(0,o.normalizeStyle)(s.pointStyle)},null,4),(0,o.createElementVNode)("canvas",{width:i.width,height:i.height,ref:"canvas"},null,8,d)],36)}var p={props:{color:{type:String,default:"green"},modelValue:{type:Object,default:{top:20,left:20}},width:{type:[String,Number],default:300},height:{type:[String,Number],default:300},pointSize:{type:[String,Number],default:10},pointColor:{type:String,default:"orange"}},data(){return{clicked:!1,pointerPosition:this.modelValue,body:null,selectedColor:null}},computed:{calculatedStyle(){return{width:this.width+"px",height:this.height+"px"}},pointStyle(){return{top:this.pointerPosition.top+"px",left:this.pointerPosition.left+"px",width:this.pointSize+"px",height:this.pointSize+"px",border:`2px solid ${this.pointColor}`}}},watch:{color(){this.setCanvas();const t=document.getElementsByClassName("picker-body__pointer")[0],{left:e,top:o}=t.getBoundingClientRect();this.setSelectedColor(e,o)}},mounted(){this.body=document.getElementById("picker-body"),document.body.addEventListener("mouseup",(()=>{this.clicked=!1})),this.setCanvas()},methods:{setCanvas(){const t=this.$refs.canvas,e=t.getContext("2d"),o=e.createLinearGradient(0,t.height/2,t.width,t.height),i=e.createLinearGradient(t.width/2,0,t.width/2,t.height);o.addColorStop(0,"white"),o.addColorStop(.6,this.color),i.addColorStop(0,"transparent"),i.addColorStop(1,"black"),e.fillStyle=o,e.fillRect(0,0,t.width,t.height),e.fillStyle=i,e.fillRect(0,0,t.width,t.height)},mouseDown(t){if(Array.from(t.target.classList).includes("picker-body__pointer"))return;this.clicked=!0;const{x:e,y:o}=t;this.setPointerOnMouse(e,o),this.setSelectedColor(e,o),document.body.onmousemove=this.mouseMove},mouseMove(t){if(this.clicked){const{x:e,y:o}=t;this.setPointerOnMouse(e,o),this.setSelectedColor(e,o)}},mouseUp(t){this.clicked=!1,document.body.onmousemove=null},setSelectedColor(t,e){const{x:o,y:i}=this.$refs.canvas.getBoundingClientRect();t>this.$refs.canvas.width+o&&(t=this.$refs.canvas.width+o-10),e>this.$refs.canvas.height+i&&(e=this.$refs.canvas.height+i-10),t<o&&(t=o),e<i&&(e=i);const n=this.$refs.canvas.getContext("2d"),r=n.getImageData(t-o,e-i,1,1).data;var s="#"+("000000"+this.rgbToHex(r[0],r[1],r[2])).slice(-6);this.selectedColor={hex:s,rgb:`rgb(${r[0]}, ${r[1]}, ${r[2]})`,r:r[0],g:r[1],b:r[2]},this.$emit("input",this.selectedColor)},rgbToHex(t,e,o){if(t>255||e>255||o>255)throw"Invalid color component";return(t<<16|e<<8|o).toString(16)},setPointerOnMouse(t,e){const{left:o,top:i,width:n,height:r}=this.$refs.canvas.getBoundingClientRect();t>o+n-10&&(t=o+n-15),t<o&&(t=o),e>=i+r-10&&(e=i+r-15),e<i&&(e=i);const s=e-i,l=t-o;this.pointerPosition={top:s,left:l}}}},h=(i(55),i(744));const g=(0,h.Z)(p,[["render",u]]);var f=g;const m=["width"];function v(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"color-block",style:(0,o.normalizeStyle)(s.computedStyle),onMousedown:e[0]||(e[0]=(...t)=>s.mouseDown&&s.mouseDown(...t)),onMouseup:e[1]||(e[1]=(...t)=>s.mouseUp&&s.mouseUp(...t))},[(0,o.createElementVNode)("canvas",{ref:"canvasColor",width:i.width,class:"color-canvas"},null,8,m),(0,o.createElementVNode)("div",{class:"color-pointer",style:(0,o.normalizeStyle)(s.pointStyle)},null,4)],36)}var y={props:{width:{type:[String,Number],default:350},height:{type:[String,Number],default:15},pointSize:{type:[String,Number],default:11},pointColor:{type:String,default:"white"}},data(){return{clicked:!1,pointerPosition:{left:0},body:null}},mounted(){this.body=document.getElementsByClassName("color-block")[0],document.body.addEventListener("mouseup",(()=>{this.clicked=!1})),this.setCanvas()},computed:{pointStyle(){return{left:this.pointerPosition.left+"px",width:this.pointSize+"px",height:this.pointSize+"px",border:`2px solid ${this.pointColor}`}},computedStyle(){return{width:this.width+"px",height:this.height+"px"}},value(){const t=this.$refs.canvasColor.getContext("2d"),e=t.getImageData(this.pointerPosition.left,1,1,1).data;return console.log(e,this.pointerPosition.left),{rgb:`rgb(${e[0]}, ${e[1]}, ${e[2]})`,r:e[0],g:e[1],b:e[2]}}},methods:{setCanvas(){const t=this.$refs.canvasColor.getContext("2d"),e=t.createLinearGradient(0,this.height/2,this.$refs.canvasColor.width,this.height/2);e.addColorStop(0,"red"),e.addColorStop(.16666,"orange"),e.addColorStop(.33332,"yellow"),e.addColorStop(.49998,"green"),e.addColorStop(.66664,"blue"),e.addColorStop(.8333,"indigo"),e.addColorStop(1,"violet"),t.fillStyle=e,t.fillRect(0,0,this.$refs.canvasColor.width,this.$refs.canvasColor.height)},mouseDown(t){const{x:e}=t;this.clicked=!0,document.body.onmousemove=this.mouseMove,this.setPointerOnMouse(e)},mouseMove(t){if(this.clicked){const{x:e}=t;this.setPointerOnMouse(e),this.$emit("input",this.value)}},mouseUp(){this.clicked=!1,document.onmousemove=null},setPointerOnMouse(t){const{left:e,width:o}=this.$refs.canvasColor.getBoundingClientRect();t>e+o&&(t=e+o-5),t<e&&(t=e+5);const i=t-e-5;this.pointerPosition={left:i}}}};i(831);const b=(0,h.Z)(y,[["render",v],["__scopeId","data-v-247fc8f2"]]);var w=b;const k=["width","height"],C=["onMousedown","onDblclick"];function x(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"gradient-background",style:(0,o.normalizeStyle)({width:i.width+"px",height:i.height+"px"}),onMousedown:e[3]||(e[3]=(...t)=>s.mouseDown&&s.mouseDown(...t)),onMouseup:e[4]||(e[4]=(...t)=>s.mouseUp&&s.mouseUp(...t)),onKeydown:e[5]||(e[5]=(0,o.withKeys)((0,o.withModifiers)(((...t)=>s.deletePoint&&s.deletePoint(...t)),["stop"]),["delete"]))},[(0,o.createElementVNode)("canvas",{ref:"canvasGradient",width:i.width,height:i.height,class:"color-canvas",onClick:e[0]||(e[0]=(...t)=>s.createPoint&&s.createPoint(...t)),onMouseup:e[1]||(e[1]=(...t)=>s.mouseUp&&s.mouseUp(...t))},null,40,k),((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(r.points,((t,i)=>((0,o.openBlock)(),(0,o.createElementBlock)("div",{key:i,class:"gradient-pointer",style:(0,o.normalizeStyle)(s.pointStyle(t,r.selectPoint===t)),onMousedown:e=>{s.mouseDown(e),s.selectionPoint(t)},onMouseup:e[2]||(e[2]=(...t)=>s.mouseUp&&s.mouseUp(...t)),onDblclick:(0,o.withModifiers)((e=>s.deletePoint(t)),["stop"])},null,44,C)))),128))],36)}var S={props:{width:{type:[String,Number],default:350},height:{type:[String,Number],default:15},pointSize:{type:[String,Number],default:11},pointActiveColor:{type:String,default:"orange"},pointInactiveColor:{type:String,default:"white"},color:{type:String,default:null}},data(){return{clicked:!1,pointerPosition:{left:0},selectPoint:null,body:null,points:[{id:1,color:"red",position:0},{id:2,color:"blue",position:97}]}},watch:{color(){if(this.selectPoint){const t=this.points.filter((t=>t.id===this.selectPoint.id))[0];t.color=this.color,this.setCanvasGradient(),this.$emit("update",this.points)}}},mounted(){this.body=document.getElementById("picker-body"),this.setCanvasGradient(),document.addEventListener("mouseup",(()=>{this.clicked=!1}))},methods:{getLastId(){return this.points.map((t=>t.id)).sort(((t,e)=>e-t))[0]},deletePoint(t){this.points=this.points.filter((e=>e.id!==t.id)),this.selectPoint=null,this.setCanvasGradient()},createPoint(t){const{x:e}=t,{left:o}=this.$refs.canvasGradient.getBoundingClientRect(),i=this.width/100,n=(e-o)/i;this.points.push({id:this.getLastId()+1,color:"black",position:n}),this.selectionPoint(this.points[this.points.length-1]),this.setCanvasGradient(),this.$emit("update",this.points)},selectionPoint(t){this.selectPoint=t},setCanvasGradient(){const t=this.$refs.canvasGradient.getContext("2d"),e=t.createLinearGradient(0,this.height/2,this.$refs.canvasGradient.width,this.height/2);for(const o of this.points)e.addColorStop(o.position/100,o.color);t.fillStyle=e,t.fillRect(0,0,this.$refs.canvasGradient.width,this.$refs.canvasGradient.height)},pointStyle(t,e){return{left:t.position+"%",width:this.pointSize+"px",height:this.pointSize+"px",backgroundColor:e?this.pointActiveColor:this.pointInactiveColor}},mouseDown(t){this.clicked=!0,document.body.onmousemove=this.mouseMove},mouseMove(t){if(this.clicked){const{x:e}=t;this.setPointerOnMouse(e)}},mouseUp(){this.clicked=!1,document.onmousemove=null},setPointerOnMouse(t){const{left:e,width:o}=this.$refs.canvasGradient.getBoundingClientRect();let i=0;if(t<e)i=0;else if(t>e+o)i=97;else{const o=this.width/100;i=(t-e)/o}this.selectPoint&&this.clicked&&(this.points.filter((t=>t.id===this.selectPoint.id))[0].position=i,this.setCanvasGradient(),this.$emit("update",this.points))}}};i(683);const M=(0,h.Z)(S,[["render",x],["__scopeId","data-v-927334b6"]]);var P=M;function $(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"opacity-background",style:(0,o.normalizeStyle)({width:i.width+"px",height:i.height+"px"}),onMousedown:e[2]||(e[2]=(...t)=>s.mouseDown&&s.mouseDown(...t)),onMouseup:e[3]||(e[3]=(...t)=>s.mouseUp&&s.mouseUp(...t))},[(0,o.createElementVNode)("div",{class:"opacity-block",style:(0,o.normalizeStyle)(s.computedStyle),onMousedown:e[0]||(e[0]=(...t)=>s.mouseDown&&s.mouseDown(...t)),onMouseup:e[1]||(e[1]=(...t)=>s.mouseUp&&s.mouseUp(...t))},[(0,o.createElementVNode)("div",{class:"opacity-pointer",style:(0,o.normalizeStyle)(s.pointStyle)},null,4)],36)],36)}var _={props:{color:{type:String,default:"red"},width:{type:[String,Number],default:350},height:{type:[String,Number],default:15},pointSize:{type:[String,Number],default:11},pointColor:{type:String,default:"white"}},data(){return{clicked:!1,pointerPosition:{left:0},body:null}},mounted(){this.body=document.getElementById("picker-body"),document.body.addEventListener("mouseup",(()=>{this.clicked=!1}))},computed:{pointStyle(){return{left:this.pointerPosition.left+"px",width:this.pointSize+"px",height:this.pointSize+"px",border:`2px solid ${this.pointColor}`}},computedStyle(){return{background:`linear-gradient(to right, rgba(0,0,0, 0) 1%, ${this.color} 100%)`,width:this.width+"px",height:this.height+"px"}},value(){return this.pointerPosition.left/(this.width-15)}},methods:{mouseDown(t){const{x:e}=t;this.clicked=!0,document.body.onmousemove=this.mouseMove,this.setPointerOnMouse(e)},mouseMove(t){if(this.clicked){const{x:e}=t;this.setPointerOnMouse(e)}},mouseUp(){this.clicked=!1,document.onmousemove=null},setPointerOnMouse(t){const{left:e,width:o}=this.body.getBoundingClientRect();t>e+o-10&&(t=e+o-15),t<e&&(t=e);const i=t-e;this.pointerPosition={left:i},this.$emit("input",this.value)}}};i(364);const B=(0,h.Z)(_,[["render",$],["__scopeId","data-v-59204c07"]]);var N=B;const z={class:"output-block"},I=["value"];function E(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",z,[(0,o.createElementVNode)("input",{class:"output-block__input",type:"text",value:s.outputText,readonly:""},null,8,I)])}var V={mixins:[c],props:{color:{type:String,default:"#FF000000"},outputType:{type:String,default:"rgba"}},computed:{outputText(){return"hex-alpha"===this.outputType?"#"+this.rgba2hex(this.color).toUpperCase():this.color}}};i(196);const G=(0,h.Z)(V,[["render",E]]);var T=G;function D(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{key:r.updateKey,class:"preview",style:(0,o.normalizeStyle)({width:i.width+"px",height:i.height+"px",background:i.background})},null,4)}var U={props:{background:{type:String,default:"red"},width:{type:[String,Number],default:150},height:{type:[String,Number],default:150}},data(){return{updateKey:0}},watch:{background(){this.updateKey+=1}}};i(721);const O=(0,h.Z)(U,[["render",D]]);var Z=O;function R(t,e,i,n,r,s){return(0,o.openBlock)(),(0,o.createElementBlock)("div",{class:"angle-block",ref:"angleCircle",style:(0,o.normalizeStyle)({borderColor:i.circleColor}),onMousedown:e[0]||(e[0]=(...t)=>s.mouseDown&&s.mouseDown(...t))},[(0,o.createElementVNode)("div",{class:"angle-point",style:(0,o.normalizeStyle)({background:i.pointColor,borderColor:i.pointColor,left:r.left+"px",top:r.top+"px"})},null,4)],36)}var L={props:{pointColor:{type:String,default:"orange"},circleColor:{type:String,default:"orange"}},data(){return{left:12.25,top:0,clicked:!1}},computed:{center(){const{x:t,y:e,width:o,height:i}=this.$refs.angleCircle.getBoundingClientRect();return{xCenter:t+o/2,yCenter:e+i/2}},angle(){const t=10*(10-this.top)+0*(this.left-10),e=Math.sqrt(100+Math.pow(0,2)),o=Math.sqrt(Math.pow(10-this.top,2)+Math.pow(this.left-10,2));let i=this.left<10?-1:1;return i*Math.acos(t/(e*o))*(180/Math.PI)}},mounted(){document.onmouseup=this.mouseUp},methods:{mouseDown(){this.clicked=!0,document.body.onmousemove=this.mouseMove},mouseUp(){this.clicked=!1,document.body.onmousemove=null},mouseMove(t){if(!this.clicked)return;const{x:e,y:o}=t,i=10,n=this.calculateYPointsPosition(e,o,i),r=[];r.push([n[0],this.getXPosition(n[0],e,o)]),r.push([n[1],this.getXPosition(n[1],e,o)]);const s=this.getClosestPoint(r,e,o),l=this.$refs.angleCircle.getBoundingClientRect();s&&(this.top=s[0]-l.y-6,this.left=s[1]-l.x-6),this.$emit("change",this.angle)},getClosestPoint(t,e,o){let i,n=9999999;for(let r of t){let t=Math.sqrt(Math.pow(e-r[1],2)+Math.pow(o-r[0],2));t<n&&(n=t,i=r)}return i},calculateYPointsPosition(t,e,o){const i=(this.center.xCenter-t)/(this.center.yCenter-e),n=this.center.yCenter*this.center.yCenter-o*o/(i*i+1),r=4*this.center.yCenter*this.center.yCenter-4*n,s=(2*this.center.yCenter-Math.sqrt(r))/2,l=(2*this.center.yCenter+Math.sqrt(r))/2;return[s,l]},getXPosition(t,e,o){return(t-this.center.yCenter)*(e-this.center.xCenter)/(o-this.center.yCenter)+this.center.xCenter}}};i(909);const j=(0,h.Z)(L,[["render",R],["__scopeId","data-v-7ec0ecb2"]]);var H=j,A={name:"ColorPicker",components:{PickerBody:f,PickerOpacity:N,PickerPreview:Z,PickerColorPanel:w,PickerOutput:T,PickerGradient:P,PickerAngle:H},mixins:[c],props:{width:{type:[String,Number],default:300},pickerBodyHeight:{type:[String,Number],default:300},pickerBodyPointSize:{type:[String,Number],default:10},pickerBodyPointColor:{type:String,default:"orange"},optionBlockHeight:{type:[String,Number],default:15},pickerOptionPointSize:{type:[String,Number],default:7},pickerGradientPointSize:{type:[String,Number],default:12},pickerOptionPointColor:{type:String,default:"white"},previewWidth:{type:[String,Number],default:50},previewHeight:{type:[String,Number],default:50},anglePointColor:{type:String,default:"orange"},angleCircleColor:{type:String,default:"orange"},outputTextType:{type:String,default:"hex-alpha",validator(t){return["hex-alpha","rgba"].includes(t)}},outputValueType:{type:String,default:"string/rgba",validator(t){return["string/rgba","object","string/svg"].includes(t)}},mode:{type:String,default:"normal",validator(t){return["normal","gradient"].includes(t)}},gradientType:{type:String,default:"linear",validator(t){return["linear","radial"].includes(t)}}},data(){return{color:{r:255,b:0,g:0},opacity:1,shade:{rgb:"red"},angle:0,points:null}},computed:{previewBackground(){return"normal"===this.mode?`rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.opacity})`:"gradient"===this.mode&&this.points?this.pointsToGradient(this.points,this.gradientType,this.angle):void 0},normalColor(){return`rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${this.opacity})`}},methods:{setGradientPoints(t){this.points=t,this.emitValue()},changeAngle(t){this.angle=t,this.emitValue()},opacityInput(t){this.opacity=t,this.emitValue()},shadeInput(t){this.shade=t,this.emitValue()},colorInput(t){this.color=t,this.emitValue()},emitValue(){return"string/rgba"===this.outputValueType&&this.$emit("input",this.previewBackground),"object"===this.outputValueType&&("normal"===this.mode&&(this.color.a=this.opacity,this.$emit("input",this.color)),"gradient"===this.mode&&this.$emit("input",{points:this.points,angle:this.angle})),"string/svg"===this.outputValueType&&"gradient"===this.mode&&this.$emit("input",this.pointsToSvgDefs(this.points,this.gradientType,this.angle)),this.previewBackground}}};i(390);const q=(0,h.Z)(A,[["render",a]]);var W=q;const K=t=>{K.installed||(K.installed=!0,t.component(W.name,W))};"undefined"!==typeof window&&window.Vue&&K(window.Vue);var X={install:K,ColorPicker:W},Y=X}(),n}()}));
//# sourceMappingURL=vue-gradient-component.umd.min.js.map