@adooreicheckout/vue3-colorpicker
Version:
A very beautiful color picker [forked from vue3-colorpicker]
2 lines (1 loc) • 30.7 kB
JavaScript
import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.function.name.js";import{Clipboard as e,ClickOutside as n,Clipboard as a}from"vue3-normal-directive";import{defineComponent as t,ref as o,computed as r,watch as l,onMounted as u,nextTick as i,withScopeId as c,openBlock as s,createBlock as h,createVNode as v,pushScopeId as d,popScopeId as f,Fragment as p,renderList as g,getCurrentInstance as C,reactive as m,toRaw as b,resolveComponent as y,createCommentVNode as k,resolveDirective as x,Teleport as _,withDirectives as H,resolveDynamicComponent as B,mergeProps as S,toDisplayString as P,vModelText as w}from"vue";import"core-js/modules/es.number.constructor.js";import"core-js/modules/es.number.to-fixed.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.regexp.to-string.js";import M from"tinycolor2";import{isDef as I,isNull as j,DOMUtils as L,ArrayUtils as R}from"@aesoper/normal-utils";import A from"lodash.debounce";import{createPopper as W}from"@popperjs/core";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.array.concat.js";import E,{useStorage as F}from"vue3-storage";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find-index.js";function U(e,n){for(var a=0;a<n.length;a++){var t=n[a];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}var V=function(){function e(){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),this.instance=M("#000000")}var n,a,t;return n=e,(a=[{key:"parseColor",value:function(e,n){(I(e)||j(e))&&(e="#000000"),e&&e.hsl?this.instance=M(e.hsl):e&&e.hex&&e.hex.length>0?this.instance=M(e.hex):e&&e.hex8&&e.hex8.length>0?this.instance=M(e.hex8):e&&e.hsv?this.instance=M(e.hsv):e&&e.rgba?this.instance=M(e.rgba):e&&e.rgb?this.instance=M(e.rgb):this.instance=M(e);var a=this.instance.toHsl(),t=this.instance.toHsv(),o=this.instance.toRgb();return 0===a.s&&(t.h=a.h=e.h||e.hsl&&e.hsl.h||n||0),0!==t.h&&0!==a.h||(t.h=a.h=e.h||n||e.oldHue||0),0===t.v&&(t.s=e.s&&e.s||e.hsv&&e.hsv.s||0),{hsl:{h:Math.round(a.h),s:Number(Math.round(100*a.s).toFixed(2))/100,l:Number(Math.round(100*a.l).toFixed(2))/100,a:Math.round(100*a.a)/100},hex:this.instance.toHexString().toUpperCase(),hex8:this.instance.toHex8String().toUpperCase(),rgb:{r:Math.round(o.r),g:Math.round(o.g),b:Math.round(o.b),a:Math.round(100*o.a)/100},hsv:{h:Math.round(t.h),s:Math.round(100*t.s)/100,v:Math.round(100*t.v)/100,a:Math.round(100*a.a)/100},oldHue:Math.round(e.h||n||a.h),source:e.source,alpha:Math.round(100*(e.a||this.instance.getAlpha()))/100}}},{key:"format",value:function(e){return this.instance.toString(e)}}])&&U(n.prototype,a),t&&U(n,t),e}(),z=A((function(e){e()}),200,{leading:!0,trailing:!1}),D=t({name:"Hue",props:{vertical:{type:Boolean,default:!1},size:{type:String,default:"default"},hue:{type:Number,default:0,validator:function(e){return e>=0&&e<=360}}},emits:["update:hue","change"],setup:function(e,n){var a=n.emit,t=o(null),c=o(null),s=o(0),h=o(0),v=o(e.hue),d=r((function(){return{background:e.vertical?"-webkit-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.66%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.66%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%)":"-webkit-linear-gradient(left, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.66%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.66%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%)"}})),f=function(){s.value=function(){if(e.vertical)return 0;if(t.value&&c.value){var n,a=null===(n=t.value)||void 0===n?void 0:n.getBoundingClientRect();return 360===v.value?a.width-c.value.offsetWidth/2:v.value%360*(a.width-c.value.offsetWidth)/360+c.value.offsetWidth/2}return 0}(),h.value=function(){if(!e.vertical)return 0;if(t.value&&c.value){var n,a,o=null===(n=t.value)||void 0===n?void 0:n.getBoundingClientRect();return 360===v.value?(null===(a=c.value)||void 0===a?void 0:a.offsetHeight)/2:(360-v.value%360)*(o.height-c.value.offsetHeight)/360+c.value.offsetHeight/2}return 0}()},p=function(n){if(t.value&&c.value){var o,r=null===(o=t.value)||void 0===o?void 0:o.getBoundingClientRect();if(e.vertical){var l,u=n.clientY-r.top;u=Math.min(u,r.height-(null===(l=c.value)||void 0===l?void 0:l.offsetHeight)/2),u=Math.max(c.value.offsetHeight/2,u),v.value=Math.round((u-c.value.offsetHeight/2)/(r.height-c.value.offsetHeight)*360)}else{var i=n.clientX-r.left;i=Math.min(i,r.width-c.value.offsetWidth/2),i=Math.max(c.value.offsetWidth/2,i),v.value=Math.round((i-c.value.offsetWidth/2)/(r.width-c.value.offsetWidth)*360)}a("update:hue",v.value),a("change",v.value)}};return l((function(){return e.hue}),(function(e){v.value=e})),l((function(){return v.value}),(function(){f()})),u((function(){i((function(){var e={drag:function(e){p(e)},end:function(e){p(e)}};t.value&&c.value&&(L.triggerDragEvent(t.value,e),L.triggerDragEvent(c.value,e)),f()}))})),{bar:t,barHandle:c,linearGradient:d,handleLeft:s,handleTop:h,handleClick:function(e){e.target!==c.value&&p(e)}}}}),N=c("data-v-0c2e0899")((function(e,n,a,t,o,r){return s(),h("div",{class:["bee-hue-colorPicker transparent",{"is-vertical":e.vertical,"small-hue-slider":"small"===e.size&&!e.vertical}]},[v("div",{class:"bee-hue-colorPicker__inner",ref:"bar",style:e.linearGradient},[v("div",{class:["bee-hue-colorPicker__inner-pointer",{"small-bar":"small"===e.size&&!e.vertical}],ref:"barHandle",style:{left:e.handleLeft+"px",top:e.handleTop+"px"}},[v("div",{class:["bee-hue-colorPicker__inner-handle",{vertical:e.vertical}]},null,2)],6)],4)],2)}));D.render=N,D.__scopeId="data-v-0c2e0899";var T=[["#fcc02e","#f67c01","#e64a19","#d81b43","#8e24aa","#512da7","#1f87e8","#008781","#05a045"],["#fed835","#fb8c00","#f5511e","#eb1d4e","#9c28b1","#5d35b0","#2097f3","#029688","#4cb050"],["#ffeb3c","#ffa727","#fe5722","#eb4165","#aa47bc","#673bb7","#42a5f6","#26a59a","#83c683"],["#fff176","#ffb74e","#ff8a66","#f1627e","#b968c7","#7986cc","#64b5f6","#80cbc4","#a5d6a7"],["#fff59c","#ffcc80","#ffab91","#fb879e","#cf93d9","#9ea8db","#90caf8","#b2dfdc","#c8e6ca"],["transparent","#ffffff","#dedede","#a9a9a9","#4b4b4b","#353535","#212121","#000000","advance"]],O=t({name:"Compact",props:{palette:{type:Array,default:function(){return T}}},setup:function(e,n){var a=n.emit,t=o(e.palette);return{computedBgStyle:function(e){return"transparent"===e?e:"advance"===e?{}:{background:M(e).toRgbString()}},rows:r((function(){return t.value?Math.ceil(t.value.length/9):0})),getRowColors:function(e){return t.value.slice(9*(e-1),9*e)},changeColor:function(e){a("change",e)}}}}),X=c("data-v-02f3845d");d("data-v-02f3845d");var Y={class:"bee-compact"};f();var G=X((function(e,n,a,t,o,r){return s(),h("div",Y,[(s(!0),h(p,null,g(e.palette,(function(n,a){return s(),h("div",{class:"bee-compact__row",key:a},[(s(!0),h(p,null,g(n,(function(n,a){return s(),h("div",{class:"bee-compact__color-cube--wrap",key:a},[v("div",{class:["bee-compact__color_cube",{advance:"advance"===n,transparent:"transparent"===n}],style:e.computedBgStyle(n),onClick:function(a){return e.changeColor(n)}},null,14,["onClick"])])})),128))])})),128))])}));O.render=G,O.__scopeId="data-v-02f3845d";var q=function(e,n,a){return n<a?e<n?n:e>a?a:e:e<a?a:e>n?n:e},J=t({name:"Saturation",props:{hue:{type:Number,default:0,validator:function(e){return e>=0&&e<=360}},saturation:{type:Number,default:0,validator:function(e){return e>=0&&e<=1}},value:{type:Number,default:0,validator:function(e){return e>=0&&e<=1}},round:Boolean,hidden:Boolean},emits:["update:saturation","update:value","change"],setup:function(e,n){var a=n.emit,t=C(),r=o(0),i=o(0),c=o("hsl("+e.hue+", 100%, 50%)"),s=m({h:e.hue,s:e.saturation,v:e.value}),h=function(){if(t){var e=t.vnode.el;i.value=s.s*(null==e?void 0:e.clientWidth),r.value=(1-s.v)*(null==e?void 0:e.clientHeight)}},v=function(e){if(t){var n=t.vnode.el,o=null==n?void 0:n.getBoundingClientRect(),l=e.clientX-o.left,u=e.clientY-o.top;l=q(l,0,o.width),u=q(u,0,o.height);var c=Math.round(l/o.width*100)/100,h=Math.round(100*q(-u/o.height+1,0,1))/100;i.value=l,r.value=u,s.s=c,s.v=h,a("update:saturation",c),a("update:value",h),a("change",c,h)}};return u((function(){t&&t.vnode.el&&(L.triggerDragEvent(t.vnode.el,{drag:function(e){v(e)},end:function(e){v(e)}}),h())})),l((function(){return e.hue}),(function(e){s.h=e,c.value="hsl("+Math.round(s.h)+", 100%, 50%)"})),l((function(){return e.value}),(function(e){s.v=e,h()})),l((function(){return e.saturation}),(function(e){s.s=e,h()})),{cursorTop:r,cursorLeft:i,background:c,handleDrag:v,updatePosition:h}}}),K=c("data-v-b20374c2");d("data-v-b20374c2");var Q=v("div",{class:"bee-saturation__white"},null,-1),Z=v("div",{class:"bee-saturation__black"},null,-1),$=v("div",null,null,-1);f();var ee=K((function(e,n,a,t,o,r){return s(),h("div",{class:["bee-saturation",{"bee-saturation__chrome":e.round,"bee-saturation__hidden":e.hidden}],style:{backgroundColor:e.background}},[Q,Z,v("div",{class:"bee-saturation__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"},onClick:n[1]||(n[1]=function(){return e.handleDrag&&e.handleDrag.apply(e,arguments)})},[$],4)],6)}));J.render=ee,J.__scopeId="data-v-b20374c2";var ne=t({name:"Alpha",props:{color:{type:String,default:"#000000"},vertical:{type:Boolean,default:!1},size:{type:String,default:"default"},alpha:{type:Number,default:1,validator:function(e){return e>=0&&e<=1}}},emits:["update:alpha","change"],setup:function(e,n){var a=n.emit,t=o(null),c=o(null),s=o(0),h=o(0),v=o(e.alpha),d=r((function(){var n=M(e.color).setAlpha(1).toRgbString(),a=M(e.color).setAlpha(0).toRgbString(),t="right";return e.vertical&&(t="bottom"),{background:"linear-gradient(to ".concat(t,", ").concat(a,", ").concat(n)}})),f=function(){s.value=function(){if(e.vertical)return 0;if(t.value&&c.value){var n,a,o,r=v.value,l=null===(n=t.value)||void 0===n?void 0:n.getBoundingClientRect();return Math.round(r*(l.width-(null===(a=c.value)||void 0===a?void 0:a.offsetWidth))+(null===(o=c.value)||void 0===o?void 0:o.offsetWidth)/2)}return 0}(),h.value=function(){if(!e.vertical)return 0;if(t.value&&c.value){var n,a=v.value,o=null===(n=t.value)||void 0===n?void 0:n.getBoundingClientRect();return Math.round(a*(o.height-c.value.offsetHeight)+c.value.offsetHeight/2)}return 0}()},p=function(n){if(n.stopPropagation(),t.value&&c.value){var o,r=null===(o=t.value)||void 0===o?void 0:o.getBoundingClientRect();if(e.vertical){var l=n.clientY-r.top;l=Math.max(c.value.offsetHeight/2,l),l=Math.min(l,r.height-c.value.offsetHeight/2),v.value=1-Math.round((l-c.value.offsetHeight/2)/(r.height-c.value.offsetHeight)*100)/100}else{var u=n.clientX-r.left;u=Math.max(c.value.offsetWidth/2,u),u=Math.min(u,r.width-c.value.offsetWidth/2),v.value=Math.round((u-c.value.offsetWidth/2)/(r.width-c.value.offsetWidth)*100)/100}a("update:alpha",v.value),a("change",v.value)}};return l((function(){return e.alpha}),(function(){v.value=e.alpha})),l((function(){return v.value}),(function(){f()})),u((function(){i((function(){var e={drag:function(e){p(e)},end:function(e){p(e)}};t.value&&c.value&&(L.triggerDragEvent(t.value,e),L.triggerDragEvent(t.value,e))})),f()})),{barEle:t,cursorEle:c,cursorLeft:s,cursorTop:h,gradientColor:d,onSliderClick:function(e){e.target!==t.value&&p(e)}}}}),ae=c("data-v-cb5bd62e")((function(e,n,a,t,o,r){return s(),h("div",{class:["bee-alpha-slider transparent",{"is-vertical":e.vertical,"small-alpha-slider":"small"===e.size&&!e.vertical}]},[v("div",{class:"bee-alpha-slider__bar",ref:"barEle",style:e.gradientColor,onClick:n[1]||(n[1]=function(){return e.onSliderClick&&e.onSliderClick.apply(e,arguments)})},[v("div",{class:["bee-alpha-slider__bar-pointer",{"small-bar":"small"===e.size&&!e.vertical}],ref:"cursorEle",style:{left:e.cursorLeft+"px",top:e.cursorTop+"px"}},[v("div",{class:["bee-alpha-slider__bar-handle",{vertical:e.vertical}]},null,2)],6)],4)],2)}));ne.render=ae,ne.__scopeId="data-v-cb5bd62e";var te=t({name:"Light",props:{vertical:{type:Boolean,default:!1},size:{type:String,default:"default"},light:{type:Number,default:0,validator:function(e){return e>=0&&e<=100}},hue:{type:Number,default:0,validator:function(e){return e>=0&&e<=360}},saturation:{type:Number,default:0,validator:function(e){return e>=0&&e<=100}}},setup:function(e,n){var a=n.emit,t=o(null),c=o(null),s=o(0),h=o(0),v=o(e.light),d=r((function(){var n=M({h:e.hue,s:e.saturation,l:.8}).toPercentageRgbString(),a=M({h:e.hue,s:e.saturation/100,l:.6}).toPercentageRgbString(),t=M({h:e.hue,s:e.saturation/100,l:.4}).toPercentageRgbString(),o=M({h:e.hue,s:e.saturation/100,l:.2}).toPercentageRgbString(),r="left";return e.vertical&&(r="top"),{background:["-webkit-linear-gradient(".concat(r,", rgb(255, 255, 255), ").concat(n,", ").concat(a,", ").concat(t,", ").concat(o,", rgb(0, 0, 0))")]}})),f=function(){var n,a,o,r;s.value=e.vertical?0:t.value&&c.value?(100-v.value)/100*((null===(n=t.value)||void 0===n?void 0:n.getBoundingClientRect()).width-c.value.offsetWidth)+c.value.offsetWidth/2:7,h.value=e.vertical&&t.value&&c.value?(100-v.value)/100*((null===(a=t.value)||void 0===a?void 0:a.getBoundingClientRect()).height-(null===(o=c.value)||void 0===o?void 0:o.offsetHeight))+(null===(r=c.value)||void 0===r?void 0:r.offsetHeight)/2:0},p=function(n){if(t.value&&c.value){var o,r=null===(o=t.value)||void 0===o?void 0:o.getBoundingClientRect(),l=v.value;if(e.vertical){var u,i=n.clientY-r.top;i=Math.max((null===(u=c.value)||void 0===u?void 0:u.offsetHeight)/2,i),i=Math.min(i,r.height-c.value.offsetHeight/2),l=Math.round((i-c.value.offsetHeight/2)/(r.height-c.value.offsetHeight)*100),v.value=l}else{var s=n.clientX-r.left;s=Math.max(c.value.offsetWidth/2,s),s=Math.min(s,r.width-c.value.offsetWidth/2),l=Math.round((s-c.value.offsetWidth/2)/(r.width-c.value.offsetWidth)*100),v.value=100-l}a("update:light",v.value),a("change",v.value)}};return l((function(){return e.light}),(function(e){v.value=e})),l((function(){return v.value}),(function(){f()})),u((function(){i((function(){var e={drag:function(e){p(e)},end:function(e){p(e)}};t.value&&c.value&&(L.triggerDragEvent(t.value,e),L.triggerDragEvent(c.value,e)),f()}))})),{bar:t,barHandle:c,getComputedLightnessBg:d,handleLeft:s,handleTop:h,handleClick:function(e){e.target!==c.value&&p(e)}}}}),oe=c("data-v-5c6a79a0")((function(e,n,a,t,o,r){return s(),h("div",{class:["bee-light-colorPicker transparent",{"is-vertical":e.vertical,"small-light-slider":"small"===e.size&&!e.vertical}]},[v("div",{class:"bee-light-colorPicker__inner",ref:"bar",style:e.getComputedLightnessBg,onClick:n[1]||(n[1]=function(){return e.handleClick&&e.handleClick.apply(e,arguments)})},[v("div",{class:["bee-light-colorPicker__inner-pointer",{"small-bar":"small"===e.size&&!e.vertical}],ref:"barHandle",style:{left:e.handleLeft+"px",top:e.handleTop+"px"}},[v("div",{class:["bee-light-colorPicker__inner-handle",{vertical:e.vertical}]},null,2)],6)],4)],2)}));te.render=oe,te.__scopeId="data-v-5c6a79a0";var re=t({name:"History",props:{colorList:{type:Array,default:function(){return[]}},round:{type:Boolean,default:!0}},emits:["change"],setup:function(e,n){var a=n.emit;return{onClickRecord:function(e){a("change",e)}}}}),le=c("data-v-53cf94ec");d("data-v-53cf94ec");var ue={class:"bee-colorPicker__record"},ie={class:"color-list"};f();var ce=le((function(e,n,a,t,o,r){return s(),h("div",ue,[v("div",ie,[(s(!0),h(p,null,g(e.colorList,(function(n,a){return s(),h("div",{class:["color-item transparent",{"color-item__round":e.round}],key:a,onClick:function(a){return e.onClickRecord(n)}},[v("div",{class:"color-item__display",style:{backgroundColor:n}},null,4)],10,["onClick"])})),128))])])}));re.render=ce,re.__scopeId="data-v-53cf94ec";var se=t({name:"FkColorPicker",components:{Compact:O,Light:te,Alpha:ne,Saturation:J,Hue:D,History:re},props:{color:{type:[String,Object],default:"#000000"},format:{type:String},disableAlpha:Boolean,disableLight:Boolean,disableHue:Boolean,disableHistory:Boolean,disableClipboard:Boolean,displayCurrentColor:{type:Boolean,default:!0},historyRound:Boolean},emits:["update:color","change"],setup:function(n,a){var t=a.emit,r=new V,i=o(r.parseColor(n.color)),c=o(i.value.oldHue),s=o(!1),h=F(),v=o([]),d=o(null),f=function(){v.value=v.value.filter((function(e){return e!==i.value.hex8})),v.value.length>=8&&v.value.shift(),v.value.push(i.value.hex8),null==h||h.setStorage({key:"colorList",data:v.value})},p=function(){v.value=(null==h?void 0:h.getStorageSync("colorList"))||[]},g=function(e,n){i.value=r.parseColor(e,n),z(f)},C=function(){n.format?(t("update:color",r.format(n.format)),t("change",r.format(n.format))):(t("update:color",i.value),t("change",i.value))};return l((function(){return n.color}),(function(e){g(b(e)),p()})),u((function(){p(),d.value&&!n.disableClipboard&&e(d.value,{text:function(){return i.value.hex}})})),{copyBtn:d,currentColor:i,storageColorList:v,onBack:function(){s.value=!1},advancePanelShow:s,onCompactChange:function(e){"advance"===e?s.value=!0:(c.value=i.value.hsl.h,g(e),C())},onLightChange:function(e){g({h:i.value.hsl.h,s:i.value.hsl.s,l:e/100,a:i.value.hsl.a,source:"light"},i.value.hsl.h),C()},onAlphaChange:function(e){g({h:i.value.hsl.h,s:i.value.hsl.s,l:i.value.hsl.l,a:e,source:"alpha"},i.value.hsl.h),C()},onSaturationChange:function(e,n){g({h:i.value.hsv.h,s:e,v:n,a:i.value.hsv.a,source:"saturation"},i.value.hsv.h),C()},onHueChange:function(e){var n=i.value.hsv,a=n.s,t=n.v,o=n.a;g({h:e,s:a,v:t,a:o,source:"hue"},e),C()},onInputChange:function(e){var n=e.target.value;g({hex:n}),C()}}}}),he=c("data-v-5960b748");d("data-v-5960b748");var ve={class:"bee-fk-colorPicker"},de={class:"bee-fk-colorPicker__inner"},fe={key:0,class:"bee-fk-colorPicker__header"},pe=v("div",{class:"back"},null,-1),ge=v("span",null,"返回",-1),Ce={key:6,class:"bee-fk-colorPicker__display"},me={class:"current-color transparent"},be=v("span",{class:"hexColor-prefix"},"#",-1),ye={key:0,class:"action"},ke={class:"copy-btn",ref:"copyBtn"};f();var xe=he((function(e,n,a,t,o,r){var l=y("compact"),u=y("saturation"),i=y("hue"),c=y("light"),d=y("alpha"),f=y("history");return s(),h("div",ve,[v("div",de,[e.advancePanelShow?(s(),h("div",fe,[v("span",{style:{cursor:"pointer"},onClick:n[1]||(n[1]=function(){return e.onBack&&e.onBack.apply(e,arguments)})},[pe,ge])])):k("",!0),e.advancePanelShow?k("",!0):(s(),h(l,{key:1,onChange:e.onCompactChange},null,8,["onChange"])),e.advancePanelShow?(s(),h(u,{key:2,saturation:e.currentColor.hsv.s,hue:e.currentColor.hsv.h,value:e.currentColor.hsv.v,onChange:e.onSaturationChange},null,8,["saturation","hue","value","onChange"])):k("",!0),e.advancePanelShow&&!e.disableHue?(s(),h(i,{key:3,hue:e.currentColor.hsv.h,onChange:e.onHueChange},null,8,["hue","onChange"])):k("",!0),e.advancePanelShow||e.disableLight?k("",!0):(s(),h(c,{key:4,hue:e.currentColor.hsl.h,light:100*e.currentColor.hsl.l,saturation:100*e.currentColor.hsl.s,onChange:e.onLightChange},null,8,["hue","light","saturation","onChange"])),e.disableAlpha?k("",!0):(s(),h(d,{key:5,color:e.currentColor.hex8,onChange:e.onAlphaChange,alpha:e.currentColor.alpha},null,8,["color","onChange","alpha"])),e.displayCurrentColor?(s(),h("div",Ce,[v("div",me,[v("div",{class:"color-cube",style:{background:e.currentColor.hex8}},null,4)]),be,v("input",{class:"hexColor-input",ref:"colorInput",value:e.currentColor.hex.replace("#",""),onBlur:n[2]||(n[2]=function(){return e.onInputChange&&e.onInputChange.apply(e,arguments)})},null,40,["value"]),e.disableClipboard?k("",!0):(s(),h("div",ye,[v("div",ke,"复制",512)]))])):k("",!0),!e.disableHistory&&e.storageColorList.length>0?(s(),h(f,{key:7,"color-list":e.storageColorList,round:e.historyRound,onChange:e.onCompactChange},null,8,["color-list","round","onChange"])):k("",!0)])])}));se.render=xe,se.__scopeId="data-v-5960b748";var _e=t({name:"PopuColorPicker",components:{FkColorPicker:se},props:{color:{type:[String,Object],default:"#000000"},round:{type:Boolean},mode:{type:String,default:"chrome"},pickerProps:{type:Object,default:function(){return{}}}},setup:function(e,n){var a=n.emit,t=o(!1),i=o(null),c=o(null),s=o(e.color),h=r((function(){var e=new V;return e.parseColor(s.value),{background:e.format("hex8")}}));return l((function(){return e.color}),(function(e){s.value=e})),u((function(){i.value&&c.value&&W(i.value,c.value,{placement:"auto",modifiers:[{name:"flip",options:{fallbackPlacements:["top","left"]}}]})})),{currentColor:s,pickerRef:c,colorRef:i,showPicker:t,getBgColor:h,onColorChange:function(){a("update:color",s.value)},onShowPicker:function(){t.value=!0},onHidePicker:function(){t.value=!1}}}}),He=c("data-v-4dd4232e");d("data-v-4dd4232e");var Be={ref:"pickerRef",class:"data-popper-arrow"};f();var Se=He((function(e,n,a,t,o,r){var l=x("click-outside");return s(),h(p,null,[v("div",{class:["bee-color-wrap transparent",{round:e.round}],ref:"colorRef"},[v("div",{class:"current-color",style:e.getBgColor,onClick:n[1]||(n[1]=function(){return e.onShowPicker&&e.onShowPicker.apply(e,arguments)})},null,4)],2),(s(),h(_,{to:"body"},[v("div",Be,[e.showPicker?H((s(),h(B(e.mode+"-color-picker"),S({key:0,color:e.currentColor,"onUpdate:color":n[2]||(n[2]=function(n){return e.currentColor=n})},e.pickerProps,{onChange:e.onColorChange}),null,16,["color","onChange"])),[[l,e.onHidePicker]]):k("",!0)],512)]))],64)}));_e.render=Se,_e.__scopeId="data-v-4dd4232e";var Pe=["rgb","hex"],we=t({name:"VColorInput",props:{color:{type:[String,Object],default:"#000000"}},emits:["update:color","change"],setup:function(e,n){var a=n.emit,t=new V,r=o(Pe[1]),u=o(t.parseColor(e.color));l((function(){return e.color}),(function(e){u.value=t.parseColor(b(e))}));var i=function(e,n){u.value=t.parseColor(e,n),a("update:color",u.value),a("change",u.value)};return{currentFormat:r,currentColor:u,onChangeFormat:function(){var e=R.findIndex(Pe,(function(e){return e==r.value}));r.value=Pe[(e+1)%Pe.length]},onInputChange:function(e){switch(e){case"hex":i({hex:u.value.hex,source:"hex"});break;case"hsl":i({hsl:u.value.hsl,source:"hsl"});break;case"rgb":i({rgb:u.value.rgb,source:"rgb"});break;case"hsv":i({hsv:u.value.hsv,source:"hsv"})}}}}}),Me=c("data-v-2627676a");d("data-v-2627676a");var Ie={class:"inputs-controls"},je={key:0,class:"format-group"},Le={key:1,class:"format-group"},Re={key:2,class:"format-group"},Ae={key:3,class:"format-group"};f();var We=Me((function(e,n,a,t,o,r){return s(),h("div",Ie,[v("button",{class:"formatBtn",onClick:n[1]||(n[1]=function(){return e.onChangeFormat&&e.onChangeFormat.apply(e,arguments)})},P(e.currentFormat),1),"hsv"===e.currentFormat?(s(),h("div",je,[H(v("input",{"onUpdate:modelValue":n[2]||(n[2]=function(n){return e.currentColor.hsv.h=n}),type:"number",min:"0",max:"360",placeholder:"h",onBlur:n[3]||(n[3]=function(n){return e.onInputChange("hsv")})},null,544),[[w,e.currentColor.hsv.h]]),H(v("input",{"onUpdate:modelValue":n[4]||(n[4]=function(n){return e.currentColor.hsv.s=n}),type:"number",min:"0",max:"1",placeholder:"s",onBlur:n[5]||(n[5]=function(n){return e.onInputChange("hsv")})},null,544),[[w,e.currentColor.hsv.s]]),H(v("input",{"onUpdate:modelValue":n[6]||(n[6]=function(n){return e.currentColor.hsv.v=n}),type:"number",min:"0",max:"1",placeholder:"v",onBlur:n[7]||(n[7]=function(n){return e.onInputChange("hsv")})},null,544),[[w,e.currentColor.hsv.v]])])):k("",!0),"hsl"===e.currentFormat?(s(),h("div",Le,[H(v("input",{"onUpdate:modelValue":n[8]||(n[8]=function(n){return e.currentColor.hsl.h=n}),type:"number",min:"0",max:"360",placeholder:"h",onBlur:n[9]||(n[9]=function(n){return e.onInputChange("hsl")})},null,544),[[w,e.currentColor.hsl.h]]),H(v("input",{"onUpdate:modelValue":n[10]||(n[10]=function(n){return e.currentColor.hsl.s=n}),type:"number",min:"0",max:"1",placeholder:"s",onBlur:n[11]||(n[11]=function(n){return e.onInputChange("hsl")})},null,544),[[w,e.currentColor.hsl.s]]),H(v("input",{"onUpdate:modelValue":n[12]||(n[12]=function(n){return e.currentColor.hsl.l=n}),type:"number",min:"0",max:"1",placeholder:"l",onBlur:n[13]||(n[13]=function(n){return e.onInputChange("hsl")})},null,544),[[w,e.currentColor.hsl.l]])])):k("",!0),"rgb"===e.currentFormat?(s(),h("div",Re,[H(v("input",{"onUpdate:modelValue":n[14]||(n[14]=function(n){return e.currentColor.rgb.r=n}),type:"number",min:"0",max:"255",placeholder:"r",onBlur:n[15]||(n[15]=function(n){return e.onInputChange("rgb")})},null,544),[[w,e.currentColor.rgb.r]]),H(v("input",{"onUpdate:modelValue":n[16]||(n[16]=function(n){return e.currentColor.rgb.g=n}),type:"number",min:"0",max:"255",placeholder:"g",onBlur:n[17]||(n[17]=function(n){return e.onInputChange("rgb")})},null,544),[[w,e.currentColor.rgb.g]]),H(v("input",{"onUpdate:modelValue":n[18]||(n[18]=function(n){return e.currentColor.rgb.b=n}),type:"number",min:"0",max:"255",onBlur:n[19]||(n[19]=function(n){return e.onInputChange("rgb")}),placeholder:"b"},null,544),[[w,e.currentColor.rgb.b]])])):k("",!0),"hex"===e.currentFormat?(s(),h("div",Ae,[H(v("input",{"onUpdate:modelValue":n[20]||(n[20]=function(n){return e.currentColor.hex=n}),type:"text",maxlength:"7",placeholder:"hex",onBlur:n[21]||(n[21]=function(n){return e.onInputChange("hex")})},null,544),[[w,e.currentColor.hex]])])):k("",!0)])}));we.render=We,we.__scopeId="data-v-2627676a";var Ee=t({name:"ChromeColorPicker",components:{VColorInput:we,History:re,Alpha:ne,Saturation:J,Hue:D},props:{color:{type:[String,Object],default:"#000000"},format:{type:String},disableAlpha:Boolean,disableLight:Boolean,disableHue:Boolean,disableHistory:Boolean,disableClipboard:Boolean,historyRound:Boolean},emits:["update:color","change"],setup:function(e,n){var a=n.emit,t=new V,r=o(t.parseColor(e.color)),i=F(),c=o([]),s=function(){c.value=c.value.filter((function(e){return e!==r.value.hex8})),c.value.length>=8&&c.value.shift(),c.value.push(r.value.hex8),null==i||i.setStorage({key:"colorList",data:c.value})},h=function(){c.value=(null==i?void 0:i.getStorageSync("colorList"))||[]},v=function(e,n){r.value=t.parseColor(e,n),z(s)},d=function(){e.format?(a("update:color",t.format(e.format)),a("change",t.format(e.format))):(a("update:color",r.value),a("change",r.value))};return l((function(){return e.color}),(function(e){v(b(e)),h()})),u((function(){h()})),{storageColorList:c,currentColor:r,onAlphaChange:function(e){v({h:r.value.hsl.h,s:r.value.hsl.s,l:r.value.hsl.l,a:e,source:"alpha"},r.value.hsl.h),d()},onHueChange:function(e){var n=r.value.hsv,a=n.s,t=n.v,o=n.a;v({h:e,s:a,v:t,a:o,source:"hue"},e),d()},onSaturationChange:function(e,n){v({h:r.value.hsv.h,s:e,v:n,a:r.value.hsv.a,source:"saturation"},r.value.hsv.h),d()},onInputChange:function(e){r.value=e,d()},onCompactChange:function(e){v(e),d()}}}}),Fe=c("data-v-744a857e");d("data-v-744a857e");var Ue={class:"bee-chrome-colorPicker"},Ve={class:"bee-chrome-colorPicker-body"},ze={class:"chrome-controls"},De={class:"chrome-color-wrap transparent"},Ne={class:"chrome-sliders"};f();var Te=Fe((function(e,n,a,t,o,r){var l=y("saturation"),u=y("hue"),i=y("alpha"),c=y("v-color-input"),d=y("history");return s(),h("div",Ue,[v(l,{saturation:e.currentColor.hsv.s,hue:e.currentColor.hsv.h,value:e.currentColor.hsv.v,onChange:e.onSaturationChange,round:!0,hidden:!0},null,8,["saturation","hue","value","onChange"]),v("div",Ve,[v("div",ze,[v("div",De,[v("div",{class:"current-color",style:{background:e.currentColor.hex8}},null,4)]),v("div",Ne,[e.disableHue?k("",!0):(s(),h(u,{key:0,hue:e.currentColor.hsv.h,onChange:e.onHueChange,size:"small"},null,8,["hue","onChange"])),e.disableAlpha?k("",!0):(s(),h(i,{key:1,size:"small",color:e.currentColor.hex8,onChange:e.onAlphaChange,alpha:e.currentColor.alpha},null,8,["color","onChange","alpha"]))])]),v(c,{color:e.currentColor,onChange:e.onInputChange},null,8,["color","onChange"]),e.disableHistory?k("",!0):(s(),h(d,{key:0,"color-list":e.storageColorList,round:e.historyRound,onChange:e.onCompactChange},null,8,["color-list","round","onChange"]))])])}));Ee.render=Te,Ee.__scopeId="data-v-744a857e";var Oe=t({name:"EleColorPicker",components:{VColorInput:we,History:re,Alpha:ne,Hue:D,Saturation:J},props:{color:{type:[String,Object],default:"#000000"},format:{type:String},disableAlpha:Boolean,disableLight:Boolean,disableHue:Boolean,disableHistory:Boolean,historyRound:{type:Boolean,default:!0}},emits:["update:color","change"],setup:function(e,n){var a=n.emit,t=new V,r=o(t.parseColor(e.color)),i=F(),c=o([]),s=function(){c.value=c.value.filter((function(e){return e!==r.value.hex8})),c.value.length>=8&&c.value.shift(),c.value.push(r.value.hex8),null==i||i.setStorage({key:"colorList",data:c.value})},h=function(){c.value=(null==i?void 0:i.getStorageSync("colorList"))||[]},v=function(e,n){r.value=t.parseColor(e,n),z(s)},d=function(){e.format?(a("update:color",t.format(e.format)),a("change",t.format(e.format))):(a("update:color",r.value),a("change",r.value))};return l((function(){return e.color}),(function(e){v(b(e)),h()})),u((function(){h()})),{storageColorList:c,currentColor:r,onAlphaChange:function(e){v({h:r.value.hsl.h,s:r.value.hsl.s,l:r.value.hsl.l,a:e,source:"alpha"},r.value.hsl.h),d()},onHueChange:function(e){var n=r.value.hsv,a=n.s,t=n.v,o=n.a;v({h:e,s:a,v:t,a:o,source:"hue"},e),d()},onSaturationChange:function(e,n){v({h:r.value.hsv.h,s:e,v:n,a:r.value.hsv.a,source:"saturation"},r.value.hsv.h),d()},onInputChange:function(e){r.value=e,d()},onCompactChange:function(e){v(e),d()}}}}),Xe=c("data-v-7ad893eb");d("data-v-7ad893eb");var Ye={class:"bee-ele-colorPicker"},Ge={class:"bee-ele-row"};f();var qe=Xe((function(e,n,a,t,o,r){var l=y("saturation"),u=y("hue"),i=y("alpha"),c=y("v-color-input"),d=y("history");return s(),h("div",Ye,[v("div",Ge,[v(l,{class:"bee-ele-saturation",hidden:!0,saturation:e.currentColor.hsv.s,hue:e.currentColor.hsv.h,value:e.currentColor.hsv.v,onChange:e.onSaturationChange},null,8,["saturation","hue","value","onChange"]),e.disableHue?k("",!0):(s(),h(u,{key:0,class:"bee-ele-hue",vertical:!0,size:"small",hue:e.currentColor.hsv.h,onChange:e.onHueChange},null,8,["hue","onChange"]))]),e.disableAlpha?k("",!0):(s(),h(i,{key:0,style:{width:"257px"},color:e.currentColor.hex8,onChange:e.onAlphaChange,alpha:e.currentColor.alpha},null,8,["color","onChange","alpha"])),v(c,{style:{width:"257px"},color:e.currentColor,onChange:e.onInputChange},null,8,["color","onChange"]),e.disableHistory?k("",!0):(s(),h(d,{key:1,"color-list":e.storageColorList,round:e.historyRound,onChange:e.onCompactChange},null,8,["color-list","round","onChange"]))])}));Oe.render=qe,Oe.__scopeId="data-v-7ad893eb";var Je=[se,_e,Ee,Oe],Ke={install:function(e){e.use(n),e.use(a),e.use(E),Je.forEach((function(n){e.component(n.name,n)}))}};export{Ee as ChromeColorPicker,Oe as EleColorPicker,se as FkColorPicker,_e as PopuColorPicker,Ke as default};