uikit 3.15.2-dev.07fe5036e → 3.15.3-dev.45f4472ed

package/dist/js/uikit.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.2-dev.07fe5036e | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.15.3-dev.45f4472ed | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2730,7 +2730,7 @@
     function initChildListObserver(component) {
       const { el } = component.$options;
 
-      const observer = new MutationObserver(() => component.$emit());
+      const observer = new MutationObserver(() => component._callWatches());
       observer.observe(el, {
         childList: true,
         subtree: true });
@@ -2945,7 +2945,7 @@
     UIkit.data = '__uikit__';
     UIkit.prefix = 'uk-';
     UIkit.options = {};
-    UIkit.version = '3.15.2-dev.07fe5036e';
+    UIkit.version = '3.15.3-dev.45f4472ed';
 
     globalAPI(UIkit);
     hooksAPI(UIkit);
@@ -3100,7 +3100,6 @@
             const done = () => {
               removeClass(el, cls);
               trigger(el, show ? 'shown' : 'hidden', [this]);
-              this.$update(el);
             };
 
             return promise ?
@@ -3145,7 +3144,6 @@
 
           if (changed) {
             trigger(el, 'toggled', [toggled, this]);
-            this.$update(el);
           }
         } } };
 
@@ -3561,7 +3559,7 @@
 
 
       resizeTargets() {
-        return [this.$el, parent(this.$el)];
+        return [this.$el, getPositionedParent(this.$el) || parent(this.$el)];
       },
 
       update: {
@@ -6826,8 +6824,6 @@
           trigger(el, inview ? 'inview' : 'outview');
 
           state.inview = inview;
-
-          this.$update(el);
         } } };
 
     var scrollspyNav = {
@@ -7875,10 +7871,10 @@
 
       const wrapIndexFn = (fn) => () => index === transitionIndex(target) ? fn() : Promise.reject();
 
-      const leaveFn = wrapIndexFn(() => {
+      const leaveFn = wrapIndexFn(async () => {
         addClass(target, clsLeave);
 
-        return Promise.all(
+        await Promise.all(
         getTransitionNodes(target).map(
         (child, i) =>
         new Promise((resolve) =>
@@ -7887,14 +7883,16 @@
         Transition.start(child, propsOut, duration / 2, 'ease').then(
         resolve),
 
-        i * stagger)))).
+        i * stagger))));
+
 
 
 
-        then(() => removeClass(target, clsLeave));
+
+        removeClass(target, clsLeave);
       });
 
