uikit 3.11.2-dev.28b7953b9 → 3.11.2-dev.29f2881ed

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

@@ -1,22 +1,20 @@
 import Class from '../mixin/class';
-import {$, $$, closest, isInput, matches, parent, query, selInput} from 'uikit-util';
+import { $, $$, closest, isInput, matches, parent, query, selInput } from 'uikit-util';
 
 export default {
-
     mixins: [Class],
 
     args: 'target',
 
     props: {
-        target: Boolean
+        target: Boolean,
     },
 
     data: {
-        target: false
+        target: false,
     },
 
     computed: {
-
         input(_, $el) {
             return $(selInput, $el);
         },
@@ -25,18 +23,17 @@ export default {
             return this.input.nextElementSibling;
         },
 
-        target({target}, $el) {
-            return target && (target === true
-                && parent(this.input) === $el
-                && this.input.nextElementSibling
-                || query(target, $el));
-        }
-
+        target({ target }, $el) {
+            return (
+                target &&
+                ((target === true && parent(this.input) === $el && this.input.nextElementSibling) ||
+                    query(target, $el))
+            );
+        },
     },
 
     update() {
-
-        const {target, input} = this;
+        const { target, input } = this;
 
         if (!target) {
             return;
@@ -45,26 +42,26 @@ export default {
         let option;
         const prop = isInput(target) ? 'value' : 'textContent';
         const prev = target[prop];
-        const value = input.files && input.files[0]
-            ? input.files[0].name
-            : matches(input, 'select') && (option = $$('option', input).filter(el => el.selected)[0]) // eslint-disable-line prefer-destructuring
+        const value =
+            input.files && input.files[0]
+                ? input.files[0].name
+                : matches(input, 'select') &&
+                  (option = $$('option', input).filter((el) => el.selected)[0]) // eslint-disable-line prefer-destructuring
                 ? option.textContent
                 : input.value;
 
         if (prev !== value) {
             target[prop] = value;
         }
-
     },
 
     events: [
-
         {
             name: 'change',
 
             handler() {
                 this.$update();
-            }
+            },
         },
 
         {
@@ -76,9 +73,7 @@ export default {
 
             handler() {
                 this.$update();
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };

package/src/js/core/gif.js

@@ -1,12 +1,9 @@
-import {isInView} from 'uikit-util';
+import { isInView } from 'uikit-util';
 
 // Deprecated
 export default {
-
     update: {
-
         read(data) {
-
             const inview = isInView(this.$el);
 
             if (!inview || data.isInView === inview) {
@@ -20,7 +17,6 @@ export default {
             this.$el.src = '' + this.$el.src; // force self-assign
         },
 
-        events: ['scroll', 'resize']
-    }
-
+        events: ['scroll', 'resize'],
+    },
 };

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,35 @@
-import FlexBug from '../mixin/flex-bug';
-import {boxModelAdjust, css, dimensions, endsWith, height, isNumeric, isString, isVisible, offset, query, toFloat, trigger} from 'uikit-util';
+import {
+    boxModelAdjust,
+    css,
+    dimensions,
+    endsWith,
+    height,
+    isNumeric,
+    isString,
+    isVisible,
+    offset,
+    query,
+    toFloat,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
-    mixins: [FlexBug],
-
     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 +38,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 +78,8 @@ export default {
             if (this.minHeight && toFloat(css(this.$el, 'minHeight')) < this.minHeight) {
                 css(this.$el, 'minHeight', this.minHeight);
             }
-
         },
 
-        events: ['resize']
-
-    }
-
+        events: ['resize'],
+    },
 };