@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

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

@@ -1,9 +1,59 @@
 <script setup>
+import { useQuasar } from 'quasar'
+import { computed, 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 USheet from '../USheet.vue'
+import UTooltip from '../UTooltip.vue'
+
+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({
-  title: {
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  filter: {
     type: String,
     default: '',
   },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  rowCardHeight: {
+    type: Number,
+    default: 25,
+  },
   rowKey: {
     type: String,
     default: 'name',
@@ -12,67 +62,176 @@ const props = defineProps({
     type: String,
     default: 'horizontal',
   },
-  flat: {
+  showPagination: {
     type: Boolean,
-    default: false,
+    default: true,
   },
-  bordered: {
+  stickyHeader: {
     type: Boolean,
     default: false,
   },
-  grid: {
-    type: Boolean,
-    default: false,
+  title: {
+    type: String,
+    default: '',
   },
   virtualScroll: {
     type: Boolean,
     default: false,
   },
-  stickyHeader: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const pagination = defineModel('pagination', {
-  default: null,
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: null,
-  type: Boolean,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
+const $q = useQuasar()
+const $screen = useScreenType()
+
+const mobileActionsDialog = ref({})
+const moreActionsDialogs = ref({})
+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)
+
+// 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 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'
+  }
+}
+
+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
+}
+
+// checking for tooltip is content is visible
+const isContentVisible = (field, id, type) => {
+  return document.getElementById(`long-${type}-${field}-${id}`)
+}
+
+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>
   <q-table
     v-bind="$attrs"
-    :title="title"
+    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"
-    :rows="rows"
-    :row-key="rowKey"
+    :filter="filter"
+    :filter-method="filterMethod"
     :flat="flat"
-    :bordered="bordered"
-    :separator="separator"
-    :loading="loading"
-    hide-pagination
     :grid="grid"
-    :class="`u-table ${virtualScroll ? 'u-virtualscroll-table' : ''} ${
-      grid ? 'u-virtualscroll-grid-table' : ''
-    } ${stickyHeader ? 'u-sticky-table-header' : ''} ${
-      pagination.rowsPerPage < 50 ? 'force-auto-height-table' : ''
-    }`"
-    :virtual-scroll="!grid && virtualScroll"
-    v-model:pagination="pagination"
+    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"
   >
@@ -81,7 +240,617 @@ const columns = defineModel('columns', {
       v-slot:[slotName]="scope"
       :key="index"
     >
-      <slot :name="slotName" v-bind="{ ...scope }" />
+      <slot v-bind="{ ...scope }" :name="slotName" />
+    </template>
+    <template v-slot:item="props">
+      <div
+        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 v-if="col.avatarKey">
+                        <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="lg"
+                          />
+                          <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="lg"
+                          />
+                        </div>
+                        <div v-else class="table-data-avatar">
+                          <UAvatar
+                            :image="`${props.row[col.avatarKey]}`"
+                            :name="`${props.row[col.avatarKey]}`"
+                            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'
+                              : '',
+                          ]"
+                          :id="`long-content-${col.field}-${props.row.id}`"
+                        >
+                          {{ col.value }}
+                        </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-md"
+                          :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="View More"
+                      outline
+                    >
+                      <template #menu>
+                        <q-menu
+                          class="more-action-popup"
+                          auto-close
+                          fit
+                          :id="`actionPopupRef-${props.row.id}`"
+                          :offset="[10, 20]"
+                          transition-show="jump-down"
+                          transition-hide="jump-up"
+                          @show="checkMenuPosition(props.row.id)"
+                        >
+                          <div :class="tailClass"></div>
+                          <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="View More"
+                        outline
+                        @on-click="handleOpenMobileMoreActions(props.row['id'])"
+                      />
+                      <USheet
+                        v-if="
+                          moreActionDialogData &&
+                          moreActionDialogData.showDialog[props.row.id]
+                        "
+                        v-model:dialogs="mobileActionsDialog[props.row['id']]"
+                        closeIconLabel="Close Icon"
+                        :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']]"
+                        closeIconLabel="Close Icon"
+                        heading="Select More Options"
+                        :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>
     </template>
   </q-table>
 </template>