@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 CHANGED
@@ -1,10 +1,12 @@
1
1
  import Button from '@opentinyvue/vue-button';
2
2
  import Input from '@opentinyvue/vue-input';
3
- import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-renderless/color-select-panel/vue';
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$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
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$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
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$3 = function render$32() {
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$3 = [];
68
- var __vue2_script$3 = defineComponent({
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 SvSelect = /* @__PURE__ */ (function() {
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 setup2(props2, context) {
204
+ setup: function setup3(props2, context) {
140
205
  return setup({
141
206
  props: props2,
142
207
  context,
143
- renderless: renderless$1,
144
- api: api$1,
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 setup3(props2, context) {
263
+ setup: function setup4(props2, context) {
199
264
  return setup({
200
265
  props: props2,
201
266
  context,
202
- renderless: renderless$2,
203
- api: api$2,
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
- })], 1) : _c("div", {
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 setup4(props2, context) {
982
+ setup: function setup5(props2, context) {
400
983
  return setup({
401
984
  props: props2,
402
985
  context,
403
- renderless: renderless$3,
404
- api: api$3
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.26.0",
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.26.0",
12
- "@opentinyvue/vue-collapse": "~2.26.0",
13
- "@opentinyvue/vue-collapse-item": "~2.26.0",
14
- "@opentinyvue/vue-common": "~2.26.0",
15
- "@opentinyvue/vue-directive": "~2.26.0",
16
- "@opentinyvue/vue-input": "~2.26.0",
17
- "@opentinyvue/vue-option": "~2.26.0",
18
- "@opentinyvue/vue-renderless": "~3.26.0",
19
- "@opentinyvue/vue-select": "~2.26.0",
20
- "@opentinyvue/vue-theme": "~3.26.0"
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
  }
@@ -0,0 +1,2 @@
1
+ declare const _default: any;
2
+ export default _default;