@usssa/component-library 1.0.0-alpha.145 → 1.0.0-alpha.147

package/README.md

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

package/src/components/core/UDate.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
 import UInputTextStd from './UInputTextStd.vue'
 import USheet from './USheet.vue'
-import { useScreenType } from '../../composables/useScreenType'
 
 const date = defineModel('date', { default: null })
 
@@ -18,6 +18,7 @@ const props = defineProps({
     default: 'date',
   },
   datePickerClass: { type: String, default: null },
+  datePickerOptions: { type: [Array, Function] },
   disable: { type: Boolean, default: false },
   errorMessage: {
     type: String,
@@ -275,6 +276,7 @@ watch(
           minimal
           :navigation-max-year-month="navigationMaxYearMonth"
           :navigation-min-year-month="navigationMinYearMonth"
+          :options="datePickerOptions"
           :range="range"
         />
       </div>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { useQuasar } from 'quasar'
 import { computed, ref, watch } from 'vue'
 import { useScreenType } from '../../../composables/useScreenType'
 import UAvatar from '../UAvatar.vue'
@@ -79,6 +80,7 @@ const props = defineProps({
   },
 })
 
+const $q = useQuasar()
 const $screen = useScreenType()
 
 const mobileActionsDialog = ref({})
@@ -88,6 +90,9 @@ const tailClass = ref(null)
 
 const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
+const isResponsiveTablet = computed(
+  () => $q.screen.width > 600 && $q.screen.width < 768
+)
 const isTablet = computed(() => $screen.value.isTablet)
 
 // chekcing the menu position after show
@@ -257,6 +262,7 @@ watch(
                   col.show ||
                   col.field === 'action'
                 "
+                :class="col.doubleSpan ? 'mobile-centered-col' : ''"
               >
                 <q-item-section
                   v-if="
@@ -337,7 +343,20 @@ watch(
 
                       <q-item-label v-if="col.type !== 'icon'" caption>
                         <span
-                          :class="`${col.value ? 'long-text-content' : null}`"
+                          :class="[
+                            col.value ? 'long-text-content' : '',
+                            col.noEllipsis ? 'no-ellipsis-content' : '',
+                            col.doubleSpan && col.noEllipsis
+                              ? 'full-width-text-content'
+                              : '',
+                            !isResponsiveTablet &&
+                            isTablet &&
+                            col.classes &&
+                            col.classes.length > 0 &&
+                            col.classes[0] === 'no-wrap-text'
+                              ? 'tablet-event-text'
+                              : '',
+                          ]"
                           :id="`long-content-${col.field}-${props.row.id}`"
                         >
                           {{ col.value }}
@@ -359,6 +378,9 @@ watch(
                           class="td-caption mobile-primary-caption text-body-md"
                           :id="`long-caption-${col.field}-${props.row.id}`"
                         >
+                          <template v-if="col.captionKeyTitle">
+                            {{ col.captionKeyTitle }}:
+                          </template>
                           {{ props.row[col.captionKey] }}
                         </div>
                         <UTooltip

package/src/components/core/UTableStd.vue

@@ -137,6 +137,7 @@ const getRowsPerPageOptions = computed(() => {
   }
 })
 
+const isMobile = computed(() => $screen.value.isMobile)
 const isMobileOrTablet = computed(
   () => $screen.value.isMobile || $screen.value.isTablet
 )
@@ -820,7 +821,6 @@ 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${
@@ -996,6 +996,9 @@ watch(
     border: 1px solid $neutral-4
     box-shadow: none
 
+    .mobile-centered-col
+      grid-column: span 2
+
     .q-item.q-item-type
       margin-top: 0px !important
       align-self: start
@@ -1025,7 +1028,7 @@ watch(
         font-size: 1rem
         font-weight: 500
         line-height: 1.063rem
-        width: 12.5rem
+        width: 100%
 
 .u-sticky-table-header
   .q-table__top,
@@ -1204,6 +1207,15 @@ watch(
   overflow: hidden
   text-overflow: ellipsis
 
+.no-ellipsis-content
+  white-space: normal !important
+
+.full-width-text-content
+  width: 19.5rem !important
+
+.tablet-event-text
+  width: 10.5rem
+
 .mobile-primary-caption
   width: 11.5rem !important
   white-space: nowrap