@oscarpalmer/oui 0.39.0 → 0.40.0

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,38 +1,43 @@
 import { attributable } from "../internal/attributable.mjs";
-import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
+import { DRAGGABLE_SYMBOL } from "../internal/draggable/draggable.model.mjs";
+import { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable } from "../internal/draggable/index.mjs";
+import { SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR_ITEM, sortablePlaceholder } from "./sortable.model.mjs";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { setStyle } from "@oscarpalmer/toretto/style";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable/sortable.embedded.ts
-var OuiSortable = class extends OuiDraggable {
-	constructor(element, options) {
-		super("sortable", "sort", ATTRIBUTE, element, {
-			container: {
-				attribute: ATTRIBUTE_CONTAINER,
-				map: CONTAINERS
-			},
-			direction: { attribute: ATTRIBUTE_DIRECTION },
-			drag: {
-				onBegin,
-				onCancel,
-				onEnd,
-				onMove
-			},
-			input: options,
-			position: {
-				getOffset: getOffsetPosition,
-				getOriginal: getOriginalPosition
-			},
-			getDragged: getDragPlaceholder,
-			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
-		}, { connections: getAttribute(element, ATTRIBUTE_CONNECTIONS) });
-	}
-};
+function OuiSortable(element, options) {
+	this[DRAGGABLE_SYMBOL] = initializeDraggable(this, "sortable", "sort", SORTABLE_ATTRIBUTE, element, {
+		container: {
+			attribute: SORTABLE_ATTRIBUTE_CONTAINER,
+			map: SORTABLE_CONTAINERS
+		},
+		direction: { attribute: SORTABLE_ATTRIBUTE_DIRECTION },
+		drag: {
+			onBegin,
+			onCancel,
+			onEnd,
+			onMove
+		},
+		input: options,
+		position: {
+			getOffset: getOffsetPosition,
+			getOriginal: getOriginalPosition
+		},
+		getDragged: getDragPlaceholder,
+		getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+	}, { connections: getAttribute(element, SORTABLE_ATTRIBUTE_CONNECTIONS) });
+}
+OuiSortable.prototype.destroy = destroySortable;
+Object.defineProperties(OuiSortable.prototype, { element: {
+	enumerable: true,
+	get: getDraggableElement
+} });
 function afterEnd(insert, from, events, elements, position, valid) {
-	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	elements.origin?.removeAttribute(SORTABLE_ATTRIBUTE_ORIGIN);
 	from.state.origin = void 0;
 	resetPlaceholders();
 	if (!valid || events.some((event) => event?.defaultPrevented)) return;
@@ -46,7 +51,7 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	if (position.y < top + height / 2) insertion = "beforebegin";
 	else insertion = "afterend";
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
-	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+	document.body.removeAttribute(SORTABLE_ATTRIBUTE_ACTIVE);
 }
 /**
 * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
@@ -55,12 +60,15 @@ function afterEnd(insert, from, events, elements, position, valid) {
 * @returns _OuiSortable_ instance
 */
 function createSortable(element, options) {
-	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(SORTABLE_MESSAGE);
 	return addSortable(element, options);
 }
