@awes-io/ui 2.98.2 → 2.100.0

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/1_atoms/AwTag.vue

@@ -30,6 +30,11 @@ export default {
         text: {
             type: String,
             required: true
+        },
+
+        icon: {
+            type: String,
+            default: null
         }
     },
 

package/components/2_molecules/_AwSelectFakeInput.vue

@@ -23,7 +23,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"

package/components/3_organisms/AwToggleShowAside.vue

@@ -0,0 +1,190 @@
+<template>
+    <div
+        class="aw-toggle-show-aside"
+        :class="{
+            'aw-toggle-show-aside--hide':
+                !isShown && !isShownOnMouse && !isShownOnBtn,
+            'aw-toggle-show-aside--reverse': reverse,
+            'aw-toggle-show-aside--shadow':
+                (!isShown && isShownOnMouse) || (!isShown && isShownOnBtn)
+        }"
+    >
+        <div class="aw-toggle-show-aside__btn-wrapper">
+            <button
+                v-tooltip="
+                    isAttachedKeyListener && isVisibleTooltip
+                        ? {
+                              content: $t(
+                                  `${isShown ? 'Collapse' : 'Expand'} {key}`,
+                                  {
+                                      key: toggleKeyHTML
+                                  }
+                              ),
+                              placement: reverse ? 'left' : 'right',
+                              flip: false
+                          }
+                        : null
+                "
+                class="aw-toggle-show-aside__arrow-btn"
+                @click="onClickToggleShown"
+                @mouseenter="onMouseEnterBtn"
+                @mouseleave="onMouseLeaveBtn"
+            >
+                <AwIconSystemMono
+                    class="aw-toggle-show-aside__arrow-btn-icon"
+                    :class="{
+                        'aw-toggle-show-aside__arrow-btn-icon--reverse': !isShown
+                    }"
+                    :name="reverse ? 'angle-r' : 'angle'"
+                    size="16"
+                />
+            </button>
+        </div>
+
+        <div
+            class="w-full h-full overflow-hidden"
+            @mousemove="onMouseEnterShowSubmenu"
+            @mouseleave="onMouseLeaveHideSubmenu"
+        >
+            <slot v-if="isShown || isShownOnMouse || isShownOnBtn" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { conf } from '@AwUtils/component'
+import { AwToggleShowAside as _config } from '@AwConfig'
+import { toggleEvents } from '@AwUtils/events'
+
+export default {
+    name: 'AwToggleShowAside',
+
+    _config,
+
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+
+        reverse: Boolean,
+
+        isAttachedKeyListener: {
+            type: Boolean,
+            default() {
+                return conf(this, 'isAttachedKeyListener')
+            }
+        },
+
+        options: {
+            type: Object,
+            default() {
+                return conf(this, 'options')
+            }
+        }
+    },
+
+    data: () => ({
+        isShown: true,
+        isShownOnMouse: false,
+        isShownOnBtn: false,
+        isVisibleTooltip: true
+    }),
+
+    computed: {
+        toggleKey() {
+            return this.reverse ? ']' : '['
+        },
+
+        toggleKeyHTML() {
+            return '<kbd>' + this.toggleKey + '</kbd>'
+        }
+    },
+
+    watch: {
+        isAttachedKeyListener: {
+            handler: 'toggleKeyListener',
+            immediate: true
+        }
+    },
+
+    beforeMount() {
+        let state = localStorage.getItem(this.name)
+
+        if (!state) {
+            localStorage.setItem(this.name, 'true')
+        } else {
+            this.isShown = state.toLowerCase() === 'true'
+        }
+    },
+
+    beforeDestroy() {
+        if (this.isAttachedKeyListener) {
+            this.toggleKeyListener(false)
+        }
+    },
+
+    methods: {
+        toggleKeyListener(enable = false) {
+            toggleEvents(
+                window,
+                [['keydown', this.onKeyDownToggleShown]],
+                enable
+            )
+        },
+
+        toggleShown() {
+            this.isShown = !this.isShown
+
+            if (!this.isShown) {
+                this.isShownOnBtn = false
+            }
+
+            localStorage.setItem(this.name, `${this.isShown}`)
+
+            this.$emit('toggle', this.isShown)
+        },
+
+        onClickToggleShown($event) {
+            this.isVisibleTooltip = false
+            this.toggleShown()
+
+            setTimeout(() => {
+                this.isVisibleTooltip = true
+            }, 0)
+        },
+
+        onKeyDownToggleShown(event) {
+            if (event.key === this.toggleKey) {
+                this.toggleShown()
+            }
+        },
+
+        onMouseEnterShowSubmenu() {
+            clearTimeout(this._mouseTm)
+
+            this._mouseTm = setTimeout(() => {
+                this.isShownOnMouse = true
+            }, this.options.showTimeout)
+        },
+
+        onMouseLeaveHideSubmenu() {
+            clearTimeout(this._mouseTm)
+
+            this._mouseTm = setTimeout(() => {
+                this.isShownOnMouse = false
+            }, this.options.hideTimeout)
+        },
+
+        onMouseEnterBtn() {
+            if (this.isShownOnMouse) {
+                this.isShownOnBtn = true
+            }
+        },
+
+        onMouseLeaveBtn() {
+            this.isShownOnBtn = false
+        }
+    }
+}
+</script>

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
         }
     }
 }