@maas/vue-equipment 0.22.1 → 0.22.3

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -4,7 +4,7 @@ const functions$1 = [
 	{
 		name: "MagicCommand",
 		"package": "plugins",
-		lastUpdated: 1708513784000,
+		lastUpdated: 1708531485000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicCommand/",
 		description: "command"
 	},

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

@@ -4,14 +4,12 @@
     :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">
+    <magic-command-head class="px-2 pt-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>
+        <input type="text" placeholder="Search" />
       </div>
     </magic-command-head>
-    <magic-command-body class="h-full pb-2">
+    <magic-command-body class="h-full py-2">
       <magic-command-group>
         <h2 class="p-4 text-xs text-neutral-600">Suggestions</h2>
         <magic-command-item
@@ -21,9 +19,21 @@
         >
           <demo-item :is-active="isActive">View Projects</demo-item>
         </magic-command-item>
+        <magic-command-item v-slot="{ isActive }" :callback="toggleDynamicItem">
+          <demo-item :is-active="isActive"
+            >{{ dynamic ? 'Remove' : 'Add ' }} Filter</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-slot="{ isActive }"
+          v-if="dynamic"
+          :callback="() => itemCallback('dynamic')"
+        >
+          <demo-item :is-active="isActive">All</demo-item>
+        </magic-command-item>
         <magic-command-item
           v-for="nth in 20"
           :key="nth"
@@ -38,16 +48,28 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { ref, inject } from 'vue'
 import { useCommandApi, CommandInstanceId } from '@maas/vue-equipment/plugins'
 import DemoItem from './DemoItem.vue'
 
+interface Props {
+  hasDynamicItem?: boolean
+}
+
+defineProps<Props>()
+
 const commandId = inject(CommandInstanceId, '')
 
 const commandApi = useCommandApi(commandId)
 const { selectView } = commandApi
 
-function itemCallback(nth: number) {
+const dynamic = ref(false)
+
+function toggleDynamicItem() {
+  dynamic.value = !dynamic.value
+}
+
+function itemCallback(nth: number | string) {
   console.log(nth)
 }
 

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

@@ -1,2 +1,14 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+interface Props {
+    hasDynamicItem?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
 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;
+    };
+};

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

@@ -5,9 +5,7 @@
   >
     <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>
+        <input type="text" placeholder="Search Projects" />
       </div>
     </magic-command-head>
     <magic-command-body class="h-full pb-2">

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

@@ -10,7 +10,6 @@
       class="magic-command"
       :id="toValue(id)"
       :class="toValue(props.class)"
-      @click.self="close"
       aria-command="true"
     >
       <transition
@@ -176,5 +175,5 @@ 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}
+: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;pointer-events:none;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);pointer-events:auto;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;pointer-events:auto;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/MagicCommandBody.vue

@@ -19,8 +19,13 @@ const commandId = inject(CommandInstanceId, '')
 const options = inject(CommandOptionsKey, {} as CommandOptions)
 
 const { activeItem, nextItem, prevItem } = useCommandItem(commandId)
-const { findElement, isElementAbove, isElementBelow, scrollInFromBottom } =
-  useCommandScroll(elRef)
+const {
+  findElement,
+  isElementAbove,
+  isElementBelow,
+  scrollInFromBottom,
+  scrollInFromTop,
+} = useCommandScroll(elRef)
 
 const keys = useMagicKeys()
 
@@ -72,7 +77,7 @@ watch(activeItem, async (value) => {
     const element = findElement(value)
     if (element) {
       if (isElementAbove(element)) {
-        element.scrollIntoView()
+        scrollInFromTop(element)
       } else if (isElementBelow(element)) {
         scrollInFromBottom(element)
       }

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

@@ -2,7 +2,7 @@
   <div
     class="magic-command-item"
     ref="elRef"
-    :data-id="mappedId"
+    :data-item-id="mappedId"
     :aria-selected="isActive"
   >
     <slot :is-active="isActive" />
@@ -18,6 +18,7 @@ import {
   nextTick,
   onMounted,
   onUnmounted,
+  getCurrentInstance,
 } from 'vue'
 import { useEventListener, onKeyStroke } from '@vueuse/core'
 import { uuid } from '@maas/vue-equipment/utils'

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

@@ -1,11 +1,20 @@
 <template>
-  <div class="magic-command-view" v-if="isActive">
+  <div class="magic-command-view" v-if="isActive" ref="elRef">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, toValue, onMounted, onUnmounted } from 'vue'
+import {
+  ref,
+  computed,
+  inject,
+  toValue,
+  onMounted,
+  onUnmounted,
+  watch,
+  nextTick,
+} from 'vue'
 import { uuid } from '@maas/vue-equipment/utils'
 import { useCommandStore } from '../composables/private/useCommandStore'
 import { useCommandView } from '../composables/private/useCommandView'
@@ -18,6 +27,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), { default: false })
 const commandId = inject(CommandInstanceId, '')
+const elRef = ref<HTMLElement | undefined>(undefined)
 
 const { activeView, selectView } = useCommandView()
 
