uiik 1.3.3 → 1.3.5

package/CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## [1.3.4] - 2025/8/24
+### 修复
+- Sortable filter数据后spill表现异常
 
 ## [1.3.2] - 2024/4/6
 ### 修复

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.3
+ * uiik v1.3.5
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2025 @holyhigh2 may be freely distributed under the MIT license
@@ -11,6 +11,7 @@ import { compact, findIndex } from 'myfx/array';
 import { split, test } from 'myfx/string';
 import { closest } from 'myfx/tree';
 import { alphaId } from 'myfx/utils';
+import { filter, last } from 'myfx';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -704,7 +705,7 @@ class Splittable extends Uii {
                 con.style.position = "relative";
             }
             con.classList.toggle(CLASS_SPLITTABLE, true);
-            const handleDoms = con.querySelectorAll(this.opts.handle);
+            const handleDoms = isString(this.opts.handle) ? con.querySelectorAll(this.opts.handle) : isArray(this.opts.handle) ? this.opts.handle : this.opts.handle ? [this.opts.handle] : [];
             const children = reject(con.children, c => {
                 if (includes(handleDoms, c))
                     return true;
@@ -746,7 +747,8 @@ class Splittable extends Uii {
                         let domCon = getRootEl(h, con);
                         let domL = domCon.previousElementSibling;
                         let domR = domCon.nextElementSibling;
-                        if (domL && !domL.querySelector(this.opts.handle)) {
+                        let hasDomLHandle = isString(this.opts.handle) ? domL === null || domL === void 0 ? void 0 : domL.querySelector(this.opts.handle) : domL === null || domL === void 0 ? void 0 : domL.contains(h);
+                        if (domL && !hasDomLHandle) {
                             dom1 = domL;
                             dom2 = domCon;
                         }
@@ -763,10 +765,16 @@ class Splittable extends Uii {
 }
 _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
     let dir = 'h';
+    let cStyle = window.getComputedStyle(container);
+    if (cStyle.display === 'inline-flex')
+        return dir;
+    if (cStyle.display === 'flex' && cStyle.flexDirection === 'row')
+        return dir;
     const child = container.children[0];
     let lastY = child.offsetTop;
+    let lastH = child.offsetHeight;
     each(container.children, c => {
-        if (c.offsetTop != lastY) {
+        if (c.offsetTop > lastH + lastY) {
             dir = 'v';
             return false;
         }
@@ -2640,6 +2648,8 @@ class Sortable extends Uii {
     onOptionChanged() { }
 }
 _Sortable_removeListenItems = new WeakMap();
+const NextNodeMap = new Map();
+const FilteredNodeMap = new Map();
 let DraggingData = null;
 function bindContainer(registerEvent, container, opts) {
     registerEvent(container, "mousedown", (e) => {
@@ -2674,6 +2684,8 @@ function bindContainer(registerEvent, container, opts) {
         let dragging = false;
         let ghostNode = null;
         let removeListenItems = null;
+        NextNodeMap.set(draggingItem, draggingItem.nextElementSibling);
+        FilteredNodeMap.set(con, filteredItems);
         const dragListener = (ev) => {
             const newX = ev.clientX;
             const newY = ev.clientY;
@@ -2783,7 +2795,7 @@ function bindContainer(registerEvent, container, opts) {
             }
             else if (DraggingData.spill === 'revert') {
                 (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
-                const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                const nextSibling = NextNodeMap.get(DraggingData.item);
                 DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
             }
         }
@@ -2863,12 +2875,17 @@ function bindContainer(registerEvent, container, opts) {
             else {
                 if (draggingItem.parentElement)
                     draggingItem.parentElement.removeChild(draggingItem);
+                const list = filter(FilteredNodeMap.get(container), x => x !== draggingItem);
                 if (dir[0] === "t") {
-                    container.insertBefore(draggingItem, container.children[0]);
+                    container.insertBefore(draggingItem, list[0]);
                 }
                 else {
-                    container.appendChild(draggingItem);
-                    container.children.length - 1;
+                    if (list.length !== container.children.length) {
+                        last(list).after(draggingItem);
+                    }
+                    else {
+                        container.appendChild(draggingItem);
+                    }
                 }
             }
         }
@@ -2947,7 +2964,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.3";
+var version = "1.3.5";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,14 +1,14 @@
 /**
- * uiik v1.3.3
+ * uiik v1.3.5
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2025 @holyhigh2 may be freely distributed under the MIT license
  */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/collection'), require('myfx/is'), require('myfx/object'), require('myfx/array'), require('myfx/string'), require('myfx/tree'), require('myfx/utils')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', 'myfx/array', 'myfx/string', 'myfx/tree', 'myfx/utils'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.collection, global.is, global.object, global.array, global.string, global.tree, global.utils));
-})(this, (function (exports, collection, is, object, array, string, tree, utils) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/collection'), require('myfx/is'), require('myfx/object'), require('myfx/array'), require('myfx/string'), require('myfx/tree'), require('myfx/utils'), require('myfx')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/collection', 'myfx/is', 'myfx/object', 'myfx/array', 'myfx/string', 'myfx/tree', 'myfx/utils', 'myfx'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.collection, global.is, global.object, global.array, global.string, global.tree, global.utils, global.myfx));
+})(this, (function (exports, collection, is, object, array, string, tree, utils, myfx) { 'use strict';
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -702,7 +702,7 @@
                     con.style.position = "relative";
                 }
                 con.classList.toggle(CLASS_SPLITTABLE, true);
-                const handleDoms = con.querySelectorAll(this.opts.handle);
+                const handleDoms = is.isString(this.opts.handle) ? con.querySelectorAll(this.opts.handle) : is.isArray(this.opts.handle) ? this.opts.handle : this.opts.handle ? [this.opts.handle] : [];
                 const children = collection.reject(con.children, c => {
                     if (collection.includes(handleDoms, c))
                         return true;
@@ -744,7 +744,8 @@
                             let domCon = getRootEl(h, con);
                             let domL = domCon.previousElementSibling;
                             let domR = domCon.nextElementSibling;
-                            if (domL && !domL.querySelector(this.opts.handle)) {
+                            let hasDomLHandle = is.isString(this.opts.handle) ? domL === null || domL === void 0 ? void 0 : domL.querySelector(this.opts.handle) : domL === null || domL === void 0 ? void 0 : domL.contains(h);
+                            if (domL && !hasDomLHandle) {
                                 dom1 = domL;
                                 dom2 = domCon;
                             }
@@ -761,10 +762,16 @@
     }
     _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
         let dir = 'h';
+        let cStyle = window.getComputedStyle(container);
+        if (cStyle.display === 'inline-flex')
+            return dir;
+        if (cStyle.display === 'flex' && cStyle.flexDirection === 'row')
+            return dir;
         const child = container.children[0];
         let lastY = child.offsetTop;
+        let lastH = child.offsetHeight;
         collection.each(container.children, c => {
-            if (c.offsetTop != lastY) {
+            if (c.offsetTop > lastH + lastY) {
                 dir = 'v';
                 return false;
             }
@@ -2638,6 +2645,8 @@
         onOptionChanged() { }
     }
     _Sortable_removeListenItems = new WeakMap();
+    const NextNodeMap = new Map();
+    const FilteredNodeMap = new Map();
     let DraggingData = null;
     function bindContainer(registerEvent, container, opts) {
         registerEvent(container, "mousedown", (e) => {
@@ -2672,6 +2681,8 @@
             let dragging = false;
             let ghostNode = null;
             let removeListenItems = null;
+            NextNodeMap.set(draggingItem, draggingItem.nextElementSibling);
+            FilteredNodeMap.set(con, filteredItems);
             const dragListener = (ev) => {
                 const newX = ev.clientX;
                 const newY = ev.clientY;
@@ -2781,7 +2792,7 @@
                 }
                 else if (DraggingData.spill === 'revert') {
                     (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
-                    const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                    const nextSibling = NextNodeMap.get(DraggingData.item);
                     DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
                 }
             }
@@ -2861,12 +2872,17 @@
                 else {
                     if (draggingItem.parentElement)
                         draggingItem.parentElement.removeChild(draggingItem);
+                    const list = myfx.filter(FilteredNodeMap.get(container), x => x !== draggingItem);
                     if (dir[0] === "t") {
-                        container.insertBefore(draggingItem, container.children[0]);
+                        container.insertBefore(draggingItem, list[0]);
                     }
                     else {
-                        container.appendChild(draggingItem);
-                        container.children.length - 1;
+                        if (list.length !== container.children.length) {
+                            myfx.last(list).after(draggingItem);
+                        }
+                        else {
+                            container.appendChild(draggingItem);
+                        }
                     }
                 }
             }
@@ -2945,7 +2961,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.3";
+    var version = "1.3.5";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",

package/types.d.ts

@@ -66,7 +66,7 @@ export type SplittableOptions = {
     ghost?: boolean;
     ghostClass?: string;
     ghostTo?: string | HTMLElement;
-    handle?: string;
+    handle?: string | HTMLElement | HTMLElement[];
     onStart?: (data: {
         size1: number;
         size2: number;