uikit 3.16.4-dev.8705d5334 → 3.16.4-dev.a8da41c36

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-dev.8705d5334",
+  "version": "3.16.4-dev.a8da41c36",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/component.js

@@ -5,8 +5,7 @@ export default function (UIkit) {
     const { data: DATA, prefix: PREFIX } = UIkit;
 
     UIkit.component = function (name, options) {
-        name = hyphenate(name);
-        const id = PREFIX + name;
+        const id = PREFIX + hyphenate(name);
 
         if (!options) {
             if (isPlainObject(components[id])) {

package/src/js/api/hooks.js

@@ -106,20 +106,16 @@ export default function (UIkit) {
     }
 
     function runWatches(initial) {
-        const {
-            $options: { computed },
-        } = this;
         const values = { ...this._computed };
         this._computed = {};
 
-        for (const key in computed) {
-            const { watch, immediate } = computed[key];
+        for (const [key, { watch, immediate }] of Object.entries(this.$options.computed || {})) {
             if (
                 watch &&
                 ((initial && immediate) ||
                     (hasOwn(values, key) && !isEqual(values[key], this[key])))
             ) {
-                watch.call(this, this[key], values[key]);
+                watch.call(this, this[key], initial ? undefined : values[key]);
             }
         }
     }

package/src/js/components/filter.js

@@ -70,8 +70,8 @@ export default {
                 return $$(`${target} > *`, $el);
             },
 
-            watch(list, old) {
-                if (old && !isEqualList(list, old)) {
+            watch(list, prev) {
+                if (prev) {
                     this.updateState();
                 }
             },
@@ -211,10 +211,6 @@ function matchFilter(
         : stateSort === sort && stateOrder === order;
 }
 
-function isEqualList(listA, listB) {
-    return listA.length === listB.length && listA.every((el) => listB.includes(el));
-}
-
 function getSelector({ filter }) {
     let selector = '';
     each(filter, (value) => (selector += value || ''));

package/src/js/components/slider.js

@@ -15,7 +15,9 @@ import {
     findIndex,
     getIndex,
     includes,
+    isVisible,
     last,
+    observeResize,
     selFocusable,
     sumBy,
     toFloat,
@@ -113,6 +115,37 @@ export default {
                 list: this.list,
             };
         },
+
+        children: {
+            get() {
+                return children(this.list);
+            },
+
+            watch(slides, prev) {
+                if (!prev) {
+                    this.registerObserver(
+                        (this._resizeObserver = observeResize(slides, () => this.$emit('resize')))
+                    );
+                }
+
+                if (prev) {
+                    slides.forEach(
+                        (slide) => !includes(prev, slide) && this._resizeObserver.observe(slide)
+                    );
+                    prev.forEach(
+                        (slide) => !includes(slides, slide) && this._resizeObserver.unobserve(slide)
+                    );
+
+                    this.$emit();
+                }
+            },
+
+            immediate: true,
+        },
+
+        slides() {
+            return this.children.filter(isVisible);
+        },
     },
 
     connected() {

package/src/js/core/cover.js

@@ -1,8 +1,9 @@
 import Video from './video';
-import { css, Dimensions, observeResize, parent } from 'uikit-util';
+import { css, Dimensions, parent } from 'uikit-util';
+import Resize from '../mixin/resize';
 
 export default {
-    mixins: [Video],
+    mixins: [Resize, Video],
 
     props: {
         width: Number,
@@ -19,43 +20,38 @@ export default {
         },
     },
 
-    connected() {
-        const parentEl = getPositionedParent(this.$el) || parent(this.$el);
-        this.registerObserver(
-            observeResize(parentEl, () => {
-                this.parentDim = getCoverDimensions(parentEl);
-                this.$emit('resize');
-            })
-        );
+    resizeTargets() {
+        return [this.$el, getPositionedParent(this.$el) || parent(this.$el)];
     },
 
     update: {
         read() {
             const { ratio, cover } = Dimensions;
-            const { $el, width, height, parentDim } = this;
+            const { $el, width, height } = this;
 
             let dim = { width, height };
 
-            if (!dim.width || !dim.height) {
+            if (!width || !height) {
                 const intrinsic = {
                     width: $el.naturalWidth || $el.videoWidth || $el.clientWidth,
                     height: $el.naturalHeight || $el.videoHeight || $el.clientHeight,
                 };
 
-                if (dim.width) {
-                    dim = ratio(intrinsic, 'width', dim.width);
+                if (width) {
+                    dim = ratio(intrinsic, 'width', width);
                 } else if (height) {
-                    dim = ratio(intrinsic, 'height', dim.height);
+                    dim = ratio(intrinsic, 'height', height);
                 } else {
                     dim = intrinsic;
                 }
             }
 
-            if (!parentDim) {
-                return false;
-            }
-
-            const coverDim = cover(dim, parentDim);
+            const { offsetHeight: coverHeight, offsetWidth: coverWidth } =
+                getPositionedParent($el) || parent($el);
+            const coverDim = cover(dim, {
+                width: coverWidth + (coverWidth % 2 ? 1 : 0),
+                height: coverHeight + (coverHeight % 2 ? 1 : 0),
+            });
 
             if (!coverDim.width || !coverDim.height) {
                 return false;
@@ -72,14 +68,6 @@ export default {
     },
 };
 
-function getCoverDimensions(el) {
-    const { offsetHeight, offsetWidth } = el;
-    return {
-        width: offsetWidth + (offsetWidth % 2 ? 1 : 0),
-        height: offsetHeight + (offsetHeight % 2 ? 1 : 0),
-    };
-}
-
 function getPositionedParent(el) {
     while ((el = parent(el))) {
         if (css(el, 'position') !== 'static') {

package/src/js/core/drop.js

@@ -20,6 +20,7 @@ import {
     once,
     overflowParents,
     parent,
+    pick,
     pointerCancel,
     pointerDown,
     pointerEnter,
@@ -111,7 +112,7 @@ export default {
             this.targetEl = createToggleComponent(this);
         }
 
-        this._style = (({ width, height }) => ({ width, height }))(this.$el.style);
+        this._style = pick(this.$el.style, ['width', 'height']);
     },
 
     disconnected() {

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

@@ -1,6 +1,6 @@
 import Resize from '../mixin/resize';
 import { getRows } from './margin';
-import { $$, boxModelAdjust, css, dimensions, isVisible } from 'uikit-util';
+import { $$, boxModelAdjust, css, dimensions, isVisible, pick } from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -55,7 +55,6 @@ function match(elements) {
         return { heights: [''], elements };
     }
 
-    css(elements, 'minHeight', '');
     let heights = elements.map(getHeight);
     const max = Math.max(...heights);
 
@@ -66,17 +65,13 @@ function match(elements) {
 }
 
 function getHeight(element) {
-    let style = false;
+    const style = pick(element.style, ['display', 'minHeight']);
+
     if (!isVisible(element)) {
-        style = element.style.display;
         css(element, 'display', 'block', 'important');
     }
-
+    css(element, 'minHeight', '');
     const height = dimensions(element).height - boxModelAdjust(element, 'height', 'content-box');
-
-    if (style !== false) {
-        css(element, 'display', style);
-    }
-
+    css(element, style);
     return height;
 }

package/src/js/core/scrollspy.js

@@ -4,7 +4,6 @@ import {
     css,
     filter,
     data as getData,
-    isEqual,
     observeIntersection,
     once,
     removeClass,
@@ -49,7 +48,7 @@ export default {
                     css(filter(elements, `:not(.${this.inViewClass})`), 'opacity', 0);
                 }
 
-                if (!isEqual(elements, prev)) {
+                if (prev) {
                     this.$reset();
                 }
             },

package/src/js/util/lang.js

@@ -10,15 +10,11 @@ export const hyphenate = memoize((str) => str.replace(hyphenateRe, '-$1').toLowe
 
 const camelizeRe = /-(\w)/g;
 
-export const camelize = memoize((str) => str.replace(camelizeRe, toUpper));
-
-export const ucfirst = memoize((str) =>
-    str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : ''
+export const camelize = memoize((str) =>
+    (str.charAt(0).toLowerCase() + str.slice(1)).replace(camelizeRe, (_, c) => c.toUpperCase())
 );
 
-function toUpper(_, c) {
-    return c ? c.toUpperCase() : '';
-}
+export const ucfirst = memoize((str) => str.charAt(0).toUpperCase() + str.slice(1));
 
 export function startsWith(str, search) {
     return str?.startsWith?.(search);
@@ -180,6 +176,10 @@ export function uniqueBy(array, prop) {
     return array.filter(({ [prop]: check }) => (seen.has(check) ? false : seen.add(check)));
 }
 
+export function pick(obj, props) {
+    return props.reduce((res, prop) => ({ ...res, [prop]: obj[prop] }), {});
+}
+
 export function clamp(number, min = 0, max = 1) {
     return Math.min(Math.max(toNumber(number) || 0, min), max);
 }

package/src/js/util/observer.js

@@ -1,5 +1,5 @@
 import { on } from './event';
-import { toNodes } from './lang';
+import { noop, toNodes } from './lang';
 import { inBrowser } from './env';
 
 export function observeIntersection(targets, cb, options, intersecting = true) {
@@ -31,6 +31,8 @@ export function observeResize(targets, cb, options = { box: 'border-box' }) {
     listeners.add(cb);
 
     return {
+        observe: noop,
+        unobserve: noop,
         disconnect() {
             listeners.delete(cb);
         },