@awes-io/ui 2.112.1 → 2.113.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.113.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.112.1...@awes-io/ui@2.113.0) (2024-10-15)
+
+
+### Bug Fixes
+
+* **aw-page-header:** hide breadcrumb wrapper if empty ([c7d1781](https://github.com/awes-io/client/commit/c7d17817d0807fdffc441734dfc7c0b052b6a7e1))
+
+
+### Features
+
+* change logic for show active mobile menu childer ([d1d1e08](https://github.com/awes-io/client/commit/d1d1e08d31802cbe50ac3a941f408b9f8167b343))
+
+
+
+
+
 ## [2.112.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.112.0...@awes-io/ui@2.112.1) (2024-10-04)
 
 

package/assets/css/components/more.css

@@ -11,6 +11,12 @@
         gap: 1rem;
         padding: 0.5rem 1.5rem 0;
         padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
+
+        &-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+         }
     }
 
     &__user-profile {

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

@@ -85,7 +85,7 @@
         border-radius: 50%;
 
         &:checked {
-            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+            mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 10C12.6863 10 10 12.6863 10 16C10 19.3137 12.6863 22 16 22C19.3137 22 22 19.3137 22 16C22 12.6863 19.3137 10 16 10Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
         }
     }
 

package/components/2_molecules/AwSelect.vue

@@ -312,7 +312,7 @@ export default {
         },
 
         optionLabel: {
-            type: String,
+            type: [String, Function],
             default: ''
         },
 

package/components/4_pages/AwPage.vue

@@ -19,15 +19,12 @@
                     :title="_title"
                     :title-showable="!isDesktop"
                     :hide-title="!isDesktop && !isHeaderStuck"
+                    :hide-breadcrumb="!(backUrl || isMenuToggler)"
                     :container="container"
                     is-container
                     :is-stuck="isHeaderStuck && !isDesktop"
                     hide-menu
                     class="aw-page__header"
-                    :style="{
-                        '--breadcrumb-width':
-                            backUrl || isMenuToggler ? '2.5rem' : '0px'
-                    }"
                 >
                     <template #breadcrumbs>
                         <slot name="headline-breadcrumb">

package/components/4_pages/_AwPageHeader.vue

@@ -8,7 +8,7 @@
         }"
         :style="{ '--header-container-width': headerContainerWidth }"
     >
-        <div class="aw-page-header__breadcrumbs">
+        <div v-if="!hideBreadcrumb" class="aw-page-header__breadcrumbs">
             <slot name="breadcrumbs"> </slot>
         </div>
 
@@ -65,6 +65,8 @@ export default {
             default: 'full'
         },
 
+        hideBreadcrumb: Boolean,
+
         hideTitle: Boolean,
 
         titleShowable: Boolean,

package/components/5_layouts/_AwNav.vue

@@ -42,7 +42,9 @@
                                 !item.expanded
                         "
                         class="aw-nav__toggler"
-                        :class="{ 'aw-nav__toggler--open': openedChildren[i] }"
+                        :class="{
+                            'aw-nav__toggler--open': i === openedChildrenIndex
+                        }"
                         :[$options.TOGGLE_CHILDREN_ATTR]="i"
                     >
                         <AwIconSystemMono name="angle" size="16" />
@@ -54,7 +56,7 @@
                     :is="item.expanded ? 'div' : 'AwAccordionFold'"
                     v-if="item.children && item.children.length"
                     :key="'children-' + i"
-                    :show="openedChildren[i]"
+                    :show="i === openedChildrenIndex"
                 >
                     <AwNavItem
                         v-for="(subchild, j) in item.children"
@@ -133,7 +135,7 @@ export default {
 
     data() {
         return {
-            openedChildren: [],
+            openedChildrenIndex: null,
             tooltips: {}
         }
     },
@@ -147,11 +149,7 @@ export default {
     watch: {
         items: {
             handler(items) {
-                this.openedChildren = items.map((item) => {
-                    if (item.expanded) {
-                        return null
-                    }
-
+                this.openedChildrenIndex = items.findIndex((item) => {
                     return (
                         item === this.activeMenuItem ||
                         item.children.some(
@@ -201,14 +199,13 @@ export default {
             if (toggleTarget) {
                 $event.stopPropagation()
 
-                const index = toggleTarget.getAttribute(TOGGLE_CHILDREN_ATTR)
-
-                this.$set(
-                    this.openedChildren,
-                    index,
-                    !this.openedChildren[index]
+                const index = Number(
+                    toggleTarget.getAttribute(TOGGLE_CHILDREN_ATTR)
                 )
 
+                this.openedChildrenIndex =
+                    this.openedChildrenIndex === index ? null : index
+
                 return
             }
 
@@ -217,9 +214,9 @@ export default {
             if (openTarget) {
                 $event.stopPropagation()
 
-                const index = openTarget.getAttribute(OPEN_CHILDREN_ATTR)
-
-                this.$set(this.openedChildren, index, true)
+                this.openedChildrenIndex = Number(
+                    openTarget.getAttribute(OPEN_CHILDREN_ATTR)
+                )
 
                 return
             }

package/nuxt/pages/more.vue

@@ -3,13 +3,24 @@
         <div class="aw-more__buttons">
             <AwButton color="mono" icon="awesio/arrow" @click="onClickGoBack" />
 
-            <AwButton
-                v-if="user"
-                color="mono"
-                icon="awesio/edit"
-                :href="profileUrl"
-                back
-            />
+            <div
+                v-if="user || beforeProfileButtonComponent"
+                class="aw-more__buttons-wrapper"
+            >
+                <Component
+                    v-if="beforeProfileButtonComponent"
+                    :is="beforeProfileButtonComponent.is"
+                    v-bind="beforeProfileButtonComponent.props"
+                />
+
+                <AwButton
+                    v-if="user"
+                    color="mono"
+                    icon="awesio/edit"
+                    :href="profileUrl"
+                    back
+                />
+            </div>
         </div>
 
         <div class="aw-more__profile" v-if="user">
@@ -131,7 +142,8 @@ export default {
             'logoComponent',
             'userMenuAvatarComponent',
             'afterMobileMenuComponent',
-            'beforeMobileMenuComponent'
+            'beforeMobileMenuComponent',
+            'beforeProfileButtonComponent'
         ]),
 
         profileUrl() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.112.1",
+    "version": "2.113.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": "2bc3682b3eb1b0873c37918e8254b65c9e97a62e"
+    "gitHead": "03c333535144de280da2aa6117e41ab92a144102"
 }

package/store/awesIo.js

@@ -39,6 +39,7 @@ export const state = () => ({
     },
     mobileMenuOpened: false,
     beforeMobileMenu: null,
+    beforeProfileButton: null,
     userMenuAvatar: null,
     afterMobileMenu: null,
     bottomBarAction: null,
@@ -132,6 +133,10 @@ export const getters = {
         return state.beforeMobileMenu
     },
 
+    beforeProfileButtonComponent(state) {
+        return state.beforeProfileButton
+    },
+
     userMenuAvatarComponent(state) {
         return state.userMenuAvatar
     },
@@ -233,6 +238,12 @@ export const mutations = {
         }
     },
 
+    SET_BEFORE_PROFILE_BUTTON(state, payload) {
+        if (payload && payload.component) {
+            state.beforeProfileButton = payload.component
+        }
+    },
+
     SET_USER_MENU_AVATAR(state, payload) {
         if (payload && payload.component) {
             state.userMenuAvatar = payload.component