hys-ui 0.2.0 → 0.4.0

package/dist/composables/uploadRequest.js

@@ -0,0 +1,58 @@
+import { uploadFailure as i } from "./upload.js";
+function m(e) {
+  const r = new XMLHttpRequest(), l = new FormData();
+  for (const [t, a] of Object.entries(e.data))
+    for (const d of Array.isArray(a) ? a : [a])
+      d !== void 0 && l.append(
+        t,
+        d instanceof Blob ? d : d === null ? "" : String(d)
+      );
+  l.append(
+    e.name,
+    e.body,
+    e.body instanceof File && e.body !== e.file.raw ? e.body.name : e.file.name
+  );
+  let n = !1;
+  const s = () => {
+    e.signal.removeEventListener("abort", u), r.upload.onprogress = null, r.onload = r.onerror = r.ontimeout = r.onabort = null;
+  }, o = (t, a) => {
+    n || (n = !0, s(), !e.signal.aborted && (t ? e.onError(t) : e.onSuccess(a)));
+  }, c = (t, a) => Object.assign(i(t, a), {
+    status: r.status,
+    response: f(),
+    url: e.action,
+    method: e.method
+  });
+  function f() {
+    const t = r.responseText;
+    if (t)
+      try {
+        return JSON.parse(t);
+      } catch {
+        return t;
+      }
+  }
+  function u() {
+    n || (n = !0, s(), r.abort());
+  }
+  r.open(e.method, e.action, !0), r.withCredentials = e.withCredentials, r.timeout = e.timeout;
+  for (const [t, a] of Object.entries(e.headers))
+    r.setRequestHeader(t, a);
+  if (r.upload.onprogress = (t) => {
+    !n && !e.signal.aborted && t.lengthComputable && t.total > 0 && e.onProgress(t.loaded / t.total * 100);
+  }, r.onload = () => {
+    r.status >= 200 && r.status < 300 ? o(void 0, f()) : o(c("上传请求失败（" + r.status + "）", "http"));
+  }, r.onerror = () => o(c("网络连接失败", "network")), r.ontimeout = () => o(c("上传请求超时", "timeout")), r.onabort = () => {
+    n = !0, s();
+  }, e.signal.addEventListener("abort", u, { once: !0 }), e.signal.aborted)
+    return u(), u;
+  try {
+    r.send(l);
+  } catch (t) {
+    o(t);
+  }
+  return u;
+}
+export {
+  m as uploadRequest
+};

package/dist/composables/useAlert.js

