@tempots/ui

tempotempotsuiframeworktypescriptdomcomponentsrenderables
Provides a higher level of renderables to help fast development with Tempo.

ui package

Functions

Function

Description

Anchor(hrefOrOptions, children)

Creates an anchor element with the specified href and children. When the anchor element is clicked, the location is updated to the specified href.

areLocationsEqual(a, b)

Compares two location objects and returns true if they are equal, false otherwise.

AsyncResultView(result, options)

Renders the view based on the result of an asynchronous operation.

AutoFocus(delay)

Creates a renderable function that focuses on the element after a specified delay.

AutoSelect(delay)

Creates a renderable function that automatically selects the content of an input element after a specified delay.

ElementSize(fn)

Creates a renderable function that monitors the size of an element and provides it as a signal.

handleAnchorClick(callback, options)

Handles anchor click events, optionally checking for external URLs and file extensions.

HTMLTitle(title)

Creates an HTML title element with the specified title.

InViewport(mode, fn)

Creates a renderable component that tracks whether the element is in the viewport.

locationFromURL(url)

Converts a URL string into a LocationData object.

makeRelativeTime(date, now)

matchesRoute(route, path)

Matches a path against a route.

PopOver({ content, open, placement, offset: { mainAxis, crossAxis }, })

Renders a PopOver component.

ProvideAppearance(child)

Provides a child component with an appearance context, which can be used to determine the current appearance (light or dark) based on the user's system preferences.

The appearance context is updated whenever the user's system preferences change, and the component is cleaned up when it is no longer needed.

ProvideLocation(child)

Provides the location context to the child component.

ResultView(result, options)

Renders a view based on the result of a computation.

Router(routes)

Creates a router that maps routes to corresponding renderable components.

SelectOnFocus()

Selects the text inside an input element when it receives focus.

setLocationFromUrl(prop, url)

Sets the location from the given URL and updates the specified property.

timeDiffToString(diffInMillis)

urlFromLocation(location)

Returns the full URL based on the provided location data.

UseAppearance(fn)

Makes the AppearanceType available to the child component by consuming the signal provided by the parent. The result of the function is returned as the final output.

UseLocation(fn)

A hook that provides the current location data to the given function.

WhenInViewport(mode, then, otherwise)

Executes the provided then function when the element is in the viewport. Optionally, executes the otherwise function when the element is not in the viewport.

WindowSize(fn)

Creates a renderable function that monitors the window size and invokes the provided function with the current size.

Variables

Variable

Description

appearanceMarker

A provider mark for a signal representing the current appearance type.

HiddenWhenEmpty

Hides the element when it is empty and restores its initial state when necessary.

LocationProviderMarker

Marker for the LocationProvider.

Type Aliases

Type Alias

Description

AnchorOptions

Options for configuring an anchor element.

AppearanceType

Defines the possible appearance types for the application.

AsyncResultViewOptions

Represents the options for rendering an asynchronous result view.

ExtractParams

Extracts the parameters from a string literal representing a route path.

ExtractParamsFromTuple

Extracts the parameter names from a tuple type.

HandleAnchorClickOptions

Options for handling anchor click events.

HrefOrAnchorOptions

Represents either a string value (or Signal of string) for the href, or a full AnchorOptions object.

This type is used as the first parameter of the Anchor function, allowing for flexible configuration of anchor elements.

InViewportMode

Represents the mode for determining if an element is in the viewport.

  • partial: Indicates that the element is considered in the viewport if any part of it is visible. - full: Indicates that the element is considered in the viewport only if it is fully visible.

LocationData

Represents the data for a location.

MakeParams

Represents a type that transforms a tuple of strings into an object with string keys. If the input type is a tuple, each element of the tuple will become a key in the resulting object, with the corresponding value being a string. If the input type is not a tuple, the resulting type will be never.

MatchResult

The result of a route match.

MatchResultWithRoute

The result of a route match with the matched route.

Placement

Represents the placement options for a pop-over.

PopOverOptions

Represents the properties for a PopOver component.

ResultViewOptions

Represents the signal for a result.

Route

Represents a route in the application.

RouteCatchAll

Represents a catch-all route.

RouteInfo

Represents information about a route.

RouteLiteral

Represents a literal route.

RouteParam

Represents a route parameter.

RouteSegment

Represents a segment of a route.