@awes-io/ui 2.98.1 → 2.99.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.99.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.2...@awes-io/ui@2.99.0) (2024-03-25)
+
+
+### Bug Fixes
+
+* toggle show aside moved to organisms ([9783aa1](https://github.com/awes-io/client/commit/9783aa11c288235b1e40f9e08b44ddb4e77b8eb2))
+
+
+### Features
+
+* aside controls from config ([eb4bd0a](https://github.com/awes-io/client/commit/eb4bd0af6369d4034b727c9ce41f3079e3fdbee9))
+* change prefix style in select ([0b5600a](https://github.com/awes-io/client/commit/0b5600a37599682d3bc82589d0cda4318f4d07ef))
+* create new component for toggle aside ([d5fcb35](https://github.com/awes-io/client/commit/d5fcb35b16f3a0d1e47d8bbf478faa4453db4ae5))
+
+
+
+
+
+## [2.98.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.1...@awes-io/ui@2.98.2) (2024-02-27)
+
+
+### Bug Fixes
+
+* mobile menu item styles updated ([e8d7c53](https://github.com/awes-io/client/commit/e8d7c5317c6d7be8bd2b9d6a095060f33f07abc3))
+
+
+
+
+
 ## [2.98.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.98.0...@awes-io/ui@2.98.1) (2024-02-21)
 
 

package/assets/css/components/_index.css

@@ -75,6 +75,7 @@
 @import './page-headline.css';
 @import './page-single.css';
 @import './progress.css';
+@import './toggle-show-aside.css';
 
 @import './modal.css';
 @import './modal-buttons.css';

package/assets/css/components/layout-menu.css

@@ -66,10 +66,6 @@
         grid-column: 2;
         grid-row: 1 / 6;
 
-        overflow-y: auto;
-
-        scrollbar-width: thin;
-
         &--hidden {
             width: 0px;
         }

package/assets/css/components/layout.css

@@ -19,15 +19,25 @@
             max-width: 5rem;
         }
 
+        &.aw-layout-menu--hide-submenu {
+            max-width: 6rem;
+        }
+
         & ~ * {
             max-width: calc(100% - 300px);
             margin-left: 300px;
+            transition: max-width ease-in-out 0.3s, margin-left ease-in-out 0.3s;
         }
 
         &.aw-layout-menu--no-submenu ~ * {
             max-width: calc(100% - 5rem);
             margin-left: 5rem;
         }
+
+        &.aw-layout-menu--hide-submenu ~ * {
+            max-width: calc(100% - 6rem);
+            margin-left: 6rem;
+        }
     }
 }
 

package/assets/css/components/mobile-menu-item.css

@@ -7,7 +7,7 @@
 
     &:hover,
     &:focus {
-        oultine: none;
+        outline: none;
         text-decoration: none;
     }
 
@@ -21,12 +21,32 @@
     }
 
     &__icon-bg {
+        align-self: start;
+        display: block;
+        flex: none;
+
+        margin-right: 1rem;
+        line-height: 1;
         color: var(--c-mono-300);
     }
 
+    &__text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0.25rem;
+
+        font-size: 1rem;
+        line-height: 1.5;
+
+        padding-right: 1rem;
+        flex-grow: 1;
+    }
+
     &__description {
         color: var(--c-mono-400);
         font-size: 0.875rem;
+        font-weight: 400;
         line-height: 1rem;
     }
 
@@ -37,49 +57,10 @@
     &--default,
     &--primary {
         padding: 1rem 1.5rem;
-
-        .aw-mobile-menu-item {
-            &__icon-bg {
-                border-radius: 0.3125rem;
-                line-height: 1;
-                flex: none;
-            }
-
-            &__text {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                padding: 0 1rem;
-                flex-grow: 1;
-            }
-        }
     }
 
     &--island {
         padding: 1.5rem;
         border-radius: 0.9375rem;
-
-        .aw-mobile-menu-item {
-            &__icon-bg {
-                margin-right: 1rem;
-                align-self: start;
-            }
-
-            &__text {
-                font-size: 1rem;
-                line-height: 1.5rem;
-                margin-right: 1rem;
-            }
-
-            &__description {
-                display: block;
-                font-weight: 400;
-                margin-top: 0.25rem;
-            }
-
-            &__arrow {
-                margin-left: auto;
-            }
-        }
     }
 }

package/assets/css/components/nav.css

@@ -1,5 +1,26 @@
 .aw-nav {
-    @apply py-8;
+    @apply pt-8;
+
+    &__wrapper {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+
+        scrollbar-width: thin;
+        scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15) rgba(var(--c-on-surface-rgb), 0.1);
+
+        &::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+            background-color: rgba(var(--c-on-surface-rgb), 0.1);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(var(--c-on-surface-rgb), 0.1);
+        }
+
+        max-height: calc(100vh - 5rem);
+        padding-bottom: 2rem;
+    }
 
     &__title {
         @apply text-xl font-heading mb-5 truncate;

package/assets/css/components/select.css

@@ -69,7 +69,7 @@
 
         .aw-text-field__prefix {
             background: transparent;
-            padding-left: 0.25rem;
+            padding-left: 0.1875rem;
         }
     }
 
@@ -117,7 +117,7 @@
 
         .aw-text-field__prefix {
             background: transparent;
-            padding-left: 0.25rem;
+            padding-left: 0.1875rem;
         }
     }
 

package/assets/css/components/toggle-show-aside.css

@@ -0,0 +1,80 @@
+.aw-toggle-show-aside {
+    transition: width 300ms ease-in-out 0s;
+    position: relative;
+
+    &--hide {
+        width: 1rem !important;
+        background: var(--c-surface);
+
+        .aw-toggle-show-aside__btn-wrapper {
+            width: 1rem;
+
+            opacity: 1;
+        }
+    }
+
+    &--shadow {
+        box-shadow: 0 0 4px rgb(0 0 0 / 20%);
+    }
+
+    .aw-toggle-show-aside__btn-wrapper {
+        width: inherit;
+        position: fixed;
+        top: 0;
+
+        transition: 300ms opacity;
+    }
+
+    &:where(:not(&--hide)) &__btn-wrapper {
+        opacity: 0;
+    }
+
+    &:hover &__btn-wrapper {
+        opacity: 1;
+    }
+
+    &__arrow-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        position: absolute;
+        top: 2rem;
+        right: 0;
+
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0.25rem;
+
+        background: var(--c-surface);
+        border: 1px solid var(--c-mono-800);
+        border-radius: 2rem;
+
+        color: var(--c-mono-500);
+        transition: 100ms background-color, 100ms border-color, 100ms color;
+        transform: translateX(50%);
+
+        &:hover {
+            background: var(--c-on-surface);
+            border: 1px solid var(--c-on-surface);
+            color: var(--c-surface);
+        }
+
+        &-icon {
+            flex: none;
+            transition: 300ms transform;
+
+            &--reverse {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    &--reverse {
+        .aw-toggle-show-aside {
+            &__btn-wrapper {
+                width: 0;
+            }
+        }
+    }
+}

package/assets/css/typography.css

@@ -160,12 +160,12 @@
     }
 
     kbd {
-        @apply bg-mono-0 bg-opacity-20 align-middle;
+        @apply bg-mono-0 bg-opacity-20;
         border-radius: 2px;
         display: inline-block;
         white-space: nowrap;
         line-height: 0.875em;
-        font-size: 0.625em;
+        /* font-size: 0.625em; */
         padding: 4px;
         min-width: 16px;
         text-align: center;

package/assets/js/icons/mono.js

@@ -1,8 +1,8 @@
 export const ICONS = {
     angle:
-        'm14.3 18.7-6-6a1 1 0 0 1-.1-1.3l.1-.1 6-6a1 1 0 0 1 1.5 1.3v.1l-5.1 5.4 5 5.2a1 1 0 0 1 .1 1.3v.1a1 1 0 0 1-1.4.1h-.1Z',
+        'm13.29 18.7-6-5.99a1 1 0 0 1-.1-1.3l.1-.11 6-6a1 1 0 0 1 1.5 1.3l-.09.1-5.04 5.38 5.04 5.21a1 1 0 0 1 .1 1.3l-.1.12a1 1 0 0 1-1.3.1l-.11-.1Z',
     'angle-r':
-        'm9.7 18.7 6-6a1 1 0 0 0 .1-1.3v-.1l-6-6a1 1 0 0 0-1.6 1.3l.1.1 5 5.4-5 5.2a1 1 0 0 0-.1 1.3l.1.1a1 1 0 0 0 1.3.1h.1Z',
+        'm10.7 18.7 6-5.99a1 1 0 0 0 .1-1.3l-.1-.11-6-6a1 1 0 0 0-1.5 1.3l.1.1 5.03 5.38L9.3 17.3a1 1 0 0 0-.1 1.3l.1.12a1 1 0 0 0 1.3.1l.12-.1Z',
     arrow:
         'm1.3 12.5 6.2 6.2.1.1a1 1 0 0 0 1.3-.1l.1-.1a1 1 0 0 0 0-1.4l-4.5-4.4h17.6a1 1 0 0 0 .9-1v-.2a1 1 0 0 0-1-.8H4.5L9 6.3H9a1 1 0 0 0-1.5-1.4L1.3 11h-.1a1 1 0 0 0 .1 1.4Z',
     'arrow-r':

package/components/1_atoms/AwActionCard.vue

@@ -3,7 +3,12 @@
         <div class="aw-action-card__header">
             <slot name="before-title"></slot>
 
-            <AwHeadline class="aw-action-card__title">{{ title }}</AwHeadline>
+            <AwHeadline
+                class="aw-action-card__title"
+                :class="{ truncate: !fullTitle }"
+            >
+                {{ title }}
+            </AwHeadline>
 
             <slot name="after-title">
                 <AwButton
@@ -39,6 +44,8 @@ export default {
             default: ''
         },
 
+        fullTitle: Boolean,
+
         action: {
             type: Object,
             default: null

package/components/1_atoms/AwTag.vue

@@ -30,6 +30,11 @@ export default {
         text: {
             type: String,
             required: true
+        },
+
+        icon: {
+            type: String,
+            default: null
         }
     },
 

package/components/3_organisms/AwToggleShowAside.vue

@@ -0,0 +1,190 @@
+<template>
+    <div
+        class="aw-toggle-show-aside"
+        :class="{
+            'aw-toggle-show-aside--hide':
+                !isShown && !isShownOnMouse && !isShownOnBtn,
+            'aw-toggle-show-aside--reverse': reverse,
+            'aw-toggle-show-aside--shadow':
+                (!isShown && isShownOnMouse) || (!isShown && isShownOnBtn)
+        }"
+    >
+        <div class="aw-toggle-show-aside__btn-wrapper">
+            <button
+                v-tooltip="
+                    isAttachedKeyListener && isVisibleTooltip
+                        ? {
+                              content: $t(
+                                  `${isShown ? 'Collapse' : 'Expand'} {key}`,
+                                  {
+                                      key: toggleKeyHTML
+                                  }
+                              ),
+                              placement: reverse ? 'left' : 'right',
+                              flip: false
+                          }
+                        : null
+                "
+                class="aw-toggle-show-aside__arrow-btn"
+                @click="onClickToggleShown"
+                @mouseenter="onMouseEnterBtn"
+                @mouseleave="onMouseLeaveBtn"
+            >
+                <AwIconSystemMono
+                    class="aw-toggle-show-aside__arrow-btn-icon"
+                    :class="{
+                        'aw-toggle-show-aside__arrow-btn-icon--reverse': !isShown
+                    }"
+                    :name="reverse ? 'angle-r' : 'angle'"
+                    size="16"
+                />
+            </button>
+        </div>
+
+        <div
+            class="w-full h-full overflow-hidden"
+            @mousemove="onMouseEnterShowSubmenu"
+            @mouseleave="onMouseLeaveHideSubmenu"
+        >
+            <slot v-if="isShown || isShownOnMouse || isShownOnBtn" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { conf } from '@AwUtils/component'
+import { AwToggleShowAside as _config } from '@AwConfig'
+import { toggleEvents } from '@AwUtils/events'
+
+export default {
+    name: 'AwToggleShowAside',
+
+    _config,
+
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+
+        reverse: Boolean,
+
+        isAttachedKeyListener: {
+            type: Boolean,
+            default() {
+                return conf(this, 'isAttachedKeyListener')
+            }
+        },
+
+        options: {
+            type: Object,
+            default() {
+                return conf(this, 'options')
+            }
+        }
+    },
+
+    data: () => ({
+        isShown: true,
+        isShownOnMouse: false,
+        isShownOnBtn: false,
+        isVisibleTooltip: true
+    }),
+
+    computed: {
+        toggleKey() {
+            return this.reverse ? ']' : '['
+        },
+
+        toggleKeyHTML() {
+            return '<kbd>' + this.toggleKey + '</kbd>'
+        }
+    },
+
+    watch: {
+        isAttachedKeyListener: {
+            handler: 'toggleKeyListener',
+            immediate: true
+        }
+    },
+
+    beforeMount() {
+        let state = localStorage.getItem(this.name)
+
+        if (!state) {
+            localStorage.setItem(this.name, 'true')
+        } else {
+            this.isShown = state.toLowerCase() === 'true'
+        }
+    },
+
+    beforeDestroy() {
+        if (this.isAttachedKeyListener) {
+            this.toggleKeyListener(false)
+        }
+    },
+
+    methods: {
+        toggleKeyListener(enable = false) {
+            toggleEvents(
+                window,
+                [['keydown', this.onKeyDownToggleShown]],
+                enable
+            )
+        },
+
+        toggleShown() {
+            this.isShown = !this.isShown
+
+            if (!this.isShown) {
+                this.isShownOnBtn = false
+            }
+
+            localStorage.setItem(this.name, `${this.isShown}`)
+
+            this.$emit('toggle', this.isShown)
+        },
+
+        onClickToggleShown($event) {
+            this.isVisibleTooltip = false
+            this.toggleShown()
+
+            setTimeout(() => {
+                this.isVisibleTooltip = true
+            }, 0)
+        },
+
+        onKeyDownToggleShown(event) {
+            if (event.key === this.toggleKey) {
+                this.toggleShown()
+            }
+        },
+
+        onMouseEnterShowSubmenu() {
+            clearTimeout(this._mouseTm)
+
+            this._mouseTm = setTimeout(() => {
+                this.isShownOnMouse = true
+            }, this.options.showTimeout)
+        },
+
+        onMouseLeaveHideSubmenu() {
+            clearTimeout(this._mouseTm)
+
+            this._mouseTm = setTimeout(() => {
+                this.isShownOnMouse = false
+            }, this.options.hideTimeout)
+        },
+
+        onMouseEnterBtn() {
+            if (this.isShownOnMouse) {
+                this.isShownOnBtn = true
+            }
+        },
+
+        onMouseLeaveBtn() {
+            this.isShownOnBtn = false
+        }
+    }
+}
+</script>

package/components/5_layouts/_AwLayoutMenu.vue

@@ -2,7 +2,9 @@
     <div
         class="aw-layout-menu"
         :class="{
-            'aw-layout-menu--no-submenu': hideAside || !hasSubmenu
+            'aw-layout-menu--no-submenu': hideAside || !hasSubmenu,
+            'aw-layout-menu--hide-submenu':
+                !isShownSubmenu && !hideAside && hasSubmenu
         }"
     >
         <slot name="logo">
@@ -76,36 +78,63 @@
         </div>
 
         <!-- submenu -->
-        <div
+        <Component
+            v-if="!hideAside"
+            :is="hasSubmenu && submenuToggler ? 'AwToggleShowAside' : 'div'"
             class="aw-layout-menu__submenu"
             :class="{ 'aw-layout-menu__submenu--hidden': !hasSubmenu }"
+            :name="toggleAsideName"
+            @toggle="isShownSubmenu = $event"
         >
-            <slot v-if="!hideAside" name="submenu">
+            <slot name="submenu">
                 <AwNav :title="submenuTitle" :items="submenu" />
             </slot>
-        </div>
+        </Component>
     </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { pathOr, viewOr, lensProp, omit } from 'rambdax'
+import { conf } from '@AwUtils/component'
+import { AwLayoutMenu as _config } from '@AwConfig'
 import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
 import AwUserMenu from '@AwLayouts/_AwUserMenu.vue'
-import AwNav from '@AwLayouts/_AwNav.vue'
 
 export default {
     name: 'AwLayoutMenu',
 
+    _config,
+
     components: {
         AwMenuItemIcon,
         AwLayoutLogo: () => import('@AwLayouts/_AwLayoutLogo.vue'),
+        AwToggleShowAside: () => import('@AwOrganisms/AwToggleShowAside.vue'),
         AwUserMenu,
-        AwNav
+        AwNav: () => import('@AwLayouts/_AwNav.vue')
     },
 
     props: {
-        hideAside: Boolean
+        hideAside: {
+            type: Boolean,
+            default() {
+                return conf(this, 'hideAside')
+            }
+        },
+
+        submenuToggler: {
+            type: Boolean,
+            default() {
+                return conf(this, 'submenuToggler')
+            }
+        },
+
+        toggleAsideName: {
+            type: String,
+            default() {
+                return conf(this, 'toggleAsideName')
+            }
+        }
     },
 
     inject: {
@@ -114,6 +143,18 @@ export default {
         }
     },
 
+    data: () => ({
+        isShownSubmenu: true
+    }),
+
+    beforeMount() {
+        const toggleAsideState = localStorage.getItem(this.toggleAsideName)
+
+        this.isShownSubmenu = toggleAsideState
+            ? toggleAsideState.toLowerCase() === 'true'
+            : true
+    },
+
     computed: {
         ...mapGetters('awesIo', ['user', 'logoComponent']),
 

package/components/5_layouts/_AwNav.vue

@@ -2,79 +2,85 @@
     <nav class="aw-nav" @click="toggleChildren">
         <h3 v-if="title" class="aw-nav__title">{{ title }}</h3>
 
-        <template v-for="(item, i) in items">
-            <span v-show="!item.abstract" :key="i" class="aw-nav__item">
-                <AwNavItem
-                    :href="item.href"
-                    :class="{
-                        'aw-nav__child--sub':
-                            !item.children || !item.children.length,
-                        'aw-nav__child--active': item === activeMenuItem
-                    }"
-                    class="aw-nav__child"
-                    :[_getItemToggleAttr(item)]="
-                        item.children && item.children.length && !item.expanded
-                            ? i
-                            : null
-                    "
-                >
-                    <AwIcon v-if="item.icon" size="16" :name="item.icon" />
-                    <span
-                        v-tooltip="tooltips[i]"
-                        :[$options.TOOLTIP_EL_ATTR]="i"
+        <div class="aw-nav__wrapper">
+            <template v-for="(item, i) in items">
+                <span v-show="!item.abstract" :key="i" class="aw-nav__item">
+                    <AwNavItem
+                        :href="item.href"
+                        :class="{
+                            'aw-nav__child--sub':
+                                !item.children || !item.children.length,
+                            'aw-nav__child--active': item === activeMenuItem
+                        }"
+                        class="aw-nav__child"
+                        :[_getItemToggleAttr(item)]="
+                            item.children &&
+                            item.children.length &&
+                            !item.expanded
+                                ? i
+                                : null
+                        "
                     >
-                        {{ item.text }}
-                    </span>
-                    <AwBadge
-                        v-if="item.badge"
-                        v-bind="item.badge"
-                        class="flex-shrink-0"
-                    />
-                </AwNavItem>
-
-                <button
-                    v-if="
-                        item.children && item.children.length && !item.expanded
-                    "
-                    class="aw-nav__toggler"
-                    :class="{ 'aw-nav__toggler--open': openedChildren[i] }"
-                    :[$options.TOGGLE_CHILDREN_ATTR]="i"
-                >
-                    <AwIconSystemMono name="angle" size="16" />
-                </button>
-            </span>
-            <!-- { children, href, icon, expanded, ...child } -->
-            <!-- subnav -->
-            <Component
-                :is="item.expanded ? 'div' : 'AwAccordionFold'"
-                v-if="item.children && item.children.length"
-                :key="'children-' + i"
-                :show="openedChildren[i]"
-            >
-                <AwNavItem
-                    v-for="(subchild, j) in item.children"
-                    v-show="!item.abstract"
-                    :key="j"
-                    :href="subchild.href"
-                    :class="{
-                        'aw-nav__child--active': subchild === activeMenuItem
-                    }"
-                    class="aw-nav__child truncate aw-nav__child--sub"
+                        <AwIcon v-if="item.icon" size="16" :name="item.icon" />
+                        <span
+                            v-tooltip="tooltips[i]"
+                            :[$options.TOOLTIP_EL_ATTR]="i"
+                        >
+                            {{ item.text }}
+                        </span>
+                        <AwBadge
+                            v-if="item.badge"
+                            v-bind="item.badge"
+                            class="flex-shrink-0"
+                        />
+                    </AwNavItem>
+
+                    <button
+                        v-if="
+                            item.children &&
+                                item.children.length &&
+                                !item.expanded
+                        "
+                        class="aw-nav__toggler"
+                        :class="{ 'aw-nav__toggler--open': openedChildren[i] }"
+                        :[$options.TOGGLE_CHILDREN_ATTR]="i"
+                    >
+                        <AwIconSystemMono name="angle" size="16" />
+                    </button>
+                </span>
+                <!-- { children, href, icon, expanded, ...child } -->
+                <!-- subnav -->
+                <Component
+                    :is="item.expanded ? 'div' : 'AwAccordionFold'"
+                    v-if="item.children && item.children.length"
+                    :key="'children-' + i"
+                    :show="openedChildren[i]"
                 >
-                    <span
-                        v-tooltip="tooltips[i + '-' + j]"
-                        :[$options.TOOLTIP_EL_ATTR]="i + '-' + j"
+                    <AwNavItem
+                        v-for="(subchild, j) in item.children"
+                        v-show="!item.abstract"
+                        :key="j"
+                        :href="subchild.href"
+                        :class="{
+                            'aw-nav__child--active': subchild === activeMenuItem
+                        }"
+                        class="aw-nav__child truncate aw-nav__child--sub"
                     >
