@awes-io/ui 2.75.0 → 2.76.0

package/components/1_atoms/AwProgress.vue

@@ -0,0 +1,68 @@
+<template>
+    <div
+        class="aw-progress"
+        :style="{ '--progress': progressRatio, '--color': fgColor }"
+    ></div>
+</template>
+
+<script>
+import anime from 'animejs'
+import { clamp } from 'rambdax'
+import { toColor } from '@AwUtils/styles'
+
+export default {
+    name: 'AwProgress',
+
+    props: {
+        progress: {
+            type: Number,
+            default: 0
+        },
+
+        prevValueParam: {
+            type: String,
+            default: 'prev_progress'
+        },
+
+        color: {
+            type: String,
+            default: 'accent'
+        }
+    },
+
+    data() {
+        return {
+            value: parseInt(this.$route.query[this.prevValueParam]) || 0
+        }
+    },
+
+    computed: {
+        progressRatio() {
+            return (clamp(0, 100, this.value) / 100).toFixed(4)
+        },
+
+        fgColor() {
+            return toColor(this.color)
+        }
+    },
+
+    watch: {
+        progress: 'animate'
+    },
+
+    mounted() {
+        this.animate()
+    },
+
+    methods: {
+        animate() {
+            anime({
+                targets: this,
+                value: this.progress,
+                duration: 1000,
+                easing: 'easeOutCirc'
+            })
+        }
+    }
+}
+</script>

package/components/2_molecules/AwEmptyContainer.vue

@@ -0,0 +1,104 @@
+<template>
+    <AwCard>
+        <div
+            ref="container"
+            class="aw-empty-container"
+            :class="{ 'aw-empty-container--visible': isVisible }"
+        >
+            <slot name="icon">
+                <AwIcon
+                    v-if="icon"
+                    :name="icon"
+                    :size="iconSize"
+                    :style="{ fill: _iconColor }"
+                />
+            </slot>
+
+            <AwSubHeadline v-if="title" class="m-0">{{ title }}</AwSubHeadline>
+
+            <slot name="buttons"></slot>
+        </div>
+    </AwCard>
+</template>
+
+<script>
+import anime from 'animejs'
+import { toColor } from '@AwUtils/styles'
+
+export default {
+    name: 'AwEmptyContainer',
+
+    props: {
+        icon: {
+            type: String,
+            default: ''
+        },
+
+        iconSize: {
+            type: Number,
+            default: 60
+        },
+
+        iconColor: {
+            type: String,
+            default: 'mono-500'
+        },
+
+        title: {
+            type: String,
+            default: ''
+        }
+    },
+
+    data() {
+        return {
+            isVisible: true
+        }
+    },
+
+    computed: {
+        _iconColor() {
+            return this.iconColor ? toColor(this.iconColor) : null
+        }
+    },
+
+    beforeMount() {
+        this.isVisible = false
+    },
+
+    mounted() {
+        this.prepare()
+
+        this.isVisible = true
+
+        setTimeout(this.animate, 200)
+    },
+
+    methods: {
+        prepare() {
+            anime.set(this._getElements(), {
+                opacity: 0,
+                translateY: '0.5rem',
+                transition: 'none'
+            })
+        },
+
+        animate() {
+            anime.set(this._getElements(), { transition: null })
+
+            anime({
+                targets: this._getElements(),
+                opacity: 1,
+                translateY: 0,
+                delay: anime.stagger(120),
+                easing: 'easeOutCirc',
+                duration: 240
+            })
+        },
+
+        _getElements() {
+            return this.$refs.container?.children || []
+        }
+    }
+}
+</script>

package/components/3_organisms/AwCropper.vue

@@ -3,6 +3,7 @@
         v-show="!!croppie"
         class="aw-cropper"
         :style="{ width: totalWidth + 'px' }"
+        :class="{ 'aw-cropper--square': square }"
     >
         <!-- image wrapped because of Croppie -->
         <div class="aw-cropper__croppie">
