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

package/dist/assets/MazCardSpotlight.BNlyqSAj.css

@@ -0,0 +1 @@
+.m-card-spotlight[data-v-cdc7c952]{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-cdc7c952]{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-cdc7c952]: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-cdc7c952]{z-index:2;width:100%;height:100%;position:relative}.m-card-spotlight .blob[data-v-cdc7c952]{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:opacity .15s ease-out;position:absolute;top:0;left:0}

package/dist/assets/{MazDropdown.D90GEKDB.css → MazDropdown.uTis3caD.css}

@@ -1 +1 @@
-.m-dropdown{vertical-align:top;flex-direction:column;align-items:flex-start;display:inline-flex;position:relative}.m-dropdown__wrapper{border-radius:var(--maz-radius);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%}.m-dropdown__wrapper:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__wrapper:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropdown__icon{transition-property:transform;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__icon.--open{--maz-tw-rotate:180deg;transform:translate(var(--maz-tw-translate-x),var(--maz-tw-translate-y))rotate(var(--maz-tw-rotate))skewX(var(--maz-tw-skew-x))skewY(var(--maz-tw-skew-y))scaleX(var(--maz-tw-scale-x))scaleY(var(--maz-tw-scale-y))}.m-dropdown__menu{flex-direction:column;gap:.125rem;min-width:max-content;min-height:max-content;padding:.5rem;display:flex;overflow:auto}.m-dropdown__menu .menuitem{cursor:pointer;white-space:nowrap;border-radius:var(--maz-radius);text-align:start;outline-offset:2px;outline:2px solid #0000;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__menu .menuitem:hover,.m-dropdown__menu .menuitem:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem:hover:is([class~=dark] *),.m-dropdown__menu .menuitem:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button:disabled{cursor:not-allowed;opacity:.5}.m-dropdown__menu .menuitem.menuitem__button.--primary{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--primary:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info{--maz-tw-text-opacity:1;color:hsl(var(--maz-info)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-info-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--warning,.m-dropdown__menu .menuitem.menuitem__button.--warning:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--destructive,.m-dropdown__menu .menuitem.menuitem__button.--destructive:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--success,.m-dropdown__menu .menuitem.menuitem__button.--success:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-success-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-600)/var(--maz-tw-text-opacity,1))}
+.m-dropdown{vertical-align:top;flex-direction:column;align-items:flex-start;display:inline-flex;position:relative}.m-dropdown__wrapper{border-radius:var(--maz-radius);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%}.m-dropdown__wrapper:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__wrapper:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropdown__icon{transition-property:transform;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__icon.--open{--maz-tw-rotate:180deg;transform:translate(var(--maz-tw-translate-x),var(--maz-tw-translate-y))rotate(var(--maz-tw-rotate))skewX(var(--maz-tw-skew-x))skewY(var(--maz-tw-skew-y))scaleX(var(--maz-tw-scale-x))scaleY(var(--maz-tw-scale-y))}.m-dropdown__menu{flex-direction:column;gap:.125rem;min-width:max-content;min-height:max-content;padding:.5rem;display:flex;overflow:auto}.m-dropdown__menu .menuitem{cursor:pointer;white-space:nowrap;border-radius:var(--maz-radius);text-align:start;outline-offset:2px;outline:2px solid #0000;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__menu .menuitem:hover,.m-dropdown__menu .menuitem:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem:hover:is([class~=dark] *),.m-dropdown__menu .menuitem:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button:disabled{cursor:not-allowed;opacity:.5}.m-dropdown__menu .menuitem.menuitem__button.--primary{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--primary:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info{--maz-tw-text-opacity:1;color:hsl(var(--maz-info)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-info-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--warning,.m-dropdown__menu .menuitem.menuitem__button.--warning:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--destructive,.m-dropdown__menu .menuitem.menuitem__button.--destructive:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--success,.m-dropdown__menu .menuitem.menuitem__button.--success:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-success-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-600)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--accent{--maz-tw-text-opacity:1;color:hsl(var(--maz-accent)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--accent:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-accent-600)/var(--maz-tw-text-opacity,1))}

package/dist/chunks/{MazDropdown.vue_vue_type_style_index_0_lang.Cym3Pk2B.js → MazDropdown.vue_vue_type_style_index_0_lang.BK7LxJXG.js}

@@ -4,7 +4,7 @@ import { useTranslations } from "@maz-ui/translations";
 import { i as isClient } from "./isClient.WI4oSt66.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import MazPopover from "../components/MazPopover.js";
-import '../assets/MazDropdown.D90GEKDB.css';const _hoisted_1 = ["id", "aria-expanded"], _hoisted_2 = ["id"], _hoisted_3 = ["id"], _hoisted_4 = ["onClick", "onKeypress"], _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazDropdown.uTis3caD.css';const _hoisted_1 = ["id", "aria-expanded"], _hoisted_2 = ["id"], _hoisted_3 = ["id"], _hoisted_4 = ["onClick", "onKeypress"], _sfc_main = /* @__PURE__ */ defineComponent({
   inheritAttrs: !1,
   __name: "MazDropdown",
   props: /* @__PURE__ */ mergeModels({

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.BNlyqSAj.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-cdc7c952"]]);
 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/components/MazDropdown.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.Cym3Pk2B.js";
+import { _ as _sfc_main } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.BK7LxJXG.js";
 export {
   _sfc_main as default
 };

package/dist/components/index.js

@@ -18,7 +18,7 @@ import { M } from "../chunks/MazDatePicker.D0Xw4RhE.js";
 import { default as default17 } from "./MazDialog.js";
 import { _ as _2, u } from "../chunks/MazDialogConfirm.vue_vue_type_script_setup_true_lang.BaOg5MoP.js";
 import { default as default18 } from "./MazDrawer.js";
-import { _ as _3 } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.Cym3Pk2B.js";
+import { _ as _3 } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.BK7LxJXG.js";
 import { default as default19 } from "./MazDropzone.js";
 import { default as default20 } from "./MazExpandAnimation.js";
 import { default as default21 } from "./MazFullscreenLoader.js";

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.3",
   "description": "A standalone components library for Vue.Js 3 & Nuxt.Js 3",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -178,10 +178,10 @@
     "libphonenumber-js": "^1.12.33",
     "valibot": "^1.2.0",
     "vue-chartjs": "^5.3.3",
+    "@maz-ui/themes": "4.3.0",
     "@maz-ui/icons": "4.3.0",
     "@maz-ui/cli": "4.3.4-beta.0",
     "@maz-ui/utils": "4.3.0",
-    "@maz-ui/themes": "4.3.0",
     "@maz-ui/translations": "4.3.0"
   },
   "devDependencies": {
@@ -217,8 +217,8 @@
     "vue": "^3.5.26",
     "vue-router": "^4.6.4",
     "vue-tsc": "^3.2.1",
-    "@maz-ui/eslint-config": "4.3.2",
-    "@maz-ui/node": "4.3.4-beta.0"
+    "@maz-ui/node": "4.3.4-beta.0",
+    "@maz-ui/eslint-config": "4.3.2"
   },
   "lint-staged": {
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix",

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}