hys-ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,427 @@
+import { defineComponent as _e, useSlots as Te, useAttrs as Be, computed as l, ref as y, watch as V, onMounted as de, onDeactivated as $e, onActivated as we, openBlock as n, createElementBlock as o, mergeProps as ce, unref as g, normalizeClass as pe, renderSlot as h, createCommentVNode as v, createBlock as ze, Teleport as Ve, createVNode as me, Transition as Ce, withCtx as Le, normalizeProps as T, guardReactiveProps as B, createElementVNode as K, normalizeStyle as x, toDisplayString as c, createTextVNode as Pe, Fragment as He, renderList as Ie } from "vue";
+import { useHysRootAttrs as Me } from "../../config.js";
+import { usePageVisibility as De } from "../../composables/usePageVisibility.js";
+import xe from "./SpinGlyph/SpinGlyph.vue.js";
+/* empty css                        */
+import { useSpinConfig as Ee } from "./spinConfig.js";
+import { spinStyle as Ne, bounded as E } from "./spinStyle.js";
+import { useHysSpinTask as Re, clampSpinProgress as Ae } from "./useHysSpinTask.js";
+import { useSpinVisibility as Oe } from "./useSpinVisibility.js";
+import { useSpinFullscreen as We } from "./useSpinFullscreen.js";
+const je = ["data-mode"], qe = ["inert", "aria-busy"], Fe = ["data-mode", "data-placement", "data-block", "data-mask", "data-motion-off", "data-status", "role", "aria-modal", "aria-label", "tabindex"], Ge = ["data-layout", "data-align"], Ke = ["aria-busy"], Je = {
+  key: 0,
+  class: "hys-spin-title"
+}, Qe = {
+  key: 1,
+  class: "hys-spin-message"
+}, Ue = {
+  key: 2,
+  class: "hys-spin-description"
+}, Xe = {
+  key: 3,
+  class: "hys-spin-description"
+}, Ye = {
+  key: 4,
+  class: "hys-spin-description"
+}, Ze = {
+  key: 0,
+  class: "hys-spin-line",
+  "aria-hidden": "true"
+}, ea = {
+  key: 1,
+  class: "hys-spin-segments",
+  "aria-hidden": "true"
+}, aa = {
+  key: 2,
+  class: "hys-spin-percent"
+}, ta = {
+  key: 1,
+  class: "hys-spin-actions"
+}, la = ["aria-label", "aria-valuenow"], sa = ["role"], ya = /* @__PURE__ */ _e({
+  inheritAttrs: !1,
+  __name: "HysSpin",
+  props: {
+    spinning: { type: Boolean, default: void 0 },
+    modelValue: { type: Boolean, default: void 0 },
+    defaultSpinning: { type: Boolean, default: void 0 },
+    mode: {},
+    size: {},
+    width: {},
+    height: {},
+    regionHeight: {},
+    delay: {},
+    minDuration: {},
+    timeout: {},
+    autoEnd: {},
+    task: {},
+    status: {},
+    showResult: { type: Boolean, default: void 0 },
+    progress: {},
+    progressType: {},
+    segments: {},
+    showPercentage: { type: Boolean, default: void 0 },
+    formatProgress: {},
+    title: {},
+    message: {},
+    description: {},
+    stage: {},
+    remainingTime: {},
+    layout: {},
+    placement: {},
+    align: {},
+    gap: {},
+    ariaLabel: {},
+    mask: { type: Boolean, default: void 0 },
+    maskColor: {},
+    maskOpacity: {},
+    blur: {},
+    zIndex: {},
+    appendTo: {},
+    blockInteraction: { type: Boolean, default: void 0 },
+    lockScroll: { type: Boolean, default: void 0 },
+    cancellable: { type: Boolean, default: void 0 },
+    retryable: { type: Boolean, default: void 0 },
+    escapeCancel: { type: Boolean, default: void 0 },
+    cancelLabel: {},
+    retryLabel: {},
+    preset: {},
+    animationDelay: {},
+    animated: { type: Boolean, default: void 0 },
+    paused: { type: Boolean, default: void 0 },
+    pauseWhenHidden: { type: Boolean, default: void 0 },
+    transitionDuration: {},
+    color: {},
+    trackColor: {},
+    strokeWidth: {},
+    dotSize: {},
+    dotGap: {},
+    colors: {},
+    gradient: {},
+    indicatorStyle: {},
+    messageStyle: {},
+    overlayStyle: {},
+    animation: {},
+    animationName: {},
+    speed: {},
+    animationDuration: {},
+    easing: {},
+    direction: {},
+    iterations: {},
+    angle: {},
+    path: {}
+  },
+  emits: ["update:modelValue", "update:spinning", "change", "start", "end", "show", "hide", "afterHide", "cancel", "timeout", "retry", "error", "success"],
+  setup(ye, { expose: ge, emit: fe }) {
+    const J = ye, u = fe, he = Te(), Q = Ee(), U = Me(), X = Be(), e = l(() => {
+      const a = Q.defaults.value, r = J.preset ?? a.preset;
+      return {
+        ...a,
+        ...r ? Q.presets.value[r] : {},
+        ...Object.fromEntries(
+          Object.entries(J).filter(([, z]) => z !== void 0)
+        )
+      };
+    }), t = Re(), Y = y(), $ = y(!0), Z = y(!1), ee = y(), i = y({}), C = y(!1), L = y(!1), ae = y(0), ke = De(), k = l(
+      () => e.value.mode ?? (he.default ? "container" : "inline")
+    ), N = l(
+      () => ["container", "overlay", "fullscreen"].includes(k.value)
+    ), p = l(() => k.value === "fullscreen"), be = l(() => e.value.appendTo ?? "body"), P = l(
+      () => $.value && (e.value.spinning ?? e.value.modelValue ?? Y.value ?? (e.value.task ? !1 : e.value.defaultSpinning ?? !0))
+    ), d = l(
+      () => e.value.status ?? i.value.status ?? (t.state.value.status === "idle" ? P.value ? "loading" : "idle" : t.state.value.status)
+    ), m = l(
+      () => Ae(
+        e.value.progress ?? ("progress" in i.value ? i.value.progress ?? void 0 : t.state.value.progress)
+      )
+    ), w = l(
+      () => !["idle", "loading", "retrying"].includes(d.value)
+    ), s = l(() => ({
+      spinning: P.value,
+      status: d.value,
+      progress: m.value,
+      message: e.value.message ?? i.value.message ?? t.state.value.message,
+      stage: e.value.stage ?? i.value.stage ?? (t.state.value.spinning ? t.state.value.stage : void 0),
+      remainingTime: e.value.remainingTime ?? i.value.remainingTime ?? (t.state.value.spinning ? t.state.value.remainingTime : void 0),
+      error: t.state.value.error
+    }));
+    function R(a) {
+      Y.value = a, u("update:modelValue", a), u("update:spinning", a);
+    }
+    function te() {
+      i.value = {}, t.state.value.spinning || t.reset(), R(!0);
+    }
+    function H() {
+      R(!1);
+    }
+    function A(a) {
+      i.value = { ...i.value, ...a };
+    }
+    function I() {
+      t.state.value.spinning ? t.cancel() : (A({ status: "cancelled" }), H(), u("cancel", s.value));
+    }
+    function O() {
+      const a = t.retry();
+      return a && (i.value = {}), u("retry", s.value), a;
+    }
+    function W(a, r) {
+      return i.value = {}, t.run(a, { timeout: e.value.timeout, ...r });
+    }
+    V(() => t.state.value.spinning, R, { flush: "sync" }), V(
+      () => t.state.value.status,
+      (a) => {
+        a === "error" && u("error", t.state.value.error, s.value), a === "success" && u("success", s.value), a === "cancelled" && u("cancel", s.value), a === "timeout" && u("timeout", s.value);
+      }
+    ), V(
+      () => e.value.task,
+      (a) => {
+        !Z.value || !$.value || (a ? W(a).catch(() => {
+        }) : t.state.value.spinning && t.cancel());
+      }
+    ), de(() => {
+      Z.value = !0, e.value.task && W(e.value.task).catch(() => {
+      });
+    }), $e(() => {
+      $.value = !1, t.reset();
+    }), we(() => {
+      $.value = !0;
+    });
+    const j = Oe({
+      requested: () => P.value,
+      delay: () => e.value.delay,
+      minimum: () => e.value.minDuration,
+      timeout: () => t.state.value.spinning ? void 0 : e.value.timeout,
+      autoEnd: () => e.value.autoEnd,
+      start: () => u("start", s.value),
+      end: () => u("end", s.value),
+      stop(a) {
+        a === "timeout" ? (A({ status: "timeout" }), u("timeout", s.value)) : t.state.value.spinning && t.cancel(), H();
+      }
+    }), M = l(
+      () => $.value && (j.value || e.value.showResult && w.value)
+    ), f = l(() => j.value && !w.value), b = l(
+      () => f.value && N.value && e.value.blockInteraction !== !1
+    ), Se = We(ee, {
+      trap: () => p.value && b.value,
+      lock: () => p.value && f.value && e.value.lockScroll !== !1,
+      zIndex: () => e.value.zIndex ?? 2200,
+      escape: () => {
+        e.value.escapeCancel && e.value.cancellable && I();
+      }
+    }), S = l(() => m.value !== void 0), D = l(() => e.value.progressType ?? "ring"), le = l(
+      () => {
+        var a, r;
+        return S.value ? ((r = (a = e.value).formatProgress) == null ? void 0 : r.call(a, m.value)) ?? Math.round(m.value) + "%" : "";
+      }
+    ), _ = l(() => ({
+      ...s.value,
+      visible: M.value === !0,
+      percentText: le.value,
+      cancel: I,
+      retry: O
+    })), se = l(
+      () => Ne(
+        e.value,
+        C.value || !!e.value.paused || e.value.pauseWhenHidden !== !1 && ke.value
+      )
+    ), ne = {
+      retrying: "正在重试",
+      success: "加载完成",
+      error: "加载失败",
+      cancelled: "已取消加载",
+      timeout: "加载超时"
+    }, oe = l(
+      () => Object.hasOwn(ne, d.value) ? ne[d.value] : void 0
+    ), q = l(
+      () => w.value ? e.value.message ?? i.value.message ?? oe.value ?? s.value.message : s.value.message ?? oe.value
+    ), F = l(
+      () => e.value.ariaLabel || q.value || e.value.title || "正在加载"
+    ), ue = l(
+      () => Math.round(E(e.value.segments, 8, 2, 30))
+    );
+    V(s, (a) => u("change", a));
+    let ie = !1;
+    function re() {
+      const a = M.value === !0;
+      ie !== a && (ie = a, u(a ? "show" : "hide", s.value));
+    }
+    return V(M, re), de(re), ge({
+      show: te,
+      hide: H,
+      toggle: () => P.value ? H() : te(),
+      run: W,
+      cancel: I,
+      retry: O,
+      update: A,
+      pause: () => {
+        C.value = !0;
+      },
+      resume: () => {
+        C.value = L.value = !1;
+      },
+      stop: () => {
+        L.value = !0;
+      },
+      restart: () => {
+        L.value = C.value = !1, ae.value++;
+      },
+      clearResult: () => {
+        t.state.value.spinning || (t.reset(), i.value = {});
+      },
+      visible: j,
+      snapshot: s
+    }), (a, r) => (n(), o("div", ce({ ...g(U), ...g(X) }, {
+      class: "hys-ui-spin",
+      "data-mode": k.value,
+      style: [se.value, g(X).style]
+    }), [
+      a.$slots.default ? (n(), o("div", {
+        key: 0,
+        class: pe(["hys-spin-content", {
+          "hys-spin-scroll-locked": N.value && !p.value && f.value && e.value.lockScroll
+        }]),
+        inert: b.value || void 0,
+        "aria-busy": f.value || void 0
+      }, [
+        h(a.$slots, "default", {}, void 0, !0)
+      ], 10, qe)) : v("", !0),
+      (n(), ze(Ve, {
+        to: be.value,
+        disabled: !p.value
+      }, [
+        me(Ce, {
+          name: "hys-spin-fade",
+          appear: "",
+          onAfterLeave: r[1] || (r[1] = (z) => u("afterHide", s.value))
+        }, {
+          default: Le(() => {
+            var z;
+            return [
+              M.value ? (n(), o("div", ce({
+                key: 0,
+                ref_key: "panel",
+                ref: ee
+              }, g(U), {
+                class: "hys-spin-layer",
+                style: [
+                  se.value,
+                  { zIndex: ((z = g(Se)) == null ? void 0 : z.zIndex.value) ?? e.value.zIndex },
+                  e.value.overlayStyle
+                ],
+                "data-mode": k.value,
+                "data-placement": e.value.placement ?? "center",
+                "data-block": b.value || void 0,
+                "data-mask": N.value && e.value.mask !== !1 || void 0,
+                "data-motion-off": L.value || e.value.animated === !1 || void 0,
+                "data-status": d.value,
+                role: p.value && b.value ? "dialog" : void 0,
+                "aria-modal": p.value && b.value || void 0,
+                "aria-label": p.value ? F.value : void 0,
+                tabindex: p.value && b.value ? -1 : void 0
+              }), [
+                h(a.$slots, "overlay", T(B(_.value)), () => [
+                  K("div", {
+                    class: "hys-spin-indicator",
+                    "data-layout": e.value.layout ?? (k.value === "inline" || k.value === "indicator" ? "left" : "top"),
+                    "data-align": e.value.align ?? "center",
+                    style: x(e.value.indicatorStyle)
+                  }, [
+                    D.value === "ring" || !S.value || w.value || a.$slots.indicator || a.$slots.icon ? (n(), o("div", {
+                      key: ae.value,
+                      class: pe(["hys-spin-icon", { "hys-spin-custom": e.value.animationName }]),
+                      "aria-busy": !a.$slots.default && f.value || void 0
+                    }, [
+                      h(a.$slots, "indicator", T(B(_.value)), () => [
+                        h(a.$slots, "icon", T(B(_.value)), () => [
+                          me(xe, {
+                            animation: e.value.animation ?? "circle",
+                            status: d.value,
+                            progress: D.value === "ring" ? m.value : void 0,
+                            stroke: g(E)(e.value.strokeWidth, 4, 0.5, 8),
+                            dot: g(E)(e.value.dotSize, 4, 1, 8),
+                            spacing: g(E)(e.value.dotGap, 11, 6, 17),
+                            colors: e.value.colors,
+                            gradient: e.value.gradient,
+                            path: e.value.path
+                          }, null, 8, ["animation", "status", "progress", "stroke", "dot", "spacing", "colors", "gradient", "path"])
+                        ], !0)
+                      ], !0)
+                    ], 10, Ke)) : v("", !0),
+                    K("div", {
+                      class: "hys-spin-details",
+                      style: x(e.value.messageStyle)
+                    }, [
+                      e.value.title ? (n(), o("span", Je, c(e.value.title), 1)) : v("", !0),
+                      q.value || a.$slots.message ? (n(), o("div", Qe, [
+                        h(a.$slots, "message", T(B(_.value)), () => [
+                          Pe(c(q.value), 1)
+                        ], !0)
+                      ])) : v("", !0),
+                      e.value.description ? (n(), o("span", Ue, c(e.value.description), 1)) : v("", !0),
+                      s.value.stage ? (n(), o("span", Xe, c(s.value.stage), 1)) : v("", !0),
+                      s.value.remainingTime !== void 0 ? (n(), o("span", Ye, "约剩 " + c(Math.max(0, Math.ceil(s.value.remainingTime / 1e3))) + " 秒", 1)) : v("", !0),
+                      h(a.$slots, "progress", T(B(_.value)), () => [
+                        S.value && D.value === "line" ? (n(), o("span", Ze, [
+                          K("i", {
+                            style: x({ inlineSize: (m.value ?? 0) + "%" })
+                          }, null, 4)
+                        ])) : S.value && D.value === "segments" ? (n(), o("span", ea, [
+                          (n(!0), o(He, null, Ie(ue.value, (G) => (n(), o("i", {
+                            key: G,
+                            style: x({
+                              "--hys-spin-segment-fill": Math.min(
+                                1,
+                                Math.max(
+                                  0,
+                                  m.value / 100 * ue.value - G + 1
+                                )
+                              ) * 100 + "%"
+                            })
+                          }, null, 4))), 128))
+                        ])) : v("", !0),
+                        S.value && e.value.showPercentage !== !1 ? (n(), o("span", aa, c(le.value), 1)) : v("", !0)
+                      ], !0)
+                    ], 4),
+                    a.$slots.actions || e.value.cancellable && f.value || e.value.retryable && ["error", "timeout", "cancelled"].includes(d.value) ? (n(), o("div", ta, [
+                      h(a.$slots, "actions", T(B(_.value)), () => [
+                        e.value.cancellable && f.value ? (n(), o("button", {
+                          key: 0,
+                          type: "button",
+                          onClick: I
+                        }, c(e.value.cancelLabel ?? "取消加载"), 1)) : e.value.retryable ? (n(), o("button", {
+                          key: 1,
+                          type: "button",
+                          onClick: r[0] || (r[0] = (G) => {
+                            var ve;
+                            return (ve = O()) == null ? void 0 : ve.catch(() => {
+                            });
+                          })
+                        }, c(e.value.retryLabel ?? "重试"), 1)) : v("", !0)
+                      ], !0)
+                    ])) : v("", !0)
+                  ], 12, Ge)
+                ], !0),
+                S.value && !w.value ? (n(), o("div", {
+                  key: 0,
+                  class: "hys-spin-sr",
+                  role: "progressbar",
+                  "aria-label": F.value,
+                  "aria-valuenow": m.value,
+                  "aria-valuemin": "0",
+                  "aria-valuemax": "100"
+                }, null, 8, la)) : (n(), o("span", {
+                  key: 1,
+                  class: "hys-spin-sr",
+                  role: d.value === "error" || d.value === "timeout" ? "alert" : "status"
+                }, c(F.value), 9, sa))
+              ], 16, Fe)) : v("", !0)
+            ];
+          }),
+          _: 3
+        })
+      ], 8, ["to", "disabled"]))
+    ], 16, je));
+  }
+});
+export {
+  ya as default
+};