sprintify-ui 0.10.64 → 0.10.65

package/src/components/BaseAddressForm.vue

@@ -1,382 +1,382 @@
-<template>
-  <div
-    class="grid grid-cols-2"
-    :class="baseClasses"
-  >
-    <div class="flex flex-col gap-1 col-span-2">
-      <BaseField
-        :label="t('sui.address')"
-        :name="`${namePrefix}address_1`"
-        class="col-span-2"
-        :required="isRequired('address_1')"
-        :size="size"
-      >
-        <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"
-          @update:model-value="update('address_1', $event)"
-        />
-      </BaseField>
-
-      <BaseField
-        :name="`${namePrefix}address_2`"
-        class="col-span-2"
-        :required="isRequired('address_2')"
-        :size="size"
-      >
-        <BaseInput
-          :model-value="normalizedModelValue.address_2 ?? ''"
-          :placeholder="t('sui.address_2_description')"
-          class="w-full"
-          @update:model-value="update('address_2', $event)"
-        />
-      </BaseField>
-    </div>
-
-    <BaseField
-      :label="t('sui.city')"
-      :required="isRequired('city')"
-      :name="`${namePrefix}city`"
-      class="col-span-2 || sm:col-span-1"
-      :size="size"
-    >
-      <BaseInput
-        :model-value="normalizedModelValue.city ?? ''"
-        class="w-full"
-        @update:model-value="update('city', $event)"
-      />
-    </BaseField>
-
-    <BaseField
-      :label="t('sui.postal_code_zip_code')"
-      :required="isRequired('postal_code')"
-      :name="`${namePrefix}postal_code`"
-      class="col-span-2 || sm:col-span-1"
-      :size="size"
-    >
-      <BaseInput
-        :model-value="normalizedModelValue.postal_code ?? ''"
-        class="w-full"
-        @update:model-value="update('postal_code', $event)"
-      />
-    </BaseField>
-
-    <BaseField
-      v-if="!props.hideCountry"
-      :label="t('sui.country')"
-      :name="`${namePrefix}country`"
-      :required="isRequired('country') && !props.restrictCountry"
-      class="col-span-2 || sm:col-span-1"
-      :size="size"
-    >
-      <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)"
-      />
-    </BaseField>
-
-    <BaseField
-      v-if="!props.hideRegion"
-      :label="t('sui.region')"
-      :name="`${namePrefix}region`"
-      :required="isRequired('region')"
-      class="col-span-2 || sm:col-span-1"
-      :size="size"
-    >
-      <BaseSelect
-        :model-value="normalizedModelValue.region ?? ''"
-        class="w-full"
-        :options="regions"
-        :placeholder="t('sui.region')"
-        label-key="name"
-        value-key="id"
-        @update:model-value="update('region', $event)"
-      />
-    </BaseField>
-
-    <BaseField
-      v-if="props.showNotes"
-      :label="t('sui.notes')"
-      :name="`${namePrefix}notes`"
-      :required="isRequired('notes')"
-      class="col-span-2"
-      :size="size"
-    >
-      <BaseTextarea
-        :model-value="normalizedModelValue.notes ?? ''"
-        class="w-full"
-        @update:model-value="update('notes', $event)"
-      />
-    </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 BaseTextarea from './BaseTextarea.vue';
-import { t } from '@/i18n';
-import { config } from '..';
-import { Size } from '@/utils/sizes';
-import { useInputSize } from '@/composables/inputSize';
-
-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;
-  notes?: string | null;
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: undefined | null | Address;
-    prefix: string | null;
-    required?: boolean;
-    countries?: Country[];
-    regions?: Region[];
-    restrictCountry?: boolean;
-    size?: Size;
-    hideRegion?: boolean;
-    hideCountry?: boolean;
-    showNotes?: boolean;
-    requiredFields?: (keyof Address)[];
-  }>(),
-  {
-    modelValue() {
-      return {};
-    },
-    prefix: null,
-    countries() {
-      return [];
-    },
-    regions() {
-      return [];
-    },
-    restrictCountry: false,
-    size: undefined,
-    hideRegion: false,
-    hideCountry: false,
-    showNotes: false,
-    requiredFields() {
-      return ['address_1', 'city', 'postal_code', 'country', 'region'];
-    }
-  }
-);
-
-const emit = defineEmits(['update:model-value']);
-
-const { size } = useInputSize(computed(() => props.size));
-
-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 ?? '';
-  form.notes = form.notes ?? '';
-  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);
-}
-
-function isRequired(field: keyof Address): boolean {
-  return props.requiredFields.includes(field) && props.required;
-}
-
-// 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);
-  });
-}
-
-const baseClasses = computed(() => {
-  return {
-    'xs': 'gap-y-2 gap-x-1',
-    'sm': 'gap-y-2.5 gap-x-1.5',
-    'md': 'gap-y-3 gap-x-2',
-    'lg': 'gap-y-3 gap-x-2',
-    'xl': 'gap-y-4 gap-x-2',
-  }[size.value]
-});
-</script>
+<template>
+  <div
+    class="grid grid-cols-2"
+    :class="baseClasses"
+  >
+    <div class="flex flex-col gap-1 col-span-2">
+      <BaseField
+        :label="t('sui.address')"
+        :name="`${namePrefix}address_1`"
+        class="col-span-2"
+        :required="isRequired('address_1')"
+        :size="size"
+      >
+        <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"
+          @update:model-value="update('address_1', $event)"
+        />
+      </BaseField>
+
+      <BaseField
+        :name="`${namePrefix}address_2`"
+        class="col-span-2"
+        :required="isRequired('address_2')"
+        :size="size"
+      >
+        <BaseInput
+          :model-value="normalizedModelValue.address_2 ?? ''"
+          :placeholder="t('sui.address_2_description')"
+          class="w-full"
+          @update:model-value="update('address_2', $event)"
+        />
+      </BaseField>
+    </div>
+
+    <BaseField
+      :label="t('sui.city')"
+      :required="isRequired('city')"
+      :name="`${namePrefix}city`"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
+    >
+      <BaseInput
+        :model-value="normalizedModelValue.city ?? ''"
+        class="w-full"
+        @update:model-value="update('city', $event)"
+      />
+    </BaseField>
+
+    <BaseField
+      :label="t('sui.postal_code_zip_code')"
+      :required="isRequired('postal_code')"
+      :name="`${namePrefix}postal_code`"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
+    >
+      <BaseInput
+        :model-value="normalizedModelValue.postal_code ?? ''"
+        class="w-full"
+        @update:model-value="update('postal_code', $event)"
+      />
+    </BaseField>
+
+    <BaseField
+      v-if="!props.hideCountry"
+      :label="t('sui.country')"
+      :name="`${namePrefix}country`"
+      :required="isRequired('country') && !props.restrictCountry"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
+    >
+      <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)"
+      />
+    </BaseField>
+
+    <BaseField
+      v-if="!props.hideRegion"
+      :label="t('sui.region')"
+      :name="`${namePrefix}region`"
+      :required="isRequired('region')"
+      class="col-span-2 || sm:col-span-1"
+      :size="size"
+    >
+      <BaseSelect
+        :model-value="normalizedModelValue.region ?? ''"
+        class="w-full"
+        :options="regions"
+        :placeholder="t('sui.region')"
+        label-key="name"
+        value-key="id"
+        @update:model-value="update('region', $event)"
+      />
+    </BaseField>
+
+    <BaseField
+      v-if="props.showNotes"
+      :label="t('sui.notes')"
+      :name="`${namePrefix}notes`"
+      :required="isRequired('notes')"
+      class="col-span-2"
+      :size="size"
+    >
+      <BaseTextarea
+        :model-value="normalizedModelValue.notes ?? ''"
+        class="w-full"
+        @update:model-value="update('notes', $event)"
+      />
+    </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 BaseTextarea from './BaseTextarea.vue';
+import { t } from '@/i18n';
+import { config } from '..';
+import { Size } from '@/utils/sizes';
+import { useInputSize } from '@/composables/inputSize';
+
+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;
+  notes?: string | null;
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: undefined | null | Address;
+    prefix: string | null;
+    required?: boolean;
+    countries?: Country[];
+    regions?: Region[];
+    restrictCountry?: boolean;
+    size?: Size;
+    hideRegion?: boolean;
+    hideCountry?: boolean;
+    showNotes?: boolean;
+    requiredFields?: (keyof Address)[];
+  }>(),
+  {
+    modelValue() {
+      return {};
+    },
+    prefix: null,
+    countries() {
+      return [];
+    },
+    regions() {
+      return [];
+    },
+    restrictCountry: false,
+    size: undefined,
+    hideRegion: false,
+    hideCountry: false,
+    showNotes: false,
+    requiredFields() {
+      return ['address_1', 'city', 'postal_code', 'country', 'region'];
+    }
+  }
+);
+
+const emit = defineEmits(['update:model-value']);
+
+const { size } = useInputSize(computed(() => props.size));
+
+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 ?? '';
+  form.notes = form.notes ?? '';
+  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);
+}
+
+function isRequired(field: keyof Address): boolean {
+  return props.requiredFields.includes(field) && props.required;
+}
+
+// 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);
+  });
+}
+
+const baseClasses = computed(() => {
+  return {
+    'xs': 'gap-y-2 gap-x-1',
+    'sm': 'gap-y-2.5 gap-x-1.5',
+    'md': 'gap-y-3 gap-x-2',
+    'lg': 'gap-y-3 gap-x-2',
+    'xl': 'gap-y-4 gap-x-2',
+  }[size.value]
+});
+</script>