hys-ui 0.1.1 → 0.3.0

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

@@ -1,231 +1,254 @@
-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 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"
-}, ce = ["aria-label"], pe = ["aria-valuenow", "aria-valuetext"], me = ["aria-valuenow"], he = {
-  class: "hys-ui-pf-color-presets",
-  role: "group",
-  "aria-label": "常用颜色"
-}, ye = ["aria-label", "aria-pressed", "onClick"], we = /* @__PURE__ */ O({
+  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(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");
-      };
-      return "#" + a(5) + a(3) + a(1);
-    }
-    const c = K(X);
-    function D(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;
-      }
-      n.value = h ? k / 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);
-    }, { immediate: !0 });
-    function w() {
-      s.value = c.value, P("update:modelValue", c.value);
-    }
-    function $() {
-      if (!(r.disabled || !B.value)) {
-        if (!s.value) {
-          r.clearable ? P("update:modelValue", "") : s.value = r.modelValue;
-          return;
-        }
-        D(s.value), w();
-      }
-    }
-    function Y(e) {
-      r.disabled || !/^#[0-9a-f]{6}$/i.test(e) || (D(e), w());
-    }
-    async function j() {
-      var e, t;
-      if (!r.disabled) {
-        if (A.value) {
-          g();
-          return;
-        }
-        await G(), (t = (e = V.value) == null ? void 0 : e.querySelector('[role="slider"]')) == null || t.focus();
-      }
-    }
-    function S(e, t) {
-      if (r.disabled) 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();
-    }
-    function T(e, t) {
-      if (e.button !== 0 || r.disabled) return;
-      e.preventDefault();
-      const a = e.currentTarget;
-      a.focus(), a.setPointerCapture(e.pointerId), S(e, t);
-    }
-    function E(e, t) {
-      e.currentTarget.hasPointerCapture(e.pointerId) && S(e, t);
-    }
-    function x(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;
-      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));
-      } 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();
-    }
-    return L(() => r.disabled, (e) => {
-      e && g();
-    }), (e, t) => (m(), b("div", U(d(H), { class: "hys-ui-pf-color-picker" }), [
-      o("div", ue, [
-        o("button", {
-          ref_key: "trigger",
-          ref: R,
-          type: "button",
-          class: "hys-ui-pf-color-trigger",
-          "aria-label": i.label || "选择颜色",
-          "aria-haspopup": "dialog",
-          "aria-expanded": d(A),
-          disabled: i.disabled,
-          onClick: j
-        }, [
-          o("span", {
-            class: "hys-ui-pf-color-chip",
-            style: v({ background: i.modelValue ? c.value : "transparent" })
-          }, null, 4),
-          Q(d(re), {
-            size: 14,
-            "aria-hidden": "true"
-          })
-        ], 8, se),
-        W(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,
-          maxlength: "7",
-          spellcheck: "false",
-          onChange: $,
-          onKeydown: Z($, ["enter"])
-        }, null, 40, de), [
-          [_, 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), {
-          ref_key: "panel",
-          ref: V,
-          class: "hys-ui-v4-menu hys-ui-pf-color-panel",
-          style: d(F),
-          role: "dialog",
-          "aria-label": i.label || "选择颜色"
-        }), [
-          o("header", null, [
-            t[9] || (t[9] = o("strong", null, "选择颜色", -1)),
-            o("code", null, te(c.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(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"))
-          }, [
-            o("span", {
-              class: "hys-ui-pf-color-cursor",
-              style: v({ left: n.value + "%", top: 100 - u.value + "%", background: c.value })
-            }, null, 4)
-          ], 44, pe),
-          o("div", {
-            class: "hys-ui-pf-color-hue",
-            role: "slider",
-            tabindex: "0",
-            "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"))
+  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: v({ left: f.value / 359 * 100 + "%" })
-            }, null, 4)
-          ], 40, me),
-          o("div", he, [
-            (m(!0), b(ae, null, le(r.presets || q, (a) => (m(), 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": c.value === a,
-              style: v({ background: a }),
-              onClick: (l) => Y(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())
             }, [
-              c.value === a ? (m(), z(d(ne), {
-                key: 0,
-                size: 13,
-                style: v({ 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"])) : C("", !0)
-            ], 12, ye))), 128))
-          ]),
-          i.clearable && !i.disabled && i.modelValue ? (m(), b("button", {
-            key: 0,
-            type: "button",
-            class: "hys-ui-color-clear",
-            onClick: t[7] || (t[7] = (a) => {
-              P("update:modelValue", ""), d(g)(!0);
-            })
-          }, "清空颜色")) : C("", !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))
-            }, "完成")
-          ])
-        ], 16, ce)) : C("", !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 {
-  we as default
+  ne as default
 };