uikit 3.25.4 → 3.25.5-dev.7f39b03

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.4",
-  "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": "^16.5.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.7f39b03",
+    "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/core/overflow-fade.js

@@ -1,22 +1,45 @@
-import { children, clamp, css, toggleClass } from 'uikit-util';
+import {
+    children,
+    clamp,
+    css,
+    getEventPos,
+    hasClass,
+    isInput,
+    isTouch,
+    on,
+    pointerCancel,
+    pointerDown,
+    pointerMove,
+    pointerUp,
+    selInput,
+    toggleClass,
+} from 'uikit-util';
 import { mutation, resize } from '../api/observables';
 
 export default {
     data: {
+        threshold: 5,
         fadeDuration: 0.05,
     },
 
-    events: {
-        name: 'scroll',
+    events: [
+        {
+            name: 'scroll',
 
-        self: true,
+            self: true,
 
-        passive: true,
+            passive: true,
 
-        handler() {
-            this.$emit();
+            handler() {
+                this.$emit();
+            },
         },
-    },
+        {
+            name: pointerDown,
+
+            handler: handleMouseDrag,
+        },
+    ],
 
     observe: [
         mutation({
@@ -65,3 +88,55 @@ export default {
         events: ['resize'],
     },
 };
+
+function handleMouseDrag(e) {
+    const { target, button, defaultPrevented } = e;
+
+    if (
+        defaultPrevented ||
+        button > 0 ||
+        isTouch(e) ||
+        target.closest(selInput) ||
+        isInput(target)
+    ) {
+        return;
+    }
+
+    e.preventDefault();
+
+    const pointerOptions = { passive: false, capture: true };
+    const { $el: el, threshold, $options } = this;
+    let started;
+
+    const off = on(document, pointerMove, move(e), pointerOptions);
+    on(document, [pointerUp, pointerCancel], end, { capture: true, once: true });
+
+    function move(e) {
+        let origin = getEventPos(e);
+        let pos = origin;
+        let lastPos = pos;
+
+        return function (e) {
+            lastPos = pos;
+            pos = getEventPos(e);
+
+            const isVertical = hasClass(el, `${$options.id}-vertical`);
+            const prop = isVertical ? 'y' : 'x';
+
+            started ||= Math.abs(pos[prop] - origin[prop]) > threshold;
+
+            if (started) {
+                const delta = lastPos[prop] - pos[prop];
+                el[isVertical ? 'scrollTop' : 'scrollLeft'] += delta;
+            }
+        };
+    }
+
+    function end() {
+        off();
+
+        if (started) {
+            setTimeout(on(el, 'click', (e) => e.preventDefault(), pointerOptions));
+        }
+    }
+}

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

@@ -2,6 +2,7 @@ import {
     css,
     getEventPos,
     includes,
+    isEqual,
     isRtl,
     isTouch,
     noop,
@@ -13,7 +14,6 @@ import {
 } from 'uikit-util';
 
 const pointerOptions = { passive: false, capture: true };
-const pointerUpOptions = { passive: true, capture: true };
 const pointerDown = 'touchstart mousedown';
 const pointerMove = 'touchmove mousemove';
 const pointerUp = 'touchend touchcancel mouseup click input scroll';
@@ -26,15 +26,20 @@ 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;
+                }
+
+                this.prevPos = isEqual(pos, this.pos) ? this.prevPos : this.pos;
                 this.pos = pos;
 
                 fn(e);
@@ -89,7 +94,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);
@@ -104,17 +109,17 @@ export default {
             on(document, pointerMove, this.move, pointerOptions);
 
             // 'input' event is triggered by video controls
-            on(document, pointerUp, this.end, pointerUpOptions);
+            on(document, pointerUp, this.end, { passive: true, capture: true, once: true });
 
             css(this.list, 'userSelect', 'none');
         },
 
         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;
@@ -131,7 +136,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;
@@ -181,7 +186,6 @@ export default {
 
         end() {
             off(document, pointerMove, this.move, pointerOptions);
-            off(document, pointerUp, this.end, pointerUpOptions);
 
             if (this.dragging) {
                 setTimeout(on(this.list, 'click', (e) => e.preventDefault(), pointerOptions));
@@ -194,15 +198,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(
@@ -234,3 +237,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/src/js/util/attr.js

@@ -1,4 +1,4 @@
-import { isFunction, isObject, isUndefined, toNode, toNodes } from './lang';
+import { isObject, isUndefined, toNode, toNodes } from './lang';
 
 export function attr(element, name, value) {
     if (isObject(name)) {
@@ -12,10 +12,6 @@ export function attr(element, name, value) {
         return toNode(element)?.getAttribute(name);
     } else {
         for (const el of toNodes(element)) {
-            if (isFunction(value)) {
-                value = value.call(el, attr(el, name));
-            }
-
             if (value === null) {
                 removeAttr(el, name);
             } else {

package/src/less/components/nav.less

@@ -375,7 +375,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-secondary > li > a {
-
     color: @nav-secondary-item-color;
     .hook-nav-secondary-item();
 }

package/src/scss/components/nav.scss

@@ -312,7 +312,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-secondary > li > a {
-
     color: $nav-secondary-item-color;
     @if(meta.mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();}
 }

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>