@bcrs-shared-components/base-address 2.0.0

package/BaseAddress.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/vue'
+import { BaseAddress } from './index'
+import Vuetify from 'vuetify'
+
+const meta: Meta<typeof BaseAddress> = {
+  title: 'component/BaseAddress'
+}
+export default meta
+
+const Template = (args, { argTypes }) => ({
+  vuetify: new Vuetify({ iconfont: 'mdi' }),
+  props: Object.keys(argTypes),
+  components: { BaseAddress },
+  template: '<BaseAddress v-bind="$props" />' // $props comes from args below
+})
+
+export const DefaultBaseAddress = Template.bind({})
+DefaultBaseAddress['args'] = {
+  editing: true,
+  schema: null,
+  address: {}
+}
+export const FilledInBaseAddress = Template.bind({})
+FilledInBaseAddress['args'] = {
+  editing: true,
+  schema: null,
+  address: {
+    streetAddress: '1234 Sesame Street',
+    streetAddressAdditional: '4th Floor',
+    addressCity: 'Victoria',
+    addressRegion: 'British Columbia',
+    addressCountry: 'Canada',
+    postalCode: 'V8N 1A1',
+    deliveryInstructions: 'Leave at front door'
+  },
+  noPoBox: true
+}

package/BaseAddress.vue

