edvoyui-component-library-test-flight 0.0.135 → 0.0.137

package/src/components/popover/EUIPopover.vue

@@ -1,16 +1,31 @@
 <template>
-  <div ref="popperWrapper" class="isolate w-max">
+  <div ref="popperWrapper" class="w-max">
     <div
       ref="popperButton"
+      :id="triggerId"
+      :aria-describedby="tooltipId"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
       :class="['inline-flex items-center text-sm font-semibold gap-x-2 cursor-pointer', customButton]"
+      @click="handleClick"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @focus="handleFocus"
+      @blur="handleBlur"
     >
       <slot name="referenceButton" :open="isOpen"/>
     </div>
     <div
-      ref="tooltip"
-      :class="['poppertooltip h-auto text-sm font-normal bg-white', className]"
+     ref="tooltip"
+      :id="tooltipId"
+      role="tooltip"
+      :class="['poppertooltip h-auto text-sm font-normal select-none z-50', className]"
+      :data-show="isOpen ? '' : null"
+      @click.stop
+      @mouseenter="handleTooltipMouseEnter"
+      @mouseleave="handleTooltipMouseLeave"
     >
-      <div class="arrow" data-popper-arrow />
+      <div ref="arrowElement" class="arrow" data-popper-arrow />
       <div
         v-if="title"
         class="text-base font-semibold text-current leading-[normal] px-4 py-2"
@@ -22,19 +37,23 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue";
+import { computed, nextTick, onBeforeUnmount, PropType, watch } from "vue";
 import { createPopper, Instance } from "@popperjs/core";
-import { onClickOutside, useEventListener } from "@vueuse/core";
+import { onClickOutside } from "@vueuse/core";
 import { onMounted, ref } from "vue";
 const props = defineProps({
+  defaultOpen: {
+    type: Boolean,
+    default: false,
+  },
   title: {
     type: String,
     default: "",
   },
   trigger: {
-    type: String as PropType<"click" | "hover">,
+    type: String as PropType<"click" | "hover" | "manual">,
     default: "click",
-    validator: (value: string) => ["click", "hover"].includes(value),
+    validator: (value: string) => ["click", "hover", "manual"].includes(value),
   },
   className: {
     type: String,
@@ -49,70 +68,179 @@ const props = defineProps({
     type: String,
     required: false,
     default: ''
-  }
+  },
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  hoverHideDelay: {
+    type: Number,
+    default: 100,
+  },
 });
 
 const popperWrapper = ref<HTMLElement | null>(null);
 const popperInstance = ref<Instance | null>(null);
 const popperButton = ref<HTMLElement | null>(null);
 const tooltip = ref<HTMLElement | null>(null);
-const isOpen = ref(false);
+const arrowElement = ref<HTMLElement | null>(null);
 
-const emit = defineEmits(['showPopover', 'hidePopover']);
+const isOpen = ref(props.visible === undefined ? props.defaultOpen : props.visible);
+const hideTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 
-onMounted(() => {
-  onClickOutside(popperWrapper.value, hide);
+const uniqueId = `popover-${Math.random().toString(36).substring(2, 9)}`;
+const triggerId = computed(() => `${uniqueId}-trigger`);
+const tooltipId = computed(() => `${uniqueId}-tooltip`);
 
-  if (props.trigger === "click") {
-    useEventListener(popperButton.value, "click", toggle);
-  } else if (props.trigger === "hover") {
-    const showEvents = ["mouseenter", "focus"];
-    const hideEvents = ["mouseleave", "blur"];
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'show'): void;
+  (e: 'hide'): void;
+}>();
 
-    showEvents.forEach((event) => {
-      popperButton.value?.addEventListener(event, show);
-    });
+watch(() => props.visible, (newValue) => {
+  if (newValue !== undefined && newValue !== isOpen.value) {
+    if (newValue) {
+      show();
+    } else {
+      hide();
+    }
+  }
+});
 
-    hideEvents.forEach((event) => {
-      popperButton.value?.addEventListener(event, hide);
-    });
+watch(isOpen, (newValue) => {
+  if (props.visible === undefined || newValue !== props.visible) {
+    emit('update:visible', newValue);
   }
+  nextTick(() => {
+    popperInstance.value?.update();
+  });
+});
 
-  if (popperButton.value && tooltip.value) {
+
+const initializePopper = () => {
+  if (popperButton.value && tooltip.value && arrowElement.value) {
     popperInstance.value = createPopper(popperButton.value, tooltip.value, {
       placement: props.placement,
       modifiers: [
+        { name: 'offset', options: { offset: [0, 10] } },
+        { name: 'arrow', options: { element: arrowElement.value } },
         {
-          name: "offset",
+          name: 'preventOverflow',
           options: {
-            offset: [0, 8],
+            padding: 8,
           },
         },
       ],
     });
   }
-});
+};
 
-function toggle() {
-  if (isOpen.value) {
-    hide();
+const destroyPopper = () => {
+  if (popperInstance.value) {
+    popperInstance.value.destroy();
+    popperInstance.value = null;
+  }
+};
+
+const show = () => {
+  if (isOpen.value) return;
+  clearTimeout(hideTimer.value!);
+  isOpen.value = true;
+  emit('show');
+  nextTick(() => {
+    if (!popperInstance.value) {
+        initializePopper();
+    }
+     popperInstance.value?.update();
+     popperInstance.value?.forceUpdate();
+  });
+};
+
+// Hide the popover
+const hide = (immediate = false) => {
+  if (!isOpen.value) return; // Already closed
+
+  if (props.trigger === 'hover' && !immediate) {
+    clearTimeout(hideTimer.value!);
+    hideTimer.value = setTimeout(() => {
+      isOpen.value = false;
+      emit('hide');
+    }, props.hoverHideDelay);
   } else {
+    clearTimeout(hideTimer.value!);
+    isOpen.value = false;
+    emit('hide');
+  }
+};
+
+const handleClick = () => {
+  if (props.trigger === 'click') {
+    if (isOpen.value) {
+      hide(true);
+    } else {
+      show();
+    }
+  }
+};
+
+const handleMouseEnter = () => {
+  if (props.trigger === 'hover') {
     show();
   }
-}
+};
 
-function show() {
-  tooltip.value?.setAttribute("data-show", "");
-  isOpen.value = true;
-  emit("showPopover");
-  popperInstance.value?.update();
-}
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide(false);
+  }
+};
 
-function hide() {
-  tooltip.value?.removeAttribute("data-show");
-  isOpen.value = false;
-  emit("hidePopover");
-}
+const handleFocus = () => {
+  if (props.trigger === 'hover') {
+    show();
+  }
+};
+
+const handleBlur = () => {
+     if (props.trigger === 'hover') {
+         hide(false);
+     }
+};
+
+const handleTooltipMouseEnter = () => {
+  if (props.trigger === 'hover') {
+    clearTimeout(hideTimer.value!);
+  }
+};
+
+const handleTooltipMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide(false);
+  }
+};
+
+onMounted(() => {
+  if (isOpen.value) {
+     nextTick(() => {
+       initializePopper();
+       setTimeout(() => popperInstance.value?.forceUpdate(), 50);
+     });
+  }
+
+  if (props.trigger === 'click') {
+    onClickOutside(popperWrapper.value, () => {
+        if (isOpen.value) {
+             hide(true);
+        }
+    }, { ignore: [popperButton] });
+  }
+});
+
+onBeforeUnmount(() => {
+  destroyPopper();
+  clearTimeout(hideTimer.value!); // Clear any running timers
+});
 </script>
 
 <style lang="scss" scoped>