You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
schema='{"type":"string","title":"Hello","description":"A brief but helpful description of value","maxLength":5}'
27
-
value='"world"'
28
-
></json-form>
29
-
```
5
+
This module generates form based on JSON Schema, its keywords are documented in this spec: http://json-schema.org/latest/json-schema-validation.html. It focuses on simplicity rather than completeness of JSON Schema spec coverage. For example, we don't try to guess style of `oneOf`.
-[x] demo for two use-cases: text editing, flat object editing
39
16
-[x] editing of number and boolean
40
-
-[x] customizable widgets
17
+
-[x] customizable widgets (extending json schema with ui schema)
41
18
-[x] password field
42
19
-[x] mark required fields with *
43
20
-[x] basic array editing capabilities
44
21
-[x] rules to disable or hide form elements based on conditions
22
+
-[x] multiline editing
23
+
-[x] editing as json
24
+
-[x] dealing with `undefined` (erase optional property)
25
+
-[x] editing array of items
26
+
-[x] html5 autocomplete for enum
45
27
46
28
Next steps will be some of those (not necessarily in this order):
47
29
48
-
-[ ] multiline editing
49
-
-[ ] range widget for numbers
30
+
-[ ] expandable mode for large/nested forms
31
+
-[ ] form layout customisation
32
+
-[ ] custom widgets api (e.g. range)
50
33
-[ ] radiogroup widget for enum
51
34
-[ ] optional field indication (configurable alternative to required)
52
-
-[ ] dealing with `undefined` (erase property)
53
-
-[ ] editing as json
54
-
-[ ] form layout customisation
55
-
-[ ] editing array of items
56
35
-[ ] editing dictionary (object with additionalItems = true)
57
36
-[ ] display of object-level errors
58
-
-[ ] expandable mode for large/nested forms
59
37
60
-
## Setup for development
38
+
## Development
39
+
40
+
### Installation
41
+
42
+
This module uses `create-elm-app` in order to not clutter project with unrelated dependencies.
61
43
62
-
1. Install dependencies
63
44
```
64
-
yarn
45
+
npm install -g create-elm-app
65
46
```
66
-
2. Run local dev server to facilitate hot module reloading
47
+
48
+
### Local development server
49
+
50
+
You may want to run local dev server to facilitate hot module reloading.
51
+
67
52
```
68
-
yarn dev
53
+
elm-app start
69
54
```
70
55
71
-
## Project structure
56
+
### Build and deploy demo to github pages
57
+
58
+
```
59
+
elm-app build
60
+
gh-pages -d build
61
+
```
62
+
63
+
## Design approach
64
+
65
+
### JSON Schema
66
+
67
+
A few notes on how json schema interpeted by form generator.
68
+
69
+
#### Types
70
+
71
+
For the sake of simpliticy form generator uses a "type" keyword of JSON Schema in order to identify type of the field. When "type" keyword is an array or types or missing then value edited as json string. Boolean renders toggle, but can be customized to render a checkbox.
72
+
73
+
#### Title
74
+
75
+
Title rendered as label for terminal input fields (leaf nodes of the value), and as h3 headers for objects.
76
+
77
+
#### Required
72
78
73
-
All sources live in `./src`, package code that will be published to the elm package registry is in `./src/Json/Form.elm`.
79
+
Keyword `required` of object type used to identify whether to display * near the label. Optional text fields also have button to erase value displayed.
74
80
75
-
All [json-form-custom-element](https://www.webcomponents.org/element/json-form-custom-element) web-component related sources live in a different repo: https://github.com/1602/json-form-custom-element
76
81
77
-
Contributors welcome, submit an issue to open a discussion.
0 commit comments