edvoyui-component-library-test-flight 0.0.127 → 0.0.129

package/src/components/HelloWorld.vue

@@ -1,39 +1,52 @@
 <template>
- <div class="max-w-screen-xl mx-auto bg-white">
-   <h1
-    class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy"
-  >
-    Edvoy User Interface
-  </h1>
- </div>
- <!-- <div class="ml-[200px]">
- <EUISearchExpand v-model:model-value="searchInput"
-                  :search-sync="showSearch"
-                  @input="seachStudent($event?.target?.value)"
-                  @update:modelValue="seachStudent($event?.target?.value)"
-                /></div> -->
-
+  <div class="max-w-screen-xl mx-auto bg-white">
+    <h1
+      class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy"
+    >
+      Edvoy User Interface
+    </h1>
+  </div>
 </template>
 <script setup lang="ts">
-
-// import { ref } from 'vue';
-
-// import EUISearchExpand from './searchexpand/EUISearchExpand.vue'
-
-// const searchInput =ref('')
-// const showSearch  =ref(false)
-
-// const seachStudent=(e)=>{
-//   console.log('seachStudent',e)
-// }
 </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="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">
+        <EUISearchExpand
+          v-model:model-value="searchInput"
+          :search-sync="showSearch"
+          @input="seachStudent($event?.target?.value)"
+          @update:modelValue="seachStudent($event?.target?.value)"
+        />
+      </div>
+    </div>
+
     <div class="grid gap-4 sm:grid-cols-2 place-items-start">
       <div
         class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
@@ -1060,7 +1073,6 @@
     </div>
     <div>
       <UTableview />
-      <Delete />
       <EUIAccordion
         :datas="accordionData"
         :defaultOpen="[1]"
@@ -1121,9 +1133,33 @@ import EUITable from "./table/EUITable.vue";
 import { capitalizeText } from "../utils/lodash";
 import ChevronDownStroke from "../assets/svg/ChevronDownStroke.vue";
 import EUIMultiDropdown from "./dropdown/EUIMultiDropdown.vue";
-import Delete from "./delete.vue";
+// import Delete from "./delete.vue";
 import UTableview from "./table/UTableview.vue";
 import EUIAlerts from "./alerts/EUIAlerts.vue";
+import EUIButtonGroup from "./button/EUIButtonGroup.vue";
+import EUISearchExpand from "./searchexpand/EUISearchExpand.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[1].name);
+
+const onchangeActiveTab = (val: any) => {
+  activeDays.value = val.name;
+};
+
+const searchInput = ref("");
+const showSearch = ref(false);
+
+const seachStudent = (e) => {
+  console.log("seachStudent", e);
+};
+
 
 const mobileNumber = ref("+91 8667444951");
 const datepicker = ref(new Date());

package/src/components/button/EUIButton.vue

@@ -5,7 +5,7 @@
     :color="color"
     :iconType="iconType"
     v-bind="$attrs"
-    :class="['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 ?'rounded-full':'rounded-lg', btnClass]"
+    :class="['capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition-all duration-200 ease-in-out active:translate-y-0.5', rounded ?'rounded-full':'rounded-lg', btnClass]"
     :disabled="disabled"
     :loading="loading"
     :icon="icon"

package/src/components/button/EUIButtonGroup.vue

