@opentinyvue/vue-color-select-panel 2.25.0 → 2.27.0

package/lib/pc.js

@@ -1,14 +1,14 @@
 import Button from '@opentinyvue/vue-button';
 import Input from '@opentinyvue/vue-input';
-import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-renderless/color-select-panel/vue';
+import Numeric from '@opentinyvue/vue-numeric';
+import { renderless as renderless$4, api as api$4 } from '@opentinyvue/vue-renderless/color-select-panel/vue';
 import { defineComponent, setup, props, directive } from '@opentinyvue/vue-common';
-import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
+import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/hue-select/vue';
 import { api, renderless } from '@opentinyvue/vue-renderless/color-select-panel/sv-select/vue';
-import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/color-select-panel/linear-gradient/vue';
+import { renderless as renderless$3, api as api$3 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
 import '@opentinyvue/vue-theme/color-select-panel/index.css';
 import { Clickoutside } from '@opentinyvue/vue-directive';
-import Collapse from '@opentinyvue/vue-collapse';
-import CollapseItem from '@opentinyvue/vue-collapse-item';
 import Select from '@opentinyvue/vue-select';
 import Option from '@opentinyvue/vue-option';
 
@@ -42,7 +42,7 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
   };
 }
 
-var render$3 = function render$32() {
+var render$4 = function render$42() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -66,8 +66,8 @@ var render$3 = function render$32() {
     }
   })]);
 };
-var staticRenderFns$3 = [];
-var __vue2_script$3 = defineComponent({
+var staticRenderFns$4 = [];
+var __vue2_script$4 = defineComponent({
   emit: ["ready", "svUpdate"],
   props: {
     color: {
@@ -84,6 +84,68 @@ var __vue2_script$3 = defineComponent({
     });
   }
 });
+var __cssModules$4 = {};
+var __component__$4 = /* @__PURE__ */ normalizeComponent(__vue2_script$4, render$4, staticRenderFns$4, false, __vue2_injectStyles$4);
+function __vue2_injectStyles$4(context) {
+  for (var o in __cssModules$4) {
+    this[o] = __cssModules$4[o];
+  }
+}
+var SvSelect = /* @__PURE__ */ (function() {
+  return __component__$4.exports;
+})();
+var render$3 = function render$32() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    ref: "linearGradientBar",
+    staticClass: "tiny-color-select-panel__linear-gradient",
+    style: {
+      background: _vm.state.linearGradientBarBackground
+    },
+    on: {
+      "click": _vm.onClickBar
+    }
+  }, _vm._l(_vm.context.colorPoints, function(point, idx) {
+    return _c("div", {
+      key: idx,
+      ref: "thumb",
+      refInFor: true,
+      staticClass: "tiny-color-select-panel__linear-gradient__thumb",
+      style: {
+        left: point.cursorLeft + "px",
+        transform: "translateX(-50%)"
+      },
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+        },
+        "mousedown": function mousedown(event) {
+          return _vm.onThumbMouseDown(event, point);
+        }
+      }
+    }, [_c("div", {
+      staticClass: "tiny-color-select-panel__linear-gradient__thumb-heart",
+      style: {
+        background: point.color.value
+      }
+    })]);
+  }), 0);
+};
+var staticRenderFns$3 = [];
+var __vue2_script$3 = defineComponent({
+  props: {},
+  setup: function setup2(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1,
+      mono: true
+    });
+  }
+});
 var __cssModules$3 = {};
 var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3);
 function __vue2_injectStyles$3(context) {
@@ -91,9 +153,9 @@ function __vue2_injectStyles$3(context) {
     this[o] = __cssModules$3[o];
   }
 }
