@awes-io/ui 2.75.0 → 2.76.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.76.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.75.0...@awes-io/ui@2.76.0) (2023-10-25)
+
+
+### Features
+
+* add square classes for cropper and avatar ([ed653b7](https://github.com/awes-io/client/commit/ed653b722f898234636cac914b26f6b40a10e240))
+* aw-page-single component added ([10f90ee](https://github.com/awes-io/client/commit/10f90eecfe17e2942dd1562c32f3c90626cfb0c3))
+
+
+
+
+
 # [2.75.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.1...@awes-io/ui@2.75.0) (2023-10-12)
 
 

package/assets/css/components/_index.css

@@ -31,6 +31,7 @@
 @import './context-menu.css';
 @import './description.css';
 @import './download-link.css';
+@import './empty-container.css';
 
 @import './dropdown.css';
 @import './dropdown-button.css';
@@ -65,7 +66,10 @@
 @import './page.css';
 @import './page-modal.css';
 @import './page-menu-buttons.css';
+@import './page-header.css';
 @import './page-headline.css';
+@import './page-single.css';
+@import './progress.css';
 
 @import './modal.css';
 @import './model-edit.css';

package/assets/css/components/avatar.css

@@ -13,6 +13,14 @@
     min-height: var(--ui-avatar-size, 2.25rem);
     border-radius: var(--ui-avatar-size, 2.25rem);
 
+    &--square {
+        border-radius: 20%;
+
+        &.aw-avatar > * {
+            border-radius: 20%;
+        }
+    }
+
     & > * {
         grid-row: 1 / -1;
         grid-column: 1 / -1;
@@ -27,7 +35,6 @@
     }
 
     & > :not(img):not(&__no-img-icon) {
-        @apply bg-mono-400 text-on-overlay;
         text-align: center;
         font-size: var(--ui-avatar-font-size);
     }

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

@@ -1,7 +1,6 @@
 .aw-button-nav {
     display: inline-flex;
     font-size: theme('fontSize.sm');
-    @apply bg-mono-900;
     border: none;
     border-radius: 0.625rem;
 
@@ -22,6 +21,8 @@
     }
 
     &__toggler {
+        @apply bg-mono-800;
+
         position: relative;
         flex-shrink: 0;
         padding: 0;

package/assets/css/components/button.css

@@ -31,7 +31,7 @@
         justify-content: center;
         width: 100%;
         transition: 100ms opacity;
-        font-size: 14px;
+        font-size: 0.875rem;
         line-height: 1.125rem;
 
         &:focus {
@@ -82,6 +82,7 @@
     &:focus > &__content {
         /* opacity: 0.15; */
         outline: theme('focusOutline', 'none');
+        height: 100%;
     }
 
     /**
@@ -117,13 +118,10 @@
     }
 
     &__content_md {
-        @apply px-4 text-sm leading-4;
+        @apply p-4 text-sm leading-4;
 
-        padding-top: 1rem;
-        padding-bottom: 1rem;
         min-width: 3rem;
         min-height: 3rem;
-        height: 100%;
     }
 
     &.theme-icon &__content_md,
@@ -554,6 +552,10 @@
     box-shadow: none;
 }
 
+.aw-button.color-default .aw-icon {
+    @apply text-mono-400;
+}
+
 @screen lg {
     .aw-button.aw-button_md.theme-solid,
     .aw-button.aw-button_md .aw-button__overlay,
@@ -566,8 +568,7 @@
     }
 
     .aw-button__content_md {
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding: 0.75rem;
         min-width: 2.5rem;
         min-height: 2.5rem;
     }

package/assets/css/components/cropper.css

@@ -5,6 +5,14 @@
     margin-left: auto;
     margin-right: auto;
 
+    &.aw-cropper--square {
+        .croppie-container {
+            .cr-viewport {
+                border-radius: 20%;
+            }
+        }
+    }
+
     &__croppie {
         position: relative;
     }

package/assets/css/components/empty-container.css

@@ -0,0 +1,8 @@
+.aw-empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    padding: 1.5rem 0;
+}

package/assets/css/components/icon-menu-item.css

@@ -47,10 +47,10 @@
     &__text {
         display: block;
 
-        font-size: 0.5625rem;
+        font-size: 0.5rem;
         font-weight: 400;
-        line-height: 0.625rem;
-        color: var(--c-mono-400);
+        line-height: 0.58625rem;
+        color: var(--c-mono-300);
         transition: 60ms color;
 
         text-align: center;
@@ -59,6 +59,8 @@
         text-overflow: ellipsis;
         overflow: hidden;
         width: 100%;
+
+        margin-top: 0.25rem;
     }
 
     &__icon-badge {

package/assets/css/components/main.css

@@ -8,9 +8,9 @@
 
 @screen lg {
     :root {
-        --header-padding-bottom: 1.5rem;
-        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1.5rem));
+        --header-padding-bottom: 1rem;
+        --header-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-padding-bottom, 1rem));
         --header-padding: var(--header-padding-top) var(--header-padding-horizontal) var(--header-padding-bottom);
-        --header-height: calc(env(safe-area-inset-top, 0px) + 5.5rem);
+        --header-height: calc(env(safe-area-inset-top, 0px) + 4.5rem);
     }
 }

package/assets/css/components/nav.css

@@ -66,7 +66,7 @@
                 margin-left: 5px;
                 margin-top: -3px;
                 border-radius: 50%;
-                background-color: var(--c-accent, green);
+                background-color: var(--c-mono-100, green);
 
                 position: absolute;
                 left: theme('spacing.8');

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

@@ -0,0 +1,61 @@
+.aw-page-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: var(--header-padding-top) 1.5rem var(--header-padding-bottom);
+    height: var(--header-height);
+
+    position: relative;
+
+    .aw-progress {
+        position: absolute;
+        bottom: 2px;
+        left: 0;
+    }
+
+    &--primary {
+        @apply bg-surface;
+    }
+
+    &__title {
+        @apply font-body;
+
+        flex: 1 0 50%;
+
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        margin: 0;
+
+        font-size: 0.875rem;
+        line-height: 1.4285;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    &__breadcrumbs,
+    &__buttons {
+        flex: 1 1 25%;
+
+        display: flex;
+        gap: 1rem;
+    }
+
+    &__buttons {
+        justify-content: flex-end;
+    }
+}
+
+@screen lg {
+    .aw-page-header {
+        padding-left: 2.5rem;
+        padding-right: 2.5rem;
+
+        &__title {
+            font-size: 1.25rem;
+            line-height: 1.2;
+        }
+    }
+}

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

@@ -0,0 +1,186 @@
+.aw-page-single {
+    @apply bg-page-bg;
+
+    display: flex;
+    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;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+    }
+
+    &__mobile-title {
+        order: -4;
+
+        padding: 0 1.5rem;
+
+        font-size: 1.5rem;
+        line-height: 1;
+        font-weight: bold;
+    }
+
+    &__mobile-description {
+        order: -3;
+
+        padding: 0 1.5rem;
+        margin-top: -1rem;
+    }
+
+    &__preview {
+        &--reverse {
+            order: -1;
+        }
+    }
+
+    &__top-scroll-mark {
+        order: -3;
+        height: 1px;
+        margin-top: -1.5rem;
+        margin-bottom: -1px;
+    }
+
+    &__mobile-action-button {
+        display: grid;
+
+        padding: 1rem 2rem;
+
+        position: sticky;
+        bottom: 0;
+
+        &--is-stuck {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(5px);
+        }
+    }
+
+    &__bottom-scroll-mark {
+        margin-top: -1.5rem;
+    }
+}
+
+@screen sm {
+    .aw-page-single {
+        &__container--preview {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+
+        &__mobile-title,
+        &__mobile-description {
+            padding: 0;
+        }
+
+        &__mobile-action-button {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+
+            margin-left: -1.5rem;
+            margin-right: -1.5rem;
+        }
+    }
+}
+
+@screen lg {
+    .aw-page-single {
+        &__header {
+            position: sticky;
+            top: 0;
+
+            &--is-stuck {
+                animation: none;
+            }
+        }
+
+        &__container {
+            padding-top: 2rem;
+            padding-bottom: 10rem;
+
+            &--preview {
+                display: grid;
+                grid-template-columns: minmax(1rem, 1fr) minmax(0, max-content);
+                justify-content: center;
+                align-content: start;
+                gap: 0;
+
+                padding-left: 2.5rem;
+                padding-right: 2.5rem;
+                margin: 0 auto;
+                max-width: 70.25rem;
+            }
+        }
+
+        &__mobile-title,
+        &__mobile-description {
+            display: none;
+        }
+
+        &__top-scroll-mark {
+            margin-top: calc(-2rem - var(--header-height, 0px));
+            margin-bottom: calc(var(--header-height, 0px) + 0.5rem);
+            grid-column: 1 / -1;
+        }
+
+        &__content--column {
+            width: 40rem;
+            max-width: 100%;
+        }
+
+        &__preview {
+            &--column {
+                align-self: start;
+                order: unset;
+
+                width: 23.75rem;
+                margin-left: 1.5rem;
+
+                position: sticky;
+                top: calc(var(--header-height, 0px) + 2rem);
+            }
+
+            /* &--header-sticky {
+                transition: top 180ms ease-out;
+            } */
+        }
+    }
+}
+
+@keyframes aw-page-single-header-slide {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}

package/assets/css/components/progress.css

@@ -0,0 +1,23 @@
+.aw-progress {
+    height: 0;
+    width: 100%;
+
+    position: relative;
+
+    &::after {
+        content: '';
+        display: block;
+
+        width: 100%;
+        height: 2px;
+        background-color: var(--color);
+
+        transform-origin: left;
+        transform: scaleX(var(--progress));
+
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}

package/assets/css/components/user-menu.css

@@ -9,6 +9,20 @@
 
     &__user {
         cursor: pointer;
+
+        &--outline {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            padding: 0.75rem;
+            border-radius: 0.625rem;
+            box-shadow: 0 0 0 2px var(--c-mono-800) inset;
+
+            &:hover {
+                @apply bg-mono-800;
+            }
+        }
     }
 
     &__header {
@@ -21,7 +35,7 @@
             &__name {
                 font-size: 1rem;
                 line-height: 1.5rem;
-             }
+            }
 
             &__content {
                 margin-left: 0;
@@ -75,7 +89,7 @@
         &.aw-dropdown--desktop {
             max-width: 17.625rem;
             min-width: 17.625rem;
-         }
+        }
     }
 
     &__nav-item {
@@ -113,3 +127,14 @@
         }
     }
 }
+
+@screen lg {
+    .aw-user-menu {
+        &__user {
+            &--outline {
+                padding-top: 0.5rem;
+                padding-bottom: 0.5rem;
+            }
+        }
+    }
+}

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() {