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

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
+  };
+}

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

@@ -1,6 +1,22 @@
-export declare function useCommandView(): {
-    selectView: (id: string) => void;
-    selectLastView: () => void;
-    activeView: import("vue").Ref<string | undefined, string | undefined>;
-    lastActiveView: import("vue").Ref<string | undefined, string | undefined>;
+import { type MaybeRef } from 'vue';
+import type { CommandView } from '../../types/index.js';
+type InitializeViewArgs = Pick<CommandView, 'id' | 'parent' | 'initial'>;
+export declare function useCommandView(instanceId: MaybeRef<string>): {
+    currentView: import("vue").ComputedRef<CommandView | undefined>;
+    initializeView: (args: InitializeViewArgs) => CommandView;
+    deleteView: (id: string) => void;
+    getView: (id: string) => CommandView | undefined;
+    getRelativeViewIndex: (id: string) => number;
+    getNextView: (id: string) => CommandView | undefined;
+    getPreviousView: (id: string) => CommandView | undefined;
+    getTopLevelView: () => CommandView | undefined;
+    getNestedView: (itemId: string) => CommandView | undefined;
+    getParentView: (id: string) => CommandView | undefined;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    selectInitialView: () => void;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectUnrelatedViews: (id: string) => void;
+    unselectAllViews: () => void;
+    sortViewItems: (viewId: string) => void;
 };
+export {};

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

@@ -1,24 +1,199 @@
-import { ref, watch } from "vue";
-const activeView = ref(void 0);
-const lastActiveView = ref(void 0);
-const watcherActive = ref(false);
-export function useCommandView() {
-  function selectView(id) {
-    activeView.value = id;
-  }
-  function selectLastView() {
-    activeView.value = lastActiveView.value;
-  }
-  if (!watcherActive.value) {
-    watcherActive.value = true;
-    watch(activeView, (_newView, oldView) => {
-      if (oldView) lastActiveView.value = oldView;
+import { reactive, computed, toValue } from "vue";
+import { useCommandState } from "./useCommandState.mjs";
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+export function useCommandView(instanceId) {
+  const { initializeState } = useCommandState(instanceId);
+  const state = initializeState();
+  const currentInstanceId = toValue(instanceId);
+  const currentView = computed(() => {
+    const activeViews = state.views.filter((view) => view.active);
+    if (activeViews.length === 0) return void 0;
+    if (activeViews.length === 1) return activeViews[0];
+    return activeViews.reduce(
+      (a, b) => a.parent.views.length >= b.parent.views.length ? a : b
+    );
+  });
+  const viewMap = /* @__PURE__ */ new Map();
+  function createView(args) {
+    const { id, parent, initial } = args;
+    if (parent.views.length === 0) {
+      parent.views.push(currentInstanceId);
+    }
+    const view = reactive({
+      id,
+      parent,
+      initial,
+      active: false,
+      items: [],
+      channels: [],
+      state: {
+        selectAbortController: new AbortController(),
+        unselectAbortController: new AbortController()
+      }
+    });
+    viewMap.set(id, view);
+    return view;
+  }
+  function addView(args) {
+    const view = createView(args);
+    state.views.push(view);
+    return view;
+  }
+  function delay(ms, signal) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(resolve, ms);
+      const abortHandler = () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      };
+      signal.addEventListener("abort", abortHandler, { once: true });
     });
   }
+  function activateView() {
+    const view = state?.views.findLast((view2) => view2.active)?.id;
+    state.input.view = view;
+  }
+  function getView(id) {
+    let view = viewMap.get(id);
+    if (!view) {
+      view = state.views.find((v) => v.id === id);
+      if (view) viewMap.set(id, view);
+    }
+    return view;
+  }
+  function deleteView(id) {
+    const index = state.views.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      state.views.splice(index, 1);
+      viewMap.delete(id);
+    }
+  }
+  function getRelativeViewIndex(id) {
+    const view = getView(id);
+    if (!view) return -1;
+    const nestingLevel = view.parent.views.length;
+    return state.views.findIndex(
+      (v) => v.parent.views.length === nestingLevel && v.id === id
+    );
+  }
+  function getNextView(id) {
+    const index = state.views.findIndex((view) => view.id === id);
+    return index !== -1 ? state.views[index + 1] : void 0;
+  }
+  function getPreviousView(id) {
+    const index = state.views.findIndex((view) => view.id === id);
+    return index > 0 ? state.views[index - 1] : void 0;
+  }
+  function getTopLevelView() {
+    return state.views.find((view) => view.active && !view.parent.item);
+  }
+  function getNestedView(itemId) {
+    return state.views.find((view) => view.parent.item === itemId);
+  }
+  function getParentView(id) {
+    const view = getView(id);
+    if (!view) return void 0;
+    const parentId = view.parent.views[view.parent.views.length - 1];
+    return parentId ? getView(parentId) : void 0;
+  }
+  function getUnrelatedViews(id) {
+    const view = getView(id);
+    if (!view) return [];
+    const parentViewsSet = new Set(view.parent.views);
+    return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
+  }
+  async function selectView(id, delayMs = 0) {
+    const view = getView(id);
+    if (!view) return;
+    if (view.state.unselectAbortController) {
+      view.state.unselectAbortController.abort();
+    }
+    const abortController = new AbortController();
+    view.state.selectAbortController = abortController;
+    try {
+      if (delayMs > 0) {
+        await delay(delayMs, abortController.signal);
+      }
+      view.active = true;
+      activateView();
+    } catch (error) {
+      if (isAbortError(error) && state.options.debug) {
+        console.log("selectView() was interrupted by a call to unselectView()");
+      }
+    }
+  }
+  function selectInitialView() {
+    const initialView = state.views?.find((view) => view.initial);
+    if (initialView) {
+      initialView.active = true;
+      activateView();
+    }
+  }
+  async function unselectView(id, delayMs = 0) {
+    const view = getView(id);
+    if (!view) return;
+    if (view.state.selectAbortController) {
+      view.state.selectAbortController.abort();
+    }
+    const abortController = new AbortController();
+    view.state.unselectAbortController = abortController;
+    try {
+      if (delayMs > 0) {
+        await delay(delayMs, abortController.signal);
+      }
+      view.active = false;
+      activateView();
+    } catch (error) {
+      if (isAbortError(error) && state.options.debug) {
+        console.log("unselectView() was interrupted by a call to selectView()");
+      }
+    }
+  }
+  function unselectUnrelatedViews(id) {
+    const views = getUnrelatedViews(id);
+    for (const view of views) {
+      view.active = false;
+    }
+  }
+  function unselectAllViews() {
+    for (const view of state.views) {
+      view.active = false;
+    }
+  }
+  function initializeView(args) {
+    const { id } = args;
+    const view = getView(id) ?? addView(args);
+    return view;
+  }
+  function sortViewItems(viewId) {
+    const parent = document.querySelector(`[data-id="${viewId}-content"]`);
+    const view = getView(viewId);
+    const elements = Array.from(
+      parent?.querySelectorAll(".magic-command-item") ?? []
+    );
+    function getIndex(id) {
+      return elements.findIndex((el) => el.dataset.id === id);
+    }
+    view?.items?.sort((a, b) => getIndex(a.id) - getIndex(b.id));
+  }
   return {
+    currentView,
+    initializeView,
+    deleteView,
+    getView,
+    getRelativeViewIndex,
+    getNextView,
+    getPreviousView,
+    getTopLevelView,
+    getNestedView,
+    getParentView,
     selectView,
-    selectLastView,
-    activeView,
-    lastActiveView
+    selectInitialView,
+    unselectView,
+    unselectUnrelatedViews,
+    unselectAllViews,
+    sortViewItems
   };
 }

