@maas/vue-equipment 0.29.2 → 0.29.3

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="magic-menu-provider" ref="elRef">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide, watch, type MaybeRef, onBeforeUnmount } from 'vue'
+import { onClickOutside, onKeyStroke, usePointer } from '@vueuse/core'
+import { defu } from 'defu'
+import { useMenuState } from '../composables/private/useMenuState'
+import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuKeyListener } from '../composables/private/useMenuKeyListener'
+import { MagicMenuInstanceId } from '../symbols'
+import { defaultOptions } from '../utils/defaultOptions'
+
+import type { MagicMenuOptions } from '../types'
+
+interface MagicMenuProviderProps {
+  id: MaybeRef<string>
+  options?: MagicMenuOptions
+}
+
+const props = defineProps<MagicMenuProviderProps>()
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const mappedOptions = defu(props.options, defaultOptions)
+
+const { initializeState, deleteState } = useMenuState(props.id)
+const state = initializeState(mappedOptions)
+
+// If the mode changes, save the current pointer position
+// If the pointer moves, switch to mouse mode
+const lastX = ref(0)
+const lastY = ref(0)
+
+const { x, y } = usePointer()
+
+watch(
+  () => state?.input.type,
+  (value) => {
+    if (value === 'keyboard') {
+      lastX.value = x.value
+      lastY.value = y.value
+    }
+  }
+)
+
+watch([x, y], ([x, y]) => {
+  if (x !== lastX.value || y !== lastY.value) {
+    if (state) {
+      state.input.type = 'pointer'
+    }
+  }
+})
+
+// Add key listener
+const {
+  onArrowRight,
+  onArrowLeft,
+  onArrowUp,
+  onArrowDown,
+  onEscape,
+  onEnter,
+  onTab,
+} = useMenuKeyListener(props.id)
+
+onKeyStroke('ArrowRight', onArrowRight)
+onKeyStroke('ArrowLeft', onArrowLeft)
+onKeyStroke('ArrowDown', onArrowDown)
+onKeyStroke('ArrowUp', onArrowUp)
+onKeyStroke('Escape', onEscape)
+onKeyStroke('Enter', onEnter)
+onKeyStroke('Tab', onTab)
+
+// Handle off-click
+const { unselectAllViews } = useMenuView(props.id)
+
+onClickOutside(
+  elRef,
+  () => {
+    if (state) {
+      state.active = false
+    }
+    unselectAllViews()
+  },
+  {
+    ignore: [
+      '.magic-menu-view',
+      '.magic-menu-item',
+      '.magic-menu-cursor-blocker',
+    ],
+  }
+)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteState()
+})
+
+provide(MagicMenuInstanceId, props.id)
+</script>
+
+<style>
+.magic-menu-provider{outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue.d.ts

@@ -0,0 +1,24 @@
+import { type MaybeRef } from 'vue';
+import type { MagicMenuOptions } from '../types';
+interface MagicMenuProviderProps {
+    id: MaybeRef<string>;
+    options?: MagicMenuOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuProviderProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuProviderProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="magic-menu-trigger"
+    ref="elRef"
+    :class="{ '-active': view?.active, '-disabled': mappedDisabled }"
+    :data-id="`${viewId}-trigger`"
+    :tabindex="mappedTabindex"
+    @click="onClick"
+    @contextmenu="onClick"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <slot :is-active="view?.active" :is-disabled="mappedDisabled" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, ref, watch } from 'vue'
+import { useMenuState } from '../composables/private/useMenuState'
+import { useMenuView } from '../composables/private/useMenuView'
+import { useMenuItem } from '../composables/private/useMenuItem'
+import { useMenuTrigger } from '../composables/private/useMenuTrigger'
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuItemId,
+} from '../symbols'
+
+import type { MenuTrigger } from '../types'
+
+interface MagicMenuTriggerProps {
+  disabled?: boolean
+  trigger?: MenuTrigger[]
+}
+
+const props = defineProps<MagicMenuTriggerProps>()
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const viewId = inject(MagicMenuViewId, undefined)
+const itemId = inject(MagicMenuItemId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuTrigger must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuTrigger must be nested inside MagicMenuView')
+}
+
+const { getView, getRelativeViewIndex } = useMenuView(instanceId)
+const view = getView(viewId)
+const viewIndex = getRelativeViewIndex(viewId)
+
+const { initializeState } = useMenuState(instanceId)
+const state = initializeState()
+
+const { getItem } = useMenuItem({ instanceId, viewId })
+const item = getItem(itemId ?? '')
+
+const mappedDisabled = computed(() => props.disabled ?? item?.disabled)
+
+const mappedTrigger = computed<MenuTrigger[]>(() => {
+  if (props.trigger?.length) {
+    return props.trigger
+  }
+
+  switch (state.options.mode) {
+    case 'menubar':
+      return view?.parent.item
+        ? ['mouseenter', 'mouseleave', 'click']
+        : ['mouseenter', 'click']
+    case 'dropdown':
+      return view?.parent.item
+        ? ['mouseenter', 'mouseleave', 'click']
+        : ['click']
+    case 'context':
+      return view?.parent.item
+        ? ['mouseenter', 'mouseleave', 'click']
+        : ['right-click']
+  }
+})
+
+const mappedTabindex = computed(() => {
+  if (viewIndex === 0 && state.options.mode !== 'context' && !itemId) {
+    return 0
+  } else {
+    return undefined
+  }
+})
+
+const { initialize, destroy, onMouseenter, onClick, onMouseleave } =
+  useMenuTrigger({
+    instanceId,
+    viewId,
+    itemId,
+    mappedDisabled,
+    mappedTrigger,
+    elRef,
+  })
+
+// Initialize watcher
+initialize()
+
+watch(
+  elRef,
+  (value) => {
+    if (view && value) {
+      view.children.trigger = value
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  destroy()
+})
+</script>
+
+<style>
+.magic-menu-trigger{cursor:var(--magic-menu-trigger-cursor,pointer)}
+</style>

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -0,0 +1,26 @@
+import type { MenuTrigger } from '../types';
+interface MagicMenuTriggerProps {
+    disabled?: boolean;
+    trigger?: MenuTrigger[];
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>, {
+    default?(_: {
+        isActive: boolean | undefined;
+        isDisabled: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="magic-menu-view" :id="mappedId">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, provide } from 'vue'
+import { uuid } from '@maas/vue-equipment/utils'
+import { useMenuView } from '../composables/private/useMenuView'
+
+import {
+  MagicMenuInstanceId,
+  MagicMenuViewId,
+  MagicMenuParentTree,
+  MagicMenuItemId,
+  MagicMenuViewActive,
+} from '../symbols'
+
+interface MagicMenuViewProps {
+  id?: string
+}
+
+const props = defineProps<MagicMenuViewProps>()
+
+const parentTree = inject(MagicMenuParentTree, [])
+const instanceId = inject(MagicMenuInstanceId, undefined)
+const itemId = inject(MagicMenuItemId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuView must be nested inside MagicMenuProvider')
+}
+
+const mappedId = computed(() => props.id ?? `magic-menu-view-${uuid()}`)
+const mappedParentTree = computed(() => [...parentTree, mappedId.value])
+
+// Register view
+const { initializeView, deleteView } = useMenuView(instanceId)
+const view = initializeView({
+  id: mappedId.value,
+  parent: { views: parentTree, item: itemId ?? '' },
+})
+
+// Pass id, active state and parent tree to children
+provide(MagicMenuParentTree, mappedParentTree.value)
+provide(MagicMenuViewId, mappedId.value)
+provide(MagicMenuViewActive, view.active)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteView(mappedId.value)
+})
+</script>

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -0,0 +1,21 @@
+interface MagicMenuViewProps {
+    id?: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuViewProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRef } from 'vue';
+import type { MenuState } from '../../types.js';
+type UseMenuCallbackArgs = {
+    state: MenuState;
+    instanceId: MaybeRef<string>;
+    viewId: string;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+};
+export declare function useMenuCallback(args: UseMenuCallbackArgs): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (_el: Element) => void;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (_el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+};
+export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuCallback.mjs

@@ -0,0 +1,52 @@
+import { toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+export function useMenuCallback(args) {
+  const { state, instanceId, viewId, lockScroll, unlockScroll } = args;
+  const emitter = useMagicEmitter();
+  function onBeforeEnter(_el) {
+    emitter.emit("beforeEnter", { id: toValue(instanceId), view: viewId });
+  }
+  function onEnter(_el) {
+    emitter.emit("enter", { id: toValue(instanceId), view: viewId });
+  }
+  function onAfterEnter(_el) {
+    emitter.emit("afterEnter", { id: toValue(instanceId), view: viewId });
+    switch (state.options.mode) {
+      case "dropdown":
+        lockScroll();
+        break;
+      case "menubar":
+        break;
+      case "context":
+        lockScroll();
+        break;
+    }
+  }
+  function onBeforeLeave(_el) {
+    emitter.emit("beforeLeave", { id: toValue(instanceId), view: viewId });
+  }
+  function onLeave(_el) {
+    emitter.emit("leave", { id: toValue(instanceId), view: viewId });
+  }
+  function onAfterLeave(_el) {
+    emitter.emit("afterLeave", { id: toValue(instanceId), view: viewId });
+    switch (state.options.mode) {
+      case "dropdown":
+        unlockScroll();
+        break;
+      case "menubar":
+        break;
+      case "context":
+        unlockScroll();
+        break;
+    }
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.d.ts

@@ -0,0 +1,6 @@
+export declare function useMenuDOM(): {
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -0,0 +1,42 @@
+import { ref } from "vue";
+import { useScrollLock } from "@vueuse/core";
+import { matchClass } from "@maas/vue-equipment/utils";
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+export function useMenuDOM() {
+  const positionFixedElements = ref([]);
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined")
+      return;
+    const exclude = new RegExp(/magic-menu?/);
+    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
+    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+    document.body.style.paddingRight = "var(--scrollbar-width)";
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
+    );
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+    );
+  }
+  function removeScrollLockPadding() {
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = ""
+    );
+  }
+  return {
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  };
+}

package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.d.ts

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue';
+import type { MenuItem } from '../../types/index.js';
+type UseMenuItemArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+};
+type InitializeItemArgs = Pick<MenuItem, 'id' | 'disabled'>;
+export declare function useMenuItem(args: UseMenuItemArgs): {
+    initializeItem: (args: InitializeItemArgs) => MenuItem;
+    deleteItem: (id: string) => void;
+    getItem: (id: string) => MenuItem | undefined;
+    selectItem: (id: string) => void;
+    unselectItem: (id: string) => void;
+};
+export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuItem.mjs

@@ -0,0 +1,75 @@
+import { reactive } from "vue";
+import { useMenuView } from "./useMenuView.mjs";
+import { useMenuState } from "./useMenuState.mjs";
+export function useMenuItem(args) {
+  const { instanceId, viewId } = args;
+  const { initializeState } = useMenuState(instanceId);
+  const state = initializeState();
+  const { getView, unselectNonTreeViews } = useMenuView(instanceId);
+  const view = getView(viewId);
+  if (!view) {
+    throw new Error(`View ${viewId} not found`);
+  }
+  function createItem(args2) {
+    const { id, disabled } = args2;
+    const item = {
+      id,
+      active: false,
+      disabled
+    };
+    return reactive(item);
+  }
+  function addItem(args2) {
+    const item = createItem(args2);
+    if (view?.items) {
+      view.items = [...view?.items, item];
+    }
+    return item;
+  }
+  function unselectSiblings(id) {
+    return view?.items.filter((item) => item.id !== id).forEach((item) => item.active = false);
+  }
+  function initializeItem(args2) {
+    const { id } = args2;
+    const instance = getItem(id);
+    if (!instance) {
+      const item = addItem(args2);
+      return item;
+    }
+    return instance;
+  }
+  function deleteItem(id) {
+    if (!view?.items)
+      return;
+    view.items = view.items.filter((x) => x.id !== id);
+  }
+  function getItem(id) {
+    return view?.items.find((item) => {
+      return item.id === id;
+    });
+  }
+  function selectItem(id) {
+    const instance = getItem(id);
+    if (instance) {
+      instance.active = true;
+      unselectSiblings(id);
+      unselectNonTreeViews(viewId);
+      if (view) {
+        state.input.view = view.id;
+      }
+    }
+  }
+  function unselectItem(id) {
+    const instance = getItem(id);
+    if (instance) {
+      instance.active = false;
+    }
+  }
+  return {
+    initializeItem,
+    deleteItem,
+    getItem,
+    selectItem,
+    unselectItem
+  };
+}

package/dist/plugins/MagicMenu/src/composables/private/useMenuKeyListener.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRef } from 'vue';
+export declare function useMenuKeyListener(instanceId: MaybeRef<string>): {
+    onArrowRight: (e: KeyboardEvent) => Promise<void>;
+    onArrowLeft: (e: KeyboardEvent) => void;
+    onArrowUp: (e: KeyboardEvent) => void;
+    onArrowDown: (e: KeyboardEvent) => void;
+    onEscape: (e: KeyboardEvent) => void;
+    onEnter: (e: KeyboardEvent) => Promise<void>;
+    onTab: (e: KeyboardEvent) => void;
+};