@oscarpalmer/oui 0.25.0 → 0.26.1

package/dist/js/tooltip.mjs

@@ -1,4 +1,4 @@
-import { createFloatable } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -14,6 +14,13 @@ var OuiTooltip = class {
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
+	/**
+	* Open or close the tooltip
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 		state.floatable.update();
@@ -57,6 +64,9 @@ function activate(event, focus) {
 		});
 	}, shouldDelay ? delay : 0);
 }
+function addTooltip(element) {
+	if (!states.has(element)) createTooltip(element);
+}
 function closeTooltip(state) {
 	if (state == null) return;
 	if (state.timer != null) clearTimeout(state.timer);
@@ -120,18 +130,21 @@ function getState(anchor, content) {
 	const state = {
 		anchor,
 		content,
-		floatable: createFloatable(anchor, content, options, false),
+		floatable: createEmbeddedFloatable(anchor, content, options),
 		tooltip: null
 	};
 	state.tooltip = new OuiTooltip(state);
 	return state;
 }
+/**
+* Get the _OuiTooltip_ for an element
+*
+* @param element Element to get _OuiTooltip_ for
+* @returns _OuiTooltip_ instance
+*/
 function getTooltip(element) {
 	return states.get(element)?.tooltip;
 }
-function onAdd(element) {
-	if (!states.has(element)) createTooltip(element);
-}
 function onFocusin(event) {
 	activate(event, true);
 }
@@ -148,7 +161,7 @@ function onFocusout() {
 function onPointermove(event) {
 	activate(event, false);
 }
-function onRemove(element) {
+function removeTooltip(element) {
 	const state = states.get(element);
 	if (state == null) return;
 	destroyTooltip(state);
@@ -187,6 +200,6 @@ let focusTimer;
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
 //#endregion
 export { getTooltip, setTooltipDelay };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.25.0",
+	"version": "0.26.1",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -33,6 +33,14 @@
 			"types": "./dist/js/index.d.mts",
 			"default": "./dist/js/index.mjs"
 		},
+		"./dialog": {
+			"types": "./dist/js/dialog.d.mts",
+			"default": "./dist/js/dialog.mjs"
+		},
+		"./floatable": {
+			"types": "./dist/js/floatable/standalone.d.mts",
+			"default": "./dist/js/floatable/standalone.mjs"
+		},
 		"./focus-trap": {
 			"types": "./dist/js/focus-trap/standalone.d.mts",
 			"default": "./dist/js/focus-trap/standalone.mjs"
@@ -53,6 +61,10 @@
 			"types": "./dist/js/splitter.d.mts",
 			"default": "./dist/js/splitter.mjs"
 		},
+		"./toolbar": {
+			"types": "./dist/js/toolbar.d.mts",
+			"default": "./dist/js/toolbar.mjs"
+		},
 		"./tooltip": {
 			"types": "./dist/js/tooltip.d.mts",
 			"default": "./dist/js/tooltip.mjs"

package/src/js/dialog.ts

@@ -15,6 +15,17 @@ class OuiDialog {
 		return this.#state.element.open;
 	}
 
+	/**
+	 * Open or close the dialog
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiDialogState) {
 		this.#state = state;
 	}

package/src/js/floatable/embedded.ts

@@ -5,18 +5,40 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 // #region Types
 
+type CreateOuiFloatableOptions = {
+	/**
+	 * Open the floatable when created? _(defaults to `true`)_
+	 */
+	open?: boolean;
+	/**
+	 * Position of the floatable _(defaults to `below`)_
+	 */
+	position?: OuiFloatablePosition;
+};
+
 export class OuiFloatable {
 	#destroyed = false;
 
 	readonly #state: OuiFloatableState;
 
 	/**
-	 * Is the _Floatable_ open?
+	 * Is the floatable open?
 	 */
 	get open(): boolean {
 		return this.#state.content.checkVisibility();
 	}
 
+	/**
+	 * Open or close the floatable
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
 	constructor(state: OuiFloatableState, standalone: boolean) {
 		this.#state = state;
 
@@ -35,7 +57,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	 * Destroy the floatable, removing it from the DOM and cleaning up references
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -51,7 +73,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Closes the _OuiFloatable_
+	 * Closes the floatable
 	 */
 	hide(): void {
 		if (!this.#destroyed && this.open) {
@@ -60,7 +82,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Opens the _OuiFloatable_
+	 * Opens the floatable
 	 */
 	show(): void {
 		if (!this.#destroyed && !this.open) {
@@ -69,7 +91,7 @@ export class OuiFloatable {
 	}
 
 	/**
-	 * Update the position of the _OuiFloatable_, with an optional new position
+	 * Update the position of the floatable, with an optional new position
 	 *
 	 * @param position Optional new position
 	 */
@@ -105,42 +127,10 @@ type OuiFloatableState = {
 	options: OuiFloatableOptions;
 };
 
-type GetOuiFloatableOptions = {
-	/**
-	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
-	 */
-	open?: boolean;
-	/**
-	 * Position of the _OuiFloatable_ _(defaults to `below`)_
-	 */
-	position?: OuiFloatablePosition;
-};
-
 // #endregion
 
 // #region Functions
 
-export function createFloatable(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	options: OuiFloatableOptions,
-	standalone: boolean,
-): OuiFloatable {
-	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
-		throw new TypeError('Anchor and content must be an HTMLElement or SVGElement.');
-	}
-
-	let floatable = instances.get(content);
-
-	if (floatable == null) {
-		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
-
-		instances.set(content, floatable);
-	}
-
-	return floatable;
-}
-
 function getAnchorName(anchor: HTMLElement): string {
 	let {anchorName} = anchor.style;
 
@@ -153,24 +143,32 @@ function getAnchorName(anchor: HTMLElement): string {
 	return `--oui-floatable-anchor-${index}`;
 }
 
+export function createEmbeddedFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+): OuiFloatable {
+	return createInstance(anchor, content, options, false);
+}
+
 /**
- * Create a _Floatable_ for an anchor and content element
+ * Create a _OuiFloatable_ for an anchor and content element
  *
  * @param anchor Anchor element
  * @param content Content element
- * @param options _Floatable_ options
- * @returns _Floatable_ instance
+ * @param options _OuiFloatable_ options
+ * @returns _OuiFloatable_ instance
  */
-export function getFloatable(
-	anchor: HTMLElement | SVGElement,
-	content: HTMLElement | SVGElement,
-	options?: GetOuiFloatableOptions,
+export function createFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options?: CreateOuiFloatableOptions,
 ): OuiFloatable {
 	const {open, position} = getOptions(options);
 
-	const floatable = createFloatable(
-		anchor as HTMLElement,
-		content as HTMLElement,
+	const floatable = createInstance(
+		anchor,
+		content,
 		{
 			position,
 		},
@@ -186,6 +184,27 @@ export function getFloatable(
 	return floatable;
 }
 
+function createInstance(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+	standalone: boolean,
+): OuiFloatable {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
+		throw new TypeError(MESSAGE);
+	}
+
+	let floatable = instances.get(content);
+
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
+
+		instances.set(content, floatable);
+	}
+
+	return floatable;
+}
+
 export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
 	return on(
 		element,
@@ -203,7 +222,7 @@ export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventL
 	);
 }
 
-function getOptions(input?: GetOuiFloatableOptions): Required<GetOuiFloatableOptions> {
+function getOptions(input?: CreateOuiFloatableOptions): Required<CreateOuiFloatableOptions> {
 	const object = isPlainObject(input) ? input : {};
 
 	return {
@@ -287,6 +306,8 @@ const ATTRIBUTE_POSITION = 'oui-position';
 
 const EVENT_BEFORE = 'beforetoggle';
 
+const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
+
 const POSITIONS = Object.fromEntries(
 	Object.entries(AREAS).map(([position, area]) => [area, position]),
 ) as Record<string, OuiFloatablePosition>;

package/src/js/floatable/standalone.ts

@@ -1 +1 @@
-export {getFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';
+export {createFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';