uikit 3.25.5-dev.82c4ad8 → 3.25.5-dev.c2e0a67

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.25.5-dev.82c4ad8",
+    "version": "3.25.5-dev.c2e0a67",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -31,7 +31,7 @@
         "url": "https://github.com/uikit/uikit/issues"
     },
     "homepage": "https://getuikit.com",
-    "packageManager": "pnpm@10.24.0",
+    "packageManager": "pnpm@10.27.0",
     "devDependencies": {
         "@eslint/js": "^9.39.2",
         "@rollup/plugin-alias": "^6.0.0",

package/src/js/core/drop.js

@@ -338,6 +338,9 @@ export default {
                 append(this.container, this.$el);
             }
 
+            // Mark enter early so isToggled() detects show when using delayShow
+            addClass(this.$el, this.clsEnter);
+
             this.showTimer = setTimeout(
                 () => this.toggleElement(this.$el, true),
                 (delay && this.delayShow) || 0,
@@ -345,7 +348,11 @@ export default {
         },
 
         hide(delay = true, animate = true) {
-            const hide = () => this.toggleElement(this.$el, false, this.animateOut && animate);
+            const hide = () => {
+                // Ensure enter class is removed if show is canceled early
+                removeClass(this.$el, this.clsEnter);
+                this.toggleElement(this.$el, false, this.animateOut && animate);
+            };
 
             this.clearTimers();
 

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

@@ -2,6 +2,7 @@ import {
     css,
     getEventPos,
     includes,
+    isEqual,
     isRtl,
     isTouch,
     noop,
@@ -25,15 +26,21 @@ export default {
     data: {
         draggable: true,
         threshold: 10,
+        angleThreshold: 45,
     },
 
     created() {
         for (const key of ['start', 'move', 'end']) {
             const fn = this[key];
             this[key] = (e) => {
-                const pos = getEventPos(e).x * (isRtl ? -1 : 1);
+                const pos = getEventPos(e);
 
-                this.prevPos = pos === this.pos ? this.prevPos : this.pos;
+                if (isRtl) {
+                    pos.x = -pos.x;
+                    pos.y = -pos.y;
+                }
+
+                this.prevPos = isEqual(pos, this.pos) ? this.prevPos : this.pos;
                 this.pos = pos;
 
                 fn(e);
@@ -88,7 +95,7 @@ export default {
 
             if (this._transitioner) {
                 this.percent = this._transitioner.percent();
-                this.drag += this._transitioner.getDistance() * this.percent * this.dir;
+                this.drag.x += this._transitioner.getDistance() * this.percent * this.dir;
 
                 this._transitioner.cancel();
                 this._transitioner.translate(this.percent);
@@ -109,11 +116,11 @@ export default {
         },
 
         move(e) {
-            const distance = this.pos - this.drag;
-
+            const distance = this.pos.x - this.drag.x;
             if (
                 distance === 0 ||
-                this.prevPos === this.pos ||
+                (!this.dragging && getAngle(this.pos, this.drag) > this.angleThreshold) ||
+                this.prevPos.x === this.pos.x ||
                 (!this.dragging && Math.abs(distance) < this.threshold)
             ) {
                 return;
@@ -130,7 +137,7 @@ export default {
             let width = getDistance.call(this, prevIndex, nextIndex);
 
             while (nextIndex !== prevIndex && dis > width) {
-                this.drag -= width * this.dir;
+                this.drag.x -= width * this.dir;
 
                 prevIndex = nextIndex;
                 dis -= width;
@@ -192,15 +199,14 @@ export default {
                     this._show(false, this.index, true);
                     this._transitioner = null;
                 } else {
-                    const dirChange =
-                        (isRtl ? this.dir * (isRtl ? 1 : -1) : this.dir) < 0 ===
-                        this.prevPos > this.pos;
-                    this.index = dirChange ? this.index : this.prevIndex;
+                    const dirChange = this.dir < 0 === this.prevPos.x > this.pos.x;
 
                     if (dirChange) {
                         trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
                         trigger(this.slides[this.index], 'itemshown', [this]);
                         this.percent = 1 - this.percent;
+                    } else {
+                        this.index = this.prevIndex;
                     }
 
                     this.show(
@@ -232,3 +238,7 @@ function hasSelectableText(el) {
         toArray(el.childNodes).some((el) => el.nodeType === 3 && el.textContent.trim())
     );
 }
+
+function getAngle(pos1, pos2) {
+    return (Math.atan2(Math.abs(pos2.y - pos1.y), Math.abs(pos2.x - pos1.x)) * 180) / Math.PI;
+}

package/tests/upload.html

@@ -145,13 +145,13 @@
                             <td><code>allow</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>File name filter. (eg. *.png)</td>
+                            <td>File name filter (eg. *.png). Separate multiple values with a pipe (*.png|*.gif).</td>
                         </tr>
                         <tr>
                             <td><code>mime</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>File MIME type filter. (eg. images/*)</td>
+                            <td>File MIME type filter (eg. image/*). Separate multiple values with a pipe (image/*|video/*).</td>
                         </tr>
                         <tr>
                             <td><code>maxSize</code></td>