vue-gradient-component
Version:
Color picker with gradient options
1,260 lines (1,081 loc) • 85.7 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ 301:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".options-block{display:flex}.options-block__preview{flex:2}.options-block__options{flex:10}.picker{margin-left:120px}.color-picker__body,.color-picker__color-panel,.color-picker__gradient{margin-bottom:15px}.preview-block{margin-top:10px;display:flex;align-items:center}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 901:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".angle-block[data-v-7ec0ecb2]{width:30px;height:30px;position:relative}.angle-block[data-v-7ec0ecb2],.angle-point[data-v-7ec0ecb2]{border:2px solid;border-radius:50%}.angle-point[data-v-7ec0ecb2]{width:5px;height:5px;position:absolute}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 330:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, "#picker-body{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.picker-body__pointer{position:absolute;border-radius:50%;z-index:2}.picker-body__first{background:linear-gradient(90deg,#fff 0,transparent)}.picker-body__first,.picker-body__second{position:absolute;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.picker-body__second{background:linear-gradient(180deg,transparent 0,#000)}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 882:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".color-block[data-v-247fc8f2]{position:relative;border-radius:12px}.color-pointer[data-v-247fc8f2]{position:absolute;border-radius:50%;z-index:2;top:2px}.color-canvas[data-v-247fc8f2]{width:100%;height:100%;border-radius:12px}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 658:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".gradient-background[data-v-927334b6]{border-radius:12px;position:relative}.gradient-pointer[data-v-927334b6]{position:absolute;border-radius:50%;z-index:3;top:2px;cursor:pointer}.color-canvas[data-v-927334b6]{width:100%;height:100%;border-radius:12px}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 522:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(667);
/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
// Imports
var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(34), __webpack_require__.b);
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".opacity-background[data-v-59204c07],.opacity-block[data-v-59204c07]{position:relative;border-radius:12px}.opacity-background[data-v-59204c07]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ")}.opacity-pointer[data-v-59204c07]{position:absolute;border-radius:50%;z-index:2;top:2px}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 488:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".output-block{margin-left:15px}.output-block__input{padding-left:15px;height:30px;font-size:16px;border-radius:12px;font-weight:700;outline:none;text-align:center}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 686:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
// Module
___CSS_LOADER_EXPORT___.push([module.id, ".preview{border-radius:12px}", ""]);
// Exports
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
/***/ }),
/***/ 645:
/***/ (function(module) {
"use strict";
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = function (cssWithMappingToString) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = "";
var needLayer = typeof item[5] !== "undefined";
if (item[4]) {
content += "@supports (".concat(item[4], ") {");
}
if (item[2]) {
content += "@media ".concat(item[2], " {");
}
if (needLayer) {
content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
}
content += cssWithMappingToString(item);
if (needLayer) {
content += "}";
}
if (item[2]) {
content += "}";
}
if (item[4]) {
content += "}";
}
return content;
}).join("");
};
// import a list of modules into the list
list.i = function i(modules, media, dedupe, supports, layer) {
if (typeof modules === "string") {
modules = [[null, modules, undefined]];
}
var alreadyImportedModules = {};
if (dedupe) {
for (var k = 0; k < this.length; k++) {
var id = this[k][0];
if (id != null) {
alreadyImportedModules[id] = true;
}
}
}
for (var _k = 0; _k < modules.length; _k++) {
var item = [].concat(modules[_k]);
if (dedupe && alreadyImportedModules[item[0]]) {
continue;
}
if (typeof layer !== "undefined") {
if (typeof item[5] === "undefined") {
item[5] = layer;
} else {
item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
item[5] = layer;
}
}
if (media) {
if (!item[2]) {
item[2] = media;
} else {
item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
item[2] = media;
}
}
if (supports) {
if (!item[4]) {
item[4] = "".concat(supports);
} else {
item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
item[4] = supports;
}
}
list.push(item);
}
};
return list;
};
/***/ }),
/***/ 667:
/***/ (function(module) {
"use strict";
module.exports = function (url, options) {
if (!options) {
options = {};
}
if (!url) {
return url;
}
url = String(url.__esModule ? url.default : url);
// If url is already wrapped in quotes, remove them
if (/^['"].*['"]$/.test(url)) {
url = url.slice(1, -1);
}
if (options.hash) {
url += options.hash;
}
// Should url be wrapped?
// See https://drafts.csswg.org/css-values-3/#urls
if (/["'() \t\n]|(%20)/.test(url) || options.needQuotes) {
return "\"".concat(url.replace(/"/g, '\\"').replace(/\n/g, "\\n"), "\"");
}
return url;
};
/***/ }),
/***/ 81:
/***/ (function(module) {
"use strict";
module.exports = function (i) {
return i[1];
};
/***/ }),
/***/ 744:
/***/ (function(__unused_webpack_module, exports) {
"use strict";
var __webpack_unused_export__;
__webpack_unused_export__ = ({ value: true });
// runtime helper for setting properties on components
// in a tree-shakable way
exports.Z = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
/***/ }),
/***/ 665:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(301);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("8e7dc246", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 350:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(901);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("a89db602", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 363:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(330);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("004e77d8", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 926:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(882);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("71ce2438", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 250:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(658);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("11267b48", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 910:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(522);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("f935c4c0", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 104:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(488);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("600ba5c5", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 406:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(686);
if(content.__esModule) content = content.default;
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var add = (__webpack_require__(402)/* ["default"] */ .Z)
var update = add("52ab19c8", content, true, {"sourceMap":false,"shadowMode":false});
/***/ }),
/***/ 402:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"Z": function() { return /* binding */ addStylesClient; }
});
;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
function listToStyles (parentId, list) {
var styles = []
var newStyles = {}
for (var i = 0; i < list.length; i++) {
var item = list[i]
var id = item[0]
var css = item[1]
var media = item[2]
var sourceMap = item[3]
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
}
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] })
} else {
newStyles[id].parts.push(part)
}
}
return styles
}
;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined'
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (!hasDocument) {
throw new Error(
'vue-style-loader cannot be used in a non-browser environment. ' +
"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
) }
}
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/}
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
var options = null
var ssrIdKey = 'data-vue-ssr-id'
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
function addStylesClient (parentId, list, _isProduction, _options) {
isProduction = _isProduction
options = _options || {}
var styles = listToStyles(parentId, list)
addStylesToDom(styles)
return function update (newList) {
var mayRemove = []
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
domStyle.refs--
mayRemove.push(domStyle)
}
if (newList) {
styles = listToStyles(parentId, newList)
addStylesToDom(styles)
} else {
styles = []
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i]
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]()
}
delete stylesInDom[domStyle.id]
}
}
}
}
function addStylesToDom (styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
if (domStyle) {
domStyle.refs++
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j])
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]))
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length
}
} else {
var parts = []
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]))
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
}
}
}
function createStyleElement () {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
head.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement)
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++
styleElement = singletonElement || (singletonElement = createStyleElement())
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement()
update = applyToTag.bind(null, styleElement)
remove = function () {
styleElement.parentNode.removeChild(styleElement)
}
}
update(obj)
return function updateStyle (newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap) {
return
}
update(obj = newObj)
} else {
remove()
}
}
}
var replaceText = (function () {
var textStore = []
return function (index, replacement) {
textStore[index] = replacement
return textStore.filter(Boolean).join('\n')
}
})()
function applyToSingletonTag (styleElement, index, remove, obj) {
var css = remove ? '' : obj.css
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css)
} else {
var cssNode = document.createTextNode(css)
var childNodes = styleElement.childNodes
if (childNodes[index]) styleElement.removeChild(childNodes[index])
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index])
} else {
styleElement.appendChild(cssNode)
}
}
}
function applyToTag (styleElement, obj) {
var css = obj.css
var media = obj.media
var sourceMap = obj.sourceMap
if (media) {
styleElement.setAttribute('media', media)
}
if (options.ssrId) {
styleElement.setAttribute(ssrIdKey, obj.id)
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild)
}
styleElement.appendChild(document.createTextNode(css))
}
}
/***/ }),
/***/ 34:
/***/ (function(module) {
"use strict";
module.exports = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgb3BhY2l0eT0iLjIiPjxwYXRoIGQ9Ik00IDB2NEgwVjB6TTggNHY0SDRWNHoiLz48L2c+PC9zdmc+";
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ id: moduleId,
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // 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 });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "";
/******/ }();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ !function() {
/******/ __webpack_require__.b = document.baseURI || self.location.href;
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 70: 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ // no on chunks loaded
/******/
/******/ // no jsonp function
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
!function() {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ entry_lib; }
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// 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: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./colorPicker/ColorPicker.vue?vue&type=template&id=645a0884
const _hoisted_1 = { class: "color-picker" }
const _hoisted_2 = { key: 0 }
const _hoisted_3 = { class: "preview-block" }
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_picker_angle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-angle")
const _component_picker_body = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-body")
const _component_picker_gradient = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-gradient")
const _component_picker_color_panel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-color-panel")
const _component_picker_opacity = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-opacity")
const _component_picker_preview = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-preview")
const _component_picker_output = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("picker-output")
return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_1, [
($props.mode === 'gradient')
? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_2, [
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_picker_angle, {
onChange: $options.changeAngle,
"point-color": $props.anglePointColor,
"circle-color": $props.angleCircleColor
}, null, 8, ["onChange", "point-color", "circle-color"])
]))
: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_picker_body, {
class: "color-picker__body",
color: $data.shade.rgb,
onInput: $options.colorInput,
width: $props.width,
height: $props.pickerBodyHeight,
"point-size": $props.pickerBodyPointSize,
"point-color": $props.pickerBodyPointColor
}, null, 8, ["color", "onInput", "width", "height", "point-size", "point-color"]),
($props.mode === 'gradient')
? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_picker_gradient, {
key: 1,
width: $props.width,
height: $props.optionBlockHeight,
"point-size": $props.pickerGradientPointSize,
class: "color-picker__gradient",
color: $options.normalColor,
onUpdate: $options.setGradientPoints
}, null, 8, ["width", "height", "point-size", "color", "onUpdate"]))
: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_picker_color_panel, {
onInput: _cache[0] || (_cache[0] = (data) => ($data.shade = data)),
class: "color-picker__color-panel",
width: $props.width,
height: $props.optionBlockHeight,
"point-size": $props.pickerOptionPointSize,
"point-color": $props.pickerOptionPointColor
}, null, 8, ["width", "height", "point-size", "point-color"]),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_picker_opacity, {
class: "color-picker__opacity",
onInput: _cache[1] || (_cache[1] = (data) => ($data.opacity = data)),
width: $props.width,
height: $props.optionBlockHeight,
"point-size": $props.pickerOptionPointSize,
"point-color": $props.pickerOptionPointColor,
color: $options.normalColor
}, null, 8, ["width", "height", "point-size", "point-color", "color"]),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_3, [
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_picker_preview, {
background: $options.previewBackground,
width: $props.previewWidth,
height: $props.previewHeight
}, null, 8, ["background", "width", "height"]),
($props.mode === 'normal')
? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_picker_output, {
key: 0,
color: $options.previewBackground,
outputType: $props.outputTextType
}, null, 8, ["color", "outputType"]))
: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)
])
]))
}
;// CONCATENATED MODULE: ./colorPicker/ColorPicker.vue?vue&type=template&id=645a0884
;// CONCATENATED MODULE: ./colorPicker/colorMixin.js
/* harmony default export */ var colorMixin = ({
methods: {
rgba2hex(orig) {
let a,
isPercent,
rgb = orig
.replace(/\s/g, '')
.match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
alpha = ((rgb && rgb[4]) || '').trim(),
hex = rgb
? (rgb[1] | (1 << 8)).toString(16).slice(1) +
(rgb[2] | (1 << 8)).toString(16).slice(1) +
(rgb[3] | (1 << 8)).toString(16).slice(1)
: orig;
if (alpha !== '') {
a = alpha;
} else {
a = '01';
}
// multiply before convert to HEX
a = ((a * 255) | (1 << 8)).toString(16).slice(1);
hex = hex + a;
return hex;
},
pointsToGradient(points, gradientType, angle) {
points = points.sort((a,b) => a.position - b.position);
if(gradientType === 'linear') {
let innerText = '';
for (const point of points) {
innerText += `${point.color} ${point.position}%,`
}
innerText = innerText.substring(0, innerText.length - 1);
return `linear-gradient(${angle}deg, ${innerText})`
}
if(gradientType === 'radial') {
let innerText = '';
for (const point of points) {
innerText += `${point.color} ${point.position}%,`
}
innerText = innerText.substring(0, innerText.length - 1);
return `radial-gradient(${innerText})`
}
},
getRotationCoordinate(angle) {
const anglePI = angle * -(Math.PI / 180);
return {
x1: `${Math.round(50 + Math.sin(anglePI) * 50)}%`,
y1: `${Math.round(50 + Math.cos(anglePI) * 50)}%`,
x2: `${Math.round(50 + Math.sin(anglePI + Math.PI) * 50)}%`,
y2: `${Math.round(50 + Math.cos(anglePI + Math.PI) * 50)}%`,
};
},
pointsToSvgDefs(points, gradientType, angle = 0) {
const coordinates = this.getRotationCoordinate(angle);
let stopsString = '';
for (let point of points) {
stopsString += `<stop offset="${point.position}%" stop-color="${point.color}"/>`
}
return `<${gradientType}Gradient x1="${coordinates.x1}" x2="${coordinates.x2}" y1="${coordinates.y1}" y2="${coordinates.y2}">
${stopsString}</${gradientType}Gradient>`
}
},
});
;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./colorPicker/parts/PickerBody.vue?vue&type=template&id=1cc04ab1
const PickerBodyvue_type_template_id_1cc04ab1_hoisted_1 = ["width", "height"]
function PickerBodyvue_type_template_id_1cc04ab1_render(_ctx, _cache, $props, $setup, $data, $options) {
return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
id: "picker-body",
onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.mouseDown && $options.mouseDown(...args))),
onMouseup: _cache[1] || (_cache[1] = (...args) => ($options.mouseUp && $options.mouseUp(...args))),
style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.calculatedStyle)
}, [
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
class: "picker-body__pointer",
style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.pointStyle)
}, null, 4),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("canvas", {
width: $props.width,
height: $props.height,
ref: "canvas"
}, null, 8, PickerBodyvue_type_template_id_1cc04ab1_hoisted_1)
], 36))
}
;// CONCATENATED MODULE: ./colorPicker/parts/PickerBody.vue?vue&type=template&id=1cc04ab1
;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./colorPicker/parts/PickerBody.vue?vue&type=script&lang=js
/* harmony default export */ var PickerBodyvue_type_script_lang_js = ({
props: {
color: {
type: String,
default: 'green',
},
modelValue: {
type: Object,
default: {
top: 20,
left: 20,
},
},
width: {
type: [String,Number],
default: 300
},
height: {
type: [String, Number],
default: 300
},
pointSize: {
type: [String,Number],
default: 10
},
pointColor: {
type: String,
default: 'orange'
}
},
data() {
return {
clicked: false,
pointerPosition: this.modelValue,
body: null,
selectedColor: null,
};
},
computed: {
calculatedStyle() {
return {
width: this.width + 'px',
height: this.height + 'px'
}
},
pointStyle() {
return {
top: this.pointerPosition.top + 'px',
left: this.pointerPosition.left + 'px',
width: this.pointSize + 'px',
height: this.pointSize + 'px',
border: `2px solid ${this.pointColor}`
};
},
},
watch: {
color() {
this.setCanvas();
const picker = document.getElementsByClassName('picker-body__pointer')[0];
const {left, top} = picker.getBoundingClientRect();
this.setSelectedColor(left, top);
},
},
mounted() {
this.body = document.getElementById('picker-body');
document.body.addEventListener('mouseup', () => {
this.clicked = false;
});
this.setCanvas();
},
methods: {
setCanvas() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
const xGradient = ctx.createLinearGradient(
0,
canvas.height / 2,
canvas.width,
canvas.height
);
const yGradient = ctx.createLinearGradient(
canvas.width / 2,
0,
canvas.width / 2,
canvas.height
);
xGradient.addColorStop(0, 'white');
xGradient.addColorStop(0.6, this.color);
yGradient.addColorStop(0, 'transparent');
yGradient.addColorStop(1, 'black');
ctx.fillStyle = xGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = yGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
},
mouseDown(event) {
if (Array.from(event.target.classList).includes('picker-body__pointer')) {
return;
}
this.clicked = true;
const { x, y } = event;
this.setPointerOnMouse(x, y);
this.setSelectedColor(x, y);
document.body.onmousemove = this.mouseMove;
},
mouseMove(event) {
if (this.clicked) {
const { x, y } = event;
this.setPointerOnMouse(x, y);
this.setSelectedColor(x, y);
}
},
mouseUp(event) {
this.clicked = false;
document.body.onmousemove = null;
},
setSelectedColor(xMouse, yMouse) {
const { x, y } = this.$refs.canvas.getBoundingClientRect();
if (xMouse > this.$refs.canvas.width + x)
xMouse = this.$refs.canvas.width + x - 10
if (yMouse > this.$refs.canvas.height + y)
yMouse = this.$refs.canvas.height + y - 10
if (xMouse < x) {
xMouse = x;
}
if (yMouse < y) {
yMouse = y;
}
const ctx = this.$refs.canvas.getContext('2d');
const point = ctx.getImageData(xMouse - x, yMouse - y, 1, 1).data;
var hex =
'#' +
('000000' + this.rgbToHex(point[0], point[1], point[2])).slice(-6);
this.selectedColor = {
hex,
rgb: `rgb(${point[0]}, ${point[1]}, ${point[2]})`,
r: point[0],
g: point[1],
b: point[2],
};
this.$emit('input', this.selectedColor);
},
rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255) throw 'Invalid color component';
return ((r << 16) | (g << 8) | b).toString(16);
},
setPointerOnMouse(x, y) {
const { left, top, width, height } = this.$refs.canvas.getBoundingClientRect();
if (x > left + width - 10) {
x = left + width - 15;
}
if (x < left) {
x = left;
}
if (y >= top + height - 10) {
y = top + height - 15;
}
if (y < top) {
y = top;
}
const currentTop = y - top;
const currentLeft = x - left;
this.pointerPosition = {
top: currentTop,
left: currentLeft,
};
},
},
});
;// CONCATENATED MODULE: ./colorPicker/parts/PickerBody.vue?vue&type=script&lang=js
// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./colorPicker/parts/PickerBody.vue?vue&type=style&index=0&id=1cc04ab1&lang=css
var PickerBodyvue_type_style_index_0_id_1cc04ab1_lang_css = __webpack_require__(363);
;// CONCATENATED MODULE: ./colorPicker/parts/PickerBody.vue?vue&type=style&index=0&id=1cc04ab1&lang=css
// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
var exportHelper = __webpack_require__(744);
;// CONCATENATED MODULE: ./colorPicker/parts/PickerBody.vue
;
const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(PickerBodyvue_type_script_lang_js, [['render',PickerBodyvue_type_template_id_1cc04ab1_render]])
/* harmony default export */ var PickerBody = (__exports__);
;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./colorPicker/parts/PickerColorPanel.vue?vue&type=template&id=247fc8f2&scoped=true
const _withScopeId = n => (_pushScopeId("data-v-247fc8f2"),n=n(),_popScopeId(),n)
const PickerColorPanelvue_type_template_id_247fc8f2_scoped_true_hoisted_1 = ["width"]
function PickerColorPanelvue_type_template_id_247fc8f2_scoped_true_render(_ctx, _cache, $props, $setup, $data, $options) {
return ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
class: "color-block",
style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.computedStyle),
onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.mouseDown && $options.mouseDown(...args))),
onMouseup: _cache[1] || (_cache[1] = (...args) => ($options.mouseUp && $options.mouseUp(...args)))
}, [
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("canvas", {
ref: "canvasColor",
width: $props.width,
class: "color-canvas"
}, null, 8, PickerColorPanelvue_type_template_id_247fc8f2_scoped_true_hoisted_1),
(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
class: "color-pointer",
style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.pointStyle)
}, null, 4)
], 36))
}
;// CONCATENATED MODULE: ./colorPicker/parts/PickerColorPanel.vue?vue&type=template&id=247fc8f2&s