@aurouscia/au-color-picker 0.1.0 → 0.1.2

package/README.md

@@ -1,2 +1,75 @@
 # au-color-picker
-vue3颜色选择控件，支持鼠标和手指拖动，开发中
+vue3颜色选择控件，支持鼠标/手指的点击和拖动
+
+![au-color-picker预览效果](https://gitee.com/au114514/au-color-picker/raw/main/public/preview.png)
+
+## 用法
+```shell
+npm i @aurouscia/au-color-picker
+```
+```ts
+//main.ts（必须导入样式）
+import '@aurouscia/au-color-picker/style.css'
+
+//xxx.vue
+import { AuColorPicker } from '@aurouscia/au-color-picker';
+import { AuColorPickerPresetsNested } from '@aurouscia/au-color-picker';
+```
+
+### 仅自定义
+```vue
+<AuColorPicker
+    :inital="初始值"
+    @change="值变化回调"
+    @done="面板关闭回调"
+    ></AuColorPicker>
+```
+
+### 预设+自定义
+```ts
+const presets:NamedPreset[] = [
+  {
+    name: '水系',
+    colorHex: '#c3e5eb'
+  },
+  {
+    name: '绿地',
+    colorHex: '#ceeda4'
+  },
+]
+```
+```vue
+<AuColorPickerPresetsNested 
+    :inital="初始值"
+    :presets="预设列表" 
+    :initial-selected-preset="初始选择预设"
+    @change="值变化回调" @done="面板关闭回调"
+    @presetSwitched="预设切换回调"
+    ></AuColorPickerPresetsNested>
+```
+
+### 组件属性定义
+```ts
+//AuColorPicker的属性
+export interface PickerProps{
+    inital?: string //初始值
+    entryStyles?: CSSProperties //入口按钮的样式
+    entryActiveStyles?: CSSProperties //入口按钮的样式（当面板展开）
+    entryClassName?: string //入口按钮的类名
+    pos?: 'left'|'right', //面板靠左还是靠右
+    panelBaseZIndex?:number, //面板的zIndex基础值
+}
+
+//AuColorPickerPresetsNested的属性
+export interface PickerWithPresetsProps extends PickerProps{
+    initialSelectedPreset?:string //初始选择预设名称（undefined即为自定义）
+    presets?: NamedPreset[] //预设列表
+}
+export interface NamedPreset{
+    colorHex:string, //预设值
+    name:string //预设名称
+}
+```
+
+## 许可证
+MIT

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

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

package/dist/style.css

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

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

@@ -1,9 +1,11 @@
-import { PickerProps } from './common/pickerProps';
-declare const _default: import('vue').DefineComponent<PickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+import { PickerWithPresetsProps } from './common/pickerProps';
+declare const _default: import('vue').DefineComponent<PickerWithPresetsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     done: (hexStr: string) => any;
     change: (hexStr: string) => any;
-}, string, import('vue').PublicProps, Readonly<PickerProps> & Readonly<{
+    presetSwitched: (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;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'vue';
+export interface PickerProps {
+    inital?: string;
+    entryStyles?: CSSProperties;
+    entryActiveStyles?: CSSProperties;
+    entryClassName?: string;
+    pos?: 'left' | 'right';
+    panelBaseZIndex?: number;
+}
+export interface PickerWithPresetsProps extends PickerProps {
+    initialSelectedPreset?: string;
+    presets?: NamedPreset[];
+}
+export interface NamedPreset {
+    colorHex: string;
+    name: string;
+}

package/package.json

@@ -14,7 +14,7 @@
     "color",
     "component"
   ],
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"
@@ -41,10 +41,10 @@
   },
   "devDependencies": {
     "@types/color-convert": "^2.0.4",
-    "@types/node": "^22.10.0",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "sass": "^1.81.0",
-    "typescript": "5.6.3",
+    "typescript": "^5.7.2",
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"
   }