uikit 3.16.4 → 3.16.5-dev.2fd0fea3e

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.16.4",
+  "version": "3.16.5-dev.2fd0fea3e",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/component.js

@@ -35,11 +35,11 @@ export function component(name, options) {
     return (components[id] = opt);
 }
 
-export function createComponent(name, element, data) {
+export function createComponent(name, element, data, ...args) {
     const Component = component(name);
 
     return Component.options.functional
-        ? new Component({ data: isPlainObject(element) ? element : [...arguments] })
+        ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
         : element
         ? $$(element).map(init)[0]
         : init();

package/src/js/api/hooks.js

@@ -5,7 +5,7 @@ import { initProps, initPropsObserver } from './props';
 import { disconnectObservers, initObservers } from './observer';
 
 export function callHook(instance, hook) {
-    DEBUG && log(instance, hook);
+    LOG && log(instance, hook);
     instance.$options[hook]?.forEach((handler) => handler.call(instance));
 }
 

package/src/js/api/observables.js

@@ -1,12 +1,21 @@
 import {
     $$,
+    getEventPos,
     isFunction,
+    isTouch,
+    noop,
     observeIntersection,
     observeMutation,
     observeResize,
     on,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
     removeAttr,
     toNodes,
+    trigger,
 } from '../util';
 
 export function resize(options) {
@@ -44,13 +53,11 @@ export function lazyload(options = {}) {
 export function scroll(options) {
     return observe(
         function (target, handler) {
-            const off = on(target, 'scroll', handler, {
-                passive: true,
-                capture: true,
-            });
-
             return {
-                disconnect: off,
+                disconnect: on(target, 'scroll', handler, {
+                    passive: true,
+                    capture: true,
+                }),
             };
         },
         {
@@ -61,6 +68,42 @@ export function scroll(options) {
     );
 }
 
+export function swipe(options) {
+    return {
+        observe(target, handler) {
+            return {
+                observe: noop,
+                unobserve: noop,
+                disconnect: on(target, pointerDown, handler, { passive: true }),
+            };
+        },
+        handler(e) {
+            if (!isTouch(e)) {
+                return;
+            }
+
+            // Handle Swipe Gesture
+            const pos = getEventPos(e);
+            const target = 'tagName' in e.target ? e.target : parent(e.target);
+            once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
+                const { x, y } = getEventPos(e);
+
+                // swipe
+                if (
+                    (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
+                    (y && Math.abs(pos.y - y) > 100)
+                ) {
+                    setTimeout(() => {
+                        trigger(target, 'swipe');
+                        trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
+                    });
+                }
+            });
+        },
+        ...options,
+    };
+}
+
 function observe(observe, options, emit) {
     return {
         observe,
@@ -70,3 +113,13 @@ function observe(observe, options, emit) {
         ...options,
     };
 }
+
+function swipeDirection(x1, y1, x2, y2) {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
+        ? x1 - x2 > 0
+            ? 'Left'
+            : 'Right'
+        : y1 - y2 > 0
+        ? 'Up'
+        : 'Down';
+}

package/src/js/core/offcanvas.js

@@ -1,5 +1,5 @@
 import Modal from '../mixin/modal';
-import Swipe from '../mixin/swipe';
+import { swipe } from '../api/observables';
 import {
     $,
     addClass,
@@ -16,7 +16,7 @@ import {
 } from 'uikit-util';
 
 export default {
-    mixins: [Modal, Swipe],
+    mixins: [Modal],
 
     args: 'mode',
 
@@ -24,6 +24,7 @@ export default {
         mode: String,
         flip: Boolean,
         overlay: Boolean,
+        swiping: Boolean,
     },
 
     data: {
@@ -40,6 +41,7 @@ export default {
         clsOverlay: 'uk-offcanvas-overlay',
         selClose: '.uk-offcanvas-close',
         container: false,
+        swiping: true,
     },
 
     computed: {
@@ -68,6 +70,8 @@ export default {
         },
     },
 
+    observe: swipe({ filter: ({ swiping }) => swiping }),
+
     update: {
         read() {
             if (this.isToggled() && !isVisible(this.$el)) {

package/src/js/core/switcher.js

@@ -1,8 +1,7 @@
-import Swipe from '../mixin/swipe';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 import { generateId } from '../api/instance';
-import { lazyload } from '../api/observables';
+import { lazyload, swipe } from '../api/observables';
 import {
     $$,
     attr,
@@ -26,7 +25,7 @@ import {
 const selDisabled = '.uk-disabled *, .uk-disabled, [disabled]';
 
 export default {
-    mixins: [Swipe, Togglable],
+    mixins: [Togglable],
 
     args: 'connect',
 
@@ -36,6 +35,7 @@ export default {
         itemNav: String,
         active: Number,
         followFocus: Boolean,
+        swiping: Boolean,
     },
 
     data: {
@@ -47,6 +47,7 @@ export default {
         attrItem: 'uk-switcher-item',
         selVertical: '.uk-nav',
         followFocus: false,
+        swiping: true,
     },
 
     computed: {
@@ -101,17 +102,16 @@ export default {
                 this.toggles.some((toggle) => within(toggle, child))
             );
         },
-
-        swipeTarget() {
-            return this.connects;
-        },
     },
 
     connected() {
         attr(this.$el, 'role', 'tablist');
     },
 
-    observe: lazyload({ targets: ({ connectChildren }) => connectChildren }),
+    observe: [
+        lazyload({ targets: ({ connectChildren }) => connectChildren }),
+        swipe({ target: ({ connects }) => connects, filter: ({ swiping }) => swiping }),
+    ],
 
     events: [
         {

package/src/js/mixin/slider-autoplay.js

@@ -53,7 +53,11 @@ export default {
                 return this.autoplay;
             },
 
-            handler: 'stopAutoplay',
+            handler(e) {
+                if (e.type !== pointerEnter || this.pauseOnHover) {
+                    this.stopAutoplay();
+                }
+            },
         },
         {
             name: `${pointerLeave} focusout`,
@@ -62,7 +66,11 @@ export default {
                 return this.autoplay;
             },
 
-            handler: 'startAutoplay',
+            handler(e) {
+                if (e.type !== pointerLeave || this.pauseOnHover) {
+                    this.startAutoplay();
+                }
+            },
         },
     ],
 

package/src/js/mixin/swipe.js

@@ -1,74 +0,0 @@
-import {
-    getEventPos,
-    isTouch,
-    once,
-    parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
-    trigger,
-} from 'uikit-util';
-
-// TODO
-import { registerEvent } from '../api/events';
-
-export default {
-    props: {
-        swiping: Boolean,
-    },
-
-    data: {
-        swiping: true,
-    },
-
-    computed: {
-        swipeTarget(props, $el) {
-            return $el;
-        },
-    },
-
-    connected() {
-        if (!this.swiping) {
-            return;
-        }
-
-        registerEvent(this, {
-            el: this.swipeTarget,
-            name: pointerDown,
-            passive: true,
-            handler(e) {
-                if (!isTouch(e)) {
-                    return;
-                }
-
-                // Handle Swipe Gesture
-                const pos = getEventPos(e);
-                const target = 'tagName' in e.target ? e.target : parent(e.target);
-                once(document, `${pointerUp} ${pointerCancel} scroll`, (e) => {
-                    const { x, y } = getEventPos(e);
-
-                    // swipe
-                    if (
-                        (e.type !== 'scroll' && target && x && Math.abs(pos.x - x) > 100) ||
-                        (y && Math.abs(pos.y - y) > 100)
-                    ) {
-                        setTimeout(() => {
-                            trigger(target, 'swipe');
-                            trigger(target, `swipe${swipeDirection(pos.x, pos.y, x, y)}`);
-                        });
-                    }
-                });
-            },
-        });
-    },
-};
-
-function swipeDirection(x1, y1, x2, y2) {
-    return Math.abs(x1 - x2) >= Math.abs(y1 - y2)
-        ? x1 - x2 > 0
-            ? 'Left'
-            : 'Right'
-        : y1 - y2 > 0
-        ? 'Up'
-        : 'Down';
-}