uikit 3.12.3-dev.cbf065cc2 → 3.13.1-dev.4a671f35d

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.12.3-dev.cbf065cc2",
+    "version": "3.13.1-dev.4a671f35d",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/countdown.js

@@ -17,7 +17,7 @@ export default {
     },
 
     connected() {
-        this.date = Date.parse(this.date);
+        this.date = Date.parse(this.$props.date);
         this.start();
     },
 

package/src/js/core/accordion.js

@@ -5,6 +5,7 @@ import {
     $,
     $$,
     attr,
+    fastdom,
     filter,
     getIndex,
     hasClass,
@@ -135,9 +136,11 @@ export default {
 
                     if (show) {
                         const toggle = $(this.$props.toggle, el);
-                        if (!isInView(toggle)) {
-                            scrollIntoView(toggle, { offset: this.offset });
-                        }
+                        fastdom.read(() => {
+                            if (!isInView(toggle)) {
+                                scrollIntoView(toggle, { offset: this.offset });
+                            }
+                        });
                     }
                 });
             }

package/src/js/core/drop.js

@@ -58,25 +58,12 @@ export default {
         container: false,
     },
 
-    computed: {
-        boundary({ boundary }, $el) {
-            return boundary === true ? window : query(boundary, $el);
-        },
-
-        clsDrop({ clsDrop }) {
-            return clsDrop || `uk-${this.$options.name}`;
-        },
-
-        clsPos() {
-            return this.clsDrop;
-        },
-    },
-
     created() {
         this.tracker = new MouseTracker();
     },
 
     connected() {
+        this.clsPos = this.clsDrop = this.$props.clsDrop || `uk-${this.$options.name}`;
         addClass(this.$el, this.clsDrop);
 
         if (this.toggle && !this.target) {
@@ -365,28 +352,28 @@ export default {
         },
 
         position() {
+            const boundary = this.boundary === true ? window : query(this.boundary, this.$el);
             removeClass(this.$el, `${this.clsDrop}-stack`);
             toggleClass(this.$el, `${this.clsDrop}-boundary`, this.boundaryAlign);
 
-            const boundary = offset(this.boundary);
-            const alignTo = this.boundaryAlign ? boundary : offset(this.target);
+            const boundaryOffset = offset(boundary);
+            const alignTo = this.boundaryAlign ? boundaryOffset : offset(this.target);
 
             if (this.align === 'justify') {
                 const prop = this.getAxis() === 'y' ? 'width' : 'height';
                 css(this.$el, prop, alignTo[prop]);
             } else if (
-                this.boundary &&
+                boundary &&
                 this.$el.offsetWidth >
-                    Math.max(boundary.right - alignTo.left, alignTo.right - boundary.left)
+                    Math.max(
+                        boundaryOffset.right - alignTo.left,
+                        alignTo.right - boundaryOffset.left
+                    )
             ) {
                 addClass(this.$el, `${this.clsDrop}-stack`);
             }
 
-            this.positionAt(
-                this.$el,
-                this.boundaryAlign ? this.boundary : this.target,
-                this.boundary
-            );
+            this.positionAt(this.$el, this.boundaryAlign ? boundary : this.target, boundary);
         },
     },
 };

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

@@ -1,5 +1,5 @@
 import Class from '../mixin/class';
-import { $, $$, closest, isInput, matches, parent, query, selInput } from 'uikit-util';
+import { $, $$, closest, isInput, matches, parent, selInput } from 'uikit-util';
 
 export default {
     mixins: [Class],
@@ -27,7 +27,7 @@ export default {
             return (
                 target &&
                 ((target === true && parent(this.input) === $el && this.input.nextElementSibling) ||
-                    query(target, $el))
+                    $(target, $el))
             );
         },
     },

package/src/js/core/grid.js

