@maas/vue-equipment 0.21.6 → 0.22.1

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

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="magic-command-item"
+    ref="elRef"
+    :data-id="mappedId"
+    :aria-selected="isActive"
+  >
+    <slot :is-active="isActive" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  inject,
+  toValue,
+  nextTick,
+  onMounted,
+  onUnmounted,
+} from 'vue'
+import { useEventListener, onKeyStroke } from '@vueuse/core'
+import { uuid } from '@maas/vue-equipment/utils'
+import { useCommandStore } from '../composables/private/useCommandStore'
+import { useCommandItem } from '../composables/private/useCommandItem'
+import { CommandInstanceId } from '../symbols'
+
+interface Props {
+  id?: string
+  default?: boolean
+  callback: Function | false
+  listener?: ('click' | 'hover')[]
+  keys?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  listener: () => ['click'],
+  keys: () => ['Enter'],
+})
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const commandId = inject(CommandInstanceId, '')
+const { selectItem, activeItem } = useCommandItem(commandId)
+
+const mappedId = computed(() => {
+  return props.id || uuid()
+})
+
+const isActive = computed(() => {
+  return toValue(mappedId) === activeItem.value
+})
+
+function listenerCallback() {
+  selectItem(mappedId.value)
+  nextTick(() => {
+    if (props.callback) {
+      props.callback()
+    }
+  })
+}
+
+useEventListener(elRef, props.listener, listenerCallback)
+
+if (props.keys.length) {
+  onKeyStroke(props.keys, () => (isActive.value ? listenerCallback() : null))
+}
+
+const { addItem, removeItem } = useCommandStore()
+
+onMounted(() => {
+  if (toValue(commandId)) {
+    addItem(toValue(commandId), mappedId.value)
+  }
+
+  nextTick(() => {
+    if (props.default) {
+      selectItem(mappedId.value)
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (toValue(commandId)) {
+    removeItem(toValue(commandId), mappedId.value)
+  }
+})
+</script>
+
+<style>
+.magic-command-item{cursor:pointer}
+</style>

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

@@ -0,0 +1,44 @@
+interface Props {
+    id?: string;
+    default?: boolean;
+    callback: Function | false;
+    listener?: ('click' | 'hover')[];
+    keys?: string[];
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    listener: () => string[];
+    keys: () => string[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    listener: () => string[];
+    keys: () => string[];
+}>>>, {
+    keys: string[];
+    listener: ("click" | "hover")[];
+}, {}>, {
+    default?(_: {
+        isActive: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="magic-command-view" v-if="isActive">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, toValue, onMounted, onUnmounted } from 'vue'
+import { uuid } from '@maas/vue-equipment/utils'
+import { useCommandStore } from '../composables/private/useCommandStore'
+import { useCommandView } from '../composables/private/useCommandView'
+import { CommandInstanceId } from '../symbols'
+
+interface Props {
+  id?: string
+  default?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { default: false })
+const commandId = inject(CommandInstanceId, '')
+
+const { activeView, selectView } = useCommandView()
+
+const mappedId = computed(() => {
+  return props.id || uuid()
+})
+
+const isActive = computed(() => {
+  return toValue(mappedId) === activeView.value
+})
+
+const { addView, removeView } = 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)
+  }
+})
+</script>

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

@@ -0,0 +1,36 @@
+interface Props {
+    id?: string;
+    default?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    default: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    default: boolean;
+}>>>, {
+    default: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,22 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { CommandOptions } from '../../types.js';
+type UseCommandCallbackArgs = {
+    id: MaybeRef<string>;
+    mappedOptions: CommandOptions;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    wrapperActive: Ref<boolean>;
+};
+export declare function useCommandCallback(args: UseCommandCallbackArgs): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (_el: Element) => Promise<void>;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (_el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+};
+export {};

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

@@ -0,0 +1,61 @@
+import { toValue, nextTick } from "vue";
+import { useCommandEmitter } from "./../useCommandEmitter.mjs";
+export function useCommandCallback(args) {
+  const {
+    id,
+    mappedOptions,
+    addScrollLockPadding,
+    removeScrollLockPadding,
+    lockScroll,
+    unlockScroll,
+    trapFocus,
+    releaseFocus,
+    wrapperActive
+  } = args;
+  function onBeforeEnter(_el) {
+    useCommandEmitter().emit("beforeEnter", toValue(id));
+    if (mappedOptions.scrollLock) {
+      if (mappedOptions.scrollLockPadding) {
+        addScrollLockPadding();
+      }
+      lockScroll();
+    }
+  }
+  function onEnter(_el) {
+    useCommandEmitter().emit("enter", toValue(id));
+  }
+  async function onAfterEnter(_el) {
+    useCommandEmitter().emit("afterEnter", toValue(id));
+    if (mappedOptions.focusTrap) {
+      await nextTick();
+      trapFocus();
+    }
+  }
+  function onBeforeLeave(_el) {
+    useCommandEmitter().emit("beforeLeave", toValue(id));
+  }
+  function onLeave(_el) {
+    useCommandEmitter().emit("leave", toValue(id));
+  }
+  function onAfterLeave(_el) {
+    useCommandEmitter().emit("afterLeave", toValue(id));
+    if (mappedOptions.scrollLock) {
+      unlockScroll();
+      if (mappedOptions.scrollLockPadding) {
+        removeScrollLockPadding();
+      }
+    }
+    if (mappedOptions.focusTrap) {
+      releaseFocus();
+    }
+    wrapperActive.value = false;
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

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

@@ -0,0 +1,9 @@
+import { type MaybeRef } from 'vue';
+export declare function useCommandItem(id: MaybeRef<string>): {
+    nextItem: (loop?: boolean) => void;
+    prevItem: (loop?: boolean) => void;
+    selectItem: (id: string) => void;
+    selectLastItem: () => void;
+    activeItem: import("vue").Ref<string | undefined>;
+    lastActiveItem: import("vue").Ref<string | undefined>;
+};

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

@@ -0,0 +1,54 @@
+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.indexOf(activeItem.value || "");
+      const hasNext = items.value[index + 1] !== void 0;
+      if (hasNext) {
+        selectItem(items.value[index + 1]);
+      } else if (loop) {
+        selectItem(items.value[0]);
+      }
+    }
+  }
+  function prevItem(loop = false) {
+    if (items.value) {
+      const index = items.value.indexOf(activeItem.value || "");
+      const hasPrev = items.value[index - 1] !== void 0;
+      if (hasPrev) {
+        selectItem(items.value[index - 1]);
+      } else if (loop) {
+        selectItem(items.value[items.value.length - 1]);
+      }
+    }
+  }
+  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;
+    });
+  }
+  return {
+    nextItem,
+    prevItem,
+    selectItem,
+    selectLastItem,
+    activeItem,
+    lastActiveItem
+  };
+}

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

@@ -0,0 +1,7 @@
+import { type MaybeRef } from 'vue';
+export declare function useCommandScroll(parent: MaybeRef<HTMLElement | undefined>): {
+    isElementAbove: (element: MaybeRef<HTMLElement>) => boolean;
+    isElementBelow: (element: MaybeRef<HTMLElement>) => boolean;
+    findElement: (id: string) => HTMLElement | null;
+    scrollInFromBottom: (element: HTMLElement) => void;
+};

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

@@ -0,0 +1,44 @@
+import { toValue, computed } from "vue";
+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);
+  }
+  function isElementAbove(element) {
+    const elementRect = toValue(element).getBoundingClientRect();
+    const parentRect = mappedParent.value.getBoundingClientRect();
+    const parentTop = parentRect.top + paddingTop.value;
+    return elementRect.top < parentTop;
+  }
+  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 findElement(id) {
+    return mappedParent.value.querySelector(`[data-id="${id}"]`);
+  }
+  function scrollInFromBottom(element) {
+    const elementRect = element.getBoundingClientRect();
+    const parentRect = mappedParent.value.getBoundingClientRect();
+    const scrollAmount = elementRect.bottom - parentRect.bottom + paddingBottom.value;
+    mappedParent.value.scrollBy({
+      top: scrollAmount
+    });
+  }
+  return {
+    isElementAbove,
+    isElementBelow,
+    findElement,
+    scrollInFromBottom
+  };
+}

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

@@ -0,0 +1,20 @@
+type CommandInstance = {
+    id: string;
+    items: string[];
+    views: string[];
+};
+export declare function useCommandStore(): {
+    commandStore: import("vue").Ref<{
+        id: string;
+        items: string[];
+        views: string[];
+    }[]>;
+    addInstance: (id: string) => void;
+    findInstance: (id: string) => CommandInstance;
+    removeInstance: (id: string) => void;
+    addItem: (id: string, item: string) => void;
+    removeItem: (id: string, item: string) => void;
+    addView: (id: string, view: string) => void;
+    removeView: (id: string, view: string) => void;
+};
+export {};

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

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+let commandStore = ref([]);
+export function useCommandStore() {
+  function addInstance(id) {
+    commandStore.value.push({ id, items: [], views: [] });
+  }
+  function findInstance(id) {
+    const instance = commandStore.value.find((instance2) => {
+      return instance2.id === id;
+    });
+    return instance;
+  }
+  function removeInstance(id) {
+    commandStore.value = commandStore.value.filter(
+      (x) => x.id !== id
+    );
+  }
+  function addItem(id, item) {
+    const instance = findInstance(id);
+    instance.items.push(item);
+  }
+  function removeItem(id, item) {
+    const instance = findInstance(id);
+    if (instance) {
+      instance.items = instance.items.filter((x) => x !== item);
+    }
+  }
+  function addView(id, view) {
+    const instance = findInstance(id);
+    instance.views.push(view);
+  }
+  function removeView(id, view) {
+    const instance = findInstance(id);
+    if (instance) {
+      instance.views = instance.views.filter((x) => x !== view);
+    }
+  }
+  return {
+    commandStore,
+    addInstance,
+    findInstance,
+    removeInstance,
+    addItem,
+    removeItem,
+    addView,
+    removeView
+  };
+}

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

