@usssa/component-library 1.0.0-beta.9 → 1.0.0

package/src/components/core/UInputAddressLookup.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import UInputTextStd from './UInputTextStd.vue'
 import UTooltip from './UTooltip.vue'
 
-const emit = defineEmits(['onRightIconClick', 'onUpdate'])
+const emit = defineEmits(['onRightIconClick', 'onUpdate', 'updateInputVal'])
 const modelValue = defineModel()
 defineOptions({
   inheritAttrs: false,
@@ -67,6 +67,10 @@ const props = defineProps({
   rightIconAriaLabel: {
     type: String,
   },
+  selectedAddress: {
+    type: String,
+    default: '',
+  },
   size: {
     type: String,
     default: 'md',
@@ -85,7 +89,13 @@ let sessionToken, autocompleteSuggestion
 const inputRef = ref(null)
 const menuWidth = ref(0)
 const predictions = ref([])
-const resultItem = ref({})
+const resultItem = ref(
+  props.selectedAddress?.length
+    ? { displayName: props.selectedAddress }
+    : modelValue.value?.length
+    ? { displayName: modelValue.value }
+    : {}
+)
 const resultsMenuRef = ref(null)
 const resultsMenuShowing = ref(false)
 
@@ -96,10 +106,6 @@ const leftBorderRadius = computed(() => {
   return ''
 })
 
-const handleClear = () => {
-  modelValue.value = ''
-}
-
 const handleUpdate = async (input) => {
   // fetchAutocompleteSuggestions reference
   // https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest
@@ -220,6 +226,21 @@ const parseAddressComponents = (addressComponents) => {
   return address
 }
 
+const updateInputVal = (val) => {
+  if (!val?.length) {
+    modelValue.value = ''
+    resultItem.value = {}
+  }
+  if (val?.length === 1) {
+    resultItem.value = {}
+    modelValue.value = val
+    nextTick(() => {
+      inputRef.value?.focus()
+    })
+  }
+  emit('updateInputVal', val)
+}
+
 const updateMenuWidth = () => {
   const el =
     inputRef.value?.$el.querySelector('.q-field__control') ||
@@ -240,6 +261,16 @@ watch(modelValue, async (value) => {
     emit('onUpdate', {})
   }
 })
+
+watch(
+  () => resultItem.value?.formattedAddress,
+  (value) => {
+    if (!value)
+      nextTick(() => {
+        inputRef.value?.focus()
+      })
+  }
+)
 </script>
 
 <template>
@@ -296,6 +327,7 @@ watch(modelValue, async (value) => {
         :standout="!outlined"
         type="text"
         @focus="onMenuShow"
+        @update:modelValue="updateInputVal($event)"
       >
         <!-- The 'fit' prop is used to ensure the menu matches the anchor's width for correct positioning,
            while the manual width styling enforces a specific width for visual consistency.  -->
@@ -388,13 +420,11 @@ watch(modelValue, async (value) => {
 
   <UInputTextStd
     v-if="JSON.stringify(resultItem) !== '{}'"
-    v-model="resultItem.formattedAddress"
+    v-model="resultItem.displayName"
     :dataTestId="dataTestId"
     :label="label"
-    readonly
-    rightIcon="fa-kit-duotone fa-circle-xmark"
     :size="size"
-    @onRightIconClick="handleClear"
+    @update:modelValue="updateInputVal($event)"
   />
 </template>
 

package/src/components/core/UInputPhoneStd.vue

@@ -139,6 +139,11 @@ const toLowerCase = (str) => str?.toLowerCase()
             v-for="country in options"
             v-ripple
             class="q-my-xxs"
+            :class="{
+              'selected-item':
+                selectedCountry?.code === country?.code &&
+                selectedCountry?.label === country?.label,
+            }"
             clickable
             :key="country?.code"
             @click="selectCountry(country)"
@@ -165,8 +170,10 @@ const toLowerCase = (str) => str?.toLowerCase()
 
 <style lang="sass">
 .selected-code
-  width: 1.5rem
+  width: auto
   color: $dark
+.selected-item
+  background-color: $blue-1
 .u-dropdown-list
   .q-item__section--main
     margin-left: 0px

package/src/components/core/UInputTextStd.vue

@@ -19,6 +19,10 @@ defineOptions({
   inheritAttrs: false,
 })
 const props = defineProps({
+  autocomplete: {
+    type: String,
+    default: 'on',
+  },
   borderless: {
     type: Boolean,
     default: false,
@@ -146,6 +150,7 @@ const handleRightIconClick = () => {
       v-model="modelValue"
       :class="`u-input field-${size} ${leftBorderRadius}`"
       :aria-describedby="hintText"
+      :autocomplete="autocomplete"
       :borderless="borderless"
       :bottom-slots="!!hintText"
       :disable="disable"

package/src/components/core/UMatchup.vue

@@ -0,0 +1,404 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+ import UBtnStd from './UBtnStd.vue'
+import UChip from './UChip.vue'
+import UExpansionStd from './UExpansionStd.vue'
+import UModal from './UModal.vue'
+import UTabsStd from './UTabsStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const model = defineModel('showMatchup')
+
+const props = defineProps({
+  closeActionLabel: {
+    type: String,
+    default: 'Close',
+  },
+  closeIconLabel: {
+    type: String,
+    default: 'Close',
+  },
+  collapsedAriaLabel: {
+    type: String,
+    default: 'Collapsed',
+  },
+  expandAriaLabel: {
+    type: String,
+    default: 'Expanded',
+  },
+  gameDetails: {
+    type: Object,
+    required: true,
+  },
+  gameInformationLabel: {
+    type: String,
+    default: 'Game Information',
+  },
+  heading: {
+    type: String,
+    default: 'Game Detail',
+  },
+  matchupFields: {
+    type: Array,
+    required: true,
+  },
+  matchupTabLabel: {
+    type: String,
+    default: 'Previous Matchups',
+  },
+  reportTabLabel: {
+    type: String,
+    default: 'Pitching Report',
+  },
+  statTabLabel: {
+    type: String,
+    default: 'Team Stats',
+  },
+  teamOneDetails: {
+    type: Object,
+    required: true,
+  },
+  teamTwoDetails: {
+    type: Object,
+    required: true,
+  },
+})
+
+const $screen = useScreenType()
+
+const currentTab = ref('stats')
+const dateChip = ref(true)
+const isSmallTab = ref(false)
+
+const tabs = ref([
+  {
+    name: 'stats',
+    label: props.statTabLabel,
+  },
+  {
+    name: 'matchup',
+    label: props.matchupTabLabel,
+  },
+  {
+    name: 'report',
+    label: props.reportTabLabel,
+  },
+])
+
+const closeModel = () => {
+  model.value = false
+}
+
+onMounted(() => {
+  const handleResize = () => {
+    isSmallTab.value = window.innerWidth < 900
+  }
+  handleResize()
+  window.addEventListener('resize', handleResize)
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+})
+</script>
+
+<template>
+  <UModal
+    v-model="model"
+    class="u-matchup-model"
+    closeIcon="fa-kit-duotone fa-circle-xmark"
+    :closeIconLabel="closeIconLabel"
+    customSize="90%"
+    dataTestId="view matchup"
+    :heading="heading"
+    position="standard"
+    :show-action-buttons="true"
+    :show-secondary-buttons="true"
+    :size="$screen.isDesktop ? 'custom' : 'half'"
+  >
+    <template #content>
+      <template v-if="!$screen.isMobile">
+        <div class="matchup-field-container q-mb-ms flex column">
+          <div
+            class="matchup-fields flex items-start content-start self-stretch flex-wrap"
+          >
+            <div
+              v-for="field in matchupFields"
+              class="game-item flex column flex-start no-wrap"
+              :key="field.label"
+            >
+              <span class="text-description text-caption-sm">
+                {{ field.label }}
+              </span>
+              <span class="text-dark text-body-sm">{{ field.value }}</span>
+            </div>
+          </div>
+        </div>
+        <div
+          :class="`team-card-container flex items-center self-stretch no-wrap q-mb-ms ${
+            isSmallTab ? 'column' : ''
+          }`"
+        >
+          <div class="team-card flex items-center self-stretch column no-wrap">
+            <div class="team-logo">
+              <img
+                :alt="teamOneDetails.name"
+                :src="teamOneDetails.logoUrl"
+                style="width: 80px; height: 80px"
+              />
+            </div>
+            <span class="text-caption-md text-dark text-center">
+              {{ teamOneDetails.name }}
+            </span>
+            <span class="text-caption-md text-description text-center">
+              MVP: {{ teamOneDetails.mvp }}
+            </span>
+          </div>
+          <div class="game-stats-card flex items-center column no-wrap">
+            <UChip
+              v-model="dateChip"
+              class="u-table-chip"
+              avatarLabel=""
+              :chipLabel="gameDetails.date"
+              :removable="false"
+              type="primary"
+            />
+            <div class="score-card flex content-center items-center no-wrap">
+              <div class="score text-heading-xxl text-positive">
+                {{ teamOneDetails.score }}
+              </div>
+              <div class="text-heading-xxl text-dark">-</div>
+              <div class="score text-heading-xxl text-dark">
+                {{ teamTwoDetails.score }}
+              </div>
+            </div>
+            <span class="text-heading-sm text-positive">
+              {{ gameDetails.gameType }}
+            </span>
+          </div>
+          <div class="team-card flex items-center self-stretch column no-wrap">
+            <div class="team-logo">
+              <img
+                :alt="teamOneDetails.name"
+                :src="teamTwoDetails.logoUrl"
+                style="width: 80px; height: 80px"
+              />
+            </div>
+            <span class="text-caption-md text-dark text-center">
+              {{ teamTwoDetails.name }}
+            </span>
+            <span class="text-caption-md text-description text-center">
+              MVP: {{ teamTwoDetails.mvp }}
+            </span>
+          </div>
+        </div>
+        <div>
+          <UTabsStd
+            v-model="currentTab"
+            class="q-mb-ba"
+            align="left"
+            data-test-id="matchup-section-tabs"
+            :tabs="tabs"
+          />
+          <q-tab-panels
+            v-model="currentTab"
+            class="bg-transparent"
+            animated
+            keep-alive
+          >
+            <q-tab-panel class="q-pa-none" name="stats">
+              <slot name="stats"></slot>
+            </q-tab-panel>
+            <q-tab-panel class="q-pa-none" name="matchup">
+              <slot name="matchup"></slot>
+            </q-tab-panel>
+            <q-tab-panel class="q-pa-none" name="report">
+              <slot name="report"></slot>
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+      </template>
+      <template v-else>
+        <UExpansionStd
+          :collapsed-aria-label="collapsedAriaLabel"
+          dataTestId="game-information-expansion"
+          :disabled="disabled"
+          :enable-selection="false"
+          :expand-aria-label="expandAriaLabel"
+          expansion-icon="fa-kit fa-caret-down"
+          :expansion-icon-color="expansionIconColor"
+          :label="gameInformationLabel"
+          :row-card-height="8"
+          :toggle-icon-left="false"
+        >
+          <template #body>
+            <div class="matchup-field-container-mobile flex column">
+              <div
+                class="matchup-fields flex items-start content-start self-stretch flex-wrap"
+              >
+                <div
+                  v-for="field in matchupFields"
+                  class="game-item flex column flex-start no-wrap"
+                  :key="field.label"
+                >
+                  <span class="text-description text-caption-sm">
+                    {{ field.label }}
+                  </span>
+                  <span class="text-dark text-body-sm">
+                    {{ field.value }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </UExpansionStd>
+        <q-separator class="q-my-ba" />
+        <div
+          class="flex column content-stretch items-start self-stretch team-container-mobile"
+        >
+          <UChip
+            v-model="dateChip"
+            class="u-table-chip"
+            avatarLabel=""
+            :chipLabel="gameDetails.date"
+            dense
+            :removable="false"
+            type="primary"
+          />
+
+          <div class="flex items-center self-stretch team-card-mobile no-wrap">
+            <div class="team-logo team-logo-mobile">
+              <img :alt="teamOneDetails.name" :src="teamOneDetails.logoUrl" />
+            </div>
+            <div class="flex column items-start team-detail-mobile">
+              <span class="text-caption-md text-dark text-start">
+                {{ teamOneDetails.name }}
+              </span>
+              <span class="text-body-xxs text-description text-start">
+                MVP: {{ teamOneDetails.mvp }}
+              </span>
+            </div>
+            <div
+              class="text-heading-xxs q-py-xs q-px-ba bg-neutral-3 team-score-mobile text-positive"
+            >
+              {{ teamOneDetails.score }}
+            </div>
+          </div>
+
+            <span class="text-heading-xxs text-positive q-py-ba text-center self-center">
+              {{ gameDetails.gameType }}
+            </span>
+
+          <div class="flex items-center self-stretch team-card-mobile no-wrap">
+            <div class="team-logo team-logo-mobile">
+              <img :alt="teamTwoDetails.name" :src="teamTwoDetails.logoUrl" />
+            </div>
+            <div class="flex column items-start team-detail-mobile">
+              <span class="text-caption-md text-dark text-start">
+                {{ teamTwoDetails.name }}
+              </span>
+              <span class="text-body-xxs text-description text-start">
+                MVP: {{ teamTwoDetails.mvp }}
+              </span>
+            </div>
+            <div
+              class="text-heading-xxs q-py-xs q-px-ba bg-neutral-3 team-score-mobile text-dark"
+            >
+              {{ teamTwoDetails.score }}
+            </div>
+          </div>
+        </div>
+        <q-separator class="q-my-ba" />
+
+        <div>
+          <UTabsStd
+            v-model="currentTab"
+            class="q-mb-ba"
+            align="left"
+            data-test-id="matchup-section-tabs"
+            :tabs="tabs"
+          />
+          <q-tab-panels
+            v-model="currentTab"
+            class="bg-transparent"
+            animated
+            keep-alive
+          >
+            <q-tab-panel class="q-pa-none" name="stats">
+              <slot name="stats"></slot>
+            </q-tab-panel>
+            <q-tab-panel class="q-pa-none" name="matchup">
+              <slot name="matchup"></slot>
+            </q-tab-panel>
+            <q-tab-panel class="q-pa-none" name="report">
+              <slot name="report"></slot>
+            </q-tab-panel>
+          </q-tab-panels>
+        </div>
+      </template>
+    </template>
+
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        :label="closeActionLabel"
+        size="md"
+        @onClick="closeModel()"
+      />
+    </template>
+  </UModal>
+</template>
+
+<style lang="sass">
+.u-matchup-model
+  .q-expansion-item__content > :nth-child(2)
+    padding: 0
+  .matchup-fields
+    gap: $ba
+  .matchup-field-container
+    padding: $ba $ba
+    background-color: $neutral-2
+    border: 1px solid $neutral-4
+    border-radius: $xxs
+  .matchup-field-container-mobile
+    border-radius: $xxs
+  .game-item
+    min-width: 8.562rem
+    flex: 1 0 0
+  .team-card-container
+      gap: $ms
+  .team-card
+      flex: 1 0 0
+      word-break: break-word
+      padding: $ms $ba
+      gap: $ba
+      background-color: $neutral-2
+      border-radius: $xs
+  .team-logo img
+      border-radius: $sm
+  .game-stats-card
+      width: 17.625rem
+      gap: 1.25rem
+  .score-card
+    gap: $ba
+  .score
+    width: 3.85rem
+    text-align: center
+    background-color: $neutral-3
+    padding: $xs $ba
+    border-radius: $xs
+
+  .team-score-mobile
+      border-radius: $xs
+  .team-card-mobile
+      gap: $xs
+  .team-detail-mobile
+      flex: 1 0 0
+  .team-logo-mobile
+    width: $lg
+    height: $lg
+    img
+      width: $lg
+      height: $lg
+  .team-container-mobile
+      gap: $ba
+</style>

package/src/components/core/UMenuItem.vue

@@ -170,14 +170,13 @@ const handleClick = () => {
         {{ caption }}
       </q-item-label>
     </q-item-section>
-    <q-item-section
+    <q-item-label
       v-else
-      :class="`${labelColor} ${labelStyle} label`"
+      :class="`${labelColor} ${labelStyle}`"
       :tabindex="!inSheet ? '-1' : '0'"
     >
       {{ label }}
-      <q-item-label></q-item-label>
-    </q-item-section>
+    </q-item-label>
 
     <q-item-section v-if="rightIcon" side>
       <q-icon
@@ -224,6 +223,4 @@ const handleClick = () => {
       width: 100%
       height: 100%
       pointer-events: none
-    .label
-      word-break: break-all
 </style>

package/src/components/core/UMultiSelectStd.vue

@@ -42,10 +42,18 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  closeDialog: {
+    type: Boolean,
+    default: true,
+  },
   color: {
     type: String,
     default: 'neutral-7',
   },
+  customSheetHeight: {
+    type: Number,
+    default: 350,
+  },
   dataTestId: {
     type: String,
     default: 'multi-select',
@@ -182,7 +190,7 @@ const handleClick = (event) => {
     dialogs.value = [
       {
         open: true,
-        height: 350,
+        height: props.customSheetHeight,
         persistent: true,
         transitionDuration: 500,
         position: 'bottom',
@@ -193,7 +201,9 @@ const handleClick = (event) => {
 }
 
 const handleClose = () => {
-  dialogs.value[0].open = false
+  if (props.closeDialog) {
+    dialogs.value[0].open = false
+  }
   selectedItems.value = props.modelValue.length ? props.modelValue : []
   options.value = cloneOptions
 }
@@ -465,14 +475,14 @@ watch(selectedTab, () => {
             <q-icon :class="scope.opt.icon" color="neutral-13" size="1rem" />
           </div>
 
-          <q-item-section>
+          <div>
             <q-item-label class="text-body-sm">
               {{ scope.opt.label }}
             </q-item-label>
             <q-item-label v-if="scope.opt.description" caption>
               {{ scope.opt.description }}
             </q-item-label>
-          </q-item-section>
+          </div>
 
           <q-item-section v-if="scope.selected" side>
             <q-icon
@@ -611,6 +621,7 @@ watch(selectedTab, () => {
     min-height: $md
     align-items: center
     padding: 0px
+    gap: $xxs
 
   &.q-field--outlined .q-field__control
     border-radius: $xs

package/src/components/core/USelectStd.vue

@@ -27,10 +27,18 @@ const props = defineProps({
     type: String,
     default: 'neutral-7',
   },
+  closeDialog: {
+    type: Boolean,
+    default: true,
+  },
   closeIconLabel: {
     type: String,
     default: 'Close Icon',
   },
+  customSheetHeight: {
+    type: Number,
+    default: 350,
+  },
   dataTestId: {
     type: String,
     default: 'select-std',
@@ -167,7 +175,7 @@ const handleClick = (event) => {
     dialogs.value = [
       {
         open: true,
-        height: 350,
+        height: props.customSheetHeight,
         persistent: true,
         transitionDuration: 500,
         position: 'bottom',
@@ -184,7 +192,10 @@ const handleClick = (event) => {
 
 // sheet closing action
 const handleClose = () => {
-  dialogs.value[0].open = false
+  if (props.closeDialog) {
+    dialogs.value[0].open = false
+  }
+
   if (model.value) {
     if (selectedItem.value) {
       if (model.value !== selectedItem.value) {
@@ -269,6 +280,14 @@ watch(
     }
   }
 )
+
+watch(
+  () => props.options,
+  (newOptions) => {
+    initialOptions.value = [...newOptions]
+  },
+  { immediate: true }
+)
 </script>
 
 <template>