Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0c21c19

Browse files
committed
Release v2.0.0
1 parent f2f298c commit 0c21c19

File tree

4 files changed

+93
-92
lines changed

4 files changed

+93
-92
lines changed

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ Generate validating forms from JSON schemas.
1212
- Generates all common types of input fields (`text`, `select`, etc.) with optional labels and descriptions.
1313
- Error messages can easily be customized as needed.
1414
- Supports custom string formats using validation functions (similar to Json decoders).
15+
- Comes with default Bootstrap and Tailwind CSS themes in the `Theme` object, that can also be customised.
1516

1617
## Warnings
1718

1819
1. The way form fields are generated and presented is very opinionated and thus not always suitable for general case usage. This library is intended to be used for cases where you have control over how the schema is structured.
19-
2. The HTML that the library outputs is intended to be used together with [Tailwind CSS](https://tailwindcss.com/) to style the form. It can of course be used without Tailwind but some field types might need some custom styling to look ok.
20-
3. There is currently no support for linked schemas using `$ref`.
20+
2. There is currently no support for linked schemas using `$ref`.
2121

2222
## Example usage
2323

@@ -32,6 +32,7 @@ import Html exposing (..)
3232
import Html.Events exposing (onSubmit)
3333
import Json.Schema
3434
import Json.Schema.Form exposing (Msg, State)
35+
import Json.Schema.Form.Theme as Theme
3536

3637

3738
main : Program () State Msg
@@ -61,6 +62,7 @@ init =
6162
Json.Schema.Form.init
6263
{ errors = \path error -> "Invalid field: " ++ path
6364
, formats = Dict.empty
65+
, theme = Theme.default
6466
}
6567
schema_
6668

‎elm.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "scrive/json-schema-form",
44
"summary": "Generate validating forms from JSON schemas.",
55
"license": "MIT",
6-
"version": "1.0.3",
6+
"version": "2.0.0",
77
"exposed-modules": [
88
"Json.Schema.Form",
99
"Json.Schema.Form.Encode",

‎example/Main.elm

Lines changed: 1 addition & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -26,100 +26,14 @@ main =
2626
Browser.sandbox { init = init, update = update, view = view }
2727

2828

29-
tailwind : Theme
30-
tailwind =
31-
let
32-
theme =
33-
Theme.default
34-
35-
isInvalid =
36-
"border-2 border-red-500"
37-
in
38-
{ theme
39-
| -- inputs
40-
txt =
41-
\{ withError, format } ->
42-
Attrs.classList
43-
[ ( "block w-full rounded-md py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6", True )
44-
, ( "border-0", not withError )
45-
, ( isInvalid, withError )
46-
, case format of
47-
Just str ->
48-
( "format-" ++ str, True )
49-
50-
Nothing ->
51-
( "", False )
52-
]
53-
54-
-- checkbox
55-
, checkboxWrapper = Attrs.class "flex h-6 items-center"
56-
, checkboxInput =
57-
\{ withError } ->
58-
Attrs.classList
59-
[ ( "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", True )
60-
, ( isInvalid, withError )
61-
]
62-
, checkboxTitle = Attrs.class "ml-3 text-sm leading-6"
63-
64-
-- select
65-
, select =
66-
\{ withError } ->
67-
Attrs.classList
68-
[ ( "block w-full mt-2 rounded-md py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6", True )
69-
, ( "border-0", not withError )
70-
, ( isInvalid, withError )
71-
]
72-
73-
-- list group
74-
, listGroup = Attrs.class "mb-2"
75-
, listGroupItem = Attrs.class "border border-gray-300 rounded-md px-4 py-2 mb-2 shadow-sm"
76-
, listGroupAddItemButton = Attrs.class "rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
77-
, listGroupRemoveItemButton = Attrs.class "rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
78-
79-
-- tuple
80-
, formRow = Attrs.class "flex space-x-4"
81-
, formRowItem = Attrs.class "max-w-full flex-grow"
82-
83-
-- radio
84-
, radioWrapper = Attrs.class "flex items-center gap-x-3"
85-
, radioInput = Attrs.class "h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
86-
, radioInputLabel = Attrs.class "block text-sm font-medium leading-6 text-gray-900"
87-
, field =
88-
\{ withError, withValue } ->
89-
Attrs.classList
90-
[ ( "mb-6", True )
91-
, ( "text-red-500", withError )
92-
, ( "has-value", withValue )
93-
]
94-
, fieldLabel = Attrs.class "block"
95-
, fieldInput = Attrs.class "field-input"
96-
, fieldInputMeta = Attrs.class "field-meta"
97-
, fieldTitle = Attrs.class "block text-sm font-medium leading-6 text-gray-900"
98-
, fieldDescription = Attrs.class "mt-2 text-sm leading-6 text-gray-600"
99-
, group =
100-
\{ withError, withValue } ->
101-
Attrs.classList
102-
[ ( "mb-4", True )
103-
, ( "text-red-500", withError )
104-
, ( "has-value", withValue )
105-
]
106-
, liveError = Attrs.class "text-red-500 text-xs my-2"
107-
, inputGroupPrepend = Attrs.class "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm"
108-
, inputGroupPrependContent = Attrs.class "text-gray-500 sm:text-sm"
109-
, inputGroupAppend = Attrs.class "inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm"
110-
, inputGroupAppendContent = Attrs.class "text-gray-500 sm:text-sm"
111-
, inputGroup = Attrs.class "mt-2 flex shadow-sm"
112-
}
113-
114-
11529
init : State
11630
init =
11731
case schema of
11832
Ok schema_ ->
11933
Json.Schema.Form.init
12034
{ errors = errorString
12135
, formats = Dict.fromList formats
122-
, theme = tailwind
36+
, theme = Theme.tailwind
12337
}
12438
schema_
12539

‎src/Json/Schema/Form/Theme.elm

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
module Json.Schema.Form.Theme exposing (Theme, default)
1+
module Json.Schema.Form.Theme exposing (Theme, default, tailwind)
22

33
{-| Theme allows you to set styling of generated Form elements
44
5-
@docs Theme, default
5+
@docs Theme, default, tailwind
66
77
-}
88

@@ -123,3 +123,88 @@ default =
123123
, inputGroupAppendContent = Attrs.class "input-group-text"
124124
, inputGroup = Attrs.class "input-group"
125125
}
126+
127+
128+
{-| Optional tailwindcss theme
129+
-}
130+
tailwind : Theme
131+
tailwind =
132+
let
133+
isInvalid =
134+
"border-2 border-red-500"
135+
in
136+
{ default
137+
| -- inputs
138+
txt =
139+
\{ withError, format } ->
140+
Attrs.classList
141+
[ ( "block w-full rounded-md py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6", True )
142+
, ( "border-0", not withError )
143+
, ( isInvalid, withError )
144+
, case format of
145+
Just str ->
146+
( "format-" ++ str, True )
147+
148+
Nothing ->
149+
( "", False )
150+
]
151+
152+
-- checkbox
153+
, checkboxWrapper = Attrs.class "flex h-6 items-center"
154+
, checkboxInput =
155+
\{ withError } ->
156+
Attrs.classList
157+
[ ( "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", True )
158+
, ( isInvalid, withError )
159+
]
160+
, checkboxTitle = Attrs.class "ml-3 text-sm leading-6"
161+
162+
-- select
163+
, select =
164+
\{ withError } ->
165+
Attrs.classList
166+
[ ( "block w-full mt-2 rounded-md py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6", True )
167+
, ( "border-0", not withError )
168+
, ( isInvalid, withError )
169+
]
170+
171+
-- list group
172+
, listGroup = Attrs.class "mb-2"
173+
, listGroupItem = Attrs.class "border border-gray-300 rounded-md px-4 py-2 mb-2 shadow-sm"
174+
, listGroupAddItemButton = Attrs.class "rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600"
175+
, listGroupRemoveItemButton = Attrs.class "rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
176+
177+
-- tuple
178+
, formRow = Attrs.class "flex space-x-4"
179+
, formRowItem = Attrs.class "max-w-full flex-grow"
180+
181+
-- radio
182+
, radioWrapper = Attrs.class "flex items-center gap-x-3"
183+
, radioInput = Attrs.class "h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
184+
, radioInputLabel = Attrs.class "block text-sm font-medium leading-6 text-gray-900"
185+
, field =
186+
\{ withError, withValue } ->
187+
Attrs.classList
188+
[ ( "mb-6", True )
189+
, ( "text-red-500", withError )
190+
, ( "has-value", withValue )
191+
]
192+
, fieldLabel = Attrs.class "block"
193+
, fieldInput = Attrs.class "field-input"
194+
, fieldInputMeta = Attrs.class "field-meta"
195+
, fieldTitle = Attrs.class "block text-sm font-medium leading-6 text-gray-900"
196+
, fieldDescription = Attrs.class "mt-2 text-sm leading-6 text-gray-600"
197+
, group =
198+
\{ withError, withValue } ->
199+
Attrs.classList
200+
[ ( "mb-4", True )
201+
, ( "text-red-500", withError )
202+
, ( "has-value", withValue )
203+
]
204+
, liveError = Attrs.class "text-red-500 text-xs my-2"
205+
, inputGroupPrepend = Attrs.class "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm"
206+
, inputGroupPrependContent = Attrs.class "text-gray-500 sm:text-sm"
207+
, inputGroupAppend = Attrs.class "inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm"
208+
, inputGroupAppendContent = Attrs.class "text-gray-500 sm:text-sm"
209+
, inputGroup = Attrs.class "mt-2 flex shadow-sm"
210+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /