@awes-io/ui 2.91.1 → 2.93.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.93.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.92.0...@awes-io/ui@2.93.0) (2024-02-01)
+
+
+### Bug Fixes
+
+* release fixes ([fae62d8](https://github.com/awes-io/client/commit/fae62d8883f56900794dfe54d1c433b10700cb74))
+
+
+### Features
+
+* add header slot for modal ([65b06f9](https://github.com/awes-io/client/commit/65b06f95372628dac9e8a39523219297550f4eed))
+
+
+
+
+
+# [2.92.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.91.1...@awes-io/ui@2.92.0) (2024-01-29)
+
+
+### Bug Fixes
+
+* **aw-modal:** remove get param if non closable ([3a591b5](https://github.com/awes-io/client/commit/3a591b502a12fda867c22e60e5c12e1464716207))
+
+
+### Features
+
+* add btn for close mobile select ([b590540](https://github.com/awes-io/client/commit/b590540cc235075dfd9071ba0be42e57bd610a65))
+* add props for not closing modal ([00bd65c](https://github.com/awes-io/client/commit/00bd65c7741ec12b1314c15158cbd3d57c40e7b9))
+* create page for mobile menu ([9b9b80a](https://github.com/awes-io/client/commit/9b9b80a67f97b6126e6196ffbcb862d4629df0a3))
+
+
+
+
+
 ## [2.91.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.91.0...@awes-io/ui@2.91.1) (2024-01-25)
 
 

package/assets/css/components/_index.css

@@ -63,8 +63,8 @@
 @import './layout-menu.css';
 @import './mobile-menu-nav.css';
 @import './mobile-menu-item.css';
-@import './mobile-menu-item-new.css';
 @import './mobile-menu.css';
+@import './more.css';
 @import './icon-menu-item.css';
 @import './user-menu.css';
 @import './nav.css';

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

@@ -12,16 +12,12 @@
         padding: 0;
     }
 
-    &__toggler,
-    &__toggler > span {
-        @apply text-mono-400;
+    &__toggler {
+        @apply bg-mono-900 text-mono-400;
+
         display: flex;
         align-items: center;
         justify-content: center;
-    }
-
-    &__toggler {
-        @apply bg-mono-900;
 
         position: relative;
         white-space: nowrap;
@@ -50,17 +46,20 @@
     }
 
     &__toggler > span {
+        @apply text-mono-400;
+
         display: flex;
         align-items: center;
         justify-content: center;
 
-        height: 2.75rem;
+        min-height: 2.75rem;
         min-width: 6.25rem;
+        height: 100%;
         width: 100%;
         border-radius: 0.5rem;
 
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
     }
 
     &__toggler:focus,
@@ -139,19 +138,6 @@
         }
     }
 
-    &__arrow-btn.aw-button.theme-ghost {
-        align-items: center;
-
-        width: 2.5rem;
-        height: 2.5rem;
-
-        border-radius: 0.625rem;
-
-        .aw-button__overlay {
-            border-radius: 0.625rem;
-        }
-    }
-
     &--pagination {
         .aw-button-nav {
             &__toggler {
@@ -169,7 +155,7 @@
                 }
 
                 & > span {
-                    height: 2.375rem;
+                    min-height: 2.375rem;
                     border-radius: 0.5625rem;
                     min-width: 0;
                     width: 2.6rem;
@@ -221,7 +207,7 @@
 
             & > span {
                 border-radius: 0.5rem;
-                height: 2.25rem;
+                min-height: 2.25rem;
             }
         }
 

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

@@ -4,7 +4,6 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 1rem 1.5rem;
 
     &:hover,
     &:focus {
@@ -13,24 +12,16 @@
     }
 
     &--active {
-        color: var(--c-accent);
+        color: var(--c-mono-100);
         font-weight: bold;
-    }
 
-    &__icon-bg {
-        border-radius: 0.3125rem;
-        line-height: 1;
-        flex: none;
+        .aw-mobile-menu-item__icon-bg {
+            color: var(--c-mono-100);
+        }
     }
 
-    /* &__icon {} */
-
-    &__text {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: 0 1rem;
-        flex-grow: 1;
+    &__icon-bg {
+        color: var(--c-mono-300);
     }
 
     &__description {
@@ -42,4 +33,52 @@
     &__arrow {
         flex: none;
     }
+
+    &--primary {
+        padding: 1rem 1.5rem;
+
+        .aw-mobile-menu-item {
+            &__icon-bg {
+                border-radius: 0.3125rem;
+                line-height: 1;
+                flex: none;
+            }
+
+            &__text {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 0 1rem;
+                flex-grow: 1;
+            }
+        }
+    }
+
+    &--island {
+        padding: 1.5rem;
+        border-radius: 1.25rem;
+
+        .aw-mobile-menu-item {
+            &__icon-bg {
+                margin-right: 1rem;
+                align-self: start;
+            }
+
+            &__text {
+                font-size: 1rem;
+                line-height: 1.5rem;
+                margin-right: 1rem;
+            }
+
+            &__description {
+                display: block;
+                font-weight: 400;
+                margin-top: 0.25rem;
+            }
+
+            &__arrow {
+                margin-left: auto;
+            }
+        }
+    }
 }

package/assets/css/components/mobile-menu-nav.css

@@ -7,7 +7,7 @@
         line-height: 1rem;
         font-weight: bold;
         padding: 0 1.5rem;
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
     }
 
     ol, ul {
@@ -34,7 +34,7 @@
         }
     }
 
-    li + li .aw-mobile-menu-item-new {
+    li + li .aw-mobile-menu-item--island {
         position: relative;
         margin-top: 0.125rem;
     }

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

@@ -115,6 +115,7 @@
         padding: 0.8125rem 1.5rem;
 
         &-icon {
+            color: var(--c-mono-300);
             margin-right: 1rem;
         }
 

package/assets/css/components/modal.css

@@ -57,17 +57,17 @@ $modal-aside-width-large: 75vw;
     }
 
     &__close {
-        margin-left: auto;
         width: 3rem;
         height: 3rem;
     }
 
     &__title {
-        @apply m-0 pr-6 text-left leading-tight font-heading truncate;
+        @apply my-0 ml-0 pr-6 text-left leading-tight font-heading truncate;
 
         font-size: 1.25rem;
         line-height: 1.5rem;
         font-weight: 700;
+        margin-right: auto;
     }
 
     &__subtitle {

package/assets/css/components/more.css

@@ -0,0 +1,48 @@
+.aw-more {
+    @apply bg-page-bg;
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: calc(5rem + var(--page-buttons-bottom, 0px));
+
+    &__profile {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        background: var(--c-surface);
+        border-radius: 0 0 0.9375rem 0.9375rem;
+        padding: 1.9375rem 1.5rem 1.5rem;
+    }
+
+    &__theme {
+        @apply bg-surface;
+
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        padding: 0.8125rem 1.5rem;
+
+        &-icon {
+            color: var(--c-mono-300);
+            margin-right: 1rem;
+        }
+
+        &-text {
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.3125rem;
+        }
+
+        &-switcher {
+            margin-left: auto;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            .aw-switch-field__switch {
+                margin: 0.1875rem;
+            }
+        }
+    }
+}

package/assets/css/components/page-single.css

@@ -61,6 +61,10 @@
         &--reverse {
             order: -1;
         }
+
+        &--column:empty {
+            display: none;
+        }
     }
 
     &__top-scroll-mark {

package/assets/css/components/select.css

@@ -66,6 +66,11 @@
             width: 100%;
             max-height: 1px;
         } */
+
+        .aw-text-field__prefix {
+            background: transparent;
+            padding-left: 0.25rem;
+        }
     }
 
     &__notify {
@@ -85,7 +90,7 @@
     &__mobile-input {
         position: sticky;
         top: 0;
-        
+
         &.opened,
         & .aw-text-field__element {
             border-bottom-left-radius: 0;
@@ -109,6 +114,11 @@
         &.opened .aw-text-field__label {
             left: 1rem;
         }
+
+        .aw-text-field__prefix {
+            background: transparent;
+            padding-left: 0.25rem;
+        }
     }
 
     &--mobile-opened .aw-select__dropdown {

package/assets/js/router.js

@@ -79,3 +79,24 @@ export function getLayout(context) {
 
     return 'default'
 }
+
+/**
+ * Merges vue-router routes recursively
+ * @param {Array} existingRoutes 
+ * @param {Array} newRoutes 
+ */
+export function mergeRoutes(existingRoutes, newRoutes) {
+    newRoutes.forEach(newRoute => {
+        const existing = existingRoutes.find(
+            ({ path }) => path === newRoute.path
+        )
+
+        if (existing && existing.children) {
+            return mergeRoutes(existing.children, newRoute.children)
+        }
+
+        if (!existing) {
+            existingRoutes.push(newRoute)
+        }
+    })
+}

package/components/2_molecules/AwSelect.vue

@@ -138,6 +138,14 @@
                 autocomplete="off"
                 @input="_applySearch"
             >
+                <template #prefix>
+                    <AwButton color="mono" v-if="isOpened" @click="_close">
+                        <template #icon>
+                            <AwIconSystemMono name="arrow" />
+                        </template>
+                    </AwButton>
+                </template>
+
                 <template #icon>
                     <AwButton
                         v-if="_isCreateButton"

package/components/2_molecules/AwSelectObject.vue

@@ -151,15 +151,15 @@
                         @clear="clear"
                     >
                         <template #prefix>
-                            <slot
-                                name="icon"
-                                v-bind="{
-                                    option: value,
-                                    optionLabel: _selectedLabel,
-                                    isLoading,
-                                    isOpened
-                                }"
-                            ></slot>
+                            <AwButton
+                                color="mono"
+                                v-if="isOpened"
+                                @click="close"
+                            >
+                                <template #icon>
+                                    <AwIconSystemMono name="arrow" />
+                                </template>
+                            </AwButton>
                         </template>
 
                         <template #caret="data">

package/components/3_organisms/AwBottomBar.vue

@@ -15,7 +15,8 @@
                 :text="$t('Menu')"
                 icon="menu-dots"
                 :size="$options.ICON_SIZE"
-                @click="$store.commit('awesIo/TOGGLE_MOBILE_MENU')"
+                href="/more"
+                :active="!activeMenu"
             >
                 <template #default="{ text }">
                     <span
@@ -42,7 +43,7 @@
 import { viewOr, lensProp, omit } from 'rambdax'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 
-const VISIBLE_ITEMS_COUNT = 4
+export const VISIBLE_ITEMS_COUNT = 4
 
 const ICON_SIZE = 28
 

package/components/3_organisms/AwModal.vue

@@ -23,22 +23,29 @@
                 <div :class="elClasses.dialog" role="document">
                     <!-- header -->
                     <div ref="header" tabindex="-1" :class="elClasses.header">
-                        <div :class="elClasses.title">
-                            {{ title }}
-                        </div>
-
-                        <AwButton
-                            :class="elClasses.close"
-                            :title="$t('Close')"
-                            :aria-label="$t('Close')"
-                            color="mono-light"
-                            tabindex="0"
-                            @click.prevent="close()"
-                        >
-                            <template #icon>
-                                <AwIconSystemMono name="close" size="16" />
-                            </template>
-                        </AwButton>
+                        <slot name="header" :title="title" :close="close">
+                            <slot name="before-title" />
+
+                            <div :class="elClasses.title">
+                                {{ title }}
+                            </div>
+
+                            <slot name="after-title" />
+
+                            <AwButton
+                                v-if="!notClosing"
+                                :class="elClasses.close"
+                                :title="$t('Close')"
+                                :aria-label="$t('Close')"
+                                color="mono-light"
+                                tabindex="0"
+                                @click.prevent="close()"
+                            >
+                                <template #icon>
+                                    <AwIconSystemMono name="close" size="16" />
+                                </template>
+                            </AwButton>
+                        </slot>
                     </div>
                     <!-- / header -->
 
@@ -133,6 +140,8 @@ export default {
             }
         },
 
+        notClosing: Boolean,
+
         name: {
             type: String,
             default: () => `modal-${_uniqModalId++}`
@@ -206,6 +215,10 @@ export default {
         },
 
         paramComputed() {
+            if (this.notClosing) {
+                return null
+            }
+
             switch (typeof this.param) {
                 case 'string':
                     return this.param || DEFAULT_GET_PARAM
@@ -245,9 +258,15 @@ export default {
                 if (typeof document === 'undefined') return
                 this.lastFocused = document.activeElement
                 this.$nextTick(() => this.$refs.header.focus())
-                window.addEventListener('keyup', this._escButtonHandler)
+
+                if (!this.notClosing) {
+                    window.addEventListener('keyup', this._escButtonHandler)
+                }
             } else {
-                window.removeEventListener('keyup', this._escButtonHandler)
+                if (!this.notClosing) {
+                    window.removeEventListener('keyup', this._escButtonHandler)
+                }
+
                 if (this.lastFocused) {
                     this.lastFocused.focus()
                     this.lastFocused = null // clear reference
@@ -293,7 +312,7 @@ export default {
         },
 
         selfClose() {
-            if (this.fullscreen || !this.bgClickClose) return
+            if (this.fullscreen || !this.bgClickClose || this.notClosing) return
             let self = this
             window.addEventListener('mouseup', function onUp(e) {
                 window.removeEventListener('mouseup', onUp)

package/components/4_pages/_AwPageHeadline.vue

@@ -7,9 +7,8 @@
                     v-if="backUrl || isMenuToggler"
                     class="aw-page-headline__back"
                     color="mono"
-                    :href="backUrl"
+                    :href="backUrl || '/more'"
                     :aria-label="isMenuToggler ? $t('Menu') : breadcrumb.title"
-                    v-on="isMenuToggler ? { click: openMenu } : null"
                 >
                     <template #icon>
                         <AwIconSystemMono name="arrow" />
@@ -134,12 +133,6 @@ export default {
         isMenuToggler() {
             return !this.backUrl && !this.$screen.lg && this.breadcrumbMenu
         }
-    },
-
-    methods: {
-        openMenu() {
-            this.$store.commit('awesIo/TOGGLE_MOBILE_MENU', true)
-        }
     }
 }
 </script>

package/components/5_layouts/AwLayout.vue

@@ -1,13 +1,13 @@
 <template>
     <AwLayoutProvider class="aw-layout">
-        <AwMobileMenu v-if="!$screen.lg">
-            <template
-                v-for="(index, name) in $scopedSlots"
-                v-slot:[name]="data"
-            >
-                <slot :name="name" v-bind="data"></slot>
-            </template>
-        </AwMobileMenu>
+        <!--        <AwMobileMenu v-if="!$screen.lg">-->
+        <!--            <template-->
+        <!--                v-for="(index, name) in $scopedSlots"-->
+        <!--                v-slot:[name]="data"-->
+        <!--            >-->
+        <!--                <slot :name="name" v-bind="data"></slot>-->
+        <!--            </template>-->
+        <!--        </AwMobileMenu>-->
 
         <AwLayoutMenu v-if="$screen.lg" class="aw-layout__aw-layout-menu">
             <template
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import AwMobileMenu from '@AwLayouts/_AwMobileMenu.vue'
+// import AwMobileMenu from '@AwLayouts/_AwMobileMenu.vue'
 import AwLayoutMenu from '@AwLayouts/_AwLayoutMenu.vue'
 import AwHeaderNotification from '@AwLayouts/_AwHeaderNotification.vue'
 
@@ -33,7 +33,7 @@ export default {
     name: 'AwLayout',
 
     components: {
-        AwMobileMenu,
+        // AwMobileMenu,
         AwLayoutMenu,
         AwHeaderNotification
     }

package/components/5_layouts/_AwMobileMenu.vue

@@ -70,11 +70,12 @@
         >
             <template #default="{items, _getChildrenCount, isActive }">
                 <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
-                    <AwMobileMenuItemNew
+                    <AwMobileMenuItem
                         v-bind="item"
                         :href="_getChildrenCount(item) ? null : item.href"
                         :arrow="!!(item.href || _getChildrenCount(item))"
                         :active="isActive(item)"
+                        theme="island"
                         v-on="
                             _getChildrenCount(item)
                                 ? {
@@ -101,11 +102,12 @@
         >
             <template #default="{items, _getChildrenCount, isActive }">
                 <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
-                    <AwMobileMenuItemNew
+                    <AwMobileMenuItem
                         v-bind="item"
                         :href="_getChildrenCount(item) ? null : item.href"
                         :arrow="!!(item.href || _getChildrenCount(item))"
                         :active="isActive(item)"
+                        theme="isalnd"
                         v-on="
                             _getChildrenCount(item)
                                 ? {
@@ -214,7 +216,7 @@ 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'
 // import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
 
 export default {
@@ -223,7 +225,7 @@ export default {
     components: {
         AwMobileMenuNav,
         AwLayoutLogo: () => import('@AwLayouts/_AwLayoutLogo.vue'),
-        AwMobileMenuItemNew
+        AwMobileMenuItem
         // AwMobileMenuItem
     },
 

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -2,7 +2,11 @@
     <Component
         :is="_linkComponent"
         v-bind="_linkAttrs"
-        :class="{ 'aw-mobile-menu-item--active': active }"
+        :class="{
+            'aw-mobile-menu-item--active': active,
+            'aw-mobile-menu-item--primary': theme === 'primary',
+            'aw-mobile-menu-item--island': theme === 'island'
+        }"
         class="aw-mobile-menu-item focus-outline"
         v-on="$listeners"
     >
@@ -27,6 +31,13 @@
                     v-html="$sanitize(description)"
                     class="aw-mobile-menu-item__description"
                 ></span>
+
+                <span
+                    v-else-if="childrenDescription && theme === 'island'"
+                    class="aw-mobile-menu-item__description"
+                >
+                    {{ childrenDescription }}
+                </span>
             </span>
 
             <AwBadge v-if="badge" v-bind="badge" class="mr-2" />
@@ -35,13 +46,14 @@
                 v-if="_linkExternal"
                 name="external"
                 size="24"
-                class="aw-mobile-menu-item__arrow text-on-surface"
+                class="aw-mobile-menu-item__arrow text-mono-400"
             />
 
             <AwIconSystemMono
                 v-else-if="arrow"
                 name="angle"
                 rotate="180"
+                size="24"
                 class="aw-mobile-menu-item__arrow text-mono-400"
             />
         </slot>
@@ -67,11 +79,21 @@ export default {
             default: ''
         },
 
+        theme: {
+            type: String,
+            default: 'primary' // primary, island
+        },
+
         href: {
             type: [String, Object],
             default: ''
         },
 
+        children: {
+            type: Array,
+            default: () => []
+        },
+
         icon: {
             type: String,
             default: ''
@@ -105,6 +127,12 @@ export default {
                       color: '#fff'
                   }
                 : null
+        },
+
+        childrenDescription() {
+            const childrenText = this.children.map((item) => this.$t(item.text))
+
+            return childrenText.join(' • ')
         }
     }
 }

package/nuxt/index.js

@@ -11,6 +11,7 @@ import {
     notify as configNotify
 } from './awes.config.js'
 import defaultTailwindConfig from '../tailwind.config.js'
+import { mergeRoutes } from '../assets/js/router.js'
 
 const DEFAULT_DAYJS_LOCALE = 'en'
 
@@ -409,6 +410,15 @@ async function AwesIoUi() {
             })
         }
     })
+
+    this.nuxt.hook('build:extendRoutes', (routes = []) => {
+        mergeRoutes(routes, [
+            {
+                path: '/more',
+                component: resolve(__dirname, './pages/more.vue')
+            }
+        ])
+    })
 }
 
 AwesIoUi.meta = JSON.parse(

package/nuxt/pages/more.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="aw-more">
+        <div class="aw-more__profile" v-if="user">
+            <AwAvatar :src="user.src" :name="user.name" size="144" />
+
+            <AwHeadline tag="span" class="aw-more__profile-name mt-2">
+                {{ user.name }}
+            </AwHeadline>
+
+            <AwDescription
+                v-if="user.description"
+                tag="div"
+                class="aw-more__profile-description mt-2"
+            >
+                {{ user.description }}
+            </AwDescription>
+
+            <AwButton
+                class="mt-6 w-full"
+                :text="$t('Your profile')"
+                color="dark"
+                :href="profileUrl"
+            />
+        </div>
+
+        <slot name="before-mobile-menu">
+            <Component
+                v-if="beforeMobileMenuComponent"
+                :is="beforeMobileMenuComponent.is"
+                v-bind="beforeMobileMenuComponent.props"
+            />
+        </slot>
+
+        <AwMobileMenuNav :title="$t('More')" :items="mainMenu" class="mt-6">
+            <template #default="{items, _getChildrenCount, isActive }">
+                <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
+                    <AwMobileMenuItem
+                        v-bind="item"
+                        :href="item.href"
+                        theme="island"
+                        :arrow="!!(item.href || _getChildrenCount(item))"
+                        :active="isActive(item)"
+                        v-on="item.listeners"
+                    />
+                </li>
+            </template>
+        </AwMobileMenuNav>
+
+        <AwMobileMenuNav :items="secondaryMenu" class="mt-6">
+            <template #default="{items, _getChildrenCount, isActive }">
+                <li v-for="(item, i) in items" :key="i" v-show="!item.abstract">
+                    <AwMobileMenuItem
+                        v-bind="item"
+                        :href="item.href"
+                        theme="island"
+                        :arrow="!!(item.href || _getChildrenCount(item))"
+                        :active="isActive(item)"
+                        v-on="item.listeners"
+                    />
+                </li>
+            </template>
+        </AwMobileMenuNav>
+
+        <AwMobileMenuNav :items="userMenu" class="mt-6">
+            <template #before>
+                <div class="aw-more__theme">
+                    <AwIconSystemMono
+                        :size="24"
+                        class="aw-more__theme-icon"
+                        name="light"
+                    />
+
+                    <span class="aw-more__theme-text">{{
+                        $t('Dark theme')
+                    }}</span>
+
+                    <AwSwitcher
+                        v-model="isDarkTheme"
+                        class="aw-more__theme-switcher"
+                    />
+                </div>
+            </template>
+        </AwMobileMenuNav>
+
+        <AwMobileMenuNav :items="tertiaryMenu" class="my-6" />
+
+        <slot name="after-mobile-menu">
+            <Component
+                v-if="afterMobileMenuComponent"
+                :is="afterMobileMenuComponent.is"
+                v-bind="afterMobileMenuComponent.props"
+            />
+        </slot>
+
+        <AwBottomBar />
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { lensProp, pathOr, viewOr } from 'rambdax'
+
+import AwMobileMenuNav from '@AwLayouts/_AwMobileMenuNav.vue'
+import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
+import { VISIBLE_ITEMS_COUNT } from '@AwOrganisms/AwBottomBar.vue'
+
+export default {
+    name: 'More',
+
+    layout: 'empty',
+
+    inject: {
+        layoutProvider: {
+            default: null
+        }
+    },
+
+    components: {
+        AwMobileMenuNav,
+        AwMobileMenuItem
+    },
+
+    computed: {
+        ...mapGetters('awesIo', [
+            'user',
+            'logoComponent',
+            'afterMobileMenuComponent',
+            'beforeMobileMenuComponent',
+            'bottomBarAction'
+        ]),
+
+        profileUrl() {
+            return pathOr(null, 'awesIo.profileUrl', this.$store.state)
+        },
+
+        menuItemsStartIndex() {
+            return VISIBLE_ITEMS_COUNT - (this.bottomBarAction ? 2 : 1)
+        },
+
+        mainMenu() {
+            return viewOr([], lensProp('mainMenu'), this.layoutProvider).filter(
+                ({ is }) => !is
+            ).slice(this.menuItemsStartIndex)
+        },
+
+        secondaryMenu() {
+            return viewOr(
+                [],
+                lensProp('secondaryMenu'),
+                this.layoutProvider
+            ).filter(({ is }) => !is)
+        },
+
+        tertiaryMenu() {
+            return viewOr(
+                [],
+                lensProp('tertiaryMenu'),
+                this.layoutProvider
+            ).filter(({ is }) => !is)
+        },
+
+        userMenu() {
+            return viewOr([], lensProp('userMenu'), this.layoutProvider).filter(
+                ({ is }) => !is
+            )
+        },
+
+        isDarkTheme: {
+            get() {
+                return this.$store.getters['awesIo/isDarkTheme']
+            },
+
+            set(val) {
+                this.$store.commit('awesIo/SET_DARK_THEME', val)
+            }
+        }
+    }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.91.1",
+    "version": "2.93.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "67ab5fc3f0f2cda7aad811b8ccfee1f179325cca"
+    "gitHead": "f26263752064890282eda08c1e201dc59adc25ac"
 }

package/assets/css/components/mobile-menu-item-new.css

@@ -1,45 +0,0 @@
-.aw-mobile-menu-item-new {
-    @apply bg-surface;
-    font-size: theme('fontSize.base', 1rem);
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 1.5rem;
-    border-radius: 1.25rem;
-
-    &:hover,
-    &:focus {
-         oultine: none;
-         text-decoration: none;
-    }
-
-    &--active {
-         color: var(--c-accent);
-         font-weight: bold;
-    }
-
-    &__icon-bg {
-         margin-right: 1rem;
-         align-self: start;
-    }
-
-    &__text {
-         font-size: 1rem;
-         line-height: 1.5rem;
-         margin-right: 1rem;
-    }
-
-    &__description {
-         display: block;
-         font-weight: 400;
-         color: var(--c-mono-400);
-         font-size: 0.875rem;
-         line-height: 1rem;
-         margin-top: 0.25rem;
-    }
-
-    &__arrow {
-         margin-left: auto;
-         flex: none;
-    }
-}

package/components/5_layouts/_AwMobileMenuItemNew.vue

@@ -1,128 +0,0 @@
-<template>
-    <Component
-        :is="_linkComponent"
-        v-bind="_linkAttrs"
-        :class="{ 'aw-mobile-menu-item-new--active': active }"
-        class="aw-mobile-menu-item-new focus-outline"
-        v-on="$listeners"
-    >
-        <slot>
-            <span
-                v-if="icon"
-                class="aw-mobile-menu-item-new__icon-bg"
-                :style="iconColor"
-            >
-                <AwIcon
-                    :name="(active && iconActive) || icon"
-                    size="24"
-                    class="aw-mobile-menu-item-new__icon"
-                />
-            </span>
-
-            <span class="aw-mobile-menu-item-new__text" tabindex="-1">
-                {{ text }}
-
-                <span
-                    v-if="description"
-                    v-html="$sanitize(description)"
-                    class="aw-mobile-menu-item-new__description"
-                ></span>
-
-                <span
-                    v-else-if="childrenDescription"
-                    class="aw-mobile-menu-item-new__description"
-                >
-                    {{ childrenDescription }}
-                </span>
-            </span>
-
-            <AwBadge v-if="badge" v-bind="badge" class="mr-2" />
-
-            <AwIconSystemMono
-                v-if="_linkExternal"
-                name="external"
-                class="aw-mobile-menu-item-new__arrow text-on-surface"
-            />
-
-            <AwIconSystemMono
-                v-else-if="arrow"
-                name="angle"
-                rotate="180"
-                class="aw-mobile-menu-item-new__arrow text-mono-400"
-            />
-        </slot>
-    </Component>
-</template>
-
-<script>
-import linkMixin from '@AwMixins/link'
-
-export default {
-    name: 'AwMobileMenuItemNew',
-
-    mixins: [linkMixin],
-
-    props: {
-        text: {
-            type: String,
-            required: true
-        },
-
-        description: {
-            type: String,
-            default: ''
-        },
-
-        href: {
-            type: [String, Object],
-            default: ''
-        },
-
-        children: {
-            type: Array,
-            default: () => []
-        },
-
-        icon: {
-            type: String,
-            default: ''
-        },
-
-        iconBg: {
-            type: String,
-            default: ''
-        },
-
-        iconActive: {
-            type: String,
-            default: ''
-        },
-
-        badge: {
-            type: Object,
-            default: null
-        },
-
-        arrow: Boolean,
-
-        active: Boolean
-    },
-
-    computed: {
-        iconColor() {
-            return this.iconBg
-                ? {
-                      backgroundColor: this.iconBg,
-                      color: '#fff'
-                  }
-                : null
-        },
-
-        childrenDescription() {
-            const childrenText = this.children.map((item) => this.$t(item.text))
-
-            return childrenText.join(' • ')
-        }
-    }
-}
-</script>