@usssa/component-library 1.0.0-alpha.210 → 1.0.0-alpha.211

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.210
+# Component Library v1.0.0-alpha.211
 
 **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.210",
+  "version": "1.0.0-alpha.211",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

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

@@ -652,33 +652,33 @@ watch(
                             :id="`long-content-${col.field}-${props.row.id}`"
                           >
                             {{ col.value }}
+                          </span>
+                          <template
+                            v-if="
+                              typeof col.combineColoumn === 'function' &&
+                              col.combineColoumn(props.row)
+                            "
+                          >
                             <template
-                              v-if="
-                                typeof col.combineColoumn === 'function' &&
-                                col.combineColoumn(props.row)
-                              "
+                              v-for="(combineCol, colKey) in col.combineColoumn(
+                                props.row
+                              )"
+                              :key="colKey"
                             >
-                              <template
-                                v-for="(
-                                  combineCol, colKey
-                                ) in col.combineColoumn(props.row)"
+                              <q-icon
+                                v-if="combineCol.icon"
+                                :class="combineCol.icon"
+                                :alt="combineCol.ariaLabel"
+                                :aria-label="combineCol.ariaLabel"
+                                :color="combineCol?.iconColor ?? 'primary'"
                                 :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>
+                                size="1rem"
+                              />
+                              <div v-else>
+                                {{ props.row[combineCol.key] }}
+                              </div>
                             </template>
-                          </span>
+                          </template>
                           <UTooltip
                             v-if="
                               col.value &&
@@ -696,7 +696,11 @@ watch(
                             :target="`#long-content-${col.field}-${props.row.id}`"
                           />
                           <div
-                            v-if="col.captionKey"
+                            v-if="
+                              col.captionKey &&
+                              typeof col.showCaption === 'function' &&
+                              col.showCaption(props.row)
+                            "
                             class="td-caption mobile-primary-caption text-body-sm"
                             :id="`long-caption-${col.field}-${props.row.id}`"
                           >
@@ -1368,7 +1372,9 @@ watch(
                 <template
                   v-if="
                     !col.isPrimary &&
-                    (typeof col.show === 'undefined' || col.show) &&
+                    (typeof col.show === 'function'
+                      ? col.show()
+                      : typeof col.show === 'undefined' || col.show) &&
                     col.field !== 'action'
                   "
                 >

package/src/components/core/UTableStd.vue

@@ -491,7 +491,9 @@ watch(
         </UTh>
         <template v-for="(col, key) in props.cols">
           <UTh
-            v-if="typeof col.show === 'undefined' || col.show"
+            v-if="typeof col.show === 'function'
+                ? col.show()
+                : (typeof col.show === 'undefined' || col.show)"
             :class="`${col.sortable ? 'cursor-pointer' : ''} ${
               col.headerClasses
             }`"
@@ -558,7 +560,9 @@ watch(
           <UTd
             v-if="
               col.field !== 'action' &&
-              (typeof col.show === 'undefined' || col.show)
+              (typeof col.show === 'function'
+                ? col.show()
+                : (typeof col.show === 'undefined' || col.show))
             "
             :class="col.classes"
             :col="col"
@@ -763,7 +767,9 @@ watch(
           <!-- to the action cell, it can have single and multiple  -->
 
           <UTd
-            v-else-if="typeof col.show === 'undefined' || col.show"
+            v-else-if="typeof col.show === 'function'
+                ? col.show()
+                : (typeof col.show === 'undefined' || col.show)"
             :class="col.classes"
             :index="index"
             :separator="separator"
@@ -1615,12 +1621,16 @@ watch(
   gap: $xxs
 
 .combine-col-small-device-wrapper
+  width: auto !important
+  max-width: 5.5rem !important
+  padding-right: $xs
+
+.q-table__grid-content .q-item__label--caption:has(span.combine-col-small-device-wrapper)
   display: flex
   justify-content: flex-start
   align-items: center
-  gap: $xxs
 
-.q-table__grid-content .u-expansion-table
+.u-expansion-table
   .u-expansion-body
     display: flex
     flex-wrap: wrap