@sbc-connect/nuxt-forms 0.1.26 → 0.1.28

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.28
+
+### Patch Changes
+
+- [#86](https://github.com/bcgov/connect-nuxt/pull/86) [`c1fb4f2`](https://github.com/bcgov/connect-nuxt/commit/c1fb4f2a217b3d57e7ea7aed8b9773e215a21978) Thanks [@deetz99](https://github.com/deetz99)! - Update forms to emit @should-validate event instead of requiring form ref as prop to revalidate inputs on address complete.
+
+- Updated dependencies [[`c1fb4f2`](https://github.com/bcgov/connect-nuxt/commit/c1fb4f2a217b3d57e7ea7aed8b9773e215a21978)]:
+  - @sbc-connect/nuxt-base@0.1.26
+
+## 0.1.27
+
+### Patch Changes
+
+- [#85](https://github.com/bcgov/connect-nuxt/pull/85) [`6b0f70a`](https://github.com/bcgov/connect-nuxt/commit/6b0f70ab895a26c0b049dce84b130d6a04fd911e) Thanks [@kialj876](https://github.com/kialj876)! - Common layout updates, default state key for tombstone, fee store - waive fees, add prioirty, expose cached fees
+
+- [#84](https://github.com/bcgov/connect-nuxt/pull/84) [`f37700a`](https://github.com/bcgov/connect-nuxt/commit/f37700ab568335df724a5e9472a5e0b4198704b5) Thanks [@deetz99](https://github.com/deetz99)! - Cleanup model types and floating labels.
+
+- Updated dependencies [[`f37700a`](https://github.com/bcgov/connect-nuxt/commit/f37700ab568335df724a5e9472a5e0b4198704b5), [`6b0f70a`](https://github.com/bcgov/connect-nuxt/commit/6b0f70ab895a26c0b049dce84b130d6a04fd911e), [`ba04c84`](https://github.com/bcgov/connect-nuxt/commit/ba04c8424353b32af0811534d9c3edd31e15d39e)]:
+  - @sbc-connect/nuxt-base@0.1.25
+
 ## 0.1.26
 
 ### Patch Changes

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

@@ -2,9 +2,10 @@
 defineProps<{
   parentId: string
   schemaPrefix: string
+  required?: boolean
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 </script>
 
 <template>
@@ -13,7 +14,7 @@ const model = defineModel<string>({ default: '' })
     :data-testid="`${parentId}-field-city`"
     :input-id="`${parentId}-input-city`"
     :name="schemaPrefix + '.city'"
-    required
+    :required
     :label="$t('connect.label.city')"
   />
 </template>

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

@@ -1,29 +1,24 @@
 <script setup lang="ts">
+import type { SelectItem } from '@nuxt/ui'
 import { isoCountriesListSortedByName as countries } from '#forms/app/utils/isoCountriesList'
 
 defineProps<{
   parentId: string
   schemaPrefix: string
   disabled?: boolean
+  required?: boolean
 }>()
 
 defineEmits<{
   change: []
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 
-const displayedCountryName = computed(() => {
-  if (model.value) {
-    const found = countries.find(c => c.alpha_2 === model.value)?.name
-    return found ?? ''
-  }
-  return ''
-})
-
-const options = [
+const options: SelectItem[] = [
   countries.find(c => c.alpha_2 === 'CA')!,
   countries.find(c => c.alpha_2 === 'US')!,
+  { type: 'separator' },
   ...countries
 ]
 </script>
@@ -35,58 +30,18 @@ const options = [
     class="grow"
   >
     <template #default="{ error }">
-      <USelect
+      <ConnectSelect
         :id="`${parentId}-input-country`"
         v-model="model"
-        :data-testid="`${parentId}-input-country`"
+        :label="$t('connect.label.country')"
         :items="options"
         value-key="alpha_2"
         label-key="name"
         class="w-full"
-        :class="error ? 'shadow-input-error ring-0' : ''"
         :disabled
-        :aria-label="$t('connect.label.country')"
-        :aria-required="true"
-        :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'
-            : '',
-          item: 'nth-2:border-b nth-2:border-gray-200',
-          itemTrailingIcon: 'hidden',
-        }"
+        :required
         @change="$emit('change')"
-      >
-        <template #default="{ modelValue }">
-          <div class="relative px-2.5 pb-2 pt-6 w-full">
-            <span
-              aria-hidden="true"
-              :class="[
-                !modelValue
-                  ? 'top-1/2 -translate-y-1/2'
-                  : 'top-1 -translate-y-none text-xs',
-                error
-                  ? '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',
-              ]"
-            >
-              {{ $t('connect.label.country') }}
-            </span>
-            <div class="h-6">
-              <span
-                v-if="modelValue"
-                class="line-clamp-1 text-left"
-              >
-                {{ displayedCountryName }}
-              </span>
-            </div>
-          </div>
-        </template>
-      </USelect>
+      />
       <div
         v-if="!$slots.help && !error"
         class="h-4 mt-1"

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

@@ -5,7 +5,7 @@ defineProps<{
   disabled?: boolean
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 </script>
 
 <template>

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

@@ -4,14 +4,16 @@ defineProps<{
   schemaPrefix: string
   disabled?: boolean
   country?: string
+  required?: boolean
 }>()
 
-const model = defineModel({
+const model = defineModel<string | undefined>({
   set(value) {
-    return value.toUpperCase()
+    if (value) {
+      return value.toUpperCase()
+    }
   },
-  type: String,
-  default: ''
+  required: true
 })
 </script>
 
@@ -22,7 +24,7 @@ const model = defineModel({
     :data-testid="`${parentId}-field-postalCode`"
     :input-id="`${parentId}-input-postalCode`"
     :disabled
-    required
+    :required
     :label="country === 'US'
       ? $t('connect.label.zipCode')
       : $t('connect.label.postalCode')

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

@@ -8,9 +8,10 @@ const {
   schemaPrefix: string
   disabled?: boolean
   maxlength?: string
+  required?: boolean
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 
 const regions = computed(() => {
   switch (country) {
@@ -22,14 +23,6 @@ const regions = computed(() => {
       return []
   }
 })
-
-const displayedRegionName = computed(() => {
-  if (model.value) {
-    const found = regions.value.find(r => r.code === model.value)?.name
-    return found ?? ''
-  }
-  return ''
-})
 </script>
 
 <template>
@@ -39,56 +32,18 @@ const displayedRegionName = computed(() => {
     :data-testid="`${parentId}-field-region`"
   >
     <template #default="{ error }">
-      <USelect
+      <ConnectSelect
         v-if="country === 'US' || country === 'CA'"
         :id="`${parentId}-input-region`"
         v-model="model"
-        :data-testid="`${parentId}-input-region`"
+        :label="country === 'CA' ? $t('connect.label.province') : $t('connect.label.state')"
         :items="regions"
-        :aria-label="country === 'CA' ? $t('connect.label.province') : $t('connect.label.state')"
         value-key="code"
         label-key="name"
-        :aria-required="country === 'US' || country === 'CA'"
+        :required
         :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 }">
-          <div class="relative px-2.5 pb-2 pt-6 w-full">
-            <span
-              aria-hidden="true"
-              class="absolute left-0 px-2.5 text-sm transition-all"
-              :class="[
-                !modelValue
-                  ? 'top-1/2 -translate-y-1/2'
-                  : 'top-1 -translate-y-none text-xs',
-                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',
-                '',
-              ]"
-            >
-              {{ country === 'CA' ? $t('connect.label.province') : $t('connect.label.state') }}
-            </span>
-            <div class="h-6">
-              <span
-                v-if="modelValue"
-                class="line-clamp-1 text-left"
-              >
-                {{ displayedRegionName }}
-              </span>
-            </div>
-          </div>
-        </template>
-      </USelect>
+        class="w-full grow"
+      />
       <ConnectInput
         v-else
         :id="`${parentId}-input-region`"

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

@@ -3,25 +3,27 @@ const {
   schemaPrefix,
   helpText = 'none',
   country,
-  disableAddressComplete
+  disableAddressComplete,
+  parentId
 } = defineProps<{
   parentId: string
   country?: string
   schemaPrefix: string
   disableAddressComplete?: boolean
   helpText?: 'allow-po' | 'no-po' | 'none'
+  required?: boolean
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 
 const emit = defineEmits<{
   addressComplete: [value: ConnectAddress]
 }>()
 
-const { address: canadaPostAddress, enableAddressComplete } = useCanadaPost()
+const { address: canadaPostAddress, enableAddressComplete, destroyAddressComplete } = useCanadaPost()
 
 const addressComplete = (id: string) => {
-  if (!disableAddressComplete && country && country.trim() !== '') {
+  if (!disableAddressComplete && country === 'CA') {
     enableAddressComplete(id, country, false)
   }
 }
@@ -29,6 +31,17 @@ const addressComplete = (id: string) => {
 watch(canadaPostAddress, (newAddress) => {
   emit('addressComplete', newAddress)
 })
+
+watch(
+  () => country,
+  (v) => {
+    if (v !== 'CA') {
+      destroyAddressComplete()
+    } else if (!disableAddressComplete) {
+      enableAddressComplete(`${parentId}-input-street`, v, false)
+    }
+  }
+)
 </script>
 
 <template>
@@ -44,7 +57,7 @@ watch(canadaPostAddress, (newAddress) => {
         : $t('connect.text.addressCanBePOBox')
     "
     :label="$t('connect.label.street')"
-    required
+    :required
     @keypress.once="addressComplete(`${parentId}-input-street`)"
     @click="addressComplete(`${parentId}-input-street`)"
   />

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

@@ -4,7 +4,7 @@ defineProps<{
   schemaPrefix: string
 }>()
 
-const model = defineModel<string>({ default: '' })
+const model = defineModel<string | undefined>({ required: true })
 </script>
 
 <template>

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

@@ -1,21 +1,21 @@
 <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',
-  formRef
+  streetHelpText = 'none'
 } = 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'
+  required?: boolean
+}>()
+
+const emit = defineEmits<{
+  'should-validate': []
 }>()
 
 const state = defineModel<Partial<ConnectAddress>>({ required: true })
@@ -37,12 +37,7 @@ async function populateAddressComplete(e: ConnectAddress) {
 
   // wait for dom to populate inputs
   await nextTick()
-
-  // validate populated fields if formRef provided
-  if (formRef) {
-    const fields = validKeys.map(k => `${schemaPrefix}.${k}`)
-    await formRef.validate({ name: fields, silent: true })
-  }
+  emit('should-validate')
 }
 </script>
 
@@ -54,6 +49,7 @@ async function populateAddressComplete(e: ConnectAddress) {
       :parent-id="id"
       :schema-prefix="schemaPrefix"
       :disabled="disabledFields?.includes('country')"
+      :required
       @change="state.region = ''"
     />
 
@@ -66,6 +62,7 @@ async function populateAddressComplete(e: ConnectAddress) {
       :disable-address-complete="disableAddressComplete"
       :disabled="disabledFields?.includes('street')"
       :help-text="streetHelpText"
+      :required
       @address-complete="populateAddressComplete"
     />
 
@@ -84,6 +81,7 @@ async function populateAddressComplete(e: ConnectAddress) {
         :parent-id="id"
         :schema-prefix="schemaPrefix"
         :disabled="disabledFields?.includes('city')"
+        :required
       />
 
       <ConnectFormAddressRegion
@@ -93,6 +91,7 @@ async function populateAddressComplete(e: ConnectAddress) {
         :schema-prefix="schemaPrefix"
         :country="state.country"
         :disabled="disabledFields?.includes('region')"
+        :required
       />
 
       <ConnectFormAddressPostalCode
@@ -102,6 +101,7 @@ async function populateAddressComplete(e: ConnectAddress) {
         :schema-prefix="schemaPrefix"
         :country="state.country"
         :disabled="disabledFields?.includes('postalCode')"
+        :required
       />
     </div>
 

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

@@ -10,7 +10,7 @@ defineProps<{
   help?: string
 }>()
 
-const model = defineModel<string>({ required: true })
+const model = defineModel<string | number | bigint | null | undefined>({ required: true })
 </script>
 
 <template>

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

@@ -9,7 +9,7 @@ defineProps<{
   help?: string
 }>()
 
-const model = defineModel<string>({ required: true })
+const model = defineModel<null | string | number | undefined>({ required: true })
 </script>
 
 <template>

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

@@ -14,9 +14,8 @@
         </div>
       </slot>
     </template>
-    <template #footer>
+    <template #topFooters>
       <ConnectButtonControlWrapper />
-      <ConnectFooter />
     </template>
   </ConnectLayout>
 </template>

package/app/composables/useCanadaPost.ts

@@ -42,9 +42,8 @@ export const useCanadaPost = () => {
       console.warn('AddressComplete not initialized due to missing script and/or key')
       return
     }
-    if ((window as any).currentAddressComplete) {
-      (window as any).currentAddressComplete.destroy()
-    }
+    destroyAddressComplete();
+
     (window as any).currentAddressComplete = createAddressComplete(pca, key, id, countryIso2, countrySelect)
   }
 
@@ -60,9 +59,16 @@ export const useCanadaPost = () => {
     address.unitNumber = addressComplete.SubBuilding
   }
 
+  const destroyAddressComplete = () => {
+    if ((window as any).currentAddressComplete) {
+      (window as any).currentAddressComplete.destroy()
+    }
+  }
+
   return {
     activeAddressField,
     address,
-    enableAddressComplete
+    enableAddressComplete,
+    destroyAddressComplete
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-forms",
   "type": "module",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -13,11 +13,11 @@
     "typescript": "5.9.3",
     "vue-tsc": "3.1.2",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.0.6",
-    "@sbc-connect/playwright-config": "0.0.7"
+    "@sbc-connect/playwright-config": "0.0.8",
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-base": "0.1.24"
+    "@sbc-connect/nuxt-base": "0.1.26"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",