@oscarpalmer/oui 0.15.0 → 0.17.0

package/src/css/splitter.scss

@@ -0,0 +1,87 @@
+@use 'mixins.scss' as mixins;
+
+oui-splitter {
+	:where(&) {
+		display: flex;
+		flex-flow: row nowrap;
+		flex: 1;
+	}
+
+	:where(& > :first-child) {
+		flex: var(--oui-splitter-size, .5);
+	}
+
+	:where(& > :last-child) {
+		flex: calc(1 - var(--oui-splitter-size, .5));
+	}
+}
+
+:where([oui-splitter-separator]) {
+	width: .25rem;
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: .25rem;
+	position: relative;
+	transition: background .125s ease-in-out;
+}
+
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
+:where([oui-splitter-separator][oui-splitter-active]) {
+	background-color: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
+}
+
+:where([oui-splitter-handle]) {
+	width: 2rem;
+	height: 4rem;
+	padding: .875rem;
+	position: absolute;
+	inset: 50% auto auto 50%;
+	transform: translate3d(-50%, -50%, 0);
+	cursor: ew-resize;
+
+	&:focus {
+		outline: none;
+	}
+
+	&::after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		display: block;
+		background-color: rgba(0, 0, 0, 0.25);
+		outline: .25rem solid transparent;
+		outline-offset: .25rem;
+		border-radius: .25rem;
+		transition: background .125s ease-in-out, outline .125s ease-in-out;
+	}
+}
+
+:where([oui-splitter-handle]:focus),
+:where([oui-splitter-handle]:hover),
+:where([oui-splitter-handle][oui-splitter-active]) {
+	&::after {
+		background-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
+	}
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+	outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
+}
+
+oui-splitter[type='horizontal' i],
+oui-splitter[oui-splitter-horizontal] {
+	:where(&) {
+		flex-flow: column nowrap;
+	}
+
+	:where(& [oui-splitter-separator]) {
+		width: 100%;
+		height: .25rem;
+	}
+
+	:where(& [oui-splitter-handle]) {
+		width: 4rem;
+		height: 2rem;
+		cursor: ns-resize;
+	}
+}

package/src/js/floatable.ts

@@ -1,12 +1,18 @@
 export class Floatable {
 		activate: number | undefined;
+
 		active = false;
+
 		deactivate: number | undefined;
+
 		frame: DOMHighResTimeStamp | undefined;
 
 		constructor(
 			public anchor: HTMLElement,
 			public content: HTMLElement,
+			readonly attribute: string,
+			readonly position: Position,
+			readonly preferAbove: boolean,
 		) {
 			setStyles(content);
 		}
@@ -21,6 +27,28 @@ export class Floatable {
 		}
 	}
 
+type Position =
+	| 'above'
+	| 'above-end'
+	| 'above-start'
+	| 'below'
+	| 'below-end'
+	| 'below-start'
+	| 'end'
+	| 'end-bottom'
+	| 'end-top'
+	| 'horizontal'
+	| 'horizontal-bottom'
+	| 'horizontal-top'
+	| 'start'
+	| 'start-bottom'
+	| 'start-top'
+	| 'vertical'
+	| 'vertical-end'
+	| 'vertical-start';
+
+//
+
 export function activate(
 	floatable: Floatable,
 	active: Set<Floatable>,
@@ -63,48 +91,78 @@ export function deactivate(
 	}
 }
 
