@usssa/component-library 1.0.0-alpha.136 → 1.0.0-alpha.138

package/README.md

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

package/src/assets/upload-illustration.svg

@@ -0,0 +1,48 @@
+<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4523_215)">
+<path d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z" fill="#12316C"/>
+<mask id="mask0_4523_215" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
+<path d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z" fill="#0C5DF3"/>
+</mask>
+<g mask="url(#mask0_4523_215)">
+<path d="M-50.8244 24C-95.4313 24 -145.021 56.6832 -161.587 97C-178.152 137.317 -155.421 170 -110.814 170H81.9069C93.7832 141.226 72.0204 109.882 40.1655 109.882H-25.6088V152.824L-55.4051 127.059L-104.922 152.824L-74.4839 109.882L-105.032 84.1177H-56.177L-25.6144 41.1765V84.1177H50.7853C90.9569 84.1177 127.081 60.3089 142 24H-50.8244Z" fill="#1048BD"/>
+<rect x="55.5648" y="44.3368" width="89.4842" height="119.927" rx="8" transform="rotate(15 55.5648 44.3368)" fill="white"/>
+</g>
+<rect x="61.6106" y="57.4174" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 61.6106 57.4174)" fill="#B9E0FF"/>
+<rect x="55.8801" y="78.8034" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 55.8801 78.8034)" fill="#B9E0FF"/>
+<rect x="50.1498" y="100.189" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 50.1498 100.189)" fill="#52B3FF"/>
+<rect x="44.4194" y="121.575" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 44.4194 121.575)" fill="#B9E0FF"/>
+<rect x="38.6891" y="142.961" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(15 38.6891 142.961)" fill="#B9E0FF"/>
+<rect x="58.7454" y="68.1104" width="59.9637" height="5.53511" rx="2.76755" transform="rotate(15 58.7454 68.1104)" fill="#52B3FF"/>
+<rect x="53.015" y="89.4965" width="63.6537" height="5.53511" rx="2.76755" transform="rotate(15 53.015 89.4965)" fill="#B9E0FF"/>
+<rect x="47.2847" y="110.882" width="67.3438" height="5.53511" rx="2.76755" transform="rotate(15 47.2847 110.882)" fill="#B9E0FF"/>
+<rect x="41.5542" y="132.268" width="28.5981" height="5.53511" rx="2.76755" transform="rotate(15 41.5542 132.268)" fill="#52B3FF"/>
+<g filter="url(#filter0_d_4523_215)">
+<rect x="9" y="56.7385" width="89.4842" height="119.927" rx="8" transform="rotate(-15 9 56.7385)" fill="white"/>
+</g>
+<rect x="20.776" y="65.0439" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 20.776 65.0439)" fill="#B9E0FF"/>
+<rect x="26.5063" y="86.4299" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 26.5063 86.4299)" fill="#B9E0FF"/>
+<rect x="32.2367" y="107.816" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 32.2367 107.816)" fill="#52B3FF"/>
+<rect x="37.967" y="129.202" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 37.967 129.202)" fill="#B9E0FF"/>
+<rect x="43.6975" y="150.588" width="71.0339" height="5.53511" rx="2.76755" transform="rotate(-15 43.6975 150.588)" fill="#B9E0FF"/>
+<rect x="23.6411" y="75.7369" width="59.9637" height="5.53511" rx="2.76755" transform="rotate(-15 23.6411 75.7369)" fill="#52B3FF"/>
+<rect x="29.3716" y="97.1229" width="63.6537" height="5.53511" rx="2.76755" transform="rotate(-15 29.3716 97.1229)" fill="#B9E0FF"/>
+<rect x="35.1019" y="118.509" width="67.3438" height="5.53511" rx="2.76755" transform="rotate(-15 35.1019 118.509)" fill="#B9E0FF"/>
+<rect x="40.8323" y="139.895" width="28.5981" height="5.53511" rx="2.76755" transform="rotate(-15 40.8323 139.895)" fill="#52B3FF"/>
+</g>
+<defs>
+<filter id="filter0_d_4523_215" x="2.79602" y="27.3742" width="129.883" height="151.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0666667 0 0 0 0 0.0784314 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4523_215"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4523_215" result="shape"/>
+</filter>
+<clipPath id="clip0_4523_215">
+<rect width="150" height="150" rx="75" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/core/UDialogStd.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useQuasar } from 'quasar'
 import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
