@awes-io/ui 2.81.0 → 2.83.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.83.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.82.0...@awes-io/ui@2.83.0) (2023-11-15)
+
+
+### Features
+
+* address block sends formatted address ([fd5c456](https://github.com/awes-io/client/commit/fd5c45646187c2ce5167303c35acb70a1d1f6f17))
+* change hove and focus color for inputs ([087787a](https://github.com/awes-io/client/commit/087787a665c170f9b79abba22bc4b0d6a56c8bc4))
+* change style for dropdown btn ([31916a6](https://github.com/awes-io/client/commit/31916a61f049a4c7d3d8354e97419d27ce03a992))
+
+
+
+
+
+# [2.82.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.81.0...@awes-io/ui@2.82.0) (2023-11-08)
+
+
+### Features
+
+* mobile nav special behaviour added ([0c37293](https://github.com/awes-io/client/commit/0c37293ebc3b3d73a5d39c4a5a4d376d612e7013))
+
+
+
+
+
 # [2.81.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.80.0...@awes-io/ui@2.81.0) (2023-11-08)
 
 

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

@@ -32,6 +32,10 @@
         &.is-active {
              @apply bg-mono-900;
         }
+
+        .aw-icon {
+            @apply text-mono-400;
+        }
     }
 
     &[disabled] > span {

package/assets/css/components/text-field.css

@@ -1,5 +1,5 @@
 .aw-text-field {
-    @apply border text-base;
+    @apply border border-mono-800 text-base;
     position: relative;
     transition: 200ms border-color;
     background-color: var(--c-surface);
@@ -17,6 +17,10 @@
         background-image: none;
     }
 
+    &:hover {
+        @apply border-mono-600;
+    }
+
     &:focus-within {
         @apply border-mono-400;
     }

package/components/1_atoms/AwDropdownButton.vue

@@ -14,11 +14,7 @@
                 class="w-6 text-left inline-block mr-1"
             >
                 <slot name="icon">
-                    <AwIcon
-                        :name="icon"
-                        :size="iconSize"
-                        class="text-mono-400"
-                    />
+                    <AwIcon :name="icon" :size="iconSize" />
                 </slot>
             </span>
             <slot>

package/components/2_molecules/AwButton.vue

@@ -42,11 +42,21 @@
                 :class="{
                     'hidden lg:block': mobileTextHidden,
                     'sr-only': (theme === 'icon' || theme === 'circle') && icon,
-                    'ml-1': icon && (text || $slots.default)
+                    'ml-2': icon && isContentAdded,
+                    'mr-2': iconRight && isContentAdded
                 }"
             >
                 <slot>{{ text }}</slot>
             </span>
+
+            <slot name="icon-right" v-bind="{ iconRight, iconSize }">
+                <AwIcon
+                    v-if="iconRight"
+                    :name="iconRight"
+                    class="flex-shrink-0"
+                    :size="iconSize"
+                />
+            </slot>
         </span>
 
         <span v-if="locked" class="aw-button__lock" v-tooltip="lockedTooltip">
@@ -108,6 +118,12 @@ export default {
             default: ''
         },
 
+        // Name of icon in button. Icon placed after text
+        iconRight: {
+            type: String,
+            default: ''
+        },
+
         // Indicates if loader spinner is shown
         loading: {
             type: [Boolean, String],
@@ -165,6 +181,10 @@ export default {
             )
         },
 
+        isContentAdded() {
+            return this.text || this.$scopedSlots.default
+        },
+
         // loadingText() {
         //     return (
         //         (isType('String', this.loading) && this.loading) ||

package/components/3_organisms/AwAddress.vue

@@ -73,7 +73,7 @@ export default {
                         this.$refs.select.searchPhrase = ''
                     }
                     this._resetSearch()
-                    this._formatAddressResponse(details).then((result) => {
+                    this._formatAddressResponse(details, place).then((result) => {
                         this.$emit('input', result)
                     })
                 }
@@ -148,9 +148,13 @@ export default {
             this.sessionToken = null
         },
 
-        _formatAddressResponse(details) {
+        _formatAddressResponse(details, place) {
             if (details && details.address_components) {
-                const response = {}
+                const response = {
+                    description: details.formatted_address || place.description,
+                    main: pathOr('', 'structured_formatting.main_text', place),
+                    secondary: pathOr('', 'structured_formatting.secondary_text', place)
+                }
 
                 details.address_components.forEach(
                     ({ long_name, short_name, types }) => {

package/components/3_organisms/AwAddressBlock.vue

@@ -195,8 +195,11 @@ import { clone } from 'rambdax'
 import { makePreventableEventMock } from '@AwUtils/events'
 
 const BASE = {
+    description: null,
     meta: {
-        google_country_name: null
+        google_country_name: null,
+        main: null,
+        secondary: null
     },
     country_iso: null,
     region: null,
@@ -329,6 +332,10 @@ export default {
                 address.meta.county = obj.administrative_area_level_2
             }
 
+            address.description = obj.description
+            address.meta.main = obj.main
+            address.meta.secondary = obj.secondary
+
             event.data = address
 
             this.$emit('data', event)

package/components/4_pages/AwPageSingle.vue

@@ -32,7 +32,22 @@
                 <slot name="buttons"></slot>
 
                 <AwButton
-                    v-if="actionButton && isDesktop"
+                    v-if="
+                        actionButton && isDesktop && isDesktopActionBeforeMenu
+                    "
+                    v-bind="actionButton"
+                    size="md"
+                    @click="$emit('action')"
+                />
+            </template>
+
+            <template #after-menu>
+                <slot name="after-menu"></slot>
+
+                <AwButton
+                    v-if="
+                        actionButton && isDesktop && !isDesktopActionBeforeMenu
+                    "
                     v-bind="actionButton"
                     size="md"
                     @click="$emit('action')"
@@ -111,7 +126,7 @@
 </template>
 
 <script>
-import { isType } from 'rambdax'
+import { isType, pathOr, omit } from 'rambdax'
 import pageMixin from '@AwMixins/page'
 
 const CONTAINER_TYPES = ['default', 'full']
@@ -182,12 +197,16 @@ export default {
             return this.$scopedSlots.preview || this.$slots.preview
         },
 
+        isDesktopActionBeforeMenu() {
+            return !!pathOr(false, 'before', this.action)
+        },
+
         actionButton() {
             if (!isType('Object', this.action)) {
                 return null
             }
 
-            return this.action
+            return omit(['before'], this.action)
         }
     },
 
@@ -232,10 +251,6 @@ export default {
 
             this.$options.$observer.observe(topScrollMark)
             this.$options.$observer.observe(bottomScrollMark)
-
-            this.$once('hook:beforeDestroy', () => {
-                
-            })
         },
 
         _disableScrollWatcher() {

package/components/4_pages/_AwPageHeader.vue

@@ -13,11 +13,11 @@
         </h1>
 
         <div class="aw-page-header__buttons">
-            <slot>
-                <!-- <EwSupportChat /> -->
-            </slot>
+            <slot />
 
             <AwUserMenu v-if="!hideMenu" outline vertical caret />
+
+            <slot name="after-menu" />
         </div>
 
         <slot name="progress">

package/components/4_pages/_AwPageHeadline.vue

@@ -4,12 +4,13 @@
         <div class="aw-page-headline__back-wrapper">
             <slot name="headline-breadcrumb" :breadcrumb="breadcrumb">
                 <AwButton
-                    v-if="backUrl"
+                    v-if="backUrl || isMenuToggler"
                     color="mono"
                     class="w-10 h-10 aw-page-headline__back"
                     :href="backUrl"
-                    :aria-label="breadcrumb.title"
+                    :aria-label="isMenuToggler ? $t('Menu') : breadcrumb.title"
                     content-class="p-0"
+                    v-on="isMenuToggler ? { click: openMenu } : null"
                 >
                     <template #icon>
                         <AwIconSystemMono name="arrow-l" size="24" />
@@ -98,7 +99,14 @@ export default {
         buttonsBreakpoint: {
             type: String,
             default: null
-        }
+        },
+
+        breadcrumbMenu: {
+            type: Boolean,
+            default() {
+                return conf(this, 'breadcrumbMenu')
+            }
+        },
     },
 
     computed: {
@@ -122,6 +130,16 @@ export default {
             }
 
             return this.breadcrumb.href
+        },
+
+        isMenuToggler() {
+            return !this.backUrl && this.breadcrumbMenu
+        }
+    },
+
+    methods: {
+        openMenu() {
+            this.$store.commit('awesIo/TOGGLE_MOBILE_MENU', true)
         }
     }
 }

package/components/5_layouts/_AwMobileMenu.vue

@@ -89,7 +89,8 @@
                                       click: () =>
                                           showSubmenu(
                                               item.children,
-                                              item.subtitle || item.text
+                                              item.subtitle || item.text,
+                                              item.href
                                           )
                                   }
                                 : item.listeners || null
@@ -119,7 +120,8 @@
                                       click: () =>
                                           showSubmenu(
                                               item.children,
-                                              item.subtitle || item.text
+                                              item.subtitle || item.text,
+                                              item.href
                                           )
                                   }
                                 : item.listeners || null
@@ -214,8 +216,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { pathOr, viewOr, lensProp, partition } from 'rambdax'
+import { pathOr, viewOr, lensProp, partition, isType } from 'rambdax'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import { LINK_REGEX } from '@AwConfig'
+import { conf } from '@AwUtils/component'
+import { getPath } from '@AwUtils/router'
 import AwMobileMenuNav from '@AwLayouts/_AwMobileMenuNav.vue'
 import AwMobileMenuItemNew from '@AwLayouts/_AwMobileMenuItemNew.vue'
 // import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
@@ -230,6 +235,15 @@ export default {
         // AwMobileMenuItem
     },
 
+    props: {
+        navigateToFirstPage: {
+            type: Boolean,
+            default() {
+                return conf(this, 'navigateToFirstPage')
+            }
+        }
+    },
+
     inject: {
         layoutProvider: {
             default: null
@@ -348,7 +362,19 @@ export default {
     },
 
     methods: {
-        showSubmenu(items, text) {
+        showSubmenu(items, text, href) {
+            if (this.navigateToFirstPage && href) {
+                if (isType('String', href) && LINK_REGEX.test(href)) {
+                    window.location.assign(href)
+                } else if (getPath(this.$route) === getPath(href)) {
+                    this.show = false
+                } else {
+                    this.$router.push(href)
+                }
+
+                return
+            }
+
             const [submenu, submenuDeep] = partition(
                 ({ children }) =>
                     !Array.isArray(children) || children.length === 0,

package/components/5_layouts/_AwMobileMenuNav.vue

@@ -33,7 +33,8 @@
                                           $emit(
                                               'click:submenu',
                                               item.children,
-                                              item.subtitle || item.text
+                                              item.subtitle || item.text,
+                                              item.href
                                           )
                                   }
                                 : item.listeners || null

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.81.0",
+    "version": "2.83.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -113,5 +113,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "4652ce2e297a512f850ff0c8eb6a6315a22733f3"
+    "gitHead": "ea4f770f2aa8cd95e2ea082b2a03887a766d772c"
 }