@maas/vue-equipment 0.21.6 → 0.22.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.21.5"
+  "version": "0.22.0"
 }

package/dist/nuxt/module.mjs

@@ -1,6 +1,13 @@
 import { defineNuxtModule, createResolver, extendViteConfig, installModule, addImportsSources } from '@nuxt/kit';
 
 const functions$1 = [
+	{
+		name: "MagicCommand",
+		"package": "plugins",
+		lastUpdated: 1708513784000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicCommand/",
+		description: "command"
+	},
 	{
 		name: "MagicCookie",
 		"package": "plugins",

package/dist/plugins/MagicCommand/demo/DefaultView.vue

@@ -0,0 +1,57 @@
+<template>
+  <magic-command-view
+    id="default-view"
+    :default="true"
+    class="bg-neutral-800 border border-solid border-neutral-600 w-[40rem] max-h-[30rem] rounded-xl overflow-hidden flex flex-col"
+  >
+    <magic-command-head class="p-2">
+      <div class="w-full border border-neutral-600 p-3 border-b-solid">
+        <magic-command-input>
+          <input type="text" placeholder="Search" />
+        </magic-command-input>
+      </div>
+    </magic-command-head>
+    <magic-command-body class="h-full pb-2">
+      <magic-command-group>
+        <h2 class="p-4 text-xs text-neutral-600">Suggestions</h2>
+        <magic-command-item
+          v-slot="{ isActive }"
+          :default="true"
+          :callback="projectItemCallback"
+        >
+          <demo-item :is-active="isActive">View Projects</demo-item>
+        </magic-command-item>
+      </magic-command-group>
+      <magic-command-group>
+        <h2 class="p-4 text-xs text-neutral-600">Filter</h2>
+        <magic-command-item
+          v-for="nth in 20"
+          :key="nth"
+          :callback="() => itemCallback(nth)"
+          v-slot="{ isActive }"
+        >
+          <demo-item :is-active="isActive">{{ nth }}</demo-item>
+        </magic-command-item>
+      </magic-command-group>
+    </magic-command-body>
+  </magic-command-view>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useCommandApi, CommandInstanceId } from '@maas/vue-equipment/plugins'
+import DemoItem from './DemoItem.vue'
+
+const commandId = inject(CommandInstanceId, '')
+
+const commandApi = useCommandApi(commandId)
+const { selectView } = commandApi
+
+function itemCallback(nth: number) {
+  console.log(nth)
+}
+
+function projectItemCallback() {
+  selectView('project-view')
+}
+</script>

package/dist/plugins/MagicCommand/demo/DefaultView.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/plugins/MagicCommand/demo/DemoItem.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="px-2">
+    <span
+      class="p-2 flex items-center rounded-md"
+      :class="{ 'bg-neutral-700': isActive }"
+    >
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isActive: boolean
+}
+
+defineProps<Props>()
+</script>

package/dist/plugins/MagicCommand/demo/DemoItem.vue.d.ts

@@ -0,0 +1,21 @@
+interface Props {
+    isActive: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+    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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicCommand/demo/ProjectView.vue

@@ -0,0 +1,55 @@
+<template>
+  <magic-command-view
+    id="project-view"
+    class="bg-neutral-800 border border-solid border-neutral-600 w-[40rem] max-h-[30rem] rounded-xl overflow-hidden flex flex-col"
+  >
+    <magic-command-head class="p-2">
+      <div class="w-full border border-neutral-600 p-3 border-b-solid">
+        <magic-command-input>
+          <input type="text" placeholder="Search Projects" />
+        </magic-command-input>
+      </div>
+    </magic-command-head>
+    <magic-command-body class="h-full pb-2">
+      <magic-command-group>
+        <magic-command-item
+          v-for="nth in 10"
+          :key="nth"
+          :callback="() => itemCallback(nth)"
+          :default="nth === 1"
+          v-slot="{ isActive }"
+        >
+          <demo-item :is-active="isActive">Project {{ nth }}</demo-item>
+        </magic-command-item>
+      </magic-command-group>
+    </magic-command-body>
+    <magic-command-footer class="px-2">
+      <div
+        class="w-full border border-neutral-600 p-2 border-t-solid flex items-center"
+      >
+        <button
+          @click="selectLastView"
+          class="leading-none text-xs text-neutral-600"
+        >
+          Go Back
+        </button>
+      </div>
+    </magic-command-footer>
+  </magic-command-view>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useCommandApi, CommandInstanceId } from '@maas/vue-equipment/plugins'
+
+import DemoItem from './DemoItem.vue'
+
+const commandId = inject(CommandInstanceId, '')
+
+const commandApi = useCommandApi(commandId)
+const { selectLastView } = commandApi
+
+function itemCallback(nth: number) {
+  console.log(nth)
+}
+</script>

