sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseAddressForm.vue

@@ -1,353 +1,353 @@
-<template>
-  <BaseField
-    :label="t('sui.address')"
-    :name="`${namePrefix}address_1`"
-    class="mb-2"
-    required
-  >
-    <BaseInput
-      ref="address1Ref"
-      :model-value="normalizedModelValue.address_1 ?? ''"
-      :placeholder="t('sui.address_1_placeholder')"
-      class="w-full"
-      prevent-submit
-      name="address_search_field"
-      :autocomplete="false"
-      :required="false"
-      @update:model-value="update('address_1', $event)"
-    />
-  </BaseField>
-
-  <BaseField :name="`${namePrefix}address_2`" class="mb-4">
-    <BaseInput
-      :model-value="normalizedModelValue.address_2 ?? ''"
-      :placeholder="t('sui.address_2_description')"
-      class="w-full"
-      @update:model-value="update('address_2', $event)"
-    />
-  </BaseField>
-
-  <div class="sm:flex sm:space-x-3">
-    <BaseField
-      :label="t('sui.city')"
-      required
-      :name="`${namePrefix}city`"
-      class="mb-4 flex-1"
-    >
-      <BaseInput
-        :model-value="normalizedModelValue.city ?? ''"
-        class="w-full"
-        @update:model-value="update('city', $event)"
-      />
-    </BaseField>
-    <BaseField
-      :label="t('sui.postal_code_zip_code')"
-      required
-      :name="`${namePrefix}postal_code`"
-      class="mb-4 flex-1"
-    >
-      <BaseInput
-        :model-value="normalizedModelValue.postal_code ?? ''"
-        class="w-full"
-        @update:model-value="update('postal_code', $event)"
-      />
-    </BaseField>
-  </div>
-  <div class="sm:flex sm:space-x-3">
-    <BaseField
-      v-if="!props.hideCountry"
-      :label="t('sui.country')"
-      :name="`${namePrefix}country`"
-      required
-      class="mb-4 flex-1"
-    >
-      <BaseSelect
-        :model-value="normalizedModelValue.country ?? ''"
-        class="w-full"
-        :options="countries"
-        label-key="name"
-        :disabled="props.restrictCountry"
-        value-key="id"
-        @update:model-value="update('country', $event)"
-      >
-      </BaseSelect>
-    </BaseField>
-    <BaseField
-      v-if="!props.hideRegion"
-      :label="t('sui.region')"
-      :name="`${namePrefix}region`"
-      required
-      class="mb-4 flex-1"
-    >
-      <BaseSelect
-        :model-value="normalizedModelValue.region ?? ''"
-        class="w-full"
-        required
-        :options="regions"
-        label-key="name"
-        value-key="id"
-        @update:model-value="update('region', $event)"
-      >
-      </BaseSelect>
-    </BaseField>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef } from 'vue';
-import { cloneDeep, isArray } from 'lodash';
-import { Country } from '@/types/Country';
-import { Region } from '@/types/Region';
-import BaseField from './BaseField.vue';
-import BaseInput from './BaseInput.vue';
-import BaseSelect from './BaseSelect.vue';
-import { t } from '@/i18n';
-import { config } from '..';
-
-const DEFAULT_COUNTRY = 'ca';
-
-type Address = {
-  address_1?: string | null;
-  address_2?: string | null;
-  postal_code?: string | null;
-  city?: string | null;
-  region?: string | null;
-  country?: string | null;
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: undefined | null | Address;
-    prefix: string | null;
-    countries?: Country[];
-    regions?: Region[];
-    restrictCountry?: boolean;
-    hideRegion?: boolean;
-    hideCountry?: boolean;
-  }>(),
-  {
-    modelValue() {
-      return {};
-    },
-    prefix: null,
-    countries() {
-      return [];
-    },
-    regions() {
-      return [];
-    },
-    restrictCountry: false,
-    hideRegion: false,
-    hideCountry: false,
-  }
-);
-
-const emit = defineEmits(['update:model-value']);
-
-const normalizedModelValue = computed((): Address => {
-  const form = cloneDeep(props.modelValue ?? {}) as Address;
-  form.address_1 = form.address_1 ?? '';
-  form.address_2 = form.address_2 ?? '';
-  form.city = form.city ?? '';
-  form.postal_code = form.postal_code ?? '';
-  form.country = form.country ?? '';
-  form.region = form.region ?? '';
-  return form;
-});
-
-const normalizedCountry = computed((): string | null => {
-  if (props.restrictCountry) {
-    if (normalizedModelValue.value.country) {
-      return normalizedModelValue.value.country;
-    }
-    return DEFAULT_COUNTRY;
-  }
-  return normalizedModelValue.value.country ?? null;
-});
-
-const countries = computed((): Country[] => {
-  if (props.countries && isArray(props.countries) && props.countries.length) {
-    return props.countries;
-  }
-  return config.countries;
-});
-
-const allRegions = computed((): Region[] => {
-  if (props.regions && isArray(props.regions) && props.regions.length) {
-    return props.regions;
-  }
-  return config.regions;
-});
-
-const regions = computed((): Country[] => {
-  return allRegions.value.filter(
-    (r) => r.country_id == normalizedModelValue.value.country
-  );
-});
-
-const namePrefix = computed((): string => {
-  if (props.prefix) {
-    return props.prefix + '.';
-  }
-  return '';
-});
-
-function update(field: keyof Address, value: string) {
-  const newForm = cloneDeep(normalizedModelValue.value);
-  newForm[field] = value;
-  emit('update:model-value', newForm);
-}
-
-// Autocomplete
-
-const address1Ref = ref<InstanceType<typeof BaseInput> | null>(null);
-const address1Input = computed(
-  () => address1Ref.value?.$refs.input ?? null
-) as ComputedRef<HTMLInputElement | null>;
-
-// eslint-disable-next-line no-undef
-let autocomplete = null as google.maps.places.Autocomplete | null;
-
-onMounted(() => {
-  if (!window.google) {
-    return;
-  }
-
-  if (!address1Input.value) {
-    return;
-  }
-
-  autocomplete = new window.google.maps.places.Autocomplete(
-    address1Input.value
-  );
-
-  setAutocompleteOptions();
-
-  autocomplete.addListener('place_changed', fillAddress);
-});
-
-watch(
-  () => props.modelValue?.country + ' ' + props.restrictCountry,
-  () => {
-    setAutocompleteOptions();
-  }
-);
-
-function setAutocompleteOptions() {
-  if (!autocomplete) {
-    return;
-  }
-
-  const options = {
-    fields: ['address_components'],
-    types: ['address'],
-  } as any;
-
-  if (props.restrictCountry) {
-    if (normalizedCountry.value) {
-      options.componentRestrictions = {
-        country: normalizedCountry.value,
-      };
-    }
-  }
-
-  autocomplete.setOptions(options);
-}
-
-function fillAddress() {
-  if (!autocomplete) {
-    return;
-  }
-
-  // Get the place details from the autocomplete object.
-  const place = autocomplete.getPlace();
-  let address1 = '';
-  let postcode = '';
-  let region = '';
-
-  const newForm = cloneDeep(props.modelValue ?? {});
-
-  if (!place.address_components) {
-    return;
-  }
-
-  // Get each component of the address from the place details,
-  // and then fill-in the corresponding field on the form.
-  // place.address_components are google.maps.GeocoderAddressComponent objects
-  // which are documented at http://goo.gle/3l5i5Mr
-  // eslint-disable-next-line no-undef
-  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
-    const componentType = component.types[0];
-    switch (componentType) {
-      case 'street_number': {
-        address1 = `${component.long_name} ${address1}`;
-        break;
-      }
-      case 'route': {
-        address1 += component.long_name;
-        break;
-      }
-      case 'postal_code': {
-        postcode = `${component.long_name}${postcode}`;
-        break;
-      }
-      case 'postal_code_suffix': {
-        postcode = `${postcode}-${component.long_name}`;
-        break;
-      }
-      case 'locality':
-        newForm.city = component.long_name;
-        break;
-      case 'administrative_area_level_1': {
-        region = component.short_name.toLowerCase();
-        break;
-      }
-      case 'country':
-        newForm.country = component.short_name.toLowerCase();
-        break;
-    }
-  }
-
-  newForm.region = newForm.country + '-' + region;
-  newForm.address_1 = address1;
-  newForm.postal_code = postcode;
-
-  nextTick(() => {
-    // Force value change
-    /* if (address1Input.value) {
-      address1Input.value.value = address1;
-    } */
-
-    emit('update:model-value', newForm);
-  });
-}
-</script>
-
-<style lang="postcss">
-.pac-container {
-  @apply rounded-lg border border-gray-200 font-sans shadow-md;
-
-  & .pac-item {
-    @apply flex cursor-pointer items-center py-2 pl-2;
-  }
-
-  & .pac-icon {
-    @apply m-0 mr-2;
-  }
-
-  & .pac-item,
-  & .pac-item-query,
-  & .pac-matched {
-    @apply text-base;
-  }
-
-  & .pac-matched {
-    @apply font-semibold;
-  }
-
-  &:after {
-    background-image: none !important;
-    @apply h-0 p-0;
-  }
-}
-</style>
+<template>
+  <BaseField
+    :label="t('sui.address')"
+    :name="`${namePrefix}address_1`"
+    class="mb-2"
+    required
+  >
+    <BaseInput
+      ref="address1Ref"
+      :model-value="normalizedModelValue.address_1 ?? ''"
+      :placeholder="t('sui.address_1_placeholder')"
+      class="w-full"
+      prevent-submit
+      name="address_search_field"
+      :autocomplete="false"
+      :required="false"
+      @update:model-value="update('address_1', $event)"
+    />
+  </BaseField>
+
+  <BaseField :name="`${namePrefix}address_2`" class="mb-4">
+    <BaseInput
+      :model-value="normalizedModelValue.address_2 ?? ''"
+      :placeholder="t('sui.address_2_description')"
+      class="w-full"
+      @update:model-value="update('address_2', $event)"
+    />
+  </BaseField>
+
+  <div class="sm:flex sm:space-x-3">
+    <BaseField
+      :label="t('sui.city')"
+      required
+      :name="`${namePrefix}city`"
+      class="mb-4 flex-1"
+    >
+      <BaseInput
+        :model-value="normalizedModelValue.city ?? ''"
+        class="w-full"
+        @update:model-value="update('city', $event)"
+      />
+    </BaseField>
+    <BaseField
+      :label="t('sui.postal_code_zip_code')"
+      required
+      :name="`${namePrefix}postal_code`"
+      class="mb-4 flex-1"
+    >
+      <BaseInput
+        :model-value="normalizedModelValue.postal_code ?? ''"
+        class="w-full"
+        @update:model-value="update('postal_code', $event)"
+      />
+    </BaseField>
+  </div>
+  <div class="sm:flex sm:space-x-3">
+    <BaseField
+      v-if="!props.hideCountry"
+      :label="t('sui.country')"
+      :name="`${namePrefix}country`"
+      required
+      class="mb-4 flex-1"
+    >
+      <BaseSelect
+        :model-value="normalizedModelValue.country ?? ''"
+        class="w-full"
+        :options="countries"
+        label-key="name"
+        :disabled="props.restrictCountry"
+        value-key="id"
+        @update:model-value="update('country', $event)"
+      >
+      </BaseSelect>
+    </BaseField>
+    <BaseField
+      v-if="!props.hideRegion"
+      :label="t('sui.region')"
+      :name="`${namePrefix}region`"
+      required
+      class="mb-4 flex-1"
+    >
+      <BaseSelect
+        :model-value="normalizedModelValue.region ?? ''"
+        class="w-full"
+        required
+        :options="regions"
+        label-key="name"
+        value-key="id"
+        @update:model-value="update('region', $event)"
+      >
+      </BaseSelect>
+    </BaseField>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ComputedRef } from 'vue';
+import { cloneDeep, isArray } from 'lodash';
+import { Country } from '@/types/Country';
+import { Region } from '@/types/Region';
+import BaseField from './BaseField.vue';
+import BaseInput from './BaseInput.vue';
+import BaseSelect from './BaseSelect.vue';
+import { t } from '@/i18n';
+import { config } from '..';
+
+const DEFAULT_COUNTRY = 'ca';
+
+type Address = {
+  address_1?: string | null;
+  address_2?: string | null;
+  postal_code?: string | null;
+  city?: string | null;
+  region?: string | null;
+  country?: string | null;
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: undefined | null | Address;
+    prefix: string | null;
+    countries?: Country[];
+    regions?: Region[];
+    restrictCountry?: boolean;
+    hideRegion?: boolean;
+    hideCountry?: boolean;
+  }>(),
+  {
+    modelValue() {
+      return {};
+    },
+    prefix: null,
+    countries() {
+      return [];
+    },
+    regions() {
+      return [];
+    },
+    restrictCountry: false,
+    hideRegion: false,
+    hideCountry: false,
+  }
+);
+
+const emit = defineEmits(['update:model-value']);
+
+const normalizedModelValue = computed((): Address => {
+  const form = cloneDeep(props.modelValue ?? {}) as Address;
+  form.address_1 = form.address_1 ?? '';
+  form.address_2 = form.address_2 ?? '';
+  form.city = form.city ?? '';
+  form.postal_code = form.postal_code ?? '';
+  form.country = form.country ?? '';
+  form.region = form.region ?? '';
+  return form;
+});
+
+const normalizedCountry = computed((): string | null => {
+  if (props.restrictCountry) {
+    if (normalizedModelValue.value.country) {
+      return normalizedModelValue.value.country;
+    }
+    return DEFAULT_COUNTRY;
+  }
+  return normalizedModelValue.value.country ?? null;
+});
+
+const countries = computed((): Country[] => {
+  if (props.countries && isArray(props.countries) && props.countries.length) {
+    return props.countries;
+  }
+  return config.countries;
+});
+
+const allRegions = computed((): Region[] => {
+  if (props.regions && isArray(props.regions) && props.regions.length) {
+    return props.regions;
+  }
+  return config.regions;
+});
+
+const regions = computed((): Country[] => {
+  return allRegions.value.filter(
+    (r) => r.country_id == normalizedModelValue.value.country
+  );
+});
+
+const namePrefix = computed((): string => {
+  if (props.prefix) {
+    return props.prefix + '.';
+  }
+  return '';
+});
+
+function update(field: keyof Address, value: string) {
+  const newForm = cloneDeep(normalizedModelValue.value);
+  newForm[field] = value;
+  emit('update:model-value', newForm);
+}
+
+// Autocomplete
+
+const address1Ref = ref<InstanceType<typeof BaseInput> | null>(null);
+const address1Input = computed(
+  () => address1Ref.value?.$refs.input ?? null
+) as ComputedRef<HTMLInputElement | null>;
+
+// eslint-disable-next-line no-undef
+let autocomplete = null as google.maps.places.Autocomplete | null;
+
+onMounted(() => {
+  if (!window.google) {
+    return;
+  }
+
+  if (!address1Input.value) {
+    return;
+  }
+
+  autocomplete = new window.google.maps.places.Autocomplete(
+    address1Input.value
+  );
+
+  setAutocompleteOptions();
+
+  autocomplete.addListener('place_changed', fillAddress);
+});
+
+watch(
+  () => props.modelValue?.country + ' ' + props.restrictCountry,
+  () => {
+    setAutocompleteOptions();
+  }
+);
+
+function setAutocompleteOptions() {
+  if (!autocomplete) {
+    return;
+  }
+
+  const options = {
+    fields: ['address_components'],
+    types: ['address'],
+  } as any;
+
+  if (props.restrictCountry) {
+    if (normalizedCountry.value) {
+      options.componentRestrictions = {
+        country: normalizedCountry.value,
+      };
+    }
+  }
+
+  autocomplete.setOptions(options);
+}
+
+function fillAddress() {
+  if (!autocomplete) {
+    return;
+  }
+
+  // Get the place details from the autocomplete object.
+  const place = autocomplete.getPlace();
+  let address1 = '';
+  let postcode = '';
+  let region = '';
+
+  const newForm = cloneDeep(props.modelValue ?? {});
+
+  if (!place.address_components) {
+    return;
+  }
+
+  // Get each component of the address from the place details,
+  // and then fill-in the corresponding field on the form.
+  // place.address_components are google.maps.GeocoderAddressComponent objects
+  // which are documented at http://goo.gle/3l5i5Mr
+  // eslint-disable-next-line no-undef
+  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
+    const componentType = component.types[0];
+    switch (componentType) {
+      case 'street_number': {
+        address1 = `${component.long_name} ${address1}`;
+        break;
+      }
+      case 'route': {
+        address1 += component.long_name;
+        break;
+      }
+      case 'postal_code': {
+        postcode = `${component.long_name}${postcode}`;
+        break;
+      }
+      case 'postal_code_suffix': {
+        postcode = `${postcode}-${component.long_name}`;
+        break;
+      }
+      case 'locality':
+        newForm.city = component.long_name;
+        break;
+      case 'administrative_area_level_1': {
+        region = component.short_name.toLowerCase();
+        break;
+      }
+      case 'country':
+        newForm.country = component.short_name.toLowerCase();
+        break;
+    }
+  }
+
+  newForm.region = newForm.country + '-' + region;
+  newForm.address_1 = address1;
+  newForm.postal_code = postcode;
+
+  nextTick(() => {
+    // Force value change
+    /* if (address1Input.value) {
+      address1Input.value.value = address1;
+    } */
+
+    emit('update:model-value', newForm);
+  });
+}
+</script>
+
+<style lang="postcss">
+.pac-container {
+  @apply rounded-lg border border-gray-200 font-sans shadow-md;
+
+  & .pac-item {
+    @apply flex cursor-pointer items-center py-2 pl-2;
+  }
+
+  & .pac-icon {
+    @apply m-0 mr-2;
+  }
+
+  & .pac-item,
+  & .pac-item-query,
+  & .pac-matched {
+    @apply text-base;
+  }
+
+  & .pac-matched {
+    @apply font-semibold;
+  }
+
+  &:after {
+    background-image: none !important;
+    @apply h-0 p-0;
+  }
+}
+</style>