diff --git a/lib/README.md b/lib/README.md
new file mode 100644
index 0000000..1260064
--- /dev/null
+++ b/lib/README.md
@@ -0,0 +1,120 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: June
+ * @Date: 2023-03-17 22:02:02
+ * @LastEditors: June
+ * @LastEditTime: 2023-05-10 16:13:15
+-->
+
+## color-gradient-picker-vue3
+
+Color and gradient picker for vue3.js. [If you use vue2， plese use color-gradient-picker](https://github.com/arthay/vue-color-gradient-picker).color-gradient-picker-vue3 is an upgraded version of `color-gradient-picker`
+
+#### Usage
+
+```bash
+yarn add color-gradient-picker-vue3
+# or npm install color-gradient-picker-vue3 or pnpm install color-gradient-picker-vue3
+```
+
+#### Demo
+
+```html
+<template>
+    <div>
+        <ColorPicker
+            :is-gradient="true"
+            :on-start-change="(color) => onChange(color, 'start')"
+            :on-change="(color) => onChange(color, 'change')"
+            :on-end-change="(color) => onChange(color, 'end')"
+        />
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue';
+    import ColorPicker from 'color-gradient-picker-vue3';
+    import 'color-gradient-picker-vue3/dist/style.css';
+
+    const color = ref({
+        red: 255,
+        green: 0,
+        blue: 0,
+        alpha: 1,
+    });
+
+    const onChange = (attrs, name) => {
+        color.value = { ...attrs };
+    };
+</script>
+```
+
+#### ts Demo
+
+```html
+<template>
+    <div>
+        <ColorPicker
+            :is-gradient="true"
+            :on-start-change="(color) => onChange(color, 'start')"
+            :on-change="(color) => onChange(color, 'change')"
+            :on-end-change="(color) => onChange(color, 'end')"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import type { Ref } from 'vue';
+    import ColorPicker from 'color-gradient-picker-vue3';
+    import 'color-gradient-picker-vue3/dist/style.css';
+    interface IPoitItem {
+        alpha?: number | string;
+        blue?: number | string;
+        green?: number | string;
+        left?: number | string;
+        red?: number | string;
+    }
+
+    interface Iattrs {
+        degree: number;
+        points: [IPoitItem];
+        style: string;
+        type: string;
+    }
+
+    const color: Ref<IPoitItem | Iattrs> = ref({
+        red: 255,
+        green: 0,
+        blue: 0,
+        alpha: 1,
+    });
+
+    const onChange = (attrs: Iattrs, name: string) => {
+        color.value = { ...attrs };
+    };
+</script>
+```
+
+#### 启动 lib
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动lib(根目录或者lib下)
+pnpm dev
+
+# 预览packages的子项目
+# 根目录
+pnpm predev
+# 子项目下
+pnpm dev
+```
+
+#### Todo
+
+-   [x] 支持 monorepo
+
+-   [ ] fix to typescript
diff --git a/lib/components/ColorPicker/Area/Alpha/index.vue b/lib/components/ColorPicker/Area/Alpha/index.vue
index 3cc157c..50a368e 100644
--- a/lib/components/ColorPicker/Area/Alpha/index.vue
+++ b/lib/components/ColorPicker/Area/Alpha/index.vue
@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-04-08 22:26:19
  * @LastEditors: June
- * @LastEditTime: 2023-05-07 23:59:49
+ * @LastEditTime: 2023-05-12 22:37:47
 -->
 <template>
     <div class="alpha" @mousedown="state.mouseEvents">
diff --git a/lib/components/ColorPicker/Area/index.vue b/lib/components/ColorPicker/Area/index.vue
index 570b9ca..1c24c62 100644
--- a/lib/components/ColorPicker/Area/index.vue
+++ b/lib/components/ColorPicker/Area/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 19:23:05
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 11:25:47
+ * @LastEditTime: 2023-05-10 16:43:02
 -->
 <template>
     <div class="picker-area">
diff --git a/lib/components/ColorPicker/Gradient/index.vue b/lib/components/ColorPicker/Gradient/index.vue
index b9f7de2..6e0b063 100644
--- a/lib/components/ColorPicker/Gradient/index.vue
+++ b/lib/components/ColorPicker/Gradient/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 20:10:11
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 16:40:25
+ * @LastEditTime: 2023-05-12 22:58:54
 -->
 <template>
     <GradientControls
@@ -12,7 +12,6 @@
         :degree="state.gradientDegree"
         :change-gradient-control="changeGradientControl"
     />
-
     <Area
         :red="state.colorRed"
         :green="state.colorGreen"
diff --git a/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue b/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue
index bacff91..6b5739f 100644
--- a/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue
+++ b/lib/components/ColorPicker/Preview/RGB/RGBItem/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 18:41:58
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 00:04:06
+ * @LastEditTime: 2023-05-12 23:12:55
 -->
 <template>
     <div>
diff --git a/lib/components/ColorPicker/Preview/RGB/index.vue b/lib/components/ColorPicker/Preview/RGB/index.vue
index 48b54a1..a97e53d 100644
--- a/lib/components/ColorPicker/Preview/RGB/index.vue
+++ b/lib/components/ColorPicker/Preview/RGB/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-19 18:24:48
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 00:02:28
+ * @LastEditTime: 2023-05-12 23:01:07
 -->
 <template>
     <RGBItem
@@ -26,7 +26,7 @@
         :on-change="(value) => changeValue('blue', value)"
     />
     <RGBItem
-        :value="~~props.alpha * 100"
+        :value="props.alpha * 100"
         type="number"
         label="Alpha"
         :on-change="(value) => changeValue('alpha', value)"
diff --git a/lib/components/ColorPicker/Preview/index.vue b/lib/components/ColorPicker/Preview/index.vue
index fd72918..ecc3b2b 100644
--- a/lib/components/ColorPicker/Preview/index.vue
+++ b/lib/components/ColorPicker/Preview/index.vue
@@ -3,7 +3,7 @@
  * @Description: 
  * @Date: 2023-04-08 22:26:19
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 09:59:08
+ * @LastEditTime: 2023-05-10 16:34:46
 -->
 <template>
     <div class="color-preview-area">
diff --git a/lib/components/ColorPicker/Solid/index.vue b/lib/components/ColorPicker/Solid/index.vue
index b21b3ac..4002954 100644
--- a/lib/components/ColorPicker/Solid/index.vue
+++ b/lib/components/ColorPicker/Solid/index.vue
@@ -129,7 +129,6 @@ const updateColor = (
     hue = getRightValue(hue, state.colorHue);
     saturation = getRightValue(saturation, state.colorSaturation);
     value = getRightValue(value, state.colorValue);
-
     state.colorRed = red;
     state.colorGreen = green;
     state.colorBlue = blue;
diff --git a/lib/components/ColorPicker/index.vue b/lib/components/ColorPicker/index.vue
index c841d55..db1c00b 100644
--- a/lib/components/ColorPicker/index.vue
+++ b/lib/components/ColorPicker/index.vue
@@ -4,10 +4,11 @@
  * @Author: June
  * @Date: 2023-03-18 00:57:49
  * @LastEditors: June
- * @LastEditTime: 2023-04-28 11:49:51
+ * @LastEditTime: 2023-05-12 22:31:38
 -->
 <template>
     <div class="ui-color-picker">
+        <!-- 渐变picker -->
         <Gradient
             v-if="props.isGradient"
             :points="props.gradient.points"
@@ -18,6 +19,7 @@
             :on-end-change="props.onEndChange"
         />
 
+        <!-- 非渐变Picker -->
         <Solid
             v-else
             :red="props.color.red"
diff --git a/lib/components/Input/index.vue b/lib/components/Input/index.vue
index 674707d..b1b662e 100644
--- a/lib/components/Input/index.vue
+++ b/lib/components/Input/index.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-23 22:20:33
  * @LastEditors: June
- * @LastEditTime: 2023-05-08 16:24:46
+ * @LastEditTime: 2023-05-12 23:12:41
 -->
 <template>
     <div :class="`input-field ${props.classes}`">
@@ -24,15 +24,15 @@
 </template>
 
 <script lang="ts" setup name="Input">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 interface Iprops {
     value: string | number;
     label: string;
     type?: string;
     classes: string;
-    onFocus?: void;
-    onBlur?: void;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 
 const props = withDefaults(defineProps<Iprops>(), {
@@ -47,20 +47,13 @@ const props = withDefaults(defineProps<Iprops>(), {
 const emits = defineEmits(['input', 'update:value']);
 
 const value = computed({
-    get: () => props.value,
+    get: () => ~~props.value,
     set: (val) => emits('update:value', val),
 });
 
 const onInput = (e: InputEvent) => {
     emits('input', e);
 };
-
-// watch(
-//     () => [props.colorValue, value.value],
-//     (val) => {
-//         console.log(val);
-//     },
-// );
 </script>
 
 <style lang="scss" scoped>
diff --git a/lib/dist/color-gradient-picker-vue3.es.js b/lib/dist/color-gradient-picker-vue3.es.js
index dd4b6da..c64e991 100644
--- a/lib/dist/color-gradient-picker-vue3.es.js
+++ b/lib/dist/color-gradient-picker-vue3.es.js
@@ -1,5 +1,5 @@
-import { defineComponent as f, ref as X, reactive as G, computed as y, onMounted as E, openBlock as b, createElementBlock as C, normalizeStyle as S, unref as w, createElementVNode as v, normalizeClass as F, withModifiers as te, Fragment as T, renderList as ne, createBlock as I, createVNode as P, createCommentVNode as j, withDirectives as oe, isRef as ae, vModelText as re, toDisplayString as W, watch as M, getCurrentInstance as le, onBeforeUnmount as ie } from "vue";
-function R({
+import { defineComponent as f, ref as X, reactive as G, computed as y, onMounted as E, openBlock as b, createElementBlock as C, normalizeStyle as S, unref as w, createElementVNode as v, normalizeClass as R, withModifiers as te, Fragment as T, renderList as ne, createBlock as F, createVNode as P, createCommentVNode as j, withDirectives as oe, isRef as ae, vModelText as re, toDisplayString as W, watch as M, getCurrentInstance as le, onBeforeUnmount as ie } from "vue";
+function I({
   red: n,
   green: t,
   blue: e,
@@ -75,7 +75,7 @@ function ce(n) {
   if (ue.test(n)) {
     if (n[0] === "#" && (n = n.slice(1, n.length)), n.length < 6)
       return;
-    const e = parseInt(n.substring(0, 2), 16) || 0, o = parseInt(n.substring(2, 4), 16) || 0, l = parseInt(n.substring(4, 6), 16) || 0, s = parseInt(n.substring(6, 10), 16) / 255 || 0, a = N(e, o, l, s), r = a && R({ ...a });
+    const e = parseInt(n.substring(0, 2), 16) || 0, o = parseInt(n.substring(2, 4), 16) || 0, l = parseInt(n.substring(4, 6), 16) || 0, s = parseInt(n.substring(6, 10), 16) / 255 || 0, a = N(e, o, l, s), r = a && I({ ...a });
     return {
       ...a,
       ...r
@@ -478,7 +478,7 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
         g
       );
     }), (d, u) => (b(), C("div", {
-      class: F(`picker-pointer${w(o)}`),
+      class: R(`picker-pointer${w(o)}`),
       style: S(w(l)),
       onMousedown: u[0] || (u[0] = //@ts-ignore
       (...c) => e.mouseEvents && e.mouseEvents(...c)),
@@ -487,7 +487,7 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
       }, ["stop"]))
     }, [
       v("span", {
-        class: F(`child-point${w(o)}`)
+        class: R(`child-point${w(o)}`)
       }, null, 2)
     ], 38));
   }
@@ -531,7 +531,7 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
         ref: e,
         class: "gradient-slider-container"
       }, [
-        (b(!0), C(T, null, ne(t.points, (g, d) => (b(), I(ke, {
+        (b(!0), C(T, null, ne(t.points, (g, d) => (b(), F(ke, {
           key: d,
           "active-point-index": t.activePointIndex,
           index: d,
@@ -580,7 +580,7 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
         value: n.value,
         "update-color": n.updateColor
       }, null, 8, ["red", "green", "blue", "hue", "saturation", "value", "update-color"]),
-      n.isGradient ? (b(), I(Ge, {
+      n.isGradient ? (b(), F(Ge, {
         key: 0,
         type: n.type,
         degree: n.degree,
@@ -620,33 +620,35 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
       ])
     ]));
   }
-}), Be = { class: "input-container" }, Fe = { class: "label" }, Re = f({
+}), Be = { class: "input-container" }, Re = { class: "label" }, Ie = f({
   name: "Input"
-}), Ie = /* @__PURE__ */ f({
-  ...Re,
+}), Fe = /* @__PURE__ */ f({
+  ...Ie,
   props: {
     value: { default: "" },
     label: { default: "" },
     type: { default: "text" },
     classes: { default: "" },
-    onFocus: { type: Function, default: () => !1 },
-    onBlur: { type: Function, default: () => !1 }
+    onFocus: { type: Function, default: () => {
+    } },
+    onBlur: { type: Function, default: () => {
+    } }
   },
   emits: ["input", "update:value"],
   setup(n, { emit: t }) {
     const e = n, o = y({
-      get: () => e.value,
+      get: () => ~~e.value,
       set: (s) => t("update:value", s)
     }), l = (s) => {
       t("input", s);
     };
     return (s, a) => (b(), C("div", {
-      class: F(`input-field ${e.classes}`)
+      class: R(`input-field ${e.classes}`)
     }, [
       v("div", Be, [
         oe(v("input", {
           "onUpdate:modelValue": a[0] || (a[0] = (r) => ae(o) ? o.value = r : null),
-          class: F(`${e.type}-input input`),
+          class: R(`${e.type}-input input`),
           onFocus: a[1] || (a[1] = //@ts-ignore
           (...r) => e.onFocus && e.onFocus(...r)),
           onBlur: a[2] || (a[2] = //@ts-ignore
@@ -656,7 +658,7 @@ const ge = { class: "picking-area-overlay1" }, pe = { class: "picking-area-overl
           [re, w(o)]
         ])
       ]),
-      v("div", Fe, W(n.label), 1)
+      v("div", Re, W(n.label), 1)
     ], 2));
   }
 });
@@ -665,7 +667,7 @@ const Ve = (n, t) => {
   for (const [o, l] of t)
     e[o] = l;
   return e;
-}, Q = /* @__PURE__ */ Ve(Ie, [["__scopeId", "data-v-3d2a573b"]]), Ae = f({
+}, Q = /* @__PURE__ */ Ve(Fe, [["__scopeId", "data-v-b140d166"]]), Ae = f({
   name: "Preview"
 }), De = /* @__PURE__ */ f({
   ...Ae,
@@ -688,7 +690,7 @@ const Ve = (n, t) => {
     return M(
       () => [t.red, t.green, t.blue],
       () => l()
-    ), (a, r) => (b(), I(Q, {
+    ), (a, r) => (b(), F(Q, {
       value: e.hexValue,
       label: "hex",
       classes: "hex",
@@ -755,7 +757,7 @@ const Ve = (n, t) => {
         t.updateColor({ alpha: l / 100 });
         return;
       }
-      const s = R({
+      const s = I({
         red: t.red,
         green: t.green,
         blue: t.blue,
@@ -783,7 +785,7 @@ const Ve = (n, t) => {
         "on-change": (s) => e("blue", s)
       }, null, 8, ["value", "on-change"]),
       P(D, {
-        value: ~~t.alpha * 100,
+        value: t.alpha * 100,
         type: "number",
         label: "Alpha",
         "on-change": (s) => e("alpha", s)
@@ -833,9 +835,12 @@ const Ve = (n, t) => {
     hue: { default: 0 },
     saturation: { default: 0 },
     value: { default: 0 },
-    onStartChange: { type: Function, default: () => !1 },
-    onChange: { type: Function, default: () => !1 },
-    onEndChange: { type: Function, default: () => !1 }
+    onStartChange: { default: () => {
+    } },
+    onChange: { default: () => {
+    } },
+    onEndChange: { default: () => {
+    } }
   },
   setup(n) {
     const t = n, e = G({
@@ -851,7 +856,7 @@ const Ve = (n, t) => {
         onChange: t.onChange,
         onEndChange: t.onEndChange
       }
-    }), o = y(() => t.hue === void 0 || t.saturation === void 0 || t.value === void 0 ? R({
+    }), o = y(() => t.hue === void 0 || t.saturation === void 0 || t.value === void 0 ? I({
       red: t.red,
       green: t.green,
       blue: t.blue
@@ -893,7 +898,7 @@ const Ve = (n, t) => {
       });
     };
     return E(() => {
-      const { hue: a, saturation: r, value: g } = R({
+      const { hue: a, saturation: r, value: g } = I({
         red: e.colorRed,
         green: e.colorGreen,
         blue: e.colorBlue
@@ -976,11 +981,11 @@ const Ve = (n, t) => {
     }), (g, d) => (b(), C("div", We, [
       v("div", ze, [
         v("div", {
-          class: F(`gradient-type-item liner-gradient ${t.type === "linear" ? "active" : ""}`),
+          class: R(`gradient-type-item liner-gradient ${t.type === "linear" ? "active" : ""}`),
           onClick: d[0] || (d[0] = () => n.changeGradientControl({ type: "linear" }))
         }, null, 2),
         v("div", {
-          class: F(`gradient-type-item radial-gradient ${t.type === "radial" ? "active" : ""}`),
+          class: R(`gradient-type-item radial-gradient ${t.type === "radial" ? "active" : ""}`),
           onClick: d[1] || (d[1] = () => n.changeGradientControl({ type: "radial" }))
         }, null, 2)
       ]),
@@ -1065,7 +1070,7 @@ const Ve = (n, t) => {
       e.activePointIndex = u, e.activePoint = e.gradientPoints[u];
       const { red: c, green: i, blue: p, alpha: h } = e.activePoint;
       e.colorRed = c, e.colorGreen = i, e.colorBlue = p, e.colorAlpha = h;
-      const { hue: m, saturation: x, value: k } = R({ red: c, green: i, blue: p });
+      const { hue: m, saturation: x, value: k } = I({ red: c, green: i, blue: p });
       e.colorHue = m, e.colorSaturation = x, e.colorValue = k;
     }, a = ({ type: u, degree: c }) => {
       u = _(u, e.gradientType), c = _(c, e.gradientDegree), e.gradientType = u, e.gradientDegree = c, t.onChange({
@@ -1128,7 +1133,7 @@ const Ve = (n, t) => {
       });
     };
     return E(() => {
-      const { hue: u, saturation: c, value: i } = R({
+      const { hue: u, saturation: c, value: i } = I({
         red: e.colorRed,
         green: e.colorGreen,
         blue: e.colorBlue
@@ -1213,7 +1218,7 @@ const Ve = (n, t) => {
   setup(n) {
     const t = n;
     return (e, o) => (b(), C("div", ot, [
-      t.isGradient ? (b(), I(nt, {
+      t.isGradient ? (b(), F(nt, {
         key: 0,
         points: t.gradient.points,
         type: t.gradient.type,
@@ -1221,7 +1226,7 @@ const Ve = (n, t) => {
         "on-change": t.onChange,
         "on-start-change": t.onStartChange,
         "on-end-change": t.onEndChange
-      }, null, 8, ["points", "type", "degree", "on-change", "on-start-change", "on-end-change"])) : (b(), I(je, {
+      }, null, 8, ["points", "type", "degree", "on-change", "on-start-change", "on-end-change"])) : (b(), F(je, {
         key: 1,
         red: t.color.red,
         green: t.color.green,
diff --git a/lib/dist/color-gradient-picker-vue3.umd.js b/lib/dist/color-gradient-picker-vue3.umd.js
index f532a8b..bda1f81 100644
--- a/lib/dist/color-gradient-picker-vue3.umd.js
+++ b/lib/dist/color-gradient-picker-vue3.umd.js
@@ -1 +1 @@
-(function(n,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue")):typeof define=="function"&&define.amd?define(["vue"],_):(n=typeof globalThis<"u"?globalThis:n||self,n["color-gradient-picker-vue3"]=_(n.Vue))})(this,function(n){"use strict";function _({red:o,green:t,blue:e,alpha:a}){let i,s,r,l=0,g;const p=o/255,d=t/255,u=e/255,c=Math.max(p,d,u),f=c-Math.min(p,d,u),h=m=>(c-m)/6/f+1/2;return f===0?(l=0,g=0):(g=f/c,i=h(p),s=h(d),r=h(u),p===c?l=r-s:d===c?l=1/3+i-r:u===c&&(l=2/3+s-i),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(l*360),saturation:Math.round(g*100),value:Math.round(c*100)}}function A(o){let t=1;const e=o/60;let a=t*(1-Math.abs(e%2-1));const i=0,s=255;let r=0,l=0,g=0;return t=(t+i)*s|0,a=(a+i)*s|0,e>=0&&e<1&&(r=t|0,l=a|0,g=i|0),e>=1&&e<2&&(r=a|0,l=t|0,g=i|0),e>=2&&e<3&&(r=i|0,l=t|0,g=a|0),e>=3&&e<4&&(r=i|0,l=a|0,g=t|0),e>=4&&e<5&&(r=a|0,l=i|0,g=t|0),e>=5&&e<=6&&(r=t|0,l=i|0,g=a|0),{red:r,green:l,blue:g}}function $(o){return typeof o=="number"&&Number.isNaN(o)===!1&&o>=0&&o<=255}function x(o,t,e,a){if($(o)&&$(t)&&$(e)){const i={red:o|0,green:t|0,blue:e|0,alpha:a|0};return $(a)===!0&&(i.alpha=a|0),i}}function V(o,t,e){e/=100;let i=t/100*e;const s=o/60;let r=i*(1-Math.abs(s%2-1)),l=e-i;const g=255,p=0;return i=(i+l)*g|0,r=(r+l)*g|0,l=l*g|0,s>=1&&s<2?x(r,i,l,p):s>=2&&s<3?x(l,i,r,p):s>=3&&s<4?x(l,r,i,p):s>=4&&s<5?x(r,l,i,p):s>=5&&s<=6?x(i,l,r,p):x(i,r,l,p)}function w(o,t,e,a,i){o>a&&(o=a),t>e&&(t=e),o<0&&(o=0),t<0&&(t=0);const s=100-t*100/e|0,r=o*100/a|0;return{...V(i,r,s),saturation:r,value:s}}function S(o,t,e,a){let i=360*o/t|0;return i=i<0?0:i>360?360:i,{...V(i,e,a),hue:i}}function G(o,t){return o=Number((o/t).toFixed(2)),o>1?1:o<0?0:o}function F(o,t,e){let a=o.toString(16),i=t.toString(16),s=e.toString(16);return o<16&&(a=`0${a}`),t<16&&(i=`0${i}`),e<16&&(s=`0${s}`),a+i+s}const X=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function T(o){if(X.test(o)){if(o[0]==="#"&&(o=o.slice(1,o.length)),o.length<6)return;const e=parseInt(o.substring(0,2),16)||0,a=parseInt(o.substring(2,4),16)||0,i=parseInt(o.substring(4,6),16)||0,s=parseInt(o.substring(6,10),16)/255||0,r=x(e,a,i,s),l=r&&_({...r});return{...r,...l}}return!1}function H(o,t){const e=o*100/t;return e<0?0:e>100?100:e}function L(o,t,e,a){return Math.atan2(o-e,t-a)*(180/Math.PI)*-1+180}function C(o,t){return!o&&o!==0?t:o}function R(o,t,e,a){return`rgba(${o}, ${t}, ${e}, ${a})`}function E(o,t,e){let a="";const i=o.slice();return i.sort((s,r)=>s.left-r.left),t==="linear"?a=`linear-gradient(${e}deg,`:a="radial-gradient(",i.forEach((s,r)=>{a+=`rgba(${s.red}, ${s.green}, ${s.blue}, ${s.alpha}) ${s.left}%`,r!==i.length-1&&(a+=",")}),a+=")",a}function N(o,t,e){return function(i){let s=o(i);function r(l){s=t(l,s)||s}window.addEventListener("mousemove",r),window.addEventListener("mouseup",l=>{window.removeEventListener("mousemove",r),e&&e(l,s)},{once:!0})}}const z={class:"picking-area-overlay1"},Y={class:"picking-area-overlay2"},O=n.defineComponent({name:"Picker"}),U=n.defineComponent({...O,props:{red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),a=n.reactive({width:0,height:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.saturation*a.width/100|0)-6),s=n.computed(()=>(a.height-t.value*a.height/100|0)-6),r=n.computed(()=>({backgroundColor:`rgb(${t.red}, ${t.green}, ${t.blue})`,left:`${i.value}px`,top:`${s.value}px`})),l=n.computed(()=>{const{red:c,green:f,blue:h}=A(t.hue);return{backgroundColor:`rgb(${c}, ${f}, ${h})`}}),g=c=>{const f=e==null?void 0:e.value;if(!f)return;const{x:h,y:m}=f.getBoundingClientRect(),b=c.pageX,k=c.pageY,y=b-h,P=k-m,Re=w(y,P,a.height,a.width,t.hue);return t.updateColor(Re,"onStartChange"),{startX:b,startY:k,positionX:y,positionY:P}},p=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const k=c.pageX-f,y=c.pageY-h;m+=k,b+=y;const P=w(m,b,a.height,a.width,t.hue);return{positions:{positionX:m,positionY:b,startX:c.pageX,startY:c.pageY},color:P}},d=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const{positions:k,color:y}=p(c,{startX:f,startY:h,positionX:m,positionY:b});return t.updateColor(y,"onChange"),k},u=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const{positions:k,color:y}=p(c,{startX:f,startY:h,positionX:m,positionY:b});return t.updateColor(y,"onEndChange"),k};return n.onMounted(()=>{const c=e==null?void 0:e.value;c&&(a.width=c.clientWidth,a.height=c.clientHeight),a.mouseEvents=N(g,d,u)}),(c,f)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"pickerAreaRef",ref:e,class:"picking-area",style:n.normalizeStyle(n.unref(l)),onMousedown:f[0]||(f[0]=(...h)=>a.mouseEvents&&a.mouseEvents(...h))},[n.createElementVNode("div",z,[n.createElementVNode("div",Y,[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(r))},null,4)])])],36))}}),j={class:"preview-area"},v=n.defineComponent({name:"PickerPreView"}),W=n.defineComponent({...v,props:{isGradient:{type:Boolean,default:!1},red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},gradientDegree:{default:0},gradientType:{default:""}},setup(o){const t=o,e=n.computed(()=>{let a="";return t.isGradient?(a=E(t.points,t.gradientType,t.gradientDegree),{background:a}):(a=R(t.red,t.green,t.blue,t.alpha),{backgroundColor:a})});return(a,i)=>(n.openBlock(),n.createElementBlock("div",j,[n.createElementVNode("div",{class:"preview-box",style:n.normalizeStyle(n.unref(e))},null,4)]))}}),q=n.defineComponent({name:"Hue"}),J=n.defineComponent({...q,props:{hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),a=n.reactive({width:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.hue*a.width/360|0)-6),s=n.computed(()=>({left:`${i.value}px`})),r=d=>{const u=d.currentTarget.getBoundingClientRect().x,c=d.pageX,f=c-u,h=S(f,a.width,t.saturation,t.value);return t.updateColor(h,"onStartChange"),{startX:c,positionX:f}},l=(d,{startX:u,positionX:c})=>{const f=d.pageX-u;c+=f;const h=c>a.width?a.width:c<=0?0:c,m=S(h,a.width,t.saturation,t.value);return{positions:{positionX:c,startX:d.pageX},color:m}},g=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return t.updateColor(h,"onChange"),f},p=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return t.updateColor(h,"onEndChange"),f};return n.onMounted(()=>{e.value&&(a.width=e.value.clientWidth),a.mouseEvents=N(r,g,p)}),(d,u)=>(n.openBlock(),n.createElementBlock("div",{class:"hue",onMousedown:u[0]||(u[0]=(...c)=>a.mouseEvents&&a.mouseEvents(...c))},[n.createElementVNode("div",{ref_key:"hueRef",ref:e,class:"hue-area"},[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(s))},null,4)],512)],32))}}),K={class:"alpha-area"},Q=n.defineComponent({name:"alpha"}),Z=n.defineComponent({...Q,props:{red:Number,green:Number,blue:Number,alpha:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),a=n.reactive({width:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.alpha*a.width|0)-6),s=n.computed(()=>({left:`${i.value}px`})),r=n.computed(()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${t.red}, ${t.green}, ${t.blue}))`})),l=u=>{const c=u.currentTarget.getBoundingClientRect().x,f=u.pageX,h=f-c;return t.updateColor({alpha:G(h,a.width)},"onStartChange"),{startX:f,positionX:h}},g=(u,{startX:c,positionX:f})=>{const h=u.pageX-c;f+=h;const m=G(f,a.width);return{positions:{positionX:f,startX:u.pageX},alpha:m}},p=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return t.updateColor({alpha:m},"onChange"),h},d=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return t.updateColor({alpha:m},"onEndChange"),h};return n.onMounted(()=>{const u=e.value;u&&(a.width=u.clientWidth),a.mouseEvents=N(l,p,d)}),(u,c)=>(n.openBlock(),n.createElementBlock("div",{class:"alpha",onMousedown:c[0]||(c[0]=(...f)=>a.mouseEvents&&a.mouseEvents(...f))},[n.createElementVNode("div",{class:"gradient",style:n.normalizeStyle(n.unref(r))},null,4),n.createElementVNode("div",K,[n.createElementVNode("div",{ref_key:"alphaMaskRef",ref:e,class:"alpha-mask"},[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(s))},null,4)],512)])],32))}}),ee=n.defineComponent({name:"GradientPoint"}),te=n.defineComponent({...ee,props:{point:Object,activePointIndex:Number,index:Number,width:Number,positions:Object,changeActivePointIndex:Function,updateGradientLeft:Function,removePoint:Function},setup(o){const t=o,e=n.reactive({mouseEvents:()=>!1}),a=n.computed(()=>t.activePointIndex===t.index?" active":""),i=n.computed(()=>({left:`${t.point.left*(t.width/100)-6}px`})),s=p=>{t.changeActivePointIndex(t.index);const d=p.pageX,u=p.pageY,c=d-t.positions.x;return t.updateGradientLeft(t.point.left,t.index,"onStartChange"),{startX:d,startY:u,offsetX:c}},r=(p,{startX:d,offsetX:u})=>{const c=p.pageX-d;u+=c;const f=H(u,t.width);return{positions:{offsetX:u,startX:p.pageX},left:f}},l=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=r(p,{startX:d,offsetX:u});return t.updateGradientLeft(f,t.index,"onChange"),c},g=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=r(p,{startX:d,offsetX:u});return t.updateGradientLeft(f,t.index,"onEndChange"),c};return n.onMounted(()=>{e.mouseEvents=N(s,l,g)}),(p,d)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(`picker-pointer${n.unref(a)}`),style:n.normalizeStyle(n.unref(i)),onMousedown:d[0]||(d[0]=(...u)=>e.mouseEvents&&e.mouseEvents(...u)),onDblclick:d[1]||(d[1]=()=>t.removePoint(o.index)),onClick:d[2]||(d[2]=n.withModifiers(()=>{},["stop"]))},[n.createElementVNode("span",{class:n.normalizeClass(`child-point${n.unref(a)}`)},null,2)],38))}}),ne=n.defineComponent({name:"GradientPoints"}),oe=n.defineComponent({...ne,props:{points:Array,activePointIndex:Number,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){const t=o,e=n.ref(null),a=n.reactive({width:0,positions:{x:0,y:0}}),i=n.computed(()=>({background:E(t.points,"linear",90)})),s=r=>{const l=H(r.pageX-a.positions.x,a.width);t.addPoint(l)};return n.onMounted(()=>{const r=e.value;if(r){a.width=r.clientWidth;const l=r.getBoundingClientRect();a.positions={x:l.x,y:l.y}}}),(r,l)=>(n.openBlock(),n.createElementBlock("div",{class:"gradient",style:n.normalizeStyle(n.unref(i)),onClick:s},[n.createElementVNode("div",{ref_key:"pointsContainerRef",ref:e,class:"gradient-slider-container"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.points,(g,p)=>(n.openBlock(),n.createBlock(te,{key:p,"active-point-index":t.activePointIndex,index:p,point:g,width:a.width,positions:a.positions,"change-active-point-index":t.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"remove-point":t.removePoint},null,8,["active-point-index","index","point","width","positions","change-active-point-index","update-gradient-left","remove-point"]))),128))],512)],4))}}),ae={class:"picker-area"},re={class:"preview"},le={class:"color-hue-alpha"},ie=n.defineComponent({name:"ColorPicker"}),I=n.defineComponent({...ie,props:{isGradient:Boolean,red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function,points:Array,degree:Number,type:String,activePointIndex:Number,changeGradientControl:Function,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){return(t,e)=>(n.openBlock(),n.createElementBlock("div",ae,[n.createVNode(U,{red:o.red,green:o.green,blue:o.blue,hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["red","green","blue","hue","saturation","value","update-color"]),o.isGradient?(n.openBlock(),n.createBlock(oe,{key:0,type:o.type,degree:o.degree,points:o.points,"active-point-index":o.activePointIndex,"change-active-point-index":o.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"add-point":o.addPoint,"remove-point":o.removePoint},null,8,["type","degree","points","active-point-index","change-active-point-index","update-gradient-left","add-point","remove-point"])):n.createCommentVNode("",!0),n.createElementVNode("div",re,[n.createVNode(W,{red:o.red,green:o.green,blue:o.blue,alpha:o.alpha,"is-gradient":o.isGradient,points:o.points,"gradient-degree":o.degree,"gradient-type":o.type},null,8,["red","green","blue","alpha","is-gradient","points","gradient-degree","gradient-type"]),n.createElementVNode("div",le,[n.createVNode(J,{hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["hue","saturation","value","update-color"]),n.createVNode(Z,{alpha:o.alpha,red:o.red,green:o.green,blue:o.blue,"update-color":o.updateColor},null,8,["alpha","red","green","blue","update-color"])])])]))}}),ce={class:"input-container"},se={class:"label"},de=n.defineComponent({name:"Input"}),ue=n.defineComponent({...de,props:{value:{default:""},label:{default:""},type:{default:"text"},classes:{default:""},onFocus:{type:Function,default:()=>!1},onBlur:{type:Function,default:()=>!1}},emits:["input","update:value"],setup(o,{emit:t}){const e=o,a=n.computed({get:()=>e.value,set:s=>t("update:value",s)}),i=s=>{t("input",s)};return(s,r)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(`input-field ${e.classes}`)},[n.createElementVNode("div",ce,[n.withDirectives(n.createElementVNode("input",{"onUpdate:modelValue":r[0]||(r[0]=l=>n.isRef(a)?a.value=l:null),class:n.normalizeClass(`${e.type}-input input`),onFocus:r[1]||(r[1]=(...l)=>e.onFocus&&e.onFocus(...l)),onBlur:r[2]||(r[2]=(...l)=>e.onBlur&&e.onBlur(...l)),onInput:i},null,34),[[n.vModelText,n.unref(a)]])]),n.createElementVNode("div",se,n.toDisplayString(o.label),1)],2))}}),Ie="",M=((o,t)=>{const e=o.__vccOpts||o;for(const[a,i]of t)e[a]=i;return e})(ue,[["__scopeId","data-v-3d2a573b"]]),pe=n.defineComponent({name:"Preview"}),ge=n.defineComponent({...pe,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:null,updateColor:{type:Function,default:o=>!1}},setup(o){const t=o,e=n.reactive({hexValue:F(t.red,t.green,t.blue)}),a=n.computed(()=>F(t.red,t.green,t.blue)),i=()=>{a.value.length===6&&(e.hexValue=a.value)},s=r=>{const l=T(r.target.value);l&&t.updateColor(l)};return n.watch(()=>[t.red,t.green,t.blue],()=>i()),(r,l)=>(n.openBlock(),n.createBlock(M,{value:e.hexValue,label:"hex",classes:"hex",onInput:s},null,8,["value"]))}}),fe=n.defineComponent({name:"RGBItem"}),B=n.defineComponent({...fe,props:{value:null,type:{default:"text"},label:{default:""},onChange:{type:Function,default:o=>!1}},setup(o){const t=o,e=n.getCurrentInstance(),a=n.reactive({inputValue:t.value||0,inProgress:!1}),i=()=>{t.value!==+a.inputValue&&a.inputValue!==""&&(a.inputValue=t.value)},s=l=>{var p;const g=+l.target.value;if(Number.isNaN(g)||g<0||g>255){a.inputValue=t.value,(p=e==null?void 0:e.proxy)==null||p.$forceUpdate();return}a.inputValue=l.target.value,t.onChange(g)},r=()=>{a.inputValue||(a.inputValue=t.value),a.inProgress=!1};return n.watch(()=>t.value,()=>i()),(l,g)=>(n.openBlock(),n.createElementBlock("div",null,[n.createVNode(M,{value:a.inputValue,type:t.type,label:t.label,"on-focus":()=>a.inProgress=!0,"on-blur":r,"in-progress":a.inProgress,classes:"rgb",onInput:s},null,8,["value","type","label","on-focus","in-progress"])]))}}),he=n.defineComponent({name:"RGB"}),me=n.defineComponent({...he,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:()=>!1}},setup(o){const t=o,e=(a,i)=>{if(a==="alpha"){t.updateColor({alpha:i/100});return}const s=_({red:t.red,green:t.green,blue:t.blue,[a]:i});t.updateColor({...s,[a]:i})};return(a,i)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(B,{value:t.red,type:"number",label:"R","on-change":s=>e("red",s)},null,8,["value","on-change"]),n.createVNode(B,{value:t.green,type:"number",label:"G","on-change":s=>e("green",s)},null,8,["value","on-change"]),n.createVNode(B,{value:t.blue,type:"number",label:"B","on-change":s=>e("blue",s)},null,8,["value","on-change"]),n.createVNode(B,{value:~~t.alpha*100,type:"number",label:"Alpha","on-change":s=>e("alpha",s)},null,8,["value","on-change"])],64))}}),Ce={class:"color-preview-area"},be={class:"input-group"},ye=n.defineComponent({name:"Preview"}),D=n.defineComponent({...ye,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:o=>!1}},setup(o){const t=o;return(e,a)=>(n.openBlock(),n.createElementBlock("div",Ce,[n.createElementVNode("div",be,[n.createVNode(ge,{red:t.red,green:t.green,blue:t.blue,"update-color":t.updateColor},null,8,["red","green","blue","update-color"]),n.createVNode(me,{red:t.red,green:t.green,blue:t.blue,alpha:t.alpha,"update-color":t.updateColor},null,8,["red","green","blue","alpha","update-color"])])]))}}),ke=n.defineComponent({name:"Solid"}),_e=n.defineComponent({...ke,props:{red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},hue:{default:0},saturation:{default:0},value:{default:0},onStartChange:{type:Function,default:()=>!1},onChange:{type:Function,default:()=>!1},onEndChange:{type:Function,default:()=>!1}},setup(o){const t=o,e=n.reactive({colorRed:t.red,colorGreen:t.green,colorBlue:t.blue,colorAlpha:t.alpha,colorHue:0,colorSaturation:100,colorValue:100,actions:{onStartChange:t.onStartChange,onChange:t.onChange,onEndChange:t.onEndChange}}),a=n.computed(()=>t.hue===void 0||t.saturation===void 0||t.value===void 0?_({red:t.red,green:t.green,blue:t.blue}):{hue:t.hue,saturation:t.saturation,value:t.value}),i=n.computed(()=>({red:t.red,green:t.green,blue:t.blue,alpha:t.alpha}));n.watch(()=>a.value,r=>{const{hue:l,saturation:g,value:p}=r;e.colorHue=l,e.colorSaturation=g,e.colorValue=p}),n.watch(()=>i.value,r=>{const{red:l,green:g,blue:p,alpha:d}=r;e.colorRed=l,e.colorGreen=g,e.colorBlue=p,e.colorAlpha=d});const s=({red:r,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c},f="onChange")=>{r=C(r,e.colorRed),l=C(l,e.colorGreen),g=C(g,e.colorBlue),p=C(p,e.colorAlpha),d=C(d,e.colorHue),u=C(u,e.colorSaturation),c=C(c,e.colorValue),e.colorRed=r,e.colorGreen=l,e.colorBlue=g,e.colorAlpha=p,e.colorHue=d,e.colorSaturation=u,e.colorValue=c;const h=e.actions[f];h&&h({red:r,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c,style:R(r,l,g,p)})};return n.onMounted(()=>{const{hue:r,saturation:l,value:g}=_({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=r,e.colorSaturation=l,e.colorValue=g}),(r,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(I,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":s,"is-gradient":!1},null,8,["red","green","blue","alpha","hue","saturation","value"]),n.createVNode(D,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":s},null,8,["red","green","blue","alpha"])],64))}}),xe={class:"gradient-controls"},Ee={class:"gradient-type"},Pe={key:0,class:"gradient-degrees-options"},Ne=[n.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)],$e={class:"gradient-degree-value"},Be=n.defineComponent({name:"GradientControls"}),Ve=n.defineComponent({...Be,props:{type:String,degree:Number,changeGradientControl:{type:Function,default:()=>!1}},setup(o){const t=o,e=n.reactive({disableClick:!1,mouseEvents:()=>!1}),a=n.computed(()=>({transform:`rotate(${t.degree}deg)`})),i=g=>{const d=g.target.getBoundingClientRect(),u=~~(8-window.pageYOffset)+d.top,c=~~(8-window.pageXOffset)+d.left;return{centerY:u,centerX:c}},s=(g,{centerX:p,centerY:d})=>{e.disableClick=!0;const u=L(g.clientX,g.clientY,p,d);t.changeGradientControl({degree:~~u})},r=g=>{const p=g.target.classList;p.contains("gradient-degrees")||p.contains("icon-rotate")||(e.disableClick=!1)},l=()=>{if(e.disableClick){e.disableClick=!1;return}let g=(t.degree||0)+45;g>=360&&(g=0),t.changeGradientControl({degree:~~g})};return n.onMounted(()=>{e.mouseEvents=N(i,s,r)}),(g,p)=>(n.openBlock(),n.createElementBlock("div",xe,[n.createElementVNode("div",Ee,[n.createElementVNode("div",{class:n.normalizeClass(`gradient-type-item liner-gradient ${t.type==="linear"?"active":""}`),onClick:p[0]||(p[0]=()=>o.changeGradientControl({type:"linear"}))},null,2),n.createElementVNode("div",{class:n.normalizeClass(`gradient-type-item radial-gradient ${t.type==="radial"?"active":""}`),onClick:p[1]||(p[1]=()=>o.changeGradientControl({type:"radial"}))},null,2)]),t.type==="linear"?(n.openBlock(),n.createElementBlock("div",Pe,[n.createElementVNode("div",{class:"gradient-degrees",onMousedown:p[2]||(p[2]=(...d)=>e.mouseEvents&&e.mouseEvents(...d)),onClick:l},[n.createElementVNode("div",{class:"gradient-degree-center",style:n.normalizeStyle(n.unref(a))},Ne,4)],32),n.createElementVNode("div",$e,[n.createElementVNode("p",null,n.toDisplayString(t.degree)+"°",1)])])):n.createCommentVNode("",!0)]))}}),we=n.defineComponent({name:"Gradient"}),Se=n.defineComponent({...we,props:{type:{default:"linear"},degree:{default:0},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},onStartChange:{type:Function,default:()=>!1},onChange:{type:Function,default:()=>!1},onEndChange:{type:Function,default:()=>!1}},setup(o){const t=o,e=n.reactive({activePointIndex:0,gradientPoints:t.points,activePoint:t.points[0],colorRed:t.points[0].red,colorGreen:t.points[0].green,colorBlue:t.points[0].blue,colorAlpha:t.points[0].alpha,colorHue:0,colorSaturation:100,colorValue:100,gradientType:t.type,gradientDegree:t.degree,actions:{onStartChange:t.onStartChange,onChange:t.onChange,onEndChange:t.onEndChange}}),a=(d=e.activePointIndex)=>{e.gradientPoints.length<=2||(e.gradientPoints.splice(d,1),d>0&&(e.activePointIndex=d-1),t.onChange&&t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)}))},i=d=>{(d.keyCode===46||d.keyCode===8)&&a(e.activePointIndex)},s=d=>{e.activePointIndex=d,e.activePoint=e.gradientPoints[d];const{red:u,green:c,blue:f,alpha:h}=e.activePoint;e.colorRed=u,e.colorGreen=c,e.colorBlue=f,e.colorAlpha=h;const{hue:m,saturation:b,value:k}=_({red:u,green:c,blue:f});e.colorHue=m,e.colorSaturation=b,e.colorValue=k},r=({type:d,degree:u})=>{d=C(d,e.gradientType),u=C(u,e.gradientDegree),e.gradientType=d,e.gradientDegree=u,t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})},l=({red:d,green:u,blue:c,alpha:f,hue:h,saturation:m,value:b},k="onChange")=>{d=C(d,e.colorRed),u=C(u,e.colorGreen),c=C(c,e.colorBlue),f=C(f,e.colorAlpha),h=C(h,e.colorHue),m=C(m,e.colorSaturation),b=C(b,e.colorValue);const y=e.gradientPoints.slice();y[e.activePointIndex]={...y[e.activePointIndex],red:d,green:u,blue:c,alpha:f},e.colorRed=d,e.colorGreen=u,e.colorBlue=c,e.colorAlpha=f,e.colorHue=h,e.colorSaturation=m,e.colorValue=b,e.gradientPoints=y;const P=e.actions[k];P&&P({points:y,type:e.gradientType,degree:e.gradientDegree,style:E(y,e.gradientType,e.gradientDegree)})},g=(d,u,c="onChange")=>{e.gradientPoints[u].left=d;const f=e.actions[c];f&&f({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})},p=d=>{e.gradientPoints.push({...e.gradientPoints[e.activePointIndex],left:d}),e.activePointIndex=e.gradientPoints.length-1,t.onChange&&t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})};return n.onMounted(()=>{const{hue:d,saturation:u,value:c}=_({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=d,e.colorSaturation=u,e.colorValue=c,document.addEventListener("keyup",i)}),n.onBeforeUnmount(()=>{document.removeEventListener("keyup",i)}),(d,u)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(Ve,{type:e.gradientType,degree:e.gradientDegree,"change-gradient-control":r},null,8,["type","degree"]),n.createVNode(I,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":l,"is-gradient":!0,type:e.gradientType,degree:e.gradientDegree,points:e.gradientPoints,"active-point-index":e.activePointIndex,"change-gradient-control":r,"change-active-point-index":s,"update-gradient-left":g,"add-point":p,"remove-point":a},null,8,["red","green","blue","alpha","hue","saturation","value","type","degree","points","active-point-index"]),n.createVNode(D,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":l},null,8,["red","green","blue","alpha"])],64))}}),Ge={class:"ui-color-picker"},Fe=n.defineComponent({name:"ColorPicker"}),He=n.defineComponent({...Fe,props:{isGradient:{type:Boolean,default:!1},color:{default:()=>({red:255,green:0,blue:0,alpha:1,hue:0,saturation:100,value:100})},gradient:{default:()=>({type:"linear",degree:0,points:[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]})},onChange:{default:()=>!1},onStartChange:{default:()=>!1},onEndChange:{default:()=>!1}},setup(o){const t=o;return(e,a)=>(n.openBlock(),n.createElementBlock("div",Ge,[t.isGradient?(n.openBlock(),n.createBlock(Se,{key:0,points:t.gradient.points,type:t.gradient.type,degree:t.gradient.degree,"on-change":t.onChange,"on-start-change":t.onStartChange,"on-end-change":t.onEndChange},null,8,["points","type","degree","on-change","on-start-change","on-end-change"])):(n.openBlock(),n.createBlock(_e,{key:1,red:t.color.red,green:t.color.green,blue:t.color.blue,alpha:t.color.alpha,hue:t.color.hue,saturation:t.color.saturation,value:t.color.value,"on-change":t.onChange,"on-start-change":t.onStartChange,"on-end-change":t.onEndChange},null,8,["red","green","blue","alpha","hue","saturation","value","on-change","on-start-change","on-end-change"]))]))}}),Ae="";return He});
+(function(n,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue")):typeof define=="function"&&define.amd?define(["vue"],_):(n=typeof globalThis<"u"?globalThis:n||self,n["color-gradient-picker-vue3"]=_(n.Vue))})(this,function(n){"use strict";function _({red:o,green:t,blue:e,alpha:r}){let i,s,a,l=0,g;const p=o/255,d=t/255,u=e/255,c=Math.max(p,d,u),f=c-Math.min(p,d,u),h=m=>(c-m)/6/f+1/2;return f===0?(l=0,g=0):(g=f/c,i=h(p),s=h(d),a=h(u),p===c?l=a-s:d===c?l=1/3+i-a:u===c&&(l=2/3+s-i),l<0?l+=1:l>1&&(l-=1)),{hue:Math.round(l*360),saturation:Math.round(g*100),value:Math.round(c*100)}}function A(o){let t=1;const e=o/60;let r=t*(1-Math.abs(e%2-1));const i=0,s=255;let a=0,l=0,g=0;return t=(t+i)*s|0,r=(r+i)*s|0,e>=0&&e<1&&(a=t|0,l=r|0,g=i|0),e>=1&&e<2&&(a=r|0,l=t|0,g=i|0),e>=2&&e<3&&(a=i|0,l=t|0,g=r|0),e>=3&&e<4&&(a=i|0,l=r|0,g=t|0),e>=4&&e<5&&(a=r|0,l=i|0,g=t|0),e>=5&&e<=6&&(a=t|0,l=i|0,g=r|0),{red:a,green:l,blue:g}}function $(o){return typeof o=="number"&&Number.isNaN(o)===!1&&o>=0&&o<=255}function x(o,t,e,r){if($(o)&&$(t)&&$(e)){const i={red:o|0,green:t|0,blue:e|0,alpha:r|0};return $(r)===!0&&(i.alpha=r|0),i}}function V(o,t,e){e/=100;let i=t/100*e;const s=o/60;let a=i*(1-Math.abs(s%2-1)),l=e-i;const g=255,p=0;return i=(i+l)*g|0,a=(a+l)*g|0,l=l*g|0,s>=1&&s<2?x(a,i,l,p):s>=2&&s<3?x(l,i,a,p):s>=3&&s<4?x(l,a,i,p):s>=4&&s<5?x(a,l,i,p):s>=5&&s<=6?x(i,l,a,p):x(i,a,l,p)}function w(o,t,e,r,i){o>r&&(o=r),t>e&&(t=e),o<0&&(o=0),t<0&&(t=0);const s=100-t*100/e|0,a=o*100/r|0;return{...V(i,a,s),saturation:a,value:s}}function S(o,t,e,r){let i=360*o/t|0;return i=i<0?0:i>360?360:i,{...V(i,e,r),hue:i}}function G(o,t){return o=Number((o/t).toFixed(2)),o>1?1:o<0?0:o}function H(o,t,e){let r=o.toString(16),i=t.toString(16),s=e.toString(16);return o<16&&(r=`0${r}`),t<16&&(i=`0${i}`),e<16&&(s=`0${s}`),r+i+s}const X=/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i;function T(o){if(X.test(o)){if(o[0]==="#"&&(o=o.slice(1,o.length)),o.length<6)return;const e=parseInt(o.substring(0,2),16)||0,r=parseInt(o.substring(2,4),16)||0,i=parseInt(o.substring(4,6),16)||0,s=parseInt(o.substring(6,10),16)/255||0,a=x(e,r,i,s),l=a&&_({...a});return{...a,...l}}return!1}function F(o,t){const e=o*100/t;return e<0?0:e>100?100:e}function L(o,t,e,r){return Math.atan2(o-e,t-r)*(180/Math.PI)*-1+180}function C(o,t){return!o&&o!==0?t:o}function R(o,t,e,r){return`rgba(${o}, ${t}, ${e}, ${r})`}function E(o,t,e){let r="";const i=o.slice();return i.sort((s,a)=>s.left-a.left),t==="linear"?r=`linear-gradient(${e}deg,`:r="radial-gradient(",i.forEach((s,a)=>{r+=`rgba(${s.red}, ${s.green}, ${s.blue}, ${s.alpha}) ${s.left}%`,a!==i.length-1&&(r+=",")}),r+=")",r}function N(o,t,e){return function(i){let s=o(i);function a(l){s=t(l,s)||s}window.addEventListener("mousemove",a),window.addEventListener("mouseup",l=>{window.removeEventListener("mousemove",a),e&&e(l,s)},{once:!0})}}const z={class:"picking-area-overlay1"},Y={class:"picking-area-overlay2"},O=n.defineComponent({name:"Picker"}),U=n.defineComponent({...O,props:{red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),r=n.reactive({width:0,height:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.saturation*r.width/100|0)-6),s=n.computed(()=>(r.height-t.value*r.height/100|0)-6),a=n.computed(()=>({backgroundColor:`rgb(${t.red}, ${t.green}, ${t.blue})`,left:`${i.value}px`,top:`${s.value}px`})),l=n.computed(()=>{const{red:c,green:f,blue:h}=A(t.hue);return{backgroundColor:`rgb(${c}, ${f}, ${h})`}}),g=c=>{const f=e==null?void 0:e.value;if(!f)return;const{x:h,y:m}=f.getBoundingClientRect(),b=c.pageX,k=c.pageY,y=b-h,P=k-m,Re=w(y,P,r.height,r.width,t.hue);return t.updateColor(Re,"onStartChange"),{startX:b,startY:k,positionX:y,positionY:P}},p=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const k=c.pageX-f,y=c.pageY-h;m+=k,b+=y;const P=w(m,b,r.height,r.width,t.hue);return{positions:{positionX:m,positionY:b,startX:c.pageX,startY:c.pageY},color:P}},d=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const{positions:k,color:y}=p(c,{startX:f,startY:h,positionX:m,positionY:b});return t.updateColor(y,"onChange"),k},u=(c,{startX:f,startY:h,positionX:m,positionY:b})=>{const{positions:k,color:y}=p(c,{startX:f,startY:h,positionX:m,positionY:b});return t.updateColor(y,"onEndChange"),k};return n.onMounted(()=>{const c=e==null?void 0:e.value;c&&(r.width=c.clientWidth,r.height=c.clientHeight),r.mouseEvents=N(g,d,u)}),(c,f)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"pickerAreaRef",ref:e,class:"picking-area",style:n.normalizeStyle(n.unref(l)),onMousedown:f[0]||(f[0]=(...h)=>r.mouseEvents&&r.mouseEvents(...h))},[n.createElementVNode("div",z,[n.createElementVNode("div",Y,[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(a))},null,4)])])],36))}}),j={class:"preview-area"},v=n.defineComponent({name:"PickerPreView"}),W=n.defineComponent({...v,props:{isGradient:{type:Boolean,default:!1},red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},gradientDegree:{default:0},gradientType:{default:""}},setup(o){const t=o,e=n.computed(()=>{let r="";return t.isGradient?(r=E(t.points,t.gradientType,t.gradientDegree),{background:r}):(r=R(t.red,t.green,t.blue,t.alpha),{backgroundColor:r})});return(r,i)=>(n.openBlock(),n.createElementBlock("div",j,[n.createElementVNode("div",{class:"preview-box",style:n.normalizeStyle(n.unref(e))},null,4)]))}}),q=n.defineComponent({name:"Hue"}),J=n.defineComponent({...q,props:{hue:Number,saturation:Number,value:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),r=n.reactive({width:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.hue*r.width/360|0)-6),s=n.computed(()=>({left:`${i.value}px`})),a=d=>{const u=d.currentTarget.getBoundingClientRect().x,c=d.pageX,f=c-u,h=S(f,r.width,t.saturation,t.value);return t.updateColor(h,"onStartChange"),{startX:c,positionX:f}},l=(d,{startX:u,positionX:c})=>{const f=d.pageX-u;c+=f;const h=c>r.width?r.width:c<=0?0:c,m=S(h,r.width,t.saturation,t.value);return{positions:{positionX:c,startX:d.pageX},color:m}},g=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return t.updateColor(h,"onChange"),f},p=(d,{startX:u,positionX:c})=>{const{positions:f,color:h}=l(d,{startX:u,positionX:c});return t.updateColor(h,"onEndChange"),f};return n.onMounted(()=>{e.value&&(r.width=e.value.clientWidth),r.mouseEvents=N(a,g,p)}),(d,u)=>(n.openBlock(),n.createElementBlock("div",{class:"hue",onMousedown:u[0]||(u[0]=(...c)=>r.mouseEvents&&r.mouseEvents(...c))},[n.createElementVNode("div",{ref_key:"hueRef",ref:e,class:"hue-area"},[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(s))},null,4)],512)],32))}}),K={class:"alpha-area"},Q=n.defineComponent({name:"alpha"}),Z=n.defineComponent({...Q,props:{red:Number,green:Number,blue:Number,alpha:Number,updateColor:Function},setup(o){const t=o,e=n.ref(null),r=n.reactive({width:0,mouseEvents:()=>!1}),i=n.computed(()=>(t.alpha*r.width|0)-6),s=n.computed(()=>({left:`${i.value}px`})),a=n.computed(()=>({background:`linear-gradient(to right, rgba(0, 0, 0, 0), rgb(${t.red}, ${t.green}, ${t.blue}))`})),l=u=>{const c=u.currentTarget.getBoundingClientRect().x,f=u.pageX,h=f-c;return t.updateColor({alpha:G(h,r.width)},"onStartChange"),{startX:f,positionX:h}},g=(u,{startX:c,positionX:f})=>{const h=u.pageX-c;f+=h;const m=G(f,r.width);return{positions:{positionX:f,startX:u.pageX},alpha:m}},p=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return t.updateColor({alpha:m},"onChange"),h},d=(u,{startX:c,positionX:f})=>{const{positions:h,alpha:m}=g(u,{startX:c,positionX:f});return t.updateColor({alpha:m},"onEndChange"),h};return n.onMounted(()=>{const u=e.value;u&&(r.width=u.clientWidth),r.mouseEvents=N(l,p,d)}),(u,c)=>(n.openBlock(),n.createElementBlock("div",{class:"alpha",onMousedown:c[0]||(c[0]=(...f)=>r.mouseEvents&&r.mouseEvents(...f))},[n.createElementVNode("div",{class:"gradient",style:n.normalizeStyle(n.unref(a))},null,4),n.createElementVNode("div",K,[n.createElementVNode("div",{ref_key:"alphaMaskRef",ref:e,class:"alpha-mask"},[n.createElementVNode("div",{class:"picker-pointer",style:n.normalizeStyle(n.unref(s))},null,4)],512)])],32))}}),ee=n.defineComponent({name:"GradientPoint"}),te=n.defineComponent({...ee,props:{point:Object,activePointIndex:Number,index:Number,width:Number,positions:Object,changeActivePointIndex:Function,updateGradientLeft:Function,removePoint:Function},setup(o){const t=o,e=n.reactive({mouseEvents:()=>!1}),r=n.computed(()=>t.activePointIndex===t.index?" active":""),i=n.computed(()=>({left:`${t.point.left*(t.width/100)-6}px`})),s=p=>{t.changeActivePointIndex(t.index);const d=p.pageX,u=p.pageY,c=d-t.positions.x;return t.updateGradientLeft(t.point.left,t.index,"onStartChange"),{startX:d,startY:u,offsetX:c}},a=(p,{startX:d,offsetX:u})=>{const c=p.pageX-d;u+=c;const f=F(u,t.width);return{positions:{offsetX:u,startX:p.pageX},left:f}},l=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return t.updateGradientLeft(f,t.index,"onChange"),c},g=(p,{startX:d,offsetX:u})=>{const{positions:c,left:f}=a(p,{startX:d,offsetX:u});return t.updateGradientLeft(f,t.index,"onEndChange"),c};return n.onMounted(()=>{e.mouseEvents=N(s,l,g)}),(p,d)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(`picker-pointer${n.unref(r)}`),style:n.normalizeStyle(n.unref(i)),onMousedown:d[0]||(d[0]=(...u)=>e.mouseEvents&&e.mouseEvents(...u)),onDblclick:d[1]||(d[1]=()=>t.removePoint(o.index)),onClick:d[2]||(d[2]=n.withModifiers(()=>{},["stop"]))},[n.createElementVNode("span",{class:n.normalizeClass(`child-point${n.unref(r)}`)},null,2)],38))}}),ne=n.defineComponent({name:"GradientPoints"}),oe=n.defineComponent({...ne,props:{points:Array,activePointIndex:Number,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){const t=o,e=n.ref(null),r=n.reactive({width:0,positions:{x:0,y:0}}),i=n.computed(()=>({background:E(t.points,"linear",90)})),s=a=>{const l=F(a.pageX-r.positions.x,r.width);t.addPoint(l)};return n.onMounted(()=>{const a=e.value;if(a){r.width=a.clientWidth;const l=a.getBoundingClientRect();r.positions={x:l.x,y:l.y}}}),(a,l)=>(n.openBlock(),n.createElementBlock("div",{class:"gradient",style:n.normalizeStyle(n.unref(i)),onClick:s},[n.createElementVNode("div",{ref_key:"pointsContainerRef",ref:e,class:"gradient-slider-container"},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(t.points,(g,p)=>(n.openBlock(),n.createBlock(te,{key:p,"active-point-index":t.activePointIndex,index:p,point:g,width:r.width,positions:r.positions,"change-active-point-index":t.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"remove-point":t.removePoint},null,8,["active-point-index","index","point","width","positions","change-active-point-index","update-gradient-left","remove-point"]))),128))],512)],4))}}),re={class:"picker-area"},ae={class:"preview"},le={class:"color-hue-alpha"},ie=n.defineComponent({name:"ColorPicker"}),I=n.defineComponent({...ie,props:{isGradient:Boolean,red:Number,green:Number,blue:Number,alpha:Number,hue:Number,saturation:Number,value:Number,updateColor:Function,points:Array,degree:Number,type:String,activePointIndex:Number,changeGradientControl:Function,changeActivePointIndex:Function,updateGradientLeft:Function,addPoint:Function,removePoint:Function},setup(o){return(t,e)=>(n.openBlock(),n.createElementBlock("div",re,[n.createVNode(U,{red:o.red,green:o.green,blue:o.blue,hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["red","green","blue","hue","saturation","value","update-color"]),o.isGradient?(n.openBlock(),n.createBlock(oe,{key:0,type:o.type,degree:o.degree,points:o.points,"active-point-index":o.activePointIndex,"change-active-point-index":o.changeActivePointIndex,"update-gradient-left":o.updateGradientLeft,"add-point":o.addPoint,"remove-point":o.removePoint},null,8,["type","degree","points","active-point-index","change-active-point-index","update-gradient-left","add-point","remove-point"])):n.createCommentVNode("",!0),n.createElementVNode("div",ae,[n.createVNode(W,{red:o.red,green:o.green,blue:o.blue,alpha:o.alpha,"is-gradient":o.isGradient,points:o.points,"gradient-degree":o.degree,"gradient-type":o.type},null,8,["red","green","blue","alpha","is-gradient","points","gradient-degree","gradient-type"]),n.createElementVNode("div",le,[n.createVNode(J,{hue:o.hue,saturation:o.saturation,value:o.value,"update-color":o.updateColor},null,8,["hue","saturation","value","update-color"]),n.createVNode(Z,{alpha:o.alpha,red:o.red,green:o.green,blue:o.blue,"update-color":o.updateColor},null,8,["alpha","red","green","blue","update-color"])])])]))}}),ce={class:"input-container"},se={class:"label"},de=n.defineComponent({name:"Input"}),ue=n.defineComponent({...de,props:{value:{default:""},label:{default:""},type:{default:"text"},classes:{default:""},onFocus:{type:Function,default:()=>{}},onBlur:{type:Function,default:()=>{}}},emits:["input","update:value"],setup(o,{emit:t}){const e=o,r=n.computed({get:()=>~~e.value,set:s=>t("update:value",s)}),i=s=>{t("input",s)};return(s,a)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(`input-field ${e.classes}`)},[n.createElementVNode("div",ce,[n.withDirectives(n.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=l=>n.isRef(r)?r.value=l:null),class:n.normalizeClass(`${e.type}-input input`),onFocus:a[1]||(a[1]=(...l)=>e.onFocus&&e.onFocus(...l)),onBlur:a[2]||(a[2]=(...l)=>e.onBlur&&e.onBlur(...l)),onInput:i},null,34),[[n.vModelText,n.unref(r)]])]),n.createElementVNode("div",se,n.toDisplayString(o.label),1)],2))}}),Ie="",M=((o,t)=>{const e=o.__vccOpts||o;for(const[r,i]of t)e[r]=i;return e})(ue,[["__scopeId","data-v-b140d166"]]),pe=n.defineComponent({name:"Preview"}),ge=n.defineComponent({...pe,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:null,updateColor:{type:Function,default:o=>!1}},setup(o){const t=o,e=n.reactive({hexValue:H(t.red,t.green,t.blue)}),r=n.computed(()=>H(t.red,t.green,t.blue)),i=()=>{r.value.length===6&&(e.hexValue=r.value)},s=a=>{const l=T(a.target.value);l&&t.updateColor(l)};return n.watch(()=>[t.red,t.green,t.blue],()=>i()),(a,l)=>(n.openBlock(),n.createBlock(M,{value:e.hexValue,label:"hex",classes:"hex",onInput:s},null,8,["value"]))}}),fe=n.defineComponent({name:"RGBItem"}),B=n.defineComponent({...fe,props:{value:null,type:{default:"text"},label:{default:""},onChange:{type:Function,default:o=>!1}},setup(o){const t=o,e=n.getCurrentInstance(),r=n.reactive({inputValue:t.value||0,inProgress:!1}),i=()=>{t.value!==+r.inputValue&&r.inputValue!==""&&(r.inputValue=t.value)},s=l=>{var p;const g=+l.target.value;if(Number.isNaN(g)||g<0||g>255){r.inputValue=t.value,(p=e==null?void 0:e.proxy)==null||p.$forceUpdate();return}r.inputValue=l.target.value,t.onChange(g)},a=()=>{r.inputValue||(r.inputValue=t.value),r.inProgress=!1};return n.watch(()=>t.value,()=>i()),(l,g)=>(n.openBlock(),n.createElementBlock("div",null,[n.createVNode(M,{value:r.inputValue,type:t.type,label:t.label,"on-focus":()=>r.inProgress=!0,"on-blur":a,"in-progress":r.inProgress,classes:"rgb",onInput:s},null,8,["value","type","label","on-focus","in-progress"])]))}}),he=n.defineComponent({name:"RGB"}),me=n.defineComponent({...he,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:()=>!1}},setup(o){const t=o,e=(r,i)=>{if(r==="alpha"){t.updateColor({alpha:i/100});return}const s=_({red:t.red,green:t.green,blue:t.blue,[r]:i});t.updateColor({...s,[r]:i})};return(r,i)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(B,{value:t.red,type:"number",label:"R","on-change":s=>e("red",s)},null,8,["value","on-change"]),n.createVNode(B,{value:t.green,type:"number",label:"G","on-change":s=>e("green",s)},null,8,["value","on-change"]),n.createVNode(B,{value:t.blue,type:"number",label:"B","on-change":s=>e("blue",s)},null,8,["value","on-change"]),n.createVNode(B,{value:t.alpha*100,type:"number",label:"Alpha","on-change":s=>e("alpha",s)},null,8,["value","on-change"])],64))}}),Ce={class:"color-preview-area"},be={class:"input-group"},ye=n.defineComponent({name:"Preview"}),D=n.defineComponent({...ye,props:{red:{default:0},green:{default:0},blue:{default:0},alpha:{default:0},updateColor:{type:Function,default:o=>!1}},setup(o){const t=o;return(e,r)=>(n.openBlock(),n.createElementBlock("div",Ce,[n.createElementVNode("div",be,[n.createVNode(ge,{red:t.red,green:t.green,blue:t.blue,"update-color":t.updateColor},null,8,["red","green","blue","update-color"]),n.createVNode(me,{red:t.red,green:t.green,blue:t.blue,alpha:t.alpha,"update-color":t.updateColor},null,8,["red","green","blue","alpha","update-color"])])]))}}),ke=n.defineComponent({name:"Solid"}),_e=n.defineComponent({...ke,props:{red:{default:255},green:{default:0},blue:{default:0},alpha:{default:1},hue:{default:0},saturation:{default:0},value:{default:0},onStartChange:{default:()=>{}},onChange:{default:()=>{}},onEndChange:{default:()=>{}}},setup(o){const t=o,e=n.reactive({colorRed:t.red,colorGreen:t.green,colorBlue:t.blue,colorAlpha:t.alpha,colorHue:0,colorSaturation:100,colorValue:100,actions:{onStartChange:t.onStartChange,onChange:t.onChange,onEndChange:t.onEndChange}}),r=n.computed(()=>t.hue===void 0||t.saturation===void 0||t.value===void 0?_({red:t.red,green:t.green,blue:t.blue}):{hue:t.hue,saturation:t.saturation,value:t.value}),i=n.computed(()=>({red:t.red,green:t.green,blue:t.blue,alpha:t.alpha}));n.watch(()=>r.value,a=>{const{hue:l,saturation:g,value:p}=a;e.colorHue=l,e.colorSaturation=g,e.colorValue=p}),n.watch(()=>i.value,a=>{const{red:l,green:g,blue:p,alpha:d}=a;e.colorRed=l,e.colorGreen=g,e.colorBlue=p,e.colorAlpha=d});const s=({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c},f="onChange")=>{a=C(a,e.colorRed),l=C(l,e.colorGreen),g=C(g,e.colorBlue),p=C(p,e.colorAlpha),d=C(d,e.colorHue),u=C(u,e.colorSaturation),c=C(c,e.colorValue),e.colorRed=a,e.colorGreen=l,e.colorBlue=g,e.colorAlpha=p,e.colorHue=d,e.colorSaturation=u,e.colorValue=c;const h=e.actions[f];h&&h({red:a,green:l,blue:g,alpha:p,hue:d,saturation:u,value:c,style:R(a,l,g,p)})};return n.onMounted(()=>{const{hue:a,saturation:l,value:g}=_({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=a,e.colorSaturation=l,e.colorValue=g}),(a,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(I,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":s,"is-gradient":!1},null,8,["red","green","blue","alpha","hue","saturation","value"]),n.createVNode(D,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":s},null,8,["red","green","blue","alpha"])],64))}}),xe={class:"gradient-controls"},Ee={class:"gradient-type"},Pe={key:0,class:"gradient-degrees-options"},Ne=[n.createElementVNode("div",{class:"gradient-degree-pointer"},null,-1)],$e={class:"gradient-degree-value"},Be=n.defineComponent({name:"GradientControls"}),Ve=n.defineComponent({...Be,props:{type:String,degree:Number,changeGradientControl:{type:Function,default:()=>!1}},setup(o){const t=o,e=n.reactive({disableClick:!1,mouseEvents:()=>!1}),r=n.computed(()=>({transform:`rotate(${t.degree}deg)`})),i=g=>{const d=g.target.getBoundingClientRect(),u=~~(8-window.pageYOffset)+d.top,c=~~(8-window.pageXOffset)+d.left;return{centerY:u,centerX:c}},s=(g,{centerX:p,centerY:d})=>{e.disableClick=!0;const u=L(g.clientX,g.clientY,p,d);t.changeGradientControl({degree:~~u})},a=g=>{const p=g.target.classList;p.contains("gradient-degrees")||p.contains("icon-rotate")||(e.disableClick=!1)},l=()=>{if(e.disableClick){e.disableClick=!1;return}let g=(t.degree||0)+45;g>=360&&(g=0),t.changeGradientControl({degree:~~g})};return n.onMounted(()=>{e.mouseEvents=N(i,s,a)}),(g,p)=>(n.openBlock(),n.createElementBlock("div",xe,[n.createElementVNode("div",Ee,[n.createElementVNode("div",{class:n.normalizeClass(`gradient-type-item liner-gradient ${t.type==="linear"?"active":""}`),onClick:p[0]||(p[0]=()=>o.changeGradientControl({type:"linear"}))},null,2),n.createElementVNode("div",{class:n.normalizeClass(`gradient-type-item radial-gradient ${t.type==="radial"?"active":""}`),onClick:p[1]||(p[1]=()=>o.changeGradientControl({type:"radial"}))},null,2)]),t.type==="linear"?(n.openBlock(),n.createElementBlock("div",Pe,[n.createElementVNode("div",{class:"gradient-degrees",onMousedown:p[2]||(p[2]=(...d)=>e.mouseEvents&&e.mouseEvents(...d)),onClick:l},[n.createElementVNode("div",{class:"gradient-degree-center",style:n.normalizeStyle(n.unref(r))},Ne,4)],32),n.createElementVNode("div",$e,[n.createElementVNode("p",null,n.toDisplayString(t.degree)+"°",1)])])):n.createCommentVNode("",!0)]))}}),we=n.defineComponent({name:"Gradient"}),Se=n.defineComponent({...we,props:{type:{default:"linear"},degree:{default:0},points:{default:()=>[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]},onStartChange:{type:Function,default:()=>!1},onChange:{type:Function,default:()=>!1},onEndChange:{type:Function,default:()=>!1}},setup(o){const t=o,e=n.reactive({activePointIndex:0,gradientPoints:t.points,activePoint:t.points[0],colorRed:t.points[0].red,colorGreen:t.points[0].green,colorBlue:t.points[0].blue,colorAlpha:t.points[0].alpha,colorHue:0,colorSaturation:100,colorValue:100,gradientType:t.type,gradientDegree:t.degree,actions:{onStartChange:t.onStartChange,onChange:t.onChange,onEndChange:t.onEndChange}}),r=(d=e.activePointIndex)=>{e.gradientPoints.length<=2||(e.gradientPoints.splice(d,1),d>0&&(e.activePointIndex=d-1),t.onChange&&t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)}))},i=d=>{(d.keyCode===46||d.keyCode===8)&&r(e.activePointIndex)},s=d=>{e.activePointIndex=d,e.activePoint=e.gradientPoints[d];const{red:u,green:c,blue:f,alpha:h}=e.activePoint;e.colorRed=u,e.colorGreen=c,e.colorBlue=f,e.colorAlpha=h;const{hue:m,saturation:b,value:k}=_({red:u,green:c,blue:f});e.colorHue=m,e.colorSaturation=b,e.colorValue=k},a=({type:d,degree:u})=>{d=C(d,e.gradientType),u=C(u,e.gradientDegree),e.gradientType=d,e.gradientDegree=u,t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})},l=({red:d,green:u,blue:c,alpha:f,hue:h,saturation:m,value:b},k="onChange")=>{d=C(d,e.colorRed),u=C(u,e.colorGreen),c=C(c,e.colorBlue),f=C(f,e.colorAlpha),h=C(h,e.colorHue),m=C(m,e.colorSaturation),b=C(b,e.colorValue);const y=e.gradientPoints.slice();y[e.activePointIndex]={...y[e.activePointIndex],red:d,green:u,blue:c,alpha:f},e.colorRed=d,e.colorGreen=u,e.colorBlue=c,e.colorAlpha=f,e.colorHue=h,e.colorSaturation=m,e.colorValue=b,e.gradientPoints=y;const P=e.actions[k];P&&P({points:y,type:e.gradientType,degree:e.gradientDegree,style:E(y,e.gradientType,e.gradientDegree)})},g=(d,u,c="onChange")=>{e.gradientPoints[u].left=d;const f=e.actions[c];f&&f({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})},p=d=>{e.gradientPoints.push({...e.gradientPoints[e.activePointIndex],left:d}),e.activePointIndex=e.gradientPoints.length-1,t.onChange&&t.onChange({points:e.gradientPoints,type:e.gradientType,degree:e.gradientDegree,style:E(e.gradientPoints,e.gradientType,e.gradientDegree)})};return n.onMounted(()=>{const{hue:d,saturation:u,value:c}=_({red:e.colorRed,green:e.colorGreen,blue:e.colorBlue});e.colorHue=d,e.colorSaturation=u,e.colorValue=c,document.addEventListener("keyup",i)}),n.onBeforeUnmount(()=>{document.removeEventListener("keyup",i)}),(d,u)=>(n.openBlock(),n.createElementBlock(n.Fragment,null,[n.createVNode(Ve,{type:e.gradientType,degree:e.gradientDegree,"change-gradient-control":a},null,8,["type","degree"]),n.createVNode(I,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,hue:e.colorHue,saturation:e.colorSaturation,value:e.colorValue,"update-color":l,"is-gradient":!0,type:e.gradientType,degree:e.gradientDegree,points:e.gradientPoints,"active-point-index":e.activePointIndex,"change-gradient-control":a,"change-active-point-index":s,"update-gradient-left":g,"add-point":p,"remove-point":r},null,8,["red","green","blue","alpha","hue","saturation","value","type","degree","points","active-point-index"]),n.createVNode(D,{red:e.colorRed,green:e.colorGreen,blue:e.colorBlue,alpha:e.colorAlpha,"update-color":l},null,8,["red","green","blue","alpha"])],64))}}),Ge={class:"ui-color-picker"},He=n.defineComponent({name:"ColorPicker"}),Fe=n.defineComponent({...He,props:{isGradient:{type:Boolean,default:!1},color:{default:()=>({red:255,green:0,blue:0,alpha:1,hue:0,saturation:100,value:100})},gradient:{default:()=>({type:"linear",degree:0,points:[{left:0,red:0,green:0,blue:0,alpha:1},{left:100,red:255,green:0,blue:0,alpha:1}]})},onChange:{default:()=>!1},onStartChange:{default:()=>!1},onEndChange:{default:()=>!1}},setup(o){const t=o;return(e,r)=>(n.openBlock(),n.createElementBlock("div",Ge,[t.isGradient?(n.openBlock(),n.createBlock(Se,{key:0,points:t.gradient.points,type:t.gradient.type,degree:t.gradient.degree,"on-change":t.onChange,"on-start-change":t.onStartChange,"on-end-change":t.onEndChange},null,8,["points","type","degree","on-change","on-start-change","on-end-change"])):(n.openBlock(),n.createBlock(_e,{key:1,red:t.color.red,green:t.color.green,blue:t.color.blue,alpha:t.color.alpha,hue:t.color.hue,saturation:t.color.saturation,value:t.color.value,"on-change":t.onChange,"on-start-change":t.onStartChange,"on-end-change":t.onEndChange},null,8,["red","green","blue","alpha","hue","saturation","value","on-change","on-start-change","on-end-change"]))]))}}),Ae="";return Fe});
diff --git a/lib/dist/style.css b/lib/dist/style.css
index d3d5607..b0e4648 100644
--- a/lib/dist/style.css
+++ b/lib/dist/style.css
@@ -1 +1 @@
-.input-field[data-v-3d2a573b]{display:flex;flex-shrink:0;align-items:center;flex-direction:column}.input-field .label[data-v-3d2a573b]{font-size:12px;line-height:15px;font-weight:600;margin-top:6px;margin-bottom:0;color:#1f2667}.input-field .input-container[data-v-3d2a573b]{display:flex;align-items:center;position:relative;width:100%;border-radius:6px;color:#28314d}.input-field .input-container .input[data-v-3d2a573b]{width:100%;outline:0;color:#1f2667;border-radius:inherit;border:1px solid #bbbfc5;height:24px;font-size:12px;font-weight:600;padding:0 6px}*{box-sizing:border-box}.ui-color-picker{margin:8px;background-color:#fff;display:flex;flex-direction:column;width:280px;user-select:none}.ui-color-picker .gradient-controls{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:8px;height:24px;padding:0 16px}.ui-color-picker .gradient-controls .gradient-type{flex:1;display:flex}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item{height:28px;width:28px;border-radius:50%;position:relative;cursor:pointer}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.active:after{content:"";display:block;position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px;border:2px solid #1f2667;border-radius:50%}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.liner-gradient{background:linear-gradient(270deg,#ffffff 0%,#1f2667 100%)}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.radial-gradient{margin-left:8px;background:radial-gradient(circle,#ffffff 0%,#1f2667 100%)}.ui-color-picker .gradient-controls .gradient-degrees-options{position:relative}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees{display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:28px;height:28px;border:3px solid #1f2667;border-radius:18px;margin-right:54px}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center{position:relative;width:6px;height:22px;pointer-events:none}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center .gradient-degree-pointer{position:absolute;width:6px;height:6px;top:2px;border-radius:3px;background:#1f2667}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value{position:absolute;top:0;right:0;width:48px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #bbbfc5;border-radius:6px}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value p{text-align:center;padding:0 6px}.ui-color-picker .picker-area{display:flex;flex-direction:column;padding:0 16px}.ui-color-picker .picker-area.gradient-tab .picking-area{margin-bottom:10px}.ui-color-picker .picker-area .picking-area{width:100%;height:160px;margin-bottom:16px;position:relative;border-radius:8px}.ui-color-picker .picker-area .picking-area:hover{cursor:default}.ui-color-picker .picker-area .picking-area .picking-area-overlay1{height:100%;width:100%;background:linear-gradient(to right,white 0%,rgba(255,255,255,0) 100%);border-radius:3px}.ui-color-picker .picker-area .picking-area .picking-area-overlay1 .picking-area-overlay2{height:100%;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 100%);border-radius:8px}.ui-color-picker .picker-area .preview{display:flex;flex-direction:row;margin-bottom:16px}.ui-color-picker .picker-area .preview .preview-box{box-sizing:border-box;height:36px;width:36px;border-radius:8px;border:1px solid #ebedf5}.ui-color-picker .picker-area .preview .color-hue-alpha{display:flex;flex-direction:column;flex:1;margin-left:6px}.ui-color-picker .picker-area .preview .color-hue-alpha .hue{width:100%;position:relative;border-radius:10px;margin-bottom:8px;padding:0 7px;background-color:red;cursor:pointer}.ui-color-picker .picker-area .preview .color-hue-alpha .hue .hue-area{position:relative;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)}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha{position:relative;width:100%;overflow:hidden;border-radius:10px;height:14px;cursor:pointer}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .gradient{position:absolute;top:0;left:0;right:0;bottom:0}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area{width:100%;height:100%;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLil7zvuI4tLy1taXNjLS8tdGV4dHVyZXMtLy1jaGVzcy0oMjR4MzIpLWNvcHkiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuMiI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNC4wMDAwMDApIHRyYW5zbGF0ZSgtMC4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOCIgeD0iMCIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTgtQ29weS0yIiB4PSI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);background-size:auto;background-position:50% 50%;border-radius:10px;padding:0 7px}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area .alpha-mask{width:100%;height:100%;position:relative}.ui-color-picker .picker-area .gradient{width:100%;height:14px;position:relative;cursor:pointer;border-radius:10px;margin-bottom:8px;padding:0 7px}.ui-color-picker .picker-area .gradient .gradient-slider-container{height:100%;width:100%;position:relative}.ui-color-picker .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}.ui-color-picker .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}.ui-color-picker .picker-area .picker-pointer .child-point.active{opacity:1}.ui-color-picker .color-preview-area{margin-bottom:8px;padding:0 16px}.ui-color-picker .color-preview-area .input-group{width:100%;display:flex;flex-direction:row;justify-content:space-between}.ui-color-picker .color-preview-area .input-group .uc-field-group:not(:last-child){margin-right:7px}.ui-color-picker .color-preview-area .hex{width:65px}.ui-color-picker .color-preview-area .rgb{width:40px}.ui-color-picker .colors{padding:3px 16px 0}.ui-color-picker .colors .colors-label{display:flex;align-items:center;margin-bottom:4px;cursor:pointer}.ui-color-picker .colors .colors-label .uc-icon{margin-right:8px;transition:transform .3s}.ui-color-picker .colors .colors-label .tp-text{text-transform:uppercase}.ui-color-picker .colors .colors-label.show+.colors-item-container{max-height:80px;padding-bottom:16px}.ui-color-picker .colors .colors-label.show .uc-icon{transform:rotate(-90deg)}.ui-color-picker .colors .template{display:flex;flex-direction:column}.ui-color-picker .colors .global{display:flex;flex-direction:column;align-items:flex-start}.ui-color-picker .colors .colors-item-container{display:flex;flex-wrap:wrap;width:100%;transition:max-height .3s,padding-bottom .3s;max-height:0;overflow:hidden}.ui-color-picker .colors .colors-item-container .colors-item{height:24px;width:24px;border-radius:50%;background-color:#ebedf5;cursor:pointer;position:relative;margin-top:4px;flex-shrink:0}.ui-color-picker .colors .colors-item-container .colors-item:not(.plus){border:1px solid #ebedf5}.ui-color-picker .colors .colors-item-container .colors-item.empty{display:flex;align-items:center;justify-content:center}.ui-color-picker .colors .colors-item-container .colors-item.empty .line{width:2px;height:16px;background-color:#8892b3;border-radius:1px;transform:rotate(45deg)}.ui-color-picker .colors .colors-item-container .colors-item.plus{margin-bottom:4px}.ui-color-picker .colors .colors-item-container .colors-item.plus .uc-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1}.ui-color-picker .colors .colors-item-container .colors-item:not(:first-child):not(:nth-child(9)){margin-left:8px}.ui-color-picker .colors .colors-item-container .colors-item .uc-icon{position:absolute;right:-8px;top:-3px;opacity:0;transition:opacity .3s}.ui-color-picker .colors .colors-item-container .colors-item:hover .uc-icon{opacity:1}.ui-color-picker .colors .colors-item-container .colors-item.active:after{content:"";display:block;position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px;border:2px solid #8892b3;border-radius:50%}
+.input-field[data-v-b140d166]{display:flex;flex-shrink:0;align-items:center;flex-direction:column}.input-field .label[data-v-b140d166]{font-size:12px;line-height:15px;font-weight:600;margin-top:6px;margin-bottom:0;color:#1f2667}.input-field .input-container[data-v-b140d166]{display:flex;align-items:center;position:relative;width:100%;border-radius:6px;color:#28314d}.input-field .input-container .input[data-v-b140d166]{width:100%;outline:0;color:#1f2667;border-radius:inherit;border:1px solid #bbbfc5;height:24px;font-size:12px;font-weight:600;padding:0 6px}*{box-sizing:border-box}.ui-color-picker{margin:8px;background-color:#fff;display:flex;flex-direction:column;width:280px;user-select:none}.ui-color-picker .gradient-controls{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:8px;height:24px;padding:0 16px}.ui-color-picker .gradient-controls .gradient-type{flex:1;display:flex}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item{height:28px;width:28px;border-radius:50%;position:relative;cursor:pointer}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.active:after{content:"";display:block;position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px;border:2px solid #1f2667;border-radius:50%}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.liner-gradient{background:linear-gradient(270deg,#ffffff 0%,#1f2667 100%)}.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.radial-gradient{margin-left:8px;background:radial-gradient(circle,#ffffff 0%,#1f2667 100%)}.ui-color-picker .gradient-controls .gradient-degrees-options{position:relative}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees{display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;width:28px;height:28px;border:3px solid #1f2667;border-radius:18px;margin-right:54px}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center{position:relative;width:6px;height:22px;pointer-events:none}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center .gradient-degree-pointer{position:absolute;width:6px;height:6px;top:2px;border-radius:3px;background:#1f2667}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value{position:absolute;top:0;right:0;width:48px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid #bbbfc5;border-radius:6px}.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value p{text-align:center;padding:0 6px}.ui-color-picker .picker-area{display:flex;flex-direction:column;padding:0 16px}.ui-color-picker .picker-area.gradient-tab .picking-area{margin-bottom:10px}.ui-color-picker .picker-area .picking-area{width:100%;height:160px;margin-bottom:16px;position:relative;border-radius:8px}.ui-color-picker .picker-area .picking-area:hover{cursor:default}.ui-color-picker .picker-area .picking-area .picking-area-overlay1{height:100%;width:100%;background:linear-gradient(to right,white 0%,rgba(255,255,255,0) 100%);border-radius:3px}.ui-color-picker .picker-area .picking-area .picking-area-overlay1 .picking-area-overlay2{height:100%;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 100%);border-radius:8px}.ui-color-picker .picker-area .preview{display:flex;flex-direction:row;margin-bottom:16px}.ui-color-picker .picker-area .preview .preview-box{box-sizing:border-box;height:36px;width:36px;border-radius:8px;border:1px solid #ebedf5}.ui-color-picker .picker-area .preview .color-hue-alpha{display:flex;flex-direction:column;flex:1;margin-left:6px}.ui-color-picker .picker-area .preview .color-hue-alpha .hue{width:100%;position:relative;border-radius:10px;margin-bottom:8px;padding:0 7px;background-color:red;cursor:pointer}.ui-color-picker .picker-area .preview .color-hue-alpha .hue .hue-area{position:relative;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)}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha{position:relative;width:100%;overflow:hidden;border-radius:10px;height:14px;cursor:pointer}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .gradient{position:absolute;top:0;left:0;right:0;bottom:0}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area{width:100%;height:100%;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLil7zvuI4tLy1taXNjLS8tdGV4dHVyZXMtLy1jaGVzcy0oMjR4MzIpLWNvcHkiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuMiI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNC4wMDAwMDApIHRyYW5zbGF0ZSgtMC4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtOCIgeD0iMCIgeT0iNCIgd2lkdGg9IjQiIGhlaWdodD0iNCI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTgtQ29weS0yIiB4PSI0IiB5PSIwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);background-size:auto;background-position:50% 50%;border-radius:10px;padding:0 7px}.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area .alpha-mask{width:100%;height:100%;position:relative}.ui-color-picker .picker-area .gradient{width:100%;height:14px;position:relative;cursor:pointer;border-radius:10px;margin-bottom:8px;padding:0 7px}.ui-color-picker .picker-area .gradient .gradient-slider-container{height:100%;width:100%;position:relative}.ui-color-picker .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}.ui-color-picker .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}.ui-color-picker .picker-area .picker-pointer .child-point.active{opacity:1}.ui-color-picker .color-preview-area{margin-bottom:8px;padding:0 16px}.ui-color-picker .color-preview-area .input-group{width:100%;display:flex;flex-direction:row;justify-content:space-between}.ui-color-picker .color-preview-area .input-group .uc-field-group:not(:last-child){margin-right:7px}.ui-color-picker .color-preview-area .hex{width:65px}.ui-color-picker .color-preview-area .rgb{width:40px}.ui-color-picker .colors{padding:3px 16px 0}.ui-color-picker .colors .colors-label{display:flex;align-items:center;margin-bottom:4px;cursor:pointer}.ui-color-picker .colors .colors-label .uc-icon{margin-right:8px;transition:transform .3s}.ui-color-picker .colors .colors-label .tp-text{text-transform:uppercase}.ui-color-picker .colors .colors-label.show+.colors-item-container{max-height:80px;padding-bottom:16px}.ui-color-picker .colors .colors-label.show .uc-icon{transform:rotate(-90deg)}.ui-color-picker .colors .template{display:flex;flex-direction:column}.ui-color-picker .colors .global{display:flex;flex-direction:column;align-items:flex-start}.ui-color-picker .colors .colors-item-container{display:flex;flex-wrap:wrap;width:100%;transition:max-height .3s,padding-bottom .3s;max-height:0;overflow:hidden}.ui-color-picker .colors .colors-item-container .colors-item{height:24px;width:24px;border-radius:50%;background-color:#ebedf5;cursor:pointer;position:relative;margin-top:4px;flex-shrink:0}.ui-color-picker .colors .colors-item-container .colors-item:not(.plus){border:1px solid #ebedf5}.ui-color-picker .colors .colors-item-container .colors-item.empty{display:flex;align-items:center;justify-content:center}.ui-color-picker .colors .colors-item-container .colors-item.empty .line{width:2px;height:16px;background-color:#8892b3;border-radius:1px;transform:rotate(45deg)}.ui-color-picker .colors .colors-item-container .colors-item.plus{margin-bottom:4px}.ui-color-picker .colors .colors-item-container .colors-item.plus .uc-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1}.ui-color-picker .colors .colors-item-container .colors-item:not(:first-child):not(:nth-child(9)){margin-left:8px}.ui-color-picker .colors .colors-item-container .colors-item .uc-icon{position:absolute;right:-8px;top:-3px;opacity:0;transition:opacity .3s}.ui-color-picker .colors .colors-item-container .colors-item:hover .uc-icon{opacity:1}.ui-color-picker .colors .colors-item-container .colors-item.active:after{content:"";display:block;position:absolute;top:-3px;bottom:-3px;left:-3px;right:-3px;border:2px solid #8892b3;border-radius:50%}
diff --git a/lib/helpers/calculateDegree.ts b/lib/helpers/calculateDegree.ts
index 7184ace..5a5150b 100644
--- a/lib/helpers/calculateDegree.ts
+++ b/lib/helpers/calculateDegree.ts
@@ -1,9 +1,16 @@
+/*
+ * @Author: June
+ * @Description:
+ * @Date: 2023-04-08 22:26:19
+ * @LastEditors: June
+ * @LastEditTime: 2023-05-10 16:38:47
+ */
 export default function calculateDegree(
     x: number,
     y: number,
     centerX: number,
     centerY: number,
-) {
+): number {
     const radians = Math.atan2(x - centerX, y - centerY);
     return radians * (180 / Math.PI) * -1 + 180;
 }
diff --git a/lib/helpers/getAlpha.ts b/lib/helpers/getAlpha.ts
index 0bfc716..d95cb53 100644
--- a/lib/helpers/getAlpha.ts
+++ b/lib/helpers/getAlpha.ts
@@ -4,10 +4,9 @@
  * @Author: June
  * @Date: 2023-03-18 00:33:46
  * @LastEditors: June
- * @LastEditTime: 2023-04-02 16:16:08
+ * @LastEditTime: 2023-05-12 22:55:32
  */
-export default function getAlpha(value: number, width: number) {
+export default function getAlpha(value: number, width: number): number {
     value = Number((value / width).toFixed(2));
-
     return value > 1 ? 1 : value < 0 ? 0 : value;
 }
diff --git a/lib/helpers/getRightValue.ts b/lib/helpers/getRightValue.ts
index 3680ced..2d295c8 100644
--- a/lib/helpers/getRightValue.ts
+++ b/lib/helpers/getRightValue.ts
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-18 00:33:46
  * @LastEditors: June
- * @LastEditTime: 2023-04-02 16:25:28
+ * @LastEditTime: 2023-05-10 16:40:06
  */
 export default function getRightValue(newValue?: number, oldValue?: number) {
     return !newValue && newValue !== 0 ? oldValue : newValue;
diff --git a/lib/helpers/rgbToHex.ts b/lib/helpers/rgbToHex.ts
index 34fb13a..8cde873 100644
--- a/lib/helpers/rgbToHex.ts
+++ b/lib/helpers/rgbToHex.ts
@@ -4,9 +4,13 @@
  * @Author: June
  * @Date: 2023-03-18 00:33:46
  * @LastEditors: June
- * @LastEditTime: 2023-04-02 16:23:47
+ * @LastEditTime: 2023-05-10 16:41:11
  */
-export default function rgbToHex(red: number, green: number, blue: number) {
+export default function rgbToHex(
+    red: number,
+    green: number,
+    blue: number,
+): string {
     let r16 = red.toString(16);
     let g16 = green.toString(16);
     let b16 = blue.toString(16);
diff --git a/lib/helpers/setRgba.ts b/lib/helpers/setRgba.ts
index f497dff..4dd9441 100644
--- a/lib/helpers/setRgba.ts
+++ b/lib/helpers/setRgba.ts
@@ -4,9 +4,9 @@
  * @Author: June
  * @Date: 2023-03-18 00:33:46
  * @LastEditors: June
- * @LastEditTime: 2023-04-02 17:11:23
+ * @LastEditTime: 2023-05-10 16:41:54
  */
-function isValidRGBValue(value: number) {
+function isValidRGBValue(value: number): boolean {
     return (
         typeof value === 'number' &&
         Number.isNaN(value) === false &&
diff --git a/lib/helpers/updateGradientActivePercent.ts b/lib/helpers/updateGradientActivePercent.ts
index 5f75b22..2a06952 100644
--- a/lib/helpers/updateGradientActivePercent.ts
+++ b/lib/helpers/updateGradientActivePercent.ts
@@ -1,7 +1,14 @@
+/*
+ * @Author: June
+ * @Description:
+ * @Date: 2023-04-08 22:26:19
+ * @LastEditors: June
+ * @LastEditTime: 2023-05-10 16:42:23
+ */
 export default function updateGradientActivePercent(
     offsetX: number,
     width: number,
-) {
+): number {
     const leftPercent = (offsetX * 100) / width;
     return leftPercent < 0 ? 0 : leftPercent > 100 ? 100 : leftPercent;
 }
diff --git a/lib/package.json b/lib/package.json
index e9302af..6524163 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "color-gradient-picker-vue3",
-    "version": "0.1.5",
+    "version": "1.0.0",
     "type": "module",
     "author": "June",
     "private": false,
diff --git a/lib/src/App.vue b/lib/src/App.vue
index b5350bb..241784a 100644
--- a/lib/src/App.vue
+++ b/lib/src/App.vue
@@ -4,7 +4,7 @@
  * @Author: June
  * @Date: 2023-03-17 23:48:15
  * @LastEditors: June
- * @LastEditTime: 2023-04-11 15:37:54
+ * @LastEditTime: 2023-05-12 23:08:17
 -->
 <template>
     <div id="app" :style="{ display: 'flex', textAlign: 'center' }">