package/dist/plugins/MagicCommand/demo/ProjectView.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { useCommandApi } from './src/composables/useCommandApi.js';
+import { useCommandEmitter } from './src/composables/useCommandEmitter.js';
+import { CommandInstanceId, CommandOptionsKey } from './src/symbols.js';
+import type { Plugin } from 'vue';
+import type { CommandEvents } from './src/types/index.js';
+declare const MagicCommandPlugin: Plugin;
+export { MagicCommandPlugin, useCommandApi, useCommandEmitter, CommandInstanceId, CommandOptionsKey, };
+export type { CommandEvents };

package/dist/plugins/MagicCommand/index.mjs

@@ -0,0 +1,28 @@
+import MagicCommand from "./src/components/MagicCommand.vue";
+import MagicCommandBody from "./src/components/MagicCommandBody.vue";
+import MagicCommandFooter from "./src/components/MagicCommandFooter.vue";
+import MagicCommandGroup from "./src/components/MagicCommandGroup.vue";
+import MagicCommandHead from "./src/components/MagicCommandHead.vue";
+import MagicCommandItem from "./src/components/MagicCommandItem.vue";
+import MagicCommandView from "./src/components/MagicCommandView.vue";
+import { useCommandApi } from "./src/composables/useCommandApi.mjs";
+import { useCommandEmitter } from "./src/composables/useCommandEmitter.mjs";
+import { CommandInstanceId, CommandOptionsKey } from "./src/symbols/index.mjs";
+const MagicCommandPlugin = {
+  install: (app) => {
+    app.component("MagicCommand", MagicCommand);
+    app.component("MagicCommandBody", MagicCommandBody);
+    app.component("MagicCommandFooter", MagicCommandFooter);
+    app.component("MagicCommandGroup", MagicCommandGroup);
+    app.component("MagicCommandHead", MagicCommandHead);
+    app.component("MagicCommandItem", MagicCommandItem);
+    app.component("MagicCommandView", MagicCommandView);
+  }
+};
+export {
+  MagicCommandPlugin,
+  useCommandApi,
+  useCommandEmitter,
+  CommandInstanceId,
+  CommandOptionsKey
+};

package/dist/plugins/MagicCommand/nuxt.mjs

@@ -0,0 +1,27 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponentsDir,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicCommand"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicCommand",
+      name: "useCommandApi"
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicCommand",
+      name: "useCommandEmitter"
+    });
+  }
+});

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

