@opentinyvue/vue-color-select-panel 2.26.0 → 2.28.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/pc.js +610 -24
- package/package.json +12 -11
- package/src/components/linear-gradient.vue.d.ts +2 -0
package/lib/pc.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import Button from '@opentinyvue/vue-button';
|
|
2
2
|
import Input from '@opentinyvue/vue-input';
|
|
3
|
-
import
|
|
3
|
+
import Numeric from '@opentinyvue/vue-numeric';
|
|
4
|
+
import { renderless as renderless$4, api as api$4 } from '@opentinyvue/vue-renderless/color-select-panel/vue';
|
|
4
5
|
import { defineComponent, setup, props, directive } from '@opentinyvue/vue-common';
|
|
5
|
-
import { renderless as renderless$
|
|
6
|
+
import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
|
|
6
7
|
import { api, renderless } from '@opentinyvue/vue-renderless/color-select-panel/sv-select/vue';
|
|
7
|
-
import { renderless as renderless$
|
|
8
|
+
import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/linear-gradient/vue';
|
|
9
|
+
import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
|
|
8
10
|
import '@opentinyvue/vue-theme/color-select-panel/index.css';
|
|
9
11
|
import { Clickoutside } from '@opentinyvue/vue-directive';
|
|
10
12
|
import Select from '@opentinyvue/vue-select';
|
|
@@ -40,7 +42,7 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
|
|
|
40
42
|
};
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
var render$
|
|
45
|
+
var render$4 = function render$42() {
|
|
44
46
|
var _vm = this;
|
|
45
47
|
var _h = _vm.$createElement;
|
|
46
48
|
var _c = _vm._self._c || _h;
|
|
@@ -64,8 +66,8 @@ var render$3 = function render$32() {
|
|
|
64
66
|
}
|
|
65
67
|
})]);
|
|
66
68
|
};
|
|
67
|
-
var staticRenderFns$
|
|
68
|
-
var __vue2_script$
|
|
69
|
+
var staticRenderFns$4 = [];
|
|
70
|
+
var __vue2_script$4 = defineComponent({
|
|
69
71
|
emit: ["ready", "svUpdate"],
|
|
70
72
|
props: {
|
|
71
73
|
color: {
|
|
@@ -82,6 +84,68 @@ var __vue2_script$3 = defineComponent({
|
|
|
82
84
|
});
|
|
83
85
|
}
|
|
84
86
|
});
|
|
87
|
+
var __cssModules$4 = {};
|
|
88
|
+
var __component__$4 = /* @__PURE__ */ normalizeComponent(__vue2_script$4, render$4, staticRenderFns$4, false, __vue2_injectStyles$4);
|
|
89
|
+
function __vue2_injectStyles$4(context) {
|
|
90
|
+
for (var o in __cssModules$4) {
|
|
91
|
+
this[o] = __cssModules$4[o];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
var SvSelect = /* @__PURE__ */ (function() {
|
|
95
|
+
return __component__$4.exports;
|
|
96
|
+
})();
|
|
97
|
+
var render$3 = function render$32() {
|
|
98
|
+
var _vm = this;
|
|
99
|
+
var _h = _vm.$createElement;
|
|
100
|
+
var _c = _vm._self._c || _h;
|
|
101
|
+
return _c("div", {
|
|
102
|
+
ref: "linearGradientBar",
|
|
103
|
+
staticClass: "tiny-color-select-panel__linear-gradient",
|
|
104
|
+
style: {
|
|
105
|
+
background: _vm.state.linearGradientBarBackground
|
|
106
|
+
},
|
|
107
|
+
on: {
|
|
108
|
+
"click": _vm.onClickBar
|
|
109
|
+
}
|
|
110
|
+
}, _vm._l(_vm.context.colorPoints, function(point, idx) {
|
|
111
|
+
return _c("div", {
|
|
112
|
+
key: idx,
|
|
113
|
+
ref: "thumb",
|
|
114
|
+
refInFor: true,
|
|
115
|
+
staticClass: "tiny-color-select-panel__linear-gradient__thumb",
|
|
116
|
+
style: {
|
|
117
|
+
left: point.cursorLeft + "px",
|
|
118
|
+
transform: "translateX(-50%)"
|
|
119
|
+
},
|
|
120
|
+
on: {
|
|
121
|
+
"click": function click($event) {
|
|
122
|
+
$event.stopPropagation();
|
|
123
|
+
},
|
|
124
|
+
"mousedown": function mousedown(event) {
|
|
125
|
+
return _vm.onThumbMouseDown(event, point);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, [_c("div", {
|
|
129
|
+
staticClass: "tiny-color-select-panel__linear-gradient__thumb-heart",
|
|
130
|
+
style: {
|
|
131
|
+
background: point.color.value
|
|
132
|
+
}
|
|
133
|
+
})]);
|
|
134
|
+
}), 0);
|
|
135
|
+
};
|
|
136
|
+
var staticRenderFns$3 = [];
|
|
137
|
+
var __vue2_script$3 = defineComponent({
|
|
138
|
+
props: {},
|
|
139
|
+
setup: function setup2(props2, context) {
|
|
140
|
+
return setup({
|
|
141
|
+
props: props2,
|
|
142
|
+
context,
|
|
143
|
+
renderless: renderless$1,
|
|
144
|
+
api: api$1,
|
|
145
|
+
mono: true
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
});
|
|
85
149
|
var __cssModules$3 = {};
|
|
86
150
|
var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3);
|
|
87
151
|
function __vue2_injectStyles$3(context) {
|
|
@@ -89,7 +153,7 @@ function __vue2_injectStyles$3(context) {
|
|
|
89
153
|
this[o] = __cssModules$3[o];
|
|
90
154
|
}
|
|
91
155
|
}
|
|
92
|
-
var
|
|
156
|
+
var linearGradient = /* @__PURE__ */ (function() {
|
|
93
157
|
return __component__$3.exports;
|
|
94
158
|
})();
|
|
95
159
|
var render$2 = function render$22() {
|
|
@@ -118,9 +182,9 @@ var render$2 = function render$22() {
|
|
|
118
182
|
}, [_c("div", {
|
|
119
183
|
staticClass: "tiny-color-select-panel__inner__hue-select-thumb-heart",
|
|
120
184
|
style: {
|
|
121
|
-
background: _vm.color.value
|
|
185
|
+
background: _vm.state.ctx.activeColor.color.value
|
|
122
186
|
}
|
|
123
|
-
})])])], 1);
|
|
187
|
+
})])]), _vm.state.ctx.colorMode === "linear-gradient" ? _c("linear-gradient") : _vm._e()], 1);
|
|
124
188
|
};
|
|
125
189
|
var staticRenderFns$2 = [];
|
|
126
190
|
var __vue2_script$2 = defineComponent({
|
|
@@ -134,14 +198,15 @@ var __vue2_script$2 = defineComponent({
|
|
|
134
198
|
}
|
|
135
199
|
},
|
|
136
200
|
components: {
|
|
137
|
-
SvSelect
|
|
201
|
+
SvSelect,
|
|
202
|
+
LinearGradient: linearGradient
|
|
138
203
|
},
|
|
139
|
-
setup: function
|
|
204
|
+
setup: function setup3(props2, context) {
|
|
140
205
|
return setup({
|
|
141
206
|
props: props2,
|
|
142
207
|
context,
|
|
143
|
-
renderless: renderless$
|
|
144
|
-
api: api$
|
|
208
|
+
renderless: renderless$2,
|
|
209
|
+
api: api$2,
|
|
145
210
|
mono: true
|
|
146
211
|
});
|
|
147
212
|
}
|
|
@@ -183,7 +248,7 @@ var render$1 = function render$12() {
|
|
|
183
248
|
}, [_c("div", {
|
|
184
249
|
staticClass: "tiny-color-select-panel__inner__hue-select-thumb-heart",
|
|
185
250
|
style: {
|
|
186
|
-
background: _vm.color.value
|
|
251
|
+
background: _vm.state.activeColor.color.value
|
|
187
252
|
}
|
|
188
253
|
})])]);
|
|
189
254
|
};
|
|
@@ -195,12 +260,12 @@ var __vue2_script$1 = defineComponent({
|
|
|
195
260
|
type: Object
|
|
196
261
|
}
|
|
197
262
|
},
|
|
198
|
-
setup: function
|
|
263
|
+
setup: function setup4(props2, context) {
|
|
199
264
|
return setup({
|
|
200
265
|
props: props2,
|
|
201
266
|
context,
|
|
202
|
-
renderless: renderless$
|
|
203
|
-
api: api$
|
|
267
|
+
renderless: renderless$3,
|
|
268
|
+
api: api$3,
|
|
204
269
|
mono: true
|
|
205
270
|
});
|
|
206
271
|
}
|
|
@@ -215,6 +280,509 @@ function __vue2_injectStyles$1(context) {
|
|
|
215
280
|
var AlphaSelect = /* @__PURE__ */ (function() {
|
|
216
281
|
return __component__$1.exports;
|
|
217
282
|
})();
|
|
283
|
+
var node = {};
|
|
284
|
+
var hasRequiredNode;
|
|
285
|
+
function requireNode() {
|
|
286
|
+
if (hasRequiredNode) return node;
|
|
287
|
+
hasRequiredNode = 1;
|
|
288
|
+
var GradientParser = GradientParser || {};
|
|
289
|
+
GradientParser.stringify = /* @__PURE__ */ (function() {
|
|
290
|
+
var visitor = {
|
|
291
|
+
"visit_linear-gradient": function visit_linearGradient(node2) {
|
|
292
|
+
return visitor.visit_gradient(node2);
|
|
293
|
+
},
|
|
294
|
+
"visit_repeating-linear-gradient": function visit_repeatingLinearGradient(node2) {
|
|
295
|
+
return visitor.visit_gradient(node2);
|
|
296
|
+
},
|
|
297
|
+
"visit_radial-gradient": function visit_radialGradient(node2) {
|
|
298
|
+
return visitor.visit_gradient(node2);
|
|
299
|
+
},
|
|
300
|
+
"visit_repeating-radial-gradient": function visit_repeatingRadialGradient(node2) {
|
|
301
|
+
return visitor.visit_gradient(node2);
|
|
302
|
+
},
|
|
303
|
+
"visit_gradient": function visit_gradient(node2) {
|
|
304
|
+
var orientation = visitor.visit(node2.orientation);
|
|
305
|
+
if (orientation) {
|
|
306
|
+
orientation += ", ";
|
|
307
|
+
}
|
|
308
|
+
return node2.type + "(" + orientation + visitor.visit(node2.colorStops) + ")";
|
|
309
|
+
},
|
|
310
|
+
"visit_shape": function visit_shape(node2) {
|
|
311
|
+
var result = node2.value, at = visitor.visit(node2.at), style = visitor.visit(node2.style);
|
|
312
|
+
if (style) {
|
|
313
|
+
result += " " + style;
|
|
314
|
+
}
|
|
315
|
+
if (at) {
|
|
316
|
+
result += " at " + at;
|
|
317
|
+
}
|
|
318
|
+
return result;
|
|
319
|
+
},
|
|
320
|
+
"visit_default-radial": function visit_defaultRadial(node2) {
|
|
321
|
+
var result = "", at = visitor.visit(node2.at);
|
|
322
|
+
if (at) {
|
|
323
|
+
result += at;
|
|
324
|
+
}
|
|
325
|
+
return result;
|
|
326
|
+
},
|
|
327
|
+
"visit_extent-keyword": function visit_extentKeyword(node2) {
|
|
328
|
+
var result = node2.value, at = visitor.visit(node2.at);
|
|
329
|
+
if (at) {
|
|
330
|
+
result += " at " + at;
|
|
331
|
+
}
|
|
332
|
+
return result;
|
|
333
|
+
},
|
|
334
|
+
"visit_position-keyword": function visit_positionKeyword(node2) {
|
|
335
|
+
return node2.value;
|
|
336
|
+
},
|
|
337
|
+
"visit_position": function visit_position(node2) {
|
|
338
|
+
return visitor.visit(node2.value.x) + " " + visitor.visit(node2.value.y);
|
|
339
|
+
},
|
|
340
|
+
"visit_%": function visit_(node2) {
|
|
341
|
+
return node2.value + "%";
|
|
342
|
+
},
|
|
343
|
+
"visit_em": function visit_em(node2) {
|
|
344
|
+
return node2.value + "em";
|
|
345
|
+
},
|
|
346
|
+
"visit_px": function visit_px(node2) {
|
|
347
|
+
return node2.value + "px";
|
|
348
|
+
},
|
|
349
|
+
"visit_calc": function visit_calc(node2) {
|
|
350
|
+
return "calc(" + node2.value + ")";
|
|
351
|
+
},
|
|
352
|
+
"visit_literal": function visit_literal(node2) {
|
|
353
|
+
return visitor.visit_color(node2.value, node2);
|
|
354
|
+
},
|
|
355
|
+
"visit_hex": function visit_hex(node2) {
|
|
356
|
+
return visitor.visit_color("#" + node2.value, node2);
|
|
357
|
+
},
|
|
358
|
+
"visit_rgb": function visit_rgb(node2) {
|
|
359
|
+
return visitor.visit_color("rgb(" + node2.value.join(", ") + ")", node2);
|
|
360
|
+
},
|
|
361
|
+
"visit_rgba": function visit_rgba(node2) {
|
|
362
|
+
return visitor.visit_color("rgba(" + node2.value.join(", ") + ")", node2);
|
|
363
|
+
},
|
|
364
|
+
"visit_hsl": function visit_hsl(node2) {
|
|
365
|
+
return visitor.visit_color("hsl(" + node2.value[0] + ", " + node2.value[1] + "%, " + node2.value[2] + "%)", node2);
|
|
366
|
+
},
|
|
367
|
+
"visit_hsla": function visit_hsla(node2) {
|
|
368
|
+
return visitor.visit_color("hsla(" + node2.value[0] + ", " + node2.value[1] + "%, " + node2.value[2] + "%, " + node2.value[3] + ")", node2);
|
|
369
|
+
},
|
|
370
|
+
"visit_var": function visit_var(node2) {
|
|
371
|
+
return visitor.visit_color("var(" + node2.value + ")", node2);
|
|
372
|
+
},
|
|
373
|
+
"visit_color": function visit_color(resultColor, node2) {
|
|
374
|
+
var result = resultColor, length = visitor.visit(node2.length);
|
|
375
|
+
if (length) {
|
|
376
|
+
result += " " + length;
|
|
377
|
+
}
|
|
378
|
+
return result;
|
|
379
|
+
},
|
|
380
|
+
"visit_angular": function visit_angular(node2) {
|
|
381
|
+
return node2.value + "deg";
|
|
382
|
+
},
|
|
383
|
+
"visit_directional": function visit_directional(node2) {
|
|
384
|
+
return "to " + node2.value;
|
|
385
|
+
},
|
|
386
|
+
"visit_array": function visit_array(elements) {
|
|
387
|
+
var result = "", size = elements.length;
|
|
388
|
+
elements.forEach(function(element, i) {
|
|
389
|
+
result += visitor.visit(element);
|
|
390
|
+
if (i < size - 1) {
|
|
391
|
+
result += ", ";
|
|
392
|
+
}
|
|
393
|
+
});
|
|
394
|
+
return result;
|
|
395
|
+
},
|
|
396
|
+
"visit_object": function visit_object(obj) {
|
|
397
|
+
if (obj.width && obj.height) {
|
|
398
|
+
return visitor.visit(obj.width) + " " + visitor.visit(obj.height);
|
|
399
|
+
}
|
|
400
|
+
return "";
|
|
401
|
+
},
|
|
402
|
+
"visit": function visit(element) {
|
|
403
|
+
if (!element) {
|
|
404
|
+
return "";
|
|
405
|
+
}
|
|
406
|
+
if (element instanceof Array) {
|
|
407
|
+
return visitor.visit_array(element);
|
|
408
|
+
} else if (typeof element === "object" && !element.type) {
|
|
409
|
+
return visitor.visit_object(element);
|
|
410
|
+
} else if (element.type) {
|
|
411
|
+
var nodeVisitor = visitor["visit_" + element.type];
|
|
412
|
+
if (nodeVisitor) {
|
|
413
|
+
return nodeVisitor(element);
|
|
414
|
+
} else {
|
|
415
|
+
throw Error("Missing visitor visit_" + element.type);
|
|
416
|
+
}
|
|
417
|
+
} else {
|
|
418
|
+
throw Error("Invalid node.");
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
};
|
|
422
|
+
return function(root) {
|
|
423
|
+
return visitor.visit(root);
|
|
424
|
+
};
|
|
425
|
+
})();
|
|
426
|
+
var GradientParser = GradientParser || {};
|
|
427
|
+
GradientParser.parse = /* @__PURE__ */ (function() {
|
|
428
|
+
var tokens = {
|
|
429
|
+
linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
|
|
430
|
+
repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
|
|
431
|
+
radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
|
|
432
|
+
repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
|
|
433
|
+
sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
|
|
434
|
+
extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
|
|
435
|
+
positionKeywords: /^(left|center|right|top|bottom)/i,
|
|
436
|
+
pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
|
|
437
|
+
percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
|
|
438
|
+
emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
|
|
439
|
+
angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
|
|
440
|
+
radianValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))rad/,
|
|
441
|
+
startCall: /^\(/,
|
|
442
|
+
endCall: /^\)/,
|
|
443
|
+
comma: /^,/,
|
|
444
|
+
hexColor: /^\#([0-9a-fA-F]+)/,
|
|
445
|
+
literalColor: /^([a-zA-Z]+)/,
|
|
446
|
+
rgbColor: /^rgb/i,
|
|
447
|
+
rgbaColor: /^rgba/i,
|
|
448
|
+
varColor: /^var/i,
|
|
449
|
+
calcValue: /^calc/i,
|
|
450
|
+
variableName: /^(--[a-zA-Z0-9-,\s\#]+)/,
|
|
451
|
+
number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
|
|
452
|
+
hslColor: /^hsl/i,
|
|
453
|
+
hslaColor: /^hsla/i
|
|
454
|
+
};
|
|
455
|
+
var input = "";
|
|
456
|
+
function error(msg) {
|
|
457
|
+
var err = new Error(input + ": " + msg);
|
|
458
|
+
err.source = input;
|
|
459
|
+
throw err;
|
|
460
|
+
}
|
|
461
|
+
function getAST() {
|
|
462
|
+
var ast = matchListDefinitions();
|
|
463
|
+
if (input.length > 0) {
|
|
464
|
+
error("Invalid input not EOF");
|
|
465
|
+
}
|
|
466
|
+
return ast;
|
|
467
|
+
}
|
|
468
|
+
function matchListDefinitions() {
|
|
469
|
+
return matchListing(matchDefinition);
|
|
470
|
+
}
|
|
471
|
+
function matchDefinition() {
|
|
472
|
+
return matchGradient("linear-gradient", tokens.linearGradient, matchLinearOrientation) || matchGradient("repeating-linear-gradient", tokens.repeatingLinearGradient, matchLinearOrientation) || matchGradient("radial-gradient", tokens.radialGradient, matchListRadialOrientations) || matchGradient("repeating-radial-gradient", tokens.repeatingRadialGradient, matchListRadialOrientations);
|
|
473
|
+
}
|
|
474
|
+
function matchGradient(gradientType, pattern, orientationMatcher) {
|
|
475
|
+
return matchCall(pattern, function(captures) {
|
|
476
|
+
var orientation = orientationMatcher();
|
|
477
|
+
if (orientation) {
|
|
478
|
+
if (!scan(tokens.comma)) {
|
|
479
|
+
error("Missing comma before color stops");
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
return {
|
|
483
|
+
type: gradientType,
|
|
484
|
+
orientation,
|
|
485
|
+
colorStops: matchListing(matchColorStop)
|
|
486
|
+
};
|
|
487
|
+
});
|
|
488
|
+
}
|
|
489
|
+
function matchCall(pattern, callback) {
|
|
490
|
+
var captures = scan(pattern);
|
|
491
|
+
if (captures) {
|
|
492
|
+
if (!scan(tokens.startCall)) {
|
|
493
|
+
error("Missing (");
|
|
494
|
+
}
|
|
495
|
+
var result = callback(captures);
|
|
496
|
+
if (!scan(tokens.endCall)) {
|
|
497
|
+
error("Missing )");
|
|
498
|
+
}
|
|
499
|
+
return result;
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
function matchLinearOrientation() {
|
|
503
|
+
var sideOrCorner = matchSideOrCorner();
|
|
504
|
+
if (sideOrCorner) {
|
|
505
|
+
return sideOrCorner;
|
|
506
|
+
}
|
|
507
|
+
var legacyDirection = match("position-keyword", tokens.positionKeywords, 1);
|
|
508
|
+
if (legacyDirection) {
|
|
509
|
+
return {
|
|
510
|
+
type: "directional",
|
|
511
|
+
value: legacyDirection.value
|
|
512
|
+
};
|
|
513
|
+
}
|
|
514
|
+
return matchAngle();
|
|
515
|
+
}
|
|
516
|
+
function matchSideOrCorner() {
|
|
517
|
+
return match("directional", tokens.sideOrCorner, 1);
|
|
518
|
+
}
|
|
519
|
+
function matchAngle() {
|
|
520
|
+
return match("angular", tokens.angleValue, 1) || match("angular", tokens.radianValue, 1);
|
|
521
|
+
}
|
|
522
|
+
function matchListRadialOrientations() {
|
|
523
|
+
var radialOrientations, radialOrientation = matchRadialOrientation(), lookaheadCache;
|
|
524
|
+
if (radialOrientation) {
|
|
525
|
+
radialOrientations = [];
|
|
526
|
+
radialOrientations.push(radialOrientation);
|
|
527
|
+
lookaheadCache = input;
|
|
528
|
+
if (scan(tokens.comma)) {
|
|
529
|
+
radialOrientation = matchRadialOrientation();
|
|
530
|
+
if (radialOrientation) {
|
|
531
|
+
radialOrientations.push(radialOrientation);
|
|
532
|
+
} else {
|
|
533
|
+
input = lookaheadCache;
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
return radialOrientations;
|
|
538
|
+
}
|
|
539
|
+
function matchRadialOrientation() {
|
|
540
|
+
var radialType = matchCircle() || matchEllipse();
|
|
541
|
+
if (radialType) {
|
|
542
|
+
radialType.at = matchAtPosition();
|
|
543
|
+
} else {
|
|
544
|
+
var extent = matchExtentKeyword();
|
|
545
|
+
if (extent) {
|
|
546
|
+
radialType = extent;
|
|
547
|
+
var positionAt = matchAtPosition();
|
|
548
|
+
if (positionAt) {
|
|
549
|
+
radialType.at = positionAt;
|
|
550
|
+
}
|
|
551
|
+
} else {
|
|
552
|
+
var atPosition = matchAtPosition();
|
|
553
|
+
if (atPosition) {
|
|
554
|
+
radialType = {
|
|
555
|
+
type: "default-radial",
|
|
556
|
+
at: atPosition
|
|
557
|
+
};
|
|
558
|
+
} else {
|
|
559
|
+
var defaultPosition = matchPositioning();
|
|
560
|
+
if (defaultPosition) {
|
|
561
|
+
radialType = {
|
|
562
|
+
type: "default-radial",
|
|
563
|
+
at: defaultPosition
|
|
564
|
+
};
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
return radialType;
|
|
570
|
+
}
|
|
571
|
+
function matchCircle() {
|
|
572
|
+
var circle = match("shape", /^(circle)/i, 0);
|
|
573
|
+
if (circle) {
|
|
574
|
+
circle.style = matchLength() || matchExtentKeyword();
|
|
575
|
+
}
|
|
576
|
+
return circle;
|
|
577
|
+
}
|
|
578
|
+
function matchEllipse() {
|
|
579
|
+
var ellipse = match("shape", /^(ellipse)/i, 0);
|
|
580
|
+
if (ellipse) {
|
|
581
|
+
ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
|
|
582
|
+
}
|
|
583
|
+
return ellipse;
|
|
584
|
+
}
|
|
585
|
+
function matchExtentKeyword() {
|
|
586
|
+
return match("extent-keyword", tokens.extentKeywords, 1);
|
|
587
|
+
}
|
|
588
|
+
function matchAtPosition() {
|
|
589
|
+
if (match("position", /^at/, 0)) {
|
|
590
|
+
var positioning = matchPositioning();
|
|
591
|
+
if (!positioning) {
|
|
592
|
+
error("Missing positioning value");
|
|
593
|
+
}
|
|
594
|
+
return positioning;
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
function matchPositioning() {
|
|
598
|
+
var location = matchCoordinates();
|
|
599
|
+
if (location.x || location.y) {
|
|
600
|
+
return {
|
|
601
|
+
type: "position",
|
|
602
|
+
value: location
|
|
603
|
+
};
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
function matchCoordinates() {
|
|
607
|
+
return {
|
|
608
|
+
x: matchDistance(),
|
|
609
|
+
y: matchDistance()
|
|
610
|
+
};
|
|
611
|
+
}
|
|
612
|
+
function matchListing(matcher) {
|
|
613
|
+
var captures = matcher(), result = [];
|
|
614
|
+
if (captures) {
|
|
615
|
+
result.push(captures);
|
|
616
|
+
while (scan(tokens.comma)) {
|
|
617
|
+
captures = matcher();
|
|
618
|
+
if (captures) {
|
|
619
|
+
result.push(captures);
|
|
620
|
+
} else {
|
|
621
|
+
error("One extra comma");
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
return result;
|
|
626
|
+
}
|
|
627
|
+
function matchColorStop() {
|
|
628
|
+
var color = matchColor();
|
|
629
|
+
if (!color) {
|
|
630
|
+
error("Expected color definition");
|
|
631
|
+
}
|
|
632
|
+
color.length = matchDistance();
|
|
633
|
+
return color;
|
|
634
|
+
}
|
|
635
|
+
function matchColor() {
|
|
636
|
+
return matchHexColor() || matchHSLAColor() || matchHSLColor() || matchRGBAColor() || matchRGBColor() || matchVarColor() || matchLiteralColor();
|
|
637
|
+
}
|
|
638
|
+
function matchLiteralColor() {
|
|
639
|
+
return match("literal", tokens.literalColor, 0);
|
|
640
|
+
}
|
|
641
|
+
function matchHexColor() {
|
|
642
|
+
return match("hex", tokens.hexColor, 1);
|
|
643
|
+
}
|
|
644
|
+
function matchRGBColor() {
|
|
645
|
+
return matchCall(tokens.rgbColor, function() {
|
|
646
|
+
return {
|
|
647
|
+
type: "rgb",
|
|
648
|
+
value: matchListing(matchNumber)
|
|
649
|
+
};
|
|
650
|
+
});
|
|
651
|
+
}
|
|
652
|
+
function matchRGBAColor() {
|
|
653
|
+
return matchCall(tokens.rgbaColor, function() {
|
|
654
|
+
return {
|
|
655
|
+
type: "rgba",
|
|
656
|
+
value: matchListing(matchNumber)
|
|
657
|
+
};
|
|
658
|
+
});
|
|
659
|
+
}
|
|
660
|
+
function matchVarColor() {
|
|
661
|
+
return matchCall(tokens.varColor, function() {
|
|
662
|
+
return {
|
|
663
|
+
type: "var",
|
|
664
|
+
value: matchVariableName()
|
|
665
|
+
};
|
|
666
|
+
});
|
|
667
|
+
}
|
|
668
|
+
function matchHSLColor() {
|
|
669
|
+
return matchCall(tokens.hslColor, function() {
|
|
670
|
+
var lookahead = scan(tokens.percentageValue);
|
|
671
|
+
if (lookahead) {
|
|
672
|
+
error("HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage");
|
|
673
|
+
}
|
|
674
|
+
var hue = matchNumber();
|
|
675
|
+
scan(tokens.comma);
|
|
676
|
+
var captures = scan(tokens.percentageValue);
|
|
677
|
+
var sat = captures ? captures[1] : null;
|
|
678
|
+
scan(tokens.comma);
|
|
679
|
+
captures = scan(tokens.percentageValue);
|
|
680
|
+
var light = captures ? captures[1] : null;
|
|
681
|
+
if (!sat || !light) {
|
|
682
|
+
error("Expected percentage value for saturation and lightness in HSL");
|
|
683
|
+
}
|
|
684
|
+
return {
|
|
685
|
+
type: "hsl",
|
|
686
|
+
value: [hue, sat, light]
|
|
687
|
+
};
|
|
688
|
+
});
|
|
689
|
+
}
|
|
690
|
+
function matchHSLAColor() {
|
|
691
|
+
return matchCall(tokens.hslaColor, function() {
|
|
692
|
+
var hue = matchNumber();
|
|
693
|
+
scan(tokens.comma);
|
|
694
|
+
var captures = scan(tokens.percentageValue);
|
|
695
|
+
var sat = captures ? captures[1] : null;
|
|
696
|
+
scan(tokens.comma);
|
|
697
|
+
captures = scan(tokens.percentageValue);
|
|
698
|
+
var light = captures ? captures[1] : null;
|
|
699
|
+
scan(tokens.comma);
|
|
700
|
+
var alpha = matchNumber();
|
|
701
|
+
if (!sat || !light) {
|
|
702
|
+
error("Expected percentage value for saturation and lightness in HSLA");
|
|
703
|
+
}
|
|
704
|
+
return {
|
|
705
|
+
type: "hsla",
|
|
706
|
+
value: [hue, sat, light, alpha]
|
|
707
|
+
};
|
|
708
|
+
});
|
|
709
|
+
}
|
|
710
|
+
function matchVariableName() {
|
|
711
|
+
return scan(tokens.variableName)[1];
|
|
712
|
+
}
|
|
713
|
+
function matchNumber() {
|
|
714
|
+
return scan(tokens.number)[1];
|
|
715
|
+
}
|
|
716
|
+
function matchDistance() {
|
|
717
|
+
return match("%", tokens.percentageValue, 1) || matchPositionKeyword() || matchCalc() || matchLength();
|
|
718
|
+
}
|
|
719
|
+
function matchPositionKeyword() {
|
|
720
|
+
return match("position-keyword", tokens.positionKeywords, 1);
|
|
721
|
+
}
|
|
722
|
+
function matchCalc() {
|
|
723
|
+
return matchCall(tokens.calcValue, function() {
|
|
724
|
+
var openParenCount = 1;
|
|
725
|
+
var i = 0;
|
|
726
|
+
while (openParenCount > 0 && i < input.length) {
|
|
727
|
+
var char = input.charAt(i);
|
|
728
|
+
if (char === "(") {
|
|
729
|
+
openParenCount++;
|
|
730
|
+
} else if (char === ")") {
|
|
731
|
+
openParenCount--;
|
|
732
|
+
}
|
|
733
|
+
i++;
|
|
734
|
+
}
|
|
735
|
+
if (openParenCount > 0) {
|
|
736
|
+
error("Missing closing parenthesis in calc() expression");
|
|
737
|
+
}
|
|
738
|
+
var calcContent = input.substring(0, i - 1);
|
|
739
|
+
consume(i - 1);
|
|
740
|
+
return {
|
|
741
|
+
type: "calc",
|
|
742
|
+
value: calcContent
|
|
743
|
+
};
|
|
744
|
+
});
|
|
745
|
+
}
|
|
746
|
+
function matchLength() {
|
|
747
|
+
return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
|
|
748
|
+
}
|
|
749
|
+
function match(type, pattern, captureIndex) {
|
|
750
|
+
var captures = scan(pattern);
|
|
751
|
+
if (captures) {
|
|
752
|
+
return {
|
|
753
|
+
type,
|
|
754
|
+
value: captures[captureIndex]
|
|
755
|
+
};
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
function scan(regexp) {
|
|
759
|
+
var captures, blankCaptures;
|
|
760
|
+
blankCaptures = /^[\n\r\t\s]+/.exec(input);
|
|
761
|
+
if (blankCaptures) {
|
|
762
|
+
consume(blankCaptures[0].length);
|
|
763
|
+
}
|
|
764
|
+
captures = regexp.exec(input);
|
|
765
|
+
if (captures) {
|
|
766
|
+
consume(captures[0].length);
|
|
767
|
+
}
|
|
768
|
+
return captures;
|
|
769
|
+
}
|
|
770
|
+
function consume(size) {
|
|
771
|
+
input = input.substr(size);
|
|
772
|
+
}
|
|
773
|
+
return function(code) {
|
|
774
|
+
input = code.toString().trim();
|
|
775
|
+
if (input.endsWith(";")) {
|
|
776
|
+
input = input.slice(0, -1);
|
|
777
|
+
}
|
|
778
|
+
return getAST();
|
|
779
|
+
};
|
|
780
|
+
})();
|
|
781
|
+
node.parse = GradientParser.parse;
|
|
782
|
+
node.stringify = GradientParser.stringify;
|
|
783
|
+
return node;
|
|
784
|
+
}
|
|
785
|
+
var nodeExports = requireNode();
|
|
218
786
|
var render = function render2() {
|
|
219
787
|
var _vm = this;
|
|
220
788
|
var _h = _vm.$createElement;
|
|
@@ -252,7 +820,7 @@ var render = function render2() {
|
|
|
252
820
|
}) : _vm._e(), _c("div", {
|
|
253
821
|
staticClass: "tiny-color-select-panel__display",
|
|
254
822
|
style: {
|
|
255
|
-
background: _vm.state.color.value
|
|
823
|
+
background: _vm.state.isLinearGradient ? _vm.state.linearGradient : _vm.state.color.value
|
|
256
824
|
}
|
|
257
825
|
}), _c("div", {
|
|
258
826
|
staticClass: "tiny-color-select-panel__tools"
|
|
@@ -290,7 +858,21 @@ var render = function render2() {
|
|
|
290
858
|
},
|
|
291
859
|
expression: "state.input"
|
|
292
860
|
}
|
|
293
|
-
})
|
|
861
|
+
}), _vm.state.isLinearGradient ? _c("div", {
|
|
862
|
+
staticClass: "tiny-color-select-panel__tools-deg"
|
|
863
|
+
}, [_c("tiny-numeric", {
|
|
864
|
+
attrs: {
|
|
865
|
+
"unit": "deg",
|
|
866
|
+
"mouse-wheel": ""
|
|
867
|
+
},
|
|
868
|
+
model: {
|
|
869
|
+
value: _vm.state.ctx.deg,
|
|
870
|
+
callback: function callback($$v) {
|
|
871
|
+
_vm.$set(_vm.state.ctx, "deg", $$v);
|
|
872
|
+
},
|
|
873
|
+
expression: "state.ctx.deg"
|
|
874
|
+
}
|
|
875
|
+
})], 1) : _vm._e()], 1) : _c("div", {
|
|
294
876
|
staticClass: "tiny-color-select-panel__tools-hex"
|
|
295
877
|
}, [_c("tiny-input", {
|
|
296
878
|
staticClass: "tiny-color-select-panel__tools-hex4",
|
|
@@ -384,24 +966,28 @@ var render = function render2() {
|
|
|
384
966
|
var staticRenderFns = [];
|
|
385
967
|
var __vue2_script = defineComponent({
|
|
386
968
|
emits: ["update:modelValue", "cancel", "confirm", "color-update"],
|
|
387
|
-
props: [].concat(props, ["modelValue", "visible", "alpha", "history", "predefine", "format", "enableHistory", "enablePredefineColor"]),
|
|
969
|
+
props: [].concat(props, ["modelValue", "visible", "alpha", "history", "predefine", "format", "enableHistory", "enablePredefineColor", "colorMode"]),
|
|
388
970
|
components: {
|
|
389
971
|
HueSelect,
|
|
390
972
|
AlphaSelect,
|
|
391
973
|
TinyButton: Button,
|
|
392
974
|
TinyInput: Input,
|
|
393
975
|
TinySelect: Select,
|
|
394
|
-
TinyOption: Option
|
|
976
|
+
TinyOption: Option,
|
|
977
|
+
TinyNumeric: Numeric
|
|
395
978
|
},
|
|
396
979
|
directives: directive({
|
|
397
980
|
Clickoutside
|
|
398
981
|
}),
|
|
399
|
-
setup: function
|
|
982
|
+
setup: function setup5(props2, context) {
|
|
400
983
|
return setup({
|
|
401
984
|
props: props2,
|
|
402
985
|
context,
|
|
403
|
-
renderless: renderless$
|
|
404
|
-
api: api$
|
|
986
|
+
renderless: renderless$4,
|
|
987
|
+
api: api$4,
|
|
988
|
+
extendOptions: {
|
|
989
|
+
parse: nodeExports.parse
|
|
990
|
+
}
|
|
405
991
|
});
|
|
406
992
|
}
|
|
407
993
|
});
|
package/package.json
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentinyvue/vue-color-select-panel",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.28.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"main": "./lib/index.js",
|
|
9
9
|
"module": "./lib/index.js",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@opentinyvue/vue-button": "~2.
|
|
12
|
-
"@opentinyvue/vue-collapse": "~2.
|
|
13
|
-
"@opentinyvue/vue-collapse-item": "~2.
|
|
14
|
-
"@opentinyvue/vue-common": "~2.
|
|
15
|
-
"@opentinyvue/vue-directive": "~2.
|
|
16
|
-
"@opentinyvue/vue-input": "~2.
|
|
17
|
-
"@opentinyvue/vue-
|
|
18
|
-
"@opentinyvue/vue-
|
|
19
|
-
"@opentinyvue/vue-
|
|
20
|
-
"@opentinyvue/vue-
|
|
11
|
+
"@opentinyvue/vue-button": "~2.28.0",
|
|
12
|
+
"@opentinyvue/vue-collapse": "~2.28.0",
|
|
13
|
+
"@opentinyvue/vue-collapse-item": "~2.28.0",
|
|
14
|
+
"@opentinyvue/vue-common": "~2.28.0",
|
|
15
|
+
"@opentinyvue/vue-directive": "~2.28.0",
|
|
16
|
+
"@opentinyvue/vue-input": "~2.28.0",
|
|
17
|
+
"@opentinyvue/vue-numeric": "~2.28.0",
|
|
18
|
+
"@opentinyvue/vue-option": "~2.28.0",
|
|
19
|
+
"@opentinyvue/vue-renderless": "~3.28.0",
|
|
20
|
+
"@opentinyvue/vue-select": "~2.28.0",
|
|
21
|
+
"@opentinyvue/vue-theme": "~3.28.0"
|
|
21
22
|
},
|
|
22
23
|
"types": "index.d.ts"
|
|
23
24
|
}
|