@opentinyvue/vue-color-select-panel 3.25.0 → 3.27.0

package/lib/pc.js

@@ -1,15 +1,15 @@
 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 { openBlock, createElementBlock, normalizeStyle, createElementVNode, resolveComponent, createVNode, resolveDirective, withDirectives, withModifiers, createBlock, createCommentVNode, withCtx, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
-import { renderless as renderless$2, api as api$2 } from '@opentinyvue/vue-renderless/color-select-panel/alpha-select/vue';
+import { openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, withModifiers, resolveComponent, createVNode, createBlock, createCommentVNode, resolveDirective, withDirectives, withCtx, toDisplayString, createTextVNode } from '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';
 
@@ -46,7 +46,7 @@ var _export_sfc = function _export_sfc2(sfc, props) {
   return target;
 };
 
-var _sfc_main$3 = defineComponent({
+var _sfc_main$4 = defineComponent({
   emit: ["ready", "svUpdate"],
   props: {
     color: {
@@ -63,7 +63,7 @@ var _sfc_main$3 = defineComponent({
     });
   }
 });
-var _hoisted_1$2 = /* @__PURE__ */ createElementVNode(
+var _hoisted_1$3 = /* @__PURE__ */ createElementVNode(
   "div",
   {
     class: "white"
@@ -81,7 +81,7 @@ var _hoisted_2$2 = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
     "div",
     {
@@ -91,7 +91,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
         background: _ctx.state.bg
       })
     },
-    [_hoisted_1$2, _hoisted_2$2, createElementVNode(
+    [_hoisted_1$3, _hoisted_2$2, createElementVNode(
       "div",
       {
         class: "cursor",
@@ -110,7 +110,72 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     /* STYLE */
   );
 }
-var SvSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+var SvSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+var _sfc_main$3 = defineComponent({
+  props: {},
+  setup: function setup2(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1,
+      mono: true
+    });
+  }
+});
+var _hoisted_1$2 = ["onMousedown"];
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: "tiny-color-select-panel__linear-gradient",
+      ref: "linearGradientBar",
+      onClick: _cache[1] || (_cache[1] = function() {
+        return _ctx.onClickBar && _ctx.onClickBar.apply(_ctx, arguments);
+      }),
+      style: normalizeStyle({
+        background: _ctx.state.linearGradientBarBackground
+      })
+    },
+    [(openBlock(true), createElementBlock(
+      Fragment,
+      null,
+      renderList(_ctx.context.colorPoints, function(point, idx) {
+        return openBlock(), createElementBlock("div", {
+          class: "tiny-color-select-panel__linear-gradient__thumb",
+          ref_for: true,
+          ref: "thumb",
+          key: idx,
+          onClick: _cache[0] || (_cache[0] = withModifiers(function() {
+          }, ["stop"])),
+          onMousedown: function onMousedown(event) {
+            return _ctx.onThumbMouseDown(event, point);
+          },
+          style: normalizeStyle({
+            left: point.cursorLeft + "px",
+            transform: "translateX(-50%)"
+          })
+        }, [createElementVNode(
+          "div",
+          {
+            class: "tiny-color-select-panel__linear-gradient__thumb-heart",
+            style: normalizeStyle({
+              background: point.color.value
+            })
+          },
+          null,
+          4
+          /* STYLE */
+        )], 44, _hoisted_1$2);
+      }),
+      128
+      /* KEYED_FRAGMENT */
+    ))],
+    4
+    /* STYLE */
+  );
+}
+var linearGradient = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 var _sfc_main$2 = defineComponent({
   emits: ["hueUpdate", "svReady", "hueReady"],
   props: {
@@ -122,14 +187,15 @@ var _sfc_main$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
     });
   }
@@ -143,6 +209,7 @@ var _hoisted_2$1 = {
 };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_sv_select = resolveComponent("sv-select");
+  var _component_linear_gradient = resolveComponent("linear-gradient");
   return openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode(_component_sv_select, {
     color: _ctx.color,
     onReady: _ctx.onSvReady
@@ -153,18 +220,32 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       "div",
       {
         ref: "thumb",
+        class: "tiny-color-select-panel__inner__hue-select-thumb",
         style: normalizeStyle({
-          top: _ctx.state.thumbTop + "px",
-          transform: "translateY(-50%)"
+          left: _ctx.state.thumbLeft + "px",
+          transform: "translateX(-50%)"
         })
       },
-      null,
+      [createElementVNode(
+        "div",
+        {
+          class: "tiny-color-select-panel__inner__hue-select-thumb-heart",
+          style: normalizeStyle({
+            background: _ctx.state.ctx.activeColor.color.value
+          })
+        },
+        null,
+        4
+        /* STYLE */
+      )],
       4
       /* STYLE */
     )],
     512
     /* NEED_PATCH */
-  )]);
+  ), _ctx.state.ctx.colorMode === "linear-gradient" ? (openBlock(), createBlock(_component_linear_gradient, {
+    key: 0
+  })) : createCommentVNode("v-if", true)]);
 }
 var HueSelect = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 var _sfc_main$1 = defineComponent({
@@ -174,12 +255,12 @@ var _sfc_main$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
     });
   }
