hys-ui 0.1.0 → 0.2.0

package/dist/components/HysCheckboxGroup/HysCheckboxGroup2.vue.js

@@ -0,0 +1,237 @@
+import { defineComponent as X, inject as Y, useAttrs as Z, ref as _, useId as ee, computed as n, shallowRef as ae, provide as le, onMounted as te, openBlock as m, createElementBlock as y, mergeProps as ue, unref as o, Fragment as T, renderList as G, createBlock as re, withCtx as ie, renderSlot as q, createTextVNode as F, toDisplayString as N, createCommentVNode as R, createElementVNode as oe } from "vue";
+import ne from "../HysCheckbox/HysCheckbox.vue.js";
+import { useHysControlState as se, fieldKey as de } from "../../composables/formContext.js";
+import { uniqueChoices as $, choiceOptions as ve, checkboxGroupKey as ce, choiceKey as O } from "../../composables/choice.js";
+import { useHysRootAttrs as me } from "../../config.js";
+import { useChoiceModel as fe, useChoiceNativeReset as ye } from "../../composables/choiceModel.js";
+const be = ["id", "aria-label", "aria-disabled", "aria-readonly", "aria-required", "aria-invalid", "aria-describedby"], he = {
+  key: 0,
+  class: "hys-ui-checkbox-empty"
+}, ge = { class: "hys-ui-checkbox-empty" }, pe = ["name", "form", "value", "disabled"], ke = ["id"], qe = /* @__PURE__ */ X({
+  inheritAttrs: !1,
+  __name: "HysCheckboxGroup",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    options: {},
+    fieldNames: {},
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    size: {},
+    min: {},
+    max: {},
+    required: { type: Boolean },
+    name: {},
+    form: {},
+    ariaLabel: {},
+    vertical: { type: Boolean },
+    type: { default: "checkbox" },
+    buttonStyle: {},
+    border: { type: Boolean },
+    error: {},
+    status: {},
+    autofocus: { type: Boolean },
+    emptyText: { default: "暂无选项" }
+  },
+  emits: ["update:modelValue", "change", "reject", "focus", "blur"],
+  setup(s, { expose: P, emit: J }) {
+    const l = s, g = J, { disabled: f, size: Q } = se(l), v = Y(de, void 0), A = Z(), U = me(), b = _(), j = ee(), h = fe(
+      l,
+      () => $(l.defaultValue ?? []),
+      (e, a) => Array.isArray(e) && Array.isArray(a) && e.length === a.length && e.every((t, r) => t === a[r])
+    ), u = n(() => $(h.current.value ?? [])), p = n(
+      () => ve(l.options ?? [], l.fieldNames)
+    ), c = ae(
+      []
+    ), S = n(
+      () => Math.max(
+        l.required ? 1 : 0,
+        Number.isFinite(l.min) ? Math.floor(l.min) : 0
+      )
+    ), V = n(
+      () => l.max !== void 0 && Number.isFinite(l.max) ? Math.max(0, Math.floor(l.max)) : 1 / 0
+    ), k = n(() => S.value > V.value), w = n(
+      () => {
+        var e, a;
+        return l.error || (e = v == null ? void 0 : v.invalid) != null && e.value || l.status === "error" || k.value || u.value.length > V.value ? "error" : l.status ?? ((a = v == null ? void 0 : v.status) == null ? void 0 : a.value);
+      }
+    );
+    function H(e) {
+      return k.value || (u.value.includes(e) ? u.value.length <= S.value : u.value.length >= V.value);
+    }
+    async function L(e, a) {
+      return e.length === u.value.length && e.every((t, r) => t === u.value[r]) ? !1 : h.commit(
+        e,
+        (t) => g("update:modelValue", t),
+        (t) => g("change", t, a),
+        !0
+      );
+    }
+    async function E(e, a = !u.value.includes(e)) {
+      if (!h.isLive() || f.value || l.readonly) return !1;
+      const t = c.value.find((d) => d.value.value === e), r = p.value.find((d) => d.value === e);
+      return !t && !r || t != null && t.locked.value || r != null && r.disabled || u.value.includes(e) === a ? !1 : H(e) ? (g("reject", {
+        value: e,
+        checked: a,
+        reason: k.value ? "range" : a ? "max" : "min"
+      }), !1) : L(
+        a ? [...u.value, e] : u.value.filter((d) => d !== e),
+        { value: e, checked: a, source: "toggle" }
+      );
+    }
+    const x = n(
+      () => l.options !== void 0 ? p.value.filter((e) => !e.disabled).map((e) => e.value) : [
+        ...new Set(
+          c.value.filter(
+            (e) => !e.locked.value && e.value.value !== void 0
+          ).map((e) => e.value.value)
+        )
+      ]
+    ), M = n(
+      () => x.value.length > 0 && x.value.every((e) => u.value.includes(e))
+    ), I = n(
+      () => !M.value && x.value.some((e) => u.value.includes(e))
+    );
+    async function K() {
+      if (!h.isLive() || f.value || l.readonly || k.value)
+        return !1;
+      const e = [...u.value];
+      for (const a of x.value)
+        !e.includes(a) && e.length < V.value && e.push(a);
+      return L(e, { source: "all" });
+    }
+    async function z() {
+      if (!h.isLive() || f.value || l.readonly || k.value)
+        return !1;
+      const e = new Set(x.value), a = u.value.filter((t) => !e.has(t));
+      for (const t of u.value)
+        a.length < S.value && !a.includes(t) && a.push(t);
+      return L(a, { source: "clear" });
+    }
+    function D(e) {
+      var t, r;
+      if (f.value) return;
+      const a = c.value.find(
+        (d) => {
+          var B;
+          return d.value.value === (e ?? u.value[0]) && !((B = d.input.value) != null && B.disabled);
+        }
+      );
+      (r = (a == null ? void 0 : a.input.value) || ((t = b.value) == null ? void 0 : t.querySelector(
+        'input[type="checkbox"]:not(:disabled)'
+      ))) == null || r.focus();
+    }
+    le(ce, {
+      values: u,
+      disabled: f,
+      readonly: n(() => !!l.readonly),
+      size: Q,
+      button: n(() => l.type === "button"),
+      border: n(() => !!l.border),
+      solid: n(() => l.buttonStyle === "solid"),
+      status: w,
+      form: n(() => l.form),
+      isLimited: H,
+      toggle: E,
+      register: (e) => (c.value.includes(e) || (c.value = [...c.value, e]), () => c.value = c.value.filter((a) => a !== e))
+    }), ye(b, h.reset, void 0, () => l.form);
+    function W(e) {
+      var a, t;
+      return !!((a = p.value.find((r) => r.value === e)) != null && a.disabled) || !!((t = c.value.find((r) => r.value.value === e)) != null && t.disabled.value);
+    }
+    return te(() => {
+      l.autofocus && D();
+    }), P({
+      values: u,
+      allChecked: M,
+      indeterminate: I,
+      focus: D,
+      blur: () => {
+        var a;
+        const e = document.activeElement;
+        e && ((a = b.value) != null && a.contains(e)) && e.blur();
+      },
+      checkAll: K,
+      clear: z,
+      toggle: E
+    }), (e, a) => {
+      var t, r, d, B;
+      return m(), y("div", ue({
+        ref_key: "root",
+        ref: b
+      }, { ...o(U), ...o(A) }, {
+        id: o(A).id || ((t = o(v)) == null ? void 0 : t.id.value),
+        role: "group",
+        "data-hys-ui-field-managed": "",
+        class: ["hys-ui-checkbox-group", { "hys-ui-checkbox-group-vertical": s.vertical }],
+        "aria-label": s.ariaLabel || o(A)["aria-label"] || ((r = o(v)) == null ? void 0 : r.label.value) || "复选框组",
+        "aria-disabled": o(f) || void 0,
+        "aria-readonly": s.readonly || void 0,
+        "aria-required": s.required || ((d = o(v)) == null ? void 0 : d.required.value) || S.value > 0 || void 0,
+        "aria-invalid": w.value === "error" || void 0,
+        "aria-describedby": [s.error ? o(j) : (B = o(v)) == null ? void 0 : B.describedBy.value, o(A)["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+        onFocusin: a[0] || (a[0] = (i) => {
+          var C;
+          return !((C = b.value) != null && C.contains(i.relatedTarget)) && g("focus", i);
+        }),
+        onFocusout: a[1] || (a[1] = (i) => {
+          var C;
+          return !((C = b.value) != null && C.contains(i.relatedTarget)) && g("blur", i);
+        })
+      }), [
+        l.options !== void 0 ? (m(), y(T, { key: 0 }, [
+          (m(!0), y(T, null, G(p.value, (i) => (m(), re(ne, {
+            key: o(O)(i.value),
+            value: i.value,
+            disabled: i.disabled,
+            indeterminate: i.indeterminate
+          }, {
+            default: ie(() => [
+              q(e.$slots, "option", {
+                option: i,
+                checked: u.value.includes(i.value)
+              }, () => [
+                F(N(i.label), 1)
+              ], !0)
+            ]),
+            _: 2
+          }, 1032, ["value", "disabled", "indeterminate"]))), 128)),
+          p.value.length ? R("", !0) : (m(), y("span", he, [
+            q(e.$slots, "empty", {}, () => [
+              F(N(s.emptyText), 1)
+            ], !0)
+          ]))
+        ], 64)) : q(e.$slots, "default", {
+          values: u.value,
+          allChecked: M.value,
+          indeterminate: I.value,
+          checkAll: K,
+          clear: z
+        }, () => [
+          oe("span", ge, [
+            q(e.$slots, "empty", {}, () => [
+              F(N(s.emptyText), 1)
+            ], !0)
+          ])
+        ], !0, 1),
+        s.name ? (m(!0), y(T, { key: 2 }, G(u.value, (i) => (m(), y("input", {
+          key: o(O)(i),
+          type: "hidden",
+          name: s.name,
+          form: s.form,
+          value: String(i),
+          disabled: o(f) || W(i)
+        }, null, 8, pe))), 128)) : R("", !0),
+        s.error ? (m(), y("small", {
+          key: 3,
+          id: o(j),
+          role: "alert",
+          class: "hys-ui-checkbox-group-error"
+        }, N(s.error), 9, ke)) : R("", !0)
+      ], 16, be);
+    };
+  }
+});
+export {
+  qe as default
+};

