sprintify-ui 0.0.164 → 0.0.165

package/src/components/BaseAddressForm.vue

@@ -0,0 +1,303 @@
+<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
+      :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
+      :label="$t('sui.country')"
+      :name="`${namePrefix}country`"
+      required
+      class="mb-4 flex-1"
+    >
+      <BaseSelect
+        :model-value="normalizedModelValue.country ?? ''"
+        class="w-full"
+        @update:model-value="update('country', $event)"
+      >
+        <option
+          v-for="country in countries"
+          :key="country.id"
+          :value="country.id"
+        >
+          {{ country.name }}
+        </option>
+      </BaseSelect>
+    </BaseField>
+    <BaseField
+      :label="$t('sui.region')"
+      :name="`${namePrefix}country`"
+      required
+      class="mb-4 flex-1"
+    >
+      <BaseSelect
+        :model-value="normalizedModelValue.region ?? ''"
+        :label="$t('sui.region')"
+        :name="`${namePrefix}region`"
+        class="w-full"
+        required
+        @update:model-value="update('region', $event)"
+      >
+        <option v-for="region in regions" :key="region.id" :value="region.id">
+          {{ region.name }}
+        </option>
+      </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 { config } from '..';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Record<string, string | number | null | undefined>;
+    prefix: string | null;
+    countries?: Country[];
+    regions?: Region[];
+  }>(),
+  {
+    modelValue() {
+      return {};
+    },
+    prefix: null,
+    countries() {
+      return [];
+    },
+    regions() {
+      return [];
+    },
+  }
+);
+
+const emit = defineEmits(['update:model-value']);
+
+const normalizedModelValue = computed(
+  (): Record<string, string | number | null | undefined> => {
+    const form = cloneDeep(props.modelValue ?? {});
+    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 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: string, 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,
+    {
+      fields: ['address_components'],
+      types: ['address'],
+      componentRestrictions: { country: 'ca' },
+    }
+  );
+
+  autocomplete.addListener('place_changed', fillAddress);
+});
+
+function fillAddress() {
+  if (!autocomplete) {
+    return;
+  }
+
+  // Get the place details from the autocomplete object.
+  const place = autocomplete.getPlace();
+  let address1 = '';
+  let postcode = '';
+
+  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': {
+        newForm.region = component.short_name.toLowerCase();
+        break;
+      }
+      case 'country':
+        newForm.country = component.short_name.toLowerCase();
+        break;
+    }
+  }
+
+  nextTick(() => {
+    newForm.address_1 = address1;
+
+    // Force value change
+    if (address1Input.value) {
+      //address1Input.value.value = address1;
+    }
+
+    newForm.postal_code = postcode;
+
+    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>

package/src/components/BaseInput.vue

@@ -39,7 +39,7 @@
       @update:model-value="emitUpdate"
     />
     <input
-      v-else
+      v-else-if="maskOptions"
       ref="input"
       v-maska:[maskOptions]
       v-bind="bindings"
@@ -53,6 +53,20 @@
       }"
       @input="update"
     />
+    <input
+      v-else
+      ref="input"
+      v-bind="bindings"
+      :value="modelValue"
+      :type="type"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      :class="{
+        'rounded-l': emptyLeft,
+        'rounded-r': emptyRight,
+        'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
+      }"
+      @input="update"
+    />
     <div
       v-if="suffix"
       class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"

package/src/index.ts

@@ -15,6 +15,8 @@ const messages = { en, fr };
 
 import './assets/main.css';
 import { Locales } from './types';
+import { Country } from './types/Country';
+import { Region } from './types/Region';
 
 export interface Options {
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -24,6 +26,8 @@ export interface Options {
   locales?: Locales;
   formatQueryString?: (params: Record<string, any>) => string;
   parseQueryString?: (params: string) => Record<string, any>;
+  countries?: Country[];
+  regions?: Region[];
 }
 
 const config = {
@@ -47,6 +51,8 @@ const config = {
   parseQueryString(params: string): Record<string, any> {
     return QueryString.parse(params);
   },
+  countries: [] as Country[],
+  regions: [] as Region[],
 };
 
 function install(app: App, options?: Options) {
@@ -78,6 +84,14 @@ function install(app: App, options?: Options) {
   if (options?.parseQueryString) {
     config.parseQueryString = options.parseQueryString;
   }
+
+  if (options?.countries) {
+    config.countries = options.countries;
+  }
+
+  if (options?.regions) {
+    config.regions = options.regions;
+  }
 }
 
 export default { install };

package/src/lang/en.json

@@ -1,15 +1,20 @@
 {
   "sui": {
+    "address": "Address",
+    "address_1_placeholder": "Postal address",
+    "address_2_description": "Apartment, suite, unit, building",
     "and": "and",
     "apply_filters": "Apply filters",
     "autocomplete_placeholder": "Type to start your search",
     "cancel": "Cancel",
+    "city": "City",
     "clear": "Clear",
     "click_or_select_date": "Click or select date",
     "click_to_copy": "Click to copy",
     "columns": "Columns",
     "confirm": "Confirm",
     "copied": "Copied",
+    "country": "Country",
     "create_new": "Create new",
     "day": "Day",
     "delete_record": "Delete the record",
@@ -34,9 +39,11 @@
     "or": "or",
     "page": "Page",
     "pagination_detail": "{page} records of {total}",
+    "postal_code_zip_code": "Postal Code / Zip Code",
     "previous": "Previous",
     "previous_month": "Previous month",
     "read_more": "Read more",
+    "region": "State / Province",
     "remove": "Remove",
     "remove_file": "Remove file?",
     "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",

package/src/lang/fr.json

@@ -1,15 +1,20 @@
 {
   "sui": {
+    "address": "Adresse",
+    "address_1_placeholder": "Adresse postale",
+    "address_2_description": "Appartement, suite, unité, immeuble",
     "and": "et",
     "apply_filters": "Appliquer les filtres",
     "autocomplete_placeholder": "Tapez pour lancer votre recherche",
     "cancel": "Annuler",
+    "city": "Ville",
     "clear": "Effacer",
     "click_or_select_date": "Cliquez ou sélectionnez la date",
     "click_to_copy": "Cliquez pour copier",
     "columns": "Colonnes",
     "confirm": "Confirmer",
     "copied": "Copié",
+    "country": "Pays",
     "create_new": "Créer un nouveau",
     "day": "Jour",
     "delete_record": "Supprimer l'item",
@@ -34,9 +39,11 @@
     "or": "ou",
     "page": "Page",
     "pagination_detail": "{page} items de {total}",
+    "postal_code_zip_code": "Code postal",
     "previous": "Précédent",
     "previous_month": "Mois précédent",
     "read_more": "Lire la suite",
+    "region": "État / Province",
     "remove": "Retirer",
     "remove_file": "Retirer le fichier?",
     "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",

package/src/types/Country.ts

@@ -0,0 +1,4 @@
+export interface Country {
+  id: string;
+  name: string;
+}

package/src/types/Region.ts

@@ -0,0 +1,5 @@
+export interface Region {
+  id: string;
+  name: string;
+  country_id: string;
+}