-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathform.html
More file actions
143 lines (139 loc) · 49.6 KB
/
form.html
File metadata and controls
143 lines (139 loc) · 49.6 KB
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xpfw - Supercharge your JSON-Schema!</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon-precomposed" href="ios-favicon.png">
<link rel="android-touch-icon" href="ios-favicon.png">
<script src="./isoapp.js"></script>
</head>
<body>
<div id="root">
<div class="is-flex columnDirection"><nav class="navbar has-background-white-bis stickyNav" role="navigation"><div class="navbar-brand"><a class="navbar-item" href="/"><img src="9b9bb20da85afb21b0c1846aa3154c95.png" alt="xpfw"/></a><div class="navbar-burger"><span></span><span></span><span></span></div></div><div class="navbar-menu "><a class="navbar-item has-text-link" href="/index.html" target=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>Home</a><a class="navbar-item has-text-primary" href="/form.html" target=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M448 75.2v361.7c0 24.3-19 43.2-43.2 43.2H43.2C19.3 480 0 461.4 0 436.8V75.2C0 51.1 18.8 32 43.2 32h361.7c24 0 43.1 18.8 43.1 43.2zm-37.3 361.6V75.2c0-3-2.6-5.8-5.8-5.8h-9.3L285.3 144 224 94.1 162.8 144 52.5 69.3h-9.3c-3.2 0-5.8 2.8-5.8 5.8v361.7c0 3 2.6 5.8 5.8 5.8h361.7c3.2.1 5.8-2.7 5.8-5.8zM150.2 186v37H76.7v-37h73.5zm0 74.4v37.3H76.7v-37.3h73.5zm11.1-147.3l54-43.7H96.8l64.5 43.7zm210 72.9v37h-196v-37h196zm0 74.4v37.3h-196v-37.3h196zm-84.6-147.3l64.5-43.7H232.8l53.9 43.7zM371.3 335v37.3h-99.4V335h99.4z"></path></svg>Forms</a><a class="navbar-item has-text-link" href="/data.html" target=""><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path></svg>Data</a><a class="navbar-item has-text-link" href="/docs/" target="_blank"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>Documentation</a></div></nav><div class="hero is-light"><div class="hero-body"><div class="has-text-centered is-size-1"><span class="textIcon has-text-info-dark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M167.02 309.34c-40.12 2.58-76.53 17.86-97.19 72.3-2.35 6.21-8 9.98-14.59 9.98-11.11 0-45.46-27.67-55.25-34.35C0 439.62 37.93 512 128 512c75.86 0 128-43.77 128-120.19 0-3.11-.65-6.08-.97-9.13l-88.01-73.34zM457.89 0c-15.16 0-29.37 6.71-40.21 16.45C213.27 199.05 192 203.34 192 257.09c0 13.7 3.25 26.76 8.73 38.7l63.82 53.18c7.21 1.8 14.64 3.03 22.39 3.03 62.11 0 98.11-45.47 211.16-256.46 7.38-14.35 13.9-29.85 13.9-45.99C512 20.64 486 0 457.89 0z"></path></svg></span><span class="has-text-primary">Made to be customized</span></div><div class="marginTop"><div class="has-text-centered is-size-4 pullUpMargin"><a class="has-text-link" href="/docs/form/theming.html">Theming</a> is achieved through <a target="_blank" class="has-text-link" href="https://reactjs.org/docs/hooks-overview.html">react hooks</a> that provide all the data you need.</div><div class="is-flex centerJustify has-text-centered is-size-5 marginTop marginBottom"><a class="button">Decrease</a><span style="margin-right:1rem;margin-left:1rem">Value of <i>myGuidedNumber</i> is: <b></b></span><a class="button">Increase</a><a style="margin-left:1rem" class="button">Randomize</a></div><pre class="code-container" source="import { ComponentRegistry, IFieldProps, memo, useFieldWithValidation, getLabelFromProps } from "@xpfw/form"
import { observer } from "mobx-react"
import * as React from "react"
const GuidedNumbersField: React.FunctionComponent<IFieldProps> = observer((props) => {
const fieldProps = useFieldWithValidation(props.schema, props.mapTo, props.prefix)
const memoVals = [props.mapTo, props.prefix, JSON.stringify(props.schema)]
const randomize = memo(() => () => fieldProps.setValue(Math.round(Math.random() * 100)), memoVals)
React.useEffect(randomize, memoVals)
return (
<div className="is-flex centerJustify has-text-centered is-size-5 marginTop marginBottom">
<a className="button" onClick={() => {
fieldProps.setValue(fieldProps.value - 1)
}}>Decrease</a>
<span style={{marginRight: "1rem", marginLeft: "1rem"}}>Value of <i>{getLabelFromProps(props)}</i> is: <b>{fieldProps.value}</b></span>
<a className="button" onClick={() => {
fieldProps.setValue(fieldProps.value + 1)
}}>Increase</a><a style={{marginLeft: "1rem"}} className="button" onClick={randomize}>Randomize</a>
</div>
)
})
ComponentRegistry.registerComponent("number", GuidedNumbersField, "guided")
" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:scroll -moz-scrollbars-unscrollable;padding:0;background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em"><code class="language-ts" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto"><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> ComponentRegistry</span><span class="token" style="color:#5F6364">,</span><span> IFieldProps</span><span class="token" style="color:#5F6364">,</span><span> memo</span><span class="token" style="color:#5F6364">,</span><span> useFieldWithValidation</span><span class="token" style="color:#5F6364">,</span><span> getLabelFromProps </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"@xpfw/form"</span><span>
</span><span> </span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> observer </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"mobx-react"</span><span>
</span><span> </span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">*</span><span> </span><span class="token" style="color:#1990b8">as</span><span> React </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"react"</span><span>
</span>
<span> </span><span class="token" style="color:#1990b8">const</span><span> GuidedNumbersField</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> React</span><span class="token" style="color:#5F6364">.</span><span>FunctionComponent</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>IFieldProps</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#2f9c0a">observer</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">(</span><span>props</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> fieldProps </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#2f9c0a">useFieldWithValidation</span><span class="token" style="color:#5F6364">(</span><span>props</span><span class="token" style="color:#5F6364">.</span><span>schema</span><span class="token" style="color:#5F6364">,</span><span> props</span><span class="token" style="color:#5F6364">.</span><span>mapTo</span><span class="token" style="color:#5F6364">,</span><span> props</span><span class="token" style="color:#5F6364">.</span><span>prefix</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> memoVals </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#5F6364">[</span><span>props</span><span class="token" style="color:#5F6364">.</span><span>mapTo</span><span class="token" style="color:#5F6364">,</span><span> props</span><span class="token" style="color:#5F6364">.</span><span>prefix</span><span class="token" style="color:#5F6364">,</span><span> </span><span class="token" style="color:#c92c2c">JSON</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">stringify</span><span class="token" style="color:#5F6364">(</span><span>props</span><span class="token" style="color:#5F6364">.</span><span>schema</span><span class="token" style="color:#5F6364">)</span><span class="token" style="color:#5F6364">]</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> randomize </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#2f9c0a">memo</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> fieldProps</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">setValue</span><span class="token" style="color:#5F6364">(</span><span>Math</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">round</span><span class="token" style="color:#5F6364">(</span><span>Math</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">random</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">*</span><span> </span><span class="token" style="color:#c92c2c">100</span><span class="token" style="color:#5F6364">)</span><span class="token" style="color:#5F6364">)</span><span class="token" style="color:#5F6364">,</span><span> memoVals</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> React</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">useEffect</span><span class="token" style="color:#5F6364">(</span><span>randomize</span><span class="token" style="color:#5F6364">,</span><span> memoVals</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#1990b8">return</span><span> </span><span class="token" style="color:#5F6364">(</span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>div className</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#2f9c0a">"is-flex centerJustify has-text-centered is-size-5 marginTop marginBottom"</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>a className</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#2f9c0a">"button"</span><span> onClick</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> fieldProps</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">setValue</span><span class="token" style="color:#5F6364">(</span><span>fieldProps</span><span class="token" style="color:#5F6364">.</span><span>value </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">-</span><span> </span><span class="token" style="color:#c92c2c">1</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>Decrease</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>a</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>span style</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#5F6364">{</span><span>marginRight</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"1rem"</span><span class="token" style="color:#5F6364">,</span><span> marginLeft</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"1rem"</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>Value </span><span class="token" style="color:#1990b8">of</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>i</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#2f9c0a">getLabelFromProps</span><span class="token" style="color:#5F6364">(</span><span>props</span><span class="token" style="color:#5F6364">)</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>i</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span> </span><span class="token" style="color:#1990b8">is</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>b</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span class="token" style="color:#5F6364">{</span><span>fieldProps</span><span class="token" style="color:#5F6364">.</span><span>value</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>b</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>span</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>a className</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#2f9c0a">"button"</span><span> onClick</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> fieldProps</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">setValue</span><span class="token" style="color:#5F6364">(</span><span>fieldProps</span><span class="token" style="color:#5F6364">.</span><span>value </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">+</span><span> </span><span class="token" style="color:#c92c2c">1</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>Increase</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>a</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>a style</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#5F6364">{</span><span>marginLeft</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"1rem"</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">}</span><span> className</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#2f9c0a">"button"</span><span> onClick</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span>randomize</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>Randomize</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>a</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>div</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">)</span><span>
</span>
<span> ComponentRegistry</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">registerComponent</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#2f9c0a">"number"</span><span class="token" style="color:#5F6364">,</span><span> GuidedNumbersField</span><span class="token" style="color:#5F6364">,</span><span> </span><span class="token" style="color:#2f9c0a">"guided"</span><span class="token" style="color:#5F6364">)</span><span>
</span>
<!-- -->
</code></pre></div></div></div><div><div class="hero is-light"><div class="hero-body"><div class="has-text-centered is-size-1"><span class="textIcon has-text-info-dark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"></path></svg></span><span class="has-text-primary">Concise form rendering with validation</span></div><div class="marginTop"><div class="has-text-centered is-size-4 pullUpMargin">Fields <a class="has-text-link" href="/docs/form/theming.html">can easily be themed</a> on a per <a class="has-text-link" href="/docs/core/definitions.html">type</a> basis. <a class="has-text-link" href="/docs/testing.html">Includable jest tests</a> will help ease your mind.</div><div class="columns marginTopBig"><div class="column undefined"><div class="is-flex columnDirection centerJustify has-text-centered"><div class="highlightOnHover is-flex columnDirection centerJustify"><span class="is-size-1 has-text-info-dark"><span></span></span><span class="is-size-3 has-text-info">Web</span><div>Uses <a target="_blank" class="tag is-rounded is-white has-text-link is-size-6" href="https://github.com/xpfw/xpfw/tree/master/packages/form-bulma">@xpfw/form-bulma</a><pre class="code-container" source="import { iterateSubFields, SharedField } from "@xpfw/form"
import * as React from "react"
const WebForm: React.FunctionComponent<any> = () => {
const fields: any[] = []
iterateSubFields({
title: "yourjsonschema",
properties: {name: {type: "string", title: "myName"}}
}, (key, subSchema) => {
fields.push(<SharedField key={key} schema={subSchema} />)
})
return (
<div>
{fields}
</div>
)
}
" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:scroll -moz-scrollbars-unscrollable;padding:0;background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em"><code class="language-ts" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto"><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> iterateSubFields</span><span class="token" style="color:#5F6364">,</span><span> SharedField </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"@xpfw/form"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">*</span><span> </span><span class="token" style="color:#1990b8">as</span><span> React </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"react"</span><span>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> WebForm</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> React</span><span class="token" style="color:#5F6364">.</span><span>FunctionComponent</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#2f9c0a">any</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> fields</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">any</span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#5F6364">]</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#5F6364">]</span><span>
</span><span> </span><span class="token" style="color:#2f9c0a">iterateSubFields</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">{</span><span>
</span><span> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"yourjsonschema"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> properties</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#5F6364">{</span><span>name</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#5F6364">{</span><span class="token" style="color:#1990b8">type</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"string"</span><span class="token" style="color:#5F6364">,</span><span> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"myName"</span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">}</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">,</span><span> </span><span class="token" style="color:#5F6364">(</span><span>key</span><span class="token" style="color:#5F6364">,</span><span> subSchema</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> fields</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">push</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>SharedField key</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span>key</span><span class="token" style="color:#5F6364">}</span><span> schema</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span>subSchema</span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#1990b8">return</span><span> </span><span class="token" style="color:#5F6364">(</span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>div</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">{</span><span>fields</span><span class="token" style="color:#5F6364">}</span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>div</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">)</span><span>
</span><span></span><span class="token" style="color:#5F6364">}</span><span>
</span>
</code></pre><div><div class="field"><label class="label">name</label><input type="text" class="input"/></div><div class="field"><label class="label">createdBy</label><input type="text" class="input"/></div></div></div><div class="tohoverover"></div></div></div></div><div class="column undefined"><div class="is-flex columnDirection centerJustify has-text-centered"><div class="highlightOnHover is-flex columnDirection centerJustify"><span class="is-size-1 has-text-info-dark"><span></span></span><span class="is-size-3 has-text-info">Native</span><div>Uses <a target="_blank" class="tag is-rounded is-white has-text-link is-size-6" href="https://github.com/xpfw/xpfw/tree/master/packages/form-native">@xpfw/form-native</a><pre class="code-container" source="import { IForm, getFieldsFromForm } from "@xpfw/validate"
import { SharedField } from "@xpfw/form-shared"
import { registerComponents } from "@xpfw/form-native"
import { View } from "react-native"
import { Link } from 'react-static';
// Making sure that @xpfw/form-shared can find components
registerComponents()
class FormRendererNative extends React.Component<{
form: IForm
}, any> {
public render() {
const fieldDefs = getFieldsFromForm(this.props.form)
const fields = fieldDefs.map((field: IField) => {
return <SharedField key={field.mapTo} field={field} />
})
return (
<View>
{fields}
</View>
)
}
}" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:scroll -moz-scrollbars-unscrollable;padding:0;background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em"><code class="language-ts" style="color:black;background:none;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto"><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> IForm</span><span class="token" style="color:#5F6364">,</span><span> getFieldsFromForm </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"@xpfw/validate"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> SharedField </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"@xpfw/form-shared"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> registerComponents </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"@xpfw/form-native"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> View </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">"react-native"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> Link </span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#1990b8">from</span><span> </span><span class="token" style="color:#2f9c0a">'react-static'</span><span class="token" style="color:#5F6364">;</span><span>
</span><span></span><span class="token" style="color:#7D8B99">// Making sure that @xpfw/form-shared can find components</span><span>
</span><span></span><span class="token" style="color:#2f9c0a">registerComponents</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span>
</span><span></span><span class="token" style="color:#1990b8">class</span><span> </span><span class="token" style="color:#1990b8">FormRendererNative</span><span> </span><span class="token" style="color:#1990b8">extends</span><span> </span><span class="token" style="color:#1990b8">React</span><span class="token" style="color:#5F6364">.</span><span>Component</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#5F6364">{</span><span>
</span><span>form</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> IForm
</span><span></span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">,</span><span> </span><span class="token" style="color:#2f9c0a">any</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> </span><span class="token" style="color:#1990b8">public</span><span> </span><span class="token" style="color:#2f9c0a">render</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> fieldDefs </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> </span><span class="token" style="color:#2f9c0a">getFieldsFromForm</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#1990b8">this</span><span class="token" style="color:#5F6364">.</span><span>props</span><span class="token" style="color:#5F6364">.</span><span>form</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#1990b8">const</span><span> fields </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span> fieldDefs</span><span class="token" style="color:#5F6364">.</span><span class="token" style="color:#2f9c0a">map</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#5F6364">(</span><span>field</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> IField</span><span class="token" style="color:#5F6364">)</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=></span><span> </span><span class="token" style="color:#5F6364">{</span><span>
</span><span> </span><span class="token" style="color:#1990b8">return</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>SharedField key</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span>field</span><span class="token" style="color:#5F6364">.</span><span>mapTo</span><span class="token" style="color:#5F6364">}</span><span> field</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">=</span><span class="token" style="color:#5F6364">{</span><span>field</span><span class="token" style="color:#5F6364">}</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#1990b8">return</span><span> </span><span class="token" style="color:#5F6364">(</span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span>View</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">{</span><span>fields</span><span class="token" style="color:#5F6364">}</span><span>
</span><span> </span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)"><</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">/</span><span>View</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">></span><span>
</span><span> </span><span class="token" style="color:#5F6364">)</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span>
</span><span></span><span class="token" style="color:#5F6364">}</span></code></pre><img src="3fbd99d74fa46685685971b3ce0cd5cc.png" alt="Screenshot of @xpfw/form-native"/></div><div class="tohoverover"></div></div></div></div></div></div></div></div></div><div class="hero is-light"><div class="hero-body"><div class="has-text-centered is-size-1"><span class="textIcon has-text-info-dark"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z"></path></svg></span><span class="has-text-primary">Need more automation?</span></div><div class="marginTop"><div class="has-text-centered is-size-4 pullUpMargin">Check out<a class="tag is-rounded is-white has-text-link is-size-6" href="/data.html">@xpfw/data</a>. It comes with backend independent CRUD UI's.</div></div></div></div><div class="is-flex"></div><footer class="footer" style="padding:1rem"><div class="container"><div class="content has-text-centered"><p><strong>xpfw </strong><span>made with<span class="icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="textIcon has-text-danger" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg></span> by<a href="https://github.com/hizoul" target="_blank"><span class="icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span>hizoul</a>.</span><a href="https://github.com/xpfw/xpfw/" target="_blank"><span class="icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path></svg></span><span>Source code</span></a> is distributed under the<a href="https://opensource.org/licenses/mit-license.php" target="_blank"><span class="icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="textIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg></span> MIT</a> License.<br/><a href="/licenses.html">Open source licenses</a></p></div></div></footer></div></div>
</body>
</html>