@oscarpalmer/oui 0.26.1 → 0.27.0

package/dist/js/internal/draggable.mjs

@@ -1,52 +1,84 @@
 import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
-	prefix;
-	element;
-	options;
-	container;
-	hasHandles;
-	horizontal = true;
-	vertical = true;
-	constructor(prefix, element, options) {
-		this.prefix = prefix;
-		this.element = element;
-		this.options = options;
-		setContainer(this, options);
-		setDirection(this, options);
+	#destroyed = false;
+	#name;
+	#state;
+	get element() {
+		return this.#state.element;
+	}
+	constructor(name, event, attribute, element, options, extras) {
+		this.#name = name;
+		this.#state = {
+			...extras,
+			attribute,
+			element,
+			event,
+			options,
+			horizontal: true,
+			vertical: true,
+			styling: toggleStyles(element, styles)
+		};
+		const item = {
+			instance: this,
+			state: this.#state
+		};
+		setContainer(item);
+		setDirection(item);
+		element.setAttribute(attribute, "");
+		let states = globals.states.get(element);
+		states ??= {};
+		states[this.#name] = this.#state;
+		globals.states.set(element, states);
 	}
 	destroy() {
-		unsetContainer(this, this.options);
-		this.container = void 0;
-		this.element = void 0;
-		this.options = void 0;
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		destroyInstance(this, this.#state);
 	}
 };
-function addDraggable(element) {
-	let instances = state.instances.get(element);
+function addDraggable(element, options) {
+	let instances = globals.instances.get(element);
 	if (instances == null) {
 		instances = {};
-		state.instances.set(element, instances);
+		globals.instances.set(element, instances);
 	}
-	instances[this.property] ??= new this.constructor(element);
+	instances[this.property] ??= new this.constructor(element, options);
+	return instances[this.property];
+}
+function destroyInstance(instance, state) {
+	unsetContainer({
+		instance,
+		state
+	});
+	state.element.removeAttribute(state.attribute);
+	state.styling.remove();
+	state.container = void 0;
+	state.element = void 0;
+	state.options = void 0;
+	state.styling = void 0;
+}
+function getDraggableStates(element) {
+	return globals.states.get(element);
 }
 function getHandle(event, isMovable) {
 	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
 }
-function getNextPosition(draggable, position) {
-	let x = state.original?.x ?? 0;
-	let y = state.original?.y ?? 0;
-	if (draggable.horizontal) {
-		x = position.x - (state.offset?.x ?? 0);
-		if (state.container != null && state.element != null) x = clamp(x, state.container.left, state.container.right - state.element.rectangle.width);
+function getNextPosition(item, position) {
+	let x = globals.original?.x ?? 0;
+	let y = globals.original?.y ?? 0;
+	if (item.state.horizontal) {
+		x = position.x - (globals.offset?.x ?? 0);
+		if (globals.container != null && globals.element != null) x = clamp(x, globals.container.left, globals.container.right - globals.element.rectangle.width);
 	}
-	if (draggable.vertical) {
-		y = position.y - (state.offset?.y ?? 0);
-		if (state.container != null && state.element != null) y = clamp(y, state.container.top, state.container.bottom - state.element.rectangle.height);
+	if (item.state.vertical) {
+		y = position.y - (globals.offset?.y ?? 0);
+		if (globals.container != null && globals.element != null) y = clamp(y, globals.container.top, globals.container.bottom - globals.element.rectangle.height);
 	}
 	return {
 		x,
@@ -55,19 +87,22 @@ function getNextPosition(draggable, position) {
 }
 function onKeydown(event) {
 	if (current == null || event.key !== KEY_ESCAPE) return;
-	const { origin } = current;
-	current.options.drag.onCancel?.(state, current);
-	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:cancel`, { detail: { element: origin } }));
+	current.state.options.drag.onCancel?.(globals, current);
+	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:cancel`, { detail: { element: current.state.options.getOrigin() } }));
 	reset();
 }
 function onPointerdown(event) {
 	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
 	const container = findAncestor(event, SELECTOR);
-	const instances = state.instances.get(container);
-	if (instances == null) return;
+	const instances = globals.instances.get(container);
+	const states = globals.states.get(container);
+	if (instances == null || states == null) return;
 	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
-	const instance = isMovable ? instances.movable : instances.sortable;
-	if (instance == null) return;
+	const item = {
+		instance: isMovable ? instances.movable : instances.sortable,
+		state: isMovable ? states.movable : states.sortable
+	};
+	if (item.instance == null || item.state == null) return;
 	if (supportsTouch.value) event.preventDefault();
 	let element = container;
 	if (!isMovable) {
@@ -75,41 +110,43 @@ function onPointerdown(event) {
 		if (element == null || element.parentElement !== container) return;
 	}
 	let handle = element;
-	instance.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
-	if (instance.hasHandles) handle = getHandle(event, isMovable);
+	item.state.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	if (item.state.hasHandles) handle = getHandle(event, isMovable);
 	if (handle == null) return;
-	const { dragged } = instance;
+	const dragged = item.state.options.getDragged();
 	const rectangle = dragged.getBoundingClientRect();
 	const position = getPosition(event) ?? {
 		x: 0,
 		y: 0
 	};
-	current = instance;
-	state.container = instance.container?.getBoundingClientRect();
-	state.element = {
+	current = item;
+	globals.container = item.state.container?.getBoundingClientRect();
+	globals.element = {
 		rectangle,
 		node: dragged
 	};
-	state.offset = instance.options.position.getOffset(state, instance, element, position);
-	state.original = instance.options.position.getOriginal(state, instance, position);
-	const begin = new CustomEvent(`${instance.prefix}:begin`, {
+	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
+	globals.original = item.state.options.position.getOriginal(globals, item, position);
+	const begin = new CustomEvent(`${item.state.event}:begin`, {
 		detail: {
 			element,
-			position: { ...state.original }
+			position: { ...globals.original }
 		},
 		cancelable: true
 	});
-	instance.element.dispatchEvent(begin);
+	item.state.element.dispatchEvent(begin);
 	setTimeout(() => {
 		if (begin.defaultPrevented) {
-			current?.options.drag.onCancel(state, instance);
+			item.state.options.drag.onCancel?.(globals, item);
 			reset();
 			return;
 		}
-		const next = getNextPosition(instance, position);
+		const next = getNextPosition(item, position);
 		dragged.style.position = "fixed";
 		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
-		instance.options.drag.onBegin(event, state, instance, element, handle, next);
+		dragged.style.transform = "translate3d(0, 0, 0)";
+		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+		item.state.styling.set();
 		styleToggler.set();
 	});
 }
@@ -118,61 +155,74 @@ function onPointermove(event) {
 	const position = getPosition(event);
 	if (position == null) return;
 	const next = getNextPosition(current, position);
-	if (state.element != null) state.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
-	const detail = current.options.drag.onMove(event, state, current, {
+	if (globals.element != null) globals.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+	const detail = current.state.options.drag.onMove(event, globals, current, {
 		calculated: next,
 		original: position
 	});
-	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:move`, { detail }));
+	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:move`, { detail }));
 }
 function onPointerup(event) {
-	current?.options.drag.onEnd?.(event, state, current, reset);
+	current?.state.options.drag.onEnd?.(event, globals, current, reset);
 }
 function removeDraggable(element) {
 	const { property } = this;
-	const instances = state.instances.get(element);
-	if (instances == null || instances[property] == null) return;
-	instances[property]?.destroy();
-	instances[property] = void 0;
-	if (instances[properties[property]] == null) state.instances.delete(element);
+	removeInstance(globals.instances, property, element);
+	removeInstance(globals.states, property, element);
+}
+function removeInstance(map, name, element) {
+	const instances = map.get(element);
+	if (instances == null || instances[name] == null) return;
+	if (typeof instances[name].destroy === "function") instances[name].destroy();
+	instances[name] = void 0;
+	if (instances[properties[name]] == null) map.delete(element);
 }
 function reset() {
-	current = void 0;
-	state.container = void 0;
-	state.element = void 0;
-	state.offset = void 0;
-	state.original = void 0;
+	current?.state.styling.remove();
 	styleToggler.remove();
+	current = void 0;
+	globals.container = void 0;
+	globals.element = void 0;
+	globals.offset = void 0;
+	globals.original = void 0;
 }
-function setContainer(draggable, options) {
-	const selector = draggable.element.getAttribute(options.container.attribute);
+function setContainer(item) {
+	const { container } = item.state.options.input ?? {};
+	if (isHTMLOrSVGElement(container)) {
+		setContainerElement(item, container);
+		return;
+	}
+	const selector = container ?? item.instance.element.getAttribute(item.state.options.container.attribute);
 	if (typeof selector !== "string") return;
-	draggable.container = globals.has(selector) ? draggable.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
-	if (draggable.container == null) return;
-	const set = options.container.map.get(draggable.container);
-	if (set == null) options.container.map.set(draggable.container, new Set([draggable]));
-	else set.add(draggable);
-	options.container.onInitialize?.(draggable);
-}
-function setDirection(draggable, options) {
-	const direction = draggable.element.getAttribute(options.direction.attribute);
-	if (horizontals.has(direction)) draggable.vertical = false;
-	else if (verticals.has(direction)) draggable.horizontal = false;
-	options.direction.onAfter?.(draggable);
-}
-function unsetContainer(draggable, options) {
-	const { container } = draggable;
+	const element = containers.has(selector) ? item.state.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	if (isHTMLOrSVGElement(element)) setContainerElement(item, element);
+}
+function setContainerElement(item, element) {
+	item.state.container = element;
+	const set = item.state.options.container.map.get(element);
+	if (set == null) item.state.options.container.map.set(element, /* @__PURE__ */ new Set([item.instance]));
+	else set.add(item.instance);
+	item.state.options.container.onInitialize?.(item);
+}
+function setDirection(item) {
+	const direction = item.state.element.getAttribute(item.state.options.direction.attribute);
+	if (horizontals.has(direction)) item.state.vertical = false;
+	else if (verticals.has(direction)) item.state.horizontal = false;
+	item.state.options.direction.onAfter?.(item);
+}
+function unsetContainer(item) {
+	const { container } = item.state;
 	if (container == null) return;
-	const set = options.container.map.get(container);
+	const set = item.state.options.container.map.get(container);
 	let empty = false;
 	if (set != null) {
-		set.delete(draggable);
+		set.delete(item.instance);
 		if (set.size === 0) {
 			empty = true;
-			options.container.map.delete(container);
+			item.state.options.container.map.delete(container);
 		}
 	}
-	options.container.onDestroy?.(draggable, container, empty);
+	item.state.options.container.onDestroy?.(item, container, empty);
 }
 const ATTRIBUTE_MOVABLE = "oui-movable";
 const ATTRIBUTE_SORTABLE = "oui-sortable";
@@ -181,29 +231,31 @@ const SELECTOR = `[${ATTRIBUTE_MOVABLE}], [${ATTRIBUTE_SORTABLE}]`;
 const SELECTOR_MOVABLE_HANDLE = `[${ATTRIBUTE_MOVABLE}-handle]`;
 const SELECTOR_SORTABLE_HANDLE = `[${ATTRIBUTE_SORTABLE}-handle]`;
 const SELECTOR_SORTABLE_ITEM = `[${ATTRIBUTE_SORTABLE}] > *`;
-const globals = new Set([
+const containers = /* @__PURE__ */ new Set([
 	"body",
 	"document",
 	"window"
 ]);
-const horizontals = new Set(["horizontal", "x"]);
+const horizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
 const properties = {
 	movable: "sortable",
 	sortable: "movable"
 };
-const state = {
+const globals = {
 	container: void 0,
 	element: void 0,
 	instances: /* @__PURE__ */ new WeakMap(),
 	offset: void 0,
-	original: void 0
+	original: void 0,
+	states: /* @__PURE__ */ new WeakMap()
 };
-const styleToggler = toggleStyles(document.body, {
+const styles = {
 	touchAction: "none",
 	userSelect: "none",
 	webkitUserSelect: "none"
-});
-const verticals = new Set(["vertical", "y"]);
+};
+const styleToggler = toggleStyles(document.body, styles);
+const verticals = /* @__PURE__ */ new Set(["vertical", "y"]);
 let current;
 on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
@@ -212,4 +264,4 @@ on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup, { passive: false });
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
-export { OuiDraggable, addDraggable, removeDraggable };
+export { OuiDraggable, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/movable/movable.embedded.d.mts

@@ -0,0 +1,2 @@
+import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-zszaW1qS.mjs";
+export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

package/dist/js/movable/movable.embedded.mjs

@@ -0,0 +1,184 @@
+import { attributable } from "../internal/attributable.mjs";
+import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+//#region src/js/movable/movable.embedded.ts
+var OuiMovable = class extends OuiDraggable {
+	#element;
+	#style;
+	constructor(element, options) {
+		const style = {
+			inset: element.style.inset,
+			position: element.style.position
+		};
+		super("movable", "move", ATTRIBUTE_MOVABLE, element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+				onAfter: afterDirection
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove
+			},
+			input: options,
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			},
+			getDragged() {
+				return element;
+			},
+			getOrigin() {
+				return element;
+			}
+		}, {
+			style,
+			hasHandles: element.querySelector(SELECTOR_HANDLE) != null,
+			moved: false
+		});
+		this.#element = element;
+		this.#style = style;
+	}
+	/**
+	* Destroys the _Movable_
+	*/
+	destroy() {
+		MOVED.delete(this);
+		this.#element.style.inset = this.#style.inset;
+		this.#element.style.position = this.#style.position;
+		this.#element = void 0;
+		this.#style = void 0;
+		super.destroy();
+	}
+};
+function afterDirection(item) {
+	const container = item.state.container?.getBoundingClientRect();
+	if (container != null) setOffset(item.state, container);
+}
+/**
+* Creates _(or retrieves)_ a _OuiMovable_ instance for an element
+*
+* @param element Element to make movable
+* @returns _OuiMovable_ instance
+*/
+function createMovable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	return addMovable(element, options);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition(globals, _, __, position) {
+	return {
+		x: position.x - (globals.element?.rectangle.left ?? 0),
+		y: position.y - (globals.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition(globals) {
+	return {
+		x: globals.element?.rectangle.left ?? 0,
+		y: globals.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(item) {
+	resizer.observe(item.state.container);
+}
+function onBegin() {}
+function onCancel(globals, item) {
+	const { element, moved, style } = item.state;
+	const { x, y } = globals.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
+	else {
+		element.style.position = style.position;
+		element.style.inset = style.inset;
+	}
+	element.removeAttribute(ATTRIBUTE_MOVING);
+}
+function onEnd(event, globals, item, reset) {
+	const movable = item.instance;
+	const state = item.state;
+	state.element.removeAttribute(ATTRIBUTE_MOVING);
+	if (!state.moved) {
+		state.moved = true;
+		if (state.container != null) MOVED.add(movable);
+	}
+	const container = state.container?.getBoundingClientRect();
+	if (container != null) setOffset(state, container);
+	const end = new CustomEvent(EVENT_END, {
+		detail: {
+			from: { ...globals.original },
+			to: getPosition(event)
+		},
+		cancelable: true
+	});
+	state.element.dispatchEvent(end);
+	setTimeout(() => {
+		if (end.defaultPrevented) onCancel(globals, item);
+		reset();
+	});
+}
+function onMove(_, globals, __, position) {
+	globals.element?.node.setAttribute(ATTRIBUTE_MOVING, "");
+	return {
+		from: { ...globals.original },
+		to: { ...position.calculated }
+	};
+}
+function onResize(entries) {
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		const set = CONTAINERS.get(entry.target);
+		if (set == null) continue;
+		for (const movable of set) reposition(movable);
+	}
+}
+function onScroll() {
+	for (const moved of MOVED) reposition(moved);
+}
+function reposition(movable) {
+	const state = getDraggableStates(movable.element)?.movable;
+	if (state == null || !state.moved || state.container == null) return;
+	const container = state.container.getBoundingClientRect();
+	const x = container.left + (state.offset?.x ?? 0);
+	const y = container.top + (state.offset?.y ?? 0);
+	state.element.style.inset = `${y}px auto auto ${x}px`;
+}
+function setOffset(state, container) {
+	state.offset = {};
+	const element = state.element.getBoundingClientRect();
+	state.offset.y = element.top - container.top;
+	state.offset.x = element.left - container.left;
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE_MOVABLE}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE_MOVABLE}-direction`;
+const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
+const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
+const CONTAINERS = /* @__PURE__ */ new Map();
+const EVENT_END = "move:end";
+const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;
+const bound = {
+	constructor: OuiMovable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+const addMovable = addDraggable.bind(bound);
+const removeMovable = removeDraggable.bind(bound);
+on(document, "scroll", onScroll);
+attributable(ATTRIBUTE_MOVABLE, addMovable, removeMovable);
+//#endregion
+export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

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

@@ -0,0 +1,2 @@
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-zszaW1qS.mjs";
+export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/movable/movable.standalone.mjs

@@ -0,0 +1,2 @@
+import { createMovable } from "./movable.embedded.mjs";
+export { createMovable };

package/dist/js/popover.d.mts

@@ -1,5 +1,5 @@
-import { n as OuiFloatable } from "./embedded-CSOh5njI.mjs";
-import { i as OuiFocusTrap } from "./embedded-CHK82Uh5.mjs";
+import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
+import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
 //#region src/js/popover.d.ts

package/dist/js/popover.mjs

@@ -1,6 +1,6 @@
-import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
-import { createFocusTrap } from "./focus-trap/embedded.mjs";
+import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
@@ -97,7 +97,8 @@ const STATE_OPEN = "open";
 const TRUE = "true";
 const options = {
 	attribute: `${ATTRIBUTE}position`,
-	position: "below-start"
+	position: "below-start",
+	reusable: false
 };
 const states = /* @__PURE__ */ new WeakMap();
 let ignoreFocus = false;

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

@@ -0,0 +1,2 @@
+import { d as OuiSortable, f as createSortable } from "../draggable-zszaW1qS.mjs";
+export { OuiSortable, createSortable };