motion-plus-vue/dist/es/components/Cursor/Cursor.vue.mjs

Motion Plus Vue

import { defineComponent as R, toRefs as V, computed as l, useSlots as X, createBlock as z, openBlock as P, Teleport as Y, createCommentVNode as A, unref as t, withCtx as u, createVNode as d, mergeProps as H, renderSlot as L } from "vue";
import { useReducedMotion as N, useSpring as T, LayoutGroup as E, MotionConfig as F, motion as G, AnimatePresence as q } from "motion-v";
import { useCursorStyles as D } from "./use-cursor-styles.mjs";
import { usePointerPosition as J } from "./hooks/use-pointer-position.mjs";
import { useOffset as K } from "./hooks/use-offset.mjs";
import { useCursorState as Q } from "./hooks/use-cursor-state/index.mjs";
import { useCursorIsInView as U } from "./hooks/use-cursor-in-view.mjs";
import { defaultFollowSpring as W, topLeftPoint as x, centerPoint as Z, defaults as M, skipTransition as _, defaultTransition as ee } from "./config.mjs";
import { getCursorSize as te } from "./get-cursor-size.mjs";
import { useHasPointerMoved as oe } from "./hooks/use-has-pointer-moved.mjs";
import { useMagneticTarget as ne } from "./magnetic/use-magnetic-target.mjs";
const ye = /* @__PURE__ */ R({
  name: "Cursor",
  inheritAttrs: !1,
  __name: "Cursor",
  props: {
    follow: { type: Boolean, default: !1 },
    center: { default: ({ follow: r }) => r ? x : Z },
    offset: { default: () => x },
    spring: { type: [Boolean, Object], default: ({ follow: r }) => r ? W : !1 },
    matchTextSize: { type: Boolean, default: !0 },
    magnetic: { type: [Boolean, Object], default: !1 },
    transition: {},
    variants: {},
    style: {},
    show: { type: Boolean, default: !0 }
  },
  setup(r) {
    const n = r, { offset: O, magnetic: g } = V(n), y = N();
    D(() => !y.value && !n.follow);
    const p = J(), f = K(p, O), v = T(f.x, n.spring || void 0), h = T(f.y, n.spring || void 0), m = l(() => typeof n.magnetic == "object" ? { ...M.magneticOptions, ...n.magnetic } : M.magneticOptions);
    function w() {
      const e = f.x.on("change", (o) => {
        v.jump(o), e();
      }), a = f.y.on("change", (o) => {
        h.jump(o), a();
      });
    }
    const i = Q(), b = U(w), S = ne(
      l(() => n.spring ? { x: v, y: h } : p),
      l(() => !!g.value),
      i,
      l(() => m.value && m.value.snap)
    ), c = X(), C = l(() => {
      var o, s;
      const e = (s = (o = c.default) == null ? void 0 : o.call(c)) == null ? void 0 : s.filter(
        (B) => B.type !== Symbol.for("v-cmt")
      );
      return te({
        type: i.value.type,
        state: i.value,
        hasChildren: !!(e != null && e.length),
        isMagnetic: !!n.magnetic,
        style: n.style,
        magneticOptions: m.value,
        matchTextSize: n.matchTextSize
      });
    }), j = oe(p, w);
    function $(e) {
      return (a, o) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${o}`;
    }
    function k() {
      const { follow: e, center: a, offset: o, spring: s, matchTextSize: B, magnetic: ie, ...I } = n;
      return I;
    }
    return (e, a) => (P(), z(Y, { to: "body" }, [
      t(j) ? (P(), z(t(E), { key: 0 }, {
        default: u(() => [
          d(t(F), {
            transition: t(y) ? t(_) : e.transition || t(ee)
          }, {
            default: u(() => {
              var o, s;
              return [
                d(t(G).div, H({
                  layout: "",
                  "data-motion-cursor": e.follow ? "follow" : "pointer",
                  "data-framer-portal-id": "motion-cursor",
                  initial: "exit",
                  exit: "exit"
                }, {
                  ...e.$attrs,
                  ...k()
                }, {
                  variants: {
                    pressed: e.follow ? {} : { scale: 0.9 },
                    ...e.variants,
                    default: {
                      opacity: 1,
                      scale: 1,
                      ...(o = e.variants) == null ? void 0 : o.default
                    },
                    exit: { opacity: 0, scale: 0, ...(s = e.variants) == null ? void 0 : s.exit }
                  },
                  animate: [
                    "default",
                    t(i).type,
                    t(g) && t(i).targetBoundingBox ? "magnetic" : "",
                    !t(b) || !e.show ? "exit" : t(i).isPressed ? "pressed" : ""
                  ],
                  "transform-template": $(e.center),
                  style: {
                    borderRadius: e.follow ? 0 : 20,
                    zIndex: e.follow ? 99998 : 99999,
                    willChange: "transform",
                    contain: "layout",
                    originX: e.center.x,
                    originY: e.center.y,
                    ...e.style,
                    width: C.value.width,
                    height: C.value.height,
                    x: t(S).x,
                    y: t(S).y,
                    top: 0,
                    left: 0,
                    position: "fixed",
                    pointerEvents: "none"
                  }
                }), {
                  default: u(() => [
                    d(t(q), null, {
                      default: u(() => [
                        L(e.$slots, "default")
                      ]),
                      _: 3
                    })
                  ]),
                  _: 3
                }, 16, ["data-motion-cursor", "variants", "animate", "transform-template", "style"])
              ];
            }),
            _: 3
          }, 8, ["transition"])
        ]),
        _: 3
      })) : A("", !0)
    ]));
  }
});
export {
  ye as default
};