@theredhead/lucid-forms 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,113 @@
|
|
|
1
|
+
# @theredhead/lucid-forms
|
|
2
|
+
|
|
3
|
+
Schema-driven, signal-based Angular form engine with validation, conditional
|
|
4
|
+
logic, and a visual form designer. Part of the **LucidKit** UI library family.
|
|
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
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @theredhead/lucid-forms @theredhead/lucid-kit @theredhead/lucid-foundation
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Overview
|
|
21
|
+
|
|
22
|
+
`@theredhead/lucid-forms` lets you define forms as plain JSON/TypeScript objects
|
|
23
|
+
and renders them using `@theredhead/lucid-kit` components. No template boilerplate,
|
|
24
|
+
no `FormGroup` wiring — just a schema and a binding.
|
|
25
|
+
|
|
26
|
+
### Key features
|
|
27
|
+
|
|
28
|
+
- **Schema-driven** — describe fields, groups, validation, and defaults in a `FormSchema` object
|
|
29
|
+
- **Dynamic field rendering** — maps field types (`text`, `select`, `checkbox`, `date`, …) to
|
|
30
|
+
the correct `@theredhead/lucid-kit` component automatically
|
|
31
|
+
- **Conditional logic** — show/hide or enable/disable fields based on other field values
|
|
32
|
+
- **Validation** — `required`, `minLength`, `maxLength`, `min`, `max`, `pattern`, `email` rules
|
|
33
|
+
with per-field error messages
|
|
34
|
+
- **Form designer** — drag-and-drop `UIFormDesigner` component for building schemas visually at runtime
|
|
35
|
+
- **Signal-based** — fully zoneless, all state communicated via Angular signals
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Quick start
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
import { Component } from '@angular/core';
|
|
43
|
+
import { UIFormView } from '@theredhead/lucid-forms';
|
|
44
|
+
import { provideBuiltInFields } from '@theredhead/lucid-forms';
|
|
45
|
+
import type { FormSchema, FormValues } from '@theredhead/lucid-forms';
|
|
46
|
+
|
|
47
|
+
@Component({
|
|
48
|
+
selector: 'app-example',
|
|
49
|
+
standalone: true,
|
|
50
|
+
imports: [UIFormView],
|
|
51
|
+
providers: [provideBuiltInFields()],
|
|
52
|
+
template: `
|
|
53
|
+
<ui-form-view
|
|
54
|
+
[schema]="schema"
|
|
55
|
+
[(values)]="values"
|
|
56
|
+
/>
|
|
57
|
+
`,
|
|
58
|
+
})
|
|
59
|
+
export class ExampleComponent {
|
|
60
|
+
schema: FormSchema = {
|
|
61
|
+
groups: [
|
|
62
|
+
{
|
|
63
|
+
label: 'Personal details',
|
|
64
|
+
fields: [
|
|
65
|
+
{ key: 'name', label: 'Full name', type: 'text', validation: [{ type: 'required' }] },
|
|
66
|
+
{ key: 'email', label: 'Email', type: 'text', validation: [{ type: 'email' }] },
|
|
67
|
+
{ key: 'role', label: 'Role', type: 'select',
|
|
68
|
+
options: [
|
|
69
|
+
{ value: 'admin', label: 'Admin' },
|
|
70
|
+
{ value: 'user', label: 'User' },
|
|
71
|
+
]
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
values: FormValues = {};
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Built-in field types
|
|
85
|
+
|
|
86
|
+
| Key | Component rendered | Notes |
|
|
87
|
+
|----------------|---------------------------|-----------------------------------|
|
|
88
|
+
| `text` | `UIInput` | Plain text, email, number, etc. |
|
|
89
|
+
| `select` | `UIDropdownList` | Requires `options` on the field |
|
|
90
|
+
| `checkbox` | `UICheckbox` | |
|
|
91
|
+
| `toggle` | `UIToggle` | |
|
|
92
|
+
| `radio` | `UIRadioGroup` | Requires `options` on the field |
|
|
93
|
+
| `autocomplete` | `UIAutocomplete` | |
|
|
94
|
+
| `date` | `UIInput` + date adapter | |
|
|
95
|
+
| `time` | `UIInput` + time adapter | |
|
|
96
|
+
| `datetime` | `UIInput` + date adapter | |
|
|
97
|
+
| `color` | `UIColorPicker` | |
|
|
98
|
+
| `slider` | `UISlider` | |
|
|
99
|
+
| `richtext` | `UIRichTextEditor` | |
|
|
100
|
+
| `file` | `UIFileUpload` | |
|
|
101
|
+
|
|
102
|
+
Custom field types can be registered via `provideFormFields()`.
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## Peer dependencies
|
|
107
|
+
|
|
108
|
+
| Package | Version |
|
|
109
|
+
|----------------------------------|-----------|
|
|
110
|
+
| `@angular/core` | `^21.0.0` |
|
|
111
|
+
| `@angular/common` | `^21.0.0` |
|
|
112
|
+
| `@theredhead/lucid-foundation` | `^0.0.1` |
|
|
113
|
+
| `@theredhead/lucid-kit` | `^0.0.1` |
|