@awes-io/ui 2.99.0 → 2.100.1

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.100.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.100.0...@awes-io/ui@2.100.1) (2024-04-05)
+
+
+### Bug Fixes
+
+* styles fixes ([baf58ba](https://github.com/awes-io/client/commit/baf58ba2e65709e5faed5203246c07c609c945f8))
+
+
+
+
+
+# [2.100.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.99.0...@awes-io/ui@2.100.0) (2024-04-04)
+
+
+### Bug Fixes
+
+* **nuxt-auth:** remove auth interceptor fixed ([389b092](https://github.com/awes-io/client/commit/389b092e4d95771104c747b29e8324689624f6d5))
+* fix style in page single ([bb63361](https://github.com/awes-io/client/commit/bb633613ec304753bc9af4336590cfcdbb2d1cca))
+* select native caret properly named ([87cfef9](https://github.com/awes-io/client/commit/87cfef93f6b5c0cba9b84d20bab721705481d791))
+* toggle show aside z-index increeased ([6d6aeb9](https://github.com/awes-io/client/commit/6d6aeb961d7ab6a9185c2b8303d35163dc0c6bc2))
+* typography styles updated ([f998b63](https://github.com/awes-io/client/commit/f998b63107374516647ad31ba799bcddaf152094))
+
+
+### Features
+
+* add new header for aw page ([a2d895a](https://github.com/awes-io/client/commit/a2d895a84182f849db86c0c8a5cee0df077bc428))
+* page headers unified ([00afeb8](https://github.com/awes-io/client/commit/00afeb8655c8c76e8cd96a80734ed77af229bdb0))
+
+
+
+
+
 # [2.99.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.2...@awes-io/ui@2.99.0) (2024-03-25)
 
 

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

@@ -1,10 +1,15 @@
 .aw-action-button {
     @apply bg-surface;
 
+    --min-header-height: 2.875rem;
+
     display: grid;
     align-items: start;
     grid-template-columns: auto 1fr auto;
-    grid-template-rows: max-content minmax(0, auto);
+    grid-template-rows: minmax(var(--min-header-height), max-content) minmax(
+            0,
+            auto
+        );
     gap: 0 1rem;
 
     padding: 2rem;
@@ -38,12 +43,14 @@
 
     &__text {
         font-size: 1rem;
+        font-weight: 700;
         line-height: 1.5;
         align-self: center;
     }
 
     &__description {
         display: block;
+        font-weight: normal;
         margin-top: 0.25rem;
     }
 
@@ -61,4 +68,11 @@
     &--narrow {
         padding: 1rem;
     }
+
+    & > :where(.aw-action-icon) {
+        margin-top: max(
+            0px,
+            calc((var(--min-header-height) - var(--size)) / 2)
+        );
+    }
 }

package/assets/css/components/description.css

@@ -1,12 +1,6 @@
 .aw-description {
     font-size: theme('fontSize.sm', 0.875rem);
+    line-height: 1.2857;
     color: var(--c-mono-400);
 }
 
-span.aw-description {
-    line-height: 16px;
-}
-
-p.aw-description {
-    line-height: 21px;
-}

package/assets/css/components/layout.css

@@ -21,6 +21,7 @@
 
         &.aw-layout-menu--hide-submenu {
             max-width: 6rem;
+            z-index: 11;
         }
 
         & ~ * {
@@ -42,7 +43,6 @@
 }
 
 .layout {
-
     &&--default,
     &&--simple {
         position: relative;
@@ -130,7 +130,6 @@
 }
 
 @media (min-width: 35rem) {
-
     .layout {
         &&--frame-center,
         &&--frame-left {
@@ -151,7 +150,6 @@
 
 @media (max-width: 35rem) {
     .layout {
-
         &&--frame-center,
         &&--frame-left {
             background-image: none !important;
@@ -182,7 +180,7 @@
         }
 
         &&--simple &__content {
-           @apply pl-0;
+            @apply pl-0;
         }
 
         &__logo {

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

@@ -2,10 +2,29 @@
     display: flex;
     align-items: center;
     gap: 1rem;
-    padding: var(--header-padding-top) 1.5rem var(--header-padding-bottom);
+
+    padding: var(--header-padding-top) var(--header-padding-horizontal)
+        var(--header-padding-bottom);
     height: var(--header-height);
+    box-shadow: none;
 
     position: relative;
+    z-index: 10;
+
+    transition: none;
+
+    &--is-stuck {
+        @apply bg-surface;
+        width: 100%;
+
+        box-shadow: 0px 10px 20px 0px rgba(0, 19, 106, 0.1);
+
+        transition: 60ms box-shadow 120ms;
+        animation: aw-page-header-slide 180ms ease-out;
+
+        position: sticky;
+        top: 0;
+    }
 
     .aw-progress {
         position: absolute;
@@ -13,14 +32,22 @@
         left: 0;
     }
 
+    &--container {
+        max-width: 100%;
+        width: var(--header-container-width);
+        margin-left: auto;
+        margin-right: auto;
+    }
+
     &--primary {
         @apply bg-surface;
+        width: 100%;
     }
 
     &__title {
         @apply font-body;
 
-        flex: 1 1 50%;
+        flex: 1 1 calc(100% - 6rem);
 
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -37,7 +64,7 @@
 
     &__breadcrumbs,
     &__buttons {
-        flex: 1 1 25%;
+        flex: 1 1 3rem;
 
         display: flex;
         gap: 1rem;
@@ -51,27 +78,73 @@
 
 @screen md {
     .aw-page-header {
+        &__title {
+            flex: 10 1 max-content;
+        }
 
-        &__title,
-        &__breadcrumbs {
-            flex: 1 1 calc(100% / 3);
+        &__breadcrumbs,
+        &__buttons {
+            flex: 1 10 max-content;
         }
 
         &__buttons {
-            flex: 1 0 auto;
-            min-width: calc(100% / 3);
+            min-width: max-content;
         }
     }
 }
 
 @screen lg {
     .aw-page-header {
-        padding-left: 2.5rem;
-        padding-right: 2.5rem;
+        /* padding-left: 2.5rem;
+        padding-right: 2.5rem; */
 
         &__title {
             font-size: 1.25rem;
             line-height: 1.2;
         }
+
+        &__breadcrumbs {
+            padding-right: 1rem;
+        }
+
+        &--container {
+            gap: 0;
+            width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        :where(&--container) &__breadcrumbs {
+            flex: 0 0
+                calc(
+                    50% - var(--header-container-width) / 2 +
+                        var(--header-padding-horizontal)
+                );
+        }
+
+        :where(&--container) &__title {
+            text-align: left;
+            margin-right: 1rem;
+        }
+
+        :where(&--container) &__buttons {
+            margin-right: max(
+                0px,
+                calc(
+                    50% - var(--header-container-width) / 2 +
+                        var(--header-padding-horizontal)
+                )
+            );
+        }
+    }
+}
+
+@keyframes aw-page-header-slide {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
     }
 }

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

@@ -5,24 +5,6 @@
     flex-direction: column;
     min-height: 100dvh;
 
-    &__header {
-        box-shadow: none;
-
-        transition: none;
-
-        z-index: 10;
-
-        &--is-stuck {
-            box-shadow: 0px 10px 20px 0px rgba(0, 19, 106, 0.1);
-
-            transition: 60ms box-shadow 120ms;
-            animation: aw-page-single-header-slide 180ms ease-out;
-
-            position: sticky;
-            top: 0;
-        }
-    }
-
     &__container {
         flex-grow: 1;
 
@@ -45,8 +27,8 @@
 
         padding: 0 1.5rem;
 
-        font-size: 1.5rem;
-        line-height: 1;
+        font-size: 1.25rem;
+        line-height: 1.2;
         font-weight: bold;
     }
 
@@ -121,10 +103,10 @@
         &__header {
             position: sticky;
             top: 0;
+        }
 
-            &--is-stuck {
-                animation: none;
-            }
+        .aw-page-header--is-stuck {
+            animation: none;
         }
 
         &__container {
@@ -179,13 +161,3 @@
         }
     }
 }
-
-@keyframes aw-page-single-header-slide {
-    from {
-        transform: translateY(-100%);
-    }
-
-    to {
-        transform: translateY(0);
-    }
-}

package/assets/css/components/page.css

@@ -88,26 +88,36 @@
 
     /* TODO: remove when block removed */
     &__heading {
-         display: contents;
+        display: contents;
+    }
+
+    &__header {
+        &--is-empty.aw-page-header {
+            display: none;
+        }
+    }
+
+    &__mobile-title {
+        padding: 0;
+
+        font-size: 1.25rem;
+        line-height: 1.2;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+    }
+
+    &__top-scroll-mark {
+        height: 1px;
+        margin-top: -1.5rem;
+        margin-bottom: 1.5rem;
     }
 }
 
 @screen lg {
     .aw-page {
-        &__heading {
-            position: relative;
-
-            &--sticky {
-                position: sticky;
-                top: 0;
-                background-color: var(--c-mono-900);
-                border-bottom-width: 1px;
-                z-index: 1;
-
-                .aw-page-headline__container {
-                    padding-top: 0;
-                }
-            }
+        &__mobile-title,
+        &__top-scroll-mark {
+            display: none;
         }
 
         &__content {

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

@@ -8,6 +8,10 @@
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
 
+    &--page {
+        background-color: var(--c-page-bg);
+    }
+
     &.aw-search {
         padding-top: 0;
         padding-bottom: 0;
@@ -48,6 +52,12 @@
         margin-bottom: -0.1875rem;
     }
 
+    &--uncolor-prefix &__prefix,
+    &--uncolor-postfix &__postfix {
+        background-color: inherit;
+        color: inherit;
+    }
+
     &__prefix {
         @apply rounded-l;
     }
@@ -99,6 +109,10 @@
         }
     }
 
+    &--page &__element {
+        @apply bg-page-bg;
+    }
+
     &__fake-input {
         --icon-width: 2.5rem;
         --icon-count: 0;
@@ -114,6 +128,9 @@
     &.is-select,
     &.is-select &__element {
         cursor: pointer;
+    }
+
+    &.is-select &__element {
         position: relative;
         z-index: 1;
         background-color: transparent;

package/assets/css/components/toggle-show-aside.css

@@ -1,6 +1,7 @@
 .aw-toggle-show-aside {
     transition: width 300ms ease-in-out 0s;
     position: relative;
+    z-index: 29;
 
     &--hide {
         width: 1rem !important;

package/assets/js/styles.js

@@ -31,17 +31,17 @@ export const CUSTOM_COLORS_BG_LIGHT = {
 }
 
 export const CUSTOM_COLORS_BG_DARK = {
-    red: '#791a1f',
-    peach: '#7c3118',
-    yellow: '#7c4a15',
-    magenta: '#551c3b',
-    purple: '#3e2069',
-    'light-blue': '#164c7e',
-    blue: '#1c2755',
-    green: '#306317',
-    lime: '#3e4f13',
-    grey: '#060709',
-    'light-grey': '#434447'
+    red: '#583433',
+    peach: '#583C36',
+    yellow: '#584729',
+    magenta: '#56273E',
+    purple: '#3F3158',
+    'light-blue': '#234657',
+    blue: '#2E3A5C',
+    green: '#2D4A2C',
+    lime: '#464C29',
+    grey: '#393A3D',
+    'light-grey': '#41444B'
 }
 
 export default {

package/components/1_atoms/AwInput.vue

@@ -130,15 +130,29 @@ export default {
                 )
                 return false
             }
+        },
+
+        theme: {
+            type: String,
+            default: ''
         }
     },
 
     computed: {
         elClasses() {
             let base = this.$options._config.baseClass
+            const theme = String(this.theme)
 
             return {
-                base,
+                base: [
+                    base,
+                    {
+                        [`${base}--page`]: theme.includes('page'),
+                        [`${base}--uncolor-prefix`]: theme.includes(
+                            'uncolor-prefix'
+                        )
+                    }
+                ],
                 el: `${base}__element`,
                 label: `${base}__label`,
                 labelRequired: `${base}__label--required`,

package/components/1_atoms/AwSelectNative.vue

@@ -30,7 +30,7 @@
             </label>
 
             <div class="aw-text-field__caret pl-2 pr-4">
-                <AwIcon name="triangle-d" size="12" />
+                <AwIcon name="awesio/triangle" />
             </div>
         </div>
 

package/components/2_molecules/_AwSelectFakeInput.vue

@@ -2,15 +2,18 @@
     <div
         ref="element"
         class="aw-select-fake-input flex max-w-full aw-text-field is-text"
-        :class="{
-            'is-filled': value === 0 || !!value,
-            'has-label': !!label,
-            'has-error': hasError,
-            'is-disabled': isDisabled,
-            'has-icon': $slots.icon,
-            'has-prefix': prefix,
-            'has-postfix': postfix
-        }"
+        :class="[
+            themeClasses,
+            {
+                'is-filled': value === 0 || !!value,
+                'has-label': !!label,
+                'has-error': hasError,
+                'is-disabled': isDisabled,
+                'has-icon': $slots.icon,
+                'has-prefix': prefix,
+                'has-postfix': postfix
+            }
+        ]"
         @click="$emit('open')"
     >
         <span
@@ -23,7 +26,7 @@
             <slot name="prefix">{{ prefix }}</slot>
         </span>
 
-        <span class="block relative w-full">
+        <span class="block relative w-full min-w-0">
             <span
                 class="aw-text-field__element aw-text-field__element--fake"
                 tabindex="0"
@@ -95,6 +98,7 @@
 </template>
 
 <script>
+import { isType } from 'rambdax'
 import TextFieldMixin from '@AwMixins/text-field'
 
 export default {
@@ -123,6 +127,11 @@ export default {
             default: ''
         },
 
+        theme: {
+            type: String,
+            default: ''
+        },
+
         clearable: Boolean,
 
         caret: Boolean,
@@ -135,6 +144,14 @@ export default {
             return this.size === 'md' ? 'p-3' : 'p-2'
         },
 
+        themeClasses() {
+            return isType('String', this.theme)
+                ? this.theme
+                      .split(',')
+                      .map((modifier) => `aw-text-field--${modifier.trim()}`)
+                : []
+        },
+
         iconCount() {
             return 0 + this.clearable + this.caret
         }

package/components/3_organisms/AwModalButtons.vue

@@ -1,9 +1,23 @@
 <template>
-    <div class="aw-modal-buttons" :class="{ 'aw-modal-buttons--desktop': isDesktop, 'aw-modal-buttons--mobile': !isDesktop }">
+    <div
+        class="aw-modal-buttons"
+        :class="{
+            'aw-modal-buttons--desktop': isDesktop,
+            'aw-modal-buttons--mobile': !isDesktop
+        }"
+    >
         <!-- visible buttons -->
         <slot name="buttons" :buttons="groupedButtons.buttons">
             <AwButton
-                v-for="({ listeners, tooltip, size, cssClass, autoWidth, ...attrs }, i) in groupedButtons.buttons"
+                v-for="({
+                    listeners,
+                    tooltip,
+                    size,
+                    cssClass,
+                    autoWidth,
+                    ...attrs
+                },
+                i) in groupedButtons.buttons"
                 :key="i"
                 v-tooltip.prepend="tooltip"
                 v-bind="attrs"
@@ -12,22 +26,38 @@
                 :class="[
                     cssClass,
                     {
-                        'aw-modal-buttons__button--equal': !isDesktop && !autoWidth
+                        'aw-modal-buttons__button--equal':
+                            !isDesktop && !autoWidth
                     }
                 ]"
                 v-on="listeners"
             />
         </slot>
 
+        <!-- single non-cta button -->
+        <AwButton
+            v-if="singleDropdownButton"
+            v-bind="singleDropdownButton.attrs"
+            v-tooltip.prepend="singleDropdownButton.tooltip"
+            v-on="singleDropdownButton.listeners"
+        />
+
         <!-- dropdown buttons -->
-        <template v-if="groupedButtons.dropdown.length">
-            <slot name="toggler" :v-bind="{ togglerProps, isOpened, open, close }">
+        <template v-else-if="groupedButtons.dropdown.length">
+            <slot
+                name="toggler"
+                :v-bind="{ togglerProps, isOpened, open, close }"
+            >
                 <AwButton v-bind="togglerProps" @click="open" />
             </slot>
-            <AwDropdown :show.sync="isOpened" :options="$options.dropdownOptions">
+            <AwDropdown
+                :show.sync="isOpened"
+                :options="$options.dropdownOptions"
+            >
                 <slot name="dropdown" :buttons="groupedButtons.dropdown">
                     <AwDropdownButton
-                        v-for="({ listeners, tooltip, ...attrs }, i) in groupedButtons.dropdown"
+                        v-for="({ listeners, tooltip, ...attrs },
+                        i) in groupedButtons.dropdown"
                         :key="i"
                         v-tooltip.prepend="tooltip"
                         v-bind="attrs"
@@ -88,7 +118,10 @@ export default {
         groupedButtons() {
             return this.items.reduce(
                 (acc, item) => {
-                    const { cta, dropdown, show = true, ...itemProps } = { ...this.options, ...item }
+                    const { cta, dropdown, show = true, ...itemProps } = {
+                        ...this.options,
+                        ...item
+                    }
 
                     // rename class prop
                     if (itemProps.class) {
@@ -98,10 +131,20 @@ export default {
 
                     // add button if visible
                     if (show !== false) {
-                        const group = this.isDesktop ? (dropdown ? 'dropdown' : 'buttons') : cta ? 'buttons' : 'dropdown'
+                        const group = this.isDesktop
+                            ? dropdown
+                                ? 'dropdown'
+                                : 'buttons'
+                            : cta
+                            ? 'buttons'
+                            : 'dropdown'
 
                         // omit not available colors
-                        if (group === 'dropdown' && itemProps.color && !DROPDOWN_BUTTON_COLORS.includes(itemProps.color)) {
+                        if (
+                            group === 'dropdown' &&
+                            itemProps.color &&
+                            !DROPDOWN_BUTTON_COLORS.includes(itemProps.color)
+                        ) {
                             itemProps.color = undefined
                         }
 
@@ -114,12 +157,42 @@ export default {
             )
         },
 
+        singleDropdownButton() {
+            const singleButton =
+                this.groupedButtons.dropdown.length === 1
+                    ? this.groupedButtons.dropdown[0]
+                    : null
+
+            if (
+                singleButton &&
+                !!singleButton.icon &&
+                (singleButton.hideText || !singleButton.text)
+            ) {
+                const {
+                    listeners,
+                    tooltip,
+                    ...attrs
+                } = this.groupedButtons.dropdown[0]
+
+                return { listeners, tooltip, attrs }
+            }
+
+            return null
+        },
+
         togglerSize() {
-            return path([this.groupedButtons.buttons.length - 1, 'size'], this.groupedButtons.buttons)
+            return path(
+                [this.groupedButtons.buttons.length - 1, 'size'],
+                this.groupedButtons.buttons
+            )
         },
 
         togglerProps() {
-            return { ...omit(['cta'], this.options || {}), size: this.togglerSize, ...this.togglerOptions }
+            return {
+                ...omit(['cta'], this.options || {}),
+                size: this.togglerSize,
+                ...this.togglerOptions
+            }
         }
     },
 

package/components/4_pages/AwPage.vue

@@ -1,32 +1,61 @@
 <template>
-    <div class="aw-page">
-        <div
-            class="aw-page__heading"
-            :class="{
-                'aw-page__heading--sticky': stickyHeader
-            }"
-        >
+    <div
+        class="aw-page"
+        :style="{
+            '--page-buttons-bottom': _hideBottomBar ? null : '3.5rem'
+        }"
+    >
+        <div class="aw-page__heading">
             <slot name="heading" v-bind="{ titleTag, title, breadcrumb }">
-                <AwPageHeadline
+                <AwPageHeader
+                    ref="header"
+                    :primary="!isDesktop && isHeaderStuck"
+                    :title="_title"
+                    :hide-title="!isDesktop && !isHeaderStuck"
+                    :container="container"
+                    :is-stuck="isHeaderStuck && !isDesktop"
+                    hide-menu
+                    class="aw-page__header"
+                    :class="{
+                        'aw-page__header--is-empty':
+                            !isHeaderStuck &&
+                            !isDesktop &&
+                            !$scopedSlots['buttons'] &&
+                            !$scopedSlots['after-breadcrumb'] &&
+                            !$scopedSlots['headline-breadcrumb'] &&
+                            !backUrl &&
+                            !isMenuToggler
+                    }"
                     :style="{
-                        '--page-buttons-bottom': _hideBottomBar
-                            ? null
-                            : '3.5rem'
+                        '--breadcrumb-width':
+                            backUrl || isMenuToggler ? '2.5rem' : '0px'
                     }"
-                    :title="_title"
-                    :breadcrumb="breadcrumb"
-                    :breadcrumb-menu="breadcrumbMenu"
-                    :buttons-breakpoint="buttonsBreakpoint"
-                    :container="headerContainer || container"
-                    :title-centered="titleCentered || stickyHeader"
                 >
-                    <template
-                        v-for="(index, name) in $scopedSlots"
-                        v-slot:[name]="data"
-                    >
-                        <slot :name="name" v-bind="data"></slot>
+                    <template #breadcrumbs>
+                        <slot name="headline-breadcrumb">
+                            <AwButton
+                                v-if="backUrl || isMenuToggler"
+                                :color="
+                                    isDesktop || !isHeaderStuck
+                                        ? 'mono'
+                                        : 'mono-light'
+                                "
+                                :href="backUrl || '/more'"
+                                :aria-label="breadcrumb?.title ?? $t('Back')"
+                            >
+                                <template #icon>
+                                    <AwIconSystemMono name="arrow" />
+                                </template>
+                            </AwButton>
+                        </slot>
+
+                        <slot name="after-breadcrumb" />
+                    </template>
+
+                    <template #default>
+                        <slot name="buttons"></slot>
                     </template>
-                </AwPageHeadline>
+                </AwPageHeader>
             </slot>
 
             <!-- subnav -->
@@ -55,9 +84,20 @@
         >
             <!-- eslint-disable prettier/prettier -->
             <div :class="[containerClass, { 'aw-page__grid': hasAside }]">
+                <div class="aw-page__mobile-title" aria-hidden="true">
+                    {{ _title }}
+                </div>
+
+                <div
+                    ref="topScrollMark"
+                    class="aw-page__top-scroll-mark"
+                    aria-hidden="true"
+                ></div>
+
                 <div v-if="hasAside">
                     <slot />
                 </div>
+
                 <slot v-else></slot>
 
                 <div v-if="hasAside">
@@ -117,7 +157,7 @@
 import { pathOr } from 'rambdax'
 import pageMixin from '@AwMixins/page'
 import AwBottomBar from '@AwOrganisms/AwBottomBar.vue'
-import AwPageHeadline from '@AwPages/_AwPageHeadline.vue'
+import { conf } from '@AwUtils/component'
 
 export default {
     name: 'AwPage',
@@ -126,7 +166,7 @@ export default {
 
     components: {
         AwBottomBar,
-        AwPageHeadline
+        AwPageHeader: () => import('@AwPages/_AwPageHeader.vue')
     },
 
     props: {
@@ -154,10 +194,6 @@ export default {
             default: null
         },
 
-        stickyHeader: Boolean,
-
-        titleCentered: Boolean,
-
         // Disable mobile bottom menu
         hideBottomBar: {
             type: Boolean,
@@ -178,11 +214,30 @@ export default {
     data() {
         return {
             isFullscreen: false,
-            isFakeFullscreen: false
+            isFakeFullscreen: false,
+            isHeaderStuck: false
+        }
+    },
+
+    provide() {
+        return {
+            teleportButtonsTo: '.aw-page'
         }
     },
 
     computed: {
+        isMenuToggler() {
+            return (
+                !this.backUrl &&
+                !this.$screen.lg &&
+                this.breadcrumbMenu !== false
+            )
+        },
+
+        isDesktop() {
+            return this.$screen[this.buttonsBreakpoint] || false
+        },
+
         _hideBottomBar() {
             return this.hideBottomBar === null
                 ? this._hasBreadcrumb

package/components/4_pages/AwPageMenuButtons.vue

@@ -38,36 +38,38 @@
         </AwFlow>
 
         <!-- fixed button -->
-        <div
+        <Teleport
             v-if="!isExpanded && splitButtons.fixed"
-            class="aw-page-menu-buttons__fixed-btns"
+            :to="teleportButtonsTo"
         >
-            <AwButton
-                v-for="({ listeners, tooltip, ...attrs },
-                i) in splitButtons.fixed"
-                :key="i"
-                v-tooltip="tooltip"
-                v-bind="attrs"
-                auto-width
-                v-on="listeners"
-            >
-                <template #icon="{ icon }">
-                    <AwIcon :name="icon" />
-                </template>
-
-                <template #default="{ text }">
-                    <span
-                        v-if="text"
-                        class="aw-page-menu-buttons__fixed-btn-text truncate"
-                        :class="{
-                            'aw-page-menu-buttons__fixed-btn-text--expanded': isInTopPosition
-                        }"
-                    >
-                        {{ text }}
-                    </span>
-                </template>
-            </AwButton>
-        </div>
+            <div class="aw-page-menu-buttons__fixed-btns">
+                <AwButton
+                    v-for="({ listeners, tooltip, ...attrs },
+                    i) in splitButtons.fixed"
+                    :key="i"
+                    v-tooltip="tooltip"
+                    v-bind="attrs"
+                    auto-width
+                    v-on="listeners"
+                >
+                    <template #icon="{ icon }">
+                        <AwIcon :name="icon" />
+                    </template>
+
+                    <template #default="{ text }">
+                        <span
+                            v-if="text"
+                            class="aw-page-menu-buttons__fixed-btn-text truncate"
+                            :class="{
+                                'aw-page-menu-buttons__fixed-btn-text--expanded': isInTopPosition
+                            }"
+                        >
+                            {{ text }}
+                        </span>
+                    </template>
+                </AwButton>
+            </div>
+        </Teleport>
     </div>
 </template>
 
@@ -85,6 +87,10 @@ const toIconButton = (props) => ({
 export default {
     name: 'AwPageMenuButtons',
 
+    components: {
+        Teleport: () => import('vue2-teleport')
+    },
+
     props: {
         items: {
             type: Array,
@@ -96,6 +102,11 @@ export default {
             default: 'lg'
         },
 
+        teleportFixedTo: {
+            type: String,
+            default: 'body'
+        },
+
         /* max window scroll when fixed buttons expanded */
         /* pass -1 to collapse button eventually */
         expandOffset: {
@@ -118,7 +129,18 @@ export default {
         }
     },
 
+    inject: {
+        injectedTeleportButtonsTo: {
+            from: 'teleportButtonsTo',
+            default: ''
+        }
+    },
+
     computed: {
+        teleportButtonsTo() {
+            return this.injectedTeleportButtonsTo || this.teleportButtonsTo
+        },
+
         isExpanded() {
             return (
                 this.breakpoint === 'default' || this.$screen[this.breakpoint]

package/components/4_pages/AwPageSingle.vue

@@ -7,8 +7,8 @@
             :title="_title"
             :hide-title="!isDesktop && !isHeaderStuck"
             :hide-menu="hideMenu"
+            :is-stuck="isHeaderStuck"
             class="aw-page-single__header"
-            :class="{ 'aw-page-single__header--is-stuck': isHeaderStuck }"
         >
             <template #breadcrumbs>
                 <slot name="breadcrumb">
@@ -174,7 +174,6 @@ export default {
 
     data() {
         return {
-            isHeaderStuck: false,
             isActionButtonStuck: false
         }
     },
@@ -211,25 +210,6 @@ 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
@@ -252,13 +232,6 @@ export default {
 
             this.$options.$observer.observe(topScrollMark)
             this.$options.$observer.observe(bottomScrollMark)
-        },
-
-        _disableScrollWatcher() {
-            if (!this.$options.$observer) return
-
-            this.$options.$observer.disconnect()
-            this.$options.$observer = null
         }
     }
 }

package/components/4_pages/_AwPageHeader.vue

@@ -1,5 +1,13 @@
 <template>
-    <div class="aw-page-header" :class="{ 'aw-page-header--primary': primary }">
+    <div
+        class="aw-page-header"
+        :class="{
+            'aw-page-header--primary': primary,
+            'aw-page-header--is-stuck': isStuck,
+            'aw-page-header--container': container !== 'full'
+        }"
+        :style="{ '--header-container-width': headerContainerWidth }"
+    >
         <div class="aw-page-header__breadcrumbs">
             <slot name="breadcrumbs"> </slot>
         </div>
@@ -48,16 +56,40 @@ export default {
             default: ''
         },
 
+        container: {
+            type: String,
+            default: 'full'
+        },
+
         hideTitle: Boolean,
 
         hideMenu: Boolean,
 
-        primary: Boolean
+        primary: Boolean,
+
+        isStuck: Boolean
     },
 
     computed: {
         showProgress() {
             return isType('Number', this.progress)
+        },
+
+        headerContainerWidth() {
+            let name = ''
+
+            switch (this.container) {
+                case 'default':
+                    name = '--container-width'
+                    break
+                case 'small':
+                    name = '--container-small-width'
+                    break
+            }
+
+            return name
+                ? `var(${name}, calc(100% + 2 * var(--header-padding-horizontal)))`
+                : null
         }
     }
 }

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -17,11 +17,13 @@
                 class="aw-mobile-menu-item__icon-bg"
                 :style="iconColor"
             >
-                <AwIcon
-                    :name="(active && iconActive) || icon"
-                    size="24"
-                    class="aw-mobile-menu-item__icon"
-                />
+                <slot name="icon">
+                    <AwIcon
+                        :name="(active && iconActive) || icon"
+                        size="24"
+                        class="aw-mobile-menu-item__icon"
+                    />
+                </slot>
             </span>
 
             <span class="aw-mobile-menu-item__text" tabindex="-1">

package/mixins/page.js

@@ -24,6 +24,12 @@ export default {
         }
     },
 
+    data() {
+        return {
+            isHeaderStuck: false
+        }
+    },
+
     head() {
         return {
             title: this.metaTitle || this.title || undefined
@@ -31,6 +37,10 @@ export default {
     },
 
     computed: {
+        isDesktop() {
+            return this.$screen.lg || false
+        },
+
         backUrl() {
             if (!this.breadcrumb) return null
 
@@ -54,5 +64,53 @@ export default {
         _hasBreadcrumb() {
             return this.breadcrumb ? !!this.breadcrumb.href : false
         }
+    },
+
+    watch: {
+        isDesktop() {
+            if (this.$options.$observer) {
+                this.$nextTick(() => {
+                    this._disableScrollWatcher()
+                    this._initScrollWatcher()
+                })
+            }
+        }
+    },
+
+    mounted() {
+        this._initScrollWatcher()
+    },
+
+    beforeDestory() {
+        this._disableScrollWatcher()
+    },
+
+    methods: {
+        _initScrollWatcher() {
+            if (this.$options.$observer) return
+
+            const { topScrollMark } = this.$refs
+
+            if (!topScrollMark) return
+
+            this.$options.$observer = new IntersectionObserver((entries) => {
+                for (let i = 0; i < entries.length; i++) {
+                    const entry = entries[i]
+
+                    if (entry.target === topScrollMark) {
+                        this.isHeaderStuck = !entry.isIntersecting
+                    }
+                }
+            })
+
+            this.$options.$observer.observe(topScrollMark)
+        },
+
+        _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.99.0",
+    "version": "2.100.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "1b79780032eecf84dc91941f9d11fbebcd1f97ae"
+    "gitHead": "d3cadf5921e51b1a8f4af71e028928a7f072733c"
 }

package/tailwind/container.js

@@ -14,7 +14,9 @@ module.exports = function({ addComponents, theme }) {
     const container = [
         {
             ':root': {
-                '--container-padding': paddingDefault
+                '--container-padding': paddingDefault,
+                '--container-width': maxWidth,
+                '--container-small-width': smallWidth
             },
             '.container, .container-fluid, .container-small': _.merge(
                 { width: '100%' },