@torpor/ui 0.4.0 → 1.0.1

package/dist/NavMenu/index.d.ts

@@ -5,13 +5,13 @@ interface NavMenuProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers  */
-	ariaLabel?: string | undefined,
+	ariaLabel?: string | undefined;
 	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 }
 
 /**
@@ -44,15 +44,15 @@ interface NavMenuButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
 	/** Raised when a key is pressed down */
-	onkeydown?: (e: KeyboardEvent) => void,
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
@@ -73,13 +73,13 @@ interface NavMenuElementProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** An element that can be focused via keyboard navigation */
-	element?: HTMLElement,
+	element?: HTMLElement;
 }
 
 /**
@@ -100,11 +100,11 @@ interface NavMenuGroupProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the group to screen readers  */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
@@ -124,11 +124,9 @@ interface NavMenuGroupHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
@@ -148,15 +146,15 @@ interface NavMenuLinkProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The URL for the menu link */
-	href: string,
+	href: string;
 	/** Whether the menu link should open in a new tab/window */
-	newWindow?: boolean,
+	newWindow?: boolean;
 	/** Whether this link is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -177,21 +175,19 @@ interface NavMenuPopoutProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the popout is visible */
-	visible?: boolean,
-	/** Raised when the popout is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	visible: Bindable<boolean | undefined>;
 	/** Raised when the popout has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
- * A popout that is attached to a menu button and can be used to show a submenu.
+ * A popout that is attached to a nav menu button and can be used to show a submenu.
  *
  * The structure of a NavMenuPopout is:
  *
@@ -216,13 +212,13 @@ interface NavMenuPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Where the popout will be shown, relative to the popout button */
-	side?: "top" | "right" | "bottom" | "left",
+	side?: "top" | "right" | "bottom" | "left";
 	/** How the popout will be aligned, relative to the popout button */
-	alignment?: "start" | "center" | "end",
+	alignment?: "start" | "center" | "end";
 }
 
 /**
@@ -243,13 +239,13 @@ interface NavMenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
+	hoverDelay?: number;
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -270,9 +266,9 @@ interface NavMenuSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -286,4 +282,4 @@ declare function NavMenuSeparator(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };

package/dist/NavMenu/index.js

@@ -1,42 +1,11 @@
-// src/NavMenu/NavMenu.torp
-import NavMenu_default from "./NavMenu.torp";
-
-// src/NavMenu/NavMenuButton.torp
-import NavMenuButton_default from "./NavMenuButton.torp";
-
-// src/NavMenu/NavMenuElement.torp
-import NavMenuElement_default from "./NavMenuElement.torp";
-
-// src/NavMenu/NavMenuGroup.torp
-import NavMenuGroup_default from "./NavMenuGroup.torp";
-
-// src/NavMenu/NavMenuGroupHeader.torp
-import NavMenuGroupHeader_default from "./NavMenuGroupHeader.torp";
-
-// src/NavMenu/NavMenuLink.torp
-import NavMenuLink_default from "./NavMenuLink.torp";
-
-// src/NavMenu/NavMenuPopout.torp
-import NavMenuPopout_default from "./NavMenuPopout.torp";
-
-// src/NavMenu/NavMenuPopoutContent.torp
-import NavMenuPopoutContent_default from "./NavMenuPopoutContent.torp";
-
-// src/NavMenu/NavMenuPopoutTrigger.torp
-import NavMenuPopoutTrigger_default from "./NavMenuPopoutTrigger.torp";
-
-// src/NavMenu/NavMenuSeparator.torp
-import NavMenuSeparator_default from "./NavMenuSeparator.torp";
-export {
-  NavMenu_default as NavMenu,
-  NavMenuButton_default as NavMenuButton,
-  NavMenuElement_default as NavMenuElement,
-  NavMenuGroup_default as NavMenuGroup,
-  NavMenuGroupHeader_default as NavMenuGroupHeader,
-  NavMenuLink_default as NavMenuLink,
-  NavMenuPopout_default as NavMenuPopout,
-  NavMenuPopoutContent_default as NavMenuPopoutContent,
-  NavMenuPopoutTrigger_default as NavMenuPopoutTrigger,
-  NavMenuSeparator_default as NavMenuSeparator
-};
-//# sourceMappingURL=index.js.map
+import NavMenu from "./NavMenu.torp";
+import NavMenuButton from "./NavMenuButton.torp";
+import NavMenuElement from "./NavMenuElement.torp";
+import NavMenuGroup from "./NavMenuGroup.torp";
+import NavMenuGroupHeader from "./NavMenuGroupHeader.torp";
+import NavMenuLink from "./NavMenuLink.torp";
+import NavMenuPopout from "./NavMenuPopout.torp";
+import NavMenuPopoutContent from "./NavMenuPopoutContent.torp";
+import NavMenuPopoutTrigger from "./NavMenuPopoutTrigger.torp";
+import NavMenuSeparator from "./NavMenuSeparator.torp";
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };

package/dist/Notification/Notification.torp

@@ -1,19 +1,19 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import { type NotificationContext, NotificationContextName } from "./NotificationTypes";
 
 interface NotificationProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the notification is visible */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** The duration, in milliseconds, to keep the notification visible */
