@milaboratories/uikit 2.10.37 → 2.10.39

package/dist/composition/useSortable.js

@@ -1,118 +1,109 @@
-import { computed as _, watchEffect as D } from "vue";
-import { useEventListener as E } from "./useEventListener.js";
-const l = {
-  item: "sortable__item",
-  animate: "sortable__animate"
-}, f = (a) => a.getBoundingClientRect().y, L = (a) => {
-  const { y: c, height: e } = a.getBoundingClientRect();
-  return c + Math.ceil(e / 2);
-}, S = (a) => {
-  const { y: c, height: e } = a.getBoundingClientRect();
-  return c + e;
+import { useEventListener as e } from "./useEventListener.js";
+import { computed as t, watchEffect as n } from "vue";
+var r = {
+	item: "sortable__item",
+	animate: "sortable__animate"
+}, i = (e) => e.getBoundingClientRect().y, a = (e) => {
+	let { y: t, height: n } = e.getBoundingClientRect();
+	return t + Math.ceil(n / 2);
+}, o = (e) => {
+	let { y: t, height: n } = e.getBoundingClientRect();
+	return t + n;
 };
-function M(a, c) {
-  const e = {
-    item: void 0,
-    options() {
-      var t;
-      return [...((t = a.value) == null ? void 0 : t.children) ?? []];
-    }
-  }, p = _(() => e.options()), y = c.shakeBuffer ?? 10, w = c.reorderDelay ?? 100;
-  function v(t) {
-    const n = c.handle ? this.querySelector(c.handle) : null;
-    n && (n && !n.contains(t.target) || (this.classList.remove(l.animate), this.classList.add(l.item), e.item = {
-      el: this,
-      y: t.y,
-      dy: 0,
-      orderChanged: !1
-    }));
-  }
-  function C(t) {
-    const n = e.options();
-    return n.slice(0, n.indexOf(t));
-  }
-  function b(t) {
-    const n = e.options();
-    return n.slice(n.indexOf(t) + 1);
-  }
-  function B(t, n) {
-    const i = e.options().filter((s) => s !== n), r = i.indexOf(t);
-    return i.splice(r, 0, n), i;
-  }
-  function A(t, n) {
-    const i = e.options().filter((s) => s !== n), r = i.indexOf(t);
-    return i.splice(r + 1, 0, n), i;
-  }
-  function O(t, n) {
-    t.dy = n - t.y, t.el.style.setProperty("transform", `translateY(${t.dy}px)`);
-  }
-  function g(t) {
-    var x;
-    if (!e.item)
-      return;
-    const { el: n } = e.item;
-    if (!n.isConnected) {
-      e.item = void 0;
-      return;
-    }
-    const i = t.map((o) => f(o)), r = f(n);
-    (x = a.value) == null || x.replaceChildren(...t);
-    const s = f(n), u = t.map((o) => f(o)), m = [];
-    for (let o = 0; o < u.length; o++) {
-      const h = t[o];
-      if (h === e.item.el)
-        continue;
-      const P = u[o], Y = i[o] - P;
-      h.style.transform = `translateY(${Y}px)`, m.push(h);
-    }
-    const d = s - r;
-    e.item.y = e.item.y + d, e.item.dy = e.item.dy - d, e.item.orderChanged = !0, e.item.el.style.setProperty("transform", `translateY(${e.item.dy}px)`), m.forEach((o) => o.classList.remove(l.animate)), requestAnimationFrame(function() {
-      m.forEach((o) => {
-        o.classList.add(l.animate), o.style.transform = "", o.addEventListener("transitionend", () => {
-          o.classList.remove(l.animate);
-        });
-      });
-    });
-  }
-  E(window, "mousemove", (t) => {
-    if (!e.item)
-      return;
-    const { el: n } = e.item;
-    O(e.item, t.y);
-    const i = f(e.item.el), r = S(e.item.el), s = C(n), u = b(n);
-    s.forEach((m) => {
-      const d = L(m);
-      i + y < d && g(B(m, n));
-    }), u.forEach((m) => {
-      const d = L(m);
-      r - y > d && g(A(m, n));
-    });
-  }), E(window, "mouseup", () => {
-    if (!e.item)
-      return;
-    const { el: t, orderChanged: n } = e.item;
-    t.classList.add(l.animate), t.style.removeProperty("transform"), t.addEventListener("transitionend", () => {
-      t.classList.remove(l.animate, l.item);
-    }), setTimeout(() => {
-      if (!n)
-        return;
-      const i = e.options().map((s) => Number(s.getAttribute("data-index"))), r = a.value;
-      if (r) {
-        for (const s of e.options())
-          r.removeChild(s);
-        p.value.forEach((s) => {
-          r.appendChild(s);
-        });
-      }
-      c.onChange(i);
-    }, w), e.item = void 0;
-  }), D(() => {
-    p.value.forEach((t, n) => {
-      t.removeEventListener("mousedown", v), t.addEventListener("mousedown", v), t.setAttribute("data-index", String(n));
-    });
-  });
+function s(s, c) {
+	let l = {
+		item: void 0,
+		options() {
+			return [...s.value?.children ?? []];
+		}
+	}, u = t(() => l.options()), d = c.shakeBuffer ?? 10, f = c.reorderDelay ?? 100;
+	function p(e) {
+		let t = c.handle ? this.querySelector(c.handle) : null;
+		t && (t && !t.contains(e.target) || (this.classList.remove(r.animate), this.classList.add(r.item), l.item = {
+			el: this,
+			y: e.y,
+			dy: 0,
+			orderChanged: !1
+		}));
+	}
+	function m(e) {
+		let t = l.options();
+		return t.slice(0, t.indexOf(e));
+	}
+	function h(e) {
+		let t = l.options();
+		return t.slice(t.indexOf(e) + 1);
+	}
+	function g(e, t) {
+		let n = l.options().filter((e) => e !== t), r = n.indexOf(e);
+		return n.splice(r, 0, t), n;
+	}
+	function _(e, t) {
+		let n = l.options().filter((e) => e !== t), r = n.indexOf(e);
+		return n.splice(r + 1, 0, t), n;
+	}
+	function v(e, t) {
+		e.dy = t - e.y, e.el.style.setProperty("transform", `translateY(${e.dy}px)`);
+	}
+	function y(e) {
+		if (!l.item) return;
+		let { el: t } = l.item;
+		if (!t.isConnected) {
+			l.item = void 0;
+			return;
+		}
+		let n = e.map((e) => i(e)), a = i(t);
+		s.value?.replaceChildren(...e);
+		let o = i(t), c = e.map((e) => i(e)), u = [];
+		for (let t = 0; t < c.length; t++) {
+			let r = e[t];
+			if (r === l.item.el) continue;
+			let i = c[t], a = n[t] - i;
+			r.style.transform = `translateY(${a}px)`, u.push(r);
+		}
+		let d = o - a;
+		l.item.y = l.item.y + d, l.item.dy = l.item.dy - d, l.item.orderChanged = !0, l.item.el.style.setProperty("transform", `translateY(${l.item.dy}px)`), u.forEach((e) => e.classList.remove(r.animate)), requestAnimationFrame(function() {
+			u.forEach((e) => {
+				e.classList.add(r.animate), e.style.transform = "", e.addEventListener("transitionend", () => {
+					e.classList.remove(r.animate);
+				});
+			});
+		});
+	}
+	e(window, "mousemove", (e) => {
+		if (!l.item) return;
+		let { el: t } = l.item;
+		v(l.item, e.y);
+		let n = i(l.item.el), r = o(l.item.el), s = m(t), c = h(t);
+		s.forEach((e) => {
+			let r = a(e);
+			n + d < r && y(g(e, t));
+		}), c.forEach((e) => {
+			let n = a(e);
+			r - d > n && y(_(e, t));
+		});
+	}), e(window, "mouseup", () => {
+		if (!l.item) return;
+		let { el: e, orderChanged: t } = l.item;
+		e.classList.add(r.animate), e.style.removeProperty("transform"), e.addEventListener("transitionend", () => {
+			e.classList.remove(r.animate, r.item);
+		}), setTimeout(() => {
+			if (!t) return;
+			let e = l.options().map((e) => Number(e.getAttribute("data-index"))), n = s.value;
+			if (n) {
+				for (let e of l.options()) n.removeChild(e);
+				u.value.forEach((e) => {
+					n.appendChild(e);
+				});
+			}
+			c.onChange(e);
+		}, f), l.item = void 0;
+	}), n(() => {
+		u.value.forEach((e, t) => {
+			e.removeEventListener("mousedown", p), e.addEventListener("mousedown", p), e.setAttribute("data-index", String(t));
+		});
+	});
 }
-export {
-  M as useSortable
-};
-//# sourceMappingURL=useSortable.js.map
+export { s as useSortable };
+
+//# sourceMappingURL=useSortable.js.map

package/dist/composition/useSortable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSortable.js","sources":["../../src/composition/useSortable.ts"],"sourcesContent":["import type { Ref } from \"vue\";\nimport { computed, watchEffect } from \"vue\";\nimport { useEventListener } from \"./useEventListener\";\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: \"sortable__item\",\n  animate: \"sortable__animate\",\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\nexport function useSortable(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    item.dy = y - item.y;\n    item.el.style.setProperty(\"transform\", `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty(\"transform\", `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = \"\";\n        option.addEventListener(\"transitionend\", () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, \"mousemove\", (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n  });\n\n  useEventListener(window, \"mouseup\", () => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty(\"transform\");\n\n    el.addEventListener(\"transitionend\", () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute(\"data-index\")));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener(\"mousedown\", mouseDown);\n      child.addEventListener(\"mousedown\", mouseDown);\n      child.setAttribute(\"data-index\", String(i));\n    });\n  });\n}\n"],"names":["classes","getOffset","el","getMiddle","y","height","getBottom","useSortable","listRef","settings","state","_a","optionsRef","computed","shakeBuffer","reorderDelay","mouseDown","e","handle","elementsBefore","options","elementsAfter","children","insertBefore","before","index","insertAfter","after","updatePosition","item","changeOrder","reordered","oldPositions","y1","y2","newPositions","toAnimate","i","option","newY","invert","dy","useEventListener","upper","bottom","orderChanged","newIndices","o","list","child","watchEffect"],"mappings":"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"}
+{"version":3,"file":"useSortable.js","names":[],"sources":["../../src/composition/useSortable.ts"],"sourcesContent":["import type { Ref } from \"vue\";\nimport { computed, watchEffect } from \"vue\";\nimport { useEventListener } from \"./useEventListener\";\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: \"sortable__item\",\n  animate: \"sortable__animate\",\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\nexport function useSortable(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    item.dy = y - item.y;\n    item.el.style.setProperty(\"transform\", `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty(\"transform\", `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = \"\";\n        option.addEventListener(\"transitionend\", () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, \"mousemove\", (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n  });\n\n  useEventListener(window, \"mouseup\", () => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty(\"transform\");\n\n    el.addEventListener(\"transitionend\", () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute(\"data-index\")));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener(\"mousedown\", mouseDown);\n      child.addEventListener(\"mousedown\", mouseDown);\n      child.setAttribute(\"data-index\", String(i));\n    });\n  });\n}\n"],"mappings":";;AAmBA,IAAM,IAAU;CACd,MAAM;CACN,SAAS;CACV,EAEK,KAAa,MACV,EAAG,uBAAuB,CAAC,GAG9B,KAAa,MAAoB;CACrC,IAAM,EAAE,MAAG,cAAW,EAAG,uBAAuB;AAChD,QAAO,IAAI,KAAK,KAAK,IAAS,EAAE;GAG5B,KAAa,MAAoB;CACrC,IAAM,EAAE,MAAG,cAAW,EAAG,uBAAuB;AAChD,QAAO,IAAI;;AAGb,SAAgB,EAAY,GAAuC,GAA4B;CAC7F,IAAM,IAAQ;EACZ,MAAM,KAAA;EACN,UAAU;AACR,UAAO,CAAC,GAAI,EAAQ,OAAO,YAAY,EAAE,CAAE;;EAE9C,EAEK,IAAa,QACV,EAAM,SAAS,CACtB,EAEI,IAAc,EAAS,eAAe,IAEtC,IAAe,EAAS,gBAAgB;CAE9C,SAAS,EAA6B,GAA8C;EAClF,IAAM,IAAS,EAAS,SAAS,KAAK,cAAc,EAAS,OAAO,GAAG;AAElE,QAID,KAAU,CAAC,EAAO,SAAS,EAAE,OAAsB,KAIvD,KAAK,UAAU,OAAO,EAAQ,QAAQ,EACtC,KAAK,UAAU,IAAI,EAAQ,KAAK,EAEhC,EAAM,OAAO;GACX,IAAI;GACJ,GAAG,EAAE;GACL,IAAI;GACJ,cAAc;GACf;;CAGH,SAAS,EAAe,GAAiB;EACvC,IAAM,IAAU,EAAM,SAAS;AAC/B,SAAO,EAAQ,MAAM,GAAG,EAAQ,QAAQ,EAAG,CAAC;;CAG9C,SAAS,EAAc,GAAiB;EACtC,IAAM,IAAW,EAAM,SAAS;AAChC,SAAO,EAAS,MAAM,EAAS,QAAQ,EAAG,GAAG,EAAE;;CAGjD,SAAS,EAAa,GAAqB,GAAiB;EAC1D,IAAM,IAAW,EAAM,SAAS,CAAC,QAAQ,MAAM,MAAM,EAAG,EAClD,IAAQ,EAAS,QAAQ,EAAO;AAEtC,SADA,EAAS,OAAO,GAAO,GAAG,EAAG,EACtB;;CAGT,SAAS,EAAY,GAAoB,GAAiB;EACxD,IAAM,IAAW,EAAM,SAAS,CAAC,QAAQ,MAAM,MAAM,EAAG,EAClD,IAAQ,EAAS,QAAQ,EAAM;AAErC,SADA,EAAS,OAAO,IAAQ,GAAG,GAAG,EAAG,EAC1B;;CAGT,SAAS,EAAe,GAAoB,GAAW;AAErD,EADA,EAAK,KAAK,IAAI,EAAK,GACnB,EAAK,GAAG,MAAM,YAAY,aAAa,cAAc,EAAK,GAAG,KAAK;;CAGpE,SAAS,EAAY,GAA0B;AAC7C,MAAI,CAAC,EAAM,KACT;EAGF,IAAM,EAAE,UAAO,EAAM;AAErB,MAAI,CAAC,EAAG,aAAa;AACnB,KAAM,OAAO,KAAA;AACb;;EAGF,IAAM,IAAe,EAAU,KAAK,MAAM,EAAU,EAAE,CAAC,EAEjD,IAAK,EAAU,EAAG;AACxB,IAAQ,OAAO,gBAAgB,GAAG,EAAU;EAC5C,IAAM,IAAK,EAAU,EAAG,EAElB,IAAe,EAAU,KAAK,MAAM,EAAU,EAAE,CAAC,EAEjD,IAA2B,EAAE;AAEnC,OAAK,IAAI,IAAI,GAAG,IAAI,EAAa,QAAQ,KAAK;GAC5C,IAAM,IAAS,EAAU;AAEzB,OAAI,MAAW,EAAM,KAAK,GACxB;GAGF,IAAM,IAAO,EAAa,IAIpB,IAFO,EAAa,KAEJ;AAItB,GAFA,EAAO,MAAM,YAAY,cAAc,EAAO,MAE9C,EAAU,KAAK,EAAO;;EAGxB,IAAM,IAAK,IAAK;AAShB,EAPA,EAAM,KAAK,IAAI,EAAM,KAAK,IAAI,GAC9B,EAAM,KAAK,KAAK,EAAM,KAAK,KAAK,GAChC,EAAM,KAAK,eAAe,IAC1B,EAAM,KAAK,GAAG,MAAM,YAAY,aAAa,cAAc,EAAM,KAAK,GAAG,KAAK,EAE9E,EAAU,SAAS,MAAM,EAAE,UAAU,OAAO,EAAQ,QAAQ,CAAC,EAE7D,sBAAsB,WAAY;AAChC,KAAU,SAAS,MAAW;AAG5B,IAFA,EAAO,UAAU,IAAI,EAAQ,QAAQ,EACrC,EAAO,MAAM,YAAY,IACzB,EAAO,iBAAiB,uBAAuB;AAC7C,OAAO,UAAU,OAAO,EAAQ,QAAQ;MACxC;KACF;IACF;;AA0EJ,CAvEA,EAAiB,QAAQ,cAAc,MAAqB;AAC1D,MAAI,CAAC,EAAM,KACT;EAGF,IAAM,EAAE,UAAO,EAAM;AAErB,IAAe,EAAM,MAAM,EAAE,EAAE;EAE/B,IAAM,IAAQ,EAAU,EAAM,KAAK,GAAG,EAChC,IAAS,EAAU,EAAM,KAAK,GAAG,EAEjC,IAAS,EAAe,EAAG,EAC3B,IAAQ,EAAc,EAAG;AAU/B,EARA,EAAO,SAAS,MAAM;GACpB,IAAM,IAAI,EAAU,EAAE;AAEtB,GAAI,IAAQ,IAAc,KACxB,EAAY,EAAa,GAAG,EAAG,CAAC;IAElC,EAEF,EAAM,SAAS,MAAM;GACnB,IAAM,IAAI,EAAU,EAAE;AAEtB,GAAI,IAAS,IAAc,KACzB,EAAY,EAAY,GAAG,EAAG,CAAC;IAEjC;GACF,EAEF,EAAiB,QAAQ,iBAAiB;AACxC,MAAI,CAAC,EAAM,KACT;EAGF,IAAM,EAAE,OAAI,oBAAiB,EAAM;AA+BnC,EA7BA,EAAG,UAAU,IAAI,EAAQ,QAAQ,EACjC,EAAG,MAAM,eAAe,YAAY,EAEpC,EAAG,iBAAiB,uBAAuB;AACzC,KAAG,UAAU,OAAO,EAAQ,SAAS,EAAQ,KAAK;IAClD,EAEF,iBAAiB;AACf,OAAI,CAAC,EACH;GAGF,IAAM,IAAa,EAAM,SAAS,CAAC,KAAK,MAAM,OAAO,EAAE,aAAa,aAAa,CAAC,CAAC,EAE7E,IAAO,EAAQ;AAErB,OAAI,GAAM;AACR,SAAK,IAAM,KAAS,EAAM,SAAS,CACjC,GAAK,YAAY,EAAM;AAGzB,MAAW,MAAM,SAAS,MAAU;AAClC,OAAK,YAAY,EAAM;MACvB;;AAGJ,KAAS,SAAS,EAAW;KAC5B,EAAa,EAEhB,EAAM,OAAO,KAAA;GACb,EAEF,QAAkB;AAChB,IAAW,MAAM,SAAS,GAAO,MAAM;AAGrC,GAFA,EAAM,oBAAoB,aAAa,EAAU,EACjD,EAAM,iBAAiB,aAAa,EAAU,EAC9C,EAAM,aAAa,cAAc,OAAO,EAAE,CAAC;IAC3C;GACF"}

