From 7bfcd30e610815c278692f241da079c7edb62383 Mon Sep 17 00:00:00 2001
From: June <1601745371@qq.com>
Date: Fri, 6 Oct 2023 02:22:28 +0800
Subject: [PATCH] build: release update

---
 README.md                                  |   4 +-
 lib/auto-imports.d.ts                      |  14 +-
 lib/dist/color-gradient-picker-vue3.es.js  | 337 ++++++++++++---------
 lib/dist/color-gradient-picker-vue3.umd.js |   2 +-
 lib/dist/style.css                         |   2 +-
 lib/package.json                           |   2 +-
 6 files changed, 206 insertions(+), 155 deletions(-)

diff --git a/README.md b/README.md
index 1d49777..5247a8a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-17 22:02:02
  * @LastEditors: June
- * @LastEditTime: 2023-10-04 14:32:05
+ * @LastEditTime: 2023-10-06 02:21:39
 -->
 
 ## color-gradient-picker-vue3
@@ -16,7 +16,7 @@ Color and gradient picker for vue3.js. [If you use vue2， plese use color-gradi
 
 <img style="margin: 0 auto;" src="./imgs/introduct.png" width="50%" />
 
-[查看文档](./lib/README.md)
+[Document(查看文档)](./lib/README.md)
 
 #### Usage
 
diff --git a/lib/auto-imports.d.ts b/lib/auto-imports.d.ts
index 5eb5ac5..767eea9 100644
--- a/lib/auto-imports.d.ts
+++ b/lib/auto-imports.d.ts
@@ -61,5 +61,17 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+    WritableComputedRef,
+  } from 'vue'
 }