-var SvSelect = /* @__PURE__ */ function() {
+var linearGradient = /* @__PURE__ */ (function() {
   return __component__$3.exports;
-}();
+})();
 var render$2 = function render$22() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -112,11 +174,17 @@ var render$2 = function render$22() {
     staticClass: "tiny-color-select-panel__inner__hue-select"
   }, [_c("div", {
     ref: "thumb",
+    staticClass: "tiny-color-select-panel__inner__hue-select-thumb",
+    style: {
+      left: _vm.state.thumbLeft + "px",
+      transform: "translateX(-50%)"
+    }
+  }, [_c("div", {
+    staticClass: "tiny-color-select-panel__inner__hue-select-thumb-heart",
     style: {
-      top: _vm.state.thumbTop + "px",
-      transform: "translateY(-50%)"
+      background: _vm.state.ctx.activeColor.color.value
     }
-  })])], 1);
+  })])]), _vm.state.ctx.colorMode === "linear-gradient" ? _c("linear-gradient") : _vm._e()], 1);
 };
 var staticRenderFns$2 = [];
 var __vue2_script$2 = defineComponent({
@@ -130,14 +198,15 @@ var __vue2_script$2 = defineComponent({
     }
   },
   components: {
-    SvSelect
+    SvSelect,
+    LinearGradient: linearGradient
   },
-  setup: function setup2(props2, context) {
+  setup: function setup3(props2, context) {
     return setup({
       props: props2,
       context,
-      renderless: renderless$1,
-      api: api$1,
+      renderless: renderless$2,
+      api: api$2,
       mono: true
     });
   }
@@ -149,9 +218,9 @@ function __vue2_injectStyles$2(context) {
     this[o] = __cssModules$2[o];
   }
 }
-var HueSelect = /* @__PURE__ */ function() {
+var HueSelect = /* @__PURE__ */ (function() {
   return __component__$2.exports;
-}();
+})();
 var render$1 = function render$12() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -172,11 +241,16 @@ var render$1 = function render$12() {
     ref: "alphaThumb",
     staticClass: "tiny-color-select-panel__alpha__thumb",
     style: {
-      top: 0,
+      top: "-2px",
       left: _vm.state.left + "px",
       transform: "translateX(-50%)"
     }
-  })]);
+  }, [_c("div", {
+    staticClass: "tiny-color-select-panel__inner__hue-select-thumb-heart",
+    style: {
+      background: _vm.state.activeColor.color.value
+    }
+  })])]);
 };
 var staticRenderFns$1 = [];
 var __vue2_script$1 = defineComponent({
@@ -186,12 +260,12 @@ var __vue2_script$1 = defineComponent({
       type: Object
     }
   },
-  setup: function setup3(props2, context) {
+  setup: function setup4(props2, context) {
     return setup({
       props: props2,
       context,
-      renderless: renderless$2,
-      api: api$2,
+      renderless: renderless$3,
+      api: api$3,
       mono: true
     });
   }
@@ -203,9 +277,512 @@ function __vue2_injectStyles$1(context) {
     this[o] = __cssModules$1[o];
   }
 }
-var AlphaSelect = /* @__PURE__ */ function() {
+var AlphaSelect = /* @__PURE__ */ (function() {
   return __component__$1.exports;
-}();
+})();
+var node = {};
+var hasRequiredNode;
+function requireNode() {
+  if (hasRequiredNode) return node;
+  hasRequiredNode = 1;
+  var GradientParser = GradientParser || {};
+  GradientParser.stringify = /* @__PURE__ */ (function() {
+    var visitor = {
+      "visit_linear-gradient": function visit_linearGradient(node2) {
+        return visitor.visit_gradient(node2);
+      },
+      "visit_repeating-linear-gradient": function visit_repeatingLinearGradient(node2) {
+        return visitor.visit_gradient(node2);
+      },
+      "visit_radial-gradient": function visit_radialGradient(node2) {
+        return visitor.visit_gradient(node2);
+      },
+      "visit_repeating-radial-gradient": function visit_repeatingRadialGradient(node2) {
+        return visitor.visit_gradient(node2);
+      },
+      "visit_gradient": function visit_gradient(node2) {
+        var orientation = visitor.visit(node2.orientation);
+        if (orientation) {
+          orientation += ", ";
+        }
+        return node2.type + "(" + orientation + visitor.visit(node2.colorStops) + ")";
+      },
+      "visit_shape": function visit_shape(node2) {
+        var result = node2.value, at = visitor.visit(node2.at), style = visitor.visit(node2.style);
+        if (style) {
+          result += " " + style;
+        }
+        if (at) {
+          result += " at " + at;
+        }
+        return result;
+      },
+      "visit_default-radial": function visit_defaultRadial(node2) {
+        var result = "", at = visitor.visit(node2.at);
+        if (at) {
+          result += at;
+        }
+        return result;
+      },
+      "visit_extent-keyword": function visit_extentKeyword(node2) {
+        var result = node2.value, at = visitor.visit(node2.at);
+        if (at) {
+          result += " at " + at;
+        }
+        return result;
+      },
+      "visit_position-keyword": function visit_positionKeyword(node2) {
+        return node2.value;
+      },
+      "visit_position": function visit_position(node2) {
+        return visitor.visit(node2.value.x) + " " + visitor.visit(node2.value.y);
+      },
+      "visit_%": function visit_(node2) {
+        return node2.value + "%";
+      },
+      "visit_em": function visit_em(node2) {
+        return node2.value + "em";
+      },
+      "visit_px": function visit_px(node2) {
+        return node2.value + "px";
+      },
+      "visit_calc": function visit_calc(node2) {
+        return "calc(" + node2.value + ")";
+      },
+      "visit_literal": function visit_literal(node2) {
+        return visitor.visit_color(node2.value, node2);
+      },
+      "visit_hex": function visit_hex(node2) {
+        return visitor.visit_color("#" + node2.value, node2);
+      },
+      "visit_rgb": function visit_rgb(node2) {
+        return visitor.visit_color("rgb(" + node2.value.join(", ") + ")", node2);
+      },
+      "visit_rgba": function visit_rgba(node2) {
+        return visitor.visit_color("rgba(" + node2.value.join(", ") + ")", node2);
+      },
+      "visit_hsl": function visit_hsl(node2) {
+        return visitor.visit_color("hsl(" + node2.value[0] + ", " + node2.value[1] + "%, " + node2.value[2] + "%)", node2);
+      },
+      "visit_hsla": function visit_hsla(node2) {
+        return visitor.visit_color("hsla(" + node2.value[0] + ", " + node2.value[1] + "%, " + node2.value[2] + "%, " + node2.value[3] + ")", node2);
+      },
+      "visit_var": function visit_var(node2) {
+        return visitor.visit_color("var(" + node2.value + ")", node2);
+      },
+      "visit_color": function visit_color(resultColor, node2) {
+        var result = resultColor, length = visitor.visit(node2.length);
+        if (length) {
+          result += " " + length;
+        }
+        return result;
+      },
+      "visit_angular": function visit_angular(node2) {
+        return node2.value + "deg";
+      },
+      "visit_directional": function visit_directional(node2) {
+        return "to " + node2.value;
+      },
+      "visit_array": function visit_array(elements) {
+        var result = "", size = elements.length;
+        elements.forEach(function(element, i) {
+          result += visitor.visit(element);
+          if (i < size - 1) {
+            result += ", ";
+          }
+        });
+        return result;
+      },
+      "visit_object": function visit_object(obj) {
+        if (obj.width && obj.height) {
+          return visitor.visit(obj.width) + " " + visitor.visit(obj.height);
+        }
+        return "";
+      },
+      "visit": function visit(element) {
+        if (!element) {
+          return "";
+        }
+        if (element instanceof Array) {
+          return visitor.visit_array(element);
+        } else if (typeof element === "object" && !element.type) {
+          return visitor.visit_object(element);
+        } else if (element.type) {
+          var nodeVisitor = visitor["visit_" + element.type];
+          if (nodeVisitor) {
+            return nodeVisitor(element);
+          } else {
+            throw Error("Missing visitor visit_" + element.type);
+          }
+        } else {
+          throw Error("Invalid node.");
+        }
+      }
+    };
+    return function(root) {
+      return visitor.visit(root);
+    };
+  })();
+  var GradientParser = GradientParser || {};
+  GradientParser.parse = /* @__PURE__ */ (function() {
+    var tokens = {
+      linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
+      repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
+      radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
+      repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
+      sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+      extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
+      positionKeywords: /^(left|center|right|top|bottom)/i,
+      pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+      percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
+      emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+      angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+      radianValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))rad/,
+      startCall: /^\(/,
+      endCall: /^\)/,
+      comma: /^,/,
+      hexColor: /^\#([0-9a-fA-F]+)/,
+      literalColor: /^([a-zA-Z]+)/,
+      rgbColor: /^rgb/i,
+      rgbaColor: /^rgba/i,
+      varColor: /^var/i,
+      calcValue: /^calc/i,
+      variableName: /^(--[a-zA-Z0-9-,\s\#]+)/,
+      number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
+      hslColor: /^hsl/i,
+      hslaColor: /^hsla/i
+    };
+    var input = "";
+    function error(msg) {
+      var err = new Error(input + ": " + msg);
+      err.source = input;
+      throw err;
+    }
+    function getAST() {
+      var ast = matchListDefinitions();
+      if (input.length > 0) {
+        error("Invalid input not EOF");
+      }
+      return ast;
+    }
+    function matchListDefinitions() {
+      return matchListing(matchDefinition);
+    }
+    function matchDefinition() {
+      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);
+    }
+    function matchGradient(gradientType, pattern, orientationMatcher) {
+      return matchCall(pattern, function(captures) {
+        var orientation = orientationMatcher();
+        if (orientation) {
+          if (!scan(tokens.comma)) {
+            error("Missing comma before color stops");
+          }
+        }
+        return {
+          type: gradientType,
+          orientation,
+          colorStops: matchListing(matchColorStop)
+        };
+      });
+    }
+    function matchCall(pattern, callback) {
+      var captures = scan(pattern);
+      if (captures) {
+        if (!scan(tokens.startCall)) {
+          error("Missing (");
+        }
+        var result = callback(captures);
+        if (!scan(tokens.endCall)) {
+          error("Missing )");
+        }
+        return result;
+      }
+    }
+    function matchLinearOrientation() {
+      var sideOrCorner = matchSideOrCorner();
+      if (sideOrCorner) {
+        return sideOrCorner;
+      }
+      var legacyDirection = match("position-keyword", tokens.positionKeywords, 1);
+      if (legacyDirection) {
+        return {
+          type: "directional",
+          value: legacyDirection.value
+        };
+      }
+      return matchAngle();
+    }
+    function matchSideOrCorner() {
+      return match("directional", tokens.sideOrCorner, 1);
+    }
+    function matchAngle() {
+      return match("angular", tokens.angleValue, 1) || match("angular", tokens.radianValue, 1);
+    }
+    function matchListRadialOrientations() {
+      var radialOrientations, radialOrientation = matchRadialOrientation(), lookaheadCache;
+      if (radialOrientation) {
+        radialOrientations = [];
+        radialOrientations.push(radialOrientation);
+        lookaheadCache = input;
+        if (scan(tokens.comma)) {
+          radialOrientation = matchRadialOrientation();
+          if (radialOrientation) {
+            radialOrientations.push(radialOrientation);
+          } else {
+            input = lookaheadCache;
+          }
+        }
+      }
+      return radialOrientations;
+    }
+    function matchRadialOrientation() {
+      var radialType = matchCircle() || matchEllipse();
+      if (radialType) {
+        radialType.at = matchAtPosition();
+      } else {
+        var extent = matchExtentKeyword();
+        if (extent) {
+          radialType = extent;
+          var positionAt = matchAtPosition();
+          if (positionAt) {
+            radialType.at = positionAt;
+          }
+        } else {
+          var atPosition = matchAtPosition();
+          if (atPosition) {
+            radialType = {
+              type: "default-radial",
+              at: atPosition
+            };
+          } else {
+            var defaultPosition = matchPositioning();
+            if (defaultPosition) {
+              radialType = {
+                type: "default-radial",
+                at: defaultPosition
+              };
+            }
+          }
+        }
+      }
+      return radialType;
+    }
+    function matchCircle() {
+      var circle = match("shape", /^(circle)/i, 0);
+      if (circle) {
+        circle.style = matchLength() || matchExtentKeyword();
+      }
+      return circle;
+    }
+    function matchEllipse() {
+      var ellipse = match("shape", /^(ellipse)/i, 0);
+      if (ellipse) {
+        ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
+      }
+      return ellipse;
+    }
+    function matchExtentKeyword() {
+      return match("extent-keyword", tokens.extentKeywords, 1);
+    }
+    function matchAtPosition() {
+      if (match("position", /^at/, 0)) {
+        var positioning = matchPositioning();
+        if (!positioning) {
+          error("Missing positioning value");
+        }
+        return positioning;
+      }
+    }
+    function matchPositioning() {
+      var location = matchCoordinates();
+      if (location.x || location.y) {
+        return {
+          type: "position",
+          value: location
+        };
+      }
+    }
+    function matchCoordinates() {
+      return {
+        x: matchDistance(),
+        y: matchDistance()
+      };
+    }
+    function matchListing(matcher) {
+      var captures = matcher(), result = [];
+      if (captures) {
+        result.push(captures);
+        while (scan(tokens.comma)) {
+          captures = matcher();
+          if (captures) {
+            result.push(captures);
+          } else {
+            error("One extra comma");
+          }
+        }
+      }
+      return result;
+    }
+    function matchColorStop() {
+      var color = matchColor();
+      if (!color) {
+        error("Expected color definition");
+      }
+      color.length = matchDistance();
+      return color;
+    }
+    function matchColor() {
+      return matchHexColor() || matchHSLAColor() || matchHSLColor() || matchRGBAColor() || matchRGBColor() || matchVarColor() || matchLiteralColor();
+    }
+    function matchLiteralColor() {
+      return match("literal", tokens.literalColor, 0);
+    }
+    function matchHexColor() {
+      return match("hex", tokens.hexColor, 1);
+    }
+    function matchRGBColor() {
+      return matchCall(tokens.rgbColor, function() {
+        return {
+          type: "rgb",
+          value: matchListing(matchNumber)
+        };
+      });
+    }
+    function matchRGBAColor() {
+      return matchCall(tokens.rgbaColor, function() {
+        return {
+          type: "rgba",
+          value: matchListing(matchNumber)
+        };
+      });
+    }
+    function matchVarColor() {
+      return matchCall(tokens.varColor, function() {
+        return {
+          type: "var",
+          value: matchVariableName()
+        };
+      });
+    }
+    function matchHSLColor() {
+      return matchCall(tokens.hslColor, function() {
+        var lookahead = scan(tokens.percentageValue);
+        if (lookahead) {
+          error("HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage");
+        }
+        var hue = matchNumber();
+        scan(tokens.comma);
+        var captures = scan(tokens.percentageValue);
+        var sat = captures ? captures[1] : null;
+        scan(tokens.comma);
+        captures = scan(tokens.percentageValue);
+        var light = captures ? captures[1] : null;
+        if (!sat || !light) {
+          error("Expected percentage value for saturation and lightness in HSL");
+        }
+        return {
+          type: "hsl",
+          value: [hue, sat, light]
+        };
+      });
+    }
+    function matchHSLAColor() {
+      return matchCall(tokens.hslaColor, function() {
+        var hue = matchNumber();
+        scan(tokens.comma);
+        var captures = scan(tokens.percentageValue);
+        var sat = captures ? captures[1] : null;
+        scan(tokens.comma);
+        captures = scan(tokens.percentageValue);
+        var light = captures ? captures[1] : null;
+        scan(tokens.comma);
+        var alpha = matchNumber();
+        if (!sat || !light) {
+          error("Expected percentage value for saturation and lightness in HSLA");
+        }
+        return {
+          type: "hsla",
+          value: [hue, sat, light, alpha]
+        };
+      });
+    }
+    function matchVariableName() {
+      return scan(tokens.variableName)[1];
+    }
+    function matchNumber() {
+      return scan(tokens.number)[1];
+    }
+    function matchDistance() {
+      return match("%", tokens.percentageValue, 1) || matchPositionKeyword() || matchCalc() || matchLength();
+    }
+    function matchPositionKeyword() {
+      return match("position-keyword", tokens.positionKeywords, 1);
+    }
+    function matchCalc() {
+      return matchCall(tokens.calcValue, function() {
+        var openParenCount = 1;
+        var i = 0;
+        while (openParenCount > 0 && i < input.length) {
+          var char = input.charAt(i);
+          if (char === "(") {
+            openParenCount++;
+          } else if (char === ")") {
+            openParenCount--;
+          }
+          i++;
+        }
+        if (openParenCount > 0) {
+          error("Missing closing parenthesis in calc() expression");
+        }
+        var calcContent = input.substring(0, i - 1);
+        consume(i - 1);
+        return {
+          type: "calc",
+          value: calcContent
+        };
+      });
+    }
+    function matchLength() {
+      return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
+    }
+    function match(type, pattern, captureIndex) {
+      var captures = scan(pattern);
+      if (captures) {
+        return {
+          type,
+          value: captures[captureIndex]
+        };
+      }
+    }
+    function scan(regexp) {
+      var captures, blankCaptures;
+      blankCaptures = /^[\n\r\t\s]+/.exec(input);
+      if (blankCaptures) {
+        consume(blankCaptures[0].length);
+      }
+      captures = regexp.exec(input);
+      if (captures) {
+        consume(captures[0].length);
+      }
+      return captures;
+    }
+    function consume(size) {
+      input = input.substr(size);
+    }
+    return function(code) {
+      input = code.toString().trim();
+      if (input.endsWith(";")) {
+        input = input.slice(0, -1);
+      }
+      return getAST();
+    };
+  })();
+  node.parse = GradientParser.parse;
+  node.stringify = GradientParser.stringify;
+  return node;
+}
+var nodeExports = requireNode();
 var render = function render2() {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -238,7 +815,14 @@ var render = function render2() {
     on: {
       "ready": _vm.onAlphaReady
     }
+  }) : _vm._e(), !_vm.alpha ? _c("div", {
+    staticClass: "tiny-color-select-panel__no-alpha"
   }) : _vm._e(), _c("div", {
+    staticClass: "tiny-color-select-panel__display",
+    style: {
+      background: _vm.state.isLinearGradient ? _vm.state.linearGradient : _vm.state.color.value
+    }
+  }), _c("div", {
     staticClass: "tiny-color-select-panel__tools"
   }, [_vm.state.formats.length ? _c("div", {
     staticClass: "tiny-color-select-panel__tools__format-select"
@@ -261,10 +845,12 @@ var render = function render2() {
         "label": formatValue
       }
     });
-  }), 1)], 1) : _vm._e(), _c("tiny-input", {
-    attrs: {
-      "size": "small"
-    },
+  }), 1)], 1) : _vm._e(), _c("div", {
+    staticClass: "tiny-color-select-panel__tools-style"
+  }, [_vm.state.currentFormat === "hex" || _vm.state.currentFormat === "css" || !_vm.state.currentFormat ? _c("div", {
+    staticClass: "tiny-color-select-panel__tools-hex"
+  }, [_c("tiny-input", {
+    staticClass: "tiny-color-select-panel__tools-hex1",
     model: {
       value: _vm.state.input,
       callback: function callback($$v) {
@@ -272,29 +858,59 @@ var render = function render2() {
       },
       expression: "state.input"
     }
-  }), _c("div", {
-    staticClass: "tiny-color-select-panel__tools-btns"
-  }, [_c("tiny-button", {
+  }), _vm.state.isLinearGradient ? _c("div", {
+    staticClass: "tiny-color-select-panel__tools-deg"
+  }, [_c("tiny-numeric", {
     attrs: {
-      "size": "small"
+      "unit": "deg",
+      "mouse-wheel": ""
     },
-    on: {
-      "click": _vm.onCancel
+    model: {
+      value: _vm.state.ctx.deg,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state.ctx, "deg", $$v);
+      },
+      expression: "state.ctx.deg"
     }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.colorSelectPanel.cancel")) + " ")]), _c("tiny-button", {
-    attrs: {
-      "type": "primary",
-      "size": "small"
-    },
-    on: {
-      "click": _vm.onConfirm
+  })], 1) : _vm._e()], 1) : _c("div", {
+    staticClass: "tiny-color-select-panel__tools-hex"
+  }, [_c("tiny-input", {
+    staticClass: "tiny-color-select-panel__tools-hex4",
+    model: {
+      value: _vm.state.hexInput4,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "hexInput4", $$v);
+      },
+      expression: "state.hexInput4"
     }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.colorSelectPanel.confirm")) + " ")])], 1)], 1), _c("tiny-collapse", [_vm.state.enableHistory ? _c("tiny-collapse-item", {
-    attrs: {
-      "title": _vm.t("ui.colorSelectPanel.history"),
-      "name": "history"
+  }), _c("tiny-input", {
+    staticClass: "tiny-color-select-panel__tools-hex5",
+    model: {
+      value: _vm.state.hexInput5,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "hexInput5", $$v);
+      },
+      expression: "state.hexInput5"
     }
-  }, [_vm.state.stack.length ? _c("div", {
+  }), _c("tiny-input", {
+    staticClass: "tiny-color-select-panel__tools-hex6",
+    model: {
+      value: _vm.state.hexInput6,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "hexInput6", $$v);
+      },
+      expression: "state.hexInput6"
+    }
+  }), _c("tiny-input", {
+    staticClass: "tiny-color-select-panel__tools-hex7",
+    model: {
+      value: _vm.state.hexInput7,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "hexInput7", $$v);
+      },
+      expression: "state.hexInput7"
+    }
+  })], 1)])]), _vm.state.enableHistory ? _c("div", [_vm.state.enableHistory && _vm.state.stack.length ? _c("div", {
     staticClass: "tiny-color-select-panel__history"
   }, _vm._l(_vm.state.stack, function(color, key) {
     return _c("div", {
@@ -309,12 +925,9 @@ var render = function render2() {
         }
       }
     });
-  }), 0) : _vm._e(), !_vm.state.stack.length ? _c("div", [_vm._v(_vm._s(_vm.t("ui.colorSelectPanel.empty")))]) : _vm._e()]) : _vm._e(), _vm.state.enablePredefineColor ? _c("tiny-collapse-item", {
-    attrs: {
-      "title": _vm.t("ui.colorSelectPanel.predefine"),
-      "name": "predefine"
-    }
-  }, [_vm.state.predefineStack.length ? _c("div", {
+  }), 0) : _vm._e()]) : _vm._e(), _vm.state.enablePredefineColor ? _c("div", {
+    staticClass: "tiny-color-select-panel__predefine-title"
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.colorSelectPanel.predefine")) + " ")]) : _vm._e(), _vm.state.enablePredefineColor && _vm.state.predefineStack.length ? _c("div", {
     staticClass: "tiny-color-select-panel__predefine"
   }, _vm._l(_vm.state.predefineStack, function(color, key) {
     return _c("div", {
@@ -329,31 +942,52 @@ var render = function render2() {
         }
       }
     });
-  }), 0) : _vm._e(), !_vm.state.predefineStack.length ? _c("div", [_vm._v(_vm._s(_vm.t("ui.colorSelectPanel.empty")))]) : _vm._e()]) : _vm._e()], 1)], 1) : _vm._e();
+  }), 0) : _vm._e(), _c("div", {
+    staticClass: "tiny-color-select-panel__tools-btns"
+  }, [_c("tiny-button", {
+    attrs: {
+      "size": "small",
+      "type": "primary"
+    },
+    on: {
+      "click": _vm.onConfirm
+    }
+  }, [_vm._v(" " + _vm._s(_vm.t("ui.colorSelectPanel.confirm")) + " ")]), _c("tiny-button", {
+    attrs: {
+      "type": "text",
+      "text": _vm.t("ui.colorSelectPanel.cancel"),
+      "size": "small"
+    },
+    on: {
+      "click": _vm.onCancel
+    }
+  })], 1)], 1) : _vm._e();
 };
 var staticRenderFns = [];
 var __vue2_script = defineComponent({
   emits: ["update:modelValue", "cancel", "confirm", "color-update"],
-  props: [].concat(props, ["modelValue", "visible", "alpha", "history", "predefine", "format", "enableHistory", "enablePredefineColor"]),
+  props: [].concat(props, ["modelValue", "visible", "alpha", "history", "predefine", "format", "enableHistory", "enablePredefineColor", "colorMode"]),
   components: {
     HueSelect,
     AlphaSelect,
     TinyButton: Button,
     TinyInput: Input,
-    TinyCollapse: Collapse,
-    TinyCollapseItem: CollapseItem,
     TinySelect: Select,
-    TinyOption: Option
+    TinyOption: Option,
+    TinyNumeric: Numeric
   },
   directives: directive({
     Clickoutside
   }),
-  setup: function setup4(props2, context) {
+  setup: function setup5(props2, context) {
     return setup({
       props: props2,
       context,
-      renderless: renderless$3,
-      api: api$3
+      renderless: renderless$4,
+      api: api$4,
+      extendOptions: {
+        parse: nodeExports.parse
+      }
     });
   }
 });
@@ -364,8 +998,8 @@ function __vue2_injectStyles(context) {
     this[o] = __cssModules[o];
   }
 }
