uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/js/core/offcanvas.js

@@ -1,16 +1,29 @@
 import Modal from '../mixin/modal';
-import {$, addClass, append, css, endsWith, hasClass, height, isVisible, parent, removeClass, unwrap, wrapAll} from 'uikit-util';
+import Swipe from '../mixin/swipe';
+import {
+    $,
+    addClass,
+    append,
+    css,
+    endsWith,
+    hasClass,
+    height,
+    isVisible,
+    parent,
+    removeClass,
+    unwrap,
+    wrapAll,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [Modal],
+    mixins: [Modal, Swipe],
 
     args: 'mode',
 
     props: {
         mode: String,
         flip: Boolean,
-        overlay: Boolean
+        overlay: Boolean,
     },
 
     data: {
@@ -26,65 +39,58 @@ export default {
         clsMode: 'uk-offcanvas',
         clsOverlay: 'uk-offcanvas-overlay',
         selClose: '.uk-offcanvas-close',
-        container: false
+        container: false,
     },
 
     computed: {
-
-        clsFlip({flip, clsFlip}) {
+        clsFlip({ flip, clsFlip }) {
             return flip ? clsFlip : '';
         },
 
-        clsOverlay({overlay, clsOverlay}) {
+        clsOverlay({ overlay, clsOverlay }) {
             return overlay ? clsOverlay : '';
         },
 
-        clsMode({mode, clsMode}) {
+        clsMode({ mode, clsMode }) {
             return `${clsMode}-${mode}`;
         },
 
-        clsSidebarAnimation({mode, clsSidebarAnimation}) {
+        clsSidebarAnimation({ mode, clsSidebarAnimation }) {
             return mode === 'none' || mode === 'reveal' ? '' : clsSidebarAnimation;
         },
 
-        clsContainerAnimation({mode, clsContainerAnimation}) {
+        clsContainerAnimation({ mode, clsContainerAnimation }) {
             return mode !== 'push' && mode !== 'reveal' ? '' : clsContainerAnimation;
         },
 
-        transitionElement({mode}) {
+        transitionElement({ mode }) {
             return mode === 'reveal' ? parent(this.panel) : this.panel;
-        }
-
+        },
     },
 
     update: {
-
         read() {
             if (this.isToggled() && !isVisible(this.$el)) {
                 this.hide();
             }
         },
 
-        events: ['resize']
-
+        events: ['resize'],
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
                 return 'a[href^="#"]';
             },
 
-            handler({current: {hash}, defaultPrevented}) {
+            handler({ current: { hash }, defaultPrevented }) {
                 if (!defaultPrevented && hash && $(hash, document.body)) {
                     this.hide();
                 }
-            }
-
+            },
         },
 
         {
@@ -96,14 +102,11 @@ export default {
                 return this.panel;
             },
 
-            handler({targetTouches}) {
-
+            handler({ targetTouches }) {
                 if (targetTouches.length === 1) {
                     this.clientY = targetTouches[0].clientY;
                 }
-
-            }
-
+            },
         },
 
         {
@@ -118,8 +121,7 @@ export default {
 
             handler(e) {
                 e.cancelable && e.preventDefault();
-            }
-
+            },
         },
 
         {
@@ -132,23 +134,21 @@ export default {
             },
 
             handler(e) {
-
                 if (e.targetTouches.length !== 1) {
                     return;
                 }
 
                 const clientY = e.targetTouches[0].clientY - this.clientY;
-                const {scrollTop, scrollHeight, clientHeight} = this.panel;
+                const { scrollTop, scrollHeight, clientHeight } = this.panel;
 
-                if (clientHeight >= scrollHeight
-                    || scrollTop === 0 && clientY > 0
-                    || scrollHeight - scrollTop <= clientHeight && clientY < 0
+                if (
+                    clientHeight >= scrollHeight ||
+                    (scrollTop === 0 && clientY > 0) ||
+                    (scrollHeight - scrollTop <= clientHeight && clientY < 0)
                 ) {
                     e.cancelable && e.preventDefault();
                 }
-
-            }
-
+            },
         },
 
         {
@@ -157,7 +157,6 @@ export default {
             self: true,
 
             handler() {
-
                 if (this.mode === 'reveal' && !hasClass(parent(this.panel), this.clsMode)) {
                     wrapAll(this.panel, '<div>');
                     addClass(parent(this.panel), this.clsMode);
@@ -168,15 +167,17 @@ export default {
                 css(document.body, 'touch-action', 'pan-y pinch-zoom');
                 css(this.$el, 'display', 'block');
                 addClass(this.$el, this.clsOverlay);
-                addClass(this.panel, this.clsSidebarAnimation, this.mode !== 'reveal' ? this.clsMode : '');
+                addClass(
+                    this.panel,
+                    this.clsSidebarAnimation,
+                    this.mode !== 'reveal' ? this.clsMode : ''
+                );
 
                 height(document.body); // force reflow
                 addClass(document.body, this.clsContainerAnimation);
 
                 this.clsContainerAnimation && suppressUserScale();
-
-
-            }
+            },
         },
 
         {
@@ -187,7 +188,7 @@ export default {
             handler() {
                 removeClass(document.body, this.clsContainerAnimation);
                 css(document.body, 'touch-action', '');
-            }
+            },
         },
 
         {
@@ -196,7 +197,6 @@ export default {
             self: true,
 
             handler() {
-
                 this.clsContainerAnimation && resumeUserScale();
 
                 if (this.mode === 'reveal') {
@@ -209,24 +209,19 @@ export default {
                 removeClass(document.body, this.clsContainer, this.clsFlip);
 
                 css(document.documentElement, 'overflowY', '');
-
-            }
+            },
         },
 
         {
             name: 'swipeLeft swipeRight',
 
             handler(e) {
-
                 if (this.isToggled() && endsWith(e.type, 'Left') ^ this.flip) {
                     this.hide();
                 }
-
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };
 
 // Chrome in responsive mode zooms page upon opening offcanvas
@@ -240,5 +235,7 @@ function resumeUserScale() {
 }
 
 function getViewport() {
-    return $('meta[name="viewport"]', document.head) || append(document.head, '<meta name="viewport">');
+    return (
+        $('meta[name="viewport"]', document.head) || append(document.head, '<meta name="viewport">')
+    );
 }

package/src/js/core/overflow-auto.js

@@ -1,32 +1,29 @@
 import Class from '../mixin/class';
-import {closest, css, dimensions, height, isVisible, toFloat, trigger} from 'uikit-util';
+import { closest, css, dimensions, height, isVisible, toFloat, trigger } from 'uikit-util';
 
 export default {
-
     mixins: [Class],
 
     props: {
         selContainer: String,
         selContent: String,
-        minHeight: Number
+        minHeight: Number,
     },
 
     data: {
         selContainer: '.uk-modal',
         selContent: '.uk-modal-dialog',
-        minHeight: 150
+        minHeight: 150,
     },
 
     computed: {
-
-        container({selContainer}, $el) {
+        container({ selContainer }, $el) {
             return closest($el, selContainer);
         },
 
-        content({selContent}, $el) {
+        content({ selContent }, $el) {
             return closest($el, selContent);
-        }
-
+        },
     },
 
     connected() {
@@ -34,28 +31,27 @@ export default {
     },
 
     update: {
-
         read() {
-
             if (!this.content || !this.container || !isVisible(this.$el)) {
                 return false;
             }
 
             return {
                 current: toFloat(css(this.$el, 'maxHeight')),
-                max: Math.max(this.minHeight, height(this.container) - (dimensions(this.content).height - height(this.$el)))
+                max: Math.max(
+                    this.minHeight,
+                    height(this.container) - (dimensions(this.content).height - height(this.$el))
+                ),
             };
         },
 
-        write({current, max}) {
+        write({ current, max }) {
             css(this.$el, 'maxHeight', max);
             if (Math.round(current) !== Math.round(max)) {
                 trigger(this.$el, 'resize');
             }
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/core/responsive.js

@@ -1,7 +1,6 @@
-import {addClass, Dimensions, height, isVisible, parent, width} from 'uikit-util';
+import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
-
     props: ['width', 'height'],
 
     connected() {
@@ -9,22 +8,25 @@ export default {
     },
 
     update: {
-
         read() {
             return isVisible(this.$el) && this.width && this.height
-                ? {width: width(parent(this.$el)), height: this.height}
+                ? { width: width(parent(this.$el)), height: this.height }
                 : false;
         },
 
         write(dim) {
-            height(this.$el, Dimensions.contain({
-                height: this.height,
-                width: this.width
-            }, dim).height);
+            height(
+                this.$el,
+                Dimensions.contain(
+                    {
+                        height: this.height,
+                        width: this.width,
+                    },
+                    dim
+                ).height
+            );
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/core/scroll.js

@@ -1,43 +1,33 @@
-import {$, escape, scrollIntoView, trigger} from 'uikit-util';
+import { $, escape, scrollIntoView, trigger } from 'uikit-util';
 
 export default {
-
     props: {
-        offset: Number
+        offset: Number,
     },
 
     data: {
-        offset: 0
+        offset: 0,
     },
 
     methods: {
-
-        scrollTo(el) {
-
-            el = el && $(el) || document.body;
+        async scrollTo(el) {
+            el = (el && $(el)) || document.body;
 
             if (trigger(this.$el, 'beforescroll', [this, el])) {
-                scrollIntoView(el, {offset: this.offset}).then(() =>
-                    trigger(this.$el, 'scrolled', [this, el])
-                );
+                await scrollIntoView(el, { offset: this.offset });
+                trigger(this.$el, 'scrolled', [this, el]);
             }
-
-        }
-
+        },
     },
 
     events: {
-
         click(e) {
-
             if (e.defaultPrevented) {
                 return;
             }
 
             e.preventDefault();
             this.scrollTo(`#${escape(decodeURIComponent((this.$el.hash || '').substr(1)))}`);
-        }
-
-    }
-
+        },
+    },
 };

package/src/js/core/scrollspy-nav.js

@@ -1,13 +1,25 @@
-import {$$, addClass, closest, escape, getViewport, getViewportClientHeight, hasClass, isVisible, offset, removeClass, scrollParents, trigger} from 'uikit-util';
+import {
+    $$,
+    addClass,
+    closest,
+    escape,
+    getViewport,
+    getViewportClientHeight,
+    hasClass,
+    isVisible,
+    offset,
+    removeClass,
+    scrollParents,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     props: {
         cls: String,
         closest: String,
         scroll: Boolean,
         overflow: Boolean,
-        offset: Number
+        offset: Number,
     },
 
     data: {
@@ -15,60 +27,55 @@ export default {
         closest: false,
         scroll: false,
         overflow: true,
-        offset: 0
+        offset: 0,
     },
 
     computed: {
-
         links: {
-
             get(_, $el) {
-                return $$('a[href^="#"]', $el).filter(el => el.hash);
+                return $$('a[href^="#"]', $el).filter((el) => el.hash);
             },
 
             watch(links) {
                 if (this.scroll) {
-                    this.$create('scroll', links, {offset: this.offset || 0});
+                    this.$create('scroll', links, { offset: this.offset || 0 });
                 }
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         targets() {
-            return $$(this.links.map(el => escape(el.hash).substr(1)).join(','));
+            return $$(this.links.map((el) => escape(el.hash).substr(1)).join(','));
         },
 
-        elements({closest: selector}) {
+        elements({ closest: selector }) {
             return closest(this.links, selector || '*');
-        }
-
+        },
     },
 
     update: [
-
         {
-
             read() {
-
-                const {length} = this.targets;
+                const { length } = this.targets;
 
                 if (!length || !isVisible(this.$el)) {
                     return false;
                 }
 
                 const [scrollElement] = scrollParents(this.targets, /auto|scroll/, true);
-                const {scrollTop, scrollHeight} = scrollElement;
+                const { scrollTop, scrollHeight } = scrollElement;
                 const max = scrollHeight - getViewportClientHeight(scrollElement);
                 let active = false;
 
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
-
                     this.targets.every((el, i) => {
-                        if (offset(el).top - offset(getViewport(scrollElement)).top - this.offset <= 0) {
+                        if (
+                            offset(el).top - offset(getViewport(scrollElement)).top - this.offset <=
+                            0
+                        ) {
                             active = i;
                             return true;
                         }
@@ -79,14 +86,13 @@ export default {
                     }
                 }
 
-                return {active};
+                return { active };
             },
 
-            write({active}) {
-
+            write({ active }) {
                 const changed = active !== false && !hasClass(this.elements[active], this.cls);
 
-                this.links.forEach(el => el.blur());
+                this.links.forEach((el) => el.blur());
                 removeClass(this.elements, this.cls);
                 addClass(this.elements[active], this.cls);
 
@@ -95,10 +101,7 @@ export default {
                 }
             },
 
-            events: ['scroll', 'resize']
-
-        }
-
-    ]
-
+            events: ['scroll', 'resize'],
+        },
+    ],
 };