sprintify-ui 0.0.203 → 0.0.204

package/dist/types/src/components/BaseAddressForm.vue.d.ts

@@ -5,21 +5,25 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     prefix: string | null;
     countries?: Country[] | undefined;
     regions?: Region[] | undefined;
+    restrictCountry?: boolean | undefined;
 }>, {
     modelValue(): {};
     prefix: null;
     countries(): never[];
     regions(): never[];
+    restrictCountry: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:model-value"[], "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue: Record<string, string | number | null | undefined> | null | undefined;
     prefix: string | null;
     countries?: Country[] | undefined;
     regions?: Region[] | undefined;
+    restrictCountry?: boolean | undefined;
 }>, {
     modelValue(): {};
     prefix: null;
     countries(): never[];
     regions(): never[];
+    restrictCountry: boolean;
 }>>> & {
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -27,6 +31,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     regions: Region[];
     modelValue: Record<string, string | number | null | undefined> | null | undefined;
     prefix: string | null;
+    restrictCountry: boolean;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.203",
+  "version": "0.0.204",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAddressForm.stories.js

@@ -70,3 +70,34 @@ const DefaultCountryTemplate = (args) => ({
 
 export const DefaultCountry = DefaultCountryTemplate.bind({});
 DefaultCountry.args = {};
+
+const DefaultCountryAndRegionTemplate = (args) => ({
+  components: { BaseAddressForm, ShowValue },
+  setup() {
+    const form = ref({
+      shipping_address: {
+        country: 'ca',
+        region: 'ca-qc',
+      },
+    });
+
+    setTimeout(() => {
+      form.value.shipping_address.country = 'us';
+    }, 2000);
+
+    return { args, form };
+  },
+  template: `
+    <BaseAddressForm v-model="form.shipping_address" prefix="shipping_address" v-bind="args"></BaseAddressForm>
+    <ShowValue :value="form" />
+  `,
+});
+
+export const DefaultCountryAndRegion = DefaultCountryAndRegionTemplate.bind({});
+DefaultCountryAndRegion.args = {};
+
+export const RestrictCountry = DefaultCountryAndRegionTemplate.bind({});
+
+RestrictCountry.args = {
+  restrictCountry: true,
+};

package/src/components/BaseAddressForm.vue

@@ -65,6 +65,7 @@
         class="w-full"
         :options="countries"
         label-key="name"
+        :disabled="props.restrictCountry"
         value-key="id"
         @update:model-value="update('country', $event)"
       >
@@ -108,6 +109,7 @@ const props = withDefaults(
     prefix: string | null;
     countries?: Country[];
     regions?: Region[];
+    restrictCountry?: boolean;
   }>(),
   {
     modelValue() {
@@ -120,6 +122,7 @@ const props = withDefaults(
     regions() {
       return [];
     },
+    restrictCountry: false,
   }
 );
 
@@ -189,17 +192,40 @@ onMounted(() => {
   }
 
   autocomplete = new window.google.maps.places.Autocomplete(
-    address1Input.value,
-    {
-      fields: ['address_components'],
-      types: ['address'],
-      componentRestrictions: { country: 'ca' },
-    }
+    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) {
+    options.componentRestrictions = {
+      country: props.modelValue?.country ?? 'ca',
+    };
+  }
+
+  autocomplete.setOptions(options);
+}
+
 function fillAddress() {
   if (!autocomplete) {
     return;