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

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=359908fd&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=29b158d9&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.134",
+  "version": "0.0.135",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -6,7 +6,22 @@
       Edvoy User Interface
     </h1>
 
-    <div class="mb-10">
+<!-- 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>
+  <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="mb-10">
       <EUITabOutline
         activeColor="purple"
         size="sm"
@@ -31,8 +46,10 @@
       </EUITabOutline>
     </div>
 
-    <div>
-      <EUIButtonGroup
+        <div class="p-8 space-x-6 space-y-4">
+      <pre class="text-right">{{ activeDays }}--</pre>
+      <div class="inline-flex flex-col items-end w-full">
+          <EUIButtonGroup
           activeColor="purple"
           size="sm"
           :rounded="false"
@@ -44,66 +61,13 @@
           <div
             class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
           >
-            Renewals due in <span class="font-bold text-red-500 text-xxs"> {{ activeDays }}</span>
+            Renewals due in
           </div>
         </template>
          <template #default="{ data, activeName}">
              {{ data.name }} <small :class="activeName === data.name ? 'opacity-100': 'opacity-75'">({{ data.count }})</small>
         </template>
       </EUIButtonGroup>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import EUITabOutline from "./tabs/EUITabOutline.vue";
-import EUIButtonGroup from "./button/EUIButtonGroup.vue";
-
-const allDays = ref([
-  { name: "7 days", count: 5 },
-  { name: "15 days", count: 10 },
-  { name: "16-30 days", count: 20 },
-  { name: "31-60 days", count: 121 },
-  { name: "61-90 days", count: 40 },
-]);
-
-const activeDays = ref(allDays.value[0].name);
-const activeTab = ref(allDays.value[3].name)
-
-const onchangeActiveTab = (val: any) => {
-  activeTab.value = val.name;
-};
-
-const onchangeDays = (val:any) => {
-  activeDays.value = val.name
-}
-</script>
-<style lang="scss"></style>
-
-<!-- Development code here  -->
-<!--<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="p-8 space-x-6 space-y-12">
-      <pre class="text-right">{{ activeDays }}--</pre>
-      <div class="inline-flex flex-col items-end w-full">
-        <EUIButtonGroup
-          activeColor="purple"
-          size="sm"
-          :rounded="false"
-          :items="allDays"
-          :defaultActive="activeDays"
-          @update:clicked-button="onchangeActiveTab"
-        >
-        <template #before>
-          <div
-            class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
-          >
-            Renewals due in
-          </div>
-        </template>
-      </EUIButtonGroup>
       </div>
 
       <div class="inline-flex items-center justify-end w-full">
@@ -1207,6 +1171,7 @@ import UTableview from "./table/UTableview.vue";
 import EUIAlerts from "./alerts/EUIAlerts.vue";
 import EUIButtonGroup from "./button/EUIButtonGroup.vue";
 import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
+import EUITabOutline from "./tabs/EUITabOutline.vue";
 
 const allDays = ref([
   { name: "7 days", count: 5 },
@@ -1216,12 +1181,17 @@ const allDays = ref([
   { name: "61-90 days", count: 40 },
 ]);
 
-const activeDays = ref(allDays.value[1].name);
+const activeDays = ref(allDays.value[0].name);
+const activeTab = ref(allDays.value[3].name)
 
 const onchangeActiveTab = (val: any) => {
-  activeDays.value = val.name;
+  activeTab.value = val.name;
 };
 
+const onchangeDays = (val:any) => {
+  activeDays.value = val.name
+}
+
 const searchInput = ref("");
 const showSearch = ref(false);
 
@@ -1229,7 +1199,6 @@ const seachStudent = (e) => {
   console.log("seachStudent", e);
 };
 
-
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());
 const loading = ref(false);

package/src/components/popover/EUIPopover.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div ref="popperWrapper" class="isolate w-max">
     <div
       ref="popperButton"
-      :class="['inline-flex items-center text-sm font-semibold gap-x-2', customButton]"
+      :class="['inline-flex items-center text-sm font-semibold gap-x-2 cursor-pointer', customButton]"
     >
       <slot name="referenceButton" :open="isOpen"/>
     </div>
@@ -52,6 +52,7 @@ const props = defineProps({
   }
 });
 
+const popperWrapper = ref<HTMLElement | null>(null);
 const popperInstance = ref<Instance | null>(null);
 const popperButton = ref<HTMLElement | null>(null);
 const tooltip = ref<HTMLElement | null>(null);
@@ -60,9 +61,10 @@ const isOpen = ref(false);
 const emit = defineEmits(['showPopover', 'hidePopover']);
 
 onMounted(() => {
+  onClickOutside(popperWrapper.value, hide);
+
   if (props.trigger === "click") {
-    useEventListener(popperButton.value, "click", show);
-    onClickOutside(popperButton.value, hide);
+    useEventListener(popperButton.value, "click", toggle);
   } else if (props.trigger === "hover") {
     const showEvents = ["mouseenter", "focus"];
     const hideEvents = ["mouseleave", "blur"];
@@ -91,6 +93,14 @@ onMounted(() => {
   }
 });
 
+function toggle() {
+  if (isOpen.value) {
+    hide();
+  } else {
+    show();
+  }
+}
+
 function show() {
   tooltip.value?.setAttribute("data-show", "");
   isOpen.value = true;

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',
           ]"