@usssa/component-library 1.0.0-alpha.237 → 1.0.0-alpha.239

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.237
+# Component Library v1.0.0-alpha.238 
 
 **This library provides custom UI components for USSSA applications**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.237",
+  "version": "1.0.0-alpha.239",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

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

@@ -130,12 +130,18 @@ const props = defineProps({
 const $q = useQuasar()
 const $screen = useScreenType()
 
+const minOverflowLength = 12
+
 const activeMenuId = ref(null)
+const captionMaxWidth = ref('100%')
+const cellOverflowStates = ref({})
+const headerMaxWidth = ref('100%')
+const infiniteNoMoreShow = ref(false)
 const infiniteScrollProp = ref(props.infiniteScrollProperty)
 const isScrollActionActive = ref(false)
 const mobileActionsDialog = ref({})
 const moreActionsDialogs = ref({})
-const infiniteNoMoreShow = ref(false)
+const tableCardWrapperRef = ref(null)
 const tableContainer = ref(null)
 const tableDataChip = ref(true) // this is required to show chip
 const tailClass = ref(null)
@@ -158,6 +164,20 @@ const attachScroll = () => {
   }
 }
 
+const checkCellOverflow = (selector, key) => {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const element = document.querySelector(selector)
+      
+      if (element) {
+        cellOverflowStates.value[key] = element.scrollWidth > element.clientWidth
+      } else {
+        cellOverflowStates.value[key] = false
+      }
+    })
+  })
+}
+
 // checking the menu position after show
 const checkMenuPosition = (id) => {
   const menuElement = document.getElementById(`actionPopupRef-${id}`) // Access the menu by ID
@@ -203,6 +223,8 @@ const filterMethod = (rows, terms, cols, getCellValue) => {
 const getActionItemColor = (action, row) => {
   if (action.destructive) {
     return 'accent'
+  } else if (action.positive) {
+    return 'positive'
   } else {
     return typeof action.color === 'function'
       ? action.color(row)
@@ -253,6 +275,13 @@ const getMenuInlineActions = (col, option) => {
   })
 }
 
+const handleCellOverflowResize = () => {
+  Object.keys(cellOverflowStates.value).forEach(key => {
+    const selector = `#long-content-${key}`
+    checkCellOverflow(selector, key)
+  })
+}
+
 const handleItemClick = (action, row) => {
   moreActionsDialogs.value[row.id][0].open = false
   setTimeout(() => {
@@ -267,10 +296,9 @@ const handleMenuHide = () => {
 }
 
 const handleMenuShow = (id) => {
- activeMenuId.value = id
- checkMenuPosition(id)
- window.addEventListener('scroll', onScroll, true)
-
+  activeMenuId.value = id
+  checkMenuPosition(id)
+  window.addEventListener('scroll', onScroll, true)
 }
 
 const handleOpenMobileMoreActions = (id) => {
@@ -321,22 +349,26 @@ const handleScroll = async () => {
   }
 }
 
-// checking for tooltip is content is visible
-const isContentVisible = (field, id, type) => {
-  return document.getElementById(`long-${type}-${field}-${id}`)
-}
-
 const isGridLastRow = (row) => {
   const lastIndex = parseInt(pagination.value.rowsPerPage) - 1
   return row.rowIndex === lastIndex
 }
 
 const onScroll = () => {
-  if(activeMenuId.value !== null) {
+  if (activeMenuId.value !== null) {
     checkMenuPosition(activeMenuId.value)
   }
 }
 
+const updateHeaderMaxWidth = () => {
+  nextTick(() => {
+    if (tableCardWrapperRef.value) {
+      headerMaxWidth.value = tableCardWrapperRef.value.offsetWidth - 64 + 'px'
+      captionMaxWidth.value = headerMaxWidth.value
+    }
+  })
+}
+
 onMounted(() => {
   infiniteNoMoreShow.value = false
   nextTick(() => {
@@ -344,10 +376,14 @@ onMounted(() => {
       attachScroll()
     }
   })
+  updateHeaderMaxWidth()
+  window.addEventListener('resize', updateHeaderMaxWidth)
 })
 
 onBeforeUnmount(() => {
   detachScroll()
+  window.removeEventListener('resize', updateHeaderMaxWidth)
+  window.removeEventListener('resize', handleCellOverflowResize)
 })
 
 // Watch for changes in infiniteScroll or tableContainer
@@ -419,6 +455,9 @@ watch(
   },
   { immediate: true }
 )
+
+// Re-check on window resize
+window.addEventListener('resize', handleCellOverflowResize)
 </script>
 
 <template>
@@ -480,6 +519,10 @@ watch(
           :style="props.selected ? 'transform: scale(0.95);' : ''"
         >
           <q-card bordered flat>
+          <div
+              class="table-card-wrapper"
+              ref="tableCardWrapperRef"
+          >
             <q-list
               dense
               :style="{
@@ -663,11 +706,21 @@ watch(
                         <q-item-label v-if="col.type !== 'icon'" caption>
                           <span
                             :class="[
-                              col.value ? 'long-text-content' : '',
+                              col.value && col.value.length > minOverflowLength && !col.header
+                                ? 'long-text-content'
+                                : 'card-header-table',
+
                               col.noEllipsis ? 'no-ellipsis-content' : '',
+                              isTablet && col.header
+                                ? 'tablet-header-table'
+                                : '',
+                              isMobile && col.header
+                                ? 'mobile-header-table'
+                                : '',
                               col.doubleSpan && col.noEllipsis
                                 ? 'full-width-text-content'
                                 : '',
+                              col.classes,
                               !isResponsiveTablet &&
                               isTablet &&
                               col.classes &&
@@ -681,6 +734,8 @@ watch(
                                 : '',
                             ]"
                             :id="`long-content-${col.field}-${props.row.id}`"
+                             :ref="el => checkCellOverflow(`#long-content-${col.field}-${props.row.id}`, `${col.field}-${props.row.id}`)"
+                             :style="{ maxWidth: headerMaxWidth }"
                           >
                             {{ col.value }}
                           </span>
@@ -710,15 +765,12 @@ watch(
                               </div>
                             </template>
                           </template>
+
                           <UTooltip
                             v-if="
                               col.value &&
-                              col.value.length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'content'
-                              )
+                              col.value.length > minOverflowLength &&
+                              cellOverflowStates[`${col.field}-${props.row.id}`]
                             "
                             anchor="bottom middle"
                             :description="col.value"
@@ -734,6 +786,8 @@ watch(
                             "
                             class="td-caption mobile-primary-caption text-body-sm"
                             :id="`long-caption-${col.field}-${props.row.id}`"
+                            :ref="el => checkCellOverflow(`#long-caption-${col.field}-${props.row.id}`, `caption-${col.field}-${props.row.id}`)"
+                            :style="{ maxWidth: captionMaxWidth, width: '100%' }"
                           >
                             <template v-if="col.captionKeyTitle">
                               {{ col.captionKeyTitle }}:
@@ -743,12 +797,8 @@ watch(
                           <UTooltip
                             v-if="
                               props.row[col.captionKey] &&
-                              props.row[col.captionKey].length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'caption'
-                              )
+                              props.row[col.captionKey].length > minOverflowLength &&
+                              cellOverflowStates[`caption-${col.field}-${props.row.id}`]
                             "
                             anchor="bottom middle"
                             :description="props.row[col.captionKey]"
@@ -1292,6 +1342,7 @@ watch(
                 </q-item>
               </template>
             </q-list>
+          </div>
           </q-card>
         </div>
         <UExpansionStd
@@ -1501,11 +1552,19 @@ watch(
                           />
                           <span
                             :class="[
-                              col.value ? 'long-text-content' : '',
+                              col.value && col.value.length > minOverflowLength && !col.header
+                                ? 'long-text-content'
+                                : 'card-header-table',
                               col.noEllipsis ? 'no-ellipsis-content' : '',
                               col.doubleSpan && col.noEllipsis
                                 ? 'full-width-text-content'
                                 : '',
+                              isTablet && col.header
+                                ? 'tablet-header-table'
+                                : '',
+                              isMobile && col.header
+                                ? 'mobile-header-table'
+                                : '',
                               !isResponsiveTablet &&
                               isTablet &&
                               col.classes &&
@@ -1519,6 +1578,8 @@ watch(
                                 : '',
                             ]"
                             :id="`long-content-${col.field}-${props.row.id}`"
+                            :ref="el => checkCellOverflow(`#long-content-${col.field}-${props.row.id}`, `${col.field}-${props.row.id}`)"
+                            :style="{ maxWidth: headerMaxWidth }"
                           >
                             {{ col.value }}
                             <template
@@ -1551,12 +1612,8 @@ watch(
                           <UTooltip
                             v-if="
                               col.value &&
-                              col.value.length > 12 &&
-                              isContentVisible(
-                                col.field,
-                                props.row.id,
-                                'content'
-                              )
+                              col.value.length > minOverflowLength &&
+                              cellOverflowStates[`${col.field}-${props.row.id}`]
                             "
                             anchor="bottom middle"
                             :description="col.value"
@@ -1976,7 +2033,9 @@ watch(
                               moreActionDialogData.secondaryAction.disable
                             "
                             :flat="moreActionDialogData.secondaryAction.flat"
-                            :label="moreActionDialogData.secondaryAction.label"
+                            :label="
+                              moreActionDialogData.secondaryAction.label
+                            "
                             :loading="
                               moreActionDialogData.secondaryAction.loading
                             "

package/src/components/core/UTableStd.vue

@@ -1631,7 +1631,6 @@ watch(
   width: 10.5rem
 
 .mobile-primary-caption
-  width: 11.5rem !important
   white-space: nowrap
   overflow: hidden
   text-overflow: ellipsis
@@ -1682,4 +1681,11 @@ watch(
 
 .mobile-expansion-item
   flex: calc(50% - 8px)
+
+.card-header-table
+  text-overflow: ellipsis
+  overflow: hidden
+  white-space: nowrap
+  display: block
+
 </style>