@@ -211,13 +292,24 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       {
         class: "tiny-color-select-panel__alpha__thumb",
         style: normalizeStyle({
-          top: 0,
+          top: "-2px",
           left: _ctx.state.left + "px",
           transform: "translateX(-50%)"
         }),
         ref: "alphaThumb"
       },
-      null,
+      [createElementVNode(
+        "div",
+        {
+          class: "tiny-color-select-panel__inner__hue-select-thumb-heart",
+          style: normalizeStyle({
+            background: _ctx.state.activeColor.color.value
+          })
+        },
+        null,
+        4
+        /* STYLE */
+      )],
       4
       /* STYLE */
     )],
@@ -226,56 +318,581 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   );
 }
 var AlphaSelect = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+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 _sfc_main = 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
+      }
     });
   }
 });
 var _hoisted_1 = {
-  class: "tiny-color-select-panel__tools"
+  key: 1,
+  class: "tiny-color-select-panel__no-alpha"
 };
 var _hoisted_2 = {
-  key: 0,
-  class: "tiny-color-select-panel__tools__format-select"
+  class: "tiny-color-select-panel__tools"
 };
 var _hoisted_3 = {
-  class: "tiny-color-select-panel__tools-btns"
+  key: 0,
+  class: "tiny-color-select-panel__tools__format-select"
 };
 var _hoisted_4 = {
+  class: "tiny-color-select-panel__tools-style"
+};
+var _hoisted_5 = {
   key: 0,
-  class: "tiny-color-select-panel__history"
+  class: "tiny-color-select-panel__tools-hex"
 };
-var _hoisted_5 = ["onClick"];
 var _hoisted_6 = {
-  key: 1
+  key: 0,
+  class: "tiny-color-select-panel__tools-deg"
 };
 var _hoisted_7 = {
+  key: 1,
+  class: "tiny-color-select-panel__tools-hex"
+};
+var _hoisted_8 = {
+  key: 2
+};
+var _hoisted_9 = {
   key: 0,
+  class: "tiny-color-select-panel__history"
+};
+var _hoisted_10 = ["onClick"];
+var _hoisted_11 = {
+  key: 3,
+  class: "tiny-color-select-panel__predefine-title"
+};
+var _hoisted_12 = {
+  key: 4,
   class: "tiny-color-select-panel__predefine"
 };
