@awes-io/ui 2.75.0 → 2.77.0

package/assets/js/constants.js

@@ -1,3 +1,5 @@
+import { CUSTOM_COLORS, toColor, toOnColor } from './styles'
+
 export const TABLE_INDEX_ATTR = 'data-row-index'
 
 export const TABLE_ROW_CLICK_EVENT = 'click:row'
@@ -10,26 +12,10 @@ export const TABLE_DATA_FETCHED = 'data-fetched'
 
 export const FORM_ENTER_SKIP_ATTR = 'data-enter-skip'
 
-export const COLORS = [
-    '#E0AB61',
-    '#E29D5D',
-    '#E68262',
-    '#E45284',
-    '#DF54BD',
-    '#DA61D9',
-    '#BF55CF',
-    '#AF57DB',
-    '#9C55D3',
-    '#834EE3',
-    '#634EE3',
-    '#594FCF',
-    '#6086E3',
-    '#66B9E4',
-    '#66C3D1',
-    '#66C7B9',
-    '#5CBC98',
-    '#9A6F66'
-]
+export const COLORS = Object.keys(CUSTOM_COLORS).map((color) => ({
+    color: toColor(color),
+    onColor: toOnColor(color)
+}))
 
 export const TEST_ID_ATTR = 'data-testid'
 

package/components/1_atoms/AwAvatar.vue

@@ -1,7 +1,21 @@
 <template>
-    <Component :is="tag" :style="sizeVariables" class="aw-avatar">
+    <Component
+        :is="tag"
+        :style="sizeVariables"
+        class="aw-avatar"
+        :class="{ 'aw-avatar--square': square }"
+    >
         <!-- image  -->
-        <slot v-bind="{ src, name, initials, color, imageError }">
+        <slot
+            v-bind="{
+                src,
+                name,
+                initials,
+                color: color.background,
+                onColor: color.text,
+                imageError
+            }"
+        >
             <img
                 v-if="src && !imageError"
                 :src="src"
@@ -15,7 +29,8 @@
                         (type === 'initials' || type === 'empty')
                 "
                 :style="{
-                    backgroundColor: color
+                    backgroundColor: color.background,
+                    color: color.text
                 }"
             >
                 {{ type === 'initials' ? initials : '' }}
@@ -23,7 +38,12 @@
         </slot>
 
         <!-- no image placeholder -->
-        <slot name="no-img" :initials="initials" :color="color">
+        <slot
+            name="no-img"
+            :initials="initials"
+            :color="color.background"
+            :onColor="color.text"
+        >
             <svg
                 v-if="(imageError || !src) && type === 'no-img'"
                 xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +51,7 @@
                 class="aw-avatar__no-img-icon"
             >
                 <path
-                    :fill="color"
+                    :fill="color.background"
                     d="M248 8a248 248 0 100 496 248 248 0 000-496zm0 96a88 88 0 110 176 88 88 0 010-176zm0 344c-59 0-111-27-146-68 18-36 55-60 98-60l7 1c13 4 27 7 41 7s28-3 41-7l7-1c43 0 80 24 99 60-36 41-88 68-147 68z"
                 />
             </svg>
@@ -49,6 +69,7 @@ import { memoize } from 'rambdax'
 import { hashStringToIndex } from '@AwUtils/string'
 import { conf } from '@AwUtils/component'
 import { AwAvatar as _config } from '@AwConfig'
+import { toColor, toOnColor } from '../../assets/js/styles'
 
 const memoizedHasher = memoize(hashStringToIndex)
 
@@ -109,7 +130,9 @@ export default {
             default() {
                 return conf(this, 'colors')
             }
-        }
+        },
+
+        square: Boolean
     },
 
     data() {
@@ -150,11 +173,19 @@ export default {
 
         // Get random color from the preset list
         color() {
-            if (!this.isColored) return null
+            if (!this.isColored) {
+                return {
+                    background: toColor('mono-400'),
+                    text: toOnColor('mono-400')
+                }
+            }
 
             const index = memoizedHasher(this.name.trim(), this.colors.length)
 
-            return this.colors[index]
+            return {
+                background: this.colors[index]?.onColor,
+                text: this.colors[index]?.color
+            }
         },
 
         isLoading() {

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-100'
+        },
+
+        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() {
@@ -111,6 +114,8 @@ export default {
                 },
                 enableOrientation: true
             })
+
+            setTimeout(() => this.croppie.setZoom(0), 60)
         },
 
         rotate() {

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
@@ -147,7 +149,11 @@
                 :title="$t('Upload avatar')"
                 theme="fullscreen"
             >
-                <AwCropper :src="uploadedAvatar" @save="saveAvatar" />
+                <AwCropper
+                    :src="uploadedAvatar"
+                    @save="saveAvatar"
+                    :square="squareAvatar"
+                />
             </AwModal>
         </template>
     </AwIsland>
@@ -210,7 +216,14 @@ export default {
             default: true
         },
 
-        truncateDescription: Boolean
+        truncateDescription: Boolean,
+
+        squareAvatar: Boolean,
+
+        avatarSize: {
+            type: [Number, String],
+            default: null
+        }
     },
 
     data() {

package/components/3_organisms/AwPagination.vue

@@ -22,12 +22,14 @@
             >
                 <AwIconSystemMono name="arrow" size="16" />
             </AwButton>
+
             <AwButton
                 :data-page="prevPage"
                 :disabled="prevPage === null"
-                theme="icon"
+                theme="ghost"
+                color="default"
                 size="sm"
-                class="hidden lg:inline-flex mr-1"
+                class="aw-button-nav__arrow-btn hidden lg:inline-flex mr-4"
             >
                 <AwIconSystemMono name="arrow" size="16" />
             </AwButton>
@@ -36,7 +38,7 @@
                 {{ $t('Page {page} of {pagesTotal}', { page, pagesTotal }) }}
             </span>
             <div
-                class="hidden lg:inline-flex aw-button-nav aw-button-nav__wrapper"
+                class="hidden lg:inline-flex aw-button-nav aw-button-nav__wrapper aw-button-nav--pagination"
             >
                 <Component
                     v-for="({ component, text }, i) in pageButtons"
@@ -50,7 +52,7 @@
                     }"
                     class="aw-button-nav__toggler"
                 >
-                    <span class="w-8 h-8" tabindex="-1">
+                    <span tabindex="-1">
                         {{ text }}
                     </span>
                 </Component>
@@ -59,12 +61,14 @@
             <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"
-                theme="icon"
                 size="sm"
-                class="hidden lg:inline-flex ml-1"
+                theme="ghost"
+                color="default"
+                class="aw-button-nav__arrow-btn hidden lg:inline-flex ml-4"
             >
                 <AwIconSystemMono name="arrow" rotate="180" size="16" />
             </AwButton>
+
             <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"

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