uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/js/components/notification.js

@@ -1,8 +1,21 @@
 import Container from '../mixin/container';
-import {$, append, apply, closest, css, parent, pointerEnter, pointerLeave, remove, startsWith, toFloat, Transition, trigger} from 'uikit-util';
+import {
+    $,
+    append,
+    apply,
+    closest,
+    css,
+    parent,
+    pointerEnter,
+    pointerLeave,
+    remove,
+    startsWith,
+    toFloat,
+    Transition,
+    trigger,
+} from 'uikit-util';
 
 export default {
-
     mixins: [Container],
 
     functional: true,
@@ -17,53 +30,53 @@ export default {
         pos: 'top-center',
         clsContainer: 'uk-notification',
         clsClose: 'uk-notification-close',
-        clsMsg: 'uk-notification-message'
+        clsMsg: 'uk-notification-message',
     },
 
     install,
 
     computed: {
-
-        marginProp({pos}) {
+        marginProp({ pos }) {
             return `margin${startsWith(pos, 'top') ? 'Top' : 'Bottom'}`;
         },
 
         startProps() {
-            return {opacity: 0, [this.marginProp]: -this.$el.offsetHeight};
-        }
-
+            return { opacity: 0, [this.marginProp]: -this.$el.offsetHeight };
+        },
     },
 
     created() {
-
-        const container = $(`.${this.clsContainer}-${this.pos}`, this.container)
-            || append(this.container, `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"></div>`);
-
-        this.$mount(append(container,
-            `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
+        const container =
+            $(`.${this.clsContainer}-${this.pos}`, this.container) ||
+            append(
+                this.container,
+                `<div class="${this.clsContainer} ${this.clsContainer}-${this.pos}" style="display: block"></div>`
+            );
+
+        this.$mount(
+            append(
+                container,
+                `<div class="${this.clsMsg}${this.status ? ` ${this.clsMsg}-${this.status}` : ''}">
                 <a href class="${this.clsClose}" data-uk-close></a>
                 <div>${this.message}</div>
             </div>`
-        ));
-
+            )
+        );
     },
 
-    connected() {
-
+    async connected() {
         const margin = toFloat(css(this.$el, this.marginProp));
-        Transition.start(
-            css(this.$el, this.startProps),
-            {opacity: 1, [this.marginProp]: margin}
-        ).then(() => {
-            if (this.timeout) {
-                this.timer = setTimeout(this.close, this.timeout);
-            }
+        await Transition.start(css(this.$el, this.startProps), {
+            opacity: 1,
+            [this.marginProp]: margin,
         });
 
+        if (this.timeout) {
+            this.timer = setTimeout(this.close, this.timeout);
+        }
     },
 
     events: {
-
         click(e) {
             if (closest(e.target, 'a[href="#"],a[href=""]')) {
                 e.preventDefault();
@@ -81,45 +94,38 @@ export default {
             if (this.timeout) {
                 this.timer = setTimeout(this.close, this.timeout);
             }
-        }
-
+        },
     },
 
     methods: {
-
-        close(immediate) {
-
-            const removeFn = el => {
-
+        async close(immediate) {
+            const removeFn = (el) => {
                 const container = parent(el);
 
                 trigger(el, 'close', [this]);
                 remove(el);
 
-                if (container && !container.hasChildNodes()) {
+                if (!container?.hasChildNodes()) {
                     remove(container);
                 }
-
             };
 
             if (this.timer) {
                 clearTimeout(this.timer);
             }
 
-            if (immediate) {
-                removeFn(this.$el);
-            } else {
-                Transition.start(this.$el, this.startProps).then(removeFn);
+            if (!immediate) {
+                await Transition.start(this.$el, this.startProps);
             }
-        }
-
-    }
 
+            removeFn(this.$el);
+        },
+    },
 };
 
 function install(UIkit) {
     UIkit.notification.closeAll = function (group, immediate) {
-        apply(document.body, el => {
+        apply(document.body, (el) => {
             const notification = UIkit.getComponent(el, 'notification');
             if (notification && (!group || group === notification.group)) {
                 notification.close(immediate);

package/src/js/components/parallax.js

@@ -1,8 +1,7 @@
 import Parallax from '../mixin/parallax';
-import {css, parent, query, scrolledOver, toPx} from 'uikit-util';
+import { css, parent, query, scrolledOver, toPx } from 'uikit-util';
 
 export default {
-
     mixins: [Parallax],
 
     props: {
@@ -10,7 +9,7 @@ export default {
         viewport: Number, // Deprecated
         easing: Number,
         start: String,
-        end: String
+        end: String,
     },
 
     data: {
@@ -18,34 +17,30 @@ export default {
         viewport: 1,
         easing: 1,
         start: 0,
-        end: 0
+        end: 0,
     },
 
     computed: {
-
-        target({target}, $el) {
-            return getOffsetElement(target && query(target, $el) || $el);
+        target({ target }, $el) {
+            return getOffsetElement((target && query(target, $el)) || $el);
         },
 
-        start({start}) {
+        start({ start }) {
             return toPx(start, 'height', this.target, true);
         },
 
-        end({end, viewport}) {
+        end({ end, viewport }) {
             return toPx(
-                end || (viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`,
+                end || ((viewport = (1 - viewport) * 100) && `${viewport}vh+${viewport}%`),
                 'height',
                 this.target,
                 true
             );
-        }
-
+        },
     },
 
     update: {
-
-        read({percent}, types) {
-
+        read({ percent }, types) {
             if (!types.has('scroll')) {
                 percent = false;
             }
@@ -59,37 +54,28 @@ export default {
 
             return {
                 percent,
-                style: prev === percent ? false : this.getCss(percent)
+                style: prev === percent ? false : this.getCss(percent),
             };
         },
 
-        write({style}) {
-
+        write({ style }) {
             if (!this.matchMedia) {
                 this.reset();
                 return;
             }
 
             style && css(this.$el, style);
-
         },
 
-        events: ['scroll', 'resize']
-    }
-
+        events: ['scroll', 'resize'],
+    },
 };
 
 function ease(percent, easing) {
-    return easing >= 0
-        ? Math.pow(percent, easing + 1)
-        : 1 - Math.pow(1 - percent, -easing + 1);
+    return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, -easing + 1);
 }
 
 // SVG elements do not inherit from HTMLElement
 function getOffsetElement(el) {
-    return el
-        ? 'offsetTop' in el
-            ? el
-            : getOffsetElement(parent(el))
-        : document.documentElement;
+    return el ? ('offsetTop' in el ? el : getOffsetElement(parent(el))) : document.documentElement;
 }

