@maas/vue-equipment 0.40.0 → 1.0.0-beta.1

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

@@ -1,77 +1,60 @@
-<template>
-  <div class="magic-command-view" v-if="isActive" ref="elRef">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["id"];
+import { computed, inject, onBeforeUnmount, provide, useId, watch } from "vue";
+import { useCommandView } from "../composables/private/useCommandView";
 import {
-  ref,
-  computed,
-  inject,
-  toValue,
-  onMounted,
-  onUnmounted,
-  watch,
-  nextTick,
-  useId,
-} from 'vue'
-import { useCommandStore } from '../composables/private/useCommandStore'
-import { useCommandView } from '../composables/private/useCommandView'
-import { MagicCommandInstanceId } from '../symbols'
-
-interface MagicCommandViewProps {
-  id?: string
-  default?: boolean
-}
-
-const props = withDefaults(defineProps<MagicCommandViewProps>(), {
-  default: false,
-})
-const commandId = inject(MagicCommandInstanceId, '')
-const elRef = ref<HTMLElement | undefined>(undefined)
-
-const { activeView, selectView } = useCommandView()
-
-const mappedId = computed(() => {
-  return props.id ?? useId() ?? ''
-})
-
-const isActive = computed(() => {
-  return toValue(mappedId) === activeView.value
-})
-
-const items = computed(() => {
-  return findInstance(toValue(commandId))?.items
-})
-
-const { addView, removeView, findInstance, sortItems } = useCommandStore()
-
-onMounted(() => {
-  if (toValue(commandId)) {
-    addView(toValue(commandId), mappedId.value)
-  }
-
-  if (props.default) {
-    selectView(mappedId.value)
-  }
-})
-
-onUnmounted(() => {
-  if (toValue(commandId)) {
-    removeView(toValue(commandId), mappedId.value)
-  }
-})
-
-// Update sorting for MagicCommandItems
-watch(
-  () => items.value?.length,
-  () => {
-    nextTick(() => {
-      if (elRef.value) {
-        sortItems(toValue(commandId), elRef.value)
+  MagicCommandInstanceId,
+  MagicCommandViewId,
+  MagicCommandParentTree,
+  MagicCommandItemId,
+  MagicCommandViewActive
+} from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicCommandView",
+  props: {
+    id: { type: String, required: false },
+    initial: { type: Boolean, required: false, default: false }
+  },
+  setup(__props) {
+    const parentTree = inject(MagicCommandParentTree, []);
+    const instanceId = inject(MagicCommandInstanceId, void 0);
+    const itemId = inject(MagicCommandItemId, void 0);
+    if (!instanceId) {
+      throw new Error("MagicCommandView must be nested inside MagicCommandProvider");
+    }
+    const mappedId = computed(() => __props.id ?? `magic-command-view-${useId()}`);
+    const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
+    const mappedActive = computed(() => view.active);
+    const { initializeView, deleteView, sortViewItems } = useCommandView(instanceId);
+    const view = initializeView({
+      id: mappedId.value,
+      parent: { views: parentTree, item: itemId ?? "" },
+      initial: __props.initial
+    });
+    provide(MagicCommandViewId, mappedId.value);
+    provide(MagicCommandViewActive, mappedActive);
+    provide(MagicCommandParentTree, mappedParentTree.value);
+    watch(
+      () => view?.items,
+      () => {
+        sortViewItems(mappedId.value);
       }
-    })
+    );
+    onBeforeUnmount(() => {
+      deleteView(mappedId.value);
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        id: mappedId.value,
+        class: "magic-menu-view"
+      }, [
+        _renderSlot(_ctx.$slots, "default", {
+          viewActive: _unref(view).active
+        })
+      ], 8, _hoisted_1);
+    };
   }
-)
+});
 </script>

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue.d.ts

@@ -1,23 +1,30 @@
 interface MagicCommandViewProps {
     id?: string;
-    default?: boolean;
+    initial?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            viewActive: boolean;
+        }): any;
     };