@@ -15,10 +16,6 @@ const props = defineProps({
     type: String,
     default: 'dialog',
   },
-  dialogHeight: {
-    default: 850,
-    type: Number,
-  },
   divider: Boolean,
   heading: {
     type: String,
@@ -36,7 +33,7 @@ const props = defineProps({
 })
 
 // constants
-const MAX_HEIGHT = props.dialogHeight
+const MAX_HEIGHT = 750
 const MIN_HEIGHT = 120
 let isDragging = false
 let startHeight = 0
@@ -44,8 +41,10 @@ let startY = 0
 
 const $screen = useScreenType()
 const $slots = useSlots()
+const $q = useQuasar()
 
-const currentDialogHeight = ref(props.dialogHeight)
+const dialogMaxHeight = ref(MAX_HEIGHT)
+const currentDialogHeight = ref(dialogMaxHeight.value)
 const dialogRef = ref(true)
 const scrollableMarginHeight = ref(null)
 
@@ -57,9 +56,16 @@ const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
 
+const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
+const isSmallWidthDevices = computed(() => $q.screen.width < 400)
+const smallDevices = computed(() => {
+  return {
+    sm: $q.screen.height < 800 && $q.screen.height > 700,
+    xs: $q.screen.height < 700,
+  }
+})
 const isTablet = computed(() => $screen.value.isTablet)
-const isDesktop = computed(() => $screen.value.isDesktop)
 
 const getDialogHeaderheight = () => {
   setTimeout(() => {
@@ -109,9 +115,12 @@ const onDragMove = (event) => {
   // limiting dialog height to MAX HEIGHT
   currentDialogHeight.value = Math.min(
     Math.max(MIN_HEIGHT, newHeight),
-    MAX_HEIGHT
+    dialogMaxHeight.value
   )
-  if (Math.min(Math.max(MIN_HEIGHT, newHeight), MAX_HEIGHT) <= MIN_HEIGHT) {
+  if (
+    Math.min(Math.max(MIN_HEIGHT, newHeight), dialogMaxHeight.value) <=
+    MIN_HEIGHT
+  ) {
     setTimeout(() => {
       dialogRef.value.hide() // if user is dragging then it should close from here
     }, 200)
@@ -148,12 +157,32 @@ onMounted(() => {
   getDialogHeaderheight()
 })
 
+watch(
+  smallDevices,
+  (newData) => {
+    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()
     if (!newData) {
-      currentDialogHeight.value = MAX_HEIGHT
+      currentDialogHeight.value =
+        smallDevices.value.xs || smallDevices.value.sm
+          ? smallDevices.value.xs
+            ? 550
+            : 580
+          : 750
     }
   },
   { immediate: true }
@@ -266,12 +295,14 @@ watch(
         v-if="showActionButtons"
         :class="`q-pa-ba action-wrapper${
           isMobile ? ' fixed-action-wrapper' : ''
-        }`"
+        }${isTablet && hasAllActionSlots() ? ' tablet-full-btn-actions' : ''}`"
+        id="dialog-action-wrapper"
         :style="{
           gap: hasSlots(),
-          flexWrap: isMobile && hasAllActionSlots() ? 'wrap' : 'no-wrap',
+          flexWrap:
+            (isMobile || isTablet) && hasAllActionSlots() ? 'wrap' : 'no-wrap',
           justifyContent:
-            (isMobile && hasAllActionSlots()) || hasSlots()
+            ((isMobile || !isTablet) && hasAllActionSlots()) || hasSlots()
               ? 'space-between'
               : 'flex-end',
         }"
@@ -280,17 +311,40 @@ watch(
           v-if="
             !!$slots['action_secondary_one'] || !!$slots['action_secondary_two']
           "
-          :class="`action-buttons${isMobile ? ' full-width-actions' : ''}`"
+          :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'
+              : ''
+          }`"
           align="left"
         >
           <slot name="action_secondary_one" />
           <slot name="action_secondary_two" />
         </q-card-actions>
+
         <q-card-actions
           v-if="
             !!$slots['action_primary_one'] || !!$slots['action_primary_two']
           "
-          :class="`action-buttons${isMobile ? ' full-width-actions' : ''}`"
+          :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'
+              : ''
+          }`"
           align="right"
         >
           <slot name="action_primary_one" />
@@ -393,6 +447,7 @@ watch(
   display: flex
   align-items: center
   gap: $xs
+  flex-wrap: nowrap
   .q-btn
     margin: 0 !important
 
@@ -434,6 +489,11 @@ watch(
 
 .full-width-actions
   width: 100%
+  flex-wrap: nowrap
+
+.mobile-btn-actions, .tablet-full-btn-actions
+  .q-btn
+   width: 100%
 
 .dialog-full .no-heading-section
   padding-top: 0px !important
@@ -465,4 +525,14 @@ watch(
 
 .scrollable::-webkit-scrollbar
   z-index: 9999
+
+.small-device-class
+  justify-content: center
+  .q-btn
+    width: 100%
+    .button-label
+      white-space: nowrap
+      width: 9.5rem
+      overflow: hidden
+      text-overflow: ellipsis
 </style>

package/src/components/core/USheet.vue

@@ -193,10 +193,8 @@ watch(
         <div class="drag-handle" />
       </div>
 
-      <q-card-section
-          class="column q-pt-none q-pb-xs q-px-ba q-mt-ba"
-        >
-         <div class="row items-start justify-between no-wrap">
+      <q-card-section class="column q-pt-none q-pb-xs q-px-ba q-mt-ba">
+        <div class="row items-start justify-between no-wrap">
           <div class="heading-wrapper row">
             <div
               class="flex items-center justify-center dialog-heading-container"
@@ -243,19 +241,21 @@ watch(
               tabindex="-1"
             />
           </UBtnStd>
-
-         </div>
-         <slot name="header"></slot>
-        </q-card-section>
-      <q-card-section
-        class="main-content-dialog  q-px-ba"
-        tabindex="-1"
-      >
+        </div>
+        <slot name="header"></slot>
+      </q-card-section>
+      <q-card-section class="main-content-dialog q-px-ba" tabindex="-1">
         <slot name="content"></slot>
       </q-card-section>
     </q-card>
-    <div v-if="showActionButtons && dialog.height > 70" class="sheet-action-wrapper">
-      <q-card-actions class="action-buttons q-px-sm q-py-ba" align="center">
+    <div
+      v-if="showActionButtons && dialog.height > 70"
+      class="sheet-action-wrapper"
+    >
+      <q-card-actions
+        class="sheet-action-buttons q-px-sm q-py-ba"
+        align="center"
+      >
         <slot name="action_primary_one"></slot>
         <slot name="action_primary_two"></slot>
       </q-card-actions>
@@ -307,7 +307,7 @@ watch(
 .outer-wrapper
   overflow: auto
 
-.action-buttons
+.sheet-action-buttons
   display: flex
   align-items: center
   gap: $xs

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

@@ -170,6 +170,11 @@ const handleOpenMobileMoreActions = (id) => {
   moreActionsDialogs.value = dialogObjMap
 }
 
+// checking for tooltip is content is visible
+const isContentVisible = (field, id, type) => {
+  return document.getElementById(`long-${type}-${field}-${id}`)
+}
+
 watch(
   moreActionDialogData,
   (newData) => {
@@ -335,7 +340,11 @@ watch(
                           {{ col.value }}
                         </span>
                         <UTooltip
-                          v-if="col.value && col.value.length > 12"
+                          v-if="
+                            col.value &&
+                            col.value.length > 12 &&
+                            isContentVisible(col.field, props.row.id, 'content')
+                          "
                           anchor="bottom middle"
                           :description="col.value"
                           :offset="[10, 40]"
@@ -352,7 +361,8 @@ watch(
                         <UTooltip
                           v-if="
                             props.row[col.captionKey] &&
-                            props.row[col.captionKey].length > 12
+                            props.row[col.captionKey].length > 12 &&
+                            isContentVisible(col.field, props.row.id, 'caption')
                           "
                           anchor="bottom middle"
                           :description="props.row[col.captionKey]"

package/src/components/core/UTabsStd.vue

@@ -1,4 +1,7 @@
 <script setup>
+import { computed } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
+
 const selectedTab = defineModel({
   required: true,
   type: [Boolean, String, Number],
@@ -15,12 +18,20 @@ const props = defineProps({
     required: true,
   },
 })
+
+const $screen = useScreenType()
+
+const isMobileOrTablet = computed(
+  () => $screen.value.isMobile || $screen.value.isTablet
+)
 </script>
 
 <template>
   <q-tabs
     v-model="selectedTab"
-    class="u-tabs-std text-caption-md"
+    :class="`u-tabs-std text-caption-md${
+      isMobileOrTablet ? ' mobile-tabs remove-actions' : ''
+    }`"
     active-color="primary"
     :align="align"
     :dataTestId="dataTestId"
@@ -88,6 +99,8 @@ const props = defineProps({
 .u-tabs-std
   color: $dark
   font-weight: 500
+  .q-tabs__content
+    overflow: auto
 
   & .q-tab__content
     & .q-icon
@@ -106,11 +119,22 @@ const props = defineProps({
 
   .q-tab--inactive, .q-tab--active
     min-width: 5.5rem
+    height: $lg
 
   .q-tab--inactive
     border-bottom: 2px solid $neutral-3
     opacity: 1
 
   .q-tab--inactive:hover
-    color: $primary
+    color: inherit
+
+.mobile-tabs
+  .q-tab--inactive, .q-tab--active
+    min-width: auto !important
+
+.remove-actions
+  .q-tabs__arrow
+    display: none
+  padding-left: 0px !important
+  padding-right: 0px !important
 </style>

package/src/components/core/UUploader.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+import { computed, ref } from 'vue'
 import { fixStringLength, formatDate, getFileCategory } from '../../utils/data'
 import UBtnIcon from './UBtnIcon.vue'
 import UBtnStd from './UBtnStd.vue'
@@ -74,10 +75,14 @@ const props = defineProps({
   },
 })
 
+const $q = useQuasar()
+
 const fileDisplayName = ref([])
 const isEditing = ref([])
 const uploaderRef = ref(null)
 
+const isSmallWidthDevices = computed(() => $q.screen.width < 350)
+
 const cancelEdit = (payload) => {
   const { index, file } = payload
   fileDisplayName.value[file['__key']] = file.displayName
@@ -144,14 +149,17 @@ defineExpose({ upload })
       <template v-slot:header="scope">
         <div v-if="scope.canAddFiles" class="q-py-md q-px-xl bg-neutral-2">
           <div class="text-center">
-            <img alt="Upload Files" src="../../assets/files.png" />
-            <div class="text-body-md" dataTestId="description">
+            <img
+              alt="Upload Files"
+              src="../../assets/upload-illustration.svg"
+            />
+            <div class="text-body-md q-mt-ba" dataTestId="description">
               {{ description }}
             </div>
           </div>
           <div class="list-items row">
             <UBtnStd
-              class="q-mt-md q-mb-md"
+              class="q-mt-md"
               color="primary"
               dataTestId="select-file-btn"
               :full-width="true"
@@ -182,12 +190,12 @@ defineExpose({ upload })
       <template v-slot:list="scope">
         <div
           v-if="!listExternal && scope.files"
-          class="list-container q-my-xxs"
+          class="list-container"
           dataTestId="file-list"
         >
           <q-card
             v-for="(file, index) in scope.files"
-            :class="`uploader-list list-size-${size} ${
+            :class="`uploader-list ${
               file.__status == 'uploading'
                 ? 'q-py-xs q-px-sm'
                 : 'uploaded-container'
@@ -426,6 +434,9 @@ defineExpose({ upload })
                 />
 
                 <UBtnStd
+                  :class="`update-file-action${
+                    isSmallWidthDevices ? ' uploader-small-device-class' : ''
+                  }`"
                   color="primary"
                   :full-width="true"
                   label="Update file name"
@@ -455,6 +466,8 @@ defineExpose({ upload })
     display: grid
     place-items: center
     gap: $xxs
+    .q-card__section img
+      width: 100%
   .q-uploader
     width: auto !important
     max-height: unset !important
@@ -462,6 +475,7 @@ defineExpose({ upload })
     background: $neutral-2
     border-radius: $xs
     box-shadow: 0px 0px 2px 0px rgba(16, 17, 20, 0.04)
+    width: 100%
   .uploaded-container
     padding: $sm
   .list-items
@@ -472,10 +486,6 @@ defineExpose({ upload })
     gap:$ba
   .update-button
     gap:$sm
-  .list-size-sm
-    width: 21.75rem
-  .list-size-md
-    width: 100%
   .title
       color: $dark
   .info
@@ -505,4 +515,13 @@ defineExpose({ upload })
     border-radius:$sm
   .u-uploader
     display: flex
+  .update-file-action
+    padding-left: $xs !important
+    padding-right: $xs !important
+  .uploader-small-device-class
+    .button-label
+      white-space: nowrap
+      width: 6.5rem
+      overflow: hidden
+      text-overflow: ellipsis
 </style>