@usssa/component-library 1.0.0-alpha.196 → 1.0.0-alpha.198

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.196
+# Component Library v1.0.0-alpha.198
 
 **This library provides custom UI components for USSSA applications**
 

package/package.json

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

package/src/components/core/UInputAddressLookup.vue

@@ -13,9 +13,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  dataTestId:{
+  dataTestId: {
     type: String,
-    default: 'address-lookup'
+    default: 'address-lookup',
   },
   disable: {
     type: Boolean,
@@ -77,12 +77,13 @@ const props = defineProps({
   },
   validationRules: {
     type: Array,
-  }
+  },
 })
 
 let sessionToken, autocompleteSuggestion
 
 const inputRef = ref(null)
+const menuWidth = ref(0)
 const predictions = ref([])
 const resultItem = ref({})
 const resultsMenuRef = ref(null)
@@ -99,27 +100,6 @@ const handleClear = () => {
   modelValue.value = ''
 }
 
-const parseAddressComponents = (addressComponents) => {
-  const address = {}
-  for (const component of addressComponents) {
-    const { types, longText, shortText } = component
-    if (types.includes('street_number')) address.street_number = longText
-    if (types.includes('route')) address.street = longText
-    if (types.includes('locality')) address.city = longText
-    if (types.includes('administrative_area_level_1')) address.state = shortText
-    if (types.includes('administrative_area_level_2')) address.county = longText
-    if (types.includes('country')) address.country = shortText
-    if (types.includes('postal_code')) address.postal_code = longText
-    if (types.includes('plus_code')) address.plus_code = longText
-  }
-  if (address.street && address.street_number)
-    address.street_address = `${address.street_number} ${address.street}`
-  if (address.street && !address.street_number)
-    address.street_address = address.street
-
-  return address
-}
-
 const handleUpdate = async (input) => {
   // fetchAutocompleteSuggestions reference
   // https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest
@@ -196,6 +176,35 @@ const onClick = (item) => {
   emit('onUpdate', item)
 }
 
+const onMenuShow = () => {
+  const el =
+    inputRef.value?.$el.querySelector('.q-field__control') ||
+    inputRef.value?.$el
+  menuWidth.value = `${el?.offsetWidth || 0}px`
+  resultsMenuShowing.value = true
+}
+
+const parseAddressComponents = (addressComponents) => {
+  const address = {}
+  for (const component of addressComponents) {
+    const { types, longText, shortText } = component
+    if (types.includes('street_number')) address.street_number = longText
+    if (types.includes('route')) address.street = longText
+    if (types.includes('locality')) address.city = longText
+    if (types.includes('administrative_area_level_1')) address.state = shortText
+    if (types.includes('administrative_area_level_2')) address.county = longText
+    if (types.includes('country')) address.country = shortText
+    if (types.includes('postal_code')) address.postal_code = longText
+    if (types.includes('plus_code')) address.plus_code = longText
+  }
+  if (address.street && address.street_number)
+    address.street_address = `${address.street_number} ${address.street}`
+  if (address.street && !address.street_number)
+    address.street_address = address.street
+
+  return address
+}
+
 onMounted(async () => {
   const { AutocompleteSessionToken, AutocompleteSuggestion } =
     await google.maps.importLibrary('places')
@@ -272,12 +281,16 @@ watch(modelValue, async (value) => {
       :standout="!outlined"
       type="text"
     >
+      <!-- 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.  -->
       <q-menu
         v-model="resultsMenuShowing"
+        fit
         no-focus
         ref="resultsMenuRef"
+        :style="{ width: menuWidth }"
         @hide="resultsMenuShowing = false"
-        @show="resultsMenuShowing = true"
+        @show="onMenuShow"
       >
         <q-list bordered>
           <q-item

package/src/utils/data.ts

@@ -4,23 +4,23 @@
  * @returns {string} - Returns Formatted Date
  */
 
-export const formatDate = (date) => {
+
+export const formatDate = (date: Date | string | number) => {
+  const d = new Date(date);
   return (
-    String(date.getDate()).padStart(2, '0') +
-    '/' +
-    (date.getMonth() + 1) +
-    '/' +
-    String(date.getFullYear()).slice(-2)
-  )
-}
+    String(d.getDate()).padStart(2, '0') + '/' +
+    String(d.getMonth() + 1).padStart(2, '0') + '/' +
+    String(d.getFullYear()).slice(-2)
+  );
+};
 
 /**
  * @description Return String with Fixed Length
  * @param {string} string, length
  * @returns {string} - Returns Return partial String
  */
-export const fixStringLength = (str, length) => {
-  if (str.length > length) {
+export const fixStringLength = (str: string, length: number) => {
+  if (str?.length > length) {
     return str.substring(0, length) + '....'
   } else {
     return str.padEnd(length, ' ')