@maas/vue-equipment 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -1,13 +1,29 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
-const _hoisted_1 = {
-  viewBox: "0 0 100 100",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-const _hoisted_2 = ["points"];
+<template>
+  <div
+    ref="el"
+    class="magic-menu-float"
+    :style="floatingStyles"
+    :class="placementClasses"
+  >
+    <div
+      v-if="hasArrow"
+      ref="arrow"
+      class="magic-menu-float__arrow"
+      :style="arrowStyles"
+    >
+      <slot name="arrow">
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <polygon :points="polygonPoints" fill="currentColor" />
+        </svg>
+      </slot>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
 import {
-  ref,
+  useTemplateRef,
   computed,
   inject,
   toValue
@@ -24,201 +40,158 @@ import { MagicMenuInstanceId, MagicMenuViewId } from "../symbols";
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuState } from "../composables/private/useMenuState";
 import { ModeFloatingStrategy } from "../utils/modeFloatingStrategyDefaults";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuFloat",
-  props: {
-    placement: { type: null, required: false },
-    middleware: { type: Array, required: false },
-    arrow: { type: Boolean, required: false },
-    referenceEl: { type: null, required: false }
-  },
-  setup(__props) {
-    const elRef = ref(void 0);
-    const arrowRef = ref(void 0);
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    const { initializeState } = useMenuState(instanceId ?? "");
-    const state = initializeState();
-    const { getView } = useMenuView(instanceId ?? "");
-    const view = getView(viewId ?? "");
-    const mappedPlacement = computed(() => {
-      if (__props.placement) {
-        return __props.placement;
-      }
-      switch (state.options.mode) {
-        case "menubar":
-          return !view?.parent.item ? "bottom-start" : "right-start";
-        case "dropdown":
-          return !view?.parent.item ? "bottom" : "right-start";
-        case "context":
-          return "right-start";
-        default:
-          return void 0;
-      }
-    });
-    const hasArrow = computed(
-      () => __props.arrow ?? (state.options.mode === "dropdown" && !view?.parent.item)
-    );
-    const mappedMiddleware = computed(() => {
-      const combined = [];
-      if (__props.middleware) {
-        combined.push(...__props.middleware);
+const { placement, middleware, arrow, referenceEl } = defineProps({
+  placement: { type: null, required: false },
+  middleware: { type: Array, required: false },
+  arrow: { type: Boolean, required: false },
+  referenceEl: { type: null, required: false }
+});
+const elRef = useTemplateRef("el");
+const arrowRef = useTemplateRef("arrow");
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const viewId = inject(MagicMenuViewId, void 0);
+const { initializeState } = useMenuState(instanceId ?? "");
+const state = initializeState();
+const { getView } = useMenuView(instanceId ?? "");
+const view = getView(viewId ?? "");
+const mappedPlacement = computed(() => {
+  if (placement) {
+    return placement;
+  }
+  switch (state.options.mode) {
+    case "menubar":
+      return !view?.parent.item ? "bottom-start" : "right-start";
+    case "dropdown":
+      return !view?.parent.item ? "bottom" : "right-start";
+    case "context":
+      return "right-start";
+    default:
+      return void 0;
+  }
+});
+const hasArrow = computed(
+  () => arrow ?? (state.options.mode === "dropdown" && !view?.parent.item)
+);
+const mappedMiddleware = computed(() => {
+  const combined = [];
+  if (middleware) {
+    combined.push(...middleware);
+  }
+  switch (state.options.mode) {
+    case "menubar":
+      if (!view?.parent.item) {
+        combined.push(
+          flip({
+            crossAxis: true
+          })
+        );
+      } else if (!!view?.parent.item) {
+        combined.push(
+          flip({
+            crossAxis: false
+          })
+        );
+        combined.push(
+          shift({
+            crossAxis: true,
+            limiter: limitShift()
+          })
+        );
       }
-      switch (state.options.mode) {
-        case "menubar":
-          if (!view?.parent.item) {
-            combined.push(
-              flip({
-                crossAxis: true
-              })
-            );
-          } else if (!!view?.parent.item) {
-            combined.push(
-              flip({
-                crossAxis: false
-              })
-            );
-            combined.push(
-              shift({
-                crossAxis: true,
-                limiter: limitShift()
-              })
-            );
-          }
-          break;
-        case "dropdown":
-          combined.push(
-            flip({
-              mainAxis: true,
-              crossAxis: false
-            })
-          );
-          combined.push(
-            shift({
-              mainAxis: true,
-              crossAxis: false,
-              limiter: limitShift()
-            })
-          );
-          if (hasArrow.value) {
-            combined.push(
-              floatingArrow({
-                element: arrowRef.value
-              })
-            );
-          }
-          break;
-        case "context":
-          combined.push(
-            flip({
-              mainAxis: true,
-              crossAxis: true
-            })
-          );
-          break;
+      break;
+    case "dropdown":
+      combined.push(
+        flip({
+          mainAxis: true,
+          crossAxis: false
+        })
+      );
+      combined.push(
+        shift({
+          mainAxis: true,
+          crossAxis: false,
+          limiter: limitShift()
+        })
+      );
+      if (hasArrow.value) {
+        combined.push(
+          floatingArrow({
+            element: arrowRef.value
+          })
+        );
       }
-      return combined;
-    });
-    const mappedReferenceEl = computed(() => {
-      if (__props.referenceEl) {
-        return toValue(__props.referenceEl);
-      } else if (view?.state.clicked) {
+      break;
+    case "context":
+      combined.push(
+        flip({
+          mainAxis: true,
+          crossAxis: true
+        })
+      );
+      break;
+  }
+  return combined;
+});
+const mappedReferenceEl = computed(() => {
+  if (referenceEl) {
+    return toValue(referenceEl);
+  } else if (view?.state.clicked) {
+    return {
+      getBoundingClientRect() {
         return {
-          getBoundingClientRect() {
-            return {
-              width: 0,
-              height: 0,
-              x: view.state.clicked.x,
-              y: view.state.clicked.y,
-              top: view.state.clicked.y,
-              left: view.state.clicked.x,
-              right: view.state.clicked.x,
-              bottom: view.state.clicked.y
-            };
-          }
+          width: 0,
+          height: 0,
+          x: view.state.clicked.x,
+          y: view.state.clicked.y,
+          top: view.state.clicked.y,
+          left: view.state.clicked.x,
+          right: view.state.clicked.x,
+          bottom: view.state.clicked.y
         };
-      } else {
-        return document.querySelector(`[data-id="${viewId}-trigger"]`);
-      }
-    });
-    const mappedStrategy = computed(() => {
-      return state.options.floating?.strategy ?? ModeFloatingStrategy[state.options.mode];
-    });
-    const {
-      floatingStyles,
-      placement: floatingPlacement,
-      middlewareData
-    } = useFloating(mappedReferenceEl, elRef, {
-      placement: mappedPlacement,
-      strategy: mappedStrategy,
-      whileElementsMounted: autoUpdate,
-      middleware: mappedMiddleware
-    });
-    const arrowStyles = computed(() => {
-      if (!hasArrow.value) {
-        return {};
-      }
-      const translate = `translate3d(${middlewareData.value.arrow?.x ? `${middlewareData.value.arrow.x}px` : "0"}, ${middlewareData.value.arrow?.y ? `${middlewareData.value.arrow.y}px` : "0"}, 0)`;
-      return {
-        transform: translate
-      };
-    });
-    const placementClasses = computed(() => {
-      return floatingPlacement.value.split("-").map((value) => `-${value}`).join(" ");
-    });
-    const polygonPoints = computed(() => {
-      const position = floatingPlacement.value.split("-")[0];
-      switch (position) {
-        case "bottom":
-          return "50,50 100,100 0,100";
-        case "top":
-          return "50,50 100,0 0,0";
-        case "right":
-          return "50,50 100,100 100,0";
-        case "left":
-          return "50,50 0,100 0,0";
-        default:
-          return void 0;
       }
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: _normalizeClass(["magic-menu-float", placementClasses.value]),
-          style: _normalizeStyle(_unref(floatingStyles))
-        },
-        [
-          hasArrow.value ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              ref_key: "arrowRef",
-              ref: arrowRef,
-              class: "magic-menu-float__arrow",
-              style: _normalizeStyle(arrowStyles.value)
-            },
-            [
-              _renderSlot(_ctx.$slots, "arrow", {}, () => [
-                (_openBlock(), _createElementBlock("svg", _hoisted_1, [
-                  _createElementVNode("polygon", {
-                    points: polygonPoints.value,
-                    fill: "currentColor"
-                  }, null, 8, _hoisted_2)
-                ]))
-              ])
-            ],
-            4
-            /* STYLE */
-          )) : _createCommentVNode("v-if", true),
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        6
-        /* CLASS, STYLE */
-      );
     };
+  } else {
+    return document.querySelector(`[data-id="${viewId}-trigger"]`);
+  }
+});
+const mappedStrategy = computed(() => {
+  return state.options.floating?.strategy ?? ModeFloatingStrategy[state.options.mode];
+});
+const {
+  floatingStyles,
+  placement: floatingPlacement,
+  middlewareData
+} = useFloating(mappedReferenceEl, elRef, {
+  placement: mappedPlacement,
+  strategy: mappedStrategy,
+  whileElementsMounted: autoUpdate,
+  middleware: mappedMiddleware
+});
+const arrowStyles = computed(() => {
+  if (!hasArrow.value) {
+    return {};
+  }
+  const translate = `translate3d(${middlewareData.value.arrow?.x ? `${middlewareData.value.arrow.x}px` : "0"}, ${middlewareData.value.arrow?.y ? `${middlewareData.value.arrow.y}px` : "0"}, 0)`;
+  return {
+    transform: translate
+  };
+});
+const placementClasses = computed(() => {
+  return floatingPlacement.value.split("-").map((value) => `-${value}`).join(" ");
+});
+const polygonPoints = computed(() => {
+  const position = floatingPlacement.value.split("-")[0];
+  switch (position) {
+    case "bottom":
+      return "50,50 100,100 0,100";
+    case "top":
+      return "50,50 100,0 0,0";
+    case "right":
+      return "50,50 100,100 100,0";
+    case "left":
+      return "50,50 0,100 0,0";
+    default:
+      return void 0;
   }
 });
 </script>

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

@@ -6,32 +6,47 @@ interface MagicMenuFloatProps {
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        arrow?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-        arrowRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuFloatProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuFloatProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const arrow: boolean;
+declare const hasArrow: import("vue").ComputedRef<boolean>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/vue").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/vue").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>;
+declare const arrowStyles: import("vue").ComputedRef<{
+    transform?: undefined;
+} | {
+    transform: string;
+}>;
+declare const placementClasses: import("vue").ComputedRef<string>;
+declare const polygonPoints: import("vue").ComputedRef<"50,50 100,100 0,100" | "50,50 100,0 0,0" | "50,50 100,100 100,0" | "50,50 0,100 0,0" | undefined>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    arrow?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMenuFloatProps, {
+    arrow: typeof arrow;
+    hasArrow: typeof hasArrow;
+    floatingStyles: typeof floatingStyles;
+    arrowStyles: typeof arrowStyles;
+    placementClasses: typeof placementClasses;
+    polygonPoints: typeof polygonPoints;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuFloatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & 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;
     };

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

@@ -1,20 +1,23 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
-const _hoisted_1 = ["id", "data-disabled", "data-active", "data-pointer-disabled"];
-const _hoisted_2 = {
-  key: 0,
-  class: "magic-menu-item__pointer-guard"
-};
-import {
-  ref,
-  computed,
-  inject,
-  provide,
-  onBeforeUnmount,
-  watch,
-  useId
-} from "vue";
+<template>
+  <div
+    class="magic-menu-item"
+    :data-id="mappedId"
+    :data-disabled="disabled"
+    :data-active="item.active"
+    :data-pointer-disabled="pointerDisabled"
+    @mouseenter="guardedSelect"
+    @mousemove="guardedSelect"
+    @touchstart.passive="guardedSelect"
+    @mouseleave="guardedUnselect"
+    @click="onClick"
+  >
+    <slot :item-active="item.active" :item-disabled="disabled" />
+    <div v-if="pointerDisabled" class="magic-menu-item__pointer-guard" />
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
 import { useMenuItem } from "../composables/private/useMenuItem";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -25,103 +28,74 @@ import {
   MagicMenuItemId,
   MagicMenuItemActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuItem",
-  props: {
-    id: { type: String, required: false },
-    disabled: { type: Boolean, required: false }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    const contentId = inject(MagicMenuContentId, void 0);
-    const elRef = ref(void 0);
-    if (!instanceId) {
-      throw new Error("MagicMenuItem must be nested inside MagicMenuProvider");
-    }
-    if (!viewId) {
-      throw new Error("MagicMenuItem must be nested inside MagicMenuView");
-    }
-    if (!contentId) {
-      throw new Error("MagicMenuItem must be nested inside MagicMenuContent");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-menu-item-${useId()}`);
-    const mappedActive = computed(() => item.active);
-    const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({
-      instanceId,
-      viewId
-    });
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    const item = initializeItem({
-      id: mappedId.value,
-      disabled: __props.disabled ?? false
-    });
-    const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
-    function guardedSelect() {
-      if (state.input.type === "pointer" && !state.input.disabled.includes("pointer") && !item.active && !item.disabled) {
-        selectItem(mappedId.value);
-      }
-    }
-    const { getNestedView, unselectAllViews } = useMenuView(instanceId);
-    const nestedView = computed(() => getNestedView(mappedId.value));
-    function guardedUnselect() {
-      if (!nestedView.value || !nestedView.value.active) {
-        unselectItem(mappedId.value);
-      } else {
-        watch(
-          () => nestedView.value?.active,
-          (value) => {
-            if (!value) {
-              unselectItem(mappedId.value);
-            }
-          },
-          { once: true }
-        );
-      }
-    }
-    function onClick(event) {
-      emit("click", event);
-      state.input.type = "pointer";
-      state.input.disabled = [];
-      if (!item.disabled && !item.active) {
-        selectItem(mappedId.value);
-      }
-      if (!nestedView.value) {
-        state.active = false;
-        unselectAllViews();
-      }
-    }
-    provide(MagicMenuItemId, mappedId.value);
-    provide(MagicMenuItemActive, mappedActive);
-    onBeforeUnmount(() => {
-      deleteItem(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        id: mappedId.value,
-        ref_key: "elRef",
-        ref: elRef,
-        class: "magic-menu-item",
-        "data-disabled": _ctx.disabled,
-        "data-active": _unref(item).active,
-        "data-pointer-disabled": pointerDisabled.value,
-        onMouseenter: guardedSelect,
-        onMousemove: guardedSelect,
-        onTouchstartPassive: guardedSelect,
-        onMouseleave: guardedUnselect,
-        onClick
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          itemActive: _unref(item).active,
-          itemDisabled: _ctx.disabled
-        }),
-        pointerDisabled.value ? (_openBlock(), _createElementBlock("div", _hoisted_2)) : _createCommentVNode("v-if", true)
-      ], 40, _hoisted_1);
-    };
+const { id, disabled } = defineProps({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["click"]);
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const viewId = inject(MagicMenuViewId, void 0);
+const contentId = inject(MagicMenuContentId, void 0);
+if (!instanceId) {
+  throw new Error("MagicMenuItem must be nested inside MagicMenuProvider");
+}
+if (!viewId) {
+  throw new Error("MagicMenuItem must be nested inside MagicMenuView");
+}
+if (!contentId) {
+  throw new Error("MagicMenuItem must be nested inside MagicMenuContent");
+}
+const mappedId = computed(() => id ?? `magic-menu-item-${useId()}`);
+const mappedActive = computed(() => item.active);
+const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({
+  instanceId,
+  viewId
+});
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+const item = initializeItem({
+  id: mappedId.value,
+  disabled: disabled ?? false
+});
+const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
+function guardedSelect() {
+  if (state.input.type === "pointer" && !state.input.disabled.includes("pointer") && !item.active && !item.disabled) {
+    selectItem(mappedId.value);
+  }
+}
+const { getNestedView, unselectAllViews } = useMenuView(instanceId);
+const nestedView = computed(() => getNestedView(mappedId.value));
+function guardedUnselect() {
+  if (!nestedView.value || !nestedView.value.active) {
+    unselectItem(mappedId.value);
+  } else {
+    watch(
+      () => nestedView.value?.active,
+      (value) => {
+        if (!value) {
+          unselectItem(mappedId.value);
+        }
+      },
+      { once: true }
+    );
   }
+}
+function onClick(event) {
+  emit("click", event);
+  state.input.type = "pointer";
+  state.input.disabled = [];
+  if (!item.disabled && !item.active) {
+    selectItem(mappedId.value);
+  }
+  if (!nestedView.value) {
+    state.active = false;
+    unselectAllViews();
+  }
+}
+provide(MagicMenuItemId, mappedId.value);
+provide(MagicMenuItemActive, mappedActive);
+onBeforeUnmount(() => {
+  deleteItem(mappedId.value);
 });
 </script>