@@ -0,0 +1,124 @@
+import { useAttrs as W, ref as h, computed as y, watch as w, onMounted as z, onActivated as F, onDeactivated as G, onBeforeUnmount as I, nextTick as D } from "vue";
+import { useHysRootAttrs as J } from "../config.js";
+import { feedbackNumber as K } from "./feedback.js";
+function Y(t, u) {
+  const o = W(), E = J(), P = h(), m = h(t.defaultVisible ?? !0), a = h(!0), s = h(!1), L = h(!1), i = y(
+    () => t.visible ?? t.modelValue ?? m.value
+  ), A = y(
+    () => t.tone ?? (t.banner ? "warning" : "info")
+  ), S = y(
+    () => !a.value || L.value || E.value["data-hys-motion"] === "off" || t.transition === "none" ? 0 : K(t.transitionDuration, 180, 0, 1500)
+  );
+  let l = 0, f, v, r, C = !1;
+  const g = /* @__PURE__ */ new WeakMap();
+  function c() {
+    l++, f = void 0, v == null || v.abort(), v = void 0, s.value = !1;
+  }
+  const k = () => L.value = !!(r != null && r.matches);
+  function R() {
+    var e;
+    C || !a.value || (r ?? (r = (e = window.matchMedia) == null ? void 0 : e.call(window, "(prefers-reduced-motion: reduce)")), k(), r == null || r.addEventListener("change", k), C = !0);
+  }
+  function V() {
+    c(), r == null || r.removeEventListener("change", k), C = !1;
+  }
+  function M(e) {
+    m.value = e, f = e, u("update:visible", e), u("update:modelValue", e);
+  }
+  async function q(e = "api", n) {
+    if (!a.value || !i.value || t.disabled || s.value)
+      return !1;
+    const d = ++l, b = new AbortController();
+    v = b, s.value = !0;
+    const B = { reason: e, event: n, signal: b.signal };
+    u("closeRequest", B);
+    try {
+      return d !== l || b.signal.aborted || t.beforeClose && await t.beforeClose(B) === !1 || d !== l || b.signal.aborted || !a.value || !i.value || t.disabled ? !1 : (M(!1), u("close"), await D(), d === l && a.value && !i.value);
+    } catch (x) {
+      return d === l && a.value && !b.signal.aborted && u(
+        "closeError",
+        x instanceof Error ? x : new Error(String(x))
+      ), !1;
+    } finally {
+      d === l && (f = void 0, s.value = !1, v = void 0);
+    }
+  }
+  async function j() {
+    if (!a.value || t.disabled) return !1;
+    c();
+    const e = l;
+    return i.value ? !0 : (M(!0), await D(), e === l && (f = void 0), e === l && a.value && i.value);
+  }
+  w(
+    () => [t.visible, t.modelValue],
+    () => {
+      f !== void 0 && i.value === f || c();
+    },
+    { flush: "sync" }
+  ), w(
+    i,
+    (e) => {
+      a.value && u("visibleChange", e);
+    },
+    { flush: "sync" }
+  ), w(
+    () => t.title,
+    () => {
+      c(), m.value = !0;
+    }
+  ), w(
+    () => [t.disabled, t.beforeClose],
+    () => c(),
+    { flush: "sync" }
+  );
+  function H(e) {
+    g.set(e, l);
+    const n = e;
+    n.style.setProperty(
+      "--hys-ui-alert-height",
+      n.getBoundingClientRect().height + "px"
+    ), n.setAttribute("aria-hidden", "true"), n.removeAttribute("role"), n.inert = !0;
+  }
+  function N(e) {
+    g.get(e) === l && a.value && !i.value && u("afterClose"), g.delete(e);
+  }
+  function T(e) {
+    const n = e;
+    n.style.removeProperty("--hys-ui-alert-height"), o["aria-hidden"] !== void 0 ? n.setAttribute("aria-hidden", String(o["aria-hidden"])) : n.removeAttribute("aria-hidden"), n.inert = o.inert === !0 || o.inert === "", n.setAttribute(
+      "role",
+      typeof o.role == "string" ? o.role : A.value === "danger" ? "alert" : "status"
+    ), g.delete(e);
+  }
+  z(R), F(() => {
+    a.value = !0, R();
+  }), G(() => {
+    a.value = !1, V();
+  }), I(() => {
+    a.value = !1, V();
+  });
+  const U = y(() => ({
+    tone: A.value,
+    visible: i.value,
+    closing: s.value,
+    disabled: !!t.disabled,
+    close: () => q()
+  }));
+  return {
+    skin: E,
+    element: P,
+    live: a,
+    visible: i,
+    tone: A,
+    duration: S,
+    closing: s,
+    scope: U,
+    close: q,
+    show: j,
+    beforeLeave: H,
+    afterLeave: N,
+    restore: T
+  };
+}
+export {
+  Y as useAlert
+};

package/dist/composables/useColorPicker.js