@@ -0,0 +1,261 @@
+<template>
+      <div
+      class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white rounded-full shadow-xl w-max shadow-purple-50"
+      :class="[rounded ? 'rounded-full' : 'rounded-lg']"
+    >
+      <slot name="before" />
+      <nav class="relative z-0 inline-flex flex-row items-center gap-2">
+        <div id="nav-indicator" :class="[getBtnClass(activeBtnName), rounded ? 'rounded-full' : 'rounded-lg']"></div>
+        <button
+          v-for="(data, index) in items"
+          :key="`data-${index}`"
+          v-bind="$attrs"
+          :type="type"
+          :size="size"
+          :iconType="iconType"
+          :data-name="data.name"
+          :class="[
+            'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center !bg-transparent',
+            rounded ? 'rounded-full' : 'rounded-lg',
+            getBtnClass(data.name || ''),
+            { 'bar-indicator': data.name !== activeBtnName },
+          ]"
+          :disabled="disabled"
+          :loading="loading"
+          :icon="icon"
+          @click="handleOnChange(data || '')"
+          style="transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1)"
+        >
+          <component
+            :is="icon"
+            v-if="iconType === 'icon' || iconType === 'startIcon'"
+            :class="[iconWidth]"
+          />
+          <slot> {{ data?.name }} </slot>
+          <component
+            :is="icon"
+            v-if="iconType === 'endIcon'"
+            :class="[iconWidth]"
+          />
+          <svg
+            v-if="loading"
+            class="animate-spin"
+            :class="[iconWidth]"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <path
+              fill="currentColor"
+              class="opacity-75"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        </button>
+      </nav>
+      <slot name="after" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  toRefs,
+} from "vue";
+
+interface Item {
+  name?: string;
+  count?: number;
+}
+
+const props = defineProps({
+  items: {
+    type: Array as () => Item[],
+    default: () => [],
+  },
+  defaultActive: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String as PropType<"button" | "submit" | "reset">,
+    default: "button",
+  },
+  size: {
+    type: String as PropType<"xs" | "sm" | "md" | "lg">,
+    default: "md",
+  },
+  activeColor: {
+    type: String as PropType<
+      | "danger"
+      | "success"
+      | "black"
+      | "white"
+      | "purple"
+      | "secondary"
+      | "tertiary"
+    >,
+    default: "white",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon" | "icon">,
+    default: "",
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: "",
+  },
+  rounded: {
+    type: Boolean,
+    default: false,
+  },
+  loading: Boolean,
+  disabled: Boolean,
+});
+
+const emit = defineEmits<{
+  (event: "update:clickedButton", activeTab: Item): void;
+}>();
+
+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;
+  if (indicator && el) {
+    indicator.style.left = el.offsetLeft + "px";
+    indicator.style.width = el.offsetWidth + "px";
+  }
+};
+
+const handleOnChange = (val:any) => {
+  activeBtnName.value = val?.name;
+  emit("update:clickedButton", val);
+  nextTick(() => {
+    const activeBtn = document.querySelector(
+      `nav button[data-name="${activeBtnName.value}"]`
+    );
+    if (activeBtn) marker(activeBtn as HTMLElement);
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const activeBtn = document.querySelector(
+        `nav button[data-name="${activeBtnName.value}"]`
+      );
+      if (activeBtn) marker(activeBtn as HTMLElement);
+    });
+  });
+});
+
+// Computed classes for button size
+const sizeClasses = reactive({
+  xs: "text-xs font-medium leading-[normal]", // 24
+  sm: "text-sm font-medium", // 32
+  md: "text-base font-semibold", // 40
+  lg: "text-base font-semibold", // 48
+});
+
+const btnColors = {
+  black: {
+    enabled:
+      "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
+    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800",
+  },
+  white: {
+    enabled:
+      "bg-white hover:bg-gray-100 text-gray-500 hover:text-gray-900 cursor-pointer active:shadow-white/50 active:bg-transparent",
+    disabled: "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200",
+  },
+  danger: {
+    enabled:
+      "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
+    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500",
+  },
+  success: {
+    enabled:
+      "bg-green-600 hover:bg-green-700 active:bg-green-600 text-white cursor-pointer active:shadow-green-500/50",
+    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-green-600",
+  },
+  purple: {
+    enabled:
+      "bg-purple-700 hover:bg-purple-800 active:bg-purple-700 text-white cursor-pointer active:shadow-purple-500/50",
+    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500",
+  },
+  secondary: {
+    enabled:
+      "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
+    disabled: "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50",
+  },
+  tertiary: {
+    enabled:
+      "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
+    disabled:
+      "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-100",
+  },
+};
+
+const iconClasses = {
+  lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
+  md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
+  sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
+  xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
+};
+
+const iconWidthClasses = reactive({
+  xs: "w-4 h-4 text-current",
+  sm: "w-5 h-5 text-current",
+  md: "w-6 h-6 text-current",
+  lg: "w-6 h-6 text-current",
+});
+
+const iconWidth = computed(() => {
+  return iconWidthClasses[props.size] || "";
+});
+
+const getBtnClass = (btnName: string) => {
+  const isActive = btnName === activeBtnName.value;
+  const colorKey = isActive ? props.activeColor : "white";
+  const state = props.disabled ? "disabled" : "enabled";
+  const colorClass = btnColors[colorKey] ? btnColors[colorKey][state] : "";
+  const sizeClass = sizeClasses[props.size] || "";
+  const typeClass = iconClasses[props.size] || "";
+  return `${colorClass} ${sizeClass} ${typeClass}`;
+};
+</script>
+
+<style lang="scss" scoped>
+#nav-indicator {
+  transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
+  @apply absolute left-0 w-auto h-full top-0 -z-[1];
+}
+
+.bar-indicator {
+  @apply relative;
+  &::before {
+    content: "";
+    transition: 0.4s;
+    will-change: opacity;
+    @apply absolute -bottom-4 left-0 w-full h-[0.1875rem] rounded-t-xl bg-gray-300 z-[-1] origin-bottom opacity-0;
+  }
+}
+
+.bar-indicator:hover::before {
+  @apply opacity-100 -bottom-2;
+}
+</style>

