@awes-io/ui 2.87.0 → 2.89.0

package/components/1_atoms/AwSwitcher.vue

@@ -147,11 +147,11 @@ export default {
         },
 
         _onIcon() {
-            return this.icon || (this.size === 'lg' ? 'on' : 'check-regular')
+            return this.icon || (this.size === 'lg' ? 'on' : 'check')
         },
 
         _offIcon() {
-            return this.icon || (this.size === 'lg' ? 'off' : 'times-regular')
+            return this.icon || (this.size === 'lg' ? 'off' : 'close')
         },
 
         onSystemIcon() {

package/components/1_atoms/AwTag.vue

@@ -0,0 +1,54 @@
+<template>
+    <Component :is="tag" :style="tagStyle" class="aw-tag">
+        <AwIcon v-if="icon" :name="icon" size="16" />
+        {{ text }}
+    </Component>
+</template>
+
+<script>
+import { toColor, toOnColor, isCustomColor } from '@AwUtils/styles'
+
+export default {
+    name: 'AwTag',
+
+    props: {
+        tag: {
+            type: String,
+            default: 'span'
+        },
+
+        color: {
+            type: String,
+            default: 'mono-100'
+        },
+
+        onColor: {
+            type: String,
+            default: ''
+        },
+
+        text: {
+            type: String,
+            required: true
+        }
+    },
+
+    computed: {
+        tagStyle() {
+            if (isCustomColor(this.color)) {
+                return {
+                    '--tag-bg-color': toOnColor(this.color),
+                    '--tag-color': 'var(--c-on-overlay)'
+                }
+            }
+
+            return {
+                '--tag-bg-color': toColor(this.color),
+                '--tag-color': this.onColor
+                    ? toOnColor(this.onColor)
+                    : toOnColor(this.color)
+            }
+        }
+    }
+}
+</script>

package/components/2_molecules/AwActionButton.vue

@@ -21,6 +21,7 @@
                 :on-color="iconOnColor"
                 :size="iconSize"
             />
+            <span v-else class="aw-action-button__icon-empty"></span>
         </slot>
 
         <span class="aw-action-button__text">
@@ -34,7 +35,12 @@
             </AwDescription>
         </span>
 
-        <AwActionIcon v-if="iconRight" :icon="iconRight" size="sm" color="mono-900" />
+        <AwActionIcon
+            v-if="iconRight"
+            :icon="iconRight"
+            size="sm"
+            :color="modifiers.includes('outline') ? 'mono-800' : 'mono-900'"
+        />
 
         <AwDescription
             v-if="subdescription"

package/components/2_molecules/AwButton.vue

@@ -2,12 +2,68 @@
     <component
         :is="_linkComponent"
         class="aw-button"
-        :class="[classes, contentClass]"
+        :class="[
+            {
+                'aw-button--size-xs': size === 'xs',
+                'aw-button--size-sm': size === 'sm',
+                'aw-button--size-md': size === 'md',
+                'aw-button--size-lg': size === 'lg',
+                'aw-button--theme-solid': theme === 'solid',
+                'aw-button--theme-outline': theme === 'outline',
+                'aw-button--theme-icon': theme === 'icon',
+                'aw-button--color-accent': color === 'accent',
+                'aw-button--color-error': color === 'error',
+                'aw-button--color-mono': color === 'mono',
+                'aw-button--color-dark': color === 'dark',
+                'aw-button--loading': loading,
+                'aw-button--locked': locked,
+                'aw-button--with-text': isTextVisible,
+                'aw-button--auto-width': autoWidth,
+                'aw-button--icon-highlighted': isHighlightedIcon,
+                'aw-animated-icon-parent': !isDisabled && isAnimatedIcon
+            },
+            isCustomTheme ? `aw-button--theme-${theme}` : '',
+            isCustomColor ? `aw-button--color-${color}` : ''
+        ]"
         :disabled="isDisabled"
         :aria-label="$attrs['aria-label'] || text || null"
         v-bind="_linkAttrs"
         v-on="$listeners"
     >
