uikit 3.11.2-dev.fb043abc2 → 3.12.0

package/src/js/components/filter.js

@@ -1,15 +1,31 @@
 import Animate from '../mixin/animate';
-import {$$, append, assign, css, data, each, fastdom, children as getChildren, hasClass, includes, isEmpty, isEqual, isUndefined, matches, parseOptions, Promise, toggleClass, trigger} from 'uikit-util';
+import {
+    $$,
+    append,
+    css,
+    data,
+    each,
+    fastdom,
+    children as getChildren,
+    hasClass,
+    includes,
+    isEmpty,
+    isEqual,
+    isUndefined,
+    matches,
+    parseOptions,
+    toggleClass,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Animate],
 
     args: 'target',
 
     props: {
         target: Boolean,
-        selActive: Boolean
+        selActive: Boolean,
     },
 
     data: {
@@ -17,35 +33,29 @@ export default {
         selActive: false,
         attrItem: 'uk-filter-control',
         cls: 'uk-active',
-        duration: 250
+        duration: 250,
     },
 
     computed: {
-
         toggles: {
-
-            get({attrItem}, $el) {
+            get({ attrItem }, $el) {
                 return $$(`[${attrItem}],[data-${attrItem}]`, $el);
             },
 
             watch() {
-
                 this.updateState();
 
                 if (this.selActive !== false) {
                     const actives = $$(this.selActive, this.$el);
-                    this.toggles.forEach(el => toggleClass(el, this.cls, includes(actives, el)));
+                    this.toggles.forEach((el) => toggleClass(el, this.cls, includes(actives, el)));
                 }
-
             },
 
-            immediate: true
-
+            immediate: true,
         },
 
         children: {
-
-            get({target}, $el) {
+            get({ target }, $el) {
                 return $$(`${target} > *`, $el);
             },
 
@@ -55,16 +65,12 @@ export default {
                 }
             },
 
-            immediate: true
-
-        }
-
+            immediate: true,
+        },
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -72,18 +78,13 @@ export default {
             },
 
             handler(e) {
-
                 e.preventDefault();
                 this.apply(e.current);
-
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         apply(el) {
             const prevState = this.getState();
             const newState = mergeState(el, this.attrItem, this.getState());
@@ -95,34 +96,37 @@ export default {
 
         getState() {
             return this.toggles
-                .filter(item => hasClass(item, this.cls))
-                .reduce((state, el) => mergeState(el, this.attrItem, state), {filter: {'': ''}, sort: []});
+                .filter((item) => hasClass(item, this.cls))
+                .reduce((state, el) => mergeState(el, this.attrItem, state), {
+                    filter: { '': '' },
+                    sort: [],
+                });
         },
 
         setState(state, animate = true) {
-
-            state = assign({filter: {'': ''}, sort: []}, state);
+            state = { filter: { '': '' }, sort: [], ...state };
 
             trigger(this.$el, 'beforeFilter', [this, state]);
 
-            this.toggles.forEach(el => toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
-
-            Promise.all($$(this.target, this.$el).map(target => {
-                const filterFn = () => {
-                    applyState(state, target, getChildren(target));
-                    this.$update(this.$el);
-                };
-                return animate ? this.animate(filterFn, target) : filterFn();
-            })).then(() => trigger(this.$el, 'afterFilter', [this]));
-
+            this.toggles.forEach((el) =>
+                toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state))
+            );
+
+            Promise.all(
+                $$(this.target, this.$el).map((target) => {
+                    const filterFn = () => {
+                        applyState(state, target, getChildren(target));
+                        this.$update(this.$el);
+                    };
+                    return animate ? this.animate(filterFn, target) : filterFn();
+                })
+            ).then(() => trigger(this.$el, 'afterFilter', [this]));
         },
 
         updateState() {
             fastdom.write(() => this.setState(this.getState(), false));
-        }
-
-    }
-
+        },
+    },
 };
 
 function getFilter(el, attr) {
@@ -130,13 +134,13 @@ function getFilter(el, attr) {
 }
 
 function isEqualState(stateA, stateB) {
-    return ['filter', 'sort'].every(prop => isEqual(stateA[prop], stateB[prop]));
+    return ['filter', 'sort'].every((prop) => isEqual(stateA[prop], stateB[prop]));
 }
 
 function applyState(state, target, children) {
     const selector = getSelector(state);
 
-    children.forEach(el => css(el, 'display', selector && !matches(el, selector) ? 'none' : ''));
+    children.forEach((el) => css(el, 'display', selector && !matches(el, selector) ? 'none' : ''));
 
     const [sort, order] = state.sort;
 
@@ -149,14 +153,11 @@ function applyState(state, target, children) {
 }
 
 function mergeState(el, attr, state) {
-
     const filterBy = getFilter(el, attr);
-    const {filter, group, sort, order = 'asc'} = filterBy;
+    const { filter, group, sort, order = 'asc' } = filterBy;
 
     if (filter || isUndefined(sort)) {
-
         if (group) {
-
             if (filter) {
                 delete state.filter[''];
                 state.filter[group] = filter;
@@ -164,15 +165,12 @@ function mergeState(el, attr, state) {
                 delete state.filter[group];
 
                 if (isEmpty(state.filter) || '' in state.filter) {
-                    state.filter = {'': filter || ''};
+                    state.filter = { '': filter || '' };
                 }
-
             }
-
         } else {
-            state.filter = {'': filter || ''};
+            state.filter = { '': filter || '' };
         }
-
     }
 
     if (!isUndefined(sort)) {
@@ -182,27 +180,33 @@ function mergeState(el, attr, state) {
     return state;
 }
 
-function matchFilter(el, attr, {filter: stateFilter = {'': ''}, sort: [stateSort, stateOrder]}) {
-
-    const {filter = '', group = '', sort, order = 'asc'} = getFilter(el, attr);
+function matchFilter(
+    el,
+    attr,
+    { filter: stateFilter = { '': '' }, sort: [stateSort, stateOrder] }
+) {
+    const { filter = '', group = '', sort, order = 'asc' } = getFilter(el, attr);
 
     return isUndefined(sort)
-        ? group in stateFilter && filter === stateFilter[group]
-            || !filter && group && !(group in stateFilter) && !stateFilter['']
+        ? (group in stateFilter && filter === stateFilter[group]) ||
+              (!filter && group && !(group in stateFilter) && !stateFilter[''])
         : stateSort === sort && stateOrder === order;
 }
 
 function isEqualList(listA, listB) {
-    return listA.length === listB.length
-        && listA.every(el => ~listB.indexOf(el));
+    return listA.length === listB.length && listA.every((el) => ~listB.indexOf(el));
 }
 
-function getSelector({filter}) {
+function getSelector({ filter }) {
     let selector = '';
-    each(filter, value => selector += value || '');
+    each(filter, (value) => (selector += value || ''));
     return selector;
 }
 
 function sortItems(nodes, sort, order) {
-    return assign([], nodes).sort((a, b) => data(a, sort).localeCompare(data(b, sort), undefined, {numeric: true}) * (order === 'asc' || -1));
+    return [...nodes].sort(
+        (a, b) =>
+            data(a, sort).localeCompare(data(b, sort), undefined, { numeric: true }) *
+            (order === 'asc' || -1)
+    );
 }

package/src/js/components/index.js

@@ -1,13 +1,13 @@
-export {default as Countdown} from './countdown';
-export {default as Filter} from './filter';
-export {default as Lightbox} from './lightbox';
-export {default as LightboxPanel} from './lightbox-panel';
-export {default as Notification} from './notification';
-export {default as Parallax} from './parallax';
-export {default as Slider} from './slider';
-export {default as SliderParallax} from './slider-parallax';
-export {default as Slideshow} from './slideshow';
-export {default as SlideshowParallax} from './slideshow-parallax';
-export {default as Sortable} from './sortable';
-export {default as Tooltip} from './tooltip';
-export {default as Upload} from './upload';
+export { default as Countdown } from './countdown';
+export { default as Filter } from './filter';
+export { default as Lightbox } from './lightbox';
+export { default as LightboxPanel } from './lightbox-panel';
+export { default as Notification } from './notification';
+export { default as Parallax } from './parallax';
+export { default as Slider } from './slider';
+export { default as SliderParallax } from './slider-parallax';
+export { default as Slideshow } from './slideshow';
+export { default as SlideshowParallax } from './slideshow-parallax';
+export { default as Sortable } from './sortable';
+export { default as Tooltip } from './tooltip';
+export { default as Upload } from './upload';

package/src/js/components/internal/lightbox-animations.js

@@ -1,15 +1,11 @@
-import Animations, {scale3d} from '../../mixin/internal/slideshow-animations';
-import {assign, css} from 'uikit-util';
-
-export default assign({}, Animations, {
+import Animations, { scale3d } from '../../mixin/internal/slideshow-animations';
+import { css } from 'uikit-util';
 
+export default {
+    ...Animations,
     fade: {
-
         show() {
-            return [
-                {opacity: 0},
-                {opacity: 1}
-            ];
+            return [{ opacity: 0 }, { opacity: 1 }];
         },
 
         percent(current) {
@@ -17,20 +13,15 @@ export default assign({}, Animations, {
         },
 
         translate(percent) {
-            return [
-                {opacity: 1 - percent},
-                {opacity: percent}
-            ];
-        }
-
+            return [{ opacity: 1 - percent }, { opacity: percent }];
+        },
     },
 
     scale: {
-
         show() {
             return [
-                {opacity: 0, transform: scale3d(1 - .2)},
-                {opacity: 1, transform: scale3d(1)}
+                { opacity: 0, transform: scale3d(1 - 0.2) },
+                { opacity: 1, transform: scale3d(1) },
             ];
         },
 
@@ -40,11 +31,9 @@ export default assign({}, Animations, {
 
         translate(percent) {
             return [
-                {opacity: 1 - percent, transform: scale3d(1 - .2 * percent)},
-                {opacity: percent, transform: scale3d(1 - .2 + .2 * percent)}
+                { opacity: 1 - percent, transform: scale3d(1 - 0.2 * percent) },
+                { opacity: percent, transform: scale3d(1 - 0.2 + 0.2 * percent) },
             ];
-        }
-
-    }
-
-});
+        },
+    },
+};

package/src/js/components/internal/slider-preload.js

@@ -0,0 +1,9 @@
+import Lazyload from '../../mixin/lazyload';
+
+export default {
+    mixins: [Lazyload],
+
+    connected() {
+        this.lazyload(this.slides, this.getAdjacentSlides);
+    },
+};

package/src/js/components/internal/slider-transitioner.js

@@ -1,8 +1,21 @@
-import {translate} from '../../mixin/internal/slideshow-animations';
-import {children, clamp, createEvent, css, Deferred, dimensions, findIndex, includes, isRtl, noop, position, Transition, trigger} from 'uikit-util';
-
-export default function (prev, next, dir, {center, easing, list}) {
-
+import { translate } from '../../mixin/internal/slideshow-animations';
+import {
+    children,
+    clamp,
+    createEvent,
+    css,
+    Deferred,
+    dimensions,
+    findIndex,
+    includes,
+    isRtl,
+    noop,
+    position,
+    Transition,
+    trigger,
+} from 'uikit-util';
+
+export default function (prev, next, dir, { center, easing, list }) {
     const deferred = new Deferred();
 
     const from = prev
@@ -13,26 +26,32 @@ export default function (prev, next, dir, {center, easing, list}) {
         : from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
 
     return {
-
         dir,
 
         show(duration, percent = 0, linear) {
-
             const timing = linear ? 'linear' : easing;
             duration -= Math.round(duration * clamp(percent, -1, 1));
 
             this.translate(percent);
 
             percent = prev ? percent : clamp(percent, 0, 1);
-            triggerUpdate(this.getItemIn(), 'itemin', {percent, duration, timing, dir});
-            prev && triggerUpdate(this.getItemIn(true), 'itemout', {percent: 1 - percent, duration, timing, dir});
+            triggerUpdate(this.getItemIn(), 'itemin', { percent, duration, timing, dir });
+            prev &&
+                triggerUpdate(this.getItemIn(true), 'itemout', {
+                    percent: 1 - percent,
+                    duration,
+                    timing,
+                    dir,
+                });
 
-            Transition
-                .start(list, {transform: translate(-to * (isRtl ? -1 : 1), 'px')}, duration, timing)
-                .then(deferred.resolve, noop);
+            Transition.start(
+                list,
+                { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
+                duration,
+                timing
+            ).then(deferred.resolve, noop);
 
             return deferred.promise;
-
         },
 
         cancel() {
@@ -49,14 +68,20 @@ export default function (prev, next, dir, {center, easing, list}) {
         },
 
         translate(percent) {
-
             const distance = this.getDistance() * dir * (isRtl ? -1 : 1);
 
-            css(list, 'transform', translate(clamp(
-                -to + (distance - distance * percent),
-                -getWidth(list),
-                dimensions(list).width
-            ) * (isRtl ? -1 : 1), 'px'));
+            css(
+                list,
+                'transform',
+                translate(
+                    clamp(
+                        -to + (distance - distance * percent),
+                        -getWidth(list),
+                        dimensions(list).width
+                    ) * (isRtl ? -1 : 1),
+                    'px'
+                )
+            );
 
             const actives = this.getActives();
             const itemIn = this.getItemIn();
@@ -64,28 +89,28 @@ export default function (prev, next, dir, {center, easing, list}) {
 
             percent = prev ? clamp(percent, -1, 1) : 0;
 
-            children(list).forEach(slide => {
+            for (const slide of children(list)) {
                 const isActive = includes(actives, slide);
                 const isIn = slide === itemIn;
                 const isOut = slide === itemOut;
-                const translateIn = isIn || !isOut && (isActive || dir * (isRtl ? -1 : 1) === -1 ^ getElLeft(slide, list) > getElLeft(prev || next));
+                const translateIn =
+                    isIn ||
+                    (!isOut &&
+                        (isActive ||
+                            (dir * (isRtl ? -1 : 1) === -1) ^
+                                (getElLeft(slide, list) > getElLeft(prev || next))));
 
                 triggerUpdate(slide, `itemtranslate${translateIn ? 'in' : 'out'}`, {
                     dir,
-                    percent: isOut
-                        ? 1 - percent
-                        : isIn
-                            ? percent
-                            : isActive
-                                ? 1
-                                : 0
+                    percent: isOut ? 1 - percent : isIn ? percent : isActive ? 1 : 0,
                 });
-            });
-
+            }
         },
 
         percent() {
-            return Math.abs((css(list, 'transform').split(',')[4] * (isRtl ? -1 : 1) + from) / (to - from));
+            return Math.abs(
+                (css(list, 'transform').split(',')[4] * (isRtl ? -1 : 1) + from) / (to - from)
+            );
         },
 
         getDistance() {
@@ -93,7 +118,6 @@ export default function (prev, next, dir, {center, easing, list}) {
         },
 
         getItemIn(out = false) {
-
             let actives = this.getActives();
             let nextActives = inView(list, getLeft(next || prev, list, center));
 
@@ -103,26 +127,19 @@ export default function (prev, next, dir, {center, easing, list}) {
                 nextActives = temp;
             }
 
-            return nextActives[findIndex(nextActives, el => !includes(actives, el))];
-
+            return nextActives[findIndex(nextActives, (el) => !includes(actives, el))];
         },
 
         getActives() {
             return inView(list, getLeft(prev || next, list, center));
-        }
-
+        },
     };
-
 }
 
 function getLeft(el, list, center) {
-
     const left = getElLeft(el, list);
 
-    return center
-        ? left - centerEl(el, list)
-        : Math.min(left, getMax(list));
-
+    return center ? left - centerEl(el, list) : Math.min(left, getMax(list));
 }
 
 export function getMax(list) {
@@ -138,16 +155,20 @@ function centerEl(el, list) {
 }
 
 export function getElLeft(el, list) {
-    return el && (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) * (isRtl ? -1 : 1) || 0;
+    return (
+        (el &&
+            (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) *
+                (isRtl ? -1 : 1)) ||
+        0
+    );
 }
 
 function inView(list, listLeft) {
-
     listLeft -= 1;
     const listWidth = dimensions(list).width;
     const listRight = listLeft + listWidth + 2;
 
-    return children(list).filter(slide => {
+    return children(list).filter((slide) => {
         const slideLeft = getElLeft(slide, list);
         const slideRight = slideLeft + Math.min(dimensions(slide).width, listWidth);