edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/stepperTimeline/EUIStepperTimeline.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <EUIStepperHorizontal stepStatus="opportunity" />
+        <hr />
+        <EUIStepperVertical stepStatus="opportunity" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import EUIStepperHorizontal from './EUIStepperHorizontal.vue';
+import EUIStepperVertical from './EUIStepperVertical.vue';
+</script>
+
+<style scoped>
+
+</style>

package/src/components/stepperTimeline/EUIStepperVertical.vue

@@ -0,0 +1,112 @@
+<template>
+  <nav aria-label="Progress" class="relative z-10">
+    <ol role="list" class="flex flex-col items-start justify-center w-full py-4 ps-4 pe-2">
+      <li
+        v-for="(step, stepIdx) in lifeCycleEntries"
+        :key="step.value"
+        :class="[
+          stepIdx !== lifeCycleEntries.length - 1 ? 'pb-8' : '',
+          'relative flex items-center w-full ps-5',
+          getStatus(step.key, stepIdx) === 'upcoming'
+            ? 'pointer-events-none'
+            : '',
+        ]"
+      >
+        <template v-if="getStatus(step.key, stepIdx) === 'complete'">
+          <div
+            v-if="stepIdx !== lifeCycleEntries.length - 1"
+            class="absolute bg-green-500 h-full start-px top-0 w-[0.0875rem] z-0"
+          />
+          <div class="absolute top-0 -start-2 flex items-center size-5 bg-green-500 rounded-full border-[1.5px] border-green-500" >
+            <svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24" class="text-white size-4"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"><title>Check icon</title></path></svg>
+          </div>
+          <div class="flex items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+        <template v-else-if="getStatus(step.key, stepIdx) === 'current'">
+          <div
+            class="absolute bg-orange-500 h-full start-px top-0 w-[0.0875rem] z-0"
+          />
+          <div class="absolute -start-2 top-0 flex items-center justify-center size-5 rounded-full bg-white border-[1.5px] border-orange-500">
+            <div class="size-2.5 bg-orange-400 rounded-full" />
+          </div>
+         <div class="flex items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+        <template v-else-if="getStatus(step.key, stepIdx) === 'upcoming'">
+          <div
+            v-if="stepIdx !== lifeCycleEntries.length - 1"
+            class="absolute bg-gray-300 h-full start-px top-0 w-[0.0875rem] z-0"
+          />
+          <div class="absolute top-0 -start-2 flex items-center justify-center size-5 rounded-full bg-gray-100 border-gray-300 border-[1.5px]">
+            <div class="bg-gray-200 rounded-full size-3" />
+          </div>
+          <div class="flex items-start justify-between max-w-full w-full py-0.5">
+            <span class="text-xs font-semibold text-gray-900">{{ startCase(step.value) }}</span>
+            <span class="text-xs font-medium text-gray-500">{{'26-05-2024 18:47'}}</span>
+          </div>
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>
+<script setup lang="ts">
+import { startCase } from 'lodash';
+import { computed, PropType } from 'vue';
+
+const props = defineProps({
+    stepStatus: {
+        type: String as PropType<"contact" | "MQL" | 'SQL' | 'opportunity' | 'Prospect' | 'Prospect Paid' | 'Prospect Enrolled' | 'Customer'>,
+        default: 'contact'
+    }
+})
+
+  const stepStatusEnum = ["contact" , "MQL" , 'SQL' , 'opportunity' , 'Prospect' , 'Prospect Paid' , 'Prospect Enrolled' , 'Customer']
+
+  const lifeCycleEntries = computed(() => {
+    return Object.entries(stepStatusEnum).map((x) => {
+      return { key: x[0], value: x[1] }
+    })
+  })
+
+  const lifeCycleState = computed(() => {
+    return  currentStatus.value
+  })
+
+  const currentStatus = computed(() => props.stepStatus)
+
+  const status = computed(() =>  lifeCycleState.value)
+
+  const lifeCycle = computed(() => {
+    return lifeCycleEntries.value.findIndex((e) => e.value === status.value)
+  })
+
+  const getStatus = computed(() => {
+    return (status: string, index: number) => {
+      if (
+        index &&
+        lifeCycle.value === lifeCycleEntries.value.length - 1
+      ) {
+        return 'complete'
+      }
+      if (index === lifeCycle.value) {
+        return 'current'
+      }
+      if (index < lifeCycle.value) {
+        return 'complete'
+      }
+      if (index > lifeCycle.value) {
+        return 'upcoming'
+      }
+      return {
+        status,
+      }
+    }
+  })
+</script>
+<style lang="scss">
+</style>

