@usssa/component-library 1.0.0-alpha.93 → 1.0.0-alpha.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.93",
+  "version": "1.0.0-alpha.95",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UDrawer.vue

@@ -6,6 +6,16 @@ import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
 import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
+const miniState = defineModel('miniState', {
+  default: false,
+  type: Boolean,
+})
+const open = defineModel('open', {
+  default: false,
+  type: Boolean,
+})
 const props = defineProps({
   menu: {
     default: () => [],
@@ -23,32 +33,15 @@ const props = defineProps({
     type: String,
   },
 })
-const emit = defineEmits(['menuItemClicked', 'closeDrawer'])
-const open = defineModel('open', {
-  default: false,
-  type: Boolean,
-})
-const miniState = defineModel('miniState', {
-  default: false,
-  type: Boolean,
-})
 
 const $router = useRouter()
-const currentRoute = computed(() => $router.currentRoute.value.fullPath)
 const currentPath = computed(() => getCurrentPath())
+const currentRoute = computed(() => $router.currentRoute.value.fullPath)
 
 const getCurrentPath = (int = 1) => {
   return currentRoute.value.split('/')[int]
 }
 
-const handleClick = (menu) => {
-  emit('menuItemClicked', menu)
-}
-
-const handleCloseDrawer = () => {
-  emit('closeDrawer')
-}
-
 /**
  * returning x offset for tooltip for long text
  * @param {*} label
@@ -57,6 +50,14 @@ const getXOffset = (label) => {
   let labelLength = label.trim().length
   return labelLength <= 4 ? 65 : labelLength < 9 ? 85 : 145
 }
+
+const handleClick = (menu) => {
+  emit('menuItemClicked', menu)
+}
+
+const handleCloseDrawer = () => {
+  emit('closeDrawer')
+}
 </script>
 <template>
   <q-drawer
@@ -65,14 +66,14 @@ const getXOffset = (label) => {
     :breakpoint="400"
     :mini="miniState"
     :mini-width="64"
-    side="left"
     show-if-above
+    side="left"
     :width="224"
   >
     <q-scroll-area class="u-drawer-scrollable-area">
       <div
         :class="`flex items-center justify-${
-          miniState ? 'center q-py-sm' : 'between q-py-xs q-pl-ba q-pr-xxs'
+          miniState ? 'center q-py-xs' : 'between q-py-xs q-pl-ba q-pr-xxs'
         } `"
       >
         <UBtnStd
@@ -102,10 +103,10 @@ const getXOffset = (label) => {
           class="drawer-open-close-icon-wrapper flex items-center justify-center"
         >
           <UBtnIcon
+            iconClass="fa-kit-duotone fa-sidebar-shrink"
             ariaLabel="Sidebar shrink icon"
             color="primary"
             dense
-            iconClass="fa-kit-duotone fa-sidebar-shrink"
             ref="btn-icon"
             size="sm"
             @click="handleCloseDrawer"
@@ -132,7 +133,7 @@ const getXOffset = (label) => {
             @onClick="handleClick(m)"
           >
             <template v-if="!miniState" #trailing_slot>
-              <UBadgeStd v-if="m.badgeInfo" size="lg" :label="m.badgeInfo" />
+              <UBadgeStd v-if="m.badgeInfo" :label="m.badgeInfo" size="lg" />
               <q-icon
                 v-if="m.rightIcon"
                 :class="`${m.rightIcon} ${
@@ -146,12 +147,12 @@ const getXOffset = (label) => {
             </template>
           </UMenuItem>
           <UTooltip
-            :description="m.label"
             v-if="miniState"
-            :target="`#u-drawer-menu-${i}`"
             anchor="center right"
-            self="center right"
+            :description="m.label"
             :offset="[getXOffset(m.label), 20]"
+            self="center right"
+            :target="`#u-drawer-menu-${i}`"
           />
         </template>
       </q-list>

package/src/components/core/UMenuDropdown.vue

@@ -26,13 +26,13 @@ const props = defineProps({
   <q-list :class="`u-menu-dropdown size-${size} ${menuClass} q-gutter-y-xxs`">
     <template v-for="(item, index) in data" :key="index">
       <UMenuItem
+        :iconClass="iconClass"
+        :destructive="item.destructive"
+        :disable="item.disable"
+        :hide="item.hide"
         :label="item.label"
         :leftIcon="item.leftIcon"
         :rightIcon="item.rightIcon"
-        :destructive="item.destructive"
-        :iconClass="iconClass"
-        :hide="item.hide"
-        :disable="item.disable"
         @onClick="item.handler"
       >
         <template #leading_slot>

package/src/components/core/UMenuItem.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from 'vue'
 
+const emit = defineEmits(['onClick'])
 const props = defineProps({
   leftIcon: {
     type: String,
@@ -32,8 +33,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['onClick'])
-
 const type = ref(props.destructive ? 'destructive' : 'default')
 
 /* Computed variables */
@@ -98,9 +97,9 @@ watch(
     <q-item-section v-if="rightIcon" side>
       <q-icon
         :class="`${rightIcon} ${iconClass}`"
+        :aria-hidden="true"
         :color="iconColor"
         size="1rem"
-        :aria-hidden="true"
       />
     </q-item-section>
     <slot name="trailing_slot"></slot>

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

@@ -1,4 +1,21 @@
 <script setup>
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  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 props = defineProps({
   title: {
     type: String,
@@ -37,38 +54,12 @@ const props = defineProps({
     default: true,
   },
 })
-
-const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: null,
-  type: Boolean,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
 </script>
 
 <template>
   <q-table
+    v-model:pagination="pagination"
     v-bind="$attrs"
-    :title="title"
-    :columns="columns"
-    :rows="rows"
-    :row-key="rowKey"
-    :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' : ''} ${
@@ -76,9 +67,18 @@ const columns = defineModel('columns', {
         ? 'force-auto-height-table'
         : ''
     }`"
-    :virtual-scroll="!grid && virtualScroll"
-    v-model:pagination="pagination"
+    :bordered="bordered"
+    :columns="columns"
+    :flat="flat"
+    :grid="grid"
+    hide-pagination
+    :loading="loading"
+    :separator="separator"
+    :rows="rows"
+    :row-key="rowKey"
     :rows-per-page-options="[0]"
+    :title="title"
+    :virtual-scroll="!grid && virtualScroll"
     :virtual-scroll-item-size="48"
     :virtual-scroll-sticky-size-start="48"
   >

package/src/components/core/UTableStd.vue

@@ -12,6 +12,31 @@ import UTd from './UTable/UTd.vue'
 import UTh from './UTable/UTh.vue'
 import UTr from './UTable/UTr.vue'
 
+const emit = defineEmits(['onCustomSort'])
+const selectedRows = defineModel('selectedRows', {
+  default: () => [],
+  type: Array,
+})
+const rows = defineModel('rows', {
+  default: () => [],
+  type: Array,
+})
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
+})
+const loading = defineModel('loading', {
+  default: () => {},
+  type: Boolean,
+})
+const moreActionDialogData = defineModel('moreActionDialogData', {
+  type: Object,
+  default: null,
+})
 const props = defineProps({
   title: {
     type: String,
@@ -67,29 +92,6 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['onCustomSort'])
-
-const selectedRows = defineModel('selectedRows', {
-  default: () => [],
-  type: Array,
-})
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
-})
-const columns = defineModel('columns', {
-  default: () => [],
-  type: Array,
-})
-const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
-  type: Object,
-})
-const loading = defineModel('loading', {
-  default: () => {},
-  type: Boolean,
-})
-
 const customLoading = ref(false)
 const rowsPerPageOptions = ref([
   { label: '5 / per page', value: 5 },
@@ -99,9 +101,7 @@ const rowsPerPageOptions = ref([
   { label: '25 / per page', value: 25 },
 ])
 const tableDataChip = ref(true) // this is required to show chip
-const openMenu = ref([])
-const hoveringButton = ref({})
-const hoveringMenu = ref({})
+const tailClass = ref(null)
 
 // if virtual scroll is enbaled then adding large rows per page to view in virtual scroll
 const getRowsPerPageOptions = computed(() => {
@@ -117,18 +117,39 @@ const getRowsPerPageOptions = computed(() => {
   }
 })
 
-//adding a new row to selectedRows
-const handleToSelectRow = (row) => {
-  if (row) {
-    const index = selectedRows.value.findIndex((item) => item._id === row._id)
-    if (index === -1) {
-      selectedRows.value.push(row)
+// chekcing the menu position after show
+const checkMenuPosition = (id) => {
+  const menuElement = document.getElementById(`actionPopupRef-${id}`) // Access the menu by ID
+  const buttonElement = document.getElementById(`actionPopupRefBtn-${id}`) // Access the button element
+
+  if (menuElement && buttonElement) {
+    const menuRect = menuElement.getBoundingClientRect() // Menu position
+    const buttonRect = buttonElement.getBoundingClientRect() // Button position
+
+    // Determine if the menu opens above or below
+    if (menuRect.top < buttonRect.top) {
+      tailClass.value = 'tail-bottom' // Menu opens below, tail at the bottom
     } else {
-      selectedRows.value.splice(index, 1)
+      tailClass.value = 'tail-top' // Menu opens above, tail at the top
     }
   }
 }
 
+// sorting funtion to handle text and number type of data
+const dataSort = (data, key, order, type) => {
+  if (type === 'text') {
+    return data.sort((a, b) =>
+      order === 'asc'
+        ? a[key].localeCompare(b[key])
+        : b[key].localeCompare(a[key])
+    )
+  } else {
+    return data.sort((a, b) =>
+      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
+    )
+  }
+}
+
 //getting the sorted icon according the order
 const getSortingIcon = (col) => {
   if (col) {
@@ -140,47 +161,31 @@ const getSortingIcon = (col) => {
   }
 }
 
-// it is giving the selected row and setting the new selection
-const isRowSelected = (row) => {
-  if (row) {
-    const index = selectedRows.value.findIndex((item) => item._id === row._id)
-    return computed({
-      get: () => {
-        return index === -1 ? false : true
-      },
-      set: () => {
-        if (index === -1) {
-          selectedRows.value.push(row)
-        } else {
-          selectedRows.value.splice(index, 1)
-        }
-      },
-    })
+//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 computed({
-      get: () => {
-        let dataLength = props.rows.length
-        return selectedRows.value.length === dataLength
-          ? true
-          : selectedRows.value.length === 0
-          ? false
-          : null
-      },
-      set: (value) => {
-        if (value !== null) {
-          selectedRows.value.splice(0, selectedRows.value.length)
-        } else {
-          handleSelectAllData().then((res) => {
-            if (res === 200) {
-              customLoading.value = false
-            }
-          })
-        }
-      },
-    })
+    return 'neutral-3'
   }
 }
 
+const handleActionColClick = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+const handleMenuEventStop = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+//if user want to add custom sort on data
+const handleCustomSort = (key, sortOrder, type) => {
+  emit('onCustomSort', key, sortOrder, type)
+}
+
 // handling the large selection data in chunks
 const handleSelectAllData = () => {
   customLoading.value = true
@@ -211,21 +216,6 @@ const handleSelectAllData = () => {
   })
 }
 
-// sorting funtion to handle text and number type of data
-const dataSort = (data, key, order, type) => {
-  if (type === 'text') {
-    return data.sort((a, b) =>
-      order === 'asc'
-        ? a[key].localeCompare(b[key])
-        : b[key].localeCompare(a[key])
-    )
-  } else {
-    return data.sort((a, b) =>
-      order === 'asc' ? a[key] - b[key] : b[key] - a[key]
-    )
-  }
-}
-
 //it is sorting the data according to type like text or number type of data
 const handleSort = (key, sortOrder, type) => {
   rows.value = dataSort(rows.value, key, sortOrder, type)
@@ -236,26 +226,56 @@ const handleSort = (key, sortOrder, type) => {
   })
 }
 
-//if user want to add custom sort on data
-const handleCustomSort = (key, sortOrder, type) => {
-  emit('onCustomSort', key, sortOrder, type)
-}
-
 //adding a new row to selectedRows
-const onRowClick = (event, row) => {
-  if (props.multiSelection) {
-    event.stopPropagation()
-    handleToSelectRow(row)
+const handleToSelectRow = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    if (index === -1) {
+      selectedRows.value.push(row)
+    } else {
+      selectedRows.value.splice(index, 1)
+    }
   }
 }
 
-//getting the 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']
+// it is giving the selected row and setting the new selection
+const isRowSelected = (row) => {
+  if (row) {
+    const index = selectedRows.value.findIndex((item) => item._id === row._id)
+    return computed({
+      get: () => {
+        return index === -1 ? false : true
+      },
+      set: () => {
+        if (index === -1) {
+          selectedRows.value.push(row)
+        } else {
+          selectedRows.value.splice(index, 1)
+        }
+      },
+    })
   } else {
-    return 'neutral-3'
+    return computed({
+      get: () => {
+        let dataLength = props.rows.length
+        return selectedRows.value.length === dataLength
+          ? true
+          : selectedRows.value.length === 0
+          ? false
+          : null
+      },
+      set: (value) => {
+        if (value !== null) {
+          selectedRows.value.splice(0, selectedRows.value.length)
+        } else {
+          handleSelectAllData().then((res) => {
+            if (res === 200) {
+              customLoading.value = false
+            }
+          })
+        }
+      },
+    })
   }
 }
 
@@ -264,70 +284,51 @@ const onPageChange = (value) => {
   pagination.value.page = value
 }
 
-//handle to change the rows per page
-const onRowPerPageChange = (value) => {
-  pagination.value.rowsPerPage = value
-}
-
-const handleMenuEventStop = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-const handleMouseEnter = (type, index) => {
-  if (type === 'button') {
-    hoveringButton.value[index] = true
-  } else {
-    hoveringMenu.value[index] = true
+//adding a new row to selectedRows
+const onRowClick = (event, row) => {
+  if (props.multiSelection) {
+    event.stopPropagation()
+    handleToSelectRow(row)
   }
-  openMenu.value[index] = true
 }
 
-const handleMouseLeave = (type, index) => {
-  if (type === 'button') {
-    hoveringButton.value[index] = false
-  } else {
-    hoveringMenu.value[index] = false
-  }
-  setTimeout(() => {
-    if (!hoveringButton.value[index] && !hoveringMenu.value[index]) {
-      openMenu.value[index] = false
-    }
-  }, 100)
+//handle to change the rows per page
+const onRowPerPageChange = (value) => {
+  pagination.value.rowsPerPage = value
 }
 </script>
 
 <template>
   <UTable
-    :title="title"
-    v-model:rows="rows"
     v-model:columns="columns"
-    :separator="separator"
-    :loading="loading"
-    :flat="flat"
-    :bordered="bordered"
     v-model:pagination="pagination"
-    :grid="grid"
-    :virtualScroll="virtualScroll"
-    :stickyHeader="stickyHeader"
+    v-model:rows="rows"
     :class="customClass"
+    :bordered="bordered"
+    :flat="flat"
+    :grid="grid"
+    :loading="loading"
+    :separator="separator"
     :showPagination="showPagination"
+    :stickyHeader="stickyHeader"
+    :title="title"
+    :virtualScroll="virtualScroll"
   >
     <!-- custom header slot to add customized header -->
     <template v-slot:header="props">
       <UTr :props="props" :tableRowHover="tableRowHover">
         <UTh
           v-if="multiSelection"
+          :separator="separator"
           style="width: 3% !important"
           :tableHeaderAutoWidth="false"
           tableHeadAlignment="left"
-          :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-table-header`"
             v-model="isRowSelected(null).value"
-            name="Table Header"
+            id="u-checkbox-table-header"
             :indeterminate="true"
+            name="Table Header"
           />
         </UTh>
         <template v-for="(col, key) in props.cols">
@@ -337,6 +338,8 @@ const handleMouseLeave = (type, index) => {
               col.headerClasses
             }`"
             :key="key"
+            :separator="separator"
+            :style="col.headerStyle"
             :tableHeaderAutoWidth="col.autoWidth"
             :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
             @click="
@@ -346,8 +349,6 @@ const handleMouseLeave = (type, index) => {
                   : handleSort(col.field, col.sortOrder, col.type)
                 : null
             "
-            :separator="separator"
-            :style="col.headerStyle"
           >
             <span
               :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
@@ -359,8 +360,8 @@ const handleMouseLeave = (type, index) => {
               <UBtnIcon
                 :class="`more-action-icon cursor-pointer`"
                 :iconClass="`${getSortingIcon(col)}`"
-                ref="btn-icon"
                 :aria-label="`Sort ${col.label}`"
+                ref="btn-icon"
                 size="sm"
               />
             </span>
@@ -379,16 +380,17 @@ const handleMouseLeave = (type, index) => {
         <UTd
           v-if="multiSelection"
           :index="-1"
+          :separator="separator"
           tableDataAlignment="left"
           :tableHeaderAutoWidth="false"
-          :separator="separator"
         >
           <UCheckboxStd
-            :id="`u-checkbox-${props.row._id}`"
             v-model="isRowSelected(props.row).value"
+            :id="`u-checkbox-${props.row._id}`"
             :name="props.row._id"
           />
         </UTd>
+
         <template v-for="(col, index) in props.cols" :key="index">
           <!-- to show the cell data without the action cell -->
           <UTd
@@ -396,28 +398,28 @@ const handleMouseLeave = (type, index) => {
               col.field !== 'action' &&
               (typeof col.show === 'undefined' || col.show)
             "
-            :row="props.row"
+            :class="col.classes"
             :col="col"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="col.autoWidth"
+            :row="props.row"
             :separator="separator"
             :style="col.style"
-            :class="col.classes"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="col.autoWidth"
           >
             <!-- to show the chips with different variant -->
             <template v-if="col.chipValues && col.chipValues.length > 0">
               <UChip
                 v-model="tableDataChip"
-                :type="getChipColor(col.chipValues, props.row[col.field])"
+                class="u-table-chip"
                 avatarLabel=""
+                :anchor="col.anchor"
                 :chipLabel="props.row[col.field].toString()"
-                :removable="false"
-                class="u-table-chip"
+                :dense="col.denseChip"
                 :is-show-tooltip="col.showChipTooltip"
                 :offset="col.offset"
-                :anchor="col.anchor"
-                :dense="col.denseChip"
+                :removable="false"
+                :type="getChipColor(col.chipValues, props.row[col.field])"
               />
             </template>
             <!-- to show the avatar of user image with name and other details -->
@@ -432,29 +434,29 @@ const handleMouseLeave = (type, index) => {
                 >
                   <UAvatar
                     v-if="props.row[col.avatarKey]?.type === 'initials'"
-                    size="md"
                     :name="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                   <UAvatar
                     v-else-if="props.row[col.avatarKey]?.type === 'image'"
-                    size="md"
+                    :image="`${props.row[col.avatarKey]?.value}`"
                     :name="
                       props.row[col.avatarKey]?.name ??
                       props.row[col.avatarKey]?.value
                     "
-                    :image="`${props.row[col.avatarKey]?.value}`"
+                    size="md"
                   />
                 </div>
                 <div v-else class="table-data-avatar">
                   <UAvatar
-                    size="md"
-                    :name="`${props.row[col.avatarKey]}`"
                     :image="`${props.row[col.avatarKey]}`"
+                    :name="`${props.row[col.avatarKey]}`"
+                    size="md"
                   />
                 </div>
                 <div class="td-grid-content">
                   <div>{{ props.row[col.field] }}</div>
-                  <div class="td-caption text-body-xs" v-if="col.captionKey">
+                  <div v-if="col.captionKey" class="td-caption text-body-xs">
                     {{ props.row[col.captionKey] }}
                   </div>
                 </div>
@@ -478,8 +480,8 @@ const handleMouseLeave = (type, index) => {
                   </template>
                 </div>
                 <div
-                  class="td-caption text-body-xs"
                   v-if="col.captionKey && col.type !== 'icon'"
+                  class="td-caption text-body-xs"
                 >
                   {{ props.row[col.captionKey] }}
                 </div>
@@ -492,11 +494,12 @@ const handleMouseLeave = (type, index) => {
             v-else-if="typeof col.show === 'undefined' || col.show"
             :class="col.classes"
             :index="index"
-            :tableDataAlignment="col.align"
-            :tableDataAutoWidth="false"
-            style="width: 3%"
             :separator="separator"
             :style="col.style"
+            style="width: 3%"
+            :tableDataAlignment="col.align"
+            :tableDataAutoWidth="false"
+            @click="handleActionColClick"
           >
             <template v-if="col.actions && col.actions.length === 1">
               <template v-for="(action, key) in col.actions" :key="key">
@@ -506,16 +509,16 @@ const handleMouseLeave = (type, index) => {
                       ? !action.hide(props.row)
                       : true
                   "
-                  :key="key"
-                  :label="action.label"
-                  :flat="action.flat"
-                  :outline="action.outline"
-                  :leftIcon="action.icon"
                   :color="action.color"
                   :disable="
                     typeof action.disable === 'function' &&
                     action.disable(props.row)
                   "
+                  :flat="action.flat"
+                  :key="key"
+                  :label="action.label"
+                  :leftIcon="action.icon"
+                  :outline="action.outline"
                   :size="action.size"
                   @onClick="action.handler(props.row)"
                 />
@@ -523,31 +526,102 @@ const handleMouseLeave = (type, index) => {
             </template>
             <!-- to show the actions list if the actions are multiple -->
             <template v-else>
+              <q-menu
+                v-if="moreActionDialogData.showDialog[props.row.id]"
+                v-model="moreActionDialogData.showDialog[props.row.id]"
+                :class="`more-action-popup q-px-ba q-py-ba`"
+                anchor="top left"
+                :cover="false"
+                :fit="true"
+                :id="`actionPopupRef-${props.row.id}`"
+                :offset="[85, 0]"
+                role="list"
+                self="bottom middle"
+                transition-show="scale"
+                transition-hide="scale"
+                @show="checkMenuPosition(props.row.id)"
+              >
+                <div :class="tailClass"></div>
+                <q-card class="more-action-popup-wrapper">
+                  <q-card-section>
+                    <div class="content-wrapper text-center">
+                      <div class="q-pb-ba flex justify-center items-center">
+                        <div
+                          :class="`remove-icon-wrapper ${
+                            moreActionDialogData.row.iconColor === 'accent'
+                              ? 'icon-bg-accent'
+                              : 'icon-bg-primary'
+                          }`"
+                        >
+                          <q-icon
+                            :class="`${moreActionDialogData.row.icon} ${
+                              moreActionDialogData.row.iconColor === 'accent'
+                                ? 'icon-text-accent'
+                                : 'icon-text-primary'
+                            }`"
+                            alt="confirmation icon"
+                            aria-label="confirmation icon"
+                            size="1.5rem"
+                          />
+                        </div>
+                      </div>
+
+                      <div
+                        class="text-heading-xxs primary-content-text q-pb-xxs"
+                      >
+                        {{ moreActionDialogData.row.title }}
+                      </div>
+                      <div
+                        v-if="moreActionDialogData.row.description"
+                        class="text-body-sm secondary-content-text q-pb-xs"
+                      >
+                        {{ moreActionDialogData.row.description }}
+                      </div>
+                    </div>
+                    <!-- <p class="hidden-scope-value">{{ scope.value }}</p> -->
+                  </q-card-section>
+
+                  <q-card-actions align="right">
+                    <UBtnStd
+                      v-if="moreActionDialogData.secondaryAction"
+                      :color="moreActionDialogData.secondaryAction.color"
+                      :disable="moreActionDialogData.secondaryAction.disable"
+                      :flat="moreActionDialogData.secondaryAction.flat"
+                      :label="moreActionDialogData.secondaryAction.label"
+                      :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"
+                      :outline="moreActionDialogData.primaryAction.outline"
+                      :size="moreActionDialogData.primaryAction.size"
+                      @on-click="
+                        moreActionDialogData.primaryAction.handler(props.row)
+                      "
+                    />
+                  </q-card-actions>
+                </q-card>
+              </q-menu>
+
               <UBtnIcon
-                :key="index"
                 :class="`action-icon cursor-pointer`"
                 iconClass="fa-kit fa-ellipsis-vertical"
-                ref="btn-icon"
                 ariaLabel="More action"
-                @focus="handleMouseEnter('button', props.row.id)"
-                @mouseover="handleMouseEnter('button', props.row.id)"
-                @mouseleave="handleMouseLeave('button', props.row.id)"
-                @blur="handleMouseLeave('button', props.row.id)"
+                :id="`actionPopupRefBtn-${props.row.id}`"
+                :key="index"
+                ref="btn-icon"
                 @click.stop="handleMenuEventStop"
               >
                 <template #menu>
-                  <q-menu
-                    v-if="!verticalMoreActions"
-                    v-model="openMenu[props.row.id]"
-                    role="list"
-                    no-focus
-                    no-refocus
-                    persistent
-                    @focus="handleMouseEnter('button', props.row.id)"
-                    @mouseleave="handleMouseLeave('menu', props.row.id)"
-                    @mouseover="handleMouseEnter('menu', props.row.id)"
-                    @blur="handleMouseLeave('button', props.row.id)"
-                  >
+                  <q-menu v-if="!verticalMoreActions" auto-close role="list">
                     <div
                       :class="`${
                         verticalMoreActions ? 'vertical' : 'horizontal'
@@ -560,37 +634,25 @@ const handleMouseLeave = (type, index) => {
                               ? !action.hide(props.row)
                               : true && !verticalMoreActions
                           "
-                          :id="`more-action-${key}`"
-                          :class="`more-action-icon cursor-pointer`"
+                          :class="`more-action-icon cursor-pointer table-more-action`"
                           :iconClass="action.icon"
-                          ref="btn-icon"
                           :ariaLabel="action.label"
                           :disable="
                             typeof action.disable === 'function' &&
                             action.disable(props.row)
                           "
+                          :id="`more-action-${key}`"
+                          ref="btn-icon"
                           :size="action.size"
                           :tooltip="action.tooltip"
-                          @onClick="action.handler(props.row)"
                           @click.stop="handleMenuEventStop"
-                          @focus="handleMouseEnter('button', props.row.id)"
+                          @onClick="action.handler(props.row)"
                         />
                       </template>
                     </div>
                   </q-menu>
 
-                  <q-menu
-                    v-else
-                    v-model="openMenu[props.row.id]"
-                    role="list"
-                    no-focus
-                    no-refocus
-                    persistent
-                    @focus="handleMouseEnter('button', props.row.id)"
-                    @mouseleave="handleMouseLeave('menu', props.row.id)"
-                    @mouseover="handleMouseEnter('menu', props.row.id)"
-                    @blur="handleMouseLeave('button', props.row.id)"
-                  >
+                  <q-menu v-else auto-close role="list">
                     <UMenuDropdown
                       v-if="verticalMoreActions"
                       :data="
@@ -639,12 +701,12 @@ const handleMouseLeave = (type, index) => {
     <UPagination
       v-if="rows.length >= 6"
       v-model="pagination.page"
-      :rowPerPage="pagination.rowsPerPage"
-      :perPageOptions="getRowsPerPageOptions"
       :maxPageLink="
         Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
       "
       :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+      :perPageOptions="getRowsPerPageOptions"
+      :rowPerPage="pagination.rowsPerPage"
       @onPageChange="onPageChange"
       @onRowChange="onRowPerPageChange"
     />
@@ -665,7 +727,6 @@ const handleMouseLeave = (type, index) => {
     &:hover
       color: $primary !important
 
-
 .table-data-avatar
   padding: $xs
   padding-left: 0px
@@ -682,7 +743,6 @@ const handleMouseLeave = (type, index) => {
   background: $surface-bg-1
   box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
 
-
 .vertical-more-action-wrapper
   display: grid
   place-items: flex-start
@@ -758,10 +818,10 @@ const handleMouseLeave = (type, index) => {
     top: 0
 
   &.q-table--loading thead tr:last-child th
-    top: 48px
+    top: 3rem
 
   tbody
-    scroll-margin-top: 48px
+    scroll-margin-top: 3rem
 
 .u-sorting-btn
   padding: 0
@@ -795,4 +855,83 @@ const handleMouseLeave = (type, index) => {
 
 .hidden-header-label
   visibility: hidden
+
+.more-action-popup
+  border-radius: $border-radius-sm
+  background: $neutral-1
+  box-shadow: 0rem 0rem 0.75rem 0rem rgba(16, 17, 20, 0.16)
+  max-width: 18.375rem !important
+  width: 100%
+  position: relative
+  overflow: visible
+
+.more-action-popup-wrapper
+  box-shadow: none
+  max-width: 18.375rem !important
+  width: 100%
+  .hidden-scope-value
+    display: none
+  .q-card__section
+    padding: 0
+  .q-card__actions
+    flex-wrap: nowrap
+    padding: $ba 0 0 0
+    .q-btn
+      width: 50%
+
+.content-wrapper
+  display: grid
+  place-content: center
+  place-items: center
+
+.secondary-content-text
+  color: $description
+
+.primary-content-text
+  color: $dark
+
+.remove-icon-wrapper
+  border-radius: 7.75rem
+  padding: $sm
+  width: 3.125rem
+  height: 3.125rem
+  .q-icon
+    color: $accent
+
+.confirm-primary-action
+  margin-left: $ba !important
+
+.icon-bg-accent
+  background-color: $red-1
+
+.icon-bg-primary
+  background-color: $blue-1
+
+.icon-text-accent
+  color: $accent
+
+.icon-text-primary
+  color: $primary !important
+
+.tail-top
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  top: -0.604rem
+  border-top-left-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: -3px -2px 5px -3px rgba(0, 0, 0, 0.2)
+
+.tail-bottom
+  width: 1.25rem
+  height: 1.25rem
+  transform: rotate(45deg)
+  position: absolute
+  right: 1.304rem
+  bottom: -0.604rem
+  border-bottom-right-radius: $border-radius-xs
+  background: $neutral-1
+  box-shadow: 3px 4px 5px -3px rgba(0, 0, 0, 0.2)
 </style>

package/src/css/quasar.variables.sass

@@ -99,7 +99,7 @@ $xxl  : $space-base * 3.375 !default
 $space-none : (x: 0, y: 0) !default
 $space-xxs   : (x: ($space-x-base * .25), y: ($space-y-base * .25)) !default
 $space-xs   : (x: ($space-x-base * .5), y: ($space-y-base * .5)) !default
-$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .5)) !default
+$space-sm   : (x: ($space-x-base * .75), y: ($space-y-base * .75)) !default
 $space-ms   : (x: ($space-x-base * 1.5), y: ($space-y-base * 1.5)) !default
 $space-ba : (x: ($space-x-base * 1), y: ($space-y-base * 1)) !default
 $space-md   : (x: $space-x-base * 2, y: $space-y-base * 2) !default
@@ -117,3 +117,5 @@ $stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
 $shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
 $accent-bg-hover: rgba(203, 42, 61, 0.15)
 $surface-bg-link-hover :rgba(16, 17, 20, .5)
+$border-radius-sm: .75rem
+$border-radius-xs: .5rem