@awes-io/ui 2.73.1 → 2.74.1

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.74.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.74.0...@awes-io/ui@2.74.1) (2023-10-11)
+
+
+### Bug Fixes
+
+* dark colors tuned ([cfbbe41](https://github.com/awes-io/client/commit/cfbbe41edcb1fdfd91a78cbdca645f451cceb38f))
+
+
+
+
+
+# [2.74.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.1...@awes-io/ui@2.74.0) (2023-10-10)
+
+
+### Bug Fixes
+
+* fix style in component ([3b2dbb4](https://github.com/awes-io/client/commit/3b2dbb485ccbeab0aa96941e2f7f53ccb4e7ddaa))
+* some fix style in menu and form components ([e64a877](https://github.com/awes-io/client/commit/e64a877ce0e4d8803a7c8b1edb59dac53bcf5aed))
+
+
+### Features
+
+* add check external link in user profile ([95e1f52](https://github.com/awes-io/client/commit/95e1f5253097847b06fbdcab808ea0e53a9513c3))
+* change border radius in button nav ([9bb4252](https://github.com/awes-io/client/commit/9bb4252bdf7d4f1dc8744f025aa74f3ed3f8f89d))
+* change search icon ([70553be](https://github.com/awes-io/client/commit/70553be865e11e8ddd7a9461cbffef5f129aed5d))
+
+
+
+
+
 ## [2.73.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.0...@awes-io/ui@2.73.1) (2023-10-06)
 
 

package/assets/css/components/alert.css

@@ -1,16 +1,10 @@
 .aw-alert {
-    display: grid;
-
-    padding: theme('spacing.4', 1rem);
+    padding: 1rem 1.5rem;
     border-radius: 0.625rem;
-    border: 1px solid var(--aw-alert-border);
     background: var(--aw-alert-bg);
 
     &__icon {
-        padding-right: theme('spacing.4', 1rem);
-        font-size: 1.5em;
-        line-height: 0.75em;
-        align-self: start;
+        margin-right: 0.625rem;
     }
 
     .aw-description {
@@ -24,22 +18,20 @@
     &__title {
         display: flex;
         margin: 0;
+
+        &-text {
+            margin-top: 0.125rem;
+        }
     }
 
     &__buttons {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
 
-        justify-self: start;
         align-items: center;
-        margin-left: 3rem;
-        margin-bottom: 1rem;
+        margin-left: 2.125rem;
+        margin-top: 0.5rem;
 
-        & > * {
-            margin-top: theme('spacing.4', 1rem);
-            margin-left: theme('spacing.4', 1rem);
-        }
+        font-size: 0.875rem;
 
         .aw-icon,
         a {
@@ -60,29 +52,13 @@
 
 @screen lg {
     .aw-alert {
-        grid-template-columns: 1fr minmax(0, max-content);
-        grid-template-rows: auto;
-
-        padding: theme('spacing.1', 0.25rem);
-
-        &__title {
-            align-self: center;
-
-            padding-top: theme('spacing.1', 0.25rem);
-            padding-bottom: theme('spacing.1', 0.25rem);
-            padding-left: theme('spacing.4', 1rem);
-        }
+        display: flex;
+        justify-content: space-between;
 
         &__buttons {
-            margin-top: calc(-1 * theme('spacing.1', 0.25rem));
-            margin-right: 1.5rem;
-            margin-left: 0;
-            margin-bottom: 0;
-
-            & > * {
-                margin-top: theme('spacing.1', 0.25rem);
-                margin-left: theme('spacing.1', 0.25rem);
-            }
+            justify-content: flex-end;
+            margin-left: 1rem;
+            margin-top: 0;
         }
     }
 }

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

@@ -7,10 +7,9 @@
     min-height: 3.5rem;
     /* border-radius: 1rem; */
 
-    font-size: 0.75rem;
-    font-weight: bold;
-    letter-spacing: 0.09375rem;
-    text-transform: uppercase;
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: 500;
 
     background-color: rgba(var(--btn-bg), var(--btn-bg-opacity, 1));
     color: rgba(var(--btn-fg), 1);

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

@@ -3,7 +3,7 @@
     font-size: theme('fontSize.sm');
     @apply bg-mono-900;
     border: none;
-    border-radius: 1rem;
+    border-radius: 0.625rem;
 
     /* & .aw-slider__scroller {
         padding: theme('spacing.1') 0;
@@ -22,27 +22,26 @@
     }
 
     &__toggler {
-        @apply font-bold tracking-widest;
-
         position: relative;
         flex-shrink: 0;
         padding: 0;
         min-width: theme('spacing.8');
         white-space: nowrap;
 
-        font-size: 0.625rem;
-        line-height: 1.6;
+        font-size: 1rem;
+        line-height: 1rem;
+        font-weight: 400;
         border-radius: 0;
         border-top: 2px solid var(--c-mono-800);
         border-bottom: 2px solid var(--c-mono-800);
 
         &:first-child {
-           border-radius: 1rem 0 0 1rem;
+           border-radius: 0.625rem 0 0 0.625rem;
            border-left: 2px solid var(--c-mono-800);
         }
 
         &:last-child {
-           border-radius: 0 1rem 1rem 0;
+           border-radius: 0 0.625rem 0.625rem 0;
            border-right: 2px solid var(--c-mono-800);
         }
 
@@ -53,40 +52,19 @@
     }
 
     &__toggler > span {
-        @apply uppercase;
-
-        padding: theme('spacing.1') 1rem;
+        padding: 1.125rem 1.25rem;
         width: 100%;
-        border-radius: calc(1rem - 2px);
+        border-radius: 0.5rem;
         min-height: 2.75rem;
     }
 
-    &__toggler > span:before {
-        @apply bg-mono-700 hidden;
-        content: '';
-        position: absolute;
-        left: 0;
-        top: theme('spacing.1');
-        bottom: theme('spacing.1');
-        width: 1px;
-        display: block;
-    }
-
-    &__toggler:first-child > span:before {
-        content: none;
-    }
-
     &__toggler:focus, &__toggler > span:focus {
         outline: none;
     }
 
-    &__toggler:focus > span {
-        outline: theme('focusOutline', 'none');
-    }
-
     &__toggler_active > span {
         @apply bg-surface;
-        border-radius: theme('borderRadius.default');
+        border-radius: 0.5rem;
         box-shadow: theme('boxShadow.default');
     }
 
@@ -139,7 +117,7 @@
             border: 4px solid var(--c-mono-800);
 
             & > span {
-                  border-radius: calc(1rem - 4px);
+                  border-radius: 0.5rem;
                   min-height: 2.5rem;
             }
         }
@@ -176,7 +154,8 @@
 
             & > span {
                 min-height: 2.25rem;
-                border-radius: calc(0.625rem - 2px);
+                border-radius: 0.5rem;
+                padding: 0.875rem 1.25rem;
             }
         }
 
@@ -185,7 +164,7 @@
                 border: 2px solid var(--c-mono-800);
 
                 & > span {
-                      border-radius: calc(0.625rem - 2px);
+                      border-radius: 0.5rem;
                       min-height: 2.25rem;
                 }
             }

package/assets/css/components/button.css

@@ -155,8 +155,8 @@
     }
 
     &.theme-circle .aw-button__content {
-         width: 3.5rem;
-         height: 3.5rem;
+        width: 3.5rem;
+        height: 3.5rem;
     }
 
     /* Mobile hidden text */
@@ -269,6 +269,7 @@
 
         &:hover {
             background: var(--c-mono-700);
+            color: var(--c-on-mono-700);
         }
 
         .aw-button__overlay {
@@ -300,15 +301,14 @@
     }
 
     /* Outline */
-    &.theme-outline.color-mono:not(:disabled):hover,
-    &.theme-outline.color-mono.is-loading:disabled {
-        @apply border-mono-600;
+    &.theme-outline.color-default:not(:disabled) .aw-button__overlay {
+        @apply border-surface text-surface;
     }
 
-    &.theme-outline.color-mono:not(:disabled):hover > &__content,
+    /* &.theme-outline.color-mono:not(:disabled):hover > &__content,
     &.theme-outline.color-mono.is-loading:disabled {
         @apply text-on-mono-600;
-    }
+    } */
 }
 
 /**
@@ -323,11 +323,11 @@
         }
 
         &.add-tag-button {
-             font-size: 10px;
-             min-width: 20px;
-             min-height: 20px;
-             border-radius: 5px;
-             line-height: 16px;
+            font-size: 10px;
+            min-width: 20px;
+            min-height: 20px;
+            border-radius: 5px;
+            line-height: 16px;
 
             .aw-button__content {
                 @apply px-0;
@@ -382,12 +382,12 @@
                 border-color: var(--c-mono-400);
 
                 &:disabled {
-                     border-color: var(--c-mono-800);
+                    border-color: var(--c-mono-800);
                 }
             }
 
             &:not(:disabled):hover {
-                 border-color: var(--c-mono-400);
+                border-color: var(--c-mono-400);
             }
 
             .aw-button__content {
@@ -466,7 +466,7 @@
     }
 
     &.theme-circle,
-    &.theme-circle > &__overlay  {
+    &.theme-circle > &__overlay {
         border-radius: 50%;
     }
 }
@@ -505,16 +505,18 @@
     }
 }
 
-:root[data-dark="true"] {
+:root[data-dark='true'] {
     .aw-button {
+        &.theme-ghost.color-default .aw-button__overlay {
+            display: none;
+        }
+
         &.theme-ghost.color-default {
-            background: var(--c-mono-800);
             box-shadow: 0 0 0 1px rgba(var(--c-on-surface-rgb), 0.1) inset;
-            color: var(--c-on-mono-800);
 
-            &:hover {
+            /* &:hover {
                 background: var(--c-mono-200);
-            }
+            } */
         }
     }
 }

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

@@ -19,4 +19,26 @@
             }
         }
     }
+
+    .aw-button {
+        .aw-button__text {
+            display: none;
+        }
+    }
+}
+
+@screen lg {
+    .aw-context-menu {
+        &--text {
+            .aw-icon {
+                margin-right: 0.5rem;
+            }
+        }
+
+        .aw-button {
+            .aw-button__text {
+                display: flex;
+            }
+        }
+    }
 }

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

@@ -18,7 +18,7 @@
 
     &__menu,
     &__secondary-menu {
-        --icon-color: var(--c-on-brand);
+        --icon-color: var(--c-on-surface);
         --icon-color-active: var(--c-accent);
         display: flex;
         flex-direction: column;
@@ -55,7 +55,7 @@
         @apply bg-surface;
         width: 230px;
         max-height: 100vh;
-        border-left: 1px solid var(--c-mono-900);
+        border-left: 2px solid var(--c-mono-900);
 
         grid-column: 2;
         grid-row: 1 / 6;

package/assets/css/components/layout.css

@@ -94,7 +94,7 @@
     }
 
     &__header {
-        @apply flex items-center bg-surface top-0 z-20 bg-brand py-3 order-first;
+        @apply flex items-center top-0 z-20 bg-surface py-3 order-first;
         min-height: theme('spacing.16');
         transition: 200ms box-shadow;
     }
@@ -150,9 +150,7 @@
 }
 
 @screen lg {
-
     .layout {
-
         &&--default,
         &&--simple {
             @apply flex min-h-screen;
@@ -186,7 +184,7 @@
         }
 
         &&--simple &__header {
-            @apply bg-brand;
+            @apply bg-surface;
         }
 
         &&--frame-left &__frame {

package/assets/css/components/mobile-menu-item-new.css

@@ -26,6 +26,7 @@
     &__text {
          font-size: 1rem;
          line-height: 1.5rem;
+         margin-right: 1rem;
     }
 
     &__description {
@@ -40,6 +41,5 @@
     &__arrow {
          margin-left: auto;
          flex: none;
-         color: var(--c-on-surface);
     }
 }

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

@@ -40,7 +40,6 @@
     }
 
     &__arrow {
-        color: var(--c-on-surface);
         flex: none;
     }
 }

package/assets/css/components/mobile-menu-nav.css

@@ -3,10 +3,11 @@
 
     h3, h4 {
         color: var(--c-mono-400);
-        font-size: inherit;
-        text-transform: uppercase;
-        padding: 0.625rem 1.875rem 0;
-        margin-bottom: 0.5rem;
+        font-size: 0.875rem;
+        line-height: 1rem;
+        font-weight: bold;
+        padding: 0 1.5rem;
+        margin-bottom: 1rem;
     }
 
     ol, ul {
@@ -28,8 +29,8 @@
 
             position: absolute;
             top: 0;
-            left: 1.875rem;
-            right: 1.875rem;
+            left: 1.5rem;
+            right: 1.5rem;
         }
     }
 

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

@@ -38,7 +38,8 @@
     }
 
     &__submenu-title {
-        margin: 0 0 0 0.9375rem;
+        margin: 1rem 0 1.5rem;
+        padding: 0 1.5rem;
     }
 
     &__user {
@@ -61,13 +62,12 @@
 
              position: absolute;
              bottom: 0;
-             left: 1.875rem;
-             right: 1.875rem;
+             left: 1.5rem;
+             right: 1.5rem;
          }
 
         .aw-avatar {
             --ui-avatar-size: 2.5rem !important;
-            --ui-avatar-font-size: 1.875rem !important;
         }
 
         &-name {
@@ -77,6 +77,11 @@
             font-weight: 400;
         }
 
+        &-desc {
+            font-size: 0.875rem;
+            line-height: 1rem;
+        }
+
         &-link {
             color: inherit;
             grid-column: 3;
@@ -119,6 +124,12 @@
 
         &-switcher {
             margin-left: auto;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            .aw-switch-field__switch {
+                margin: 0.1875rem;
+            }
         }
     }
 
@@ -156,7 +167,7 @@
     }
 
     &__menu {
-        margin-bottom: 1.25rem;
+        margin-bottom: 1.5rem;
     }
 
     &--root &__menu h3 {
@@ -178,7 +189,13 @@
 
     &__back.aw-button,
     &__close.aw-button {
-         width: 3rem;
-         height: 3rem;
+         display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0.625rem;
+
+        .aw-button__overlay {
+            border-radius: 0.625rem;
+        }
     }
 }

package/assets/css/components/modal.css

@@ -82,7 +82,11 @@ $modal-aside-width-large: 75vw;
     }
 
     &__title {
-        @apply m-0 pr-6 text-left text-xl leading-tight font-heading font-medium truncate;
+        @apply m-0 pr-6 text-left leading-tight font-heading truncate;
+
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+        font-weight: 700;
     }
 
     &__subtitle {

package/assets/css/components/nav.css

@@ -18,20 +18,26 @@
 
     &__toggler {
         @apply p-1;
-        margin-left: -1.75rem;
+        margin-left: auto;
+        margin-right: 1.25rem;
 
         svg {
-            transform: rotate(-180deg);
+            @apply text-mono-400;
+
+            transform: rotate(180deg);
             transition: 240ms transform;
         }
 
         &--open svg {
-            transform: rotate(-90deg);
+            @apply text-on-surface;
+
+            transform: rotate(90deg);
         }
     }
 
     &__child {
         max-width: 100%;
+        min-width: 0;
         color: inherit;
         @apply flex items-center py-2 px-8;
 

package/assets/css/components/search.css

@@ -40,6 +40,7 @@
         .aw-text-field__element,
         input {
             border-radius: 0.625rem;
+            height: 2.375rem;
         }
     }
 }

package/assets/css/components/table.css

@@ -235,6 +235,10 @@
             .aw-table__scroller {
                 @apply rounded-t-none;
             }
+
+            .aw-table-builder__empty-filter-container, .aw-table-builder__empty-container {
+                @apply rounded-t-none;
+            }
         }
     }
 }

package/assets/js/icons/mono.js

@@ -15,7 +15,7 @@ export default {
     'menu-dots':
         'M5.46 7.13a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.67 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Zm7.49-7.48a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.66 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Z',
     search:
-        'M18.8 17.7l-4.3-4.3a7.6 7.6 0 10-1 1l4.2 4.4c.3.3.8.3 1 0 .4-.3.4-.8 0-1zm-10.2-3a6 6 0 110-12.2 6 6 0 010 12.2z',
+        'M8.3 2.3A6 6 0 0 1 13 12l4.1 4.1a.6.6 0 0 1 0 .9.6.6 0 0 1-.8 0l-4.2-4a6 6 0 0 1-7.9-.4A6 6 0 0 1 8.3 2.3Zm0 1.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z',
     eye:
         'M10 3.33C4 3.33.2 9.47.13 9.6A.67.67 0 000 10c.01.12.06.24.13.33 0 0 3.2 6.34 9.87 6.34 6.67 0 9.87-6.2 9.87-6.27a.67.67 0 000-.8c-.07-.13-3.94-6.27-9.87-6.27zm0 2a4.67 4.67 0 110 9.34 4.67 4.67 0 010-9.34zM10 8a2 2 0 100 4 2 2 0 000-4z',
     'eye-no':

package/assets/js/styles.js

@@ -1,8 +1,48 @@
+export const CUSTOM_COLORS = {
+    red: '#fa0000',
+    peach: '#ff6f41',
+    yellow: '#ffa800',
+    magenta: '#f4056c',
+    purple: '#8338ec',
+    'light-blue': '#0ab7fa',
+    blue: '#2d67ff',
+    green: '#2bb611',
+    lime: '#a4bf00',
+    grey: '#565656',
+    'light-grey': '#8b9aab'
+}
+
+export const CUSTOM_COLORS_BG_LIGHT = {
+    red: '#fed9d9',
+    peach: '#ffe9e3',
+    yellow: '#fff2d9',
+    magenta: '#fddae9',
+    purple: '#ece1fc',
+    'light-blue': '#daf4fe',
+    blue: '#e0e8ff',
+    green: '#ddefd9',
+    lime: '#f1f5d9',
+    grey: '#eceded',
+    'light-grey': '#ecf0f5'
+}
+
+export const CUSTOM_COLORS_BG_DARK = {
+    red: '#431c1c',
+    peach: '#33160d',
+    yellow: '#3a2e17',
+    magenta: '#310116',
+    purple: '#271147',
+    'light-blue': '#022532',
+    blue: '#202b49',
+    green: '#24331b',
+    lime: '#212600',
+    grey: '#060709',
+    'light-grey': '#2c2e34'
+}
+
 export default {
     default: {
         colors: {
-            brand: '#ffffff',
-            'brand-tuned': '#ffffff',
             accent: '#56af40',
             success: '#56af40',
             info: '#1d6ec5',
@@ -28,21 +68,10 @@ export default {
             'mono-900': '#f3f5f7',
             'mono-1000': '#fff',
 
-            red: '#fed9d9',
-            peach: '#ffe9e3',
-            yellow: '#fff2d9',
-            magenta: '#fddae9',
-            purple: '#ece1fc',
-            'light-blue': '#daf4fe',
-            blue: '#e0e8ff',
-            green: '#ddefd9',
-            lime: '#f1f5d9',
-            grey: '#eceded',
-            'light-grey': '#ecf0f5'
+            ...CUSTOM_COLORS_BG_LIGHT
         },
 
         onColors: {
-            brand: '#383868',
             accent: '#fff',
             success: '#fff',
             info: '#fff',
@@ -63,28 +92,16 @@ export default {
             'mono-400': '#fff',
             'mono-500': '#fff',
             'mono-600': '#333',
-            'mono-700': '#333',
-            'mono-800': '#333',
+            'mono-700': '#14171d',
+            'mono-800': '#14171d',
             'mono-900': '#383868',
             'mono-1000': '#333',
 
-            red: '#fa0000',
-            peach: '#ff6f41',
-            yellow: '#ffa800',
-            magenta: '#f4056c',
-            purple: '#8338ec',
-            'light-blue': '#0ab7fa',
-            blue: '#2d67ff',
-            green: '#2bb611',
-            lime: '#a4bf00',
-            grey: '#565656',
-            'light-grey': '#8b9aab'
+            ...CUSTOM_COLORS
         }
     },
     dark: {
         colors: {
-            brand: '#1e1e1e',
-            'brand-tuned': '#1e1e1e',
             accent: '#56af40',
             success: '#56af40',
             info: '#4a7fe4',
@@ -110,21 +127,10 @@ export default {
             'mono-900': '#383838',
             'mono-1000': '#313236',
 
-            red: '#431c1c',
-            peach: '#33160d',
-            yellow: '#3a2e17',
-            magenta: '#310116',
-            purple: '#271147',
-            'light-blue': '#022532',
-            blue: '#202b49',
-            green: '#24331b',
-            lime: '#212600',
-            grey: '#060709',
-            'light-grey': '#2c2e34'
+            ...CUSTOM_COLORS_BG_DARK
         },
 
         onColors: {
-            brand: '#fff',
             accent: '#fff',
             success: '#fff',
             info: '#fff',
@@ -132,35 +138,25 @@ export default {
             warning: '#333',
             error: '#fff',
 
-            surface: '#fff',
-            'page-bg': '#fff',
+            surface: '#e7eaed',
+            'page-bg': '#e7eaed',
             overlay: '#fff',
             link: '#fff',
 
-            'mono-0': '#1e1e1e',
-            'mono-50': '#1e1e1e',
-            'mono-100': '#1e1e1e',
-            'mono-200': '#1e1e1e',
-            'mono-300': '#1e1e1e',
-            'mono-400': '#1e1e1e',
-            'mono-500': '#1e1e1e',
-            'mono-600': '#fff',
-            'mono-700': '#fff',
-            'mono-800': '#fff',
-            'mono-900': '#fff',
-            'mono-1000': '#fff',
-
-            red: '#fa0000',
-            peach: '#ff6f41',
-            yellow: '#ffa800',
-            magenta: '#f4056c',
-            purple: '#8338ec',
-            'light-blue': '#0ab7fa',
-            blue: '#2d67ff',
-            green: '#2bb611',
-            lime: '#a4bf00',
-            grey: '#565656',
-            'light-grey': '#8b9aab'
+            'mono-0': '#313236',
+            'mono-50': '#313236',
+            'mono-100': '#313236',
+            'mono-200': '#313236',
+            'mono-300': '#313236',
+            'mono-400': '#313236',
+            'mono-500': '#313236',
+            'mono-600': '#313236',
+            'mono-700': '#838587',
+            'mono-800': '#838587',
+            'mono-900': '#e7eaed',
+            'mono-1000': '#e7eaed',
+
+            ...CUSTOM_COLORS
         }
     }
 }

package/components/2_molecules/AwAlert.vue

@@ -13,13 +13,17 @@
                         :style="{
                             color: iconColor ? `var(--c-${iconColor})` : null
                         }"
+                        size="24"
                     />
                 </slot>
             </span>
-            <slot name="title">{{ title }}</slot>
+
+            <span class="aw-alert__title-text">
+                <slot name="title">{{ title }}</slot>
+            </span>
         </AwDescription>
 
-        <div class="aw-alert__buttons">
+        <div v-if="$scopedSlots.default" class="aw-alert__buttons">
             <slot />
         </div>
     </div>

package/components/2_molecules/AwBadge.vue

@@ -54,7 +54,7 @@ export default {
         // Badge background color
         color: {
             type: String,
-            default: 'brand'
+            default: 'page-bg'
         },
 
         // When set to `true`, badge will hide if text is empty or 0

package/components/3_organisms/AwContextMenu.vue

@@ -80,6 +80,7 @@ export default {
                 text: this.text
             },
             staticClass: this.buttonClass,
+            class: { 'aw-context-menu--text': this.text },
             attrs: {
                 'data-arrow-focus': ''
             },

package/components/3_organisms/AwSearch.vue

@@ -14,7 +14,8 @@
             <AwIconSystemMono
                 v-if="!$route.query[param]"
                 name="search"
-                class="aw-search__icon-default h-full w-10 p-3"
+                class="aw-search__icon-default mr-4"
+                size="24"
             />
             <button
                 v-else

package/components/3_organisms/AwTable/AwTableBuilder.vue

@@ -13,7 +13,7 @@
             <slot v-if="!isWatchParamsPresent" name="empty-container">
                 <!-- Block with icon, headline and slot for button. -->
                 <AwCard
-                    class="flex items-center justify-center min-h-full mb-5"
+                    class="aw-table-builder__empty-container flex items-center justify-center min-h-full mb-5"
                     :class="`h-${defaultHeight}`"
                 >
                     <div class="text-center">
@@ -46,7 +46,7 @@
             <slot v-if="isWatchParamsPresent" name="empty-filter-container">
                 <!-- Block with icon, headline and slot for button. -->
                 <AwCard
-                    class="flex items-center justify-center min-h-full mb-5"
+                    class="aw-table-builder__empty-filter-container flex items-center justify-center min-h-full mb-5"
                     :class="`h-${defaultHeight}`"
                 >
                     <div class="text-center">

package/components/4_pages/AwPageMenuButtons.vue

@@ -4,7 +4,6 @@
         <AwContextMenu
             v-if="splitButtons.dropdown.length"
             class="aw-page-menu-buttons__aw-context-menu"
-            vertical
             :options="$options.dropdownOptions"
             :text="$t('More')"
         >

package/components/5_layouts/AwLayoutProvider.vue

@@ -229,7 +229,7 @@ export default {
 
                     return acc.concat({
                         ...pick(
-                            'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back,isDivide,arrow',
+                            'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back,isDivide,arrow,hideText',
                             props
                         ),
                         text,

package/components/5_layouts/_AwMenuItemIcon.vue

@@ -19,7 +19,7 @@
                     class="aw-icon-menu-item__icon"
                 />
 
-                <span class="aw-icon-menu-item__text">
+                <span v-if="!hideText" class="aw-icon-menu-item__text">
                     {{ text }}
                 </span>
 

package/components/5_layouts/_AwMobileMenu.vue

@@ -10,31 +10,26 @@
         @click="_closeOnLinkClick"
     >
         <div class="aw-mobile-menu__header">
-            <template v-if="submenuOpened">
-                <!-- back button -->
-                <AwButton
-                    theme="ghost"
-                    color="default"
-                    class="aw-mobile-menu__back w-10 h-10 flex-shrink-0"
-                    content-class="p-2"
-                    @click="submenuOpened = false"
-                >
-                    <template #icon>
-                        <AwIconSystemMono name="arrow" size="16" />
-                    </template>
-                    <span class="sr-only">
-                        {{ $t('Back') }}
-                    </span>
-                </AwButton>
-
-                <!-- subtitle -->
-                <AwHeadline
-                    v-if="submenuTitle"
-                    class="aw-mobile-menu__submenu-title truncate pr-2"
-                >
-                    {{ submenuTitle }}
-                </AwHeadline>
-            </template>
+            <!-- back button -->
+            <AwButton
+                v-if="submenuOpened"
+                theme="ghost"
+                color="default"
+                class="aw-mobile-menu__back w-10 h-10 flex-shrink-0"
+                content-class="p-2"
+                @click="submenuOpened = false"
+            >
+                <template #icon>
+                    <AwIconSystemMono
+                        name="arrow"
+                        size="16"
+                        class="text-mono-400"
+                    />
+                </template>
+                <span class="sr-only">
+                    {{ $t('Back') }}
+                </span>
+            </AwButton>
 
             <!-- close button -->
             <AwButton
@@ -45,7 +40,11 @@
                 @click="show = false"
             >
                 <template #icon>
-                    <AwIconSystemMono name="close" size="16" />
+                    <AwIconSystemMono
+                        name="close"
+                        size="16"
+                        class="text-mono-400"
+                    />
                 </template>
                 <span class="sr-only">
                     {{ $t('Close') }}
@@ -61,6 +60,14 @@
             />
         </slot>
 
+        <!-- subtitle -->
+        <AwHeadline
+            v-if="submenuOpened && submenuTitle"
+            class="aw-mobile-menu__submenu-title truncate"
+        >
+            {{ submenuTitle }}
+        </AwHeadline>
+
         <!-- top level menu -->
         <AwMobileMenuNav
             v-show="!submenuOpened"

package/components/5_layouts/_AwMobileMenuItem.vue

@@ -35,14 +35,14 @@
                 v-if="_linkExternal"
                 name="external"
                 size="24"
-                class="aw-mobile-menu-item__arrow"
+                class="aw-mobile-menu-item__arrow text-on-surface"
             />
 
             <AwIconSystemMono
                 v-else-if="arrow"
                 name="angle"
                 rotate="180"
-                class="aw-mobile-menu-item__arrow"
+                class="aw-mobile-menu-item__arrow text-mono-400"
             />
         </slot>
     </Component>

package/components/5_layouts/_AwMobileMenuItemNew.vue

@@ -41,14 +41,14 @@
             <AwIconSystemMono
                 v-if="_linkExternal"
                 name="external"
-                class="aw-mobile-menu-item-new__arrow"
+                class="aw-mobile-menu-item-new__arrow text-on-surface"
             />
 
             <AwIconSystemMono
                 v-else-if="arrow"
                 name="angle"
                 rotate="180"
-                class="aw-mobile-menu-item-new__arrow"
+                class="aw-mobile-menu-item-new__arrow text-mono-400"
             />
         </slot>
     </Component>

package/components/5_layouts/_AwUserMenu.vue

@@ -29,8 +29,8 @@
                 }"
             >
                 <Component
-                    :is="profileUrl ? 'NLink' : 'div'"
-                    :to="profileUrl || null"
+                    :is="profileUrlAttr.is"
+                    v-bind="profileUrlAttr"
                     class="aw-user-menu__header"
                 >
                     <AwUserpic v-bind="user" big-image />
@@ -102,6 +102,7 @@
 import { mapGetters } from 'vuex'
 import { pathOr, viewOr, lensProp, omit, isEmpty, isNil, isType } from 'rambdax'
 import AwNavItem from '@AwLayouts/_AwNavItem.vue'
+import { LINK_REGEX } from '@AwConfig'
 
 export default {
     name: 'AwUserMenu',
@@ -155,6 +156,28 @@ export default {
             return isType('Function', profileUrl)
                 ? profileUrl(this.$store.state, this.$store.getters)
                 : profileUrl
+        },
+
+        isExternalProfileUrl() {
+            return (
+                typeof this.profileUrl === 'string' &&
+                this.profileUrl &&
+                LINK_REGEX.test(this.profileUrl)
+            )
+        },
+
+        profileUrlAttr() {
+            if (this.isExternalProfileUrl) {
+                return {
+                    href: this.profileUrl,
+                    is: 'a'
+                }
+            } else {
+                return {
+                    to: this.profileUrl || null,
+                    is: this.profileUrl ? 'NLink' : 'div'
+                }
+            }
         }
     },
 

package/docs/aw-badge.md

@@ -14,7 +14,7 @@ title: Badge
 |---|---|---|---|---|
 |text|Text inside badge|`String` /  `Number`|`false`|-|
 |icon|Icon name inside badge. See AwIcon component for available names|`String`|`false`|-|
-|color|Badge background color|`String`|`false`|brand|
+|color|Badge background color|`String`|`false`|page-bg|
 |hideIfEmpty|When set to `true`, badge will hide if text is empty or 0|`Boolean`|`false`|-|
 
 <!-- @vuese:AwBadge:props:end -->

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.73.1",
+    "version": "2.74.1",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -112,5 +112,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "17d9d4b22c0424d7a3155d9eb8fa2d83206afd85"
+    "gitHead": "3cf0338e986c43e59e3ed03b1b4e1440a931ffa6"
 }