-
Notifications
You must be signed in to change notification settings - Fork 0
/
pure-html.html
106 lines (94 loc) · 2.27 KB
/
pure-html.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="en" class="sl-theme-dark">
<head>
<meta charset="utf-8" />
<title>Pure HTML with CDN import maps - JSFE demo</title>
<script type="importmap">
{
"imports": {
"lit": "https://ga.jspm.io/npm:lit@2.8.0/index.js",
"lit/": "https://ga.jspm.io/npm:lit@2.8.0/",
"lit-html": "https://ga.jspm.io/npm:lit-html@2.8.0/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@2.8.0/",
"lit-element/": "https://ga.jspm.io/npm:lit-element@3.3.3/",
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.3/reactive-element.js",
"@lit/reactive-element/": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.1/",
"@shoelace-style/shoelace/": "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/",
"lodash-es/set": "https://unpkg.com/lodash-es@4.17.21/set.js",
"@jsfe/core": "https://unpkg.com/@jsfe/core@0.0.5/dist/esm-min"
}
}
</script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.9.0/cdn/themes/dark.css"
/>
<style>
body {
display: flex;
justify-content: center;
}
json-schema-form {
margin: 2rem;
width: calc(50rem + 5vw);
}
</style>
</head>
<body>
<!-- Declarative setup -->
<json-schema-form
id="myForm"
schema='{
"title": "CDN demo",
"description": "Pretty neat, huh?",
"properties": {
"foo": {
"type": "string"
},
"bar": {
"type": "boolean"
}
}
}'
data='{
"foo": "Hello"
}'
ui-schema='{
"bar": {
"ui:widget": "switch"
}
}'
></json-schema-form>
<script type="module">
import '@jsfe/core';
console.log(myForm);
myForm.dataChangeCallback = (newData) => {
console.info(newData);
};
myForm.onFormSubmit = (newData, valid) => {
console.info({ newData, valid });
};
// Programmatic manipulations
setTimeout(() => {
myForm.schema = {
title: 'CDN demo - alternative',
description: 'Pretty neat, huh!?',
properties: {
baz: {
type: 'string',
},
buzz: {
type: 'boolean',
},
},
};
}, 1_500);
setTimeout(() => {
myForm.data = {
baz: 'Bonjour',
buzz: true,
};
}, 3_000);
</script>
</body>
</html>