@aurouscia/au-color-picker 1.0.2-dev.2 → 1.0.2-dev.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/au-color-picker.css +1 -1
- package/dist/au-color-picker.es.js +111 -106
- package/package.json +1 -1
package/dist/au-color-picker.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.acpRingBody[data-v-
|
|
1
|
+
.acpRingBody[data-v-4e923b91]{position:relative}canvas[data-v-4e923b91]{position:absolute;inset:0;width:100%;height:100%}[data-v-dc351014]{margin:0;padding:0}.acpSep[data-v-dc351014]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-dc351014]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-dc351014]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-dc351014]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-dc351014]:hover{color:#000}.acpEntry[data-v-dc351014]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-dc351014]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-dc351014]{position:relative;width:fit-content}.acp label[data-v-dc351014]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-dc351014]{cursor:pointer}.acpPackageName[data-v-dc351014]{position:absolute;left:2px;bottom:3px;font-size:8px;color:#ccc;text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none}.acpParams[data-v-dc351014]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-dc351014],.acpParams input[data-v-dc351014]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-dc351014]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-dc351014]{text-align:center}.acpParams .acpSingleInput input[data-v-dc351014]{width:120px}.acpParams .acpTripleInputs[data-v-dc351014]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-dc351014]{width:40px}[data-v-1e965bbc]{margin:0;padding:0}.acpSep[data-v-1e965bbc]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-1e965bbc]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-1e965bbc]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-1e965bbc]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-1e965bbc]:hover{color:#000}.acpEntry[data-v-1e965bbc]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-1e965bbc]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-1e965bbc]{position:relative;width:fit-content}.acp label[data-v-1e965bbc]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-1e965bbc]{cursor:pointer}.acpNamedPresets[data-v-1e965bbc]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-1e965bbc]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-1e965bbc]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-1e965bbc]:hover{color:#000}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { defineComponent as te, ref as I, onMounted as ye, onUnmounted as he, createElementBlock as N, openBlock as R, normalizeStyle as j, isRef as xe, createElementVNode as c, computed as F, onBeforeMount as ue, watch as W, createCommentVNode as G, unref as x, normalizeClass as Pe, createVNode as ce, withDirectives as Q, vModelSelect as ke, vModelRadio as oe, Fragment as Ce, renderList as Se, toDisplayString as we } from "vue";
|
|
2
2
|
import M from "color-convert";
|
|
3
3
|
function Ie(i, h) {
|
|
4
|
-
const m = i.x - h.x,
|
|
5
|
-
return m ** 2 +
|
|
4
|
+
const m = i.x - h.x, l = i.y - h.y;
|
|
5
|
+
return m ** 2 + l ** 2;
|
|
6
6
|
}
|
|
7
7
|
function Be(i, h) {
|
|
8
|
-
const m = i.x - h.x,
|
|
9
|
-
return Math.atan2(
|
|
8
|
+
const m = i.x - h.x, l = i.y - h.y;
|
|
9
|
+
return Math.atan2(l, m);
|
|
10
10
|
}
|
|
11
11
|
const T = 400, O = 400, Y = 200, be = 200, le = 190, se = 150, _ = 200, ae = 16, ie = 3, Ve = /* @__PURE__ */ te({
|
|
12
12
|
__name: "AuColorPickerRing",
|
|
@@ -15,73 +15,78 @@ const T = 400, O = 400, Y = 200, be = 200, le = 190, se = 150, _ = 200, ae = 16,
|
|
|
15
15
|
},
|
|
16
16
|
emits: ["changed"],
|
|
17
17
|
setup(i, { expose: h, emit: m }) {
|
|
18
|
-
const
|
|
18
|
+
const l = I(), g = I();
|
|
19
19
|
let u, d;
|
|
20
20
|
const k = { x: 199, y: 199 }, A = (le + se) / 2, $ = le ** 2, U = se ** 2, b = (T - _) / 2, H = b + _, P = I(0), S = I(100), w = I(100), V = i;
|
|
21
21
|
let s;
|
|
22
22
|
function r() {
|
|
23
23
|
try {
|
|
24
|
-
const
|
|
25
|
-
if (!
|
|
24
|
+
const e = l.value?.getContext("2d"), t = g.value?.getContext("2d");
|
|
25
|
+
if (!e || !t)
|
|
26
26
|
throw Error("canvas context getting error");
|
|
27
27
|
if (V.initialHex) {
|
|
28
|
-
const
|
|
29
|
-
P.value =
|
|
28
|
+
const o = M.hex.hsv(V.initialHex);
|
|
29
|
+
P.value = o[0], S.value = o[1], w.value = o[2];
|
|
30
30
|
}
|
|
31
|
-
u =
|
|
32
|
-
u.drawImage(
|
|
31
|
+
u = e, d = t, s = u.createImageData(T, O), p(), y(), K(), createImageBitmap(s).then((o) => {
|
|
32
|
+
u.drawImage(o, 0, 0);
|
|
33
33
|
});
|
|
34
|
-
} catch (
|
|
35
|
-
const
|
|
36
|
-
|
|
34
|
+
} catch (e) {
|
|
35
|
+
const t = document.createElement("div");
|
|
36
|
+
t.innerText = JSON.stringify({
|
|
37
|
+
name: e.name,
|
|
38
|
+
message: e.message,
|
|
39
|
+
stack: e.stack,
|
|
40
|
+
str: String(e)
|
|
41
|
+
}, null, 2), document.documentElement.appendChild(t);
|
|
37
42
|
}
|
|
38
43
|
}
|
|
39
44
|
function p() {
|
|
40
|
-
for (let
|
|
41
|
-
for (let
|
|
42
|
-
const
|
|
43
|
-
if (X(
|
|
44
|
-
const f =
|
|
45
|
+
for (let e = 0; e < T; e++)
|
|
46
|
+
for (let t = 0; t < O; t++) {
|
|
47
|
+
const o = { x: e, y: t };
|
|
48
|
+
if (X(o)) {
|
|
49
|
+
const f = o.y * T * 4 + o.x * 4, B = D(o), q = M.hsv.rgb([B, 100, 100]);
|
|
45
50
|
s.data[f] = q[0], s.data[f + 1] = q[1], s.data[f + 2] = q[2], s.data[f + 3] = 255;
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
|
-
function D(
|
|
50
|
-
return 360 * ((Be(
|
|
54
|
+
function D(e) {
|
|
55
|
+
return 360 * ((Be(e, k) + Math.PI) / (2 * Math.PI));
|
|
51
56
|
}
|
|
52
|
-
function X(
|
|
53
|
-
const
|
|
54
|
-
return
|
|
57
|
+
function X(e) {
|
|
58
|
+
const t = Ie(k, e);
|
|
59
|
+
return t > U && t < $;
|
|
55
60
|
}
|
|
56
61
|
function y() {
|
|
57
|
-
for (let
|
|
58
|
-
for (let
|
|
59
|
-
const
|
|
60
|
-
if (a(
|
|
61
|
-
const f =
|
|
62
|
+
for (let e = 0; e < T; e++)
|
|
63
|
+
for (let t = 0; t < O; t++) {
|
|
64
|
+
const o = { x: e, y: t };
|
|
65
|
+
if (a(o)) {
|
|
66
|
+
const f = o.y * T * 4 + o.x * 4, { s: B, v: q } = n(o), L = M.hsv.rgb([P.value, B, q]);
|
|
62
67
|
s.data[f] = L[0], s.data[f + 1] = L[1], s.data[f + 2] = L[2], s.data[f + 3] = 255;
|
|
63
68
|
}
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
|
-
function
|
|
67
|
-
const
|
|
68
|
-
let f =
|
|
71
|
+
function n(e) {
|
|
72
|
+
const t = e.x - b, o = e.y - b;
|
|
73
|
+
let f = t / _, B = 1 - o / _;
|
|
69
74
|
return f > 1 ? f = 1 : f < 0 && (f = 0), B > 1 ? B = 1 : B < 0 && (B = 0), { s: 100 * f, v: 100 * B };
|
|
70
75
|
}
|
|
71
|
-
function a(
|
|
72
|
-
return !(
|
|
76
|
+
function a(e) {
|
|
77
|
+
return !(e.x < b || e.x > H || e.y < b || e.y > H);
|
|
73
78
|
}
|
|
74
79
|
let E = !1, v = "none", C = I(!1);
|
|
75
|
-
function J(
|
|
76
|
-
if (E ||
|
|
80
|
+
function J(e, t) {
|
|
81
|
+
if (E || t && !C.value)
|
|
77
82
|
return;
|
|
78
83
|
E = !0;
|
|
79
|
-
const
|
|
80
|
-
if (v === "none" && (a(
|
|
84
|
+
const o = fe(e);
|
|
85
|
+
if (v === "none" && (a(o) ? v = "square" : X(o) && (v = "ring")), v === "ring" && (e.preventDefault(), P.value = D(o), y(), createImageBitmap(s).then((f) => {
|
|
81
86
|
u.drawImage(f, 0, 0);
|
|
82
87
|
})), v === "square") {
|
|
83
|
-
|
|
84
|
-
const f =
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
const f = n(o);
|
|
85
90
|
S.value = f.s, w.value = f.v;
|
|
86
91
|
}
|
|
87
92
|
v !== "none" && K(!0), E = !1;
|
|
@@ -89,36 +94,36 @@ const T = 400, O = 400, Y = 200, be = 200, le = 190, se = 150, _ = 200, ae = 16,
|
|
|
89
94
|
function Z() {
|
|
90
95
|
v = "none", C.value = !1;
|
|
91
96
|
}
|
|
92
|
-
function fe(
|
|
93
|
-
let
|
|
94
|
-
if (!
|
|
97
|
+
function fe(e) {
|
|
98
|
+
let t, o;
|
|
99
|
+
if (!l.value)
|
|
95
100
|
return { x: -1, y: -1 };
|
|
96
|
-
if ("touches" in
|
|
97
|
-
const f =
|
|
98
|
-
|
|
101
|
+
if ("touches" in e) {
|
|
102
|
+
const f = l.value.getBoundingClientRect();
|
|
103
|
+
t = e.touches[0].clientX - f.left, o = e.touches[0].clientY - f.top;
|
|
99
104
|
} else
|
|
100
|
-
|
|
101
|
-
return
|
|
105
|
+
t = e.offsetX, o = e.offsetY;
|
|
106
|
+
return t = t * T / Y, o = o * T / Y, { x: t, y: o };
|
|
102
107
|
}
|
|
103
|
-
function K(
|
|
104
|
-
if (
|
|
108
|
+
function K(e) {
|
|
109
|
+
if (e) {
|
|
105
110
|
const ge = M.hsv.hex([P.value, S.value, w.value]);
|
|
106
111
|
me("changed", ge);
|
|
107
112
|
}
|
|
108
|
-
const
|
|
109
|
-
d.reset(), d.lineWidth = 4, d.strokeStyle = "black", d.beginPath(), d.arc(
|
|
113
|
+
const t = (P.value / 360 * 2 + 1) * Math.PI, o = Math.cos(t) * A + T / 2, f = Math.sin(t) * A + O / 2, B = S.value / 100 * _ + b, q = (1 - w.value / 100) * _ + b;
|
|
114
|
+
d.reset(), d.lineWidth = 4, d.strokeStyle = "black", d.beginPath(), d.arc(o, f, ae - 2, 0, 2 * Math.PI), d.stroke(), d.beginPath(), d.arc(o, f, ie, 0, 2 * Math.PI), d.fill();
|
|
110
115
|
const L = w.value > 50 ? "black" : "#ddd";
|
|
111
116
|
d.strokeStyle = L, d.fillStyle = L, d.beginPath(), d.arc(B, q, ae - 2, 0, 2 * Math.PI), d.stroke(), d.beginPath(), d.arc(B, q, ie, 0, 2 * Math.PI), d.fill();
|
|
112
117
|
}
|
|
113
|
-
function pe(
|
|
118
|
+
function pe(e) {
|
|
114
119
|
try {
|
|
115
|
-
const
|
|
116
|
-
throw P.value =
|
|
117
|
-
u.drawImage(
|
|
120
|
+
const t = M.hex.hsv(e);
|
|
121
|
+
throw P.value = t[0], S.value = t[1], w.value = t[2], y(), createImageBitmap(s).then((o) => {
|
|
122
|
+
u.drawImage(o, 0, 0);
|
|
118
123
|
}), K(), new Error("hi");
|
|
119
|
-
} catch (
|
|
120
|
-
const
|
|
121
|
-
console.error(
|
|
124
|
+
} catch (t) {
|
|
125
|
+
const o = document.createElement("div");
|
|
126
|
+
console.error(t.message), o.innerText = JSON.stringify(t.message), document.documentElement.appendChild(o);
|
|
122
127
|
}
|
|
123
128
|
}
|
|
124
129
|
const me = m;
|
|
@@ -126,22 +131,22 @@ const T = 400, O = 400, Y = 200, be = 200, le = 190, se = 150, _ = 200, ae = 16,
|
|
|
126
131
|
r(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
|
|
127
132
|
}), he(() => {
|
|
128
133
|
window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
|
|
129
|
-
}), (
|
|
134
|
+
}), (e, t) => (R(), N("div", {
|
|
130
135
|
class: "acpRingBody",
|
|
131
136
|
style: j({ width: Y + "px", height: be + "px" }),
|
|
132
137
|
onTouchstart: J,
|
|
133
138
|
onTouchmove: J,
|
|
134
139
|
onTouchend: Z,
|
|
135
|
-
onMousemove:
|
|
136
|
-
onMousedown:
|
|
137
|
-
J(
|
|
140
|
+
onMousemove: t[0] || (t[0] = (o) => J(o, !0)),
|
|
141
|
+
onMousedown: t[1] || (t[1] = (o) => {
|
|
142
|
+
J(o), xe(C) ? C.value = !0 : C = !0;
|
|
138
143
|
})
|
|
139
144
|
}, [
|
|
140
145
|
c("canvas", {
|
|
141
146
|
width: T,
|
|
142
147
|
height: O,
|
|
143
148
|
ref_key: "cvs",
|
|
144
|
-
ref:
|
|
149
|
+
ref: l
|
|
145
150
|
}, null, 512),
|
|
146
151
|
c("canvas", {
|
|
147
152
|
width: T,
|
|
@@ -153,15 +158,15 @@ const T = 400, O = 400, Y = 200, be = 200, le = 190, se = 150, _ = 200, ae = 16,
|
|
|
153
158
|
}
|
|
154
159
|
}), ne = (i, h) => {
|
|
155
160
|
const m = i.__vccOpts || i;
|
|
156
|
-
for (const [
|
|
157
|
-
m[
|
|
161
|
+
for (const [l, g] of h)
|
|
162
|
+
m[l] = g;
|
|
158
163
|
return m;
|
|
159
|
-
}, Te = /* @__PURE__ */ ne(Ve, [["__scopeId", "data-v-
|
|
164
|
+
}, Te = /* @__PURE__ */ ne(Ve, [["__scopeId", "data-v-4e923b91"]]);
|
|
160
165
|
function ee(i) {
|
|
161
166
|
return /^#([0-9A-F]{3}){1,2}$/i.test(i);
|
|
162
167
|
}
|
|
163
168
|
function de(i, h) {
|
|
164
|
-
const m = I(!1),
|
|
169
|
+
const m = I(!1), l = F(() => {
|
|
165
170
|
let k = {};
|
|
166
171
|
return m.value || (k.boxShadow = "none"), i.entryStyles && Object.assign(k, i.entryStyles), m.value && (k.transition = "0s", Object.assign(k, i.entryActiveStyles)), k.backgroundColor = h.value, k;
|
|
167
172
|
});
|
|
@@ -178,7 +183,7 @@ function de(i, h) {
|
|
|
178
183
|
}
|
|
179
184
|
m.value = !m.value;
|
|
180
185
|
}
|
|
181
|
-
return { panelShow: m, closePanel: g, togglePanel: d, entryStylesActual:
|
|
186
|
+
return { panelShow: m, closePanel: g, togglePanel: d, entryStylesActual: l };
|
|
182
187
|
}
|
|
183
188
|
function re() {
|
|
184
189
|
window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
|
|
@@ -190,11 +195,11 @@ function ve(i) {
|
|
|
190
195
|
return {
|
|
191
196
|
panelStyles: F(() => {
|
|
192
197
|
const m = i.panelBaseZIndex;
|
|
193
|
-
let
|
|
198
|
+
let l, g;
|
|
194
199
|
const u = i.pos;
|
|
195
|
-
return typeof u == "number" ?
|
|
200
|
+
return typeof u == "number" ? l = u + "px" : u == "left" ? g = "0px" : l = "0px", {
|
|
196
201
|
zIndex: (m || 0) + 100,
|
|
197
|
-
left:
|
|
202
|
+
left: l,
|
|
198
203
|
right: g
|
|
199
204
|
};
|
|
200
205
|
})
|
|
@@ -225,23 +230,23 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
225
230
|
},
|
|
226
231
|
emits: ["done", "update:modelValue"],
|
|
227
232
|
setup(i, { expose: h, emit: m }) {
|
|
228
|
-
const
|
|
233
|
+
const l = i, g = I(), u = I("#ff0000"), { panelShow: d, closePanel: k, togglePanel: A, entryStylesActual: $ } = de(l, u), { panelStyles: U } = ve(l);
|
|
229
234
|
function b(y) {
|
|
230
235
|
u.value = z(y), r();
|
|
231
236
|
}
|
|
232
237
|
const H = I("hex"), P = F(() => M.hex.rgb(u.value)), S = F(() => M.hex.hsv(u.value));
|
|
233
238
|
function w(y) {
|
|
234
|
-
const
|
|
235
|
-
if ("value" in
|
|
236
|
-
const a =
|
|
239
|
+
const n = y.target;
|
|
240
|
+
if ("value" in n) {
|
|
241
|
+
const a = n.value;
|
|
237
242
|
if (a && ee(a)) {
|
|
238
243
|
u.value = z(a), g.value?.enforceTo(u.value), r();
|
|
239
244
|
return;
|
|
240
245
|
}
|
|
241
|
-
|
|
246
|
+
n.value = u.value;
|
|
242
247
|
}
|
|
243
248
|
}
|
|
244
|
-
function V(y,
|
|
249
|
+
function V(y, n) {
|
|
245
250
|
const a = y.target;
|
|
246
251
|
if ("value" in a) {
|
|
247
252
|
const E = a.value;
|
|
@@ -252,13 +257,13 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
252
257
|
else {
|
|
253
258
|
v > 255 ? v = 255 : v < 0 && (v = 0);
|
|
254
259
|
const C = [...P.value];
|
|
255
|
-
|
|
260
|
+
n == "r" ? C[0] = v : n == "g" ? C[1] = v : C[2] = v, u.value = z(M.rgb.hex(C)), g.value?.enforceTo(u.value), a.value = v.toString(), r();
|
|
256
261
|
return;
|
|
257
262
|
}
|
|
258
263
|
}
|
|
259
264
|
}
|
|
260
265
|
}
|
|
261
|
-
function s(y,
|
|
266
|
+
function s(y, n) {
|
|
262
267
|
const a = y.target;
|
|
263
268
|
if ("value" in a) {
|
|
264
269
|
const E = a.value;
|
|
@@ -267,9 +272,9 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
267
272
|
if (isNaN(v))
|
|
268
273
|
a.value = "0";
|
|
269
274
|
else {
|
|
270
|
-
|
|
275
|
+
n === "h" ? v > 359 && (v = 359) : v > 100 && (v = 100), v < 0 && (v = 0);
|
|
271
276
|
const C = [...S.value];
|
|
272
|
-
|
|
277
|
+
n == "h" ? C[0] = v : n == "s" ? C[1] = v : C[2] = v, u.value = z(M.hsv.hex(C)), a.value = v.toString(), g.value?.enforceTo(u.value), r();
|
|
273
278
|
return;
|
|
274
279
|
}
|
|
275
280
|
}
|
|
@@ -283,30 +288,30 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
283
288
|
}
|
|
284
289
|
function D(y) {
|
|
285
290
|
if (ee(y)) {
|
|
286
|
-
const
|
|
287
|
-
u.value =
|
|
291
|
+
const n = z(y);
|
|
292
|
+
u.value = n, g.value?.enforceTo(n);
|
|
288
293
|
}
|
|
289
294
|
}
|
|
290
295
|
ue(() => {
|
|
291
|
-
|
|
296
|
+
l.modelValue ? D(l.modelValue) : l.initial && D(l.initial);
|
|
292
297
|
});
|
|
293
298
|
const X = m;
|
|
294
|
-
return h({ closePanel: k, getCurrentHex: p, enforceTo: D }), W(() =>
|
|
299
|
+
return h({ closePanel: k, getCurrentHex: p, enforceTo: D }), W(() => l.modelValue, (y) => {
|
|
295
300
|
y && y !== u.value && D(y);
|
|
296
301
|
}), W(d, (y) => {
|
|
297
302
|
y === !1 && X("done");
|
|
298
|
-
}), (y,
|
|
303
|
+
}), (y, n) => (R(), N("div", Ne, [
|
|
299
304
|
c("div", {
|
|
300
305
|
class: Pe(i.entryClassName || "acpEntry"),
|
|
301
306
|
style: j(x($)),
|
|
302
|
-
onClick:
|
|
307
|
+
onClick: n[0] || (n[0] = //@ts-ignore
|
|
303
308
|
(...a) => x(A) && x(A)(...a))
|
|
304
309
|
}, null, 6),
|
|
305
310
|
x(d) ? (R(), N("div", {
|
|
306
311
|
key: 0,
|
|
307
312
|
class: "acpPanel",
|
|
308
313
|
style: j(x(U)),
|
|
309
|
-
onClick:
|
|
314
|
+
onClick: n[10] || (n[10] = (a) => i.panelClickStopPropagation && a.stopPropagation())
|
|
310
315
|
}, [
|
|
311
316
|
c("div", Re, [
|
|
312
317
|
ce(Te, {
|
|
@@ -319,8 +324,8 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
319
324
|
]),
|
|
320
325
|
c("div", De, [
|
|
321
326
|
Q(c("select", {
|
|
322
|
-
"onUpdate:modelValue":
|
|
323
|
-
}, [...
|
|
327
|
+
"onUpdate:modelValue": n[1] || (n[1] = (a) => H.value = a)
|
|
328
|
+
}, [...n[11] || (n[11] = [
|
|
324
329
|
c("option", { value: "hex" }, "HEX", -1),
|
|
325
330
|
c("option", { value: "rgb" }, "RGB", -1),
|
|
326
331
|
c("option", { value: "hsv" }, "HSV", -1)
|
|
@@ -337,41 +342,41 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
337
342
|
])) : H.value == "rgb" ? (R(), N("div", Me, [
|
|
338
343
|
c("input", {
|
|
339
344
|
value: P.value[0],
|
|
340
|
-
onBlur:
|
|
345
|
+
onBlur: n[2] || (n[2] = (a) => V(a, "r"))
|
|
341
346
|
}, null, 40, Ae),
|
|
342
347
|
c("input", {
|
|
343
348
|
value: P.value[1],
|
|
344
|
-
onBlur:
|
|
349
|
+
onBlur: n[3] || (n[3] = (a) => V(a, "g"))
|
|
345
350
|
}, null, 40, $e),
|
|
346
351
|
c("input", {
|
|
347
352
|
value: P.value[2],
|
|
348
|
-
onBlur:
|
|
353
|
+
onBlur: n[4] || (n[4] = (a) => V(a, "b"))
|
|
349
354
|
}, null, 40, qe)
|
|
350
355
|
])) : (R(), N("div", Ue, [
|
|
351
356
|
c("input", {
|
|
352
357
|
value: S.value[0],
|
|
353
|
-
onBlur:
|
|
358
|
+
onBlur: n[5] || (n[5] = (a) => s(a, "h"))
|
|
354
359
|
}, null, 40, Le),
|
|
355
360
|
c("input", {
|
|
356
361
|
value: S.value[1],
|
|
357
|
-
onBlur:
|
|
362
|
+
onBlur: n[6] || (n[6] = (a) => s(a, "s"))
|
|
358
363
|
}, null, 40, Oe),
|
|
359
364
|
c("input", {
|
|
360
365
|
value: S.value[2],
|
|
361
|
-
onBlur:
|
|
366
|
+
onBlur: n[7] || (n[7] = (a) => s(a, "v"))
|
|
362
367
|
}, null, 40, _e)
|
|
363
368
|
]))
|
|
364
369
|
]),
|
|
365
370
|
c("div", ze, [
|
|
366
371
|
c("button", {
|
|
367
|
-
onClick:
|
|
372
|
+
onClick: n[8] || (n[8] = //@ts-ignore
|
|
368
373
|
(...a) => x(k) && x(k)(...a))
|
|
369
374
|
}, "OK")
|
|
370
375
|
]),
|
|
371
376
|
i.showPackageName ? (R(), N("div", {
|
|
372
377
|
key: 0,
|
|
373
378
|
class: "acpPackageName",
|
|
374
|
-
onClick:
|
|
379
|
+
onClick: n[9] || (n[9] = //@ts-ignore
|
|
375
380
|
(...a) => x(re) && x(re)(...a))
|
|
376
381
|
}, " au-color-picker ")) : G("", !0)
|
|
377
382
|
], 4)) : G("", !0)
|
|
@@ -397,10 +402,10 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
397
402
|
},
|
|
398
403
|
emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
|
|
399
404
|
setup(i, { expose: h, emit: m }) {
|
|
400
|
-
const
|
|
405
|
+
const l = i, g = I(), u = I(), d = I("#ff0000"), k = F(() => {
|
|
401
406
|
let s = null;
|
|
402
|
-
return g.value && (s =
|
|
403
|
-
}), { panelShow: A, closePanel: $, togglePanel: U, entryStylesActual: b } = de(
|
|
407
|
+
return g.value && (s = l.presets?.find((p) => p.name == g.value)?.colorHex), s || d.value;
|
|
408
|
+
}), { panelShow: A, closePanel: $, togglePanel: U, entryStylesActual: b } = de(l, k), { panelStyles: H } = ve(l);
|
|
404
409
|
function P(s) {
|
|
405
410
|
g.value = s?.name, S("update:modelValueSelectedPreset", s?.name);
|
|
406
411
|
}
|
|
@@ -416,17 +421,17 @@ const Ne = { class: "acp" }, Re = { class: "acpRing" }, De = { class: "acpParams
|
|
|
416
421
|
}
|
|
417
422
|
function V(s) {
|
|
418
423
|
s || P(void 0);
|
|
419
|
-
const r =
|
|
424
|
+
const r = l.presets?.find((p) => p.name === s);
|
|
420
425
|
r && P(r);
|
|
421
426
|
}
|
|
422
427
|
return h({ closePanel: $, enforceCustomValueTo: w, enforcePresetTo: V }), W(A, (s) => {
|
|
423
428
|
s === !1 && S("done");
|
|
424
|
-
}), W(() =>
|
|
429
|
+
}), W(() => l.modelValue, (s) => {
|
|
425
430
|
s && w(s);
|
|
426
|
-
}), W(() =>
|
|
431
|
+
}), W(() => l.modelValueSelectedPreset, (s) => {
|
|
427
432
|
V(s);
|
|
428
433
|
}), ue(() => {
|
|
429
|
-
|
|
434
|
+
l.modelValue ? w(l.modelValue) : l.initial && w(l.initial), l.modelValueSelectedPreset ? V(l.modelValueSelectedPreset) : l.initialSelectedPreset && V(l.initialSelectedPreset);
|
|
430
435
|
}), (s, r) => (R(), N("div", Xe, [
|
|
431
436
|
c("div", {
|
|
432
437
|
class: "acpEntry",
|