package/dist/plugins/MagicCommand/src/composables/useMagicCommand.d.ts

@@ -1,10 +1,19 @@
 import { type MaybeRef } from 'vue';
+interface SelectItemArgs {
+    id: string;
+    viewId: string;
+}
+interface UnselectItemArgs {
+    id: string;
+    viewId: string;
+}
 export declare function useMagicCommand(id: MaybeRef<string>): {
     isActive: import("vue").ComputedRef<boolean>;
-    open: () => void;
+    open: () => Promise<void>;
     close: () => void;
-    selectItem: (id: string) => void;
-    selectLastItem: () => void;
-    selectView: (id: string) => void;
-    selectLastView: () => void;
+    selectItem: (args: SelectItemArgs) => void;
+    unselectItem: (args: UnselectItemArgs) => void;
+    selectView: (id: string, delayMs?: number) => Promise<void>;
+    unselectView: (id: string, delayMs?: number) => Promise<void>;
 };
+export {};

package/dist/plugins/MagicCommand/src/composables/useMagicCommand.mjs

@@ -1,27 +1,57 @@
-import { computed, toValue } from "vue";
-import { useCommandStore } from "./private/useCommandStore.mjs";
+import { computed, nextTick } from "vue";
+import { useCommandState } from "./private/useCommandState.mjs";
 import { useCommandItem } from "./private/useCommandItem.mjs";
 import { useCommandView } from "./private/useCommandView.mjs";
 export function useMagicCommand(id) {
-  const isActive = computed(
-    () => commandStore.value.map((item) => item.id).includes(toValue(id))
-  );
-  const { commandStore, addInstance, removeInstance } = useCommandStore();
-  function open() {
-    addInstance(toValue(id));
+  const { initializeState } = useCommandState(id);
+  const state = initializeState();
+  const isActive = computed(() => state.active);
+  const { selectView, unselectView, selectInitialView, unselectAllViews } = useCommandView(id);
+  async function open() {
+    state.active = true;
+    await nextTick();
+    selectInitialView();
   }
   function close() {
-    removeInstance(toValue(id));
+    state.active = false;
+    state.input.view = void 0;
+    unselectAllViews();
+  }
+  function selectItem(args) {
+    const { id: id2, viewId } = args;
+    if (!viewId) {
+      throw new Error("viewId is required to select an item");
+    }
+    if (!id2) {
+      throw new Error("id is required to select an item");
+    }
+    const { selectItem: selectItem2 } = useCommandItem({
+      instanceId: id2,
+      viewId
+    });
+    return selectItem2(id2);
+  }
+  function unselectItem(args) {
+    const { id: id2, viewId } = args;
+    if (!viewId) {
+      throw new Error("viewId is required to select an item");
+    }
+    if (!id2) {
+      throw new Error("id is required to select an item");
+    }
+    const { unselectItem: unselectItem2 } = useCommandItem({
+      instanceId: id2,
+      viewId
+    });
+    return unselectItem2(id2);
   }
-  const { selectItem, selectLastItem } = useCommandItem(toValue(id));
-  const { selectView, selectLastView } = useCommandView();
   return {
     isActive,
     open,
     close,
     selectItem,
-    selectLastItem,
+    unselectItem,
     selectView,
-    selectLastView
+    unselectView
   };
 }

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

@@ -1,5 +1,12 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicCommandOptions } from '../types/index.js';
 declare const MagicCommandInstanceId: InjectionKey<MaybeRef<string>>;
