@v1nt1248/3nclient-lib 0.2.50 → 0.2.51

package/package.json

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

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

@@ -27,3 +27,7 @@ export interface Ui3nMenuSlots {
   default: () => VNode;
   menu?: () => VNode;
 }
+
+export interface Ui3nMenuExpose {
+  update: () => void;
+}

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

@@ -2,7 +2,7 @@
   import { computed, ref, watch } from 'vue';
   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 type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose } from './types';
   import { Nullable } from '@/types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
@@ -40,26 +40,27 @@
   const {
     floatingStyles,
     isPositioned,
+    update,
   } = 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) {
@@ -105,9 +106,23 @@
     val => {
       if (val) {
         outerTriggerElement.value = val;
+        update();
       }
     },
-  )
+  );
+
+  watch(
+    [() => props.offsetX, () => props.offsetY],
+    ([offsetX, offsetY], [oldOffsetX, oldOffsetY]) => {
+      if (offsetX !== oldOffsetX || offsetY !== oldOffsetY) {
+        update();
+      }
+    },
+  );
+
+  defineExpose<Ui3nMenuExpose>({
+    update,
+  });
 </script>
 
 <template>