@usssa/component-library 1.0.0-alpha.241 → 1.0.0-alpha.242

package/package.json

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

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

@@ -89,6 +89,10 @@ const props = defineProps({
       }
     },
   },
+  minOverflowLength: {
+    type: Number,
+    default: 12
+  },
   rowCardHeight: {
     type: Number,
     default: 25,
@@ -130,8 +134,6 @@ const props = defineProps({
 const $q = useQuasar()
 const $screen = useScreenType()
 
-const minOverflowLength = 12
-
 const activeMenuId = ref(null)
 const captionMaxWidth = ref('100%')
 const cellOverflowStates = ref({})
@@ -139,6 +141,7 @@ const headerMaxWidth = ref('100%')
 const infiniteNoMoreShow = ref(false)
 const infiniteScrollProp = ref(props.infiniteScrollProperty)
 const isScrollActionActive = ref(false)
+const minOverflowLength = ref(props.minOverflowLength)
 const mobileActionsDialog = ref({})
 const moreActionsDialogs = ref({})
 const tableCardWrapperRef = ref(null)
@@ -168,7 +171,7 @@ const checkCellOverflow = (selector, key) => {
   nextTick(() => {
     requestAnimationFrame(() => {
       const element = document.querySelector(selector)
-      
+
       if (element) {
         cellOverflowStates.value[key] = element.scrollWidth > element.clientWidth
       } else {
@@ -1474,7 +1477,7 @@ window.addEventListener('resize', handleCellOverflowResize)
                     ]"
                   >
                     <!-- Label -->
-                    <div class="text-caption text-description">
+                    <div class="text-caption text-description q-mb-xxs">
                       {{ col.label }}
                     </div>
                     <!-- Content -->
@@ -1669,9 +1672,7 @@ window.addEventListener('resize', handleCellOverflowResize)
                         size="1.5rem"
                       />
                       <!-- Text -->
-                      <span v-else class="text-body-sm">
-                        {{ props.row[col.field] }}
-                      </span>
+                      <span v-else class="text-body-sm">{{ props.row[col.field] }}</span>
                     </div>
                     <!-- Caption (if any) -->
                     <div

package/src/components/core/UTableStd.vue

@@ -125,6 +125,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  minOverflowLength: {
+    type: Number,
+    default: 12
+  },
   multiSelection: {
     type: Boolean,
     default: false,
@@ -480,6 +484,7 @@ watch(
     :infinite-scroll="infiniteScroll"
     :infinite-scroll-property="infiniteScrollProperty"
     :loading="loading"
+    :minOverflowLength="minOverflowLength"
     :row-card-height="rowCardHeight"
     :select-more-options="selectMoreOptions"
     :separator="separator"
@@ -1655,10 +1660,8 @@ watch(
   .u-expansion-body
     display: flex
     flex-wrap: wrap
-    gap: $xs
-
-    > *:not(:last-child)
-      margin-bottom: $ba
+    column-gap: $xs
+    row-gap: $ba
 
     .table-data-avatar
       display: flex