edvoyui-component-library-test-flight 0.0.134 → 0.0.136

package/src/components/popover/EUIPopover.vue

@@ -1,16 +1,31 @@
 <template>
-  <div>
+  <div ref="popperWrapper" class="w-max">
     <div
       ref="popperButton"
-      :class="['inline-flex items-center text-sm font-semibold gap-x-2', customButton]"
+      :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,60 +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(() => {
-  if (props.trigger === "click") {
-    useEventListener(popperButton.value, "click", show);
-    onClickOutside(popperButton.value, hide);
-  } else if (props.trigger === "hover") {
-    const showEvents = ["mouseenter", "focus"];
-    const hideEvents = ["mouseleave", "blur"];
-
-    showEvents.forEach((event) => {
-      popperButton.value?.addEventListener(event, show);
-    });
+const uniqueId = `popover-${Math.random().toString(36).substring(2, 9)}`;
+const triggerId = computed(() => `${uniqueId}-trigger`);
+const tooltipId = computed(() => `${uniqueId}-tooltip`);
 
-    hideEvents.forEach((event) => {
-      popperButton.value?.addEventListener(event, hide);
-    });
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'show'): void;
+  (e: 'hide'): void;
+}>();
+
+watch(() => props.visible, (newValue) => {
+  if (newValue !== undefined && newValue !== isOpen.value) {
+    if (newValue) {
+      show();
+    } else {
+      hide();
+    }
   }
+});
 
-  if (popperButton.value && tooltip.value) {
+watch(isOpen, (newValue) => {
+  if (props.visible === undefined || newValue !== props.visible) {
+    emit('update:visible', newValue);
+  }
+  nextTick(() => {
+    popperInstance.value?.update();
+  });
+});
+
+
+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,
           },
         },
       ],
     });
   }
-});
+};
+
+const destroyPopper = () => {
+  if (popperInstance.value) {
+    popperInstance.value.destroy();
+    popperInstance.value = null;
+  }
+};
 
-function show() {
-  tooltip.value?.setAttribute("data-show", "");
+const show = () => {
+  if (isOpen.value) return;
+  clearTimeout(hideTimer.value!);
   isOpen.value = true;
-  emit("showPopover");
-  popperInstance.value?.update();
-}
+  emit('show');
+  nextTick(() => {
+    if (!popperInstance.value) {
+        initializePopper();
+    }
+     popperInstance.value?.update();
+     popperInstance.value?.forceUpdate();
+  });
+};
 
-function hide() {
-  tooltip.value?.removeAttribute("data-show");
-  isOpen.value = false;
-  emit("hidePopover");
-}
+// 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();
+  }
+};
+
+const handleMouseLeave = () => {
+  if (props.trigger === 'hover') {
+    hide(false);
+  }
+};
+
+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>

package/src/components/table/UTableview.vue

@@ -63,9 +63,11 @@
       <template #expanded="{ row, rowIndex, headerLength }">
         <tr v-if="rowIndex === activeRowIndex" class="row-expanded" :key="`${row}-${rowIndex}-val`">
           <td :colspan="headerLength">
-            <table
+           <div>
+             <table
               class="px-12 border-separate table-auto max-w-max border-spacing-x-0 border-spacing-y-2"
             >
+             <tbody>
               <tr
                 class="rounded-lg group bg-white hover:bg-violet-50 hover:ring-1 ring-violet-300 hover:shadow-[0px_1px_2px_0px_#4B55631A,0px_2px_2px_0px_#4B556314]"
               >
@@ -122,7 +124,10 @@
                   {{ data }}
                 </td>
               </tr>
+             </tbody>
+
             </table>
+           </div>
           </td>
         </tr>
       </template>

package/src/components/tabs/EUITabOutline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white" v-bind="$attrs">
+  <div class="bg-white rounded-t-xl" v-bind="$attrs">
     <div
       class="relative z-10 inline-flex items-center w-full gap-2 pt-3 overflow-hidden transition-all duration-200 ease-in border border-b-0 border-solid rounded-t-xl isolate before:h-4 before:w-px before:bg-gray-200 before:-bottom-3 before:-left-px before:absolute after:h-4 after:w-px after:bg-gray-200 after:-bottom-3 after:-right-px after:absolute bg-gradient-to-b from-gray-100"
     >
@@ -20,7 +20,7 @@
           v-bind="buttonAttrs"
           :data-tab="data.name"
           :class="[
-            'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center',
+            'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center will-change-contents',
             getBtnClass(data.name || ''),
             activeBtnName === data.name ? 'font-semibold' : 'font-normal',
           ]"