edvoyui-component-library-test-flight 0.0.184 → 0.0.185

package/src/components/table/ColumnResizeTable.vue

@@ -1,740 +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 max-w-full mx-auto">
-        <article
-          :class="[
-            'table-widget scrollbar--auto rounded-lg',
-            computedItems.length === 0
-              ? 'overflow-hidden pointer-events-none'
-              : 'overflow-scroll',
-            tableHeight
-              ? tableHeight
-              : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
-          ]"
-          ref="tableContainer"
-          @scroll="handleScroll"
-        >
-          <table ref="tableElementRef">
-            <thead>
-              <tr>
-                <th
-                  v-if="checkable"
-                  class="checkable"
-                  style="
-                    width: 45px;
-                    max-width: 45px;
-                    background-color: rgb(243 244 246);
-                  "
-                  scope="col"
-                >
-                  <UCheckbox
-                    :checked="isAllChecked"
-                    :indeterminate="isIndeterminate"
-                    :disabled="isAllUncheckable"
-                    @change="checkAll"
-                  />
-                </th>
-                <th
-                  v-for="(header, headerIndex) in headers"
-                  :key="headerIndex"
-                  scope="col"
-                  :class="[
-                    'snap-start snap-always py-2',
-                    header?.sortable
-                      ? 'cursor-pointer hover:!text-gray-900 pr-8 pl-3'
-                      : 'px-3 cursor-auto',
-                    isScrolled && headerIndex === 0
-                      ? stickyClass.head
-                      : 'sticky top-0 z-10',
-                    { '!bg-gray-200': currentSort === header.value },
-                    header?.resizable ? 'resizable' : '',
-                  ]"
-                  :style="
-                    headers.length > 6
-                      ? headerStyle(header)
-                      : 'width: 100%;min-width: 250px;background-color: rgb(243 244 246);'
-                  "
-                  @click="sortBy(header, $event)"
-                >
-                  <div class="relative z-0 w-full">
-                    <div
-                      class="w-full text-sm font-bold text-current truncate font-inter"
-                    >
-                      <slot name="header" :header="header" :index="headerIndex">
-                        {{ capitalizeText(header?.text ?? header?.name ?? "") }}
-                      </slot>
-                      <slot
-                        v-if="headerOptional"
-                        name="headerOptionalItem"
-                      ></slot>
-                    </div>
-                    <div
-                      v-if="header?.sortable"
-                      class="absolute -top-0.5 -right-6 size-6 z-10"
-                    >
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="size-6"
-                      >
-                        <rect width="24" height="24" fill="none" />
-                        <path
-                          d="M8 10C9.06206 8.5381 10.3071 7.2287 11.7021 6.1058C11.8774 5.9647 12.1226 5.9647 12.2979 6.1058C13.6929 7.2287 14.9379 8.5381 16 10"
-                          :stroke="
-                            currentSortDir === 'asc' &&
-                            currentSort === header?.value
-                              ? '#111827'
-                              : '#9ca3af'
-                          "
-                          stroke-opacity="0.8"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                        <path
-                          d="M8 14C9.06206 15.4619 10.3071 16.7713 11.7021 17.8942C11.8774 18.0353 12.1226 18.0353 12.2979 17.8942C13.6929 16.7713 14.9379 15.4619 16 14"
-                          :stroke="
-                            currentSortDir === 'desc' &&
-                            currentSort === header?.value
-                              ? '#111827'
-                              : '#9ca3af'
-                          "
-                          stroke-opacity="0.8"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <template
-                v-if="computedItems.length > 0"
-                v-for="(row, rowIndex) in computedItems"
-                :key="`table-row-${rowIndex}`"
-              >
-                <tr
-                  :id="`row-${rowIndex}`"
-                  @mouseenter="
-                    $attrs.mouseenter
-                      ? $emit('mouseenter', row, rowIndex)
-                      : null
-                  "
-                  @mouseleave="
-                    $attrs.mouseleave
-                      ? $emit('mouseleave', row, rowIndex)
-                      : null
-                  "
-                  class="group"
-                  :class="{ 'bg-purple-100': activeRowIndex == rowIndex }"
-                >
-                  <td
-                    v-if="checkable"
-                    class="checkable"
-                    style="width: 45px; max-width: 45px"
-                  >
-                    <UCheckbox
-                      :disabled="!isRowCheckable(row)"
-                      :checked="isRowChecked(row)"
-                      @change.prevent.stop="
-                        ($event) => checkRow(row, rowIndex, $event)
-                      "
-                    />
-                  </td>
-                  <td
-                    v-for="(header, headerIndex) in headers"
-                    :key="headerIndex"
-                    :style="bodyStyle(header)"
-                    :class="[
-                      isScrolled && headerIndex === 0 ? stickyClass.body : null,
-                      { '!bg-purple-100': activeRowIndex == rowIndex },
-                    ]"
-                  >
-                    <slot
-                      :name="`item.${header?.value}`"
-                      :row="row"
-                      :rowIndex="rowIndex"
-                      :headerIndex="headerIndex"
-                    >
-                      <span class="block truncate">{{
-                        getValueByPath(row, header?.value)
-                      }}</span>
-                    </slot>
-                  </td>
-                </tr>
-                <template v-if="tableExpanded">
-                  <slot
-                    name="expanded"
-                    :row="row"
-                    :rowIndex="rowIndex"
-                    :headerLength="headers.length"
-                  ></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 w-[calc(100vw-14rem)]"
-                        :class="[
-                          tableHeight
-                            ? tableHeight
-                            : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
-                        ]"
-                      >
-                        <div class="text-center">
-                          <div
-                            class="mx-auto overflow-hidden rounded-md size-56"
-                          >
-                            <img
-                              src="@/assets/images/search-nodata.png"
-                              alt=""
-                              class="block object-contain object-center h-auto max-w-full opacity-90"
-                            />
-                          </div>
-                          <div class="my-2 text-xl font-medium text-gray-500">
-                            No matching records found
-                          </div>
-                        </div>
-                      </div>
-                    </slot>
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </article>
-        <div
-          v-if="stickyFooter"
-          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
-        >
-          <slot name="tableCount">
-            <div class="inline-flex items-center gap-x-2">
-              <div class="text-sm font-medium text-gray-900">
-                Total {{ total }}
-              </div>
-              <span class="text-gray-300">&vert;</span>
-              <div class="inline-flex items-center">
-                <span class="text-sm font-medium text-gray-900">Per page</span>
-                <EUIPageLimit
-                  :page-limit="limit"
-                  @update-limit="changeLimit($event)"
-                  @refetch="searchData($event)"
-                  :iconStyle="true"
-                />
-              </div>
-            </div>
-          </slot>
-          <template v-if="paginated && computedItems.length !== 0">
-            <slot name="tablepagination">
-              <EUIStudentPagination
-                :activePage="newCurrentPage"
-                :pageLimit="limit"
-                :totalCount="total"
-                @change-page="pageChanged($event)"
-              />
-            </slot>
-          </template>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  nextTick,
-  computed,
-  watch,
-  toRefs,
-  PropType,
-  onMounted,
-  onUnmounted,
-} from "vue";
-import { getValueByPath, indexOf, defaultFilter } from "../../utils/helpers";
-import UCheckbox from "./UCheckbox.vue";
-import { capitalizeText } from "../../utils/lodash";
-import EUIStudentPagination from "./EUIStudentPagination.vue";
-import EUICircleLoader from "../loader/EUICircleLoader.vue";
-import EUIPageLimit from "./EUIPageLimit.vue";
-
-interface Header {
-  value: string;
-  text?: string;
-  name?: string;
-  sortable?: boolean;
-  width?: number;
-  color?: string;
-  resizable?: boolean;
-}
-
-interface Item {
-  [key: string]: any;
-}
-
-const props = defineProps({
-  items: { type: Array as PropType<Item[]>, default: () => [], required: true },
-  headers: {
-    type: Array as PropType<Header[]>,
-    default: () => [],
-    required: true,
-  },
-  stickyFooter: { type: Boolean, default: true },
-  paginated: { type: Boolean, default: false },
-  tableExpanded: { type: Boolean, default: false },
-  search: { type: String, default: "" },
-  perPage: { type: Number, default: 5 },
-  total: { type: Number, default: 0 },
-  currentPage: { type: Number, default: 1 },
-  defaultSort: { type: String, default: "" },
-  defaultSortDirection: { type: String, default: "asc" },
-  headerOptional: { type: Boolean, default: false },
-  checkedRows: { type: Array as PropType<Item[]>, default: () => [] },
-  checkable: { type: Boolean, default: false },
-  isRowCheckable: {
-    type: Function as PropType<(row: Item) => boolean>,
-    default: () => true,
-  },
-  stickyColumn: { type: Boolean, default: true },
-  tableHeight: {
-    type: String,
-    required: false,
-    default: "",
-  },
-  tableLoading: { type: Boolean, default: false },
-  backendPagination: Boolean,
-  activeRowIndex: { type: Number, default: null },
-});
-
-const {
-  defaultSort,
-  defaultSortDirection,
-  checkedRows,
-  currentPage,
-  items,
-  backendPagination,
-  total,
-  search,
-  headers,
-  paginated,
-  isRowCheckable,
-  activeRowIndex,
-} = toRefs(props);
-
-// Emits used
-const emit = defineEmits([
-  "update:currentPage",
-  "changePage",
-  "sort",
-  "check",
-  "check-all",
-  "update:checkedRows",
-  "update:selectedRows",
-  "changeLimit",
-  "mouseenter",
-  "mouseleave",
-]);
-
-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: any) => h.value);
-    filteredItems = items.value.filter((row) =>
-      props.some((prop) =>
-        defaultFilter(
-          getValueByPath(row, 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 headerStyle = (header: Header) => ({
-  width: `${header.width || 300}px`,
-  maxWidth: `${header.width ? 500 : 300}px`,
-  backgroundColor: header.color || "rgb(243 244 246)",
-  // flex: `${header.width || 300} 0 auto`,
-});
-
-const bodyStyle = (header: Header) => ({
-  width: `${header.width || 300}px`,
-  maxWidth: `${header.width ? 500 : 300}px`,
-  // flex: `${header.width || 300} 0 auto`,
-});
-
-const searchData = (_data: any) => {
-  // console.log(_data);
-};
-
-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 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 isIndeterminate = computed(() => {
-  const validVisibleData = computedItems.value.filter((row) =>
-    isRowCheckable.value(row)
-  );
-  return (
-    newCheckedRows.value.length > 0 &&
-    newCheckedRows.value.length < validVisibleData.length
-  );
-});
-
-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 }
-);
-
-const stickyClass = computed(() => {
-  return props.checkable && props.stickyColumn
-    ? {
-        head: "bg-gray-100 sticky left-[45px] top-0 z-20",
-        body: "bg-white !sticky left-[45px] top-0 z-10 !overflow-visible after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-10",
-      }
-    : {
-        head: "bg-gray-100 sticky left-0 top-0 z-20",
-        body: "bg-white !sticky left-0 top-0 z-10 !overflow-visible after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0",
-      };
-});
-
-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;
-  }
-};
-
-// table Column Resize
-const tableElementRef = ref<HTMLTableElement | null>(null);
-
-const tableColumnResize = () => {
-  let isResizing = false;
-  const table = tableElementRef.value;
-  if (!table) return;
-
-  const resizableColumns = table.querySelectorAll("th.resizable");
-  if (!resizableColumns) return;
-
-  resizableColumns.forEach((th) => {
-    const resizer = document.createElement("div");
-    resizer.classList.add("col-resize");
-    // (th as HTMLElement).style.position = "relative";
-    th.appendChild(resizer);
-
-    let startX: number, startWidth: number;
-
-    const mouseDownHandler = function (e: any) {
-      startX = e.pageX;
-      startWidth = parseInt(
-        document.defaultView?.getComputedStyle(th)?.width || "0px",
-        10
-      );
-      isResizing = true;
-
-      document.documentElement.addEventListener("mousemove", onMouseMove);
-      document.documentElement.addEventListener("mouseup", onMouseUp);
-      table.classList.add("column-resizer");
-      e.preventDefault();
-    };
-
-    const onMouseMove = function (e: any) {
-      if (isResizing) {
-        const newWidth = startWidth + (e.pageX - startX);
-        if (newWidth > 100) {
-          // Minimum width constraint
-          (th as HTMLElement).style.width = newWidth + "px";
-        }
-      }
-    };
-
-    const onMouseUp = function () {
-      isResizing = false;
-      document.documentElement.removeEventListener("mousemove", onMouseMove);
-      document.documentElement.removeEventListener("mouseup", onMouseUp);
-      table.classList.remove("column-resizer");
-      setTimeout(() => (isResizing = false), 100);
-    };
-
-    resizer.addEventListener("mousedown", mouseDownHandler);
-  });
-
-  // Add click handlers for sorting
-  const headers = table.querySelectorAll("th");
-  if (!headers) return;
-};
-
-onMounted(async () => {
-  await nextTick();
-  if (tableElementRef.value) {
-    tableColumnResize();
-  }
-  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">
-.table-widget {
-  @apply bg-white bg-no-repeat max-w-full;
-  background-image: linear-gradient(to right, white, white),
-    linear-gradient(to right, white, white),
-    linear-gradient(to right, rgba(229, 231, 235, 0.5), rgba(255, 255, 255, 0)),
-    linear-gradient(to left, rgba(229, 231, 235, 0.5), rgba(255, 255, 255, 0)),
-    linear-gradient(to top, white, rgba(255, 255, 255, 0)),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(229, 231, 235, 0.5));
-  background-position: left center, right center, left center, right center,
-    left bottom, left bottom;
-  background-size: 45px 100%, 32px 100%, 20px 100%, 20px 100%, 100% 100px,
-    100% 20px;
-  background-attachment: local, local, scroll, scroll, local, scroll;
-
-  & > table {
-    @apply table table-fixed border-separate border-spacing-0 box-border w-full;
-
-    & > thead th {
-      transition: background-color 0.2s ease, color 0.2s ease;
-      @apply bg-gray-50 text-sm text-gray-700 text-left first-letter:uppercase border border-b-0 border-l-0 border-solid border-gray-200/50 whitespace-nowrap align-middle last-of-type:rounded-tr-lg first-of-type:rounded-tl-lg first:border-l last:border-r font-bold snap-start snap-always h-10 min-w-16;
-      transition: all 0.15s ease-out;
-      &:first-of-type.checkable {
-        @apply min-h-10 px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-gray-100;
-      }
-    }
-
-    tbody {
-      & > tr:not(.norecords, .row-expanded) {
-        @apply transition-all duration-100 ease-in-out last:mb-px;
-        &:hover {
-          transition: all 0.15s ease-out;
-          @apply bg-purple-50;
-          td {
-            @apply first:rounded-l-sm last:rounded-r-sm transition-colors duration-100 ease-in text-gray-900 bg-purple-50;
-            &:first-of-type.checkable {
-              @apply bg-purple-50;
-            }
-          }
-        }
-        td {
-          @apply border-0 first:border-l border-r relative text-sm font-medium text-gray-600 border-b border-solid break-words border-gray-100 py-1.5 px-3 h-14 align-middle bg-white;
-          &:first-of-type.checkable {
-            @apply flex justify-center w-[45px] text-center sticky left-0 top-0 z-[11] bg-white overflow-visible;
-          }
-        }
-      }
-
-      & > tr.row-expanded {
-        @apply bg-gray-50;
-      }
-
-      & > tr {
-        transition-property: filter, background, opacity;
-        transition-duration: 0.2s;
-        transition-timing-function: ease-out;
-      }
-    }
-
-    /*
-        //TODO: table checkbox check highlight
-        &:focus-within tbody tr:not(:focus-within) {
-            filter: blur(4px) saturate(0.2);
-            pointer-events: none;
-            opacity: 0.6;
-        }
-        tr:focus-within td:hover:not(:focus-visible) {
-            background: color-mix(in oklch, blue, #0000 95%);
-        }
-    */
-
-    /*
-        // TODO: hover tr
-        & tbody:hover tr:not(:hover) {
-            filter: blur(4px) saturate(0.2);
-            pointer-events: none;
-            opacity: 0.6;
-        }
-    */
-
-    // TODO: Hover Row highlight
-    & tbody:hover tr:not(:hover) td:not(:nth-child(-n + 2)) {
-      filter: blur(4px) saturate(0.2);
-      pointer-events: none;
-      opacity: 0.6;
-    }
-  }
-}
-
-/* Column resizer */
-.col-resize {
-  @apply absolute top-1/4 right-0 w-1 h-1/2 bg-gray-600 cursor-col-resize z-10 rounded-lg;
-}
-
-.table-widget.column-resizer {
-  cursor: col-resize;
-  user-select: none;
-}
-
-.table-widget.column-resizer th,
-.table-widget.column-resizer th:hover {
-  cursor: col-resize;
-}
-</style>