uikit 3.20.7 → 3.20.8-dev.a340cc6f4

package/package.json

@@ -1,65 +1,64 @@
 {
-    "name": "uikit",
-    "title": "UIkit",
-    "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.20.7",
-    "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@9.0.5",
-    "devDependencies": {
-        "@eslint/js": "^9.0.0",
-        "@rollup/plugin-alias": "^5.1.0",
-        "@rollup/plugin-replace": "^5.0.5",
-        "archiver": "^7.0.1",
-        "camelcase": "^8.0.0",
-        "chokidar-cli": "^3.0.0",
-        "clean-css": "^5.3.3",
-        "dateformat": "^5.0.3",
-        "esbuild": "^0.20.1",
-        "eslint": "^9.0.0",
-        "eslint-config-prettier": "^9.1.0",
-        "execa": "^8.0.1",
-        "fs-extra": "^11.2.0",
-        "glob": "^10.3.10",
-        "globals": "^15.0.0",
-        "inquirer": "^9.2.15",
-        "less": "^4.2.0",
-        "minimist": "^1.2.8",
-        "number-precision": "^1.6.0",
-        "p-limit": "^5.0.0",
-        "prettier": "^3.2.5",
-        "prettier-plugin-organize-imports": "^3.2.4",
-        "rollup": "^4.13.0",
-        "rollup-plugin-esbuild": "^6.1.1",
-        "rollup-plugin-modify": "^3.0.0",
-        "rtlcss": "^4.1.1",
-        "semver": "^7.6.0",
-        "svgo": "^3.2.0"
-    }
-}
+  "name": "uikit",
+  "title": "UIkit",
+  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
+  "version": "3.20.8-dev.a340cc6f4",
+  "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.1.1",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "archiver": "^7.0.1",
+    "camelcase": "^8.0.0",
+    "chokidar-cli": "^3.0.0",
+    "clean-css": "^5.3.3",
+    "dateformat": "^5.0.3",
+    "esbuild": "^0.20.2",
+    "eslint": "^9.1.1",
+    "eslint-config-prettier": "^9.1.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.12",
+    "globals": "^15.0.0",
+    "inquirer": "^9.2.19",
+    "less": "^4.2.0",
+    "minimist": "^1.2.8",
+    "number-precision": "^1.6.0",
+    "p-limit": "^5.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "rollup": "^4.16.4",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-modify": "^3.0.0",
+    "rtlcss": "^4.1.1",
+    "semver": "^7.6.0",
+    "svgo": "^3.2.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\""
+  }
+}

package/src/js/components/sortable.js

@@ -65,16 +65,6 @@ export default {
         pos: {},
     },
 
-    created() {
-        for (const key of ['init', 'start', 'move', 'end']) {
-            const fn = this[key];
-            this[key] = (e) => {
-                assign(this.pos, getEventPos(e));
-                fn(e);
-            };
-        }
-    },
-
     events: {
         name: pointerDown,
         passive: false,
@@ -194,6 +184,7 @@ export default {
 
             e.preventDefault();
 
+            this.pos = getEventPos(e);
             this.touched = new Set([this]);
             this.placeholder = placeholder;
             this.origin = { target, index: index(placeholder), ...this.pos };
@@ -223,7 +214,9 @@ export default {
             this.move(e);
         },
 
-        move(e) {
+        move: throttle(function (e) {
+            assign(this.pos, getEventPos(e));
+
             if (this.drag) {
                 this.$emit('move');
             } else if (
@@ -232,7 +225,7 @@ export default {
             ) {
                 this.start(e);
             }
-        },
+        }),
 
         end() {
             off(document, pointerMove, this.move);
@@ -272,17 +265,17 @@ export default {
         insert(element, target) {
             addClass(this.items, this.clsItem);
 
-            const insert = () => (target ? before(target, element) : append(this.target, element));
-
-            this.animate(insert);
+            if (target && target.previousElementSibling !== element) {
+                this.animate(() => before(target, element));
+            } else if (!target && this.target.lastElementChild !== element) {
+                this.animate(() => append(this.target, element));
+            }
         },
 
         remove(element) {
-            if (!this.target.contains(element)) {
-                return;
+            if (this.target.contains(element)) {
+                this.animate(() => remove(element));
             }
-
-            this.animate(() => remove(element));
         },
 
         getSortable(element) {
@@ -438,3 +431,16 @@ function isHorizontal(list, placeholder) {
 function linesIntersect(lineA, lineB) {
     return lineA[1] > lineB[0] && lineB[1] > lineA[0];
 }
+
+function throttle(fn) {
+    let throttled;
+    return function (...args) {
+        if (!throttled) {
+            throttled = true;
+            requestAnimationFrame(() => {
+                throttled = false;
+                fn.call(this, ...args);
+            });
+        }
+    };
+}

package/src/js/mixin/internal/animate-slide.js

@@ -21,8 +21,13 @@ export default async function (action, target, duration) {
     const currentProps = nodes.map((el) => getProps(el, true));
     const targetProps = { ...css(target, ['height', 'padding']), display: 'block' };
 
+    const targets = nodes.concat(target);
+
     // Cancel previous animations
-    await Promise.all(nodes.concat(target).map(Transition.cancel));
+    await Promise.all(targets.map(Transition.cancel));
+
+    // Force transition to be canceled in Safari
+    css(targets, 'transitionProperty', 'none');
 
     // Adding, sorting, removing nodes
     await action();
@@ -33,6 +38,9 @@ export default async function (action, target, duration) {
     // Wait for update to propagate
     await Promise.resolve();
 
+    // Possibly reset the forced transition property
+    css(targets, 'transitionProperty', '');
+
     // Get new state
     const targetStyle = attr(target, 'style');
     const targetPropsTo = css(target, ['height', 'padding']);

package/src/js/util/filter.js

@@ -22,11 +22,11 @@ export function isVoidElement(element) {
     return toNodes(element).some((element) => voidElements[element.tagName.toLowerCase()]);
 }
 
-const isVisibleFn = inBrowser
-    ? Element.prototype.checkVisibility
-    : function () {
-          return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
-      };
+const isVisibleFn =
+    (inBrowser && Element.prototype.checkVisibility) ||
+    function () {
+        return this.offsetWidth || this.offsetHeight || this.getClientRects().length;
+    };
 export function isVisible(element) {
     return toNodes(element).some((element) => isVisibleFn.call(element));
 }