@awes-io/ui 2.38.0 → 2.39.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.39.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.38.0...@awes-io/ui@2.39.0) (2022-01-17)
+
+
+### Features
+
+* aw-address uses select internally ([d8a71f0](https://github.com/awes-io/client/commit/d8a71f0b42f22853ca69d1b61cfdb3d9d91aed40))
+
+
+
+
+
 # [2.38.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.37.0...@awes-io/ui@2.38.0) (2021-12-30)
 
 

package/components/1_atoms/AwFlow.vue

@@ -55,7 +55,7 @@ export default {
                         class: {
                             'aw-flow__wrap--children': !wrapChildren,
                             'aw-flow__wrap--vertical': vertical,
-                            'justify-start': justify === 'center',
+                            'justify-center': justify === 'center',
                             'justify-end': justify === 'end',
                             'items-start': align === 'start',
                             'items-center': align === 'center',

package/components/2_molecules/AwSelectObject.vue

@@ -178,6 +178,14 @@
                 </div>
 
                 <div v-if="_isAjax && _hasNextPage" ref="dropdownEnd"></div>
+
+                <slot
+                    name="dropdown-after"
+                    v-bind="{
+                        optionsList,
+                        isLoading
+                    }"
+                ></slot>
             </slot>
         </div>
     </div>
@@ -438,7 +446,7 @@ export default {
         _showNotFound() {
             return this._isAjax
                 ? !this.selectOptions.length && !this.isLoading
-                : !this.optionsList.length
+                : this._searchPhraseLength && !this.optionsList.length
         },
 
         isMobile() {

package/components/3_organisms/AwAddress.vue

@@ -1,34 +1,25 @@
 <template>
-    <div class="relative">
-        <AwInput v-bind="$attrs" v-model="search" autocomplete="off" />
-
-        <!-- suggestions -->
-        <AwDropdown
-            class="w-full z-10"
-            :show="!!suggestions.length"
-            close-on-action
-        >
-            <AwDropdownButton
-                icon="location"
-                v-for="place in suggestions"
-                :key="place.place_id"
-                @click="select(place)"
-            >
-                {{ place.description }}
-            </AwDropdownButton>
-
+    <AwSelectObject
+        ref="select"
+        v-model="place"
+        :options="suggestions"
+        track-by="place_id"
+        option-label="description"
+        @search="search"
+    >
+        <template #dropdown-after>
             <!-- branding -->
             <img
+                v-if="suggestions.length"
                 class="block my-2 mx-auto"
                 aria-hidden="true"
                 src="https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png"
                 alt=""
             />
-        </AwDropdown>
-
-        <!-- places service needs a container to init -->
-        <div ref="place"></div>
-    </div>
+            <!-- places service needs a container to init -->
+            <div ref="place"></div>
+        </template>
+    </AwSelectObject>
 </template>
 
 <script>
@@ -56,30 +47,34 @@ export default {
             autocomplete: null,
             placesService: null,
             sessionToken: null,
+            isLoading: false,
             suggestions: [],
-            placeDescription: '',
             place: null
         }
     },
 
-    computed: {
-        search: {
-            get() {
-                return this.placeDescription
-            },
-
-            set(text) {
-                this.placeDescription = text
-
-                if (!this.autocomplete) return
+    watch: {
+        place(place) {
+            if (!place || !place.place_id) {
+                this.place = null
+                return
+            }
 
-                if (!text) {
+            this.placesService.getDetails(
+                {
+                    placeId: place.place_id,
+                    sessionToken: this.sessionToken
+                },
+                (details) => {
+                    if (this.$refs.select) {
+                        this.$refs.select.searchPhrase = ''
+                    }
                     this._resetSearch()
-                    return
+                    this._formatAddressResponse(details).then((result) => {
+                        this.$emit('input', result)
+                    })
                 }
-
-                this._query(text)
-            }
+            )
         }
     },
 
@@ -107,13 +102,22 @@ export default {
             this.placesService = new window.google.maps.places.PlacesService(
                 this.$refs.place
             )
+        },
+
+        search(text) {
+            if (!this.autocomplete) return
 
-            if (this.placeDescription) {
-                this._query(this.placeDescription)
+            if (!text) {
+                this._resetSearch()
+                return
             }
+
+            this._query(text)
         },
 
         _query(input) {
+            this.$refs.select.isLoading = true
+
             if (!this.sessionToken) {
                 this.sessionToken = new window.google.maps.places.AutocompleteSessionToken()
             }
@@ -129,10 +133,14 @@ export default {
         },
 
         _setSuggestions(data) {
+            this.$refs.select.isLoading = false
             this.suggestions = data || []
         },
 
         _resetSearch() {
+            if (this.$refs.select) {
+                this.$refs.select.isLoading = false
+            }
             this.suggestions = []
             this.sessionToken = null
         },
@@ -222,32 +230,8 @@ export default {
                 })
         },
 
-        select(place) {
-            if (!place || !place.place_id) {
-                this.place = null
-                this.placeDescription = ''
-                return
-            }
-
-            this.placesService.getDetails(
-                {
-                    placeId: place.place_id,
-                    sessionToken: this.sessionToken
-                },
-                (details) => {
-                    this.place = details
-                    this.placeDescription = details.formatted_address
-                    this._resetSearch()
-                    this._formatAddressResponse(details).then((result) => {
-                        this.$emit('input', result)
-                    })
-                }
-            )
-        },
-
         reset() {
             this.suggestions = []
-            this.placeDescription = ''
             this.place = null
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.38.0",
+    "version": "2.39.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -124,5 +124,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "2b9497ac41e66479e4305edeb125e7234add8a51"
+    "gitHead": "357c3e4b953260cceb0e1514598dc7246aaff63d"
 }