uikit 3.16.16-dev.eede5abfb → 3.16.17-dev.8404b30b4

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.16.16-dev.eede5abfb",
+  "version": "3.16.17-dev.8404b30b4",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -27,22 +27,22 @@
     "camelcase": "^7.0.1",
     "clean-css": "^5.3.2",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.17.14",
-    "eslint": "^8.36.0",
+    "esbuild": "^0.17.18",
+    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "fs-extra": "^11.1.1",
-    "glob": "^10.0.0",
-    "inquirer": "^9.1.5",
+    "glob": "^10.2.2",
+    "inquirer": "^9.2.2",
     "less": "^4.1.3",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",
     "p-limit": "^4.0.0",
-    "prettier": "^2.8.7",
-    "rollup": "^3.20.2",
+    "prettier": "^2.8.8",
+    "rollup": "^3.21.5",
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-modify": "^3.0.0",
-    "rtlcss": "^4.0.0",
-    "semver": "^7.3.8",
+    "rtlcss": "^4.1.0",
+    "semver": "^7.5.0",
     "svgo": "^3.0.2",
     "watch-run": "^1.2.5"
   },

package/src/js/api/global.js

@@ -27,7 +27,7 @@ export default function (App) {
     };
 
     App.extend = function (options) {
-        options = options || {};
+        options ||= {};
 
         const Super = this;
         const Sub = function UIkitComponent(options) {

package/src/js/components/filter.js

@@ -29,12 +29,12 @@ export default {
     args: 'target',
 
     props: {
-        target: Boolean,
+        target: String,
         selActive: Boolean,
     },
 
     data: {
-        target: null,
+        target: '',
         selActive: false,
         attrItem: 'uk-filter-control',
         cls: 'uk-active',

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

@@ -4,7 +4,6 @@ import {
     clamp,
     createEvent,
     css,
-    Deferred,
     dimensions,
     findIndex,
     includes,
@@ -17,8 +16,6 @@ import {
 } from 'uikit-util';
 
 export default function (prev, next, dir, { center, easing, list }) {
-    const deferred = new Deferred();
-
     const from = prev
         ? getLeft(prev, list, center)
         : getLeft(next, list, center) + dimensions(next).width * dir;
@@ -26,6 +23,8 @@ export default function (prev, next, dir, { center, easing, list }) {
         ? getLeft(next, list, center)
         : from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
 
+    let resolve;
+
     return {
         dir,
 
@@ -45,26 +44,27 @@ export default function (prev, next, dir, { center, easing, list }) {
                     dir,
                 });
 
-            Transition.start(
-                list,
-                { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
-                duration,
-                timing
-            ).then(deferred.resolve, noop);
-
-            return deferred.promise;
+            return new Promise((res) => {
+                resolve ||= res;
+                Transition.start(
+                    list,
+                    { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
+                    duration,
+                    timing
+                ).then(resolve, noop);
+            });
         },
 
         cancel() {
-            Transition.cancel(list);
+            return Transition.cancel(list);
         },
 
         reset() {
             css(list, 'transform', '');
         },
 
-        forward(duration, percent = this.percent()) {
-            Transition.cancel(list);
+        async forward(duration, percent = this.percent()) {
+            await this.cancel();
             return this.show(duration, percent, true);
         },
 
@@ -155,7 +155,7 @@ function centerEl(el, list) {
     return dimensions(list).width / 2 - dimensions(el).width / 2;
 }
 
-export function getElLeft(el, list) {
+function getElLeft(el, list) {
     return (
         (el &&
             (position(el).left + (isRtl ? dimensions(el).width - dimensions(list).width : 0)) *

package/src/js/components/slider.js

@@ -93,7 +93,8 @@ export default {
                 if (this.center) {
                     if (
                         left < width / 2 &&
-                        left + slideWidth + dimensions(this.slides[+i + 1]).width / 2 > width / 2
+                        left + slideWidth + dimensions(getIndex(+i + 1, this.slides)).width / 2 >
+                            width / 2
                     ) {
                         sets.push(+i);
                         left = width / 2 - slideWidth / 2;

package/src/js/components/tooltip.js

@@ -43,7 +43,7 @@ export default {
     },
 
     beforeConnect() {
-        this.id = generateId(this);
+        this.id = generateId(this, {});
         this._hasTitle = hasAttr(this.$el, 'title');
         attr(this.$el, {
             title: '',
@@ -77,16 +77,15 @@ export default {
 
             clearTimeout(this.showTimer);
 
-            if (!this.isToggled(this.tooltip || null)) {
-                return;
+            if (this.isToggled(this.tooltip || null)) {
+                await this.toggleElement(this.tooltip, false, false);
             }
 
-            await this.toggleElement(this.tooltip, false, false);
             remove(this.tooltip);
             this.tooltip = null;
         },
 
-        _show() {
+        async _show() {
             this.tooltip = append(
                 this.container,
                 `<div id="${this.id}" class="uk-${this.$options.name}" role="tooltip">
@@ -128,7 +127,9 @@ export default {
                 });
             });
 
-            this.toggleElement(this.tooltip, true);
+            if (!(await this.toggleElement(this.tooltip, true))) {
+                this.hide();
+            }
         },
     },
 

package/src/js/core/accordion.js

@@ -166,7 +166,7 @@ export default {
     },
 
     methods: {
-        async toggle(item, animate) {
+        toggle(item, animate) {
             item = this.items[getIndex(item, this.items)];
             let items = [item];
             const activeItems = filter(this.items, `.${this.clsOpen}`);
@@ -179,7 +179,7 @@ export default {
                 return;
             }
 
-            await Promise.all(
+            return Promise.all(
                 items.map((el) =>
                     this.toggleElement(el, !includes(activeItems, el), (el, show) => {
                         toggleClass(el, this.clsOpen, show);

package/src/js/core/drop.js

@@ -89,8 +89,8 @@ export default {
         },
 
         target({ target, targetX, targetY }, $el) {
-            targetX = targetX || target || this.targetEl;
-            targetY = targetY || target || this.targetEl;
+            targetX ||= target || this.targetEl;
+            targetY ||= target || this.targetEl;
 
             return [
                 targetX === true ? window : query(targetX, $el),

package/src/js/core/modal.js

@@ -2,12 +2,13 @@ import Modal from '../mixin/modal';
 import {
     $,
     addClass,
+    assign,
     css,
-    Deferred,
     hasClass,
     height,
     html,
     isString,
+    noop,
     on,
     removeClass,
 } from 'uikit-util';
@@ -88,8 +89,7 @@ function install({ modal }) {
                     i18n.ok
                 }</button>
             </div>`,
-            options,
-            (deferred) => deferred.resolve()
+            options
         );
     };
 
@@ -105,7 +105,7 @@ function install({ modal }) {
                 </div>
             </form>`,
             options,
-            (deferred) => deferred.reject()
+            () => Promise.reject()
         );
     };
 
@@ -124,7 +124,7 @@ function install({ modal }) {
                 </div>
             </form>`,
             options,
-            (deferred) => deferred.resolve(null),
+            () => null,
             (dialog) => $('input', dialog.$el).value
         );
     };
@@ -134,7 +134,7 @@ function install({ modal }) {
         cancel: 'Cancel',
     };
 
-    function openDialog(tmpl, options, hideFn, submitFn) {
+    function openDialog(tmpl, options, hideFn = noop, submitFn = noop) {
         options = {
             bgClose: false,
             escClose: true,
@@ -144,21 +144,19 @@ function install({ modal }) {
         };
 
         const dialog = modal.dialog(tmpl(options), options);
-        const deferred = new Deferred();
-
-        let resolved = false;
-
-        on(dialog.$el, 'submit', 'form', (e) => {
-            e.preventDefault();
-            deferred.resolve(submitFn?.(dialog));
-            resolved = true;
-            dialog.hide();
-        });
 
-        on(dialog.$el, 'hide', () => !resolved && hideFn(deferred));
-
-        deferred.promise.dialog = dialog;
-
-        return deferred.promise;
+        return assign(
+            new Promise((resolve) => {
+                const off = on(dialog.$el, 'hide', () => resolve(hideFn()));
+
+                on(dialog.$el, 'submit', 'form', (e) => {
+                    e.preventDefault();
+                    resolve(submitFn(dialog));
+                    off();
+                    dialog.hide();
+                });
+            }),
+            { dialog }
+        );
     }
 }

package/src/js/core/switcher.js

@@ -79,7 +79,7 @@ export default {
         },
 
         connectChildren() {
-            const index = this.index();
+            let index = Math.max(0, this.index());
             for (const el of this.connects) {
                 children(el).forEach((child, i) => toggleClass(child, this.cls, i === index));
             }
@@ -241,11 +241,11 @@ export default {
 
             const animate = prev >= 0 && prev !== next;
             this.connects.forEach(async ({ children }) => {
-                await this.toggleElement(
-                    toArray(children).filter((child) => hasClass(child, this.cls)),
-                    false,
-                    animate
+                const actives = toArray(children).filter(
+                    (child, i) => i !== active && hasClass(child, this.cls)
                 );
+
+                await this.toggleElement(actives, false, animate);
                 await this.toggleElement(children[active], true, animate);
             });
         },

package/src/js/core/toggle.js

@@ -42,8 +42,8 @@ export default {
     },
 
     computed: {
-        target({ href, target }, $el) {
-            target = queryAll(target || href, $el);
+        target({ target }, $el) {
+            target = queryAll(target || $el.hash, $el);
             return (target.length && target) || [$el];
         },
     },
@@ -217,11 +217,12 @@ export default {
             }
 
             const toggled = this.target.filter(this.isToggled);
-            await this.toggleElement(toggled, false);
-            await this.toggleElement(
-                this.target.filter((el) => !includes(toggled, el)),
-                true
-            );
+            if (await this.toggleElement(toggled, false)) {
+                await this.toggleElement(
+                    this.target.filter((el) => !includes(toggled, el)),
+                    true
+                );
+            }
         },
     },
 };

package/src/js/core/video.js

@@ -48,7 +48,7 @@ export default {
         write({ prev, visible, inView }) {
             if (!visible || (this.inView && !inView)) {
                 pause(this.$el);
-            } else if ((this.autoplay === true && !prev) || (this.inView && inView)) {
+            } else if ((this.autoplay === true && !prev) || inView) {
                 play(this.$el);
             }
         },

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

@@ -1,9 +1,10 @@
-import { clamp, createEvent, css, Deferred, noop, Transition, trigger } from 'uikit-util';
+import { clamp, createEvent, css, noop, Transition, trigger } from 'uikit-util';
 
 export default function Transitioner(prev, next, dir, { animation, easing }) {
     const { percent, translate, show = noop } = animation;
     const props = show(dir);
-    const deferred = new Deferred();
+
+    let resolve;
 
     return {
         dir,
@@ -17,19 +18,20 @@ export default function Transitioner(prev, next, dir, { animation, easing }) {
             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),
-            ]).then(() => {
-                this.reset();
-                deferred.resolve();
-            }, noop);
-
-            return deferred.promise;
+            return new Promise((res) => {
+                resolve ||= res;
+                Promise.all([
+                    Transition.start(next, props[1], duration, timing),
+                    Transition.start(prev, props[0], duration, timing),
+                ]).then(() => {
+                    this.reset();
+                    resolve();
+                }, noop);
+            });
         },
 
         cancel() {
-            Transition.cancel([next, prev]);
+            return Transition.cancel([next, prev]);
         },
 
         reset() {
@@ -38,8 +40,8 @@ export default function Transitioner(prev, next, dir, { animation, easing }) {
             }
         },
 
-        forward(duration, percent = this.percent()) {
-            Transition.cancel([next, prev]);
+        async forward(duration, percent = this.percent()) {
+            await this.cancel();
             return this.show(duration, percent, true);
         },
 

package/src/js/mixin/parallax.js

@@ -1,6 +1,7 @@
 import Media from '../mixin/media';
 import { getMaxPathLength } from '../util/svg';
 import {
+    clamp,
     createEvent,
     css,
     Dimensions,
@@ -78,7 +79,7 @@ export default {
         getCss(percent) {
             const css = { transform: '', filter: '' };
             for (const prop in this.props) {
-                this.props[prop](css, percent);
+                this.props[prop](css, clamp(percent));
             }
             css.willChange = Object.keys(css)
                 .filter((key) => css[key] !== '')

package/src/js/mixin/slider-drag.js

@@ -132,19 +132,18 @@ export default {
             this.dragging = true;
             this.dir = distance < 0 ? 1 : -1;
 
-            const { slides } = this;
-            let { prevIndex } = this;
+            let { slides, prevIndex } = this;
             let dis = Math.abs(distance);
-            let nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
-            let width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
+            let nextIndex = this.getIndex(prevIndex + this.dir);
+            let width = this._getDistance(prevIndex, nextIndex);
 
             while (nextIndex !== prevIndex && dis > width) {
                 this.drag -= width * this.dir;
 
                 prevIndex = nextIndex;
                 dis -= width;
-                nextIndex = this.getIndex(prevIndex + this.dir, prevIndex);
-                width = this._getDistance(prevIndex, nextIndex) || slides[prevIndex].offsetWidth;
+                nextIndex = this.getIndex(prevIndex + this.dir);
+                width = this._getDistance(prevIndex, nextIndex);
             }
 
             this.percent = dis / width;
@@ -222,6 +221,13 @@ export default {
 
             this.drag = this.percent = null;
         },
+
+        _getDistance(prev, next) {
+            return (
+                this._getTransitioner(prev, prev !== next && next).getDistance() ||
+                this.slides[prev].offsetWidth
+            );
+        },
     },
 };
 

package/src/js/mixin/slider-nav.js

@@ -226,7 +226,7 @@ export default {
                         focusEl = button;
                     }
 
-                    focus = focus || matches(button, ':focus');
+                    focus ||= matches(button, ':focus');
                 } else {
                     toggleClass(
                         el,

package/src/js/mixin/slider.js

@@ -3,17 +3,7 @@ import SliderNav from './slider-nav';
 import SliderDrag from './slider-drag';
 import SliderAutoplay from './slider-autoplay';
 import { resize } from '../api/observables';
-import {
-    $,
-    children,
-    clamp,
-    getIndex,
-    hasClass,
-    isNumber,
-    isRtl,
-    removeClass,
-    trigger,
-} from 'uikit-util';
+import { $, children, clamp, getIndex, hasClass, isRtl, removeClass, trigger } from 'uikit-util';
 
 export default {
     mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
@@ -181,10 +171,6 @@ export default {
             );
         },
 
-        _getDistance(prev, next) {
-            return this._getTransitioner(prev, prev !== next && next).getDistance();
-        },
-
         _translate(percent, prev = this.prevIndex, next = this.index) {
             const transitioner = this._getTransitioner(prev === next ? false : prev, next);
             transitioner.translate(percent);
@@ -198,8 +184,8 @@ export default {
             options = this.transitionOptions
         ) {
             return new this.Transitioner(
-                isNumber(prev) ? this.slides[prev] : prev,
-                isNumber(next) ? this.slides[next] : next,
+                this.slides[prev] || prev,
+                this.slides[next] || next,
                 dir * (isRtl ? -1 : 1),
                 options
             );

package/src/js/mixin/togglable.js

@@ -9,7 +9,6 @@ import {
     isBoolean,
     isFunction,
     isVisible,
-    noop,
     removeClass,
     startsWith,
     toFloat,
@@ -54,9 +53,9 @@ export default {
     },
 
     methods: {
-        toggleElement(targets, toggle, animate) {
-            return new Promise((resolve) =>
-                Promise.all(
+        async toggleElement(targets, toggle, animate) {
+            try {
+                await Promise.all(
                     toNodes(targets).map((el) => {
                         const show = isBoolean(toggle) ? toggle : !this.isToggled(el);
 
@@ -92,8 +91,11 @@ export default {
                               })
                             : done();
                     })
-                ).then(resolve, noop)
-            );
+                );
+                return true;
+            } catch (e) {
+                return false;
+            }
         },
 
         isToggled(el = this.$el) {

package/src/js/util/lang.js

@@ -278,12 +278,3 @@ export function memoize(fn) {
     const cache = Object.create(null);
     return (key) => cache[key] || (cache[key] = fn(key));
 }
-
-export class Deferred {
-    constructor() {
-        this.promise = new Promise((resolve, reject) => {
-            this.reject = reject;
-            this.resolve = resolve;
-        });
-    }
-}

package/tests/modal.html

@@ -457,37 +457,38 @@
         </div>
 
         <script>
-            const {on} = UIkit.util;
+            const { modal, util: { on } } = UIkit;
 
             on('#js-modal-dialog', 'click', e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>');
+                modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>');
             });
 
-            on('#js-modal-alert', 'click', e => {
+            on('#js-modal-alert', 'click', async e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.alert('UIkit alert!').then(() =>
-                    console.log('Alert closed.')
-                );
+                await modal.alert('UIkit alert!');
+                console.log('Alert closed.');
             });
 
-            on('#js-modal-confirm', 'click', e => {
+            on('#js-modal-confirm', 'click', async e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.confirm('UIkit confirm!').then(
-                    () => console.log('Confirmed.'),
-                    () => console.log('Rejected.')
-                );
+
+                try {
+                    await modal.confirm('UIkit confirm!');
+                    console.log('Confirmed.');
+                } catch (e) {
+                    console.log('Rejected.')
+                }
             });
 
-            on('#js-modal-prompt', 'click', e => {
+            on('#js-modal-prompt', 'click', async e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.prompt('Name:', 'Your name').then(name =>
-                    console.log('Prompted:', name)
-                );
+                const name = await modal.prompt('Name:', 'Your name');
+                console.log('Prompted:', name);
             });
 
           </script>