uikit 3.19.5-dev.8317c4705 → 3.19.5-dev.a8d51a358

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.19.5-dev.8317c4705",
+  "version": "3.19.5-dev.a8d51a358",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/boot.js

@@ -1,4 +1,4 @@
-import { apply, hasAttr, inBrowser, isPlainObject, startsWith, trigger } from 'uikit-util';
+import { apply, hasAttr, inBrowser, startsWith, trigger } from 'uikit-util';
 import { components, createComponent, getComponent, getComponents } from './component';
 import { callConnected, callDisconnected } from './hooks';
 
@@ -53,16 +53,15 @@ function applyAttributeMutation({ target, attributeName }) {
     if (name) {
         if (hasAttr(target, attributeName)) {
             createComponent(name, target);
-            return;
+        } else {
+            getComponent(target, name)?.$destroy();
         }
-
-        getComponent(target, name)?.$destroy();
     }
 }
 
 function connect(node) {
     const components = getComponents(node);
-    for (const name in getComponents(node)) {
+    for (const name in components) {
         callConnected(components[name]);
     }
 
@@ -74,7 +73,7 @@ function connect(node) {
 
 function disconnect(node) {
     const components = getComponents(node);
-    for (const name in getComponents(node)) {
+    for (const name in components) {
         callDisconnected(components[name]);
     }
 }
@@ -85,5 +84,5 @@ function getComponentName(attribute) {
     }
 
     const cmp = components[attribute];
-    return cmp && (isPlainObject(cmp) ? cmp : cmp.options).name;
+    return cmp && (cmp.options || cmp).name;
 }

package/src/js/api/component.js

@@ -1,4 +1,4 @@
-import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
+import { camelize, findAll, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 import App from './app';
 
 const PREFIX = 'uk-';
@@ -10,7 +10,7 @@ export function component(name, options) {
     const id = PREFIX + hyphenate(name);
 
     if (!options) {
-        if (isPlainObject(components[id])) {
+        if (!components[id].options) {
             components[id] = App.extend(components[id]);
         }
 
@@ -21,7 +21,7 @@ export function component(name, options) {
 
     App[name] = (element, data) => createComponent(name, element, data);
 
-    const opt = isPlainObject(options) ? { ...options } : options.options;
+    const opt = options.options ?? { ...options };
 
     opt.id = id;
     opt.name = name;
@@ -41,7 +41,7 @@ export function createComponent(name, element, data, ...args) {
     return Component.options.functional
         ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
         : element
-          ? $$(element).map(init)[0]
+          ? findAll(element).map(init)[0]
           : init();
 
     function init(element) {

package/src/js/api/observer.js

@@ -46,21 +46,33 @@ function registerObservable(instance, observable) {
     const targets = hasOwn(instance, key) ? instance[key] : target;
     const observer = observe(targets, handler, options, args);
 
-    if (isFunction(target) && isArray(instance[key]) && observer.unobserve) {
-        registerWatch(instance, { handler: updateTargets(observer), immediate: false }, key);
+    if (isFunction(target) && isArray(instance[key])) {
+        registerWatch(
+            instance,
+            { handler: updateTargets(observer, options), immediate: false },
+            key,
+        );
     }
 
     registerObserver(instance, observer);
 }
 
-function updateTargets(observer) {
+function updateTargets(observer, options) {
     return (targets, prev) => {
         for (const target of prev) {
-            !includes(targets, target) && observer.unobserve(target);
+            if (!includes(targets, target)) {
+                if (observer.unobserve) {
+                    observer.unobserve(target);
+                } else if (observer.observe) {
+                    observer.disconnect();
+                }
+            }
         }
 
         for (const target of targets) {
-            !includes(prev, target) && observer.observe(target);
+            if (!includes(prev, target) || !observer.unobserve) {
+                observer.observe(target, options);
+            }
         }
     };
 }

package/src/js/components/slider.js

@@ -129,7 +129,7 @@ export default {
     },
 
     observe: resize({
-        target: ({ slides }) => slides,
+        target: ({ slides, $el }) => [$el, ...slides],
     }),
 
     update: {

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

@@ -68,7 +68,7 @@ export default {
                             offsetPosition(offsetTopEl)[0] - offsetPosition(scrollElement)[0];
                         minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
                     } else {
-                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                        minHeight += ` - ${boxModelAdjust(scrollElement, 'height', css(scrollElement, 'boxSizing'))}px`;
                     }
                 }
 

package/src/js/core/img.js

@@ -56,13 +56,13 @@ export default {
     },
 
     observe: intersection({
-        target: ({ $el, $props }) => [$el, ...queryAll($props.target, $el)],
         handler(entries, observer) {
             this.load();
             observer.disconnect();
         },
         options: ({ margin }) => ({ rootMargin: margin }),
         filter: ({ loading }) => loading === 'lazy',
+        target: ({ $el, $props }) => ($props.target ? [$el, ...queryAll($props.target, $el)] : $el),
     }),
 
     methods: {

package/src/js/core/inverse.js

@@ -1,5 +1,5 @@
-import { $$, css, dimensions, matches, observeResize, on, replaceClass } from 'uikit-util';
-import { mutation } from '../api/observables';
+import { $$, css, dimensions, matches, observeResize, on, replaceClass, toNodes } from 'uikit-util';
+import { intersection, mutation } from '../api/observables';
 
 export default {
     props: {
@@ -13,10 +13,18 @@ export default {
     },
 
     computed: {
-        target: ({ target }, $el) => (target ? $$(target, $el) : [$el]),
+        target: ({ target }, $el) => (target ? $$(target, $el) : $el),
     },
 
     observe: [
+        intersection({
+            handler(entries) {
+                this.isIntersecting = entries.some(({ isIntersecting }) => isIntersecting);
+                this.$emit();
+            },
+            target: ({ target }) => target,
+            args: { intersecting: false },
+        }),
         mutation({
             target: ({ target }) => target,
             options: { attributes: true, attributeFilter: ['class'], attributeOldValue: true },
@@ -24,7 +32,10 @@ export default {
         {
             target: ({ target }) => target,
             observe: (target, handler) => {
-                const observer = observeResize([...target, document.documentElement], handler);
+                const observer = observeResize(
+                    [...toNodes(target), document.documentElement],
+                    handler,
+                );
                 const listener = [
                     on(document, 'scroll itemshown itemhidden', handler, {
                         passive: true,
@@ -41,6 +52,8 @@ export default {
                 ];
 
                 return {
+                    observe: observer.observe.bind(observer),
+                    unobserve: observer.unobserve.bind(observer),
                     disconnect() {
                         observer.disconnect();
                         listener.map((off) => off());
@@ -55,7 +68,11 @@ export default {
 
     update: {
         read() {
-            for (const target of this.target) {
+            if (!this.isIntersecting) {
+                return false;
+            }
+
+            for (const target of toNodes(this.target)) {
                 replaceClass(
                     target,
                     'uk-light,uk-dark',

package/src/js/mixin/slider.js

@@ -10,7 +10,6 @@ import {
     removeClass,
     trigger,
 } from 'uikit-util';
-import { resize } from '../api/observables';
 import I18n from './i18n';
 import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
@@ -80,8 +79,6 @@ export default {
         },
     },
 
-    observe: resize(),
-
     events: {
         itemshow({ target }) {
             addClass(target, this.clsEnter, this.clsSlideActive);

package/src/js/mixin/slideshow.js

@@ -1,4 +1,5 @@
 import { addClass, removeClass } from 'uikit-util';
+import { resize } from '../api/observables.js';
 import Animations from './internal/slideshow-animations';
 import Transitioner from './internal/slideshow-transitioner';
 import Slider from './slider.js';
@@ -27,6 +28,8 @@ export default {
         },
     },
 
+    observe: resize(),
+
     events: {
         beforeitemshow({ target }) {
             addClass(target, this.clsActive);

package/src/js/util/lang.js

@@ -111,7 +111,7 @@ export function toFloat(value) {
 }
 
 export function toNode(element) {
-    return toNodes(element)[0];
+    return element && toNodes(element)[0];
 }
 
 export function toNodes(element) {

package/src/js/util/selector.js

@@ -1,5 +1,5 @@
 import { attr } from './attr';
-import { index, matches, parent } from './filter';
+import { index, matches } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
 export function query(selector, context) {
@@ -33,7 +33,7 @@ const parseSelector = memoize((selector) => {
     let isContextSelector = false;
 
     const selectors = [];
-    for (let sel of selector.match(splitSelectorRe)) {
+    for (let sel of selector.match(splitSelectorRe) ?? []) {
         sel = sel.replace(trailingCommaRe, '').trim();
         if (sel[0] === '>') {
             sel = `:scope ${sel}`;
@@ -67,7 +67,7 @@ function _query(selector, context = document, queryFn) {
 
         if (sel[0] === '!') {
             const selectors = sel.substr(1).trim().split(' ');
-            ctx = parent(context).closest(selectors[0]);
+            ctx = context.parentElement.closest(selectors[0]);
             sel = selectors.slice(1).join(' ').trim();
             if (!sel.length && isSingle) {
                 return ctx;
@@ -84,9 +84,9 @@ function _query(selector, context = document, queryFn) {
             }
         } else if (sel[0] === '~' || (sel[0] === '+' && isSingle)) {
             return _doQuery(
-                parent(context),
+                ctx.parentElement,
                 queryFn,
-                `:scope :nth-child(${index(context) + 1}) ${sel}`,
+                `:scope :nth-child(${index(ctx) + 1}) ${sel}`,
             );
         }
 

package/src/js/util/svg.js

@@ -1,16 +1,5 @@
 import { $$ } from './dom';
 
 export function getMaxPathLength(el) {
-    return Math.ceil(
-        Math.max(
-            0,
-            ...$$('[stroke]', el).map((stroke) => {
-                try {
-                    return stroke.getTotalLength();
-                } catch (e) {
-                    return 0;
-                }
-            }),
-        ),
-    );
+    return Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.())));
 }