bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.2

package/lib/color-picker/index.js

@@ -1 +1,2665 @@
-import*as e from"../shared";import*as t from"vue";import*as r from"vue-types";import*as n from"../config-provider";import*as o from"../directives";import*as a from"../icon";var i={d:(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},c={};i.d(c,{Z:()=>ye});const u=(l={BKPopover:()=>e.BKPopover,PropTypes:()=>e.PropTypes,bkZIndexManager:()=>e.bkZIndexManager,classes:()=>e.classes,useFormItem:()=>e.useFormItem,withInstall:()=>e.withInstall},s={},i.d(s,l),s);var l,s;function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function d(e,t,r){return(t=function(e){var t=function(e,t){if("object"!==f(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!==f(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===f(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const h=(e=>{var t={};return i.d(t,e),t})({Fragment:()=>t.Fragment,Transition:()=>t.Transition,computed:()=>t.computed,createVNode:()=>t.createVNode,defineComponent:()=>t.defineComponent,nextTick:()=>t.nextTick,onBeforeMount:()=>t.onBeforeMount,onBeforeUnmount:()=>t.onBeforeUnmount,onMounted:()=>t.onMounted,reactive:()=>t.reactive,ref:()=>t.ref,resolveDirective:()=>t.resolveDirective,toRefs:()=>t.toRefs,vShow:()=>t.vShow,watch:()=>t.watch,withDirectives:()=>t.withDirectives});function p(e){return p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p(e)}var v=/^\s+/,g=/\s+$/;function b(e,t){if(t=t||{},(e=e||"")instanceof b)return e;if(!(this instanceof b))return new b(e,t);var r=function(e){var t,r,n,o={r:0,g:0,b:0},a=1,i=null,c=null,u=null,l=!1,s=!1;return"string"==typeof e&&(e=function(e){e=e.replace(v,"").replace(g,"").toLowerCase();var t,r=!1;if(R[e])e=R[e],r=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};return(t=X.rgb.exec(e))?{r:t[1],g:t[2],b:t[3]}:(t=X.rgba.exec(e))?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=X.hsl.exec(e))?{h:t[1],s:t[2],l:t[3]}:(t=X.hsla.exec(e))?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=X.hsv.exec(e))?{h:t[1],s:t[2],v:t[3]}:(t=X.hsva.exec(e))?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=X.hex8.exec(e))?{r:L(t[1]),g:L(t[2]),b:L(t[3]),a:U(t[4]),format:r?"name":"hex8"}:(t=X.hex6.exec(e))?{r:L(t[1]),g:L(t[2]),b:L(t[3]),format:r?"name":"hex"}:(t=X.hex4.exec(e))?{r:L(t[1]+""+t[1]),g:L(t[2]+""+t[2]),b:L(t[3]+""+t[3]),a:U(t[4]+""+t[4]),format:r?"name":"hex8"}:!!(t=X.hex3.exec(e))&&{r:L(t[1]+""+t[1]),g:L(t[2]+""+t[2]),b:L(t[3]+""+t[3]),format:r?"name":"hex"}}(e)),"object"==p(e)&&($(e.r)&&$(e.g)&&$(e.b)?(t=e.r,r=e.g,n=e.b,o={r:255*D(t,255),g:255*D(r,255),b:255*D(n,255)},l=!0,s="%"===String(e.r).substr(-1)?"prgb":"rgb"):$(e.h)&&$(e.s)&&$(e.v)?(i=B(e.s),c=B(e.v),o=function(e,t,r){e=6*D(e,360),t=D(t,100),r=D(r,100);var n=Math.floor(e),o=e-n,a=r*(1-t),i=r*(1-o*t),c=r*(1-(1-o)*t),u=n%6;return{r:255*[r,i,a,a,c,r][u],g:255*[c,r,r,i,a,a][u],b:255*[a,a,c,r,r,i][u]}}(e.h,i,c),l=!0,s="hsv"):$(e.h)&&$(e.s)&&$(e.l)&&(i=B(e.s),u=B(e.l),o=function(e,t,r){var n,o,a;function i(e,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e}if(e=D(e,360),t=D(t,100),r=D(r,100),0===t)n=o=a=r;else{var c=r<.5?r*(1+t):r+t-r*t,u=2*r-c;n=i(u,c,e+1/3),o=i(u,c,e),a=i(u,c,e-1/3)}return{r:255*n,g:255*o,b:255*a}}(e.h,i,u),l=!0,s="hsl"),e.hasOwnProperty("a")&&(a=e.a)),a=H(a),{ok:l,format:e.format||s,r:Math.min(255,Math.max(o.r,0)),g:Math.min(255,Math.max(o.g,0)),b:Math.min(255,Math.max(o.b,0)),a}}(e);this._originalInput=e,this._r=r.r,this._g=r.g,this._b=r.b,this._a=r.a,this._roundA=Math.round(100*this._a)/100,this._format=t.format||r.format,this._gradientType=t.gradientType,this._r<1&&(this._r=Math.round(this._r)),this._g<1&&(this._g=Math.round(this._g)),this._b<1&&(this._b=Math.round(this._b)),this._ok=r.ok}function m(e,t,r){e=D(e,255),t=D(t,255),r=D(r,255);var n,o,a=Math.max(e,t,r),i=Math.min(e,t,r),c=(a+i)/2;if(a==i)n=o=0;else{var u=a-i;switch(o=c>.5?u/(2-a-i):u/(a+i),a){case e:n=(t-r)/u+(t<r?6:0);break;case t:n=(r-e)/u+2;break;case r:n=(e-t)/u+4}n/=6}return{h:n,s:o,l:c}}function y(e,t,r){e=D(e,255),t=D(t,255),r=D(r,255);var n,o,a=Math.max(e,t,r),i=Math.min(e,t,r),c=a,u=a-i;if(o=0===a?0:u/a,a==i)n=0;else{switch(a){case e:n=(t-r)/u+(t<r?6:0);break;case t:n=(r-e)/u+2;break;case r:n=(e-t)/u+4}n/=6}return{h:n,s:o,v:c}}function w(e,t,r,n){var o=[I(Math.round(e).toString(16)),I(Math.round(t).toString(16)),I(Math.round(r).toString(16))];return n&&o[0].charAt(0)==o[0].charAt(1)&&o[1].charAt(0)==o[1].charAt(1)&&o[2].charAt(0)==o[2].charAt(1)?o[0].charAt(0)+o[1].charAt(0)+o[2].charAt(0):o.join("")}function k(e,t,r,n){return[I(q(n)),I(Math.round(e).toString(16)),I(Math.round(t).toString(16)),I(Math.round(r).toString(16))].join("")}function _(e,t){t=0===t?0:t||10;var r=b(e).toHsl();return r.s-=t/100,r.s=E(r.s),b(r)}function x(e,t){t=0===t?0:t||10;var r=b(e).toHsl();return r.s+=t/100,r.s=E(r.s),b(r)}function M(e){return b(e).desaturate(100)}function A(e,t){t=0===t?0:t||10;var r=b(e).toHsl();return r.l+=t/100,r.l=E(r.l),b(r)}function N(e,t){t=0===t?0:t||10;var r=b(e).toRgb();return r.r=Math.max(0,Math.min(255,r.r-Math.round(-t/100*255))),r.g=Math.max(0,Math.min(255,r.g-Math.round(-t/100*255))),r.b=Math.max(0,Math.min(255,r.b-Math.round(-t/100*255))),b(r)}function S(e,t){t=0===t?0:t||10;var r=b(e).toHsl();return r.l-=t/100,r.l=E(r.l),b(r)}function V(e,t){var r=b(e).toHsl(),n=(r.h+t)%360;return r.h=n<0?360+n:n,b(r)}function C(e){var t=b(e).toHsl();return t.h=(t.h+180)%360,b(t)}function O(e,t){if(isNaN(t)||t<=0)throw new Error("Argument to polyad must be a positive number");for(var r=b(e).toHsl(),n=[b(e)],o=360/t,a=1;a<t;a++)n.push(b({h:(r.h+a*o)%360,s:r.s,l:r.l}));return n}function P(e){var t=b(e).toHsl(),r=t.h;return[b(e),b({h:(r+72)%360,s:t.s,l:t.l}),b({h:(r+216)%360,s:t.s,l:t.l})]}function j(e,t,r){t=t||6,r=r||30;var n=b(e).toHsl(),o=360/r,a=[b(e)];for(n.h=(n.h-(o*t>>1)+720)%360;--t;)n.h=(n.h+o)%360,a.push(b(n));return a}function T(e,t){t=t||6;for(var r=b(e).toHsv(),n=r.h,o=r.s,a=r.v,i=[],c=1/t;t--;)i.push(b({h:n,s:o,v:a})),a=(a+c)%1;return i}b.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(299*e.r+587*e.g+114*e.b)/1e3},getLuminance:function(){var e,t,r,n=this.toRgb();return e=n.r/255,t=n.g/255,r=n.b/255,.2126*(e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4))+.0722*(r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4))},setAlpha:function(e){return this._a=H(e),this._roundA=Math.round(100*this._a)/100,this},toHsv:function(){var e=y(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=y(this._r,this._g,this._b),t=Math.round(360*e.h),r=Math.round(100*e.s),n=Math.round(100*e.v);return 1==this._a?"hsv("+t+", "+r+"%, "+n+"%)":"hsva("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHsl:function(){var e=m(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=m(this._r,this._g,this._b),t=Math.round(360*e.h),r=Math.round(100*e.s),n=Math.round(100*e.l);return 1==this._a?"hsl("+t+", "+r+"%, "+n+"%)":"hsla("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHex:function(e){return w(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(e){return function(e,t,r,n,o){var a=[I(Math.round(e).toString(16)),I(Math.round(t).toString(16)),I(Math.round(r).toString(16)),I(q(n))];return o&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)&&a[3].charAt(0)==a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join("")}(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return"#"+this.toHex8(e)},toRgb:function(){return{r:Math.round(this._r),g:Math.round(this._g),b:Math.round(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+")":"rgba("+Math.round(this._r)+", "+Math.round(this._g)+", "+Math.round(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:Math.round(100*D(this._r,255))+"%",g:Math.round(100*D(this._g,255))+"%",b:Math.round(100*D(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+Math.round(100*D(this._r,255))+"%, "+Math.round(100*D(this._g,255))+"%, "+Math.round(100*D(this._b,255))+"%)":"rgba("+Math.round(100*D(this._r,255))+"%, "+Math.round(100*D(this._g,255))+"%, "+Math.round(100*D(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(F[w(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+k(this._r,this._g,this._b,this._a),r=t,n=this._gradientType?"GradientType = 1, ":"";if(e){var o=b(e);r="#"+k(o._r,o._g,o._b,o._a)}return"progid:DXImageTransform.Microsoft.gradient("+n+"startColorstr="+t+",endColorstr="+r+")"},toString:function(e){var t=!!e;e=e||this._format;var r=!1,n=this._a<1&&this._a>=0;return t||!n||"hex"!==e&&"hex6"!==e&&"hex3"!==e&&"hex4"!==e&&"hex8"!==e&&"name"!==e?("rgb"===e&&(r=this.toRgbString()),"prgb"===e&&(r=this.toPercentageRgbString()),"hex"!==e&&"hex6"!==e||(r=this.toHexString()),"hex3"===e&&(r=this.toHexString(!0)),"hex4"===e&&(r=this.toHex8String(!0)),"hex8"===e&&(r=this.toHex8String()),"name"===e&&(r=this.toName()),"hsl"===e&&(r=this.toHslString()),"hsv"===e&&(r=this.toHsvString()),r||this.toHexString()):"name"===e&&0===this._a?this.toName():this.toRgbString()},clone:function(){return b(this.toString())},_applyModification:function(e,t){var r=e.apply(null,[this].concat([].slice.call(t)));return this._r=r._r,this._g=r._g,this._b=r._b,this.setAlpha(r._a),this},lighten:function(){return this._applyModification(A,arguments)},brighten:function(){return this._applyModification(N,arguments)},darken:function(){return this._applyModification(S,arguments)},desaturate:function(){return this._applyModification(_,arguments)},saturate:function(){return this._applyModification(x,arguments)},greyscale:function(){return this._applyModification(M,arguments)},spin:function(){return this._applyModification(V,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(j,arguments)},complement:function(){return this._applyCombination(C,arguments)},monochromatic:function(){return this._applyCombination(T,arguments)},splitcomplement:function(){return this._applyCombination(P,arguments)},triad:function(){return this._applyCombination(O,[3])},tetrad:function(){return this._applyCombination(O,[4])}},b.fromRatio=function(e,t){if("object"==p(e)){var r={};for(var n in e)e.hasOwnProperty(n)&&(r[n]="a"===n?e[n]:B(e[n]));e=r}return b(e,t)},b.equals=function(e,t){return!(!e||!t)&&b(e).toRgbString()==b(t).toRgbString()},b.random=function(){return b.fromRatio({r:Math.random(),g:Math.random(),b:Math.random()})},b.mix=function(e,t,r){r=0===r?0:r||50;var n=b(e).toRgb(),o=b(t).toRgb(),a=r/100;return b({r:(o.r-n.r)*a+n.r,g:(o.g-n.g)*a+n.g,b:(o.b-n.b)*a+n.b,a:(o.a-n.a)*a+n.a})},b.readability=function(e,t){var r=b(e),n=b(t);return(Math.max(r.getLuminance(),n.getLuminance())+.05)/(Math.min(r.getLuminance(),n.getLuminance())+.05)},b.isReadable=function(e,t,r){var n,o,a,i,c,u=b.readability(e,t);switch(o=!1,(a=r,"AA"!==(i=((a=a||{level:"AA",size:"small"}).level||"AA").toUpperCase())&&"AAA"!==i&&(i="AA"),"small"!==(c=(a.size||"small").toLowerCase())&&"large"!==c&&(c="small"),n={level:i,size:c}).level+n.size){case"AAsmall":case"AAAlarge":o=u>=4.5;break;case"AAlarge":o=u>=3;break;case"AAAsmall":o=u>=7}return o},b.mostReadable=function(e,t,r){var n,o,a,i,c=null,u=0;o=(r=r||{}).includeFallbackColors,a=r.level,i=r.size;for(var l=0;l<t.length;l++)(n=b.readability(e,t[l]))>u&&(u=n,c=b(t[l]));return b.isReadable(e,c,{level:a,size:i})||!o?c:(r.includeFallbackColors=!1,b.mostReadable(e,["#fff","#000"],r))};var R=b.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},F=b.hexNames=function(e){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[e[r]]=r);return t}(R);function H(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function D(e,t){(function(e){return"string"==typeof e&&-1!=e.indexOf(".")&&1===parseFloat(e)})(e)&&(e="100%");var r=function(e){return"string"==typeof e&&-1!=e.indexOf("%")}(e);return e=Math.min(t,Math.max(0,parseFloat(e))),r&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function E(e){return Math.min(1,Math.max(0,e))}function L(e){return parseInt(e,16)}function I(e){return 1==e.length?"0"+e:""+e}function B(e){return e<=1&&(e=100*e+"%"),e}function q(e){return Math.round(255*parseFloat(e)).toString(16)}function U(e){return L(e)/255}var z,K,W,X=(K="[\\s|\\(]+("+(z="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)")+")[,|\\s]+("+z+")[,|\\s]+("+z+")\\s*\\)?",W="[\\s|\\(]+("+z+")[,|\\s]+("+z+")[,|\\s]+("+z+")[,|\\s]+("+z+")\\s*\\)?",{CSS_UNIT:new RegExp(z),rgb:new RegExp("rgb"+K),rgba:new RegExp("rgba"+W),hsl:new RegExp("hsl"+K),hsla:new RegExp("hsla"+W),hsv:new RegExp("hsv"+K),hsva:new RegExp("hsva"+W),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/});function $(e){return!!X.CSS_UNIT.exec(e)}const Z=(e=>{var t={};return i.d(t,e),t})({toType:()=>r.toType}),G=(e=>{var t={};return i.d(t,e),t})({usePrefix:()=>n.usePrefix}),Y=(e=>{var t={};return i.d(t,e),t})({clickoutside:()=>o.clickoutside}),J=(e=>{var t={};return i.d(t,e),t})({AngleUp:()=>a.AngleUp});var Q={placement:{type:String,default:"bottom-start",validator:function(e){return!(["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"].indexOf(e)<0&&(console.error("placement property is not valid: '".concat(e,"'")),1))}},className:{type:String},extPopoverCls:{type:String},appendToBody:{type:Boolean},triggerRef:{type:Object},onClick:Function};const ee=(0,h.defineComponent)({props:Q,emits:["changeVisible"],setup:function(e,t){var r=t.emit,n=Object.create(null),o=(0,h.ref)(null);(0,h.onMounted)((function(){i()})),(0,h.onBeforeUnmount)((function(){a()}));var a=function(){if(n&&0!==Object.keys(n).length){var e=n;e.isShow&&e.hide(),e.destroy(),n=null,r("changeVisible",!1)}},i=function(){n&&0!==Object.keys(n).length?(0,h.nextTick)((function(){n.update()})):(0,h.nextTick)((function(){n=new u.BKPopover(e.triggerRef,o.value,{placement:e.placement,trigger:"manual",modifiers:[{name:"computeStyles",options:{adaptive:!1,gpuAcceleration:!1}},{name:"offset",options:{offset:[0,4]}}]})}))},c=(0,h.computed)((function(){var t={};return e.appendToBody&&(t["z-index"]=1060+u.bkZIndexManager.getModalNextIndex()),t})),l=(0,h.reactive)({styles:c}),s=(0,G.usePrefix)().resolveClassName;return Object.assign(Object.assign({},(0,h.toRefs)(l)),{refContentRef:o,forceUpdate:function(){var e;n&&(null===(e=null==n?void 0:n.forceUpdate)||void 0===e||e.call(n))},updateDropdown:i,destoryDropdown:a,resolveClassName:s})},render:function(){var e,t,r;return(0,h.createVNode)("div",{ref:"refContentRef",class:[this.resolveClassName("date-picker-dropdown"),this.className,this.extPopoverCls],style:this.styles,onClick:this.onClick},[null!==(r=null===(t=(e=this.$slots).default)||void 0===t?void 0:t.call(e))&&void 0!==r?r:""])}});var te={info:u.PropTypes.object.isRequired};const re=(0,h.defineComponent)({props:te,emits:["tab","input"],setup:function(e,t){var r=t.emit,n=function(t){"a"===e.info.key&&r("tab",t)},o=function(t){var n=e.info.key,o=t.target.value;r("input",n,o)},a=(0,G.usePrefix)().resolveClassName,i=(0,h.computed)((function(){return(0,u.classes)({error:e.info.error},"".concat(a("color-picker-input-value")))}));return function(){return(0,h.createVNode)("div",{class:"".concat(a("color-picker-input-part"))},[(0,h.createVNode)("input",{type:"HEX"===e.info.name?"text":"number",class:i.value,value:e.info.value,onKeydown:n,onInput:o},null),(0,h.createVNode)("span",{class:"".concat(a("color-picker-input-text"))},[e.info.name])])}}});var ne={colorObj:u.PropTypes.object.isRequired};const oe=(0,h.defineComponent)({name:"ColorPicker",props:ne,emits:["change","tab"],setup:function(e,t){var r=t.emit,n=(0,h.reactive)({key:"hex",name:"HEX",value:e.colorObj.hex,error:!1}),o=(0,h.reactive)({key:"r",name:"R",value:e.colorObj.rgba.r.toString(),error:!1}),a=(0,h.reactive)({key:"g",name:"G",value:e.colorObj.rgba.g.toString(),error:!1}),i=(0,h.reactive)({key:"b",name:"B",value:e.colorObj.rgba.b.toString(),error:!1}),c=(0,h.reactive)({key:"a",name:"Alpha",value:e.colorObj.rgba.a.toString(),error:!1});(0,h.watch)((function(){return e.colorObj}),(function(e){b(e.hex).toString()!==b(n.value).toString()&&(n.value=e.hex),o.value=e.rgba.r.toString(),a.value=e.rgba.g.toString(),i.value=e.rgba.b.toString(),c.value=e.rgba.a.toString(),s()}),{deep:!0});var u=function(e){r("tab",e)},l=function(e,t){if({r:o,g:a,b:i,a:c,hex:n}[e].value=t,s()){var u="hex"===e?n.value:"rgba(".concat(o.value,", ").concat(a.value,", ").concat(i.value,", ").concat(c.value,")");r("change",u)}},s=function(){var e=!0;!n.value.startsWith("#")||4!==n.value.length&&7!==n.value.length||n.value.slice(1).match(/[^0-9a-fA-F]/)?(n.error=!0,e=!1):n.error=!1,""!==c.value&&c.value>=0&&c.value<=1?c.error=!1:(c.error=!0,e=!1);for(var t=0,r=[o,a,i];t<r.length;t++){var u=r[t],l=u.value;""!==l&&l>=0&&l<=255?u.error=!1:(u.error=!0,e=!1)}return e},f=(0,G.usePrefix)().resolveClassName;return function(){return(0,h.createVNode)("div",{class:"".concat(f("color-picker-input"))},[(0,h.createVNode)("div",{class:"".concat(f("color-picker-input-hex"))},[(0,h.createVNode)(re,{info:n,onInput:l},null)]),(0,h.createVNode)("div",{class:"".concat(f("color-picker-input-rgba"))},[(0,h.createVNode)(re,{info:o,onInput:l},null),(0,h.createVNode)(re,{info:a,onInput:l},null),(0,h.createVNode)(re,{info:i,onInput:l},null),(0,h.createVNode)(re,{info:c,onInput:l,onTab:u},null)])])}}});var ae=function(e){var t=e;""===e&&(t="#FFFFFF");var r=b(e),n=r.toHsl(),o=r.toHsv();return 0===n.s&&(n.h=t.h||0,o.h=t.h||0),o.v<.0164&&(o.h=t.h||0,o.s=t.s||0),n.l<.01&&(n.h=t.h||0,n.s=t.s||0),{hsl:n,hsv:o,hex:r.toHexString().toUpperCase(),rgba:r.toRgb()}},ie=function(e,t,r){return e<t?t:e>r?r:e},ce=function(e,t){return e.touches?e.touches[0][t]:0},ue=function(e){var t=e.r,r=e.g,n=e.b,o=e.a;return"rgba(".concat([t,r,n,o].join(","),")")},le={colorObj:u.PropTypes.object.isRequired};const se=(0,h.defineComponent)({name:"ColorPicker",props:le,emits:["change"],setup:function(e,t){var r=t.emit,n=(0,h.ref)(null),o=(0,h.computed)((function(){return{left:"".concat(e.colorObj.hsv.h/360*100,"%")}})),a=function(t){var r=n.value.clientWidth,o=e.colorObj.hsv.h/360*r;switch(t.code){case"ArrowLeft":t.preventDefault(),o=ie(o-2,0,r);break;case"ArrowRight":t.preventDefault(),o=ie(o+2,0,r);break;case"ArrowUp":t.preventDefault(),o=ie(o-10,0,r);break;case"ArrowDown":t.preventDefault(),o=ie(o+10,0,r);break;default:return}c(null,o)},i=function e(){window.removeEventListener("mousemove",c),window.removeEventListener("mouseup",e)},c=function(e,t){var r=n.value.clientWidth,o=void 0!==t?t:u(e);l(o/r)},u=function(e){var t=n.value.getBoundingClientRect().left+window.pageXOffset,r=e.pageX||ce(e,"PageX");return ie(r-t,0,n.value.clientWidth)},l=function(t){var n=e.colorObj.hsl,o=n.h,a=n.s,i=n.l,c=n.a,u=360*t;o!==u&&r("change",{h:u,s:a,l:i,a:c})},s=(0,G.usePrefix)().resolveClassName;return function(){return(0,h.createVNode)("div",{ref:n,tabindex:"0",class:"".concat(s("color-picker-hue")),onKeydown:a,onMousedown:function(e){e.stopPropagation(),e.preventDefault(),function(e){n.value.focus(),c(e),window.addEventListener("mousemove",c,{passive:!0}),window.addEventListener("mouseup",i)}(e)}},[(0,h.createVNode)("div",{class:"".concat(s("color-picker-hue-pointer")),style:o.value},[(0,h.createVNode)("div",{class:"".concat(s("color-picker-hue-rectangle"))},null)])])}}});var fe={colorObj:u.PropTypes.object.isRequired,recommend:u.PropTypes.oneOfType([u.PropTypes.array.def((function(){return[]})),u.PropTypes.bool.def(!0)]).isRequired,recommendEmpty:u.PropTypes.bool.def(!0)};const de=(0,h.defineComponent)({props:fe,emits:["change","tab"],setup:function(e,t){var r=t.emit,n=(0,h.ref)(!1),o=(0,h.ref)(-1),a=(0,h.ref)(null);(0,h.watch)((function(){return e.colorObj}),(function(){o.value=-1,a.value=null}),{deep:!0});var i=(0,h.computed)((function(){return p(e.recommend)})),c=(0,G.usePrefix)().resolveClassName,l=function(e,t){var r;return(0,u.classes)((d(r={},"".concat(c("color-picker-empty")),""===e),d(r,"".concat(c("color-picker-recommend-selected-color")),n.value&&o.value===t),r),"".concat(c("color-picker-recommend-color")))},s=function(e){if("Tab"===e.code)r("tab",e);else{var t=0,n=i.value.length-1;switch(e.code){case"ArrowLeft":e.preventDefault(),t=ie(o.value-1,0,n);break;case"ArrowRight":e.preventDefault(),t=ie(o.value+1,0,n);break;case"ArrowUp":e.preventDefault(),t=ie(o.value-10,0,n);break;case"ArrowDown":e.preventDefault(),t=ie(o.value+10,0,n);break;default:return}f(t)}},f=function(e){var t=i.value[e];r("change",t),(0,h.nextTick)((function(){o.value=e,a.value=t}))},p=function(t){if(!0===t){var r=["#ff4500","#ff8c00","#ffd700","#90ee90","#ddffff","#00ced1","#3a84ff","#a933f5","#db7093","#000000","#494949","#9B9B9B","#ffffff"];return e.recommendEmpty&&r.unshift(""),r}if(Array.isArray(t))return t.map((function(e){return b(e).isValid()?e:""}))};return function(){return(0,h.createVNode)("div",{tabindex:"0",class:"".concat(c("color-picker-recommend")," "),onFocus:function(){return n.value=!0},onBlur:function(){return n.value=!1},onKeydown:s},[i.value.map((function(e,t){return(0,h.createVNode)("div",{style:"background: ".concat(e||"#fff"),class:l(e,t),onClick:function(){return f(t)}},[o.value===t?(0,h.createVNode)("div",{class:"".concat(c("color-picker-pointer"))},[(0,h.createVNode)("div",{class:"".concat(c("color-picker-circle"))},null)]):void 0])}))])}}});var he={colorObj:u.PropTypes.object.isRequired};const pe=(0,h.defineComponent)({props:he,emits:["change"],setup:function(e,t){var r=t.emit,n=(0,h.ref)(null),o=(0,h.computed)((function(){return{background:"hsl(".concat(e.colorObj.hsv.h,", 100%, 50%)")}})),a=(0,h.computed)((function(){return{top:"".concat(100*(1-e.colorObj.hsv.v),"%"),left:"".concat(100*e.colorObj.hsv.s,"%")}})),i=function e(){window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",e)},c=function(t){var r=n.value,o=r.clientWidth,a=r.clientHeight,i=e.colorObj.hsv.s*o,c=(1-e.colorObj.hsv.v)*a;switch(t.code){case"ArrowLeft":t.preventDefault(),i=ie(i-10,0,o);break;case"ArrowRight":t.preventDefault(),i=ie(i+10,0,o);break;case"ArrowUp":t.preventDefault(),c=ie(c-10,0,a);break;case"ArrowDown":t.preventDefault(),c=ie(c+10,0,a);break;default:return}u(null,i,c)},u=function(t,r,o){var a=n.value,i=a.clientWidth,c=a.clientHeight,u=(void 0!==r?r:l(t))/i,d=1-(void 0!==o?o:s(t))/c;f(e.colorObj.hsv.h,u,d,e.colorObj.hsv.a)},l=function(e){var t=n.value.getBoundingClientRect().left+window.pageXOffset,r=e.pageX||ce(e,"PageX");return ie(r-t,0,n.value.clientWidth)},s=function(e){var t=n.value.getBoundingClientRect().top+window.pageYOffset,r=e.pageY||ce(e,"PageY");return ie(r-t,0,n.value.clientHeight)},f=function(e,t,n,o){r("change",{h:e,s:t,v:n,a:o})},d=(0,G.usePrefix)().resolveClassName;return function(){return(0,h.createVNode)("div",{ref:n,tabindex:"0",class:"".concat(d("color-picker-saturation")),style:o.value,onKeydown:c,onMousedown:function(e){e.stopPropagation(),function(e){n.value.focus(),u(e),window.addEventListener("mousemove",u,{passive:!0}),window.addEventListener("mouseup",i)}(e)}},[(0,h.createVNode)("div",{class:"".concat(d("color-picker-saturation-white"))},null),(0,h.createVNode)("div",{class:"".concat(d("color-picker-saturation-black"))},null),(0,h.createVNode)("div",{class:"".concat(d("color-picker-pointer")),style:a.value},[(0,h.createVNode)("div",{class:"".concat(d("color-picker-circle"))},null)])])}}});var ve;!function(e){e.UNKNOWN="",e.SMALL="small",e.LARGE="large"}(ve||(ve={}));var ge={modelValue:u.PropTypes.string.def(""),disabled:u.PropTypes.bool.def(!1),readonly:u.PropTypes.bool.def(!1),transfer:u.PropTypes.bool.def(!1),size:(0,Z.toType)("colorPickSize",{}).def(ve.UNKNOWN),showValue:u.PropTypes.bool.def(!0),recommend:u.PropTypes.oneOfType([u.PropTypes.array.def((function(){return[]})),u.PropTypes.bool.def(!0)]).def(!0),extCls:u.PropTypes.string.def(""),withValidate:u.PropTypes.bool.def(!0),recommendEmpty:u.PropTypes.bool.def(!0)},be=ae("#FFFFFF");const me=(0,h.defineComponent)({name:"ColorPicker",directives:{clickoutside:Y.clickoutside},props:ge,emits:["update:modelValue","change"],setup:function(e,t){var r=t.emit,n=t.slots,o=(0,u.useFormItem)(),a=(0,h.ref)(!1),i=(0,h.ref)(""),c=(0,h.reactive)(JSON.parse(JSON.stringify(be))),l=(0,h.ref)(null),s=(0,h.ref)(null),f=(0,h.ref)(null),p=(0,G.usePrefix)().resolveClassName,v=(0,h.computed)((function(){var t;return(0,u.classes)((d(t={},"".concat(p("color-picker-".concat(e.size))),e.size),d(t,"".concat(p("color-picker-show-dropdown")),a.value),d(t,"".concat(p("color-picker-show-value")),e.showValue),d(t,"".concat(p("color-picker-disabled")),e.disabled||e.readonly),t),"".concat(p("color-picker")," ").concat(e.extCls))})),g=(0,h.computed)((function(){return Boolean(!0===e.recommend||Array.isArray(e.recommend)&&e.recommend.length)}));(0,h.onBeforeMount)((function(){A({isCreated:!0})})),(0,h.watch)((function(){return e.modelValue}),(function(){var t;A(),e.withValidate&&(null===(t=null==o?void 0:o.validate)||void 0===t||t.call(o,"change"))}));var m=function(e){"Enter"===e.code||"NumpadEnter"===e.code?w():"Escape"===e.code&&M()},y=function(t){e.transfer&&m(t)},w=function(){e.disabled||e.readonly||(a.value?M():x())},k=function(e){g.value||(e.preventDefault(),s.value.$el.focus())},_=function(e){e.preventDefault(),s.value.$el.focus()},x=function(){var e;a.value=!0,null===(e=l.value)||void 0===e||e.updateDropdown(),setTimeout((function(){l.value.$el.querySelector(".".concat(p("color-picker-input-hex")," .").concat(p("color-picker-input-value"))).select()}),100)},M=function(){var e;a.value&&((0,h.nextTick)((function(){return f.value.focus()})),a.value=!1,null===(e=l.value)||void 0===e||e.destoryDropdown(),A())},A=function(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).isCreated,n=void 0!==t&&t;if(""!==e.modelValue){var o=ae(e.modelValue),a=1===o.rgba.a?o.hex:ue(o.rgba);if(a!==i.value){var u=b(e.modelValue).isValid();n?u?(i.value=a.toLowerCase()===e.modelValue.toLowerCase()?e.modelValue:a,Object.assign(c,o)):(Object.assign(c,be),r("change","")):u?a.toLowerCase()!==i.value.toLowerCase()&&(Object.assign(c,o),i.value=a):(i.value="",Object.assign(c,be))}}else""!==i.value&&(i.value="",Object.assign(c,be),r("update:modelValue",i.value))},N=function(e){if(""===e)return i.value="",Object.assign(c,be),r("update:modelValue",""),void r("change","");var t=ae(e),n=1===t.rgba.a?t.hex:ue(t.rgba);i.value=n,Object.assign(c,t),r("update:modelValue",i.value),r("change",n)},S=function(){a.value=!1};return function(){return(0,h.withDirectives)((0,h.createVNode)("div",{ref:f,tabindex:"0",class:v.value,onKeydown:m,onClick:w},["function"==typeof n.trigger?n.trigger({value:i.value,isShowDropdown:a.value}):(0,h.createVNode)(h.Fragment,null,[(0,h.createVNode)("div",{class:"".concat(p("color-picker-color"))},[(0,h.createVNode)("span",{class:"".concat(p("color-picker-color-square")," ").concat(!i.value&&"".concat(p("color-picker-empty"))),style:"background: ".concat(i.value||"#FFF")},null)]),e.showValue?(0,h.createVNode)("div",{class:"".concat(p("color-picker-text"))},[(0,h.createVNode)("span",null,[i.value])]):void 0,(0,h.createVNode)("div",{class:"".concat(p("color-picker-icon"))},[(0,h.createVNode)(J.AngleUp,{class:"icon-angle-down"},null)])]),(0,h.createVNode)(h.Transition,{name:"bk-fade-down-transition"},{default:function(){return[(0,h.withDirectives)((0,h.createVNode)(ee,{ref:l,triggerRef:f.value},{default:function(){return[(0,h.createVNode)("div",{class:"".concat(p("color-dropdown-container"))},[(0,h.createVNode)("div",{class:"".concat(p("color-picker-dropdown")),onClick:function(e){e.stopPropagation()},onMousedown:function(e){e.stopPropagation()},onKeydown:y},[(0,h.createVNode)(pe,{ref:s,colorObj:c,onChange:N},null),(0,h.createVNode)(se,{colorObj:c,onChange:N},null),(0,h.createVNode)(oe,{colorObj:c,onTab:k,onChange:N},null),g.value?(0,h.createVNode)("div",{class:"".concat(p("color-picker-recommend-container"))},[(0,h.createVNode)(de,{colorObj:c,recommend:e.recommend,recommendEmpty:e.recommendEmpty,onTab:_,onChange:N},null)]):void 0])])]}}),[[h.vShow,a.value]])]}})]),[[(0,h.resolveDirective)("clickoutside"),S]])}}}),ye=(0,u.withInstall)(me);var we=c.Z;export{we as default};
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__ from "../directives";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["BKPopover"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.BKPopover, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.useFormItem, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeMount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeMount, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+;// CONCATENATED MODULE: ../../node_modules/tinycolor2/esm/tinycolor.js
+// This file is autogenerated. It's used to publish ESM to npm.
+function tinycolor_typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return tinycolor_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, tinycolor_typeof(obj);
+}
+
+// https://github.com/bgrins/TinyColor
+// Brian Grinstead, MIT License
+
+var trimLeft = /^\s+/;
+var trimRight = /\s+$/;
+function tinycolor(color, opts) {
+  color = color ? color : "";
+  opts = opts || {};
+
+  // If input is already a tinycolor, return itself
+  if (color instanceof tinycolor) {
+    return color;
+  }
+  // If we are called as a function, call using new instead
+  if (!(this instanceof tinycolor)) {
+    return new tinycolor(color, opts);
+  }
+  var rgb = inputToRGB(color);
+  this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
+  this._gradientType = opts.gradientType;
+
+  // Don't let the range of [0,255] come back in [0,1].
+  // Potentially lose a little bit of precision here, but will fix issues where
+  // .5 gets interpreted as half of the total, instead of half of 1
+  // If it was supposed to be 128, this was already taken care of by `inputToRgb`
+  if (this._r < 1) this._r = Math.round(this._r);
+  if (this._g < 1) this._g = Math.round(this._g);
+  if (this._b < 1) this._b = Math.round(this._b);
+  this._ok = rgb.ok;
+}
+tinycolor.prototype = {
+  isDark: function isDark() {
+    return this.getBrightness() < 128;
+  },
+  isLight: function isLight() {
+    return !this.isDark();
+  },
+  isValid: function isValid() {
+    return this._ok;
+  },
+  getOriginalInput: function getOriginalInput() {
+    return this._originalInput;
+  },
+  getFormat: function getFormat() {
+    return this._format;
+  },
+  getAlpha: function getAlpha() {
+    return this._a;
+  },
+  getBrightness: function getBrightness() {
+    //http://www.w3.org/TR/AERT#color-contrast
+    var rgb = this.toRgb();
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+  },
+  getLuminance: function getLuminance() {
+    //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+    var rgb = this.toRgb();
+    var RsRGB, GsRGB, BsRGB, R, G, B;
+    RsRGB = rgb.r / 255;
+    GsRGB = rgb.g / 255;
+    BsRGB = rgb.b / 255;
+    if (RsRGB <= 0.03928) R = RsRGB / 12.92;else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+    if (GsRGB <= 0.03928) G = GsRGB / 12.92;else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+    if (BsRGB <= 0.03928) B = BsRGB / 12.92;else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  },
+  setAlpha: function setAlpha(value) {
+    this._a = boundAlpha(value);
+    this._roundA = Math.round(100 * this._a) / 100;
+    return this;
+  },
+  toHsv: function toHsv() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v,
+      a: this._a
+    };
+  },
+  toHsvString: function toHsvString() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    var h = Math.round(hsv.h * 360),
+      s = Math.round(hsv.s * 100),
+      v = Math.round(hsv.v * 100);
+    return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
+  },
+  toHsl: function toHsl() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    return {
+      h: hsl.h * 360,
+      s: hsl.s,
+      l: hsl.l,
+      a: this._a
+    };
+  },
+  toHslString: function toHslString() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    var h = Math.round(hsl.h * 360),
+      s = Math.round(hsl.s * 100),
+      l = Math.round(hsl.l * 100);
+    return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
+  },
+  toHex: function toHex(allow3Char) {
+    return rgbToHex(this._r, this._g, this._b, allow3Char);
+  },
+  toHexString: function toHexString(allow3Char) {
+    return "#" + this.toHex(allow3Char);
+  },
+  toHex8: function toHex8(allow4Char) {
+    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+  },
+  toHex8String: function toHex8String(allow4Char) {
+    return "#" + this.toHex8(allow4Char);
+  },
+  toRgb: function toRgb() {
+    return {
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
+    };
+  },
+  toRgbString: function toRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
+  },
+  toPercentageRgb: function toPercentageRgb() {
+    return {
+      r: Math.round(bound01(this._r, 255) * 100) + "%",
+      g: Math.round(bound01(this._g, 255) * 100) + "%",
+      b: Math.round(bound01(this._b, 255) * 100) + "%",
+      a: this._a
+    };
+  },
+  toPercentageRgbString: function toPercentageRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+  },
+  toName: function toName() {
+    if (this._a === 0) {
+      return "transparent";
+    }
+    if (this._a < 1) {
+      return false;
+    }
+    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+  },
+  toFilter: function toFilter(secondColor) {
+    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
+    var secondHex8String = hex8String;
+    var gradientType = this._gradientType ? "GradientType = 1, " : "";
+    if (secondColor) {
+      var s = tinycolor(secondColor);
+      secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
+    }
+    return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
+  },
+  toString: function toString(format) {
+    var formatSet = !!format;
+    format = format || this._format;
+    var formattedString = false;
+    var hasAlpha = this._a < 1 && this._a >= 0;
+    var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
+    if (needsAlphaFormat) {
+      // Special case for "transparent", all other non-alpha formats
+      // will return rgba when there is transparency.
+      if (format === "name" && this._a === 0) {
+        return this.toName();
+      }
+      return this.toRgbString();
+    }
+    if (format === "rgb") {
+      formattedString = this.toRgbString();
+    }
+    if (format === "prgb") {
+      formattedString = this.toPercentageRgbString();
+    }
+    if (format === "hex" || format === "hex6") {
+      formattedString = this.toHexString();
+    }
+    if (format === "hex3") {
+      formattedString = this.toHexString(true);
+    }
+    if (format === "hex4") {
+      formattedString = this.toHex8String(true);
+    }
+    if (format === "hex8") {
+      formattedString = this.toHex8String();
+    }
+    if (format === "name") {
+      formattedString = this.toName();
+    }
+    if (format === "hsl") {
+      formattedString = this.toHslString();
+    }
+    if (format === "hsv") {
+      formattedString = this.toHsvString();
+    }
+    return formattedString || this.toHexString();
+  },
+  clone: function clone() {
+    return tinycolor(this.toString());
+  },
+  _applyModification: function _applyModification(fn, args) {
+    var color = fn.apply(null, [this].concat([].slice.call(args)));
+    this._r = color._r;
+    this._g = color._g;
+    this._b = color._b;
+    this.setAlpha(color._a);
+    return this;
+  },
+  lighten: function lighten() {
+    return this._applyModification(_lighten, arguments);
+  },
+  brighten: function brighten() {
+    return this._applyModification(_brighten, arguments);
+  },
+  darken: function darken() {
+    return this._applyModification(_darken, arguments);
+  },
+  desaturate: function desaturate() {
+    return this._applyModification(_desaturate, arguments);
+  },
+  saturate: function saturate() {
+    return this._applyModification(_saturate, arguments);
+  },
+  greyscale: function greyscale() {
+    return this._applyModification(_greyscale, arguments);
+  },
+  spin: function spin() {
+    return this._applyModification(_spin, arguments);
+  },
+  _applyCombination: function _applyCombination(fn, args) {
+    return fn.apply(null, [this].concat([].slice.call(args)));
+  },
+  analogous: function analogous() {
+    return this._applyCombination(_analogous, arguments);
+  },
+  complement: function complement() {
+    return this._applyCombination(_complement, arguments);
+  },
+  monochromatic: function monochromatic() {
+    return this._applyCombination(_monochromatic, arguments);
+  },
+  splitcomplement: function splitcomplement() {
+    return this._applyCombination(_splitcomplement, arguments);
+  },
+  // Disabled until https://github.com/bgrins/TinyColor/issues/254
+  // polyad: function (number) {
+  //   return this._applyCombination(polyad, [number]);
+  // },
+  triad: function triad() {
+    return this._applyCombination(polyad, [3]);
+  },
+  tetrad: function tetrad() {
+    return this._applyCombination(polyad, [4]);
+  }
+};
+
+// If input is an object, force 1 into "1.0" to handle ratios properly
+// String input requires "1.0" as input, so 1 will be treated as 1
+tinycolor.fromRatio = function (color, opts) {
+  if (tinycolor_typeof(color) == "object") {
+    var newColor = {};
+    for (var i in color) {
+      if (color.hasOwnProperty(i)) {
+        if (i === "a") {
+          newColor[i] = color[i];
+        } else {
+          newColor[i] = convertToPercentage(color[i]);
+        }
+      }
+    }
+    color = newColor;
+  }
+  return tinycolor(color, opts);
+};
+
+// Given a string or object, convert that input to RGB
+// Possible string inputs:
+//
+//     "red"
+//     "#f00" or "f00"
+//     "#ff0000" or "ff0000"
+//     "#ff000000" or "ff000000"
+//     "rgb 255 0 0" or "rgb (255, 0, 0)"
+//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+//
+function inputToRGB(color) {
+  var rgb = {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+  var a = 1;
+  var s = null;
+  var v = null;
+  var l = null;
+  var ok = false;
+  var format = false;
+  if (typeof color == "string") {
+    color = stringInputToObject(color);
+  }
+  if (tinycolor_typeof(color) == "object") {
+    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+      rgb = rgbToRgb(color.r, color.g, color.b);
+      ok = true;
+      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+      s = convertToPercentage(color.s);
+      v = convertToPercentage(color.v);
+      rgb = hsvToRgb(color.h, s, v);
+      ok = true;
+      format = "hsv";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      s = convertToPercentage(color.s);
+      l = convertToPercentage(color.l);
+      rgb = hslToRgb(color.h, s, l);
+      ok = true;
+      format = "hsl";
+    }
+    if (color.hasOwnProperty("a")) {
+      a = color.a;
+    }
+  }
+  a = boundAlpha(a);
+  return {
+    ok: ok,
+    format: color.format || format,
+    r: Math.min(255, Math.max(rgb.r, 0)),
+    g: Math.min(255, Math.max(rgb.g, 0)),
+    b: Math.min(255, Math.max(rgb.b, 0)),
+    a: a
+  };
+}
+
+// Conversion Functions
+// --------------------
+
+// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
+
+// `rgbToRgb`
+// Handle bounds / percentage checking to conform to CSS color spec
+// <http://www.w3.org/TR/css3-color/>
+// *Assumes:* r, g, b in [0, 255] or [0, 1]
+// *Returns:* { r, g, b } in [0, 255]
+function rgbToRgb(r, g, b) {
+  return {
+    r: bound01(r, 255) * 255,
+    g: bound01(g, 255) * 255,
+    b: bound01(b, 255) * 255
+  };
+}
+
+// `rgbToHsl`
+// Converts an RGB color value to HSL.
+// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
+// *Returns:* { h, s, l } in [0,1]
+function rgbToHsl(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0; // achromatic
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: h,
+    s: s,
+    l: l
+  };
+}
+
+// `hslToRgb`
+// Converts an HSL color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  h = bound01(h, 360);
+  s = bound01(s, 100);
+  l = bound01(l, 100);
+  function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+
+// `rgbToHsv`
+// Converts an RGB color value to HSV
+// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
+// *Returns:* { h, s, v } in [0,1]
+function rgbToHsv(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    v = max;
+  var d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0; // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: h,
+    s: s,
+    v: v
+  };
+}
+
+// `hsvToRgb`
+// Converts an HSV color value to RGB.
+// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
+// *Returns:* { r, g, b } in the set [0, 255]
+function hsvToRgb(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+  var i = Math.floor(h),
+    f = h - i,
+    p = v * (1 - s),
+    q = v * (1 - f * s),
+    t = v * (1 - (1 - f) * s),
+    mod = i % 6,
+    r = [v, q, p, p, t, v][mod],
+    g = [t, v, v, q, p, p][mod],
+    b = [p, p, t, v, v, q][mod];
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+
+// `rgbToHex`
+// Converts an RGB color to hex
+// Assumes r, g, and b are contained in the set [0, 255]
+// Returns a 3 or 6 character hex
+function rgbToHex(r, g, b, allow3Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+
+  // Return a 3 character hex if possible
+  if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+  }
+  return hex.join("");
+}
+
+// `rgbaToHex`
+// Converts an RGBA color plus alpha transparency to hex
+// Assumes r, g, b are contained in the set [0, 255] and
+// a in [0, 1]. Returns a 4 or 8 character rgba hex
+function rgbaToHex(r, g, b, a, allow4Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
+
+  // Return a 4 character hex if possible
+  if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  }
+  return hex.join("");
+}
+
+// `rgbaToArgbHex`
+// Converts an RGBA color to an ARGB Hex8 string
+// Rarely used, but required for "toFilter()"
+function rgbaToArgbHex(r, g, b, a) {
+  var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+  return hex.join("");
+}
+
+// `equals`
+// Can be called with any tinycolor input
+tinycolor.equals = function (color1, color2) {
+  if (!color1 || !color2) return false;
+  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+};
+tinycolor.random = function () {
+  return tinycolor.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+
+// Modification Functions
+// ----------------------
+// Thanks to less.js for some of the basics here
+// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
+
+function _desaturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s -= amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _saturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s += amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _greyscale(color) {
+  return tinycolor(color).desaturate(100);
+}
+function _lighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l += amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+function _brighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var rgb = tinycolor(color).toRgb();
+  rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
+  rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
+  rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
+  return tinycolor(rgb);
+}
+function _darken(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l -= amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+
+// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
+// Values outside of this range will be wrapped into this range.
+function _spin(color, amount) {
+  var hsl = tinycolor(color).toHsl();
+  var hue = (hsl.h + amount) % 360;
+  hsl.h = hue < 0 ? 360 + hue : hue;
+  return tinycolor(hsl);
+}
+
+// Combination Functions
+// ---------------------
+// Thanks to jQuery xColor for some of the ideas behind these
+// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
+
+function _complement(color) {
+  var hsl = tinycolor(color).toHsl();
+  hsl.h = (hsl.h + 180) % 360;
+  return tinycolor(hsl);
+}
+function polyad(color, number) {
+  if (isNaN(number) || number <= 0) {
+    throw new Error("Argument to polyad must be a positive number");
+  }
+  var hsl = tinycolor(color).toHsl();
+  var result = [tinycolor(color)];
+  var step = 360 / number;
+  for (var i = 1; i < number; i++) {
+    result.push(tinycolor({
+      h: (hsl.h + i * step) % 360,
+      s: hsl.s,
+      l: hsl.l
+    }));
+  }
+  return result;
+}
+function _splitcomplement(color) {
+  var hsl = tinycolor(color).toHsl();
+  var h = hsl.h;
+  return [tinycolor(color), tinycolor({
+    h: (h + 72) % 360,
+    s: hsl.s,
+    l: hsl.l
+  }), tinycolor({
+    h: (h + 216) % 360,
+    s: hsl.s,
+    l: hsl.l
+  })];
+}
+function _analogous(color, results, slices) {
+  results = results || 6;
+  slices = slices || 30;
+  var hsl = tinycolor(color).toHsl();
+  var part = 360 / slices;
+  var ret = [tinycolor(color)];
+  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
+    hsl.h = (hsl.h + part) % 360;
+    ret.push(tinycolor(hsl));
+  }
+  return ret;
+}
+function _monochromatic(color, results) {
+  results = results || 6;
+  var hsv = tinycolor(color).toHsv();
+  var h = hsv.h,
+    s = hsv.s,
+    v = hsv.v;
+  var ret = [];
+  var modification = 1 / results;
+  while (results--) {
+    ret.push(tinycolor({
+      h: h,
+      s: s,
+      v: v
+    }));
+    v = (v + modification) % 1;
+  }
+  return ret;
+}
+
+// Utility Functions
+// ---------------------
+
+tinycolor.mix = function (color1, color2, amount) {
+  amount = amount === 0 ? 0 : amount || 50;
+  var rgb1 = tinycolor(color1).toRgb();
+  var rgb2 = tinycolor(color2).toRgb();
+  var p = amount / 100;
+  var rgba = {
+    r: (rgb2.r - rgb1.r) * p + rgb1.r,
+    g: (rgb2.g - rgb1.g) * p + rgb1.g,
+    b: (rgb2.b - rgb1.b) * p + rgb1.b,
+    a: (rgb2.a - rgb1.a) * p + rgb1.a
+  };
+  return tinycolor(rgba);
+};
+
+// Readability Functions
+// ---------------------
+// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
+
+// `contrast`
+// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
+tinycolor.readability = function (color1, color2) {
+  var c1 = tinycolor(color1);
+  var c2 = tinycolor(color2);
+  return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
+};
+
+// `isReadable`
+// Ensure that foreground and background color combinations meet WCAG2 guidelines.
+// The third argument is an optional Object.
+//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
+//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
+// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
+
+// *Example*
+//    tinycolor.isReadable("#000", "#111") => false
+//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
+tinycolor.isReadable = function (color1, color2, wcag2) {
+  var readability = tinycolor.readability(color1, color2);
+  var wcag2Parms, out;
+  out = false;
+  wcag2Parms = validateWCAG2Parms(wcag2);
+  switch (wcag2Parms.level + wcag2Parms.size) {
+    case "AAsmall":
+    case "AAAlarge":
+      out = readability >= 4.5;
+      break;
+    case "AAlarge":
+      out = readability >= 3;
+      break;
+    case "AAAsmall":
+      out = readability >= 7;
+      break;
+  }
+  return out;
+};
+
+// `mostReadable`
+// Given a base color and a list of possible foreground or background
+// colors for that base, returns the most readable color.
+// Optionally returns Black or White if the most readable color is unreadable.
+// *Example*
+//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
+//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
+//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
+//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
+tinycolor.mostReadable = function (baseColor, colorList, args) {
+  var bestColor = null;
+  var bestScore = 0;
+  var readability;
+  var includeFallbackColors, level, size;
+  args = args || {};
+  includeFallbackColors = args.includeFallbackColors;
+  level = args.level;
+  size = args.size;
+  for (var i = 0; i < colorList.length; i++) {
+    readability = tinycolor.readability(baseColor, colorList[i]);
+    if (readability > bestScore) {
+      bestScore = readability;
+      bestColor = tinycolor(colorList[i]);
+    }
+  }
+  if (tinycolor.isReadable(baseColor, bestColor, {
+    level: level,
+    size: size
+  }) || !includeFallbackColors) {
+    return bestColor;
+  } else {
+    args.includeFallbackColors = false;
+    return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
+  }
+};
+
+// Big List of Colors
+// ------------------
+// <https://www.w3.org/TR/css-color-4/#named-colors>
+var names = tinycolor.names = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "0ff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "00f",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  burntsienna: "ea7e5d",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "0ff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "f0f",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+};
+
+// Make it easy to access colors via `hexNames[hex]`
+var hexNames = tinycolor.hexNames = flip(names);
+
+// Utilities
+// ---------
+
+// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
+function flip(o) {
+  var flipped = {};
+  for (var i in o) {
+    if (o.hasOwnProperty(i)) {
+      flipped[o[i]] = i;
+    }
+  }
+  return flipped;
+}
+
+// Return a valid alpha value [0,1] with all invalid values being set to 1
+function boundAlpha(a) {
+  a = parseFloat(a);
+  if (isNaN(a) || a < 0 || a > 1) {
+    a = 1;
+  }
+  return a;
+}
+
+// Take input from [0, n] and return it as [0, 1]
+function bound01(n, max) {
+  if (isOnePointZero(n)) n = "100%";
+  var processPercent = isPercentage(n);
+  n = Math.min(max, Math.max(0, parseFloat(n)));
+
+  // Automatically convert percentage into number
+  if (processPercent) {
+    n = parseInt(n * max, 10) / 100;
+  }
+
+  // Handle floating point rounding errors
+  if (Math.abs(n - max) < 0.000001) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return n % max / parseFloat(max);
+}
+
+// Force a number between 0 and 1
+function clamp01(val) {
+  return Math.min(1, Math.max(0, val));
+}
+
+// Parse a base-16 hex value into a base-10 integer
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+
+// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
+// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
+function isOnePointZero(n) {
+  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
+}
+
+// Check to see if string passed in is a percentage
+function isPercentage(n) {
+  return typeof n === "string" && n.indexOf("%") != -1;
+}
+
+// Force a hex value to have 2 characters
+function pad2(c) {
+  return c.length == 1 ? "0" + c : "" + c;
+}
+
+// Replace a decimal with it's percentage value
+function convertToPercentage(n) {
+  if (n <= 1) {
+    n = n * 100 + "%";
+  }
+  return n;
+}
+
+// Converts a decimal to a hex value
+function convertDecimalToHex(d) {
+  return Math.round(parseFloat(d) * 255).toString(16);
+}
+// Converts a hex value to a decimal
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
+}
+var matchers = function () {
+  // <http://www.w3.org/TR/css3-values/#integers>
+  var CSS_INTEGER = "[-\\+]?\\d+%?";
+
+  // <http://www.w3.org/TR/css3-values/#number-value>
+  var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
+
+  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
+  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+
+  // Actual matching.
+  // Parentheses and commas are optional, but not required.
+  // Whitespace can take the place of commas or opening paren
+  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  return {
+    CSS_UNIT: new RegExp(CSS_UNIT),
+    rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
+    rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+    hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+    hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+    hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+    hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+  };
+}();
+
+// `isValidCSSUnit`
+// Take in a single string / number and check to see if it looks like a CSS unit
+// (see `matchers` above for definition).
+function isValidCSSUnit(color) {
+  return !!matchers.CSS_UNIT.exec(color);
+}
+
+// `stringInputToObject`
+// Permissive string parsing.  Take in a number of formats, and output an object
+// based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
+function stringInputToObject(color) {
+  color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
+  var named = false;
+  if (names[color]) {
+    color = names[color];
+    named = true;
+  } else if (color == "transparent") {
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  }
+
+  // Try to match string input using regular expressions.
+  // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
+  // Just return an object and let the conversion functions handle that.
+  // This way the result will be the same whether the tinycolor is initialized with string or object.
+  var match;
+  if (match = matchers.rgb.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3]
+    };
+  }
+  if (match = matchers.rgba.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsl.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3]
+    };
+  }
+  if (match = matchers.hsla.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsv.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3]
+    };
+  }
+  if (match = matchers.hsva.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hex8.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      a: convertHexToDecimal(match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex6.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  if (match = matchers.hex4.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      a: convertHexToDecimal(match[4] + "" + match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex3.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  return false;
+}
+function validateWCAG2Parms(parms) {
+  // return valid WCAG2 parms for isReadable.
+  // If input parms are invalid, return {"level":"AA", "size":"small"}
+  var level, size;
+  parms = parms || {
+    level: "AA",
+    size: "small"
+  };
+  level = (parms.level || "AA").toUpperCase();
+  size = (parms.size || "small").toLowerCase();
+  if (level !== "AA" && level !== "AAA") {
+    level = "AA";
+  }
+  if (size !== "small" && size !== "large") {
+    size = "small";
+  }
+  return {
+    level: level,
+    size: size
+  };
+}
+
+
+
+;// CONCATENATED MODULE: external "vue-types"
+var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_types_y = x => () => x
+const external_vue_types_namespaceObject = external_vue_types_x({ ["toType"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.toType });
+;// CONCATENATED MODULE: external "../config-provider"
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
+;// CONCATENATED MODULE: external "../directives"
+var external_directives_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_directives_y = x => () => x
+const external_directives_namespaceObject = external_directives_x({ ["clickoutside"]: () => __WEBPACK_EXTERNAL_MODULE__directives_9cc9ba10__.clickoutside });
+;// CONCATENATED MODULE: external "../icon"
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["AngleUp"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleUp });
+;// CONCATENATED MODULE: ../../packages/date-picker/src/base/picker-dropdown.tsx
+
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+var pickerDropdownProps = {
+  placement: {
+    type: String,
+    "default": 'bottom-start',
+    validator: function validator(value) {
+      var validList = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'];
+      if (validList.indexOf(value) < 0) {
+        console.error("placement property is not valid: '".concat(value, "'"));
+        return false;
+      }
+      return true;
+    }
+  },
+  className: {
+    type: String
+  },
+  extPopoverCls: {
+    type: String
+  },
+  appendToBody: {
+    type: Boolean
+  },
+  triggerRef: {
+    type: Object
+  },
+  onClick: Function
+};
+/* harmony default export */ const picker_dropdown = ((0,external_vue_namespaceObject.defineComponent)({
+  props: pickerDropdownProps,
+  emits: ['changeVisible'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var popoverInstance = Object.create(null);
+    var refContentRef = (0,external_vue_namespaceObject.ref)(null);
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      updateDropdown();
+    });
+    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+      destoryDropdown();
+    });
+    // const resetTransformOrigin = (state) => {
+    //   if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
+    //     const dataPopperPlacement = state.attributes.popper['data-popper-placement'] as string;
+    //     const arr = dataPopperPlacement.split('-');
+    //     const placementStart = arr[0];
+    //     const placementEnd = arr[1];
+    //     const leftOrRight = dataPopperPlacement === 'left' || dataPopperPlacement === 'right';
+    //     if (!leftOrRight) {
+    //       state.styles.popper.transformOrigin = placementStart === 'bottom'
+    //         || (placementStart !== 'top' && placementEnd === 'start')
+    //         ? 'center top'
+    //         : 'center bottom';
+    //     }
+    //   }
+    // };
+    var forceUpdate = function forceUpdate() {
+      if (popoverInstance) {
+        var _popoverInstance, _popoverInstance$forc;
+        (_popoverInstance = popoverInstance) === null || _popoverInstance === void 0 || (_popoverInstance$forc = _popoverInstance.forceUpdate) === null || _popoverInstance$forc === void 0 ? void 0 : _popoverInstance$forc.call(_popoverInstance);
+      }
+    };
+    var destoryDropdown = function destoryDropdown() {
+      if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
+        var instance = popoverInstance;
+        instance.isShow && instance.hide();
+        instance.destroy();
+        popoverInstance = null;
+        emit('changeVisible', false);
+      }
+    };
+    // const transforms = {
+    //   top: 'bottom center',
+    //   'top-start': 'bottom left',
+    //   'top-end': 'bottom right',
+    //   bottom: 'top center',
+    //   'bottom-start': 'top left',
+    //   'bottom-end': 'top right',
+    //   left: 'right center',
+    //   'left-start': 'right top',
+    //   'left-end': 'right bottom',
+    //   right: 'left center',
+    //   'right-start': 'left top',
+    //   'right-end': 'left bottom',
+    // };
+    // const toTransformOrigin = (placement: Placement) => transforms[placement];
+    // const toVar = (value: string, fallback?: string) => ({
+    //   var: value,
+    //   varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`,
+    // });
+    // const cssVars = {
+    //   arrowShadowColor: toVar('--popper-arrow-shadow-color'),
+    //   arrowSize: toVar('--popper-arrow-size', '8px'),
+    //   arrowSizeHalf: toVar('--popper-arrow-size-half'),
+    //   arrowBg: toVar('--popper-arrow-bg'),
+    //   transformOrigin: toVar('--popper-transform-origin'),
+    //   arrowOffset: toVar('--popper-arrow-offset'),
+    // } as const;
+    // const setTransformOrigin = (state: State) => {
+    //   state.elements.popper.style.setProperty(
+    //     cssVars.transformOrigin.var,
+    //     toTransformOrigin(state.placement),
+    //   );
+    // };
+    // const transformOrigin: Modifier<'transformOrigin', any> = {
+    //   name: 'transformOrigin',
+    //   enabled: true,
+    //   phase: 'write',
+    //   fn: ({ state }) => {
+    //     setTransformOrigin(state);
+    //   },
+    //   effect: ({ state }) => () => {
+    //     setTransformOrigin(state);
+    //   },
+    // };
+    // const matchWidth: Modifier<'matchWidth', any> = {
+    //   name: 'matchWidth',
+    //   enabled: true,
+    //   phase: 'beforeWrite',
+    //   requires: ['computeStyles'],
+    //   fn: ({ state }) => {
+    //     state.styles.popper.width = `${state.rects.reference.width + 1}px`;
+    //   },
+    //   effect: ({ state }) => () => {
+    //     const reference = state.elements.reference as HTMLElement;
+    //     state.elements.popper.style.width = `${reference.offsetWidth}px`;
+    //   },
+    // };
+    var updateDropdown = function updateDropdown() {
+      if (popoverInstance && Object.keys(popoverInstance).length !== 0) {
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          popoverInstance.update();
+        });
+      } else {
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          popoverInstance = new external_shared_namespaceObject.BKPopover(props.triggerRef, refContentRef.value, {
+            placement: props.placement,
+            trigger: 'manual',
+            modifiers: [
+            // matchWidth,
+            // transformOrigin,
+            {
+              name: 'computeStyles',
+              options: {
+                adaptive: false,
+                gpuAcceleration: false
+              }
+            }, {
+              name: 'offset',
+              options: {
+                offset: [0, 4]
+              }
+            }
+            // {
+            //   name: 'preventOverflow',
+            //   options: {
+            //     // boundariesElement: 'window',
+            //     padding: {
+            //       top: 2,
+            //       bottom: 2,
+            //       left: 5,
+            //       right: 5,
+            //     },
+            //   },
+            // },
+            // {
+            //   name: 'flip',
+            //   options: {
+            //     padding: 5,
+            //     rootBoundary: 'document',
+            //   },
+            // },
+            // {
+            //   name: 'onUpdate',
+            //   enabled: true,
+            //   phase: 'afterWrite',
+            //   fn({ state }) {
+            //     resetTransformOrigin(state);
+            //   },
+            // },
+            ]
+            // onFirstUpdate: () => {
+            //   resetTransformOrigin(popoverInstance.instance.state);
+            // },
+          });
+          // popoverInstance.update();
+        });
+      }
+    };
+
+    var styles = (0,external_vue_namespaceObject.computed)(function () {
+      var style = {};
+      if (props.appendToBody) {
+        style['z-index'] = 1060 + external_shared_namespaceObject.bkZIndexManager.getModalNextIndex();
+      }
+      return style;
+    });
+    var state = (0,external_vue_namespaceObject.reactive)({
+      styles: styles
+    });
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return _objectSpread(_objectSpread({}, (0,external_vue_namespaceObject.toRefs)(state)), {}, {
+      refContentRef: refContentRef,
+      forceUpdate: forceUpdate,
+      updateDropdown: updateDropdown,
+      destoryDropdown: destoryDropdown,
+      resolveClassName: resolveClassName
+    });
+  },
+  render: function render() {
+    var _this$$slots$default, _this$$slots$default2, _this$$slots;
+    return (0,external_vue_namespaceObject.createVNode)("div", {
+      "ref": "refContentRef",
+      "class": [this.resolveClassName('date-picker-dropdown'), this.className, this.extPopoverCls],
+      "style": this.styles,
+      "onClick": this.onClick
+    }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots = this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/components/input-container.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+var inputContainerProps = {
+  info: external_shared_namespaceObject.PropTypes.object.isRequired
+};
+/* harmony default export */ const input_container = ((0,external_vue_namespaceObject.defineComponent)({
+  props: inputContainerProps,
+  emits: ['tab', 'input'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var handleTab = function handleTab(e) {
+      if (props.info.key === 'a') {
+        emit('tab', e);
+      }
+    };
+    var handleInput = function handleInput(e) {
+      var key = props.info.key;
+      var value = e.target.value;
+      emit('input', key, value);
+    };
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
+      return (0,external_shared_namespaceObject.classes)({
+        error: props.info.error
+      }, "".concat(resolveClassName('color-picker-input-value')));
+    });
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-input-part'))
+      }, [(0,external_vue_namespaceObject.createVNode)("input", {
+        "type": props.info.name === 'HEX' ? 'text' : 'number',
+        "class": colorPickerCls.value,
+        "value": props.info.value,
+        "onKeydown": handleTab,
+        "onInput": handleInput
+      }, null), (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "".concat(resolveClassName('color-picker-input-text'))
+      }, [props.info.name])]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/components/color-input.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+
+var colorPickerProps = {
+  colorObj: external_shared_namespaceObject.PropTypes.object.isRequired
+};
+/* harmony default export */ const color_input = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'ColorPicker',
+  props: colorPickerProps,
+  emits: ['change', 'tab'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var hex = (0,external_vue_namespaceObject.reactive)({
+      key: 'hex',
+      name: 'HEX',
+      value: props.colorObj.hex,
+      error: false
+    });
+    var r = (0,external_vue_namespaceObject.reactive)({
+      key: 'r',
+      name: 'R',
+      value: props.colorObj.rgba.r.toString(),
+      error: false
+    });
+    var g = (0,external_vue_namespaceObject.reactive)({
+      key: 'g',
+      name: 'G',
+      value: props.colorObj.rgba.g.toString(),
+      error: false
+    });
+    var b = (0,external_vue_namespaceObject.reactive)({
+      key: 'b',
+      name: 'B',
+      value: props.colorObj.rgba.b.toString(),
+      error: false
+    });
+    var a = (0,external_vue_namespaceObject.reactive)({
+      key: 'a',
+      name: 'Alpha',
+      value: props.colorObj.rgba.a.toString(),
+      error: false
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.colorObj;
+    }, function (val) {
+      if (tinycolor(val.hex).toString() !== tinycolor(hex.value).toString()) {
+        // 只有 hex 代表的颜色不同才同步，像这种手动输入了 #fEF 等价于 #ffeeff 就不同步
+        hex.value = val.hex;
+      }
+      r.value = val.rgba.r.toString();
+      g.value = val.rgba.g.toString();
+      b.value = val.rgba.b.toString();
+      a.value = val.rgba.a.toString();
+      // 每次变化时校验以更新存在的错误
+      validate();
+    }, {
+      deep: true
+    });
+    // 最后的 alpha 表单 tab 事件
+    var handleAlphaTab = function handleAlphaTab(e) {
+      emit('tab', e);
+    };
+    /**
+     * 处理手动输入颜色
+     * @param {String} key
+     * @param {String} value
+     */
+    var handleInput = function handleInput(key, value) {
+      var colorList = {
+        r: r,
+        g: g,
+        b: b,
+        a: a,
+        hex: hex
+      };
+      colorList[key].value = value;
+      if (validate()) {
+        var colorStr = key === 'hex' ? hex.value : "rgba(".concat(r.value, ", ").concat(g.value, ", ").concat(b.value, ", ").concat(a.value, ")");
+        emit('change', colorStr);
+      }
+    };
+    // 判断表单输入值是否合法
+    var validate = function validate() {
+      var result = true;
+      // hex
+      if (hex.value.startsWith('#') && (hex.value.length === 4 || hex.value.length === 7) && !hex.value.slice(1).match(/[^0-9a-fA-F]/)) {
+        hex.error = false;
+      } else {
+        hex.error = true;
+        result = false;
+      }
+      // a
+      if (a.value !== '' && a.value >= 0 && a.value <= 1) {
+        a.error = false;
+      } else {
+        a.error = true;
+        result = false;
+      }
+      // r g b
+      for (var _i = 0, _arr = [r, g, b]; _i < _arr.length; _i++) {
+        var colorInfo = _arr[_i];
+        var value = colorInfo.value;
+        if (value !== '' && value >= 0 && value <= 255) {
+          colorInfo.error = false;
+        } else {
+          colorInfo.error = true;
+          result = false;
+        }
+      }
+      return result;
+    };
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-input'))
+      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-input-hex'))
+      }, [(0,external_vue_namespaceObject.createVNode)(input_container, {
+        "info": hex,
+        "onInput": handleInput
+      }, null)]), (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-input-rgba'))
+      }, [(0,external_vue_namespaceObject.createVNode)(input_container, {
+        "info": r,
+        "onInput": handleInput
+      }, null), (0,external_vue_namespaceObject.createVNode)(input_container, {
+        "info": g,
+        "onInput": handleInput
+      }, null), (0,external_vue_namespaceObject.createVNode)(input_container, {
+        "info": b,
+        "onInput": handleInput
+      }, null), (0,external_vue_namespaceObject.createVNode)(input_container, {
+        "info": a,
+        "onInput": handleInput,
+        "onTab": handleAlphaTab
+      }, null)])]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/utils.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/**
+ * 根据饱和度面板、色值面板或普通色值标准化颜色信息
+ * @param {String|Object} colorParam - 色值信息
+ * @param {String} colorParam.h - 色相
+ * @param {String} colorParam.s - 饱和度
+ * @param {String} [colorParam.l] - 亮度
+ * @param {String} [colorParam.v] - 明度
+ * @param {String} colorParam.a - 透明度
+ * @returns {Object} - 转化后的色值对象
+ */
+var formatColor = function formatColor(colorParam) {
+  var colorValue = colorParam;
+  if (colorParam === '') {
+    colorValue = '#FFFFFF';
+  }
+  // 如果参数不合法会返回黑色#000相关信息
+  var tinyColor = tinycolor(colorParam);
+  var hsl = tinyColor.toHsl();
+  var hsv = tinyColor.toHsv();
+  // 因为饱和度为0时，颜色不受色相值影响，色相会置零，但是这里需要在面板中保存色相值
+  if (hsl.s === 0) {
+    hsl.h = colorValue.h || 0;
+    hsv.h = colorValue.h || 0;
+  }
+  // when the hsv.v is less than 0.0164 (base on test)
+  // because of possible loss of precision
+  // the result of hue and saturation would be miscalculated
+  if (hsv.v < 0.0164) {
+    hsv.h = colorValue.h || 0;
+    hsv.s = colorValue.s || 0;
+  }
+  if (hsl.l < 0.01) {
+    hsl.h = colorValue.h || 0;
+    hsl.s = colorValue.s || 0;
+  }
+  return {
+    hsl: hsl,
+    hsv: hsv,
+    hex: tinyColor.toHexString().toUpperCase(),
+    rgba: tinyColor.toRgb()
+  };
+};
+/**
+ * 返回指定闭区间数值
+ * @param {Number} value
+ * @param {Number} min
+ * @param {Number} max
+ * @returns {Number}
+ */
+var clamp = function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+/**
+ * 移动端获取事件位置
+ * @param {Object} e
+ * @param {String} prop
+ * @returns {Number}
+ */
+var getTouches = function getTouches(e, prop) {
+  return e.touches ? e.touches[0][prop] : 0;
+};
+/**
+ * 转化 rgba 色值字符串
+ * @param {Object} rgba
+ * @returns {String}
+ */
+var toRGBAString = function toRGBAString(rgba) {
+  var r = rgba.r,
+    g = rgba.g,
+    b = rgba.b,
+    a = rgba.a;
+  return "rgba(".concat([r, g, b, a].join(','), ")");
+};
+;// CONCATENATED MODULE: ../../packages/color-picker/src/components/hue-slider.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+var hue_slider_colorPickerProps = {
+  colorObj: external_shared_namespaceObject.PropTypes.object.isRequired
+};
+/* harmony default export */ const hue_slider = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'ColorPicker',
+  props: hue_slider_colorPickerProps,
+  emits: ['change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var containerRef = (0,external_vue_namespaceObject.ref)(null);
+    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        left: "".concat(props.colorObj.hsv.h / 360 * 100, "%")
+      };
+    });
+    var handleArrowKeydown = function handleArrowKeydown(e) {
+      var clientWidth = containerRef.value.clientWidth;
+      var left = props.colorObj.hsv.h / 360 * clientWidth;
+      var step = 2;
+      var hugeStep = 10;
+      switch (e.code) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          left = clamp(left - step, 0, clientWidth);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          left = clamp(left + step, 0, clientWidth);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          left = clamp(left - hugeStep, 0, clientWidth);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          left = clamp(left + hugeStep, 0, clientWidth);
+          break;
+        default:
+          return;
+      }
+      handlePointChange(null, left);
+    };
+    var handleMouseDown = function handleMouseDown(e) {
+      containerRef.value.focus();
+      handlePointChange(e);
+      window.addEventListener('mousemove', handlePointChange, {
+        passive: true
+      });
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+    var handleMouseUp = function handleMouseUp() {
+      window.removeEventListener('mousemove', handlePointChange);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    /**
+     * 色相面板变化
+     * @param {MouseEvent|null} e - 鼠标滑动事件
+     * @param {Number} [appointedLeft] - 键盘事件对应坐标，如果有就优先使用
+     */
+    var handlePointChange = function handlePointChange(e, appointedLeft) {
+      var clientWidth = containerRef.value.clientWidth;
+      var left = appointedLeft !== undefined ? appointedLeft : getLeft(e);
+      changeColor(left / clientWidth);
+    };
+    var getLeft = function getLeft(e) {
+      var xOffset = containerRef.value.getBoundingClientRect().left + window.pageXOffset;
+      var pageX = e.pageX || getTouches(e, 'PageX');
+      return clamp(pageX - xOffset, 0, containerRef.value.clientWidth);
+    };
+    var changeColor = function changeColor(ratio) {
+      var _props$colorObj$hsl = props.colorObj.hsl,
+        h = _props$colorObj$hsl.h,
+        s = _props$colorObj$hsl.s,
+        l = _props$colorObj$hsl.l,
+        a = _props$colorObj$hsl.a;
+      var newHue = ratio * 360;
+      if (h !== newHue) {
+        emit('change', {
+          h: newHue,
+          s: s,
+          l: l,
+          a: a
+        });
+      }
+    };
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "ref": containerRef,
+        "tabindex": "0",
+        "class": "".concat(resolveClassName('color-picker-hue')),
+        "onKeydown": handleArrowKeydown,
+        "onMousedown": function onMousedown(e) {
+          e.stopPropagation();
+          e.preventDefault();
+          handleMouseDown(e);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-hue-pointer')),
+        "style": pointerStyle.value
+      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-hue-rectangle'))
+      }, null)])]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/components/recommend-colors.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+
+var recommend_colors_colorPickerProps = {
+  colorObj: external_shared_namespaceObject.PropTypes.object.isRequired,
+  recommend: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.array.def(function () {
+    return [];
+  }), external_shared_namespaceObject.PropTypes.bool.def(true)]).isRequired,
+  recommendEmpty: external_shared_namespaceObject.PropTypes.bool.def(true)
+};
+/* harmony default export */ const recommend_colors = ((0,external_vue_namespaceObject.defineComponent)({
+  props: recommend_colors_colorPickerProps,
+  emits: ['change', 'tab'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var isFocused = (0,external_vue_namespaceObject.ref)(false);
+    var selectedIndex = (0,external_vue_namespaceObject.ref)(-1);
+    var selectedColor = (0,external_vue_namespaceObject.ref)(null);
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.colorObj;
+    }, function () {
+      // 每次在外部修改颜色后预设面板都会取消预设选择的样式，即便预设和当前色一样
+      // 预设里面修改颜色会在 $nextTick 恢复状态
+      selectedIndex.value = -1;
+      selectedColor.value = null;
+    }, {
+      deep: true
+    });
+    var colors = (0,external_vue_namespaceObject.computed)(function () {
+      return getColorsFromRecommend(props.recommend);
+    });
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var getColorClass = function getColorClass(color, index) {
+      var _classes;
+      return (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(resolveClassName('color-picker-empty')), color === ''), _defineProperty(_classes, "".concat(resolveClassName('color-picker-recommend-selected-color')), isFocused.value && selectedIndex.value === index), _classes), "".concat(resolveClassName('color-picker-recommend-color')));
+    };
+    var handleKeydown = function handleKeydown(e) {
+      if (e.code === 'Tab') {
+        emit('tab', e);
+      } else {
+        var index = 0;
+        var rowNum = 10; // 每行展示的颜色块个数，和样式相关联
+        var max = colors.value.length - 1;
+        switch (e.code) {
+          case 'ArrowLeft':
+            e.preventDefault();
+            index = clamp(selectedIndex.value - 1, 0, max);
+            break;
+          case 'ArrowRight':
+            e.preventDefault();
+            index = clamp(selectedIndex.value + 1, 0, max);
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            index = clamp(selectedIndex.value - rowNum, 0, max);
+            break;
+          case 'ArrowDown':
+            e.preventDefault();
+            index = clamp(selectedIndex.value + rowNum, 0, max);
+            break;
+          default:
+            return;
+        }
+        selectColor(index);
+      }
+    };
+    var selectColor = function selectColor(index) {
+      var color = colors.value[index];
+      emit('change', color);
+      // 预设里面修改颜色不重置状态（恢复状态）
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        selectedIndex.value = index;
+        selectedColor.value = color;
+      });
+    };
+    /**
+     * 校验、处理预设值
+     * @param {Boolean|String[]} recommend
+     * @returns {String[]}
+     */
+    var getColorsFromRecommend = function getColorsFromRecommend(recommend) {
+      if (recommend === true) {
+        var list = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#ddffff', '#00ced1', '#3a84ff', '#a933f5', '#db7093', '#000000', '#494949', '#9B9B9B', '#ffffff'];
+        if (props.recommendEmpty) {
+          list.unshift('');
+        }
+        return list;
+      }
+      if (Array.isArray(recommend)) {
+        // 如果预设值是无效的，这里按空字符串处理以显示提示用户，应该输入正确的色值
+        return recommend.map(function (color) {
+          return tinycolor(color).isValid() ? color : '';
+        });
+      }
+    };
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "tabindex": "0",
+        "class": "".concat(resolveClassName('color-picker-recommend'), " "),
+        "onFocus": function onFocus() {
+          return isFocused.value = true;
+        },
+        "onBlur": function onBlur() {
+          return isFocused.value = false;
+        },
+        "onKeydown": handleKeydown
+      }, [colors.value.map(function (color, index) {
+        return (0,external_vue_namespaceObject.createVNode)("div", {
+          "style": "background: ".concat(color || '#fff'),
+          "class": getColorClass(color, index),
+          "onClick": function onClick() {
+            return selectColor(index);
+          }
+        }, [selectedIndex.value === index ? (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": "".concat(resolveClassName('color-picker-pointer'))
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": "".concat(resolveClassName('color-picker-circle'))
+        }, null)]) : undefined]);
+      })]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/components/saturation-panel.tsx
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+var saturation_panel_colorPickerProps = {
+  colorObj: external_shared_namespaceObject.PropTypes.object.isRequired
+};
+/* harmony default export */ const saturation_panel = ((0,external_vue_namespaceObject.defineComponent)({
+  props: saturation_panel_colorPickerProps,
+  emits: ['change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var containerRef = (0,external_vue_namespaceObject.ref)(null);
+    var backgroundStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        background: "hsl(".concat(props.colorObj.hsv.h, ", 100%, 50%)")
+      };
+    });
+    var pointerStyle = (0,external_vue_namespaceObject.computed)(function () {
+      return {
+        top: "".concat((1 - props.colorObj.hsv.v) * 100, "%"),
+        left: "".concat(props.colorObj.hsv.s * 100, "%")
+      };
+    });
+    var handleMouseDown = function handleMouseDown(e) {
+      containerRef.value.focus();
+      handlePointChange(e);
+      window.addEventListener('mousemove', handlePointChange, {
+        passive: true
+      });
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+    var handleMouseUp = function handleMouseUp() {
+      window.removeEventListener('mousemove', handlePointChange);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+    var handleArrowKeydown = function handleArrowKeydown(e) {
+      var _containerRef$value = containerRef.value,
+        clientWidth = _containerRef$value.clientWidth,
+        clientHeight = _containerRef$value.clientHeight;
+      var left = props.colorObj.hsv.s * clientWidth;
+      var top = (1 - props.colorObj.hsv.v) * clientHeight;
+      var step = 10;
+      switch (e.code) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          left = clamp(left - step, 0, clientWidth);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          left = clamp(left + step, 0, clientWidth);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          top = clamp(top - step, 0, clientHeight);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          top = clamp(top + step, 0, clientHeight);
+          break;
+        default:
+          return;
+      }
+      handlePointChange(null, left, top);
+    };
+    /**
+     * 饱和度面板变化
+     * @param {MouseEvent|null} e - 鼠标滑动事件
+     * @param {Number} [appointedLeft] - 键盘事件对应坐标，如果有就优先使用
+     * @param {Number} [appointedTop] - 键盘事件对应坐标，如果有就优先使用
+     */
+    var handlePointChange = function handlePointChange(e, appointedLeft, appointedTop) {
+      var _containerRef$value2 = containerRef.value,
+        clientWidth = _containerRef$value2.clientWidth,
+        clientHeight = _containerRef$value2.clientHeight;
+      var left = appointedLeft !== undefined ? appointedLeft : getLeft(e);
+      var top = appointedTop !== undefined ? appointedTop : getTop(e);
+      var saturation = left / clientWidth;
+      var bright = 1 - top / clientHeight;
+      changeColor(props.colorObj.hsv.h, saturation, bright, props.colorObj.hsv.a);
+    };
+    var getLeft = function getLeft(e) {
+      var xOffset = containerRef.value.getBoundingClientRect().left + window.pageXOffset;
+      var pageX = e.pageX || getTouches(e, 'PageX');
+      return clamp(pageX - xOffset, 0, containerRef.value.clientWidth);
+    };
+    var getTop = function getTop(e) {
+      var yOffset = containerRef.value.getBoundingClientRect().top + window.pageYOffset;
+      var pageY = e.pageY || getTouches(e, 'PageY');
+      return clamp(pageY - yOffset, 0, containerRef.value.clientHeight);
+    };
+    var changeColor = function changeColor(h, s, v, a) {
+      emit('change', {
+        h: h,
+        s: s,
+        v: v,
+        a: a
+      });
+    };
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return function () {
+      return (0,external_vue_namespaceObject.createVNode)("div", {
+        "ref": containerRef,
+        "tabindex": "0",
+        "class": "".concat(resolveClassName('color-picker-saturation')),
+        "style": backgroundStyle.value,
+        "onKeydown": handleArrowKeydown,
+        "onMousedown": function onMousedown(e) {
+          e.stopPropagation();
+          handleMouseDown(e);
+        }
+      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-saturation-white'))
+      }, null), (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-saturation-black'))
+      }, null), (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-pointer')),
+        "style": pointerStyle.value
+      }, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-circle'))
+      }, null)])]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/color-picker.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+
+
+
+
+
+
+
+
+
+var ColorPickSizeEnum;
+(function (ColorPickSizeEnum) {
+  ColorPickSizeEnum["UNKNOWN"] = "";
+  ColorPickSizeEnum["SMALL"] = "small";
+  ColorPickSizeEnum["LARGE"] = "large";
+})(ColorPickSizeEnum || (ColorPickSizeEnum = {}));
+var color_picker_colorPickerProps = {
+  modelValue: external_shared_namespaceObject.PropTypes.string.def(''),
+  disabled: external_shared_namespaceObject.PropTypes.bool.def(false),
+  readonly: external_shared_namespaceObject.PropTypes.bool.def(false),
+  transfer: external_shared_namespaceObject.PropTypes.bool.def(false),
+  size: (0,external_vue_types_namespaceObject.toType)('colorPickSize', {}).def(ColorPickSizeEnum.UNKNOWN),
+  showValue: external_shared_namespaceObject.PropTypes.bool.def(true),
+  // true 展示组件内置预设值
+  // false 不展示预设值
+  // 数组 自定义预设值
+  recommend: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.array.def(function () {
+    return [];
+  }), external_shared_namespaceObject.PropTypes.bool.def(true)]).def(true),
+  extCls: external_shared_namespaceObject.PropTypes.string.def(''),
+  withValidate: external_shared_namespaceObject.PropTypes.bool.def(true),
+  recommendEmpty: external_shared_namespaceObject.PropTypes.bool.def(true)
+};
+var whiteColorObj = formatColor('#FFFFFF');
+/* harmony default export */ const color_picker = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'ColorPicker',
+  directives: {
+    clickoutside: external_directives_namespaceObject.clickoutside
+  },
+  props: color_picker_colorPickerProps,
+  emits: ['update:modelValue', 'change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      slots = _ref.slots;
+    var formItem = (0,external_shared_namespaceObject.useFormItem)();
+    var showDropdown = (0,external_vue_namespaceObject.ref)(false);
+    // 当前颜色的色值，如果为空字符串显示：默认白色背景 + 中间一个叉
+    var colorStr = (0,external_vue_namespaceObject.ref)('');
+    // 储存当前颜色的相关信息
+    var colorObj = (0,external_vue_namespaceObject.reactive)(JSON.parse(JSON.stringify(whiteColorObj)));
+    var dropRef = (0,external_vue_namespaceObject.ref)(null);
+    var saturationPanelRef = (0,external_vue_namespaceObject.ref)(null);
+    var referenceRef = (0,external_vue_namespaceObject.ref)(null);
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    var colorPickerCls = (0,external_vue_namespaceObject.computed)(function () {
+      var _classes;
+      return (0,external_shared_namespaceObject.classes)((_classes = {}, _defineProperty(_classes, "".concat(resolveClassName("color-picker-".concat(props.size))), props.size), _defineProperty(_classes, "".concat(resolveClassName('color-picker-show-dropdown')), showDropdown.value), _defineProperty(_classes, "".concat(resolveClassName('color-picker-show-value')), props.showValue), _defineProperty(_classes, "".concat(resolveClassName('color-picker-disabled')), props.disabled || props.readonly), _classes), "".concat(resolveClassName('color-picker'), " ").concat(props.extCls));
+    });
+    // 是否渲染预设值
+    var isRenderRecommend = (0,external_vue_namespaceObject.computed)(function () {
+      return Boolean(props.recommend === true || Array.isArray(props.recommend) && props.recommend.length);
+    });
+    (0,external_vue_namespaceObject.onBeforeMount)(function () {
+      // 1. 组件初始化时，如果计算的色值和传入的值不一样，显示计算的色值
+      changeColorFromProps({
+        isCreated: true
+      });
+    });
+    (0,external_vue_namespaceObject.watch)(function () {
+      return props.modelValue;
+    }, function () {
+      // 2. 如果组件绑定值被外部修改，自动根据绑定至更新组件色值
+      changeColorFromProps();
+      if (props.withValidate) {
+        var _formItem$validate;
+        formItem === null || formItem === void 0 || (_formItem$validate = formItem.validate) === null || _formItem$validate === void 0 ? void 0 : _formItem$validate.call(formItem, 'change');
+      }
+    });
+    var handleTriggerKeydown = function handleTriggerKeydown(e) {
+      if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+        toggleDropdown();
+      } else if (e.code === 'Escape') {
+        closeDropdown();
+      }
+    };
+    var handleDropdownKeydown = function handleDropdownKeydown(e) {
+      if (props.transfer) {
+        handleTriggerKeydown(e);
+      }
+    };
+    var toggleDropdown = function toggleDropdown() {
+      if (props.disabled || props.readonly) {
+        return;
+      }
+      showDropdown.value ? closeDropdown() : openDropdown();
+    };
+    // 如果未开启预设则此 tab 事件为颜色选择器最后一个表单 tab 事件，重新聚焦于饱和度面板
+    var handleTabInput = function handleTabInput(e) {
+      if (!isRenderRecommend.value) {
+        e.preventDefault();
+        saturationPanelRef.value.$el.focus();
+      }
+    };
+    // 颜色选择器最后一个表单 tab 事件，重新聚焦于饱和度面板
+    var handleTabRecommend = function handleTabRecommend(e) {
+      e.preventDefault();
+      saturationPanelRef.value.$el.focus();
+    };
+    var openDropdown = function openDropdown() {
+      var _dropRef$value;
+      showDropdown.value = true;
+      (_dropRef$value = dropRef.value) === null || _dropRef$value === void 0 ? void 0 : _dropRef$value.updateDropdown();
+      // 展开后默认聚焦于 HEX 输入框，setTimeout 等 transfer 出现
+      setTimeout(function () {
+        var hexInput = dropRef.value.$el.querySelector(".".concat(resolveClassName('color-picker-input-hex'), " .").concat(resolveClassName('color-picker-input-value')));
+        hexInput.select();
+      }, 100);
+    };
+    var closeDropdown = function closeDropdown() {
+      if (showDropdown.value) {
+        var _dropRef$value2;
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          return referenceRef.value.focus();
+        });
+        showDropdown.value = false;
+        (_dropRef$value2 = dropRef.value) === null || _dropRef$value2 === void 0 ? void 0 : _dropRef$value2.destoryDropdown();
+        // 3. 关闭组件时如果绑定值与组件内部选择的值不一致（比如既没有使用 v-model 也没有监听 change 事件）显示绑定值
+        changeColorFromProps();
+      }
+    };
+    /**
+     * created 时、props.value 变化时、每次关闭组件时调用
+     * @param {Object} option
+     * @param {Boolean} [option.isCreated = false] - 是否是实例创建完成后的第一次调用
+     */
+    var changeColorFromProps = function changeColorFromProps() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref2$isCreated = _ref2.isCreated,
+        isCreated = _ref2$isCreated === void 0 ? false : _ref2$isCreated;
+      // 空字符串为默认值且合法
+      if (props.modelValue === '') {
+        // 颜色选择器有色值，用户手动修改为空字符串；或用户关闭组件时绑定的value为空字符串（没有使用组件传递的值）
+        if (colorStr.value !== '') {
+          colorStr.value = '';
+          Object.assign(colorObj, whiteColorObj);
+          emit('update:modelValue', colorStr.value);
+        }
+        return;
+      }
+      // 根据 props 计算色值
+      var propsColorObj = formatColor(props.modelValue);
+      var propsColorStr = propsColorObj.rgba.a === 1 ? propsColorObj.hex : toRGBAString(propsColorObj.rgba);
+      // 根据 props 计算的色值和组件内部色值不一致，有几种情况
+      if (propsColorStr !== colorStr.value) {
+        // 传入的值是否是合法的色值
+        var isValid = tinycolor(props.modelValue).isValid();
+        // 实例挂载之前
+        if (isCreated) {
+          // 传入了非法的色值，按空字符串处理并触发 change 事件
+          if (!isValid) {
+            Object.assign(colorObj, whiteColorObj);
+            emit('change', '');
+          } else {
+            // 到了这里，说明传入的色值已经计算出来了，是合法的，但可能存在格式上的偏差，如用户传入 #fff 计算得 #FFFFFF
+            colorStr.value = propsColorStr.toLowerCase() === props.modelValue.toLowerCase() ? props.modelValue // 如果只是大小写不一致，显示用户传入的字符
+            : propsColorStr; // 其它格式上的不一致，以本组件计算值为准
+            Object.assign(colorObj, propsColorObj);
+          }
+        } else {
+          // 实例挂载之后
+          // 用户在实例挂载之后在组件外面修改色值 组件内部只是跟着 props 变化色值 并不触发 change 事件
+          if (!isValid) {
+            colorStr.value = '';
+            Object.assign(colorObj, whiteColorObj);
+          } else if (propsColorStr.toLowerCase() !== colorStr.value.toLowerCase()) {
+            // 如果只是外部传入的值和当前组件显示的的值大小写不一致，不作处理
+            // 比如 this.value === '#ffffff'，计算值为 '#FFFFFF'，不进行下面的处理直接显示 '#ffffff'
+            // 反之显示内部计算值：
+            Object.assign(colorObj, propsColorObj);
+            colorStr.value = propsColorStr;
+          }
+        }
+      }
+    };
+    /**
+     * 组件内部选择颜色处理
+     * @param {String|Object} val - hex,rgba,hsla,hsva
+     */
+    var handleColorChange = function handleColorChange(val) {
+      // 组件内拿到的色值都是合法的，空字符串特殊处理
+      if (val === '') {
+        colorStr.value = '';
+        Object.assign(colorObj, whiteColorObj);
+        emit('update:modelValue', '');
+        emit('change', '');
+        return;
+      }
+      var handleColorObj = formatColor(val);
+      var handleColorStr = handleColorObj.rgba.a === 1 ? handleColorObj.hex : toRGBAString(handleColorObj.rgba);
+      colorStr.value = handleColorStr;
+      Object.assign(colorObj, handleColorObj);
+      emit('update:modelValue', colorStr.value);
+      emit('change', handleColorStr);
+    };
+    var hideDropDown = function hideDropDown() {
+      showDropdown.value = false;
+    };
+    return function () {
+      return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+        "ref": referenceRef,
+        "tabindex": "0",
+        "class": colorPickerCls.value,
+        "onKeydown": handleTriggerKeydown,
+        "onClick": toggleDropdown
+      }, [typeof slots.trigger === 'function' ? slots.trigger({
+        value: colorStr.value,
+        isShowDropdown: showDropdown.value
+      }) : (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-color'))
+      }, [(0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "".concat(resolveClassName('color-picker-color-square'), " ").concat(!colorStr.value && "".concat(resolveClassName('color-picker-empty'))),
+        "style": "background: ".concat(colorStr.value || '#FFF')
+      }, null)]), props.showValue ? (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-text'))
+      }, [(0,external_vue_namespaceObject.createVNode)("span", null, [colorStr.value])]) : undefined, (0,external_vue_namespaceObject.createVNode)("div", {
+        "class": "".concat(resolveClassName('color-picker-icon'))
+      }, [(0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleUp, {
+        "class": "icon-angle-down"
+      }, null)])]), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+        "name": "bk-fade-down-transition"
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)(picker_dropdown, {
+            "ref": dropRef,
+            "triggerRef": referenceRef.value
+          }, {
+            "default": function _default() {
+              return [(0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "".concat(resolveClassName('color-dropdown-container'))
+              }, [(0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "".concat(resolveClassName('color-picker-dropdown')),
+                "onClick": function onClick(e) {
+                  e.stopPropagation();
+                },
+                "onMousedown": function onMousedown(e) {
+                  e.stopPropagation();
+                },
+                "onKeydown": handleDropdownKeydown
+              }, [(0,external_vue_namespaceObject.createVNode)(saturation_panel, {
+                "ref": saturationPanelRef,
+                "colorObj": colorObj,
+                "onChange": handleColorChange
+              }, null), (0,external_vue_namespaceObject.createVNode)(hue_slider, {
+                "colorObj": colorObj,
+                "onChange": handleColorChange
+              }, null), (0,external_vue_namespaceObject.createVNode)(color_input, {
+                "colorObj": colorObj,
+                "onTab": handleTabInput,
+                "onChange": handleColorChange
+              }, null), isRenderRecommend.value ? (0,external_vue_namespaceObject.createVNode)("div", {
+                "class": "".concat(resolveClassName('color-picker-recommend-container'))
+              }, [(0,external_vue_namespaceObject.createVNode)(recommend_colors, {
+                "colorObj": colorObj,
+                "recommend": props.recommend,
+                "recommendEmpty": props.recommendEmpty,
+                "onTab": handleTabRecommend,
+                "onChange": handleColorChange
+              }, null)]) : undefined])])];
+            }
+          }), [[external_vue_namespaceObject.vShow, showDropdown.value]])];
+        }
+      })]), [[(0,external_vue_namespaceObject.resolveDirective)("clickoutside"), hideDropDown]]);
+    };
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/color-picker/src/index.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+var BkColorPicker = (0,external_shared_namespaceObject.withInstall)(color_picker);
+/* harmony default export */ const src = (BkColorPicker);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };