@usssa/component-library 1.0.0-alpha.142 → 1.0.0-alpha.144

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.141
+# Component Library v1.0.0-alpha.144
 
 **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.142",
+  "version": "1.0.0-alpha.144",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UDialogStd.vue

@@ -33,7 +33,6 @@ const props = defineProps({
 })
 
 // constants
-const MAX_HEIGHT = 750
 const MIN_HEIGHT = 120
 let isDragging = false
 let startHeight = 0
@@ -43,8 +42,8 @@ const $screen = useScreenType()
 const $slots = useSlots()
 const $q = useQuasar()
 
-const dialogMaxHeight = ref(MAX_HEIGHT)
-const currentDialogHeight = ref(dialogMaxHeight.value)
+const currentDialogHeight = ref(null)
+const dialogMaxHeight = ref(null)
 const dialogRef = ref(true)
 const scrollableMarginHeight = ref(null)
 
@@ -59,6 +58,11 @@ const headerClass = computed(() => {
 const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
 const isSmallWidthDevices = computed(() => $q.screen.width < 400)
+const isWidthChanging = computed(() => {
+  return {
+    width: $q.screen.width,
+  }
+})
 const smallDevices = computed(() => {
   return {
     sm: $q.screen.height < 800 && $q.screen.height > 700,
@@ -66,6 +70,41 @@ const smallDevices = computed(() => {
   }
 })
 const isTablet = computed(() => $screen.value.isTablet)
+const slotsLength = computed(
+  () =>
+    Object.keys($slots).filter(
+      (slot) => !['content', 'secondary_row'].includes(slot)
+    ).length
+)
+
+const getActionsWrapperFlex = () => {
+  if (isMobile.value) {
+    if (slotsLength.value >= 3) {
+      return 'wrap'
+    } else {
+      return 'nowrap'
+    }
+  }
+  if (isTablet.value) {
+    if (slotsLength.value >= 3) {
+      return 'nowrap'
+    } else {
+      return 'wrap'
+    }
+  }
+}
+
+const getContentBottomSpace = () => {
+  if (isMobile.value) {
+    if (slotsLength.value >= 3) {
+      return 7.5
+    } else {
+      return 4.5
+    }
+  } else {
+    return 0
+  }
+}
 
 const getDialogHeaderheight = () => {
   setTimeout(() => {
@@ -75,21 +114,25 @@ const getDialogHeaderheight = () => {
       scrollableMarginHeight.value = headingWrapper.clientHeight
     }
   }, 100)
+  setTimeout(() => {
+    // dynamically adding height by removing toolbar height of 50px
+    const dialogWrapper = document.getElementsByClassName('dialog-wrapper')[0]
+    if (dialogWrapper) {
+      dialogWrapper?.setAttribute(
+        'style',
+        `max-height: ${$q.screen.height - 50}px !important`
+      )
+    }
+
+    currentDialogHeight.value = $q.screen.height - 50
+    dialogMaxHeight.value = $q.screen.height - 50
+  }, 200)
 }
 
 const handleBackClick = () => {
   return emit('onBackIconClick')
 }
 
-const hasAllActionSlots = () => {
-  return (
-    !!$slots['action_secondary_one'] &&
-    !!$slots['action_secondary_two'] &&
-    !!$slots['action_primary_one'] &&
-    !!$slots['action_primary_two']
-  )
-}
-
 const hasSlots = () => {
   return (!!$slots['action_secondary_one'] ||
     !!$slots['action_secondary_two']) &&
@@ -122,7 +165,7 @@ const onDragMove = (event) => {
     MIN_HEIGHT
   ) {
     setTimeout(() => {
-      dialogRef.value.hide() // if user is dragging then it should close from here
+      dialogRef?.value?.hide() // if user is dragging then it should close from here
     }, 200)
   }
   // currentDialogHeight.value = Math.max(MIN_HEIGHT, startHeight + deltaY) // if limiting not required
@@ -158,32 +201,25 @@ onMounted(() => {
 })
 
 watch(
-  smallDevices,
-  (newData) => {
+  isWidthChanging,
+  () => {
     getDialogHeaderheight()
-    if (newData.xs || newData.sm) {
-      dialogMaxHeight.value = newData.xs ? 550 : 580
-      currentDialogHeight.value = newData.xs ? 550 : 580
-    } else {
-      dialogMaxHeight.value = MAX_HEIGHT
-      currentDialogHeight.value = MAX_HEIGHT
-    }
   },
   { immediate: true }
 )
 
 watch(
   model,
-  (newData) => {
+  () => {
+    getDialogHeaderheight()
+  },
+  { immediate: true }
+)
+
+watch(
+  smallDevices,
+  () => {
     getDialogHeaderheight()
-    if (!newData) {
-      currentDialogHeight.value =
-        smallDevices.value.xs || smallDevices.value.sm
-          ? smallDevices.value.xs
-            ? 550
-            : 580
-          : 750
-    }
   },
   { immediate: true }
 )
@@ -217,11 +253,14 @@ watch(
         <div class="drag-handle" />
       </div>
       <q-card-section
-        :class="`col items-center q-pa-none heading-section ${headerClass}${
-          isMobile ? ' no-heading-section' : ''
-        }`"
+        :class="[
+          `col items-center q-pa-none heading-section ${headerClass}${
+            isMobile ? ' no-heading-section' : ''
+          }`,
+          { mobile: isMobile, desktop: isDesktop || isTablet },
+        ]"
       >
-        <div class="heading-wrapper row">
+        <div class="heading-wrapper row items-center">
           <div class="flex items-center dialog-heading-container">
             <div v-if="leftIcon">
               <UBtnStd
@@ -261,7 +300,7 @@ watch(
           >
             <q-icon
               v-if="closeIcon"
-              :class="`icon-close ${closeIcon}`"
+              :class="`icon-close ${closeIcon} icon-secondary-opacity`"
               size="1.5rem"
               tabindex="-1"
             />
@@ -273,17 +312,23 @@ watch(
       </q-card-section>
 
       <q-card-section
-        :class="`full-height main-content-dialog scroll q-px-ba${
-          isMobile ? ' scrollable-content' : ''
-        }`"
+        :class="[
+          `full-height main-content-dialog scroll q-px-ba${
+            isMobile ? ' scrollable-content' : ''
+          }`,
+          { mobile: isMobile, desktop: isDesktop || isTablet },
+        ]"
         :style="{
-          'margin-top': `${scrollableMarginHeight + (isMobile ? 16 : 0)}px`,
+          'margin-top': `${
+            isMobile ? scrollableMarginHeight + (isMobile ? 16 : 0) : 0
+          }px`,
+          'margin-bottom': `${getContentBottomSpace()}rem !important`,
           height:
             isTablet || isDesktop
               ? 'auto'
               : currentDialogHeight -
                 (scrollableMarginHeight +
-                  (hasSlots() && hasAllActionSlots() ? 144 : 88)) +
+                  (hasSlots() && slotsLength >= 3 ? 144 : 88)) +
                 'px !important',
         }"
         tabindex="-1"
@@ -295,14 +340,13 @@ watch(
         v-if="showActionButtons"
         :class="`q-pa-ba action-wrapper${
           isMobile ? ' fixed-action-wrapper' : ''
-        }${isTablet && hasAllActionSlots() ? ' tablet-full-btn-actions' : ''}`"
+        }${isTablet && slotsLength >= 3 ? ' tablet-full-btn-actions' : ''}`"
         id="dialog-action-wrapper"
         :style="{
           gap: hasSlots(),
-          flexWrap:
-            (isMobile || isTablet) && hasAllActionSlots() ? 'wrap' : 'no-wrap',
+          flexWrap: getActionsWrapperFlex(),
           justifyContent:
-            ((isMobile || !isTablet) && hasAllActionSlots()) || hasSlots()
+            ((isMobile || !isTablet) && slotsLength >= 3) || hasSlots()
               ? 'space-between'
               : 'flex-end',
         }"
@@ -311,18 +355,22 @@ watch(
           v-if="
             !!$slots['action_secondary_one'] || !!$slots['action_secondary_two']
           "
-          :class="`action-buttons${
-            isMobile || isTablet ? ' full-width-actions' : ''
-          }${
-            !isDesktop
-              ? isMobile && !isSmallWidthDevices
-                ? ' justify-center mobile-btn-actions'
-                : !!$slots['action_secondary_one'] ||
-                  !!$slots['action_secondary_two']
-                ? ' justify-start small-device-class'
-                : ' justify-end'
-              : ''
-          }`"
+          :class="[
+            `${isMobile || isTablet ? ' full-width-actions' : ''}${
+              !isDesktop
+                ? isMobile && !isSmallWidthDevices
+                  ? ' justify-center mobile-btn-actions'
+                  : !!$slots['action_secondary_one'] ||
+                    !!$slots['action_secondary_two']
+                  ? !isTablet
+                    ? ' justify-start small-device-class'
+                    : ''
+                  : ' justify-end'
+                : ''
+            }`,
+            { 'mobile action-buttons': isMobile },
+            { 'desktop action-buttons': !isMobile },
+          ]"
           align="left"
         >
           <slot name="action_secondary_one" />
@@ -333,18 +381,22 @@ watch(
           v-if="
             !!$slots['action_primary_one'] || !!$slots['action_primary_two']
           "
-          :class="`action-buttons${
-            isMobile || isTablet ? ' full-width-actions' : ''
-          }${
-            !isDesktop
-              ? isMobile && !isSmallWidthDevices
-                ? ' justify-center mobile-btn-actions'
-                : !!$slots['action_primary_one'] ||
-                  !!$slots['action_primary_two']
-                ? ' justify-start small-device-class'
-                : ' justify-end'
-              : ''
-          }`"
+          :class="[
+            `${isMobile || isTablet ? ' full-width-actions' : ''}${
+              !isDesktop
+                ? isMobile && !isSmallWidthDevices
+                  ? ' justify-center mobile-btn-actions'
+                  : !!$slots['action_primary_one'] ||
+                    !!$slots['action_primary_two']
+                  ? !isTablet
+                    ? ' justify-start small-device-class'
+                    : ''
+                  : ' justify-end'
+                : ''
+            }`,
+            { 'mobile action-buttons': isMobile },
+            { 'desktop action-buttons': !isMobile },
+          ]"
           align="right"
         >
           <slot name="action_primary_one" />
@@ -402,11 +454,17 @@ watch(
     &.action-wrapper
       border-radius: 0 !important
   .main-content-dialog
-    padding: $ms $ms
-    padding-bottom: 0
-    margin-bottom: $ms !important
+    &.mobile
+      padding: $ba
+    &.desktop
+      padding: $ms $ms
+      padding-bottom: 0
+      margin-bottom: $ms !important
   .heading-section
-    padding: $ba $ms !important
+    &.mobile
+      padding: $ba $ba $xs $ba !important
+    &.desktop
+      padding: $ba $ms !important
   .action-wrapper
     padding: $ba $ms
 
@@ -422,6 +480,7 @@ watch(
 
 .heading-wrapper
   justify-content: space-between
+  align-items: flex-start
   flex-wrap: nowrap
   margin-bottom: $ba
 
@@ -446,10 +505,13 @@ watch(
 .action-buttons
   display: flex
   align-items: center
-  gap: $xs
   flex-wrap: nowrap
   .q-btn
     margin: 0 !important
+  &.desktop
+    gap: $xs
+  &.mobile
+    gap: $ba
 
 .q-btn.dialog-action-icons
   padding: 0px 0px !important
@@ -491,12 +553,23 @@ watch(
   width: 100%
   flex-wrap: nowrap
 
-.mobile-btn-actions, .tablet-full-btn-actions
+.mobile-btn-actions
+  .q-btn
+    width: 100%
+    min-width: auto !important
+    .button-label
+      white-space: nowrap
+
+.tablet-full-btn-actions
   .q-btn
-   width: 100%
+    min-width: auto !important
+    .button-label
+      white-space: nowrap
 
 .dialog-full .no-heading-section
   padding-top: 0px !important
+  padding-left: $ba !important
+  padding-right: $ba !important
   position: fixed
   width: 100%
   z-index: 99
@@ -517,11 +590,12 @@ watch(
   position: fixed
   bottom: 0
   width: 100%
-  padding: $ba $sm !important
+  padding: $ba !important
 
 .dialog-full .scrollable-content
-  margin-bottom: 4.5rem !important
   height: auto !important
+  padding-left: $ba !important
+  padding-right: $ba !important
 
 .scrollable::-webkit-scrollbar
   z-index: 9999
@@ -532,7 +606,4 @@ watch(
     width: 100%
     .button-label
       white-space: nowrap
-      width: 9.5rem
-      overflow: hidden
-      text-overflow: ellipsis
-</style>
+</style>

package/src/components/core/UInputTextStd.vue

@@ -158,7 +158,7 @@ const handleRightIconClick = () => {
         <div class="row items-center text-neutral-9 no-wrap">
           <q-icon
             v-if="hintIcon"
-            :class="hintIcon"
+            :class="`${hintIcon} icon-secondary-opacity`"
             :aria-label="hintText"
             size="1rem"
           />

package/src/components/core/URadioBtn.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue'
-import { useScreenType } from '../../composables/useScreenType'
 import URadioStd from './URadioStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
 
 const emit = defineEmits(['onClick', 'onButtonClick'])
 const model = defineModel()
@@ -78,9 +78,11 @@ const handleChange = () => {
           :id="id"
           :value="value"
         />
-        <div class="button-text">
+        <div class="button-text q-ml-xs">
           <div class="text-caption-lg">{{ label }}</div>
-          <div class="description-text text-body-sm">{{ description }}</div>
+          <div class="description-text text-body-sm">
+            {{ description }}
+          </div>
         </div>
       </div>
 
@@ -108,36 +110,30 @@ const handleChange = () => {
 <style lang="sass">
 .u-radio-btn
   padding: $xs $sm
-  border: 2px solid $neutral-4
+  border: 0.125rem solid $neutral-4
   border-radius: $xs
   min-height: $lg
   .q-radio__label
     padding-left: 0 !important
 
-  .radio-btn-content
-    gap: $xs
-
   .button-text
     text-align: left !important
-    min-width: 6.063rem
 
   .description-text
     color: $description
+    white-space: nowrap
 
   .radio-btn-img
     width: $ms
     height: $ms
 
 .active
-  border: 2px solid $primary
+  border: 0.125rem solid $primary
 
 .u-radio-btn:hover
-  border: 2px solid $primary
+  border: 0.125rem solid $primary
   background-color: $primary-transparent
 
   .q-radio .q-radio__inner
     color: $primary !important
-
-.radio-btn-text-wrapper
-  gap: $xs
 </style>

package/src/components/core/USelectStd.vue

@@ -76,7 +76,7 @@ const props = defineProps({
   },
   sheetLabel: {
     type: String,
-    default: ''
+    default: '',
   },
   showErrorIcon: {
     type: Boolean,
@@ -99,13 +99,13 @@ const props = defineProps({
 const $screen = useScreenType()
 
 const dialogs = ref([])
-const initialOptions= ref([...props.options])
+const initialOptions = ref([...props.options])
 const placeholderText = ref(props?.placeholder)
 const search = ref('')
 const selectedItem = ref(props.modelValue)
 
-const sheetHeading = computed(()=>{
-  if(props.sheetLabel){
+const sheetHeading = computed(() => {
+  if (props.sheetLabel) {
     return props.sheetLabel
   }
   return props.label
@@ -132,6 +132,7 @@ const handleApply = () => {
   dialogs.value[0].open = false
   model.value = selectedItem.value
 }
+
 // for opening the sheet in mobile screen
 const handleClick = (event) => {
   const isSelectElement = event.target.closest('.q-field__control')
@@ -154,6 +155,7 @@ const handleClick = (event) => {
     }
   }
 }
+
 // sheet closing action
 const handleClose = () => {
   dialogs.value[0].open = false
@@ -167,6 +169,15 @@ const handleClose = () => {
     selectedItem.value = ''
   }
 }
+
+const handleInput = (event) => {
+  if (event.type == 'input' && props.useInput && $screen.value.isMobile) {
+    let inputElement = document.querySelector('.q-field__input')
+    inputElement.value = ''
+    handleClick(event)
+  }
+}
+
 // adding scroll if highlighted menu is not visible to user
 const handleKeydown = () => {
   setTimeout(() => {
@@ -191,6 +202,11 @@ const handleKeydown = () => {
     }
   }, 100)
 }
+
+const handleKeydownEnter = (event) => {
+  handleClick(event)
+}
+
 // selecting sheet items
 const handleSheetItemClick = (item, key) => {
   selectedItem.value = item.value
@@ -265,7 +281,9 @@ watch(
       :placeholder="placeholderText"
       :use-input="useInput"
       @filter="filterFn"
+      @input="handleInput"
       @keydown="handleKeydown"
+      @keydown.enter="handleKeydownEnter"
       @update:model-value="(val) => updateVal(val)"
     >
       <template v-slot:no-option>
@@ -440,7 +458,6 @@ watch(
   &.field-md
     .q-field__marginal
       height: $lg
-
   &.field-lg
     .q-field__marginal
       height: $xl

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

@@ -86,6 +86,7 @@ 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 isTablet = computed(() => $screen.value.isTablet)
 
@@ -209,6 +210,8 @@ watch(
       showPagination && pagination.rowsPerPage < 50
         ? ' force-auto-height-table'
         : ''
+    }${
+      !isDesktop ? (isMobile ? ' grid-card-mobile' : ' grid-card-tablet') : ''
     }`"
     :bordered="bordered"
     :columns="columns"
@@ -244,7 +247,7 @@ watch(
             dense
             :style="{
               'min-height': `${rowCardHeight}rem`,
-              height: `${rowCardHeight}rem`,
+              overflowX: 'hidden',
             }"
           >
             <template v-for="(col, __k) in props.cols" :key="__k">
@@ -309,7 +312,7 @@ watch(
                           <UAvatar
                             v-if="props.row[col.avatarKey]?.type === 'initials'"
                             :name="`${props.row[col.avatarKey]?.value}`"
-                            size="md"
+                            size="lg"
                           />
                           <UAvatar
                             v-else-if="
@@ -320,14 +323,14 @@ watch(
                               props.row[col.avatarKey]?.name ??
                               props.row[col.avatarKey]?.value
                             "
-                            size="md"
+                            size="lg"
                           />
                         </div>
                         <div v-else class="table-data-avatar">
                           <UAvatar
                             :image="`${props.row[col.avatarKey]}`"
                             :name="`${props.row[col.avatarKey]}`"
-                            size="md"
+                            size="lg"
                           />
                         </div>
                       </div>
@@ -567,7 +570,7 @@ watch(
                           <div
                             class="q-pt-ba q-px-ba q-pb-none text-heading-xxs text-dark"
                           >
-                            Select More Actions
+                            Select More Options
                           </div>
                           <q-list class="grid-more-action">
                             <template v-for="(action, __i) in col.actions">
@@ -757,7 +760,7 @@ watch(
                       <USheet
                         v-model:dialogs="moreActionsDialogs[props.row['id']]"
                         closeIconLabel="Close Icon"
-                        heading="Select More Actions"
+                        heading="Select More Options"
                         :is-left-icon="false"
                         :show-action-buttons="false"
                       >

package/src/components/core/UTableStd.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useQuasar } from 'quasar'
 import { computed, ref, watch } from 'vue'
 import { useScreenType } from '..'
 import UAvatar from './UAvatar.vue'
@@ -108,6 +109,7 @@ const props = defineProps({
   },
 })
 
+const $q = useQuasar()
 const $screen = useScreenType()
 
 const customLoading = ref(false)
@@ -138,6 +140,7 @@ const getRowsPerPageOptions = computed(() => {
 const isMobileOrTablet = computed(
   () => $screen.value.isMobile || $screen.value.isTablet
 )
+const isSmallDevices = computed(() => $q.screen.width < 390)
 
 // chekcing the menu position after show
 const checkMenuPosition = (id) => {
@@ -817,11 +820,12 @@ watch(
     </template> -->
   </UTable>
   <!-- customized pagination with the vitual scroll functionality and rows per page selection -->
+
   <div
     v-if="showPagination"
     :class="`row justify-end items-center pagination-wrapper${
       grid ? ' grid-row-pagination' : ''
-    }`"
+    }${isSmallDevices ? ' small-device-pagination' : ''}`"
     dataTestId="table-pagination"
   >
     <UPagination
@@ -829,13 +833,11 @@ watch(
       v-model="pagination.page"
       :maxPageLink="
         Number(
-          Math.ceil(
-            updatedRows.length / pagination.rowsPerPage > 10
-              ? grid
-                ? 3
-                : 6
-              : 3
-          )
+          Math.ceil(updatedRows.length / pagination.rowsPerPage) > 10
+            ? grid
+              ? 3
+              : 6
+            : 3
         )
       "
       :maxPages="Number(Math.ceil(updatedRows.length / pagination.rowsPerPage))"
@@ -936,9 +938,25 @@ watch(
 .u-virtualscroll-table
   height: 50rem
 
+.u-virtualscroll-grid-table.grid-card-mobile
+  .q-table__grid-content
+    .grid-style-transition
+      padding-left: 0px
+      padding-right: 0px
+
+.u-virtualscroll-grid-table.grid-card-tablet
+  .q-table__grid-content
+    > :nth-child(odd)
+      padding-left: 0px
+    > :nth-child(even)
+      padding-right: 0px
+
 .u-virtualscroll-grid-table
-  max-height: 50rem
-  overflow: auto
+  // max-height: 50rem
+  // overflow: auto
+
+  .q-item.q-item-type .q-item__section--main
+    padding-bottom: $xxs !important
 
   .q-list
     display: grid
@@ -954,7 +972,7 @@ watch(
     color: $neutral-9
     font-size: 0.875rem
     font-weight: 500
-    line-height: 1.313rem !important
+    line-height: 1.063rem !important
     opacity: 1
     word-break: break-word
 
@@ -962,7 +980,7 @@ watch(
     color: $dark
     font-size: $ba
     font-weight: 400
-    line-height: 1.5rem !important
+    line-height: 1.188rem !important
     word-break: break-word
 
   .q-table__grid-content
@@ -1004,7 +1022,7 @@ watch(
         color: $dark
         font-size: 1rem
         font-weight: 500
-        line-height: 1.313rem
+        line-height: 1.063rem
         width: 12.5rem
 
 .u-sticky-table-header
@@ -1148,14 +1166,22 @@ watch(
   box-shadow: 3px 4px 5px -3px rgba(0, 0, 0, 0.2)
 
 .mobile-tail-top
-  left: 1.304rem !important
+  right: 1.304rem !important
 
 .mobile-tail-bottom
-  left: 1.304rem !important
+  right: 1.304rem !important
 
 .grid-row-pagination
   .u-pagination-container
     flex-wrap: nowrap
+  .q-pagination__middle
+    flex-wrap: nowrap
+
+.small-device-pagination
+  .u-pagination-container
+    flex-wrap: wrap
+    gap: $xs
+    justify-content: flex-end
 
 .mobile-grid-more-action
   padding: 0px !important

package/src/components/core/UUploader.vue

@@ -57,6 +57,10 @@ const props = defineProps({
     type: String,
     default: 'Remove File',
   },
+  selectFileBtnDisable: {
+    type: Boolean,
+    default: false,
+  },
   selectFileBtnLabel: {
     type: String,
     default: 'Choose File',
@@ -162,6 +166,7 @@ defineExpose({ upload })
               class="q-mt-md"
               color="primary"
               dataTestId="select-file-btn"
+              :disable="selectFileBtnDisable"
               :full-width="true"
               :label="selectFileBtnLabel"
               size="lg"
@@ -169,8 +174,9 @@ defineExpose({ upload })
             >
               {{ selectFileBtnLabel }}
               <q-uploader-add-trigger
+                v-if="!selectFileBtnDisable"
                 :aria-label="selectFileBtnLabel"
-              ></q-uploader-add-trigger>
+              />
             </UBtnStd>
             <UBtnStd
               v-if="scope.canUpload && showUploadBtn"
@@ -471,6 +477,8 @@ defineExpose({ upload })
   .q-uploader
     width: auto !important
     max-height: unset !important
+    .q-uploader__list
+      background: $neutral-2
   .uploader-list
     background: $neutral-2
     border-radius: $xs

package/src/css/quasar.variables.sass

@@ -57,7 +57,7 @@ $caption-xs: (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem,
 
 $body-xl:   (size: 1.25rem, line-height: 2.5rem,   letter-spacing: .03215rem,  weight: 400) !default
 $body-lg:   (size: 1.125rem, line-height: 1.75rem,   letter-spacing: .03215rem,  weight: 400) !default
-$body-md:   (size: 1.00rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
+$body-md:   (size: 1.00rem, line-height: 1.188rem,   letter-spacing: .01786rem,  weight: 400) !default
 $body-sm:   (size: 0.875rem, line-height: 1.5rem,   letter-spacing: .01786rem,  weight: 400) !default
 $body-xs:   (size: 0.75rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
 $body-xxs:   (size: 0.688rem, line-height: 1.25rem,   letter-spacing: .01786rem,  weight: 400) !default
@@ -71,8 +71,8 @@ $heading-xxxl:   (size: 3rem,    line-height: 3.75rem,   letter-spacing: -0.0156
 $heading-xxl:    (size: 2.5rem,  line-height: 3.125rem, letter-spacing: 0rem, weight: 700) !default
 $heading-xl:    (size: 2.0rem,    line-height: 2.5rem,   letter-spacing: 0rem, weight: 700) !default
 $heading-lg:    (size: 1.75rem,  line-height: 2.188rem, letter-spacing: .00714rem, weight: 700) !default
-$heading-md:    (size: 1.5rem,  line-height: 1.875rem, letter-spacing: .00714rem, weight: 700) !default
-$heading-sm:    (size: 1.25rem,  line-height: 2rem, letter-spacing: 0rem, weight: 700) !default
+$heading-md:    (size: 1.5rem,  line-height: 1.5rem, letter-spacing: .00714rem, weight: 700) !default
+$heading-sm:    (size: 1.25rem,  line-height: 1.5rem, letter-spacing: 0rem, weight: 700) !default
 $heading-xs:    (size: 1.125rem,  line-height: 1.406rem, letter-spacing: .0125rem, weight: 700) !default
 $heading-xxs:    (size: 1.0rem,  line-height: 1.5rem, letter-spacing: .0125rem, weight: 700) !default