-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwebcomponent_example.html
17 lines (15 loc) · 3.82 KB
/
webcomponent_example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/@educorvi/vue-json-form@^2/dist/webcomponent/dist.css">
</head>
<body>
<vue-json-form
json='{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"name":{"type":"string","minLength":1},"title":{"type":"string","enum":["Mrs.","Mr.","Miss","Ms.","Dr."]},"description":{"type":"string","default":"This good text was set as default"},"done":{"type":"boolean","title":"Great Switch","description":"Please press"},"fileupload":{"type":"string","format":"uri"},"group_selector":{"title":"Groups or Object?","type":"string","enum":["Groups","Object"],"default":"Groups"},"due_date":{"type":"string","format":"date-time"},"rating":{"title":"Rating","description":"Please rate us","type":"integer","maximum":5},"weekday":{"type":"array","enum":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]},"recurrence_interval":{"title":"Week Interval","type":"integer"},"testArray":{"type":"array","items":{"type":"string"}},"testObject":{"type":"object","title":"Pet","properties":{"petName":{"type":"string","description":"Give me a name"},"age":{"type":"integer","minimum":0,"maximum":100},"flauschig":{"type":"boolean"}},"required":["petName","age"]},"fancyness":{"type":"string","enum":["fancy","fancier","fanciest","unicorn"]},"tags":{"title":"Tag this form","type":"array"}},"required":["done","name","fancyness"]}'
ui='{"$schema":"https://educorvi.github.io/vue_json_form/schemas/ui.schema.json","type":"VerticalLayout","elements":[{"type":"Control","scope":"#/properties/done","options":{"switch":true}},{"type":"Control","scope":"#/properties/title"},{"type":"Control","scope":"#/properties/name","options":{"placeholder":"Full Name","autocomplete":"name"}},{"type":"Control","scope":"#/properties/fancyness","options":{"radiobuttons":true,"stacked":true}},{"type":"Control","scope":"#/properties/fileupload","options":{"acceptedFileType":"*"}},{"type":"Control","scope":"#/properties/group_selector","options":{"buttons":"outline-primary","label":false}},{"type":"Group","label":"Group 1","showOn":{"type":"EQUALS","scope":"#/properties/group_selector","referenceValue":"Groups"},"elements":[{"type":"HorizontalLayout","label":"Great Gruppe","elements":[{"type":"Control","scope":"#/properties/due_date"},{"type":"Control","scope":"#/properties/rating","options":{"rating":true}}]},{"type":"Control","scope":"#/properties/description","options":{"multi":true,"placeholder":"Enter a nice description"}}]},{"type":"Group","label":"Group 2","showOn":{"type":"EQUALS","scope":"#/properties/group_selector","referenceValue":"Groups"},"elements":[{"type":"HorizontalLayout","elements":[{"type":"Control","scope":"#/properties/weekday","options":{}},{"type":"Control","scope":"#/properties/recurrence_interval","options":{"textAlign":"right"}}]},{"type":"Control","scope":"#/properties/testArray"}]},{"type":"Control","scope":"#/properties/testObject","showOn":{"type":"EQUALS","scope":"#/properties/group_selector","referenceValue":"Object"}},{"type":"Divider"},{"type":"Control","scope":"#/properties/tags","options":{"tags":{"enabled":true,"variant":"primary"}}},{"type":"Buttongroup","buttons":[{"type":"Button","buttonType":"submit","nativeSubmitSettings":{"formaction":"http://localhost:6969/post1","formmethod":"post","formenctype":"multipart/form-data"},"text":"submit form-data"},{"type":"Button","buttonType":"submit","nativeSubmitSettings":{"formaction":"http://localhost:6969/post1","formmethod":"post","formenctype":"application/x-www-form-urlencoded"},"text":"submit x-www-form-urlencoded"},{"type":"Button","buttonType":"reset","text":"Formular zurücksetzen"}]}]}'
></vue-json-form>
<script src="https://unpkg.com/@educorvi/vue-json-form@^2/dist/webcomponent/dist.umd.min.js"></script>
</body>
</html>