y-design-ssr/libs/pullRefresh/index.mjs

SSR component library of YUI with Vue3

import { ref as T, reactive as _, defineComponent as P, getCurrentInstance as H, computed as F, onMounted as C, onUnmounted as Y, createVNode as x } from "vue";
const y = (t, n) => n ? typeof n == "string" ? ` ${t}--${n}` : Array.isArray(n) ? n.reduce((o, a) => o + y(t, a), "") : Object.keys(n).reduce(
  (o, a) => o + (n[a] ? y(t, a) : ""),
  ""
) : "", X = (t) => (n, o) => {
  let a = n, s = o;
  return a && typeof a != "string" && (s = a, a = ""), a = a ? `${t}__${a}` : t, `${a}${y(a, s)}`;
}, k = () => (t, n) => n ? `${y(`y-${t}`, n)}` : `y-${t}`, z = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
}, O = T("zh-CN"), b = _({
  "zh-CN": z
}), B = {
  text() {
    return b[O.value];
  },
  use(t, n) {
    O.value = t, this.add({ [t]: n });
  },
  add(t = {}) {
    Object.assign(b, t);
  }
}, j = (t) => {
  const n = `y-${t}`;
  return [n, X(n), k()];
}, w = (t) => B.text()[t];
var u = /* @__PURE__ */ ((t) => (t.DEFUALT = "normal", t.PULLING = "pulling", t.LOOSING = "loosing", t.LOADING = "loading", t.SUCCESS = "success", t.FAILED = "failed", t))(u || {});
const V = (t, n, o, a) => {
  const s = Math.abs(t - o), l = Math.abs(n - a), g = Math.sqrt(s * s + l * l);
  return 90 - Math.round(Math.asin(l / g) / Math.PI * 180);
}, W = (t) => {
  const n = t.currentTarget, o = t.target;
  let a = !1;
  if (n === o)
    return a;
  const s = (l) => {
    l.offsetHeight !== l.scrollHeight && l.scrollTop !== 0 ? a = !0 : l.parentElement && l.parentElement !== n && s(l.parentElement);
  };
  return o && s(o), a;
}, [q, M] = j("pull-refresh"), p = w("pull-refresh"), J = 30, S = 0.5, K = (t) => t < 60 ? 1 : 1 - (t - 60) / 600, Q = /* @__PURE__ */ P({
  name: q,
  props: {
    pullingText: {
      type: String,
      default: p.pulling
    },
    loosingText: {
      type: String,
      default: p.loosing
    },
    loadingText: {
      type: String,
      default: p.loading
    },
    successText: {
      type: String,
      default: p.success
    },
    failedText: {
      type: String,
      default: p.failed
    },
    statusHeight: {
      type: Number,
      default: 60
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  setup(t, {
    slots: n,
    emit: o,
    expose: a
  }) {
    const s = H();
    let l = 0, g = 0, h = 0, N = null;
    const c = T(0), L = T(0), r = T(u.DEFUALT), I = F(() => {
      var v;
      const i = [...((v = s == null ? void 0 : s.proxy) == null ? void 0 : v.$el).childNodes];
      return i == null ? void 0 : i.filter((d) => d.nodeType !== 3 || d.nodeValue !== "");
    }), A = (e = "success") => {
      r.value = e, setTimeout(() => {
        c.value = 0;
      }, 500), setTimeout(() => {
        r.value = u.DEFUALT;
      }, 1e3);
    }, U = () => {
      c.value = t.statusHeight, L.value = S, r.value = u.LOADING, o("load", A);
    }, m = (e) => {
      l = e instanceof TouchEvent ? e.touches[0].pageX : e.pageX, g = e instanceof TouchEvent ? e.touches[0].pageY : e.pageY, I.value.length !== 2 || I.value[1].nodeType === 3 ? N = s == null ? void 0 : s.vnode.el : N = I.value[1], !t.disabled && !W(e) && N.scrollTop === 0 && r.value === u.DEFUALT && (r.value = u.PULLING, c.value = 0, L.value = 0);
    }, E = (e) => {
      const i = e instanceof TouchEvent ? e.touches[0].pageX : e.pageX, v = e instanceof TouchEvent ? e.touches[0].pageY : e.pageY, d = V(l, g, i, v);
      h = v - g, (r.value === u.PULLING || r.value === u.LOOSING) && h > 0 && d < J && (e.preventDefault(), c.value = h * K(h), h > t.statusHeight && r.value === u.PULLING && (r.value = u.LOOSING));
    }, f = (e) => {
      r.value === u.LOOSING ? (c.value = t.statusHeight, L.value = S, r.value = u.LOADING, o("load", A, e)) : r.value === u.PULLING && (c.value = 0, r.value = u.DEFUALT);
    };
    C(() => {
      const e = s == null ? void 0 : s.vnode.el;
      e == null || e.addEventListener("touchstart", m, {
        passive: !1
      }), e == null || e.addEventListener("touchmove", E, {
        passive: !1
      }), e == null || e.addEventListener("touchend", f, {
        passive: !1
      }), e == null || e.addEventListener("mousedown", m, {
        passive: !1
      }), e == null || e.addEventListener("mousemove", E, {
        passive: !1
      }), e == null || e.addEventListener("mouseup", f, {
        passive: !1
      }), e == null || e.addEventListener("mouseout", f, {
        passive: !1
      });
    }), Y(() => {
      const e = s == null ? void 0 : s.vnode.el;
      e == null || e.removeEventListener("touchstart", m), e == null || e.removeEventListener("touchmove", E), e == null || e.removeEventListener("touchend", f), e == null || e.removeEventListener("mousedown", m), e == null || e.removeEventListener("mousemove", E), e == null || e.removeEventListener("mouseup", f), e == null || e.removeEventListener("mouseout", f);
    });
    const D = () => {
      var e;
      return r.value === u.DEFUALT ? null : n[r.value] ? (e = n[r.value]) == null ? void 0 : e.call(n) : x("p", null, [t[`${r.value}Text`]]);
    };
    return a({
      refresh: U
    }), () => {
      var G;
      const {
        statusHeight: e
      } = t, i = c.value > e ? e : c.value, v = `all ${L.value}s ease 0s`, d = `translate3d(0, ${-c.value}px, 0)`;
      return x("div", {
        class: M(),
        style: {
          WebkitTransform: `translate3d(0, ${c.value}px, 0)`,
          transform: `translate3d(0, ${c.value}px, 0)`,
          transition: v
        }
      }, [x("div", {
        class: M("status"),
        style: {
          height: `${i}px`,
          WebkitTransform: `${d} scale(${i / e})`,
          transform: `${d} scale(${i / e})`,
          transition: v
        }
      }, [D()]), (G = n.default) == null ? void 0 : G.call(n)]);
    };
  }
});
function Z(t) {
  const n = t;
  return n.install = (o) => {
    const { name: a } = t;
    a && o.component(a, t);
  }, n;
}
const R = Z(Q);
export {
  R as default
};