primevue
Version:
PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh
1,335 lines • 51.2 kB
JavaScript
import BaseEditableHolder from '@primevue/core/baseeditableholder';
import InputColorStyle from 'primevue/inputcolor/style';
import { renderSlot } from 'vue';
var script$1 = {
name: 'BaseInputColor',
"extends": BaseEditableHolder,
props: {
format: {
type: String,
"default": 'hsba'
}
},
style: InputColorStyle,
provide: function provide() {
return {
$pcInputColor: this,
$parentInstance: this
};
}
};
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: true, configurable: true } }), Object.defineProperty(t, "prototype", { writable: false }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof$1(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(t.prototype ), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey$1(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: false }), e; }
function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return (String )(t); }
// CONSTANTS
var RGB_MAX = 255;
// Matches hsb(...) or hsba(...)
var HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
// Matches hsl(...) or hsla(...)
var HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
// Matches #rgb, #rgba, #rrggbb, #rrggbbaa (hash optional)
var HEX_REGEX = /^#?([a-fA-F0-9]{3,8})$/;
// Matches rgb(...) or rgba(...)
var RGB_REGEX = /^rgba?\(\s*([^)]+)\s*\)$/;
// Matches oklch(L C H / a)
var OKLCH_REGEX = /oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.]+))?\)/i;
// UTILS
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
var multiplyMatrices = function multiplyMatrices(A, B) {
return [A[0] * B[0] + A[1] * B[1] + A[2] * B[2], A[3] * B[0] + A[4] * B[1] + A[5] * B[2], A[6] * B[0] + A[7] * B[1] + A[8] * B[2]];
};
/**
* Snaps a value to the nearest step increment within min/max bounds
* @example snap(23.7, 0, 100, 5) => 25
* @example snap(0.234, 0, 1, 0.01) => 0.23
*/
function snap(value, min, max, step) {
var clamped = clamp(value, min, max);
var offset = clamped - min;
var steps = Math.round(offset / step);
var snapped = min + steps * step;
var precision = (step.toString().split('.')[1] || '').length;
return parseFloat(snapped.toFixed(precision));
}
function getNativeFormatForChannel(channel) {
switch (channel) {
case 'hue':
case 'saturation':
case 'brightness':
return 'hsba';
case 'lightness':
return 'hsla';
case 'red':
case 'green':
case 'blue':
return 'rgba';
case 'L':
case 'C':
case 'H':
return 'oklcha';
case 'alpha':
return undefined;
default:
return undefined;
}
}
var Color = /*#__PURE__*/function () {
function Color() {
_classCallCheck(this, Color);
}
return _createClass(Color, [{
key: "getChannelValue",
value: function getChannelValue(channel) {
if (channel in this) {
return this[channel];
}
var nativeFormat = getNativeFormatForChannel(channel);
if (nativeFormat) {
return this.toFormat(nativeFormat).getChannelValue(channel);
}
throw new Error("Unknown color channel: ".concat(channel));
}
}, {
key: "withChannelValue",
value: function withChannelValue(channel, value) {
if (channel in this) {
var _this$getChannelRange = this.getChannelRange(channel),
min = _this$getChannelRange.min,
max = _this$getChannelRange.max;
var cloned = this.clone();
cloned[channel] = clamp(value, min, max);
return cloned;
}
var nativeFormat = getNativeFormatForChannel(channel);
if (nativeFormat) {
return this.toFormat(nativeFormat).withChannelValue(channel, value).toFormat(this.getFormat());
}
throw new Error("Unknown color channel: ".concat(channel));
}
}, {
key: "getChannelRange",
value: function getChannelRange(channel) {
var nativeFormat = getNativeFormatForChannel(channel);
if (nativeFormat) {
return this.toFormat(nativeFormat).getChannelRange(channel);
}
if (channel === 'alpha') {
return {
min: 0,
max: 1,
step: 0.01
};
}
throw new Error("Unknown color channel: ".concat(channel));
}
}, {
key: "getSpaceAxes",
value: function getSpaceAxes(xyChannels) {
var xChannel = xyChannels.xChannel,
yChannel = xyChannels.yChannel;
if (xChannel === yChannel) {
throw new Error('xChannel and yChannel cannot be the same');
}
var zChannel = this.getChannels().find(function (channel) {
return channel !== xChannel && channel !== yChannel;
});
if (!zChannel) {
throw new Error('zChannel not found');
}
return {
xChannel: xChannel,
yChannel: yChannel,
zChannel: zChannel
};
}
}, {
key: "incChannelValue",
value: function incChannelValue(channel, step) {
var _this$getChannelRange2 = this.getChannelRange(channel),
min = _this$getChannelRange2.min,
max = _this$getChannelRange2.max,
availableStep = _this$getChannelRange2.step;
var value = snap(clamp(this.getChannelValue(channel) + step, min, max), min, max, availableStep);
return this.withChannelValue(channel, value);
}
}, {
key: "decChannelValue",
value: function decChannelValue(channel, step) {
return this.incChannelValue(channel, -step);
}
}]);
}();
var HSBColor = /*#__PURE__*/function (_Color) {
function HSBColor(hue, saturation, brightness, alpha) {
var _this;
_classCallCheck(this, HSBColor);
_this = _callSuper(this, HSBColor);
_this.hue = hue;
_this.saturation = saturation;
_this.brightness = brightness;
_this.alpha = alpha;
return _this;
}
_inherits(HSBColor, _Color);
return _createClass(HSBColor, [{
key: "toRGB",
value: function toRGB() {
var h = this.hue;
var s = this.saturation / 100;
var b = this.brightness / 100;
function f(n) {
var k = (n + h / 60) % 6;
return b - b * s * Math.max(0, Math.min(k, 4 - k, 1));
}
return new RGBColor(Math.round(f(5) * RGB_MAX), Math.round(f(3) * RGB_MAX), Math.round(f(1) * RGB_MAX), Number(this.alpha.toFixed(2)));
}
}, {
key: "toHSL",
value: function toHSL() {
var h = this.hue;
var s = this.saturation / 100;
var b = this.brightness / 100;
var l = b * (1 - s / 2);
if (l === 0 || l === 1) {
s = 0;
} else {
s = (b - l) / Math.min(l, 1 - l);
}
return new HSLColor(Number(h.toFixed(2)), Number((s * 100).toFixed(2)), Number((l * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
}
}, {
key: "toFormat",
value: function toFormat(format) {
switch (format) {
case 'hsba':
return this;
case 'rgba':
return this.toRGB();
case 'hsla':
return this.toHSL();
case 'oklcha':
return this.toRGB().toFormat('oklcha');
default:
throw new Error("Invalid format: ".concat(format));
}
}
}, {
key: "toString",
value: function toString(format) {
switch (format) {
case 'css':
return this.toHSL().toString('css');
case 'hex':
return this.toRGB().toString('hex');
case 'hexa':
return this.toRGB().toString('hexa');
case 'hsb':
return "hsb(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.brightness.toFixed(2), "%)");
case 'hsba':
return "hsba(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.brightness.toFixed(2), "%, ").concat(this.alpha, ")");
case 'hsl':
return this.toHSL().toString('hsl');
case 'rgb':
return this.toRGB().toString('rgb');
case 'oklch':
return this.toRGB().toFormat('oklcha').toString('oklch');
default:
return this.toFormat(format).toString(format);
}
}
}, {
key: "toJSON",
value: function toJSON() {
return {
hue: this.hue,
saturation: this.saturation,
brightness: this.brightness,
alpha: this.alpha
};
}
}, {
key: "clone",
value: function clone() {
return new HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
}
}, {
key: "getChannelRange",
value: function getChannelRange(channel) {
switch (channel) {
case 'hue':
return {
min: 0,
max: 360,
step: 1
};
case 'saturation':
case 'brightness':
return {
min: 0,
max: 100,
step: 1
};
case 'alpha':
return {
min: 0,
max: 1,
step: 0.01
};
default:
return _superPropGet(HSBColor, "getChannelRange", this, 3)([channel]);
}
}
}, {
key: "getFormat",
value: function getFormat() {
return 'hsba';
}
}, {
key: "getChannels",
value: function getChannels() {
return ['hue', 'saturation', 'brightness'];
}
}], [{
key: "parse",
value: function parse(value) {
var _match$;
var match = value.match(HSB_REGEX);
if (!match) return undefined;
var _split$map = ((_match$ = match[1]) !== null && _match$ !== void 0 ? _match$ : match[2]).split(',').map(function (n) {
return Number(n.trim().replace('%', ''));
}),
_split$map2 = _slicedToArray(_split$map, 4),
h = _split$map2[0],
s = _split$map2[1],
b = _split$map2[2],
a = _split$map2[3];
return new HSBColor(h % 360, clamp(s, 0, 100), clamp(b, 0, 100), clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
}
}]);
}(Color);
var HSLColor = /*#__PURE__*/function (_Color2) {
function HSLColor(hue, saturation, lightness, alpha) {
var _this2;
_classCallCheck(this, HSLColor);
_this2 = _callSuper(this, HSLColor);
_this2.hue = hue;
_this2.saturation = saturation;
_this2.lightness = lightness;
_this2.alpha = alpha;
return _this2;
}
_inherits(HSLColor, _Color2);
return _createClass(HSLColor, [{
key: "toRGB",
value: function toRGB() {
var h = this.hue;
var s = this.saturation / 100;
var l = this.lightness / 100;
function f(n) {
var k = (n + h / 30) % 12;
var a = s * Math.min(l, 1 - l);
return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
}
return new RGBColor(Math.round(f(0) * RGB_MAX), Math.round(f(8) * RGB_MAX), Math.round(f(4) * RGB_MAX), Number(this.alpha.toFixed(2)));
}
}, {
key: "toHSB",
value: function toHSB() {
var h = this.hue;
var s = this.saturation / 100;
var l = this.lightness / 100;
var b = l + s * Math.min(l, 1 - l);
if (b === 0) {
s = 0;
} else {
s = 2 * (1 - l / b);
}
return new HSBColor(Number(h.toFixed(2)), Number((s * 100).toFixed(2)), Number((b * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
}
}, {
key: "toFormat",
value: function toFormat(format) {
switch (format) {
case 'hsla':
return this;
case 'rgba':
return this.toRGB();
case 'hsba':
return this.toHSB();
case 'oklcha':
return this.toRGB().toFormat('oklcha');
default:
throw new Error("Invalid format: ".concat(format));
}
}
}, {
key: "toString",
value: function toString(format) {
switch (format) {
case 'hex':
return this.toRGB().toString('hex');
case 'hexa':
return this.toRGB().toString('hexa');
case 'hsl':
return "hsl(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.lightness.toFixed(2), "%)");
case 'css':
case 'hsla':
return "hsla(".concat(this.hue, ", ").concat(this.saturation.toFixed(2), "%, ").concat(this.lightness.toFixed(2), "%, ").concat(this.alpha, ")");
case 'rgb':
return this.toRGB().toString('rgb');
case 'hsb':
return this.toHSB().toString('hsb');
case 'oklch':
return this.toRGB().toFormat('oklcha').toString('oklch');
default:
return this.toFormat(format).toString(format);
}
}
}, {
key: "toJSON",
value: function toJSON() {
return {
hue: this.hue,
saturation: this.saturation,
lightness: this.lightness,
alpha: this.alpha
};
}
}, {
key: "clone",
value: function clone() {
return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
}
}, {
key: "getChannelRange",
value: function getChannelRange(channel) {
switch (channel) {
case 'hue':
return {
min: 0,
max: 360,
step: 1
};
case 'saturation':
case 'lightness':
return {
min: 0,
max: 100,
step: 1
};
case 'alpha':
return {
min: 0,
max: 1,
step: 0.01
};
default:
return _superPropGet(HSLColor, "getChannelRange", this, 3)([channel]);
}
}
}, {
key: "getFormat",
value: function getFormat() {
return 'hsla';
}
}, {
key: "getChannels",
value: function getChannels() {
return ['hue', 'saturation', 'lightness'];
}
}], [{
key: "parse",
value: function parse(value) {
var _split$map3, _ref3;
var match = value.match(HSL_REGEX);
if (!match) return undefined;
var _ref = (_split$map3 = (_ref3 = match[1] || match[2]) === null || _ref3 === void 0 ? void 0 : _ref3.split(',').map(function (n) {
return Number(n.trim().replace('%', ''));
})) !== null && _split$map3 !== void 0 ? _split$map3 : [],
_ref2 = _slicedToArray(_ref, 4),
h = _ref2[0],
s = _ref2[1],
l = _ref2[2],
a = _ref2[3];
return new HSLColor(h % 360, clamp(s, 0, 100), clamp(l, 0, 100), clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
}
}]);
}(Color);
var RGBColor = /*#__PURE__*/function (_Color3) {
function RGBColor(red, green, blue, alpha) {
var _this3;
_classCallCheck(this, RGBColor);
_this3 = _callSuper(this, RGBColor);
_this3.red = red;
_this3.green = green;
_this3.blue = blue;
_this3.alpha = alpha;
return _this3;
}
_inherits(RGBColor, _Color3);
return _createClass(RGBColor, [{
key: "toHSB",
value: function toHSB() {
var r = this.red / RGB_MAX,
g = this.green / RGB_MAX,
b = this.blue / RGB_MAX;
var mmax = Math.max(r, g, b);
var mmin = Math.min(r, g, b);
var chroma = mmax - mmin;
var brightness = mmax;
var saturation = mmax === 0 ? 0 : chroma / mmax;
var hue = 0;
if (chroma !== 0) {
switch (mmax) {
case r:
hue = (g - b) / chroma % 6;
break;
case g:
hue = (b - r) / chroma + 2;
break;
case b:
hue = (r - g) / chroma + 4;
break;
}
hue *= 60;
if (hue < 0) {
hue += 360;
}
}
return new HSBColor(Number(hue.toFixed(2)), Number((saturation * 100).toFixed(2)), Number((brightness * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
}
}, {
key: "toHSL",
value: function toHSL() {
var r = this.red / RGB_MAX,
g = this.green / RGB_MAX,
b = this.blue / RGB_MAX;
var mmax = Math.max(r, g, b);
var mmin = Math.min(r, g, b);
var lightness = (mmax + mmin) / 2;
var chroma = mmax - mmin;
var hue = 0;
// eslint-disable-next-line no-useless-assignment
var saturation = -1;
if (chroma !== 0) {
switch (mmax) {
case r:
hue = (g - b) / chroma % 6;
break;
case g:
hue = (b - r) / chroma + 2;
break;
case b:
hue = (r - g) / chroma + 4;
break;
}
hue *= 60;
if (hue < 0) {
hue += 360;
}
}
if (lightness === 0 || lightness === 1) {
saturation = 0;
} else {
saturation = chroma / (1 - Math.abs(2 * mmax - chroma - 1));
}
return new HSLColor(Number(hue.toFixed(2)), Number((saturation * 100).toFixed(2)), Number((lightness * 100).toFixed(2)), Number(this.alpha.toFixed(2)));
}
}, {
key: "toOKLCH",
value: function toOKLCH() {
var rgb = [this.red / RGB_MAX, this.green / RGB_MAX, this.blue / RGB_MAX];
var rgbLinear = rgb.map(function (c) {
return Math.abs(c) <= 0.04045 ? c / 12.92 : (c < 0 ? -1 : 1) * Math.pow((Math.abs(c) + 0.055) / 1.055, 2.4);
});
var xyz = multiplyMatrices([0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756, 0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607], rgbLinear);
var LMS = multiplyMatrices([0.819022437996703, 0.3619062600528904, -0.1288737815209879, 0.0329836539323885, 0.9292868615863434, 0.0361446663506424, 0.0481771893596242, 0.2642395317527308, 0.6335478284694309], xyz);
var LMSg = LMS.map(function (val) {
return Math.cbrt(val);
});
var _multiplyMatrices = multiplyMatrices([0.210454268309314, 0.7936177747023054, -0.0040720430116193, 1.9779985324311684, -2.42859224204858, 0.450593709617411, 0.0259040424655478, 0.7827717124575296, -0.8086757549230774], LMSg),
_multiplyMatrices2 = _slicedToArray(_multiplyMatrices, 3),
L = _multiplyMatrices2[0],
a = _multiplyMatrices2[1],
b = _multiplyMatrices2[2];
var C = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
var H = Math.abs(a) < 0.0002 && Math.abs(b) < 0.0002 ? NaN : (Math.atan2(b, a) * 180 / Math.PI % 360 + 360) % 360;
var outL = Number(Math.min(1, Math.max(0, L)).toFixed(4));
var outC = Number(C.toFixed(4));
var outH = Number.isNaN(H) ? NaN : Number(H.toFixed(2));
return new OKLCHColor(outL, outC, outH, Number(this.alpha.toFixed(2)));
}
}, {
key: "toHexInt",
value: function toHexInt() {
return this.red << 16 | this.green << 8 | this.blue;
}
}, {
key: "toFormat",
value: function toFormat(format) {
switch (format) {
case 'rgba':
return this;
case 'hsla':
return this.toHSL();
case 'hsba':
return this.toHSB();
case 'oklcha':
return this.toOKLCH();
default:
throw new Error("Invalid format: ".concat(format));
}
}
}, {
key: "toString",
value: function toString(format) {
switch (format) {
case 'hex':
return "#".concat(this.red.toString(16).padStart(2, '0')).concat(this.green.toString(16).padStart(2, '0')).concat(this.blue.toString(16).padStart(2, '0'));
case 'hexa':
return "#".concat(this.red.toString(16).padStart(2, '0')).concat(this.green.toString(16).padStart(2, '0')).concat(this.blue.toString(16).padStart(2, '0')).concat(Math.round(this.alpha * RGB_MAX).toString(16).padStart(2, '0'));
case 'rgb':
return "rgb(".concat(this.red, ", ").concat(this.green, ", ").concat(this.blue, ")");
case 'rgba':
case 'css':
return "rgba(".concat(this.red, ", ").concat(this.green, ", ").concat(this.blue, ", ").concat(this.alpha, ")");
case 'hsl':
return this.toHSL().toString('hsl');
case 'hsb':
return this.toHSB().toString('hsb');
case 'oklch':
return this.toOKLCH().toString('oklch');
default:
return this.toFormat(format).toString(format);
}
}
}, {
key: "toJSON",
value: function toJSON() {
return {
red: this.red,
green: this.green,
blue: this.blue,
alpha: this.alpha
};
}
}, {
key: "clone",
value: function clone() {
return new RGBColor(this.red, this.green, this.blue, this.alpha);
}
}, {
key: "getChannelRange",
value: function getChannelRange(channel) {
switch (channel) {
case 'red':
case 'green':
case 'blue':
return {
min: 0,
max: RGB_MAX,
step: 1
};
case 'alpha':
return {
min: 0,
max: 1,
step: 0.01
};
default:
return _superPropGet(RGBColor, "getChannelRange", this, 3)([channel]);
}
}
}, {
key: "getFormat",
value: function getFormat() {
return 'rgba';
}
}, {
key: "getChannels",
value: function getChannels() {
return ['red', 'green', 'blue'];
}
}], [{
key: "parse",
value: function parse(value) {
var _this$parseHexColor;
if (!value) return undefined;
var input = value.trim();
return (_this$parseHexColor = this.parseHexColor(input)) !== null && _this$parseHexColor !== void 0 ? _this$parseHexColor : this.parseRgbFunction(input);
}
}, {
key: "expandShortHex",
value: function expandShortHex(hex) {
return hex.split('').map(function (c) {
return c + c;
}).join('');
}
}, {
key: "parseHexColor",
value: function parseHexColor(input) {
var match = input.match(HEX_REGEX);
if (!match) return undefined;
var hex = match[1];
// Expand shorthand (#abc -> #aabbcc, #abcd -> #aabbccdd)
if (hex.length <= 4) {
hex = this.expandShortHex(hex);
}
if (![6, 8].includes(hex.length)) return undefined;
var r = parseInt(hex.slice(0, 2), 16);
var g = parseInt(hex.slice(2, 4), 16);
var b = parseInt(hex.slice(4, 6), 16);
var a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / RGB_MAX : 1;
return new RGBColor(r, g, b, a);
}
}, {
key: "parseRgbFunction",
value: function parseRgbFunction(input) {
var match = input.match(RGB_REGEX);
if (!(match !== null && match !== void 0 && match[1])) return undefined;
var _match$1$split$map = match[1].split(',').map(function (v) {
return v.trim();
}),
_match$1$split$map2 = _slicedToArray(_match$1$split$map, 4),
rStr = _match$1$split$map2[0],
gStr = _match$1$split$map2[1],
bStr = _match$1$split$map2[2],
aStr = _match$1$split$map2[3];
var r = clamp(Number(rStr), 0, RGB_MAX);
var g = clamp(Number(gStr), 0, RGB_MAX);
var b = clamp(Number(bStr), 0, RGB_MAX);
var a = aStr !== undefined ? clamp(Number(aStr), 0, 1) : 1;
if ([r, g, b, a].some(function (v) {
return Number.isNaN(v);
})) return undefined;
return new RGBColor(r, g, b, a);
}
}]);
}(Color);
var OKLCHColor = /*#__PURE__*/function (_Color4) {
function OKLCHColor(L, C, H, alpha) {
var _this4;
_classCallCheck(this, OKLCHColor);
_this4 = _callSuper(this, OKLCHColor);
_this4.L = L; // 0–1
_this4.C = C; // ~0–0.4 typical usable range
_this4.H = H; // 0–360
_this4.alpha = alpha; // 0–1
return _this4;
}
_inherits(OKLCHColor, _Color4);
return _createClass(OKLCHColor, [{
key: "toRGB",
value: function toRGB() {
var L = this.L;
var a = Number.isNaN(this.H) ? 0 : this.C * Math.cos(this.H * Math.PI / 180);
var b = Number.isNaN(this.H) ? 0 : this.C * Math.sin(this.H * Math.PI / 180);
var LMSg = multiplyMatrices([1, 0.3963377774, 0.2158037573, 1, -0.1055613458, -0.0638541728, 1, -0.0894841775, -1.291485548], [L, a, b]);
var LMS = LMSg.map(function (v) {
return Math.pow(v, 3);
});
var xyz = multiplyMatrices([1.2268798758, -0.5578149945, 0.2813910457, -0.0405757452, 1.1122868033, -0.0717110581, -0.0763729367, -0.4214933324, 1.5869240198], LMS);
var _multiplyMatrices3 = multiplyMatrices([3.240969942, -1.537383178, -0.49861076, -0.969243636, 1.875967502, 0.041555057, 0.05563008, -0.203976959, 1.056971514], xyz),
_multiplyMatrices4 = _slicedToArray(_multiplyMatrices3, 3),
r = _multiplyMatrices4[0],
g = _multiplyMatrices4[1],
b2 = _multiplyMatrices4[2];
var _map = [r, g, b2].map(function (c) {
return Math.abs(c) > 0.0031308 ? (c < 0 ? -1 : 1) * (1.055 * Math.pow(Math.abs(c), 1 / 2.4) - 0.055) : 12.92 * c;
});
var _map2 = _slicedToArray(_map, 3);
r = _map2[0];
g = _map2[1];
b2 = _map2[2];
return new RGBColor(Math.round(clamp(r, 0, 1) * RGB_MAX), Math.round(clamp(g, 0, 1) * RGB_MAX), Math.round(clamp(b2, 0, 1) * RGB_MAX), Number(this.alpha.toFixed(2)));
}
}, {
key: "toJSON",
value: function toJSON() {
return {
L: this.L,
C: this.C,
H: this.H,
alpha: this.alpha
};
}
}, {
key: "clone",
value: function clone() {
return new OKLCHColor(this.L, this.C, this.H, this.alpha);
}
}, {
key: "toFormat",
value: function toFormat(format) {
switch (format) {
case 'oklcha':
return this;
case 'rgba':
return this.toRGB();
case 'hsla':
return this.toRGB().toFormat('hsla');
case 'hsba':
return this.toRGB().toFormat('hsba');
default:
throw new Error("Invalid format: ".concat(format));
}
}
}, {
key: "toString",
value: function toString(format) {
switch (format) {
case 'hex':
return this.toRGB().toString('hex');
case 'hexa':
return this.toRGB().toString('hexa');
case 'oklch':
{
var l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
var c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
var h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
return "oklch(".concat(l, "% ").concat(c, " ").concat(h, ")");
}
case 'oklcha':
case 'css':
{
var _l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
var _c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
var _h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
var a = Number.isNaN(this.alpha) ? 1 : Number(this.alpha.toFixed(2));
return "oklch(".concat(_l, "% ").concat(_c, " ").concat(_h, " / ").concat(a, ")");
}
case 'hsl':
return this.toRGB().toString('hsl');
case 'hsb':
return this.toRGB().toString('hsb');
case 'rgb':
return this.toRGB().toString('rgb');
default:
return this.toFormat(format).toString(format);
}
}
}, {
key: "getChannelRange",
value: function getChannelRange(channel) {
switch (channel) {
case 'L':
return {
min: 0,
max: 1,
step: 0.01
};
case 'C':
return {
min: 0,
max: 0.4,
step: 0.01
};
case 'H':
return {
min: 0,
max: 360,
step: 1
};
case 'alpha':
return {
min: 0,
max: 1,
step: 0.01
};
default:
return _superPropGet(OKLCHColor, "getChannelRange", this, 3)([channel]);
}
}
}, {
key: "getFormat",
value: function getFormat() {
return 'oklcha';
}
}, {
key: "getChannels",
value: function getChannels() {
return ['L', 'C', 'H'];
}
}], [{
key: "parse",
value: function parse(value) {
if (!value) return undefined;
var m = value.trim().match(OKLCH_REGEX);
if (!m) return;
var l = Number(m[1]) / 100;
var c = Number(m[2]);
var h = Number(m[3]);
var alpha = m[5] !== undefined ? Number(m[5]) : 1;
return new OKLCHColor(l, c, h, alpha);
}
}]);
}(Color);
var parseColor = function parseColor(color) {
var _ref4, _ref5, _ref6, _RGBColor$parse;
var parsedColor = (_ref4 = (_ref5 = (_ref6 = (_RGBColor$parse = RGBColor.parse(color)) !== null && _RGBColor$parse !== void 0 ? _RGBColor$parse : HSLColor.parse(color)) !== null && _ref6 !== void 0 ? _ref6 : HSBColor.parse(color)) !== null && _ref5 !== void 0 ? _ref5 : OKLCHColor.parse(color)) !== null && _ref4 !== void 0 ? _ref4 : undefined;
if (!parsedColor) {
throw new Error("Invalid color: ".concat(color));
}
return parsedColor;
};
function getChannelGradient(channel, value, orientation) {
var _value$getChannelRang = value.getChannelRange(channel),
min = _value$getChannelRang.min,
max = _value$getChannelRang.max;
var direction = orientation === 'horizontal' ? 'right' : 'bottom';
switch (channel) {
case 'hue':
case 'H':
return "linear-gradient(to ".concat(direction, ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)");
case 'lightness':
{
var start = value.withChannelValue(channel, min).toString('css');
var middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
var end = value.withChannelValue(channel, max).toString('css');
return "linear-gradient(to ".concat(direction, ", ").concat(start, ", ").concat(middle, ", ").concat(end, ")");
}
case 'L':
{
var _start = value.withChannelValue(channel, min).toString('css');
var _middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
var _end = value.withChannelValue(channel, max).toString('css');
return "linear-gradient(to ".concat(direction, ", ").concat(_start, ", ").concat(_middle, ", ").concat(_end, ")");
}
case 'red':
case 'green':
case 'blue':
case 'C':
case 'saturation':
case 'brightness':
case 'alpha':
{
var _start2 = value.withChannelValue(channel, min).toString('css');
var _end2 = value.withChannelValue(channel, max).toString('css');
return "linear-gradient(to ".concat(direction, ", ").concat(_start2, ", ").concat(_end2, ")");
}
default:
throw new Error("Unknown color channel: ".concat(channel));
}
}
function getChannelColor(color, channel) {
switch (channel) {
case 'hue':
return parseColor("hsl(".concat(color.getChannelValue('hue'), ", 100%, 50%)"));
case 'red':
case 'green':
case 'blue':
case 'L':
case 'C':
case 'H':
case 'lightness':
case 'brightness':
case 'saturation':
return color.withChannelValue('alpha', 1);
case 'alpha':
{
return color;
}
default:
return color.withChannelValue('alpha', 1);
}
}
var channelGenerators = {
hue: function hue(color) {
return [0, 60, 120, 180, 240, 300, 360].map(function (h) {
return color.withChannelValue('hue', h).toString('css');
}).join(', ');
},
saturation: function saturation(color) {
return "".concat(color.withChannelValue('saturation', 0).toString('css'), ", transparent");
},
lightness: function lightness() {
return 'black, transparent, white';
},
brightness: function brightness() {
return 'black, transparent';
}
};
function getAreaGradient(color, axes) {
var _color$getSpaceAxes = color.getSpaceAxes(axes),
xChannel = _color$getSpaceAxes.xChannel,
zChannel = _color$getSpaceAxes.zChannel;
var zValue = color.getChannelValue(zChannel);
var baseFormat = color.getFormat();
var format = baseFormat === 'rgba' || baseFormat === 'oklcha' ? 'hsba' : baseFormat;
var base = (format === 'hsla' ? parseColor('hsl(0, 100%, 50%)') : parseColor('hsb(0, 100%, 100%)')).withChannelValue(zChannel, zValue);
var channels = color.getChannels();
var direction = function direction(c) {
return c === xChannel ? 'right' : 'top';
};
var layers = channels.filter(function (c) {
return c !== zChannel;
}).map(function (c) {
return "linear-gradient(to ".concat(direction(c), ", ").concat(channelGenerators[c](base), ")");
}).reverse();
if (zChannel === 'hue') {
layers.push(base.toString('css'));
}
return {
'--px-area-gradient': layers.join(', ')
};
}
function getInputChannelValue(color, channel) {
var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'hsba';
var isHSL = color.getFormat() === 'hsla';
switch (channel) {
case 'hex':
{
if (color.getChannelValue('alpha') < color.getChannelRange('alpha').max) {
return color.toString('hexa');
}
return color.toString('hex');
}
case 'css':
return color.toFormat(format).toString('css');
case 'red':
case 'green':
case 'blue':
return color.toFormat('rgba').getChannelValue(channel).toString();
case 'hue':
return color.toFormat(isHSL ? 'hsla' : 'hsba').getChannelValue('hue').toString();
case 'saturation':
return color.toFormat(isHSL ? 'hsla' : 'hsba').getChannelValue('saturation').toString();
case 'lightness':
return color.toFormat('hsla').getChannelValue('lightness').toString();
case 'brightness':
return color.toFormat('hsba').getChannelValue('brightness').toString();
case 'C':
return color.toFormat('oklcha').getChannelValue('C').toString();
case 'H':
return color.toFormat('oklcha').getChannelValue('H').toString();
case 'L':
return color.toFormat('oklcha').getChannelValue('L').toString();
default:
return color.getChannelValue(channel).toString();
}
}
function getInputChannelRange(color) {
var channel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'hex';
switch (channel) {
case 'hex':
{
return {
min: parseColor('#000000').toHexInt(),
max: parseColor('#FFFFFF').toHexInt(),
step: 1
};
}
case 'css':
return undefined;
case 'red':
case 'green':
case 'blue':
return color.toFormat('rgba').getChannelRange(channel);
case 'hue':
case 'lightness':
case 'saturation':
return color.toFormat('hsla').getChannelRange(channel);
case 'brightness':
return color.toFormat('hsba').getChannelRange(channel);
case 'L':
case 'C':
case 'H':
return color.toFormat('oklcha').getChannelRange(channel);
default:
return color.getChannelRange(channel);
}
}
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var DEFAULT_COLOR = '#ff0000';
var script = {
name: 'InputColor',
"extends": script$1,
inheritAttrs: false,
emits: ['value-change-end'],
data: function data() {
return {
isAreaDragging: false,
parsedColor: parseColor(DEFAULT_COLOR).toFormat(this.getColorSpaceFormat(this.format))
};
},
watch: {
d_value: {
immediate: true,
handler: function handler(value) {
var _this$parsedColor;
var resolved = value !== null && value !== void 0 ? value : DEFAULT_COLOR;
if (((_this$parsedColor = this.parsedColor) === null || _this$parsedColor === void 0 ? void 0 : _this$parsedColor.toString(this.getOutputFormat())) === resolved) {
return;
}
var parsed;
try {
parsed = parseColor(resolved);
} catch (_unused) {
parsed = parseColor(DEFAULT_COLOR);
}
this.parsedColor = parsed.toFormat(this.getColorSpaceFormat(this.format));
}
},
format: function format(newFormat) {
var nextSpace = this.getColorSpaceFormat(newFormat);
if (this.parsedColor.getFormat() === nextSpace) return;
this.parsedColor = this.parsedColor.toFormat(nextSpace);
}
},
methods: {
getOutputFormat: function getOutputFormat() {
var _this$format;
return (_this$format = this.format) !== null && _this$format !== void 0 ? _this$format : 'hsba';
},
getColorSpaceFormat: function getColorSpaceFormat() {
var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.format;
switch (format) {
case 'hex':
case 'hexa':
case 'rgb':
case 'rgba':
return 'rgba';
case 'hsl':
case 'hsla':
return 'hsla';
case 'oklch':
case 'oklcha':
return 'oklcha';
case 'hsb':
case 'hsba':
default:
return 'hsba';
}
},
updateColor: function updateColor(nextColor, originalEvent) {
this.parsedColor = nextColor;
this.writeValue(nextColor.toString(this.getOutputFormat()), originalEvent);
},
emitValueChangeEnd: function emitValueChangeEnd(originalEvent) {
this.$emit('value-change-end', {
originalEvent: originalEvent,
value: this.parsedColor.toString(this.getOutputFormat()),
color: this.parsedColor
});
},
updateChannel: function updateChannel(channel, value, originalEvent) {
if (this.disabled) return false;
var next;
if (channel === 'hex' || channel === 'css') {
if (value == null || value === '') {
this.writeValue(null, originalEvent);
return true;
}
try {
next = parseColor(value);
} catch (_unused2) {
return false;
}
} else {
var numericValue = parseFloat(value);
if (Number.isNaN(numericValue)) return false;
var working = this.toChannelColorSpace(this.getChannelColorValue(channel), channel);
next = working.withChannelValue(channel, numericValue);
}
this.updateColor(next, originalEvent);
return true;
},
toChannelColorSpace: function toChannelColorSpace(color, channel) {
if (channel === 'alpha' || color.getChannels().includes(channel)) {
return color;
}
switch (channel) {
case 'hue':
case 'saturation':
case 'brightness':
return color.toFormat('hsba');
case 'lightness':
return color.toFormat('hsla');
case 'red':
case 'green':
case 'blue':
return color.toFormat('rgba');
case 'L':
case 'C':
case 'H':
return color.toFormat('oklcha');
default:
return color;
}
},
getChannelColorValue: function getChannelColorValue(channel) {
if (channel === 'alpha') return this.parsedColor;
if (this.parsedColor.getChannels().includes(channel)) return this.parsedColor;
if (this.areaColor.getChannels().includes(channel)) return this.areaColor;
return this.toChannelColorSpace(this.parsedColor, channel);
},
updateAreaValue: function updateAreaValue(x, y, element, event) {
if (!element || this.disabled) return;
var rect = element.getBoundingClientRect();
var nx = clamp((x - rect.left) / rect.width, 0, 1);
var ny = clamp((y - rect.top) / rect.height, 0, 1);
var _this$areaAxes = this.areaAxes,
xChannel = _this$areaAxes.xChannel,
yChannel = _this$areaAxes.yChannel;
var xRange = this.areaColor.getChannelRange(xChannel);
var yRange = this.areaColor.getChannelRange(yChannel);
var xValue = nx * (xRange.max - xRange.min) + xRange.min;
var yValue = (1 - ny) * (yRange.max - yRange.min) + yRange.min;
var next = this.areaColor.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
this.updateColor(next, event);
},
onAreaPointerDown: function onAreaPointerDown(event) {
var _event$currentTarget$, _event$currentTarget;
if (event.button !== 0 || this.disabled) return;
(_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
this.isAreaDragging = true;
this.updateAreaValue(event.clientX, event.clientY, event.currentTarget, event);
},
onAreaPointerMove: function onAreaPointerMove(event) {
if (!this.isAreaDragging) return;
this.updateAreaValue(event.clientX, event.clientY, event.currentTarget, event);
},
onAreaPointerUp: function onAreaPointerUp(event) {
var _event$currentTarget$2, _event$currentTarget2;
if (!this.isAreaDragging) return;
(_event$currentTarget$2 = (_event$currentTarget2 = event.currentTarget).releasePointerCapture) === null || _event$currentTarget$2 === void 0 || _event$currentTarget$2.call(_event$currentTarget2, event.pointerId);
this.isAreaDragging = false;
this.emitValueChangeEnd(event);
},
onAreaBlur: function onAreaBlur(event) {
this.emitValueChangeEnd(event);
},
onAreaKeyDown: function onAreaKeyDown(event) {
if (this.disabled) return;
var _this$areaAxes2 = this.areaAxes,
xChannel = _this$areaAxes2.xChannel,
yChannel = _this$areaAxes2.yChannel;
var xStep = this.areaColor.getChannelRange(xChannel).step;
var yStep = this.areaColor.getChannelRange(yChannel).step;
var next = this.areaColor;
switch (event.key) {
case 'ArrowRight':
next = next.incChannelValue(xChannel, xStep);
break;
case 'ArrowLeft':
next = next.decChannelValue(xChannel, xStep);
break;
case 'ArrowUp':
next = next.incChannelValue(yChannel, yStep);
break;
case 'ArrowDown':
next = next.decChannelValue(yChannel, yStep);
break;
default:
return;
}
event.preventDefault();
this.updateColor(next, event);
this.emitValueChangeEnd(event);
},
getInputChannelValue: function getInputChannelValue$1(channel) {
return getInputChannelValue(this.parsedColor, channel, this.getColorSpaceFormat(this.format));
},
getInputChannelRange: function getInputChannelRange$1(channel) {
return getInputChannelRange(this.parsedColor, channel);
},
getChannelGradient: function getChannelGradient$1(channel, orientation) {
return getChannelGradient(channel, this.getChannelColorValue(channel), orientation);
},
getChannelColor: function getChannelColor$1(channel) {
return getChannelColor(this.getChannelColorValue(channel), channel);
},
openEyeDropper: function openEyeDropper(event) {
var _this = this;
if (this.disabled || typeof window === 'undefined' || !window.EyeDropper) return;
var eyeDropper = new window.EyeDropper();
eyeDropper.open().then(function (result) {
_this.updateColor(parseColor(result.sRGBHex), event);
_this.emitValueChangeEnd(event);
})["catch"](function () {
/* user cancelled */
});
}
},
computed: {
areaColorSpace: function areaColorSpace() {
var _this$format2;
return ((_this$format2 = this.format) !== null && _this$format2 !== void 0 ? _this$format2 : 'hsba').startsWith('hsl') ? 'hsla' : 'hsba';
},
areaColor: function areaColor() {
return this.parsedColor.toFormat(this.areaColorSpace);
},
areaAxes: function areaAxes() {
var channels = this.areaColor.getChannels();
return {
xChannel: channels[1],
yChannel: channels[2]
};
},
areaStyles: function areaStyles() {
var _this$areaAxes3 = this.areaAxes,
xChannel = _this$areaAxes3.xChannel,
yChannel = _this$areaAxes3.yChannel;
var xRange = this.areaColor.getChannelRange(xChannel);
var yRange = this.areaColor.getChannelRange(yChannel);
var xValue = this.areaColor.getChannelValue(xChannel);
var yValue = this.areaColor.getChannelValue(yChannel);
var base = getAreaGradient(this.areaColor, this.areaAxes);
return _objectSpread(_objectSpread({}, base), {}, {
'--px-handle-background': this.areaColor.withChannelValue('alpha', 1).toString('css'),
'--px-handle-position-left': "".concat((xValue - xRange.min) / (xRange.max - xRange.min) * 100, "%"),
'--px-handle-position-top': "".concat((1 - (yValue - yRange.min) / (yRange.max - yRange.min)) * 100, "%")
});
},
swatchStyles: function swatchStyles() {
if (!this.hasValue) return {};
return {
'--px-swatch-background': this.parsedColor.toString('css')
};
},
hasValue: function hasValue() {
return this.d_value != null;
}
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return renderSlot(_ctx.$slots, "default");
}
script.render = render;
export { script as default };