maz-ui 4.3.4-beta.1 → 4.3.4-beta.2

package/dist/assets/MazCardSpotlight.B-P62Hj-.css

@@ -0,0 +1 @@
+.m-card-spotlight[data-v-97a73cfa]{border-radius:var(--maz-radius);padding:max(var(--maz-border-width),1px);contain:layout style paint;display:inline-flex;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-97a73cfa]{border-radius:calc(var(--maz-radius) - max(var(--maz-border-width),1px));width:100%;height:auto;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-97a73cfa]:before{content:"";z-index:1;--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background)/var(--maz-tw-bg-opacity,1));width:100%;height:100%;opacity:var(--inner-opacity);position:absolute;top:0;left:0}.m-card-spotlight .content[data-v-97a73cfa]{z-index:2;width:100%;height:100%;position:relative}.m-card-spotlight .blob[data-v-97a73cfa]{z-index:0;--maz-tw-blur:blur(40px);filter:var(--maz-tw-blur)var(--maz-tw-brightness)var(--maz-tw-contrast)var(--maz-tw-grayscale)var(--maz-tw-hue-rotate)var(--maz-tw-invert)var(--maz-tw-saturate)var(--maz-tw-sepia)var(--maz-tw-drop-shadow);will-change:transform;border-radius:9999px;width:208px;height:208px;transition:transform .12s cubic-bezier(.4,0,.2,1),opacity .15s ease-out;position:absolute;top:0;left:0}

