sprintify-ui 0.0.167 → 0.0.169

package/package.json

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

package/src/components/BaseAddressForm.stories.js

@@ -7,23 +7,23 @@ export default {
   argTypes: {},
   args: {
     countries: [
-      { code: 'US', name: 'United States', id: 'us' },
-      { code: 'CA', name: 'Canada', id: 'ca' },
-      { code: 'MX', name: 'Mexico', id: 'mx' },
+      { name: 'United States', id: 'us' },
+      { name: 'Canada', id: 'ca' },
+      { 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' },
+      { name: 'Alabama', id: 'us-al', country_id: 'us' },
+      { name: 'Alaska', id: 'us-ak', country_id: 'us' },
+      { name: 'Arizona', id: 'us-az', country_id: 'us' },
+      { name: 'Alberta', id: 'ca-ab', country_id: 'ca' },
+      { name: 'British Columbia', id: 'ca-bc', country_id: 'ca' },
+      { name: 'Manitoba', id: 'ca-mb', country_id: 'ca' },
+      { name: 'Nova Scotia', id: 'ca-ns', country_id: 'ca' },
+      { name: 'Ontario', id: 'ca-on', country_id: 'ca' },
+      { name: 'Prince Edward Island', id: 'ca-pe', country_id: 'ca' },
+      { name: 'Quebec', id: 'ca-qc', country_id: 'ca' },
+      { name: 'Saskatchewan', id: 'ca-sk', country_id: 'ca' },
+      { name: 'Northwest Territories', id: 'ca-nt', country_id: 'ca' },
     ],
   },
 };
@@ -31,7 +31,16 @@ export default {
 const Template = (args) => ({
   components: { BaseAddressForm, ShowValue },
   setup() {
-    const form = ref({});
+    const form = ref({
+      shipping_address: {
+        address_1: '333 rue Sherbrooke Est',
+        address_2: 'Suite 100',
+        city: 'Montreal',
+        country: 'ca',
+        region: 'qc',
+        postal_code: 'H2X 4E3',
+      },
+    });
     return { args, form };
   },
   template: `

package/src/components/BaseAddressForm.vue

@@ -62,15 +62,11 @@
       <BaseSelect
         :model-value="normalizedModelValue.country ?? ''"
         class="w-full"
+        :options="countries"
+        label-key="name"
+        value-key="id"
         @update:model-value="update('country', $event)"
       >
-        <option
-          v-for="country in countries"
-          :key="country.id"
-          :value="country.id"
-        >
-          {{ country.name }}
-        </option>
       </BaseSelect>
     </BaseField>
     <BaseField
@@ -85,11 +81,11 @@
         :name="`${namePrefix}region`"
         class="w-full"
         required
+        :options="regions"
+        label-key="name"
+        value-key="id"
         @update:model-value="update('region', $event)"
       >
-        <option v-for="region in regions" :key="region.id" :value="region.id">
-          {{ region.name }}
-        </option>
       </BaseSelect>
     </BaseField>
   </div>
@@ -214,6 +210,7 @@ function fillAddress() {
   const place = autocomplete.getPlace();
   let address1 = '';
   let postcode = '';
+  let region = '';
 
   const newForm = cloneDeep(props.modelValue);
 
@@ -249,7 +246,7 @@ function fillAddress() {
         newForm.city = component.long_name;
         break;
       case 'administrative_area_level_1': {
-        newForm.region = component.short_name.toLowerCase();
+        region = component.short_name.toLowerCase();
         break;
       }
       case 'country':
@@ -258,15 +255,15 @@ function fillAddress() {
     }
   }
 
-  nextTick(() => {
-    newForm.address_1 = address1;
+  newForm.region = newForm.country + '-' + region;
+  newForm.address_1 = address1;
+  newForm.postal_code = postcode;
 
+  nextTick(() => {
     // Force value change
-    if (address1Input.value) {
-      //address1Input.value.value = address1;
-    }
-
-    newForm.postal_code = postcode;
+    /* if (address1Input.value) {
+      address1Input.value.value = address1;
+    } */
 
     emit('update:model-value', newForm);
   });