@usssa/component-library 1.0.0-alpha.249 → 1.0.0-alpha.250

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.248
+# Component Library v1.0.0-alpha.250
 
 **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.249",
+  "version": "1.0.0-alpha.250",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

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
+    ? { formattedAddress: props.selectedAddress }
+    : modelValue.value?.length
+    ? { formattedAddress: 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.  -->
@@ -391,10 +423,8 @@ watch(modelValue, async (value) => {
     v-model="resultItem.formattedAddress"
     :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/UTooltip.vue

@@ -68,6 +68,7 @@ const getTooltipText = computed(() => {
   border-radius: $xs
   padding: $xs $sm
   max-width: 22.5rem !important
+  word-break: break-word
 
 .tooltip-text
   color: $neutral-1