@maas/vue-equipment 0.31.0 → 0.32.0

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -1,6 +1,13 @@
 import { defineNuxtModule, createResolver, extendViteConfig, installModule, addImportsSources } from '@nuxt/kit';
 
 const functions$1 = [
+	{
+		name: "MagicAccordion",
+		"package": "plugins",
+		lastUpdated: 1720627049000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicAccordion/",
+		description: "accordion"
+	},
 	{
 		name: "MagicAutoSize",
 		"package": "plugins",
@@ -53,7 +60,7 @@ const functions$1 = [
 	{
 		name: "MagicMenu",
 		"package": "plugins",
-		lastUpdated: 1719385203000,
+		lastUpdated: 1720627185000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicMenu/",
 		description: "menu"
 	},

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

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vue';
+import { useMagicAccordion } from './src/composables/useMagicAccordion.js';
+import { MagicAccordionInstanceId, MagicAccordionViewId, MagicAccordionViewActive } from './src/symbols/index.js';
+declare const MagicAccordionPlugin: Plugin;
+export { MagicAccordionPlugin, useMagicAccordion, MagicAccordionInstanceId, MagicAccordionViewId, MagicAccordionViewActive, };

package/dist/plugins/MagicAccordion/index.mjs

@@ -0,0 +1,25 @@
+import MagicAccordionContent from "./src/components/MagicAccordionContent.vue";
+import MagicAccordionProvider from "./src/components/MagicAccordionProvider.vue";
+import MagicAccordionTrigger from "./src/components/MagicAccordionTrigger.vue";
+import MagicAccordionView from "./src/components/MagicAccordionView.vue";
+import { useMagicAccordion } from "./src/composables/useMagicAccordion.mjs";
+import {
+  MagicAccordionInstanceId,
+  MagicAccordionViewId,
+  MagicAccordionViewActive
+} from "./src/symbols/index.mjs";
+const MagicAccordionPlugin = {
+  install: (app) => {
+    app.component("MagicAccordionContent", MagicAccordionContent);
+    app.component("MagicAccordionProvider", MagicAccordionProvider);
+    app.component("MagicAccordionTrigger", MagicAccordionTrigger);
+    app.component("MagicAccordionView", MagicAccordionView);
+  }
+};
+export {
+  MagicAccordionPlugin,
+  useMagicAccordion,
+  MagicAccordionInstanceId,
+  MagicAccordionViewId,
+  MagicAccordionViewActive
+};

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

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

package/dist/plugins/MagicAccordion/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponentsDir,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicAccordion"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicAccordion",
+      name: "useMagicAccordion"
+    });
+  }
+});

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

@@ -0,0 +1,72 @@
+<template>
+  <div :class="['magic-accordion-content', { '-active': isActive }]">
+    <magic-auto-size :immediate="true">
+      <transition
+        :name="state.options.transition"
+        :on-before-enter="onBeforeEnter"
+        :on-enter="onEnter"
+        :on-after-enter="onAfterEnter"
+        :on-before-leave="onBeforeLeave"
+        :on-leave="onLeave"
+        :on-after-leave="onAfterLeave"
+      >
+        <primitive :as-child="asChild" v-if="isActive">
+          <slot />
+        </primitive>
+      </transition>
+    </magic-auto-size>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
+import { useAccordionView } from '../composables/private/useAccordionView'
+import { useAccordionState } from '../composables/private/useAccordionState'
+import { useAccordionCallback } from '../composables/private/useAccordionCallback'
+import { MagicAccordionInstanceId, MagicAccordionViewId } from '../symbols'
+
+import '@maas/vue-equipment/utils/css/animations/fade-in.css'
+import '@maas/vue-equipment/utils/css/easings.css'
+
+interface MagicAccordionContentProps {
+  asChild?: boolean
+}
+
+defineProps<MagicAccordionContentProps>()
+
+const instanceId = inject(MagicAccordionInstanceId, undefined)
+const viewId = inject(MagicAccordionViewId, undefined)
+
+if (!instanceId) {
+  throw new Error('MagicMenuContent must be nested inside MagicMenuProvider')
+}
+
+if (!viewId) {
+  throw new Error('MagicMenuContent must be nested inside MagicMenuView')
+}
+
+const { initializeState } = useAccordionState(instanceId)
+const state = initializeState()
+
+const { getView } = useAccordionView(instanceId)
+const view = getView(viewId)
+
+const isActive = computed(() => view?.active)
+
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+} = useAccordionCallback({
+  instanceId,
+  viewId,
+})
+</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)}
+</style>

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

