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

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.16.16-dev.eede5abfb | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.16.17-dev.8404b30b4 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -191,14 +191,6 @@
       const cache = /* @__PURE__ */ Object.create(null);
       return (key) => cache[key] || (cache[key] = fn(key));
     }
-    class Deferred {
-      constructor() {
-        this.promise = new Promise((resolve, reject) => {
-          this.reject = reject;
-          this.resolve = resolve;
-        });
-      }
-    }
 
     function attr(element, name, value) {
       var _a;
@@ -1529,7 +1521,6 @@
         $: $,
         $$: $$,
         Animation: Animation,
-        Deferred: Deferred,
         Dimensions: Dimensions,
         MouseTracker: MouseTracker,
         Transition: Transition,
@@ -2159,7 +2150,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.16.16-dev.eede5abfb";
+    App.version = "3.16.17-dev.8404b30b4";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -2237,7 +2228,7 @@
         component2.options = mergeOptions(component2.options, mixin);
       };
       App.extend = function(options) {
-        options = options || {};
+        options || (options = {});
         const Super = this;
         const Sub = function UIkitComponent(options2) {
           init$1(this, options2);
@@ -2435,9 +2426,9 @@
         }
       },
       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);
                 if (!trigger(el, `before${show ? "show" : "hide"}`, [this])) {
@@ -2456,8 +2447,11 @@
                   return Promise.reject();
                 }) : done();
               })
-            ).then(resolve, noop)
-          );
+            );
+            return true;
+          } catch (e) {
+            return false;
+          }
         },
         isToggled(el = this.$el) {
           el = toNode(el);
@@ -2796,7 +2790,7 @@
         }
       },
       methods: {
-        async toggle(item, animate) {
+        toggle(item, animate) {
           item = this.items[getIndex(item, this.items)];
           let items = [item];
           const activeItems = filter$1(this.items, `.${this.clsOpen}`);
@@ -2806,7 +2800,7 @@
           if (!this.collapsible && activeItems.length < 2 && includes(activeItems, item)) {
             return;
           }
-          await Promise.all(
+          return Promise.all(
             items.map(
               (el) => this.toggleElement(el, !includes(activeItems, el), (el2, show) => {
                 toggleClass(el2, this.clsOpen, show);
@@ -2947,7 +2941,7 @@
         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);
           }
         },
@@ -3186,8 +3180,8 @@
           ];
         },
         target({ target, targetX, targetY }, $el) {
-          targetX = targetX || target || this.targetEl;
-          targetY = targetY || target || this.targetEl;
+          targetX || (targetX = target || this.targetEl);
+          targetY || (targetY = target || this.targetEl);
           return [
             targetX === true ? window : query(targetX, $el),
             targetY === true ? window : query(targetY, $el)
@@ -4968,22 +4962,21 @@
       modal.alert = function(message, options) {
         return openDialog(
           ({ i18n }) => `<div class="uk-modal-body">${isString(message) ? message : html(message)}</div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-primary uk-modal-close" autofocus>${i18n.ok}</button> </div>`,
-          options,
-          (deferred) => deferred.resolve()
+          options
         );
       };
       modal.confirm = function(message, options) {
         return openDialog(
           ({ i18n }) => `<form> <div class="uk-modal-body">${isString(message) ? message : html(message)}</div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">${i18n.cancel}</button> <button class="uk-button uk-button-primary" autofocus>${i18n.ok}</button> </div> </form>`,
           options,
-          (deferred) => deferred.reject()
+          () => Promise.reject()
         );
       };
       modal.prompt = function(message, value, options) {
         return openDialog(
           ({ i18n }) => `<form class="uk-form-stacked"> <div class="uk-modal-body"> <label>${isString(message) ? message : html(message)}</label> <input class="uk-input" value="${value || ""}" autofocus> </div> <div class="uk-modal-footer uk-text-right"> <button class="uk-button uk-button-default uk-modal-close" type="button">${i18n.cancel}</button> <button class="uk-button uk-button-primary">${i18n.ok}</button> </div> </form>`,
           options,
-          (deferred) => deferred.resolve(null),
+          () => null,
           (dialog) => $("input", dialog.$el).value
         );
       };
@@ -4991,7 +4984,7 @@
         ok: "Ok",
         cancel: "Cancel"
       };
-      function openDialog(tmpl, options, hideFn, submitFn) {
+      function openDialog(tmpl, options, hideFn = noop, submitFn = noop) {
         options = {
           bgClose: false,
           escClose: true,
@@ -5000,17 +4993,18 @@
           i18n: { ...modal.i18n, ...options == null ? void 0 : options.i18n }
         };
         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 == null ? void 0 : 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 }
+        );
       }
     }
 
@@ -6004,7 +5998,7 @@
           this.$emit();
         },
         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));
           }
@@ -6124,11 +6118,10 @@
           });
           const animate = prev >= 0 && prev !== next;
           this.connects.forEach(async ({ children: children2 }) => {
-            await this.toggleElement(
-              toArray(children2).filter((child) => hasClass(child, this.cls)),
-              false,
-              animate
+            const actives = toArray(children2).filter(
+              (child, i) => i !== active && hasClass(child, this.cls)
             );
+            await this.toggleElement(actives, false, animate);
             await this.toggleElement(children2[active], true, animate);
           });
         }
