@usssa/component-library 1.0.0-alpha.10 → 1.0.0-alpha.100

package/src/components/core/UTableStd.vue

@@ -0,0 +1,1003 @@
+<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'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onCustomSort'])
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+const moreActionDialogData = defineModel('moreActionDialogData', {
+  type: Object,
+  default: null,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+
+const props = defineProps({
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  isCustomSort: {
+    type: Boolean,
+    default: false,
+  },
+  multiSelection: {
+    type: Boolean,
+    default: false,
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false,
+  },
+  tableRowHover: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  verticalMoreActions: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+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 tailClass = ref(null)
+
+// 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
+  }
+})
+
+// chekcing the menu position after show
+const checkMenuPosition = (id) => {
+  const menuElement = document.getElementById(`actionPopupRef-${id}`) // Access the menu by ID
+  const buttonElement = document.getElementById(`actionPopupRefBtn-${id}`) // Access the button element
+
+  if (menuElement && buttonElement) {
+    const menuRect = menuElement.getBoundingClientRect() // Menu position
+    const buttonRect = buttonElement.getBoundingClientRect() // Button position
+
+    // Determine if the menu opens above or below
+    if (menuRect.top < buttonRect.top) {
+      tailClass.value = 'tail-bottom' // Menu opens below, tail at the bottom
+    } else {
+      tailClass.value = 'tail-top' // Menu opens above, tail at the top
+    }
+  }
+}
+
+// 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]
+    )
+  }
+}
+
+//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'
+  }
+}
+
+//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'
+    }
+  }
+}
+
+const handleActionColClick = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const handleMenuEventStop = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+//if user want to add custom sort on data
+const handleCustomSort = (key, sortOrder, type) => {
+  emit('onCustomSort', key, sortOrder, type)
+}
+
+// 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')
+    }
+  })
+}
+
+//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'
+    }
+  })
+}
+
+//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)
+    }
+  }
+}
+
+// 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
+            }
+          })
+        }
+      },
+    })
+  }
+}
+
+// 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
+}
+
+//adding a new row to selectedRows
+const onRowClick = (event, row) => {
+  if (props.multiSelection) {
+    event.stopPropagation()
+    handleToSelectRow(row)
+  }
+}
+
+//handle to change the rows per page
+const onRowPerPageChange = (value) => {
+  pagination.value.rowsPerPage = value
+}
+</script>
+
+<template>
+  <UTable
+    v-model:columns="columns"
+    v-model:pagination="pagination"
+    v-model:rows="rows"
+    :class="customClass"
+    :bordered="bordered"
+    :flat="flat"
+    :grid="grid"
+    :loading="loading"
+    :separator="separator"
+    :showPagination="showPagination"
+    :stickyHeader="stickyHeader"
+    :title="title"
+    :virtualScroll="virtualScroll"
+  >
+    <!-- custom header slot to add customized header -->
+    <template v-slot:header="props">
+      <UTr :props="props" :tableRowHover="tableRowHover">
+        <UTh
+          v-if="multiSelection"
+          :separator="separator"
+          style="width: 3% !important"
+          :tableHeaderAutoWidth="false"
+          tableHeadAlignment="left"
+        >
+          <UCheckboxStd
+            v-model="isRowSelected(null).value"
+            id="u-checkbox-table-header"
+            :indeterminate="true"
+            name="Table Header"
+          />
+        </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"
+            :separator="separator"
+            :style="col.headerStyle"
+            :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
+            "
+          >
+            <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)}`"
+                :aria-label="`Sort ${col.label}`"
+                ref="btn-icon"
+                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"
+          :separator="separator"
+          tableDataAlignment="left"
+          :tableHeaderAutoWidth="false"
+        >
+          <UCheckboxStd
+            v-model="isRowSelected(props.row).value"
+            :id="`u-checkbox-${props.row._id}`"
+            :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)
+            "
+            :class="col.classes"
+            :col="col"
+            :index="index"
+            :row="props.row"
+            :separator="separator"
+            :style="col.style"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
+          >
+            <!-- to show the chips with different variant -->
+            <template v-if="col.chipValues && col.chipValues.length > 0">
+              <UChip
+                v-model="tableDataChip"
+                class="u-table-chip"
+                avatarLabel=""
+                :anchor="col.anchor"
+                :chipLabel="props.row[col.field].toString()"
+                :dense="col.denseChip"
+                :is-show-tooltip="col.showChipTooltip"
+                :offset="col.offset"
+                :removable="false"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
+              />
+            </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'"
+                    :name="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
+                  />
+                  <UAvatar
+                    v-else-if="props.row[col.avatarKey]?.type === 'image'"
+                    :image="`${props.row[col.avatarKey]?.value}`"
+                    :name="
+                      props.row[col.avatarKey]?.name ??
+                      props.row[col.avatarKey]?.value
+                    "
+                    size="md"
+                  />
+                </div>
+                <div v-else class="table-data-avatar">
+                  <UAvatar
+                    :image="`${props.row[col.avatarKey]}`"
+                    :name="`${props.row[col.avatarKey]}`"
+                    size="md"
+                  />
+                </div>
+                <div class="td-grid-content">
+                  <div>{{ props.row[col.field] }}</div>
+                  <div v-if="col.captionKey" class="td-caption text-body-xs">
+                    {{ 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
+                  v-if="col.captionKey && col.type !== 'icon'"
+                  class="td-caption text-body-xs"
+                >
+                  {{ 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"
+            :separator="separator"
+            :style="col.style"
+            style="width: 3%"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
+            @click="handleActionColClick"
+          >
+            <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
+                  "
+                  :color="
+                    typeof action.color === 'function'
+                      ? action.color(props.row)
+                      : action.color
+                  "
+                  :disable="
+                    typeof action.disable === 'function' &&
+                    action.disable(props.row)
+                  "
+                  :flat="
+                    typeof action.flat === 'function'
+                      ? action.flat(props.row)
+                      : action.flat
+                  "
+                  :key="key"
+                  :label="
+                    typeof action.label === 'function'
+                      ? action.label(props.row)
+                      : action.label
+                  "
+                  :leftIcon="
+                    typeof action.icon === 'function'
+                      ? action.icon(props.row)
+                      : action.icon
+                  "
+                  :outline="
+                    typeof action.outline === 'function'
+                      ? action.outline(props.row)
+                      : action.outline
+                  "
+                  :size="action.size"
+                  @onClick="action.handler(props.row)"
+                >
+                  <template #tooltip>
+                    <UTooltip
+                      v-if="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :anchor="action.anchor"
+                      :description="
+                        typeof action.tooltip === 'function'
+                          ? action.tooltip(props.row)
+                          : action.tooltip
+                      "
+                      :offset="action.offset ? action.offset : [10, 40]"
+                      :self="action.anchor"
+                    />
+                  </template>
+                </UBtnStd>
+              </template>
+            </template>
+            <!-- to show the actions list if the actions are multiple -->
+            <template v-else>
+              <q-menu
+                v-if="
+                  moreActionDialogData &&
+                  moreActionDialogData.showDialog[props.row.id]
+                "
+                v-model="moreActionDialogData.showDialog[props.row.id]"
+                :class="`more-action-popup q-px-ba q-py-ba`"
+                anchor="top left"
+                :cover="false"
+                :fit="true"
+                :id="`actionPopupRef-${props.row.id}`"
+                :offset="[85, 0]"
+                role="list"
+                self="bottom middle"
+                transition-show="scale"
+                transition-hide="scale"
+                @show="checkMenuPosition(props.row.id)"
+              >
+                <div :class="tailClass"></div>
+                <q-card class="more-action-popup-wrapper">
+                  <q-card-section>
+                    <div class="content-wrapper text-center">
+                      <div class="q-pb-ba flex justify-center items-center">
+                        <div
+                          :class="`remove-icon-wrapper ${
+                            moreActionDialogData.row.iconColor === 'accent'
+                              ? 'icon-bg-accent'
+                              : 'icon-bg-primary'
+                          }`"
+                        >
+                          <q-icon
+                            :class="`${moreActionDialogData.row.icon} ${
+                              moreActionDialogData.row.iconColor === 'accent'
+                                ? 'icon-text-accent'
+                                : 'icon-text-primary'
+                            }`"
+                            alt="confirmation icon"
+                            aria-label="confirmation icon"
+                            size="1.5rem"
+                          />
+                        </div>
+                      </div>
+
+                      <div
+                        class="text-heading-xxs primary-content-text q-pb-xxs"
+                      >
+                        {{ moreActionDialogData.row.title }}
+                      </div>
+                      <div
+                        v-if="moreActionDialogData.row.description"
+                        class="text-body-sm secondary-content-text q-pb-xs"
+                      >
+                        {{ moreActionDialogData.row.description }}
+                      </div>
+                    </div>
+                    <!-- <p class="hidden-scope-value">{{ scope.value }}</p> -->
+                  </q-card-section>
+
+                  <q-card-actions align="right">
+                    <UBtnStd
+                      v-if="moreActionDialogData.secondaryAction"
+                      :color="moreActionDialogData.secondaryAction.color"
+                      :disable="moreActionDialogData.secondaryAction.disable"
+                      :flat="moreActionDialogData.secondaryAction.flat"
+                      :label="moreActionDialogData.secondaryAction.label"
+                      :loading="moreActionDialogData.secondaryAction.loading"
+                      :outline="moreActionDialogData.secondaryAction.outline"
+                      :size="moreActionDialogData.secondaryAction.size"
+                      @on-click="
+                        moreActionDialogData.secondaryAction.handler(props.row)
+                      "
+                    />
+                    <UBtnStd
+                      v-if="moreActionDialogData.primaryAction"
+                      class="confirm-primary-action"
+                      :color="moreActionDialogData.primaryAction.color"
+                      :disable="moreActionDialogData.primaryAction.disable"
+                      :flat="moreActionDialogData.primaryAction.flat"
+                      :label="moreActionDialogData.primaryAction.label"
+                      :loading="moreActionDialogData.primaryAction.loading"
+                      :outline="moreActionDialogData.primaryAction.outline"
+                      :size="moreActionDialogData.primaryAction.size"
+                      @on-click="
+                        moreActionDialogData.primaryAction.handler(props.row)
+                      "
+                    />
+                  </q-card-actions>
+                </q-card>
+              </q-menu>
+
+              <UBtnIcon
+                :class="`action-icon cursor-pointer`"
+                iconClass="fa-kit fa-ellipsis-vertical"
+                ariaLabel="More action"
+                :id="`actionPopupRefBtn-${props.row.id}`"
+                :key="index"
+                ref="btn-icon"
+                @click.stop="handleMenuEventStop"
+              >
+                <template #menu>
+                  <q-menu v-if="!verticalMoreActions" auto-close role="list">
+                    <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
+                          "
+                          :class="`more-action-icon cursor-pointer table-more-action`"
+                          :iconClass="
+                            typeof action.icon === 'function'
+                              ? action.icon(props.row)
+                              : action.icon
+                          "
+                          :anchor="action.anchor"
+                          :ariaLabel="
+                            typeof action.label === 'function'
+                              ? action.label(props.row)
+                              : action.label
+                          "
+                          :disable="
+                            typeof action.disable === 'function' &&
+                            action.disable(props.row)
+                          "
+                          :id="`more-action-${key}`"
+                          :offset="action.offset ? action.offset : [10, 40]"
+                          ref="btn-icon"
+                          :self="action.self"
+                          :size="action.size"
+                          :tooltip="
+                            typeof action.tooltip === 'function'
+                              ? action.tooltip(props.row)
+                              : action.tooltip
+                          "
+                          @click.stop="handleMenuEventStop"
+                          @onClick="action.handler(props.row)"
+                        />
+                      </template>
+                    </div>
+                  </q-menu>
+
+                  <q-menu v-else auto-close role="list">
+                    <UMenuDropdown
+                      v-if="verticalMoreActions"
+                      :data="
+                        col.actions.map((action) => {
+                          return {
+                            destructive: action.destructive,
+                            disable:
+                              typeof action.disable === 'function' &&
+                              action.disable(props.row),
+                            hide: !(typeof action.hide === 'function'
+                              ? !action.hide(props.row)
+                              : true),
+                            label:
+                              typeof action.label === 'function'
+                                ? action.label(props.row)
+                                : action.label,
+                            leftIcon:
+                              typeof action.icon === 'function'
+                                ? action.icon(props.row)
+                                : action.icon,
+                            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"
+      :maxPageLink="
+        Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
+      "
+      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+      :perPageOptions="getRowsPerPageOptions"
+      :rowPerPage="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: 3rem
+
+  tbody
+    scroll-margin-top: 3rem
+
+.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
+
+.more-action-popup
+  border-radius: $border-radius-sm
+  background: $neutral-1
+  box-shadow: 0rem 0rem 0.75rem 0rem rgba(16, 17, 20, 0.16)
+  max-width: 18.375rem !important
+  width: 100%
+  position: relative
+  overflow: visible
+
+.more-action-popup-wrapper
+  box-shadow: none
+  max-width: 18.375rem !important
+  width: 100%
+  .hidden-scope-value
+    display: none
+  .q-card__section
+    padding: 0
+  .q-card__actions
+    flex-wrap: nowrap
+    padding: $ba 0 0 0
+    .q-btn
+      width: 50%
+
+.content-wrapper
+  display: grid
+  place-content: center
+  place-items: center
+
+.secondary-content-text
+  color: $description
+
+.primary-content-text
+  color: $dark
+
+.remove-icon-wrapper
+  border-radius: 7.75rem
+  padding: $sm
+  width: 3.125rem
+  height: 3.125rem
+  .q-icon
+    color: $accent
+
+.confirm-primary-action
+  margin-left: $ba !important
+
+.icon-bg-accent
+  background-color: $red-1
+
+.icon-bg-primary
+  background-color: $blue-1
+
+.icon-text-accent
+  color: $accent
+
+.icon-text-primary
+  color: $primary !important
+
+.tail-top
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  top: -0.604rem
+  border-top-left-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: -3px -2px 5px -3px rgba(0, 0, 0, 0.2)
+
+.tail-bottom
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  bottom: -0.604rem
+  border-bottom-right-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: 3px 4px 5px -3px rgba(0, 0, 0, 0.2)
+</style>