@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/components/core/UInputAddressLookup.vue

@@ -0,0 +1,535 @@
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onRightIconClick', 'onUpdate', 'updateInputVal'])
+const modelValue = defineModel()
+defineOptions({
+  inheritAttrs: false,
+})
+const props = defineProps({
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  dataTestId: {
+    type: String,
+    default: 'address-lookup',
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
+    type: String,
+  },
+  hintIcon: {
+    type: String,
+  },
+  hintText: {
+    type: String,
+  },
+  isRequired: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+  },
+  leftBorderRadius: {
+    type: Boolean,
+    default: false,
+  },
+  leftIcon: {
+    type: String,
+  },
+  outlined: {
+    type: Boolean,
+    default: true,
+  },
+  parentClass: {
+    type: String,
+  },
+  placeholder: {
+    type: String,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  rightIcon: {
+    type: String,
+  },
+  rightIconAriaLabel: {
+    type: String,
+  },
+  selectedAddress: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  validationRules: {
+    type: Array,
+  },
+})
+
+let sessionToken, autocompleteSuggestion
+
+const inputRef = ref(null)
+const menuWidth = ref(0)
+const predictions = ref([])
+const resultItem = ref(
+  props.selectedAddress?.length
+    ? { street_address: props.selectedAddress }
+    : modelValue.value?.length
+    ? { street_address: modelValue.value }
+    : {}
+)
+const resultsMenuRef = ref(null)
+const resultsMenuShowing = ref(false)
+
+const leftBorderRadius = computed(() => {
+  if (props.leftBorderRadius === true) {
+    return 'leftBorderRadius'
+  }
+  return ''
+})
+
+const handleUpdate = async (input) => {
+  // fetchAutocompleteSuggestions reference
+  // https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest
+  const payload = {
+    input,
+    sessionToken,
+    language: 'en-US',
+    // locationRestriction: {
+    //   west: 0,
+    //   north: 0,
+    //   east: 0,
+    //   south: 0,
+    // }
+    // origin: { lat: 0, lng: 0 }
+    // region: 'us',
+  }
+
+  const { suggestions } =
+    await autocompleteSuggestion.fetchAutocompleteSuggestions(payload)
+
+  const result = []
+  for (let suggestion of suggestions) {
+    let prediction = suggestion.placePrediction.toPlace()
+    await prediction.fetchFields({
+      fields: [
+        'addressComponents',
+        'adrFormatAddress',
+        'displayName',
+        'formattedAddress',
+        'googleMapsURI',
+        'internationalPhoneNumber',
+        'location',
+        'nationalPhoneNumber',
+        'websiteURI',
+      ],
+    })
+
+    const {
+      addressComponents,
+      adrFormatAddress,
+      displayName,
+      formattedAddress,
+      googleMapsURI,
+      internationalPhoneNumber,
+      location,
+      nationalPhoneNumber,
+      websiteURI,
+    } = prediction
+
+    const parsedAddressComponents = parseAddressComponents(addressComponents)
+    const finalResult = {
+      ...parsedAddressComponents,
+      adrFormatAddress,
+      coordinates: {
+        lat: location.lat(),
+        lng: location.lng(),
+      },
+      displayName,
+      formattedAddress,
+      googleMapsURI,
+      internationalPhoneNumber,
+      nationalPhoneNumber,
+      websiteURI,
+    }
+    result.push(finalResult)
+  }
+
+  predictions.value = result
+}
+
+const onClick = (item) => {
+  resultItem.value = item
+  resultsMenuRef.value.hide()
+  emit('onUpdate', item)
+}
+
+const onMenuShow = () => {
+  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) {
+    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 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') ||
+    inputRef.value?.$el
+  menuWidth.value = `${el?.offsetWidth || 0}px`
+}
+
+watch(modelValue, async (value) => {
+  if (value) {
+    if (!resultsMenuShowing.value && resultsMenuRef.value)
+      resultsMenuRef.value.show()
+    await handleUpdate(value)
+  } else {
+    if (resultsMenuShowing.value && resultsMenuRef.value)
+      resultsMenuRef.value.hide()
+    predictions.value = []
+    resultItem.value = {}
+    emit('onUpdate', {})
+  }
+})
+
+watch(
+  () => resultItem.value?.formattedAddress,
+  (value) => {
+    if (!value)
+      nextTick(() => {
+        inputRef.value?.focus()
+      })
+  }
+)
+</script>
+
+<template>
+  <div
+    v-if="JSON.stringify(resultItem) === '{}'"
+    :class="`q-gutter-xs ${parentClass}`"
+    :dataTestId="dataTestId"
+  >
+    <label
+      v-if="label"
+      class="row items-center q-mb-xxs"
+      for="input"
+      role="label"
+    >
+      <div class="u-input-label text-body-sm">
+        <span>{{ label }}</span>
+        <span v-if="isRequired" class="text-red-5 text-body-sm q-mx-xs">
+          {{ '*' }}
+        </span>
+      </div>
+      <q-icon
+        v-if="toolTipText"
+        class="fa-kit-duotone fa-circle-info cursor-pointer"
+        :aria-label="toolTipText"
+        color="neutral-9"
+        size="1rem"
+      >
+        <UTooltip
+          anchor="top middle"
+          :description="toolTipText"
+          :offset="[0, 0]"
+          self="bottom middle"
+        />
+      </q-icon>
+    </label>
+    <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"
+        @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.  -->
+        <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
+            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">
+            <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>
+        </template>
+      </q-input>
+      <q-resize-observer @resize="onResize" />
+    </div>
+  </div>
+
+  <UInputTextStd
+    v-if="JSON.stringify(resultItem) !== '{}'"
+    v-model="resultItem.street_address"
+    :dataTestId="dataTestId"
+    :label="label"
+    :size="size"
+    @update:modelValue="updateInputVal($event)"
+  />
+</template>
+
+<style lang="sass">
+.u-input
+  .q-field--with-bottom
+    padding-bottom: 0px
+  &.q-field--outlined.q-field--disabled .q-field__control
+    background: $neutral-3
+  &.leftBorderRadius
+    &.q-field--outlined .q-field__control
+      border-radius: 0px $xs $xs 0px
+    &.q-field--borderless
+      .q-field__control
+        border-radius: 0px $xs $xs 0px
+
+  .q-field__inner
+    border-radius: $xs
+
+  &.q-field--borderless
+    .q-field__control
+      padding: 0 $xs
+      background: $neutral-1
+      border-radius: $xs
+      &:hover
+        box-shadow : 0px 0px 0px 2px $primary-transparent
+
+  .q-field--standout .q-field__control
+    border-radius: $xs
+
+  .q-field__append.q-field__marginal.row.no-wrap.items-center.q-anchor--skip
+    display: none
+
+  .q-field__before,
+  .q-field__prepend
+    padding: 0 $xs
+    padding-left: 0
+
+  .q-field__after,
+  .q-field__append
+    padding-left: $xs
+
+  .q-icon
+    &.slot-icon-size-sm
+      font-size: $sm
+    &.slot-icon-size-md
+      font-size: $ba
+    &.slot-icon-size-lg
+      font-size: $ba
+
+  &.q-field--auto-height .q-field__control,
+  &.q-field--auto-height .q-field__native
+    min-height: $md
+
+  &.q-field--outlined .q-field__control
+    border-radius: $xs
+    padding: 0 $xs
+    background: $neutral-1
+
+    &::before
+      border:1.5px solid $neutral-4
+
+    &:hover::before
+      border:1.5px solid $primary
+
+  .q-field__control.relative-position.row.no-wrap.text-negative:focus-within
+    box-shadow: 0px 0px 0px 2px $accent-transparent
+
+  .q-field__control:focus-within
+    box-shadow : 0px 0px 0px 2px $primary-transparent
+
+  &.field-sm
+    .q-field__control,
+    .q-field__marginal
+      height: $md
+    &.q-field--outlined.q-field__control
+      padding: 0 $xs
+
+    &.q-field__prepend .q-field__marginal
+      padding: 0 $xs
+
+  &.field-md
+    .q-field__control,
+    .q-field__marginal
+      height: $lg
+    &.q-field--outlined.q-field__control
+      padding: 0 $xs
+
+    &.q-field__prepend.q-field__marginal
+      padding: 0 $xs
+      padding-left: 0
+
+  &.field-lg
+    .q-field__control,
+    .q-field__marginal
+      height: $xl
+    &.q-field--outlined .q-field__control
+      padding: 0 $sm
+    .q-field__prepend.q-field__marginal
+      padding-left: 0px
+
+  .q-field__bottom
+    padding: 0
+    align-items: center
+
+  .q-field__messages
+    margin-top: $xxs
+</style>