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

package/dist/popover/EUIPopover.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=29b158d9&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=03588f75&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUIPopover.vue.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.135",
+  "version": "0.0.136",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -5,22 +5,261 @@
     >
       Edvoy User Interface
     </h1>
-
-<!-- TODO: Add scroll to tab section in Student details page same -->
-
   </div>
 </template>
 <script setup lang="ts">
-
 </script>
 <style lang="scss"></style>
 
 <!-- Development code here  -->
 
- <!-- <template>
+<!-- <template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
+
+  <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
+    <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Click Method
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="click"
+          placement="bottom-end"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton="{ open }">
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                v-if="!open"
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+            <div @click.stop>
+              <EUISelect
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :items="datas"
+                :multiple="true"
+                :multiple-limit="3"
+              />
+            </div>
+
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+     <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Hover Method
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="hover"
+          placement="bottom-end"
+          :hover-hide-delay="150"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
+              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
+              Animi laborum tenetur culpa aperiam porro nihil eius soluta
+              asperiores.
+            </div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+   <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Default Open
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          v-model:visible="isInitiallyOpen"
+          placement="bottom-end"
+          :hover-hide-delay="150"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
+              sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
+              Animi laborum tenetur culpa aperiam porro nihil eius soluta
+              asperiores.
+            </div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="onDefaultClose()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+
+ <div
+      class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+    >
+      <div class="text-base font-semibold leading-loose text-gray-900">
+        Popover Manual
+      </div>
+
+      <div class="inline-flex items-center justify-end flex-none gap-4">
+        <EUIPopover
+          trigger="manual"
+          v-model:visible="popoverVisible"
+          placement="top"
+          className="max-w-80 min-w-80"
+          customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+          @click="onPopoverToggle"
+        >
+          <template #referenceButton>
+            <div class="relative">
+              <FunnelIcon class="text-current size-6" />
+              <div
+                class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+              />
+            </div>
+          </template>
+          <div
+            class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+          >
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
+            <div @click.stop>
+              <EUISelect
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :items="datas"
+                :multiple="true"
+                :multiple-limit="3"
+              />
+            </div>
+
+            <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+
+            <div class="flex items-center justify-end gap-4 pt-4">
+              <EUIButton
+                type="button"
+                size="md"
+                color="white"
+                :loading="isLoading"
+                @click="resetFilters()"
+                >Reset</EUIButton
+              >
+              <EUIButton
+                type="button"
+                size="md"
+                color="purple"
+                :loading="isLoading"
+                @click="applyFilter()"
+                >Apply</EUIButton
+              >
+            </div>
+          </div>
+        </EUIPopover>
+      </div>
+    </div>
+  </div>
+
+
      <div class="mb-10">
       <EUITabOutline
         activeColor="purple"
@@ -1152,7 +1391,7 @@ import EUIAvatar from "./avatar/EUIAvatar.vue";
 import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
 import EUIAccordion from "./accordion/EUIAccordion.vue";
 import EUITelephone from "./telephone/EUITelephone.vue";
-import { DevicePhoneMobileIcon, ExclamationTriangleIcon, HomeIcon } from "@heroicons/vue/24/outline";
+import { DevicePhoneMobileIcon, ExclamationTriangleIcon, FunnelIcon, HomeIcon } from "@heroicons/vue/24/outline";
 import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
 import EUIDashboardTable from "./table/EUIDashboardTable.vue";
 import tabData from "../data/tab";
@@ -1172,6 +1411,30 @@ import EUIAlerts from "./alerts/EUIAlerts.vue";
 import EUIButtonGroup from "./button/EUIButtonGroup.vue";
 import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
 import EUITabOutline from "./tabs/EUITabOutline.vue";
+import EUIPopover from "./popover/EUIPopover.vue";
+
+// TODO: Popover
+const isLoading = ref(false);
+const popoverVisible = ref(false);
+
+const isInitiallyOpen = ref(true);
+const onDefaultClose = () => {
+  isInitiallyOpen.value = false;
+};
+
+const onPopoverToggle = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
+const onPopoverHide = () => {
+  popoverVisible.value = false;
+};
+
+const applyFilter = () => {
+  onPopoverHide();
+};
+
+const resetFilters = () => {};
 
 const allDays = ref([
   { name: "7 days", count: 5 },

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>

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>