x-next 1.10.0 → 1.11.0

package/dist/es/components/color-picker/panel.js

@@ -1,16 +1,20 @@
-import { defineComponent as K, createVNode as o, Fragment as J, ref as z, watch as j, computed as b } from "vue";
-import { getClassNameMixin as Q } from "../../_utils/config.js";
-import { rgbToHsl as W, hslToRgb as X } from "../../_utils/palette.js";
-import { formatColor as E, rgbToHsv as _, hsvToRgb as Y, toRgbaString as Z, toAlphaSliderColor as ee, parseColorAlpha as G, formatAlphaPercent as ae } from "../../_utils/color.js";
-import le from "../form-input/Input.js";
-import ne from "../form-input-number/InputNumber.js";
-import te from "../button/Button.js";
-import oe from "../../icons/default/check.js";
-import se from "./sv-panel.js";
-import re from "./gradient-slider.js";
-const he = "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)", Ce = /* @__PURE__ */ K({
+import { defineComponent as F, createVNode as o, Fragment as X, provide as J, ref as B, onMounted as Q, watch as D, computed as f } from "vue";
+import { formItemInjectionKey as W } from "../form/context.js";
+import { getTabbableElements as Y } from "../../_hooks/use-dialog-focus.js";
+import { getClassNameMixin as Z } from "../../_utils/config.js";
+import { rgbToHsl as ee, hslToRgb as ae } from "../../_utils/palette.js";
+import { formatColor as _, rgbToHsv as $, hsvToRgb as le, toRgbaString as ne, toAlphaSliderColor as te, parseColorAlpha as j, formatAlphaPercent as oe } from "../../_utils/color.js";
+import se from "../form-input/Input.js";
+import re from "../form-input-number/InputNumber.js";
+import ie from "../button/Button.js";
+import ue from "../../icons/default/check.js";
+import ce from "./sv-panel.js";
+import he from "./gradient-slider.js";
+const de = "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)", xe = /* @__PURE__ */ F({
   name: "ColorPickerPanel",
   props: {
+    id: String,
+    ariaLabel: String,
     value: {
       type: Object,
       required: !0
@@ -52,256 +56,281 @@ const he = "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, re
     }
   },
   emits: {
-    change: (a, h) => !0,
-    confirm: (a) => !0,
+    change: (l, r) => !0,
+    confirm: (l) => !0,
     clear: () => !0,
     close: () => !0
   },
-  setup(a, {
-    emit: h
+  setup(l, {
+    emit: r,
+    expose: k
   }) {
-    const y = Q("color-picker"), d = z(a.modes[0] ?? "hex"), u = z(_(a.value)), c = z(a.value.a);
-    j(() => a.value, (e) => {
-      const l = _(e);
-      (Math.abs(l.h - u.value.h) > 0.5 || Math.abs(l.s - u.value.s) > 0.5 || Math.abs(l.v - u.value.v) > 0.5) && (u.value = l), Math.abs(e.a - c.value) > 1e-3 && (c.value = e.a);
-    }), j(() => a.modes, (e) => {
-      e.length && !e.includes(d.value) && (d.value = e[0]);
+    const A = Z("color-picker");
+    J(W, {});
+    const M = B(), v = () => {
+      const e = M.value;
+      e && (Y(e)[0] ?? e).focus();
+    };
+    k({
+      focus: v
+    }), Q(() => {
+      var e, a;
+      ((e = document.activeElement) == null ? void 0 : e.getAttribute("aria-controls")) === ((a = M.value) == null ? void 0 : a.id) && v();
+    });
+    const g = B(l.modes[0] ?? "hex"), u = B($(l.value)), h = B(l.value.a);
+    D(() => l.value, (e) => {
+      const a = $(e);
+      (Math.abs(a.h - u.value.h) > 0.5 || Math.abs(a.s - u.value.s) > 0.5 || Math.abs(a.v - u.value.v) > 0.5) && (u.value = a), Math.abs(e.a - h.value) > 1e-3 && (h.value = e.a);
+    }), D(() => l.modes, (e) => {
+      e.length && !e.includes(g.value) && (g.value = e[0]);
     });
-    const n = b(() => {
-      const [e, l, s] = Y(u.value);
+    const t = f(() => {
+      const [e, a, s] = le(u.value);
       return {
         r: e,
-        g: l,
+        g: a,
         b: s,
-        a: a.showAlpha ? c.value : 1
+        a: l.showAlpha ? h.value : 1
       };
-    }), m = (e, l) => h("change", e, l), H = (e) => {
-      u.value = e, m(n.value);
-    }, S = (e) => {
+    }), m = (e, a) => r("change", e, a), P = (e) => {
+      u.value = e, m(t.value);
+    }, w = (e) => {
       u.value = {
         ...u.value,
         h: e / 100 * 360
-      }, m(n.value);
-    }, B = (e) => {
-      c.value = e / 100, m(n.value);
-    }, I = b(() => `linear-gradient(to right, ${Z({
-      ...n.value,
+      }, m(t.value);
+    }, R = (e) => {
+      h.value = e / 100, m(t.value);
+    }, V = f(() => `linear-gradient(to right, ${ne({
+      ...t.value,
       a: 0
-    })}, ${ee(n.value)})`), k = b(() => E(n.value, "hex", a.showAlpha)), p = (e, l) => {
-      u.value = _(e), c.value = e.a, m({
+    })}, ${te(t.value)})`), E = f(() => _(t.value, "hex", l.showAlpha)), p = (e, a) => {
+      u.value = $(e), h.value = e.a, m({
         ...e,
-        a: a.showAlpha ? e.a : 1
-      }, l);
-    }, P = (e) => {
-      const l = G(e);
-      l && p(l);
-    }, V = b(() => [Math.round(n.value.r), Math.round(n.value.g), Math.round(n.value.b)]), w = b(() => {
+        a: l.showAlpha ? e.a : 1
+      }, a);
+    }, N = (e) => {
+      const a = j(e);
+      a && p(a);
+    }, L = f(() => [Math.round(t.value.r), Math.round(t.value.g), Math.round(t.value.b)]), x = f(() => {
       const {
         h: e,
-        s: l,
+        s: a,
         l: s
-      } = W([Math.round(n.value.r), Math.round(n.value.g), Math.round(n.value.b)]);
-      return [Math.round(e), Math.round(l), Math.round(s)];
-    }), N = (e, l, s) => {
+      } = ee([Math.round(t.value.r), Math.round(t.value.g), Math.round(t.value.b)]);
+      return [Math.round(e), Math.round(a), Math.round(s)];
+    }), T = (e, a, s) => {
       if (s === void 0) return;
       if (e === "rgb") {
-        const i = {
-          ...n.value
+        const c = {
+          ...t.value
         };
-        l === 0 ? i.r = s : l === 1 ? i.g = s : i.b = s, p(i);
+        a === 0 ? c.r = s : a === 1 ? c.g = s : c.b = s, p(c);
         return;
       }
-      const [T, U, A] = w.value, v = {
-        h: T,
-        s: U,
-        l: A
+      const [z, C, i] = x.value, d = {
+        h: z,
+        s: C,
+        l: i
       };
-      l === 0 ? v.h = s : l === 1 ? v.s = s : v.l = s;
-      const [f, r, M] = X(v);
+      a === 0 ? d.h = s : a === 1 ? d.s = s : d.l = s;
+      const [H, I, G] = ae(d);
       p({
-        r: f,
-        g: r,
-        b: M,
-        a: n.value.a
+        r: H,
+        g: I,
+        b: G,
+        a: t.value.a
       });
-    }, R = b(() => E(n.value, "hex", a.showAlpha));
+    }, S = f(() => _(t.value, "hex", l.showAlpha));
     return {
-      className: y,
-      activeMode: d,
+      className: A,
+      panelRef: M,
+      focus: v,
+      activeMode: g,
       hsv: u,
-      alpha: c,
-      rgba: n,
-      hexValue: k,
-      rgbChannels: V,
-      hslChannels: w,
-      activeSwatch: R,
-      alphaBackground: I,
-      handleHsvChange: H,
-      handleHueChange: S,
-      handleAlphaChange: B,
-      handleHexInput: P,
-      handleChannelChange: N,
-      handleSwatchClick: (e, l) => {
-        const s = G(e);
-        s && p(s, l);
+      alpha: h,
+      rgba: t,
+      hexValue: E,
+      rgbChannels: L,
+      hslChannels: x,
+      activeSwatch: S,
+      alphaBackground: V,
+      handleHsvChange: P,
+      handleHueChange: w,
+      handleAlphaChange: R,
+      handleHexInput: N,
+      handleChannelChange: T,
+      handleSwatchClick: (e, a) => {
+        const s = j(e);
+        s && p(s, a);
       },
-      confirm: () => h("confirm", n.value),
-      clear: () => h("clear"),
-      close: () => h("close"),
-      formatAlphaPercent: ae,
-      HUE_GRADIENT: he,
-      Input: le,
-      InputNumber: ne,
-      Button: te,
-      IconCheck: oe,
-      SvPanel: se,
-      GradientSlider: re,
-      parseColorAlpha: G
+      confirm: () => r("confirm", t.value),
+      clear: () => r("clear"),
+      close: () => r("close"),
+      formatAlphaPercent: oe,
+      HUE_GRADIENT: de,
+      Input: se,
+      InputNumber: re,
+      Button: ie,
+      IconCheck: ue,
+      SvPanel: ce,
+      GradientSlider: he,
+      parseColorAlpha: j
     };
   },
   render() {
     const {
-      className: a,
-      activeMode: h,
-      hsv: y,
-      alpha: d,
-      rgba: u,
-      hexValue: c,
-      rgbChannels: n,
-      hslChannels: m,
-      activeSwatch: H,
-      alphaBackground: S,
-      handleHsvChange: B,
-      handleHueChange: I,
-      handleAlphaChange: k,
-      handleHexInput: p,
-      handleChannelChange: P,
-      handleSwatchClick: V,
-      confirm: w,
+      className: l,
+      activeMode: r,
+      hsv: k,
+      alpha: A,
+      rgba: M,
+      hexValue: v,
+      rgbChannels: g,
+      hslChannels: u,
+      activeSwatch: h,
+      alphaBackground: t,
+      handleHsvChange: m,
+      handleHueChange: P,
+      handleAlphaChange: w,
+      handleHexInput: R,
+      handleChannelChange: V,
+      handleSwatchClick: E,
+      confirm: p,
       clear: N,
-      formatAlphaPercent: R,
-      HUE_GRADIENT: L,
-      Input: e,
-      InputNumber: l,
-      Button: s,
-      IconCheck: T,
-      SvPanel: U,
-      GradientSlider: A,
-      parseColorAlpha: v,
-      showAlpha: f,
-      disabled: r,
-      swatches: M,
-      showConfirm: i,
-      showClear: $,
-      modes: D,
-      texts: g
-    } = this, O = h === "rgb" ? n : m, q = h === "rgb" ? 255 : void 0;
+      formatAlphaPercent: L,
+      HUE_GRADIENT: x,
+      Input: T,
+      InputNumber: S,
+      Button: U,
+      IconCheck: e,
+      SvPanel: a,
+      GradientSlider: s,
+      parseColorAlpha: z,
+      showAlpha: C,
+      disabled: i,
+      swatches: d,
+      showConfirm: H,
+      showClear: I,
+      modes: G,
+      texts: c
+    } = this, K = r === "rgb" ? g : u, O = r === "rgb" ? 255 : void 0;
     return o("div", {
-      class: [a.element("panel"), {
-        [a.is("disabled")]: r
+      ref: "panelRef",
+      id: this.id,
+      "aria-label": this.ariaLabel,
+      role: "dialog",
+      tabindex: -1,
+      class: [l.element("panel"), {
+        [l.is("disabled")]: i
       }],
-      onKeydown: (t) => {
-        t.key === "Escape" && (t.stopPropagation(), this.close());
+      onKeydown: (n) => {
+        n.key === "Escape" && (n.stopPropagation(), this.close());
       }
     }, [o("div", {
-      class: a.element("panel-body")
-    }, [o(U, {
-      value: y,
-      disabled: r,
-      onChange: B,
-      ariaLabel: g.saturation
+      class: l.element("panel-body")
+    }, [o(a, {
+      value: k,
+      disabled: i,
+      onChange: m,
+      ariaLabel: c.saturation
     }, null), o("div", {
-      class: a.element("sliders")
-    }, [o(A, {
-      value: y.h / 360 * 100,
-      background: L,
-      disabled: r,
-      ariaLabel: g.hue,
-      onChange: I
-    }, null), f && o(A, {
-      value: d * 100,
-      background: S,
-      disabled: r,
-      ariaLabel: g.alpha,
-      onChange: k
+      class: l.element("sliders")
+    }, [o(s, {
+      value: k.h / 360 * 100,
+      background: x,
+      disabled: i,
+      ariaLabel: c.hue,
+      onChange: P
+    }, null), C && o(s, {
+      value: A * 100,
+      background: t,
+      disabled: i,
+      ariaLabel: c.alpha,
+      onChange: w
     }, null)]), o("div", {
-      class: a.element("modes")
-    }, [D.map((t) => o("button", {
-      key: t,
+      class: l.element("modes")
+    }, [G.map((n) => o("button", {
+      key: n,
       type: "button",
-      class: [a.element("mode"), {
-        [a.is("active")]: h === t
+      class: [l.element("mode"), {
+        [l.is("active")]: r === n
       }],
-      disabled: r,
+      disabled: i,
       onClick: () => {
-        this.activeMode = t;
+        this.activeMode = n;
       }
-    }, [t.toUpperCase()]))]), o("div", {
-      class: a.element("inputs")
-    }, [h === "hex" ? o(e, {
+    }, [n.toUpperCase()]))]), o("div", {
+      class: l.element("inputs")
+    }, [r === "hex" ? o(T, {
       size: "small",
-      disabled: r,
-      modelValue: c,
+      disabled: i,
+      modelValue: v,
       maxLength: 9,
-      "onUpdate:modelValue": (t) => p(t)
-    }, null) : o(J, null, [O.map((t, C) => o(l, {
-      key: `${h}-${C}`,
-      class: a.element("channel"),
+      "aria-label": "HEX",
+      "onUpdate:modelValue": (n) => R(n)
+    }, null) : o(X, null, [K.map((n, b) => o(S, {
+      key: `${r}-${b}`,
+      class: l.element("channel"),
       size: "small",
       hideButton: !0,
       min: 0,
-      max: q,
+      max: O,
       precision: 0,
-      disabled: r,
-      modelValue: t,
-      "onUpdate:modelValue": (x) => P(h, C, x)
-    }, null)), f && o(l, {
-      class: a.element("channel"),
+      "aria-label": (r === "rgb" ? ["R", "G", "B"] : ["H", "S", "L"])[b],
+      disabled: i,
+      modelValue: n,
+      "onUpdate:modelValue": (y) => V(r, b, y)
+    }, null)), C && o(S, {
+      class: l.element("channel"),
       size: "small",
       hideButton: !0,
       min: 0,
       max: 100,
       precision: 0,
-      disabled: r,
-      modelValue: R(d),
-      "onUpdate:modelValue": (t) => {
-        t !== void 0 && k(t);
+      disabled: i,
+      "aria-label": c.alpha,
+      modelValue: L(A),
+      "onUpdate:modelValue": (n) => {
+        n !== void 0 && w(n);
       }
-    }, null)])]), M.length > 0 && o("div", {
-      class: a.element("swatches")
-    }, [M.map((t) => {
-      const C = v(t), x = C ? E(C, "hex", f) === H : !1;
+    }, null)])]), d.length > 0 && o("div", {
+      class: l.element("swatches")
+    }, [d.map((n) => {
+      const b = z(n), y = b ? _(b, "hex", C) === h : !1;
       return o("button", {
-        key: t,
+        key: n,
         type: "button",
-        class: [a.element("swatch"), {
-          [a.is("active")]: x
+        class: [l.element("swatch"), {
+          [l.is("active")]: y
         }],
+        "aria-label": n,
+        "aria-pressed": y,
         style: {
-          backgroundColor: t
+          backgroundColor: n
         },
-        disabled: r,
-        onClick: (F) => V(t, F)
-      }, [x && o(T, null, null)]);
-    })])]), (i || $) && o("div", {
-      class: a.element("panel-footer")
-    }, [$ && o(s, {
+        disabled: i,
+        onClick: (q) => E(n, q)
+      }, [y && o(e, null, null)]);
+    })])]), (H || I) && o("div", {
+      class: l.element("panel-footer")
+    }, [I && o(U, {
       size: "small",
       type: "text",
-      disabled: r,
+      disabled: i,
       onClick: N
     }, {
-      default: () => [g.clear]
-    }), i && o(s, {
+      default: () => [c.clear]
+    }), H && o(U, {
       size: "small",
       type: "primary",
-      disabled: r,
-      onClick: w
+      disabled: i,
+      onClick: p
     }, {
-      default: () => [g.confirm]
+      default: () => [c.confirm]
     })])]);
   }
 });
 export {
-  Ce as default
+  xe as default
 };

package/dist/es/components/color-picker/sv-panel.js

@@ -1,7 +1,8 @@
-import { defineComponent as $, ref as g, computed as d, watch as L, createVNode as s } from "vue";
+import { defineComponent as M, ref as y, computed as u, toRef as x, createVNode as r } from "vue";
+import { usePointerDrag as $ } from "../../_hooks/use-pointer-drag.js";
 import { getClassNameMixin as k } from "../../_utils/config.js";
 import { hsvToRgb as C } from "../../_utils/color.js";
-const E = /* @__PURE__ */ $({
+const D = /* @__PURE__ */ M({
   name: "ColorPickerSvPanel",
   props: {
     /** h 0-360，s/v 0-100 */
@@ -22,78 +23,78 @@ const E = /* @__PURE__ */ $({
     change: (e) => !0
   },
   setup(e, {
-    emit: v
+    emit: d
   }) {
-    const l = k("color-picker"), m = g(), i = g(!1), b = d(() => {
-      const [t, a, o] = C({
+    const l = k("color-picker"), c = y(), v = u(() => {
+      const [n, t, i] = C({
         h: e.value.h,
         s: 100,
         v: 100
       });
-      return `rgb(${t}, ${a}, ${o})`;
-    }), w = d(() => ({
-      backgroundColor: b.value
-    })), M = d(() => ({
+      return `rgb(${n}, ${t}, ${i})`;
+    }), m = u(() => ({
+      backgroundColor: v.value
+    })), f = u(() => ({
       left: `${e.value.s}%`,
       top: `${100 - e.value.v}%`
-    })), h = (t, a) => {
-      const o = m.value;
-      if (!o || e.disabled) return;
-      const n = o.getBoundingClientRect();
-      if (!n.width || !n.height) return;
-      const u = Math.min(Math.max(t - n.left, 0), n.width), c = Math.min(Math.max(a - n.top, 0), n.height);
-      v("change", {
+    })), g = (n, t) => {
+      const i = c.value;
+      if (!i || e.disabled) return;
+      const a = i.getBoundingClientRect();
+      if (!a.width || !a.height) return;
+      const o = Math.min(Math.max(n - a.left, 0), a.width), s = Math.min(Math.max(t - a.top, 0), a.height);
+      d("change", {
         h: e.value.h,
-        s: u / n.width * 100,
-        v: (1 - c / n.height) * 100
+        s: o / a.width * 100,
+        v: (1 - s / a.height) * 100
       });
-    }, f = (t) => {
-      h(t.clientX, t.clientY);
-    }, r = () => {
-      i.value = !1, document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", r);
-    }, y = (t) => {
-      e.disabled || (t.preventDefault(), i.value = !0, h(t.clientX, t.clientY), document.addEventListener("mousemove", f), document.addEventListener("mouseup", r));
-    }, x = (t) => {
+    }, {
+      dragging: b,
+      start: h
+    } = $(x(e, "disabled"), g), w = (n) => {
       if (e.disabled) return;
-      const a = t.shiftKey ? 10 : 1, n = {
-        ArrowLeft: [-a, 0],
-        ArrowRight: [a, 0],
-        ArrowUp: [0, a],
-        ArrowDown: [0, -a]
-      }[t.key];
-      if (!n) return;
-      t.preventDefault();
-      const u = Math.min(Math.max(e.value.s + n[0], 0), 100), c = Math.min(Math.max(e.value.v + n[1], 0), 100);
-      v("change", {
+      const t = n.shiftKey ? 10 : 1, a = {
+        ArrowLeft: [-t, 0],
+        ArrowRight: [t, 0],
+        ArrowUp: [0, t],
+        ArrowDown: [0, -t]
+      }[n.key];
+      if (!a) return;
+      n.preventDefault();
+      const o = Math.min(Math.max(e.value.s + a[0], 0), 100), s = Math.min(Math.max(e.value.v + a[1], 0), 100);
+      d("change", {
         h: e.value.h,
-        s: u,
-        v: c
+        s: o,
+        v: s
       });
     };
-    return L(() => e.disabled, (t) => {
-      t && r();
-    }), () => s("div", {
-      ref: m,
+    return () => r("div", {
+      ref: c,
       class: [l.element("sv"), {
-        [l.is("dragging")]: i.value
+        [l.is("dragging")]: b.value
       }],
-      style: w.value,
+      style: m.value,
       role: "slider",
       "aria-label": e.ariaLabel,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(e.value.s),
       "aria-valuetext": `${Math.round(e.value.s)}%, ${Math.round(e.value.v)}%`,
+      "aria-disabled": e.disabled || void 0,
       tabindex: e.disabled ? -1 : 0,
-      onMousedown: y,
-      onKeydown: x
-    }, [s("div", {
+      onPointerdown: h,
+      onMousedown: h,
+      onKeydown: w
+    }, [r("div", {
       class: l.element("sv-white")
-    }, null), s("div", {
+    }, null), r("div", {
       class: l.element("sv-black")
-    }, null), s("div", {
+    }, null), r("div", {
       class: l.element("sv-handler"),
-      style: M.value
+      style: f.value
     }, null)]);
   }
 });
 export {
-  E as default
+  D as default
 };