+declare const MagicCommandParentTree: InjectionKey<string[]>;
+declare const MagicCommandViewId: InjectionKey<string>;
+declare const MagicCommandViewActive: InjectionKey<Ref<boolean>>;
+declare const MagicCommandContentId: InjectionKey<string>;
+declare const MagicCommandItemId: InjectionKey<string>;
+declare const MagicCommandItemActive: InjectionKey<Ref<boolean>>;
+declare const MagicCommandItemDisabled: InjectionKey<Ref<boolean>>;
 declare const MagicCommandProviderOptions: InjectionKey<MagicCommandOptions>;
-export { MagicCommandInstanceId, MagicCommandProviderOptions };
+export { MagicCommandInstanceId, MagicCommandParentTree, MagicCommandViewId, MagicCommandViewActive, MagicCommandContentId, MagicCommandItemId, MagicCommandItemActive, MagicCommandItemDisabled, MagicCommandProviderOptions, };

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

@@ -1,3 +1,20 @@
 const MagicCommandInstanceId = Symbol();
+const MagicCommandParentTree = Symbol();
+const MagicCommandViewId = Symbol();
+const MagicCommandViewActive = Symbol();
+const MagicCommandContentId = Symbol();
+const MagicCommandItemId = Symbol();
+const MagicCommandItemActive = Symbol();
+const MagicCommandItemDisabled = Symbol();
 const MagicCommandProviderOptions = Symbol();
-export { MagicCommandInstanceId, MagicCommandProviderOptions };
+export {
+  MagicCommandInstanceId,
+  MagicCommandParentTree,
+  MagicCommandViewId,
+  MagicCommandViewActive,
+  MagicCommandContentId,
+  MagicCommandItemId,
+  MagicCommandItemActive,
+  MagicCommandItemDisabled,
+  MagicCommandProviderOptions
+};

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

@@ -1,23 +1,83 @@
 import type { MagicModalOptions } from '../../../MagicModal/index.js';
 import type { MagicDrawerOptions } from '../../../MagicDrawer/index.js';