-                        {{ subchild.text }}
-                    </span>
-                    <AwBadge
-                        v-if="subchild.badge"
-                        v-bind="subchild.badge"
-                        class="flex-shrink-0"
-                    />
-                </AwNavItem>
-            </Component>
-        </template>
+                        <span
+                            v-tooltip="tooltips[i + '-' + j]"
+                            :[$options.TOOLTIP_EL_ATTR]="i + '-' + j"
+                        >
+                            {{ subchild.text }}
+                        </span>
+                        <AwBadge
+                            v-if="subchild.badge"
+                            v-bind="subchild.badge"
+                            class="flex-shrink-0"
+                        />
+                    </AwNavItem>
+                </Component>
+            </template>
+        </div>
     </nav>
 </template>
 

package/components/_config.js

@@ -243,6 +243,23 @@ export const AwTel = {
     filterCountries: []
 }
 
+export const AwToggleShowAside = {
+    isAttachedKeyListener: true,
+
+    options: {
+        showTimeout: 50,
+        hideTimeout: 250
+    }
+}
+
+export const AwLayoutMenu = {
+    hideAside: false,
+
+    submenuToggler: true,
+
+    toggleAsideName: 'aw-layout-menu-submenu'
+}
+
 export default {
     AwAvatar,
     AwButton,
@@ -261,5 +278,7 @@ export default {
     AwModal,
     AwTable,
     AwTags,
-    AwTel
+    AwTel,
+    AwToggleShowAside,
+    AwLayoutMenu
 }

package/directives/tooltip.js

@@ -1,4 +1,5 @@
 import { createPopper } from '@popperjs/core'
+import { toggleEvents } from '@AwUtils/events'
 import { isType, pathOr, omit, F, clone, equals } from 'rambdax'
 import { sanitize } from '../assets/js/string'
 
@@ -16,12 +17,6 @@ function showTooltip() {
             name: 'arrow',
             options: { padding: 6 }
         },
-        {
-            name: 'flip',
-            options: {
-                fallbackPlacements: ['top', 'right', 'bottom', 'left']
-            }
-        },
         {
             name: 'preventOverflow',
             options: {
@@ -30,6 +25,18 @@ function showTooltip() {
         }
     ]
 
+    const flip = pathOr(true, 'flip', options)
+
+    modifiers.push({
+        name: 'flip',
+        enabled: flip,
+        options: {
+            fallbackPlacements: isType('Array', flip)
+                ? flip
+                : ['top', 'right', 'bottom', 'left']
+        }
+    })
+
     const offset = pathOr([0, 6], 'offset', options)
 
     if (offset) {
@@ -51,32 +58,20 @@ function hideTooltip() {
     const tooltip = this.__tooltip__
     const popper = POPPERS.get(tooltip)
 
-    popper.destroy()
+    if (popper) {
+        popper.destroy()
+    }
 
     tooltip.removeAttribute('data-visible')
 }
 
 const EVENTS = [
-    {
-        names: ['pointerenter', 'focus'],
-        handler: showTooltip
-    },
-    {
-        names: ['pointerleave', 'blur'],
-        handler: hideTooltip
-    }
+    ['pointerenter', showTooltip],
+    ['focus', showTooltip],
+    ['pointerleave', hideTooltip],
+    ['blur', hideTooltip]
 ]
 
-function toggleEvents(el, on = false, $events = EVENTS) {
-    const useMethod = on ? 'addEventListener' : 'removeEventListener'
-
-    $events.forEach(({ names, handler }) => {
-        names.forEach((name) => {
-            el[useMethod](name, handler)
-        })
-    })
-}
-
 function _updateTooltipContent(tooltip, content) {
     tooltip.__content__ = content
 
@@ -146,7 +141,7 @@ function unbind(el) {
         }
 
         // remove listeners
-        toggleEvents(el, false)
+        toggleEvents(el, EVENTS, false)
 
         // remove tooltip
         if (tooltip.parentElement) {
@@ -169,8 +164,10 @@ function bind(el, { value, arg = 'top', modifiers }) {
     if (content) {
         const options = _getOptions(value)
 
+        const placement = pathOr(arg, 'placement', options)
+
         // create new tooltip
-        el.__tooltip__ = createTooltip(content, options, arg)
+        el.__tooltip__ = createTooltip(content, options, placement)
 
         if (modifiers.prepend) {
             // insert before parent asynchronously
@@ -193,7 +190,7 @@ function bind(el, { value, arg = 'top', modifiers }) {
             showTooltip.call(el)
         } else {
             // add listeners
-            toggleEvents(el, true)
+            toggleEvents(el, EVENTS, true)
         }
     }
 }
@@ -220,7 +217,12 @@ function update(el, { value, arg = 'top', modifiers }) {
         arg !== el.__tooltip__.__placement__ ||
         !equals(options, el.__tooltip__.__options__)
     ) {
-        updateTooltip(el.__tooltip__, content, options, arg)
+        updateTooltip(
+            el.__tooltip__,
+            content,
+            options,
+            pathOr(arg, 'placement', options)
+        )
         return
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.98.1",
+    "version": "2.99.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -114,5 +114,5 @@
         "rollup-plugin-visualizer": "^2.6.0",
         "rollup-plugin-vue": "^5.0.1"
     },
-    "gitHead": "9a47c7642a60d7edd8c8ccf9051b4a2f4ab1d070"
+    "gitHead": "1b79780032eecf84dc91941f9d11fbebcd1f97ae"
 }