edvoyui-component-library-test-flight 0.0.39 → 0.0.41

package/src/components/table/UTable.vue

@@ -0,0 +1,489 @@
+<template>
+  <div class="max-w-screen-xl mx-auto border border-gray-100 border-solid h-[calc(100dvh-20rem)] overflow-hidden">
+    <div :class="tableClasses">
+      <table class="table">
+        <thead>
+          <tr>
+            <th
+              v-if="checkable"
+              style="width: 45px; flex: 45 0 auto; max-width: 45px"
+            >
+              <UCheckbox
+                :checked="isAllChecked"
+                :indeterminate="isIndeterminate"
+                class="flex justify-center mt-0"
+                @change="checkAll"
+              />
+            </th>
+            <th
+              v-for="(header, headerIndex) in headers"
+              :key="headerIndex"
+              :class="[
+                {
+                  'ui-table__sortable': header.sortable,
+                  'ui-table__sortable--active': currentSort === header.value
+                },
+                sortClass(header)
+              ]"
+              :style="headerStyle(header)"
+              @click="sortBy(header)"
+            >
+
+            <slot name="header" :header="header">
+                {{ capitalizeText(header?.text ?? header?.name ?? '') }}
+            </slot>
+              <span v-if="headerOptional">
+                <slot name="headerOptionalItem"></slot>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rowIndex) in computedItems" :key="rowIndex">
+            <td v-if="checkable" style="width: 45px; flex: 45 0 auto; max-width: 45px">
+              <UCheckbox
+                :disabled="!isRowCheckable(row)"
+                :checked="isRowChecked(row)"
+                class="flex justify-center mt-0"
+                @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
+              />
+            </td>
+            <td
+              v-for="(header, headerIndex) in headers"
+              :key="headerIndex"
+              :style="headerStyle(header)"
+            >
+              <span class="ui-table__truncate">
+                <slot :name="`item.${header.value}`" :row="row" :rowIndex="rowIndex">
+                  {{ getValueByPath(row, header.value) }}
+                </slot>
+              </span>
+            </td>
+          </tr>
+          <slot v-if="tableExpanded" name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+        </tbody>
+        <tbody v-if="computedItems.length === 0">
+          <tr>
+            <td :colspan="headers.length" class="ui-table__no-result">
+              No matching records found
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div :class="['ui-table__footer', footerClass]">
+      <slot name="table-bottom-left">
+        <div></div>
+      </slot>
+      <!-- v-if="paginated && computedItems.length !== 0" -->
+      <EUIPagination
+        :per-page="perPage"
+        :total="itemsLength"
+        :data-cy="dataCy"
+        :current="newCurrentPage"
+        :hide-number="hidePageNumber"
+        @change="pageChanged"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch } from 'vue';
+import { getValueByPath, indexOf, defaultFilter } from '../../utils/helpers';
+import UCheckbox from './UCheckbox.vue';
+import { PropType } from 'vue';
+import { capitalizeText } from '../../utils/lodash';
+import EUIPagination from './EUIPagination.vue';
+
+export default {
+  name: 'UITable',
+  components: { UCheckbox, EUIPagination },
+
+  props: {
+    items: { type: Array, default: () => [] },
+    dataCy: { type: String, default: 'ui-pagination' },
+    headers: { type: Array, default: () => [] },
+    paginated: Boolean,
+    tableExpanded: Boolean,
+    backendPagination: Boolean,
+    search: { type: String, default: '' },
+    perPage: { type: [Number, String], default: 5 },
+    total: { type: [Number, String], default: 0 },
+    currentPage: { type: Number, default: 1 },
+    defaultSort: { type: String, default: '' },
+    defaultSortDirection: { type: String, default: 'asc' },
+    headerOptional: { type: Boolean, default: false },
+    checkedRows: { type: Array, default: () => [] },
+    checkable: { type: Boolean, default: false },
+    stickyHeader: { type: Boolean, default: true },
+    stickyColumn: { type: Boolean, default: false },
+    stickyColumnTwo: { type: Boolean, default: false },
+    isRowCheckable: { type: Function, default: () => true },
+    hidePageNumber: { type: Boolean, default: false },
+    footerClass: { type: String, default: '' }
+  },
+
+  setup(props, { emit }) {
+    const newCurrentPage = ref(props.currentPage);
+    const newCheckedRows = ref([...props.checkedRows]);
+    const currentSort = ref(props.defaultSort);
+    const currentSortDir = ref(props.defaultSortDirection);
+
+    const tableClasses = computed(() => ({
+      'ui-table scrollbar--thin': true,
+      'ui-table--sticky-header': props.stickyHeader,
+      'ui-table--sticky-column': props.stickyColumn,
+      'ui-table--sticky-column-two': props.stickyColumnTwo
+    }));
+
+    const itemsLength = computed(() => (props.backendPagination ? props.total : filteredItems.value.length));
+
+    const filteredItems = computed(() => {
+      if (!props.backendPagination && props.search) {
+        const propsKeys = props.headers.map(h => h.value);
+        return props.items.filter(item =>
+          propsKeys.some(key => defaultFilter(getValueByPath(item, key), props.search.toLowerCase()))
+        );
+      }
+      return props.items;
+    });
+
+    const computedItems = computed(() => {
+      let items = [...filteredItems.value];
+      if (currentSort.value && !props.backendPagination) items = sortItems(items);
+      if (props.paginated && !props.backendPagination) items = paginateItems(items);
+      return items;
+    });
+
+    const headerStyle = header => ({
+      width: `${header.width || 300}px`,
+      flex: `${header.width || 300} 0 auto`,
+      maxWidth: `${header.width || 300}px`,
+      backgroundColor: header.color || 'rgb(235 236 240)'
+    });
+
+    const pageChanged = page => {
+      newCurrentPage.value = page;
+      emit('update:currentPage', page);
+      emit('page-change', page);
+    };
+
+    const sortItems = items => {
+      return items.sort((a, b) => {
+        const aValue = getValueByPath(a, currentSort.value);
+        const bValue = getValueByPath(b, currentSort.value);
+        return currentSortDir.value === 'asc' ? aValue - bValue : bValue - aValue;
+      });
+    };
+
+    const paginateItems = items => {
+      const start = (newCurrentPage.value - 1) * props.perPage;
+      const end = start + props.perPage;
+      return items.slice(start, end);
+    };
+
+    const isRowChecked = row => {
+      return newCheckedRows.value.includes(row);
+    };
+
+   const sortClass = () => {
+      return header => {
+        return this.currentSortDir === "asc" &&
+          this.currentSort === header.value
+          ? "ui-table__sortable--asc"
+          : this.currentSortDir === "desc" && this.currentSort === header.value
+          ? "ui-table__sortable--dsc"
+          : ""
+      }
+    }
+
+    const isAllChecked = computed(() => {
+        return (
+            computedItems.value.length > 0 &&
+            computedItems.value.every(row => newCheckedRows.value.includes(row))
+        );
+    });
+
+    const isIndeterminate = computed(() => {
+    const checkedCount = computedItems.value.filter(row =>
+        newCheckedRows.value.includes(row)
+    ).length;
+    return checkedCount > 0 && checkedCount < computedItems.value.length;
+    });
+
+    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 removeCheckedRow = (row) => {
+        const index = indexOf(newCheckedRows.value, row);
+        if (index >= 0) {
+            newCheckedRows.value.splice(index, 1);
+        }
+    };
+
+    const checkRow = (row, index, event) => {
+      const isChecked = newCheckedRows.value.includes(row);
+        if (event.target && isChecked) {
+            // Remove row from checkedRows
+            removeCheckedRow(row);
+        }
+        else {
+            newCheckedRows.value.push(row);
+        };
+      emit('check', newCheckedRows.value);
+      emit("update:checkedRows", newCheckedRows.value);
+      emit("update:selectedRows", newCheckedRows.value);
+    };
+
+    watch(() => props.currentPage, newPage => (newCurrentPage.value = newPage));
+    watch(() => props.checkedRows, rows => (newCheckedRows.value = [...rows]));
+
+    return {
+      tableClasses,
+      computedItems,
+      headerStyle,
+      pageChanged,
+      checkRow,
+      checkAll,
+      itemsLength,
+      sortClass,
+      isRowChecked,
+      isAllChecked,
+      isIndeterminate,
+      getValueByPath,
+      capitalizeText
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ui-table {
+  @apply overflow-auto bg-white bg-no-repeat border border-solid border-gray-50;
+  background-image: linear-gradient(to right, white, white),
+    linear-gradient(to right, white, white),
+    linear-gradient(to right, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
+    linear-gradient(to left, rgba(223, 231, 242, 1), 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(223, 231, 242, 1));
+  background-position: left center, right center, left center, right center,
+    left bottom, left bottom;
+  background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px,
+    100% 20px;
+  background-attachment: local, local, scroll, scroll, local, scroll;
+
+  .table {
+    @apply border-separate w-full;
+    border-spacing: 0;
+    thead {
+      tr {
+        @apply flex flex-grow;
+        th {
+          @apply bg-gray-50 px-3 py-4 text-sm text-gray-600 text-left font-semibold uppercase border-r border-b border-solid border-gray-100 cursor-auto whitespace-nowrap flex items-center;
+          height: 45px;
+          transition: all 0.15s ease-out;
+          &:hover {
+            @apply bg-blue-50;
+          }
+          &:first-child {
+            border-left-width: 0;
+          }
+          &:last-child {
+            border-right-width: 0;
+          }
+          &:last-of-type {
+            max-width: unset !important;
+          }
+          &__sortable {
+            @apply cursor-pointer pr-12;
+            &--active {
+              @apply bg-blue-50;
+            }
+            &::before,
+            &::after {
+              @apply absolute w-0 h-0;
+              content: "";
+              right: 20px;
+              border-left: 4px solid transparent;
+              border-right: 4px solid transparent;
+            }
+            &::before {
+              top: 13px;
+              border-bottom: 6px solid theme('colors.gray.600');
+            }
+            &::after {
+              top: 22px;
+              border-top: 6px solid theme("colors.gray.500");
+            }
+            &--asc {
+              &::before {
+                border-bottom: 6px solid theme("colors.blue.300");
+              }
+            }
+            &--dsc {
+              &::after {
+                border-top: 6px solid theme("colors.blue.300");
+              }
+            }
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        @apply flex flex-grow;
+        &:hover {
+          background-color: rgba(238, 243, 250, 0.8);
+          transition: all 0.15s ease-out;
+        }
+        td {
+          @apply relative text-sm text-gray-900 border-b border-solid border-gray-50 break-words flex items-center;
+          padding: 7px 12px;
+          height: 47px;
+          &:last-of-type {
+            max-width: unset !important;
+          }
+        }
+        &:last-child {
+          td {
+            @apply border-b-0;
+          }
+        }
+      }
+    }
+  }
+  &__truncate {
+    @apply truncate w-full;
+  }
+  &--sticky-column {
+    .table {
+      thead {
+        tr {
+          th {
+            &:first-child {
+              @apply sticky left-0 z-20;
+            }
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            &:first-child {
+              @apply sticky left-0 border-r bg-white;
+              z-index: 2;
+            }
+          }
+        }
+      }
+    }
+    &-with-checkbox {
+      .table {
+        thead {
+          tr {
+            th {
+              &:nth-child(2) {
+                @apply sticky z-20;
+                left: 45px;
+              }
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              &:nth-child(2) {
+                @apply sticky border-r bg-white;
+                left: 45px;
+                z-index: 2;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-two {
+      .table {
+        thead {
+          tr {
+            th {
+              &:nth-child(2) {
+                @apply sticky z-20;
+                left: 300px;
+              }
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              &:nth-child(2) {
+                @apply sticky border-r bg-white;
+                left: 300px;
+                z-index: 2;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &--sticky-header {
+    .table {
+      thead {
+        tr {
+          @apply sticky top-0 z-10;
+        }
+      }
+    }
+  }
+  &__no-result {
+    @apply w-full border-none;
+    position: unset;
+  }
+  &__hovercontent {
+    @apply flex items-center absolute inset-y-0;
+    right: 10px;
+    transition: all 0.15s ease-out;
+    &--show {
+      opacity: 1;
+    }
+    &--hide {
+      opacity: 0;
+    }
+  }
+  &__footer {
+    @apply flex justify-between items-center p-3;
+  }
+}
+
+.search-icon {
+  span {
+    &::after {
+      @apply absolute m-auto;
+      content: "";
+      width: 18px;
+      height: 18px;
+      top: 10px;
+      right: 14px;
+      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%2393a3b8' viewBox='0 0 28.931 28.932' style='enable-background:new 0 0 28.931 28.932;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M28.344,25.518l-6.114-6.115c1.486-2.067,2.303-4.537,2.303-7.137c0-3.275-1.275-6.355-3.594-8.672 C18.625,1.278,15.543,0,12.266,0C8.99,0,5.909,1.275,3.593,3.594C1.277,5.909,0.001,8.99,0.001,12.266 c0,3.276,1.275,6.356,3.592,8.674c2.316,2.316,5.396,3.594,8.673,3.594c2.599,0,5.067-0.813,7.136-2.303l6.114,6.115 c0.392,0.391,0.902,0.586,1.414,0.586c0.513,0,1.024-0.195,1.414-0.586C29.125,27.564,29.125,26.299,28.344,25.518z M6.422,18.111 c-1.562-1.562-2.421-3.639-2.421-5.846S4.86,7.983,6.422,6.421c1.561-1.562,3.636-2.422,5.844-2.422s4.284,0.86,5.845,2.422 c1.562,1.562,2.422,3.638,2.422,5.845s-0.859,4.283-2.422,5.846c-1.562,1.562-3.636,2.42-5.845,2.42S7.981,19.672,6.422,18.111z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
+    }
+  }
+}
+
+</style>

package/src/components/table/UTableview.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <!-- <pre class="text-[0.5rem] p-2 border border-gray-300 rounded-lg max-h-72 overflow-y-auto">{{ selectedRows.map(x => x?._id)}}</pre> -->
+        <UTable :checkable="true"
+          :table-loading="loading"
+          v-model:selectedRows.sync="selectedRows"
+          paginated
+          :checked-rows.sync="checkedRows"
+          backend-pagination
+          :per-page="limit"
+          :headers="studentHeader"
+          :items="studentData"
+          :total="studentData.length"
+          :default-sort-direction="defaultSortOrder"
+          default-sort=""
+          :current-page="offset"
+          @changePage="onPageChange"
+          @sort="onSort"
+          @mouseenter="select"
+          @mouseleave="(selectedIndex = null), (selected = null)">
+            <template #[`item.firstName`]="{ row, rowIndex }">
+              <div class="space-y-0.5">
+                <div class="block text-sm font-medium leading-snug">
+                  {{rowIndex + capitalizeText(row?.firstName) + " " + capitalizeText(row?.lastName) }}
+                </div>
+                <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                  {{ row?.referenceId }}
+                </div>
+              </div>
+            </template>
+            <template #[`item.activeUser`]="{ row, rowIndex }">
+              {{ rowIndex }}
+              {{ row?.activeUser?.user?.firstName }}
+              {{ row?.activeUser?.user?.lastName }}
+            </template>
+      </UTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref} from 'vue';
+import UTable from './UTable.vue';
+import {
+  studentData,
+  studentHeader,
+} from "../../data/table";
+import { capitalizeText } from '../../utils/lodash';
+
+//TODO: Dashboard Table
+const selectedRows = ref([])
+const loading = ref(false)
+const checkedRows = ref([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(1);
+const selectedIndex = ref<{ index: string } | null>(null);
+const selected = ref<{ index: string } | null>(null);
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  studentData.sort((a:any, b:any) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  loading.value = true
+  console.log("@changePage:", offsetData);
+   setTimeout(() => {
+    loading.value = false
+  }, 800);
+};
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/telephone/EUITelephone.vue

@@ -209,7 +209,6 @@ const bindProps = {
 };
 
 const onInputChanged = (_formattedNumber: string, phoneObject: any) => {
-  console.log(phoneObject.number); // Debugging
   hasError.value = phoneObject.valid ? true : false;
   emit("update:modelValue", phoneObject.number);
 };

package/src/utils/helpers.ts

@@ -0,0 +1,30 @@
+export function getValueByPath(obj: any, path: string) {
+  return path
+    .split(".")
+    .reduce(
+      (o: { [x: string]: any }, i: string | number) => (o ? o[i] : null),
+      obj
+    );
+}
+
+export function defaultFilter(value: { toString: () => string }, search: any) {
+  return value.toString().toLowerCase().includes(search);
+}
+
+export function indexOf(
+  array: string | any[],
+  obj: any,
+  fn?: (arg0: any, arg1: any) => any
+) {
+  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;
+}