uikit 3.25.5-dev.7295faa9 → 3.25.5-dev.c2e0a67

package/package.json

@@ -1,64 +1,65 @@
 {
-  "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.7295faa9",
-  "main": "dist/js/uikit.js",
-  "style": "dist/css/uikit.css",
-  "sideEffects": [
-    "*.css",
-    "./src/js/*.js",
-    "./dist/**/*.js"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/uikit/uikit.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/uikit/uikit/issues"
-  },
-  "homepage": "https://getuikit.com",
-  "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@rollup/plugin-alias": "^6.0.0",
-    "@rollup/plugin-replace": "^6.0.3",
-    "archiver": "^7.0.1",
-    "camelcase": "^9.0.0",
-    "chokidar-cli": "^3.0.0",
-    "clean-css": "^5.3.3",
-    "date-fns": "^4.1.0",
-    "esbuild": "^0.27.2",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^10.1.8",
-    "execa": "^9.6.1",
-    "fs-extra": "^11.3.2",
-    "glob": "^13.0.0",
-    "globals": "^17.0.0",
-    "inquirer": "^13.1.0",
-    "less": "^4.5.1",
-    "minimist": "^1.2.8",
-    "number-precision": "^1.6.0",
-    "p-limit": "^7.2.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "rollup": "^4.53.5",
-    "rollup-plugin-esbuild": "^6.2.1",
-    "rtlcss": "^4.3.0",
-    "semver": "^7.7.3",
-    "strip-css-comments": "^5.0.0",
-    "svgo": "^4.0.0"
-  },
-  "scripts": {
-    "build-scss": "node build/scss",
-    "compile": "pnpm compile-less && pnpm compile-js",
-    "compile-js": "node build/build",
-    "compile-less": "pnpm icons && node build/less",
-    "compile-rtl": "pnpm compile-less rtl",
-    "icons": "node build/icons",
-    "prefix": "node build/prefix",
-    "scope": "node build/scope",
-    "release": "node build/release",
-    "watch": "chokidar \"**/*.less\" --initial -i \"node_modules\" -c \"node build/less\""
-  }
-}
+    "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.c2e0a67",
+    "main": "dist/js/uikit.js",
+    "style": "dist/css/uikit.css",
+    "sideEffects": [
+        "*.css",
+        "./src/js/*.js",
+        "./dist/**/*.js"
+    ],
+    "scripts": {
+        "build-scss": "node build/scss",
+        "compile": "pnpm compile-less && pnpm compile-js",
+        "compile-js": "node build/build",
+        "compile-less": "pnpm icons && node build/less",
+        "compile-rtl": "pnpm compile-less rtl",
+        "icons": "node build/icons",
+        "prefix": "node build/prefix",
+        "scope": "node build/scope",
+        "release": "node build/release",
+        "watch": "chokidar \"**/*.less\" --initial -i \"node_modules\" -c \"node build/less\""
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/uikit/uikit.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/uikit/uikit/issues"
+    },
+    "homepage": "https://getuikit.com",
+    "packageManager": "pnpm@10.27.0",
+    "devDependencies": {
+        "@eslint/js": "^9.39.2",
+        "@rollup/plugin-alias": "^6.0.0",
+        "@rollup/plugin-replace": "^6.0.3",
+        "archiver": "^7.0.1",
+        "camelcase": "^9.0.0",
+        "chokidar-cli": "^3.0.0",
+        "clean-css": "^5.3.3",
+        "date-fns": "^4.1.0",
+        "esbuild": "^0.27.2",
+        "eslint": "^9.39.2",
+        "eslint-config-prettier": "^10.1.8",
+        "execa": "^9.6.1",
+        "fs-extra": "^11.3.2",
+        "glob": "^13.0.0",
+        "globals": "^17.0.0",
+        "inquirer": "^13.1.0",
+        "less": "^4.5.1",
+        "minimist": "^1.2.8",
+        "number-precision": "^1.6.0",
+        "p-limit": "^7.2.0",
+        "prettier": "^3.7.4",
+        "prettier-plugin-organize-imports": "^4.3.0",
+        "rollup": "^4.53.5",
+        "rollup-plugin-esbuild": "^6.2.1",
+        "rtlcss": "^4.3.0",
+        "semver": "^7.7.3",
+        "strip-css-comments": "^5.0.0",
+        "svgo": "^4.0.0"
+    }
+}

package/src/js/components/sortable.js

@@ -142,8 +142,7 @@ export default {
                 sortable.target,
                 target,
                 placeholder,
-                x,
-                y,
+                { x, y },
                 sortable === previous && data.moved !== target,
             );
 
@@ -365,7 +364,7 @@ function findTarget(items, point) {
     return items[findIndex(items, (item) => pointInRect(point, dimensions(item)))];
 }
 
-function findInsertTarget(list, target, placeholder, x, y, sameList) {
+function findInsertTarget(list, target, placeholder, point, sameList) {
     if (!children(list).length) {
         return;
     }
@@ -373,7 +372,7 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
     const rect = dimensions(target);
     if (!sameList) {
         if (!isHorizontal(list, placeholder)) {
-            return y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
+            return point.y < rect.top + rect.height / 2 ? target : target.nextElementSibling;
         }
 
         return target;
@@ -386,8 +385,8 @@ function findInsertTarget(list, target, placeholder, x, y, sameList) {
     );
 
     const [pointerPos, lengthProp, startProp, endProp] = sameRow
-        ? [x, 'width', 'left', 'right']
-        : [y, 'height', 'top', 'bottom'];
+        ? [point.x, 'width', 'left', 'right']
+        : [point.y, 'height', 'top', 'bottom'];
 
     const diff =
         placeholderRect[lengthProp] < rect[lengthProp]

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>