@@ -6171,8 +6164,8 @@
         queued: true
       },
       computed: {
-        target({ href, target }, $el) {
-          target = queryAll(target || href, $el);
+        target({ target }, $el) {
+          target = queryAll(target || $el.hash, $el);
           return target.length && target || [$el];
         }
       },
@@ -6297,11 +6290,12 @@
             return;
           }
           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
+            );
+          }
         }
       }
     };
@@ -6648,11 +6642,11 @@
       mixins: [Animate],
       args: "target",
       props: {
-        target: Boolean,
+        target: String,
         selActive: Boolean
       },
       data: {
-        target: null,
+        target: "",
         selActive: false,
         attrItem: "uk-filter-control",
         cls: "uk-active",
@@ -6856,7 +6850,7 @@
     function Transitioner$1(prev, next, dir, { animation, easing }) {
       const { percent, translate, show = noop } = animation;
       const props = show(dir);
-      const deferred = new Deferred();
+      let resolve;
       return {
         dir,
         show(duration, percent2 = 0, linear) {
@@ -6865,25 +6859,27 @@
           this.translate(percent2);
           triggerUpdate$1(next, "itemin", { percent: percent2, duration, timing, dir });
           triggerUpdate$1(prev, "itemout", { percent: 1 - percent2, 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 || (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() {
           for (const prop in props[0]) {
             css([next, prev], prop, "");
           }
         },
-        forward(duration, percent2 = this.percent()) {
-          Transition.cancel([next, prev]);
+        async forward(duration, percent2 = this.percent()) {
+          await this.cancel();
           return this.show(duration, percent2, true);
         },
         translate(percent2) {
@@ -7066,7 +7062,7 @@
               if (active) {
                 focusEl = button;
               }
-              focus = focus || matches(button, ":focus");
+              focus || (focus = matches(button, ":focus"));
             } else {
               toggleClass(
                 el,
@@ -7162,17 +7158,16 @@
           e.cancelable && e.preventDefault();
           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;
           const prev = slides[prevIndex];
@@ -7228,6 +7223,9 @@
           }
           css(this.list, { userSelect: "", pointerEvents: "" });
           this.drag = this.percent = null;
+        },
+        _getDistance(prev, next) {
+          return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
         }
       }
     };
@@ -7417,9 +7415,6 @@
             this.percent
           );
         },
-        _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);
@@ -7427,8 +7422,8 @@
         },
         _getTransitioner(prev = this.prevIndex, next = this.index, dir = this.dir || 1, 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
           );
@@ -7933,7 +7928,7 @@
         getCss(percent) {
           const css2 = { transform: "", filter: "" };
           for (const prop in this.props) {
-            this.props[prop](css2, percent);
+            this.props[prop](css2, clamp(percent));
           }
           css2.willChange = Object.keys(css2).filter((key) => css2[key] !== "").map(propName).join(",");
           return css2;
@@ -8273,9 +8268,9 @@
     };
 
     function Transitioner(prev, next, dir, { center, easing, list }) {
-      const deferred = new Deferred();
       const from = prev ? getLeft(prev, list, center) : getLeft(next, list, center) + dimensions$1(next).width * dir;
       const to = next ? getLeft(next, list, center) : from + dimensions$1(prev).width * dir * (isRtl ? -1 : 1);
+      let resolve;
       return {
         dir,
         show(duration, percent = 0, linear) {
@@ -8290,22 +8285,24 @@
             timing,
             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 || (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);
         },
         translate(percent) {
@@ -8442,7 +8439,7 @@
               left = 0;
             }
             if (this.center) {
-              if (left < width / 2 && left + slideWidth + dimensions$1(this.slides[+i + 1]).width / 2 > width / 2) {
+              if (left < width / 2 && left + slideWidth + dimensions$1(getIndex(+i + 1, this.slides)).width / 2 > width / 2) {
                 sets.push(+i);
                 left = width / 2 - slideWidth / 2;
               }
@@ -9148,7 +9145,7 @@
         cls: "uk-active"
       },
       beforeConnect() {
-        this.id = generateId(this);
+        this.id = generateId(this, {});
         this._hasTitle = hasAttr(this.$el, "title");
         attr(this.$el, {
           title: "",
@@ -9175,14 +9172,13 @@
             return;
           }
           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$1(this.tooltip);
           this.tooltip = null;
         },
-        _show() {
+        async _show() {
           this.tooltip = append(
             this.container,
             `<div id="${this.id}" class="uk-${this.$options.name}" role="tooltip"> <div class="uk-${this.$options.name}-inner">${this.title}</div> </div>`
@@ -9211,7 +9207,9 @@
               self: true
             });
           });
-          this.toggleElement(this.tooltip, true);
+          if (!await this.toggleElement(this.tooltip, true)) {
+            this.hide();
+          }
         }
       },
       events: {