edvoyui-component-library-test-flight 0.0.169 → 0.0.170

package/src/components/table/EUITableCheckbox.vue

@@ -1,98 +0,0 @@
-<template>
-  <label class="table-checkbox">
-    <input v-model="selected" type="checkbox" :value="value" v-bind="mergedAttrs" @change="onChange" />
-    <span class="check-icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="size-4"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="0.6"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-          clip-rule="evenodd"
-        ></path>
-      </svg>
-    </span>
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, useAttrs, watch } from 'vue';
-
-const props = defineProps({
-  indeterminate: Boolean,
-  checked: {
-    type: Boolean,
-    default: false
-  },
-  value: {
-    default: null
-  }
-})
-
-const emit = defineEmits(['change', 'update:checked'])
-const isIndeterminate = ref(props.indeterminate)
-
-watch(() => props.indeterminate, (val) => {
-  isIndeterminate.value = val
-})
-
-const selected = computed({
-  get() {
-    return props.checked
-  },
-  set(val) {
-    emit('update:checked', val)
-  }
-})
-
-const onChange = (event: Event) => {
-  emit('change', event);
-};
-
-const isActive = computed(() => {
-  const modelIsArray = Array.isArray(props.checked) && props.checked.length !== 0
-  const sameValue = (element: any) => element === props.value
-  if (modelIsArray) {
-    return props.checked.some(sameValue)
-  }
-  return props.checked === true
-})
-
-const attrs = useAttrs()
-const computedTabIndex = computed(() => (attrs.disabled ? -1 : 0))
-
-const mergedAttrs = computed(() => ({
-  ...attrs,
-  tabindex: computedTabIndex.value,
-  role: 'checkbox',
-  // "aria-checked": isIndeterminate.value ? "mixed" : isActive.value.toString(),
-  // "aria-disabled": attrs.disabled || undefined,
-}))
-
-watch(isActive, () => {
-  if (props.indeterminate) {
-    isIndeterminate.value = false
-  }
-})
-</script>
-
-<style lang="scss">
-.table-checkbox {
-  @apply size-10 relative flex items-center justify-center rounded-full cursor-pointer z-10 before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-10 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
-
-  & > input[type='checkbox'] {
-    @apply size-5 relative border border-solid border-gray-400 cursor-pointer appearance-none rounded-md z-0 accent-violet-600 checked:border-violet-600 checked:bg-violet-600 focus-within:outline-none focus-within:border-2 focus-within:border-violet-600;
-  }
-  & .check-icon {
-    @apply absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 text-white transition-opacity opacity-0 pointer-events-none;
-  }
-}
-.table-checkbox input[type='checkbox']:checked ~ .check-icon {
-  @apply opacity-100;
-}
-</style>

package/src/components/table/EUITableCheckbox.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EUITableCheckbox.vue.js","sourceRoot":"","sources":["EUITableCheckbox.vue"],"names":[],"mappings":"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"}

package/src/components/table/GrowthTable.vue

