hys-ui 0.2.0 → 0.4.0

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

@@ -1,232 +1,254 @@
-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 = {
+import { defineComponent as A, computed as v, openBlock as i, createElementBlock as n, mergeProps as w, unref as t, Fragment as E, renderSlot as u, normalizeProps as d, guardReactiveProps as p, createElementVNode as m, normalizeStyle as D, toDisplayString as C, createCommentVNode as s, createVNode as T, withKeys as F, withModifiers as H, createBlock as y, createSlots as $, withCtx as f, Teleport as K } from "vue";
+import { ChevronDown as L } from "lucide-vue-next";
+import P from "./HysColorPanel.vue.js";
+import N from "../../motion/PopupMotion.js";
+import { useHysRootAttrs as M } from "../../config.js";
+import { useColorPicker as R } from "../../composables/useColorPicker.js";
+import { parseColor as W, colorCss as q } from "../../composables/color.js";
+const G = ["data-status"], J = {
+  key: 1,
+  class: "hys-ui-pf-color-control"
+}, Q = ["id", "aria-label", "aria-controls", "aria-expanded", "disabled", "tabindex"], U = { class: "hys-ui-pf-color-chip" }, X = {
   key: 0,
-  class: "hys-ui-pf-color-error",
-  role: "alert"
-}, me = ["aria-label"], ye = ["aria-valuenow", "aria-valuetext"], he = ["aria-valuenow"], ve = {
-  class: "hys-ui-pf-color-presets",
-  role: "group",
-  "aria-label": "常用颜色"
-}, be = ["aria-label", "aria-pressed", "onClick"], Me = /* @__PURE__ */ Q({
+  class: "hys-ui-color-value"
+}, Y = ["id", "value", "aria-label", "aria-invalid", "aria-describedby", "disabled", "readonly"], Z = ["id"], _ = ["name", "form", "value"], ne = /* @__PURE__ */ A({
+  inheritAttrs: !1,
   __name: "HysColorPicker",
   props: {
-    modelValue: {},
+    modelValue: { default: void 0 },
+    defaultValue: {},
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    size: {},
     label: {},
+    ariaLabel: {},
     presets: {},
-    clearable: { type: Boolean }
+    clearable: { type: Boolean },
+    showAlpha: { type: Boolean },
+    format: {},
+    immediate: { type: Boolean, default: !0 },
+    showInput: { type: Boolean, default: !0 },
+    showText: { type: Boolean },
+    showPresets: { type: Boolean, default: !0 },
+    inline: { type: Boolean },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean },
+    placement: { default: "bottom-start" },
+    appendTo: { type: [String, Boolean], default: "body" },
+    popupClass: {},
+    popupStyle: {},
+    popupWidth: { default: 288 },
+    showFooter: { type: Boolean, default: !0 },
+    confirmText: {},
+    cancelText: {},
+    clearText: {},
+    status: {},
+    error: {},
+    name: {},
+    form: {},
+    tabindex: {},
+    autofocus: { type: Boolean },
+    validateEvent: { type: Boolean, default: !0 },
+    inputProps: {},
+    popupTransition: {},
+    popupTransitionDuration: {}
   },
-  emits: ["update:modelValue"],
-  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 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, 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;
-      }
-      r.value = h ? g / h * 100 : 0, u.value = h * 100;
-    }
-    U(() => y.modelValue, (e) => {
-      s.value = e, /^#[0-9a-f]{6}$/i.test(e) && e.toLowerCase() !== f.value && H(e);
-    }, { immediate: !0 });
-    function x() {
-      s.value = f.value, V("update:modelValue", f.value);
-    }
-    function $() {
-      if (!(i.value || !B.value)) {
-        if (!s.value) {
-          y.clearable ? V("update:modelValue", "") : s.value = y.modelValue;
-          return;
-        }
-        H(s.value), x();
-      }
-    }
-    function j(e) {
-      i.value || !/^#[0-9a-f]{6}$/i.test(e) || (H(e), x());
-    }
-    async function J() {
-      var e, t;
-      if (!i.value) {
-        if (D.value) {
-          w();
-          return;
-        }
-        await q(), (t = (e = A.value) == null ? void 0 : e.querySelector('[role="slider"]')) == null || t.focus();
-      }
-    }
-    function T(e, t) {
-      if (i.value) return;
-      const l = e.currentTarget.getBoundingClientRect();
-      if (!l.width || !l.height) return;
-      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 E(e, t) {
-      if (e.button !== 0 || i.value) return;
-      e.preventDefault();
-      const a = e.currentTarget;
-      a.focus(), a.setPointerCapture(e.pointerId), T(e, t);
-    }
-    function I(e, t) {
-      e.currentTarget.hasPointerCapture(e.pointerId) && T(e, t);
-    }
-    function C(e) {
-      const t = e.currentTarget;
-      t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId);
-    }
-    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;
-        d.value = e.key === "Home" ? 0 : e.key === "End" ? 359 : Math.max(0, Math.min(359, d.value + l));
-      } else
-        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 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: S,
-          type: "button",
-          class: "hys-ui-pf-color-trigger",
-          "aria-label": m.label || "选择颜色",
-          "aria-haspopup": "dialog",
-          "aria-expanded": n(D),
-          disabled: n(i),
-          onClick: J
-        }, [
-          o("span", {
-            class: "hys-ui-pf-color-chip",
-            style: k({ background: m.modelValue ? f.value : "transparent" })
-          }, null, 4),
-          W(n(ie), {
-            size: 14,
-            "aria-hidden": "true"
-          })
-        ], 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: n(i),
-          maxlength: "7",
-          spellcheck: "false",
-          onChange: $,
-          onKeydown: _($, ["enter"])
-        }, null, 40, ce), [
-          [ee, s.value]
-        ])
-      ]),
-      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: A,
-          class: "hys-ui-v4-menu hys-ui-pf-color-panel",
-          style: n(G),
-          role: "dialog",
-          "aria-label": m.label || "选择颜色"
-        }), [
-          o("header", null, [
-            t[9] || (t[9] = o("strong", null, "选择颜色", -1)),
-            o("code", null, ae(f.value.toUpperCase()), 1)
-          ]),
-          o("div", {
-            class: "hys-ui-pf-color-palette",
-            role: "slider",
-            tabindex: "0",
-            "aria-label": "饱和度与亮度",
-            "aria-valuemin": "0",
-            "aria-valuemax": "100",
-            "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: k({ left: r.value + "%", top: 100 - u.value + "%", background: f.value })
-            }, null, 4)
-          ], 44, ye),
-          o("div", {
-            class: "hys-ui-pf-color-hue",
-            role: "slider",
-            tabindex: "0",
-            "aria-label": "色相",
-            "aria-valuemin": "0",
-            "aria-valuemax": "359",
-            "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"))
+  emits: ["update:modelValue", "update:open", "change", "activeChange", "visibleChange", "confirm", "cancel", "clear", "invalid", "focus", "blur"],
+  setup(l, { expose: I, emit: x }) {
+    const c = l, O = x, S = M(), e = R(
+      c,
+      (a, ...r) => O(a, ...r)
+    ), V = v(() => {
+      const a = W(e.value.value);
+      return a ? q(a) : "transparent";
+    }), b = (a) => a === "id" || a.startsWith("aria-") || a === "required", j = v(
+      () => Object.fromEntries(
+        Object.entries(e.attrs).filter(([a]) => !b(a))
+      )
+    ), z = v(
+      () => Object.fromEntries(
+        Object.entries(e.attrs).filter(([a]) => b(a))
+      )
+    );
+    return I({
+      element: e.element,
+      input: e.input,
+      panel: e.panel,
+      value: e.value,
+      draft: e.draft,
+      color: v(() => ({ ...e.working.value })),
+      open: e.open,
+      focus: e.focus,
+      blur: e.blur,
+      show: e.show,
+      hide: e.hide,
+      confirm: e.confirm,
+      cancel: e.cancel,
+      clear: e.clear,
+      setColor: e.setColor
+    }), (a, r) => {
+      var h, g, k, B;
+      return i(), n("div", w({
+        ref: (o) => t(e).element.value = o
+      }, { ...t(S), ...j.value }, {
+        class: ["hys-ui-pf-color-picker", [
+          "hys-ui-color-picker-" + t(e).control.size.value,
+          {
+            "hys-ui-color-disabled": t(e).control.disabled.value,
+            "hys-ui-color-focused": t(e).focused.value
+          }
+        ]],
+        "data-status": t(e).status.value,
+        onFocusin: r[4] || (r[4] = //@ts-ignore
+        (...o) => t(e).focusIn && t(e).focusIn(...o)),
+        onFocusout: r[5] || (r[5] = //@ts-ignore
+        (...o) => t(e).focusOut && t(e).focusOut(...o))
+      }), [
+        l.inline ? s("", !0) : (i(), n(E, { key: 0 }, [
+          a.$slots.trigger ? (i(), n("span", {
+            key: 0,
+            ref: (o) => t(e).trigger.value = o,
+            class: "hys-ui-color-custom-trigger",
+            tabindex: "-1"
           }, [
-            o("span", {
-              style: k({ left: d.value / 359 * 100 + "%" })
-            }, null, 4)
-          ], 40, he),
-          o("div", ve, [
-            (p(!0), b(le, null, oe(y.presets || X, (a) => (p(), b("button", {
-              key: a,
+            u(a.$slots, "trigger", d(p(t(e).context.value)), void 0, !0)
+          ], 512)) : (i(), n("div", J, [
+            m("button", {
+              ref: (o) => t(e).trigger.value = o,
               type: "button",
-              "aria-label": a,
-              "aria-pressed": f.value === a,
-              style: k({ background: a }),
-              onClick: (l) => j(a)
+              class: "hys-ui-pf-color-trigger",
+              id: l.showInput ? void 0 : t(e).attrs.id || ((h = t(e).field) == null ? void 0 : h.id.value),
+              "aria-label": l.ariaLabel || t(e).attrs["aria-label"] || l.label || ((g = t(e).field) == null ? void 0 : g.label.value) || "选择颜色",
+              "aria-haspopup": "dialog",
+              "aria-controls": t(e).open.value ? t(e).panelId : void 0,
+              "aria-expanded": t(e).open.value,
+              disabled: t(e).control.disabled.value,
+              tabindex: l.tabindex,
+              onClick: r[0] || (r[0] = (o) => t(e).open.value ? t(e).hide() : t(e).show())
             }, [
-              f.value === a ? (p(), N(n(ue), {
-                key: 0,
-                size: 13,
-                style: k({ color: a === "#ffffff" ? "#172a4d" : "white" }),
+              m("span", U, [
+                m("span", {
+                  style: D({ background: V.value })
+                }, null, 4)
+              ]),
+              l.showText ? (i(), n("span", X, C(t(e).value.value || "选择颜色"), 1)) : s("", !0),
+              T(t(L), {
+                size: 14,
                 "aria-hidden": "true"
-              }, null, 8, ["style"])) : P("", !0)
-            ], 12, be))), 128))
-          ]),
-          m.clearable && !n(i) && m.modelValue ? (p(), b("button", {
-            key: 0,
-            type: "button",
-            class: "hys-ui-color-clear",
-            onClick: t[7] || (t[7] = (a) => {
-              V("update:modelValue", ""), n(w)(!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) => n(w)(!0))
-            }, "完成")
-          ])
-        ], 16, me)) : P("", !0)
-      ]))
-    ], 16));
+              })
+            ], 8, Q),
+            l.showInput ? (i(), n("input", w({
+              key: 0,
+              ref: (o) => t(e).input.value = o
+            }, { ...l.inputProps, ...z.value }, {
+              class: "hys-ui-pf-color-hex",
+              id: t(e).attrs.id || ((k = t(e).field) == null ? void 0 : k.id.value),
+              "data-hys-ui-field-managed": "",
+              value: t(e).draft.value,
+              "aria-label": l.ariaLabel || t(e).attrs["aria-label"] || (l.label ? l.label + " 颜色值" : t(e).format.value === "hex" ? "十六进制颜色" : "颜色值"),
+              "aria-invalid": t(e).status.value === "error" || void 0,
+              "aria-describedby": [
+                t(e).attrs["aria-describedby"],
+                (B = t(e).field) == null ? void 0 : B.describedBy.value,
+                l.error ? t(e).errorId : void 0
+              ].filter(Boolean).join(" ") || void 0,
+              disabled: t(e).control.disabled.value,
+              readonly: l.readonly,
+              spellcheck: "false",
+              autocomplete: "off",
+              onInput: r[1] || (r[1] = (o) => t(e).draft.value = o.target.value),
+              onChange: r[2] || (r[2] = //@ts-ignore
+              (...o) => t(e).commitText && t(e).commitText(...o)),
+              onKeydown: r[3] || (r[3] = F(H((o) => l.immediate === !1 ? t(e).confirm() : t(e).commitText(), ["prevent"]), ["enter"]))
+            }), null, 16, Y)) : s("", !0)
+          ]))
+        ], 64)),
+        l.error || !t(e).valid.value ? (i(), n("small", {
+          key: 1,
+          id: t(e).errorId,
+          class: "hys-ui-pf-color-error",
+          role: "alert"
+        }, C(l.error || "请输入有效的颜色值"), 9, Z)) : s("", !0),
+        l.inline && t(e).live.value ? (i(), y(P, {
+          key: 2,
+          state: t(e),
+          options: c
+        }, $({ _: 2 }, [
+          a.$slots.header ? {
+            name: "header",
+            fn: f((o) => [
+              u(a.$slots, "header", d(p(o)), void 0, !0)
+            ]),
+            key: "0"
+          } : void 0,
+          a.$slots.footer ? {
+            name: "footer",
+            fn: f((o) => [
+              u(a.$slots, "footer", d(p(o)), void 0, !0)
+            ]),
+            key: "1"
+          } : void 0,
+          a.$slots.preset ? {
+            name: "preset",
+            fn: f((o) => [
+              u(a.$slots, "preset", d(p(o)), void 0, !0)
+            ]),
+            key: "2"
+          } : void 0
+        ]), 1032, ["state"])) : s("", !0),
+        !l.inline && t(e).live.value ? (i(), y(K, {
+          key: 3,
+          to: t(e).teleportTo.value,
+          disabled: l.appendTo === !1
+        }, [
+          T(t(N), {
+            "popup-transition": l.popupTransition,
+            "popup-transition-duration": l.popupTransitionDuration,
+            placement: t(e).floating.placement.value
+          }, {
+            default: f(() => [
+              t(e).floating.open.value ? (i(), y(P, {
+                key: 0,
+                state: t(e),
+                options: c
+              }, $({ _: 2 }, [
+                a.$slots.header ? {
+                  name: "header",
+                  fn: f((o) => [
+                    u(a.$slots, "header", d(p(o)), void 0, !0)
+                  ]),
+                  key: "0"
+                } : void 0,
+                a.$slots.footer ? {
+                  name: "footer",
+                  fn: f((o) => [
+                    u(a.$slots, "footer", d(p(o)), void 0, !0)
+                  ]),
+                  key: "1"
+                } : void 0,
+                a.$slots.preset ? {
+                  name: "preset",
+                  fn: f((o) => [
+                    u(a.$slots, "preset", d(p(o)), void 0, !0)
+                  ]),
+                  key: "2"
+                } : void 0
+              ]), 1032, ["state"])) : s("", !0)
+            ]),
+            _: 3
+          }, 8, ["popup-transition", "popup-transition-duration", "placement"])
+        ], 8, ["to", "disabled"])) : s("", !0),
+        l.name && !t(e).control.disabled.value ? (i(), n("input", {
+          key: 4,
+          type: "hidden",
+          name: l.name,
+          form: l.form,
+          value: t(e).value.value
+        }, null, 8, _)) : s("", !0)
+      ], 16, G);
+    };
   }
 });
 export {
-  Me as default
+  ne as default
 };