+        <span
+            v-if="isIconPresent || isHighlightedIcon"
+            class="aw-button__icon-wrapper aw-button__icon-wrapper--left"
+            :class="{
+                'aw-button__icon-wrapper--highlighted':
+                    isIconPresent && isHighlightedIcon,
+                'aw-button__icon-wrapper--placeholder':
+                    !isIconPresent && isHighlightedIcon
+            }"
+        >
+            <slot name="icon" v-bind="{ icon }">
+                <AwIcon v-if="isIconPresent" :name="icon" />
+            </slot>
+        </span>
+
+        <slot v-if="!hideText" :text="text">
+            {{ text }}
+        </slot>
+
+        <span
+            v-if="isIconRightPresent || isHighlightedIcon"
+            class="aw-button__icon-wrapper aw-button__icon-wrapper--right"
+            :class="{
+                'aw-button__icon-wrapper--highlighted':
+                    isIconRightPresent && isHighlightedIcon,
+                'aw-button__icon-wrapper--placeholder':
+                    !isIconRightPresent && isHighlightedIcon
+            }"
+        >
+            <slot name="icon-right" v-bind="{ iconRight }">
+                <AwIcon v-if="isIconRightPresent" :name="iconRight" />
+            </slot>
+        </span>
+
         <AwIconSystemColor
             v-if="loading"
             class="aw-button__loader"
@@ -20,37 +76,9 @@
             v-tooltip="lockedTooltip"
         >
             <span>
-                <AwIconSystemMono name="lock" />
+                <AwIconSystemMono name="lock" class="fill-current" />
             </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"
-                    :size="16"
-                />
-            </slot>
-
-            <slot v-if="!hideText">
-                <span class="aw-button__text">
-                    {{ text }}
-                </span>
-            </slot>
-
-            <slot name="iconRight" v-bind="{ iconRight }">
-                <AwIcon
-                    v-if="iconRight"
-                    class="aw-button__icon-right"
-                    :class="{ 'ml-2': text }"
-                    :name="iconRight"
-                    :size="16"
-                />
-            </slot>
-        </template>
     </component>
 </template>
 
@@ -58,6 +86,11 @@
 import AwLink from '@AwAtoms/AwLink.vue'
 import { AwButton as _config } from '@AwConfig'
 import { conf } from '@AwUtils/component'
