@theredhead/lucid-blocks 0.1.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
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @theredhead/lucid-blocks
|
|
2
|
+
|
|
3
|
+
Higher-level layout compositions for theredhead Angular applications. Built on
|
|
4
|
+
top of `@theredhead/lucid-kit` primitives, standalone, signal-based, and OnPush.
|
|
5
|
+
|
|
6
|
+
> **Early-stage — not production ready.** This package is still undergoing
|
|
7
|
+
> active development and is subject to breaking changes without notice until
|
|
8
|
+
> a stable `1.0` release.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Components
|
|
13
|
+
|
|
14
|
+
### UIMasterDetailView
|
|
15
|
+
|
|
16
|
+
A responsive master-detail layout. The master pane can render data as either a
|
|
17
|
+
**table** (`UITableView`) or a **tree** (`UITreeView`). The detail pane uses
|
|
18
|
+
content projection so you can render anything for the selected item.
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { UIMasterDetailView } from "@theredhead/lucid-blocks";
|
|
22
|
+
|
|
23
|
+
@Component({
|
|
24
|
+
selector: "app-users",
|
|
25
|
+
standalone: true,
|
|
26
|
+
imports: [UIMasterDetailView, UITextColumn],
|
|
27
|
+
template: `
|
|
28
|
+
<ui-master-detail-view
|
|
29
|
+
[datasource]="adapter"
|
|
30
|
+
masterTitle="Users"
|
|
31
|
+
detailPlaceholderText="Select a user to view details"
|
|
32
|
+
(selectedItemChange)="onSelect($event)"
|
|
33
|
+
>
|
|
34
|
+
<ui-text-column key="name" headerText="Name" [sortable]="true" />
|
|
35
|
+
<ui-text-column key="email" headerText="Email" />
|
|
36
|
+
|
|
37
|
+
<ng-template #detail let-item>
|
|
38
|
+
<h2>{{ item.name }}</h2>
|
|
39
|
+
<p>{{ item.email }}</p>
|
|
40
|
+
</ng-template>
|
|
41
|
+
</ui-master-detail-view>
|
|
42
|
+
`,
|
|
43
|
+
})
|
|
44
|
+
export class UsersComponent {
|
|
45
|
+
datasource = new ArrayDatasource(this.users);
|
|
46
|
+
|
|
47
|
+
onSelect(item: unknown) {
|
|
48
|
+
console.log("selected", item);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
#### Key inputs
|
|
54
|
+
|
|
55
|
+
| Input | Type | Default | Description |
|
|
56
|
+
| ----------------------- | -------------------------------------- | ------------------ | -------------------------------------- |
|
|
57
|
+
| `datasource` | `IDatasource<T> \| ITreeDatasource<T>` | — | Data source (flat table or tree mode) |
|
|
58
|
+
| `data` | `readonly T[]` | `[]` | Convenience raw data array |
|
|
59
|
+
| `masterTitle` | `string` | `'Items'` | Title shown above the master pane |
|
|
60
|
+
| `detailPlaceholderText` | `string` | `'Select an item'` | Placeholder when nothing is selected |
|
|
61
|
+
| `mode` | `'table' \| 'tree'` | `'table'` | Master pane display mode |
|
|
62
|
+
| `showFilter` | `boolean` | `false` | Show a filter section above the master |
|
|
63
|
+
|
|
64
|
+
#### Outputs
|
|
65
|
+
|
|
66
|
+
| Output | Type | Description |
|
|
67
|
+
| -------------------- | ---- | ------------------------------ |
|
|
68
|
+
| `selectedItemChange` | `T` | Emitted when selection changes |
|
|
69
|
+
|
|
70
|
+
#### Content projection
|
|
71
|
+
|
|
72
|
+
- **Columns** — project `UITableViewColumn` children for table mode
|
|
73
|
+
- **`#detail` template** — rendered in the detail pane with the selected item
|
|
74
|
+
- **`#filter` template** — optional filter controls above the master pane
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Features
|
|
79
|
+
|
|
80
|
+
- Standalone component — no module imports needed
|
|
81
|
+
- Responsive grid layout (two-column on desktop, stacked on mobile)
|
|
82
|
+
- Supports both flat-list (table) and hierarchical (tree) master views
|
|
83
|
+
- Signal-based state management
|
|
84
|
+
- OnPush change detection
|
|
85
|
+
- Keyboard navigation support
|
|
86
|
+
- CSS custom-property theming (`--ui-*` tokens)
|
|
87
|
+
- Light & dark mode support
|