diff --git a/lib/dist/color-gradient-picker-vue3.es.js b/lib/dist/color-gradient-picker-vue3.es.js
index a673873..b46203f 100644
--- a/lib/dist/color-gradient-picker-vue3.es.js
+++ b/lib/dist/color-gradient-picker-vue3.es.js
@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, ref, inject, computed, watchEffect, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, normalizeClass, withModifiers, Fragment, renderList, createBlock, createVNode, createCommentVNode, withDirectives, isRef, vModelDynamic, toDisplayString, nextTick, pushScopeId, popScopeId, reactive, provide } from "vue";
+import { defineComponent, ref, inject, computed, watchEffect, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, normalizeClass, withModifiers, Fragment, renderList, createBlock, createVNode, createCommentVNode, withDirectives, isRef, vModelDynamic, toDisplayString, pushScopeId, popScopeId, reactive, provide } from "vue";
 function rgbToHsv({
   red,
   green,
@@ -61,53 +61,6 @@ function rgbToHsv({
     value: Math.round(v * 100)
   };
 }
-function getRgbByHue(hue) {
-  let C = 1;
-  const H = hue / 60;
-  let X = C * (1 - Math.abs(H % 2 - 1));
-  const m = 0;
-  const precision = 255;
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  C = (C + m) * precision | 0;
-  X = (X + m) * precision | 0;
-  if (H >= 0 && H < 1) {
-    r = C | 0;
-    g = X | 0;
-    b = m | 0;
-  }
-  if (H >= 1 && H < 2) {
-    r = X | 0;
-    g = C | 0;
-    b = m | 0;
-  }
-  if (H >= 2 && H < 3) {
-    r = m | 0;
-    g = C | 0;
-    b = X | 0;
-  }
-  if (H >= 3 && H < 4) {
-    r = m | 0;
-    g = X | 0;
-    b = C | 0;
-  }
-  if (H >= 4 && H < 5) {
-    r = X | 0;
-    g = m | 0;
-    b = C | 0;
-  }
-  if (H >= 5 && H <= 6) {
-    r = C | 0;
-    g = m | 0;
-    b = X | 0;
-  }
-  return {
-    red: r,
-    green: g,
-    blue: b
-  };
-}
 function isValidRGBValue(value) {
   return typeof value === "number" && Number.isNaN(value) === false && value >= 0 && value <= 255;
 }
@@ -270,25 +223,44 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const updateColor = inject("updateColor");
     const pointerStyle = computed(() => {
       const { width = 0, height = 0 } = pickerBoxInfo.value || {};
-      const saturation = colorPickerState.saturation || 0;
-      const value = colorPickerState.value || 0;
+      const {
+        saturation = 100,
+        value = 100,
+        isGradient,
+        activePointIndex
+      } = colorPickerState;
       const offsetLeft = (saturation * width / 100 | 0) - 6;
       const offsetTop = (height - value * height / 100 | 0) - 6;
+      const points = colorPickerState.points;
+      const activePoint = points[activePointIndex || 0];
+      const red = isGradient ? activePoint == null ? void 0 : activePoint.red : colorPickerState.red;
+      const green = isGradient ? activePoint == null ? void 0 : activePoint.green : colorPickerState.green;
+      const blue = isGradient ? activePoint == null ? void 0 : activePoint.blue : colorPickerState.blue;
       return {
-        backgroundColor: `rgb(${colorPickerState.red}, ${colorPickerState.green}, ${colorPickerState.blue})`,
+        backgroundColor: `rgb(${red}, ${green}, ${blue})`,
         left: `${offsetLeft}px`,
         top: `${offsetTop}px`
       };
     });
     const pickerStyle = computed(() => {
       const {
-        red = 255,
-        green = 0,
-        blue = 0
-      } = getRgbByHue(colorPickerState.hue) || {};
-      return {
-        backgroundColor: `rgb(${red}, ${green}, ${blue})`
-      };
+        isGradient,
+        red,
+        green,
+        blue,
+        activePointIndex = 0,
+        points = []
+      } = colorPickerState;
+      if (isGradient) {
+        const activePoint = points[activePointIndex];
+        return {
+          backgroundColor: `rgb(${activePoint.red}, ${activePoint.green}, ${activePoint.blue})`
+        };
+      } else {
+        return {
+          backgroundColor: `rgb(${red}, ${green}, ${blue})`
+        };
+      }
     });
     const mouseDownHandler = (event) => {
       if (!pickerBoxInfo.value)
@@ -392,7 +364,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const index_vue_vue_type_style_index_0_scoped_e6e79a9f_lang = "";
+const index_vue_vue_type_style_index_0_scoped_2e8391c9_lang = "";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -400,7 +372,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Picker = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-e6e79a9f"]]);
+const Picker = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-2e8391c9"]]);
 const _hoisted_1$7 = { class: "preview-area mr-8px" };
 const __default__$e = defineComponent({
   name: "AreaPreview"
@@ -543,8 +515,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const index_vue_vue_type_style_index_0_scoped_366635af_lang = "";
-const Hue = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-366635af"]]);
+const index_vue_vue_type_style_index_0_scoped_7cd4331a_lang = "";
+const Hue = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-7cd4331a"]]);
 const _hoisted_1$6 = { class: "alpha-area wh-full rounded-10px" };
 const __default__$c = defineComponent({
   name: "AreaAlpha"
@@ -557,13 +529,39 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const alphaMaskBoxInfo = ref(null);
     const offsetLeft = computed(() => {
       var _a;
+      const {
+        isGradient,
+        alpha,
+        activePointIndex = 0,
+        points = []
+      } = colorPickerState;
       const width = ((_a = alphaMaskBoxInfo.value) == null ? void 0 : _a.width) || 0;
-      return colorPickerState.alpha * (width - 14) | 0;
+      if (isGradient) {
+        const activePoint = points[activePointIndex];
+        return activePoint.alpha * (width - 14) | 0;
+      } else {
+        return alpha * (width - 14) | 0;
+      }
     });
     const style = computed(() => {
-      return {
-        background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${colorPickerState.red}, ${colorPickerState.green}, ${colorPickerState.blue}))`
-      };
+      const {
+        isGradient,
+        red,
+        green,
+        blue,
+        activePointIndex = 0,
+        points = []
+      } = colorPickerState;
+      if (isGradient) {
+        const activePoint = points[activePointIndex];
+        return {
+          background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${activePoint.red}, ${activePoint.green}, ${activePoint.blue}))`
+        };
+      } else {
+        return {
+          background: `linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${red}, ${green}, ${blue}))`
+        };
+      }
     });
     const pointerStyle = computed(() => {
       return { left: `${offsetLeft.value}px` };
@@ -647,8 +645,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const index_vue_vue_type_style_index_0_scoped_5168a43e_lang = "";
-const Alpha = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-5168a43e"]]);
+const index_vue_vue_type_style_index_0_scoped_256c0c24_lang = "";
+const Alpha = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-256c0c24"]]);
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 const freeGlobal$1 = freeGlobal;
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
@@ -1673,8 +1671,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       if (points.length <= 2)
         return;
       const index2 = props.index;
+      const newIdx = index2 === 0 ? 1 : index2 - 1;
       points = points == null ? void 0 : points.filter((i) => i.id !== props.point.id);
-      colorPickerState.activePointIndex = index2 === 0 ? 1 : index2 - 1;
+      colorPickerState.activePointIndex = newIdx;
       updateColor({ points }, "points");
     };
     return (_ctx, _cache) => {
@@ -1751,16 +1750,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const handleAddPoit = (event) => {
       const { x = 0, width = 0 } = pointsContainerBoxInfo.value || {};
       const left = updateGradientActivePercent(event.pageX - x, width);
-      const { red, green, blue, alpha } = colorPickerState;
+      const { hue, saturation, value } = colorPickerState;
       const points = cloneDeep(colorPickerState.points);
-      const newPoint = {
-        id: v4(),
-        red,
-        green,
-        blue,
-        alpha,
+      const rgba = hsvToRgb(hue, saturation, value, 1);
+      const newPoint = __spreadProps(__spreadValues({
+        id: v4()
+      }, rgba), {
         left
-      };
+      });
       points == null ? void 0 : points.push(newPoint);
       colorPickerState.activePointIndex = points.findIndex(
         (i) => i.id === newPoint.id
@@ -1887,8 +1884,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const index_vue_vue_type_style_index_0_scoped_b4af7105_lang = "";
-const CInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b4af7105"]]);
+const index_vue_vue_type_style_index_0_scoped_034b5687_lang = "";
+const CInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-034b5687"]]);
 const __default__$7 = defineComponent({
   name: "PreviewHex"
 });
@@ -1897,11 +1894,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const colorPickerState = inject("colorPickerState");
     const updateColor = inject("updateColor");
     const hexValue = computed(() => {
-      return rgbToHex(
-        colorPickerState.red,
-        colorPickerState.green,
-        colorPickerState.blue
-      );
+      const { isGradient, activePointIndex } = colorPickerState;
+      const activePoint = colorPickerState.points[activePointIndex];
+      if (isGradient) {
+        return rgbToHex(activePoint.red, activePoint.green, activePoint.blue);
+      } else {
+        return rgbToHex(
+          colorPickerState.red,
+          colorPickerState.green,
+          colorPickerState.blue
+        );
+      }
     });
     const changeHex = (event) => {
       let val = event.target.value;
@@ -1936,58 +1939,58 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const colorPickerState = inject("colorPickerState");
     const updateColor = inject("updateColor");
     const RGBValue = computed(() => {
+      const {
+        isGradient,
+        red,
+        green,
+        blue,
+        alpha,
+        points = [],
+        activePointIndex = 0
+      } = colorPickerState;
+      const activePoint = points[activePointIndex];
       let value = 0;
       switch (props.label) {
         case "R":
-          value = colorPickerState.red;
+          value = isGradient ? activePoint.red : red;
           break;
         case "G":
-          value = colorPickerState.green;
+          value = isGradient ? activePoint.green : green;
           break;
         case "B":
-          value = colorPickerState.blue;
+          value = isGradient ? activePoint.blue : blue;
           break;
         case "A":
-          value = ~~(colorPickerState.alpha * 100);
+          value = ~~((isGradient ? activePoint.alpha : alpha) * 100);
           break;
       }
       return value;
     });
     const onInput = (event) => {
       let value = +event.target.value;
-      if (value <= 0) {
+      const { isGradient, points = [], activePointIndex = 0 } = colorPickerState;
+      points[activePointIndex];
+      if (props.label === "A" && value > 100) {
+        value = 100;
+      } else if (value <= 0) {
         value = 0;
       } else if (value > 255) {
         value = 255;
-      } else if (props.label === "A" && value > 100) {
-        value = 100;
       }
       switch (props.label) {
         case "R":
-          colorPickerState.red = value;
+          updateColor({ red: value }, "red");
           break;
         case "G":
-          colorPickerState.green = value;
+          updateColor({ green: value }, "green");
           break;
         case "B":
-          colorPickerState.blue = value;
+          updateColor({ blue: value }, "blue");
+          break;
         case "A":
-          colorPickerState.alpha = value / 100;
+          updateColor({ alpha: value / 100 }, "alpha");
           break;
       }
-      nextTick(() => {
-        const _hex = rgbToHex(
-          colorPickerState.red,
-          colorPickerState.green,
-          colorPickerState.blue
-        );
-        const _rgb = hexToRgb(_hex);
-        if (props.label === "A") {
-          _rgb.alpha = updateColor(_rgb);
-        } else {
-          updateColor(_rgb);
-        }
-      });
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
@@ -2198,33 +2201,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     },
     color: {
       type: Object,
-      default: () => ({ red: 255, green: 0, blue: 0, alpha: 1 })
-    },
-    gradient: {
-      type: Object,
-      default: () => ({
-        type: "linear",
-        degree: 0,
-        points: [
-          {
-            id: v4(),
-            left: 0,
-            red: 0,
-            green: 0,
-            blue: 0,
-            alpha: 1
-          },
-          {
-            id: v4(),
-            left: 100,
-            red: 255,
-            green: 0,
-            blue: 0,
-            alpha: 1
-          }
-        ]
-      })
+      default: (_this) => {
+        if (_this.isGradient) {
+          return {
+            type: "linear",
+            degree: 0,
+            points: [
+              {
+                id: v4(),
+                left: 0,
+                red: 0,
+                green: 0,
+                blue: 0,
+                alpha: 1
+              },
+              {
+                id: v4(),
+                left: 100,
+                red: 255,
+                green: 0,
+                blue: 0,
+                alpha: 1
+              }
+            ]
+          };
+        } else {
+          return { red: 255, green: 0, blue: 0, alpha: 1 };
+        }
+      }
     },
+    // gradient: {
+    //   type: Object as PropType<IGradient>,
+    //   default: () => ({
+    //     type: 'linear',
+    //     degree: 0,
+    //     points: [
+    //       {
+    //         id: uuidv4(),
+    //         left: 0,
+    //         red: 0,
+    //         green: 0,
+    //         blue: 0,
+    //         alpha: 1,
+    //       },
+    //       {
+    //         id: uuidv4(),
+    //         left: 100,
+    //         red: 255,
+    //         green: 0,
+    //         blue: 0,
+    //         alpha: 1,
+    //       },
+    //     ],
+    //   }),
+    // },
     cancelText: {
       type: String,
       default: "Cancel"
@@ -2252,25 +2282,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
   },
   emits: ["change"],
   setup(__props, { expose, emit: emits }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b;
     const props = __props;
+    console.log(props);
+    const pointLen = props.isGradient ? ((_b = (_a = props.color) == null ? void 0 : _a.points) == null ? void 0 : _b.length) || 0 : 0;
     const colorPickerState = reactive({
       isGradient: props.isGradient,
       // 是否是渐变
-      red: props.isGradient ? (_a = props.gradient) == null ? void 0 : _a.points[1].red : (_b = props.color) == null ? void 0 : _b.red,
-      green: props.isGradient ? (_c = props.gradient) == null ? void 0 : _c.points[1].green : (_d = props.color) == null ? void 0 : _d.green,
-      blue: props.isGradient ? (_e = props.gradient) == null ? void 0 : _e.points[1].blue : (_f = props.color) == null ? void 0 : _f.blue,
-      alpha: props.isGradient ? (_g = props.gradient) == null ? void 0 : _g.points[0].alpha : (_h = props.color) == null ? void 0 : _h.alpha,
+      red: props.isGradient ? props.color.points[pointLen - 1].red || 0 : props.color.red || 255,
+      green: props.isGradient ? props.color.points[pointLen - 1].green || 0 : props.color.green || 0,
+      blue: props.isGradient ? props.color.points[pointLen - 1].blue || 0 : props.color.blue || 0,
+      alpha: props.isGradient ? props.color.points[pointLen - 1].alpha : props.color.alpha,
       hue: 0,
       saturation: 100,
+      // 饱和
       value: 100,
       style: "",
       type: "linear",
       degree: 0,
-      activePointIndex: 1,
-      // 因为默认颜色取了默认的1
-      activePoint: cloneDeep((_i = props.gradient) == null ? void 0 : _i.points[0]),
-      points: cloneDeep((_j = props.gradient) == null ? void 0 : _j.points)
+      activePointIndex: pointLen - 1,
+      // 当前渐变点的下标
+      points: props.isGradient ? cloneDeep(props.color.points) : []
+      // 渐变的点
     });
     const updateColor = throttle(
       function({
@@ -2306,7 +2339,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         red = 0,
         green = 0,
         blue = 0,
-        alpha,
+        alpha = 0,
         hue,
         saturation,
         value,
@@ -2314,16 +2347,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         type,
         degree
       } = color;
+      const activePoint = colorPickerState.points[colorPickerState.activePointIndex];
       if (key) {
-        colorPickerState[key] = color[key];
+        if (key === "points" || key === "type" || key === "degree") {
+          colorPickerState[key] = color[key];
+        } else {
+          activePoint[key] = color[key];
+        }
       } else {
-        colorPickerState.red = red;
-        colorPickerState.green = green;
-        colorPickerState.blue = blue;
+        activePoint.red = red;
+        activePoint.green = green;
+        activePoint.blue = blue;
+        colorPickerState.alpha = alpha;
         points && (colorPickerState.points = points);
         type && (colorPickerState.type = type);
         degree && (colorPickerState.degree = degree);
-        alpha && (colorPickerState.alpha = alpha);
         saturation && (colorPickerState.saturation = saturation);
         value && (colorPickerState.value = value);
         hue && (colorPickerState.hue = hue);
@@ -2363,6 +2401,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         colorPickerState.alpha
       );
       colorPickerState.style = style;
+      console.log(colorPickerState);
       !props.showBtn && emits("change", {
         style,
         color: {
diff --git a/lib/dist/color-gradient-picker-vue3.umd.js b/lib/dist/color-gradient-picker-vue3.umd.js
index 9de50be..bb4ac4b 100644
--- a/lib/dist/color-gradient-picker-vue3.umd.js
+++ b/lib/dist/color-gradient-picker-vue3.umd.js
@@ -1 +1 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";function t(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function r(e,r,n,o){if(t(e)&&t(r)&&t(n)){const a={red:0|e,green:0|r,blue:0|n,alpha:0|o};return!0===t(o)&&(a.alpha=0|o),a}}function n(e,t,n,o){let a=t/100*(n/=100);const i=e/60;let l=a*(1-Math.abs(i%2-1)),c=n-a;return a=255*(a+c)|0,l=255*(l+c)|0,c=255*c|0,i>=1&&i<2?r(l,a,c,o):i>=2&&i<3?r(c,a,l,o):i>=3&&i<4?r(c,l,a,o):i>=4&&i<5?r(l,c,a,o):i>=5&&i<=6?r(a,c,l,o):r(a,l,c,o)}function o(e,t,r,o,a,i){e>o&&(e=o),t>r&&(t=r),e<0&&(e=0),t<0&&(t=0);const l=100-100*t/r|0,c=100*e/o|0;return __spreadProps(__spreadValues({},n(a,c,l,i)),{saturation:c,value:l})}function a(e,t,r,o,a){let i=360*e/t|0;return i=i<0?0:i>360?360:i,__spreadProps(__spreadValues({},n(i,r,o,a)),{saturation:r,hue:i})}function i(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function l(e,t,r){let n=e.toString(16),o=t.toString(16),a=r.toString(16);return e<16&&(n=`0${n}`),t<16&&(o=`0${o}`),r<16&&(a=`0${a}`),n+o+a}const c=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function u(e){if(c.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return!1;const t=r(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,8),16)/255||0),n=t&&function({red:e,green:t,blue:r}){let n,o,a,i,l=0;const c=e/255,u=t/255,s=r/255,p=Math.max(c,u,s),d=p-Math.min(c,u,s),f=e=>(p-e)/6/d+.5;return 0===d?(l=0,i=0):(i=d/p,n=f(c),o=f(u),a=f(s),c===p?l=a-o:u===p?l=1/3+n-a:s===p&&(l=2/3+o-n),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(360*l),saturation:Math.round(100*i),value:Math.round(100*p)}}(__spreadValues({},t));return __spreadValues(__spreadValues({},t),n)}return!1}function s(e,t){const r=100*e/t;return r<0?0:r>100?100:r}function p(e,t,r,n){return`rgba(${e}, ${t}, ${r}, ${n})`}function d(e,t,r){let n="";const o=e.slice();return o.sort(((e,t)=>e.left-t.left)),n="linear"===t?`linear-gradient(${r}deg,`:"radial-gradient(",o.forEach(((e,t)=>{n+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==o.length-1&&(n+=",")})),n+=")",n}function f(e,t,r){return function(n){let o=e(n);function a(e){o=t(e,o)||o}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),r&&r(e,o)}),{once:!0})}}const v={class:"picker-area-overlay1 wh-full"},b={class:"picker-area-overlay2 wh-full rounded-8px"},y=e.defineComponent({name:"AreaPicker"}),h=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r},m=h(e.defineComponent(__spreadProps(__spreadValues({},y),{setup(t){const r=e.ref(null),n=e.ref(null),a=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{const{width:e=0,height:t=0}=n.value||{},r=((a.saturation||0)*e/100|0)-6,o=(t-(a.value||0)*t/100|0)-6;return{backgroundColor:`rgb(${a.red}, ${a.green}, ${a.blue})`,left:`${r}px`,top:`${o}px`}})),c=e.computed((()=>{const{red:e=255,green:t=0,blue:r=0}=function(e){let t=1;const r=e/60;let n=t*(1-Math.abs(r%2-1)),o=0,a=0,i=0;return t=255*(t+0)|0,n=255*(n+0)|0,r>=0&&r<1&&(o=0|t,a=0|n,i=0),r>=1&&r<2&&(o=0|n,a=0|t,i=0),r>=2&&r<3&&(o=0,a=0|t,i=0|n),r>=3&&r<4&&(o=0,a=0|n,i=0|t),r>=4&&r<5&&(o=0|n,a=0,i=0|t),r>=5&&r<=6&&(o=0|t,a=0,i=0|n),{red:o,green:a,blue:i}}(a.hue)||{};return{backgroundColor:`rgb(${e}, ${t}, ${r})`}})),u=(e,{startX:t,startY:r,positionX:i,positionY:l})=>{const c=e.pageX-t,u=e.pageY-r,{width:s=0,height:p=0}=n.value||{},d=o(i+=c,l+=u,p,s,a.hue,a.alpha);return{positions:{positionX:i,positionY:l,startX:e.pageX,startY:e.pageY},color:d}},s=f((e=>{if(!n.value)return;const{x:t,y:r}=n.value,{width:l=0,height:c=0}=n.value||{},u=e.pageX,s=e.pageY,p=u-t,d=s-r,f=o(p,d,c,l,a.hue,a.alpha);return i(f),{startX:u,startY:s,positionX:p,positionY:d}}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=u(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=u(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}));return e.watchEffect((()=>{var e;const t=r.value;t&&!(null==(e=n.value)?void 0:e.width)&&(n.value=t.getBoundingClientRect()||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:r,class:"picker-area w-full mb-16px relative rounded-8px",style:e.normalizeStyle(e.unref(c)),onMousedown:n[0]||(n[0]=(...t)=>e.unref(s)&&e.unref(s)(...t))},[e.createElementVNode("div",v,[e.createElementVNode("div",b,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)])])],36))}})),[["__scopeId","data-v-e6e79a9f"]]),g={class:"preview-area mr-8px"},_=e.defineComponent({name:"AreaPreview"}),j=e.defineComponent(__spreadProps(__spreadValues({},_),{setup(t){const r=e.inject("colorPickerState"),n=e.computed((()=>{let e="";return e=r.isGradient?d(r.points,r.type,r.degree):p(r.red,r.green,r.blue,r.alpha),{background:e}}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"border-box w-36px h-36px rounded-8px border-width-1px border-solid border-[#ebedf5]",style:e.normalizeStyle(e.unref(n))},null,4)]))}})),w=e.defineComponent({name:"AreaHue"}),x=h(e.defineComponent(__spreadProps(__spreadValues({},w),{setup(t){const r=e.ref(null),n=e.ref(null),o=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{var e;const t=(null==(e=n.value)?void 0:e.width)||0;return(o.hue||0)*(t-14)/360|0})),c=e.computed((()=>({left:`${l.value}px`}))),u=(e,{startX:t,positionX:r})=>{var i;const l=e.pageX-t,c=(null==(i=n.value)?void 0:i.width)||0,u=a((r+=l)>c?c:r<=0?0:r,c,o.saturation,o.value,o.alpha);return{positions:{positionX:r,startX:e.pageX},color:u}},s=f((e=>{var t,r;const l=(null==(t=n.value)?void 0:t.x)||0,c=e.pageX,u=c-l,s=a(u,(null==(r=n.value)?void 0:r.width)||0,o.saturation,o.value,o.alpha);return i(s),{startX:c,positionX:u}}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=u(e,{startX:t,positionX:r});return i(o),n}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=u(e,{startX:t,positionX:r});return i(o),n}));return e.watchEffect((()=>{var e,t;r.value&&!(null==(e=n.value)?void 0:e.width)&&(n.value=(null==(t=r.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px mb-8px bg-[red] cursor-pointer",onMousedown:n[0]||(n[0]=(...t)=>e.unref(s)&&e.unref(s)(...t))},[e.createElementVNode("div",{ref_key:"hueRef",ref:r,class:"hue-area relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(c))},null,4)],512)],32))}})),[["__scopeId","data-v-366635af"]]),k={class:"alpha-area wh-full rounded-10px"},P=e.defineComponent({name:"AreaAlpha"}),C=h(e.defineComponent(__spreadProps(__spreadValues({},P),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),l=e.computed((()=>{var e;const t=(null==(e=a.value)?void 0:e.width)||0;return r.alpha*(t-14)|0})),c=e.computed((()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${r.red}, ${r.green}, ${r.blue}))`}))),u=e.computed((()=>({left:`${l.value}px`}))),s=(e,{startX:t,positionX:r})=>{var n;const o=i(r+=e.pageX-t,(null==(n=a.value)?void 0:n.width)||0);return{positions:{positionX:r,startX:e.pageX},alpha:o}},p=f((e=>{var t,r;const o=(null==(t=a.value)?void 0:t.x)||0,l=e.pageX,c=(null==(r=a.value)?void 0:r.width)||0;let u=l-o;return n({alpha:i(u,c)},"alpha"),{startX:l,positionX:u}}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=s(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=s(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}));return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px h-14px cursor-pointer",onMousedown:r[0]||(r[0]=(...t)=>e.unref(p)&&e.unref(p)(...t))},[e.createElementVNode("div",{class:"absolute left-0 right-0 top-0 bottom-0",style:e.normalizeStyle(e.unref(c))},null,4),e.createElementVNode("div",k,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"wh-full relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(u))},null,4)],512)])],32))}})),[["__scopeId","data-v-5168a43e"]]);const O="object"==typeof global&&global&&global.Object===Object&&global;var V="object"==typeof self&&self&&self.Object===Object&&self;const B=O||V||Function("return this")();const E=B.Symbol;var X=Object.prototype,S=X.hasOwnProperty,A=X.toString,N=E?E.toStringTag:void 0;var I=Object.prototype.toString;var $="[object Null]",z="[object Undefined]",M=E?E.toStringTag:void 0;function U(e){return null==e?void 0===e?z:$:M&&M in Object(e)?function(e){var t=S.call(e,N),r=e[N];try{e[N]=void 0;var n=!0}catch(a){}var o=A.call(e);return n&&(t?e[N]=r:delete e[N]),o}(e):function(e){return I.call(e)}(e)}function D(e){return null!=e&&"object"==typeof e}var T="[object Symbol]";const F=Array.isArray;var G=/\s/;var R=/^\s+/;function Y(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&G.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}function L(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var W=NaN,q=/^[-+]0x[0-9a-f]+$/i,H=/^0b[01]+$/i,J=/^0o[0-7]+$/i,K=parseInt;function Q(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||D(e)&&U(e)==T}(e))return W;if(L(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=L(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=Y(e);var r=H.test(e);return r||J.test(e)?K(e.slice(2),r?2:8):q.test(e)?W:+e}var Z="[object AsyncFunction]",ee="[object Function]",te="[object GeneratorFunction]",re="[object Proxy]";function ne(e){if(!L(e))return!1;var t=U(e);return t==ee||t==te||t==Z||t==re}const oe=B["__core-js_shared__"];var ae,ie=(ae=/[^.]+$/.exec(oe&&oe.keys&&oe.keys.IE_PROTO||""))?"Symbol(src)_1."+ae:"";var le=Function.prototype.toString;function ce(e){if(null!=e){try{return le.call(e)}catch(t){}try{return e+""}catch(t){}}return""}var ue=/^\[object .+?Constructor\]$/,se=Function.prototype,pe=Object.prototype,de=se.toString,fe=pe.hasOwnProperty,ve=RegExp("^"+de.call(fe).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function be(e){return!(!L(e)||(t=e,ie&&ie in t))&&(ne(e)?ve:ue).test(ce(e));var t}function ye(e,t){var r=function(e,t){return null==e?void 0:e[t]}(e,t);return be(r)?r:void 0}const he=ye(B,"WeakMap");var me=Object.create;const ge=function(){function e(){}return function(t){if(!L(t))return{};if(me)return me(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();const _e=function(){try{var e=ye(Object,"defineProperty");return e({},"",{}),e}catch(t){}}();var je=9007199254740991,we=/^(?:0|[1-9]\d*)$/;function xe(e,t){var r=typeof e;return!!(t=null==t?je:t)&&("number"==r||"symbol"!=r&&we.test(e))&&e>-1&&e%1==0&&e<t}function ke(e,t,r){"__proto__"==t&&_e?_e(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function Pe(e,t){return e===t||e!=e&&t!=t}var Ce=Object.prototype.hasOwnProperty;function Oe(e,t,r){var n=e[t];Ce.call(e,t)&&Pe(n,r)&&(void 0!==r||t in e)||ke(e,t,r)}function Ve(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var l=t[a],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),o?ke(r,l,c):Oe(r,l,c)}return r}var Be=9007199254740991;function Ee(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=Be}function Xe(e){return null!=e&&Ee(e.length)&&!ne(e)}var Se=Object.prototype;function Ae(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||Se)}function Ne(e){return D(e)&&"[object Arguments]"==U(e)}var Ie=Object.prototype,$e=Ie.hasOwnProperty,ze=Ie.propertyIsEnumerable,Me=Ne(function(){return arguments}())?Ne:function(e){return D(e)&&$e.call(e,"callee")&&!ze.call(e,"callee")};const Ue=Me;var De="object"==typeof exports&&exports&&!exports.nodeType&&exports,Te=De&&"object"==typeof module&&module&&!module.nodeType&&module,Fe=Te&&Te.exports===De?B.Buffer:void 0;const Ge=(Fe?Fe.isBuffer:void 0)||function(){return!1};var Re={};function Ye(e){return function(t){return e(t)}}Re["[object Float32Array]"]=Re["[object Float64Array]"]=Re["[object Int8Array]"]=Re["[object Int16Array]"]=Re["[object Int32Array]"]=Re["[object Uint8Array]"]=Re["[object Uint8ClampedArray]"]=Re["[object Uint16Array]"]=Re["[object Uint32Array]"]=!0,Re["[object Arguments]"]=Re["[object Array]"]=Re["[object ArrayBuffer]"]=Re["[object Boolean]"]=Re["[object DataView]"]=Re["[object Date]"]=Re["[object Error]"]=Re["[object Function]"]=Re["[object Map]"]=Re["[object Number]"]=Re["[object Object]"]=Re["[object RegExp]"]=Re["[object Set]"]=Re["[object String]"]=Re["[object WeakMap]"]=!1;var Le="object"==typeof exports&&exports&&!exports.nodeType&&exports,We=Le&&"object"==typeof module&&module&&!module.nodeType&&module,qe=We&&We.exports===Le&&O.process;const He=function(){try{var e=We&&We.require&&We.require("util").types;return e||qe&&qe.binding&&qe.binding("util")}catch(t){}}();var Je=He&&He.isTypedArray;const Ke=Je?Ye(Je):function(e){return D(e)&&Ee(e.length)&&!!Re[U(e)]};var Qe=Object.prototype.hasOwnProperty;function Ze(e,t){var r=F(e),n=!r&&Ue(e),o=!r&&!n&&Ge(e),a=!r&&!n&&!o&&Ke(e),i=r||n||o||a,l=i?function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}(e.length,String):[],c=l.length;for(var u in e)!t&&!Qe.call(e,u)||i&&("length"==u||o&&("offset"==u||"parent"==u)||a&&("buffer"==u||"byteLength"==u||"byteOffset"==u)||xe(u,c))||l.push(u);return l}function et(e,t){return function(r){return e(t(r))}}const tt=et(Object.keys,Object);var rt=Object.prototype.hasOwnProperty;function nt(e){return Xe(e)?Ze(e):function(e){if(!Ae(e))return tt(e);var t=[];for(var r in Object(e))rt.call(e,r)&&"constructor"!=r&&t.push(r);return t}(e)}var ot=Object.prototype.hasOwnProperty;function at(e){if(!L(e))return function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}(e);var t=Ae(e),r=[];for(var n in e)("constructor"!=n||!t&&ot.call(e,n))&&r.push(n);return r}function it(e){return Xe(e)?Ze(e,!0):at(e)}const lt=ye(Object,"create");var ct=Object.prototype.hasOwnProperty;var ut=Object.prototype.hasOwnProperty;function st(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function pt(e,t){for(var r=e.length;r--;)if(Pe(e[r][0],t))return r;return-1}st.prototype.clear=function(){this.__data__=lt?lt(null):{},this.size=0},st.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},st.prototype.get=function(e){var t=this.__data__;if(lt){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return ct.call(t,e)?t[e]:void 0},st.prototype.has=function(e){var t=this.__data__;return lt?void 0!==t[e]:ut.call(t,e)},st.prototype.set=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=lt&&void 0===t?"__lodash_hash_undefined__":t,this};var dt=Array.prototype.splice;function ft(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}ft.prototype.clear=function(){this.__data__=[],this.size=0},ft.prototype.delete=function(e){var t=this.__data__,r=pt(t,e);return!(r<0)&&(r==t.length-1?t.pop():dt.call(t,r,1),--this.size,!0)},ft.prototype.get=function(e){var t=this.__data__,r=pt(t,e);return r<0?void 0:t[r][1]},ft.prototype.has=function(e){return pt(this.__data__,e)>-1},ft.prototype.set=function(e,t){var r=this.__data__,n=pt(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};const vt=ye(B,"Map");function bt(e,t){var r,n,o=e.__data__;return("string"==(n=typeof(r=t))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof t?"string":"hash"]:o.map}function yt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function ht(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e}yt.prototype.clear=function(){this.size=0,this.__data__={hash:new st,map:new(vt||ft),string:new st}},yt.prototype.delete=function(e){var t=bt(this,e).delete(e);return this.size-=t?1:0,t},yt.prototype.get=function(e){return bt(this,e).get(e)},yt.prototype.has=function(e){return bt(this,e).has(e)},yt.prototype.set=function(e,t){var r=bt(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};const mt=et(Object.getPrototypeOf,Object);function gt(e){var t=this.__data__=new ft(e);this.size=t.size}gt.prototype.clear=function(){this.__data__=new ft,this.size=0},gt.prototype.delete=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r},gt.prototype.get=function(e){return this.__data__.get(e)},gt.prototype.has=function(e){return this.__data__.has(e)},gt.prototype.set=function(e,t){var r=this.__data__;if(r instanceof ft){var n=r.__data__;if(!vt||n.length<199)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new yt(n)}return r.set(e,t),this.size=r.size,this};var _t="object"==typeof exports&&exports&&!exports.nodeType&&exports,jt=_t&&"object"==typeof module&&module&&!module.nodeType&&module,wt=jt&&jt.exports===_t?B.Buffer:void 0,xt=wt?wt.allocUnsafe:void 0;function kt(){return[]}var Pt=Object.prototype.propertyIsEnumerable,Ct=Object.getOwnPropertySymbols;const Ot=Ct?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a}(Ct(e),(function(t){return Pt.call(e,t)})))}:kt;const Vt=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)ht(t,Ot(e)),e=mt(e);return t}:kt;function Bt(e,t,r){var n=t(e);return F(e)?n:ht(n,r(e))}function Et(e){return Bt(e,nt,Ot)}function Xt(e){return Bt(e,it,Vt)}const St=ye(B,"DataView");const At=ye(B,"Promise");const Nt=ye(B,"Set");var It="[object Map]",$t="[object Promise]",zt="[object Set]",Mt="[object WeakMap]",Ut="[object DataView]",Dt=ce(St),Tt=ce(vt),Ft=ce(At),Gt=ce(Nt),Rt=ce(he),Yt=U;(St&&Yt(new St(new ArrayBuffer(1)))!=Ut||vt&&Yt(new vt)!=It||At&&Yt(At.resolve())!=$t||Nt&&Yt(new Nt)!=zt||he&&Yt(new he)!=Mt)&&(Yt=function(e){var t=U(e),r="[object Object]"==t?e.constructor:void 0,n=r?ce(r):"";if(n)switch(n){case Dt:return Ut;case Tt:return It;case Ft:return $t;case Gt:return zt;case Rt:return Mt}return t});const Lt=Yt;var Wt=Object.prototype.hasOwnProperty;const qt=B.Uint8Array;function Ht(e){var t=new e.constructor(e.byteLength);return new qt(t).set(new qt(e)),t}var Jt=/\w*$/;var Kt=E?E.prototype:void 0,Qt=Kt?Kt.valueOf:void 0;var Zt="[object Boolean]",er="[object Date]",tr="[object Map]",rr="[object Number]",nr="[object RegExp]",or="[object Set]",ar="[object String]",ir="[object Symbol]",lr="[object ArrayBuffer]",cr="[object DataView]",ur="[object Float32Array]",sr="[object Float64Array]",pr="[object Int8Array]",dr="[object Int16Array]",fr="[object Int32Array]",vr="[object Uint8Array]",br="[object Uint8ClampedArray]",yr="[object Uint16Array]",hr="[object Uint32Array]";function mr(e,t,r){var n,o,a,i=e.constructor;switch(t){case lr:return Ht(e);case Zt:case er:return new i(+e);case cr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}(e,r);case ur:case sr:case pr:case dr:case fr:case vr:case br:case yr:case hr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}(e,r);case tr:return new i;case rr:case ar:return new i(e);case nr:return(a=new(o=e).constructor(o.source,Jt.exec(o))).lastIndex=o.lastIndex,a;case or:return new i;case ir:return n=e,Qt?Object(Qt.call(n)):{}}}var gr=He&&He.isMap;const _r=gr?Ye(gr):function(e){return D(e)&&"[object Map]"==Lt(e)};var jr=He&&He.isSet;const wr=jr?Ye(jr):function(e){return D(e)&&"[object Set]"==Lt(e)};var xr=1,kr=2,Pr=4,Cr="[object Arguments]",Or="[object Function]",Vr="[object GeneratorFunction]",Br="[object Object]",Er={};function Xr(e,t,r,n,o,a){var i,l=t&xr,c=t&kr,u=t&Pr;if(r&&(i=o?r(e,n,o,a):r(e)),void 0!==i)return i;if(!L(e))return e;var s=F(e);if(s){if(i=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&Wt.call(e,"index")&&(r.index=e.index,r.input=e.input),r}(e),!l)return function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}(e,i)}else{var p=Lt(e),d=p==Or||p==Vr;if(Ge(e))return function(e,t){if(t)return e.slice();var r=e.length,n=xt?xt(r):new e.constructor(r);return e.copy(n),n}(e,l);if(p==Br||p==Cr||d&&!o){if(i=c||d?{}:function(e){return"function"!=typeof e.constructor||Ae(e)?{}:ge(mt(e))}(e),!l)return c?function(e,t){return Ve(e,Vt(e),t)}(e,function(e,t){return e&&Ve(t,it(t),e)}(i,e)):function(e,t){return Ve(e,Ot(e),t)}(e,function(e,t){return e&&Ve(t,nt(t),e)}(i,e))}else{if(!Er[p])return o?e:{};i=mr(e,p,l)}}a||(a=new gt);var f=a.get(e);if(f)return f;a.set(e,i),wr(e)?e.forEach((function(n){i.add(Xr(n,t,r,n,e,a))})):_r(e)&&e.forEach((function(n,o){i.set(o,Xr(n,t,r,o,e,a))}));var v=s?void 0:(u?c?Xt:Et:c?it:nt)(e);return function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););}(v||e,(function(n,o){v&&(n=e[o=n]),Oe(i,o,Xr(n,t,r,o,e,a))})),i}Er[Cr]=Er["[object Array]"]=Er["[object ArrayBuffer]"]=Er["[object DataView]"]=Er["[object Boolean]"]=Er["[object Date]"]=Er["[object Float32Array]"]=Er["[object Float64Array]"]=Er["[object Int8Array]"]=Er["[object Int16Array]"]=Er["[object Int32Array]"]=Er["[object Map]"]=Er["[object Number]"]=Er[Br]=Er["[object RegExp]"]=Er["[object Set]"]=Er["[object String]"]=Er["[object Symbol]"]=Er["[object Uint8Array]"]=Er["[object Uint8ClampedArray]"]=Er["[object Uint16Array]"]=Er["[object Uint32Array]"]=!0,Er["[object Error]"]=Er[Or]=Er["[object WeakMap]"]=!1;function Sr(e){return Xr(e,5)}const Ar=function(){return B.Date.now()};var Nr="Expected a function",Ir=Math.max,$r=Math.min;function zr(e,t,r){var n,o,a,i,l,c,u=0,s=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(Nr);function f(t){var r=n,a=o;return n=o=void 0,u=t,i=e.apply(a,r)}function v(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-u>=a}function b(){var e=Ar();if(v(e))return y(e);l=setTimeout(b,function(e){var r=t-(e-c);return p?$r(r,a-(e-u)):r}(e))}function y(e){return l=void 0,d&&n?f(e):(n=o=void 0,i)}function h(){var e=Ar(),r=v(e);if(n=arguments,o=this,c=e,r){if(void 0===l)return function(e){return u=e,l=setTimeout(b,t),s?f(e):i}(c);if(p)return clearTimeout(l),l=setTimeout(b,t),f(c)}return void 0===l&&(l=setTimeout(b,t)),i}return t=Q(t)||0,L(r)&&(s=!!r.leading,a=(p="maxWait"in r)?Ir(Q(r.maxWait)||0,t):a,d="trailing"in r?!!r.trailing:d),h.cancel=function(){void 0!==l&&clearTimeout(l),u=0,n=c=o=l=void 0},h.flush=function(){return void 0===l?i:y(Ar())},h}const Mr=["onDblclick"],Ur=e.defineComponent({name:"AreaGradientPoint"}),Dr=e.defineComponent(__spreadProps(__spreadValues({},Ur),{props:{index:{type:Number,required:!0},point:{type:Object,required:!0},width:{type:Number,default:0},positions:{type:Object}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>n.activePointIndex===r.index?" active":"")),i=e.computed((()=>({left:r.point.left*((r.width-14)/100)+"px"}))),l=e=>{n.points[r.index].left=e,o({type:n.type},"type")},c=(e,{startX:t,offsetX:n})=>{const o=s(n+=e.pageX-t,r.width);return{positions:{offsetX:n,startX:e.pageX},left:o}},u=f((e=>{const t=e.pageX,o=e.pageY,a=t-(r.positions.x||0);return n.activePointIndex=r.index,{startX:t,startY:o,offsetX:a}}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n})),p=()=>{let e=Sr(n.points);if(e.length<=2)return;const t=r.index;e=null==e?void 0:e.filter((e=>e.id!==r.point.id)),n.activePointIndex=0===t?1:t-1,o({points:e},"points")};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(a)}`),style:e.normalizeStyle(e.unref(i)),onMousedown:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(u)&&e.unref(u)(...t)),["stop"])),onDblclick:e.withModifiers(p,["stop"]),onClick:o[1]||(o[1]=e.withModifiers((()=>e.unref(n).activePointIndex=r.index),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(a)}`)},null,2)],46,Mr))}}));let Tr;const Fr=new Uint8Array(16);function Gr(){if(!Tr&&(Tr="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Tr))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Tr(Fr)}const Rr=[];for(let En=0;En<256;++En)Rr.push((En+256).toString(16).slice(1));const Yr={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Lr(e,t,r){if(Yr.randomUUID&&!t&&!e)return Yr.randomUUID();const n=(e=e||{}).random||(e.rng||Gr)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return Rr[e[t+0]]+Rr[e[t+1]]+Rr[e[t+2]]+Rr[e[t+3]]+"-"+Rr[e[t+4]]+Rr[e[t+5]]+"-"+Rr[e[t+6]]+Rr[e[t+7]]+"-"+Rr[e[t+8]]+Rr[e[t+9]]+"-"+Rr[e[t+10]]+Rr[e[t+11]]+Rr[e[t+12]]+Rr[e[t+13]]+Rr[e[t+14]]+Rr[e[t+15]]}(n)}const Wr=e.defineComponent({name:"AreaGradientPoints"}),qr=e.defineComponent(__spreadProps(__spreadValues({},Wr),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),i=e.computed((()=>({background:d(r.points,"linear",90)}))),l=e=>{const{x:t=0,width:o=0}=a.value||{},i=s(e.pageX-t,o),{red:l,green:c,blue:u,alpha:p}=r,d=Sr(r.points),f={id:Lr(),red:l,green:c,blue:u,alpha:p,left:i};null==d||d.push(f),r.activePointIndex=d.findIndex((e=>e.id===f.id)),n({points:d},"points")};return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient border-box w-full h-14px relative cursor-pointer rounded-10px mb-8px",style:e.normalizeStyle(e.unref(i)),onClick:l},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:o,class:"wh-full relative"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).points,((t,r)=>{var n;return e.openBlock(),e.createBlock(Dr,{key:t.id,index:r,point:t,positions:e.unref(a),width:null==(n=e.unref(a))?void 0:n.width},null,8,["index","point","positions","width"])})),128))],512)],4))}})),Hr={class:"flex flex-col px-16px"},Jr={class:"flex pb-16px"},Kr={class:"flex flex-col flex-1"},Qr=e.defineComponent({name:"Area"}),Zr=e.defineComponent(__spreadProps(__spreadValues({},Qr),{setup(t){const r=e.inject("colorPickerState");return(t,n)=>(e.openBlock(),e.createElementBlock("div",Hr,[e.createVNode(m),e.unref(r).isGradient?(e.openBlock(),e.createBlock(qr,{key:0})):e.createCommentVNode("",!0),e.createElementVNode("div",Jr,[e.createVNode(j),e.createElementVNode("div",Kr,[e.createVNode(x),e.createVNode(C)])])]))}})),en={class:"flex items-center relative w-full rounded-6px text-[#28314d]"},tn=["maxlength","type"],rn={class:"text-12px lining-15px font-bold mt-6px mb-0 text-[#1f2667]"},nn=e.defineComponent({name:"Input"}),on=h(e.defineComponent(__spreadProps(__spreadValues({},nn),{props:{value:{default:""},label:{default:""},classes:{default:""},maxLen:{default:"3"},type:{default:"text"}},emits:["input","blur","focus","update:value"],setup(t,{emit:r}){const n=t,o=e.computed({get:()=>n.value,set:e=>{r("update:value",e)}}),a=e=>{r("input",e)},i=()=>{r("blur")},l=()=>{r("focus")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-shrink-0 items-center flex-col",n.classes])},[e.createElementVNode("div",en,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=t=>e.isRef(o)?o.value=t:null),class:"w-full outline-0 text-[#1f2667] text-center font-bold text-12px",maxlength:t.maxLen,type:n.type,onFocus:l,onBlur:i,onInput:a},null,40,tn),[[e.vModelDynamic,e.unref(o),void 0,{trim:!0}]])]),e.createElementVNode("div",rn,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-b4af7105"]]),an=e.defineComponent({name:"PreviewHex"}),ln=e.defineComponent(__spreadProps(__spreadValues({},an),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>l(r.red,r.green,r.blue))),a=e=>{let t=e.target.value;if(!t&&0!==t)return;const r=u(t);r&&n(r)};return(t,r)=>(e.openBlock(),e.createBlock(on,{value:e.unref(o),label:"Hex","max-len":"7",classes:"hex mr-8px",onInput:a},null,8,["value"]))}})),cn=e.defineComponent({name:"PreviewRGBItem"}),un=e.defineComponent(__spreadProps(__spreadValues({},cn),{props:{type:{default:"text"},label:{default:""}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>{let e=0;switch(r.label){case"R":e=n.red;break;case"G":e=n.green;break;case"B":e=n.blue;break;case"A":e=~~(100*n.alpha)}return e})),i=t=>{let a=+t.target.value;switch(a<=0?a=0:a>255?a=255:"A"===r.label&&a>100&&(a=100),r.label){case"R":n.red=a;break;case"G":n.green=a;break;case"B":n.blue=a;case"A":n.alpha=a/100}e.nextTick((()=>{const e=u(l(n.red,n.green,n.blue));"A"===r.label?e.alpha=o(e):o(e)}))};return(t,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(on,{value:e.unref(a),label:r.label,type:r.type,classes:"A"!==r.label?"mr-8px":"",onInput:i},null,8,["value","label","type","classes"])]))}})),sn=e.defineComponent({name:"PreviewRGB"}),pn=e.defineComponent(__spreadProps(__spreadValues({},sn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(un,{type:"number",label:"R"}),e.createVNode(un,{type:"number",label:"G"}),e.createVNode(un,{type:"number",label:"B"}),e.createVNode(un,{type:"number",label:"A"})],64))})),dn={class:"color-preview-area mb-8px px-16px"},fn={class:"w-full flex justify-between"},vn=e.defineComponent({name:"Preview"}),bn=e.defineComponent(__spreadProps(__spreadValues({},vn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",dn,[e.createElementVNode("div",fn,[e.createVNode(ln),e.createVNode(pn)])]))})),yn=e.defineComponent({name:"Solid"}),hn=e.defineComponent(__spreadProps(__spreadValues({},yn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Zr),e.createVNode(bn)],64))})),mn={class:"gradient-controls border-box flex justify-between items-center w-full mb-8px px-16px"},gn={class:"flex flex-1"},_n={key:0,class:"relative mr-24px"},jn=[(t=>(e.pushScopeId("data-v-4e21238c"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)))],wn={class:"gradient-degree-value flex justify-center items-center"},xn=e.defineComponent({name:"GradientControls"}),kn=h(e.defineComponent(__spreadProps(__spreadValues({},xn),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>r.type)),a=e.computed((()=>r.degree)),i=e=>{n({type:e},"type")},l=e.ref(!0),c=()=>{if(l.value)return void(l.value=!1);let e=(r.degree||0)+45;e>=360&&(e=0),n({degree:~~e},"degree")},u=e.computed((()=>({transform:`rotate(${r.degree}deg)`}))),s=f((e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}}),((e,{centerX:t,centerY:r})=>{l.value=!0;const o=function(e,t,r,n){return Math.atan2(e-r,t-n)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n({degree:~~o},"degree")}),(e=>{const t=e.target.classList;l.value=!1,!t.contains("gradient-degrees")&&t.contains("icon-rotate")}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",mn,[e.createElementVNode("div",gn,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===e.unref(o)?"active":"")),onClick:r[0]||(r[0]=e=>i("linear"))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===e.unref(o)?"active":"")),onClick:r[1]||(r[1]=e=>i("radial"))},null,2)]),"linear"===e.unref(o)?(e.openBlock(),e.createElementBlock("div",_n,[e.createElementVNode("div",{class:"gradient-degrees cursor-pointer flex justify-center items-center",onMousedown:r[2]||(r[2]=(...t)=>e.unref(s)&&e.unref(s)(...t)),onClick:c},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(u))},jn,4)],32),e.createElementVNode("div",wn,[e.createElementVNode("p",null,e.toDisplayString(e.unref(a))+"°",1)])])):e.createCommentVNode("",!0)]))}})),[["__scopeId","data-v-4e21238c"]]),Pn=e.defineComponent({name:"Gradient"}),Cn=e.defineComponent(__spreadProps(__spreadValues({},Pn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(kn),e.createVNode(Zr),e.createVNode(bn)],64))})),On={class:"picker-color-ui border-box m-8px bg-[#fff] flex flex-col slelect-none"},Vn={key:2,class:"btns flex justify-end items-center select-none"},Bn=e.defineComponent({name:"ColorPicker"});return e.defineComponent(__spreadProps(__spreadValues({},Bn),{props:{isGradient:{type:Boolean,default:!1},showBtn:{type:Boolean,default:!1},color:{type:Object,default:()=>({red:255,green:0,blue:0,alpha:1})},gradient:{type:Object,default:()=>({type:"linear",degree:0,points:[{id:Lr(),left:0,red:0,green:0,blue:0,alpha:1},{id:Lr(),left:100,red:255,green:0,blue:0,alpha:1}]})},cancelText:{type:String,default:"Cancel"},cancelColor:{type:String,default:"#333"},cancelBg:{type:String,default:"#fff"},confirmText:{type:String,default:"Confirm"},confirmColor:{type:String,defualt:"#333"},confirmBg:{type:String,defualt:"#fff"}},emits:["change"],setup(t,{expose:r,emit:n}){var o,a,i,l,c,u,s,f,v,b;const y=t,h=e.reactive({isGradient:y.isGradient,red:y.isGradient?null==(o=y.gradient)?void 0:o.points[1].red:null==(a=y.color)?void 0:a.red,green:y.isGradient?null==(i=y.gradient)?void 0:i.points[1].green:null==(l=y.color)?void 0:l.green,blue:y.isGradient?null==(c=y.gradient)?void 0:c.points[1].blue:null==(u=y.color)?void 0:u.blue,alpha:y.isGradient?null==(s=y.gradient)?void 0:s.points[0].alpha:null==(f=y.color)?void 0:f.alpha,hue:0,saturation:100,value:100,style:"",type:"linear",degree:0,activePointIndex:1,activePoint:Sr(null==(v=y.gradient)?void 0:v.points[0]),points:Sr(null==(b=y.gradient)?void 0:b.points)}),m=function(e,t,r){var n=!0,o=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return L(r)&&(n="leading"in r?!!r.leading:n,o="trailing"in r?!!r.trailing:o),zr(e,t,{leading:n,maxWait:t,trailing:o})}((function({red:e,green:t,blue:r,alpha:o,hue:a,saturation:i,value:l,points:c,type:u,degree:s},f){const v={red:e,green:t,blue:r,alpha:o,hue:a,saturation:i,value:l,points:c,type:u,degree:s};y.isGradient?function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:i,hue:l,saturation:c,value:u,points:s,type:p,degree:f}=e;t?h[t]=e[t]:(h.red=r,h.green=o,h.blue=a,s&&(h.points=s),p&&(h.type=p),f&&(h.degree=f),i&&(h.alpha=i),c&&(h.saturation=c),u&&(h.value=u),l&&(h.hue=l));const v=d(h.points,h.type,h.degree);h.style=v,!y.showBtn&&n("change",{style:h.style,gradient:{type:h.type,degree:h.degree,points:h.points}})}(v,f):function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:i,hue:l,saturation:c,value:u}=e;t?h[t]=e[t]:(h.red=r,h.green=o,h.blue=a,i&&(h.alpha=i),c&&(h.saturation=c),u&&(h.value=u),l&&(h.hue=l));const s=p(h.red,h.green,h.blue,h.alpha);h.style=s,!y.showBtn&&n("change",{style:s,color:{red:h.red,green:h.green,blue:h.blue,hue:h.hue,alpha:h.alpha}})}(v,f)}),y.showBtn?100:150);const g=e=>{e&&"function"==typeof e&&e()},_=e=>{const{isGradient:t,style:r,type:o,degree:a,points:i,red:l,green:c,blue:u,alpha:s,hue:p}=h;n("change",t?{style:r,gradient:{type:o,degree:a,points:i}}:{style:r,color:{red:l,green:c,blue:u,hue:p,alpha:s}}),e&&"function"==typeof e&&e()};return e.provide("colorPickerState",h),e.provide("updateColor",m),r({onClose:g,onConfirm:_}),(r,n)=>(e.openBlock(),e.createElementBlock("div",On,[y.isGradient?(e.openBlock(),e.createBlock(Cn,{key:0})):(e.openBlock(),e.createBlock(hn,{key:1})),t.showBtn?(e.openBlock(),e.createElementBlock("div",Vn,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.cancelColor,backgroundColor:y.cancelBg}),onClick:g},e.toDisplayString(y.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:y.confirmColor,backgroundColor:y.confirmBg}),onClick:_},e.toDisplayString(y.confirmText),5)])):e.createCommentVNode("",!0)]))}}))}));
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,r)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,__spreadValues=(e,t)=>{for(var r in t||(t={}))__hasOwnProp.call(t,r)&&__defNormalProp(e,r,t[r]);if(__getOwnPropSymbols)for(var r of __getOwnPropSymbols(t))__propIsEnum.call(t,r)&&__defNormalProp(e,r,t[r]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t));!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["color-gradient-picker-vue3"]=t(e.Vue)}(this,(function(e){"use strict";function t(e){return"number"==typeof e&&!1===Number.isNaN(e)&&e>=0&&e<=255}function r(e,r,n,o){if(t(e)&&t(r)&&t(n)){const a={red:0|e,green:0|r,blue:0|n,alpha:0|o};return!0===t(o)&&(a.alpha=0|o),a}}function n(e,t,n,o){let a=t/100*(n/=100);const i=e/60;let l=a*(1-Math.abs(i%2-1)),c=n-a;return a=255*(a+c)|0,l=255*(l+c)|0,c=255*c|0,i>=1&&i<2?r(l,a,c,o):i>=2&&i<3?r(c,a,l,o):i>=3&&i<4?r(c,l,a,o):i>=4&&i<5?r(l,c,a,o):i>=5&&i<=6?r(a,c,l,o):r(a,l,c,o)}function o(e,t,r,o,a,i){e>o&&(e=o),t>r&&(t=r),e<0&&(e=0),t<0&&(t=0);const l=100-100*t/r|0,c=100*e/o|0;return __spreadProps(__spreadValues({},n(a,c,l,i)),{saturation:c,value:l})}function a(e,t,r,o,a){let i=360*e/t|0;return i=i<0?0:i>360?360:i,__spreadProps(__spreadValues({},n(i,r,o,a)),{saturation:r,hue:i})}function i(e,t){return(e=Number((e/t).toFixed(2)))>1?1:e<0?0:e}function l(e,t,r){let n=e.toString(16),o=t.toString(16),a=r.toString(16);return e<16&&(n=`0${n}`),t<16&&(o=`0${o}`),r<16&&(a=`0${a}`),n+o+a}const c=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function s(e){if(c.test(e)){if("#"===e[0]&&(e=e.slice(1,e.length)),e.length<6)return!1;const t=r(parseInt(e.substring(0,2),16)||0,parseInt(e.substring(2,4),16)||0,parseInt(e.substring(4,6),16)||0,parseInt(e.substring(6,8),16)/255||0),n=t&&function({red:e,green:t,blue:r}){let n,o,a,i,l=0;const c=e/255,s=t/255,u=r/255,p=Math.max(c,s,u),d=p-Math.min(c,s,u),f=e=>(p-e)/6/d+.5;return 0===d?(l=0,i=0):(i=d/p,n=f(c),o=f(s),a=f(u),c===p?l=a-o:s===p?l=1/3+n-a:u===p&&(l=2/3+o-n),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(360*l),saturation:Math.round(100*i),value:Math.round(100*p)}}(__spreadValues({},t));return __spreadValues(__spreadValues({},t),n)}return!1}function u(e,t){const r=100*e/t;return r<0?0:r>100?100:r}function p(e,t,r,n){return`rgba(${e}, ${t}, ${r}, ${n})`}function d(e,t,r){let n="";const o=e.slice();return o.sort(((e,t)=>e.left-t.left)),n="linear"===t?`linear-gradient(${r}deg,`:"radial-gradient(",o.forEach(((e,t)=>{n+=`rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha}) ${e.left}%`,t!==o.length-1&&(n+=",")})),n+=")",n}function f(e,t,r){return function(n){let o=e(n);function a(e){o=t(e,o)||o}window.addEventListener("mousemove",a),window.addEventListener("mouseup",(e=>{window.removeEventListener("mousemove",a),r&&r(e,o)}),{once:!0})}}const v={class:"picker-area-overlay1 wh-full"},b={class:"picker-area-overlay2 wh-full rounded-8px"},y=e.defineComponent({name:"AreaPicker"}),h=(e,t)=>{const r=e.__vccOpts||e;for(const[n,o]of t)r[n]=o;return r},m=h(e.defineComponent(__spreadProps(__spreadValues({},y),{setup(t){const r=e.ref(null),n=e.ref(null),a=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{const{width:e=0,height:t=0}=n.value||{},{saturation:r=100,value:o=100,isGradient:i,activePointIndex:l}=a,c=(r*e/100|0)-6,s=(t-o*t/100|0)-6,u=a.points[l||0];return{backgroundColor:`rgb(${i?null==u?void 0:u.red:a.red}, ${i?null==u?void 0:u.green:a.green}, ${i?null==u?void 0:u.blue:a.blue})`,left:`${c}px`,top:`${s}px`}})),c=e.computed((()=>{const{isGradient:e,red:t,green:r,blue:n,activePointIndex:o=0,points:i=[]}=a;if(e){const e=i[o];return{backgroundColor:`rgb(${e.red}, ${e.green}, ${e.blue})`}}return{backgroundColor:`rgb(${t}, ${r}, ${n})`}})),s=(e,{startX:t,startY:r,positionX:i,positionY:l})=>{const c=e.pageX-t,s=e.pageY-r,{width:u=0,height:p=0}=n.value||{},d=o(i+=c,l+=s,p,u,a.hue,a.alpha);return{positions:{positionX:i,positionY:l,startX:e.pageX,startY:e.pageY},color:d}},u=f((e=>{if(!n.value)return;const{x:t,y:r}=n.value,{width:l=0,height:c=0}=n.value||{},s=e.pageX,u=e.pageY,p=s-t,d=u-r,f=o(p,d,c,l,a.hue,a.alpha);return i(f),{startX:s,startY:u,positionX:p,positionY:d}}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}),((e,{startX:t,startY:r,positionX:n,positionY:o})=>{const{positions:a,color:l}=s(e,{startX:t,startY:r,positionX:n,positionY:o});return i(l),a}));return e.watchEffect((()=>{var e;const t=r.value;t&&!(null==(e=n.value)?void 0:e.width)&&(n.value=t.getBoundingClientRect()||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"pickerAreaRef",ref:r,class:"picker-area w-full mb-16px relative rounded-8px",style:e.normalizeStyle(e.unref(c)),onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",v,[e.createElementVNode("div",b,[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(l))},null,4)])])],36))}})),[["__scopeId","data-v-2e8391c9"]]),g={class:"preview-area mr-8px"},_=e.defineComponent({name:"AreaPreview"}),j=e.defineComponent(__spreadProps(__spreadValues({},_),{setup(t){const r=e.inject("colorPickerState"),n=e.computed((()=>{let e="";return e=r.isGradient?d(r.points,r.type,r.degree):p(r.red,r.green,r.blue,r.alpha),{background:e}}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",{class:"border-box w-36px h-36px rounded-8px border-width-1px border-solid border-[#ebedf5]",style:e.normalizeStyle(e.unref(n))},null,4)]))}})),x=e.defineComponent({name:"AreaHue"}),w=h(e.defineComponent(__spreadProps(__spreadValues({},x),{setup(t){const r=e.ref(null),n=e.ref(null),o=e.inject("colorPickerState"),i=e.inject("updateColor"),l=e.computed((()=>{var e;const t=(null==(e=n.value)?void 0:e.width)||0;return(o.hue||0)*(t-14)/360|0})),c=e.computed((()=>({left:`${l.value}px`}))),s=(e,{startX:t,positionX:r})=>{var i;const l=e.pageX-t,c=(null==(i=n.value)?void 0:i.width)||0,s=a((r+=l)>c?c:r<=0?0:r,c,o.saturation,o.value,o.alpha);return{positions:{positionX:r,startX:e.pageX},color:s}},u=f((e=>{var t,r;const l=(null==(t=n.value)?void 0:t.x)||0,c=e.pageX,s=c-l,u=a(s,(null==(r=n.value)?void 0:r.width)||0,o.saturation,o.value,o.alpha);return i(u),{startX:c,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}),((e,{startX:t,positionX:r})=>{const{positions:n,color:o}=s(e,{startX:t,positionX:r});return i(o),n}));return e.watchEffect((()=>{var e,t;r.value&&!(null==(e=n.value)?void 0:e.width)&&(n.value=(null==(t=r.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px mb-8px bg-[red] cursor-pointer",onMousedown:n[0]||(n[0]=(...t)=>e.unref(u)&&e.unref(u)(...t))},[e.createElementVNode("div",{ref_key:"hueRef",ref:r,class:"hue-area relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(c))},null,4)],512)],32))}})),[["__scopeId","data-v-7cd4331a"]]),k={class:"alpha-area wh-full rounded-10px"},P=e.defineComponent({name:"AreaAlpha"}),C=h(e.defineComponent(__spreadProps(__spreadValues({},P),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.ref(null),a=e.ref(null),l=e.computed((()=>{var e;const{isGradient:t,alpha:n,activePointIndex:o=0,points:i=[]}=r,l=(null==(e=a.value)?void 0:e.width)||0;if(t){return i[o].alpha*(l-14)|0}return n*(l-14)|0})),c=e.computed((()=>{const{isGradient:e,red:t,green:n,blue:o,activePointIndex:a=0,points:i=[]}=r;if(e){const e=i[a];return{background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${e.red}, ${e.green}, ${e.blue}))`}}return{background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${t}, ${n}, ${o}))`}})),s=e.computed((()=>({left:`${l.value}px`}))),u=(e,{startX:t,positionX:r})=>{var n;const o=i(r+=e.pageX-t,(null==(n=a.value)?void 0:n.width)||0);return{positions:{positionX:r,startX:e.pageX},alpha:o}},p=f((e=>{var t,r;const o=(null==(t=a.value)?void 0:t.x)||0,l=e.pageX,c=(null==(r=a.value)?void 0:r.width)||0;let s=l-o;return n({alpha:i(s,c)},"alpha"),{startX:l,positionX:s}}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}),((e,{startX:t,positionX:r})=>{const{positions:o,alpha:a}=u(e,{startX:t,positionX:r});return n({alpha:a},"alpha"),o}));return e.watchEffect((()=>{var e,t;o.value&&!(null==(e=a.value)?void 0:e.width)&&(a.value=(null==(t=o.value)?void 0:t.getBoundingClientRect())||null)})),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"relative w-full overflow-hidden rounded-10px h-14px cursor-pointer",onMousedown:r[0]||(r[0]=(...t)=>e.unref(p)&&e.unref(p)(...t))},[e.createElementVNode("div",{class:"absolute left-0 right-0 top-0 bottom-0",style:e.normalizeStyle(e.unref(c))},null,4),e.createElementVNode("div",k,[e.createElementVNode("div",{ref_key:"alphaMaskRef",ref:o,class:"wh-full relative"},[e.createElementVNode("div",{class:"picker-pointer",style:e.normalizeStyle(e.unref(s))},null,4)],512)])],32))}})),[["__scopeId","data-v-256c0c24"]]);const V="object"==typeof global&&global&&global.Object===Object&&global;var B="object"==typeof self&&self&&self.Object===Object&&self;const O=V||B||Function("return this")();const E=O.Symbol;var X=Object.prototype,S=X.hasOwnProperty,A=X.toString,N=E?E.toStringTag:void 0;var I=Object.prototype.toString;var $="[object Null]",z="[object Undefined]",G=E?E.toStringTag:void 0;function M(e){return null==e?void 0===e?z:$:G&&G in Object(e)?function(e){var t=S.call(e,N),r=e[N];try{e[N]=void 0;var n=!0}catch(a){}var o=A.call(e);return n&&(t?e[N]=r:delete e[N]),o}(e):function(e){return I.call(e)}(e)}function U(e){return null!=e&&"object"==typeof e}var D="[object Symbol]";const F=Array.isArray;var T=/\s/;var R=/^\s+/;function Y(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}function L(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var W=NaN,q=/^[-+]0x[0-9a-f]+$/i,H=/^0b[01]+$/i,J=/^0o[0-7]+$/i,K=parseInt;function Q(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||U(e)&&M(e)==D}(e))return W;if(L(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=L(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=Y(e);var r=H.test(e);return r||J.test(e)?K(e.slice(2),r?2:8):q.test(e)?W:+e}var Z="[object AsyncFunction]",ee="[object Function]",te="[object GeneratorFunction]",re="[object Proxy]";function ne(e){if(!L(e))return!1;var t=M(e);return t==ee||t==te||t==Z||t==re}const oe=O["__core-js_shared__"];var ae,ie=(ae=/[^.]+$/.exec(oe&&oe.keys&&oe.keys.IE_PROTO||""))?"Symbol(src)_1."+ae:"";var le=Function.prototype.toString;function ce(e){if(null!=e){try{return le.call(e)}catch(t){}try{return e+""}catch(t){}}return""}var se=/^\[object .+?Constructor\]$/,ue=Function.prototype,pe=Object.prototype,de=ue.toString,fe=pe.hasOwnProperty,ve=RegExp("^"+de.call(fe).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function be(e){return!(!L(e)||(t=e,ie&&ie in t))&&(ne(e)?ve:se).test(ce(e));var t}function ye(e,t){var r=function(e,t){return null==e?void 0:e[t]}(e,t);return be(r)?r:void 0}const he=ye(O,"WeakMap");var me=Object.create;const ge=function(){function e(){}return function(t){if(!L(t))return{};if(me)return me(t);e.prototype=t;var r=new e;return e.prototype=void 0,r}}();const _e=function(){try{var e=ye(Object,"defineProperty");return e({},"",{}),e}catch(t){}}();var je=9007199254740991,xe=/^(?:0|[1-9]\d*)$/;function we(e,t){var r=typeof e;return!!(t=null==t?je:t)&&("number"==r||"symbol"!=r&&xe.test(e))&&e>-1&&e%1==0&&e<t}function ke(e,t,r){"__proto__"==t&&_e?_e(e,t,{configurable:!0,enumerable:!0,value:r,writable:!0}):e[t]=r}function Pe(e,t){return e===t||e!=e&&t!=t}var Ce=Object.prototype.hasOwnProperty;function Ve(e,t,r){var n=e[t];Ce.call(e,t)&&Pe(n,r)&&(void 0!==r||t in e)||ke(e,t,r)}function Be(e,t,r,n){var o=!r;r||(r={});for(var a=-1,i=t.length;++a<i;){var l=t[a],c=n?n(r[l],e[l],l,r,e):void 0;void 0===c&&(c=e[l]),o?ke(r,l,c):Ve(r,l,c)}return r}var Oe=9007199254740991;function Ee(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=Oe}function Xe(e){return null!=e&&Ee(e.length)&&!ne(e)}var Se=Object.prototype;function Ae(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||Se)}function Ne(e){return U(e)&&"[object Arguments]"==M(e)}var Ie=Object.prototype,$e=Ie.hasOwnProperty,ze=Ie.propertyIsEnumerable,Ge=Ne(function(){return arguments}())?Ne:function(e){return U(e)&&$e.call(e,"callee")&&!ze.call(e,"callee")};const Me=Ge;var Ue="object"==typeof exports&&exports&&!exports.nodeType&&exports,De=Ue&&"object"==typeof module&&module&&!module.nodeType&&module,Fe=De&&De.exports===Ue?O.Buffer:void 0;const Te=(Fe?Fe.isBuffer:void 0)||function(){return!1};var Re={};function Ye(e){return function(t){return e(t)}}Re["[object Float32Array]"]=Re["[object Float64Array]"]=Re["[object Int8Array]"]=Re["[object Int16Array]"]=Re["[object Int32Array]"]=Re["[object Uint8Array]"]=Re["[object Uint8ClampedArray]"]=Re["[object Uint16Array]"]=Re["[object Uint32Array]"]=!0,Re["[object Arguments]"]=Re["[object Array]"]=Re["[object ArrayBuffer]"]=Re["[object Boolean]"]=Re["[object DataView]"]=Re["[object Date]"]=Re["[object Error]"]=Re["[object Function]"]=Re["[object Map]"]=Re["[object Number]"]=Re["[object Object]"]=Re["[object RegExp]"]=Re["[object Set]"]=Re["[object String]"]=Re["[object WeakMap]"]=!1;var Le="object"==typeof exports&&exports&&!exports.nodeType&&exports,We=Le&&"object"==typeof module&&module&&!module.nodeType&&module,qe=We&&We.exports===Le&&V.process;const He=function(){try{var e=We&&We.require&&We.require("util").types;return e||qe&&qe.binding&&qe.binding("util")}catch(t){}}();var Je=He&&He.isTypedArray;const Ke=Je?Ye(Je):function(e){return U(e)&&Ee(e.length)&&!!Re[M(e)]};var Qe=Object.prototype.hasOwnProperty;function Ze(e,t){var r=F(e),n=!r&&Me(e),o=!r&&!n&&Te(e),a=!r&&!n&&!o&&Ke(e),i=r||n||o||a,l=i?function(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}(e.length,String):[],c=l.length;for(var s in e)!t&&!Qe.call(e,s)||i&&("length"==s||o&&("offset"==s||"parent"==s)||a&&("buffer"==s||"byteLength"==s||"byteOffset"==s)||we(s,c))||l.push(s);return l}function et(e,t){return function(r){return e(t(r))}}const tt=et(Object.keys,Object);var rt=Object.prototype.hasOwnProperty;function nt(e){return Xe(e)?Ze(e):function(e){if(!Ae(e))return tt(e);var t=[];for(var r in Object(e))rt.call(e,r)&&"constructor"!=r&&t.push(r);return t}(e)}var ot=Object.prototype.hasOwnProperty;function at(e){if(!L(e))return function(e){var t=[];if(null!=e)for(var r in Object(e))t.push(r);return t}(e);var t=Ae(e),r=[];for(var n in e)("constructor"!=n||!t&&ot.call(e,n))&&r.push(n);return r}function it(e){return Xe(e)?Ze(e,!0):at(e)}const lt=ye(Object,"create");var ct=Object.prototype.hasOwnProperty;var st=Object.prototype.hasOwnProperty;function ut(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function pt(e,t){for(var r=e.length;r--;)if(Pe(e[r][0],t))return r;return-1}ut.prototype.clear=function(){this.__data__=lt?lt(null):{},this.size=0},ut.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},ut.prototype.get=function(e){var t=this.__data__;if(lt){var r=t[e];return"__lodash_hash_undefined__"===r?void 0:r}return ct.call(t,e)?t[e]:void 0},ut.prototype.has=function(e){var t=this.__data__;return lt?void 0!==t[e]:st.call(t,e)},ut.prototype.set=function(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=lt&&void 0===t?"__lodash_hash_undefined__":t,this};var dt=Array.prototype.splice;function ft(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}ft.prototype.clear=function(){this.__data__=[],this.size=0},ft.prototype.delete=function(e){var t=this.__data__,r=pt(t,e);return!(r<0)&&(r==t.length-1?t.pop():dt.call(t,r,1),--this.size,!0)},ft.prototype.get=function(e){var t=this.__data__,r=pt(t,e);return r<0?void 0:t[r][1]},ft.prototype.has=function(e){return pt(this.__data__,e)>-1},ft.prototype.set=function(e,t){var r=this.__data__,n=pt(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this};const vt=ye(O,"Map");function bt(e,t){var r,n,o=e.__data__;return("string"==(n=typeof(r=t))||"number"==n||"symbol"==n||"boolean"==n?"__proto__"!==r:null===r)?o["string"==typeof t?"string":"hash"]:o.map}function yt(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function ht(e,t){for(var r=-1,n=t.length,o=e.length;++r<n;)e[o+r]=t[r];return e}yt.prototype.clear=function(){this.size=0,this.__data__={hash:new ut,map:new(vt||ft),string:new ut}},yt.prototype.delete=function(e){var t=bt(this,e).delete(e);return this.size-=t?1:0,t},yt.prototype.get=function(e){return bt(this,e).get(e)},yt.prototype.has=function(e){return bt(this,e).has(e)},yt.prototype.set=function(e,t){var r=bt(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this};const mt=et(Object.getPrototypeOf,Object);function gt(e){var t=this.__data__=new ft(e);this.size=t.size}gt.prototype.clear=function(){this.__data__=new ft,this.size=0},gt.prototype.delete=function(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r},gt.prototype.get=function(e){return this.__data__.get(e)},gt.prototype.has=function(e){return this.__data__.has(e)},gt.prototype.set=function(e,t){var r=this.__data__;if(r instanceof ft){var n=r.__data__;if(!vt||n.length<199)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new yt(n)}return r.set(e,t),this.size=r.size,this};var _t="object"==typeof exports&&exports&&!exports.nodeType&&exports,jt=_t&&"object"==typeof module&&module&&!module.nodeType&&module,xt=jt&&jt.exports===_t?O.Buffer:void 0,wt=xt?xt.allocUnsafe:void 0;function kt(){return[]}var Pt=Object.prototype.propertyIsEnumerable,Ct=Object.getOwnPropertySymbols;const Vt=Ct?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var r=-1,n=null==e?0:e.length,o=0,a=[];++r<n;){var i=e[r];t(i,r,e)&&(a[o++]=i)}return a}(Ct(e),(function(t){return Pt.call(e,t)})))}:kt;const Bt=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)ht(t,Vt(e)),e=mt(e);return t}:kt;function Ot(e,t,r){var n=t(e);return F(e)?n:ht(n,r(e))}function Et(e){return Ot(e,nt,Vt)}function Xt(e){return Ot(e,it,Bt)}const St=ye(O,"DataView");const At=ye(O,"Promise");const Nt=ye(O,"Set");var It="[object Map]",$t="[object Promise]",zt="[object Set]",Gt="[object WeakMap]",Mt="[object DataView]",Ut=ce(St),Dt=ce(vt),Ft=ce(At),Tt=ce(Nt),Rt=ce(he),Yt=M;(St&&Yt(new St(new ArrayBuffer(1)))!=Mt||vt&&Yt(new vt)!=It||At&&Yt(At.resolve())!=$t||Nt&&Yt(new Nt)!=zt||he&&Yt(new he)!=Gt)&&(Yt=function(e){var t=M(e),r="[object Object]"==t?e.constructor:void 0,n=r?ce(r):"";if(n)switch(n){case Ut:return Mt;case Dt:return It;case Ft:return $t;case Tt:return zt;case Rt:return Gt}return t});const Lt=Yt;var Wt=Object.prototype.hasOwnProperty;const qt=O.Uint8Array;function Ht(e){var t=new e.constructor(e.byteLength);return new qt(t).set(new qt(e)),t}var Jt=/\w*$/;var Kt=E?E.prototype:void 0,Qt=Kt?Kt.valueOf:void 0;var Zt="[object Boolean]",er="[object Date]",tr="[object Map]",rr="[object Number]",nr="[object RegExp]",or="[object Set]",ar="[object String]",ir="[object Symbol]",lr="[object ArrayBuffer]",cr="[object DataView]",sr="[object Float32Array]",ur="[object Float64Array]",pr="[object Int8Array]",dr="[object Int16Array]",fr="[object Int32Array]",vr="[object Uint8Array]",br="[object Uint8ClampedArray]",yr="[object Uint16Array]",hr="[object Uint32Array]";function mr(e,t,r){var n,o,a,i=e.constructor;switch(t){case lr:return Ht(e);case Zt:case er:return new i(+e);case cr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.byteLength)}(e,r);case sr:case ur:case pr:case dr:case fr:case vr:case br:case yr:case hr:return function(e,t){var r=t?Ht(e.buffer):e.buffer;return new e.constructor(r,e.byteOffset,e.length)}(e,r);case tr:return new i;case rr:case ar:return new i(e);case nr:return(a=new(o=e).constructor(o.source,Jt.exec(o))).lastIndex=o.lastIndex,a;case or:return new i;case ir:return n=e,Qt?Object(Qt.call(n)):{}}}var gr=He&&He.isMap;const _r=gr?Ye(gr):function(e){return U(e)&&"[object Map]"==Lt(e)};var jr=He&&He.isSet;const xr=jr?Ye(jr):function(e){return U(e)&&"[object Set]"==Lt(e)};var wr=1,kr=2,Pr=4,Cr="[object Arguments]",Vr="[object Function]",Br="[object GeneratorFunction]",Or="[object Object]",Er={};function Xr(e,t,r,n,o,a){var i,l=t&wr,c=t&kr,s=t&Pr;if(r&&(i=o?r(e,n,o,a):r(e)),void 0!==i)return i;if(!L(e))return e;var u=F(e);if(u){if(i=function(e){var t=e.length,r=new e.constructor(t);return t&&"string"==typeof e[0]&&Wt.call(e,"index")&&(r.index=e.index,r.input=e.input),r}(e),!l)return function(e,t){var r=-1,n=e.length;for(t||(t=Array(n));++r<n;)t[r]=e[r];return t}(e,i)}else{var p=Lt(e),d=p==Vr||p==Br;if(Te(e))return function(e,t){if(t)return e.slice();var r=e.length,n=wt?wt(r):new e.constructor(r);return e.copy(n),n}(e,l);if(p==Or||p==Cr||d&&!o){if(i=c||d?{}:function(e){return"function"!=typeof e.constructor||Ae(e)?{}:ge(mt(e))}(e),!l)return c?function(e,t){return Be(e,Bt(e),t)}(e,function(e,t){return e&&Be(t,it(t),e)}(i,e)):function(e,t){return Be(e,Vt(e),t)}(e,function(e,t){return e&&Be(t,nt(t),e)}(i,e))}else{if(!Er[p])return o?e:{};i=mr(e,p,l)}}a||(a=new gt);var f=a.get(e);if(f)return f;a.set(e,i),xr(e)?e.forEach((function(n){i.add(Xr(n,t,r,n,e,a))})):_r(e)&&e.forEach((function(n,o){i.set(o,Xr(n,t,r,o,e,a))}));var v=u?void 0:(s?c?Xt:Et:c?it:nt)(e);return function(e,t){for(var r=-1,n=null==e?0:e.length;++r<n&&!1!==t(e[r],r,e););}(v||e,(function(n,o){v&&(n=e[o=n]),Ve(i,o,Xr(n,t,r,o,e,a))})),i}Er[Cr]=Er["[object Array]"]=Er["[object ArrayBuffer]"]=Er["[object DataView]"]=Er["[object Boolean]"]=Er["[object Date]"]=Er["[object Float32Array]"]=Er["[object Float64Array]"]=Er["[object Int8Array]"]=Er["[object Int16Array]"]=Er["[object Int32Array]"]=Er["[object Map]"]=Er["[object Number]"]=Er[Or]=Er["[object RegExp]"]=Er["[object Set]"]=Er["[object String]"]=Er["[object Symbol]"]=Er["[object Uint8Array]"]=Er["[object Uint8ClampedArray]"]=Er["[object Uint16Array]"]=Er["[object Uint32Array]"]=!0,Er["[object Error]"]=Er[Vr]=Er["[object WeakMap]"]=!1;function Sr(e){return Xr(e,5)}const Ar=function(){return O.Date.now()};var Nr="Expected a function",Ir=Math.max,$r=Math.min;function zr(e,t,r){var n,o,a,i,l,c,s=0,u=!1,p=!1,d=!0;if("function"!=typeof e)throw new TypeError(Nr);function f(t){var r=n,a=o;return n=o=void 0,s=t,i=e.apply(a,r)}function v(e){var r=e-c;return void 0===c||r>=t||r<0||p&&e-s>=a}function b(){var e=Ar();if(v(e))return y(e);l=setTimeout(b,function(e){var r=t-(e-c);return p?$r(r,a-(e-s)):r}(e))}function y(e){return l=void 0,d&&n?f(e):(n=o=void 0,i)}function h(){var e=Ar(),r=v(e);if(n=arguments,o=this,c=e,r){if(void 0===l)return function(e){return s=e,l=setTimeout(b,t),u?f(e):i}(c);if(p)return clearTimeout(l),l=setTimeout(b,t),f(c)}return void 0===l&&(l=setTimeout(b,t)),i}return t=Q(t)||0,L(r)&&(u=!!r.leading,a=(p="maxWait"in r)?Ir(Q(r.maxWait)||0,t):a,d="trailing"in r?!!r.trailing:d),h.cancel=function(){void 0!==l&&clearTimeout(l),s=0,n=c=o=l=void 0},h.flush=function(){return void 0===l?i:y(Ar())},h}const Gr=["onDblclick"],Mr=e.defineComponent({name:"AreaGradientPoint"}),Ur=e.defineComponent(__spreadProps(__spreadValues({},Mr),{props:{index:{type:Number,required:!0},point:{type:Object,required:!0},width:{type:Number,default:0},positions:{type:Object}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>n.activePointIndex===r.index?" active":"")),i=e.computed((()=>({left:r.point.left*((r.width-14)/100)+"px"}))),l=e=>{n.points[r.index].left=e,o({type:n.type},"type")},c=(e,{startX:t,offsetX:n})=>{const o=u(n+=e.pageX-t,r.width);return{positions:{offsetX:n,startX:e.pageX},left:o}},s=f((e=>{const t=e.pageX,o=e.pageY,a=t-(r.positions.x||0);return n.activePointIndex=r.index,{startX:t,startY:o,offsetX:a}}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n}),((e,{startX:t,offsetX:r})=>{const{positions:n,left:o}=c(e,{startX:t,offsetX:r});return l(o),n})),p=()=>{let e=Sr(n.points);if(e.length<=2)return;const t=r.index,a=0===t?1:t-1;e=null==e?void 0:e.filter((e=>e.id!==r.point.id)),n.activePointIndex=a,o({points:e},"points")};return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`picker-pointer${e.unref(a)}`),style:e.normalizeStyle(e.unref(i)),onMousedown:o[0]||(o[0]=e.withModifiers(((...t)=>e.unref(s)&&e.unref(s)(...t)),["stop"])),onDblclick:e.withModifiers(p,["stop"]),onClick:o[1]||(o[1]=e.withModifiers((()=>e.unref(n).activePointIndex=r.index),["stop"]))},[e.createElementVNode("span",{class:e.normalizeClass(`child-point${e.unref(a)}`)},null,2)],46,Gr))}}));let Dr;const Fr=new Uint8Array(16);function Tr(){if(!Dr&&(Dr="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!Dr))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return Dr(Fr)}const Rr=[];for(let En=0;En<256;++En)Rr.push((En+256).toString(16).slice(1));const Yr={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function Lr(e,t,r){if(Yr.randomUUID&&!t&&!e)return Yr.randomUUID();const n=(e=e||{}).random||(e.rng||Tr)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){r=r||0;for(let e=0;e<16;++e)t[r+e]=n[e];return t}return function(e,t=0){return Rr[e[t+0]]+Rr[e[t+1]]+Rr[e[t+2]]+Rr[e[t+3]]+"-"+Rr[e[t+4]]+Rr[e[t+5]]+"-"+Rr[e[t+6]]+Rr[e[t+7]]+"-"+Rr[e[t+8]]+Rr[e[t+9]]+"-"+Rr[e[t+10]]+Rr[e[t+11]]+Rr[e[t+12]]+Rr[e[t+13]]+Rr[e[t+14]]+Rr[e[t+15]]}(n)}const Wr=e.defineComponent({name:"AreaGradientPoints"}),qr=e.defineComponent(__spreadProps(__spreadValues({},Wr),{setup(t){const r=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.ref(null),i=e.ref(null),l=e.computed((()=>({background:d(r.points,"linear",90)}))),c=e=>{const{x:t=0,width:a=0}=i.value||{},l=u(e.pageX-t,a),{hue:c,saturation:s,value:p}=r,d=Sr(r.points),f=n(c,s,p,1),v=__spreadProps(__spreadValues({id:Lr()},f),{left:l});null==d||d.push(v),r.activePointIndex=d.findIndex((e=>e.id===v.id)),o({points:d},"points")};return e.watchEffect((()=>{var e,t;a.value&&!(null==(e=i.value)?void 0:e.width)&&(i.value=(null==(t=a.value)?void 0:t.getBoundingClientRect())||null)})),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"gradient border-box w-full h-14px relative cursor-pointer rounded-10px mb-8px",style:e.normalizeStyle(e.unref(l)),onClick:c},[e.createElementVNode("div",{ref_key:"pointsContainerRef",ref:a,class:"wh-full relative"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).points,((t,r)=>{var n;return e.openBlock(),e.createBlock(Ur,{key:t.id,index:r,point:t,positions:e.unref(i),width:null==(n=e.unref(i))?void 0:n.width},null,8,["index","point","positions","width"])})),128))],512)],4))}})),Hr={class:"flex flex-col px-16px"},Jr={class:"flex pb-16px"},Kr={class:"flex flex-col flex-1"},Qr=e.defineComponent({name:"Area"}),Zr=e.defineComponent(__spreadProps(__spreadValues({},Qr),{setup(t){const r=e.inject("colorPickerState");return(t,n)=>(e.openBlock(),e.createElementBlock("div",Hr,[e.createVNode(m),e.unref(r).isGradient?(e.openBlock(),e.createBlock(qr,{key:0})):e.createCommentVNode("",!0),e.createElementVNode("div",Jr,[e.createVNode(j),e.createElementVNode("div",Kr,[e.createVNode(w),e.createVNode(C)])])]))}})),en={class:"flex items-center relative w-full rounded-6px text-[#28314d]"},tn=["maxlength","type"],rn={class:"text-12px lining-15px font-bold mt-6px mb-0 text-[#1f2667]"},nn=e.defineComponent({name:"Input"}),on=h(e.defineComponent(__spreadProps(__spreadValues({},nn),{props:{value:{default:""},label:{default:""},classes:{default:""},maxLen:{default:"3"},type:{default:"text"}},emits:["input","blur","focus","update:value"],setup(t,{emit:r}){const n=t,o=e.computed({get:()=>n.value,set:e=>{r("update:value",e)}}),a=e=>{r("input",e)},i=()=>{r("blur")},l=()=>{r("focus")};return(r,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex flex-shrink-0 items-center flex-col",n.classes])},[e.createElementVNode("div",en,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=t=>e.isRef(o)?o.value=t:null),class:"w-full outline-0 text-[#1f2667] text-center font-bold text-12px",maxlength:t.maxLen,type:n.type,onFocus:l,onBlur:i,onInput:a},null,40,tn),[[e.vModelDynamic,e.unref(o),void 0,{trim:!0}]])]),e.createElementVNode("div",rn,e.toDisplayString(t.label),1)],2))}})),[["__scopeId","data-v-034b5687"]]),an=e.defineComponent({name:"PreviewHex"}),ln=e.defineComponent(__spreadProps(__spreadValues({},an),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>{const{isGradient:e,activePointIndex:t}=r,n=r.points[t];return e?l(n.red,n.green,n.blue):l(r.red,r.green,r.blue)})),a=e=>{let t=e.target.value;if(!t&&0!==t)return;const r=s(t);r&&n(r)};return(t,r)=>(e.openBlock(),e.createBlock(on,{value:e.unref(o),label:"Hex","max-len":"7",classes:"hex mr-8px",onInput:a},null,8,["value"]))}})),cn=e.defineComponent({name:"PreviewRGBItem"}),sn=e.defineComponent(__spreadProps(__spreadValues({},cn),{props:{type:{default:"text"},label:{default:""}},setup(t){const r=t,n=e.inject("colorPickerState"),o=e.inject("updateColor"),a=e.computed((()=>{const{isGradient:e,red:t,green:o,blue:a,alpha:i,points:l=[],activePointIndex:c=0}=n,s=l[c];let u=0;switch(r.label){case"R":u=e?s.red:t;break;case"G":u=e?s.green:o;break;case"B":u=e?s.blue:a;break;case"A":u=~~(100*(e?s.alpha:i))}return u})),i=e=>{let t=+e.target.value;const{isGradient:a,points:i=[],activePointIndex:l=0}=n;switch(i[l],"A"===r.label&&t>100?t=100:t<=0?t=0:t>255&&(t=255),r.label){case"R":o({red:t},"red");break;case"G":o({green:t},"green");break;case"B":o({blue:t},"blue");break;case"A":o({alpha:t/100},"alpha")}};return(t,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createVNode(on,{value:e.unref(a),label:r.label,type:r.type,classes:"A"!==r.label?"mr-8px":"",onInput:i},null,8,["value","label","type","classes"])]))}})),un=e.defineComponent({name:"PreviewRGB"}),pn=e.defineComponent(__spreadProps(__spreadValues({},un),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(sn,{type:"number",label:"R"}),e.createVNode(sn,{type:"number",label:"G"}),e.createVNode(sn,{type:"number",label:"B"}),e.createVNode(sn,{type:"number",label:"A"})],64))})),dn={class:"color-preview-area mb-8px px-16px"},fn={class:"w-full flex justify-between"},vn=e.defineComponent({name:"Preview"}),bn=e.defineComponent(__spreadProps(__spreadValues({},vn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock("div",dn,[e.createElementVNode("div",fn,[e.createVNode(ln),e.createVNode(pn)])]))})),yn=e.defineComponent({name:"Solid"}),hn=e.defineComponent(__spreadProps(__spreadValues({},yn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(Zr),e.createVNode(bn)],64))})),mn={class:"gradient-controls border-box flex justify-between items-center w-full mb-8px px-16px"},gn={class:"flex flex-1"},_n={key:0,class:"relative mr-24px"},jn=[(t=>(e.pushScopeId("data-v-4e21238c"),t=t(),e.popScopeId(),t))((()=>e.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)))],xn={class:"gradient-degree-value flex justify-center items-center"},wn=e.defineComponent({name:"GradientControls"}),kn=h(e.defineComponent(__spreadProps(__spreadValues({},wn),{setup(t){const r=e.inject("colorPickerState"),n=e.inject("updateColor"),o=e.computed((()=>r.type)),a=e.computed((()=>r.degree)),i=e=>{n({type:e},"type")},l=e.ref(!0),c=()=>{if(l.value)return void(l.value=!1);let e=(r.degree||0)+45;e>=360&&(e=0),n({degree:~~e},"degree")},s=e.computed((()=>({transform:`rotate(${r.degree}deg)`}))),u=f((e=>{const t=e.target.getBoundingClientRect();return{centerY:~~(8-window.pageYOffset)+t.top,centerX:~~(8-window.pageXOffset)+t.left}}),((e,{centerX:t,centerY:r})=>{l.value=!0;const o=function(e,t,r,n){return Math.atan2(e-r,t-n)*(180/Math.PI)*-1+180}(e.clientX,e.clientY,t,r);n({degree:~~o},"degree")}),(e=>{const t=e.target.classList;l.value=!1,!t.contains("gradient-degrees")&&t.contains("icon-rotate")}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",mn,[e.createElementVNode("div",gn,[e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item liner-gradient "+("linear"===e.unref(o)?"active":"")),onClick:r[0]||(r[0]=e=>i("linear"))},null,2),e.createElementVNode("div",{class:e.normalizeClass("gradient-type-item radial-gradient "+("radial"===e.unref(o)?"active":"")),onClick:r[1]||(r[1]=e=>i("radial"))},null,2)]),"linear"===e.unref(o)?(e.openBlock(),e.createElementBlock("div",_n,[e.createElementVNode("div",{class:"gradient-degrees cursor-pointer flex justify-center items-center",onMousedown:r[2]||(r[2]=(...t)=>e.unref(u)&&e.unref(u)(...t)),onClick:c},[e.createElementVNode("div",{class:"gradient-degree-center",style:e.normalizeStyle(e.unref(s))},jn,4)],32),e.createElementVNode("div",xn,[e.createElementVNode("p",null,e.toDisplayString(e.unref(a))+"°",1)])])):e.createCommentVNode("",!0)]))}})),[["__scopeId","data-v-4e21238c"]]),Pn=e.defineComponent({name:"Gradient"}),Cn=e.defineComponent(__spreadProps(__spreadValues({},Pn),{setup:t=>(t,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(kn),e.createVNode(Zr),e.createVNode(bn)],64))})),Vn={class:"picker-color-ui border-box m-8px bg-[#fff] flex flex-col slelect-none"},Bn={key:2,class:"btns flex justify-end items-center select-none"},On=e.defineComponent({name:"ColorPicker"});return e.defineComponent(__spreadProps(__spreadValues({},On),{props:{isGradient:{type:Boolean,default:!1},showBtn:{type:Boolean,default:!1},color:{type:Object,default:e=>e.isGradient?{type:"linear",degree:0,points:[{id:Lr(),left:0,red:0,green:0,blue:0,alpha:1},{id:Lr(),left:100,red:255,green:0,blue:0,alpha:1}]}:{red:255,green:0,blue:0,alpha:1}},cancelText:{type:String,default:"Cancel"},cancelColor:{type:String,default:"#333"},cancelBg:{type:String,default:"#fff"},confirmText:{type:String,default:"Confirm"},confirmColor:{type:String,defualt:"#333"},confirmBg:{type:String,defualt:"#fff"}},emits:["change"],setup(t,{expose:r,emit:n}){var o,a;const i=t,l=i.isGradient&&(null==(a=null==(o=i.color)?void 0:o.points)?void 0:a.length)||0,c=e.reactive({isGradient:i.isGradient,red:i.isGradient?i.color.points[l-1].red||0:i.color.red||255,green:i.isGradient?i.color.points[l-1].green||0:i.color.green||0,blue:i.isGradient?i.color.points[l-1].blue||0:i.color.blue||0,alpha:i.isGradient?i.color.points[l-1].alpha:i.color.alpha,hue:0,saturation:100,value:100,style:"",type:"linear",degree:0,activePointIndex:l-1,points:i.isGradient?Sr(i.color.points):[]}),s=function(e,t,r){var n=!0,o=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return L(r)&&(n="leading"in r?!!r.leading:n,o="trailing"in r?!!r.trailing:o),zr(e,t,{leading:n,maxWait:t,trailing:o})}((function({red:e,green:t,blue:r,alpha:o,hue:a,saturation:l,value:s,points:u,type:f,degree:v},b){const y={red:e,green:t,blue:r,alpha:o,hue:a,saturation:l,value:s,points:u,type:f,degree:v};i.isGradient?function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:l=0,hue:s,saturation:u,value:p,points:f,type:v,degree:b}=e,y=c.points[c.activePointIndex];t?"points"===t||"type"===t||"degree"===t?c[t]=e[t]:y[t]=e[t]:(y.red=r,y.green=o,y.blue=a,c.alpha=l,f&&(c.points=f),v&&(c.type=v),b&&(c.degree=b),u&&(c.saturation=u),p&&(c.value=p),s&&(c.hue=s));const h=d(c.points,c.type,c.degree);c.style=h,!i.showBtn&&n("change",{style:c.style,gradient:{type:c.type,degree:c.degree,points:c.points}})}(y,b):function(e,t){const{red:r=0,green:o=0,blue:a=0,alpha:l,hue:s,saturation:u,value:d}=e;t?c[t]=e[t]:(c.red=r,c.green=o,c.blue=a,l&&(c.alpha=l),u&&(c.saturation=u),d&&(c.value=d),s&&(c.hue=s));const f=p(c.red,c.green,c.blue,c.alpha);c.style=f,!i.showBtn&&n("change",{style:f,color:{red:c.red,green:c.green,blue:c.blue,hue:c.hue,alpha:c.alpha}})}(y,b)}),i.showBtn?100:150);const u=e=>{e&&"function"==typeof e&&e()},f=e=>{const{isGradient:t,style:r,type:o,degree:a,points:i,red:l,green:s,blue:u,alpha:p,hue:d}=c;n("change",t?{style:r,gradient:{type:o,degree:a,points:i}}:{style:r,color:{red:l,green:s,blue:u,hue:d,alpha:p}}),e&&"function"==typeof e&&e()};return e.provide("colorPickerState",c),e.provide("updateColor",s),r({onClose:u,onConfirm:f}),(r,n)=>(e.openBlock(),e.createElementBlock("div",Vn,[i.isGradient?(e.openBlock(),e.createBlock(Cn,{key:0})):(e.openBlock(),e.createBlock(hn,{key:1})),t.showBtn?(e.openBlock(),e.createElementBlock("div",Bn,[e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:i.cancelColor,backgroundColor:i.cancelBg}),onClick:u},e.toDisplayString(i.cancelText),5),e.createElementVNode("div",{class:"btn",style:e.normalizeStyle({color:i.confirmColor,backgroundColor:i.confirmBg}),onClick:f},e.toDisplayString(i.confirmText),5)])):e.createCommentVNode("",!0)]))}}))}));
diff --git a/lib/dist/style.css b/lib/dist/style.css
index ca5229f..1c303bb 100644
--- a/lib/dist/style.css
+++ b/lib/dist/style.css
@@ -1 +1 @@
-.picker-area[data-v-e6e79a9f]{height:160px}.picker-area[data-v-e6e79a9f]:hover{cursor:default}.picker-area .picker-area-overlay1[data-v-e6e79a9f]{background:linear-gradient(to right,white 0%,rgba(255,255,255,0) 100%);border-radius:3px}.picker-area .picker-area-overlay1 .picker-area-overlay2[data-v-e6e79a9f]{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 100%)}.hue-area[data-v-366635af]{height:14px;background:-webkit-linear-gradient(left,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000);background:-o-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:-ms-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:-moz-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:linear-gradient(to right,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000)}.alpha-area[data-v-5168a43e]{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLil7zvuI4tLy1taXNjLS8tdGV4dHVyZXMtLy1jaGVzcy0oMjR4MzIpLWNvcHkiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuMiI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNC4wMDAwMDApIHRyYW5zbGF0ZSgtMC4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOCIgeD0iMCIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTgtQ29weS0yIiB4PSI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);background-size:auto;background-position:50% 50%}input[type=number][data-v-b4af7105]::-webkit-inner-spin-button,input[type=number][data-v-b4af7105]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-b4af7105]{-moz-appearance:textfield}.gradient-controls[data-v-4e21238c]{height:24px}.gradient-controls .gradient-type-item[data-v-4e21238c]{height:28px;width:28px;border-radius:50%;position:relative;cursor:pointer}.gradient-controls .gradient-type-item.active[data-v-4e21238c]:after{content:"";display:block;position:absolute;inset:-3px;border:2px solid #1f2667;border-radius:50%}.gradient-controls .gradient-type-item.liner-gradient[data-v-4e21238c]{background:linear-gradient(270deg,#ffffff 0%,#1f2667 100%)}.gradient-controls .gradient-type-item.radial-gradient[data-v-4e21238c]{margin-left:8px;background:radial-gradient(circle,#ffffff 0%,#1f2667 100%)}.gradient-controls .gradient-degrees[data-v-4e21238c]{position:relative;width:28px;height:28px;border:3px solid #1f2667;border-radius:18px;margin-right:54px}.gradient-controls .gradient-degrees .gradient-degree-center[data-v-4e21238c]{position:relative;width:6px;height:22px;pointer-events:none}.gradient-controls .gradient-degrees .gradient-degree-center .gradient-degree-pointer[data-v-4e21238c]{position:absolute;width:6px;height:6px;top:2px;border-radius:3px;background:#1f2667}.gradient-controls .gradient-degree-value[data-v-4e21238c]{position:absolute;top:0;right:0;width:48px;height:28px;border:1px solid #bbbfc5;border-radius:6px}.gradient-controls .gradient-degree-value p[data-v-4e21238c]{text-align:center;padding:0 6px}.picker-color-ui{width:280px}.picker-color-ui .picker-area .picker-pointer{position:absolute;top:1px;height:12px;width:12px;border:1px solid #ffffff;background:transparent;border-radius:50%;box-shadow:0 0 4px #0000004d}.picker-color-ui .picker-area .picker-pointer .child-point{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:3px;width:3px;background:#ffffff;border-radius:50%;opacity:0;transition:opacity .33s}.picker-color-ui .picker-area .picker-pointer .child-point.active{opacity:1}.picker-color-ui .color-preview-area .hex{width:65px}.picker-color-ui .color-preview-area .rgb{width:40px}.picker-color-ui .picker-pointer{position:absolute;top:0;height:12px;width:12px;border:1px solid #ffffff;background:transparent;border-radius:50%;box-shadow:0 0 4px #0000004d}.picker-color-ui .picker-pointer .child-point{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:3px;width:3px;background:#ffffff;border-radius:50%;opacity:0;transition:opacity .33s}.picker-color-ui .picker-pointer .child-point.active{opacity:1}.picker-color-ui .btns{box-sizing:border-box;width:100%;padding:0 16px}.picker-color-ui .btns .btn{border:1px solid #ccc;font-size:13px;padding:2px 4px;border-radius:4px;margin-left:8px;cursor:pointer}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.wh-full{width:100%;height:100%}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.m-8px{margin:8px}.mb-0{margin-bottom:0}.mb-16px{margin-bottom:16px}.mb-8px{margin-bottom:8px}.mr-24px{margin-right:24px}.mr-8px{margin-right:8px}.mt-6px{margin-top:6px}.block{display:block}.h-14px{height:14px}.h-36px{height:36px}.w-36px{width:36px}.w-full{width:100%}.flex{display:flex}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.border,.border-width-1px{border-width:1px}.border-\[\#ebedf5\]{--un-border-opacity:1;border-color:rgba(235,237,245,var(--un-border-opacity))}.rounded-10px{border-radius:10px}.rounded-6px{border-radius:6px}.rounded-8px{border-radius:8px}.border-solid{border-style:solid}.bg-\[\#fff\]{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.bg-\[red\]{background-color:red}.px{padding-left:1rem;padding-right:1rem}.px-16px{padding-left:16px;padding-right:16px}.pb-16px{padding-bottom:16px}.text-center{text-align:center}.text-12px{font-size:12px}.font-bold{font-weight:700}.text-\[\#1f2667\]{--un-text-opacity:1;color:rgba(31,38,103,var(--un-text-opacity))}.text-\[\#28314d\]{--un-text-opacity:1;color:rgba(40,49,77,var(--un-text-opacity))}.outline-0{outline-width:0}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}
+.picker-area[data-v-2e8391c9]{height:160px}.picker-area[data-v-2e8391c9]:hover{cursor:default}.picker-area .picker-area-overlay1[data-v-2e8391c9]{background:linear-gradient(to right,white 0%,rgba(255,255,255,0) 100%);border-radius:3px}.picker-area .picker-area-overlay1 .picker-area-overlay2[data-v-2e8391c9]{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 100%)}.hue-area[data-v-7cd4331a]{height:14px;background:-webkit-linear-gradient(left,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000);background:-o-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:-ms-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:-moz-linear-gradient(left,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000);background:linear-gradient(to right,#ff0000,#ff8000,#ffff00,#80ff00,#00ff00,#00ff80,#00ffff,#0080ff,#0000ff,#8000ff,#ff00ff,#ff0080,#ff0000)}.alpha-area[data-v-256c0c24]{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLil7zvuI4tLy1taXNjLS8tdGV4dHVyZXMtLy1jaGVzcy0oMjR4MzIpLWNvcHkiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuMiI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNC4wMDAwMDApIHRyYW5zbGF0ZSgtMC4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOCIgeD0iMCIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTgtQ29weS0yIiB4PSI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);background-size:auto;background-position:50% 50%}input[type=number][data-v-034b5687]::-webkit-inner-spin-button,input[type=number][data-v-034b5687]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-034b5687]{-moz-appearance:textfield}.gradient-controls[data-v-4e21238c]{height:24px}.gradient-controls .gradient-type-item[data-v-4e21238c]{height:28px;width:28px;border-radius:50%;position:relative;cursor:pointer}.gradient-controls .gradient-type-item.active[data-v-4e21238c]:after{content:"";display:block;position:absolute;inset:-3px;border:2px solid #1f2667;border-radius:50%}.gradient-controls .gradient-type-item.liner-gradient[data-v-4e21238c]{background:linear-gradient(270deg,#ffffff 0%,#1f2667 100%)}.gradient-controls .gradient-type-item.radial-gradient[data-v-4e21238c]{margin-left:8px;background:radial-gradient(circle,#ffffff 0%,#1f2667 100%)}.gradient-controls .gradient-degrees[data-v-4e21238c]{position:relative;width:28px;height:28px;border:3px solid #1f2667;border-radius:18px;margin-right:54px}.gradient-controls .gradient-degrees .gradient-degree-center[data-v-4e21238c]{position:relative;width:6px;height:22px;pointer-events:none}.gradient-controls .gradient-degrees .gradient-degree-center .gradient-degree-pointer[data-v-4e21238c]{position:absolute;width:6px;height:6px;top:2px;border-radius:3px;background:#1f2667}.gradient-controls .gradient-degree-value[data-v-4e21238c]{position:absolute;top:0;right:0;width:48px;height:28px;border:1px solid #bbbfc5;border-radius:6px}.gradient-controls .gradient-degree-value p[data-v-4e21238c]{text-align:center;padding:0 6px}.picker-color-ui{width:280px}.picker-color-ui .picker-area .picker-pointer{position:absolute;top:1px;height:12px;width:12px;border:1px solid #ffffff;background:transparent;border-radius:50%;box-shadow:0 0 4px #0000004d}.picker-color-ui .picker-area .picker-pointer .child-point{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:3px;width:3px;background:#ffffff;border-radius:50%;opacity:0;transition:opacity .33s}.picker-color-ui .picker-area .picker-pointer .child-point.active{opacity:1}.picker-color-ui .color-preview-area .hex{width:65px}.picker-color-ui .color-preview-area .rgb{width:40px}.picker-color-ui .picker-pointer{position:absolute;top:0;height:12px;width:12px;border:1px solid #ffffff;background:transparent;border-radius:50%;box-shadow:0 0 4px #0000004d}.picker-color-ui .picker-pointer .child-point{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:3px;width:3px;background:#ffffff;border-radius:50%;opacity:0;transition:opacity .33s}.picker-color-ui .picker-pointer .child-point.active{opacity:1}.picker-color-ui .btns{box-sizing:border-box;width:100%;padding:0 16px}.picker-color-ui .btns .btn{border:1px solid #ccc;font-size:13px;padding:2px 4px;border-radius:4px;margin-left:8px;cursor:pointer}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.wh-full{width:100%;height:100%}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.m-8px{margin:8px}.mb-0{margin-bottom:0}.mb-16px{margin-bottom:16px}.mb-8px{margin-bottom:8px}.mr-24px{margin-right:24px}.mr-8px{margin-right:8px}.mt-6px{margin-top:6px}.block{display:block}.h-14px{height:14px}.h-36px{height:36px}.w-36px{width:36px}.w-full{width:100%}.flex{display:flex}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.border,.border-width-1px{border-width:1px}.border-\[\#ebedf5\]{--un-border-opacity:1;border-color:rgba(235,237,245,var(--un-border-opacity))}.rounded-10px{border-radius:10px}.rounded-6px{border-radius:6px}.rounded-8px{border-radius:8px}.border-solid{border-style:solid}.bg-\[\#fff\]{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.bg-\[red\]{background-color:red}.px{padding-left:1rem;padding-right:1rem}.px-16px{padding-left:16px;padding-right:16px}.pb-16px{padding-bottom:16px}.text-center{text-align:center}.text-12px{font-size:12px}.font-bold{font-weight:700}.text-\[\#1f2667\]{--un-text-opacity:1;color:rgba(31,38,103,var(--un-text-opacity))}.text-\[\#28314d\]{--un-text-opacity:1;color:rgba(40,49,77,var(--un-text-opacity))}.outline-0{outline-width:0}.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}
diff --git a/lib/package.json b/lib/package.json
index d00c494..29188b0 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "color-gradient-picker-vue3",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "author": "June",
   "description": "Color and gradient picker for vue3.js",