@sbc-connect/nuxt-forms 0.0.0-test-ld-20260520212549

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

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

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineProps<{
+  parentId: string
+  schemaPrefix: string
+  disabled?: boolean
+  country?: string
+  required?: boolean
+}>()
+
+const isOptionalPostalCodeCountry = (country?: string) => {
+  if (!country) {
+    return false
+  }
+
+  return isNoPostalCodeCountry(country)
+}
+
+const model = defineModel<string | undefined>({
+  set(value) {
+    if (value) {
+      return value.toUpperCase()
+    }
+  },
+  required: true
+})
+</script>
+
+<template>
+  <ConnectFormInput
+    v-model="model"
+    :name="schemaPrefix + '.postalCode'"
+    :data-testid="`${parentId}-field-postalCode`"
+    :input-id="`${parentId}-input-postalCode`"
+    :disabled
+    :required="required && !isOptionalPostalCodeCountry(country)"
+    :label="country === 'US'
+      ? $t('connect.label.zipCode')
+      : isOptionalPostalCodeCountry(country)
+        ? $t('connect.label.postalCodeOpt')
+        : $t('connect.label.postalCode')
+    "
+    :mask="country === 'CA'
+      ? '*** ***'
+      : country === 'US'
+        ? '#####-####'
+        : undefined"
+  />
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const {
+  maxlength = '1000',
+  country
+} = defineProps<{
+  parentId: string
+  country?: string
+  schemaPrefix: string
+  disabled?: boolean
+  maxlength?: string
+  required?: boolean
+}>()
+
+const model = defineModel<string | undefined>({ required: true })
+
+const regions = computed(() => {
+  switch (country) {
+    case 'US':
+      return countrySubdivisions.us
+    case 'CA':
+      return countrySubdivisions.ca
+    default:
+      return []
+  }
+})
+</script>
+
+<template>
+  <UFormField
+    :name="schemaPrefix + '.region'"
+    class="grow flex-1"
+    :data-testid="`${parentId}-field-region`"
+  >
+    <template #default="{ error }">
+      <ConnectSelect
+        v-if="country === 'US' || country === 'CA'"
+        :id="`${parentId}-input-region`"
+        v-model="model"
+        :label="country === 'CA' ? $t('connect.label.province') : $t('connect.label.state')"
+        :items="regions"
+        value-key="code"
+        label-key="name"
+        :required
+        :disabled
+        class="w-full grow"
+      />
+      <ConnectInput
+        v-else
+        :id="`${parentId}-input-region`"
+        v-model="model"
+        :data-testid="`${parentId}-input-region`"
+        :disabled
+        :label="$t('connect.label.regionOpt')"
+        :maxlength
+      />
+      <div
+        v-if="!$slots.help && !error"
+        class="h-4 mt-1"
+      />
+    </template>
+  </UFormField>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const {
+  schemaPrefix,
+  helpText = 'none',
+  country,
+  disableAddressComplete,
+  parentId
+} = defineProps<{
+  parentId: string
+  country?: string
+  schemaPrefix: string
+  disableAddressComplete?: boolean
+  helpText?: 'allow-po' | 'no-po' | 'none'
+  required?: boolean
+}>()
+
+const model = defineModel<string | undefined>({ required: true })
+
+const emit = defineEmits<{
+  addressComplete: [value: ConnectAddress]
+}>()
+
+const { address: canadaPostAddress, enableAddressComplete, destroyAddressComplete } = useCanadaPost()
+
+const addressComplete = (id: string) => {
+  if (!disableAddressComplete && country === 'CA') {
+    enableAddressComplete(id, country, false)
+  }
+}
+
+watch(canadaPostAddress, (newAddress) => {
+  emit('addressComplete', newAddress)
+})
+
+watch(
+  () => country,
+  (v) => {
+    if (v !== 'CA') {
+      destroyAddressComplete()
+    } else if (!disableAddressComplete) {
+      enableAddressComplete(`${parentId}-input-street`, v, false)
+    }
+  }
+)
+</script>
+
+<template>
+  <ConnectFormInput
+    v-model="model"
+    :data-testid="`${parentId}-field-street`"
+    :input-id="`${parentId}-input-street`"
+    :name="schemaPrefix + '.street'"
+    :help="helpText === 'none'
+      ? undefined
+      : helpText === 'no-po'
+        ? $t('connect.text.addressCannotBePOBox')
+        : $t('connect.text.addressCanBePOBox')
+    "
+    :label="$t('connect.label.street')"
+    :required
+    @keypress.once="addressComplete(`${parentId}-input-street`)"
+    @click="addressComplete(`${parentId}-input-street`)"
+  />
+</template>

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

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

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+const {
+  disabledFields,
+  excludedFields = ['streetName', 'streetNumber', 'unitNumber'],
+  schemaPrefix,
+  streetHelpText = 'none'
+} = defineProps<{
+  id: string
+  schemaPrefix: string
+  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 })
+
+async function populateAddressComplete(e: ConnectAddress) {
+  // get disabled/excluded fields
+  const disabledSet = new Set(disabledFields)
+  const excludedSet = new Set(excludedFields)
+
+  // get array of valid keys
+  const validKeys = (Object.keys(e) as Array<keyof ConnectAddress>).filter(key =>
+    !disabledSet.has(key) && !excludedSet.has(key)
+  )
+
+  // set state for each valid key
+  validKeys.forEach((key) => {
+    state.value[key] = e[key]
+  })
+
+  // wait for dom to populate inputs
+  await nextTick()
+  emit('should-validate')
+}
+</script>
+
+<template>
+  <div class="space-y-2" :data-testid="id + '-container'">
+    <ConnectFormAddressCountry
+      v-if="!excludedFields.includes('country')"
+      v-model="state.country"
+      :parent-id="id"
+      :schema-prefix="schemaPrefix"
+      :disabled="disabledFields?.includes('country')"
+      :required
+      @change="state.region = ''"
+    />
+
+    <ConnectFormAddressStreet
+      v-if="!excludedFields.includes('street')"
+      v-model="state.street"
+      :parent-id="id"
+      :schema-prefix="schemaPrefix"
+      :country="state.country"
+      :disable-address-complete="disableAddressComplete"
+      :disabled="disabledFields?.includes('street')"
+      :help-text="streetHelpText"
+      :required
+      @address-complete="populateAddressComplete"
+    />
+
+    <ConnectFormAddressStreetAdditional
+      v-if="!excludedFields.includes('streetAdditional')"
+      v-model="state.streetAdditional"
+      :parent-id="id"
+      :schema-prefix="schemaPrefix"
+      :disabled="disabledFields?.includes('streetAdditional')"
+    />
+
+    <div class="flex flex-col gap-2 sm:gap-4 sm:flex-row">
+      <ConnectFormAddressCity
+        v-if="!excludedFields.includes('city')"
+        v-model="state.city"
+        :parent-id="id"
+        :schema-prefix="schemaPrefix"
+        :disabled="disabledFields?.includes('city')"
+        :required
+      />
+
+      <ConnectFormAddressRegion
+        v-if="!excludedFields.includes('region')"
+        v-model="state.region"
+        :parent-id="id"
+        :schema-prefix="schemaPrefix"
+        :country="state.country"
+        :disabled="disabledFields?.includes('region')"
+        :required
+      />
+
+      <ConnectFormAddressPostalCode
+        v-if="!excludedFields.includes('postalCode')"
+        v-model="state.postalCode"
+        :parent-id="id"
+        :schema-prefix="schemaPrefix"
+        :country="state.country"
+        :disabled="disabledFields?.includes('postalCode')"
+        :required
+      />
+    </div>
+
+    <ConnectFormAddressDeliveryInstructions
+      v-if="!excludedFields.includes('locationDescription')"
+      v-model="state.locationDescription"
+      :parent-id="id"
+      :schema-prefix="schemaPrefix"
+      :disabled="disabledFields?.includes('locationDescription')"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui'
+
+const {
+  orientation = 'horizontal',
+  paddingClass = 'x-default',
+  detailsAriaHidden = false
+} = defineProps<{
+  label: string
+  error?: FormError | boolean
+  detailsAriaHidden?: boolean
+  showErrorMsg?: boolean
+  orientation?: 'vertical' | 'horizontal'
+  paddingClass?: 'x-default' | 'xy-default' | string
+}>()
+
+const padding = paddingClass === 'x-default'
+  ? 'padding-x-default'
+  : paddingClass === 'xy-default'
+    ? 'padding-xy-default'
+    : paddingClass
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex gap-4 sm:gap-6',
+      padding,
+      orientation === 'horizontal' ? 'flex-col sm:flex-row' : 'flex-col',
+      error ? 'shadow-section-error' : '',
+    ]"
+  >
+    <span
+      :aria-hidden="detailsAriaHidden"
+      class="text-base text-neutral-highlighted font-bold"
+      :class="{ 'w-full sm:basis-1/4': orientation === 'horizontal' }"
+    >
+      <div class="flex flex-col gap-1">
+        <span>{{ label }}</span>
+        <span
+          v-if="error && typeof error === 'object' && 'message' in error && showErrorMsg"
+          class="font-normal text-error"
+        >
+          {{ error.message }}
+        </span>
+      </div>
+    </span>
+    <div class="flex-1">
+      <slot />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  label: string
+  inputId: string
+  required?: boolean
+  autofocus?: boolean
+  mask?: string
+  disabled?: boolean
+  help?: string
+}>()
+
+const model = defineModel<string | number | bigint | null | undefined>({ required: true })
+</script>
+
+<template>
+  <UFormField
+    :name
+    :help
+    class="grow flex-1"
+  >
+    <template #default="{ error }">
+      <ConnectInput
+        :id="inputId"
+        v-model="model"
+        :mask
+        :aria-required="required"
+        :label
+        :autofocus
+        :disabled
+      />
+      <div
+        v-if="!help && !error"
+        class="h-4 mt-1"
+      />
+    </template>
+  </UFormField>
+</template>

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

