@awes-io/ui 2.86.0 → 2.88.0

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

@@ -16,8 +16,8 @@
             <AwAccordionFold :show="hasAddress">
                 <div class="flex justify-end relative w-full">
                     <AwButton
+                        color="mono-light"
                         icon="edit"
-                        theme="circle"
                         class="edit-button"
                         @click="openModal(null)"
                     />
@@ -175,11 +175,7 @@
                         @click="saveAddress"
                     />
 
-                    <AwButton
-                        color="default"
-                        theme="ghost"
-                        @click="resetAddress"
-                    >
+                    <AwButton color="mono" @click="resetAddress">
                         <span class="text-dark-blue">
                             {{ $t('Cancel') }}
                         </span>

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

package/components/3_organisms/AwContextMenu.vue

@@ -27,7 +27,15 @@ export default {
             default: ''
         },
 
-        hideText: Boolean
+        hideText: {
+            type: Boolean,
+            default: null
+        },
+
+        color: {
+            type: String,
+            default: 'mono'
+        }
     },
 
     render(h) {
@@ -77,12 +85,12 @@ export default {
 
         const button = h('AwButton', {
             props: {
-                theme: 'ghost',
-                color: 'default',
-                text: this.hideText ? '' : this.text
+                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': ''
             },

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>
 

package/components/3_organisms/AwFilterMonth.vue

@@ -1,16 +1,14 @@
 <template>
     <div :class="[_cssClasses.base, , { default: format === 'DD.MM.YYYY' }]">
-        <AwButton
+        <button
             :disabled="prevDisabled"
-            :size="_size"
             :class="_cssClasses.prev"
-            theme="system"
             @click="prev"
+            class="aw-filter-month__btn"
         >
-            <template #icon>
-                <AwIconSystemMono name="arrow" size="16" />
-            </template>
-        </AwButton>
+            <AwIconSystemMono name="arrow" size="16" />
+        </button>
+
         <slot :date="date">
             <div :class="_cssClasses.date">
                 <div
@@ -23,17 +21,15 @@
                 {{ date.format(_displayFormat) }}
             </div>
         </slot>
-        <AwButton
+
+        <button
             :disabled="nextDisabled"
-            :size="_size"
             :class="_cssClasses.next"
-            theme="system"
+            class="aw-filter-month__btn"
             @click="next"
         >
-            <template #icon>
-                <AwIconSystemMono name="arrow" rotate="180" size="16" />
-            </template>
-        </AwButton>
+            <AwIconSystemMono name="arrow" rotate="180" size="16" />
+        </button>
     </div>
 </template>
 

package/components/3_organisms/AwModal.vue

@@ -31,11 +31,9 @@
                             :class="elClasses.close"
                             :title="$t('Close')"
                             :aria-label="$t('Close')"
-                            @click.prevent="close()"
-                            theme="ghost"
-                            color="default"
+                            color="mono-light"
                             tabindex="0"
-                            content-class="p-0"
+                            @click.prevent="close()"
                         >
                             <template #icon>
                                 <AwIconSystemMono name="close" size="16" />

package/components/3_organisms/AwModalButtons.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="aw-modal-buttons" :class="{ 'aw-modal-buttons--desktop': isDesktop, 'aw-modal-buttons--mobile': !isDesktop }">
+        <!-- visible buttons -->
+        <slot name="buttons" :buttons="groupedButtons.buttons">
+            <AwButton
+                v-for="({ listeners, tooltip, size, cssClass, autoWidth, ...attrs }, i) in groupedButtons.buttons"
+                :key="i"
+                v-tooltip.prepend="tooltip"
+                v-bind="attrs"
+                :size="size ? size : 'lg'"
+                class="aw-modal-buttons__button"
+                :class="[
+                    cssClass,
+                    {
+                        'aw-modal-buttons__button--equal': !isDesktop && !autoWidth
+                    }
+                ]"
+                v-on="listeners"
+            />
+        </slot>
+
+        <!-- dropdown buttons -->
+        <template v-if="groupedButtons.dropdown.length">
+            <slot name="toggler" :v-bind="{ togglerProps, isOpened, open, close }">
+                <AwButton v-bind="togglerProps" @click="open" />
+            </slot>
+            <AwDropdown :show.sync="isOpened" :options="$options.dropdownOptions">
+                <slot name="dropdown" :buttons="groupedButtons.dropdown">
+                    <AwDropdownButton
+                        v-for="({ listeners, tooltip, ...attrs }, i) in groupedButtons.dropdown"
+                        :key="i"
+                        v-tooltip.prepend="tooltip"
+                        v-bind="attrs"
+                        v-on="listeners"
+                    />
+                </slot>
+            </AwDropdown>
+        </template>
+    </div>
+</template>
+
+<script>
+import { omit } from 'rambdax'
+
+export default {
+    name: 'AwModalButtons',
+
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        },
+
+        options: {
+            type: Object,
+            default: () => ({})
+        },
+
+        togglerOptions: {
+            type: Object,
+            default: () => ({ color: 'default', icon: 'more' })
+        },
+
+        desktopFrom: {
+            type: String,
+            default: 'md'
+        },
+
+        justify: {
+            type: String,
+            default: 'end'
+        }
+    },
+
+    data() {
+        return {
+            isOpened: false
+        }
+    },
+
+    computed: {
+        isDesktop() {
+            return this.$screen[this.desktopFrom] || false
+        },
+
+        groupedButtons() {
+            return this.items.reduce(
+                (acc, item) => {
+                    const { cta, dropdown, show = true, ...itemProps } = { ...this.options, ...item }
+
+                    // rename class prop
+                    if (itemProps.class) {
+                        itemProps.cssClass = itemProps.class
+                        delete itemProps.class
+                    }
+
+                    // add button if visible
+                    if (show !== false) {
+                        const group = this.isDesktop ? (dropdown ? 'dropdown' : 'buttons') : cta ? 'buttons' : 'dropdown'
+                        acc[group].push(itemProps)
+                    }
+
+                    return acc
+                },
+                { buttons: [], dropdown: [] }
+            )
+        },
+
+        togglerProps() {
+            return { ...omit(['cta'], this.options || {}), ...this.togglerOptions }
+        }
+    },
+
+    methods: {
+        open() {
+            this.isOpened = true
+        },
+
+        close() {
+            this.isOpened = false
+        }
+    },
+
+    dropdownOptions: {
+        placement: 'top-start',
+        modifiers: [{ name: 'offset', options: { offset: [0, 5] } }]
+    }
+}
+</script>

package/components/3_organisms/AwModelEdit.vue

@@ -9,9 +9,8 @@
                 <slot name="buttons">
                     <AwButton
                         :disabled="model.saving"
-                        theme="ghost"
                         class="aw-model-edit__button aw-model-edit__button--mobile md:hidden"
-                        color="default"
+                        color="mono"
                         data-testid="model-reset"
                         @click="reset"
                     >
@@ -30,9 +29,8 @@
 
                     <AwButton
                         :disabled="model.saving"
-                        theme="ghost"
                         class="aw-model-edit__button hidden md:block ml-4"
-                        color="default"
+                        color="mono"
                         type="button"
                         data-testid="model-reset"
                         @click="reset"

package/components/3_organisms/AwPagination.vue

@@ -16,22 +16,23 @@
             <AwButton
                 :data-page="prevPage"
                 :disabled="prevPage === null"
-                color="default"
                 class="mr-1 lg:hidden"
-                content-class="p-3"
+                color="mono"
             >
-                <AwIconSystemMono name="arrow" size="16" />
+                <template #icon>
+                    <AwIconSystemMono name="arrow" size="16" />
+                </template>
             </AwButton>
 
             <AwButton
                 :data-page="prevPage"
                 :disabled="prevPage === null"
-                theme="ghost"
-                color="default"
-                size="sm"
+                color="mono"
                 class="aw-button-nav__arrow-btn hidden lg:inline-flex mr-4"
             >
-                <AwIconSystemMono name="arrow" size="16" />
+                <template #icon>
+                    <AwIconSystemMono name="arrow" size="16" />
+                </template>
             </AwButton>
 
             <span class="lg:hidden">
@@ -61,22 +62,23 @@
             <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"
-                size="sm"
-                theme="ghost"
-                color="default"
+                color="mono"
                 class="aw-button-nav__arrow-btn hidden lg:inline-flex ml-4"
             >
-                <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                <template #icon>
+                    <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                </template>
             </AwButton>
 
             <AwButton
                 :data-page="nextPage"
                 :disabled="nextPage === null"
-                color="default"
+                color="mono"
                 class="ml-1 lg:hidden"
-                content-class="p-3"
             >
-                <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                <template #icon>
+                    <AwIconSystemMono name="arrow" rotate="180" size="16" />
+                </template>
             </AwButton>
         </div>
 
@@ -85,16 +87,18 @@
             <div class="flex justify-end">
                 <template v-if="limits">
                     <AwButton
-                        theme="toggle"
+                        theme="icon"
                         content-class="p-0"
                         @click="limitsOpened = !limitsOpened"
                     >
-                        {{ limit }}
-                        <AwIconSystemMono
-                            name="triangle"
-                            class="inline transition-200"
-                            :class="{ 'rotate-180': limitsOpened }"
-                        />
+                        <template #icon-right>
+                            {{ limit }}
+                            <AwIconSystemMono
+                                name="triangle"
+                                class="inline transition-200"
+                                :class="{ 'rotate-180': limitsOpened }"
+                            />
+                        </template>
                     </AwButton>
                     <AwDropdown
                         ref="limits"

package/components/3_organisms/AwPassword.vue

@@ -7,10 +7,16 @@
                 type="button"
                 @click.stop="type = isShown ? 'password' : 'text'"
             >
-                <Transition name="fade-from-bottom" mode="out-in">
-                    <AwIconSystemMono v-if="isShown" key="hide" name="eye-no" />
-                    <AwIconSystemMono v-else key="show" name="eye" />
-                </Transition>
+                <template #icon>
+                    <Transition name="fade-from-bottom" mode="out-in">
+                        <AwIconSystemMono
+                            v-if="isShown"
+                            key="hide"
+                            name="eye-no"
+                        />
+                        <AwIconSystemMono v-else key="show" name="eye" />
+                    </Transition>
+                </template>
             </AwButton>
         </template>
     </AwInput>

package/components/3_organisms/AwSearch.vue

@@ -15,7 +15,6 @@
                 v-if="!$route.query[param]"
                 name="search"
                 class="aw-search__icon-default mr-4"
-                size="24"
             />
             <button
                 v-else

package/components/3_organisms/AwTable/AwTableBuilder.vue

@@ -136,7 +136,7 @@
 
         <AwButton
             v-if="infiniteScroll && !isLastPage"
-            color="default"
+            color="mono"
             size="lg"
             class="mt-3 w-full"
             @click="fetchMore()"
@@ -146,7 +146,7 @@
 
         <AwButton
             v-if="mixed && !isLastPage"
-            color="default"
+            color="mono"
             size="lg"
             class="mt-3 w-full"
             @click="onPageClick(page + 1, false)"

package/components/3_organisms/AwTel.vue

@@ -42,7 +42,7 @@
                     "
                 >
                     <AwIconSystemMono
-                        :name="phoneNumber.valid ? 'check-light' : 'ban-light'"
+                        :name="phoneNumber.valid ? 'check' : 'ban'"
                     />
                 </span>
             </template>

package/components/3_organisms/AwUploaderFiles.vue

@@ -26,7 +26,7 @@
                 <AwButton
                     theme="icon"
                     icon="close"
-                    size="sm"
+                    size="xs"
                     :text="parent.$t('Remove file')"
                     @click="props.removeFile(file.id)"
                 />

package/components/4_pages/AwPage.vue

@@ -75,7 +75,7 @@
                 ></div>
                 <div class="flex-1 text-center">
                     <AwButton
-                        color="surface"
+                        color="mono"
                         class="-mb-4"
                         content-class="rounded-b-none normal-case"
                         @click="toggleFullscreen(false)"

package/components/4_pages/AwPageMenuButtons.vue

@@ -6,7 +6,7 @@
             class="aw-page-menu-buttons__aw-context-menu"
             :options="$options.dropdownOptions"
             :text="$t('More')"
-            :hide-text="hideContextMenuText"
+            :hide-text="!$screen[showContextMenuTextFrom]"
         >
             <AwDropdownButton
                 v-for="({ listeners, tooltip, iconSize, ...attrs },
@@ -41,15 +41,31 @@
             v-if="!isExpanded && splitButtons.fixed"
             class="aw-page-menu-buttons__fixed-btns"
         >
-            <AwButtonFixed
+            <AwButton
                 v-for="({ listeners, tooltip, ...attrs },
                 i) in splitButtons.fixed"
                 :key="i"
