@sbc-connect/nuxt-forms 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @sbc-connect/nuxt-forms
 
+## 0.4.0
+
+### Minor Changes
+
+- [#118](https://github.com/bcgov/connect-nuxt/pull/118) [`41e58f4`](https://github.com/bcgov/connect-nuxt/commit/41e58f44e6d216e7de568bccb2e240b2d89b8408) Thanks [@deetz99](https://github.com/deetz99)! - Remove now unnecessary css module workaround.
+
+- [#117](https://github.com/bcgov/connect-nuxt/pull/117) [`e3da105`](https://github.com/bcgov/connect-nuxt/commit/e3da1056247f5c502578dc70f95375e66e3cc1da) Thanks [@deetz99](https://github.com/deetz99)! - Update all dependencies
+
+- [#114](https://github.com/bcgov/connect-nuxt/pull/114) [`fe3eef1`](https://github.com/bcgov/connect-nuxt/commit/fe3eef1b39cc5883cc5e8560efe0dd89d04d0455) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Minor styling update, lower level of error styling on FieldSet wrapper
+
+### Patch Changes
+
+- Updated dependencies [[`41e58f4`](https://github.com/bcgov/connect-nuxt/commit/41e58f44e6d216e7de568bccb2e240b2d89b8408), [`e3da105`](https://github.com/bcgov/connect-nuxt/commit/e3da1056247f5c502578dc70f95375e66e3cc1da)]:
+  - @sbc-connect/nuxt-base@0.6.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#108](https://github.com/bcgov/connect-nuxt/pull/108) [`8571754`](https://github.com/bcgov/connect-nuxt/commit/8571754160242c3233838fc039fd1a01ff9d7a82) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Implements account creation in Auth and Country Code/Country Flag components in Forms
+
+### Patch Changes
+
+- [#115](https://github.com/bcgov/connect-nuxt/pull/115) [`dd17349`](https://github.com/bcgov/connect-nuxt/commit/dd173497255f35415b468e17f7192722f604d3c8) Thanks [@deetz99](https://github.com/deetz99)! - Relax postal code mask, different validation message for incorrect format vs invalid postal code
+
+- Updated dependencies [[`d9d6356`](https://github.com/bcgov/connect-nuxt/commit/d9d63560e27117c43b9e8e54d363c3fdbb620049)]:
+  - @sbc-connect/nuxt-base@0.5.0
+
 ## 0.2.1
 
 ### Patch Changes

package/app/components/Connect/Fieldset.vue

@@ -34,15 +34,17 @@ const bodyClass = bodyClassMap[bodyVariant]
     >
       <div
         class="flex flex-col gap-1"
-        :class="{ 'w-full sm:w-1/4 pb-0': orientation === 'horizontal' }"
+        :class="{ 'w-full sm:basis-1/4 pb-0': orientation === 'horizontal' }"
       >
         <legend
           :id="legendId"
           class="text-base text-neutral-highlighted font-bold"
-          :class="[{ 'text-red-600': !!error }]"
         >
           <slot name="label">
-            <div class="flex flex-wrap gap-4">
+            <div
+              class="flex flex-wrap gap-4"
+              :class="[{ 'text-red-600': !!error }]"
+            >
               <span>{{ label }}</span>
               <span
                 v-if="!!error && showErrorMsg"

package/app/components/Connect/Form/Address/PostalCode.vue

@@ -30,7 +30,7 @@ const model = defineModel<string | undefined>({
       : $t('connect.label.postalCode')
     "
     :mask="country === 'CA'
-      ? '@#@ #@#'
+      ? '*** ***'
       : country === 'US'
         ? '#####-####'
         : undefined"

package/app/components/Connect/Form/FieldWrapper.vue

@@ -20,12 +20,12 @@ const {
     <span
       aria-hidden="true"
       class="text-base text-neutral-highlighted font-bold"
-      :class="[
-        { 'text-red-600': !!error },
-        { 'w-full sm:w-1/4': orientation === 'horizontal' },
-      ]"
+      :class="{ 'w-full sm:basis-1/4': orientation === 'horizontal' }"
     >
-      <div class="flex flex-wrap gap-4">
+      <div
+        class="flex flex-wrap gap-4"
+        :class="{ 'text-red-600': !!error }"
+      >
         <span>{{ label }}</span>
         <span
           v-if="!!error && showErrorMsg"

package/app/components/Connect/Form/Phone/CountryCode.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import countryList from 'country-codes-list'
+import CountryFlag from '#forms/app/components/Connect/Form/Phone/CountryFlag.vue'
+import type { PhoneCountry } from '#forms/app/interfaces/phone-country'
+
+defineProps<{
+  isInvalid: boolean | undefined
+}>()
+
+const countryCallingCode = defineModel<string | undefined>('countryCallingCode', { required: false })
+watch(countryCallingCode, (val) => {
+  // this is needed for when something outside this component changes the callingCode model value
+  if (!val) {
+    countryIso2.value = undefined
+  } else if (selectedCountry.value?.callingCode !== val) {
+    countryIso2.value = search(val)[0]?.iso2
+  }
+})
+
+const countryIso2 = defineModel<string | undefined>('countryIso2', { required: false })
+watch(countryIso2, (val) => {
+  if (!val) {
+    selectedCountry.value = undefined
+  } else if (val && selectedCountry.value?.iso2 !== val) {
+    selectCountry(val)
+  }
+})
+
+const selectedCountry = ref<PhoneCountry | undefined>(undefined)
+watch(selectedCountry, (newVal) => {
+  if (newVal?.callingCode !== countryCallingCode.value) {
+    countryCallingCode.value = newVal?.callingCode
+  }
+  if (newVal?.iso2 !== countryIso2.value) {
+    countryIso2.value = newVal?.iso2
+  }
+})
+
+const _countryListOptions = countryList.customList(
+  'countryCode', '{countryCallingCode},{countryNameEn},{countryNameLocal}')
+
+const manualInput = (event: Event) => {
+  selectedCountry.value = {
+    callingCode: event.target.value
+  }
+}
+
+const countryListOptions: Array<PhoneCountry> = Object.keys(_countryListOptions).map((key) => {
+  const [callingCode, nameEn, nameLocal] = _countryListOptions[key].split(',')
+  return {
+    iso2: key,
+    callingCode,
+    label: `+${callingCode}`,
+    nameLocal,
+    nameEn
+  }
+}).sort((a, b) => a.callingCode.localeCompare(b.callingCode))
+
+const search = (q: string) => countryListOptions.filter((lo) => {
+  return lo.callingCode.includes(q)
+    || lo.iso2?.includes(q)
+    || lo.nameLocal?.includes(q)
+    || lo.nameEn?.includes(q)
+    || lo.label?.includes(q)
+})
+
+const selectCountry = (iso2: string) => {
+  selectedCountry.value = countryListOptions.find(item => item.iso2 === iso2)
+}
+
+onMounted(() => {
+  if (countryIso2.value !== undefined) {
+    selectCountry(countryIso2.value)
+  } else if (countryCallingCode.value) {
+    // Set a country based on the calling code if available
+    const iso2 = search(countryCallingCode.value)[0]?.iso2
+    if (iso2) {
+      selectCountry(iso2)
+    } else {
+      selectedCountry.value = {
+        callingCode: countryCallingCode.value,
+        label: `+${countryCallingCode.value}`
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selectedCountry"
+    :items="countryListOptions"
+    :color="selectedCountry?.callingCode ? 'primary' : ''"
+    :search="search"
+    :label-key="''"
+    :trailing-icon="'i-mdi-chevron-down'"
+    class="cursor-pointer"
+    :aria-required="true"
+    :aria-invalid="isInvalid"
+    :aria-label="$t('connect.label.countryCode')"
+    @input="manualInput($event)"
+  >
+    <template v-if="!!selectedCountry?.iso2" #leading="{ modelValue }">
+      <div class="flex">
+        <CountryFlag
+          :tooltip-text="selectedCountry?.nameEn"
+          :country-code-iso2letter="selectedCountry?.iso2"
+        />
+        <span class="ml-2 mt-2 truncate">{{ modelValue.label }}</span>
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <div class="flex items-end cursor-pointer">
+        <CountryFlag
+          :tooltip-text="item.nameLocal"
+          :country-code-iso2letter="item.iso2"
+        />
+        <span class="ml-2 truncate">{{ item.label }}</span>
+        <span class="sr-only">{{ item.nameLocal }}</span>
+      </div>
+    </template>
+  </UInputMenu>
+</template>

package/app/components/Connect/Form/Phone/CountryFlag.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import CountryFlag from 'vue-country-flag-next'
+
+defineProps<{
+  countryCodeIso2letter: string
+}>()
+</script>
+
+<template>
+  <CountryFlag
+    class="mb-2"
+    :country="countryCodeIso2letter"
+  />
+</template>

package/app/components/Connect/Form/Phone/index.vue

@@ -0,0 +1,2 @@
+<!-- Placeholder for compound phone component -->
+<!-- This component will be used to capture phone number details including country code, number input and ext. -->

package/app/interfaces/phone-country.ts

@@ -0,0 +1,14 @@
+export interface Phone {
+  countryIso2?: string
+  countryCode?: string
+  number: string
+  extension?: string
+}
+
+export interface PhoneCountry {
+  callingCode: string
+  iso2?: string
+  label?: string
+  nameLocal?: string
+  nameEn?: string
+}

package/app/utils/formHelpers.ts

@@ -0,0 +1,13 @@
+import type { FormErrorEvent } from '@nuxt/ui'
+
+export function onFormSubmitError(event: FormErrorEvent) {
+  if (event?.errors?.[0]?.id) {
+    const element = document.getElementById(event.errors[0].id)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      setTimeout(() => {
+        element.focus({ preventScroll: true })
+      }, 0)
+    }
+  }
+}

package/app/utils/zod-schemas/addresses.ts

@@ -5,6 +5,7 @@ import { z } from 'zod'
  * Ref: https://en.wikipedia.org/wiki/Postal_codes_in_Canada
  */
 const CanadaPostalCodeRegex = /^[ABCEGHJ-NPRSTVXY][0-9][ABCEGHJ-NPRSTV-Z][ ]?[0-9][ABCEGHJ-NPRSTV-Z][0-9]$/i
+const CanadaPostalCodeFormatOnlyRegex = /^[A-Z][0-9][A-Z][ ]?[0-9][A-Z][0-9]$/i
 
 /**
  * US ZIP code regex (eg, accepts 12345 or 12345-6789).
@@ -78,12 +79,18 @@ export function getRequiredAddressSchema() {
     }
 
     if (country === 'CA') {
-      if (!CanadaPostalCodeRegex.test(postalCode)) {
+      if (!CanadaPostalCodeFormatOnlyRegex.test(postalCode)) {
         ctx.addIssue({
           code: 'custom',
           message: t('connect.validation.invalidPostalCodeFormat'),
           path: ['postalCode']
         })
+      } else if (!CanadaPostalCodeRegex.test(postalCode)) {
+        ctx.addIssue({
+          code: 'custom',
+          message: t('connect.validation.invalidPostalCode'),
+          path: ['postalCode']
+        })
       }
     } else if (country === 'US') {
       if (!USZipCodeRegex.test(postalCode)) {

package/i18n/locales/en-CA.ts

@@ -7,6 +7,7 @@ export default {
       city: 'City',
       code: 'Code',
       country: 'Country',
+      countryCode: 'Country Code',
       deliveryAddress: 'Delivery Address',
       deliveryInstructions: 'Delivery Instructions',
       deliveryInstructionsOpt: 'Delivery Instructions (Optional)',
@@ -39,8 +40,9 @@ export default {
       maxChars: 'Maximum 0 characters | Maximum 1 character | Maximum {count} characters', // 0/1 most likely will never be used but required for pluralization
       minChars: 'Minimum 0 characters | Minimum 1 character | Minimum {count} characters', // 0/1 most likely will never be used but required for pluralization
       required: 'Required',
-      invalidPostalCodeFormat: 'Invalid Postal Code format (e.g., 1X1 X1X)',
-      invalidZipCodeFormat: 'Invalid ZIP Code format (e.g., 12345 or 12345-6789)'
+      invalidPostalCode: 'Enter a valid postal code',
+      invalidPostalCodeFormat: 'Format must be A1A 1A1',
+      invalidZipCodeFormat: 'Format must be 12345 or 12345-6789'
     }
   }
 }

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@axe-core/playwright": "4.11.0",
-    "@vitest/coverage-v8": "3.2.4",
     "dotenv": "17.2.3",
-    "nuxt": "4.1.3",
+    "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "vue-tsc": "3.1.2",
-    "@sbc-connect/playwright-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.0.6",
-    "@sbc-connect/eslint-config": "0.0.8"
+    "vue-tsc": "3.2.1",
+    "@sbc-connect/eslint-config": "0.0.8",
+    "@sbc-connect/playwright-config": "0.1.0",
+    "@sbc-connect/vitest-config": "0.1.0"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.4.0"
+    "country-codes-list": "2.0.0",
+    "vue-country-flag-next": "2.3.2",
+    "@sbc-connect/nuxt-base": "0.6.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/modules/form-assets/index.ts

@@ -1,15 +0,0 @@
-import { defineNuxtModule, createResolver } from 'nuxt/kit'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'form-assets',
-    configKey: 'formAssets'
-  },
-  defaults: {},
-  async setup(_options, _nuxt) {
-    console.info('Setting up **form** assets module')
-    const resolver = createResolver(import.meta.url)
-
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-form-tw.css'))
-  }
-})

package/modules/form-assets/runtime/assets/connect-form-tw.css

@@ -1,2 +0,0 @@
-@import "#connect-theme";
-@source "../../../../app";