@awes-io/ui 2.51.0 → 2.53.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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/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/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.51.0",
+    "version": "2.53.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -122,5 +122,5 @@
         "vue-template-compiler": "^2.6.10",
         "webfonts-generator": "^0.4.0"
     },
-    "gitHead": "2738638c43e3acbcf57f91b44821b60cc470762b"
+    "gitHead": "bdd10f2d121d75c137381357d3dbc72119b40630"
 }

package/readme.md

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