+function destroySortable() {
+	destroyDraggable(this);
+}
 function getDragPlaceholder() {
-	placeholder.drag.default ??= createElement("div");
-	return placeholder.drag.custom ?? placeholder.drag.default;
+	sortablePlaceholder.drag.default ??= createElement("div");
+	return sortablePlaceholder.drag.custom ?? sortablePlaceholder.drag.default;
 }
 function getOffsetPosition(_, item, element, position) {
 	const rectangle = element.getBoundingClientRect();
@@ -73,20 +81,20 @@ function getOriginalPosition(_, __, position) {
 	return position;
 }
 function getPositionPlaceholder(item) {
-	placeholder.position ??= createElement("div");
-	setAttribute(placeholder.position, ATTRIBUTE_PLACEHOLDER_POSITION, "");
-	if (item.state.origin != null) setStyle(placeholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
-	return placeholder.position;
+	sortablePlaceholder.position ??= createElement("div");
+	setAttribute(sortablePlaceholder.position, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (item.state.origin != null) setStyle(sortablePlaceholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
+	return sortablePlaceholder.position;
 }
 function onBegin(_, globals, item, element) {
 	item.state.origin = element;
 	setPlaceholder(globals, item, element);
-	setAttribute(element, ATTRIBUTE_ORIGIN, "");
-	setAttribute(document.body, ATTRIBUTE_ACTIVE, "");
+	setAttribute(element, SORTABLE_ATTRIBUTE_ORIGIN, "");
+	setAttribute(document.body, SORTABLE_ATTRIBUTE_ACTIVE, "");
 }
 function onCancel(_, item) {
-	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
-	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+	item.state.origin?.removeAttribute(SORTABLE_ATTRIBUTE_ORIGIN);
+	document.body.removeAttribute(SORTABLE_ATTRIBUTE_ACTIVE);
 	resetPlaceholders();
 	item.state.origin = void 0;
 }
@@ -97,16 +105,16 @@ function onEnd(event, globals, item, reset) {
 		y: 0
 	};
 	const target = getElementFromPosition(position)[0];
-	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
-		if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	let element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
+	if (element?.hasAttribute(SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		if (getAttribute(element, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
 		else element = element.nextElementSibling;
 	}
 	let insert = "insert";
 	let toInstance;
 	let toState;
 	if (element == null) {
-		element = findAncestor(target, SELECTOR);
+		element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
 		toInstance = globals.instances.get(element)?.sortable;
 		toState = globals.states.get(element)?.sortable;
 		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
@@ -145,11 +153,11 @@ function onEnd(event, globals, item, reset) {
 }
 function onMove(event, globals, item, position) {
 	const fromElement = item.state.origin;
-	const toElement = findAncestor(event, SELECTOR_ITEM);
+	const toElement = findAncestor(event, SORTABLE_SELECTOR_ITEM);
 	let toInstance;
 	let toState;
 	if (toElement == null) {
-		const element = findAncestor(event, SELECTOR);
+		const element = findAncestor(event, SORTABLE_SELECTOR_ITEM);
 		toInstance = globals.instances.get(element)?.sortable;
 		toState = globals.states.get(element)?.sortable;
 	} else {
@@ -171,7 +179,7 @@ function onMove(event, globals, item, position) {
 			place = "after";
 			toElement.insertAdjacentElement("afterend", placeholder);
 		}
-		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
+		setAttribute(placeholder, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else placeholder.remove();
 	return {
 		from: {
@@ -185,23 +193,23 @@ function onMove(event, globals, item, position) {
 	};
 }
 function resetPlaceholders() {
-	placeholder.drag.custom?.remove();
-	placeholder.drag.default?.remove();
-	placeholder.position?.remove();
-	placeholder.drag.custom = void 0;
+	sortablePlaceholder.drag.custom?.remove();
+	sortablePlaceholder.drag.default?.remove();
+	sortablePlaceholder.position?.remove();
+	sortablePlaceholder.drag.custom = void 0;
 }
 function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
-	placeholder.drag.default.innerHTML = "";
+	if (sortablePlaceholder.drag.default != null) sortablePlaceholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
 	const dispatched = dispatch(item.instance.element, "sortable:placeholder", { detail: {
 		origin,
-		parent: item.state.element,
+		parent: item.instance.element,
 		placeholder: element,
 		create: (value) => {
 			if (!isHTMLOrSVGElement(value)) return;
 			const element = value;
-			placeholder.drag.custom = element;
+			sortablePlaceholder.drag.custom = element;
 			updatePlaceholder(item, element);
 			state.element = {
 				rectangle: element.getBoundingClientRect(),
@@ -210,18 +218,18 @@ function setPlaceholder(state, item, origin) {
 		}
 	} });
 	setTimeout(() => {
-		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
-		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
+		if (!dispatched.defaultPrevented && sortablePlaceholder.drag.custom == null) sortablePlaceholder.drag.default?.append(element.cloneNode(true));
+		document.body.append(sortablePlaceholder.drag.custom ?? sortablePlaceholder.drag.default ?? "");
 	});
 }
 function updatePlaceholder(item, element) {
-	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	setAttribute(element, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, "");
 	setStyle(element, "position", "fixed");
 	const state = getDraggableStates(item.state.element)?.sortable;
 	if (state == null) return;
 	setAttributes(element, {
-		[ATTRIBUTE_HORIZONTAL]: state.horizontal ? "" : void 0,
-		[ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
+		[SORTABLE_ATTRIBUTE_HORIZONTAL]: state.horizontal ? "" : void 0,
+		[SORTABLE_ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
 	});
 }
 function validatePosition(_, from, to, position) {
@@ -234,33 +242,12 @@ function validatePosition(_, from, to, position) {
 	if (valid && to?.state.connections != null) valid = from.state.element.matches(to.state.connections);
 	return valid;
 }
-const ATTRIBUTE = "oui-sortable";
-const ATTRIBUTE_ACTIVE = `${ATTRIBUTE}-active`;
-const ATTRIBUTE_CONNECTIONS = `${ATTRIBUTE}-connections`;
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
-const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
-const ATTRIBUTE_HORIZONTAL = `${ATTRIBUTE}-horizontal`;
-const ATTRIBUTE_ORIGIN = `${ATTRIBUTE}-origin`;
-const ATTRIBUTE_PLACEHOLDER_DRAG = `${ATTRIBUTE}-placeholder-drag`;
-const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
-const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
-const CONTAINERS = /* @__PURE__ */ new Map();
-const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
-const SELECTOR = `[${ATTRIBUTE}]`;
-const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 const bound = {
 	constructor: OuiSortable,
 	property: "sortable"
 };
-const placeholder = {
-	drag: {
-		custom: void 0,
-		default: void 0
-	},
-	position: void 0
-};
 const addSortable = addDraggable.bind(bound);
 const removeSortable = removeDraggable.bind(bound);
-attributable(ATTRIBUTE, addSortable, removeSortable);
+attributable(SORTABLE_ATTRIBUTE, addSortable, removeSortable);
 //#endregion
-export { OuiSortable, createSortable };
+export { createSortable };

package/dist/js/sortable/sortable.model.d.mts

@@ -0,0 +1,2 @@
+import { $ as OuiSortable, _t as sortablePlaceholder, at as SORTABLE_ATTRIBUTE_CONNECTIONS, ct as SORTABLE_ATTRIBUTE_HORIZONTAL, dt as SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, et as OuiSortablePlaceholder, ft as SORTABLE_ATTRIBUTE_VERTICAL, gt as SORTABLE_SELECTOR_ITEM, ht as SORTABLE_SELECTOR, it as SORTABLE_ATTRIBUTE_ACTIVE, lt as SORTABLE_ATTRIBUTE_ORIGIN, mt as SORTABLE_MESSAGE, nt as OuiSortableState, ot as SORTABLE_ATTRIBUTE_CONTAINER, pt as SORTABLE_CONTAINERS, rt as SORTABLE_ATTRIBUTE, st as SORTABLE_ATTRIBUTE_DIRECTION, tt as OuiSortablePlaceholderDrag, ut as SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG } from "../movable.model-BHaK_mKw.mjs";
+export { OuiSortable, OuiSortablePlaceholder, OuiSortablePlaceholderDrag, OuiSortableState, SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR, SORTABLE_SELECTOR_ITEM, sortablePlaceholder };

package/dist/js/sortable/sortable.model.mjs

@@ -0,0 +1,24 @@
+//#region src/js/sortable/sortable.model.ts
+const SORTABLE_ATTRIBUTE = "oui-sortable";
+const SORTABLE_ATTRIBUTE_ACTIVE = `${SORTABLE_ATTRIBUTE}-active`;
+const SORTABLE_ATTRIBUTE_CONNECTIONS = `${SORTABLE_ATTRIBUTE}-connections`;
+const SORTABLE_ATTRIBUTE_CONTAINER = `${SORTABLE_ATTRIBUTE}-container`;
+const SORTABLE_ATTRIBUTE_DIRECTION = `${SORTABLE_ATTRIBUTE}-direction`;
+const SORTABLE_ATTRIBUTE_HORIZONTAL = `${SORTABLE_ATTRIBUTE}-horizontal`;
+const SORTABLE_ATTRIBUTE_ORIGIN = `${SORTABLE_ATTRIBUTE}-origin`;
+const SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG = `${SORTABLE_ATTRIBUTE}-placeholder-drag`;
+const SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION = `${SORTABLE_ATTRIBUTE}-placeholder-position`;
+const SORTABLE_ATTRIBUTE_VERTICAL = `${SORTABLE_ATTRIBUTE}-vertical`;
+const SORTABLE_CONTAINERS = /* @__PURE__ */ new Map();
+const SORTABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+const SORTABLE_SELECTOR = `[${SORTABLE_ATTRIBUTE}]`;
+const SORTABLE_SELECTOR_ITEM = `[${SORTABLE_ATTRIBUTE}] > *`;
+const sortablePlaceholder = {
+	drag: {
+		custom: void 0,
+		default: void 0
+	},
+	position: void 0
+};
+//#endregion
+export { SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR, SORTABLE_SELECTOR_ITEM, sortablePlaceholder };

package/dist/js/sortable/sortable.standalone.d.mts

@@ -1,2 +1,3 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-B5-70SZm.mjs";
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "../movable.model-BHaK_mKw.mjs";
+import { t as createSortable } from "../sortable.embedded-DzBKAwSG.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/sortable.embedded-DzBKAwSG.d.mts

@@ -0,0 +1,11 @@
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "./movable.model-BHaK_mKw.mjs";
+//#region src/js/sortable/sortable.embedded.d.ts
+/**
+ * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+ *
+ * @param element Element to make sortable
+ * @returns _OuiSortable_ instance
+ */
+declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
+//#endregion
+export { createSortable as t };

package/dist/js/{splitter.d.mts → splitter/index.d.mts}

@@ -1,11 +1,14 @@
-//#region src/js/splitter.d.ts
+import { D as SPLITTER_SYMBOL, O as SPLITTER_TAGNAME, n as OuiSplitter } from "../splitter.model-DOLNjLVS.mjs";
+//#region src/js/splitter/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    [TAGNAME]: OuiSplitterElement;
+    [SPLITTER_TAGNAME]: OuiSplitterElement;
   }
 }
+export interface OuiSplitterElement {
+  [SPLITTER_SYMBOL]: OuiSplitter;
+}
 export declare class OuiSplitterElement extends HTMLElement {
-  #private;
   static readonly observedAttributes: string[];
   /**
    * Maximum size for the first panel
@@ -44,5 +47,4 @@ export declare class OuiSplitterElement extends HTMLElement {
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;
 }
-declare const TAGNAME = "oui-splitter";
 //#endregion