-var _hoisted_8 = ["onClick"];
-var _hoisted_9 = {
-  key: 1
+var _hoisted_13 = ["onClick"];
+var _hoisted_14 = {
+  class: "tiny-color-select-panel__tools-btns"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_hue_select = resolveComponent("hue-select");
@@ -283,14 +900,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_tiny_option = resolveComponent("tiny-option");
   var _component_tiny_select = resolveComponent("tiny-select");
   var _component_tiny_input = resolveComponent("tiny-input");
+  var _component_tiny_numeric = resolveComponent("tiny-numeric");
   var _component_tiny_button = resolveComponent("tiny-button");
-  var _component_tiny_collapse_item = resolveComponent("tiny-collapse-item");
-  var _component_tiny_collapse = resolveComponent("tiny-collapse");
   var _directive_clickoutside = resolveDirective("clickoutside");
   return _ctx.state.showPicker ? withDirectives((openBlock(), createElementBlock("div", {
     key: 0,
     class: "tiny-color-select-panel",
-    onClick: _cache[2] || (_cache[2] = withModifiers(function() {
+    onClick: _cache[7] || (_cache[7] = withModifiers(function() {
     }, ["stop"]))
   }, [createVNode(_component_hue_select, {
     color: _ctx.state.color,
@@ -300,7 +916,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0,
     color: _ctx.state.color,
     onReady: _ctx.onAlphaReady
-  }, 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, {
+  }, null, 8, ["color", "onReady"])) : createCommentVNode("v-if", true), !_ctx.alpha ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode(
+    "div",
+    {
+      class: "tiny-color-select-panel__display",
+      style: normalizeStyle({
+        background: _ctx.state.isLinearGradient ? _ctx.state.linearGradient : _ctx.state.color.value
+      })
+    },
+    null,
+    4
+    /* STYLE */
+  ), createElementVNode("div", _hoisted_2, [_ctx.state.formats.length ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_tiny_select, {
     modelValue: _ctx.state.currentFormat,
     "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
       return _ctx.state.currentFormat = $event;
@@ -324,28 +951,86 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     _: 1
     /* STABLE */
-  }, 8, ["modelValue"])])) : createCommentVNode("v-if", true), createVNode(_component_tiny_input, {
+  }, 8, ["modelValue"])])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_4, [_ctx.state.currentFormat === "hex" || _ctx.state.currentFormat === "css" || !_ctx.state.currentFormat ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex1",
     modelValue: _ctx.state.input,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = function($event) {
       return _ctx.state.input = $event;
+    })
+  }, null, 8, ["modelValue"]), _ctx.state.isLinearGradient ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_tiny_numeric, {
+    modelValue: _ctx.state.ctx.deg,
+    "onUpdate:modelValue": _cache[2] || (_cache[2] = function($event) {
+      return _ctx.state.ctx.deg = $event;
     }),
-    size: "small"
-  }, null, 8, ["modelValue"]), createElementVNode("div", _hoisted_3, [createVNode(_component_tiny_button, {
-    size: "small",
-    onClick: _ctx.onCancel
-  }, {
-    default: withCtx(function() {
-      return [createTextVNode(
-        toDisplayString(_ctx.t("ui.colorSelectPanel.cancel")),
-        1
-        /* TEXT */
-      )];
+    unit: "deg",
+    "mouse-wheel": ""
+  }, null, 8, ["modelValue"])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("div", _hoisted_7, [createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex4",
+    modelValue: _ctx.state.hexInput4,
+    "onUpdate:modelValue": _cache[3] || (_cache[3] = function($event) {
+      return _ctx.state.hexInput4 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex5",
+    modelValue: _ctx.state.hexInput5,
+    "onUpdate:modelValue": _cache[4] || (_cache[4] = function($event) {
+      return _ctx.state.hexInput5 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex6",
+    modelValue: _ctx.state.hexInput6,
+    "onUpdate:modelValue": _cache[5] || (_cache[5] = function($event) {
+      return _ctx.state.hexInput6 = $event;
+    })
+  }, null, 8, ["modelValue"]), createVNode(_component_tiny_input, {
+    class: "tiny-color-select-panel__tools-hex7",
+    modelValue: _ctx.state.hexInput7,
+    "onUpdate:modelValue": _cache[6] || (_cache[6] = function($event) {
+      return _ctx.state.hexInput7 = $event;
+    })
+  }, null, 8, ["modelValue"])]))])]), _ctx.state.enableHistory ? (openBlock(), createElementBlock("div", _hoisted_8, [_ctx.state.enableHistory && _ctx.state.stack.length ? (openBlock(), createElementBlock("div", _hoisted_9, [(openBlock(true), createElementBlock(
+    Fragment,
+    null,
+    renderList(_ctx.state.stack, function(color, key) {
+      return openBlock(), createElementBlock("div", {
+        class: "tiny-color-select-panel__history__color-block",
+        key,
+        style: normalizeStyle({
+          background: color
+        }),
+        onClick: function onClick() {
+          return _ctx.onHistoryClick(color);
+        }
+      }, null, 12, _hoisted_10);
     }),
-    _: 1
-    /* STABLE */
-  }, 8, ["onClick"]), createVNode(_component_tiny_button, {
-    type: "primary",
+    128
+    /* KEYED_FRAGMENT */
+  ))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor ? (openBlock(), createElementBlock(
+    "div",
+    _hoisted_11,
+    toDisplayString(_ctx.t("ui.colorSelectPanel.predefine")),
+    1
+    /* TEXT */
+  )) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor && _ctx.state.predefineStack.length ? (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(
+    Fragment,
+    null,
+    renderList(_ctx.state.predefineStack, function(color, key) {
+      return openBlock(), createElementBlock("div", {
+        class: "tiny-color-select-panel__predefine__color-block",
+        key,
+        style: normalizeStyle({
+          background: color
+        }),
+        onClick: function onClick() {
+          return _ctx.onPredefineColorClick(color);
+        }
+      }, null, 12, _hoisted_13);
+    }),
+    128
+    /* KEYED_FRAGMENT */
+  ))])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_14, [createVNode(_component_tiny_button, {
     size: "small",
+    type: "primary",
     onClick: _ctx.onConfirm
   }, {
     default: withCtx(function() {
@@ -357,79 +1042,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     _: 1
     /* STABLE */
-  }, 8, ["onClick"])])]), createVNode(_component_tiny_collapse, null, {
-    default: withCtx(function() {
-      return [_ctx.state.enableHistory ? (openBlock(), createBlock(_component_tiny_collapse_item, {
-        key: 0,
-        title: _ctx.t("ui.colorSelectPanel.history"),
-        name: "history"
-      }, {
-        default: withCtx(function() {
-          return [_ctx.state.stack.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.state.stack, function(color, key) {
-              return openBlock(), createElementBlock("div", {
-                class: "tiny-color-select-panel__history__color-block",
-                key,
-                style: normalizeStyle({
-                  background: color
-                }),
-                onClick: function onClick() {
-                  return _ctx.onHistoryClick(color);
-                }
-              }, null, 12, _hoisted_5);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))])) : createCommentVNode("v-if", true), !_ctx.state.stack.length ? (openBlock(), createElementBlock(
-            "div",
-            _hoisted_6,
-            toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["title"])) : createCommentVNode("v-if", true), _ctx.state.enablePredefineColor ? (openBlock(), createBlock(_component_tiny_collapse_item, {
-        key: 1,
-        title: _ctx.t("ui.colorSelectPanel.predefine"),
-        name: "predefine"
-      }, {
-        default: withCtx(function() {
-          return [_ctx.state.predefineStack.length ? (openBlock(), createElementBlock("div", _hoisted_7, [(openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(_ctx.state.predefineStack, function(color, key) {
-              return openBlock(), createElementBlock("div", {
-                class: "tiny-color-select-panel__predefine__color-block",
-                key,
-                style: normalizeStyle({
-                  background: color
-                }),
-                onClick: function onClick() {
-                  return _ctx.onPredefineColorClick(color);
-                }
-              }, null, 12, _hoisted_8);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))])) : createCommentVNode("v-if", true), !_ctx.state.predefineStack.length ? (openBlock(), createElementBlock(
-            "div",
-            _hoisted_9,
-            toDisplayString(_ctx.t("ui.colorSelectPanel.empty")),
-            1
-            /* TEXT */
-          )) : createCommentVNode("v-if", true)];
-        }),
-        _: 1
-        /* STABLE */
-      }, 8, ["title"])) : createCommentVNode("v-if", true)];
-    }),
-    _: 1
-    /* STABLE */
-  })])), [[_directive_clickoutside, _ctx.onClickOutside]]) : createCommentVNode("v-if", true);
+  }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+    type: "text",
+    text: _ctx.t("ui.colorSelectPanel.cancel"),
+    size: "small",
+    onClick: _ctx.onCancel
+  }, null, 8, ["text", "onClick"])])])), [[_directive_clickoutside, _ctx.onClickOutside]]) : createCommentVNode("v-if", true);
 }
 var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@opentinyvue/vue-color-select-panel",
   "type": "module",
