@maas/vue-equipment 1.0.0-beta.59 → 1.0.0-beta.60

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.58",
+  "version": "1.0.0-beta.59",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -32,7 +32,7 @@ const functions$1 = [
 	{
 		name: "MagicDrawer",
 		"package": "plugins",
-		lastUpdated: 1716533739000,
+		lastUpdated: 1780407194000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicDrawer/",
 		description: "MagicDrawer is a flexible"
 	},
@@ -67,7 +67,7 @@ const functions$1 = [
 	{
 		name: "MagicModal",
 		"package": "plugins",
-		lastUpdated: 1716533739000,
+		lastUpdated: 1780410511000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicModal/",
 		description: "MagicModal is a flexible"
 	},

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

@@ -1,7 +1,7 @@
 <template>
   <magic-drawer-provider :id="id" :options="options">
     <magic-drawer-teleport>
-      <magic-drawer-backdrop v-if="showBackdrop">
+      <magic-drawer-backdrop>
         <slot name="backdrop" />
       </magic-drawer-backdrop>
       <magic-drawer-content v-bind="$attrs">
@@ -12,8 +12,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
-import { useDrawerState } from "../composables/private/useDrawerState";
+import {} from "vue";
 import MagicDrawerProvider from "./MagicDrawerProvider.vue";
 import MagicDrawerTeleport from "./MagicDrawerTeleport.vue";
 import MagicDrawerBackdrop from "./MagicDrawerBackdrop.vue";
@@ -25,8 +24,4 @@ const { options, id } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
-const slots = useSlots();
-const { initializeState } = useDrawerState(id);
-const state = initializeState(options);
-const showBackdrop = computed(() => state.options?.backdrop || !!slots.backdrop);
 </script>

package/dist/plugins/MagicDrawer/src/components/MagicDrawerBackdrop.d.vue.ts

@@ -1,10 +1,13 @@
 import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
 import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+interface MagicDrawerBackdropProps {
+    transition?: string;
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<MagicDrawerBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/plugins/MagicDrawer/src/components/MagicDrawerBackdrop.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition :name="state.options.transition.backdrop">
+  <transition :name="transitionName">
     <div
       v-show="active.innerActive"
       class="magic-drawer-backdrop"
@@ -12,7 +12,7 @@
 </template>
 
 <script setup>
-import { inject } from "vue";
+import { inject, computed } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -21,6 +21,9 @@ import { useDrawerState } from "../composables/private/useDrawerState";
 import { MagicDrawerInstanceId, MagicDrawerActiveKey } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+const { transition } = defineProps({
+  transition: { type: String, required: false }
+});
 const instanceId = inject(MagicDrawerInstanceId, void 0);
 const active = inject(MagicDrawerActiveKey, {
   wrapperActive: false,
@@ -36,6 +39,9 @@ magicError.assert(instanceId, {
 });
 const { initializeState } = useDrawerState(instanceId ?? "");
 const state = initializeState();
+const transitionName = computed(
+  () => transition ?? state.options.transition.backdrop
+);
 const { close } = useMagicDrawer(instanceId ?? "");
 function guardedClose() {
   if (!state.options.disabled) {

package/dist/plugins/MagicDrawer/src/components/MagicDrawerBackdrop.vue.d.ts

@@ -1,10 +1,13 @@
 import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
 import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+interface MagicDrawerBackdropProps {
+    transition?: string;
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<MagicDrawerBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,7 +2,6 @@ import { type Options as FocusTrapOptions } from 'focus-trap';
 export type DrawerSnapPoint = number | `${number}px`;
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
-    backdrop?: boolean;
     tag?: 'dialog' | 'div';
     focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -1,6 +1,5 @@
 const defaultOptions = {
   position: "bottom",
-  backdrop: true,
   tag: "dialog",
   focusTrap: {
     initialFocus: false,

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

@@ -1,7 +1,7 @@
 <template>
   <magic-modal-provider :id="id" :options="options">
     <magic-modal-teleport>
-      <magic-modal-backdrop v-if="showBackdrop">
+      <magic-modal-backdrop>
         <slot name="backdrop" />
       </magic-modal-backdrop>
       <magic-modal-content v-bind="$attrs">
@@ -12,8 +12,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
-import { useModalState } from "../composables/private/useModalState";
+import {} from "vue";
 import MagicModalProvider from "./MagicModalProvider.vue";
 import MagicModalTeleport from "./MagicModalTeleport.vue";
 import MagicModalBackdrop from "./MagicModalBackdrop.vue";
@@ -25,8 +24,4 @@ const { options, id } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
-const slots = useSlots();
-const { initializeState } = useModalState(id);
-const state = initializeState(options);
-const showBackdrop = computed(() => state.options?.backdrop || !!slots.backdrop);
 </script>

package/dist/plugins/MagicModal/src/components/MagicModalBackdrop.d.vue.ts

@@ -1,10 +1,13 @@
 import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
 import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+interface MagicModalBackdropProps {
+    transition?: string;
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<MagicModalBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <transition :name="state.options.transition.backdrop">
+  <transition :name="transitionName">
     <div
       v-show="active.innerActive"
       class="magic-modal-backdrop"
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { inject } from "vue";
+import { inject, computed } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -20,6 +20,9 @@ import { useModalState } from "../composables/private/useModalState";
 import { MagicModalInstanceId, MagicModalActiveKey } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+const { transition } = defineProps({
+  transition: { type: String, required: false }
+});
 const instanceId = inject(MagicModalInstanceId, void 0);
 const active = inject(MagicModalActiveKey, {
   wrapperActive: false,
@@ -35,6 +38,9 @@ magicError.assert(instanceId, {
 });
 const { initializeState } = useModalState(instanceId ?? "");
 const state = initializeState();
+const transitionName = computed(
+  () => transition ?? state.options.transition.backdrop
+);
 const { close } = useMagicModal(instanceId ?? "");
 function guardedClose() {
   close();

package/dist/plugins/MagicModal/src/components/MagicModalBackdrop.vue.d.ts

@@ -1,10 +1,13 @@
 import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
 import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
+interface MagicModalBackdropProps {
+    transition?: string;
+}
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<MagicModalBackdropProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalBackdropProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,5 @@
 import { type Options as FocusTrapOptions } from 'focus-trap';
 export interface MagicModalOptions {
-    backdrop?: boolean;
     tag?: 'dialog' | 'div';
     focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {

package/dist/plugins/MagicModal/src/utils/defaultOptions.mjs

@@ -1,5 +1,4 @@
 const defaultOptions = {
-  backdrop: true,
   tag: "dialog",
   focusTrap: {
     initialFocus: false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "contributors": [
     {
       "name": "Robin Scholz",