@maas/vue-equipment 0.29.7 → 0.30.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.29.6",
+  "version": "0.29.8",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -1,6 +1,13 @@
 import { defineNuxtModule, createResolver, extendViteConfig, installModule, addImportsSources } from '@nuxt/kit';
 
 const functions$1 = [
+	{
+		name: "MagicAutoSize",
+		"package": "plugins",
+		lastUpdated: 0,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicAutoSize/",
+		description: "auto Size"
+	},
 	{
 		name: "MagicCommand",
 		"package": "plugins",
@@ -46,7 +53,7 @@ const functions$1 = [
 	{
 		name: "MagicMenu",
 		"package": "plugins",
-		lastUpdated: 1716321101000,
+		lastUpdated: 1719315337000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicMenu/",
 		description: "menu"
 	},

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

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vue';
+import MagicAutoSize from './src/components/MagicAutoSize.vue.js';
+declare const MagicAutoSizePlugin: Plugin;
+export { MagicAutoSizePlugin, MagicAutoSize };

package/dist/plugins/MagicAutoSize/index.mjs

@@ -0,0 +1,7 @@
+import MagicAutoSize from "./src/components/MagicAutoSize.vue";
+const MagicAutoSizePlugin = {
+  install: (app) => {
+    app.component("MagicAutoSize", MagicAutoSize);
+  }
+};
+export { MagicAutoSizePlugin, MagicAutoSize };

package/dist/plugins/MagicAutoSize/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions>;
+export default _default;

package/dist/plugins/MagicAutoSize/nuxt.mjs

@@ -0,0 +1,14 @@
+import { defineNuxtModule, createResolver, addComponent } from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicAutoSize"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicAutoSize.vue"),
+      name: "MagicAutoSize",
+      global: true
+    });
+  }
+});

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

@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="magic-auto-size"
+    ref="elRef"
+    :style="{
+      '--magic-auto-size-width': mappedSize?.width,
+      '--magic-auto-size-height': mappedSize?.height,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useResizeObserver, useMutationObserver } from '@vueuse/core'
+
+interface MagicAutoSizeProps {
+  width?: boolean
+  height?: boolean
+}
+
+const props = withDefaults(defineProps<MagicAutoSizeProps>(), {
+  width: true,
+  height: true,
+})
+
+const elRef = ref<HTMLElement | undefined>(undefined)
+
+const size = ref<{ width: number; height: number }>()
+const content = ref<HTMLElement | undefined>(undefined)
+
+const mappedSize = computed(() => {
+  if (size.value) {
+    switch (true) {
+      case props.width && props.height:
+        return {
+          width: `${size.value.width}px`,
+          height: `${size.value.height}px`,
+        }
+      case props.width:
+        return {
+          width: `${size.value.width}px`,
+        }
+      case props.height:
+        return {
+          height: `${size.value.height}px`,
+        }
+    }
+  } else {
+    return undefined
+  }
+})
+
+useMutationObserver(
+  elRef,
+  (mutations) => {
+    const addedNodes: HTMLElement[] = mutations
+      .flatMap((m) => [...m.addedNodes])
+      .filter((n) => n instanceof HTMLElement)
+      .map((n) => n as HTMLElement)
+
+    content.value = addedNodes[0]
+  },
+  {
+    childList: true,
+  }
+)
+
+useResizeObserver(content, () => {
+  if (content.value) {
+    size.value = {
+      width: content.value.offsetWidth,
+      height: content.value.offsetHeight,
+    }
+  }
+})
+
+onMounted(() => {
+  if (elRef.value) {
+    const content = elRef.value.querySelector('*')
+    if (content instanceof HTMLElement) {
+      size.value = {
+        width: content.offsetWidth,
+        height: content.offsetHeight,
+      }
+    }
+  }
+})
+</script>
+
+<style>
+.magic-auto-size{--magic-auto-size-transition-function:ease;--magic-auto-size-transition-duration:100ms;height:var(--magic-auto-size-height);transition:all var(--magic-auto-size-transition-duration) var(--magic-auto-size-transition-function);width:var(--magic-auto-size-width)}
+</style>

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

@@ -0,0 +1,40 @@
+interface MagicAutoSizeProps {
+    width?: boolean;
+    height?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
+    width: boolean;
+    height: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAutoSizeProps>, {
+    width: boolean;
+    height: boolean;
+}>>>, {
+    width: boolean;
+    height: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+
+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;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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/src/components/MagicCommandBody.vue.d.ts

@@ -2,7 +2,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}
     default?(_: {}): any;
 }>;
 export default _default;
