@awes-io/ui 2.84.0 → 2.87.0

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/AwButton.vue

@@ -2,13 +2,12 @@
     <component
         :is="_linkComponent"
         class="aw-button"
-        :class="classes"
+        :class="[classes, contentClass]"
         :disabled="isDisabled"
+        :aria-label="$attrs['aria-label'] || text || null"
         v-bind="_linkAttrs"
         v-on="$listeners"
     >
-        <span class="aw-button__overlay"></span>
-
         <AwIconSystemColor
             v-if="loading"
             class="aw-button__loader"
@@ -16,70 +15,50 @@
         />
 
         <span
-            class="aw-button__content"
-            :class="[
-                {
-                    'aw-button__content_sm': size === 'sm',
-                    'aw-button__content_md': size === 'md',
-                    'aw-button__content_lg': size === 'lg',
-                    'aw-button__content_no-text': mobileTextHidden
-                },
-                contentClass
-            ]"
-            tabindex="-1"
+            v-else-if="locked"
+            class="aw-button__lock"
+            v-tooltip="lockedTooltip"
         >
-            <slot name="icon" v-bind="{ icon, iconSize }">
+            <span>
+                <AwIconSystemMono name="lock" />
+            </span>
+        </span>
+
+        <template v-else>
+            <slot name="icon" v-bind="{ icon }">
                 <AwIcon
                     v-if="icon"
+                    class="aw-button__icon-left"
+                    :class="{ 'mr-2': text }"
                     :name="icon"
-                    class="flex-shrink-0"
-                    :size="iconSize"
+                    :size="16"
                 />
             </slot>
 
-            <span
-                class="aw-button__text"
-                :class="{
-                    'hidden lg:block': mobileTextHidden,
-                    'sr-only': (theme === 'icon' || theme === 'circle') && icon,
-                    'ml-2': icon && isContentAdded,
-                    'mr-2': iconRight && isContentAdded
-                }"
-            >
-                <slot>{{ text }}</slot>
-            </span>
+            <slot v-if="!hideText">
+                <span class="aw-button__text">
+                    {{ text }}
+                </span>
+            </slot>
 
-            <slot name="icon-right" v-bind="{ iconRight, iconSize }">
+            <slot name="iconRight" v-bind="{ iconRight }">
                 <AwIcon
                     v-if="iconRight"
+                    class="aw-button__icon-right"
+                    :class="{ 'ml-2': text }"
                     :name="iconRight"
-                    class="flex-shrink-0"
-                    :size="iconSize"
+                    :size="16"
                 />
             </slot>
-        </span>
-
-        <span v-if="locked" class="aw-button__lock" v-tooltip="lockedTooltip">
-            <span>
-                <AwIconSystemMono name="lock" />
-            </span>
-        </span>
+        </template>
     </component>
 </template>
 
 <script>
 import AwLink from '@AwAtoms/AwLink.vue'
-import { pathOr } from 'rambdax'
 import { AwButton as _config } from '@AwConfig'
 import { conf } from '@AwUtils/component'
 
-const iconSizes = {
-    xs: 10,
-    sm: 12,
-    md: 14,
-    lg: 16
-}
-
 export default {
     name: 'AwButton',
 
@@ -96,7 +75,7 @@ export default {
             }
         },
 