@@ -83,7 +84,9 @@ export default {
         quality: {
             type: [String, Number],
             default: 1
-        }
+        },
+
+        square: Boolean
     },
 
     data() {

package/components/3_organisms/AwIslandAvatar.vue

@@ -16,6 +16,8 @@
                     :name="name || title"
                     :type="name || title ? 'initials' : 'no-img'"
                     :loading="loading"
+                    :square="squareAvatar"
+                    :size="avatarSize"
                     class="aw-island-avatar__icon-userpic"
                 />
                 <button
@@ -210,7 +212,14 @@ export default {
             default: true
         },
 
-        truncateDescription: Boolean
+        truncateDescription: Boolean,
+
+        squareAvatar: Boolean,
+
+        avatarSize: {
+            type: [Number, String],
+            default: null
+        }
     },
 
     data() {

package/components/3_organisms/AwTags.vue

@@ -93,7 +93,7 @@ export default {
         getColor(str) {
             const index = memoizedHasher(str, this.colors.length)
 
-            return this.colors[index]
+            return this.colors[index].onColor
         },
 
         _emitOnClick($event) {

package/components/4_pages/AwPage.vue

@@ -112,30 +112,21 @@
 
 <script>
 import { pathOr } from 'rambdax'
+import pageMixin from '@AwMixins/page'
 import AwBottomBar from '@AwOrganisms/AwBottomBar.vue'
 import AwPageHeadline from '@AwPages/_AwPageHeadline.vue'
 
 export default {
     name: 'AwPage',
 
+    mixins: [pageMixin],
+
     components: {
         AwBottomBar,
         AwPageHeadline
     },
 
     props: {
-        // Main headline on the page
-        title: {
-            type: String,
-            default: ''
-        },
-
-        // Meta title (`title` prop if not provided)
-        metaTitle: {
-            type: String,
-            default: ''
-        },
-
         titleTag: {
             type: String,
             default: null
@@ -147,15 +138,6 @@ export default {
             default: () => []
         },
 
-        // Breadcrumb object with title and href to return back
-        breadcrumb: {
-            type: Object,
-            default: null,
-            validator(params) {
-                return params ? typeof params.href !== 'undefined' : true
-            }
-        },
-
         // A prop to toggle page fullscreen mode
         fullscreen: Boolean,
 
@@ -185,18 +167,6 @@ export default {
         }
     },
 
-    head() {
-        let title = this.metaTitle || this.title
-
-        // if (this._breadcrumb) {
-        //     title = this._breadcrumb.text + ' / ' + title
-        // }
-
-        return {
-            title
-        }
-    },
-
     data() {
         return {
             isFullscreen: false,
@@ -205,14 +175,6 @@ export default {
     },
 
     computed: {
-        _title() {
-            return this.title
-        },
-
-        _hasBreadcrumb() {
-            return this.breadcrumb ? !!this.breadcrumb.href : false
-        },
-
         _hideBottomBar() {
             return this.hideBottomBar === null
                 ? this._hasBreadcrumb

package/components/4_pages/AwPageSingle.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="aw-page-single">
+        <AwPageHeader
+            ref="header"
+            :progress="headerProgress"
+            :primary="$screen.lg || isHeaderStuck"
+            :title="_title"
+            :hide-title="!$screen.lg && !isHeaderStuck"
+            :hide-menu="hideMenu"
+            class="aw-page-single__header"
+            :class="{ 'aw-page-single__header--is-stuck': isHeaderStuck }"
+        >
+            <template #breadcrumbs>
+                <slot name="breadcrumb">
+                    <AwButton
+                        theme="ghost"
+                        color="default"
+                        :href="backUrl"
+                        :aria-label="breadcrumb?.title ?? $t('Back')"
+                        v-on="backUrl ? null : { click: () => $router.back() }"
+                    >
+                        <template #icon>
+                            <AwIconSystemMono name="arrow" />
+                        </template>
+                    </AwButton>
+                </slot>
+
+                <slot name="after-breadcrumb" />
+            </template>
+
+            <template #default>
+                <slot name="buttons"></slot>
+
+                <AwButton
+                    v-if="actionButton && $screen.lg"
+                    v-bind="actionButton"
+                    size="md"
+                    @click="$emit('action')"
+                />
+            </template>
+        </AwPageHeader>
+
+        <div
+            class="aw-page-single__container"
+            :class="{
+                'aw-page-single__container--preview': isPreviewContainer,
+                container: containerType === 'default',
+                'container-fluid': containerType === 'full'
+            }"
+        >
+            <div class="aw-page-single__mobile-title" aria-hidden="true">
+                {{ _title }}
+            </div>
+
+            <AwDescription
+                v-if="!$screen.lg && description"
+                class="aw-page-single__mobile-description"
+                tag="div"
+            >
+                {{ description }}
+            </AwDescription>
+
+            <div
+                ref="topScrollMark"
+                class="aw-page-single__top-scroll-mark"
+                aria-hidden="true"
+            ></div>
+
+            <div
+                class="aw-page-single__content"
+                :class="{
+                    'aw-page-single__content--column': isPreviewContainer
+                }"
+            >
+                <slot />
+            </div>
+
+            <!-- 'aw-page-single__preview--header-sticky': isHeaderStuck -->
+            <div
+                v-if="hasPreview"
+                class="aw-page-single__preview"
+                :class="{
+                    'aw-page-single__preview--reverse': reverse,
+                    'aw-page-single__preview--column': isPreviewContainer
+                }"
+            >
+                <slot name="preview" />
+            </div>
+
+            <div
+                v-if="actionButton && !$screen.lg"
+                class="aw-page-single__mobile-action-button"
+                :class="{
+                    'aw-page-single__mobile-action-button--is-stuck': isActionButtonStuck
+                }"
+            >
+                <AwButton
+                    v-bind="actionButton"
+                    size="lg"
+                    @click="$emit('action')"
+                />
+            </div>
+
+            <div
+                ref="bottomScrollMark"
+                class="aw-page-single__bottom-scroll-mark"
+                aria-hidden="true"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { isType } from 'rambdax'
+import pageMixin from '@AwMixins/page'
+
+const CONTAINER_TYPES = ['default', 'full']
+
+export default {
+    name: 'AwPageSingle',
+
+    components: {
+        AwPageHeader: () => import('@AwPages/_AwPageHeader.vue')
+    },
+
+    mixins: [pageMixin],
+
+    props: {
+        headerProgress: {
+            type: Number,
+            default: null
+        },
+
+        action: {
+            type: Object,
+            default: null
+        },
+
+        container: {
+            type: String,
+            default: null
+        },
+
+        description: {
+            type: String,
+            default: ''
+        },
+
+        reverse: Boolean,
+
+        hideMenu: Boolean
+    },
+
+    data() {
+        return {
+            isHeaderStuck: false,
+            isActionButtonStuck: false
+        }
+    },
+
+    computed: {
+        containerType() {
+            return CONTAINER_TYPES.includes(this.container)
+                ? this.container
+                : null
+        },
+
+        isPreviewContainer() {
+            return this.containerType === null
+        },
+
+        hasPreview() {
+            return this.$scopedSlots.preview || this.$slots.preview
+        },
+
+        actionButton() {
+            if (!isType('Object', this.action)) {
+                return null
+            }
+
+            return this.action
+        }
+    },
+
+    mounted() {
+        this._initScrollWatcher()
+    },
+
+    methods: {
+        _initScrollWatcher() {
+            if (this.$options.$observer) return
+
+            const { topScrollMark, bottomScrollMark } = this.$refs
+
+            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
+                    }
+
+                    if (entry.target === bottomScrollMark) {
+                        this.isActionButtonStuck = !entry.isIntersecting
+                    }
+                }
+            })
+
+            this.$options.$observer.observe(topScrollMark)
+            this.$options.$observer.observe(bottomScrollMark)
+
+            this.$once('hook:beforeDestroy', () => {
+                this.$options.$observer.disconnect()
+                this.$options.$observer = null
+            })
+        }
+    }
+}
+</script>

package/components/4_pages/_AwPageHeader.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="aw-page-header" :class="{ 'aw-page-header--primary': primary }">
+        <div class="aw-page-header__breadcrumbs">
+            <slot name="breadcrumbs"> </slot>
+        </div>
+
+        <h1
+            v-if="title"
+            class="aw-page-header__title"
+            :class="{ 'sr-only': hideTitle }"
+        >
+            {{ title }}
+        </h1>
+
+        <div class="aw-page-header__buttons">
+            <slot>
+                <!-- <EwSupportChat /> -->
+            </slot>
+
+            <AwUserMenu v-if="!hideMenu" outline vertical caret />
+        </div>
+
+        <slot name="progress">
+            <AwProgress v-if="showProgress" :progress="progress" />
+        </slot>
+    </div>
+</template>
+
+<script>
+import { isType } from 'rambdax'
+
+export default {
+    name: 'AwPageHeader',
+
+    components: {
+        AwProgress: () => import('@AwAtoms/AwProgress.vue'),
+        AwUserMenu: () => import('@AwLayouts/_AwUserMenu.vue')
+    },
+
+    props: {
+        progress: {
+            type: Number,
+            default: null
+        },
+
+        title: {
+            type: String,
+            default: ''
+        },
+
+        hideTitle: Boolean,
+
+        hideMenu: Boolean,
+
+        primary: Boolean
+    },
+
+    computed: {
+        showProgress() {
+            return isType('Number', this.progress)
+        }
+    }
+}
+</script>

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -9,7 +9,13 @@
         v-on="$listeners"
     >
         <slot v-bind="$props">
-            <span class="aw-icon-menu-item__icon-block" tabindex="-1">
+            <span
+                class="aw-icon-menu-item__icon-block"
+                tabindex="-1"
+                v-tooltip:right="
+                    tooltip ? { content: text, offset: [0, -6] } : null
+                "
+            >
                 <AwIcon
                     :name="(active && iconActive) || icon"
                     :size="size"
@@ -72,7 +78,7 @@ export default {
 
         size: {
             type: [String, Number],
-            default: 24
+            default: 18
         },
 
         active: Boolean,

package/components/5_layouts/_AwUserMenu.vue

@@ -10,12 +10,24 @@
         <slot name="user">
             <button
                 class="aw-user-menu__user focus-outline"
+                :class="{ 'aw-user-menu__user--outline': outline }"
                 aria-haspopup="true"
                 :aria-label="$t('Open menu')"
                 @focus="openDropdown"
                 @mouseenter="openDropdown"
             >
-                <AwAvatar v-bind="user" size="40" tabindex="-1" />
+                <AwAvatar
+                    v-bind="user"
+                    :size="outline ? 24 : 40"
+                    tabindex="-1"
+                />
+
+                <AwIconSystemMono
+                    v-if="caret"
+                    name="angle"
+                    class="transform transition duration-100"
+                    :class="{ 'rotate-90': isOpened, 'rotate-270': !isOpened }"
+                />
             </button>
         </slot>
 
@@ -23,8 +35,9 @@
             <AwDropdown
                 ref="dropdown"
                 class="aw-user-menu__menu"
+                :show.sync="isOpened"
                 :options="{
-                    placement: 'right-end',
+                    placement: vertical ? 'bottom-end' : 'right-end',
                     modifiers: [{ name: 'offset', options: { offset: [4, 8] } }]
                 }"
             >
@@ -111,12 +124,26 @@ export default {
         AwNavItem
     },
 
+    props: {
+        vertical: Boolean,
+
+        outline: Boolean,
+
+        caret: Boolean
+    },
+
     inject: {
         layoutProvider: {
             default: null
         }
     },
 
+    data() {
+        return {
+            isOpened: false
+        }
+    },
+
     computed: {
         ...mapGetters('awesIo', ['user']),