@awes-io/ui 2.87.0 → 2.89.0

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() {

package/components/4_pages/AwPageSingle.vue

@@ -12,14 +12,18 @@
         >
             <template #breadcrumbs>
                 <slot name="breadcrumb">
-                    <AwSquareIconButton
-                        :color="isDesktop || isHeaderStuck ? 'mono-900' : 'mono-800'"
+                    <AwButton
+                        :color="
+                            isDesktop || isHeaderStuck ? 'mono-light' : 'mono'
+                        "
                         :href="backUrl"
                         :aria-label="breadcrumb?.title ?? $t('Back')"
                         v-on="backUrl ? null : { click: () => $router.back() }"
                     >
-                        <AwIconSystemMono name="arrow" />
-                    </AwSquareIconButton>
+                        <template #icon>
+                            <AwIconSystemMono name="arrow" />
+                        </template>
+                    </AwButton>
                 </slot>
 
                 <slot name="after-breadcrumb" />

package/components/4_pages/_AwPageHeader.vue

@@ -15,7 +15,7 @@
         <div class="aw-page-header__buttons">
             <slot />
 
-            <AwUserMenu v-if="!hideMenu" outline vertical caret mono-icons />
+            <AwUserMenu v-if="!hideMenu" outline vertical caret />
 
             <slot name="after-menu" />
         </div>

package/components/4_pages/_AwPageHeadline.vue

@@ -3,15 +3,18 @@
         <!-- Breadcumb -->
         <div class="aw-page-headline__back-wrapper">
             <slot name="headline-breadcrumb" :breadcrumb="breadcrumb">
-                <AwSquareIconButton
+                <AwButton
                     v-if="backUrl || isMenuToggler"
                     class="aw-page-headline__back"
+                    color="mono"
                     :href="backUrl"
                     :aria-label="isMenuToggler ? $t('Menu') : breadcrumb.title"
                     v-on="isMenuToggler ? { click: openMenu } : null"
                 >
-                    <AwIconSystemMono name="arrow-l" size="24" />
-                </AwSquareIconButton>
+                    <template #icon>
+                        <AwIconSystemMono name="arrow" />
+                    </template>
+                </AwButton>
             </slot>
         </div>
 
@@ -61,11 +64,9 @@
 import { AwPage as _config } from '@AwConfig'
 import { conf } from '@AwUtils/component'
 import { getPath } from '@AwUtils/router'
-import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 
 export default {
     name: 'AwPageHeadline',
-    components: { AwSquareIconButton },
 
     _config,
 
@@ -131,7 +132,7 @@ export default {
         },
 
         isMenuToggler() {
-            return !this.backUrl && this.breadcrumbMenu
+            return !this.backUrl && !this.$screen.lg && this.breadcrumbMenu
         }
     },
 

package/components/5_layouts/_AwHeaderNotification.vue

@@ -18,7 +18,7 @@
             <AwButton
                 v-for="({ listeners, ...props }, i) in config.buttons"
                 :key="i"
-                size="sm"
+                size="xs"
                 v-bind="props"
                 v-on="listeners"
             />
@@ -31,7 +31,9 @@
             class="flex-shrink-0"
             @click="$store.commit('awesIo/SET_HEADER_NOTIFICATION', null)"
         >
-            <AwIconSystemMono name="close" />
+            <template #icon>
+                <AwIconSystemMono name="close" />
+            </template>
         </AwButton>
     </div>
 </template>

package/components/5_layouts/_AwMobileMenu.vue

@@ -11,38 +11,37 @@
     >
         <div class="aw-mobile-menu__header">
             <!-- back button -->
-            <AwSquareIconButton
+            <AwButton
                 v-if="submenuOpened"
                 class="aw-mobile-menu__back flex-shrink-0"
+                :aria-label="$t('Back')"
+                color="mono"
                 @click="submenuOpened = false"
-                color="mono-800"
             >
-                <AwIconSystemMono
-                    name="arrow"
-                    size="16"
-                    class="text-mono-400"
-                />
-                <span class="sr-only">
-                    {{ $t('Back') }}
-                </span>
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono
+                        name="arrow"
+                        size="16"
+                        class="text-mono-400"
+                    />
+                </template>
+            </AwButton>
 
             <!-- close button -->
-            <AwSquareIconButton
+            <AwButton
                 class="aw-mobile-menu__close flex-shrink-0"
+                :aria-label="$t('Close')"
+                color="mono"
                 @click="show = false"
-                color="mono-800"
             >
-                <AwIconSystemMono
-                    name="close"
-                    size="16"
-                    class="text-mono-400"
-                />
-
-                <span class="sr-only">
-                    {{ $t('Close') }}
-                </span>
-            </AwSquareIconButton>
+                <template #icon>
+                    <AwIconSystemMono
+                        name="close"
+                        size="16"
+                        class="text-mono-400"
+                    />
+                </template>
+            </AwButton>
         </div>
 
         <slot v-if="!submenuOpened" name="before-mobile-menu">
@@ -216,14 +215,12 @@ import { conf } from '@AwUtils/component'
 import { getPath } from '@AwUtils/router'
 import AwMobileMenuNav from '@AwLayouts/_AwMobileMenuNav.vue'
 import AwMobileMenuItemNew from '@AwLayouts/_AwMobileMenuItemNew.vue'
-import AwSquareIconButton from '../2_molecules/AwSquareIconButton.vue'
 // import AwMobileMenuItem from '@AwLayouts/_AwMobileMenuItem.vue'
 
 export default {
     name: 'AwMobileMenu',
 
     components: {
-        AwSquareIconButton,
         AwMobileMenuNav,
         AwLayoutLogo: () => import('@AwLayouts/_AwLayoutLogo.vue'),
         AwMobileMenuItemNew

package/components/5_layouts/_AwNoty.vue

@@ -11,29 +11,16 @@
         <!-- icon -->
         <Component
             :is="$options.components.AwIcon"
-            v-if="typeof props.icon === 'string' && props.icon"
-            :name="props.icon"
+            v-if="props.icon"
+            :name="
+                typeof props.icon === 'string'
+                    ? props.icon
+                    : $options.getDefaultIconName(props.type)
+            "
+            size="20"
             class="aw-noty__icon"
             :class="`text-${props.type}`"
         />
-        <Component
-            :is="$options.components.AwIconSystemMono"
-            v-else-if="props.icon === true"
-            :name="$options.getDefaultIconName(props.type)"
-            class="aw-noty__icon"
-            :class="`text-${props.type}`"
-        />
-        <!-- <svg
-            v-else-if="props.icon"
-            width="20"
-            height="20"
-            :class="`text-${props.type}`"
-            class="aw-noty__icon fill-current"
-        >
-            <path
-                d="M10 1.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm4.1 6.5l-4.4 4.4a.7.7 0 01-1 0l-2.2-2.2a.7.7 0 111-1l1.7 1.8 4-4a.7.7 0 111 1zm0 0"
-            />
-        </svg> -->
 
         <!-- content -->
         <div class="aw-noty__content" :class="{ 'has-text': props.text }">
@@ -118,11 +105,13 @@ export default {
     getDefaultIconName(type) {
         switch (type) {
             case 'error':
-                return 'close-solid'
+                return 'awesio/close-circle'
             case 'warning':
-                return 'attention'
+                return 'awesio/warning'
+            case 'info':
+                return 'awesio/info-circle'
             default:
-                return 'check-solid'
+                return 'awesio/check-circle'
         }
     }
 }

package/components/5_layouts/_AwUserMenu.vue

@@ -2,10 +2,13 @@
     <div
         v-if="showUser"
         class="aw-user-menu"
+        v-on="
+            isDesktop
+                ? { mouseenter: _cancelClose, mouseleave: closeDropdown }
+                : null
+        "
         @focusout="_closeOnBlur"
         @click="_closeOnClick"
-        @mouseenter="_cancelClose"
-        @mouseleave="closeDropdown"
     >
         <slot name="user">
             <button
@@ -13,8 +16,12 @@
                 :class="{ 'aw-user-menu__user--outline': outline }"
                 aria-haspopup="true"
                 :aria-label="$t('Open menu')"
+                v-on="
+                    isDesktop
+                        ? { mouseenter: openDropdown }
+                        : { click: openDropdown }
+                "
                 @focus="openDropdown"
-                @mouseenter="openDropdown"
             >
                 <AwAvatar
                     v-bind="user"
@@ -55,7 +62,6 @@
                         :size="16"
                         class="aw-user-menu__theme-icon"
                         :class="{
-                            'aw-user-menu__theme-icon--mono': monoIcons,
                             'mr-2': vertical,
                             'mr-4': !vertical
                         }"
@@ -83,7 +89,6 @@
                         v-bind="_pickButtonProps(item)"
                         :class="[
                             {
-                                'aw-user-menu__nav-item--icon-mono': monoIcons,
                                 'aw-user-menu__nav-item--active':
                                     item === activeMenu
                             },
@@ -138,9 +143,7 @@ export default {
 
         outline: Boolean,
 
-        caret: Boolean,
-
-        monoIcons: Boolean
+        caret: Boolean
     },
 
     inject: {
@@ -158,6 +161,10 @@ export default {
     computed: {
         ...mapGetters('awesIo', ['user']),
 
+        isDesktop() {
+            return this.$screen.lg
+        },
+
         showUser() {
             return !isNil(this.user) && !isEmpty(this.user)
         },
@@ -224,7 +231,11 @@ export default {
             return omit('icon,iconActive,children,listeners,description', props)
         },
 
-        openDropdown() {
+        openDropdown($event) {
+            if ($event && isType('Function', $event.stopPropagation)) {
+                $event.stopPropagation()
+            }
+
             clearTimeout(this._tm)
             this.$refs.dropdown.visible = true
         },

package/components/_config.js

@@ -202,6 +202,14 @@ export const AwIconSystem = {
     size: 16
 }
 
+export const AwImageUpload = {
+    uploadConfig: {
+        baseURL: 'https://upload.easyweek.app/upload/image',
+        method: 'post'
+    },
+    resultPath: 'imageUrl'
+}
+
 export const AwPage = {
     titleTag: 'h1'
 }
@@ -248,6 +256,7 @@ export default {
     AwInput,
     AwMoney,
     AwIconSystem,
+    AwImageUpload,
     AwPage,
     AwModal,
     AwTable,

package/nuxt/index.js

@@ -217,7 +217,12 @@ async function AwesIoUi() {
                     `${rootDir}/nuxt.config.{js,ts}`
                 ],
                 options: {
-                    whitelistPatterns: [/gap-/, /grid-cols-/, /col-span-/]
+                    whitelistPatterns: [
+                        /gap-/,
+                        /grid-cols-/,
+                        /col-span-/,
+                        /text-/
+                    ]
                 }
             }
         }
@@ -244,6 +249,10 @@ async function AwesIoUi() {
             postcss.plugins
         )
 
+        postcss.preset = {
+            stage: 3
+        }
+
         postcss.plugins.tailwindcss = tailwindConfig
     })
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.87.0",
+    "version": "2.89.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -73,7 +73,8 @@
         "rambdax": "^7.2.0",
         "tailwindcss": "^1.9.6",
         "vue-currency-input": "^1.22.3",
-        "vue-i18n": "^8.14.0"
+        "vue-i18n": "^8.14.0",
+        "vue2-teleport": "^1.0.1"
     },
     "devDependencies": {
         "@babel/core": "^7.5.5",
@@ -113,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "c7e314537dc3afda6cf5253084d4080481079f0e"
+    "gitHead": "dc08b4ef8df7c1a521df1c7ef5be89af2c6aa52f"
 }

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

@@ -1,84 +0,0 @@
-.aw-button-fixed {
-    display: flex;
-    align-items: center;
-
-    padding: 0.75rem 1rem;
-    min-width: 3.5rem;
-    min-height: 3rem;
-    /* border-radius: 1rem; */
-
-    font-size: 1rem;
-    line-height: 1.125rem;
-    font-weight: 400;
-
-    background-color: rgba(var(--btn-bg), var(--btn-bg-opacity, 1));
-    color: rgba(var(--btn-fg), 1);
-
-    box-shadow: 0px 0.25rem 0.5rem rgba(var(--btn-bg), 0.2);
-
-    &__text {
-        flex-shrink: 1;
-        max-width: 1px;
-        margin-left: -1px;
-
-        opacity: 0.1;
-        transition-property: max-width, margin, opacity;
-        transition-duration: 120ms;
-
-        &--expanded {
-            max-width: 16rem;
-            margin-left: 0.75em;
-            opacity: 1;
-            transition-timing-function: ease-out;
-            transition-duration: 210ms;
-        }
-    }
-
-    &__lock {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        position: absolute;
-        inset: 0;
-
-        span {
-            background-color: var(--c-surface);
-            color: var(--c-on-surface);
-
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-
-            padding: 0.32em;
-            font-size: 1.2em;
-        }
-    }
-
-    &--locked {
-        position: relative;
-    }
-
-    &:hover {
-        background-image: linear-gradient(rgba(var(--btn-fg), 0.15), rgba(var(--btn-fg), 0.15));
-    }
-
-    &:active {
-        transform: translateY(1px);
-    }
-
-    &:focus-visible {
-        outline: theme('focusOutline');
-    }
-
-    &[disabled] {
-        --btn-bg-opacity: 0.5 !important;
-        cursor: not-allowed !important;
-        user-select: none !important;
-    }
-}
-
-a.aw-button-fixed--locked {
-    pointer-events: none;
-}

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

@@ -1,69 +0,0 @@
-.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/components/2_molecules/AwSquareIconButton.vue

@@ -1,52 +0,0 @@
-<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>