vue-flip-animation/dist/vue-flip.mjs

# Installation

import { onMounted as $, onUpdated as k, isRef as H, defineComponent as E, ref as F } from "vue-demi";
import { openBlock as A, createElementBlock as D, renderSlot as I } from "vue";
const j = (f) => {
  const {
    el: p,
    isChild: d = !0,
    scrollContent: a = document.documentElement,
    onlyVisible: g = !0
  } = f;
  $(() => {
    m(d);
  }), k(() => {
    m(d);
  });
  const r = {}, n = {
    previous: null,
    rect: null
  };
  function m(t) {
    const e = H(p) ? p.value : p;
    t ? T({
      el: e,
      scrollContent: a,
      onlyVisible: g
    }) : V({ el: e, scrollContent: a });
  }
  const v = (t) => t.distanceLeft === 0 && t.distanceTop === 0 && t.disWidth === 0 && t.disHeight === 0, y = (t, e) => {
    e.animate(
      [
        {
          transform: `translate(${t.distanceLeft}px,${t.distanceTop}px) `
        },
        {
          transform: "none"
        }
      ],
      { duration: 500 }
    );
  };
  function C(t = document.documentElement) {
    n.rect && (n.previous = n.rect), n.rect = t.getBoundingClientRect();
  }
  const L = (t, e) => e ? n.rect || n.previous ? !1 : t.top > n.rect.height || t.bottom < 0 || t.left < 0 || t.left > n.rect.width : !0, R = function(t, e) {
    const l = n.previous.top, i = n.rect.top, c = n.previous.left, o = n.rect.left;
    let u = 0, s = 0;
    return l !== i && (u = i - l), c !== o && (s = o - c), {
      distanceLeft: t.left - e.left + s,
      distanceTop: t.top - e.top + u,
      disWidth: t.width / e.width,
      disHeight: t.height / e.height
    };
  };
  function T(t) {
    const { el: e, scrollContent: l, onlyVisible: i } = t, c = Array.prototype.slice.call(e.children);
    let o = !0;
    for (let u = 0; u < c.length; u++) {
      const s = c[u], h = s.dataset.key, x = s.getBoundingClientRect();
      if (o && C(l), !L(x, i) && h in r) {
        const _ = r[h], b = s.getBoundingClientRect(), B = R(_, b);
        v(B) || y(B, s);
      }
      o && (o = !1), r[h] = x;
    }
  }
  function V(t) {
    const { el: e, scrollContent: l } = t, i = e.getBoundingClientRect();
    if (C(l), r.previousRect) {
      const c = r.previousRect, o = R(c, i);
      v(o) || y(o, e);
    }
    r.previousRect = i;
  }
}, W = E({
  name: "vueFlip",
  props: {
    isChild: {
      type: Boolean,
      default: !0
    },
    scrollContent: {
      type: HTMLElement,
      default: document.documentElement
    },
    onlyVisible: {
      type: Boolean,
      default: !0
    }
  },
  setup(f) {
    const p = F(), { isChild: d, scrollContent: a, onlyVisible: g } = f;
    $(() => {
      debugger;
      m(d);
    }), k(() => {
      m(d);
    });
    const r = {}, n = {
      previous: null,
      rect: null
    };
    function m(t) {
      const e = p.value;
      t ? T({
        el: e,
        scrollContent: a,
        onlyVisible: g
      }) : V({ el: e, scrollContent: a });
    }
    const v = (t) => t.distanceLeft === 0 && t.distanceTop === 0 && t.disWidth === 0 && t.disHeight === 0, y = (t, e) => {
      e.animate(
        [
          {
            transform: `translate(${t.distanceLeft}px,${t.distanceTop}px) `
          },
          {
            transform: "none"
          }
        ],
        { duration: 500 }
      );
    };
    function C(t = document.documentElement) {
      n.rect && (n.previous = n.rect), n.rect = t.getBoundingClientRect();
    }
    const L = (t, e) => e ? n.rect || n.previous ? !1 : t.top > n.rect.height || t.bottom < 0 || t.left < 0 || t.left > n.rect.width : !0, R = function(t, e) {
      const l = n.previous.top, i = n.rect.top, c = n.previous.left, o = n.rect.left;
      let u = 0, s = 0;
      return l !== i && (u = i - l), c !== o && (s = o - c), {
        distanceLeft: t.left - e.left + s,
        distanceTop: t.top - e.top + u,
        disWidth: t.width / e.width,
        disHeight: t.height / e.height
      };
    };
    function T(t) {
      const { el: e, scrollContent: l, onlyVisible: i } = t, c = Array.prototype.slice.call(e.children);
      let o = !0;
      for (let u = 0; u < c.length; u++) {
        const s = c[u], h = s.dataset.key, x = s.getBoundingClientRect();
        if (o && C(l), !L(x, i) && h in r) {
          const _ = r[h], b = s.getBoundingClientRect(), B = R(_, b);
          v(B) || y(B, s);
        }
        o && (o = !1), r[h] = x;
      }
    }
    function V(t) {
      const { el: e, scrollContent: l } = t, i = e.getBoundingClientRect();
      if (C(l), r.previousRect) {
        const c = r.previousRect, o = R(c, i);
        v(o) || y(o, e);
      }
      r.previousRect = i;
    }
    return {
      flipRef: p
    };
  }
}), M = (f, p) => {
  const d = f.__vccOpts || f;
  for (const [a, g] of p)
    d[a] = g;
  return d;
}, Z = { ref: "flipRef" };
function O(f, p, d, a, g, r) {
  return A(), D("div", Z, [
    I(f.$slots, "default")
  ], 512);
}
const w = /* @__PURE__ */ M(W, [["render", O]]), q = {
  install(f) {
    f.component(w.name, w);
  }
};
export {
  q as default,
  j as useFlip,
  w as vueFlip
};