@ecomplus/storefront-components/src/html/AddressForm.html

Vue components for E-Com Plus Storefront

<form
  class="address-form needs-validation"
  @submit.prevent="submit"
  novalidate
>
  <div class="form-group address-form__name">
    <label for="address-form-name">
      {{ i19recipient }}
    </label>
    <input
      type="text"
      pattern="[^\d\s]{2,}.*"
      class="form-control"
      id="address-form-name"
      v-model="localAddress.name"
      :placeholder="i19name"
      required
    >
  </div>

  <div class="form-group address-form__zip">
    <div class="input-group">
      <input-zip-code
        id="address-form-zip"
        v-model="localAddress.zip"
        :aria-label="i19zipCode"
        required
      />

      <div
        v-if="zipLoading || zipInfoLink"
        class="input-group-append"
      >
        <span class="input-group-text">
          <a
            v-if="!zipLoading"
            :href="zipInfoLink"
            target="_blank"
          >
            <i class="i-question-circle"></i>
          </a>
          <div
            v-else
            class="spinner-grow spinner-grow-sm"
            role="status"
          >
            <span class="sr-only">Loading...</span>
          </div>
        </span>
      </div>
    </div>
  </div>

  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut fast"
  >
    <div v-show="isZipReady">
      <div class="form-group">
        <label for="address-form-number">
          {{ i19number }}
        </label>

        <div class="row address-form__number">
          <div class="col-5 col-lg-4">
            <input
              type="number"
              class="form-control"
              id="address-form-number"
              :required="!isNoNumber"
              :readonly="isNoNumber"
              v-model.number="localAddress.number"
              ref="inputNumber"
            >
          </div>

          <div class="col">
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                id="address-form-no-number"
                v-model="isNoNumber"
              >
              <label
                class="custom-control-label"
                for="address-form-no-number"
              >
                {{ i19noNumber }}
              </label>
            </div>
          </div>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-lg-6">
          <label for="address-form-compl">
            {{ i19complement }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-compl"
            maxlength="100"
            v-model="localAddress.complement"
          >
        </div>

        <div class="form-group col-lg-6">
          <label for="address-form-ref">
            {{ i19reference }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-ref"
            maxlength="100"
            v-model="localAddress.near_to"
          >
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-lg-6">
          <label for="address-form-street">
            {{ i19street }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-street"
            v-model="localAddress.street"
            :readonly="addressFromZip.street"
            @click="({ target }) => target.select()"
            required
          >
        </div>

        <div class="form-group col-lg-6">
          <label for="address-form-borough">
            {{ i19borough }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-borough"
            v-model="localAddress.borough"
            :readonly="addressFromZip.borough"
            @click="({ target }) => target.select()"
          >
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-lg-6 col-7">
          <label for="address-form-city">
            {{ i19city }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-city"
            v-model="localAddress.city"
            :readonly="addressFromZip.city"
            @click="({ target }) => target.select()"
            required
          >
        </div>

        <div class="form-group col-lg-4 col">
          <label for="address-form-pc">
            {{ i19provinceCode }}
          </label>
          <input
            type="text"
            class="form-control"
            id="address-form-pc"
            pattern="[A-Z]{2}"
            maxlength="2"
            placeholder="AA"
            v-model="provinceCode"
            :readonly="addressFromZip.province_code"
            @click="({ target }) => target.select()"
            required
          >
        </div>
      </div>

      <button
        class="btn btn-lg btn-primary"
        type="submit"
      >
        <i class="i-check mr-1"></i>
        {{ btnText }}
      </button>
    </div>
  </transition>
</form>