@aurouscia/au-color-picker 0.5.1 → 1.0.0

package/README.md

@@ -19,17 +19,19 @@ import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';
 ### 仅自定义
 ```vue
 <AuColorPicker
-    :initial="初始值"
-    @change="值变化回调"
-    @done="面板关闭回调"
+    v-model="'绑定颜色值'"
+    :initial="'初始值（优先级低于v-model）'"
+    @done="'面板关闭回调'"
     ></AuColorPicker>
 ```
 
 ### 预设+自定义
+⚠️注意：“选中的预设”是与“自定义颜色”独立的两个状态  
+这使得模型的颜色可以依赖于系统全局配置（预设的颜色）
 ```ts
 const presets:NamedPreset[] = [
   {
-    name: '水系',
+    name: '水系', //名称不可重复
     colorHex: '#c3e5eb'
   },
   {
@@ -40,16 +42,16 @@ const presets:NamedPreset[] = [
 ```
 ```vue
 <AuColorPickerPresetsNested 
-    :initial="初始值"
-    :presets="预设列表" 
-    :initial-selected-preset="初始选择预设"
-    @change="值变化回调" @done="面板关闭回调"
-    @presetSwitched="预设切换回调"
+    :presets="'预设列表'"
+    v-model="'绑定颜色值'"
+    :initial="'初始值（优先级低于v-model）'"
+    v-model:model-value-selected-preset="'绑定预设name'"
+    :initial-selected-preset="'初始选择预设（优先级低于v-model）'"
+    @done="'面板关闭回调'"
     ></AuColorPickerPresetsNested>
 ```
 
-### 覆盖当前值
-覆盖值并不会触发回调
+### 覆盖当前值（旧版，新版直接赋值v-model）
 ```ts
 const picker = ref<InstanceType<typeof AuColorPicker>>()
 const pickerNested = ref<InstanceType<typeof AuColorPickerPresetsNested>>()
@@ -75,7 +77,7 @@ export interface PickerProps{
     panelBaseZIndex?:number //面板的zIndex基础值
     entryRespondDelay?:number //入口按钮点击后，面板展开的延迟（ms）
     panelClickStopPropagation?:boolean //面板点击是否阻止冒泡
-    showPackageName?:boolean //是否显示包名（帮我打广告）
+    showPackageName?:boolean //是否显示包名
 }
 
 //AuColorPickerPresetsNested的属性

package/dist/au-color-picker.css

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

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

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

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

@@ -7,11 +7,11 @@ declare const _default: import('vue').DefineComponent<PickerProps, {
     getCurrentHex: typeof getCurrentHex;
     enforceTo: typeof enforceTo;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    done: (hexStr: string) => any;
-    change: (hexStr: string) => any;
+    done: () => any;
+    "update:modelValue": (hexStr: string) => any;
 }, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
-    onDone?: ((hexStr: string) => any) | undefined;
-    onChange?: ((hexStr: string) => any) | undefined;
+    onDone?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         initialHex?: string;

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

@@ -6,24 +6,24 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
     enforceCustomValueTo: typeof enforceCustomValueTo;
     enforcePresetTo: typeof enforcePresetTo;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    done: (hexStr: string) => any;
-    change: (hexStr: string) => any;
-    presetSwitched: (name: string | undefined) => any;
+    done: () => any;
+    "update:modelValue": (hexStr: string) => any;
+    "update:modelValueSelectedPreset": (name: string | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<PickerWithPresetsProps> & Readonly<{
-    onDone?: ((hexStr: string) => any) | undefined;
-    onChange?: ((hexStr: string) => any) | undefined;
-    onPresetSwitched?: ((name: string | undefined) => any) | undefined;
+    onDone?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
+    "onUpdate:modelValueSelectedPreset"?: ((name: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     customPicker: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').PickerProps> & Readonly<{
-        onDone?: ((hexStr: string) => any) | undefined;
-        onChange?: ((hexStr: string) => any) | undefined;
+        onDone?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
     }>, {
         closePanel: () => void;
         getCurrentHex: () => string;
         enforceTo: (newHexValue: string) => void;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        done: (hexStr: string) => any;
-        change: (hexStr: string) => any;
+        done: () => any;
+        "update:modelValue": (hexStr: string) => any;
     }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         ring: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
             initialHex?: string;
@@ -58,8 +58,8 @@ declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {
         M: {};
         Defaults: {};
     }, Readonly<import('..').PickerProps> & Readonly<{
-        onDone?: ((hexStr: string) => any) | undefined;
-        onChange?: ((hexStr: string) => any) | undefined;
+        onDone?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((hexStr: string) => any) | undefined;
     }>, {
         closePanel: () => void;
         getCurrentHex: () => string;

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'vue';
 type Pos = 'left' | 'right' | number;
 export interface PickerProps {
+    modelValue?: string;
     initial?: string;
     entryStyles?: CSSProperties;
     entryActiveStyles?: CSSProperties;
@@ -12,6 +13,7 @@ export interface PickerProps {
     showPackageName?: boolean;
 }
 export interface PickerWithPresetsProps extends PickerProps {
+    modelValueSelectedPreset?: string;
     initialSelectedPreset?: string;
     presets?: NamedPreset[];
     posInternal?: Pos;

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@aurouscia/au-color-picker",
+  "version": "1.0.0",
   "author": {
     "name": "Au"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://gitee.com/au114514/au-color-picker"
+    "url": "https://gitee.com/au114514/au-npm-pkgs",
+    "directory": "packages/au-color-picker"
   },
   "description": "vue3颜色选择器组件",
   "keywords": [
@@ -14,7 +16,6 @@
     "color",
     "component"
   ],
-  "version": "0.5.1",
   "type": "module",
   "files": [
     "dist"
@@ -36,16 +37,16 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "color-convert": "^2.0.1",
-    "vue": "^3.5.16"
+    "color-convert": "^3.1.2",
+    "vue": "^3.5.22"
   },
   "devDependencies": {
     "@types/color-convert": "^2.0.4",
-    "@types/node": "^22.15.29",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "sass": "^1.89.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "@types/node": "^24.9.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "sass": "^1.93.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4"
   }
 }