maz-ui/dist/components/MazCardSpotlight.js

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

import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, vShow } from "vue";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazCardSpotlight.B7lFD7Pi.css';const _hoisted_1 = { class: "inner" }, _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MazCardSpotlight",
  props: {
    color: { default: "primary" },
    elevation: { type: Boolean, default: !1 },
    padding: { type: Boolean, default: !0 },
    contentClass: { default: () => {
    } },
    contentStyle: { type: [Boolean, null, String, Object, Array], default: () => {
    } },
    innerOpacity: { default: 0.95 }
  },
  setup(__props) {
    const blobElement = ref(), fakeblobElement = ref(), blobVisible = ref(!1);
    function animateBlob({ clientX, clientY }) {
      blobVisible.value = !0;
      const rec = fakeblobElement.value?.getBoundingClientRect();
      rec && blobElement.value?.animate?.(
        [
          {
            transform: `translate(${clientX - rec.left - rec.width / 2}px,${clientY - rec.top - rec.height / 2}px)`
          }
        ],
        {
          duration: 300,
          fill: "forwards"
        }
      );
    }
    const alphaColor = computed(() => `hsl(var(--maz-${__props.color}) / 60%)`), alphaColor20 = computed(() => `hsl(var(--maz-${__props.color}) / 20%)`);
    return onMounted(() => {
      globalThis.addEventListener("mousemove", animateBlob);
    }), onUnmounted(() => {
      globalThis.removeEventListener("mousemove", animateBlob);
    }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
      class: normalizeClass(["m-card-spotlight m-reset-css", { "maz-shadow-elevation maz-drop-shadow-md": _ctx.elevation }]),
      style: normalizeStyle({ backgroundColor: alphaColor20.value, "--inner-opacity": _ctx.innerOpacity })
    }, [
      createElementVNode("div", _hoisted_1, [
        createElementVNode("div", {
          class: normalizeClass(["content", [{ "maz-p-4": _ctx.padding }, _ctx.contentClass]]),
          style: normalizeStyle(_ctx.contentStyle)
        }, [
          renderSlot(_ctx.$slots, "default", {}, void 0, !0)
        ], 6)
      ]),
      withDirectives(createElementVNode("div", {
        ref_key: "blobElement",
        ref: blobElement,
        class: "blob",
        style: normalizeStyle({ backgroundColor: alphaColor.value })
      }, null, 4), [
        [vShow, blobVisible.value]
      ]),
      withDirectives(createElementVNode("div", {
        ref_key: "fakeblobElement",
        ref: fakeblobElement,
        class: "fakeblob"
      }, null, 512), [
        [vShow, blobVisible.value]
      ])
    ], 6));
  }
}), MazCardSpotlight = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc3305c0"]]);
export {
  MazCardSpotlight as default
};