@awes-io/ui 2.84.0 → 2.87.0

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

@@ -21,6 +21,9 @@
     }
 
     .aw-button {
+        min-width: 3rem;
+        padding: 0;
+
         .aw-button__text {
             display: none;
         }
@@ -36,6 +39,9 @@
         }
 
         .aw-button {
+            min-width: 6.25rem;
+            padding: 0.5625rem 1rem;
+
             .aw-button__text {
                 display: flex;
             }

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

@@ -69,7 +69,7 @@
 }
 
 /* Color modifiers */
-@each $color in (success, warning, error) {
+@each $color in (error) {
     .aw-dropdown-button_$(color) {
         color: var(--c-$(color));
 

package/assets/css/components/filter-month.css

@@ -21,4 +21,21 @@
     & &__label {
         @apply text-xs text-mono-400;
     }
+
+    &__btn {
+        border-width: 1px;
+        border-style: solid;
+        border-color: theme('borderColor.default');
+        padding: 0.5rem 0.75rem;
+
+        svg {
+            opacity: 0.4;
+        }
+
+        &:hover {
+            svg {
+                opacity: 0.9;
+            }
+        }
+    }
 }

package/assets/css/components/icon.css

@@ -8,4 +8,30 @@
         width: 1em;
         height: 1em;
     }
+
+    &--animated {
+        .svg-arrow-line {
+            transform: scaleX(0);
+            transform-origin: 50% 75%;
+            transition: 60ms transform;
+        }
+
+        .svg-arrow-chevron {
+            transform: translateX(-15%);
+            transition: 60ms transform;
+        }
+    }
+}
+
+.aw-animated-icon-parent:hover .aw-icon--animated,
+.aw-icon--animated:hover {
+    .svg-arrow-line {
+        transform: scaleX(1);
+        transition: 240ms transform;
+    }
+
+    .svg-arrow-chevron {
+        transform: translateX(0);
+        transition: 240ms transform;
+    }
 }

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

@@ -1,5 +1,5 @@
 .aw-mobile-menu {
-    @apply bg-mono-900;
+    @apply bg-page-bg;
     width: 100%;
 
     display: flex;
@@ -24,7 +24,7 @@
     }
 
     &__header {
-        @apply bg-mono-900;
+        @apply bg-page-bg;
         display: flex;
         align-items: center;
 

package/assets/css/components/modal.css

@@ -335,13 +335,13 @@ $modal-aside-width-large: 75vw;
 
         &[class*="is-overlay-aside"] &__header {
             padding-top: 1.5rem;
-            padding-left: 2rem;
-            padding-right: 2rem;
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
         }
 
         &[class*="is-overlay-aside"] &__close {
-            top: 0.75rem;
-            right: 2rem;
+            top: 0;
+            right: 0;
         }
 
         &.is-overlay-aside &__dialog {

package/assets/css/components/page-menu-buttons.css

@@ -28,11 +28,11 @@
         }
 
         .aw-button-fixed {
-            min-width: 3.5rem;
-            min-height: 3.5rem;
+            min-width: 3rem;
+            height: 3rem;
             padding-left: 1rem;
             padding-right: 1rem;
-            border-radius: 0.9375rem;
+            border-radius: 0.625rem;
         }
 
         .aw-button {

package/assets/css/components/square-icon-button.css

@@ -0,0 +1,69 @@
+.aw-square-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 0.625rem;
+
+    width: 3rem;
+    height: 3rem;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        user-select: none !important;
+    }
+
+    &:not([disabled]):active {
+        transform: translateY(1px);
+    }
+
+    svg {
+        fill: var(--c-mono-400);
+    }
+
+    &:not(:disabled):hover {
+        svg {
+            fill: var(--c-mono-100);
+        }
+    }
+
+    &--color-mono-900 {
+        background: var(--c-mono-900);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-800);
+        }
+    }
+
+    &--color-mono-800 {
+        background: var(--c-mono-800);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-700);
+        }
+    }
+
+    &--color-mono-700 {
+        background: var(--c-mono-700);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-600);
+        }
+    }
+
+    &--color-mono-600 {
+        background: var(--c-mono-600);
+
+        &:not(:disabled):hover {
+            background: var(--c-mono-500);
+        }
+    }
+}
+
+@screen lg {
+    .aw-square-icon-button {
+        width: 2.5rem;
+        height: 2.5rem;
+    }
+}

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

