@usssa/component-library 1.0.0-alpha.191 → 1.0.0-alpha.193

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.191
+# Component Library v1.0.0-alpha.193
 
 **This library provides custom UI components for USSSA applications**
 
@@ -33,3 +33,4 @@ When done:
 
 1. In Nuxt or Quasar project directory run to unlink `yarn unlink @usssa/component-library`
 2. In component-library directory run `yarn unlink`
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.191",
+  "version": "1.0.0-alpha.193",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UModal.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 import { useQuasar } from 'quasar'
-import { useScreenType } from '../../composables/useScreenType'
 import UBtnStd from './UBtnStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
 
 const emit = defineEmits(['onBackIconClick', 'hideDialog'])
 const model = defineModel()
@@ -133,19 +133,6 @@ const getDialogHeaderheight = () => {
     if (headingWrapper) {
       scrollableMarginHeight.value = headingWrapper.clientHeight
     }
-
-    // dynamically adding height by removing toolbar height of 50px
-    const dialogWrapper = document.getElementsByClassName('dialog-wrapper')[0]
-    if (dialogWrapper) {
-      dialogWrapper?.setAttribute(
-        'style',
-        `max-height: ${
-          !isTablet.value
-            ? $q.screen.height - 80 + 'px !important'
-            : $q.screen.height / 2 - 50 + 'px !important'
-        }`
-      )
-    }
   },50)
 
   setTimeout(() => {
@@ -211,7 +198,7 @@ const onMouseDown = (event) => {
 
 const onTouchStart = (event) => {
   isDragging = true
-  event.preventDefault()
+  if (event.cancelable) event.preventDefault()
   startY = event.touches[0].clientY
   startHeight = currentDialogHeight.value
   window.addEventListener('touchmove', (e) => onDragMove(e))
@@ -269,10 +256,12 @@ watch(
     :style="dialogStyle"
   >
     <q-card
-      :class="`dialog-wrapper${!isMobile ? ' full-height' : ''}`"
+      :class="`dialog-wrapper`"
       :style="{
-        height: isMobile ? currentDialogHeight + 'px !important' : 'auto',
-        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: currentDialogHeight + 'px !important',
+        overflow: 'hidden',
       }"
     >
       <div
@@ -359,13 +348,16 @@ watch(
             isMobile ? scrollableMarginHeight + (isMobile ? 16 : 0) : 0
           }px`,
           'margin-bottom': `${getContentBottomSpace()}rem !important`,
-          height:
-            isTablet || isDesktop || isMobile
-              ? 'auto'
-              : currentDialogHeight -
+          flex: isMobile ? 'none' : 1,
+          overflowY: 'auto',
+          ...(isMobile && {
+               height:
+               currentDialogHeight -
                 (scrollableMarginHeight +
-                  (hasSlots() && slotsLength >= 3 ? 125 : 88)) +
-                'px !important',
+                  (hasSlots() && slotsLength >= 3 ? 144 : 88)) +
+                'px',
+          })
+
         }"
         tabindex="-1"
       >

package/src/components/core/UMultiSelectStd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, nextTick, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import UBtnStd from './UBtnStd.vue'
 import UBtnToggle from './UBtnToggle.vue'
 import UChip from './UChip.vue'
@@ -92,6 +92,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  showSheetInput: {
+    type: Boolean,
+    default: true,
+  },
   size: {
     type: String,
     default: 'md',
@@ -454,6 +458,7 @@ watch(selectedTab, () => {
         <slot v-else name="before-options" />
       </div>
       <q-select
+        v-if="showSheetInput"
         :model-value="selectedItems"
         :class="`u-multi-select field-md q-mt-ba`"
         behavior="menu"
@@ -617,4 +622,17 @@ watch(selectedTab, () => {
 .no-result-container
   display:  block
   padding: 0px
+
+.options-dialog
+  .sheet-card-wrapper .q-card__section .q-item
+    padding:$ba $ba !important
+    margin-bottom: $xs !important
+    border-radius: $sm !important
+    align-items: flex-start !important
+    .label
+      line-height: $ms !important
+    .q-icon
+      font-size: $ms !important
+    .q-focus-helper
+      display: none
 </style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { useQuasar } from 'quasar'
-import { computed, nextTick, onBeforeUnmount, onMounted , ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useScreenType } from '../../../composables/useScreenType'
 import UAvatar from '../UAvatar.vue'
 import UBtnStd from '../UBtnStd.vue'
@@ -69,17 +69,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  infiniteScrollProperty:{
+  infiniteScrollProperty: {
     type: Object,
     default: () => {
       return {
-      loading: false,
-      image:'',
-      type:'default',
-      size:'1rem',
-      color:'primary'
+        color: 'primary',
+        height: '55rem',
+        image: '',
+        loading: false,
+        noMoreData: false,
+        noMoreDataText: 'No more data',
+        padding: true,
+        size: '1rem',
+        type: 'default',
       }
-    }
+    },
   },
   rowCardHeight: {
     type: Number,
@@ -123,8 +127,10 @@ const $q = useQuasar()
 const $screen = useScreenType()
 
 const infiniteScrollProp = ref(props.infiniteScrollProperty)
+const isScrollActionActive = ref(false)
 const mobileActionsDialog = ref({})
 const moreActionsDialogs = ref({})
+const infiniteNoMoreShow = ref(false)
 const tableContainer = ref(null)
 const tableDataChip = ref(true) // this is required to show chip
 const tailClass = ref(null)
@@ -251,7 +257,12 @@ const handleOpenMobileMoreActions = (id) => {
 }
 
 const handleScroll = async () => {
-  if (!props.infiniteScroll || infiniteScrollProp.value.loading) return
+  if (
+    !props.infiniteScroll ||
+    infiniteScrollProp.value.loading ||
+    infiniteScrollProp.value.noMoreData
+  )
+    return
   const el = tableContainer.value
 
   if (!el) return
@@ -273,7 +284,7 @@ const handleScroll = async () => {
   if (distanceFromBottom <= 10) {
     const lastRow = rows.value[rows.value.length - 1]
     if (lastRow) {
-       emit('onLoadMore', lastRow)
+      emit('onLoadMore', lastRow)
     }
   }
 }
@@ -284,8 +295,11 @@ const isContentVisible = (field, id, type) => {
 }
 
 onMounted(() => {
+  infiniteNoMoreShow.value = false
   nextTick(() => {
-    attachScroll()
+    if (!infiniteScrollProp.value.noMoreData) {
+      attachScroll()
+    }
   })
 })
 
@@ -305,6 +319,41 @@ watch(
   }
 )
 
+// detach the scrollbar action(onLoadMore) when noMoreData occur
+watch(
+  () => infiniteScrollProp.value,
+  (newValue) => {
+    // Reset state when conditions change
+    if (!newValue) {
+      isScrollActionActive.value = false;
+      return;
+    }
+
+    // Handle active states
+    if (newValue.loading || newValue.noMoreData) {
+      isScrollActionActive.value = true;
+
+      if (newValue.noMoreData) {
+        infiniteNoMoreShow.value = true;
+        setTimeout(() => {
+          infiniteNoMoreShow.value = false;
+          detachScroll();
+
+          // Reset scroll active state after timeout
+          if (!infiniteScrollProp.value?.loading) {
+            isScrollActionActive.value = false;
+          }
+        }, 5000);
+      }
+    }
+    // Reset when neither loading nor noMoreData
+    else {
+      isScrollActionActive.value = false;
+    }
+  },
+  { immediate: true, deep: true }
+);
+
 watch(
   moreActionDialogData,
   (newData) => {
@@ -327,16 +376,21 @@ watch(
   },
   { immediate: true }
 )
-
 </script>
 
 <template>
   <component
     v-bind="
       infiniteScroll
-        ? { style: 'overflow-y: auto;height: 55rem;' }
-        : {}"
-    :class="[infiniteScroll && 'u-table-infinite-scroll-container ' , (grid && infiniteScroll ) ? 'q-pa-ba': '']"
+        ? {
+            style: `overflow-y: auto; height: ${infiniteScrollProperty.height};`,
+          }
+        : {}
+    "
+    :class="[
+      infiniteScroll && 'u-table-infinite-scroll-container ',
+      grid && infiniteScroll && infiniteScrollProperty.padding ? 'q-pa-ba' : '',
+    ]"
     :is="infiniteScroll ? 'div' : 'fragment'"
     ref="tableContainer"
   >
@@ -1830,26 +1884,36 @@ watch(
         </UExpansionStd>
       </template>
 
-    <template v-if="infiniteScroll" #bottom>
-    <div v-if="infiniteScrollProp.loading" :class="`relative-position full-width row justify-center ${grid ? `q-mt-ms q-mb-xs`:`q-py-lg`}`">
-      <UInnerLoader
-        v-if="infiniteScrollProp.type == 'default'"
-        image="/images/logo.svg"
-        :loading="infiniteScrollProp.loading"
-        loading-message="Loading data"
-        :spinner-color="infiniteScrollProp.color"
-        :spinner-size="infiniteScrollProp.size"
-      />
-      <q-spinner
-        v-if="infiniteScrollProp.type == 'spinner'"
-        :color="infiniteScrollProp.color"
-        :size="infiniteScrollProp.size"
-      />
-    </div>
-    <div v-if="infiniteScrollProp?.noMoreData" :class="`row full-width justify-center text-accent q-gutter-sm ${grid ? `q-mt-ms q-mb-xs`:`q-py-lg`}`">
-        <span>No more data</span>
-    </div>
-    </template>
+      <template v-if="(infiniteScroll && isScrollActionActive)" #bottom>
+        <div
+          v-if="infiniteScrollProp.loading"
+          :class="`relative-position full-width row justify-center ${
+            grid ? `q-mt-ms q-mb-xs` : `q-py-lg`
+          }`"
+        >
+          <UInnerLoader
+            v-if="infiniteScrollProp.type == 'default'"
+            image="/images/logo.svg"
+            :loading="infiniteScrollProp.loading"
+            :loading-message="infiniteScrollProp.loadingMessage"
+            :spinner-color="infiniteScrollProp.color"
+            :spinner-size="infiniteScrollProp.size"
+          />
+          <q-spinner
+            v-if="infiniteScrollProp.type == 'spinner'"
+            :color="infiniteScrollProp.color"
+            :size="infiniteScrollProp.size"
+          />
+        </div>
+        <div
+          v-if="infiniteScrollProp?.noMoreData && infiniteNoMoreShow"
+          :class="`row full-width justify-center text-accent q-gutter-sm ${
+            grid ? `q-mt-xs q-mb-ba` : `q-py-lg`
+          }`"
+        >
+          <span>{{ infiniteScrollProp.noMoreDataText }}</span>
+        </div>
+      </template>
     </q-table>
   </component>
 </template>

package/src/components/core/UTableStd.vue

@@ -99,11 +99,16 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
-        loading: false,
+        color: 'primary',
+        height: '55rem',
         image: '',
-        type: 'default',
+        loading: false,
+        loadingMessage: 'Loading data',
+        noMoreData: false,
+        noMoreDataText: 'No more data',
+        padding: true,
         size: '1rem',
-        color: 'primary',
+        type: 'default'
       }
     },
   },