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

package/package.json

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

package/src/components/HelloWorld.vue

@@ -6,13 +6,13 @@
       Edvoy User Interface
     </h1>
 
-    <div class="">
+    <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,11 +30,34 @@
         </template>
       </EUITabOutline>
     </div>
+
+    <div>
+      <EUIButtonGroup
+          activeColor="purple"
+          size="sm"
+          :rounded="false"
+          :items="allDays"
+          :defaultActive="activeDays"
+          @update:activeButton="onchangeDays"
+        >
+        <template #before>
+          <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>
+          </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 },
@@ -45,10 +68,15 @@ const allDays = ref([
 ]);
 
 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
+}
 </script>
 <style lang="scss"></style>
 

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/tabs/EUITabOutline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div class="bg-white" 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,10 +17,8 @@
         <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',
             getBtnClass(data.name || ''),
@@ -28,7 +26,6 @@
           ]"
           :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));