@torpor/ui 0.1.7 → 0.2.1

package/dist/NavMenu/index.d.ts

@@ -0,0 +1,259 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface NavMenuProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the menu to screen readers  */
+	ariaLabel?: string | undefined,
+	/** The orientation of the menu, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+}
+
+/**
+ * A list of links for navigating a website.
+ *
+ * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
+ *
+ * The structure of a NavMenu is:
+ *
+ * ```
+ * <NavMenu>
+ *	 <NavMenuLink />
+ *	 <NavMenuSeparator /> (optional)
+ *	 <NavMenuPopout /> (optional)
+ *	 ...
+ * </NavMenu>
+ * ```
+ */
+declare function NavMenu(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+}
+
+/**
+ * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
+ *
+ */
+declare function NavMenuButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuButtonProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuElementProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+	/** An element that can be focused via keyboard navigation */
+	element?: HTMLElement,
+}
+
+/**
+ * An element of any type that can be placed in a NavMenu.
+ *
+ */
+declare function NavMenuElement(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuElementProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the group to screen readers  */
+	ariaLabel?: string,
+}
+
+/**
+ * A container for a logical group of navigation menu items.
+ */
+declare function NavMenuGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuGroupProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuGroupHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
+/**
+ * The header for a NavMenuGroup.
+ */
+declare function NavMenuGroupHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuGroupHeaderProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuLinkProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The URL for the menu link */
+	href: string,
+	/** Whether the menu link should open in a new tab/window */
+	newWindow?: boolean,
+	/** Whether this link is disabled */
+	disabled?: boolean,
+}
+
+/**
+ * A link that is placed in a NavMenu and signals a response by a user.
+ *
+ */
+declare function NavMenuLink(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuLinkProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuPopoutProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popout is visible */
+	visible?: boolean,
+}
+
+/**
+ * A popout that is attached to a menu button and can be used to show a submenu.
+ *
+ * The structure of a NavMenuPopout is:
+ *
+ * ```
+ * <NavMenuPopout>
+ *     <NavMenuPopoutButton />
+ * 	<NavMenuPopoutContent />
+ * </NavMenuPopout>
+ * ```
+ */
+declare function NavMenuPopout(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuPopoutProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuPopoutButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number,
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
+/**
+ * A button that is placed in a NavMenu and signals a response by a user.
+ *
+ */
+declare function NavMenuPopoutButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuPopoutButtonProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuPopoutContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end",
+}
+
+/**
+ * The content that is displayed for a NavMenuPopout when it is open.
+ *
+ */
+declare function NavMenuPopoutContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuPopoutContentProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NavMenuSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * An element in a menu that separates logical sets of menu items.
+ */
+declare function NavMenuSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NavMenuSeparatorProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutButton, NavMenuPopoutContent, NavMenuSeparator };

package/dist/Notification/Notification.torp

