@maas/vue-equipment 0.30.4 → 0.30.5

package/dist/nuxt/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.30.3",
+  "version": "0.30.4",
   "builder": {
-    "@nuxt/module-builder": "0.8.0",
+    "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"
   }
 }

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

@@ -52,6 +52,19 @@ const mappedSize = computed(() => {
   }
 })
 
+const padding = computed(() => {
+  if (elRef.value) {
+    const style = getComputedStyle(elRef.value, null)
+    const top = parseFloat(style.getPropertyValue('padding-top'))
+    const left = parseFloat(style.getPropertyValue('padding-left'))
+    const right = parseFloat(style.getPropertyValue('padding-right'))
+    const bottom = parseFloat(style.getPropertyValue('padding-bottom'))
+    return { x: right + left, y: top + bottom }
+  } else {
+    return { x: 0, y: 0 }
+  }
+})
+
 useMutationObserver(
   elRef,
   (mutations) => {
@@ -72,8 +85,8 @@ useMutationObserver(
 useResizeObserver(content, () => {
   if (content.value) {
     size.value = {
-      width: content.value.offsetWidth,
-      height: content.value.offsetHeight,
+      width: content.value.offsetWidth + padding.value.x,
+      height: content.value.offsetHeight + padding.value.y,
     }
   }
 })

package/dist/plugins/MagicDrawer/nuxt.mjs

@@ -10,7 +10,6 @@ export default defineNuxtModule({
   },
   setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    nuxt.options.build.transpile.push("wheel-gestures");
     addComponentsDir({
       path: resolver.resolve("src/components"),
       global: true,

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerWheel.mjs

@@ -3,7 +3,7 @@ import {
   toValue
 } from "vue";
 import { unrefElement } from "@vueuse/core";
-import WheelGestures from "wheel-gestures";
+import WheelGestures from "@maas/wheel-gestures";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerWheel(args) {
   const { id, elRef, position, disabled } = args;

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -1,17 +1,21 @@
 <template>
-  <div
-    class="magic-menu-remote"
-    :class="{ '-active': channel?.active, '-disabled': disabled }"
+  <primitive
+    :class="[
+      'magic-menu-remote',
+      { '-active': channel?.active, '-disabled': disabled },
+    ]"
     :data-id="`${channelId}-remote`"
+    :as-child="asChild"
     @pointerdown="onClick"
     @mouseenter="onMouseenter"
   >
-    <slot :is-active="view?.active" :is-disabled="disabled" />
-  </div>
+    <slot :channel-active="channel?.active" :remote-disabled="disabled" />
+  </primitive>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, watch } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuChannel } from '../composables/private/useMenuChannel'
 import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
@@ -25,6 +29,7 @@ interface MagicMenuRemoteProps {
   instanceId?: string
   disabled?: boolean
   trigger?: Interaction[]
+  asChild?: boolean
 }
 
 const props = defineProps<MagicMenuRemoteProps>()

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue.d.ts

@@ -5,11 +5,12 @@ interface MagicMenuRemoteProps {
     instanceId?: string;
     disabled?: boolean;
     trigger?: Interaction[];
+    asChild?: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {
-        isActive: boolean | undefined;
-        isDisabled: boolean | undefined;
+        channelActive: any;
+        remoteDisabled: boolean | undefined;
     }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuRemoteProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuRemoteProps>>>, {}, {}>;

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -1,20 +1,24 @@
 <template>
-  <div
-    class="magic-menu-trigger"
+  <primitive
     ref="elRef"
-    :class="{ '-active': view?.active, '-disabled': mappedDisabled }"
+    :class="[
+      'magic-menu-trigger',
+      { '-active': view?.active, '-disabled': mappedDisabled },
+    ]"
     :data-id="`${viewId}-trigger`"
     :tabindex="mappedTabindex"
+    :as-child="asChild"
     @pointerdown="onClick"
     @contextmenu="onClick"
     @mouseenter="onMouseenter"
   >
-    <slot :is-active="view?.active" :is-disabled="mappedDisabled" />
-  </div>
+    <slot :view-active="view?.active" :trigger-disabled="mappedDisabled" />
+  </primitive>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref, toValue, watch } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
 import { useMenuState } from '../composables/private/useMenuState'
 import { useMenuView } from '../composables/private/useMenuView'
 import { useMenuItem } from '../composables/private/useMenuItem'
@@ -31,10 +35,11 @@ import { onKeyStroke } from '@vueuse/core'
 interface MagicMenuTriggerProps {
   disabled?: boolean
   trigger?: Interaction[]
+  asChild?: boolean
 }
 
 const props = defineProps<MagicMenuTriggerProps>()
-const elRef = ref<HTMLElement | undefined>(undefined)
+const elRef = ref<InstanceType<typeof Primitive> | undefined>(undefined)
 
 const instanceId = inject(MagicMenuInstanceId, undefined)
 const viewId = inject(MagicMenuViewId, undefined)
@@ -103,7 +108,7 @@ watch(
   async (value) => {
     if (value) {
       await new Promise((resolve) => requestAnimationFrame(resolve))
-      toValue(elRef)?.blur()
+      toValue(elRef)?.$el?.blur()
     }
   }
 )

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -2,11 +2,12 @@ import type { Interaction } from '../types';
 interface MagicMenuTriggerProps {
     disabled?: boolean;
     trigger?: Interaction[];
+    asChild?: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {
-        isActive: boolean | undefined;
-        isDisabled: boolean;
+        viewActive: boolean | undefined;
+        triggerDisabled: boolean;
     }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuTriggerProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuTriggerProps>>>, {}, {}>;

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.d.ts

@@ -1,4 +1,5 @@
 import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
+import { Primitive } from '@maas/vue-primitive';
 import type { Interaction } from '../../types/index.js';
 type UseMenuTriggerArgs = {
     instanceId: MaybeRef<string>;
@@ -6,7 +7,7 @@ type UseMenuTriggerArgs = {
     itemId?: string;
     mappedDisabled: ComputedRef<boolean>;
     mappedTrigger: ComputedRef<Interaction[]>;
-    elRef: Ref<HTMLElement | undefined>;
+    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
 };
 export declare function useMenuTrigger(args: UseMenuTriggerArgs): {
     onMouseenter: () => void;

package/dist/plugins/MagicScroll/src/components/MagicScrollTransform.vue.d.ts

@@ -30,12 +30,12 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     translateX: number;
     translateY: number;
 }>>>, {
+    as: string;
     scale: number;
     scaleX: number;
     scaleY: number;
     skewX: number;
     skewY: number;
-    as: string;
     translateX: number;
     translateY: number;
 }, {}>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.30.4",
+  "version": "0.30.5",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "type": "module",
   "devDependencies": {
@@ -10,7 +10,7 @@
     "@types/node": "^20.10.4",
     "@vue/tsconfig": "^0.5.1",
     "release-it": "^17.0.1",
-    "turbo": "^2.0.3"
+    "turbo": "^2.0.6"
   },
   "exports": {
     "./nuxt": {
@@ -45,6 +45,8 @@
   "peerDependencies": {
     "@floating-ui/vue": "^1.0.6",
     "@maas/magic-timer": "^1.0.0",
+    "@maas/vue-primitive": "^1.1.0",
+    "@maas/wheel-gestures": "^1.0.0",
     "@nuxt/kit": "^3.9.3",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
@@ -56,8 +58,7 @@
     "motion": "^10.16.2",
     "nuxt": "^3.5.1",
     "universal-cookie": "^7.1.0",
-    "vue": "^3.4.26",
-    "wheel-gestures": "^2.2.5"
+    "vue": "^3.4.26"
   },
   "peerDependenciesMeta": {
     "@floating-ui/vue": {
@@ -69,6 +70,12 @@
     "@maas/magic-timer": {
       "optional": false
     },
+    "@maas/vue-primitive": {
+      "optional": false
+    },
+    "@maas/wheel-gestures": {
+      "optional": false
+    },
     "@vueuse/core": {
       "optional": false
     },
@@ -98,13 +105,10 @@
     },
     "vue": {
       "optional": false
-    },
-    "wheel-gestures": {
-      "optional": false
     }
   },
   "scripts": {
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --parallel",
     "dev:docs": "turbo run dev --filter=docs",
     "dev:nuxt": "turbo run dev --filter=nuxt",
     "build": "turbo run build",
@@ -138,5 +142,5 @@
       }
     }
   },
-  "packageManager": "pnpm@9.2.0"
+  "packageManager": "pnpm@9.4.0"
 }