@awes-io/ui 2.91.1 → 2.92.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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/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

@@ -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/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/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/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

package/components/3_organisms/AwModal.vue

@@ -28,6 +28,7 @@
                         </div>
 
                         <AwButton
+                            v-if="!notClosing"
                             :class="elClasses.close"
                             :title="$t('Close')"
                             :aria-label="$t('Close')"
@@ -133,6 +134,8 @@ export default {
             }
         },
 
+        notClosing: Boolean,
+
         name: {
             type: String,
             default: () => `modal-${_uniqModalId++}`
@@ -206,6 +209,10 @@ export default {
         },
 
         paramComputed() {
+            if (this.notClosing) {
+                return null
+            }
+
             switch (typeof this.param) {
                 case 'string':
                     return this.param || DEFAULT_GET_PARAM
@@ -245,9 +252,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 +306,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/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 '@awes-io/nuxt-admin/src/utils/merge-routes'
 
 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,173 @@
+<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'
+
+export default {
+    name: 'More',
+
+    layout: 'empty',
+
+    inject: {
+        layoutProvider: {
+            default: null
+        }
+    },
+
+    components: {
+        AwMobileMenuNav,
+        AwMobileMenuItem
+    },
+
+    computed: {
+        ...mapGetters('awesIo', [
+            'user',
+            'logoComponent',
+            'afterMobileMenuComponent',
+            'beforeMobileMenuComponent'
+        ]),
+
+        profileUrl() {
+            return pathOr(null, 'awesIo.profileUrl', this.$store.state)
+        },
+
+        mainMenu() {
+            return viewOr([], lensProp('mainMenu'), this.layoutProvider).filter(
+                ({ is }) => !is
+            )
+        },
+
+        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.92.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": "eb28d05b048c7d2545694dbf4ac607e0267971d0"
 }

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>