@@ -0,0 +1,58 @@
+import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+
+interface NotificationProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the notification is visible */
+	visible?: boolean,
+	/** The duration, in milliseconds, to keep the notification visible */
+	duration?: number,
+	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
+	onclose?: () => void,
+}
+
+/**
+ * An element that displays a brief, important message in a way that attracts
+ * the user's attention without interrupting the user's task.
+ *
+ * See [the WAI ARIA guidelines for Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
+ */
+export default function Notification($props: NotificationProps) {
+	$props ??= $watch({});
+	$props.visible ??= true;
+	$props.duration ??= 5000;
+
+	// Set the context to pass down to items
+	let context: NotificationContext = {
+		closeNotification
+	};
+	$context[NotificationContextName] = context;
+
+	$mount(() => {
+		if ($props.duration) {
+			setTimeout(closeNotification, $props.duration);
+		}
+	});
+
+	function closeNotification() {
+		$props.visible = false;
+
+		if ($props.onclose) {
+			$props.onclose();
+		}
+	}
+
+	@render {
+		@if ($props.visible) {
+			<div 
+				{$props.id}
+				class={`torp-notification ${$props.class ?? ""}`.trim()}
+				role="alert"
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/Notification/NotificationClose.torp

@@ -0,0 +1,37 @@
+import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+
+interface NotificationCloseProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that a user can press to close this Notification.
+ */
+export default function NotificationClose($props: NotificationCloseProps) {
+	$props ??= $watch({});
+
+	// Get stuff out of the NotificationContext
+	const context = $context[NotificationContextName] as NotificationContext;
+	if (!context) {
+		throw new Error("NotificationClose must be contained within a Notification");
+	}
+	const { closeNotification } = context;
+
+	function handleClick() {
+		closeNotification();
+	}
+
+	@render {
+		<button
+			{$props.id}
+			class={`torp-notification-close ${$props.class ?? ""}`.trim()}
+			type="button"
+			onclick={handleClick}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/Notification/NotificationContainer.torp

@@ -0,0 +1,24 @@
+
+interface NotificationContainerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The container for one or more Notifications, which can be used to position
+ * the notifications inside the viewport.
+ */
+export default function NotificationContainer($props: NotificationContainerProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-notification-container ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Notification/NotificationContent.torp

@@ -0,0 +1,23 @@
+
+interface NotificationContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content to display within a Notification.
+ */
+export default function NotificationContent($props: NotificationContentProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div 
+			{$props.id}
+			class={`torp-notification-content ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Notification/NotificationTypes.ts

@@ -0,0 +1,5 @@
+export const NotificationContextName = 'Notification';
+
+export interface NotificationContext {
+	closeNotification: () => void;
+}

package/dist/Notification/index.d.ts

@@ -0,0 +1,92 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface NotificationProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the notification is visible */
+	visible?: boolean,
+	/** The duration, in milliseconds, to keep the notification visible */
+	duration?: number,
+	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
+	onclose?: () => void,
+}
+
+/**
+ * An element that displays a brief, important message in a way that attracts
+ * the user's attention without interrupting the user's task.
+ *
+ * See [the WAI ARIA guidelines for Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
+ */
+declare function Notification(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NotificationProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NotificationCloseProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that a user can press to close this Notification.
+ */
+declare function NotificationClose(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NotificationCloseProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NotificationContainerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The container for one or more Notifications, which can be used to position
+ * the notifications inside the viewport.
+ */
+declare function NotificationContainer(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NotificationContainerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface NotificationContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content to display within a Notification.
+ */
+declare function NotificationContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NotificationContentProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Notification, NotificationClose, NotificationContainer, NotificationContent };

package/dist/Notification/index.js

@@ -0,0 +1,36 @@
+// src/Notification/Notification.torp
+import Notification_default from "./Notification.torp";
+
+// src/Notification/NotificationClose.torp
+import NotificationClose_default from "./NotificationClose.torp";
+
+// src/Notification/NotificationContainer.torp
+import NotificationContainer_default from "./NotificationContainer.torp";
+
+// src/Notification/NotificationContent.torp
+import NotificationContent_default from "./NotificationContent.torp";
+
+// src/Notification/showNotification.ts
+import { mount } from "@torpor/view";
+function showNotification(notification, props, target) {
+  if (!target) {
+    target = document.getElementsByClassName("torp-notification-container")[0];
+    if (!target) {
+      throw new Error("No notification container found");
+    }
+  }
+  var fragment = document.createDocumentFragment();
+  while (target.firstChild) {
+    fragment.append(target.firstChild);
+  }
+  mount(target, notification, props);
+  target.prepend(fragment);
+}
+export {
+  Notification_default as Notification,
+  NotificationClose_default as NotificationClose,
+  NotificationContainer_default as NotificationContainer,
+  NotificationContent_default as NotificationContent,
+  showNotification
+};
+//# sourceMappingURL=index.js.map

package/dist/Notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Notification/showNotification.ts"],"sourcesContent":["import { mount } from \"@torpor/view\";\n\n/**\n * Shows a notification component in code.\n * @param notification The notification component\n * @param props The properties for the notification component\n * @param target The target element to show the notification in\n */\nexport default function showNotification(notification: any, props: any, target?: Element): void {\n\tif (!target) {\n\t\t// Put the notification in the first NotificationContainer, or the\n\t\t// document body if there are no NotificationContainers\n\t\ttarget = document.getElementsByClassName(\"torp-notification-container\")[0];\n\t\tif (!target) {\n\t\t\tthrow new Error(\"No notification container found\");\n\t\t}\n\t}\n\n\t// HACK: Should allow mounting in a non-empty container\n\t// Move existing nodes into a fragment, and add them back after mounting\n\tvar fragment = document.createDocumentFragment();\n\twhile (target.firstChild) {\n\t\tfragment.append(target.firstChild);\n\t}\n\n\t// Create the notification\n\tmount(target, notification, props);\n\n\ttarget.prepend(fragment);\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,aAAa;AAQP,SAAR,iBAAkC,cAAmB,OAAY,QAAwB;AAC/F,MAAI,CAAC,QAAQ;AAGZ,aAAS,SAAS,uBAAuB,6BAA6B,EAAE,CAAC;AACzE,QAAI,CAAC,QAAQ;AACZ,YAAM,IAAI,MAAM,iCAAiC;AAAA,IAClD;AAAA,EACD;AAIA,MAAI,WAAW,SAAS,uBAAuB;AAC/C,SAAO,OAAO,YAAY;AACzB,aAAS,OAAO,OAAO,UAAU;AAAA,EAClC;AAGA,QAAM,QAAQ,cAAc,KAAK;AAEjC,SAAO,QAAQ,QAAQ;AACxB;","names":[]}

package/dist/Notification/showNotification.ts

@@ -0,0 +1,30 @@
+import { mount } from "@torpor/view";
+
+/**
+ * Shows a notification component in code.
+ * @param notification The notification component
+ * @param props The properties for the notification component
+ * @param target The target element to show the notification in
+ */
+export default function showNotification(notification: any, props: any, target?: Element): void {
+	if (!target) {
+		// Put the notification in the first NotificationContainer, or the
+		// document body if there are no NotificationContainers
+		target = document.getElementsByClassName("torp-notification-container")[0];
+		if (!target) {
+			throw new Error("No notification container found");
+		}
+	}
+
+	// HACK: Should allow mounting in a non-empty container
+	// Move existing nodes into a fragment, and add them back after mounting
+	var fragment = document.createDocumentFragment();
+	while (target.firstChild) {
+		fragment.append(target.firstChild);
+	}
+
+	// Create the notification
+	mount(target, notification, props);
+
+	target.prepend(fragment);
+}

package/dist/Popover/Popover.torp

@@ -1,5 +1,22 @@
 import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
 
+interface PopoverProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
+	modal?: boolean,
+	/** Whether the popover is visible  */
+	visible?: boolean,
+	/** The element to anchor this popover to, as an alternative to supplying a PopoverTrigger  */
+	anchor?: HTMLElement,
+	/** The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual  */
+	position?: Point,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+}
+
 /**
  * A popover that can be used to show rich content or obtain information from a user.
  *
@@ -14,13 +31,10 @@ import { PopoverContextName, type Point, type PopoverContext, type PopoverState
  * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
  * </Popover>
  * ```
- * @prop {boolean} modal -- Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers 
- * @prop {boolean} visible -- Whether the popover is visible 
- * @prop {HTMLElement | undefined} anchor -- The element to anchor this popover to, as an alternative to supplying a PopoverTrigger 
- * @prop {Point | undefined} position -- The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual 
- * @prop {((value: any) => void) | undefined} [callback] -- A function to be called when the user selects a response
  */
-export default function Popover($props: any) {
+export default function Popover($props: PopoverProps) {
+	$props ??= $watch({});
+
 	let $state: PopoverState = $watch({
 		visible: false,
 		position: { x: 0, y: 0 }
@@ -96,10 +110,10 @@ export default function Popover($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }