@awes-io/ui 2.56.7 → 2.58.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.58.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.57.0...@awes-io/ui@2.58.0) (2022-08-08)
+
+
+### Features
+
+* update ([e56f315](https://github.com/awes-io/client/commit/e56f31548de6895d0dc6dfc4175914860a0c8e53))
+
+
+
+
+
+# [2.57.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.7...@awes-io/ui@2.57.0) (2022-08-08)
+
+
+### Features
+
+* **aw-bottom-bar:** action button added ([0071a22](https://github.com/awes-io/client/commit/0071a22e28e3dc92976d05f5d36bd5b9f671fa46))
+
+
+
+
+
 ## [2.56.7](https://github.com/awes-io/client/compare/@awes-io/ui@2.56.6...@awes-io/ui@2.56.7) (2022-07-20)
 
 

package/assets/css/components/icon-menu-item.css

@@ -23,6 +23,10 @@
             overflow: hidden;
             padding: theme('spacing.2') theme('spacing.1') theme('spacing.1');
         }
+
+        &--small {
+            padding: theme('spacing.2') theme('spacing.1');
+        }
     }
 
     &__icon-badge {

package/assets/css/components/notification.css

@@ -52,10 +52,10 @@
 
     /* default */
     right: 0;
-    bottom: 0;
+    bottom: env(safe-area-inset-bottom, 0px);
 
     &_top {
-        top: 0;
+        top: env(safe-area-inset-top, 0px);
         bottom: auto;
     }
 

package/assets/js/icons/mono.js

@@ -8,6 +8,8 @@ export default {
     user:
         'M13.2 11.1c-1 0-1.5.6-3.2.6-1.7 0-2.1-.6-3.2-.6A4.7 4.7 0 002.1 16v1.4c0 1 .8 1.7 1.7 1.7h12.4c1 0 1.7-.8 1.7-1.7v-1.5c0-2.6-2.1-4.7-4.7-4.7zm3.6 6.2c0 .3-.3.6-.6.6H3.8a.6.6 0 01-.5-.6v-1.5c0-2 1.6-3.6 3.5-3.6.7 0 1.4.6 3.2.6 1.8 0 2.5-.6 3.2-.6 2 0 3.6 1.7 3.6 3.7v1.4zM10 10a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0-7.9A3.4 3.4 0 1110 9 3.4 3.4 0 0110 2z',
     menu: 'M1 11V9h18v2H1zm0-6V3h18v2H1zm0 12v-2h18v2H1z',
+    'menu-dots':
+        'M5.46 7.13a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.67 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Zm7.49-7.48a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.66 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Z',
     search:
         'M18.8 17.7l-4.3-4.3a7.6 7.6 0 10-1 1l4.2 4.4c.3.3.8.3 1 0 .4-.3.4-.8 0-1zm-10.2-3a6 6 0 110-12.2 6 6 0 010 12.2z',
     eye:

package/components/3_organisms/AwBottomBar.vue

@@ -13,7 +13,8 @@
         <slot name="bottom-bar-toggler">
             <AwMenuItemIcon
                 :text="$t('aw.bottom_bar.menu')"
-                icon="menu"
+                icon="menu-dots"
+                :size="$options.ICON_SIZE"
                 @click="$store.commit('awesIo/TOGGLE_MOBILE_MENU')"
             >
                 <template #default="{ text }">
@@ -22,9 +23,9 @@
                         tabindex="-1"
                     >
                         <AwIconSystemMono
-                            name="menu"
+                            name="menu-dots"
                             class="aw-icon-menu-item__icon"
-                            size="24"
+                            :size="$options.ICON_SIZE"
                         />
                     </span>
                     <span class="aw-icon-menu-item__text">
@@ -40,6 +41,12 @@
 import { viewOr, lensProp, omit } from 'rambdax'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 
+const VISIBLE_ITEMS_COUNT = 4
+
+const ICON_SIZE = 28
+
+const ACTION_ICON_SIZE = 36
+
 export default {
     name: 'AwBottomBar',
 
@@ -47,6 +54,8 @@ export default {
         AwMenuItemIcon
     },
 
+    ICON_SIZE,
+
     inject: {
         layoutProvider: {
             default: null
@@ -54,6 +63,30 @@ export default {
     },
 
     computed: {
+        actionButton() {
+            const button = this.$store.state.awesIo.bottomBarAction
+
+            if (!button) {
+                return null
+            }
+
+            let result = { ...button, hideText: true }
+
+            if (!button.href || (button.listeners && !button.listeners.click)) {
+                result = {
+                    ...button,
+                    listeners: {
+                        ...button.listeners,
+                        click: this.$root.$emit(
+                            'awes-io::bottom-bar-action:click'
+                        )
+                    }
+                }
+            }
+
+            return result
+        },
+
         showMenu() {
             return (
                 this.$scopedSlots['bottom-bar-items'] ||
@@ -66,8 +99,18 @@ export default {
 
         items() {
             const items = viewOr([], lensProp('mainMenu'), this.layoutProvider)
+            const itemsCount = VISIBLE_ITEMS_COUNT - (this.actionButton ? 1 : 0)
+            const visibleItems = items.slice(0, itemsCount)
+
+            if (this.actionButton) {
+                visibleItems.splice(
+                    Math.ceil(itemsCount / 2),
+                    0,
+                    this.actionButton
+                )
+            }
 
-            return items.slice(0, 4)
+            return visibleItems
         },
 
         activeMenu() {
@@ -77,7 +120,10 @@ export default {
 
     methods: {
         _pickItemProps(props) {
-            return omit('children,listeners', props)
+            return {
+                ...omit('children,listeners', props),
+                size: props.hideText ? ACTION_ICON_SIZE : ICON_SIZE
+            }
         }
     }
 }

package/components/5_layouts/_AwLayoutMenu.vue

@@ -124,7 +124,7 @@ export default {
 
     methods: {
         _getMenuItemProps(props) {
-            return omit('children,description', props)
+            return omit('children,description,hideText', props)
         }
     }
 }

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -14,13 +14,17 @@
                 v-tooltip:right="
                     tooltip ? { content: text, offset: [0, -6] } : null
                 "
-                :class="{ 'aw-icon-menu-item__icon-block--clip': !tooltip }"
+                :class="{
+                    'aw-icon-menu-item__icon-block--clip':
+                        !tooltip && !hideText,
+                    'aw-icon-menu-item__icon-block--small': !tooltip && hideText
+                }"
                 class="aw-icon-menu-item__icon-block"
                 tabindex="-1"
             >
                 <AwIcon
                     :name="(active && iconActive) || icon"
-                    size="24"
+                    :size="size"
                     :class="{
                         'aw-icon-menu-item__icon--highlight': active
                     }"
@@ -41,6 +45,7 @@
                 </span>
             </span>
             <span
+                v-if="!hideText"
                 v-show="!tooltip"
                 class="aw-icon-menu-item__text"
                 :class="{
@@ -50,6 +55,7 @@
                 {{ text }}
                 <AwIconSystemMono v-if="_linkExternal" name="external" />
             </span>
+            <span v-if="hideText" class="sr-only">{{ text }}</span>
         </slot>
     </Component>
 </template>
@@ -83,10 +89,17 @@ export default {
             default: ''
         },
 
+        size: {
+            type: [String, Number],
+            default: 24
+        },
+
         active: Boolean,
 
         tooltip: Boolean,
 
+        hideText: Boolean,
+
         badge: {
             type: Object,
             default: null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.56.7",
+    "version": "2.58.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "086397c15d22572a84a25863ae3bccc633016a42"
+    "gitHead": "50a0c95ae90eb488c21b2ee75055dfeb4b36f8db"
 }

package/store/awesIo.js

@@ -39,6 +39,7 @@ export const state = () => ({
     mobileMenuOpened: false,
     beforeMobileMenu: null,
     afterMobileMenu: null,
+    bottomBarAction: null,
 
     headerNotification: null,
 
@@ -226,6 +227,14 @@ export const mutations = {
         if (payload && payload.component) {
             state.afterMobileMenu = payload.component
         }
+    },
+
+    SET_BOTTOM_BAR_ACTION(state, payload) {
+        if (isType('Object', payload)) {
+            state.bottomBarAction = payload
+        } else {
+            state.bottomBarAction = null
+        }
     }
 }