@awes-io/ui 2.110.0 → 2.112.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.112.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.111.0...@awes-io/ui@2.112.0) (2024-10-03)
+
+
+### Features
+
+* ui styles updated ([a702ef3](https://github.com/awes-io/client/commit/a702ef35671a0fbd173ee826c84faed802037560))
+
+
+
+
+
+# [2.111.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.110.0...@awes-io/ui@2.111.0) (2024-09-30)
+
+
+### Features
+
+* disabled buttons style updated ([e16b2c9](https://github.com/awes-io/client/commit/e16b2c901332fdf8ceca853b8883a1dc29bfc325))
+
+
+
+
+
 # [2.110.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.109.0...@awes-io/ui@2.110.0) (2024-09-20)
 
 

package/assets/css/components/bottom-bar.css

@@ -13,7 +13,7 @@
     bottom: 0;
     min-height: 3.5rem;
     width: 100%;
-    z-index: 2;
+    z-index: 20;
 
     & > * {
         flex-basis: 9rem;

package/assets/css/components/button.css

@@ -112,6 +112,7 @@
     &:disabled {
         cursor: not-allowed;
         user-select: none !important;
+        opacity: 0.5;
     }
 
     &:disabled .aw-icon--animated {
@@ -162,6 +163,10 @@
         --btn-padding-x: 0.75rem;
     }
 
+    &--with-text:where(&--size-lg) {
+        --btn-padding-x: 1.5rem;
+    }
+
     &--color-accent:where(&--theme-solid) {
         --btn-bg-color: var(--c-accent);
         --btn-color: var(--c-on-accent);
@@ -242,10 +247,10 @@
         --icon-color: var(--c-mono-100);
     }
 
-    &--theme-solid:where(:not(&--loading, &--locked)):disabled {
-        --btn-bg-color: var(--c-mono-800);
+    /* &--theme-solid:where(:not(&--loading, &--locked)):disabled {
+        --btn-bg-color: var(--btn-bg-disabled, var(--c-mono-800));
         --btn-color: var(--c-mono-400);
-    }
+    } */
 
     &--theme-icon {
         opacity: 0.4;
@@ -270,10 +275,6 @@
 
         cursor: wait !important;
         user-select: none !important;
-
-        &:disabled {
-            opacity: 1;
-        }
     }
 
     &--loading &__icon-wrapper {

package/assets/css/components/calendar.css

@@ -1,5 +1,6 @@
 .aw-calendar {
-    @apply bg-surface;
+    background-color: var(--c-surface);
+    color: var(--c-on-surface);
     display: flex;
     flex-wrap: wrap;
     padding-bottom: theme('spacing.2');

package/assets/css/components/card.css

@@ -1,6 +1,6 @@
 .aw-card {
-    --card-padding-x: theme('spacing.5', 1.25rem);
-    --card-padding-y: theme('spacing.5', 1.25rem);
+    --card-padding-x: var(--container-padding);
+    --card-padding-y: 1.5rem;
 
     display: block;
     min-width: 100%;
@@ -8,7 +8,7 @@
     color: var(--c-on-surface);
     background-color: var(--c-surface);
 
-    border-radius: theme('spacing.5', 1.25rem);
+    border-radius: 15px;
     padding: var(--card-padding-y) var(--card-padding-x);
     box-shadow: none;
 
@@ -42,8 +42,8 @@
 
 @screen lg {
     .aw-card {
-        --card-padding-x: 1.875rem;
-        --card-padding-y: 1.875rem;
+        --card-padding-x: 1.5rem;
+        /* --card-padding-y: 1.5rem; */
     }
 
     .container .aw-card,

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

@@ -48,7 +48,7 @@
     &__text {
         display: block;
 
-        font-size: 0.5625rem;
+        font-size: 0.625rem;
         font-weight: 400;
         line-height: 0.659375rem;
         color: var(--c-mono-300);
@@ -117,3 +117,7 @@
         }
     }
 }
+
+.aw-icon-menu-item-tooltip.aw-tooltip[data-visible] {
+    z-index: 21;
+}

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

@@ -5,7 +5,7 @@
     grid-template-columns: 5rem auto;
     grid-template-rows: 78px minmax(0, 2fr) minmax(0, 1fr) 60px minmax(0, auto);
 
-    z-index: 4;
+    z-index: 21;
 
     &__logo,
     &__aw-user-menu {

package/assets/css/components/layout.css

@@ -21,13 +21,13 @@
 
         &.aw-layout-menu--hide-submenu {
             max-width: 6rem;
-            z-index: 11;
+            z-index: 21;
         }
 
         & ~ * {
             max-width: calc(100% - 300px);
             margin-left: 300px;
-            transition: max-width ease-in-out 0.3s, margin-left ease-in-out 0.3s;
+            /* transition: max-width ease-in-out 0.3s, margin-left ease-in-out 0.3s; */
         }
 
         &.aw-layout-menu--no-submenu ~ * {

package/assets/css/components/modal.css

@@ -203,6 +203,24 @@ $modal-aside-width-large: 75vw;
 
 @screen md {
     .aw-modal {
+        &.is-default {
+            flex-direction: column;
+
+            &:before {
+                content: '';
+                display: block;
+                flex-basis: 8rem;
+                flex-shrink: 1;
+                min-height: 2rem;
+            }
+        }
+
+        &.is-default &__container {
+            padding-top: 0;
+            flex-basis: 100vh;
+            min-height: inherit;
+        }
+
         &__header {
             padding-top: 1.5rem;
             min-height: auto;
@@ -432,33 +450,31 @@ $modal-t-dur: 200ms;
     .modal-transition-overlay-aside,
     .modal-transition-overlay-aside-medium,
     .modal-transition-overlay-aside-large,
-    .modal-transition-fullscreen  {
+    .modal-transition-fullscreen {
         &-enter,
         &-leave-to {
             opacity: 0;
-            transform: perspective(150rem) translate3d(0, 5rem, -10rem) rotateX(-30deg);
+            transform: translateY(100%);
         }
 
         &-leave,
         &-enter-to {
             opacity: 1;
-            transform: perspective(150rem) translate3d(0, 0, 0) rotateX(0deg);
+            transform: translateY(0);
         }
 
         &-enter-active,
         &-leave-active {
-            transform-style: preserve-3d;
             pointer-events: none;
-            backface-visibility: hidden;
-            /* transform: translate3d(0, 0, 0); */
         }
 
         &-enter-active {
-            transition: calc($modal-t-dur * .5) opacity, $modal-t-dur transform;
+            transition: calc($modal-t-dur * 0.5) opacity, $modal-t-dur transform;
         }
 
         &-leave-active {
-            transition: calc($modal-t-dur * .8) opacity, calc($modal-t-dur * .8) transform;
+            transition: calc($modal-t-dur * 0.8) opacity,
+                calc($modal-t-dur * 0.8) transform;
         }
     }
 }
@@ -500,8 +516,7 @@ $modal-t-dur: 200ms;
         }
 
         &-enter-active {
-            transition: $modal-t-dur transform,
-                $modal-t-dur opacity;
+            transition: $modal-t-dur transform, $modal-t-dur opacity;
         }
 
         &-leave-active {
@@ -580,4 +595,3 @@ $modal-t-dur: 200ms;
         }
     }
 }
-

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

@@ -9,21 +9,20 @@
     box-shadow: none;
 
     position: relative;
-    z-index: 10;
+    z-index: 20;
 
     transition: none;
 
+    position: sticky;
+    top: 0;
+
     &--is-stuck {
-        @apply bg-surface;
+        @apply bg-page-bg;
         width: 100%;
 
-        box-shadow: 0px 10px 20px 0px rgba(0, 19, 106, 0.1);
+        box-shadow: 0px 10px 20px 0px rgba(37, 38, 41, 0.05);
 
         transition: 60ms box-shadow 120ms;
-        animation: aw-page-header-slide 180ms ease-out;
-
-        position: sticky;
-        top: 0;
     }
 
     .aw-progress {
@@ -40,7 +39,7 @@
     }
 
     &--primary {
-        @apply bg-surface;
+        /* @apply bg-surface; */
         width: 100%;
     }
 
@@ -56,10 +55,21 @@
 
         margin: 0;
 
-        font-size: 0.875rem;
+        font-size: 1.25rem;
         line-height: 1.4285;
         font-weight: 700;
-        text-align: center;
+        text-align: start;
+
+        &--showable {
+            opacity: 0;
+            transform: translateY(50%);
+            transition: opacity 200ms, transform 200ms;
+        }
+
+        &--visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
     }
 
     &__breadcrumbs,
@@ -76,7 +86,7 @@
     }
 }
 
-@screen md {
+/* @screen md {
     .aw-page-header {
         &__title {
             flex: 10 1 max-content;
@@ -91,13 +101,17 @@
             min-width: max-content;
         }
     }
-}
+} */
 
 @screen lg {
     .aw-page-header {
         /* padding-left: 2.5rem;
         padding-right: 2.5rem; */
 
+        &--primary {
+            @apply bg-surface;
+        }
+
         &__title {
             font-size: 1.25rem;
             line-height: 1.2;
@@ -108,6 +122,8 @@
             width: 100%;
             margin-left: 0;
             margin-right: 0;
+
+            position: static;
         }
 
         :where(&--container) &__breadcrumbs {
@@ -118,12 +134,19 @@
                 );
         }
 
+        &:where(:not(&--container)) &__title {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
         :where(&--container) &__title {
             text-align: left;
             margin-right: 1rem;
         }
 
-        :where(&--container) &__buttons {
+        /* :where(&--container) &__buttons {
             margin-right: max(
                 0px,
                 calc(
@@ -131,7 +154,7 @@
                         var(--header-padding-horizontal)
                 )
             );
-        }
+        } */
     }
 }
 

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

@@ -25,7 +25,7 @@
     &__mobile-title {
         order: -4;
 
-        padding: 0 1.5rem;
+        padding: 0 var(--container-padding);
 
         font-size: 1.25rem;
         line-height: 1.2;
@@ -35,7 +35,7 @@
     &__mobile-description {
         order: -3;
 
-        padding: 0 1.5rem;
+        padding: 0 var(--container-padding);
         margin-top: -1rem;
     }
 
@@ -50,16 +50,16 @@
     }
 
     &__top-scroll-mark {
-        order: -3;
+        /* order: -3; */
         height: 1px;
-        margin-top: -1.5rem;
+        /* margin-top: -1.5rem; */
         margin-bottom: -1px;
     }
 
     &__mobile-action-button {
         display: grid;
 
-        padding: 1rem 2rem;
+        padding: 1rem var(--container-padding);
         padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
 
         position: sticky;
@@ -76,30 +76,13 @@
     }
 }
 
-@screen sm {
+@screen lg {
     .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;
@@ -120,8 +103,8 @@
                 align-content: start;
                 gap: 0;
 
-                padding-left: 2.5rem;
-                padding-right: 2.5rem;
+                padding-left: var(--container-padding, 1.5rem);
+                padding-right: var(--container-padding, 1.5rem);
                 margin: 0 auto;
                 max-width: 70.25rem;
             }
@@ -132,11 +115,11 @@
             display: none;
         }
 
-        &__top-scroll-mark {
+        /* &__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;
@@ -159,5 +142,13 @@
                 transition: top 180ms ease-out;
             } */
         }
+
+        &__mobile-action-button {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+
+            margin-left: -1.5rem;
+            margin-right: -1.5rem;
+        }
     }
 }

package/assets/css/components/page.css

@@ -43,8 +43,9 @@
 
     &__top-scroll-mark {
         height: 1px;
-        margin-top: -1.5rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: -1px;
+        /* margin-top: -1.5rem;
+        margin-bottom: 1.5rem; */
     }
 }
 

package/assets/css/components/sub-headline.css

@@ -5,7 +5,7 @@
     font-style: normal;
 
     margin-bottom: 0;
-    font-size: 1rem;
-    line-height: 1.125;
+    font-size: 1.125rem;
+    line-height: 1;
     display: inline-block;
 }

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

@@ -1,5 +1,5 @@
 .aw-switch-field {
-    @apply flex relative py-1;
+    @apply flex relative;
     align-items: flex-start;
 
     &__element {
@@ -104,7 +104,7 @@
     &__switch {
         @apply bg-mono-600 relative;
         flex-shrink: 0;
-        margin: 0.15rem 0;
+        margin: 0;
         cursor: pointer;
         order: -1;
         border-radius: 90px;
@@ -279,7 +279,7 @@
     &__label {
         padding-top: 0.3125rem;
         font-size: 1rem;
-        line-height: 1.5rem;
+        line-height: 1.18rem;
     }
 
     &__element + &__label {

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

@@ -22,6 +22,7 @@
         width: inherit;
         position: fixed;
         top: 0;
+        z-index: 29;
 
         transition: 300ms opacity;
     }
@@ -42,6 +43,7 @@
         position: absolute;
         top: 2rem;
         right: 0;
+        z-index: 29;
 
         width: 1.5rem;
         height: 1.5rem;

package/assets/css/main.css

@@ -32,6 +32,14 @@
  */
 @import 'prismjs/themes/prism.css';
 
+[data-dark="false"] {
+    color-scheme: light;
+}
+
+[data-dark="true"] {
+    color-scheme: dark;
+}
+
 [data-dark="true"] {
     pre[class*="language-"] {
         background-color: theme('darkTheme.colors.surface');

package/components/1_atoms/AwDock.vue

@@ -81,6 +81,8 @@ export default {
 
     beforeDestroy() {
         anime.remove(this)
+
+        enableBodyScroll(this.$el)
     },
 
     methods: {

package/components/1_atoms/AwGrid.vue

@@ -35,7 +35,7 @@ export default {
 
         gap: {
             type: [Number, Object],
-            default: 4
+            default: 6
         },
 
         align: {

package/components/1_atoms/AwIcon/AwIcon.vue

@@ -1,5 +1,6 @@
 <script>
 import { isNil, mergeDeepRight } from 'rambdax'
+import { toColor } from '@AwUtils/styles'
 import { VIEW_BOX, ICONS as ANIMATED_ICONS } from '@AwUtils/icons/animated'
 
 const staticClass = 'aw-icon'
@@ -54,7 +55,7 @@ export default {
                         }
                     ],
                     style: [data.style, data.staticStyle].concat(
-                        color ? { fill: `var(--c-${color})` } : []
+                        color ? { fill: toColor(color) } : []
                     ),
                     attrs: {
                         'aria-hidden': true,

package/components/3_organisms/AwChart.vue

@@ -3,6 +3,7 @@
         <div ref="chart"></div>
     </div>
 </template>
+
 <script>
 import { equals } from 'rambdax'
 import loadjs from 'loadjs'
@@ -41,8 +42,14 @@ export default {
         this.generateChart()
     },
 
-    beforeDestroy() {
-        this.destroyChart()
+    beforeRouteLeave(to, from, next) {
+        // Navigate to the new route first
+        next()
+
+        // Once the navigation is done, destroy the chart
+        this.$nextTick(() => {
+            this.destroyChart(this.chart)
+        })
     },
 
     methods: {
@@ -71,9 +78,9 @@ export default {
                   })
         },
 
-        destroyChart() {
-            if (this.chart) {
-                this.chart.destroy()
+        destroyChart(chart) {
+            if (chart) {
+                chart.destroy()
             }
         }
     }

package/components/3_organisms/AwTel.vue

@@ -16,6 +16,7 @@
                     :aria-describedby="errorText ? errorId : null"
                     :class="cssClass"
                     :value="phoneValue"
+                    :autocomplete="autocomplete"
                     type="tel"
                     v-on="mergedListeners"
                 />
@@ -143,6 +144,11 @@ export default {
         value: {
             type: String,
             default: ''
+        },
+
+        autocomplete: {
+            type: String,
+            default: 'tel'
         }
     },
 

package/components/3_organisms/AwToggleShowAside.vue

@@ -10,8 +10,8 @@
         }"
     >
         <div class="aw-toggle-show-aside__btn-wrapper">
-            <button
-                v-tooltip="
+            <!-- 
+            v-tooltip="
                     isAttachedKeyListener && isVisibleTooltip
                         ? {
                               content: $t(
@@ -24,7 +24,8 @@
                               flip: false
                           }
                         : null
-                "
+                " -->
+            <button
                 class="aw-toggle-show-aside__arrow-btn"
                 @click="onClickToggleShown"
                 @mouseenter="onMouseEnterBtn"
@@ -182,7 +183,7 @@ export default {
             }
         },
 
-        onMouseLeaveBtn() {
+        onMouseLeaveBtn($event) {
             this.isShownOnBtn = false
         }
     }

package/components/4_pages/AwPage.vue

@@ -5,14 +5,22 @@
             '--page-buttons-bottom': _hideBottomBar ? null : '3.5rem'
         }"
     >
+        <div
+            ref="topScrollMark"
+            class="aw-page__top-scroll-mark"
+            aria-hidden="true"
+        ></div>
+
         <div class="aw-page__heading">
             <slot name="heading" v-bind="{ titleTag, title, breadcrumb }">
                 <AwPageHeader
                     ref="header"
                     :primary="!isDesktop && isHeaderStuck"
                     :title="_title"
+                    :title-showable="!isDesktop"
                     :hide-title="!isDesktop && !isHeaderStuck"
                     :container="container"
+                    is-container
                     :is-stuck="isHeaderStuck && !isDesktop"
                     hide-menu
                     class="aw-page__header"
@@ -25,11 +33,7 @@
                         <slot name="headline-breadcrumb">
                             <AwButton
                                 v-if="backUrl || isMenuToggler"
-                                :color="
-                                    isDesktop || !isHeaderStuck
-                                        ? 'mono'
-                                        : 'mono-light'
-                                "
+                                color="mono"
                                 :href="backUrl || '/more'"
                                 :aria-label="breadcrumb?.title ?? $t('Back')"
                                 class="aw-page__back"
@@ -83,12 +87,6 @@
                     {{ _title }}
                 </div>
 
-                <div
-                    ref="topScrollMark"
-                    class="aw-page__top-scroll-mark"
-                    aria-hidden="true"
-                ></div>
-
                 <div v-if="hasAside">
                     <slot />
                 </div>

package/components/4_pages/AwPageSingle.vue

@@ -1,10 +1,17 @@
 <template>
     <div class="aw-page-single">
+        <div
+            ref="topScrollMark"
+            class="aw-page-single__top-scroll-mark"
+            aria-hidden="true"
+        ></div>
+
         <AwPageHeader
             ref="header"
             :progress="isDesktop ? headerProgress : null"
             :primary="isDesktop || isHeaderStuck"
             :title="_title"
+            :title-showable="!isDesktop"
             :hide-title="!isDesktop && !isHeaderStuck"
             :hide-menu="hideMenu"
             :is-stuck="isHeaderStuck"
@@ -13,9 +20,7 @@
             <template #breadcrumbs>
                 <slot name="breadcrumb">
                     <AwButton
-                        :color="
-                            isDesktop || isHeaderStuck ? 'mono-light' : 'mono'
-                        "
+                        :color="isDesktop ? 'mono-light' : 'mono'"
                         :href="backUrl"
                         :aria-label="breadcrumb?.title ?? $t('Back')"
                         v-on="backUrl ? null : { click: () => $router.back() }"
@@ -76,12 +81,6 @@
                 {{ description }}
             </AwDescription>
 
-            <div
-                ref="topScrollMark"
-                class="aw-page-single__top-scroll-mark"
-                aria-hidden="true"
-            ></div>
-
             <div
                 class="aw-page-single__content"
                 :class="{

package/components/4_pages/_AwPageHeader.vue

@@ -4,7 +4,7 @@
         :class="{
             'aw-page-header--primary': primary,
             'aw-page-header--is-stuck': isStuck,
-            'aw-page-header--container': container !== 'full'
+            'aw-page-header--container': isContainer
         }"
         :style="{ '--header-container-width': headerContainerWidth }"
     >
@@ -15,7 +15,11 @@
         <h1
             v-if="title"
             class="aw-page-header__title"
-            :class="{ 'sr-only': hideTitle }"
+            :class="{
+                'sr-only': !titleShowable && hideTitle,
+                'aw-page-header__title--showable': titleShowable,
+                'aw-page-header__title--visible': !hideTitle
+            }"
         >
             {{ title }}
         </h1>
@@ -63,11 +67,15 @@ export default {
 
         hideTitle: Boolean,
 
+        titleShowable: Boolean,
+
         hideMenu: Boolean,
 
         primary: Boolean,
 
-        isStuck: Boolean
+        isStuck: Boolean,
+
+        isContainer: Boolean
     },
 
     computed: {
@@ -85,6 +93,8 @@ export default {
                 case 'small':
                     name = '--container-small-width'
                     break
+                case 'full':
+                    return '100%'
             }
 
             return name

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -13,7 +13,7 @@
                 class="aw-icon-menu-item__icon-block"
                 tabindex="-1"
                 v-tooltip:right="
-                    tooltip ? { content: text, offset: [0, 7] } : null
+                    tooltip ? { content: text, offset: [0, 7], class: 'aw-icon-menu-item-tooltip' } : null
                 "
             >
                 <AwIcon

package/components/5_layouts/_AwNav.vue

@@ -23,7 +23,7 @@
                     >
                         <AwIcon v-if="item.icon" size="16" :name="item.icon" />
                         <span
-                            v-tooltip="tooltips[i]"
+                            v-tooltip.prepend="tooltips[i]"
                             :[$options.TOOLTIP_EL_ATTR]="i"
                         >
                             {{ item.text }}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.110.0",
+    "version": "2.112.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "a3cd8d0d4d5a0198f105839ffe71939864b6ffac"
+    "gitHead": "c8bbf723d678f1cbb8891251a2c6cf0566c73b8f"
 }

package/tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
         focusOutline: (theme) => `2px dashed ${theme('colors.info')}`,
         borderRadius: {
             none: '0',
+            '10': '10px',
+            '15': '15px',
             default: '.125rem',
             md: '.25rem',
             lg: '.375rem',