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

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 -->
@@ -148,8 +135,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 +163,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 +177,7 @@ import { ValidationMixin, CountriesProvincesMixin } from '@bcrs-shared-component
 export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvincesMixin) {
   // Refs
   $refs!: {
-    addressForm: HTMLFormElement
+    addressForm: FormIF
   }
 
   /**
@@ -237,12 +226,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 +260,9 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   /** A unique id for this instance of this component. */
   uniqueId = uniqueId()
 
+  /** Whether postal code validation rules are enabled (after first blur). */
+  postalCodeRulesEnabled = false
+
   /** Called when component is created. */
   created (): void {
     // Initialize region field validation based on the starting country
@@ -420,7 +429,8 @@ export default class BaseAddress extends Mixins(ValidationMixin, CountriesProvin
   @Watch('addressLocal', { deep: true, immediate: true })
   onAddressLocalChanged (): void {
     this.emitAddress(this.addressLocal)
-    this.emitValid(!this.$v.$invalid)
+    // form is valid only if postal code rules are enabled
+    this.emitValid(!this.$v.$invalid && this.postalCodeRulesEnabled)
   }
 
   /**
@@ -518,7 +528,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.0.61",
   "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": "338d5c109363f2f5d55b914baf2eb24d396ddf15"
 }