iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
294 lines (281 loc) • 8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var standardColor = {
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aqua: '#00ffff',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
black: '#000000',
blanchedalmond: '#ffebcd',
blue: '#0000ff',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dodgerblue: '#1e90ff',
feldspar: '#d19275',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
fuchsia: '#ff00ff',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
gray: '#808080',
green: '#008000',
greenyellow: '#adff2f',
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',
lightgrey: '#d3d3d3',
lightgreen: '#90ee90',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslateblue: '#8470ff',
lightslategray: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
lime: '#00ff00',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
maroon: '#800000',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370d8',
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: '#d87093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
purple: '#800080',
red: '#ff0000',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
silver: '#c0c0c0',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
teal: '#008080',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
violetred: '#d02090',
wheat: '#f5deb3',
white: '#ffffff',
whitesmoke: '#f5f5f5',
yellow: '#ffff00',
yellowgreen: '#9acd32'
};
var ColorUtils = function () {
function ColorUtils() {
(0, _classCallCheck3['default'])(this, ColorUtils);
}
(0, _createClass3['default'])(ColorUtils, [{
key: 'formatColor',
value: function formatColor(e, opti) {
if (e.indexOf('#') > -1) {
var color = this.toNum3(e);
return 'rgba(' + color.toString() + ',' + opti + ')';
} else {
if (standardColor[e]) {
var _color = this.toNum3(standardColor[e]);
return 'rgba(' + _color.toString() + ',' + opti + ')';
} else {
var _color2 = this.toNum3(e);
return 'rgba(' + _color2.toString() + ',' + opti + ')';
}
}
}
}, {
key: 'isHex',
value: function isHex(color) {
return color.length >= 4 && color[0] === '#';
}
}, {
key: 'isRgb',
value: function isRgb(color) {
return color.length >= 10 && color.slice(0, 3) === 'rgb';
}
}, {
key: 'isRgba',
value: function isRgba(color) {
return color.length >= 13 && color.slice(0, 4) === 'rgba';
}
}, {
key: 'pad2',
value: function pad2(num) {
var t = num.toString(16);
if (t.length === 1) t = '0' + t;
return t;
}
}, {
key: 'lighten',
value: function lighten(colorStr, weight) {
return this.mix('fff', colorStr, weight);
}
}, {
key: 'darken',
value: function darken(colorStr, weight) {
return this.mix('000', colorStr, weight);
}
}, {
key: 'mix',
value: function mix(color1, color2, weight1, alpha1, alpha2) {
color1 = this.dropPrefix(color1);
color2 = this.dropPrefix(color2);
if (weight1 === undefined) weight1 = 0.5;
if (alpha1 === undefined) alpha1 = 1;
if (alpha2 === undefined) alpha2 = 1;
var w = 2 * weight1 - 1;
var alphaDelta = alpha1 - alpha2;
var w1 = ((w * alphaDelta === -1 ? w : (w + alphaDelta) / (1 + w * alphaDelta)) + 1) / 2;
var w2 = 1 - w1;
var rgb1 = this.toNum3(color1);
var rgb2 = this.toNum3(color2);
var r = Math.round(w1 * rgb1[0] + w2 * rgb2[0]);
var g = Math.round(w1 * rgb1[1] + w2 * rgb2[1]);
var b = Math.round(w1 * rgb1[2] + w2 * rgb2[2]);
return '#' + this.pad2(r) + this.pad2(g) + this.pad2(b);
}
}, {
key: 'rgbaToRgb',
value: function rgbaToRgb(colorStr, alpha, bgColorStr) {
return this.mix(colorStr, bgColorStr || 'fff', 0.5, alpha, 1 - alpha);
}
}, {
key: 'toNum3',
value: function toNum3(colorStr) {
colorStr = this.dropPrefix(colorStr);
if (colorStr.length === 3) {
colorStr = colorStr[0] + colorStr[0] + colorStr[1] + colorStr[1] + colorStr[2] + colorStr[2];
}
var r = parseInt(colorStr.slice(0, 2), 16);
var g = parseInt(colorStr.slice(2, 4), 16);
var b = parseInt(colorStr.slice(4, 6), 16);
return [r, g, b];
}
}, {
key: 'dropPrefix',
value: function dropPrefix(colorStr) {
return colorStr.replace('#', '');
}
}, {
key: 'rrggbbToHsl',
value: function rrggbbToHsl(rrggbb) {
var rgb = this.toNum3(rrggbb);
var hsl = this.rgbToHsl.apply(0, rgb);
return [hsl[0].toFixed(0), (hsl[1] * 100).toFixed(3) + '%', (hsl[2] * 100).toFixed(3) + '%'].join(',');
}
}, {
key: 'rgbToHsl',
value: function rgbToHsl(r, g, b) {
var r_r = r / 255,
r_g = g / 255,
r_b = b / 255;
var max = Math.max(r_r, r_g, r_b),
min = Math.min(r_r, r_g, r_b);
var delta = max - min,
l = (max + min) / 2;
var h = 0,
s = 0;
if (Math.abs(delta) > 0.00001) {
if (l <= 0.5) s = delta / (max + min);else s = delta / (2 - max - min);
var r_dist = (max - r_r) / delta,
g_dist = (max - r_g) / delta,
b_dist = (max - r_b) / delta;
if (r_r == max) h = b_dist - g_dist;else if (r_g == max) h = 2 + r_dist - b_dist;else h = 4 + g_dist - r_dist;
h = h * 60;
if (h < 0) h += 360;
}
return [h, s, l];
}
}]);
return ColorUtils;
}();
exports['default'] = new ColorUtils();