@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UTable/UTable.vue

@@ -0,0 +1,1984 @@
+<script setup>
+import { useQuasar } from 'quasar'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useScreenType } from '../../../composables/useScreenType'
+import UAvatar from '../UAvatar.vue'
+import UBtnStd from '../UBtnStd.vue'
+import UChip from '../UChip.vue'
+import UExpansionStd from '../UExpansionStd.vue'
+import UInnerLoader from '../UInnerLoader.vue'
+import USheet from '../USheet.vue'
+import UTooltip from '../UTooltip.vue'
+
+const emit = defineEmits(['onLoadMore'])
+
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const filteredRows = defineModel('filteredRows', {
+  default: () => [],
+  type: Array,
+})
+const loading = defineModel('loading', {
+  default: null,
+  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 props = defineProps({
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  closeIconLabel: {
+    type: String,
+    default: 'Close Icon',
+  },
+  enableIconToggle: {
+    type: Boolean,
+    default: false,
+  },
+  expansion: {
+    type: Boolean,
+    default: false,
+  },
+  filter: {
+    type: String,
+    default: '',
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  infiniteScroll: {
+    type: Boolean,
+    default: false,
+  },
+  infiniteScrollProperty: {
+    type: Object,
+    default: () => {
+      return {
+        color: 'primary',
+        height: '55rem',
+        image: '',
+        loading: false,
+        noMoreData: false,
+        noMoreDataText: 'No more data',
+        padding: true,
+        size: '1rem',
+        type: 'default',
+      }
+    },
+  },
+  rowCardHeight: {
+    type: Number,
+    default: 25,
+  },
+  rowKey: {
+    type: String,
+    default: 'name',
+  },
+  selectMoreOptions: {
+    type: String,
+    default: 'Select More Options',
+  },
+  separator: {
+    type: String,
+    default: 'horizontal',
+  },
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  viewMoreLabel: {
+    type: String,
+    default: 'View More',
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const $q = useQuasar()
+const $screen = useScreenType()
+
+const infiniteScrollProp = ref(props.infiniteScrollProperty)
+const isScrollActionActive = ref(false)
+const mobileActionsDialog = ref({})
+const moreActionsDialogs = ref({})
+const infiniteNoMoreShow = ref(false)
+const tableContainer = ref(null)
+const tableDataChip = ref(true) // this is required to show chip
+const tailClass = ref(null)
+
+const isDesktop = computed(() => $screen.value.isDesktop)
+const isMobile = computed(() => $screen.value.isMobile)
+const isResponsiveTablet = computed(
+  () => $q.screen.width > 600 && $q.screen.width < 768
+)
+const isTablet = computed(() => $screen.value.isTablet)
+
+const attachScroll = () => {
+  if (props.infiniteScroll && tableContainer.value) {
+    tableContainer.value.addEventListener('scroll', handleScroll)
+  }
+}
+
+// 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 mobile-tail-bottom' // Menu opens below, tail at the bottom
+    } else {
+      tailClass.value = 'tail-top mobile-tail-top' // Menu opens above, tail at the top
+    }
+  }
+}
+
+const detachScroll = () => {
+  if (tableContainer.value) {
+    tableContainer.value.removeEventListener('scroll', handleScroll)
+  }
+}
+
+const filterMethod = (rows, terms, cols, getCellValue) => {
+  let updatedRows = []
+  rows.forEach((row) => {
+    cols.forEach((col) => {
+      if (
+        col.type === 'text' &&
+        row[col.id].toLowerCase().includes(terms.toLowerCase()) &&
+        !updatedRows.includes(row)
+      ) {
+        updatedRows.push(row)
+      }
+    })
+  })
+  filteredRows.value = updatedRows
+
+  return updatedRows
+}
+
+const getActionItemColor = (action, row) => {
+  if (action.destructive) {
+    return 'accent'
+  } else {
+    return typeof action.color === 'function'
+      ? action.color(row)
+      : action.color
+      ? action.color
+      : 'primary'
+  }
+}
+
+//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'
+  }
+}
+
+// Helper to get the caption for the expansion item (from captionKey if present)
+function getExpansionCaption(row, cols) {
+  const col = cols.find(
+    (c) => c.captionKey && (typeof c.show === 'undefined' || c.show)
+  )
+  if (col && row[col.captionKey]) {
+    return col.captionKeyTitle
+      ? `${col.captionKeyTitle}: ${row[col.captionKey]}`
+      : row[col.captionKey]
+  }
+  return ''
+}
+
+// Helper to get the label for the expansion item
+function getExpansionLabel(row, cols) {
+  const col = cols.find(
+    (c) => (typeof c.show === 'undefined' || c.show) && c.field !== 'action'
+  )
+  return col ? row[col.field] : row[props.rowKey] || 'Details'
+}
+
+const handleItemClick = (action, row) => {
+  moreActionsDialogs.value[row.id][0].open = false
+  setTimeout(() => {
+    moreActionsDialogs.value[row.id].splice(0, 1)
+  }, 200)
+  return action.handler(row)
+}
+
+const handleOpenMobileMoreActions = (id) => {
+  const dialogObjMap = {
+    [id]: [
+      {
+        open: true,
+        height: 270,
+        persistent: true,
+        transitionDuration: 500, // ms
+        position: 'bottom',
+      },
+    ],
+  }
+  moreActionsDialogs.value = dialogObjMap
+}
+
+const handleScroll = async () => {
+  if (
+    !props.infiniteScroll ||
+    infiniteScrollProp.value.loading ||
+    infiniteScrollProp.value.noMoreData
+  )
+    return
+  const el = tableContainer.value
+
+  if (!el) return
+
+  // Only trigger if content is scrollable
+  if (el.scrollHeight <= el.clientHeight) return
+
+  // Only trigger if user is scrolling down
+  if (el.scrollTop < infiniteScrollProp.value?.lastScrollTop) {
+    infiniteScrollProp.value['lastScrollTop'] = el.scrollTop
+    return
+  }
+  infiniteScrollProp.value.lastScrollTop = el.scrollTop
+
+  // Calculate distance from bottom
+  const distanceFromBottom = el.scrollHeight - (el.scrollTop + el.clientHeight)
+
+  // Only trigger when at (or very near) the bottom
+  if (distanceFromBottom <= 10) {
+    const lastRow = rows.value[rows.value.length - 1]
+    if (lastRow) {
+      emit('onLoadMore', lastRow)
+    }
+  }
+}
+
+// checking for tooltip is content is visible
+const isContentVisible = (field, id, type) => {
+  return document.getElementById(`long-${type}-${field}-${id}`)
+}
+
+onMounted(() => {
+  infiniteNoMoreShow.value = false
+  nextTick(() => {
+    if (!infiniteScrollProp.value.noMoreData) {
+      attachScroll()
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  detachScroll()
+})
+
+// Watch for changes in infiniteScroll or tableContainer
+watch(
+  () => [props.infiniteScroll, tableContainer.value],
+  async ([enabled, el], [oldEnabled, oldEl]) => {
+    if (oldEl) oldEl.removeEventListener('scroll', handleScroll)
+    await nextTick()
+    if (enabled && tableContainer.value) {
+      tableContainer.value.addEventListener('scroll', handleScroll)
+    }
+  }
+)
+
+// detach the scrollbar action(onLoadMore) when noMoreData occur
+watch(
+  () => infiniteScrollProp.value,
+  (newValue) => {
+    // Reset state when conditions change
+    if (!newValue) {
+      isScrollActionActive.value = false
+      return
+    }
+
+    // Handle active states
+    if (newValue.loading || newValue.noMoreData) {
+      isScrollActionActive.value = true
+
+      if (newValue.noMoreData) {
+        infiniteNoMoreShow.value = true
+        setTimeout(() => {
+          infiniteNoMoreShow.value = false
+          detachScroll()
+
+          // Reset scroll active state after timeout
+          if (!infiniteScrollProp.value?.loading) {
+            isScrollActionActive.value = false
+          }
+        }, 5000)
+      }
+    }
+    // Reset when neither loading nor noMoreData
+    else {
+      isScrollActionActive.value = false
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  moreActionDialogData,
+  (newData) => {
+    if (newData && newData.showDialog) {
+      const dialogObjMap = {
+        [newData.row.id]: [
+          {
+            open: true,
+            height: 270,
+            persistent: true,
+            transitionDuration: 500, // ms
+            position: 'bottom',
+          },
+        ],
+      }
+      mobileActionsDialog.value = dialogObjMap
+    } else {
+      mobileActionsDialog.value = []
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <component
+    v-bind="
+      infiniteScroll
+        ? {
+            style: `overflow-y: auto; height: ${infiniteScrollProperty.height};`,
+          }
+        : {}
+    "
+    :class="[
+      infiniteScroll && 'u-table-infinite-scroll-container ',
+      grid && infiniteScroll && infiniteScrollProperty.padding ? 'q-pa-ba' : '',
+    ]"
+    :is="infiniteScroll ? 'div' : 'fragment'"
+    ref="tableContainer"
+  >
+    <q-table
+      v-bind="$attrs"
+      v-model:pagination="pagination"
+      :class="`u-table${virtualScroll ? ' u-virtualscroll-table' : ''}${
+        grid ? ' u-virtualscroll-grid-table' : ''
+      }${stickyHeader ? ' u-sticky-table-header' : ''}${
+        showPagination && pagination.rowsPerPage < 50
+          ? ' force-auto-height-table'
+          : ''
+      }${
+        !isDesktop ? (isMobile ? ' grid-card-mobile' : ' grid-card-tablet') : ''
+      }`"
+      :bordered="bordered"
+      :columns="columns"
+      :filter="filter"
+      :filter-method="filterMethod"
+      :flat="flat"
+      :grid="grid"
+      hide-pagination
+      :loading="loading"
+      :row-key="rowKey"
+      :rows="rows"
+      :rows-per-page-options="[0]"
+      :separator="separator"
+      :title="title"
+      :virtual-scroll="!grid && virtualScroll"
+      :virtual-scroll-item-size="48"
+      :virtual-scroll-sticky-size-start="48"
+    >
+      <template
+        v-for="(_, slotName, index) in $slots"
+        v-slot:[slotName]="scope"
+        :key="index"
+      >
+        <slot v-bind="{ ...scope }" :name="slotName" />
+      </template>
+      <template v-slot:item="props">
+        <div
+          v-if="expansion == false"
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card bordered flat>
+            <q-list
+              dense
+              :style="{
+                'min-height': `${rowCardHeight}rem`,
+                overflowX: 'hidden',
+              }"
+            >
+              <template v-for="(col, __k) in props.cols" :key="__k">
+                <q-item
+                  v-if="
+                    typeof col.show === 'undefined' ||
+                    col.show ||
+                    col.field === 'action'
+                  "
+                  :class="col.doubleSpan ? 'mobile-centered-col' : ''"
+                >
+                  <q-item-section
+                    v-if="
+                      typeof col.show === 'undefined' ||
+                      col.show ||
+                      col.field === 'action'
+                    "
+                  >
+                    <q-item-label> {{ col.label }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section
+                    v-if="
+                      typeof col.show === 'undefined' ||
+                      col.show ||
+                      col.field === 'action'
+                    "
+                    side
+                  >
+                    <template
+                      v-if="col.type === 'icon' && props.row[col.field]"
+                    >
+                      <q-icon
+                        :class="props.row[col.field]"
+                        :alt="props.row.ariaLabel"
+                        :aria-label="props.row.ariaLabel"
+                        :color="props?.row?.iconColor ?? 'primary'"
+                        size="1.5rem"
+                      />
+                    </template>
+                    <template
+                      v-if="col.chipValues && col.chipValues.length > 0"
+                    >
+                      <UChip
+                        v-model="tableDataChip"
+                        class="u-table-chip"
+                        :anchor="col.anchor"
+                        avatarLabel=""
+                        :chipLabel="props.row[col.field].toString()"
+                        :dense="isMobile || isTablet ? true : col.denseChip"
+                        :is-show-tooltip="col.showChipTooltip"
+                        :offset="col.offset"
+                        :removable="false"
+                        :type="
+                          getChipColor(col.chipValues, props.row[col.field])
+                        "
+                      />
+                    </template>
+
+                    <template v-else>
+                      <div class="flex justify-center items-center no-wrap">
+                        <div
+                          class="flex justify-center items-center no-wrap"
+                          v-if="col.avatarKey"
+                        >
+                          <UChip
+                            v-if="
+                              !isDesktop &&
+                              col.showAlignedChip &&
+                              typeof col.showAlignedChip === 'function' &&
+                              col.showAlignedChip(props.row)
+                            "
+                            v-model="tableDataChip"
+                            :class="[
+                              expansion ? 'q-ma-none' : 'q-mr-xs',
+                              col.showAlignedChip(props.row).class,
+                            ]"
+                            :avatarLabel="
+                              col.showAlignedChip(props.row).avatarLabel
+                            "
+                            :chipLabel="
+                              col.showAlignedChip(props.row).chipLabel
+                            "
+                            :dense="col.showAlignedChip(props.row).dense"
+                            :removable="
+                              col.showAlignedChip(props.row).removable
+                            "
+                            :type="col.showAlignedChip(props.row).type"
+                          />
+                          <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'
+                              "
+                              :indicatorColor="
+                                typeof col.indicatorColor === 'function' &&
+                                col.indicatorColor(props.row)
+                                  ? col.indicatorColor(props.row)
+                                  : ''
+                              "
+                              :indicatorIcon="
+                                typeof col.indicatorIcon === 'function' &&
+                                col.indicatorIcon(props.row)
+                                  ? col.indicatorIcon(props.row)
+                                  : ''
+                              "
+                              :name="`${props.row[col.avatarKey]?.value}`"
+                              :showIndicator="col.showIndicator"
+                              size="lg"
+                            />
+                            <UAvatar
+                              v-else-if="
+                                props.row[col.avatarKey]?.type === 'image'
+                              "
+                              :image="`${props.row[col.avatarKey]?.value}`"
+                              :indicatorColor="
+                                typeof col.indicatorColor === 'function' &&
+                                col.indicatorColor(props.row)
+                                  ? col.indicatorColor(props.row)
+                                  : ''
+                              "
+                              :indicatorIcon="
+                                typeof col.indicatorIcon === 'function' &&
+                                col.indicatorIcon(props.row)
+                                  ? col.indicatorIcon(props.row)
+                                  : ''
+                              "
+                              :name="
+                                props.row[col.avatarKey]?.name ??
+                                props.row[col.avatarKey]?.value
+                              "
+                              :showIndicator="col.showIndicator"
+                              size="lg"
+                            />
+                          </div>
+                          <div v-else class="table-data-avatar">
+                            <UAvatar
+                              :image="`${props.row[col.avatarKey]}`"
+                              :indicatorColor="
+                                typeof col.indicatorColor === 'function' &&
+                                col.indicatorColor(props.row)
+                                  ? col.indicatorColor(props.row)
+                                  : ''
+                              "
+                              :indicatorIcon="
+                                typeof col.indicatorIcon === 'function' &&
+                                col.indicatorIcon(props.row)
+                                  ? col.indicatorIcon(props.row)
+                                  : ''
+                              "
+                              :name="`${props.row[col.avatarKey]}`"
+                              :showIndicator="col.showIndicator"
+                              size="lg"
+                            />
+                          </div>
+                        </div>
+
+                        <q-item-label v-if="col.type !== 'icon'" caption>
+                          <span
+                            :class="[
+                              col.value ? 'long-text-content' : '',
+                              col.noEllipsis ? 'no-ellipsis-content' : '',
+                              col.doubleSpan && col.noEllipsis
+                                ? 'full-width-text-content'
+                                : '',
+                              !isResponsiveTablet &&
+                              isTablet &&
+                              col.classes &&
+                              col.classes.length > 0 &&
+                              col.classes[0] === 'no-wrap-text'
+                                ? 'tablet-event-text'
+                                : '',
+                              typeof col.combineColoumn === 'function' &&
+                              col.combineColoumn(props.row)
+                                ? 'combine-col-small-device-wrapper'
+                                : '',
+                            ]"
+                            :id="`long-content-${col.field}-${props.row.id}`"
+                          >
+                            {{ col.value }}
+                            <template
+                              v-if="
+                                typeof col.combineColoumn === 'function' &&
+                                col.combineColoumn(props.row)
+                              "
+                            >
+                              <template
+                                v-for="(
+                                  combineCol, colKey
+                                ) in col.combineColoumn(props.row)"
+                                :key="colKey"
+                              >
+                                <q-icon
+                                  v-if="combineCol.icon"
+                                  :class="combineCol.icon"
+                                  :alt="combineCol.ariaLabel"
+                                  :aria-label="combineCol.ariaLabel"
+                                  :color="combineCol?.iconColor ?? 'primary'"
+                                  :key="colKey"
+                                  size="1rem"
+                                />
+                                <div v-else>
+                                  {{ props.row[combineCol.key] }}
+                                </div>
+                              </template>
+                            </template>
+                          </span>
+                          <UTooltip
+                            v-if="
+                              col.value &&
+                              col.value.length > 12 &&
+                              isContentVisible(
+                                col.field,
+                                props.row.id,
+                                'content'
+                              )
+                            "
+                            anchor="bottom middle"
+                            :description="col.value"
+                            :offset="[10, 40]"
+                            self="bottom middle"
+                            :target="`#long-content-${col.field}-${props.row.id}`"
+                          />
+                          <div
+                            v-if="col.captionKey"
+                            class="td-caption mobile-primary-caption text-body-sm"
+                            :id="`long-caption-${col.field}-${props.row.id}`"
+                          >
+                            <template v-if="col.captionKeyTitle">
+                              {{ col.captionKeyTitle }}:
+                            </template>
+                            {{ props.row[col.captionKey] }}
+                          </div>
+                          <UTooltip
+                            v-if="
+                              props.row[col.captionKey] &&
+                              props.row[col.captionKey].length > 12 &&
+                              isContentVisible(
+                                col.field,
+                                props.row.id,
+                                'caption'
+                              )
+                            "
+                            anchor="bottom middle"
+                            :description="props.row[col.captionKey]"
+                            :offset="[10, 40]"
+                            self="bottom middle"
+                            :target="`#long-caption-${col.field}-${props.row.id}`"
+                          />
+                        </q-item-label>
+                      </div>
+                    </template>
+                    <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
+                          "
+                          full-width
+                          :key="key"
+                          :label="
+                            typeof action.label === 'function'
+                              ? action.label(props.row)
+                              : action.label
+                          "
+                          :leftIcon="
+                            typeof action.icon === 'function'
+                              ? action.icon(props.row)
+                              : action.icon
+                          "
+                          :loading="
+                            typeof action.loading === 'function'
+                              ? action.loading(props.row)
+                              : action.loading
+                          "
+                          :outline="
+                            typeof action.outline === 'function'
+                              ? action.outline(props.row)
+                              : action.outline
+                          "
+                          :size="action.size"
+                          @on-click="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>
+                    <template v-if="col.actions && col.actions.length > 1">
+                      <q-dialog
+                        v-if="
+                          isTablet &&
+                          moreActionDialogData &&
+                          moreActionDialogData.showDialog[props.row.id]
+                        "
+                        v-model="moreActionDialogData.showDialog[props.row.id]"
+                        class="more-action-popup"
+                        persistent
+                      >
+                        <q-card
+                          class="more-action-popup-wrapper confirmation-dialog-wrapper q-px-ba q-py-ba"
+                        >
+                          <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-dialog>
+
+                      <UBtnStd
+                        v-if="!isMobile"
+                        color="primary"
+                        full-width
+                        :id="`actionPopupRefBtn-${props.row.id}`"
+                        :label="viewMoreLabel"
+                        outline
+                      >
+                        <template #menu>
+                          <q-menu
+                            class="more-action-popup"
+                            auto-close
+                            fit
+                            :id="`actionPopupRef-${props.row.id}`"
+                            :offset="[10, 20]"
+                            transition-hide="jump-up"
+                            transition-show="jump-down"
+                            @show="checkMenuPosition(props.row.id)"
+                          >
+                            <div :class="tailClass" />
+                            <div
+                              class="q-pt-ba q-px-ba q-pb-none text-heading-xxs text-dark"
+                            >
+                              Select More Options
+                            </div>
+                            <q-list class="grid-more-action">
+                              <template v-for="(action, __i) in col.actions">
+                                <q-item
+                                  v-if="
+                                    typeof action.hide === 'function'
+                                      ? !action.hide(props.row)
+                                      : true
+                                  "
+                                  class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                  :aria-label="
+                                    typeof action.label === 'function'
+                                      ? action.label(props.row)
+                                      : action.label
+                                  "
+                                  clickable
+                                  :key="__i"
+                                  tabindex="-1"
+                                  @click="action.handler(props.row)"
+                                >
+                                  <q-item-section class="q-pr-xs" avatar>
+                                    <q-icon
+                                      v-if="
+                                        typeof action.icon === 'function'
+                                          ? action.icon(props.row)
+                                          : action.icon
+                                      "
+                                      :class="`${
+                                        typeof action.icon === 'function'
+                                          ? action.icon(props.row)
+                                          : action.icon
+                                      } text-${getActionItemColor(
+                                        action,
+                                        props.row
+                                      )}`"
+                                      size="1.5rem"
+                                      tabindex="-1"
+                                    />
+                                  </q-item-section>
+                                  <q-item-section
+                                    :class="`text-caption-lg text-${getActionItemColor(
+                                      action,
+                                      props.row
+                                    )}`"
+                                    tabindex="0"
+                                  >
+                                    {{
+                                      typeof action.label === 'function'
+                                        ? action.label(props.row)
+                                        : action.label
+                                    }}
+                                  </q-item-section>
+                                </q-item>
+                              </template>
+                            </q-list>
+                          </q-menu>
+                        </template>
+                      </UBtnStd>
+                      <template v-if="isMobile">
+                        <UBtnStd
+                          color="primary"
+                          full-width
+                          :id="`view-more-actions-${props.row['id']}`"
+                          :label="viewMoreLabel"
+                          outline
+                          @on-click="
+                            handleOpenMobileMoreActions(props.row['id'])
+                          "
+                        />
+                        <USheet
+                          v-if="
+                            moreActionDialogData &&
+                            moreActionDialogData.showDialog[props.row.id]
+                          "
+                          v-model:dialogs="mobileActionsDialog[props.row['id']]"
+                          :close-icon-label="closeIconLabel"
+                          :heading="moreActionDialogData.row.title"
+                          :is-left-icon="false"
+                          :show-action-buttons="true"
+                        >
+                          <template #content>
+                            <q-card
+                              class="more-action-popup-wrapper confirmation-dialog-wrapper mobile-confirmation-dialog q-px-ba q-py-ba"
+                            >
+                              <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>
+                              </q-card-section>
+                            </q-card>
+                          </template>
+                          <template
+                            v-if="
+                              moreActionDialogData &&
+                              moreActionDialogData.showDialog[props.row.id] &&
+                              moreActionDialogData.secondaryAction
+                            "
+                            #action_primary_one
+                          >
+                            <UBtnStd
+                              :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
+                                )
+                              "
+                            />
+                          </template>
+                          <template
+                            v-if="
+                              moreActionDialogData &&
+                              moreActionDialogData.showDialog[props.row.id] &&
+                              moreActionDialogData.primaryAction
+                            "
+                            #action_primary_two
+                          >
+                            <UBtnStd
+                              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
+                                )
+                              "
+                            />
+                          </template>
+                        </USheet>
+                        <USheet
+                          v-model:dialogs="moreActionsDialogs[props.row['id']]"
+                          :close-icon-label="closeIconLabel"
+                          :heading="selectMoreOptions"
+                          :is-left-icon="false"
+                          :show-action-buttons="false"
+                        >
+                          <template #content>
+                            <q-list class="mobile-grid-more-action">
+                              <template v-for="(action, __i) in col.actions">
+                                <q-item
+                                  v-if="
+                                    typeof action.hide === 'function'
+                                      ? !action.hide(props.row)
+                                      : true
+                                  "
+                                  class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                  :aria-label="
+                                    typeof action.label === 'function'
+                                      ? action.label(props.row)
+                                      : action.label
+                                  "
+                                  clickable
+                                  :key="__i"
+                                  tabindex="-1"
+                                  @click="handleItemClick(action, props.row)"
+                                >
+                                  <q-item-section class="q-pr-xs" avatar>
+                                    <q-icon
+                                      v-if="
+                                        typeof action.icon === 'function'
+                                          ? action.icon(props.row)
+                                          : action.icon
+                                      "
+                                      :class="`${
+                                        typeof action.icon === 'function'
+                                          ? action.icon(props.row)
+                                          : action.icon
+                                      } text-${getActionItemColor(
+                                        action,
+                                        props.row
+                                      )}`"
+                                      size="1.5rem"
+                                      tabindex="-1"
+                                    />
+                                  </q-item-section>
+                                  <q-item-section
+                                    :class="`text-caption-lg text-${getActionItemColor(
+                                      action,
+                                      props.row
+                                    )}`"
+                                    tabindex="0"
+                                  >
+                                    {{
+                                      typeof action.label === 'function'
+                                        ? action.label(props.row)
+                                        : action.label
+                                    }}
+                                  </q-item-section>
+                                </q-item>
+                              </template>
+                            </q-list>
+                          </template>
+                        </USheet>
+                      </template>
+                    </template>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-list>
+          </q-card>
+        </div>
+        <UExpansionStd
+          v-else
+          class="q-mb-sm u-expansion-table"
+          :caption="getExpansionCaption(props.row, props.cols)"
+          :enableIconToggle="enableIconToggle"
+          :label="getExpansionLabel(props.row, props.cols)"
+          :props="props"
+          :rowCardHeight="rowCardHeight"
+        >
+          <template #avatar>
+            <template v-if="props.cols">
+              <template v-for="(col, _colInd) in props.cols" :key="_colInd">
+                <template v-if="col.avatarKey && col.isPrimary">
+                  <UChip
+                    v-if="
+                      !isDesktop &&
+                      col.showAlignedChip &&
+                      typeof col.showAlignedChip === 'function' &&
+                      col.showAlignedChip(props.row)
+                    "
+                    v-model="tableDataChip"
+                    :class="[
+                      expansion ? 'q-ma-none' : 'q-mr-xs',
+                      col.showAlignedChip(props.row).class,
+                    ]"
+                    :avatarLabel="col.showAlignedChip(props.row).avatarLabel"
+                    :chipLabel="col.showAlignedChip(props.row).chipLabel"
+                    :dense="col.showAlignedChip(props.row).dense"
+                    :removable="col.showAlignedChip(props.row).removable"
+                    :type="col.showAlignedChip(props.row).type"
+                  />
+                  <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'"
+                      :indicatorColor="
+                        typeof col.indicatorColor === 'function' &&
+                        col.indicatorColor(props.row)
+                          ? col.indicatorColor(props.row)
+                          : ''
+                      "
+                      :indicatorIcon="
+                        typeof col.indicatorIcon === 'function' &&
+                        col.indicatorIcon(props.row)
+                          ? col.indicatorIcon(props.row)
+                          : ''
+                      "
+                      :name="`${props.row[col.avatarKey]?.value}`"
+                      :showIndicator="col.showIndicator"
+                      size="lg"
+                    />
+                    <UAvatar
+                      v-else-if="props.row[col.avatarKey]?.type === 'image'"
+                      :image="`${props.row[col.avatarKey]?.value}`"
+                      :indicatorColor="
+                        typeof col.indicatorColor === 'function' &&
+                        col.indicatorColor(props.row)
+                          ? col.indicatorColor(props.row)
+                          : ''
+                      "
+                      :indicatorIcon="
+                        typeof col.indicatorIcon === 'function' &&
+                        col.indicatorIcon(props.row)
+                          ? col.indicatorIcon(props.row)
+                          : ''
+                      "
+                      :name="
+                        props.row[col.avatarKey]?.name ??
+                        props.row[col.avatarKey]?.value
+                      "
+                      :showIndicator="col.showIndicator"
+                      size="lg"
+                    />
+                  </div>
+                  <div v-else class="table-data-avatar">
+                    <UAvatar
+                      :image="`${props.row[col.avatarKey]}`"
+                      :indicatorColor="
+                        typeof col.indicatorColor === 'function' &&
+                        col.indicatorColor(props.row)
+                          ? col.indicatorColor(props.row)
+                          : ''
+                      "
+                      :indicatorIcon="
+                        typeof col.indicatorIcon === 'function' &&
+                        col.indicatorIcon(props.row)
+                          ? col.indicatorIcon(props.row)
+                          : ''
+                      "
+                      :name="`${props.row[col.avatarKey]}`"
+                      :showIndicator="col.showIndicator"
+                      size="lg"
+                    />
+                  </div>
+                </template>
+              </template>
+            </template>
+          </template>
+
+          <template #body>
+            <div class="u-expansion-body">
+              <template v-for="(col, _indB) in props.cols" :key="_indB">
+                <!-- Skip the primary column -->
+                <template
+                  v-if="
+                    !col.isPrimary &&
+                    (typeof col.show === 'undefined' || col.show) &&
+                    col.field !== 'action'
+                  "
+                >
+                  <div class="col-12 col-sm-6">
+                    <!-- Label -->
+                    <div class="text-caption text-description">
+                      {{ col.label }}
+                    </div>
+                    <!-- Content -->
+                    <div class="flex items-center">
+                      <!-- Avatar (if present) -->
+                      <template v-if="col.avatarKey">
+                        <UChip
+                          v-if="
+                            !isDesktop &&
+                            col.showAlignedChip &&
+                            typeof col.showAlignedChip === 'function' &&
+                            col.showAlignedChip(props.row)
+                          "
+                          v-model="tableDataChip"
+                          :class="[
+                            expansion ? 'q-ma-none' : 'q-mr-xs',
+                            col.showAlignedChip(props.row).class,
+                          ]"
+                          :avatarLabel="
+                            col.showAlignedChip(props.row).avatarLabel
+                          "
+                          :chipLabel="col.showAlignedChip(props.row).chipLabel"
+                          :dense="col.showAlignedChip(props.row).dense"
+                          :removable="col.showAlignedChip(props.row).removable"
+                          :type="col.showAlignedChip(props.row).type"
+                        />
+                        <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'"
+                            :indicatorColor="
+                              typeof col.indicatorColor === 'function' &&
+                              col.indicatorColor(props.row)
+                                ? col.indicatorColor(props.row)
+                                : ''
+                            "
+                            :indicatorIcon="
+                              typeof col.indicatorIcon === 'function' &&
+                              col.indicatorIcon(props.row)
+                                ? col.indicatorIcon(props.row)
+                                : ''
+                            "
+                            :name="`${props.row[col.avatarKey]?.value}`"
+                            :showIndicator="col.showIndicator"
+                            size="md"
+                          />
+                          <UAvatar
+                            v-else-if="
+                              props.row[col.avatarKey]?.type === 'image'
+                            "
+                            :image="`${props.row[col.avatarKey]?.value}`"
+                            :indicatorColor="
+                              typeof col.indicatorColor === 'function' &&
+                              col.indicatorColor(props.row)
+                                ? col.indicatorColor(props.row)
+                                : ''
+                            "
+                            :indicatorIcon="
+                              typeof col.indicatorIcon === 'function' &&
+                              col.indicatorIcon(props.row)
+                                ? col.indicatorIcon(props.row)
+                                : ''
+                            "
+                            :name="
+                              props.row[col.avatarKey]?.name ??
+                              props.row[col.avatarKey]?.value
+                            "
+                            :showIndicator="col.showIndicator"
+                            size="md"
+                          />
+                          <span
+                            :class="[
+                              col.value ? 'long-text-content' : '',
+                              col.noEllipsis ? 'no-ellipsis-content' : '',
+                              col.doubleSpan && col.noEllipsis
+                                ? 'full-width-text-content'
+                                : '',
+                              !isResponsiveTablet &&
+                              isTablet &&
+                              col.classes &&
+                              col.classes.length > 0 &&
+                              col.classes[0] === 'no-wrap-text'
+                                ? 'tablet-event-text'
+                                : '',
+                              typeof col.combineColoumn === 'function' &&
+                              col.combineColoumn(props.row)
+                                ? 'combine-col-small-device-wrapper'
+                                : '',
+                            ]"
+                            :id="`long-content-${col.field}-${props.row.id}`"
+                          >
+                            {{ col.value }}
+                            <template
+                              v-if="
+                                typeof col.combineColoumn === 'function' &&
+                                col.combineColoumn(props.row)
+                              "
+                            >
+                              <template
+                                v-for="(
+                                  combineCol, colKey
+                                ) in col.combineColoumn(props.row)"
+                                :key="colKey"
+                              >
+                                <q-icon
+                                  v-if="combineCol.icon"
+                                  :class="combineCol.icon"
+                                  :alt="combineCol.ariaLabel"
+                                  :aria-label="combineCol.ariaLabel"
+                                  :color="combineCol?.iconColor ?? 'primary'"
+                                  :key="colKey"
+                                  size="1rem"
+                                />
+                                <div v-else>
+                                  {{ props.row[combineCol.key] }}
+                                </div>
+                              </template>
+                            </template>
+                          </span>
+                          <UTooltip
+                            v-if="
+                              col.value &&
+                              col.value.length > 12 &&
+                              isContentVisible(
+                                col.field,
+                                props.row.id,
+                                'content'
+                              )
+                            "
+                            anchor="bottom middle"
+                            :description="col.value"
+                            :offset="[10, 40]"
+                            self="bottom middle"
+                            :target="`#long-content-${col.field}-${props.row.id}`"
+                          />
+                        </div>
+                        <div v-else class="table-data-avatar">
+                          <UAvatar
+                            :image="`${props.row[col.avatarKey]}`"
+                            :indicatorColor="
+                              typeof col.indicatorColor === 'function' &&
+                              col.indicatorColor(props.row)
+                                ? col.indicatorColor(props.row)
+                                : ''
+                            "
+                            :indicatorIcon="
+                              typeof col.indicatorIcon === 'function' &&
+                              col.indicatorIcon(props.row)
+                                ? col.indicatorIcon(props.row)
+                                : ''
+                            "
+                            :name="`${props.row[col.avatarKey]}`"
+                            :showIndicator="col.showIndicator"
+                            size="lg"
+                          />
+                        </div>
+                      </template>
+                      <!-- Chip -->
+                      <UChip
+                        v-else-if="col.chipValues && col.chipValues.length > 0"
+                        v-model="tableDataChip"
+                        class="u-table-chip"
+                        :anchor="col.anchor"
+                        avatarLabel=""
+                        :chipLabel="props.row[col.field]?.toString()"
+                        :dense="isMobile || isTablet ? true : col.denseChip"
+                        :is-show-tooltip="col.showChipTooltip"
+                        :offset="col.offset"
+                        :removable="false"
+                        :type="
+                          getChipColor(col.chipValues, props.row[col.field])
+                        "
+                      />
+                      <!-- Icon -->
+                      <q-icon
+                        v-else-if="col.type === 'icon' && props.row[col.field]"
+                        :class="props.row[col.field]"
+                        :alt="props.row.ariaLabel"
+                        :aria-label="props.row.ariaLabel"
+                        :color="props?.row?.iconColor ?? 'primary'"
+                        size="1.5rem"
+                      />
+                      <!-- Text -->
+                      <span v-else class="text-body-sm">
+                        {{ props.row[col.field] }}
+                      </span>
+                    </div>
+                    <!-- Caption (if any) -->
+                    <div
+                      v-if="col.captionKey"
+                      class="td-caption mobile-primary-caption text-body-sm"
+                    >
+                      <template v-if="col.captionKeyTitle">
+                        {{ col.captionKeyTitle }}:
+                      </template>
+                      {{ props.row[col.captionKey] }}
+                    </div>
+                  </div>
+                </template>
+              </template>
+            </div>
+            <!-- Actions Footer -->
+          </template>
+          <template #footer>
+            <div class="row">
+              <template v-for="(col, _indF) in props.cols" :key="_indF">
+                <template v-if="col.actions && col.actions.length">
+                  <!-- Single Action -->
+                  <template v-if="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
+                        "
+                        class="full-width"
+                        :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
+                        "
+                        :label="
+                          typeof action.label === 'function'
+                            ? action.label(props.row)
+                            : action.label
+                        "
+                        :leftIcon="
+                          typeof action.icon === 'function'
+                            ? action.icon(props.row)
+                            : action.icon
+                        "
+                        :loading="
+                          typeof action.loading === 'function'
+                            ? action.loading(props.row)
+                            : action.loading
+                        "
+                        :outline="
+                          typeof action.outline === 'function'
+                            ? action.outline(props.row)
+                            : action.outline
+                        "
+                        :size="action.size"
+                        @on-click="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>
+                  <!-- Multiple Actions -->
+                  <template v-else-if="col.actions.length > 1">
+                    <q-dialog
+                      v-if="
+                        isTablet &&
+                        moreActionDialogData &&
+                        moreActionDialogData.showDialog[props.row.id]
+                      "
+                      v-model="moreActionDialogData.showDialog[props.row.id]"
+                      class="more-action-popup"
+                      persistent
+                    >
+                      <q-card
+                        class="more-action-popup-wrapper confirmation-dialog-wrapper q-px-ba q-py-ba"
+                      >
+                        <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-dialog>
+
+                    <UBtnStd
+                      v-if="!isMobile"
+                      class="full-width"
+                      color="primary"
+                      full-width
+                      :id="`actionPopupRefBtn-${props.row.id}`"
+                      :label="viewMoreLabel"
+                      outline
+                    >
+                      <template #menu>
+                        <q-menu
+                          class="more-action-popup"
+                          auto-close
+                          fit
+                          :id="`actionPopupRef-${props.row.id}`"
+                          :offset="[10, 20]"
+                          transition-hide="jump-up"
+                          transition-show="jump-down"
+                          @show="checkMenuPosition(props.row.id)"
+                        >
+                          <div :class="tailClass" />
+                          <div
+                            class="q-pt-ba q-px-ba q-pb-none text-heading-xxs text-dark"
+                          >
+                            Select More Options
+                          </div>
+                          <q-list class="grid-more-action">
+                            <template v-for="(action, __i) in col.actions">
+                              <q-item
+                                v-if="
+                                  typeof action.hide === 'function'
+                                    ? !action.hide(props.row)
+                                    : true
+                                "
+                                class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                :aria-label="
+                                  typeof action.label === 'function'
+                                    ? action.label(props.row)
+                                    : action.label
+                                "
+                                clickable
+                                :key="__i"
+                                tabindex="-1"
+                                @click="action.handler(props.row)"
+                              >
+                                <q-item-section class="q-pr-xs" avatar>
+                                  <q-icon
+                                    v-if="
+                                      typeof action.icon === 'function'
+                                        ? action.icon(props.row)
+                                        : action.icon
+                                    "
+                                    :class="`${
+                                      typeof action.icon === 'function'
+                                        ? action.icon(props.row)
+                                        : action.icon
+                                    } text-${getActionItemColor(
+                                      action,
+                                      props.row
+                                    )}`"
+                                    size="1.5rem"
+                                    tabindex="-1"
+                                  />
+                                </q-item-section>
+                                <q-item-section
+                                  :class="`text-caption-lg text-${getActionItemColor(
+                                    action,
+                                    props.row
+                                  )}`"
+                                  tabindex="0"
+                                >
+                                  {{
+                                    typeof action.label === 'function'
+                                      ? action.label(props.row)
+                                      : action.label
+                                  }}
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-list>
+                        </q-menu>
+                      </template>
+                    </UBtnStd>
+                    <template v-if="isMobile">
+                      <UBtnStd
+                        color="primary"
+                        full-width
+                        :id="`view-more-actions-${props.row['id']}`"
+                        :label="viewMoreLabel"
+                        class="full-width"
+                        outline
+                        @on-click="handleOpenMobileMoreActions(props.row['id'])"
+                      />
+                      <USheet
+                        v-if="
+                          moreActionDialogData &&
+                          moreActionDialogData.showDialog[props.row.id]
+                        "
+                        v-model:dialogs="mobileActionsDialog[props.row['id']]"
+                        :close-icon-label="closeIconLabel"
+                        :heading="moreActionDialogData.row.title"
+                        :is-left-icon="false"
+                        :show-action-buttons="true"
+                      >
+                        <template #content>
+                          <q-card
+                            class="more-action-popup-wrapper confirmation-dialog-wrapper mobile-confirmation-dialog q-px-ba q-py-ba"
+                          >
+                            <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>
+                            </q-card-section>
+                          </q-card>
+                        </template>
+                        <template
+                          v-if="
+                            moreActionDialogData &&
+                            moreActionDialogData.showDialog[props.row.id] &&
+                            moreActionDialogData.secondaryAction
+                          "
+                          #action_primary_one
+                        >
+                          <UBtnStd
+                            :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
+                              )
+                            "
+                          />
+                        </template>
+                        <template
+                          v-if="
+                            moreActionDialogData &&
+                            moreActionDialogData.showDialog[props.row.id] &&
+                            moreActionDialogData.primaryAction
+                          "
+                          #action_primary_two
+                        >
+                          <UBtnStd
+                            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
+                              )
+                            "
+                          />
+                        </template>
+                      </USheet>
+                      <USheet
+                        v-model:dialogs="moreActionsDialogs[props.row['id']]"
+                        :close-icon-label="closeIconLabel"
+                        :heading="selectMoreOptions"
+                        :is-left-icon="false"
+                        :show-action-buttons="false"
+                      >
+                        <template #content>
+                          <q-list class="mobile-grid-more-action">
+                            <template v-for="(action, __i) in col.actions">
+                              <q-item
+                                v-if="
+                                  typeof action.hide === 'function'
+                                    ? !action.hide(props.row)
+                                    : true
+                                "
+                                class="q-px-sm q-py-ba bg-neutral-2 q-mb-xs"
+                                :aria-label="
+                                  typeof action.label === 'function'
+                                    ? action.label(props.row)
+                                    : action.label
+                                "
+                                clickable
+                                :key="__i"
+                                tabindex="-1"
+                                @click="handleItemClick(action, props.row)"
+                              >
+                                <q-item-section class="q-pr-xs" avatar>
+                                  <q-icon
+                                    v-if="
+                                      typeof action.icon === 'function'
+                                        ? action.icon(props.row)
+                                        : action.icon
+                                    "
+                                    :class="`${
+                                      typeof action.icon === 'function'
+                                        ? action.icon(props.row)
+                                        : action.icon
+                                    } text-${getActionItemColor(
+                                      action,
+                                      props.row
+                                    )}`"
+                                    size="1.5rem"
+                                    tabindex="-1"
+                                  />
+                                </q-item-section>
+                                <q-item-section
+                                  :class="`text-caption-lg text-${getActionItemColor(
+                                    action,
+                                    props.row
+                                  )}`"
+                                  tabindex="0"
+                                >
+                                  {{
+                                    typeof action.label === 'function'
+                                      ? action.label(props.row)
+                                      : action.label
+                                  }}
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-list>
+                        </template>
+                      </USheet>
+                    </template>
+                  </template>
+                </template>
+              </template>
+            </div>
+          </template>
+        </UExpansionStd>
+      </template>
+
+      <template v-if="infiniteScroll && isScrollActionActive" #bottom>
+        <div
+          v-if="infiniteScrollProp.loading"
+          :class="`relative-position full-width row justify-center ${
+            grid ? `q-mt-ms q-mb-xs` : `q-py-lg`
+          }`"
+        >
+          <UInnerLoader
+            v-if="infiniteScrollProp.type == 'default'"
+            image="/images/logo.svg"
+            :loading="infiniteScrollProp.loading"
+            :loading-message="infiniteScrollProp.loadingMessage"
+            :spinner-color="infiniteScrollProp.color"
+            :spinner-size="infiniteScrollProp.size"
+          />
+          <q-spinner
+            v-if="infiniteScrollProp.type == 'spinner'"
+            :color="infiniteScrollProp.color"
+            :size="infiniteScrollProp.size"
+          />
+        </div>
+        <div
+          v-if="infiniteScrollProp?.noMoreData && infiniteNoMoreShow"
+          :class="`row full-width justify-center text-accent q-gutter-sm ${
+            grid ? `q-mt-xs q-mb-ba` : `q-py-lg`
+          }`"
+        >
+          <span>{{ infiniteScrollProp.noMoreDataText }}</span>
+        </div>
+      </template>
+    </q-table>
+  </component>
+</template>