@awes-io/ui 2.75.0 → 2.77.0

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']),
 

package/mixins/page.js

@@ -0,0 +1,58 @@
+import { getPath } from '@AwUtils/router'
+
+export default {
+    props: {
+        // Main headline on the page
+        title: {
+            type: String,
+            default: ''
+        },
+
+        // Meta title (`title` prop if not provided)
+        metaTitle: {
+            type: String,
+            default: ''
+        },
+
+        // Breadcrumb object with title and href to return back
+        breadcrumb: {
+            type: Object,
+            default: null,
+            validator(params) {
+                return params ? typeof params.href !== 'undefined' : true
+            }
+        }
+    },
+
+    head() {
+        return {
+            title: this.metaTitle || this.title || undefined
+        }
+    },
+
+    computed: {
+        backUrl() {
+            if (!this.breadcrumb) return null
+
+            if (this.$store.state.awesIo.backRoute) {
+                const { from: _from, to } = this.$store.state.awesIo.backRoute
+
+                if (getPath(_from) === getPath(this.$route)) {
+                    return to
+                } else {
+                    return this.breadcrumb.href
+                }
+            }
+
+            return this.breadcrumb.href
+        },
+
+        _title() {
+            return this.title
+        },
+
+        _hasBreadcrumb() {
+            return this.breadcrumb ? !!this.breadcrumb.href : false
+        }
+    }
+}

package/nuxt/awes.config.js

@@ -2,7 +2,7 @@ import styles from '../assets/js/styles'
 
 export default {
     logo: {
-        src: 'https://static.awes.io/logo-blue_white.svg',
+        src: 'https://static.awes.io/logo-blue.svg',
         alt: 'Awes.io'
     },
 
@@ -23,7 +23,7 @@ export default {
 
 export const dark = {
     logo: {
-        src: 'https://static.awes.io/logo-blue.svg',
+        src: 'https://static.awes.io/logo-blue_white.svg',
         alt: 'Awes.io'
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.75.0",
+    "version": "2.77.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -51,6 +51,7 @@
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/svg-sprite": "^0.5.2",
         "@popperjs/core": "^2.0.5",
+        "animejs": "^3.2.1",
         "autosize": "^4.0.2",
         "axios": "^0.27.2",
         "body-scroll-lock": "^2.6.4",
@@ -112,5 +113,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "f06e4e7b83c40ecd59abd6f4249b00ce89d8a7b5"
+    "gitHead": "c25bfd73e3141b0aed68fc34d181000dbbd53d16"
 }

package/tailwind/container.js

@@ -8,7 +8,7 @@ module.exports = function({ addComponents, theme }) {
 
     const containerCenter = theme('container.center', true)
 
-    const maxWidth = theme('container.maxWidth', '1200px')
+    const maxWidth = theme('container.maxWidth', '1260px')
     const smallWidth = theme('container.smallWidth', '580px')
 
     const container = [

package/tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
             full: '9999px'
         },
         container: {
-            maxWidth: '1250px',
+            maxWidth: '1260px',
             smallWidth: '580px',
             padding: {
                 default: '1rem',
@@ -128,6 +128,9 @@ module.exports = {
                     '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05)',
                 button: '2px 2px 4px rgba(0, 0, 0, 0.15)',
                 'button-active': '1px 1px 2px rgba(0, 0, 0, 0.15)'
+            },
+            rotate: {
+                '270': '270deg'
             }
         }
     },