wcolorpicker
Version:
vue2的颜色选择器支持渐变色 样式仿照element ui
1,545 lines (1,379 loc) • 142 kB
JavaScript
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, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // 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 = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "2b1f");
/******/ })
/************************************************************************/
/******/ ({
/***/ "01dc":
/***/ (function(module, exports) {
module.exports = false;
/***/ }),
/***/ "09ee":
/***/ (function(module, exports) {
// IE8- don't enum bug keys
module.exports = [
'constructor',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'toLocaleString',
'toString',
'valueOf'
];
/***/ }),
/***/ "11a6":
/***/ (function(module, exports, __webpack_require__) {
var DESCRIPTORS = __webpack_require__("1966");
var fails = __webpack_require__("e71d");
// V8 ~ Chrome 36-
// https://bugs.chromium.org/p/v8/issues/detail?id=3334
module.exports = DESCRIPTORS && fails(function () {
// eslint-disable-next-line es/no-object-defineproperty -- required for testing
return Object.defineProperty(function () { /* empty */ }, 'prototype', {
value: 42,
writable: false
}).prototype != 42;
});
/***/ }),
/***/ "11ea":
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__("9978");
var isCallable = __webpack_require__("ca86");
var aFunction = function (argument) {
return isCallable(argument) ? argument : undefined;
};
module.exports = function (namespace, method) {
return arguments.length < 2 ? aFunction(global[namespace]) : global[namespace] && global[namespace][method];
};
/***/ }),
/***/ "11eb":
/***/ (function(module, exports, __webpack_require__) {
var requireObjectCoercible = __webpack_require__("60f0");
var $Object = Object;
// `ToObject` abstract operation
// https://tc39.es/ecma262/#sec-toobject
module.exports = function (argument) {
return $Object(requireObjectCoercible(argument));
};
/***/ }),
/***/ "11f6":
/***/ (function(module, exports, __webpack_require__) {
/* eslint-disable es/no-symbol -- required for testing */
var V8_VERSION = __webpack_require__("f812");
var fails = __webpack_require__("e71d");
// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
module.exports = !!Object.getOwnPropertySymbols && !fails(function () {
var symbol = Symbol();
// Chrome 38 Symbol has incorrect toString conversion
// `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
return !String(symbol) || !(Object(symbol) instanceof Symbol) ||
// Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
!Symbol.sham && V8_VERSION && V8_VERSION < 41;
});
/***/ }),
/***/ "1287":
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__("dbe0");
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = __webpack_require__("5925").default
var update = add("3a8fc464", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ "1966":
/***/ (function(module, exports, __webpack_require__) {
var fails = __webpack_require__("e71d");
// Detect IE8's incomplete defineProperty implementation
module.exports = !fails(function () {
// eslint-disable-next-line es/no-object-defineproperty -- required for testing
return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
});
/***/ }),
/***/ "1acc":
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__("f5e4");
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = __webpack_require__("5925").default
var update = add("2c90eaa2", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ "1aef":
/***/ (function(module, exports, __webpack_require__) {
/* eslint-disable es/no-symbol -- required for testing */
var NATIVE_SYMBOL = __webpack_require__("11f6");
module.exports = NATIVE_SYMBOL
&& !Symbol.sham
&& typeof Symbol.iterator == 'symbol';
/***/ }),
/***/ "1c88":
/***/ (function(module, exports) {
var ceil = Math.ceil;
var floor = Math.floor;
// `Math.trunc` method
// https://tc39.es/ecma262/#sec-math.trunc
// eslint-disable-next-line es/no-math-trunc -- safe
module.exports = Math.trunc || function trunc(x) {
var n = +x;
return (n > 0 ? floor : ceil)(n);
};
/***/ }),
/***/ "1c99":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_3_6_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_10_1_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_3_node_modules_cache_loader_4_1_0_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_15_10_1_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_04d697b8_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1acc");
/* harmony import */ var _node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_3_6_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_10_1_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_3_node_modules_cache_loader_4_1_0_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_15_10_1_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_04d697b8_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_4_1_3_vue_style_loader_index_js_ref_7_oneOf_1_0_node_modules_css_loader_3_6_0_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_15_10_1_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_postcss_loader_3_0_0_postcss_loader_src_index_js_ref_7_oneOf_1_3_node_modules_cache_loader_4_1_0_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_15_10_1_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_04d697b8_prod_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */
/***/ }),
/***/ "1dd0":
/***/ (function(module, exports) {
module.exports = function (bitmap, value) {
return {
enumerable: !(bitmap & 1),
configurable: !(bitmap & 2),
writable: !(bitmap & 4),
value: value
};
};
/***/ }),
/***/ "1f09":
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var DESCRIPTORS = __webpack_require__("1966");
var isArray = __webpack_require__("2b46");
var $TypeError = TypeError;
// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
// Safari < 13 does not throw an error in this case
var SILENT_ON_NON_WRITABLE_LENGTH_SET = DESCRIPTORS && !function () {
// makes no sense without proper strict mode support
if (this !== undefined) return true;
try {
// eslint-disable-next-line es/no-object-defineproperty -- safe
Object.defineProperty([], 'length', { writable: false }).length = 1;
} catch (error) {
return error instanceof TypeError;
}
}();
module.exports = SILENT_ON_NON_WRITABLE_LENGTH_SET ? function (O, length) {
if (isArray(O) && !getOwnPropertyDescriptor(O, 'length').writable) {
throw $TypeError('Cannot set read only .length');
} return O.length = length;
} : function (O, length) {
return O.length = length;
};
/***/ }),
/***/ "1f21":
/***/ (function(module, exports, __webpack_require__) {
var toIntegerOrInfinity = __webpack_require__("784d");
var min = Math.min;
// `ToLength` abstract operation
// https://tc39.es/ecma262/#sec-tolength
module.exports = function (argument) {
return argument > 0 ? min(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
};
/***/ }),
/***/ "21dc":
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__("9978");
var defineGlobalProperty = __webpack_require__("b82f");
var SHARED = '__core-js_shared__';
var store = global[SHARED] || defineGlobalProperty(SHARED, {});
module.exports = store;
/***/ }),
/***/ "23fe":
/***/ (function(module, exports, __webpack_require__) {
var uncurryThis = __webpack_require__("90ea");
var toObject = __webpack_require__("11eb");
var hasOwnProperty = uncurryThis({}.hasOwnProperty);
// `HasOwnProperty` abstract operation
// https://tc39.es/ecma262/#sec-hasownproperty
// eslint-disable-next-line es/no-object-hasown -- safe
module.exports = Object.hasOwn || function hasOwn(it, key) {
return hasOwnProperty(toObject(it), key);
};
/***/ }),
/***/ "2409":
/***/ (function(module, exports) {
var g;
// This works in non-strict mode
g = (function() {
return this;
})();
try {
// This works if eval is allowed (see CSP)
g = g || new Function("return this")();
} catch (e) {
// This works if the window reference is available
if (typeof window === "object") g = window;
}
// g can still be undefined, but nothing to do about it...
// We return undefined, instead of nothing here, so it's
// easier to handle this case. if(!global) { ...}
module.exports = g;
/***/ }),
/***/ "29b0":
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("a1a8");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.i, "*{outline:none;border:none;padding:0;margin:0;box-sizing:border-box}:root{--main-slider-width:280px;--main-view-width:40px;--main-color:#409eff}.fit-content{width:-moz-fit-content;width:fit-content}.flex-center-between{display:flex;align-items:center;justify-content:space-between}.slider-bar{width:220px;height:12px;position:relative}.slider-bar-pointer{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}", ""]);
// Exports
module.exports = exports;
/***/ }),
/***/ "2b1f":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/_@vue_cli-service@4.5.19@@vue/cli-service/lib/commands/build/setPublicPath.js
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
var currentScript = window.document.currentScript
if (false) { var getCurrentScript; }
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
if (src) {
__webpack_require__.p = src[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// CONCATENATED MODULE: ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6cd7a22a-vue-loader-template"}!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/package/wcolorpicker/index.vue?vue&type=template&id=04d697b8&scoped=true&
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
ref: "w-color-picker",
staticClass: "fit-content",
staticStyle: {
"display": "inline-block"
}
}, [_c('div', {
ref: "show-picker",
staticClass: "w-showResult fit-content"
}, [_c('div', {
class: ['w-input-color', _vm.disabled ? 'w-disabled' : 'w-no-disabled'],
on: {
"click": _vm.handleTrigger
}
}, [_c('div', {
class: ['w-show-bg', _vm.disabled ? 'w-disabled' : 'w-no-disabled'],
style: {
background: _vm.currentColor
}
})])]), _c('div', [_c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.popView,
expression: "popView"
}],
ref: "w-picke-box",
class: ['w-color-picke-box', _vm.popperClass || '']
}, [_c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showChange,
expression: "showChange"
}],
staticClass: "w-color-type-heard flex-center-between",
style: {
marginBottom: !_vm.gradientcolor ? '10px' : '0px'
}
}, [_c('label', {
class: !_vm.gradientcolor ? 'w-selectbtn' : 'w-nobtn',
on: {
"click": function ($event) {
return _vm.changType(0);
}
}
}, [_vm._v("单色")]), _c('label', {
class: _vm.gradientcolor ? 'w-selectbtn' : 'w-nobtn',
on: {
"click": function ($event) {
return _vm.changType(1);
}
}
}, [_vm._v("渐变")])]), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.gradientcolor,
expression: "gradientcolor"
}]
}, [_c('WsliderGradient', {
ref: "wslidergradient",
attrs: {
"color": _vm.color
}
})], 1), _c('Wpanel', {
ref: "wpanel",
attrs: {
"color": _vm.color
}
}), _c('div', {
staticClass: "w-color-alpha flex-center-between"
}, [_c('div', {
staticClass: "w-color-alpha-box"
}, [_c('WsliderColor', {
ref: "wsliderColor",
attrs: {
"color": _vm.color
}
}), _c('WsliderAlpha', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showAlpha,
expression: "showAlpha"
}],
ref: "wsliderAlpha",
attrs: {
"color": _vm.color
}
})], 1), _c('WPreview', {
ref: "wPreview",
attrs: {
"color": _vm.color
}
})], 1), _c('div', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.predefine.length > 0,
expression: "predefine.length > 0"
}]
}, [_c('div', {
staticClass: "w-predefine-colors"
}, _vm._l(_vm.predefine, function (item) {
return _c('div', {
key: item,
staticClass: "w-predefine-selector"
}, [_c('div', {
style: {
background: item
},
on: {
"click": function ($event) {
return _vm.setCurrentColor(item, true);
}
}
})]);
}), 0)]), _c('div', {
staticClass: "w-oper-box"
}, [_c('div', {
staticClass: "w-cancal-btn",
on: {
"click": _vm.cancal
}
}, [_vm._v("取消")]), _c('div', {
staticClass: "w-sure-btn",
on: {
"click": _vm.sure
}
}, [_vm._v("确定")])])], 1)])]);
};
var staticRenderFns = [];
// CONCATENATED MODULE: ./src/package/wcolorpicker/index.vue?vue&type=template&id=04d697b8&scoped=true&
// EXTERNAL MODULE: ./node_modules/_core-js@3.29.1@core-js/modules/es.array.push.js
var es_array_push = __webpack_require__("a717");
// CONCATENATED MODULE: ./src/package/wcolorpicker/converted.js
/**
* 入参取值范围 h: [0, 360], s: [0, 1], v: [0, 1] （h`sv`和h`sl`使用不同的取值范围以区分）
* 出参取值范围 h: [0, 360], s: [0, 100], l: [0, 100]
*/
//hsv 模型转为hsl==========转换规则https://juejin.cn/post/6894115927273504776
const hsv2hsl = (h, s, v) => {
const t = (2 - s) * v;
s = v === 0 || s === 0 ? 0 : s * v / (t > 1 ? 2 - t : t);
return {
h,
s: s * 100,
l: t / 2 * 100
};
};
// 参考elementui 源码
// 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>
const isOnePointZero = function (n) {
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};
const isPercentage = function (n) {
return typeof n === 'string' && n.indexOf('%') !== -1;
};
const bound01 = function (value, max) {
if (isOnePointZero(value)) value = '100%';
const 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);
};
// rgb转为hsv
// `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]
const rgb2hsv = function (r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s;
let v = max;
const 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: Math.round(h * 360),
s: Math.round(s * 100),
v: Math.round(v * 100)
};
};
// hsv转为rgb
const hsv2rgb = function (h, s, v) {
h = bound01(h, 360) * 6;
s = bound01(s, 100);
v = bound01(v, 100);
const i = Math.floor(h);
const f = h - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const t = v * (1 - (1 - f) * s);
const mod = i % 6;
const r = [v, q, p, p, t, v][mod];
const g = [t, v, v, q, p, p][mod];
const b = [p, p, t, v, v, q][mod];
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
};
const hsl2hsv = (hue, sat, light) => {
sat = sat / 100;
light = light / 100;
let smin = sat;
const lmin = Math.max(light, 0.01);
let sv;
let v;
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: Math.round(hue),
s: Math.round(sv * 100),
v: Math.round(v * 100)
};
};
// 获取rgba中的r,g,b,a
const parseRgbaColor = rgba => {
const arr = rgba.match(/(\d(\.\d+)?)+/g) || [];
const res = arr.map(s => parseInt(s, 10));
return {
r: res[0],
g: res[1],
b: res[2],
a: parseFloat(arr[3])
};
};
const INT_HEX_MAP = {
10: 'A',
11: 'B',
12: 'C',
13: 'D',
14: 'E',
15: 'F'
};
const rgbtoHex = function ({
r,
g,
b
}) {
const hexOne = function (value) {
value = Math.min(Math.round(value), 255);
const high = Math.floor(value / 16);
const 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);
};
const REG_GRADIENT = /.*gradient\s*\(((?:\([^)]*\)|[^)(]*)*)\)/gim;
//渐变色校验
const isGradientColor = gradientColor => {
REG_GRADIENT.lastIndex = 0;
return REG_GRADIENT.exec(gradientColor);
};
// CONCATENATED MODULE: ./src/package/wcolorpicker/REG_gradients.js
//此处代码来源于 https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex
/**
* Utility combine multiple regular expressions.
*
* @param {RegExp[]|string[]} regexpList List of regular expressions or strings.
* @param {string} flags Normal RegExp flags.
*/
var combineRegExp = function (regexpList, flags) {
var i,
source = '';
for (i = 0; i < regexpList.length; i++) {
if (typeof regexpList[i] === 'string') {
source += regexpList[i];
} else {
source += regexpList[i].source;
}
}
return new RegExp(source, flags);
};
/**
* Generate the required regular expressions once.
*
* Regular Expressions are easier to manage this way and can be well described.
*
* @result {object} Object containing regular expressions.
*/
var generateRegExp = function () {
// Note any variables with "Capture" in name include capturing bracket set(s).
var searchFlags = 'gi',
// ignore case for angles, "rgb" etc
rAngle = /(?:[+-]?\d*\.?\d+)(?:deg|grad|rad|turn)/,
// Angle +ive, -ive and angle types
rSideCornerCapture = /to\s+((?:(?:left|right)(?:\s+(?:top|bottom))?))/,
// optional 2nd part
rComma = /\s*,\s*/,
// Allow space around comma.
rColorHex = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/,
// 3 or 6 character form
rDigits3 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*\)/,
// "(1, 2, 3)"
rDigits4 = /\(\s*(?:\d{1,3}\s*,\s*){2}\d{1,3}\s*,\s*\d*\.?\d+\)/,
// "(1, 2, 3, 4)"
rValue = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/,
// ".9", "-5px", "100%".
rKeyword = /[_a-z-][_a-z0-9-]*/,
// "red", "transparent", "border-collapse".
rColor = combineRegExp(['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'], ''),
rColorStop = combineRegExp([rColor, '(?:\\s+', rValue, '(?:\\s+', rValue, ')?)?'], ''),
// Single Color Stop, optional %, optional length.
rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], ''),
// List of color stops min 1.
rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], ''),
// Angle or SideCorner
rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags),
// Capture 1:"line", 2:"angle" (optional), 3:"side corner" (optional) and 4:"stop list".
rColorStopSearch = combineRegExp(['\\s*(', rColor, ')', '(?:\\s+', '(', rValue, '))?', '(?:', rComma, '\\s*)?'], searchFlags); // Capture 1:"color" and 2:"position" (optional).
return {
gradientSearch: rGradientSearch,
colorStopSearch: rColorStopSearch
};
};
/**
* Actually parse the input gradient parameters string into an object for reusability.
*
*
* @note Really this only supports the standard syntax not historical versions, see MDN for details
* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
*
* @param regExpLib
* @param {string} input Input string in the form "to right bottom, #FF0 0%, red 20px, rgb(0, 0, 255) 100%"
* @returns {object|undefined} Object containing break down of input string including array of stop points.
*/
var parseGradient = function (regExpLib, input) {
var result, matchGradient, matchColorStop, stopResult;
// reset search position, because we reuse regex.
regExpLib.gradientSearch.lastIndex = 0;
matchGradient = regExpLib.gradientSearch.exec(input);
if (matchGradient !== null) {
result = {
original: matchGradient[0],
colorStopList: []
};
// Line (Angle or Side-Corner).
if (!!matchGradient[1]) {
result.line = matchGradient[1];
}
// Angle or undefined if side-corner.
if (!!matchGradient[2]) {
result.angle = matchGradient[2];
}
// Side-corner or undefined if angle.
if (!!matchGradient[3]) {
result.sideCorner = matchGradient[3];
}
// reset search position, because we reuse regex.
regExpLib.colorStopSearch.lastIndex = 0;
// Loop though all the color-stops.
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
while (matchColorStop !== null) {
stopResult = {
color: matchColorStop[1]
};
// Position (optional).
if (!!matchColorStop[2]) {
stopResult.position = matchColorStop[2];
}
result.colorStopList.push(stopResult);
// Continue searching from previous position.
matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);
}
}
// Can be undefined if match not found.
return result;
};
var test_this_one = function (regExpLib, input) {
var result,
rGradientEnclosedInBrackets = /.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/,
// Captures inside brackets - max one additional inner set.
match = rGradientEnclosedInBrackets.exec(input);
if (match !== null) {
// Get the parameters for the gradient
result = parseGradient(regExpLib, match[1]);
if (result.original.trim() !== match[1].trim()) {
// Did not match the input exactly - possible parsing error.
result.parseWarning = true;
}
} else {
result = "Failed to find gradient";
}
return result;
};
// var test_this_thing = function () {
// var result = [],
// regExpLib = generateRegExp(),
// testSubjects = [
// // Original question sample
// 'background-image:linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);',
// ];
// for (var i = 0; i < testSubjects.length; i++) {
// result.push(test_this_one(regExpLib, testSubjects[i]));
// }
// console.log(result);
// };
// test_this_thing();
// var test_this_thing = function (lineargradient) {
// var regExpLib = generateRegExp();
// return test_this_one(regExpLib,lineargradient)
// }
const test_this_thing = lineargradient => {
var regExpLib = generateRegExp();
return test_this_one(regExpLib, lineargradient);
};
//由于背景色的格式比较多 为了方便同一使用linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%); 这种格式;
const DEFAULT_LINEAR_GRADIENT = 'linear-gradient(90deg, rgb(241,29,0) 0%, rgb(73,106,220) 100%)';
const genId = () => (1 + Math.random() * 4294967295).toString(16);
//初始化颜色将颜色转为数组[{color: "rgba(241,29,0,1)",position: "0%"}]
const initgradinet = (color = DEFAULT_LINEAR_GRADIENT) => {
return test_this_thing(color);
};
// CONCATENATED MODULE: ./src/package/wcolorpicker/color.js
const res = initgradinet();
class color_Color {
constructor(options) {
this.enableAlpha = false; //是否显示透明度
this.format = 'rgb'; //默认输出格式
this.gradientDots = 2; //渐变色的点
this._hue = 0; //色相 是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色
this._saturation = 100; //饱和度
this._value = 100; //明亮
this.colorValue = ''; //单色得到的颜色值
this._alpha = 100; //透明度
// 渐变色思路 首先应该要有开始颜色和结束颜色这是必须的 对应页面上必须要有两个滑块 点击滑轨时也可以添加滑块 将渐变色抽象成一个数组
// 数组中每个元素都要包含颜色 占比 和标识拖动滑块时改变这个颜色的占比
this._gradientcolor = false; //当前是否渐变
this._angle = 90; //默认角度
this._genGradientPoint = []; //当前渐变色数组
this._genGradientPoint = res.colorStopList.map(item => ({
color: item.color,
position: item.position,
'genid': genId()
}));
this._angle = res.angle.replace(/deg/g, ""); //默认角度
this.currentgenid = this._genGradientPoint[0].genid;
this._lineMove = this._genGradientPoint[0].position;
this.gradientcolorValue = "";
options = options || {};
// 覆盖默认属性
for (let option in options) {
if (Object.prototype.hasOwnProperty.call(options, option)) {
this[option] = options[option];
}
}
this.doOnChange();
}
init(color, predefine) {
if (!predefine) {
this._hue = 0; //色相 是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色
this._saturation = 100; //饱和度
this._value = 100; //明亮
this.colorValue = ''; //单色得到的颜色值
this._alpha = 100; //透明度
// 渐变色思路 首先应该要有开始颜色和结束颜色这是必须的 对应页面上必须要有两个滑块 点击滑轨时也可以添加滑块 将渐变色抽象成一个数组
// 数组中每个元素都要包含颜色 占比 和标识拖动滑块时改变这个颜色的占比
this._gradientcolor = false; //当前是否渐变
this._angle = 90; //默认角度
this._genGradientPoint = []; //当前渐变色数组
this._genGradientPoint = res.colorStopList.map(item => ({
color: item.color,
position: item.position,
'genid': genId()
}));
this._angle = res.angle.replace(/deg/g, ""); //默认角度
this.currentgenid = this._genGradientPoint[0].genid;
this._lineMove = this._genGradientPoint[0].position;
this.gradientcolorValue = "";
}
this.doOnChange();
if (color) {
this.haveColor(color, predefine);
}
}
haveColor(color, predefine) {
if (predefine) {
this.colorValue = color; //单色得到的颜色值
this.doChangeLineposition();
this.setcurrentHSVA();
this.doOnChange();
} else {
let result,
rGradientEnclosedInBrackets = /.*gradient\s*\(((?:\([^\)]*\)|[^\)\(]*)*)\)/;
rGradientEnclosedInBrackets.lastIndex = 0;
result = rGradientEnclosedInBrackets.exec(color);
this._gradientcolor = !result ? false : true;
if (this._gradientcolor) {
this.gradientcolorValue = color;
const colorRes = initgradinet(color);
this._genGradientPoint = colorRes.colorStopList.map(item => ({
color: item.color,
position: item.position,
'genid': genId()
}));
this._angle = colorRes.angle.replace(/deg/g, ""); //默认角度
this.currentgenidChang(this._genGradientPoint[0].genid);
} else {
this.colorValue = color; //单色得到的颜色值
this.setcurrentHSVA();
this.doOnChange();
}
}
}
changProps(prop, value) {
this[prop] = value;
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === 'object') {
for (let p in prop) {
if (Object.prototype.hasOwnProperty.call(prop, p)) {
this.set(p, prop[p]);
}
}
return;
}
this['_' + prop] = value;
this.doOnChange();
//判断是否加载渐变色
if (this._gradientcolor) {
//单色改变设置渐变色的某一个点的颜色
this.doChangeLineposition();
} else {}
}
get(prop) {
return this['_' + prop];
}
doOnChange() {
const {
_hue,
_saturation,
_value,
_alpha,
format
} = this;
if (this.enableAlpha) {
//支持透明度
switch (format) {
case 'hsl':
{
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.colorValue = `hsla(${hsl.h}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%,${_alpha / 100})`;
break;
}
case 'hsv':
{
this.colorValue = `hsva(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%,${_alpha / 100})`;
break;
}
default:
{
const {
r,
g,
b
} = hsv2rgb(_hue, _saturation, _value);
this.colorValue = `rgba(${r}, ${g}, ${b},${_alpha / 100})`;
break;
}
}
} else {
switch (format) {
case 'hsl':
{
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.colorValue = `hsl(${hsl.h}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
break;
}
case 'hsv':
{
this.colorValue = `hsv(${_hue}, ${Math.round(_saturation)}%, ${Math.round(_value)}%)`;
break;
}
case 'rgb':
{
const {
r,
g,
b
} = hsv2rgb(_hue, _saturation, _value);
this.colorValue = `rgb(${r}, ${g}, ${b})`;
break;
}
default:
this.colorValue = rgbtoHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
//添加颜色点
addgradientPoint(colorObj) {
if (this.gradientDots > this._genGradientPoint.length) {
this._genGradientPoint.push(colorObj);
this._genGradientPoint.sort((a, b) => {
return Number(a.position.replace("%", "")) - Number(b.position.replace("%", ""));
});
this.currentgenidChang(colorObj.genid);
}
}
// 删除某个颜色点
deletePoint(e) {
let pIndex = this._genGradientPoint.findIndex(c => c.genid === this.currentgenid);
const {
length
} = this._genGradientPoint;
// 必须保证有两个点
if (['delete', 'backspace'].includes(e.key.toLocaleLowerCase()) && length > 2 && pIndex >= 0 && pIndex <= length - 1) {
this._genGradientPoint.splice(pIndex, 1);
if (!this._genGradientPoint[pIndex]) {
pIndex = this._genGradientPoint[pIndex + 1] ? pIndex + 1 : this._genGradientPoint[pIndex - 1] ? pIndex - 1 : 0;
}
this.currentgenidChang(this._genGradientPoint[pIndex].genid);
}
}
//某一节点的渐变色更新
doChangeLineposition() {
const index = this._genGradientPoint.findIndex(c => c.genid === this.currentgenid);
if (index === -1) {
return;
}
const point = this._genGradientPoint[index];
this._genGradientPoint.splice(index, 1, {
color: this.colorValue,
position: this._lineMove,
genid: point.genid
});
this._genGradientPoint.sort((a, b) => {
return Number(a.position.replace("%", "")) - Number(b.position.replace("%", ""));
});
//生成渐变色
this.handleColorsChange();
}
//设置节点的颜色在色板上显示
currentgenidChang(id) {
this.currentgenid = id;
const index = this._genGradientPoint.findIndex(c => c.genid === this.currentgenid);
if (index === -1) {
return;
}
const point = this._genGradientPoint[index];
this._lineMove = point.position;
//根据当前点选中的颜色去设置单色面板的颜色
this.colorValue = point.color;
this.setcurrentHSVA();
this.handleColorsChange();
}
//设置当前颜色的H，S，V，A
setcurrentHSVA() {
const fromHSV = (h, s, v) => {
this._hue = Math.max(0, Math.min(360, h));
this._saturation = Math.max(0, Math.min(100, s));
this._value = Math.max(0, Math.min(100, v));
};
if (this.colorValue.indexOf('hsl') !== -1) {
const parts = this.colorValue.replace(/hsla|hsl|\(|\)/gm, '').split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
const {
h,
s,
v
} = hsl2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (this.colorValue.indexOf('hsv') !== -1) {
const parts = this.colorValue.replace(/hsva|hsv|\(|\)/gm, '').split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
//有透明度
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
this._alpha = 100;
}
if (parts.length >= 3) {
fromHSV(parts[0], parts[1], parts[2]);
}
} else if (this.colorValue.indexOf('rgb') !== -1) {
let parts = this.colorValue.replace(/rgba|rgb|\(|\)/gm, '').split(/\s|,/g).filter(val => val !== '').map((val, index) => index > 2 ? parseFloat(val) : parseInt(val, 10));
if (parts.length === 4) {
//有透明度
this._alpha = Math.floor(parseFloat(parts[3]) * 100);
} else if (parts.length === 3) {
//没有透明度
this._alpha = 100;
}
if (parts.length >= 3) {
const {
h,
s,
v
} = rgb2hsv(parts[0], parts[1], parts[2]);
fromHSV(h, s, v);
}
} else if (value.indexOf('#') !== -1) {}
}
// 生成渐变色
handleColorsChange() {
let colorPoint = this._genGradientPoint.map(item => item.color + ' ' + item.position);
colorPoint = colorPoint.join();
if (this._angle) {
this.gradientcolorValue = `linear-gradient(${this._angle}deg,${colorPoint})`;
} else {
this.gradientcolorValue = `linear-gradient(${colorPoint})`;
}
}
}
// CONCATENATED MODULE: ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6cd7a22a-vue-loader-template"}!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/package/wcolorpicker/w-slider-gradient.vue?vue&type=template&id=2edf8313&scoped=true&
var w_slider_gradientvue_type_template_id_2edf8313_scoped_true_render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
staticClass: "w-gradient-box"
}, [_c('div', {
ref: "w-g-colorBar",
staticClass: "w-g-color-picker-bar",
style: {
background: _vm.linebackground
},
attrs: {
"tabindex": "0"
},
on: {
"keyup": _vm.deletePoint,
"click": _vm.handleClick
}
}, _vm._l(_vm.gradientPoint, function (item) {
return _c('div', {
key: item.genid,
staticClass: "slider-bar-pointer",
class: _vm.currentgenid == item.genid ? 'w-active' : '',
style: {
left: item.position,
background: item.color
},
attrs: {
"title": "选中按del键删除"
},
on: {
"mousedown": function ($event) {
return _vm.mousedown(item.genid);
},
"click": e => e.stopPropagation()
}
});
}), 0), _c('div', {
staticStyle: {
"position": "relative"
}
}, [_c('input', {
ref: "deg",
staticClass: "input-deg",
attrs: {
"autocomplete": "off"
},
on: {
"keydown": _vm.numTxtKeyDown,
"input": _vm.input,
"blur": _vm.inputBlur,
"focus": () => _vm.showdeg = false
}
}), _c('span', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showdeg,
expression: "showdeg"
}],
staticClass: "degtips"
}, [_vm._v("°")])])]);
};
var w_slider_gradientvue_type_template_id_2edf8313_scoped_true_staticRenderFns = [];
// CONCATENATED MODULE: ./src/package/wcolorpicker/w-slider-gradient.vue?vue&type=template&id=2edf8313&scoped=true&
// CONCATENATED MODULE: ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/package/wcolorpicker/w-slider-gradient.vue?vue&type=script&lang=js&
/* harmony default export */ var w_slider_gradientvue_type_script_lang_js_ = ({
name: 'w-slider-gradient',
props: {
color: {
required: true
}
},
data() {
return {
isDragging: false,
linebackground: DEFAULT_LINEAR_GRADIENT,
sliderLeft: 0,
selsectID: '',
showdeg: true
};
},
computed: {
//获取色相值
gradientPoint() {
return this.color.get('genGradientPoint');
},
currentgenid() {
return this.color.currentgenid;
}
},
watch: {
gradientPoint(val) {
this.updateView();
}
},
mounted() {
this.updateView();
},
methods: {
//点击时
handleClick(event) {
let sliderBar = this.$refs['w-g-colorBar'].getBoundingClientRect();
//滑块滑动的范围
let left = event.clientX - sliderBar.left;
left = Math.max(0, Math.min(sliderBar.width, left));
left = Math.round(left / sliderBar.width * 100);
const color = {
position: left + '%',
color: this.color.colorValue,
genid: genId()
};
this.color.addgradientPoint(color);
},
mousedown(id) {
if (this.isDragging) return; //防止重复
this.color.currentgenidChang(id);
console.log("按下");
document.onselectstart = () => false;
document.ondragstart = () => false;
document.addEventListener('mousemove', this.moveFn);
document.addEventListener('mouseup', this.upFn);
this.isDragging = true;
},
moveFn(event) {
let sliderBar = this.$refs['w-g-colorBar'].getBoundingClientRect();
// 让sliderBar获取焦点，以便键盘事件生效。非表单元素配合tabindex使用
this.$refs['w-g-colorBar'].focus();
//滑块滑动的范围
let left = event.clientX - sliderBar.left;
left = Math.max(0, Math.min(sliderBar.width, left));
left = Math.round(left / sliderBar.width * 100);
this.color.set('lineMove', left + '%');
},
upFn(event) {
console.log('松开');
document.removeEventListener('mousemove', this.moveFn);
document.removeEventListener('mouseup', this.upFn);
document.onselectstart = null;
document.ondragstart = null;
this.isDragging = false;
},
//文本框霍获取焦点
inputBlur(e) {
if (/^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/.test(e.target.value)) {
e.target.value = e.target.value.replace(/\D/g, '');
} else {
e.target.value = null;
}
this.color.set('angle', e.target.value);
this.showdeg = true;
},
input(e) {
if (/^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/.test(e.target.value)) {
e.target.value = e.target.value.replace(/\D/g, '');
} else {
e.target.value = null;
}
},
//删除颜色点
deletePoint(e) {
this.color.deletePoint(e);
},
//键盘上下箭头加减数字
numTxtKeyDown(e) {
const keyCode = e.keyCode;
if (keyCode == 38) {
//UP Arrow
if (!isNaN(e.target.value)) {
e.target.value = Number(e.target.value) + 1;
return false;
}
} else if (keyCode == 40) {
//DOWN Arrow
if (!isNaN(e.target.value)) {
if (Number(e.target.value) <= 0) {
e.target.value = 0;
} else {
e.target.value = Number(e.target.value) - 1;
}
}
return false;
}
},
//更新颜色
updateView() {
this.$nextTick(() => {
const dom = this.$refs['deg'];
dom.value = this.color.get('angle');
});
this.linebackground = this.color.gradientcolorValue;
}
}
});
// CONCATENATED MODULE: ./src/package/wcolorpicker/w-slider-gradient.vue?vue&type=script&lang=js&
/* harmony default export */ var wcolorpicker_w_slider_gradientvue_type_script_lang_js_ = (w_slider_gradientvue_type_script_lang_js_);
// EXTERNAL MODULE: ./src/package/wcolorpicker/w-slider-gradient.vue?vue&type=style&index=0&id=2edf8313&prod&scoped=true&lang=css&
var w_slider_gradientvue_type_style_index_0_id_2edf8313_prod_scoped_true_lang_css_ = __webpack_require__("6245");
// CONCATENATED MODULE: ./node_modules/_vue-loader@15.10.1@vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + 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 = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./src/package/wcolorpicker/w-slider-gradient.vue
/* normalize component */
var component = normalizeComponent(
wcolorpicker_w_slider_gradientvue_type_script_lang_js_,
w_slider_gradientvue_type_template_id_2edf8313_scoped_true_render,
w_slider_gradientvue_type_template_id_2edf8313_scoped_true_staticRenderFns,
false,
null,
"2edf8313",
null
)
/* harmony default export */ var w_slider_gradient = (component.exports);
// CONCATENATED MODULE: ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"6cd7a22a-vue-loader-template"}!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--13-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.3.0@babel-loader/lib!./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.10.1@vue-loader/lib??vue-loader-options!./src/package/wcolorpicker/w-panel.vue?vue&type=template&id=72cb9368&scoped=true&
var w_panelvue_type_templat