uikit 3.21.3 → 3.21.4-dev.6a3f9bf26

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.21.3",
+  "version": "3.21.4-dev.6a3f9bf26",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

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

@@ -1,7 +1,6 @@
 import {
     children,
     clamp,
-    createEvent,
     css,
     dimensions,
     findIndex,
@@ -11,9 +10,9 @@ import {
     position,
     sumBy,
     Transition,
-    trigger,
 } from 'uikit-util';
 import { translate } from '../../mixin/internal/slideshow-animations';
+import { triggerUpdate, withResolvers } from '../../mixin/internal/slideshow-transitioner';
 
 export default function (prev, next, dir, { center, easing, list }) {
     const from = prev
@@ -23,7 +22,7 @@ export default function (prev, next, dir, { center, easing, list }) {
         ? getLeft(next, list, center)
         : from + dimensions(prev).width * dir * (isRtl ? -1 : 1);
 
-    let resolve;
+    const { promise, resolve } = withResolvers();
 
     return {
         dir,
@@ -50,15 +49,14 @@ export default function (prev, next, dir, { center, easing, list }) {
                     dir,
                 });
 
-            return new Promise((res) => {
-                resolve ||= res;
-                Transition.start(
-                    list,
-                    { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
-                    duration,
-                    timing,
-                ).then(resolve, noop);
-            });
+            Transition.start(
+                list,
+                { transform: translate(-to * (isRtl ? -1 : 1), 'px') },
+                duration,
+                timing,
+            ).then(resolve, noop);
+
+            return promise;
         },
 
         cancel() {
@@ -186,7 +184,3 @@ function inView(list, listLeft) {
         return slideLeft >= listLeft && slideRight <= listRight;
     });
 }
-
-function triggerUpdate(el, type, data) {
-    trigger(el, createEvent(type, false, false, data));
-}

package/src/js/core/drop.js

@@ -1,9 +1,9 @@
 import {
     $,
+    $$,
     MouseTracker,
     addClass,
     append,
-    apply,
     attr,
     css,
     hasClass,
@@ -321,7 +321,7 @@ export default {
             }
 
             if (active) {
-                if (delay && active.isDelaying) {
+                if (delay && active.isDelaying()) {
                     this.showTimer = setTimeout(() => matches(target, ':hover') && this.show(), 10);
                     return;
                 }
@@ -349,11 +349,8 @@ export default {
             this.clearTimers();
 
             this.isDelayedHide = delay;
-            this.isDelaying = getPositionedElements(this.$el).some((el) =>
-                this.tracker.movesTo(el),
-            );
 
-            if (delay && this.isDelaying) {
+            if (delay && this.isDelaying()) {
                 this.hideTimer = setTimeout(this.hide, 50);
             } else if (delay && this.delayHide) {
                 this.hideTimer = setTimeout(hide, this.delayHide);
@@ -367,13 +364,16 @@ export default {
             clearTimeout(this.hideTimer);
             this.showTimer = null;
             this.hideTimer = null;
-            this.isDelaying = false;
         },
 
         isActive() {
             return active === this;
         },
 
+        isDelaying() {
+            return [this.$el, ...$$('.uk-drop', this.$el)].some((el) => this.tracker.movesTo(el));
+        },
+
         position() {
             removeClass(this.$el, 'uk-drop-stack');
             css(this.$el, this._style);
@@ -443,12 +443,6 @@ export default {
     },
 };
 
-function getPositionedElements(el) {
-    const result = [];
-    apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
-    return result;
-}
-
 function getViewport(el, target) {
     return offsetViewport(overflowParents(target).find((parent) => parent.contains(el)));
 }

package/src/js/core/dropnav.js

@@ -137,7 +137,7 @@ export default {
                     includes(active.mode, 'hover') &&
                     active.targetEl &&
                     !current.contains(active.targetEl) &&
-                    !active.isDelaying
+                    !active.isDelaying()
                 ) {
                     active.hide(false);
                 }

package/src/js/core/scrollspy-nav.js

@@ -18,7 +18,7 @@ export default {
         cls: String,
         closest: Boolean,
         scroll: Boolean,
-        overflow: Boolean,
+        target: String,
         offset: Number,
     },
 
@@ -26,15 +26,15 @@ export default {
         cls: 'uk-active',
         closest: false,
         scroll: false,
-        overflow: true,
+        target: 'a[href]',
         offset: 0,
     },
 
     computed: {
-        links: (_, $el) => $$('a[href*="#"]', $el).filter((el) => el.hash && isSameSiteAnchor(el)),
+        links: ({ target }, $el) => $$(target, $el).filter((el) => isSameSiteAnchor(el)),
 
-        elements({ closest: selector }) {
-            return this.links.map((el) => el.closest(selector || '*'));
+        elements({ closest }) {
+            return this.links.map((el) => el.closest(closest || '*'));
         },
     },
 
@@ -51,7 +51,7 @@ export default {
     update: [
         {
             read() {
-                const targets = this.links.map(getTargetedElement).filter(Boolean);
+                const targets = this.links.map((el) => getTargetedElement(el) || el.ownerDocument);
 
                 const { length } = targets;
 
@@ -68,7 +68,8 @@ export default {
                 if (scrollTop === max) {
                     active = length - 1;
                 } else {
-                    const offsetBy = this.offset + offset(getCoveringElement()).height;
+                    const offsetBy =
+                        this.offset + offset(getCoveringElement()).height + viewport.height * 0.1;
 
                     for (let i = 0; i < targets.length; i++) {
                         if (offset(targets[i]).top - viewport.top - offsetBy > 0) {
@@ -76,10 +77,6 @@ export default {
                         }
                         active = +i;
                     }
-
-                    if (active === false && this.overflow) {
-                        active = 0;
-                    }
                 }
 
                 return { active };

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

@@ -4,7 +4,7 @@ export default function Transitioner(prev, next, dir, { animation, easing }) {
     const { percent, translate, show = noop } = animation;
     const props = show(dir);
 
-    let resolve;
+    const { promise, resolve } = withResolvers();
 
     return {
         dir,
@@ -18,16 +18,15 @@ 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 });
 
-            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);
-            });
+            Promise.all([
+                Transition.start(next, props[1], duration, timing),
+                Transition.start(prev, props[0], duration, timing),
+            ]).then(() => {
+                this.reset();
+                resolve();
+            }, noop);
+
+            return promise;
         },
 
         cancel() {
@@ -65,6 +64,12 @@ export default function Transitioner(prev, next, dir, { animation, easing }) {
     };
 }
 
-function triggerUpdate(el, type, data) {
+export function triggerUpdate(el, type, data) {
     trigger(el, createEvent(type, false, false, data));
 }
+
+// Use Promise.withResolvers() once it becomes baseline
+export function withResolvers() {
+    let resolve;
+    return { promise: new Promise((res) => (resolve = res)), resolve };
+}

package/src/js/mixin/position.js

@@ -12,7 +12,7 @@ import {
 export default {
     props: {
         pos: String,
-        offset: null,
+        offset: Boolean,
         flip: Boolean,
         shift: Boolean,
         inset: Boolean,

package/src/js/mixin/slider.js

@@ -15,6 +15,9 @@ import SliderAutoplay from './slider-autoplay';
 import SliderDrag from './slider-drag';
 import SliderNav from './slider-nav';
 
+const easeOutQuad = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';
+const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
+
 export default {
     mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
 
@@ -178,11 +181,7 @@ export default {
 
         async _show(prev, next, force) {
             this._transitioner = this._getTransitioner(prev, next, this.dir, {
-                easing: force
-                    ? next.offsetWidth < 600
-                        ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
-                        : 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
-                    : this.easing,
+                easing: force ? (next.offsetWidth < 600 ? easeOutQuad : easeOutQuart) : this.easing,
                 ...this.transitionOptions,
             });
 

package/src/less/components/search.less

@@ -47,16 +47,16 @@
 @search-medium-background:                          transparent;
 @search-medium-font-size:                           @global-large-font-size;
 
-@search-medium-icon-width:                          40px;
-@search-medium-icon-padding:                        0;
+@search-medium-icon-width:                          24px;
+@search-medium-icon-padding:                        10px;
 
 @search-large-width:                                500px;
 @search-large-height:                               80px;
 @search-large-background:                           transparent;
 @search-large-font-size:                            @global-2xlarge-font-size;
 
-@search-large-icon-width:                           80px;
-@search-large-icon-padding:                         0;
+@search-large-icon-width:                           40px;
+@search-large-icon-padding:                         20px;
 
 @search-toggle-color:                               @global-muted-color;
 @search-toggle-hover-color:                         @global-color;

package/src/scss/variables-theme.scss

@@ -945,14 +945,14 @@ $search-medium-width: 400px !default;
 $search-medium-height: 40px !default;
 $search-medium-background: transparent !default;
 $search-medium-font-size: $global-large-font-size !default;
-$search-medium-icon-width: 40px !default;
-$search-medium-icon-padding: 0 !default;
+$search-medium-icon-width: 24px !default;
+$search-medium-icon-padding: 10px !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
-$search-large-icon-width: 80px !default;
-$search-large-icon-padding: 0 !default;
+$search-large-icon-width: 40px !default;
+$search-large-icon-padding: 20px !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;

package/src/scss/variables.scss

@@ -943,14 +943,14 @@ $search-medium-width: 400px !default;
 $search-medium-height: 40px !default;
 $search-medium-background: transparent !default;
 $search-medium-font-size: $global-large-font-size !default;
-$search-medium-icon-width: 40px !default;
-$search-medium-icon-padding: 0 !default;
+$search-medium-icon-width: 24px !default;
+$search-medium-icon-padding: 10px !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
-$search-large-icon-width: 80px !default;
-$search-large-icon-padding: 0 !default;
+$search-large-icon-width: 40px !default;
+$search-large-icon-padding: 20px !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;

package/tests/scrollspy.html

@@ -572,10 +572,10 @@
                             <td>Adds the Scroll component to its links.</td>
                         </tr>
                         <tr>
-                            <td><code>overflow</code></td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                            <td>If overflow is set to true, the first or last item will stay active if above or below the navigation.</td>
+                            <td><code>target</code></td>
+                            <td>CSS selector</td>
+                            <td>a[href]</td>
+                            <td>Targets the anchor elements that should be used.</td>
                         </tr>
                         <tr>
                             <td><code>offset</code></td>