@maas/vue-equipment 0.22.2 → 0.22.3

package/dist/nuxt/module.json

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

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

@@ -4,12 +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">
         <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

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/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

@@ -27,6 +27,14 @@ export function useCommandScroll(parent) {
   function findElement(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();
     const parentRect = mappedParent.value.getBoundingClientRect();
@@ -39,6 +47,7 @@ export function useCommandScroll(parent) {
     isElementAbove,
     isElementBelow,
     findElement,
+    scrollInFromTop,
     scrollInFromBottom
   };
 }

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.2",
+  "version": "0.22.3",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",