-
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,4 +1,5 @@
+import { useMagicMenu } from './src/composables/useMagicMenu.js';
 import { MagicMenuInstanceId, MagicMenuItemActive, MagicMenuParentTree } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
 declare const MagicMenuPlugin: Plugin;
-export { MagicMenuPlugin, MagicMenuInstanceId, MagicMenuItemActive, MagicMenuParentTree, };
+export { MagicMenuPlugin, useMagicMenu, MagicMenuInstanceId, MagicMenuItemActive, MagicMenuParentTree, };

package/dist/plugins/MagicMenu/index.mjs

@@ -4,6 +4,7 @@ import MagicMenuItem from "./src/components/MagicMenuItem.vue";
 import MagicMenuProvider from "./src/components/MagicMenuProvider.vue";
 import MagicMenuTrigger from "./src/components/MagicMenuTrigger.vue";
 import MagicMenuView from "./src/components/MagicMenuView.vue";
+import { useMagicMenu } from "./src/composables/useMagicMenu.mjs";
 import {
   MagicMenuInstanceId,
   MagicMenuItemActive,
@@ -21,6 +22,7 @@ const MagicMenuPlugin = {
 };
 export {
   MagicMenuPlugin,
+  useMagicMenu,
   MagicMenuInstanceId,
   MagicMenuItemActive,
   MagicMenuParentTree

package/dist/plugins/MagicMenu/nuxt.mjs

@@ -1,4 +1,9 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from "@nuxt/kit";
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponentsDir,
+  addImports
+} from "@nuxt/kit";
 export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicMenu"
@@ -10,5 +15,9 @@ export default defineNuxtModule({
       global: true,
       pathPrefix: false
     });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicMenu",
+      name: "useMagicMenu"
+    });
   }
 });

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

@@ -65,11 +65,12 @@ defineOptions({
 
 interface MagicMenuContentProps {
   placement?: Placement
-  arrow?: boolean
+  arrow?: boolean | undefined
   referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
 }
 
-defineProps<MagicMenuContentProps>()
+withDefaults(defineProps<MagicMenuContentProps>(), { arrow: undefined })
+
 const contentRef = ref<HTMLElement | undefined>(undefined)
 
 const instanceId = inject(MagicMenuInstanceId, undefined)

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

@@ -4,14 +4,28 @@ import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicMenuContentProps {
     placement?: Placement;
-    arrow?: boolean;
+    arrow?: boolean | undefined;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<MagicMenuContentProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuContentProps>>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMenuContentProps>, {
+    arrow: undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicMenuContentProps>, {
+    arrow: undefined;
+}>>>, {
+    arrow: boolean;
+}, {}>, {
     arrow?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;
+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/MagicMenu/src/composables/private/useMenuView.mjs

@@ -41,9 +41,7 @@ export function useMenuView(instanceId) {
     state.views = state.views?.filter((view) => view.id !== id);
   }
   function getView(id) {
-    return state.views?.find((view) => {
-      return view.id === id;
-    });
+    return state.views?.find((view) => view.id === id);
   }
   function getRelativeViewIndex(id) {
     const view = getView(id);

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+export declare function useMagicMenu(instanceId: MaybeRef<string>): {
+    selectView: (id: string) => void;
+    unselectView: (id: string) => void;
+};
+export type UseMagicMenuReturn = ReturnType<typeof useMagicMenu>;

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.mjs

@@ -0,0 +1,8 @@
+import { useMenuView } from "./private/useMenuView.mjs";
+export function useMagicMenu(instanceId) {
+  const { selectView, unselectView } = useMenuView(instanceId);
+  return {
+    selectView,
+    unselectView
+  };
+}

package/dist/plugins/MagicPlayer/src/components/MagicPlayerControls.vue

@@ -146,5 +146,5 @@ const hidden = computed(() => {
 </script>
 
 <style>
-:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none;--magic-player-controls-transition-duration:unset;--magic-player-controls-transition-timing-function:unset}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
+:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
 </style>

package/dist/plugins/index.d.ts

@@ -1,3 +1,4 @@
+export * from './MagicAutoSize/index.js';
 export * from './MagicCommand/index.js';
 export * from './MagicCookie/index.js';
 export * from './MagicDraggable/index.js';

package/dist/plugins/index.mjs

@@ -1,3 +1,4 @@
+export * from "./MagicAutoSize/index.mjs";
 export * from "./MagicCommand/index.mjs";
 export * from "./MagicCookie/index.mjs";
 export * from "./MagicDraggable/index.mjs";

package/package.json

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