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

package/dist/tabs/EUITabOutline.vue.d.ts

@@ -0,0 +1,5 @@
+import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabOutline.vue?vue&type=script&setup=true&lang.ts";
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabOutline.vue?vue&type=script&setup=true&lang.ts";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabOutline.vue?vue&type=style&index=0&lang.scss";
+export default _sfc_main;
+//# sourceMappingURL=EUITabOutline.vue.d.ts.map

package/dist/tabs/EUITabOutline.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUITabOutline.vue.d.ts","sourceRoot":"","sources":["../../src/components/tabs/EUITabOutline.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0GAA0G,CAAC;AACjI,cAAc,0GAA0G,CAAC;AACzH,OAAO,wGAAwG,CAAC;AAChH,eAAe,SAAS,CAAC"}

package/package.json

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

package/src/components/HelloWorld.vue

@@ -5,9 +5,78 @@
     >
       Edvoy User Interface
     </h1>
+
+    <div class="mb-10">
+      <EUITabOutline
+        activeColor="purple"
+        size="sm"
+        :items="allDays"
+        :defaultActive="activeTab"
+        @update:activeTabItem="onchangeActiveTab"
+      >
+        <template v-slot:content="{ data, activeName }">
+          <div class="space-y-4">
+            <span class="text-red-400">{{ data.name }} - {{ activeName }}</span>
+          <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+            quia, obcaecati suscipit, praesentium temporibus, non placeat
+            reprehenderit commodi ut adipisci consequatur laboriosam? Est
+            perspiciatis vero illo repudiandae quis explicabo.</p>
+
+            <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+            quia, obcaecati suscipit, praesentium temporibus, non placeat
+            reprehenderit commodi ut adipisci consequatur laboriosam? Est
+            perspiciatis vero illo repudiandae quis explicabo.</p>
+            </div>
+        </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 },
+  { 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>
 

package/src/components/button/EUIButtonGroup.vue

@@ -1,15 +1,23 @@
 <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']"
+  <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']"
+    v-bind="$attrs"
     >
       <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>
+        <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"
+           v-bind="buttonAttrs"
           :type="type"
           :size="size"
           :iconType="iconType"
@@ -31,7 +39,9 @@
             v-if="iconType === 'icon' || iconType === 'startIcon'"
             :class="[iconWidth]"
           />
-          <slot :data="data" :activeName="activeBtnName"> {{ data?.name }} </slot>
+          <slot :data="data" :activeName="activeBtnName">
+            {{ data?.name }}
+          </slot>
           <component
             :is="icon"
             v-if="iconType === 'endIcon'"
@@ -63,6 +73,7 @@
       </nav>
       <slot name="after" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -74,6 +85,7 @@ import {
   reactive,
   ref,
   toRefs,
+  useAttrs,
 } from "vue";
 
 interface Item {
@@ -87,8 +99,8 @@ const props = defineProps({
     default: () => [],
   },
   defaultActive: {
-    type: String,
-    default: "",
+    type:String,
+    default: '',
   },
   type: {
     type: String as PropType<"button" | "submit" | "reset">,
@@ -126,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);
@@ -141,9 +162,9 @@ const marker = (el: HTMLElement) => {
   }
 };
 
-const handleOnChange = (val:any) => {
+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/index.ts

@@ -24,6 +24,8 @@ export { default as EUISlideover } from "./slideover/EUISlideover.vue";
 export { default as EUIDatepicker } from "./datepicker/EUIDatepicker.vue";
 
 export { default as EUITabs } from "./tabs/EUITabs.vue";
+export { default as EUITabOutline } from "./tabs/EUITabOutline.vue";
+
 export { default as EUIPillSelect } from "./pillSelect/EUIPillSelect.vue";
 export { default as EUITimeLine } from "./timeLine/EUITimeLine.vue";
 export { default as EUITag } from "./tag/EUITag.vue";

package/src/components/tabs/EUITabOutline.vue

@@ -0,0 +1,263 @@
+<template>
+  <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"
+    >
+      <nav
+        class="relative z-0 inline-flex flex-row items-center w-full gap-2 px-6"
+      >
+        <div
+          id="tab-indicator"
+          :style="{
+            '--border': allColor[activeColor],
+          }"
+        >
+          <span></span>
+        </div>
+        <button
+          v-for="(data, index) in items"
+          :key="`data-${index}`"
+          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 || ''),
+            activeBtnName === data.name ? 'font-semibold' : 'font-normal',
+          ]"
+          :disabled="disabled"
+          :loading="loading"
+          @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="data" :activeName="activeBtnName">
+            {{ 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>
+    </div>
+
+    <div
+      class="relative z-0 px-4 py-4 -mt-px text-gray-500 border border-gray-200 border-solid rounded-b-xl"
+    >
+      <template v-for="(data, index) in items" :key="`data-${index}`">
+        <slot
+          v-if="data.name === activeBtnName"
+          name="content"
+          :data="data"
+          :activeName="activeBtnName"
+        >
+          {{ data.name }}
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  toRefs,
+  useAttrs,
+} from "vue";
+
+interface Item {
+  name: string;
+  [key: string]: any;
+}
+
+const props = defineProps({
+  items: {
+    type: Array as () => Item[],
+    default: () => [],
+  },
+  defaultActive: {
+    type: String,
+    default: "",
+  },
+  type: {
+    type: String,
+    default: "button",
+  },
+  size: {
+    type: String as PropType<"sm" | "md" | "lg">,
+    default: "md",
+  },
+  activeColor: {
+    type: String as PropType<"success" | "black" | "purple" | "default">,
+    default: "black",
+  },
+  iconType: {
+    type: String as PropType<"startIcon" | "endIcon" | "icon">,
+    default: "",
+  },
+  icon: {
+    type: [String, Object, Function],
+    default: "",
+  },
+  loading: Boolean,
+  disabled: Boolean,
+});
+
+const emit = defineEmits<{
+  (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("#tab-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:activeTabItem", val);
+  nextTick(() => {
+    const activeBtn = document.querySelector(
+      `nav button[data-tab="${activeBtnName.value}"]`
+    );
+    if (activeBtn) marker(activeBtn as HTMLElement);
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const activeBtn = document.querySelector(
+        `nav button[data-tab="${activeBtnName.value}"]`
+      );
+      if (activeBtn) marker(activeBtn as HTMLElement);
+    });
+  });
+});
+
+const btnColors = {
+  default: {
+    enabled: "text-gray-500 cursor-pointer hover:text-gray-700",
+    disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800",
+  },
+  black: {
+    enabled: "text-black cursor-pointer",
+    disabled: "cursor-not-allowed text-gray-300",
+  },
+  success: {
+    enabled: "text-green-600 cursor-pointer",
+    disabled: "cursor-not-allowed text-green-700/60",
+  },
+  purple: {
+    enabled: "text-purple-600 cursor-pointer",
+    disabled: "cursor-not-allowed text-purple-400",
+  },
+};
+
+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",
+};
+
+const iconWidthClasses = reactive({
+  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 : "default";
+  const state = props.disabled ? "disabled" : "enabled";
+  const colorClass = btnColors[colorKey] ? btnColors[colorKey][state] : "";
+  const sizeClass = props.size === "sm" ? "text-sm" : "text-base";
+  const typeClass = iconClasses[props.size] || "";
+  return `${colorClass} ${sizeClass} ${typeClass}`;
+};
+
+const allColor = {
+  purple: "#7c3aed",
+  success: "#16a34a",
+  black: "#000",
+  default: "#9ca3af",
+};
+</script>
+
+<style lang="scss">
+:root {
+  --clr: theme("colors.white");
+}
+
+#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));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  @apply absolute left-0 w-auto h-full top-0 -z-[1] rounded-t-xl border-solid border-t-2 border bg-white p-2 border-transparent;
+  &::before {
+    content: "";
+    box-shadow: 5px 5px 0 5px var(--clr);
+    @apply absolute -bottom-px -left-3 size-3 bg-transparent border border-gray-200 border-solid border-l-0 border-t-0 rounded-br-2xl;
+  }
+  &::after {
+    content: "";
+    box-shadow: -5px 5px 0 5px var(--clr);
+    @apply absolute -bottom-px -right-3 size-3 bg-transparent border  border-gray-200 border-solid border-r-0 border-t-0 rounded-bl-2xl;
+  }
+  span {
+    @apply bg-white w-full h-1 absolute -bottom-px inset-x-0 z-[1];
+  }
+}
+</style>