@maro-tech/form 0.0.1
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 +40 -0
- package/fesm2022/maro-tech-form.mjs +3191 -0
- package/fesm2022/maro-tech-form.mjs.map +1 -0
- package/package.json +31 -0
- package/types/maro-tech-form.d.ts +909 -0
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# @maro-tech/form
|
|
2
|
+
|
|
3
|
+
Reusable Angular form controls and a schema-driven form engine for Maro Tech applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @maro-tech/form @maro-tech/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The package uses the application API through relative `/api` endpoints. The consuming application must provide Angular `HttpClient` and the Tailwind content path for both packages.
|
|
12
|
+
|
|
13
|
+
## Available exports
|
|
14
|
+
|
|
15
|
+
- Input controls: text, number, date, datetime, email, password, textarea, select, checkbox, color, slug, file, photo, barcode, and range.
|
|
16
|
+
- `UiDynamicFormComponent` for rendering a form from a field schema.
|
|
17
|
+
- `UiActionFormModalComponent` for loading, editing, and submitting a form through `/api/crud/form/...`.
|
|
18
|
+
- `UI_DYNAMIC_FORM_OPTIONS_SOURCE_RESOLVERS` for application-specific option providers.
|
|
19
|
+
|
|
20
|
+
## Basic usage
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { UiDynamicFormComponent, UiDynamicFormField } from '@maro-tech/form';
|
|
24
|
+
|
|
25
|
+
readonly fields: UiDynamicFormField[] = [
|
|
26
|
+
{ id: 'name', type: 'text', label: 'Name', required: true },
|
|
27
|
+
{ id: 'status', type: 'select', label: 'Status', options: [
|
|
28
|
+
{ label: 'Active', value: 'active' },
|
|
29
|
+
] },
|
|
30
|
+
];
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
The library posts and reads data through relative paths such as `/api/suggest/...` and `/api/crud/form/...`, so the frontend and backend can share the same origin and proxy configuration.
|
|
34
|
+
|
|
35
|
+
## Local checks
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm run build
|
|
39
|
+
npm run test:ci
|
|
40
|
+
```
|