@@ -29,7 +39,11 @@ const isActive = computed(() => {
   return toValue(mappedId) === activeView.value
 })
 
-const { addView, removeView } = useCommandStore()
+const items = computed(() => {
+  return findInstance(toValue(commandId))?.items
+})
+
+const { addView, removeView, findInstance, sortItems } = useCommandStore()
 
 onMounted(() => {
   if (toValue(commandId)) {
@@ -46,4 +60,16 @@ onUnmounted(() => {
     removeView(toValue(commandId), mappedId.value)
   }
 })
+
+// Update sorting for MagicCommandItems
+watch(
+  () => items.value.length,
+  () => {
+    nextTick(() => {
+      if (elRef.value) {
+        sortItems(toValue(commandId), elRef.value)
+      }
+    })
+  }
+)
 </script>

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

@@ -10,23 +10,27 @@ export function useCommandItem(id) {
   const { findInstance } = useCommandStore();
   function nextItem(loop = false) {
     if (items.value) {
-      const index = items.value.indexOf(activeItem.value || "");
+      const index = items.value.findIndex(
+        (item) => item.id === activeItem.value
+      );
       const hasNext = items.value[index + 1] !== void 0;
       if (hasNext) {
-        selectItem(items.value[index + 1]);
+        selectItem(items.value[index + 1].id);
       } else if (loop) {
-        selectItem(items.value[0]);
+        selectItem(items.value[0].id);
       }
     }
   }
   function prevItem(loop = false) {
     if (items.value) {
-      const index = items.value.indexOf(activeItem.value || "");
+      const index = items.value.findIndex(
+        (item) => item.id === activeItem.value
+      );
       const hasPrev = items.value[index - 1] !== void 0;
       if (hasPrev) {
-        selectItem(items.value[index - 1]);
+        selectItem(items.value[index - 1].id);
       } else if (loop) {
-        selectItem(items.value[items.value.length - 1]);
+        selectItem(items.value[items.value.length - 1].id);
       }
     }
   }

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

@@ -3,5 +3,6 @@ export declare function useCommandScroll(parent: MaybeRef<HTMLElement | undefine
     isElementAbove: (element: MaybeRef<HTMLElement>) => boolean;
     isElementBelow: (element: MaybeRef<HTMLElement>) => boolean;
     findElement: (id: string) => HTMLElement | null;
+    scrollInFromTop: (element: HTMLElement) => void;
     scrollInFromBottom: (element: HTMLElement) => void;
 };

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

@@ -25,7 +25,15 @@ export function useCommandScroll(parent) {
     return elementRect.bottom >= parentBottom;
   }
   function findElement(id) {
-    return mappedParent.value.querySelector(`[data-id="${id}"]`);
+    return mappedParent.value.querySelector(`[data-item-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({
+      top: scrollAmount
+    });
   }
   function scrollInFromBottom(element) {
     const elementRect = element.getBoundingClientRect();
@@ -39,6 +47,7 @@ export function useCommandScroll(parent) {
     isElementAbove,
     isElementBelow,
     findElement,
+    scrollInFromTop,
     scrollInFromBottom
   };
 }

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

@@ -1,12 +1,19 @@
+type Item = {
+    index: number;
+    id: string;
+};
 type CommandInstance = {
     id: string;
-    items: string[];
+    items: Item[];
     views: string[];
 };
 export declare function useCommandStore(): {
     commandStore: import("vue").Ref<{
         id: string;
-        items: string[];
+        items: {
+            index: number;
+            id: string;
+        }[];
         views: string[];
     }[]>;
     addInstance: (id: string) => void;
@@ -14,6 +21,7 @@ export declare function useCommandStore(): {
     removeInstance: (id: string) => void;
     addItem: (id: string, item: string) => void;
     removeItem: (id: string, item: string) => void;
+    sortItems: (id: string, parent: HTMLElement) => void;
     addView: (id: string, view: string) => void;
     removeView: (id: string, view: string) => void;
 };

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

@@ -15,14 +15,26 @@ export function useCommandStore() {
       (x) => x.id !== id
     );
   }
+  function sortItems(id, parent) {
+    const instance = findInstance(id);
+    const itemElements = parent.querySelectorAll("[data-item-id]");
+    itemElements.forEach((el, index) => {
+      const itemId = el.dataset.itemId;
+      const item = instance.items.find((item2) => item2.id === itemId);
+      if (item) {
+        item.index = index;
+      }
+    });
+    instance.items.sort((a, b) => a.index - b.index);
+  }
   function addItem(id, item) {
     const instance = findInstance(id);
-    instance.items.push(item);
+    instance.items.push({ index: -1, id: item });
   }
   function removeItem(id, item) {
     const instance = findInstance(id);
     if (instance) {
-      instance.items = instance.items.filter((x) => x !== item);
+      instance.items = instance.items.filter((x) => x.id !== item);
     }
   }
   function addView(id, view) {
@@ -42,6 +54,7 @@ export function useCommandStore() {
     removeInstance,
     addItem,
     removeItem,
+    sortItems,
     addView,
     removeView
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.22.1",
+  "version": "0.22.3",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",