uiik 1.3.4 → 1.3.6

package/detector.d.ts

@@ -12,4 +12,4 @@ export declare class CollisionDetector {
     getInclusions(): Array<HTMLElement>;
     getInclusions(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
 }
-export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions): CollisionDetector;
+export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection | NodeListOf<Element>, opts?: CollisionDetectorOptions): CollisionDetector;

package/draggable.d.ts

@@ -1,8 +1,8 @@
 import { DraggableOptions, Uii } from "./types";
 export declare class Draggable extends Uii {
     #private;
-    constructor(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions);
+    constructor(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DraggableOptions);
     bindEvent(bindTarget: Element, opts: DraggableOptions, handleMap: WeakMap<Element, Element>): void;
     onOptionChanged(opts: Record<string, any>): void;
 }
-export declare function newDraggable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions): Draggable;
+export declare function newDraggable(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DraggableOptions): Draggable;

package/droppable.d.ts

@@ -1,9 +1,9 @@
 import { DroppableOptions, Uii } from "./types";
 export declare class Droppable extends Uii {
     #private;
-    constructor(el: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions);
+    constructor(el: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DroppableOptions);
     bindEvent(droppable: HTMLElement, opts: DroppableOptions): void;
     active(target: HTMLElement): void;
     deactive(target: HTMLElement): void;
 }
-export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions): Droppable;
+export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement> | NodeListOf<Element>, opts?: DroppableOptions): Droppable;

package/index.esm.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.4
+ * uiik v1.3.6
  * 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
@@ -705,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;
@@ -747,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;
                         }
@@ -764,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;
         }
@@ -1772,7 +1779,7 @@ class Draggable extends Uii {
                     let ghostParent = ghostTo ? (isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
                     ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
                     transform = wrapper(ghostNode, opts.useTransform);
-                    onClone && onClone({ clone: ghostNode }, ev);
+                    onClone && onClone({ clone: ghostNode, draggable: dragDom }, ev);
                 }
                 else {
                     transform = wrapper(dragDom, opts.useTransform);
@@ -1783,9 +1790,11 @@ class Draggable extends Uii {
                 dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
                 onStart &&
                     onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
-                const customEv = new Event("uii-dragactive", {
+                const customEv = new CustomEvent("uii-dragactive", {
                     bubbles: true,
+                    composed: true,
                     cancelable: false,
+                    detail: { target: dragDom }
                 });
                 dragDom.dispatchEvent(customEv);
             });
@@ -1980,9 +1989,13 @@ class Draggable extends Uii {
                             ? false
                             : true;
                 }
-                const customEv = new Event("uii-dragdeactive", {
+                const customEv = new CustomEvent("uii-dragdeactive", {
                     bubbles: true,
+                    composed: true,
                     cancelable: false,
+                    detail: {
+                        target: dragDom
+                    }
                 });
                 dragDom.dispatchEvent(customEv);
                 if (ghost) {
@@ -2145,13 +2158,15 @@ class Droppable extends Uii {
 }
 _Droppable_active = new WeakMap();
 document.addEventListener("uii-dragactive", (e) => {
+    let { target } = e.detail;
     each(Droppables, dpb => {
-        dpb.active(e.target);
+        dpb.active(target);
     });
 });
 document.addEventListener("uii-dragdeactive", (e) => {
+    let { target } = e.detail;
     each(Droppables, dpb => {
-        dpb.deactive(e.target);
+        dpb.deactive(target);
     });
 });
 function newDroppable(els, opts) {
@@ -2957,7 +2972,7 @@ function newSortable(container, opts) {
     return new Sortable(container, opts);
 }
 
-var version = "1.3.4";
+var version = "1.3.6";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.3.4
+ * uiik v1.3.6
  * 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
@@ -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;
             }
@@ -1769,7 +1776,7 @@
                         let ghostParent = ghostTo ? (is.isString(ghostTo) ? document.querySelector(ghostTo) : ghostTo) : dragDom.parentNode;
                         ghostParent === null || ghostParent === void 0 ? void 0 : ghostParent.appendChild(ghostNode);
                         transform = wrapper(ghostNode, opts.useTransform);
-                        onClone && onClone({ clone: ghostNode }, ev);
+                        onClone && onClone({ clone: ghostNode, draggable: dragDom }, ev);
                     }
                     else {
                         transform = wrapper(dragDom, opts.useTransform);
@@ -1780,9 +1787,11 @@
                     dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
                     onStart &&
                         onStart({ draggable: dragDom, x: startPointXy.x, y: startPointXy.y, transform }, ev);
-                    const customEv = new Event("uii-dragactive", {
+                    const customEv = new CustomEvent("uii-dragactive", {
                         bubbles: true,
+                        composed: true,
                         cancelable: false,
+                        detail: { target: dragDom }
                     });
                     dragDom.dispatchEvent(customEv);
                 });
@@ -1977,9 +1986,13 @@
                                 ? false
                                 : true;
                     }
-                    const customEv = new Event("uii-dragdeactive", {
+                    const customEv = new CustomEvent("uii-dragdeactive", {
                         bubbles: true,
+                        composed: true,
                         cancelable: false,
+                        detail: {
+                            target: dragDom
+                        }
                     });
                     dragDom.dispatchEvent(customEv);
                     if (ghost) {
@@ -2142,13 +2155,15 @@
     }
     _Droppable_active = new WeakMap();
     document.addEventListener("uii-dragactive", (e) => {
+        let { target } = e.detail;
         collection.each(Droppables, dpb => {
-            dpb.active(e.target);
+            dpb.active(target);
         });
     });
     document.addEventListener("uii-dragdeactive", (e) => {
+        let { target } = e.detail;
         collection.each(Droppables, dpb => {
-            dpb.deactive(e.target);
+            dpb.deactive(target);
         });
     });
     function newDroppable(els, opts) {
@@ -2954,7 +2969,7 @@
         return new Sortable(container, opts);
     }
 
-    var version = "1.3.4";
+    var version = "1.3.6";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "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;
@@ -143,6 +143,7 @@ export type DraggableOptions = {
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
         clone: HTMLElement | SVGGraphicsElement;
+        draggable: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => void;
     onSnap?: (data: {
         el: HTMLElement | SVGGraphicsElement;