@usssa/component-library 1.0.0-alpha.15 → 1.0.0-alpha.151

package/src/components/core/UInputAddressLookup.vue

@@ -0,0 +1,471 @@
+<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 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 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
+  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)
+}
+
+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"
+    >
+      <q-menu
+        v-model="resultsMenuShowing"
+        no-focus
+        ref="resultsMenuRef"
+        @hide="resultsMenuShowing = false"
+        @show="resultsMenuShowing = true"
+      >
+        <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>

package/src/components/core/UInputPhoneStd.vue

@@ -1,14 +1,38 @@
 <script setup>
 import UInputTextStd from './UInputTextStd.vue'
 
+const emit = defineEmits(['update-country'])
+const modelValue = defineModel()
 const props = defineProps({
-  hintText: {
+  ariaLabel: {
+    type: String,
+    required: true,
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  dataTestId: {
+    type: String,
+    default: 'input-phone-std',
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+  },
+  errorMessage: {
     type: String,
   },
   hintIcon: {
     type: String,
     default: 'fa-kit-duotone fa-circle-info',
   },
+  hintText: {
+    type: String,
+  },
   isRequired: {
     type: Boolean,
     default: false,
@@ -16,20 +40,30 @@ const props = defineProps({
   label: {
     type: String,
   },
-  rightIcon: {
+  mask: {
     type: String,
+    default: '##########',
+  },
+  options: {
+    type: Array,
   },
   outlined: {
     type: Boolean,
     default: true,
   },
-  borderless: {
+  placeholder: {
+    type: String,
+    default: 'Input Text',
+  },
+  readonly: {
     type: Boolean,
     default: false,
   },
-  placeholder: {
+  rightIcon: {
     type: String,
-    default: 'Input Text',
+  },
+  selectedCountry: {
+    type: Object,
   },
   size: {
     type: String,
@@ -43,110 +77,82 @@ const props = defineProps({
     type: Array,
     default: () => [(val) => val.length === 10],
   },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  disable: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-  },
-  errorMessage: {
-    type: String,
-  },
-  options: {
-    type: Array,
-  },
-  selectedCountry: {
-    type: Object,
-  },
-  mask: {
-    type: String,
-    default: '##########',
-  },
 })
 
-const modelValue = defineModel()
-
-const emit = defineEmits(['update-country'])
-
 const selectCountry = (country) => {
   emit('update-country', country)
 }
-
-const toLowerCase = (str) => str.toLowerCase()
+const toLowerCase = (str) => str?.toLowerCase()
 </script>
 
 <template>
   <UInputTextStd
-    class="phone-input"
-    :label="label"
-    :isRequired="isRequired"
     v-model="modelValue"
-    :mask="mask"
-    :validationRules="validationRules"
-    leftIcon="true"
-    :rightIcon="rightIcon"
-    :hintText="hintText"
-    :hintIcon="hintIcon"
-    :toolTipText="toolTipText"
-    :placeholder="placeholder"
-    :size="size"
+    class="phone-input"
+    :borderless="borderless"
+    :dataTestId="'input-text-std'"
     :disable="disable"
-    :readonly="readonly"
     :error="error"
     :error-message="errorMessage"
-    :borderless="borderless"
+    :hintIcon="hintIcon"
+    :hintText="hintText"
+    :isRequired="isRequired"
+    :label="label"
+    leftIcon="true"
+    :mask="mask"
     :outlined="outlined"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :rightIcon="rightIcon"
+    :size="size"
+    :toolTipText="toolTipText"
+    :validationRules="validationRules"
   >
     <template v-slot:prepend>
       <q-btn-dropdown
-        :disable="readonly"
-        rounded
-        flat
-        class="u-phone-dropdown text-body-sm"
-        :class="`btn-field-${size}`"
+        :class="['u-phone-dropdown', 'text-body-sm', 'btn-field-' + size]"
         content-class="u-dropdown-list"
+        :aria-label="ariaLabel"
+        :dataTestId="dataTestId"
+        :disable="disable"
+        flat
         menu-anchor="top right"
-        menu-self="bottom middle"
         :menu-offset="[30, 5]"
-        dropdown-icon="img:icons/caret-down.svg"
+        menu-self="bottom middle"
+        rounded
       >
         <template #label>
           <q-icon
-            left
-            :aria-label="selectedCountry.name"
             :class="`fi fi-${toLowerCase(
-              selectedCountry.flag
+              selectedCountry?.flag
             )} flag-icon q-mr-xs`"
+            :aria-label="selectedCountry?.name"
+            left
           />
-          <label class="selected-code"> {{ selectedCountry.code }}</label>
+          <label class="selected-code">{{ selectedCountry?.code }}</label>
         </template>
 
         <q-list class="u-list">
           <q-item
-            v-for="country in options"
-            :key="country.code"
-            clickable
             v-close-popup
+            v-for="country in options"
             v-ripple
-            @click="selectCountry(country)"
             class="q-my-xxs"
+            clickable
+            :key="country?.code"
+            @click="selectCountry(country)"
           >
             <q-item-section class="flag-section">
               <q-icon
-                :aria-label="country.name"
+                :class="`fi fi-${toLowerCase(country?.flag)} flag-icon q-mr-xs`"
+                :aria-label="country?.name"
                 left
-                :class="`fi fi-${toLowerCase(country.flag)} flag-icon q-mr-xs`"
                 size="1.25rem"
               />
             </q-item-section>
             <q-item-section>
               <q-item-label class="text-body-sm">
-                {{ country.name }}
+                {{ country?.name }}
               </q-item-label>
             </q-item-section>
           </q-item>
@@ -232,7 +238,6 @@ const toLowerCase = (str) => str.toLowerCase()
 .phone-input
   .q-field__inner
     border-radius: $xs
-    background: $neutral-1
   &.q-field--borderless
     .q-field__control
       padding: 0 $xs 0 0