@aurouscia/au-color-picker 2.0.0 → 2.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/LICENSE +1 -1
- package/README.md +135 -102
- package/dist/au-color-picker.css +1 -1
- package/dist/au-color-picker.es.js +277 -249
- package/dist/types/components/AuColorPicker.vue.d.ts +4 -4
- package/dist/types/components/AuColorPickerPresetsNested.vue.d.ts +5 -5
- package/dist/types/components/AuColorPickerRing.vue.d.ts +3 -3
- package/dist/types/components/common/pickerProps.d.ts +2 -0
- package/package.json +1 -1
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,103 +1,136 @@
|
|
|
1
|
-
# au-color-picker
|
|
2
|
-
vue3颜色选择控件，支持鼠标/手指的点击和拖动
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
## 用法
|
|
7
|
-
```shell
|
|
8
|
-
npm i @aurouscia/au-color-picker
|
|
9
|
-
```
|
|
10
|
-
```ts
|
|
11
|
-
//main.ts（必须导入样式）
|
|
12
|
-
import '@aurouscia/au-color-picker/style.css'
|
|
13
|
-
|
|
14
|
-
//xxx.vue
|
|
15
|
-
import { AuColorPicker } from '@aurouscia/au-color-picker';
|
|
16
|
-
import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### 仅自定义
|
|
20
|
-
```vue
|
|
21
|
-
<AuColorPicker
|
|
22
|
-
v-model="'绑定颜色值'"
|
|
23
|
-
:initial="'初始值（优先级低于v-model）'"
|
|
24
|
-
@done="'面板关闭回调'"
|
|
25
|
-
></AuColorPicker>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
###
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
1
|
+
# au-color-picker
|
|
2
|
+
vue3颜色选择控件，支持鼠标/手指的点击和拖动
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## 用法
|
|
7
|
+
```shell
|
|
8
|
+
npm i @aurouscia/au-color-picker
|
|
9
|
+
```
|
|
10
|
+
```ts
|
|
11
|
+
//main.ts（必须导入样式）
|
|
12
|
+
import '@aurouscia/au-color-picker/style.css'
|
|
13
|
+
|
|
14
|
+
//xxx.vue
|
|
15
|
+
import { AuColorPicker } from '@aurouscia/au-color-picker';
|
|
16
|
+
import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### 仅自定义
|
|
20
|
+
```vue
|
|
21
|
+
<AuColorPicker
|
|
22
|
+
v-model="'绑定颜色值'"
|
|
23
|
+
:initial="'初始值（优先级低于v-model）'"
|
|
24
|
+
@done="'面板关闭回调'"
|
|
25
|
+
></AuColorPicker>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 输入模式持久化
|
|
29
|
+
`AuColorPicker` 支持通过 `localStorage` 记住用户上次选择的输入模式（HEX / RGB / HSV）。
|
|
30
|
+
|
|
31
|
+
- **默认行为**：未指定 `color-mode-storage-key` 时，**不启用持久化**，每次打开默认 HEX 模式（向后兼容）。
|
|
32
|
+
- **启用持久化**：传入字符串指定 `localStorage` 键名，例如 `"acp-color-mode"`。
|
|
33
|
+
- **自定义键名**：适用于同一页面使用多个选择器时避免冲突。
|
|
34
|
+
- **禁用持久化**：传入 `false` 或空字符串可显式禁用（与不传效果相同）。
|
|
35
|
+
- **默认模式**：通过 `color-mode` 属性指定默认输入模式（`'rgb' | 'hsv' | 'hex'`）。当启用持久化且 `localStorage` 中已有值时，优先使用存储值；否则回退到 `color-mode`；未指定 `color-mode` 时回退到 `'hex'`。
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<!-- 默认：不启用持久化，默认 HEX -->
|
|
39
|
+
<AuColorPicker v-model="color" />
|
|
40
|
+
|
|
41
|
+
<!-- 不启用持久化，但默认 RGB -->
|
|
42
|
+
<AuColorPicker v-model="color" color-mode="rgb" />
|
|
43
|
+
|
|
44
|
+
<!-- 启用持久化（使用推荐键名） -->
|
|
45
|
+
<AuColorPicker v-model="color" color-mode-storage-key="acp-color-mode" />
|
|
46
|
+
|
|
47
|
+
<!-- 启用持久化 + 指定默认模式 -->
|
|
48
|
+
<AuColorPicker v-model="color" color-mode-storage-key="acp-color-mode" color-mode="hsv" />
|
|
49
|
+
|
|
50
|
+
<!-- 自定义键名 -->
|
|
51
|
+
<AuColorPicker v-model="color" color-mode-storage-key="my-app-color-mode" />
|
|
52
|
+
|
|
53
|
+
<!-- 显式禁用持久化（与不传效果相同） -->
|
|
54
|
+
<AuColorPicker v-model="color" :color-mode-storage-key="false" />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 预设+自定义
|
|
58
|
+
⚠️注意：“选中的预设”是与“自定义颜色”独立的两个状态
|
|
59
|
+
这使得模型的颜色可以依赖于系统全局配置（预设的颜色）
|
|
60
|
+
```ts
|
|
61
|
+
const presets:NamedPreset[] = [
|
|
62
|
+
{
|
|
63
|
+
name: '水系', //名称不可重复
|
|
64
|
+
colorHex: '#c3e5eb'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: '绿地',
|
|
68
|
+
colorHex: '#ceeda4'
|
|
69
|
+
},
|
|
70
|
+
]
|
|
71
|
+
```
|
|
72
|
+
```vue
|
|
73
|
+
<AuColorPickerPresetsNested
|
|
74
|
+
:presets="'预设列表'"
|
|
75
|
+
v-model="'绑定颜色值'"
|
|
76
|
+
:initial="'初始值（优先级低于v-model）'"
|
|
77
|
+
v-model:model-value-selected-preset="'绑定预设name'"
|
|
78
|
+
:initial-selected-preset="'初始选择预设（优先级低于v-model）'"
|
|
79
|
+
@done="'面板关闭回调'"
|
|
80
|
+
></AuColorPickerPresetsNested>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 覆盖当前值（旧版，新版直接赋值v-model）
|
|
84
|
+
```ts
|
|
85
|
+
const picker = ref<InstanceType<typeof AuColorPicker>>()
|
|
86
|
+
const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
|
|
87
|
+
function enforceToDemo(){
|
|
88
|
+
picker.value?.enforceTo('#ff00ff')
|
|
89
|
+
pickerNested.value?.enforceCustomValueTo('#ff00ff')
|
|
90
|
+
pickerNested.value?.enforcePresetTo('水系')
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 组件属性定义
|
|
95
|
+
```ts
|
|
96
|
+
//位置描述
|
|
97
|
+
type Pos = 'left'|'right'|number
|
|
98
|
+
|
|
99
|
+
//AuColorPicker的属性
|
|
100
|
+
export interface PickerProps{
|
|
101
|
+
initial?: string //初始值
|
|
102
|
+
entryStyles?: CSSProperties //入口按钮的样式
|
|
103
|
+
entryActiveStyles?: CSSProperties //入口按钮的样式（当面板展开）
|
|
104
|
+
entryClassName?: string //入口按钮的类名
|
|
105
|
+
pos?: Pos //面板位置描述
|
|
106
|
+
panelBaseZIndex?:number //面板的zIndex基础值
|
|
107
|
+
entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
|
|
108
|
+
panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
|
|
109
|
+
showPackageName?:boolean //是否显示包名
|
|
110
|
+
colorModeStorageKey?: string | false //输入模式持久化的 localStorage 键名，传 false 或空字符串可禁用
|
|
111
|
+
colorMode?: 'rgb' | 'hsv' | 'hex' //输入模式的默认值，storage 中无值时回退到此，默认 'hex'
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
//AuColorPickerPresetsNested的属性
|
|
115
|
+
export interface PickerWithPresetsProps extends PickerProps{
|
|
116
|
+
initialSelectedPreset?:string //初始选择预设名称（undefined即为自定义）
|
|
117
|
+
presets?: NamedPreset[] //预设列表
|
|
118
|
+
posInternal?: Pos //使用自定义时，自定义颜色选择器面板的位置描述
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
//预设列表项描述
|
|
122
|
+
export interface NamedPreset{
|
|
123
|
+
colorHex:string,
|
|
124
|
+
name:string
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
## 更新记录
|
|
128
|
+
### 2.1.0
|
|
129
|
+
新增 `color-mode-storage-key` 和 `color-mode` 属性，支持通过 `localStorage` 持久化用户选择的输入模式（HEX / RGB / HSV）。默认不启用持久化，向后兼容。
|
|
130
|
+
### 2.0.0
|
|
131
|
+
将 vue 改为 peerDependency（正确做法）
|
|
132
|
+
### 1.1.0
|
|
133
|
+
修复了旧浏览器上失效的问题（消除过新的context.reset函数）
|
|
134
|
+
|
|
135
|
+
## 许可证
|
|
103
136
|
MIT
|
package/dist/au-color-picker.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.acpRingBody[data-v-
|
|
1
|
+
.acpRingBody[data-v-a0477470]{position:relative}canvas[data-v-a0477470]{position:absolute;inset:0;width:100%;height:100%}[data-v-d4794019]{margin:0;padding:0}.acpSep[data-v-d4794019]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-d4794019]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-d4794019]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-d4794019]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-d4794019]:hover{color:#000}.acpEntry[data-v-d4794019]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-d4794019]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-d4794019]{position:relative;width:fit-content}.acp label[data-v-d4794019]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-d4794019]{cursor:pointer}.acpPackageName[data-v-d4794019]{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-d4794019]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-d4794019],.acpParams input[data-v-d4794019]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-d4794019]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-d4794019]{text-align:center}.acpParams .acpSingleInput input[data-v-d4794019]{width:120px}.acpParams .acpTripleInputs[data-v-d4794019]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-d4794019]{width:40px}[data-v-9fbc3723]{margin:0;padding:0}.acpSep[data-v-9fbc3723]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-9fbc3723]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-9fbc3723]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-9fbc3723]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-9fbc3723]:hover{color:#000}.acpEntry[data-v-9fbc3723]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-9fbc3723]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-9fbc3723]{position:relative;width:fit-content}.acp label[data-v-9fbc3723]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-9fbc3723]{cursor:pointer}.acpNamedPresets[data-v-9fbc3723]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-9fbc3723]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-9fbc3723]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-9fbc3723]:hover{color:#000}
|
|
@@ -1,204 +1,204 @@
|
|
|
1
|
-
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, openBlock as
|
|
2
|
-
import
|
|
3
|
-
function
|
|
4
|
-
const
|
|
5
|
-
return
|
|
1
|
+
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, openBlock as R, createElementBlock as N, isRef as Pe, normalizeStyle as j, createElementVNode as d, computed as Z, watch as L, onBeforeMount as ce, unref as x, normalizeClass as Se, createVNode as de, withDirectives as Q, vModelSelect as ke, createCommentVNode as ee, vModelRadio as le, Fragment as Ce, renderList as we, toDisplayString as Ie } from "vue";
|
|
2
|
+
import D from "color-convert";
|
|
3
|
+
function Be(l, h) {
|
|
4
|
+
const g = l.x - h.x, t = l.y - h.y;
|
|
5
|
+
return g ** 2 + t ** 2;
|
|
6
6
|
}
|
|
7
|
-
function
|
|
8
|
-
const
|
|
9
|
-
return Math.atan2(t,
|
|
7
|
+
function be(l, h) {
|
|
8
|
+
const g = l.x - h.x, t = l.y - h.y;
|
|
9
|
+
return Math.atan2(t, g);
|
|
10
10
|
}
|
|
11
|
-
const
|
|
11
|
+
const M = 400, K = 400, J = 200, Ve = 200, ae = 190, se = 150, F = 200, re = 16, ie = 3, Me = /* @__PURE__ */ ne({
|
|
12
12
|
__name: "AuColorPickerRing",
|
|
13
13
|
props: {
|
|
14
14
|
initialHex: {}
|
|
15
15
|
},
|
|
16
16
|
emits: ["changed"],
|
|
17
|
-
setup(l, { expose:
|
|
18
|
-
const t = I(),
|
|
17
|
+
setup(l, { expose: h, emit: g }) {
|
|
18
|
+
const t = I(), m = I();
|
|
19
19
|
let u, c;
|
|
20
|
-
const
|
|
21
|
-
let
|
|
22
|
-
function
|
|
23
|
-
createImageBitmap(
|
|
24
|
-
u.drawImage(
|
|
20
|
+
const P = { x: 199, y: 199 }, H = (ae + se) / 2, A = ae ** 2, _ = se ** 2, B = (M - F) / 2, z = B + F, C = I(0), S = I(100), w = I(100), b = l;
|
|
21
|
+
let a;
|
|
22
|
+
function i() {
|
|
23
|
+
createImageBitmap(a).then((o) => {
|
|
24
|
+
u.drawImage(o, 0, 0);
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
function v() {
|
|
28
|
-
const
|
|
29
|
-
if (!
|
|
28
|
+
const o = t.value?.getContext("2d"), s = m.value?.getContext("2d");
|
|
29
|
+
if (!o || !s)
|
|
30
30
|
throw Error("canvas context getting error");
|
|
31
|
-
if (
|
|
32
|
-
const r =
|
|
33
|
-
|
|
31
|
+
if (b.initialHex) {
|
|
32
|
+
const r = D.hex.hsv(b.initialHex);
|
|
33
|
+
C.value = r[0], S.value = r[1], w.value = r[2];
|
|
34
34
|
}
|
|
35
|
-
u =
|
|
35
|
+
u = o, c = s, a = u.createImageData(M, K), E(), $(), G(), i();
|
|
36
36
|
}
|
|
37
|
-
function
|
|
38
|
-
for (let
|
|
39
|
-
for (let
|
|
40
|
-
const r = { x:
|
|
41
|
-
if (
|
|
42
|
-
const
|
|
43
|
-
|
|
37
|
+
function E() {
|
|
38
|
+
for (let o = 0; o < M; o++)
|
|
39
|
+
for (let s = 0; s < K; s++) {
|
|
40
|
+
const r = { x: o, y: s };
|
|
41
|
+
if (Y(r)) {
|
|
42
|
+
const y = r.y * M * 4 + r.x * 4, V = U(r), q = D.hsv.rgb([V, 100, 100]);
|
|
43
|
+
a.data[y] = q[0], a.data[y + 1] = q[1], a.data[y + 2] = q[2], a.data[y + 3] = 255;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
function
|
|
48
|
-
return 360 * ((
|
|
47
|
+
function U(o) {
|
|
48
|
+
return 360 * ((be(o, P) + Math.PI) / (2 * Math.PI));
|
|
49
49
|
}
|
|
50
|
-
function
|
|
51
|
-
const
|
|
52
|
-
return
|
|
50
|
+
function Y(o) {
|
|
51
|
+
const s = Be(P, o);
|
|
52
|
+
return s > _ && s < A;
|
|
53
53
|
}
|
|
54
|
-
function
|
|
55
|
-
for (let
|
|
56
|
-
for (let
|
|
57
|
-
const r = { x:
|
|
58
|
-
if (
|
|
59
|
-
const
|
|
60
|
-
|
|
54
|
+
function $() {
|
|
55
|
+
for (let o = 0; o < M; o++)
|
|
56
|
+
for (let s = 0; s < K; s++) {
|
|
57
|
+
const r = { x: o, y: s };
|
|
58
|
+
if (p(r)) {
|
|
59
|
+
const y = r.y * M * 4 + r.x * 4, { s: V, v: q } = X(r), O = D.hsv.rgb([C.value, V, q]);
|
|
60
|
+
a.data[y] = O[0], a.data[y + 1] = O[1], a.data[y + 2] = O[2], a.data[y + 3] = 255;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
function o
|
|
65
|
-
const
|
|
66
|
-
let
|
|
67
|
-
return
|
|
64
|
+
function X(o) {
|
|
65
|
+
const s = o.x - B, r = o.y - B;
|
|
66
|
+
let y = s / F, V = 1 - r / F;
|
|
67
|
+
return y > 1 ? y = 1 : y < 0 && (y = 0), V > 1 ? V = 1 : V < 0 && (V = 0), { s: 100 * y, v: 100 * V };
|
|
68
68
|
}
|
|
69
|
-
function
|
|
70
|
-
return !(
|
|
69
|
+
function p(o) {
|
|
70
|
+
return !(o.x < B || o.x > z || o.y < B || o.y > z);
|
|
71
71
|
}
|
|
72
|
-
let
|
|
73
|
-
function
|
|
74
|
-
if (
|
|
72
|
+
let e = !1, n = "none", T = I(!1);
|
|
73
|
+
function f(o, s) {
|
|
74
|
+
if (e || s && !T.value)
|
|
75
75
|
return;
|
|
76
|
-
|
|
77
|
-
const r = pe(
|
|
78
|
-
if (
|
|
79
|
-
|
|
80
|
-
const
|
|
81
|
-
S.value =
|
|
76
|
+
e = !0;
|
|
77
|
+
const r = pe(o);
|
|
78
|
+
if (n === "none" && (p(r) ? n = "square" : Y(r) && (n = "ring")), n === "ring" && (o.preventDefault(), C.value = U(r), $(), i()), n === "square") {
|
|
79
|
+
o.preventDefault();
|
|
80
|
+
const y = X(r);
|
|
81
|
+
S.value = y.s, w.value = y.v;
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
n !== "none" && G(!0), e = !1;
|
|
84
84
|
}
|
|
85
|
-
function
|
|
86
|
-
|
|
85
|
+
function k() {
|
|
86
|
+
n = "none", T.value = !1;
|
|
87
87
|
}
|
|
88
|
-
function pe(
|
|
89
|
-
let
|
|
88
|
+
function pe(o) {
|
|
89
|
+
let s, r;
|
|
90
90
|
if (!t.value)
|
|
91
91
|
return { x: -1, y: -1 };
|
|
92
|
-
if ("touches" in
|
|
93
|
-
const
|
|
94
|
-
|
|
92
|
+
if ("touches" in o) {
|
|
93
|
+
const y = t.value.getBoundingClientRect();
|
|
94
|
+
s = o.touches[0].clientX - y.left, r = o.touches[0].clientY - y.top;
|
|
95
95
|
} else
|
|
96
|
-
|
|
97
|
-
return
|
|
96
|
+
s = o.offsetX, r = o.offsetY;
|
|
97
|
+
return s = s * M / J, r = r * M / J, { x: s, y: r };
|
|
98
98
|
}
|
|
99
|
-
function G(
|
|
100
|
-
if (
|
|
101
|
-
const
|
|
102
|
-
|
|
99
|
+
function G(o) {
|
|
100
|
+
if (o) {
|
|
101
|
+
const me = D.hsv.hex([C.value, S.value, w.value]);
|
|
102
|
+
ge("changed", me);
|
|
103
103
|
}
|
|
104
|
-
const
|
|
105
|
-
c.clearRect(0, 0,
|
|
106
|
-
const
|
|
107
|
-
c.strokeStyle =
|
|
104
|
+
const s = (C.value / 360 * 2 + 1) * Math.PI, r = Math.cos(s) * H + M / 2, y = Math.sin(s) * H + K / 2, V = S.value / 100 * F + B, q = (1 - w.value / 100) * F + B;
|
|
105
|
+
c.clearRect(0, 0, M, K), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, y, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, y, ie, 0, 2 * Math.PI), c.fill();
|
|
106
|
+
const O = w.value > 50 ? "black" : "#ddd";
|
|
107
|
+
c.strokeStyle = O, c.fillStyle = O, c.beginPath(), c.arc(V, q, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(V, q, ie, 0, 2 * Math.PI), c.fill();
|
|
108
108
|
}
|
|
109
|
-
function
|
|
110
|
-
const
|
|
111
|
-
|
|
109
|
+
function ye(o) {
|
|
110
|
+
const s = D.hex.hsv(o);
|
|
111
|
+
C.value = s[0], S.value = s[1], w.value = s[2], $(), i(), G();
|
|
112
112
|
}
|
|
113
|
-
const
|
|
114
|
-
return
|
|
115
|
-
v(), window.addEventListener("touchend",
|
|
113
|
+
const ge = g;
|
|
114
|
+
return h({ enforceTo: ye }), xe(() => {
|
|
115
|
+
v(), window.addEventListener("touchend", k), window.addEventListener("mouseup", k);
|
|
116
116
|
}), he(() => {
|
|
117
|
-
window.removeEventListener("touchend",
|
|
118
|
-
}), (
|
|
117
|
+
window.removeEventListener("touchend", k), window.removeEventListener("mouseup", k);
|
|
118
|
+
}), (o, s) => (R(), N("div", {
|
|
119
119
|
class: "acpRingBody",
|
|
120
120
|
style: j({ width: J + "px", height: Ve + "px" }),
|
|
121
|
-
onTouchstart:
|
|
122
|
-
onTouchmove:
|
|
123
|
-
onTouchend:
|
|
124
|
-
onMousemove:
|
|
125
|
-
onMousedown:
|
|
126
|
-
|
|
121
|
+
onTouchstart: f,
|
|
122
|
+
onTouchmove: f,
|
|
123
|
+
onTouchend: k,
|
|
124
|
+
onMousemove: s[0] || (s[0] = (r) => f(r, !0)),
|
|
125
|
+
onMousedown: s[1] || (s[1] = (r) => {
|
|
126
|
+
f(r), Pe(T) ? T.value = !0 : T = !0;
|
|
127
127
|
})
|
|
128
128
|
}, [
|
|
129
129
|
d("canvas", {
|
|
130
|
-
width:
|
|
131
|
-
height:
|
|
130
|
+
width: M,
|
|
131
|
+
height: K,
|
|
132
132
|
ref_key: "cvs",
|
|
133
133
|
ref: t
|
|
134
134
|
}, null, 512),
|
|
135
135
|
d("canvas", {
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
136
|
+
width: M,
|
|
137
|
+
height: K,
|
|
138
138
|
ref_key: "cursorCvs",
|
|
139
|
-
ref:
|
|
139
|
+
ref: m
|
|
140
140
|
}, null, 512)
|
|
141
141
|
], 36));
|
|
142
142
|
}
|
|
143
|
-
}), oe = (l,
|
|
144
|
-
const
|
|
145
|
-
for (const [t,
|
|
146
|
-
|
|
147
|
-
return
|
|
148
|
-
}, Te = /* @__PURE__ */ oe(
|
|
143
|
+
}), oe = (l, h) => {
|
|
144
|
+
const g = l.__vccOpts || l;
|
|
145
|
+
for (const [t, m] of h)
|
|
146
|
+
g[t] = m;
|
|
147
|
+
return g;
|
|
148
|
+
}, Te = /* @__PURE__ */ oe(Me, [["__scopeId", "data-v-a0477470"]]);
|
|
149
149
|
function te(l) {
|
|
150
150
|
return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
|
|
151
151
|
}
|
|
152
|
-
function ve(l,
|
|
153
|
-
const
|
|
154
|
-
let
|
|
155
|
-
return
|
|
152
|
+
function ve(l, h) {
|
|
153
|
+
const g = I(!1), t = Z(() => {
|
|
154
|
+
let P = {};
|
|
155
|
+
return g.value || (P.boxShadow = "none"), l.entryStyles && Object.assign(P, l.entryStyles), g.value && (P.transition = "0s", Object.assign(P, l.entryActiveStyles)), P.backgroundColor = h.value, P;
|
|
156
156
|
});
|
|
157
|
-
function
|
|
158
|
-
|
|
157
|
+
function m() {
|
|
158
|
+
g.value = !1;
|
|
159
159
|
}
|
|
160
160
|
let u = 0;
|
|
161
161
|
function c() {
|
|
162
|
-
if (l.entryRespondDelay && (window.clearTimeout(u), !
|
|
162
|
+
if (l.entryRespondDelay && (window.clearTimeout(u), !g.value)) {
|
|
163
163
|
u = window.setTimeout(() => {
|
|
164
|
-
|
|
164
|
+
g.value = !0;
|
|
165
165
|
}, l.entryRespondDelay);
|
|
166
166
|
return;
|
|
167
167
|
}
|
|
168
|
-
|
|
168
|
+
g.value = !g.value;
|
|
169
169
|
}
|
|
170
|
-
return { panelShow:
|
|
170
|
+
return { panelShow: g, closePanel: m, togglePanel: c, entryStylesActual: t };
|
|
171
171
|
}
|
|
172
172
|
function ue() {
|
|
173
173
|
window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
|
|
174
174
|
}
|
|
175
|
-
function
|
|
175
|
+
function W(l) {
|
|
176
176
|
return l.startsWith("#") ? l.toUpperCase() : "#" + l.toUpperCase();
|
|
177
177
|
}
|
|
178
178
|
function fe(l) {
|
|
179
179
|
return {
|
|
180
|
-
panelStyles:
|
|
181
|
-
const
|
|
182
|
-
let t,
|
|
180
|
+
panelStyles: Z(() => {
|
|
181
|
+
const g = l.panelBaseZIndex;
|
|
182
|
+
let t, m;
|
|
183
183
|
const u = l.pos;
|
|
184
|
-
return typeof u == "number" ? t = u + "px" : u == "left" ?
|
|
185
|
-
zIndex: (
|
|
184
|
+
return typeof u == "number" ? t = u + "px" : u == "left" ? m = "0px" : t = "0px", {
|
|
185
|
+
zIndex: (g || 0) + 100,
|
|
186
186
|
left: t,
|
|
187
|
-
right:
|
|
187
|
+
right: m
|
|
188
188
|
};
|
|
189
189
|
})
|
|
190
190
|
};
|
|
191
191
|
}
|
|
192
|
-
const
|
|
192
|
+
const Re = { class: "acp" }, Ne = { class: "acpRing" }, De = { class: "acpParams" }, He = {
|
|
193
193
|
key: 0,
|
|
194
194
|
class: "acpSingleInput"
|
|
195
195
|
}, Ae = ["value"], Ee = {
|
|
196
196
|
key: 1,
|
|
197
197
|
class: "acpTripleInputs"
|
|
198
|
-
}, $e = ["value"], qe = ["value"], Ue = ["value"],
|
|
198
|
+
}, $e = ["value"], qe = ["value"], Ue = ["value"], Ke = {
|
|
199
199
|
key: 2,
|
|
200
200
|
class: "acpTripleInputs"
|
|
201
|
-
},
|
|
201
|
+
}, Le = ["value"], _e = ["value"], ze = ["value"], Oe = { class: "acpDoneBtn" }, Fe = /* @__PURE__ */ ne({
|
|
202
202
|
__name: "AuColorPicker",
|
|
203
203
|
props: {
|
|
204
204
|
modelValue: {},
|
|
@@ -210,163 +210,189 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
210
210
|
panelBaseZIndex: {},
|
|
211
211
|
entryRespondDelay: {},
|
|
212
212
|
panelClickStopPropagation: { type: Boolean },
|
|
213
|
-
showPackageName: { type: Boolean }
|
|
213
|
+
showPackageName: { type: Boolean },
|
|
214
|
+
colorModeStorageKey: { type: [String, Boolean] },
|
|
215
|
+
colorMode: {}
|
|
214
216
|
},
|
|
215
217
|
emits: ["done", "update:modelValue"],
|
|
216
|
-
setup(l, { expose:
|
|
217
|
-
const t = l,
|
|
218
|
-
function
|
|
219
|
-
|
|
218
|
+
setup(l, { expose: h, emit: g }) {
|
|
219
|
+
const t = l, m = I(), u = I("#ff0000"), { panelShow: c, closePanel: P, togglePanel: H, entryStylesActual: A } = ve(t, u), { panelStyles: _ } = fe(t);
|
|
220
|
+
function B() {
|
|
221
|
+
return t.colorModeStorageKey === !1 || t.colorModeStorageKey === "" ? !1 : t.colorModeStorageKey || !1;
|
|
220
222
|
}
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
223
|
+
function z() {
|
|
224
|
+
const p = B();
|
|
225
|
+
if (!p) return null;
|
|
226
|
+
try {
|
|
227
|
+
const e = localStorage.getItem(p);
|
|
228
|
+
if (e === "rgb" || e === "hsv" || e === "hex")
|
|
229
|
+
return e;
|
|
230
|
+
} catch {
|
|
231
|
+
}
|
|
232
|
+
return null;
|
|
233
|
+
}
|
|
234
|
+
function C(p) {
|
|
235
|
+
const e = B();
|
|
236
|
+
if (e)
|
|
237
|
+
try {
|
|
238
|
+
localStorage.setItem(e, p);
|
|
239
|
+
} catch {
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
const S = I(z() || t.colorMode || "hex");
|
|
243
|
+
L(S, C);
|
|
244
|
+
function w(p) {
|
|
245
|
+
u.value = W(p), U();
|
|
246
|
+
}
|
|
247
|
+
const b = Z(() => D.hex.rgb(u.value)), a = Z(() => D.hex.hsv(u.value));
|
|
248
|
+
function i(p) {
|
|
249
|
+
const e = p.target;
|
|
224
250
|
if ("value" in e) {
|
|
225
|
-
const
|
|
226
|
-
if (
|
|
227
|
-
u.value =
|
|
251
|
+
const n = e.value;
|
|
252
|
+
if (n && te(n)) {
|
|
253
|
+
u.value = W(n), m.value?.enforceTo(u.value), U();
|
|
228
254
|
return;
|
|
229
255
|
}
|
|
230
256
|
e.value = u.value;
|
|
231
257
|
}
|
|
232
258
|
}
|
|
233
|
-
function
|
|
234
|
-
const
|
|
235
|
-
if ("value" in
|
|
236
|
-
const
|
|
237
|
-
if (
|
|
238
|
-
let f = parseInt(
|
|
259
|
+
function v(p, e) {
|
|
260
|
+
const n = p.target;
|
|
261
|
+
if ("value" in n) {
|
|
262
|
+
const T = n.value;
|
|
263
|
+
if (T) {
|
|
264
|
+
let f = parseInt(T);
|
|
239
265
|
if (isNaN(f))
|
|
240
|
-
|
|
266
|
+
n.value = "0";
|
|
241
267
|
else {
|
|
242
268
|
f > 255 ? f = 255 : f < 0 && (f = 0);
|
|
243
|
-
const
|
|
244
|
-
e == "r" ?
|
|
269
|
+
const k = [...b.value];
|
|
270
|
+
e == "r" ? k[0] = f : e == "g" ? k[1] = f : k[2] = f, u.value = W(D.rgb.hex(k)), m.value?.enforceTo(u.value), n.value = f.toString(), U();
|
|
245
271
|
return;
|
|
246
272
|
}
|
|
247
273
|
}
|
|
248
274
|
}
|
|
249
275
|
}
|
|
250
|
-
function
|
|
251
|
-
const
|
|
252
|
-
if ("value" in
|
|
253
|
-
const
|
|
254
|
-
if (
|
|
255
|
-
let f = parseInt(
|
|
276
|
+
function E(p, e) {
|
|
277
|
+
const n = p.target;
|
|
278
|
+
if ("value" in n) {
|
|
279
|
+
const T = n.value;
|
|
280
|
+
if (T) {
|
|
281
|
+
let f = parseInt(T);
|
|
256
282
|
if (isNaN(f))
|
|
257
|
-
|
|
283
|
+
n.value = "0";
|
|
258
284
|
else {
|
|
259
285
|
e === "h" ? f > 359 && (f = 359) : f > 100 && (f = 100), f < 0 && (f = 0);
|
|
260
|
-
const
|
|
261
|
-
e == "h" ?
|
|
286
|
+
const k = [...a.value];
|
|
287
|
+
e == "h" ? k[0] = f : e == "s" ? k[1] = f : k[2] = f, u.value = W(D.hsv.hex(k)), n.value = f.toString(), m.value?.enforceTo(u.value), U();
|
|
262
288
|
return;
|
|
263
289
|
}
|
|
264
290
|
}
|
|
265
291
|
}
|
|
266
292
|
}
|
|
267
|
-
function
|
|
268
|
-
|
|
293
|
+
function U() {
|
|
294
|
+
X("update:modelValue", u.value);
|
|
269
295
|
}
|
|
270
|
-
function
|
|
296
|
+
function Y() {
|
|
271
297
|
return u.value;
|
|
272
298
|
}
|
|
273
|
-
function
|
|
274
|
-
if (te(
|
|
275
|
-
const e =
|
|
276
|
-
u.value = e,
|
|
299
|
+
function $(p) {
|
|
300
|
+
if (te(p)) {
|
|
301
|
+
const e = W(p);
|
|
302
|
+
u.value = e, m.value?.enforceTo(e);
|
|
277
303
|
}
|
|
278
304
|
}
|
|
279
305
|
ce(() => {
|
|
280
|
-
t.modelValue ?
|
|
306
|
+
t.modelValue ? $(t.modelValue) : t.initial && $(t.initial);
|
|
281
307
|
});
|
|
282
|
-
const
|
|
283
|
-
return
|
|
284
|
-
|
|
285
|
-
}),
|
|
286
|
-
|
|
287
|
-
}), (
|
|
308
|
+
const X = g;
|
|
309
|
+
return h({ closePanel: P, getCurrentHex: Y, enforceTo: $ }), L(() => t.modelValue, (p) => {
|
|
310
|
+
p && p !== u.value && $(p);
|
|
311
|
+
}), L(c, (p) => {
|
|
312
|
+
p === !1 && X("done");
|
|
313
|
+
}), (p, e) => (R(), N("div", Re, [
|
|
288
314
|
d("div", {
|
|
289
|
-
class:
|
|
290
|
-
style: j(
|
|
315
|
+
class: Se(l.entryClassName || "acpEntry"),
|
|
316
|
+
style: j(x(A)),
|
|
291
317
|
onClick: e[0] || (e[0] = //@ts-ignore
|
|
292
|
-
(...
|
|
318
|
+
(...n) => x(H) && x(H)(...n))
|
|
293
319
|
}, null, 6),
|
|
294
|
-
|
|
320
|
+
x(c) ? (R(), N("div", {
|
|
295
321
|
key: 0,
|
|
296
322
|
class: "acpPanel",
|
|
297
|
-
style: j(
|
|
298
|
-
onClick: e[10] || (e[10] = (
|
|
323
|
+
style: j(x(_)),
|
|
324
|
+
onClick: e[10] || (e[10] = (n) => l.panelClickStopPropagation && n.stopPropagation())
|
|
299
325
|
}, [
|
|
300
|
-
d("div",
|
|
326
|
+
d("div", Ne, [
|
|
301
327
|
de(Te, {
|
|
302
328
|
ref_key: "ring",
|
|
303
|
-
ref:
|
|
329
|
+
ref: m,
|
|
304
330
|
"initial-hex": u.value,
|
|
305
|
-
onChanged:
|
|
331
|
+
onChanged: w,
|
|
306
332
|
"show-package-name": l.showPackageName
|
|
307
333
|
}, null, 8, ["initial-hex", "show-package-name"])
|
|
308
334
|
]),
|
|
309
|
-
d("div",
|
|
335
|
+
d("div", De, [
|
|
310
336
|
Q(d("select", {
|
|
311
|
-
"onUpdate:modelValue": e[1] || (e[1] = (
|
|
337
|
+
"onUpdate:modelValue": e[1] || (e[1] = (n) => S.value = n)
|
|
312
338
|
}, [...e[11] || (e[11] = [
|
|
313
339
|
d("option", { value: "hex" }, "HEX", -1),
|
|
314
340
|
d("option", { value: "rgb" }, "RGB", -1),
|
|
315
341
|
d("option", { value: "hsv" }, "HSV", -1)
|
|
316
342
|
])], 512), [
|
|
317
|
-
[
|
|
343
|
+
[ke, S.value]
|
|
318
344
|
]),
|
|
319
|
-
|
|
345
|
+
S.value == "hex" ? (R(), N("div", He, [
|
|
320
346
|
d("input", {
|
|
321
347
|
value: u.value,
|
|
322
|
-
onBlur:
|
|
348
|
+
onBlur: i,
|
|
323
349
|
spellcheck: "false",
|
|
324
350
|
maxlength: "7"
|
|
325
351
|
}, null, 40, Ae)
|
|
326
|
-
])) :
|
|
352
|
+
])) : S.value == "rgb" ? (R(), N("div", Ee, [
|
|
327
353
|
d("input", {
|
|
328
|
-
value:
|
|
329
|
-
onBlur: e[2] || (e[2] = (
|
|
354
|
+
value: b.value[0],
|
|
355
|
+
onBlur: e[2] || (e[2] = (n) => v(n, "r"))
|
|
330
356
|
}, null, 40, $e),
|
|
331
357
|
d("input", {
|
|
332
|
-
value:
|
|
333
|
-
onBlur: e[3] || (e[3] = (
|
|
358
|
+
value: b.value[1],
|
|
359
|
+
onBlur: e[3] || (e[3] = (n) => v(n, "g"))
|
|
334
360
|
}, null, 40, qe),
|
|
335
361
|
d("input", {
|
|
336
|
-
value:
|
|
337
|
-
onBlur: e[4] || (e[4] = (
|
|
362
|
+
value: b.value[2],
|
|
363
|
+
onBlur: e[4] || (e[4] = (n) => v(n, "b"))
|
|
338
364
|
}, null, 40, Ue)
|
|
339
|
-
])) : (
|
|
365
|
+
])) : (R(), N("div", Ke, [
|
|
340
366
|
d("input", {
|
|
341
|
-
value:
|
|
342
|
-
onBlur: e[5] || (e[5] = (
|
|
343
|
-
}, null, 40,
|
|
367
|
+
value: a.value[0],
|
|
368
|
+
onBlur: e[5] || (e[5] = (n) => E(n, "h"))
|
|
369
|
+
}, null, 40, Le),
|
|
344
370
|
d("input", {
|
|
345
|
-
value:
|
|
346
|
-
onBlur: e[6] || (e[6] = (
|
|
347
|
-
}, null, 40,
|
|
371
|
+
value: a.value[1],
|
|
372
|
+
onBlur: e[6] || (e[6] = (n) => E(n, "s"))
|
|
373
|
+
}, null, 40, _e),
|
|
348
374
|
d("input", {
|
|
349
|
-
value:
|
|
350
|
-
onBlur: e[7] || (e[7] = (
|
|
351
|
-
}, null, 40,
|
|
375
|
+
value: a.value[2],
|
|
376
|
+
onBlur: e[7] || (e[7] = (n) => E(n, "v"))
|
|
377
|
+
}, null, 40, ze)
|
|
352
378
|
]))
|
|
353
379
|
]),
|
|
354
|
-
d("div",
|
|
380
|
+
d("div", Oe, [
|
|
355
381
|
d("button", {
|
|
356
382
|
onClick: e[8] || (e[8] = //@ts-ignore
|
|
357
|
-
(...
|
|
383
|
+
(...n) => x(P) && x(P)(...n))
|
|
358
384
|
}, "OK")
|
|
359
385
|
]),
|
|
360
|
-
l.showPackageName ? (
|
|
386
|
+
l.showPackageName ? (R(), N("div", {
|
|
361
387
|
key: 0,
|
|
362
388
|
class: "acpPackageName",
|
|
363
389
|
onClick: e[9] || (e[9] = //@ts-ignore
|
|
364
|
-
(...
|
|
390
|
+
(...n) => x(ue) && x(ue)(...n))
|
|
365
391
|
}, " au-color-picker ")) : ee("", !0)
|
|
366
392
|
], 4)) : ee("", !0)
|
|
367
393
|
]));
|
|
368
394
|
}
|
|
369
|
-
}),
|
|
395
|
+
}), We = /* @__PURE__ */ oe(Fe, [["__scopeId", "data-v-d4794019"]]), je = { class: "acp" }, Xe = { class: "acpNamedPresets" }, Ze = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
|
|
370
396
|
__name: "AuColorPickerPresetsNested",
|
|
371
397
|
props: {
|
|
372
398
|
modelValueSelectedPreset: {},
|
|
@@ -382,62 +408,64 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
382
408
|
panelBaseZIndex: {},
|
|
383
409
|
entryRespondDelay: {},
|
|
384
410
|
panelClickStopPropagation: { type: Boolean },
|
|
385
|
-
showPackageName: { type: Boolean }
|
|
411
|
+
showPackageName: { type: Boolean },
|
|
412
|
+
colorModeStorageKey: { type: [String, Boolean] },
|
|
413
|
+
colorMode: {}
|
|
386
414
|
},
|
|
387
415
|
emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
|
|
388
|
-
setup(l, { expose:
|
|
389
|
-
const t = l,
|
|
390
|
-
let
|
|
391
|
-
return
|
|
392
|
-
}), { panelShow:
|
|
393
|
-
function
|
|
394
|
-
|
|
416
|
+
setup(l, { expose: h, emit: g }) {
|
|
417
|
+
const t = l, m = I(), u = I(), c = I("#ff0000"), P = Z(() => {
|
|
418
|
+
let a = null;
|
|
419
|
+
return m.value && (a = t.presets?.find((v) => v.name == m.value)?.colorHex), a || c.value;
|
|
420
|
+
}), { panelShow: H, closePanel: A, togglePanel: _, entryStylesActual: B } = ve(t, P), { panelStyles: z } = fe(t);
|
|
421
|
+
function C(a) {
|
|
422
|
+
m.value = a?.name, S("update:modelValueSelectedPreset", a?.name);
|
|
395
423
|
}
|
|
396
|
-
const S =
|
|
397
|
-
|
|
398
|
-
S("update:modelValue",
|
|
424
|
+
const S = g;
|
|
425
|
+
L(c, (a) => {
|
|
426
|
+
S("update:modelValue", a);
|
|
399
427
|
});
|
|
400
|
-
function w(
|
|
401
|
-
if (te(
|
|
402
|
-
const
|
|
403
|
-
c.value =
|
|
428
|
+
function w(a) {
|
|
429
|
+
if (te(a)) {
|
|
430
|
+
const i = W(a);
|
|
431
|
+
c.value = i, u.value?.enforceTo(i);
|
|
404
432
|
}
|
|
405
433
|
}
|
|
406
|
-
function
|
|
407
|
-
|
|
408
|
-
const
|
|
409
|
-
|
|
434
|
+
function b(a) {
|
|
435
|
+
a || C(void 0);
|
|
436
|
+
const i = t.presets?.find((v) => v.name === a);
|
|
437
|
+
i && C(i);
|
|
410
438
|
}
|
|
411
|
-
return
|
|
412
|
-
|
|
413
|
-
}),
|
|
414
|
-
|
|
415
|
-
}),
|
|
416
|
-
|
|
439
|
+
return h({ closePanel: A, enforceCustomValueTo: w, enforcePresetTo: b }), L(H, (a) => {
|
|
440
|
+
a === !1 && S("done");
|
|
441
|
+
}), L(() => t.modelValue, (a) => {
|
|
442
|
+
a && w(a);
|
|
443
|
+
}), L(() => t.modelValueSelectedPreset, (a) => {
|
|
444
|
+
b(a);
|
|
417
445
|
}), ce(() => {
|
|
418
|
-
t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ?
|
|
419
|
-
}), (
|
|
446
|
+
t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? b(t.modelValueSelectedPreset) : t.initialSelectedPreset && b(t.initialSelectedPreset);
|
|
447
|
+
}), (a, i) => (R(), N("div", je, [
|
|
420
448
|
d("div", {
|
|
421
449
|
class: "acpEntry",
|
|
422
|
-
style: j(
|
|
423
|
-
onClick:
|
|
424
|
-
(...v) =>
|
|
450
|
+
style: j(x(B)),
|
|
451
|
+
onClick: i[0] || (i[0] = //@ts-ignore
|
|
452
|
+
(...v) => x(_) && x(_)(...v))
|
|
425
453
|
}, null, 4),
|
|
426
|
-
|
|
454
|
+
x(H) ? (R(), N("div", {
|
|
427
455
|
key: 0,
|
|
428
456
|
class: "acpPanel",
|
|
429
|
-
style: j(
|
|
430
|
-
onClick:
|
|
457
|
+
style: j(x(z)),
|
|
458
|
+
onClick: i[6] || (i[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
|
|
431
459
|
}, [
|
|
432
|
-
d("div",
|
|
460
|
+
d("div", Xe, [
|
|
433
461
|
d("label", {
|
|
434
462
|
for: "acpColorPresetCustom",
|
|
435
|
-
onClick:
|
|
463
|
+
onClick: i[3] || (i[3] = (v) => C(void 0))
|
|
436
464
|
}, [
|
|
437
|
-
de(
|
|
465
|
+
de(We, {
|
|
438
466
|
modelValue: c.value,
|
|
439
|
-
"onUpdate:modelValue":
|
|
440
|
-
onDone:
|
|
467
|
+
"onUpdate:modelValue": i[1] || (i[1] = (v) => c.value = v),
|
|
468
|
+
onDone: x(A),
|
|
441
469
|
"entry-class-name": "acpPresetBody",
|
|
442
470
|
ref_key: "customPicker",
|
|
443
471
|
ref: u,
|
|
@@ -449,16 +477,16 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
449
477
|
type: "radio",
|
|
450
478
|
id: "acpColorPresetCustom",
|
|
451
479
|
value: void 0,
|
|
452
|
-
"onUpdate:modelValue":
|
|
480
|
+
"onUpdate:modelValue": i[2] || (i[2] = (v) => m.value = v)
|
|
453
481
|
}, null, 512), [
|
|
454
|
-
[le,
|
|
482
|
+
[le, m.value]
|
|
455
483
|
]),
|
|
456
|
-
|
|
484
|
+
i[7] || (i[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
|
|
457
485
|
]),
|
|
458
|
-
|
|
459
|
-
(
|
|
486
|
+
i[8] || (i[8] = d("div", { class: "acpSep" }, null, -1)),
|
|
487
|
+
(R(!0), N(Ce, null, we(l.presets, (v) => (R(), N("label", {
|
|
460
488
|
for: `acpColorPreset${v.name}`,
|
|
461
|
-
onClick: (
|
|
489
|
+
onClick: (E) => C(v),
|
|
462
490
|
key: v.name
|
|
463
491
|
}, [
|
|
464
492
|
d("div", {
|
|
@@ -470,18 +498,18 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
470
498
|
type: "radio",
|
|
471
499
|
id: `acpColorPreset${v.name}`,
|
|
472
500
|
value: v.name,
|
|
473
|
-
"onUpdate:modelValue":
|
|
501
|
+
"onUpdate:modelValue": i[4] || (i[4] = (E) => m.value = E)
|
|
474
502
|
}, null, 8, Ye), [
|
|
475
|
-
[le,
|
|
503
|
+
[le, m.value]
|
|
476
504
|
]),
|
|
477
505
|
d("div", Ge, Ie(v.name), 1)
|
|
478
|
-
], 8,
|
|
479
|
-
|
|
506
|
+
], 8, Ze))), 128)),
|
|
507
|
+
i[9] || (i[9] = d("div", { class: "acpSep" }, null, -1))
|
|
480
508
|
]),
|
|
481
509
|
d("div", Je, [
|
|
482
510
|
d("button", {
|
|
483
|
-
onClick:
|
|
484
|
-
(...v) =>
|
|
511
|
+
onClick: i[5] || (i[5] = //@ts-ignore
|
|
512
|
+
(...v) => x(A) && x(A)(...v))
|
|
485
513
|
}, "OK")
|
|
486
514
|
])
|
|
487
515
|
], 4)) : ee("", !0)
|
|
@@ -489,7 +517,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
489
517
|
}
|
|
490
518
|
}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-9fbc3723"]]);
|
|
491
519
|
export {
|
|
492
|
-
|
|
520
|
+
We as AuColorPicker,
|
|
493
521
|
nt as AuColorPickerPresetsNested,
|
|
494
522
|
Te as AuColorPickerRing
|
|
495
523
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HEX } from 'color-convert
|
|
1
|
+
import { HEX } from 'color-convert';
|
|
2
2
|
import { PickerProps } from './common/pickerProps';
|
|
3
3
|
declare function getCurrentHex(): string;
|
|
4
4
|
declare function enforceTo(newHexValue: string): void;
|
|
@@ -16,11 +16,11 @@ declare const _default: import('vue').DefineComponent<PickerProps, {
|
|
|
16
16
|
ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
17
17
|
initialHex?: string;
|
|
18
18
|
}> & Readonly<{
|
|
19
|
-
onChanged?: ((hex:
|
|
19
|
+
onChanged?: ((hex: string) => any) | undefined;
|
|
20
20
|
}>, {
|
|
21
21
|
enforceTo: (hex: HEX) => void;
|
|
22
22
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
23
|
-
changed: (hex:
|
|
23
|
+
changed: (hex: string) => any;
|
|
24
24
|
}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
25
25
|
cvs: HTMLCanvasElement;
|
|
26
26
|
cursorCvs: HTMLCanvasElement;
|
|
@@ -34,7 +34,7 @@ declare const _default: import('vue').DefineComponent<PickerProps, {
|
|
|
34
34
|
}, Readonly<{
|
|
35
35
|
initialHex?: string;
|
|
36
36
|
}> & Readonly<{
|
|
37
|
-
onChanged?: ((hex:
|
|
37
|
+
onChanged?: ((hex: string) => any) | undefined;
|
|
38
38
|
}>, {
|
|
39
39
|
enforceTo: (hex: HEX) => void;
|
|
40
40
|
}, {}, {}, {}, {}> | null;
|
|
@@ -28,11 +28,11 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
|
|
|
28
28
|
ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
|
|
29
29
|
initialHex?: string;
|
|
30
30
|
}> & Readonly<{
|
|
31
|
-
onChanged?: ((hex:
|
|
31
|
+
onChanged?: ((hex: string) => any) | undefined;
|
|
32
32
|
}>, {
|
|
33
|
-
enforceTo: (hex: HEX) => void;
|
|
33
|
+
enforceTo: (hex: import('color-convert').HEX) => void;
|
|
34
34
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
35
|
-
changed: (hex:
|
|
35
|
+
changed: (hex: string) => any;
|
|
36
36
|
}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
37
37
|
cvs: HTMLCanvasElement;
|
|
38
38
|
cursorCvs: HTMLCanvasElement;
|
|
@@ -46,9 +46,9 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
|
|
|
46
46
|
}, Readonly<{
|
|
47
47
|
initialHex?: string;
|
|
48
48
|
}> & Readonly<{
|
|
49
|
-
onChanged?: ((hex:
|
|
49
|
+
onChanged?: ((hex: string) => any) | undefined;
|
|
50
50
|
}>, {
|
|
51
|
-
enforceTo: (hex: HEX) => void;
|
|
51
|
+
enforceTo: (hex: import('color-convert').HEX) => void;
|
|
52
52
|
}, {}, {}, {}, {}> | null;
|
|
53
53
|
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
54
54
|
P: {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HEX } from 'color-convert
|
|
1
|
+
import { HEX } from 'color-convert';
|
|
2
2
|
type __VLS_Props = {
|
|
3
3
|
initialHex?: string;
|
|
4
4
|
};
|
|
@@ -6,9 +6,9 @@ declare function enforceTo(hex: HEX): void;
|
|
|
6
6
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {
|
|
7
7
|
enforceTo: typeof enforceTo;
|
|
8
8
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
9
|
-
changed: (hex:
|
|
9
|
+
changed: (hex: string) => any;
|
|
10
10
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
11
|
-
onChanged?: ((hex:
|
|
11
|
+
onChanged?: ((hex: string) => any) | undefined;
|
|
12
12
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
13
13
|
cvs: HTMLCanvasElement;
|
|
14
14
|
cursorCvs: HTMLCanvasElement;
|
|
@@ -11,6 +11,8 @@ export interface PickerProps {
|
|
|
11
11
|
entryRespondDelay?: number;
|
|
12
12
|
panelClickStopPropagation?: boolean;
|
|
13
13
|
showPackageName?: boolean;
|
|
14
|
+
colorModeStorageKey?: string | false;
|
|
15
|
+
colorMode?: 'rgb' | 'hsv' | 'hex';
|
|
14
16
|
}
|
|
15
17
|
export interface PickerWithPresetsProps extends PickerProps {
|
|
16
18
|
modelValueSelectedPreset?: string;
|