@sbc-connect/nuxt-forms 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.12
+
+### Patch Changes
+
+- [#47](https://github.com/bcgov/connect-nuxt/pull/47) [`9edf5ab`](https://github.com/bcgov/connect-nuxt/commit/9edf5ab6c4c7598f661e8ea713e6a60b390105c1) Thanks [@deetz99](https://github.com/deetz99)! - Add zod and address validations. issue: bcgov/entity#29338
+
+- Updated dependencies [[`9edf5ab`](https://github.com/bcgov/connect-nuxt/commit/9edf5ab6c4c7598f661e8ea713e6a60b390105c1)]:
+  - @sbc-connect/nuxt-base@0.1.11
+
 ## 0.1.11
 
 ### Patch Changes

package/app/components/Connect/Fieldset.vue

@@ -17,22 +17,23 @@ const {
     class="flex"
     :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
   >
-    <div :class="{ 'w-full sm:w-1/4': orientation === 'horizontal' }">
-      <legend
-        class="text-base text-neutral-highlighted font-bold"
-        :class="{ 'text-red-600': !!error }"
-      >
-        <div class="flex flex-wrap gap-4">
-          <span>{{ label }}</span>
-          <span
-            v-if="!!error && showErrorMsg"
-            class="font-normal"
-          >
-            {{ error.message }}
-          </span>
-        </div>
-      </legend>
-    </div>
+    <legend
+      class="text-base text-neutral-highlighted font-bold pb-6"
+      :class="[
+        { 'text-red-600': !!error },
+        { 'w-full sm:w-1/4 pb-0': orientation === 'horizontal' },
+      ]"
+    >
+      <div class="flex flex-wrap gap-4">
+        <span>{{ label }}</span>
+        <span
+          v-if="!!error && showErrorMsg"
+          class="font-normal"
+        >
+          {{ error.message }}
+        </span>
+      </div>
+    </legend>
 
     <div class="flex-1">
       <slot />

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

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
-  id: string
+defineProps<{
+  parentId: string
   schemaPrefix: string
 }>()
 
 const model = defineModel<string>({ default: '' })
-
-const inputId = props.id + '-city'
 </script>
 
 <template>
   <ConnectFormInput
     v-model="model"
+    :data-testid="`${parentId}-field-city`"
+    :input-id="`${parentId}-input-city`"
     :name="schemaPrefix + '.city'"
-    :input-id="inputId"
     required
     :label="$t('connect.label.city')"
   />

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { iscCountriesListSortedByName as countries } from '#forms/app/utils/isoCountriesList'
+import { isoCountriesListSortedByName as countries } from '#forms/app/utils/isoCountriesList'
 
-const props = defineProps<{
-  id: string
+defineProps<{
+  parentId: string
   schemaPrefix: string
   disabled?: boolean
 }>()
@@ -13,8 +13,6 @@ defineEmits<{
 
 const model = defineModel<string>({ default: '' })
 
-const inputId = props.id + '-country'
-
 const displayedCountryName = computed(() => {
   if (model.value) {
     const found = countries.find(c => c.alpha_2 === model.value)?.name
@@ -32,14 +30,15 @@ const options = [
 
 <template>
   <UFormField
+    :data-testid="`${parentId}-field-country`"
     :name="schemaPrefix + '.country'"
     class="grow"
   >
     <template #default="{ error }">
       <USelect
-        :id="inputId"
+        :id="`${parentId}-input-country`"
         v-model="model"
-        :data-testid="inputId"
+        :data-testid="`${parentId}-input-country`"
         :items="options"
         value-key="alpha_2"
         label-key="name"
@@ -52,6 +51,9 @@ const options = [
           base: error
             ? 'shadow-input-error focus:shadow-input-error data-[state=open]:shadow-input-error'
             : '',
+          trailingIcon: error
+            ? 'text-error group-data-[state=open]:text-error group-focus:text-error'
+            : '',
           item: 'nth-2:border-b nth-2:border-gray-200',
           itemTrailingIcon: 'hidden',
         }"
@@ -66,7 +68,7 @@ const options = [
                   ? 'top-1/2 -translate-y-1/2'
                   : 'top-1 -translate-y-none text-xs',
                 error
-                  ? 'text-red-600'
+                  ? 'text-red-600 group-data-[state=open]:text-red-600 group-focus:text-red-600'
                   : '',
                 'absolute left-0 px-2.5 text-sm transition-all',
                 'group-data-[state=open]:text-primary group-focus:text-primary',

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

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
-  id: string
+defineProps<{
+  parentId: string
   schemaPrefix: string
   disabled?: boolean
 }>()
 
 const model = defineModel<string>({ default: '' })
-
-const inputId = props.id + '-locationDescription'
 </script>
 
 <template>
   <ConnectFormTextarea
     v-model="model"
-    :input-id="inputId"
+    :data-testid="`${parentId}-field-locationDescription`"
+    :input-id="`${parentId}-input-locationDescription`"
     :name="schemaPrefix + '.locationDescription'"
     :disabled
     :label="$t('connect.label.deliveryInstructionsOpt')"

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const props = defineProps<{
-  id: string
+defineProps<{
+  parentId: string
   schemaPrefix: string
   disabled?: boolean
   country?: string
@@ -13,15 +13,14 @@ const model = defineModel({
   type: String,
   default: ''
 })
-
-const inputId = props.id + '-postalCode'
 </script>
 
 <template>
   <ConnectFormInput
     v-model="model"
     :name="schemaPrefix + '.postalCode'"
-    :input-id="inputId"
+    :data-testid="`${parentId}-field-postalCode`"
+    :input-id="`${parentId}-input-postalCode`"
     :disabled
     required
     :label="country === 'US'

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

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 const {
   maxlength = '1000',
-  country,
-  id
+  country
 } = defineProps<{
-  id: string
+  parentId: string
   country?: string
   schemaPrefix: string
   disabled?: boolean
   maxlength?: string
-  help?: string
 }>()
 
 const model = defineModel<string>({ default: '' })
@@ -32,32 +30,34 @@ const displayedRegionName = computed(() => {
   }
   return ''
 })
-
-const inputId = id + '-region'
 </script>
 
 <template>
   <UFormField
     :name="schemaPrefix + '.region'"
     class="grow flex-1"
+    :data-testid="`${parentId}-field-region`"
   >
     <template #default="{ error }">
       <USelect
         v-if="country === 'US' || country === 'CA'"
-        :id="inputId"
+        :id="`${parentId}-input-region`"
         v-model="model"
-        :data-testid="inputId"
+        :data-testid="`${parentId}-input-region`"
         :items="regions"
         :aria-label="country === 'CA' ? $t('connect.label.province') : $t('connect.label.state')"
         value-key="code"
         label-key="name"
-        :aria-required="true"
+        :aria-required="country === 'US' || country === 'CA'"
         :disabled
         class="w-full grow ring-0"
         :ui="{
           base: error
             ? 'shadow-input-error focus:shadow-input-error data-[state=open]:shadow-input-error'
             : '',
+          trailingIcon: error
+            ? 'text-error group-data-[state=open]:text-error group-focus:text-error'
+            : '',
         }"
       >
         <template #default="{ modelValue }">
@@ -70,10 +70,10 @@ const inputId = id + '-region'
                   ? 'top-1/2 -translate-y-1/2'
                   : 'top-1 -translate-y-none text-xs',
                 error
-                  ? 'text-error'
-                  : '',
+                  ? 'text-error group-data-[state=open]:text-error group-focus:text-error'
+                  : 'group-data-[state=open]:text-primary group-focus:text-primary',
                 'absolute left-0 px-2.5 text-sm transition-all',
-                'group-data-[state=open]:text-primary group-focus:text-primary',
+                '',
               ]"
             >
               {{ country === 'CA' ? $t('connect.label.province') : $t('connect.label.state') }}
@@ -91,15 +91,15 @@ const inputId = id + '-region'
       </USelect>
       <ConnectInput
         v-else
-        :id="inputId"
+        :id="`${parentId}-input-region`"
         v-model="model"
-        :invalid="!!error"
+        :data-testid="`${parentId}-input-region`"
         :disabled
         :label="$t('connect.label.regionOpt')"
         :maxlength
       />
       <div
-        v-if="!help && !error"
+        v-if="!$slots.help && !error"
         class="h-4 mt-1"
       />
     </template>

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 const {
-  id,
   schemaPrefix,
   helpText = 'none',
   country,
   disableAddressComplete
 } = defineProps<{
-  id: string
+  parentId: string
   country?: string
   schemaPrefix: string
   disableAddressComplete?: boolean
@@ -19,8 +18,6 @@ const emit = defineEmits<{
   addressComplete: [value: ConnectAddress]
 }>()
 
-const inputId = id + '-street'
-
 const { address: canadaPostAddress, enableAddressComplete } = useCanadaPost()
 
 const addressComplete = (id: string) => {
@@ -37,7 +34,8 @@ watch(canadaPostAddress, (newAddress) => {
 <template>
   <ConnectFormInput
     v-model="model"
-    :input-id="inputId"
+    :data-testid="`${parentId}-field-street`"
+    :input-id="`${parentId}-input-street`"
     :name="schemaPrefix + '.street'"
     :help="helpText === 'none'
       ? undefined
@@ -47,7 +45,7 @@ watch(canadaPostAddress, (newAddress) => {
     "
     :label="$t('connect.label.street')"
     required
-    @keypress.once="addressComplete(inputId)"
-    @click="addressComplete(inputId)"
+    @keypress.once="addressComplete(`${parentId}-input-street`)"
+    @click="addressComplete(`${parentId}-input-street`)"
   />
 </template>

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

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-const props = defineProps<{
-  id: string
+defineProps<{
+  parentId: string
   schemaPrefix: string
 }>()
 
 const model = defineModel<string>({ default: '' })
-
-const inputId = props.id + '-streetAdditional'
 </script>
 
 <template>
   <ConnectFormInput
     v-model="model"
     :name="schemaPrefix + '.streetAdditional'"
-    :input-id="inputId"
+    :data-testid="`${parentId}-field-streetAdditional`"
+    :input-id="`${parentId}-input-streetAdditional`"
     :label="$t('connect.label.streetAdditional')"
   />
 </template>

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

@@ -1,22 +1,23 @@
 <script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */ // allow any for form ref type
+import type { Form } from '@nuxt/ui'
+
 const {
   disabledFields,
   excludedFields = ['streetName', 'streetNumber', 'unitNumber'],
   schemaPrefix,
-  streetHelpText = 'none'
+  streetHelpText = 'none',
+  formRef
 } = defineProps<{
   id: string
   schemaPrefix: string
+  formRef?: Form<any> | null
   disabledFields?: Array<keyof ConnectAddress>
   excludedFields?: Array<keyof ConnectAddress>
   disableAddressComplete?: boolean
   streetHelpText?: 'allow-po' | 'no-po' | 'none'
 }>()
 
-const emit = defineEmits<{
-  shouldValidate: [keys: Array<keyof ConnectAddress>]
-}>()
-
 const state = defineModel<Partial<ConnectAddress>>({ required: true })
 
 async function populateAddressComplete(e: ConnectAddress) {
@@ -37,17 +38,20 @@ async function populateAddressComplete(e: ConnectAddress) {
   // wait for dom to populate inputs
   await nextTick()
 
-  // emit valid keys to be validated by parent UForm
-  emit('shouldValidate', validKeys.map(k => schemaPrefix + k) as Array<keyof ConnectAddress>)
+  // validate populated fields if formRef provided
+  if (formRef) {
+    const fields = validKeys.map(k => `${schemaPrefix}.${k}`)
+    await formRef.validate({ name: fields, silent: true })
+  }
 }
 </script>
 
 <template>
-  <div class="space-y-2" :data-testid="id">
+  <div class="space-y-2" :data-testid="id + '-container'">
     <ConnectFormAddressCountry
       v-if="!excludedFields.includes('country')"
-      :id
       v-model="state.country"
+      :parent-id="id"
       :schema-prefix="schemaPrefix"
       :disabled="disabledFields?.includes('country')"
       @change="state.region = ''"
@@ -55,8 +59,8 @@ async function populateAddressComplete(e: ConnectAddress) {
 
     <ConnectFormAddressStreet
       v-if="!excludedFields.includes('street')"
-      :id
       v-model="state.street"
+      :parent-id="id"
       :schema-prefix="schemaPrefix"
       :country="state.country"
       :disable-address-complete="disableAddressComplete"
@@ -67,8 +71,8 @@ async function populateAddressComplete(e: ConnectAddress) {
 
     <ConnectFormAddressStreetAdditional
       v-if="!excludedFields.includes('streetAdditional')"
-      :id
       v-model="state.streetAdditional"
+      :parent-id="id"
       :schema-prefix="schemaPrefix"
       :disabled="disabledFields?.includes('streetAdditional')"
     />
@@ -76,16 +80,16 @@ async function populateAddressComplete(e: ConnectAddress) {
     <div class="flex flex-col gap-2 sm:gap-4 sm:flex-row">
       <ConnectFormAddressCity
         v-if="!excludedFields.includes('city')"
-        :id
         v-model="state.city"
+        :parent-id="id"
         :schema-prefix="schemaPrefix"
         :disabled="disabledFields?.includes('city')"
       />
 
       <ConnectFormAddressRegion
         v-if="!excludedFields.includes('region')"
-        :id
         v-model="state.region"
+        :parent-id="id"
         :schema-prefix="schemaPrefix"
         :country="state.country"
         :disabled="disabledFields?.includes('region')"
@@ -93,8 +97,8 @@ async function populateAddressComplete(e: ConnectAddress) {
 
       <ConnectFormAddressPostalCode
         v-if="!excludedFields.includes('postalCode')"
-        :id
         v-model="state.postalCode"
+        :parent-id="id"
         :schema-prefix="schemaPrefix"
         :country="state.country"
         :disabled="disabledFields?.includes('postalCode')"
@@ -103,8 +107,8 @@ async function populateAddressComplete(e: ConnectAddress) {
 
     <ConnectFormAddressDeliveryInstructions
       v-if="!excludedFields.includes('locationDescription')"
-      :id
       v-model="state.locationDescription"
+      :parent-id="id"
       :schema-prefix="schemaPrefix"
       :disabled="disabledFields?.includes('locationDescription')"
     />

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui'
+
+const {
+  orientation = 'vertical'
+} = defineProps<{
+  label: string
+  error?: FormError
+  showErrorMsg?: boolean
+  orientation?: 'vertical' | 'horizontal'
+}>()
+// TODO: figure out why text-error doesnt work on the legend text
+</script>
+
+<template>
+  <div
+    class="flex"
+    :class="[orientation === 'horizontal' ? 'flex-col gap-6 sm:flex-row sm:gap-4' : 'flex-col gap-6']"
+  >
+    <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' },
+      ]"
+    >
+      <div class="flex flex-wrap gap-4">
+        <span>{{ label }}</span>
+        <span
+          v-if="!!error && showErrorMsg"
+          class="font-normal"
+        >
+          {{ error.message }}
+        </span>
+      </div>
+    </span>
+    <div class="flex-1">
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -2,7 +2,6 @@
 defineProps<{
   name: string
   label: string
-  help?: string
   inputId: string
   required?: boolean
   autofocus?: boolean
@@ -16,7 +15,6 @@ const model = defineModel<string>({ required: true })
 <template>
   <UFormField
     :name
-    :help
     class="grow flex-1"
   >
     <template #default="{ error }">
@@ -24,14 +22,13 @@ const model = defineModel<string>({ required: true })
         :id="inputId"
         v-model="model"
         :mask
-        :required
-        :invalid="!!error"
+        :aria-required="required"
         :label
         :autofocus
         :disabled
       />
       <div
-        v-if="!help && !error"
+        v-if="!$slots.help && !error"
         class="h-4 mt-1"
       />
     </template>

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

@@ -2,7 +2,6 @@
 defineProps<{
   name: string
   label: string
-  help?: string
   inputId: string
   required?: boolean
   autofocus?: boolean
@@ -15,7 +14,6 @@ const model = defineModel<string>({ required: true })
 <template>
   <UFormField
     :name
-    :help
     class="grow flex-1"
   >
     <template #default="{ error }">
@@ -24,13 +22,12 @@ const model = defineModel<string>({ required: true })
         v-model="model"
         :data-testid="inputId"
         :required
-        :invalid="!!error"
         :label
         :autofocus
         :disabled
       />
       <div
-        v-if="!help && !error"
+        v-if="!$slots.help && !error"
         class="h-4 mt-1"
       />
     </template>

package/app/utils/index.ts

@@ -0,0 +1 @@
+export * from './zod-schemas'

package/app/utils/isoCountriesList.ts

@@ -2023,7 +2023,7 @@ export const countrySubdivisions = {
   ca: subdivisionsCa,
   us: subdivisionsUs
 }
-export const iscCountriesListSortedByName = isoCountriesList.toSorted(
+export const isoCountriesListSortedByName = isoCountriesList.toSorted(
   (c1, c2) => {
     if (c1.name < c2.name) {
       return -1

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

@@ -0,0 +1,111 @@
+import { z } from 'zod'
+
+export function getRequiredAddressSchema() {
+  const t = useNuxtApp().$i18n.t
+
+  return z.object({
+    street: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(50, t('connect.validation.maxChars', { count: 50 })),
+    streetAdditional: z
+      .string()
+      .max(50, t('connect.validation.maxChars', { count: 50 }))
+      .optional(),
+    city: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(40, t('connect.validation.maxChars', { count: 40 })),
+    region: z
+      .string()
+      .optional(),
+    postalCode: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(15, t('connect.validation.maxChars', { count: 15 })),
+    country: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired')),
+    locationDescription: z
+      .string()
+      .max(80, t('connect.validation.maxChars', { count: 80 }))
+      .optional()
+  }).superRefine((data, ctx) => {
+    // validate region based on country
+    // required if country is US or CA
+    // optional and max 2 characters if not US or CA
+    const country = data.country
+    const region = data.region
+
+    if (region && region.length > 2) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.maxChars', { count: 2 }),
+        path: ['region']
+      })
+    }
+
+    if ((country === 'US' || country === 'CA') && region?.length === 0) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.fieldRequired'),
+        path: ['region']
+      })
+    }
+  })
+}
+
+export function getNonRequiredAddressSchema() {
+  const t = useNuxtApp().$i18n.t
+
+  return z.object({
+    street: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(50, t('connect.validation.maxChars', { count: 50 }))
+      .optional()
+      .or(z.literal('')),
+    streetAdditional: z
+      .string()
+      .max(50, t('connect.validation.maxChars', { count: 50 }))
+      .optional(),
+    city: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(40, t('connect.validation.maxChars', { count: 40 }))
+      .optional()
+      .or(z.literal('')),
+    region: z
+      .string()
+      .optional(),
+    postalCode: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .max(15, t('connect.validation.maxChars', { count: 15 }))
+      .optional()
+      .or(z.literal('')),
+    country: z
+      .string()
+      .min(1, t('connect.validation.fieldRequired'))
+      .optional()
+      .or(z.literal('')),
+    locationDescription: z
+      .string()
+      .max(80, t('connect.validation.maxChars', { count: 80 }))
+      .optional()
+  }).superRefine((data, ctx) => {
+    // validate region based on country
+    // required if country is US or CA
+    // optional and max 2 characters if not US or CA
+    // const country = data.country
+    const region = data.region
+
+    if (region && region.length > 2) {
+      ctx.addIssue({
+        code: 'custom',
+        message: t('connect.validation.maxChars', { count: 2 }),
+        path: ['region']
+      })
+    }
+  })
+}

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

@@ -0,0 +1 @@
+export * from './addresses'

package/i18n/locales/en-CA.ts

@@ -33,6 +33,12 @@ export default {
     text: {
       addressCanBePOBox: 'Street address, PO box, rural route, or general delivery address.',
       addressCannotBePOBox: 'Address cannot be a PO Box.'
+    },
+    validation: {
+      fieldRequired: 'This field is required',
+      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'
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -17,7 +17,8 @@
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.1.10"
+    "zod": "^4.0.17",
+    "@sbc-connect/nuxt-base": "0.1.11"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -29,8 +30,10 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "pnpm run test:unit; pnpm run test:e2e",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:unit:watch": "vitest",
     "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "typecheck": "npx nuxt typecheck"
   }
 }