@@ -0,0 +1,26 @@
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/easings.css';
+interface MagicAccordionContentProps {
+    asChild?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): 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>>;
+export default _default;
+
+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/MagicAccordion/src/components/MagicAccordionProvider.vue

@@ -0,0 +1,31 @@
+<template>
+  <primitive :as-child="asChild" class="magic-accordion-provider">
+    <slot />
+  </primitive>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, provide, type MaybeRef } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
+import { MagicAccordionInstanceId } from '../symbols'
+import type { MagicAccordionOptions } from '../types'
+import { useAccordionState } from '../composables/private/useAccordionState'
+
+interface MagicAccordionProviderProps {
+  id: MaybeRef<string>
+  asChild?: boolean
+  options?: MagicAccordionOptions
+}
+
+const props = defineProps<MagicAccordionProviderProps>()
+
+const { deleteState, initializeState } = useAccordionState(props.id)
+initializeState()
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteState()
+})
+
+provide(MagicAccordionInstanceId, props.id)
+</script>

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

@@ -0,0 +1,27 @@
+import { type MaybeRef } from 'vue';
+import type { MagicAccordionOptions } from '../types';
+interface MagicAccordionProviderProps {
+    id: MaybeRef<string>;
+    asChild?: boolean;
+    options?: MagicAccordionOptions;
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicAccordionProviderProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAccordionProviderProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+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/MagicAccordion/src/components/MagicAccordionTrigger.vue

@@ -0,0 +1,71 @@
+<template>
+  <primitive
+    :class="['magic-accordion-trigger', { '-disabled': mappedDisabled }]"
+    :as-child="asChild"
+    as="button"
+    ref="elRef"
+    @mouseeenter="onMouseenter"
+    @click="onClick"
+  >
+    <slot />
+  </primitive>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref, computed, toValue, type MaybeRef } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
+import { onKeyStroke } from '@vueuse/core'
+import { useAccordionTrigger } from '../composables/private/useAccordionTrigger'
+import { MagicAccordionInstanceId, MagicAccordionViewId } from '../symbols'
+import type { Interaction } from '../types'
+import { useAccordionState } from '../composables/private/useAccordionState'
+
+interface MagicAccordionTriggerProps {
+  disabled?: MaybeRef<boolean>
+  trigger?: Interaction
+  asChild?: boolean
+}
+
+const props = withDefaults(defineProps<MagicAccordionTriggerProps>(), {
+  disabled: false,
+  trigger: 'click',
+  asChild: false,
+})
+const elRef = ref<InstanceType<typeof Primitive> | undefined>(undefined)
+
+const instanceId = inject(MagicAccordionInstanceId, undefined)
+const viewId = inject(MagicAccordionViewId, undefined)
+
+if (!instanceId) {
+  throw new Error(
+    'MagicAccordionTrigger must be nested inside MagicAccordionProvider'
+  )
+}
+
+if (!viewId) {
+  throw new Error(
+    'MagicAccordionTrigger must be nested inside MagicAccordionView'
+  )
+}
+
+const { initializeState } = useAccordionState(instanceId)
+const state = initializeState()
+
+const mappedDisabled = computed(
+  () => toValue(props.disabled) || state.options.disabled
+)
+
+const { onMouseenter, onClick, onEnter } = useAccordionTrigger({
+  instanceId,
+  viewId,
+  elRef,
+  disabled: props.disabled,
+  trigger: props.trigger,
+})
+
+onKeyStroke('Enter', onEnter)
+</script>
+
+<style>
+:root{--magic-accordion-trigger-cursor-disabled:not-allowed}.magic-accordion-trigger.-disabled{cursor:var(--magic-accordion-trigger-cursor-disabled)}
+</style>

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