@@ -1,575 +0,0 @@
-<template>
-  <div>
-    <Transition name="fade" mode="out-in">
-      <template v-if="loading">
-        <slot name="loader" :loading="loading" :height="tableHeight">
-          <div
-            :class="[
-              'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
-              tableHeight
-                ? tableHeight
-                : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
-            ]"
-          >
-            <div
-              class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
-            >
-              <EUICircleLoader />
-            </div>
-          </div>
-        </slot>
-      </template>
-
-      <div v-else class="relative w-full mx-auto overflow-hidden">
-        <div
-          id="growth-table"
-          :class="[
-            'scrollbar--thin overscroll-auto',
-            computedItems.length === 0 ? 'overflow-hidden' : 'overflow-auto',
-            tableHeight
-              ? tableHeight
-              : 'h-[calc(100svh-13rem)] max-h-[calc(100svh-13rem)]',
-          ]"
-          ref="tableContainer"
-          @scroll="handleScroll"
-        >
-          <table>
-            <thead class="sticky top-0 left-0 z-50 bg-violet-100">
-              <tr>
-                <th v-if="checkable" class="checkable !table-cell">
-                  <EUITableCheckbox
-                    :checked="isAllChecked"
-                    :indeterminate="isIndeterminate"
-                    :disabled="isAllUncheckable"
-                    @change="checkAll()"
-                  />
-                </th>
-                <th
-                  v-for="(header, headerIndex) in headers"
-                  :key="`item-${headerIndex}`"
-                  scope="col"
-                  :class="[
-                    'px-3 py-1.5 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-xs font-semibold text-current"
-                  >
-                    <slot name="header" :header="header" :index="headerIndex">
-                      <template v-if="!header?.activeYear">{{
-                        capitalizeText(header?.text ?? header.name ?? "")
-                      }}</template>
-                      <div
-                        v-else
-                        class="bg-violet-600 text-white rounded-[0.625rem] px-3 py-2 w-full"
-                      >
-                        <div class="mb-2">
-                          {{
-                            capitalizeText(header?.text ?? header.name ?? "")
-                          }}
-                        </div>
-                        <div
-                          class="flex items-center justify-start max-w-full gap-4"
-                        >
-                          <span
-                            v-for="(data, idx) in header?.activeYear"
-                            :key="`year_${idx}`"
-                            class="min-w-9"
-                            >{{ data }}</span
-                          >
-                        </div>
-                      </div>
-                    </slot>
-                    <slot name="headerOptionalItem"></slot>
-                    <SortArrow
-                      v-if="header?.sortable && !header?.activeYear"
-                      :class="[
-                        'transform duration-100 transition-all',
-                        currentSort === header.value
-                          ? 'text-violet-700'
-                          : 'text-gray-900',
-                        sortClass(header),
-                      ]"
-                    />
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <template
-                v-if="computedItems.length > 0"
-                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="($event:boolean) => 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>
-              <template v-else-if="computedItems.length === 0">
-                <tr class="norecords">
-                  <td
-                    :colspan="
-                      checkable === true ? headers.length + 1 : headers.length
-                    "
-                  >
-                    <slot name="no-records">
-                      <div
-                        class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl"
-                      >
-                        No matching records found
-                      </div>
-                    </slot>
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-            <tfoot
-              v-if="footers.length"
-              class="sticky bottom-0 left-0 z-50 bg-[#FEF3C7]"
-            >
-              <template
-                v-if="footers.length > 0"
-                v-for="(row, rowIndex) in footers"
-                :key="`table-row-${rowIndex}`"
-              >
-                <tr>
-                  <th v-if="checkable" class="empty"></th>
-                  <th
-                    v-for="(header, headerIndex) in headers"
-                    :key="headerIndex"
-                    :class="[
-                      'px-3 py-1.5 text-gray-900 snap-start snap-always h-14',
-                      isScrolled && headerIndex === 0 ? stickyClass.foot : '',
-                    ]"
-                  >
-                    <slot
-                      :name="`footer.${header.value}`"
-                      :row="row"
-                      :rowIndex="rowIndex"
-                    >
-                      {{ getValueByPath(row, header?.value) }}
-                    </slot>
-                  </th>
-                </tr>
-              </template>
-            </tfoot>
-          </table>
-        </div>
-        <div
-          v-if="paginated && computedItems.length !== 0"
-          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>
-    </Transition>
-  </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";
-import EUICircleLoader from "../loader/EUICircleLoader.vue";
-import { indexOf, getValueByPath, defaultFilter } from "../../utils/helpers";
-
-interface Header {
-  value: string;
-  text?: string;
-  name?: string;
-  width?: number;
-  sortable?: boolean;
-  activeYear?: string[];
-}
-
-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: () => ({}) },
-  footers: { type: Array, 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 },
-  tableHeight: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  tableLoading: { type: Boolean, default: false },
-});
-const {
-  defaultSort,
-  defaultSortDirection,
-  checkedRows,
-  currentPage,
-  items,
-  backendPagination,
-  total,
-  search,
-  headers,
-  paginated,
-  isRowCheckable,
-} = toRefs(props);
-
-const currentSort = ref(defaultSort.value);
-const currentSortDir = ref(defaultSortDirection.value);
-const newCheckedRows = ref([...checkedRows.value]);
-const newCurrentPage = ref(currentPage.value);
-const limit = ref(props.perPage);
-const loading = computed(() => props.tableLoading);
-
-// 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;
-});
-
-const searchData = (_data: any) => {
-  // 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(() => {
-  return (
-    computedItems.value.length > 0 &&
-    computedItems.value.every((row) => newCheckedRows.value.includes(row))
-  );
-});
-
-const isAllUncheckable = computed(() => {
-  const validVisibleData = computedItems.value?.filter((row) =>
-    isRowCheckable.value!(row)
-  );
-  return validVisibleData.length === 0;
-});
-
-const emit = defineEmits([
-  "update:currentPage",
-  "changePage",
-  "sort",
-  "check",
-  "check-all",
-  "update:checkedRows",
-  "update:selectedRows",
-  "changeLimit",
-  "mouseenter",
-  "mouseleave",
-]);
-
-const changeLimit = (limitData: number) => {
-  limit.value = limitData;
-  newCurrentPage.value = 0;
-  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 isRowChecked = (row: any) => {
-  return indexOf(newCheckedRows.value, row) >= 0;
-};
-
-const removeCheckedRow = (row: any) => {
-  const index = indexOf(newCheckedRows.value, row);
-  if (index >= 0) {
-    newCheckedRows.value.splice(index, 1);
-  }
-};
-
-const checkAll = () => {
-  if (isAllChecked.value) {
-    // Uncheck all rows
-    newCheckedRows.value = [];
-  } else {
-    // Check all rows
-    const rowsToCheck = computedItems.value.filter(
-      (row) => !newCheckedRows.value.includes(row)
-    );
-    newCheckedRows.value.push(...rowsToCheck);
-  }
-  emit("check", newCheckedRows.value);
-  emit("check-all", newCheckedRows.value);
-  emit("update:checkedRows", newCheckedRows.value);
-  emit("update:selectedRows", newCheckedRows.value);
-};
-
-const checkRow = (row: any, _rowIndex: number, _event: any) => {
-  const isChecked = newCheckedRows.value.includes(row);
-  if (_event && isChecked) {
-    removeCheckedRow(row);
-  } else {
-    newCheckedRows.value.push(row);
-  }
-  emit("check", newCheckedRows.value, row);
-  emit("update:checkedRows", newCheckedRows.value);
-  emit("update:selectedRows", 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-violet-100 sticky left-[4.5rem] top-0 z-20",
-        foot: "bg-[#FEF3C7] sticky left-[4.5rem] top-0 z-20",
-        body: "bg-white sticky left-[4.5rem] top-0 z-10",
-      }
-    : {
-        head: "bg-violet-100 sticky left-0 top-0 z-20",
-        foot: "bg-[#FEF3C7] 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>
-#growth-table {
-  & 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 border-spacing-y-2 relative;
-    thead tr {
-      @apply snap-x snap-mandatory;
-      th {
-        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl;
-        &:first-of-type.checkable {
-          min-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-violet-100;
-        }
-      }
-    }
-    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;
-        &:hover {
-          @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;
-        }
-        td {
-          @apply px-3 py-1.5 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 h-14;
-          &: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;
-          }
-        }
-      }
-    }
-    tfoot tr {
-      @apply snap-x snap-mandatory;
-      th {
-        @apply snap-always snap-start last-of-type:rounded-r-xl first-of-type:rounded-l-xl font-semibold;
-        &:first-of-type.empty {
-          @apply table-cell min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-[#FEF3C7];
-        }
-      }
-    }
-  }
-}
-</style>