@awes-io/ui 2.63.6 → 2.65.1

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.65.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.65.0...@awes-io/ui@2.65.1) (2023-07-06)
+
+
+### Bug Fixes
+
+* **aw-tab-nav:** else key fixed ([fac9f72](https://github.com/awes-io/client/commit/fac9f7214606540f95fa8aa5e57782b7ad837a10))
+
+
+
+
+
+# [2.65.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.64.0...@awes-io/ui@2.65.0) (2023-07-06)
+
+
+### Bug Fixes
+
+* tooltip shown on pointer events ([a1827a1](https://github.com/awes-io/client/commit/a1827a142e5b823ba526bce0e90ccf7a5a36dc20))
+
+
+### Features
+
+* **aw-tab-nav:** icons added ([eb1c876](https://github.com/awes-io/client/commit/eb1c87634e47f7ca15593fd82fb5d685ffa4e9b6))
+
+
+
+
+
+# [2.64.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.63.6...@awes-io/ui@2.64.0) (2023-06-27)
+
+
+### Features
+
+* tertiary menu added ([3c0d425](https://github.com/awes-io/client/commit/3c0d42598a9b628eeb5b347d76a8538902623e0f))
+
+
+
+
+
 ## [2.63.6](https://github.com/awes-io/client/compare/@awes-io/ui@2.63.5...@awes-io/ui@2.63.6) (2023-06-27)
 
 

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

@@ -4,6 +4,7 @@
     justify-content: center;
     align-items: center;
     color: inherit;
+    width: 100%;
 
     position: relative;
 

package/assets/css/components/layout-menu.css

@@ -4,13 +4,14 @@
 
     display: grid;
     grid-template-columns: 60px auto;
-    grid-template-rows: 80px auto auto 80px;
+    grid-template-rows: 80px minmax(0, 2fr) minmax(0, 1fr) 80px minmax(0, auto);
 
     z-index: 1;
 
     &__logo,
     &__aw-user-menu {
-        display: block;
+        display: flex;
+        justify-content: center;
         width: 100%;
         padding: theme('spacing.3');
         margin: auto 0;
@@ -57,7 +58,7 @@
         max-height: 100vh;
 
         grid-column: 2;
-        grid-row: 1 / 5;
+        grid-row: 1 / 6;
 
         overflow-y: auto;
 

package/components/1_atoms/AwIcon/AwIcon.vue

@@ -12,6 +12,11 @@ export default {
             required: true
         },
 
+        color: {
+            type: String,
+            default: ''
+        },
+
         viewBox: {
             type: String,
             default: null
@@ -23,7 +28,7 @@ export default {
         }
     },
 
-    render(h, { props: { name, size, viewBox }, data }) {
+    render(h, { props: { name, color, size, viewBox }, data }) {
         const attrs = data.attrs || {}
 
         return name
@@ -38,7 +43,9 @@ export default {
                               !size && isNil(attrs.width) && isNil(attrs.height)
                       }
                   ],
-                  style: [data.style, data.staticStyle],
+                  style: [data.style, data.staticStyle].concat(
+                      color ? { fill: `var(--c-${color})` } : []
+                  ),
                   attrs: {
                       'aria-hidden': true,
                       width: size || null,

package/components/2_molecules/AwTabNav.vue

@@ -15,31 +15,59 @@
                     :href="isDisabled ? null : route.fullPath"
                     :class="[
                         _cssClasses.toggler,
-                        { [_cssClasses.togglerActive]: isActive },
-                        { [_cssClasses.togglerDisabled]: isDisabled }
+                        {
+                            [_cssClasses.togglerActive]: isActive,
+                            [_cssClasses.togglerDisabled]: isDisabled,
+                            [_cssClasses.togglerNoText]: item.hideText
+                        }
                     ]"
                     @click.prevent="navigate(route)"
                 >
                     <span tabindex="-1">
-                        {{ text }}
-                        <AwBadge v-if="item.badge" v-bind="item.badge" />
+                        <AwIcon
+                            v-if="item.icon"
+                            v-bind="_toIconProps(item.icon)"
+                            :class="{ 'mr-1': !item.hideText }"
+                        />
+                        <span v-if="item.hideText" class="sr-only">
+                            {{ text }}
+                        </span>
+                        <template v-else>{{ text }}</template>
+                        <AwBadge
+                            v-if="item.badge"
+                            v-bind="_toBadgeProps(item.badge)"
+                        />
                     </span>
                 </a>
                 <button
                     v-else
-                    :key="key"
+                    :key="'btn-' + key"
                     :class="[
                         _cssClasses.toggler,
-                        { [_cssClasses.togglerActive]: isActive },
-                        { [_cssClasses.togglerDisabled]: isDisabled }
+                        {
+                            [_cssClasses.togglerActive]: isActive,
+                            [_cssClasses.togglerDisabled]: isDisabled,
+                            [_cssClasses.togglerNoText]: item.hideText
+                        }
                     ]"
                     :disabled="isDisabled ? '' : null"
                     type="button"
                     @click.prevent="update(i)"
                 >
                     <span tabindex="-1">
-                        {{ text }}
-                        <AwBadge v-if="item.badge" v-bind="item.badge" />
+                        <AwIcon
+                            v-if="item.icon"
+                            v-bind="_toIconProps(item.icon)"
+                            :class="{ 'mr-1': !item.hideText }"
+                        />
+                        <span v-if="item.hideText" class="sr-only">
+                            {{ text }}
+                        </span>
+                        <template v-else>{{ text }}</template>
+                        <AwBadge
+                            v-if="item.badge"
+                            v-bind="_toBadgeProps(item.badge)"
+                        />
                     </span>
                 </button>
             </slot>
@@ -115,7 +143,8 @@ export default {
                     'wrapper',
                     'toggler',
                     'toggler_active',
-                    'toggler_disabled'
+                    'toggler_disabled',
+                    'toggler_no_text'
                 ])
             }
         },
@@ -233,6 +262,14 @@ export default {
             }
 
             return equals(currentParams, route.query)
+        },
+
+        _toBadgeProps(props) {
+            return isType('Object', props) ? props : { text: props }
+        },
+
+        _toIconProps(props) {
+            return isType('Object', props) ? props : { name: props }
         }
     }
 }

package/components/5_layouts/AwLayoutProvider.vue

@@ -85,6 +85,7 @@ export default {
                 mainMenu: [],
                 secondaryMenu: [],
                 userMenu: [],
+                tertiaryMenu: [],
                 activeMenu: null,
                 activeMenuItem: null
             }
@@ -92,7 +93,12 @@ export default {
     },
 
     computed: {
-        ...mapGetters('awesIo', ['mainMenu', 'secondaryMenu', 'userMenu']),
+        ...mapGetters('awesIo', [
+            'mainMenu',
+            'secondaryMenu',
+            'userMenu',
+            'tertiaryMenu'
+        ]),
 
         // _flatChildren() {
         //     const items = []
@@ -124,6 +130,10 @@ export default {
 
         _userMenu() {
             return this._toMenuItems(this.userMenu)
+        },
+
+        _tertiaryMenu() {
+            return this._toMenuItems(this.tertiaryMenu)
         }
     },
 
@@ -155,6 +165,15 @@ export default {
             immediate: true
         },
 
+        _tertiaryMenu: {
+            handler(items) {
+                this.$set(this.layoutProvider, 'tertiaryMenu', items)
+                this._findActive()
+            },
+            deep: true,
+            immediate: true
+        },
+
         '$route.path': {
             handler: '_findActive',
             immediate: true

package/components/5_layouts/_AwLayoutMenu.vue

@@ -22,6 +22,7 @@
                         v-else
                         :key="i"
                         v-bind="_getMenuItemProps(item)"
+                        v-on="_getMenuItemListeners(item)"
                         :active="item === activeMenu"
                         tooltip
                     />
@@ -38,6 +39,7 @@
                         v-else
                         :key="i"
                         v-bind="_getMenuItemProps(item)"
+                        v-on="_getMenuItemListeners(item)"
                         :active="item === activeMenu"
                         tooltip
                     />
@@ -48,6 +50,23 @@
         <!-- user menu -->
         <AwUserMenu class="aw-layout-menu__aw-user-menu" />
 
+        <div class="aw-layout-menu__tertiary-menu">
+            <slot name="tertiary-menu">
+                <template v-for="(item, i) in tertiaryMenu">
+                    <!-- eslint-disable-next-line vue/require-component-is -->
+                    <Component v-if="item.is" :key="'cmp-' + i" v-bind="item" />
+                    <AwMenuItemIcon
+                        v-else
+                        :key="i"
+                        v-bind="_getMenuItemProps(item)"
+                        v-on="_getMenuItemListeners(item)"
+                        :active="item === activeMenu"
+                        tooltip
+                    />
+                </template>
+            </slot>
+        </div>
+
         <!-- submenu -->
         <div
             class="aw-layout-menu__submenu"
@@ -98,6 +117,10 @@ export default {
             return viewOr([], lensProp('secondaryMenu'), this.layoutProvider)
         },
 
+        tertiaryMenu() {
+            return viewOr(null, lensProp('tertiaryMenu'), this.layoutProvider)
+        },
+
         activeMenu() {
             return viewOr(null, lensProp('activeMenu'), this.layoutProvider)
         },
@@ -123,7 +146,11 @@ export default {
 
     methods: {
         _getMenuItemProps(props) {
-            return omit('children,description,hideText', props)
+            return omit('children,description,hideText,listeners', props)
+        },
+
+        _getMenuItemListeners(props) {
+            return props.listeners || {}
         }
     }
 }

package/components/5_layouts/_AwMobileMenu.vue

@@ -118,6 +118,14 @@
             @click:submenu="showSubmenu"
         />
 
+        <AwMobileMenuNav
+            v-show="!submenuOpened"
+            :title="$t('Tertiary menu')"
+            :items="tertiaryMenu"
+            class="aw-mobile-menu__menu"
+            @click:submenu="showSubmenu"
+        />
+
         <!-- submenu -->
         <template v-for="({ text, children, badge }, i) in submenu">
             <AwMobileMenuNav
@@ -215,6 +223,14 @@ export default {
             )
         },
 
+        tertiaryMenu() {
+            return viewOr(
+                [],
+                lensProp('tertiaryMenu'),
+                this.layoutProvider
+            ).filter(({ is }) => !is)
+        },
+
         show: {
             get() {
                 return this.$store.state.awesIo.mobileMenuOpened

package/directives/tooltip.js

@@ -52,11 +52,11 @@ function hideTooltip() {
 
 const EVENTS = [
     {
-        names: ['mouseenter', 'focus'],
+        names: ['pointerenter', 'focus'],
         handler: showTooltip
     },
     {
-        names: ['mouseleave', 'blur'],
+        names: ['pointerleave', 'blur'],
         handler: hideTooltip
     }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.63.6",
+    "version": "2.65.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "13c51e132ed92120d6118f3c4daa59005a6a42f8"
+    "gitHead": "731b4fa90b1988fd90818a041a3a30ba09509057"
 }

package/store/awesIo.js

@@ -34,7 +34,8 @@ export const state = () => ({
     menus: {
         main: [],
         secondary: [],
-        user: []
+        user: [],
+        tertiary: []
     },
     mobileMenuOpened: false,
     beforeMobileMenu: null,
@@ -59,6 +60,10 @@ export const getters = {
         return castArray(state.menus.user)
     },
 
+    tertiaryMenu(state) {
+        return castArray(state.menus.tertiary)
+    },
+
     user(state, getters, rootState) {
         const user = pathOr({}, 'auth.user', rootState)
         const src = pathOr('', 'avatar', user)

package/dist/css/aw-icons.css

@@ -1,168 +0,0 @@
-@font-face {
-    font-family: "aw-icons";
-    src: url("/fonts/aw-icons.woff2?b289fd926b2ed5447880ea85815122b1") format("woff2"),
-url("/fonts/aw-icons.woff?b289fd926b2ed5447880ea85815122b1") format("woff");
-}
-
-.aw-icon {
-    display: inline-block;
-    line-height: 1;
-    overflow: hidden;
-    vertical-align: middle;
-    text-align: center;
-}
-
-.aw-icon:before {
-    font-family: aw-icons !important;
-    font-style: normal;
-    font-weight: normal !important;
-    vertical-align: top;
-}
-
-.aw-icon-arrow-d:before {
-    content: "\f101";
-}
-.aw-icon-arrow-l:before {
-    content: "\f102";
-}
-.aw-icon-arrow-r:before {
-    content: "\f103";
-}
-.aw-icon-arrow-u:before {
-    content: "\f104";
-}
-.aw-icon-bold:before {
-    content: "\f105";
-}
-.aw-icon-briefcase:before {
-    content: "\f106";
-}
-.aw-icon-burger:before {
-    content: "\f107";
-}
-.aw-icon-check-circle:before {
-    content: "\f108";
-}
-.aw-icon-check-solid:before {
-    content: "\f109";
-}
-.aw-icon-check:before {
-    content: "\f10a";
-}
-.aw-icon-chevron-d:before {
-    content: "\f10b";
-}
-.aw-icon-chevron-l:before {
-    content: "\f10c";
-}
-.aw-icon-chevron-r:before {
-    content: "\f10d";
-}
-.aw-icon-chevron-u:before {
-    content: "\f10e";
-}
-.aw-icon-circle:before {
-    content: "\f10f";
-}
-.aw-icon-close-circle:before {
-    content: "\f110";
-}
-.aw-icon-close-solid:before {
-    content: "\f111";
-}
-.aw-icon-close:before {
-    content: "\f112";
-}
-.aw-icon-copy:before {
-    content: "\f113";
-}
-.aw-icon-drag:before {
-    content: "\f114";
-}
-.aw-icon-external:before {
-    content: "\f115";
-}
-.aw-icon-eye-no:before {
-    content: "\f116";
-}
-.aw-icon-eye:before {
-    content: "\f117";
-}
-.aw-icon-font-size:before {
-    content: "\f118";
-}
-.aw-icon-graph:before {
-    content: "\f119";
-}
-.aw-icon-intelligence:before {
-    content: "\f11a";
-}
-.aw-icon-italic:before {
-    content: "\f11b";
-}
-.aw-icon-loader:before {
-    content: "\f11c";
-}
-.aw-icon-location:before {
-    content: "\f11d";
-}
-.aw-icon-minus:before {
-    content: "\f11e";
-}
-.aw-icon-more-v:before {
-    content: "\f11f";
-}
-.aw-icon-more:before {
-    content: "\f120";
-}
-.aw-icon-plus-solid:before {
-    content: "\f121";
-}
-.aw-icon-plus:before {
-    content: "\f122";
-}
-.aw-icon-quote:before {
-    content: "\f123";
-}
-.aw-icon-schedule:before {
-    content: "\f124";
-}
-.aw-icon-search:before {
-    content: "\f125";
-}
-.aw-icon-settings:before {
-    content: "\f126";
-}
-.aw-icon-speaker:before {
-    content: "\f127";
-}
-.aw-icon-speed:before {
-    content: "\f128";
-}
-.aw-icon-storage:before {
-    content: "\f129";
-}
-.aw-icon-triangle-d:before {
-    content: "\f12a";
-}
-.aw-icon-triangle-l:before {
-    content: "\f12b";
-}
-.aw-icon-triangle-r:before {
-    content: "\f12c";
-}
-.aw-icon-triangle-solid-r:before {
-    content: "\f12d";
-}
-.aw-icon-triangle-u:before {
-    content: "\f12e";
-}
-.aw-icon-upload:before {
-    content: "\f12f";
-}
-.aw-icon-user-solid:before {
-    content: "\f130";
-}
-.aw-icon-user:before {
-    content: "\f131";
-}