+import { ICONS as ANIMATED_ICONS } from '@AwUtils/icons/animated'
+
+export const BUTTON_THEMES = ['solid', 'outline', 'icon']
+
+export const BUTTON_COLORS = ['accens', 'error', 'mono', 'dark']
 
 export default {
     name: 'AwButton',
@@ -109,12 +142,6 @@ export default {
             default: false
         },
 
-        // CSS class for content wrapper
-        contentClass: {
-            type: String,
-            default: ''
-        },
-
         // Show lock icon and disable button
         locked: Boolean,
 
@@ -124,24 +151,14 @@ export default {
             default: ''
         },
 
-        hideText: Boolean
+        hideText: Boolean,
+
+        autoWidth: Boolean,
+
+        highlightIcon: Boolean
     },
 
     computed: {
-        classes() {
-            return [
-                {
-                    '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
-                },
-                `aw-button--color-${this.color || 'green'}`,
-                `aw-button--theme-${this.theme || 'solid'}`
-            ]
-        },
-
         isDisabled() {
             return (
                 this.$attrs.disabled === true ||
@@ -149,6 +166,54 @@ export default {
                 this.loading ||
                 this.locked
             )
+        },
+
+        isTextVisible() {
+            return (
+                !this.hideText &&
+                Boolean(
+                    this.text ||
+                        this.$scopedSlots.default ||
+                        this.$slots.default
+                )
+            )
+        },
+
+        isIconPresent() {
+            return Boolean(
+                this.icon || this.$scopedSlots.icon || this.$slots.icon
+            )
+        },
+
+        isIconRightPresent() {
+            return Boolean(
+                this.iconRight ||
+                    this.$scopedSlots['icon-right'] ||
+                    this.$slots['icon-right']
+            )
+        },
+
+        isHighlightedIcon() {
+            return (
+                this.highlightIcon &&
+                this.isTextVisible &&
+                this.theme === 'solid' &&
+                this.size === 'lg'
+            )
+        },
+
+        isAnimatedIcon() {
+            return Boolean(
+                ANIMATED_ICONS[this.icon] || ANIMATED_ICONS[this.iconRight]
+            )
+        },
+
+        isCustomTheme() {
+            return !BUTTON_THEMES.includes(this.theme)
+        },
+
+        isCustomColor() {
+            return !BUTTON_COLORS.includes(this.color)
         }
     },
 

package/components/2_molecules/AwSelect.vue

@@ -72,7 +72,9 @@
                     theme="icon"
                     type="button"
                 >
-                    <AwIconSystemMono name="close" />
+                    <template #icon>
+                        <AwIconSystemMono name="close" />
+                    </template>
                 </AwButton>
                 <AwButton
                     tabindex="-1"
@@ -82,24 +84,26 @@
                     :size="$attrs.size || 'md'"
                     @click="searchable ? toggleDropdown() : null"
                 >
-                    <AwIconSystemColor
-                        v-if="isLoading"
-                        key="loader"
-                        name="spinner"
-                        class="h-5 w-5"
-                    />
-
-                    <AwIconSystemMono
-                        v-if="
-                            !isLoading &&
-                                optionsList.length &&
-                                _isEditingOptions
-                        "
-                        key="arrow"
-                        name="triangle"
-                        class="transition-200"
-                        :class="{ 'rotate-180': isOpened }"
-                    />
+                    <template #icon>
+                        <AwIconSystemColor
+                            v-if="isLoading"
+                            key="loader"
+                            name="spinner"
+                            class="h-5 w-5"
+                        />
+
+                        <AwIconSystemMono
+                            v-if="
+                                !isLoading &&
+                                    optionsList.length &&
+                                    _isEditingOptions
+                            "
+                            key="arrow"
+                            name="triangle"
+                            class="transition-200"
+                            :class="{ 'rotate-180': isOpened }"
+                        />
+                    </template>
                 </AwButton>
             </template>
         </AwInput>
@@ -139,9 +143,13 @@
                         theme="icon"
                         @click="_onAddClick"
                     >
-                        <slot name="create-icon">
-                            <AwIconSystemMono name="add-circle" size="20" />
-                        </slot>
+                        <template #icon
+                            ><slot name="create-icon">
+                                <AwIconSystemMono
+                                    name="plus-circle"
+                                    size="20"
+                                /> </slot
+                        ></template>
                     </AwButton>
 
                     <AwButton
@@ -150,7 +158,9 @@
                         @click="_onClearClick"
                         theme="icon"
                     >
-                        <AwIconSystemMono name="close" />
+                        <template #icon>
+                            <AwIconSystemMono name="close" />
+                        </template>
                     </AwButton>
                     <AwButton
                         tabindex="-1"
@@ -159,22 +169,24 @@
                         class="h-full"
                         @click="searchable ? toggleDropdown() : null"
                     >
-                        <AwIconSystemColor
-                            v-if="isLoading"
-                            key="loader"
-                            name="spinner"
-                            class="h-5 w-5"
-                        />
-                        <AwIconSystemMono
-                            v-if="
-                                !isLoading &&
-                                    optionsList.length &&
-                                    _isEditingOptions
-                            "
-                            key="arrow"
-                            name="triangle"
-                            rotate="180"
-                        />
+                        <template #icon>
+                            <AwIconSystemColor
+                                v-if="isLoading"
+                                key="loader"
+                                name="spinner"
+                                class="h-5 w-5"
+                            />
+                            <AwIconSystemMono
+                                v-if="
+                                    !isLoading &&
+                                        optionsList.length &&
+                                        _isEditingOptions
+                                "
+                                key="arrow"
+                                name="triangle"
+                                rotate="180"
+                            />
+                        </template>
                     </AwButton>
                 </template>
             </AwInput>

package/components/2_molecules/_AwSelectFakeInput.vue

@@ -56,7 +56,9 @@
                         theme="icon"
                         class="h-full"
                     >
-                        <AwIconSystemMono name="close" />
+                        <template #icon>
+                            <AwIconSystemMono name="close" />
+                        </template>
                     </AwButton>
 
                     <slot name="caret" :is-opened="isOpened">
@@ -69,11 +71,13 @@
                             class="h-full"
                             @click="$emit('caret')"
                         >
-                            <AwIconSystemMono
-                                name="triangle"
-                                class="transition-200"
-                                :class="{ 'rotate-180': isOpened }"
-                            />
+                            <template #icon>
+                                <AwIconSystemMono
+                                    name="triangle"
+                                    class="transition-200"
+                                    :class="{ 'rotate-180': isOpened }"
+                                />
+                            </template>
                         </AwButton>
                     </slot>
                 </slot>

package/components/2_molecules/_AwSelectInput.vue

@@ -20,7 +20,9 @@
                 theme="icon"
                 class="h-full"
             >
-                <AwIconSystemMono name="close" />
+                <template #icon>
+                    <AwIconSystemMono name="close" />
+                </template>
             </AwButton>
 
             <slot name="caret" :is-opened="isOpened">
@@ -33,11 +35,13 @@
                     class="h-full"
                     @click="$emit('caret')"
                 >
-                    <AwIconSystemMono
-                        name="triangle"
-                        class="transition-200"
-                        :class="{ 'rotate-180': isOpened }"
-                    />
+                    <template #icon>
+                        <AwIconSystemMono
+                            name="triangle"
+                            class="transition-200"
+                            :class="{ 'rotate-180': isOpened }"
+                        />
+                    </template>
                 </AwButton>
             </slot>
         </template>

package/components/3_organisms/AwAddressBlock.vue

@@ -15,7 +15,8 @@
             <!-- Address info -->
             <AwAccordionFold :show="hasAddress">
                 <div class="flex justify-end relative w-full">
-                    <AwSquareIconButton
+                    <AwButton
+                        color="mono-light"
                         icon="edit"
                         class="edit-button"
                         @click="openModal(null)"
@@ -188,7 +189,6 @@
 <script>
 import { clone } from 'rambdax'
 import { makePreventableEventMock } from '@AwUtils/events'
-import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 const BASE = {
     description: null,
@@ -212,7 +212,6 @@ const BASE = {
 
 export default {
     name: 'AwAddressBlock',
-    components: { AwSquareIconButton },
 
     props: {
         model: {

package/components/3_organisms/AwCalendar/_AwCalendarNav.vue

@@ -6,7 +6,9 @@
             :disabled="disabledPrev"
             @click.stop="$emit('click:prev')"
         >
-            <AwIconSystemMono name="angle" />
+            <template #icon>
+                <AwIconSystemMono name="angle" />
+            </template>
         </AwButton>
         <div
             class="aw-calendar__nav-title"
@@ -29,7 +31,9 @@
             :disabled="disabledNext"
             @click.stop="$emit('click:next')"
         >
-            <AwIconSystemMono name="angle" rotate="180" />
+            <template #icon>
+                <AwIconSystemMono name="angle" rotate="180" />
+            </template>
         </AwButton>
     </div>
 </template>

package/components/3_organisms/AwCodeSnippet.vue

@@ -45,8 +45,7 @@ export default {
                     {
                         staticClass: 'absolute top-0 right-0 mr-4 mt-4',
                         props: {
-                            size: 'sm',
-                            color: 'mono',
+                            size: 'xs',
                             theme: 'outline'
                         },
                         on: {

package/components/3_organisms/AwContextMenu.vue

@@ -30,6 +30,11 @@ export default {
         hideText: {
             type: Boolean,
             default: null
+        },
+
+        color: {
+            type: String,
+            default: 'mono'
         }
     },
 
@@ -80,13 +85,12 @@ export default {
 
         const button = h('AwButton', {
             props: {
-                theme: 'outline',
-                color: 'mono',
+                color: this.color,
                 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 },
+            staticClass: 'aw-context-menu__button',
+            class: [this.buttonClass],
             attrs: {
                 'data-arrow-focus': ''
             },
@@ -99,12 +103,6 @@ export default {
                         props: {
                             name: 'more',
                             rotate: this.vertical ? 90 : null
-                        },
-                        class: {
-                            'mr-2':
-                                this.hideText === null
-                                    ? this.text
-                                    : !this.hideText
                         }
                     })
             }

package/components/3_organisms/AwCropper.vue

@@ -17,17 +17,19 @@
                 color="default"
                 @click="rotate"
             >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 512 512"
-                    width="20"
-                    height="20"
-                    class="fill-current"
-                >
-                    <path
-                        d="M256.5 8c66.2.1 126.4 26.2 170.8 68.7L463 41a24 24 0 0141 17v134a24 24 0 01-24 24H346a24 24 0 01-17-41l41.7-41.7a168 168 0 10-4 249.2 12 12 0 0116.3.5l39.7 39.7a12 12 0 01-.5 17.4A248 248 0 11256.5 8z"
-                    />
-                </svg>
+                <template #icon>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 512 512"
+                        width="20"
+                        height="20"
+                        class="fill-current"
+                    >
+                        <path
+                            d="M256.5 8c66.2.1 126.4 26.2 170.8 68.7L463 41a24 24 0 0141 17v134a24 24 0 01-24 24H346a24 24 0 01-17-41l41.7-41.7a168 168 0 10-4 249.2 12 12 0 0116.3.5l39.7 39.7a12 12 0 01-.5 17.4A248 248 0 11256.5 8z"
+                        />
+                    </svg>
+                </template>
             </AwButton>
         </div>
 

package/components/3_organisms/AwDate.vue

@@ -19,7 +19,9 @@
                     @click="$emit('input', null)"
                     theme="icon"
                 >
-                    <AwIconSystemMono name="close" />
+                    <template #icon>
+                        <AwIconSystemMono name="close" />
+                    </template>
                 </AwButton>
             </template>