@torpor/ui 0.2.1 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @torpor/ui
 
+## 0.3.1
+
+### Patch Changes
+
+- b670819: Feat: more UI form components
+- Updated dependencies [3cc2168]
+- Updated dependencies [13f2afb]
+  - @torpor/view@0.4.7
+
+## 0.3.0
+
+### Minor Changes
+
+- 92438fc: !Edit: split Popover into Contextual, Modal and Popover
+- 42c6b60: !Fix: transitions
+
+### Patch Changes
+
+- 4f17acb: Fix: handle undefined $props in UI components
+- Updated dependencies [255aad3]
+- Updated dependencies [8b377a2]
+- Updated dependencies [450b739]
+- Updated dependencies [168dff3]
+- Updated dependencies [fc60fe0]
+- Updated dependencies [42c6b60]
+- Updated dependencies [2818679]
+- Updated dependencies [38fd0a5]
+- Updated dependencies [3e6f3f7]
+- Updated dependencies [051998b]
+  - @torpor/view@0.4.0
+  - @torpor/unplugin@0.2.1
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/Accordion/Accordion.torp

@@ -34,11 +34,18 @@ interface AccordionProps {
  * </Accordion>
  * ```
  */
-export default function Accordion($props: AccordionProps) {
-	$props ??= $watch({ type: "single", value: "" });
+export default function Accordion($props: AccordionProps | undefined) {
+	let type = $props?.type ?? "single";
 
-	$props.type ||= "single";
-	$props.value ||= $props.type === "single" ? "" : [];
+	let $state = $watch({
+		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+	});
+
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
 
 	let itemStates: ItemState[] = [];
 
@@ -56,13 +63,13 @@ export default function Accordion($props: AccordionProps) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $props.value!;
+		let newValue = $state.value;
 
 		// Get the value
-		switch ($props!.type) {
+		switch (type) {
 			case "single": {
 				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue?.toString();
+				newValue = newValue.toString();
 				for (let item of itemStates) {
 					item.expanded = item.value === newValue;
 				}
@@ -81,22 +88,22 @@ export default function Accordion($props: AccordionProps) {
 		}
 
 		// Set the value
-		$props.value = newValue;
+		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
+		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props.onchange;
-		const value = $props.value;
+		const ev = $props?.onchange;
+		const value = $state.value;
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
-			ev(value!);
+			ev(value);
 		}
 	});
 
@@ -112,21 +119,21 @@ export default function Accordion($props: AccordionProps) {
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($props.value) {
-			switch ($props.type) {
+		if ($state.value) {
+			switch (type) {
 				case "single": {
-					itemState.expanded = $props.value === itemState.value;
+					itemState.expanded = $state.value === itemState.value;
 					break;
 				}
 				case "multiple": {
-					itemState.expanded = $props.value.includes(itemState.value);
+					itemState.expanded = $state.value.includes(itemState.value);
 					break;
 				}
 			}
 		}
 
 		// Set whether the Accordion itself is disabled
-		itemState.parentDisabled = $props.disabled === true
+		itemState.parentDisabled = $props?.disabled === true
 
 		// Add the item's state to the array
 		itemStates.splice(itemState.index, 0, itemState);
@@ -143,13 +150,13 @@ export default function Accordion($props: AccordionProps) {
 	}
 
 	function toggleItem(toggleValue: string) {
-		switch ($props.type) {
+		switch (type) {
 			case "single": {
 				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) and if it
 					// wasn't already expanded (i.e. we collapse it if it was expanded and clicked)
 					if (item.value === toggleValue) {
-						$props.value = item.expanded ? "" : item.value;
+						$state.value = item.expanded ? "" : item.value;
 						break;
 					}
 				}
@@ -167,7 +174,7 @@ export default function Accordion($props: AccordionProps) {
 						newValue.push(item.value);
 					}
 				}
-				$props.value = newValue.sort();
+				$state.value = newValue.sort();
 				break;
 			}
 		}
@@ -210,8 +217,8 @@ export default function Accordion($props: AccordionProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-accordion ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/dist/Accordion/AccordionContent.torp

@@ -13,9 +13,8 @@ interface AccordionContentProps {
 /**
  * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
  */
-export default function AccordionContent($props: AccordionContentProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function AccordionContent($props: AccordionContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
@@ -24,15 +23,15 @@ export default function AccordionContent($props: AccordionContentProps) {
 	let $state = context.state
 
 	// Set the content ID so that it can be used with aria-controls in AccordionTrigger
-	$state.contentId = $props.id;
+	$state.contentId = $props?.id ?? defaultId;
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
-			role={$props.ariaRegion ? "region" : undefined}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-content ${$props?.class ?? ""}`.trim()}
+			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
-			data-state={$state.dataState}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {

package/dist/Accordion/AccordionHeader.torp

@@ -20,9 +20,7 @@ interface AccordionHeaderProps {
  * </AccordionHeader>
  * ```
  */
-export default function AccordionHeader($props: AccordionHeaderProps) {
-	$props ??= $watch({});
-
+export default function AccordionHeader($props: AccordionHeaderProps | undefined) {
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionHeader must be contained within an AccordionItem");
@@ -32,9 +30,9 @@ export default function AccordionHeader($props: AccordionHeaderProps) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			{$props.id}
-			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
+			{$props?.id}
+			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/dist/Accordion/AccordionItem.torp

@@ -29,20 +29,16 @@ interface AccordionItemProps {
  * </AccordionItem>
  * ```
  */
-export default function AccordionItem($props: AccordionItemProps) {
-	$props ??= $watch({});
-
+export default function AccordionItem($props: AccordionItemProps | undefined) {
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
 		headerId: "",
 		contentId: "",
-		disabled: $props.disabled,
+		disabled: $props?.disabled ?? false,
 		parentDisabled: false,
-		get dataState() {
-			return this.expanded ? "open" : "closed";
-		},
+		setFocused
 	})
 
 	// Get stuff out of the AccordionContext
@@ -60,7 +56,7 @@ export default function AccordionItem($props: AccordionItemProps) {
 	$context[AccordionItemContextName] = itemContext;
 
 	// Register this item with the parent Accordion, which will handle toggling expanded for all items
-	context.registerItem($state);
+	context.registerItem($state, setFocused);
 
 	// Remove the item from the parent Accordion when this item is destroyed
 	$run(() => {
@@ -72,7 +68,7 @@ export default function AccordionItem($props: AccordionItemProps) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props.ontoggle;
+		const ev = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
@@ -81,11 +77,18 @@ export default function AccordionItem($props: AccordionItemProps) {
 		}
 	});
 
+	// Called from the parent Accordion; pass the focus command along to the AccordionButton
+	function setFocused() {
+		if (itemContext.setHeaderFocused) {
+			itemContext.setHeaderFocused();
+		}
+	}
+
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
+			{$props?.id}
+			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/dist/Accordion/AccordionTrigger.torp

@@ -11,9 +11,8 @@ interface AccordionTriggerProps {
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
-export default function AccordionTrigger($props: AccordionTriggerProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function AccordionTrigger($props: AccordionTriggerProps | undefined) {
+	let defaultId = getId();
 
 	let button: HTMLButtonElement;
 
@@ -25,7 +24,7 @@ export default function AccordionTrigger($props: AccordionTriggerProps) {
 	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in AccordionContent
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	// Let the item know how to set the button's focus
 	$state.setFocused = setFocused;
@@ -49,13 +48,13 @@ export default function AccordionTrigger($props: AccordionTriggerProps) {
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-trigger ${$props?.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled ? "true" : undefined}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}

package/dist/Accordion/AccordionTypes.ts

@@ -13,12 +13,14 @@ export interface AccordionContext {
 }
 
 export interface AccordionItemContext {
-	/** Called when an AccordionItem is toggled */
+	/** Raised when an AccordionItem is toggled */
 	toggleItem: (value: string) => void;
-	/** Called when an AccordionHeader receives a keyboard event */
+	/** Raised when an AccordionHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an AccordionItem */
 	state: ItemState;
+	/** Called in an AccordionItem when its header needs to be focused */
+	setHeaderFocused?: () => void;
 }
 
 export interface ItemState {
@@ -29,7 +31,6 @@ export interface ItemState {
 	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
-	dataState: "open" | "closed";
 	/** Called in the Accordion when a header needs to be focused */
 	setFocused: () => void;
 }

package/dist/Accordion/index.d.ts

@@ -38,7 +38,7 @@ interface AccordionProps {
 declare function Accordion(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: AccordionProps,
+	$props: AccordionProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -60,7 +60,7 @@ interface AccordionContentProps {
 declare function AccordionContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: AccordionContentProps,
+	$props: AccordionContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -90,7 +90,7 @@ interface AccordionHeaderProps {
 declare function AccordionHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: AccordionHeaderProps,
+	$props: AccordionHeaderProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -129,7 +129,7 @@ interface AccordionItemProps {
 declare function AccordionItem(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: AccordionItemProps,
+	$props: AccordionItemProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -149,7 +149,7 @@ interface AccordionTriggerProps {
 declare function AccordionTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: AccordionTriggerProps,
+	$props: AccordionTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Breadcrumb/Breadcrumb.torp

@@ -18,23 +18,22 @@ interface BreadcrumbProps {
  *
  * ```
  * <Breadcrumb>
- *     <BreadcrumbItem />
- *     <BreadcrumbSeparator /> (optional)
- *     <BreadcrumbItem />
- * 	...
+ * 	<BreadcrumbItem />
+ * 	<BreadcrumbSeparator /> (optional)
+ * 	<BreadcrumbItem>
+ * 		...
+ * 	</BreadcrumbItem>
  * </Breadcrumb>
  * ```
  *
  * You can separate BreadcrumbItems using BreadcrumbSeparators or by using CSS.
  */
-export default function Breadcrumb($props: BreadcrumbProps) {
-	$props ??= $watch({});
-
+export default function Breadcrumb($props: BreadcrumbProps | undefined) {
 	@render {
 		<nav
-			{$props.id}
-			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
-			aria-label={$props.ariaLabel}
+			{$props?.id}
+			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			aria-label={$props?.ariaLabel}
 		>
 			<slot />
 		</nav>

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -12,15 +12,13 @@ interface BreadcrumbItemProps {
  * An item in a breadcrumb, containing a link to one of the parent pages of the
  * current page (or the current page).
  */
-export default function BreadcrumbItem($props: BreadcrumbItemProps) {
-	$props ??= $watch({});
-
+export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
-			aria-current={$props.current ? "page" : undefined}
-			data-current={$props.current ? "current" : undefined}
+			{$props?.id}
+			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			aria-current={$props?.current ? "page" : undefined}
+			data-current={$props?.current ? "current" : undefined}
 		>
 			<slot />
 		</div>

package/dist/Breadcrumb/BreadcrumbSeparator.torp

@@ -10,13 +10,11 @@ interface BreadcrumbSeparatorProps {
  * A separator between links in a Breadcrumb component. It is hidden from
  * screen readers.
  */
-export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps) {
-	$props ??= $watch({});
-
+export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-breadcrumb-separator ${$props?.class ?? ""}`.trim()}
 			aria-hidden="true"
 		>
 			<slot />

package/dist/Breadcrumb/index.d.ts

@@ -20,10 +20,11 @@ interface BreadcrumbProps {
  *
  * ```
  * <Breadcrumb>
- *     <BreadcrumbItem />
- *     <BreadcrumbSeparator /> (optional)
- *     <BreadcrumbItem />
- * 	...
+ * 	<BreadcrumbItem />
+ * 	<BreadcrumbSeparator /> (optional)
+ * 	<BreadcrumbItem>
+ * 		...
+ * 	</BreadcrumbItem>
  * </Breadcrumb>
  * ```
  *
@@ -32,7 +33,7 @@ interface BreadcrumbProps {
 declare function Breadcrumb(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: BreadcrumbProps,
+	$props: BreadcrumbProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -55,7 +56,7 @@ interface BreadcrumbItemProps {
 declare function BreadcrumbItem(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: BreadcrumbItemProps,
+	$props: BreadcrumbItemProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -76,7 +77,7 @@ interface BreadcrumbSeparatorProps {
 declare function BreadcrumbSeparator(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: BreadcrumbSeparatorProps,
+	$props: BreadcrumbSeparatorProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Calendar/Calendar.torp

@@ -32,10 +32,11 @@ export default function Calendar($props: CalendarProps) {
 	let $state = $watch({
 		activeDate: $props.value,
 		visibleDate: $props.value,
-		//get days() {
-		//	// TODO: $cache
-		//	return buildDays($state.visibleDate, $props.startOfWeek)
-		//},
+		get days() {
+			return $cache(() => {
+				return buildDays($state.visibleDate, $props.startOfWeek)
+			});
+		},
 	});
 
 	let visibleStartDate = $props.value;
@@ -49,8 +50,6 @@ export default function Calendar($props: CalendarProps) {
 	$context[CalendarContextName] = context;
 
 	$run(() => {
-		$state.days = buildDays($state.visibleDate, $props.startOfWeek)
-
 		// HACK: Shouldn't need this
 		if (refocus) {
 			refocus = false;
@@ -219,27 +218,27 @@ export default function Calendar($props: CalendarProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-calendar ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-calendar ${$props?.class ?? ""}`.trim()}
 			&ref={container}
 		>
-			<div class={`torp-calendar-header ${$props.class ?? ""}`.trim()}>
-				<button class={`torp-calendar-previous-trigger ${$props.class ?? ""}`.trim()} onclick={handlePrevMonth}>
+			<div class={`torp-calendar-header ${$props?.class ?? ""}`.trim()}>
+				<button class={`torp-calendar-previous-trigger ${$props?.class ?? ""}`.trim()} onclick={handlePrevMonth}>
 					<slot name="prev-button">
 						<ChevronLeft />
 					</slot>
 				</button>
-				<span class={`torp-calendar-month-name ${$props.class ?? ""}`.trim()}>
+				<span class={`torp-calendar-month-name ${$props?.class ?? ""}`.trim()}>
 					{monthNames[$state.visibleDate.getMonth()] + " " + $state.visibleDate.getFullYear()}
 				</span>
-				<button class={`torp-calendar-next-trigger ${$props.class ?? ""}`.trim()} onclick={handleNextMonth}>
+				<button class={`torp-calendar-next-trigger ${$props?.class ?? ""}`.trim()} onclick={handleNextMonth}>
 					<slot name="next-button">
 						<ChevronRight />
 					</slot>
 				</button>
 			</div>
 			<div
-				class={`torp-calendar-grid ${$props.class ?? ""}`.trim()}
+				class={`torp-calendar-grid ${$props?.class ?? ""}`.trim()}
 				tabindex={$props.selectable ? 0 : -1}
 				onfocus={handleFocus}
 				onkeydown={handleKey}

package/dist/Calendar/CalendarDay.torp

@@ -48,9 +48,9 @@ export default function CalendarDay($props: CalendarDayProps) {
 
 	@render {
 		<div 
-			{$props.id}
+			{$props?.id}
 			class={[
-				`torp-calendar-day ${$props.class ?? ""}`.trim(),
+				`torp-calendar-day ${$props?.class ?? ""}`.trim(),
 				{
 					muted: $props.muted,
 					today: isToday(),
@@ -65,7 +65,7 @@ export default function CalendarDay($props: CalendarDayProps) {
 			} else {
 				<span>{date.getDate()}</span>
 			}
-			<ul class={`torp-calendar-day-events ${$props.class ?? ""}`.trim()}>
+			<ul class={`torp-calendar-day-events ${$props?.class ?? ""}`.trim()}>
 				@for (ev of $props.events) {
 					<li title={ev.content} />
 				}