@@ -0,0 +1,47 @@
+import { type MaybeRef } from 'vue';
+import type { Interaction } from '../types';
+interface MagicAccordionTriggerProps {
+    disabled?: MaybeRef<boolean>;
+    trigger?: Interaction;
+    asChild?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAccordionTriggerProps>, {
+    disabled: boolean;
+    trigger: string;
+    asChild: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicAccordionTriggerProps>, {
+    disabled: boolean;
+    trigger: string;
+    asChild: boolean;
+}>>>, {
+    asChild: boolean;
+    disabled: MaybeRef<boolean>;
+    trigger: Interaction;
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+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/MagicAccordion/src/components/MagicAccordionView.vue

@@ -0,0 +1,55 @@
+<template>
+  <primitive
+    :as-child="asChild"
+    :class="['magic-accordion-view', { '-active': view.active }]"
+  >
+    <slot />
+  </primitive>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeUnmount, provide } from 'vue'
+import { Primitive } from '@maas/vue-primitive'
+import { uuid } from '@maas/vue-equipment/utils'
+import {
+  MagicAccordionInstanceId,
+  MagicAccordionViewActive,
+  MagicAccordionViewId,
+} from '../symbols'
+import { useAccordionView } from '../composables/private/useAccordionView'
+
+interface MagicAccordionViewProps {
+  asChild?: boolean
+  id?: string
+  activeOnMounted?: boolean
+}
+
+const props = defineProps<MagicAccordionViewProps>()
+
+const instanceId = inject(MagicAccordionInstanceId, undefined)
+
+if (!instanceId) {
+  throw new Error(
+    'MagicAccordionView must be nested inside MagicAccordionProvider'
+  )
+}
+
+const mappedId = computed(() => props.id ?? `magic-accordion-view-${uuid()}`)
+
+// Register view
+const { initializeView, deleteView } = useAccordionView(instanceId)
+
+const view = initializeView({
+  id: mappedId.value,
+  active: props.activeOnMounted ?? false,
+})
+
+// Pass id and active state to children
+provide(MagicAccordionViewId, mappedId.value)
+provide(MagicAccordionViewActive, view.active)
+
+// Lifecycle
+onBeforeUnmount(() => {
+  deleteView(mappedId.value)
+})
+</script>

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

@@ -0,0 +1,25 @@
+interface MagicAccordionViewProps {
+    asChild?: boolean;
+    id?: string;
+    activeOnMounted?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): 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>>;
+export default _default;
+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/MagicAccordion/src/composables/private/useAccordionCallback.d.ts

@@ -0,0 +1,14 @@
+import { type MaybeRef } from 'vue';
+type UseModalCallbackArgs = {
+    viewId: string;
+    instanceId: MaybeRef<string>;
+};
+export declare function useAccordionCallback(args: UseModalCallbackArgs): {
+    onBeforeEnter: (_el?: Element) => void;
+    onEnter: (_el?: Element) => void;
+    onAfterEnter: (_el?: Element) => Promise<void>;
+    onBeforeLeave: (_el?: Element) => void;
+    onLeave: (_el?: Element) => void;
+    onAfterLeave: (_el?: Element) => void;
+};
+export {};

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionCallback.mjs

@@ -0,0 +1,32 @@
+import { toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+export function useAccordionCallback(args) {
+  const { viewId, instanceId } = args;
+  const emitter = useMagicEmitter();
+  function onBeforeEnter(_el) {
+    emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
+  }
+  function onEnter(_el) {
+    emitter.emit("enter", { id: toValue(instanceId), viewId });
+  }
+  async function onAfterEnter(_el) {
+    emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
+  }
+  function onBeforeLeave(_el) {
+    emitter.emit("beforeLeave", { id: toValue(instanceId), viewId });
+  }
+  function onLeave(_el) {
+    emitter.emit("leave", { id: toValue(instanceId), viewId });
+  }
+  function onAfterLeave(_el) {
+    emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionState.d.ts

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { AccordionState, MagicAccordionOptions } from '../../types/index.js';
+export declare function useAccordionState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicAccordionOptions) => AccordionState;
+    deleteState: () => void;
+    accordionStateStore: Ref<AccordionState[]>;
+};

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionState.mjs

@@ -0,0 +1,42 @@
+import { ref, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const accordionStateStore = ref([]);
+export function useAccordionState(instanceId) {
+  function createState(id) {
+    const state = {
+      id,
+      options: defaultOptions,
+      views: []
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const instance = createState(id);
+    accordionStateStore.value = [...accordionStateStore.value, instance];
+    return instance;
+  }
+  function initializeState(options) {
+    let instance = accordionStateStore.value.find((instance2) => {
+      return instance2.id === toValue(instanceId);
+    });
+    if (!instance) {
+      instance = addState(toValue(instanceId));
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      instance.options = mappedOptions;
+    }
+    return instance;
+  }
+  function deleteState() {
+    accordionStateStore.value = accordionStateStore.value.filter(
+      (x) => x.id !== toValue(instanceId)
+    );
+  }
+  return {
+    initializeState,
+    deleteState,
+    accordionStateStore
+  };
+}

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionTrigger.d.ts

@@ -0,0 +1,16 @@
+import { type MaybeRef, type Ref } from 'vue';
+import { Primitive } from '@maas/vue-primitive';
+import type { Interaction } from '../../types.js';
+interface UseAccordionTriggerArgs {
+    instanceId: MaybeRef<string>;
+    viewId: string;
+    trigger: Interaction;
+    disabled: MaybeRef<boolean>;
+    elRef: Ref<InstanceType<typeof Primitive> | undefined>;
+}
+export declare function useAccordionTrigger(args: UseAccordionTriggerArgs): {
+    onMouseenter: () => void;
+    onClick: () => void;
+    onEnter: (e: KeyboardEvent) => void;
+};
+export {};

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionTrigger.mjs

@@ -0,0 +1,35 @@
+import { toValue } from "vue";
+import { useAccordionView } from "./useAccordionView.mjs";
+import { useFocus } from "@vueuse/core";
+export function useAccordionTrigger(args) {
+  const { instanceId, viewId, elRef, disabled, trigger } = args;
+  const { selectView, unselectView, getView } = useAccordionView(instanceId);
+  const view = getView(viewId);
+  const { focused } = useFocus(elRef);
+  function onMouseenter() {
+    if (!toValue(disabled) && trigger === "mouseenter") {
+      selectView(viewId);
+    }
+  }
+  function onClick() {
+    if (!toValue(disabled) && trigger === "click") {
+      if (view?.active) {
+        unselectView(viewId);
+      } else {
+        selectView(viewId);
+      }
+    }
+  }
+  function onEnter(e) {
+    if (focused.value && !toValue(disabled) && !view?.active) {
+      e.preventDefault();
+      e.stopPropagation();
+      selectView(viewId);
+    }
+  }
+  return {
+    onMouseenter,
+    onClick,
+    onEnter
+  };
+}

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionView.d.ts

@@ -0,0 +1,12 @@
+import { type MaybeRef } from 'vue';
+import { type AccordionView } from '../../types.js';
+type InitializeViewArgs = Pick<AccordionView, 'id' | 'active'>;
+export declare function useAccordionView(instanceId: MaybeRef<string>): {
+    initializeView: (args: InitializeViewArgs) => AccordionView;
+    deleteView: (id: string) => void;
+    getView: (id: string) => AccordionView | undefined;
+    selectView: (id: string) => void;
+    unselectView: (id: string) => void;
+    unselectAllViews: () => void;
+};
+export {};