-        // Background color of button. Possible values: 'info', 'success', 'warning', 'error', 'surface'
+        // Background color of button. Possible values: 'accent', 'error', 'mono', 'dark'
         color: {
             type: String,
             default() {
@@ -104,7 +83,7 @@ export default {
             }
         },
 
-        // Possible values: outline, ghost
+        // Possible values: solid, outline, icon
         theme: {
             type: String,
             default() {
@@ -136,11 +115,6 @@ export default {
             default: ''
         },
 
-        // Active state
-        active: Boolean,
-
-        mobileTextHidden: Boolean,
-
         // Show lock icon and disable button
         locked: Boolean,
 
@@ -148,27 +122,23 @@ export default {
         lockedTooltip: {
             type: String,
             default: ''
-        }
-    },
+        },
 
-    data() {
-        return {
-            isPressed: false
-        }
+        hideText: Boolean
     },
 
     computed: {
         classes() {
             return [
                 {
-                    'is-active': this.active,
-                    'is-loading': this.loading,
-                    'aw-button_sm': this.size === 'sm',
-                    'aw-button_md': this.size === 'md',
-                    'aw-button_lg': this.size === 'lg'
+                    'aw-button--size-sm': this.size === 'sm',
+                    'aw-button--size-md': this.size === 'md',
+                    'aw-button--size-lg': this.size === 'lg',
+                    'aw-button--loading': this.loading,
+                    'aw-button--square': this.hideText
                 },
-                `color-${this.color || 'default'}`,
-                this.theme && `theme-${this.theme}`
+                `aw-button--color-${this.color || 'green'}`,
+                `aw-button--theme-${this.theme || 'solid'}`
             ]
         },
 
@@ -179,21 +149,6 @@ export default {
                 this.loading ||
                 this.locked
             )
-        },
-
-        isContentAdded() {
-            return this.text || this.$scopedSlots.default
-        },
-
-        // loadingText() {
-        //     return (
-        //         (isType('String', this.loading) && this.loading) ||
-        //         this.$t('Loading...')
-        //     )
-        // },
-
-        iconSize() {
-            return pathOr(12, this.size, iconSizes)
         }
     },
 

package/components/2_molecules/AwIsland/AwIsland.vue

@@ -42,7 +42,9 @@
                     class="aw-island__description"
                 >
                     <slot name="description" v-bind="{ isOpened, toggle }">
-                        <AwDescription tag="div">{{ description }}</AwDescription>
+                        <AwDescription tag="div">{{
+                            description
+                        }}</AwDescription>
                     </slot>
                 </div>
 
@@ -101,8 +103,7 @@
                             <template v-else>
                                 <AwButton
                                     text="Reset"
-                                    color="default"
-                                    theme="ghost"
+                                    color="mono"
                                     :disabled="model.saving"
                                     @click="reset"
                                 />

package/components/2_molecules/AwSelect.vue

@@ -54,13 +54,15 @@
                 <AwButton
                     v-if="_isCreateButton"
                     v-show="!isEditing"
-                    theme="icon"
                     type="button"
+                    theme="icon"
                     @click="_onAddClick"
                 >
-                    <slot name="create-icon">
-                        <AwIconSystemMono name="add-circle" size="20" />
-                    </slot>
+                    <template #icon>
+                        <slot name="create-icon">
+                            <AwIconSystemMono name="add-circle" size="20" />
+                        </slot>
+                    </template>
                 </AwButton>
 
                 <AwButton
@@ -73,11 +75,11 @@
                     <AwIconSystemMono name="close" />
                 </AwButton>
                 <AwButton
-                    :size="$attrs.size || 'md'"
                     tabindex="-1"
-                    theme="icon"
                     type="button"
                     class="h-full"
+                    theme="icon"
+                    :size="$attrs.size || 'md'"
                     @click="searchable ? toggleDropdown() : null"
                 >
                     <AwIconSystemColor
@@ -86,6 +88,7 @@
                         name="spinner"
                         class="h-5 w-5"
                     />
+
                     <AwIconSystemMono
                         v-if="
                             !isLoading &&
@@ -150,9 +153,9 @@
                         <AwIconSystemMono name="close" />
                     </AwButton>
                     <AwButton
-                        :size="$attrs.size || 'md'"
                         tabindex="-1"
                         theme="icon"
+                        :size="$attrs.size || 'md'"
                         class="h-full"
                         @click="searchable ? toggleDropdown() : null"
                     >

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/2_molecules/AwSquareIconButton.vue

@@ -0,0 +1,52 @@
+<template>
+    <component
+        class="aw-square-icon-button"
+        :class="classes"
+        :is="_linkComponent"
+        :disabled="isDisabled"
+        v-bind="_linkAttrs"
+        v-on="$listeners"
+    >
+        <slot>
+            <AwIcon :name="icon" :size="iconSize" />
+        </slot>
+    </component>
+</template>
+
+<script>
+import AwLink from '@AwAtoms/AwLink.vue'
+
+export default {
+    name: 'AwSquareIconButton',
+
+    extends: AwLink,
+
+    props: {
+        icon: {
+            type: String,
+            default: 'close'
+        },
+
+        iconSize: {
+            type: [String, Number],
+            default: 16
+        },
+
+        // Possible values: mono-900, mono-800, mono-700, mono-600
+        color: {
+            type: String,
+            default: 'mono-900'
+        }
+    },
+
+    computed: {
+        classes() {
+            return [`aw-square-icon-button--color-${this.color || 'mono-900'}`]
+        },
+
+        isDisabled() {
+            return this.$attrs.disabled === true || this.$attrs.disabled === ''
+        }
+    }
+}
+</script>

package/components/2_molecules/AwTabNav.vue

@@ -8,9 +8,14 @@
                 [`${_cssClasses.base}--without-min-with`]: modifiers.includes(
                     'without-min-with'
                 ),
-                [`${_cssClasses.base}--fullwidth`]: modifiers.includes(
-                    'fullwidth'
-                )
+                [`${_cssClasses.base}--expand`]:
+                    (modifiers.includes('expand') ||
+                        !modifiers.includes('always-small')) &&
+                    !modifiers.includes('without-min-with'),
+                [`${_cssClasses.base}--fullwidth`]:
+                    modifiers.includes('fullwidth') &&
+                    !modifiers.includes('always-small') &&
+                    !modifiers.includes('without-min-with')
             }
         ]"
         @resized="scrollToActive(false)"

