@usssa/component-library 1.0.0-alpha.168 → 1.0.0-alpha.169

package/README.md

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

package/src/components/core/UModal.vue

@@ -1,12 +1,16 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
-import { useScreenType } from '../../composables/useScreenType'
 import { useQuasar } from 'quasar'
+import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
 
 const emit = defineEmits(['onBackIconClick', 'hideDialog'])
 const model = defineModel()
 const props = defineProps({
+  class: {
+    type: String,
+    default: 'filter-dialog-modal',
+  },
   closeIcon: String,
   closeIconLabel: String,
   customSize: {
@@ -16,6 +20,10 @@ const props = defineProps({
     type: String,
     default: 'modal',
   },
+  dataTestIdCloseIcon: {
+    type: String,
+    default: 'modal-close',
+  },
   divider: Boolean,
   heading: {
     type: String,
@@ -54,6 +62,10 @@ const dialogStyle = computed(() => ({
 const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
+
+const className = computed(() => {
+  return props.class ? props.class: 'filter-dialog-modal'
+})
 const isDesktop = computed(() => $screen.value.isDesktop)
 const isMobile = computed(() => $screen.value.isMobile)
 const isSmallWidthDevices = computed(() => $q.screen.width < 400)
@@ -86,7 +98,7 @@ const getActionsWrapperFlex = () => {
     }
   }
   if (isTablet.value) {
-    if (slotsLength.value >= 3) {
+    if (slotsLength.value >= 2) {
       return 'nowrap'
     } else {
       return 'wrap'
@@ -120,7 +132,7 @@ const getDialogHeaderheight = () => {
     if (dialogWrapper) {
       dialogWrapper?.setAttribute(
         'style',
-        `max-height: ${$q.screen.height - 50}px !important`
+        `max-height: ${ !isTablet.value ? $q.screen.height - 50+ 'px !important' : ($q.screen.height/2)- 50+ 'px !important'}`
       )
     }
 
@@ -128,7 +140,7 @@ const getDialogHeaderheight = () => {
       props.showActionButtons && props.showSecondaryButtons
         ? $q.screen.height - 80
         : props.showActionButtons || props.showSecondaryButtons
-        ? $q.screen.height - 50
+        ?  !isTablet.value ? $q.screen.height - 50+ 'px !important' : ($q.screen.height/2)- 50+ 'px !important'
         : $q.screen.height - 10
 
     dialogMaxHeight.value =
@@ -240,7 +252,7 @@ watch(
   <q-dialog
     v-bind="$attrs"
     v-model="model"
-    :class="`filter-dialog-${isMobile ? 'full' : size} filter-dialog`"
+    :class="`filter-dialog-${isMobile ? 'full' : (isTablet ? 'tab' : size )} filter-dialog ${className}`"
     :dataTestId="dataTestId"
     full-width
     no-backdrop-dismiss
@@ -252,7 +264,7 @@ watch(
       :class="`dialog-wrapper${!isMobile ? ' full-height' : ''}`"
       :style="{
         height: isMobile ? currentDialogHeight + 'px !important' : 'auto',
-        overflow: isMobile ? 'hidden' : 'auto',
+        overflow: 'auto',
       }"
     >
       <div
@@ -309,6 +321,7 @@ watch(
           <UBtnStd
             class="dialog-action-icons"
             :aria-label="closeIconLabel"
+            :data-test-id="dataTestIdCloseIcon"
             :flat="true"
             tabindex="0"
             @click="dialogRef.hide()"
@@ -328,10 +341,10 @@ watch(
 
       <q-card-section
         :class="[
-          `full-height main-content-dialog scroll q-px-ba${
+          ` main-content-dialog scroll q-px-ba${
             isMobile ? ' scrollable-content' : ''
-          }`,
-          { mobile: isMobile, desktop: isDesktop || isTablet },
+    } `,
+          { mobile: isMobile, desktop: isDesktop ,tablet: isTablet },
         ]"
         :style="{
           'margin-top': `${
@@ -339,7 +352,7 @@ watch(
           }px`,
           'margin-bottom': `${getContentBottomSpace()}rem !important`,
           height:
-            isTablet || isDesktop
+            isTablet || isDesktop || isMobile
               ? 'auto'
               : currentDialogHeight -
                 (scrollableMarginHeight +
@@ -429,7 +442,7 @@ watch(
 </template>
 
 <style lang="sass">
-.filter-dialog-default, .filter-dialog-half
+.filter-dialog-default, .filter-dialog-half, .filter-dialog-tab
   .q-dialog__inner--left, .q-dialog__inner--right
     .dialog-wrapper
       max-height: 100vh !important
@@ -445,6 +458,12 @@ watch(
       margin: auto
       width: 50% !important
 
+.filter-dialog-tab
+    .q-dialog__inner
+      padding: $ba 0
+      margin: auto
+      width: 75% !important
+
 .filter-dialog-custom
     .q-dialog__inner
       padding: $ba 0
@@ -468,7 +487,7 @@ watch(
         border-radius: 0 !important
     .main-content-dialog
       &.mobile
-        padding: $xs $ba
+        padding: 0 $ba $xs $ba
       &.desktop
         padding: $ms $ms
         padding-bottom: 0
@@ -506,7 +525,8 @@ watch(
     color: $dark
 
   .heading-section
-      padding: $ba
+      padding: $ba $ms
+      flex-grow: 0 !important
 
   .dialog-wrapper
     border-radius: $xs !important