@awes-io/ui 2.77.0 → 2.79.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.79.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.78.0...@awes-io/ui@2.79.0) (2023-11-03)
+
+
+### Features
+
+* add modifiers for button nav ([80c10dc](https://github.com/awes-io/client/commit/80c10dc39254387a82069b117cf71ce2c5134618))
+* change logic for create page in pagination ([428c07c](https://github.com/awes-io/client/commit/428c07c3a79d741d7e28fe368361d60162195a41))
+
+
+
+
+
+# [2.78.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.77.0...@awes-io/ui@2.78.0) (2023-11-02)
+
+
+### Bug Fixes
+
+* **aw-page-single:** progress hidden on mobile ([4b749c5](https://github.com/awes-io/client/commit/4b749c523669194629d05962f722e87a2764fe61))
+
+
+### Features
+
+* change style for desktop menu ([3b41640](https://github.com/awes-io/client/commit/3b41640e555afa5a46b69ecc53437ad818ae4081))
+* change style for menu ([cc041e7](https://github.com/awes-io/client/commit/cc041e7c8e3f0cbdfc7ec27ba9705b3f7d9afd0c))
+* change style in menu ([de4f03d](https://github.com/awes-io/client/commit/de4f03d8818589f48844ba825ec3469910cedc8f))
+* change style in menu ([616a726](https://github.com/awes-io/client/commit/616a726884356b878b070ccc15fc40f7247613ab))
+* remove custom dark theme for desktop menu ([52f109e](https://github.com/awes-io/client/commit/52f109e187af884741fed932de8e638dae23ac7b))
+
+
+
+
+
 # [2.77.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.76.0...@awes-io/ui@2.77.0) (2023-11-02)
 
 

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

@@ -128,6 +128,16 @@
         }
     }
 
+    &--without-min-with {
+        .aw-button-nav__toggler {
+            & > span {
+                padding-left: 1rem;
+                padding-right: 1rem;
+                min-width: 0;
+            }
+        }
+    }
+
     &__arrow-btn.aw-button.theme-ghost {
         align-items: center;
 
@@ -159,6 +169,7 @@
 
                 &  > span {
                     height: 2.375rem;
+                    border-radius: 0.5625rem;
                     min-width: 0;
                     width: 2.6rem;
 

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

@@ -37,7 +37,7 @@
             justify-content: center;
             flex-direction: column;
 
-            padding: 0.75rem;
+            padding: 0.515625rem 0.75rem;
 
             width: 100%;
             position: relative;
@@ -47,9 +47,9 @@
     &__text {
         display: block;
 
-        font-size: 0.5rem;
+        font-size: 0.5625rem;
         font-weight: 400;
-        line-height: 0.58625rem;
+        line-height: 0.659375rem;
         color: var(--c-mono-300);
         transition: 60ms color;
 
@@ -88,6 +88,12 @@
 
 @screen lg {
     .aw-icon-menu-item {
+        margin-bottom: 0.5rem;
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+
         &--active {
             &:before {
                 border-radius: 0.625rem;
@@ -95,51 +101,11 @@
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
-                width: 3.5rem;
-                height: 2.875rem;
+                width: 4rem;
+                height: 3.0625rem;
                 content: '';
                 background-color: var(--c-mono-800);
             }
         }
     }
-
-    [data-dark='true'] {
-        .aw-icon-menu-item {
-            &--active {
-                &:before {
-                    background-color: rgba(var(--c-mono-700-rgb), 0.5);
-                }
-            }
-        }
-    }
-}
-
-[data-dark='true'] {
-    .aw-icon-menu-item {
-        &:hover {
-            .aw-icon-menu-item {
-                &__icon,
-                &__text {
-                    color: rgba(var(--c-on-surface-rgb), 0.9);
-                }
-            }
-        }
-
-        &--active {
-            .aw-icon-menu-item {
-                &__icon,
-                &__text {
-                    color: rgba(var(--c-on-surface-rgb), 0.9);
-                }
-            }
-        }
-
-        &__icon {
-            color: rgba(var(--c-on-surface-rgb), 0.8);
-        }
-
-        &__text {
-            color: var(--c-mono-400);
-        }
-    }
 }

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

@@ -2,8 +2,8 @@
     @apply bg-surface;
 
     display: grid;
-    grid-template-columns: 4.5rem auto;
-    grid-template-rows: 80px minmax(0, 2fr) minmax(0, 1fr) 80px minmax(0, auto);
+    grid-template-columns: 5rem auto;
+    grid-template-rows: 78px minmax(0, 2fr) minmax(0, 1fr) 60px minmax(0, auto);
 
     z-index: 4;
 
@@ -12,10 +12,14 @@
         display: flex;
         justify-content: center;
         width: 100%;
-        padding: theme('spacing.3');
+        padding: 0.25rem 0.75rem 0.75rem;
         margin: auto 0;
     }
 
+    &__logo {
+        padding: 0 0.75rem 0;
+    }
+
     &__menu,
     &__secondary-menu {
         --icon-color: var(--c-on-surface);
@@ -27,7 +31,7 @@
 
         overflow-y: auto;
         overflow-y: overlay;
-        scrollbar-gutter: stable both-edges;
+        /* scrollbar-gutter: stable both-edges; */
         overscroll-behavior: contain;
 
         scrollbar-width: thin;
@@ -55,7 +59,7 @@
 
     &__submenu {
         @apply bg-surface;
-        width: 230px;
+        width: 220px;
         max-height: 100vh;
         border-left: 2px solid var(--c-mono-900);
 

package/assets/css/components/nav.css

@@ -2,9 +2,11 @@
     @apply py-8;
 
     &__title {
-        @apply text-xl font-heading mb-5 px-8 truncate;
+        @apply text-xl font-heading mb-5 truncate;
         font-style: normal;
         font-weight: bold;
+        padding-right: 1.6875rem;
+        padding-left: 1.6875rem;
     }
 
     &__item {
@@ -39,7 +41,9 @@
         max-width: 100%;
         min-width: 0;
         color: inherit;
-        @apply flex items-center py-2 px-8;
+        padding-right: 1.6875rem;
+        padding-left: 1.6875rem;
+        @apply flex items-center py-2;
 
         & > svg {
             @apply mr-2;
@@ -63,7 +67,6 @@
                 display: block;
                 width: 6px;
                 height: 6px;
-                margin-left: 5px;
                 margin-top: -3px;
                 border-radius: 50%;
                 background-color: var(--c-mono-100, green);
@@ -75,7 +78,7 @@
         }
 
         &--sub {
-            padding-left: calc(theme('spacing.10') + 16px);
+            padding-left: calc(2.1875rem + 16px);
         }
 
         &--active {

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

@@ -320,6 +320,10 @@
         @apply bg-mono-900;
 
         pointer-events: none;
+
+        .aw-text-field__prefix {
+            @apply bg-mono-900;
+        }
     }
 
     .aw-button.theme-icon {

package/assets/css/components/tooltip.css

@@ -53,8 +53,3 @@
         left: -4px;
     }
 }
-
-:where([data-dark='true']) .aw-tooltip {
-    background-color: var(--c-surface);
-    color: rgba(var(--c-on-surface-rgb), 0.9);
-}

package/components/2_molecules/AwTabNav.vue

@@ -1,7 +1,18 @@
 <template>
     <AwSlider
         ref="slider"
-        :class="[_cssClasses.base, _cssClasses.wrapper]"
+        :class="[
+            _cssClasses.base,
+            _cssClasses.wrapper,
+            {
+                [`${_cssClasses.base}--without-min-with`]: modifiers.includes(
+                    'without-min-with'
+                ),
+                [`${_cssClasses.base}--fullwidth`]: modifiers.includes(
+                    'fullwidth'
+                )
+            }
+        ]"
         @resized="scrollToActive(false)"
     >
         <template
@@ -27,7 +38,7 @@
                         <AwIcon
                             v-if="item.icon"
                             v-bind="_toIconProps(item.icon)"
-                            :class="{ 'mr-1': !item.hideText }"
+                            :class="{ 'mr-1': !item.hideText && text }"
                         />
                         <span v-if="item.hideText" class="sr-only">
                             {{ text }}
@@ -131,6 +142,11 @@ export default {
             validator(val) {
                 return Array.isArray(val) ? !val.every(isNaN) : !isNaN(val)
             }
+        },
+
+        modifiers: {
+            type: [Array, String],
+            default: ''
         }
     },
 

package/components/3_organisms/AwContextMenu.vue

@@ -25,7 +25,9 @@ export default {
         text: {
             type: String,
             default: ''
-        }
+        },
+
+        hideText: Boolean
     },
 
     render(h) {
@@ -77,10 +79,10 @@ export default {
             props: {
                 theme: 'ghost',
                 color: 'default',
-                text: this.text
+                text: this.hideText ? '' : this.text
             },
             staticClass: this.buttonClass,
-            class: { 'aw-context-menu--text': this.text },
+            class: { 'aw-context-menu--text': this.text && !this.hideText },
             attrs: {
                 'data-arrow-focus': ''
             },

package/components/3_organisms/AwPagination.vue

@@ -188,15 +188,15 @@ export default {
                 const current = this.page
                 const last = this.pagesTotal
 
-                if (current < 6) {
-                    return [...range(1, 7), null, last]
-                } else if (last - current < 5) {
-                    return [1, null, ...range(last - 5, last + 1)]
+                if (current < 5) {
+                    return [...range(1, 6), null, ...range(last - 2, last + 1)]
+                } else if (last - current < 4) {
+                    return [...range(1, 4), null, ...range(last - 4, last + 1)]
                 } else {
                     return [
                         1,
                         null,
-                        ...range(current - 2, current + 2),
+                        ...range(current - 2, current + 3),
                         null,
                         last
                     ]

package/components/4_pages/AwPageMenuButtons.vue

@@ -6,6 +6,7 @@
             class="aw-page-menu-buttons__aw-context-menu"
             :options="$options.dropdownOptions"
             :text="$t('More')"
+            :hide-text="hideContextMenuText"
         >
             <AwDropdownButton
                 v-for="({ listeners, tooltip, iconSize, ...attrs },
@@ -87,7 +88,9 @@ export default {
         expandOffset: {
             type: Number,
             default: 150 // px
-        }
+        },
+
+        hideContextMenuText: Boolean
     },
 
     data() {

package/components/4_pages/AwPageSingle.vue

@@ -2,10 +2,10 @@
     <div class="aw-page-single">
         <AwPageHeader
             ref="header"
-            :progress="headerProgress"
-            :primary="$screen.lg || isHeaderStuck"
+            :progress="isDesktop ? headerProgress : null"
+            :primary="isDesktop || isHeaderStuck"
             :title="_title"
-            :hide-title="!$screen.lg && !isHeaderStuck"
+            :hide-title="!isDesktop && !isHeaderStuck"
             :hide-menu="hideMenu"
             class="aw-page-single__header"
             :class="{ 'aw-page-single__header--is-stuck': isHeaderStuck }"
@@ -32,7 +32,7 @@
                 <slot name="buttons"></slot>
 
                 <AwButton
-                    v-if="actionButton && $screen.lg"
+                    v-if="actionButton && isDesktop"
                     v-bind="actionButton"
                     size="md"
                     @click="$emit('action')"
@@ -53,7 +53,7 @@
             </div>
 
             <AwDescription
-                v-if="!$screen.lg && description"
+                v-if="!isDesktop && description"
                 class="aw-page-single__mobile-description"
                 tag="div"
             >
@@ -88,7 +88,7 @@
             </div>
 
             <div
-                v-if="actionButton && !$screen.lg"
+                v-if="actionButton && !isDesktop"
                 class="aw-page-single__mobile-action-button"
                 :class="{
                     'aw-page-single__mobile-action-button--is-stuck': isActionButtonStuck
@@ -146,6 +146,11 @@ export default {
             default: ''
         },
 
+        desktopFrom: {
+            type: String,
+            default: 'lg'
+        },
+
         reverse: Boolean,
 
         hideMenu: Boolean
@@ -159,6 +164,10 @@ export default {
     },
 
     computed: {
+        isDesktop() {
+            return this.$screen[this.desktopFrom] || false
+        },
+
         containerType() {
             return CONTAINER_TYPES.includes(this.container)
                 ? this.container
@@ -182,10 +191,25 @@ export default {
         }
     },
 
+    watch: {
+        isDesktop() {
+            if (this.$options.$observer) {
+                this.$nextTick(() => {
+                    this._disableScrollWatcher()
+                    this._initScrollWatcher()
+                })
+            }
+        }
+    },
+
     mounted() {
         this._initScrollWatcher()
     },
 
+    beforeDestroy() {
+        this._disableScrollWatcher()
+    },
+
     methods: {
         _initScrollWatcher() {
             if (this.$options.$observer) return
@@ -210,9 +234,15 @@ export default {
             this.$options.$observer.observe(bottomScrollMark)
 
             this.$once('hook:beforeDestroy', () => {
-                this.$options.$observer.disconnect()
-                this.$options.$observer = null
+                
             })
+        },
+
+        _disableScrollWatcher() {
+            if (!this.$options.$observer) return
+
+            this.$options.$observer.disconnect()
+            this.$options.$observer = null
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.77.0",
+    "version": "2.79.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -113,5 +113,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "c25bfd73e3141b0aed68fc34d181000dbbd53d16"
+    "gitHead": "acc0cf881db35c97a082498b3ad12f686412904f"
 }