uikit 3.11.2-dev.f2970ffaa → 3.12.0

package/src/js/core/grid.js

@@ -1,9 +1,17 @@
 import Margin from './margin';
 import Class from '../mixin/class';
-import {addClass, children, css, hasClass, scrolledOver, sortBy, toFloat, toggleClass} from 'uikit-util';
+import {
+    addClass,
+    children,
+    css,
+    hasClass,
+    scrolledOver,
+    sortBy,
+    toFloat,
+    toggleClass,
+} from 'uikit-util';
 
 export default {
-
     extends: Margin,
 
     mixins: [Class],
@@ -12,14 +20,14 @@ export default {
 
     props: {
         masonry: Boolean,
-        parallax: Number
+        parallax: Number,
     },
 
     data: {
         margin: 'uk-grid-margin',
         clsStack: 'uk-grid-stack',
         masonry: false,
-        parallax: 0
+        parallax: 0,
     },
 
     connected() {
@@ -27,25 +35,24 @@ export default {
     },
 
     update: [
-
         {
-
-            write({columns}) {
+            write({ columns }) {
                 toggleClass(this.$el, this.clsStack, columns.length < 2);
             },
 
-            events: ['resize']
-
+            events: ['resize'],
         },
 
         {
-
             read(data) {
-
-                let {columns, rows} = data;
+                let { columns, rows } = data;
 
                 // Filter component makes elements positioned absolute
-                if (!columns.length || !this.masonry && !this.parallax || positionedAbsolute(this.$el)) {
+                if (
+                    !columns.length ||
+                    (!this.masonry && !this.parallax) ||
+                    positionedAbsolute(this.$el)
+                ) {
                     data.translates = false;
                     return false;
                 }
@@ -58,36 +65,35 @@ export default {
                 const elHeight = Math.max(...columnHeights) + margin;
 
                 if (this.masonry) {
-                    columns = columns.map(column => sortBy(column, 'offsetTop'));
+                    columns = columns.map((column) => sortBy(column, 'offsetTop'));
                     translates = getTranslates(rows, columns);
                 }
 
                 let padding = Math.abs(this.parallax);
                 if (padding) {
-                    padding = columnHeights.reduce((newPadding, hgt, i) =>
-                            Math.max(newPadding, hgt + margin + (i % 2 ? padding : padding / 8) - elHeight)
-                        , 0);
+                    padding = columnHeights.reduce(
+                        (newPadding, hgt, i) =>
+                            Math.max(
+                                newPadding,
+                                hgt + margin + (i % 2 ? padding : padding / 8) - elHeight
+                            ),
+                        0
+                    );
                 }
 
-                return {padding, columns, translates, height: translates ? elHeight : ''};
-
+                return { padding, columns, translates, height: translates ? elHeight : '' };
             },
 
-            write({height, padding}) {
-
+            write({ height, padding }) {
                 css(this.$el, 'paddingBottom', padding || '');
                 height !== false && css(this.$el, 'height', height);
-
             },
 
-            events: ['resize']
-
+            events: ['resize'],
         },
 
         {
-
-            read({height}) {
-
+            read() {
                 if (positionedAbsolute(this.$el)) {
                     return false;
                 }
@@ -95,65 +101,58 @@ export default {
                 return {
                     scrolled: this.parallax
                         ? scrolledOver(this.$el) * Math.abs(this.parallax)
-                        : false
+                        : false,
                 };
             },
 
-            write({columns, scrolled, translates}) {
-
+            write({ columns, scrolled, translates }) {
                 if (scrolled === false && !translates) {
                     return;
                 }
 
                 columns.forEach((column, i) =>
                     column.forEach((el, j) =>
-                        css(el, 'transform', !scrolled && !translates ? '' : `translateY(${
-                            (translates && -translates[i][j]) + (scrolled ? i % 2 ? scrolled : scrolled / 8 : 0)
-                        }px)`)
+                        css(
+                            el,
+                            'transform',
+                            !scrolled && !translates
+                                ? ''
+                                : `translateY(${
+                                      (translates && -translates[i][j]) +
+                                      (scrolled ? (i % 2 ? scrolled : scrolled / 8) : 0)
+                                  }px)`
+                        )
                     )
                 );
-
             },
 
-            events: ['scroll', 'resize']
-
-        }
-
-    ]
-
+            events: ['scroll', 'resize'],
+        },
+    ],
 };
 
 function positionedAbsolute(el) {
-    return children(el).some(el => css(el, 'position') === 'absolute');
+    return children(el).some((el) => css(el, 'position') === 'absolute');
 }
 
 function getTranslates(rows, columns) {
+    const rowHeights = rows.map((row) => Math.max(...row.map((el) => el.offsetHeight)));
 
-    const rowHeights = rows.map(row =>
-        Math.max(...row.map(el => el.offsetHeight))
-    );
-
-    return columns.map(elements => {
+    return columns.map((elements) => {
         let prev = 0;
-        return elements.map((element, row) =>
-            prev += row
-                ? rowHeights[row - 1] - elements[row - 1].offsetHeight
-                : 0
+        return elements.map(
+            (element, row) =>
+                (prev += row ? rowHeights[row - 1] - elements[row - 1].offsetHeight : 0)
         );
     });
 }
 
 function getMarginTop(nodes, cls) {
+    const [node] = nodes.filter((el) => hasClass(el, cls));
 
-    const [node] = nodes.filter(el => hasClass(el, cls));
-
-    return toFloat(node
-        ? css(node, 'marginTop')
-        : css(nodes[0], 'paddingLeft'));
+    return toFloat(node ? css(node, 'marginTop') : css(nodes[0], 'paddingLeft'));
 }
 
 function getColumnHeights(columns) {
-    return columns.map(column =>
-        column.reduce((sum, el) => sum + el.offsetHeight, 0)
-    );
+    return columns.map((column) => column.reduce((sum, el) => sum + el.offsetHeight, 0));
 }

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

@@ -1,63 +1,51 @@
-import FlexBug from '../mixin/flex-bug';
-import {getRows} from './margin';
-import {$$, boxModelAdjust, css, dimensions, isVisible, toFloat} from 'uikit-util';
+import { getRows } from './margin';
+import { $$, boxModelAdjust, css, dimensions, isVisible, toFloat } from 'uikit-util';
 
 export default {
-
-    mixins: [FlexBug],
-
     args: 'target',
 
     props: {
         target: String,
-        row: Boolean
+        row: Boolean,
     },
 
     data: {
         target: '> *',
         row: true,
-        forceHeight: true
+        forceHeight: true,
     },
 
     computed: {
-
-        elements({target}, $el) {
+        elements({ target }, $el) {
             return $$(target, $el);
-        }
-
+        },
     },
 
     update: {
-
         read() {
             return {
-                rows: (this.row ? getRows(this.elements) : [this.elements]).map(match)
+                rows: (this.row ? getRows(this.elements) : [this.elements]).map(match),
             };
         },
 
-        write({rows}) {
-            rows.forEach(({heights, elements}) =>
-                elements.forEach((el, i) =>
-                    css(el, 'minHeight', heights[i])
-                )
-            );
+        write({ rows }) {
+            for (const { heights, elements } of rows) {
+                elements.forEach((el, i) => css(el, 'minHeight', heights[i]));
+            }
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };
 
 function match(elements) {
-
     if (elements.length < 2) {
-        return {heights: [''], elements};
+        return { heights: [''], elements };
     }
 
     let heights = elements.map(getHeight);
     let max = Math.max(...heights);
-    const hasMinHeight = elements.some(el => el.style.minHeight);
+    const hasMinHeight = elements.some((el) => el.style.minHeight);
     const hasShrunk = elements.some((el, i) => !el.style.minHeight && heights[i] < max);
 
     if (hasMinHeight && hasShrunk) {
@@ -70,11 +58,10 @@ function match(elements) {
         heights[i] === max && toFloat(el.style.minHeight).toFixed(2) !== max.toFixed(2) ? '' : max
     );
 
-    return {heights, elements};
+    return { heights, elements };
 }
 
 function getHeight(element) {
-
     let style = false;
     if (!isVisible(element)) {
         style = element.style.display;

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

@@ -1,28 +1,38 @@
-import FlexBug from '../mixin/flex-bug';
-import {boxModelAdjust, css, dimensions, endsWith, height, isNumeric, isString, isVisible, offset, query, toFloat, trigger} from 'uikit-util';
+import Class from '../mixin/class';
+import {
+    boxModelAdjust,
+    css,
+    dimensions,
+    endsWith,
+    height,
+    isNumeric,
+    isString,
+    isVisible,
+    offset,
+    query,
+    toFloat,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [FlexBug],
+    mixins: [Class],
 
     props: {
         expand: Boolean,
         offsetTop: Boolean,
         offsetBottom: Boolean,
-        minHeight: Number
+        minHeight: Number,
     },
 
     data: {
         expand: false,
         offsetTop: false,
         offsetBottom: false,
-        minHeight: 0
+        minHeight: 0,
     },
 
     update: {
-
-        read({minHeight: prev}) {
-
+        read({ minHeight: prev }) {
             if (!isVisible(this.$el)) {
                 return false;
             }
@@ -31,49 +41,38 @@ export default {
             const box = boxModelAdjust(this.$el, 'height', 'content-box');
 
             if (this.expand) {
-
-                minHeight = height(window) - (dimensions(document.documentElement).height - dimensions(this.$el).height) - box || '';
-
+                minHeight =
+                    height(window) -
+                        (dimensions(document.documentElement).height -
+                            dimensions(this.$el).height) -
+                        box || '';
             } else {
-
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
                 minHeight = 'calc(100vh';
 
                 if (this.offsetTop) {
-
-                    const {top} = offset(this.$el);
+                    const { top } = offset(this.$el);
                     minHeight += top > 0 && top < height(window) / 2 ? ` - ${top}px` : '';
-
                 }
 
                 if (this.offsetBottom === true) {
-
                     minHeight += ` - ${dimensions(this.$el.nextElementSibling).height}px`;
-
                 } else if (isNumeric(this.offsetBottom)) {
-
                     minHeight += ` - ${this.offsetBottom}vh`;
-
                 } else if (this.offsetBottom && endsWith(this.offsetBottom, 'px')) {
-
                     minHeight += ` - ${toFloat(this.offsetBottom)}px`;
-
                 } else if (isString(this.offsetBottom)) {
-
                     minHeight += ` - ${dimensions(query(this.offsetBottom, this.$el)).height}px`;
-
                 }
 
                 minHeight += `${box ? ` - ${box}px` : ''})`;
-
             }
 
-            return {minHeight, prev};
+            return { minHeight, prev };
         },
 
-        write({minHeight, prev}) {
-
-            css(this.$el, {minHeight});
+        write({ minHeight, prev }) {
+            css(this.$el, { minHeight });
 
             if (minHeight !== prev) {
                 trigger(this.$el, 'resize');
@@ -82,11 +81,8 @@ export default {
             if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
                 css(this.$el, 'minHeight', this.minHeight);
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };

package/src/js/core/icon.js

@@ -15,7 +15,19 @@ import slidenavPrevious from '../../images/components/slidenav-previous.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
 import spinner from '../../images/components/spinner.svg';
 import totop from '../../images/components/totop.svg';
-import {$, addClass, apply, css, each, hasClass, hyphenate, isRtl, isString, parents, Promise, swap} from 'uikit-util';
+import {
+    $,
+    addClass,
+    apply,
+    css,
+    each,
+    hasClass,
+    hyphenate,
+    isRtl,
+    isString,
+    parents,
+    swap,
+} from 'uikit-util';
 
 const icons = {
     spinner,
@@ -33,11 +45,10 @@ const icons = {
     'slidenav-next': slidenavNext,
     'slidenav-next-large': slidenavNextLarge,
     'slidenav-previous': slidenavPrevious,
-    'slidenav-previous-large': slidenavPreviousLarge
+    'slidenav-previous-large': slidenavPreviousLarge,
 };
 
 const Icon = {
-
     install,
 
     extends: SVG,
@@ -47,7 +58,7 @@ const Icon = {
     props: ['icon'],
 
     data: {
-        include: ['focusable']
+        include: ['focusable'],
     },
 
     isIcon: true,
@@ -57,42 +68,35 @@ const Icon = {
     },
 
     methods: {
-
-        getSvg() {
-
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
-        }
-
-    }
-
+            return icon;
+        },
+    },
 };
 
 export default Icon;
 
 export const IconComponent = {
-
     args: false,
 
     extends: Icon,
 
-    data: vm => ({
-        icon: hyphenate(vm.constructor.options.name)
+    data: (vm) => ({
+        icon: hyphenate(vm.constructor.options.name),
     }),
 
     beforeConnect() {
         addClass(this.$el, this.$name);
-    }
-
+    },
 };
 
 export const Slidenav = {
-
     extends: IconComponent,
 
     beforeConnect() {
@@ -100,72 +104,64 @@ export const Slidenav = {
     },
 
     computed: {
-
-        icon({icon}, $el) {
-            return hasClass($el, 'uk-slidenav-large')
-                ? `${icon}-large`
-                : icon;
-        }
-
-    }
-
+        icon({ icon }, $el) {
+            return hasClass($el, 'uk-slidenav-large') ? `${icon}-large` : icon;
+        },
+    },
 };
 
 export const Search = {
-
     extends: IconComponent,
 
     computed: {
-
-        icon({icon}, $el) {
+        icon({ icon }, $el) {
             return hasClass($el, 'uk-search-icon') && parents($el, '.uk-search-large').length
                 ? 'search-large'
                 : parents($el, '.uk-search-navbar').length
-                    ? 'search-navbar'
-                    : icon;
-        }
-
-    }
-
+                ? 'search-navbar'
+                : icon;
+        },
+    },
 };
 
 export const Close = {
-
     extends: IconComponent,
 
     computed: {
-
         icon() {
             return `close-${hasClass(this.$el, 'uk-close-large') ? 'large' : 'icon'}`;
-        }
-
-    }
-
+        },
+    },
 };
 
 export const Spinner = {
-
     extends: IconComponent,
 
-    connected() {
-        this.svg.then(svg => svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio));
-    }
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
 
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
+    },
 };
 
 const parsed = {};
 function install(UIkit) {
     UIkit.icon.add = (name, svg) => {
-
-        const added = isString(name) ? ({[name]: svg}) : name;
+        const added = isString(name) ? { [name]: svg } : name;
         each(added, (svg, name) => {
             icons[name] = svg;
             delete parsed[name];
         });
 
         if (UIkit._initialized) {
-            apply(document.body, el =>
-                each(UIkit.getComponents(el), cmp => {
+            apply(document.body, (el) =>
+                each(UIkit.getComponents(el), (cmp) => {
                     cmp.$options.isIcon && cmp.icon in added && cmp.$reset();
                 })
             );
@@ -174,7 +170,6 @@ function install(UIkit) {
 }
 
 function getIcon(icon) {
-
     if (!icons[icon]) {
         return null;
     }