@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
2 lines (1 loc) • 35 kB
JavaScript
(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x["color-picker"]={},x.Vue,x.dynamicResolver,x.designerCanvas,x.common))})(this,function(x,e,D,me,we){"use strict";var Me=Object.defineProperty;var He=(x,e,D)=>e in x?Me(x,e,{enumerable:!0,configurable:!0,writable:!0,value:D}):x[e]=D;var a=(x,e,D)=>He(x,typeof e!="symbol"?e+"":e,D);const ye={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/color-picker.schema.json",title:"color-picker",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for color picker",type:"string"},type:{description:"The type string of color picker",type:"string",default:"color-picker"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]};function ve(u,n,r){return n}const ke=new Map([["appearance",D.resolveAppearance]]),be={title:"color-picker",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},Z={color:{type:String,default:"#e1e2e3"},disabled:{type:Boolean,default:!1},presets:{type:Array,default:[]},allowColorNull:{type:Boolean,default:!1},onValueChanged:{type:Function,default:()=>{}}},te=D.createPropsResolver(Z,ye,ke,ve,be);class T{}class ne extends T{constructor(n,r,t,l){super(),this.cyan=n,this.magenta=r,this.yellow=t,this.black=l}toString(){return`cmyk(${this.getCyan()}%, ${this.getMagenta()}%, ${this.getYellow()}%, ${this.getBlack()}%)`}getCyan(){return Math.round(this.cyan)}getMagenta(){return Math.round(this.magenta)}getYellow(){return Math.round(this.yellow)}getBlack(){return Math.round(this.black)}}class W extends T{constructor(n,r,t,l){super(),this.hue=n,this.saturation=r,this.lightness=t,this.alpha=l}toString(n=!0){return n?`hsla(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%, ${this.getAlpha()})`:`hsl(${this.getHue()}, ${this.getSaturation()}%, ${this.getLightness()}%)`}getHue(){return Math.round(this.hue)}getSaturation(){return Math.round(this.saturation)}getLightness(){return Math.round(this.lightness)}getAlpha(){return Math.round(this.alpha*100)/100}}class z extends T{constructor(n,r,t,l){super(),this.hue=n,this.saturation=r,this.value=t,this.alpha=l}toString(n=!0){return n?`hsva(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%, ${this.getAlpha()})`:`hsv(${this.getHue()}, ${this.getSaturation()}%, ${this.getValue()}%)`}getHue(){return Math.round(this.hue)}getSaturation(){return Math.round(this.saturation)}getValue(){return Math.round(this.value)}getAlpha(){return Math.round(this.alpha*100)/100}}class s extends T{constructor(n,r,t,l){super(),this.red=n,this.green=r,this.blue=t,this.alpha=l}toString(n=!0){return n?`rgba(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()}, ${this.getAlpha()})`:`rgb(${this.getRed()}, ${this.getGreen()}, ${this.getBlue()})`}getRed(){return Math.round(this.red)}getGreen(){return Math.round(this.green)}getBlue(){return Math.round(this.blue)}getAlpha(){return Math.round(this.alpha*100)/100}}const i=class i{};a(i,"transparent",new s(0,0,0,0)),a(i,"aliceblue",new s(240,248,255,1)),a(i,"antiquewhite",new s(250,235,215,1)),a(i,"aqua",new s(0,255,255,1)),a(i,"aquamarine",new s(127,255,212,1)),a(i,"azure",new s(240,255,255,1)),a(i,"beige",new s(245,245,220,1)),a(i,"bisque",new s(255,228,196,1)),a(i,"black",new s(0,0,0,1)),a(i,"blanchedalmond",new s(255,235,205,1)),a(i,"blue",new s(0,0,255,1)),a(i,"blueviolet",new s(138,43,226,1)),a(i,"brown",new s(165,42,42,1)),a(i,"burlywood",new s(222,184,135,1)),a(i,"cadetblue",new s(95,158,160,1)),a(i,"chartreuse",new s(127,255,0,1)),a(i,"chocolate",new s(210,105,30,1)),a(i,"coral",new s(255,127,80,1)),a(i,"cornflowerblue",new s(100,149,237,1)),a(i,"cornsilk",new s(255,248,220,1)),a(i,"crimson",new s(220,20,60,1)),a(i,"cyan",new s(0,255,255,1)),a(i,"darkblue",new s(0,0,139,1)),a(i,"darkcyan",new s(0,139,139,1)),a(i,"darkgoldenrod",new s(184,134,11,1)),a(i,"darkgray",new s(169,169,169,1)),a(i,"darkgreen",new s(0,100,0,1)),a(i,"darkgrey",i.darkgray),a(i,"darkkhaki",new s(189,183,107,1)),a(i,"darkmagenta",new s(139,0,139,1)),a(i,"darkolivegreen",new s(85,107,47,1)),a(i,"darkorange",new s(255,140,0,1)),a(i,"darkorchid",new s(153,50,204,1)),a(i,"darkred",new s(139,0,0,1)),a(i,"darksalmon",new s(233,150,122,1)),a(i,"darkseagreen",new s(143,188,143,1)),a(i,"darkslateblue",new s(72,61,139,1)),a(i,"darkslategray",new s(47,79,79,1)),a(i,"darkslategrey",i.darkslategray),a(i,"darkturquoise",new s(0,206,209,1)),a(i,"darkviolet",new s(148,0,211,1)),a(i,"deeppink",new s(255,20,147,1)),a(i,"deepskyblue",new s(0,191,255,1)),a(i,"dimgray",new s(105,105,105,1)),a(i,"dimgrey",i.dimgray),a(i,"dodgerblue",new s(30,144,255,1)),a(i,"firebrick",new s(178,34,34,1)),a(i,"floralwhite",new s(255,250,240,1)),a(i,"forestgreen",new s(34,139,34,1)),a(i,"fuchsia",new s(255,0,255,1)),a(i,"gainsboro",new s(220,220,220,1)),a(i,"ghostwhite",new s(248,248,255,1)),a(i,"gold",new s(255,215,0,1)),a(i,"goldenrod",new s(218,165,32,1)),a(i,"gray",new s(128,128,128,1)),a(i,"grey",i.gray),a(i,"green",new s(0,128,0,1)),a(i,"greenyellow",new s(173,255,47,1)),a(i,"honeydew",new s(240,255,240,1)),a(i,"hotpink",new s(255,105,180,1)),a(i,"indianred",new s(205,92,92,1)),a(i,"indigo",new s(75,0,130,1)),a(i,"ivory",new s(255,255,240,1)),a(i,"khaki",new s(240,230,140,1)),a(i,"lavender",new s(230,230,250,1)),a(i,"lavenderblush",new s(255,240,245,1)),a(i,"lawngreen",new s(124,252,0,1)),a(i,"lemonchiffon",new s(255,250,205,1)),a(i,"lightblue",new s(173,216,230,1)),a(i,"lightcoral",new s(240,128,128,1)),a(i,"lightcyan",new s(224,255,255,1)),a(i,"lightgoldenrodyellow",new s(250,250,210,1)),a(i,"lightgray",new s(211,211,211,1)),a(i,"lightgreen",new s(144,238,144,1)),a(i,"lightgrey",i.lightgray),a(i,"lightpink",new s(255,182,193,1)),a(i,"lightsalmon",new s(255,160,122,1)),a(i,"lightseagreen",new s(32,178,170,1)),a(i,"lightskyblue",new s(135,206,250,1)),a(i,"lightslategray",new s(119,136,153,1)),a(i,"lightslategrey",i.lightslategray),a(i,"lightsteelblue",new s(176,196,222,1)),a(i,"lightyellow",new s(255,255,224,1)),a(i,"lime",new s(0,255,0,1)),a(i,"limegreen",new s(50,205,50,1)),a(i,"linen",new s(250,240,230,1)),a(i,"magenta",new s(255,0,255,1)),a(i,"maroon",new s(128,0,0,1)),a(i,"mediumaquamarine",new s(102,205,170,1)),a(i,"mediumblue",new s(0,0,205,1)),a(i,"mediumorchid",new s(186,85,211,1)),a(i,"mediumpurple",new s(147,112,219,1)),a(i,"mediumseagreen",new s(60,179,113,1)),a(i,"mediumslateblue",new s(123,104,238,1)),a(i,"mediumspringgreen",new s(0,250,154,1)),a(i,"mediumturquoise",new s(72,209,204,1)),a(i,"mediumvioletred",new s(199,21,133,1)),a(i,"midnightblue",new s(25,25,112,1)),a(i,"mintcream",new s(245,255,250,1)),a(i,"mistyrose",new s(255,228,225,1)),a(i,"moccasin",new s(255,228,181,1)),a(i,"navajowhite",new s(255,222,173,1)),a(i,"navy",new s(0,0,128,1)),a(i,"oldlace",new s(253,245,230,1)),a(i,"olive",new s(128,128,0,1)),a(i,"olivedrab",new s(107,142,35,1)),a(i,"orange",new s(255,165,0,1)),a(i,"orangered",new s(255,69,0,1)),a(i,"orchid",new s(218,112,214,1)),a(i,"palegoldenrod",new s(238,232,170,1)),a(i,"palegreen",new s(152,251,152,1)),a(i,"paleturquoise",new s(175,238,238,1)),a(i,"palevioletred",new s(219,112,147,1)),a(i,"papayawhip",new s(255,239,213,1)),a(i,"peachpuff",new s(255,218,185,1)),a(i,"peru",new s(205,133,63,1)),a(i,"pink",new s(255,192,203,1)),a(i,"plum",new s(221,160,221,1)),a(i,"powderblue",new s(176,224,230,1)),a(i,"purple",new s(128,0,128,1)),a(i,"red",new s(255,0,0,1)),a(i,"rosybrown",new s(188,143,143,1)),a(i,"royalblue",new s(65,105,225,1)),a(i,"saddlebrown",new s(139,69,19,1)),a(i,"salmon",new s(250,128,114,1)),a(i,"sandybrown",new s(244,164,96,1)),a(i,"seagreen",new s(46,139,87,1)),a(i,"seashell",new s(255,245,238,1)),a(i,"sienna",new s(160,82,45,1)),a(i,"silver",new s(192,192,192,1)),a(i,"skyblue",new s(135,206,235,1)),a(i,"slateblue",new s(106,90,205,1)),a(i,"slategray",new s(112,128,144,1)),a(i,"slategrey",i.slategray),a(i,"snow",new s(255,250,250,1)),a(i,"springgreen",new s(0,255,127,1)),a(i,"steelblue",new s(70,130,180,1)),a(i,"tan",new s(210,180,140,1)),a(i,"teal",new s(0,128,128,1)),a(i,"thistle",new s(216,191,216,1)),a(i,"tomato",new s(255,99,71,1)),a(i,"turquoise",new s(64,224,208,1)),a(i,"violet",new s(238,130,238,1)),a(i,"wheat",new s(245,222,179,1)),a(i,"white",new s(255,255,255,1)),a(i,"whitesmoke",new s(245,245,245,1)),a(i,"yellow",new s(255,255,0,1)),a(i,"yellowgreen",new s(154,205,50,1));let ae=i;class P{constructor(n){a(this,"hsva",new z(0,1,1,1));a(this,"rgba",new s(255,0,0,1));n&&this.stringToColor(n)}static from(n){return typeof n=="string"?new P(n):n instanceof P?n.clone():n instanceof s?new P().setRgba(n.red,n.green,n.blue,n.alpha):n instanceof z?new P().setHsva(n.hue,n.saturation,n.value,n.alpha):n instanceof W?new P().setHsla(n.hue,n.saturation,n.lightness,n.alpha):new P(n)}clone(){return P.from(this.getRgba())}setFromString(n){return this.stringToColor(n)}setHsva(n,r=100,t=100,l=1){return n!=null&&(this.hsva.hue=n),r!=null&&(this.hsva.saturation=r),t!=null&&(this.hsva.value=t),l!=null&&(l=l>1?1:l<0?0:l,this.hsva.alpha=l),this.rgba=this.hsvaToRgba(this.hsva),this}setRgba(n,r,t,l=1){return n!=null&&(this.rgba.red=n),r!=null&&(this.rgba.green=r),t!=null&&(this.rgba.blue=t),l!=null&&(l=l>1?1:l<0?0:l,this.rgba.alpha=l),this.hsva=this.rgbaToHsva(this.rgba),this}setHsla(n,r,t,l=1){l!=null&&(l=l>1?1:l<0?0:l,this.rgba.alpha=l);const k=new W(n,r,t,l);return this.rgba=this.hslaToRgba(k),this.hsva=this.rgbaToHsva(this.rgba),this}toHexString(n=!1){let r="#"+(16777216|this.rgba.getRed()<<16|this.rgba.getGreen()<<8|this.rgba.getBlue()).toString(16).substr(1);return n&&(r+=(256|Math.round(this.rgba.alpha*255)).toString(16).substr(1)),r.toUpperCase()}toRgbaString(){return this.rgba.toString()}toRgbString(){return this.rgba.toString(!1)}toHslaString(){return this.getHsla().toString()}toHslString(){return this.getHsla().toString(!1)}toHsvaString(){return this.hsva.toString()}toHsvString(){return this.hsva.toString(!1)}toCmykString(){return this.getCmyk().toString()}getHsva(){return new z(this.hsva.hue,this.hsva.saturation,this.hsva.value,this.hsva.alpha)}getRgba(){return new s(this.rgba.red,this.rgba.green,this.rgba.blue,this.rgba.alpha)}getHsla(){return this.rgbaToHsla(this.rgba)}getCmyk(){return this.rgbaToCmyk(this.rgba)}hsvaToHsla(n){const{hue:r}=n,t=n.saturation/100,l=n.value/100,k=(2-t)*n.value/2,o=t*l/(k<=1?k:2-k)||0;return new W(r,k*100,o*100,n.alpha)}hslaToHsva(n){const{hue:r}=n,t=n.lightness/100*2,l=n.saturation/100*(t<=1?t:2-t),k=(t+l)/2,o=2*l/(t+l)||0;return new z(r,o,k,n.alpha)}rgbaToHsva(n){const r=n.red/255,t=n.green/255,l=n.blue/255,{alpha:k}=n,o=Math.max(r,t,l),f=Math.min(r,t,l),v=o-f;let y=0,p=o===0?0:v/o,h=o;if(o!==f){switch(o){case r:y=(t-l)/v+(t<l?6:0);break;case t:y=2+(l-r)/v;break;case l:y=4+(r-t)/v;break}y/=6}return y*=360,p*=100,h*=100,new z(y,p,h,k)}hsvaToRgba(n){let r=1,t=0,l=0;const k=n.saturation/100,o=n.value/100,{alpha:f}=n,v=n.hue/60,y=Math.floor(v),p=v-y,h=(1-k)*o,w=(1-k*p)*o,b=(1-k*(1-p))*o;switch(y){case 6:case 0:r=o,t=b,l=h;break;case 1:r=w,t=o,l=h;break;case 2:r=h,t=o,l=b;break;case 3:r=h,t=w,l=o;break;case 4:r=b,t=h,l=o;break;case 5:r=o,t=h,l=w;break}return r*=255,t*=255,l*=255,new s(r,t,l,f)}rgbaToHsla(n){const r=n.red/255,t=n.green/255,l=n.blue/255,{alpha:k}=n,o=Math.max(r,t,l),f=Math.min(r,t,l);let v=0,y=0,p=(o+f)/2;const h=o-f;if(o!==f){switch(y=p>.5?h/(2-o-f):h/(o+f),o){case r:v=(t-l)/h+(t<l?6:0);break;case t:v=(l-r)/h+2;break;case l:v=(r-t)/h+4;break}v/=6}return v*=360,y*=100,p*=100,new W(v,y,p,k)}hslaToRgba(n){const r=n.hue/360,t=n.saturation/100,l=n.lightness/100,{alpha:k}=n;let o=l,f=l,v=l;if(t!==0){const y=l<.5?l*(1+t):l+t-l*t,p=2*l-y;o=this.hueToRgb(p,y,r+1/3),f=this.hueToRgb(p,y,r),v=this.hueToRgb(p,y,r-1/3)}return o*=255,f*=255,v*=255,new s(o,f,v,k)}hueToRgb(n,r,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+(r-n)*6*t:t<1/2?r:t<2/3?n+(r-n)*(2/3-t)*6:n}cmykToRgba(n){const r=n.black/100,t=n.cyan/100,l=n.magenta/100,k=n.yellow/100;let o=Math.min(1,(1-t)*(1-r)),f=Math.min(1,(1-l)*(1-r)),v=Math.min(1,(1-k)*(1-r));return o*=255,f*=255,v*=255,new s(o,f,v,1)}rgbaToCmyk(n){const r=n.red/255,t=n.green/255,l=n.blue/255;let k=1-r,o=1-t,f=1-l,v=Math.min(k,o,f);return v===1?new ne(0,0,0,1):(k=(k-v)/(1-v),o=(o-v)/(1-v),f=(f-v)/(1-v),v*=100,k*=100,o*=100,f*=100,new ne(k,o,f,v))}roundNumber(n){return Math.round(n*100)/100}stringToColor(n){const r=n.replace(/ /g,"").toLowerCase();let t=ae[n]||null;if(r[0]==="#"){let o=r.substr(1);const{length:f}=o;let v=1,y;if(f===3)y=o.split("").map(p=>p+p);else if(f===6)y=o.match(/.{2}/g);else if(f===8){const p=o.substr(-2);o=o.substr(0,f-2),v=this.roundNumber(parseInt(p||"FF",16)/255),y=o.match(/.{2}/g)}y&&y.length===3&&(t=new s(parseInt(y[0],16),parseInt(y[1],16),parseInt(y[2],16),v))}const l=r.indexOf("("),k=r.indexOf(")");if(l!==-1&&k+1===r.length){const o=r.substr(0,l),f=r.substr(l+1,k-(l+1)).split(",");let v=1,y,p;switch(o){case"rgba":v=parseFloat(f.pop());case"rgb":t=new s(parseInt(f[0],10),parseInt(f[1],10),parseInt(f[2],10),v);break;case"hsla":v=parseFloat(f.pop());break;case"hsl":y=new W(parseInt(f[0],10),parseInt(f[1],10),parseInt(f[2],10),v),t=this.hslaToRgba(y);break;case"cmyk":p=new ne(parseInt(f[0],10),parseInt(f[1],10),parseInt(f[2],10),parseInt(f[3],10)),t=this.cmykToRgba(p);break}}return t&&(this.rgba=t,this.hsva=this.rgbaToHsva(t)),this}}var S=(u=>(u.hex="hex",u.hexa="hexa",u.rgba="rgba",u.rgb="rgb",u.hsla="hsla",u.hsl="hsl",u.cmyk="cmyk",u))(S||{});class ie{constructor(n){a(this,"modelValue",null);a(this,"hueValue",null);a(this,"initValue",null);a(this,"valueChanged",e.ref());a(this,"initType",null);a(this,"alphaChannelVisibilityChanges",e.ref());a(this,"colorPresets",[]);const r=n[0],t=P.from(r);this.setValue(t),this.setHueColor(t)}setValueFrom(n,r,t){const l=P.from(n);return this.initValue||(this.initValue=P.from(n)),typeof n=="string"&&this.finOutInputType(n),this.setHueColor(l),this.setValue(l),this}setHueColor(n){(this.hueValue&&n.getHsva().hue>0||!this.hueValue)&&(this.hueValue=new P().setHsva(n.getHsva().hue))}get hue(){return this.hueValue}set hue(n){this.hueValue=n}setValue(n){var r;return this.modelValue=n,(n==null?void 0:n.toRgbaString())===((r=this.valueChanged.value)==null?void 0:r.toRgbaString())&&(this.valueChanged.value=n),this}get value(){return this.modelValue}set value(n){this.setValue(n)}reset(){let n;return this.initValue?(n=this.initValue.clone(),this.setHueColor(n)):(n=P.from(new s(255,0,0,1)),this.hueValue=new P().setHsva(n.getHsva().hue)),this.setValue(n),this}showAlphaChannel(){return this.alphaChannelVisibilityChanges.value=!0,this}finOutInputType(n){const r=n.replace(/ /g,"").toLowerCase();r[0]==="#"&&(this.initType="hex",r.length>7&&(this.initType="hexa"));const t=r.indexOf("(");switch(r.substr(0,t)){case"rgba":this.initType="rgba";break;case"rgb":this.initType="rgb";break;case"hsla":this.initType="hsla";break;case"hsl":this.initType="hsl";break;case"cmyk":this.initType="cmyk";break}}setColorPresets(n){return this.colorPresets=this.setPresets(n),this}setPresets(n){const r=[];return n.map(t=>{Array.isArray(t)?r.push(this.setPresets(t)):r.push(new P(t))}),r}get presets(){return this.colorPresets}hasPresets(){return this.colorPresets.length>0}}a(ie,"finOutInputType");function H(u,n){if(!u)return"";switch(n){case S.hex:return u.toHexString();case S.hexa:return u.toHexString(!0);case S.rgb:return u.toRgbString();case S.rgba:return u.toRgbaString();case S.hsl:return u.toHslString();case S.hsla:return u.toHslaString();default:return u.toRgbaString()}}const Pe={color:{type:Object,default:""},hue:{type:Object,default:""},randomId:{type:String,default:""},allowColorNull:{type:Boolean,default:!1}},he=e.defineComponent({name:"SvPanel",props:Pe,emits:["update:color"],setup(u,n){const r=e.ref(null),t=e.ref(null),l=e.ref(u.randomId),k=e.ref(u.allowColorNull);function o(){return u.hue?u.hue.toRgbaString():"#3f51b5"}function f(h,w){var b,g;h=Math.max(0,Math.min(h,100)),w=Math.max(0,Math.min(w,100)),r.value&&((b=r.value.style)==null||b.setProperty("top",`${100-w}%`),(g=r.value.style)==null||g.setProperty("left",`${h}%`))}function v(){const h=document.getElementById(`farris-color-picker-plus-sure-${l.value}`);h.className="btn btn-secondary";const w=document.getElementById(`farris-color-picker-plus-input-${l.value}`);w.style.borderColor="#dcdfe6"}function y({x:h,y:w,height:b,width:g}){const d=h*100/g,M=-(w*100/b)+100;f(d,M);const V=u.color==null?"transparent":u.color,N=P.from(V);if(v(),N!=null){const B=u.hue.getHsva(),O=N.getHsva(),E=new P().setHsva(B.hue,d,M,O.alpha);n.emit("update:color",E)}!N&&k.value&&n.emit("update:color",null)}function p(h){if(t.value){const{width:w,height:b,top:g,left:d}=t.value.getBoundingClientRect(),{pageX:M,pageY:V}="touches"in h?h.touches[0]:h,N=Math.max(0,Math.min(M-(d+window.pageXOffset),w)),B=Math.max(0,Math.min(V-(g+window.pageYOffset),b));y({x:N,y:B,height:b,width:w})}}return e.onMounted(()=>{const h=u.color.getHsva();f(h.saturation,h.value)}),e.watch(()=>u.color,h=>{h.getHsva()}),e.watch(()=>u.color,h=>{const w=h.getHsva();f(w.saturation,w.value)}),()=>e.createVNode("div",{class:"f-sv-panel-component",ref:t,style:{backgroundColor:o()},onMousedown:e.withModifiers(h=>p(h),["prevent"]),onTouchstart:e.withModifiers(h=>p(h),["prevent"])},[e.createVNode("div",{class:"color-svpanel__white"},null),e.createVNode("div",{class:"color-svpanel__black"},null),e.createVNode("div",{class:"color-svpanel__cursor",ref:r},[e.createVNode("div",null,null)])])}}),Ve={color:{type:Object,default:""},hue:{type:Object,default:""},allowColorNull:{type:Boolean,default:!1},onChange:{type:Function}},pe=e.defineComponent({name:"Hue",props:Ve,emits:["update:color","update:hue"],setup(u,n){const r=e.ref(u.hue),t=e.ref(u.allowColorNull),l=[];function k(g){g.preventDefault(),f(g)}const o=e.ref(null);function f(g){if(o.value){const{width:d,height:M,top:V,left:N}=o.value.getBoundingClientRect(),{pageX:B,pageY:O}="touches"in g?g.touches[0]:g,E=Math.max(0,Math.min(B-(N+window.pageXOffset),d)),q=Math.max(0,Math.min(O-(V+window.pageYOffset),M));b({x:E,y:q,height:M,width:d})}}function v(){l.forEach(g=>g()),l.length=0}function y(g){k(g),document.addEventListener("mouseup",v),document.addEventListener("touchend",v),document.addEventListener("touchmove",k)}const p=g=>{y(g),g.stopPropagation()};e.onMounted(()=>{document.querySelectorAll(".f-hue-component").forEach(M=>{M.addEventListener("mousedown",p),M.addEventListener("touchstart",p)});const d=u.color.getHsva();w(d.hue)});const h=e.ref(null);function w(g){var V;const d=Math.max(0,Math.min(g/360*100,100));h.value&&((V=h.value.style)==null||V.setProperty("top",`${d}%`))}function b({x:g,y:d,height:M,width:V}){const N=d/M*360;w(N);const B=u.color.getHsva(),O=new P().setHsva(N,B.saturation,B.value,B.alpha),E=new P().setHsva(N,100,100,B.alpha);(u.color!=null||u.color==null&&t.value)&&(n.emit("update:hue",E),n.emit("update:color",O))}return e.watch(r,g=>{const d=g.getHsva();w(d.hue)}),e.watch(()=>u.color,g=>{const d=g.getHsva();w(d.hue)}),()=>e.createVNode("div",{class:"f-hue-component",ref:o,onMousedown:e.withModifiers(g=>f(g),["prevent"]),onTouchstart:e.withModifiers(g=>f(g),["prevent"])},[e.createVNode("div",{class:"color-hue-slider__bar"},null),e.createVNode("div",{class:"color-hue-slider__thumb",ref:h},null)])}}),Ne={color:{type:Object,default:""},randomId:{type:String,default:""},allowColorNull:{type:Boolean,default:!1}},ge=e.defineComponent({name:"Alpha",props:Ne,emits:["update:color"],setup(u,n){const r=e.ref(null),t=e.ref(null),l=e.ref(u.randomId),k=e.ref(u.allowColorNull),o=p=>{var b;const h=Math.max(0,Math.min(p*100,100));t.value&&((b=t.value.style)==null||b.setProperty("left",`${h}%`))};function f(p){if(r.value){const{width:h,height:w,top:b,left:g}=r.value.getBoundingClientRect(),{pageX:d,pageY:M}="touches"in p?p.touches[0]:p,V=Math.max(0,Math.min(d-(g+window.pageXOffset),h));y({x:V,width:h})}}function v(){const p=document.getElementById(`farris-color-picker-plus-sure-${l.value}`);p.className="btn btn-secondary";const h=document.getElementById(`farris-color-picker-plus-input-${l.value}`);h.style.borderColor="#dcdfe6"}const y=({x:p,width:h})=>{const w=p/h;o(w),v();const b=u.color.getHsva(),g=new P().setHsva(b.hue,b.saturation,b.value,w);u.color!=null?n.emit("update:color",g):u.color==null&&k.value&&n.emit("update:color",null)};return e.onMounted(()=>{const p=u.color.getHsva();o(p.alpha)}),e.watch(()=>u.color,p=>{const h=p.getHsva();o(h.alpha)}),()=>e.createVNode("div",{class:"f-alpha-component",ref:r,onMousedown:e.withModifiers(p=>f(p),["prevent"]),onTouchstart:e.withModifiers(p=>f(p),["prevent"])},[e.createVNode("div",{class:"color-alpha-slider__bar"},[e.createTextVNode(" ")]),e.createVNode("div",{class:"color-alpha-slider__thumb",ref:t},null)])}}),Ie={color:{type:Object,default:""},hue:{type:Object,default:""},colorPresets:{type:Object,default:""},randomId:{type:String,default:""}},fe=e.defineComponent({name:"Preset",props:Ie,emits:["update:hue","update:color"],setup(u,n){const r=e.ref(new P),t=e.ref(u.colorPresets),l=e.ref(u.randomId);function k(){const y=document.getElementById(`farris-color-picker-plus-sure-${l.value}`);y.className="btn btn-secondary";const p=document.getElementById(`farris-color-picker-plus-input-${l.value}`);p.style.borderColor="#dcdfe6"}function o(y){k();const p=y.getRgba(),h=y.getHsva(),w=new P().setRgba(p.red,p.green,p.blue,p.alpha),b=new P().setHsva(h.hue);r.value=y,n.emit("update:hue",b),n.emit("update:color",w)}function f(y){const p=r.value.getRgba().toString(),h=r.value.getHsva().toString(),w=y.getRgba().toString()===p&&y.getHsva().toString()===h;return{"color-preset__color-selector":w,selected:w}}function v(y,p){return e.createVNode("div",{class:"color-preset__color-selector"},[e.createVNode("div",{key:p,class:f(y),style:{backgroundColor:y.toRgbString()},onClick:()=>o(y)},null)])}return()=>e.createVNode("div",{class:"f-preset-component"},[e.createVNode("div",{class:"color-preset__colors"},[t.value.map((y,p)=>v(y,p))])])}}),J=e.defineComponent({name:"FColorPicker",props:Z,emits:["valueChanged","activeChange","update:color","update:hue"],setup(u,n){const r=e.ref(new P(u.color)),t=e.ref(u.color),l=e.ref(u.disabled),k=e.ref(u.color),o=e.ref(u.allowColorNull),f=e.ref(u.presets),v=e.ref(!1),y=e.ref(!1),p=e.ref(!1),h=e.ref("HEX"),w=Math.floor(Math.random()*1e3).toString();let b=-1,g;const d=new ie("#000000"),M=e.ref(u.color);let V,N;const B=e.ref(null),O=e.ref(null),E=e.ref(null),q=e.computed(()=>!g&&d&&d.initType?d.initType:g),$=e.computed({get(){return g&&t.value!==null?(Q(g),H(new P(t.value),S[g])):t.value},set(m){m!==null&&(L(m),Y(m))}}),U=e.ref($.value),R=e.computed(()=>b>-1),C=e.computed(()=>f.value.length>0),se=e.computed(()=>({"background-color":k.value})),_=e.computed(()=>y.value&&v.value?"display:flex":"display:none"),X=[{text:"HEX",type:S.hex},{text:"RGBA",type:S.rgba}];function re(){const m=document.getElementById("farris-color-picker-panel");m.id=`farris-color-picker-panel-${w}`;const c=document.getElementById("farris-color-picker-plus-sure");c.id=`farris-color-picker-plus-sure-${w}`;const I=document.getElementById("farris-color-picker-plus-input");I.id=`farris-color-picker-plus-input-${w}`,N=document.getElementById(`farris-color-picker-plus-sure-${w}`),V=document.getElementById(`farris-color-picker-panel-${w}`),V.className="color-picker-panel disabled"}function F(){if(!o.value&&!t.value){document.getElementById(`farris-color-picker-plus-sure-${w}`).classList.toggle("disabled");const c=document.getElementById(`farris-color-picker-plus-input-${w}`);c.style.borderColor="red"}}function le(){t.value&&(L(t.value),!t.value&&o.value||(t.value=H(new P(t.value),S[q.value])),U.value=$.value),K(Q(d.initType))}function ee(){t.value&&L(t.value),d.hasPresets()||d.setColorPresets(f.value),t.value?k.value=H(new P(t.value),S[q.value]):!t.value&&o.value&&(k.value=null)}function oe(){e.watch(d.valueChanged,m=>{const c=H(m,S[g||d.initType]);t.value=c})}function K(m){h.value=X[m].text}function ce(){var m;y.value=!!(g!=null&&g.includes("a")||(m=d.initType)!=null&&m.includes("a"))}e.onBeforeMount(()=>{d.setColorPresets(f.value||["#eaecf3"])}),e.onMounted(()=>{re(),F(),le(),ee()}),oe(),e.watch(h,()=>{$.value=H(new P(t.value),S[g||d.initType]),r.value=new P($.value),ce()}),e.watch(t,m=>{H(d.value,d.initType)!==m&&m!==null&&L(m),K(Q(d.initType))}),e.watch(r,m=>{t.value=H(m,S[g||d.initType]),L(t.value),$.value=t.value});function Y(m){const c=document.getElementById(`farris-color-picker-plus-input-${w}`);(m===""||m===void 0||m==null)&&!o.value?(t.value=null,c.style.borderColor="red",N.className="btn btn-secondary disabled"):(c.style.borderColor="#dcdfe6",N.className="btn btn-secondary")}function ue(m){var c,I;if(m==null||m.stopPropagation(),o.value){k.value=(t==null?void 0:t.value)??null;const A={elementValue:k};n.emit("valueChanged",A),j()}if(!o.value&&!($.value===void 0||$.value==null||$.value==="")){(I=(c=B.value)==null?void 0:c.style)==null||I.setProperty("background",t.value),p.value=!0,k.value=t.value;const A={elementValue:k};n.emit("valueChanged",A),j()}!M.value&&!t.value&&!p.value&&o&&j(),Y(t.value),$.value=t.value,N.classList.contains("disabled")||(U.value=t.value,v.value=!1)}function L(m){d==null||d.setValueFrom(m,w,o.value)}function de(m){V=document.getElementById(`farris-color-picker-panel-${w}`);const c=V.className==="color-picker-panel";l.value||c||(v.value=!0,V.classList.toggle("disabled"),F(),L(t.value),m.stopPropagation())}function j(){V=document.getElementById(`farris-color-picker-panel-${w}`),V.className="color-picker-panel disabled"}function Q(m){const c=X.findIndex(I=>I.type===m);return b=c,c}function G(m){if(!N.classList.contains("disabled")){const c=X.length;b=(c+b+(m==="up"?1:-1))%c,g=X[b].type,K(b),L(t.value)}}return()=>e.createVNode("div",{class:"f-color-picker-component",ref:O},[e.createVNode("div",{class:["color-picker-panel",{disabled:l.value}],id:"farris-color-picker-panel",ref:E,onClick:m=>m.stopPropagation(),style:"top:30px"},[e.createVNode("div",{class:"color-picker-main"},[e.createVNode(pe,{hue:d.hue,"onUpdate:hue":m=>d.hue=m,allowColorNull:o.value,color:r.value,"onUpdate:color":m=>r.value=m},null),e.createVNode(he,{randomId:w,hue:d.hue,"onUpdate:hue":m=>d.hue=m,allowColorNull:o.value,color:r.value,"onUpdate:color":m=>r.value=m},null)]),e.createVNode(ge,{style:_.value,randomId:w,allowColorNull:o.value,color:r.value,"onUpdate:color":m=>r.value=m},null),e.createVNode("div",{class:"input-btn",style:"display:flex;align-items: center;"},[e.withDirectives(e.createVNode("span",{style:"width:40px;margin-right:10px;"},[h.value]),[[e.vShow,C]]),e.withDirectives(e.createVNode("input",{type:"text",title:"color-picker-plus",id:"farris-color-picker-plus-input","onUpdate:modelValue":m=>$.value=m,style:"float:none"},null),[[e.vModelText,$.value]]),e.withDirectives(e.createVNode("div",{class:"type-icon-btn-wrapper",style:"cursor:pointer"},[e.createVNode("span",{class:"f-icon f-icon-arrow-60-up type-icon-btn",onClick:()=>G("up")},null),e.createVNode("span",{class:"f-icon f-icon-arrow-60-down type-icon-btn",onClick:()=>G("down")},null)]),[[e.vShow,C]]),e.createVNode("div",{class:"input-btn"},[e.createVNode("button",{id:"farris-color-picker-plus-sure",class:"btn btn-secondary",onClick:m=>ue(m)},[e.createTextVNode("确定")])])]),e.withDirectives(e.createVNode(fe,{color:r.value,"onUpdate:color":m=>r.value=m,hue:d.hue,"onUpdate:hue":m=>d.hue=m,randomId:w,colorPresets:d.presets},null),[[e.vShow,R]])]),e.createVNode("div",{class:"color-picker-wrapper"},[e.createVNode("input",{title:"color-picker-input",type:"text",class:"color-picker-input form-control",value:U.value,readonly:l.value,onClick:m=>m.stopPropagation()},null),e.createVNode("div",{class:"color-picker-trigger",onClick:de},[e.createVNode("div",{class:"color-picker-trigger-inner"},[e.createVNode("div",{style:se.value},null)])])])])}}),Se=e.defineComponent({name:"FColorPickerDesign",props:Z,emits:["valueChanged","activeChange","update:color","update:hue"],setup(u,n){const r=e.ref(new P(u.color)),t=e.ref(u.color),l=e.ref(u.disabled),k=e.ref(u.color),o=e.ref(u.allowColorNull),f=e.ref(u.presets),v=e.ref(!1),y=e.ref(!1),p=e.ref(!1),h=e.ref("HEX"),w=Math.floor(Math.random()*1e3).toString();let b=-1,g;const d=new ie("#000000"),M=e.ref(u.color);let V,N;const B=e.ref(null),O=e.ref(null),E=e.ref(),q=e.inject("design-item-context"),$=me.useDesignerComponent(E,q);e.onMounted(()=>{E.value.componentInstance=$}),n.expose($.value);const U=e.computed(()=>!g&&d&&d.initType?d.initType:g),R=e.computed({get(){return g&&t.value!==null?(G(g),H(new P(t.value),S[g])):t.value},set(c){c!==null&&(j(c),L(c))}}),C=e.ref(R.value),se=e.computed(()=>b>-1),_=e.computed(()=>f.value.length>0),X=e.computed(()=>({"background-color":k.value})),re=e.computed(()=>y.value&&v.value?"display:flex":"display:none"),F=[{text:"HEX",type:S.hex},{text:"RGBA",type:S.rgba}];function le(){const c=document.getElementById("farris-color-picker-panel");c.id=`farris-color-picker-panel-${w}`;const I=document.getElementById("farris-color-picker-plus-sure");I.id=`farris-color-picker-plus-sure-${w}`;const A=document.getElementById("farris-color-picker-plus-input");A.id=`farris-color-picker-plus-input-${w}`,N=document.getElementById(`farris-color-picker-plus-sure-${w}`),V=document.getElementById(`farris-color-picker-panel-${w}`),V.className="color-picker-panel disabled"}function ee(){if(!o.value&&!t.value){document.getElementById(`farris-color-picker-plus-sure-${w}`).classList.toggle("disabled");const I=document.getElementById(`farris-color-picker-plus-input-${w}`);I.style.borderColor="red"}}function oe(){t.value&&(j(t.value),!t.value&&o.value||(t.value=H(new P(t.value),S[U.value])),C.value=R.value),Y(G(d.initType))}function K(){t.value&&j(t.value),d.hasPresets()||d.setColorPresets(f.value),t.value?k.value=H(new P(t.value),S[U.value]):!t.value&&o.value&&(k.value=null)}function ce(){e.watch(d.valueChanged,c=>{const I=H(c,S[g||d.initType]);t.value=I})}function Y(c){h.value=F[c].text}function ue(){var c;y.value=!!(g!=null&&g.includes("a")||(c=d.initType)!=null&&c.includes("a"))}e.onBeforeMount(()=>{d.setColorPresets(f.value||["#eaecf3"])}),e.onMounted(()=>{le(),ee(),oe(),K()}),ce(),e.watch(h,()=>{R.value=H(new P(t.value),S[g||d.initType]),r.value=new P(R.value),ue()}),e.watch(t,c=>{H(d.value,d.initType)!==c&&c!==null&&j(c),Y(G(d.initType))}),e.watch(r,c=>{t.value=H(c,S[g||d.initType]),j(t.value),R.value=t.value});function L(c){const I=document.getElementById(`farris-color-picker-plus-input-${w}`);(c===""||c===void 0||c==null)&&!o.value?(t.value=null,I.style.borderColor="red",N.className="btn btn-secondary disabled"):(I.style.borderColor="#dcdfe6",N.className="btn btn-secondary")}function de(){var c,I;if(o.value){k.value=(t==null?void 0:t.value)??null;const A={elementValue:k};n.emit("valueChanged",A),V.classList.toggle("disabled")}if(!o.value&&!(R.value===void 0||R.value==null||R.value==="")){(I=(c=B.value)==null?void 0:c.style)==null||I.setProperty("background",t.value),p.value=!0,k.value=t.value;const A={elementValue:k};n.emit("valueChanged",A),V.classList.toggle("disabled")}!M.value&&!t.value&&!p.value&&o&&V.classList.toggle("disabled"),L(t.value),R.value=t.value,N.classList.contains("disabled")||(C.value=t.value,v.value=!1)}function j(c){d==null||d.setValueFrom(c,w,o.value)}function Q(c){l.value||(v.value=!0,V.classList.toggle("disabled"),ee(),j(t.value))}function G(c){const I=F.findIndex(A=>A.type===c);return b=I,I}function m(c){if(!N.classList.contains("disabled")){const I=F.length;b=(I+b+(c==="up"?1:-1))%I,g=F[b].type,Y(b),j(t.value)}}return()=>e.createVNode("div",{class:"f-color-picker-component",ref:E},[e.createVNode("div",{class:["color-picker-panel",{disabled:l.value}],id:"farris-color-picker-panel",ref:O,onClick:c=>c.stopPropagation,style:"top:30px"},[e.createVNode("div",{class:"color-picker-main"},[e.createVNode(pe,{hue:d.hue,"onUpdate:hue":c=>d.hue=c,allowColorNull:o.value,color:r.value,"onUpdate:color":c=>r.value=c},null),e.createVNode(he,{randomId:w,hue:d.hue,"onUpdate:hue":c=>d.hue=c,allowColorNull:o.value,color:r.value,"onUpdate:color":c=>r.value=c},null)]),e.createVNode(ge,{style:re.value,randomId:w,allowColorNull:o.value,color:r.value,"onUpdate:color":c=>r.value=c},null),e.createVNode("div",{class:"input-btn",style:"display:flex;align-items: center;"},[e.withDirectives(e.createVNode("span",{style:"width:40px;margin-right:10px;"},[h.value]),[[e.vShow,_]]),e.withDirectives(e.createVNode("input",{title:"color-picker-plus-input",type:"text",id:"farris-color-picker-plus-input","onUpdate:modelValue":c=>R.value=c,style:"float:none"},null),[[e.vModelText,R.value]]),e.withDirectives(e.createVNode("div",{class:"type-icon-btn-wrapper",style:"cursor:pointer"},[e.createVNode("span",{class:"f-icon f-icon-arrow-60-up type-icon-btn",onClick:()=>m("up")},null),e.createVNode("span",{class:"f-icon f-icon-arrow-60-down type-icon-btn",onClick:()=>m("down")},null)]),[[e.vShow,_]]),e.createVNode("div",{class:"input-btn"},[e.createVNode("button",{id:"farris-color-picker-plus-sure",class:"btn btn-secondary",onClick:de},[e.createTextVNode("确定")])])]),e.withDirectives(e.createVNode(fe,{color:r.value,"onUpdate:color":c=>r.value=c,colorPresets:d.presets,hue:d.hue,"onUpdate:hue":c=>d.hue=c,randomId:w},null),[[e.vShow,se]])]),e.createVNode("div",{class:"color-picker-wrapper"},[e.createVNode("input",{type:"text",class:"color-picker-input form-control",value:C.value,readonly:l.value,onClick:c=>c.stopPropagation()},null),e.createVNode("div",{class:"color-picker-trigger",onClick:Q},[e.createVNode("div",{class:"color-picker-trigger-inner"},[e.createVNode("div",{style:X.value},null)])])])])}});J.register=(u,n,r)=>{u["color-picker"]=J,n["color-picker"]=te},J.registerDesigner=(u,n,r)=>{u["color-picker"]=Se,n["color-picker"]=te};const xe=we.withInstall(J);x.FColorPicker=J,x.colorPickerProps=Z,x.default=xe,x.propsResolver=te,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});