package/src/components/button/buttonAnimateTab.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="inline-flex flex-col items-end w-full space-y-20">
+    <div
+      class="inline-flex items-center gap-2 px-3 py-3 transition-colors duration-100 ease-in bg-white rounded-full shadow-xl w-max shadow-purple-50"
+    >
+      <slot name="before" />
+      <nav class="relative inline-flex flex-row items-center gap-2">
+        <div id="nav-indicator"></div>
+        <EUIBtnGroup
+          v-for="(data, index) in allDays"
+          :key="`data-${index}`"
+          size="sm"
+          :data-name="data.name"
+          :color="activeDays === data.name ? 'tertiary' : 'white'"
+          rounded
+          @click="handleOnChange(data.name)"
+        >
+          {{ data.name }}
+          <small class="opacity-75">({{ data.count }})</small></EUIBtnGroup
+        >
+      </nav>
+      <slot name="after" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from "vue";
+import EUIBtnGroup from "./EUIBtnGroup.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);
+
+onMounted(() => {
+  nextTick(() => {
+    const activeBtn = document.querySelector(
+      `nav button[data-name="${activeDays.value}"]`
+    );
+    if (activeBtn) marker(activeBtn as HTMLElement);
+  });
+});
+
+const marker = (el: HTMLElement) => {
+  const indicator = document.querySelector("#nav-indicator") as HTMLElement;
+  if (indicator && el) {
+    indicator.style.left = el.offsetLeft + "px";
+    indicator.style.width = el.offsetWidth + "px";
+  }
+};
+
+const handleOnChange = (val: string) => {
+  activeDays.value = val;
+  nextTick(() => {
+    const activeBtn = document.querySelector(
+      `nav button[data-name="${activeDays.value}"]`
+    );
+    if (activeBtn) marker(activeBtn as HTMLElement);
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+#nav-indicator {
+  transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
+  @apply absolute w-auto h-1 bg-gray-500 rounded-t-lg -bottom-3;
+}
+</style>

package/src/components/index.ts

@@ -1,5 +1,7 @@
 import "../style.scss";
 export { default as EUIButton } from "./button/EUIButton.vue";
+export { default as EUIButtonGroup } from "./button/EUIButtonGroup.vue";
+
 export { default as EUIInput } from "./input/EUIInput.vue";
 export { default as EUITelephone } from "./telephone/EUITelephone.vue";
 export { default as EUITextArea } from "./textArea/EUITextArea.vue";

package/src/components/searchexpand/EUISearchToggle.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="relative rounded-full size-12">
-    <span class="text-[0.625rem] absolute -top-4 left-0 space-x-4">
-      <span>{{ "searchSync:" +  searchSync}}</span>
-      <span>{{ "isExpanded:" + isExpanded }}</span>
-    </span>
     <div class="absolute top-0 right-0">
       <div
         ref="componentWrapper"

package/src/components/select/EUISelect.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- npm version patch  -->
-  <div :class="isUseCustomSelect ? 'isUseCustomSelect' : ''">
+  <div :class="{'isUseCustomSelect':isUseCustomSelect}">
     <label
       v-if="!inputFilled && label"
       :class="[
@@ -35,6 +35,7 @@
         inputFilled ? 'rounded-2xl min-h-14' : 'rounded-md min-h-10',
         'group relative w-full bg-white cursor-pointer overflow-hidden',
         { 'opacity-75': disabled },
+        className
       ]"
       :clearable="clearable"
       :no-drop="nodropDown"
@@ -207,6 +208,11 @@ const props = defineProps({
     default: "",
     required: false,
   },
+  customHeight: {
+    type: String,
+    default: "",
+    required: false,
+  },
   customOffset: {
     type: Array as PropType<any>,
     required: false,
@@ -382,17 +388,21 @@ const search = (x: string) => {
 };
 
 const selectWidth = computed(() => props.customWidth);
+const selectMaxHeight = computed(() => props.customHeight);
 const offsetValue = computed(() => props.customOffset);
 
 const withPopper = (
   dropdownList: HTMLElement,
   component: { $refs: { toggle: Element | VirtualElement } },
-  { width }: any
+  { width, maxHeight }: any
 ) => {
   const newwidth = selectWidth.value || width; //setcustom width '400px'
+  const newHeight = selectMaxHeight.value || width; //setcustom maxHeight '600px'
+
   const newOffset = offsetValue.value || [0, 7]; //setcustom Offset '[123, -1]'
   const customWidth = isUseCustomSelect.value ? newwidth : width;
   dropdownList.style.width = customWidth;
+  dropdownList.style.maxHeight = isUseCustomSelect.value ? newHeight : maxHeight
   const offsetValues = isUseCustomSelect.value ? newOffset : [0, 7];
   const popper = createPopper(component.$refs.toggle, dropdownList, {
     placement: "bottom",
@@ -405,6 +415,7 @@ const withPopper = (
       },
     ],
   });
+  dropdownList.classList.add('toggle-dropdown');
   return () => popper.destroy();
 };
 
@@ -552,6 +563,9 @@ const open = () => {
 };
 </script>
 <style lang="scss">
+:root {
+  --vs-dropdown-color: theme('colors.gray.600')
+}
 .scrollbar {
   &--hide {
     @apply overflow-y-auto;
@@ -581,6 +595,11 @@ const open = () => {
     }
   }
 }
+.vs__dropdown-menu.toggle-dropdown {
+  border-top-style: solid;
+  margin-top: -5px !important;
+  border-radius: 6px !important;
+}
 
 .vs--single.vs--open .vs__selected,
 .vs--single.vs--loading .vs__selected {
@@ -599,7 +618,7 @@ const open = () => {
       @apply bg-purple-100 text-purple-700;
     }
     &--highlight {
-      @apply bg-gray-100 text-black font-semibold;
+      @apply bg-gray-100 text-gray-900 font-medium;
     }
   }
   &-menu {
@@ -698,7 +717,7 @@ const open = () => {
           @apply bg-purple-100 text-purple-700;
         }
         &--highlight {
-          @apply bg-gray-100 text-black font-semibold;
+          @apply bg-gray-100 text-black font-medium;
         }
       }
       &-menu {

package/src/components/table/EUIDashboardTable.vue

@@ -471,12 +471,12 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     tbody {
       @apply snap-y snap-mandatory snap-always;
       tr:not(.norecords) {
-        @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
+        @apply text-gray-500 transition-all duration-300 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory will-change-transform;
         &:hover {
           @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;
         }
         td {
-          @apply px-4 py-4 text-sm font-normal last-of-type:rounded-r-xl first-of-type:rounded-l-xl transition-transform duration-100 ease-in-out border-solid border border-l-0 border-r-0 border-white first:border-s last:border-e;
+          @apply px-4 py-4 text-sm font-normal last-of-type:rounded-r-xl first-of-type:rounded-l-xl transition-colors duration-100 ease-in-out border-solid border border-l-0 border-r-0 border-white first:border-s last:border-e will-change-contents;
           &:first-of-type.checkable {
             @apply w-14 text-center sticky left-0 top-0 z-[11] bg-white;
           }

package/src/components/tabs/EUITabs.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-  
-    <div class=" overflow-hidden overflow-x-scroll">
-      <div
+    <div
       v-if="tabStyle === 'design'"
       class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2"
     >
@@ -16,7 +14,6 @@
       :class="[
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab ? ' rounded-t-lg !bg-[#EDE9FE] ' : '',
-          'flex-shrink-0'
         ]"
         role="tab"
         tabindex="-1"
@@ -83,7 +80,6 @@
             : 'border-transparent text-gray-500',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -119,7 +115,6 @@
             : 'border-transparent text-gray-500 z-0',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -133,6 +128,7 @@
         </slot>
       </button>
     </div>
+
     <div v-else class="flex items-center gap-1 p-2 transition-all duration-100">
       <button
         v-for="(tab, tabindex) in tabs"
@@ -149,7 +145,6 @@
             : 'border-white hover:bg-gray-50 text-gray-700',
           tab?.disabled ? ' cursor-not-allowed ' : '',
           isHighlighedActivetab&&activeTabIndex === tabindex ? ' rounded-t-lg !bg-[#EDE9FE]' : '',
-          'flex-shrink-0'
         ]"
         @click="selectTab(tabindex)"
       >
@@ -163,9 +158,6 @@
         </slot>
       </button>
     </div>
-    </div>
-
-  
     <slot name="content" :active-tab="tabs[activeTabIndex]">
       <div
         :class="[
@@ -205,14 +197,12 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "update:activeTab", activeTab: Tab): void;
-  (event: "update:defaultActiveIndex", defaultActiveIndex: number): void;
 }>();
 
 const activeTabIndex = ref(props.defaultActiveIndex ?? 0);
 
 const selectTab = (index: number) => {
   activeTabIndex.value = index;
-  emit("update:defaultActiveIndex", activeTabIndex.value );
   emit("update:activeTab", props.tabs[activeTabIndex.value]);
 };
 
@@ -220,8 +210,6 @@ watch(
   () => props.defaultActiveIndex,
   (newIndex) => {
     activeTabIndex.value = newIndex ?? 0;
-  },{
-    immediate:true
   }
 );
 </script>

package/dist/EUIButton.vue.d.ts

@@ -1,5 +0,0 @@
-import _sfc_main from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-export * from "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=script&setup=true&lang.ts";
-import "/Users/rajmohan/Documents/Workspace/edvoy-ui-v2/src/components/button/EUIButton.vue?vue&type=style&index=0&lang.scss";
-export default _sfc_main;
-//# sourceMappingURL=EUIButton.vue.d.ts.map

package/dist/EUIButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUIButton.vue.d.ts","sourceRoot":"","sources":["../src/components/button/EUIButton.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,wHAAwH,CAAC;AAC/I,cAAc,wHAAwH,CAAC;AACvI,OAAO,sHAAsH,CAAC;AAC9H,eAAe,SAAS,CAAC"}