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

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

@@ -1,233 +1,257 @@
-<template>
-  <div
-    class="magic-menu-float"
-    ref="elRef"
-    :style="floatingStyles"
-    :class="placementClasses"
-  >
-    <div
-      v-if="hasArrow"
-      ref="arrowRef"
-      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 lang="ts" setup>
+<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"];
 import {
   ref,
   computed,
   inject,
-  toValue,
-  type MaybeRef,
-  type ComponentPublicInstance,
-} from 'vue'
+  toValue
+} from "vue";
 import {
   useFloating,
   autoUpdate,
   flip,
   shift,
   limitShift,
-  arrow,
-  type Placement,
-} from '@floating-ui/vue'
-import { MagicMenuInstanceId, MagicMenuViewId } from '../symbols'
-import { useMenuView } from '../composables/private/useMenuView'
-import { useMenuState } from '../composables/private/useMenuState'
-import { ModeFloatingStrategy } from '../utils/modeFloatingStrategyDefaults'
-
-interface MagicMenuFloatProps {
-  placement?: Placement
-  arrow?: boolean
-  referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>
-}
-
-const props = defineProps<MagicMenuFloatProps>()
-
-const elRef = ref<HTMLElement | undefined>(undefined)
-const arrowRef = ref<HTMLElement | undefined>(undefined)
-
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const viewId = inject(MagicMenuViewId, undefined)
-
-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'
-  }
-})
-
-const hasArrow = computed(
-  () => props.arrow ?? (state.options.mode === 'dropdown' && !view?.parent.item)
-)
-
-const mappedMiddleware = computed(() => {
-  const middleware = []
-
-  switch (state.options.mode) {
-    case 'menubar':
-      if (!view?.parent.item) {
-        middleware.push(
-          flip({
-            crossAxis: true,
-          })
-        )
-      } else if (!!view?.parent.item) {
-        middleware.push(
-          flip({
-            crossAxis: false,
-          })
-        )
-        middleware.push(
-          shift({
-            crossAxis: true,
-            limiter: limitShift(),
-          })
-        )
+  arrow as floatingArrow
+} from "@floating-ui/vue";
+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;
       }
-      break
-    case 'dropdown':
-      middleware.push(
-        flip({
-          mainAxis: true,
-          crossAxis: false,
-        })
-      )
-      middleware.push(
-        shift({
-          mainAxis: true,
-          crossAxis: false,
-          limiter: limitShift(),
-        })
-      )
-      if (hasArrow.value) {
-        middleware.push(
-          arrow({
-            element: arrowRef.value,
-          })
-        )
+      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;
       }
-      break
-    case 'context':
-      middleware.push(
-        flip({
-          mainAxis: true,
-          crossAxis: true,
-        })
-      )
-      break
-  }
-
-  return middleware
-})
-
-const mappedReferenceEl = computed(() => {
-  if (props.referenceEl) {
-    return toValue(props.referenceEl)
-  } else if (view?.state.clicked) {
-    return {
-      getBoundingClientRect() {
+    });
+    const hasArrow = computed(
+      () => __props.arrow ?? (state.options.mode === "dropdown" && !view?.parent.item)
+    );
+    const mappedMiddleware = computed(() => {
+      const combined = [];
+      if (__props.middleware) {
+        combined.push(...__props.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()
+              })
+            );
+          }
+          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;
+      }
+      return combined;
+    });
+    const mappedReferenceEl = computed(() => {
+      if (__props.referenceEl) {
+        return toValue(__props.referenceEl);
+      } else if (view?.state.clicked) {
         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,
-        }
-      },
-    }
-  } else {
-    return document.querySelector(`[data-id="${viewId}-trigger"]`)
-  }
-})
-
-const mappedStrategy = computed(() => {
-  return (
-    state.options.floating?.strategy ?? ModeFloatingStrategy[state.options.mode]
-  )
-})
-
-const { floatingStyles, placement, middlewareData } = useFloating(
-  mappedReferenceEl,
-  elRef,
-  {
-    placement: mappedPlacement,
-    strategy: mappedStrategy,
-    whileElementsMounted: autoUpdate,
-    middleware: mappedMiddleware,
+          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
+            };
+          }
+        };
+      } 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 */
+      );
+    };
   }
-)
+});
+</script>
 
-const arrowStyles = computed(() => {
-  if (!hasArrow.value) {
-    return {}
-  }
+<style>
+.magic-menu-float {
+  display: flex;
+  z-index: var(--magic-menu-float-z-index, 999);
+}
 
-  let translate = 'translate3d('
-  ;(translate +=
-    middlewareData.value.arrow?.x != null
-      ? `${middlewareData.value.arrow.x}px`
-      : '0'),
-    (translate += ', ')
-  ;(translate +=
-    middlewareData.value.arrow?.y != null
-      ? `${middlewareData.value.arrow.y}px`
-      : '0'),
-    (translate += ', 0)')
+.magic-menu-float.-top {
+  flex-direction: column-reverse;
+}
 
-  return {
-    transform: translate,
-  }
-})
+.magic-menu-float.-bottom {
+  flex-direction: column;
+}
 
-const placementClasses = computed(() => {
-  return placement.value
-    .split('-')
-    .map((value) => `-${value}`)
-    .join(' ')
-})
+.magic-menu-float.-left {
+  flex-direction: row-reverse;
+}
 
-const polygonPoints = computed(() => {
-  const position = placement.value.split('-')[0]
+.magic-menu-float.-right {
+  flex-direction: row;
+}
 
-  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'
+.magic-menu-float__arrow {
+  width: var(--magic-menu-float-arrow-width, 0.75rem);
+  height: var(--magic-menu-float-arrow-height, 0.75rem);
+  color: var(--magic-menu-float-arrow-color, inherit);
+  & svg {
+    width: 100%;
+    height: 100%;
   }
-})
-</script>
-
-<style>
-.magic-menu-float{display:flex;z-index:var(--magic-menu-float-z-index,999)}.magic-menu-float.-top{flex-direction:column-reverse}.magic-menu-float.-bottom{flex-direction:column}.magic-menu-float.-left{flex-direction:row-reverse}.magic-menu-float.-right{flex-direction:row}.magic-menu-float__arrow{color:var(--magic-menu-float-arrow-color,inherit);height:var(--magic-menu-float-arrow-height,.75rem);width:var(--magic-menu-float-arrow-width,.75rem)}.magic-menu-float__arrow svg{height:100%;width:100%}
+}
 </style>

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

@@ -1,7 +1,8 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
-import { type Placement } from '@floating-ui/vue';
+import { type Placement, type Middleware } from '@floating-ui/vue';
 interface MagicMenuFloatProps {
     placement?: Placement;
+    middleware?: Middleware[];
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
@@ -18,9 +19,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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, {}, HTMLDivElement>;
+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"]>;
 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;