edvoyui-component-library-test-flight 0.0.133 → 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.133",
+  "version": "0.0.135",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -6,13 +6,28 @@
       Edvoy User Interface
     </h1>
 
-    <div class="">
+<!-- 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"
         :items="allDays"
-        :defaultActive="activeDays"
-        @update:clicked-button="onchangeActiveTab"
+        :defaultActive="activeTab"
+        @update:activeTabItem="onchangeActiveTab"
       >
         <template v-slot:content="{ data, activeName }">
           <div class="space-y-4">
@@ -30,43 +45,17 @@
         </template>
       </EUITabOutline>
     </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from "vue";
-import EUITabOutline from "./tabs/EUITabOutline.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 onchangeActiveTab = (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">
+        <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
+          <EUIButtonGroup
           activeColor="purple"
           size="sm"
           :rounded="false"
           :items="allDays"
           :defaultActive="activeDays"
-          @update:clicked-button="onchangeActiveTab"
+          @update:activeButton="onchangeDays"
         >
         <template #before>
           <div
@@ -75,6 +64,9 @@ const onchangeActiveTab = (val: any) => {
             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>
 
@@ -1179,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 },
@@ -1188,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);
 
@@ -1201,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/button/EUIButtonGroup.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
     <div
-      class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
-      :class="[rounded ? 'rounded-full' : 'rounded-lg']"
+    class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
+    :class="[rounded ? 'rounded-full' : 'rounded-lg']"
+    v-bind="$attrs"
     >
       <slot name="before" />
       <nav class="relative z-0 inline-flex flex-row items-center gap-2">
@@ -16,7 +17,7 @@
         <button
           v-for="(data, index) in items"
           :key="`data-${index}`"
-          v-bind="$attrs"
+           v-bind="buttonAttrs"
           :type="type"
           :size="size"
           :iconType="iconType"
@@ -84,6 +85,7 @@ import {
   reactive,
   ref,
   toRefs,
+  useAttrs,
 } from "vue";
 
 interface Item {
@@ -97,8 +99,8 @@ const props = defineProps({
     default: () => [],
   },
   defaultActive: {
-    type: String,
-    default: "",
+    type:String,
+    default: '',
   },
   type: {
     type: String as PropType<"button" | "submit" | "reset">,
@@ -136,8 +138,17 @@ const props = defineProps({
   disabled: Boolean,
 });
 
+defineOptions({
+  inheritAttrs: false, // 🛑 prevents auto-inheritance of $attrs to root
+})
+const attrs = useAttrs()
+const buttonAttrs = computed(() => {
+  const { class: _class, style: _style, id: _id, ...rest } = attrs;
+  return rest;
+});
+
 const emit = defineEmits<{
-  (event: "update:clickedButton", activeTab: Item): void;
+  (event: "update:activeButton", activeButton: Item): void;
 }>();
 
 const { items, defaultActive } = toRefs(props);
@@ -153,7 +164,7 @@ const marker = (el: HTMLElement) => {
 
 const handleOnChange = (val: any) => {
   activeBtnName.value = val?.name;
-  emit("update:clickedButton", val);
+  emit("update:activeButton", val);
   nextTick(() => {
     const activeBtn = document.querySelector(
       `nav button[data-name="${activeBtnName.value}"]`

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">
+  <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"
     >
@@ -7,7 +7,7 @@
         class="relative z-0 inline-flex flex-row items-center w-full gap-2 px-6"
       >
         <div
-          id="nav-indicator"
+          id="tab-indicator"
           :style="{
             '--border': allColor[activeColor],
           }"
@@ -17,18 +17,15 @@
         <button
           v-for="(data, index) in items"
           :key="`data-${index}`"
-          v-bind="$attrs"
-          :size="size"
-          :iconType="iconType"
-          :data-name="data.name"
+          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',
           ]"
           :disabled="disabled"
           :loading="loading"
-          :icon="icon"
           @click="handleOnChange(data || '')"
           style="transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1)"
         >
@@ -97,6 +94,7 @@ import {
   reactive,
   ref,
   toRefs,
+  useAttrs,
 } from "vue";
 
 interface Item {
@@ -138,14 +136,23 @@ const props = defineProps({
 });
 
 const emit = defineEmits<{
-  (event: "update:clickedButton", activeTab: Item): void;
+  (event: "update:activeTabItem", activeTabItem: Item): void;
 }>();
 
+defineOptions({
+  inheritAttrs: false, // 🛑 prevents auto-inheritance of $attrs to root
+});
+const attrs = useAttrs();
+const buttonAttrs = computed(() => {
+  const { class: _class, style: _style, id: _id, ...rest } = attrs;
+  return rest;
+});
+
 const { items, defaultActive } = toRefs(props);
 const activeBtnName = ref(defaultActive.value || items.value[0]?.name || "");
 
 const marker = (el: HTMLElement) => {
-  const indicator = document.querySelector("#nav-indicator") as HTMLElement;
+  const indicator = document.querySelector("#tab-indicator") as HTMLElement;
   if (indicator && el) {
     indicator.style.left = el.offsetLeft + "px";
     indicator.style.width = el.offsetWidth + "px";
@@ -154,10 +161,10 @@ const marker = (el: HTMLElement) => {
 
 const handleOnChange = (val: any) => {
   activeBtnName.value = val?.name;
-  emit("update:clickedButton", val);
+  emit("update:activeTabItem", val);
   nextTick(() => {
     const activeBtn = document.querySelector(
-      `nav button[data-name="${activeBtnName.value}"]`
+      `nav button[data-tab="${activeBtnName.value}"]`
     );
     if (activeBtn) marker(activeBtn as HTMLElement);
   });
@@ -167,7 +174,7 @@ onMounted(() => {
   nextTick(() => {
     requestAnimationFrame(() => {
       const activeBtn = document.querySelector(
-        `nav button[data-name="${activeBtnName.value}"]`
+        `nav button[data-tab="${activeBtnName.value}"]`
       );
       if (activeBtn) marker(activeBtn as HTMLElement);
     });
@@ -232,7 +239,7 @@ const allColor = {
   --clr: theme("colors.white");
 }
 
-#nav-indicator {
+#tab-indicator {
   transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
   background-image: linear-gradient(90deg, #fff, #fff),
     linear-gradient(to top, #e5e7eb, #e5e7eb, var(--border));