@onereach/ui-components 2.65.2-beta.1974.0 → 2.65.2-beta.1981.0

package/src/components/or-menu-v3/OrMenu.vue

@@ -6,7 +6,7 @@
   >
     <OrPopover
       ref="popover"
-      :variant="'auto'"
+      :variant="'popover'"
       :trigger="trigger"
       :placement="placement"
       :full-width="false"
@@ -59,8 +59,6 @@ export default defineComponent({
     'root',
     'open',
     'close',
-    'isOpen',
-    'toggle',
   ],
 
   setup() {
@@ -69,7 +67,7 @@ export default defineComponent({
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverRoot = computed(() => popover.value?.root);
-    const isOpen = computed(() => popover.value?.isOpen);
+
     // Styles
     const classAttribute = useClassAttribute();
 
@@ -100,10 +98,6 @@ export default defineComponent({
       }
     }
 
-    function toggle(): void {
-      isOpen.value ? close() : open();
-    }
-
     // Handlers
     function onClick(event: Event): void {
       const path = event.composedPath() as HTMLElement[];
@@ -123,10 +117,8 @@ export default defineComponent({
       popoverRoot,
       rootStyles,
       bodyStyles,
-      isOpen,
       open,
       close,
-      toggle,
       onClick,
     };
   },

package/src/components/or-menu-v3/styles.ts

@@ -8,7 +8,6 @@ export const MenuBody: string[] = [
   'overflow-y-auto',
 
   // Box
-  'min-w-[160px]',
-  'md:max-w-[256px]',
+  'max-w-[128px]',
   'max-h-[340px]',
 ];

package/src/components/or-popover-v3/OrPopover.vue

@@ -21,7 +21,7 @@
     <template v-if="isMobile && variant === 'auto' || variant === 'bottom-sheet'">
       <OrBottomSheet
         ref="bottomSheet"
-        @update:state="handleBottomSheetState"
+        @update:state="$emit('update:state', $event)"
       >
         <slot />
       </OrBottomSheet>
@@ -83,7 +83,6 @@ export default defineComponent({
   expose: [
     'root',
     'state',
-    'isOpen',
     'open',
     'close',
   ],
@@ -113,7 +112,6 @@ export default defineComponent({
 
     // State
     const state = ref<'open' | 'closed'>('closed');
-    const isOpen = computed(() => state.value === 'open');
 
     // Events
     watch(state, (value) => {
@@ -187,15 +185,6 @@ export default defineComponent({
       }
     }
 
-    // Handlers
-    function handleBottomSheetState(bottomShetState: string): void {
-      if (bottomShetState === 'closed') {
-        state.value = 'closed';
-      } else {
-        state.value = 'open';
-      }
-    }
-
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -244,11 +233,9 @@ export default defineComponent({
       root,
       bottomSheet,
       bottomSheetRoot,
-      handleBottomSheetState,
       rootStyles,
       bodyStyles,
       state,
-      isOpen,
       open,
       close,
     };

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { useElementHover } from '@vueuse/core';
+import { useDebounceFn, useElementHover } from '@vueuse/core';
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { useClassAttribute } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
@@ -85,21 +85,25 @@ export default defineComponent({
     ]);
 
     // Methods
-    function open(): void {
-      const popoverInstance = popover.value;
+    const open = useDebounceFn(() => {
+      if (hover.value) {
+        const popoverInstance = popover.value;
 
-      if (popoverInstance) {
-        (popoverInstance.open as () => void)();
+        if (popoverInstance) {
+          (popoverInstance.open as () => void)();
+        }
       }
-    }
+    }, 1000);
 
-    function close(): void {
-      const popoverInstance = popover.value;
+    const close = useDebounceFn(() => {
+      if (!hover.value) {
+        const popoverInstance = popover.value;
 
-      if (popoverInstance) {
-        (popoverInstance.close as () => void)();
+        if (popoverInstance) {
+          (popoverInstance.close as () => void)();
+        }
       }
-    }
+    }, 500);
 
     // Effects
     // #region Hover