-    refs: {
-        elRef: HTMLDivElement;
-    };
-    rootEl: any;
+    refs: {};
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandViewProps> & Readonly<{}>, {
-    default: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicCommandViewProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+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;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.d.ts

@@ -0,0 +1,14 @@
+import { type MaybeRef } from 'vue';
+type UseCommandCallbackArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+};
+export declare function useCommandCallback(args: UseCommandCallbackArgs): {
+    onBeforeEnter: () => void;
+    onEnter: () => void;
+    onAfterEnter: () => void;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: () => void;
+};
+export {};

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

@@ -0,0 +1,32 @@
+import { toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+export function useCommandCallback(args) {
+  const { instanceId, viewId } = args;
+  const emitter = useMagicEmitter();
+  function onBeforeEnter() {
+    emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
+  }
+  function onEnter() {
+    emitter.emit("enter", { id: toValue(instanceId), viewId });
+  }
+  function onAfterEnter() {
+    emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
+  }
+  function onBeforeLeave() {
+    emitter.emit("beforeLeave", { id: toValue(instanceId), viewId });
+  }
+  function onLeave() {
+    emitter.emit("leave", { id: toValue(instanceId), viewId });
+  }
+  function onAfterLeave() {
+    emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

package/dist/plugins/MagicCommand/src/composables/private/useCommandItem.d.ts

@@ -1,9 +1,18 @@
 import { type MaybeRef } from 'vue';
-export declare function useCommandItem(id: MaybeRef<string>): {
-    nextItem: (loop?: boolean) => void;
-    prevItem: (loop?: boolean) => void;
+import type { CommandItem } from '../../types/index.js';
+type UseCommandItemArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+};
+type InitializeItemArgs = Pick<CommandItem, 'id' | 'disabled'>;
+export declare function useCommandItem(args: UseCommandItemArgs): {
+    activeItem: import("vue").ComputedRef<CommandItem | undefined>;
+    initializeItem: (args: InitializeItemArgs) => CommandItem;
+    deleteItem: (id: string) => void;
+    getItem: (id: string) => CommandItem | undefined;
     selectItem: (id: string) => void;
-    selectLastItem: () => void;
-    activeItem: import("vue").Ref<string | undefined, string | undefined>;
-    lastActiveItem: import("vue").Ref<string | undefined, string | undefined>;
+    selectNextItem: (loop?: boolean) => void;
+    selectPrevItem: (loop?: boolean) => void;
+    unselectItem: (id: string) => void;
 };
+export {};

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

@@ -1,57 +1,90 @@
-import { ref, computed, watch } from "vue";
-import { useCommandStore } from "./useCommandStore.mjs";
-import { toValue } from "@vueuse/core";
-const activeItem = ref(void 0);
-const lastActiveItem = ref(void 0);
-const watcherActive = ref(false);
-export function useCommandItem(id) {
-  const instance = computed(() => findInstance(toValue(id)));
-  const items = computed(() => instance.value?.items);
-  const { findInstance } = useCommandStore();
-  function nextItem(loop = false) {
-    if (items.value) {
-      const index = items.value.findIndex(
-        (item) => item.id === activeItem.value
-      );
-      const hasNext = items.value[index + 1] !== void 0;
+import { reactive, computed } from "vue";
+import { useCommandView } from "./useCommandView.mjs";
+export function useCommandItem(args) {
+  const { instanceId, viewId } = args;
+  const { getView } = useCommandView(instanceId);
+  const view = getView(viewId);
+  const activeItem = computed(() => view?.items.find((item) => item.active));
+  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 item = getItem(id) ?? addItem(args2);
+    return item;
+  }
+  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 item = getItem(id);
+    if (item) {
+      item.active = true;
+      unselectSiblings(id);
+    }
+  }
+  function selectNextItem(loop = false) {
+    const index = view?.items.findIndex(
+      (item) => item.id === activeItem.value?.id
+    );
+    if (index !== void 0) {
+      const hasNext = view?.items[index + 1] !== void 0;
       if (hasNext) {
-        selectItem(items.value[index + 1].id);
-      } else if (loop) {
-        selectItem(items.value[0].id);
+        selectItem(view?.items[index + 1].id);
+      } else if (view && loop) {
+        selectItem(view.items[0].id);
       }
     }
   }
-  function prevItem(loop = false) {
-    if (items.value) {
-      const index = items.value.findIndex(
-        (item) => item.id === activeItem.value
-      );
-      const hasPrev = items.value[index - 1] !== void 0;
+  function selectPrevItem(loop = false) {
+    const index = view?.items.findIndex(
+      (item) => item.id === activeItem.value?.id
+    );
+    if (index !== void 0) {
+      const hasPrev = view?.items[index - 1] !== void 0;
       if (hasPrev) {
-        selectItem(items.value[index - 1].id);
-      } else if (loop) {
-        selectItem(items.value[items.value.length - 1].id);
+        selectItem(view?.items[index - 1].id);
+      } else if (view && loop) {
+        selectItem(view.items[view.items.length - 1].id);
       }
     }
   }
-  function selectItem(id2) {
-    activeItem.value = id2;
-  }
-  function selectLastItem() {
-    activeItem.value = lastActiveItem.value;
-  }
-  if (!watcherActive.value) {
-    watcherActive.value = true;
-    watch(activeItem, (_newItem, oldItem) => {
-      if (oldItem) lastActiveItem.value = oldItem;
-    });
+  function unselectItem(id) {
+    const item = getItem(id);
+    if (item) {
+      item.active = false;
+    }
   }
   return {
-    nextItem,
-    prevItem,
-    selectItem,
-    selectLastItem,
     activeItem,
-    lastActiveItem
+    initializeItem,
+    deleteItem,
+    getItem,
+    selectItem,
+    selectNextItem,
+    selectPrevItem,
+    unselectItem
   };
 }

package/dist/plugins/MagicCommand/src/composables/private/useCommandScroll.d.ts

@@ -1,8 +1,26 @@
 import { type MaybeRef } from 'vue';
+interface IsElementAboveArgs {
+    element: MaybeRef<HTMLElement>;
+    ancestor?: HTMLElement;
+}
+interface IsElementBelowArgs {
+    element: MaybeRef<HTMLElement>;
+    ancestor?: HTMLElement;
+}
+interface ScrollInFromTopArgs {
+    element: MaybeRef<HTMLElement>;
+    ancestor?: HTMLElement;
+}
+interface ScrollInFromBottomArgs {
+    element: MaybeRef<HTMLElement>;
+    ancestor?: HTMLElement;
+}
 export declare function useCommandScroll(parent: MaybeRef<HTMLElement | undefined>): {
-    isElementAbove: (element: MaybeRef<HTMLElement>) => boolean;
-    isElementBelow: (element: MaybeRef<HTMLElement>) => boolean;
     findElement: (id: string) => HTMLElement | null;
-    scrollInFromTop: (element: HTMLElement) => void;
-    scrollInFromBottom: (element: HTMLElement) => void;
+    findScrollableAncestor: (element: HTMLElement | null) => HTMLElement | undefined;
+    isElementAbove: (args: IsElementAboveArgs) => boolean;
+    isElementBelow: (args: IsElementBelowArgs) => boolean;
+    scrollInFromTop: (args: ScrollInFromTopArgs) => void;
+    scrollInFromBottom: (args: ScrollInFromBottomArgs) => void;
 };
+export {};

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

@@ -3,50 +3,67 @@ export function useCommandScroll(parent) {
   const mappedParent = computed(
     () => toValue(parent) || document.documentElement
   );
-  const paddingTop = computed(
-    () => parseFloat(getCssValue(mappedParent.value, "padding-top"))
-  );
-  const paddingBottom = computed(
-    () => parseFloat(getCssValue(mappedParent.value, "padding-bottom"))
-  );
   function getCssValue(el, style) {
-    return getComputedStyle(el, null).getPropertyValue(style);
+    return parseFloat(getComputedStyle(el, null).getPropertyValue(style));
   }
-  function isElementAbove(element) {
-    const elementRect = toValue(element).getBoundingClientRect();
-    const parentRect = mappedParent.value.getBoundingClientRect();
-    const parentTop = parentRect.top + paddingTop.value;
-    return elementRect.top < parentTop;
+  function getPaddingTop(el) {
+    return getCssValue(el, "padding-top");
   }
-  function isElementBelow(element) {
-    const elementRect = toValue(element).getBoundingClientRect();
-    const parentRect = mappedParent.value.getBoundingClientRect();
-    const parentBottom = parentRect.height + parentRect.top - paddingBottom.value;
-    return elementRect.bottom >= parentBottom;
+  function getPaddingBottom(el) {
+    return getCssValue(el, "padding-bottom");
   }
   function findElement(id) {
     return mappedParent.value.querySelector(`[data-id="${id}"]`);
   }
-  function scrollInFromTop(element) {
-    const elementRect = element.getBoundingClientRect();
-    const parentRect = mappedParent.value.getBoundingClientRect();
-    const scrollAmount = elementRect.top - parentRect.top - paddingTop.value;
-    mappedParent.value.scrollBy({
+  function findScrollableAncestor(element) {
+    if (!element || element === document.documentElement) {
+      return void 0;
+    }
+    const { overflowY } = window.getComputedStyle(element);
+    const isScrollable = overflowY !== "visible" && overflowY !== "hidden" && element.scrollHeight > element.clientHeight;
+    return isScrollable ? element : findScrollableAncestor(element.parentElement);
+  }
+  function isElementAbove(args) {
+    const { ancestor = mappedParent.value, element } = args;
+    const elementRect = toValue(element).getBoundingClientRect();
+    const ancestorRect = ancestor.getBoundingClientRect();
+    const ancestorPadding = getPaddingTop(ancestor);
+    const ancestorTop = ancestorRect.top + ancestorPadding;
+    return elementRect.top < ancestorTop;
+  }
+  function isElementBelow(args) {
+    const { ancestor = mappedParent.value, element } = args;
+    const elementRect = toValue(element).getBoundingClientRect();
+    const ancestorRect = ancestor.getBoundingClientRect();
+    const ancestorPadding = getPaddingBottom(ancestor);
+    const ancestorBottom = ancestorRect.height + ancestorRect.top - ancestorPadding;
+    return elementRect.bottom >= ancestorBottom;
+  }
+  function scrollInFromTop(args) {
+    const { ancestor = mappedParent.value, element } = args;
+    const elementRect = toValue(element).getBoundingClientRect();
+    const ancestorRect = ancestor.getBoundingClientRect();
+    const ancestorPadding = getPaddingTop(ancestor);
+    const scrollAmount = elementRect.top - ancestorRect.top - ancestorPadding;
+    ancestor.scrollBy({
       top: scrollAmount
     });
   }
-  function scrollInFromBottom(element) {
-    const elementRect = element.getBoundingClientRect();
-    const parentRect = mappedParent.value.getBoundingClientRect();
-    const scrollAmount = elementRect.bottom - parentRect.bottom + paddingBottom.value;
-    mappedParent.value.scrollBy({
+  function scrollInFromBottom(args) {
+    const { ancestor = mappedParent.value, element } = args;
+    const elementRect = toValue(element).getBoundingClientRect();
+    const ancestorRect = ancestor.getBoundingClientRect();
+    const ancestorPadding = getPaddingBottom(ancestor);
+    const scrollAmount = elementRect.bottom - ancestorRect.bottom + ancestorPadding;
+    ancestor.scrollBy({
       top: scrollAmount
     });
   }
   return {
+    findElement,
+    findScrollableAncestor,
     isElementAbove,
     isElementBelow,
-    findElement,
     scrollInFromTop,
     scrollInFromBottom
   };

package/dist/plugins/MagicCommand/src/composables/private/useCommandState.d.ts

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { CommandState, MagicCommandOptions } from '../../types/index.js';
+export declare function useCommandState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicCommandOptions) => CommandState;
+    deleteState: () => void;
+    commandStateStore: Ref<CommandState[], CommandState[]>;
+};

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

@@ -0,0 +1,49 @@
+import { ref, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const commandStateStore = ref([]);
+export function useCommandState(instanceId) {
+  function createState(id) {
+    const view = commandStateStore.value.find((state2) => state2.id === id)?.views.findLast((view2) => view2.active)?.id;
+    const state = {
+      id,
+      options: { ...defaultOptions },
+      views: [],
+      renderer: void 0,
+      active: false,
+      input: {
+        type: "pointer",
+        view
+      }
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const state = createState(id);
+    commandStateStore.value = [...commandStateStore.value, state];
+    return state;
+  }
+  function initializeState(options) {
+    let state = commandStateStore.value.find((entry) => {
+      return entry.id === toValue(instanceId);
+    });
+    if (!state) {
+      state = addState(toValue(instanceId));
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      state.options = mappedOptions;
+    }
+    return state;
+  }
+  function deleteState() {
+    commandStateStore.value = commandStateStore.value.filter(
+      (x) => x.id !== toValue(instanceId)
+    );
+  }
+  return {
+    initializeState,
+    deleteState,
+    commandStateStore
+  };
+}

package/dist/plugins/MagicCommand/src/composables/private/useCommandTrigger.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
+import { Primitive } from '@maas/vue-primitive';
+import type { Action, Interaction } from '../../types/index.js';
+type UseCommandTriggerArgs = {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+    mappedDisabled: ComputedRef<boolean>;
+    mappedActive?: ComputedRef<boolean>;
+    trigger: Interaction[];
+    action: Action;
+    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+};
+export declare function useCommandTrigger(args: UseCommandTriggerArgs): {
+    onMouseenter: () => Promise<void>;
+    onClick: (e: MouseEvent) => Promise<void>;
+    onEnter: (e?: KeyboardEvent) => Promise<void>;
+};
+export {};

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

@@ -0,0 +1,76 @@
+import { nextTick } from "vue";
+import { useFocus } from "@vueuse/core";
+import { useCommandView } from "./useCommandView.mjs";
+import { useCommandState } from "./useCommandState.mjs";
+export function useCommandTrigger(args) {
+  const {
+    instanceId,
+    viewId,
+    trigger,
+    action,
+    mappedDisabled,
+    mappedActive,
+    elRef
+  } = args;
+  const { getView, selectView, unselectView } = useCommandView(instanceId);
+  const view = getView(viewId);
+  const { initializeState } = useCommandState(instanceId);
+  const state = initializeState();
+  const { focused } = useFocus(elRef);
+  async function onEnter(e) {
+    if ((focused.value || mappedActive?.value) && !mappedDisabled.value && !view?.active) {
+      e?.preventDefault();
+      e?.stopPropagation();
+      state.input.type = "keyboard";
+      switch (action) {
+        case "close":
+          unselectView(viewId);
+          break;
+        case "open":
+          if (!state.active) {
+            state.active = true;
+            await nextTick();
+          }
+          selectView(viewId);
+          break;
+      }
+    }
+  }
+  async function onMouseenter() {
+    if (trigger.includes("mouseenter") && !mappedDisabled.value && viewId && view) {
+      switch (action) {
+        case "close":
+          unselectView(viewId);
+          break;
+        case "open":
+          if (!state.active) {
+            state.active = true;
+            await nextTick();
+          }
+          selectView(viewId);
+          break;
+      }
+    }
+  }
+  async function onClick(e) {
+    if (trigger.includes("click") && !mappedDisabled.value && e.button === 0 && viewId) {
+      switch (action) {
+        case "close":
+          unselectView(viewId);
+          break;
+        case "open":
+          if (!state.active) {
+            state.active = true;
+            await nextTick();
+          }
+          selectView(viewId);
+          break;
+      }
+    }
+  }
+  return {
+    onMouseenter,
+    onClick,
+    onEnter
+  };
+}