@usssa/component-library 1.0.0-alpha.218 → 1.0.0-alpha.219

package/README.md

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

package/src/components/core/UInputAddressLookup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import UInputTextStd from './UInputTextStd.vue'
 import UTooltip from './UTooltip.vue'
 
@@ -177,13 +177,28 @@ const onClick = (item) => {
 }
 
 const onMenuShow = () => {
-  const el =
-    inputRef.value?.$el.querySelector('.q-field__control') ||
-    inputRef.value?.$el
-  menuWidth.value = `${el?.offsetWidth || 0}px`
+  updateMenuWidth()
   resultsMenuShowing.value = true
 }
 
+onMounted(async () => {
+  const { AutocompleteSessionToken, AutocompleteSuggestion } =
+    await google.maps.importLibrary('places')
+
+  sessionToken = new AutocompleteSessionToken()
+  autocompleteSuggestion = AutocompleteSuggestion
+  window.addEventListener('resize', updateMenuWidth)
+})
+
+const onResize = ({ width }) => {
+  resultsMenuShowing.value = false
+  updateMenuWidth()
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateMenuWidth)
+})
+
 const parseAddressComponents = (addressComponents) => {
   const address = {}
   for (const component of addressComponents) {
@@ -205,13 +220,12 @@ const parseAddressComponents = (addressComponents) => {
   return address
 }
 
-onMounted(async () => {
-  const { AutocompleteSessionToken, AutocompleteSuggestion } =
-    await google.maps.importLibrary('places')
-
-  sessionToken = new AutocompleteSessionToken()
-  autocompleteSuggestion = AutocompleteSuggestion
-})
+const updateMenuWidth = () => {
+  const el =
+    inputRef.value?.$el.querySelector('.q-field__control') ||
+    inputRef.value?.$el
+  menuWidth.value = `${el?.offsetWidth || 0}px`
+}
 
 watch(modelValue, async (value) => {
   if (value) {
@@ -261,108 +275,115 @@ watch(modelValue, async (value) => {
         />
       </q-icon>
     </label>
-    <q-input
-      v-bind="$attrs"
-      v-model="modelValue"
-      :class="`u-input field-${size} ${leftBorderRadius}`"
-      :borderless="borderless"
-      :bottom-slots="!!hintText"
-      :debounce="500"
-      :disable="disable"
-      :error="error"
-      hide-bottom-space
-      id="input"
-      name="input"
-      :outlined="outlined"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      ref="inputRef"
-      :rules="validationRules"
-      :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="onMenuShow"
+    <div ref="inputWrapper">
+      <q-input
+        v-bind="$attrs"
+        v-model="modelValue"
+        :class="`u-input field-${size} ${leftBorderRadius}`"
+        :borderless="borderless"
+        :bottom-slots="!!hintText"
+        :debounce="500"
+        :disable="disable"
+        :error="error"
+        hide-bottom-space
+        id="input"
+        name="input"
+        :outlined="outlined"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        ref="inputRef"
+        :rules="validationRules"
+        :standout="!outlined"
+        type="text"
+        @focus="onMenuShow"
       >
-        <q-list bordered>
-          <q-item
-            v-for="(p, i) of predictions"
-            clickable
-            :key="i"
-            @click="onClick(p)"
-          >
-            <q-item-section avatar>
-              <q-icon class="fa-kit-duotone fa-location-dot" color="primary" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ p.displayName }}</q-item-label>
-              <q-item-label caption>
-                <span class="text-caption">
-                  {{ p.formattedAddress }}
-                </span>
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-menu>
-
-      <template v-if="leftIcon" #prepend>
-        <slot name="prepend"></slot>
-        <q-icon
-          v-if="!$slots.prepend"
-          :class="`slot-icon-size-${size} ${leftIcon}`"
-        />
-      </template>
-
-      <template v-if="hintText" #hint>
-        <div class="row items-center text-neutral-9 no-wrap">
-          <q-icon
-            v-if="hintIcon"
-            :class="hintIcon"
-            :aria-label="hintText"
-            size="1rem"
-          />
-          <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
-        </div>
-      </template>
-
-      <template #append>
-        <slot name="append">
-          <q-icon
-            v-if="rightIcon"
-            :class="`slot-icon-size-${size} ${rightIcon}`"
-            :aria-label="
-              rightIcon && rightIconAriaLabel
-                ? rightIconAriaLabel
-                : 'right input icon '
-            "
-            :tabindex="0"
-            @click="handleRightIconClick"
-          />
-        </slot>
-      </template>
-
-      <template v-slot:error>
-        <div v-if="errorMessage" class="row items-center no-wrap">
+        <!-- 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="onMenuShow"
+        >
+          <q-list bordered>
+            <q-item
+              v-for="(p, i) of predictions"
+              clickable
+              :key="i"
+              @click="onClick(p)"
+            >
+              <q-item-section avatar>
+                <q-icon
+                  class="fa-kit-duotone fa-location-dot"
+                  color="primary"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-item-label>{{ p.displayName }}</q-item-label>
+                <q-item-label caption>
+                  <span class="text-caption">
+                    {{ p.formattedAddress }}
+                  </span>
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+
+        <template v-if="leftIcon" #prepend>
+          <slot name="prepend"></slot>
           <q-icon
-            class="fa-kit-duotone fa-warning-octagon"
-            :aria-label="errorMessage"
-            size="1rem"
+            v-if="!$slots.prepend"
+            :class="`slot-icon-size-${size} ${leftIcon}`"
           />
-          <div class="q-ml-xxs text-body-xs" role="validation error">
-            {{ errorMessage }}
+        </template>
+
+        <template v-if="hintText" #hint>
+          <div class="row items-center text-neutral-9 no-wrap">
+            <q-icon
+              v-if="hintIcon"
+              :class="hintIcon"
+              :aria-label="hintText"
+              size="1rem"
+            />
+            <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
+          </div>
+        </template>
+
+        <template #append>
+          <slot name="append">
+            <q-icon
+              v-if="rightIcon"
+              :class="`slot-icon-size-${size} ${rightIcon}`"
+              :aria-label="
+                rightIcon && rightIconAriaLabel
+                  ? rightIconAriaLabel
+                  : 'right input icon '
+              "
+              :tabindex="0"
+              @click="handleRightIconClick"
+            />
+          </slot>
+        </template>
+
+        <template v-slot:error>
+          <div v-if="errorMessage" class="row items-center no-wrap">
+            <q-icon
+              class="fa-kit-duotone fa-warning-octagon"
+              :aria-label="errorMessage"
+              size="1rem"
+            />
+            <div class="q-ml-xxs text-body-xs" role="validation error">
+              {{ errorMessage }}
+            </div>
           </div>
-        </div>
-      </template>
-    </q-input>
+        </template>
+      </q-input>
+      <q-resize-observer @resize="onResize" />
+    </div>
   </div>
 
   <UInputTextStd