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