package/src/components/table/EUIDashboardTable.vue

@@ -0,0 +1,482 @@
+<template>
+  <div>
+    <div class="relative w-full mx-auto overflow-hidden">
+      <div
+        id="dashboard-table"
+        class="overflow-auto max-h-[calc(100svh-13rem)] scrollbar--thin overscroll-none"
+        ref="tableContainer"
+        @scroll="handleScroll"
+      >
+        <table class="eui-table">
+          <thead class="sticky top-0 left-0 z-50 bg-gray-100">
+            <tr>
+              <template v-if="checkable">
+                <th class="checkable">
+                  <EUITableCheckbox
+                    :checked="isAllChecked"
+                    :indeterminate="isIndeterminate"
+                    :disabled="isAllUncheckable"
+                    class="flex justify-center mt-0"
+                    @change="checkAll()"
+                  />
+                </th>
+              </template>
+              <th
+                 v-for="(header, headerIndex) in headers"
+                :key="`item-${headerIndex}`"
+                scope="col"
+                :class="[
+                  'px-3 py-2 text-gray-600 snap-start snap-always',
+                   isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                  { 'cursor-pointer hover:text-gray-900': header?.sortable },
+                ]"
+                :style="
+                  header?.width
+                    ? `min-width:${header.width}px;max-width:${header.width}px;`
+                    : ``
+                "
+                @click="sortBy(header, $event)"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-normal text-current"
+                >
+                  <slot name="header" :header="header">
+                    {{ capitalizeText(header?.text ?? header.name ?? '') }}
+                  </slot>
+                  <slot name="headerOptionalItem"></slot>
+                  <SortArrow
+                    v-if="header?.sortable"
+                    :class="[
+                      'transform duration-100 transition-all',
+                      currentSort === header.value
+                        ? 'text-violet-700'
+                        : 'text-gray-900',
+                      sortClass(header),
+                    ]"
+                  />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <template
+              v-for="(row, rowIndex) in computedItems"
+              :key="`table-row-${rowIndex}`"
+            >
+              <tr
+                @mouseenter="$attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null"
+                @mouseleave="$attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null"
+              >
+                <template v-if="checkable">
+                  <td class="checkable">
+                    <EUITableCheckbox
+                      :disabled="!isRowCheckable(row)"
+                      :checked="isRowChecked(row)"
+                      @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
+                    />
+                  </td>
+                </template>
+                 <td
+                  v-for="(header, headerIndex) in headers"
+                  :key="headerIndex"
+                  :class="[isScrolled && headerIndex === 0 ? stickyClass.body : '']"
+                >
+                  <slot
+                    :name="`item.${header.value}`"
+                    :row="row"
+                    :rowIndex="rowIndex"
+                  >
+                    {{ getValueByPath(row, header?.value) }}
+                  </slot>
+                </td>
+              </tr>
+              <template v-if="tableExpanded">
+                <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+              </template>
+            </template>
+          </tbody>
+          <tbody v-if="computedItems.length === 0">
+            <tr>
+              <td :colspan="headers.length">
+                <div
+                  class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+                >
+                  No matching records found
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div
+        class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-2 bg-gray-100"
+      >
+        <slot name="tableCount">
+          <div class="inline-flex items-center gap-x-10">
+            <div class="text-sm font-normal text-gray-900">
+              1-{{ limit }} of {{ total }}
+            </div>
+            <div class="inline-flex items-center gap-2">
+              <span class="text-sm font-normal text-gray-900"
+                >Result per page</span
+              >
+              <EUIPageLimit
+                :page-limit="limit"
+                @update-limit="changeLimit($event)"
+                @refetch="searchData($event)"
+              />
+            </div>
+          </div>
+        </slot>
+        <template v-if="paginated && computedItems.length !== 0">
+          <slot name="tablepagination">
+            <EUIPagination
+              :activePage="newCurrentPage"
+              :pageLimit="limit"
+              :totalCount="total"
+              @change-page="pageChanged($event)"
+            />
+          </slot>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, PropType, ref, toRefs, watch } from "vue";
+import EUIPagination from "./EUIPagination.vue";
+import EUITableCheckbox from "./EUITableCheckbox.vue";
+import SortArrow from "../../assets/svg/SortArrow.vue";
+import EUIPageLimit from "./EUIPageLimit.vue";
+import { capitalizeText } from "../../utils/lodash";
+
+interface Header {
+  value: string;
+  text?: string;
+  name?: string;
+  width?: number;
+  sortable?: boolean;
+}
+
+const props = defineProps({
+  checkable: {
+    type: Boolean,
+    default: false,
+  },
+  stickyColumn: { type: Boolean, default: true },
+  paginated: { type: Boolean, default: false },
+  tableExpanded: { type: Boolean, default: false },
+  backendPagination: { type: Boolean, default: false },
+  checkedRows: { type: Array, default: () => ({}), required: true },
+  headers: { type: Array as PropType<Header[]>, default: () => ({}), required: true },
+  items: { type: Array, required: true, default: () => ({}) },
+  defaultSort: { type: String, default: "" },
+  defaultSortDirection: { type: String, default: "asc" },
+  search: { type: String, default: "" },
+  perPage: { type: Number, default: 5 },
+  currentPage: { type: Number, default: 0 },
+  total: { type: Number, default: 0 },
+  customIsChecked: {
+    type: Function as PropType<(item: any, obj: any) => boolean>,
+    default: () => () => false,
+  },
+  isRowCheckable: { type: Function, default: () => true },
+});
+const {
+  defaultSort,
+  defaultSortDirection,
+  checkedRows,
+  currentPage,
+  items,
+  backendPagination,
+  total,
+  search,
+  headers,
+  paginated,
+  isRowCheckable,
+  customIsChecked,
+} = toRefs(props);
+
+const currentSort = ref(defaultSort.value);
+const currentSortDir = ref(defaultSortDirection.value);
+const newCheckedRows = ref([...checkedRows.value]);
+const newCurrentPage = ref(currentPage.value);
+const lastCheckedRowIndex = ref();
+
+const limit = ref(props.perPage);
+
+// Computed Property
+const filteredItems = computed(() => {
+  let filteredItems = items.value.slice();
+  if (!backendPagination.value && search.value !== "") {
+    if (search.value.trim() === "") return filteredItems;
+    const props = headers.value.map((h) => h.value);
+    filteredItems = items.value.filter((item) =>
+      props.some((prop) =>
+        defaultFilter(
+          getValueByPath(item, prop),
+          search.value.toString().toLowerCase()
+        )
+      )
+    );
+  }
+  return filteredItems;
+});
+
+const computedItems = computed(() => {
+  let items = filteredItems.value;
+  // Sort items before slicing for pagination
+  items.sort((a:any, b:any) => {
+    const modifier = currentSortDir.value === "desc" ? -1 : 1;
+    if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
+    if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
+    return 0;
+  });
+  return items
+
+  // Apply pagination
+  // const start = (newCurrentPage.value - 0) * limit.value;
+  // const end = start + limit.value;
+  // return items.slice(start, end);
+});
+
+const searchData = (data: number) => {
+  console.log(data);
+};
+
+const sortClass = computed(() => (header: any) => {
+  return currentSortDir.value === "asc" && currentSort.value === header.value
+    ? "rotate-0"
+    : currentSortDir.value === "desc" && currentSort.value === header.value
+    ? "rotate-180"
+    : "";
+});
+
+const isIndeterminate = computed(() => {
+  const validVisibleData = computedItems.value.filter((row) =>
+    isRowCheckable.value(row)
+  );
+  return (
+    newCheckedRows.value.length > 0 &&
+    newCheckedRows.value.length < validVisibleData.length
+  );
+});
+
+const isAllChecked = computed(() => {
+  const validVisibleData = computedItems.value.filter((row) =>
+    isRowCheckable.value(row)
+  );
+  if (validVisibleData.length === 0) return false;
+  return validVisibleData.every(
+    (row) => indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0
+  );
+});
+
+const isAllUncheckable = computed(() => {
+  const validVisibleData = computedItems.value?.filter((row) =>
+    isRowCheckable.value!(row)
+  );
+  return validVisibleData.length === 0;
+});
+
+// methods
+const defaultFilter = (value:any, search:any) => {
+  return value.toString().toLowerCase().includes(search);
+};
+
+const indexOf = (
+  array: any[],
+  obj: any,
+  fn: (item: any, obj: any) => boolean
+): number =>  {
+  if (!array) return -1;
+  if (!fn || typeof fn !== "function") return array?.indexOf(obj);
+  for (let i = 0; i < array.length; i++) {
+    if (fn(array[i], obj)) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+const getValueByPath = (obj: any, path: string) => {
+  return path
+    .split(".")
+    .reduce(
+      (o: { [x: string]: any }, i: string | number) => (o ? o[i] : null),
+      obj
+    );
+};
+
+const emit = defineEmits([
+  "update:currentPage",
+  "changePage",
+  "sort",
+  "check",
+  "check-all",
+  "update:checkedRows",
+  "changeLimit",
+  "mouseenter",
+  "mouseleave"
+]);
+
+const changeLimit = (limitData: number) => {
+  limit.value = limitData;
+  newCurrentPage.value = 1;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changeLimit", limitData);
+};
+
+const pageChanged = (page: number) => {
+  newCurrentPage.value = page > 0 ? page : 0;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changePage", page);
+};
+
+const sortBy = (header: any, event: any) => {
+  if (!header || !header.sortable) return;
+  if (header.value === currentSort.value) {
+    currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
+  }
+  currentSort.value = header.value;
+  emit("sort", currentSort.value, currentSortDir.value, event);
+};
+
+const checkAll = () => {
+  const allRowsCheckable = computedItems.value.filter((row) =>
+    isRowCheckable.value(row)
+  );
+  const allChecked = isAllChecked.value;
+  newCheckedRows.value = allChecked ? [] : allRowsCheckable.slice();
+  emit("check", newCheckedRows.value);
+  emit("check-all", newCheckedRows.value);
+  emit("update:checkedRows", newCheckedRows.value);
+};
+
+const removeCheckedRow = (row:any) => {
+  const index = indexOf(newCheckedRows.value, row, customIsChecked.value);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
+  }
+};
+
+const isRowChecked = (row:any) => {
+  return indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0;
+};
+
+const checkRow = (row: any, rowIndex: number, event: Event) => {
+  if (!isRowCheckable.value(row)) return;
+  if(event) {
+    lastCheckedRowIndex.value = rowIndex;
+    if (!isRowChecked(row)) {
+      newCheckedRows.value.push(row);
+    } else {
+      removeCheckedRow(row);
+    }
+    emit("check", newCheckedRows.value, row);
+    emit("update:checkedRows", newCheckedRows.value);
+  }
+};
+
+// watch
+watch(
+  () => currentPage.value,
+  (newVal) => {
+    newCurrentPage.value = newVal;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => checkedRows.value,
+  (rows) => {
+    newCheckedRows.value = [...rows];
+  },
+  {
+    immediate: true,
+  }
+);
+
+// table scroll to add class
+const stickyClass = computed(() => {
+  return props.checkable && props.stickyColumn
+    ? {
+        head: "bg-gray-100 sticky left-[4.5rem] top-0 z-20",
+        body: "bg-white sticky left-[4.5rem] top-0 z-10",
+      }
+    : {
+        head: "bg-gray-100 sticky left-0 top-0 z-20",
+        body: "bg-white sticky left-0 top-0 z-10",
+      };
+});
+
+const isOverflowing = ref(false);
+const isScrolled = ref(false);
+const tableContainer = ref<HTMLElement | null>(null);
+
+const handleScroll = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isScrolled.value = container.scrollLeft > 0;
+  }
+};
+
+const checkOverflow = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isOverflowing.value = container.scrollWidth > container.clientWidth;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("resize", checkOverflow);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", checkOverflow);
+});
+
+// Watch for changes in the container's width to check for overflow
+watch(() => tableContainer.value?.clientWidth, checkOverflow);
+</script>
+
+<style lang="scss" scoped>
+#dashboard-table {
+  & .eui-table {
+    border-spacing: 0 0.5rem;
+    @apply min-w-full text-sm font-light text-left table table-auto w-full -mt-2 box-border border-separate relative;
+    thead tr {
+      @apply snap-x snap-mandatory;
+      th {
+        @apply snap-always snap-start;
+        &:first-of-type.checkable {
+          height: 45px;
+          @apply flex items-center justify-center px-4 max-w-[4.5rem] w-[4.5rem] sticky left-0 top-0 z-20 bg-gray-100;
+        }
+      }
+    }
+    tbody {
+     @apply snap-y snap-mandatory snap-always;
+      tr {
+        @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
+        &: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;
+          &:first-of-type.checkable {
+            @apply w-14 text-center sticky left-0 top-0 z-[11] bg-white;
+          }
+        }
+        &:hover td {
+          @apply font-medium text-gray-900 bg-white border-gray-100;
+          &:first-of-type.checkable {
+            @apply bg-white;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/table/EUIPageLimit.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+      <EUIPopover
+        trigger="click"
+        placement="top"
+        className="max-w-40 min-w-40"
+        customButton="px-3 py-2 text-sm font-medium text-gray-900 bg-white rounded-md group hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 gap-x-1"
+      >
+        <template #referenceButton="{ open }">
+          <span class="whitespace-nowrap">{{ pageLimit }}</span>
+          <component :is="iconStyle ? ChevronDownSolid : ChevronDownStroke"
+            :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+            class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+            aria-hidden="true"
+          />
+        </template>
+        <!-- Popper Content Here... -->
+        <div
+          class="overflow-hidden bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
+        >
+          <ul>
+            <li
+              v-for="item in pageList"
+              :key="item"
+              class="block w-full px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50"
+              :class="[
+                item === pageLimit
+                  ? 'bg-purple-100 text-purple-600'
+                  : 'text-gray-700'
+              ]"
+              role="button"
+              aria-roledescription="button"
+              @click="changePageLimit(item)"
+            >
+              {{ item }} per page
+            </li>
+          </ul>
+        </div>
+      </EUIPopover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref, toRefs } from 'vue';
+import ChevronDownSolid from '../../assets/svg/ChevronDownSolid.vue';
+import ChevronDownStroke from '../../assets/svg/ChevronDownStroke.vue';
+import EUIPopover from '../popover/EUIPopover.vue';
+
+const props = defineProps({
+  pageLimit: {
+    type: Number as PropType<number>,
+    default: 5
+  },
+  iconStyle: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { pageLimit } = toRefs(props)
+const emit = defineEmits(['updateLimit', 'refetch'])
+const pageList =  ref([5, 10, 20, 30, 40, 50, 100])
+const changePageLimit = (data: any) => {
+  emit('updateLimit', data)
+  emit('refetch')
+}
+</script>