uikit 3.13.11-dev.eb080f280 → 3.14.1-dev.dadc910c0

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.13.11-dev.eb080f280",
+    "version": "3.14.1-dev.dadc910c0",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/components/slider.js

@@ -79,7 +79,7 @@ export default {
             let left = 0;
             const sets = [];
             const width = dimensions(this.list).width;
-            for (let i in this.slides) {
+            for (let i = 0; i < this.slides.length; i++) {
                 const slideWidth = dimensions(this.slides[i]).width;
 
                 if (left + slideWidth > width) {

package/src/js/core/accordion.js

@@ -28,7 +28,6 @@ export default {
         multiple: Boolean,
         toggle: String,
         content: String,
-        transition: String,
         offset: Number,
     },
 
@@ -41,19 +40,16 @@ export default {
         clsOpen: 'uk-open',
         toggle: '> .uk-accordion-title',
         content: '> .uk-accordion-content',
-        transition: 'ease',
         offset: 0,
     },
 
     computed: {
         items: {
             get({ targets }, $el) {
-                return $$(targets, $el).filter((el) => $(this.content, el));
+                return $$(targets, $el);
             },
 
             watch(items, prev) {
-                items.forEach((el) => hide($(this.content, el), !hasClass(el, this.clsOpen)));
-
                 if (prev || hasClass(items, this.clsOpen)) {
                     return;
                 }
@@ -73,6 +69,26 @@ export default {
         toggles({ toggle }) {
             return this.items.map((item) => $(toggle, item));
         },
+
+        contents: {
+            get({ content }) {
+                return this.items.map((item) => $(content, item));
+            },
+
+            watch(items) {
+                for (const el of items) {
+                    hide(
+                        el,
+                        !hasClass(
+                            this.items.find((item) => item.contains(el)),
+                            this.clsOpen
+                        )
+                    );
+                }
+            },
+
+            immediate: true,
+        },
     },
 
     connected() {

package/src/js/core/cover.js

@@ -26,25 +26,38 @@ export default {
 
     update: {
         read() {
-            const el = this.$el;
-            const { offsetHeight: height, offsetWidth: width } =
-                getPositionedParent(el) || parent(el);
-            const dim = Dimensions.cover(
-                {
-                    width: this.width || el.naturalWidth || el.videoWidth || el.clientWidth,
-                    height: this.height || el.naturalHeight || el.videoHeight || el.clientHeight,
-                },
-                {
-                    width: width + (width % 2 ? 1 : 0),
-                    height: height + (height % 2 ? 1 : 0),
-                }
-            );
+            const { ratio, cover } = Dimensions;
+            const { $el, width, height } = this;
+
+            let dim = { width, height };
 
             if (!dim.width || !dim.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);
+                } else if (height) {
+                    dim = ratio(intrinsic, 'height', dim.height);
+                } else {
+                    dim = intrinsic;
+                }
+            }
+
+            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;
             }
 
-            return dim;
+            return coverDim;
         },
 
         write({ height, width }) {

package/src/js/core/drop.js

@@ -13,6 +13,7 @@ import {
     isTouch,
     matches,
     MouseTracker,
+    observeResize,
     offset,
     offsetViewport,
     on,
@@ -44,6 +45,7 @@ export default {
         boundaryAlign: Boolean,
         delayShow: Number,
         delayHide: Number,
+        display: String,
         clsDrop: String,
     },
 
@@ -54,6 +56,7 @@ export default {
         boundaryAlign: false,
         delayShow: 0,
         delayHide: 800,
+        display: null,
         clsDrop: false,
         animation: ['uk-animation-fade'],
         cls: 'uk-open',
@@ -244,7 +247,23 @@ export default {
                             this.hide(false);
                         }
                     }),
-                    on(window, 'resize', () => this.$emit()),
+
+                    ...(this.display === 'static'
+                        ? []
+                        : (() => {
+                              const handler = () => this.$emit();
+                              return [
+                                  on(window, 'resize', handler),
+                                  on(document, 'scroll', handler, true),
+                                  (() => {
+                                      const observer = observeResize(
+                                          scrollParents(this.$el),
+                                          handler
+                                      );
+                                      return () => observer.disconnect();
+                                  })(),
+                              ];
+                          })()),
                 ]) {
                     once(this.$el, 'hide', handler, { self: true });
                 }
@@ -364,7 +383,8 @@ export default {
             const boundaryOffset = boundary ? offset(boundary) : scrollParentOffset;
 
             css(this.$el, 'maxWidth', '');
-            const maxWidth = scrollParentOffset.width - (boundary ? 0 : 2 * this.viewportPadding);
+            const maxWidth =
+                scrollParentOffset.width - (this.boundaryAlign ? 0 : 2 * this.viewportPadding);
 
             if (this.pos[1] === 'justify') {
                 const prop = this.axis === 'y' ? 'width' : 'height';

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

@@ -30,7 +30,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.elements];
+        return [this.$el, ...this.elements];
     },
 
     update: {

package/src/js/core/margin.js

@@ -1,5 +1,12 @@
 import Resize from '../mixin/resize';
-import { isRtl, isVisible, observeMutation, offsetPosition, toggleClass } from 'uikit-util';
+import {
+    isRtl,
+    isVisible,
+    observeMutation,
+    offsetPosition,
+    toArray,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
     mixins: [Resize],
@@ -15,7 +22,7 @@ export default {
     },
 
     resizeTargets() {
-        return [this.$el, this.$el.children];
+        return [this.$el, ...toArray(this.$el.children)];
     },
 
     connected() {

package/src/js/core/scrollspy-nav.js

@@ -71,7 +71,7 @@ export default {
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
-                    for (const i in targets) {
+                    for (let i = 0; i < targets.length; i++) {
                         if (offset(targets[i]).top - viewport.top - this.offset > 0) {
                             break;
                         }
@@ -90,7 +90,7 @@ export default {
                 const changed = active !== false && !hasClass(this.elements[active], this.cls);
 
                 this.links.forEach((el) => el.blur());
-                for (const i in this.elements) {
+                for (let i = 0; i < this.elements.length; i++) {
                     toggleClass(this.elements[i], this.cls, +i === active);
                 }
 

package/src/js/mixin/parallax.js

@@ -4,7 +4,6 @@ import {
     createEvent,
     css,
     Dimensions,
-    each,
     findIndex,
     isNumber,
     isString,
@@ -65,7 +64,9 @@ export default {
 
     methods: {
         reset() {
-            each(this.getCss(0), (_, prop) => css(this.$el, prop, ''));
+            for (const prop in this.getCss(0)) {
+                css(this.$el, prop, '');
+            }
         },
 
         getCss(percent) {
@@ -78,39 +79,39 @@ export default {
     },
 };
 
-function transformFn(prop, el, stops) {
-    let unit = getUnit(stops) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
+function transformFn(prop, el, steps) {
+    let unit = getUnit(steps) || { x: 'px', y: 'px', rotate: 'deg' }[prop] || '';
     let transformFn;
 
     if (prop === 'x' || prop === 'y') {
         prop = `translate${ucfirst(prop)}`;
-        transformFn = (stop) => toFloat(toFloat(stop).toFixed(unit === 'px' ? 0 : 6));
+        transformFn = (step) => toFloat(toFloat(step).toFixed(unit === 'px' ? 0 : 6));
     } else if (prop === 'scale') {
         unit = '';
-        transformFn = (stop) =>
-            getUnit([stop]) ? toPx(stop, 'width', el, true) / el.offsetWidth : stop;
+        transformFn = (step) =>
+            getUnit([step]) ? toPx(step, 'width', el, true) / el.offsetWidth : step;
     }
 
-    if (stops.length === 1) {
-        stops.unshift(prop === 'scale' ? 1 : 0);
+    if (steps.length === 1) {
+        steps.unshift(prop === 'scale' ? 1 : 0);
     }
 
-    stops = parseStops(stops, transformFn);
+    steps = parseSteps(steps, transformFn);
 
     return (css, percent) => {
-        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
+        css.transform += ` ${prop}(${getValue(steps, percent)}${unit})`;
     };
 }
 
-function colorFn(prop, el, stops) {
-    if (stops.length === 1) {
-        stops.unshift(getCssValue(el, prop, ''));
+function colorFn(prop, el, steps) {
+    if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
     }
 
-    stops = parseStops(stops, (stop) => parseColor(el, stop));
+    steps = parseSteps(steps, (step) => parseColor(el, step));
 
     return (css, percent) => {
-        const [start, end, p] = getStop(stops, percent);
+        const [start, end, p] = getStep(steps, percent);
         const value = start
             .map((value, i) => {
                 value += p * (end[i] - value);
@@ -130,80 +131,80 @@ function parseColor(el, color) {
         .map(toFloat);
 }
 
-function filterFn(prop, el, stops) {
-    if (stops.length === 1) {
-        stops.unshift(0);
+function filterFn(prop, el, steps) {
+    if (steps.length === 1) {
+        steps.unshift(0);
     }
 
-    const unit = getUnit(stops) || { blur: 'px', hue: 'deg' }[prop] || '%';
+    const unit = getUnit(steps) || { blur: 'px', hue: 'deg' }[prop] || '%';
     prop = { fopacity: 'opacity', hue: 'hue-rotate' }[prop] || prop;
-    stops = parseStops(stops);
+    steps = parseSteps(steps);
 
     return (css, percent) => {
-        const value = getValue(stops, percent);
+        const value = getValue(steps, percent);
         css.filter += ` ${prop}(${value + unit})`;
     };
 }
 
-function cssPropFn(prop, el, stops) {
-    if (stops.length === 1) {
-        stops.unshift(getCssValue(el, prop, ''));
+function cssPropFn(prop, el, steps) {
+    if (steps.length === 1) {
+        steps.unshift(getCssValue(el, prop, ''));
     }
 
-    stops = parseStops(stops);
+    steps = parseSteps(steps);
 
     return (css, percent) => {
-        css[prop] = getValue(stops, percent);
+        css[prop] = getValue(steps, percent);
     };
 }
 
-function strokeFn(prop, el, stops) {
-    if (stops.length === 1) {
-        stops.unshift(0);
+function strokeFn(prop, el, steps) {
+    if (steps.length === 1) {
+        steps.unshift(0);
     }
 
-    const unit = getUnit(stops);
+    const unit = getUnit(steps);
     const length = getMaxPathLength(el);
-    stops = parseStops(stops.reverse(), (stop) => {
-        stop = toFloat(stop);
-        return unit === '%' ? (stop * length) / 100 : stop;
+    steps = parseSteps(steps.reverse(), (step) => {
+        step = toFloat(step);
+        return unit === '%' ? (step * length) / 100 : step;
     });
 
-    if (!stops.some(([value]) => value)) {
+    if (!steps.some(([value]) => value)) {
         return noop;
     }
 
     css(el, 'strokeDasharray', length);
 
     return (css, percent) => {
-        css.strokeDashoffset = getValue(stops, percent);
+        css.strokeDashoffset = getValue(steps, percent);
     };
 }
 
-function backgroundFn(prop, el, stops) {
-    if (stops.length === 1) {
-        stops.unshift(0);
+function backgroundFn(prop, el, steps) {
+    if (steps.length === 1) {
+        steps.unshift(0);
     }
 
     prop = prop.substr(-1);
     const attr = prop === 'y' ? 'height' : 'width';
-    stops = parseStops(stops, (stop) => toPx(stop, attr, el));
+    steps = parseSteps(steps, (step) => toPx(step, attr, el));
 
     const bgPos = getCssValue(el, `background-position-${prop}`, '');
 
     return getCssValue(el, 'backgroundSize', '') === 'cover'
-        ? backgroundCoverFn(prop, el, stops, bgPos, attr)
-        : setBackgroundPosFn(prop, stops, bgPos);
+        ? backgroundCoverFn(prop, el, steps, bgPos, attr)
+        : setBackgroundPosFn(prop, steps, bgPos);
 }
 
-function backgroundCoverFn(prop, el, stops, bgPos, attr) {
+function backgroundCoverFn(prop, el, steps, bgPos, attr) {
     const dimImage = getBackgroundImageDimensions(el);
 
     if (!dimImage.width) {
         return noop;
     }
 
-    const values = stops.map(([value]) => value);
+    const values = steps.map(([value]) => value);
     const min = Math.min(...values);
     const max = Math.max(...values);
     const down = values.indexOf(min) < values.indexOf(max);
@@ -231,7 +232,7 @@ function backgroundCoverFn(prop, el, stops, bgPos, attr) {
 
     const dim = Dimensions.cover(dimImage, dimEl);
 
-    const fn = setBackgroundPosFn(prop, stops, `${pos}px`);
+    const fn = setBackgroundPosFn(prop, steps, `${pos}px`);
     return (css, percent) => {
         fn(css, percent);
         css.backgroundSize = `${dim.width}px ${dim.height}px`;
@@ -239,9 +240,9 @@ function backgroundCoverFn(prop, el, stops, bgPos, attr) {
     };
 }
 
-function setBackgroundPosFn(prop, stops, pos) {
+function setBackgroundPosFn(prop, steps, pos) {
     return function (css, percent) {
-        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(stops, percent)}px)`;
+        css[`background-position-${prop}`] = `calc(${pos} + ${getValue(steps, percent)}px)`;
     };
 }
 
@@ -276,12 +277,12 @@ function toDimensions(image) {
     };
 }
 
-function parseStops(stops, fn = toFloat) {
+function parseSteps(steps, fn = toFloat) {
     const result = [];
-    const { length } = stops;
+    const { length } = steps;
     let nullIndex = 0;
     for (let i = 0; i < length; i++) {
-        let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
+        let [value, percent] = isString(steps[i]) ? steps[i].trim().split(' ') : [steps[i]];
         value = fn(value);
         percent = percent ? toFloat(percent) / 100 : null;
 
@@ -318,24 +319,24 @@ function parseStops(stops, fn = toFloat) {
     return result;
 }
 
-function getStop(stops, percent) {
-    const index = findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+function getStep(steps, percent) {
+    const index = findIndex(steps.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
     return [
-        stops[index - 1][0],
-        stops[index][0],
-        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1]),
+        steps[index - 1][0],
+        steps[index][0],
+        (percent - steps[index - 1][1]) / (steps[index][1] - steps[index - 1][1]),
     ];
 }
 
-function getValue(stops, percent) {
-    const [start, end, p] = getStop(stops, percent);
+function getValue(steps, percent) {
+    const [start, end, p] = getStep(steps, percent);
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
 const unitRe = /^-?\d+([^\s]*)/;
-function getUnit(stops, defaultUnit) {
-    for (const stop of stops) {
-        const match = stop.match?.(unitRe);
+function getUnit(steps, defaultUnit) {
+    for (const step of steps) {
+        const match = step.match?.(unitRe);
         if (match) {
             return match[1];
         }

package/src/js/mixin/togglable.js

@@ -24,6 +24,7 @@ export default {
         cls: Boolean,
         animation: 'list',
         duration: Number,
+        velocity: Number,
         origin: String,
         transition: String,
     },
@@ -32,8 +33,9 @@ export default {
         cls: false,
         animation: [false],
         duration: 200,
+        velocity: 0.2,
         origin: false,
-        transition: 'linear',
+        transition: 'ease',
         clsEnter: 'uk-togglabe-enter',
         clsLeave: 'uk-togglabe-leave',
 
@@ -44,6 +46,7 @@ export default {
             paddingBottom: '',
             marginTop: '',
             marginBottom: '',
+            boxShadow: '',
         },
 
         hideProps: {
@@ -53,6 +56,7 @@ export default {
             paddingBottom: 0,
             marginTop: 0,
             marginBottom: 0,
+            boxShadow: 'none',
         },
     },
 
@@ -147,7 +151,15 @@ export default {
     },
 };
 
-export function toggleHeight({ isToggled, duration, initProps, hideProps, transition, _toggle }) {
+export function toggleHeight({
+    isToggled,
+    duration,
+    velocity,
+    initProps,
+    hideProps,
+    transition,
+    _toggle,
+}) {
     return (el, show) => {
         const inProgress = Transition.inProgress(el);
         const inner = el.hasChildNodes()
@@ -168,6 +180,8 @@ export function toggleHeight({ isToggled, duration, initProps, hideProps, transi
         fastdom.flush();
 
         const endHeight = height(el) + (inProgress ? 0 : inner);
+        duration = velocity * el.offsetHeight + duration;
+
         height(el, currentHeight);
 
         return (

package/src/js/util/lang.js

@@ -200,48 +200,44 @@ export function pointInRect(point, rect) {
     );
 }
 
-export const Dimensions = {
-    ratio(dimensions, prop, value) {
-        const aProp = prop === 'width' ? 'height' : 'width';
-
-        return {
-            [aProp]: dimensions[prop]
-                ? Math.round((value * dimensions[aProp]) / dimensions[prop])
-                : dimensions[aProp],
-            [prop]: value,
-        };
-    },
-
-    contain(dimensions, maxDimensions) {
-        dimensions = { ...dimensions };
-
-        each(
-            dimensions,
-            (_, prop) =>
-                (dimensions =
-                    dimensions[prop] > maxDimensions[prop]
-                        ? this.ratio(dimensions, prop, maxDimensions[prop])
-                        : dimensions)
-        );
+function ratio(dimensions, prop, value) {
+    const aProp = prop === 'width' ? 'height' : 'width';
 
-        return dimensions;
-    },
+    return {
+        [aProp]: dimensions[prop]
+            ? Math.round((value * dimensions[aProp]) / dimensions[prop])
+            : dimensions[aProp],
+        [prop]: value,
+    };
+}
 
-    cover(dimensions, maxDimensions) {
-        dimensions = this.contain(dimensions, maxDimensions);
+function contain(dimensions, maxDimensions) {
+    dimensions = { ...dimensions };
 
-        each(
-            dimensions,
-            (_, prop) =>
-                (dimensions =
-                    dimensions[prop] < maxDimensions[prop]
-                        ? this.ratio(dimensions, prop, maxDimensions[prop])
-                        : dimensions)
-        );
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] > maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
+
+function cover(dimensions, maxDimensions) {
+    dimensions = contain(dimensions, maxDimensions);
+
+    for (const prop in dimensions) {
+        dimensions =
+            dimensions[prop] < maxDimensions[prop]
+                ? ratio(dimensions, prop, maxDimensions[prop])
+                : dimensions;
+    }
+
+    return dimensions;
+}
 
-        return dimensions;
-    },
-};
+export const Dimensions = { ratio, contain, cover };
 
 export function getIndex(i, elements, current = 0, finite = false) {
     elements = toNodes(elements);