@@ -339,6 +339,10 @@
     @apply bg-mono-900 text-mono-400;
 }
 
+.is-disabled .aw-text-field__element--fake {
+    @apply bg-mono-900;
+}
+
 @keyframes autoFillStart {
     from {
         opacity: 1;

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

@@ -57,7 +57,7 @@
         display: flex;
         align-items: center;
 
-        padding: 1rem;
+        padding: 0.4375rem 1rem;
         color: var(--c-on-surface);
         border-bottom-width: 1px;
 
@@ -66,8 +66,8 @@
         }
 
         &-text {
-            font-size: 1rem;
-            line-height: 1.3125rem;
+            font-size: 0.875rem;
+            line-height: 1.5rem;
             font-weight: 400;
         }
 
@@ -99,20 +99,20 @@
 
     &__nav-item {
         @apply bg-surface;
-        padding: 1rem;
+        padding: 0.5rem 1rem;
         display: flex;
         align-items: center;
         width: 100%;
 
-        font-size: 1rem;
-        line-height: 1.3125rem;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
         font-weight: 400;
 
         white-space: nowrap;
 
         svg {
-            width: 1.5rem;
-            height: 1.5rem;
+            width: 1rem;
+            height: 1rem;
             flex: none;
         }
 

package/assets/css/typography.css

@@ -114,7 +114,7 @@
         font-size: 1em;
     }
 
-    code {
+    code:where(:not([class*="language-"])) {
         @apply text-error bg-error bg-opacity-20;
         padding: 0.125em 0.25em;
         border-radius: theme('borderRadius.sm', 0);
@@ -158,6 +158,18 @@
         outline: theme('focusOutline');
     }
 
+    .link:disabled,
+    .link[disabled] {
+        @apply text-mono-400;
+        cursor: not-allowed;
+
+        &:hover,
+        &:focus {
+            text-decoration: none;
+            outline: none;
+        }
+    }
+
     abbr[title] {
         border-bottom: none;
         text-decoration: underline;

package/assets/js/icons/animated.js

@@ -0,0 +1,7 @@
+export const ICONS = {
+    'arrow-animated': `<path d="M2.4 12c0-.66.54-1.2 1.2-1.2h15.6a1.2 1.2 0 0 1 0 2.4H3.6A1.2 1.2 0 0 1 2.4 12Z" class="svg-arrow-line"/><path fill-rule="evenodd" d="M14.12 4.84a1.2 1.2 0 1 0-1.55 1.85l6.3 5.28-6.3 5.3a1.2 1.2 0 1 0 1.54 1.82l7.36-6.16c.3-.24.45-.6.45-.96a1.2 1.2 0 0 0-.46-.95l-7.35-6.18Z" clip-rule="evenodd" class="svg-arrow-chevron" />`
+}
+
+export const VIEW_BOX = '0 0 24 24'
+
+export const isAnimatedIcon = (name) => Object.hasOwnProperty.call(ICONS, name)

package/assets/js/styles.js

@@ -27,15 +27,15 @@ export const CUSTOM_COLORS_BG_LIGHT = {
 }
 
 export const CUSTOM_COLORS_BG_DARK = {
-    red: '#5F2A26',
-    peach: '#4C2113',
-    yellow: '#4C3200',
-    magenta: '#490120',
-    purple: '#271147',
-    'light-blue': '#044964',
-    blue: '#242C4A',
-    green: '#114907',
-    lime: '#313900',
+    red: '#791a1f',
+    peach: '#7c3118',
+    yellow: '#7c4a15',
+    magenta: '#551c3b',
+    purple: '#3e2069',
+    'light-blue': '#164c7e',
+    blue: '#1c2755',
+    green: '#306317',
+    lime: '#3e4f13',
     grey: '#060709',
     'light-grey': '#434447'
 }
@@ -49,10 +49,11 @@ export default {
             info: '#1d6ec5',
             notify: '#ffc230',
             warning: '#fc8800',
-            error: '#e9555b',
+            error: '#FF4931',
+            'error-hover': '#E6422C',
 
             surface: '#fff',
-            'page-bg': '#f3f5f7',
+            'page-bg': '#F3F5F7',
             overlay: 'rgba(20, 23, 29, 0.4)',
             link: '#56af40',
 
@@ -109,10 +110,11 @@ export default {
             info: '#4a7fe4',
             notify: '#ffc230',
             warning: '#fc8800',
-            error: '#e9555b',
+            error: '#FF4931',
+            'error-hover': '#E6422C',
 
             surface: '#313236',
-            'page-bg': '#1e1e1e',
+            'page-bg': '#1E1E21',
             overlay: 'rgba(0, 0, 0, 0.5)',
             link: '#56af40',
 

package/components/1_atoms/AwActionCard.vue

@@ -0,0 +1,77 @@
+<template>
+    <section class="aw-action-card">
+        <div class="aw-action-card__header">
+            <slot name="before-title"></slot>
+
+            <AwHeadline class="aw-action-card__title">{{ title }}</AwHeadline>
+
+            <slot name="after-title">
+                <AwButton
+                    v-if="isActionButtonVisible"
+                    v-bind="actionProps"
+                    v-on="actionListeners"
+                />
+            </slot>
+        </div>
+
+        <slot />
+
+        <NuxtLink
+            v-if="href"
+            :to="href"
+            :aria-label="title"
+            class="aw-action-card__link"
+        />
+    </section>
+</template>
+
+<script>
+const ACTION_DEFAULTS = {
+    color: 'default'
+}
+
+export default {
+    name: 'AwActionCard',
+
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+
+        action: {
+            type: Object,
+            default: null
+        },
+
+        href: {
+            type: [String, Object],
+            default: null
+        }
+    },
+
+    computed: {
+        isActionButtonVisible() {
+            return this.action && !this.href
+        },
+
+        actionProps() {
+            return this.action ? { ...ACTION_DEFAULTS, ...this.action } : null
+        },
+
+        actionListeners() {
+            return this.action
+                ? this.action.href
+                    ? null
+                    : { click: this.onClickEmitAction }
+                : null
+        }
+    },
+
+    methods: {
+        onClickEmitAction() {
+            this.$emit('action')
+        }
+    }
+}
+</script>

package/components/1_atoms/AwActionCardBody.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="aw-action-card-body">
+        <div v-if="title" class="aw-action-card-body__title">{{ title }}</div>
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'AwActionCardBody',
+
+    props: {
+        title: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>

package/components/1_atoms/AwActionIcon.vue

@@ -0,0 +1,150 @@
+<template>
+    <span
+        class="aw-action-icon"
+        :class="{
+            'aw-action-icon--image': image,
+            'ew-action-icon--outline': modifiers.includes('outline'),
+            'aw-animated-icon-parent': isAnimatedIcon
+        }"
+        :style="styles"
+    >
+        <img v-if="image" v-bind="image" />
+
+        <slot v-else>
+            <AwIcon :name="icon" class="aw-action-icon__icon" />
+            <small v-if="text">{{ text }}</small>
+        </slot>
+    </span>
+</template>
+
+<script>
+import { toColor, toOnColor } from '@AwUtils/styles'
+import { isAnimatedIcon } from '@AwUtils/icons/animated'
+
+const SIZES = {
+    xs: {
+        size: '1.5rem',
+        iconSize: '0.75rem',
+        iconWithTextSize: '0.5rem',
+        radius: '0.3125rem'
+    },
+    sm: {
+        size: '2.5rem',
+        iconSize: '1rem',
+        iconWithTextSize: '0.75rem',
+        radius: '0.625rem'
+    },
+    md: {
+        size: '2.5rem',
+        iconSize: '1.5rem',
+        iconWithTextSize: '0.75rem',
+        radius: '0.625rem'
+    },
+    lg: {
+        size: '5rem',
+        iconSize: '2rem',
+        iconWithTextSize: '1.5rem',
+        radius: '1.25rem'
+    }
+}
+
+const SIZES_MOBILE = {
+    ...SIZES,
+    sm: {
+        size: '3rem',
+        iconSize: '1rem',
+        iconWithTextSize: '0.75rem',
+        radius: '0.625rem'
+    },
+    md: {
+        size: '3rem',
+        iconSize: '1.5rem',
+        iconWithTextSize: '0.75rem',
+        radius: '0.625rem'
+    }
+}
+
+const SIZES_NAMES = Object.keys(SIZES)
+
+const SIZE_DEFAULT = SIZES_NAMES[2]
+
+export default {
+    name: 'AwActionIcon',
+
+    props: {
+        image: {
+            type: Object,
+            default: null
+        },
+
+        icon: {
+            type: String,
+            default: 'arrow-animated'
+        },
+
+        text: {
+            type: String,
+            default: ''
+        },
+
+        size: {
+            type: String, // xs, sm, md, lg
+            default: SIZE_DEFAULT,
+            validator(size) {
+                return SIZES_NAMES.includes(size)
+            }
+        },
+
+        color: {
+            type: String,
+            default: 'mono-700'
+        },
+
+        onColor: {
+            type: String,
+            default: ''
+        },
+
+        iconColor: {
+            type: String,
+            default: ''
+        },
+
+        modifiers: {
+            type: [String, Array],
+            default: ''
+        },
+
+        desktopFrom: {
+            type: String,
+            default: 'lg'
+        }
+    },
+
+    computed: {
+        styles() {
+            const sizes = this.$screen[this.desktopFrom] ? SIZES : SIZES_MOBILE
+            const size = sizes[this.size] || sizes[SIZE_DEFAULT]
+
+            const styles = {
+                '--size': size.size,
+                '--icon-size': this.text
+                    ? size.iconWithTextSize
+                    : size.iconSize,
+                '--radius': size.radius,
+                '--color': this.onColor
+                    ? toColor(this.onColor)
+                    : toOnColor(this.color),
+                '--bg-color': toColor(this.color),
+                '--icon-color': this.iconColor ? toColor(this.iconColor) : null
+            }
+
+            return styles
+        },
+
+        isAnimatedIcon() {
+            return isAnimatedIcon(this.icon)
+        }
+    }
+}
+</script>

package/components/1_atoms/AwDropdown.vue

@@ -54,9 +54,8 @@
             <!-- close button -->
             <slot v-if="isMobile" name="close">
                 <AwButton
-                    theme="ghost"
                     :text="$t('Close')"
-                    color="surface"
+                    color="mono"
                     size="lg"
                     class="aw-dropdown__close"
                     @click.stop="visible = false"

package/components/1_atoms/AwDropdownButton.vue

@@ -38,17 +38,14 @@ export default {
          * @type {Object}
          */
         color: {
-            /* 'default' / 'success' / 'warning' / 'danger' / 'info' */
+            /* 'default' / 'error'  */
             type: String,
             /* 'default' */
             default: 'default',
             validator(color) {
                 return [
                     'aw-dropdown-button_default',
-                    'aw-dropdown-button_success',
-                    'aw-dropdown-button_warning',
-                    'aw-dropdown-button_error',
-                    'aw-dropdown-button_info'
+                    'aw-dropdown-button_error'
                 ].includes(`aw-dropdown-button_${color}`)
             }
         },