@awes-io/ui 2.49.1 → 2.53.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.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)
+
+
+### Features
+
+* calendar day slots added ([b9b0897](https://github.com/awes-io/client/commit/b9b0897806fe2f86aa51bc1b472482fab017ce91))
+
+
+
+
+
 ## [2.49.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.49.0...@awes-io/ui@2.49.1) (2022-05-31)
 
 

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/AwCalendar/AwCalendar.vue

@@ -32,7 +32,11 @@
             :day-class="_getDayClass"
             :day-disabled="_isDisabled"
             :show-today="showToday"
-        />
+        >
+            <template v-for="name in _proxiedDaySlots" #[name]="slotData">
+                <slot :name="name" v-bind="slotData"></slot>
+            </template>
+        </AwCalendarDays>
 
         <slot name="footer" />
     </div>

package/components/3_organisms/AwCalendar/AwCalendarView.vue

@@ -11,7 +11,14 @@
             :year="year"
             :day-class="dayClass"
             :day-disabled="dayDisabled"
-        />
+        >
+            <template
+                v-for="name in $options.PROXIED_DAY_SLOTS"
+                #[name]="slotData"
+            >
+                <slot :name="name" v-bind="slotData"></slot>
+            </template>
+        </AwCalendarDays>
     </div>
 </template>
 
@@ -21,7 +28,7 @@ import { AwCalendar as _config } from '@AwConfig'
 import { CONFIG_VAR } from '@AwUtils/component'
 import AwCalendarWeekdays from '@AwOrganisms/AwCalendar/_AwCalendarWeekdays.vue'
 import AwCalendarDays from '@AwOrganisms/AwCalendar/_AwCalendarDays.vue'
-import { getDateFromEvent } from '@AwMixins/calendar'
+import { PROXIED_DAY_SLOTS, getDateFromEvent } from '@AwMixins/calendar'
 
 export default {
     name: '',
@@ -31,6 +38,8 @@ export default {
         AwCalendarDays
     },
 
+    PROXIED_DAY_SLOTS,
+
     props: {
         ...AwCalendarDays.props,
 

package/components/3_organisms/AwCalendar/_AwCalendarDay.vue

@@ -7,7 +7,14 @@
         tabindex="-1"
         class="aw-calendar__day"
     >
-        <span> {{ props.day }} </span>
+        <slot name="day" v-bind="props">
+            <slot v-if="props.isOutside" v-bind="props" name="day-outside">
+                <span> {{ props.day }} </span>
+            </slot>
+            <slot v-else v-bind="props" name="day-inside">
+                <span> {{ props.day }} </span>
+            </slot>
+        </slot>
     </button>
 </template>
 
@@ -24,7 +31,16 @@ export default {
         timestamp: {
             type: Number,
             required: true
-        }
+        },
+
+        month: {
+            type: Number,
+            required: true
+        },
+
+        isOutside: Boolean,
+
+        isToday: Boolean
     }
 }
 </script>

package/components/3_organisms/AwCalendar/_AwCalendarDays.vue

@@ -78,7 +78,7 @@ export default {
         }
     },
 
-    render(h, { props, parent }) {
+    render(h, { props, parent, scopedSlots }) {
         const {
             year,
             month,
@@ -101,24 +101,29 @@ export default {
 
         return dates.map((date) => {
             const timestamp = date.setHours(0, 0, 0, 0)
+            const isOutside = date.getMonth() !== month
+            const isToday = showToday && timestamp === today
 
             return h(AwCalendarDay, {
                 key: timestamp,
                 props: {
                     timestamp,
-                    day: date.getDate()
+                    day: date.getDate(),
+                    month,
+                    isOutside,
+                    isToday
                 },
                 class: [
                     {
-                        'aw-calendar__day_outside': date.getMonth() !== month,
-                        'aw-calendar__day_today':
-                            showToday && timestamp === today
+                        'aw-calendar__day_outside': isOutside,
+                        'aw-calendar__day_today': isToday
                     },
                     dayClass(date)
                 ],
                 attrs: {
                     disabled: dayDisabled(date)
-                }
+                },
+                scopedSlots
             })
         })
     }

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/mixins/calendar.js

@@ -18,6 +18,8 @@ export function getDateFromEvent($event) {
     return new Date(timestamp)
 }
 
+export const PROXIED_DAY_SLOTS = ['day', 'day-outside', 'day-inside']
+
 export default {
     props: {
         /**
@@ -273,6 +275,10 @@ export default {
             } else {
                 return (_dayjs) => _dayjs.format(this.outputFormat)
             }
+        },
+
+        _proxiedDaySlots() {
+            return PROXIED_DAY_SLOTS
         }
     },
 

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.49.1",
+    "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": "88e19d99b3529c4da104ff9517679b6fa795d022"
+    "gitHead": "bdd10f2d121d75c137381357d3dbc72119b40630"
 }

package/readme.md

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