@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.41

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: String, 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

@@ -1,37 +1,23 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
-import { type Placement, type Middleware } from '@floating-ui/vue';
+import { type Middleware } from '@floating-ui/vue';
+import type { MenuPlacement } from '../types/index.js';
 interface MagicMenuFloatProps {
-    placement?: Placement;
+    placement?: MenuPlacement;
     middleware?: Middleware[];
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        arrow?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        elRef: HTMLDivElement;
-        arrowRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    arrow?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
-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 __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 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.d.vue.ts

@@ -0,0 +1,26 @@
+interface MagicMenuItemProps {
+    id?: string;
+    disabled?: boolean;
+}
+declare var __VLS_1: {
+    itemActive: boolean;
+    itemDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    enter: () => any;
+}, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onEnter?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};