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

package/dist/searchexpand/EUISearchToggle.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchToggle.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchToggle.vue?vue&type=style&index=0&scoped=69488444&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/searchexpand/EUISearchToggle.vue?vue&type=style&index=0&scoped=abcc5c95&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUISearchToggle.vue.d.ts.map

package/dist/textArea/EUITextArea.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EUITextArea.vue.d.ts","sourceRoot":"","sources":["../../src/components/textArea/EUITextArea.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4GAA4G,CAAC;AACnI,cAAc,4GAA4G,CAAC;AAC3H,eAAe,SAAS,CAAC"}

package/package.json

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

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="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>
+      <slot name="after" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  toRefs,
+} 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 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/dist/EUITextArea.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITextArea.vue.d.ts","sourceRoot":"","sources":["../src/components/textArea/EUITextArea.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4GAA4G,CAAC;AACnI,cAAc,4GAA4G,CAAC;AAC3H,eAAe,SAAS,CAAC"}

package/dist/button/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,wGAAwG,CAAC;AAC/H,cAAc,wGAAwG,CAAC;AACvH,OAAO,sGAAsG,CAAC;AAC9G,eAAe,SAAS,CAAC"}