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 34cebb6

Browse files
committed
Collapse sections
1 parent 213461f commit 34cebb6

File tree

8 files changed

+128
-46
lines changed

8 files changed

+128
-46
lines changed

‎elm.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,5 @@
2727
"test-dependencies": {
2828
"direct": {},
2929
"indirect": {}
30-
},
31-
"homepage": "https://json-tools.github.io/json-form/"
30+
}
3231
}

‎src/Demo.elm

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ update message model =
106106
{ name = "form" ++ String.fromInt index
107107
, dense = True
108108
, textFieldStyle = Outlined
109+
, collapseNestedObjects = False
109110
}
110111
in
111112
Json.Form.init config example.schema Nothing

‎src/Json/Form.elm

Lines changed: 74 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module Json.Form exposing
55
, init
66
, update
77
, updateConfig
8+
, updateSchema
89
, view
910
)
1011

@@ -75,37 +76,45 @@ viewNode model schema isRequired isDisabled path =
7576

7677
editingMode : Model -> Schema -> EditingMode
7778
editingMode model schema =
78-
case schema of
79-
ObjectSchema os ->
80-
case os.type_ of
81-
SingleType NumberType ->
82-
NumberField
79+
let
80+
uiSpec =
81+
schema |> getUiSpec
82+
in
83+
if uiSpec.editAsJson then
84+
JsonEditor
8385

84-
SingleType IntegerType ->
85-
NumberField
86+
else
87+
case schema of
88+
ObjectSchema os ->
89+
case os.type_ of
90+
SingleType NumberType ->
91+
NumberField
8692

87-
SingleType StringType ->
88-
TextField
93+
SingleType IntegerType ->
94+
NumberField
8995

90-
SingleType BooleanType ->
91-
getBooleanUiWidget schema
96+
SingleType StringType ->
97+
TextField
9298

93-
SingleType ObjectType ->
94-
case os.properties of
95-
Just schemata ->
96-
Object schemata
99+
SingleType BooleanType ->
100+
getBooleanUiWidget schema
97101

98-
Nothing ->
99-
JsonEditor
102+
SingleType ObjectType ->
103+
case os.properties of
104+
Just schemata ->
105+
Object schemata
100106

101-
SingleTypeArrayType ->
102-
Array
107+
Nothing ->
108+
JsonEditor
103109

104-
_ ->
105-
JsonEditor
110+
SingleTypeArrayType ->
111+
Array
106112

107-
_ ->
108-
JsonEditor
113+
_ ->
114+
JsonEditor
115+
116+
_ ->
117+
JsonEditor
109118

110119

111120
getBooleanUiWidget : Schema -> EditingMode
@@ -190,6 +199,9 @@ viewArray model schema isRequired isDisabled path =
190199
viewObject : Model -> Schema -> Schemata -> Bool -> Bool -> Path -> Html Msg
191200
viewObject model schema properties isRequired isDisabled path =
192201
let
202+
key =
203+
path |> List.reverse |> List.head
204+
193205
iterateOverSchemata (Schemata schemata) =
194206
schemata
195207
|> List.map
@@ -208,9 +220,14 @@ viewObject model schema properties isRequired isDisabled path =
208220
|> applyRule model.value path
209221

210222
isExpandable =
211-
schema
212-
|> getUiSpec
213-
|> .expandable
223+
(model.config.collapseNestedObjects
224+
|| (schema
225+
|> getUiSpec
226+
|> .expandable
227+
)
228+
)
229+
&& path
230+
/= []
214231

215232
isExpanded =
216233
model.expandedNodes |> Set.member path
@@ -224,7 +241,12 @@ viewObject model schema properties isRequired isDisabled path =
224241
[]
225242

226243
title =
227-
schema |> getTitle isRequired
244+
case schema |> getTitle isRequired of
245+
"" ->
246+
key |> Maybe.withDefault ""
247+
248+
x ->
249+
x
228250
in
229251
if hidden then
230252
text ""
@@ -256,6 +278,7 @@ viewObject model schema properties isRequired isDisabled path =
256278
|> div
257279
[ classList
258280
[ ( "jf-section--expandable", isExpandable )
281+
, ( "jf-section", True )
259282
]
260283
]
261284