-function getX(
-	anchor: DOMRect,
-	content: DOMRect,
-): {left?: number; right?: number} {
-	if (content.width + 2 * margin >= window.innerWidth) {
-		return {
-			left: margin,
-			right: margin,
-		};
+function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
+	if (position.endsWith('-end')) {
+		const end = anchor.right - content.width;
+
+		return end - margin < 0 ? margin : end;
+	}
+
+	if (position.endsWith('-start')) {
+		const start = anchor.left;
+
+		return start + content.width + margin > window.innerWidth
+			? window.innerWidth - content.width - margin
+			: start;
 	}
 
-	const left = anchor.left + (anchor.width - content.width) / 2;
-	const right = window.innerWidth - margin;
+	if (position.startsWith('end')) {
+		return anchor.right + margin;
+	}
 
-	if (left < margin) {
-		return {
-			left: margin,
-		};
+	if (position.startsWith('start')) {
+		return anchor.left - content.width - margin;
 	}
 
-	if (left + content.width > right) {
-		return {
-			right: margin,
-		};
+	if (position.startsWith('horizontal')) {
+		if (anchor.right + content.width + margin <= window.innerWidth) {
+			return anchor.right + margin;
+		}
+
+		return anchor.left - content.width - margin;
 	}
 
-	return {
-		left,
-	};
+	return anchor.left + (anchor.width - content.width) / 2;
 }
 
-function getY(anchor: DOMRect, content: DOMRect): number {
-	let top = anchor.top - content.height - margin;
+function getY(
+	anchor: DOMRect,
+	content: DOMRect,
+	position: Position,
+	preferAbove: boolean,
+): number {
+	if (position.startsWith('above')) {
+		return anchor.top - content.height - margin;
+	}
+
+	if (position.startsWith('below')) {
+		return anchor.bottom + margin;
+	}
+
+	if (position.endsWith('bottom')) {
+		const bottom = anchor.bottom - content.height;
+
+		return bottom + margin < 0 ? margin : bottom;
+	}
+
+	if (position.endsWith('top')) {
+		const top = anchor.top;
 
-	if (top - margin >= 0) {
-		return top;
+		return top + content.height + margin > window.innerHeight
+			? window.innerHeight - content.height - margin
+			: top;
 	}
 
-	top = anchor.bottom + margin;
+	if (position.startsWith('vertical')) {
+		if (preferAbove && anchor.top - content.height - margin >= 0) {
+			return anchor.top - content.height - margin;
+		}
+
+		if (anchor.bottom + content.height + margin <= document.body.clientHeight) {
+			return anchor.bottom + margin;
+		}
 
-	if (top + content.height + margin <= window.innerHeight) {
-		return top;
+		return anchor.top - content.height - margin;
 	}
 
 	return anchor.top + (anchor.height - content.height) / 2;
@@ -151,17 +209,25 @@ function onDeactivate(
 }
 
 function update(floatable: Floatable): void {
+	let position: Position =
+		(floatable.anchor.getAttribute(floatable.attribute)?.trim() as Position) ??
+		floatable.position;
+
+	if (!positions.has(position as Position)) {
+		position = floatable.position;
+	}
+
 	function run(): void {
-		const anchor = floatable.anchor.getBoundingClientRect();
-		const content = floatable.content.getBoundingClientRect();
+			const anchor = floatable.anchor.getBoundingClientRect();
+			const content = floatable.content.getBoundingClientRect();
 
-		const {left, right} = getX(anchor, content);
-		const top = getY(anchor, content);
+			const left = getX(anchor, content, position);
+			const top = getY(anchor, content, position, floatable.preferAbove);
 
-		floatable.content.style.inset = `${top}px ${right == null ? 'auto' : `${right}px`} auto ${left == null ? 'auto' : `${left}px`}`;
+			floatable.content.style.inset = `${top}px auto auto ${left}px`;
 
-		floatable.frame = requestAnimationFrame(run);
-	}
+			floatable.frame = requestAnimationFrame(run);
+		}
 
 	floatable.frame = requestAnimationFrame(run);
 }
@@ -193,4 +259,25 @@ function stop(floatable: Floatable): void {
 //
 
 const margin =
-	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;
+
+const positions = new Set<Position>([
+	'above',
+	'above-end',
+	'above-start',
+	'below',
+	'below-end',
+	'below-start',
+	'end',
+	'end-bottom',
+	'end-top',
+	'horizontal',
+	'horizontal-bottom',
+	'horizontal-top',
+	'start',
+	'start-bottom',
+	'start-top',
+	'vertical',
+	'vertical-end',
+	'vertical-start',
+]);

package/src/js/popover.ts

@@ -50,7 +50,14 @@ export class OuiPopoverElement extends HTMLElement {
 		toggle.setAttribute('aria-controls', content.id);
 		toggle.setAttribute('aria-haspopup', 'dialog');
 
-		this.#floatable = new Floatable(toggle, content);
+		this.#floatable = new Floatable(
+			toggle,
+			content,
+			'position',
+			'below-start',
+			false,
+		);
+
 		this.#focusTrap = createFocusTrap(content);
 
 		mapped.set(toggle, this.#floatable);
@@ -132,7 +139,7 @@ function closeAbove(element: HTMLElement): void {
 		}
 	}
 
-	order[index].content.focus();
+	focus(order[index].content);
 }
 
 function focus(content: HTMLElement): void {