@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.14

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

@@ -9,8 +9,8 @@ interface MagicMenuContentProps {
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
 declare const viewId: string | undefined;
-declare const view: import("../types").MenuView | undefined;
-declare const state: import("../types").MenuState;
+declare const view: import("../types/index.js").MenuView | undefined;
+declare const state: import("../types/index.js").MenuState;
 declare const pointerDisabled: import("vue").ComputedRef<boolean>;
 declare const mappedTransition: import("vue").ComputedRef<string>;
 declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
@@ -19,7 +19,7 @@ declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () =
 declare const coords: import("vue").Ref<{
     x: number;
     y: number;
-}[], import("../types").Coordinates[] | {
+}[], import("../types/index.js").Coordinates[] | {
     x: number;
     y: number;
 }[]>;

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

@@ -1,11 +1,27 @@
-<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 {
   useTemplateRef,
   computed,
@@ -24,199 +40,170 @@ 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 }
+const { placement, middleware, arrow, referenceEl } = defineProps({
+  placement: {
+    type: null,
+    required: false
   },
-  setup(__props) {
-    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 (__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);
+  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: "el",
-          class: _normalizeClass(["magic-menu-float", placementClasses.value]),
-          style: _normalizeStyle(_unref(floatingStyles))
-        },
-        [
-          hasArrow.value ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              ref: "arrow",
-              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/MagicMenuItem.vue

@@ -1,11 +1,22 @@
-<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 = ["data-id", "data-disabled", "data-active", "data-pointer-disabled"];
-const _hoisted_2 = {
-  key: 0,
-  class: "magic-menu-item__pointer-guard"
-};
+<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";
@@ -17,100 +28,80 @@ import {
   MagicMenuItemId,
   MagicMenuItemActive
 } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuItem",
-  props: {
-    id: { type: String, required: false },
-    disabled: { type: Boolean, required: false }
+const { id, disabled } = defineProps({
+  id: {
+    type: String,
+    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);
-    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", {
-        class: "magic-menu-item",
-        "data-id": mappedId.value,
-        "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);
-    };
+  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>
 

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

@@ -3,7 +3,7 @@ interface MagicMenuItemProps {
     disabled?: boolean;
 }
 declare const mappedId: import("vue").ComputedRef<string>;
-declare const item: import("../types").MenuItem;
+declare const item: import("../types/index.js").MenuItem;
 declare const pointerDisabled: import("vue").ComputedRef<boolean>;
 declare function guardedSelect(): void;
 declare function guardedUnselect(): void;