@bcrs-shared-components/base-address 3.0.3 → 3.0.4

package/BaseAddress.vue

@@ -56,11 +56,11 @@
             :label="countryLabel"
             :rules="[...schemaLocal.country]"
           >
-            <template #item="{item, props}">
+            <template #item="{item, props: autoCompleteProps}">
               <v-divider v-if="item.raw.divider" />
               <v-list-item
                 v-else
-                v-bind="props"
+                v-bind="autoCompleteProps"
               />
             </template>
           </v-autocomplete>
@@ -128,11 +128,11 @@
             :name="Math.random().toString()"
             :rules="[...schemaLocal.region]"
           >
-            <template #item="{item, props}">
+            <template #item="{item, props: autoCompleteProps}">
               <v-divider v-if="item.raw.divider" />
               <v-list-item
                 v-else
-                v-bind="props"
+                v-bind="autoCompleteProps"
               />
             </template>
           </v-autocomplete>
@@ -174,153 +174,145 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, toRefs, watch } from 'vue-demi'
+<script setup lang="ts">
+import { AddressIF, SchemaIF } from '@bcrs-shared-components/interfaces'
+import { Ref, onMounted, toRef, watch } from 'vue'
 import {
   baseRules,
+  spaceRules,
   useAddress,
   useAddressComplete,
-  useCountryRegions,
-  useCountriesProvinces,
   useBaseValidations,
-  spaceRules
-} from './factories'
-import { AddressIF, SchemaIF } from '@bcrs-shared-components/interfaces'
+  useCountriesProvinces,
+  useCountryRegions
+} from '@bcrs-shared-components/base-address/factories'
 import { AddressValidationRules } from '@bcrs-shared-components/enums'
 
