@aurouscia/au-color-picker 0.6.0 → 1.0.1
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.acpRingBody[data-v-
|
|
1
|
+
.acpRingBody[data-v-183d2118]{position:relative}canvas[data-v-183d2118]{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,183 +1,183 @@
|
|
|
1
|
-
import { defineComponent as te, ref as
|
|
2
|
-
import
|
|
3
|
-
function Ie(
|
|
4
|
-
const
|
|
5
|
-
return
|
|
1
|
+
import { defineComponent as te, ref as I, onMounted as ye, onUnmounted as xe, createElementBlock as T, openBlock as N, normalizeStyle as j, isRef as Pe, createElementVNode as c, computed as F, onBeforeMount as ue, watch as W, createCommentVNode as J, unref as P, normalizeClass as he, createVNode as ce, withDirectives as Q, vModelSelect as ke, vModelRadio as oe, Fragment as Ce, renderList as Se, toDisplayString as we } from "vue";
|
|
2
|
+
import A from "color-convert";
|
|
3
|
+
function Ie(l, x) {
|
|
4
|
+
const m = l.x - x.x, t = l.y - x.y;
|
|
5
|
+
return m ** 2 + t ** 2;
|
|
6
6
|
}
|
|
7
|
-
function Ve(
|
|
8
|
-
const
|
|
9
|
-
return Math.atan2(t,
|
|
7
|
+
function Ve(l, x) {
|
|
8
|
+
const m = l.x - x.x, t = l.y - x.y;
|
|
9
|
+
return Math.atan2(t, m);
|
|
10
10
|
}
|
|
11
|
-
const
|
|
11
|
+
const D = 400, _ = 400, G = 200, be = 200, le = 190, se = 150, z = 200, ae = 16, ie = 3, Be = /* @__PURE__ */ te({
|
|
12
12
|
__name: "AuColorPickerRing",
|
|
13
13
|
props: {
|
|
14
14
|
initialHex: {}
|
|
15
15
|
},
|
|
16
16
|
emits: ["changed"],
|
|
17
|
-
setup(
|
|
18
|
-
const t =
|
|
19
|
-
let
|
|
20
|
-
const k = { x: 199, y: 199 },
|
|
21
|
-
let
|
|
22
|
-
function
|
|
23
|
-
const
|
|
24
|
-
if (!
|
|
17
|
+
setup(l, { expose: x, emit: m }) {
|
|
18
|
+
const t = I(), g = I();
|
|
19
|
+
let u, d;
|
|
20
|
+
const k = { x: 199, y: 199 }, E = (le + se) / 2, $ = le ** 2, U = se ** 2, b = (D - z) / 2, H = b + z, h = I(0), S = I(100), w = I(100), B = l;
|
|
21
|
+
let n;
|
|
22
|
+
function i() {
|
|
23
|
+
const s = t.value?.getContext("2d"), a = g.value?.getContext("2d");
|
|
24
|
+
if (!s || !a)
|
|
25
25
|
throw Error("canvas context getting error");
|
|
26
|
-
if (
|
|
27
|
-
const
|
|
28
|
-
|
|
26
|
+
if (B.initialHex) {
|
|
27
|
+
const r = A.hex.hsv(B.initialHex);
|
|
28
|
+
h.value = r[0], S.value = r[1], w.value = r[2];
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
u = s, d = a, n = u.getImageData(0, 0, D, _), f(), y(), Y(), u.putImageData(n, 0, 0);
|
|
31
31
|
}
|
|
32
|
-
function
|
|
33
|
-
for (let
|
|
32
|
+
function f() {
|
|
33
|
+
for (let s = 0; s < D; s++)
|
|
34
34
|
for (let a = 0; a < _; a++) {
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
const p =
|
|
38
|
-
|
|
35
|
+
const r = { x: s, y: a };
|
|
36
|
+
if (X(r)) {
|
|
37
|
+
const p = r.y * D * 4 + r.x * 4, V = R(r), q = A.hsv.rgb([V, 100, 100]);
|
|
38
|
+
n.data[p] = q[0], n.data[p + 1] = q[1], n.data[p + 2] = q[2], n.data[p + 3] = 255;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
function
|
|
43
|
-
return 360 * ((Ve(
|
|
42
|
+
function R(s) {
|
|
43
|
+
return 360 * ((Ve(s, k) + Math.PI) / (2 * Math.PI));
|
|
44
44
|
}
|
|
45
|
-
function
|
|
46
|
-
const a = Ie(k,
|
|
47
|
-
return a >
|
|
45
|
+
function X(s) {
|
|
46
|
+
const a = Ie(k, s);
|
|
47
|
+
return a > U && a < $;
|
|
48
48
|
}
|
|
49
|
-
function
|
|
50
|
-
for (let
|
|
49
|
+
function y() {
|
|
50
|
+
for (let s = 0; s < D; s++)
|
|
51
51
|
for (let a = 0; a < _; a++) {
|
|
52
|
-
const
|
|
53
|
-
if (
|
|
54
|
-
const p =
|
|
55
|
-
|
|
52
|
+
const r = { x: s, y: a };
|
|
53
|
+
if (o(r)) {
|
|
54
|
+
const p = r.y * D * 4 + r.x * 4, { s: V, v: q } = e(r), L = A.hsv.rgb([h.value, V, q]);
|
|
55
|
+
n.data[p] = L[0], n.data[p + 1] = L[1], n.data[p + 2] = L[2], n.data[p + 3] = 255;
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
function e(
|
|
60
|
-
const a =
|
|
61
|
-
let p = a / z,
|
|
62
|
-
return p > 1 ? p = 1 : p < 0 && (p = 0),
|
|
59
|
+
function e(s) {
|
|
60
|
+
const a = s.x - b, r = s.y - b;
|
|
61
|
+
let p = a / z, V = 1 - r / z;
|
|
62
|
+
return p > 1 ? p = 1 : p < 0 && (p = 0), V > 1 ? V = 1 : V < 0 && (V = 0), { s: 100 * p, v: 100 * V };
|
|
63
63
|
}
|
|
64
|
-
function
|
|
65
|
-
return !(
|
|
64
|
+
function o(s) {
|
|
65
|
+
return !(s.x < b || s.x > H || s.y < b || s.y > H);
|
|
66
66
|
}
|
|
67
|
-
let
|
|
68
|
-
function
|
|
69
|
-
if (
|
|
67
|
+
let M = !1, v = "none", C = I(!1);
|
|
68
|
+
function K(s, a) {
|
|
69
|
+
if (M || a && !C.value)
|
|
70
70
|
return;
|
|
71
|
-
|
|
72
|
-
const
|
|
73
|
-
if (
|
|
74
|
-
|
|
75
|
-
const p = e(
|
|
76
|
-
S.value = p.s,
|
|
71
|
+
M = !0;
|
|
72
|
+
const r = fe(s);
|
|
73
|
+
if (v === "none" && (o(r) ? v = "square" : X(r) && (v = "ring")), v === "ring" && (s.preventDefault(), h.value = R(r), y(), u.putImageData(n, 0, 0)), v === "square") {
|
|
74
|
+
s.preventDefault();
|
|
75
|
+
const p = e(r);
|
|
76
|
+
S.value = p.s, w.value = p.v;
|
|
77
77
|
}
|
|
78
|
-
|
|
78
|
+
v !== "none" && Y(!0), M = !1;
|
|
79
79
|
}
|
|
80
80
|
function Z() {
|
|
81
|
-
|
|
81
|
+
v = "none", C.value = !1;
|
|
82
82
|
}
|
|
83
|
-
function fe(
|
|
84
|
-
let a,
|
|
83
|
+
function fe(s) {
|
|
84
|
+
let a, r;
|
|
85
85
|
if (!t.value)
|
|
86
86
|
return { x: -1, y: -1 };
|
|
87
|
-
if ("touches" in
|
|
87
|
+
if ("touches" in s) {
|
|
88
88
|
const p = t.value.getBoundingClientRect();
|
|
89
|
-
a =
|
|
89
|
+
a = s.touches[0].clientX - p.left, r = s.touches[0].clientY - p.top;
|
|
90
90
|
} else
|
|
91
|
-
a =
|
|
92
|
-
return a = a *
|
|
91
|
+
a = s.offsetX, r = s.offsetY;
|
|
92
|
+
return a = a * D / G, r = r * D / G, { x: a, y: r };
|
|
93
93
|
}
|
|
94
|
-
function Y(
|
|
95
|
-
if (
|
|
96
|
-
const ge =
|
|
94
|
+
function Y(s) {
|
|
95
|
+
if (s) {
|
|
96
|
+
const ge = A.hsv.hex([h.value, S.value, w.value]);
|
|
97
97
|
me("changed", ge);
|
|
98
98
|
}
|
|
99
|
-
const a = (
|
|
100
|
-
|
|
101
|
-
const L =
|
|
102
|
-
|
|
99
|
+
const a = (h.value / 360 * 2 + 1) * Math.PI, r = Math.cos(a) * E + D / 2, p = Math.sin(a) * E + _ / 2, V = S.value / 100 * z + b, q = (1 - w.value / 100) * z + b;
|
|
100
|
+
d.reset(), d.lineWidth = 4, d.strokeStyle = "black", d.beginPath(), d.arc(r, p, ae - 2, 0, 2 * Math.PI), d.stroke(), d.beginPath(), d.arc(r, p, ie, 0, 2 * Math.PI), d.fill();
|
|
101
|
+
const L = w.value > 50 ? "black" : "#ddd";
|
|
102
|
+
d.strokeStyle = L, d.fillStyle = L, d.beginPath(), d.arc(V, q, ae - 2, 0, 2 * Math.PI), d.stroke(), d.beginPath(), d.arc(V, q, ie, 0, 2 * Math.PI), d.fill();
|
|
103
103
|
}
|
|
104
|
-
function pe(
|
|
105
|
-
const a =
|
|
106
|
-
|
|
104
|
+
function pe(s) {
|
|
105
|
+
const a = A.hex.hsv(s);
|
|
106
|
+
h.value = a[0], S.value = a[1], w.value = a[2], y(), u.putImageData(n, 0, 0), Y();
|
|
107
107
|
}
|
|
108
|
-
const me =
|
|
109
|
-
return
|
|
110
|
-
|
|
111
|
-
}),
|
|
108
|
+
const me = m;
|
|
109
|
+
return x({ enforceTo: pe }), ye(() => {
|
|
110
|
+
i(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
|
|
111
|
+
}), xe(() => {
|
|
112
112
|
window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
|
|
113
|
-
}), (
|
|
113
|
+
}), (s, a) => (N(), T("div", {
|
|
114
114
|
class: "acpRingBody",
|
|
115
115
|
style: j({ width: G + "px", height: be + "px" }),
|
|
116
|
-
onTouchstart:
|
|
117
|
-
onTouchmove:
|
|
116
|
+
onTouchstart: K,
|
|
117
|
+
onTouchmove: K,
|
|
118
118
|
onTouchend: Z,
|
|
119
|
-
onMousemove: a[0] || (a[0] = (
|
|
120
|
-
onMousedown: a[1] || (a[1] = (
|
|
121
|
-
|
|
119
|
+
onMousemove: a[0] || (a[0] = (r) => K(r, !0)),
|
|
120
|
+
onMousedown: a[1] || (a[1] = (r) => {
|
|
121
|
+
K(r), Pe(C) ? C.value = !0 : C = !0;
|
|
122
122
|
})
|
|
123
123
|
}, [
|
|
124
124
|
c("canvas", {
|
|
125
|
-
width:
|
|
125
|
+
width: D,
|
|
126
126
|
height: _,
|
|
127
127
|
ref_key: "cvs",
|
|
128
128
|
ref: t
|
|
129
129
|
}, null, 512),
|
|
130
130
|
c("canvas", {
|
|
131
|
-
width:
|
|
131
|
+
width: D,
|
|
132
132
|
height: _,
|
|
133
133
|
ref_key: "cursorCvs",
|
|
134
134
|
ref: g
|
|
135
135
|
}, null, 512)
|
|
136
136
|
], 36));
|
|
137
137
|
}
|
|
138
|
-
}), ne = (
|
|
139
|
-
const
|
|
140
|
-
for (const [t, g] of
|
|
141
|
-
|
|
142
|
-
return
|
|
143
|
-
}, De = /* @__PURE__ */ ne(Be, [["__scopeId", "data-v-
|
|
144
|
-
function ee(
|
|
145
|
-
return /^#([0-9A-F]{3}){1,2}$/i.test(
|
|
138
|
+
}), ne = (l, x) => {
|
|
139
|
+
const m = l.__vccOpts || l;
|
|
140
|
+
for (const [t, g] of x)
|
|
141
|
+
m[t] = g;
|
|
142
|
+
return m;
|
|
143
|
+
}, De = /* @__PURE__ */ ne(Be, [["__scopeId", "data-v-183d2118"]]);
|
|
144
|
+
function ee(l) {
|
|
145
|
+
return /^#([0-9A-F]{3}){1,2}$/i.test(l);
|
|
146
146
|
}
|
|
147
|
-
function de(
|
|
148
|
-
const m =
|
|
147
|
+
function de(l, x) {
|
|
148
|
+
const m = I(!1), t = F(() => {
|
|
149
149
|
let k = {};
|
|
150
|
-
return m.value || (k.boxShadow = "none"),
|
|
150
|
+
return m.value || (k.boxShadow = "none"), l.entryStyles && Object.assign(k, l.entryStyles), m.value && (k.transition = "0s", Object.assign(k, l.entryActiveStyles)), k.backgroundColor = x.value, k;
|
|
151
151
|
});
|
|
152
152
|
function g() {
|
|
153
153
|
m.value = !1;
|
|
154
154
|
}
|
|
155
|
-
let
|
|
156
|
-
function
|
|
157
|
-
if (
|
|
158
|
-
|
|
155
|
+
let u = 0;
|
|
156
|
+
function d() {
|
|
157
|
+
if (l.entryRespondDelay && (window.clearTimeout(u), !m.value)) {
|
|
158
|
+
u = window.setTimeout(() => {
|
|
159
159
|
m.value = !0;
|
|
160
|
-
},
|
|
160
|
+
}, l.entryRespondDelay);
|
|
161
161
|
return;
|
|
162
162
|
}
|
|
163
163
|
m.value = !m.value;
|
|
164
164
|
}
|
|
165
|
-
return {
|
|
165
|
+
return { panelShow: m, closePanel: g, togglePanel: d, entryStylesActual: t };
|
|
166
166
|
}
|
|
167
|
-
function
|
|
167
|
+
function re() {
|
|
168
168
|
window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
|
|
169
169
|
}
|
|
170
|
-
function O(
|
|
171
|
-
return
|
|
170
|
+
function O(l) {
|
|
171
|
+
return l.startsWith("#") ? l.toUpperCase() : "#" + l.toUpperCase();
|
|
172
172
|
}
|
|
173
|
-
function ve(
|
|
173
|
+
function ve(l) {
|
|
174
174
|
return {
|
|
175
|
-
panelStyles:
|
|
176
|
-
const
|
|
175
|
+
panelStyles: F(() => {
|
|
176
|
+
const m = l.panelBaseZIndex;
|
|
177
177
|
let t, g;
|
|
178
|
-
const
|
|
179
|
-
return typeof
|
|
180
|
-
zIndex: (
|
|
178
|
+
const u = l.pos;
|
|
179
|
+
return typeof u == "number" ? t = u + "px" : u == "left" ? g = "0px" : t = "0px", {
|
|
180
|
+
zIndex: (m || 0) + 100,
|
|
181
181
|
left: t,
|
|
182
182
|
right: g
|
|
183
183
|
};
|
|
@@ -207,161 +207,161 @@ const Te = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
|
|
|
207
207
|
panelClickStopPropagation: { type: Boolean },
|
|
208
208
|
showPackageName: { type: Boolean }
|
|
209
209
|
},
|
|
210
|
-
emits: ["
|
|
211
|
-
setup(
|
|
212
|
-
const t =
|
|
213
|
-
function b(
|
|
214
|
-
|
|
210
|
+
emits: ["done", "update:modelValue"],
|
|
211
|
+
setup(l, { expose: x, emit: m }) {
|
|
212
|
+
const t = l, g = I(), u = I("#ff0000"), { panelShow: d, closePanel: k, togglePanel: E, entryStylesActual: $ } = de(t, u), { panelStyles: U } = ve(t);
|
|
213
|
+
function b(y) {
|
|
214
|
+
u.value = O(y), i();
|
|
215
215
|
}
|
|
216
|
-
const
|
|
217
|
-
function
|
|
218
|
-
const e =
|
|
216
|
+
const H = I("hex"), h = F(() => A.hex.rgb(u.value)), S = F(() => A.hex.hsv(u.value));
|
|
217
|
+
function w(y) {
|
|
218
|
+
const e = y.target;
|
|
219
219
|
if ("value" in e) {
|
|
220
|
-
const
|
|
221
|
-
if (
|
|
222
|
-
|
|
220
|
+
const o = e.value;
|
|
221
|
+
if (o && ee(o)) {
|
|
222
|
+
u.value = O(o), g.value?.enforceTo(u.value), i();
|
|
223
223
|
return;
|
|
224
224
|
}
|
|
225
|
-
e.value =
|
|
225
|
+
e.value = u.value;
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
|
-
function
|
|
229
|
-
const
|
|
230
|
-
if ("value" in
|
|
231
|
-
const
|
|
232
|
-
if (
|
|
233
|
-
let
|
|
234
|
-
if (isNaN(
|
|
235
|
-
|
|
228
|
+
function B(y, e) {
|
|
229
|
+
const o = y.target;
|
|
230
|
+
if ("value" in o) {
|
|
231
|
+
const M = o.value;
|
|
232
|
+
if (M) {
|
|
233
|
+
let v = parseInt(M);
|
|
234
|
+
if (isNaN(v))
|
|
235
|
+
o.value = "0";
|
|
236
236
|
else {
|
|
237
|
-
|
|
238
|
-
const
|
|
239
|
-
e == "r" ?
|
|
237
|
+
v > 255 ? v = 255 : v < 0 && (v = 0);
|
|
238
|
+
const C = [...h.value];
|
|
239
|
+
e == "r" ? C[0] = v : e == "g" ? C[1] = v : C[2] = v, u.value = O(A.rgb.hex(C)), g.value?.enforceTo(u.value), o.value = v.toString(), i();
|
|
240
240
|
return;
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
-
function y
|
|
246
|
-
const
|
|
247
|
-
if ("value" in
|
|
248
|
-
const
|
|
249
|
-
if (
|
|
250
|
-
let
|
|
251
|
-
if (isNaN(
|
|
252
|
-
|
|
245
|
+
function n(y, e) {
|
|
246
|
+
const o = y.target;
|
|
247
|
+
if ("value" in o) {
|
|
248
|
+
const M = o.value;
|
|
249
|
+
if (M) {
|
|
250
|
+
let v = parseInt(M);
|
|
251
|
+
if (isNaN(v))
|
|
252
|
+
o.value = "0";
|
|
253
253
|
else {
|
|
254
|
-
e === "h" ?
|
|
255
|
-
const
|
|
256
|
-
e == "h" ?
|
|
254
|
+
e === "h" ? v > 359 && (v = 359) : v > 100 && (v = 100), v < 0 && (v = 0);
|
|
255
|
+
const C = [...S.value];
|
|
256
|
+
e == "h" ? C[0] = v : e == "s" ? C[1] = v : C[2] = v, u.value = O(A.hsv.hex(C)), o.value = v.toString(), g.value?.enforceTo(u.value), i();
|
|
257
257
|
return;
|
|
258
258
|
}
|
|
259
259
|
}
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
-
function
|
|
263
|
-
|
|
262
|
+
function i() {
|
|
263
|
+
X("update:modelValue", u.value);
|
|
264
264
|
}
|
|
265
|
-
function
|
|
266
|
-
return
|
|
265
|
+
function f() {
|
|
266
|
+
return u.value;
|
|
267
267
|
}
|
|
268
|
-
function
|
|
269
|
-
if (ee(
|
|
270
|
-
const e = O(
|
|
271
|
-
|
|
268
|
+
function R(y) {
|
|
269
|
+
if (ee(y)) {
|
|
270
|
+
const e = O(y);
|
|
271
|
+
u.value = e, g.value?.enforceTo(e);
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
|
-
|
|
275
|
-
t.modelValue ?
|
|
274
|
+
ue(() => {
|
|
275
|
+
t.modelValue ? R(t.modelValue) : t.initial && R(t.initial);
|
|
276
276
|
});
|
|
277
|
-
const
|
|
278
|
-
return
|
|
279
|
-
|
|
280
|
-
}), W(
|
|
281
|
-
|
|
282
|
-
}), (
|
|
277
|
+
const X = m;
|
|
278
|
+
return x({ closePanel: k, getCurrentHex: f, enforceTo: R }), W(() => t.modelValue, (y) => {
|
|
279
|
+
y && y !== u.value && R(y);
|
|
280
|
+
}), W(d, (y) => {
|
|
281
|
+
y === !1 && X("done");
|
|
282
|
+
}), (y, e) => (N(), T("div", Te, [
|
|
283
283
|
c("div", {
|
|
284
|
-
class:
|
|
285
|
-
style: j(
|
|
284
|
+
class: he(l.entryClassName || "acpEntry"),
|
|
285
|
+
style: j(P($)),
|
|
286
286
|
onClick: e[0] || (e[0] = //@ts-ignore
|
|
287
|
-
(...
|
|
287
|
+
(...o) => P(E) && P(E)(...o))
|
|
288
288
|
}, null, 6),
|
|
289
|
-
|
|
289
|
+
P(d) ? (N(), T("div", {
|
|
290
290
|
key: 0,
|
|
291
291
|
class: "acpPanel",
|
|
292
|
-
style: j(
|
|
293
|
-
onClick: e[10] || (e[10] = (
|
|
292
|
+
style: j(P(U)),
|
|
293
|
+
onClick: e[10] || (e[10] = (o) => l.panelClickStopPropagation && o.stopPropagation())
|
|
294
294
|
}, [
|
|
295
295
|
c("div", Ne, [
|
|
296
296
|
ce(De, {
|
|
297
297
|
ref_key: "ring",
|
|
298
298
|
ref: g,
|
|
299
|
-
"initial-hex":
|
|
299
|
+
"initial-hex": u.value,
|
|
300
300
|
onChanged: b,
|
|
301
|
-
"show-package-name":
|
|
301
|
+
"show-package-name": l.showPackageName
|
|
302
302
|
}, null, 8, ["initial-hex", "show-package-name"])
|
|
303
303
|
]),
|
|
304
304
|
c("div", Re, [
|
|
305
305
|
Q(c("select", {
|
|
306
|
-
"onUpdate:modelValue": e[1] || (e[1] = (
|
|
306
|
+
"onUpdate:modelValue": e[1] || (e[1] = (o) => H.value = o)
|
|
307
307
|
}, [...e[11] || (e[11] = [
|
|
308
308
|
c("option", { value: "hex" }, "HEX", -1),
|
|
309
309
|
c("option", { value: "rgb" }, "RGB", -1),
|
|
310
310
|
c("option", { value: "hsv" }, "HSV", -1)
|
|
311
311
|
])], 512), [
|
|
312
|
-
[ke,
|
|
312
|
+
[ke, H.value]
|
|
313
313
|
]),
|
|
314
|
-
|
|
314
|
+
H.value == "hex" ? (N(), T("div", He, [
|
|
315
315
|
c("input", {
|
|
316
|
-
value:
|
|
317
|
-
onBlur:
|
|
316
|
+
value: u.value,
|
|
317
|
+
onBlur: w,
|
|
318
318
|
spellcheck: "false",
|
|
319
319
|
maxlength: "7"
|
|
320
320
|
}, null, 40, Me)
|
|
321
|
-
])) :
|
|
321
|
+
])) : H.value == "rgb" ? (N(), T("div", Ae, [
|
|
322
322
|
c("input", {
|
|
323
|
-
value:
|
|
324
|
-
onBlur: e[2] || (e[2] = (
|
|
323
|
+
value: h.value[0],
|
|
324
|
+
onBlur: e[2] || (e[2] = (o) => B(o, "r"))
|
|
325
325
|
}, null, 40, Ee),
|
|
326
326
|
c("input", {
|
|
327
|
-
value:
|
|
328
|
-
onBlur: e[3] || (e[3] = (
|
|
327
|
+
value: h.value[1],
|
|
328
|
+
onBlur: e[3] || (e[3] = (o) => B(o, "g"))
|
|
329
329
|
}, null, 40, $e),
|
|
330
330
|
c("input", {
|
|
331
|
-
value:
|
|
332
|
-
onBlur: e[4] || (e[4] = (
|
|
331
|
+
value: h.value[2],
|
|
332
|
+
onBlur: e[4] || (e[4] = (o) => B(o, "b"))
|
|
333
333
|
}, null, 40, qe)
|
|
334
|
-
])) : (
|
|
334
|
+
])) : (N(), T("div", Ue, [
|
|
335
335
|
c("input", {
|
|
336
336
|
value: S.value[0],
|
|
337
|
-
onBlur: e[5] || (e[5] = (
|
|
337
|
+
onBlur: e[5] || (e[5] = (o) => n(o, "h"))
|
|
338
338
|
}, null, 40, Le),
|
|
339
339
|
c("input", {
|
|
340
340
|
value: S.value[1],
|
|
341
|
-
onBlur: e[6] || (e[6] = (
|
|
341
|
+
onBlur: e[6] || (e[6] = (o) => n(o, "s"))
|
|
342
342
|
}, null, 40, _e),
|
|
343
343
|
c("input", {
|
|
344
344
|
value: S.value[2],
|
|
345
|
-
onBlur: e[7] || (e[7] = (
|
|
345
|
+
onBlur: e[7] || (e[7] = (o) => n(o, "v"))
|
|
346
346
|
}, null, 40, ze)
|
|
347
347
|
]))
|
|
348
348
|
]),
|
|
349
349
|
c("div", Oe, [
|
|
350
350
|
c("button", {
|
|
351
351
|
onClick: e[8] || (e[8] = //@ts-ignore
|
|
352
|
-
(...
|
|
352
|
+
(...o) => P(k) && P(k)(...o))
|
|
353
353
|
}, "OK")
|
|
354
354
|
]),
|
|
355
|
-
|
|
355
|
+
l.showPackageName ? (N(), T("div", {
|
|
356
356
|
key: 0,
|
|
357
357
|
class: "acpPackageName",
|
|
358
358
|
onClick: e[9] || (e[9] = //@ts-ignore
|
|
359
|
-
(...
|
|
359
|
+
(...o) => P(re) && P(re)(...o))
|
|
360
360
|
}, " au-color-picker ")) : J("", !0)
|
|
361
361
|
], 4)) : J("", !0)
|
|
362
362
|
]));
|
|
363
363
|
}
|
|
364
|
-
}), je = /* @__PURE__ */ ne(We, [["__scopeId", "data-v-
|
|
364
|
+
}), je = /* @__PURE__ */ ne(We, [["__scopeId", "data-v-dc351014"]]), Xe = { class: "acp" }, Ze = { class: "acpNamedPresets" }, Fe = ["for", "onClick"], Ke = ["id", "value"], Ye = { class: "acpPresetName" }, Ge = { class: "acpDoneBtn" }, Je = /* @__PURE__ */ te({
|
|
365
365
|
__name: "AuColorPickerPresetsNested",
|
|
366
366
|
props: {
|
|
367
367
|
modelValueSelectedPreset: {},
|
|
@@ -379,81 +379,81 @@ const Te = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
|
|
|
379
379
|
panelClickStopPropagation: { type: Boolean },
|
|
380
380
|
showPackageName: { type: Boolean }
|
|
381
381
|
},
|
|
382
|
-
emits: ["
|
|
383
|
-
setup(
|
|
384
|
-
const t =
|
|
385
|
-
|
|
386
|
-
|
|
382
|
+
emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
|
|
383
|
+
setup(l, { expose: x, emit: m }) {
|
|
384
|
+
const t = l, g = I(), u = I(), d = I("#ff0000"), k = F(() => {
|
|
385
|
+
let n = null;
|
|
386
|
+
return g.value && (n = t.presets?.find((f) => f.name == g.value)?.colorHex), n || d.value;
|
|
387
|
+
}), { panelShow: E, closePanel: $, togglePanel: U, entryStylesActual: b } = de(t, k), { panelStyles: H } = ve(t);
|
|
388
|
+
function h(n) {
|
|
389
|
+
g.value = n?.name, S("update:modelValueSelectedPreset", n?.name);
|
|
387
390
|
}
|
|
388
|
-
const S =
|
|
389
|
-
W(
|
|
390
|
-
|
|
391
|
+
const S = m;
|
|
392
|
+
W(d, (n) => {
|
|
393
|
+
S("update:modelValue", n);
|
|
391
394
|
});
|
|
392
|
-
function
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
if (ee(u)) {
|
|
397
|
-
const r = O(u);
|
|
398
|
-
I.value = r, b.value?.enforceTo(r), V.value || (g.value = r);
|
|
395
|
+
function w(n) {
|
|
396
|
+
if (ee(n)) {
|
|
397
|
+
const i = O(n);
|
|
398
|
+
d.value = i, u.value?.enforceTo(i);
|
|
399
399
|
}
|
|
400
400
|
}
|
|
401
|
-
function
|
|
402
|
-
|
|
403
|
-
const
|
|
404
|
-
|
|
401
|
+
function B(n) {
|
|
402
|
+
n || h(void 0);
|
|
403
|
+
const i = t.presets?.find((f) => f.name === n);
|
|
404
|
+
i && h(i);
|
|
405
405
|
}
|
|
406
|
-
return
|
|
407
|
-
|
|
408
|
-
}), W(() => t.modelValue, (
|
|
409
|
-
|
|
410
|
-
}), W(() => t.modelValueSelectedPreset, (
|
|
411
|
-
|
|
412
|
-
}),
|
|
413
|
-
t.modelValue ?
|
|
414
|
-
}), (
|
|
406
|
+
return x({ closePanel: $, enforceCustomValueTo: w, enforcePresetTo: B }), W(E, (n) => {
|
|
407
|
+
n === !1 && S("done");
|
|
408
|
+
}), W(() => t.modelValue, (n) => {
|
|
409
|
+
n && w(n);
|
|
410
|
+
}), W(() => t.modelValueSelectedPreset, (n) => {
|
|
411
|
+
B(n);
|
|
412
|
+
}), ue(() => {
|
|
413
|
+
t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? B(t.modelValueSelectedPreset) : t.initialSelectedPreset && B(t.initialSelectedPreset);
|
|
414
|
+
}), (n, i) => (N(), T("div", Xe, [
|
|
415
415
|
c("div", {
|
|
416
416
|
class: "acpEntry",
|
|
417
|
-
style: j(
|
|
418
|
-
onClick:
|
|
419
|
-
(...f) =>
|
|
417
|
+
style: j(P(b)),
|
|
418
|
+
onClick: i[0] || (i[0] = //@ts-ignore
|
|
419
|
+
(...f) => P(U) && P(U)(...f))
|
|
420
420
|
}, null, 4),
|
|
421
|
-
|
|
421
|
+
P(E) ? (N(), T("div", {
|
|
422
422
|
key: 0,
|
|
423
423
|
class: "acpPanel",
|
|
424
|
-
style: j(
|
|
425
|
-
onClick:
|
|
424
|
+
style: j(P(H)),
|
|
425
|
+
onClick: i[6] || (i[6] = (f) => l.panelClickStopPropagation && f.stopPropagation())
|
|
426
426
|
}, [
|
|
427
427
|
c("div", Ze, [
|
|
428
428
|
c("label", {
|
|
429
429
|
for: "acpColorPresetCustom",
|
|
430
|
-
onClick:
|
|
430
|
+
onClick: i[3] || (i[3] = (f) => h(void 0))
|
|
431
431
|
}, [
|
|
432
432
|
ce(je, {
|
|
433
|
-
modelValue:
|
|
434
|
-
"onUpdate:modelValue":
|
|
435
|
-
onDone:
|
|
433
|
+
modelValue: d.value,
|
|
434
|
+
"onUpdate:modelValue": i[1] || (i[1] = (f) => d.value = f),
|
|
435
|
+
onDone: P($),
|
|
436
436
|
"entry-class-name": "acpPresetBody",
|
|
437
437
|
ref_key: "customPicker",
|
|
438
|
-
ref:
|
|
439
|
-
"show-package-name":
|
|
440
|
-
pos:
|
|
441
|
-
}, null, 8, ["modelValue", "show-package-name", "pos"]),
|
|
438
|
+
ref: u,
|
|
439
|
+
"show-package-name": l.showPackageName,
|
|
440
|
+
pos: l.posInternal
|
|
441
|
+
}, null, 8, ["modelValue", "onDone", "show-package-name", "pos"]),
|
|
442
442
|
Q(c("input", {
|
|
443
443
|
name: "colorType",
|
|
444
444
|
type: "radio",
|
|
445
445
|
id: "acpColorPresetCustom",
|
|
446
446
|
value: void 0,
|
|
447
|
-
"onUpdate:modelValue":
|
|
447
|
+
"onUpdate:modelValue": i[2] || (i[2] = (f) => g.value = f)
|
|
448
448
|
}, null, 512), [
|
|
449
|
-
[oe,
|
|
449
|
+
[oe, g.value]
|
|
450
450
|
]),
|
|
451
|
-
|
|
451
|
+
i[7] || (i[7] = c("div", { class: "acpPresetName" }, "自定义", -1))
|
|
452
452
|
]),
|
|
453
|
-
|
|
454
|
-
(
|
|
453
|
+
i[8] || (i[8] = c("div", { class: "acpSep" }, null, -1)),
|
|
454
|
+
(N(!0), T(Ce, null, Se(l.presets, (f) => (N(), T("label", {
|
|
455
455
|
for: `acpColorPreset${f.name}`,
|
|
456
|
-
onClick: (
|
|
456
|
+
onClick: (R) => h(f),
|
|
457
457
|
key: f.name
|
|
458
458
|
}, [
|
|
459
459
|
c("div", {
|
|
@@ -465,24 +465,24 @@ const Te = { class: "acp" }, Ne = { class: "acpRing" }, Re = { class: "acpParams
|
|
|
465
465
|
type: "radio",
|
|
466
466
|
id: `acpColorPreset${f.name}`,
|
|
467
467
|
value: f.name,
|
|
468
|
-
"onUpdate:modelValue":
|
|
468
|
+
"onUpdate:modelValue": i[4] || (i[4] = (R) => g.value = R)
|
|
469
469
|
}, null, 8, Ke), [
|
|
470
|
-
[oe,
|
|
470
|
+
[oe, g.value]
|
|
471
471
|
]),
|
|
472
472
|
c("div", Ye, we(f.name), 1)
|
|
473
473
|
], 8, Fe))), 128)),
|
|
474
|
-
|
|
474
|
+
i[9] || (i[9] = c("div", { class: "acpSep" }, null, -1))
|
|
475
475
|
]),
|
|
476
476
|
c("div", Ge, [
|
|
477
477
|
c("button", {
|
|
478
|
-
onClick:
|
|
479
|
-
(...f) =>
|
|
478
|
+
onClick: i[5] || (i[5] = //@ts-ignore
|
|
479
|
+
(...f) => P($) && P($)(...f))
|
|
480
480
|
}, "OK")
|
|
481
481
|
])
|
|
482
482
|
], 4)) : J("", !0)
|
|
483
483
|
]));
|
|
484
484
|
}
|
|
485
|
-
}), tt = /* @__PURE__ */ ne(Je, [["__scopeId", "data-v-
|
|
485
|
+
}), tt = /* @__PURE__ */ ne(Je, [["__scopeId", "data-v-1e965bbc"]]);
|
|
486
486
|
export {
|
|
487
487
|
je as AuColorPicker,
|
|
488
488
|
tt as AuColorPickerPresetsNested,
|
|
@@ -7,12 +7,10 @@ declare const _default: import('vue').DefineComponent<PickerProps, {
|
|
|
7
7
|
getCurrentHex: typeof getCurrentHex;
|
|
8
8
|
enforceTo: typeof enforceTo;
|
|
9
9
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
10
|
-
done: (
|
|
11
|
-
change: (hexStr: string) => any;
|
|
10
|
+
done: () => any;
|
|
12
11
|
"update:modelValue": (hexStr: string) => any;
|
|
13
12
|
}, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
|
|
14
|
-
onDone?: ((
|
|
15
|
-
onChange?: ((hexStr: string) => any) | undefined;
|
|
13
|
+
onDone?: (() => any) | undefined;
|
|
16
14
|
"onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
|
|
17
15
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
18
16
|
ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
@@ -6,29 +6,23 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
|
|
|
6
6
|
enforceCustomValueTo: typeof enforceCustomValueTo;
|
|
7
7
|
enforcePresetTo: typeof enforcePresetTo;
|
|
8
8
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
9
|
-
done: (
|
|
10
|
-
change: (hexStr: string) => any;
|
|
9
|
+
done: () => any;
|
|
11
10
|
"update:modelValue": (hexStr: string) => any;
|
|
12
|
-
presetSwitched: (name: string | undefined) => any;
|
|
13
11
|
"update:modelValueSelectedPreset": (name: string | undefined) => any;
|
|
14
12
|
}, string, import('vue').PublicProps, Readonly<PickerWithPresetsProps> & Readonly<{
|
|
15
|
-
onDone?: ((
|
|
16
|
-
onChange?: ((hexStr: string) => any) | undefined;
|
|
13
|
+
onDone?: (() => any) | undefined;
|
|
17
14
|
"onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
|
|
18
|
-
onPresetSwitched?: ((name: string | undefined) => any) | undefined;
|
|
19
15
|
"onUpdate:modelValueSelectedPreset"?: ((name: string | undefined) => any) | undefined;
|
|
20
16
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
21
17
|
customPicker: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').PickerProps> & Readonly<{
|
|
22
|
-
onDone?: ((
|
|
23
|
-
onChange?: ((hexStr: string) => any) | undefined;
|
|
18
|
+
onDone?: (() => any) | undefined;
|
|
24
19
|
"onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
|
|
25
20
|
}>, {
|
|
26
21
|
closePanel: () => void;
|
|
27
22
|
getCurrentHex: () => string;
|
|
28
23
|
enforceTo: (newHexValue: string) => void;
|
|
29
24
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
30
|
-
done: (
|
|
31
|
-
change: (hexStr: string) => any;
|
|
25
|
+
done: () => any;
|
|
32
26
|
"update:modelValue": (hexStr: string) => any;
|
|
33
27
|
}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
34
28
|
ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
@@ -64,8 +58,7 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
|
|
|
64
58
|
M: {};
|
|
65
59
|
Defaults: {};
|
|
66
60
|
}, Readonly<import('..').PickerProps> & Readonly<{
|
|
67
|
-
onDone?: ((
|
|
68
|
-
onChange?: ((hexStr: string) => any) | undefined;
|
|
61
|
+
onDone?: (() => any) | undefined;
|
|
69
62
|
"onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
|
|
70
63
|
}>, {
|
|
71
64
|
closePanel: () => void;
|