@maas/vue-equipment 0.31.0 → 0.32.1

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionView.mjs

@@ -0,0 +1,60 @@
+import { reactive } from "vue";
+import { useAccordionState } from "./useAccordionState.mjs";
+export function useAccordionView(instanceId) {
+  const { initializeState } = useAccordionState(instanceId);
+  const state = initializeState();
+  function createView(args) {
+    const { id, active = false } = args;
+    const view = {
+      id,
+      active
+    };
+    return reactive(view);
+  }
+  function addView(args) {
+    const view = createView(args);
+    state.views = [...state.views, view];
+    return view;
+  }
+  function initializeView(args) {
+    const { id, active } = args;
+    let instance = getView(id);
+    if (!instance) instance = addView(args);
+    if (active) selectView(id);
+    return instance;
+  }
+  function deleteView(id) {
+    state.views = state.views?.filter((view) => view.id !== id);
+  }
+  function getView(id) {
+    return state.views?.find((view) => view.id === id);
+  }
+  function selectView(id) {
+    const instance = getView(id);
+    if (instance) {
+      if (state.options.mode === "single") {
+        unselectAllViews();
+      }
+      instance.active = true;
+    }
+  }
+  function unselectView(id) {
+    const instance = getView(id);
+    if (instance) {
+      instance.active = false;
+    }
+  }
+  function unselectAllViews() {
+    state.views?.forEach((view) => {
+      view.active = false;
+    });
+  }
+  return {
+    initializeView,
+    deleteView,
+    getView,
+    selectView,
+    unselectView,
+    unselectAllViews
+  };
+}

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRef } from 'vue';
+interface UseMagicAccordionArgs {
+    instanceId: MaybeRef<string>;
+}
+export declare function useMagicAccordion(args: UseMagicAccordionArgs): {
+    selectView: (id: string) => void;
+    unselectView: (id: string) => void;
+};
+export type UseMagicAccordionReturn = ReturnType<typeof useMagicAccordion>;
+export {};

package/dist/plugins/MagicAccordion/src/composables/useMagicAccordion.mjs

@@ -0,0 +1,9 @@
+import { useAccordionView } from "./private/useAccordionView.mjs";
+export function useMagicAccordion(args) {
+  const { instanceId } = args;
+  const { selectView, unselectView } = useAccordionView(instanceId);
+  return {
+    selectView,
+    unselectView
+  };
+}

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

@@ -0,0 +1,5 @@
+import type { InjectionKey, MaybeRef } from 'vue';
+declare const MagicAccordionInstanceId: InjectionKey<MaybeRef<string>>;
+declare const MagicAccordionViewId: InjectionKey<string>;
+declare const MagicAccordionViewActive: InjectionKey<boolean>;
+export { MagicAccordionInstanceId, MagicAccordionViewId, MagicAccordionViewActive, };

package/dist/plugins/MagicAccordion/src/symbols/index.mjs

@@ -0,0 +1,8 @@
+const MagicAccordionInstanceId = Symbol();
+const MagicAccordionViewId = Symbol();
+const MagicAccordionViewActive = Symbol();
+export {
+  MagicAccordionInstanceId,
+  MagicAccordionViewId,
+  MagicAccordionViewActive
+};

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

@@ -0,0 +1,43 @@
+type AccordionMode = 'single' | 'multiple';
+export interface MagicAccordionOptions {
+    mode?: AccordionMode;
+    transition?: string;
+    disabled?: boolean;
+}
+export interface AccordionView {
+    id: string;
+    active: boolean;
+}
+export interface AccordionState {
+    id: string;
+    views: AccordionView[];
+    options: MagicAccordionOptions;
+}
+export type Interaction = 'click' | 'mouseenter';
+export type AccordionEvents = {
+    beforeEnter: {
+        id: string;
+        viewId: string;
+    };
+    enter: {
+        id: string;
+        viewId: string;
+    };
+    afterEnter: {
+        id: string;
+        viewId: string;
+    };
+    beforeLeave: {
+        id: string;
+        viewId: string;
+    };
+    leave: {
+        id: string;
+        viewId: string;
+    };
+    afterLeave: {
+        id: string;
+        viewId: string;
+    };
+};
+export {};

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

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

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

@@ -0,0 +1,6 @@
+const defaultOptions = {
+  mode: "multiple",
+  transition: "magic-accordion",
+  disabled: false
+};
+export { defaultOptions };

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

@@ -15,14 +15,18 @@
 import { ref, computed, onMounted } from 'vue'
 import { useResizeObserver, useMutationObserver } from '@vueuse/core'
 
+import '@maas/vue-equipment/utils/css/easings.css'
+
 interface MagicAutoSizeProps {
   width?: boolean
   height?: boolean
+  immediate?: boolean
 }
 
 const props = withDefaults(defineProps<MagicAutoSizeProps>(), {
   width: true,
   height: true,
+  immediate: false,
 })
 
 const elRef = ref<HTMLElement | undefined>(undefined)
@@ -65,15 +69,45 @@ const padding = computed(() => {
   }
 })
 
