@awes-io/ui 2.47.2 → 2.49.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.49.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.48.0...@awes-io/ui@2.49.0) (2022-05-26)
+
+
+### Features
+
+* translation system updated ([2827c0e](https://github.com/awes-io/client/commit/2827c0e6108523aa26e3f5af10478be23cace54f))
+
+
+
+
+
+# [2.48.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.47.3...@awes-io/ui@2.48.0) (2022-05-16)
+
+
+### Features
+
+* **aw-address-block:** region added ([018a113](https://github.com/awes-io/client/commit/018a113f7bd397df33042e87619e5e9b7f0f08df))
+
+
+
+
+
+## [2.47.3](https://github.com/awes-io/client/compare/@awes-io/ui@2.47.2...@awes-io/ui@2.47.3) (2022-04-26)
+
+
+### Bug Fixes
+
+* close dropdown on overlay click on mobile ([aef2d98](https://github.com/awes-io/client/commit/aef2d982e1f1824ea8a1ac43037ccc56d457767b))
+
+
+
+
+
 ## [2.47.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.47.1...@awes-io/ui@2.47.2) (2022-04-06)
 
 

package/assets/css/components/button-fixed.css

@@ -20,7 +20,7 @@
     &__text {
         flex-shrink: 1;
         max-width: 1px;
-        margin-right: -1px;
+        margin-left: -1px;
 
         opacity: 0.1;
         transition-property: max-width, margin, opacity;
@@ -28,10 +28,10 @@
 
         &--expanded {
             max-width: 16rem;
-            margin-right: 0.75em;
+            margin-left: 0.75em;
             opacity: 1;
             transition-timing-function: ease-out;
-            transition-duration: 240ms;
+            transition-duration: 210ms;
         }
     }
 

package/assets/css/components/dropdown.css

@@ -12,9 +12,7 @@
     }
 
     &--mobile {
-        @apply bg-overlay;
         padding: theme('spacing.2', 0.5rem);
-        backdrop-filter: blur(10px);
 
         display: flex;
         flex-direction: column;
@@ -31,6 +29,14 @@
         } */
     }
 
+    &__overlay {
+        @apply bg-overlay;
+        backdrop-filter: blur(10px);
+
+        position: absolute;
+        inset: 0;
+    }
+
     &__title {
         text-align: center;
         font-weight: bold;
@@ -54,6 +60,7 @@
         /* max-height: 60%; */
         flex-shrink: 1;
         overflow: auto;
+        position: relative;
     }
 
     &__close {
@@ -62,6 +69,7 @@
         padding-top: theme('spacing.1', 0.25rem);
         padding-bottom: theme('spacing.1', 0.25rem);
         flex-shrink: 0;
+        position: relative;
 
         &.aw-button.theme-ghost.color-surface {
             color: var(--c-on-overlay);

package/components/1_atoms/AwDropdown.vue

@@ -32,6 +32,13 @@
                 </p>
             </slot>
 
+            <!-- overlay -->
+            <div
+                v-if="isMobile"
+                class="aw-dropdown__overlay"
+                @click="close"
+            ></div>
+
             <!-- content -->
             <div
                 ref="mobileScroller"
@@ -48,7 +55,7 @@
             <slot v-if="isMobile" name="close">
                 <AwButton
                     theme="ghost"
-                    :text="$t('AwDropdown.close')"
+                    :text="$t('aw.dropdown.close')"
                     color="surface"
                     size="lg"
                     class="aw-dropdown__close"

package/components/2_molecules/AwButton.vue

@@ -168,7 +168,7 @@ export default {
         // loadingText() {
         //     return (
         //         (isType('String', this.loading) && this.loading) ||
-        //         this.$t('AwButton.loading')
+        //         this.$t('aw.button.loading')
         //     )
         // },
 

package/components/2_molecules/AwIsland/AwIslandBuilder.vue

@@ -16,7 +16,7 @@ export default {
         confirmText: {
             type: String,
             default() {
-                return this.$t('AwIslandBuilder.cancel_all_changes')
+                return this.$t('aw.island_builder.cancel_all_changes')
             }
         }
     },

package/components/2_molecules/AwSelect.vue

@@ -235,7 +235,7 @@
                     data-arrow-focus
                 >
                     <slot name="not-found" :searchPhrase="searchPhrase">
-                        {{ $t('AwSelect.notFound') }}
+                        {{ $t('aw.select.not_found') }}
                     </slot>
                 </AwDropdownButton>
             </slot>
@@ -344,7 +344,7 @@ export default {
         createConfirmText: {
             type: String,
             default() {
-                return this.$t('AwSelect.newOne')
+                return this.$t('aw.select.new_one')
             }
         },
 

package/components/2_molecules/AwSelectObject.vue

@@ -163,7 +163,7 @@
                 <!-- not found -->
                 <div v-if="_showNotFound" class="aw-select__notify">
                     <slot name="not-found" :searchPhrase="searchPhrase">
-                        {{ $t('AwSelect.empty') }}
+                        {{ $t('aw.select.empty') }}
                     </slot>
                 </div>
 
@@ -173,7 +173,7 @@
                     class="aw-select__notify aw-select__notify--loading"
                 >
                     <slot name="loading">
-                        {{ $t('AwSelect.loading') }}
+                        {{ $t('aw.select.loading') }}
                     </slot>
                 </div>
 

package/components/3_organisms/AwAddressBlock.vue

@@ -4,7 +4,7 @@
             <AwAddress
                 ref="address"
                 :gm-language="$i18n.locale || 'en'"
-                :label="$t('AwAddressBlock.address')"
+                :label="$t('aw.address_block.address')"
                 :error="addressError"
                 :gm-key="gmKey"
                 :timezone="timezone"
@@ -24,51 +24,62 @@
                 </div>
 
                 <AwGrid :col="{ md: 2 }">
-                    <AwInfo :label="$t('AwAddressBlock.street')">
+                    <AwInfo :label="$t('aw.address_block.street')">
                         <span v-if="model.address.address_1">
                             {{ model.address.address_1 }}
                         </span>
                         <AwLink
                             v-else
-                            :text="$t('AwAddressBlock.add')"
+                            :text="$t('aw.address_block.add')"
                             @click="openModal('address_1')"
                         />
                     </AwInfo>
 
-                    <AwInfo :label="$t('AwAddressBlock.apt')">
+                    <AwInfo :label="$t('aw.address_block.apt')">
                         <span v-if="model.address.apt">
                             {{ model.address.apt }}
                         </span>
                         <AwLink
                             v-else
-                            :text="$t('AwAddressBlock.add')"
+                            :text="$t('aw.address_block.add')"
                             @click="openModal('apt')"
                         />
                     </AwInfo>
 
-                    <AwInfo :label="$t('AwAddressBlock.city')">
+                    <AwInfo :label="$t('aw.address_block.city')">
                         <span v-if="model.address.city">
                             {{ model.address.city }}
                         </span>
                         <AwLink
                             v-else
-                            :text="$t('AwAddressBlock.add')"
+                            :text="$t('aw.address_block.add')"
                             @click="openModal('city')"
                         />
                     </AwInfo>
 
-                    <AwInfo :label="$t('AwAddressBlock.postal_code')">
+                    <AwInfo :label="$t('aw.address_block.region')">
+                        <span v-if="model.address.region">
+                            {{ model.address.region }}
+                        </span>
+                        <AwLink
+                            v-else
+                            :text="$t('aw.address_block.add')"
+                            @click="openModal('region')"
+                        />
+                    </AwInfo>
+
+                    <AwInfo :label="$t('aw.address_block.postal_code')">
                         <span v-if="model.address.postal_code">
                             {{ model.address.postal_code }}
                         </span>
                         <AwLink
                             v-else
-                            :text="$t('AwAddressBlock.add')"
+                            :text="$t('aw.address_block.add')"
                             @click="openModal('postal_code')"
                         />
                     </AwInfo>
 
-                    <AwInfo :label="$t('AwAddressBlock.country')">
+                    <AwInfo :label="$t('aw.address_block.country')">
                         <span>
                             {{ model.address.meta.google_country_name }}
                         </span>
@@ -107,7 +118,7 @@
             :key="_uid"
             :param="false"
             :name="modalName"
-            :title="$t('AwAddressBlock.modal.title')"
+            :title="$t('aw.address_block.modal.title')"
             @opened="onModalOpen"
             @closed="onModalClose"
         >
@@ -115,35 +126,42 @@
                 <AwInput
                     ref="address_1"
                     v-model="address.address_1"
-                    :label="$t('AwAddressBlock.street')"
+                    :label="$t('aw.address_block.street')"
                     :error="model.errors['address.address_1']"
                 />
 
                 <AwInput
                     ref="apt"
                     v-model="address.apt"
-                    :label="$t('AwAddressBlock.apt')"
+                    :label="$t('aw.address_block.apt')"
                     :error="model.errors['address.apt']"
                 />
 
                 <AwInput
                     ref="city"
                     v-model="address.city"
-                    :label="$t('AwAddressBlock.city')"
+                    :label="$t('aw.address_block.city')"
                     :error="model.errors['address.city']"
                 />
 
+                <AwInput
+                    ref="region"
+                    v-model="address.region"
+                    :label="$t('aw.address_block.region')"
+                    :error="model.errors['address.region']"
+                />
+
                 <AwInput
                     ref="postal_code"
                     v-model="address.postal_code"
-                    :label="$t('AwAddressBlock.postal_code')"
+                    :label="$t('aw.address_block.postal_code')"
                     :error="model.errors['address.postal_code']"
                 />
 
                 <AwInput
-                    ref="postal_code"
+                    ref="country"
                     :value="model.address.meta.google_country_name"
-                    :label="$t('AwAddressBlock.country')"
+                    :label="$t('aw.address_block.country')"
                     :error="model.errors['address.meta.google_country_name']"
                     disabled
                 />
@@ -152,7 +170,7 @@
             <template #buttons>
                 <div class="flex items-center border-t w-full p-4">
                     <AwButton
-                        :text="$t('AwAddressBlock.modal.save')"
+                        :text="$t('aw.address_block.modal.save')"
                         style="margin-right: 1rem"
                         @click="saveAddress"
                     />
@@ -163,7 +181,7 @@
                         @click="resetAddress"
                     >
                         <span class="text-dark-blue">
-                            {{ $t('AwAddressBlock.modal.cancel') }}
+                            {{ $t('aw.address_block.modal.cancel') }}
                         </span>
                     </AwButton>
                 </div>
@@ -181,6 +199,7 @@ const BASE = {
         google_country_name: null
     },
     country_iso: null,
+    region: null,
     city: null,
     postal_code: null,
     address_1: null,
@@ -279,7 +298,11 @@ export default {
 
             address.meta.google_country_name = obj.country || 'Germany'
             address.country_iso = obj.country_iso || 'DE'
-            address.city = obj.locality
+            address.region = obj.administrative_area_level_1
+            address.city =
+                obj.locality ||
+                obj.postal_town ||
+                obj.administrative_area_level_2
             address.postal_code = obj.postal_code
             address.address_1 =
                 (obj.route ? `${obj.route} ` : '') + (obj.street_number || '')
@@ -289,6 +312,23 @@ export default {
             }
             address.timezone = obj.timezone
 
+            // additional info
+            if (obj.route) {
+                address.meta.street = obj.route
+            }
+
+            if (obj.street_number) {
+                address.meta.house = obj.street_number
+            }
+
+            if (obj.neighborhood) {
+                address.meta.neighborhood = obj.neighborhood
+            }
+
+            if (obj.administrative_area_level_2) {
+                address.meta.county = obj.administrative_area_level_2
+            }
+
             event.data = address
 
             this.$emit('data', event)

package/components/3_organisms/AwBirthdayPicker.vue

@@ -98,7 +98,7 @@ export default {
         label: {
             type: String,
             default() {
-                return this.$t('AwBirthdayPicker.birthday')
+                return this.$t('aw.birthday_picker.birthday')
             }
         },
 
@@ -166,7 +166,7 @@ export default {
                 key,
                 [KEY_ATTR]: key,
                 name: this._inputNames[i].name,
-                placeholder: this.$t('AwBirthdayPicker.' + key),
+                placeholder: this.$t('aw.birthday_picker.' + key),
                 pattern: MASK_MAP[key],
                 maxlength: PLACEHOLDER_MAP[key].length,
                 inputmode: 'numeric'

package/components/3_organisms/AwBottomBar.vue

@@ -12,7 +12,7 @@
 
         <slot name="bottom-bar-toggler">
             <AwMenuItemIcon
-                :text="$t('AwBottomBar.menu')"
+                :text="$t('aw.bottom_bar.menu')"
                 icon="menu"
                 @click="$store.commit('awesIo/TOGGLE_MOBILE_MENU')"
             >

package/components/3_organisms/AwCalendar/AwCalendar.vue

@@ -22,7 +22,7 @@
 
         <AwCalendarWeekdays
             :first-day="firstDay"
-            :weekday-names="$t('AwCalendar.weekdaysShort')"
+            :weekday-names="$t('aw.calendar.weekdays_short')"
         />
 
         <AwCalendarDays

package/components/3_organisms/AwCalendar/AwCalendarView.vue

@@ -2,7 +2,7 @@
     <div class="aw-calendar" @click="onClick">
         <AwCalendarWeekdays
             :first-day="firstDay"
-            :weekday-names="$t('AwCalendar.weekdaysShort')"
+            :weekday-names="$t('aw.calendar.weekdays_short')"
         />
 
         <AwCalendarDays

package/components/3_organisms/AwCalendar/_AwCalendarNav.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { AwCalendar as lang } from '../../../lang/en'
+import { AwCalendar as _config } from '@AwConfig'
 
 export default {
     name: 'AwCalendarNav',
@@ -52,7 +52,7 @@ export default {
         months: {
             type: Array,
             default() {
-                return this.$t('AwCalendar.months')
+                return this.$t('aw.calendar.months')
             }
         },
 
@@ -63,7 +63,7 @@ export default {
 
     computed: {
         _months() {
-            return Array.isArray(this.months) ? this.months : lang.months
+            return Array.isArray(this.months) ? this.months : _config.months
         }
     }
 }

package/components/3_organisms/AwCalendar/_AwCalendarWeekdays.vue

@@ -1,6 +1,5 @@
 <script>
 import { pathOr } from 'rambdax'
-import { AwCalendar as lang } from '../../../lang/en'
 import { AwCalendar as _config } from '@AwConfig'
 import { CONFIG_VAR } from '@AwUtils/component'
 
@@ -34,7 +33,7 @@ export default {
 
         const namesArray = Array.isArray(weekdayNames)
             ? weekdayNames
-            : lang.weekdaysShort
+            : _config.weekdaysShort
 
         const sortedNames = namesArray
             .slice(firstDay)

package/components/3_organisms/AwCodeSnippet.vue

@@ -52,7 +52,7 @@ export default {
                             click: () => copyFn(props.code)
                         }
                     },
-                    [parent.$t('AwCodeSnippet.copy')]
+                    [parent.$t('aw.code_snippet.copy')]
                 ),
                 h(
                     'pre',

package/components/3_organisms/AwCropper.vue

@@ -12,7 +12,7 @@
                 class="aw-cropper__rotate"
                 content-class="px-2"
                 theme="icon"
-                :text="$t('AwCropper.rotate')"
+                :text="$t('aw.cropper.rotate')"
                 color="default"
                 @click="rotate"
             >
@@ -32,7 +32,7 @@
 
         <slot name="buttons" :rotate="rotate" :save="save">
             <!-- save -->
-            <AwButton :text="$t('AwCropper.save')" @click="save" />
+            <AwButton :text="$t('aw.cropper.save')" @click="save" />
         </slot>
     </div>
 </template>

package/components/3_organisms/AwDate.vue

@@ -52,7 +52,7 @@
                 />
                 <AwCalendarWeekdays
                     :first-day="firstDay"
-                    :weekday-names="$t('AwCalendar.weekdaysShort')"
+                    :weekday-names="$t('aw.calendar.weekdays_short')"
                 />
                 <AwCalendarDays
                     :first-day="firstDay"

package/components/3_organisms/AwDisplayDate.vue

@@ -60,7 +60,7 @@ export default {
             }
 
             return age
-                ? `${str} (${age} ${this.$t('AwBirthdayDate.years')})`
+                ? `${str} (${age} ${this.$t('aw.birthday_date.years')})`
                 : str
         }
     }

package/components/3_organisms/AwDownloadLink.vue

@@ -109,7 +109,7 @@ export default {
             type: String,
             /* Translatable word "Download" */
             default() {
-                return this.$t('AwDownloadLink.download')
+                return this.$t('aw.download_link.download')
             }
         },
         /**
@@ -119,7 +119,7 @@ export default {
             type: String,
             /* Translatable word "Download" */
             default() {
-                return this.$t('AwDownloadLink.download')
+                return this.$t('aw.download_link.download')
             }
         },
         /**

package/components/3_organisms/AwFetchData.vue

@@ -18,7 +18,7 @@
                         slot="left"
                         class="h-5 w-5"
                     />
-                    {{ $t('AwTableBuilder.loading') }}
+                    {{ $t('aw.table_builder.loading') }}
                 </AwChip>
             </slot>
         </div>

package/components/3_organisms/AwIslandAvatar.vue

@@ -58,7 +58,7 @@
 
                     <AwDropdownButton
                         v-if="zoomable && src"
-                        :text="$t('AwPageUser.zoom')"
+                        :text="$t('aw.page_user.zoom')"
                         @click="openZoomModal"
                     />
                     <label
@@ -66,7 +66,7 @@
                         class="aw-dropdown-button aw-dropdown-button_default"
                     >
                         <span tabindex="-1">
-                            {{ $t('AwPageUser.upload') }}
+                            {{ $t('aw.page_user.upload') }}
                         </span>
                         <input
                             class="sr-only"
@@ -77,7 +77,7 @@
                     </label>
                     <AwDropdownButton
                         v-if="editable && src"
-                        :text="$t('AwPageUser.remove')"
+                        :text="$t('aw.page_user.remove')"
                         color="error"
                         @click="removeAvatar"
                     />
@@ -144,7 +144,7 @@
                 v-if="editable"
                 ref="cropModal"
                 :param="null"
-                :title="$t('AwPageUser.modalTitle')"
+                :title="$t('aw.page_user.modal_title')"
                 theme="fullscreen"
             >
                 <AwCropper :src="uploadedAvatar" @save="saveAvatar" />

package/components/3_organisms/AwModal.vue

@@ -29,8 +29,8 @@
 
                         <AwButton
                             :class="elClasses.close"
-                            :title="$t('AwModal.close')"
-                            :aria-label="$t('AwModal.close')"
+                            :title="$t('aw.modal.close')"
+                            :aria-label="$t('aw.modal.close')"
                             @click.prevent="close()"
                             theme="ghost"
                             color="default"

package/components/3_organisms/AwModelEdit.vue

@@ -73,7 +73,7 @@ export default {
         saveText: {
             type: String,
             default() {
-                return this.$t('AwModelEdit.save')
+                return this.$t('aw.model_edit.save')
             }
         },
 
@@ -82,7 +82,7 @@ export default {
         cancelText: {
             type: String,
             default() {
-                return this.$t('AwModelEdit.cancel')
+                return this.$t('aw.model_edit.cancel')
             }
         },
 
@@ -179,7 +179,7 @@ export default {
 
                 this.notify(
                     'success',
-                    this.notifyText || this.$t('AwModelEdit.success')
+                    this.notifyText || this.$t('aw.model_edit.success')
                 )
 
                 if (this.isRedirect) {
@@ -189,7 +189,7 @@ export default {
                 console.log(e)
 
                 const msg = pathOr(
-                    this.$t('AwModelEdit.error'),
+                    this.$t('aw.model_edit.error'),
                     this.saveErrorPath,
                     e
                 )
@@ -245,7 +245,7 @@ export default {
 
         ask() {
             if (this.model.changed()) {
-                return this.$confirm(this.$t('AwModelEdit.cancel_all_changes'))
+                return this.$confirm(this.$t('aw.model_edit.cancel_all_changes'))
             } else {
                 return Promise.resolve()
             }
@@ -287,7 +287,7 @@ export default {
         _onPageLeave($event) {
             $event.preventDefault()
 
-            $event.returnValue = this.$t('AwModelEdit.cancel_all_changes')
+            $event.returnValue = this.$t('aw.model_edit.cancel_all_changes')
         }
     }
 }