package/dist/composition/useSortable2.js

@@ -1,139 +1,132 @@
-import { watch as P, computed as D, watchEffect as _ } from "vue";
-import { useEventListener as T } from "./useEventListener.js";
-const m = {
-  item: "sortable__item",
-  animate: "sortable__animate"
-}, p = (o) => o.getBoundingClientRect().y, x = (o) => {
-  const { y: u, height: n } = o.getBoundingClientRect();
-  return u + Math.ceil(n / 2);
-}, $ = (o) => {
-  const { y: u, height: n } = o.getBoundingClientRect();
-  return u + n;
+import { useEventListener as e } from "./useEventListener.js";
+import { computed as t, watch as n, watchEffect as r } from "vue";
+var i = {
+	item: "sortable__item",
+	animate: "sortable__animate"
+}, a = (e) => e.getBoundingClientRect().y, o = (e) => {
+	let { y: t, height: n } = e.getBoundingClientRect();
+	return t + Math.ceil(n / 2);
+}, s = (e) => {
+	let { y: t, height: n } = e.getBoundingClientRect();
+	return t + n;
 };
-function F(o, u) {
-  const n = {
-    item: void 0,
-    options() {
-      var t;
-      return [...((t = o.value) == null ? void 0 : t.children) ?? []];
-    }
-  };
-  let v = 0;
-  P(
-    () => o.value,
-    () => {
-      setTimeout(() => {
-        o.value && (o.value.scrollTop = v);
-      }, 0);
-    }
-  );
-  const y = D(() => n.options()), g = u.shakeBuffer ?? 10, E = u.reorderDelay ?? 100;
-  function C(t) {
-    var i;
-    const e = u.handle ? this.querySelector(u.handle) : null;
-    e && (e && !e.contains(t.target) || (this.classList.remove(m.animate), this.classList.add(m.item), n.item = {
-      el: this,
-      y: t.y,
-      dy: 0,
-      initialScrollTop: ((i = o.value) == null ? void 0 : i.scrollTop) || 0,
-      orderChanged: !1
-    }));
-  }
-  function L(t) {
-    const e = n.options();
-    return e.slice(0, e.indexOf(t));
-  }
-  function B(t) {
-    const e = n.options();
-    return e.slice(e.indexOf(t) + 1);
-  }
-  function Y(t, e) {
-    const i = n.options().filter((s) => s !== e), a = i.indexOf(t);
-    return i.splice(a, 0, e), i;
-  }
-  function b(t, e) {
-    const i = n.options().filter((s) => s !== e), a = i.indexOf(t);
-    return i.splice(a + 1, 0, e), i;
-  }
-  function S(t, e) {
-    var s;
-    const a = (((s = o.value) == null ? void 0 : s.scrollTop) || 0) - (t.initialScrollTop || 0);
-    t.dy = e - t.y + a, t.el.style.setProperty("transform", `translateY(${t.dy}px)`);
-  }
-  function w(t) {
-    var f;
-    if (!n.item)
-      return;
-    const { el: e } = n.item;
-    if (!e.isConnected) {
-      n.item = void 0;
-      return;
-    }
-    const i = t.map((r) => p(r)), a = p(e);
-    (f = o.value) == null || f.replaceChildren(...t);
-    const s = p(e), l = t.map((r) => p(r)), c = [];
-    for (let r = 0; r < l.length; r++) {
-      const h = t[r];
-      if (h === n.item.el)
-        continue;
-      const A = l[r], O = i[r] - A;
-      h.style.transform = `translateY(${O}px)`, c.push(h);
-    }
-    const d = s - a;
-    n.item.y = n.item.y + d, n.item.dy = n.item.dy - d, n.item.orderChanged = !0, n.item.el.style.setProperty("transform", `translateY(${n.item.dy}px)`), c.forEach((r) => r.classList.remove(m.animate)), requestAnimationFrame(function() {
-      c.forEach((r) => {
-        r.classList.add(m.animate), r.style.transform = "", r.addEventListener("transitionend", () => {
-          r.classList.remove(m.animate);
-        });
-      });
-    });
-  }
-  T(window, "mousemove", (t) => {
-    if (!n.item)
-      return;
-    const { el: e } = n.item;
-    S(n.item, t.y);
-    const i = p(n.item.el), a = $(n.item.el), s = L(e), l = B(e);
-    if (s.forEach((c) => {
-      const d = x(c);
-      i + g < d && w(Y(c, e));
-    }), l.forEach((c) => {
-      const d = x(c);
-      a - g > d && w(b(c, e));
-    }), o.value) {
-      const c = o.value.getBoundingClientRect(), d = c.top + e.getBoundingClientRect().height / 2;
-      t.clientY < d && (o.value.scrollTop += t.clientY - d);
-      const f = c.bottom - e.getBoundingClientRect().height / 2;
-      t.clientY > f && (o.value.scrollTop += t.clientY - f);
-    }
-  }), T(window, "mouseup", () => {
-    var i;
-    if (!n.item)
-      return;
-    v = ((i = o.value) == null ? void 0 : i.scrollTop) || 0;
-    const { el: t, orderChanged: e } = n.item;
-    t.classList.add(m.animate), t.style.removeProperty("transform"), t.addEventListener("transitionend", () => {
-      t.classList.remove(m.animate, m.item);
-    }), setTimeout(() => {
-      if (!e)
-        return;
-      const a = n.options().map((l) => Number(l.getAttribute("data-index"))), s = o.value;
-      if (s) {
-        for (const l of n.options())
-          s.removeChild(l);
-        y.value.forEach((l) => {
-          s.appendChild(l);
-        });
-      }
-      u.onChange(a);
-    }, E), n.item = void 0;
-  }), _(() => {
-    y.value.forEach((t, e) => {
-      t.removeEventListener("mousedown", C), t.addEventListener("mousedown", C), t.setAttribute("data-index", String(e));
-    });
-  });
+/**
+* Description: Scroll support has been added to the container where sorting takes place.
+* Some functionality duplicates the behavior of useScrollable.
+*
+* Purpose: To enable automatic scrolling when dragging items beyond the visible area of the container.
+* Future Plan:
+* - Verify the behavior of the new scrolling functionality within blocks and text elements.
+* - Merge the current implementation with useScrollable to eliminate code duplication and create a unified scrolling solution.
+*/
+function c(c, l) {
+	let u = {
+		item: void 0,
+		options() {
+			return [...c.value?.children ?? []];
+		}
+	}, d = 0;
+	n(() => c.value, () => {
+		setTimeout(() => {
+			c.value && (c.value.scrollTop = d);
+		}, 0);
+	});
+	let f = t(() => u.options()), p = l.shakeBuffer ?? 10, m = l.reorderDelay ?? 100;
+	function h(e) {
+		let t = l.handle ? this.querySelector(l.handle) : null;
+		t && (t && !t.contains(e.target) || (this.classList.remove(i.animate), this.classList.add(i.item), u.item = {
+			el: this,
+			y: e.y,
+			dy: 0,
+			initialScrollTop: c.value?.scrollTop || 0,
+			orderChanged: !1
+		}));
+	}
+	function g(e) {
+		let t = u.options();
+		return t.slice(0, t.indexOf(e));
+	}
+	function _(e) {
+		let t = u.options();
+		return t.slice(t.indexOf(e) + 1);
+	}
+	function v(e, t) {
+		let n = u.options().filter((e) => e !== t), r = n.indexOf(e);
+		return n.splice(r, 0, t), n;
+	}
+	function y(e, t) {
+		let n = u.options().filter((e) => e !== t), r = n.indexOf(e);
+		return n.splice(r + 1, 0, t), n;
+	}
+	function b(e, t) {
+		let n = (c.value?.scrollTop || 0) - (e.initialScrollTop || 0);
+		e.dy = t - e.y + n, e.el.style.setProperty("transform", `translateY(${e.dy}px)`);
+	}
+	function x(e) {
+		if (!u.item) return;
+		let { el: t } = u.item;
+		if (!t.isConnected) {
+			u.item = void 0;
+			return;
+		}
+		let n = e.map((e) => a(e)), r = a(t);
+		c.value?.replaceChildren(...e);
+		let o = a(t), s = e.map((e) => a(e)), l = [];
+		for (let t = 0; t < s.length; t++) {
+			let r = e[t];
+			if (r === u.item.el) continue;
+			let i = s[t], a = n[t] - i;
+			r.style.transform = `translateY(${a}px)`, l.push(r);
+		}
+		let d = o - r;
+		u.item.y = u.item.y + d, u.item.dy = u.item.dy - d, u.item.orderChanged = !0, u.item.el.style.setProperty("transform", `translateY(${u.item.dy}px)`), l.forEach((e) => e.classList.remove(i.animate)), requestAnimationFrame(function() {
+			l.forEach((e) => {
+				e.classList.add(i.animate), e.style.transform = "", e.addEventListener("transitionend", () => {
+					e.classList.remove(i.animate);
+				});
+			});
+		});
+	}
+	e(window, "mousemove", (e) => {
+		if (!u.item) return;
+		let { el: t } = u.item;
+		b(u.item, e.y);
+		let n = a(u.item.el), r = s(u.item.el), i = g(t), l = _(t);
+		if (i.forEach((e) => {
+			let r = o(e);
+			n + p < r && x(v(e, t));
+		}), l.forEach((e) => {
+			let n = o(e);
+			r - p > n && x(y(e, t));
+		}), c.value) {
+			let n = c.value.getBoundingClientRect(), r = n.top + t.getBoundingClientRect().height / 2;
+			e.clientY < r && (c.value.scrollTop += e.clientY - r);
+			let i = n.bottom - t.getBoundingClientRect().height / 2;
+			e.clientY > i && (c.value.scrollTop += e.clientY - i);
+		}
+	}), e(window, "mouseup", () => {
+		if (!u.item) return;
+		d = c.value?.scrollTop || 0;
+		let { el: e, orderChanged: t } = u.item;
+		e.classList.add(i.animate), e.style.removeProperty("transform"), e.addEventListener("transitionend", () => {
+			e.classList.remove(i.animate, i.item);
+		}), setTimeout(() => {
+			if (!t) return;
+			let e = u.options().map((e) => Number(e.getAttribute("data-index"))), n = c.value;
+			if (n) {
+				for (let e of u.options()) n.removeChild(e);
+				f.value.forEach((e) => {
+					n.appendChild(e);
+				});
+			}
+			l.onChange(e);
+		}, m), u.item = void 0;
+	}), r(() => {
+		f.value.forEach((e, t) => {
+			e.removeEventListener("mousedown", h), e.addEventListener("mousedown", h), e.setAttribute("data-index", String(t));
+		});
+	});
 }
-export {
-  F as useSortable2
-};
-//# sourceMappingURL=useSortable2.js.map
+export { c as useSortable2 };
+
+//# sourceMappingURL=useSortable2.js.map

package/dist/composition/useSortable2.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSortable2.js","sources":["../../src/composition/useSortable2.ts"],"sourcesContent":["import type { Ref } from \"vue\";\nimport { computed, watch, watchEffect } from \"vue\";\nimport { useEventListener } from \"./useEventListener\";\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n  initialScrollTop: number;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: \"sortable__item\",\n  animate: \"sortable__animate\",\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\n/**\n * Description: Scroll support has been added to the container where sorting takes place.\n * Some functionality duplicates the behavior of useScrollable.\n *\n * Purpose: To enable automatic scrolling when dragging items beyond the visible area of the container.\n * Future Plan:\n * - Verify the behavior of the new scrolling functionality within blocks and text elements.\n * - Merge the current implementation with useScrollable to eliminate code duplication and create a unified scrolling solution.\n */\nexport function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n  let oldScrollTop = 0;\n\n  watch(\n    () => listRef.value,\n    () => {\n      setTimeout(() => {\n        if (listRef.value) {\n          listRef.value.scrollTop = oldScrollTop;\n        }\n      }, 0);\n    },\n  );\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      initialScrollTop: listRef.value?.scrollTop || 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    const currentScrollTop = listRef.value?.scrollTop || 0;\n    const scrollDiff = currentScrollTop - (item.initialScrollTop || 0);\n    item.dy = y - item.y + scrollDiff;\n    item.el.style.setProperty(\"transform\", `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty(\"transform\", `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = \"\";\n        option.addEventListener(\"transitionend\", () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, \"mousemove\", (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n\n    if (listRef.value) {\n      const rect = listRef.value.getBoundingClientRect();\n\n      const deltaUp = rect.top + el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY < deltaUp) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaUp;\n      }\n\n      const deltaDown = rect.bottom - el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY > deltaDown) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaDown;\n      }\n    }\n  });\n\n  useEventListener(window, \"mouseup\", () => {\n    if (!state.item) {\n      return;\n    }\n\n    oldScrollTop = listRef.value?.scrollTop || 0;\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty(\"transform\");\n\n    el.addEventListener(\"transitionend\", () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute(\"data-index\")));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener(\"mousedown\", mouseDown);\n      child.addEventListener(\"mousedown\", mouseDown);\n      child.setAttribute(\"data-index\", String(i));\n    });\n  });\n}\n"],"names":["classes","getOffset","el","getMiddle","y","height","getBottom","useSortable2","listRef","settings","state","_a","oldScrollTop","watch","optionsRef","computed","shakeBuffer","reorderDelay","mouseDown","e","handle","elementsBefore","options","elementsAfter","children","insertBefore","before","index","insertAfter","after","updatePosition","item","scrollDiff","changeOrder","reordered","oldPositions","y1","y2","newPositions","toAnimate","i","option","newY","invert","dy","o","useEventListener","upper","bottom","rect","deltaUp","deltaDown","orderChanged","newIndices","list","child","watchEffect"],"mappings":"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"}
+{"version":3,"file":"useSortable2.js","names":[],"sources":["../../src/composition/useSortable2.ts"],"sourcesContent":["import type { Ref } from \"vue\";\nimport { computed, watch, watchEffect } from \"vue\";\nimport { useEventListener } from \"./useEventListener\";\n\ntype SortableItem = {\n  el: HTMLElement;\n  y: number;\n  dy: number;\n  orderChanged: boolean;\n  initialScrollTop: number;\n};\n\nexport type SortableSettings = {\n  onChange: (indices: number[]) => void;\n  handle?: string;\n  shakeBuffer?: number;\n  reorderDelay?: number;\n  transitionDelay?: string;\n};\n\nconst classes = {\n  item: \"sortable__item\",\n  animate: \"sortable__animate\",\n};\n\nconst getOffset = (el: HTMLElement) => {\n  return el.getBoundingClientRect().y;\n};\n\nconst getMiddle = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + Math.ceil(height / 2);\n};\n\nconst getBottom = (el: HTMLElement) => {\n  const { y, height } = el.getBoundingClientRect();\n  return y + height;\n};\n\n/**\n * Description: Scroll support has been added to the container where sorting takes place.\n * Some functionality duplicates the behavior of useScrollable.\n *\n * Purpose: To enable automatic scrolling when dragging items beyond the visible area of the container.\n * Future Plan:\n * - Verify the behavior of the new scrolling functionality within blocks and text elements.\n * - Merge the current implementation with useScrollable to eliminate code duplication and create a unified scrolling solution.\n */\nexport function useSortable2(listRef: Ref<HTMLElement | undefined>, settings: SortableSettings) {\n  const state = {\n    item: undefined as SortableItem | undefined,\n    options() {\n      return [...(listRef.value?.children ?? [])] as HTMLElement[];\n    },\n  };\n  let oldScrollTop = 0;\n\n  watch(\n    () => listRef.value,\n    () => {\n      setTimeout(() => {\n        if (listRef.value) {\n          listRef.value.scrollTop = oldScrollTop;\n        }\n      }, 0);\n    },\n  );\n\n  const optionsRef = computed(() => {\n    return state.options();\n  });\n\n  const shakeBuffer = settings.shakeBuffer ?? 10;\n\n  const reorderDelay = settings.reorderDelay ?? 100;\n\n  function mouseDown(this: HTMLElement, e: { y: number; target: EventTarget | null }) {\n    const handle = settings.handle ? this.querySelector(settings.handle) : null;\n\n    if (!handle) {\n      return;\n    }\n\n    if (handle && !handle.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    this.classList.remove(classes.animate);\n    this.classList.add(classes.item);\n\n    state.item = {\n      el: this,\n      y: e.y,\n      dy: 0,\n      initialScrollTop: listRef.value?.scrollTop || 0,\n      orderChanged: false,\n    };\n  }\n\n  function elementsBefore(el: HTMLElement) {\n    const options = state.options();\n    return options.slice(0, options.indexOf(el));\n  }\n\n  function elementsAfter(el: HTMLElement) {\n    const children = state.options();\n    return children.slice(children.indexOf(el) + 1);\n  }\n\n  function insertBefore(before: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(before);\n    children.splice(index, 0, el);\n    return children;\n  }\n\n  function insertAfter(after: HTMLElement, el: HTMLElement) {\n    const children = state.options().filter((e) => e !== el);\n    const index = children.indexOf(after);\n    children.splice(index + 1, 0, el);\n    return children;\n  }\n\n  function updatePosition(item: SortableItem, y: number) {\n    const currentScrollTop = listRef.value?.scrollTop || 0;\n    const scrollDiff = currentScrollTop - (item.initialScrollTop || 0);\n    item.dy = y - item.y + scrollDiff;\n    item.el.style.setProperty(\"transform\", `translateY(${item.dy}px)`);\n  }\n\n  function changeOrder(reordered: HTMLElement[]) {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    if (!el.isConnected) {\n      state.item = undefined;\n      return;\n    }\n\n    const oldPositions = reordered.map((e) => getOffset(e));\n\n    const y1 = getOffset(el);\n    listRef.value?.replaceChildren(...reordered);\n    const y2 = getOffset(el);\n\n    const newPositions = reordered.map((e) => getOffset(e));\n\n    const toAnimate: HTMLElement[] = [];\n\n    for (let i = 0; i < newPositions.length; i++) {\n      const option = reordered[i];\n\n      if (option === state.item.el) {\n        continue;\n      }\n\n      const newY = newPositions[i];\n\n      const oldY = oldPositions[i];\n\n      const invert = oldY - newY;\n\n      option.style.transform = `translateY(${invert}px)`;\n\n      toAnimate.push(option);\n    }\n\n    const dy = y2 - y1;\n\n    state.item.y = state.item.y + dy;\n    state.item.dy = state.item.dy - dy;\n    state.item.orderChanged = true;\n    state.item.el.style.setProperty(\"transform\", `translateY(${state.item.dy}px)`);\n\n    toAnimate.forEach((o) => o.classList.remove(classes.animate));\n\n    requestAnimationFrame(function () {\n      toAnimate.forEach((option) => {\n        option.classList.add(classes.animate);\n        option.style.transform = \"\";\n        option.addEventListener(\"transitionend\", () => {\n          option.classList.remove(classes.animate);\n        });\n      });\n    });\n  }\n\n  useEventListener(window, \"mousemove\", (e: { y: number }) => {\n    if (!state.item) {\n      return;\n    }\n\n    const { el } = state.item;\n\n    updatePosition(state.item, e.y);\n\n    const upper = getOffset(state.item.el);\n    const bottom = getBottom(state.item.el);\n\n    const before = elementsBefore(el);\n    const after = elementsAfter(el);\n\n    before.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (upper + shakeBuffer < y) {\n        changeOrder(insertBefore(e, el));\n      }\n    });\n\n    after.forEach((e) => {\n      const y = getMiddle(e);\n\n      if (bottom - shakeBuffer > y) {\n        changeOrder(insertAfter(e, el));\n      }\n    });\n\n    if (listRef.value) {\n      const rect = listRef.value.getBoundingClientRect();\n\n      const deltaUp = rect.top + el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY < deltaUp) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaUp;\n      }\n\n      const deltaDown = rect.bottom - el.getBoundingClientRect().height / 2;\n      if ((e as MouseEvent).clientY > deltaDown) {\n        listRef.value.scrollTop += (e as MouseEvent).clientY - deltaDown;\n      }\n    }\n  });\n\n  useEventListener(window, \"mouseup\", () => {\n    if (!state.item) {\n      return;\n    }\n\n    oldScrollTop = listRef.value?.scrollTop || 0;\n\n    const { el, orderChanged } = state.item;\n\n    el.classList.add(classes.animate);\n    el.style.removeProperty(\"transform\");\n\n    el.addEventListener(\"transitionend\", () => {\n      el.classList.remove(classes.animate, classes.item);\n    });\n\n    setTimeout(() => {\n      if (!orderChanged) {\n        return;\n      }\n\n      const newIndices = state.options().map((o) => Number(o.getAttribute(\"data-index\")));\n\n      const list = listRef.value;\n\n      if (list) {\n        for (const child of state.options()) {\n          list.removeChild(child);\n        }\n\n        optionsRef.value.forEach((child) => {\n          list.appendChild(child);\n        });\n      }\n\n      settings.onChange(newIndices);\n    }, reorderDelay);\n\n    state.item = undefined;\n  });\n\n  watchEffect(() => {\n    optionsRef.value.forEach((child, i) => {\n      child.removeEventListener(\"mousedown\", mouseDown);\n      child.addEventListener(\"mousedown\", mouseDown);\n      child.setAttribute(\"data-index\", String(i));\n    });\n  });\n}\n"],"mappings":"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"}