-export type MagicCommandOptions = {
-    keys?: {
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
+export interface MagicCommandOptions {
+    debug?: boolean;
+    transition?: {
+        content?: string;
+    };
+    keyListener?: {
         open?: string[] | false;
         close?: string[] | false;
         next?: string[] | false;
         prev?: string[] | false;
+        enter?: string[] | false;
     };
     loop?: boolean;
-};
-export type CommandEvents = {
-    beforeEnter: string;
-    enter: string;
-    afterEnter: string;
-    beforeLeave: string;
-    leave: string;
-    afterLeave: string;
-};
-export interface MagicCommandModalOptions extends MagicModalOptions {
 }
-export interface MagicCommandDrawerOptions extends MagicDrawerOptions {
+export type CommandDefaultOptions = RequireAllNested<MagicCommandOptions>;
+export type Action = 'open' | 'close';
+export type Interaction = 'click' | 'mouseenter';
+export interface CommandItem {
+    id: string;
+    active: boolean;
+    disabled: boolean;
+}
+export interface CommandChannel {
+    id: string;
+    active: boolean;
+}
+export interface CommandView {
+    id: string;
+    active: boolean;
+    initial: boolean;
+    items: CommandItem[];
+    channels: CommandChannel[];
+    parent: {
+        item: string;
+        views: string[];
+    };
+    state: {
+        selectAbortController: AbortController;
+        unselectAbortController: AbortController;
+    };
+}
+export interface CommandState {
+    id: string;
+    active: boolean;
+    views: CommandView[];
+    renderer: HTMLElement | null;
+    options: MagicCommandOptions;
+    input: {
+        type: 'keyboard' | 'pointer';
+        view: string | undefined;
+    };
 }
+export type CommandEvents = {
+    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 type { MagicModalOptions as MagicCommandModalOptions };
+export type { MagicDrawerOptions as MagicCommandDrawerOptions };

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

@@ -1,5 +1,3 @@
-import type { MagicCommandOptions } from '../types/index.js';
-import type { RequireAllNested } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAllNested<MagicCommandOptions>;
-type DefaultOptions = typeof defaultOptions;
-export { defaultOptions, type DefaultOptions };
+import type { CommandDefaultOptions } from '../types/index.js';
+declare const defaultOptions: CommandDefaultOptions;
+export { defaultOptions };

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

@@ -1,9 +1,14 @@
 const defaultOptions = {
-  keys: {
-    open: ["Cmd+k"],
+  debug: false,
+  transition: {
+    content: "magic-command-content"
+  },
+  keyListener: {
+    open: ["Cmd+k", "Ctrl+k"],
     close: ["Escape"],
     next: ["ArrowDown"],
-    prev: ["ArrowUp"]
+    prev: ["ArrowUp"],
+    enter: ["Enter"]
   },
   loop: false
 };

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

@@ -1,5 +1,7 @@
-import type { Plugin } from 'vue';
-import MagicCookie from './src/components/MagicCookie.vue.js';
+import MagicCookieProvider from './src/components/MagicCookieProvider.vue.js';
 import { useMagicCookie } from './src/composables/useMagicCookie.js';
+import type { Plugin } from 'vue';
+import type { MagicCookieCallbackArgs, MagicCookieOptions } from './src/types/index.js';
 declare const MagicCookiePlugin: Plugin;
-export { MagicCookiePlugin, MagicCookie, useMagicCookie };
+export { MagicCookiePlugin, MagicCookieProvider, useMagicCookie };
+export type { MagicCookieCallbackArgs, MagicCookieOptions };

package/dist/plugins/MagicCookie/index.mjs

@@ -1,8 +1,12 @@
-import MagicCookie from "./src/components/MagicCookie.vue";
+import MagicCookieItem from "./src/components/MagicCookieItem.vue";
+import MagicCookieView from "./src/components/MagicCookieView.vue";
+import MagicCookieProvider from "./src/components/MagicCookieProvider.vue";
 import { useMagicCookie } from "./src/composables/useMagicCookie.mjs";
 const MagicCookiePlugin = {
   install: (app) => {
-    app.component("MagicCookie", MagicCookie);
+    app.component("MagicCookieView", MagicCookieView);
+    app.component("MagicCookieProvider", MagicCookieProvider);
+    app.component("MagicCookieItem", MagicCookieItem);
   }
 };
-export { MagicCookiePlugin, MagicCookie, useMagicCookie };
+export { MagicCookiePlugin, MagicCookieProvider, useMagicCookie };

package/dist/plugins/MagicCookie/nuxt.mjs

@@ -1,7 +1,7 @@
 import {
   defineNuxtModule,
   createResolver,
-  addComponent,
+  addComponentsDir,
   addImports,
   extendViteConfig
 } from "@nuxt/kit";
@@ -18,18 +18,14 @@ export default defineNuxtModule({
       config.optimizeDeps.include = config.optimizeDeps.include || [];
       config.optimizeDeps.include.push("universal-cookie");
     });
-    addComponent({
-      filePath: resolver.resolve("src/components/MagicCookie.vue"),
-      name: "MagicCookie",
-      global: true
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
     });
     addImports({
       from: "@maas/vue-equipment/plugins/MagicCookie",
       name: "useMagicCookie"
     });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicCookie",
-      name: "useCookietEmitter"
-    });
   }
 });