@aurouscia/au-color-picker 1.0.2-dev.4 → 2.0.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 +21 -21
- package/README.md +102 -97
- package/dist/au-color-picker.css +1 -1
- package/dist/au-color-picker.es.js +107 -107
- package/dist/types/components/AuColorPicker.vue.d.ts +3 -3
- package/dist/types/components/AuColorPickerPresetsNested.vue.d.ts +5 -5
- package/dist/types/components/AuColorPickerRing.vue.d.ts +2 -2
- package/package.json +10 -9
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 Au
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Au
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,98 +1,103 @@
|
|
|
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
|
-
```ts
|
|
32
|
-
const presets:NamedPreset[] = [
|
|
33
|
-
{
|
|
34
|
-
name: '水系', //名称不可重复
|
|
35
|
-
colorHex: '#c3e5eb'
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
name: '绿地',
|
|
39
|
-
colorHex: '#ceeda4'
|
|
40
|
-
},
|
|
41
|
-
]
|
|
42
|
-
```
|
|
43
|
-
```vue
|
|
44
|
-
<AuColorPickerPresetsNested
|
|
45
|
-
:presets="'预设列表'"
|
|
46
|
-
v-model="'绑定颜色值'"
|
|
47
|
-
:initial="'初始值（优先级低于v-model）'"
|
|
48
|
-
v-model:model-value-selected-preset="'绑定预设name'"
|
|
49
|
-
:initial-selected-preset="'初始选择预设（优先级低于v-model）'"
|
|
50
|
-
@done="'面板关闭回调'"
|
|
51
|
-
></AuColorPickerPresetsNested>
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### 覆盖当前值（旧版，新版直接赋值v-model）
|
|
55
|
-
```ts
|
|
56
|
-
const picker = ref<InstanceType<typeof AuColorPicker>>()
|
|
57
|
-
const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
|
|
58
|
-
function enforceToDemo(){
|
|
59
|
-
picker.value?.enforceTo('#ff00ff')
|
|
60
|
-
pickerNested.value?.enforceCustomValueTo('#ff00ff')
|
|
61
|
-
pickerNested.value?.enforcePresetTo('水系')
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
### 组件属性定义
|
|
66
|
-
```ts
|
|
67
|
-
//位置描述
|
|
68
|
-
type Pos = 'left'|'right'|number
|
|
69
|
-
|
|
70
|
-
//AuColorPicker的属性
|
|
71
|
-
export interface PickerProps{
|
|
72
|
-
initial?: string //初始值
|
|
73
|
-
entryStyles?: CSSProperties //入口按钮的样式
|
|
74
|
-
entryActiveStyles?: CSSProperties //入口按钮的样式（当面板展开）
|
|
75
|
-
entryClassName?: string //入口按钮的类名
|
|
76
|
-
pos?: Pos //面板位置描述
|
|
77
|
-
panelBaseZIndex?:number //面板的zIndex基础值
|
|
78
|
-
entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
|
|
79
|
-
panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
|
|
80
|
-
showPackageName?:boolean //是否显示包名
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
//AuColorPickerPresetsNested的属性
|
|
84
|
-
export interface PickerWithPresetsProps extends PickerProps{
|
|
85
|
-
initialSelectedPreset?:string //初始选择预设名称（undefined即为自定义）
|
|
86
|
-
presets?: NamedPreset[] //预设列表
|
|
87
|
-
posInternal?: Pos //使用自定义时，自定义颜色选择器面板的位置描述
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
//预设列表项描述
|
|
91
|
-
export interface NamedPreset{
|
|
92
|
-
colorHex:string,
|
|
93
|
-
name:string
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
|
|
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
|
+
```ts
|
|
32
|
+
const presets:NamedPreset[] = [
|
|
33
|
+
{
|
|
34
|
+
name: '水系', //名称不可重复
|
|
35
|
+
colorHex: '#c3e5eb'
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
name: '绿地',
|
|
39
|
+
colorHex: '#ceeda4'
|
|
40
|
+
},
|
|
41
|
+
]
|
|
42
|
+
```
|
|
43
|
+
```vue
|
|
44
|
+
<AuColorPickerPresetsNested
|
|
45
|
+
:presets="'预设列表'"
|
|
46
|
+
v-model="'绑定颜色值'"
|
|
47
|
+
:initial="'初始值（优先级低于v-model）'"
|
|
48
|
+
v-model:model-value-selected-preset="'绑定预设name'"
|
|
49
|
+
:initial-selected-preset="'初始选择预设（优先级低于v-model）'"
|
|
50
|
+
@done="'面板关闭回调'"
|
|
51
|
+
></AuColorPickerPresetsNested>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 覆盖当前值（旧版，新版直接赋值v-model）
|
|
55
|
+
```ts
|
|
56
|
+
const picker = ref<InstanceType<typeof AuColorPicker>>()
|
|
57
|
+
const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
|
|
58
|
+
function enforceToDemo(){
|
|
59
|
+
picker.value?.enforceTo('#ff00ff')
|
|
60
|
+
pickerNested.value?.enforceCustomValueTo('#ff00ff')
|
|
61
|
+
pickerNested.value?.enforcePresetTo('水系')
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 组件属性定义
|
|
66
|
+
```ts
|
|
67
|
+
//位置描述
|
|
68
|
+
type Pos = 'left'|'right'|number
|
|
69
|
+
|
|
70
|
+
//AuColorPicker的属性
|
|
71
|
+
export interface PickerProps{
|
|
72
|
+
initial?: string //初始值
|
|
73
|
+
entryStyles?: CSSProperties //入口按钮的样式
|
|
74
|
+
entryActiveStyles?: CSSProperties //入口按钮的样式（当面板展开）
|
|
75
|
+
entryClassName?: string //入口按钮的类名
|
|
76
|
+
pos?: Pos //面板位置描述
|
|
77
|
+
panelBaseZIndex?:number //面板的zIndex基础值
|
|
78
|
+
entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
|
|
79
|
+
panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
|
|
80
|
+
showPackageName?:boolean //是否显示包名
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
//AuColorPickerPresetsNested的属性
|
|
84
|
+
export interface PickerWithPresetsProps extends PickerProps{
|
|
85
|
+
initialSelectedPreset?:string //初始选择预设名称（undefined即为自定义）
|
|
86
|
+
presets?: NamedPreset[] //预设列表
|
|
87
|
+
posInternal?: Pos //使用自定义时，自定义颜色选择器面板的位置描述
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
//预设列表项描述
|
|
91
|
+
export interface NamedPreset{
|
|
92
|
+
colorHex:string,
|
|
93
|
+
name:string
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
## 更新记录
|
|
97
|
+
### 1.0.0
|
|
98
|
+
修改了api
|
|
99
|
+
### 1.1.0
|
|
100
|
+
修复了旧浏览器上失效的问题（消除过新的context.reset函数）
|
|
101
|
+
|
|
102
|
+
## 许可证
|
|
98
103
|
MIT
|
package/dist/au-color-picker.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.acpRingBody[data-v-
|
|
1
|
+
.acpRingBody[data-v-2acdc0fb]{position:relative}canvas[data-v-2acdc0fb]{position:absolute;inset:0;width:100%;height:100%}[data-v-1feea9d7]{margin:0;padding:0}.acpSep[data-v-1feea9d7]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-1feea9d7]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-1feea9d7]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-1feea9d7]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-1feea9d7]:hover{color:#000}.acpEntry[data-v-1feea9d7]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-1feea9d7]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-1feea9d7]{position:relative;width:fit-content}.acp label[data-v-1feea9d7]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-1feea9d7]{cursor:pointer}.acpPackageName[data-v-1feea9d7]{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-1feea9d7]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-1feea9d7],.acpParams input[data-v-1feea9d7]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-1feea9d7]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-1feea9d7]{text-align:center}.acpParams .acpSingleInput input[data-v-1feea9d7]{width:120px}.acpParams .acpTripleInputs[data-v-1feea9d7]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-1feea9d7]{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,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he,
|
|
1
|
+
import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, openBlock as T, createElementBlock as N, isRef as Pe, normalizeStyle as j, createElementVNode as d, computed as K, onBeforeMount as ce, watch as W, unref as h, normalizeClass as ke, createVNode as de, withDirectives as Q, vModelSelect as Ce, createCommentVNode as ee, vModelRadio as le, Fragment as Se, renderList as we, toDisplayString as Ie } from "vue";
|
|
2
2
|
import M from "color-convert";
|
|
3
|
-
function be(l,
|
|
4
|
-
const m = l.x -
|
|
3
|
+
function be(l, P) {
|
|
4
|
+
const m = l.x - P.x, t = l.y - P.y;
|
|
5
5
|
return m ** 2 + t ** 2;
|
|
6
6
|
}
|
|
7
|
-
function Be(l,
|
|
8
|
-
const m = l.x -
|
|
7
|
+
function Be(l, P) {
|
|
8
|
+
const m = l.x - P.x, t = l.y - P.y;
|
|
9
9
|
return Math.atan2(t, m);
|
|
10
10
|
}
|
|
11
11
|
const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16, re = 3, Re = /* @__PURE__ */ ne({
|
|
@@ -14,9 +14,9 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
14
14
|
initialHex: {}
|
|
15
15
|
},
|
|
16
16
|
emits: ["changed"],
|
|
17
|
-
setup(l, { expose:
|
|
17
|
+
setup(l, { expose: P, emit: m }) {
|
|
18
18
|
const t = I(), y = I();
|
|
19
|
-
let u,
|
|
19
|
+
let u, c;
|
|
20
20
|
const C = { x: 199, y: 199 }, A = (se + ae) / 2, E = se ** 2, L = ae ** 2, V = (B - z) / 2, D = V + z, k = I(0), S = I(100), w = I(100), R = l;
|
|
21
21
|
let s;
|
|
22
22
|
function a() {
|
|
@@ -32,19 +32,19 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
32
32
|
const r = M.hex.hsv(R.initialHex);
|
|
33
33
|
k.value = r[0], S.value = r[1], w.value = r[2];
|
|
34
34
|
}
|
|
35
|
-
u = n,
|
|
35
|
+
u = n, c = i, s = u.createImageData(B, U), H(), e(), G(), a();
|
|
36
36
|
}
|
|
37
37
|
function H() {
|
|
38
38
|
for (let n = 0; n < B; n++)
|
|
39
39
|
for (let i = 0; i < U; i++) {
|
|
40
40
|
const r = { x: n, y: i };
|
|
41
41
|
if (g(r)) {
|
|
42
|
-
const p = r.y * B * 4 + r.x * 4, b =
|
|
42
|
+
const p = r.y * B * 4 + r.x * 4, b = F(r), q = M.hsv.rgb([b, 100, 100]);
|
|
43
43
|
s.data[p] = q[0], s.data[p + 1] = q[1], s.data[p + 2] = q[2], s.data[p + 3] = 255;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function F(n) {
|
|
48
48
|
return 360 * ((Be(n, C) + Math.PI) / (2 * Math.PI));
|
|
49
49
|
}
|
|
50
50
|
function g(n) {
|
|
@@ -69,21 +69,21 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
69
69
|
function $(n) {
|
|
70
70
|
return !(n.x < V || n.x > D || n.y < V || n.y > D);
|
|
71
71
|
}
|
|
72
|
-
let f = !1,
|
|
72
|
+
let f = !1, x = "none", X = I(!1);
|
|
73
73
|
function Y(n, i) {
|
|
74
|
-
if (f || i && !
|
|
74
|
+
if (f || i && !X.value)
|
|
75
75
|
return;
|
|
76
76
|
f = !0;
|
|
77
77
|
const r = pe(n);
|
|
78
|
-
if (
|
|
78
|
+
if (x === "none" && ($(r) ? x = "square" : g(r) && (x = "ring")), x === "ring" && (n.preventDefault(), k.value = F(r), e(), a()), x === "square") {
|
|
79
79
|
n.preventDefault();
|
|
80
80
|
const p = o(r);
|
|
81
81
|
S.value = p.s, w.value = p.v;
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
x !== "none" && G(!0), f = !1;
|
|
84
84
|
}
|
|
85
|
-
function
|
|
86
|
-
|
|
85
|
+
function Z() {
|
|
86
|
+
x = "none", X.value = !1;
|
|
87
87
|
}
|
|
88
88
|
function pe(n) {
|
|
89
89
|
let i, r;
|
|
@@ -102,37 +102,37 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
102
102
|
ye("changed", ge);
|
|
103
103
|
}
|
|
104
104
|
const i = (k.value / 360 * 2 + 1) * Math.PI, r = Math.cos(i) * A + B / 2, p = Math.sin(i) * A + U / 2, b = S.value / 100 * z + V, q = (1 - w.value / 100) * z + V;
|
|
105
|
-
|
|
105
|
+
c.clearRect(0, 0, B, U), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, p, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, p, re, 0, 2 * Math.PI), c.fill();
|
|
106
106
|
const _ = w.value > 50 ? "black" : "#ddd";
|
|
107
|
-
|
|
107
|
+
c.strokeStyle = _, c.fillStyle = _, c.beginPath(), c.arc(b, q, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(b, q, re, 0, 2 * Math.PI), c.fill();
|
|
108
108
|
}
|
|
109
109
|
function me(n) {
|
|
110
110
|
const i = M.hex.hsv(n);
|
|
111
111
|
k.value = i[0], S.value = i[1], w.value = i[2], e(), a(), G();
|
|
112
112
|
}
|
|
113
113
|
const ye = m;
|
|
114
|
-
return
|
|
115
|
-
v(), window.addEventListener("touchend",
|
|
114
|
+
return P({ enforceTo: me }), xe(() => {
|
|
115
|
+
v(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
|
|
116
116
|
}), he(() => {
|
|
117
|
-
window.removeEventListener("touchend",
|
|
118
|
-
}), (n, i) => (
|
|
117
|
+
window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
|
|
118
|
+
}), (n, i) => (T(), N("div", {
|
|
119
119
|
class: "acpRingBody",
|
|
120
120
|
style: j({ width: J + "px", height: Ve + "px" }),
|
|
121
121
|
onTouchstart: Y,
|
|
122
122
|
onTouchmove: Y,
|
|
123
|
-
onTouchend:
|
|
123
|
+
onTouchend: Z,
|
|
124
124
|
onMousemove: i[0] || (i[0] = (r) => Y(r, !0)),
|
|
125
125
|
onMousedown: i[1] || (i[1] = (r) => {
|
|
126
|
-
Y(r), Pe(
|
|
126
|
+
Y(r), Pe(X) ? X.value = !0 : X = !0;
|
|
127
127
|
})
|
|
128
128
|
}, [
|
|
129
|
-
|
|
129
|
+
d("canvas", {
|
|
130
130
|
width: B,
|
|
131
131
|
height: U,
|
|
132
132
|
ref_key: "cvs",
|
|
133
133
|
ref: t
|
|
134
134
|
}, null, 512),
|
|
135
|
-
|
|
135
|
+
d("canvas", {
|
|
136
136
|
width: B,
|
|
137
137
|
height: U,
|
|
138
138
|
ref_key: "cursorCvs",
|
|
@@ -140,25 +140,25 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
140
140
|
}, null, 512)
|
|
141
141
|
], 36));
|
|
142
142
|
}
|
|
143
|
-
}), oe = (l,
|
|
143
|
+
}), oe = (l, P) => {
|
|
144
144
|
const m = l.__vccOpts || l;
|
|
145
|
-
for (const [t, y] of
|
|
145
|
+
for (const [t, y] of P)
|
|
146
146
|
m[t] = y;
|
|
147
147
|
return m;
|
|
148
|
-
}, Te = /* @__PURE__ */ oe(Re, [["__scopeId", "data-v-
|
|
148
|
+
}, Te = /* @__PURE__ */ oe(Re, [["__scopeId", "data-v-2acdc0fb"]]);
|
|
149
149
|
function te(l) {
|
|
150
|
-
return
|
|
150
|
+
return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
|
|
151
151
|
}
|
|
152
|
-
function ve(l,
|
|
152
|
+
function ve(l, P) {
|
|
153
153
|
const m = I(!1), t = K(() => {
|
|
154
154
|
let C = {};
|
|
155
|
-
return m.value || (C.boxShadow = "none"), l.entryStyles && Object.assign(C, l.entryStyles), m.value && (C.transition = "0s", Object.assign(C, l.entryActiveStyles)), C.backgroundColor =
|
|
155
|
+
return m.value || (C.boxShadow = "none"), l.entryStyles && Object.assign(C, l.entryStyles), m.value && (C.transition = "0s", Object.assign(C, l.entryActiveStyles)), C.backgroundColor = P.value, C;
|
|
156
156
|
});
|
|
157
157
|
function y() {
|
|
158
158
|
m.value = !1;
|
|
159
159
|
}
|
|
160
160
|
let u = 0;
|
|
161
|
-
function
|
|
161
|
+
function c() {
|
|
162
162
|
if (l.entryRespondDelay && (window.clearTimeout(u), !m.value)) {
|
|
163
163
|
u = window.setTimeout(() => {
|
|
164
164
|
m.value = !0;
|
|
@@ -167,7 +167,7 @@ function ve(l, x) {
|
|
|
167
167
|
}
|
|
168
168
|
m.value = !m.value;
|
|
169
169
|
}
|
|
170
|
-
return { panelShow: m, closePanel: y, togglePanel:
|
|
170
|
+
return { panelShow: m, closePanel: y, togglePanel: c, entryStylesActual: t };
|
|
171
171
|
}
|
|
172
172
|
function ue() {
|
|
173
173
|
window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
|
|
@@ -213,8 +213,8 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
213
213
|
showPackageName: { type: Boolean }
|
|
214
214
|
},
|
|
215
215
|
emits: ["done", "update:modelValue"],
|
|
216
|
-
setup(l, { expose:
|
|
217
|
-
const t = l, y = I(), u = I("#ff0000"), { panelShow:
|
|
216
|
+
setup(l, { expose: P, emit: m }) {
|
|
217
|
+
const t = l, y = I(), u = I("#ff0000"), { panelShow: c, closePanel: C, togglePanel: A, entryStylesActual: E } = ve(t, u), { panelStyles: L } = fe(t);
|
|
218
218
|
function V(g) {
|
|
219
219
|
u.value = O(g), a();
|
|
220
220
|
}
|
|
@@ -240,8 +240,8 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
240
240
|
o.value = "0";
|
|
241
241
|
else {
|
|
242
242
|
f > 255 ? f = 255 : f < 0 && (f = 0);
|
|
243
|
-
const
|
|
244
|
-
e == "r" ?
|
|
243
|
+
const x = [...k.value];
|
|
244
|
+
e == "r" ? x[0] = f : e == "g" ? x[1] = f : x[2] = f, u.value = O(M.rgb.hex(x)), y.value?.enforceTo(u.value), o.value = f.toString(), a();
|
|
245
245
|
return;
|
|
246
246
|
}
|
|
247
247
|
}
|
|
@@ -257,15 +257,15 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
257
257
|
o.value = "0";
|
|
258
258
|
else {
|
|
259
259
|
e === "h" ? f > 359 && (f = 359) : f > 100 && (f = 100), f < 0 && (f = 0);
|
|
260
|
-
const
|
|
261
|
-
e == "h" ?
|
|
260
|
+
const x = [...S.value];
|
|
261
|
+
e == "h" ? x[0] = f : e == "s" ? x[1] = f : x[2] = f, u.value = O(M.hsv.hex(x)), o.value = f.toString(), y.value?.enforceTo(u.value), a();
|
|
262
262
|
return;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
266
|
}
|
|
267
267
|
function a() {
|
|
268
|
-
|
|
268
|
+
F("update:modelValue", u.value);
|
|
269
269
|
}
|
|
270
270
|
function v() {
|
|
271
271
|
return u.value;
|
|
@@ -279,25 +279,25 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
279
279
|
ce(() => {
|
|
280
280
|
t.modelValue ? H(t.modelValue) : t.initial && H(t.initial);
|
|
281
281
|
});
|
|
282
|
-
const
|
|
283
|
-
return
|
|
282
|
+
const F = m;
|
|
283
|
+
return P({ closePanel: C, getCurrentHex: v, enforceTo: H }), W(() => t.modelValue, (g) => {
|
|
284
284
|
g && g !== u.value && H(g);
|
|
285
|
-
}), W(
|
|
286
|
-
g === !1 &&
|
|
287
|
-
}), (g, e) => (
|
|
288
|
-
|
|
285
|
+
}), W(c, (g) => {
|
|
286
|
+
g === !1 && F("done");
|
|
287
|
+
}), (g, e) => (T(), N("div", Ne, [
|
|
288
|
+
d("div", {
|
|
289
289
|
class: ke(l.entryClassName || "acpEntry"),
|
|
290
|
-
style: j(
|
|
290
|
+
style: j(h(E)),
|
|
291
291
|
onClick: e[0] || (e[0] = //@ts-ignore
|
|
292
|
-
(...o) =>
|
|
292
|
+
(...o) => h(A) && h(A)(...o))
|
|
293
293
|
}, null, 6),
|
|
294
|
-
|
|
294
|
+
h(c) ? (T(), N("div", {
|
|
295
295
|
key: 0,
|
|
296
296
|
class: "acpPanel",
|
|
297
|
-
style: j(
|
|
297
|
+
style: j(h(L)),
|
|
298
298
|
onClick: e[10] || (e[10] = (o) => l.panelClickStopPropagation && o.stopPropagation())
|
|
299
299
|
}, [
|
|
300
|
-
|
|
300
|
+
d("div", De, [
|
|
301
301
|
de(Te, {
|
|
302
302
|
ref_key: "ring",
|
|
303
303
|
ref: y,
|
|
@@ -306,67 +306,67 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
306
306
|
"show-package-name": l.showPackageName
|
|
307
307
|
}, null, 8, ["initial-hex", "show-package-name"])
|
|
308
308
|
]),
|
|
309
|
-
|
|
310
|
-
|
|
309
|
+
d("div", He, [
|
|
310
|
+
Q(d("select", {
|
|
311
311
|
"onUpdate:modelValue": e[1] || (e[1] = (o) => D.value = o)
|
|
312
312
|
}, [...e[11] || (e[11] = [
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
313
|
+
d("option", { value: "hex" }, "HEX", -1),
|
|
314
|
+
d("option", { value: "rgb" }, "RGB", -1),
|
|
315
|
+
d("option", { value: "hsv" }, "HSV", -1)
|
|
316
316
|
])], 512), [
|
|
317
317
|
[Ce, D.value]
|
|
318
318
|
]),
|
|
319
|
-
D.value == "hex" ? (
|
|
320
|
-
|
|
319
|
+
D.value == "hex" ? (T(), N("div", Me, [
|
|
320
|
+
d("input", {
|
|
321
321
|
value: u.value,
|
|
322
322
|
onBlur: w,
|
|
323
323
|
spellcheck: "false",
|
|
324
324
|
maxlength: "7"
|
|
325
325
|
}, null, 40, Ae)
|
|
326
|
-
])) : D.value == "rgb" ? (
|
|
327
|
-
|
|
326
|
+
])) : D.value == "rgb" ? (T(), N("div", Ee, [
|
|
327
|
+
d("input", {
|
|
328
328
|
value: k.value[0],
|
|
329
329
|
onBlur: e[2] || (e[2] = (o) => R(o, "r"))
|
|
330
330
|
}, null, 40, $e),
|
|
331
|
-
|
|
331
|
+
d("input", {
|
|
332
332
|
value: k.value[1],
|
|
333
333
|
onBlur: e[3] || (e[3] = (o) => R(o, "g"))
|
|
334
334
|
}, null, 40, qe),
|
|
335
|
-
|
|
335
|
+
d("input", {
|
|
336
336
|
value: k.value[2],
|
|
337
337
|
onBlur: e[4] || (e[4] = (o) => R(o, "b"))
|
|
338
338
|
}, null, 40, Ue)
|
|
339
|
-
])) : (
|
|
340
|
-
|
|
339
|
+
])) : (T(), N("div", Le, [
|
|
340
|
+
d("input", {
|
|
341
341
|
value: S.value[0],
|
|
342
342
|
onBlur: e[5] || (e[5] = (o) => s(o, "h"))
|
|
343
343
|
}, null, 40, _e),
|
|
344
|
-
|
|
344
|
+
d("input", {
|
|
345
345
|
value: S.value[1],
|
|
346
346
|
onBlur: e[6] || (e[6] = (o) => s(o, "s"))
|
|
347
347
|
}, null, 40, ze),
|
|
348
|
-
|
|
348
|
+
d("input", {
|
|
349
349
|
value: S.value[2],
|
|
350
350
|
onBlur: e[7] || (e[7] = (o) => s(o, "v"))
|
|
351
351
|
}, null, 40, Oe)
|
|
352
352
|
]))
|
|
353
353
|
]),
|
|
354
|
-
|
|
355
|
-
|
|
354
|
+
d("div", We, [
|
|
355
|
+
d("button", {
|
|
356
356
|
onClick: e[8] || (e[8] = //@ts-ignore
|
|
357
|
-
(...o) =>
|
|
357
|
+
(...o) => h(C) && h(C)(...o))
|
|
358
358
|
}, "OK")
|
|
359
359
|
]),
|
|
360
|
-
l.showPackageName ? (
|
|
360
|
+
l.showPackageName ? (T(), N("div", {
|
|
361
361
|
key: 0,
|
|
362
362
|
class: "acpPackageName",
|
|
363
363
|
onClick: e[9] || (e[9] = //@ts-ignore
|
|
364
|
-
(...o) =>
|
|
365
|
-
}, " au-color-picker ")) :
|
|
366
|
-
], 4)) :
|
|
364
|
+
(...o) => h(ue) && h(ue)(...o))
|
|
365
|
+
}, " au-color-picker ")) : ee("", !0)
|
|
366
|
+
], 4)) : ee("", !0)
|
|
367
367
|
]));
|
|
368
368
|
}
|
|
369
|
-
}),
|
|
369
|
+
}), Fe = /* @__PURE__ */ oe(je, [["__scopeId", "data-v-1feea9d7"]]), Xe = { class: "acp" }, Ze = { class: "acpNamedPresets" }, Ke = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
|
|
370
370
|
__name: "AuColorPickerPresetsNested",
|
|
371
371
|
props: {
|
|
372
372
|
modelValueSelectedPreset: {},
|
|
@@ -385,22 +385,22 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
385
385
|
showPackageName: { type: Boolean }
|
|
386
386
|
},
|
|
387
387
|
emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
|
|
388
|
-
setup(l, { expose:
|
|
389
|
-
const t = l, y = I(), u = I(),
|
|
388
|
+
setup(l, { expose: P, emit: m }) {
|
|
389
|
+
const t = l, y = I(), u = I(), c = I("#ff0000"), C = K(() => {
|
|
390
390
|
let s = null;
|
|
391
|
-
return y.value && (s = t.presets?.find((v) => v.name == y.value)?.colorHex), s ||
|
|
391
|
+
return y.value && (s = t.presets?.find((v) => v.name == y.value)?.colorHex), s || c.value;
|
|
392
392
|
}), { panelShow: A, closePanel: E, togglePanel: L, entryStylesActual: V } = ve(t, C), { panelStyles: D } = fe(t);
|
|
393
393
|
function k(s) {
|
|
394
394
|
y.value = s?.name, S("update:modelValueSelectedPreset", s?.name);
|
|
395
395
|
}
|
|
396
396
|
const S = m;
|
|
397
|
-
W(
|
|
397
|
+
W(c, (s) => {
|
|
398
398
|
S("update:modelValue", s);
|
|
399
399
|
});
|
|
400
400
|
function w(s) {
|
|
401
401
|
if (te(s)) {
|
|
402
402
|
const a = O(s);
|
|
403
|
-
|
|
403
|
+
c.value = a, u.value?.enforceTo(a);
|
|
404
404
|
}
|
|
405
405
|
}
|
|
406
406
|
function R(s) {
|
|
@@ -408,7 +408,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
408
408
|
const a = t.presets?.find((v) => v.name === s);
|
|
409
409
|
a && k(a);
|
|
410
410
|
}
|
|
411
|
-
return
|
|
411
|
+
return P({ closePanel: E, enforceCustomValueTo: w, enforcePresetTo: R }), W(A, (s) => {
|
|
412
412
|
s === !1 && S("done");
|
|
413
413
|
}), W(() => t.modelValue, (s) => {
|
|
414
414
|
s && w(s);
|
|
@@ -416,35 +416,35 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
416
416
|
R(s);
|
|
417
417
|
}), ce(() => {
|
|
418
418
|
t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? R(t.modelValueSelectedPreset) : t.initialSelectedPreset && R(t.initialSelectedPreset);
|
|
419
|
-
}), (s, a) => (
|
|
420
|
-
|
|
419
|
+
}), (s, a) => (T(), N("div", Xe, [
|
|
420
|
+
d("div", {
|
|
421
421
|
class: "acpEntry",
|
|
422
|
-
style: j(
|
|
422
|
+
style: j(h(V)),
|
|
423
423
|
onClick: a[0] || (a[0] = //@ts-ignore
|
|
424
|
-
(...v) =>
|
|
424
|
+
(...v) => h(L) && h(L)(...v))
|
|
425
425
|
}, null, 4),
|
|
426
|
-
|
|
426
|
+
h(A) ? (T(), N("div", {
|
|
427
427
|
key: 0,
|
|
428
428
|
class: "acpPanel",
|
|
429
|
-
style: j(
|
|
429
|
+
style: j(h(D)),
|
|
430
430
|
onClick: a[6] || (a[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
|
|
431
431
|
}, [
|
|
432
|
-
|
|
433
|
-
|
|
432
|
+
d("div", Ze, [
|
|
433
|
+
d("label", {
|
|
434
434
|
for: "acpColorPresetCustom",
|
|
435
435
|
onClick: a[3] || (a[3] = (v) => k(void 0))
|
|
436
436
|
}, [
|
|
437
|
-
de(
|
|
438
|
-
modelValue:
|
|
439
|
-
"onUpdate:modelValue": a[1] || (a[1] = (v) =>
|
|
440
|
-
onDone:
|
|
437
|
+
de(Fe, {
|
|
438
|
+
modelValue: c.value,
|
|
439
|
+
"onUpdate:modelValue": a[1] || (a[1] = (v) => c.value = v),
|
|
440
|
+
onDone: h(E),
|
|
441
441
|
"entry-class-name": "acpPresetBody",
|
|
442
442
|
ref_key: "customPicker",
|
|
443
443
|
ref: u,
|
|
444
444
|
"show-package-name": l.showPackageName,
|
|
445
445
|
pos: l.posInternal
|
|
446
446
|
}, null, 8, ["modelValue", "onDone", "show-package-name", "pos"]),
|
|
447
|
-
|
|
447
|
+
Q(d("input", {
|
|
448
448
|
name: "colorType",
|
|
449
449
|
type: "radio",
|
|
450
450
|
id: "acpColorPresetCustom",
|
|
@@ -453,19 +453,19 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
453
453
|
}, null, 512), [
|
|
454
454
|
[le, y.value]
|
|
455
455
|
]),
|
|
456
|
-
a[7] || (a[7] =
|
|
456
|
+
a[7] || (a[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
|
|
457
457
|
]),
|
|
458
|
-
a[8] || (a[8] =
|
|
459
|
-
(
|
|
458
|
+
a[8] || (a[8] = d("div", { class: "acpSep" }, null, -1)),
|
|
459
|
+
(T(!0), N(Se, null, we(l.presets, (v) => (T(), N("label", {
|
|
460
460
|
for: `acpColorPreset${v.name}`,
|
|
461
461
|
onClick: (H) => k(v),
|
|
462
462
|
key: v.name
|
|
463
463
|
}, [
|
|
464
|
-
|
|
464
|
+
d("div", {
|
|
465
465
|
class: "acpPresetBody",
|
|
466
466
|
style: j({ backgroundColor: v.colorHex })
|
|
467
467
|
}, null, 4),
|
|
468
|
-
|
|
468
|
+
Q(d("input", {
|
|
469
469
|
name: "colorType",
|
|
470
470
|
type: "radio",
|
|
471
471
|
id: `acpColorPreset${v.name}`,
|
|
@@ -474,22 +474,22 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
474
474
|
}, null, 8, Ye), [
|
|
475
475
|
[le, y.value]
|
|
476
476
|
]),
|
|
477
|
-
|
|
477
|
+
d("div", Ge, Ie(v.name), 1)
|
|
478
478
|
], 8, Ke))), 128)),
|
|
479
|
-
a[9] || (a[9] =
|
|
479
|
+
a[9] || (a[9] = d("div", { class: "acpSep" }, null, -1))
|
|
480
480
|
]),
|
|
481
|
-
|
|
482
|
-
|
|
481
|
+
d("div", Je, [
|
|
482
|
+
d("button", {
|
|
483
483
|
onClick: a[5] || (a[5] = //@ts-ignore
|
|
484
|
-
(...v) =>
|
|
484
|
+
(...v) => h(E) && h(E)(...v))
|
|
485
485
|
}, "OK")
|
|
486
486
|
])
|
|
487
|
-
], 4)) :
|
|
487
|
+
], 4)) : ee("", !0)
|
|
488
488
|
]));
|
|
489
489
|
}
|
|
490
|
-
}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-
|
|
490
|
+
}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-9fbc3723"]]);
|
|
491
491
|
export {
|
|
492
|
-
|
|
492
|
+
Fe as AuColorPicker,
|
|
493
493
|
nt as AuColorPickerPresetsNested,
|
|
494
494
|
Te as AuColorPickerRing
|
|
495
495
|
};
|
|
@@ -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: HEX) => any) | undefined;
|
|
20
20
|
}>, {
|
|
21
21
|
enforceTo: (hex: HEX) => void;
|
|
22
22
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
23
|
-
changed: (hex:
|
|
23
|
+
changed: (hex: HEX) => 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: HEX) => 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: HEX) => any) | undefined;
|
|
32
32
|
}>, {
|
|
33
|
-
enforceTo: (hex:
|
|
33
|
+
enforceTo: (hex: HEX) => void;
|
|
34
34
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
35
|
-
changed: (hex:
|
|
35
|
+
changed: (hex: HEX) => 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: HEX) => any) | undefined;
|
|
50
50
|
}>, {
|
|
51
|
-
enforceTo: (hex:
|
|
51
|
+
enforceTo: (hex: HEX) => void;
|
|
52
52
|
}, {}, {}, {}, {}> | null;
|
|
53
53
|
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
54
54
|
P: {};
|
|
@@ -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: HEX) => any;
|
|
10
10
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
11
|
-
onChanged?: ((hex:
|
|
11
|
+
onChanged?: ((hex: HEX) => any) | undefined;
|
|
12
12
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
13
13
|
cvs: HTMLCanvasElement;
|
|
14
14
|
cursorCvs: HTMLCanvasElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurouscia/au-color-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Au"
|
|
6
6
|
},
|
|
@@ -37,16 +37,17 @@
|
|
|
37
37
|
"prepack": "npm run build"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"color-convert": "^3.1.
|
|
41
|
-
|
|
40
|
+
"color-convert": "^3.1.3"
|
|
41
|
+
},
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"vue": "^3.5.34"
|
|
42
44
|
},
|
|
43
45
|
"devDependencies": {
|
|
44
|
-
"@types/
|
|
45
|
-
"@
|
|
46
|
-
"
|
|
47
|
-
"sass": "^1.93.3",
|
|
46
|
+
"@types/node": "^25.9.0",
|
|
47
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
48
|
+
"sass": "^1.99.0",
|
|
48
49
|
"typescript": "^5.9.3",
|
|
49
|
-
"vite": "^7.
|
|
50
|
+
"vite": "^7.3.3",
|
|
50
51
|
"vite-plugin-dts": "^4.5.4"
|
|
51
52
|
}
|
|
52
|
-
}
|
|
53
|
+
}
|