You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5 lines
33 KiB
5 lines
33 KiB
import{d as F,o as h,f as C,q as g,h as R,g as x,c as M,K as fe,y as K,a5 as be,s as L,x as me,F as A,r as O,I as B,M as Ve,a6 as je,D as q,B as j,v as ve,t as V,Q as Ne,a as N,A as ze,p as Ce,z as _e,b as k,e as S,k as ce,n as D,J as Ge,u as ue,a7 as W,w as We,a2 as Xe}from"./index-bVOhw2NF.js";import{_ as Ye}from"./Slider-C2GzLvgH.js";import{_ as Ke}from"./Tooltip-C_3SXSAr.js";/*!
|
|
* vue-color-kit v1.0.6
|
|
* (c) 2023
|
|
* @license MIT
|
|
*/function E(e){let t={r:0,g:0,b:0,a:1};/#/.test(e)?t=qe(e):/rgb/.test(e)?t=de(e):typeof e=="string"?t=de(`rgba(${e})`):Object.prototype.toString.call(e)==="[object Object]"&&(t=e);const{r:o,g:n,b:s,a}=t,{h:l,s:r,v:i}=Je(t);return{r:o,g:n,b:s,a:a===void 0?1:a,h:l,s:r,v:i}}function J(e){const t=document.createElement("canvas"),o=t.getContext("2d"),n=e*2;return t.width=n,t.height=n,o.fillStyle="#ffffff",o.fillRect(0,0,n,n),o.fillStyle="#ccd5db",o.fillRect(0,0,e,e),o.fillRect(e,e,e,e),t}function U(e,t,o,n,s,a){const l=e==="l",r=t.createLinearGradient(0,0,l?o:0,l?0:n);r.addColorStop(.01,s),r.addColorStop(.99,a),t.fillStyle=r,t.fillRect(0,0,o,n)}function Ue({r:e,g:t,b:o},n){const s=l=>("0"+Number(l).toString(16)).slice(-2),a=`#${s(e)}${s(t)}${s(o)}`;return n?a.toUpperCase():a}function qe(e){e=e.slice(1);const t=o=>parseInt(o,16)||0;return{r:t(e.slice(0,2)),g:t(e.slice(2,4)),b:t(e.slice(4,6))}}function de(e){return typeof e=="string"?(e=(/rgba?\((.*?)\)/.exec(e)||["","0,0,0,1"])[1].split(","),{r:Number(e[0])||0,g:Number(e[1])||0,b:Number(e[2])||0,a:Number(e[3]?e[3]:1)}):e}function Je({r:e,g:t,b:o}){e=e/255,t=t/255,o=o/255;const n=Math.max(e,t,o),s=Math.min(e,t,o),a=n-s;let l=0;n===s?l=0:n===e?t>=o?l=60*(t-o)/a:l=60*(t-o)/a+360:n===t?l=60*(o-e)/a+120:n===o&&(l=60*(e-t)/a+240),l=Math.floor(l);let r=parseFloat((n===0?0:1-s/n).toFixed(2)),i=parseFloat(n.toFixed(2));return{h:l,s:r,v:i}}var Q=F({props:{color:{type:String,default:"#000000"},hsv:{type:Object,default:null},size:{type:Number,default:152}},emits:["selectSaturation"],data(){return{slideSaturationStyle:{}}},mounted(){this.renderColor(),this.renderSlide()},methods:{renderColor(){const e=this.$refs.canvasSaturation,t=this.size,o=e.getContext("2d");e.width=t,e.height=t,o.fillStyle=this.color,o.fillRect(0,0,t,t),U("l",o,t,t,"#FFFFFF","rgba(255,255,255,0)"),U("p",o,t,t,"rgba(0,0,0,0)","#000000")},renderSlide(){this.slideSaturationStyle={left:this.hsv.s*this.size-5+"px",top:(1-this.hsv.v)*this.size-5+"px"}},selectSaturation(e){const{top:t,left:o}=this.$el.getBoundingClientRect(),n=e.target.getContext("2d"),s=l=>{let r=l.clientX-o,i=l.clientY-t;r<0&&(r=0),i<0&&(i=0),r>this.size&&(r=this.size),i>this.size&&(i=this.size),this.slideSaturationStyle={left:r-5+"px",top:i-5+"px"};const p=n.getImageData(Math.min(r,this.size-1),Math.min(i,this.size-1),1,1),[u,b,m]=p.data;this.$emit("selectSaturation",{r:u,g:b,b:m})};s(e);const a=()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",a)};document.addEventListener("mousemove",s),document.addEventListener("mouseup",a)}}});const Qe={ref:"canvasSaturation"};function Ze(e,t,o,n,s,a){return h(),C("div",{class:"saturation",onMousedown:t[1]||(t[1]=R((...l)=>e.selectSaturation&&e.selectSaturation(...l),["prevent","stop"]))},[g("canvas",Qe,null,512),g("div",{style:e.slideSaturationStyle,class:"slide"},null,4)],32)}Q.render=Ze;Q.__file="src/color/Saturation.vue";var Z=F({props:{hsv:{type:Object,default:null},width:{type:Number,default:15},height:{type:Number,default:152}},emits:["selectHue"],data(){return{slideHueStyle:{}}},mounted(){this.renderColor(),this.renderSlide()},methods:{renderColor(){const e=this.$refs.canvasHue,t=this.width,o=this.height,n=e.getContext("2d");e.width=t,e.height=o;const s=n.createLinearGradient(0,0,0,o);s.addColorStop(0,"#FF0000"),s.addColorStop(.17*1,"#FF00FF"),s.addColorStop(.17*2,"#0000FF"),s.addColorStop(.17*3,"#00FFFF"),s.addColorStop(.17*4,"#00FF00"),s.addColorStop(.17*5,"#FFFF00"),s.addColorStop(1,"#FF0000"),n.fillStyle=s,n.fillRect(0,0,t,o)},renderSlide(){this.slideHueStyle={top:(1-this.hsv.h/360)*this.height-2+"px"}},selectHue(e){const{top:t}=this.$el.getBoundingClientRect(),o=e.target.getContext("2d"),n=a=>{let l=a.clientY-t;l<0&&(l=0),l>this.height&&(l=this.height),this.slideHueStyle={top:l-2+"px"};const r=o.getImageData(0,Math.min(l,this.height-1),1,1),[i,p,u]=r.data;this.$emit("selectHue",{r:i,g:p,b:u})};n(e);const s=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",s)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",s)}}});const et={ref:"canvasHue"};function tt(e,t,o,n,s,a){return h(),C("div",{class:"hue",onMousedown:t[1]||(t[1]=R((...l)=>e.selectHue&&e.selectHue(...l),["prevent","stop"]))},[g("canvas",et,null,512),g("div",{style:e.slideHueStyle,class:"slide"},null,4)],32)}Z.render=tt;Z.__file="src/color/Hue.vue";var ee=F({props:{color:{type:String,default:"#000000"},rgba:{type:Object,default:null},width:{type:Number,default:15},height:{type:Number,default:152}},emits:["selectAlpha"],data(){return{slideAlphaStyle:{},alphaSize:5}},watch:{color(){this.renderColor()},"rgba.a"(){this.renderSlide()}},mounted(){this.renderColor(),this.renderSlide()},methods:{renderColor(){const e=this.$refs.canvasAlpha,t=this.width,o=this.height,n=this.alphaSize,s=J(n),a=e.getContext("2d");e.width=t,e.height=o,a.fillStyle=a.createPattern(s,"repeat"),a.fillRect(0,0,t,o),U("p",a,t,o,"rgba(255,255,255,0)",this.color)},renderSlide(){this.slideAlphaStyle={top:this.rgba.a*this.height-2+"px"}},selectAlpha(e){const{top:t}=this.$el.getBoundingClientRect(),o=s=>{let a=s.clientY-t;a<0&&(a=0),a>this.height&&(a=this.height);let l=parseFloat((a/this.height).toFixed(2));this.$emit("selectAlpha",l)};o(e);const n=()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)}}});const ot={ref:"canvasAlpha"};function rt(e,t,o,n,s,a){return h(),C("div",{class:"color-alpha",onMousedown:t[1]||(t[1]=R((...l)=>e.selectAlpha&&e.selectAlpha(...l),["prevent","stop"]))},[g("canvas",ot,null,512),g("div",{style:e.slideAlphaStyle,class:"slide"},null,4)],32)}ee.render=rt;ee.__file="src/color/Alpha.vue";var te=F({props:{color:{type:String,default:"#000000"},width:{type:Number,default:100},height:{type:Number,default:30}},data(){return{alphaSize:5}},watch:{color(){this.renderColor()}},mounted(){this.renderColor()},methods:{renderColor(){const e=this.$el,t=this.width,o=this.height,n=this.alphaSize,s=J(n),a=e.getContext("2d");e.width=t,e.height=o,a.fillStyle=a.createPattern(s,"repeat"),a.fillRect(0,0,t,o),a.fillStyle=this.color,a.fillRect(0,0,t,o)}}});function st(e,t,o,n,s,a){return h(),C("canvas")}te.render=st;te.__file="src/color/Preview.vue";var oe=F({props:{suckerCanvas:{type:Object,default:null},suckerArea:{type:Array,default:()=>[]}},data(){return{isOpenSucker:!1,suckerPreview:null,isSucking:!1}},watch:{suckerCanvas(e){this.isSucking=!1,this.suckColor(e)}},methods:{openSucker(){this.isOpenSucker?this.keydownHandler({keyCode:27}):(this.isOpenSucker=!0,this.isSucking=!0,this.$emit("openSucker",!0),document.addEventListener("keydown",this.keydownHandler))},keydownHandler(e){e.keyCode===27&&(this.isOpenSucker=!1,this.isSucking=!1,this.$emit("openSucker",!1),document.removeEventListener("keydown",this.keydownHandler),document.removeEventListener("mousemove",this.mousemoveHandler),document.removeEventListener("mouseup",this.mousemoveHandler),this.suckerPreview&&(document.body.removeChild(this.suckerPreview),this.suckerPreview=null))},mousemoveHandler(e){const{clientX:t,clientY:o}=e,{top:n,left:s,width:a,height:l}=this.suckerCanvas.getBoundingClientRect(),r=t-s,i=o-n,u=this.suckerCanvas.getContext("2d").getImageData(Math.min(r,a-1),Math.min(i,l-1),1,1);let[b,m,v,$]=u.data;$=parseFloat(($/255).toFixed(2));const f=this.suckerPreview.style;Object.assign(f,{position:"absolute",left:t+20+"px",top:o-36+"px",width:"24px",height:"24px",borderRadius:"50%",border:"2px solid #fff",boxShadow:"0 0 8px 0 rgba(0, 0, 0, 0.16)",background:`rgba(${b}, ${m}, ${v}, ${$})`,zIndex:95}),this.suckerArea.length&&t>=this.suckerArea[0]&&o>=this.suckerArea[1]&&t<=this.suckerArea[2]&&o<=this.suckerArea[3]?f.display="":f.display="none"},suckColor(e){e&&e.tagName!=="CANVAS"||(this.suckerPreview=document.createElement("div"),this.suckerPreview&&document.body.appendChild(this.suckerPreview),document.addEventListener("mousemove",this.mousemoveHandler),document.addEventListener("mouseup",this.mousemoveHandler),e.addEventListener("click",t=>{const{clientX:o,clientY:n}=t,{top:s,left:a,width:l,height:r}=e.getBoundingClientRect(),i=o-a,p=n-s,b=e.getContext("2d").getImageData(Math.min(i,l-1),Math.min(p,r-1),1,1);let[m,v,$,f]=b.data;f=parseFloat((f/255).toFixed(2)),this.$emit("selectSucker",{r:m,g:v,b:$,a:f})}))}}});const nt=g("path",{d:"M13.1,8.2l5.6,5.6c0.4,0.4,0.5,1.1,0.1,1.5s-1.1,0.5-1.5,0.1c0,0-0.1,0-0.1-0.1l-1.4-1.4l-7.7,7.7C7.9,21.9,7.6,22,7.3,22H3.1C2.5,22,2,21.5,2,20.9l0,0v-4.2c0-0.3,0.1-0.6,0.3-0.8l5.8-5.8C8.5,9.7,9.2,9.6,9.7,10s0.5,1.1,0.1,1.5c0,0,0,0.1-0.1,0.1l-5.5,5.5v2.7h2.7l7.4-7.4L8.7,6.8c-0.5-0.4-0.5-1-0.1-1.5s1.1-0.5,1.5-0.1c0,0,0.1,0,0.1,0.1l1.4,1.4l3.5-3.5c1.6-1.6,4.1-1.6,5.8-0.1c1.6,1.6,1.6,4.1,0.1,5.8L20.9,9l-3.6,3.6c-0.4,0.4-1.1,0.5-1.5,0.1"},null,-1),lt={key:1,class:"sucker",viewBox:"-16 -16 68 68",xmlns:"http://www.w3.org/2000/svg",stroke:"#9099a4"},at=g("g",{fill:"none","fill-rule":"evenodd"},[g("g",{transform:"translate(1 1)","stroke-width":"4"},[g("circle",{"stroke-opacity":".5",cx:"18",cy:"18",r:"18"}),g("path",{d:"M36 18c0-9.94-8.06-18-18-18"},[g("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})])])],-1);function it(e,t,o,n,s,a){return h(),C("div",null,[e.isSucking?x("v-if",!0):(h(),C("svg",{key:0,class:[{active:e.isOpenSucker},"sucker"],xmlns:"http://www.w3.org/2000/svg",viewBox:"-12 -12 48 48",onClick:t[1]||(t[1]=(...l)=>e.openSucker&&e.openSucker(...l))},[nt],2)),e.isSucking?(h(),C("svg",lt,[at])):x("v-if",!0)])}oe.render=it;oe.__file="src/color/Sucker.vue";var re=F({props:{name:{type:String,default:""},color:{type:String,default:""}},emits:["inputColor","inputFocus","inputBlur"],setup(e,{emit:t}){return{modelColor:M({get(){return e.color||""},set(a){t("inputColor",a)}}),handleFocus:a=>{t("inputFocus",a)},handleBlur:a=>{t("inputBlur",a)}}}});const ct={class:"color-type"},ut={class:"name"};function dt(e,t,o,n,s,a){return h(),C("div",ct,[g("span",ut,fe(e.name),1),K(g("input",{"onUpdate:modelValue":t[1]||(t[1]=l=>e.modelColor=l),class:"value",onFocus:t[2]||(t[2]=(...l)=>e.handleFocus&&e.handleFocus(...l)),onBlur:t[3]||(t[3]=(...l)=>e.handleBlur&&e.handleBlur(...l))},null,544),[[be,e.modelColor]])])}re.render=dt;re.__file="src/color/Box.vue";var se=F({name:"ColorPicker",props:{color:{type:String,default:"#000000"},colorsDefault:{type:Array,default:()=>[]},colorsHistoryKey:{type:String,default:""}},emits:["selectColor"],setup(e,{emit:t}){const o=L(),n=L([]),s=L();e.colorsHistoryKey&&localStorage&&(n.value=JSON.parse(localStorage.getItem(e.colorsHistoryKey))||[]),s.value=J(4).toDataURL(),me(()=>{a(o.value)});function a(r){if(!r)return;const i=n.value||[],p=i.indexOf(r);p>=0&&i.splice(p,1),i.length>=8&&(i.length=7),i.unshift(r),n.value=i||[],localStorage&&e.colorsHistoryKey&&localStorage.setItem(e.colorsHistoryKey,JSON.stringify(i))}function l(r){t("selectColor",r)}return{setColorsHistory:a,colorsHistory:n,color:o,imgAlphaBase64:s,selectColor:l}}});const ht={class:"colors"},gt={key:0,class:"colors history"};function pt(e,t,o,n,s,a){return h(),C("div",null,[g("ul",ht,[(h(!0),C(A,null,O(e.colorsDefault,l=>(h(),C("li",{key:l,class:"item",onClick:r=>e.selectColor(l)},[g("div",{style:{background:`url(${e.imgAlphaBase64})`},class:"alpha"},null,4),g("div",{style:{background:l},class:"color"},null,4)],8,["onClick"]))),128))]),e.colorsHistory.length?(h(),C("ul",gt,[(h(!0),C(A,null,O(e.colorsHistory,l=>(h(),C("li",{key:l,class:"item",onClick:r=>e.selectColor(l)},[g("div",{style:{background:`url(${e.imgAlphaBase64})`},class:"alpha"},null,4),g("div",{style:{background:l},class:"color"},null,4)],8,["onClick"]))),128))])):x("v-if",!0)])}se.render=pt;se.__file="src/color/Colors.vue";var I=F({components:{Saturation:Q,Hue:Z,Alpha:ee,Preview:te,Sucker:oe,Box:re,Colors:se},emits:["changeColor","openSucker","inputFocus","inputBlur"],props:{color:{type:String,default:"#000000"},theme:{type:String,default:"dark"},suckerHide:{type:Boolean,default:!0},suckerCanvas:{type:null,default:null},suckerArea:{type:Array,default:()=>[]},colorsDefault:{type:Array,default:()=>["#000000","#FFFFFF","#FF1900","#F47365","#FFB243","#FFE623","#6EFF2A","#1BC7B1","#00BEFF","#2E81FF","#5D61FF","#FF89CF","#FC3CAD","#BF3DCE","#8E00A7","rgba(0,0,0,0)"]},colorsHistoryKey:{type:String,default:"vue-colorpicker-history"}},data(){return{hueWidth:15,hueHeight:152,previewHeight:30,modelRgba:"",modelHex:"",r:0,g:0,b:0,a:1,h:0,s:0,v:0}},computed:{isLightTheme(){return this.theme==="light"},totalWidth(){return this.hueHeight+(this.hueWidth+8)*2},previewWidth(){return this.totalWidth-(this.suckerHide?0:this.previewHeight)},rgba(){return{r:this.r,g:this.g,b:this.b,a:this.a}},hsv(){return{h:this.h,s:this.s,v:this.v}},rgbString(){return`rgb(${this.r}, ${this.g}, ${this.b})`},rgbaStringShort(){return`${this.r}, ${this.g}, ${this.b}, ${this.a}`},rgbaString(){return`rgba(${this.rgbaStringShort})`},hexString(){return Ue(this.rgba,!0)}},created(){Object.assign(this,E(this.color)),this.setText(),this.$watch("rgba",()=>{this.$emit("changeColor",{rgba:this.rgba,hsv:this.hsv,hex:this.modelHex})})},methods:{selectSaturation(e){const{r:t,g:o,b:n,h:s,s:a,v:l}=E(e);Object.assign(this,{r:t,g:o,b:n,h:s,s:a,v:l}),this.setText()},handleFocus(e){this.$emit("inputFocus",e)},handleBlur(e){this.$emit("inputBlur",e)},selectHue(e){const{r:t,g:o,b:n,h:s,s:a,v:l}=E(e);Object.assign(this,{r:t,g:o,b:n,h:s,s:a,v:l}),this.setText(),this.$nextTick(()=>{this.$refs.saturation.renderColor(),this.$refs.saturation.renderSlide()})},selectAlpha(e){this.a=e,this.setText()},inputHex(e){const{r:t,g:o,b:n,a:s,h:a,s:l,v:r}=E(e);Object.assign(this,{r:t,g:o,b:n,a:s,h:a,s:l,v:r}),this.modelHex=e,this.modelRgba=this.rgbaStringShort,this.$nextTick(()=>{this.$refs.saturation.renderColor(),this.$refs.saturation.renderSlide(),this.$refs.hue.renderSlide()})},inputRgba(e){const{r:t,g:o,b:n,a:s,h:a,s:l,v:r}=E(e);Object.assign(this,{r:t,g:o,b:n,a:s,h:a,s:l,v:r}),this.modelHex=this.hexString,this.modelRgba=e,this.$nextTick(()=>{this.$refs.saturation.renderColor(),this.$refs.saturation.renderSlide(),this.$refs.hue.renderSlide()})},setText(){this.modelHex=this.hexString,this.modelRgba=this.rgbaStringShort},openSucker(e){this.$emit("openSucker",e)},selectSucker(e){const{r:t,g:o,b:n,a:s,h:a,s:l,v:r}=E(e);Object.assign(this,{r:t,g:o,b:n,a:s,h:a,s:l,v:r}),this.setText(),this.$nextTick(()=>{this.$refs.saturation.renderColor(),this.$refs.saturation.renderSlide(),this.$refs.hue.renderSlide()})},selectColor(e){const{r:t,g:o,b:n,a:s,h:a,s:l,v:r}=E(e);Object.assign(this,{r:t,g:o,b:n,a:s,h:a,s:l,v:r}),this.setText(),this.$nextTick(()=>{this.$refs.saturation.renderColor(),this.$refs.saturation.renderSlide(),this.$refs.hue.renderSlide()})}}});const ft={class:"color-set"};function bt(e,t,o,n,s,a){const l=B("Saturation"),r=B("Hue"),i=B("Alpha"),p=B("Preview"),u=B("Sucker"),b=B("Box"),m=B("Colors");return h(),C("div",{class:["hu-color-picker",{light:e.isLightTheme}],style:{width:e.totalWidth+"px"}},[g("div",ft,[g(l,{ref:"saturation",color:e.rgbString,hsv:e.hsv,size:e.hueHeight,onSelectSaturation:e.selectSaturation},null,8,["color","hsv","size","onSelectSaturation"]),g(r,{ref:"hue",hsv:e.hsv,width:e.hueWidth,height:e.hueHeight,onSelectHue:e.selectHue},null,8,["hsv","width","height","onSelectHue"]),g(i,{ref:"alpha",color:e.rgbString,rgba:e.rgba,width:e.hueWidth,height:e.hueHeight,onSelectAlpha:e.selectAlpha},null,8,["color","rgba","width","height","onSelectAlpha"])]),g("div",{style:{height:e.previewHeight+"px"},class:"color-show"},[g(p,{color:e.rgbaString,width:e.previewWidth,height:e.previewHeight},null,8,["color","width","height"]),e.suckerHide?x("v-if",!0):(h(),C(u,{key:0,"sucker-canvas":e.suckerCanvas,"sucker-area":e.suckerArea,onOpenSucker:e.openSucker,onSelectSucker:e.selectSucker},null,8,["sucker-canvas","sucker-area","onOpenSucker","onSelectSucker"]))],4),g(b,{name:"HEX",color:e.modelHex,onInputColor:e.inputHex,onInputFocus:e.handleFocus,onInputBlur:e.handleBlur},null,8,["color","onInputColor","onInputFocus","onInputBlur"]),g(b,{name:"RGBA",color:e.modelRgba,onInputColor:e.inputRgba,onInputFocus:e.handleFocus,onInputBlur:e.handleBlur},null,8,["color","onInputColor","onInputFocus","onInputBlur"]),g(m,{color:e.rgbaString,"colors-default":e.colorsDefault,"colors-history-key":e.colorsHistoryKey,onSelectColor:e.selectColor},null,8,["color","colors-default","colors-history-key","onSelectColor"]),x(" custom options "),Ve(e.$slots,"default")],6)}I.render=bt;I.__file="src/color/ColorPicker.vue";I.install=e=>{e.component(I.name,I)};var H={};Object.defineProperty(H,"__esModule",{value:!0});H.validateAlphaValue=H.validateColorStops=H.validateMinMaxValues=void 0;function mt(e,t){if(e===t)throw new Error("The minimum value cannot be equal to the maximum value.");if(e>t)throw new Error("The minimum value must be less than the maximum value.")}H.validateMinMaxValues=mt;function vt(e){if(e.length<2)throw new Error("At least two colors must be provided.")}H.validateColorStops=vt;function Ct(e){if(e<0||e>1)throw new Error("The alpha value must be between 0 and 1.")}H.validateAlphaValue=Ct;const yt=H;function X(e){const t=e.toString(16);return t.length===1?"0"+t:t}function St(e){const t=Math.floor(e.r*e.a),o=Math.floor(e.g*e.a),n=Math.floor(e.b*e.a);return`#${X(t)}${X(o)}${X(n)}`}let kt=class{constructor(t,o,n,s=1){yt.validateAlphaValue(s),this.r=t,this.g=o,this.b=n,this.a=s}toRGBString(){return`rgb(${Math.floor(this.r*this.a)},${Math.floor(this.g*this.a)},${Math.floor(this.b*this.a)})`}toRGBAString(){return`rgba(${this.r},${this.g},${this.b},${this.a})`}toHexString(){return St(this)}};var $t=kt;const ye=$t,Y=H;function wt(e,t){const o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(o)return new ye(parseInt(o[1],16),parseInt(o[2],16),parseInt(o[3],16),t);throw new Error(`${e} is not a valid hex value.`)}let xt=class{constructor(t,o,n,s=1){Y.validateMinMaxValues(t,o),Y.validateColorStops(n),Y.validateAlphaValue(s),this.min=t,this.max=o,this.alpha=s,this.colorStops=n.map(a=>wt(a,s))}getColor(t){const o=this.colorStops.length;if(t<this.min)return this.colorStops[0];if(t>this.max)return this.colorStops[o-1];const n=this.max-this.min;let s=(t-this.min)/n;const a=Math.max(Math.ceil(s*(o-1)),1),l=this.colorStops[a-1],r=this.colorStops[a];s=s*(o-1)-(a-1);const i=Math.floor(s*r.r+(1-s)*l.r),p=Math.floor(s*r.g+(1-s)*l.g),u=Math.floor(s*r.b+(1-s)*l.b);return new ye(i,p,u,this.alpha)}};var Ft=xt;const Pt=Ft;var Bt=Pt;const Ht=je(Bt);function w(e){let t;if(Array.isArray(e))t=[],e.forEach(o=>{t.push(w(o))});else if(typeof e=="object"&&e!==null){t={};for(const o in e)Object.hasOwnProperty.call(e,o)&&(t[o]=w(e[o]))}else t=e;return t}function he(e,t=2){const o=new RegExp(`^\\d+(?:\\.\\d{0,${t}})?`,"g");return e.match(o)?e.match(o):""}function Et(e,t,o,n=!1){const s=q({mouseStartPst:{},movePst:{x:0,y:0},pageX:0,pageY:0}),a=document.body;let l=!1;function r(){l=!1,s.mouseStartPst={},s.movePst.x=0,s.movePst.y=0}function i(){a.addEventListener("mousedown",u,n),a.addEventListener("mousemove",b,n),a.addEventListener("mouseup",m,n)}function p(){a.removeEventListener("mousedown",u,n),a.removeEventListener("mousemove",b,n),a.removeEventListener("mouseup",m,n)}function u(f){l=!0,s.mouseStartPst.x=f.pageX,s.mouseStartPst.y=f.pageY,s.dragEleDistPst={},typeof e=="function"&&e(f)}function b(f){l&&(s.movePst.x=f.pageX-s.mouseStartPst.x,s.movePst.y=f.pageY-s.mouseStartPst.y,s.pageX=f.pageX,s.pageY=f.pageY,typeof t=="function"&&t(f))}function m(f){l=!1,v(),typeof o=="function"&&o(f)}function v(){p()}function $(){i()}return{...j(s),clearDraggble:v,enableDraggle:$,resetDraggle:r}}const At=[[{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:0},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:18},{color:"rgba(20,51,204,1)",hex:"#1433cc",rgba:{r:20,g:51,b:204,a:1},pst:20},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:50},{color:"rgba(20,51,204,1)",hex:"#1433cc",rgba:{r:20,g:51,b:204,a:1},pst:80},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:82},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:100}],[{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:0},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:18},{color:"rgba(0,115,95,1)",hex:"#00735f",rgba:{r:0,g:115,b:95,a:1},pst:20},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:50},{color:"rgba(0,115,95,1)",hex:"#00735f",rgba:{r:0,g:115,b:95,a:1},pst:80},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:82},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:100}],[{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:0},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:18},{color:"rgba(179,104,0,1)",hex:"#b36800",rgba:{r:179,g:104,b:0,a:1},pst:20},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:50},{color:"rgba(179,104,0,1)",hex:"#b36800",rgba:{r:179,g:104,b:0,a:1},pst:80},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:82},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:100}],[{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:0},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:18},{color:"rgba(204,0,0,1)",hex:"#cc0000",rgba:{r:204,g:0,b:0,a:1},pst:20},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:50},{color:"rgba(204,0,0,1)",hex:"#cc0000",rgba:{r:204,g:0,b:0,a:1},pst:80},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:82},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:100}],[{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:0},{color:"rgba(20,51,204,1)",hex:"#1433cc",rgba:{r:20,g:51,b:204,a:1},pst:2},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:50},{color:"rgba(20,51,204,1)",hex:"#1433cc",rgba:{r:20,g:51,b:204,a:1},pst:98},{color:"rgba(46,165,255,1)",hex:"#2ea5ff",rgba:{r:46,g:165,b:255,a:1},pst:100}],[{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:0},{color:"rgba(0,115,95,1)",hex:"#00735f",rgba:{r:0,g:115,b:95,a:1},pst:2},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:50},{color:"rgba(0,115,95,1)",hex:"#00735f",rgba:{r:0,g:115,b:95,a:1},pst:98},{color:"rgba(36,204,107,1)",hex:"#24cc6b",rgba:{r:36,g:204,b:107,a:1},pst:100}],[{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:0},{color:"rgba(179,104,0,1)",hex:"#b36800",rgba:{r:179,g:104,b:0,a:1},pst:2},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:50},{color:"rgba(179,104,0,1)",hex:"#b36800",rgba:{r:179,g:104,b:0,a:1},pst:98},{color:"rgba(204,177,37,1)",hex:"#ccb125",rgba:{r:204,g:177,b:37,a:1},pst:100}],[{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:0},{color:"rgba(204,0,0,1)",hex:"#cc0000",rgba:{r:204,g:0,b:0,a:1},pst:2},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:50},{color:"rgba(204,0,0,1)",hex:"#cc0000",rgba:{r:204,g:0,b:0,a:1},pst:98},{color:"rgba(255,98,46,1)",hex:"#ff622e",rgba:{r:255,g:98,b:46,a:1},pst:100}],[{color:"rgba(63, 63, 63, 1)",hex:"#3F3F3F",rgba:{r:63,g:63,b:63,a:1},pst:0},{color:"rgba(88, 88, 88, 1)",hex:"#585858",pst:4,rgba:{r:88,g:88,b:88,a:1}},{color:"rgba(126, 126, 126, 1)",hex:"#7E7E7E",rgba:{r:126,g:126,b:126,a:1},pst:53},{color:"rgba(65, 65, 65, 1)",hex:"#414141",rgba:{r:65,g:65,b:65,a:1},pst:97},{color:"rgba(45, 45, 45, 1)",hex:"#2D2D2D",rgba:{r:45,g:45,b:45,a:1},pst:100}]],ne=F({name:"ColorPickerGradient",components:{ColorPicker:I},props:{modelValue:{type:Boolean,default:!1},type:{type:String,default:"linear"},disabledColorDeg:{type:Boolean,default:!1},pDeg:{type:Number,default:90},pColor:{type:Object,default(){return{hex:"#000000",rgba:{r:0,g:0,b:0,a:1},color:"rgba(0,0,0,1)"}}},pColors:{type:Array,default(){return[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:100},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:0}]}},showClose:{type:Boolean,default:!0},closeOnClickBody:{type:Boolean,default:!1},titleConfig:{type:Object,default(){return{text:"颜色选择器",style:{}}}}},emits:["update:modelValue","changeColor","onClose"],setup(e,{emit:t}){const{type:o,pColors:n,pDeg:s,pColor:a}=j(e),l=L(null),r=q({refBox:null,color:a.value,deg:s.value,colors:n.value,selectIndex:0,startMovePst:0,defaultGradientColors:At}),i=M(()=>{if(!r.colors)return"";const c=w(r.colors).sort((d,y)=>d.pst-y.pst).map(d=>`${d.color} ${he(String(d.pst)||0,5)}%`);return`linear-gradient(${r.deg}deg, ${c.join(",")})`}),p=M(()=>c=>{const d=w(c).sort((y,P)=>y.pst-P.pst).map(y=>`${y.color} ${he(String(y.pst)||0,5)}%`);return`linear-gradient(${r.deg}deg, ${d.join(",")})`}),u=c=>{r.colors=w(c)},{movePst:b,enableDraggle:m,resetDraggle:v}=Et(we,Fe,xe);me(()=>{t("onClose"),z()}),ve(()=>{$()}),V(i,c=>{o.value!=="linear"&&T({style:c})}),V(a,c=>{r.color=w(c)},{deep:!0,immediate:!0}),V(n,c=>{r.selectIndex>=c.length&&(r.selectIndex=c.length-1),r.colors=w(c)},{deep:!0});function $(){if(f(),o.value==="gradient"){const c=w(r.colors).sort((d,y)=>d.pst-y.pst);r.selectIndex=r.colors.findIndex(d=>d.pst===c[0].pst),Ne(()=>{T({style:i.value})})}else T({color:w(r.color)})}function f(){o.value==="gradient"&&window.addEventListener("keyup",le),e.closeOnClickBody&&window.addEventListener("click",_)}function z(){o.value==="gradient"&&window.removeEventListener("keyup",le),e.closeOnClickBody&&window.removeEventListener("click",_)}function _(){t("update:modelValue",!1),t("onClose")}function le(c){[8,46].includes(c.keyCode)&&Se()}function Se(){r.colors.length!==2&&(r.colors.splice(r.selectIndex,1),$())}function ke(c){if(!l.value)return;const d=l.value.getBoundingClientRect(),y=d.left,P=c.pageX-y,Ie=w(r.colors).sort((G,Te)=>G.pst-Te.pst).map(G=>G.hex),ie=new Ht(0,d.width,Ie),Le=ie.getColor(P).toHexString(),Oe=ie.getColor(P).toRGBAString(),Re=100*P/d.width;r.colors.push({color:Oe,hex:Le,pst:Re}),r.selectIndex=r.colors.length-1}function $e(c){ae(c),m()}function we(){r.startMovePst=r.colors[r.selectIndex].pst}function xe(){v()}function Fe(){var y;const c=(y=l.value)==null?void 0:y.getBoundingClientRect().width;let d=(r.startMovePst*c/100+b.value.x)/c;d>1?d=1:d<0&&(d=0),r.colors[r.selectIndex].pst=Math.round(d*100)}function Pe(c){return`calc(${c}% - 8px)`}function Be(c){const d=c.rgba,y=c.hex;if(o.value==="linear"){const P=`rgba(${d.r}, ${d.g}, ${d.b}, ${d.a})`;r.color={rgba:d,hex:y,color:P},T({color:w(r.color)})}else He(c)}function T({style:c,colors:d=w(r.colors),color:y=w(r.color),deg:P=r.deg}){t("changeColor",{style:c,colors:d,color:y,deg:P})}function He(c){const d=c.rgba;r.colors[r.selectIndex].color=`rgba(${d.r}, ${d.g}, ${d.b}, ${d.a})`,r.colors[r.selectIndex].hex=c.hex,r.colors[r.selectIndex].rgba=c.rgba}function ae(c){r.selectIndex!==c&&(r.selectIndex=c)}function Ee(c){r.colors.length!==2&&r.colors.splice(c,1)}function Ae(){_()}const De=c=>{c.target.checked?r.defaultGradientColors.push(r.colors):r.defaultGradientColors.pop()},Me=M(()=>N.value?"#383838":"#f2f3f5");return{...j(r),changeColor:Be,getBarPst:Pe,barStyle:i,gradientPointStyle:p,chooseDefault:u,clickGColorPot:ae,removeColorPot:Ee,sliderPotDown:$e,handlePotBar:ke,close:Ae,setAsCommonChange:De,bg:Me,isDark:N,refColorBar:l}}}),ge=()=>{ze(e=>({"05c21f2f":e.bg}))},pe=ne.setup;ne.setup=pe?(e,t)=>(ge(),pe(e,t)):ge;const Dt=ne,Mt={class:"color_picker_wrapper"},It={key:0,class:"title"},Lt={key:1,class:"gcolor"},Ot={key:0,class:"gcolor_deg"},Rt={style:{flex:"1"}},Tt={ref:"refColorBar",class:"gcolor_bar"},Vt={class:"gcolor_bar_pot_box"},jt=["onMousedown","onClick","onDblclick"],Nt={class:"setAsCommon"},zt={key:0,class:"gradient_box"},_t={key:1,class:"linear"},Gt={key:2},Wt={class:"gradient-box"},Xt=["onClick"];function Yt(e,t,o,n,s,a){const l=Ye,r=B("ColorPicker");return K((h(),k("div",Mt,[S("div",{class:"color_picker_box",onClick:t[5]||(t[5]=R(()=>{},["stop"]))},[S("div",{class:ce(["color_hd",!(e.showClose||e.titleConfig.show)&&!e.titleConfig.text?"color_hd_0":""])},[e.titleConfig.show!==!1?(h(),k("div",It,[S("span",{style:D(e.titleConfig.style||{})},fe(e.titleConfig.text),5),e.showClose?(h(),k("span",{key:0,class:"close_box",onClick:t[0]||(t[0]=(...i)=>e.close&&e.close(...i))},"x")):x("",!0)])):x("",!0),e.type==="gradient"?(h(),k("div",Lt,[e.disabledColorDeg?x("",!0):(h(),k("div",Ot,[t[6]||(t[6]=S("div",{class:"gcolor_deg_span"}," 角度 ",-1)),S("div",Rt,[g(l,{value:e.deg,"onUpdate:value":t[1]||(t[1]=i=>e.deg=i),min:0,max:360},null,8,["value"])]),K(S("input",{"onUpdate:modelValue":t[2]||(t[2]=i=>e.deg=i),class:"number_input"},null,512),[[be,e.deg]])])),S("div",Tt,[S("div",{class:"gcolor_bar_bg",style:D(`background: ${e.barStyle}`),onClick:t[3]||(t[3]=(...i)=>e.handlePotBar&&e.handlePotBar(...i))},null,4),S("div",Vt,[(h(!0),k(A,null,O(e.colors,(i,p)=>(h(),k("div",{key:`${i.pst}_${p}`,class:ce(["gcolor_bar_pot",{on:e.selectIndex===p}]),style:D({left:e.getBarPst(i.pst)}),onMousedown:u=>e.sliderPotDown(p),onClick:u=>e.clickGColorPot(p),onDblclick:u=>e.removeColorPot(p)},null,46,jt))),128))])],512),S("div",Nt,[S("input",{type:"checkbox",onChange:t[4]||(t[4]=(...i)=>e.setAsCommonChange&&e.setAsCommonChange(...i))},null,32),t[7]||(t[7]=Ge("预设颜色 "))])])):x("",!0)],2),e.type==="gradient"?(h(),k("div",zt,[(h(!0),k(A,null,O(e.colors,(i,p)=>(h(),k(A,{key:`${i.pst}_${p}`},[p===e.selectIndex?(h(),C(r,{key:0,theme:("isDark"in e?e.isDark:ue(N))?"dark":"light",color:i.color,"sucker-hide":!0,style:{width:"218px"},onChangeColor:e.changeColor},null,8,["theme","color","onChangeColor"])):x("",!0)],64))),128))])):(h(),k("div",_t,[g(r,{theme:("isDark"in e?e.isDark:ue(N))?"dark":"light",color:e.color.color,"sucker-hide":!0,style:{width:"218px"},onChangeColor:e.changeColor},null,8,["theme","color","onChangeColor"])])),e.type==="gradient"?(h(),k("div",Gt,[t[8]||(t[8]=S("p",{style:{"font-size":"14px",margin:"10px 0px"}}," 系统预设颜色 ",-1)),S("ul",Wt,[(h(!0),k(A,null,O(e.defaultGradientColors,(i,p)=>(h(),k("li",{key:p,style:D(`background: ${e.gradientPointStyle(i)}`),class:"gradient-point",onClick:u=>e.chooseDefault(i)},null,12,Xt))),128))])])):x("",!0)])],512)),[[_e,e.modelValue]])}const Kt=Ce(Dt,[["render",Yt]]),Ut=F({name:"App",components:{ColorPicker:Kt},props:{id:{type:String,default:""},pureColor:{type:String||Array,default:""},gradientStr:{type:String,default:""},gradientColor:{type:Array,default:()=>[]},gradientColorOrigin:{type:Array,default:()=>[]}},emits:["colorChanged","gradientChange"],setup(e,{emit:t}){const o=q({isShowColorPicker:!1,style:`background: ${e.pureColor}`,titleConfig:{show:!0,text:"颜色选择器"},pDeg:60,pColor:{hex:"#ffffff",hex8:"#ffffff",hsl:{h:255,s:255,l:255,a:1},hsv:{h:255,s:255,v:255,a:1},rgba:{r:255,g:255,b:255,a:1},a:1,color:"rgba(255,255,255,1)"},pColors:[{color:"rgba(255, 255, 255, 1)",hex:"#ffffff",rgba:{r:255,g:255,b:255,a:1},pst:100},{color:"rgba(0, 0, 0, 1)",hex:"#000000",rgba:{r:0,g:0,b:0,a:1},pst:0}]}),n=M(()=>e.pureColor?"linear":(e.gradientColorOrigin&&e.gradientColorOrigin.length>0,"gradient")),s=({style:u,colors:b,color:m})=>{if(n.value==="linear")t("colorChanged",m.color||m.rgba||m.hex),o.pColor=m;else{t("colorChanged",u);const v=b.sort((f,z)=>f.pst-z.pst),$=[];for(let f=1;f<v.length;f++)$.push({beginColor:v[f-1].color,endColor:v[f].color,ratio:(v[f].pst-v[f-1].pst)/100});o.pColors=b,t("gradientChange",{colorsArr:$,gradientOrigin:b})}};function a(){}function l({style:u,colors:b,deg:m,color:v}){n.value==="linear"?o.style=`background: ${v.color||v.rgba||v.hex}`:o.style=`background: ${u}`,s({style:u,colors:b,color:v})}const r=L({left:0,top:0}),i=M(()=>({position:"fixed",zIndex:5999,left:`${r.value.left-225}px`,top:`${r.value.top-15}px`}));V([()=>e.pureColor,()=>e.gradientColorOrigin],([u,b])=>{u&&(typeof u=="string"?o.pColor={hex:W(u),hex8:W(u),color:W(u),a:1}:o.pColor=u,o.style=`background: ${u}`),b&&b.length>0&&(o.pColors=b,o.style=`background: ${e.gradientStr}`)},{immediate:!0,deep:!0});function p(){o.isShowColorPicker=!0}return ve(()=>{const u=document.getElementById(e.id),{left:b,top:m}=u.getBoundingClientRect();r.value.left=b;const v=Math.abs(window.innerHeight-m-565);r.value.top=m-v}),{...j(o),colorType:n,changeColor:l,showPicker:p,onClosePicker:a,colorPickerPosition:i}}}),qt=["id"];function Jt(e,t,o,n,s,a){const l=B("ColorPicker"),r=Ke;return h(),C(r,null,{trigger:We(()=>[S("div",{class:"scada-color-box inline-block",onClick:t[1]||(t[1]=R((...i)=>e.showPicker&&e.showPicker(...i),["stop"]))},[S("div",{id:e.id,style:D([e.style,{width:"25px",height:"25px"}]),class:"border border-1 border-light border-solid dark:border-dark"},null,12,qt),e.isShowColorPicker?(h(),C(Xe,{key:0,to:"body"},[g(l,{modelValue:e.isShowColorPicker,"onUpdate:modelValue":t[0]||(t[0]=i=>e.isShowColorPicker=i),type:e.colorType,"p-deg":90,"p-color":e.pColor,"p-colors":e.pColors,"show-close":!0,style:D(e.colorPickerPosition),"close-on-click-body":!0,onChangeColor:e.changeColor,onOnClose:e.onClosePicker},null,8,["modelValue","type","p-color","p-colors","style","onChangeColor","onOnClose"])])):x("",!0)])]),_:1})}const ro=Ce(Ut,[["render",Jt]]);export{ro as C};
|