@@ -0,0 +1,6 @@
+export declare function useCommandView(): {
+    selectView: (id: string) => void;
+    selectLastView: () => void;
+    activeView: import("vue").Ref<string | undefined>;
+    lastActiveView: import("vue").Ref<string | undefined>;
+};

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

@@ -0,0 +1,25 @@
+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;
+    });
+  }
+  return {
+    selectView,
+    selectLastView,
+    activeView,
+    lastActiveView
+  };
+}

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

@@ -0,0 +1,21 @@
+import { type MaybeRef } from 'vue';
+import { type MaybeElementRef } from '@vueuse/core';
+import { type CommandOptions } from '../types/index.js';
+export type UseCommandApiOptions = Pick<CommandOptions, 'scrollLock'> & {
+    focusTarget: MaybeElementRef;
+};
+export declare function useCommandApi(id: MaybeRef<string>, options?: UseCommandApiOptions): {
+    isActive: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+    selectItem: (id: string) => void;
+    selectLastItem: () => void;
+    selectView: (id: string) => void;
+    selectLastView: () => void;
+};

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

@@ -0,0 +1,85 @@
+import { ref, computed, toValue } from "vue";
+import { defu } from "defu";
+import { useScrollLock } from "@vueuse/core";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { uuid, matchClass } from "@maas/vue-equipment/utils";
+import { useCommandStore } from "./private/useCommandStore.mjs";
+import { useCommandItem } from "./private/useCommandItem.mjs";
+import { useCommandView } from "./private/useCommandView.mjs";
+const defaultOptions = {
+  focusTarget: void 0,
+  scrollLock: true
+};
+export function useCommandApi(id, options) {
+  const positionFixedElements = ref([]);
+  const mappedId = computed(() => toValue(id) || uuid());
+  const mappedOptions = defu(options, defaultOptions);
+  const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
+  const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
+  const isActive = computed(
+    () => commandStore.value.map((item) => item.id).includes(mappedId.value)
+  );
+  const { commandStore, addInstance, removeInstance } = useCommandStore();
+  function open() {
+    addInstance(mappedId.value);
+  }
+  function close() {
+    removeInstance(mappedId.value);
+  }
+  function trapFocus() {
+    if (focusTrap) {
+      focusTrap.activate();
+    }
+  }
+  function releaseFocus() {
+    if (focusTrap) {
+      focusTrap.deactivate();
+    }
+  }
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined")
+      return;
+    const exclude = new RegExp(/magic-command(__backdrop)?/);
+    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 = ""
+    );
+  }
+  const { selectItem, selectLastItem } = useCommandItem(mappedId);
+  const { selectView, selectLastView } = useCommandView();
+  return {
+    isActive,
+    open,
+    close,
+    trapFocus,
+    releaseFocus,
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding,
+    selectItem,
+    selectLastItem,
+    selectView,
+    selectLastView
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { CommandEvents } from '../types.js';
+export declare function useCommandEmitter(): {
+    on: {
+        <Key extends keyof CommandEvents>(type: Key, handler: import("mitt").Handler<CommandEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CommandEvents>): void;
+    };
+    off: {
+        <Key_1 extends keyof CommandEvents>(type: Key_1, handler?: import("mitt").Handler<CommandEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CommandEvents>): void;
+    };
+    emit: {
+        <Key_2 extends keyof CommandEvents>(type: Key_2, event: CommandEvents[Key_2]): void;
+        <Key_3 extends keyof CommandEvents>(type: undefined extends CommandEvents[Key_3] ? Key_3 : never): void;
+    };
+};

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

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useCommandEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

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

@@ -0,0 +1,5 @@
+import type { InjectionKey, MaybeRef } from 'vue';
+import type { CommandOptions } from '../types.js';
+declare const CommandInstanceId: InjectionKey<MaybeRef<string>>;
+declare const CommandOptionsKey: InjectionKey<CommandOptions>;
+export { CommandInstanceId, CommandOptionsKey };

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

@@ -0,0 +1,3 @@
+const CommandInstanceId = Symbol();
+const CommandOptionsKey = Symbol();
+export { CommandInstanceId, CommandOptionsKey };