+const child = computed(() => {
+  return Array.from(elRef.value?.childNodes ?? []).find(
+    (n) => n instanceof HTMLElement
+  )
+})
+
 useMutationObserver(
   elRef,
   (mutations) => {
-    const filtered = mutations
+    console.log('mutations:', mutations)
+    const addedNode = mutations
       .flatMap((m) => [...m.addedNodes])
       .find((n) => n instanceof HTMLElement)
 
-    if (!!filtered && filtered instanceof HTMLElement) {
-      content.value = filtered
+    const addedComment = mutations
+      .flatMap((m) => [...m.addedNodes])
+      .find((n) => n instanceof Comment)
+
+    if (!!addedNode && addedNode instanceof HTMLElement) {
+      content.value = addedNode
+    }
+
+    // If immediate is true, reset the size when a comment is added
+    // Vue sets a placeholder comment for a v-if
+    if (props.immediate && !!addedComment) {
+      content.value = undefined
+      size.value = {
+        width: 0,
+        height: 0,
+      }
+    }
+
+    // If the node is removed, reset the size
+    if (!child.value) {
+      content.value = undefined
+      size.value = {
+        width: 0,
+        height: 0,
+      }
     }
   },
   {
@@ -103,11 +137,16 @@ onMounted(() => {
         width: filtered.offsetWidth + padding.value.x,
         height: filtered.offsetHeight + padding.value.y,
       }
+    } else {
+      size.value = {
+        width: 0,
+        height: 0,
+      }
     }
   }
 })
 </script>
 
 <style>
-.magic-auto-size{--magic-auto-size-transition-function:ease;--magic-auto-size-transition-duration:100ms;height:var(--magic-auto-size-height);transition:all var(--magic-auto-size-transition-duration) var(--magic-auto-size-transition-function);width:var(--magic-auto-size-width)}
+:root{--magic-auto-size-transition:all 150ms var(--ease-in-out)}.magic-auto-size{height:var(--magic-auto-size-height);transition:var(--magic-auto-size-transition);width:var(--magic-auto-size-width)}
 </style>

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

@@ -1,6 +1,8 @@
+import '@maas/vue-equipment/utils/css/easings.css';
 interface MagicAutoSizeProps {
     width?: boolean;
     height?: boolean;
+    immediate?: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -8,16 +10,18 @@ declare function __VLS_template(): {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
     width: boolean;
     height: boolean;
+    immediate: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
     width: boolean;
     height: boolean;
+    immediate: boolean;
 }>>>, {
+    immediate: boolean;
     width: boolean;
     height: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
-
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];

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

@@ -193,7 +193,7 @@ const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
   disabled,
 })
 
-const { initializeState } = useDrawerState(props.id)
+const { initializeState, deleteState } = useDrawerState(props.id)
 const { dragging, wheeling } = initializeState()
 
 // Split isActive into two values to animate drawer smoothly
@@ -368,6 +368,8 @@ onUnmounted(() => {
   if (!mappedOptions.preventZoom) {
     resetMetaViewport()
   }
+
+  deleteState()
 })
 </script>
 

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.d.ts

@@ -1,50 +1,7 @@
-import { type MaybeRef } from 'vue';
+import { type Ref, type MaybeRef } from 'vue';
 import type { DrawerState } from '../../types/index.js';
 export declare function useDrawerState(id: MaybeRef<string>): {
-    addState: (id: string) => {
-        id: string;
-        dragStart: Date | undefined;
-        dragging: boolean;
-        wheeling: boolean;
-        progress: {
-            x: number;
-            y: number;
-        };
-        shouldClose: boolean;
-        interpolateTo: number | undefined;
-        originX: number;
-        originY: number;
-        lastDraggedX: number;
-        lastDraggedY: number;
-        draggedX: number;
-        draggedY: number;
-        relDirectionY: "below" | "above" | "absolute";
-        relDirectionX: "below" | "above" | "absolute";
-        absDirectionY: "with" | "against" | undefined;
-        absDirectionX: "with" | "against" | undefined;
-        elRect: {
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined;
-        wrapperRect: {
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined;
-    };
     initializeState: () => import("vue").ToRefs<DrawerState>;
     deleteState: () => void;
+    drawerStateStore: Ref<DrawerState[]>;
 };

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.mjs

@@ -4,6 +4,7 @@ export function useDrawerState(id) {
   function createState(id2) {
     const state = {
       id: id2,
+      active: false,
       dragStart: void 0,
       dragging: false,
       wheeling: false,
@@ -44,8 +45,8 @@ export function useDrawerState(id) {
     drawerStateStore.value = drawerStateStore.value.filter((x) => x.id !== id);
   }
   return {
-    addState,
     initializeState,
-    deleteState
+    deleteState,
+    drawerStateStore
   };
 }

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs

@@ -1,18 +1,15 @@
 import { computed, toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
-import { useDrawerStore } from "./private/useDrawerStore.mjs";
 import { useDrawerState } from "./private/useDrawerState.mjs";
 export function useMagicDrawer(id) {
-  const { drawerStore, addInstance, removeInstance } = useDrawerStore();
-  const { deleteState, initializeState } = useDrawerState(toValue(id));
-  const { progress } = initializeState();
-  const isActive = computed(() => drawerStore.value.includes(toValue(id)));
+  const { initializeState } = useDrawerState(toValue(id));
+  const { progress, active } = initializeState();
+  const isActive = computed(() => active.value);
   function open() {
-    addInstance(toValue(id));
+    active.value = true;
   }
   function close() {
-    removeInstance(toValue(id));
-    deleteState();
+    active.value = false;
   }
   function snapTo(snapPoint, duration) {
     useMagicEmitter().emit("snapTo", {

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

@@ -43,6 +43,7 @@ export interface MagicDrawerOptions {
 }
 export interface DrawerState {
     id: string;
+    active: boolean;
     dragStart: Date | undefined;
     dragging: boolean;
     wheeling: boolean;