123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668 |
- module.exports =
- /******/ (function(modules) { // webpackBootstrap
- /******/ // The module cache
- /******/ var installedModules = {};
- /******/
- /******/ // The require function
- /******/ function __webpack_require__(moduleId) {
- /******/
- /******/ // Check if module is in cache
- /******/ if(installedModules[moduleId]) {
- /******/ return installedModules[moduleId].exports;
- /******/ }
- /******/ // Create a new module (and put it into the cache)
- /******/ var module = installedModules[moduleId] = {
- /******/ i: moduleId,
- /******/ l: false,
- /******/ exports: {}
- /******/ };
- /******/
- /******/ // Execute the module function
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
- /******/
- /******/ // Flag the module as loaded
- /******/ module.l = true;
- /******/
- /******/ // Return the exports of the module
- /******/ return module.exports;
- /******/ }
- /******/
- /******/
- /******/ // expose the modules object (__webpack_modules__)
- /******/ __webpack_require__.m = modules;
- /******/
- /******/ // expose the module cache
- /******/ __webpack_require__.c = installedModules;
- /******/
- /******/ // define getter function for harmony exports
- /******/ __webpack_require__.d = function(exports, name, getter) {
- /******/ if(!__webpack_require__.o(exports, name)) {
- /******/ Object.defineProperty(exports, name, {
- /******/ configurable: false,
- /******/ enumerable: true,
- /******/ get: getter
- /******/ });
- /******/ }
- /******/ };
- /******/
- /******/ // getDefaultExport function for compatibility with non-harmony modules
- /******/ __webpack_require__.n = function(module) {
- /******/ var getter = module && module.__esModule ?
- /******/ function getDefault() { return module['default']; } :
- /******/ function getModuleExports() { return module; };
- /******/ __webpack_require__.d(getter, 'a', getter);
- /******/ return getter;
- /******/ };
- /******/
- /******/ // Object.prototype.hasOwnProperty.call
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
- /******/
- /******/ // __webpack_public_path__
- /******/ __webpack_require__.p = "/dist/";
- /******/
- /******/ // Load entry module and return exports
- /******/ return __webpack_require__(__webpack_require__.s = 420);
- /******/ })
- /************************************************************************/
- /******/ ({
- /***/ 0:
- /***/ (function(module, exports) {
- /* globals __VUE_SSR_CONTEXT__ */
- // IMPORTANT: Do NOT use ES2015 features in this file.
- // This module is a runtime utility for cleaner component module output and will
- // be included in the final webpack user bundle.
- module.exports = function normalizeComponent (
- rawScriptExports,
- compiledTemplate,
- functionalTemplate,
- injectStyles,
- scopeId,
- moduleIdentifier /* server only */
- ) {
- var esModule
- var scriptExports = rawScriptExports = rawScriptExports || {}
- // ES6 modules interop
- var type = typeof rawScriptExports.default
- if (type === 'object' || type === 'function') {
- esModule = rawScriptExports
- scriptExports = rawScriptExports.default
- }
- // Vue.extend constructor export interop
- var options = typeof scriptExports === 'function'
- ? scriptExports.options
- : scriptExports
- // render functions
- if (compiledTemplate) {
- options.render = compiledTemplate.render
- options.staticRenderFns = compiledTemplate.staticRenderFns
- options._compiled = true
- }
- // functional template
- if (functionalTemplate) {
- options.functional = true
- }
- // scopedId
- if (scopeId) {
- options._scopeId = scopeId
- }
- var hook
- if (moduleIdentifier) { // server build
- hook = function (context) {
- // 2.3 injection
- context =
- context || // cached call
- (this.$vnode && this.$vnode.ssrContext) || // stateful
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
- // 2.2 with runInNewContext: true
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
- context = __VUE_SSR_CONTEXT__
- }
- // inject component styles
- if (injectStyles) {
- injectStyles.call(this, context)
- }
- // register component module identifier for async chunk inferrence
- if (context && context._registeredComponents) {
- context._registeredComponents.add(moduleIdentifier)
- }
- }
- // used by ssr in case component is cached and beforeCreate
- // never gets called
- options._ssrRegister = hook
- } else if (injectStyles) {
- hook = injectStyles
- }
- if (hook) {
- var functional = options.functional
- var existing = functional
- ? options.render
- : options.beforeCreate
- if (!functional) {
- // inject component registration as beforeCreate hook
- options.beforeCreate = existing
- ? [].concat(existing, hook)
- : [hook]
- } else {
- // for template-only hot-reload because in that case the render fn doesn't
- // go through the normalizer
- options._injectStyles = hook
- // register for functioal component in vue file
- options.render = function renderWithStyleInjection (h, context) {
- hook.call(context)
- return existing(h, context)
- }
- }
- }
- return {
- esModule: esModule,
- exports: scriptExports,
- options: options
- }
- }
- /***/ }),
- /***/ 10:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/clickoutside");
- /***/ }),
- /***/ 15:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/button");
- /***/ }),
- /***/ 4:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/mixins/locale");
- /***/ }),
- /***/ 420:
- /***/ (function(module, exports, __webpack_require__) {
- module.exports = __webpack_require__(421);
- /***/ }),
- /***/ 421:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _main = __webpack_require__(422);
- var _main2 = _interopRequireDefault(_main);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- /* istanbul ignore next */
- _main2.default.install = function (Vue) {
- Vue.component(_main2.default.name, _main2.default);
- };
- exports.default = _main2.default;
- /***/ }),
- /***/ 422:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(423);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ddeee594_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__ = __webpack_require__(437);
- var normalizeComponent = __webpack_require__(0)
- /* script */
- /* template */
- /* template functional */
- var __vue_template_functional__ = false
- /* styles */
- var __vue_styles__ = null
- /* scopeId */
- var __vue_scopeId__ = null
- /* moduleIdentifier (server only) */
- var __vue_module_identifier__ = null
- var Component = normalizeComponent(
- __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
- __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_ddeee594_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_main_vue__["a" /* default */],
- __vue_template_functional__,
- __vue_styles__,
- __vue_scopeId__,
- __vue_module_identifier__
- )
- /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
- /***/ }),
- /***/ 423:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _color = __webpack_require__(424);
- var _color2 = _interopRequireDefault(_color);
- var _pickerDropdown = __webpack_require__(425);
- var _pickerDropdown2 = _interopRequireDefault(_pickerDropdown);
- var _clickoutside = __webpack_require__(10);
- var _clickoutside2 = _interopRequireDefault(_clickoutside);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- exports.default = {
- name: 'ElColorPicker',
- props: {
- value: String,
- showAlpha: Boolean,
- colorFormat: String,
- disabled: Boolean,
- size: String,
- popperClass: String
- },
- inject: {
- elFormItem: {
- default: ''
- }
- },
- directives: { Clickoutside: _clickoutside2.default },
- computed: {
- displayedColor: function displayedColor() {
- if (!this.value && !this.showPanelColor) {
- return 'transparent';
- } else {
- var _color$toRgb = this.color.toRgb(),
- r = _color$toRgb.r,
- g = _color$toRgb.g,
- b = _color$toRgb.b;
- return this.showAlpha ? 'rgba(' + r + ', ' + g + ', ' + b + ', ' + this.color.get('alpha') / 100 + ')' : 'rgb(' + r + ', ' + g + ', ' + b + ')';
- }
- },
- _elFormItemSize: function _elFormItemSize() {
- return (this.elFormItem || {}).elFormItemSize;
- },
- colorSize: function colorSize() {
- return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
- }
- },
- watch: {
- value: function value(val) {
- if (!val) {
- this.showPanelColor = false;
- } else if (val && val !== this.color.value) {
- this.color.fromString(val);
- }
- },
- color: {
- deep: true,
- handler: function handler() {
- this.showPanelColor = true;
- }
- },
- displayedColor: function displayedColor(val) {
- this.$emit('active-change', val);
- }
- },
- methods: {
- handleTrigger: function handleTrigger() {
- if (this.disabled) return;
- this.showPicker = !this.showPicker;
- },
- confirmValue: function confirmValue(value) {
- this.$emit('input', this.color.value);
- this.$emit('change', this.color.value);
- this.showPicker = false;
- },
- clearValue: function clearValue() {
- this.$emit('input', null);
- this.$emit('change', null);
- this.showPanelColor = false;
- this.showPicker = false;
- this.resetColor();
- },
- hide: function hide() {
- this.showPicker = false;
- this.resetColor();
- },
- resetColor: function resetColor() {
- var _this = this;
- this.$nextTick(function (_) {
- if (_this.value) {
- _this.color.fromString(_this.value);
- } else {
- _this.showPanelColor = false;
- }
- });
- }
- },
- mounted: function mounted() {
- var value = this.value;
- if (value) {
- this.color.fromString(value);
- }
- this.popperElm = this.$refs.dropdown.$el;
- },
- data: function data() {
- var color = new _color2.default({
- enableAlpha: this.showAlpha,
- format: this.colorFormat
- });
- return {
- color: color,
- showPicker: false,
- showPanelColor: false
- };
- },
- components: {
- PickerDropdown: _pickerDropdown2.default
- }
- }; //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- /***/ }),
- /***/ 424:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- var hsv2hsl = function hsv2hsl(hue, sat, val) {
- return [hue, sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0, hue / 2];
- };
- // 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>
- var isOnePointZero = function isOnePointZero(n) {
- return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
- };
- var isPercentage = function isPercentage(n) {
- return typeof n === 'string' && n.indexOf('%') !== -1;
- };
- // Take input from [0, n] and return it as [0, 1]
- var bound01 = function bound01(value, max) {
- if (isOnePointZero(value)) value = '100%';
- var processPercent = isPercentage(value);
- value = Math.min(max, Math.max(0, parseFloat(value)));
- // Automatically convert percentage into number
- if (processPercent) {
- value = parseInt(value * max, 10) / 100;
- }
- // Handle floating point rounding errors
- if (Math.abs(value - max) < 0.000001) {
- return 1;
- }
- // Convert into [0, 1] range if it isn't already
- return value % max / parseFloat(max);
- };
- var INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
- var toHex = function toHex(_ref) {
- var r = _ref.r,
- g = _ref.g,
- b = _ref.b;
- var hexOne = function hexOne(value) {
- value = Math.min(Math.round(value), 255);
- var high = Math.floor(value / 16);
- var low = value % 16;
- return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
- };
- if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
- return '#' + hexOne(r) + hexOne(g) + hexOne(b);
- };
- var HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
- var parseHexChannel = function parseHexChannel(hex) {
- if (hex.length === 2) {
- return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
- }
- return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
- };
- var hsl2hsv = function hsl2hsv(hue, sat, light) {
- sat = sat / 100;
- light = light / 100;
- var smin = sat;
- var lmin = Math.max(light, 0.01);
- var sv = void 0;
- var v = void 0;
- light *= 2;
- sat *= light <= 1 ? light : 2 - light;
- smin *= lmin <= 1 ? lmin : 2 - lmin;
- v = (light + sat) / 2;
- sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
- return {
- h: hue,
- s: sv * 100,
- v: v * 100
- };
- };
- // `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]
- var rgb2hsv = function rgb2hsv(r, g, b) {
- r = bound01(r, 255);
- g = bound01(g, 255);
- b = bound01(b, 255);
- var max = Math.max(r, g, b);
- var min = Math.min(r, g, b);
- var h = void 0,
- s = void 0;
- var 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 * 360, s: s * 100, v: v * 100 };
- };
- // `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]
- var hsv2rgb = function hsv2rgb(h, s, v) {
- h = bound01(h, 360) * 6;
- s = bound01(s, 100);
- v = bound01(v, 100);
- var i = Math.floor(h);
- var f = h - i;
- var p = v * (1 - s);
- var q = v * (1 - f * s);
- var t = v * (1 - (1 - f) * s);
- var mod = i % 6;
- var r = [v, q, p, p, t, v][mod];
- var g = [t, v, v, q, p, p][mod];
- var b = [p, p, t, v, v, q][mod];
- return {
- r: Math.round(r * 255),
- g: Math.round(g * 255),
- b: Math.round(b * 255)
- };
- };
- var Color = function () {
- function Color(options) {
- _classCallCheck(this, Color);
- this._hue = 0;
- this._saturation = 100;
- this._value = 100;
- this._alpha = 100;
- this.enableAlpha = false;
- this.format = 'hex';
- this.value = '';
- options = options || {};
- for (var option in options) {
- if (options.hasOwnProperty(option)) {
- this[option] = options[option];
- }
- }
- this.doOnChange();
- }
- Color.prototype.set = function set(prop, value) {
- if (arguments.length === 1 && (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) === 'object') {
- for (var p in prop) {
- if (prop.hasOwnProperty(p)) {
- this.set(p, prop[p]);
- }
- }
- return;
- }
- this['_' + prop] = value;
- this.doOnChange();
- };
- Color.prototype.get = function get(prop) {
- return this['_' + prop];
- };
- Color.prototype.toRgb = function toRgb() {
- return hsv2rgb(this._hue, this._saturation, this._value);
- };
- Color.prototype.fromString = function fromString(value) {
- var _this = this;
- if (!value) {
- this._hue = 0;
- this._saturation = 100;
- this._value = 100;
- this.doOnChange();
- return;
- }
- var fromHSV = function fromHSV(h, s, v) {
- _this._hue = h;
- _this._saturation = s;
- _this._value = v;
- _this.doOnChange();
- };
- if (value.indexOf('hsl') !== -1) {
- var parts = value.replace(/hsla|hsl|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
- return val !== '';
- }).map(function (val, index) {
- return index > 2 ? parseFloat(val) : parseInt(val, 10);
- });
- if (parts.length === 4) {
- this._alpha = Math.floor(parseFloat(parts[3]) * 100);
- }
- if (parts.length >= 3) {
- var _hsl2hsv = hsl2hsv(parts[0], parts[1], parts[2]),
- h = _hsl2hsv.h,
- s = _hsl2hsv.s,
- v = _hsl2hsv.v;
- fromHSV(h, s, v);
- }
- } else if (value.indexOf('hsv') !== -1) {
- var _parts = value.replace(/hsva|hsv|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
- return val !== '';
- }).map(function (val, index) {
- return index > 2 ? parseFloat(val) : parseInt(val, 10);
- });
- if (_parts.length === 4) {
- this._alpha = Math.floor(parseFloat(_parts[3]) * 100);
- }
- if (_parts.length >= 3) {
- fromHSV(_parts[0], _parts[1], _parts[2]);
- }
- } else if (value.indexOf('rgb') !== -1) {
- var _parts2 = value.replace(/rgba|rgb|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
- return val !== '';
- }).map(function (val, index) {
- return index > 2 ? parseFloat(val) : parseInt(val, 10);
- });
- if (_parts2.length === 4) {
- this._alpha = Math.floor(parseFloat(_parts2[3]) * 100);
- }
- if (_parts2.length >= 3) {
- var _rgb2hsv = rgb2hsv(_parts2[0], _parts2[1], _parts2[2]),
- _h = _rgb2hsv.h,
- _s = _rgb2hsv.s,
- _v = _rgb2hsv.v;
- fromHSV(_h, _s, _v);
- }
- } else if (value.indexOf('#') !== -1) {
- var hex = value.replace('#', '').trim();
- var r = void 0,
- g = void 0,
- b = void 0;
- if (hex.length === 3) {
- r = parseHexChannel(hex[0] + hex[0]);
- g = parseHexChannel(hex[1] + hex[1]);
- b = parseHexChannel(hex[2] + hex[2]);
- } else if (hex.length === 6) {
- r = parseHexChannel(hex.substring(0, 2));
- g = parseHexChannel(hex.substring(2, 4));
- b = parseHexChannel(hex.substring(4));
- }
- var _rgb2hsv2 = rgb2hsv(r, g, b),
- _h2 = _rgb2hsv2.h,
- _s2 = _rgb2hsv2.s,
- _v2 = _rgb2hsv2.v;
- fromHSV(_h2, _s2, _v2);
- }
- };
- Color.prototype.doOnChange = function doOnChange() {
- var _hue = this._hue,
- _saturation = this._saturation,
- _value = this._value,
- _alpha = this._alpha,
- format = this.format;
- if (this.enableAlpha) {
- switch (format) {
- case 'hsl':
- var hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
- this.value = 'hsla(' + _hue + ', ' + Math.round(hsl[1] * 100) + '%, ' + Math.round(hsl[2] * 100) + '%, ' + _alpha / 100 + ')';
- break;
- case 'hsv':
- this.value = 'hsva(' + _hue + ', ' + Math.round(_saturation) + '%, ' + Math.round(_value) + '%, ' + _alpha / 100 + ')';
- break;
- default:
- var _hsv2rgb = hsv2rgb(_hue, _saturation, _value),
- r = _hsv2rgb.r,
- g = _hsv2rgb.g,
- b = _hsv2rgb.b;
- this.value = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + _alpha / 100 + ')';
- }
- } else {
- switch (format) {
- case 'hsl':
- var _hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
- this.value = 'hsl(' + _hue + ', ' + Math.round(_hsl[1] * 100) + '%, ' + Math.round(_hsl[2] * 100) + '%)';
- break;
- case 'hsv':
- this.value = 'hsv(' + _hue + ', ' + Math.round(_saturation) + '%, ' + Math.round(_value) + '%)';
- break;
- case 'rgb':
- var _hsv2rgb2 = hsv2rgb(_hue, _saturation, _value),
- _r = _hsv2rgb2.r,
- _g = _hsv2rgb2.g,
- _b = _hsv2rgb2.b;
- this.value = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';
- break;
- default:
- this.value = toHex(hsv2rgb(_hue, _saturation, _value));
- }
- }
- };
- return Color;
- }();
- exports.default = Color;
- ;
- /***/ }),
- /***/ 425:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_dropdown_vue__ = __webpack_require__(426);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_dropdown_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_dropdown_vue__);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5ba5ff98_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_dropdown_vue__ = __webpack_require__(436);
- var normalizeComponent = __webpack_require__(0)
- /* script */
- /* template */
- /* template functional */
- var __vue_template_functional__ = false
- /* styles */
- var __vue_styles__ = null
- /* scopeId */
- var __vue_scopeId__ = null
- /* moduleIdentifier (server only) */
- var __vue_module_identifier__ = null
- var Component = normalizeComponent(
- __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_dropdown_vue___default.a,
- __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_5ba5ff98_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_picker_dropdown_vue__["a" /* default */],
- __vue_template_functional__,
- __vue_styles__,
- __vue_scopeId__,
- __vue_module_identifier__
- )
- /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
- /***/ }),
- /***/ 426:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _svPanel = __webpack_require__(427);
- var _svPanel2 = _interopRequireDefault(_svPanel);
- var _hueSlider = __webpack_require__(430);
- var _hueSlider2 = _interopRequireDefault(_hueSlider);
- var _alphaSlider = __webpack_require__(433);
- var _alphaSlider2 = _interopRequireDefault(_alphaSlider);
- var _vuePopper = __webpack_require__(8);
- var _vuePopper2 = _interopRequireDefault(_vuePopper);
- var _locale = __webpack_require__(4);
- var _locale2 = _interopRequireDefault(_locale);
- var _input = __webpack_require__(6);
- var _input2 = _interopRequireDefault(_input);
- var _button = __webpack_require__(15);
- var _button2 = _interopRequireDefault(_button);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- exports.default = {
- name: 'el-color-picker-dropdown',
- mixins: [_vuePopper2.default, _locale2.default],
- components: {
- SvPanel: _svPanel2.default,
- HueSlider: _hueSlider2.default,
- AlphaSlider: _alphaSlider2.default,
- ElInput: _input2.default,
- ElButton: _button2.default
- },
- props: {
- color: {
- required: true
- },
- showAlpha: Boolean
- },
- data: function data() {
- return {
- customInput: ''
- };
- },
- computed: {
- currentColor: function currentColor() {
- var parent = this.$parent;
- return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
- }
- },
- methods: {
- confirmValue: function confirmValue() {
- this.$emit('pick');
- },
- handleConfirm: function handleConfirm() {
- var valid = this.showAlpha ? this.validRGBA(this.customInput) : this.validRGBHex(this.customInput);
- if (valid) {
- this.color.fromString(this.customInput);
- } else {
- this.customInput = this.currentColor;
- }
- },
- validRGBHex: function validRGBHex(color) {
- return (/^#[A-Fa-f0-9]{6}$/.test(color)
- );
- },
- validRGBA: function validRGBA(color) {
- var matches = color.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/);
- if (!matches) return false;
- var list = matches.map(function (v) {
- return parseInt(v, 10);
- }).slice(1);
- if (list.some(function (v) {
- return isNaN(v);
- })) return false;
- var r = list[0],
- g = list[1],
- b = list[2],
- a = list[3];
- if ([r, g, b].some(function (v) {
- return v < 0 || v > 255;
- }) || a < 0 || a > 1) return false;
- return true;
- }
- },
- mounted: function mounted() {
- this.$parent.popperElm = this.popperElm = this.$el;
- this.referenceElm = this.$parent.$el;
- },
- watch: {
- showPopper: function showPopper(val) {
- var _this = this;
- if (val === true) {
- this.$nextTick(function () {
- var _$refs = _this.$refs,
- sl = _$refs.sl,
- hue = _$refs.hue,
- alpha = _$refs.alpha;
- sl && sl.update();
- hue && hue.update();
- alpha && alpha.update();
- });
- }
- },
- currentColor: function currentColor(val) {
- this.customInput = val;
- }
- }
- }; //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- /***/ }),
- /***/ 427:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_sv_panel_vue__ = __webpack_require__(428);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_sv_panel_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_sv_panel_vue__);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_3efd9e06_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_sv_panel_vue__ = __webpack_require__(429);
- var normalizeComponent = __webpack_require__(0)
- /* script */
- /* template */
- /* template functional */
- var __vue_template_functional__ = false
- /* styles */
- var __vue_styles__ = null
- /* scopeId */
- var __vue_scopeId__ = null
- /* moduleIdentifier (server only) */
- var __vue_module_identifier__ = null
- var Component = normalizeComponent(
- __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_sv_panel_vue___default.a,
- __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_3efd9e06_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_sv_panel_vue__["a" /* default */],
- __vue_template_functional__,
- __vue_styles__,
- __vue_scopeId__,
- __vue_module_identifier__
- )
- /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
- /***/ }),
- /***/ 428:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _draggable = __webpack_require__(45);
- var _draggable2 = _interopRequireDefault(_draggable);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- exports.default = {
- name: 'el-sl-panel',
- props: {
- color: {
- required: true
- }
- },
- computed: {
- colorValue: function colorValue() {
- var hue = this.color.get('hue');
- var value = this.color.get('value');
- return { hue: hue, value: value };
- }
- },
- watch: {
- colorValue: function colorValue() {
- this.update();
- }
- },
- methods: {
- update: function update() {
- var saturation = this.color.get('saturation');
- var value = this.color.get('value');
- var el = this.$el;
- var _el$getBoundingClient = el.getBoundingClientRect(),
- width = _el$getBoundingClient.width,
- height = _el$getBoundingClient.height;
- if (!height) height = width * 3 / 4;
- this.cursorLeft = saturation * width / 100;
- this.cursorTop = (100 - value) * height / 100;
- this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
- },
- handleDrag: function handleDrag(event) {
- var el = this.$el;
- var rect = el.getBoundingClientRect();
- var left = event.clientX - rect.left;
- var top = event.clientY - rect.top;
- left = Math.max(0, left);
- left = Math.min(left, rect.width);
- top = Math.max(0, top);
- top = Math.min(top, rect.height);
- this.cursorLeft = left;
- this.cursorTop = top;
- this.color.set({
- saturation: left / rect.width * 100,
- value: 100 - top / rect.height * 100
- });
- }
- },
- mounted: function mounted() {
- var _this = this;
- (0, _draggable2.default)(this.$el, {
- drag: function drag(event) {
- _this.handleDrag(event);
- },
- end: function end(event) {
- _this.handleDrag(event);
- }
- });
- this.update();
- },
- data: function data() {
- return {
- cursorTop: 0,
- cursorLeft: 0,
- background: 'hsl(0, 100%, 50%)'
- };
- }
- }; //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- /***/ }),
- /***/ 429:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-color-svpanel",style:({
- backgroundColor: _vm.background
- })},[_c('div',{staticClass:"el-color-svpanel__white"}),_c('div',{staticClass:"el-color-svpanel__black"}),_c('div',{staticClass:"el-color-svpanel__cursor",style:({
- top: _vm.cursorTop + 'px',
- left: _vm.cursorLeft + 'px'
- })},[_c('div')])])}
- var staticRenderFns = []
- var esExports = { render: render, staticRenderFns: staticRenderFns }
- /* harmony default export */ __webpack_exports__["a"] = (esExports);
- /***/ }),
- /***/ 430:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_hue_slider_vue__ = __webpack_require__(431);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_hue_slider_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_hue_slider_vue__);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_3709e77c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_hue_slider_vue__ = __webpack_require__(432);
- var normalizeComponent = __webpack_require__(0)
- /* script */
- /* template */
- /* template functional */
- var __vue_template_functional__ = false
- /* styles */
- var __vue_styles__ = null
- /* scopeId */
- var __vue_scopeId__ = null
- /* moduleIdentifier (server only) */
- var __vue_module_identifier__ = null
- var Component = normalizeComponent(
- __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_hue_slider_vue___default.a,
- __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_3709e77c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_hue_slider_vue__["a" /* default */],
- __vue_template_functional__,
- __vue_styles__,
- __vue_scopeId__,
- __vue_module_identifier__
- )
- /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
- /***/ }),
- /***/ 431:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _draggable = __webpack_require__(45);
- var _draggable2 = _interopRequireDefault(_draggable);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- exports.default = {
- name: 'el-color-hue-slider',
- props: {
- color: {
- required: true
- },
- vertical: Boolean
- },
- data: function data() {
- return {
- thumbLeft: 0,
- thumbTop: 0
- };
- },
- computed: {
- hueValue: function hueValue() {
- var hue = this.color.get('hue');
- return hue;
- }
- },
- watch: {
- hueValue: function hueValue() {
- this.update();
- }
- },
- methods: {
- handleClick: function handleClick(event) {
- var thumb = this.$refs.thumb;
- var target = event.target;
- if (target !== thumb) {
- this.handleDrag(event);
- }
- },
- handleDrag: function handleDrag(event) {
- var rect = this.$el.getBoundingClientRect();
- var thumb = this.$refs.thumb;
- var hue = void 0;
- if (!this.vertical) {
- var left = event.clientX - rect.left;
- left = Math.min(left, rect.width - thumb.offsetWidth / 2);
- left = Math.max(thumb.offsetWidth / 2, left);
- hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
- } else {
- var top = event.clientY - rect.top;
- top = Math.min(top, rect.height - thumb.offsetHeight / 2);
- top = Math.max(thumb.offsetHeight / 2, top);
- hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
- }
- this.color.set('hue', hue);
- },
- getThumbLeft: function getThumbLeft() {
- if (this.vertical) return 0;
- var el = this.$el;
- var hue = this.color.get('hue');
- if (!el) return 0;
- var thumb = this.$refs.thumb;
- return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
- },
- getThumbTop: function getThumbTop() {
- if (!this.vertical) return 0;
- var el = this.$el;
- var hue = this.color.get('hue');
- if (!el) return 0;
- var thumb = this.$refs.thumb;
- return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
- },
- update: function update() {
- this.thumbLeft = this.getThumbLeft();
- this.thumbTop = this.getThumbTop();
- }
- },
- mounted: function mounted() {
- var _this = this;
- var _$refs = this.$refs,
- bar = _$refs.bar,
- thumb = _$refs.thumb;
- var dragConfig = {
- drag: function drag(event) {
- _this.handleDrag(event);
- },
- end: function end(event) {
- _this.handleDrag(event);
- }
- };
- (0, _draggable2.default)(bar, dragConfig);
- (0, _draggable2.default)(thumb, dragConfig);
- this.update();
- }
- }; //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- /***/ }),
- /***/ 432:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-color-hue-slider",class:{ 'is-vertical': _vm.vertical }},[_c('div',{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{"click":_vm.handleClick}}),_c('div',{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:({
- left: _vm.thumbLeft + 'px',
- top: _vm.thumbTop + 'px'
- })})])}
- var staticRenderFns = []
- var esExports = { render: render, staticRenderFns: staticRenderFns }
- /* harmony default export */ __webpack_exports__["a"] = (esExports);
- /***/ }),
- /***/ 433:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_alpha_slider_vue__ = __webpack_require__(434);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_alpha_slider_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_alpha_slider_vue__);
- /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_219b4f1c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_alpha_slider_vue__ = __webpack_require__(435);
- var normalizeComponent = __webpack_require__(0)
- /* script */
- /* template */
- /* template functional */
- var __vue_template_functional__ = false
- /* styles */
- var __vue_styles__ = null
- /* scopeId */
- var __vue_scopeId__ = null
- /* moduleIdentifier (server only) */
- var __vue_module_identifier__ = null
- var Component = normalizeComponent(
- __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_alpha_slider_vue___default.a,
- __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_219b4f1c_hasScoped_false_preserveWhitespace_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_alpha_slider_vue__["a" /* default */],
- __vue_template_functional__,
- __vue_styles__,
- __vue_scopeId__,
- __vue_module_identifier__
- )
- /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
- /***/ }),
- /***/ 434:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- var _draggable = __webpack_require__(45);
- var _draggable2 = _interopRequireDefault(_draggable);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- exports.default = {
- name: 'el-color-alpha-slider',
- props: {
- color: {
- required: true
- },
- vertical: Boolean
- },
- watch: {
- 'color._alpha': function color_alpha() {
- this.update();
- },
- 'color.value': function colorValue() {
- this.update();
- }
- },
- methods: {
- handleClick: function handleClick(event) {
- var thumb = this.$refs.thumb;
- var target = event.target;
- if (target !== thumb) {
- this.handleDrag(event);
- }
- },
- handleDrag: function handleDrag(event) {
- var rect = this.$el.getBoundingClientRect();
- var thumb = this.$refs.thumb;
- if (!this.vertical) {
- var left = event.clientX - rect.left;
- left = Math.max(thumb.offsetWidth / 2, left);
- left = Math.min(left, rect.width - thumb.offsetWidth / 2);
- this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
- } else {
- var top = event.clientY - rect.top;
- top = Math.max(thumb.offsetHeight / 2, top);
- top = Math.min(top, rect.height - thumb.offsetHeight / 2);
- this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
- }
- },
- getThumbLeft: function getThumbLeft() {
- if (this.vertical) return 0;
- var el = this.$el;
- var alpha = this.color._alpha;
- if (!el) return 0;
- var thumb = this.$refs.thumb;
- return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
- },
- getThumbTop: function getThumbTop() {
- if (!this.vertical) return 0;
- var el = this.$el;
- var alpha = this.color._alpha;
- if (!el) return 0;
- var thumb = this.$refs.thumb;
- return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
- },
- getBackground: function getBackground() {
- if (this.color && this.color.value) {
- var _color$toRgb = this.color.toRgb(),
- r = _color$toRgb.r,
- g = _color$toRgb.g,
- b = _color$toRgb.b;
- return 'linear-gradient(to right, rgba(' + r + ', ' + g + ', ' + b + ', 0) 0%, rgba(' + r + ', ' + g + ', ' + b + ', 1) 100%)';
- }
- return null;
- },
- update: function update() {
- this.thumbLeft = this.getThumbLeft();
- this.thumbTop = this.getThumbTop();
- this.background = this.getBackground();
- }
- },
- data: function data() {
- return {
- thumbLeft: 0,
- thumbTop: 0,
- background: null
- };
- },
- mounted: function mounted() {
- var _this = this;
- var _$refs = this.$refs,
- bar = _$refs.bar,
- thumb = _$refs.thumb;
- var dragConfig = {
- drag: function drag(event) {
- _this.handleDrag(event);
- },
- end: function end(event) {
- _this.handleDrag(event);
- }
- };
- (0, _draggable2.default)(bar, dragConfig);
- (0, _draggable2.default)(thumb, dragConfig);
- this.update();
- }
- }; //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- /***/ }),
- /***/ 435:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-color-alpha-slider",class:{ 'is-vertical': _vm.vertical }},[_c('div',{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:({
- background: _vm.background
- }),on:{"click":_vm.handleClick}}),_c('div',{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:({
- left: _vm.thumbLeft + 'px',
- top: _vm.thumbTop + 'px'
- })})])}
- var staticRenderFns = []
- var esExports = { render: render, staticRenderFns: staticRenderFns }
- /* harmony default export */ __webpack_exports__["a"] = (esExports);
- /***/ }),
- /***/ 436:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":"el-zoom-in-top"},on:{"after-leave":_vm.doDestroy}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPopper),expression:"showPopper"}],staticClass:"el-color-dropdown"},[_c('div',{staticClass:"el-color-dropdown__main-wrapper"},[_c('hue-slider',{ref:"hue",staticStyle:{"float":"right"},attrs:{"color":_vm.color,"vertical":""}}),_c('sv-panel',{ref:"sl",attrs:{"color":_vm.color}})],1),(_vm.showAlpha)?_c('alpha-slider',{ref:"alpha",attrs:{"color":_vm.color}}):_vm._e(),_c('div',{staticClass:"el-color-dropdown__btns"},[_c('span',{staticClass:"el-color-dropdown__value"},[_c('el-input',{attrs:{"size":"mini"},on:{"blur":_vm.handleConfirm},nativeOn:{"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.handleConfirm($event)}},model:{value:(_vm.customInput),callback:function ($$v) {_vm.customInput=$$v},expression:"customInput"}})],1),_c('el-button',{staticClass:"el-color-dropdown__link-btn",attrs:{"size":"mini","type":"text"},on:{"click":function($event){_vm.$emit('clear')}}},[_vm._v("\n "+_vm._s(_vm.t('el.colorpicker.clear'))+"\n ")]),_c('el-button',{staticClass:"el-color-dropdown__btn",attrs:{"plain":"","size":"mini"},on:{"click":_vm.confirmValue}},[_vm._v("\n "+_vm._s(_vm.t('el.colorpicker.confirm'))+"\n ")])],1)],1)])}
- var staticRenderFns = []
- var esExports = { render: render, staticRenderFns: staticRenderFns }
- /* harmony default export */ __webpack_exports__["a"] = (esExports);
- /***/ }),
- /***/ 437:
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
- "use strict";
- var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:(_vm.hide),expression:"hide"}],class:[
- 'el-color-picker',
- _vm.disabled ? 'is-disabled' : '',
- _vm.colorSize ? ("el-color-picker--" + _vm.colorSize) : ''
- ]},[(_vm.disabled)?_c('div',{staticClass:"el-color-picker__mask"}):_vm._e(),_c('div',{staticClass:"el-color-picker__trigger",on:{"click":_vm.handleTrigger}},[_c('span',{staticClass:"el-color-picker__color",class:{ 'is-alpha': _vm.showAlpha }},[_c('span',{staticClass:"el-color-picker__color-inner",style:({
- backgroundColor: _vm.displayedColor
- })}),(!_vm.value && !_vm.showPanelColor)?_c('span',{staticClass:"el-color-picker__empty el-icon-close"}):_vm._e()]),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.value || _vm.showPanelColor),expression:"value || showPanelColor"}],staticClass:"el-color-picker__icon el-icon-arrow-down"})]),_c('picker-dropdown',{ref:"dropdown",class:['el-color-picker__panel', _vm.popperClass || ''],attrs:{"color":_vm.color,"show-alpha":_vm.showAlpha},on:{"pick":_vm.confirmValue,"clear":_vm.clearValue},model:{value:(_vm.showPicker),callback:function ($$v) {_vm.showPicker=$$v},expression:"showPicker"}})],1)}
- var staticRenderFns = []
- var esExports = { render: render, staticRenderFns: staticRenderFns }
- /* harmony default export */ __webpack_exports__["a"] = (esExports);
- /***/ }),
- /***/ 45:
- /***/ (function(module, exports, __webpack_require__) {
- "use strict";
- exports.__esModule = true;
- exports.default = function (element, options) {
- if (_vue2.default.prototype.$isServer) return;
- var moveFn = function moveFn(event) {
- if (options.drag) {
- options.drag(event);
- }
- };
- var upFn = function upFn(event) {
- document.removeEventListener('mousemove', moveFn);
- document.removeEventListener('mouseup', upFn);
- document.onselectstart = null;
- document.ondragstart = null;
- isDragging = false;
- if (options.end) {
- options.end(event);
- }
- };
- element.addEventListener('mousedown', function (event) {
- if (isDragging) return;
- document.onselectstart = function () {
- return false;
- };
- document.ondragstart = function () {
- return false;
- };
- document.addEventListener('mousemove', moveFn);
- document.addEventListener('mouseup', upFn);
- isDragging = true;
- if (options.start) {
- options.start(event);
- }
- });
- };
- var _vue = __webpack_require__(5);
- var _vue2 = _interopRequireDefault(_vue);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- var isDragging = false;
- /***/ }),
- /***/ 5:
- /***/ (function(module, exports) {
- module.exports = require("vue");
- /***/ }),
- /***/ 6:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/input");
- /***/ }),
- /***/ 8:
- /***/ (function(module, exports) {
- module.exports = require("element-ui/lib/utils/vue-popper");
- /***/ })
- /******/ });
|