@usssa/component-library 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist/component-library/components/core/UTableStd.vue

@@ -0,0 +1,797 @@
+<script setup>
+import { computed, ref } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
+import UCheckboxStd from './UCheckboxStd.vue'
+import UChip from './UChip.vue'
+import UMenuDropdown from './UMenuDropdown.vue'
+import UPagination from './UPagination.vue'
+import UTable from './UTable/UTable.vue'
+import UTd from './UTable/UTd.vue'
+import UTh from './UTable/UTh.vue'
+import UTr from './UTable/UTr.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  tableRowHover: {
+    type: Boolean,
+    default: false,
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  multiSelection: {
+    type: Boolean,
+    default: false,
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+  verticalMoreActions: {
+    type: Boolean,
+    default: false,
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false,
+  },
+  isCustomSort: {
+    type: Boolean,
+    default: false,
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['onCustomSort'])
+
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+
+const customLoading = ref(false)
+const rowsPerPageOptions = ref([
+  { label: '5 / per page', value: 5 },
+  { label: '10 / per page', value: 10 },
+  { label: '15 / per page', value: 15 },
+  { label: '20 / per page', value: 20 },
+  { label: '25 / per page', value: 25 },
+])
+const tableDataChip = ref(true) // this is required to show chip
+const openMenu = ref([])
+const hoveringButton = ref({})
+const hoveringMenu = ref({})
+
+// if virtual scroll is enbaled then adding large rows per page to view in virtual scroll
+const getRowsPerPageOptions = computed(() => {
+  if (props.virtualScroll) {
+    return [
+      ...rowsPerPageOptions.value,
+      { label: '100 / per page', value: 100 },
+      { label: '500 / per page', value: 500 },
+      { label: '1000 / per page', value: 1000 },
+    ]
+  } else {
+    return rowsPerPageOptions.value
+  }
+})
+
+//adding a new row to selectedRows
+const handleToSelectRow = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    if (index === -1) {
+      selectedRows.value.push(row)
+    } else {
+      selectedRows.value.splice(index, 1)
+    }
+  }
+}
+
+//getting the sorted icon according the order
+const getSortingIcon = (col) => {
+  if (col) {
+    if (col.sortOrder === 'asc') {
+      return 'fa-kit fa-ascending'
+    } else {
+      return 'fa-kit fa-descending'
+    }
+  }
+}
+
+// it is giving the selected row and setting the new selection
+const isRowSelected = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    return computed({
+      get: () => {
+        return index === -1 ? false : true
+      },
+      set: () => {
+        if (index === -1) {
+          selectedRows.value.push(row)
+        } else {
+          selectedRows.value.splice(index, 1)
+        }
+      },
+    })
+  } else {
+    return computed({
+      get: () => {
+        let dataLength = props.rows.length
+        return selectedRows.value.length === dataLength
+          ? true
+          : selectedRows.value.length === 0
+          ? false
+          : null
+      },
+      set: (value) => {
+        if (value !== null) {
+          selectedRows.value.splice(0, selectedRows.value.length)
+        } else {
+          handleSelectAllData().then((res) => {
+            if (res === 200) {
+              customLoading.value = false
+            }
+          })
+        }
+      },
+    })
+  }
+}
+
+// handling the large selection data in chunks
+const handleSelectAllData = () => {
+  customLoading.value = true
+  return new Promise((resolve, reject) => {
+    let index = 0
+    function processChunk() {
+      if (index >= rows.value.length) {
+        resolve(200)
+        return
+      }
+      const chunk = props.rows.slice(index, index + 25)
+      chunk.forEach((element) => {
+        if (
+          selectedRows.value.findIndex((item) => item._id === element._id) ===
+          -1
+        ) {
+          selectedRows.value.push(element)
+        }
+      })
+      index += 25
+      setTimeout(processChunk, 10)
+    }
+    try {
+      processChunk()
+    } catch {
+      reject('error')
+    }
+  })
+}
+
+// sorting funtion to handle text and number type of data
+const dataSort = (data, key, order, type) => {
+  if (type === 'text') {
+    return data.sort((a, b) =>
+      order === 'asc'
+        ? a[key].localeCompare(b[key])
+        : b[key].localeCompare(a[key])
+    )
+  } else {
+    return data.sort((a, b) =>
+      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
+    )
+  }
+}
+
+//it is sorting the data according to type like text or number type of data
+const handleSort = (key, sortOrder, type) => {
+  rows.value = dataSort(rows.value, key, sortOrder, type)
+  columns.value.forEach((col) => {
+    if (key === col.field) {
+      col.sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'
+    }
+  })
+}
+
+//if user want to add custom sort on data
+const handleCustomSort = (key, sortOrder, type) => {
+  emit('onCustomSort', key, sortOrder, type)
+}
+
+//adding a new row to selectedRows
+const onRowClick = (event, row) => {
+  if (props.multiSelection) {
+    event.stopPropagation()
+    handleToSelectRow(row)
+  }
+}
+
+//getting the chip color accroding to value of chip from row
+const getChipColor = (data, value) => {
+  const foundObject = data.find((chip) => chip.value === value)
+  if (foundObject) {
+    return foundObject['color']
+  } else {
+    return 'neutral-3'
+  }
+}
+
+// handle to change the page, and if virtual scroll is enabled and user scrolled to bottom it will take user to the top
+const onPageChange = (value) => {
+  pagination.value.page = value
+}
+
+//handle to change the rows per page
+const onRowPerPageChange = (value) => {
+  pagination.value.rowsPerPage = value
+}
+
+const handleMenuEventStop = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const handleMouseEnter = (type, index) => {
+  if (type === 'button') {
+    hoveringButton.value[index] = true
+  } else {
+    hoveringMenu.value[index] = true
+  }
+  openMenu.value[index] = true
+}
+
+const handleMouseLeave = (type, index) => {
+  if (type === 'button') {
+    hoveringButton.value[index] = false
+  } else {
+    hoveringMenu.value[index] = false
+  }
+  setTimeout(() => {
+    if (!hoveringButton.value[index] && !hoveringMenu.value[index]) {
+      openMenu.value[index] = false
+    }
+  }, 100)
+}
+</script>
+
+<template>
+  <UTable
+    :title="title"
+    v-model:rows="rows"
+    v-model:columns="columns"
+    :separator="separator"
+    :loading="loading"
+    :flat="flat"
+    :bordered="bordered"
+    v-model:pagination="pagination"
+    :grid="grid"
+    :virtualScroll="virtualScroll"
+    :stickyHeader="stickyHeader"
+    :class="customClass"
+    :showPagination="showPagination"
+  >
+    <!-- custom header slot to add customized header -->
+    <template v-slot:header="props">
+      <UTr :props="props" :tableRowHover="tableRowHover">
+        <UTh
+          v-if="multiSelection"
+          style="width: 3% !important"
+          :tableHeaderAutoWidth="false"
+          tableHeadAlignment="left"
+          :separator="separator"
+        >
+          <UCheckboxStd
+            :id="`u-checkbox-table-header`"
+            v-model="isRowSelected(null).value"
+            name="Table Header"
+            :indeterminate="true"
+          />
+        </UTh>
+        <template v-for="(col, key) in props.cols">
+          <UTh
+            v-if="typeof col.show === 'undefined' || col.show"
+            :class="`${col.sortable ? 'cursor-pointer' : ''} ${
+              col.headerClasses
+            }`"
+            :key="key"
+            :tableHeaderAutoWidth="col.autoWidth"
+            :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
+            @click="
+              col.sortable
+                ? isCustomSort
+                  ? handleCustomSort(col.field, col.sortOrder, col.type)
+                  : handleSort(col.field, col.sortOrder, col.type)
+                : null
+            "
+            :separator="separator"
+            :style="col.headerStyle"
+          >
+            <span
+              :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
+            >
+              {{ col.field === 'action' ? 'Action' : col.label }}
+            </span>
+
+            <span v-if="col.sortable && col.field !== 'action'">
+              <UBtnIcon
+                :class="`more-action-icon cursor-pointer`"
+                :iconClass="`${getSortingIcon(col)}`"
+                ref="btn-icon"
+                :aria-label="`Sort ${col.label}`"
+                size="sm"
+              />
+            </span>
+          </UTh>
+        </template>
+      </UTr>
+    </template>
+    <!-- custom body slots to add customized cell data -->
+    <template v-slot:body="props">
+      <UTr
+        :class="`${isRowSelected(props.row).value ? 'selected-data-row' : ''}`"
+        :props="props"
+        :tableRowHover="tableRowHover"
+        @click="onRowClick($event, props.row)"
+      >
+        <UTd
+          v-if="multiSelection"
+          :index="-1"
+          tableDataAlignment="left"
+          :tableHeaderAutoWidth="false"
+          :separator="separator"
+        >
+          <UCheckboxStd
+            :id="`u-checkbox-${props.row._id}`"
+            v-model="isRowSelected(props.row).value"
+            :name="props.row._id"
+          />
+        </UTd>
+        <template v-for="(col, index) in props.cols" :key="index">
+          <!-- to show the cell data without the action cell -->
+          <UTd
+            v-if="
+              col.field !== 'action' &&
+              (typeof col.show === 'undefined' || col.show)
+            "
+            :row="props.row"
+            :col="col"
+            :index="index"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
+            :separator="separator"
+            :style="col.style"
+            :class="col.classes"
+          >
+            <!-- to show the chips with different variant -->
+            <template v-if="col.chipValues && col.chipValues.length > 0">
+              <UChip
+                v-model="tableDataChip"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
+                avatarLabel=""
+                :chipLabel="props.row[col.field].toString()"
+                :removable="false"
+                class="u-table-chip"
+                :is-show-tooltip="col.showChipTooltip"
+                :offset="col.offset"
+                :anchor="col.anchor"
+                :dense="col.denseChip"
+              />
+            </template>
+            <!-- to show the avatar of user image with name and other details -->
+            <template v-else-if="col.avatarKey">
+              <div class="flex justify-start items-center">
+                <div
+                  v-if="
+                    props.row[col.avatarKey] &&
+                    typeof props.row[col.avatarKey] === 'object'
+                  "
+                  class="table-data-avatar"
+                >
+                  <UAvatar
+                    v-if="props.row[col.avatarKey]?.type === 'initials'"
+                    size="md"
+                    :name="`${props.row[col.avatarKey]?.value}`"
+                  />
+                  <UAvatar
+                    v-else-if="props.row[col.avatarKey]?.type === 'image'"
+                    size="md"
+                    :name="
+                      props.row[col.avatarKey]?.name ??
+                      props.row[col.avatarKey]?.value
+                    "
+                    :image="`${props.row[col.avatarKey]?.value}`"
+                  />
+                </div>
+                <div v-else class="table-data-avatar">
+                  <UAvatar
+                    size="md"
+                    :name="`${props.row[col.avatarKey]}`"
+                    :image="`${props.row[col.avatarKey]}`"
+                  />
+                </div>
+                <div class="td-grid-content">
+                  <div>{{ props.row[col.field] }}</div>
+                  <div class="td-caption text-body-xs" v-if="col.captionKey">
+                    {{ props.row[col.captionKey] }}
+                  </div>
+                </div>
+              </div>
+            </template>
+            <!-- to show other cell data -->
+            <template v-else>
+              <div class="td-grid-content">
+                <div v-if="col.type !== 'icon'">
+                  {{ props.row[col.field] }}
+                </div>
+                <div v-else-if="col.type === 'icon'">
+                  <template v-if="props.row[col.field]">
+                    <q-icon
+                      :class="props.row[col.field]"
+                      :aria-label="props.row.ariaLabel"
+                      :alt="props.row.ariaLabel"
+                      :color="props?.row?.iconColor ?? 'primary'"
+                      size="1.5rem"
+                    />
+                  </template>
+                </div>
+                <div
+                  class="td-caption text-body-xs"
+                  v-if="col.captionKey && col.type !== 'icon'"
+                >
+                  {{ props.row[col.captionKey] }}
+                </div>
+              </div>
+            </template>
+          </UTd>
+          <!-- to the action cell, it can have single and multiple  -->
+
+          <UTd
+            v-else-if="typeof col.show === 'undefined' || col.show"
+            :class="col.classes"
+            :index="index"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
+            style="width: 3%"
+            :separator="separator"
+            :style="col.style"
+          >
+            <template v-if="col.actions && col.actions.length === 1">
+              <template v-for="(action, key) in col.actions" :key="key">
+                <UBtnStd
+                  v-if="
+                    typeof action.hide === 'function'
+                      ? !action.hide(props.row)
+                      : true
+                  "
+                  :key="key"
+                  :label="action.label"
+                  :flat="action.flat"
+                  :outline="action.outline"
+                  :leftIcon="action.icon"
+                  :color="action.color"
+                  :disable="
+                    typeof action.disable === 'function' &&
+                    action.disable(props.row)
+                  "
+                  :size="action.size"
+                  @onClick="action.handler(props.row)"
+                />
+              </template>
+            </template>
+            <!-- to show the actions list if the actions are multiple -->
+            <template v-else>
+              <UBtnIcon
+                :key="index"
+                :class="`action-icon cursor-pointer`"
+                iconClass="fa-kit fa-ellipsis-vertical"
+                ref="btn-icon"
+                ariaLabel="More action"
+                @focus="handleMouseEnter('button', props.row.id)"
+                @mouseover="handleMouseEnter('button', props.row.id)"
+                @mouseleave="handleMouseLeave('button', props.row.id)"
+                @blur="handleMouseLeave('button', props.row.id)"
+                @click.stop="handleMenuEventStop"
+              >
+                <template #menu>
+                  <q-menu
+                    v-if="!verticalMoreActions"
+                    v-model="openMenu[props.row.id]"
+                    role="list"
+                    no-focus
+                    no-refocus
+                    persistent
+                    @focus="handleMouseEnter('button', props.row.id)"
+                    @mouseleave="handleMouseLeave('menu', props.row.id)"
+                    @mouseover="handleMouseEnter('menu', props.row.id)"
+                    @blur="handleMouseLeave('button', props.row.id)"
+                  >
+                    <div
+                      :class="`${
+                        verticalMoreActions ? 'vertical' : 'horizontal'
+                      }-more-action-wrapper more-action-common`"
+                    >
+                      <template v-for="(action, key) in col.actions" :key="key">
+                        <UBtnIcon
+                          v-if="
+                            typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true && !verticalMoreActions
+                          "
+                          :id="`more-action-${key}`"
+                          :class="`more-action-icon cursor-pointer`"
+                          :iconClass="action.icon"
+                          ref="btn-icon"
+                          :ariaLabel="action.label"
+                          :disable="
+                            typeof action.disable === 'function' &&
+                            action.disable(props.row)
+                          "
+                          :size="action.size"
+                          :tooltip="action.tooltip"
+                          @onClick="action.handler(props.row)"
+                          @click.stop="handleMenuEventStop"
+                          @focus="handleMouseEnter('button', props.row.id)"
+                        />
+                      </template>
+                    </div>
+                  </q-menu>
+
+                  <q-menu
+                    v-else
+                    v-model="openMenu[props.row.id]"
+                    role="list"
+                    no-focus
+                    no-refocus
+                    persistent
+                    @focus="handleMouseEnter('button', props.row.id)"
+                    @mouseleave="handleMouseLeave('menu', props.row.id)"
+                    @mouseover="handleMouseEnter('menu', props.row.id)"
+                    @blur="handleMouseLeave('button', props.row.id)"
+                  >
+                    <UMenuDropdown
+                      v-if="verticalMoreActions"
+                      :data="
+                        col.actions.map((action) => {
+                          return {
+                            label: action.label,
+                            leftIcon: action.icon,
+                            hide: !(typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true),
+                            disable:
+                              typeof action.disable === 'function' &&
+                              action.disable(props.row),
+                            handler: function () {
+                              return action.handler(props.row)
+                            },
+                          }
+                        })
+                      "
+                    />
+                  </q-menu>
+                </template>
+              </UBtnIcon>
+            </template>
+          </UTd>
+        </template>
+      </UTr>
+    </template>
+    <!-- slot to show if there is no data in rows -->
+    <template v-slot:no-data>
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span> No Data Found </span>
+      </div>
+    </template>
+    <!-- to add the custom loading state -->
+    <!-- <template v-slot:loading>
+      <q-inner-loading v-if="customLoading" showing color="primary" />
+    </template> -->
+  </UTable>
+  <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
+  <div
+    v-if="showPagination"
+    class="row justify-end items-center pagination-wrapper"
+  >
+    <UPagination
+      v-if="rows.length >= 6"
+      v-model="pagination.page"
+      :rowPerPage="pagination.rowsPerPage"
+      :perPageOptions="getRowsPerPageOptions"
+      :maxPageLink="
+        Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
+      "
+      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+      @onPageChange="onPageChange"
+      @onRowChange="onRowPerPageChange"
+    />
+  </div>
+  <q-inner-loading :showing="customLoading" class="custom-table-loader" />
+</template>
+
+<style lang="sass">
+.action-icon
+  &:hover
+    background: $blue-1
+
+  .q-icon
+    height: $md !important
+    width: $md !important
+    color: $neutral-9 !important
+    font-size: $ba !important
+    &:hover
+      color: $primary !important
+
+
+.table-data-avatar
+  padding: $xs
+  padding-left: 0px
+
+.td-caption
+  color: $description
+
+.more-action-common
+  min-width: 3.125rem
+  padding: $xs
+  min-height: $xl
+  gap: $xs
+  border-bottom: 1.5px solid $neutral-4
+  background: $surface-bg-1
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+
+
+.vertical-more-action-wrapper
+  display: grid
+  place-items: flex-start
+  place-content: center
+  padding: $xxs
+  gap: $xxs
+
+.horizontal-more-action-wrapper
+  display: flex
+  align-items: center
+  justify-content: start
+
+.vertical-single-action
+  width: 100%
+  gap: $xs
+  padding: 0 $xs
+  height: $lg
+
+  .q-item__section--main
+    color: $neutral-9
+    white-space: nowrap
+
+  .q-item__section--avatar
+    min-width: 0px
+
+  .q-item__section--side
+    padding-right: 0
+
+  .q-icon
+    color: $neutral-9
+    font-size: $ba
+
+.more-action-icon
+  .q-icon
+    color: $neutral-9 !important
+    font-size: $ba !important
+
+.selected-data-row
+  background: #F7F7F7
+
+.rows-per-page-dropdown
+  margin-right: 0.5rem
+
+.u-table
+  height: auto
+
+  .q-table__progress
+    .q-linear-progress
+      color: $primary !important
+      height: 0.145rem
+
+.force-auto-height-table
+  height: auto !important
+
+.u-virtualscroll-table
+  height: 50rem
+
+.u-virtualscroll-grid-table
+  max-height: 50rem
+  overflow: auto
+
+.u-sticky-table-header
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th
+    background-color: #FFFFFF
+
+  thead tr th
+    position: sticky
+    z-index: 1
+
+  thead tr:first-child th
+    top: 0
+
+  &.q-table--loading thead tr:last-child th
+    top: 48px
+
+  tbody
+    scroll-margin-top: 48px
+
+.u-sorting-btn
+  padding: 0
+  min-height: auto
+  .block
+    display: none !important
+
+  .q-focus-helper
+    background: none !important
+
+.u-sorting-btn:before
+  box-shadow: none !important
+
+.u-table-chip
+  .q-icon
+    display: none
+
+.no-border-bottom-cell
+  border-bottom: none !important
+
+.pagination-wrapper
+  margin-top: $ba
+
+.custom-table-loader
+  .q-spinner
+    color: $primary
+
+.td-grid-content
+  text-wrap: balance
+  word-break: break-all
+
+.hidden-header-label
+  visibility: hidden
+</style>