@usssa/component-library 1.0.0-alpha.83 → 1.0.0-alpha.84

package/package.json

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

package/src/components/core/UDialogStd.vue

@@ -26,8 +26,8 @@ const props = defineProps({
 })
 
 const model = defineModel()
-
 const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+
 const dialogRef = ref(true)
 
 const handleBackClick = () => {
@@ -39,21 +39,20 @@ const headerClass = computed(() => {
 })
 
 const dialogStyle = computed(() => ({
-  '--customSize': props.customSize
+  '--customSize': props.customSize,
 }))
-
 </script>
 
 <template>
   <q-dialog
+    v-bind="$attrs"
+    v-model="model"
+    :class="`dialog-${size}`"
+    full-width
     no-backdrop-dismiss
-    ref="dialogRef"
     :position="position"
-    full-width
-    :class="`dialog-${size}`"
     :style="dialogStyle"
-    v-model="model"
-    v-bind="$attrs"
+    ref="dialogRef"
   >
     <q-card class="dialog-wrapper full-height">
       <q-card-section
@@ -63,8 +62,9 @@ const dialogStyle = computed(() => ({
           <div class="flex items-center dialog-heading-container">
             <div v-if="leftIcon">
               <UBtnStd
-                tabindex="-1"
                 class="dialog-action-icons"
+                tabindex="0"
+                :aria-label="leftIconLabel"
                 :flat="true"
                 @click="handleBackClick()"
               >
@@ -72,8 +72,7 @@ const dialogStyle = computed(() => ({
                   class="icon-back"
                   :class="leftIcon"
                   size="1.5rem"
-                  :aria-label="leftIconLabel"
-                  tabindex="0"
+                  tabindex="-1"
                 />
               </UBtnStd>
             </div>
@@ -84,7 +83,7 @@ const dialogStyle = computed(() => ({
                 </span>
               </div>
               <div>
-                <span class="text-body-sm dialog-caption" v-if="headingCaption">
+                <span v-if="headingCaption" class="text-body-sm dialog-caption">
                   {{ headingCaption }}
                 </span>
               </div>
@@ -93,8 +92,9 @@ const dialogStyle = computed(() => ({
 
           <UBtnStd
             class="dialog-action-icons"
+            :aria-label="closeIconLabel"
             :flat="true"
-            tabindex="-1"
+            tabindex="0"
             @click="dialogRef.hide()"
           >
             <q-icon
@@ -102,8 +102,7 @@ const dialogStyle = computed(() => ({
               class="icon-close"
               :class="closeIcon"
               size="1.5rem"
-              :aria-label="closeIconLabel"
-              tabindex="0"
+              tabindex="-1"
             />
           </UBtnStd>
         </div>
@@ -116,12 +115,12 @@ const dialogStyle = computed(() => ({
         <slot name="content" />
       </q-card-section>
 
-      <div class="q-pa-ba action-wrapper" v-if="showActionButtons">
-        <q-card-actions align="left" class="action-buttons">
+      <div v-if="showActionButtons" class="q-pa-ba action-wrapper">
+        <q-card-actions class="action-buttons" align="left">
           <slot name="action_secondary_one"></slot>
           <slot name="action_secondary_two"></slot>
         </q-card-actions>
-        <q-card-actions align="right" class="action-buttons">
+        <q-card-actions class="action-buttons" align="right">
           <slot name="action_primary_one"></slot>
           <slot name="action_primary_two"></slot>
         </q-card-actions>
@@ -229,7 +228,11 @@ const dialogStyle = computed(() => ({
   padding: 0px 0px !important
   min-width: 0px !important
   min-height: 0px !important
-  height: auto !important
+  height: fit-content !important
+  border-radius: 0px
+
+  &:focus
+    outline: auto !important
 
   .q-focus-helper
     background: transparent !important

package/src/components/core/UDrawer.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import UBadgeStd from './UBadgeStd.vue'
 import UBtnIcon from './UBtnIcon.vue'
+import UBtnStd from './UBtnStd.vue'
 import UMenuItem from './UMenuItem.vue'
 import UTooltip from './UTooltip.vue'
 const props = defineProps({
@@ -71,28 +72,31 @@ const getXOffset = (label) => {
     <q-scroll-area class="u-drawer-scrollable-area">
       <div
         :class="`flex items-center justify-${
-          miniState ? 'center' : 'between'
-        } ${miniState ? 'q-py-ba' : 'q-py-xs q-pl-ba q-pr-xxs'}`"
+          miniState ? 'center q-py-sm' : 'between q-py-xs q-pl-ba q-pr-xxs'
+        } `"
       >
-        <NuxtLink
-          class="flex items-center justify-center cursor-pointer"
+        <UBtnStd
+          class="flex items-center justify-center drawer-logo q-pa-none"
+          flat
+          :ripple="false"
+          size="sm"
           :to="homeLink"
         >
-          <img
+          <q-img
             v-if="!miniState"
             class="full-logo"
             alt="usssa-logo"
             aria-label="usssa logo"
             :src="`${brandLogo}`"
           />
-          <img
+          <q-img
             v-else
             class="mini-state-logo"
             alt="usssa-logo"
             aria-label="usssa logo"
             :src="brandMiniLogo"
           />
-        </NuxtLink>
+        </UBtnStd>
         <div
           v-if="!miniState"
           class="drawer-open-close-icon-wrapper flex items-center justify-center"
@@ -106,6 +110,12 @@ const getXOffset = (label) => {
             size="sm"
             @click="handleCloseDrawer"
           />
+          <UTooltip
+            anchor="center right"
+            description="Collapse Menu"
+            :offset="[4, 14]"
+            self="center start"
+          />
         </div>
       </div>
       <q-list
@@ -163,7 +173,16 @@ const getXOffset = (label) => {
   background: $surface-bg-1
   .q-scrollarea__content
     width: 100%
-
+  .drawer-logo
+    padding: 0px !important
+    min-width: 0px !important
+    &.q-hoverable:hover > .q-focus-helper
+      opacity: 0
+    &:focus-visible
+      outline: auto !important
+      .q-focus-helper
+        display: none
+       
 .u-drawer-scrollable-area
   height: calc(100% - 0px)
   margin-top: 0px

package/src/components/core/UMenuDropdownAdvancedSearch.vue

@@ -196,6 +196,7 @@ const updateToggle = (val) => {
                 updateModelVal($event, titleToCamelCase(item.label))
               "
             />
+
             <UInputTextStd
               v-if="item.inputType === 'Date'"
               v-bind="item.props"
@@ -226,6 +227,7 @@ const updateToggle = (val) => {
                       v-model="item.value"
                       v-bind="item.dateProps"
                       mask="MM/DD/YYYY"
+                      :modelValue="getKeyValueByTitle(item.label)"
                       @update:modelValue="
                         updateModelVal($event, titleToCamelCase(item.label))
                       "

package/src/components/core/UMenuSearch.vue

@@ -32,7 +32,7 @@ const props = defineProps({
   },
   headerLabel: {
     type: String,
-    default: 'I\'m looking for',
+    default: "I'm looking for",
   },
   labelIcon: {
     type: String,
@@ -99,7 +99,6 @@ const emit = defineEmits([
 
 const loading = defineModel('loading')
 
-
 const advancedSearchPendingFilterModel = structuredClone(toRaw(props.model))
 const advancedSearchSelectedTab = ref(props.advancedSearchSelectedTab ?? null)
 
@@ -220,6 +219,11 @@ const specialContextHandler = (results) => {
   }
 }
 
+const convertDate = (inputDate) => {
+  const [month, day, year] = inputDate.split('/')
+  return `${year}-${month}-${day}`
+}
+
 const search = async () => {
   try {
     if (props.searchText.length < 2) {
@@ -229,10 +233,9 @@ const search = async () => {
 
     loading.value = true
     const configPayload = {}
-    if (advancedSearchSelectedTab.value) {
-      configPayload.facetFilters = [
-        `collection:${advancedSearchSelectedTab.value}`,
-      ]
+    const selectedTab = advancedSearchSelectedTab.value
+    if (selectedTab) {
+      configPayload.facetFilters = [`collection:${selectedTab}`]
     } else {
       let advancedSearchTabOptions = props.options.map((option) => {
         return `collection:${option.id}`
@@ -251,20 +254,36 @@ const search = async () => {
 
         if (key === 'phoneNumber' && filterValue) {
           filterValue = phoneNumber
+        } else if (key === 'startDate' && filterValue) {
+          filterValue = convertDate(filters.startDate)
+        } else if (key === 'endDate' && filterValue) {
+          filterValue = convertDate(filters.endDate)
         }
 
         switch (key) {
           case 'city':
-            key = 'address.city'
+            if (selectedTab === 'events' || selectedTab === 'venues') {
+              key = 'city'
+            } else {
+              key = 'address.city'
+            }
             break
-          case 'selectedCountry':
-            key = 'address.country'
+          case 'state':
+            if (selectedTab === 'events' || selectedTab === 'venues') {
+              key = 'state'
+            } else {
+              key = 'address.state'
+            }
             break
           case 'postalCode':
-            key = 'address.postalCode'
+            if (selectedTab === 'venues') {
+              key = 'postalCode'
+            } else {
+              key = 'address.postalCode'
+            }
             break
-          case 'state':
-            key = 'address.state'
+          case 'selectedCountry':
+            key = 'address.country'
             break
           case 'emailAddress':
             key = 'email'
@@ -275,6 +294,21 @@ const search = async () => {
           case 'phoneNumber':
             key = 'mobileNumber'
             break
+          case 'venueName':
+            key = 'name'
+            break
+          case 'eventName':
+            key = 'name'
+            break
+          case 'startDate':
+            key = 'startsOn'
+            break
+          case 'endDate':
+            key = 'endsOn'
+            break
+          case 'venueAddress':
+            key = 'streetAddress'
+            break
           default:
             key = key
         }
@@ -282,7 +316,7 @@ const search = async () => {
         if (filterValue && filterValue.length) {
           algoliaFilter.length
             ? (algoliaFilter += ` AND ${key}:${filterValue}`)
-            : (algoliaFilter += `${key}:'${filterValue}'`)
+            : (algoliaFilter += `${key}:"${filterValue}"`)
         }
       })
 
@@ -312,7 +346,6 @@ const search = async () => {
     } else {
       searchResults.value = null
     }
-
     return void 0
   } catch (error) {
     Notify.create({
@@ -344,7 +377,6 @@ const onApplyAdvancedSearchFilter = () => {
 
   search()
   updateAdvanceSearchToggle()
-
 }
 
 //Assign default model value on tab change
@@ -610,8 +642,7 @@ watch(
                   outline
                   size="sm"
                   @click.stop="onItemActionClick(item)"
-                >
-                </UBtnStd>
+                />
               </q-item-section>
             </q-item>
           </template>
@@ -629,7 +660,6 @@ watch(
   padding-bottom: $ba
   max-height: 20rem
   box-shadow: 0px 8px 8px 0px rgba(16, 17, 20, 0.16)
-  z-index: 1
 .u-typeahead-menu
   .u-tabs-outer .u-tab-button .truncated-label
     overflow-wrap: unset
@@ -676,5 +706,5 @@ watch(
       white-space: normal
       overflow: hidden
       word-wrap: break-word
-      min-width: 13.75rem
+      max-width: 18rem
 </style>

package/src/components/core/UMultiSelectStd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import UTooltip from './UTooltip.vue'
 import UChip from './UChip.vue'
 
@@ -36,7 +36,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: 'Select',
+    default: '',
   },
   size: {
     type: String,
@@ -77,6 +77,20 @@ const props = defineProps({
 })
 
 const chipModelVal = ref(true)
+
+const placeholderText = ref(props.placeholder)
+
+const updateVal = (val) => {
+  props.updateFn(val)
+  placeholderText.value = val.length ? '' : props.placeholder
+}
+
+watch(
+  () => props.placeholder,
+  (value) => {
+    placeholderText.value = value
+  }
+)
 </script>
 
 <template>
@@ -112,7 +126,7 @@ const chipModelVal = ref(true)
       :use-input="useInput"
       :option-label="optionLabel"
       :option-value="optionValue"
-      :placeholder="placeholder"
+      :placeholder="placeholderText"
       bottom-slots
       outlined
       hide-bottom-space
@@ -135,7 +149,7 @@ const chipModelVal = ref(true)
             ...details,
           })
       "
-      @update:model-value="(val) => updateFn(val)"
+      @update:model-value="(val) => updateVal(val)"
       @filter="filterFn"
     >
       <template v-slot:no-option>
@@ -204,6 +218,7 @@ const chipModelVal = ref(true)
   &.q-field--auto-height .q-field__native
     min-height: $md
     align-items: center
+    padding: 0px
 
   &.q-field--outlined .q-field__control
     border-radius: $xs

package/src/components/core/UUploader.vue

@@ -178,8 +178,9 @@ defineExpose({ upload })
         >
           <q-card
             v-for="(file, index) in scope.files"
-            class="uploader-list q-py-sm q-px-sm"
-            :class="`list-size-${size}`"
+            :class="`uploader-list list-size-${size} ${
+              file.__status == 'uploading' ? 'q-py-xs q-px-sm' : 'uploaded-container'
+            }`"
             :key="file.__key"
           >
             <!-- When File added but not uploaded on server -->
@@ -450,6 +451,8 @@ defineExpose({ upload })
     background: $neutral-2
     border-radius: $xs
     box-shadow: 0px 0px 2px 0px rgba(16, 17, 20, 0.04)
+  .uploaded-container
+    padding: $sm
   .list-items
     justify-content: space-between
     flex-wrap: nowrap