@v1nt1248/3nclient-lib 0.2.4 → 0.2.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-menu/types.ts

@@ -1,7 +1,8 @@
-import { VNode } from 'vue';
+import type { VNode } from 'vue';
 
 export interface Ui3nMenuProps {
   modelValue?: boolean;
+  triggerElement?: HTMLElement;
   positionStrategy?: 'absolute' | 'fixed';
   positionAutoupdate?: boolean;
   offsetX?: number;

package/src/components/ui3n-menu/ui3n-menu.vue

@@ -3,6 +3,7 @@
   import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
   import { default as vClickOutside } from '../../directives/ui3n-click-outside';
   import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots } from './types';
+  import { Nullable } from '@/components/types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
     positionStrategy: 'absolute',
@@ -22,6 +23,10 @@
   const menuContentElement = ref<HTMLDivElement | null>(null);
   const isShow = ref(false);
 
+  const outerTriggerElement = ref<Nullable<HTMLElement>>(props.triggerElement || null);
+
+  const usedTriggerElement = computed(() => outerTriggerElement.value || menuTriggerElement.value);
+
   const contentBorderRadiusCss = computed(() => {
     if (typeof props.contentBorderRadius === 'number') {
       return `${props.contentBorderRadius}px`;
@@ -32,27 +37,29 @@
   });
   const zIndexCss = computed(() => props.zIndex);
 
-  const { floatingStyles, isPositioned } = useFloating(
-    menuTriggerElement,
+  const {
+    floatingStyles,
+    isPositioned,
+  } = useFloating(
+    usedTriggerElement,
     menuContentElement,
     {
-      placement: 'bottom-start',
-      strategy: props.positionStrategy,
-      middleware: [
-        offset({
-          mainAxis: props.offsetY,
-          crossAxis: props.offsetX + 2,
-        }),
-        flip({
-          fallbackAxisSideDirection: 'end',
-          flipAlignment: false,
-          fallbackPlacements: ['bottom-end'],
-        }),
-        shift(),
-      ],
-      whileElementsMounted: props.positionAutoupdate || props.positionStrategy === 'fixed' ? autoUpdate : undefined,
-    },
-  );
+    placement: 'bottom-start',
+    strategy: props.positionStrategy,
+    middleware: [
+      offset({
+        mainAxis: props.offsetY,
+        crossAxis: props.offsetX + 2,
+      }),
+      flip({
+        fallbackAxisSideDirection: 'end',
+        flipAlignment: false,
+        fallbackPlacements: ['bottom-end'],
+      }),
+      shift(),
+    ],
+    whileElementsMounted: props.positionAutoupdate || props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+  });
 
   function toggleMenu() {
     if (props.disabled) {
@@ -79,12 +86,9 @@
     }
   }
 
-  watch(
-    isPositioned,
-    val => {
-      val ? emits('opened') : emits('closed');
-    },
-  );
+  watch(isPositioned, val => {
+    val ? emits('opened') : emits('closed');
+  });
 
   watch(
     () => props.modelValue,
@@ -92,12 +96,25 @@
       if (isShow.value !== val) {
         isShow.value = val;
       }
-    }, { immediate: true },
+    },
+    { immediate: true },
   );
+
+  watch(
+    () => props.triggerElement,
+    val => {
+      if (val) {
+        outerTriggerElement.value = val;
+      }
+    },
+  )
 </script>
 
 <template>
-  <div ref="menuElement" :class="$style.ui3nMenu">
+  <div
+    ref="menuElement"
+    :class="$style.ui3nMenu"
+  >
     <div
       ref="menuTriggerElement"
       :class="[$style.ui3nMenuTrigger, disabled && $style.ui3nMenuTriggerDisabled]"