@opentinyvue/vue-color-select-panel 2.21.0 → 3.21.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/lib/index.js +1 -1
- package/lib/pc.js +331 -264
- package/package.json +8 -8
- package/src/components/alpha-select.vue.d.ts +20 -1
- package/src/components/hue-select.vue.d.ts +30 -1
- package/src/components/sv-select.vue.d.ts +18 -1
- package/src/index.d.ts +69 -1
- package/src/pc.vue.d.ts +63 -1
package/lib/index.js
CHANGED
package/lib/pc.js
CHANGED
|
@@ -4,6 +4,7 @@ import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-rende
|
|
|
4
4
|
import { defineComponent, setup, props, directive } from '@opentinyvue/vue-common';
|
|
5
5
|
import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
|
|
6
6
|
import { api, renderless } from '@opentinyvue/vue-renderless/color-select-panel/sv-select/vue';
|
|
7
|
+
import { openBlock, createElementBlock, normalizeStyle, createElementVNode, resolveComponent, createVNode, resolveDirective, withDirectives, withModifiers, createBlock, createCommentVNode, withCtx, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
|
|
7
8
|
import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
|
|
8
9
|
import '@opentinyvue/vue-theme/color-select-panel/index.css';
|
|
9
10
|
import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
|
|
@@ -12,62 +13,40 @@ import CollapseItem from '@opentinyvue/vue-collapse-item';
|
|
|
12
13
|
import Select from '@opentinyvue/vue-select';
|
|
13
14
|
import Option from '@opentinyvue/vue-option';
|
|
14
15
|
|
|
15
|
-
function
|
|
16
|
-
var
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
function _createForOfIteratorHelperLoose(r, e) {
|
|
17
|
+
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
18
|
+
if (t) return (t = t.call(r)).next.bind(t);
|
|
19
|
+
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
|
|
20
|
+
t && (r = t);
|
|
21
|
+
var o = 0;
|
|
22
|
+
return function() {
|
|
23
|
+
return o >= r.length ? { done: true } : { done: false, value: r[o++] };
|
|
24
|
+
};
|
|
21
25
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var originalRender = options.render;
|
|
30
|
-
options.render = function renderWithStyleInjection(h, context) {
|
|
31
|
-
hook.call(context);
|
|
32
|
-
return originalRender(h, context);
|
|
33
|
-
};
|
|
34
|
-
} else {
|
|
35
|
-
var existing = options.beforeCreate;
|
|
36
|
-
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
37
|
-
}
|
|
26
|
+
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
27
|
+
}
|
|
28
|
+
function _unsupportedIterableToArray(r, a) {
|
|
29
|
+
if (r) {
|
|
30
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
31
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
32
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
38
33
|
}
|
|
39
|
-
return {
|
|
40
|
-
exports: scriptExports,
|
|
41
|
-
options
|
|
42
|
-
};
|
|
43
34
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
staticClass: "white"
|
|
57
|
-
}), _c("div", {
|
|
58
|
-
staticClass: "black"
|
|
59
|
-
}), _c("div", {
|
|
60
|
-
ref: "cursor",
|
|
61
|
-
staticClass: "cursor",
|
|
62
|
-
style: {
|
|
63
|
-
top: _vm.state.cursorTop + "px",
|
|
64
|
-
left: _vm.state.cursorLeft + "px",
|
|
65
|
-
transform: "translate(-50%, -50%)"
|
|
66
|
-
}
|
|
67
|
-
})]);
|
|
35
|
+
function _arrayLikeToArray(r, a) {
|
|
36
|
+
(null == a || a > r.length) && (a = r.length);
|
|
37
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
38
|
+
return n;
|
|
39
|
+
}
|
|
40
|
+
var _export_sfc = function _export_sfc2(sfc, props) {
|
|
41
|
+
var target = sfc.__vccOpts || sfc;
|
|
42
|
+
for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
|
|
43
|
+
var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
|
|
44
|
+
target[key] = val;
|
|
45
|
+
}
|
|
46
|
+
return target;
|
|
68
47
|
};
|
|
69
|
-
|
|
70
|
-
var
|
|
48
|
+
|
|
49
|
+
var _sfc_main$3 = defineComponent({
|
|
71
50
|
emit: ["ready", "svUpdate"],
|
|
72
51
|
props: {
|
|
73
52
|
color: {
|
|
@@ -84,42 +63,55 @@ var __vue2_script$3 = defineComponent({
|
|
|
84
63
|
});
|
|
85
64
|
}
|
|
86
65
|
});
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
66
|
+
var _hoisted_1$2 = /* @__PURE__ */ createElementVNode(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
class: "white"
|
|
70
|
+
},
|
|
71
|
+
null,
|
|
72
|
+
-1
|
|
73
|
+
/* HOISTED */
|
|
74
|
+
);
|
|
75
|
+
var _hoisted_2$2 = /* @__PURE__ */ createElementVNode(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
class: "black"
|
|
79
|
+
},
|
|
80
|
+
null,
|
|
81
|
+
-1
|
|
82
|
+
/* HOISTED */
|
|
83
|
+
);
|
|
84
|
+
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
85
|
+
return openBlock(), createElementBlock(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
class: "tiny-color-select-panel__inner__color-select",
|
|
89
|
+
ref: "wrapper",
|
|
90
|
+
style: normalizeStyle({
|
|
91
|
+
background: _ctx.state.bg
|
|
92
|
+
})
|
|
106
93
|
},
|
|
107
|
-
|
|
108
|
-
"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
94
|
+
[_hoisted_1$2, _hoisted_2$2, createElementVNode(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
class: "cursor",
|
|
98
|
+
ref: "cursor",
|
|
99
|
+
style: normalizeStyle({
|
|
100
|
+
top: _ctx.state.cursorTop + "px",
|
|
101
|
+
left: _ctx.state.cursorLeft + "px",
|
|
102
|
+
transform: "translate(-50%, -50%)"
|
|
103
|
+
})
|
|
104
|
+
},
|
|
105
|
+
null,
|
|
106
|
+
4
|
|
107
|
+
/* STYLE */
|
|
108
|
+
)],
|
|
109
|
+
4
|
|
110
|
+
/* STYLE */
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
var SvSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
|
|
114
|
+
var _sfc_main$2 = defineComponent({
|
|
123
115
|
emits: ["hueUpdate", "svReady", "hueReady"],
|
|
124
116
|
props: {
|
|
125
117
|
color: {
|
|
@@ -142,44 +134,40 @@ var __vue2_script$2 = defineComponent({
|
|
|
142
134
|
});
|
|
143
135
|
}
|
|
144
136
|
});
|
|
145
|
-
var
|
|
146
|
-
|
|
147
|
-
function __vue2_injectStyles$2(context) {
|
|
148
|
-
for (var o in __cssModules$2) {
|
|
149
|
-
this[o] = __cssModules$2[o];
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
var HueSelect = /* @__PURE__ */ function() {
|
|
153
|
-
return __component__$2.exports;
|
|
154
|
-
}();
|
|
155
|
-
var render$1 = function render$12() {
|
|
156
|
-
var _vm = this;
|
|
157
|
-
var _h = _vm.$createElement;
|
|
158
|
-
var _c = _vm._self._c || _h;
|
|
159
|
-
return _c("div", {
|
|
160
|
-
ref: "alphaWrapper",
|
|
161
|
-
staticClass: "tiny-color-select-panel__alpha",
|
|
162
|
-
on: {
|
|
163
|
-
"click": _vm.onClick
|
|
164
|
-
}
|
|
165
|
-
}, [_c("div", {
|
|
166
|
-
ref: "slider",
|
|
167
|
-
staticClass: "tiny-color-select-panel__alpha__slider",
|
|
168
|
-
style: {
|
|
169
|
-
background: _vm.state.background
|
|
170
|
-
}
|
|
171
|
-
}), _c("div", {
|
|
172
|
-
ref: "alphaThumb",
|
|
173
|
-
staticClass: "tiny-color-select-panel__alpha__thumb",
|
|
174
|
-
style: {
|
|
175
|
-
top: 0,
|
|
176
|
-
left: _vm.state.left + "px",
|
|
177
|
-
transform: "translateX(-50%)"
|
|
178
|
-
}
|
|
179
|
-
})]);
|
|
137
|
+
var _hoisted_1$1 = {
|
|
138
|
+
class: "tiny-color-select-panel__inner"
|
|
180
139
|
};
|
|
181
|
-
var
|
|
182
|
-
|
|
140
|
+
var _hoisted_2$1 = {
|
|
141
|
+
class: "tiny-color-select-panel__inner__hue-select",
|
|
142
|
+
ref: "bar"
|
|
143
|
+
};
|
|
144
|
+
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
145
|
+
var _component_sv_select = resolveComponent("sv-select");
|
|
146
|
+
return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_sv_select, {
|
|
147
|
+
color: _ctx.color,
|
|
148
|
+
onReady: _ctx.onSvReady
|
|
149
|
+
}, null, 8, ["color", "onReady"]), createElementVNode(
|
|
150
|
+
"div",
|
|
151
|
+
_hoisted_2$1,
|
|
152
|
+
[createElementVNode(
|
|
153
|
+
"div",
|
|
154
|
+
{
|
|
155
|
+
ref: "thumb",
|
|
156
|
+
style: normalizeStyle({
|
|
157
|
+
top: _ctx.state.thumbTop + "px",
|
|
158
|
+
transform: "translateY(-50%)"
|
|
159
|
+
})
|
|
160
|
+
},
|
|
161
|
+
null,
|
|
162
|
+
4
|
|
163
|
+
/* STYLE */
|
|
164
|
+
)],
|
|
165
|
+
512
|
|
166
|
+
/* NEED_PATCH */
|
|
167
|
+
)]);
|
|
168
|
+
}
|
|
169
|
+
var HueSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
|
|
170
|
+
var _sfc_main$1 = defineComponent({
|
|
183
171
|
emits: ["ready"],
|
|
184
172
|
props: {
|
|
185
173
|
color: {
|
|
@@ -196,140 +184,49 @@ var __vue2_script$1 = defineComponent({
|
|
|
196
184
|
});
|
|
197
185
|
}
|
|
198
186
|
});
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
}();
|
|
209
|
-
var render = function render2() {
|
|
210
|
-
var _vm = this;
|
|
211
|
-
var _h = _vm.$createElement;
|
|
212
|
-
var _c = _vm._self._c || _h;
|
|
213
|
-
return _vm.state.showPicker ? _c("div", {
|
|
214
|
-
directives: [{
|
|
215
|
-
name: "clickoutside",
|
|
216
|
-
rawName: "v-clickoutside",
|
|
217
|
-
value: _vm.onClickOutside,
|
|
218
|
-
expression: "onClickOutside"
|
|
219
|
-
}],
|
|
220
|
-
staticClass: "tiny-color-select-panel",
|
|
221
|
-
on: {
|
|
222
|
-
"click": function click($event) {
|
|
223
|
-
$event.stopPropagation();
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}, [_c("hue-select", {
|
|
227
|
-
attrs: {
|
|
228
|
-
"color": _vm.state.color
|
|
229
|
-
},
|
|
230
|
-
on: {
|
|
231
|
-
"hue-ready": _vm.onHueReady,
|
|
232
|
-
"sv-ready": _vm.onSvReady
|
|
233
|
-
}
|
|
234
|
-
}), _vm.alpha ? _c("alpha-select", {
|
|
235
|
-
attrs: {
|
|
236
|
-
"color": _vm.state.color
|
|
237
|
-
},
|
|
238
|
-
on: {
|
|
239
|
-
"ready": _vm.onAlphaReady
|
|
240
|
-
}
|
|
241
|
-
}) : _vm._e(), _c("div", {
|
|
242
|
-
staticClass: "tiny-color-select-panel__tools"
|
|
243
|
-
}, [_vm.state.formats.length ? _c("div", {
|
|
244
|
-
staticClass: "tiny-color-select-panel__tools__format-select"
|
|
245
|
-
}, [_c("tiny-select", {
|
|
246
|
-
model: {
|
|
247
|
-
value: _vm.state.currentFormat,
|
|
248
|
-
callback: function callback($$v) {
|
|
249
|
-
_vm.$set(_vm.state, "currentFormat", $$v);
|
|
250
|
-
},
|
|
251
|
-
expression: "state.currentFormat"
|
|
252
|
-
}
|
|
253
|
-
}, _vm._l(_vm.state.formats, function(formatValue) {
|
|
254
|
-
return _c("tiny-option", {
|
|
255
|
-
key: formatValue,
|
|
256
|
-
attrs: {
|
|
257
|
-
"value": formatValue,
|
|
258
|
-
"label": formatValue
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
}), 1)], 1) : _vm._e(), _c("tiny-input", {
|
|
262
|
-
attrs: {
|
|
263
|
-
"size": "small"
|
|
264
|
-
},
|
|
265
|
-
model: {
|
|
266
|
-
value: _vm.state.input,
|
|
267
|
-
callback: function callback($$v) {
|
|
268
|
-
_vm.$set(_vm.state, "input", $$v);
|
|
269
|
-
},
|
|
270
|
-
expression: "state.input"
|
|
271
|
-
}
|
|
272
|
-
}), _c("div", {
|
|
273
|
-
staticClass: "tiny-color-select-panel__tools-btns"
|
|
274
|
-
}, [_c("tiny-button", {
|
|
275
|
-
attrs: {
|
|
276
|
-
"size": "small"
|
|
187
|
+
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
188
|
+
return openBlock(), createElementBlock(
|
|
189
|
+
"div",
|
|
190
|
+
{
|
|
191
|
+
class: "tiny-color-select-panel__alpha",
|
|
192
|
+
ref: "alphaWrapper",
|
|
193
|
+
onClick: _cache[0] || (_cache[0] = function() {
|
|
194
|
+
return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
|
|
195
|
+
})
|
|
277
196
|
},
|
|
278
|
-
|
|
279
|
-
"
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
on: {
|
|
287
|
-
"click": _vm.onConfirm
|
|
288
|
-
}
|
|
289
|
-
}, [_vm._v(" " + _vm._s(_vm.t("ui.colorSelectPanel.confirm")) + " ")])], 1)], 1), _c("tiny-collapse", [_vm.state.enableHistory ? _c("tiny-collapse-item", {
|
|
290
|
-
attrs: {
|
|
291
|
-
"title": _vm.t("ui.colorSelectPanel.history"),
|
|
292
|
-
"name": "history"
|
|
293
|
-
}
|
|
294
|
-
}, [_vm.state.stack.length ? _c("div", {
|
|
295
|
-
staticClass: "tiny-color-select-panel__history"
|
|
296
|
-
}, _vm._l(_vm.state.stack, function(color, key) {
|
|
297
|
-
return _c("div", {
|
|
298
|
-
key,
|
|
299
|
-
staticClass: "tiny-color-select-panel__history__color-block",
|
|
300
|
-
style: {
|
|
301
|
-
background: color
|
|
197
|
+
[createElementVNode(
|
|
198
|
+
"div",
|
|
199
|
+
{
|
|
200
|
+
class: "tiny-color-select-panel__alpha__slider",
|
|
201
|
+
style: normalizeStyle({
|
|
202
|
+
background: _ctx.state.background
|
|
203
|
+
}),
|
|
204
|
+
ref: "slider"
|
|
302
205
|
},
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
}, _vm._l(_vm.state.predefineStack, function(color, key) {
|
|
317
|
-
return _c("div", {
|
|
318
|
-
key,
|
|
319
|
-
staticClass: "tiny-color-select-panel__predefine__color-block",
|
|
320
|
-
style: {
|
|
321
|
-
background: color
|
|
206
|
+
null,
|
|
207
|
+
4
|
|
208
|
+
/* STYLE */
|
|
209
|
+
), createElementVNode(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
class: "tiny-color-select-panel__alpha__thumb",
|
|
213
|
+
style: normalizeStyle({
|
|
214
|
+
top: 0,
|
|
215
|
+
left: _ctx.state.left + "px",
|
|
216
|
+
transform: "translateX(-50%)"
|
|
217
|
+
}),
|
|
218
|
+
ref: "alphaThumb"
|
|
322
219
|
},
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
}
|
|
331
|
-
var
|
|
332
|
-
var
|
|
220
|
+
null,
|
|
221
|
+
4
|
|
222
|
+
/* STYLE */
|
|
223
|
+
)],
|
|
224
|
+
512
|
|
225
|
+
/* NEED_PATCH */
|
|
226
|
+
);
|
|
227
|
+
}
|
|
228
|
+
var AlphaSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
|
|
229
|
+
var _sfc_main = defineComponent({
|
|
333
230
|
emits: ["update:modelValue", "cancel", "confirm", "color-update"],
|
|
334
231
|
props: [].concat(props, ["modelValue", "visible", "alpha", "history", "predefine", "format", "enableHistory", "enablePredefineColor"]),
|
|
335
232
|
components: {
|
|
@@ -354,15 +251,185 @@ var __vue2_script = defineComponent({
|
|
|
354
251
|
});
|
|
355
252
|
}
|
|
356
253
|
});
|
|
357
|
-
var
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
254
|
+
var _hoisted_1 = {
|
|
255
|
+
class: "tiny-color-select-panel__tools"
|
|
256
|
+
};
|
|
257
|
+
var _hoisted_2 = {
|
|
258
|
+
key: 0,
|
|
259
|
+
class: "tiny-color-select-panel__tools__format-select"
|
|
260
|
+
};
|
|
261
|
+
var _hoisted_3 = {
|
|
262
|
+
class: "tiny-color-select-panel__tools-btns"
|
|
263
|
+
};
|
|
264
|
+
var _hoisted_4 = {
|
|
265
|
+
key: 0,
|
|
266
|
+
class: "tiny-color-select-panel__history"
|
|
267
|
+
};
|
|
268
|
+
var _hoisted_5 = ["onClick"];
|
|
269
|
+
var _hoisted_6 = {
|
|
270
|
+
key: 1
|
|
271
|
+
};
|
|
272
|
+
var _hoisted_7 = {
|
|
273
|
+
key: 0,
|
|
274
|
+
class: "tiny-color-select-panel__predefine"
|
|
275
|
+
};
|
|
276
|
+
var _hoisted_8 = ["onClick"];
|
|
277
|
+
var _hoisted_9 = {
|
|
278
|
+
key: 1
|
|
279
|
+
};
|
|
280
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
281
|
+
var _component_hue_select = resolveComponent("hue-select");
|
|
282
|
+
var _component_alpha_select = resolveComponent("alpha-select");
|
|
283
|
+
var _component_tiny_option = resolveComponent("tiny-option");
|
|
284
|
+
var _component_tiny_select = resolveComponent("tiny-select");
|
|
285
|
+
var _component_tiny_input = resolveComponent("tiny-input");
|
|
286
|
+
var _component_tiny_button = resolveComponent("tiny-button");
|
|
287
|
+
var _component_tiny_collapse_item = resolveComponent("tiny-collapse-item");
|
|
288
|
+
var _component_tiny_collapse = resolveComponent("tiny-collapse");
|
|
289
|
+
var _directive_clickoutside = resolveDirective("clickoutside");
|
|
290
|
+
return _ctx.state.showPicker ? withDirectives((openBlock(), createElementBlock("div", {
|
|
291
|
+
key: 0,
|
|
292
|
+
class: "tiny-color-select-panel",
|
|
293
|
+
onClick: _cache[2] || (_cache[2] = withModifiers(function() {
|
|
294
|
+
}, ["stop"]))
|
|
295
|
+
}, [createVNode(_component_hue_select, {
|
|
296
|
+
color: _ctx.state.color,
|
|
297
|
+
onHueReady: _ctx.onHueReady,
|
|
298
|
+
onSvReady: _ctx.onSvReady
|
|
299
|
+
}, null, 8, ["color", "onHueReady", "onSvReady"]), _ctx.alpha ? (openBlock(), createBlock(_component_alpha_select, {
|
|
300
|
+
key: 0,
|
|
301
|
+
color: _ctx.state.color,
|
|
302
|
+
onReady: _ctx.onAlphaReady
|
|
303
|
+
}, null, 8, ["color", "onReady"])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [_ctx.state.formats.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_tiny_select, {
|
|
304
|
+
modelValue: _ctx.state.currentFormat,
|
|
305
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
|
|
306
|
+
return _ctx.state.currentFormat = $event;
|
|
307
|
+
})
|
|
308
|
+
}, {
|
|
309
|
+
default: withCtx(function() {
|
|
310
|
+
return [(openBlock(true), createElementBlock(
|
|
311
|
+
Fragment,
|
|
312
|
+
null,
|
|
313
|
+
renderList(_ctx.state.formats, function(formatValue) {
|
|
314
|
+
return openBlock(), createBlock(_component_tiny_option, {
|
|
315
|
+
key: formatValue,
|
|
316
|
+
value: formatValue,
|
|
317
|
+
label: formatValue
|
|
318
|
+
}, null, 8, ["value", "label"]);
|
|
319
|
+
}),
|
|
320
|
+
128
|
|
321
|
+
/* KEYED_FRAGMENT */
|
|
322
|
+
))];
|
|
323
|
+
}),
|
|
324
|
+
_: 1
|
|
325
|
+
/* STABLE */
|
|
326
|
+
}, 8, ["modelValue"])])) : createCommentVNode("v-if", true), createVNode(_component_tiny_input, {
|
|
327
|
+
modelValue: _ctx.state.input,
|
|
328
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
|
|
329
|
+
return _ctx.state.input = $event;
|
|
330
|
+
}),
|
|
331
|
+
size: "small"
|
|
332
|
+
}, null, 8, ["modelValue"]), createElementVNode("div", _hoisted_3, [createVNode(_component_tiny_button, {
|
|
333
|
+
size: "small",
|
|
334
|
+
onClick: _ctx.onCancel
|
|
335
|
+
}, {
|
|
336
|
+
default: withCtx(function() {
|
|
337
|
+
return [createTextVNode(
|
|
338
|
+
toDisplayString(_ctx.t("ui.colorSelectPanel.cancel")),
|
|
339
|
+
1
|
|
340
|
+
/* TEXT */
|
|
341
|
+
)];
|
|
342
|
+
}),
|
|
343
|
+
_: 1
|
|
344
|
+
/* STABLE */
|
|
345
|
+
}, 8, ["onClick"]), createVNode(_component_tiny_button, {
|
|
346
|
+
type: "primary",
|
|
347
|
+
size: "small",
|
|
348
|
+
onClick: _ctx.onConfirm
|
|
349
|
+
}, {
|
|
350
|
+
default: withCtx(function() {
|
|
351
|
+
return [createTextVNode(
|
|
352
|
+
toDisplayString(_ctx.t("ui.colorSelectPanel.confirm")),
|
|
353
|
+
1
|
|
354
|
+
/* TEXT */
|
|
355
|
+
)];
|
|
356
|
+
}),
|
|
357
|
+
_: 1
|
|
358
|
+
/* STABLE */
|
|
359
|
+
}, 8, ["onClick"])])]), createVNode(_component_tiny_collapse, null, {
|
|
360
|
+
default: withCtx(function() {
|
|
361
|
+
return [_ctx.state.enableHistory ? (openBlock(), createBlock(_component_tiny_collapse_item, {
|
|
362
|
+
key: 0,
|
|
363
|
+
title: _ctx.t("ui.colorSelectPanel.history"),
|
|
364
|
+
name: "history"
|
|
365
|
+
}, {
|
|
366
|
+
default: withCtx(function() {
|
|
367
|
+
return [_ctx.state.stack.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(
|
|
368
|
+
Fragment,
|
|
369
|
+
null,
|
|
370
|
+
renderList(_ctx.state.stack, function(color, key) {
|
|
371
|
+
return openBlock(), createElementBlock("div", {
|
|
372
|
+
class: "tiny-color-select-panel__history__color-block",
|
|
373
|
+
key,
|
|
374
|
+
style: normalizeStyle({
|
|
375
|
+
background: color
|
|
376
|
+
}),
|
|
377
|
+
onClick: function onClick() {
|
|
378
|
+
return _ctx.onHistoryClick(color);
|
|
379
|
+
}
|
|
380
|
+
}, null, 12, _hoisted_5);
|
|
381
|
+
}),
|
|
382
|
+
128
|
|
383
|
+
/* KEYED_FRAGMENT */
|
|
384
|
+
))])) : createCommentVNode("v-if", true), !_ctx.state.stack.length ? (openBlock(), createElementBlock(
|
|
385
|
+
"div",
|
|
386
|
+
_hoisted_6,
|
|
387
|
+
toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
|
|
388
|
+
1
|
|
389
|
+
/* TEXT */
|
|
390
|
+
)) : createCommentVNode("v-if", true)];
|
|
391
|
+
}),
|
|
392
|
+
_: 1
|
|
393
|
+
/* STABLE */
|
|
394
|
+
}, 8, ["title"])) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor ? (openBlock(), createBlock(_component_tiny_collapse_item, {
|
|
395
|
+
key: 1,
|
|
396
|
+
title: _ctx.t("ui.colorSelectPanel.predefine"),
|
|
397
|
+
name: "predefine"
|
|
398
|
+
}, {
|
|
399
|
+
default: withCtx(function() {
|
|
400
|
+
return [_ctx.state.predefineStack.length ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(
|
|
401
|
+
Fragment,
|
|
402
|
+
null,
|
|
403
|
+
renderList(_ctx.state.predefineStack, function(color, key) {
|
|
404
|
+
return openBlock(), createElementBlock("div", {
|
|
405
|
+
class: "tiny-color-select-panel__predefine__color-block",
|
|
406
|
+
key,
|
|
407
|
+
style: normalizeStyle({
|
|
408
|
+
background: color
|
|
409
|
+
}),
|
|
410
|
+
onClick: function onClick() {
|
|
411
|
+
return _ctx.onPredefineColorClick(color);
|
|
412
|
+
}
|
|
413
|
+
}, null, 12, _hoisted_8);
|
|
414
|
+
}),
|
|
415
|
+
128
|
|
416
|
+
/* KEYED_FRAGMENT */
|
|
417
|
+
))])) : createCommentVNode("v-if", true), !_ctx.state.predefineStack.length ? (openBlock(), createElementBlock(
|
|
418
|
+
"div",
|
|
419
|
+
_hoisted_9,
|
|
420
|
+
toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
|
|
421
|
+
1
|
|
422
|
+
/* TEXT */
|
|
423
|
+
)) : createCommentVNode("v-if", true)];
|
|
424
|
+
}),
|
|
425
|
+
_: 1
|
|
426
|
+
/* STABLE */
|
|
427
|
+
}, 8, ["title"])) : createCommentVNode("v-if", true)];
|
|
428
|
+
}),
|
|
429
|
+
_: 1
|
|
430
|
+
/* STABLE */
|
|
431
|
+
})])), [[_directive_clickoutside, _ctx.onClickOutside]]) : createCommentVNode("v-if", true);
|
|
363
432
|
}
|
|
364
|
-
var pc = /* @__PURE__ */
|
|
365
|
-
return __component__.exports;
|
|
366
|
-
}();
|
|
433
|
+
var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
367
434
|
|
|
368
435
|
export { pc as default };
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentinyvue/vue-color-select-panel",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.21.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"module": "./lib/index.js",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"type": "module",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@opentinyvue/vue-button": "~
|
|
11
|
-
"@opentinyvue/vue-collapse": "~
|
|
12
|
-
"@opentinyvue/vue-collapse-item": "~
|
|
13
|
-
"@opentinyvue/vue-common": "~
|
|
14
|
-
"@opentinyvue/vue-input": "~
|
|
15
|
-
"@opentinyvue/vue-option": "~
|
|
10
|
+
"@opentinyvue/vue-button": "~3.21.0",
|
|
11
|
+
"@opentinyvue/vue-collapse": "~3.21.0",
|
|
12
|
+
"@opentinyvue/vue-collapse-item": "~3.21.0",
|
|
13
|
+
"@opentinyvue/vue-common": "~3.21.0",
|
|
14
|
+
"@opentinyvue/vue-input": "~3.21.0",
|
|
15
|
+
"@opentinyvue/vue-option": "~3.21.0",
|
|
16
16
|
"@opentinyvue/vue-renderless": "~3.21.0",
|
|
17
|
-
"@opentinyvue/vue-select": "~
|
|
17
|
+
"@opentinyvue/vue-select": "~3.21.0",
|
|
18
18
|
"@opentinyvue/vue-theme": "~3.21.0"
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
@@ -1,2 +1,21 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<{
|
|
2
|
+
color: {
|
|
3
|
+
type: ObjectConstructor;
|
|
4
|
+
};
|
|
5
|
+
}, {
|
|
6
|
+
t: (this: any, path: any, options?: any) => any;
|
|
7
|
+
vm: any;
|
|
8
|
+
f: (props: any, attrs?: {}) => {};
|
|
9
|
+
a: (attrs: any, filters: any, include: any) => {};
|
|
10
|
+
d: (props: any) => void;
|
|
11
|
+
dp: (props: any) => void;
|
|
12
|
+
gcls: (key: any) => any;
|
|
13
|
+
m: (...cssClasses: any[]) => string;
|
|
14
|
+
}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, "ready"[], "ready", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
|
|
15
|
+
color: {
|
|
16
|
+
type: ObjectConstructor;
|
|
17
|
+
};
|
|
18
|
+
}>> & {
|
|
19
|
+
onReady?: ((...args: any[]) => any) | undefined;
|
|
20
|
+
}, {}, {}>;
|
|
2
21
|
export default _default;
|
|
@@ -1,2 +1,31 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<{
|
|
2
|
+
color: {
|
|
3
|
+
type: ObjectConstructor;
|
|
4
|
+
};
|
|
5
|
+
alpha: {
|
|
6
|
+
type: BooleanConstructor;
|
|
7
|
+
};
|
|
8
|
+
}, {
|
|
9
|
+
t: (this: any, path: any, options?: any) => any;
|
|
10
|
+
vm: any;
|
|
11
|
+
f: (props: any, attrs?: {}) => {};
|
|
12
|
+
a: (attrs: any, filters: any, include: any) => {};
|
|
13
|
+
d: (props: any) => void;
|
|
14
|
+
dp: (props: any) => void;
|
|
15
|
+
gcls: (key: any) => any;
|
|
16
|
+
m: (...cssClasses: any[]) => string;
|
|
17
|
+
}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("hueUpdate" | "svReady" | "hueReady")[], "hueUpdate" | "svReady" | "hueReady", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
|
|
18
|
+
color: {
|
|
19
|
+
type: ObjectConstructor;
|
|
20
|
+
};
|
|
21
|
+
alpha: {
|
|
22
|
+
type: BooleanConstructor;
|
|
23
|
+
};
|
|
24
|
+
}>> & {
|
|
25
|
+
onHueUpdate?: ((...args: any[]) => any) | undefined;
|
|
26
|
+
onHueReady?: ((...args: any[]) => any) | undefined;
|
|
27
|
+
onSvReady?: ((...args: any[]) => any) | undefined;
|
|
28
|
+
}, {
|
|
29
|
+
alpha: boolean;
|
|
30
|
+
}, {}>;
|
|
2
31
|
export default _default;
|
|
@@ -1,2 +1,19 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<{
|
|
2
|
+
color: {
|
|
3
|
+
type: ObjectConstructor;
|
|
4
|
+
};
|
|
5
|
+
}, {
|
|
6
|
+
t: (this: any, path: any, options?: any) => any;
|
|
7
|
+
vm: any;
|
|
8
|
+
f: (props: any, attrs?: {}) => {};
|
|
9
|
+
a: (attrs: any, filters: any, include: any) => {};
|
|
10
|
+
d: (props: any) => void;
|
|
11
|
+
dp: (props: any) => void;
|
|
12
|
+
gcls: (key: any) => any;
|
|
13
|
+
m: (...cssClasses: any[]) => string;
|
|
14
|
+
}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
|
|
15
|
+
color: {
|
|
16
|
+
type: ObjectConstructor;
|
|
17
|
+
};
|
|
18
|
+
}>>, {}, {}>;
|
|
2
19
|
export default _default;
|
package/src/index.d.ts
CHANGED
|
@@ -1,2 +1,70 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<{
|
|
2
|
+
_constants: {
|
|
3
|
+
type: ObjectConstructor;
|
|
4
|
+
default: () => {};
|
|
5
|
+
};
|
|
6
|
+
modelValue: StringConstructor;
|
|
7
|
+
visible: BooleanConstructor;
|
|
8
|
+
alpha: BooleanConstructor;
|
|
9
|
+
history: ArrayConstructor;
|
|
10
|
+
predefine: ArrayConstructor;
|
|
11
|
+
enableHistory: {
|
|
12
|
+
type: BooleanConstructor;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
15
|
+
enablePredefineColor: {
|
|
16
|
+
type: BooleanConstructor;
|
|
17
|
+
default: boolean;
|
|
18
|
+
};
|
|
19
|
+
format: {
|
|
20
|
+
type: ArrayConstructor;
|
|
21
|
+
default: () => never[];
|
|
22
|
+
validator(formats: string[]): boolean;
|
|
23
|
+
};
|
|
24
|
+
tiny_mode: StringConstructor;
|
|
25
|
+
tiny_mode_root: BooleanConstructor;
|
|
26
|
+
tiny_template: (ObjectConstructor | FunctionConstructor)[];
|
|
27
|
+
tiny_renderless: FunctionConstructor;
|
|
28
|
+
tiny_theme: StringConstructor;
|
|
29
|
+
tiny_chart_theme: ObjectConstructor;
|
|
30
|
+
}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
|
|
31
|
+
[key: string]: any;
|
|
32
|
+
}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
|
|
33
|
+
_constants: {
|
|
34
|
+
type: ObjectConstructor;
|
|
35
|
+
default: () => {};
|
|
36
|
+
};
|
|
37
|
+
modelValue: StringConstructor;
|
|
38
|
+
visible: BooleanConstructor;
|
|
39
|
+
alpha: BooleanConstructor;
|
|
40
|
+
history: ArrayConstructor;
|
|
41
|
+
predefine: ArrayConstructor;
|
|
42
|
+
enableHistory: {
|
|
43
|
+
type: BooleanConstructor;
|
|
44
|
+
default: boolean;
|
|
45
|
+
};
|
|
46
|
+
enablePredefineColor: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
default: boolean;
|
|
49
|
+
};
|
|
50
|
+
format: {
|
|
51
|
+
type: ArrayConstructor;
|
|
52
|
+
default: () => never[];
|
|
53
|
+
validator(formats: string[]): boolean;
|
|
54
|
+
};
|
|
55
|
+
tiny_mode: StringConstructor;
|
|
56
|
+
tiny_mode_root: BooleanConstructor;
|
|
57
|
+
tiny_template: (ObjectConstructor | FunctionConstructor)[];
|
|
58
|
+
tiny_renderless: FunctionConstructor;
|
|
59
|
+
tiny_theme: StringConstructor;
|
|
60
|
+
tiny_chart_theme: ObjectConstructor;
|
|
61
|
+
}>>, {
|
|
62
|
+
format: unknown[];
|
|
63
|
+
tiny_mode_root: boolean;
|
|
64
|
+
_constants: Record<string, any>;
|
|
65
|
+
visible: boolean;
|
|
66
|
+
alpha: boolean;
|
|
67
|
+
enableHistory: boolean;
|
|
68
|
+
enablePredefineColor: boolean;
|
|
69
|
+
}, {}>;
|
|
2
70
|
export default _default;
|
package/src/pc.vue.d.ts
CHANGED
|
@@ -1,2 +1,64 @@
|
|
|
1
|
-
declare const _default:
|
|
1
|
+
declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
|
|
2
|
+
format?: any;
|
|
3
|
+
tiny_mode?: any;
|
|
4
|
+
tiny_mode_root?: any;
|
|
5
|
+
tiny_template?: any;
|
|
6
|
+
tiny_renderless?: any;
|
|
7
|
+
_constants?: any;
|
|
8
|
+
tiny_theme?: any;
|
|
9
|
+
tiny_chart_theme?: any;
|
|
10
|
+
modelValue?: any;
|
|
11
|
+
visible?: any;
|
|
12
|
+
alpha?: any;
|
|
13
|
+
predefine?: any;
|
|
14
|
+
history?: any;
|
|
15
|
+
enableHistory?: any;
|
|
16
|
+
enablePredefineColor?: any;
|
|
17
|
+
}>, {
|
|
18
|
+
t: (this: any, path: any, options?: any) => any;
|
|
19
|
+
vm: any;
|
|
20
|
+
f: (props: any, attrs?: {}) => {};
|
|
21
|
+
a: (attrs: any, filters: any, include: any) => {};
|
|
22
|
+
d: (props: any) => void;
|
|
23
|
+
dp: (props: any) => void;
|
|
24
|
+
gcls: (key: any) => any;
|
|
25
|
+
m: (...cssClasses: any[]) => string;
|
|
26
|
+
}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("cancel" | "update:modelValue" | "confirm" | "color-update")[], "cancel" | "update:modelValue" | "confirm" | "color-update", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
|
|
27
|
+
format?: any;
|
|
28
|
+
tiny_mode?: any;
|
|
29
|
+
tiny_mode_root?: any;
|
|
30
|
+
tiny_template?: any;
|
|
31
|
+
tiny_renderless?: any;
|
|
32
|
+
_constants?: any;
|
|
33
|
+
tiny_theme?: any;
|
|
34
|
+
tiny_chart_theme?: any;
|
|
35
|
+
modelValue?: any;
|
|
36
|
+
visible?: any;
|
|
37
|
+
alpha?: any;
|
|
38
|
+
predefine?: any;
|
|
39
|
+
history?: any;
|
|
40
|
+
enableHistory?: any;
|
|
41
|
+
enablePredefineColor?: any;
|
|
42
|
+
}>>> & {
|
|
43
|
+
onCancel?: ((...args: any[]) => any) | undefined;
|
|
44
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
45
|
+
onConfirm?: ((...args: any[]) => any) | undefined;
|
|
46
|
+
"onColor-update"?: ((...args: any[]) => any) | undefined;
|
|
47
|
+
}, {
|
|
48
|
+
readonly format?: any;
|
|
49
|
+
readonly tiny_mode?: any;
|
|
50
|
+
readonly tiny_mode_root?: any;
|
|
51
|
+
readonly tiny_template?: any;
|
|
52
|
+
readonly tiny_renderless?: any;
|
|
53
|
+
readonly _constants?: any;
|
|
54
|
+
readonly tiny_theme?: any;
|
|
55
|
+
readonly tiny_chart_theme?: any;
|
|
56
|
+
readonly modelValue?: any;
|
|
57
|
+
readonly visible?: any;
|
|
58
|
+
readonly alpha?: any;
|
|
59
|
+
readonly predefine?: any;
|
|
60
|
+
readonly history?: any;
|
|
61
|
+
readonly enableHistory?: any;
|
|
62
|
+
readonly enablePredefineColor?: any;
|
|
63
|
+
}, {}>;
|
|
2
64
|
export default _default;
|