forked from educorvi/vue-json-form
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebcomponent_example.html
19 lines (17 loc) · 3.78 KB
/
webcomponent_example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/@educorvi/vue-json-form/dist/webcomponent/dist.css">
</head>
<body>
<vue-json-form
use_x_www_form_urlencoded="false"
post_url='https://hookb.in/ggD1jrmDJPuG7Voo798d'
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":"../../schemas/ui/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":"HTML","htmlData":"<div class=\"text-center\"><p>It is also possible to add HTML-Code. This Way you can even embed a video in your form:</p><iframe width=\"315\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/CDrWcFGlyKg?start=36\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe></div>"},{"type":"Control","scope":"#/properties/tags","options":{"tags":{"enabled":true,"variant":"primary"}}}]}'
></vue-json-form>
<script src="https://unpkg.com/@educorvi/vue-json-form/dist/webcomponent/dist.umd.min.js"></script>
</body>
</html>