@@ -95,7 +95,7 @@ export default {
 
         {
             read() {
-                if (positionedAbsolute(this.$el)) {
+                if (this.parallax && positionedAbsolute(this.$el)) {
                     return false;
                 }
 

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

@@ -1,13 +1,5 @@
 import { getRows } from './margin';
-import {
-    $$,
-    boxModelAdjust,
-    css,
-    dimensions,
-    isVisible,
-    observeMutation,
-    toFloat,
-} from 'uikit-util';
+import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
 
 export default {
     args: 'target',
@@ -24,21 +16,19 @@ export default {
     },
 
     computed: {
-        elements({ target }, $el) {
-            return $$(target, $el);
-        },
-
-        resizeTargets() {
-            this.$el.children;
+        elements: {
+            get({ target }, $el) {
+                return $$(target, $el);
+            },
+
+            watch() {
+                this.$reset();
+            },
         },
     },
 
-    connected() {
-        this.registerObserver(
-            observeMutation(this.$el, () => this.$reset(), {
-                childList: true,
-            })
-        );
+    resizeTargets() {
+        return this.elements;
     },
 
     update: {

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

@@ -31,11 +31,9 @@ export default {
         minHeight: 0,
     },
 
-    computed: {
-        resizeTargets() {
-            // check for offsetTop change
-            return [this.$el, document.documentElement];
-        },
+    resizeTargets() {
+        // check for offsetTop change
+        return [this.$el, document.documentElement];
     },
 
     update: {

package/src/js/core/icon.js

@@ -101,36 +101,29 @@ export const Slidenav = {
 
     beforeConnect() {
         addClass(this.$el, 'uk-slidenav');
-    },
-
-    computed: {
-        icon({ icon }, $el) {
-            return hasClass($el, 'uk-slidenav-large') ? `${icon}-large` : icon;
-        },
+        const icon = this.$props.icon;
+        this.icon = hasClass(this.$el, 'uk-slidenav-large') ? `${icon}-large` : icon;
     },
 };
 
 export const Search = {
     extends: IconComponent,
 
-    computed: {
-        icon({ icon }, $el) {
-            return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length
+    beforeConnect() {
+        this.icon =
+            hasClass(this.$el, 'uk-search-icon') && parents(this.$el, '.uk-search-large').length
                 ? 'search-large'
-                : parents($el, '.uk-search-navbar').length
+                : parents(this.$el, '.uk-search-navbar').length
                 ? 'search-navbar'
-                : icon;
-        },
+                : this.$props.icon;
     },
 };
 
 export const Close = {
     extends: IconComponent,
 
-    computed: {
-        icon() {
-            return `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
-        },
+    beforeConnect() {
+        this.icon = `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
     },
 };
 

package/src/js/core/img.js

@@ -46,29 +46,19 @@ export default {
         loading: 'lazy',
     },
 
-    computed: {
-        target: {
-            get({ target }) {
-                return [this.$el, ...queryAll(target, this.$el)];
-            },
-
-            watch() {
-                this.$reset();
-            },
-        },
-    },
-
     connected() {
         if (this.loading !== 'lazy') {
             this.load();
             return;
         }
 
+        const target = [this.$el, ...queryAll(this.$props.target, this.$el)];
+
         if (nativeLazyLoad && isImg(this.$el)) {
             this.$el.loading = 'lazy';
             setSrcAttrs(this.$el);
 
-            if (this.target.length === 1) {
+            if (target.length === 1) {
                 return;
             }
         }
@@ -77,7 +67,7 @@ export default {
 
         this.registerObserver(
             observeIntersection(
-                this.target,
+                target,
                 (entries, observer) => {
                     this.load();
                     observer.disconnect();

package/src/js/core/index.js

@@ -3,7 +3,6 @@ export { default as Alert } from './alert';
 export { default as Cover } from './cover';
 export { default as Drop, default as Dropdown } from './drop';
 export { default as FormCustom } from './form-custom';
-export { default as Gif } from './gif';
 export { default as Grid } from './grid';
 export { default as HeightMatch } from './height-match';
 export { default as HeightViewport } from './height-viewport';

package/src/js/core/margin.js

@@ -1,13 +1,9 @@
-import {
-    isRtl,
-    isVisible,
-    observeMutation,
-    observeResize,
-    offsetPosition,
-    toggleClass,
-} from 'uikit-util';
+import Resize from '../mixin/resize';
+import { isRtl, isVisible, observeMutation, offsetPosition, toggleClass } from 'uikit-util';
 
 export default {
+    mixins: [Resize],
+
     props: {
         margin: String,
         firstColumn: Boolean,
@@ -18,14 +14,16 @@ export default {
         firstColumn: 'uk-first-column',
     },
 
+    resizeTargets() {
+        return this.$el.children;
+    },
+
     connected() {
         this.registerObserver(
             observeMutation(this.$el, () => this.$reset(), {
                 childList: true,
             })
         );
-
-        this.registerObserver(observeResize(this.$el.children, () => this.$emit('resize')));
     },
 
     update: {

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

@@ -25,14 +25,10 @@ export default {
         content({ selContent }, $el) {
             return closest($el, selContent);
         },
-
-        resizeTargets() {
-            return [this.container, this.content];
-        },
     },
 
-    connected() {
-        css(this.$el, 'minHeight', this.minHeight);
+    resizeTargets() {
+        return [this.container, this.content];
     },
 
     update: {
@@ -50,7 +46,7 @@ export default {
         },
 
         write({ max }) {
-            css(this.$el, 'maxHeight', max);
+            css(this.$el, { minHeight: this.minHeight, maxHeight: max });
         },
 
         events: ['resize'],

package/src/js/core/responsive.js

@@ -1,8 +1,15 @@
+import Resize from '../mixin/resize';
 import { addClass, Dimensions, height, isVisible, parent, width } from 'uikit-util';
 
 export default {
+    mixin: [Resize],
+
     props: ['width', 'height'],
 
+    resizeTargets() {
+        return [this.$el, parent(this.$el)];
+    },
+
     connected() {
         addClass(this.$el, 'uk-responsive-width');
     },

package/src/js/core/scrollspy.js

@@ -70,6 +70,10 @@ export default {
                         el[stateKey] = { cls: getData(el, 'uk-scrollspy-class') || this.cls };
                     }
 
+                    if (!this.repeat && el[stateKey].show) {
+                        continue;
+                    }
+
                     el[stateKey].show = isInView(el, this.offsetTop, this.offsetLeft);
                 }
             },

package/src/js/core/sticky.js

@@ -14,7 +14,6 @@ import {
     height as getHeight,
     offset as getOffset,
     getScrollingElement,
-    hasClass,
     isString,
     isVisible,
     noop,
@@ -47,7 +46,6 @@ export default {
         clsFixed: String,
         clsBelow: String,
         selTarget: String,
-        widthElement: Boolean,
         showOnUp: Boolean,
         targetOffset: Number,
     },
@@ -63,7 +61,6 @@ export default {
         clsFixed: 'uk-sticky-fixed',
         clsBelow: 'uk-sticky-below',
         selTarget: '',
-        widthElement: false,
         showOnUp: false,
         targetOffset: false,
     },
@@ -72,30 +69,10 @@ export default {
         selTarget({ selTarget }, $el) {
             return (selTarget && $(selTarget, $el)) || $el;
         },
+    },
 
-        widthElement({ widthElement }, $el) {
-            return query(widthElement, $el) || this.placeholder;
-        },
-
-        resizeTargets() {
-            return document.documentElement;
-        },
-
-        isActive: {
-            get() {
-                return hasClass(this.selTarget, this.clsActive);
-            },
-
-            set(value) {
-                if (value && !this.isActive) {
-                    replaceClass(this.selTarget, this.clsInactive, this.clsActive);
-                    trigger(this.$el, 'active');
-                } else if (!value && !hasClass(this.selTarget, this.clsInactive)) {
-                    replaceClass(this.selTarget, this.clsActive, this.clsInactive);
-                    trigger(this.$el, 'inactive');
-                }
-            },
-        },
+    resizeTargets() {
+        return document.documentElement;
     },
 
     connected() {
@@ -103,7 +80,7 @@ export default {
             $('+ .uk-sticky-placeholder', this.$el) ||
             $('<div class="uk-sticky-placeholder"></div>');
         this.isFixed = false;
-        this.isActive = false;
+        this.setActive(false);
     },
 
     disconnected() {
@@ -114,7 +91,6 @@ export default {
 
         remove(this.placeholder);
         this.placeholder = null;
-        this.widthElement = null;
     },
 
     events: [
@@ -209,8 +185,7 @@ export default {
                     topOffset,
                     height,
                     margin,
-                    width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
-                        .width,
+                    width: dimensions(referenceElement).width,
                     top: offsetPosition(referenceElement)[0],
                 };
             },
@@ -224,8 +199,6 @@ export default {
                     after(this.$el, placeholder);
                     placeholder.hidden = true;
                 }
-
-                this.isActive = !!this.isActive; // force self-assign
             },
 
             events: ['resize'],
@@ -342,7 +315,7 @@ export default {
         },
 
         hide() {
-            this.isActive = false;
+            this.setActive(false);
             removeClass(this.$el, this.clsFixed, this.clsBelow);
             css(this.$el, { position: '', top: '', width: '' });
             this.placeholder.hidden = true;
@@ -379,10 +352,22 @@ export default {
                 width,
             });
 
-            this.isActive = active;
+            this.setActive(active);
             toggleClass(this.$el, this.clsBelow, scroll > topOffset + height);
             addClass(this.$el, this.clsFixed);
         },
+
+        setActive(active) {
+            const prev = this.active;
+            this.active = active;
+            if (active) {
+                replaceClass(this.selTarget, this.clsInactive, this.clsActive);
+                prev !== active && trigger(this.$el, 'active');
+            } else {
+                replaceClass(this.selTarget, this.clsActive, this.clsInactive);
+                prev !== active && trigger(this.$el, 'inactive');
+            }
+        },
     },
 };
 

package/src/js/core/switcher.js

@@ -13,6 +13,7 @@ import {
     hasClass,
     matches,
     queryAll,
+    ready,
     toggleClass,
     toNodes,
     within,
@@ -87,6 +88,9 @@ export default {
 
     connected() {
         this.lazyload(this.$el, this.connects);
+
+        // check for connects
+        ready(() => this.$emit());
     },
 
     events: [

package/src/js/core/toggle.js

@@ -16,6 +16,7 @@ import {
     pointerEnter,
     pointerLeave,
     queryAll,
+    ready,
     trigger,
     within,
 } from 'uikit-util';
@@ -41,13 +42,6 @@ export default {
         queued: true,
     },
 
-    connected() {
-        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
-            attr(this.$el, 'tabindex', '0');
-        }
-        this.lazyload(this.$el, this.target);
-    },
-
     computed: {
         target: {
             get({ href, target }, $el) {
@@ -63,6 +57,17 @@ export default {
         },
     },
 
+    connected() {
+        if (!includes(this.mode, 'media') && !isFocusable(this.$el)) {
+            attr(this.$el, 'tabindex', '0');
+        }
+
+        this.lazyload(this.$el, this.target);
+
+        // check for target
+        ready(() => this.$emit());
+    },
+
     events: [
         {
             name: pointerDown,

package/src/js/mixin/media.js

@@ -18,17 +18,13 @@ export default {
         media: false,
     },
 
-    computed: {
-        matchMedia() {
-            return this.mediaObj?.matches;
-        },
-    },
-
     connected() {
         const media = toMedia(this.media);
         this.mediaObj = window.matchMedia(media);
-        const handler = () =>
+        const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
             trigger(this.$el, createEvent('mediachange', false, true, [this.mediaObj]));
+        };
         this.offMediaObj = on(this.mediaObj, 'change', () => {
             handler();
             this.$emit('resize');

package/src/js/mixin/parallax.js

@@ -1,6 +1,7 @@
 import Media from '../mixin/media';
 import { getMaxPathLength } from '../core/svg';
 import {
+    createEvent,
     css,
     Dimensions,
     each,
@@ -255,7 +256,7 @@ function getBackgroundImageDimensions(el) {
         if (!image.naturalWidth) {
             image.onload = () => {
                 dimensions[src] = toDimensions(image);
-                trigger(el, 'load');
+                trigger(el, createEvent('load', false));
             };
             return toDimensions(image);
         }

package/src/js/mixin/resize.js

@@ -1,13 +1,11 @@
 import { observeResize } from 'uikit-util';
 
 export default {
-    computed: {
-        resizeTargets() {
-            return this.$el;
-        },
-    },
-
     connected() {
-        this.registerObserver(observeResize(this.resizeTargets, () => this.$emit('resize')));
+        this.registerObserver(
+            observeResize(this.$options.resizeTargets?.call(this) || this.$el, () =>
+                this.$emit('resize')
+            )
+        );
     },
 };