maz-ui/components/chunks/MazPullToRefresh.QikB7FQT.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as R, defineAsyncComponent as $, computed as y, ref as b, watch as x, onUnmounted as V, openBlock as d, createElementBlock as c, normalizeClass as L, normalizeStyle as Y, renderSlot as f, createElementVNode as g, createCommentVNode as w, createVNode as A, unref as N } from "vue";
import '../assets/MazPullToRefresh.Bvm1bmiW.css';function k() {
  return typeof document < "u";
}
function H() {
  if (!k())
    return !1;
  const r = navigator, u = window.matchMedia("(display-mode: standalone)").matches;
  return r.standalone || u;
}
const I = {
  key: 0,
  class: "header-text"
}, q = {
  key: 1,
  class: "header-text"
}, D = {
  key: 2,
  class: "header-text"
}, F = { class: "maz-flex maz-flex-col maz-flex-center" }, O = /* @__PURE__ */ R({
  __name: "MazPullToRefresh",
  props: {
    distance: { default: 100 },
    offset: { default: 0 },
    action: { type: Function, default: void 0 },
    containerSelector: { default: void 0 },
    headerClass: { default: void 0 },
    spinnerColor: { default: "theme" },
    disabled: { type: Boolean, default: !1 },
    standaloneMode: { type: Boolean, default: !1 }
  },
  emits: ["loaded", "start", "error", "finish", "response"],
  setup(r, { emit: u }) {
    const a = r, s = u, m = $(() => import("./MazSpinner.B8L6EKV9.mjs")), l = y(
      () => a.disabled || a.action === void 0 || a.standaloneMode && k() && !H()
    ), h = b({
      top: 0,
      bottom: 0
    }), t = b({
      from: -1,
      to: -1,
      distance: 0,
      available: !1,
      state: "end"
    }), i = b(!1), o = y(() => {
      if (typeof document > "u" || l.value)
        return;
      const e = a.containerSelector ? document.querySelector(a.containerSelector) : document.body;
      if (!e)
        throw new Error("MazPullToRefresh - container not found");
      return e;
    }), p = y(() => t.value.state !== "move" && t.value.state !== "end" || l.value ? 0 : t.value.distance > a.distance ? a.distance : t.value.distance);
    function T(e) {
      const { top: n, height: v } = e.getBoundingClientRect();
      h.value = {
        top: n,
        bottom: window.innerHeight - (v + n + a.offset)
      };
    }
    function E(e) {
      i.value = e;
    }
    function C(e) {
      if (i.value || h.value.top < 0 && h.value.bottom < 0 || l.value)
        return;
      const n = e.touches.item(0);
      n && (t.value.state = "start", t.value.from = n.pageY);
    }
    function _(e) {
      if (i.value || t.value.from < 0 || window.scrollY > 0 || l.value)
        return;
      const n = e.touches.item(0);
      if (!n)
        return;
      t.value.to = n.pageY;
      const v = t.value.to - t.value.from;
      t.value.distance = v > 0 ? v : 0, t.value.available = t.value.distance >= a.distance, t.value.state = "move";
    }
    function z() {
      i.value || l.value || (p.value === a.distance && t.value.state === "move" && window.scrollY <= 0 ? B() : M());
    }
    function M() {
      t.value = {
        from: -1,
        to: -1,
        distance: 0,
        available: !1,
        state: "end"
      };
    }
    async function B() {
      var e;
      try {
        E(!0), s("start");
        const n = await ((e = a.action) == null ? void 0 : e.call(a));
        s("loaded"), s("response", n);
      } catch (n) {
        throw s("error", n), n;
      } finally {
        M(), E(!1), s("finish");
      }
    }
    x(
      () => l.value,
      (e) => {
        e === !0 ? S() : P();
      },
      { immediate: !0 }
    );
    function P() {
      !o.value || l.value || document === void 0 || (o.value.addEventListener("touchstart", C), o.value.addEventListener("touchmove", _), o.value.addEventListener("touchend", z), T(o.value));
    }
    function S() {
      !o.value || document === void 0 || (o.value.removeEventListener("touchstart", C), o.value.removeEventListener("touchmove", _), o.value.removeEventListener("touchend", z));
    }
    return V(() => {
      S();
    }), (e, n) => (d(), c(
      "div",
      {
        class: L(["m-pull-to-refresh m-reset-css", { "--available": t.value.available || p.value > 10 }])
      },
      [
        l.value ? w("v-if", !0) : (d(), c(
          "div",
          {
            key: 0,
            class: L(["loading-header", e.headerClass]),
            style: Y({ height: `${p.value}px` })
          },
          [
            t.value.available ? t.value.available && !i.value ? (d(), c("div", q, [
              f(e.$slots, "pull-ready", {}, () => [
                n[1] || (n[1] = g(
                  "span",
                  null,
                  " Release to refresh ",
                  -1
                  /* HOISTED */
                ))
              ], !0)
            ])) : w("v-if", !0) : (d(), c("div", I, [
              f(e.$slots, "pull-before", {}, () => [
                n[0] || (n[0] = g(
                  "span",
                  null,
                  "Pull to refresh",
                  -1
                  /* HOISTED */
                ))
              ], !0)
            ])),
            i.value ? (d(), c("div", D, [
              f(e.$slots, "pull-loading", {}, () => [
                g("div", F, [
                  A(N(m), {
                    color: e.spinnerColor,
                    size: "2.5em"
                  }, null, 8, ["color"])
                ])
              ], !0)
            ])) : w("v-if", !0)
          ],
          6
          /* CLASS, STYLE */
        )),
        f(e.$slots, "default", {}, void 0, !0)
      ],
      2
      /* CLASS */
    ));
  }
}), U = (r, u) => {
  const a = r.__vccOpts || r;
  for (const [s, m] of u)
    a[s] = m;
  return a;
}, G = /* @__PURE__ */ U(O, [["__scopeId", "data-v-370960c7"]]);
export {
  G as M,
  U as _
};