package/src/js/components/slider-parallax.js

@@ -1,24 +1,20 @@
 import Parallax from '../mixin/parallax';
-import {css, endsWith, fastdom, noop, query, Transition} from 'uikit-util';
+import { css, endsWith, fastdom, noop, query, Transition } from 'uikit-util';
 
 export default {
-
     mixins: [Parallax],
 
     data: {
-        selItem: '!li'
+        selItem: '!li',
     },
 
     computed: {
-
-        item({selItem}, $el) {
+        item({ selItem }, $el) {
             return query(selItem, $el);
-        }
-
+        },
     },
 
     events: [
-
         {
             name: 'itemin itemout',
 
@@ -28,18 +24,16 @@ export default {
                 return this.item;
             },
 
-            handler({type, detail: {percent, duration, timing, dir}}) {
-
+            handler({ type, detail: { percent, duration, timing, dir } }) {
                 fastdom.read(() => {
                     const propsFrom = this.getCss(getCurrentPercent(type, dir, percent));
-                    const propsTo = this.getCss(isIn(type) ? .5 : dir > 0 ? 1 : 0);
+                    const propsTo = this.getCss(isIn(type) ? 0.5 : dir > 0 ? 1 : 0);
                     fastdom.write(() => {
                         css(this.$el, propsFrom);
                         Transition.start(this.$el, propsTo, duration, timing).catch(noop);
                     });
                 });
-
-            }
+            },
         },
 
         {
@@ -53,8 +47,7 @@ export default {
 
             handler() {
                 Transition.cancel(this.$el);
-            }
-
+            },
         },
 
         {
@@ -66,16 +59,14 @@ export default {
                 return this.item;
             },
 
-            handler({type, detail: {percent, dir}}) {
+            handler({ type, detail: { percent, dir } }) {
                 fastdom.read(() => {
                     const props = this.getCss(getCurrentPercent(type, dir, percent));
                     fastdom.write(() => css(this.$el, props));
                 });
-            }
-        }
-
-    ]
-
+            },
+        },
+    ],
 };
 
 function isIn(type) {
@@ -83,8 +74,7 @@ function isIn(type) {
 }
 
 function getCurrentPercent(type, dir, percent) {
-
     percent /= 2;
 
-    return isIn(type) ^ dir < 0 ? percent : 1 - percent;
+    return isIn(type) ^ (dir < 0) ? percent : 1 - percent;
 }