ep-craft 0.1.7 → 0.1.9

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/color-picker-panel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import { UPDATE_MODEL_EVENT as T } from "../../../constants/event.js";
+import { NOOP as E } from "../../../../../@vue/shared/dist/shared.esm-bundler.js";
+import { useNamespace as x } from "../../../hooks/use-namespace/index.js";
+import { useFormDisabled as F } from "../../form/src/hooks/use-form-common-props.js";
+import { useFormItem as M } from "../../form/src/hooks/use-form-item.js";
+import { ElInput as z } from "../../input/index.js";
+import { colorPickerPanelEmits as A, colorPickerPanelProps as B, ROOT_COMMON_COLOR_INJECTION_KEY as D, colorPickerPanelContextKey as w } from "./color-picker-panel.js";
+import K from "./components/alpha-slider.js";
+import L from "./components/hue-slider.js";
+import U from "./components/predefine.js";
+import j from "./components/sv-panel.js";
+import { useCommonColor as J } from "./composables/use-common-color.js";
+import { defineComponent as Y, ref as s, inject as $, onMounted as q, nextTick as G, watch as y, provide as H, computed as I, openBlock as m, createElementBlock as Q, normalizeClass as f, unref as e, createElementVNode as P, createVNode as p, normalizeStyle as W, createBlock as O, createCommentVNode as R, renderSlot as X } from "vue";
+var fe = /* @__PURE__ */ Y({
+  name: "ElColorPickerPanel",
+  __name: "color-picker-panel",
+  props: B,
+  emits: A,
+  setup(a, { expose: N, emit: S }) {
+    const n = a, v = S, u = x("color-picker-panel"), { formItem: r } = M(), i = F(), h = s(), b = s(), k = s(), C = s(), t = s(""), { color: l } = $(D, () => J(n, v), !0);
+    function V() {
+      l.fromString(t.value), l.value !== t.value && (t.value = l.value);
+    }
+    function g() {
+      var o;
+      n.validateEvent && ((o = r == null ? void 0 : r.validate) == null || o.call(r, "blur").catch(E));
+    }
+    function _() {
+      var o, d, c;
+      (o = h.value) == null || o.update(), (d = b.value) == null || d.update(), (c = k.value) == null || c.update();
+    }
+    return q(() => {
+      n.modelValue && (t.value = l.value), G(_);
+    }), y(() => n.modelValue, (o) => {
+      o !== l.value && (o ? l.fromString(o) : l.clear());
+    }), y(() => l.value, (o) => {
+      v(T, o), t.value = o, n.validateEvent && (r == null || r.validate("change").catch(E));
+    }), H(w, { currentColor: I(() => l.value) }), N({
+      /**
+      * @description current color object
+      */
+      color: l,
+      /**
+      * @description custom input ref
+      */
+      inputRef: C,
+      /**
+      * @description update sub components
+      */
+      update: _
+    }), (o, d) => (m(), Q("div", {
+      class: f([
+        e(u).b(),
+        e(u).is("disabled", e(i)),
+        e(u).is("border", a.border)
+      ]),
+      onFocusout: g
+    }, [
+      P("div", { class: f(e(u).e("wrapper")) }, [p(L, {
+        ref_key: "hueRef",
+        ref: h,
+        color: e(l),
+        vertical: "",
+        disabled: e(i),
+        class: f(["hue-slider", a.hueSliderClass]),
+        style: W(a.hueSliderStyle)
+      }, null, 8, [
+        "color",
+        "disabled",
+        "class",
+        "style"
+      ]), p(j, {
+        ref_key: "svRef",
+        ref: b,
+        color: e(l),
+        disabled: e(i)
+      }, null, 8, ["color", "disabled"])], 2),
+      a.showAlpha ? (m(), O(K, {
+        key: 0,
+        ref_key: "alphaRef",
+        ref: k,
+        color: e(l),
+        disabled: e(i)
+      }, null, 8, ["color", "disabled"])) : R("v-if", !0),
+      a.predefine ? (m(), O(U, {
+        key: 1,
+        ref: "predefine",
+        "enable-alpha": a.showAlpha,
+        color: e(l),
+        colors: a.predefine,
+        disabled: e(i)
+      }, null, 8, [
+        "enable-alpha",
+        "color",
+        "colors",
+        "disabled"
+      ])) : R("v-if", !0),
+      P("div", { class: f(e(u).e("footer")) }, [p(e(z), {
+        ref_key: "inputRef",
+        ref: C,
+        modelValue: t.value,
+        "onUpdate:modelValue": d[0] || (d[0] = (c) => t.value = c),
+        "validate-event": !1,
+        size: "small",
+        disabled: e(i),
+        onChange: V
+      }, null, 8, ["modelValue", "disabled"]), X(o.$slots, "footer")], 2)
+    ], 34));
+  }
+});
+export {
+  fe as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/color-picker-panel2.js

@@ -0,0 +1,5 @@
+import e from "./color-picker-panel.vue_vue_type_script_setup_true_lang.js";
+var r = e;
+export {
+  r as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/alpha-slider.js

@@ -0,0 +1,5 @@
+import e from "./alpha-slider.vue_vue_type_script_setup_true_lang.js";
+var a = e;
+export {
+  a as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/alpha-slider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { useLocale as z } from "../../../../hooks/use-locale/index.js";
+import { alphaSliderProps as B } from "../props/slider.js";
+import { useSlider as D, useSliderDOM as E } from "../composables/use-slider.js";
+import { defineComponent as L, computed as b, openBlock as A, createElementBlock as M, normalizeClass as u, unref as e, createElementVNode as v, normalizeStyle as h } from "vue";
+const N = [
+  "aria-label",
+  "aria-valuenow",
+  "aria-valuetext",
+  "aria-orientation",
+  "tabindex",
+  "aria-disabled"
+], f = 0, d = 100;
+var q = /* @__PURE__ */ L({
+  name: "ElColorAlphaSlider",
+  __name: "alpha-slider",
+  props: B,
+  setup(o, { expose: y }) {
+    const l = o, { currentValue: t, bar: i, thumb: n, handleDrag: g, handleClick: c, handleKeydown: p } = D(l, {
+      key: "alpha",
+      minValue: f,
+      maxValue: d
+    }), { rootKls: k, barKls: x, barStyle: S, thumbKls: _, thumbStyle: $, update: C } = E(l, {
+      namespace: "color-alpha-slider",
+      maxValue: d,
+      currentValue: t,
+      bar: i,
+      thumb: n,
+      handleDrag: g,
+      getBackground: w
+    }), { t: m } = z(), K = b(() => m("el.colorpicker.alphaLabel")), V = b(() => m("el.colorpicker.alphaDescription", {
+      alpha: t.value,
+      color: l.color.value
+    }));
+    function w() {
+      if (l.color && l.color.value) {
+        const { r: s, g: a, b: r } = l.color.toRgb();
+        return `linear-gradient(to right, rgba(${s}, ${a}, ${r}, 0) 0%, rgba(${s}, ${a}, ${r}, 1) 100%)`;
+      }
+      return "";
+    }
+    return y({
+      /**
+      * @description update alpha slider manually
+      * @type {Function}
+      */
+      update: C,
+      /**
+      * @description bar element ref
+      * @type {HTMLElement}
+      */
+      bar: i,
+      /**
+      * @description thumb element ref
+      * @type {HTMLElement}
+      */
+      thumb: n
+    }), (s, a) => (A(), M("div", { class: u(e(k)) }, [v("div", {
+      ref_key: "bar",
+      ref: i,
+      class: u(e(x)),
+      style: h(e(S)),
+      onClick: a[0] || (a[0] = (...r) => e(c) && e(c)(...r))
+    }, null, 6), v("div", {
+      ref_key: "thumb",
+      ref: n,
+      class: u(e(_)),
+      style: h(e($)),
+      "aria-label": K.value,
+      "aria-valuenow": e(t),
+      "aria-valuetext": V.value,
+      "aria-orientation": o.vertical ? "vertical" : "horizontal",
+      "aria-valuemin": f,
+      "aria-valuemax": d,
+      role: "slider",
+      tabindex: o.disabled ? void 0 : 0,
+      "aria-disabled": o.disabled,
+      onKeydown: a[1] || (a[1] = (...r) => e(p) && e(p)(...r))
+    }, null, 46, N)], 2));
+  }
+});
+export {
+  q as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/hue-slider.js

@@ -0,0 +1,5 @@
+import e from "./hue-slider.vue_vue_type_script_setup_true_lang.js";
+var t = e;
+export {
+  t as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/hue-slider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,75 @@
+import { useLocale as w } from "../../../../hooks/use-locale/index.js";
+import { hueSliderProps as z } from "../props/slider.js";
+import { useSlider as D, useSliderDOM as E } from "../composables/use-slider.js";
+import { defineComponent as L, computed as v, openBlock as g, createElementBlock as B, normalizeClass as u, unref as e, createElementVNode as b, normalizeStyle as H } from "vue";
+const M = [
+  "aria-label",
+  "aria-valuenow",
+  "aria-valuetext",
+  "aria-orientation",
+  "tabindex",
+  "aria-disabled"
+], p = 0, s = 360;
+var q = /* @__PURE__ */ L({
+  name: "ElColorHueSlider",
+  __name: "hue-slider",
+  props: z,
+  setup(a, { expose: h }) {
+    const r = a, { currentValue: o, bar: t, thumb: i, handleDrag: f, handleClick: d, handleKeydown: c } = D(r, {
+      key: "hue",
+      minValue: p,
+      maxValue: s
+    }), { rootKls: x, barKls: k, thumbKls: y, thumbStyle: _, thumbTop: S, update: C } = E(r, {
+      namespace: "color-hue-slider",
+      maxValue: s,
+      currentValue: o,
+      bar: t,
+      thumb: i,
+      handleDrag: f
+    }), { t: m } = w(), K = v(() => m("el.colorpicker.hueLabel")), V = v(() => m("el.colorpicker.hueDescription", {
+      hue: o.value,
+      color: r.color.value
+    }));
+    return h({
+      /**
+      * @description bar element ref
+      */
+      bar: t,
+      /**
+      * @description thumb element ref
+      */
+      thumb: i,
+      /**
+      * @description thumb top position, only for vertical slider
+      */
+      thumbTop: S,
+      /**
+      * @description update hue slider manually
+      */
+      update: C
+    }), (N, l) => (g(), B("div", { class: u(e(x)) }, [b("div", {
+      ref_key: "bar",
+      ref: t,
+      class: u(e(k)),
+      onClick: l[0] || (l[0] = (...n) => e(d) && e(d)(...n))
+    }, null, 2), b("div", {
+      ref_key: "thumb",
+      ref: i,
+      class: u(e(y)),
+      style: H(e(_)),
+      "aria-label": K.value,
+      "aria-valuenow": e(o),
+      "aria-valuetext": V.value,
+      "aria-orientation": a.vertical ? "vertical" : "horizontal",
+      "aria-valuemin": p,
+      "aria-valuemax": s,
+      role: "slider",
+      tabindex: a.disabled ? void 0 : 0,
+      "aria-disabled": a.disabled,
+      onKeydown: l[1] || (l[1] = (...n) => e(c) && e(c)(...n))
+    }, null, 46, M)], 2));
+  }
+});
+export {
+  q as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/predefine.js

@@ -0,0 +1,5 @@
+import e from "./predefine.vue_vue_type_script_setup_true_lang.js";
+var _ = e;
+export {
+  _ as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/predefine.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { useLocale as v } from "../../../../hooks/use-locale/index.js";
+import { predefineProps as k } from "../props/predefine.js";
+import { usePredefine as C, usePredefineDOM as y } from "../composables/use-predefine.js";
+import { defineComponent as g, openBlock as l, createElementBlock as t, normalizeClass as n, unref as e, createElementVNode as i, Fragment as P, renderList as h, normalizeStyle as E } from "vue";
+const K = [
+  "disabled",
+  "aria-label",
+  "onClick"
+];
+var F = /* @__PURE__ */ g({
+  name: "ElColorPredefine",
+  __name: "predefine",
+  props: k,
+  setup(r) {
+    const a = r, { rgbaColors: d, handleSelect: u } = C(a), { rootKls: p, colorsKls: f, colorSelectorKls: m } = y(a), { t: b } = v(), _ = (s) => b("el.colorpicker.predefineDescription", { value: s });
+    return (s, L) => (l(), t("div", { class: n(e(p)) }, [i("div", { class: n(e(f)) }, [(l(!0), t(P, null, h(e(d), (o, c) => (l(), t("button", {
+      key: r.colors[c],
+      type: "button",
+      disabled: r.disabled,
+      "aria-label": _(o.value),
+      class: n(e(m)(o)),
+      onClick: (S) => e(u)(c)
+    }, [i("div", { style: E({ backgroundColor: o.value }) }, null, 4)], 10, K))), 128))], 2)], 2));
+  }
+});
+export {
+  F as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/sv-panel.js

@@ -0,0 +1,5 @@
+import e from "./sv-panel.vue_vue_type_script_setup_true_lang.js";
+var t = e;
+export {
+  t as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/components/sv-panel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import { useLocale as K } from "../../../../hooks/use-locale/index.js";
+import { svPanelProps as L } from "../props/sv-panel.js";
+import { useSvPanel as h, useSvPanelDOM as D } from "../composables/use-sv-panel.js";
+import { defineComponent as E, computed as c, openBlock as z, createElementBlock as B, unref as e, normalizeStyle as d, normalizeClass as v, createElementVNode as R } from "vue";
+const V = [
+  "tabindex",
+  "aria-disabled",
+  "aria-label",
+  "aria-valuenow",
+  "aria-valuetext"
+];
+var j = /* @__PURE__ */ E({
+  name: "ElSvPanel",
+  __name: "sv-panel",
+  props: L,
+  setup(r, { expose: p }) {
+    const l = r, { cursorRef: m, cursorTop: b, cursorLeft: f, background: x, saturation: t, brightness: s, handleClick: n, handleDrag: y, handleKeydown: i } = h(l), { rootKls: k, cursorKls: _, rootStyle: S, cursorStyle: g, update: P } = D(l, {
+      cursorTop: b,
+      cursorLeft: f,
+      background: x,
+      handleDrag: y
+    }), { t: u } = K(), w = c(() => u("el.colorpicker.svLabel")), C = c(() => u("el.colorpicker.svDescription", {
+      saturation: t.value,
+      brightness: s.value,
+      color: l.color.value
+    }));
+    return p({
+      /**
+      * @description update sv panel manually
+      */
+      update: P
+    }), ($, a) => (z(), B("div", {
+      class: v(e(k)),
+      style: d(e(S)),
+      onClick: a[1] || (a[1] = (...o) => e(n) && e(n)(...o))
+    }, [R("div", {
+      ref_key: "cursorRef",
+      ref: m,
+      class: v(e(_)),
+      style: d(e(g)),
+      tabindex: r.disabled ? void 0 : 0,
+      "aria-disabled": r.disabled,
+      role: "slider",
+      "aria-valuemin": "0,0",
+      "aria-valuemax": "100,100",
+      "aria-label": w.value,
+      "aria-valuenow": `${e(t)},${e(s)}`,
+      "aria-valuetext": C.value,
+      onKeydown: a[0] || (a[0] = (...o) => e(i) && e(i)(...o))
+    }, null, 46, V)], 6));
+  }
+});
+export {
+  j as default
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/composables/use-common-color.js

@@ -0,0 +1,16 @@
+import { UPDATE_MODEL_EVENT as r } from "../../../../constants/event.js";
+import e from "../utils/color.js";
+import { reactive as m, watch as t } from "vue";
+const f = (o, l) => {
+  const a = m(new e({
+    enableAlpha: o.showAlpha,
+    format: o.colorFormat || "",
+    value: o.modelValue
+  }));
+  return t(() => [o.colorFormat, o.showAlpha], () => {
+    a.enableAlpha = o.showAlpha, a.format = o.colorFormat || a.format, a.doOnChange(), l(r, a.value);
+  }), { color: a };
+};
+export {
+  f as useCommonColor
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/composables/use-predefine.js

@@ -0,0 +1,52 @@
+import { useNamespace as i } from "../../../../hooks/use-namespace/index.js";
+import { colorPickerPanelContextKey as d } from "../color-picker-panel.js";
+import u from "../utils/color.js";
+import { inject as m, ref as h, watch as b, watchEffect as C, computed as f } from "vue";
+const K = (e) => {
+  const { currentColor: r } = m(d), l = h(c(e.colors, e.color));
+  b(() => r.value, (o) => {
+    const a = new u({
+      value: o,
+      enableAlpha: e.enableAlpha
+    });
+    l.value.forEach((t) => {
+      t.selected = a.compare(t);
+    });
+  }), C(() => {
+    l.value = c(e.colors, e.color);
+  });
+  function n(o) {
+    e.color.fromString(e.colors[o]);
+  }
+  function c(o, a) {
+    return o.map((t) => {
+      const s = new u({
+        value: t,
+        enableAlpha: e.enableAlpha
+      });
+      return s.selected = s.compare(a), s;
+    });
+  }
+  return {
+    rgbaColors: l,
+    handleSelect: n
+  };
+}, P = (e) => {
+  const r = i("color-predefine"), l = f(() => [r.b(), r.is("disabled", e.disabled)]), n = f(() => r.e("colors"));
+  function c(o) {
+    return [
+      r.e("color-selector"),
+      r.is("alpha", o.get("alpha") < 100),
+      { selected: o.selected }
+    ];
+  }
+  return {
+    rootKls: l,
+    colorsKls: n,
+    colorSelectorKls: c
+  };
+};
+export {
+  K as usePredefine,
+  P as usePredefineDOM
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/composables/use-slider.js

@@ -0,0 +1,121 @@
+import { EVENT_CODE as v } from "../../../../constants/aria.js";
+import { getEventCode as N } from "../../../../utils/dom/event.js";
+import { getClientXY as O } from "../../../../utils/dom/position.js";
+import { addUnit as D } from "../../../../utils/dom/style.js";
+import { useNamespace as P } from "../../../../hooks/use-namespace/index.js";
+import { draggable as K } from "../utils/draggable.js";
+import { getCurrentInstance as S, shallowRef as T, computed as m, ref as W, onMounted as R, watch as E } from "vue";
+const z = (n, { key: l, minValue: h, maxValue: r }) => {
+  const s = S(), t = T(), M = T(), g = m(() => n.color.get(l));
+  function H(a) {
+    var e;
+    n.disabled || (a.target !== t.value && u(a), (e = t.value) == null || e.focus());
+  }
+  function u(a) {
+    if (!M.value || !t.value || n.disabled) return;
+    const e = s.vnode.el.getBoundingClientRect(), { clientX: C, clientY: f } = O(a);
+    let i;
+    if (n.vertical) {
+      let o = f - e.top;
+      o = Math.max(t.value.offsetHeight / 2, o), o = Math.min(o, e.height - t.value.offsetHeight / 2), i = Math.round((o - t.value.offsetHeight / 2) / (e.height - t.value.offsetHeight) * r);
+    } else {
+      let o = C - e.left;
+      o = Math.max(t.value.offsetWidth / 2, o), o = Math.min(o, e.width - t.value.offsetWidth / 2), i = Math.round((o - t.value.offsetWidth / 2) / (e.width - t.value.offsetWidth) * r);
+    }
+    n.color.set(l, i);
+  }
+  function w(a) {
+    if (n.disabled) return;
+    const { shiftKey: e } = a, C = N(a), f = e ? 10 : 1, i = l === "hue" ? -1 : 1;
+    let o = !0;
+    switch (C) {
+      case v.left:
+      case v.down:
+        c(-f * i);
+        break;
+      case v.right:
+      case v.up:
+        c(f * i);
+        break;
+      case v.home:
+        n.color.set(l, l === "hue" ? r : h);
+        break;
+      case v.end:
+        n.color.set(l, l === "hue" ? h : r);
+        break;
+      case v.pageDown:
+        c(-4 * i);
+        break;
+      case v.pageUp:
+        c(4 * i);
+        break;
+      default:
+        o = !1;
+        break;
+    }
+    o && a.preventDefault();
+  }
+  function c(a) {
+    let e = g.value + a;
+    e = e < h ? h : e > r ? r : e, n.color.set(l, e);
+  }
+  return {
+    thumb: t,
+    bar: M,
+    currentValue: g,
+    handleDrag: u,
+    handleClick: H,
+    handleKeydown: w
+  };
+}, A = (n, { namespace: l, maxValue: h, bar: r, thumb: s, currentValue: t, handleDrag: M, getBackground: g }) => {
+  const H = S(), u = P(l), w = W(0), c = W(0), a = W();
+  function e() {
+    if (!s.value || n.vertical) return 0;
+    const d = H.vnode.el, b = t.value;
+    return d ? Math.round(b * (d.offsetWidth - s.value.offsetWidth / 2) / h) : 0;
+  }
+  function C() {
+    if (!s.value) return 0;
+    const d = H.vnode.el;
+    if (!n.vertical) return 0;
+    const b = t.value;
+    return d ? Math.round(b * (d.offsetHeight - s.value.offsetHeight / 2) / h) : 0;
+  }
+  function f() {
+    w.value = e(), c.value = C(), a.value = g == null ? void 0 : g();
+  }
+  R(() => {
+    if (!r.value || !s.value) return;
+    const d = {
+      drag: (b) => {
+        M(b);
+      },
+      end: (b) => {
+        M(b);
+      }
+    };
+    K(r.value, d), K(s.value, d), f();
+  }), E(t, () => f()), E(() => n.color.value, () => f());
+  const i = m(() => [
+    u.b(),
+    u.is("vertical", n.vertical),
+    u.is("disabled", n.disabled)
+  ]), o = m(() => u.e("bar")), L = m(() => u.e("thumb"));
+  return {
+    rootKls: i,
+    barKls: o,
+    barStyle: m(() => ({ background: a.value })),
+    thumbKls: L,
+    thumbStyle: m(() => ({
+      left: D(w.value),
+      top: D(c.value)
+    })),
+    thumbLeft: w,
+    thumbTop: c,
+    update: f
+  };
+};
+export {
+  z as useSlider,
+  A as useSliderDOM
+};

package/dist/node_modules/element-plus/es/components/color-picker-panel/src/composables/use-sv-panel.js

@@ -0,0 +1,99 @@
+import { EVENT_CODE as m } from "../../../../constants/aria.js";
+import { getEventCode as D } from "../../../../utils/dom/event.js";
+import { getClientXY as E } from "../../../../utils/dom/position.js";
+import { addUnit as x } from "../../../../utils/dom/style.js";
+import { useNamespace as K } from "../../../../hooks/use-namespace/index.js";
+import { draggable as P } from "../utils/draggable.js";
+import { getCurrentInstance as y, ref as b, computed as l, onMounted as B, watch as N } from "vue";
+const U = (e) => {
+  const f = y(), r = b(), s = b(0), d = b(0), g = b("hsl(0, 100%, 50%)"), h = l(() => e.color.get("saturation")), c = l(() => e.color.get("value")), a = l(() => e.color.get("hue"));
+  function k(o) {
+    var t;
+    e.disabled || (o.target !== r.value && v(o), (t = r.value) == null || t.focus({ preventScroll: !0 }));
+  }
+  function v(o) {
+    if (e.disabled) return;
+    const t = f.vnode.el.getBoundingClientRect(), { clientX: C, clientY: u } = E(o);
+    let n = C - t.left, i = u - t.top;
+    n = Math.max(0, n), n = Math.min(n, t.width), i = Math.max(0, i), i = Math.min(i, t.height), d.value = n, s.value = i, e.color.set({
+      saturation: n / t.width * 100,
+      value: 100 - i / t.height * 100
+    });
+  }
+  function w(o) {
+    if (e.disabled) return;
+    const { shiftKey: t } = o, C = D(o), u = t ? 10 : 1;
+    let n = !0;
+    switch (C) {
+      case m.left:
+        M(-u);
+        break;
+      case m.right:
+        M(u);
+        break;
+      case m.up:
+        S(u);
+        break;
+      case m.down:
+        S(-u);
+        break;
+      default:
+        n = !1;
+        break;
+    }
+    n && o.preventDefault();
+  }
+  function M(o) {
+    let t = h.value + o;
+    t = t < 0 ? 0 : t > 100 ? 100 : t, e.color.set("saturation", t);
+  }
+  function S(o) {
+    let t = c.value + o;
+    t = t < 0 ? 0 : t > 100 ? 100 : t, e.color.set("value", t);
+  }
+  return {
+    cursorRef: r,
+    cursorTop: s,
+    cursorLeft: d,
+    background: g,
+    saturation: h,
+    brightness: c,
+    hue: a,
+    handleClick: k,
+    handleDrag: v,
+    handleKeydown: w
+  };
+}, V = (e, { cursorTop: f, cursorLeft: r, background: s, handleDrag: d }) => {
+  const g = y(), h = K("color-svpanel");
+  function c() {
+    const a = e.color.get("saturation"), k = e.color.get("value"), { clientWidth: v, clientHeight: w } = g.vnode.el;
+    r.value = a * v / 100, f.value = (100 - k) * w / 100, s.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
+  }
+  return B(() => {
+    P(g.vnode.el, {
+      drag: (a) => {
+        d(a);
+      },
+      end: (a) => {
+        d(a);
+      }
+    }), c();
+  }), N([
+    () => e.color.get("hue"),
+    () => e.color.get("value"),
+    () => e.color.value
+  ], () => c()), {
+    rootKls: l(() => h.b()),
+    cursorKls: l(() => h.e("cursor")),
+    rootStyle: l(() => ({ backgroundColor: s.value })),
+    cursorStyle: l(() => ({
+      top: x(f.value),
+      left: x(r.value)
+    })),
+    update: c
+  };
+};
+export {
+  U as useSvPanel,
+  V as useSvPanelDOM
+};