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

package/README.md

@@ -17,7 +17,7 @@ For the full documentation visit [vue.equipment](https://vue.equipment). We are
 
 ## 🐛 Found a Bug?
 
-> If you see something that doesn't look right, [submit a bug report](https://github.com/magicasaservice/vue-equipment/issues/new?assignees=&labels=bug%2Cpending+triage&template=bug_report.yml). See it. Say it. Sorted.
+> If you see something that doesn’t look right, [submit a bug report](https://github.com/magicasaservice/vue-equipment/issues/new?assignees=&labels=bug%2Cpending+triage&template=bug_report.yml). See it. Say it. Sorted.
 
 ## 📄 License
 

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -145,8 +145,12 @@ const functions$1 = [
 
 const functions = functions$1;
 functions.map((f) => f.name);
-const plugins = functions.filter((p) => p.package === "plugins");
-const composables = functions.filter((p) => p.package === "composables");
+const plugins = functions.filter(
+  (p) => p.package === "plugins" && !p.internal
+);
+const composables = functions.filter(
+  (p) => p.package === "composables" && !p.internal
+);
 
 const module$1 = defineNuxtModule({
   meta: {

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

@@ -8,6 +8,7 @@ export interface MagicAccordionOptions {
         easing: (t: number) => number;
     };
 }
+export type RequiredMagicAccordionOptions = Required<MagicAccordionOptions>;
 export interface AccordionView {
     id: string;
     active: boolean;

package/dist/plugins/MagicAccordion/src/utils/defaultOptions.d.ts

@@ -1,4 +1,3 @@
-import type { MagicAccordionOptions } from '../types/index.js';
-import { type RequireAll } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAll<MagicAccordionOptions>;
+import type { RequiredMagicAccordionOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicAccordionOptions;
 export { defaultOptions };

package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue

@@ -13,25 +13,16 @@ import { shallowRef, provide, watch } from "vue";
 import { useMagicKeys, usePointer } from "@vueuse/core";
 import { VuePrimitive } from "@maas/vue-primitive";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
-import { createDefu } from "defu";
 import { useCommandState } from "../composables/private/useCommandState";
 import { useMagicCommand } from "../composables/useMagicCommand";
-import { defaultOptions } from "../utils/defaultOptions";
 import { MagicCommandInstanceId, MagicCommandProviderOptions } from "../symbols";
 const { id, options = {} } = defineProps({
   id: { type: null, required: true },
   asChild: { type: Boolean, required: false },
   options: { type: Object, required: false }
 });
-const customDefu = createDefu((obj, key, value) => {
-  if (key === "open" || key === "close" || key === "next" || key === "prev") {
-    obj[key] = value;
-    return true;
-  }
-});
-const mappedOptions = customDefu(options, defaultOptions);
 const { initializeState } = useCommandState(id);
-const state = initializeState(mappedOptions);
+const state = initializeState(options);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
 const { x, y } = usePointer();
@@ -58,8 +49,8 @@ const { logWarning } = useMagicError({
   prefix: "MagicCommand",
   source: "MagicCommandProvider"
 });
-if (mappedOptions.keyListener?.open) {
-  for (const key of mappedOptions.keyListener.open) {
+if (state.options.keyListener?.open) {
+  for (const key of state.options.keyListener.open) {
     const mappedKey = keys[key];
     if (!mappedKey) {
       logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
@@ -72,8 +63,8 @@ if (mappedOptions.keyListener?.open) {
     });
   }
 }
-if (mappedOptions.keyListener?.close) {
-  for (const key of mappedOptions.keyListener.close) {
+if (state.options.keyListener?.close) {
+  for (const key of state.options.keyListener.close) {
     const mappedKey = keys[key];
     if (!mappedKey) {
       logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
@@ -87,7 +78,7 @@ if (mappedOptions.keyListener?.close) {
   }
 }
 provide(MagicCommandInstanceId, id);
-provide(MagicCommandProviderOptions, mappedOptions);
+provide(MagicCommandProviderOptions, state.options);
 </script>
 
 <style>

package/dist/plugins/MagicCommand/src/composables/private/useCommandState.mjs

@@ -1,5 +1,5 @@
 import { reactive, toValue, onScopeDispose } from "vue";
-import { defu } from "defu";
+import { createDefu } from "defu";
 import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
 const getCommandStateStore = createStateStore(
@@ -9,6 +9,12 @@ const getCommandStateStore = createStateStore(
 export function useCommandState(instanceId) {
   const commandStateStore = getCommandStateStore();
   let scopeCounted = false;
+  const customDefu = createDefu((obj, key, value) => {
+    if (key === "open" || key === "close" || key === "next" || key === "prev") {
+      obj[key] = value;
+      return true;
+    }
+  });
   function createState(id) {
     const view = commandStateStore.value.find((state2) => state2.id === id)?.views.findLast((view2) => view2.active)?.id;
     const state = {
@@ -47,7 +53,7 @@ export function useCommandState(instanceId) {
       scopeCounted = true;
     }
     if (options) {
-      const mappedOptions = defu(options, defaultOptions);
+      const mappedOptions = customDefu(options, defaultOptions);
       state.options = mappedOptions;
     }
     return state;

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

@@ -15,7 +15,7 @@ export interface MagicCommandOptions {
     };
     loop?: boolean;
 }
-export type CommandDefaultOptions = RequireAllNested<MagicCommandOptions>;
+export type RequiredMagicCommandOptions = RequireAllNested<MagicCommandOptions>;
 export type Action = 'open' | 'close';
 export type Interaction = 'click' | 'mouseenter';
 export interface CommandItem {

package/dist/plugins/MagicCommand/src/utils/defaultOptions.d.ts

@@ -1,3 +1,3 @@
-import type { CommandDefaultOptions } from '../types/index.js';
-declare const defaultOptions: CommandDefaultOptions;
+import type { RequiredMagicCommandOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicCommandOptions;
 export { defaultOptions };

package/dist/plugins/MagicCookie/src/components/MagicCookieProvider.vue

@@ -6,16 +6,13 @@
 
 <script setup>
 import { provide } from "vue";
-import { defu } from "defu";
 import { useCookieState } from "../composables/private/useCookieState";
-import { defaultOptions } from "../utils/defaultOptions";
 import { MagicCookieInstanceId } from "../symbols";
 const { id, options } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
-const mappedOptions = defu(options, defaultOptions);
 const { initializeState } = useCookieState(id);
-initializeState(mappedOptions);
+initializeState(options);
 provide(MagicCookieInstanceId, id);
 </script>

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

@@ -22,6 +22,7 @@ export interface MagicCookieOptions {
         easing: (t: number) => number;
     };
 }
+export type RequiredMagicCookieOptions = Required<MagicCookieOptions>;
 export interface CookieEvents {
     beforeEnter: string;
     enter: string;

package/dist/plugins/MagicCookie/src/utils/defaultOptions.d.ts

@@ -1,4 +1,3 @@
-import type { MagicCookieOptions } from '../types/index.js';
-import { type RequireAll } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAll<MagicCookieOptions>;
+import type { RequiredMagicCookieOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicCookieOptions;
 export { defaultOptions };

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

@@ -9,7 +9,7 @@
   >
     <div ref="wrapper" class="magic-draggable__wrapper">
       <component
-        :is="mappedOptions.tag"
+        :is="state.options.tag"
         ref="el"
         class="magic-draggable__drag"
         :style="style"
@@ -25,7 +25,6 @@
 
 <script setup>
 import { useTemplateRef, computed, toValue, toRefs } from "vue";
-import { createDefu } from "defu";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -43,24 +42,17 @@ const magicError = useMagicError({
   prefix: "MagicDraggable",
   source: "MagicDraggable"
 });
-const customDefu = createDefu((obj, key, value) => {
-  if (key === "snapPoints") {
-    obj[key] = value;
-    return true;
-  }
-});
-const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);
-if (!mappedOptions.snapPoints.length) {
+const elRef = useTemplateRef("el");
+const wrapperRef = useTemplateRef("wrapper");
+const { initializeState } = useDraggableState(id);
+const state = initializeState(options);
+if (!state.options.snapPoints.length) {
   magicError.throwError({
     message: "MagicDraggable must have at least one snap point set",
     errorCode: "missing_snap_point"
   });
 }
-const elRef = useTemplateRef("el");
-const wrapperRef = useTemplateRef("wrapper");
-const { initializeState } = useDraggableState(id);
-const state = initializeState();
 const { dragging, activeSnapPoint } = toRefs(state);
 const disabled = computed(() => {
   if (options.disabled === void 0) {
@@ -69,7 +61,7 @@ const disabled = computed(() => {
     return options.disabled;
   }
 });
-const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions;
+const { snapPoints, animation, initial, threshold, scrollLock } = state.options;
 const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
   id,
   elRef,

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts

@@ -1,14 +1,14 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { DraggableDefaultOptions } from '../../types/index.js';
+import type { RequiredMagicDraggableOptions } from '../../types/index.js';
 type UseDraggableDragArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | null>;
     wrapperRef: Ref<HTMLDivElement | null>;
-    threshold: MaybeRef<DraggableDefaultOptions['threshold']>;
-    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
-    animation: MaybeRef<DraggableDefaultOptions['animation']>;
-    initial: MaybeRef<DraggableDefaultOptions['initial']>;
-    scrollLock: MaybeRef<DraggableDefaultOptions['scrollLock']>;
+    threshold: MaybeRef<RequiredMagicDraggableOptions['threshold']>;
+    snapPoints: MaybeRef<RequiredMagicDraggableOptions['snapPoints']>;
+    animation: MaybeRef<RequiredMagicDraggableOptions['animation']>;
+    initial: MaybeRef<RequiredMagicDraggableOptions['initial']>;
+    scrollLock: MaybeRef<RequiredMagicDraggableOptions['scrollLock']>;
 };
 export declare function useDraggableDrag(args: UseDraggableDragArgs): {
     initialize: () => Promise<void>;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableSnap.d.ts

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
-import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
+import type { DraggableSnapPoint, Coordinates, RequiredMagicDraggableOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
-    animation: MaybeRef<DraggableDefaultOptions['animation']>;
-    snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
+    animation: MaybeRef<RequiredMagicDraggableOptions['animation']>;
+    snapPoints: MaybeRef<RequiredMagicDraggableOptions['snapPoints']>;
 };
 type InterpolateDraggedArgs = {
     x: number;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.d.ts

@@ -1,6 +1,6 @@
 import { type MaybeRef } from 'vue';
-import type { DraggableState } from '../../types/index.js';
+import type { DraggableState, MagicDraggableOptions } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
-    initializeState: () => DraggableState;
+    initializeState: (options?: MagicDraggableOptions) => DraggableState;
     draggableStateStore: import("vue").Ref<DraggableState[], DraggableState[]>;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -1,5 +1,7 @@
 import { reactive, toValue, onScopeDispose } from "vue";
 import { createStateStore } from "@maas/vue-equipment/utils";
+import { createDefu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
 const getDraggableStateStore = createStateStore(
   "MagicDraggable",
   () => []
@@ -7,6 +9,12 @@ const getDraggableStateStore = createStateStore(
 export function useDraggableState(id) {
   const draggableStateStore = getDraggableStateStore();
   let scopeCounted = false;
+  const customDefu = createDefu((obj, key, value) => {
+    if (key === "snapPoints") {
+      obj[key] = value;
+      return true;
+    }
+  });
   function createState(id2) {
     const state = {
       id: id2,
@@ -24,7 +32,8 @@ export function useDraggableState(id) {
       draggedY: 0,
       elRect: void 0,
       wrapperRect: void 0,
-      activeSnapPoint: void 0
+      activeSnapPoint: void 0,
+      options: defaultOptions
     };
     return reactive(state);
   }
@@ -39,7 +48,7 @@ export function useDraggableState(id) {
       (x) => x.id !== currentId
     );
   }
-  function initializeState() {
+  function initializeState(options) {
     const currentId = toValue(id);
     let state = draggableStateStore.value.find(
       (entry) => entry.id === currentId
@@ -47,6 +56,10 @@ export function useDraggableState(id) {
     if (!state) {
       state = addState(currentId);
     }
+    if (options) {
+      const mappedOptions = customDefu(options, defaultOptions);
+      state.options = mappedOptions;
+    }
     if (!scopeCounted) {
       state.refCount++;
       scopeCounted = true;

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

@@ -1,4 +1,3 @@
-import type { RequireAll } from '@maas/vue-equipment/utils';
 type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
@@ -34,9 +33,9 @@ export interface MagicDraggableOptions {
     };
     disabled?: boolean;
 }
-export type DraggableDefaultOptions = RequireAll<MagicDraggableOptions> & {
-    threshold: RequireAll<MagicDraggableOptions['threshold']>;
-    animation: RequireAll<MagicDraggableOptions['animation']>;
+export type RequiredMagicDraggableOptions = Required<MagicDraggableOptions> & {
+    threshold: Required<MagicDraggableOptions['threshold']>;
+    animation: Required<MagicDraggableOptions['animation']>;
 };
 export interface DraggableState {
     id: string;
@@ -55,6 +54,7 @@ export interface DraggableState {
     elRect: DOMRect | undefined;
     wrapperRect: DOMRect | undefined;
     activeSnapPoint: DraggableSnapPoint | undefined;
+    options: RequiredMagicDraggableOptions;
 }
 export interface DraggableEvents {
     beforeSnap: {

package/dist/plugins/MagicDraggable/src/utils/defaultOptions.d.ts

@@ -1,3 +1,3 @@
-import type { DraggableDefaultOptions } from '../types/index.js';
-declare const defaultOptions: DraggableDefaultOptions;
+import type { RequiredMagicDraggableOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicDraggableOptions;
 export { defaultOptions };

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

@@ -1,7 +1,12 @@
 import MagicDrawer from './src/components/MagicDrawer.vue.js';
+import MagicDrawerProvider from './src/components/MagicDrawerProvider.vue.js';
+import MagicDrawerTeleport from './src/components/MagicDrawerTeleport.vue.js';
+import MagicDrawerBackdrop from './src/components/MagicDrawerBackdrop.vue.js';
+import MagicDrawerContent from './src/components/MagicDrawerContent.vue.js';
+import MagicDrawerTrigger from './src/components/MagicDrawerTrigger.vue.js';
 import { useMagicDrawer } from './src/composables/useMagicDrawer.js';
 import type { Plugin } from 'vue';
 import type { MagicDrawerOptions } from './src/types/index.js';
 declare const MagicDrawerPlugin: Plugin;
-export { MagicDrawerPlugin, MagicDrawer, useMagicDrawer };
+export { MagicDrawerPlugin, MagicDrawer, MagicDrawerProvider, MagicDrawerTeleport, MagicDrawerBackdrop, MagicDrawerContent, MagicDrawerTrigger, useMagicDrawer, };
 export type { MagicDrawerOptions };

package/dist/plugins/MagicDrawer/index.mjs

@@ -1,8 +1,27 @@
 import MagicDrawer from "./src/components/MagicDrawer.vue";
+import MagicDrawerProvider from "./src/components/MagicDrawerProvider.vue";
+import MagicDrawerTeleport from "./src/components/MagicDrawerTeleport.vue";
+import MagicDrawerBackdrop from "./src/components/MagicDrawerBackdrop.vue";
+import MagicDrawerContent from "./src/components/MagicDrawerContent.vue";
+import MagicDrawerTrigger from "./src/components/MagicDrawerTrigger.vue";
 import { useMagicDrawer } from "./src/composables/useMagicDrawer.mjs";
 const MagicDrawerPlugin = {
   install: (app) => {
     app.component("MagicDrawer", MagicDrawer);
+    app.component("MagicDrawerProvider", MagicDrawerProvider);
+    app.component("MagicDrawerTeleport", MagicDrawerTeleport);
+    app.component("MagicDrawerBackdrop", MagicDrawerBackdrop);
+    app.component("MagicDrawerContent", MagicDrawerContent);
+    app.component("MagicDrawerTrigger", MagicDrawerTrigger);
   }
 };
-export { MagicDrawerPlugin, MagicDrawer, useMagicDrawer };
+export {
+  MagicDrawerPlugin,
+  MagicDrawer,
+  MagicDrawerProvider,
+  MagicDrawerTeleport,
+  MagicDrawerBackdrop,
+  MagicDrawerContent,
+  MagicDrawerTrigger,
+  useMagicDrawer
+};

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

@@ -1,24 +1,14 @@
 import { type MaybeRef } from 'vue';
 import type { MagicDrawerOptions } from '../types/index.js';
-import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
-import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-in.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-in.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-in.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-btt-in.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-ltr-out.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-rtl-out.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-ttb-out.css';
-import '@maas/vue-equipment/utils/css/keyframes/slide-btt-out.css';
 interface MagicDrawerProps {
     id: MaybeRef<string>;
     options?: MagicDrawerOptions;
 }
-declare var __VLS_11: {}, __VLS_38: {};
+declare var __VLS_14: {}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    backdrop?: (props: typeof __VLS_11) => any;
+    backdrop?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;