@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UInputAddressLookup.vue

@@ -0,0 +1,484 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import UInputTextStd from './UInputTextStd.vue'
+import UTooltip from './UTooltip.vue'
+
+const emit = defineEmits(['onRightIconClick', 'onUpdate'])
+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,
+  },
+  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({})
+const resultsMenuRef = ref(null)
+const resultsMenuShowing = ref(false)
+
+const leftBorderRadius = computed(() => {
+  if (props.leftBorderRadius === true) {
+    return 'leftBorderRadius'
+  }
+  return ''
+})
+
+const handleClear = () => {
+  modelValue.value = ''
+}
+
+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 = () => {
+  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')
+
+  sessionToken = new AutocompleteSessionToken()
+  autocompleteSuggestion = AutocompleteSuggestion
+})
+
+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', {})
+  }
+})
+</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>
+    <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"
+      >
+        <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>
+  </div>
+
+  <UInputTextStd
+    v-if="JSON.stringify(resultItem) !== '{}'"
+    v-model="resultItem.formattedAddress"
+    :dataTestId="dataTestId"
+    :label="label"
+    readonly
+    rightIcon="fa-kit-duotone fa-circle-xmark"
+    :size="size"
+    @onRightIconClick="handleClear"
+  />
+</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>