Socket
Socket
Sign inDemoInstall

color-gradient-picker-vue3

Package Overview
Dependencies
0
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.3 to 1.1.0

2255

dist/color-gradient-picker-vue3.es.js

@@ -1,131 +0,270 @@

var re = Object.defineProperty, le = Object.defineProperties;
var ie = Object.getOwnPropertyDescriptors;
var O = Object.getOwnPropertySymbols;
var se = Object.prototype.hasOwnProperty, ue = Object.prototype.propertyIsEnumerable;
var U = (n, t, e) => t in n ? re(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e, b = (n, t) => {
for (var e in t || (t = {}))
se.call(t, e) && U(n, e, t[e]);
if (O)
for (var e of O(t))
ue.call(t, e) && U(n, e, t[e]);
return n;
}, y = (n, t) => le(n, ie(t));
import { defineComponent as f, ref as L, reactive as E, computed as _, onMounted as N, openBlock as C, createElementBlock as x, normalizeStyle as H, unref as S, createElementVNode as v, normalizeClass as F, withModifiers as ce, Fragment as Y, renderList as de, createBlock as A, createVNode as k, createCommentVNode as J, withDirectives as ge, isRef as pe, vModelText as he, toDisplayString as K, watch as T, getCurrentInstance as fe, onBeforeUnmount as ve } from "vue";
function V({
red: n,
green: t,
blue: e,
alpha: o
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, reactive, computed, onMounted, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, normalizeClass, withModifiers, Fragment, renderList, createBlock, createVNode, createCommentVNode, withDirectives, isRef, vModelText, toDisplayString, watch, getCurrentInstance, inject, onBeforeUnmount, provide } from "vue";
function rgbToHSv({
red,
green,
blue,
alpha
}) {
let l, s, a, r = 0, g;
const d = n / 255, u = t / 255, c = e / 255, i = Math.max(d, u, c), p = i - Math.min(d, u, c), h = (m) => (i - m) / 6 / p + 1 / 2;
return p === 0 ? (r = 0, g = 0) : (g = p / i, l = h(d), s = h(u), a = h(c), d === i ? r = a - s : u === i ? r = 1 / 3 + l - a : c === i && (r = 2 / 3 + s - l), r < 0 ? r += 1 : r > 1 && (r -= 1)), {
hue: Math.round(r * 360),
saturation: Math.round(g * 100),
value: Math.round(i * 100)
let rr;
let gg;
let bb;
let h = 0;
let s;
const rabs = red / 255;
const gabs = green / 255;
const babs = blue / 255;
const v = Math.max(rabs, gabs, babs);
const diff = v - Math.min(rabs, gabs, babs);
const diffc = (c) => (v - c) / 6 / diff + 1 / 2;
if (diff === 0) {
h = 0;
s = 0;
} else {
s = diff / v;
rr = diffc(rabs);
gg = diffc(gabs);
bb = diffc(babs);
if (rabs === v) {
h = bb - gg;
} else if (gabs === v) {
h = 1 / 3 + rr - bb;
} else if (babs === v) {
h = 2 / 3 + gg - rr;
}
if (h < 0) {
h += 1;
} else if (h > 1) {
h -= 1;
}
}
return {
hue: Math.round(h * 360),
saturation: Math.round(s * 100),
value: Math.round(v * 100)
};
}
function me(n) {
let t = 1;
const e = n / 60;
let o = t * (1 - Math.abs(e % 2 - 1));
const l = 0, s = 255;
let a = 0, r = 0, g = 0;
return t = (t + l) * s | 0, o = (o + l) * s | 0, e >= 0 && e < 1 && (a = t | 0, r = o | 0, g = l | 0), e >= 1 && e < 2 && (a = o | 0, r = t | 0, g = l | 0), e >= 2 && e < 3 && (a = l | 0, r = t | 0, g = o | 0), e >= 3 && e < 4 && (a = l | 0, r = o | 0, g = t | 0), e >= 4 && e < 5 && (a = o | 0, r = l | 0, g = t | 0), e >= 5 && e <= 6 && (a = t | 0, r = l | 0, g = o | 0), {
red: a,
green: r,
blue: g
function getRgbByHue(hue) {
let C = 1;
const H = hue / 60;
let X = C * (1 - Math.abs(H % 2 - 1));
const m = 0;
const precision = 255;
let r = 0;
let g = 0;
let b = 0;
C = (C + m) * precision | 0;
X = (X + m) * precision | 0;
if (H >= 0 && H < 1) {
r = C | 0;
g = X | 0;
b = m | 0;
}
if (H >= 1 && H < 2) {
r = X | 0;
g = C | 0;
b = m | 0;
}
if (H >= 2 && H < 3) {
r = m | 0;
g = C | 0;
b = X | 0;
}
if (H >= 3 && H < 4) {
r = m | 0;
g = X | 0;
b = C | 0;
}
if (H >= 4 && H < 5) {
r = X | 0;
g = m | 0;
b = C | 0;
}
if (H >= 5 && H <= 6) {
r = C | 0;
g = m | 0;
b = X | 0;
}
return {
red: r,
green: g,
blue: b
};
}
function M(n) {
return typeof n == "number" && Number.isNaN(n) === !1 && n >= 0 && n <= 255;
function isValidRGBValue(value) {
return typeof value === "number" && Number.isNaN(value) === false && value >= 0 && value <= 255;
}
function R(n, t, e, o) {
if (M(n) && M(t) && M(e)) {
const l = {
red: n | 0,
green: t | 0,
blue: e | 0,
alpha: o | 0
function setRGBA(red, green, blue, alpha) {
if (isValidRGBValue(red) && isValidRGBValue(green) && isValidRGBValue(blue)) {
const color = {
red: red | 0,
green: green | 0,
blue: blue | 0,
alpha: alpha | 0
};
return M(o) === !0 && (l.alpha = o | 0), l;
if (isValidRGBValue(alpha) === true) {
color.alpha = alpha | 0;
}
return color;
}
}
function Q(n, t, e) {
e /= 100;
let l = t / 100 * e;
const s = n / 60;
let a = l * (1 - Math.abs(s % 2 - 1)), r = e - l;
const g = 255, d = 0;
return l = (l + r) * g | 0, a = (a + r) * g | 0, r = r * g | 0, s >= 1 && s < 2 ? R(a, l, r, d) : s >= 2 && s < 3 ? R(r, l, a, d) : s >= 3 && s < 4 ? R(r, a, l, d) : s >= 4 && s < 5 ? R(a, r, l, d) : s >= 5 && s <= 6 ? R(l, r, a, d) : R(l, a, r, d);
function hsvToRgb(hue, saturation, value) {
value /= 100;
const sat = saturation / 100;
let C = sat * value;
const H = hue / 60;
let X = C * (1 - Math.abs(H % 2 - 1));
let m = value - C;
const precision = 255;
const defaultAlpha = 1;
C = (C + m) * precision | 0;
X = (X + m) * precision | 0;
m = m * precision | 0;
if (H >= 1 && H < 2) {
return setRGBA(X, C, m, defaultAlpha);
}
if (H >= 2 && H < 3) {
return setRGBA(m, C, X, defaultAlpha);
}
if (H >= 3 && H < 4) {
return setRGBA(m, X, C, defaultAlpha);
}
if (H >= 4 && H < 5) {
return setRGBA(X, m, C, defaultAlpha);
}
if (H >= 5 && H <= 6) {
return setRGBA(C, m, X, defaultAlpha);
}
return setRGBA(C, X, m, defaultAlpha);
}
function j(n, t, e, o, l) {
n > o && (n = o), t > e && (t = e), n < 0 && (n = 0), t < 0 && (t = 0);
const s = 100 - t * 100 / e | 0, a = n * 100 / o | 0;
return y(b({}, Q(l, a, s)), {
saturation: a,
value: s
function changePicker(x, y, height, width, hue) {
if (x > width)
x = width;
if (y > height)
y = height;
if (x < 0)
x = 0;
if (y < 0)
y = 0;
const value = 100 - y * 100 / height | 0;
const saturation = x * 100 / width | 0;
return __spreadProps(__spreadValues({}, hsvToRgb(hue, saturation, value)), {
saturation,
value
});
}
function W(n, t, e, o) {
let l = 360 * n / t | 0;
return l = l < 0 ? 0 : l > 360 ? 360 : l, y(b({}, Q(l, e, o)), {
hue: l
function getHue(offsetX, width, saturation, value) {
let hue = 360 * offsetX / width | 0;
hue = hue < 0 ? 0 : hue > 360 ? 360 : hue;
return __spreadProps(__spreadValues({}, hsvToRgb(hue, saturation, value)), {
hue
});
}
function z(n, t) {
return n = Number((n / t).toFixed(2)), n > 1 ? 1 : n < 0 ? 0 : n;
function getAlpha(value, width) {
value = Number((value / width).toFixed(2));
return value > 1 ? 1 : value < 0 ? 0 : value;
}
function q(n, t, e) {
let o = n.toString(16), l = t.toString(16), s = e.toString(16);
return n < 16 && (o = `0${o}`), t < 16 && (l = `0${l}`), e < 16 && (s = `0${s}`), o + l + s;
function rgbToHex(red, green, blue) {
let r16 = red.toString(16);
let g16 = green.toString(16);
let b16 = blue.toString(16);
if (red < 16)
r16 = `0${r16}`;
if (green < 16)
g16 = `0${g16}`;
if (blue < 16)
b16 = `0${b16}`;
return r16 + g16 + b16;
}
const be = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;
function ye(n) {
if (be.test(n)) {
if (n[0] === "#" && (n = n.slice(1, n.length)), n.length < 6)
const hexRegexp = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;
function hexToRgb(value) {
const valid = hexRegexp.test(value);
if (valid) {
if (value[0] === "#")
value = value.slice(1, value.length);
if (value.length < 6)
return;
const e = parseInt(n.substring(0, 2), 16) || 0, o = parseInt(n.substring(2, 4), 16) || 0, l = parseInt(n.substring(4, 6), 16) || 0, s = parseInt(n.substring(6, 10), 16) / 255 || 0, a = R(e, o, l, s), r = a && V(b({}, a));
return b(b({}, a), r);
const red = parseInt(value.substring(0, 2), 16) || 0;
const green = parseInt(value.substring(2, 4), 16) || 0;
const blue = parseInt(value.substring(4, 6), 16) || 0;
const alpha = parseInt(value.substring(6, 10), 16) / 255 || 0;
const color = setRGBA(red, green, blue, alpha);
const hsv = color && rgbToHSv(__spreadValues({}, color));
return __spreadValues(__spreadValues({}, color), hsv);
}
return !1;
return false;
}
function Z(n, t) {
const e = n * 100 / t;
return e < 0 ? 0 : e > 100 ? 100 : e;
function updateGradientActivePercent(offsetX, width) {
const leftPercent = offsetX * 100 / width;
return leftPercent < 0 ? 0 : leftPercent > 100 ? 100 : leftPercent;
}
function Ce(n, t, e, o) {
return Math.atan2(n - e, t - o) * (180 / Math.PI) * -1 + 180;
function calculateDegree(x, y, centerX, centerY) {
const radians = Math.atan2(x - centerX, y - centerY);
return radians * (180 / Math.PI) * -1 + 180;
}
function $(n, t) {
return !n && n !== 0 ? t : n;
function getRightValue(newValue, oldValue) {
return !newValue && newValue !== 0 ? oldValue : newValue;
}
function ee(n, t, e, o) {
return `rgba(${n}, ${t}, ${e}, ${o})`;
function generateSolidStyle(red, green, blue, alpha) {
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
function I(n, t, e) {
let o = "";
const l = n.slice();
return l.sort((s, a) => s.left - a.left), t === "linear" ? o = `linear-gradient(${e}deg,` : o = "radial-gradient(", l.forEach((s, a) => {
o += `rgba(${s.red}, ${s.green}, ${s.blue}, ${s.alpha}) ${s.left}%`, a !== l.length - 1 && (o += ",");
}), o += ")", o;
function generateGradientStyle(points, type, degree) {
let style = "";
const sortedPoints = points.slice();
sortedPoints.sort((a, b) => a.left - b.left);
if (type === "linear") {
style = `linear-gradient(${degree}deg,`;
} else {
style = "radial-gradient(";
}
sortedPoints.forEach((point, index2) => {
style += `rgba(${point.red}, ${point.green}, ${point.blue}, ${point.alpha}) ${point.left}%`;
if (index2 !== sortedPoints.length - 1) {
style += ",";
}
});
style += ")";
return style;
}
function D(n, t, e) {
return function(l) {
let s = n(l);
function a(r) {
s = t(r, s) || s;
function useMouseEvents(mouseDownHandler, mouseMoveHandler, mouseUpHandler) {
return function mouseEventsHandler(event) {
let positions = mouseDownHandler(event);
function onMouseMove(event2) {
positions = mouseMoveHandler(event2, positions) || positions;
}
window.addEventListener("mousemove", a), window.addEventListener(
window.addEventListener("mousemove", onMouseMove);
window.addEventListener(
"mouseup",
(r) => {
window.removeEventListener("mousemove", a), e && e(r, s);
(event2) => {
window.removeEventListener("mousemove", onMouseMove);
mouseUpHandler && mouseUpHandler(event2, positions);
},
{ once: !0 }
{ once: true }
);
};
}
const _e = { class: "picking-area-overlay1" }, xe = { class: "picking-area-overlay2" }, Pe = f({
const _hoisted_1$7 = { class: "picking-area-overlay1" };
const _hoisted_2$5 = { class: "picking-area-overlay2" };
const __default__$f = defineComponent({
name: "Picker"
}), $e = /* @__PURE__ */ f(y(b({}, Pe), {
});
const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$f), {
props: {

@@ -141,101 +280,133 @@ red: Number,

},
setup(n) {
const t = n, e = L(null), o = E({
setup(__props) {
const props = __props;
const pickerAreaRef = ref(null);
const state = reactive({
width: 0,
height: 0,
mouseEvents: () => !1
}), l = _(
() => (t.saturation * o.width / 100 | 0) - 6
), s = _(
() => (o.height - t.value * o.height / 100 | 0) - 6
), a = _(() => ({
backgroundColor: `rgb(${t.red}, ${t.green}, ${t.blue})`,
left: `${l.value}px`,
top: `${s.value}px`
})), r = _(() => {
const { red: i, green: p, blue: h } = me(t.hue);
return { backgroundColor: `rgb(${i}, ${p}, ${h})` };
}), g = (i) => {
const p = e == null ? void 0 : e.value;
if (!p)
mouseEvents: () => false
});
const offsetLeft = computed(
() => (props.saturation * state.width / 100 | 0) - 6
);
const offsetTop = computed(
() => (state.height - props.value * state.height / 100 | 0) - 6
);
const pointerStyle = computed(() => {
return {
backgroundColor: `rgb(${props.red}, ${props.green}, ${props.blue})`,
left: `${offsetLeft.value}px`,
top: `${offsetTop.value}px`
};
});
const pickerStyle = computed(() => {
const { red, green, blue } = getRgbByHue(props.hue);
return { backgroundColor: `rgb(${red}, ${green}, ${blue})` };
});
const mouseDownHandler = (event) => {
const _pickerAreaRef = pickerAreaRef == null ? void 0 : pickerAreaRef.value;
if (!_pickerAreaRef)
return;
const { x: h, y: m } = p.getBoundingClientRect(), P = i.pageX, G = i.pageY, w = P - h, B = G - m, ae = j(
w,
B,
o.height,
o.width,
t.hue
const { x: elementX, y: elementY } = _pickerAreaRef.getBoundingClientRect();
const startX = event.pageX;
const startY = event.pageY;
const positionX = startX - elementX;
const positionY = startY - elementY;
const color = changePicker(
positionX,
positionY,
state.height,
state.width,
props.hue
);
return t.updateColor(ae, "onStartChange"), {
startX: P,
startY: G,
positionX: w,
positionY: B
props.updateColor(color, "onStartChange");
return {
startX,
startY,
positionX,
positionY
};
}, d = (i, { startX: p, startY: h, positionX: m, positionY: P }) => {
const G = i.pageX - p, w = i.pageY - h;
m += G, P += w;
const B = j(
m,
P,
o.height,
o.width,
t.hue
};
const changeObjectPositions = (event, { startX, startY, positionX, positionY }) => {
const moveX = event.pageX - startX;
const moveY = event.pageY - startY;
positionX += moveX;
positionY += moveY;
const color = changePicker(
positionX,
positionY,
state.height,
state.width,
props.hue
);
return {
positions: {
positionX: m,
positionY: P,
startX: i.pageX,
startY: i.pageY
positionX,
positionY,
startX: event.pageX,
startY: event.pageY
},
color: B
color
};
}, u = (i, { startX: p, startY: h, positionX: m, positionY: P }) => {
const { positions: G, color: w } = d(i, {
startX: p,
startY: h,
positionX: m,
positionY: P
};
const mouseMoveHandler = (event, { startX, startY, positionX, positionY }) => {
const { positions, color } = changeObjectPositions(event, {
startX,
startY,
positionX,
positionY
});
return t.updateColor(w, "onChange"), G;
}, c = (i, { startX: p, startY: h, positionX: m, positionY: P }) => {
const { positions: G, color: w } = d(i, {
startX: p,
startY: h,
positionX: m,
positionY: P
props.updateColor(color, "onChange");
return positions;
};
const mouseUpHandler = (event, { startX, startY, positionX, positionY }) => {
const { positions, color } = changeObjectPositions(event, {
startX,
startY,
positionX,
positionY
});
return t.updateColor(w, "onEndChange"), G;
props.updateColor(color, "onEndChange");
return positions;
};
return N(() => {
const i = e == null ? void 0 : e.value;
i && (o.width = i.clientWidth, o.height = i.clientHeight), o.mouseEvents = D(
g,
u,
c
onMounted(() => {
const _pickerAreaRef = pickerAreaRef == null ? void 0 : pickerAreaRef.value;
if (_pickerAreaRef) {
state.width = _pickerAreaRef.clientWidth;
state.height = _pickerAreaRef.clientHeight;
}
state.mouseEvents = useMouseEvents(
mouseDownHandler,
mouseMoveHandler,
mouseUpHandler
);
}), (i, p) => (C(), x("div", {
ref_key: "pickerAreaRef",
ref: e,
class: "picking-area",
style: H(S(r)),
onMousedown: p[0] || (p[0] = //@ts-ignore
(...h) => o.mouseEvents && o.mouseEvents(...h))
}, [
v("div", _e, [
v("div", xe, [
v("div", {
class: "picker-pointer",
style: H(S(a))
}, null, 4)
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "pickerAreaRef",
ref: pickerAreaRef,
class: "picking-area",
style: normalizeStyle(unref(pickerStyle)),
onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => state.mouseEvents && state.mouseEvents(...args))
}, [
createElementVNode("div", _hoisted_1$7, [
createElementVNode("div", _hoisted_2$5, [
createElementVNode("div", {
class: "picker-pointer",
style: normalizeStyle(unref(pointerStyle))
}, null, 4)
])
])
])
], 36));
], 36);
};
}
})), ke = { class: "preview-area" }, we = f({
}));
const _hoisted_1$6 = { class: "preview-area" };
const __default__$e = defineComponent({
name: "PickerPreView"
}), Ge = /* @__PURE__ */ f(y(b({}, we), {
});
const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$e), {
props: {
isGradient: { type: Boolean, default: !1 },
isGradient: { type: Boolean, default: false },
red: { default: 255 },

@@ -264,21 +435,31 @@ green: { default: 0 },

},
setup(n) {
const t = n, e = _(() => {
let o = "";
return t.isGradient ? (o = I(
t.points,
t.gradientType,
t.gradientDegree
), { background: o }) : (o = ee(t.red, t.green, t.blue, t.alpha), { backgroundColor: o });
setup(__props) {
const props = __props;
const style = computed(() => {
let style2 = "";
if (props.isGradient) {
style2 = generateGradientStyle(
props.points,
props.gradientType,
props.gradientDegree
);
return { background: style2 };
}
style2 = generateSolidStyle(props.red, props.green, props.blue, props.alpha);
return { backgroundColor: style2 };
});
return (o, l) => (C(), x("div", ke, [
v("div", {
class: "preview-box",
style: H(S(e))
}, null, 4)
]));
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1$6, [
createElementVNode("div", {
class: "preview-box",
style: normalizeStyle(unref(style))
}, null, 4)
]);
};
}
})), Se = f({
}));
const __default__$d = defineComponent({
name: "Hue"
}), Ee = /* @__PURE__ */ f(y(b({}, Se), {
});
const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$d), {
props: {

@@ -290,64 +471,88 @@ hue: Number,

},
setup(n) {
const t = n, e = L(null), o = E({
setup(__props) {
const props = __props;
const hueRef = ref(null);
const state = reactive({
width: 0,
mouseEvents: () => !1
}), l = _(() => (t.hue * o.width / 360 | 0) - 6), s = _(() => ({
left: `${l.value}px`
})), a = (u) => {
const c = u.currentTarget.getBoundingClientRect().x, i = u.pageX, p = i - c, h = W(p, o.width, t.saturation, t.value);
return t.updateColor(h, "onStartChange"), {
startX: i,
positionX: p
mouseEvents: () => false
});
const offsetLeft = computed(() => (props.hue * state.width / 360 | 0) - 6);
const pointerStyle = computed(() => {
return {
left: `${offsetLeft.value}px`
};
}, r = (u, { startX: c, positionX: i }) => {
const p = u.pageX - c;
i += p;
const h = i > o.width ? o.width : i <= 0 ? 0 : i, m = W(h, o.width, t.saturation, t.value);
});
const mouseDownHandler = (event) => {
const elementX = event.currentTarget.getBoundingClientRect().x;
const startX = event.pageX;
const positionX = startX - elementX;
const color = getHue(positionX, state.width, props.saturation, props.value);
props.updateColor(color, "onStartChange");
return {
startX,
positionX
};
};
const changeObjectPositions = (event, { startX, positionX }) => {
const moveX = event.pageX - startX;
positionX += moveX;
const offsetX = positionX > state.width ? state.width : positionX <= 0 ? 0 : positionX;
const color = getHue(offsetX, state.width, props.saturation, props.value);
return {
positions: {
positionX: i,
startX: u.pageX
positionX,
startX: event.pageX
},
color: m
color
};
}, g = (u, { startX: c, positionX: i }) => {
const { positions: p, color: h } = r(u, {
startX: c,
positionX: i
};
const mouseMoveHandler = (event, { startX, positionX }) => {
const { positions, color } = changeObjectPositions(event, {
startX,
positionX
});
return t.updateColor(h, "onChange"), p;
}, d = (u, { startX: c, positionX: i }) => {
const { positions: p, color: h } = r(u, {
startX: c,
positionX: i
props.updateColor(color, "onChange");
return positions;
};
const mouseUpHandler = (event, { startX, positionX }) => {
const { positions, color } = changeObjectPositions(event, {
startX,
positionX
});
return t.updateColor(h, "onEndChange"), p;
props.updateColor(color, "onEndChange");
return positions;
};
return N(() => {
e.value && (o.width = e.value.clientWidth), o.mouseEvents = D(
a,
g,
d
onMounted(() => {
hueRef.value && (state.width = hueRef.value.clientWidth);
state.mouseEvents = useMouseEvents(
mouseDownHandler,
mouseMoveHandler,
mouseUpHandler
);
}), (u, c) => (C(), x("div", {
class: "hue",
onMousedown: c[0] || (c[0] = //@ts-ignore
(...i) => o.mouseEvents && o.mouseEvents(...i))
}, [
v("div", {
ref_key: "hueRef",
ref: e,
class: "hue-area"
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "hue",
onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => state.mouseEvents && state.mouseEvents(...args))
}, [
v("div", {
class: "picker-pointer",
style: H(S(s))
}, null, 4)
], 512)
], 32));
createElementVNode("div", {
ref_key: "hueRef",
ref: hueRef,
class: "hue-area"
}, [
createElementVNode("div", {
class: "picker-pointer",
style: normalizeStyle(unref(pointerStyle))
}, null, 4)
], 512)
], 32);
};
}
})), He = { class: "alpha-area" }, Ne = f({
}));
const _hoisted_1$5 = { class: "alpha-area" };
const __default__$c = defineComponent({
name: "alpha"
}), Be = /* @__PURE__ */ f(y(b({}, Ne), {
});
const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$c), {
props: {

@@ -360,74 +565,102 @@ red: Number,

},
setup(n) {
const t = n, e = L(null), o = E({
setup(__props) {
const props = __props;
const alphaMaskRef = ref(null);
const state = reactive({
width: 0,
mouseEvents: () => !1
}), l = _(() => (t.alpha * o.width | 0) - 6), s = _(() => ({ left: `${l.value}px` })), a = _(() => ({
background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${t.red}, ${t.green}, ${t.blue}))`
})), r = (c) => {
const i = c.currentTarget.getBoundingClientRect().x, p = c.pageX, h = p - i;
return t.updateColor(
{ alpha: z(h, o.width) },
mouseEvents: () => false
});
const offsetLeft = computed(() => {
return (props.alpha * state.width | 0) - 6;
});
const pointerStyle = computed(() => {
return { left: `${offsetLeft.value}px` };
});
const style = computed(() => {
return {
background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${props.red}, ${props.green}, ${props.blue}))`
};
});
const mouseDownHandler = (event) => {
const elementX = event.currentTarget.getBoundingClientRect().x;
const startX = event.pageX;
const positionX = startX - elementX;
props.updateColor(
{ alpha: getAlpha(positionX, state.width) },
"onStartChange"
), {
startX: p,
positionX: h
);
return {
startX,
positionX
};
}, g = (c, { startX: i, positionX: p }) => {
const h = c.pageX - i;
p += h;
const m = z(p, o.width);
};
const changeObjectPositions = (event, { startX, positionX }) => {
const moveX = event.pageX - startX;
positionX += moveX;
const alpha = getAlpha(positionX, state.width);
return {
positions: {
positionX: p,
startX: c.pageX
positionX,
startX: event.pageX
},
alpha: m
alpha
};
}, d = (c, { startX: i, positionX: p }) => {
const { positions: h, alpha: m } = g(c, {
startX: i,
positionX: p
};
const mouseMoveHandler = (event, { startX, positionX }) => {
const { positions, alpha } = changeObjectPositions(event, {
startX,
positionX
});
return t.updateColor({ alpha: m }, "onChange"), h;
}, u = (c, { startX: i, positionX: p }) => {
const { positions: h, alpha: m } = g(c, {
startX: i,
positionX: p
props.updateColor({ alpha }, "onChange");
return positions;
};
const mouseUpHandler = (event, { startX, positionX }) => {
const { positions, alpha } = changeObjectPositions(event, {
startX,
positionX
});
return t.updateColor({ alpha: m }, "onEndChange"), h;
props.updateColor({ alpha }, "onEndChange");
return positions;
};
return N(() => {
const c = e.value;
c && (o.width = c.clientWidth), o.mouseEvents = D(
r,
d,
u
onMounted(() => {
const _alphaMaskRef = alphaMaskRef.value;
if (_alphaMaskRef) {
state.width = _alphaMaskRef.clientWidth;
}
state.mouseEvents = useMouseEvents(
mouseDownHandler,
mouseMoveHandler,
mouseUpHandler
);
}), (c, i) => (C(), x("div", {
class: "alpha",
onMousedown: i[0] || (i[0] = //@ts-ignore
(...p) => o.mouseEvents && o.mouseEvents(...p))
}, [
v("div", {
class: "gradient",
style: H(S(a))
}, null, 4),
v("div", He, [
v("div", {
ref_key: "alphaMaskRef",
ref: e,
class: "alpha-mask"
}, [
v("div", {
class: "picker-pointer",
style: H(S(s))
}, null, 4)
], 512)
])
], 32));
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "alpha",
onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => state.mouseEvents && state.mouseEvents(...args))
}, [
createElementVNode("div", {
class: "gradient",
style: normalizeStyle(unref(style))
}, null, 4),
createElementVNode("div", _hoisted_1$5, [
createElementVNode("div", {
ref_key: "alphaMaskRef",
ref: alphaMaskRef,
class: "alpha-mask"
}, [
createElementVNode("div", {
class: "picker-pointer",
style: normalizeStyle(unref(pointerStyle))
}, null, 4)
], 512)
])
], 32);
};
}
})), Re = f({
}));
const __default__$b = defineComponent({
name: "GradientPoint"
}), Ie = /* @__PURE__ */ f(y(b({}, Re), {
});
const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$b), {
props: {

@@ -443,62 +676,81 @@ point: Object,

},
setup(n) {
const t = n, e = E({
mouseEvents: () => !1
}), o = _(
() => t.activePointIndex === t.index ? " active" : ""
), l = _(() => ({ left: `${t.point.left * (t.width / 100) - 6}px` })), s = (d) => {
t.changeActivePointIndex(t.index);
const u = d.pageX, c = d.pageY, i = u - t.positions.x;
return t.updateGradientLeft(t.point.left, t.index, "onStartChange"), {
startX: u,
startY: c,
offsetX: i
setup(__props) {
const props = __props;
const state = reactive({
mouseEvents: () => false
});
const activeClassName = computed(
() => props.activePointIndex === props.index ? " active" : ""
);
const pointStyle = computed(() => {
return { left: `${props.point.left * (props.width / 100) - 6}px` };
});
const mouseDownHandler = (event) => {
props.changeActivePointIndex(props.index);
const startX = event.pageX;
const startY = event.pageY;
const offsetX = startX - props.positions.x;
props.updateGradientLeft(props.point.left, props.index, "onStartChange");
return {
startX,
startY,
offsetX
};
}, a = (d, { startX: u, offsetX: c }) => {
const i = d.pageX - u;
c += i;
const p = Z(c, t.width);
};
const changeObjectPositions = (event, { startX, offsetX }) => {
const moveX = event.pageX - startX;
offsetX += moveX;
const left = updateGradientActivePercent(offsetX, props.width);
return {
positions: {
offsetX: c,
startX: d.pageX
offsetX,
startX: event.pageX
},
left: p
left
};
}, r = (d, { startX: u, offsetX: c }) => {
const { positions: i, left: p } = a(d, {
startX: u,
offsetX: c
};
const mouseMoveHandler = (event, { startX, offsetX }) => {
const { positions, left } = changeObjectPositions(event, {
startX,
offsetX
});
return t.updateGradientLeft(p, t.index, "onChange"), i;
}, g = (d, { startX: u, offsetX: c }) => {
const { positions: i, left: p } = a(d, {
startX: u,
offsetX: c
props.updateGradientLeft(left, props.index, "onChange");
return positions;
};
const mouseUpHandler = (event, { startX, offsetX }) => {
const { positions, left } = changeObjectPositions(event, {
startX,
offsetX
});
return t.updateGradientLeft(p, t.index, "onEndChange"), i;
props.updateGradientLeft(left, props.index, "onEndChange");
return positions;
};
return N(() => {
e.mouseEvents = D(
s,
r,
g
onMounted(() => {
state.mouseEvents = useMouseEvents(
mouseDownHandler,
mouseMoveHandler,
mouseUpHandler
);
}), (d, u) => (C(), x("div", {
class: F(`picker-pointer${S(o)}`),
style: H(S(l)),
onMousedown: u[0] || (u[0] = //@ts-ignore
(...c) => e.mouseEvents && e.mouseEvents(...c)),
onDblclick: u[1] || (u[1] = () => t.removePoint(n.index)),
onClick: u[2] || (u[2] = ce(() => {
}, ["stop"]))
}, [
v("span", {
class: F(`child-point${S(o)}`)
}, null, 2)
], 38));
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`picker-pointer${unref(activeClassName)}`),
style: normalizeStyle(unref(pointStyle)),
onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => state.mouseEvents && state.mouseEvents(...args)),
onDblclick: _cache[1] || (_cache[1] = () => props.removePoint(__props.index)),
onClick: _cache[2] || (_cache[2] = withModifiers(() => {
}, ["stop"]))
}, [
createElementVNode("span", {
class: normalizeClass(`child-point${unref(activeClassName)}`)
}, null, 2)
], 38);
};
}
})), Fe = f({
}));
const __default__$a = defineComponent({
name: "GradientPoints"
}), Ve = /* @__PURE__ */ f(y(b({}, Fe), {
});
const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
props: {

@@ -512,47 +764,64 @@ points: Array,

},
setup(n) {
const t = n, e = L(null), o = E({
setup(__props) {
const props = __props;
const pointsContainerRef = ref(null);
const state = reactive({
width: 0,
positions: { x: 0, y: 0 }
}), l = _(() => ({ background: I(t.points, "linear", 90) })), s = (a) => {
const r = Z(
a.pageX - o.positions.x,
o.width
});
const pointsStyle = computed(() => {
const style = generateGradientStyle(props.points, "linear", 90);
return { background: style };
});
const pointsContainerClick = (event) => {
const left = updateGradientActivePercent(
event.pageX - state.positions.x,
state.width
);
t.addPoint(r);
props.addPoint(left);
};
return N(() => {
const a = e.value;
if (a) {
o.width = a.clientWidth;
const r = a.getBoundingClientRect();
o.positions = { x: r.x, y: r.y };
onMounted(() => {
const pointer = pointsContainerRef.value;
if (pointer) {
state.width = pointer.clientWidth;
const pointerPos = pointer.getBoundingClientRect();
state.positions = { x: pointerPos.x, y: pointerPos.y };
}
}), (a, r) => (C(), x("div", {
class: "gradient",
style: H(S(l)),
onClick: s
}, [
v("div", {
ref_key: "pointsContainerRef",
ref: e,
class: "gradient-slider-container"
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "gradient",
style: normalizeStyle(unref(pointsStyle)),
onClick: pointsContainerClick
}, [
(C(!0), x(Y, null, de(t.points, (g, d) => (C(), A(Ie, {
key: d,
"active-point-index": t.activePointIndex,
index: d,
point: g,
width: o.width,
positions: o.positions,
"change-active-point-index": t.changeActivePointIndex,
"update-gradient-left": n.updateGradientLeft,
"remove-point": t.removePoint
}, null, 8, ["active-point-index", "index", "point", "width", "positions", "change-active-point-index", "update-gradient-left", "remove-point"]))), 128))
], 512)
], 4));
createElementVNode("div", {
ref_key: "pointsContainerRef",
ref: pointsContainerRef,
class: "gradient-slider-container"
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(props.points, (point, index2) => {
return openBlock(), createBlock(_sfc_main$b, {
key: index2,
"active-point-index": props.activePointIndex,
index: index2,
point,
width: state.width,
positions: state.positions,
"change-active-point-index": props.changeActivePointIndex,
"update-gradient-left": __props.updateGradientLeft,
"remove-point": props.removePoint
}, null, 8, ["active-point-index", "index", "point", "width", "positions", "change-active-point-index", "update-gradient-left", "remove-point"]);
}), 128))
], 512)
], 4);
};
}
})), Ae = { class: "picker-area" }, De = { class: "preview" }, Me = { class: "color-hue-alpha" }, Xe = f({
}));
const _hoisted_1$4 = { class: "picker-area" };
const _hoisted_2$4 = { class: "preview" };
const _hoisted_3$1 = { class: "color-hue-alpha" };
const __default__$9 = defineComponent({
name: "ColorPicker"
}), te = /* @__PURE__ */ f(y(b({}, Xe), {
});
const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
props: {

@@ -578,56 +847,62 @@ isGradient: Boolean,

},
setup(n) {
return (t, e) => (C(), x("div", Ae, [
k($e, {
red: n.red,
green: n.green,
blue: n.blue,
hue: n.hue,
saturation: n.saturation,
value: n.value,
"update-color": n.updateColor
}, null, 8, ["red", "green", "blue", "hue", "saturation", "value", "update-color"]),
n.isGradient ? (C(), A(Ve, {
key: 0,
type: n.type,
degree: n.degree,
points: n.points,
"active-point-index": n.activePointIndex,
"change-active-point-index": n.changeActivePointIndex,
"update-gradient-left": n.updateGradientLeft,
"add-point": n.addPoint,
"remove-point": n.removePoint
}, null, 8, ["type", "degree", "points", "active-point-index", "change-active-point-index", "update-gradient-left", "add-point", "remove-point"])) : J("", !0),
v("div", De, [
k(Ge, {
red: n.red,
green: n.green,
blue: n.blue,
alpha: n.alpha,
"is-gradient": n.isGradient,
points: n.points,
"gradient-degree": n.degree,
"gradient-type": n.type
}, null, 8, ["red", "green", "blue", "alpha", "is-gradient", "points", "gradient-degree", "gradient-type"]),
v("div", Me, [
k(Ee, {
hue: n.hue,
saturation: n.saturation,
value: n.value,
"update-color": n.updateColor
}, null, 8, ["hue", "saturation", "value", "update-color"]),
k(Be, {
alpha: n.alpha,
red: n.red,
green: n.green,
blue: n.blue,
"update-color": n.updateColor
}, null, 8, ["alpha", "red", "green", "blue", "update-color"])
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1$4, [
createVNode(_sfc_main$f, {
red: __props.red,
green: __props.green,
blue: __props.blue,
hue: __props.hue,
saturation: __props.saturation,
value: __props.value,
"update-color": __props.updateColor
}, null, 8, ["red", "green", "blue", "hue", "saturation", "value", "update-color"]),
__props.isGradient ? (openBlock(), createBlock(_sfc_main$a, {
key: 0,
type: __props.type,
degree: __props.degree,
points: __props.points,
"active-point-index": __props.activePointIndex,
"change-active-point-index": __props.changeActivePointIndex,
"update-gradient-left": __props.updateGradientLeft,
"add-point": __props.addPoint,
"remove-point": __props.removePoint
}, null, 8, ["type", "degree", "points", "active-point-index", "change-active-point-index", "update-gradient-left", "add-point", "remove-point"])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_2$4, [
createVNode(_sfc_main$e, {
red: __props.red,
green: __props.green,
blue: __props.blue,
alpha: __props.alpha,
"is-gradient": __props.isGradient,
points: __props.points,
"gradient-degree": __props.degree,
"gradient-type": __props.type
}, null, 8, ["red", "green", "blue", "alpha", "is-gradient", "points", "gradient-degree", "gradient-type"]),
createElementVNode("div", _hoisted_3$1, [
createVNode(_sfc_main$d, {
hue: __props.hue,
saturation: __props.saturation,
value: __props.value,
"update-color": __props.updateColor
}, null, 8, ["hue", "saturation", "value", "update-color"]),
createVNode(_sfc_main$c, {
alpha: __props.alpha,
red: __props.red,
green: __props.green,
blue: __props.blue,
"update-color": __props.updateColor
}, null, 8, ["alpha", "red", "green", "blue", "update-color"])
])
])
])
]));
]);
};
}
})), Te = { class: "input-container" }, Le = { class: "label" }, Ye = f({
}));
const _hoisted_1$3 = { class: "input-container" };
const _hoisted_2$3 = { class: "label" };
const __default__$8 = defineComponent({
name: "Input"
}), Oe = /* @__PURE__ */ f(y(b({}, Ye), {
});
const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
props: {

@@ -644,37 +919,46 @@ value: { default: "" },

emits: ["input", "update:value"],
setup(n, { emit: t }) {
const e = n, o = _({
get: () => ~~e.value,
set: (s) => t("update:value", s)
}), l = (s) => {
t("input", s);
setup(__props, { emit: emits }) {
const props = __props;
const value = computed({
get: () => props.value,
set: (val) => emits("update:value", val)
});
const onInput = (e) => {
emits("input", e);
};
return (s, a) => (C(), x("div", {
class: F(`input-field ${e.classes}`)
}, [
v("div", Te, [
ge(v("input", {
"onUpdate:modelValue": a[0] || (a[0] = (r) => pe(o) ? o.value = r : null),
class: F(`${e.type}-input input`),
onFocus: a[1] || (a[1] = //@ts-ignore
(...r) => e.onFocus && e.onFocus(...r)),
onBlur: a[2] || (a[2] = //@ts-ignore
(...r) => e.onBlur && e.onBlur(...r)),
onInput: l
}, null, 34), [
[he, S(o)]
])
]),
v("div", Le, K(n.label), 1)
], 2));
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(`input-field ${props.classes}`)
}, [
createElementVNode("div", _hoisted_1$3, [
withDirectives(createElementVNode("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
class: normalizeClass(`${props.type}-input input`),
onFocus: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => props.onFocus && props.onFocus(...args)),
onBlur: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => props.onBlur && props.onBlur(...args)),
onInput
}, null, 34), [
[vModelText, unref(value)]
])
]),
createElementVNode("div", _hoisted_2$3, toDisplayString(__props.label), 1)
], 2);
};
}
}));
const Ue = (n, t) => {
const e = n.__vccOpts || n;
for (const [o, l] of t)
e[o] = l;
return e;
}, ne = /* @__PURE__ */ Ue(Oe, [["__scopeId", "data-v-b140d166"]]), je = f({
const index_vue_vue_type_style_index_0_scoped_986fef99_lang = "";
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const Input = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-986fef99"]]);
const __default__$7 = defineComponent({
name: "Preview"
}), We = /* @__PURE__ */ f(y(b({}, je), {
});
const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
props: {

@@ -685,26 +969,41 @@ red: { default: 0 },

alpha: null,
updateColor: { type: Function, default: (n) => !1 }
updateColor: { type: Function, default: (any) => false }
},
setup(n) {
const t = n, e = E({
hexValue: q(t.red, t.green, t.blue)
}), o = _(() => q(t.red, t.green, t.blue)), l = () => {
o.value.length === 6 && (e.hexValue = o.value);
}, s = (a) => {
const r = ye(a.target.value);
r && t.updateColor(r);
setup(__props) {
const props = __props;
const state = reactive({
hexValue: rgbToHex(props.red, props.green, props.blue)
});
const hex = computed(() => rgbToHex(props.red, props.green, props.blue));
const setHex = () => {
if (hex.value.length === 6) {
state.hexValue = hex.value;
}
};
return T(
() => [t.red, t.green, t.blue],
() => l()
), (a, r) => (C(), A(ne, {
value: e.hexValue,
label: "hex",
classes: "hex",
onInput: s
}, null, 8, ["value"]));
const changeHex = (event) => {
const color = hexToRgb(event.target.value);
if (color) {
props.updateColor(color);
}
};
watch(
() => [props.red, props.green, props.blue],
() => {
setHex();
}
);
return (_ctx, _cache) => {
return openBlock(), createBlock(Input, {
value: state.hexValue,
label: "hex",
classes: "hex",
onInput: changeHex
}, null, 8, ["value"]);
};
}
})), ze = f({
}));
const __default__$6 = defineComponent({
name: "RGBItem"
}), X = /* @__PURE__ */ f(y(b({}, ze), {
});
const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
props: {

@@ -714,40 +1013,57 @@ value: null,

label: { default: "" },
onChange: { type: Function, default: (n) => !1 }
onChange: { type: Function, default: (val) => false }
},
setup(n) {
const t = n, e = fe(), o = E({
inputValue: t.value || 0,
inProgress: !1
}), l = () => {
t.value !== +o.inputValue && o.inputValue !== "" && (o.inputValue = t.value);
}, s = (r) => {
var d;
const g = +r.target.value;
if (Number.isNaN(g) || g < 0 || g > 255) {
o.inputValue = t.value, (d = e == null ? void 0 : e.proxy) == null || d.$forceUpdate();
setup(__props) {
const props = __props;
const instance = getCurrentInstance();
const state = reactive({
inputValue: props.value || 0,
inProgress: false
});
const setValue = () => {
if (props.value !== +state.inputValue && state.inputValue !== "") {
state.inputValue = props.value;
}
};
const onChangeHandler = (event) => {
var _a;
const value = +event.target.value;
if (Number.isNaN(value) || value < 0 || value > 255) {
state.inputValue = props.value;
(_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$forceUpdate();
return;
}
o.inputValue = r.target.value, t.onChange(g);
}, a = () => {
o.inputValue || (o.inputValue = t.value), o.inProgress = !1;
state.inputValue = event.target.value;
props.onChange(value);
};
return T(
() => t.value,
() => l()
), (r, g) => (C(), x("div", null, [
k(ne, {
value: o.inputValue,
type: t.type,
label: t.label,
"on-focus": () => o.inProgress = !0,
"on-blur": a,
"in-progress": o.inProgress,
classes: "rgb",
onInput: s
}, null, 8, ["value", "type", "label", "on-focus", "in-progress"])
]));
const onBlur = () => {
if (!state.inputValue) {
state.inputValue = props.value;
}
state.inProgress = false;
};
watch(
() => props.value,
() => setValue()
);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [
createVNode(Input, {
value: state.inputValue,
type: props.type,
label: props.label,
"on-focus": () => state.inProgress = true,
"on-blur": onBlur,
"in-progress": state.inProgress,
classes: "rgb",
onInput: onChangeHandler
}, null, 8, ["value", "type", "label", "on-focus", "in-progress"])
]);
};
}
})), qe = f({
}));
const __default__$5 = defineComponent({
name: "RGB"
}), Je = /* @__PURE__ */ f(y(b({}, qe), {
});
const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
props: {

@@ -758,48 +1074,55 @@ red: { default: 0 },

alpha: { default: 0 },
updateColor: { type: Function, default: () => !1 }
updateColor: { type: Function, default: () => false }
},
setup(n) {
const t = n, e = (o, l) => {
if (o === "alpha") {
t.updateColor({ alpha: l / 100 });
setup(__props) {
const props = __props;
const changeValue = (field, value) => {
if (field === "alpha") {
props.updateColor({ alpha: value / 100 });
return;
}
const s = V({
red: t.red,
green: t.green,
blue: t.blue,
[o]: l
const color = rgbToHSv({
red: props.red,
green: props.green,
blue: props.blue,
[field]: value
});
t.updateColor(y(b({}, s), { [o]: l }));
props.updateColor(__spreadProps(__spreadValues({}, color), { [field]: value }));
};
return (o, l) => (C(), x(Y, null, [
k(X, {
value: t.red,
type: "number",
label: "R",
"on-change": (s) => e("red", s)
}, null, 8, ["value", "on-change"]),
k(X, {
value: t.green,
type: "number",
label: "G",
"on-change": (s) => e("green", s)
}, null, 8, ["value", "on-change"]),
k(X, {
value: t.blue,
type: "number",
label: "B",
"on-change": (s) => e("blue", s)
}, null, 8, ["value", "on-change"]),
k(X, {
value: t.alpha * 100,
type: "number",
label: "Alpha",
"on-change": (s) => e("alpha", s)
}, null, 8, ["value", "on-change"])
], 64));
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(_sfc_main$6, {
value: props.red,
type: "number",
label: "R",
"on-change": (value) => changeValue("red", value)
}, null, 8, ["value", "on-change"]),
createVNode(_sfc_main$6, {
value: props.green,
type: "number",
label: "G",
"on-change": (value) => changeValue("green", value)
}, null, 8, ["value", "on-change"]),
createVNode(_sfc_main$6, {
value: props.blue,
type: "number",
label: "B",
"on-change": (value) => changeValue("blue", value)
}, null, 8, ["value", "on-change"]),
createVNode(_sfc_main$6, {
value: props.alpha * 100,
type: "number",
label: "Alpha",
"on-change": (value) => changeValue("alpha", value)
}, null, 8, ["value", "on-change"])
], 64);
};
}
})), Ke = { class: "color-preview-area" }, Qe = { class: "input-group" }, Ze = f({
}));
const _hoisted_1$2 = { class: "color-preview-area" };
const _hoisted_2$2 = { class: "input-group" };
const __default__$4 = defineComponent({
name: "Preview"
}), oe = /* @__PURE__ */ f(y(b({}, Ze), {
});
const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
props: {

@@ -810,27 +1133,31 @@ red: { default: 0 },

alpha: { default: 0 },
updateColor: { type: Function, default: (n) => !1 }
updateColor: { type: Function, default: (data) => false }
},
setup(n) {
const t = n;
return (e, o) => (C(), x("div", Ke, [
v("div", Qe, [
k(We, {
red: t.red,
green: t.green,
blue: t.blue,
"update-color": t.updateColor
}, null, 8, ["red", "green", "blue", "update-color"]),
k(Je, {
red: t.red,
green: t.green,
blue: t.blue,
alpha: t.alpha,
"update-color": t.updateColor
}, null, 8, ["red", "green", "blue", "alpha", "update-color"])
])
]));
setup(__props) {
const props = __props;
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1$2, [
createElementVNode("div", _hoisted_2$2, [
createVNode(_sfc_main$7, {
red: props.red,
green: props.green,
blue: props.blue,
"update-color": props.updateColor
}, null, 8, ["red", "green", "blue", "update-color"]),
createVNode(_sfc_main$5, {
red: props.red,
green: props.green,
blue: props.blue,
alpha: props.alpha,
"update-color": props.updateColor
}, null, 8, ["red", "green", "blue", "alpha", "update-color"])
])
]);
};
}
})), et = f({
}));
const __default__$3 = defineComponent({
name: "Solid"
}), tt = /* @__PURE__ */ f(y(b({}, et), {
});
const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
props: {

@@ -843,101 +1170,138 @@ red: { default: 255 },

saturation: { default: 0 },
value: { default: 0 },
onStartChange: { default: () => {
} },
onChange: { default: () => {
} },
onEndChange: { default: () => {
} }
value: { default: 0 }
},
setup(n) {
const t = n, e = E({
colorRed: t.red,
colorGreen: t.green,
colorBlue: t.blue,
colorAlpha: t.alpha,
setup(__props) {
const props = __props;
const provideData = inject("provideData");
const state = reactive({
colorRed: props.red,
colorGreen: props.green,
colorBlue: props.blue,
colorAlpha: props.alpha,
colorHue: 0,
colorSaturation: 100,
colorValue: 100,
actions: {
onStartChange: t.onStartChange,
onChange: t.onChange,
onEndChange: t.onEndChange
colorValue: 100
});
const actionsMap = {
onStartChange: provideData.onStartChange,
onChange: provideData.onChange,
onEndChange: provideData.onEndChange
};
const hsv = computed(() => {
if (props.hue === void 0 || props.saturation === void 0 || props.value === void 0) {
return rgbToHSv({
red: props.red,
green: props.green,
blue: props.blue
});
}
}), o = _(() => t.hue === void 0 || t.saturation === void 0 || t.value === void 0 ? V({
red: t.red,
green: t.green,
blue: t.blue
}) : {
hue: t.hue,
saturation: t.saturation,
value: t.value
}), l = _(() => ({
red: t.red,
green: t.green,
blue: t.blue,
alpha: t.alpha
}));
T(
() => o.value,
(a) => {
const { hue: r, saturation: g, value: d } = a;
e.colorHue = r, e.colorSaturation = g, e.colorValue = d;
return {
hue: props.hue,
saturation: props.saturation,
value: props.value
};
});
const color = computed(() => {
return {
red: props.red,
green: props.green,
blue: props.blue,
alpha: props.alpha
};
});
watch(
() => hsv.value,
(newVal) => {
const { hue, saturation, value } = newVal;
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
}
), T(
() => l.value,
(a) => {
const { red: r, green: g, blue: d, alpha: u } = a;
e.colorRed = r, e.colorGreen = g, e.colorBlue = d, e.colorAlpha = u;
);
watch(
() => color.value,
(newVal) => {
const { red, green, blue, alpha } = newVal;
state.colorRed = red;
state.colorGreen = green;
state.colorBlue = blue;
state.colorAlpha = alpha;
}
);
const s = ({ red: a, green: r, blue: g, alpha: d, hue: u, saturation: c, value: i }, p = "onChange") => {
a = $(a, e.colorRed), r = $(r, e.colorGreen), g = $(g, e.colorBlue), d = $(d, e.colorAlpha), u = $(u, e.colorHue), c = $(c, e.colorSaturation), i = $(i, e.colorValue), e.colorRed = a, e.colorGreen = r, e.colorBlue = g, e.colorAlpha = d, e.colorHue = u, e.colorSaturation = c, e.colorValue = i;
const h = e.actions[p];
h && h({
red: a,
green: r,
blue: g,
alpha: d,
hue: u,
saturation: c,
value: i,
style: ee(a, r, g, d)
const updateColor = ({ red, green, blue, alpha, hue, saturation, value }, actionName = "onChange") => {
red = getRightValue(red, state.colorRed);
green = getRightValue(green, state.colorGreen);
blue = getRightValue(blue, state.colorBlue);
alpha = getRightValue(alpha, state.colorAlpha);
hue = getRightValue(hue, state.colorHue);
saturation = getRightValue(saturation, state.colorSaturation);
value = getRightValue(value, state.colorValue);
state.colorRed = red;
state.colorGreen = green;
state.colorBlue = blue;
state.colorAlpha = alpha;
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
const action = actionsMap[actionName];
action && action({
red,
green,
blue,
alpha,
hue,
saturation,
value,
style: generateSolidStyle(red, green, blue, alpha)
});
};
return N(() => {
const { hue: a, saturation: r, value: g } = V({
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue
onMounted(() => {
const { hue, saturation, value } = rgbToHSv({
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue
});
e.colorHue = a, e.colorSaturation = r, e.colorValue = g;
}), (a, r) => (C(), x(Y, null, [
k(te, {
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue,
alpha: e.colorAlpha,
hue: e.colorHue,
saturation: e.colorSaturation,
value: e.colorValue,
"update-color": s,
"is-gradient": !1
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value"]),
k(oe, {
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue,
alpha: e.colorAlpha,
"update-color": s
}, null, 8, ["red", "green", "blue", "alpha"])
], 64));
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(_sfc_main$9, {
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue,
alpha: state.colorAlpha,
hue: state.colorHue,
saturation: state.colorSaturation,
value: state.colorValue,
"update-color": updateColor,
"is-gradient": false
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value"]),
createVNode(_sfc_main$4, {
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue,
alpha: state.colorAlpha,
"update-color": updateColor
}, null, 8, ["red", "green", "blue", "alpha"])
], 64);
};
}
})), nt = { class: "gradient-controls" }, ot = { class: "gradient-type" }, at = {
}));
const _hoisted_1$1 = { class: "gradient-controls" };
const _hoisted_2$1 = { class: "gradient-type" };
const _hoisted_3 = {
key: 0,
class: "gradient-degrees-options"
}, rt = /* @__PURE__ */ v("div", { class: "gradient-degree-pointer" }, null, -1), lt = [
rt
], it = { class: "gradient-degree-value" }, st = f({
};
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "gradient-degree-pointer" }, null, -1);
const _hoisted_5 = [
_hoisted_4
];
const _hoisted_6 = { class: "gradient-degree-value" };
const __default__$2 = defineComponent({
name: "GradientControls"
}), ut = /* @__PURE__ */ f(y(b({}, st), {
});
const _sfc_main$2 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
props: {

@@ -948,73 +1312,95 @@ type: String,

type: Function,
default: () => !1
default: () => false
}
},
setup(n) {
const t = n, e = E({
disableClick: !1,
mouseEvents: () => !1
}), o = _(() => ({ transform: `rotate(${t.degree}deg)` })), l = (g) => {
const u = g.target.getBoundingClientRect(), c = ~~(8 - window.pageYOffset) + u.top, i = ~~(8 - window.pageXOffset) + u.left;
setup(__props) {
const props = __props;
const state = reactive({
disableClick: false,
mouseEvents: () => false
});
const degreesStyle = computed(() => {
return { transform: `rotate(${props.degree}deg)` };
});
const mouseDownHandler = (event) => {
const pointer = event.target;
const pointerBox = pointer.getBoundingClientRect();
const centerY = ~~(8 - window.pageYOffset) + pointerBox.top;
const centerX = ~~(8 - window.pageXOffset) + pointerBox.left;
return {
centerY: c,
centerX: i
centerY,
centerX
};
}, s = (g, { centerX: d, centerY: u }) => {
e.disableClick = !0;
const c = Ce(
g.clientX,
g.clientY,
d,
u
};
const mouseMoveHandler = (event, { centerX, centerY }) => {
state.disableClick = true;
const newDegree = calculateDegree(
event.clientX,
event.clientY,
centerX,
centerY
);
t.changeGradientControl({ degree: ~~c });
}, a = (g) => {
const d = g.target.classList;
d.contains("gradient-degrees") || d.contains("icon-rotate") || (e.disableClick = !1);
}, r = () => {
if (e.disableClick) {
e.disableClick = !1;
props.changeGradientControl({ degree: ~~newDegree });
};
const mouseUpHandler = (event) => {
const targetClasses = event.target.classList;
if (targetClasses.contains("gradient-degrees") || targetClasses.contains("icon-rotate")) {
return;
}
let g = (t.degree || 0) + 45;
g >= 360 && (g = 0), t.changeGradientControl({ degree: ~~g });
state.disableClick = false;
};
return N(() => {
e.mouseEvents = D(
l,
s,
a
const onClickGradientDegree = () => {
if (state.disableClick) {
state.disableClick = false;
return;
}
let gradientDegree = (props.degree || 0) + 45;
if (gradientDegree >= 360) {
gradientDegree = 0;
}
props.changeGradientControl({ degree: ~~gradientDegree });
};
onMounted(() => {
state.mouseEvents = useMouseEvents(
mouseDownHandler,
mouseMoveHandler,
mouseUpHandler
);
}), (g, d) => (C(), x("div", nt, [
v("div", ot, [
v("div", {
class: F(`gradient-type-item liner-gradient ${t.type === "linear" ? "active" : ""}`),
onClick: d[0] || (d[0] = () => t.changeGradientControl({ type: "linear" }))
}, null, 2),
v("div", {
class: F(`gradient-type-item radial-gradient ${t.type === "radial" ? "active" : ""}`),
onClick: d[1] || (d[1] = () => t.changeGradientControl({ type: "radial" }))
}, null, 2)
]),
t.type === "linear" ? (C(), x("div", at, [
v("div", {
class: "gradient-degrees",
onMousedown: d[2] || (d[2] = //@ts-ignore
(...u) => e.mouseEvents && e.mouseEvents(...u)),
onClick: r
}, [
v("div", {
class: "gradient-degree-center",
style: H(S(o))
}, lt, 4)
], 32),
v("div", it, [
v("p", null, K(t.degree) + "°", 1)
])
])) : J("", !0)
]));
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1$1, [
createElementVNode("div", _hoisted_2$1, [
createElementVNode("div", {
class: normalizeClass(`gradient-type-item liner-gradient ${props.type === "linear" ? "active" : ""}`),
onClick: _cache[0] || (_cache[0] = () => props.changeGradientControl({ type: "linear" }))
}, null, 2),
createElementVNode("div", {
class: normalizeClass(`gradient-type-item radial-gradient ${props.type === "radial" ? "active" : ""}`),
onClick: _cache[1] || (_cache[1] = () => props.changeGradientControl({ type: "radial" }))
}, null, 2)
]),
props.type === "linear" ? (openBlock(), createElementBlock("div", _hoisted_3, [
createElementVNode("div", {
class: "gradient-degrees",
onMousedown: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => state.mouseEvents && state.mouseEvents(...args)),
onClick: onClickGradientDegree
}, [
createElementVNode("div", {
class: "gradient-degree-center",
style: normalizeStyle(unref(degreesStyle))
}, _hoisted_5, 4)
], 32),
createElementVNode("div", _hoisted_6, [
createElementVNode("p", null, toDisplayString(props.degree) + "°", 1)
])
])) : createCommentVNode("", true)
]);
};
}
})), ct = f({
}));
const __default__$1 = defineComponent({
name: "Gradient"
}), dt = /* @__PURE__ */ f(y(b({}, ct), {
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
props: {

@@ -1039,151 +1425,206 @@ type: { default: "linear" },

] },
onStartChange: { default: null },
onChange: { default: null },
onEndChange: { default: null }
onStartChange: null,
onChange: null,
onEndChange: null
},
setup(n) {
const t = n, e = E({
setup(__props) {
const props = __props;
const provideData = inject("provideData");
const state = reactive({
activePointIndex: 0,
gradientPoints: t.points,
activePoint: t.points[0],
colorRed: t.points[0].red,
colorGreen: t.points[0].green,
colorBlue: t.points[0].blue,
colorAlpha: t.points[0].alpha,
gradientPoints: props.points,
activePoint: props.points[0],
colorRed: props.points[0].red,
colorGreen: props.points[0].green,
colorBlue: props.points[0].blue,
colorAlpha: props.points[0].alpha,
colorHue: 0,
colorSaturation: 100,
colorValue: 100,
gradientType: t.type,
gradientDegree: t.degree,
actions: {
onStartChange: t.onStartChange,
onChange: t.onChange,
onEndChange: t.onEndChange
gradientType: props.type,
gradientDegree: props.degree
});
const actionsMap = {
onStartChange: provideData.onStartChange,
onChange: provideData.onChange,
onEndChange: provideData.onEndChange
};
const removePoint = (index2 = state.activePointIndex) => {
if (state.gradientPoints.length <= 2) {
return;
}
}), o = (u = e.activePointIndex) => {
e.gradientPoints.length <= 2 || (e.gradientPoints.splice(u, 1), u > 0 && (e.activePointIndex = u - 1), t.onChange && t.onChange({
points: e.gradientPoints,
type: e.gradientType,
degree: e.gradientDegree,
style: I(
e.gradientPoints,
e.gradientType,
e.gradientDegree
state.gradientPoints.splice(index2, 1);
if (index2 > 0) {
state.activePointIndex = index2 - 1;
}
props.onChange && props.onChange({
points: state.gradientPoints,
type: state.gradientType,
degree: state.gradientDegree,
style: generateGradientStyle(
state.gradientPoints,
state.gradientType,
state.gradientDegree
)
}));
}, l = (u) => {
(u.keyCode === 46 || u.keyCode === 8) && o(e.activePointIndex);
}, s = (u) => {
e.activePointIndex = u, e.activePoint = e.gradientPoints[u];
const { red: c, green: i, blue: p, alpha: h } = e.activePoint;
e.colorRed = c, e.colorGreen = i, e.colorBlue = p, e.colorAlpha = h;
const { hue: m, saturation: P, value: G } = V({ red: c, green: i, blue: p });
e.colorHue = m, e.colorSaturation = P, e.colorValue = G;
}, a = ({ type: u, degree: c }) => {
u = $(u, e.gradientType), c = $(c, e.gradientDegree), e.gradientType = u, e.gradientDegree = c, t.onChange && t.onChange({
points: e.gradientPoints,
type: e.gradientType,
degree: e.gradientDegree,
style: I(
e.gradientPoints,
e.gradientType,
e.gradientDegree
});
};
const keyUpHandler = (event) => {
if (event.keyCode === 46 || event.keyCode === 8) {
removePoint(state.activePointIndex);
}
};
const changeActivePointIndex = (index2) => {
state.activePointIndex = index2;
state.activePoint = state.gradientPoints[index2];
const { red, green, blue, alpha } = state.activePoint;
state.colorRed = red;
state.colorGreen = green;
state.colorBlue = blue;
state.colorAlpha = alpha;
const { hue, saturation, value } = rgbToHSv({ red, green, blue });
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
};
const changeGradientControl = ({ type, degree }) => {
type = getRightValue(type, state.gradientType);
degree = getRightValue(degree, state.gradientDegree);
state.gradientType = type;
state.gradientDegree = degree;
props.onChange && props.onChange({
points: state.gradientPoints,
type: state.gradientType,
degree: state.gradientDegree,
style: generateGradientStyle(
state.gradientPoints,
state.gradientType,
state.gradientDegree
)
});
}, r = ({ red: u, green: c, blue: i, alpha: p, hue: h, saturation: m, value: P }, G = "onChange") => {
u = $(u, e.colorRed), c = $(c, e.colorGreen), i = $(i, e.colorBlue), p = $(p, e.colorAlpha), h = $(h, e.colorHue), m = $(m, e.colorSaturation), P = $(P, e.colorValue);
const w = e.gradientPoints.slice();
w[e.activePointIndex] = y(b({}, w[e.activePointIndex]), {
red: u,
green: c,
blue: i,
alpha: p
}), e.colorRed = u, e.colorGreen = c, e.colorBlue = i, e.colorAlpha = p, e.colorHue = h, e.colorSaturation = m, e.colorValue = P, e.gradientPoints = w;
const B = e.actions[G];
B && B({
points: w,
type: e.gradientType,
degree: e.gradientDegree,
style: I(
w,
e.gradientType,
e.gradientDegree
};
const updateColor = ({ red, green, blue, alpha, hue, saturation, value }, actionName = "onChange") => {
red = getRightValue(red, state.colorRed);
green = getRightValue(green, state.colorGreen);
blue = getRightValue(blue, state.colorBlue);
alpha = getRightValue(alpha, state.colorAlpha);
hue = getRightValue(hue, state.colorHue);
saturation = getRightValue(saturation, state.colorSaturation);
value = getRightValue(value, state.colorValue);
const localGradientPoints = state.gradientPoints.slice();
localGradientPoints[state.activePointIndex] = __spreadProps(__spreadValues({}, localGradientPoints[state.activePointIndex]), {
red,
green,
blue,
alpha
});
state.colorRed = red;
state.colorGreen = green;
state.colorBlue = blue;
state.colorAlpha = alpha;
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
state.gradientPoints = localGradientPoints;
const action = actionsMap[actionName];
action && action({
points: localGradientPoints,
type: state.gradientType,
degree: state.gradientDegree,
style: generateGradientStyle(
localGradientPoints,
state.gradientType,
state.gradientDegree
)
});
}, g = (u, c, i = "onChange") => {
e.gradientPoints[c].left = u;
const p = e.actions[i];
p && p({
points: e.gradientPoints,
type: e.gradientType,
degree: e.gradientDegree,
style: I(
e.gradientPoints,
e.gradientType,
e.gradientDegree
};
const updateGradientLeft = (left, index2, actionName = "onChange") => {
state.gradientPoints[index2].left = left;
const action = actionsMap[actionName];
action && action({
points: state.gradientPoints,
type: state.gradientType,
degree: state.gradientDegree,
style: generateGradientStyle(
state.gradientPoints,
state.gradientType,
state.gradientDegree
)
});
}, d = (u) => {
e.gradientPoints.push(y(b({}, e.gradientPoints[e.activePointIndex]), {
left: u
})), e.activePointIndex = e.gradientPoints.length - 1, t.onChange && t.onChange({
points: e.gradientPoints,
type: e.gradientType,
degree: e.gradientDegree,
style: I(
e.gradientPoints,
e.gradientType,
e.gradientDegree
};
const addPoint = (left) => {
state.gradientPoints.push(__spreadProps(__spreadValues({}, state.gradientPoints[state.activePointIndex]), {
left
}));
state.activePointIndex = state.gradientPoints.length - 1;
props.onChange && props.onChange({
points: state.gradientPoints,
type: state.gradientType,
degree: state.gradientDegree,
style: generateGradientStyle(
state.gradientPoints,
state.gradientType,
state.gradientDegree
)
});
};
return N(() => {
const { hue: u, saturation: c, value: i } = V({
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue
onMounted(() => {
const { hue, saturation, value } = rgbToHSv({
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue
});
e.colorHue = u, e.colorSaturation = c, e.colorValue = i, document.addEventListener("keyup", l);
}), ve(() => {
document.removeEventListener("keyup", l);
}), (u, c) => (C(), x(Y, null, [
k(ut, {
type: e.gradientType,
degree: e.gradientDegree,
"change-gradient-control": a
}, null, 8, ["type", "degree"]),
k(te, {
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue,
alpha: e.colorAlpha,
hue: e.colorHue,
saturation: e.colorSaturation,
value: e.colorValue,
"update-color": r,
"is-gradient": !0,
type: e.gradientType,
degree: e.gradientDegree,
points: e.gradientPoints,
"active-point-index": e.activePointIndex,
"change-gradient-control": a,
"change-active-point-index": s,
"update-gradient-left": g,
"add-point": d,
"remove-point": o
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value", "type", "degree", "points", "active-point-index"]),
k(oe, {
red: e.colorRed,
green: e.colorGreen,
blue: e.colorBlue,
alpha: e.colorAlpha,
"update-color": r
}, null, 8, ["red", "green", "blue", "alpha"])
], 64));
state.colorHue = hue;
state.colorSaturation = saturation;
state.colorValue = value;
document.addEventListener("keyup", keyUpHandler);
});
onBeforeUnmount(() => {
document.removeEventListener("keyup", keyUpHandler);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(_sfc_main$2, {
type: state.gradientType,
degree: state.gradientDegree,
"change-gradient-control": changeGradientControl
}, null, 8, ["type", "degree"]),
createVNode(_sfc_main$9, {
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue,
alpha: state.colorAlpha,
hue: state.colorHue,
saturation: state.colorSaturation,
value: state.colorValue,
"update-color": updateColor,
"is-gradient": true,
type: state.gradientType,
degree: state.gradientDegree,
points: state.gradientPoints,
"active-point-index": state.activePointIndex,
"change-gradient-control": changeGradientControl,
"change-active-point-index": changeActivePointIndex,
"update-gradient-left": updateGradientLeft,
"add-point": addPoint,
"remove-point": removePoint
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value", "type", "degree", "points", "active-point-index"]),
createVNode(_sfc_main$4, {
red: state.colorRed,
green: state.colorGreen,
blue: state.colorBlue,
alpha: state.colorAlpha,
"update-color": updateColor
}, null, 8, ["red", "green", "blue", "alpha"])
], 64);
};
}
})), gt = { class: "ui-color-picker" }, pt = f({
}));
const _hoisted_1 = { class: "ui-color-picker" };
const _hoisted_2 = { class: "btns" };
const __default__ = defineComponent({
name: "ColorPicker"
}), vt = /* @__PURE__ */ f(y(b({}, pt), {
});
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
isGradient: { type: Boolean, default: !1 },
isGradient: { type: Boolean, default: false },
color: { default: () => ({

@@ -1218,35 +1659,73 @@ red: 255,

}) },
onChange: { default: () => !1 },
onStartChange: { default: () => !1 },
onEndChange: { default: () => !1 }
cancelText: { default: "取消" },
cancelColor: null,
cancelBg: null,
confirmText: { default: "确认" },
confirmColor: null,
confirmBg: null
},
setup(n) {
const t = n;
return (e, o) => (C(), x("div", gt, [
t.isGradient ? (C(), A(dt, {
key: 0,
points: t.gradient.points,
type: t.gradient.type,
degree: t.gradient.degree,
"on-change": t.onChange,
"on-start-change": t.onStartChange,
"on-end-change": t.onEndChange
}, null, 8, ["points", "type", "degree", "on-change", "on-start-change", "on-end-change"])) : (C(), A(tt, {
key: 1,
red: t.color.red,
green: t.color.green,
blue: t.color.blue,
alpha: t.color.alpha,
hue: t.color.hue,
saturation: t.color.saturation,
value: t.color.value,
"on-change": t.onChange,
"on-start-change": t.onStartChange,
"on-end-change": t.onEndChange
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value", "on-change", "on-start-change", "on-end-change"]))
]));
emits: ["onChange", "onCancel"],
setup(__props, { emit: emits }) {
const props = __props;
const color = ref();
color.value = props.isGradient ? __spreadValues({}, props.gradient) : __spreadValues({}, props.color);
provide("provideData", {
onChange: (attrs) => {
color.value = __spreadValues({}, attrs);
},
onStartChange: (attrs) => {
color.value = __spreadValues({}, attrs);
},
onEndChange: (attrs) => {
color.value = __spreadValues({}, attrs);
}
});
const handleCancel = () => {
emits("onCancel");
};
const handleConfirm = () => {
emits("onChange", __spreadValues({}, color.value));
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
props.isGradient ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
points: props.gradient.points,
type: props.gradient.type,
degree: props.gradient.degree
}, null, 8, ["points", "type", "degree"])) : (openBlock(), createBlock(_sfc_main$3, {
key: 1,
red: props.color.red,
green: props.color.green,
blue: props.color.blue,
alpha: props.color.alpha,
hue: props.color.hue,
saturation: props.color.saturation,
value: props.color.value
}, null, 8, ["red", "green", "blue", "alpha", "hue", "saturation", "value"])),
createElementVNode("div", _hoisted_2, [
createElementVNode("div", {
class: "btn",
style: normalizeStyle({
color: props.cancelColor,
backgroundColor: props.cancelBg
}),
onClick: handleCancel
}, toDisplayString(props.cancelText), 5),
createElementVNode("div", {
class: "btn",
style: normalizeStyle({
color: props.confirmColor,
backgroundColor: props.confirmBg
}),
onClick: handleConfirm
}, toDisplayString(props.confirmText), 5)
])
]);
};
}
}));
const index = "";
export {
vt as default
_sfc_main as default
};

2

dist/color-gradient-picker-vue3.umd.js

@@ -1,1 +0,1 @@

(function(t,b){typeof exports=="object"&&typeof module!="undefined"?module.exports=b(require("vue")):typeof define=="function"&&define.amd?define(["vue"],b):(t=typeof globalThis!="undefined"?globalThis:t||self,t["color-gradient-picker-vue3"]=b(t.Vue))})(this,function(t){"use strict";var Xe=Object.defineProperty,Te=Object.defineProperties;var Le=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var ze=Object.prototype.hasOwnProperty,Ye=Object.prototype.propertyIsEnumerable;var z=(t,b,E)=>b in t?Xe(t,b,{enumerable:!0,configurable:!0,writable:!0,value:E}):t[b]=E,C=(t,b)=>{for(var E in b||(b={}))ze.call(b,E)&&z(t,E,b[E]);if(L)for(var E of L(b))Ye.call(b,E)&&z(t,E,b[E]);return t},y=(t,b)=>Te(t,Le(b));function b({red:o,green:n,blue:e,alpha:r}){let i,s,a,l=0,g;const p=o/255,d=n/255,u=e/255,c=Math.max(p,d,u),f=c-Math.min(p,d,u),h=m=>(c-m)/6/f+1/2;return f===0?(l=0,g=0):(g=f/c,i=h(p),s=h(d),a=h(u),p===c?l=a-s:d===c?l=1/3+i-a:u===c&&(l=2/3+s-i),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(l*360),saturation:Math.round(g*100),value:Math.round(c*100)}}function E(o){let n=1;const e=o/60;let r=n*(1-Math.abs(e%2-1));const i=0,s=255;let a=0,l=0,g=0;return n=(n+i)*s|0,r=(r+i)*s|0,e>=0&&e<1&&(a=n|0,l=r|0,g=i|0),e>=1&&e<2&&(a=r|0,l=n|0,g=i|0),e>=2&&e<3&&(a=i|0,l=n|0,g=r|0),e>=3&&e<4&&(a=i|0,l=r|0,g=n|0),e>=4&&e<5&&(a=r|0,l=i|0,g=n|0),e>=5&&e<=6&&(a=n|0,l=i|0,g=r|0),{red:a,green:l,blue:g}}function w(o){return typeof o=="number"&&Number.isNaN(o)===!1&&o>=0&&o<=255}function N(o,n,e,r){if(w(o)&&w(n)&&w(e)){const i={red:o|0,green:n|0,blue:e|0,alpha:r|0};return w(r)===!0&&(i.alpha=r|0),i}}function G(o,n,e){e/=100;let i=n/100*e;const s=o/60;let a=i*(1-Math.abs(s%2-1)),l=e-i;const g=255,p=0;return i=(i+l)*g|0,a=(a+l)*g|0,l=l*g|0,s>=1&&s<2?N(a,i,l,p):s>=2&&s<3?N(l,i,a,p):s>=3&&s<4?N(l,a,i,p):s>=4&&s<5?N(a,l,i,p):s>=5&&s<=6?N(i,l,a,p):N(i,a,l,p)}function H(o,n,e,r,i){o>r&&(o=r),n>e&&(n=e),o<0&&(o=0),n<0&&(n=0);const s=100-n*100/e|0,a=o*100/r|0;return y(C({},G(i,a,s)),{saturation:a,value:s})}function R(o,n,e,r){let i=360*o/n|0;return i=i<0?0:i>360?360:i,y(C({},G(i,e,r)),{hue:i})}function I(o,n){return o=Number((o/n).toFixed(2)),o>1?1:o<0?0:o}function F(o,n,e){let r=o.toString(16),i=n.toString(16),s=e.toString(16);return o<16&&(r=`0${r}`),n<16&&(i=`0${i}`),e<16&&(s=`0${s}`),r+i+s}const Y=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function O(o){if(Y.test(o)){if(o[0]==="#"&&(o=o.slice(1,o.length)),o.length<6)return;const e=parseInt(o.substring(0,2),16)||0,r=parseInt(o.substring(2,4),16)||0,i=parseInt(o.substring(4,6),16)||0,s=parseInt(o.substring(6,10),16)/255||0,a=N(e,r,i,s),l=a&&b(C({},a));return C(C({},a),l)}return!1}function M(o,n){const e=o*100/n;return e<0?0:e>100?100:e}function U(o,n,e,r){return Math.atan2(o-e,n-r)*(180/Math.PI)*-1+180}function k(o,n){return!o&&o!==0?n:o}function D(o,n,e,r){return`rgba(${o}, ${n}, ${e}, ${r})`}function $(o,n,e){let r="";const i=o.slice();return i.sort((s,a)=>s.left-a.left),n==="linear"?r=`linear-gradient(${e}deg,`:r="radial-gradient(",i.forEach((s,a)=>{r+=`rgba(${s.red}, ${s.green}, ${s.blue}, ${s.alpha}) ${s.left}%`,a!==i.length-1&&(r+=",")}),r+=")",r}function V(o,n,e){return function(i){let s=o(i);function a(l){s=n(l,s)||s}window.addEventListener("mousemove",a),window.addEventListener("mouseup",l=>{window.removeEventListener("mousemove",a),e&&e(l,s)},{once:!0})}}const j={class:"picking-area-overlay1"},v={class:"picking-area-overlay2"},W=t.defineComponent({name:"Picker"}),q=t.defineComponent(y(C({},W),{props:{red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,height:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.saturation*r.width/100|0)-6),s=t.computed(()=>(r.height-n.value*r.height/100|0)-6),a=t.computed(()=>({backgroundColor:`rgb(${n.red}, ${n.green}, ${n.blue})`,left:`${i.value}px`,top:`${s.value}px`})),l=t.computed(()=>{const{red:c,green:f,blue:h}=E(n.hue);return{backgroundColor:`rgb(${c}, ${f}, ${h})`}}),g=c=>{const f=e==null?void 0:e.value;if(!f)return;const{x:h,y:m}=f.getBoundingClientRect(),_=c.pageX,P=c.pageY,x=_-h,B=P-m,Ae=H(x,B,r.height,r.width,n.hue);return n.updateColor(Ae,"onStartChange"),{startX:_,startY:P,positionX:x,positionY:B}},p=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const P=c.pageX-f,x=c.pageY-h;m+=P,_+=x;const B=H(m,_,r.height,r.width,n.hue);return{positions:{positionX:m,positionY:_,startX:c.pageX,startY:c.pageY},color:B}},d=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const{positions:P,color:x}=p(c,{startX:f,startY:h,positionX:m,positionY:_});return n.updateColor(x,"onChange"),P},u=(c,{startX:f,startY:h,positionX:m,positionY:_})=>{const{positions:P,color:x}=p(c,{startX:f,startY:h,positionX:m,positionY:_});return n.updateColor(x,"onEndChange"),P};return t.onMounted(()=>{const c=e==null?void 0:e.value;c&&(r.width=c.clientWidth,r.height=c.clientHeight),r.mouseEvents=V(g,d,u)}),(c,f)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"pickerAreaRef",ref:e,class:"picking-area",style:t.normalizeStyle(t.unref(l)),onMousedown:f[0]||(f[0]=(...h)=>r.mouseEvents&&r.mouseEvents(...h))},[t.createElementVNode("div",j,[t.createElementVNode("div",v,[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(a))},null,4)])])],36))}})),J={class:"preview-area"},K=t.defineComponent({name:"PickerPreView"}),Q=t.defineComponent(y(C({},K),{props:{isGradient:{type:Boolean,default:!1},red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},gradientDegree:{default:0},gradientType:{default:""}},setup(o){const n=o,e=t.computed(()=>{let r="";return n.isGradient?(r=$(n.points,n.gradientType,n.gradientDegree),{background:r}):(r=D(n.red,n.green,n.blue,n.alpha),{backgroundColor:r})});return(r,i)=>(t.openBlock(),t.createElementBlock("div",J,[t.createElementVNode("div",{class:"preview-box",style:t.normalizeStyle(t.unref(e))},null,4)]))}})),Z=t.defineComponent({name:"Hue"}),ee=t.defineComponent(y(C({},Z),{props:{hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.hue*r.width/360|0)-6),s=t.computed(()=>({left:`${i.value}px`})),a=d=>{const u=d.currentTarget.getBoundingClientRect().x,c=d.pageX,f=c-u,h=R(f,r.width,n.saturation,n.value);return n.updateColor(h,"onStartChange"),{startX:c,positionX:f}},l=(d,{startX:u,positionX:c})=>{const f=d.pageX-u;c+=f;const h=c>r.width?r.width:c<=0?0:c,m=R(h,r.width,n.saturation,n.value);return{positions:{positionX:c,startX:d.pageX},color:m}},g=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return n.updateColor(h,"onChange"),f},p=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return n.updateColor(h,"onEndChange"),f};return t.onMounted(()=>{e.value&&(r.width=e.value.clientWidth),r.mouseEvents=V(a,g,p)}),(d,u)=>(t.openBlock(),t.createElementBlock("div",{class:"hue",onMousedown:u[0]||(u[0]=(...c)=>r.mouseEvents&&r.mouseEvents(...c))},[t.createElementVNode("div",{ref_key:"hueRef",ref:e,class:"hue-area"},[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(s))},null,4)],512)],32))}})),te={class:"alpha-area"},ne=t.defineComponent({name:"alpha"}),oe=t.defineComponent(y(C({},ne),{props:{red:Number,green:Number,blue:Number,alpha:Number,updateColor:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,mouseEvents:()=>!1}),i=t.computed(()=>(n.alpha*r.width|0)-6),s=t.computed(()=>({left:`${i.value}px`})),a=t.computed(()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${n.red}, ${n.green}, ${n.blue}))`})),l=u=>{const c=u.currentTarget.getBoundingClientRect().x,f=u.pageX,h=f-c;return n.updateColor({alpha:I(h,r.width)},"onStartChange"),{startX:f,positionX:h}},g=(u,{startX:c,positionX:f})=>{const h=u.pageX-c;f+=h;const m=I(f,r.width);return{positions:{positionX:f,startX:u.pageX},alpha:m}},p=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return n.updateColor({alpha:m},"onChange"),h},d=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return n.updateColor({alpha:m},"onEndChange"),h};return t.onMounted(()=>{const u=e.value;u&&(r.width=u.clientWidth),r.mouseEvents=V(l,p,d)}),(u,c)=>(t.openBlock(),t.createElementBlock("div",{class:"alpha",onMousedown:c[0]||(c[0]=(...f)=>r.mouseEvents&&r.mouseEvents(...f))},[t.createElementVNode("div",{class:"gradient",style:t.normalizeStyle(t.unref(a))},null,4),t.createElementVNode("div",te,[t.createElementVNode("div",{ref_key:"alphaMaskRef",ref:e,class:"alpha-mask"},[t.createElementVNode("div",{class:"picker-pointer",style:t.normalizeStyle(t.unref(s))},null,4)],512)])],32))}})),re=t.defineComponent({name:"GradientPoint"}),ae=t.defineComponent(y(C({},re),{props:{point:Object,activePointIndex:Number,index:Number,width:Number,positions:Object,changeActivePointIndex:Function,updateGradientLeft:Function,removePoint:Function},setup(o){const n=o,e=t.reactive({mouseEvents:()=>!1}),r=t.computed(()=>n.activePointIndex===n.index?" active":""),i=t.computed(()=>({left:`${n.point.left*(n.width/100)-6}px`})),s=p=>{n.changeActivePointIndex(n.index);const d=p.pageX,u=p.pageY,c=d-n.positions.x;return n.updateGradientLeft(n.point.left,n.index,"onStartChange"),{startX:d,startY:u,offsetX:c}},a=(p,{startX:d,offsetX:u})=>{const c=p.pageX-d;u+=c;const f=M(u,n.width);return{positions:{offsetX:u,startX:p.pageX},left:f}},l=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return n.updateGradientLeft(f,n.index,"onChange"),c},g=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return n.updateGradientLeft(f,n.index,"onEndChange"),c};return t.onMounted(()=>{e.mouseEvents=V(s,l,g)}),(p,d)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`picker-pointer${t.unref(r)}`),style:t.normalizeStyle(t.unref(i)),onMousedown:d[0]||(d[0]=(...u)=>e.mouseEvents&&e.mouseEvents(...u)),onDblclick:d[1]||(d[1]=()=>n.removePoint(o.index)),onClick:d[2]||(d[2]=t.withModifiers(()=>{},["stop"]))},[t.createElementVNode("span",{class:t.normalizeClass(`child-point${t.unref(r)}`)},null,2)],38))}})),le=t.defineComponent({name:"GradientPoints"}),ie=t.defineComponent(y(C({},le),{props:{points:Array,activePointIndex:Number,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){const n=o,e=t.ref(null),r=t.reactive({width:0,positions:{x:0,y:0}}),i=t.computed(()=>({background:$(n.points,"linear",90)})),s=a=>{const l=M(a.pageX-r.positions.x,r.width);n.addPoint(l)};return t.onMounted(()=>{const a=e.value;if(a){r.width=a.clientWidth;const l=a.getBoundingClientRect();r.positions={x:l.x,y:l.y}}}),(a,l)=>(t.openBlock(),t.createElementBlock("div",{class:"gradient",style:t.normalizeStyle(t.unref(i)),onClick:s},[t.createElementVNode("div",{ref_key:"pointsContainerRef",ref:e,class:"gradient-slider-container"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(n.points,(g,p)=>(t.openBlock(),t.createBlock(ae,{key:p,"active-point-index":n.activePointIndex,index:p,point:g,width:r.width,positions:r.positions,"change-active-point-index":n.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"remove-point":n.removePoint},null,8,["active-point-index","index","point","width","positions","change-active-point-index","update-gradient-left","remove-point"]))),128))],512)],4))}})),ce={class:"picker-area"},se={class:"preview"},de={class:"color-hue-alpha"},ue=t.defineComponent({name:"ColorPicker"}),A=t.defineComponent(y(C({},ue),{props:{isGradient:Boolean,red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function,points:Array,degree:Number,type:String,activePointIndex:Number,changeGradientControl:Function,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){return(n,e)=>(t.openBlock(),t.createElementBlock("div",ce,[t.createVNode(q,{red:o.red,green:o.green,blue:o.blue,hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["red","green","blue","hue","saturation","value","update-color"]),o.isGradient?(t.openBlock(),t.createBlock(ie,{key:0,type:o.type,degree:o.degree,points:o.points,"active-point-index":o.activePointIndex,"change-active-point-index":o.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"add-point":o.addPoint,"remove-point":o.removePoint},null,8,["type","degree","points","active-point-index","change-active-point-index","update-gradient-left","add-point","remove-point"])):t.createCommentVNode("",!0),t.createElementVNode("div",se,[t.createVNode(Q,{red:o.red,green:o.green,blue:o.blue,alpha:o.alpha,"is-gradient":o.isGradient,points:o.points,"gradient-degree":o.degree,"gradient-type":o.type},null,8,["red","green","blue","alpha","is-gradient","points","gradient-degree","gradient-type"]),t.createElementVNode("div",de,[t.createVNode(ee,{hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["hue","saturation","value","update-color"]),t.createVNode(oe,{alpha:o.alpha,red:o.red,green:o.green,blue:o.blue,"update-color":o.updateColor},null,8,["alpha","red","green","blue","update-color"])])])]))}})),pe={class:"input-container"},ge={class:"label"},fe=t.defineComponent({name:"Input"}),he=t.defineComponent(y(C({},fe),{props:{value:{default:""},label:{default:""},type:{default:"text"},classes:{default:""},onFocus:{type:Function,default:()=>{}},onBlur:{type:Function,default:()=>{}}},emits:["input","update:value"],setup(o,{emit:n}){const e=o,r=t.computed({get:()=>~~e.value,set:s=>n("update:value",s)}),i=s=>{n("input",s)};return(s,a)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(`input-field ${e.classes}`)},[t.createElementVNode("div",pe,[t.withDirectives(t.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=l=>t.isRef(r)?r.value=l:null),class:t.normalizeClass(`${e.type}-input input`),onFocus:a[1]||(a[1]=(...l)=>e.onFocus&&e.onFocus(...l)),onBlur:a[2]||(a[2]=(...l)=>e.onBlur&&e.onBlur(...l)),onInput:i},null,34),[[t.vModelText,t.unref(r)]])]),t.createElementVNode("div",ge,t.toDisplayString(o.label),1)],2))}})),Oe="",X=((o,n)=>{const e=o.__vccOpts||o;for(const[r,i]of n)e[r]=i;return e})(he,[["__scopeId","data-v-b140d166"]]),me=t.defineComponent({name:"Preview"}),Ce=t.defineComponent(y(C({},me),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:null,updateColor:{type:Function,default:o=>!1}},setup(o){const n=o,e=t.reactive({hexValue:F(n.red,n.green,n.blue)}),r=t.computed(()=>F(n.red,n.green,n.blue)),i=()=>{r.value.length===6&&(e.hexValue=r.value)},s=a=>{const l=O(a.target.value);l&&n.updateColor(l)};return t.watch(()=>[n.red,n.green,n.blue],()=>i()),(a,l)=>(t.openBlock(),t.createBlock(X,{value:e.hexValue,label:"hex",classes:"hex",onInput:s},null,8,["value"]))}})),be=t.defineComponent({name:"RGBItem"}),S=t.defineComponent(y(C({},be),{props:{value:null,type:{default:"text"},label:{default:""},onChange:{type:Function,default:o=>!1}},setup(o){const n=o,e=t.getCurrentInstance(),r=t.reactive({inputValue:n.value||0,inProgress:!1}),i=()=>{n.value!==+r.inputValue&&r.inputValue!==""&&(r.inputValue=n.value)},s=l=>{var p;const g=+l.target.value;if(Number.isNaN(g)||g<0||g>255){r.inputValue=n.value,(p=e==null?void 0:e.proxy)==null||p.$forceUpdate();return}r.inputValue=l.target.value,n.onChange(g)},a=()=>{r.inputValue||(r.inputValue=n.value),r.inProgress=!1};return t.watch(()=>n.value,()=>i()),(l,g)=>(t.openBlock(),t.createElementBlock("div",null,[t.createVNode(X,{value:r.inputValue,type:n.type,label:n.label,"on-focus":()=>r.inProgress=!0,"on-blur":a,"in-progress":r.inProgress,classes:"rgb",onInput:s},null,8,["value","type","label","on-focus","in-progress"])]))}})),ye=t.defineComponent({name:"RGB"}),ke=t.defineComponent(y(C({},ye),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:()=>!1}},setup(o){const n=o,e=(r,i)=>{if(r==="alpha"){n.updateColor({alpha:i/100});return}const s=b({red:n.red,green:n.green,blue:n.blue,[r]:i});n.updateColor(y(C({},s),{[r]:i}))};return(r,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(S,{value:n.red,type:"number",label:"R","on-change":s=>e("red",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.green,type:"number",label:"G","on-change":s=>e("green",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.blue,type:"number",label:"B","on-change":s=>e("blue",s)},null,8,["value","on-change"]),t.createVNode(S,{value:n.alpha*100,type:"number",label:"Alpha","on-change":s=>e("alpha",s)},null,8,["value","on-change"])],64))}})),_e={class:"color-preview-area"},xe={class:"input-group"},Ee=t.defineComponent({name:"Preview"}),T=t.defineComponent(y(C({},Ee),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:o=>!1}},setup(o){const n=o;return(e,r)=>(t.openBlock(),t.createElementBlock("div",_e,[t.createElementVNode("div",xe,[t.createVNode(Ce,{red:n.red,green:n.green,blue:n.blue,"update-color":n.updateColor},null,8,["red","green","blue","update-color"]),t.createVNode(ke,{red:n.red,green:n.green,blue:n.blue,alpha:n.alpha,"update-color":n.updateColor},null,8,["red","green","blue","alpha","update-color"])])]))}})),Pe=t.defineComponent({name:"Solid"}),Ne=t.defineComponent(y(C({},Pe),{props:{red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},hue:{default:0},saturation:{default:0},value:{default:0},onStartChange:{default:()=>{}},onChange:{default:()=>{}},onEndChange:{default:()=>{}}},setup(o){const n=o,e=t.reactive({colorRed:n.red,colorGreen:n.green,colorBlue:n.blue,colorAlpha:n.alpha,colorHue:0,colorSaturation:100,colorValue:100,actions:{onStartChange:n.onStartChange,onChange:n.onChange,onEndChange:n.onEndChange}}),r=t.computed(()=>n.hue===void 0||n.saturation===void 0||n.value===void 0?b({red:n.red,green:n.green,blue:n.blue}):{hue:n.hue,saturation:n.saturation,value:n.value}),i=t.computed(()=>({red:n.red,green:n.green,blue:n.blue,alpha:n.alpha}));t.watch(()=>r.value,a=>{const{hue:l,saturation:g,value:p}=a;e.colorHue=l,e.colorSaturation=g,e.colorValue=p}),t.watch(()=>i.value,a=>{const{red:l,green:g,blue:p,alpha:d}=a;e.colorRed=l,e.colorGreen=g,e.colorBlue=p,e.colorAlpha=d});const s=({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c},f="onChange")=>{a=k(a,e.colorRed),l=k(l,e.colorGreen),g=k(g,e.colorBlue),p=k(p,e.colorAlpha),d=k(d,e.colorHue),u=k(u,e.colorSaturation),c=k(c,e.colorValue),e.colorRed=a,e.colorGreen=l,e.colorBlue=g,e.colorAlpha=p,e.colorHue=d,e.colorSaturation=u,e.colorValue=c;const h=e.actions[f];h&&h({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c,style:D(a,l,g,p)})};return t.onMounted(()=>{const{hue:a,saturation:l,value:g}=b({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=a,e.colorSaturation=l,e.colorValue=g}),(a,l)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(A,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":s,"is-gradient":!1},null,8,["red","green","blue","alpha","hue","saturation","value"]),t.createVNode(T,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":s},null,8,["red","green","blue","alpha"])],64))}})),$e={class:"gradient-controls"},Be={class:"gradient-type"},Ve={key:0,class:"gradient-degrees-options"},we=[t.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)],Se={class:"gradient-degree-value"},Ge=t.defineComponent({name:"GradientControls"}),He=t.defineComponent(y(C({},Ge),{props:{type:String,degree:Number,changeGradientControl:{type:Function,default:()=>!1}},setup(o){const n=o,e=t.reactive({disableClick:!1,mouseEvents:()=>!1}),r=t.computed(()=>({transform:`rotate(${n.degree}deg)`})),i=g=>{const d=g.target.getBoundingClientRect(),u=~~(8-window.pageYOffset)+d.top,c=~~(8-window.pageXOffset)+d.left;return{centerY:u,centerX:c}},s=(g,{centerX:p,centerY:d})=>{e.disableClick=!0;const u=U(g.clientX,g.clientY,p,d);n.changeGradientControl({degree:~~u})},a=g=>{const p=g.target.classList;p.contains("gradient-degrees")||p.contains("icon-rotate")||(e.disableClick=!1)},l=()=>{if(e.disableClick){e.disableClick=!1;return}let g=(n.degree||0)+45;g>=360&&(g=0),n.changeGradientControl({degree:~~g})};return t.onMounted(()=>{e.mouseEvents=V(i,s,a)}),(g,p)=>(t.openBlock(),t.createElementBlock("div",$e,[t.createElementVNode("div",Be,[t.createElementVNode("div",{class:t.normalizeClass(`gradient-type-item liner-gradient ${n.type==="linear"?"active":""}`),onClick:p[0]||(p[0]=()=>n.changeGradientControl({type:"linear"}))},null,2),t.createElementVNode("div",{class:t.normalizeClass(`gradient-type-item radial-gradient ${n.type==="radial"?"active":""}`),onClick:p[1]||(p[1]=()=>n.changeGradientControl({type:"radial"}))},null,2)]),n.type==="linear"?(t.openBlock(),t.createElementBlock("div",Ve,[t.createElementVNode("div",{class:"gradient-degrees",onMousedown:p[2]||(p[2]=(...d)=>e.mouseEvents&&e.mouseEvents(...d)),onClick:l},[t.createElementVNode("div",{class:"gradient-degree-center",style:t.normalizeStyle(t.unref(r))},we,4)],32),t.createElementVNode("div",Se,[t.createElementVNode("p",null,t.toDisplayString(n.degree)+"°",1)])])):t.createCommentVNode("",!0)]))}})),Re=t.defineComponent({name:"Gradient"}),Ie=t.defineComponent(y(C({},Re),{props:{type:{default:"linear"},degree:{default:0},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},onStartChange:{default:null},onChange:{default:null},onEndChange:{default:null}},setup(o){const n=o,e=t.reactive({activePointIndex:0,gradientPoints:n.points,activePoint:n.points[0],colorRed:n.points[0].red,colorGreen:n.points[0].green,colorBlue:n.points[0].blue,colorAlpha:n.points[0].alpha,colorHue:0,colorSaturation:100,colorValue:100,gradientType:n.type,gradientDegree:n.degree,actions:{onStartChange:n.onStartChange,onChange:n.onChange,onEndChange:n.onEndChange}}),r=(d=e.activePointIndex)=>{e.gradientPoints.length<=2||(e.gradientPoints.splice(d,1),d>0&&(e.activePointIndex=d-1),n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)}))},i=d=>{(d.keyCode===46||d.keyCode===8)&&r(e.activePointIndex)},s=d=>{e.activePointIndex=d,e.activePoint=e.gradientPoints[d];const{red:u,green:c,blue:f,alpha:h}=e.activePoint;e.colorRed=u,e.colorGreen=c,e.colorBlue=f,e.colorAlpha=h;const{hue:m,saturation:_,value:P}=b({red:u,green:c,blue:f});e.colorHue=m,e.colorSaturation=_,e.colorValue=P},a=({type:d,degree:u})=>{d=k(d,e.gradientType),u=k(u,e.gradientDegree),e.gradientType=d,e.gradientDegree=u,n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})},l=({red:d,green:u,blue:c,alpha:f,hue:h,saturation:m,value:_},P="onChange")=>{d=k(d,e.colorRed),u=k(u,e.colorGreen),c=k(c,e.colorBlue),f=k(f,e.colorAlpha),h=k(h,e.colorHue),m=k(m,e.colorSaturation),_=k(_,e.colorValue);const x=e.gradientPoints.slice();x[e.activePointIndex]=y(C({},x[e.activePointIndex]),{red:d,green:u,blue:c,alpha:f}),e.colorRed=d,e.colorGreen=u,e.colorBlue=c,e.colorAlpha=f,e.colorHue=h,e.colorSaturation=m,e.colorValue=_,e.gradientPoints=x;const B=e.actions[P];B&&B({points:x,type:e.gradientType,degree:e.gradientDegree,style:$(x,e.gradientType,e.gradientDegree)})},g=(d,u,c="onChange")=>{e.gradientPoints[u].left=d;const f=e.actions[c];f&&f({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})},p=d=>{e.gradientPoints.push(y(C({},e.gradientPoints[e.activePointIndex]),{left:d})),e.activePointIndex=e.gradientPoints.length-1,n.onChange&&n.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:$(e.gradientPoints,e.gradientType,e.gradientDegree)})};return t.onMounted(()=>{const{hue:d,saturation:u,value:c}=b({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=d,e.colorSaturation=u,e.colorValue=c,document.addEventListener("keyup",i)}),t.onBeforeUnmount(()=>{document.removeEventListener("keyup",i)}),(d,u)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(He,{type:e.gradientType,degree:e.gradientDegree,"change-gradient-control":a},null,8,["type","degree"]),t.createVNode(A,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":l,"is-gradient":!0,type:e.gradientType,degree:e.gradientDegree,points:e.gradientPoints,"active-point-index":e.activePointIndex,"change-gradient-control":a,"change-active-point-index":s,"update-gradient-left":g,"add-point":p,"remove-point":r},null,8,["red","green","blue","alpha","hue","saturation","value","type","degree","points","active-point-index"]),t.createVNode(T,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":l},null,8,["red","green","blue","alpha"])],64))}})),Fe={class:"ui-color-picker"},Me=t.defineComponent({name:"ColorPicker"}),De=t.defineComponent(y(C({},Me),{props:{isGradient:{type:Boolean,default:!1},color:{default:()=>({red:255,green:0,blue:0,alpha:1,hue:0,saturation:100,value:100})},gradient:{default:()=>({type:"linear",degree:0,points:[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]})},onChange:{default:()=>!1},onStartChange:{default:()=>!1},onEndChange:{default:()=>!1}},setup(o){const n=o;return(e,r)=>(t.openBlock(),t.createElementBlock("div",Fe,[n.isGradient?(t.openBlock(),t.createBlock(Ie,{key:0,points:n.gradient.points,type:n.gradient.type,degree:n.gradient.degree,"on-change":n.onChange,"on-start-change":n.onStartChange,"on-end-change":n.onEndChange},null,8,["points","type","degree","on-change","on-start-change","on-end-change"])):(t.openBlock(),t.createBlock(Ne,{key:1,red:n.color.red,green:n.color.green,blue:n.color.blue,alpha:n.color.alpha,hue:n.color.hue,saturation:n.color.saturation,value:n.color.value,"on-change":n.onChange,"on-start-change":n.onStartChange,"on-end-change":n.onEndChange},null,8,["red","green","blue","alpha","hue","saturation","value","on-change","on-start-change","on-end-change"]))]))}})),ve="";return De});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";var t=Object.defineProperty,n=Object.defineProperties,o=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,i=(e,n,o)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,u=(e,t)=>{for(var n in t||(t={}))a.call(t,n)&&i(e,n,t[n]);if(r)for(var n of r(t))l.call(t,n)&&i(e,n,t[n]);return e},d=(e,t)=>n(e,o(t));function c({red:e,green:t,blue:n,alpha:o}){let r,a,l,i,u=0;const d=e/255,c=t/255,s=n/255,p=Math.max(d,c,s),g=p-Math.min(d,c,s),h=e=>(p-e)/6/g+.5;return 0===g?(u=0,i=0):(i=g/p,r=h(d),a=h(c),l=h(s),d===p?u=l-a:c===p?u=1/3+r-l:s===p&&(u=2/3+a-r),u<0?u+=1:u>1&&(u-=1)),{hue:Math.round(360*u),saturation:Math.round(100*i),value:Math.round(100*p)}}function s(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function p(e,t,n,o){if(s(e)&&s(t)&&s(n)){const r={red:0|e,green:0|t,blue:0|n,alpha:0|o};return!0===s(o)&&(r.alpha=0|o),r}}function g(e,t,n){let o=t/100*(n/=100);const r=e/60;let a=o*(1-Math.abs(r%2-1)),l=n-o;return o=255*(o+l)|0,a=255*(a+l)|0,l=255*l|0,r>=1&&r<2?p(a,o,l,1):r>=2&&r<3?p(l,o,a,1):r>=3&&r<4?p(l,a,o,1):r>=4&&r<5?p(a,l,o,1):r>=5&&r<=6?p(o,l,a,1):p(o,a,l,1)}function h(e,t,n,o,r){e>o&&(e=o),t>n&&(t=n),e<0&&(e=0),t<0&&(t=0);const a=100-100*t/n|0,l=100*e/o|0;return d(u({},g(r,l,a)),{saturation:l,value:a})}function v(e,t,n,o){let r=360*e/t|0;return r=r<0?0:r>360?360:r,d(u({},g(r,n,o)),{hue:r})}function m(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function f(e,t,n){let o=e.toString(16),r=t.toString(16),a=n.toString(16);return e<16&&(o=`0${o}`),t<16&&(r=`0${r}`),n<16&&(a=`0${a}`),o+r+a}const b=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function C(e,t){const n=100*e/t;return n<0?0:n>100?100:n}function y(e,t){return e||0===e?e:t}function k(e,t,n,o){return`rgba(${e}, ${t}, ${n}, ${o})`}function E(e,t,n){let o="";const r=e.slice();return r.sort(((e,t)=>e.left-t.left)),o="linear"===t?`linear-gradient(${n}deg,`:"radial-gradient(",r.forEach(((e,t)=>{o+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==r.length-1&&(o+=",")})),o+=")",o}function N(e,t,n){return function(o){let r=e(o);function a(e){r=t(e,r)||r}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),n&&n(e,r)}),{once:!0})}}const B={class:"picking-area-overlay1"},V={class:"picking-area-overlay2"},x=e.defineComponent({name:"Picker"}),P=e.defineComponent(d(u({},x),{props:{red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function},setup(t){const n=t,o=e.ref(null),r=e.reactive({width:0,height:0,mouseEvents:()=>!1}),a=e.computed((()=>(n.saturation*r.width/100|0)-6)),l=e.computed((()=>(r.height-n.value*r.height/100|0)-6)),i=e.computed((()=>({backgroundColor:`rgb(${n.red}, ${n.green}, ${n.blue})`,left:`${a.value}px`,top:`${l.value}px`}))),u=e.computed((()=>{const{red:e,green:t,blue:o}=function(e){let t=1;const n=e/60;let o=t*(1-Math.abs(n%2-1)),r=0,a=0,l=0;return t=255*(t+0)|0,o=255*(o+0)|0,n>=0&&n<1&&(r=0|t,a=0|o,l=0),n>=1&&n<2&&(r=0|o,a=0|t,l=0),n>=2&&n<3&&(r=0,a=0|t,l=0|o),n>=3&&n<4&&(r=0,a=0|o,l=0|t),n>=4&&n<5&&(r=0|o,a=0,l=0|t),n>=5&&n<=6&&(r=0|t,a=0,l=0|o),{red:r,green:a,blue:l}}(n.hue);return{backgroundColor:`rgb(${e}, ${t}, ${o})`}})),d=e=>{const t=null==o?void 0:o.value;if(!t)return;const{x:a,y:l}=t.getBoundingClientRect(),i=e.pageX,u=e.pageY,d=i-a,c=u-l,s=h(d,c,r.height,r.width,n.hue);return n.updateColor(s,"onStartChange"),{startX:i,startY:u,positionX:d,positionY:c}},c=(e,{startX:t,startY:o,positionX:a,positionY:l})=>{const i=h(a+=e.pageX-t,l+=e.pageY-o,r.height,r.width,n.hue);return{positions:{positionX:a,positionY:l,startX:e.pageX,startY:e.pageY},color:i}},s=(e,{startX:t,startY:o,positionX:r,positionY:a})=>{const{positions:l,color:i}=c(e,{startX:t,startY:o,positionX:r,positionY:a});return n.updateColor(i,"onChange"),l},p=(e,{startX:t,startY:o,positionX:r,positionY:a})=>{const{positions:l,color:i}=c(e,{startX:t,startY:o,positionX:r,positionY:a});return n.updateColor(i,"onEndChange"),l};return e.onMounted((()=>{const e=null==o?void 0:o.value;e&&(r.width=e.clientWidth,r.height=e.clientHeight),r.mouseEvents=N(d,s,p)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:o,class:"picking-area",style:e.normalizeStyle(e.unref(u)),onMousedown:n[0]||(n[0]=(...e)=>r.mouseEvents&&r.mouseEvents(...e))},[e.createElementVNode("div",B,[e.createElementVNode("div",V,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(i))},null,4)])])],36))}})),X={class:"preview-area"},w=e.defineComponent({name:"PickerPreView"}),S=e.defineComponent(d(u({},w),{props:{isGradient:{type:Boolean,default:!1},red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},gradientDegree:{default:0},gradientType:{default:""}},setup(t){const n=t,o=e.computed((()=>{let e="";return n.isGradient?(e=E(n.points,n.gradientType,n.gradientDegree),{background:e}):(e=k(n.red,n.green,n.blue,n.alpha),{backgroundColor:e})}));return(t,n)=>(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{class:"preview-box",style:e.normalizeStyle(e.unref(o))},null,4)]))}})),G=e.defineComponent({name:"Hue"}),F=e.defineComponent(d(u({},G),{props:{hue:Number,saturation:Number,value:Number,updateColor:Function},setup(t){const n=t,o=e.ref(null),r=e.reactive({width:0,mouseEvents:()=>!1}),a=e.computed((()=>(n.hue*r.width/360|0)-6)),l=e.computed((()=>({left:`${a.value}px`}))),i=e=>{const t=e.currentTarget.getBoundingClientRect().x,o=e.pageX,a=o-t,l=v(a,r.width,n.saturation,n.value);return n.updateColor(l,"onStartChange"),{startX:o,positionX:a}},u=(e,{startX:t,positionX:o})=>{const a=v((o+=e.pageX-t)>r.width?r.width:o<=0?0:o,r.width,n.saturation,n.value);return{positions:{positionX:o,startX:e.pageX},color:a}},d=(e,{startX:t,positionX:o})=>{const{positions:r,color:a}=u(e,{startX:t,positionX:o});return n.updateColor(a,"onChange"),r},c=(e,{startX:t,positionX:o})=>{const{positions:r,color:a}=u(e,{startX:t,positionX:o});return n.updateColor(a,"onEndChange"),r};return e.onMounted((()=>{o.value&&(r.width=o.value.clientWidth),r.mouseEvents=N(i,d,c)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"hue",onMousedown:n[0]||(n[0]=(...e)=>r.mouseEvents&&r.mouseEvents(...e))},[e.createElementVNode("div",{ref_key:"hueRef",ref:o,class:"hue-area"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)],512)],32))}})),I={class:"alpha-area"},$=e.defineComponent({name:"alpha"}),D=e.defineComponent(d(u({},$),{props:{red:Number,green:Number,blue:Number,alpha:Number,updateColor:Function},setup(t){const n=t,o=e.ref(null),r=e.reactive({width:0,mouseEvents:()=>!1}),a=e.computed((()=>(n.alpha*r.width|0)-6)),l=e.computed((()=>({left:`${a.value}px`}))),i=e.computed((()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${n.red}, ${n.green}, ${n.blue}))`}))),u=e=>{const t=e.currentTarget.getBoundingClientRect().x,o=e.pageX,a=o-t;return n.updateColor({alpha:m(a,r.width)},"onStartChange"),{startX:o,positionX:a}},d=(e,{startX:t,positionX:n})=>{const o=m(n+=e.pageX-t,r.width);return{positions:{positionX:n,startX:e.pageX},alpha:o}},c=(e,{startX:t,positionX:o})=>{const{positions:r,alpha:a}=d(e,{startX:t,positionX:o});return n.updateColor({alpha:a},"onChange"),r},s=(e,{startX:t,positionX:o})=>{const{positions:r,alpha:a}=d(e,{startX:t,positionX:o});return n.updateColor({alpha:a},"onEndChange"),r};return e.onMounted((()=>{const e=o.value;e&&(r.width=e.clientWidth),r.mouseEvents=N(u,c,s)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"alpha",onMousedown:n[0]||(n[0]=(...e)=>r.mouseEvents&&r.mouseEvents(...e))},[e.createElementVNode("div",{class:"gradient",style:e.normalizeStyle(e.unref(i))},null,4),e.createElementVNode("div",I,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"alpha-mask"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)],512)])],32))}})),R=e.defineComponent({name:"GradientPoint"}),T=e.defineComponent(d(u({},R),{props:{point:Object,activePointIndex:Number,index:Number,width:Number,positions:Object,changeActivePointIndex:Function,updateGradientLeft:Function,removePoint:Function},setup(t){const n=t,o=e.reactive({mouseEvents:()=>!1}),r=e.computed((()=>n.activePointIndex===n.index?" active":"")),a=e.computed((()=>({left:n.point.left*(n.width/100)-6+"px"}))),l=e=>{n.changeActivePointIndex(n.index);const t=e.pageX,o=e.pageY,r=t-n.positions.x;return n.updateGradientLeft(n.point.left,n.index,"onStartChange"),{startX:t,startY:o,offsetX:r}},i=(e,{startX:t,offsetX:o})=>{const r=C(o+=e.pageX-t,n.width);return{positions:{offsetX:o,startX:e.pageX},left:r}},u=(e,{startX:t,offsetX:o})=>{const{positions:r,left:a}=i(e,{startX:t,offsetX:o});return n.updateGradientLeft(a,n.index,"onChange"),r},d=(e,{startX:t,offsetX:o})=>{const{positions:r,left:a}=i(e,{startX:t,offsetX:o});return n.updateGradientLeft(a,n.index,"onEndChange"),r};return e.onMounted((()=>{o.mouseEvents=N(l,u,d)})),(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(r)}`),style:e.normalizeStyle(e.unref(a)),onMousedown:i[0]||(i[0]=(...e)=>o.mouseEvents&&o.mouseEvents(...e)),onDblclick:i[1]||(i[1]=()=>n.removePoint(t.index)),onClick:i[2]||(i[2]=e.withModifiers((()=>{}),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(r)}`)},null,2)],38))}})),A=e.defineComponent({name:"GradientPoints"}),M=e.defineComponent(d(u({},A),{props:{points:Array,activePointIndex:Number,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(t){const n=t,o=e.ref(null),r=e.reactive({width:0,positions:{x:0,y:0}}),a=e.computed((()=>({background:E(n.points,"linear",90)}))),l=e=>{const t=C(e.pageX-r.positions.x,r.width);n.addPoint(t)};return e.onMounted((()=>{const e=o.value;if(e){r.width=e.clientWidth;const t=e.getBoundingClientRect();r.positions={x:t.x,y:t.y}}})),(i,u)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient",style:e.normalizeStyle(e.unref(a)),onClick:l},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:o,class:"gradient-slider-container"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.points,((o,a)=>(e.openBlock(),e.createBlock(T,{key:a,"active-point-index":n.activePointIndex,index:a,point:o,width:r.width,positions:r.positions,"change-active-point-index":n.changeActivePointIndex,"update-gradient-left":t.updateGradientLeft,"remove-point":n.removePoint},null,8,["active-point-index","index","point","width","positions","change-active-point-index","update-gradient-left","remove-point"])))),128))],512)],4))}})),Y={class:"picker-area"},z={class:"preview"},L={class:"color-hue-alpha"},H=e.defineComponent({name:"ColorPicker"}),O=e.defineComponent(d(u({},H),{props:{isGradient:Boolean,red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function,points:Array,degree:Number,type:String,activePointIndex:Number,changeGradientControl:Function,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup:t=>(n,o)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(P,{red:t.red,green:t.green,blue:t.blue,hue:t.hue,saturation:t.saturation,value:t.value,"update-color":t.updateColor},null,8,["red","green","blue","hue","saturation","value","update-color"]),t.isGradient?(e.openBlock(),e.createBlock(M,{key:0,type:t.type,degree:t.degree,points:t.points,"active-point-index":t.activePointIndex,"change-active-point-index":t.changeActivePointIndex,"update-gradient-left":t.updateGradientLeft,"add-point":t.addPoint,"remove-point":t.removePoint},null,8,["type","degree","points","active-point-index","change-active-point-index","update-gradient-left","add-point","remove-point"])):e.createCommentVNode("",!0),e.createElementVNode("div",z,[e.createVNode(S,{red:t.red,green:t.green,blue:t.blue,alpha:t.alpha,"is-gradient":t.isGradient,points:t.points,"gradient-degree":t.degree,"gradient-type":t.type},null,8,["red","green","blue","alpha","is-gradient","points","gradient-degree","gradient-type"]),e.createElementVNode("div",L,[e.createVNode(F,{hue:t.hue,saturation:t.saturation,value:t.value,"update-color":t.updateColor},null,8,["hue","saturation","value","update-color"]),e.createVNode(D,{alpha:t.alpha,red:t.red,green:t.green,blue:t.blue,"update-color":t.updateColor},null,8,["alpha","red","green","blue","update-color"])])])]))})),j={class:"input-container"},_={class:"label"},W=e.defineComponent({name:"Input"}),U=((e,t)=>{const n=e.__vccOpts||e;for(const[o,r]of t)n[o]=r;return n})(e.defineComponent(d(u({},W),{props:{value:{default:""},label:{default:""},type:{default:"text"},classes:{default:""},onFocus:{type:Function,default:()=>{}},onBlur:{type:Function,default:()=>{}}},emits:["input","update:value"],setup(t,{emit:n}){const o=t,r=e.computed({get:()=>o.value,set:e=>n("update:value",e)}),a=e=>{n("input",e)};return(n,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`input-field ${o.classes}`)},[e.createElementVNode("div",j,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=t=>e.isRef(r)?r.value=t:null),class:e.normalizeClass(`${o.type}-input input`),onFocus:l[1]||(l[1]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:l[2]||(l[2]=(...e)=>o.onBlur&&o.onBlur(...e)),onInput:a},null,34),[[e.vModelText,e.unref(r)]])]),e.createElementVNode("div",_,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-986fef99"]]),q=e.defineComponent({name:"Preview"}),J=e.defineComponent(d(u({},q),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:null,updateColor:{type:Function,default:e=>!1}},setup(t){const n=t,o=e.reactive({hexValue:f(n.red,n.green,n.blue)}),r=e.computed((()=>f(n.red,n.green,n.blue))),a=e=>{const t=function(e){if(b.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return;const t=p(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,10),16)/255||0),n=t&&c(u({},t));return u(u({},t),n)}return!1}(e.target.value);t&&n.updateColor(t)};return e.watch((()=>[n.red,n.green,n.blue]),(()=>{6===r.value.length&&(o.hexValue=r.value)})),(t,n)=>(e.openBlock(),e.createBlock(U,{value:o.hexValue,label:"hex",classes:"hex",onInput:a},null,8,["value"]))}})),K=e.defineComponent({name:"RGBItem"}),Q=e.defineComponent(d(u({},K),{props:{value:null,type:{default:"text"},label:{default:""},onChange:{type:Function,default:e=>!1}},setup(t){const n=t,o=e.getCurrentInstance(),r=e.reactive({inputValue:n.value||0,inProgress:!1}),a=e=>{var t;const a=+e.target.value;if(Number.isNaN(a)||a<0||a>255)return r.inputValue=n.value,void(null==(t=null==o?void 0:o.proxy)||t.$forceUpdate());r.inputValue=e.target.value,n.onChange(a)},l=()=>{r.inputValue||(r.inputValue=n.value),r.inProgress=!1};return e.watch((()=>n.value),(()=>{n.value!==+r.inputValue&&""!==r.inputValue&&(r.inputValue=n.value)})),(t,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(U,{value:r.inputValue,type:n.type,label:n.label,"on-focus":()=>r.inProgress=!0,"on-blur":l,"in-progress":r.inProgress,classes:"rgb",onInput:a},null,8,["value","type","label","on-focus","in-progress"])]))}})),Z=e.defineComponent({name:"RGB"}),ee=e.defineComponent(d(u({},Z),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:()=>!1}},setup(t){const n=t,o=(e,t)=>{if("alpha"===e)return void n.updateColor({alpha:t/100});const o=c({red:n.red,green:n.green,blue:n.blue,[e]:t});n.updateColor(d(u({},o),{[e]:t}))};return(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Q,{value:n.red,type:"number",label:"R","on-change":e=>o("red",e)},null,8,["value","on-change"]),e.createVNode(Q,{value:n.green,type:"number",label:"G","on-change":e=>o("green",e)},null,8,["value","on-change"]),e.createVNode(Q,{value:n.blue,type:"number",label:"B","on-change":e=>o("blue",e)},null,8,["value","on-change"]),e.createVNode(Q,{value:100*n.alpha,type:"number",label:"Alpha","on-change":e=>o("alpha",e)},null,8,["value","on-change"])],64))}})),te={class:"color-preview-area"},ne={class:"input-group"},oe=e.defineComponent({name:"Preview"}),re=e.defineComponent(d(u({},oe),{props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:e=>!1}},setup(t){const n=t;return(t,o)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",ne,[e.createVNode(J,{red:n.red,green:n.green,blue:n.blue,"update-color":n.updateColor},null,8,["red","green","blue","update-color"]),e.createVNode(ee,{red:n.red,green:n.green,blue:n.blue,alpha:n.alpha,"update-color":n.updateColor},null,8,["red","green","blue","alpha","update-color"])])]))}})),ae=e.defineComponent({name:"Solid"}),le=e.defineComponent(d(u({},ae),{props:{red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},hue:{default:0},saturation:{default:0},value:{default:0}},setup(t){const n=t,o=e.inject("provideData"),r=e.reactive({colorRed:n.red,colorGreen:n.green,colorBlue:n.blue,colorAlpha:n.alpha,colorHue:0,colorSaturation:100,colorValue:100}),a={onStartChange:o.onStartChange,onChange:o.onChange,onEndChange:o.onEndChange},l=e.computed((()=>void 0===n.hue||void 0===n.saturation||void 0===n.value?c({red:n.red,green:n.green,blue:n.blue}):{hue:n.hue,saturation:n.saturation,value:n.value})),i=e.computed((()=>({red:n.red,green:n.green,blue:n.blue,alpha:n.alpha})));e.watch((()=>l.value),(e=>{const{hue:t,saturation:n,value:o}=e;r.colorHue=t,r.colorSaturation=n,r.colorValue=o})),e.watch((()=>i.value),(e=>{const{red:t,green:n,blue:o,alpha:a}=e;r.colorRed=t,r.colorGreen=n,r.colorBlue=o,r.colorAlpha=a}));const u=({red:e,green:t,blue:n,alpha:o,hue:l,saturation:i,value:u},d="onChange")=>{e=y(e,r.colorRed),t=y(t,r.colorGreen),n=y(n,r.colorBlue),o=y(o,r.colorAlpha),l=y(l,r.colorHue),i=y(i,r.colorSaturation),u=y(u,r.colorValue),r.colorRed=e,r.colorGreen=t,r.colorBlue=n,r.colorAlpha=o,r.colorHue=l,r.colorSaturation=i,r.colorValue=u;const c=a[d];c&&c({red:e,green:t,blue:n,alpha:o,hue:l,saturation:i,value:u,style:k(e,t,n,o)})};return e.onMounted((()=>{const{hue:e,saturation:t,value:n}=c({red:r.colorRed,green:r.colorGreen,blue:r.colorBlue});r.colorHue=e,r.colorSaturation=t,r.colorValue=n})),(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(O,{red:r.colorRed,green:r.colorGreen,blue:r.colorBlue,alpha:r.colorAlpha,hue:r.colorHue,saturation:r.colorSaturation,value:r.colorValue,"update-color":u,"is-gradient":!1},null,8,["red","green","blue","alpha","hue","saturation","value"]),e.createVNode(re,{red:r.colorRed,green:r.colorGreen,blue:r.colorBlue,alpha:r.colorAlpha,"update-color":u},null,8,["red","green","blue","alpha"])],64))}})),ie={class:"gradient-controls"},ue={class:"gradient-type"},de={key:0,class:"gradient-degrees-options"},ce=[e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)],se={class:"gradient-degree-value"},pe=e.defineComponent({name:"GradientControls"}),ge=e.defineComponent(d(u({},pe),{props:{type:String,degree:Number,changeGradientControl:{type:Function,default:()=>!1}},setup(t){const n=t,o=e.reactive({disableClick:!1,mouseEvents:()=>!1}),r=e.computed((()=>({transform:`rotate(${n.degree}deg)`}))),a=e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}},l=(e,{centerX:t,centerY:r})=>{o.disableClick=!0;const a=function(e,t,n,o){return Math.atan2(e-n,t-o)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n.changeGradientControl({degree:~~a})},i=e=>{const t=e.target.classList;t.contains("gradient-degrees")||t.contains("icon-rotate")||(o.disableClick=!1)},u=()=>{if(o.disableClick)return void(o.disableClick=!1);let e=(n.degree||0)+45;e>=360&&(e=0),n.changeGradientControl({degree:~~e})};return e.onMounted((()=>{o.mouseEvents=N(a,l,i)})),(t,a)=>(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("div",ue,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===n.type?"active":"")),onClick:a[0]||(a[0]=()=>n.changeGradientControl({type:"linear"}))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===n.type?"active":"")),onClick:a[1]||(a[1]=()=>n.changeGradientControl({type:"radial"}))},null,2)]),"linear"===n.type?(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("div",{class:"gradient-degrees",onMousedown:a[2]||(a[2]=(...e)=>o.mouseEvents&&o.mouseEvents(...e)),onClick:u},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(r))},ce,4)],32),e.createElementVNode("div",se,[e.createElementVNode("p",null,e.toDisplayString(n.degree)+"°",1)])])):e.createCommentVNode("",!0)]))}})),he=e.defineComponent({name:"Gradient"}),ve=e.defineComponent(d(u({},he),{props:{type:{default:"linear"},degree:{default:0},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},onStartChange:null,onChange:null,onEndChange:null},setup(t){const n=t,o=e.inject("provideData"),r=e.reactive({activePointIndex:0,gradientPoints:n.points,activePoint:n.points[0],colorRed:n.points[0].red,colorGreen:n.points[0].green,colorBlue:n.points[0].blue,colorAlpha:n.points[0].alpha,colorHue:0,colorSaturation:100,colorValue:100,gradientType:n.type,gradientDegree:n.degree}),a={onStartChange:o.onStartChange,onChange:o.onChange,onEndChange:o.onEndChange},l=(e=r.activePointIndex)=>{r.gradientPoints.length<=2||(r.gradientPoints.splice(e,1),e>0&&(r.activePointIndex=e-1),n.onChange&&n.onChange({points:r.gradientPoints,type:r.gradientType,degree:r.gradientDegree,style:E(r.gradientPoints,r.gradientType,r.gradientDegree)}))},i=e=>{46!==e.keyCode&&8!==e.keyCode||l(r.activePointIndex)},s=e=>{r.activePointIndex=e,r.activePoint=r.gradientPoints[e];const{red:t,green:n,blue:o,alpha:a}=r.activePoint;r.colorRed=t,r.colorGreen=n,r.colorBlue=o,r.colorAlpha=a;const{hue:l,saturation:i,value:u}=c({red:t,green:n,blue:o});r.colorHue=l,r.colorSaturation=i,r.colorValue=u},p=({type:e,degree:t})=>{e=y(e,r.gradientType),t=y(t,r.gradientDegree),r.gradientType=e,r.gradientDegree=t,n.onChange&&n.onChange({points:r.gradientPoints,type:r.gradientType,degree:r.gradientDegree,style:E(r.gradientPoints,r.gradientType,r.gradientDegree)})},g=({red:e,green:t,blue:n,alpha:o,hue:l,saturation:i,value:c},s="onChange")=>{e=y(e,r.colorRed),t=y(t,r.colorGreen),n=y(n,r.colorBlue),o=y(o,r.colorAlpha),l=y(l,r.colorHue),i=y(i,r.colorSaturation),c=y(c,r.colorValue);const p=r.gradientPoints.slice();p[r.activePointIndex]=d(u({},p[r.activePointIndex]),{red:e,green:t,blue:n,alpha:o}),r.colorRed=e,r.colorGreen=t,r.colorBlue=n,r.colorAlpha=o,r.colorHue=l,r.colorSaturation=i,r.colorValue=c,r.gradientPoints=p;const g=a[s];g&&g({points:p,type:r.gradientType,degree:r.gradientDegree,style:E(p,r.gradientType,r.gradientDegree)})},h=(e,t,n="onChange")=>{r.gradientPoints[t].left=e;const o=a[n];o&&o({points:r.gradientPoints,type:r.gradientType,degree:r.gradientDegree,style:E(r.gradientPoints,r.gradientType,r.gradientDegree)})},v=e=>{r.gradientPoints.push(d(u({},r.gradientPoints[r.activePointIndex]),{left:e})),r.activePointIndex=r.gradientPoints.length-1,n.onChange&&n.onChange({points:r.gradientPoints,type:r.gradientType,degree:r.gradientDegree,style:E(r.gradientPoints,r.gradientType,r.gradientDegree)})};return e.onMounted((()=>{const{hue:e,saturation:t,value:n}=c({red:r.colorRed,green:r.colorGreen,blue:r.colorBlue});r.colorHue=e,r.colorSaturation=t,r.colorValue=n,document.addEventListener("keyup",i)})),e.onBeforeUnmount((()=>{document.removeEventListener("keyup",i)})),(t,n)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(ge,{type:r.gradientType,degree:r.gradientDegree,"change-gradient-control":p},null,8,["type","degree"]),e.createVNode(O,{red:r.colorRed,green:r.colorGreen,blue:r.colorBlue,alpha:r.colorAlpha,hue:r.colorHue,saturation:r.colorSaturation,value:r.colorValue,"update-color":g,"is-gradient":!0,type:r.gradientType,degree:r.gradientDegree,points:r.gradientPoints,"active-point-index":r.activePointIndex,"change-gradient-control":p,"change-active-point-index":s,"update-gradient-left":h,"add-point":v,"remove-point":l},null,8,["red","green","blue","alpha","hue","saturation","value","type","degree","points","active-point-index"]),e.createVNode(re,{red:r.colorRed,green:r.colorGreen,blue:r.colorBlue,alpha:r.colorAlpha,"update-color":g},null,8,["red","green","blue","alpha"])],64))}})),me={class:"ui-color-picker"},fe={class:"btns"},be=e.defineComponent({name:"ColorPicker"});return e.defineComponent(d(u({},be),{props:{isGradient:{type:Boolean,default:!1},color:{default:()=>({red:255,green:0,blue:0,alpha:1,hue:0,saturation:100,value:100})},gradient:{default:()=>({type:"linear",degree:0,points:[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]})},cancelText:{default:"取消"},cancelColor:null,cancelBg:null,confirmText:{default:"确认"},confirmColor:null,confirmBg:null},emits:["onChange","onCancel"],setup(t,{emit:n}){const o=t,r=e.ref();r.value=o.isGradient?u({},o.gradient):u({},o.color),e.provide("provideData",{onChange:e=>{r.value=u({},e)},onStartChange:e=>{r.value=u({},e)},onEndChange:e=>{r.value=u({},e)}});const a=()=>{n("onCancel")},l=()=>{n("onChange",u({},r.value))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",me,[o.isGradient?(e.openBlock(),e.createBlock(ve,{key:0,points:o.gradient.points,type:o.gradient.type,degree:o.gradient.degree},null,8,["points","type","degree"])):(e.openBlock(),e.createBlock(le,{key:1,red:o.color.red,green:o.color.green,blue:o.color.blue,alpha:o.color.alpha,hue:o.color.hue,saturation:o.color.saturation,value:o.color.value},null,8,["red","green","blue","alpha","hue","saturation","value"])),e.createElementVNode("div",fe,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:o.cancelColor,backgroundColor:o.cancelBg}),onClick:a},e.toDisplayString(o.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:o.confirmColor,backgroundColor:o.confirmBg}),onClick:l},e.toDisplayString(o.confirmText),5)])]))}}))}));

2

index.d.ts

@@ -6,3 +6,3 @@ /*

* @LastEditors: June
* @LastEditTime: 2023-04-26 12:11:46
* @LastEditTime: 2023-06-27 22:46:07
*/

@@ -9,0 +9,0 @@ declare module 'color-gradient-picker-vue3' {

6

package.json
{
"name": "color-gradient-picker-vue3",
"version": "1.0.3",
"version": "1.1.0",
"type": "module",

@@ -25,3 +25,2 @@ "author": "June",

"dist",
"lib",
"index.d.ts"

@@ -58,3 +57,6 @@ ],

"url": "https://github.com/Qiu-Jun/color-gradient-picker-vue3.git/issues"
},
"devDependencies": {
"unplugin-auto-import": "^0.16.4"
}
}
dist/style.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc