@farris/ui-vue 1.7.0-beta.4 → 1.7.0

package/designer/color-picker/index.umd.cjs

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