-export default defineComponent({
-  name: 'BaseAddress',
-  props: {
-    value: {
-      type: Object as () => AddressIF,
-      default: () => ({
-        streetAddress: '',
-        streetAddressAdditional: '',
-        addressCity: '',
-        addressRegion: '',
-        postalCode: '',
-        addressCountry: null,
-        deliveryInstructions: ''
-      })
-    },
-    /* used for readonly mode vs edit mode */
-    editing: {
-      type: Boolean,
-      default: false
-    },
-    /* contains validation for each field */
-    schema: {
-      type: Object as () => SchemaIF,
-      default: null
-    },
-    /* triggers all current form validation errors */
-    triggerErrors: {
-      type: Boolean,
-      default: false
-    },
-    /* Hides the persistent hint field on Address Input */
-    hideAddressHint: {
-      type: Boolean,
-      default: false
-    },
-    /* Hides Delivery Address field (e.g. for Unit Notes) */
-    hideDeliveryAddress: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['valid'],
-  setup (props, { emit }) {
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    const localSchema = { ...props.schema }
-    const {
-      addressLocal,
-      country,
-      schemaLocal,
-      isSchemaRequired,
-      labels
-    } = useAddress(toRefs(props).value, localSchema)
-
-    const origPostalCodeRules = localSchema.postalCode
-    const origRegionRules = localSchema.region
+const props = withDefaults(defineProps<{
+  value: AddressIF
+  editing: boolean
+  schema: SchemaIF
+  triggerErrors: boolean
+  hideAddressHint: boolean
+  hideDeliveryAddress: boolean
+}>(), {
+  value: () => ({
+    streetAddress: '',
+    streetAddressAdditional: '',
+    addressCity: '',
+    addressRegion: '',
+    postalCode: '',
+    addressCountry: null,
+    deliveryInstructions: ''
+  }),
+  /* used for readonly mode vs edit mode */
+  editing: false,
+  /* contains validation for each field */
+  schema: null,
+  /* triggers all current form validation errors */
+  triggerErrors: false,
+  /* Hides the persistent hint field on Address Input */
+  hideAddressHint: false,
+  /* Hides Delivery Address field (e.g. for Unit Notes) */
+  hideDeliveryAddress: false
+})
 
-    const { addressForm, resetValidation, validate } = useBaseValidations()
+const emits = defineEmits<{
+  'update-address': [address: AddressIF]
+  valid: [valid: boolean]
+}>()
 
-    const { enableAddressComplete, uniqueIds } = useAddressComplete(addressLocal)
+// eslint-disable-next-line vue/no-setup-props-destructure
+const localSchema = { ...props.schema }
+const {
+  addressLocal,
+  country,
+  schemaLocal,
+  labels
+} = useAddress(toRef(props.value) as Ref<AddressIF>, localSchema)
 
-    const countryProvincesHelpers = useCountriesProvinces()
+const origPostalCodeRules = localSchema.postalCode
+const origRegionRules = localSchema.region
 
-    const countryChangeHandler = (val: string, oldVal: string) => {
-      // do not trigger any changes if it is view only (summary instance)
-      if (!props.editing) return
+const { addressForm, resetValidation, validate } = useBaseValidations()
 
-      if (val === 'CA') {
-        localSchema.postalCode = origPostalCodeRules.concat([baseRules.postalCode])
-        localSchema.region = origRegionRules
-      } else if (val === 'US') {
-        localSchema.postalCode = origPostalCodeRules.concat([baseRules.zipCode])
-        localSchema.region = origRegionRules
-      } else {
-        localSchema.postalCode = origPostalCodeRules.concat([baseRules[AddressValidationRules.MAX_LENGTH](15)])
-        localSchema.region = [baseRules[AddressValidationRules.MAX_LENGTH](2), ...spaceRules]
-      }
-      // reset other address fields (check is for loading an existing address)
-      if (oldVal) {
-        addressLocal.value.streetAddress = ''
-        addressLocal.value.streetAddressAdditional = ''
-        addressLocal.value.addressCity = ''
-        addressLocal.value.addressRegion = ''
-        addressLocal.value.postalCode = ''
-      }
-      // wait for schema update and validate the form
-      setTimeout(() => {
-        props.triggerErrors ? validate() : resetValidation()
-      }, 5)
-    }
+const { enableAddressComplete, uniqueIds } = useAddressComplete(addressLocal)
 
-    onMounted(() => {
-      countryChangeHandler(addressLocal.value.addressCountry, null)
-    })
+const countryProvincesHelpers = useCountriesProvinces()
 
-    watch(() => addressLocal.value, (val) => {
-      let valid = true
-      /** checks each field against the schema rules to see if the address is valid or not
-       * NOTE: we don't want it to trigger error msgs yet which is why this does not call validate()
-      */
-      for (const key in val) {
-        for (const index in schemaLocal.value[key]) {
-          if (schemaLocal.value[key][index](val[key]) !== true) {
-            valid = false
-            break
-          }
-        }
-        if (!valid) break
-      }
-      emit('valid', valid)
-    }, { immediate: true, deep: true })
+const countryChangeHandler = (val: string, oldVal: string) => {
+  // do not trigger any changes if it is view only (summary instance)
+  if (!props.editing) return
 
-    watch(() => country.value, (val, oldVal) => {
-      countryChangeHandler(val, oldVal)
-    })
+  if (val === 'CA') {
+    localSchema.postalCode = origPostalCodeRules.concat([baseRules.postalCode])
+    localSchema.region = origRegionRules
+  } else if (val === 'US') {
+    localSchema.postalCode = origPostalCodeRules.concat([baseRules.zipCode])
+    localSchema.region = origRegionRules
+  } else {
+    localSchema.postalCode = origPostalCodeRules.concat([baseRules[AddressValidationRules.MAX_LENGTH](15)])
+    localSchema.region = [baseRules[AddressValidationRules.MAX_LENGTH](2), ...spaceRules]
+  }
+  // reset other address fields (check is for loading an existing address)
+  if (oldVal) {
+    addressLocal.value.streetAddress = ''
+    addressLocal.value.streetAddressAdditional = ''
+    addressLocal.value.addressCity = ''
+    addressLocal.value.addressRegion = ''
+    addressLocal.value.postalCode = ''
+  }
+  // wait for schema update and validate the form
+  setTimeout(() => {
+    props.triggerErrors ? validate() : resetValidation()
+  }, 5)
+}
 
-    watch(() => props.triggerErrors, () => {
-      validate()
-    })
+onMounted(() => {
+  countryChangeHandler(addressLocal.value.addressCountry, null)
+})
 
-    return {
-      addressForm,
-      addressLocal,
-      country,
-      ...countryProvincesHelpers,
-      enableAddressComplete,
-      isSchemaRequired,
-      ...labels,
-      schemaLocal,
-      useCountryRegions,
-      ...uniqueIds,
-      validate
+watch(() => addressLocal.value, (val) => {
+  let valid = true
+  /** checks each field against the schema rules to see if the address is valid or not
+   * NOTE: we don't want it to trigger error msgs yet which is why this does not call validate()
+  */
+  for (const key in val) {
+    for (const index in schemaLocal.value[key]) {
+      if (schemaLocal.value[key][index](val[key]) !== true) {
+        valid = false
+        break
+      }
     }
+    if (!valid) break
   }
+  emits('valid', valid)
+  emits('update-address', val)
+}, { immediate: true, deep: true })
+
+watch(() => country.value, (val, oldVal) => {
+  countryChangeHandler(val, oldVal)
+})
+
+watch(() => props.triggerErrors, () => {
+  validate()
+})
+
+const { getCountries, getCountryName, getCountryRegions } = countryProvincesHelpers
+const {
+  countryLabel,
+  streetLabel,
+  streetAdditionalLabel,
+  cityLabel,
+  regionLabel,
+  postalCodeLabel,
+  deliveryInstructionsLabel
+} = labels
+const { streetId, countryId } = uniqueIds
+
+defineExpose({
+  addressForm,
+  validate
 })
 </script>
 
@@ -370,17 +362,17 @@ export default defineComponent({
 .v-text-field.v-input--is-readonly {
   pointer-events: none;
 
-  ::v-deep .v-label {
+  :deep(.v-label) {
     // set label colour to same as disabled
     color: rgba(0,0,0,.38);
   }
 
-  ::v-deep .v-select__selection {
+  :deep(.v-select__selection) {
     // set selection colour to same as disabled
     color: rgba(0,0,0,.38);
   }
 
-  ::v-deep .v-icon {
+  :deep(.v-icon) {
     // set error icon colour to same as disabled
     color: rgba(0,0,0,.38) !important;
     opacity: 0.6;

package/factories/address-factory.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { computed, reactive, ref, Ref } from 'vue-demi'
+import { computed, reactive, ref, Ref } from 'vue'
 import { uniqueId } from 'lodash'
 
 import { AddressIF, SchemaIF } from '@bcrs-shared-components/interfaces'

package/factories/countries-provinces-factory.ts

@@ -37,7 +37,7 @@ export function useCountriesProvinces () {
    * @param code The short code of the country.
    * @returns The long name of the country.
    */
-  const getCountryName = (code: string): string => {
+  const getCountryName = (code: string): string | null => {
     if (!code) return null
     if (window['countryNameCache'][code]) return window['countryNameCache'][code]
     const country = window['countries'].find(c => c.code === code)

package/factories/validation-factory.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue-demi'
+import { ref } from 'vue'
 
 import { AddressValidationRules } from '@bcrs-shared-components/enums'
 

package/package.json

@@ -1,21 +1,14 @@
 {
   "name": "@bcrs-shared-components/base-address",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@bcrs-shared-components/enums": "^2.0.0",
-    "@bcrs-shared-components/interfaces": "^2.0.0",
-    "@bcrs-shared-components/mixins": "^2.0.1",
-    "@vuelidate/core": "^2.0.3",
-    "lodash.uniqueid": "^4.0.1",
-    "vue": "^2.7.14",
-    "vuelidate": "0.6.2"
+    "@bcrs-shared-components/interfaces": "^2.0.1",
+    "@bcrs-shared-components/mixins": "^2.0.2",
+    "lodash.uniqueid": "^4.0.1"
   },
-  "devDependencies": {
-    "vue-property-decorator": "^9.1.2",
-    "vuelidate-property-decorators": "1.0.28"
-  },
-  "gitHead": "d80832aa4a621fdabf26d3e1d479f0701cf50fad"
+  "gitHead": "60abfe87e91cdc56175ad09b16fb27b5acaea9ea"
 }

package/factories/vuelidate-validation-factory.ts

@@ -1,118 +0,0 @@
-/* FUTURE:
- * Delete this if we decide not to move forward with vuelidate
- * Fix it to work otherwise
- */
-import { computed, Ref, reactive } from 'vue-demi'
-
-import { AddressIF, SchemaIF } from '@bcrs-shared-components/interfaces'
-
-import useVuelidate from '@vuelidate/core'
-
-export function useValidations (schema: Ref<SchemaIF>, address: Ref<AddressIF>) {
-  const validations = reactive({ addressLocal: schema.value })
-  const $v = useVuelidate(validations, reactive({ addressLocal: address.value }))
-
-  /**
-   * Misc Vuetify rules.
-   * @param prop The name of the property object to validate.
-   * @param key The name of the property key (field) to validate.
-   * @returns True if the rule passes, otherwise an error string.
-   */
-  const vuetifyRules = {
-    requiredRule: (prop: string, key: string): boolean | string => {
-      return Boolean($v.value[prop] && !$v.value[prop][key].required.$invalid) || 'This field is required'
-    },
-    minLengthRule: (prop: string, key: string): boolean | string => {
-      const min = validations.addressLocal[key].max
-      const msg = min ? `Minimum length is ${min}` : 'Text is below minimum length'
-      return Boolean($v.value[prop] && !$v.value[prop][key].minLength.$invalid) || msg
-    },
-    maxLengthRule: (prop: string, key: string): boolean | string => {
-      const max = validations.addressLocal[key].max
-      const msg = max ? `Maximum length is ${max}` : 'Text is over maximum length'
-      return Boolean($v.value[prop] && !$v.value[prop][key].maxLength.$invalid) || msg
-    },
-    // FUTURE: generalize this rule to take a validation parameter (ie, 'CA')
-    isCanadaRule: (prop: string, key: string): boolean | string => {
-      return Boolean($v.value[prop] && !$v.value[prop][key].isCanada.$invalid) || 'Address must be in Canada'
-    },
-    // FUTURE: generalize this rule to take a validation parameter (ie, 'BC')
-    isBCRule: (prop: string, key: string): boolean | string => {
-      return Boolean($v.value[prop] && !$v.value[prop][key].isBC.$invalid) || 'Address must be in BC'
-    }
-  }
-
-  /**
-   * Creates a Vuetify rules object from the Vuelidate state.
-   * @param model The name of the model we are validating.
-   * @returns A Vuetify rules object.
-   */
-  const createVuetifyRulesObject = (model: string): { [attr: string]: Array<Function> } => {
-    const obj = {
-      street: [],
-      streetAdditional: [],
-      city: [],
-      region: [],
-      postalCode: [],
-      country: [],
-      deliveryInstructions: []
-    }
-
-    // ensure Vuelidate state object is initialized
-    if ($v && $v.value[model]) {
-      // iterate over Vuelidate object properties
-      Object.keys($v.value[model])
-        // only look at validation properties
-        .filter(prop => prop.charAt(0) !== '$')
-        .forEach(prop => {
-          // create array for each validation property
-          obj[prop] = []
-          // iterate over validation property params
-          Object.keys($v.value[model][prop])
-            .forEach(param => {
-              // add specified validation functions to array
-              switch (param) {
-                case 'required': obj[prop].push(() => vuetifyRules.requiredRule(model, prop)); break
-                case 'minLength': obj[prop].push(() => vuetifyRules.minLengthRule(model, prop)); break
-                case 'maxLength': obj[prop].push(() => vuetifyRules.maxLengthRule(model, prop)); break
-                case 'isCanada': obj[prop].push(() => vuetifyRules.isCanadaRule(model, prop)); break
-                case 'isBC': obj[prop].push(() => vuetifyRules.isBCRule(model, prop)); break
-                // FUTURE: add extra validation functions here
-                default: break
-              }
-            })
-        })
-    }
-
-    // sample return object
-    // street: [
-    //   () => this.requiredRule('addressLocal', 'street'),
-    //   () => this.minLengthRule('addressLocal', 'street'),
-    //   () => this.maxLengthRule('addressLocal', 'street')
-    // ],
-    // ...
-
-    return obj
-  }
-
-  /**
-   * 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
-   */
-  const rules = computed((): { [attr: string]: Array<Function> } => {
-    return createVuetifyRulesObject('addressLocal')
-  })
-
-  /** Array of validation rules used by input elements to prevent extra whitespace. */
-  const spaceRules = [
-    (v: string) => !/^\s/g.test(v) || 'Invalid spaces', // leading spaces
-    (v: string) => !/\s$/g.test(v) || 'Invalid spaces', // trailing spaces
-    (v: string) => !/\s\s/g.test(v) || 'Invalid word spacing' // multiple inline spaces
-  ]
-  return {
-    $v,
-    rules,
-    spaceRules
-  }
-}