@maas/vue-equipment 0.39.2 → 1.0.0-beta.1

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

@@ -1,80 +1,90 @@
-<template>
-  <transition :name="mappedTransition">
-    <div
-      :class="['magic-menu-channel', { '-initialized': state.active }]"
-      v-if="channel.active"
-      :data-id="mappedId"
-      :id="id"
-    >
-      <slot />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, provide } from 'vue'
-import { useMenuChannel } from '../composables/private/useMenuChannel'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = ["id", "data-initialized", "data-id"];
+import { computed, inject, provide } from "vue";
+import { useMenuChannel } from "../composables/private/useMenuChannel";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
   MagicMenuContentId,
   MagicMenuChannelId,
-  MagicMenuChannelActive,
-} from '../symbols'
-import { useMenuState } from '../composables/private/useMenuState'
-
-interface MagicMenuChannelProps {
-  id: string
-  transition?: string
-}
-
-const { transition, id } = defineProps<MagicMenuChannelProps>()
-
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const viewId = inject(MagicMenuViewId, undefined)
-const contentId = inject(MagicMenuContentId, undefined)
-
-if (!instanceId) {
-  throw new Error('MagicMenuChannel must be nested inside MagicMenuProvider')
-}
-
-if (!viewId) {
-  throw new Error('MagicMenuChannel must be nested inside MagicMenuView')
-}
+  MagicMenuChannelActive
+} from "../symbols";
+import { useMenuState } from "../composables/private/useMenuState";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicMenuChannel",
+  props: {
+    id: { type: String, required: true },
+    transition: { type: String, required: false }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicMenuInstanceId, void 0);
+    const viewId = inject(MagicMenuViewId, void 0);
+    const contentId = inject(MagicMenuContentId, void 0);
+    if (!instanceId) {
+      throw new Error("MagicMenuChannel must be nested inside MagicMenuProvider");
+    }
+    if (!viewId) {
+      throw new Error("MagicMenuChannel must be nested inside MagicMenuView");
+    }
+    if (!__props.id) {
+      throw new Error("MagicMenuChannel requires an id");
+    }
+    const { initializeState } = useMenuState(instanceId);
+    const state = initializeState();
+    if (!contentId) {
+      if (state.options.debug) {
+        console.warn("MagicMenuChannel is not nested inside MagicMenuContent");
+      }
+    }
+    const mappedId = computed(() => `magic-menu-channel-${__props.id}`);
+    const mappedActive = computed(() => channel.active);
+    const mappedTransition = computed(
+      () => __props.transition ?? state.options.transition.channel
+    );
+    const { initializeChannel } = useMenuChannel({
+      instanceId,
+      viewId
+    });
+    const channel = initializeChannel({
+      id: mappedId.value
+    });
+    provide(MagicMenuChannelId, mappedId.value);
+    provide(MagicMenuChannelActive, mappedActive);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createBlock(_Transition, { name: mappedTransition.value }, {
+        default: _withCtx(() => [
+          _unref(channel).active ? (_openBlock(), _createElementBlock("div", {
+            key: 0,
+            id: _ctx.id,
+            class: "magic-menu-channel",
+            "data-initialized": _unref(state).active,
+            "data-id": mappedId.value
+          }, [
+            _renderSlot(_ctx.$slots, "default")
+          ], 8, _hoisted_1)) : _createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["name"]);
+    };
+  }
+});
+</script>
 
