vue-color-picker-simple/dist/index.js

vue, color-picker, colorPicker

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["vue-color-picker.js"]=t():e["vue-color-picker.js"]=t()}(window,(function(){return function(e){var t={};function s(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,s),n.l=!0,n.exports}return s.m=e,s.c=t,s.d=function(e,t,i){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(i,n,function(t){return e[t]}.bind(null,n));return i},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=0)}([function(e,t,s){"use strict";let i,n;function o(e){i&&n||(i=document.createElement("canvas"),i.width=1,i.height=1,i.style.width="1px",i.style.height="1px",n=i.getContext("2d")),n.clearRect(0,0,1,1),n.beginPath(),n.fillStyle=e,n.fillRect(0,0,1,1);const t=n.getImageData(0,0,1,1).data;let s=t[3]/255;return s=parseFloat(s.toFixed(2)),{r:t[0],g:t[1],b:t[2],a:s}}function a(e){let t=parseInt(e);return isNaN(t)?0:t}function r(){let e,t,s;if(1===arguments.length){const i=arguments[0];e=i.h,t=i.s,s=i.v}else[e,t,s]=arguments;e*=360;let i=0,n=0,o=0;const a=Math.floor(e/60),r=e/60-a,h=s*(1-t),l=s*(1-r*t),c=s*(1-(1-r)*t);return i=s,n=c,o=h,0===a&&(i=s,n=c,o=h),1===a&&(i=l,n=s,o=h),2===a&&(i=h,n=s,o=c),3===a&&(i=h,n=l,o=s),4===a&&(i=c,n=h,o=s),5===a&&(i=s,n=h,o=l),i=Math.round(255*i),n=Math.round(255*n),o=Math.round(255*o),{r:i,g:n,b:o}}function h(e,t){let s=t;for(;s;){if(s===e)return!0;s=s.parentNode}return!1}s.r(t),s.d(t,"ColorPicker",(function(){return p})),window.getRgba=o;var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(e[i]=s[i])}return e},c={props:{visible:Boolean,posX:Number,posY:Number,value:String},data:()=>({rgba:{r:0,g:0,b:0,a:1},hsv:{h:1,s:1,v:1},hex:"",hsvcPos:{x:0,y:0},hcPos:{x:0},alphaPos:{x:0},panelRect:{width:0,height:0},panelPos:{x:0,y:0}}),watch:{rgba:{handler(){const e=1===this.rgba.a?"#"+this.hex:`rgba(${this.rgba.r},${this.rgba.g},${this.rgba.b},${this.rgba.a})`;this.$emit("change",e)},deep:!0},visible(){this.visible&&this.measure()}},mounted(){this.init(),this.$nextTick(()=>{const{width:e,height:t}=this.$refs.panel.getBoundingClientRect();this.panelRect={width:e,height:t},this.measure()})},methods:{init(){this.rgba=o(this.value),this.updateHex(),this.updateHsv(),this.updateHsvcPos(),this.updateHcPos(),this.updateAlphaPos()},close(){this.$emit("close")},measure(){let{innerWidth:e,innerHeight:t}=window;const{width:s,height:i}=this.panelRect;t-=i,e-=s,[this.panelPos.x,this.panelPos.y]=[Math.min(this.posX,e-15),Math.min(this.posY,t-15)]},updateHex(){const{r:e,g:t,b:s}=this.rgba,i=function(e,t,s){return 1==(e=e.toString(16)).length&&(e="0"+e),1==(t=t.toString(16)).length&&(t="0"+t),1==(s=s.toString(16)).length&&(s="0"+s),(e+t+s).toUpperCase()}(e,t,s);this.hex=i},updateRgbByHex(){const e=(t="#"+this.hex,{r:parseInt(t.substr(0,2),16),g:parseInt(t.substr(2,2),16),b:parseInt(t.substr(4,2),16)});var t;this.rgba=l(this.rgba,e)},updateRgbByHsv(){const{h:e,s:t,v:s}=this.hsv,i=r(e,t,s);this.rgba=l(this.rgba,i)},updateHsv(){const{r:e,g:t,b:s}=this.rgba;this.hsv=function(e,t,s){e=a(e),t=a(t),s=a(s);const i=Math.max(e,t,s),n=Math.min(e,t,s);let o=0,r=0,h=0;const l=i-n;return o=i===n?0:e===i?t>=s?60*(t-s)/l:60*(t-s)/l+360:t===i?60*(s-e)/l+120:60*(e-t)/l+240,o>360?o-=360:o<0&&(o+=360),r=l/i,h=i/255,o/=360,r=isNaN(r)?0:r,{h:o,s:r,v:h}}(e,t,s)},updateHsvcPos(){const{width:e,height:t}=this.$refs.hsvp.getBoundingClientRect(),{s:s,v:i}=this.hsv,n=s*e-6,o=(1-i)*t-6;this.hsvcPos={x:n,y:o}},updateHcPos(){const{h:e}=this.hsv,{width:t}=this.$refs.hp.getBoundingClientRect(),s=e*t-2;this.hcPos.x=s},updateAlphaPos(){const{a:e}=this.rgba,{width:t}=this.$refs.alpha.getBoundingClientRect(),s=e*t-2;this.alphaPos.x=s},dragHsv(e){e.preventDefault();const t=e=>{const{top:t,left:s,width:i,height:n}=this.$refs.hsvp.getBoundingClientRect();let o=e.pageX-s-6,a=e.pageY-t-6;o<-6&&(o=-6),o>i-6&&(o=i-6),a<-6&&(a=-6),a>n-6&&(a=n-6);const r=(o+6)/i,h=1-(a+6)/n;this.hsv.s=r,this.hsv.v=h,this.hsvcPos.x=o,this.hsvcPos.y=a,this.updateRgbByHsv(),this.updateHex()};t(e),this.bindDragger(t)},dragHp(e){e.preventDefault();const{left:t,width:s}=this.$refs.hp.getBoundingClientRect(),i=e=>{let i=e.pageX-t-2;i<-2&&(i=-2),i>s-2&&(i=s-2);let n=(i+2)/s;this.hsv.h=n,this.hcPos.x=i,this.updateRgbByHsv(),this.updateHex()};i(e),this.bindDragger(i)},dragAlpha(e){e.preventDefault();const{left:t,width:s}=this.$refs.alpha.getBoundingClientRect(),i=e=>{let i=e.pageX-t-2;i<-2&&(i=-2),i>s-2&&(i=s-2),this.rgba.a=(i+2)/s,this.alphaPos.x=i};i(e),this.bindDragger(i)},bindDragger(e){const t=()=>{window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t),window.removeEventListener("mouseleave",t)};window.addEventListener("mousemove",e),window.addEventListener("mouseup",t),window.addEventListener("mouseleave",t)},onRgbaChange(e,t){e=a(e),this.rgba[t]=e,this.updateHex(),this.updateHsv(),this.updateHsvcPos(),this.updateHcPos(),this.updateAlphaPos()},onHexChange(e){const t=o("#"+e.target.value);this.rgba=l(this.rgba,t)},renderSVPanel(){const e=this.$createElement,{x:t,y:s}=this.hsvcPos;return e("div",{style:{backgroundColor:this.hsvpBg},class:"ew-hsvp",ref:"hsvp",on:{mousedown:this.dragHsv}},[e("div",{class:"ew-hsvp-m ew-hsvp-m2"}),e("div",{class:"ew-hsvp-m ew-hsvp-m1"}),e("span",{class:"ew-hsvc",style:{left:t+"px",top:s+"px"}})])},renderHPanel(){const e=this.$createElement;return e("div",{class:"ew-hp",ref:"hp",on:{mousedown:this.dragHp}},[e("span",{style:{left:this.hcPos.x+"px"},class:"ew-hpc"})])},renderAlphaPanel(){const e=this.$createElement;return e("div",{class:"ew-alpha",ref:"alpha",on:{mousedown:this.dragAlpha}},[e("div",{class:"ew-alpha-bg"},[e("span",{style:{left:this.alphaPos.x+"px"},class:"ew-alphac"})])])},renderRgbaPanel(){const e=this.$createElement;return e("div",{class:"ew-cip-row"},[e("div",{class:"ew-cip-row-sub"},["R:",e("input",{domProps:{value:this.rgba.r},on:{input:e=>this.onRgbaChange(e.target.value,"r")},class:"ew-cip-i-r ew-cip-i"})]),e("div",{class:"ew-cip-row-sub"},["G:",e("input",{domProps:{value:this.rgba.g},on:{input:e=>this.onRgbaChange(e.target.value,"g")},class:"ew-cip-i-g ew-cip-i"})]),e("div",{class:"ew-cip-row-sub"},["B:",e("input",{domProps:{value:this.rgba.b},on:{input:e=>this.onRgbaChange(e.target.value,"b")},class:"ew-cip-i-b ew-cip-i"})]),e("div",{class:"ew-cip-row-sub"},["A:",e("input",{domProps:{value:parseFloat(this.rgba.a.toFixed(2))},on:{input:e=>this.onRgbaChange(e.target.value,"a")},class:"ew-cip-i-a ew-cip-i"})])])},renderHexPanel(){const e=this.$createElement,{r:t,g:s,b:i,a:n}=this.rgba,o=`rgba(${t},${s},${i},${n})`;return e("div",{class:"ew-cip-row2 ew-cip-row"},[e("div",{class:"ew-cip-row-sub"},["HEX:#",e("input",{domProps:{value:this.hex},on:{input:this.onHexChange},class:"ew-cip-hex-input"})]),e("div",{class:"ew-cip-row-sub ew-cip-pre"},[e("div",{class:"ew-cip-pre-bg",style:{backgroundColor:o}})]),e("button",{class:"ew-cp-row-save",on:{click:this.close}},["确定"])])}},computed:{hsvpBg(){const{r:e,g:t,b:s}=r(this.hsv.h,1,1);return`rgb(${e},${t},${s})`}},render(){const e=arguments[0],{x:t,y:s}=this.panelPos;return e("div",{directives:[{name:"show",value:this.visible}],ref:"panel",style:{left:t+"px",top:s+"px"},class:"ew-cp-panel"},[this.renderSVPanel(),this.renderHPanel(),this.renderAlphaPanel(),e("div",{class:"ew-cpi"},[this.renderRgbaPanel(),this.renderHexPanel()])])}},p={props:{value:String,disabled:Boolean},data:()=>({showPanel:!1,posX:0,posY:0}),model:{prop:"value",event:"change"},methods:{onClickDocument(e){this._com&&(h(this._com.$el,e.target)||h(this.$el,e.target)||!this.showPanel||this.close())},change(e){this.$emit("change",e)},onClick(){this.showPanel||(this.measure(),this.open(),this.showPanel=!0)},open(){this.$emit("onOpen")},measure(){const{x:e,y:t,height:s}=this.$refs.button.getBoundingClientRect();this.posX=e,this.posY=t+s},togglePanel(){this.$createElement;if(!this._com){const e=document.createElement("div");e.style.position="absolute",e.style.left=0,e.style.top=0,document.body.appendChild(e);const t=document.createElement("div");e.appendChild(t);const s=this;this._com=new this.$root.constructor({el:t,render(){const e=arguments[0],t={props:{visible:s.showPanel,posX:s.posX,posY:s.posY,value:s.value},on:{change:s.change,close:s.close}};return e(c,t)}})}this._com.$forceUpdate()},close(){this.showPanel=!1,this.$emit("onClose",this.value)},renderDisabledMask(){const e=this.$createElement;return this.disabled?e("div",{class:"ew-disabled-mask"}):null}},watch:{showPanel(){this.togglePanel()}},mounted(){document.addEventListener("click",this.onClickDocument)},beforeDestroy(){document.removeEventListener("click",this.onClickDocument)},render(){const e=arguments[0];return e("div",{class:"ew-cp-trigger",ref:"button"},[this.renderDisabledMask(),e("span",{on:{click:this.onClick},class:"ew-cp-alpha-bg"},[e("span",{class:"ew-cp-color-bg",style:{backgroundColor:this.value}},[e("i",{class:"ew-cp-color-icon"},[e("svg",{attrs:{t:"1569127389612",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"1109",width:"20",height:"20"}},[e("path",{attrs:{d:"M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z","p-id":"1110",fill:"#fff"}})])])])])])}};t.default={install(e){e.component("ColorPicker",p)}}}])}));