@bcrs-shared-components/base-address 2.0.59 → 2.1.0

package/BaseAddress.vue

@@ -1,16 +1,3 @@
-//
-// 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 -->
@@ -59,6 +46,7 @@
       <v-form
         v-if="editing"
         ref="addressForm"
+        v-model="addressFormValid"
         name="address-form"
         lazy-validation
       >
@@ -148,8 +136,9 @@
             filled
             class="item postal-code"
             :label="postalCodeLabel"
-            :rules="[...rules.postalCode, ...spaceRules]"
+            :rules="postalCodeRulesEnabled ? [...rules.postalCode, ...spaceRules] : []"
             @input="addressLocal.postalCode = addressLocal.postalCode?.toUpperCase()"
+            @blur="postalCodeRulesEnabled = true"
           />
         </div>
         <div class="form__row">
@@ -175,6 +164,7 @@ import { Component, Mixins, Emit, Prop, Watch } from 'vue-property-decorator'
 import { Validations } from 'vuelidate-property-decorators'
 import { uniqueId } from 'lodash'
 import { ValidationMixin, CountriesProvincesMixin } from '@bcrs-shared-components/mixins'
+import { FormIF } from '@bcrs-shared-components/interfaces'
 
 /**
  * The component for displaying and editing an address.
@@ -188,7 +178,7 @@ import { ValidationMixin, CountriesProvincesMixin } from '@bcrs-shared-component
 export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvincesMixin) {
   // Refs
   $refs!: {
-    addressForm: HTMLFormElement
+    addressForm: FormIF
   }
 
   /**
@@ -237,12 +227,29 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   @Prop({ default: false })
   readonly isInactive: boolean
 
+  /** Called, possibly externally, to validate all registered form inputs. */
+  public validate (): any {
+    this.postalCodeRulesEnabled = true
+    return this.$refs.addressForm.validate()
+  }
+
+  /** Called, possibly externally, to reset validation of all registered form inputs and clear their values. */
+  public reset (): any {
+    this.postalCodeRulesEnabled = false
+    return this.$refs.addressForm.reset()
+  }
+
+  /** Called, possibly externally, to reset validation of all registered form inputs without modifying their values. */
+  public resetValidation (): any {
+    return this.$refs.addressForm.resetValidation()
+  }
+
   /** When country changes, resets fields. */
   onCountryChange () {
     this.addressLocal['addressRegion'] = ''
     this.addressLocal['postalCode'] = ''
     // clear any existing validation errors
-    this.$refs.addressForm.resetValidation()
+    this.resetValidation()
   }
 
   /** A local (working) copy of the address, to contain the fields edited by the component (ie, the model). */
@@ -254,6 +261,12 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   /** A unique id for this instance of this component. */
   uniqueId = uniqueId()
 
+  /** Whether address form is valid. */
+  addressFormValid = false
+
+  /** Whether postal code validation rules are enabled (ie, after first blur or validate call). */
+  postalCodeRulesEnabled = false
+
   /** Called when component is created. */
   created (): void {
     // Initialize region field validation based on the starting country
@@ -363,18 +376,8 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
     return this.createVuetifyRulesObject('addressLocal')
   }
 
-  /** Emits an update message for the address prop, so that the caller can ".sync" with it. */
-  @Emit('update:address')
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  emitAddress (address: object): void { }
-
-  /** Emits the validity of the address entered by the user. */
-  @Emit('valid')
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  emitValid (valid: boolean): void { }
-
   /**
-   * Watches changes to the Schema object, so that if the parent changes the data, then
+   * Watches for 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 })
@@ -383,7 +386,7 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   }
 
   /**
-   * Watches changes to the Address object, so that if the parent changes the data, then
+   * Watches for 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 })
@@ -392,7 +395,7 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   }
 
   /**
-   * Watches changes to the Address Country and updates the schema accordingly.
+   * Watches for changes to the Address Country and updates the schema accordingly.
    */
   @Watch('addressCountry')
   onAddressCountryChanged (): void {
@@ -414,13 +417,22 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   }
 
   /**
-   * 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.
+   * Watches for changes to the local address object, to catch any changes to the fields within the address.
+   * Emits an update message for the address prop, so that the caller can ".sync" with it.
+   * If this causes the form to become valid or invalid then another watcher will handle that.
    */
   @Watch('addressLocal', { deep: true, immediate: true })
-  onAddressLocalChanged (): void {
-    this.emitAddress(this.addressLocal)
-    this.emitValid(!this.$v.$invalid)
+  @Emit('update:address')
+  onAddressLocalChanged (): any {
+    return this.addressLocal
+  }
+
+  /** Watches for changes to the address form validity and emits the updated state. */
+  @Watch('addressFormValid')
+  @Emit('valid')
+  onAddressFormValidChanged (): boolean {
+    // form is valid only if postal code rules are enabled
+    return (!this.$v.$invalid && this.postalCodeRulesEnabled)
   }
 
   /**
@@ -518,7 +530,7 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
     this.addressLocal = newAddressLocal
 
     // Validate the form, in case any fields are missing or incorrect.
-    Vue.nextTick(() => { (this.$refs.addressForm as any).validate() })
+    Vue.nextTick(() => this.validate())
   }
 
   getCountriesList (): Array<object> {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bcrs-shared-components/base-address",
-  "version": "2.0.59",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@bcrs-shared-components/mixins": "^1.2.0",
+    "@bcrs-shared-components/mixins": "^1.2.2",
     "lodash.uniqueid": "^4.0.1",
     "vue": "^2.7.14",
     "vuelidate": "0.6.2"
@@ -14,5 +14,5 @@
     "vue-property-decorator": "^9.1.2",
     "vuelidate-property-decorators": "1.0.28"
   },
-  "gitHead": "f262c4c0c316d45afc178aef8b65d47192ccca7b"
+  "gitHead": "b76f47d6b97b9caf02baa98461dfcf5dc9526f7c"
 }