-if (!id) {
-  throw new Error('MagicMenuChannel requires an id')
+<style>
+.magic-menu-channel-enter-active {
+  animation: fade-in 300ms ease;
+  &[data-initialized='true'] {
+    position: absolute;
+  }
 }
 
-const { initializeState } = useMenuState(instanceId)
-const state = initializeState()
-
-if (!contentId) {
-  if (state.options.debug) {
-    console.warn('MagicMenuChannel is not nested inside MagicMenuContent')
+.magic-menu-channel-leave-active {
+  animation: fade-out 300ms ease;
+  &[data-initialized='true'] {
+    position: absolute;
   }
 }
-
-const mappedId = computed(() => `magic-menu-channel-${id}`)
-const mappedTransition = computed(
-  () => transition ?? state.options.transition.channel
-)
-
-// Register channel
-const { initializeChannel } = useMenuChannel({
-  instanceId,
-  viewId,
-})
-
-const channel = initializeChannel({
-  id: mappedId.value,
-})
-
-// Pass id and active state to children
-provide(MagicMenuChannelId, mappedId.value)
-provide(MagicMenuChannelActive, channel.active)
-</script>
-
-<style>
-.magic-menu-channel-enter-active{animation:fade-in .3s ease}.magic-menu-channel-enter-active.-initialized{position:absolute}.magic-menu-channel-leave-active{animation:fade-out .3s ease}.magic-menu-channel-leave-active.-initialized{position:absolute}
 </style>

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

@@ -11,9 +11,18 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuChannelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuChannelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+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;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,59 +1,8 @@
-<template>
-  <teleport to="body" v-if="wrapperActive">
-    <transition
-      :name="mappedTransition"
-      :on-before-enter="onBeforeEnter"
-      :on-enter="onEnter"
-      :on-after-enter="onAfterEnter"
-      :on-before-leave="onBeforeLeave"
-      :on-leave="onLeave"
-      :on-after-leave="onAfterLeave"
-    >
-      <div
-        class="magic-menu-content"
-        :data-id="`${viewId}-content`"
-        v-bind="$attrs"
-        v-if="innerActive"
-      >
-        <magic-menu-float
-          :placement="view?.placement"
-          :arrow="arrow"
-          :reference-el="referenceEl"
-        >
-          <template #arrow v-if="$slots.arrow && arrow">
-            <slot name="arrow" />
-          </template>
-          <template #default>
-            <div
-              class="magic-menu-content__inner"
-              ref="contentRef"
-              :class="{ '-disabled': pointerDisabled }"
-            >
-              <slot />
-            </div>
-          </template>
-        </magic-menu-float>
-      </div>
-    </transition>
-    <span
-      v-for="point in coords"
-      v-if="state.options.debug"
-      :style="{
-        background: 'red',
-        position: 'fixed',
-        top: point.y + 'px',
-        left: point.x + 'px',
-        width: '4px',
-        height: '4px',
-        zIndex: 1000,
-        pointerEvents: 'none',
-        transform: 'translate(-50%, -50%)',
-      }"
-    />
-  </teleport>
-</template>
-
-<script lang="ts" setup>
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, renderList as _renderList, Fragment as _Fragment, normalizeStyle as _normalizeStyle, Teleport as _Teleport, createBlock as _createBlock } from "vue";
+const _hoisted_1 = ["data-id"];
+const _hoisted_2 = ["data-pointer-disabled"];
 import {
   ref,
   inject,
@@ -61,180 +10,263 @@ import {
   nextTick,
   watch,
   computed,
-  type MaybeRef,
-  type ComponentPublicInstance,
-  onBeforeUnmount,
-} from 'vue'
-import { useMenuView } from '../composables/private/useMenuView'
-import { useMenuState } from '../composables/private/useMenuState'
-import { useMenuCallback } from '../composables/private/useMenuCallback'
-import { useMenuDOM } from '../composables/private/useMenuDOM'
-import { useMenuCursor } from '../composables/private/useMenuCursor'
-import { ModeTransitions } from '../utils/modeTransitionDefaults'
-import { ModeDelayMouseleave } from '../utils/modeDelayDefaults'
+  onBeforeUnmount
+} from "vue";
+import { useMenuView } from "../composables/private/useMenuView";
+import { useMenuState } from "../composables/private/useMenuState";
+import { useMenuCallback } from "../composables/private/useMenuCallback";
+import { useMenuDOM } from "../composables/private/useMenuDOM";
+import { useMenuCursor } from "../composables/private/useMenuCursor";
+import { ModeTransitions } from "../utils/modeTransitionDefaults";
+import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
-  MagicMenuContentId,
-} from '../symbols'
-
-import '@maas/vue-equipment/utils/css/animations/fade-in.css'
-import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-
-defineOptions({
-  inheritAttrs: false,
-})
+  MagicMenuContentId
+} from "../symbols";
+import "@maas/vue-equipment/utils/css/animations/fade-in.css";
+import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicMenuContent",
+  props: {
+    arrow: { type: Boolean, required: false, skipCheck: true, default: () => void 0 },
+    middleware: { type: Array, required: false },
+    transition: { type: String, required: false },
+    referenceEl: { type: null, required: false }
+  },
+  setup(__props) {
+    const contentRef = ref(void 0);
+    const instanceId = inject(MagicMenuInstanceId, void 0);
+    const viewId = inject(MagicMenuViewId, void 0);
+    if (!instanceId) {
+      throw new Error("MagicMenuContent must be nested inside MagicMenuProvider");
+    }
+    if (!viewId) {
+      throw new Error("MagicMenuContent must be nested inside MagicMenuView");
+    }
+    const { getView, unselectView } = useMenuView(instanceId);
+    const view = getView(viewId);
+    const { initializeState } = useMenuState(instanceId);
+    const state = initializeState();
+    const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
+    const mappedTransition = computed(() => {
+      switch (true) {
+        case !!__props.transition:
+          return __props.transition;
+        case !!view?.parent.item:
+          return state.options.transition.content.nested;
+        case !!state.options.transition.content.default:
+          return state.options.transition.content.default;
+        default:
+          return ModeTransitions[state.options.mode];
+      }
+    });
+    const innerActive = ref(false);
+    const wrapperActive = ref(false);
+    const {
+      lockScroll,
+      unlockScroll,
+      addScrollLockPadding,
+      removeScrollLockPadding
+    } = useMenuDOM();
+    const {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useMenuCallback({
+      state,
+      instanceId,
+      viewId,
+      innerActive,
+      wrapperActive,
+      lockScroll,
+      unlockScroll,
+      addScrollLockPadding,
+      removeScrollLockPadding
+    });
+    async function onOpen() {
+      wrapperActive.value = true;
+      await nextTick();
+      innerActive.value = true;
+      await nextTick();
+      initialize();
+    }
+    function onClose() {
+      destroy();
+      innerActive.value = false;
+    }
+    watch(
+      () => view?.active,
+      async (value) => {
+        if (value) {
+          await onOpen();
+        } else {
+          onClose();
+        }
+      }
+    );
+    const {
+      coords,
+      destroy,
+      initialize,
+      isInsideTriangle,
+      isInsideTo,
+      isInsideFrom
+    } = useMenuCursor(view, state.options.debug);
+    function disableCursor() {
+      state.input.disabled = [...state.input.disabled, "pointer"];
+    }
+    function enableCursor() {
+      state.input.disabled = state.input.disabled.filter((x) => x !== "pointer");
+    }
+    watch(isInsideTriangle, (value) => {
+      if (value) {
+        disableCursor();
+      } else {
+        enableCursor();
+      }
+    });
+    watch(isInsideTo, (value) => {
+      if (value) {
+        enableCursor();
+      }
+    });
+    const isOutside = computed(
+      () => !isInsideTo.value && !isInsideFrom.value && !isInsideTriangle.value
+    );
+    watch(isOutside, (value, oldValue) => {
+      if (value && !oldValue) {
+        switch (state.options.mode) {
+          case "navigation":
+            const delay = state.options.delay?.mouseleave ?? ModeDelayMouseleave.navigation;
+            unselectView(viewId, delay);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    provide(MagicMenuContentId, `${viewId}-content`);
+    return (_ctx, _cache) => {
+      const _component_magic_menu_float = _resolveComponent("magic-menu-float");
+      return wrapperActive.value ? (_openBlock(), _createBlock(_Teleport, {
+        key: 0,
+        to: "body"
+      }, [
+        _createVNode(_Transition, {
+          name: mappedTransition.value,
+          "on-before-enter": _unref(onBeforeEnter),
+          "on-enter": _unref(onEnter),
+          "on-after-enter": _unref(onAfterEnter),
+          "on-before-leave": _unref(onBeforeLeave),
+          "on-leave": _unref(onLeave),
+          "on-after-leave": _unref(onAfterLeave)
+        }, {
+          default: _withCtx(() => [
+            innerActive.value ? (_openBlock(), _createElementBlock("div", _mergeProps({
+              key: 0,
+              class: "magic-menu-content",
+              "data-id": `${_unref(viewId)}-content`
+            }, _ctx.$attrs), [
+              _createVNode(_component_magic_menu_float, {
+                placement: _unref(view)?.placement,
+                middleware: _ctx.middleware,
+                arrow: _ctx.arrow,
+                "reference-el": _ctx.referenceEl
+              }, _createSlots({
+                default: _withCtx(() => [
+                  _createElementVNode("div", {
+                    ref_key: "contentRef",
+                    ref: contentRef,
+                    class: "magic-menu-content__inner",
+                    "data-pointer-disabled": pointerDisabled.value
+                  }, [
+                    _renderSlot(_ctx.$slots, "default")
+                  ], 8, _hoisted_2)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, [
+                _ctx.$slots.arrow && _ctx.arrow ? {
+                  name: "arrow",
+                  fn: _withCtx(() => [
+                    _renderSlot(_ctx.$slots, "arrow")
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["placement", "middleware", "arrow", "reference-el"])
+            ], 16, _hoisted_1)) : _createCommentVNode("v-if", true)
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name", "on-before-enter", "on-enter", "on-after-enter", "on-before-leave", "on-leave", "on-after-leave"]),
+        _unref(state).options.debug ? (_openBlock(true), _createElementBlock(
+          _Fragment,
+          { key: 0 },
+          _renderList(_unref(coords), (point) => {
+            return _openBlock(), _createElementBlock(
+              "span",
+              {
+                key: `${point.x}${point.y}`,
+                style: _normalizeStyle({
+                  background: "red",
+                  position: "fixed",
+                  top: point.y + "px",
+                  left: point.x + "px",
+                  width: "4px",
+                  height: "4px",
+                  zIndex: 1e3,
+                  pointerEvents: "none",
+                  transform: "translate(-50%, -50%)"
+                })
+              },
+              null,
+              4
+              /* STYLE */
+            );
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        )) : _createCommentVNode("v-if", true)
+      ])) : _createCommentVNode("v-if", true);
+    };
+  }
+});
+</script>
 
-interface MagicMenuContentProps {
-  arrow?: boolean | undefined
-  transition?: string
-  referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
+<style>
+.magic-menu-content {
+  user-select: none;
 }
 
-const { arrow = undefined, transition } = defineProps<MagicMenuContentProps>()
-
-const contentRef = ref<HTMLElement | undefined>(undefined)
-
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const viewId = inject(MagicMenuViewId, undefined)
-
-if (!instanceId) {
-  throw new Error('MagicMenuContent must be nested inside MagicMenuProvider')
+.magic-menu-content__inner {
+  padding: 0;
+  border: 0;
 }
 
-if (!viewId) {
-  throw new Error('MagicMenuContent must be nested inside MagicMenuView')
+.magic-menu-content__inner[data-pointer-disabled='true'] {
+  pointer-events: none;
 }
 
-const { getView, unselectView } = useMenuView(instanceId)
-const view = getView(viewId)
-
-const { initializeState } = useMenuState(instanceId)
-const state = initializeState()
-
-const pointerDisabled = computed(() => state.input.disabled.includes('pointer'))
-
-const mappedTransition = computed(() => {
-  switch (true) {
-    case !!transition:
-      return transition
-    case !!view?.parent.item:
-      return state.options.transition.content.nested
-    case !!state.options.transition.content.default:
-      return state.options.transition.content.default
-    default:
-      return ModeTransitions[state.options.mode]
-  }
-})
-
-// Split isActive into two values to animate content smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
-
-const {
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-} = useMenuDOM()
-const {
-  onBeforeEnter,
-  onEnter,
-  onAfterEnter,
-  onBeforeLeave,
-  onLeave,
-  onAfterLeave,
-} = useMenuCallback({
-  state,
-  instanceId,
-  viewId,
-  innerActive,
-  wrapperActive,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-})
-
-// Handle state
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
-  await nextTick()
-  initialize()
+.magic-menu-content--default-enter-active {
+  animation: none;
 }
 
-function onClose() {
-  destroy()
-  innerActive.value = false
+.magic-menu-content--default-leave-active {
+  animation: none;
 }
 
-watch(
-  () => view?.active,
-  async (value) => {
-    if (value) {
-      await onOpen()
-    } else {
-      onClose()
-    }
-  }
-)
-
-// Handle cursor
-const {
-  coords,
-  destroy,
-  initialize,
-  isInsideTriangle,
-  isInsideTo,
-  isInsideFrom,
-} = useMenuCursor(view!, state.options.debug)
-
-function disableCursor() {
-  state.input.disabled = [...state.input.disabled, 'pointer']
+.magic-menu-content--fade-enter-active {
+  animation: fade-in 200ms ease;
 }
 
-function enableCursor() {
-  state.input.disabled = state.input.disabled.filter((x) => x !== 'pointer')
+.magic-menu-content--fade-leave-active {
+  animation: fade-out 200ms ease;
 }
-
-watch(isInsideTriangle, (value) => {
-  if (value) {
-    disableCursor()
-  } else {
-    enableCursor()
-  }
-})
-
-watch(isInsideTo, (value) => {
-  if (value) {
-    enableCursor()
-  }
-})
-
-const isOutside = computed(
-  () => !isInsideTo.value && !isInsideFrom.value && !isInsideTriangle.value
-)
-
-watch(isOutside, (value, oldValue) => {
-  if (value && !oldValue) {
-    switch (state.options.mode) {
-      case 'navigation':
-        const delay =
-          state.options.delay?.mouseleave ?? ModeDelayMouseleave.navigation
-        unselectView(viewId, delay)
-    }
-  }
-})
-
-onBeforeUnmount(() => {
-  destroy()
-})
-
-provide(MagicMenuContentId, `${viewId}-content`)
-</script>
-
-<style>
-.magic-menu-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-menu-content__inner{border:0;padding:0}.magic-menu-content__inner.-disabled{pointer-events:none}.magic-menu-content--default-enter-active,.magic-menu-content--default-leave-active{animation:none}.magic-menu-content--fade-enter-active{animation:fade-in .2s ease}.magic-menu-content--fade-leave-active{animation:fade-out .2s ease}
 </style>