@@ -0,0 +1,402 @@
+import { useAttrs as Re, inject as N, ref as A, useId as se, shallowRef as Ve, computed as b, watch as O, onMounted as He, onActivated as Oe, onDeactivated as Se, onBeforeUnmount as Ke, nextTick as J } from "vue";
+import { fieldKey as Me, formKey as Fe, useHysControlState as ze } from "./formContext.js";
+import { useChoiceModel as Ge, useChoiceNativeReset as Ue } from "./choiceModel.js";
+import { useFloating as We } from "./useFloating.js";
+import { overlayOwnerKey as je } from "./overlayManager.js";
+import { formatColor as pe, colorCss as fe, parseColor as T, sameColor as Be, colorClamp as S } from "./color.js";
+function _e(t, s) {
+  const ce = Re(), i = N(Me, void 0), k = N(Fe, void 0), G = N(je, void 0), E = ze(t), U = A(), W = A(), Q = A(), D = A(), u = A(!0), h = A(""), d = A({ h: 0, s: 0, v: 0, a: 1 }), y = A(!1), q = A(!1), ve = se(), de = se();
+  let C = 0, he = t.defaultValue ?? "", P = 0, K, j = 0, p = 0;
+  const f = Ve(), R = Ge(
+    t,
+    () => he,
+    Object.is,
+    () => {
+      C++, m(!1), v();
+    }
+  ), c = b(() => R.current.value ?? ""), g = b(() => E.disabled.value || !!t.readonly), Z = b(() => t.format ?? (t.showAlpha ? "rgb" : "hex")), L = b(
+    () => y.value ? pe(d.value, Z.value, !!t.showAlpha) : ""
+  ), me = b(() => fe(d.value)), V = b(
+    () => !!T(h.value) || !h.value.trim() && (!c.value || !!t.clearable)
+  ), M = b(
+    () => !Be(
+      y.value ? d.value : void 0,
+      T(c.value)
+    )
+  ), ye = b(
+    () => {
+      var e, a;
+      return t.error || !V.value || (e = i == null ? void 0 : i.invalid) != null && e.value ? "error" : t.status ?? ((a = i == null ? void 0 : i.status) == null ? void 0 : a.value);
+    }
+  ), r = We(W, D, {
+    get placement() {
+      return t.placement ?? "bottom-start";
+    },
+    get strategy() {
+      return t.appendTo === !1 || _.value !== document.body ? "absolute" : "fixed";
+    },
+    width: () => t.popupWidth ?? 288,
+    closeOnTab: !0,
+    requestOpen(e, a) {
+      return !e && a && f.value ? (m(!0), !1) : (s("update:open", e), t.open === void 0);
+    }
+  }), we = b(
+    () => u.value && (t.inline || r.open.value)
+  ), _ = b(() => {
+    const e = t.appendTo;
+    if (e === !1 || !e) return document.body;
+    if (e instanceof HTMLElement) return e;
+    try {
+      return document.querySelector(e) ?? document.body;
+    } catch {
+      return document.body;
+    }
+  }), be = [
+    "#3867f5",
+    "#8955ea",
+    "#ec4899",
+    "#ef4444",
+    "#f59e0b",
+    "#22a06b",
+    "#06b6d4",
+    "#172a4d",
+    "#ffffff",
+    "#000000"
+  ], ge = b(
+    () => (t.presets ?? be).flatMap((e, a) => {
+      const l = T(e);
+      return l ? [
+        {
+          value: e,
+          color: fe(l),
+          parsed: l,
+          key: a + ":" + e
+        }
+      ] : [];
+    })
+  );
+  function v() {
+    const e = T(c.value);
+    y.value = !!e, e && (d.value = { ...e }), h.value = c.value;
+  }
+  v();
+  function B(e) {
+    var a;
+    e === "change" && (k != null && k.model.value) && !p || t.validateEvent !== !1 && !(k != null && k.resetting.value) && ((a = i == null ? void 0 : i.validate) == null || a.call(i, e));
+  }
+  async function x(e = !1) {
+    if (!u.value || g.value) return !1;
+    const a = L.value, l = ++j, n = C;
+    if (!a && !t.clearable && c.value) return !1;
+    if (a === c.value)
+      return e && B("change"), !0;
+    f.value && (f.value.lastRequest = a);
+    const o = await R.commit(
+      a,
+      (w) => s("update:modelValue", w),
+      (w) => s("change", w)
+    );
+    return !u.value || l !== j || n !== C ? !1 : !o && !f.value ? (v(), !1) : (o && e && B("change"), o);
+  }
+  async function X(e) {
+    if (!u.value || g.value) return !1;
+    const a = T(e);
+    return a ? (d.value = { ...a }, y.value = !0, h.value = L.value, s("activeChange", L.value), t.immediate === !1 ? !0 : x(!0)) : !e.trim() && t.clearable ? F() : (s("invalid", e), !1);
+  }
+  async function Ce() {
+    if (!u.value || g.value) return !1;
+    const e = h.value.trim();
+    return e ? X(e) : t.clearable ? F() : (v(), !1);
+  }
+  function $(e, a = !1) {
+    !u.value || g.value || (d.value = e, y.value = !0, h.value = L.value, s("activeChange", L.value), t.immediate !== !1 && x(a));
+  }
+  async function ee() {
+    if (!u.value || g.value || !V.value)
+      return V.value || s("invalid", h.value), !1;
+    const e = T(h.value);
+    e ? (d.value = { ...e }, y.value = !0) : y.value = !1;
+    const a = await x(!0);
+    return a && (s("confirm", c.value), await z(!1)), a;
+  }
+  async function F() {
+    if (!u.value || g.value || !t.clearable) return !1;
+    C++, m(!1), y.value = !1, h.value = "";
+    const e = await x(!0);
+    return e && s("clear"), e;
+  }
+  function ae() {
+    u.value && (C++, m(!1), v(), s("cancel"), z(!1));
+  }
+  async function Y() {
+    var e, a;
+    return !u.value || E.disabled.value || (G == null ? void 0 : G.value) === !1 ? !1 : t.inline ? !0 : (await r.show(), await J(), r.open.value ? ((a = (e = D.value) == null ? void 0 : e.querySelector("[role=slider]")) == null || a.focus({ preventScroll: !0 }), !0) : !1);
+  }
+  async function z(e = !0) {
+    return t.inline ? !1 : (r.close(e), await J(), !r.open.value);
+  }
+  function te(e) {
+    var a;
+    if (u.value && !E.disabled.value) {
+      const l = t.inline ? (a = D.value) == null ? void 0 : a.querySelector('[role="slider"]') : Q.value ?? W.value;
+      l == null || l.focus(e);
+    }
+  }
+  function ke() {
+    const e = document.activeElement;
+    le(e) && (e == null || e.blur());
+  }
+  function le(e) {
+    var a, l;
+    return !!e && (!!((a = U.value) != null && a.contains(e)) || !!((l = D.value) != null && l.contains(e)));
+  }
+  function Ae(e) {
+    q.value || (q.value = !0, s("focus", e));
+  }
+  function Ee(e) {
+    J(() => {
+      !u.value || le(document.activeElement) || q.value && (q.value = !1, s("blur", e), B("blur"));
+    });
+  }
+  function ue(e, a) {
+    const l = f.value;
+    if (!l || g.value || !u.value) return;
+    const n = S((e - l.rect.left) / l.rect.width), o = { ...d.value };
+    l.kind === "palette" ? (o.s = n, o.v = 1 - S((a - l.rect.top) / l.rect.height)) : l.kind === "hue" ? o.h = n * 359 : o.a = n, !(["h", "s", "v", "a"].every(
+      (w) => Math.abs(
+        o[w] - d.value[w]
+      ) < 1e-7
+    ) && y.value) && $(o);
+  }
+  function ne() {
+    P && cancelAnimationFrame(P), P = 0;
+    const e = K;
+    K = void 0, e && ue(e.x, e.y);
+  }
+  function I() {
+    m(!1), v();
+  }
+  function Pe() {
+    document.addEventListener("keydown", re, !0), window.addEventListener("resize", I), window.addEventListener("scroll", I, !0), window.addEventListener("blur", I);
+  }
+  function ie() {
+    document.removeEventListener("keydown", re, !0), window.removeEventListener("resize", I), window.removeEventListener("scroll", I, !0), window.removeEventListener("blur", I);
+  }
+  function re(e) {
+    e.key === "Escape" && f.value && (e.preventDefault(), e.stopPropagation(), m(!0));
+  }
+  function Le(e, a) {
+    var H;
+    if (!u.value || g.value || e.button !== 0 || e.isPrimary === !1)
+      return;
+    const l = e.currentTarget, n = l.getBoundingClientRect();
+    if (!n.width || !n.height) return;
+    e.preventDefault(), m(!1), l.focus({ preventScroll: !0 });
+    const o = (H = i == null ? void 0 : i.deferChangeValidation) == null ? void 0 : H.call(i);
+    let w = !1;
+    o && p++, f.value = {
+      node: l,
+      id: e.pointerId,
+      kind: a,
+      rect: n,
+      value: c.value,
+      color: { ...d.value },
+      hasColor: y.value,
+      lastRequest: c.value,
+      releaseValidation() {
+        !w && o && (p--, o()), w = !0;
+      }
+    };
+    try {
+      l.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    Pe(), ue(e.clientX, e.clientY);
+  }
+  function qe(e) {
+    !f.value || f.value.id !== e.pointerId || (K = { x: e.clientX, y: e.clientY }, P || (P = requestAnimationFrame(ne)));
+  }
+  async function xe(e) {
+    const a = f.value;
+    if (!(!a || a.id !== e.pointerId)) {
+      ne(), f.value = void 0, ie();
+      try {
+        a.node.hasPointerCapture(a.id) && a.node.releasePointerCapture(a.id);
+      } catch {
+      }
+      try {
+        t.immediate !== !1 && await x(!0);
+      } finally {
+        a.releaseValidation();
+      }
+    }
+  }
+  async function m(e) {
+    const a = f.value;
+    if (P && cancelAnimationFrame(P), P = 0, K = void 0, f.value = void 0, ie(), !!a) {
+      try {
+        a.node.hasPointerCapture(a.id) && a.node.releasePointerCapture(a.id);
+      } catch {
+      }
+      try {
+        e && u.value && !g.value && (d.value = { ...a.color }, y.value = a.hasColor, h.value = a.value, s("activeChange", L.value), t.immediate !== !1 && (c.value === a.lastRequest || c.value === a.value) && !await R.commit(
+          a.value,
+          (n) => s("update:modelValue", n),
+          (n) => s("change", n)
+        ) && c.value !== a.value && v());
+      } finally {
+        a.releaseValidation();
+      }
+    }
+  }
+  function Ie(e) {
+    var a;
+    ((a = f.value) == null ? void 0 : a.id) === e.pointerId && m(!0);
+  }
+  function Te(e, a) {
+    if (g.value || !u.value || e.isComposing || ![
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End",
+      "PageUp",
+      "PageDown"
+    ].includes(e.key))
+      return;
+    e.preventDefault();
+    const l = { ...d.value }, n = e.shiftKey || e.key.startsWith("Page") ? 10 : 1, o = ["ArrowLeft", "ArrowDown", "PageDown"].includes(e.key);
+    if (a === "palette")
+      e.key === "Home" ? l.s = 0 : e.key === "End" ? l.s = 1 : ["ArrowLeft", "ArrowRight"].includes(e.key) ? l.s = S(
+        l.s + (e.key === "ArrowLeft" ? -n : n) / 100
+      ) : l.v = S(l.v + (o ? -n : n) / 100);
+    else {
+      const w = a === "hue" ? "h" : "a", H = a === "hue" ? 359 : 1;
+      l[w] = e.key === "Home" ? 0 : e.key === "End" ? H : S(
+        l[w] + (o ? -n : n) * (a === "hue" ? 1 : 0.01),
+        0,
+        H
+      );
+    }
+    $(l, !0);
+  }
+  O(
+    () => t.open,
+    async (e) => {
+      !u.value || t.inline || (e && !E.disabled.value ? await r.show(!0) : e === !1 && r.close(!1, !0));
+    },
+    { flush: "post" }
+  ), O(r.open, (e) => {
+    e ? (t.immediate !== !1 || !M.value && h.value === c.value) && v() : (C++, m(!1), v()), s("visibleChange", e);
+  }), O(
+    c,
+    () => {
+      !f.value && !M.value && v();
+    },
+    { flush: "post" }
+  ), O(
+    () => [
+      E.disabled.value,
+      t.readonly,
+      t.inline,
+      t.appendTo,
+      t.showAlpha,
+      t.format,
+      t.immediate,
+      t.placement,
+      t.popupWidth
+    ],
+    () => {
+      C++, m(!1), v(), E.disabled.value && r.close(!1, !0), t.inline ? r.close(!1, !0) : r.open.value && r.schedule();
+    },
+    { flush: "sync" }
+  ), Ue(
+    U,
+    () => {
+      C++, m(!1), R.reset(), v(), r.close(!1, !0);
+    },
+    void 0,
+    () => t.form
+  ), O(
+    () => k == null ? void 0 : k.resetting.value,
+    (e) => {
+      e && (C++, m(!1), R.reset(), v(), r.close(!1, !0));
+    },
+    { flush: "sync" }
+  );
+  function oe() {
+    u.value = !1, C++, j++, m(!1), r.close(!1, !0), q.value = !1;
+  }
+  He(() => {
+    t.autofocus && te(), t.inline || (t.open ? r.show(!0) : t.defaultOpen && t.open === void 0 && Y());
+  }), Oe(() => {
+    u.value = !0, v();
+  }), Se(oe), Ke(oe);
+  const De = b(() => ({
+    value: c.value,
+    draft: h.value,
+    color: { ...d.value },
+    disabled: E.disabled.value,
+    readonly: !!t.readonly,
+    valid: V.value,
+    dirty: M.value,
+    setColor: X,
+    confirm: ee,
+    cancel: ae,
+    clear: F,
+    show: Y,
+    hide: z
+  }));
+  return {
+    attrs: ce,
+    field: i,
+    control: E,
+    element: U,
+    trigger: W,
+    input: Q,
+    panel: D,
+    live: u,
+    draft: h,
+    working: d,
+    hasColor: y,
+    focused: q,
+    errorId: ve,
+    panelId: de,
+    value: c,
+    locked: g,
+    format: Z,
+    serialized: L,
+    css: me,
+    valid: V,
+    dirty: M,
+    status: ye,
+    floating: r,
+    open: we,
+    teleportTo: _,
+    presets: ge,
+    context: De,
+    gesture: f,
+    sync: v,
+    publish: x,
+    setColor: X,
+    commitText: Ce,
+    confirm: ee,
+    clear: F,
+    cancel: ae,
+    show: Y,
+    hide: z,
+    focus: te,
+    blur: ke,
+    focusIn: Ae,
+    focusOut: Ee,
+    start: Le,
+    move: qe,
+    end: xe,
+    pointerCancel: Ie,
+    keyboard: Te
+  };
+}
+export {
+  _e as useColorPicker
+};