-  "version": "3.25.0",
+  "version": "3.27.0",
   "description": "",
   "license": "MIT",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "dependencies": {
-    "@opentinyvue/vue-button": "~3.25.0",
-    "@opentinyvue/vue-collapse": "~3.25.0",
-    "@opentinyvue/vue-collapse-item": "~3.25.0",
-    "@opentinyvue/vue-common": "~3.25.0",
-    "@opentinyvue/vue-directive": "~3.25.0",
-    "@opentinyvue/vue-input": "~3.25.0",
-    "@opentinyvue/vue-option": "~3.25.0",
-    "@opentinyvue/vue-renderless": "~3.25.0",
-    "@opentinyvue/vue-select": "~3.25.0",
-    "@opentinyvue/vue-theme": "~3.25.0"
+    "@opentinyvue/vue-button": "~3.27.0",
+    "@opentinyvue/vue-collapse": "~3.27.0",
+    "@opentinyvue/vue-collapse-item": "~3.27.0",
+    "@opentinyvue/vue-common": "~3.27.0",
+    "@opentinyvue/vue-directive": "~3.27.0",
+    "@opentinyvue/vue-input": "~3.27.0",
+    "@opentinyvue/vue-numeric": "~3.27.0",
+    "@opentinyvue/vue-option": "~3.27.0",
+    "@opentinyvue/vue-renderless": "~3.27.0",
+    "@opentinyvue/vue-select": "~3.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,17 @@
+declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<import("@vue/runtime-core").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, any, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, readonly string[] | Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<import("@vue/runtime-core").ComponentObjectPropsOptions<{
+    [x: string]: unknown;
+}>>>>, {
+    readonly [x: number]: string;
+} | {}, {}>;
+export default _default;

package/src/pc.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     history?: any;
     enableHistory?: any;
     enablePredefineColor?: any;
+    colorMode?: any;
 }>, {
     t: (this: any, path: any, options?: any) => any;
     vm: any;
@@ -41,6 +42,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     history?: any;
     enableHistory?: any;
     enablePredefineColor?: any;
+    colorMode?: any;
 }>>> & {
     onCancel?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -63,5 +65,6 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly history?: any;
     readonly enableHistory?: any;
     readonly enablePredefineColor?: any;
+    readonly colorMode?: any;
 }, {}>;
 export default _default;