@awes-io/ui 2.143.0 → 2.144.1

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

@@ -22,6 +22,7 @@
         margin-top: 0;
         margin-bottom: 0;
         margin-inline-end: auto;
+        min-width: 0;
     }
 
     &__title {

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

@@ -7,7 +7,7 @@
     flex-shrink: 0;
 
     width: var(--size);
-    height: var(--size);
+    aspect-ratio: 1 / 1;
     padding: min(0.25rem, calc(var(--size) / 8));
     border-radius: var(--radius);
 
@@ -16,7 +16,7 @@
 
     img {
         width: var(--size);
-        height: var(--size);
+        aspect-ratio: 1 / 1;
         border-radius: var(--radius);
         object-fit: cover;
     }

package/assets/css/components/alert.css

@@ -1,49 +1,59 @@
 .aw-alert {
-    padding: 0.875rem 1.375rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+
+    padding: 1rem;
     border-radius: 0.625rem;
-    border: 0.125rem dashed var(--aw-alert-color);
+    background: var(--aw-alert-color);
 
     &__icon {
-        margin-right: 0.625rem;
-        color: var(--aw-alert-color);
+        color: var(--aw-alert-on-color);
     }
 
-    .aw-description {
+    /* .aw-description {
         color: var(--c-on-surface);
 
         a {
             color: var(--c-on-surface);
         }
-    }
+    } */
 
     &__title {
         display: flex;
-        margin: 0;
+        flex-direction: column;
+        gap: 0.25rem;
+        margin-inline-end: auto;
+
+        color: var(--c-on-surface);
+        font-size: 0.875rem;
+        line-height: 1.2857;
 
         &-text {
             font-weight: 700;
-            margin-top: 0.125rem;
+            line-height: 1.1428;
         }
     }
 
     &__buttons {
         display: flex;
+        gap: 1rem;
 
         align-items: center;
-        margin-left: 1.75rem;
-        margin-top: 0.5rem;
 
         font-size: 0.875rem;
         line-height: 1.125rem;
         font-weight: 700;
 
         :where(:is(a, button):not(.aw-button)) {
-            --btn-color: var(--aw-alert-color);
-            color: var(--aw-alert-color);
-        }
-
-        :where(:is(a, button):not(.aw-button)) {
+            --btn-color: var(--aw-alert-on-color);
+            color: var(--aw-alert-on-color);
             text-decoration: underline;
+
+            &:hover {
+                color: var(--aw-alert-on-color);
+                opacity: 0.7;
+            }
         }
 
         a,
@@ -55,26 +65,32 @@
         }
     }
 
-    &--title-start {
-        .aw-alert__title {
-            align-items: start;
-        }
-    }
-
-    &--color-default {
-        border: 0.125rem dashed var(--c-mono-800);
-    }
-}
-
-@screen lg {
-    .aw-alert {
+    &__close {
         display: flex;
-        justify-content: space-between;
+        align-items: flex-start;
+
+        .aw-button--theme-icon {
+            --icon-color: var(--aw-alert-on-color);
+            opacity: 1;
 
-        &__buttons {
-            justify-content: flex-end;
-            margin-left: 1rem;
-            margin-top: 0;
+            &:hover,
+            &:focus-visible {
+                opacity: 0.7;
+            }
         }
+
+        /* justify-content: flex-end;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
+        font-weight: 700;
+        color: var(--aw-alert-on-color);
+
+        a,
+        button {
+            font-size: 0.875rem;
+            line-height: 1.125rem;
+            font-weight: 700;
+            white-space: nowrap;
+        } */
     }
 }

package/assets/css/components/animation.css

@@ -63,3 +63,17 @@
         opacity: 1;
     }
 }
+
+@keyframes aw-placeholder {
+    0% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}

package/assets/css/components/badge.css

@@ -14,6 +14,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        gap: 0.25rem;
 
         min-height: 1.5rem;
         min-width: 1.5rem;

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

@@ -3,15 +3,16 @@
 
     display: grid;
     grid-gap: theme('spacing.1', 0.25rem) theme('spacing.4', 1rem);
-    grid-template-areas: 'icon title'
-                         'icon description';
+    grid-template-areas:
+        'icon title'
+        'icon description';
     grid-template-columns: var(--banner-text-icon-size) auto;
 
     &__icon {
         grid-area: icon;
 
         display: flex;
-        align-items:center;
+        align-items: center;
         justify-content: center;
 
         width: var(--banner-text-icon-size);
@@ -25,16 +26,26 @@
         &--rounded {
             border-radius: 50%;
         }
+
+        &--square {
+            border-radius: 0.625rem;
+        }
     }
 
     &__title {
         grid-area: title;
         margin: 0;
+
+        &.aw-sub-headline {
+            display: flex;
+            gap: 0.25rem;
+        }
     }
 
     &__title-arrow {
         font-size: 0.875em;
-        margin-left: -0.25em;
+        margin-top: 0.25rem;
+        /* margin-left: -0.25em; */
     }
 
     &__description {

package/assets/css/components/button.css

@@ -136,6 +136,14 @@
         --btn-min-width: 7rem;
     }
 
+    &--size-xxs {
+        --btn-size: 1rem;
+        --btn-padding-x: 0;
+        --btn-padding-y: 0;
+
+        line-height: 1;
+    }
+
     &--size-xs {
         --btn-size: 2rem;
         --btn-padding-x: 0.375rem;

package/assets/css/components/card.css

@@ -30,7 +30,6 @@
 
     &__header-badge {
         flex-shrink: 0;
-        margin-left: auto;
         align-self: flex-start;
     }
 }

package/assets/css/components/content-placeholder.css

@@ -19,7 +19,7 @@
 
         position: relative;
         overflow: hidden;
-        background-color: rgba(var(--c-mono-900-rgb), 0.6);
+        background-color: rgba(var(--c-mono-800-rgb), 0.6);
 
         &::before {
             content: '';
@@ -32,14 +32,14 @@
             background: linear-gradient(
                 to right,
                 transparent 0%,
-                rgba(var(--c-mono-900-rgb), 0.15) 15%,
+                rgba(var(--c-mono-800-rgb), 0.75) 15%,
                 transparent 30%
             );
 
             animation-duration: 1.5s;
             animation-fill-mode: forwards;
             animation-iteration-count: infinite;
-            animation-name: ew-loading;
+            animation-name: aw-placeholder;
             animation-timing-function: linear;
         }
     }
