color-picker.js 47 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, {
  41. /******/ configurable: false,
  42. /******/ enumerable: true,
  43. /******/ get: getter
  44. /******/ });
  45. /******/ }
  46. /******/ };
  47. /******/
  48. /******/ // getDefaultExport function for compatibility with non-harmony modules
  49. /******/ __webpack_require__.n = function(module) {
  50. /******/ var getter = module && module.__esModule ?
  51. /******/ function getDefault() { return module['default']; } :
  52. /******/ function getModuleExports() { return module; };
  53. /******/ __webpack_require__.d(getter, 'a', getter);
  54. /******/ return getter;
  55. /******/ };
  56. /******/
  57. /******/ // Object.prototype.hasOwnProperty.call
  58. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  59. /******/
  60. /******/ // __webpack_public_path__
  61. /******/ __webpack_require__.p = "/dist/";
  62. /******/
  63. /******/ // Load entry module and return exports
  64. /******/ return __webpack_require__(__webpack_require__.s = 420);
  65. /******/ })
  66. /************************************************************************/
  67. /******/ ({
  68. /***/ 0:
  69. /***/ (function(module, exports) {
  70. /* globals __VUE_SSR_CONTEXT__ */
  71. // IMPORTANT: Do NOT use ES2015 features in this file.
  72. // This module is a runtime utility for cleaner component module output and will
  73. // be included in the final webpack user bundle.
  74. module.exports = function normalizeComponent (
  75. rawScriptExports,
  76. compiledTemplate,
  77. functionalTemplate,
  78. injectStyles,
  79. scopeId,
  80. moduleIdentifier /* server only */
  81. ) {
  82. var esModule
  83. var scriptExports = rawScriptExports = rawScriptExports || {}
  84. // ES6 modules interop
  85. var type = typeof rawScriptExports.default
  86. if (type === 'object' || type === 'function') {
  87. esModule = rawScriptExports
  88. scriptExports = rawScriptExports.default
  89. }
  90. // Vue.extend constructor export interop
  91. var options = typeof scriptExports === 'function'
  92. ? scriptExports.options
  93. : scriptExports
  94. // render functions
  95. if (compiledTemplate) {
  96. options.render = compiledTemplate.render
  97. options.staticRenderFns = compiledTemplate.staticRenderFns
  98. options._compiled = true
  99. }
  100. // functional template
  101. if (functionalTemplate) {
  102. options.functional = true
  103. }
  104. // scopedId
  105. if (scopeId) {
  106. options._scopeId = scopeId
  107. }
  108. var hook
  109. if (moduleIdentifier) { // server build
  110. hook = function (context) {
  111. // 2.3 injection
  112. context =
  113. context || // cached call
  114. (this.$vnode && this.$vnode.ssrContext) || // stateful
  115. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  116. // 2.2 with runInNewContext: true
  117. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  118. context = __VUE_SSR_CONTEXT__
  119. }
  120. // inject component styles
  121. if (injectStyles) {
  122. injectStyles.call(this, context)
  123. }
  124. // register component module identifier for async chunk inferrence
  125. if (context && context._registeredComponents) {
  126. context._registeredComponents.add(moduleIdentifier)
  127. }
  128. }
  129. // used by ssr in case component is cached and beforeCreate
  130. // never gets called
  131. options._ssrRegister = hook
  132. } else if (injectStyles) {
  133. hook = injectStyles
  134. }
  135. if (hook) {
  136. var functional = options.functional
  137. var existing = functional
  138. ? options.render
  139. : options.beforeCreate
  140. if (!functional) {
  141. // inject component registration as beforeCreate hook
  142. options.beforeCreate = existing
  143. ? [].concat(existing, hook)
  144. : [hook]
  145. } else {
  146. // for template-only hot-reload because in that case the render fn doesn't
  147. // go through the normalizer
  148. options._injectStyles = hook
  149. // register for functioal component in vue file
  150. options.render = function renderWithStyleInjection (h, context) {
  151. hook.call(context)
  152. return existing(h, context)
  153. }
  154. }
  155. }
  156. return {
  157. esModule: esModule,
  158. exports: scriptExports,
  159. options: options
  160. }
  161. }
  162. /***/ }),
  163. /***/ 10:
  164. /***/ (function(module, exports) {
  165. module.exports = require("element-ui/lib/utils/clickoutside");
  166. /***/ }),
  167. /***/ 15:
  168. /***/ (function(module, exports) {
  169. module.exports = require("element-ui/lib/button");
  170. /***/ }),
  171. /***/ 4:
  172. /***/ (function(module, exports) {
  173. module.exports = require("element-ui/lib/mixins/locale");
  174. /***/ }),
  175. /***/ 420:
  176. /***/ (function(module, exports, __webpack_require__) {
  177. module.exports = __webpack_require__(421);
  178. /***/ }),
  179. /***/ 421:
  180. /***/ (function(module, exports, __webpack_require__) {
  181. "use strict";
  182. exports.__esModule = true;
  183. var _main = __webpack_require__(422);
  184. var _main2 = _interopRequireDefault(_main);
  185. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  186. /* istanbul ignore next */
  187. _main2.default.install = function (Vue) {
  188. Vue.component(_main2.default.name, _main2.default);
  189. };
  190. exports.default = _main2.default;
  191. /***/ }),
  192. /***/ 422:
  193. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  194. "use strict";
  195. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  196. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue__ = __webpack_require__(423);
  197. /* 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__);
  198. /* 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);
  199. var normalizeComponent = __webpack_require__(0)
  200. /* script */
  201. /* template */
  202. /* template functional */
  203. var __vue_template_functional__ = false
  204. /* styles */
  205. var __vue_styles__ = null
  206. /* scopeId */
  207. var __vue_scopeId__ = null
  208. /* moduleIdentifier (server only) */
  209. var __vue_module_identifier__ = null
  210. var Component = normalizeComponent(
  211. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_main_vue___default.a,
  212. __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 */],
  213. __vue_template_functional__,
  214. __vue_styles__,
  215. __vue_scopeId__,
  216. __vue_module_identifier__
  217. )
  218. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  219. /***/ }),
  220. /***/ 423:
  221. /***/ (function(module, exports, __webpack_require__) {
  222. "use strict";
  223. exports.__esModule = true;
  224. var _color = __webpack_require__(424);
  225. var _color2 = _interopRequireDefault(_color);
  226. var _pickerDropdown = __webpack_require__(425);
  227. var _pickerDropdown2 = _interopRequireDefault(_pickerDropdown);
  228. var _clickoutside = __webpack_require__(10);
  229. var _clickoutside2 = _interopRequireDefault(_clickoutside);
  230. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  231. exports.default = {
  232. name: 'ElColorPicker',
  233. props: {
  234. value: String,
  235. showAlpha: Boolean,
  236. colorFormat: String,
  237. disabled: Boolean,
  238. size: String,
  239. popperClass: String
  240. },
  241. inject: {
  242. elFormItem: {
  243. default: ''
  244. }
  245. },
  246. directives: { Clickoutside: _clickoutside2.default },
  247. computed: {
  248. displayedColor: function displayedColor() {
  249. if (!this.value && !this.showPanelColor) {
  250. return 'transparent';
  251. } else {
  252. var _color$toRgb = this.color.toRgb(),
  253. r = _color$toRgb.r,
  254. g = _color$toRgb.g,
  255. b = _color$toRgb.b;
  256. return this.showAlpha ? 'rgba(' + r + ', ' + g + ', ' + b + ', ' + this.color.get('alpha') / 100 + ')' : 'rgb(' + r + ', ' + g + ', ' + b + ')';
  257. }
  258. },
  259. _elFormItemSize: function _elFormItemSize() {
  260. return (this.elFormItem || {}).elFormItemSize;
  261. },
  262. colorSize: function colorSize() {
  263. return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  264. }
  265. },
  266. watch: {
  267. value: function value(val) {
  268. if (!val) {
  269. this.showPanelColor = false;
  270. } else if (val && val !== this.color.value) {
  271. this.color.fromString(val);
  272. }
  273. },
  274. color: {
  275. deep: true,
  276. handler: function handler() {
  277. this.showPanelColor = true;
  278. }
  279. },
  280. displayedColor: function displayedColor(val) {
  281. this.$emit('active-change', val);
  282. }
  283. },
  284. methods: {
  285. handleTrigger: function handleTrigger() {
  286. if (this.disabled) return;
  287. this.showPicker = !this.showPicker;
  288. },
  289. confirmValue: function confirmValue(value) {
  290. this.$emit('input', this.color.value);
  291. this.$emit('change', this.color.value);
  292. this.showPicker = false;
  293. },
  294. clearValue: function clearValue() {
  295. this.$emit('input', null);
  296. this.$emit('change', null);
  297. this.showPanelColor = false;
  298. this.showPicker = false;
  299. this.resetColor();
  300. },
  301. hide: function hide() {
  302. this.showPicker = false;
  303. this.resetColor();
  304. },
  305. resetColor: function resetColor() {
  306. var _this = this;
  307. this.$nextTick(function (_) {
  308. if (_this.value) {
  309. _this.color.fromString(_this.value);
  310. } else {
  311. _this.showPanelColor = false;
  312. }
  313. });
  314. }
  315. },
  316. mounted: function mounted() {
  317. var value = this.value;
  318. if (value) {
  319. this.color.fromString(value);
  320. }
  321. this.popperElm = this.$refs.dropdown.$el;
  322. },
  323. data: function data() {
  324. var color = new _color2.default({
  325. enableAlpha: this.showAlpha,
  326. format: this.colorFormat
  327. });
  328. return {
  329. color: color,
  330. showPicker: false,
  331. showPanelColor: false
  332. };
  333. },
  334. components: {
  335. PickerDropdown: _pickerDropdown2.default
  336. }
  337. }; //
  338. //
  339. //
  340. //
  341. //
  342. //
  343. //
  344. //
  345. //
  346. //
  347. //
  348. //
  349. //
  350. //
  351. //
  352. //
  353. //
  354. //
  355. //
  356. //
  357. //
  358. //
  359. //
  360. //
  361. //
  362. //
  363. //
  364. //
  365. //
  366. //
  367. //
  368. /***/ }),
  369. /***/ 424:
  370. /***/ (function(module, exports, __webpack_require__) {
  371. "use strict";
  372. exports.__esModule = true;
  373. 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; };
  374. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  375. var hsv2hsl = function hsv2hsl(hue, sat, val) {
  376. return [hue, sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0, hue / 2];
  377. };
  378. // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
  379. // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
  380. var isOnePointZero = function isOnePointZero(n) {
  381. return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
  382. };
  383. var isPercentage = function isPercentage(n) {
  384. return typeof n === 'string' && n.indexOf('%') !== -1;
  385. };
  386. // Take input from [0, n] and return it as [0, 1]
  387. var bound01 = function bound01(value, max) {
  388. if (isOnePointZero(value)) value = '100%';
  389. var processPercent = isPercentage(value);
  390. value = Math.min(max, Math.max(0, parseFloat(value)));
  391. // Automatically convert percentage into number
  392. if (processPercent) {
  393. value = parseInt(value * max, 10) / 100;
  394. }
  395. // Handle floating point rounding errors
  396. if (Math.abs(value - max) < 0.000001) {
  397. return 1;
  398. }
  399. // Convert into [0, 1] range if it isn't already
  400. return value % max / parseFloat(max);
  401. };
  402. var INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
  403. var toHex = function toHex(_ref) {
  404. var r = _ref.r,
  405. g = _ref.g,
  406. b = _ref.b;
  407. var hexOne = function hexOne(value) {
  408. value = Math.min(Math.round(value), 255);
  409. var high = Math.floor(value / 16);
  410. var low = value % 16;
  411. return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low);
  412. };
  413. if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
  414. return '#' + hexOne(r) + hexOne(g) + hexOne(b);
  415. };
  416. var HEX_INT_MAP = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 };
  417. var parseHexChannel = function parseHexChannel(hex) {
  418. if (hex.length === 2) {
  419. return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
  420. }
  421. return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
  422. };
  423. var hsl2hsv = function hsl2hsv(hue, sat, light) {
  424. sat = sat / 100;
  425. light = light / 100;
  426. var smin = sat;
  427. var lmin = Math.max(light, 0.01);
  428. var sv = void 0;
  429. var v = void 0;
  430. light *= 2;
  431. sat *= light <= 1 ? light : 2 - light;
  432. smin *= lmin <= 1 ? lmin : 2 - lmin;
  433. v = (light + sat) / 2;
  434. sv = light === 0 ? 2 * smin / (lmin + smin) : 2 * sat / (light + sat);
  435. return {
  436. h: hue,
  437. s: sv * 100,
  438. v: v * 100
  439. };
  440. };
  441. // `rgbToHsv`
  442. // Converts an RGB color value to HSV
  443. // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
  444. // *Returns:* { h, s, v } in [0,1]
  445. var rgb2hsv = function rgb2hsv(r, g, b) {
  446. r = bound01(r, 255);
  447. g = bound01(g, 255);
  448. b = bound01(b, 255);
  449. var max = Math.max(r, g, b);
  450. var min = Math.min(r, g, b);
  451. var h = void 0,
  452. s = void 0;
  453. var v = max;
  454. var d = max - min;
  455. s = max === 0 ? 0 : d / max;
  456. if (max === min) {
  457. h = 0; // achromatic
  458. } else {
  459. switch (max) {
  460. case r:
  461. h = (g - b) / d + (g < b ? 6 : 0);
  462. break;
  463. case g:
  464. h = (b - r) / d + 2;
  465. break;
  466. case b:
  467. h = (r - g) / d + 4;
  468. break;
  469. }
  470. h /= 6;
  471. }
  472. return { h: h * 360, s: s * 100, v: v * 100 };
  473. };
  474. // `hsvToRgb`
  475. // Converts an HSV color value to RGB.
  476. // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
  477. // *Returns:* { r, g, b } in the set [0, 255]
  478. var hsv2rgb = function hsv2rgb(h, s, v) {
  479. h = bound01(h, 360) * 6;
  480. s = bound01(s, 100);
  481. v = bound01(v, 100);
  482. var i = Math.floor(h);
  483. var f = h - i;
  484. var p = v * (1 - s);
  485. var q = v * (1 - f * s);
  486. var t = v * (1 - (1 - f) * s);
  487. var mod = i % 6;
  488. var r = [v, q, p, p, t, v][mod];
  489. var g = [t, v, v, q, p, p][mod];
  490. var b = [p, p, t, v, v, q][mod];
  491. return {
  492. r: Math.round(r * 255),
  493. g: Math.round(g * 255),
  494. b: Math.round(b * 255)
  495. };
  496. };
  497. var Color = function () {
  498. function Color(options) {
  499. _classCallCheck(this, Color);
  500. this._hue = 0;
  501. this._saturation = 100;
  502. this._value = 100;
  503. this._alpha = 100;
  504. this.enableAlpha = false;
  505. this.format = 'hex';
  506. this.value = '';
  507. options = options || {};
  508. for (var option in options) {
  509. if (options.hasOwnProperty(option)) {
  510. this[option] = options[option];
  511. }
  512. }
  513. this.doOnChange();
  514. }
  515. Color.prototype.set = function set(prop, value) {
  516. if (arguments.length === 1 && (typeof prop === 'undefined' ? 'undefined' : _typeof(prop)) === 'object') {
  517. for (var p in prop) {
  518. if (prop.hasOwnProperty(p)) {
  519. this.set(p, prop[p]);
  520. }
  521. }
  522. return;
  523. }
  524. this['_' + prop] = value;
  525. this.doOnChange();
  526. };
  527. Color.prototype.get = function get(prop) {
  528. return this['_' + prop];
  529. };
  530. Color.prototype.toRgb = function toRgb() {
  531. return hsv2rgb(this._hue, this._saturation, this._value);
  532. };
  533. Color.prototype.fromString = function fromString(value) {
  534. var _this = this;
  535. if (!value) {
  536. this._hue = 0;
  537. this._saturation = 100;
  538. this._value = 100;
  539. this.doOnChange();
  540. return;
  541. }
  542. var fromHSV = function fromHSV(h, s, v) {
  543. _this._hue = h;
  544. _this._saturation = s;
  545. _this._value = v;
  546. _this.doOnChange();
  547. };
  548. if (value.indexOf('hsl') !== -1) {
  549. var parts = value.replace(/hsla|hsl|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
  550. return val !== '';
  551. }).map(function (val, index) {
  552. return index > 2 ? parseFloat(val) : parseInt(val, 10);
  553. });
  554. if (parts.length === 4) {
  555. this._alpha = Math.floor(parseFloat(parts[3]) * 100);
  556. }
  557. if (parts.length >= 3) {
  558. var _hsl2hsv = hsl2hsv(parts[0], parts[1], parts[2]),
  559. h = _hsl2hsv.h,
  560. s = _hsl2hsv.s,
  561. v = _hsl2hsv.v;
  562. fromHSV(h, s, v);
  563. }
  564. } else if (value.indexOf('hsv') !== -1) {
  565. var _parts = value.replace(/hsva|hsv|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
  566. return val !== '';
  567. }).map(function (val, index) {
  568. return index > 2 ? parseFloat(val) : parseInt(val, 10);
  569. });
  570. if (_parts.length === 4) {
  571. this._alpha = Math.floor(parseFloat(_parts[3]) * 100);
  572. }
  573. if (_parts.length >= 3) {
  574. fromHSV(_parts[0], _parts[1], _parts[2]);
  575. }
  576. } else if (value.indexOf('rgb') !== -1) {
  577. var _parts2 = value.replace(/rgba|rgb|\(|\)/gm, '').split(/\s|,/g).filter(function (val) {
  578. return val !== '';
  579. }).map(function (val, index) {
  580. return index > 2 ? parseFloat(val) : parseInt(val, 10);
  581. });
  582. if (_parts2.length === 4) {
  583. this._alpha = Math.floor(parseFloat(_parts2[3]) * 100);
  584. }
  585. if (_parts2.length >= 3) {
  586. var _rgb2hsv = rgb2hsv(_parts2[0], _parts2[1], _parts2[2]),
  587. _h = _rgb2hsv.h,
  588. _s = _rgb2hsv.s,
  589. _v = _rgb2hsv.v;
  590. fromHSV(_h, _s, _v);
  591. }
  592. } else if (value.indexOf('#') !== -1) {
  593. var hex = value.replace('#', '').trim();
  594. var r = void 0,
  595. g = void 0,
  596. b = void 0;
  597. if (hex.length === 3) {
  598. r = parseHexChannel(hex[0] + hex[0]);
  599. g = parseHexChannel(hex[1] + hex[1]);
  600. b = parseHexChannel(hex[2] + hex[2]);
  601. } else if (hex.length === 6) {
  602. r = parseHexChannel(hex.substring(0, 2));
  603. g = parseHexChannel(hex.substring(2, 4));
  604. b = parseHexChannel(hex.substring(4));
  605. }
  606. var _rgb2hsv2 = rgb2hsv(r, g, b),
  607. _h2 = _rgb2hsv2.h,
  608. _s2 = _rgb2hsv2.s,
  609. _v2 = _rgb2hsv2.v;
  610. fromHSV(_h2, _s2, _v2);
  611. }
  612. };
  613. Color.prototype.doOnChange = function doOnChange() {
  614. var _hue = this._hue,
  615. _saturation = this._saturation,
  616. _value = this._value,
  617. _alpha = this._alpha,
  618. format = this.format;
  619. if (this.enableAlpha) {
  620. switch (format) {
  621. case 'hsl':
  622. var hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
  623. this.value = 'hsla(' + _hue + ', ' + Math.round(hsl[1] * 100) + '%, ' + Math.round(hsl[2] * 100) + '%, ' + _alpha / 100 + ')';
  624. break;
  625. case 'hsv':
  626. this.value = 'hsva(' + _hue + ', ' + Math.round(_saturation) + '%, ' + Math.round(_value) + '%, ' + _alpha / 100 + ')';
  627. break;
  628. default:
  629. var _hsv2rgb = hsv2rgb(_hue, _saturation, _value),
  630. r = _hsv2rgb.r,
  631. g = _hsv2rgb.g,
  632. b = _hsv2rgb.b;
  633. this.value = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + _alpha / 100 + ')';
  634. }
  635. } else {
  636. switch (format) {
  637. case 'hsl':
  638. var _hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
  639. this.value = 'hsl(' + _hue + ', ' + Math.round(_hsl[1] * 100) + '%, ' + Math.round(_hsl[2] * 100) + '%)';
  640. break;
  641. case 'hsv':
  642. this.value = 'hsv(' + _hue + ', ' + Math.round(_saturation) + '%, ' + Math.round(_value) + '%)';
  643. break;
  644. case 'rgb':
  645. var _hsv2rgb2 = hsv2rgb(_hue, _saturation, _value),
  646. _r = _hsv2rgb2.r,
  647. _g = _hsv2rgb2.g,
  648. _b = _hsv2rgb2.b;
  649. this.value = 'rgb(' + _r + ', ' + _g + ', ' + _b + ')';
  650. break;
  651. default:
  652. this.value = toHex(hsv2rgb(_hue, _saturation, _value));
  653. }
  654. }
  655. };
  656. return Color;
  657. }();
  658. exports.default = Color;
  659. ;
  660. /***/ }),
  661. /***/ 425:
  662. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  663. "use strict";
  664. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  665. /* 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);
  666. /* 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__);
  667. /* 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);
  668. var normalizeComponent = __webpack_require__(0)
  669. /* script */
  670. /* template */
  671. /* template functional */
  672. var __vue_template_functional__ = false
  673. /* styles */
  674. var __vue_styles__ = null
  675. /* scopeId */
  676. var __vue_scopeId__ = null
  677. /* moduleIdentifier (server only) */
  678. var __vue_module_identifier__ = null
  679. var Component = normalizeComponent(
  680. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_picker_dropdown_vue___default.a,
  681. __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 */],
  682. __vue_template_functional__,
  683. __vue_styles__,
  684. __vue_scopeId__,
  685. __vue_module_identifier__
  686. )
  687. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  688. /***/ }),
  689. /***/ 426:
  690. /***/ (function(module, exports, __webpack_require__) {
  691. "use strict";
  692. exports.__esModule = true;
  693. var _svPanel = __webpack_require__(427);
  694. var _svPanel2 = _interopRequireDefault(_svPanel);
  695. var _hueSlider = __webpack_require__(430);
  696. var _hueSlider2 = _interopRequireDefault(_hueSlider);
  697. var _alphaSlider = __webpack_require__(433);
  698. var _alphaSlider2 = _interopRequireDefault(_alphaSlider);
  699. var _vuePopper = __webpack_require__(8);
  700. var _vuePopper2 = _interopRequireDefault(_vuePopper);
  701. var _locale = __webpack_require__(4);
  702. var _locale2 = _interopRequireDefault(_locale);
  703. var _input = __webpack_require__(6);
  704. var _input2 = _interopRequireDefault(_input);
  705. var _button = __webpack_require__(15);
  706. var _button2 = _interopRequireDefault(_button);
  707. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  708. exports.default = {
  709. name: 'el-color-picker-dropdown',
  710. mixins: [_vuePopper2.default, _locale2.default],
  711. components: {
  712. SvPanel: _svPanel2.default,
  713. HueSlider: _hueSlider2.default,
  714. AlphaSlider: _alphaSlider2.default,
  715. ElInput: _input2.default,
  716. ElButton: _button2.default
  717. },
  718. props: {
  719. color: {
  720. required: true
  721. },
  722. showAlpha: Boolean
  723. },
  724. data: function data() {
  725. return {
  726. customInput: ''
  727. };
  728. },
  729. computed: {
  730. currentColor: function currentColor() {
  731. var parent = this.$parent;
  732. return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
  733. }
  734. },
  735. methods: {
  736. confirmValue: function confirmValue() {
  737. this.$emit('pick');
  738. },
  739. handleConfirm: function handleConfirm() {
  740. var valid = this.showAlpha ? this.validRGBA(this.customInput) : this.validRGBHex(this.customInput);
  741. if (valid) {
  742. this.color.fromString(this.customInput);
  743. } else {
  744. this.customInput = this.currentColor;
  745. }
  746. },
  747. validRGBHex: function validRGBHex(color) {
  748. return (/^#[A-Fa-f0-9]{6}$/.test(color)
  749. );
  750. },
  751. validRGBA: function validRGBA(color) {
  752. var matches = color.match(/^rgba\((\d+), ?(\d+), ?(\d+), ?([.0-9]+)\)$/);
  753. if (!matches) return false;
  754. var list = matches.map(function (v) {
  755. return parseInt(v, 10);
  756. }).slice(1);
  757. if (list.some(function (v) {
  758. return isNaN(v);
  759. })) return false;
  760. var r = list[0],
  761. g = list[1],
  762. b = list[2],
  763. a = list[3];
  764. if ([r, g, b].some(function (v) {
  765. return v < 0 || v > 255;
  766. }) || a < 0 || a > 1) return false;
  767. return true;
  768. }
  769. },
  770. mounted: function mounted() {
  771. this.$parent.popperElm = this.popperElm = this.$el;
  772. this.referenceElm = this.$parent.$el;
  773. },
  774. watch: {
  775. showPopper: function showPopper(val) {
  776. var _this = this;
  777. if (val === true) {
  778. this.$nextTick(function () {
  779. var _$refs = _this.$refs,
  780. sl = _$refs.sl,
  781. hue = _$refs.hue,
  782. alpha = _$refs.alpha;
  783. sl && sl.update();
  784. hue && hue.update();
  785. alpha && alpha.update();
  786. });
  787. }
  788. },
  789. currentColor: function currentColor(val) {
  790. this.customInput = val;
  791. }
  792. }
  793. }; //
  794. //
  795. //
  796. //
  797. //
  798. //
  799. //
  800. //
  801. //
  802. //
  803. //
  804. //
  805. //
  806. //
  807. //
  808. //
  809. //
  810. //
  811. //
  812. //
  813. //
  814. //
  815. //
  816. //
  817. //
  818. //
  819. //
  820. //
  821. //
  822. //
  823. //
  824. //
  825. //
  826. //
  827. //
  828. //
  829. //
  830. //
  831. /***/ }),
  832. /***/ 427:
  833. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  834. "use strict";
  835. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  836. /* 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);
  837. /* 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__);
  838. /* 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);
  839. var normalizeComponent = __webpack_require__(0)
  840. /* script */
  841. /* template */
  842. /* template functional */
  843. var __vue_template_functional__ = false
  844. /* styles */
  845. var __vue_styles__ = null
  846. /* scopeId */
  847. var __vue_scopeId__ = null
  848. /* moduleIdentifier (server only) */
  849. var __vue_module_identifier__ = null
  850. var Component = normalizeComponent(
  851. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_sv_panel_vue___default.a,
  852. __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 */],
  853. __vue_template_functional__,
  854. __vue_styles__,
  855. __vue_scopeId__,
  856. __vue_module_identifier__
  857. )
  858. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  859. /***/ }),
  860. /***/ 428:
  861. /***/ (function(module, exports, __webpack_require__) {
  862. "use strict";
  863. exports.__esModule = true;
  864. var _draggable = __webpack_require__(45);
  865. var _draggable2 = _interopRequireDefault(_draggable);
  866. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  867. exports.default = {
  868. name: 'el-sl-panel',
  869. props: {
  870. color: {
  871. required: true
  872. }
  873. },
  874. computed: {
  875. colorValue: function colorValue() {
  876. var hue = this.color.get('hue');
  877. var value = this.color.get('value');
  878. return { hue: hue, value: value };
  879. }
  880. },
  881. watch: {
  882. colorValue: function colorValue() {
  883. this.update();
  884. }
  885. },
  886. methods: {
  887. update: function update() {
  888. var saturation = this.color.get('saturation');
  889. var value = this.color.get('value');
  890. var el = this.$el;
  891. var _el$getBoundingClient = el.getBoundingClientRect(),
  892. width = _el$getBoundingClient.width,
  893. height = _el$getBoundingClient.height;
  894. if (!height) height = width * 3 / 4;
  895. this.cursorLeft = saturation * width / 100;
  896. this.cursorTop = (100 - value) * height / 100;
  897. this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
  898. },
  899. handleDrag: function handleDrag(event) {
  900. var el = this.$el;
  901. var rect = el.getBoundingClientRect();
  902. var left = event.clientX - rect.left;
  903. var top = event.clientY - rect.top;
  904. left = Math.max(0, left);
  905. left = Math.min(left, rect.width);
  906. top = Math.max(0, top);
  907. top = Math.min(top, rect.height);
  908. this.cursorLeft = left;
  909. this.cursorTop = top;
  910. this.color.set({
  911. saturation: left / rect.width * 100,
  912. value: 100 - top / rect.height * 100
  913. });
  914. }
  915. },
  916. mounted: function mounted() {
  917. var _this = this;
  918. (0, _draggable2.default)(this.$el, {
  919. drag: function drag(event) {
  920. _this.handleDrag(event);
  921. },
  922. end: function end(event) {
  923. _this.handleDrag(event);
  924. }
  925. });
  926. this.update();
  927. },
  928. data: function data() {
  929. return {
  930. cursorTop: 0,
  931. cursorLeft: 0,
  932. background: 'hsl(0, 100%, 50%)'
  933. };
  934. }
  935. }; //
  936. //
  937. //
  938. //
  939. //
  940. //
  941. //
  942. //
  943. //
  944. //
  945. //
  946. //
  947. //
  948. //
  949. //
  950. //
  951. //
  952. /***/ }),
  953. /***/ 429:
  954. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  955. "use strict";
  956. var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"el-color-svpanel",style:({
  957. backgroundColor: _vm.background
  958. })},[_c('div',{staticClass:"el-color-svpanel__white"}),_c('div',{staticClass:"el-color-svpanel__black"}),_c('div',{staticClass:"el-color-svpanel__cursor",style:({
  959. top: _vm.cursorTop + 'px',
  960. left: _vm.cursorLeft + 'px'
  961. })},[_c('div')])])}
  962. var staticRenderFns = []
  963. var esExports = { render: render, staticRenderFns: staticRenderFns }
  964. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  965. /***/ }),
  966. /***/ 430:
  967. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  968. "use strict";
  969. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  970. /* 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);
  971. /* 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__);
  972. /* 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);
  973. var normalizeComponent = __webpack_require__(0)
  974. /* script */
  975. /* template */
  976. /* template functional */
  977. var __vue_template_functional__ = false
  978. /* styles */
  979. var __vue_styles__ = null
  980. /* scopeId */
  981. var __vue_scopeId__ = null
  982. /* moduleIdentifier (server only) */
  983. var __vue_module_identifier__ = null
  984. var Component = normalizeComponent(
  985. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_hue_slider_vue___default.a,
  986. __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 */],
  987. __vue_template_functional__,
  988. __vue_styles__,
  989. __vue_scopeId__,
  990. __vue_module_identifier__
  991. )
  992. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  993. /***/ }),
  994. /***/ 431:
  995. /***/ (function(module, exports, __webpack_require__) {
  996. "use strict";
  997. exports.__esModule = true;
  998. var _draggable = __webpack_require__(45);
  999. var _draggable2 = _interopRequireDefault(_draggable);
  1000. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  1001. exports.default = {
  1002. name: 'el-color-hue-slider',
  1003. props: {
  1004. color: {
  1005. required: true
  1006. },
  1007. vertical: Boolean
  1008. },
  1009. data: function data() {
  1010. return {
  1011. thumbLeft: 0,
  1012. thumbTop: 0
  1013. };
  1014. },
  1015. computed: {
  1016. hueValue: function hueValue() {
  1017. var hue = this.color.get('hue');
  1018. return hue;
  1019. }
  1020. },
  1021. watch: {
  1022. hueValue: function hueValue() {
  1023. this.update();
  1024. }
  1025. },
  1026. methods: {
  1027. handleClick: function handleClick(event) {
  1028. var thumb = this.$refs.thumb;
  1029. var target = event.target;
  1030. if (target !== thumb) {
  1031. this.handleDrag(event);
  1032. }
  1033. },
  1034. handleDrag: function handleDrag(event) {
  1035. var rect = this.$el.getBoundingClientRect();
  1036. var thumb = this.$refs.thumb;
  1037. var hue = void 0;
  1038. if (!this.vertical) {
  1039. var left = event.clientX - rect.left;
  1040. left = Math.min(left, rect.width - thumb.offsetWidth / 2);
  1041. left = Math.max(thumb.offsetWidth / 2, left);
  1042. hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
  1043. } else {
  1044. var top = event.clientY - rect.top;
  1045. top = Math.min(top, rect.height - thumb.offsetHeight / 2);
  1046. top = Math.max(thumb.offsetHeight / 2, top);
  1047. hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
  1048. }
  1049. this.color.set('hue', hue);
  1050. },
  1051. getThumbLeft: function getThumbLeft() {
  1052. if (this.vertical) return 0;
  1053. var el = this.$el;
  1054. var hue = this.color.get('hue');
  1055. if (!el) return 0;
  1056. var thumb = this.$refs.thumb;
  1057. return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
  1058. },
  1059. getThumbTop: function getThumbTop() {
  1060. if (!this.vertical) return 0;
  1061. var el = this.$el;
  1062. var hue = this.color.get('hue');
  1063. if (!el) return 0;
  1064. var thumb = this.$refs.thumb;
  1065. return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
  1066. },
  1067. update: function update() {
  1068. this.thumbLeft = this.getThumbLeft();
  1069. this.thumbTop = this.getThumbTop();
  1070. }
  1071. },
  1072. mounted: function mounted() {
  1073. var _this = this;
  1074. var _$refs = this.$refs,
  1075. bar = _$refs.bar,
  1076. thumb = _$refs.thumb;
  1077. var dragConfig = {
  1078. drag: function drag(event) {
  1079. _this.handleDrag(event);
  1080. },
  1081. end: function end(event) {
  1082. _this.handleDrag(event);
  1083. }
  1084. };
  1085. (0, _draggable2.default)(bar, dragConfig);
  1086. (0, _draggable2.default)(thumb, dragConfig);
  1087. this.update();
  1088. }
  1089. }; //
  1090. //
  1091. //
  1092. //
  1093. //
  1094. //
  1095. //
  1096. //
  1097. //
  1098. //
  1099. //
  1100. //
  1101. //
  1102. /***/ }),
  1103. /***/ 432:
  1104. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1105. "use strict";
  1106. 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:({
  1107. left: _vm.thumbLeft + 'px',
  1108. top: _vm.thumbTop + 'px'
  1109. })})])}
  1110. var staticRenderFns = []
  1111. var esExports = { render: render, staticRenderFns: staticRenderFns }
  1112. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  1113. /***/ }),
  1114. /***/ 433:
  1115. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1116. "use strict";
  1117. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  1118. /* 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);
  1119. /* 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__);
  1120. /* 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);
  1121. var normalizeComponent = __webpack_require__(0)
  1122. /* script */
  1123. /* template */
  1124. /* template functional */
  1125. var __vue_template_functional__ = false
  1126. /* styles */
  1127. var __vue_styles__ = null
  1128. /* scopeId */
  1129. var __vue_scopeId__ = null
  1130. /* moduleIdentifier (server only) */
  1131. var __vue_module_identifier__ = null
  1132. var Component = normalizeComponent(
  1133. __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_alpha_slider_vue___default.a,
  1134. __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 */],
  1135. __vue_template_functional__,
  1136. __vue_styles__,
  1137. __vue_scopeId__,
  1138. __vue_module_identifier__
  1139. )
  1140. /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
  1141. /***/ }),
  1142. /***/ 434:
  1143. /***/ (function(module, exports, __webpack_require__) {
  1144. "use strict";
  1145. exports.__esModule = true;
  1146. var _draggable = __webpack_require__(45);
  1147. var _draggable2 = _interopRequireDefault(_draggable);
  1148. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  1149. exports.default = {
  1150. name: 'el-color-alpha-slider',
  1151. props: {
  1152. color: {
  1153. required: true
  1154. },
  1155. vertical: Boolean
  1156. },
  1157. watch: {
  1158. 'color._alpha': function color_alpha() {
  1159. this.update();
  1160. },
  1161. 'color.value': function colorValue() {
  1162. this.update();
  1163. }
  1164. },
  1165. methods: {
  1166. handleClick: function handleClick(event) {
  1167. var thumb = this.$refs.thumb;
  1168. var target = event.target;
  1169. if (target !== thumb) {
  1170. this.handleDrag(event);
  1171. }
  1172. },
  1173. handleDrag: function handleDrag(event) {
  1174. var rect = this.$el.getBoundingClientRect();
  1175. var thumb = this.$refs.thumb;
  1176. if (!this.vertical) {
  1177. var left = event.clientX - rect.left;
  1178. left = Math.max(thumb.offsetWidth / 2, left);
  1179. left = Math.min(left, rect.width - thumb.offsetWidth / 2);
  1180. this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
  1181. } else {
  1182. var top = event.clientY - rect.top;
  1183. top = Math.max(thumb.offsetHeight / 2, top);
  1184. top = Math.min(top, rect.height - thumb.offsetHeight / 2);
  1185. this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
  1186. }
  1187. },
  1188. getThumbLeft: function getThumbLeft() {
  1189. if (this.vertical) return 0;
  1190. var el = this.$el;
  1191. var alpha = this.color._alpha;
  1192. if (!el) return 0;
  1193. var thumb = this.$refs.thumb;
  1194. return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
  1195. },
  1196. getThumbTop: function getThumbTop() {
  1197. if (!this.vertical) return 0;
  1198. var el = this.$el;
  1199. var alpha = this.color._alpha;
  1200. if (!el) return 0;
  1201. var thumb = this.$refs.thumb;
  1202. return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
  1203. },
  1204. getBackground: function getBackground() {
  1205. if (this.color && this.color.value) {
  1206. var _color$toRgb = this.color.toRgb(),
  1207. r = _color$toRgb.r,
  1208. g = _color$toRgb.g,
  1209. b = _color$toRgb.b;
  1210. return 'linear-gradient(to right, rgba(' + r + ', ' + g + ', ' + b + ', 0) 0%, rgba(' + r + ', ' + g + ', ' + b + ', 1) 100%)';
  1211. }
  1212. return null;
  1213. },
  1214. update: function update() {
  1215. this.thumbLeft = this.getThumbLeft();
  1216. this.thumbTop = this.getThumbTop();
  1217. this.background = this.getBackground();
  1218. }
  1219. },
  1220. data: function data() {
  1221. return {
  1222. thumbLeft: 0,
  1223. thumbTop: 0,
  1224. background: null
  1225. };
  1226. },
  1227. mounted: function mounted() {
  1228. var _this = this;
  1229. var _$refs = this.$refs,
  1230. bar = _$refs.bar,
  1231. thumb = _$refs.thumb;
  1232. var dragConfig = {
  1233. drag: function drag(event) {
  1234. _this.handleDrag(event);
  1235. },
  1236. end: function end(event) {
  1237. _this.handleDrag(event);
  1238. }
  1239. };
  1240. (0, _draggable2.default)(bar, dragConfig);
  1241. (0, _draggable2.default)(thumb, dragConfig);
  1242. this.update();
  1243. }
  1244. }; //
  1245. //
  1246. //
  1247. //
  1248. //
  1249. //
  1250. //
  1251. //
  1252. //
  1253. //
  1254. //
  1255. //
  1256. //
  1257. //
  1258. //
  1259. //
  1260. //
  1261. //
  1262. //
  1263. /***/ }),
  1264. /***/ 435:
  1265. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1266. "use strict";
  1267. 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:({
  1268. background: _vm.background
  1269. }),on:{"click":_vm.handleClick}}),_c('div',{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:({
  1270. left: _vm.thumbLeft + 'px',
  1271. top: _vm.thumbTop + 'px'
  1272. })})])}
  1273. var staticRenderFns = []
  1274. var esExports = { render: render, staticRenderFns: staticRenderFns }
  1275. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  1276. /***/ }),
  1277. /***/ 436:
  1278. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1279. "use strict";
  1280. 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)])}
  1281. var staticRenderFns = []
  1282. var esExports = { render: render, staticRenderFns: staticRenderFns }
  1283. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  1284. /***/ }),
  1285. /***/ 437:
  1286. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  1287. "use strict";
  1288. 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:[
  1289. 'el-color-picker',
  1290. _vm.disabled ? 'is-disabled' : '',
  1291. _vm.colorSize ? ("el-color-picker--" + _vm.colorSize) : ''
  1292. ]},[(_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:({
  1293. backgroundColor: _vm.displayedColor
  1294. })}),(!_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)}
  1295. var staticRenderFns = []
  1296. var esExports = { render: render, staticRenderFns: staticRenderFns }
  1297. /* harmony default export */ __webpack_exports__["a"] = (esExports);
  1298. /***/ }),
  1299. /***/ 45:
  1300. /***/ (function(module, exports, __webpack_require__) {
  1301. "use strict";
  1302. exports.__esModule = true;
  1303. exports.default = function (element, options) {
  1304. if (_vue2.default.prototype.$isServer) return;
  1305. var moveFn = function moveFn(event) {
  1306. if (options.drag) {
  1307. options.drag(event);
  1308. }
  1309. };
  1310. var upFn = function upFn(event) {
  1311. document.removeEventListener('mousemove', moveFn);
  1312. document.removeEventListener('mouseup', upFn);
  1313. document.onselectstart = null;
  1314. document.ondragstart = null;
  1315. isDragging = false;
  1316. if (options.end) {
  1317. options.end(event);
  1318. }
  1319. };
  1320. element.addEventListener('mousedown', function (event) {
  1321. if (isDragging) return;
  1322. document.onselectstart = function () {
  1323. return false;
  1324. };
  1325. document.ondragstart = function () {
  1326. return false;
  1327. };
  1328. document.addEventListener('mousemove', moveFn);
  1329. document.addEventListener('mouseup', upFn);
  1330. isDragging = true;
  1331. if (options.start) {
  1332. options.start(event);
  1333. }
  1334. });
  1335. };
  1336. var _vue = __webpack_require__(5);
  1337. var _vue2 = _interopRequireDefault(_vue);
  1338. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  1339. var isDragging = false;
  1340. /***/ }),
  1341. /***/ 5:
  1342. /***/ (function(module, exports) {
  1343. module.exports = require("vue");
  1344. /***/ }),
  1345. /***/ 6:
  1346. /***/ (function(module, exports) {
  1347. module.exports = require("element-ui/lib/input");
  1348. /***/ }),
  1349. /***/ 8:
  1350. /***/ (function(module, exports) {
  1351. module.exports = require("element-ui/lib/utils/vue-popper");
  1352. /***/ })
  1353. /******/ });