@awes-io/ui 2.50.0 → 2.54.0

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.54.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.53.0...@awes-io/ui@2.54.0) (2022-07-05)
+
+
+### Features
+
+* optional menu items translation and tooltip ([8a24879](https://github.com/awes-io/client/commit/8a24879ee5d0b1ff60165567e2b70201b4cfe518))
+
+
+
+
+
+# [2.53.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.52.0...@awes-io/ui@2.53.0) (2022-06-29)
+
+
+### Features
+
+* new version ([c64a7a1](https://github.com/awes-io/client/commit/c64a7a10bb55e8f5e5196912f8d70bf8350fd831))
+
+
+
+
+
+# [2.52.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.51.0...@awes-io/ui@2.52.0) (2022-06-29)
+
+
+### Bug Fixes
+
+* **aw-table:** falsy clicks fixed ([ff1004b](https://github.com/awes-io/client/commit/ff1004b47ea527bb71a6d99e44df307be3df4223))
+
+
+### Features
+
+* set dropdown max height by viewport ([4ec3589](https://github.com/awes-io/client/commit/4ec3589eb6691fad198ff83a99333724e9ae3900))
+* table press event added ([b8bf19a](https://github.com/awes-io/client/commit/b8bf19a4e1262d9e3a0e7044490081020009e3af))
+
+
+
+
+
+# [2.51.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.50.0...@awes-io/ui@2.51.0) (2022-06-14)
+
+
+### Features
+
+* **aw-bottom-bar:** fixed position to prevent jumps on ios ([c9b32bb](https://github.com/awes-io/client/commit/c9b32bbbb7c109a9f5c3abede7a2aeb7a7c543b9))
+
+
+
+
+
 # [2.50.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.49.1...@awes-io/ui@2.50.0) (2022-06-13)
 
 

package/assets/css/components/bottom-bar.css

@@ -6,9 +6,10 @@
     padding-bottom: env(safe-area-inset-bottom, 0);
     box-shadow: 0px -2px 2px rgba(var(--c-mono-100-rgb, 50, 50, 50), 0.1);
 
-    position: sticky;
+    position: fixed;
     bottom: 0;
     min-height: 4rem;
+    width: 100%;
     z-index: 20;
 
     & > * {

package/assets/css/components/dropdown.css

@@ -18,15 +18,13 @@
         flex-direction: column;
         justify-content: flex-end;
 
+        max-height: var(--viewport-height, 100vh);
+
         position: fixed;
         inset: 0;
         z-index: 200;
 
-        /* &:before {
-            content: '';
-            display: block;
-            flex-basis: 50%;
-        } */
+        transform: translateY(var(--viewport-top, 0));
     }
 
     &__overlay {
@@ -41,12 +39,14 @@
         text-align: center;
         font-weight: bold;
         margin: theme('spacing.4', 1rem) auto 0;
+        position: relative;
     }
 
     &__description {
         text-align: center;
         font-size: theme('fontSize.sm', 0.875rem);
         margin: theme('spacing.1', 0.5rem) auto 0;
+        position: relative;
     }
 
     &__content {

package/assets/css/components/page.css

@@ -75,7 +75,8 @@
     }
 
     &__content {
-        @apply pt-4 pb-20;
+        padding-top: 1rem;
+        padding-bottom: calc(5rem + var(--page-buttons-bottom, 0px));
         flex-grow: 1;
     }
 

package/assets/js/constants.js

@@ -2,6 +2,8 @@ export const TABLE_INDEX_ATTR = 'data-row-index'
 
 export const TABLE_ROW_CLICK_EVENT = 'click:row'
 
+export const TABLE_ROW_PRESS_EVENT = 'press:row'
+
 export const TABLE_HEAD_CLICK_EVENT = 'click:head'
 
 export const TABLE_DATA_FETCHED = 'data-fetched'

package/assets/js/events.js

@@ -85,3 +85,17 @@ export const supportsPassive = () => {
 
     return supports
 }
+
+/**
+ * Detects screen distance of pointer events
+ * @param  {PointerEvent} event1
+ * @param  {PointerEvent} event2
+ * @return {Number}       distance between event positions
+ */
+
+export const pointsDistance = (event1, event2) => {
+    return Math.sqrt(
+        Math.pow(event1.screenX - event2.screenX, 2) +
+            Math.pow(event1.screenY - event2.screenY, 2)
+    )
+}

package/components/1_atoms/AwDropdown.vue

@@ -6,14 +6,21 @@
     >
         <Component
             :is="tag"
+            v-show="visible"
             :class="{
                 'aw-dropdown--desktop': !isMobile,
                 'aw-dropdown--mobile': isMobile
             }"
             class="aw-dropdown"
-            v-show="visible"
             @mouseup="_onClickAction"
         >
+            <!-- overlay -->
+            <div
+                v-if="isMobile"
+                class="aw-dropdown__overlay"
+                @click="close"
+            ></div>
+
             <!-- heading -->
             <slot
                 name="heading"
@@ -32,13 +39,6 @@
                 </p>
             </slot>
 
-            <!-- overlay -->
-            <div
-                v-if="isMobile"
-                class="aw-dropdown__overlay"
-                @click="close"
-            ></div>
-
             <!-- content -->
             <div
                 ref="mobileScroller"
@@ -88,9 +88,15 @@ export default {
             }
         },
 
-        target: String,
+        target: {
+            type: String,
+            default: ''
+        },
 
-        options: Object,
+        options: {
+            type: Object,
+            default: null
+        },
 
         closeOnAction: {
             type: Boolean,
@@ -99,6 +105,8 @@ export default {
 
         show: Boolean,
 
+        attachToBody: Boolean,
+
         closeOutside: {
             type: Boolean,
             default: true
@@ -129,6 +137,7 @@ export default {
         return {
             popper: null,
             targetEl: null,
+            placeholderEl: null,
             visible: false
         }
     },
@@ -231,7 +240,17 @@ export default {
         }
     },
 
+    mounted() {
+        if (this.attachToBody) {
+            this._attachToBody()
+        }
+    },
+
     beforeDestroy() {
+        if (this.attachToBody || this.placeholderEl) {
+            this._detachFromBody()
+        }
+
         this.removeOutsideClick()
         this._destroyPopper()
         enableBodyScroll(this.$refs.mobileScroller)
@@ -241,8 +260,8 @@ export default {
         _getTargetEl() {
             if (this.target) {
                 return document.querySelector(this.target)
-            } else {
-                return this.$el && this.$el.previousElementSibling
+            } else if (this.placeholderEl || this.$el) {
+                return (this.placeholderEl || this.$el).previousElementSibling
             }
         },
 
@@ -285,6 +304,35 @@ export default {
             }
         },
 
+        _attachToBody() {
+            if (
+                this.placeholderEl === null &&
+                this.$el.parentElement &&
+                this.$el.parentElement !== document.body
+            ) {
+                this.placeholderEl = document.createComment(
+                    'dropdown-placeholder-' + this._uid
+                )
+
+                this.$el.parentElement.insertBefore(
+                    this.placeholderEl,
+                    this.$el
+                )
+
+                document.body.appendChild(this.$el)
+            }
+        },
+
+        _detachFromBody() {
+            if (this.placeholderEl) {
+                this.placeholderEl.parentElement.replaceChild(
+                    this.$el,
+                    this.placeholderEl
+                )
+                this.placeholderEl = null
+            }
+        },
+
         update() {
             if (this.popper) this.popper.forceUpdate()
         },

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

@@ -9,7 +9,7 @@
                 </slot>
 
                 <!-- body -->
-                <tbody @click="handleRowClick">
+                <tbody @pointerdown="handleRowClick">
                     <!-- Table row component, recieves `rows` prop -->
                     <slot name="tr" :rows="rows">
                         <AwTableRow
@@ -18,7 +18,7 @@
                             v-bind="{
                                 rowData,
                                 rowIndex,
-                                hasRowClickListener,
+                                hasRowClickListener: hasRowClickListener || hasRowPressListener,
                                 columns,
                                 isDesktop,
                                 mobileHeaderSlots,
@@ -40,10 +40,12 @@
 <script>
 import { keys, path, pathOr, is, isNil, mergeDeepRight } from 'rambdax'
 import { ucFirst, toPascal, toKebap } from '@AwUtils/string'
+import { pointsDistance } from '@AwUtils/events'
 import { conf } from '@AwUtils/component'
 import {
     TABLE_INDEX_ATTR,
     TABLE_ROW_CLICK_EVENT,
+    TABLE_ROW_PRESS_EVENT,
     TABLE_HEAD_CLICK_EVENT
 } from '@AwUtils/constants'
 import AwTableHead from '@AwOrganisms/AwTable/_AwTableHead.vue'
@@ -210,6 +212,10 @@ export default {
             return TABLE_ROW_CLICK_EVENT in this.$listeners
         },
 
+        hasRowPressListener() {
+            return TABLE_ROW_PRESS_EVENT in this.$listeners
+        },
+
         isDesktop() {
             return (
                 this.breakpoint === 'default' ||
@@ -307,14 +313,47 @@ export default {
             if (this.checkIfButtonOrLink(target)) return
 
             // if table has no row click listener exit
-            if (!this.hasRowClickListener) return
+            if (!this.hasRowClickListener && !this.hasRowPressListener) return
+
+            let tm
+            let onEnd
+            let onMove
 
             const row = target.closest(`[${TABLE_INDEX_ATTR}]`)
 
-            if (row) {
-                const index = parseInt(row.getAttribute(TABLE_INDEX_ATTR))
-                const data = this.rows[index]
-                this.$emit(TABLE_ROW_CLICK_EVENT, data, index, $event)
+            const emitEvent = (eventName) => {
+                if (row) {
+                    const index = parseInt(row.getAttribute(TABLE_INDEX_ATTR))
+                    const data = this.rows[index]
+                    this.$emit(eventName, data, index, $event)
+                }
+            }
+
+            onEnd = () => {
+                cleanup()
+                emitEvent(TABLE_ROW_CLICK_EVENT)
+            }
+
+            onMove = ($event2) => {
+                if (pointsDistance($event, $event2) > 5) {
+                    cleanup()
+                }
+            }
+
+            const cleanup = () => {
+                clearTimeout(tm)
+                window.removeEventListener('pointerup', onEnd)
+                window.removeEventListener('pointermove', onMove)
+            }
+
+            window.addEventListener('pointerup', onEnd)
+            window.addEventListener('pointermove', onMove)
+
+            if (this.hasRowPressListener) {
+                tm = setTimeout(() => {
+                    cleanup()
+                    emitEvent(TABLE_ROW_PRESS_EVENT)
+                }, 500)
             }
         },
 

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

@@ -183,6 +183,7 @@ import { pathOr, filter, mergeDeepRight, isType } from 'rambdax'
 import { mergeRouteQuery } from '@AwUtils/router'
 import {
     TABLE_ROW_CLICK_EVENT,
+    TABLE_ROW_PRESS_EVENT,
     TABLE_HEAD_CLICK_EVENT,
     TABLE_DATA_FETCHED
 } from '@AwUtils/constants'
@@ -386,7 +387,10 @@ export default {
 
         tableListeners() {
             return filter((val, key) => {
-                return key === TABLE_ROW_CLICK_EVENT
+                return (
+                    TABLE_ROW_CLICK_EVENT === key ||
+                    TABLE_ROW_PRESS_EVENT === key
+                )
             }, this.$listeners)
         },
 

package/components/4_pages/AwPage.vue

@@ -46,6 +46,9 @@
                 'aw-page__content_fullscreen': isFullscreen || isFakeFullscreen,
                 'aw-page__content_fake-fullscreen': isFakeFullscreen
             }"
+            :style="{
+                '--page-buttons-bottom': _hideBottomBar ? null : '4rem'
+            }"
         >
             <!-- eslint-disable prettier/prettier -->
             <div :class="[containerClass, { 'aw-page__grid': hasAside }]">

package/components/5_layouts/AwLayoutProvider.vue

@@ -175,6 +175,7 @@ export default {
                     {
                         show,
                         text,
+                        translate = true,
                         subtitle,
                         description,
                         href,
@@ -203,7 +204,7 @@ export default {
                     href = isType('Function', href)
                         ? href(state, getters)
                         : href
-                    text = this.$t(text)
+                    text = translate === false ? text : this.$t(text)
                     subtitle = subtitle ? this.$t(subtitle) : undefined
                     description = description ? this.$t(description) : null
 

package/components/5_layouts/_AwNav.vue

@@ -19,7 +19,12 @@
                     "
                 >
                     <AwIcon v-if="item.icon" size="16" :name="item.icon" />
-                    <span>{{ item.text }}</span>
+                    <span
+                        v-tooltip="tooltips[i]"
+                        :[$options.TOOLTIP_EL_ATTR]="i"
+                    >
+                        {{ item.text }}
+                    </span>
                     <AwBadge
                         v-if="item.badge"
                         v-bind="item.badge"
@@ -56,7 +61,12 @@
                     }"
                     class="aw-nav__child truncate aw-nav__child--sub"
                 >
-                    <span>{{ subchild.text }}</span>
+                    <span
+                        v-tooltip="tooltips[i + '-' + j]"
+                        :[$options.TOOLTIP_EL_ATTR]="i + '-' + j"
+                    >
+                        {{ subchild.text }}
+                    </span>
                     <AwBadge
                         v-if="subchild.badge"
                         v-bind="subchild.badge"
@@ -70,12 +80,15 @@
 
 <script>
 import { viewOr, lensProp } from 'rambdax'
+import { supportsPassive } from '@AwUtils/events'
 import AwNavItem from '@AwLayouts/_AwNavItem.vue'
 
 const TOGGLE_CHILDREN_ATTR = 'data-toggle-children'
 
 const OPEN_CHILDREN_ATTR = 'data-open-children'
 
+const TOOLTIP_EL_ATTR = 'data-tooltip-el'
+
 const targetByAttribute = (attr, $event) =>
     $event.target.hasAttribute(attr)
         ? $event.target
@@ -92,6 +105,8 @@ export default {
 
     OPEN_CHILDREN_ATTR,
 
+    TOOLTIP_EL_ATTR,
+
     props: {
         title: {
             type: String,
@@ -112,7 +127,8 @@ export default {
 
     data() {
         return {
-            openedChildren: []
+            openedChildren: [],
+            tooltips: {}
         }
     },
 
@@ -137,11 +153,37 @@ export default {
                         )
                     )
                 })
+
+                if (typeof oldItems !== 'undefined') {
+                    this.$nextTick(this._calculateOversizedText)
+                }
             },
             immediate: true
         }
     },
 
+    mounted() {
+        this.$nextTick(this._calculateOversizedText)
+
+        const eventOptions = supportsPassive() ? { passive: true } : false
+
+        window.addEventListener(
+            'resize',
+            this._calculateOversizedText,
+            eventOptions
+        )
+
+        this.$once('hook:beforeDestroy', () => {
+            this.tooltips = {}
+
+            window.addEventListener(
+                'resize',
+                this._calculateOversizedText,
+                eventOptions
+            )
+        })
+    },
+
     methods: {
         _getItemToggleAttr(item) {
             return item.href ? OPEN_CHILDREN_ATTR : TOGGLE_CHILDREN_ATTR
@@ -175,6 +217,23 @@ export default {
 
                 return
             }
+        },
+
+        _calculateOversizedText() {
+            this.tooltips = {}
+
+            const children = this.$el.querySelectorAll(
+                '[' + TOOLTIP_EL_ATTR + ']'
+            )
+
+            for (let i = 0; i < children.length; i++) {
+                const el = children[i]
+
+                if (el.scrollWidth > el.clientWidth) {
+                    this.tooltips[el.getAttribute(TOOLTIP_EL_ATTR)] =
+                        el.textContent
+                }
+            }
         }
     }
 }

package/nuxt/templates/screen.plugin.js

@@ -37,3 +37,37 @@ export default ({ store }, inject) => {
         })
     }
 }
+
+/* visual viewport CSS */
+if (typeof window !== 'undefined' && 'visualViewport' in window) {
+    let pendingUpdate = false
+
+    const root = document.documentElement
+
+    const viewportHandler = (event) => {
+        if (pendingUpdate) return
+
+        pendingUpdate = true
+
+        requestAnimationFrame(() => {
+            pendingUpdate = false
+
+            var viewport = event.target
+
+            root.style.setProperty('--viewport-width', viewport.width + 'px')
+            root.style.setProperty('--viewport-height', viewport.height + 'px')
+            root.style.setProperty('--viewport-top', viewport.offsetTop + 'px')
+            root.style.setProperty(
+                '--viewport-left',
+                viewport.offsetLeft + 'px'
+            )
+
+            // double check!
+            setTimeout(viewportHandler, 60, { target: window.visualViewport })
+        })
+    }
+
+    window.visualViewport.addEventListener('resize', viewportHandler)
+
+    viewportHandler({ target: window.visualViewport })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.50.0",
+    "version": "2.54.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "4d526ff6da5642c22061bb4538e1d9ed99378747"
+    "gitHead": "fc78eb75d3f2e60b94edaad5977d6772e170ad93"
 }

package/readme.md

@@ -1 +1 @@
-Awes.io/Ui
+Awes.io/Ui 3443