bkui-vue 0.0.1-beta.393 → 0.0.1-beta.394

package/lib/color-picker/index.js

@@ -1,2816 +1 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("../shared"), require("vue"), require("vue-types"), require("../directives"), require("../icon"));
-	else if(typeof define === 'function' && define.amd)
-		define(["../shared", "vue", "vue-types", "../directives", "../icon"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("../shared"), require("vue"), require("vue-types"), require("../directives"), require("../icon")) : factory(root["../shared"], root["vue"], root["vue-types"], root["../directives"], root["../icon"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
-})(self, (__WEBPACK_EXTERNAL_MODULE__4212__, __WEBPACK_EXTERNAL_MODULE__748__, __WEBPACK_EXTERNAL_MODULE__210__, __WEBPACK_EXTERNAL_MODULE__4061__, __WEBPACK_EXTERNAL_MODULE__6870__) => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	var __webpack_modules__ = ({
-
-/***/ 8621:
-/***/ ((module, exports, __webpack_require__) => {
-
-var __WEBPACK_AMD_DEFINE_RESULT__;// TinyColor v1.4.2
-// https://github.com/bgrins/TinyColor
-// Brian Grinstead, MIT License
-
-(function(Math) {
-
-var trimLeft = /^\s+/,
-    trimRight = /\s+$/,
-    tinyCounter = 0,
-    mathRound = Math.round,
-    mathMin = Math.min,
-    mathMax = Math.max,
-    mathRandom = Math.random;
-
-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 = mathRound(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 = mathRound(this._r); }
-    if (this._g < 1) { this._g = mathRound(this._g); }
-    if (this._b < 1) { this._b = mathRound(this._b); }
-
-    this._ok = rgb.ok;
-    this._tc_id = tinyCounter++;
-}
-
-tinycolor.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() {
-        //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() {
-        //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(value) {
-        this._a = boundAlpha(value);
-        this._roundA = mathRound(100*this._a) / 100;
-        return this;
-    },
-    toHsv: function() {
-        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() {
-        var hsv = rgbToHsv(this._r, this._g, this._b);
-        var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
-        return (this._a == 1) ?
-          "hsv("  + h + ", " + s + "%, " + v + "%)" :
-          "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
-    },
-    toHsl: function() {
-        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() {
-        var hsl = rgbToHsl(this._r, this._g, this._b);
-        var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
-        return (this._a == 1) ?
-          "hsl("  + h + ", " + s + "%, " + l + "%)" :
-          "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
-    },
-    toHex: function(allow3Char) {
-        return rgbToHex(this._r, this._g, this._b, allow3Char);
-    },
-    toHexString: function(allow3Char) {
-        return '#' + this.toHex(allow3Char);
-    },
-    toHex8: function(allow4Char) {
-        return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
-    },
-    toHex8String: function(allow4Char) {
-        return '#' + this.toHex8(allow4Char);
-    },
-    toRgb: function() {
-        return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
-    },
-    toRgbString: function() {
-        return (this._a == 1) ?
-          "rgb("  + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
-          "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
-    },
-    toPercentageRgb: function() {
-        return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
-    },
-    toPercentageRgbString: function() {
-        return (this._a == 1) ?
-          "rgb("  + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
-          "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
-    },
-    toName: function() {
-        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(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(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() {
-        return tinycolor(this.toString());
-    },
-
-    _applyModification: function(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() {
-        return this._applyModification(lighten, arguments);
-    },
-    brighten: function() {
-        return this._applyModification(brighten, arguments);
-    },
-    darken: function() {
-        return this._applyModification(darken, arguments);
-    },
-    desaturate: function() {
-        return this._applyModification(desaturate, arguments);
-    },
-    saturate: function() {
-        return this._applyModification(saturate, arguments);
-    },
-    greyscale: function() {
-        return this._applyModification(greyscale, arguments);
-    },
-    spin: function() {
-        return this._applyModification(spin, arguments);
-    },
-
-    _applyCombination: function(fn, args) {
-        return fn.apply(null, [this].concat([].slice.call(args)));
-    },
-    analogous: function() {
-        return this._applyCombination(analogous, arguments);
-    },
-    complement: function() {
-        return this._applyCombination(complement, arguments);
-    },
-    monochromatic: function() {
-        return this._applyCombination(monochromatic, arguments);
-    },
-    splitcomplement: function() {
-        return this._applyCombination(splitcomplement, arguments);
-    },
-    triad: function() {
-        return this._applyCombination(triad, arguments);
-    },
-    tetrad: function() {
-        return this._applyCombination(tetrad, arguments);
-    }
-};
-
-// 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 (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 (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: mathMin(255, mathMax(rgb.r, 0)),
-        g: mathMin(255, mathMax(rgb.g, 0)),
-        b: mathMin(255, mathMax(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 = mathMax(r, g, b), min = mathMin(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 = mathMax(r, g, b), min = mathMin(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(mathRound(r).toString(16)),
-        pad2(mathRound(g).toString(16)),
-        pad2(mathRound(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(mathRound(r).toString(16)),
-        pad2(mathRound(g).toString(16)),
-        pad2(mathRound(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(mathRound(r).toString(16)),
-        pad2(mathRound(g).toString(16)),
-        pad2(mathRound(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: mathRandom(),
-        g: mathRandom(),
-        b: mathRandom()
-    });
-};
-
-
-// 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 = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
-    rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
-    rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(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 triad(color) {
-    var hsl = tinycolor(color).toHsl();
-    var h = hsl.h;
-    return [
-        tinycolor(color),
-        tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
-        tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
-    ];
-}
-
-function tetrad(color) {
-    var hsl = tinycolor(color).toHsl();
-    var h = hsl.h;
-    return [
-        tinycolor(color),
-        tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
-        tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
-        tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
-    ];
-}
-
-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
-// ------------------
-// <http://www.w3.org/TR/css3-color/#svg-color>
-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 = mathMin(max, mathMax(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 mathMin(1, mathMax(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};
-}
-
-// Node: Export function
-if ( true && module.exports) {
-    module.exports = tinycolor;
-}
-// AMD/requirejs: Define the module
-else if (true) {
-    !(__WEBPACK_AMD_DEFINE_RESULT__ = (function () {return tinycolor;}).call(exports, __webpack_require__, exports, module),
-		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-}
-// Browser: Expose to window
-else {}
-
-})(Math);
-
-
-/***/ }),
-
-/***/ 4061:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__4061__;
-
-/***/ }),
-
-/***/ 6870:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__6870__;
-
-/***/ }),
-
-/***/ 4212:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__4212__;
-
-/***/ }),
-
-/***/ 748:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__748__;
-
-/***/ }),
-
-/***/ 210:
-/***/ ((module) => {
-
-"use strict";
-module.exports = __WEBPACK_EXTERNAL_MODULE__210__;
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* 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))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be in strict mode.
-(() => {
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ src)
-});
-
-// EXTERNAL MODULE: external "../shared"
-var external_shared_ = __webpack_require__(4212);
-;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-// EXTERNAL MODULE: external "vue"
-var external_vue_ = __webpack_require__(748);
-// EXTERNAL MODULE: ../../node_modules/tinycolor2/tinycolor.js
-var tinycolor = __webpack_require__(8621);
-var tinycolor_default = /*#__PURE__*/__webpack_require__.n(tinycolor);
-// EXTERNAL MODULE: external "vue-types"
-var external_vue_types_ = __webpack_require__(210);
-// EXTERNAL MODULE: external "../directives"
-var external_directives_ = __webpack_require__(4061);
-// EXTERNAL MODULE: external "../icon"
-var external_icon_ = __webpack_require__(6870);
-;// CONCATENATED MODULE: ../../packages/date-picker/src/base/picker-dropdown.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 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_.defineComponent)({
-  props: pickerDropdownProps,
-  emits: ['changeVisible'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var popoverInstance = Object.create(null);
-    var refContentRef = (0,external_vue_.ref)(null);
-    (0,external_vue_.onMounted)(function () {
-      updateDropdown();
-    });
-    (0,external_vue_.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() {
-      var _a;
-
-      if (popoverInstance) {
-        (_a = popoverInstance === null || popoverInstance === void 0 ? void 0 : popoverInstance.forceUpdate) === null || _a === void 0 ? void 0 : _a.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_.nextTick)(function () {
-          popoverInstance.update();
-        });
-      } else {
-        (0,external_vue_.nextTick)(function () {
-          popoverInstance = new external_shared_.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_.computed)(function () {
-      var style = {};
-
-      if (props.appendToBody) {
-        style['z-index'] = 1060 + external_shared_.bkZIndexManager.getModalNextIndex();
-      }
-
-      return style;
-    });
-    var state = (0,external_vue_.reactive)({
-      styles: styles
-    });
-    return Object.assign(Object.assign({}, (0,external_vue_.toRefs)(state)), {
-      refContentRef: refContentRef,
-      forceUpdate: forceUpdate,
-      updateDropdown: updateDropdown,
-      destoryDropdown: destoryDropdown
-    });
-  },
-  render: function render() {
-    var _a, _b, _c;
-
-    return (0,external_vue_.createVNode)("div", {
-      "ref": "refContentRef",
-      "class": [(0,external_shared_.resolveClassName)('date-picker-dropdown'), this.className, this.extPopoverCls],
-      "style": this.styles,
-      "onClick": this.onClick
-    }, [(_c = (_b = (_a = this.$slots)["default"]) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : '']);
-  }
-}));
-;// 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_.PropTypes.object.isRequired
-};
-/* harmony default export */ const input_container = ((0,external_vue_.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 colorPickerCls = (0,external_vue_.computed)(function () {
-      return (0,external_shared_.classes)({
-        error: props.info.error
-      }, 'bk-color-picker-input-value');
-    });
-    return function () {
-      return (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-input-part"
-      }, [(0,external_vue_.createVNode)("input", {
-        "type": props.info.name === 'HEX' ? 'text' : 'number',
-        "class": colorPickerCls.value,
-        "value": props.info.value,
-        "onKeydown": handleTab,
-        "onInput": handleInput
-      }, null), (0,external_vue_.createVNode)("span", {
-        "class": "bk-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_.PropTypes.object.isRequired
-};
-/* harmony default export */ const color_input = ((0,external_vue_.defineComponent)({
-  name: 'ColorPicker',
-  props: colorPickerProps,
-  emits: ['change', 'tab'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var hex = (0,external_vue_.reactive)({
-      key: 'hex',
-      name: 'HEX',
-      value: props.colorObj.hex,
-      error: false
-    });
-    var r = (0,external_vue_.reactive)({
-      key: 'r',
-      name: 'R',
-      value: props.colorObj.rgba.r.toString(),
-      error: false
-    });
-    var g = (0,external_vue_.reactive)({
-      key: 'g',
-      name: 'G',
-      value: props.colorObj.rgba.g.toString(),
-      error: false
-    });
-    var b = (0,external_vue_.reactive)({
-      key: 'b',
-      name: 'B',
-      value: props.colorObj.rgba.b.toString(),
-      error: false
-    });
-    var a = (0,external_vue_.reactive)({
-      key: 'a',
-      name: 'Alpha',
-      value: props.colorObj.rgba.a.toString(),
-      error: false
-    });
-    (0,external_vue_.watch)(function () {
-      return props.colorObj;
-    }, function (val) {
-      if (tinycolor_default()(val.hex).toString() !== tinycolor_default()(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;
-    };
-
-    return function () {
-      return (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-input"
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-input-hex"
-      }, [(0,external_vue_.createVNode)(input_container, {
-        "info": hex,
-        "onInput": handleInput
-      }, null)]), (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-input-rgba"
-      }, [(0,external_vue_.createVNode)(input_container, {
-        "info": r,
-        "onInput": handleInput
-      }, null), (0,external_vue_.createVNode)(input_container, {
-        "info": g,
-        "onInput": handleInput
-      }, null), (0,external_vue_.createVNode)(input_container, {
-        "info": b,
-        "onInput": handleInput
-      }, null), (0,external_vue_.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_default()(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_.PropTypes.object.isRequired
-};
-/* harmony default export */ const hue_slider = ((0,external_vue_.defineComponent)({
-  name: 'ColorPicker',
-  props: hue_slider_colorPickerProps,
-  emits: ['change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var containerRef = (0,external_vue_.ref)(null);
-    var pointerStyle = (0,external_vue_.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
-        });
-      }
-    };
-
-    return function () {
-      return (0,external_vue_.createVNode)("div", {
-        "ref": containerRef,
-        "tabindex": "0",
-        "class": "bk-color-picker-hue",
-        "onKeydown": handleArrowKeydown,
-        "onMousedown": function onMousedown(e) {
-          e.stopPropagation();
-          e.preventDefault();
-          handleMouseDown(e);
-        }
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-hue-pointer",
-        "style": pointerStyle.value
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-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_.PropTypes.object.isRequired,
-  recommend: external_shared_.PropTypes.oneOfType([external_shared_.PropTypes.array.def(function () {
-    return [];
-  }), external_shared_.PropTypes.bool.def(true)]).isRequired
-};
-/* harmony default export */ const recommend_colors = ((0,external_vue_.defineComponent)({
-  props: recommend_colors_colorPickerProps,
-  emits: ['change', 'tab'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var isFocused = (0,external_vue_.ref)(false);
-    var selectedIndex = (0,external_vue_.ref)(-1);
-    var selectedColor = (0,external_vue_.ref)(null);
-    (0,external_vue_.watch)(function () {
-      return props.colorObj;
-    }, function () {
-      // 每次在外部修改颜色后预设面板都会取消预设选择的样式，即便预设和当前色一样
-      // 预设里面修改颜色会在 $nextTick 恢复状态
-      selectedIndex.value = -1;
-      selectedColor.value = null;
-    }, {
-      deep: true
-    });
-    var colors = (0,external_vue_.computed)(function () {
-      return getColorsFromRecommend(props.recommend);
-    });
-
-    var getColorClass = function getColorClass(color, index) {
-      return (0,external_shared_.classes)({
-        'bk-color-picker-empty': color === '',
-        'bk-color-picker-recommend-selected-color': isFocused.value && selectedIndex.value === index
-      }, 'bk-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_.nextTick)(function () {
-        selectedIndex.value = index;
-        selectedColor.value = color;
-      });
-    };
-    /**
-     * 校验、处理预设值
-     * @param {Boolean|String[]} recommend
-     * @returns {String[]}
-     */
-
-
-    var getColorsFromRecommend = function getColorsFromRecommend(recommend) {
-      if (recommend === true) {
-        return ['', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#ddffff', '#00ced1', '#3a84ff', '#a933f5', '#db7093', '#000000', '#494949', '#9B9B9B', '#ffffff'];
-      }
-
-      if (Array.isArray(recommend)) {
-        // 如果预设值是无效的，这里按空字符串处理以显示提示用户，应该输入正确的色值
-        return recommend.map(function (color) {
-          return tinycolor_default()(color).isValid() ? color : '';
-        });
-      }
-    };
-
-    return function () {
-      return (0,external_vue_.createVNode)("div", {
-        "tabindex": "0",
-        "class": "bk-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_.createVNode)("div", {
-          "style": "background: ".concat(color || '#fff'),
-          "class": getColorClass(color, index),
-          "onClick": function onClick() {
-            return selectColor(index);
-          }
-        }, [selectedIndex.value === index ? (0,external_vue_.createVNode)("div", {
-          "class": "bk-color-picker-pointer"
-        }, [(0,external_vue_.createVNode)("div", {
-          "class": "bk-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_.PropTypes.object.isRequired
-};
-/* harmony default export */ const saturation_panel = ((0,external_vue_.defineComponent)({
-  props: saturation_panel_colorPickerProps,
-  emits: ['change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var containerRef = (0,external_vue_.ref)(null);
-    var backgroundStyle = (0,external_vue_.computed)(function () {
-      return {
-        background: "hsl(".concat(props.colorObj.hsv.h, ", 100%, 50%)")
-      };
-    });
-    var pointerStyle = (0,external_vue_.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
-      });
-    };
-
-    return function () {
-      return (0,external_vue_.createVNode)("div", {
-        "ref": containerRef,
-        "tabindex": "0",
-        "class": "bk-color-picker-saturation",
-        "style": backgroundStyle.value,
-        "onKeydown": handleArrowKeydown,
-        "onMousedown": function onMousedown(e) {
-          e.stopPropagation();
-          handleMouseDown(e);
-        }
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-saturation-white"
-      }, null), (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-saturation-black"
-      }, null), (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-pointer",
-        "style": pointerStyle.value
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-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_.PropTypes.string.def(''),
-  disabled: external_shared_.PropTypes.bool.def(false),
-  readonly: external_shared_.PropTypes.bool.def(false),
-  transfer: external_shared_.PropTypes.bool.def(false),
-  size: (0,external_vue_types_.toType)('colorPickSize', {}).def(ColorPickSizeEnum.UNKNOWN),
-  showValue: external_shared_.PropTypes.bool.def(true),
-  // true 展示组件内置预设值
-  // false 不展示预设值
-  // 数组 自定义预设值
-  recommend: external_shared_.PropTypes.oneOfType([external_shared_.PropTypes.array.def(function () {
-    return [];
-  }), external_shared_.PropTypes.bool.def(true)]).def(true),
-  extCls: external_shared_.PropTypes.string.def(''),
-  withValidate: external_shared_.PropTypes.bool.def(true)
-};
-var whiteColorObj = formatColor('#FFFFFF');
-/* harmony default export */ const color_picker = ((0,external_vue_.defineComponent)({
-  name: 'ColorPicker',
-  directives: {
-    clickoutside: external_directives_.clickoutside
-  },
-  props: color_picker_colorPickerProps,
-  emits: ['update:modelValue', 'change'],
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    var formItem = (0,external_shared_.useFormItem)();
-    var showDropdown = (0,external_vue_.ref)(false); // 当前颜色的色值，如果为空字符串显示：默认白色背景 + 中间一个叉
-
-    var colorStr = (0,external_vue_.ref)(''); // 储存当前颜色的相关信息
-
-    var colorObj = (0,external_vue_.reactive)(JSON.parse(JSON.stringify(whiteColorObj)));
-    var dropRef = (0,external_vue_.ref)(null);
-    var saturationPanelRef = (0,external_vue_.ref)(null);
-    var referenceRef = (0,external_vue_.ref)(null);
-    var colorPickerCls = (0,external_vue_.computed)(function () {
-      var _classes;
-
-      return (0,external_shared_.classes)((_classes = {}, _defineProperty(_classes, "bk-color-picker-".concat(props.size), props.size), _defineProperty(_classes, 'bk-color-picker-show-dropdown', showDropdown.value), _defineProperty(_classes, 'bk-color-picker-show-value', props.showValue), _defineProperty(_classes, 'bk-color-picker-disabled', props.disabled || props.readonly), _classes), "bk-color-picker ".concat(props.extCls));
-    }); // 是否渲染预设值
-
-    var isRenderRecommend = (0,external_vue_.computed)(function () {
-      return Boolean(props.recommend === true || Array.isArray(props.recommend) && props.recommend.length);
-    });
-    (0,external_vue_.onBeforeMount)(function () {
-      // 1. 组件初始化时，如果计算的色值和传入的值不一样，显示计算的色值
-      changeColorFromProps({
-        isCreated: true
-      });
-    });
-    (0,external_vue_.watch)(function () {
-      return props.modelValue;
-    }, function () {
-      var _a; // 2. 如果组件绑定值被外部修改，自动根据绑定至更新组件色值
-
-
-      changeColorFromProps();
-
-      if (props.withValidate) {
-        (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.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 _a;
-
-      showDropdown.value = true;
-      (_a = dropRef.value) === null || _a === void 0 ? void 0 : _a.updateDropdown(); // 展开后默认聚焦于 HEX 输入框，setTimeout 等 transfer 出现
-
-      setTimeout(function () {
-        var hexInput = dropRef.value.$el.querySelector('.bk-color-picker-input-hex .bk-color-picker-input-value');
-        hexInput.select();
-      }, 100);
-    };
-
-    var closeDropdown = function closeDropdown() {
-      var _a;
-
-      if (showDropdown.value) {
-        (0,external_vue_.nextTick)(function () {
-          return referenceRef.value.focus();
-        });
-        showDropdown.value = false;
-        (_a = dropRef.value) === null || _a === void 0 ? void 0 : _a.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_default()(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_.withDirectives)((0,external_vue_.createVNode)("div", {
-        "ref": referenceRef,
-        "tabindex": "0",
-        "class": colorPickerCls.value,
-        "onKeydown": handleTriggerKeydown,
-        "onClick": toggleDropdown
-      }, [(0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-color"
-      }, [(0,external_vue_.createVNode)("span", {
-        "class": "bk-color-picker-color-square ".concat(!colorStr.value && 'bk-color-picker-empty'),
-        "style": "background: ".concat(colorStr.value || '#FFF')
-      }, null)]), props.showValue ? (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-text"
-      }, [(0,external_vue_.createVNode)("span", null, [colorStr.value])]) : undefined, (0,external_vue_.createVNode)("div", {
-        "class": "bk-color-picker-icon"
-      }, [(0,external_vue_.createVNode)(external_icon_.AngleUp, {
-        "class": "icon-angle-down"
-      }, null)]), (0,external_vue_.createVNode)(external_vue_.Transition, {
-        "name": "bk-fade-down-transition"
-      }, {
-        "default": function _default() {
-          return [(0,external_vue_.withDirectives)((0,external_vue_.createVNode)(picker_dropdown, {
-            "ref": dropRef,
-            "triggerRef": referenceRef.value
-          }, {
-            "default": function _default() {
-              return [(0,external_vue_.createVNode)("div", {
-                "class": "bk-color-dropdown-container"
-              }, [(0,external_vue_.createVNode)("div", {
-                "class": "bk-color-picker-dropdown",
-                "onClick": function onClick(e) {
-                  e.stopPropagation();
-                },
-                "onMousedown": function onMousedown(e) {
-                  e.stopPropagation();
-                },
-                "onKeydown": handleDropdownKeydown
-              }, [(0,external_vue_.createVNode)(saturation_panel, {
-                "ref": saturationPanelRef,
-                "colorObj": colorObj,
-                "onChange": handleColorChange
-              }, null), (0,external_vue_.createVNode)(hue_slider, {
-                "colorObj": colorObj,
-                "onChange": handleColorChange
-              }, null), (0,external_vue_.createVNode)(color_input, {
-                "colorObj": colorObj,
-                "onTab": handleTabInput,
-                "onChange": handleColorChange
-              }, null), isRenderRecommend.value ? (0,external_vue_.createVNode)("div", {
-                "class": "bk-color-picker-recommend-container"
-              }, [(0,external_vue_.createVNode)(recommend_colors, {
-                "colorObj": colorObj,
-                "recommend": props.recommend,
-                "onTab": handleTabRecommend,
-                "onChange": handleColorChange
-              }, null)]) : undefined])])];
-            }
-          }), [[external_vue_.vShow, showDropdown.value]])];
-        }
-      })]), [[(0,external_vue_.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_.withInstall)(color_picker);
-/* harmony default export */ const src = (BkColorPicker);
-})();
-
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("vue-types"),require("../directives"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","vue-types","../directives","../icon"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("vue-types"),require("../directives"),require("../icon")):t(e["../shared"],e.vue,e["vue-types"],e["../directives"],e["../icon"]);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t,r,n,o)=>(()=>{var a={8621:(e,t,r)=>{var n;!function(o){var a=/^\s+/,i=/\s+$/,c=0,l=o.round,s=o.min,u=o.max,f=o.random;function d(e,t){if(t=t||{},(e=e||"")instanceof d)return e;if(!(this instanceof d))return new d(e,t);var r=function(e){var t,r,n,c={r:0,g:0,b:0},l=1,f=null,d=null,h=null,p=!1,v=!1;return"string"==typeof e&&(e=function(e){e=e.replace(a,"").replace(i,"").toLowerCase();var t,r=!1;if(C[e])e=C[e],r=!0;else if("transparent"==e)return{r:0,g:0,b:0,a:0,format:"name"};return(t=U.rgb.exec(e))?{r:t[1],g:t[2],b:t[3]}:(t=U.rgba.exec(e))?{r:t[1],g:t[2],b:t[3],a:t[4]}:(t=U.hsl.exec(e))?{h:t[1],s:t[2],l:t[3]}:(t=U.hsla.exec(e))?{h:t[1],s:t[2],l:t[3],a:t[4]}:(t=U.hsv.exec(e))?{h:t[1],s:t[2],v:t[3]}:(t=U.hsva.exec(e))?{h:t[1],s:t[2],v:t[3],a:t[4]}:(t=U.hex8.exec(e))?{r:H(t[1]),g:H(t[2]),b:H(t[3]),a:E(t[4]),format:r?"name":"hex8"}:(t=U.hex6.exec(e))?{r:H(t[1]),g:H(t[2]),b:H(t[3]),format:r?"name":"hex"}:(t=U.hex4.exec(e))?{r:H(t[1]+""+t[1]),g:H(t[2]+""+t[2]),b:H(t[3]+""+t[3]),a:E(t[4]+""+t[4]),format:r?"name":"hex8"}:!!(t=U.hex3.exec(e))&&{r:H(t[1]+""+t[1]),g:H(t[2]+""+t[2]),b:H(t[3]+""+t[3]),format:r?"name":"hex"}}(e)),"object"==typeof e&&(z(e.r)&&z(e.g)&&z(e.b)?(t=e.r,r=e.g,n=e.b,c={r:255*F(t,255),g:255*F(r,255),b:255*F(n,255)},p=!0,v="%"===String(e.r).substr(-1)?"prgb":"rgb"):z(e.h)&&z(e.s)&&z(e.v)?(f=D(e.s),d=D(e.v),c=function(e,t,r){e=6*F(e,360),t=F(t,100),r=F(r,100);var n=o.floor(e),a=e-n,i=r*(1-t),c=r*(1-a*t),l=r*(1-(1-a)*t),s=n%6;return{r:255*[r,c,i,i,l,r][s],g:255*[l,r,r,c,i,i][s],b:255*[i,i,l,r,r,c][s]}}(e.h,f,d),p=!0,v="hsv"):z(e.h)&&z(e.s)&&z(e.l)&&(f=D(e.s),h=D(e.l),c=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=F(e,360),t=F(t,100),r=F(r,100),0===t)n=o=a=r;else{var c=r<.5?r*(1+t):r+t-r*t,l=2*r-c;n=i(l,c,e+1/3),o=i(l,c,e),a=i(l,c,e-1/3)}return{r:255*n,g:255*o,b:255*a}}(e.h,f,h),p=!0,v="hsl"),e.hasOwnProperty("a")&&(l=e.a)),l=P(l),{ok:p,format:e.format||v,r:s(255,u(c.r,0)),g:s(255,u(c.g,0)),b:s(255,u(c.b,0)),a:l}}(e);this._originalInput=e,this._r=r.r,this._g=r.g,this._b=r.b,this._a=r.a,this._roundA=l(100*this._a)/100,this._format=t.format||r.format,this._gradientType=t.gradientType,this._r<1&&(this._r=l(this._r)),this._g<1&&(this._g=l(this._g)),this._b<1&&(this._b=l(this._b)),this._ok=r.ok,this._tc_id=c++}function h(e,t,r){e=F(e,255),t=F(t,255),r=F(r,255);var n,o,a=u(e,t,r),i=s(e,t,r),c=(a+i)/2;if(a==i)n=o=0;else{var l=a-i;switch(o=c>.5?l/(2-a-i):l/(a+i),a){case e:n=(t-r)/l+(t<r?6:0);break;case t:n=(r-e)/l+2;break;case r:n=(e-t)/l+4}n/=6}return{h:n,s:o,l:c}}function p(e,t,r){e=F(e,255),t=F(t,255),r=F(r,255);var n,o,a=u(e,t,r),i=s(e,t,r),c=a,l=a-i;if(o=0===a?0:l/a,a==i)n=0;else{switch(a){case e:n=(t-r)/l+(t<r?6:0);break;case t:n=(r-e)/l+2;break;case r:n=(e-t)/l+4}n/=6}return{h:n,s:o,v:c}}function v(e,t,r,n){var o=[q(l(e).toString(16)),q(l(t).toString(16)),q(l(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 b(e,t,r,n){return[q(L(n)),q(l(e).toString(16)),q(l(t).toString(16)),q(l(r).toString(16))].join("")}function g(e,t){t=0===t?0:t||10;var r=d(e).toHsl();return r.s-=t/100,r.s=T(r.s),d(r)}function m(e,t){t=0===t?0:t||10;var r=d(e).toHsl();return r.s+=t/100,r.s=T(r.s),d(r)}function k(e){return d(e).desaturate(100)}function y(e,t){t=0===t?0:t||10;var r=d(e).toHsl();return r.l+=t/100,r.l=T(r.l),d(r)}function w(e,t){t=0===t?0:t||10;var r=d(e).toRgb();return r.r=u(0,s(255,r.r-l(-t/100*255))),r.g=u(0,s(255,r.g-l(-t/100*255))),r.b=u(0,s(255,r.b-l(-t/100*255))),d(r)}function _(e,t){t=0===t?0:t||10;var r=d(e).toHsl();return r.l-=t/100,r.l=T(r.l),d(r)}function x(e,t){var r=d(e).toHsl(),n=(r.h+t)%360;return r.h=n<0?360+n:n,d(r)}function A(e){var t=d(e).toHsl();return t.h=(t.h+180)%360,d(t)}function S(e){var t=d(e).toHsl(),r=t.h;return[d(e),d({h:(r+120)%360,s:t.s,l:t.l}),d({h:(r+240)%360,s:t.s,l:t.l})]}function N(e){var t=d(e).toHsl(),r=t.h;return[d(e),d({h:(r+90)%360,s:t.s,l:t.l}),d({h:(r+180)%360,s:t.s,l:t.l}),d({h:(r+270)%360,s:t.s,l:t.l})]}function V(e){var t=d(e).toHsl(),r=t.h;return[d(e),d({h:(r+72)%360,s:t.s,l:t.l}),d({h:(r+216)%360,s:t.s,l:t.l})]}function O(e,t,r){t=t||6,r=r||30;var n=d(e).toHsl(),o=360/r,a=[d(e)];for(n.h=(n.h-(o*t>>1)+720)%360;--t;)n.h=(n.h+o)%360,a.push(d(n));return a}function j(e,t){t=t||6;for(var r=d(e).toHsv(),n=r.h,o=r.s,a=r.v,i=[],c=1/t;t--;)i.push(d({h:n,s:o,v:a})),a=(a+c)%1;return i}d.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:o.pow((e+.055)/1.055,2.4))+.7152*(t<=.03928?t/12.92:o.pow((t+.055)/1.055,2.4))+.0722*(r<=.03928?r/12.92:o.pow((r+.055)/1.055,2.4))},setAlpha:function(e){return this._a=P(e),this._roundA=l(100*this._a)/100,this},toHsv:function(){var e=p(this._r,this._g,this._b);return{h:360*e.h,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=p(this._r,this._g,this._b),t=l(360*e.h),r=l(100*e.s),n=l(100*e.v);return 1==this._a?"hsv("+t+", "+r+"%, "+n+"%)":"hsva("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHsl:function(){var e=h(this._r,this._g,this._b);return{h:360*e.h,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=h(this._r,this._g,this._b),t=l(360*e.h),r=l(100*e.s),n=l(100*e.l);return 1==this._a?"hsl("+t+", "+r+"%, "+n+"%)":"hsla("+t+", "+r+"%, "+n+"%, "+this._roundA+")"},toHex:function(e){return v(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=[q(l(e).toString(16)),q(l(t).toString(16)),q(l(r).toString(16)),q(L(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:l(this._r),g:l(this._g),b:l(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+l(this._r)+", "+l(this._g)+", "+l(this._b)+")":"rgba("+l(this._r)+", "+l(this._g)+", "+l(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:l(100*F(this._r,255))+"%",g:l(100*F(this._g,255))+"%",b:l(100*F(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+l(100*F(this._r,255))+"%, "+l(100*F(this._g,255))+"%, "+l(100*F(this._b,255))+"%)":"rgba("+l(100*F(this._r,255))+"%, "+l(100*F(this._g,255))+"%, "+l(100*F(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":!(this._a<1)&&(R[v(this._r,this._g,this._b,!0)]||!1)},toFilter:function(e){var t="#"+b(this._r,this._g,this._b,this._a),r=t,n=this._gradientType?"GradientType = 1, ":"";if(e){var o=d(e);r="#"+b(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 d(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(y,arguments)},brighten:function(){return this._applyModification(w,arguments)},darken:function(){return this._applyModification(_,arguments)},desaturate:function(){return this._applyModification(g,arguments)},saturate:function(){return this._applyModification(m,arguments)},greyscale:function(){return this._applyModification(k,arguments)},spin:function(){return this._applyModification(x,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(O,arguments)},complement:function(){return this._applyCombination(A,arguments)},monochromatic:function(){return this._applyCombination(j,arguments)},splitcomplement:function(){return this._applyCombination(V,arguments)},triad:function(){return this._applyCombination(S,arguments)},tetrad:function(){return this._applyCombination(N,arguments)}},d.fromRatio=function(e,t){if("object"==typeof e){var r={};for(var n in e)e.hasOwnProperty(n)&&(r[n]="a"===n?e[n]:D(e[n]));e=r}return d(e,t)},d.equals=function(e,t){return!(!e||!t)&&d(e).toRgbString()==d(t).toRgbString()},d.random=function(){return d.fromRatio({r:f(),g:f(),b:f()})},d.mix=function(e,t,r){r=0===r?0:r||50;var n=d(e).toRgb(),o=d(t).toRgb(),a=r/100;return d({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})},d.readability=function(e,t){var r=d(e),n=d(t);return(o.max(r.getLuminance(),n.getLuminance())+.05)/(o.min(r.getLuminance(),n.getLuminance())+.05)},d.isReadable=function(e,t,r){var n,o,a,i,c,l=d.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=l>=4.5;break;case"AAlarge":o=l>=3;break;case"AAAsmall":o=l>=7}return o},d.mostReadable=function(e,t,r){var n,o,a,i,c=null,l=0;o=(r=r||{}).includeFallbackColors,a=r.level,i=r.size;for(var s=0;s<t.length;s++)(n=d.readability(e,t[s]))>l&&(l=n,c=d(t[s]));return d.isReadable(e,c,{level:a,size:i})||!o?c:(r.includeFallbackColors=!1,d.mostReadable(e,["#fff","#000"],r))};var C=d.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"},R=d.hexNames=function(e){var t={};for(var r in e)e.hasOwnProperty(r)&&(t[e[r]]=r);return t}(C);function P(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function F(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=s(t,u(0,parseFloat(e))),r&&(e=parseInt(e*t,10)/100),o.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function T(e){return s(1,u(0,e))}function H(e){return parseInt(e,16)}function q(e){return 1==e.length?"0"+e:""+e}function D(e){return e<=1&&(e=100*e+"%"),e}function L(e){return o.round(255*parseFloat(e)).toString(16)}function E(e){return H(e)/255}var M,I,B,U=(I="[\\s|\\(]+("+(M="(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)")+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",B="[\\s|\\(]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")[,|\\s]+("+M+")\\s*\\)?",{CSS_UNIT:new RegExp(M),rgb:new RegExp("rgb"+I),rgba:new RegExp("rgba"+B),hsl:new RegExp("hsl"+I),hsla:new RegExp("hsla"+B),hsv:new RegExp("hsv"+I),hsva:new RegExp("hsva"+B),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 z(e){return!!U.CSS_UNIT.exec(e)}e.exports?e.exports=d:void 0===(n=function(){return d}.call(t,r,t,e))||(e.exports=n)}(Math)},4061:e=>{"use strict";e.exports=n},6870:e=>{"use strict";e.exports=o},4212:t=>{"use strict";t.exports=e},748:e=>{"use strict";e.exports=t},210:e=>{"use strict";e.exports=r}},i={};function c(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return a[e](r,r.exports,c),r.exports}c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{"use strict";c.r(l),c.d(l,{default:()=>C});var e=c(4212);function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var r=c(748),n=c(8621),o=c.n(n),a=c(210),i=c(4061),s=c(6870),u={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 f=(0,r.defineComponent)({props:u,emits:["changeVisible"],setup:function(t,n){var o=n.emit,a=Object.create(null),i=(0,r.ref)(null);(0,r.onMounted)((function(){l()})),(0,r.onBeforeUnmount)((function(){c()}));var c=function(){if(a&&0!==Object.keys(a).length){var e=a;e.isShow&&e.hide(),e.destroy(),a=null,o("changeVisible",!1)}},l=function(){a&&0!==Object.keys(a).length?(0,r.nextTick)((function(){a.update()})):(0,r.nextTick)((function(){a=new e.BKPopover(t.triggerRef,i.value,{placement:t.placement,trigger:"manual",modifiers:[{name:"computeStyles",options:{adaptive:!1,gpuAcceleration:!1}},{name:"offset",options:{offset:[0,4]}}]})}))},s=(0,r.computed)((function(){var r={};return t.appendToBody&&(r["z-index"]=1060+e.bkZIndexManager.getModalNextIndex()),r})),u=(0,r.reactive)({styles:s});return Object.assign(Object.assign({},(0,r.toRefs)(u)),{refContentRef:i,forceUpdate:function(){var e;a&&(null===(e=null==a?void 0:a.forceUpdate)||void 0===e||e.call(a))},updateDropdown:l,destoryDropdown:c})},render:function(){var t,n,o;return(0,r.createVNode)("div",{ref:"refContentRef",class:[(0,e.resolveClassName)("date-picker-dropdown"),this.className,this.extPopoverCls],style:this.styles,onClick:this.onClick},[null!==(o=null===(n=(t=this.$slots).default)||void 0===n?void 0:n.call(t))&&void 0!==o?o:""])}});var d={info:e.PropTypes.object.isRequired};const h=(0,r.defineComponent)({props:d,emits:["tab","input"],setup:function(t,n){var o=n.emit,a=function(e){"a"===t.info.key&&o("tab",e)},i=function(e){var r=t.info.key,n=e.target.value;o("input",r,n)},c=(0,r.computed)((function(){return(0,e.classes)({error:t.info.error},"bk-color-picker-input-value")}));return function(){return(0,r.createVNode)("div",{class:"bk-color-picker-input-part"},[(0,r.createVNode)("input",{type:"HEX"===t.info.name?"text":"number",class:c.value,value:t.info.value,onKeydown:a,onInput:i},null),(0,r.createVNode)("span",{class:"bk-color-picker-input-text"},[t.info.name])])}}});var p={colorObj:e.PropTypes.object.isRequired};const v=(0,r.defineComponent)({name:"ColorPicker",props:p,emits:["change","tab"],setup:function(e,t){var n=t.emit,a=(0,r.reactive)({key:"hex",name:"HEX",value:e.colorObj.hex,error:!1}),i=(0,r.reactive)({key:"r",name:"R",value:e.colorObj.rgba.r.toString(),error:!1}),c=(0,r.reactive)({key:"g",name:"G",value:e.colorObj.rgba.g.toString(),error:!1}),l=(0,r.reactive)({key:"b",name:"B",value:e.colorObj.rgba.b.toString(),error:!1}),s=(0,r.reactive)({key:"a",name:"Alpha",value:e.colorObj.rgba.a.toString(),error:!1});(0,r.watch)((function(){return e.colorObj}),(function(e){o()(e.hex).toString()!==o()(a.value).toString()&&(a.value=e.hex),i.value=e.rgba.r.toString(),c.value=e.rgba.g.toString(),l.value=e.rgba.b.toString(),s.value=e.rgba.a.toString(),d()}),{deep:!0});var u=function(e){n("tab",e)},f=function(e,t){if({r:i,g:c,b:l,a:s,hex:a}[e].value=t,d()){var r="hex"===e?a.value:"rgba(".concat(i.value,", ").concat(c.value,", ").concat(l.value,", ").concat(s.value,")");n("change",r)}},d=function(){var e=!0;!a.value.startsWith("#")||4!==a.value.length&&7!==a.value.length||a.value.slice(1).match(/[^0-9a-fA-F]/)?(a.error=!0,e=!1):a.error=!1,""!==s.value&&s.value>=0&&s.value<=1?s.error=!1:(s.error=!0,e=!1);for(var t=0,r=[i,c,l];t<r.length;t++){var n=r[t],o=n.value;""!==o&&o>=0&&o<=255?n.error=!1:(n.error=!0,e=!1)}return e};return function(){return(0,r.createVNode)("div",{class:"bk-color-picker-input"},[(0,r.createVNode)("div",{class:"bk-color-picker-input-hex"},[(0,r.createVNode)(h,{info:a,onInput:f},null)]),(0,r.createVNode)("div",{class:"bk-color-picker-input-rgba"},[(0,r.createVNode)(h,{info:i,onInput:f},null),(0,r.createVNode)(h,{info:c,onInput:f},null),(0,r.createVNode)(h,{info:l,onInput:f},null),(0,r.createVNode)(h,{info:s,onInput:f,onTab:u},null)])])}}});var b=function(e){var t=e;""===e&&(t="#FFFFFF");var r=o()(e),n=r.toHsl(),a=r.toHsv();return 0===n.s&&(n.h=t.h||0,a.h=t.h||0),a.v<.0164&&(a.h=t.h||0,a.s=t.s||0),n.l<.01&&(n.h=t.h||0,n.s=t.s||0),{hsl:n,hsv:a,hex:r.toHexString().toUpperCase(),rgba:r.toRgb()}},g=function(e,t,r){return e<t?t:e>r?r:e},m=function(e,t){return e.touches?e.touches[0][t]:0},k=function(e){var t=e.r,r=e.g,n=e.b,o=e.a;return"rgba(".concat([t,r,n,o].join(","),")")},y={colorObj:e.PropTypes.object.isRequired};const w=(0,r.defineComponent)({name:"ColorPicker",props:y,emits:["change"],setup:function(e,t){var n=t.emit,o=(0,r.ref)(null),a=(0,r.computed)((function(){return{left:"".concat(e.colorObj.hsv.h/360*100,"%")}})),i=function(t){var r=o.value.clientWidth,n=e.colorObj.hsv.h/360*r;switch(t.code){case"ArrowLeft":t.preventDefault(),n=g(n-2,0,r);break;case"ArrowRight":t.preventDefault(),n=g(n+2,0,r);break;case"ArrowUp":t.preventDefault(),n=g(n-10,0,r);break;case"ArrowDown":t.preventDefault(),n=g(n+10,0,r);break;default:return}l(null,n)},c=function e(){window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",e)},l=function(e,t){var r=o.value.clientWidth,n=void 0!==t?t:s(e);u(n/r)},s=function(e){var t=o.value.getBoundingClientRect().left+window.pageXOffset,r=e.pageX||m(e,"PageX");return g(r-t,0,o.value.clientWidth)},u=function(t){var r=e.colorObj.hsl,o=r.h,a=r.s,i=r.l,c=r.a,l=360*t;o!==l&&n("change",{h:l,s:a,l:i,a:c})};return function(){return(0,r.createVNode)("div",{ref:o,tabindex:"0",class:"bk-color-picker-hue",onKeydown:i,onMousedown:function(e){e.stopPropagation(),e.preventDefault(),function(e){o.value.focus(),l(e),window.addEventListener("mousemove",l,{passive:!0}),window.addEventListener("mouseup",c)}(e)}},[(0,r.createVNode)("div",{class:"bk-color-picker-hue-pointer",style:a.value},[(0,r.createVNode)("div",{class:"bk-color-picker-hue-rectangle"},null)])])}}});var _={colorObj:e.PropTypes.object.isRequired,recommend:e.PropTypes.oneOfType([e.PropTypes.array.def((function(){return[]})),e.PropTypes.bool.def(!0)]).isRequired};const x=(0,r.defineComponent)({props:_,emits:["change","tab"],setup:function(t,n){var a=n.emit,i=(0,r.ref)(!1),c=(0,r.ref)(-1),l=(0,r.ref)(null);(0,r.watch)((function(){return t.colorObj}),(function(){c.value=-1,l.value=null}),{deep:!0});var s=(0,r.computed)((function(){return h(t.recommend)})),u=function(t,r){return(0,e.classes)({"bk-color-picker-empty":""===t,"bk-color-picker-recommend-selected-color":i.value&&c.value===r},"bk-color-picker-recommend-color")},f=function(e){if("Tab"===e.code)a("tab",e);else{var t=0,r=s.value.length-1;switch(e.code){case"ArrowLeft":e.preventDefault(),t=g(c.value-1,0,r);break;case"ArrowRight":e.preventDefault(),t=g(c.value+1,0,r);break;case"ArrowUp":e.preventDefault(),t=g(c.value-10,0,r);break;case"ArrowDown":e.preventDefault(),t=g(c.value+10,0,r);break;default:return}d(t)}},d=function(e){var t=s.value[e];a("change",t),(0,r.nextTick)((function(){c.value=e,l.value=t}))},h=function(e){return!0===e?["","#ff4500","#ff8c00","#ffd700","#90ee90","#ddffff","#00ced1","#3a84ff","#a933f5","#db7093","#000000","#494949","#9B9B9B","#ffffff"]:Array.isArray(e)?e.map((function(e){return o()(e).isValid()?e:""})):void 0};return function(){return(0,r.createVNode)("div",{tabindex:"0",class:"bk-color-picker-recommend",onFocus:function(){return i.value=!0},onBlur:function(){return i.value=!1},onKeydown:f},[s.value.map((function(e,t){return(0,r.createVNode)("div",{style:"background: ".concat(e||"#fff"),class:u(e,t),onClick:function(){return d(t)}},[c.value===t?(0,r.createVNode)("div",{class:"bk-color-picker-pointer"},[(0,r.createVNode)("div",{class:"bk-color-picker-circle"},null)]):void 0])}))])}}});var A={colorObj:e.PropTypes.object.isRequired};const S=(0,r.defineComponent)({props:A,emits:["change"],setup:function(e,t){var n=t.emit,o=(0,r.ref)(null),a=(0,r.computed)((function(){return{background:"hsl(".concat(e.colorObj.hsv.h,", 100%, 50%)")}})),i=(0,r.computed)((function(){return{top:"".concat(100*(1-e.colorObj.hsv.v),"%"),left:"".concat(100*e.colorObj.hsv.s,"%")}})),c=function e(){window.removeEventListener("mousemove",s),window.removeEventListener("mouseup",e)},l=function(t){var r=o.value,n=r.clientWidth,a=r.clientHeight,i=e.colorObj.hsv.s*n,c=(1-e.colorObj.hsv.v)*a;switch(t.code){case"ArrowLeft":t.preventDefault(),i=g(i-10,0,n);break;case"ArrowRight":t.preventDefault(),i=g(i+10,0,n);break;case"ArrowUp":t.preventDefault(),c=g(c-10,0,a);break;case"ArrowDown":t.preventDefault(),c=g(c+10,0,a);break;default:return}s(null,i,c)},s=function(t,r,n){var a=o.value,i=a.clientWidth,c=a.clientHeight,l=(void 0!==r?r:u(t))/i,s=1-(void 0!==n?n:f(t))/c;d(e.colorObj.hsv.h,l,s,e.colorObj.hsv.a)},u=function(e){var t=o.value.getBoundingClientRect().left+window.pageXOffset,r=e.pageX||m(e,"PageX");return g(r-t,0,o.value.clientWidth)},f=function(e){var t=o.value.getBoundingClientRect().top+window.pageYOffset,r=e.pageY||m(e,"PageY");return g(r-t,0,o.value.clientHeight)},d=function(e,t,r,o){n("change",{h:e,s:t,v:r,a:o})};return function(){return(0,r.createVNode)("div",{ref:o,tabindex:"0",class:"bk-color-picker-saturation",style:a.value,onKeydown:l,onMousedown:function(e){e.stopPropagation(),function(e){o.value.focus(),s(e),window.addEventListener("mousemove",s,{passive:!0}),window.addEventListener("mouseup",c)}(e)}},[(0,r.createVNode)("div",{class:"bk-color-picker-saturation-white"},null),(0,r.createVNode)("div",{class:"bk-color-picker-saturation-black"},null),(0,r.createVNode)("div",{class:"bk-color-picker-pointer",style:i.value},[(0,r.createVNode)("div",{class:"bk-color-picker-circle"},null)])])}}});var N;!function(e){e.UNKNOWN="",e.SMALL="small",e.LARGE="large"}(N||(N={}));var V={modelValue:e.PropTypes.string.def(""),disabled:e.PropTypes.bool.def(!1),readonly:e.PropTypes.bool.def(!1),transfer:e.PropTypes.bool.def(!1),size:(0,a.toType)("colorPickSize",{}).def(N.UNKNOWN),showValue:e.PropTypes.bool.def(!0),recommend:e.PropTypes.oneOfType([e.PropTypes.array.def((function(){return[]})),e.PropTypes.bool.def(!0)]).def(!0),extCls:e.PropTypes.string.def(""),withValidate:e.PropTypes.bool.def(!0)},O=b("#FFFFFF");const j=(0,r.defineComponent)({name:"ColorPicker",directives:{clickoutside:i.clickoutside},props:V,emits:["update:modelValue","change"],setup:function(n,a){var i=a.emit,c=(0,e.useFormItem)(),l=(0,r.ref)(!1),u=(0,r.ref)(""),d=(0,r.reactive)(JSON.parse(JSON.stringify(O))),h=(0,r.ref)(null),p=(0,r.ref)(null),g=(0,r.ref)(null),m=(0,r.computed)((function(){var r;return(0,e.classes)((t(r={},"bk-color-picker-".concat(n.size),n.size),t(r,"bk-color-picker-show-dropdown",l.value),t(r,"bk-color-picker-show-value",n.showValue),t(r,"bk-color-picker-disabled",n.disabled||n.readonly),r),"bk-color-picker ".concat(n.extCls))})),y=(0,r.computed)((function(){return Boolean(!0===n.recommend||Array.isArray(n.recommend)&&n.recommend.length)}));(0,r.onBeforeMount)((function(){P({isCreated:!0})})),(0,r.watch)((function(){return n.modelValue}),(function(){var e;P(),n.withValidate&&(null===(e=null==c?void 0:c.validate)||void 0===e||e.call(c,"change"))}));var _=function(e){"Enter"===e.code||"NumpadEnter"===e.code?N():"Escape"===e.code&&R()},A=function(e){n.transfer&&_(e)},N=function(){n.disabled||n.readonly||(l.value?R():C())},V=function(e){y.value||(e.preventDefault(),p.value.$el.focus())},j=function(e){e.preventDefault(),p.value.$el.focus()},C=function(){var e;l.value=!0,null===(e=h.value)||void 0===e||e.updateDropdown(),setTimeout((function(){h.value.$el.querySelector(".bk-color-picker-input-hex .bk-color-picker-input-value").select()}),100)},R=function(){var e;l.value&&((0,r.nextTick)((function(){return g.value.focus()})),l.value=!1,null===(e=h.value)||void 0===e||e.destoryDropdown(),P())},P=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.isCreated,r=void 0!==t&&t;if(""!==n.modelValue){var a=b(n.modelValue),c=1===a.rgba.a?a.hex:k(a.rgba);if(c!==u.value){var l=o()(n.modelValue).isValid();r?l?(u.value=c.toLowerCase()===n.modelValue.toLowerCase()?n.modelValue:c,Object.assign(d,a)):(Object.assign(d,O),i("change","")):l?c.toLowerCase()!==u.value.toLowerCase()&&(Object.assign(d,a),u.value=c):(u.value="",Object.assign(d,O))}}else""!==u.value&&(u.value="",Object.assign(d,O),i("update:modelValue",u.value))},F=function(e){if(""===e)return u.value="",Object.assign(d,O),i("update:modelValue",""),void i("change","");var t=b(e),r=1===t.rgba.a?t.hex:k(t.rgba);u.value=r,Object.assign(d,t),i("update:modelValue",u.value),i("change",r)},T=function(){l.value=!1};return function(){return(0,r.withDirectives)((0,r.createVNode)("div",{ref:g,tabindex:"0",class:m.value,onKeydown:_,onClick:N},[(0,r.createVNode)("div",{class:"bk-color-picker-color"},[(0,r.createVNode)("span",{class:"bk-color-picker-color-square ".concat(!u.value&&"bk-color-picker-empty"),style:"background: ".concat(u.value||"#FFF")},null)]),n.showValue?(0,r.createVNode)("div",{class:"bk-color-picker-text"},[(0,r.createVNode)("span",null,[u.value])]):void 0,(0,r.createVNode)("div",{class:"bk-color-picker-icon"},[(0,r.createVNode)(s.AngleUp,{class:"icon-angle-down"},null)]),(0,r.createVNode)(r.Transition,{name:"bk-fade-down-transition"},{default:function(){return[(0,r.withDirectives)((0,r.createVNode)(f,{ref:h,triggerRef:g.value},{default:function(){return[(0,r.createVNode)("div",{class:"bk-color-dropdown-container"},[(0,r.createVNode)("div",{class:"bk-color-picker-dropdown",onClick:function(e){e.stopPropagation()},onMousedown:function(e){e.stopPropagation()},onKeydown:A},[(0,r.createVNode)(S,{ref:p,colorObj:d,onChange:F},null),(0,r.createVNode)(w,{colorObj:d,onChange:F},null),(0,r.createVNode)(v,{colorObj:d,onTab:V,onChange:F},null),y.value?(0,r.createVNode)("div",{class:"bk-color-picker-recommend-container"},[(0,r.createVNode)(x,{colorObj:d,recommend:n.recommend,onTab:j,onChange:F},null)]):void 0])])]}}),[[r.vShow,l.value]])]}})]),[[(0,r.resolveDirective)("clickoutside"),T]])}}}),C=(0,e.withInstall)(j)})(),l})()));