@sbc-connect/nuxt-forms 0.1.10 → 0.1.12

package/.env.example

@@ -8,4 +8,7 @@ NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
 NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
 
 # LaunchDarkly
-NUXT_PUBLIC_LD_CLIENT_ID=""
+NUXT_PUBLIC_LD_CLIENT_ID=""
+
+# Canada Post
+NUXT_PUBLIC_ADDRESS_COMPLETE_KEY=""

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [#45](https://github.com/bcgov/connect-nuxt/pull/45) [`8eb83d3`](https://github.com/bcgov/connect-nuxt/commit/8eb83d3e4d0af392f3e7ca8661020e6ae3f4cc7d) Thanks [@deetz99](https://github.com/deetz99)! - Add a11y check, fix base a11y, add tests for forms - bcgov/entity#29335
+
+- Updated dependencies [[`8eb83d3`](https://github.com/bcgov/connect-nuxt/commit/8eb83d3e4d0af392f3e7ca8661020e6ae3f4cc7d)]:
+  - @sbc-connect/nuxt-base@0.1.10
+
 ## 0.1.10
 
 ### 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,42 +1,41 @@
 <script setup lang="ts">
 const {
-  id,
   schemaPrefix,
-  helpText = 'none'
+  helpText = 'none',
+  country,
+  disableAddressComplete
 } = defineProps<{
-  id: string
-  // country?: string
+  parentId: string
+  country?: string
   schemaPrefix: string
-  // disableAddressComplete?: boolean
+  disableAddressComplete?: boolean
   helpText?: 'allow-po' | 'no-po' | 'none'
 }>()
 
 const model = defineModel<string>({ default: '' })
 
-// TODO: add address complete, and address complete disable options
-// const emit = defineEmits<{
-//   addressComplete: [value: ConnectAddress]
-// }>()
-
-const inputId = id + '-street'
+const emit = defineEmits<{
+  addressComplete: [value: ConnectAddress]
+}>()
 
-// const { address: canadaPostAddress, enableAddressComplete } = useCanadaPost()
+const { address: canadaPostAddress, enableAddressComplete } = useCanadaPost()
 
-// const addressComplete = (id: string) => {
-//   if (props.country && props.country.trim() !== '') {
-//     enableAddressComplete(id, props.country, props.disableAddressComplete)
-//   }
-// }
+const addressComplete = (id: string) => {
+  if (!disableAddressComplete && country && country.trim() !== '') {
+    enableAddressComplete(id, country, false)
+  }
+}
 
-// watch(canadaPostAddress, (newAddress) => {
-//   emit('addressComplete', newAddress)
-// })
+watch(canadaPostAddress, (newAddress) => {
+  emit('addressComplete', newAddress)
+})
 </script>
 
 <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
@@ -46,7 +45,7 @@ const inputId = id + '-street'
     "
     :label="$t('connect.label.street')"
     required
+    @keypress.once="addressComplete(`${parentId}-input-street`)"
+    @click="addressComplete(`${parentId}-input-street`)"
   />
-  <!-- @keypress.once="addressComplete(inputId)"
-    @click="addressComplete(inputId)" -->
 </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>