element-nice-ui
Version:
A Component Library for Vue.js.
1,602 lines (1,476 loc) • 51.9 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 = "/dist/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 181);
/******/ })
/************************************************************************/
/******/ ({
/***/ 13:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/mixins/emitter");
/***/ }),
/***/ 17:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/vue-popper");
/***/ }),
/***/ 18:
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/***/ 181:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/main.vue?vue&type=template&id=1bf5eb2c
var render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"div",
{
directives: [
{
name: "clickoutside",
rawName: "v-clickoutside",
value: _vm.hide,
expression: "hide",
},
],
class: [
"el-color-picker",
_vm.colorDisabled ? "is-disabled" : "",
_vm.colorSize ? `el-color-picker--${_vm.colorSize}` : "",
],
},
[
_vm.colorDisabled
? _c("div", { staticClass: "el-color-picker__mask" })
: _vm._e(),
_c(
"div",
{
staticClass: "el-color-picker__trigger",
on: { click: _vm.handleTrigger },
},
[
_c(
"span",
{
staticClass: "el-color-picker__color",
class: { "is-alpha": _vm.showAlpha },
},
[
_c("span", {
staticClass: "el-color-picker__color-inner",
style: {
backgroundColor: _vm.displayedColor,
},
}),
!_vm.value && !_vm.showPanelColor
? _c("span", {
staticClass: "el-color-picker__empty el-icon-close",
})
: _vm._e(),
]
),
_c("span", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.value || _vm.showPanelColor,
expression: "value || showPanelColor",
},
],
staticClass: "el-color-picker__icon el-icon-arrow-down",
}),
]
),
_c("picker-dropdown", {
ref: "dropdown",
class: ["el-color-picker__panel", _vm.popperClass || ""],
attrs: {
color: _vm.color,
"show-alpha": _vm.showAlpha,
predefine: _vm.predefine,
},
on: { pick: _vm.confirmValue, clear: _vm.clearValue },
model: {
value: _vm.showPicker,
callback: function ($$v) {
_vm.showPicker = $$v
},
expression: "showPicker",
},
}),
],
1
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/main.vue?vue&type=template&id=1bf5eb2c
// CONCATENATED MODULE: ./packages/color-picker/src/color.js
const hsv2hsl = function hsv2hsl(hue, sat, val) {
return [hue, sat * val / ((hue = (2 - sat) * val) < 1 ? hue : 2 - hue) || 0, hue / 2];
};
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
const isOnePointZero = function isOnePointZero(n) {
return typeof n === 'string' && n.indexOf('.') !== -1 && parseFloat(n) === 1;
};
const isPercentage = function isPercentage(n) {
return typeof n === 'string' && n.indexOf('%') !== -1;
};
// Take input from [0, n] and return it as [0, 1]
const bound01 = function bound01(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);
};
const INT_HEX_MAP = {
10: 'A',
11: 'B',
12: 'C',
13: 'D',
14: 'E',
15: 'F'
};
const toHex = function toHex(_ref) {
let {
r,
g,
b
} = _ref;
const hexOne = function hexOne(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 HEX_INT_MAP = {
A: 10,
B: 11,
C: 12,
D: 13,
E: 14,
F: 15
};
const parseHexChannel = function parseHexChannel(hex) {
if (hex.length === 2) {
return (HEX_INT_MAP[hex[0].toUpperCase()] || +hex[0]) * 16 + (HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1]);
}
return HEX_INT_MAP[hex[1].toUpperCase()] || +hex[1];
};
const hsl2hsv = function 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: hue,
s: sv * 100,
v: v * 100
};
};
// `rgbToHsv`
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
const rgb2hsv = function rgb2hsv(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: h * 360,
s: s * 100,
v: v * 100
};
};
// `hsvToRgb`
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
const hsv2rgb = function hsv2rgb(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)
};
};
class Color {
constructor(options) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this._alpha = 100;
this.enableAlpha = false;
this.format = 'hex';
this.value = '';
options = options || {};
for (let option in options) {
if (options.hasOwnProperty(option)) {
this[option] = options[option];
}
}
this.doOnChange();
}
set(prop, value) {
if (arguments.length === 1 && typeof prop === 'object') {
for (let p in prop) {
if (prop.hasOwnProperty(p)) {
this.set(p, prop[p]);
}
}
return;
}
this['_' + prop] = value;
this.doOnChange();
}
get(prop) {
return this['_' + prop];
}
toRgb() {
return hsv2rgb(this._hue, this._saturation, this._value);
}
fromString(value) {
if (!value) {
this._hue = 0;
this._saturation = 100;
this._value = 100;
this.doOnChange();
return;
}
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));
this.doOnChange();
};
if (value.indexOf('hsl') !== -1) {
const parts = value.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 (value.indexOf('hsv') !== -1) {
const parts = value.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 (value.indexOf('rgb') !== -1) {
const parts = value.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) {
const hex = value.replace('#', '').trim();
if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) return;
let r, g, b;
if (hex.length === 3) {
r = parseHexChannel(hex[0] + hex[0]);
g = parseHexChannel(hex[1] + hex[1]);
b = parseHexChannel(hex[2] + hex[2]);
} else if (hex.length === 6 || hex.length === 8) {
r = parseHexChannel(hex.substring(0, 2));
g = parseHexChannel(hex.substring(2, 4));
b = parseHexChannel(hex.substring(4, 6));
}
if (hex.length === 8) {
this._alpha = Math.floor(parseHexChannel(hex.substring(6)) / 255 * 100);
} else if (hex.length === 3 || hex.length === 6) {
this._alpha = 100;
}
const {
h,
s,
v
} = rgb2hsv(r, g, b);
fromHSV(h, s, v);
}
}
compare(color) {
return Math.abs(color._hue - this._hue) < 2 && Math.abs(color._saturation - this._saturation) < 1 && Math.abs(color._value - this._value) < 1 && Math.abs(color._alpha - this._alpha) < 1;
}
doOnChange() {
const {
_hue,
_saturation,
_value,
_alpha,
format
} = this;
if (this.enableAlpha) {
switch (format) {
case 'hsl':
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = "hsla(".concat(_hue, ", ").concat(Math.round(hsl[1] * 100), "%, ").concat(Math.round(hsl[2] * 100), "%, ").concat(_alpha / 100, ")");
break;
case 'hsv':
this.value = "hsva(".concat(_hue, ", ").concat(Math.round(_saturation), "%, ").concat(Math.round(_value), "%, ").concat(_alpha / 100, ")");
break;
default:
const {
r,
g,
b
} = hsv2rgb(_hue, _saturation, _value);
this.value = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(_alpha / 100, ")");
}
} else {
switch (format) {
case 'hsl':
const hsl = hsv2hsl(_hue, _saturation / 100, _value / 100);
this.value = "hsl(".concat(_hue, ", ").concat(Math.round(hsl[1] * 100), "%, ").concat(Math.round(hsl[2] * 100), "%)");
break;
case 'hsv':
this.value = "hsv(".concat(_hue, ", ").concat(Math.round(_saturation), "%, ").concat(Math.round(_value), "%)");
break;
case 'rgb':
const {
r,
g,
b
} = hsv2rgb(_hue, _saturation, _value);
this.value = "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
break;
default:
this.value = toHex(hsv2rgb(_hue, _saturation, _value));
}
}
}
}
;
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/picker-dropdown.vue?vue&type=template&id=56ef638e
var picker_dropdownvue_type_template_id_56ef638e_render = function render() {
var _vm = this,
_c = _vm._self._c
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(),
_vm.predefine
? _c("predefine", {
attrs: { color: _vm.color, colors: _vm.predefine },
})
: _vm._e(),
_c(
"div",
{ staticClass: "el-color-dropdown__btns" },
[
_c(
"span",
{ staticClass: "el-color-dropdown__value" },
[
_c("el-input", {
attrs: { "validate-event": false, size: "mini" },
on: { blur: _vm.handleConfirm },
nativeOn: {
keyup: function ($event) {
if (
!$event.type.indexOf("key") &&
_vm._k(
$event.keyCode,
"enter",
13,
$event.key,
"Enter"
)
)
return null
return _vm.handleConfirm.apply(null, arguments)
},
},
model: {
value: _vm.customInput,
callback: function ($$v) {
_vm.customInput = $$v
},
expression: "customInput",
},
}),
],
1
),
_c(
"el-btn",
{
staticClass: "el-color-dropdown__link-btn",
attrs: { size: "mini", type: "text" },
on: {
click: function ($event) {
return _vm.$emit("clear")
},
},
},
[
_vm._v(
"\n " +
_vm._s(_vm.t("el.colorpicker.clear")) +
"\n "
),
]
),
_c(
"el-btn",
{
staticClass: "el-color-dropdown__btn",
attrs: { plain: "", size: "mini" },
on: { click: _vm.confirmValue },
},
[
_vm._v(
"\n " +
_vm._s(_vm.t("el.colorpicker.confirm")) +
"\n "
),
]
),
],
1
),
],
1
),
]
)
}
var picker_dropdownvue_type_template_id_56ef638e_staticRenderFns = []
picker_dropdownvue_type_template_id_56ef638e_render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/components/picker-dropdown.vue?vue&type=template&id=56ef638e
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/sv-panel.vue?vue&type=template&id=347732c8
var sv_panelvue_type_template_id_347732c8_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"div",
{
staticClass: "el-color-svpanel",
style: {
backgroundColor: _vm.background,
},
},
[
_c("div", { staticClass: "el-color-svpanel__white" }),
_c("div", { staticClass: "el-color-svpanel__black" }),
_c(
"div",
{
staticClass: "el-color-svpanel__cursor",
style: {
top: _vm.cursorTop + "px",
left: _vm.cursorLeft + "px",
},
},
[_c("div")]
),
]
)
}
var sv_panelvue_type_template_id_347732c8_staticRenderFns = []
sv_panelvue_type_template_id_347732c8_render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue?vue&type=template&id=347732c8
// EXTERNAL MODULE: external "vue"
var external_vue_ = __webpack_require__(18);
var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
// CONCATENATED MODULE: ./packages/color-picker/src/draggable.js
let isDragging = false;
/* harmony default export */ var draggable = (function (element, options) {
if (external_vue_default.a.prototype.$isServer) return;
const moveFn = function moveFn(event) {
if (options.drag) {
options.drag(event);
}
};
const _upFn = function upFn(event) {
document.removeEventListener('mousemove', moveFn);
document.removeEventListener('mouseup', _upFn);
document.onselectstart = null;
document.ondragstart = null;
isDragging = false;
if (options.end) {
options.end(event);
}
};
element.addEventListener('mousedown', function (event) {
if (isDragging) return;
document.onselectstart = function () {
return false;
};
document.ondragstart = function () {
return false;
};
document.addEventListener('mousemove', moveFn);
document.addEventListener('mouseup', _upFn);
isDragging = true;
if (options.start) {
options.start(event);
}
});
});
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/sv-panel.vue?vue&type=script&lang=js
/* harmony default export */ var sv_panelvue_type_script_lang_js = ({
name: 'el-sl-panel',
props: {
color: {
required: true
}
},
computed: {
colorValue() {
const hue = this.color.get('hue');
const value = this.color.get('value');
return {
hue,
value
};
}
},
watch: {
colorValue() {
this.update();
}
},
methods: {
update() {
const saturation = this.color.get('saturation');
const value = this.color.get('value');
const el = this.$el;
let {
clientWidth: width,
clientHeight: height
} = el;
this.cursorLeft = saturation * width / 100;
this.cursorTop = (100 - value) * height / 100;
this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
},
handleDrag(event) {
const el = this.$el;
const rect = el.getBoundingClientRect();
let left = event.clientX - rect.left;
let top = event.clientY - rect.top;
left = Math.max(0, left);
left = Math.min(left, rect.width);
top = Math.max(0, top);
top = Math.min(top, rect.height);
this.cursorLeft = left;
this.cursorTop = top;
this.color.set({
saturation: left / rect.width * 100,
value: 100 - top / rect.height * 100
});
}
},
mounted() {
draggable(this.$el, {
drag: event => {
this.handleDrag(event);
},
end: event => {
this.handleDrag(event);
}
});
this.update();
},
data() {
return {
cursorTop: 0,
cursorLeft: 0,
background: 'hsl(0, 100%, 50%)'
};
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue?vue&type=script&lang=js
/* harmony default export */ var components_sv_panelvue_type_script_lang_js = (sv_panelvue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);
// CONCATENATED MODULE: ./packages/color-picker/src/components/sv-panel.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
components_sv_panelvue_type_script_lang_js,
sv_panelvue_type_template_id_347732c8_render,
sv_panelvue_type_template_id_347732c8_staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var sv_panel = (component.exports);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/hue-slider.vue?vue&type=template&id=cc289afc
var hue_slidervue_type_template_id_cc289afc_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"div",
{
staticClass: "el-color-hue-slider",
class: { "is-vertical": _vm.vertical },
},
[
_c("div", {
ref: "bar",
staticClass: "el-color-hue-slider__bar",
on: { click: _vm.handleClick },
}),
_c("div", {
ref: "thumb",
staticClass: "el-color-hue-slider__thumb",
style: {
left: _vm.thumbLeft + "px",
top: _vm.thumbTop + "px",
},
}),
]
)
}
var hue_slidervue_type_template_id_cc289afc_staticRenderFns = []
hue_slidervue_type_template_id_cc289afc_render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/components/hue-slider.vue?vue&type=template&id=cc289afc
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/hue-slider.vue?vue&type=script&lang=js
/* harmony default export */ var hue_slidervue_type_script_lang_js = ({
name: 'el-color-hue-slider',
props: {
color: {
required: true
},
vertical: Boolean
},
data() {
return {
thumbLeft: 0,
thumbTop: 0
};
},
computed: {
hueValue() {
const hue = this.color.get('hue');
return hue;
}
},
watch: {
hueValue() {
this.update();
}
},
methods: {
handleClick(event) {
const thumb = this.$refs.thumb;
const target = event.target;
if (target !== thumb) {
this.handleDrag(event);
}
},
handleDrag(event) {
const rect = this.$el.getBoundingClientRect();
const {
thumb
} = this.$refs;
let hue;
if (!this.vertical) {
let left = event.clientX - rect.left;
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
left = Math.max(thumb.offsetWidth / 2, left);
hue = Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 360);
} else {
let top = event.clientY - rect.top;
top = Math.min(top, rect.height - thumb.offsetHeight / 2);
top = Math.max(thumb.offsetHeight / 2, top);
hue = Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 360);
}
this.color.set('hue', hue);
},
getThumbLeft() {
if (this.vertical) return 0;
const el = this.$el;
const hue = this.color.get('hue');
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(hue * (el.offsetWidth - thumb.offsetWidth / 2) / 360);
},
getThumbTop() {
if (!this.vertical) return 0;
const el = this.$el;
const hue = this.color.get('hue');
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(hue * (el.offsetHeight - thumb.offsetHeight / 2) / 360);
},
update() {
this.thumbLeft = this.getThumbLeft();
this.thumbTop = this.getThumbTop();
}
},
mounted() {
const {
bar,
thumb
} = this.$refs;
const dragConfig = {
drag: event => {
this.handleDrag(event);
},
end: event => {
this.handleDrag(event);
}
};
draggable(bar, dragConfig);
draggable(thumb, dragConfig);
this.update();
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/components/hue-slider.vue?vue&type=script&lang=js
/* harmony default export */ var components_hue_slidervue_type_script_lang_js = (hue_slidervue_type_script_lang_js);
// CONCATENATED MODULE: ./packages/color-picker/src/components/hue-slider.vue
/* normalize component */
var hue_slider_component = Object(componentNormalizer["a" /* default */])(
components_hue_slidervue_type_script_lang_js,
hue_slidervue_type_template_id_cc289afc_render,
hue_slidervue_type_template_id_cc289afc_staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var hue_slider = (hue_slider_component.exports);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/alpha-slider.vue?vue&type=template&id=4738c7de
var alpha_slidervue_type_template_id_4738c7de_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c(
"div",
{
staticClass: "el-color-alpha-slider",
class: { "is-vertical": _vm.vertical },
},
[
_c("div", {
ref: "bar",
staticClass: "el-color-alpha-slider__bar",
style: {
background: _vm.background,
},
on: { click: _vm.handleClick },
}),
_c("div", {
ref: "thumb",
staticClass: "el-color-alpha-slider__thumb",
style: {
left: _vm.thumbLeft + "px",
top: _vm.thumbTop + "px",
},
}),
]
)
}
var alpha_slidervue_type_template_id_4738c7de_staticRenderFns = []
alpha_slidervue_type_template_id_4738c7de_render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/components/alpha-slider.vue?vue&type=template&id=4738c7de
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/alpha-slider.vue?vue&type=script&lang=js
/* harmony default export */ var alpha_slidervue_type_script_lang_js = ({
name: 'el-color-alpha-slider',
props: {
color: {
required: true
},
vertical: Boolean
},
watch: {
'color._alpha'() {
this.update();
},
'color.value'() {
this.update();
}
},
methods: {
handleClick(event) {
const thumb = this.$refs.thumb;
const target = event.target;
if (target !== thumb) {
this.handleDrag(event);
}
},
handleDrag(event) {
const rect = this.$el.getBoundingClientRect();
const {
thumb
} = this.$refs;
if (!this.vertical) {
let left = event.clientX - rect.left;
left = Math.max(thumb.offsetWidth / 2, left);
left = Math.min(left, rect.width - thumb.offsetWidth / 2);
this.color.set('alpha', Math.round((left - thumb.offsetWidth / 2) / (rect.width - thumb.offsetWidth) * 100));
} else {
let top = event.clientY - rect.top;
top = Math.max(thumb.offsetHeight / 2, top);
top = Math.min(top, rect.height - thumb.offsetHeight / 2);
this.color.set('alpha', Math.round((top - thumb.offsetHeight / 2) / (rect.height - thumb.offsetHeight) * 100));
}
},
getThumbLeft() {
if (this.vertical) return 0;
const el = this.$el;
const alpha = this.color._alpha;
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(alpha * (el.offsetWidth - thumb.offsetWidth / 2) / 100);
},
getThumbTop() {
if (!this.vertical) return 0;
const el = this.$el;
const alpha = this.color._alpha;
if (!el) return 0;
const thumb = this.$refs.thumb;
return Math.round(alpha * (el.offsetHeight - thumb.offsetHeight / 2) / 100);
},
getBackground() {
if (this.color && this.color.value) {
const {
r,
g,
b
} = this.color.toRgb();
return "linear-gradient(to right, rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 0) 0%, rgba(").concat(r, ", ").concat(g, ", ").concat(b, ", 1) 100%)");
}
return null;
},
update() {
this.thumbLeft = this.getThumbLeft();
this.thumbTop = this.getThumbTop();
this.background = this.getBackground();
}
},
data() {
return {
thumbLeft: 0,
thumbTop: 0,
background: null
};
},
mounted() {
const {
bar,
thumb
} = this.$refs;
const dragConfig = {
drag: event => {
this.handleDrag(event);
},
end: event => {
this.handleDrag(event);
}
};
draggable(bar, dragConfig);
draggable(thumb, dragConfig);
this.update();
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/components/alpha-slider.vue?vue&type=script&lang=js
/* harmony default export */ var components_alpha_slidervue_type_script_lang_js = (alpha_slidervue_type_script_lang_js);
// CONCATENATED MODULE: ./packages/color-picker/src/components/alpha-slider.vue
/* normalize component */
var alpha_slider_component = Object(componentNormalizer["a" /* default */])(
components_alpha_slidervue_type_script_lang_js,
alpha_slidervue_type_template_id_4738c7de_render,
alpha_slidervue_type_template_id_4738c7de_staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var alpha_slider = (alpha_slider_component.exports);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/predefine.vue?vue&type=template&id=7da51eed
var predefinevue_type_template_id_7da51eed_render = function render() {
var _vm = this,
_c = _vm._self._c
return _c("div", { staticClass: "el-color-predefine" }, [
_c(
"div",
{ staticClass: "el-color-predefine__colors" },
_vm._l(_vm.rgbaColors, function (item, index) {
return _c(
"div",
{
key: _vm.colors[index],
staticClass: "el-color-predefine__color-selector",
class: { selected: item.selected, "is-alpha": item._alpha < 100 },
on: {
click: function ($event) {
return _vm.handleSelect(index)
},
},
},
[_c("div", { style: { "background-color": item.value } })]
)
}),
0
),
])
}
var predefinevue_type_template_id_7da51eed_staticRenderFns = []
predefinevue_type_template_id_7da51eed_render._withStripped = true
// CONCATENATED MODULE: ./packages/color-picker/src/components/predefine.vue?vue&type=template&id=7da51eed
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/predefine.vue?vue&type=script&lang=js
/* harmony default export */ var predefinevue_type_script_lang_js = ({
props: {
colors: {
type: Array,
required: true
},
color: {
required: true
}
},
data() {
return {
rgbaColors: this.parseColors(this.colors, this.color)
};
},
methods: {
handleSelect(index) {
this.color.fromString(this.colors[index]);
},
parseColors(colors, color) {
return colors.map(value => {
const c = new Color();
c.enableAlpha = true;
c.format = 'rgba';
c.fromString(value);
c.selected = c.value === color.value;
return c;
});
}
},
watch: {
'$parent.currentColor'(val) {
const color = new Color();
color.fromString(val);
this.rgbaColors.forEach(item => {
item.selected = color.compare(item);
});
},
colors(newVal) {
this.rgbaColors = this.parseColors(newVal, this.color);
},
color(newVal) {
this.rgbaColors = this.parseColors(this.colors, newVal);
}
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/components/predefine.vue?vue&type=script&lang=js
/* harmony default export */ var components_predefinevue_type_script_lang_js = (predefinevue_type_script_lang_js);
// CONCATENATED MODULE: ./packages/color-picker/src/components/predefine.vue
/* normalize component */
var predefine_component = Object(componentNormalizer["a" /* default */])(
components_predefinevue_type_script_lang_js,
predefinevue_type_template_id_7da51eed_render,
predefinevue_type_template_id_7da51eed_staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var predefine = (predefine_component.exports);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/vue-popper"
var vue_popper_ = __webpack_require__(17);
var vue_popper_default = /*#__PURE__*/__webpack_require__.n(vue_popper_);
// EXTERNAL MODULE: external "element-nice-ui/lib/mixins/locale"
var locale_ = __webpack_require__(19);
var locale_default = /*#__PURE__*/__webpack_require__.n(locale_);
// EXTERNAL MODULE: external "element-nice-ui/lib/input"
var input_ = __webpack_require__(22);
var input_default = /*#__PURE__*/__webpack_require__.n(input_);
// EXTERNAL MODULE: external "element-nice-ui/lib/btn"
var btn_ = __webpack_require__(21);
var btn_default = /*#__PURE__*/__webpack_require__.n(btn_);
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/components/picker-dropdown.vue?vue&type=script&lang=js
/* harmony default export */ var picker_dropdownvue_type_script_lang_js = ({
name: 'el-color-picker-dropdown',
mixins: [vue_popper_default.a, locale_default.a],
components: {
SvPanel: sv_panel,
HueSlider: hue_slider,
AlphaSlider: alpha_slider,
ElInput: input_default.a,
ElBtn: btn_default.a,
Predefine: predefine
},
props: {
color: {
required: true
},
showAlpha: Boolean,
predefine: Array
},
data() {
return {
customInput: ''
};
},
computed: {
currentColor() {
const parent = this.$parent;
return !parent.value && !parent.showPanelColor ? '' : parent.color.value;
}
},
methods: {
confirmValue() {
this.$emit('pick');
},
handleConfirm() {
this.color.fromString(this.customInput);
}
},
mounted() {
this.$parent.popperElm = this.popperElm = this.$el;
this.referenceElm = this.$parent.$el;
},
watch: {
showPopper(val) {
if (val === true) {
this.$nextTick(() => {
const {
sl,
hue,
alpha
} = this.$refs;
sl && sl.update();
hue && hue.update();
alpha && alpha.update();
});
}
},
currentColor: {
immediate: true,
handler(val) {
this.customInput = val;
}
}
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/components/picker-dropdown.vue?vue&type=script&lang=js
/* harmony default export */ var components_picker_dropdownvue_type_script_lang_js = (picker_dropdownvue_type_script_lang_js);
// CONCATENATED MODULE: ./packages/color-picker/src/components/picker-dropdown.vue
/* normalize component */
var picker_dropdown_component = Object(componentNormalizer["a" /* default */])(
components_picker_dropdownvue_type_script_lang_js,
picker_dropdownvue_type_template_id_56ef638e_render,
picker_dropdownvue_type_template_id_56ef638e_staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var picker_dropdown = (picker_dropdown_component.exports);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/clickoutside"
var clickoutside_ = __webpack_require__(27);
var clickoutside_default = /*#__PURE__*/__webpack_require__.n(clickoutside_);
// EXTERNAL MODULE: external "element-nice-ui/lib/mixins/emitter"
var emitter_ = __webpack_require__(13);
var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/util"
var util_ = __webpack_require__(5);
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/color-picker/src/main.vue?vue&type=script&lang=js
/* harmony default export */ var mainvue_type_script_lang_js = ({
name: 'ElColorPicker',
mixins: [emitter_default.a],
props: {
value: String,
showAlpha: Boolean,
colorFormat: String,
disabled: {
type: Boolean,
default: undefined
},
size: String,
popperClass: String,
predefine: Array
},
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
directives: {
Clickoutside: clickoutside_default.a
},
computed: {
displayedColor() {
if (!this.value && !this.showPanelColor) {
return 'transparent';
}
return this.displayedRgb(this.color, this.showAlpha);
},
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
colorSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
colorDisabled() {
return Object(util_["getDefined"])(this.disabled, (this.elForm || {}).disabled, false);
}
},
watch: {
value(val) {
if (!val) {
this.showPanelColor = false;
} else if (val && val !== this.color.value) {
this.color.fromString(val);
}
},
color: {
deep: true,
handler() {
this.showPanelColor = true;
}
},
displayedColor(val) {
if (!this.showPicker) return;
const currentValueColor = new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
currentValueColor.fromString(this.value);
const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
if (val !== currentValueColorRgb) {
this.$emit('active-change', val);
}
}
},
methods: {
handleTrigger() {
if (this.colorDisabled) return;
this.showPicker = !this.showPicker;
},
confirmValue() {
const value = this.color.value;
this.$emit('input', value);
this.$emit('change', value);
this.dispatch('ElFormItem', 'el.form.change', value);
this.showPicker = false;
},
clearValue() {
this.$emit('input', null);
this.$emit('change', null);
if (this.value !== null) {
this.dispatch('ElFormItem', 'el.form.change', null);
}
this.showPanelColor = false;
this.showPicker = false;
this.resetColor();
},
hide() {
this.showPicker = false;
this.resetColor();
},
resetColor() {
this.$nextTick(_ => {
if (this.value) {
this.color.fromString(this.value);
} else {
this.showPanelColor = false;
}
});
},
displayedRgb(color, showAlpha) {
if (!(color instanceof Color)) {
throw Error('color should be instance of Color Class');
}
const {
r,
g,
b
} = color.toRgb();
return showAlpha ? "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(color.get('alpha') / 100, ")") : "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
}
},
mounted() {
const value = this.value;
if (value) {
this.color.fromString(value);
}
this.popperElm = this.$refs.dropdown.$el;
},
data() {
const color = new Color({
enableAlpha: this.showAlpha,
format: this.colorFormat
});
return {
color,
showPicker: false,
showPanelColor: false
};
},
components: {
PickerDropdown: picker_dropdown
}
});
// CONCATENATED MODULE: ./packages/color-picker/src/main.vue?vue&type=script&lang=js
/* harmony default export */ var src_mainvue_type_script_lang_js = (mainvue_type_script_lang_js);
// CONCATENATED MODULE: ./packages/color-picker/src/main.vue
/* normalize component */
var main_component = Object(componentNormalizer["a" /* default */])(
src_mainvue_type_script_lang_js,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var main = (main_component.exports);
// CONCATENATED MODULE: ./packages/color-picker/index.js
/* istanbul ignore next */
main.install = function (Vue) {
Vue.component(main.name, main);
};
/* harmony default export */ var color_picker = __webpack_exports__["default"] = (main);
/***/ }),
/***/ 19:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/mixins/locale");
/***/ }),
/***/ 2:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* 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 componen