@oscarpalmer/oui 0.19.0 → 0.21.0

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

@@ -1,5 +1,6 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/internal/floatable.ts
 var Floatable = class {
 	active = false;
 	disabled = false;
@@ -74,44 +75,68 @@ function deactivate(floatable) {
 	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
 	floatable.options.onAfter?.(false);
 }
+function getAttribute(position, anchor, top, left) {
+	switch (position) {
+		case "horizontal":
+		case "horizontal-bottom":
+		case "horizontal-top": return position.replace("horizontal", left >= anchor.right ? "right" : "left");
+		case "vertical":
+		case "vertical-end":
+		case "vertical-start": return position.replace("vertical", top >= anchor.bottom ? "bottom" : "top");
+		default: break;
+	}
+}
+function getMargin() {
+	try {
+		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		if (Number.isNaN(fontsize)) return 5;
+		const margin = fontsize / 2;
+		return margin < 5 ? 5 : margin;
+	} catch {
+		return 5;
+	}
+}
 function getState() {
 	return window._oscarpalmer_oui_floatable;
 }
-function getX(anchor, content, position) {
-	if (position.endsWith(POSITION_SUFFIX_END)) {
-		const end = anchor.right - content.width;
-		return end < 0 ? 0 : end;
+function getX(anchor, content, position, margin) {
+	if (position === "above" || position === "below" || position === "vertical") {
+		const center = anchor.left + anchor.width / 2;
+		const width = content.width / 2;
+		if (center + width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
+		if (center - width - margin <= 0) return margin / 2;
+		return center - width;
 	}
-	if (position.endsWith(POSITION_SUFFIX_START)) {
-		const start = anchor.left;
-		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
+	if (position.startsWith("end")) return anchor.right;
+	if (position.startsWith("start")) return anchor.left - content.width;
+	if (position.endsWith("end")) return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
+	if (position.endsWith("start")) {
+		if (anchor.left + content.width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
+		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
 	}
-	if (position.startsWith(POSITION_END)) return anchor.right;
-	if (position.startsWith(POSITION_START)) return anchor.left - content.width;
-	if (position.startsWith(POSITION_HORIZONTAL)) {
-		if (anchor.right + content.width <= window.innerWidth) return anchor.right;
-		return anchor.left - content.width;
-	}
-	const left = anchor.left + (anchor.width - content.width) / 2;
-	return left < 0 ? 0 : left;
+	if (!position.startsWith("horizontal")) return 0;
+	if (anchor.right + content.width + margin >= document.body.clientWidth) return anchor.left - content.width;
+	return anchor.right;
 }
-function getY(anchor, content, position, preferAbove) {
-	if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
-	if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
-	if (position.endsWith(POSITION_BOTTOM)) {
-		const bottom = anchor.bottom - content.height;
-		return bottom < 0 ? 0 : bottom;
-	}
-	if (position.endsWith(POSITION_TOP)) {
-		const top = anchor.top;
-		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
+function getY(anchor, content, position, margin, preferAbove) {
+	if (position === "end" || position === "start" || position === "horizontal") {
+		const center = anchor.top + anchor.height / 2;
+		const height = content.height / 2;
+		if (center + height + margin >= document.body.clientHeight) return document.body.clientHeight - content.height - margin / 2;
+		if (center - height - margin <= 0) return margin / 2;
+		return center - height;
 	}
-	if (position.startsWith(POSITION_VERTICAL)) {
-		if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
-		if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
+	if (position.startsWith("above")) return anchor.top - content.height;
+	if (position.startsWith("below")) return anchor.bottom;
+	if (position.endsWith("bottom")) return anchor.bottom - content.height - margin <= 0 ? margin / 2 : anchor.bottom - content.height;
+	if (position.endsWith("top")) return anchor.top + content.height + margin >= document.body.clientHeight ? document.body.clientHeight - content.height - margin : anchor.top;
+	if (!position.startsWith("vertical")) return 0;
+	if (preferAbove) {
+		if (anchor.top - content.height - margin <= 0 && anchor.bottom + content.height + margin <= document.body.clientHeight) return anchor.bottom;
 		return anchor.top - content.height;
 	}
-	return anchor.top + (anchor.height - content.height) / 2;
+	if (anchor.bottom + content.height + margin >= document.body.clientHeight) return anchor.top - content.height;
+	return anchor.bottom;
 }
 function initialize(floatable) {
 	const { anchor, content, interactive } = floatable.options;
@@ -130,7 +155,7 @@ function isDisabled(element) {
 	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
 }
 function onClick(event) {
-	const related = findAncestor(event.target, SELECTOR_ALL);
+	const related = findAncestor(event, SELECTOR_ALL);
 	if (!(related instanceof HTMLElement)) closeAll();
 	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
 	else if (!isDisabled(related)) toggle(related);
@@ -140,12 +165,17 @@ function onKeyDown(event) {
 	const state = getState();
 	if (state == null || state.active.size === 0) return;
 	closeNonInteractive(state);
-	const related = findAncestor(event.target, SELECTOR_CONTENT);
+	const related = findAncestor(event, SELECTOR_CONTENT);
 	if (!(related instanceof HTMLElement)) return;
 	closeAbove(related);
 	const floatable = state.mapped.get(related);
 	if (floatable != null) floatable.toggle(false);
 }
+function setAttribute(position, anchor, floater, top, left) {
+	let actual;
+	if (/^(horizontal|vertical)/.test(position)) actual = getAttribute(position, anchor, top, left);
+	floater.setAttribute("position", actual ?? position);
+}
 function stop(floatable) {
 	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
 	floatable.frame = void 0;
@@ -165,6 +195,7 @@ function toggle(anchor) {
 function updatePosition(floatable) {
 	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
 	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
+	const margin = getMargin();
 	let previousAnchor;
 	let previousContent;
 	let calculated = false;
@@ -185,8 +216,9 @@ function updatePosition(floatable) {
 	function update(anchor, content) {
 		previousAnchor = anchor;
 		previousContent = content;
-		const left = getX(anchor, content, position);
-		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		const left = getX(anchor, content, position, margin);
+		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
+		setAttribute(position, anchor, floatable.options.content, top, left);
 		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
 		else floatable.options.content.style.height = "";
 		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
@@ -200,20 +232,10 @@ function updatePosition(floatable) {
 	}
 	floatable.frame = requestAnimationFrame(run);
 }
-var ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-var ATTRIBUTE_CONTENT = "oui-floatable-content";
-var INSERT_AFTEREND = "afterend";
-var POSITION_ABOVE = "above";
-var POSITION_BELOW = "below";
-var POSITION_BOTTOM = "bottom";
-var POSITION_END = "end";
-var POSITION_HORIZONTAL = "horizontal";
-var POSITION_START = "start";
-var POSITION_SUFFIX_END = "-end";
-var POSITION_SUFFIX_START = "-start";
-var POSITION_TOP = "top";
-var POSITION_VERTICAL = "vertical";
-var POSITIONS = new Set([
+const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const INSERT_AFTEREND = "afterend";
+const POSITIONS = new Set([
 	"above",
 	"above-end",
 	"above-start",
@@ -233,14 +255,14 @@ var POSITIONS = new Set([
 	"vertical-end",
 	"vertical-start"
 ]);
-var PROPERTIES = [
+const PROPERTIES = [
 	"bottom",
 	"left",
 	"right",
 	"top"
 ];
-var SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-var SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 if (window._oscarpalmer_oui_floatable == null) {
 	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
 		enumerable: false,
@@ -258,4 +280,5 @@ if (window._oscarpalmer_oui_floatable == null) {
 		onClick(event);
 	});
 }
+//#endregion
 export { Floatable, deactivate };

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.d.mts

@@ -0,0 +1,20 @@
+//#region src/js/popover.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'oui-popover': OuiPopoverElement;
+  }
+}
+declare class OuiPopoverElement extends HTMLElement {
+  #private;
+  constructor();
+  close(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  hidePopover(): void;
+  open(): void;
+  showPopover(): void;
+  toggle(): void;
+  togglePopover(options?: boolean): boolean;
+}
+//#endregion
+export { OuiPopoverElement };

package/dist/js/{popover.js → popover.mjs}

@@ -1,8 +1,9 @@
-import { Floatable } from "./floatable.js";
-import { createFocusTrap } from "./focus-trap/embedded.js";
+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";
-var index = 0;
+//#region src/js/popover.ts
+let index = 0;
 var OuiPopoverElement = class extends HTMLElement {
 	#floatable;
 	#focusTrap;
@@ -78,10 +79,11 @@ function focus(content) {
 		target.focus();
 	});
 }
-var ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
-var POPOVERS = /* @__PURE__ */ new Map();
-var SELECTOR = "oui-popover";
-var SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
-var SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
+const POPOVERS = /* @__PURE__ */ new Map();
+const SELECTOR = "oui-popover";
+const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
 customElements.define(SELECTOR, OuiPopoverElement);
+//#endregion
 export { OuiPopoverElement };

package/dist/js/sortable.d.mts

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