sprintify-ui 0.0.164 → 0.0.166

package/dist/types/src/index.d.ts

@@ -9,16 +9,21 @@ import { useField } from './composables/field';
 declare const messages: {
     en: {
         sui: {
+            address: string;
+            address_1_placeholder: string;
+            address_2_description: string;
             and: string;
             apply_filters: string;
             autocomplete_placeholder: string;
             cancel: string;
+            city: string;
             clear: string;
             click_or_select_date: string;
             click_to_copy: string;
             columns: string;
             confirm: string;
             copied: string;
+            country: string;
             create_new: string;
             day: string;
             delete_record: string;
@@ -43,9 +48,11 @@ declare const messages: {
             or: string;
             page: string;
             pagination_detail: string;
+            postal_code_zip_code: string;
             previous: string;
             previous_month: string;
             read_more: string;
+            region: string;
             remove: string;
             remove_file: string;
             remove_file_description: string;
@@ -77,16 +84,21 @@ declare const messages: {
     };
     fr: {
         sui: {
+            address: string;
+            address_1_placeholder: string;
+            address_2_description: string;
             and: string;
             apply_filters: string;
             autocomplete_placeholder: string;
             cancel: string;
+            city: string;
             clear: string;
             click_or_select_date: string;
             click_to_copy: string;
             columns: string;
             confirm: string;
             copied: string;
+            country: string;
             create_new: string;
             day: string;
             delete_record: string;
@@ -111,9 +123,11 @@ declare const messages: {
             or: string;
             page: string;
             pagination_detail: string;
+            postal_code_zip_code: string;
             previous: string;
             previous_month: string;
             read_more: string;
+            region: string;
             remove: string;
             remove_file: string;
             remove_file_description: string;
@@ -146,6 +160,8 @@ declare const messages: {
 };
 import './assets/main.css';
 import { Locales } from './types';
+import { Country } from './types/Country';
+import { Region } from './types/Region';
 export interface Options {
     i18n?: I18n<typeof messages, {}, {}, string, true>;
     http?: AxiosInstance;
@@ -153,21 +169,28 @@ export interface Options {
     locales?: Locales;
     formatQueryString?: (params: Record<string, any>) => string;
     parseQueryString?: (params: string) => Record<string, any>;
+    countries?: Country[];
+    regions?: Region[];
 }
 declare const config: {
     i18n: I18n<{
         en: {
             sui: {
+                address: string;
+                address_1_placeholder: string;
+                address_2_description: string;
                 and: string;
                 apply_filters: string;
                 autocomplete_placeholder: string;
                 cancel: string;
+                city: string;
                 clear: string;
                 click_or_select_date: string;
                 click_to_copy: string;
                 columns: string;
                 confirm: string;
                 copied: string;
+                country: string;
                 create_new: string;
                 day: string;
                 delete_record: string;
@@ -192,9 +215,11 @@ declare const config: {
                 or: string;
                 page: string;
                 pagination_detail: string;
+                postal_code_zip_code: string;
                 previous: string;
                 previous_month: string;
                 read_more: string;
+                region: string;
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
@@ -226,16 +251,21 @@ declare const config: {
         };
         fr: {
             sui: {
+                address: string;
+                address_1_placeholder: string;
+                address_2_description: string;
                 and: string;
                 apply_filters: string;
                 autocomplete_placeholder: string;
                 cancel: string;
+                city: string;
                 clear: string;
                 click_or_select_date: string;
                 click_to_copy: string;
                 columns: string;
                 confirm: string;
                 copied: string;
+                country: string;
                 create_new: string;
                 day: string;
                 delete_record: string;
@@ -260,9 +290,11 @@ declare const config: {
                 or: string;
                 page: string;
                 pagination_detail: string;
+                postal_code_zip_code: string;
                 previous: string;
                 previous_month: string;
                 read_more: string;
+                region: string;
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
@@ -298,6 +330,8 @@ declare const config: {
     upload_url: string;
     formatQueryString(params: Record<string, any>): string;
     parseQueryString(params: string): Record<string, any>;
+    countries: Country[];
+    regions: Region[];
 };
 declare function install(app: App, options?: Options): void;
 declare const _default: {

package/dist/types/src/types/Country.d.ts

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

package/dist/types/src/types/Region.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -52,6 +52,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@types/google.maps": "^3.51.0",
     "@types/humanize-duration": "^3.27.1",
     "@types/luxon": "^3.1.0",
     "@types/object-hash": "^2.2.1",

package/src/components/BaseAddressForm.stories.js

@@ -0,0 +1,63 @@
+import BaseAddressForm from './BaseAddressForm.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseAddressForm',
+  component: BaseAddressForm,
+  argTypes: {},
+  args: {
+    countries: [
+      { code: 'US', name: 'United States', id: 'us' },
+      { code: 'CA', name: 'Canada', id: 'ca' },
+      { code: 'MX', name: 'Mexico', id: 'mx' },
+    ],
+    regions: [
+      { code: 'AL', name: 'Alabama', id: 'al', country_id: 'us' },
+      { code: 'AK', name: 'Alaska', id: 'ak', country_id: 'us' },
+      { code: 'AZ', name: 'Arizona', id: 'az', country_id: 'us' },
+      { code: 'AB', name: 'Alberta', id: 'ab', country_id: 'ca' },
+      { code: 'BC', name: 'British Columbia', id: 'bc', country_id: 'ca' },
+      { code: 'MB', name: 'Manitoba', id: 'mb', country_id: 'ca' },
+      { code: 'NS', name: 'Nova Scotia', id: 'ns', country_id: 'ca' },
+      { code: 'ON', name: 'Ontario', id: 'on', country_id: 'ca' },
+      { code: 'PE', name: 'Prince Edward Island', id: 'pe', country_id: 'ca' },
+      { code: 'QC', name: 'Quebec', id: 'qc', country_id: 'ca' },
+      { code: 'SK', name: 'Saskatchewan', id: 'sk', country_id: 'ca' },
+      { code: 'NT', name: 'Northwest Territories', id: 'nt', country_id: 'ca' },
+    ],
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({});
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const DefaultCountryTemplate = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({
+      shipping_address: {
+        country: 'ca',
+      },
+    });
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const DefaultCountry = DefaultCountryTemplate.bind({});
+DefaultCountry.args = {};

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/components/index.ts

@@ -1,4 +1,5 @@
 import BaseActionItem from './BaseActionItem.vue';
+import BaseAddressForm from './BaseAddressForm.vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseApp from './BaseApp.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
@@ -88,6 +89,7 @@ import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 
 export {
   BaseActionItem,
+  BaseAddressForm,
   BaseAlert,
   BaseApp,
   BaseAppDialogs,

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.",