@aurouscia/au-color-picker 1.1.0 → 2.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Au
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024-2026 Au
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -25,6 +25,35 @@ import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';
     ></AuColorPicker>
 ```
 
+### 输入模式持久化
+`AuColorPicker` 支持通过 `localStorage` 记住用户上次选择的输入模式（HEX / RGB / HSV）。
+
+- **默认行为**：未指定 `color-mode-storage-key` 时，**不启用持久化**，每次打开默认 HEX 模式（向后兼容）。
+- **启用持久化**：传入字符串指定 `localStorage` 键名，例如 `"acp-color-mode"`。
+- **自定义键名**：适用于同一页面使用多个选择器时避免冲突。
+- **禁用持久化**：传入 `false` 或空字符串可显式禁用（与不传效果相同）。
+- **默认模式**：通过 `color-mode` 属性指定默认输入模式（`'rgb' | 'hsv' | 'hex'`）。当启用持久化且 `localStorage` 中已有值时，优先使用存储值；否则回退到 `color-mode`；未指定 `color-mode` 时回退到 `'hex'`。
+
+```vue
+<!-- 默认：不启用持久化，默认 HEX -->
+<AuColorPicker v-model="color" />
+
+<!-- 不启用持久化，但默认 RGB -->
+<AuColorPicker v-model="color" color-mode="rgb" />
+
+<!-- 启用持久化（使用推荐键名） -->
+<AuColorPicker v-model="color" color-mode-storage-key="acp-color-mode" />
+
+<!-- 启用持久化 + 指定默认模式 -->
+<AuColorPicker v-model="color" color-mode-storage-key="acp-color-mode" color-mode="hsv" />
+
+<!-- 自定义键名 -->
+<AuColorPicker v-model="color" color-mode-storage-key="my-app-color-mode" />
+
+<!-- 显式禁用持久化（与不传效果相同） -->
+<AuColorPicker v-model="color" :color-mode-storage-key="false" />
+```
+
 ### 预设+自定义
 ⚠️注意：“选中的预设”是与“自定义颜色”独立的两个状态  
 这使得模型的颜色可以依赖于系统全局配置（预设的颜色）
@@ -78,6 +107,8 @@ export interface PickerProps{
     entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
     panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
     showPackageName?:boolean //是否显示包名
+    colorModeStorageKey?: string | false //输入模式持久化的 localStorage 键名，传 false 或空字符串可禁用
+    colorMode?: 'rgb' | 'hsv' | 'hex' //输入模式的默认值，storage 中无值时回退到此，默认 'hex'
 }
 
 //AuColorPickerPresetsNested的属性
@@ -94,8 +125,10 @@ export interface NamedPreset{
 }
 ```
 ## 更新记录
-### 1.0.0
-修改了api
+### 2.1.0
+新增 `color-mode-storage-key` 和 `color-mode` 属性，支持通过 `localStorage` 持久化用户选择的输入模式（HEX / RGB / HSV）。默认不启用持久化，向后兼容。
+### 2.0.0
+将 vue 改为 peerDependency（正确做法）
 ### 1.1.0
 修复了旧浏览器上失效的问题（消除过新的context.reset函数）
 

package/dist/au-color-picker.css

