uikit 3.11.2-dev.c2430c233 → 3.11.2-dev.c7ed3c19b

package/src/js/mixin/internal/animate-slide.js

@@ -1,14 +1,25 @@
-import {assign, children, css, fastdom, includes, index, isVisible, noop, offset, parent, position, Promise, Transition} from 'uikit-util';
+import {
+    assign,
+    children,
+    css,
+    fastdom,
+    includes,
+    index,
+    isVisible,
+    noop,
+    offset,
+    parent,
+    position,
+    Transition,
+} from 'uikit-util';
 
 export default function (action, target, duration) {
-
-    return new Promise(resolve =>
+    return new Promise((resolve) =>
         requestAnimationFrame(() => {
-
             let nodes = children(target);
 
             // Get current state
-            const currentProps = nodes.map(el => getProps(el, true));
+            const currentProps = nodes.map((el) => getProps(el, true));
             const targetProps = css(target, ['height', 'padding']);
 
             // Cancel previous animations
@@ -20,11 +31,10 @@ export default function (action, target, duration) {
             action();
 
             // Find new nodes
-            nodes = nodes.concat(children(target).filter(el => !includes(nodes, el)));
+            nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
 
             // Wait for update to propagate
             Promise.resolve().then(() => {
-
                 // Force update
                 fastdom.flush();
 
@@ -34,53 +44,63 @@ export default function (action, target, duration) {
 
                 // Reset to previous state
                 nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-                css(target, assign({display: 'block'}, targetProps));
+                css(target, assign({ display: 'block' }, targetProps));
 
                 // Start transitions on next frame
                 requestAnimationFrame(() => {
-
-                    const transitions = nodes.map((el, i) =>
-                            parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease')
-                        ).concat(Transition.start(target, targetPropsTo, duration, 'ease'));
-
-                    Promise.all(transitions).then(() => {
-                        nodes.forEach((el, i) => parent(el) === target && css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
-                        reset(target);
-                    }, noop).then(resolve);
-
+                    const transitions = nodes
+                        .map(
+                            (el, i) =>
+                                parent(el) === target &&
+                                Transition.start(el, propsTo[i], duration, 'ease')
+                        )
+                        .concat(Transition.start(target, targetPropsTo, duration, 'ease'));
+
+                    Promise.all(transitions)
+                        .then(() => {
+                            nodes.forEach(
+                                (el, i) =>
+                                    parent(el) === target &&
+                                    css(el, 'display', propsTo[i].opacity === 0 ? 'none' : '')
+                            );
+                            reset(target);
+                        }, noop)
+                        .then(resolve);
                 });
             });
-        }));
+        })
+    );
 }
 
 function getProps(el, opacity) {
-
     const zIndex = css(el, 'zIndex');
 
     return isVisible(el)
-        ? assign({
-            display: '',
-            opacity: opacity ? css(el, 'opacity') : '0',
-            pointerEvents: 'none',
-            position: 'absolute',
-            zIndex: zIndex === 'auto' ? index(el) : zIndex
-        }, getPositionWithMargin(el))
+        ? assign(
+              {
+                  display: '',
+                  opacity: opacity ? css(el, 'opacity') : '0',
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                  zIndex: zIndex === 'auto' ? index(el) : zIndex,
+              },
+              getPositionWithMargin(el)
+          )
         : false;
 }
 
 function getTransitionProps(target, nodes, currentProps) {
-
     const propsTo = nodes.map((el, i) =>
         parent(el) && i in currentProps
             ? currentProps[i]
-            ? isVisible(el)
-                ? getPositionWithMargin(el)
-                : {opacity: 0}
-            : {opacity: isVisible(el) ? 1 : 0}
-            : false);
+                ? isVisible(el)
+                    ? getPositionWithMargin(el)
+                    : { opacity: 0 }
+                : { opacity: isVisible(el) ? 1 : 0 }
+            : false
+    );
 
     const propsFrom = propsTo.map((props, i) => {
-
         const from = parent(nodes[i]) === target && (currentProps[i] || getProps(nodes[i]));
 
         if (!from) {
@@ -90,7 +110,7 @@ function getTransitionProps(target, nodes, currentProps) {
         if (!props) {
             delete from.opacity;
         } else if (!('opacity' in props)) {
-            const {opacity} = from;
+            const { opacity } = from;
 
             if (opacity % 1) {
                 props.opacity = 1;
@@ -117,15 +137,15 @@ function reset(el) {
         marginLeft: '',
         transform: '',
         width: '',
-        zIndex: ''
+        zIndex: '',
     });
-    css(el, {height: '', display: '', padding: ''});
+    css(el, { height: '', display: '', padding: '' });
 }
 
 function getPositionWithMargin(el) {
-    const {height, width} = offset(el);
-    const {top, left} = position(el);
-    const {marginLeft, marginTop} = css(el, ['marginTop', 'marginLeft']);
+    const { height, width } = offset(el);
+    const { top, left } = position(el);
+    const { marginLeft, marginTop } = css(el, ['marginTop', 'marginLeft']);
 
-    return {top, left, height, width, marginLeft, marginTop, transform: ''};
+    return { top, left, height, width, marginLeft, marginTop, transform: '' };
 }

package/src/js/mixin/internal/slideshow-animations.js

@@ -1,14 +1,9 @@
-import {css, isIE} from 'uikit-util';
+import { css } from 'uikit-util';
 
 export default {
-
     slide: {
-
         show(dir) {
-            return [
-                {transform: translate(dir * -100)},
-                {transform: translate()}
-            ];
+            return [{ transform: translate(dir * -100) }, { transform: translate() }];
         },
 
         percent(current) {
@@ -17,13 +12,11 @@ export default {
 
         translate(percent, dir) {
             return [
-                {transform: translate(dir * -100 * percent)},
-                {transform: translate(dir * 100 * (1 - percent))}
+                { transform: translate(dir * -100 * percent) },
+                { transform: translate(dir * 100 * (1 - percent)) },
             ];
-        }
-
-    }
-
+        },
+    },
 };
 
 export function translated(el) {
@@ -32,7 +25,7 @@ export function translated(el) {
 
 export function translate(value = 0, unit = '%') {
     value += value ? unit : '';
-    return isIE ? `translateX(${value})` : `translate3d(${value}, 0, 0)`; // currently, not translate3d in IE, translate3d within translate3d does not work while transitioning
+    return `translate3d(${value}, 0, 0)`;
 }
 
 export function scale3d(value) {

package/src/js/mixin/internal/slideshow-transitioner.js

@@ -1,28 +1,25 @@
-import {clamp, createEvent, css, Deferred, noop, Promise, Transition, trigger} from 'uikit-util';
+import { clamp, createEvent, css, Deferred, noop, Transition, trigger } from 'uikit-util';
 
-export default function Transitioner(prev, next, dir, {animation, easing}) {
-
-    const {percent, translate, show = noop} = animation;
+export default function Transitioner(prev, next, dir, { animation, easing }) {
+    const { percent, translate, show = noop } = animation;
     const props = show(dir);
     const deferred = new Deferred();
 
     return {
-
         dir,
 
         show(duration, percent = 0, linear) {
-
             const timing = linear ? 'linear' : easing;
             duration -= Math.round(duration * clamp(percent, -1, 1));
 
             this.translate(percent);
 
-            triggerUpdate(next, 'itemin', {percent, duration, timing, dir});
-            triggerUpdate(prev, 'itemout', {percent: 1 - percent, duration, timing, dir});
+            triggerUpdate(next, 'itemin', { percent, duration, timing, dir });
+            triggerUpdate(prev, 'itemout', { percent: 1 - percent, duration, timing, dir });
 
             Promise.all([
                 Transition.start(next, props[1], duration, timing),
-                Transition.start(prev, props[0], duration, timing)
+                Transition.start(prev, props[0], duration, timing),
             ]).then(() => {
                 this.reset();
                 deferred.resolve();
@@ -47,15 +44,13 @@ export default function Transitioner(prev, next, dir, {animation, easing}) {
         },
 
         translate(percent) {
-
             this.reset();
 
             const props = translate(percent, dir);
             css(next, props[1]);
             css(prev, props[0]);
-            triggerUpdate(next, 'itemtranslatein', {percent, dir});
-            triggerUpdate(prev, 'itemtranslateout', {percent: 1 - percent, dir});
-
+            triggerUpdate(next, 'itemtranslatein', { percent, dir });
+            triggerUpdate(prev, 'itemtranslateout', { percent: 1 - percent, dir });
         },
 
         percent() {
@@ -63,11 +58,9 @@ export default function Transitioner(prev, next, dir, {animation, easing}) {
         },
 
         getDistance() {
-            return prev && prev.offsetWidth;
-        }
-
+            return prev?.offsetWidth;
+        },
     };
-
 }
 
 function triggerUpdate(el, type, data) {

package/src/js/mixin/media.js

@@ -1,28 +1,23 @@
-import {getCssVar, isString, toFloat} from 'uikit-util';
+import { getCssVar, isString, toFloat } from 'uikit-util';
 
 export default {
-
     props: {
-        media: Boolean
+        media: Boolean,
     },
 
     data: {
-        media: false
+        media: false,
     },
 
     computed: {
-
         matchMedia() {
             const media = toMedia(this.media);
             return !media || window.matchMedia(media).matches;
-        }
-
-    }
-
+        },
+    },
 };
 
 function toMedia(value) {
-
     if (isString(value)) {
         if (value[0] === '@') {
             const name = `breakpoint-${value.substr(1)}`;

package/src/js/mixin/modal.js

@@ -1,4 +1,24 @@
-import {$, addClass, append, attr, css, includes, isFocusable, last, on, once, parent, pointerCancel, pointerDown, pointerUp, Promise, removeClass, toFloat, toMs, width, within} from 'uikit-util';
+import {
+    $,
+    addClass,
+    append,
+    attr,
+    css,
+    includes,
+    isFocusable,
+    last,
+    on,
+    once,
+    parent,
+    pointerCancel,
+    pointerDown,
+    pointerUp,
+    removeClass,
+    toFloat,
+    toMs,
+    width,
+    within,
+} from 'uikit-util';
 import Class from './class';
 import Container from './container';
 import Togglable from './togglable';
@@ -6,7 +26,6 @@ import Togglable from './togglable';
 const active = [];
 
 export default {
-
     mixins: [Class, Container, Togglable],
 
     props: {
@@ -14,7 +33,7 @@ export default {
         selClose: String,
         escClose: Boolean,
         bgClose: Boolean,
-        stack: Boolean
+        stack: Boolean,
     },
 
     data: {
@@ -22,12 +41,11 @@ export default {
         escClose: true,
         bgClose: true,
         overlay: true,
-        stack: false
+        stack: false,
     },
 
     computed: {
-
-        panel({selPanel}, $el) {
+        panel({ selPanel }, $el) {
             return $(selPanel, $el);
         },
 
@@ -35,10 +53,9 @@ export default {
             return this.panel;
         },
 
-        bgClose({bgClose}) {
+        bgClose({ bgClose }) {
             return bgClose && this.panel;
-        }
-
+        },
     },
 
     beforeDisconnect() {
@@ -48,9 +65,7 @@ export default {
     },
 
     events: [
-
         {
-
             name: 'click',
 
             delegate() {
@@ -60,18 +75,15 @@ export default {
             handler(e) {
                 e.preventDefault();
                 this.hide();
-            }
-
+            },
         },
 
         {
-
             name: 'toggle',
 
             self: true,
 
-            handler(e, toggle) {
-
+            handler(e) {
                 if (e.defaultPrevented) {
                     return;
                 }
@@ -81,8 +93,7 @@ export default {
                 if (this.isToggled() === includes(active, this)) {
                     this.toggle();
                 }
-            }
-
+            },
         },
 
         {
@@ -91,29 +102,25 @@ export default {
             self: true,
 
             handler(e) {
-
                 if (includes(active, this)) {
                     return false;
                 }
 
                 if (!this.stack && active.length) {
-                    Promise.all(active.map(modal => modal.hide())).then(this.show);
+                    Promise.all(active.map((modal) => modal.hide())).then(this.show);
                     e.preventDefault();
                 } else {
                     active.push(this);
                 }
-            }
-
+            },
         },
 
         {
-
             name: 'show',
 
             self: true,
 
             handler() {
-
                 const docEl = document.documentElement;
 
                 if (width(window) > docEl.clientWidth && this.overlay) {
@@ -127,30 +134,50 @@ export default {
                 addClass(docEl, this.clsPage);
 
                 if (this.bgClose) {
-                    once(this.$el, 'hide', on(document, pointerDown, ({target}) => {
-
-                        if (last(active) !== this || this.overlay && !within(target, this.$el) || within(target, this.panel)) {
-                            return;
-                        }
-
-                        once(document, `${pointerUp} ${pointerCancel} scroll`, ({defaultPrevented, type, target: newTarget}) => {
-                            if (!defaultPrevented && type === pointerUp && target === newTarget) {
-                                this.hide();
+                    once(
+                        this.$el,
+                        'hide',
+                        on(document, pointerDown, ({ target }) => {
+                            if (
+                                last(active) !== this ||
+                                (this.overlay && !within(target, this.$el)) ||
+                                within(target, this.panel)
+                            ) {
+                                return;
                             }
-                        }, true);
 
-                    }), {self: true});
+                            once(
+                                document,
+                                `${pointerUp} ${pointerCancel} scroll`,
+                                ({ defaultPrevented, type, target: newTarget }) => {
+                                    if (
+                                        !defaultPrevented &&
+                                        type === pointerUp &&
+                                        target === newTarget
+                                    ) {
+                                        this.hide();
+                                    }
+                                },
+                                true
+                            );
+                        }),
+                        { self: true }
+                    );
                 }
 
                 if (this.escClose) {
-                    once(this.$el, 'hide', on(document, 'keydown', e => {
-                        if (e.keyCode === 27 && last(active) === this) {
-                            this.hide();
-                        }
-                    }), {self: true});
+                    once(
+                        this.$el,
+                        'hide',
+                        on(document, 'keydown', (e) => {
+                            if (e.keyCode === 27 && last(active) === this) {
+                                this.hide();
+                            }
+                        }),
+                        { self: true }
+                    );
                 }
-            }
-
+            },
         },
 
         {
@@ -166,17 +193,15 @@ export default {
                 if (!$(':focus', this.$el)) {
                     this.$el.focus();
                 }
-            }
+            },
         },
 
         {
-
             name: 'hidden',
 
             self: true,
 
             handler() {
-
                 if (includes(active, this)) {
                     active.splice(active.indexOf(this), 1);
                 }
@@ -187,18 +212,14 @@ export default {
 
                 css(this.$el, 'zIndex', '');
 
-                if (!active.some(modal => modal.clsPage === this.clsPage)) {
+                if (!active.some((modal) => modal.clsPage === this.clsPage)) {
                     removeClass(document.documentElement, this.clsPage);
                 }
-
-            }
-
-        }
-
+            },
+        },
     ],
 
     methods: {
-
         toggle() {
             return this.isToggled() ? this.hide() : this.show();
         },
@@ -206,10 +227,8 @@ export default {
         show() {
             if (this.container && parent(this.$el) !== this.container) {
                 append(this.container, this.$el);
-                return new Promise(resolve =>
-                    requestAnimationFrame(() =>
-                        this.show().then(resolve)
-                    )
+                return new Promise((resolve) =>
+                    requestAnimationFrame(() => this.show().then(resolve))
                 );
             }
 
@@ -218,13 +237,11 @@ export default {
 
         hide() {
             return this.toggleElement(this.$el, false, animate(this));
-        }
-
-    }
-
+        },
+    },
 };
 
-function animate({transitionElement, _toggle}) {
+function animate({ transitionElement, _toggle }) {
     return (el, show) =>
         new Promise((resolve, reject) =>
             once(el, 'show hide', () => {
@@ -233,16 +250,22 @@ function animate({transitionElement, _toggle}) {
 
                 _toggle(el, show);
 
-                const off = once(transitionElement, 'transitionstart', () => {
-                    once(transitionElement, 'transitionend transitioncancel', resolve, {self: true});
-                    clearTimeout(timer);
-                }, {self: true});
+                const off = once(
+                    transitionElement,
+                    'transitionstart',
+                    () => {
+                        once(transitionElement, 'transitionend transitioncancel', resolve, {
+                            self: true,
+                        });
+                        clearTimeout(timer);
+                    },
+                    { self: true }
+                );
 
                 const timer = setTimeout(() => {
                     off();
                     resolve();
                 }, toMs(css(transitionElement, 'transitionDuration')));
-
             })
         ).then(() => delete el._reject);
 }