@@ -269,6 +292,11 @@ updateConfig config model =
269292
{ model | config = config }
270293

271294

295+
updateSchema : Schema -> Model -> Model
296+
updateSchema schema model =
297+
{ model | schema = schema }
298+
299+
272300
update : Msg -> Model -> ( ( Model, Cmd Msg ), ExternalMsg )
273301
update msg model =
274302
case msg of
@@ -300,17 +328,33 @@ update msg model =
300328
editValue updatedModel newPropPath JsonValue.NullValue
301329

302330
DeleteProperty path ->
303-
({ model
304-
| value =
331+
let
332+
updatedJsonValue =
305333
if path == [] then
306334
Nothing
307335

308336
else
309337
model.value |> Maybe.andThen (JsonValue.deleteIn path >> Result.toMaybe)
338+
339+
validationResult =
340+
model.schema
341+
|> Json.Schema.validateValue { applyDefaults = True } (JsonValue.encode <| Maybe.withDefault JsonValue.NullValue updatedJsonValue)
342+
343+
errors =
344+
case validationResult of
345+
Ok _ ->
346+
Dict.empty
347+
348+
Err e ->
349+
dictFromListErrors e
350+
in
351+
( { model
352+
| value =
353+
updatedJsonValue
310354
}
311355
, Cmd.none
312356
)
313-
|> withExMsg None
357+
|> withExMsg (UpdateValue updatedJsonValue errors)
314358

315359
FocusInput focused ->
316360
( { model

‎src/Json/Form/Config.elm

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ type alias Config =
77
{ textFieldStyle : TextFieldStyle
88
, dense : Bool
99
, name : String
10+
, collapseNestedObjects : Bool
1011
}
1112

1213

@@ -20,13 +21,14 @@ defaultConfig =
2021
{ textFieldStyle = Outlined
2122
, dense = True
2223
, name = ""
24+
, collapseNestedObjects = False
2325
}
2426

2527

2628
decoder : Decoder Config
2729
decoder =
28-
Decode.map3 Config
29-
(field "textFieldStyle" <|
30+
Decode.map4 Config
31+
((field "textFieldStyle" <|
3032
Decode.andThen
3133
(\x ->
3234
if x == "filled" then
@@ -40,6 +42,10 @@ decoder =
4042
)
4143
<|
4244
string
45+
)
46+
|> maybe
47+
|> Decode.map (Maybe.withDefault Outlined)
4348
)
44-
(field "dense" bool |> maybe |> Decode.map (Maybe.withDefault False))
49+
(field "dense" bool |> maybe |> Decode.map (Maybe.withDefault True))
4550
(field "name" string |> maybe |> Decode.map (Maybe.withDefault ""))
51+
(field "collapseNestedObjects" bool |> maybe |> Decode.map (Maybe.withDefault False))

‎src/Json/Form/TextField.elm

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,17 @@ view model schema isJson isRequired isDisabled path =
2222
id =
2323
(model.config.name ++ "_") ++ (path |> String.join "_")
2424

25-
enum =
25+
(enum, examples ) =
2626
case schema of
2727
ObjectSchema os ->
28-
os.enum
28+
(os.enum
2929
|> Maybe.map (List.map (\v -> v |> Decode.decodeValue Decode.string |> Result.withDefault ""))
30+
, os.examples
31+
|> Maybe.map (List.map (\v -> v |> Decode.decodeValue Decode.string |> Result.withDefault ""))
32+
)
3033

3134
_ ->
32-
Nothing
35+
(Nothing,Nothing)
3336

3437
isFocused =
3538
model.focused
@@ -108,7 +111,7 @@ view model schema isJson isRequired isDisabled path =
108111
, Html.Attributes.autocomplete False
109112
, Html.Attributes.disabled actuallyDisabled
110113
]
111-
++ (if enum /= Nothing then
114+
++ (if enum /= Nothing || examples /=Nothingthen
112115
[ Html.Attributes.list <| id ++ "_enum" ]
113116

114117
else
@@ -218,7 +221,14 @@ view model schema isJson isRequired isDisabled path =
218221
|> Html.datalist [ Html.Attributes.id <| id ++ "_enum" ]
219222

220223
Nothing ->
221-
text ""
224+
case examples of
225+
Just listStrings ->
226+
listStrings
227+
|> List.map (\s -> Html.option [ Html.Attributes.value s ] [])
228+
|> Html.datalist [ Html.Attributes.id <| id ++ "_enum" ]
229+
230+
Nothing ->
231+
text ""
222232
]
223233

224234

@@ -295,7 +305,7 @@ viewNumeric model schema isRequired isDisabled path =
295305
, ( "jf-textfield--focused", isFocused )
296306
, ( "jf-textfield--empty", editedValue == "" )
297307
, ( "jf-textfield--invalid", hasError )
298-
, ( "jf-textfield--has-icon", icon /=Nothing )
308+
, ( "jf-textfield--has-icon", True )
299309
, ( "jf-textfield--disabled", actuallyDisabled )
300310
, ( "jf-textfield--hidden", hidden )
301311
]

‎src/Json/Form/UiSpec.elm

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ type alias UiSpec =
1111
{ widget : Maybe Widget
1212
, rule : Maybe Rule
1313
, expandable : Bool
14+
, editAsJson : Bool
1415
}
1516

1617

@@ -44,12 +45,13 @@ blank =
4445
{ widget = Nothing
4546
, rule = Nothing
4647
, expandable = False
48+
, editAsJson = False
4749
}
4850

4951

5052
decoder : Decoder UiSpec
5153
decoder =
52-
Decode.map3 UiSpec
54+
Decode.map4 UiSpec
5355
(field "widget" widgetDecoder |> maybe)
5456
(field "rule" ruleDecoder |> maybe)
5557
(field "expandable" bool
@@ -64,6 +66,18 @@ decoder =
6466
False
6567
)
6668
)
69+
(field "editAsJson" bool
70+
|> maybe
71+
|> Decode.map
72+
(\x ->
73+
case x of
74+
Just bool ->
75+
bool
76+
77+
Nothing ->
78+
False
79+
)
80+
)
6781

6882

6983
widgetDecoder : Decoder Widget

‎stylesheets/json-form-element.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.jf-element {
22
display: inline-flex;
33
flex-direction: column;
4-
margin-bottom: 16px;
4+
margin-top: 16px;
55
margin-right: 16px;
66
max-width: 300px;
77
}
@@ -15,6 +15,7 @@
1515
padding-left: 12px;
1616
color: rgba(0, 0, 0, 0.54);
1717
box-sizing: border-box;
18+
font-size: 12px;
1819
}
1920

2021
.jf-element--invalid .jf-helper-text {

‎stylesheets/json-form.css

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313

1414
.jf-nested-object {
15-
padding: var(--nested-object-padding);
15+
/* padding: var(--nested-object-padding); */
1616
}
1717

1818
.jf-json-form {
@@ -23,12 +23,15 @@
2323

2424
.jf-heading {
2525
font-size: 16px;
26-
padding: 10px 0;
26+
padding: 0;
27+
padding-top: 20px;
28+
padding-bottom: 10px;
2729
}
2830

2931
.jf-heading--expandable {
3032
cursor: pointer;
3133
font-size: 19px;
34+
margin-left: -20px;
3235
}
3336

3437
.jf-heading--expandable:before {
@@ -44,5 +47,9 @@
4447
}
4548

4649
.jf-section--expandable {
47-
padding: var(--expandable-section-padding);
50+
/* padding: var(--expandable-section-padding); */
51+
}
52+
53+
.jf-section {
54+
padding-left: 20px;
4855
}

0 commit comments

Comments
(0)

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