@tempots/ui 2.6.0 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +153 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,154 @@
|
|
|
1
|
-
# Tempo
|
|
1
|
+
# Tempo UI (@tempots/ui)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A collection of reusable UI components and renderables built on top of @tempots/dom to accelerate development with Tempo. This package provides higher-level abstractions for common UI patterns and components.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@tempots/ui)
|
|
6
|
+
[](https://github.com/fponticelli/tempots/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
# npm
|
|
12
|
+
npm install @tempots/dom @tempots/std @tempots/ui
|
|
13
|
+
|
|
14
|
+
# yarn
|
|
15
|
+
yarn add @tempots/dom @tempots/std @tempots/ui
|
|
16
|
+
|
|
17
|
+
# pnpm
|
|
18
|
+
pnpm add @tempots/dom @tempots/std @tempots/ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Note: @tempots/dom and @tempots/std are peer dependencies and must be installed alongside @tempots/ui.
|
|
22
|
+
|
|
23
|
+
## Features
|
|
24
|
+
|
|
25
|
+
### UI Components
|
|
26
|
+
|
|
27
|
+
The library provides a set of reusable UI components:
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { html, render } from '@tempots/dom'
|
|
31
|
+
import { AutoFocus, AutoSelect, InViewport } from '@tempots/ui'
|
|
32
|
+
|
|
33
|
+
// Create an input that automatically gets focus
|
|
34
|
+
const focusedInput = html.input(
|
|
35
|
+
AutoFocus(), // Automatically focus this input when rendered
|
|
36
|
+
AutoSelect() // Automatically select all text when focused
|
|
37
|
+
)
|
|
38
|
+
|
|
39
|
+
// Create an element that detects when it's in the viewport
|
|
40
|
+
const lazyLoadedContent = InViewport(
|
|
41
|
+
{ threshold: 0.5 }, // Options for intersection observer
|
|
42
|
+
(isVisible) => isVisible.value
|
|
43
|
+
? html.div('Content is visible!')
|
|
44
|
+
: html.div('Loading...')
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
render(html.div(focusedInput, lazyLoadedContent), document.body)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Routing
|
|
51
|
+
|
|
52
|
+
The library includes a simple but powerful routing system:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { render } from '@tempots/dom'
|
|
56
|
+
import { Router, Location } from '@tempots/ui'
|
|
57
|
+
|
|
58
|
+
const AppRouter = Router({
|
|
59
|
+
'/': () => html.div('Home Page'),
|
|
60
|
+
'/about': () => html.div('About Page'),
|
|
61
|
+
'/users/:id': (info) => {
|
|
62
|
+
// Access route parameters
|
|
63
|
+
const userId = info.$.params.$.id
|
|
64
|
+
return html.div('User Profile: ', userId)
|
|
65
|
+
},
|
|
66
|
+
'*': () => html.div('404 - Not Found')
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
render(AppRouter, document.body)
|
|
70
|
+
|
|
71
|
+
// Navigate programmatically
|
|
72
|
+
Location.navigate('/about')
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Resource Loading
|
|
76
|
+
|
|
77
|
+
Handle async data loading with built-in loading and error states:
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import { html, render } from '@tempots/dom'
|
|
81
|
+
import { Resource } from '@tempots/ui'
|
|
82
|
+
|
|
83
|
+
// Load data from an API
|
|
84
|
+
const userResource = Resource({
|
|
85
|
+
load: () => fetch('/api/user').then(r => r.json()),
|
|
86
|
+
loading: () => html.div('Loading user...'),
|
|
87
|
+
error: (err) => html.div('Error loading user: ', err.message),
|
|
88
|
+
success: (user) => html.div(
|
|
89
|
+
html.h2(user.name),
|
|
90
|
+
html.p(user.email)
|
|
91
|
+
)
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
render(userResource, document.body)
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Form Helpers
|
|
98
|
+
|
|
99
|
+
Simplify form input handling:
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
import { html, render, prop } from '@tempots/dom'
|
|
103
|
+
import { SelectOnFocus, AutoSelect } from '@tempots/ui'
|
|
104
|
+
|
|
105
|
+
function LoginForm() {
|
|
106
|
+
const username = prop('')
|
|
107
|
+
const password = prop('')
|
|
108
|
+
|
|
109
|
+
return html.form(
|
|
110
|
+
html.div(
|
|
111
|
+
html.label('Username'),
|
|
112
|
+
html.input(
|
|
113
|
+
AutoFocus(),
|
|
114
|
+
SelectOnFocus(),
|
|
115
|
+
attr.value(username),
|
|
116
|
+
on.input(e => username.set(e.target.value))
|
|
117
|
+
)
|
|
118
|
+
),
|
|
119
|
+
html.div(
|
|
120
|
+
html.label('Password'),
|
|
121
|
+
html.input(
|
|
122
|
+
attr.type('password'),
|
|
123
|
+
attr.value(password),
|
|
124
|
+
on.input(e => password.set(e.target.value))
|
|
125
|
+
)
|
|
126
|
+
),
|
|
127
|
+
html.button('Login')
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## Available Components
|
|
133
|
+
|
|
134
|
+
The library includes the following components and utilities:
|
|
135
|
+
|
|
136
|
+
- `AutoFocus` - Automatically focus an element
|
|
137
|
+
- `AutoSelect` - Automatically select text in an input
|
|
138
|
+
- `SelectOnFocus` - Select all text when an input is focused
|
|
139
|
+
- `InViewport` - Detect when an element is in the viewport
|
|
140
|
+
- `Router` - Simple client-side routing
|
|
141
|
+
- `Location` - Navigation and location utilities
|
|
142
|
+
- `Resource` - Async data loading with loading/error states
|
|
143
|
+
- `AsyncResultView` - Display async operation results
|
|
144
|
+
- `ResultView` - Display success/failure results
|
|
145
|
+
- `PopOver` - Create popup/popover elements
|
|
146
|
+
- And more...
|
|
147
|
+
|
|
148
|
+
## Documentation
|
|
149
|
+
|
|
150
|
+
For comprehensive documentation, visit the [Tempo Documentation Site](https://tempo-ts.com/library/tempots-ui.html).
|
|
151
|
+
|
|
152
|
+
## License
|
|
153
|
+
|
|
154
|
+
This package is licensed under the Apache License 2.0.
|