AddressCommunity Asset

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)

const inlineForm = ref(false)

// Form logic:
const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationchema = useAddressValidation()
const formSchema = z.object({
  address: addressValidationchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    street_address: '',
    street_address_2: '',
    street_address_3: '',
    zip_code: '',
    city: '',
    state: '',
    country: activeDepartmentCountry.value || '',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - Standard example</h2>
      <div slot="header-end">
        <nord-toggle label="Inline forms" @change="inlineForm = !inlineForm">
        </nord-toggle>
      </div>

      <FormAddressField
        hide-label
        label="Address"
        name="address"
        :inline-edit="inlineForm"
      />

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)

const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationSchema = useAddressValidation()
const formSchema = z.object({
  address: addressValidationSchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    street_address: '',
    street_address_2: '',
    street_address_3: '',
    zip_code: '',
    city: '',
    state: '',
    country: activeDepartmentCountry.value || '',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - Custom Labels Example</h2>

      <FormAddressField
        label="Address"
        name="address"
        :field-labels="{
          streetAddress: 'Location address',
          streetAddress2: 'Location address 2',
          streetAddress3: 'Location address 3',
          zipCode: 'Postal code',
          state: 'Region',
        }"
      />

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)

const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationSchema = useAddressValidation()
const formSchema = z.object({
  address: addressValidationSchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    street_address: '',
    street_address_2: '',
    street_address_3: '',
    zip_code: '',
    city: '',
    state: '',
    country: activeDepartmentCountry.value || '',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - Disabled Example</h2>

      <FormAddressField label="Address" name="address" disabled />

      <nord-button class="n-margin-bs-l" variant="primary" disabled>
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)

const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationSchema = useAddressValidation()
const formSchema = z.object({
  address: addressValidationSchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    street_address: '',
    street_address_2: '',
    street_address_3: '',
    zip_code: '',
    city: '',
    state: '',
    country: activeDepartmentCountry.value || '',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - Hidden Fields Example</h2>

      <FormAddressField
        label="Address"
        name="address"
        hide-country
        hide-state
      />

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
const { regionName } = useDisplayNames()

const addresses: AddressData[] = [
  {
    country: 'FI',
    streetAddress: 'Kluuvikatu 4',
    city: 'Helsinki',
    zipCode: '00100',
  },
  {
    country: 'NO',
    streetAddress: 'Fridtjof Nansens vei 6',
    city: 'Oslo',
    zipCode: '0369',
  },
  {
    country: 'SE',
    streetAddress: 'Kapellgränd 10',
    city: 'Stockholm',
    zipCode: '116 25',
  },
  {
    country: 'DK',
    streetAddress: 'Dyrlægevej 48',
    city: 'Frederiksberg',
    zipCode: '1870',
  },
  {
    country: 'US',
    streetAddress: '3601 Lyon St',
    city: 'San Francisco',
    state: 'CA',
    zipCode: '94123',
  },
  {
    country: 'GB',
    city: 'London',
    zipCode: 'SW1A 0AA',
  },
  {
    country: 'IT',
    streetAddress: 'Piazza di San Lorenzo, 9',
    city: 'Firenze',
    state: 'FI',
    zipCode: '50123',
  },
  {
    country: 'ES',
    streetAddress: 'Ctra. de Vallvidrera al Tibidabo, 111',
    streetAddress2: 'Sarrià-Sant Gervasi',
    city: 'Barcelona',
    zipCode: '08035',
  },
  {
    country: 'DE',
    streetAddress: 'Pariser Platz 104',
    city: 'Berlin',
    zipCode: '10117',
  },
  {
    country: 'EE',
    streetAddress: 'Raekoja plats 1',
    city: 'Tallinn',
    zipCode: '10146',
  },
  {
    country: 'NL',
    streetAddress: 'Museumplein 6',
    city: 'Amsterdam',
    zipCode: '1071 DJ',
  },
  {
    country: 'PT',
    streetAddress: 'Esplanada Dom Carlos I 23',
    city: 'Lisbon',
    zipCode: '1990-005',
  },
]
</script>

<template>
  <CardInnerSection>
    <ReadOnlyField
      v-for="address in addresses"
      :key="address.country"
      :label="address.country ? regionName(address.country) : ''"
    >
      <FormattedAddress v-bind="address" />
    </ReadOnlyField>
  </CardInnerSection>
</template>

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)
const isUSDepartment = computed(() => activeDepartmentCountry.value === 'US')

const inlineForm = ref(false)

const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationchema = useAddressValidation({
  fieldNames: {
    streetAddress: 'home_address',
    streetAddress2: 'home_address_2',
    streetAddress3: 'home_address_3',
    state: activeDepartmentCountry.value === 'US' ? 'state' : 'country_region',
  },
})
const formSchema = z.object({
  address: addressValidationchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    // Custom key names:
    // - naming `home_address` instead of `street address`.
    // - naming `state` for US and `country_region` for other countries.
    home_address: '',
    home_address_2: '',
    home_address_3: '',
    zip_code: '',
    city: '',
    [activeDepartmentCountry.value === 'US' ? 'state' : 'country_region']: '',
    country: activeDepartmentCountry.value || '',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - Custom keys example</h2>
      <div slot="header-end">
        <nord-toggle label="Inline forms" @change="inlineForm = !inlineForm">
        </nord-toggle>
      </div>

      <FormAddressField
        hide-label
        label="Address"
        name="address"
        :field-names="{
          streetAddress: 'home_address',
          streetAddress2: 'home_address_2',
          streetAddress3: 'home_address_3',
          state: isUSDepartment ? 'state' : 'country_region',
        }"
        :inline-edit="inlineForm"
      />

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const { activeDepartment } = useAuth()
const activeDepartmentCountry = computed(
  () => activeDepartment.value.attributes?.country,
)

const inlineForm = ref(false)

// Form logic:
const formElement = useTemplateRef('formRef')
const { handleErrors: handleErrors } = useFormValidation(formElement)
const formSchema = z.object({
  multiple_addresses: useAddressValidation().array(),
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  multiple_addresses: [
    {
      street_address: '',
      street_address_2: '',
      street_address_3: '',
      zip_code: '',
      city: '',
      state: '',
      country: activeDepartmentCountry.value || '',
    },
  ],
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)

const { remove, push, fields } = useFieldArray('multiple_addresses')
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address - Multiple addresses example</h2>

      <DividedStack>
        <div v-for="(field, idx) in fields" :key="field.key">
          <FormAddressField
            hide-label
            label="Multiple Addresses"
            :name="`multiple_addresses[${idx}]`"
            :inline-edit="inlineForm"
          />
          <nord-button
            class="n-margin-bs-m"
            square
            type="button"
            aria-label="Delete"
            @click="remove(idx)"
          >
            <nord-icon size="s" name="interface-delete"></nord-icon>
          </nord-button>
        </div>

        <nord-button
          class="n-margin-bs-m"
          type="button"
          @click="push(initialValues.multiple_addresses[0])"
        >
          Add new address
        </nord-button>
      </DividedStack>

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod'

const formElement = useTemplateRef('formRef')
const { handleErrors } = useFormValidation(formElement)
const addressValidationSchema = useAddressValidation()
const formSchema = z.object({
  address: addressValidationSchema,
})
const validationSchema = toTypedSchema(formSchema)
const initialValues = {
  address: {
    street_address: 'Drottninggatan 50',
    street_address_2: '',
    street_address_3: '',
    zip_code: '11121',
    city: 'Stockholm',
    state: 'SE-AB',
    country: 'SE',
  },
}
const { handleSubmit } = useForm({
  validationSchema,
  initialValues,
})
const onSubmit = handleSubmit(
  (data) => {
    console.log(data)
  },
  () => handleErrors(),
)
</script>

<template>
  <form
    ref="formRef"
    v-data-pc="'demo-form'"
    class="form-main"
    @submit="onSubmit"
  >
    <nord-card padding="l">
      <h2 slot="header">Address Form - With Initial State Example</h2>

      <FormAddressField label="Address" name="address" />

      <nord-button class="n-margin-bs-l" variant="primary">
        Submit
      </nord-button>
    </nord-card>
  </form>
</template>