@@ -1 +1 @@
-.acpRingBody[data-v-1352f0d3]{position:relative}canvas[data-v-1352f0d3]{position:absolute;inset:0;width:100%;height:100%}[data-v-dc351014]{margin:0;padding:0}.acpSep[data-v-dc351014]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-dc351014]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-dc351014]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-dc351014]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-dc351014]:hover{color:#000}.acpEntry[data-v-dc351014]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-dc351014]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-dc351014]{position:relative;width:fit-content}.acp label[data-v-dc351014]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-dc351014]{cursor:pointer}.acpPackageName[data-v-dc351014]{position:absolute;left:2px;bottom:3px;font-size:8px;color:#ccc;text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none}.acpParams[data-v-dc351014]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-dc351014],.acpParams input[data-v-dc351014]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-dc351014]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-dc351014]{text-align:center}.acpParams .acpSingleInput input[data-v-dc351014]{width:120px}.acpParams .acpTripleInputs[data-v-dc351014]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-dc351014]{width:40px}[data-v-1e965bbc]{margin:0;padding:0}.acpSep[data-v-1e965bbc]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-1e965bbc]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-1e965bbc]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-1e965bbc]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-1e965bbc]:hover{color:#000}.acpEntry[data-v-1e965bbc]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-1e965bbc]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-1e965bbc]{position:relative;width:fit-content}.acp label[data-v-1e965bbc]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-1e965bbc]{cursor:pointer}.acpNamedPresets[data-v-1e965bbc]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-1e965bbc]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-1e965bbc]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-1e965bbc]:hover{color:#000}
+.acpRingBody[data-v-a0477470]{position:relative}canvas[data-v-a0477470]{position:absolute;inset:0;width:100%;height:100%}[data-v-d4794019]{margin:0;padding:0}.acpSep[data-v-d4794019]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-d4794019]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-d4794019]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-d4794019]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-d4794019]:hover{color:#000}.acpEntry[data-v-d4794019]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-d4794019]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-d4794019]{position:relative;width:fit-content}.acp label[data-v-d4794019]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-d4794019]{cursor:pointer}.acpPackageName[data-v-d4794019]{position:absolute;left:2px;bottom:3px;font-size:8px;color:#ccc;text-align:right;cursor:pointer;-webkit-user-select:none;user-select:none}.acpParams[data-v-d4794019]{display:flex;justify-content:space-between;align-items:center;padding:5px}.acpParams select[data-v-d4794019],.acpParams input[data-v-d4794019]{margin:0;padding:2px;display:block;font-size:16px;box-sizing:border-box;height:24px;line-height:24px}.acpParams select[data-v-d4794019]{-webkit-user-select:none;user-select:none}.acpParams input[data-v-d4794019]{text-align:center}.acpParams .acpSingleInput input[data-v-d4794019]{width:120px}.acpParams .acpTripleInputs[data-v-d4794019]{display:flex;justify-content:space-around}.acpParams .acpTripleInputs input[data-v-d4794019]{width:40px}[data-v-9fbc3723]{margin:0;padding:0}.acpSep[data-v-9fbc3723]{height:2px;border-radius:100px;flex-grow:0;flex-shrink:0;background-color:#ddd}.acpPresetBody[data-v-9fbc3723]{width:25px;height:25px;border-radius:1000px;cursor:pointer}.acpDoneBtn[data-v-9fbc3723]{display:flex;justify-content:center;align-items:center;margin:8px;-webkit-user-select:none;user-select:none}.acpDoneBtn button[data-v-9fbc3723]{background:none;border:none;font-weight:700;color:gray;font-size:16px;cursor:pointer}.acpDoneBtn button[data-v-9fbc3723]:hover{color:#000}.acpEntry[data-v-9fbc3723]{width:30px;height:30px;cursor:pointer;border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff}.acpPanel[data-v-9fbc3723]{border-radius:5px;box-shadow:0 0 5px #000;background-color:#fff;margin-top:3px;position:absolute}.acp[data-v-9fbc3723]{position:relative;width:fit-content}.acp label[data-v-9fbc3723]{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer}.acp input[type=radio][data-v-9fbc3723]{cursor:pointer}.acpNamedPresets[data-v-9fbc3723]{margin:5px;display:flex;flex-direction:column;gap:4px}.acpNamedPresets[data-v-9fbc3723]>*{display:flex;justify-content:flex-start;align-items:center;gap:5px}.acpNamedPresets>* .acpPresetName[data-v-9fbc3723]{color:#666}.acpNamedPresets>* .acpPresetName[data-v-9fbc3723]:hover{color:#000}

package/dist/au-color-picker.es.js

@@ -1,204 +1,204 @@
-import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, createElementBlock as T, openBlock as N, normalizeStyle as j, isRef as Pe, createElementVNode as d, computed as K, onBeforeMount as ce, watch as W, createCommentVNode as Q, unref as h, normalizeClass as ke, createVNode as de, withDirectives as ee, vModelSelect as Ce, vModelRadio as le, Fragment as Se, renderList as we, toDisplayString as Ie } from "vue";
-import M from "color-convert";
-function be(l, P) {
-  const m = l.x - P.x, t = l.y - P.y;
-  return m ** 2 + t ** 2;
+import { defineComponent as ne, ref as I, onMounted as xe, onUnmounted as he, openBlock as R, createElementBlock as N, isRef as Pe, normalizeStyle as j, createElementVNode as d, computed as Z, watch as L, onBeforeMount as ce, unref as x, normalizeClass as Se, createVNode as de, withDirectives as Q, vModelSelect as ke, createCommentVNode as ee, vModelRadio as le, Fragment as Ce, renderList as we, toDisplayString as Ie } from "vue";
+import D from "color-convert";
+function Be(l, h) {
+  const g = l.x - h.x, t = l.y - h.y;
+  return g ** 2 + t ** 2;
 }
-function Be(l, P) {
-  const m = l.x - P.x, t = l.y - P.y;
-  return Math.atan2(t, m);
+function be(l, h) {
+  const g = l.x - h.x, t = l.y - h.y;
+  return Math.atan2(t, g);
 }
-const B = 400, U = 400, J = 200, Ve = 200, se = 190, ae = 150, z = 200, ie = 16, re = 3, Re = /* @__PURE__ */ ne({
+const M = 400, K = 400, J = 200, Ve = 200, ae = 190, se = 150, F = 200, re = 16, ie = 3, Me = /* @__PURE__ */ ne({
   __name: "AuColorPickerRing",
   props: {
     initialHex: {}
   },
   emits: ["changed"],
-  setup(l, { expose: P, emit: m }) {
-    const t = I(), y = I();
+  setup(l, { expose: h, emit: g }) {
+    const t = I(), m = I();
     let u, c;
-    const C = { x: 199, y: 199 }, A = (se + ae) / 2, E = se ** 2, L = ae ** 2, V = (B - z) / 2, D = V + z, k = I(0), S = I(100), w = I(100), R = l;
-    let s;
-    function a() {
-      createImageBitmap(s).then((n) => {
-        u.drawImage(n, 0, 0);
+    const P = { x: 199, y: 199 }, H = (ae + se) / 2, A = ae ** 2, _ = se ** 2, B = (M - F) / 2, z = B + F, C = I(0), S = I(100), w = I(100), b = l;
+    let a;
+    function i() {
+      createImageBitmap(a).then((o) => {
+        u.drawImage(o, 0, 0);
       });
     }
     function v() {
-      const n = t.value?.getContext("2d"), i = y.value?.getContext("2d");
-      if (!n || !i)
+      const o = t.value?.getContext("2d"), s = m.value?.getContext("2d");
+      if (!o || !s)
         throw Error("canvas context getting error");
-      if (R.initialHex) {
-        const r = M.hex.hsv(R.initialHex);
-        k.value = r[0], S.value = r[1], w.value = r[2];
+      if (b.initialHex) {
+        const r = D.hex.hsv(b.initialHex);
+        C.value = r[0], S.value = r[1], w.value = r[2];
       }
-      u = n, c = i, s = u.createImageData(B, U), H(), e(), G(), a();
+      u = o, c = s, a = u.createImageData(M, K), E(), $(), G(), i();
     }
-    function H() {
-      for (let n = 0; n < B; n++)
-        for (let i = 0; i < U; i++) {
-          const r = { x: n, y: i };
-          if (g(r)) {
-            const p = r.y * B * 4 + r.x * 4, b = F(r), q = M.hsv.rgb([b, 100, 100]);
-            s.data[p] = q[0], s.data[p + 1] = q[1], s.data[p + 2] = q[2], s.data[p + 3] = 255;
+    function E() {
+      for (let o = 0; o < M; o++)
+        for (let s = 0; s < K; s++) {
+          const r = { x: o, y: s };
+          if (Y(r)) {
+            const y = r.y * M * 4 + r.x * 4, V = U(r), q = D.hsv.rgb([V, 100, 100]);
+            a.data[y] = q[0], a.data[y + 1] = q[1], a.data[y + 2] = q[2], a.data[y + 3] = 255;
           }
         }
     }
-    function F(n) {
-      return 360 * ((Be(n, C) + Math.PI) / (2 * Math.PI));
+    function U(o) {
+      return 360 * ((be(o, P) + Math.PI) / (2 * Math.PI));
     }
-    function g(n) {
-      const i = be(C, n);
-      return i > L && i < E;
+    function Y(o) {
+      const s = Be(P, o);
+      return s > _ && s < A;
     }
-    function e() {
-      for (let n = 0; n < B; n++)
-        for (let i = 0; i < U; i++) {
-          const r = { x: n, y: i };
-          if ($(r)) {
-            const p = r.y * B * 4 + r.x * 4, { s: b, v: q } = o(r), _ = M.hsv.rgb([k.value, b, q]);
-            s.data[p] = _[0], s.data[p + 1] = _[1], s.data[p + 2] = _[2], s.data[p + 3] = 255;
+    function $() {
+      for (let o = 0; o < M; o++)
+        for (let s = 0; s < K; s++) {
+          const r = { x: o, y: s };
+          if (p(r)) {
+            const y = r.y * M * 4 + r.x * 4, { s: V, v: q } = X(r), O = D.hsv.rgb([C.value, V, q]);
+            a.data[y] = O[0], a.data[y + 1] = O[1], a.data[y + 2] = O[2], a.data[y + 3] = 255;
           }
         }
     }
-    function o(n) {
-      const i = n.x - V, r = n.y - V;
-      let p = i / z, b = 1 - r / z;
-      return p > 1 ? p = 1 : p < 0 && (p = 0), b > 1 ? b = 1 : b < 0 && (b = 0), { s: 100 * p, v: 100 * b };
+    function X(o) {
+      const s = o.x - B, r = o.y - B;
+      let y = s / F, V = 1 - r / F;
+      return y > 1 ? y = 1 : y < 0 && (y = 0), V > 1 ? V = 1 : V < 0 && (V = 0), { s: 100 * y, v: 100 * V };
     }
-    function $(n) {
-      return !(n.x < V || n.x > D || n.y < V || n.y > D);
+    function p(o) {
+      return !(o.x < B || o.x > z || o.y < B || o.y > z);
     }
-    let f = !1, x = "none", X = I(!1);
-    function Y(n, i) {
-      if (f || i && !X.value)
+    let e = !1, n = "none", T = I(!1);
+    function f(o, s) {
+      if (e || s && !T.value)
         return;
-      f = !0;
-      const r = pe(n);
-      if (x === "none" && ($(r) ? x = "square" : g(r) && (x = "ring")), x === "ring" && (n.preventDefault(), k.value = F(r), e(), a()), x === "square") {
-        n.preventDefault();
-        const p = o(r);
-        S.value = p.s, w.value = p.v;
+      e = !0;
+      const r = pe(o);
+      if (n === "none" && (p(r) ? n = "square" : Y(r) && (n = "ring")), n === "ring" && (o.preventDefault(), C.value = U(r), $(), i()), n === "square") {
+        o.preventDefault();
+        const y = X(r);
+        S.value = y.s, w.value = y.v;
       }
-      x !== "none" && G(!0), f = !1;
+      n !== "none" && G(!0), e = !1;
     }
-    function Z() {
-      x = "none", X.value = !1;
+    function k() {
+      n = "none", T.value = !1;
     }
-    function pe(n) {
-      let i, r;
+    function pe(o) {
+      let s, r;
       if (!t.value)
         return { x: -1, y: -1 };
-      if ("touches" in n) {
-        const p = t.value.getBoundingClientRect();
-        i = n.touches[0].clientX - p.left, r = n.touches[0].clientY - p.top;
+      if ("touches" in o) {
+        const y = t.value.getBoundingClientRect();
+        s = o.touches[0].clientX - y.left, r = o.touches[0].clientY - y.top;
       } else
-        i = n.offsetX, r = n.offsetY;
-      return i = i * B / J, r = r * B / J, { x: i, y: r };
+        s = o.offsetX, r = o.offsetY;
+      return s = s * M / J, r = r * M / J, { x: s, y: r };
     }
-    function G(n) {
-      if (n) {
-        const ge = M.hsv.hex([k.value, S.value, w.value]);
-        ye("changed", ge);
+    function G(o) {
+      if (o) {
+        const me = D.hsv.hex([C.value, S.value, w.value]);
+        ge("changed", me);
       }
-      const i = (k.value / 360 * 2 + 1) * Math.PI, r = Math.cos(i) * A + B / 2, p = Math.sin(i) * A + U / 2, b = S.value / 100 * z + V, q = (1 - w.value / 100) * z + V;
-      c.clearRect(0, 0, B, U), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, p, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, p, re, 0, 2 * Math.PI), c.fill();
-      const _ = w.value > 50 ? "black" : "#ddd";
-      c.strokeStyle = _, c.fillStyle = _, c.beginPath(), c.arc(b, q, ie - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(b, q, re, 0, 2 * Math.PI), c.fill();
+      const s = (C.value / 360 * 2 + 1) * Math.PI, r = Math.cos(s) * H + M / 2, y = Math.sin(s) * H + K / 2, V = S.value / 100 * F + B, q = (1 - w.value / 100) * F + B;
+      c.clearRect(0, 0, M, K), c.lineWidth = 4, c.strokeStyle = "black", c.fillStyle = "black", c.beginPath(), c.arc(r, y, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(r, y, ie, 0, 2 * Math.PI), c.fill();
+      const O = w.value > 50 ? "black" : "#ddd";
+      c.strokeStyle = O, c.fillStyle = O, c.beginPath(), c.arc(V, q, re - 2, 0, 2 * Math.PI), c.stroke(), c.beginPath(), c.arc(V, q, ie, 0, 2 * Math.PI), c.fill();
     }
-    function me(n) {
-      const i = M.hex.hsv(n);
-      k.value = i[0], S.value = i[1], w.value = i[2], e(), a(), G();
+    function ye(o) {
+      const s = D.hex.hsv(o);
+      C.value = s[0], S.value = s[1], w.value = s[2], $(), i(), G();
     }
-    const ye = m;
-    return P({ enforceTo: me }), xe(() => {
-      v(), window.addEventListener("touchend", Z), window.addEventListener("mouseup", Z);
+    const ge = g;
+    return h({ enforceTo: ye }), xe(() => {
+      v(), window.addEventListener("touchend", k), window.addEventListener("mouseup", k);
     }), he(() => {
-      window.removeEventListener("touchend", Z), window.removeEventListener("mouseup", Z);
-    }), (n, i) => (N(), T("div", {
+      window.removeEventListener("touchend", k), window.removeEventListener("mouseup", k);
+    }), (o, s) => (R(), N("div", {
       class: "acpRingBody",
       style: j({ width: J + "px", height: Ve + "px" }),
-      onTouchstart: Y,
-      onTouchmove: Y,
-      onTouchend: Z,
-      onMousemove: i[0] || (i[0] = (r) => Y(r, !0)),
-      onMousedown: i[1] || (i[1] = (r) => {
-        Y(r), Pe(X) ? X.value = !0 : X = !0;
+      onTouchstart: f,
+      onTouchmove: f,
+      onTouchend: k,
+      onMousemove: s[0] || (s[0] = (r) => f(r, !0)),
+      onMousedown: s[1] || (s[1] = (r) => {
+        f(r), Pe(T) ? T.value = !0 : T = !0;
       })
     }, [
       d("canvas", {
-        width: B,
-        height: U,
+        width: M,
+        height: K,
         ref_key: "cvs",
         ref: t
       }, null, 512),
       d("canvas", {
-        width: B,
-        height: U,
+        width: M,
+        height: K,
         ref_key: "cursorCvs",
-        ref: y
+        ref: m
       }, null, 512)
     ], 36));
   }
-}), oe = (l, P) => {
-  const m = l.__vccOpts || l;
-  for (const [t, y] of P)
-    m[t] = y;
-  return m;
-}, Te = /* @__PURE__ */ oe(Re, [["__scopeId", "data-v-1352f0d3"]]);
+}), oe = (l, h) => {
+  const g = l.__vccOpts || l;
+  for (const [t, m] of h)
+    g[t] = m;
+  return g;
+}, Te = /* @__PURE__ */ oe(Me, [["__scopeId", "data-v-a0477470"]]);
 function te(l) {
   return /^#?([0-9A-F]{3}|[0-9A-F]{6})$/i.test(l);
 }
-function ve(l, P) {
-  const m = I(!1), t = K(() => {
-    let C = {};
-    return m.value || (C.boxShadow = "none"), l.entryStyles && Object.assign(C, l.entryStyles), m.value && (C.transition = "0s", Object.assign(C, l.entryActiveStyles)), C.backgroundColor = P.value, C;
+function ve(l, h) {
+  const g = I(!1), t = Z(() => {
+    let P = {};
+    return g.value || (P.boxShadow = "none"), l.entryStyles && Object.assign(P, l.entryStyles), g.value && (P.transition = "0s", Object.assign(P, l.entryActiveStyles)), P.backgroundColor = h.value, P;
   });
-  function y() {
-    m.value = !1;
+  function m() {
+    g.value = !1;
   }
   let u = 0;
   function c() {
-    if (l.entryRespondDelay && (window.clearTimeout(u), !m.value)) {
+    if (l.entryRespondDelay && (window.clearTimeout(u), !g.value)) {
       u = window.setTimeout(() => {
-        m.value = !0;
+        g.value = !0;
       }, l.entryRespondDelay);
       return;
     }
-    m.value = !m.value;
+    g.value = !g.value;
   }
-  return { panelShow: m, closePanel: y, togglePanel: c, entryStylesActual: t };
+  return { panelShow: g, closePanel: m, togglePanel: c, entryStylesActual: t };
 }
 function ue() {
   window.alert("https://www.npmjs.com/package/@aurouscia/au-color-picker");
 }
-function O(l) {
+function W(l) {
   return l.startsWith("#") ? l.toUpperCase() : "#" + l.toUpperCase();
 }
 function fe(l) {
   return {
-    panelStyles: K(() => {
-      const m = l.panelBaseZIndex;
-      let t, y;
+    panelStyles: Z(() => {
+      const g = l.panelBaseZIndex;
+      let t, m;
       const u = l.pos;
-      return typeof u == "number" ? t = u + "px" : u == "left" ? y = "0px" : t = "0px", {
-        zIndex: (m || 0) + 100,
+      return typeof u == "number" ? t = u + "px" : u == "left" ? m = "0px" : t = "0px", {
+        zIndex: (g || 0) + 100,
         left: t,
-        right: y
+        right: m
       };
     })
   };
 }
-const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams" }, Me = {
+const Re = { class: "acp" }, Ne = { class: "acpRing" }, De = { class: "acpParams" }, He = {
   key: 0,
   class: "acpSingleInput"
 }, Ae = ["value"], Ee = {
   key: 1,
   class: "acpTripleInputs"
-}, $e = ["value"], qe = ["value"], Ue = ["value"], Le = {
+}, $e = ["value"], qe = ["value"], Ue = ["value"], Ke = {
   key: 2,
   class: "acpTripleInputs"
-}, _e = ["value"], ze = ["value"], Oe = ["value"], We = { class: "acpDoneBtn" }, je = /* @__PURE__ */ ne({
+}, Le = ["value"], _e = ["value"], ze = ["value"], Oe = { class: "acpDoneBtn" }, Fe = /* @__PURE__ */ ne({
   __name: "AuColorPicker",
   props: {
     modelValue: {},
@@ -210,163 +210,189 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
     panelBaseZIndex: {},
     entryRespondDelay: {},
     panelClickStopPropagation: { type: Boolean },
-    showPackageName: { type: Boolean }
+    showPackageName: { type: Boolean },
+    colorModeStorageKey: { type: [String, Boolean] },
+    colorMode: {}
   },
   emits: ["done", "update:modelValue"],
-  setup(l, { expose: P, emit: m }) {
-    const t = l, y = I(), u = I("#ff0000"), { panelShow: c, closePanel: C, togglePanel: A, entryStylesActual: E } = ve(t, u), { panelStyles: L } = fe(t);
-    function V(g) {
-      u.value = O(g), a();
+  setup(l, { expose: h, emit: g }) {
+    const t = l, m = I(), u = I("#ff0000"), { panelShow: c, closePanel: P, togglePanel: H, entryStylesActual: A } = ve(t, u), { panelStyles: _ } = fe(t);
+    function B() {
+      return t.colorModeStorageKey === !1 || t.colorModeStorageKey === "" ? !1 : t.colorModeStorageKey || !1;
     }
-    const D = I("hex"), k = K(() => M.hex.rgb(u.value)), S = K(() => M.hex.hsv(u.value));
-    function w(g) {
-      const e = g.target;
+    function z() {
+      const p = B();
+      if (!p) return null;
+      try {
+        const e = localStorage.getItem(p);
+        if (e === "rgb" || e === "hsv" || e === "hex")
+          return e;
+      } catch {
+      }
+      return null;
+    }
+    function C(p) {
+      const e = B();
+      if (e)
+        try {
+          localStorage.setItem(e, p);
+        } catch {
+        }
+    }
+    const S = I(z() || t.colorMode || "hex");
+    L(S, C);
+    function w(p) {
+      u.value = W(p), U();
+    }
+    const b = Z(() => D.hex.rgb(u.value)), a = Z(() => D.hex.hsv(u.value));
+    function i(p) {
+      const e = p.target;
       if ("value" in e) {
-        const o = e.value;
-        if (o && te(o)) {
-          u.value = O(o), y.value?.enforceTo(u.value), a();
+        const n = e.value;
+        if (n && te(n)) {
+          u.value = W(n), m.value?.enforceTo(u.value), U();
           return;
         }
         e.value = u.value;
       }
     }
-    function R(g, e) {
-      const o = g.target;
-      if ("value" in o) {
-        const $ = o.value;
-        if ($) {
-          let f = parseInt($);
+    function v(p, e) {
+      const n = p.target;
+      if ("value" in n) {
+        const T = n.value;
+        if (T) {
+          let f = parseInt(T);
           if (isNaN(f))
-            o.value = "0";
+            n.value = "0";
           else {
             f > 255 ? f = 255 : f < 0 && (f = 0);
-            const x = [...k.value];
-            e == "r" ? x[0] = f : e == "g" ? x[1] = f : x[2] = f, u.value = O(M.rgb.hex(x)), y.value?.enforceTo(u.value), o.value = f.toString(), a();
+            const k = [...b.value];
+            e == "r" ? k[0] = f : e == "g" ? k[1] = f : k[2] = f, u.value = W(D.rgb.hex(k)), m.value?.enforceTo(u.value), n.value = f.toString(), U();
             return;
           }
         }
       }
     }
-    function s(g, e) {
-      const o = g.target;
-      if ("value" in o) {
-        const $ = o.value;
-        if ($) {
-          let f = parseInt($);
+    function E(p, e) {
+      const n = p.target;
+      if ("value" in n) {
+        const T = n.value;
+        if (T) {
+          let f = parseInt(T);
           if (isNaN(f))
-            o.value = "0";
+            n.value = "0";
           else {
             e === "h" ? f > 359 && (f = 359) : f > 100 && (f = 100), f < 0 && (f = 0);
-            const x = [...S.value];
-            e == "h" ? x[0] = f : e == "s" ? x[1] = f : x[2] = f, u.value = O(M.hsv.hex(x)), o.value = f.toString(), y.value?.enforceTo(u.value), a();
+            const k = [...a.value];
+            e == "h" ? k[0] = f : e == "s" ? k[1] = f : k[2] = f, u.value = W(D.hsv.hex(k)), n.value = f.toString(), m.value?.enforceTo(u.value), U();
             return;
           }
         }
       }
     }
-    function a() {
-      F("update:modelValue", u.value);
+    function U() {
+      X("update:modelValue", u.value);
     }
-    function v() {
+    function Y() {
       return u.value;
     }
-    function H(g) {
-      if (te(g)) {
-        const e = O(g);
-        u.value = e, y.value?.enforceTo(e);
+    function $(p) {
+      if (te(p)) {
+        const e = W(p);
+        u.value = e, m.value?.enforceTo(e);
       }
     }
     ce(() => {
-      t.modelValue ? H(t.modelValue) : t.initial && H(t.initial);
+      t.modelValue ? $(t.modelValue) : t.initial && $(t.initial);
     });
-    const F = m;
-    return P({ closePanel: C, getCurrentHex: v, enforceTo: H }), W(() => t.modelValue, (g) => {
-      g && g !== u.value && H(g);
-    }), W(c, (g) => {
-      g === !1 && F("done");
-    }), (g, e) => (N(), T("div", Ne, [
+    const X = g;
+    return h({ closePanel: P, getCurrentHex: Y, enforceTo: $ }), L(() => t.modelValue, (p) => {
+      p && p !== u.value && $(p);
+    }), L(c, (p) => {
+      p === !1 && X("done");
+    }), (p, e) => (R(), N("div", Re, [
       d("div", {
-        class: ke(l.entryClassName || "acpEntry"),
-        style: j(h(E)),
+        class: Se(l.entryClassName || "acpEntry"),
+        style: j(x(A)),
         onClick: e[0] || (e[0] = //@ts-ignore
-        (...o) => h(A) && h(A)(...o))
+        (...n) => x(H) && x(H)(...n))
       }, null, 6),
-      h(c) ? (N(), T("div", {
+      x(c) ? (R(), N("div", {
         key: 0,
         class: "acpPanel",
-        style: j(h(L)),
-        onClick: e[10] || (e[10] = (o) => l.panelClickStopPropagation && o.stopPropagation())
+        style: j(x(_)),
+        onClick: e[10] || (e[10] = (n) => l.panelClickStopPropagation && n.stopPropagation())
       }, [
-        d("div", De, [
+        d("div", Ne, [
           de(Te, {
             ref_key: "ring",
-            ref: y,
+            ref: m,
             "initial-hex": u.value,
-            onChanged: V,
+            onChanged: w,
             "show-package-name": l.showPackageName
           }, null, 8, ["initial-hex", "show-package-name"])
         ]),
-        d("div", He, [
-          ee(d("select", {
-            "onUpdate:modelValue": e[1] || (e[1] = (o) => D.value = o)
+        d("div", De, [
+          Q(d("select", {
+            "onUpdate:modelValue": e[1] || (e[1] = (n) => S.value = n)
           }, [...e[11] || (e[11] = [
             d("option", { value: "hex" }, "HEX", -1),
             d("option", { value: "rgb" }, "RGB", -1),
             d("option", { value: "hsv" }, "HSV", -1)
           ])], 512), [
-            [Ce, D.value]
+            [ke, S.value]
           ]),
-          D.value == "hex" ? (N(), T("div", Me, [
+          S.value == "hex" ? (R(), N("div", He, [
             d("input", {
               value: u.value,
-              onBlur: w,
+              onBlur: i,
               spellcheck: "false",
               maxlength: "7"
             }, null, 40, Ae)
-          ])) : D.value == "rgb" ? (N(), T("div", Ee, [
+          ])) : S.value == "rgb" ? (R(), N("div", Ee, [
             d("input", {
-              value: k.value[0],
-              onBlur: e[2] || (e[2] = (o) => R(o, "r"))
+              value: b.value[0],
+              onBlur: e[2] || (e[2] = (n) => v(n, "r"))
             }, null, 40, $e),
             d("input", {
-              value: k.value[1],
-              onBlur: e[3] || (e[3] = (o) => R(o, "g"))
+              value: b.value[1],
+              onBlur: e[3] || (e[3] = (n) => v(n, "g"))
             }, null, 40, qe),
             d("input", {
-              value: k.value[2],
-              onBlur: e[4] || (e[4] = (o) => R(o, "b"))
+              value: b.value[2],
+              onBlur: e[4] || (e[4] = (n) => v(n, "b"))
             }, null, 40, Ue)
-          ])) : (N(), T("div", Le, [
+          ])) : (R(), N("div", Ke, [
             d("input", {
-              value: S.value[0],
-              onBlur: e[5] || (e[5] = (o) => s(o, "h"))
-            }, null, 40, _e),
+              value: a.value[0],
+              onBlur: e[5] || (e[5] = (n) => E(n, "h"))
+            }, null, 40, Le),
             d("input", {
-              value: S.value[1],
-              onBlur: e[6] || (e[6] = (o) => s(o, "s"))
-            }, null, 40, ze),
+              value: a.value[1],
+              onBlur: e[6] || (e[6] = (n) => E(n, "s"))
+            }, null, 40, _e),
             d("input", {
-              value: S.value[2],
-              onBlur: e[7] || (e[7] = (o) => s(o, "v"))
-            }, null, 40, Oe)
+              value: a.value[2],
+              onBlur: e[7] || (e[7] = (n) => E(n, "v"))
+            }, null, 40, ze)
           ]))
         ]),
-        d("div", We, [
+        d("div", Oe, [
           d("button", {
             onClick: e[8] || (e[8] = //@ts-ignore
-            (...o) => h(C) && h(C)(...o))
+            (...n) => x(P) && x(P)(...n))
           }, "OK")
         ]),
-        l.showPackageName ? (N(), T("div", {
+        l.showPackageName ? (R(), N("div", {
           key: 0,
           class: "acpPackageName",
           onClick: e[9] || (e[9] = //@ts-ignore
-          (...o) => h(ue) && h(ue)(...o))
-        }, " au-color-picker ")) : Q("", !0)
-      ], 4)) : Q("", !0)
+          (...n) => x(ue) && x(ue)(...n))
+        }, " au-color-picker ")) : ee("", !0)
+      ], 4)) : ee("", !0)
     ]));
   }
-}), Fe = /* @__PURE__ */ oe(je, [["__scopeId", "data-v-dc351014"]]), Xe = { class: "acp" }, Ze = { class: "acpNamedPresets" }, Ke = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
+}), We = /* @__PURE__ */ oe(Fe, [["__scopeId", "data-v-d4794019"]]), je = { class: "acp" }, Xe = { class: "acpNamedPresets" }, Ze = ["for", "onClick"], Ye = ["id", "value"], Ge = { class: "acpPresetName" }, Je = { class: "acpDoneBtn" }, Qe = /* @__PURE__ */ ne({
   __name: "AuColorPickerPresetsNested",
   props: {
     modelValueSelectedPreset: {},
@@ -382,114 +408,116 @@ const Ne = { class: "acp" }, De = { class: "acpRing" }, He = { class: "acpParams
     panelBaseZIndex: {},
     entryRespondDelay: {},
     panelClickStopPropagation: { type: Boolean },
-    showPackageName: { type: Boolean }
+    showPackageName: { type: Boolean },
+    colorModeStorageKey: { type: [String, Boolean] },
+    colorMode: {}
   },
   emits: ["done", "update:modelValue", "update:modelValueSelectedPreset"],
-  setup(l, { expose: P, emit: m }) {
-    const t = l, y = I(), u = I(), c = I("#ff0000"), C = K(() => {
-      let s = null;
-      return y.value && (s = t.presets?.find((v) => v.name == y.value)?.colorHex), s || c.value;
-    }), { panelShow: A, closePanel: E, togglePanel: L, entryStylesActual: V } = ve(t, C), { panelStyles: D } = fe(t);
-    function k(s) {
-      y.value = s?.name, S("update:modelValueSelectedPreset", s?.name);
+  setup(l, { expose: h, emit: g }) {
+    const t = l, m = I(), u = I(), c = I("#ff0000"), P = Z(() => {
+      let a = null;
+      return m.value && (a = t.presets?.find((v) => v.name == m.value)?.colorHex), a || c.value;
+    }), { panelShow: H, closePanel: A, togglePanel: _, entryStylesActual: B } = ve(t, P), { panelStyles: z } = fe(t);
+    function C(a) {
+      m.value = a?.name, S("update:modelValueSelectedPreset", a?.name);
     }
-    const S = m;
-    W(c, (s) => {
-      S("update:modelValue", s);
+    const S = g;
+    L(c, (a) => {
+      S("update:modelValue", a);
     });
-    function w(s) {
-      if (te(s)) {
-        const a = O(s);
-        c.value = a, u.value?.enforceTo(a);
+    function w(a) {
+      if (te(a)) {
+        const i = W(a);
+        c.value = i, u.value?.enforceTo(i);
       }
     }
-    function R(s) {
-      s || k(void 0);
-      const a = t.presets?.find((v) => v.name === s);
-      a && k(a);
+    function b(a) {
+      a || C(void 0);
+      const i = t.presets?.find((v) => v.name === a);
+      i && C(i);
     }
-    return P({ closePanel: E, enforceCustomValueTo: w, enforcePresetTo: R }), W(A, (s) => {
-      s === !1 && S("done");
-    }), W(() => t.modelValue, (s) => {
-      s && w(s);
-    }), W(() => t.modelValueSelectedPreset, (s) => {
-      R(s);
+    return h({ closePanel: A, enforceCustomValueTo: w, enforcePresetTo: b }), L(H, (a) => {
+      a === !1 && S("done");
+    }), L(() => t.modelValue, (a) => {
+      a && w(a);
+    }), L(() => t.modelValueSelectedPreset, (a) => {
+      b(a);
     }), ce(() => {
-      t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? R(t.modelValueSelectedPreset) : t.initialSelectedPreset && R(t.initialSelectedPreset);
-    }), (s, a) => (N(), T("div", Xe, [
+      t.modelValue ? w(t.modelValue) : t.initial && w(t.initial), t.modelValueSelectedPreset ? b(t.modelValueSelectedPreset) : t.initialSelectedPreset && b(t.initialSelectedPreset);
+    }), (a, i) => (R(), N("div", je, [
       d("div", {
         class: "acpEntry",
-        style: j(h(V)),
-        onClick: a[0] || (a[0] = //@ts-ignore
-        (...v) => h(L) && h(L)(...v))
+        style: j(x(B)),
+        onClick: i[0] || (i[0] = //@ts-ignore
+        (...v) => x(_) && x(_)(...v))
       }, null, 4),
-      h(A) ? (N(), T("div", {
+      x(H) ? (R(), N("div", {
         key: 0,
         class: "acpPanel",
-        style: j(h(D)),
-        onClick: a[6] || (a[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
+        style: j(x(z)),
+        onClick: i[6] || (i[6] = (v) => l.panelClickStopPropagation && v.stopPropagation())
       }, [
-        d("div", Ze, [
+        d("div", Xe, [
           d("label", {
             for: "acpColorPresetCustom",
-            onClick: a[3] || (a[3] = (v) => k(void 0))
+            onClick: i[3] || (i[3] = (v) => C(void 0))
           }, [
-            de(Fe, {
+            de(We, {
               modelValue: c.value,
-              "onUpdate:modelValue": a[1] || (a[1] = (v) => c.value = v),
-              onDone: h(E),
+              "onUpdate:modelValue": i[1] || (i[1] = (v) => c.value = v),
+              onDone: x(A),
               "entry-class-name": "acpPresetBody",
               ref_key: "customPicker",
               ref: u,
               "show-package-name": l.showPackageName,
               pos: l.posInternal
             }, null, 8, ["modelValue", "onDone", "show-package-name", "pos"]),
-            ee(d("input", {
+            Q(d("input", {
               name: "colorType",
               type: "radio",
               id: "acpColorPresetCustom",
               value: void 0,
-              "onUpdate:modelValue": a[2] || (a[2] = (v) => y.value = v)
+              "onUpdate:modelValue": i[2] || (i[2] = (v) => m.value = v)
             }, null, 512), [
-              [le, y.value]
+              [le, m.value]
             ]),
-            a[7] || (a[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
+            i[7] || (i[7] = d("div", { class: "acpPresetName" }, "自定义", -1))
           ]),
-          a[8] || (a[8] = d("div", { class: "acpSep" }, null, -1)),
-          (N(!0), T(Se, null, we(l.presets, (v) => (N(), T("label", {
+          i[8] || (i[8] = d("div", { class: "acpSep" }, null, -1)),
+          (R(!0), N(Ce, null, we(l.presets, (v) => (R(), N("label", {
             for: `acpColorPreset${v.name}`,
-            onClick: (H) => k(v),
+            onClick: (E) => C(v),
             key: v.name
           }, [
             d("div", {
               class: "acpPresetBody",
               style: j({ backgroundColor: v.colorHex })
             }, null, 4),
-            ee(d("input", {
+            Q(d("input", {
               name: "colorType",
               type: "radio",
               id: `acpColorPreset${v.name}`,
               value: v.name,
-              "onUpdate:modelValue": a[4] || (a[4] = (H) => y.value = H)
+              "onUpdate:modelValue": i[4] || (i[4] = (E) => m.value = E)
             }, null, 8, Ye), [
-              [le, y.value]
+              [le, m.value]
             ]),
             d("div", Ge, Ie(v.name), 1)
-          ], 8, Ke))), 128)),
-          a[9] || (a[9] = d("div", { class: "acpSep" }, null, -1))
+          ], 8, Ze))), 128)),
+          i[9] || (i[9] = d("div", { class: "acpSep" }, null, -1))
         ]),
         d("div", Je, [
           d("button", {
-            onClick: a[5] || (a[5] = //@ts-ignore
-            (...v) => h(E) && h(E)(...v))
+            onClick: i[5] || (i[5] = //@ts-ignore
+            (...v) => x(A) && x(A)(...v))
           }, "OK")
         ])
-      ], 4)) : Q("", !0)
+      ], 4)) : ee("", !0)
     ]));
   }
-}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-1e965bbc"]]);
+}), nt = /* @__PURE__ */ oe(Qe, [["__scopeId", "data-v-9fbc3723"]]);
 export {
-  Fe as AuColorPicker,
+  We as AuColorPicker,
   nt as AuColorPickerPresetsNested,
   Te as AuColorPickerRing
 };

package/dist/types/components/AuColorPicker.vue.d.ts

@@ -1,4 +1,4 @@
-import { HEX } from 'color-convert/conversions';
+import { HEX } from 'color-convert';
 import { PickerProps } from './common/pickerProps';
 declare function getCurrentHex(): string;
 declare function enforceTo(newHexValue: string): void;

package/dist/types/components/AuColorPickerPresetsNested.vue.d.ts

@@ -30,7 +30,7 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
         }> & Readonly<{
             onChanged?: ((hex: string) => any) | undefined;
         }>, {
-            enforceTo: (hex: import('color-convert/conversions').HEX) => void;
+            enforceTo: (hex: import('color-convert').HEX) => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
             changed: (hex: string) => any;
         }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
@@ -48,7 +48,7 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
         }> & Readonly<{
             onChanged?: ((hex: string) => any) | undefined;
         }>, {
-            enforceTo: (hex: import('color-convert/conversions').HEX) => void;
+            enforceTo: (hex: import('color-convert').HEX) => void;
         }, {}, {}, {}, {}> | null;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};

package/dist/types/components/AuColorPickerRing.vue.d.ts

@@ -1,4 +1,4 @@
-import { HEX } from 'color-convert/conversions';
+import { HEX } from 'color-convert';
 type __VLS_Props = {
     initialHex?: string;
 };

package/dist/types/components/common/pickerProps.d.ts

@@ -11,6 +11,8 @@ export interface PickerProps {
     entryRespondDelay?: number;
     panelClickStopPropagation?: boolean;
     showPackageName?: boolean;
+    colorModeStorageKey?: string | false;
+    colorMode?: 'rgb' | 'hsv' | 'hex';
 }
 export interface PickerWithPresetsProps extends PickerProps {
     modelValueSelectedPreset?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurouscia/au-color-picker",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "author": {
     "name": "Au"
   },
@@ -37,16 +37,17 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "color-convert": "^3.1.2",
-    "vue": "^3.5.22"
+    "color-convert": "^3.1.3"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.34"
   },
   "devDependencies": {
-    "@types/color-convert": "^2.0.4",
-    "@types/node": "^24.9.2",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "sass": "^1.93.3",
+    "@types/node": "^25.9.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "sass": "^1.99.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
+    "vite": "^7.3.3",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}