uikit 3.20.9-dev.2cb573699 → 3.20.9-dev.2d9611923

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.20.9-dev.2cb573699",
+  "version": "3.20.9-dev.2d9611923",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/events.js

@@ -24,7 +24,7 @@ export function registerEvent(instance, event, key) {
         : { name: key, handler: event };
     el = isFunction(el) ? el.call(instance, instance) : el || instance.$el;
 
-    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance, instance))) {
+    if (!el || (isArray(el) && !el.length) || (filter && !filter.call(instance))) {
         return;
     }
 

package/src/js/components/filter.js

@@ -72,7 +72,9 @@ export default {
     events: {
         name: 'click keydown',
 
-        delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+        delegate() {
+            return `[${this.attrItem}],[data-${this.attrItem}]`;
+        },
 
         handler(e) {
             if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {

package/src/js/components/lightbox-panel.js

@@ -85,7 +85,9 @@ export default {
 
             self: true,
 
-            delegate: ({ selList }) => `${selList} > *`,
+            delegate() {
+                return `${this.selList} > *`;
+            },
 
             handler(e) {
                 if (!e.defaultPrevented) {

package/src/js/components/lightbox.js

@@ -31,7 +31,9 @@ export default {
     events: {
         name: 'click',
 
-        delegate: ({ toggle }) => `${toggle}:not(.uk-disabled)`,
+        delegate() {
+            return `${this.toggle}:not(.uk-disabled)`;
+        },
 
         handler(e) {
             e.preventDefault();

package/src/js/components/slider-parallax.js

@@ -18,7 +18,9 @@ export default {
 
             self: true,
 
-            el: ({ item }) => item,
+            el() {
+                return this.item;
+            },
 
             handler({ type, detail: { percent, duration, timing, dir } }) {
                 fastdom.read(() => {
@@ -41,7 +43,9 @@ export default {
 
             self: true,
 
-            el: ({ item }) => item,
+            el() {
+                return this.item;
+            },
 
             handler() {
                 Transition.cancel(this.$el);
@@ -53,7 +57,9 @@ export default {
 
             self: true,
 
-            el: ({ item }) => item,
+            el() {
+                return this.item;
+            },
 
             handler({ type, detail: { percent, dir } }) {
                 fastdom.read(() => {

package/src/js/core/accordion.js

@@ -101,7 +101,9 @@ export default {
         {
             name: 'click keydown',
 
-            delegate: ({ targets, $props }) => `${targets} ${$props.toggle}`,
+            delegate() {
+                return `${this.targets} ${this.$props.toggle}`;
+            },
 
             async handler(e) {
                 if (e.type === 'keydown' && e.keyCode !== keyMap.SPACE) {
@@ -121,7 +123,9 @@ export default {
 
             self: true,
 
-            delegate: ({ targets }) => targets,
+            delegate() {
+                return this.targets;
+            },
 
             handler() {
                 this.$emit();

package/src/js/core/alert.js

@@ -21,7 +21,9 @@ export default {
     events: {
         name: 'click',
 
-        delegate: ({ selClose }) => selClose,
+        delegate() {
+            return this.selClose;
+        },
 
         handler(e) {
             e.preventDefault();

package/src/js/core/cover.js

@@ -14,18 +14,20 @@ export default {
         automute: true,
     },
 
-    created() {
-        this.useObjectFit = isTag(this.$el, 'img', 'video');
+    events: {
+        'load loadedmetadata'() {
+            this.$emit('resize');
+        },
     },
 
     observe: resize({
-        target: ({ $el }) => getPositionedParent($el) || parent($el),
-        filter: ({ useObjectFit }) => !useObjectFit,
+        target: ({ $el }) => [getPositionedParent($el) || parent($el)],
+        filter: ({ $el }) => !useObjectFit($el),
     }),
 
     update: {
         read() {
-            if (this.useObjectFit) {
+            if (useObjectFit(this.$el)) {
                 return false;
             }
 
@@ -78,3 +80,7 @@ function getPositionedParent(el) {
         }
     }
 }
+
+function useObjectFit(el) {
+    return isTag(el, 'img', 'video');
+}

package/src/js/core/drop.js

@@ -106,7 +106,7 @@ export default {
     },
 
     beforeConnect() {
-        this.clsDrop = this.$props.clsDrop || this.$options.id;
+        this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
     },
 
     connected() {
@@ -131,7 +131,9 @@ export default {
         {
             name: 'click',
 
-            delegate: () => '.uk-drop-close',
+            delegate() {
+                return '.uk-drop-close';
+            },
 
             handler(e) {
                 e.preventDefault();
@@ -142,7 +144,9 @@ export default {
         {
             name: 'click',
 
-            delegate: () => 'a[href*="#"]',
+            delegate() {
+                return 'a[href*="#"]';
+            },
 
             handler({ defaultPrevented, current }) {
                 const { hash } = current;
@@ -208,7 +212,9 @@ export default {
         {
             name: `${pointerEnter} focusin`,
 
-            filter: ({ mode }) => includes(mode, 'hover'),
+            filter() {
+                return includes(this.mode, 'hover');
+            },
 
             handler(e) {
                 if (!isTouch(e)) {
@@ -220,7 +226,9 @@ export default {
         {
             name: `${pointerLeave} focusout`,
 
-            filter: ({ mode }) => includes(mode, 'hover'),
+            filter() {
+                return includes(this.mode, 'hover');
+            },
 
             handler(e) {
                 if (!isTouch(e) && e.relatedTarget) {

package/src/js/core/dropnav.js

@@ -128,7 +128,9 @@ export default {
         {
             name: 'mouseover focusin',
 
-            delegate: ({ selNavItem }) => selNavItem,
+            delegate() {
+                return this.selNavItem;
+            },
 
             handler({ current }) {
                 const active = this.getActive();
@@ -149,7 +151,9 @@ export default {
 
             self: true,
 
-            delegate: ({ selNavItem }) => selNavItem,
+            delegate() {
+                return this.selNavItem;
+            },
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -167,9 +171,13 @@ export default {
         {
             name: 'keydown',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
-            delegate: ({ clsDrop }) => `.${clsDrop}`,
+            delegate() {
+                return `.${this.clsDrop}`;
+            },
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -212,9 +220,13 @@ export default {
         {
             name: 'mouseleave',
 
-            el: ({ dropbar }) => dropbar,
+            el() {
+                return this.dropbar;
+            },
 
-            filter: ({ dropbar }) => dropbar,
+            filter() {
+                return this.dropbar;
+            },
 
             handler() {
                 const active = this.getActive();
@@ -232,9 +244,13 @@ export default {
         {
             name: 'beforeshow',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
-            filter: ({ dropbar }) => dropbar,
+            filter() {
+                return this.dropbar;
+            },
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {
@@ -252,9 +268,13 @@ export default {
         {
             name: 'show',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
-            filter: ({ dropbar }) => dropbar,
+            filter() {
+                return this.dropbar;
+            },
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {
@@ -286,9 +306,13 @@ export default {
         {
             name: 'beforehide',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
-            filter: ({ dropbar }) => dropbar,
+            filter() {
+                return this.dropbar;
+            },
 
             handler(e) {
                 const active = this.getActive();
@@ -309,9 +333,13 @@ export default {
         {
             name: 'hide',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
-            filter: ({ dropbar }) => dropbar,
+            filter() {
+                return this.dropbar;
+            },
 
             handler({ target }) {
                 if (!this.isDropbarDrop(target)) {

package/src/js/core/form-custom.js

@@ -64,7 +64,9 @@ export default {
         {
             name: 'reset',
 
-            el: ({ $el }) => $el.closest('form'),
+            el() {
+                return this.$el.closest('form');
+            },
 
             handler() {
                 this.$emit();

package/src/js/core/height-match.js

@@ -28,7 +28,9 @@ export default {
         // Hidden elements may change height when fonts load
         name: 'loadingdone',
 
-        el: () => document.fonts,
+        el() {
+            return document.fonts;
+        },
 
         handler() {
             this.$emit('resize');

package/src/js/core/navbar.js

@@ -39,7 +39,9 @@ export default {
         {
             name: 'show',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
             handler({ target }) {
                 if (
@@ -54,7 +56,9 @@ export default {
         {
             name: 'hide',
 
-            el: ({ dropContainer }) => dropContainer,
+            el() {
+                return this.dropContainer;
+            },
 
             async handler() {
                 await awaitMacroTask();

package/src/js/core/offcanvas.js

@@ -81,7 +81,9 @@ export default {
             self: true,
             passive: false,
 
-            filter: ({ overlay }) => overlay,
+            filter() {
+                return this.overlay;
+            },
 
             handler(e) {
                 e.cancelable && e.preventDefault();

package/src/js/core/sticky.js

@@ -115,9 +115,13 @@ export default {
         {
             name: 'load hashchange popstate',
 
-            el: () => window,
+            el() {
+                return window;
+            },
 
-            filter: ({ targetOffset }) => targetOffset !== false,
+            filter() {
+                return this.targetOffset !== false;
+            },
 
             handler() {
                 const { scrollingElement } = document;

package/src/js/core/switcher.js

@@ -104,7 +104,9 @@ export default {
         {
             name: 'click keydown',
 
-            delegate: ({ toggle }) => toggle,
+            delegate() {
+                return this.toggle;
+            },
 
             handler(e) {
                 if (
@@ -120,7 +122,9 @@ export default {
         {
             name: 'keydown',
 
-            delegate: ({ toggle }) => toggle,
+            delegate() {
+                return this.toggle;
+            },
 
             handler(e) {
                 const { current, keyCode } = e;
@@ -154,10 +158,13 @@ export default {
         {
             name: 'click',
 
-            el: ({ $el, connects, itemNav }) =>
-                connects.concat(itemNav ? queryAll(itemNav, $el) : []),
+            el() {
+                return this.connects.concat(this.itemNav ? queryAll(this.itemNav, this.$el) : []);
+            },
 
-            delegate: ({ attrItem }) => `[${attrItem}],[data-${attrItem}]`,
+            delegate() {
+                return `[${this.attrItem}],[data-${this.attrItem}]`;
+            },
 
             handler(e) {
                 if (e.target.closest('a,button')) {
@@ -170,9 +177,13 @@ export default {
         {
             name: 'swipeRight swipeLeft',
 
-            filter: ({ swiping }) => swiping,
+            filter() {
+                return this.swiping;
+            },
 
-            el: ({ connects }) => connects,
+            el() {
+                return this.connects;
+            },
 
             handler({ type }) {
                 this.show(endsWith(type, 'Left') ? 'next' : 'previous');

package/src/js/core/toggle.js

@@ -67,7 +67,9 @@ export default {
         {
             name: pointerDown,
 
-            filter: ({ mode }) => includes(mode, 'hover'),
+            filter() {
+                return includes(this.mode, 'hover');
+            },
 
             handler(e) {
                 this._preventClick = null;
@@ -99,7 +101,9 @@ export default {
             // where pointerleave is triggered immediately after pointerenter on scroll
             name: `mouseenter mouseleave ${pointerEnter} ${pointerLeave} focus blur`,
 
-            filter: ({ mode }) => includes(mode, 'hover'),
+            filter() {
+                return includes(this.mode, 'hover');
+            },
 
             handler(e) {
                 if (isTouch(e) || this.$el.disabled) {
@@ -137,7 +141,9 @@ export default {
         {
             name: 'keydown',
 
-            filter: ({ $el, mode }) => includes(mode, 'click') && !isTag($el, 'input'),
+            filter() {
+                return includes(this.mode, 'click') && !isTag(this.$el, 'input');
+            },
 
             handler(e) {
                 if (e.keyCode === KEY_SPACE) {
@@ -150,7 +156,9 @@ export default {
         {
             name: 'click',
 
-            filter: ({ mode }) => ['click', 'hover'].some((m) => includes(mode, m)),
+            filter() {
+                return ['click', 'hover'].some((mode) => includes(this.mode, mode));
+            },
 
             handler(e) {
                 let link;
@@ -173,9 +181,13 @@ export default {
         {
             name: 'mediachange',
 
-            filter: ({ mode }) => includes(mode, 'media'),
+            filter() {
+                return includes(this.mode, 'media');
+            },
 
-            el: ({ target }) => target,
+            el() {
+                return this.target;
+            },
 
             handler(e, mediaObj) {
                 if (mediaObj.matches ^ this.isToggled(this.target)) {

package/src/js/core/video.js

@@ -51,9 +51,9 @@ export default {
     events: [
         {
             name: `${pointerEnter} focusin`,
-
-            filter: ({ autoplay }) => includes(autoplay, 'hover'),
-
+            filter() {
+                return includes(this.autoplay, 'hover');
+            },
             handler(e) {
                 if (!isTouch(e) || !isPlaying(this.$el)) {
                     play(this.$el);
@@ -65,9 +65,9 @@ export default {
 
         {
             name: `${pointerLeave} focusout`,
-
-            filter: ({ autoplay }) => includes(autoplay, 'hover'),
-
+            filter() {
+                return includes(this.autoplay, 'hover');
+            },
             handler(e) {
                 if (!isTouch(e)) {
                     pause(this.$el);

package/src/js/mixin/modal.js

@@ -77,7 +77,9 @@ export default {
         {
             name: 'click',
 
-            delegate: ({ selClose }) => `${selClose},a[href*="#"]`,
+            delegate() {
+                return `${this.selClose},a[href*="#"]`;
+            },
 
             handler(e) {
                 const { current, defaultPrevented } = e;

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

@@ -32,7 +32,9 @@ export default {
 
             el: () => document,
 
-            filter: ({ autoplay }) => autoplay,
+            filter() {
+                return this.autoplay;
+            },
 
             handler() {
                 if (document.hidden) {

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

@@ -48,7 +48,9 @@ export default {
 
             passive: true,
 
-            delegate: ({ selList }) => `${selList} > *`,
+            delegate() {
+                return `${this.selList} > *`;
+            },
 
             handler(e) {
                 if (
@@ -77,7 +79,9 @@ export default {
         {
             // iOS workaround for slider stopping if swiping fast
             name: pointerMove,
-            el: ({ list }) => list,
+            el() {
+                return this.list;
+            },
             handler: noop,
             ...pointerOptions,
         },

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

@@ -147,9 +147,13 @@ export default {
         {
             name: 'click keydown',
 
-            delegate: ({ selNavItem }) => selNavItem,
+            delegate() {
+                return this.selNavItem;
+            },
 
-            filter: ({ parallax }) => !parallax,
+            filter() {
+                return !this.parallax;
+            },
 
             handler(e) {
                 if (
@@ -170,9 +174,13 @@ export default {
         {
             name: 'keydown',
 
-            delegate: ({ selNavItem }) => selNavItem,
+            delegate() {
+                return this.selNavItem;
+            },
 
-            filter: ({ parallax }) => !parallax,
+            filter() {
+                return !this.parallax;
+            },
 
             handler(e) {
                 const { current, keyCode } = e;