@@ -0,0 +1,180 @@
+<template>
+  <teleport
+    v-if="wrapperActive"
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <component
+      :is="mappedOptions.tag"
+      ref="commandRef"
+      class="magic-command"
+      :id="toValue(id)"
+      :class="toValue(props.class)"
+      @click.self="close"
+      aria-command="true"
+    >
+      <transition
+        v-if="mappedOptions.backdrop || !!$slots.backdrop"
+        :name="mappedOptions.transitions?.backdrop"
+      >
+        <div
+          v-show="innerActive"
+          class="magic-command__backdrop"
+          @click.self="close"
+        >
+          <slot name="backdrop" />
+        </div>
+      </transition>
+      <transition
+        :name="mappedOptions.transitions?.content"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+        @before-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+      >
+        <div
+          v-show="innerActive"
+          class="magic-command__content"
+          @click.self="close"
+        >
+          <slot />
+        </div>
+      </transition>
+    </component>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  watch,
+  nextTick,
+  toValue,
+  onBeforeUnmount,
+  provide,
+  type MaybeRef,
+} from 'vue'
+import { createDefu } from 'defu'
+import { useMagicKeys } from '@vueuse/core'
+import { defaultOptions } from './../utils/defaultOptions'
+import { useCommandApi } from './../composables/useCommandApi'
+import { useCommandCallback } from '../composables/private/useCommandCallback'
+import { CommandInstanceId, CommandOptionsKey } from './../symbols'
+
+import type { CommandOptions } from './../types/index'
+
+import '@maas/vue-equipment/utils/css/animations/fade-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+
+// Prevent keys arrays from being merged with default
+const customDefu = createDefu((obj, key, value) => {
+  if (key === 'open' || key === 'close' || key === 'next' || key === 'prev') {
+    obj[key] = value
+    return true
+  }
+})
+
+interface MagicCommandProps {
+  id: MaybeRef<string>
+  class?: MaybeRef<string>
+  props?: Record<string, unknown>
+  options?: CommandOptions
+}
+
+const props = withDefaults(defineProps<MagicCommandProps>(), {
+  options: () => defaultOptions,
+})
+
+const keys = useMagicKeys()
+const commandRef = ref<HTMLElement | undefined>(undefined)
+const commandApi = useCommandApi(props.id, { focusTarget: commandRef })
+const mappedOptions = customDefu(props.options, defaultOptions)
+
+const {
+  isActive,
+  open,
+  close,
+  trapFocus,
+  releaseFocus,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+} = commandApi
+
+// Split isActive into two values to animate command smoothly
+const innerActive = ref(false)
+const wrapperActive = ref(false)
+
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+} = useCommandCallback({
+  id: props.id,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive,
+})
+
+// Handle state
+async function onOpen() {
+  wrapperActive.value = true
+  await nextTick()
+  innerActive.value = true
+}
+
+function onClose() {
+  innerActive.value = false
+}
+
+if (mappedOptions.keys?.open) {
+  for (const key of mappedOptions.keys.open) {
+    watch(keys[key], (value) => {
+      if (value) {
+        open()
+      }
+    })
+  }
+}
+
+if (mappedOptions.keys?.close) {
+  for (const key of mappedOptions.keys.close) {
+    watch(keys[key], (value) => {
+      if (value) {
+        close()
+      }
+    })
+  }
+}
+
+watch(isActive, async (value) => {
+  if (value) {
+    await onOpen()
+  } else {
+    onClose()
+  }
+})
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
+
+provide(CommandInstanceId, props.id)
+provide(CommandOptionsKey, mappedOptions)
+</script>
+
+<style>
+:root{--magic-command-z-index:999;--magic-command-backdrop-color:rgba(0,0,0,.5);--magic-command-backdrop-filter:unset;--magic-command-content-align-items:center;--magic-command-content-justify-content:center;--magic-command-content-overflow-y:auto}@keyframes magic-command-content-enter{0%{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:translateY(0)}}@keyframes magic-command-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-command{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-command-z-index)}.magic-command__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-command-content-align-items);display:flex;justify-content:var(--magic-command-content-justify-content);max-height:100%;overflow-y:var(--magic-command-content-overflow-y);scroll-behavior:smooth;width:100%}.magic-command__backdrop{-webkit-backdrop-filter:var(--magic-command-backdrop-filter);backdrop-filter:var(--magic-command-backdrop-filter);background-color:var(--magic-command-backdrop-color);bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-command--content-enter-active{animation:magic-command-content-enter .3s ease}.magic-command--content-leave-active{animation:magic-command-content-leave .3s ease}@media (prefers-reduced-motion){.magic-command--content-enter-active{animation:fade-in .3s ease}.magic-command--content-leave-active{animation:fade-out .3s ease}}.magic-command--backdrop-enter-active{animation:fade-in .3s ease}.magic-command--backdrop-leave-active{animation:fade-out .3s ease}
+</style>

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

@@ -0,0 +1,43 @@
+import { type MaybeRef } from 'vue';
+import type { CommandOptions } from './../types/index';
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+interface MagicCommandProps {
+    id: MaybeRef<string>;
+    class?: MaybeRef<string>;
+    props?: Record<string, unknown>;
+    options?: CommandOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicCommandProps>, {
+    options: () => CommandOptions;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicCommandProps>, {
+    options: () => CommandOptions;
+}>>>, {
+    options: CommandOptions;
+}, {}>, {
+    backdrop?(_: {}): any;
+    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/components/MagicCommandBody.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="magic-command-body" ref="elRef">
+    <slot />
+  </div>
+</template>
+<script lang="ts" setup>
+import { inject, ref, watch, nextTick } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+
+import { useCommandItem } from '../composables/private/useCommandItem'
+import { useCommandScroll } from '../composables/private/useCommandScroll'
+import { CommandInstanceId, CommandOptionsKey } from '../symbols'
+
+import type { CommandOptions } from '../types'
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const commandId = inject(CommandInstanceId, '')
+const options = inject(CommandOptionsKey, {} as CommandOptions)
+
+const { activeItem, nextItem, prevItem } = useCommandItem(commandId)
+const { findElement, isElementAbove, isElementBelow, scrollInFromBottom } =
+  useCommandScroll(elRef)
+
+const keys = useMagicKeys()
+
+const nextTimeout = ref<NodeJS.Timeout | undefined>(undefined)
+const prevTimeout = ref<NodeJS.Timeout | undefined>(undefined)
+const nextInterval = ref<NodeJS.Timer | undefined>(undefined)
+const prevInterval = ref<NodeJS.Timer | undefined>(undefined)
+
+if (options.keys?.next) {
+  for (const key of options.keys.next) {
+    watch(keys[key], (value) => {
+      if (value) {
+        nextItem(options.loop)
+        nextTimeout.value = setTimeout(() => {
+          nextInterval.value = setInterval(() => {
+            nextItem(options.loop)
+          }, 100)
+        }, 500)
+      } else {
+        clearTimeout(nextTimeout.value)
+        clearInterval(nextInterval.value)
+      }
+    })
+  }
+}
+
+if (options.keys?.prev) {
+  for (const key of options.keys.prev) {
+    watch(keys[key], (value) => {
+      if (value) {
+        prevItem(options.loop)
+        prevTimeout.value = setTimeout(() => {
+          prevInterval.value = setInterval(() => {
+            prevItem(options.loop)
+          }, 100)
+        }, 500)
+      } else {
+        clearTimeout(prevTimeout.value)
+        clearInterval(prevInterval.value)
+      }
+    })
+  }
+}
+
+watch(activeItem, async (value) => {
+  if (!value) return
+
+  nextTick(() => {
+    const element = findElement(value)
+    if (element) {
+      if (isElementAbove(element)) {
+        element.scrollIntoView()
+      } else if (isElementBelow(element)) {
+        scrollInFromBottom(element)
+      }
+    }
+  })
+})
+</script>
+
+<style>
+:root{--magic-command-body-height:100%;--magic-command-body-overflow-y:auto}.magic-command-body{height:var(--magic-command-body-height);overflow-y:var(--magic-command-body-overflow-y)}
+</style>

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

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="magic-command-footer">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="magic-command-group">
+    <slot></slot>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="magic-command-head">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};