@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,10 +1,63 @@
-<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"];
+<template>
+  <teleport v-if="wrapperActive" to="body">
+    <transition
+      :name="mappedTransition"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+    >
+      <div
+        v-if="innerActive"
+        class="magic-menu-content"
+        :data-id="`${viewId}-content`"
+        v-bind="$attrs"
+      >
+        <magic-menu-float
+          :placement="view?.placement"
+          :middleware="middleware"
+          :arrow="arrow"
+          :reference-el="referenceEl"
+        >
+          <template v-if="$slots.arrow && arrow" #arrow>
+            <slot name="arrow" />
+          </template>
+          <template #default>
+            <div
+              class="magic-menu-content__inner"
+              :data-pointer-disabled="pointerDisabled"
+            >
+              <slot />
+            </div>
+          </template>
+        </magic-menu-float>
+      </div>
+    </transition>
+    <template v-if="state.options.debug">
+      <span
+        v-for="point in coords"
+        :key="`${point.x}${point.y}`"
+        :style="{
+  background: 'red',
+  position: 'fixed',
+  top: point.y + 'px',
+  left: point.x + 'px',
+  width: '4px',
+  height: '4px',
+  zIndex: 1e3,
+  pointerEvents: 'none',
+  transform: 'translate(-50%, -50%)'
+}"
+      />
+    </template>
+  </teleport>
+</template>
+
+<script setup>
 import {
-  ref,
+  shallowRef,
   inject,
   provide,
   nextTick,
@@ -24,220 +77,131 @@ import {
   MagicMenuViewId,
   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"];
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+defineOptions({
+  inheritAttrs: false
+});
+const { arrow = void 0, transition } = defineProps({
+  arrow: { type: Boolean, required: false, skipCheck: true },
+  middleware: { type: Array, required: false },
+  transition: { type: String, required: false },
+  referenceEl: { type: null, required: false }
+});
+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 !!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];
+  }
+});
+const innerActive = shallowRef(false);
+const wrapperActive = shallowRef(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();
     }
-    function enableCursor() {
-      state.input.disabled = state.input.disabled.filter((x) => x !== "pointer");
+  }
+);
+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);
     }
-    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);
-    };
   }
 });
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicMenuContentId, `${viewId}-content`);
 </script>
 
 <style>

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

@@ -1,38 +1,23 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
 import type { Middleware } from '@floating-ui/vue';
-import '@maas/vue-equipment/utils/css/animations/fade-in.css';
-import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
 interface MagicMenuContentProps {
     arrow?: boolean | undefined;
     middleware?: Middleware[];
     transition?: string;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        arrow?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        contentRef: any;
-    };
-    rootEl: any;
+declare var __VLS_22: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    arrow?: (props: typeof __VLS_22) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuContentProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuContentProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };