@maas/vue-equipment 0.2.0 → 0.3.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.1.3"
+  "version": "0.3.0"
 }

package/dist/nuxt/module.mjs

@@ -18,7 +18,7 @@ const functions = [
 	{
 		name: "MagicModal",
 		"package": "plugins",
-		lastUpdated: 1689600576000,
+		lastUpdated: 1691152994000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicModal/",
 		description: "modal"
 	},
@@ -32,7 +32,7 @@ const functions = [
 	{
 		name: "MagicScroll",
 		"package": "plugins",
-		lastUpdated: 1689669455000,
+		lastUpdated: 1691152994000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicScroll/",
 		description: "scroll"
 	},

package/dist/plugins/MagicModal/index.d.ts

@@ -1,4 +1,5 @@
 import { useModalApi } from './src/composables/useModalApi.js';
+import { useModalEmitter } from './src/composables/useModalEmitter.js';
 import type { Plugin } from 'vue';
 declare const MagicModal: Plugin;
-export { MagicModal, useModalApi };
+export { MagicModal, useModalEmitter, useModalApi };

package/dist/plugins/MagicModal/index.mjs

@@ -1,8 +1,9 @@
 import MagicModalComponent from "./src/components/MagicModal.vue";
 import { useModalApi } from "./src/composables/useModalApi.mjs";
+import { useModalEmitter } from "./src/composables/useModalEmitter.mjs";
 const MagicModal = {
   install: (app) => {
     app.component("MagicModal", MagicModalComponent);
   }
 };
-export { MagicModal, useModalApi };
+export { MagicModal, useModalEmitter, useModalApi };

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -8,6 +8,7 @@
       <dialog
         ref="modal"
         class="magic-modal"
+        :id="toValue(id)"
         @click.self="close"
         aria-modal="true"
       >
@@ -23,7 +24,9 @@
         </transition>
         <transition
           :name="mappedOptions.transitions?.content"
+          @before-leave="onBeforeLeave"
           @after-leave="onAfterLeave"
+          @before-enter="onBeforeEnter"
           @after-enter="onAfterEnter"
         >
           <div
@@ -49,7 +52,9 @@
 import { ref, watch, nextTick } from 'vue'
 import { useModalApi } from './../composables/useModalApi'
 import { onKeyStroke } from '@vueuse/core'
+import { toValue } from '@vueuse/shared'
 import { defaultOptions } from './../utils/defaultOptions'
+import { useModalEmitter } from './../composables/useModalEmitter'
 
 import type { MaybeRef } from '@vueuse/core'
 import type { DefaultOptions } from './../types/index'
@@ -102,6 +107,10 @@ function onClose() {
 }
 
 // Transition Callbacks
+function onBeforeEnter() {
+  useModalEmitter().emit('beforeEnter', toValue(props.id))
+}
+
 async function onAfterEnter() {
   if (mappedOptions.scrollLock) {
     if (mappedOptions.scrollLockPadding) {
@@ -115,6 +124,12 @@ async function onAfterEnter() {
     await nextTick()
     trapFocus()
   }
+
+  useModalEmitter().emit('afterEnter', toValue(props.id))
+}
+
+function onBeforeLeave() {
+  useModalEmitter().emit('beforeLeave', toValue(props.id))
 }
 
 function onAfterLeave() {
@@ -130,6 +145,7 @@ function onAfterLeave() {
   }
 
   wrapperActive.value = false
+  useModalEmitter().emit('afterLeave', toValue(props.id))
 }
 
 onKeyStroke('Escape', (e) => {
@@ -147,9 +163,10 @@ watch(isActive, async (value) => {
 </script>
 
 <style lang="postcss">
-* {
-  transition-duration: 0s;
-  animation-duration: 0s;
+:root {
+  --magic-modal-z-index: 999;
+  --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
+  --magic-modal-backdrop-filter: unset;
 }
 
 .magic-modal {
@@ -160,13 +177,18 @@ watch(isActive, async (value) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 999;
+  z-index: var(--magic-modal-z-index);
   background: transparent;
   color: inherit;
   padding: 0;
   border: none;
 }
 
+.magic-modal * {
+  transition-duration: 0s;
+  animation-duration: 0s;
+}
+
 .magic-modal__content {
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
@@ -186,7 +208,8 @@ watch(isActive, async (value) => {
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--magic-modal-backdrop-color);
+  backdrop-filter: var(--magic-modal-backdrop-filter);
   z-index: -1;
 }
 

package/dist/plugins/MagicModal/src/composables/useModalEmitter.d.ts

@@ -0,0 +1,15 @@
+import type { ModalEvents } from '../types.js';
+export declare function useModalEmitter(): {
+    on: {
+        <Key extends keyof ModalEvents>(type: Key, handler: import("mitt").Handler<ModalEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<ModalEvents>): void;
+    };
+    off: {
+        <Key_1 extends keyof ModalEvents>(type: Key_1, handler?: import("mitt").Handler<ModalEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<ModalEvents>): void;
+    };
+    emit: {
+        <Key_2 extends keyof ModalEvents>(type: Key_2, event: ModalEvents[Key_2]): void;
+        <Key_3 extends keyof ModalEvents>(type: undefined extends ModalEvents[Key_3] ? Key_3 : never): void;
+    };
+};

package/dist/plugins/{MagicScroll/src/composables/useEmitter.mjs → MagicModal/src/composables/useModalEmitter.mjs}

@@ -1,6 +1,6 @@
 import mitt from "mitt";
 const emitter = mitt();
-export function useEmitter() {
+export function useModalEmitter() {
   return {
     on: emitter.on,
     off: emitter.off,

package/dist/plugins/MagicModal/src/types/index.d.ts

@@ -12,4 +12,10 @@ type DefaultOptions = {
         backdrop?: string;
     };
 };
-export type { DefaultOptions };
+type ModalEvents = {
+    afterEnter: string;
+    afterLeave: string;
+    beforeEnter: string;
+    beforeLeave: string;
+};
+export type { DefaultOptions, ModalEvents };

package/dist/plugins/MagicScroll/index.d.ts

@@ -1,7 +1,7 @@
-import { useEmitter } from './src/composables/useEmitter.js';
+import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
 import { useProgress } from './src/composables/useProgress.js';
 import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
 import type { Plugin } from 'vue';
 export type * from './src/types';
 declare const MagicScroll: Plugin;
-export { MagicScroll, useEmitter, useProgress, useCollisionDetect };
+export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };

package/dist/plugins/MagicScroll/index.mjs

@@ -3,7 +3,7 @@ import MagicScrollScene from "./src/components/MagicScrollScene.vue";
 import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
 import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
 import { magicScrollStore } from "./src/store/index.mjs";
-import { useEmitter } from "./src/composables/useEmitter.mjs";
+import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
 import { useProgress } from "./src/composables/useProgress.mjs";
 import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
 import { StoreKey } from "./src/types/index.mjs";
@@ -16,4 +16,4 @@ const MagicScroll = {
     app.provide(StoreKey, magicScrollStore);
   }
 };
-export { MagicScroll, useEmitter, useProgress, useCollisionDetect };
+export { MagicScroll, useCollisionEmitter, useProgress, useCollisionDetect };

package/dist/plugins/MagicScroll/src/composables/useCollisionDetect.mjs

@@ -1,6 +1,6 @@
 import { ref, watch, unref, computed } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
-import { useEmitter } from "./useEmitter.mjs";
+import { useCollisionEmitter } from "./useCollisionEmitter.mjs";
 export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntries, parent) {
   const scrolled = ref(0);
   const intersecting = ref();
@@ -85,7 +85,7 @@ export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntri
       return;
     if (dir === "down" && boundingRect[pos] <= offset || dir === "up" && boundingRect[pos] >= offset) {
       entry.alerted[dir][pos] = true;
-      useEmitter().emit("magic-scroll:collision", {
+      useCollisionEmitter().emit("collision", {
         dir,
         pos,
         el: entry.element,

package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.d.ts

@@ -0,0 +1,15 @@
+import type { CollisionEvents } from '../types.js';
+export declare function useCollisionEmitter(): {
+    on: {
+        <Key extends "collision">(type: Key, handler: import("mitt").Handler<CollisionEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
+    };
+    off: {
+        <Key_1 extends "collision">(type: Key_1, handler?: import("mitt").Handler<CollisionEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
+    };
+    emit: {
+        <Key_2 extends "collision">(type: Key_2, event: CollisionEvents[Key_2]): void;
+        <Key_3 extends "collision">(type: undefined extends CollisionEvents[Key_3] ? Key_3 : never): void;
+    };
+};

package/dist/plugins/MagicScroll/src/composables/useCollisionEmitter.mjs

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useCollisionEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

package/dist/plugins/MagicScroll/src/types/index.d.ts

@@ -3,7 +3,7 @@ type AlertPositions = {
     bottom: boolean;
 };
 type CollisionEvents = {
-    'magic-scroll:collision': {
+    collision: {
         dir: 'up' | 'down';
         pos: 'top' | 'bottom';
         el: HTMLElement;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",
@@ -87,18 +87,17 @@
     }
   },
   "scripts": {
+    "dev": "nr dev:docs",
+    "dev:docs": "turbo run t:docs:dev && vitepress dev packages",
+    "dev:nuxt": "turbo run dev --filter=nuxt",
     "build": "turbo run build",
     "build:types": "turbo run build:types",
-    "dev": "turbo run docs:dev && nr docs:dev",
-    "dev:nuxt": "turbo run dev --filter=nuxt",
-    "docs:build": "turbo run docs:build && vitepress build packages",
-    "docs:dev": "vitepress dev packages",
+    "docs:build": "turbo run t:docs:build && vitepress build packages",
     "docs:preview": "vitepress preview packages",
     "metadata:update": "nr -C packages/metadata update",
-    "module:dev": "cd packages/nuxt && nr dev",
     "test": "echo \"Error: no test specified\" && exit 1",
     "uninstall": "nlx rimraf --glob ./**/node_modules --glob ./**/pnpm-lock.yaml",
-    "release": "turbo run release-it && release-it"
+    "release": "turbo run t:release && release-it"
   },
   "types": "./dist/nuxt/types.d.ts",
   "volta": {

package/dist/plugins/MagicScroll/src/composables/useEmitter.d.ts

@@ -1,15 +0,0 @@
-import type { CollisionEvents } from '../types.js';
-export declare function useEmitter(): {
-    on: {
-        <Key extends "magic-scroll:collision">(type: Key, handler: import("mitt").Handler<CollisionEvents[Key]>): void;
-        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
-    };
-    off: {
-        <Key_1 extends "magic-scroll:collision">(type: Key_1, handler?: import("mitt").Handler<CollisionEvents[Key_1]> | undefined): void;
-        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
-    };
-    emit: {
-        <Key_2 extends "magic-scroll:collision">(type: Key_2, event: CollisionEvents[Key_2]): void;
-        <Key_3 extends "magic-scroll:collision">(type: undefined extends CollisionEvents[Key_3] ? Key_3 : never): void;
-    };
-};