@@ -0,0 +1,558 @@
+//
+// Copyright © 2020 Province of British Columbia
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+// an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations under the License.
+//
+
+<template>
+  <div class="base-address">
+    <!-- Display fields -->
+    <v-expand-transition>
+      <div
+        v-if="!editing"
+        class="address-block"
+      >
+        <div class="address-block__info pre-line">
+          <div class="address-block__info-row street-address">
+            {{ addressLocal.streetAddress }}
+          </div>
+
+          <div class="address-block__info-row street-address-additional">
+            {{ addressLocal.streetAddressAdditional }}
+          </div>
+
+          <div class="address-block__info-row">
+            <span class="address-city">{{ addressLocal.addressCity }}</span>
+
+            <template v-if="addressLocal.addressRegion">
+              <span class="address-region">&nbsp;{{ addressLocal.addressRegion }}</span>
+            </template>
+
+            <template v-if="addressLocal.postalCode">
+              <span class="postal-code">&nbsp;{{ addressLocal.postalCode }}</span>
+            </template>
+          </div>
+
+          <div class="address-block__info-row address-country">
+            {{ getCountryName(addressCountry) }}
+          </div>
+
+          <template v-if="addressLocal.deliveryInstructions">
+            <div class="address-block__info-row delivery-instructions mt-5 font-italic">
+              {{ addressLocal.deliveryInstructions }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </v-expand-transition>
+
+    <!-- Edit fields -->
+    <v-expand-transition>
+      <v-form
+        v-if="editing"
+        ref="addressForm"
+        name="address-form"
+        lazy-validation
+      >
+        <div class="form__row">
+          <!-- NB1: AddressComplete needs to be enabled each time user clicks in this search field.
+               NB2: Only process first keypress -- assumes if user moves between instances of this
+                   component then they are using the mouse (and thus, clicking). -->
+          <v-text-field
+            :id="streetAddressId"
+            v-model="addressLocal.streetAddress"
+            autocomplete="chrome-off"
+            :name="Math.random()"
+            filled
+            class="street-address"
+            :hint="streetAddressHint"
+            persistent-hint
+            :label="streetAddressLabel"
+            :rules="[...rules.streetAddress, ...spaceRules]"
+            @keypress.once="enableAddressComplete()"
+            @click="enableAddressComplete()"
+          />
+        </div>
+        <div class="form__row">
+          <v-textarea
+            v-model="addressLocal.streetAddressAdditional"
+            auto-grow
+            filled
+            class="street-address-additional"
+            :label="streetAddressAdditionalLabel"
+            rows="1"
+            :rules="[...rules.streetAddressAdditional, ...spaceRules]"
+          />
+        </div>
+        <div class="form__row three-column">
+          <v-text-field
+            v-model="addressLocal.addressCity"
+            filled
+            class="item address-city"
+            :label="addressCityLabel"
+            :rules="[...rules.addressCity, ...spaceRules]"
+          />
+          <v-select
+            v-if="useCountryRegions(addressCountry)"
+            v-model="addressLocal.addressRegion"
+            filled
+            class="item address-region"
+            :menu-props="{maxHeight:'40rem'}"
+            :label="addressRegionLabel"
+            item-text="name"
+            item-value="short"
+            :items="getCountryRegions(addressCountry)"
+            :rules="[...rules.addressRegion, ...spaceRules]"
+          />
+          <v-text-field
+            v-else
+            v-model="addressLocal.addressRegion"
+            filled
+            class="item address-region"
+            :label="addressRegionLabel"
+            :rules="[...rules.addressRegion, ...spaceRules]"
+          />
+          <v-text-field
+            v-model="addressLocal.postalCode"
+            filled
+            class="item postal-code"
+            :label="postalCodeLabel"
+            :rules="[...rules.postalCode, ...spaceRules]"
+          />
+        </div>
+        <div class="form__row">
+          <v-select
+            v-model="addressLocal.addressCountry"
+            filled
+            class="address-country"
+            :label="addressCountryLabel"
+            menu-props="auto"
+            item-text="name"
+            item-value="code"
+            :items="getCountries()"
+            :rules="[...rules.addressCountry, ...spaceRules]"
+            @change="resetRegion()"
+          />
+          <!-- special field to select AddressComplete country, separate from our model field -->
+          <input
+            :id="addressCountryId"
+            type="hidden"
+            :value="addressCountry"
+          >
+        </div>
+        <div class="form__row">
+          <v-textarea
+            v-model="addressLocal.deliveryInstructions"
+            auto-grow
+            filled
+            class="delivery-instructions"
+            :label="deliveryInstructionsLabel"
+            rows="2"
+            :rules="[...rules.deliveryInstructions, ...spaceRules]"
+          />
+        </div>
+      </v-form>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { required } from 'vuelidate/lib/validators'
+import { Component, Mixins, Emit, Prop, Watch } from 'vue-property-decorator'
+import { Validation } from 'vue-plugin-helper-decorator'
+import { uniqueId } from 'lodash'
+import { ValidationMixin, CountriesProvincesMixin } from '@bcrs-shared-components/mixins'
+
+/**
+ * The component for displaying and editing an address.
+ * Vuelidate is used to implement the validation rules (eg, what 'required' means and whether it's satisfied).
+ * Vuetify is used to display any validation errors/styling.
+ * Optionally uses Canada Post AddressComplete (aka Postal Code Anywhere - PCA) for address lookup.
+ */
+@Component({
+  mixins: [ValidationMixin, CountriesProvincesMixin]
+})
+export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvincesMixin) {
+  /**
+   * The validation object used by Vuelidate to compute address model validity.
+   * @returns the Vuelidate validations object
+   */
+  @Validation()
+  public validations (): any {
+    return { addressLocal: { ...this.schemaLocal } }
+  }
+
+  /**
+   * The address to be displayed/edited.
+   * Default is "empty address" in case parent doesn't provide it (eg, for new address).
+   */
+  @Prop({
+    default: () => ({
+      streetAddress: '',
+      streetAddressAdditional: '',
+      addressCity: '',
+      addressRegion: '',
+      postalCode: '',
+      addressCountry: '',
+      deliveryInstructions: ''
+    })
+  })
+  readonly address: object
+
+  /** Whether the address should be shown in editing mode (true) or display mode (false). */
+  @Prop({ default: false })
+  readonly editing: boolean
+
+  /** The address schema containing Vuelidate rules. */
+  @Prop({ default: null })
+  readonly schema: any
+
+  @Prop({ default: false })
+  readonly noPoBox: boolean
+
+  resetRegion () {
+    this.addressLocal['addressRegion'] = ''
+  }
+
+  /** A local (working) copy of the address, to contain the fields edited by the component (ie, the model). */
+  addressLocal: object = {}
+
+  /** A local (working) copy of the address schema. */
+  schemaLocal: any = {}
+
+  /** A unique id for this instance of this component. */
+  uniqueId = uniqueId()
+
+  /** A unique id for the Street Address input. */
+  get streetAddressId (): string {
+    return `street-address-${this.uniqueId}`
+  }
+
+  /** A unique id for the Address Country input. */
+  addressCountryId (): string {
+    return `address-country-${this.uniqueId}`
+  }
+
+  /** The Address Country, to simplify the template and so we can watch it below. */
+  get addressCountry (): string {
+    return this.addressLocal['addressCountry']
+  }
+
+  /** The Street Address Additional label with 'optional' as needed. */
+  get streetAddressAdditionalLabel (): string {
+    return 'Additional Street Address' + (this.isSchemaRequired('streetAddressAdditional') ? '' : ' (Optional)')
+  }
+
+  /** The Street Address label with 'optional' as needed. */
+  get streetAddressLabel (): string {
+    return 'Street Address' + (this.isSchemaRequired('streetAddress') ? '' : ' (Optional)')
+  }
+
+  /** The Address City label with 'optional' as needed. */
+  get addressCityLabel (): string {
+    return 'City' + (this.isSchemaRequired('addressCity') ? '' : ' (Optional)')
+  }
+
+  /** The Address Region label with 'optional' as needed. */
+  get addressRegionLabel (): string {
+    let label: string
+    let required = this.isSchemaRequired('addressRegion')
+
+    // NB: make region required for Canada and USA
+    if (this.addressLocal['addressCountry'] === 'CA') {
+      label = 'Province'
+      required = true
+    } else if (this.addressLocal['addressCountry'] === 'US') {
+      label = 'State'
+      required = true
+    } else {
+      label = 'Province/State'
+    }
+
+    return label + (required ? '' : ' (Optional)')
+  }
+
+  /** The Postal Code label with 'optional' as needed. */
+  get postalCodeLabel (): string {
+    let label: string
+    if (this.addressLocal['addressCountry'] === 'US') {
+      label = 'Zip Code'
+    } else {
+      label = 'Postal Code'
+    }
+    return label + (this.isSchemaRequired('postalCode') ? '' : ' (Optional)')
+  }
+
+  /** The Address Country label with 'optional' as needed. */
+  get addressCountryLabel (): string {
+    return 'Country' + (this.isSchemaRequired('addressCountry') ? '' : ' (Optional)')
+  }
+
+  /** The Delivery Instructions label with 'optional' as needed. */
+  get deliveryInstructionsLabel (): string {
+    return 'Delivery Instructions' + (this.isSchemaRequired('deliveryInstructions') ? '' : ' (Optional)')
+  }
+
+  get streetAddressHint (): string {
+    return this.noPoBox ? 'Address cannot be a PO Box' : ''
+  }
+
+  /** Whether the specified prop is required according to the schema. */
+  isSchemaRequired (prop: string): boolean {
+    return Boolean(this.schemaLocal && this.schemaLocal[prop] && this.schemaLocal[prop].required)
+  }
+
+  /** Array of validation rules used by input elements to prevent extra whitespace. */
+  readonly spaceRules: Array<(v: string) => boolean | string> = [
+    v => !/^\s/g.test(v) || 'Invalid spaces', // leading spaces
+    v => !/\s$/g.test(v) || 'Invalid spaces', // trailing spaces
+    v => !/\s\s/g.test(v) || 'Invalid word spacing' // multiple inline spaces
+  ]
+
+  /**
+   * The Vuetify rules object. Used to display any validation errors/styling.
+   * NB: As a getter, this is initialized between created() and mounted().
+   * @returns the Vuetify validation rules object
+   */
+  get rules (): { [attr: string]: Array<() => boolean | string> } {
+    return this.createVuetifyRulesObject('addressLocal') as { [attr: string]: Array<() => boolean | string> }
+  }
+  /** Emits an update message for the address prop, so that the caller can ".sync" with it. */
+  @Emit('update:address')
+  emitAddress (address: object): void { }
+
+  /** Emits the validity of the address entered by the user. */
+  @Emit('valid')
+  emitValid (valid: boolean): void { }
+
+  /**
+   * Watches changes to the Schema object, so that if the parent changes the data, then
+   * the working copy of it is updated.
+   */
+  @Watch('schema', { deep: true, immediate: true })
+  onSchemaChanged (): void {
+    this.schemaLocal = { ...this.schema }
+  }
+
+  /**
+   * Watches changes to the Address object, so that if the parent changes the data, then
+   * the working copy of it is updated.
+   */
+  @Watch('address', { deep: true, immediate: true })
+  onAddressChanged (): void {
+    this.addressLocal = { ...this.address }
+  }
+
+  /**
+   * Watches changes to the Address Country and updates the schema accordingly.
+   */
+  @Watch('addressCountry')
+  onAddressCountryChanged (): void {
+    // skip this if component is called without a schema (eg, display mode)
+    if (this.schema) {
+      if (this.useCountryRegions(this.addressLocal['addressCountry'])) {
+        // we are using a region list for the current country so make region a required field
+        const addressRegion = { ...this.schema.addressRegion, required }
+        // re-assign the local schema because Vue does not detect property addition
+        this.schemaLocal = { ...this.schema, addressRegion }
+      } else {
+        // we are not using a region list for the current country so remove required property
+        const { required, ...addressRegion } = this.schema.addressRegion
+        // re-assign the local schema because Vue does not detect property deletion
+        this.schemaLocal = { ...this.schema, addressRegion }
+      }
+    }
+  }
+
+  /**
+   * Watches changes to the Address Local object, to catch any changes to the fields within the address.
+   * Will notify the parent object with the new address and whether or not the address is valid.
+   */
+  @Watch('addressLocal', { deep: true, immediate: true })
+  onAddressLocalChanged (): void {
+    this.emitAddress(this.addressLocal)
+    this.emitValid(!this.$v.$invalid)
+  }
+
+  /**
+   * Determines whether to use a country's known regions (ie, provinces/states).
+   * @param code the short code of the country
+   * @returns whether to use v-select (true) or v-text-field (false) for input
+   */
+  useCountryRegions (code: string): boolean {
+    return (code === 'CA' || code === 'US')
+  }
+
+  /** Enables AddressComplete for this instance of the address. */
+  enableAddressComplete (): void {
+    // If you want to use this component with the Canada Post AddressComplete service:
+    // 1. The AddressComplete JavaScript script (and stylesheet) must be loaded.
+    // 2. Your AddressComplete account key must be defined.
+    const pca = window['pca']
+    const key = window['addressCompleteKey']
+    if (!pca || !key) {
+      // eslint-disable-next-line no-console
+      console.log('AddressComplete not initialized due to missing script and/or key')
+      return
+    }
+
+    // Destroy the old object if it exists, and create a new one.
+    if (window['currentAddressComplete']) {
+      window['currentAddressComplete'].destroy()
+    }
+    window['currentAddressComplete'] = this.createAddressComplete(pca, key)
+  }
+
+  /**
+   * Creates the AddressComplete object for this instance of the component.
+   * @param pca the Postal Code Anywhere object provided by AddressComplete
+   * @param key the key for the Canada Post account that is to be charged for lookups
+   * @returns an object that is a pca.Address instance
+   */
+  createAddressComplete (pca, key: string): object {
+    // Set up the two fields that AddressComplete will use for input.
+    // Ref: https://www.canadapost.ca/pca/support/guides/advanced
+    // Note: Use special field for country, which user can't click, and which AC will overwrite
+    //       but that we don't care about.
+    const fields = [
+      { element: this.streetAddressId, field: 'Line1', mode: pca.fieldMode.SEARCH },
+      { element: this.addressCountryId, field: 'CountryName', mode: pca.fieldMode.COUNTRY }
+    ]
+    const options = { key }
+
+    const addressComplete = new pca.Address(fields, options)
+
+    // The documentation contains sample load/populate callback code that doesn't work, but this will. The side effect
+    // is that it breaks the autofill functionality provided by the library, but we really don't want the library
+    // altering the DOM because Vue is already doing so, and the two don't play well together.
+    addressComplete.listen('populate', this.addressCompletePopulate)
+
+    return addressComplete
+  }
+
+  /**
+   * Callback to update the address data after the user chooses a suggested address.
+   * @param address the data object returned by the AddressComplete Retrieve API
+   */
+  addressCompletePopulate (address: object): void {
+    const newAddressLocal: object = {}
+
+    newAddressLocal['streetAddress'] = address['Line1'] || 'N/A'
+    // Combine extra address lines into Street Address Additional field.
+    newAddressLocal['streetAddressAdditional'] = this.combineLines(
+      this.combineLines(address['Line2'], address['Line3']),
+      this.combineLines(address['Line4'], address['Line5'])
+    )
+    newAddressLocal['addressCity'] = address['City']
+    if (this.useCountryRegions(address['CountryIso2'])) {
+      // In this case, v-select will map known province code to province name
+      // or v-select will be blank and user will have to select a known item.
+      newAddressLocal['addressRegion'] = address['ProvinceCode']
+    } else {
+      // In this case, v-text-input will allow manual entry but province info is probably too long
+      // so set region to null and add province name to the Street Address Additional field.
+      // If length is excessive, user will have to fix it.
+      newAddressLocal['addressRegion'] = null
+      newAddressLocal['streetAddressAdditional'] = this.combineLines(
+        newAddressLocal['streetAddressAdditional'], address['ProvinceName']
+      )
+    }
+    newAddressLocal['postalCode'] = address['PostalCode']
+    newAddressLocal['addressCountry'] = address['CountryIso2']
+
+    // re-assign the local address to force Vuetify update
+    this.addressLocal = newAddressLocal
+
+    // Validate the form, in case any fields are missing or incorrect.
+    Vue.nextTick(() => { (this.$refs.addressForm as any).validate() })
+  }
+
+  combineLines (line1: string, line2: string) {
+    if (!line1) return line2
+    if (!line2) return line1
+    return line1 + '\n' + line2
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/styles/theme.scss";
+
+// Address Block Layout
+.address-block {
+  display: flex;
+}
+
+.address-block__info {
+  flex: 1 1 auto;
+}
+
+.address-block__info-row {
+  color: $gray7;
+}
+
+// Form Row Elements
+.form__row.three-column {
+  align-items: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+
+  .item {
+    flex: 1 1 auto;
+    flex-basis: 0;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}
+
+// text field labels
+::v-deep .v-label {
+  color: $gray7;
+  font-size: $px-16;
+  font-weight: normal;
+}
+
+// text field inputs
+::v-deep {
+  .v-input input {
+    color: $gray9;
+  }
+}
+
+.pre-line {
+  white-space: pre-line;
+}
+
+// make 'readonly' inputs looks disabled
+// (can't use 'disabled' because we want normal error styling)
+.v-select.v-input--is-readonly,
+.v-text-field.v-input--is-readonly {
+  pointer-events: none;
+
+  ::v-deep .v-label {
+    // set label colour to same as disabled
+    color: rgba(0,0,0,.38);
+  }
+
+  ::v-deep .v-select__selection {
+    // set selection colour to same as disabled
+    color: rgba(0,0,0,.38);
+  }
+
+  ::v-deep .v-icon {
+    // set error icon colour to same as disabled
+    color: rgba(0,0,0,.38) !important;
+    opacity: 0.6;
+  }
+}
+</style>

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/index.ts

@@ -0,0 +1 @@
+export { default as BaseAddress } from './BaseAddress.vue'

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@bcrs-shared-components/base-address",
+  "version": "2.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@bcrs-shared-components/mixins": "^1.1.20",
+    "lodash.uniqueid": "^4.0.1",
+    "vue": "^2.7.14",
+    "vuelidate": "^0.7.4"
+  },
+  "devDependencies": {
+    "vue-plugin-helper-decorator": "^0.0.11",
+    "vue-property-decorator": "^9.1.2"
+  },
+  "gitHead": "a3832931fe42e8f70d534735131f775bf1864f35"
+}