-var pc = /* @__PURE__ */ function() {
+var pc = /* @__PURE__ */ (function() {
   return __component__.exports;
-}();
+})();
 
 export { pc as default };

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@opentinyvue/vue-color-select-panel",
   "type": "module",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-button": "~2.25.0",
-    "@opentinyvue/vue-collapse": "~2.25.0",
-    "@opentinyvue/vue-collapse-item": "~2.25.0",
-    "@opentinyvue/vue-common": "~2.25.0",
-    "@opentinyvue/vue-directive": "~2.25.0",
-    "@opentinyvue/vue-input": "~2.25.0",
-    "@opentinyvue/vue-option": "~2.25.0",
-    "@opentinyvue/vue-renderless": "~3.25.0",
-    "@opentinyvue/vue-select": "~2.25.0",
-    "@opentinyvue/vue-theme": "~3.25.0"
+    "@opentinyvue/vue-button": "~2.27.0",
+    "@opentinyvue/vue-collapse": "~2.27.0",
+    "@opentinyvue/vue-collapse-item": "~2.27.0",
+    "@opentinyvue/vue-common": "~2.27.0",
+    "@opentinyvue/vue-directive": "~2.27.0",
+    "@opentinyvue/vue-input": "~2.27.0",
+    "@opentinyvue/vue-numeric": "~2.27.0",
+    "@opentinyvue/vue-option": "~2.27.0",
+    "@opentinyvue/vue-renderless": "~3.27.0",
+    "@opentinyvue/vue-select": "~2.27.0",
+    "@opentinyvue/vue-theme": "~3.27.0",
+    "gradient-parser": "^1.1.1"
   },
   "types": "index.d.ts"
 }

package/src/components/linear-gradient.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;