@aurouscia/au-color-picker 1.1.0 → 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 -102
- package/dist/au-color-picker.css +1 -1
- package/dist/au-color-picker.es.js +20 -20
- 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,103 +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.0.0
|
|
98
|
-
修改了api
|
|
99
|
-
### 1.1.0
|
|
100
|
-
修复了旧浏览器上失效的问题（消除过新的context.reset函数）
|
|
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
|
+
⚠️注意：“选中的预设”是与“自定义颜色”独立的两个状态
|
|
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
|
+
## 许可证
|
|
103
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,4 +1,4 @@
|
|
|
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
3
|
function be(l, P) {
|
|
4
4
|
const m = l.x - P.x, t = l.y - P.y;
|
|
@@ -115,7 +115,7 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
115
115
|
v(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
|
|
116
116
|
}), he(() => {
|
|
117
117
|
window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
|
|
118
|
-
}), (n, i) => (
|
|
118
|
+
}), (n, i) => (T(), N("div", {
|
|
119
119
|
class: "acpRingBody",
|
|
120
120
|
style: j({ width: J + "px", height: Ve + "px" }),
|
|
121
121
|
onTouchstart: Y,
|
|
@@ -145,7 +145,7 @@ const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16,
|
|
|
145
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
150
|
return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
|
|
151
151
|
}
|
|
@@ -284,14 +284,14 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
284
284
|
g && g !== u.value && H(g);
|
|
285
285
|
}), W(c, (g) => {
|
|
286
286
|
g === !1 && F("done");
|
|
287
|
-
}), (g, e) => (
|
|
287
|
+
}), (g, e) => (T(), N("div", Ne, [
|
|
288
288
|
d("div", {
|
|
289
289
|
class: ke(l.entryClassName || "acpEntry"),
|
|
290
290
|
style: j(h(E)),
|
|
291
291
|
onClick: e[0] || (e[0] = //@ts-ignore
|
|
292
292
|
(...o) => h(A) && h(A)(...o))
|
|
293
293
|
}, null, 6),
|
|
294
|
-
h(c) ? (
|
|
294
|
+
h(c) ? (T(), N("div", {
|
|
295
295
|
key: 0,
|
|
296
296
|
class: "acpPanel",
|
|
297
297
|
style: j(h(L)),
|
|
@@ -307,7 +307,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
307
307
|
}, null, 8, ["initial-hex", "show-package-name"])
|
|
308
308
|
]),
|
|
309
309
|
d("div", He, [
|
|
310
|
-
|
|
310
|
+
Q(d("select", {
|
|
311
311
|
"onUpdate:modelValue": e[1] || (e[1] = (o) => D.value = o)
|
|
312
312
|
}, [...e[11] || (e[11] = [
|
|
313
313
|
d("option", { value: "hex" }, "HEX", -1),
|
|
@@ -316,14 +316,14 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
316
316
|
])], 512), [
|
|
317
317
|
[Ce, D.value]
|
|
318
318
|
]),
|
|
319
|
-
D.value == "hex" ? (
|
|
319
|
+
D.value == "hex" ? (T(), N("div", Me, [
|
|
320
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" ? (
|
|
326
|
+
])) : D.value == "rgb" ? (T(), N("div", Ee, [
|
|
327
327
|
d("input", {
|
|
328
328
|
value: k.value[0],
|
|
329
329
|
onBlur: e[2] || (e[2] = (o) => R(o, "r"))
|
|
@@ -336,7 +336,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
336
336
|
value: k.value[2],
|
|
337
337
|
onBlur: e[4] || (e[4] = (o) => R(o, "b"))
|
|
338
338
|
}, null, 40, Ue)
|
|
339
|
-
])) : (
|
|
339
|
+
])) : (T(), N("div", Le, [
|
|
340
340
|
d("input", {
|
|
341
341
|
value: S.value[0],
|
|
342
342
|
onBlur: e[5] || (e[5] = (o) => s(o, "h"))
|
|
@@ -357,16 +357,16 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
357
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
364
|
(...o) => h(ue) && h(ue)(...o))
|
|
365
|
-
}, " au-color-picker ")) :
|
|
366
|
-
], 4)) :
|
|
365
|
+
}, " au-color-picker ")) : ee("", !0)
|
|
366
|
+
], 4)) : ee("", !0)
|
|
367
367
|
]));
|
|
368
368
|
}
|
|
369
|
-
}), Fe = /* @__PURE__ */ oe(je, [["__scopeId", "data-v-
|
|
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: {},
|
|
@@ -416,14 +416,14 @@ 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) => (
|
|
419
|
+
}), (s, a) => (T(), N("div", Xe, [
|
|
420
420
|
d("div", {
|
|
421
421
|
class: "acpEntry",
|
|
422
422
|
style: j(h(V)),
|
|
423
423
|
onClick: a[0] || (a[0] = //@ts-ignore
|
|
424
424
|
(...v) => h(L) && h(L)(...v))
|
|
425
425
|
}, null, 4),
|
|
426
|
-
h(A) ? (
|
|
426
|
+
h(A) ? (T(), N("div", {
|
|
427
427
|
key: 0,
|
|
428
428
|
class: "acpPanel",
|
|
429
429
|
style: j(h(D)),
|
|
@@ -444,7 +444,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
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",
|
|
@@ -456,7 +456,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
456
456
|
a[7] || (a[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
|
|
457
457
|
]),
|
|
458
458
|
a[8] || (a[8] = d("div", { class: "acpSep" }, null, -1)),
|
|
459
|
-
(
|
|
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
|
|
@@ -465,7 +465,7 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
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}`,
|
|
@@ -484,10 +484,10 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
|
|
|
484
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,
|
|
@@ -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
|
+
}
|