@sbc-connect/nuxt-forms 0.1.8 → 0.1.10

package/.env.example

@@ -1 +1,11 @@
+# Web Urls
 NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+
+# API Urls
+# Status API
+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=""

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @sbc-connect/nuxt-forms
 
+## 0.1.10
+
+### Patch Changes
+
+- [#43](https://github.com/bcgov/connect-nuxt/pull/43) [`3b521b7`](https://github.com/bcgov/connect-nuxt/commit/3b521b70bf1a0cc5a0feea63a825ef5544347aa8) Thanks [@deetz99](https://github.com/deetz99)! - Form components and new lint rules
+
+  - Forms layer address components
+  - Lint rules and fixes to prevent rule collision and promote best practices
+
+  issue: bcgov/entity#29338
+
+- Updated dependencies [[`3b521b7`](https://github.com/bcgov/connect-nuxt/commit/3b521b70bf1a0cc5a0feea63a825ef5544347aa8)]:
+  - @sbc-connect/nuxt-base@0.1.9
+
+## 0.1.9
+
+### Patch Changes
+
+- [#37](https://github.com/bcgov/connect-nuxt/pull/37) [`216dff5`](https://github.com/bcgov/connect-nuxt/commit/216dff5eea1cf8459fc516dc8a1985f922e84533) Thanks [@kialj876](https://github.com/kialj876)! - Button Control Component and Form Layout bcgov/entity/29338
+
 ## 0.1.8
 
 ### Patch Changes

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,59 @@
+<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

@@ -0,0 +1,10 @@
+<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/components/Connect/Fieldset.vue

@@ -0,0 +1,41 @@
+<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>
+  <fieldset
+    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>
+
+    <div class="flex-1">
+      <slot />
+    </div>
+  </fieldset>
+</template>

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

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

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { iscCountriesListSortedByName as countries } from '#forms/app/utils/isoCountriesList'
+
+const props = defineProps<{
+  id: string
+  schemaPrefix: string
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  change: []
+}>()
+
+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
+    return found ?? ''
+  }
+  return ''
+})
+
+const options = [
+  countries.find(c => c.alpha_2 === 'CA')!,
+  countries.find(c => c.alpha_2 === 'US')!,
+  ...countries
+]
+</script>
+
+<template>
+  <UFormField
+    :name="schemaPrefix + '.country'"
+    class="grow"
+  >
+    <template #default="{ error }">
+      <USelect
+        :id="inputId"
+        v-model="model"
+        :data-testid="inputId"
+        :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'
+            : '',
+          item: 'nth-2:border-b nth-2:border-gray-200',
+          itemTrailingIcon: 'hidden',
+        }"
+        @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'
+                  : '',
+                '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"
+      />
+    </template>
+  </UFormField>
+</template>

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

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

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: string
+  schemaPrefix: string
+  disabled?: boolean
+  country?: string
+}>()
+
+const model = defineModel({
+  set(value) {
+    return value.toUpperCase()
+  },
+  type: String,
+  default: ''
+})
+
+const inputId = props.id + '-postalCode'
+</script>
+
+<template>
+  <ConnectFormInput
+    v-model="model"
+    :name="schemaPrefix + '.postalCode'"
+    :input-id="inputId"
+    :disabled
+    required
+    :label="country === 'US'
+      ? $t('connect.label.zipCode')
+      : $t('connect.label.postalCode')
+    "
+    :mask="country === 'CA'
+      ? 'V#@ #@#'
+      : country === 'US'
+        ? '#####-####'
+        : undefined"
+  />
+</template>

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+const {
+  maxlength = '1000',
+  country,
+  id
+} = defineProps<{
+  id: string
+  country?: string
+  schemaPrefix: string
+  disabled?: boolean
+  maxlength?: string
+  help?: string
+}>()
+
+const model = defineModel<string>({ default: '' })
+
+const regions = computed(() => {
+  switch (country) {
+    case 'US':
+      return countrySubdivisions.us
+    case 'CA':
+      return countrySubdivisions.ca
+    default:
+      return []
+  }
+})
+
+const displayedRegionName = computed(() => {
+  if (model.value) {
+    const found = regions.value.find(r => r.code === model.value)?.name
+    return found ?? ''
+  }
+  return ''
+})
+
+const inputId = id + '-region'
+</script>
+
+<template>
+  <UFormField
+    :name="schemaPrefix + '.region'"
+    class="grow flex-1"
+  >
+    <template #default="{ error }">
+      <USelect
+        v-if="country === 'US' || country === 'CA'"
+        :id="inputId"
+        v-model="model"
+        :data-testid="inputId"
+        :items="regions"
+        :aria-label="country === 'CA' ? $t('connect.label.province') : $t('connect.label.state')"
+        value-key="code"
+        label-key="name"
+        :aria-required="true"
+        :disabled
+        class="w-full grow ring-0"
+        :ui="{
+          base: error
+            ? 'shadow-input-error focus:shadow-input-error data-[state=open]:shadow-input-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'
+                  : '',
+                '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') }}
+            </span>
+            <div class="h-6">
+              <span
+                v-if="modelValue"
+                class="line-clamp-1 text-left"
+              >
+                {{ displayedRegionName }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </USelect>
+      <ConnectInput
+        v-else
+        :id="inputId"
+        v-model="model"
+        :invalid="!!error"
+        :disabled
+        :label="$t('connect.label.regionOpt')"
+        :maxlength
+      />
+      <div
+        v-if="!help && !error"
+        class="h-4 mt-1"
+      />
+    </template>
+  </UFormField>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const {
+  id,
+  schemaPrefix,
+  helpText = 'none'
+} = defineProps<{
+  id: string
+  // country?: string
+  schemaPrefix: string
+  // 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 { address: canadaPostAddress, enableAddressComplete } = useCanadaPost()
+
+// const addressComplete = (id: string) => {
+//   if (props.country && props.country.trim() !== '') {
+//     enableAddressComplete(id, props.country, props.disableAddressComplete)
+//   }
+// }
+
+// watch(canadaPostAddress, (newAddress) => {
+//   emit('addressComplete', newAddress)
+// })
+</script>
+
+<template>
+  <ConnectFormInput
+    v-model="model"
+    :input-id="inputId"
+    :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(inputId)"
+    @click="addressComplete(inputId)" -->
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  id: 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"
+    :label="$t('connect.label.streetAdditional')"
+  />
+</template>

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

@@ -0,0 +1,112 @@
+<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'
+}>()
+
+const emit = defineEmits<{
+  shouldValidate: [keys: Array<keyof ConnectAddress>]
+}>()
+
+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 valid keys to be validated by parent UForm
+  emit('shouldValidate', validKeys.map(k => schemaPrefix + k) as Array<keyof ConnectAddress>)
+}
+</script>
+
+<template>
+  <div class="space-y-2" :data-testid="id">
+    <ConnectFormAddressCountry
+      v-if="!excludedFields.includes('country')"
+      :id
+      v-model="state.country"
+      :schema-prefix="schemaPrefix"
+      :disabled="disabledFields?.includes('country')"
+      @change="state.region = ''"
+    />
+
+    <ConnectFormAddressStreet
+      v-if="!excludedFields.includes('street')"
+      :id
+      v-model="state.street"
+      :schema-prefix="schemaPrefix"
+      :country="state.country"
+      :disable-address-complete="disableAddressComplete"
+      :disabled="disabledFields?.includes('street')"
+      :help-text="streetHelpText"
+      @address-complete="populateAddressComplete"
+    />
+
+    <ConnectFormAddressStreetAdditional
+      v-if="!excludedFields.includes('streetAdditional')"
+      :id
+      v-model="state.streetAdditional"
+      :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')"
+        :id
+        v-model="state.city"
+        :schema-prefix="schemaPrefix"
+        :disabled="disabledFields?.includes('city')"
+      />
+
+      <ConnectFormAddressRegion
+        v-if="!excludedFields.includes('region')"
+        :id
+        v-model="state.region"
+        :schema-prefix="schemaPrefix"
+        :country="state.country"
+        :disabled="disabledFields?.includes('region')"
+      />
+
+      <ConnectFormAddressPostalCode
+        v-if="!excludedFields.includes('postalCode')"
+        :id
+        v-model="state.postalCode"
+        :schema-prefix="schemaPrefix"
+        :country="state.country"
+        :disabled="disabledFields?.includes('postalCode')"
+      />
+    </div>
+
+    <ConnectFormAddressDeliveryInstructions
+      v-if="!excludedFields.includes('locationDescription')"
+      :id
+      v-model="state.locationDescription"
+      :schema-prefix="schemaPrefix"
+      :disabled="disabledFields?.includes('locationDescription')"
+    />
+  </div>
+</template>

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

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