@sbc-connect/nuxt-forms 0.1.25 → 0.1.27

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @sbc-connect/nuxt-forms
 
+## 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
+
+- [#80](https://github.com/bcgov/connect-nuxt/pull/80) [`0615542`](https://github.com/bcgov/connect-nuxt/commit/06155422d0a8d61ee862bb3483330610b4a9434d) Thanks [@deetz99](https://github.com/deetz99)! - feat: Move button control to base and handle loading state internally
+
+- Updated dependencies [[`0615542`](https://github.com/bcgov/connect-nuxt/commit/06155422d0a8d61ee862bb3483330610b4a9434d)]:
+  - @sbc-connect/nuxt-base@0.1.24
+
 ## 0.1.25
 
 ### 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

@@ -16,6 +16,7 @@ const {
   excludedFields?: Array<keyof ConnectAddress>
   disableAddressComplete?: boolean
   streetHelpText?: 'allow-po' | 'no-po' | 'none'
+  required?: boolean
 }>()
 
 const state = defineModel<Partial<ConnectAddress>>({ required: true })
@@ -54,6 +55,7 @@ async function populateAddressComplete(e: ConnectAddress) {
       :parent-id="id"
       :schema-prefix="schemaPrefix"
       :disabled="disabledFields?.includes('country')"
+      :required
       @change="state.region = ''"
     />
 
@@ -66,6 +68,7 @@ async function populateAddressComplete(e: ConnectAddress) {
       :disable-address-complete="disableAddressComplete"
       :disabled="disabledFields?.includes('street')"
       :help-text="streetHelpText"
+      :required
       @address-complete="populateAddressComplete"
     />
 
@@ -84,6 +87,7 @@ async function populateAddressComplete(e: ConnectAddress) {
         :parent-id="id"
         :schema-prefix="schemaPrefix"
         :disabled="disabledFields?.includes('city')"
+        :required
       />
 
       <ConnectFormAddressRegion
@@ -93,6 +97,7 @@ async function populateAddressComplete(e: ConnectAddress) {
         :schema-prefix="schemaPrefix"
         :country="state.country"
         :disabled="disabledFields?.includes('region')"
+        :required
       />
 
       <ConnectFormAddressPostalCode
@@ -102,6 +107,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/app/types/forms-page-meta.d.ts

@@ -1,7 +1,5 @@
-declare module '#app' {
-  interface PageMeta {
-    buttonControl?: ConnectButtonControl
-  }
-}
+// declare module '#app' {
+//   interface PageMeta {}
+// }
 
 export {}

package/package.json

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

package/app/components/Connect/ButtonControl/Buttons.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-defineProps<{ buttons: ConnectButton[], position: 'left' | 'right' }>()
-</script>
-
-<template>
-  <div
-    v-for="(button, i) in buttons"
-    :key="`${position}-button-` + i"
-    data-testid="button-wrapper"
-  >
-    <UButton
-      class="max-w-fit px-7 py-3 mb-1"
-      v-bind="button"
-    />
-    <p :class="['text-center', !button.removeAlertSpacing ? 'h-[1.25rem]' : '']">
-      <span v-if="button.alertText" class="text-error">{{ button.alertText }}</span>
-    </p>
-  </div>
-</template>

package/app/components/Connect/ButtonControl/Index.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-const buttonControl = computed(() => useRoute().meta.buttonControl as ConnectButtonControl)
-const leftGroup = computed(() => buttonControl.value?.leftGroup || [])
-const rightGroup = computed(() => buttonControl.value?.rightGroup || [])
-const leftAlertText = computed(() => buttonControl.value?.leftGroup.alertText || undefined)
-const rightAlertText = computed(() => buttonControl.value?.rightGroup.alertText || undefined)
-</script>
-
-<template>
-  <div
-    class="@container"
-    data-testid="connect-button-control"
-  >
-    <div class="grid grid-cols-1 gap-4 @3xl:grid-cols-2">
-      <div>
-        <div
-          class="flex justify-center @3xl:justify-start"
-          data-testid="left-buttons"
-        >
-          <div
-            class="relative flex flex-col flex-wrap gap-4 justify-center"
-            :class="leftGroup.stacked ? '' : 'flex-row'"
-          >
-            <div
-              v-if="leftAlertText"
-              class="absolute flex flex-wrap justify-start bottom-1/3 right-[-13rem] w-[12rem]"
-            >
-              <p class="text-error" role="alert">
-                {{ leftAlertText }}
-              </p>
-            </div>
-            <ConnectButtonControlButtons :buttons="leftGroup.buttons" :position="'left'" />
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          class="flex justify-center @3xl:justify-end"
-          data-testid="right-buttons"
-        >
-          <div
-            class="relative flex flex-col flex-wrap gap-4 justify-center"
-            :class="rightGroup.stacked ? '' : 'flex-row'"
-          >
-            <div
-              v-if="rightAlertText"
-              class="absolute flex flex-wrap justify-end bottom-1/3 left-[-13rem] w-[12rem]"
-            >
-              <p class="text-error" role="alert">
-                {{ rightAlertText }}
-              </p>
-            </div>
-            <ConnectButtonControlButtons :buttons="rightGroup.buttons" :position="'right'" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/app/components/Connect/ButtonControl/Wrapper.vue

@@ -1,10 +0,0 @@
-<template>
-  <div
-    class="bg-shade-inverted pb-6 pt-10"
-    data-testid="connect-button-control-wrapper"
-  >
-    <div class="app-inner-container app-body">
-      <ConnectButtonControl />
-    </div>
-  </div>
-</template>

package/app/composables/useButtonControl.ts

@@ -1,72 +0,0 @@
-export const useButtonControl = () => {
-  const route = useRoute()
-
-  function setButtonControl(buttonControl: ConnectButtonControl) {
-    // @ts-expect-error; typescript complains about the object type being too large
-    route.meta.buttonControl = buttonControl
-  }
-
-  function getButtonControl(): ConnectButtonControl {
-    return route.meta.buttonControl as ConnectButtonControl
-  }
-
-  function handleButtonLoading(reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
-    // set button control for loading / disabling buttons on submit or save or reset to default
-    const updateButtonGrp = (buttonArray: ConnectButton[], grp: 'left' | 'right') => {
-      for (const [index, element] of buttonArray.entries()) {
-        if (reset) {
-          element.disabled = false
-          element.loading = false
-        } else {
-          element.loading = (grp === buttonGrp) && index === buttonIndex
-          element.disabled = !element.loading
-        }
-      }
-    }
-    const buttonControl = getButtonControl()
-    // update left buttons with loading / disabled as required
-    updateButtonGrp(buttonControl.leftGroup.buttons, 'left')
-    // update right buttons with loading / disabled as required
-    updateButtonGrp(buttonControl.rightGroup.buttons, 'right')
-  }
-
-  async function setAlertText(reset: boolean, grp?: 'left' | 'right', index?: number, text?: string) {
-    const resetButtonGrp = (buttonArray: ConnectButton[]) => {
-      for (const element of buttonArray) {
-        element.alertText = undefined
-      }
-    }
-    // clear existing text
-    if (route.meta.buttonControl) {
-      route.meta.buttonControl.leftGroup.alertText = undefined
-      route.meta.buttonControl.rightGroup.alertText = undefined
-      resetButtonGrp(route.meta.buttonControl.leftGroup.buttons)
-      resetButtonGrp(route.meta.buttonControl.rightGroup.buttons)
-    }
-
-    // only continue if not resetting
-    if (!reset) {
-      // required for dom to clear existing content
-      // allows screenreader alert for the same content if set multiple times
-      await nextTick()
-      // set content
-      if (route.meta.buttonControl) {
-        if (index === undefined) {
-          route.meta.buttonControl.leftGroup.alertText = (grp === 'left') ? text : undefined
-          route.meta.buttonControl.rightGroup.alertText = (grp === 'right') ? text : undefined
-        } else if (grp === 'left' && route.meta.buttonControl.leftGroup.buttons[index]) {
-          route.meta.buttonControl.leftGroup.buttons[index].alertText = text
-        } else if (grp === 'right' && route.meta.buttonControl.rightGroup.buttons[index]) {
-          route.meta.buttonControl.rightGroup.buttons[index].alertText = text
-        }
-      }
-    }
-  }
-
-  return {
-    getButtonControl,
-    setButtonControl,
-    handleButtonLoading,
-    setAlertText
-  }
-}

package/app/interfaces/connect-button-control.ts

@@ -1,17 +0,0 @@
-import type { ButtonProps } from '@nuxt/ui'
-
-export interface ConnectButton extends ButtonProps {
-  alertText?: string
-  removeAlertSpacing?: boolean
-}
-
-export interface ConnectButtonGroup {
-  alertText?: string
-  buttons: ConnectButton[]
-  stacked?: boolean
-}
-
-export interface ConnectButtonControl {
-  leftGroup: ConnectButtonGroup
-  rightGroup: ConnectButtonGroup
-}