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