@@ -84,6 +84,7 @@
     }
 
     &--image {
+        --ph-width: minmax(1rem, 100%);
         --ph-aspect-ratio: 16 / 9;
     }
 

package/assets/css/components/dropdown.css

@@ -55,21 +55,27 @@
         margin: 0;
         padding: 0.75rem 1.5rem;
         border-radius: 0.625rem 0.625rem 0 0;
-
-        & + .aw-dropdown__content--mobile {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            border-top: 1px solid var(--c-mono-900);
-        }
     }
 
     &__description {
+        background-color: var(--c-surface);
+        color: var(--c-mono-400);
+
         text-align: center;
         font-size: theme('fontSize.sm', 0.875rem);
-        margin: theme('spacing.1', 0.5rem) auto 0;
+
+        margin: 0;
+        padding: 0.75rem theme('spacing.4', 1rem);
+        border-radius: 10px 10px 0 0;
         position: relative;
     }
 
+    &__title + &__description {
+        border-radius: 0;
+        margin-top: -0.5rem;
+        padding-block: 0;
+    }
+
     &__content {
         max-height: 100%;
 
@@ -95,6 +101,13 @@
         } */
     }
 
+    &__title + &__content--mobile,
+    &__description + &__content--mobile {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top: 1px solid var(--c-mono-900);
+    }
+
     &__close {
         width: 100%;
         margin-top: 1rem;

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

@@ -13,7 +13,7 @@
         .aw-icon-menu-item {
             &__icon,
             &__text {
-                color: var(--c-mono-300);
+                color: var(--c-mono-100);
             }
         }
     }
