@usssa/component-library 1.0.0-alpha.106 → 1.0.0-alpha.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.106",
+  "version": "1.0.0-alpha.108",
   "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

@@ -3,16 +3,19 @@ import { ref, watch } from 'vue'
 import USelectStd from './USelectStd.vue'
 
 const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
+
+const model = defineModel()
+
 const props = defineProps({
-  maxPages: {
-    type: Number,
-    default: 10,
-  },
   maxPageLink: {
     //Maximum number of page links to display at a time
     type: Number,
     default: 2,
   },
+  maxPages: {
+    type: Number,
+    default: 1,
+  },
   modelValue: {
     type: Number,
     default: 1,
@@ -54,7 +57,7 @@ watch(currentPage, (newValue) => {
 <template>
   <div class="row u-pagination-container">
     <q-pagination
-      v-model="currentPage"
+      v-model="model"
       class="u-pagination"
       active-color="primary"
       boundary-numbers

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

@@ -1,26 +1,42 @@
 <script setup>
-const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
-  type: Object,
+const columns = defineModel('columns', {
+  default: () => [],
+  type: Array,
+})
+const filteredRows = defineModel('filteredRows', {
+  default: () => [],
+  type: Array,
 })
 const loading = defineModel('loading', {
   default: null,
   type: Boolean,
 })
-const rows = defineModel('rows', {
-  default: () => [],
-  type: Array,
+const pagination = defineModel('pagination', {
+  default: { page: 1, rowsPerPage: 15 },
+  type: Object,
 })
-const columns = defineModel('columns', {
+const rows = defineModel('rows', {
   default: () => [],
   type: Array,
 })
 
 const props = defineProps({
-  title: {
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  filter: {
     type: String,
     default: '',
   },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
   rowKey: {
     type: String,
     default: 'name',
@@ -29,37 +45,47 @@ const props = defineProps({
     type: String,
     default: 'horizontal',
   },
-  flat: {
+  showPagination: {
     type: Boolean,
-    default: false,
+    default: true,
   },
-  bordered: {
+  stickyHeader: {
     type: Boolean,
     default: false,
   },
-  grid: {
-    type: Boolean,
-    default: false,
+  title: {
+    type: String,
+    default: '',
   },
   virtualScroll: {
     type: Boolean,
     default: false,
   },
-  stickyHeader: {
-    type: Boolean,
-    default: false,
-  },
-  showPagination: {
-    type: Boolean,
-    default: true,
-  },
 })
+
+const filterMethod = (rows, terms, cols, getCellValue) => {
+  let updatedRows = []
+  rows.forEach((row) => {
+    cols.forEach((col) => {
+      if (
+        col.type === 'text' &&
+        row[col.id].toLowerCase().includes(terms.toLowerCase()) &&
+        !updatedRows.includes(row)
+      ) {
+        updatedRows.push(row)
+      }
+    })
+  })
+  filteredRows.value = updatedRows
+
+  return updatedRows
+}
 </script>
 
 <template>
   <q-table
-    v-model:pagination="pagination"
     v-bind="$attrs"
+    v-model:pagination="pagination"
     :class="`u-table ${virtualScroll ? 'u-virtualscroll-table' : ''} ${
       grid ? 'u-virtualscroll-grid-table' : ''
     } ${stickyHeader ? 'u-sticky-table-header' : ''} ${
@@ -69,14 +95,16 @@ const props = defineProps({
     }`"
     :bordered="bordered"
     :columns="columns"
+    :filter="filter"
+    :filter-method="filterMethod"
     :flat="flat"
     :grid="grid"
     hide-pagination
     :loading="loading"
-    :separator="separator"
-    :rows="rows"
     :row-key="rowKey"
+    :rows="rows"
     :rows-per-page-options="[0]"
+    :separator="separator"
     :title="title"
     :virtual-scroll="!grid && virtualScroll"
     :virtual-scroll-item-size="48"
@@ -87,7 +115,7 @@ const props = defineProps({
       v-slot:[slotName]="scope"
       :key="index"
     >
-      <slot :name="slotName" v-bind="{ ...scope }" />
+      <slot v-bind="{ ...scope }" :name="slotName" />
     </template>
   </q-table>
 </template>

package/src/components/core/UTableStd.vue

@@ -18,6 +18,7 @@ const columns = defineModel('columns', {
   default: () => [],
   type: Array,
 })
+const filteredRows = defineModel('filteredRows', { default: [], type: Array })
 const loading = defineModel('loading', {
   default: () => {},
   type: Boolean,
@@ -27,7 +28,7 @@ const moreActionDialogData = defineModel('moreActionDialogData', {
   default: null,
 })
 const pagination = defineModel('pagination', {
-  default: { page: 1, rowsPerPage: 15 },
+  default: { page: 1, rowsPerPage: 5 },
   type: Object,
 })
 const rows = defineModel('rows', {
@@ -48,6 +49,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  filter: {
+    type: String,
+    default: '',
+  },
   flat: {
     type: Boolean,
     default: false,
@@ -305,15 +310,26 @@ const onRowClick = (event, row) => {
 const onRowPerPageChange = (value) => {
   pagination.value.rowsPerPage = value
 }
+
+const updatedRows = computed(() => {
+  if (props.filter.length && filteredRows.value?.length)
+    return filteredRows.value
+  else if(props.filter.length)
+    return []
+  return rows.value
+})
+
 </script>
 
 <template>
   <UTable
     v-model:columns="columns"
+    v-model:filteredRows="filteredRows"
     v-model:pagination="pagination"
     v-model:rows="rows"
     :class="customClass"
     :bordered="bordered"
+    :filter="filter"
     :flat="flat"
     :grid="grid"
     :loading="loading"
@@ -778,12 +794,12 @@ const onRowPerPageChange = (value) => {
     class="row justify-end items-center pagination-wrapper"
   >
     <UPagination
-      v-if="rows.length >= 6"
+      v-if="updatedRows.length >= 6"
       v-model="pagination.page"
       :maxPageLink="
-        Number(Math.ceil(rows.length / pagination.rowsPerPage > 10 ? 6 : 3))
+        Number(Math.ceil(updatedRows.length / pagination.rowsPerPage > 10 ? 6 : 3))
       "
-      :maxPages="Number(Math.ceil(rows.length / pagination.rowsPerPage))"
+      :maxPages="Number(Math.ceil(updatedRows.length / pagination.rowsPerPage))"
       :perPageOptions="getRowsPerPageOptions"
       :rowPerPage="pagination.rowsPerPage"
       @onPageChange="onPageChange"