-                :expanded="isInTopPosition"
                 v-tooltip="tooltip"
                 v-bind="attrs"
+                auto-width
                 v-on="listeners"
-            />
+            >
+                <template #icon="{ icon }">
+                    <AwIcon :name="icon" />
+                </template>
+
+                <template #default="{ text }">
+                    <span
+                        v-if="text"
+                        class="aw-page-menu-buttons__fixed-btn-text truncate"
+                        :class="{
+                            'aw-page-menu-buttons__fixed-btn-text--expanded': isInTopPosition
+                        }"
+                    >
+                        {{ text }}
+                    </span>
+                </template>
+            </AwButton>
         </div>
     </div>
 </template>
@@ -62,16 +78,12 @@ import { supportsPassive } from '@AwUtils/events'
 const toIconButton = (props) => ({
     ...props,
     size: 'lg',
-    theme: 'circle'
+    theme: 'solid'
 })
 
 export default {
     name: 'AwPageMenuButtons',
 
-    components: {
-        AwButtonFixed: () => import('@AwPages/_AwButtonFixed.vue')
-    },
-
     props: {
         items: {
             type: Array,
@@ -90,7 +102,12 @@ export default {
             default: 150 // px
         },
 
-        hideContextMenuText: Boolean
+        // hideContextMenuText: Boolean,
+
+        showContextMenuTextFrom: {
+            type: String,
+            default: 'lg'
+        }
     },
 
     data() {