maz-ui/components/MazCardSpotlight.mjs

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent as _, ref as c, computed as m, onMounted as k, onUnmounted as E, openBlock as w, createElementBlock as z, normalizeClass as v, normalizeStyle as b, createElementVNode as i, renderSlot as B, withDirectives as y, vShow as h } from "vue";
import './assets/MazCardSpotlight.CrcVk5S1.css';const S = { class: "inner" }, $ = /* @__PURE__ */ _({
  __name: "MazCardSpotlight",
  props: {
    color: { default: "primary" },
    noElevation: { type: Boolean, default: !1 },
    padding: { type: Boolean, default: !0 },
    contentClass: { default: void 0 },
    contentStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
    innerOpacity: { default: 0.95 }
  },
  setup(l) {
    const n = l, o = c(), r = c(), t = c(!1);
    function d({ clientX: e, clientY: u }) {
      var p, s, f;
      t.value = !0;
      const a = (p = r.value) == null ? void 0 : p.getBoundingClientRect();
      a && ((f = (s = o.value) == null ? void 0 : s.animate) == null || f.call(
        s,
        [
          {
            transform: `translate(${e - a.left - a.width / 2}px,${u - a.top - a.height / 2}px)`
          }
        ],
        {
          duration: 300,
          fill: "forwards"
        }
      ));
    }
    const g = m(() => `var(--maz-color-${n.color}-alpha)`), C = m(() => `var(--maz-color-${n.color}-alpha-20)`);
    return k(() => {
      window.addEventListener("mousemove", d);
    }), E(() => {
      window.removeEventListener("mousemove", d);
    }), (e, u) => (w(), z(
      "div",
      {
        class: v(["m-card-spotlight m-reset-css", { "maz-elevation": !e.noElevation }]),
        style: b({ backgroundColor: C.value, "--inner-opacity": e.innerOpacity })
      },
      [
        i("div", S, [
          i(
            "div",
            {
              class: v(["content", [{ "maz-p-4": e.padding }, e.contentClass]])
            },
            [
              B(e.$slots, "default", {}, void 0, !0)
            ],
            2
            /* CLASS */
          )
        ]),
        y(i(
          "div",
          {
            ref_key: "blobElement",
            ref: o,
            class: "blob",
            style: b({ backgroundColor: g.value })
          },
          null,
          4
          /* STYLE */
        ), [
          [h, t.value]
        ]),
        y(i(
          "div",
          {
            ref_key: "fakeblobElement",
            ref: r,
            class: "fakeblob"
          },
          null,
          512
          /* NEED_PATCH */
        ), [
          [h, t.value]
        ])
      ],
      6
      /* CLASS, STYLE */
    ));
  }
}), O = (l, n) => {
  const o = l.__vccOpts || l;
  for (const [r, t] of n)
    o[r] = t;
  return o;
}, L = /* @__PURE__ */ O($, [["__scopeId", "data-v-4f773edc"]]);
export {
  L as default
};