package/dist/components/MazCardSpotlight.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, vShow } from "vue";
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, vShow } from "vue";
+import { isServer } from "@maz-ui/utils";
 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({
+import '../assets/MazCardSpotlight.B-P62Hj-.css';const _hoisted_1 = { class: "inner" }, _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazCardSpotlight",
   props: {
     color: { default: "primary" },
@@ -13,28 +14,46 @@ import '../assets/MazCardSpotlight.B7lFD7Pi.css';const _hoisted_1 = { class: "in
     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 containerElement = ref(), blobElement = ref(), blobVisible = ref(!1);
+    let rafId = null, isIntersecting = !1, cachedRect = null;
     const alphaColor = computed(() => `hsl(var(--maz-${__props.color}) / 60%)`), alphaColor20 = computed(() => `hsl(var(--maz-${__props.color}) / 20%)`);
+    function updateCachedRect() {
+      containerElement.value && (cachedRect = containerElement.value.getBoundingClientRect());
+    }
+    function updateBlobPosition(x, y) {
+      if (!blobElement.value || !cachedRect)
+        return;
+      const blobWidth = 208, blobHeight = 208, translateX = x - cachedRect.left - blobWidth / 2, translateY = y - cachedRect.top - blobHeight / 2;
+      blobElement.value.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    }
+    function handleMouseMove(event) {
+      !isIntersecting || rafId !== null || (blobVisible.value = !0, rafId = requestAnimationFrame(() => {
+        updateBlobPosition(event.clientX, event.clientY), rafId = null;
+      }));
+    }
+    function stopBlobAnimation() {
+      blobVisible.value = !1, rafId !== null && (cancelAnimationFrame(rafId), rafId = null);
+    }
     return onMounted(() => {
-      globalThis.addEventListener("mousemove", animateBlob);
-    }), onUnmounted(() => {
-      globalThis.removeEventListener("mousemove", animateBlob);
+      if (isServer() || !containerElement.value)
+        return;
+      updateCachedRect();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          isIntersecting = entries[0].isIntersecting, isIntersecting || stopBlobAnimation();
+        },
+        { threshold: 0 }
+      );
+      observer.observe(containerElement.value);
+      const handleScrollResize = () => {
+        updateCachedRect();
+      };
+      globalThis.addEventListener("mousemove", handleMouseMove, { passive: !0 }), globalThis.addEventListener("scroll", handleScrollResize, { passive: !0 }), globalThis.addEventListener("resize", handleScrollResize, { passive: !0 }), onBeforeUnmount(() => {
+        rafId !== null && cancelAnimationFrame(rafId), observer.disconnect(), globalThis.removeEventListener("mousemove", handleMouseMove), globalThis.removeEventListener("scroll", handleScrollResize), globalThis.removeEventListener("resize", handleScrollResize);
+      });
     }), (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      ref_key: "containerElement",
+      ref: containerElement,
       class: normalizeClass(["m-card-spotlight m-reset-css", { "maz-shadow-elevation maz-drop-shadow-md": __props.elevation }]),
       style: normalizeStyle({ backgroundColor: alphaColor20.value, "--inner-opacity": __props.innerOpacity })
     }, [
@@ -53,17 +72,10 @@ import '../assets/MazCardSpotlight.B7lFD7Pi.css';const _hoisted_1 = { class: "in
         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"]]);
+}), MazCardSpotlight = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-97a73cfa"]]);
 export {
   MazCardSpotlight as default
 };

package/dist/components/MazCardSpotlight.vue.d.ts

@@ -38,15 +38,15 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
+        containerElement: HTMLDivElement;
         blobElement: HTMLDivElement;
-        fakeblobElement: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MazCardSpotlightProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazCardSpotlightProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerElement: HTMLDivElement;
     blobElement: HTMLDivElement;
-    fakeblobElement: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/types/components/MazCardSpotlight.vue.d.ts

@@ -38,15 +38,15 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
+        containerElement: HTMLDivElement;
         blobElement: HTMLDivElement;
-        fakeblobElement: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<MazCardSpotlightProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazCardSpotlightProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerElement: HTMLDivElement;
     blobElement: HTMLDivElement;
-    fakeblobElement: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maz-ui",
   "type": "module",
-  "version": "4.3.4-beta.1",
+  "version": "4.3.4-beta.2",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -178,11 +178,11 @@
     "libphonenumber-js": "^1.12.33",
     "valibot": "^1.2.0",
     "vue-chartjs": "^5.3.3",
-    "@maz-ui/icons": "4.3.0",
     "@maz-ui/cli": "4.3.4-beta.0",
-    "@maz-ui/utils": "4.3.0",
+    "@maz-ui/icons": "4.3.0",
     "@maz-ui/themes": "4.3.0",
-    "@maz-ui/translations": "4.3.0"
+    "@maz-ui/translations": "4.3.0",
+    "@maz-ui/utils": "4.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.3",

package/dist/assets/MazCardSpotlight.B7lFD7Pi.css

@@ -1 +0,0 @@
-.m-card-spotlight[data-v-bc3305c0]{border-radius:var(--maz-radius);padding:max(var(--maz-border-width),1px);display:inline-flex;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-bc3305c0]{border-radius:calc(var(--maz-radius) - max(var(--maz-border-width),1px));width:100%;height:auto;position:relative;overflow:hidden}.m-card-spotlight .inner[data-v-bc3305c0]:before{content:"";z-index:1;--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background)/var(--maz-tw-bg-opacity,1));width:100%;height:100%;opacity:var(--inner-opacity);position:absolute;top:0;left:0}.m-card-spotlight .content[data-v-bc3305c0]{z-index:2;width:100%;height:100%;position:relative}.m-card-spotlight .blob[data-v-bc3305c0]{z-index:0;--maz-tw-blur:blur(40px);width:16rem;height:16rem;filter:var(--maz-tw-blur)var(--maz-tw-brightness)var(--maz-tw-contrast)var(--maz-tw-grayscale)var(--maz-tw-hue-rotate)var(--maz-tw-invert)var(--maz-tw-saturate)var(--maz-tw-sepia)var(--maz-tw-drop-shadow);border-radius:9999px;position:absolute;top:0;left:0}.m-card-spotlight .fakeblob[data-v-bc3305c0]{z-index:-1;border-radius:9999px;width:13rem;height:13rem;position:absolute;top:0;left:0}