hys-ui 0.6.0 → 0.8.0

package/dist/components/HysSpin/SpinGlyph/SpinGlyph.vue.js

@@ -0,0 +1,334 @@
+import { defineComponent as I, computed as k, openBlock as e, createElementBlock as i, createElementVNode as n, unref as b, Fragment as a, renderList as l, createCommentVNode as g, normalizeStyle as d, normalizeClass as L } from "vue";
+import { useSvgInstanceId as B } from "../../../composables/useSvgInstanceId.js";
+const S = ["data-animation", "data-status"], V = { key: 0 }, Z = ["id"], j = ["offset", "stop-color", "stop-opacity"], q = ["stroke-width"], z = {
+  key: 0,
+  d: "m14 24 7 7 13-15"
+}, E = {
+  key: 1,
+  d: "M24 13v12l7 4"
+}, G = {
+  key: 2,
+  d: "m17 17 14 14m0-14L17 31"
+}, N = {
+  key: 3,
+  d: "M24 14v12m0 7h.01"
+}, P = { key: 2 }, F = ["stroke-width"], A = ["stroke-width", "stroke-dasharray"], D = {
+  key: 3,
+  "stroke-linecap": "round"
+}, H = ["stroke-width"], J = ["r", "stroke-width", "stroke", "stroke-dasharray"], K = {
+  key: 4,
+  class: "hys-spin-rotate"
+}, O = ["cx", "cy", "r", "fill", "opacity"], Q = { key: 5 }, R = ["cx", "cy", "r", "fill"], T = ["x", "y", "width", "height", "fill"], U = { key: 6 }, W = ["x", "fill"], X = ["cx", "r", "fill"], Y = { key: 7 }, $ = ["stroke-width"], p = ["cx", "cy", "r", "fill"], _ = {
+  key: 8,
+  class: "hys-spin-rotate"
+}, tt = ["fill", "stroke-width"], st = { key: 10 }, et = ["stroke-width"], it = ["r"], nt = {
+  key: 12,
+  class: "hys-spin-beat",
+  fill: "currentColor",
+  d: "M24 40 8 24a9 9 0 0 1 16-9 9 9 0 0 1 16 9Z"
+}, rt = {
+  key: 13,
+  class: "hys-spin-rhythm",
+  cx: "24",
+  cy: "24",
+  r: "14",
+  fill: "currentColor"
+}, at = { key: 14 }, ot = ["r", "stroke-width"], lt = ["d", "stroke-width"], dt = /* @__PURE__ */ I({
+  __name: "SpinGlyph",
+  props: {
+    animation: {},
+    status: {},
+    progress: {},
+    stroke: {},
+    dot: {},
+    spacing: {},
+    colors: {},
+    gradient: {},
+    path: {}
+  },
+  setup(t) {
+    const o = t, m = B("spin-gradient"), y = k(
+      () => {
+        var u;
+        return (u = o.gradient) != null && u.length ? o.gradient : ["currentColor", "currentColor"];
+      }
+    ), c = (u) => {
+      var r;
+      return (r = o.colors) != null && r.length ? o.colors[u % o.colors.length] : "currentColor";
+    }, f = k(() => {
+      switch (o.animation) {
+        case "dual-ring":
+          return [
+            { r: 19, dash: "62 119" },
+            { r: 12, dash: "41 75" }
+          ];
+        case "triple-ring":
+          return [
+            { r: 19, dash: "52 119" },
+            { r: 12, dash: "33 75" },
+            { r: 6, dash: "17 38" }
+          ];
+        case "segment":
+          return [{ r: 19, dash: "16 13.8" }];
+        case "arc":
+          return [{ r: 19, dash: "78 119" }];
+        default:
+          return [{ r: 19, dash: "30 119" }];
+      }
+    }), v = [
+      "circle",
+      "dual-ring",
+      "triple-ring",
+      "segment",
+      "arc",
+      "gradient",
+      "progress-ring",
+      "custom"
+    ], M = ["bouncing-dots", "flashing-dots", "scaling-dots", "wave", "bars"], w = {
+      infinity: "M24 24c-5-7-8-11-13-11a9 9 0 0 0 0 18c5 0 8-4 13-11 5-7 8-11 13-11a9 9 0 0 1 0 18c-5 0-8-4-13-11Z",
+      spiral: "M24 24a2 2 0 1 1 2 2 5 5 0 1 1-5-5 8 8 0 1 1 8 8 11 11 0 1 1-11-11 15 15 0 1 1 15 15 19 19 0 1 1-19-19",
+      draw: "M6 27h8l4-12 7 21 6-15 4 6h7"
+    }, x = k(
+      () => ["success", "error", "cancelled", "timeout"].includes(o.status)
+    );
+    return (u, r) => (e(), i("svg", {
+      class: "hys-spin-glyph",
+      "data-animation": t.animation,
+      "data-status": t.status,
+      viewBox: "0 0 48 48",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    }, [
+      t.animation === "gradient" ? (e(), i("defs", V, [
+        n("linearGradient", {
+          id: b(m),
+          x1: "0",
+          y1: "1",
+          x2: "1",
+          y2: "0"
+        }, [
+          (e(!0), i(a, null, l(y.value, (s, h) => {
+            var C;
+            return e(), i("stop", {
+              key: h,
+              offset: y.value.length === 1 ? 0 : h / (y.value.length - 1),
+              "stop-color": s,
+              "stop-opacity": !((C = o.gradient) != null && C.length) && h === 0 ? 0.14 : 1
+            }, null, 8, j);
+          }), 128))
+        ], 8, Z)
+      ])) : g("", !0),
+      x.value ? (e(), i("g", {
+        key: 1,
+        class: "hys-spin-result",
+        stroke: "currentColor",
+        "stroke-width": t.stroke,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, [
+        r[0] || (r[0] = n("circle", {
+          cx: "24",
+          cy: "24",
+          r: "19",
+          opacity: ".25"
+        }, null, -1)),
+        t.status === "success" ? (e(), i("path", z)) : t.status === "timeout" ? (e(), i("path", E)) : t.status === "cancelled" ? (e(), i("path", G)) : (e(), i("path", N))
+      ], 8, q)) : t.progress !== void 0 ? (e(), i("g", P, [
+        n("circle", {
+          cx: "24",
+          cy: "24",
+          r: "19",
+          "stroke-width": t.stroke,
+          class: "hys-spin-track"
+        }, null, 8, F),
+        n("circle", {
+          cx: "24",
+          cy: "24",
+          r: "19",
+          "stroke-width": t.stroke,
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          pathLength: "100",
+          "stroke-dasharray": t.progress + " 100",
+          transform: "rotate(-90 24 24)",
+          class: "hys-spin-meter"
+        }, null, 8, A)
+      ])) : v.includes(t.animation) ? (e(), i("g", D, [
+        f.value.length === 1 ? (e(), i("circle", {
+          key: 0,
+          cx: "24",
+          cy: "24",
+          r: "19",
+          "stroke-width": t.stroke,
+          class: "hys-spin-track"
+        }, null, 8, H)) : g("", !0),
+        (e(!0), i(a, null, l(f.value, (s, h) => (e(), i("circle", {
+          key: s.r,
+          cx: "24",
+          cy: "24",
+          r: s.r,
+          "stroke-width": t.stroke,
+          stroke: t.animation === "gradient" ? "url(#" + b(m) + ")" : c(h),
+          "stroke-dasharray": s.dash,
+          class: L(["hys-spin-rotate", { "hys-spin-reverse": h % 2 }]),
+          style: d({ "--hys-spin-i": h })
+        }, null, 14, J))), 128))
+      ])) : t.animation === "dot-spin" ? (e(), i("g", K, [
+        (e(), i(a, null, l(8, (s) => n("circle", {
+          key: s,
+          cx: 24 + Math.cos(s * Math.PI / 4) * 17,
+          cy: 24 + Math.sin(s * Math.PI / 4) * 17,
+          r: t.dot * 0.78,
+          fill: c(s - 1),
+          opacity: 0.2 + s * 0.1
+        }, null, 8, O)), 64))
+      ])) : t.animation === "dot-grid" || t.animation === "grid" ? (e(), i("g", Q, [
+        (e(), i(a, null, l(9, (s) => (e(), i(a, { key: s }, [
+          t.animation === "dot-grid" ? (e(), i("circle", {
+            key: 0,
+            class: "hys-spin-grid-cell",
+            cx: 24 + ((s - 1) % 3 - 1) * t.spacing,
+            cy: 24 + (Math.floor((s - 1) / 3) - 1) * t.spacing,
+            r: t.dot,
+            fill: c(s - 1),
+            style: d({ "--hys-spin-i": s - 1 })
+          }, null, 12, R)) : (e(), i("rect", {
+            key: 1,
+            class: "hys-spin-grid-cell",
+            x: 24 + ((s - 1) % 3 - 1) * t.spacing - t.dot,
+            y: 24 + (Math.floor((s - 1) / 3) - 1) * t.spacing - t.dot,
+            width: t.dot * 2,
+            height: t.dot * 2,
+            rx: "1.25",
+            fill: c(s - 1),
+            style: d({ "--hys-spin-i": s - 1 })
+          }, null, 12, T))
+        ], 64))), 64))
+      ])) : M.includes(t.animation) ? (e(), i("g", U, [
+        (e(!0), i(a, null, l(t.animation === "wave" || t.animation === "bars" ? 5 : 3, (s) => (e(), i(a, { key: s }, [
+          t.animation === "wave" || t.animation === "bars" ? (e(), i("rect", {
+            key: 0,
+            class: "hys-spin-row-item",
+            x: 24 + (s - 3) * Math.min(t.spacing, 9) - 2,
+            y: "9",
+            width: "4",
+            height: "30",
+            rx: "2",
+            fill: c(s - 1),
+            style: d({ "--hys-spin-i": s - 1 })
+          }, null, 12, W)) : (e(), i("circle", {
+            key: 1,
+            class: "hys-spin-row-item",
+            cx: 24 + (s - 2) * t.spacing,
+            cy: "24",
+            r: t.dot,
+            fill: c(s - 1),
+            style: d({ "--hys-spin-i": s - 1 })
+          }, null, 12, X))
+        ], 64))), 128))
+      ])) : t.animation === "orbit" || t.animation === "chase" ? (e(), i("g", Y, [
+        t.animation === "orbit" ? (e(), i("circle", {
+          key: 0,
+          cx: "24",
+          cy: "24",
+          r: "16",
+          "stroke-width": t.stroke * 0.65,
+          class: "hys-spin-track"
+        }, null, 8, $)) : g("", !0),
+        (e(!0), i(a, null, l(t.animation === "orbit" ? 2 : 3, (s) => (e(), i("g", {
+          key: s,
+          class: "hys-spin-rotate hys-spin-orbit",
+          style: d({ "--hys-spin-i": s - 1 })
+        }, [
+          n("circle", {
+            cx: t.animation === "orbit" && s === 2 ? 32 : 24,
+            cy: 8 + (t.animation === "orbit" ? (s - 1) * 8 : 0),
+            r: t.dot * (1 - (s - 1) * 0.1),
+            fill: c(s - 1)
+          }, null, 8, p)
+        ], 4))), 128))
+      ])) : t.animation === "bar-spin" ? (e(), i("g", _, [...r[1] || (r[1] = [
+        n("rect", {
+          x: "20",
+          y: "6",
+          width: "8",
+          height: "36",
+          rx: "4",
+          fill: "currentColor"
+        }, null, -1),
+        n("rect", {
+          x: "6",
+          y: "20",
+          width: "36",
+          height: "8",
+          rx: "4",
+          fill: "currentColor",
+          opacity: ".36"
+        }, null, -1)
+      ])])) : t.animation === "square" || t.animation === "cube-flip" ? (e(), i("rect", {
+        key: 9,
+        class: "hys-spin-shape",
+        x: "10",
+        y: "10",
+        width: "28",
+        height: "28",
+        rx: "4",
+        fill: t.animation === "square" ? "none" : "currentColor",
+        stroke: "currentColor",
+        "stroke-width": t.stroke
+      }, null, 8, tt)) : t.animation === "ripple" ? (e(), i("g", st, [
+        (e(), i(a, null, l(2, (s) => n("circle", {
+          key: s,
+          class: "hys-spin-ripple",
+          cx: "24",
+          cy: "24",
+          r: "18",
+          stroke: "currentColor",
+          "stroke-width": t.stroke,
+          style: d({ "--hys-spin-i": s - 1 })
+        }, null, 12, et)), 64))
+      ])) : t.animation === "ball" ? (e(), i("circle", {
+        key: 11,
+        class: "hys-spin-ball",
+        cx: "24",
+        cy: "26",
+        r: t.dot * 1.4,
+        fill: "currentColor"
+      }, null, 8, it)) : t.animation === "heartbeat" ? (e(), i("path", nt)) : t.animation === "pulse" || t.animation === "breathing" ? (e(), i("circle", rt)) : t.animation === "radar" ? (e(), i("g", at, [
+        (e(), i(a, null, l([7, 13, 19], (s) => n("circle", {
+          key: s,
+          cx: "24",
+          cy: "24",
+          r: s,
+          class: "hys-spin-track",
+          "stroke-width": t.stroke / 2
+        }, null, 8, ot)), 64)),
+        r[2] || (r[2] = n("path", {
+          class: "hys-spin-rotate",
+          fill: "currentColor",
+          d: "M24 24V5a19 19 0 0 1 17 11Z",
+          opacity: ".55"
+        }, null, -1)),
+        r[3] || (r[3] = n("circle", {
+          cx: "24",
+          cy: "24",
+          r: "2",
+          fill: "currentColor"
+        }, null, -1))
+      ])) : (e(), i("path", {
+        key: 15,
+        class: "hys-spin-path",
+        d: t.path || w[t.animation] || w.draw,
+        pathLength: "100",
+        stroke: "currentColor",
+        "stroke-width": t.stroke,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      }, null, 8, lt))
+    ], 8, S));
+  }
+});
+export {
+  dt as default
+};

package/dist/components/HysSpin/SpinGlyph/SpinGlyph2.vue.js

@@ -0,0 +1,5 @@
+import o from "./SpinGlyph.vue.js";
+/* empty css              */
+export {
+  o as default
+};

package/dist/components/HysSpin/SpinPortal/SpinPortal.vue.js

@@ -0,0 +1,7 @@
+import o from "./SpinPortal2.vue.js";
+/* empty css                */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7bb9bdb2"]]);
+export {
+  m as default
+};

package/dist/components/HysSpin/SpinPortal/SpinPortal2.vue.js

@@ -0,0 +1,66 @@
+import { defineComponent as d, shallowRef as m, watch as c, onBeforeUnmount as u, openBlock as l, createBlock as v, Teleport as f, createElementVNode as s, normalizeClass as y, renderSlot as g } from "vue";
+import { positionSpinTarget as h, blockSpinTarget as b, lockSpinTargetScroll as k } from "./spinTarget.js";
+const B = /* @__PURE__ */ d({
+  __name: "SpinPortal",
+  props: {
+    target: {},
+    cover: { type: Boolean },
+    block: { type: Boolean },
+    lock: { type: Boolean }
+  },
+  setup(p) {
+    const i = p, e = m();
+    let n, r, a;
+    return c(
+      () => i.target,
+      (t) => {
+        if (!(typeof document > "u")) {
+          if (typeof t != "string") {
+            e.value = t;
+            return;
+          }
+          try {
+            const o = document.querySelector(t);
+            e.value = o instanceof HTMLElement ? o : void 0;
+          } catch {
+            e.value = void 0;
+          }
+        }
+      },
+      { immediate: !0 }
+    ), c(
+      [e, () => i.cover],
+      ([t, o]) => {
+        n == null || n(), n = t && o ? h(t) : void 0;
+      },
+      { immediate: !0 }
+    ), c(
+      [e, () => i.cover && i.block],
+      ([t, o]) => {
+        r == null || r(), r = t && o ? b(t) : void 0;
+      },
+      { immediate: !0, flush: "post" }
+    ), c(
+      [e, () => i.cover && i.lock],
+      ([t, o]) => {
+        a == null || a(), a = t && o ? k(t) : void 0;
+      },
+      { immediate: !0 }
+    ), u(() => {
+      r == null || r(), a == null || a(), n == null || n();
+    }), (t, o) => (l(), v(f, {
+      to: e.value ?? "body",
+      disabled: !e.value
+    }, [
+      s("div", {
+        "data-hys-spin-portal": "",
+        class: y({ "hys-spin-portal-cover": e.value && p.cover })
+      }, [
+        g(t.$slots, "default")
+      ], 2)
+    ], 8, ["to", "disabled"]));
+  }
+});
+export {
+  B as default
+};

package/dist/components/HysSpin/SpinPortal/spinTarget.js

@@ -0,0 +1,57 @@
+const l = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap();
+function s(o, t, r) {
+  let e = o.get(t);
+  return e || (e = { count: 0, restore: r() }, o.set(t, e)), e.count++, () => {
+    --e.count || (e.restore(), o.delete(t));
+  };
+}
+function p(o) {
+  const t = o instanceof HTMLElement ? o : o.host;
+  return t instanceof HTMLElement ? s(l, t, () => {
+    const r = getComputedStyle(t).position;
+    if (r && r !== "static") return () => {
+    };
+    const e = t.style.getPropertyValue("position"), n = t.style.getPropertyPriority("position");
+    return t.style.setProperty("position", "relative"), () => {
+      t.style.position === "relative" && t.style.setProperty("position", e, n);
+    };
+  }) : () => {
+  };
+}
+function f(o) {
+  const t = o instanceof HTMLElement ? o : o.host;
+  return t instanceof HTMLElement ? s(u, t, () => {
+    const r = t.style.getPropertyValue("overflow"), e = t.style.getPropertyPriority("overflow");
+    return t.style.setProperty("overflow", "hidden"), () => {
+      t.style.overflow === "hidden" && t.style.setProperty("overflow", r, e);
+    };
+  }) : () => {
+  };
+}
+function a(o) {
+  const t = /* @__PURE__ */ new Map(), r = () => {
+    for (const [n, i] of t)
+      n.parentNode !== o && (i(), t.delete(n));
+    for (const n of o.children)
+      n.hasAttribute("data-hys-spin-portal") || t.has(n) || t.set(
+        n,
+        s(c, n, () => {
+          const i = n.getAttribute("inert");
+          return n.setAttribute("inert", ""), () => {
+            i === null ? n.removeAttribute("inert") : n.setAttribute("inert", i);
+          };
+        })
+      );
+  };
+  r();
+  const e = typeof MutationObserver > "u" ? void 0 : new MutationObserver(r);
+  return e == null || e.observe(o, { childList: !0 }), () => {
+    e == null || e.disconnect();
+    for (const n of t.values()) n();
+  };
+}
+export {
+  a as blockSpinTarget,
+  f as lockSpinTargetScroll,
+  p as positionSpinTarget
+};

package/dist/components/HysSpin/spinCatalog.js

@@ -0,0 +1,35 @@
+const a = [
+  { name: "circle", label: "经典圆环", group: "rings" },
+  { name: "dual-ring", label: "双层圆环", group: "rings" },
+  { name: "triple-ring", label: "三层圆环", group: "rings" },
+  { name: "segment", label: "分段圆环", group: "rings" },
+  { name: "arc", label: "旋转圆弧", group: "rings" },
+  { name: "gradient", label: "渐变圆环", group: "rings" },
+  { name: "dot-spin", label: "点状旋转", group: "dots" },
+  { name: "bouncing-dots", label: "三点跳动", group: "dots" },
+  { name: "flashing-dots", label: "三点闪烁", group: "dots" },
+  { name: "dot-grid", label: "点阵", group: "dots" },
+  { name: "orbit", label: "圆点轨道", group: "dots" },
+  { name: "wave", label: "波浪", group: "bars" },
+  { name: "bars", label: "音频柱", group: "bars" },
+  { name: "bar-spin", label: "旋转条", group: "bars" },
+  { name: "square", label: "旋转方块", group: "shapes" },
+  { name: "cube-flip", label: "方块翻转", group: "shapes" },
+  { name: "grid", label: "方块网格", group: "shapes" },
+  { name: "pulse", label: "脉冲", group: "rhythm" },
+  { name: "heartbeat", label: "心跳", group: "rhythm" },
+  { name: "ripple", label: "涟漪", group: "rhythm" },
+  { name: "breathing", label: "呼吸", group: "rhythm" },
+  { name: "ball", label: "弹跳小球", group: "dots" },
+  { name: "chase", label: "小球追逐", group: "dots" },
+  { name: "scaling-dots", label: "圆点缩放", group: "dots" },
+  { name: "infinity", label: "无限符号", group: "paths" },
+  { name: "spiral", label: "螺旋", group: "paths" },
+  { name: "radar", label: "雷达扫描", group: "paths" },
+  { name: "progress-ring", label: "进度环", group: "rings" },
+  { name: "draw", label: "路径描绘", group: "paths" },
+  { name: "custom", label: "自定义", group: "paths" }
+];
+export {
+  a as hysSpinAnimations
+};

package/dist/components/HysSpin/spinConfig.js

@@ -0,0 +1,32 @@
+import { getCurrentInstance as a, inject as p, computed as t, toValue as s, provide as i, shallowRef as f } from "vue";
+const c = Symbol("HysSpinConfig"), l = /* @__PURE__ */ new WeakMap(), n = f({});
+function y(e) {
+  n.value = e;
+}
+function d() {
+  const e = a();
+  return (e && l.get(e)) ?? p(c, void 0) ?? {
+    defaults: t(() => s(n.value.defaults) ?? {}),
+    presets: t(() => s(n.value.presets) ?? {})
+  };
+}
+function S(e) {
+  const o = d(), u = {
+    defaults: t(() => ({
+      ...o.defaults.value,
+      ...s(e.defaults)
+    })),
+    presets: t(() => ({
+      ...o.presets.value,
+      ...s(e.presets)
+    }))
+  };
+  i(c, u);
+  const r = a();
+  r && l.set(r, u);
+}
+export {
+  y as configureHysSpin,
+  S as provideHysSpin,
+  d as useSpinConfig
+};