-      const enterFn = wrapIndexFn(() => {
+      const enterFn = wrapIndexFn(async () => {
         const oldHeight = height(target);
 
         addClass(target, clsEnter);
@@ -7903,53 +7901,42 @@
         css(children(target), { opacity: 0 });
 
         // Ensure UIkit updates have propagated
-        return new Promise((resolve) =>
-        requestAnimationFrame(() => {
-          const nodes = children(target);
-          const newHeight = height(target);
-
-          // Ensure Grid cells do not stretch when height is applied
-          css(target, 'alignContent', 'flex-start');
-          height(target, oldHeight);
-
-          const transitionNodes = getTransitionNodes(target);
-          css(nodes, propsOut);
-
-          const transitions = transitionNodes.map(
-          (child, i) =>
-          new Promise((resolve) =>
-          setTimeout(
-          () =>
-          Transition.start(child, propsIn, duration / 2, 'ease').then(
-          resolve),
-
-          i * stagger)));
+        await awaitFrame$1();
 
+        const nodes = children(target);
+        const newHeight = height(target);
 
+        // Ensure Grid cells do not stretch when height is applied
+        css(target, 'alignContent', 'flex-start');
+        height(target, oldHeight);
 
+        const transitionNodes = getTransitionNodes(target);
+        css(nodes, propsOut);
 
-          if (oldHeight !== newHeight) {
-            transitions.push(
-            Transition.start(
-            target,
-            { height: newHeight },
-            duration / 2 + transitionNodes.length * stagger,
-            'ease'));
+        const transitions = transitionNodes.map(async (child, i) => {
+          await awaitTimeout(i * stagger);
+          await Transition.start(child, propsIn, duration / 2, 'ease');
+        });
 
+        if (oldHeight !== newHeight) {
+          transitions.push(
+          Transition.start(
+          target,
+          { height: newHeight },
+          duration / 2 + transitionNodes.length * stagger,
+          'ease'));
 
-          }
 
-          Promise.all(transitions).then(() => {
-            removeClass(target, clsEnter);
-            if (index === transitionIndex(target)) {
-              css(target, { height: '', alignContent: '' });
-              css(nodes, { opacity: '' });
-              delete target.dataset.transition;
-            }
-            resolve();
-          });
-        }));
+        }
 
+        await Promise.all(transitions).then(() => {
+          removeClass(target, clsEnter);
+          if (index === transitionIndex(target)) {
+            css(target, { height: '', alignContent: '' });
+            css(nodes, { opacity: '' });
+            delete target.dataset.transition;
+          }
+        });
       });
 
       return hasClass(target, clsLeave) ?
@@ -7991,63 +7978,62 @@
 
     }
 
-    function slide (action, target, duration) {
-      return new Promise((resolve) =>
-      requestAnimationFrame(() => {
-        let nodes = children(target);
+    function awaitFrame$1() {
+      return new Promise((resolve) => requestAnimationFrame(resolve));
+    }
 
-        // Get current state
-        const currentProps = nodes.map((el) => getProps(el, true));
-        const targetProps = css(target, ['height', 'padding']);
+    function awaitTimeout(timeout) {
+      return new Promise((resolve) => setTimeout(resolve, timeout));
+    }
 
-        // Cancel previous animations
-        Transition.cancel(target);
-        nodes.forEach(Transition.cancel);
-        reset(target);
+    async function slide (action, target, duration) {
+      await awaitFrame();
 
-        // Adding, sorting, removing nodes
-        action();
+      let nodes = children(target);
 
-        // Find new nodes
-        nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
-
-        // Wait for update to propagate
-        Promise.resolve().then(() => {
-          // Force update
-          fastdom.flush();
-
-          // Get new state
-          const targetPropsTo = css(target, ['height', 'padding']);
-          const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
-
-          // Reset to previous state
-          nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
-          css(target, { 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);
-          });
-        });
-      }));
+      // Get current state
+      const currentProps = nodes.map((el) => getProps(el, true));
+      const targetProps = css(target, ['height', 'padding']);
+
+      // Cancel previous animations
+      Transition.cancel(target);
+      nodes.forEach(Transition.cancel);
+      reset(target);
+
+      // Adding, sorting, removing nodes
+      action();
+
+      // Find new nodes
+      nodes = nodes.concat(children(target).filter((el) => !includes(nodes, el)));
 
+      // Wait for update to propagate
+      await Promise.resolve();
+
+      // Force update
+      fastdom.flush();
+
+      // Get new state
+      const targetPropsTo = css(target, ['height', 'padding']);
+      const [propsTo, propsFrom] = getTransitionProps(target, nodes, currentProps);
+
+      // Reset to previous state
+      nodes.forEach((el, i) => propsFrom[i] && css(el, propsFrom[i]));
+      css(target, { display: 'block', ...targetProps });
+
+      // Start transitions on next frame
+      await awaitFrame();
+
+      const transitions = nodes.
+      map((el, i) => parent(el) === target && Transition.start(el, propsTo[i], duration, 'ease')).
+      concat(Transition.start(target, targetPropsTo, duration, 'ease'));
+
+      await Promise.all(transitions).then(() => {
+        nodes.forEach(
+        (el, i) =>
+        parent(el) === target && css(el, 'display', propsTo[i].opacity === 0 ? 'none' : ''));
+
+        reset(target);
+      }, noop);
     }
 
     function getProps(el, opacity) {
@@ -8126,6 +8112,10 @@
       return { top, left, height, width, marginLeft, marginTop, transform: '' };
     }
 
+    function awaitFrame() {
+      return new Promise((resolve) => requestAnimationFrame(resolve));
+    }
+
     var Animate = {
       props: {
         duration: Number,
@@ -8183,7 +8173,7 @@
           },
 
           watch() {
-            this.updateState();
+            this.$emit();
 
             if (this.selActive !== false) {
               const actives = $$(this.selActive, this.$el);
@@ -8201,7 +8191,7 @@
 
           watch(list, old) {
             if (old && !isEqualList(list, old)) {
-              this.updateState();
+              this.$emit();
             }
           },
 
@@ -8209,6 +8199,12 @@
 
 
 
+      update: {
+        write() {
+          this.setState(this.getState(), false);
+        } },
+
+
       events: [
       {
         name: 'click',
@@ -8248,25 +8244,18 @@
 
           trigger(this.$el, 'beforeFilter', [this, state]);
 
-          this.toggles.forEach((el) =>
-          toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state)));
-
+          for (const el of this.toggles) {
+            toggleClass(el, this.cls, !!matchFilter(el, this.attrItem, state));
+          }
 
           await Promise.all(
           $$(this.target, this.$el).map((target) => {
-            const filterFn = () => {
-              applyState(state, target, children(target));
-              this.$update(this.$el);
-            };
+            const filterFn = () => applyState(state, target, children(target));
             return animate ? this.animate(filterFn, target) : filterFn();
           }));
 
 
           trigger(this.$el, 'afterFilter', [this]);
-        },
-
-        updateState() {
-          fastdom.write(() => this.setState(this.getState(), false));
         } } };
 
 
@@ -8898,7 +8887,7 @@
           },
 
           watch() {
-            this.$reset();
+            this.$emit('resize');
           } },
 
 
@@ -10081,6 +10070,8 @@
 
           if (!~this.prevIndex || this.index !== index) {
             this.show(index);
+          } else {
+            this._translate(1, this.prevIndex, this.index);
           }
         },