@@ -29,7 +29,7 @@
 
     &__icon {
         display: block;
-        color: var(--c-mono-100);
+        color: var(--c-mono-300);
         transition: 60ms color;
 
         &-block {
@@ -76,8 +76,8 @@
         line-height: 1;
 
         position: absolute;
-        right: 0;
-        top: 0;
+        right: -0.75rem;
+        top: 1rem;
     }
 
     &__icon-badge--with-text {
@@ -111,13 +111,18 @@
 
         &__icon {
             &-block {
-                padding: 0.515625rem 0.75rem;
-                width: 100%;
+                padding: 0.515625rem 0.5rem;
+                width: 4rem;
             }
         }
+
+        &__icon-badge {
+             right: 0.5rem;
+             top: 0.5rem;
+        }
     }
 }
 
 .aw-icon-menu-item-tooltip.aw-tooltip[data-visible] {
     z-index: 21;
-}
+}

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

@@ -2,6 +2,10 @@
     font-size: 1rem;
 
     h3, h4 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
         color: var(--c-mono-400);
         font-size: 0.875rem;
         line-height: 1rem;
@@ -24,13 +28,13 @@
         .aw-mobile-menu-nav__item--divide {
             position: relative;
             padding-top: 2.5rem;
-    
+
             &:before {
                 @apply bg-mono-800;
                 content: '';
                 display: block;
                 height: 1px;
-    
+
                 position: absolute;
                 top: calc(0.75rem - 1px);
                 left: 1.5rem;
@@ -44,13 +48,13 @@
 
         .aw-mobile-menu-nav__item--divide {
             position: relative;
-    
+
             &:before {
                 @apply bg-mono-800;
                 content: '';
                 display: block;
                 height: 1px;
-    
+
                 position: absolute;
                 top: -1px;
                 left: 1.5rem;

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

@@ -262,6 +262,10 @@
         top: theme('spacing.3', 0.75rem);
         transform-origin: left top;
         transition: 100ms transform ease-out-sine;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
     }
 
     &__label--required:after {

package/assets/css/main.css

@@ -94,6 +94,7 @@
 pre[class*="language-"] {
     margin-top: 0;
     margin-bottom: 0;
+    border-radius: 0.625rem;
 }
 
 /* Reset styles */

package/components/1_atoms/AwActionIcon.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { isType } from 'rambdax'
 import { toColor, toOnColor } from '@AwUtils/styles'
 import { isAnimatedIcon } from '@AwUtils/icons/animated'
 
@@ -92,10 +93,10 @@ export default {
         },
 
         size: {
-            type: String, // xs, sm, md, lg
+            type: [String, Number], // xs, sm, md, lg or custom size in pixels
             default: SIZE_DEFAULT,
             validator(size) {
-                return SIZES_NAMES.includes(size)
+                return typeof size === 'number' || SIZES_NAMES.includes(size)
             }
         },
 
@@ -127,6 +128,14 @@ export default {
 
     computed: {
         sizeConfig() {
+            if (isType('Number', this.size)) {
+                return {
+                    size: this.size + 'px',
+                    iconSize: Math.floor(this.size * 0.65) + 'px',
+                    radius: Math.floor(this.size * 0.2) + 'px'
+                }
+            }
+
             const sizes = this.$screen[this.desktopFrom] ? SIZES : SIZES_MOBILE
 
             return sizes[this.size] || sizes[SIZE_DEFAULT]

package/components/1_atoms/AwFlow.vue

@@ -1,24 +1,32 @@
 <template>
-    <div
-        class="flex"
+    <Component
+        :is="tag"
         :class="{
+            flex: !inline,
+            'inline-flex': inline,
             'flex-wrap': wrap,
             'flex-col': vertical,
+            'justify-center': justify === 'center',
             'justify-between': justify === 'between',
             'justify-end': justify === 'end',
             'justify-start': justify === 'start',
-            'items-center': align === 'center',
-            'items-end': align === 'end',
-            'items-start': align === 'start'
+            'items-center': _align === 'center',
+            'items-end': _align === 'end',
+            'items-start': _align === 'start',
+            'gap-1': gap === 1,
+            'gap-2': gap === 2,
+            'gap-3': gap === 3,
+            'gap-4': gap === 4,
+            'gap-5': gap === 5,
+            'gap-6': gap === 6,
+            'gap-8': gap === 8
         }"
     >
         <slot />
-    </div>
+    </Component>
 </template>
 
 <script>
-import { notEmptyNode } from '@AwUtils/component'
-
 export default {
     name: 'AwFlow',
 
@@ -39,13 +47,20 @@ export default {
         },
 
         align: {
-            type: String,
-            default: 'center'
+            type: String
         },
 
         vertical: Boolean,
 
-        wrap: Boolean
+        wrap: Boolean,
+
+        inline: Boolean
+    },
+
+    computed: {
+        _align() {
+            return this.align || (!this.vertical && 'center')
+        }
     }
 }
 </script>

package/components/1_atoms/AwGrid.vue

@@ -1,5 +1,5 @@
 <script>
-import { path } from 'rambdax'
+import { path, isNil } from 'rambdax'
 
 const isEmptyNode = ({ tag, text = '' }) => {
     return !tag && !text.trim()
@@ -15,7 +15,7 @@ const makeClass = (base, option, defaultValue) => {
         }
 
         return classes
-    } else if (option) {
+    } else if (!isNil(option)) {
         return base + '-' + option
     } else {
         return base + '-' + defaultValue
@@ -41,6 +41,11 @@ export default {
         align: {
             type: String,
             default: 'start'
+        },
+
+        span: {
+            type: [Number, Object],
+            default: null
         }
     },
 
@@ -54,12 +59,15 @@ export default {
                     'grid',
                     makeClass('grid-cols', props.col, 1),
                     makeClass('gap', props.gap, 4),
+                    isNil(props.span)
+                        ? null
+                        : makeClass('col-span', props.span, 1),
                     {
                         'items-start': props.align === 'start',
                         'items-center': props.align === 'center',
                         'items-end': props.align === 'end'
                     }
-                ]
+                ].filter(Boolean)
             },
             children.reduce((acc, child) => {
                 const isEmpty = isEmptyNode(child)

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

@@ -54,9 +54,11 @@ export default {
                             'aw-icon--animated': !!aniamtedIconContent
                         }
                     ],
-                    style: [data.style, data.staticStyle].concat(
-                        color ? { fill: toColor(color) } : []
-                    ),
+                    staticStyle: data.staticStyle,
+                    style: {
+                        ...data.style,
+                        ...(color ? { fill: toColor(color) } : {})
+                    },
                     attrs: {
                         'aria-hidden': true,
                         width: size || null,

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

@@ -63,8 +63,9 @@ export default {
                                   isNil(attrs.width) &&
                                   isNil(attrs.height)
                           }
-                      ],
-                      style: [data.staticStyle, data.style]
+                      ].filter(Boolean),
+                      staticStyle: data.staticStyle,
+                      style: data.style
                   },
                   transform ? [h('g', { attrs: { transform } }, paths)] : paths
               )

package/components/1_atoms/AwInput.vue

@@ -80,8 +80,8 @@ const INVALID_TYPES = [
         type: ',date,datetime,time,month,week,',
         replacer: '<AwDate />'
     },
-    { type: ',tel,', replacer: '<AwTel />' },
-    { type: ',color,', replacer: '<AwColor />' }
+    { type: ',tel,', replacer: '<AwTel />' }
+    // { type: ',color,', replacer: '<AwColor />' }
 ]
 
 const getInvalidConfig = (type) => {

package/components/1_atoms/AwList.vue

@@ -2,7 +2,9 @@
     <ol class="aw-list">
         <slot>
             <li v-for="(item, i) in items" :key="i" :class="itemClass">
-                <slot name="item" :item="item" :index="i" />
+                <slot name="item" :item="item" :index="i">
+                    {{ item }}
+                </slot>
             </li>
         </slot>
     </ol>

package/components/1_atoms/AwRadio.vue

@@ -9,7 +9,7 @@
             v-tooltip:top-start.show.prepend="errorTooltip"
             v-on="mergedListeners"
         /><label
-            v-if="!!label"
+            v-if="!!label || $scopedSlots.label"
             class="aw-switch-field__label"
             :for="id || defaultId"
         >