-	duration?: number,
+	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,
+	onclose?: () => void;
 }
 
 /**
@@ -26,25 +26,18 @@ export default function Notification($props: NotificationProps | undefined) {
 	let defaultDuration = 5000;
 
 	let $state = $watch({
-		visible: false
+		visible: $props?.visible ?? true,
 	});
 
-	$run(() => {
-		$state.visible = $props?.visible ?? true;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
+	$bind($state, $props, "visible");
 
 	// Set the context to pass down to items
 	let context: NotificationContext = {
-		closeNotification
+		closeNotification,
 	};
 	$context[NotificationContextName] = context;
 
-	$mount(() => {
+	$onmount(() => {
 		setTimeout(closeNotification, $props?.duration ?? defaultDuration);
 	});
 
@@ -58,12 +51,7 @@ export default function Notification($props: NotificationProps | undefined) {
 
 	@render {
 		@if ($state.visible) {
-			<div 
-				{$props?.id}
-				class={["torp-notification", $props?.class]}
-				{$props?.style}
-				role="alert"
-			>
+			<div {$props?.id} class={["torp-notification", $props?.class]} {$props?.style} role="alert">
 				<slot />
 			</div>
 		}

package/dist/Notification/NotificationClose.torp

@@ -1,13 +1,15 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+import { type NotificationContext, NotificationContextName } from "./NotificationTypes";
 
 interface NotificationCloseProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label for the close button, for screen readers when the button contains no text */
+	ariaLabel?: string;
 }
 
 /**
@@ -31,6 +33,7 @@ export default function NotificationClose($props: NotificationCloseProps | undef
 			class={["torp-notification-close", $props?.class]}
 			{$props?.style}
 			type="button"
+			aria-label={$props?.ariaLabel ?? "Dismiss"}
 			onclick={handleClick}
 		>
 			<slot />

package/dist/Notification/NotificationContainer.torp

@@ -4,9 +4,9 @@ interface NotificationContainerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -15,11 +15,7 @@ interface NotificationContainerProps {
  */
 export default function NotificationContainer($props: NotificationContainerProps | undefined) {
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-notification-container", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-notification-container", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Notification/NotificationContent.torp

@@ -4,9 +4,9 @@ interface NotificationContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -14,11 +14,7 @@ interface NotificationContentProps {
  */
 export default function NotificationContent($props: NotificationContentProps | undefined) {
 	@render {
-		<div 
-			{$props?.id}
-			class={["torp-notification-content", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-notification-content", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Notification/NotificationTypes.ts

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

package/dist/Notification/index.d.ts

@@ -5,15 +5,15 @@ interface NotificationProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the notification is visible */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** The duration, in milliseconds, to keep the notification visible */
-	duration?: number,
+	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,
+	onclose?: () => void;
 }
 
 /**
@@ -36,9 +36,11 @@ interface NotificationCloseProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label for the close button, for screen readers when the button contains no text */
+	ariaLabel?: string;
 }
 
 /**
@@ -58,9 +60,9 @@ interface NotificationContainerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -81,9 +83,9 @@ interface NotificationContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -97,4 +99,5 @@ declare function NotificationContent(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Notification, NotificationClose, NotificationContainer, NotificationContent };
+export { Notification, NotificationClose, NotificationContainer, NotificationContent };
+export { default as showNotification } from "./showNotification";

package/dist/Notification/index.js

@@ -1,36 +1,26 @@
-// 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";
+import Notification from "./Notification.torp";
+import NotificationClose from "./NotificationClose.torp";
+import NotificationContainer from "./NotificationContainer.torp";
+import NotificationContent from "./NotificationContent.torp";
+//#region src/Notification/showNotification.ts
+/**
+* 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
+*/
 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);
+	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
-};
+//#endregion
+export { Notification, NotificationClose, NotificationContainer, NotificationContent, showNotification };
+
 //# sourceMappingURL=index.js.map

package/dist/Notification/index.js.map

@@ -1 +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":[]}
+{"version":3,"file":"index.js","names":[],"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":";;;;;;;;;;;;AAQA,SAAwB,iBAAiB,cAAmB,OAAY,QAAwB;CAC/F,IAAI,CAAC,QAAQ;EAGZ,SAAS,SAAS,uBAAuB,6BAA6B,CAAC,CAAC;EACxE,IAAI,CAAC,QACJ,MAAM,IAAI,MAAM,iCAAiC;CAEnD;CAIA,IAAI,WAAW,SAAS,uBAAuB;CAC/C,OAAO,OAAO,YACb,SAAS,OAAO,OAAO,UAAU;CAIlC,MAAM,QAAQ,cAAc,KAAK;CAEjC,OAAO,QAAQ,QAAQ;AACxB"}