y-design-ssr 0.2.0 → 0.2.2

package/libs/pullrefresh/index.mjs

@@ -1,11 +1,40 @@
-import { ref as T, reactive as P, defineComponent as H, getCurrentInstance as F, computed as C, onMounted as Y, onUnmounted as X, createVNode as x } from "vue";
-const y = (t, n) => n ? typeof n == "string" ? ` ${t}--${n}` : Array.isArray(n) ? n.reduce((r, a) => r + y(t, a), "") : Object.keys(n).reduce(
-  (r, a) => r + (n[a] ? y(t, a) : ""),
-  ""
-) : "", k = (t) => (n, r) => {
-  let a = n, s = r;
-  return a && typeof a != "string" && (s = a, a = ""), a = a ? `${t}__${a}` : t, `${a}${y(a, s)}`;
-}, z = () => (t, n) => n ? `${y(`y-${t}`, n)}` : `y-${t}`, B = {
+import { ref, reactive, defineComponent, getCurrentInstance, computed, onMounted, onUnmounted, createVNode } from "vue";
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -16,59 +45,88 @@ const y = (t, n) => n ? typeof n == "string" ? ` ${t}--${n}` : Array.isArray(n)
   "form-item": {
     validateMessage: "请输入正确内容"
   }
-}, b = T("zh-CN"), M = P({
-  "zh-CN": B
-}), j = {
+};
+const lang = ref("zh-CN");
+const langs = reactive({
+  "zh-CN": defaultLang
+});
+const locale$1 = {
   text() {
-    return M[b.value];
+    return langs[lang.value];
   },
-  use(t, n) {
-    b.value = t, this.add({ [t]: n });
+  use(newLang, newConfigs) {
+    lang.value = newLang;
+    this.add({ [newLang]: newConfigs });
   },
-  add(t = {}) {
-    Object.assign(M, t);
+  add(newConfigs = {}) {
+    Object.assign(langs, newConfigs);
   }
-}, V = (t) => {
-  const n = `y-${t}`;
-  return [n, k(n), z()];
-}, W = (t) => j.text()[t], q = (t, n, r, a) => {
-  const s = Math.abs(t - r), 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, r = t.target;
-  let a = !1;
-  if (n === r)
-    return a;
-  const s = (l) => {
-    l.offsetHeight !== l.scrollHeight && l.scrollTop !== 0 ? a = !0 : l.parentElement && l.parentElement !== n && s(l.parentElement);
+};
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const createLocale = (name2) => {
+  return locale$1.text()[name2];
+};
+const getAngle = (x1, y1, x2, y2) => {
+  const x = Math.abs(x1 - x2);
+  const y = Math.abs(y1 - y2);
+  const z = Math.sqrt(x * x + y * y);
+  return 90 - Math.round(Math.asin(y / z) / Math.PI * 180);
+};
+const hasInnerScroll = (e) => {
+  const currentTarget = e.currentTarget;
+  const target = e.target;
+  let bool = false;
+  if (currentTarget === target)
+    return bool;
+  const _hasInnerScroll = (t) => {
+    if (t.offsetHeight !== t.scrollHeight && t.scrollTop !== 0) {
+      bool = true;
+    } else if (t.parentElement && t.parentElement !== currentTarget) {
+      _hasInnerScroll(t.parentElement);
+    }
   };
-  return r && s(r), a;
-}, [J, S] = V("pull-refresh"), h = W("pull-refresh"), K = 30, U = 0.5;
-let u = /* @__PURE__ */ function(t) {
-  return t.DEFUALT = "normal", t.PULLING = "pulling", t.LOOSING = "loosing", t.LOADING = "loading", t.SUCCESS = "success", t.FAILED = "failed", t;
+  target && _hasInnerScroll(target);
+  return bool;
+};
+const [name, bem] = createNamespace("pull-refresh");
+const locale = createLocale("pull-refresh");
+const ANGLE = 30;
+const ANIMATION_TIME = 0.5;
+let RefreshStatus = /* @__PURE__ */ function(RefreshStatus2) {
+  RefreshStatus2["DEFUALT"] = "normal";
+  RefreshStatus2["PULLING"] = "pulling";
+  RefreshStatus2["LOOSING"] = "loosing";
+  RefreshStatus2["LOADING"] = "loading";
+  RefreshStatus2["SUCCESS"] = "success";
+  RefreshStatus2["FAILED"] = "failed";
+  return RefreshStatus2;
 }({});
-const Q = (t) => t < 60 ? 1 : 1 - (t - 60) / 600, A = /* @__PURE__ */ H({
-  name: J,
+const getScale = (num) => num < 60 ? 1 : 1 - (num - 60) / 600;
+const Pullrefresh = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     pullingText: {
       type: String,
-      default: h.pulling
+      default: locale.pulling
     },
     loosingText: {
       type: String,
-      default: h.loosing
+      default: locale.loosing
     },
     loadingText: {
       type: String,
-      default: h.loading
+      default: locale.loading
     },
     successText: {
       type: String,
-      default: h.success
+      default: locale.success
     },
     failedText: {
       type: String,
-      default: h.failed
+      default: locale.failed
     },
     statusHeight: {
       type: Number,
@@ -76,91 +134,163 @@ const Q = (t) => t < 60 ? 1 : 1 - (t - 60) / 600, A = /* @__PURE__ */ H({
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
-  setup(t, {
-    slots: n,
-    emit: r,
-    expose: a
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
-    const s = F();
-    let l = 0, g = 0, p = 0, N = null;
-    const c = T(0), L = T(0), o = T(u.DEFUALT), I = C(() => {
-      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 !== "");
-    }), G = (e = "success") => {
-      o.value = e, setTimeout(() => {
-        c.value = 0;
-      }, 500), setTimeout(() => {
-        o.value = u.DEFUALT;
+    const instance = getCurrentInstance();
+    let _startPosX = 0;
+    let _startPosY = 0;
+    let _transitionHeight = 0;
+    let $scroll = null;
+    const translateY = ref(0);
+    const transitionTime = ref(0);
+    const refreshStatus = ref(RefreshStatus.DEFUALT);
+    const children = computed(() => {
+      var _a;
+      const $el = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$el;
+      const $children = [...$el.childNodes];
+      return $children == null ? void 0 : $children.filter((node) => node.nodeType !== 3 || node.nodeValue !== "");
+    });
+    const callback = (status = "success") => {
+      refreshStatus.value = status;
+      setTimeout(() => {
+        translateY.value = 0;
+      }, 500);
+      setTimeout(() => {
+        refreshStatus.value = RefreshStatus.DEFUALT;
       }, 1e3);
-    }, D = () => {
-      c.value = t.statusHeight, L.value = U, o.value = u.LOADING, r("load", G);
-    }, 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 && o.value === u.DEFUALT && (o.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 = q(l, g, i, v);
-      p = v - g, (o.value === u.PULLING || o.value === u.LOOSING) && p > 0 && d < K && (e.preventDefault(), c.value = p * Q(p), p > t.statusHeight && o.value === u.PULLING && (o.value = u.LOOSING));
-    }, f = (e) => {
-      o.value === u.LOOSING ? (c.value = t.statusHeight, L.value = U, o.value = u.LOADING, r("load", G, e)) : o.value === u.PULLING && (c.value = 0, o.value = u.DEFUALT);
     };
-    Y(() => {
-      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
+    const refresh = () => {
+      translateY.value = props.statusHeight;
+      transitionTime.value = ANIMATION_TIME;
+      refreshStatus.value = RefreshStatus.LOADING;
+      emit("load", callback);
+    };
+    const touchStart = (e) => {
+      _startPosX = e instanceof TouchEvent ? e.touches[0].pageX : e.pageX;
+      _startPosY = e instanceof TouchEvent ? e.touches[0].pageY : e.pageY;
+      if (children.value.length !== 2 || children.value[1].nodeType === 3) {
+        $scroll = instance == null ? void 0 : instance.vnode.el;
+      } else {
+        $scroll = children.value[1];
+      }
+      if (!props.disabled && !hasInnerScroll(e) && $scroll.scrollTop === 0 && refreshStatus.value === RefreshStatus.DEFUALT) {
+        refreshStatus.value = RefreshStatus.PULLING;
+        translateY.value = 0;
+        transitionTime.value = 0;
+      }
+    };
+    const touchMove = (e) => {
+      const x = e instanceof TouchEvent ? e.touches[0].pageX : e.pageX;
+      const y = e instanceof TouchEvent ? e.touches[0].pageY : e.pageY;
+      const angle = getAngle(_startPosX, _startPosY, x, y);
+      _transitionHeight = y - _startPosY;
+      if ((refreshStatus.value === RefreshStatus.PULLING || refreshStatus.value === RefreshStatus.LOOSING) && _transitionHeight > 0 && angle < ANGLE) {
+        e.preventDefault();
+        translateY.value = _transitionHeight * getScale(_transitionHeight);
+        if (_transitionHeight > props.statusHeight && refreshStatus.value === RefreshStatus.PULLING) {
+          refreshStatus.value = RefreshStatus.LOOSING;
+        }
+      }
+    };
+    const touchEnd = (e) => {
+      if (refreshStatus.value === RefreshStatus.LOOSING) {
+        translateY.value = props.statusHeight;
+        transitionTime.value = ANIMATION_TIME;
+        refreshStatus.value = RefreshStatus.LOADING;
+        emit("load", callback, e);
+      } else if (refreshStatus.value === RefreshStatus.PULLING) {
+        translateY.value = 0;
+        refreshStatus.value = RefreshStatus.DEFUALT;
+      }
+    };
+    onMounted(() => {
+      const $el = instance == null ? void 0 : instance.vnode.el;
+      $el == null ? void 0 : $el.addEventListener("touchstart", touchStart, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("touchmove", touchMove, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("touchend", touchEnd, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("mousedown", touchStart, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("mousemove", touchMove, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("mouseup", touchEnd, {
+        passive: false
+      });
+      $el == null ? void 0 : $el.addEventListener("mouseout", touchEnd, {
+        passive: false
       });
-    }), X(() => {
-      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 _ = () => {
-      var e;
-      return o.value === u.DEFUALT ? null : n[o.value] ? (e = n[o.value]) == null ? void 0 : e.call(n) : x("p", null, [t[`${o.value}Text`]]);
+    onUnmounted(() => {
+      const $el = instance == null ? void 0 : instance.vnode.el;
+      $el == null ? void 0 : $el.removeEventListener("touchstart", touchStart);
+      $el == null ? void 0 : $el.removeEventListener("touchmove", touchMove);
+      $el == null ? void 0 : $el.removeEventListener("touchend", touchEnd);
+      $el == null ? void 0 : $el.removeEventListener("mousedown", touchStart);
+      $el == null ? void 0 : $el.removeEventListener("mousemove", touchMove);
+      $el == null ? void 0 : $el.removeEventListener("mouseup", touchEnd);
+      $el == null ? void 0 : $el.removeEventListener("mouseout", touchEnd);
+    });
+    const _renderStatus = () => {
+      var _a;
+      if (refreshStatus.value === RefreshStatus.DEFUALT)
+        return null;
+      if (slots[refreshStatus.value])
+        return (_a = slots[refreshStatus.value]) == null ? void 0 : _a.call(slots);
+      return createVNode("p", null, [props[`${refreshStatus.value}Text`]]);
     };
-    return a({
-      refresh: D
-    }), () => {
-      var O;
+    expose({
+      refresh
+    });
+    return () => {
+      var _a;
       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: S(),
-        style: {
-          WebkitTransform: `translate3d(0, ${c.value}px, 0)`,
-          transform: `translate3d(0, ${c.value}px, 0)`,
-          transition: v
+        statusHeight
+      } = props;
+      const height = translateY.value > statusHeight ? statusHeight : translateY.value;
+      const transition = `all ${transitionTime.value}s ease 0s`;
+      const translate = `translate3d(0, ${-translateY.value}px, 0)`;
+      return createVNode("div", {
+        "class": bem(),
+        "style": {
+          WebkitTransform: `translate3d(0, ${translateY.value}px, 0)`,
+          transform: `translate3d(0, ${translateY.value}px, 0)`,
+          transition
         }
-      }, [x("div", {
-        class: S("status"),
-        style: {
-          height: `${i}px`,
-          WebkitTransform: `${d} scale(${i / e})`,
-          transform: `${d} scale(${i / e})`,
-          transition: v
+      }, [createVNode("div", {
+        "class": bem("status"),
+        "style": {
+          height: `${height}px`,
+          WebkitTransform: `${translate} scale(${height / statusHeight})`,
+          transform: `${translate} scale(${height / statusHeight})`,
+          transition
         }
-      }, [_()]), (O = n.default) == null ? void 0 : O.call(n)]);
+      }, [_renderStatus()]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-A.install = (t) => {
-  const { name: n } = A;
-  t.component(n, A);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Pullrefresh.install = (Vue) => {
+  const { name: name2 } = Pullrefresh;
+  Vue.component(name2, Pullrefresh);
 };
 export {
-  A as default
+  Pullrefresh as default
 };