@@ -0,0 +1,128 @@
+<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) => {
+  const target = event.target as HTMLInputElement
+  selectedCountry.value = {
+    callingCode: target.value
+  }
+}
+
+const countryListOptions: Array<PhoneCountry> = Object.keys(_countryListOptions).map((key) => {
+  const parts = (_countryListOptions[key] ?? '').split(',')
+  const callingCode = parts[0] ?? ''
+  const nameEn = parts[1]
+  const nameLocal = parts[2]
+  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' : undefined"
+    :search="search"
+    :label-key="undefined"
+    :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 as PhoneCountry)?.label }}</span>
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <div v-if="item" class="flex items-end cursor-pointer">
+        <CountryFlag
+          :tooltip-text="(item as PhoneCountry).nameLocal"
+          :country-code-iso2letter="(item as PhoneCountry).iso2 ?? ''"
+        />
+        <span class="ml-2 truncate">{{ (item as PhoneCountry).label }}</span>
+        <span class="sr-only">{{ (item as PhoneCountry).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/components/Connect/Form/Textarea.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { TextareaProps } from '@nuxt/ui'
+
+defineProps<{
+  name: string
+  label: string
+  inputId: string
+  required?: boolean
+  autofocus?: boolean
+  disabled?: boolean
+  help?: string
+}>()
+
+const model = defineModel<Exclude<TextareaProps['modelValue'], null>>({ required: true })
+</script>
+
+<template>
+  <UFormField
+    :name
+    :help
+    class="grow flex-1"
+  >
+    <template #default="{ error }">
+      <ConnectTextarea
+        :id="inputId"
+        v-model="model"
+        :data-testid="inputId"
+        :required
+        :label
+        :autofocus
+        :disabled
+      />
+      <div
+        v-if="!help && !error"
+        class="h-4 mt-1"
+      />
+    </template>
+  </UFormField>
+</template>

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

@@ -0,0 +1,21 @@
+<template>
+  <ConnectLayout>
+    <template #header>
+      <!-- Exposes the header slot of the base layout -->
+      <slot name="header">
+        <ConnectHeader />
+      </slot>
+    </template>
+    <template #body>
+      <!-- Exposes the body slot of the base layout -->
+      <slot name="body">
+        <div class="grow max-w-full overflow-hidden">
+          <slot />
+        </div>
+      </slot>
+    </template>
+    <template #topFooters>
+      <ConnectButtonControlWrapper />
+    </template>
+  </ConnectLayout>
+</template>

package/app/components/HelloWorld/Forms.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-red-100 p-5">
+    Forms - should have bg-red-100
+    <HelloWorld />
+    <h3 class="text-green-900">
+      Forms - should be green-900
+    </h3>
+    <p class="text-neutral-highlighted">
+      Forms - should be neutral-highlighted
+    </p>
+  </div>
+</template>