@fox-js/navigation/dist/index.esm.js

fox navigation

import { defineComponent as T, resolveComponent as b, openBlock as y, createBlock as M, ref as _, unref as w, computed as $, createElementBlock as z, createElementVNode as B, normalizeStyle as S, renderSlot as X, reactive as j, onMounted as A, onUnmounted as U, watchEffect as V, normalizeClass as R } from "vue";
/*!
 * @fox-js/navigation v4.0.0 Mon Sep 26 2022 12:00:20 GMT+0800 (中国标准时间)
 */
const Y = /* @__PURE__ */ T({
  __name: "index",
  props: {
    routerViewName: null,
    transition: { type: [Object, Boolean], default: !1 }
  },
  setup(t) {
    const e = t;
    return (n, s) => {
      const a = b("fox-router-view");
      return y(), M(a, {
        class: "fox-card-navigator",
        "view-class": "fox-card-navigator__item",
        "view-active-class": "fox-card-navigator__item-active",
        "view-inactive-class": "fox-card-navigator__item-inactive",
        "transition-name": "fox-card-navigator__trans",
        transition: e.transition,
        multi: !0,
        name: e.routerViewName
      }, null, 8, ["transition", "name"]);
    };
  }
});
const k = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: Y
}, Symbol.toStringTag, { value: "Module" })), P = 10;
function q(t, e) {
  return t > e && t > P ? "horizontal" : e > t && e > P ? "vertical" : "";
}
function W() {
  const t = _(0), e = _(0), n = _(0), s = _(0), a = _(0), v = _(0), p = _(0), m = _(0), d = _(0), c = _(0), o = _(""), i = () => o.value === "vertical", h = () => o.value === "horizontal", u = () => {
    p.value = 0, m.value = 0, d.value = 0, c.value = 0, o.value = "", n.value = 0;
  };
  return {
    move: (r) => {
      const g = r.touches[0];
      p.value = g.clientX - t.value, m.value = g.clientY - e.value, a.value = g.clientX, v.value = g.clientY, d.value = Math.abs(p.value), c.value = Math.abs(m.value), s.value = Date.now() - n.value, o.value || (o.value = q(d.value, c.value));
    },
    start: (r) => {
      u(), t.value = r.touches[0].clientX, e.value = r.touches[0].clientY, n.value = Date.now();
    },
    reset: u,
    startX: t,
    startY: e,
    startTime: n,
    duration: s,
    moveX: a,
    moveY: v,
    deltaX: p,
    deltaY: m,
    offsetX: d,
    offsetY: c,
    direction: o,
    isVertical: i,
    isHorizontal: h
  };
}
function F(t) {
  return t === window;
}
const H = (t) => {
  const e = w(t);
  if (F(e)) {
    const n = e.innerWidth, s = e.innerHeight;
    return {
      top: 0,
      left: 0,
      right: n,
      bottom: s,
      width: n,
      height: s
    };
  }
  return e && e.getBoundingClientRect ? e.getBoundingClientRect() : {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: 0,
    height: 0
  };
}, G = 15, J = 300, K = 200;
function Q(t) {
  t.stopPropagation();
}
function Z(t, e) {
  (typeof t.cancelable != "boolean" || t.cancelable) && t.preventDefault(), e && Q(t);
}
function tt(t, e) {
  return t = Math.abs(t / e) / 3e-3 * (t < 0 ? -1 : 1), t;
}
function E(t, e = 0, n, s = K) {
  n === "end" ? t.style.transition = `transform ${s}ms cubic-bezier(0.17, 0.89, 0.45, 1)` : t.style.transition = "transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1)", t.style.transform = `translate3d(${e}px, 0, 0)`;
}
const L = /* @__PURE__ */ new WeakMap();
function et(t, e, n, s = 1e3) {
  const a = {
    active: !0,
    startDistance: 0,
    scrollDistance: 0,
    scrollTime: 0,
    moving: !1,
    transitionEndTrigger: null
  }, v = t.previousSibling, p = W(), m = (h, u, f, l) => {
    let r = u + a.startDistance;
    if (f === "end") {
      const g = H(h);
      let x = g.width / 3;
      r < x ? r = 0 : r = g.width, l && l > 0 && (a.transitionEndTrigger = () => {
        a.moving = !1, n && h.classList.remove(n);
      }), E(h, r, "end", l), v && E(v, 0, "", 0), r > 0 && typeof e == "function" && e();
    } else
      r < 0 && (r = 0), E(h, r, "", 0);
  }, d = () => {
    t.style.transform = "", t.style.transition = "", v && (v.style.transform = "", v.style.transition = ""), a.transitionEndTrigger && (a.transitionEndTrigger(), a.transitionEndTrigger = null);
  }, c = (h) => {
    if (p.start(h), a.moving) {
      const u = t, { transform: f } = window.getComputedStyle(u);
      a.scrollDistance = +f.slice(7, f.length - 1).split(", ")[5];
    }
    n && t.classList.add(n), a.startDistance = a.scrollDistance, a.transitionEndTrigger = null, a.moving = !0;
  }, o = (h) => {
    if (a.moving = !0, p.move(h), p.isVertical()) {
      Z(h, !0);
      return;
    }
    m(t, p.deltaX.value, "", 0);
  }, i = () => {
    const h = p.deltaX.value;
    if (h == 0) {
      n && t.classList.remove(n);
      return;
    }
    const u = p.duration.value;
    if (u < J && Math.abs(h) > G) {
      const l = tt(h, u);
      m(t, l, "end", s);
    } else
      m(t, h, "end", s);
  };
  t.addEventListener("transitionend", d), t.addEventListener("touchstart", c), t.addEventListener("touchmove", o), t.addEventListener("touchend", i), t.addEventListener("touchcancel", i), L.set(t, {
    state: a,
    transitionend: d,
    touchstart: c,
    touchmove: o,
    touchend: i,
    touchcancel: i
  });
}
function nt(t) {
  const e = L.get(t);
  e && (L.delete(t), t.addEventListener("transitionend", e.transitionend), t.addEventListener("touchstart", e.touchstart), t.addEventListener("touchmove", e.touchmove), t.addEventListener("touchend", e.touchend), t.addEventListener("touchcancel", e.touchcancel));
}
const ot = /* @__PURE__ */ T({
  __name: "index",
  props: {
    dragRemove: { type: Boolean, default: !0 },
    removePage: null,
    routerViewName: null,
    viewTag: { default: "div" },
    transition: { type: [Object, Boolean], default: !0 }
  },
  setup(t) {
    const e = t;
    function n(c) {
      return (c.params && c.params.animationType) ?? "slide";
    }
    const s = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u === "pop" && o)
          return;
        const f = o ? "show" : "enter", l = `fox-root-navigator__${u}-${f}-from`, r = `fox-root-navigator__${u}-${f}-active`;
        c.classList.add(l), c.classList.add(r);
      }
    }, a = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u === "pop" && o)
          return;
        const f = o ? "show" : "enter", l = `fox-root-navigator__${u}-${f}-from`, r = `fox-root-navigator__${u}-${f}-to`;
        c.classList.remove(l), c.classList.add(r);
      }
    }, v = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u !== "pop" || !o) {
          const f = o ? "show" : "enter", l = `fox-root-navigator__${u}-${f}-active`, r = `fox-root-navigator__${u}-${f}-to`;
          c.classList.remove(l), c.classList.remove(r);
        }
      }
      e.dragRemove && !o && i.opsType === 3 && et(c, e.removePage, "fox-root-navigator__item-moving", 1e3);
    }, p = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u === "pop" && o)
          return;
        const f = o ? "hide" : "leave", l = `fox-root-navigator__${u}-${f}-from`, r = `fox-root-navigator__${u}-${f}-active`;
        c.classList.add(l), c.classList.add(r);
      }
    }, m = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u === "pop" && o)
          return;
        const f = o ? "hide" : "leave", l = `fox-root-navigator__${u}-${f}-from`, r = `fox-root-navigator__${u}-${f}-to`;
        c.classList.remove(l), c.classList.add(r);
      }
    }, d = (c, o, i, h) => {
      if (i.opsType === 3 || o) {
        const u = n(i);
        if (u !== "pop" || !o) {
          const f = o ? "hide" : "leave", l = `fox-root-navigator__${u}-${f}-active`, r = `fox-root-navigator__${u}-${f}-to`;
          c.classList.remove(l), c.classList.remove(r);
        }
      }
      e.dragRemove && !o && nt(c);
    };
    return (c, o) => {
      const i = b("fox-router-view");
      return y(), M(i, {
        class: "fox-root-navigator",
        "view-class": "fox-root-navigator__item",
        "before-enter": s,
        enter: a,
        "after-enter": v,
        "before-leave": p,
        leave: m,
        "after-leave": d,
        multi: !0,
        name: e.routerViewName,
        "view-tag": e.viewTag,
        transition: e.transition
      }, null, 8, ["name", "view-tag", "transition"]);
    };
  }
});
const it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: ot
}, Symbol.toStringTag, { value: "Module" })), st = { class: "fox-swiper-navigator" }, at = /* @__PURE__ */ T({
  __name: "swiper",
  props: {
    width: null,
    scrollDistance: null,
    scrollTime: null
  },
  setup(t) {
    const e = t, n = $(() => ({
      transform: `translate3d(${e.scrollDistance}px, 0, 0)`,
      width: `${e.width}`
    }));
    return (s, a) => (y(), z("div", st, [
      B("div", {
        class: "fox-swiper-navigator__inner",
        style: S(w(n))
      }, [
        X(s.$slots, "default")
      ], 4)
    ]));
  }
});
let rt = 0;
function ct() {
  return ++rt;
}
const lt = 15, ut = 300, dt = 200;
function ht(t) {
  t.stopPropagation();
}
function ft(t, e) {
  (typeof t.cancelable != "boolean" || t.cancelable) && t.preventDefault(), e && ht(t);
}
function vt(t, e) {
  return t = Math.abs(t / e) / 3e-3 * (t < 0 ? -1 : 1), t;
}
function O(t, e = 0, n, s = dt) {
  n === "end" ? t.style.transition = `transform ${s}ms cubic-bezier(0.17, 0.89, 0.45, 1)` : t.style.transition = "transform 0ms cubic-bezier(0.17, 0.89, 0.45, 1)", t.style.transform = `translate3d(${e}px, 0, 0)`;
}
class pt {
  width = 0;
  columnWidth = 0;
  max = 0;
  min = 0;
  el = null;
  swipeDuration = 360;
  transitionEndTrigger = null;
  moving = !1;
  startDistance = 0;
  scrollDistance = 0;
  getStartDistance;
  openPage;
  isPageOpened;
  pageOpened;
  transitionend = null;
  touchstart = null;
  touchmove = null;
  touchend = null;
  touchcancel = null;
  constructor(e, n, s, a) {
    this.getStartDistance = e, this.openPage = n, this.isPageOpened = s, this.pageOpened = a;
  }
  open() {
    const e = this.el, n = W(), s = (a, v, p, m) => {
      let d = v + this.startDistance;
      const c = this.columnWidth / 3;
      if (p === "end") {
        if (d == 0) {
          this.moving = !1;
          return;
        }
        Math.abs(v) > c && (v > 0 ? d = this.startDistance + this.columnWidth : d = this.startDistance - this.columnWidth);
        let o = -d;
        o < 0 ? o = 0 : o > this.width - this.columnWidth && (o = this.width - this.columnWidth);
        const i = Math.floor(o / this.columnWidth);
        this.isPageOpened(i) || this.openPage(i), d = -i * this.columnWidth, m && m > 0 && (this.transitionEndTrigger = () => {
          this.moving = !1, this.pageOpened(i);
        }), O(a, d, "end", m), this.scrollDistance = d;
      } else {
        if (Math.abs(v) > c) {
          let i = 0;
          if (v > 0 ? i = Math.abs(this.startDistance + this.columnWidth) : i = Math.abs(this.startDistance - this.columnWidth), i >= 0 && i < this.width) {
            const h = Math.floor(i / this.columnWidth);
            this.isPageOpened(h) || this.openPage(h);
          }
        }
        let o = -d;
        o < this.min ? o = this.min : o > this.max && (o = this.max), O(a, -o, "", 0);
      }
    };
    this.transitionend = () => {
      e.style.transition = "", this.transitionEndTrigger && (this.transitionEndTrigger(), this.transitionEndTrigger = null);
    }, this.touchstart = (a) => {
      this.moving || (n.start(a), this.startDistance = this.getStartDistance(), this.transitionEndTrigger = null, this.moving = !0);
    }, this.touchmove = (a) => {
      if (n.move(a), n.isVertical()) {
        ft(a, !0);
        return;
      }
      s(e, n.deltaX.value, "", 0);
    }, this.touchend = () => {
      const a = n.deltaX.value;
      if (a == 0)
        return;
      const v = n.duration.value;
      if (v < ut && Math.abs(a) > lt) {
        const m = vt(a, v);
        s(e, m, "end", this.swipeDuration);
      } else
        s(e, a, "end", this.swipeDuration);
    }, e.addEventListener("transitionend", this.transitionend), e.addEventListener("touchstart", this.touchstart), e.addEventListener("touchmove", this.touchmove), e.addEventListener("touchend", this.touchend), e.addEventListener("touchcancel", this.touchend);
  }
  close() {
    const e = this.el;
    this.transitionend && e.addEventListener("transitionend", this.transitionend), this.touchstart && e.addEventListener("touchstart", this.touchstart), this.touchmove && e.addEventListener("touchmove", this.touchmove), this.touchend && e.addEventListener("touchend", this.touchend), this.touchcancel && e.addEventListener("touchcancel", this.touchcancel), this.el = null;
  }
}
function mt(t, e, n, s) {
  return new pt(t, e, n, s);
}
const gt = /* @__PURE__ */ T({
  __name: "index",
  props: {
    activePath: null,
    routes: null,
    height: null,
    width: null,
    drag: { type: Boolean, default: !0 },
    openPage: null,
    routerViewName: null,
    transition: { type: [Object, Boolean], default: !0 },
    swipeDuration: { default: 360 },
    scrollTime: { default: 0 }
  },
  emits: ["update:activePath"],
  setup(t, { emit: e }) {
    const n = t, s = j({
      scrollDistance: 0,
      index: -1,
      openedIndexList: []
    }), d = mt(() => s.scrollDistance, (l) => {
      if (s.openedIndexList.indexOf(l) === -1) {
        s.openedIndexList.push(l);
        const r = n.routes[l];
        try {
          n.openPage(r, l);
        } catch (g) {
          console.error(g);
        }
      }
    }, (l) => s.openedIndexList.indexOf(l) !== -1, (l) => {
      s.index = l, s.scrollDistance = -s.index * n.width;
      const r = n.routes[l];
      e("update:activePath", r.path);
    });
    A(() => {
      const l = h();
      d.el = l, d.open();
    }), U(() => {
      d.close();
    }), V(() => {
      const l = n.activePath;
      s.index = n.routes.findIndex((N) => N.path === l);
      const r = n.width;
      s.index !== -1 && (s.openedIndexList.push(s.index), s.scrollDistance = -r * s.index);
      const g = r * n.routes.length, x = -r / 3, D = r * (n.routes.length - 1) + r / 3;
      d.columnWidth = r, d.width = g, d.min = x, d.max = D, d.swipeDuration = n.swipeDuration;
    });
    const c = `fox-swiper-navigator-${ct()}`, o = $(() => ({ width: `${n.width}px`, height: `${n.height}px` }));
    let i = null;
    function h() {
      return i || (i = document.querySelector(`.${c}>.fox-swiper-navigator__inner`), i);
    }
    const u = $(() => `${n.width * n.routes.length}px`), f = (l, r) => ({
      style: {
        left: `${n.routes.findIndex((x) => {
          const D = l.path ?? l.name ?? "";
          return x.path == D;
        }) * n.width}px`,
        width: `${n.width}px`
      }
    });
    return (l, r) => {
      const g = b("fox-router-view");
      return y(), M(g, {
        class: R(c),
        style: S(w(o)),
        "view-class": "fox-swiper-navigator__item",
        tag: at,
        "view-tag-props": f,
        multi: !0,
        name: n.routerViewName,
        transition: n.transition,
        "scroll-distance": s.scrollDistance,
        "scroll-time": n.scrollTime,
        width: w(u)
      }, null, 8, ["style", "name", "transition", "scroll-distance", "scroll-time", "width"]);
    };
  }
});
const _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: gt
}, Symbol.toStringTag, { value: "Module" }));
let xt = "fox-";
const wt = [], I = /* @__PURE__ */ Object.assign({ "/src/components/card-navigator/index.vue": k, "/src/components/root-navigator/index.vue": it, "/src/components/swiper-navigator/index.vue": _t }), C = [];
for (const t in I) {
  let e = /src\/components\/(.*)\/index.vue/.exec(t)[1];
  wt.indexOf(e) === -1 && C.push({
    name: e,
    component: I[t].default
  });
}
const yt = {
  install(t) {
    C.forEach((e) => {
      t.component(`${xt}${e.name}`, e.component);
    });
  }
};
export {
  yt as default
};