@oscarpalmer/oui 0.20.0 → 0.21.0

package/dist/js/focus-trap/embedded.mjs

@@ -1,6 +1,6 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { clamp } from "@oscarpalmer/atoms/number";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/embedded.ts
 var FocusTrap = class {

package/dist/js/focus-trap/standalone.mjs

@@ -1,4 +1,4 @@
-import { attributable } from "../attributable.mjs";
+import { attributable } from "../internal/attributable.mjs";
 import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
 //#region src/js/focus-trap/standalone.ts
 function removeFocusTraps(element) {

package/dist/js/index.d.mts

@@ -1,4 +1,4 @@
 import { OuiPopoverElement } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
-import { setDelay } from "./tooltip.mjs";
-export { OuiPopoverElement, OuiSplitterElement, setDelay };
+import { setTooltipDelay } from "./tooltip.mjs";
+export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,5 +1,7 @@
 import "./focus-trap/standalone.mjs";
+import "./movable.mjs";
 import { OuiPopoverElement } from "./popover.mjs";
+import "./sortable.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
-import { setDelay } from "./tooltip.mjs";
-export { OuiPopoverElement, OuiSplitterElement, setDelay };
+import { setTooltipDelay } from "./tooltip.mjs";
+export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };

package/dist/js/{attributable.d.mts → internal/attributable.d.mts}

@@ -1,4 +1,4 @@
-//#region src/js/attributable.d.ts
+//#region src/js/internal/attributable.d.ts
 declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
 //#endregion
 export { attributable };

package/dist/js/{attributable.mjs → internal/attributable.mjs}

@@ -1,4 +1,4 @@
-//#region src/js/attributable.ts
+//#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;

package/dist/js/internal/draggable.d.mts

@@ -0,0 +1,2 @@
+import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BEo2LbUI.mjs";
+export { DragMovePosition, Draggable, DraggableBound, DraggableState, addDraggable, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -0,0 +1,212 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+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 Draggable = class {
+	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);
+	}
+	destroy() {
+		unsetContainer(this, this.options);
+		this.container = void 0;
+		this.element = void 0;
+		this.options = void 0;
+	}
+};
+function addDraggable(element) {
+	let instances = state.instances.get(element);
+	if (instances == null) {
+		instances = {};
+		state.instances.set(element, instances);
+	}
+	instances[this.property] ??= new this.constructor(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);
+	}
+	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);
+	}
+	return {
+		x,
+		y
+	};
+}
+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 } }));
+	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 isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
+	const instance = isMovable ? instances.movable : instances.sortable;
+	if (instance == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	let element = container;
+	if (!isMovable) {
+		element = findAncestor(event, SELECTOR_SORTABLE_ITEM);
+		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);
+	if (handle == null) return;
+	const { dragged } = instance;
+	const rectangle = dragged.getBoundingClientRect();
+	const position = getPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	current = instance;
+	state.container = instance.container?.getBoundingClientRect();
+	state.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`, {
+		detail: {
+			element,
+			position: { ...state.original }
+		},
+		cancelable: true
+	});
+	instance.element.dispatchEvent(begin);
+	setTimeout(() => {
+		if (begin.defaultPrevented) {
+			current?.options.drag.onCancel(state, instance);
+			reset();
+			return;
+		}
+		const next = getNextPosition(instance, 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);
+		styleToggler.set();
+	});
+}
+function onPointermove(event) {
+	if (current == null) return;
+	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, {
+		calculated: next,
+		original: position
+	});
+	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:move`, { detail }));
+}
+function onPointerup(event) {
+	current?.options.drag.onEnd?.(event, state, 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);
+}
+function reset() {
+	current = void 0;
+	state.container = void 0;
+	state.element = void 0;
+	state.offset = void 0;
+	state.original = void 0;
+	styleToggler.remove();
+}
+function setContainer(draggable, options) {
+	const selector = draggable.element.getAttribute(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;
+	if (container == null) return;
+	const set = options.container.map.get(container);
+	let empty = false;
+	if (set != null) {
+		set.delete(draggable);
+		if (set.size === 0) {
+			empty = true;
+			options.container.map.delete(container);
+		}
+	}
+	options.container.onDestroy?.(draggable, container, empty);
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_SORTABLE = "oui-sortable";
+const KEY_ESCAPE = "Escape";
+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([
+	"body",
+	"document",
+	"window"
+]);
+const horizontals = new Set(["horizontal", "x"]);
+const properties = {
+	movable: "sortable",
+	sortable: "movable"
+};
+const state = {
+	container: void 0,
+	element: void 0,
+	instances: /* @__PURE__ */ new WeakMap(),
+	offset: void 0,
+	original: void 0
+};
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const verticals = new Set(["vertical", "y"]);
+let current;
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+export { Draggable, addDraggable, removeDraggable };

package/dist/js/{floatable.d.mts → internal/floatable.d.mts}

@@ -1,4 +1,4 @@
-//#region src/js/floatable.d.ts
+//#region src/js/internal/floatable.d.ts
 declare class Floatable {
   readonly options: Options;
   active: boolean;

package/dist/js/{floatable.mjs → internal/floatable.mjs}

@@ -1,6 +1,6 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-//#region src/js/floatable.ts
+//#region src/js/internal/floatable.ts
 var Floatable = class {
 	active = false;
 	disabled = false;

package/dist/js/movable-BEo2LbUI.d.mts

@@ -0,0 +1,101 @@
+import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
+
+//#region src/js/sortable.d.ts
+declare class Sortable extends Draggable {
+  connections: string | null;
+  origin: HTMLElement | undefined;
+  get dragged(): HTMLElement;
+  constructor(element: HTMLElement);
+}
+//#endregion
+//#region src/js/internal/draggable.d.ts
+declare abstract class Draggable {
+  prefix: string;
+  element: HTMLElement;
+  options: DraggableOptions;
+  container: HTMLElement | undefined;
+  hasHandles: boolean | undefined;
+  horizontal: boolean;
+  vertical: boolean;
+  abstract readonly dragged: HTMLElement;
+  abstract origin: HTMLElement | undefined;
+  constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
+  destroy(): void;
+}
+type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
+type DragCancel = (state: DraggableState, draggable: Draggable) => void;
+type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, reset: () => void) => void;
+type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, position: DragMovePosition) => PlainObject | undefined;
+type DragMovePosition = {
+  calculated: EventPosition;
+  original: EventPosition;
+};
+type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableInstances, Instance extends DraggableInstances[Property] = DraggableInstances[Property]> = {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+};
+type DraggableInstances = {
+  movable?: Movable;
+  sortable?: Sortable;
+};
+type DraggableOptions = {
+  container: DraggableOptionsContainer;
+  direction: DraggableOptionsDirection;
+  drag: DraggableOptionsDrag;
+  position: DraggableOptionsPosition;
+};
+type DraggableOptionsContainer = {
+  attribute: string;
+  map: Map<HTMLElement, Set<Draggable>>;
+  onDestroy?: DraggableOptionsContainerOnDestroy;
+  onInitialize?: DraggableOptionsContainerOnInitialize;
+};
+type DraggableOptionsContainerOnDestroy = (draggable: Draggable, container: HTMLElement, empty: boolean) => void;
+type DraggableOptionsContainerOnInitialize = (draggable: Draggable) => void;
+type DraggableOptionsDirection = {
+  attribute: string;
+  onAfter?: DraggableOptionsDirectionOnAfter;
+};
+type DraggableOptionsDirectionOnAfter = (draggable: Draggable) => void;
+type DraggableOptionsDrag = {
+  onBegin: DragBegin;
+  onCancel: DragCancel;
+  onEnd: DragEnd;
+  onMove: DragMove;
+};
+type DraggableOptionsPosition = {
+  getOffset: DraggableOptionsPositionGetOffset;
+  getOriginal: DraggableOptionsPositionGetOriginal;
+};
+type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: Draggable, element: HTMLElement, position: EventPosition) => EventPosition;
+type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: Draggable, position: EventPosition) => EventPosition;
+type DraggableState = {
+  container: DOMRect | undefined;
+  element: DraggableStateElement | undefined;
+  instances: WeakMap<HTMLElement, DraggableInstances>;
+  offset: EventPosition | undefined;
+  original: EventPosition | undefined;
+};
+type DraggableStateElement = {
+  node: HTMLElement;
+  rectangle: DOMRect;
+};
+declare function addDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: DraggableBound<Property, Instance>, element: HTMLElement): void;
+declare function removeDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+}, element: HTMLElement): void;
+//#endregion
+//#region src/js/movable.d.ts
+declare class Movable extends Draggable {
+  inset: string;
+  moved: boolean;
+  offset: Partial<EventPosition> | undefined;
+  position: string;
+  get dragged(): HTMLElement;
+  get origin(): HTMLElement | undefined;
+  constructor(element: HTMLElement);
+  destroy(): void;
+}
+//#endregion
+export { DraggableState as a, Sortable as c, DraggableBound as i, DragMovePosition as n, addDraggable as o, Draggable as r, removeDraggable as s, Movable as t };

