sprintify-ui 0.12.27 → 0.12.28

package/dist/types/components/BaseAutocompleteDrawer.vue.d.ts

@@ -111,9 +111,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>, {
     size: "xs" | "sm" | "md" | "lg" | "xl";
     options: NormalizedOption[];
-    loading: boolean;
     selected: NormalizedOption | NormalizedOption[] | null | undefined;
     keywords: string;
+    loading: boolean;
     loadingBottom: boolean;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;

package/dist/types/components/BaseBelongsTo.vue.d.ts

@@ -250,10 +250,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     modelValue: string | number | null | undefined;
     hasError: boolean;
     visibleFocus: boolean;
-    primaryKey: string;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
     optionSubtitle: (option: RawOption) => string;
+    primaryKey: string;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
     focusOnMount: boolean;

package/dist/types/components/BaseBelongsToFetch.vue.d.ts

@@ -82,10 +82,10 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     modelValue: string | number | null;
     hasError: boolean;
     visibleFocus: boolean;
-    primaryKey: string;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
     optionSubtitle: (option: RawOption) => string;
+    primaryKey: string;
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     focusOnMount: boolean;

package/dist/types/components/BaseHasMany.vue.d.ts

@@ -164,9 +164,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     modelValue: string | number | (string | number)[] | null | undefined;
     hasError: boolean;
     max: number;
-    primaryKey: string;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    primaryKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/composables/placesAutocomplete.d.ts

@@ -0,0 +1,31 @@
+import { Ref } from 'vue';
+/**
+ * Which Google Places API the address autocomplete uses.
+ * - `auto`: try Places API (New) first, fall back to the legacy Places API
+ *   when the API key is not allowed to use the new one.
+ * - `new`: always use Places API (New).
+ * - `legacy`: always use the legacy Places API (google.maps.places.Autocomplete widget).
+ */
+export type GooglePlacesApi = 'auto' | 'new' | 'legacy';
+export type ResolvedGooglePlacesApi = 'new' | 'legacy' | 'unavailable';
+export interface PlaceSuggestion {
+    id: string;
+    mainText: string;
+    secondaryText: string;
+    prediction: google.maps.places.PlacePrediction;
+}
+/** Address component, normalized across the legacy and new Places APIs. */
+export interface PlaceAddressComponent {
+    types: string[];
+    longText: string;
+    shortText: string;
+}
+export declare function usePlacesAutocomplete(regionCode: Ref<string | null>, mode: GooglePlacesApi): {
+    api: import("vue").ComputedRef<ResolvedGooglePlacesApi | null>;
+    usesNewApi: import("vue").ComputedRef<boolean>;
+    usesLegacyApi: import("vue").ComputedRef<boolean>;
+    fetchSuggestions: (input: string) => Promise<PlaceSuggestion[] | null>;
+    fetchAddressComponents: (suggestion: PlaceSuggestion) => Promise<PlaceAddressComponent[]>;
+    cancelPendingSuggestions: () => void;
+};
+export declare function normalizeLegacyAddressComponents(components: google.maps.GeocoderAddressComponent[]): PlaceAddressComponent[];

package/dist/types/index.d.ts

@@ -230,6 +230,7 @@ import { Country } from './types/Country';
 import { Region } from './types/Region';
 import { Size } from './utils/sizes';
 import { SettingsStorage } from './utils/storage';
+import type { GooglePlacesApi } from './composables/placesAutocomplete';
 export interface OptionProps {
     size?: Size;
 }
@@ -243,6 +244,7 @@ export interface Options {
     countries?: Country[];
     regions?: Region[];
     props?: OptionProps;
+    googlePlacesApi?: GooglePlacesApi;
 }
 declare const config: {
     http: AxiosInstance;
@@ -253,6 +255,7 @@ declare const config: {
     settingsStorage: SettingsStorage;
     countries: Country[];
     regions: Region[];
+    googlePlacesApi: GooglePlacesApi;
     props: OptionProps | undefined;
 };
 declare function install(app: App, options?: Options): void;

package/dist/types/svg/BaseGoogleMapsLogo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.27",
+  "version": "0.12.28",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -61,7 +61,7 @@
     "@tiptap/starter-kit": "^3.13.0",
     "@tiptap/vue-3": "^3.13.0",
     "@types/croppie": "^2.6.4",
-    "@types/google.maps": "^3.55.4",
+    "@types/google.maps": "^3.58.1",
     "@types/humanize-duration": "^3.27.4",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",

package/src/components/BaseAddressForm.stories.js

@@ -1,4 +1,5 @@
 import { BaseAddressForm } from "."
+import { config } from "..";
 import ShowValue from "../../.storybook/components/ShowValue.vue";
 import { sizes } from "../../.storybook/utils";
 
@@ -112,3 +113,27 @@ export const RestrictCountry = DefaultCountryAndRegionTemplate.bind({});
 RestrictCountry.args = {
   restrictCountry: true,
 };
+
+// Force a Google Places API instead of detecting it (`auto`).
+// Requires both Places API (New) and Places API (Legacy) on the Storybook key.
+const ForcedPlacesApiTemplate = (googlePlacesApi) => (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    config.googlePlacesApi = googlePlacesApi;
+    onUnmounted(() => {
+      config.googlePlacesApi = "auto";
+    });
+    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 ForceNew = ForcedPlacesApiTemplate("new").bind({});
+ForceNew.args = {};
+
+export const ForceLegacy = ForcedPlacesApiTemplate("legacy").bind({});
+ForceLegacy.args = {};

package/src/components/BaseAddressForm.vue

@@ -19,10 +19,51 @@
           prevent-submit
           name="address_search_field"
           :autocomplete="false"
-          @update:model-value="update('address_1', $event)"
+          @update:model-value="onAddress1Input"
+          @keydown="onAddress1Keydown"
         />
       </BaseField>
 
+      <Teleport to="body">
+        <div
+          v-if="suggestionsOpened"
+          ref="suggestionsRef"
+          :style="{ ...floatingStyles, width: address1InputWidth + 'px' }"
+          class="fixed z-menu overflow-hidden border border-slate-300 bg-white shadow-2xl input-rounded"
+        >
+          <BaseAutocompleteDrawer
+            ref="suggestionsDrawerRef"
+            :options="suggestionOptions"
+            :size="size"
+            :keywords="normalizedModelValue.address_1 ?? ''"
+            tw-drawer="p-1"
+            @select="onSuggestionSelect"
+          >
+            <template #option="{ option, active }">
+              <div
+                class="rounded px-[0.75em] py-[0.4em] text-sm"
+                :class="active ? 'bg-slate-200' : 'bg-white'"
+              >
+                <p class="block font-semibold">
+                  {{ option?.mainText }}
+                </p>
+                <small class="-mt-[0.075em] block text-xs text-slate-500">
+                  {{ option?.secondaryText }}
+                </small>
+              </div>
+            </template>
+            <template #footer>
+              <div class="flex justify-end border-t border-slate-200 px-2.5 pb-1.5 pt-2.5">
+                <BaseGoogleMapsLogo
+                  class="h-4"
+                  translate="no"
+                />
+              </div>
+            </template>
+          </BaseAutocompleteDrawer>
+        </div>
+      </Teleport>
+
       <BaseField
         :name="`${namePrefix}address_2`"
         class="col-span-2"
@@ -123,7 +164,7 @@
 
 <script lang="ts" setup>
 import { ComputedRef } from 'vue';
-import { cloneDeep, isArray } from 'lodash';
+import { cloneDeep, debounce, isArray } from 'lodash';
 import { Country } from '@/types/Country';
 import { Region } from '@/types/Region';
 import BaseField from './BaseField.vue';
@@ -134,6 +175,18 @@ import { t } from '@/i18n';
 import { config } from '..';
 import { Size } from '@/utils/sizes';
 import { useInputSize } from '@/composables/inputSize';
+import { useClickOutside } from '@/composables/clickOutside';
+import {
+  normalizeLegacyAddressComponents,
+  PlaceAddressComponent,
+  PlaceSuggestion,
+  usePlacesAutocomplete,
+} from '@/composables/placesAutocomplete';
+import { NormalizedOption } from '@/types';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import BaseGoogleMapsLogo from '../svg/BaseGoogleMapsLogo.vue';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
+import { useElementBounding } from '@vueuse/core';
 
 const DEFAULT_COUNTRY = 'ca';
 
@@ -253,105 +306,250 @@ const address1Input = computed(
   () => address1Ref.value?.$refs.input ?? null
 ) as ComputedRef<HTMLInputElement | null>;
 
+const MIN_SEARCH_LENGTH = 3;
+
+const placesRegionCode = computed((): string | null => {
+  if (props.restrictCountry && normalizedCountry.value) {
+    return normalizedCountry.value;
+  }
+  return null;
+});
+
+const places = usePlacesAutocomplete(placesRegionCode, config.googlePlacesApi);
+
+// Places API (New): suggestions are shown in our own dropdown
+
+const suggestions = ref<PlaceSuggestion[]>([]);
+const suggestionsRef = ref<HTMLElement | null>(null);
+const suggestionsDrawerRef = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
+
+const suggestionsOpened = computed(() => suggestions.value.length > 0);
+
+const suggestionOptions = computed((): NormalizedOption[] => {
+  return suggestions.value.map((suggestion) => ({
+    value: suggestion.id,
+    label: suggestion.mainText,
+    option: suggestion,
+  }));
+});
+
+function onAddress1Input(value: string) {
+  update('address_1', value);
+
+  if (places.usesNewApi.value) {
+    places.cancelPendingSuggestions();
+    searchSuggestions(value);
+  }
+
+  // The Google Maps script may have loaded after the form was mounted
+  if (places.usesLegacyApi.value && !legacyAutocomplete) {
+    attachLegacyAutocompleteAndReplay();
+  }
+}
+
+const searchSuggestions = debounce(async (value: string) => {
+  if (value.trim().length < MIN_SEARCH_LENGTH) {
+    closeSuggestions();
+    return;
+  }
+
+  const result = await places.fetchSuggestions(value);
+
+  if (result !== null) {
+    suggestions.value = result;
+  }
+}, 300);
+
+function closeSuggestions() {
+  searchSuggestions.cancel();
+  places.cancelPendingSuggestions();
+  suggestions.value = [];
+}
+
+function onAddress1Keydown(event: KeyboardEvent) {
+  if (!suggestionsOpened.value) {
+    return;
+  }
+
+  if (event.key === 'Escape') {
+    // Only close the suggestions, not a dialog containing the form
+    event.preventDefault();
+    event.stopPropagation();
+    closeSuggestions();
+    return;
+  }
+
+  if (event.key === 'Tab') {
+    closeSuggestions();
+    return;
+  }
+
+  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key)) {
+    event.preventDefault();
+    suggestionsDrawerRef.value?.onKeydown(event);
+  }
+}
+
+async function onSuggestionSelect(option: NormalizedOption) {
+  closeSuggestions();
+  const components = await places.fetchAddressComponents(option.option as PlaceSuggestion);
+  fillAddress(components);
+}
+
+useClickOutside(suggestionsRef, closeSuggestions, {
+  includes: () => [address1Input],
+});
+
+const address1InputRect = useElementBounding(address1Input);
+const address1InputWidth = computed(() => address1InputRect.width.value);
+
+const { floatingStyles } = useFloating(address1Input, suggestionsRef, {
+  placement: 'bottom-start',
+  middleware: [offset(4), flip()],
+  whileElementsMounted: autoUpdate,
+});
+
+// Legacy Places API: Google's Autocomplete widget is attached to the input
+
 // eslint-disable-next-line no-undef
-let autocomplete = null as google.maps.places.Autocomplete | null;
+let legacyAutocomplete = null as google.maps.places.Autocomplete | null;
 
 onMounted(() => {
-  if (!window.google) {
-    return;
+  if (places.usesLegacyApi.value) {
+    attachLegacyAutocomplete();
+  }
+});
+
+// In `auto` mode, the API is known after the first request
+watch(places.api, (api) => {
+  if (api === 'legacy') {
+    closeSuggestions();
+    attachLegacyAutocompleteAndReplay();
+  }
+  if (api === 'unavailable') {
+    closeSuggestions();
   }
+});
+
+let legacyReplayTimeout = null as ReturnType<typeof setTimeout> | null;
 
-  if (!address1Input.value) {
+function attachLegacyAutocompleteAndReplay() {
+  if (!attachLegacyAutocomplete()) {
     return;
   }
 
-  autocomplete = new window.google.maps.places.Autocomplete(
+  // The widget only reacts to input typed after it was attached, so replay the
+  // current value to show suggestions right away. It finishes its setup after
+  // the current task: replaying synchronously leaves its dropdown hidden.
+  // Only the field being typed in: other forms on the page are left untouched.
+  legacyReplayTimeout = setTimeout(() => {
+    const input = address1Input.value;
+    if (input && document.activeElement === input) {
+      // The widget only shows its dropdown after it saw the field gain focus
+      input.dispatchEvent(new FocusEvent('focus'));
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  });
+}
+
+onBeforeUnmount(() => {
+  if (legacyReplayTimeout) {
+    clearTimeout(legacyReplayTimeout);
+  }
+});
+
+function attachLegacyAutocomplete(): boolean {
+  if (legacyAutocomplete || !address1Input.value || !window.google?.maps) {
+    return false;
+  }
+
+  if (!window.google.maps.places) {
+    console.warn('[BaseAddressForm] The Google Maps script must be loaded with `libraries=places`. Address autocomplete is disabled.');
+    return false;
+  }
+
+  legacyAutocomplete = new window.google.maps.places.Autocomplete(
     address1Input.value
   );
 
-  setAutocompleteOptions();
+  setLegacyAutocompleteOptions();
 
-  autocomplete.addListener('place_changed', fillAddress);
-});
+  legacyAutocomplete.addListener('place_changed', () => {
+    const place = legacyAutocomplete?.getPlace();
+    if (!place?.address_components) {
+      return;
+    }
+    fillAddress(normalizeLegacyAddressComponents(place.address_components));
+  });
 
-watch(
-  () => props.modelValue?.country + ' ' + props.restrictCountry,
-  () => {
-    setAutocompleteOptions();
-  }
-);
+  return true;
+}
 
-function setAutocompleteOptions() {
-  if (!autocomplete) {
+watch(placesRegionCode, () => {
+  setLegacyAutocompleteOptions();
+});
+
+function setLegacyAutocompleteOptions() {
+  if (!legacyAutocomplete) {
     return;
   }
 
-  const options = {
+  // eslint-disable-next-line no-undef
+  const options: google.maps.places.AutocompleteOptions = {
     fields: ['address_components'],
     types: ['address'],
-  } as any;
+  };
 
-  if (props.restrictCountry) {
-    if (normalizedCountry.value) {
-      options.componentRestrictions = {
-        country: normalizedCountry.value,
-      };
-    }
+  if (placesRegionCode.value) {
+    options.componentRestrictions = {
+      country: placesRegionCode.value,
+    };
   }
 
-  autocomplete.setOptions(options);
+  legacyAutocomplete.setOptions(options);
 }
 
-function fillAddress() {
-  if (!autocomplete) {
+function fillAddress(components: PlaceAddressComponent[]) {
+  if (components.length === 0) {
     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[]) {
+  for (const component of components) {
     const componentType = component.types[0];
     switch (componentType) {
       case 'street_number': {
-        address1 = `${component.long_name} ${address1}`;
+        address1 = `${component.longText} ${address1}`;
         break;
       }
       case 'route': {
-        address1 += component.long_name;
+        address1 += component.longText;
         break;
       }
       case 'postal_code': {
-        postcode = `${component.long_name}${postcode}`;
+        postcode = `${component.longText}${postcode}`;
         break;
       }
       case 'postal_code_suffix': {
-        postcode = `${postcode}-${component.long_name}`;
+        postcode = `${postcode}-${component.longText}`;
         break;
       }
       case 'locality':
-        newForm.city = component.long_name;
+        newForm.city = component.longText;
         break;
       case 'administrative_area_level_1': {
-        region = component.short_name.toLowerCase();
+        region = component.shortText.toLowerCase();
         break;
       }
       case 'country':
-        newForm.country = component.short_name.toLowerCase();
+        newForm.country = component.shortText.toLowerCase();
         break;
     }
   }
@@ -361,11 +559,6 @@ function fillAddress() {
   newForm.postal_code = postcode;
 
   nextTick(() => {
-    // Force value change
-    /* if (address1Input.value) {
-      address1Input.value.value = address1;
-    } */
-
     emit('update:model-value', newForm);
   });
 }