@awes-io/ui 2.84.0 → 2.86.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.86.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.85.0...@awes-io/ui@2.86.0) (2023-12-05)
+
+
+### Features
+
+* update ([f03eef5](https://github.com/awes-io/client/commit/f03eef533592981c75d59551b466c790ecaed0ab))
+
+
+
+
+
+# [2.85.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.84.0...@awes-io/ui@2.85.0) (2023-12-05)
+
+
+### Features
+
+* add new action component ([34ac283](https://github.com/awes-io/client/commit/34ac283c6ef86e4453df13bcf1a0a84e54edfd43))
+* **aw-action-card:** component added ([9c5b320](https://github.com/awes-io/client/commit/9c5b3200c9b9e4303ddaee7dc820e3e45b559942))
+* add disable color for select object and fix style in aside modal ([f360510](https://github.com/awes-io/client/commit/f3605102099c8b354c0b6543f21f7a02c8abef8b))
+* add min width for tab button without min width ([8bcd67d](https://github.com/awes-io/client/commit/8bcd67d78c305cb38e6c7220ceaf154480792b59))
+* change basic style logic for aw label ([2f4bd5a](https://github.com/awes-io/client/commit/2f4bd5a08778e18156b7a87acfb7537c14b11ab7))
+* change style for mobile menu ([d9c636e](https://github.com/awes-io/client/commit/d9c636ea479e90be2e3e1240e56fd08d8d053835))
+
+
+
+
+
 # [2.84.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.83.0...@awes-io/ui@2.84.0) (2023-11-23)
 
 

package/assets/css/components/_index.css

@@ -8,6 +8,8 @@
 
 @import './alert.css';
 @import './avatar.css';
+@import './action-button.css';
+@import './action-icon.css';
 @import './banner-text.css';
 @import './badge.css';
 @import './birthday-picker.css';
@@ -20,6 +22,8 @@
 
 @import './calendar.css';
 
+@import './action-card.css';
+@import './action-card-body.css';
 @import './card.css';
 
 @import './chip.css';

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

@@ -0,0 +1,53 @@
+.aw-action-button {
+    @apply bg-surface;
+
+    display: grid;
+    align-items: start;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: max-content minmax(0, auto);
+    gap: 0 1rem;
+
+    padding: 2rem;
+    border-radius: 1rem;
+
+    width: 100%;
+
+    &__icon-wrapper {
+        transition: 60ms color, 60ms background-color;
+    }
+
+    &:hover &__icon-wrapper {
+        color: var(--bg-color);
+        background-color: var(--color);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 2px var(--c-mono-800) inset;
+    }
+
+    &__text {
+        font-size: 1rem;
+        line-height: 1.5;
+        align-self: center;
+    }
+
+    &__description {
+        display: block;
+        margin-top: 0.25rem;
+    }
+
+    &__subdescription {
+        grid-column: 1 / -1;
+
+        padding-top: 1rem;
+    }
+
+    &--outline {
+        box-shadow: 0 0 0 2px var(--c-mono-900) inset;
+    }
+
+    &--narrow {
+        padding: 1rem;
+    }
+}

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

@@ -0,0 +1,20 @@
+.aw-action-card-body {
+    @apply bg-surface;
+
+    min-width: 0;
+    overflow: hidden;
+    padding: 1rem;
+    border-radius: 0.625rem;
+
+    &__title {
+        @apply text-mono-400;
+
+        display: block;
+
+        font-size: 0.875rem;
+        line-height: 1rem;
+        font-weight: 700;
+
+        margin-bottom: 1rem;
+    }
+}

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

@@ -0,0 +1,36 @@
+.aw-action-card {
+    @apply bg-mono-800;
+
+    display: grid;
+    gap: 0.5rem;
+
+    padding: 1.5rem 0.5rem 0.5rem;
+    border-radius: 1rem;
+
+    position: relative;
+
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0 1rem 1rem;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    &__title {
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-inline-end: auto;
+    }
+
+    &__link {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+}

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

@@ -0,0 +1,45 @@
+.aw-action-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+
+    width: var(--size);
+    height: var(--size);
+    padding: max(0.25rem, calc(var(--size) / 8));
+    border-radius: var(--radius);
+
+    background-color: var(--bg-color);
+    color: var(--color);
+
+    img {
+        width: var(--size);
+        height: var(--size);
+        border-radius: var(--radius);
+        object-fit: cover;
+    }
+
+    small {
+        font-size: 0.875rem;
+        line-height: 1.125rem;
+        text-align: center;
+    }
+
+    &__icon {
+        flex: none;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        color: var(--icon-color, currentColor);
+    }
+
+    &--image {
+        padding: 0;
+        background-color: transparent;
+    }
+
+    &--outline {
+        box-shadow: 0 0 0 2px currentColor inset;
+    }
+}

package/assets/css/components/avatar.css

@@ -6,6 +6,7 @@
     overflow: hidden;
     contain: content;
     user-select: none;
+    text-transform: uppercase;
 
     width: var(--ui-avatar-size, 2.25rem);
     height: var(--ui-avatar-size, 2.25rem);

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

@@ -130,9 +130,9 @@
     &--without-min-with {
         .aw-button-nav__toggler {
             & > span {
-                padding-left: 1rem;
-                padding-right: 1rem;
-                min-width: 0;
+                padding-left: 0.625rem;
+                padding-right: 0.625rem;
+                min-width: 2.75rem;
             }
         }
     }
@@ -223,5 +223,15 @@
                 }
             }
         }
+
+        &--without-min-with {
+            .aw-button-nav__toggler {
+                & > span {
+                    padding-left: 0.4375rem;
+                    padding-right: 0.4375rem;
+                    min-width: 2.375rem;
+                }
+            }
+        }
     }
 }

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/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/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

@@ -52,7 +52,7 @@ export default {
             error: '#e9555b',
 
             surface: '#fff',
-            'page-bg': '#f3f5f7',
+            'page-bg': '#F3F5F7',
             overlay: 'rgba(20, 23, 29, 0.4)',
             link: '#56af40',
 
@@ -112,7 +112,7 @@ export default {
             error: '#e9555b',
 
             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/AwIcon/AwIcon.vue

@@ -1,5 +1,8 @@
 <script>
-import { isNil } from 'rambdax'
+import { isNil, mergeDeepRight } from 'rambdax'
+import { VIEW_BOX, ICONS as ANIMATED_ICONS } from '@AwUtils/icons/animated'
+
+const staticClass = 'aw-icon'
 
 export default {
     name: 'AwIcon',
@@ -31,27 +34,50 @@ export default {
     render(h, { props: { name, color, size, viewBox }, data }) {
         const attrs = data.attrs || {}
 
-        return name
-            ? h('SvgIcon', {
-                  props: { name, viewBox },
-                  staticClass: 'aw-icon',
-                  class: [
-                      data.class,
-                      data.staticClass,
-                      {
-                          'aw-icon--size-text':
-                              !size && isNil(attrs.width) && isNil(attrs.height)
+        const aniamtedIconContent = ANIMATED_ICONS[name]
+
+        const getOptions = (overrides = {}) =>
+            mergeDeepRight(
+                {
+                    staticClass,
+                    class: [
+                        data.class,
+                        data.staticClass,
+                        {
+                            'aw-icon--size-text':
+                                !size &&
+                                isNil(attrs.width) &&
+                                isNil(attrs.height),
+                            'aw-icon--animated': !!aniamtedIconContent
+                        }
+                    ],
+                    style: [data.style, data.staticStyle].concat(
+                        color ? { fill: `var(--c-${color})` } : []
+                    ),
+                    attrs: {
+                        'aria-hidden': true,
+                        width: size || null,
+                        height: size || null,
+                        ...attrs
+                    }
+                },
+                overrides
+            )
+
+        return aniamtedIconContent
+            ? h('svg', {
+                  ...getOptions({
+                      attrs: {
+                          viewBox: VIEW_BOX,
+                          xmlns: 'http://www.w3.org/2000/svg'
                       }
-                  ],
-                  style: [data.style, data.staticStyle].concat(
-                      color ? { fill: `var(--c-${color})` } : []
-                  ),
-                  attrs: {
-                      'aria-hidden': true,
-                      width: size || null,
-                      height: size || null,
-                      ...attrs
-                  }
+                  }),
+                  domProps: { innerHTML: aniamtedIconContent }
+              })
+            : name
+            ? h('SvgIcon', {
+                  ...getOptions(),
+                  props: { name, viewBox }
               })
             : null
     }

package/components/1_atoms/AwLabel.vue

@@ -1,9 +1,5 @@
 <template>
-    <div
-        v-if="label"
-        class="aw-label"
-        :style="styleVariables"
-    >
+    <div v-if="label" class="aw-label" :style="styleVariables">
         <span
             class="aw-label__wrapper relative inline-flex items-center leading-5 px-2 rounded-lg"
         >
@@ -56,7 +52,7 @@ export default {
 
         color: {
             type: String,
-            default: 'green'
+            default: ''
         },
 
         onColor: {
@@ -97,6 +93,13 @@ export default {
         },
 
         styleVariables() {
+            if (!this.color && !this.onColor) {
+                return {
+                    '--aw-label-bg': 'var(--c-mono-900)',
+                    '--aw-label-on-color': 'var(--c-mono-400)'
+                }
+            }
+
             return {
                 '--aw-label-bg': this.isCustomColor
                     ? toColor(this.color)

package/components/2_molecules/AwActionButton.vue

@@ -0,0 +1,110 @@
+<template>
+    <Component
+        :is="_linkComponent"
+        class="aw-action-button"
+        v-bind="{
+            ..._linkAttrs,
+            class: {
+                'aw-animated-icon-parent': isAnimatedIcon,
+                'aw-action-button--outline': modifiers.includes('outline'),
+                'aw-action-button--narrow': modifiers.includes('narrow')
+            }
+        }"
+        v-on="$listeners"
+    >
+        <slot name="icon-wrapper">
+            <AwActionIcon
+                v-if="icon"
+                class="aw-action-button__icon-wrapper"
+                :icon="icon"
+                :color="iconColor"
+                :on-color="iconOnColor"
+                :size="iconSize"
+            />
+        </slot>
+
+        <span class="aw-action-button__text">
+            <slot :text="text">{{ text }}</slot>
+
+            <AwDescription
+                v-if="description"
+                class="aw-action-button__description"
+            >
+                {{ description }}
+            </AwDescription>
+        </span>
+
+        <AwActionIcon v-if="iconRight" :icon="iconRight" size="sm" color="mono-900" />
+
+        <AwDescription
+            v-if="subdescription"
+            class="aw-action-button__subdescription"
+        >
+            {{ subdescription }}
+        </AwDescription>
+    </Component>
+</template>
+
+<script>
+import { isAnimatedIcon } from '@AwUtils/icons/animated'
+import linkMixin from '@AwMixins/link'
+
+export default {
+    name: 'AwActionButton',
+
+    mixins: [linkMixin],
+
+    props: {
+        icon: {
+            type: String,
+            default: ''
+        },
+
+        iconColor: {
+            type: String,
+            default: 'green'
+        },
+
+        iconOnColor: {
+            type: String,
+            default: null
+        },
+
+        iconSize: {
+            type: String,
+            default: 'md'
+        },
+
+        text: {
+            type: String,
+            default: ''
+        },
+
+        description: {
+            type: String,
+            default: ''
+        },
+
+        subdescription: {
+            type: String,
+            default: ''
+        },
+
+        iconRight: {
+            type: String,
+            default: 'arrow-animated'
+        },
+
+        modifiers: {
+            type: [String, Array],
+            default: ''
+        }
+    },
+
+    computed: {
+        isAnimatedIcon() {
+            return isAnimatedIcon(this.iconRight)
+        }
+    }
+}
+</script>

package/components/2_molecules/AwSelectObject.vue

@@ -67,6 +67,7 @@
                         <slot name="caret" v-bind="data" />
                     </template>
                 </AwSelectFakeInput>
+
                 <AwSelectInput
                     v-else
                     ref="input"

package/components/4_pages/_AwPageHeadline.vue

@@ -106,7 +106,7 @@ export default {
             default() {
                 return conf(this, 'breadcrumbMenu')
             }
-        },
+        }
     },
 
     computed: {

package/nuxt/awes.config.js

@@ -56,7 +56,7 @@ export const dayjs = {
         pattern: null,
         format: true
     },
-    plugins: ['dayjs/plugin/relativeTime', 'dayjs/plugin/isLeapYear']
+    plugins: ['dayjs/plugin/isLeapYear', 'dayjs/plugin/relativeTime']
 }
 
 export const axios = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.84.0",
+    "version": "2.86.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -113,5 +113,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "078158dae22db6592008e4fc37c34e08ccfeb618"
+    "gitHead": "4a7e811d284afa3989f61e279e42d3f161e4aaaf"
 }