@usssa/component-library 1.0.0-alpha.105 → 1.0.0-alpha.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.105",
+  "version": "1.0.0-alpha.107",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -20,10 +20,6 @@ const props = defineProps({
   model: {
     type: Object,
   },
-  size: {
-    type: String,
-    default: 'md',
-  },
   searchType: {
     type: String,
   },
@@ -31,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String,
+    default: 'md',
+  },
   title: {
     type: String,
     default: 'Advanced search',
@@ -48,22 +48,22 @@ const emit = defineEmits([
   'updateAdvanceSearchToggle',
 ])
 
-const menuSize = computed(() => {
-  if (props.size === 'md') {
-    return '24.1875rem'
-  } else if (props.size === 'sm') {
-    return '23.5625rem'
+const clearFields = () => {
+  emit('onClearAdvancedSearchFilter')
+}
+
+const getKeyValueByTitle = (label) => {
+  const model = props.model
+  const camelCaseKey = titleToCamelCase(label)
+  if (camelCaseKey in model) {
+    return model[camelCaseKey]
   } else {
-    return props.size
+    return ''
   }
-})
-
-const updateModelVal = (event, index) => {
-  emit('updateModelVal', event.trim(), index)
 }
 
-const updateCountry = (val, label) => {
-  emit('updateCountry', val, label)
+const onApply = () => {
+  emit('onApplyAdvancedSearchFilter')
 }
 
 const titleToCamelCase = (str) => {
@@ -79,22 +79,12 @@ const titleToCamelCase = (str) => {
     .join('')
 }
 
-const getKeyValueByTitle = (label) => {
-  const model = props.model
-  const camelCaseKey = titleToCamelCase(label)
-  if (camelCaseKey in model) {
-    return model[camelCaseKey]
-  } else {
-    return ''
-  }
-}
-
-const clearFields = () => {
-  emit('onClearAdvancedSearchFilter')
+const updateCountry = (val, label) => {
+  emit('updateCountry', val, label)
 }
 
-const onApply = () => {
-  emit('onApplyAdvancedSearchFilter')
+const updateModelVal = (event, index) => {
+  emit('updateModelVal', event.trim(), index)
 }
 
 const updateToggle = (val) => {
@@ -106,17 +96,17 @@ const updateToggle = (val) => {
   <div>
     <q-expansion-item
       v-bind="$attrs"
+      :modelValue="toggle"
       class="overflow-hidden u-expansion"
       dense-toggle
       header-class="bg-neutral-2"
       :label="title"
       :style="`width: ${size}`"
-      :modelValue="toggle"
       @update:modelValue="(val) => updateToggle(val)"
     >
       <template #header>
         <div class="row items-center full-width">
-          <q-icon :class="labelIcon" size="1rem" color="neutral-9" />
+          <q-icon :class="`${labelIcon}`" color="neutral-9" size="1rem" />
           <span class="q-ml-xs text-caption-sm text-neutral-13">
             {{ title }}
           </span>
@@ -128,7 +118,7 @@ const updateToggle = (val) => {
         <slot name="custom-menu" />
       </template>
 
-      <section v-else class="bg-neutral-2 q-px-ba">
+      <section v-else class="bg-neutral-2 q-px-ba q-pb-ba">
         <div class="row items-container">
           <div
             v-for="(item, index) in fields && fields.length ? fields : []"
@@ -144,10 +134,10 @@ const updateToggle = (val) => {
             <UInputTextStd
               v-if="item.inputType === 'Text'"
               v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
               :aria-label="item.label"
               :hintText="item.hintText"
               :label="item.label"
-              :modelValue="getKeyValueByTitle(item.label)"
               @update:modelValue="
                 updateModelVal($event, titleToCamelCase(item.label))
               "
@@ -155,11 +145,11 @@ const updateToggle = (val) => {
             <USelectStd
               v-if="item.inputType === 'Select'"
               v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
               :aria-label="item.label"
               hintIcon=""
               :hintText="item.hintText"
               :label="item.label"
-              :modelValue="getKeyValueByTitle(item.label)"
               :options="item.options"
               @update:modelValue="
                 updateModelVal($event, titleToCamelCase(item.label))
@@ -168,10 +158,10 @@ const updateToggle = (val) => {
             <UMultiSelectStd
               v-if="item.inputType === 'Multiselect'"
               v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
               :aria-label="item.label"
               :hintText="item.hintText"
               :label="item.label"
-              :modelValue="getKeyValueByTitle(item.label)"
               :options="item.options"
               @update:modelValue="
                 updateModelVal($event, titleToCamelCase(item.label))
@@ -180,11 +170,11 @@ const updateToggle = (val) => {
             <UInputPhoneStd
               v-if="item.inputType === 'Phone'"
               v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
               :aria-label="item.label"
               hintIcon=""
               :hintText="item.hintText"
               :label="item.label"
-              :modelValue="getKeyValueByTitle(item.label)"
               :options="item.options"
               placeholder=""
               :selected-country="model.selectedCountry"
@@ -200,10 +190,10 @@ const updateToggle = (val) => {
             <UInputTextStd
               v-if="item.inputType === 'Date'"
               v-bind="item.props"
+              :modelValue="getKeyValueByTitle(item.label)"
               :aria-label="item.label"
               :hintText="item.hintText"
               :label="item.label"
-              :modelValue="getKeyValueByTitle(item.label)"
               outlined
               parentClass="col"
               @update:modelValue="
@@ -212,7 +202,7 @@ const updateToggle = (val) => {
             >
               <template v-slot:append>
                 <q-icon
-                  class="fa-kit-duotone fa-calendar-range cursor-pointer"
+                  class="fa-kit-duotone fa-calendar-range cursor-pointer icon-secondary-opacity"
                   aria-label="Birthday calendar"
                   color="neutral-9"
                   size="1rem"
@@ -220,14 +210,14 @@ const updateToggle = (val) => {
                 >
                   <q-popup-proxy
                     cover
-                    transition-show="scale"
                     transition-hide="scale"
+                    transition-show="scale"
                   >
                     <q-date
                       v-model="item.value"
                       v-bind="item.dateProps"
-                      mask="MM/DD/YYYY"
                       :modelValue="getKeyValueByTitle(item.label)"
+                      mask="MM/DD/YYYY"
                       @update:modelValue="
                         updateModelVal($event, titleToCamelCase(item.label))
                       "
@@ -250,25 +240,23 @@ const updateToggle = (val) => {
 
         <!-- Action Buttons -->
 
-        <div class="action-wrapper">
-          <q-card-actions align="left" class="full-width">
-            <UBtnStd
-              color="primary"
-              flat
-              label="Clear All Fields"
-              leftIcon="fa-kit fa-rotate-left"
-              @onClick="clearFields"
-            />
-          </q-card-actions>
-          <q-card-actions align="right" class="full-width">
-            <UBtnStd
-              color="primary"
-              :disable="disbaleApplyFilter"
-              :full-width="true"
-              label="Apply"
-              @onClick="onApply"
-            />
-          </q-card-actions>
+        <div class="action-wrapper q-mt-ba">
+          <UBtnStd
+            class="col"
+            color="primary"
+            flat
+            label="Clear All Fields"
+            leftIcon="fa-kit fa-rotate-left"
+            @onClick="clearFields"
+          />
+
+          <UBtnStd
+            class="col"
+            color="primary"
+            :disable="disbaleApplyFilter"
+            label="Apply"
+            @onClick="onApply"
+          />
         </div>
       </section>
     </q-expansion-item>
@@ -288,7 +276,6 @@ const updateToggle = (val) => {
       color: $neutral-9
   .action-wrapper
     display: flex
-    justify-content: space-between
     gap: $xs
   .q-card__actions
     padding: 0px

package/src/components/core/UMenuSearch.vue

@@ -473,7 +473,7 @@ watch(
     @show="onMenuShow"
   >
     <q-list
-      :class="`u-typeahead-menu q-px-ba q-pt-ba size-${size}`"
+      :class="`u-typeahead-menu q-pl-ba q-pt-ba size-${size}`"
       role="menuitem"
     >
       <div v-if="showAdvancedSearchTabs" class="q-pb-xs">
@@ -491,7 +491,7 @@ watch(
           />
         </div>
       </div>
-      <div class="q-mt-xs">
+      <div class="q-mt-xs q-mr-ba">
         <!-- Menu dropdown -->
         <UMenuDropdownAdvancedSearch
           v-if="showAdvancedSearch"
@@ -515,7 +515,7 @@ watch(
 
         <q-list
           v-if="searchResults && !exceedLimit && searchText.length"
-          class="search-list q-mt-xs"
+          class="search-list q-mt-xs q-px-xxs"
         >
           <span class="text-overline-xs">Search results</span>
           <template
@@ -523,7 +523,7 @@ watch(
             :key="category"
           >
             <q-item-label caption>
-              <span class="text-caption-sm">
+              <span class="text-caption-sm q-py-xxs">
                 {{ transformCategory(category) }}
               </span>
             </q-item-label>
@@ -547,6 +547,7 @@ watch(
                   v-else
                   :aria-label="item.name"
                   :image="item.profilePictureUrl"
+                  :name="item.name"
                   :round="true"
                   :showIndicator="false"
                   size="md"
@@ -621,7 +622,9 @@ watch(
           </div>
 
           <div v-if="showInviteBtn" class="row items-center full-width">
-            <span :class="`searchText-${size} text-caption-md q-mr-xs`">
+            <span
+              :class="`searchText-${size} text-caption-md q-mr-xs col wrapped-text`"
+            >
               {{ searchText }}
             </span>
             <UBtnStd
@@ -653,7 +656,7 @@ watch(
 
         <!-- Recently selected list -->
 
-        <q-list class="search-list q-mt-xs">
+        <q-list class="search-list q-mt-xs q-px-xxs">
           <div
             v-if="showRecentSelected && recentSearchesLoading"
             class="row justify-between items-center"
@@ -768,8 +771,13 @@ watch(
     overflow-wrap: unset
   .u-tabs-outer .u-tab-sm
     margin: 0 $xxs
+    padding: 0 $ba
   .u-tabs-outer .u-tab-sm:first-child
     margin-left: 0px
+  .u-tabs-outer .u-tab-sm:last-child
+    margin-right: 0px
+  .u-tabs-outer .q-tab__content .q-icon
+    font-size: 0.75rem
   .tabs-option
     display: flex
     overflow-y: auto
@@ -779,16 +787,15 @@ watch(
   border-radius: $xs
   background: $neutral-1
   &.size-sm
-    width: 24.5625rem
+    max-width: 25.5625rem
   &.size-md
-    width: 26.5rem
+    max-width: 26.5rem
   .search-list
     display: flex
     flex-direction: column
     gap: $xxs
   .list-item
     border-radius: $xs
-    padding: $xs
     align-items: center
     display: flex
     cursor: default !important

package/src/components/core/UPagination.vue

@@ -1,23 +1,21 @@
 <script setup>
 import { ref, watch } from 'vue'
 import USelectStd from './USelectStd.vue'
+
+const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
 const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 1,
-  },
-  rowPerPage: {
+  maxPages: {
     type: Number,
-    default: 5,
+    default: 10,
   },
   maxPageLink: {
     //Maximum number of page links to display at a time
     type: Number,
     default: 2,
   },
-  maxPages: {
+  modelValue: {
     type: Number,
-    default: 10,
+    default: 1,
   },
   perPageOptions: {
     type: Array,
@@ -28,45 +26,53 @@ const props = defineProps({
       { label: '20 / per page', value: 20 },
     ],
   },
+  rowPerPage: {
+    type: Number,
+    default: 5,
+  },
 })
-const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
-const rowPerPage = ref(props.rowPerPage)
+
+// refs
 const currentPage = ref(props.modelValue)
+const rowPerPage = ref(props.rowPerPage)
 
-watch(currentPage, (newValue) => {
-  emit('update:modelValue', newValue)
-  emit('onPageChange', newValue)
-})
+// custom functions
 const onPageChange = (newPage) => {
   currentPage.value = newPage
 }
 const onRowChange = (newRowPerPage) => {
   emit('onRowChange', newRowPerPage)
 }
+
+// watcher function
+watch(currentPage, (newValue) => {
+  emit('update:modelValue', newValue)
+  emit('onPageChange', newValue)
+})
 </script>
 
 <template>
-  <div class="row u-pagination-container"> 
+  <div class="row u-pagination-container">
     <q-pagination
-      class="u-pagination"
       v-model="currentPage"
+      class="u-pagination"
+      active-color="primary"
+      boundary-numbers
+      color="dark"
       direction-links
       flat
-      color="dark"
-      active-color="primary"
+      gutter="sm"
       :max="maxPages"
       :max-pages="maxPageLink"
-      boundary-numbers
       @update:model-value="onPageChange"
-      gutter="sm"
     />
 
     <USelectStd
-      class="q-gutter-x-sm text-body-sm perpage-dropdown"
       v-model="rowPerPage"
+      class="q-gutter-x-sm text-body-sm perpage-dropdown"
+      popupClass="pagination-dropdown"
       color="primary"
       :options="perPageOptions"
-      popupClass="pagination-dropdown"
       @update:model-value="onRowChange"
     />
   </div>
@@ -77,9 +83,10 @@ const onRowChange = (newRowPerPage) => {
   width: auto !important
 
 .perpage-dropdown
-  width: 9.375rem
   .q-field__marginal
     padding-left: $xs
+  .q-field--outlined
+    margin-top: 0 !important
   .q-field--outlined .q-field__control
     display: inline-flex
     width: 8.75rem

package/src/components/core/USelectStd.vue

@@ -88,6 +88,31 @@ const model = computed({
     return emit('update:modelValue', value)
   },
 })
+
+// adding scroll if highlighted menu is not visible to user
+const handleKeydown = () => {
+  setTimeout(() => {
+    const currentItem = document.getElementsByClassName(
+      'q-manual-focusable--focused'
+    )[0]
+    const dropdownContainer =
+      document.getElementsByClassName('u-options-menu')[0]
+    if (currentItem && dropdownContainer) {
+      const itemRect = currentItem.getBoundingClientRect()
+      const containerRect = dropdownContainer.getBoundingClientRect()
+      const isVisible =
+        itemRect.top >= containerRect.top &&
+        itemRect.bottom <= containerRect.bottom
+      if (!isVisible) {
+        currentItem.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }
+  }, 100)
+}
 </script>
 
 <template>
@@ -134,6 +159,7 @@ const model = computed({
       :placeholder="placeholder"
       :use-input="useInput"
       @filter="filterFn"
+      @keydown="handleKeydown"
     >
       <template v-slot:no-option>
         <q-item>

package/src/components/core/UTableStd.vue

@@ -178,16 +178,16 @@ const handleActionColClick = (e) => {
   e.stopPropagation()
 }
 
-const handleMenuEventStop = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-}
-
 //if user want to add custom sort on data
 const handleCustomSort = (key, sortOrder, type) => {
   emit('onCustomSort', key, sortOrder, type)
 }
 
+const handleMenuEventStop = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
 // handling the large selection data in chunks
 const handleSelectAllData = () => {
   customLoading.value = true
@@ -281,6 +281,13 @@ const isRowSelected = (row) => {
   }
 }
 
+// removing console error for show dialog
+const onMoreActionButtonClick = (id) => {
+  if (moreActionDialogData.value) {
+    moreActionDialogData.value.showDialog[id] = false
+  }
+}
+
 // handle to change the page, and if virtual scroll is enabled and user scrolled to bottom it will take user to the top
 const onPageChange = (value) => {
   pagination.value.page = value
@@ -323,8 +330,8 @@ const onRowPerPageChange = (value) => {
           v-if="multiSelection"
           :separator="separator"
           style="width: 3% !important"
-          :tableHeaderAutoWidth="false"
           tableHeadAlignment="left"
+          :tableHeaderAutoWidth="false"
         >
           <UCheckboxStd
             v-model="isRowSelected(null).value"
@@ -342,8 +349,8 @@ const onRowPerPageChange = (value) => {
             :key="key"
             :separator="separator"
             :style="col.headerStyle"
-            :tableHeaderAutoWidth="col.autoWidth"
             :tableHeadAlignment="col.field === 'action' ? col.align : col.align"
+            :tableHeaderAutoWidth="col.autoWidth"
             @click="
               col.sortable
                 ? isCustomSort
@@ -414,8 +421,8 @@ const onRowPerPageChange = (value) => {
               <UChip
                 v-model="tableDataChip"
                 class="u-table-chip"
-                avatarLabel=""
                 :anchor="col.anchor"
+                avatarLabel=""
                 :chipLabel="props.row[col.field].toString()"
                 :dense="col.denseChip"
                 :is-show-tooltip="col.showChipTooltip"
@@ -474,8 +481,8 @@ const onRowPerPageChange = (value) => {
                   <template v-if="props.row[col.field]">
                     <q-icon
                       :class="props.row[col.field]"
-                      :aria-label="props.row.ariaLabel"
                       :alt="props.row.ariaLabel"
+                      :aria-label="props.row.ariaLabel"
                       :color="props?.row?.iconColor ?? 'primary'"
                       size="1.5rem"
                     />
@@ -547,7 +554,7 @@ const onRowPerPageChange = (value) => {
                       : action.outline
                   "
                   :size="action.size"
-                  @onClick="action.handler(props.row)"
+                  @on-click="action.handler(props.row)"
                 >
                   <template #tooltip>
                     <UTooltip
@@ -585,8 +592,8 @@ const onRowPerPageChange = (value) => {
                 :offset="[85, 0]"
                 role="list"
                 self="bottom middle"
-                transition-show="scale"
                 transition-hide="scale"
+                transition-show="scale"
                 @show="checkMenuPosition(props.row.id)"
               >
                 <div :class="tailClass"></div>
@@ -669,9 +676,7 @@ const onRowPerPageChange = (value) => {
                 :key="index"
                 ref="btn-icon"
                 @click.stop="handleMenuEventStop"
-                @on-click="
-                  moreActionDialogData.showDialog[props.row.id] = false
-                "
+                @on-click="onMoreActionButtonClick(props.row.id)"
               >
                 <template #menu>
                   <q-menu v-if="!verticalMoreActions" auto-close role="list">
@@ -714,7 +719,7 @@ const onRowPerPageChange = (value) => {
                               : action.tooltip
                           "
                           @click.stop="handleMenuEventStop"
-                          @onClick="action.handler(props.row)"
+                          @on-click="action.handler(props.row)"
                         />
                       </template>
                     </div>