@aurouscia/au-color-picker 1.0.2-dev.4 → 1.1.0
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/README.md +5 -0
- package/dist/au-color-picker.css +1 -1
- package/dist/au-color-picker.es.js +96 -96
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/au-color-picker.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.acpRingBody[data-v-
|
|
1
|
+
.acpRingBody[data-v-1352f0d3]{position:relative}canvas[data-v-1352f0d3]{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,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, createElementBlock as T, openBlock as N, normalizeStyle as j, isRef as Pe, createElementVNode as
|
|
1
|
+
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, createElementBlock as T, openBlock as N, normalizeStyle as j, isRef as Pe, createElementVNode as d, computed as K, onBeforeMount as ce, watch as W, createCommentVNode as Q, unref as h, normalizeClass as ke, createVNode as de, withDirectives as ee, vModelSelect as Ce, vModelRadio as le, Fragment as Se, renderList as we, toDisplayString as Ie } from "vue";
|
|
2
2
|
import M from "color-convert";
|
|
3
|
-
function be(l,
|
|
4
|
-
const m = l.x -
|
|
3
|
+
function be(l, P) {
|
|
4
|
+
const m = l.x - P.x, t = l.y - P.y;
|
|
5
5
|
return m ** 2 + t ** 2;
|
|
6
6
|
}
|
|
7
|
-
function Be(l,
|
|
8
|
-
const m = l.x -
|
|
7
|
+
function Be(l, P) {
|
|
8
|
+
const m = l.x - P.x, t = l.y - P.y;
|
|
9
9
|
return Math.atan2(t, m);
|
|
10
10
|
}
|
|
11
11
|
const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16, re = 3, Re = /* @__PURE__ */ ne({
|
|
@@ -14,9 +14,9 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
14
14
|
initialHex: {}
|
|
15
15
|
},
|
|
16
16
|
emits: ["changed"],
|
|
17
|
-
setup(l, { expose:
|
|
17
|
+
setup(l, { expose: P, emit: m }) {
|
|
18
18
|
const t = I(), y = I();
|
|
19
|
-
let u,
|
|
19
|
+
let u, c;
|
|
20
20
|
const C = { x: 199, y: 199 }, A = (se + ae) / 2, E = se ** 2, L = ae ** 2, V = (B - z) / 2, D = V + z, k = I(0), S = I(100), w = I(100), R = l;
|
|
21
21
|
let s;
|
|
22
22
|
function a() {
|
|
@@ -32,19 +32,19 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
32
32
|
const r = M.hex.hsv(R.initialHex);
|
|
33
33
|
k.value = r[0], S.value = r[1], w.value = r[2];
|
|
34
34
|
}
|
|
35
|
-
u = n,
|
|
35
|
+
u = n, c = i, s = u.createImageData(B, U), H(), e(), G(), a();
|
|
36
36
|
}
|
|
37
37
|
function H() {
|
|
38
38
|
for (let n = 0; n < B; n++)
|
|
39
39
|
for (let i = 0; i < U; i++) {
|
|
40
40
|
const r = { x: n, y: i };
|
|
41
41
|
if (g(r)) {
|
|
42
|
-
const p = r.y * B * 4 + r.x * 4, b =
|
|
42
|
+
const p = r.y * B * 4 + r.x * 4, b = F(r), q = M.hsv.rgb([b, 100, 100]);
|
|
43
43
|
s.data[p] = q[0], s.data[p + 1] = q[1], s.data[p + 2] = q[2], s.data[p + 3] = 255;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function F(n) {
|
|
48
48
|
return 360 * ((Be(n, C) + Math.PI) / (2 * Math.PI));
|
|
49
49
|
}
|
|
50
50
|
function g(n) {
|
|
@@ -69,21 +69,21 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
69
69
|
function $(n) {
|
|
70
70
|
return !(n.x < V || n.x > D || n.y < V || n.y > D);
|
|
71
71
|
}
|
|
72
|
-
let f = !1,
|
|
72
|
+
let f = !1, x = "none", X = I(!1);
|
|
73
73
|
function Y(n, i) {
|
|
74
|
-
if (f || i && !
|
|
74
|
+
if (f || i && !X.value)
|
|
75
75
|
return;
|
|
76
76
|
f = !0;
|
|
77
77
|
const r = pe(n);
|
|
78
|
-
if (
|
|
78
|
+
if (x === "none" && ($(r) ? x = "square" : g(r) && (x = "ring")), x === "ring" && (n.preventDefault(), k.value = F(r), e(), a()), x === "square") {
|
|
79
79
|
n.preventDefault();
|
|
80
80
|
const p = o(r);
|
|
81
81
|
S.value = p.s, w.value = p.v;
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
x !== "none" && G(!0), f = !1;
|
|
84
84
|
}
|
|
85
|
-
function
|
|
86
|
-
|
|
85
|
+
function Z() {
|
|
86
|
+
x = "none", X.value = !1;
|
|
87
87
|
}
|
|
88
88
|
function pe(n) {
|
|
89
89
|
let i, r;
|
|
@@ -102,37 +102,37 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
102
102
|
ye("changed", ge);
|
|
103
103
|
}
|
|
104
104
|
const i = (k.value / 360 * 2 + 1) * Math.PI, r = Math.cos(i) * A + B / 2, p = Math.sin(i) * A + U / 2, b = S.value / 100 * z + V, q = (1 - w.value / 100) * z + V;
|
|
105
|
-
|
|
105
|
+
c.clearRect(0, 0, B, U), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, p, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, p, re, 0, 2 * Math.PI), c.fill();
|
|
106
106
|
const _ = w.value > 50 ? "black" : "#ddd";
|
|
107
|
-
|
|
107
|
+
c.strokeStyle = _, c.fillStyle = _, c.beginPath(), c.arc(b, q, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(b, q, re, 0, 2 * Math.PI), c.fill();
|
|
108
108
|
}
|
|
109
109
|
function me(n) {
|
|
110
110
|
const i = M.hex.hsv(n);
|
|
111
111
|
k.value = i[0], S.value = i[1], w.value = i[2], e(), a(), G();
|
|
112
112
|
}
|
|
113
113
|
const ye = m;
|
|
114
|
-
return
|
|
115
|
-
v(), window.addEventListener("touchend",
|
|
114
|
+
return P({ enforceTo: me }), xe(() => {
|
|
115
|
+
v(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
|
|
116
116
|
}), he(() => {
|
|
117
|
-
window.removeEventListener("touchend",
|
|
117
|
+
window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
|
|
118
118
|
}), (n, i) => (N(), T("div", {
|
|
119
119
|
class: "acpRingBody",
|
|
120
120
|
style: j({ width: J + "px", height: Ve + "px" }),
|
|
121
121
|
onTouchstart: Y,
|
|
122
122
|
onTouchmove: Y,
|
|
123
|
-
onTouchend:
|
|
123
|
+
onTouchend: Z,
|
|
124
124
|
onMousemove: i[0] || (i[0] = (r) => Y(r, !0)),
|
|
125
125
|
onMousedown: i[1] || (i[1] = (r) => {
|
|
126
|
-
Y(r), Pe(
|
|
126
|
+
Y(r), Pe(X) ? X.value = !0 : X = !0;
|
|
127
127
|
})
|
|
128
128
|
}, [
|
|
129
|
-
|
|
129
|
+
d("canvas", {
|
|
130
130
|
width: B,
|
|
131
131
|
height: U,
|
|
132
132
|
ref_key: "cvs",
|
|
133
133
|
ref: t
|
|
134
134
|
}, null, 512),
|
|
135
|
-
|
|
135
|
+
d("canvas", {
|
|
136
136
|
width: B,
|
|
137
137
|
height: U,
|
|
138
138
|
ref_key: "cursorCvs",
|
|
@@ -140,25 +140,25 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
140
140
|
}, null, 512)
|
|
141
141
|
], 36));
|
|
142
142
|
}
|
|
143
|
-
}), oe = (l,
|
|
143
|
+
}), oe = (l, P) => {
|
|
144
144
|
const m = l.__vccOpts || l;
|
|
145
|
-
for (const [t, y] of
|
|
145
|
+
for (const [t, y] of P)
|
|
146
146
|
m[t] = y;
|
|
147
147
|
return m;
|
|
148
|
-
}, Te = /* @__PURE__ */ oe(Re, [["__scopeId", "data-v-
|
|
148
|
+
}, Te = /* @__PURE__ */ oe(Re, [["__scopeId", "data-v-1352f0d3"]]);
|
|
149
149
|
function te(l) {
|
|
150
|
-
return
|
|
150
|
+
return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
|
|
151
151
|
}
|
|
152
|
-
function ve(l,
|
|
152
|
+
function ve(l, P) {
|
|
153
153
|
const m = I(!1), t = K(() => {
|
|
154
154
|
let C = {};
|
|
155
|
-
return m.value || (C.boxShadow = "none"), l.entryStyles && Object.assign(C, l.entryStyles), m.value && (C.transition = "0s", Object.assign(C, l.entryActiveStyles)), C.backgroundColor =
|
|
155
|
+
return m.value || (C.boxShadow = "none"), l.entryStyles && Object.assign(C, l.entryStyles), m.value && (C.transition = "0s", Object.assign(C, l.entryActiveStyles)), C.backgroundColor = P.value, C;
|
|
156
156
|
});
|
|
157
157
|
function y() {
|
|
158
158
|
m.value = !1;
|
|
159
159
|
}
|
|
160
160
|
let u = 0;
|
|
161
|
-
function
|
|
161
|
+
function c() {
|
|
162
162
|
if (l.entryRespondDelay && (window.clearTimeout(u), !m.value)) {
|
|
163
163
|
u = window.setTimeout(() => {
|
|
164
164
|
m.value = !0;
|
|
@@ -167,7 +167,7 @@ function ve(l, x) {
|
|
|
167
167
|
}
|
|
168
168
|
m.value = !m.value;
|
|
169
169
|
}
|
|
170
|
-
return { panelShow: m, closePanel: y, togglePanel:
|
|
170
|
+
return { panelShow: m, closePanel: y, togglePanel: c, entryStylesActual: t };
|
|
171
171
|
}
|
|
172
172
|
function ue() {
|
|
173
173
|
window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
|
|
@@ -213,8 +213,8 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
213
213
|
showPackageName: { type: Boolean }
|
|
214
214
|
},
|
|
215
215
|
emits: ["done", "update:modelValue"],
|
|
216
|
-
setup(l, { expose:
|
|
217
|
-
const t = l, y = I(), u = I("#ff0000"), { panelShow:
|
|
216
|
+
setup(l, { expose: P, emit: m }) {
|
|
217
|
+
const t = l, y = I(), u = I("#ff0000"), { panelShow: c, closePanel: C, togglePanel: A, entryStylesActual: E } = ve(t, u), { panelStyles: L } = fe(t);
|
|
218
218
|
function V(g) {
|
|
219
219
|
u.value = O(g), a();
|
|
220
220
|
}
|
|
@@ -240,8 +240,8 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
240
240
|
o.value = "0";
|
|
241
241
|
else {
|
|
242
242
|
f > 255 ? f = 255 : f < 0 && (f = 0);
|
|
243
|
-
const
|
|
244
|
-
e == "r" ?
|
|
243
|
+
const x = [...k.value];
|
|
244
|
+
e == "r" ? x[0] = f : e == "g" ? x[1] = f : x[2] = f, u.value = O(M.rgb.hex(x)), y.value?.enforceTo(u.value), o.value = f.toString(), a();
|
|
245
245
|
return;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
@@ -257,15 +257,15 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
257
257
|
o.value = "0";
|
|
258
258
|
else {
|
|
259
259
|
e === "h" ? f > 359 && (f = 359) : f > 100 && (f = 100), f < 0 && (f = 0);
|
|
260
|
-
const
|
|
261
|
-
e == "h" ?
|
|
260
|
+
const x = [...S.value];
|
|
261
|
+
e == "h" ? x[0] = f : e == "s" ? x[1] = f : x[2] = f, u.value = O(M.hsv.hex(x)), o.value = f.toString(), y.value?.enforceTo(u.value), a();
|
|
262
262
|
return;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
function a() {
|
|
268
|
-
|
|
268
|
+
F("update:modelValue", u.value);
|
|
269
269
|
}
|
|
270
270
|
function v() {
|
|
271
271
|
return u.value;
|
|
@@ -279,25 +279,25 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
279
279
|
ce(() => {
|
|
280
280
|
t.modelValue ? H(t.modelValue) : t.initial && H(t.initial);
|
|
281
281
|
});
|
|
282
|
-
const
|
|
283
|
-
return
|
|
282
|
+
const F = m;
|
|
283
|
+
return P({ closePanel: C, getCurrentHex: v, enforceTo: H }), W(() => t.modelValue, (g) => {
|
|
284
284
|
g && g !== u.value && H(g);
|
|
285
|
-
}), W(
|
|
286
|
-
g === !1 &&
|
|
285
|
+
}), W(c, (g) => {
|
|
286
|
+
g === !1 && F("done");
|
|
287
287
|
}), (g, e) => (N(), T("div", Ne, [
|
|
288
|
-
|
|
288
|
+
d("div", {
|
|
289
289
|
class: ke(l.entryClassName || "acpEntry"),
|
|
290
|
-
style: j(
|
|
290
|
+
style: j(h(E)),
|
|
291
291
|
onClick: e[0] || (e[0] = //@ts-ignore
|
|
292
|
-
(...o) =>
|
|
292
|
+
(...o) => h(A) && h(A)(...o))
|
|
293
293
|
}, null, 6),
|
|
294
|
-
|
|
294
|
+
h(c) ? (N(), T("div", {
|
|
295
295
|
key: 0,
|
|
296
296
|
class: "acpPanel",
|
|
297
|
-
style: j(
|
|
297
|
+
style: j(h(L)),
|
|
298
298
|
onClick: e[10] || (e[10] = (o) => l.panelClickStopPropagation && o.stopPropagation())
|
|
299
299
|
}, [
|
|
300
|
-
|
|
300
|
+
d("div", De, [
|
|
301
301
|
de(Te, {
|
|
302
302
|
ref_key: "ring",
|
|
303
303
|
ref: y,
|
|
@@ -306,67 +306,67 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
306
306
|
"show-package-name": l.showPackageName
|
|
307
307
|
}, null, 8, ["initial-hex", "show-package-name"])
|
|
308
308
|
]),
|
|
309
|
-
|
|
310
|
-
ee(
|
|
309
|
+
d("div", He, [
|
|
310
|
+
ee(d("select", {
|
|
311
311
|
"onUpdate:modelValue": e[1] || (e[1] = (o) => D.value = o)
|
|
312
312
|
}, [...e[11] || (e[11] = [
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
313
|
+
d("option", { value: "hex" }, "HEX", -1),
|
|
314
|
+
d("option", { value: "rgb" }, "RGB", -1),
|
|
315
|
+
d("option", { value: "hsv" }, "HSV", -1)
|
|
316
316
|
])], 512), [
|
|
317
317
|
[Ce, D.value]
|
|
318
318
|
]),
|
|
319
319
|
D.value == "hex" ? (N(), T("div", Me, [
|
|
320
|
-
|
|
320
|
+
d("input", {
|
|
321
321
|
value: u.value,
|
|
322
322
|
onBlur: w,
|
|
323
323
|
spellcheck: "false",
|
|
324
324
|
maxlength: "7"
|
|
325
325
|
}, null, 40, Ae)
|
|
326
326
|
])) : D.value == "rgb" ? (N(), T("div", Ee, [
|
|
327
|
-
|
|
327
|
+
d("input", {
|
|
328
328
|
value: k.value[0],
|
|
329
329
|
onBlur: e[2] || (e[2] = (o) => R(o, "r"))
|
|
330
330
|
}, null, 40, $e),
|
|
331
|
-
|
|
331
|
+
d("input", {
|
|
332
332
|
value: k.value[1],
|
|
333
333
|
onBlur: e[3] || (e[3] = (o) => R(o, "g"))
|
|
334
334
|
}, null, 40, qe),
|
|
335
|
-
|
|
335
|
+
d("input", {
|
|
336
336
|
value: k.value[2],
|
|
337
337
|
onBlur: e[4] || (e[4] = (o) => R(o, "b"))
|
|
338
338
|
}, null, 40, Ue)
|
|
339
339
|
])) : (N(), T("div", Le, [
|
|
340
|
-
|
|
340
|
+
d("input", {
|
|
341
341
|
value: S.value[0],
|
|
342
342
|
onBlur: e[5] || (e[5] = (o) => s(o, "h"))
|
|
343
343
|
}, null, 40, _e),
|
|
344
|
-
|
|
344
|
+
d("input", {
|
|
345
345
|
value: S.value[1],
|
|
346
346
|
onBlur: e[6] || (e[6] = (o) => s(o, "s"))
|
|
347
347
|
}, null, 40, ze),
|
|
348
|
-
|
|
348
|
+
d("input", {
|
|
349
349
|
value: S.value[2],
|
|
350
350
|
onBlur: e[7] || (e[7] = (o) => s(o, "v"))
|
|
351
351
|
}, null, 40, Oe)
|
|
352
352
|
]))
|
|
353
353
|
]),
|
|
354
|
-
|
|
355
|
-
|
|
354
|
+
d("div", We, [
|
|
355
|
+
d("button", {
|
|
356
356
|
onClick: e[8] || (e[8] = //@ts-ignore
|
|
357
|
-
(...o) =>
|
|
357
|
+
(...o) => h(C) && h(C)(...o))
|
|
358
358
|
}, "OK")
|
|
359
359
|
]),
|
|
360
360
|
l.showPackageName ? (N(), T("div", {
|
|
361
361
|
key: 0,
|
|
362
362
|
class: "acpPackageName",
|
|
363
363
|
onClick: e[9] || (e[9] = //@ts-ignore
|
|
364
|
-
(...o) =>
|
|
364
|
+
(...o) => h(ue) && h(ue)(...o))
|
|
365
365
|
}, " au-color-picker ")) : Q("", !0)
|
|
366
366
|
], 4)) : Q("", !0)
|
|
367
367
|
]));
|
|
368
368
|
}
|
|
369
|
-
}),
|
|
369
|
+
}), Fe = /* @__PURE__ */ oe(je, [["__scopeId", "data-v-dc351014"]]), Xe = { class: "acp" }, Ze = { class: "acpNamedPresets" }, Ke = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
|
|
370
370
|
__name: "AuColorPickerPresetsNested",
|
|
371
371
|
props: {
|
|
372
372
|
modelValueSelectedPreset: {},
|
|
@@ -385,22 +385,22 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
385
385
|
showPackageName: { type: Boolean }
|
|
386
386
|
},
|
|
387
387
|
emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
|
|
388
|
-
setup(l, { expose:
|
|
389
|
-
const t = l, y = I(), u = I(),
|
|
388
|
+
setup(l, { expose: P, emit: m }) {
|
|
389
|
+
const t = l, y = I(), u = I(), c = I("#ff0000"), C = K(() => {
|
|
390
390
|
let s = null;
|
|
391
|
-
return y.value && (s = t.presets?.find((v) => v.name == y.value)?.colorHex), s ||
|
|
391
|
+
return y.value && (s = t.presets?.find((v) => v.name == y.value)?.colorHex), s || c.value;
|
|
392
392
|
}), { panelShow: A, closePanel: E, togglePanel: L, entryStylesActual: V } = ve(t, C), { panelStyles: D } = fe(t);
|
|
393
393
|
function k(s) {
|
|
394
394
|
y.value = s?.name, S("update:modelValueSelectedPreset", s?.name);
|
|
395
395
|
}
|
|
396
396
|
const S = m;
|
|
397
|
-
W(
|
|
397
|
+
W(c, (s) => {
|
|
398
398
|
S("update:modelValue", s);
|
|
399
399
|
});
|
|
400
400
|
function w(s) {
|
|
401
401
|
if (te(s)) {
|
|
402
402
|
const a = O(s);
|
|
403
|
-
|
|
403
|
+
c.value = a, u.value?.enforceTo(a);
|
|
404
404
|
}
|
|
405
405
|
}
|
|
406
406
|
function R(s) {
|
|
@@ -408,7 +408,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
408
408
|
const a = t.presets?.find((v) => v.name === s);
|
|
409
409
|
a && k(a);
|
|
410
410
|
}
|
|
411
|
-
return
|
|
411
|
+
return P({ closePanel: E, enforceCustomValueTo: w, enforcePresetTo: R }), W(A, (s) => {
|
|
412
412
|
s === !1 && S("done");
|
|
413
413
|
}), W(() => t.modelValue, (s) => {
|
|
414
414
|
s && w(s);
|
|
@@ -416,35 +416,35 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
416
416
|
R(s);
|
|
417
417
|
}), ce(() => {
|
|
418
418
|
t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? R(t.modelValueSelectedPreset) : t.initialSelectedPreset && R(t.initialSelectedPreset);
|
|
419
|
-
}), (s, a) => (N(), T("div",
|
|
420
|
-
|
|
419
|
+
}), (s, a) => (N(), T("div", Xe, [
|
|
420
|
+
d("div", {
|
|
421
421
|
class: "acpEntry",
|
|
422
|
-
style: j(
|
|
422
|
+
style: j(h(V)),
|
|
423
423
|
onClick: a[0] || (a[0] = //@ts-ignore
|
|
424
|
-
(...v) =>
|
|
424
|
+
(...v) => h(L) && h(L)(...v))
|
|
425
425
|
}, null, 4),
|
|
426
|
-
|
|
426
|
+
h(A) ? (N(), T("div", {
|
|
427
427
|
key: 0,
|
|
428
428
|
class: "acpPanel",
|
|
429
|
-
style: j(
|
|
429
|
+
style: j(h(D)),
|
|
430
430
|
onClick: a[6] || (a[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
|
|
431
431
|
}, [
|
|
432
|
-
|
|
433
|
-
|
|
432
|
+
d("div", Ze, [
|
|
433
|
+
d("label", {
|
|
434
434
|
for: "acpColorPresetCustom",
|
|
435
435
|
onClick: a[3] || (a[3] = (v) => k(void 0))
|
|
436
436
|
}, [
|
|
437
|
-
de(
|
|
438
|
-
modelValue:
|
|
439
|
-
"onUpdate:modelValue": a[1] || (a[1] = (v) =>
|
|
440
|
-
onDone:
|
|
437
|
+
de(Fe, {
|
|
438
|
+
modelValue: c.value,
|
|
439
|
+
"onUpdate:modelValue": a[1] || (a[1] = (v) => c.value = v),
|
|
440
|
+
onDone: h(E),
|
|
441
441
|
"entry-class-name": "acpPresetBody",
|
|
442
442
|
ref_key: "customPicker",
|
|
443
443
|
ref: u,
|
|
444
444
|
"show-package-name": l.showPackageName,
|
|
445
445
|
pos: l.posInternal
|
|
446
446
|
}, null, 8, ["modelValue", "onDone", "show-package-name", "pos"]),
|
|
447
|
-
ee(
|
|
447
|
+
ee(d("input", {
|
|
448
448
|
name: "colorType",
|
|
449
449
|
type: "radio",
|
|
450
450
|
id: "acpColorPresetCustom",
|
|
@@ -453,19 +453,19 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
453
453
|
}, null, 512), [
|
|
454
454
|
[le, y.value]
|
|
455
455
|
]),
|
|
456
|
-
a[7] || (a[7] =
|
|
456
|
+
a[7] || (a[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
|
|
457
457
|
]),
|
|
458
|
-
a[8] || (a[8] =
|
|
458
|
+
a[8] || (a[8] = d("div", { class: "acpSep" }, null, -1)),
|
|
459
459
|
(N(!0), T(Se, null, we(l.presets, (v) => (N(), T("label", {
|
|
460
460
|
for: `acpColorPreset${v.name}`,
|
|
461
461
|
onClick: (H) => k(v),
|
|
462
462
|
key: v.name
|
|
463
463
|
}, [
|
|
464
|
-
|
|
464
|
+
d("div", {
|
|
465
465
|
class: "acpPresetBody",
|
|
466
466
|
style: j({ backgroundColor: v.colorHex })
|
|
467
467
|
}, null, 4),
|
|
468
|
-
ee(
|
|
468
|
+
ee(d("input", {
|
|
469
469
|
name: "colorType",
|
|
470
470
|
type: "radio",
|
|
471
471
|
id: `acpColorPreset${v.name}`,
|
|
@@ -474,14 +474,14 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
474
474
|
}, null, 8, Ye), [
|
|
475
475
|
[le, y.value]
|
|
476
476
|
]),
|
|
477
|
-
|
|
477
|
+
d("div", Ge, Ie(v.name), 1)
|
|
478
478
|
], 8, Ke))), 128)),
|
|
479
|
-
a[9] || (a[9] =
|
|
479
|
+
a[9] || (a[9] = d("div", { class: "acpSep" }, null, -1))
|
|
480
480
|
]),
|
|
481
|
-
|
|
482
|
-
|
|
481
|
+
d("div", Je, [
|
|
482
|
+
d("button", {
|
|
483
483
|
onClick: a[5] || (a[5] = //@ts-ignore
|
|
484
|
-
(...v) =>
|
|
484
|
+
(...v) => h(E) && h(E)(...v))
|
|
485
485
|
}, "OK")
|
|
486
486
|
])
|
|
487
487
|
], 4)) : Q("", !0)
|
|
@@ -489,7 +489,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
489
489
|
}
|
|
490
490
|
}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-1e965bbc"]]);
|
|
491
491
|
export {
|
|
492
|
-
|
|
492
|
+
Fe as AuColorPicker,
|
|
493
493
|
nt as AuColorPickerPresetsNested,
|
|
494
494
|
Te as AuColorPickerRing
|
|
495
495
|
};
|