package/dist/js/movable.d.mts

@@ -0,0 +1,2 @@
+import { t as Movable } from "./movable-BEo2LbUI.mjs";
+export { Movable };

package/dist/js/movable.mjs

@@ -0,0 +1,152 @@
+import { attributable } from "./internal/attributable.mjs";
+import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+//#region src/js/movable.ts
+var Movable = class extends Draggable {
+	inset;
+	moved = false;
+	offset;
+	position;
+	get dragged() {
+		return this.element;
+	}
+	get origin() {
+		return this.element;
+	}
+	constructor(element) {
+		super("move", element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+				onAfter: afterDirection
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			}
+		});
+		this.hasHandles = element.querySelector(SELECTOR_HANDLE) != null;
+		this.inset = element.style.inset;
+		this.position = element.style.position;
+	}
+	destroy() {
+		super.destroy();
+		MOVED.delete(this);
+		this.element.style.inset = this.inset;
+		this.element.style.position = this.position;
+	}
+};
+function afterDirection(draggable) {
+	const container = draggable.container?.getBoundingClientRect();
+	if (container != null) setOffset(draggable, container);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition(state, _, __, position) {
+	return {
+		x: position.x - (state.element?.rectangle.left ?? 0),
+		y: position.y - (state.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition(state) {
+	return {
+		x: state.element?.rectangle.left ?? 0,
+		y: state.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(draggable) {
+	resizer.observe(draggable.container);
+}
+function onBegin() {}
+function onCancel(state, draggable) {
+	const { element, inset, moved, position } = draggable;
+	const { x, y } = state.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
+	else {
+		element.style.position = position;
+		element.style.inset = inset;
+	}
+}
+function onEnd(event, state, draggable, reset) {
+	const movable = draggable;
+	if (!movable.moved) {
+		movable.moved = true;
+		if (movable.container != null) MOVED.add(movable);
+	}
+	const container = movable.container?.getBoundingClientRect();
+	if (container != null) setOffset(movable, container);
+	const end = new CustomEvent(EVENT_END, {
+		detail: {
+			from: { ...state.original },
+			to: getPosition(event)
+		},
+		cancelable: true
+	});
+	movable.element.dispatchEvent(end);
+	setTimeout(() => {
+		if (end.defaultPrevented) onCancel(state, draggable);
+		reset();
+	});
+}
+function onMove(_, state, __, position) {
+	return {
+		from: { ...state.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) {
+	if (!movable.moved || movable.container == null) return;
+	const container = movable.container.getBoundingClientRect();
+	const x = container.left + (movable.offset?.x ?? 0);
+	const y = container.top + (movable.offset?.y ?? 0);
+	movable.element.style.inset = `${y}px auto auto ${x}px`;
+}
+function setOffset(movable, container) {
+	movable.offset = {};
+	const element = movable.element.getBoundingClientRect();
+	movable.offset.y = element.top - container.top;
+	movable.offset.x = element.left - container.left;
+}
+const ATTRIBUTE = "oui-movable";
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
+const CONTAINERS = /* @__PURE__ */ new Map();
+const EVENT_END = "move:end";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
+const bound = {
+	constructor: Movable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+on(document, "scroll", onScroll);
+//#endregion
+export { Movable };

package/dist/js/popover.mjs

@@ -1,5 +1,5 @@
-import { Floatable } from "./floatable.mjs";
 import { createFocusTrap } from "./focus-trap/embedded.mjs";
+import { Floatable } from "./internal/floatable.mjs";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/popover.ts

package/dist/js/sortable.d.mts

@@ -0,0 +1,2 @@
+import { c as Sortable } from "./movable-BEo2LbUI.mjs";
+export { Sortable };