package/dist/components/HysColorPicker/HysColorPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./HysColorPicker2.vue.js";
 /* empty css                    */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-00820c72"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-2a198a4e"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/HysColorPicker/HysColorPicker2.vue.js

@@ -1,16 +1,17 @@
-import { defineComponent as O, ref as y, computed as K, watch as L, openBlock as m, createElementBlock as b, mergeProps as U, unref as d, createElementVNode as o, normalizeStyle as v, createVNode as Q, withDirectives as W, withKeys as Z, vModelText as _, createCommentVNode as C, createBlock as z, Teleport as ee, toDisplayString as te, Fragment as ae, renderList as le } from "vue";
-import { useHysRootAttrs as oe } from "../../config.js";
-import { ChevronDown as re, Check as ne } from "lucide-vue-next";
-import { useFloating as ie } from "../../composables/useFloating.js";
-const ue = { class: "hys-ui-pf-color-control" }, se = ["aria-label", "aria-expanded", "disabled"], de = ["aria-invalid", "disabled"], fe = {
+import { defineComponent as Q, ref as v, computed as L, watch as U, openBlock as p, createElementBlock as b, mergeProps as z, unref as n, createElementVNode as o, normalizeStyle as k, createVNode as W, withDirectives as Z, withKeys as _, vModelText as ee, createCommentVNode as P, createBlock as N, Teleport as te, toDisplayString as ae, Fragment as le, renderList as oe } from "vue";
+import { useHysControlState as re } from "../../composables/formContext.js";
+import { useHysRootAttrs as ne } from "../../config.js";
+import { ChevronDown as ie, Check as ue } from "lucide-vue-next";
+import { useFloating as se } from "../../composables/useFloating.js";
+const de = { class: "hys-ui-pf-color-control" }, fe = ["aria-label", "aria-expanded", "disabled"], ce = ["aria-invalid", "disabled"], pe = {
   key: 0,
   class: "hys-ui-pf-color-error",
   role: "alert"
-}, ce = ["aria-label"], pe = ["aria-valuenow", "aria-valuetext"], me = ["aria-valuenow"], he = {
+}, me = ["aria-label"], ye = ["aria-valuenow", "aria-valuetext"], he = ["aria-valuenow"], ve = {
   class: "hys-ui-pf-color-presets",
   role: "group",
   "aria-label": "常用颜色"
-}, ye = ["aria-label", "aria-pressed", "onClick"], we = /* @__PURE__ */ O({
+}, be = ["aria-label", "aria-pressed", "onClick"], Me = /* @__PURE__ */ Q({
   __name: "HysColorPicker",
   props: {
     modelValue: {},
@@ -20,135 +21,135 @@ const ue = { class: "hys-ui-pf-color-control" }, se = ["aria-label", "aria-expan
     clearable: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(i, { emit: N }) {
-    const H = oe(), r = i, P = N, R = y(), V = y(), { open: A, style: F, show: G, close: g } = ie(R, V), f = y(0), n = y(0), u = y(0), s = y(r.modelValue), B = K(() => !s.value || /^#[0-9a-f]{6}$/i.test(s.value)), q = ["#3867f5", "#8955ea", "#ec4899", "#ef4444", "#f59e0b", "#22a06b", "#06b6d4", "#172a4d", "#ffffff", "#000000"];
-    function X() {
-      const e = n.value / 100, t = u.value / 100, a = (l) => {
-        const p = (l + f.value / 60) % 6;
-        return Math.round(255 * (t - t * e * Math.max(0, Math.min(p, 4 - p, 1)))).toString(16).padStart(2, "0");
+  setup(m, { emit: F }) {
+    const R = ne(), y = m, { disabled: i } = re(y), V = F, S = v(), A = v(), { open: D, style: G, show: q, close: w } = se(S, A), d = v(0), r = v(0), u = v(0), s = v(y.modelValue), B = L(() => !s.value || /^#[0-9a-f]{6}$/i.test(s.value)), X = ["#3867f5", "#8955ea", "#ec4899", "#ef4444", "#f59e0b", "#22a06b", "#06b6d4", "#172a4d", "#ffffff", "#000000"];
+    function Y() {
+      const e = r.value / 100, t = u.value / 100, a = (l) => {
+        const c = (l + d.value / 60) % 6;
+        return Math.round(255 * (t - t * e * Math.max(0, Math.min(c, 4 - c, 1)))).toString(16).padStart(2, "0");
       };
       return "#" + a(5) + a(3) + a(1);
     }
-    const c = K(X);
-    function D(e) {
+    const f = L(Y);
+    function H(e) {
       if (!/^#[0-9a-f]{6}$/i.test(e)) return;
-      const t = [1, 3, 5].map((M) => parseInt(e.slice(M, M + 2), 16) / 255), [a, l, p] = t, h = Math.max(...t), J = Math.min(...t), k = h - J;
-      if (k) {
-        const M = h === a ? (l - p) / k : h === l ? (p - a) / k + 2 : (a - l) / k + 4;
-        f.value = (M * 60 + 360) % 360;
+      const t = [1, 3, 5].map((M) => parseInt(e.slice(M, M + 2), 16) / 255), [a, l, c] = t, h = Math.max(...t), O = Math.min(...t), g = h - O;
+      if (g) {
+        const M = h === a ? (l - c) / g : h === l ? (c - a) / g + 2 : (a - l) / g + 4;
+        d.value = (M * 60 + 360) % 360;
       }
-      n.value = h ? k / h * 100 : 0, u.value = h * 100;
+      r.value = h ? g / h * 100 : 0, u.value = h * 100;
     }
-    L(() => r.modelValue, (e) => {
-      s.value = e, /^#[0-9a-f]{6}$/i.test(e) && e.toLowerCase() !== c.value && D(e);
+    U(() => y.modelValue, (e) => {
+      s.value = e, /^#[0-9a-f]{6}$/i.test(e) && e.toLowerCase() !== f.value && H(e);
     }, { immediate: !0 });
-    function w() {
-      s.value = c.value, P("update:modelValue", c.value);
+    function x() {
+      s.value = f.value, V("update:modelValue", f.value);
     }
     function $() {
-      if (!(r.disabled || !B.value)) {
+      if (!(i.value || !B.value)) {
         if (!s.value) {
-          r.clearable ? P("update:modelValue", "") : s.value = r.modelValue;
+          y.clearable ? V("update:modelValue", "") : s.value = y.modelValue;
           return;
         }
-        D(s.value), w();
+        H(s.value), x();
       }
     }
-    function Y(e) {
-      r.disabled || !/^#[0-9a-f]{6}$/i.test(e) || (D(e), w());
+    function j(e) {
+      i.value || !/^#[0-9a-f]{6}$/i.test(e) || (H(e), x());
     }
-    async function j() {
+    async function J() {
       var e, t;
-      if (!r.disabled) {
-        if (A.value) {
-          g();
+      if (!i.value) {
+        if (D.value) {
+          w();
           return;
         }
-        await G(), (t = (e = V.value) == null ? void 0 : e.querySelector('[role="slider"]')) == null || t.focus();
+        await q(), (t = (e = A.value) == null ? void 0 : e.querySelector('[role="slider"]')) == null || t.focus();
       }
     }
-    function S(e, t) {
-      if (r.disabled) return;
+    function T(e, t) {
+      if (i.value) return;
       const l = e.currentTarget.getBoundingClientRect();
       if (!l.width || !l.height) return;
-      const p = Math.max(0, Math.min(1, (e.clientX - l.left) / l.width));
-      t === "hue" ? f.value = p * 359 : (n.value = p * 100, u.value = (1 - Math.max(0, Math.min(1, (e.clientY - l.top) / l.height))) * 100), w();
+      const c = Math.max(0, Math.min(1, (e.clientX - l.left) / l.width));
+      t === "hue" ? d.value = c * 359 : (r.value = c * 100, u.value = (1 - Math.max(0, Math.min(1, (e.clientY - l.top) / l.height))) * 100), x();
     }
-    function T(e, t) {
-      if (e.button !== 0 || r.disabled) return;
+    function E(e, t) {
+      if (e.button !== 0 || i.value) return;
       e.preventDefault();
       const a = e.currentTarget;
-      a.focus(), a.setPointerCapture(e.pointerId), S(e, t);
+      a.focus(), a.setPointerCapture(e.pointerId), T(e, t);
     }
-    function E(e, t) {
-      e.currentTarget.hasPointerCapture(e.pointerId) && S(e, t);
+    function I(e, t) {
+      e.currentTarget.hasPointerCapture(e.pointerId) && T(e, t);
     }
-    function x(e) {
+    function C(e) {
       const t = e.currentTarget;
       t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId);
     }
-    function I(e, t) {
-      if (r.disabled || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return;
+    function K(e, t) {
+      if (i.value || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return;
       e.preventDefault();
       const a = e.shiftKey ? 10 : 1;
       if (t === "hue") {
         const l = e.key === "ArrowLeft" || e.key === "ArrowDown" ? -a : a;
-        f.value = e.key === "Home" ? 0 : e.key === "End" ? 359 : Math.max(0, Math.min(359, f.value + l));
+        d.value = e.key === "Home" ? 0 : e.key === "End" ? 359 : Math.max(0, Math.min(359, d.value + l));
       } else
-        e.key === "ArrowLeft" && (n.value = Math.max(0, n.value - a)), e.key === "ArrowRight" && (n.value = Math.min(100, n.value + a)), e.key === "ArrowUp" && (u.value = Math.min(100, u.value + a)), e.key === "ArrowDown" && (u.value = Math.max(0, u.value - a)), e.key === "Home" && (n.value = 0), e.key === "End" && (n.value = 100);
-      w();
+        e.key === "ArrowLeft" && (r.value = Math.max(0, r.value - a)), e.key === "ArrowRight" && (r.value = Math.min(100, r.value + a)), e.key === "ArrowUp" && (u.value = Math.min(100, u.value + a)), e.key === "ArrowDown" && (u.value = Math.max(0, u.value - a)), e.key === "Home" && (r.value = 0), e.key === "End" && (r.value = 100);
+      x();
     }
-    return L(() => r.disabled, (e) => {
-      e && g();
-    }), (e, t) => (m(), b("div", U(d(H), { class: "hys-ui-pf-color-picker" }), [
-      o("div", ue, [
+    return U(() => i.value, (e) => {
+      e && w();
+    }), (e, t) => (p(), b("div", z(n(R), { class: "hys-ui-pf-color-picker" }), [
+      o("div", de, [
         o("button", {
           ref_key: "trigger",
-          ref: R,
+          ref: S,
           type: "button",
           class: "hys-ui-pf-color-trigger",
-          "aria-label": i.label || "选择颜色",
+          "aria-label": m.label || "选择颜色",
           "aria-haspopup": "dialog",
-          "aria-expanded": d(A),
-          disabled: i.disabled,
-          onClick: j
+          "aria-expanded": n(D),
+          disabled: n(i),
+          onClick: J
         }, [
           o("span", {
             class: "hys-ui-pf-color-chip",
-            style: v({ background: i.modelValue ? c.value : "transparent" })
+            style: k({ background: m.modelValue ? f.value : "transparent" })
           }, null, 4),
-          Q(d(re), {
+          W(n(ie), {
             size: 14,
             "aria-hidden": "true"
           })
-        ], 8, se),
-        W(o("input", {
+        ], 8, fe),
+        Z(o("input", {
           "onUpdate:modelValue": t[0] || (t[0] = (a) => s.value = a),
           class: "hys-ui-pf-color-hex",
           "aria-label": "十六进制颜色",
           "aria-invalid": !B.value,
-          disabled: i.disabled,
+          disabled: n(i),
           maxlength: "7",
           spellcheck: "false",
           onChange: $,
-          onKeydown: Z($, ["enter"])
-        }, null, 40, de), [
-          [_, s.value]
+          onKeydown: _($, ["enter"])
+        }, null, 40, ce), [
+          [ee, s.value]
         ])
       ]),
-      B.value ? C("", !0) : (m(), b("small", fe, "请输入 #RRGGBB 格式")),
-      (m(), z(ee, { to: "body" }, [
-        d(A) ? (m(), b("div", U({ key: 0 }, d(H), {
+      B.value ? P("", !0) : (p(), b("small", pe, "请输入 #RRGGBB 格式")),
+      (p(), N(te, { to: "body" }, [
+        n(D) ? (p(), b("div", z({ key: 0 }, n(R), {
           ref_key: "panel",
-          ref: V,
+          ref: A,
           class: "hys-ui-v4-menu hys-ui-pf-color-panel",
-          style: d(F),
+          style: n(G),
           role: "dialog",
-          "aria-label": i.label || "选择颜色"
+          "aria-label": m.label || "选择颜色"
         }), [
           o("header", null, [
             t[9] || (t[9] = o("strong", null, "选择颜色", -1)),
-            o("code", null, te(c.value.toUpperCase()), 1)
+            o("code", null, ae(f.value.toUpperCase()), 1)
           ]),
           o("div", {
             class: "hys-ui-pf-color-palette",
@@ -157,20 +158,20 @@ const ue = { class: "hys-ui-pf-color-control" }, se = ["aria-label", "aria-expan
             "aria-label": "饱和度与亮度",
             "aria-valuemin": "0",
             "aria-valuemax": "100",
-            "aria-valuenow": Math.round(n.value),
-            "aria-valuetext": "饱和度 " + Math.round(n.value) + "%，亮度 " + Math.round(u.value) + "%",
-            style: v({ backgroundColor: "hsl(" + f.value + ",100%,50%)" }),
-            onPointerdown: t[1] || (t[1] = (a) => T(a, "palette")),
-            onPointermove: t[2] || (t[2] = (a) => E(a, "palette")),
-            onPointerup: x,
-            onPointercancel: x,
-            onKeydown: t[3] || (t[3] = (a) => I(a, "palette"))
+            "aria-valuenow": Math.round(r.value),
+            "aria-valuetext": "饱和度 " + Math.round(r.value) + "%，亮度 " + Math.round(u.value) + "%",
+            style: k({ backgroundColor: "hsl(" + d.value + ",100%,50%)" }),
+            onPointerdown: t[1] || (t[1] = (a) => E(a, "palette")),
+            onPointermove: t[2] || (t[2] = (a) => I(a, "palette")),
+            onPointerup: C,
+            onPointercancel: C,
+            onKeydown: t[3] || (t[3] = (a) => K(a, "palette"))
           }, [
             o("span", {
               class: "hys-ui-pf-color-cursor",
-              style: v({ left: n.value + "%", top: 100 - u.value + "%", background: c.value })
+              style: k({ left: r.value + "%", top: 100 - u.value + "%", background: f.value })
             }, null, 4)
-          ], 44, pe),
+          ], 44, ye),
           o("div", {
             class: "hys-ui-pf-color-hue",
             role: "slider",
@@ -178,54 +179,54 @@ const ue = { class: "hys-ui-pf-color-control" }, se = ["aria-label", "aria-expan
             "aria-label": "色相",
             "aria-valuemin": "0",
             "aria-valuemax": "359",
-            "aria-valuenow": Math.round(f.value),
-            onPointerdown: t[4] || (t[4] = (a) => T(a, "hue")),
-            onPointermove: t[5] || (t[5] = (a) => E(a, "hue")),
-            onPointerup: x,
-            onPointercancel: x,
-            onKeydown: t[6] || (t[6] = (a) => I(a, "hue"))
+            "aria-valuenow": Math.round(d.value),
+            onPointerdown: t[4] || (t[4] = (a) => E(a, "hue")),
+            onPointermove: t[5] || (t[5] = (a) => I(a, "hue")),
+            onPointerup: C,
+            onPointercancel: C,
+            onKeydown: t[6] || (t[6] = (a) => K(a, "hue"))
           }, [
             o("span", {
-              style: v({ left: f.value / 359 * 100 + "%" })
+              style: k({ left: d.value / 359 * 100 + "%" })
             }, null, 4)
-          ], 40, me),
-          o("div", he, [
-            (m(!0), b(ae, null, le(r.presets || q, (a) => (m(), b("button", {
+          ], 40, he),
+          o("div", ve, [
+            (p(!0), b(le, null, oe(y.presets || X, (a) => (p(), b("button", {
               key: a,
               type: "button",
               "aria-label": a,
-              "aria-pressed": c.value === a,
-              style: v({ background: a }),
-              onClick: (l) => Y(a)
+              "aria-pressed": f.value === a,
+              style: k({ background: a }),
+              onClick: (l) => j(a)
             }, [
-              c.value === a ? (m(), z(d(ne), {
+              f.value === a ? (p(), N(n(ue), {
                 key: 0,
                 size: 13,
-                style: v({ color: a === "#ffffff" ? "#172a4d" : "white" }),
+                style: k({ color: a === "#ffffff" ? "#172a4d" : "white" }),
                 "aria-hidden": "true"
-              }, null, 8, ["style"])) : C("", !0)
-            ], 12, ye))), 128))
+              }, null, 8, ["style"])) : P("", !0)
+            ], 12, be))), 128))
           ]),
-          i.clearable && !i.disabled && i.modelValue ? (m(), b("button", {
+          m.clearable && !n(i) && m.modelValue ? (p(), b("button", {
             key: 0,
             type: "button",
             class: "hys-ui-color-clear",
             onClick: t[7] || (t[7] = (a) => {
-              P("update:modelValue", ""), d(g)(!0);
+              V("update:modelValue", ""), n(w)(!0);
             })
-          }, "清空颜色")) : C("", !0),
+          }, "清空颜色")) : P("", !0),
           o("footer", null, [
             t[10] || (t[10] = o("span", null, "方向键微调 · Shift 加速", -1)),
             o("button", {
               type: "button",
-              onClick: t[8] || (t[8] = (a) => d(g)(!0))
+              onClick: t[8] || (t[8] = (a) => n(w)(!0))
             }, "完成")
           ])
-        ], 16, ce)) : C("", !0)
+        ], 16, me)) : P("", !0)
       ]))
     ], 16));
   }
 });
 export {
-  we as default
+  Me as default
 };