@torpor/ui 0.2.1 → 0.3.0

package/dist/MenuBar/MenuBarItemContent.torp

@@ -21,11 +21,7 @@ interface MenuBarItemContentProps {
 /**
  * The content that is displayed for a MenuBarItem when it is open.
  */
-export default function MenuBarItemContent($props: MenuBarItemContentProps) {
-	$props ??= $watch({});
-	$props.side ??= "bottom";
-	$props.alignment ??= "start";
-
+export default function MenuBarItemContent($props: MenuBarItemContentProps | undefined) {
 	let div: HTMLDivElement;
 	let closeOnClick = false;
 	let shown = false;
@@ -89,7 +85,7 @@ export default function MenuBarItemContent($props: MenuBarItemContentProps) {
 
 	function handleDocumentClick(e: MouseEvent) {
 		if (closeOnClick && !div.contains(e.target as HTMLElement)) {
-			context.active = false;
+			//context.active = false;
 			setVisible(false);
 		}
 	}
@@ -99,14 +95,16 @@ export default function MenuBarItemContent($props: MenuBarItemContentProps) {
 			throw new Error("MenuBarItemContent must have an anchor element");
 		}
 
-		setPopoverPosition(itemContext.anchorElement, div, $props.side, $props.alignment);
+		let side = $props?.side ?? "bottom";
+		let alignment = $props?.alignment ?? "start";
+		setPopoverPosition(itemContext.anchorElement, div, side, alignment);
 	}
 
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-menu-bar-item-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-menu-bar-item-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/dist/MenuBar/MenuBarItemTrigger.torp

@@ -18,10 +18,7 @@ interface MenuBarItemTriggerProps {
  * A button that is placed in a MenuBar and opens a submenu.
  *
  */
-export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps) {
-	$props ??= $watch({});
-	$props.disabled ??= false;
-
+export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps | undefined) {
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the MenuBarContext
@@ -76,15 +73,15 @@ export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps) {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-bar-item-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-bar-item-button ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitem"
 			aria-haspopup="true"
 			aria-expanded={($state.visible ?? false).toString()}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleKey}
 			onclick={handleClick}
 			onfocus={() => handleButtonFocus(index)}

package/dist/MenuBar/index.d.ts

@@ -21,19 +21,19 @@ interface MenuBarProps {
  *
  * ```
  * <MenuBar>
- *     <MenuBarItem>
- *         <MenuBarItemTrigger />
- *         <MenuBarItemContent>
- *             <Menu />
- *         </MenuBarItemContent>
- *     </MenuBarItem>
+ * 	<MenuBarItem>
+ * 		<MenuBarItemTrigger />
+ * 		<MenuBarItemContent>
+ * 			<Menu />
+ * 		</MenuBarItemContent>
+ * 	</MenuBarItem>
  * </MenuBar>
  * ```
  */
 declare function MenuBar(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: MenuBarProps,
+	$props: MenuBarProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -47,12 +47,12 @@ interface MenuBarItemProps {
 	class?: string,
 	/** Whether the item is visible */
 	visible?: boolean,
-	/** Called when the item is opened or closed */
+	/** Raised when the item is opened or closed */
 	ontoggle?: (visible: boolean) => void,
-	/** Called when the item has opened */
+	/** Raised when the item has opened */
 	onopen?: () => void,
-	/** Called when the item has closed */
-	onclose?: () => void,
+	/** Raised when the item has closed */
+	onclose?: (result: any) => void,
 }
 
 /**
@@ -62,15 +62,15 @@ interface MenuBarItemProps {
  *
  * ```
  * <MenuBarItem>
- *     <MenuBarItemTrigger /> (optional)
- *     <MenuBarItemContent />
+ * 	<MenuBarItemTrigger /> (optional)
+ * 	<MenuBarItemContent />
  * </MenuBarItem>
  * ```
  */
 declare function MenuBarItem(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: MenuBarItemProps,
+	$props: MenuBarItemProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -94,7 +94,7 @@ interface MenuBarItemContentProps {
 declare function MenuBarItemContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: MenuBarItemContentProps,
+	$props: MenuBarItemContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -117,7 +117,7 @@ interface MenuBarItemTriggerProps {
 declare function MenuBarItemTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: MenuBarItemTriggerProps,
+	$props: MenuBarItemTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Modal/Modal.torp

@@ -0,0 +1,118 @@
+import { ModalContextName, type ModalContext, type ModalState } from "./ModalTypes";
+
+interface ModalProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the modal is visible  */
+	visible?: boolean,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the modal is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the modal has opened */
+	onopen?: () => void,
+	/** Raised when the modal has closed */
+	onclose?: (result: any) => void,
+}
+
+/**
+ * A modal window that can be used to show rich content or obtain information from a user.
+ *
+ * See [the WAI ARIA guidelines for Modals](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ *
+ * The structure of a Modal is:
+ *
+ * ```
+ * <Modal>
+ * 	<ModalOverlay />
+ * 	<ModalTrigger /> (optional)
+ * 	<ModalContent />
+ * </Modal>
+ * ```
+ */
+export default function Modal($props: ModalProps | undefined) {
+	let $state: ModalState = $watch({
+		visible: false,
+	})
+
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
+
+	let result: any;
+
+	// Set the context to pass down to items
+	let context: ModalContext = {
+		handleButton,
+		handleClickOutside,
+		state: $state,
+	};
+	$context[ModalContextName] = context;
+
+	// Dispatch the toggle event when the modal is opened or closed
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
+		const visible = $state.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+		// Get the button's result
+		switch (type) {
+			case "confirm": {
+				result = value || true;
+				break;
+			}
+			case "cancel": {
+				result = value || false;
+				break;
+			}
+			default: {
+				result = value;
+				break;
+			}
+		}
+
+		// Hide the modal
+		$state.visible = false;
+
+		// Call the callback
+		if ($props?.callback) {
+			$props?.callback(result);
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		e.preventDefault();
+		$state.visible = false;
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={`torp-modal ${$props?.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Modal/ModalContent.torp

@@ -0,0 +1,77 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { ModalContextName, type ModalContext } from "./ModalTypes";
+
+interface ModalContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Modal when it is open, displayed
+ * alongside an element.
+ */
+export default function ModalContent($props: ModalContentProps | undefined) {
+	let div: HTMLDivElement;
+	let shown = false;
+	let closeOnClick = false;
+
+	// Get stuff out of the ModalContext
+	const context = $context[ModalContextName] as ModalContext;
+	if (!context) {
+		throw new Error("ModalContent must be contained within a Modal");
+	}
+	let $state = context.state;
+
+	$run(() => {
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this Modal could be shown with a click, we need to wait for another mousedown
+		// before we close on click. Otherwise the click immediately bubbles to the document
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement)
+		) {
+			e.preventDefault();
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-modal-content ${$props?.class ?? ""}`.trim()}
+				&ref={div}
+				onmount={show}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/Modal/ModalOverlay.torp

@@ -0,0 +1,38 @@
+import { disableScroll } from "../mount/disableScroll";
+import { ModalContextName, type ModalContext } from "./ModalTypes";
+
+interface ModalOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a modal popup component (e.g. Context, Dialog or Popover).
+ * Adding an overlay automatically sets the component's `modal` value to true.
+ */
+export default function ModalOverlay($props: ModalOverlayProps | undefined) {
+	// Get stuff out of the ModalContext
+	const context = $context[ModalContextName] as ModalContext;
+	if (!context) {
+		throw new Error("ModalOverlay must be contained within a Modal");
+	}
+	let $state = context.state;
+
+	// Any popup with an overlay is modal
+	$state.modal = true;
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-modal-overlay ${$props?.class ?? ""}`.trim()}
+				tabindex="-1"
+				onmount={(el) => disableScroll(el)}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/Modal/ModalTrigger.torp

@@ -0,0 +1,50 @@
+import { ModalContextName, type ModalContext } from "./ModalTypes";
+import hoverTrigger from "../mount/hoverTrigger";
+
+interface ModalTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the modal is activated by click/press or by hover **/
+	activation?: "press" | "hover"
+}
+
+/**
+ * The button that causes a Modal to appear or disappear.
+ */
+export default function ModalTrigger($props: ModalTriggerProps | undefined) {
+	let activation = $props?.activation ?? "press";
+
+	// Get stuff out of the ModalContext
+	const context = $context[ModalContextName] as ModalContext;
+	if (!context) {
+		throw new Error("ModalTrigger must be contained within a Modal");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		if (activation !== "press") return;
+
+		$state.visible = !$state.visible;
+	}
+
+	function handleHover() {
+		if (activation !== "hover") return;
+
+		$state.visible = !$state.visible
+	}
+
+	@render {
+		<button
+			type="button"
+			{$props?.id}
+			class={`torp-modal-trigger ${$props?.class ?? ""}`.trim()}
+			onclick={handleClick}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
+			&ref={context.anchorElement}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/Modal/ModalTypes.ts

@@ -0,0 +1,22 @@
+export const ModalContextName = "Modal";
+
+/** The shared context for modal components (Contextual, Prompt and Modal) */
+export interface ModalContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: ModalState;
+	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
+	// onMount, it will scroll the page to the focused element and mess up our careful positioning
+	// We need to be able to manually set the order to
+	// 1. set visible (so we have an element with content)
+	// 2. set position (so the element is in the right place)
+	// 3. set focus (for accessibility)
+	// There may be a more elegant way to accomplish this!
+	focusFirstElement?: () => void;
+}
+
+export interface ModalState {
+	visible: boolean;
+}

package/dist/Modal/index.d.ts

@@ -0,0 +1,108 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface ModalProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the modal is visible  */
+	visible?: boolean,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the modal is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the modal has opened */
+	onopen?: () => void,
+	/** Raised when the modal has closed */
+	onclose?: (result: any) => void,
+}
+
+/**
+ * A modal window that can be used to show rich content or obtain information from a user.
+ *
+ * See [the WAI ARIA guidelines for Modals](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ *
+ * The structure of a Modal is:
+ *
+ * ```
+ * <Modal>
+ * 	<ModalOverlay />
+ * 	<ModalTrigger /> (optional)
+ * 	<ModalContent />
+ * </Modal>
+ * ```
+ */
+declare function Modal(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ModalProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ModalContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Modal when it is open, displayed
+ * alongside an element.
+ */
+declare function ModalContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ModalContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ModalOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a modal popup component (e.g. Context, Dialog or Popover).
+ * Adding an overlay automatically sets the component's `modal` value to true.
+ */
+declare function ModalOverlay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ModalOverlayProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ModalTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the modal is activated by click/press or by hover **/
+	activation?: "press" | "hover"
+}
+
+/**
+ * The button that causes a Modal to appear or disappear.
+ */
+declare function ModalTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ModalTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Modal, ModalContent, ModalOverlay, ModalTrigger };

package/dist/Modal/index.js

@@ -0,0 +1,33 @@
+// src/Modal/Modal.torp
+import Modal_default from "./Modal.torp";
+
+// src/Modal/ModalContent.torp
+import ModalContent_default from "./ModalContent.torp";
+
+// src/Modal/ModalOverlay.torp
+import ModalOverlay_default from "./ModalOverlay.torp";
+
+// src/Modal/ModalTrigger.torp
+import ModalTrigger_default from "./ModalTrigger.torp";
+
+// src/Modal/showModal.ts
+function showModal(modal, props, target) {
+  modal(target || document.body, null, props);
+}
+
+// src/Modal/showPrompt.ts
+function showPrompt(modal, props, target) {
+  return new Promise((resolve) => {
+    const allProps = Object.assign({}, props, { callback: resolve });
+    modal(target || document.body, null, allProps);
+  });
+}
+export {
+  Modal_default as Modal,
+  ModalContent_default as ModalContent,
+  ModalOverlay_default as ModalOverlay,
+  ModalTrigger_default as ModalTrigger,
+  showModal,
+  showPrompt
+};
+//# sourceMappingURL=index.js.map

package/dist/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal/showModal.ts","../../src/Modal/showPrompt.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline modal\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showModal(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Create the modal\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tmodal(target || document.body, null, props);\n}\n","import type { Component } from \"@torpor/view\";\n\n/**\n * Shows a modal component in code, and asynchronously returns the value selected by the user.\n * @param modal The modal component\n * @param props The properties for the modal component\n * @param target The target element to show the modal in\n * @returns The value selected by the user\n */\nexport default function showPrompt(\n\tmodal: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): Promise<any> {\n\treturn new Promise((resolve) => {\n\t\t// Add the promise as the callback\n\t\tconst allProps = Object.assign({}, props, { callback: resolve });\n\n\t\t// Create the modal\n\t\t// TODO: This needs to clean up after itself, like the use methods do\n\t\tmodal(target || document.body, null, allProps);\n\t});\n}\n"],"mappings":";;;;;;;;;;;;;AAUe,SAAR,UACN,OACA,OACA,QACO;AAGP,QAAM,UAAU,SAAS,MAAM,MAAM,KAAK;AAC3C;;;ACTe,SAAR,WACN,OACA,OACA,QACe;AACf,SAAO,IAAI,QAAQ,CAAC,YAAY;AAE/B,UAAM,WAAW,OAAO,OAAO,CAAC,GAAG,OAAO,EAAE,UAAU,QAAQ,CAAC;AAI/D,UAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAAA,EAC9C,CAAC;AACF;","names":[]}

package/dist/Modal/showModal.ts

@@ -0,0 +1,19 @@
+// TODO: Allow passing in a variable -- so that you can show an inline modal
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a modal component in code.
+ * @param modal The modal component
+ * @param props The properties for the modal component
+ * @param target The target element to show the modal in
+ * @returns The value selected by the user
+ */
+export default function showModal(
+	modal: Component,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): void {
+	// Create the modal
+	// TODO: This needs to clean up after itself, like the mount methods do
+	modal(target || document.body, null, props);
+}

package/dist/Modal/showPrompt.ts

@@ -0,0 +1,23 @@
+import type { Component } from "@torpor/view";
+
+/**
+ * Shows a modal component in code, and asynchronously returns the value selected by the user.
+ * @param modal The modal component
+ * @param props The properties for the modal component
+ * @param target The target element to show the modal in
+ * @returns The value selected by the user
+ */
+export default function showPrompt(
+	modal: Component,
+	props?: Record<PropertyKey, any>,
+	target?: Element,
+): Promise<any> {
+	return new Promise((resolve) => {
+		// Add the promise as the callback
+		const allProps = Object.assign({}, props, { callback: resolve });
+
+		// Create the modal
+		// TODO: This needs to clean up after itself, like the use methods do
+		modal(target || document.body, null, allProps);
+	});
+}