@awes-io/ui 2.98.2 → 2.100.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.100.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.99.0...@awes-io/ui@2.100.0) (2024-04-04)
+
+
+### Bug Fixes
+
+* **nuxt-auth:** remove auth interceptor fixed ([389b092](https://github.com/awes-io/client/commit/389b092e4d95771104c747b29e8324689624f6d5))
+* fix style in page single ([bb63361](https://github.com/awes-io/client/commit/bb633613ec304753bc9af4336590cfcdbb2d1cca))
+* select native caret properly named ([87cfef9](https://github.com/awes-io/client/commit/87cfef93f6b5c0cba9b84d20bab721705481d791))
+* toggle show aside z-index increeased ([6d6aeb9](https://github.com/awes-io/client/commit/6d6aeb961d7ab6a9185c2b8303d35163dc0c6bc2))
+* typography styles updated ([f998b63](https://github.com/awes-io/client/commit/f998b63107374516647ad31ba799bcddaf152094))
+
+
+### Features
+
+* add new header for aw page ([a2d895a](https://github.com/awes-io/client/commit/a2d895a84182f849db86c0c8a5cee0df077bc428))
+* page headers unified ([00afeb8](https://github.com/awes-io/client/commit/00afeb8655c8c76e8cd96a80734ed77af229bdb0))
+
+
+
+
+
+# [2.99.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.2...@awes-io/ui@2.99.0) (2024-03-25)
+
+
+### Bug Fixes
+
+* toggle show aside moved to organisms ([9783aa1](https://github.com/awes-io/client/commit/9783aa11c288235b1e40f9e08b44ddb4e77b8eb2))
+
+
+### Features
+
+* aside controls from config ([eb4bd0a](https://github.com/awes-io/client/commit/eb4bd0af6369d4034b727c9ce41f3079e3fdbee9))
+* change prefix style in select ([0b5600a](https://github.com/awes-io/client/commit/0b5600a37599682d3bc82589d0cda4318f4d07ef))
+* create new component for toggle aside ([d5fcb35](https://github.com/awes-io/client/commit/d5fcb35b16f3a0d1e47d8bbf478faa4453db4ae5))
+
+
+
+
+
 ## [2.98.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.1...@awes-io/ui@2.98.2) (2024-02-27)
 
 

package/assets/css/components/_index.css

@@ -75,6 +75,7 @@
 @import './page-headline.css';
 @import './page-single.css';
 @import './progress.css';
+@import './toggle-show-aside.css';
 
 @import './modal.css';
 @import './modal-buttons.css';

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

@@ -1,10 +1,15 @@
 .aw-action-button {
     @apply bg-surface;
 
+    --min-header-height: 2.875rem;
+
     display: grid;
     align-items: start;
     grid-template-columns: auto 1fr auto;
-    grid-template-rows: max-content minmax(0, auto);
+    grid-template-rows: minmax(var(--min-header-height), max-content) minmax(
+            0,
+            auto
+        );
     gap: 0 1rem;
 
     padding: 2rem;
@@ -38,12 +43,14 @@
 
     &__text {
         font-size: 1rem;
+        font-weight: 700;
         line-height: 1.5;
         align-self: center;
     }
 
     &__description {
         display: block;
+        font-weight: normal;
         margin-top: 0.25rem;
     }
 
@@ -61,4 +68,11 @@
     &--narrow {
         padding: 1rem;
     }
+
+    & > :where(.aw-action-icon) {
+        margin-top: max(
+            0px,
+            calc((var(--min-header-height) - var(--size)) / 2)
+        );
+    }
 }

package/assets/css/components/description.css

@@ -1,12 +1,6 @@
 .aw-description {
     font-size: theme('fontSize.sm', 0.875rem);
+    line-height: 1.2857;
     color: var(--c-mono-400);
 }
 
-span.aw-description {
-    line-height: 16px;
-}
-
-p.aw-description {
-    line-height: 21px;
-}

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

@@ -66,10 +66,6 @@
         grid-column: 2;
         grid-row: 1 / 6;
 
-        overflow-y: auto;
-
-        scrollbar-width: thin;
-
         &--hidden {
             width: 0px;
         }

package/assets/css/components/layout.css

@@ -19,20 +19,30 @@
             max-width: 5rem;
         }
 
+        &.aw-layout-menu--hide-submenu {
+            max-width: 6rem;
+            z-index: 11;
+        }
+
         & ~ * {
             max-width: calc(100% - 300px);
             margin-left: 300px;
+            transition: max-width ease-in-out 0.3s, margin-left ease-in-out 0.3s;
         }
 
         &.aw-layout-menu--no-submenu ~ * {
             max-width: calc(100% - 5rem);
             margin-left: 5rem;
         }
+
+        &.aw-layout-menu--hide-submenu ~ * {
+            max-width: calc(100% - 6rem);
+            margin-left: 6rem;
+        }
     }
 }
 
 .layout {
-
     &&--default,
     &&--simple {
         position: relative;
@@ -120,7 +130,6 @@
 }
 
 @media (min-width: 35rem) {
-
     .layout {
         &&--frame-center,
         &&--frame-left {
@@ -141,7 +150,6 @@
 
 @media (max-width: 35rem) {
     .layout {
-
         &&--frame-center,
         &&--frame-left {
             background-image: none !important;
@@ -172,7 +180,7 @@
         }
 
         &&--simple &__content {
-           @apply pl-0;
+            @apply pl-0;
         }
 
         &__logo {

package/assets/css/components/nav.css

@@ -1,5 +1,26 @@
 .aw-nav {
-    @apply py-8;
+    @apply pt-8;
+
+    &__wrapper {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+
+        scrollbar-width: thin;
+        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15) rgba(var(--c-on-surface-rgb), 0.1);
+
+        &::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+            background-color: rgba(var(--c-on-surface-rgb), 0.1);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(var(--c-on-surface-rgb), 0.1);
+        }
+
+        max-height: calc(100vh - 5rem);
+        padding-bottom: 2rem;
+    }
 
     &__title {
         @apply text-xl font-heading mb-5 truncate;

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

@@ -2,10 +2,29 @@
     display: flex;
     align-items: center;
     gap: 1rem;
-    padding: var(--header-padding-top) 1.5rem var(--header-padding-bottom);
+
+    padding: var(--header-padding-top) var(--header-padding-horizontal)
+        var(--header-padding-bottom);
     height: var(--header-height);
+    box-shadow: none;
 
     position: relative;
+    z-index: 10;
+
+    transition: none;
+
+    &--is-stuck {
+        @apply bg-surface;
+        width: 100%;
+
+        box-shadow: 0px 10px 20px 0px rgba(0, 19, 106, 0.1);
+
+        transition: 60ms box-shadow 120ms;
+        animation: aw-page-header-slide 180ms ease-out;
+
+        position: sticky;
+        top: 0;
+    }
 
     .aw-progress {
         position: absolute;
@@ -13,14 +32,22 @@
         left: 0;
     }
 
+    &--container {
+        max-width: 100%;
+        width: var(--header-container-width);
+        margin-left: auto;
+        margin-right: auto;
+    }
+
     &--primary {
         @apply bg-surface;
+        width: 100%;
     }
 
     &__title {
         @apply font-body;
 
-        flex: 1 1 50%;
+        flex: 1 1 calc(100% - 6rem);
 
         display: -webkit-box;
         -webkit-line-clamp: 2;
@@ -37,7 +64,7 @@
 
     &__breadcrumbs,
     &__buttons {
-        flex: 1 1 25%;
+        flex: 1 1 3rem;
 
         display: flex;
         gap: 1rem;
@@ -51,27 +78,73 @@
 
 @screen md {
     .aw-page-header {
+        &__title {
+            flex: 10 1 max-content;
+        }
 
-        &__title,
-        &__breadcrumbs {
-            flex: 1 1 calc(100% / 3);
+        &__breadcrumbs,
+        &__buttons {
+            flex: 1 10 calc(100% / 3);
         }
 
         &__buttons {
-            flex: 1 0 auto;
-            min-width: calc(100% / 3);
+            min-width: max-content;
         }
     }
 }
 
 @screen lg {
     .aw-page-header {
-        padding-left: 2.5rem;
-        padding-right: 2.5rem;
+        /* padding-left: 2.5rem;
+        padding-right: 2.5rem; */
 
         &__title {
             font-size: 1.25rem;
             line-height: 1.2;
         }
+
+        &__breadcrumbs {
+            padding-right: 1rem;
+        }
+
+        &--container {
+            gap: 0;
+            width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        :where(&--container) &__breadcrumbs {
+            flex: 0 0
+                calc(
+                    50% - var(--header-container-width) / 2 +
+                        var(--header-padding-horizontal)
+                );
+        }
+
+        :where(&--container) &__title {
+            text-align: left;
+            margin-right: 1rem;
+        }
+
+        :where(&--container) &__buttons {
+            margin-right: max(
+                0px,
+                calc(
+                    50% - var(--header-container-width) / 2 +
+                        var(--header-padding-horizontal)
+                )
+            );
+        }
+    }
+}
+
+@keyframes aw-page-header-slide {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
     }
 }

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

@@ -5,24 +5,6 @@
     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;
 
@@ -45,8 +27,8 @@
 
         padding: 0 1.5rem;
 
-        font-size: 1.5rem;
-        line-height: 1;
+        font-size: 1.25rem;
+        line-height: 1.2;
         font-weight: bold;
     }
 
@@ -121,10 +103,10 @@
         &__header {
             position: sticky;
             top: 0;
+        }
 
-            &--is-stuck {
-                animation: none;
-            }
+        .aw-page-header--is-stuck {
+            animation: none;
         }
 
         &__container {
@@ -179,13 +161,3 @@
         }
     }
 }
-
-@keyframes aw-page-single-header-slide {
-    from {
-        transform: translateY(-100%);
-    }
-
-    to {
-        transform: translateY(0);
-    }
-}

package/assets/css/components/page.css

@@ -88,26 +88,36 @@
 
     /* TODO: remove when block removed */
     &__heading {
-         display: contents;
+        display: contents;
+    }
+
+    &__header {
+        &--is-empty.aw-page-header {
+            display: none;
+        }
+    }
+
+    &__mobile-title {
+        padding: 0;
+
+        font-size: 1.25rem;
+        line-height: 1.2;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+    }
+
+    &__top-scroll-mark {
+        height: 1px;
+        margin-top: -1.5rem;
+        margin-bottom: 1.5rem;
     }
 }
 
 @screen lg {
     .aw-page {
-        &__heading {
-            position: relative;
-
-            &--sticky {
-                position: sticky;
-                top: 0;
-                background-color: var(--c-mono-900);
-                border-bottom-width: 1px;
-                z-index: 1;
-
-                .aw-page-headline__container {
-                    padding-top: 0;
-                }
-            }
+        &__mobile-title,
+        &__top-scroll-mark {
+            display: none;
         }
 
         &__content {

package/assets/css/components/select.css

@@ -69,7 +69,7 @@
 
         .aw-text-field__prefix {
             background: transparent;
-            padding-left: 0.25rem;
+            padding-left: 0.1875rem;
         }
     }
 
@@ -117,7 +117,7 @@
 
         .aw-text-field__prefix {
             background: transparent;
-            padding-left: 0.25rem;
+            padding-left: 0.1875rem;
         }
     }
 

package/assets/css/components/text-field.css

@@ -8,6 +8,10 @@
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
 
+    &--page {
+        background-color: var(--c-page-bg);
+    }
+
     &.aw-search {
         padding-top: 0;
         padding-bottom: 0;
@@ -48,6 +52,11 @@
         margin-bottom: -0.1875rem;
     }
 
+    &--uncolor-prefix &__prefix {
+        background-color: inherit;
+        color: inherit;
+    }
+
     &__prefix {
         @apply rounded-l;
     }
@@ -99,6 +108,10 @@
         }
     }
 
+    &--page &__element {
+        @apply bg-page-bg;
+    }
+
     &__fake-input {
         --icon-width: 2.5rem;
         --icon-count: 0;
@@ -114,6 +127,9 @@
     &.is-select,
     &.is-select &__element {
         cursor: pointer;
+    }
+
+    &.is-select &__element {
         position: relative;
         z-index: 1;
         background-color: transparent;

package/assets/css/components/toggle-show-aside.css

@@ -0,0 +1,81 @@
+.aw-toggle-show-aside {
+    transition: width 300ms ease-in-out 0s;
+    position: relative;
+    z-index: 29;
+
+    &--hide {
+        width: 1rem !important;
+        background: var(--c-surface);
+
+        .aw-toggle-show-aside__btn-wrapper {
+            width: 1rem;
+
+            opacity: 1;
+        }
+    }
+
+    &--shadow {
+        box-shadow: 0 0 4px rgb(0 0 0 / 20%);
+    }
+
+    .aw-toggle-show-aside__btn-wrapper {
+        width: inherit;
+        position: fixed;
+        top: 0;
+
+        transition: 300ms opacity;
+    }
+
+    &:where(:not(&--hide)) &__btn-wrapper {
+        opacity: 0;
+    }
+
+    &:hover &__btn-wrapper {
+        opacity: 1;
+    }
+
+    &__arrow-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        top: 2rem;
+        right: 0;
+
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0.25rem;
+
+        background: var(--c-surface);
+        border: 1px solid var(--c-mono-800);
+        border-radius: 2rem;
+
+        color: var(--c-mono-500);
+        transition: 100ms background-color, 100ms border-color, 100ms color;
+        transform: translateX(50%);
+
+        &:hover {
+            background: var(--c-on-surface);
+            border: 1px solid var(--c-on-surface);
+            color: var(--c-surface);
+        }
+
+        &-icon {
+            flex: none;
+            transition: 300ms transform;
+
+            &--reverse {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    &--reverse {
+        .aw-toggle-show-aside {
+            &__btn-wrapper {
+                width: 0;
+            }
+        }
+    }
+}

package/assets/css/typography.css

@@ -160,12 +160,12 @@
     }
 
     kbd {
-        @apply bg-mono-0 bg-opacity-20 align-middle;
+        @apply bg-mono-0 bg-opacity-20;
         border-radius: 2px;
         display: inline-block;
         white-space: nowrap;
         line-height: 0.875em;
-        font-size: 0.625em;
+        /* font-size: 0.625em; */
         padding: 4px;
         min-width: 16px;
         text-align: center;

package/assets/js/icons/mono.js

@@ -1,8 +1,8 @@
 export const ICONS = {
     angle:
-        'm14.3 18.7-6-6a1 1 0 0 1-.1-1.3l.1-.1 6-6a1 1 0 0 1 1.5 1.3v.1l-5.1 5.4 5 5.2a1 1 0 0 1 .1 1.3v.1a1 1 0 0 1-1.4.1h-.1Z',
+        'm13.29 18.7-6-5.99a1 1 0 0 1-.1-1.3l.1-.11 6-6a1 1 0 0 1 1.5 1.3l-.09.1-5.04 5.38 5.04 5.21a1 1 0 0 1 .1 1.3l-.1.12a1 1 0 0 1-1.3.1l-.11-.1Z',
     'angle-r':
-        'm9.7 18.7 6-6a1 1 0 0 0 .1-1.3v-.1l-6-6a1 1 0 0 0-1.6 1.3l.1.1 5 5.4-5 5.2a1 1 0 0 0-.1 1.3l.1.1a1 1 0 0 0 1.3.1h.1Z',
+        'm10.7 18.7 6-5.99a1 1 0 0 0 .1-1.3l-.1-.11-6-6a1 1 0 0 0-1.5 1.3l.1.1 5.03 5.38L9.3 17.3a1 1 0 0 0-.1 1.3l.1.12a1 1 0 0 0 1.3.1l.12-.1Z',
     arrow:
         'm1.3 12.5 6.2 6.2.1.1a1 1 0 0 0 1.3-.1l.1-.1a1 1 0 0 0 0-1.4l-4.5-4.4h17.6a1 1 0 0 0 .9-1v-.2a1 1 0 0 0-1-.8H4.5L9 6.3H9a1 1 0 0 0-1.5-1.4L1.3 11h-.1a1 1 0 0 0 .1 1.4Z',
     'arrow-r':

package/assets/js/styles.js

@@ -31,17 +31,17 @@ export const CUSTOM_COLORS_BG_LIGHT = {
 }
 
 export const CUSTOM_COLORS_BG_DARK = {
-    red: '#791a1f',
-    peach: '#7c3118',
-    yellow: '#7c4a15',
-    magenta: '#551c3b',
-    purple: '#3e2069',
-    'light-blue': '#164c7e',
-    blue: '#1c2755',
-    green: '#306317',
-    lime: '#3e4f13',
-    grey: '#060709',
-    'light-grey': '#434447'
+    red: '#583433',
+    peach: '#583C36',
+    yellow: '#584729',
+    magenta: '#56273E',
+    purple: '#3F3158',
+    'light-blue': '#234657',
+    blue: '#2E3A5C',
+    green: '#2D4A2C',
+    lime: '#464C29',
+    grey: '#393A3D',
+    'light-grey': '#41444B'
 }
 
 export default {

package/components/1_atoms/AwActionCard.vue

@@ -3,7 +3,12 @@
         <div class="aw-action-card__header">
             <slot name="before-title"></slot>
 
-            <AwHeadline class="aw-action-card__title">{{ title }}</AwHeadline>
+            <AwHeadline
+                class="aw-action-card__title"
+                :class="{ truncate: !fullTitle }"
+            >
+                {{ title }}
+            </AwHeadline>
 
             <slot name="after-title">
                 <AwButton
@@ -39,6 +44,8 @@ export default {
             default: ''
         },
 
+        fullTitle: Boolean,
+
         action: {
             type: Object,
             default: null