package/components/3_organisms/AwAddressBlock.vue

@@ -15,9 +15,8 @@
             <!-- Address info -->
             <AwAccordionFold :show="hasAddress">
                 <div class="flex justify-end relative w-full">
-                    <AwButton
+                    <AwSquareIconButton
                         icon="edit"
-                        theme="circle"
                         class="edit-button"
                         @click="openModal(null)"
                     />
@@ -175,11 +174,7 @@
                         @click="saveAddress"
                     />
 
-                    <AwButton
-                        color="default"
-                        theme="ghost"
-                        @click="resetAddress"
-                    >
+                    <AwButton color="mono" @click="resetAddress">
                         <span class="text-dark-blue">
                             {{ $t('Cancel') }}
                         </span>
@@ -193,6 +188,7 @@
 <script>
 import { clone } from 'rambdax'
 import { makePreventableEventMock } from '@AwUtils/events'
+import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 const BASE = {
     description: null,
@@ -216,6 +212,7 @@ const BASE = {
 
 export default {
     name: 'AwAddressBlock',
+    components: { AwSquareIconButton },
 
     props: {
         model: {

package/components/3_organisms/AwCodeSnippet.vue

@@ -46,7 +46,8 @@ export default {
                         staticClass: 'absolute top-0 right-0 mr-4 mt-4',
                         props: {
                             size: 'sm',
-                            color: 'surface'
+                            color: 'mono',
+                            theme: 'outline'
                         },
                         on: {
                             click: () => copyFn(props.code)

package/components/3_organisms/AwContextMenu.vue

@@ -27,7 +27,10 @@ export default {
             default: ''
         },
 
-        hideText: Boolean
+        hideText: {
+            type: Boolean,
+            default: null
+        }
     },
 
     render(h) {
@@ -77,9 +80,10 @@ export default {
 
         const button = h('AwButton', {
             props: {
-                theme: 'ghost',
-                color: 'default',
-                text: this.hideText ? '' : this.text
+                theme: 'outline',
+                color: 'mono',
+                text: this.hideText ? '' : this.text,
+                hideText: this.hideText === null ? !this.text : this.hideText
             },
             staticClass: this.buttonClass,
             class: { 'aw-context-menu--text': this.text && !this.hideText },
@@ -95,6 +99,12 @@ export default {
                         props: {
                             name: 'more',
                             rotate: this.vertical ? 90 : null
+                        },
+                        class: {
+                            'mr-2':
+                                this.hideText === null
+                                    ? this.text
+                                    : !this.hideText
                         }
                     })
             }