adverich-kun-ui 0.1.640 → 0.1.641

package/AGENTS.md

@@ -677,7 +677,11 @@ const items = ref([
 | dragHandle | String | null | Selector del handle (`null` = ítem completo) |
 | itemDraggable | Function | null | `(item) => boolean` |
 | layout | String | `'list'` | `'list'` \| `'grid'` (solo CSS) |
-| draggingClass | String | `'opacity-50'` | Clase mientras se arrastra |
+| draggingClass | String | `''` | Clase extra mientras se arrastra |
+| dropZoneClass | String | `'kun-dnd-drop-zone'` | Placeholder in-list |
+| autoScroll | Boolean | true | Auto-scroll por bordes del ancestro overflow |
+| scrollSensitivity | Number | 50 | Distancia (px) al borde para iniciar scroll |
+| scrollSpeed | Number | 12 | Velocidad de scroll por frame |
 | tag | String | `'div'` | Tag del contenedor |
 
 **Eventos:** `update:modelValue`, `update:items`, `drag-start`, `drag-end`, `sort`, `transfer`
@@ -686,6 +690,8 @@ const items = ref([
 
 **Subcomponentes:** `KunDragAndDropItem`, `KunDragAndDropHandle`
 
+**Scroll durante drag:** HTML5 DnD bloquea la rueda del mouse. Con `autoScroll` (default), acercar el puntero al borde superior/inferior (o laterales) del contenedor `overflow: auto|scroll` más cercano desplaza la vista. No depende de la rueda.
+
 **Composable headless:**
 
 ```js

package/dist/AGENTS.md

@@ -677,7 +677,11 @@ const items = ref([
 | dragHandle | String | null | Selector del handle (`null` = ítem completo) |
 | itemDraggable | Function | null | `(item) => boolean` |
 | layout | String | `'list'` | `'list'` \| `'grid'` (solo CSS) |
-| draggingClass | String | `'opacity-50'` | Clase mientras se arrastra |
+| draggingClass | String | `''` | Clase extra mientras se arrastra |
+| dropZoneClass | String | `'kun-dnd-drop-zone'` | Placeholder in-list |
+| autoScroll | Boolean | true | Auto-scroll por bordes del ancestro overflow |
+| scrollSensitivity | Number | 50 | Distancia (px) al borde para iniciar scroll |
+| scrollSpeed | Number | 12 | Velocidad de scroll por frame |
 | tag | String | `'div'` | Tag del contenedor |
 
 **Eventos:** `update:modelValue`, `update:items`, `drag-start`, `drag-end`, `sort`, `transfer`
@@ -686,6 +690,8 @@ const items = ref([
 
 **Subcomponentes:** `KunDragAndDropItem`, `KunDragAndDropHandle`
 
+**Scroll durante drag:** HTML5 DnD bloquea la rueda del mouse. Con `autoScroll` (default), acercar el puntero al borde superior/inferior (o laterales) del contenedor `overflow: auto|scroll` más cercano desplaza la vista. No depende de la rueda.
+
 **Composable headless:**
 
 ```js

package/dist/components/KunDragAndDrop/src/components/KunDragAndDrop.js

@@ -45,6 +45,9 @@ var T = /* @__PURE__ */ e({ default: () => O }), E = { class: "flex items-center
 				orientation: T.orientation || (T.layout === "grid" ? "grid" : "vertical"),
 				itemDraggable: T.itemDraggable,
 				dragHandle: N.value,
+				autoScroll: T.autoScroll,
+				scrollSensitivity: T.scrollSensitivity,
+				scrollSpeed: T.scrollSpeed,
 				onDragstart: (e) => O("drag-start", e),
 				onDragend: (e) => O("drag-end", e),
 				onSort: (e) => {
@@ -74,6 +77,9 @@ var T = /* @__PURE__ */ e({ default: () => O }), E = { class: "flex items-center
 			T.orientation,
 			T.layout,
 			T.itemDraggable,
+			T.autoScroll,
+			T.scrollSensitivity,
+			T.scrollSpeed,
 			N.value
 		], () => {
 			I(F());

package/dist/components/KunDragAndDrop/src/composables/kunDragAndDropProps.js

@@ -76,6 +76,18 @@ var e = {
 	listClass: {
 		type: String,
 		default: "flex flex-col gap-2"
+	},
+	autoScroll: {
+		type: Boolean,
+		default: !0
+	},
+	scrollSensitivity: {
+		type: Number,
+		default: 50
+	},
+	scrollSpeed: {
+		type: Number,
+		default: 12
 	}
 };
 //#endregion

package/dist/components/KunDragAndDrop/src/composables/useKunDragAndDrop.js

@@ -1,15 +1,16 @@
 import { getIncomingDirection as e, getInsertIndexFromPoint as t, getTargetItemFromPoint as n, passesSortThreshold as r, performSort as i, performTransfer as a, resolveItemKey as o } from "../utils/kunDragAndDropMath.js";
-import { activeDragRef as s, clearActiveDrag as c, getActiveDrag as l, getGroupParents as u, registerParent as d, setActiveDrag as f, unregisterParent as p } from "./kunDragAndDropRegistry.js";
-import { computed as m, isRef as h, onBeforeUnmount as g, onMounted as _, ref as v, unref as y, watch as b } from "vue";
+import { findScrollParent as s, getAutoScrollDelta as c } from "../utils/kunDragAndDropScroll.js";
+import { activeDragRef as l, clearActiveDrag as u, getActiveDrag as d, getGroupParents as f, registerParent as p, setActiveDrag as m, unregisterParent as h } from "./kunDragAndDropRegistry.js";
+import { computed as g, isRef as _, onBeforeUnmount as ee, onMounted as te, ref as v, unref as y, watch as b } from "vue";
 //#region src/components/KunDragAndDrop/src/composables/useKunDragAndDrop.js
-var x = "data-kun-dnd-item", S = "data-kun-dnd-key", ee = "input,textarea,select,button,a,[role=\"button\"],[data-no-drag]", C = 0;
-function te() {
+var x = "data-kun-dnd-item", S = "data-kun-dnd-key", ne = "input,textarea,select,button,a,[role=\"button\"],[data-no-drag]", C = 0;
+function re() {
 	return C += 1, `kun-dnd-${C}`;
 }
-function ne(e) {
+function ie(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e) && ("parent" in e || "values" in e);
 }
-function w(e = {}) {
+function ae(e = {}) {
 	return {
 		group: e.group ?? null,
 		dragHandle: e.dragHandle ?? null,
@@ -28,19 +29,22 @@ function w(e = {}) {
 		onTransfer: typeof e.onTransfer == "function" ? e.onTransfer : null,
 		onDragstart: typeof e.onDragstart == "function" ? e.onDragstart : null,
 		onDragend: typeof e.onDragend == "function" ? e.onDragend : null,
-		onValuesChange: typeof e.onValuesChange == "function" ? e.onValuesChange : null
+		onValuesChange: typeof e.onValuesChange == "function" ? e.onValuesChange : null,
+		autoScroll: e.autoScroll !== !1,
+		scrollSensitivity: Number.isFinite(e.scrollSensitivity) ? e.scrollSensitivity : 50,
+		scrollSpeed: Number.isFinite(e.scrollSpeed) ? e.scrollSpeed : 12
 	};
 }
-function re(e, t, n) {
+function oe(e, t, n) {
 	if (e === t) return !0;
 	if (!e || !t || e.length !== t.length) return !1;
 	for (let r = 0; r < e.length; r++) if (o(e[r], n, r) !== o(t[r], n, r)) return !1;
 	return !0;
 }
-function ie(e) {
+function se(e) {
 	return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(String(e)) : String(e).replace(/"/g, "\\\"");
 }
-function T(e, t, n) {
+function w(e, t, n) {
 	if (!n) return !0;
 	let r = typeof e.composedPath == "function" ? e.composedPath() : [], i = r.indexOf(t), a = i === -1 ? [] : r.slice(0, i);
 	for (let e of a) if (e instanceof Element && e.matches(n)) return !0;
@@ -49,139 +53,176 @@ function T(e, t, n) {
 	for (let e of o) if (s === e || e.contains(s)) return !0;
 	return !1;
 }
-function E(C, E) {
-	let D = ne(C), O = D ? C : {}, ae = w(D ? O : E || {}), k = te(), A = v({ ...ae }), j = D && O.parent ? O.parent : v(null), M = D && O.values ? O.values : v(Array.isArray(C) ? [...C] : []), N = m(() => s.value?.itemKey ?? null), P = v(null), F = null, I = null, L = null, R = null, z = null, B = 0, V = null;
-	function H() {
-		return y(M) || [];
+function ce(C, ce) {
+	let T = ie(C), E = T ? C : {}, le = ae(T ? E : ce || {}), D = re(), O = v({ ...le }), k = T && E.parent ? E.parent : v(null), A = T && E.values ? E.values : v(Array.isArray(C) ? [...C] : []), j = g(() => l.value?.itemKey ?? null), M = v(null), N = null, P = null, F = null, I = null, L = null, R = 0, z = null, B = null, V = 0, H = 0, U = null, W = !1;
+	function G() {
+		return y(A) || [];
 	}
-	function U(e, t = {}) {
+	function K(e, t = {}) {
 		let n = Array.isArray(e) ? e : [];
-		h(M) && (M.value = n), G().onValuesChange?.(n, t);
+		_(A) && (A.value = n), J().onValuesChange?.(n, t);
 	}
-	function W() {
-		return y(j) || null;
+	function q() {
+		return y(k) || null;
 	}
-	function G() {
-		return A.value;
+	function J() {
+		return O.value;
 	}
-	function oe(e = {}) {
-		A.value = w({
-			...A.value,
+	function ue(e = {}) {
+		O.value = ae({
+			...O.value,
 			...e
-		}), K();
-	}
-	function K() {
-		F && p(F), F = {
-			id: k,
-			group: A.value.group,
-			getParentEl: W,
-			getValues: H,
-			setValues: U,
-			getConfig: G
-		}, d(F);
-	}
-	function q(e) {
-		let t = G();
-		return H().findIndex((n, r) => String(o(n, t.itemKey, r)) === String(e));
-	}
-	function J(e) {
-		let t = W();
+		}), de();
+	}
+	function de() {
+		N && h(N), N = {
+			id: D,
+			group: O.value.group,
+			getParentEl: q,
+			getValues: G,
+			setValues: K,
+			getConfig: J
+		}, p(N);
+	}
+	function Y(e) {
+		let t = J();
+		return G().findIndex((n, r) => String(o(n, t.itemKey, r)) === String(e));
+	}
+	function fe(e) {
+		let t = q();
 		if (!t || !e?.target?.closest) return null;
 		let n = e.target.closest(`[${x}="true"]`);
 		return !n || !t.contains(n) ? null : n;
 	}
-	function Y(e) {
-		let t = W();
-		return !t || e == null ? null : t.querySelector(`[${S}="${ie(e)}"]`);
+	function X(e) {
+		let t = q();
+		return !t || e == null ? null : t.querySelector(`[${S}="${se(e)}"]`);
 	}
-	function se() {
-		let e = W(), t = G();
+	function pe() {
+		let e = q(), t = J();
 		if (!e) return;
 		let n = [...(t.draggingClass || "").split(/\s+/), ...(t.dropZoneClass || "").split(/\s+/)].filter(Boolean);
 		n.length && e.querySelectorAll(`[${x}="true"]`).forEach((e) => {
 			n.forEach((t) => e.classList.remove(t));
 		});
 	}
-	function ce() {
-		let e = l(), t = e?.group ? u(e.group) : [];
+	function me() {
+		let e = d(), t = e?.group ? f(e.group) : [];
 		t.length ? t.forEach((e) => {
-			let t = e.getParentEl?.(), n = e.getConfig?.() || G();
+			let t = e.getParentEl?.(), n = e.getConfig?.() || J();
 			if (!t) return;
 			let r = [...(n.draggingClass || "").split(/\s+/), ...(n.dropZoneClass || "").split(/\s+/)].filter(Boolean);
 			t.querySelectorAll(`[${x}="true"]`).forEach((e) => {
 				r.forEach((t) => e.classList.remove(t));
 			});
-		}) : se();
+		}) : pe();
+	}
+	function he() {
+		me(), M.value = null, I = null, R = 0, z = null, Z(), L?.parentNode && L.parentNode.removeChild(L), L = null;
+	}
+	function Z() {
+		V = 0, H = 0, U = null, B != null && (cancelAnimationFrame(B), B = null);
 	}
-	function le() {
-		ce(), P.value = null, R = null, B = 0, V = null, z?.parentNode && z.parentNode.removeChild(z), z = null;
+	function ge() {
+		if (B = null, !d() || !U) {
+			Z();
+			return;
+		}
+		(V !== 0 || H !== 0) && (H !== 0 && (U.scrollTop += H), V !== 0 && (U.scrollLeft += V), B = requestAnimationFrame(ge));
 	}
-	function X() {
+	function _e(e, t) {
+		let n = J();
+		if (!n.autoScroll || !d()) {
+			Z();
+			return;
+		}
+		let r = null;
+		try {
+			r = document.elementFromPoint(e, t);
+		} catch {}
+		let i = s(r) || s(q());
+		U = i;
+		let { dx: a, dy: o } = c(e, t, i, {
+			sensitivity: n.scrollSensitivity,
+			speed: n.scrollSpeed
+		});
+		V = a, H = o, (a !== 0 || o !== 0) && B == null && (B = requestAnimationFrame(ge)), a === 0 && o === 0 && B != null && (cancelAnimationFrame(B), B = null);
+	}
+	function ve(e) {
+		!W || !d() || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), _e(e.clientX, e.clientY));
+	}
+	function ye() {
+		W || (W = !0, document.addEventListener("dragover", ve, !0), document.addEventListener("dragend", Ae, !0));
+	}
+	function Q() {
+		W && (W = !1, document.removeEventListener("dragover", ve, !0), document.removeEventListener("dragend", Ae, !0));
+	}
+	function be() {
 		try {
 			return;
 		} catch {}
-		let e = W();
+		let e = q();
 		if (!e) return;
-		let t = [...e.children].filter((e) => e.getAttribute?.("data-kun-dnd-item") === "true" && !e.hasAttribute?.("data-kun-dnd-placeholder")).length, n = H().length;
+		let t = [...e.children].filter((e) => e.getAttribute?.("data-kun-dnd-item") === "true" && !e.hasAttribute?.("data-kun-dnd-placeholder")).length, n = G().length;
 		t !== n && console.warn("[KunDragAndDrop] The number of draggable items in the parent does not match the number of values, which may lead to unexpected behavior.", {
 			childCount: t,
 			valueCount: n
 		});
 	}
-	function ue(e) {
-		let t = G();
+	function xe(e) {
+		let t = J();
 		if (t.disabled || !t.sortable) return;
-		let n = J(e);
+		let n = fe(e);
 		if (!n) {
-			P.value = null;
+			M.value = null;
 			return;
 		}
 		if (t.dragHandle) {
-			if (!T(e, n, t.dragHandle)) {
-				P.value = null, n.draggable = !1;
+			if (!w(e, n, t.dragHandle)) {
+				M.value = null, n.draggable = !1;
 				return;
 			}
 			let r = n.getAttribute(S);
-			P.value = r, n.draggable = !0;
+			M.value = r, n.draggable = !0;
 			return;
 		}
-		if (e.target?.closest?.(ee)) {
-			n.draggable = !1, P.value = null;
+		if (e.target?.closest?.(ne)) {
+			n.draggable = !1, M.value = null;
 			return;
 		}
-		n.draggable = !0, P.value = n.getAttribute(S);
+		n.draggable = !0, M.value = n.getAttribute(S);
 	}
-	function Z() {
-		if (!G().dragHandle) return;
-		let e = Y(P.value);
-		e && !N.value && (e.draggable = !1, P.value = null);
+	function $() {
+		if (!J().dragHandle) return;
+		let e = X(M.value);
+		e && !j.value && (e.draggable = !1, M.value = null);
 	}
-	function de(e) {
-		let t = G();
+	function Se(e) {
+		let t = J();
 		if (t.disabled || !t.sortable) {
 			e.preventDefault();
 			return;
 		}
-		let n = J(e);
+		let n = fe(e);
 		if (!n) {
 			e.preventDefault();
 			return;
 		}
 		if (t.dragHandle) {
-			if (!T(e, n, t.dragHandle)) {
+			if (!w(e, n, t.dragHandle)) {
 				e.preventDefault(), n.draggable = !1;
 				return;
 			}
-		} else if (e.target?.closest?.(ee)) {
+		} else if (e.target?.closest?.(ne)) {
 			e.preventDefault();
 			return;
 		}
-		let r = n.getAttribute(S), i = q(r);
+		let r = n.getAttribute(S), i = Y(r);
 		if (i < 0) {
 			e.preventDefault();
 			return;
 		}
-		let a = H()[i];
+		let a = G()[i];
 		if (t.itemDraggable && !t.itemDraggable(a)) {
 			e.preventDefault();
 			return;
@@ -202,13 +243,13 @@ function E(C, E) {
 					opacity: "1",
 					zIndex: "9999",
 					transform: "none"
-				}), i.classList.remove(...(t.draggingClass || "").split(/\s+/).filter(Boolean), ...(t.dropZoneClass || "").split(/\s+/).filter(Boolean)), document.body.appendChild(i), z = i;
+				}), i.classList.remove(...(t.draggingClass || "").split(/\s+/).filter(Boolean), ...(t.dropZoneClass || "").split(/\s+/).filter(Boolean)), document.body.appendChild(i), L = i;
 				let a = typeof e.offsetX == "number" ? e.offsetX : r.width / 2, o = typeof e.offsetY == "number" ? e.offsetY : r.height / 2;
 				e.dataTransfer.setDragImage(i, a, o);
 			} catch {}
 		}
-		P.value = r, R = null, V = null, f({
-			sourceId: k,
+		M.value = r, I = null, z = null, m({
+			sourceId: D,
 			group: t.group,
 			itemKey: r,
 			item: a,
@@ -220,11 +261,11 @@ function E(C, E) {
 			event: e
 		});
 	}
-	function fe(t, n, i, a, o, s) {
+	function Ce(t, n, i, a, o, s) {
 		if (!t || !n || t === n || o < 0 || s < 0 || o === s) return !1;
 		let c = t.getAttribute(S);
-		if (c == null || String(c) === String(R)) return !1;
-		let l = G(), u = t.getBoundingClientRect(), d = l.threshold || {
+		if (c == null || String(c) === String(I)) return !1;
+		let l = J(), u = t.getBoundingClientRect(), d = l.threshold || {
 			horizontal: 0,
 			vertical: 0
 		}, f = l.orientation || "vertical", p = o < s;
@@ -245,139 +286,133 @@ function E(C, E) {
 		let m = n.getBoundingClientRect(), h = e(m, u);
 		return r(h, u, i, a, d);
 	}
-	function pe(e, t) {
-		let n = G(), r = l();
-		if (!r || r.sourceId !== k) return;
-		let a = e.getAttribute(S), s = q(r.itemKey), c = q(a);
-		if (s < 0 || c < 0 || s === c || !fe(e, Y(r.itemKey), t.clientX, t.clientY, s, c)) return;
-		let u = H(), d = i(u, s, c);
-		if (re(d, u, n.itemKey)) return;
-		R = a, B = performance.now() + 80;
-		let p = d.findIndex((e, t) => String(o(e, n.itemKey, t)) === String(r.itemKey));
-		U(d, { reason: "sort" }), f({
+	function we(e, t) {
+		let n = J(), r = d();
+		if (!r || r.sourceId !== D) return;
+		let a = e.getAttribute(S), s = Y(r.itemKey), c = Y(a);
+		if (s < 0 || c < 0 || s === c || !Ce(e, X(r.itemKey), t.clientX, t.clientY, s, c)) return;
+		let l = G(), u = i(l, s, c);
+		if (oe(u, l, n.itemKey)) return;
+		I = a, R = performance.now() + 80;
+		let f = u.findIndex((e, t) => String(o(e, n.itemKey, t)) === String(r.itemKey));
+		K(u, { reason: "sort" }), m({
 			...r,
-			fromIndex: p
+			fromIndex: f
 		}), n.onSort?.({
 			item: r.item,
 			fromIndex: s,
-			toIndex: p,
+			toIndex: f,
 			previousPosition: s,
-			position: p,
-			items: d,
+			position: f,
+			items: u,
 			event: t
 		});
 	}
-	function me(e) {
-		let n = G(), r = l();
-		if (!r || r.sourceId === k || !n.group || n.group !== r.group || performance.now() < B) return;
-		let i = u(r.group).find((e) => e.id === r.sourceId);
+	function Te(e) {
+		let n = J(), r = d();
+		if (!r || r.sourceId === D || !n.group || n.group !== r.group || performance.now() < R) return;
+		let i = f(r.group).find((e) => e.id === r.sourceId);
 		if (!i) return;
-		let s = W(), c = Y(r.itemKey), d = t(s, e.clientX, e.clientY, n.orientation || "vertical", c), p = `${r.sourceId}:${d}:${r.itemKey}`;
-		if (p === V) return;
-		let m = i.getValues().findIndex((e, t) => {
+		let s = q(), c = X(r.itemKey), l = t(s, e.clientX, e.clientY, n.orientation || "vertical", c), u = `${r.sourceId}:${l}:${r.itemKey}`;
+		if (u === z) return;
+		let p = i.getValues().findIndex((e, t) => {
 			let n = o(e, i.getConfig().itemKey, t);
 			return String(n) === String(r.itemKey);
 		});
-		if (m < 0) return;
-		let { source: h, target: g, item: _ } = a(i.getValues(), m, H(), d);
-		_ !== void 0 && (V = p, R = null, B = performance.now() + 80, i.setValues(h, { reason: "transfer-out" }), U(g, { reason: "transfer-in" }), f({
+		if (p < 0) return;
+		let { source: h, target: g, item: _ } = a(i.getValues(), p, G(), l);
+		_ !== void 0 && (z = u, I = null, R = performance.now() + 80, i.setValues(h, { reason: "transfer-out" }), K(g, { reason: "transfer-in" }), m({
 			...r,
-			sourceId: k,
-			fromIndex: d,
+			sourceId: D,
+			fromIndex: l,
 			item: _
 		}), n.onTransfer?.({
 			item: _,
-			fromIndex: m,
-			toIndex: d,
+			fromIndex: p,
+			toIndex: l,
 			sourceItems: h,
 			targetItems: g,
 			event: e
 		}));
 	}
-	function Q(e) {
-		let t = G(), r = l();
+	function Ee(e) {
+		let t = J(), r = d();
 		if (!r || t.disabled) return;
-		let i = r.sourceId === k, a = !!t.group && t.group === r.group;
-		!i && !a || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), !L && (L = requestAnimationFrame(() => {
-			L = null;
-			let r = l();
+		let i = r.sourceId === D, a = !!t.group && t.group === r.group;
+		!i && !a || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), _e(e.clientX, e.clientY), !F && (F = requestAnimationFrame(() => {
+			F = null;
+			let r = d();
 			if (!r) return;
-			let i = r.sourceId === k, a = !!t.group && t.group === r.group;
+			let i = r.sourceId === D, a = !!t.group && t.group === r.group;
 			if (i && t.sortable) {
-				let t = W(), i = Y(r.itemKey), a = n(t, e.clientX, e.clientY, i);
+				let t = q(), i = X(r.itemKey), a = n(t, e.clientX, e.clientY, i);
 				if (!a) {
-					R = null;
+					I = null;
 					return;
 				}
-				if (performance.now() < B) {
-					R = a.getAttribute(S);
+				if (performance.now() < R) {
+					I = a.getAttribute(S);
 					return;
 				}
-				pe(a, e);
+				we(a, e);
 				return;
 			}
-			!i && a && me(e);
+			!i && a && Te(e);
 		})));
 	}
-	function he(e) {
+	function De(e) {
 		e.preventDefault();
-		let t = G(), n = l();
-		!n || t.disabled || n.sourceId !== k && me(e);
+		let t = J(), n = d();
+		!n || t.disabled || n.sourceId !== D && Te(e);
 	}
-	function ge(e) {
-		let t = l();
-		if (!t && !z) {
-			P.value = null, $();
+	function Oe(e) {
+		let t = d();
+		if (!t && !L) {
+			M.value = null, Z(), Q();
 			return;
 		}
-		let n = G(), r = t?.itemKey ?? N.value, i = r == null ? -1 : q(r), a = i >= 0 ? H()[i] : t?.item, o = r == null ? null : Y(r);
-		n.dragHandle && o && (o.draggable = !1), le(), c(), $(), n.onDragend?.({
+		let n = J(), r = t?.itemKey ?? j.value, i = r == null ? -1 : Y(r), a = i >= 0 ? G()[i] : t?.item, o = r == null ? null : X(r);
+		n.dragHandle && o && (o.draggable = !1), he(), u(), Q(), n.onDragend?.({
 			item: a,
 			index: i,
 			key: r,
 			event: e
 		});
 	}
-	function _e(e) {
-		ge(e);
+	function ke(e) {
+		Oe(e);
 	}
-	function ve(e) {
-		ge(e);
+	function Ae(e) {
+		Oe(e);
 	}
-	function ye() {
-		document.addEventListener("dragend", ve, !0);
+	function je(e) {
+		P !== e && (Me(), P = e, e && (e.addEventListener("pointerdown", xe, !0), e.addEventListener("pointerup", $, !0), e.addEventListener("pointercancel", $, !0), e.addEventListener("dragstart", Se), e.addEventListener("dragover", Ee), e.addEventListener("drop", De), e.addEventListener("dragend", ke)));
 	}
-	function $() {
-		document.removeEventListener("dragend", ve, !0);
-	}
-	function be(e) {
-		I !== e && (xe(), I = e, e && (e.addEventListener("pointerdown", ue, !0), e.addEventListener("pointerup", Z, !0), e.addEventListener("pointercancel", Z, !0), e.addEventListener("dragstart", de), e.addEventListener("dragover", Q), e.addEventListener("drop", he), e.addEventListener("dragend", _e)));
-	}
-	function xe() {
-		I &&= (I.removeEventListener("pointerdown", ue, !0), I.removeEventListener("pointerup", Z, !0), I.removeEventListener("pointercancel", Z, !0), I.removeEventListener("dragstart", de), I.removeEventListener("dragover", Q), I.removeEventListener("drop", he), I.removeEventListener("dragend", _e), null);
-	}
-	b(() => y(j), (e) => {
-		be(e), e && X();
-	}, { flush: "post" }), b(() => H().length, () => {
-		X();
-	}), _(() => {
-		K(), be(W()), X();
-	}), g(() => {
-		L && cancelAnimationFrame(L), $(), xe(), F && p(F), F = null, l()?.sourceId === k && c();
+	function Me() {
+		P &&= (P.removeEventListener("pointerdown", xe, !0), P.removeEventListener("pointerup", $, !0), P.removeEventListener("pointercancel", $, !0), P.removeEventListener("dragstart", Se), P.removeEventListener("dragover", Ee), P.removeEventListener("drop", De), P.removeEventListener("dragend", ke), null);
+	}
+	b(() => y(k), (e) => {
+		je(e), e && be();
+	}, { flush: "post" }), b(() => G().length, () => {
+		be();
+	}), te(() => {
+		de(), je(q()), be();
+	}), ee(() => {
+		F && cancelAnimationFrame(F), Z(), Q(), Me(), N && h(N), N = null, d()?.sourceId === D && u();
 	});
-	let Se = v(!!ae.dragHandle);
-	return b(() => !!G().dragHandle, (e) => {
-		Se.value = e;
+	let Ne = v(!!le.dragHandle);
+	return b(() => !!J().dragHandle, (e) => {
+		Ne.value = e;
 	}), [
-		j,
-		M,
-		oe,
+		k,
+		A,
+		ue,
 		{
-			draggingKey: N,
-			armedKey: P,
-			hasDragHandle: Se
+			draggingKey: j,
+			armedKey: M,
+			hasDragHandle: Ne
 		}
 	];
 }
 //#endregion
-export { x as KUN_DND_ITEM_ATTR, S as KUN_DND_KEY_ATTR, o as resolveItemKey, E as useKunDragAndDrop, T as validateDragHandle };
+export { x as KUN_DND_ITEM_ATTR, S as KUN_DND_KEY_ATTR, o as resolveItemKey, ce as useKunDragAndDrop, w as validateDragHandle };

package/dist/components/KunDragAndDrop/src/utils/kunDragAndDropScroll.js

@@ -0,0 +1,46 @@
+//#region src/components/KunDragAndDrop/src/utils/kunDragAndDropScroll.js
+function e(e) {
+	if (!e || e.nodeType !== 1) return !1;
+	let t = window.getComputedStyle(e), n = t.overflowY, r = t.overflowX, i = (n === "auto" || n === "scroll" || n === "overlay") && e.scrollHeight > e.clientHeight + 1, a = (r === "auto" || r === "scroll" || r === "overlay") && e.scrollWidth > e.clientWidth + 1;
+	return i || a;
+}
+function t(t) {
+	let n = t?.nodeType === 1 ? t : t?.parentElement;
+	for (; n && n !== document.body && n !== document.documentElement;) {
+		if (e(n)) return n;
+		n = n.parentElement;
+	}
+	return document.scrollingElement || document.documentElement || null;
+}
+function n(e, t, n, r = {}) {
+	let i = Math.max(0, Number(r.sensitivity ?? 50)), a = Math.max(0, Number(r.speed ?? 12));
+	if (!n || a === 0 || i === 0) return {
+		dx: 0,
+		dy: 0
+	};
+	let o = n.getBoundingClientRect(), s = 0, c = 0, l = n.scrollHeight - n.clientHeight, u = n.scrollWidth - n.clientWidth;
+	if (l > 0) {
+		if (t < o.top + i) {
+			let e = 1 - Math.max(0, t - o.top) / i;
+			c = -Math.ceil(a * e);
+		} else if (t > o.bottom - i) {
+			let e = 1 - Math.max(0, o.bottom - t) / i;
+			c = Math.ceil(a * e);
+		}
+	}
+	if (u > 0) {
+		if (e < o.left + i) {
+			let t = 1 - Math.max(0, e - o.left) / i;
+			s = -Math.ceil(a * t);
+		} else if (e > o.right - i) {
+			let t = 1 - Math.max(0, o.right - e) / i;
+			s = Math.ceil(a * t);
+		}
+	}
+	return {
+		dx: s,
+		dy: c
+	};
+}
+//#endregion
+export { t as findScrollParent, n as getAutoScrollDelta };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.640",
+  "version": "0.1.641",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",