@maas/vue-equipment 0.32.1 → 0.32.2

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"

package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue

@@ -1,7 +1,8 @@
 <template>
-  <div :class="['magic-accordion-content', { '-active': isActive }]">
+  <div :class="['magic-accordion-content', { '-active': view?.active }]">
     <magic-auto-size :immediate="true" :width="false">
       <transition
+        mode="out-in"
         :name="state.options.transition"
         :on-before-enter="onBeforeEnter"
         :on-enter="onEnter"
@@ -10,8 +11,8 @@
         :on-leave="onLeave"
         :on-after-leave="onAfterLeave"
       >
-        <primitive :as-child="asChild" v-if="isActive">
-          <slot />
+        <primitive :as-child="asChild" v-show="view?.active">
+          <slot :is-active="view?.active" />
         </primitive>
       </transition>
     </magic-auto-size>
@@ -19,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue'
+import { inject } from 'vue'
 import { Primitive } from '@maas/vue-primitive'
 import { useAccordionView } from '../composables/private/useAccordionView'
 import { useAccordionState } from '../composables/private/useAccordionState'
@@ -52,8 +53,6 @@ const state = initializeState()
 const { getView } = useAccordionView(instanceId)
 const view = getView(viewId)
 
-const isActive = computed(() => view?.active)
-
 const {
   onBeforeEnter,
   onEnter,
@@ -68,5 +67,5 @@ const {
 </script>
 
 <style>
-:root{--magic-accordion-enter-animation:fade-in 150ms var(--ease-in-out);--magic-accordion-leave-animation:none 200ms var(--ease-in-out-sharp);--magic-accordion-size-transition:all 200ms var(--ease-in-out-sharp);--magic-accordion-content-clip-path:inset(0)}.magic-accordion-content{--magic-auto-size-transition:var(--magic-accordion-size-transition);clip-path:var(--magic-accordion-content-clip-path)}.magic-accordion-enter-active{animation:var(--magic-accordion-enter-animation);position:relative}.magic-accordion-leave-active{animation:var(--magic-accordion-leave-animation)}
+:root{--magic-accordion-enter-transition:fade-in 150ms var(--ease-in-out);--magic-accordion-leave-transition:all 200ms var(--ease-in-out-sharp);--magic-accordion-size-transition:all 200ms var(--ease-in-out-sharp);--magic-accordion-content-clip-path:inset(0)}.magic-accordion-content{--magic-auto-size-transition:var(--magic-accordion-size-transition);clip-path:var(--magic-accordion-content-clip-path)}.magic-accordion-enter-active{position:relative;transition:var(--magic-accordion-enter-transition)}.magic-accordion-leave-active{height:0;transition:var(--magic-accordion-leave-transition)}
 </style>

package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue.d.ts

@@ -4,7 +4,9 @@ interface MagicAccordionContentProps {
     asChild?: boolean;
 }
 declare function __VLS_template(): {
-    default?(_: {}): any;
+    default?(_: {
+        isActive: any;
+    }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAccordionContentProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAccordionContentProps>>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/dist/plugins/MagicAccordion/src/components/MagicAccordionProvider.vue

@@ -1,5 +1,5 @@
 <template>
-  <primitive :as-child="asChild" class="magic-accordion-provider">
+  <primitive :as-child="asChild" :id="id" class="magic-accordion-provider">
     <slot />
   </primitive>
 </template>

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue

@@ -7,7 +7,7 @@
     @mouseeenter="onMouseenter"
     @click="onClick"
   >
-    <slot />
+    <slot :is-active="view?.active" />
   </primitive>
 </template>
 
@@ -19,6 +19,7 @@ import { useAccordionTrigger } from '../composables/private/useAccordionTrigger'
 import { MagicAccordionInstanceId, MagicAccordionViewId } from '../symbols'
 import type { Interaction } from '../types'
 import { useAccordionState } from '../composables/private/useAccordionState'
+import { useAccordionView } from '../composables/private/useAccordionView'
 
 interface MagicAccordionTriggerProps {
   disabled?: MaybeRef<boolean>
@@ -51,6 +52,9 @@ if (!viewId) {
 const { initializeState } = useAccordionState(instanceId)
 const state = initializeState()
 
+const { getView } = useAccordionView(instanceId)
+const view = getView(viewId)
+
 const mappedDisabled = computed(
   () => toValue(props.disabled) || state.options.disabled
 )

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue.d.ts

@@ -6,7 +6,9 @@ interface MagicAccordionTriggerProps {
     asChild?: boolean;
 }
 declare function __VLS_template(): {
-    default?(_: {}): any;
+    default?(_: {
+        isActive: any;
+    }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAccordionTriggerProps>, {
     disabled: boolean;

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue

@@ -3,7 +3,7 @@
     :as-child="asChild"
     :class="['magic-accordion-view', { '-active': view.active }]"
   >
-    <slot />
+    <slot :is-active="view?.active" />
   </primitive>
 </template>
 

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue.d.ts

@@ -4,7 +4,9 @@ interface MagicAccordionViewProps {
     activeOnMounted?: boolean;
 }
 declare function __VLS_template(): {
-    default?(_: {}): any;
+    default?(_: {
+        isActive: any;
+    }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAccordionViewProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAccordionViewProps>>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -78,7 +78,6 @@ const child = computed(() => {
 useMutationObserver(
   elRef,
   (mutations) => {
-    console.log('mutations:', mutations)
     const addedNode = mutations
       .flatMap((m) => [...m.addedNodes])
       .find((n) => n instanceof HTMLElement)
@@ -127,12 +126,13 @@ useResizeObserver(content, () => {
 
 onMounted(() => {
   if (elRef.value) {
-    const content = elRef.value.querySelectorAll('*')
-    const filtered = Array.from(content).find(
+    const elements = elRef.value.querySelectorAll('*')
+    const filtered = Array.from(elements).find(
       (node) => node instanceof HTMLElement
     )
 
     if (!!filtered && filtered instanceof HTMLElement) {
+      content.value = filtered
       size.value = {
         width: filtered.offsetWidth + padding.value.x,
         height: filtered.offsetHeight + padding.value.y,

package/package.json

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