-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdata.html
127 lines (121 loc) · 43.2 KB
/
data.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!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-link" 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-primary" 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 640 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg></span><span class="has-text-primary">Relationships with fields</span></div><div class="marginTop"><div class="has-text-centered is-size-5 pullUpMargin">Below is an example of using <a target="_blank" class="tag is-rounded is-white has-text-link is-size-6" href="https://github.com/xpfw/xpfw/tree/master/packages/data-bulma">@xpfw/data-bulma</a> with a relational model. At the bottom are Tag Collections which have a ManyToMany relationship to the Tags right below.</div><div style="margin-top:3.8rem"><div class="columns undefined"><div class="column is-one-quarter"><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"><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="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg></span><span class="is-size-3 has-text-info">Add Tag</span><div>Create a tag that will be addable to a Tag Collection.<div><div class="field"><label class="label">tagName</label><input type="text" class="input"/></div><div class="field"><label class="label">description</label><input type="text" class="input"/></div><a class="button is-primary">Create</a></div></div><div class="tohoverover"></div></div></div></div><div class="column is-half"><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"><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="M464 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM128 120c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm288-136v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12z"></path></svg></span><span class="is-size-3 has-text-info">See Tags</span><div><div class="is-flex centerJustify smallMarginBottom">Check which Tags can be searched for in the Tag Collection Relationship Field.<a class="button"><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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>Reset Data</a></div><div><table class="table is-striped is-hoverable is-fullwidth"><thead><tr><th>ID</th><th>tagName</th><th>description</th><th></th></tr></thead><tbody></tbody></table><nav class="pagination is-centered"><a class="pagination-previous">Prev</a><a class="pagination-next">Next</a><ul class="pagination-list"><li><a class="pagination-link is-current">1</a></li><li><span class="pagination-ellipsis"> / </span></li><li><a class="pagination-link">1</a></li></ul></nav></div></div><div class="tohoverover"></div></div></div></div><div class="column is-one-quarter"><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"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M400 480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zM238.1 177.9L102.4 313.6l-6.3 57.1c-.8 7.6 5.6 14.1 13.3 13.3l57.1-6.3L302.2 242c2.3-2.3 2.3-6.1 0-8.5L246.7 178c-2.5-2.4-6.3-2.4-8.6-.1zM345 165.1L314.9 135c-9.4-9.4-24.6-9.4-33.9 0l-23.1 23.1c-2.3 2.3-2.3 6.1 0 8.5l55.5 55.5c2.3 2.3 6.1 2.3 8.5 0L345 199c9.3-9.3 9.3-24.5 0-33.9z"></path></svg></span><span class="is-size-3 has-text-info">Modify a Tag</span><div>Select a Tag from the list to edit it here<div><span>No item selected yet for editing.</span></div></div><div class="tohoverover"></div></div></div></div></div><div class="columns marginTopBig"><div class="column is-one-quarter"><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"><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="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg></span><span class="is-size-3 has-text-info">Add a Tag Collection</span><div>Create Tag Collections that have relationships to the Tags above<div><div class="field"><label class="label">title</label><input type="text" class="input"/></div><div class="field"><label class="label">Relationship <!-- -->tags</label><div class="control"><div><div><div class="field"><label class="label">tagName</label><input type="text" class="input"/></div></div></div></div></div><a class="button is-primary">Create</a></div></div><div class="tohoverover"></div></div></div></div><div class="column is-half"><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"><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="M464 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM128 120c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm288-136v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12z"></path></svg></span><span class="is-size-3 has-text-info">Related lists</span><div><div class="is-flex centerJustify smallMarginBottom">Just like in the search _id is resolved to a name display <a class="button"><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="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>Reset Data</a></div><div><table class="table is-striped is-hoverable is-fullwidth"><thead><tr><th>ID</th><th>title</th><th>tags</th><th></th></tr></thead><tbody></tbody></table><nav class="pagination is-centered"><a class="pagination-previous">Prev</a><a class="pagination-next">Next</a><ul class="pagination-list"><li><a class="pagination-link is-current">1</a></li><li><span class="pagination-ellipsis"> / </span></li><li><a class="pagination-link">1</a></li></ul></nav></div></div><div class="tohoverover"></div></div></div></div><div class="column is-one-quarter"><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"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M400 480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zM238.1 177.9L102.4 313.6l-6.3 57.1c-.8 7.6 5.6 14.1 13.3 13.3l57.1-6.3L302.2 242c2.3-2.3 2.3-6.1 0-8.5L246.7 178c-2.5-2.4-6.3-2.4-8.6-.1zM345 165.1L314.9 135c-9.4-9.4-24.6-9.4-33.9 0l-23.1 23.1c-2.3 2.3-2.3 6.1 0 8.5l55.5 55.5c2.3 2.3 6.1 2.3 8.5 0L345 199c9.3-9.3 9.3-24.5 0-33.9z"></path></svg></span><span class="is-size-3 has-text-info">Alter a Collection</span><div>Select an Item from the list to edit it here<div><span>No item selected yet for editing.</span></div></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 640 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M610.5 341.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 368.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm224 32c1.9 0 3.7-.5 5.6-.6 8.3-21.7 20.5-42.1 36.3-59.2 7.4-8 17.9-12.6 28.9-12.6 6.9 0 13.7 1.8 19.6 5.3l7.9 4.6c.8-.5 1.6-.9 2.4-1.4 7-14.6 11.2-30.8 11.2-48 0-61.9-50.1-112-112-112S208 82.1 208 144c0 61.9 50.1 112 112 112zm105.2 194.5c-2.3-1.2-4.6-2.6-6.8-3.9-8.2 4.8-15.3 9.8-27.5 9.8-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-10.7-34.5 24.9-49.7 25.8-50.3-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-3.8-2.2-7-5-9.8-8.1-3.3.2-6.5.6-9.8.6-24.6 0-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h255.4c-3.7-6-6.2-12.8-6.2-20.3v-9.2zM173.1 274.6C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg></span><span class="has-text-primary">All driven by this little definition</span></div><div class="marginTop"><pre class="code-container" source="import { executeForMethods, ExtendedJSONSchema } from "@xpfw/form"
import { changeValToRegex } from "@xpfw/data"
import { isString } from "lodash"
const TagName: ExtendedJSONSchema = {
title: "tagName",
type: "string"
}
const TagDescription: ExtendedJSONSchema = {
title: "description",
type: "string"
}
const TagModel: ExtendedJSONSchema = {
title: "tagModel",
collection: "tags",
required: [String(TagName.title)],
properties: {
[String(TagName.title)]: TagName,
[String(TagDescription.title)]: TagDescription
}
}
const Title: ExtendedJSONSchema = {
title: "title",
type: "string"
}
const CreatedAt: ExtendedJSONSchema = {
title: "createdAt",
type: "string",
format: "date-time"
}
const Tags: ExtendedJSONSchema = {
title: "tags",
type: "array",
theme: "multi",
relationship: {
namePath: TagName.title,
collection: TagModel.collection,
idPath: "_id"
},
modify: changeValToRegex(String(TagName.title))
}
const TagCollectionModel: ExtendedJSONSchema = {
title: "tagColModel",
collection: "tagCol",
required: [String(Title.title)],
properties: {
[String(Title.title)]: Title,
[String(Tags.title)]: Tags,
[String(CreatedAt.title)]: CreatedAt
}
}" 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> executeForMethods</span><span class="token" style="color:#5F6364">,</span><span> ExtendedJSONSchema </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> changeValToRegex </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/data"</span><span>
</span><span></span><span class="token" style="color:#1990b8">import</span><span> </span><span class="token" style="color:#5F6364">{</span><span> isString </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">"lodash"</span><span>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> TagName</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tagName"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </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>
</span><span></span><span class="token" style="color:#5F6364">}</span><span>
</span><span></span><span class="token" style="color:#1990b8">const</span><span> TagDescription</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"description"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </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>
</span><span></span><span class="token" style="color:#5F6364">}</span><span>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> TagModel</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tagModel"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> collection</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tags"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> required</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:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>TagName</span><span class="token" style="color:#5F6364">.</span><span>title</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> 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>
</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>TagName</span><span class="token" style="color:#5F6364">.</span><span>title</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> TagName</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>TagDescription</span><span class="token" style="color:#5F6364">.</span><span>title</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> TagDescription
</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:#1990b8">const</span><span> Title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"title"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </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>
</span><span></span><span class="token" style="color:#5F6364">}</span><span>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> CreatedAt</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"createdAt"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </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>
</span><span> format</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"date-time"</span><span>
</span><span></span><span class="token" style="color:#5F6364">}</span><span>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> Tags</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tags"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </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">"array"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> theme</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"multi"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> relationship</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> namePath</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> TagName</span><span class="token" style="color:#5F6364">.</span><span>title</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> collection</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> TagModel</span><span class="token" style="color:#5F6364">.</span><span>collection</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> idPath</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"_id"</span><span>
</span><span> </span><span class="token" style="color:#5F6364">}</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> modify</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">changeValToRegex</span><span class="token" style="color:#5F6364">(</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>TagName</span><span class="token" style="color:#5F6364">.</span><span>title</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>
</span>
<span></span><span class="token" style="color:#1990b8">const</span><span> TagCollectionModel</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> ExtendedJSONSchema </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> title</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tagColModel"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> collection</span><span class="token" style="color:#a67f59;background:rgba(255, 255, 255, 0.5)">:</span><span> </span><span class="token" style="color:#2f9c0a">"tagCol"</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> required</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:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>Title</span><span class="token" style="color:#5F6364">.</span><span>title</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> 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>
</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>Title</span><span class="token" style="color:#5F6364">.</span><span>title</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> Title</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>Tags</span><span class="token" style="color:#5F6364">.</span><span>title</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> Tags</span><span class="token" style="color:#5F6364">,</span><span>
</span><span> </span><span class="token" style="color:#5F6364">[</span><span class="token" style="color:#2f9c0a">String</span><span class="token" style="color:#5F6364">(</span><span>CreatedAt</span><span class="token" style="color:#5F6364">.</span><span>title</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> CreatedAt
</span><span> </span><span class="token" style="color:#5F6364">}</span><span>
</span><span></span><span class="token" style="color:#5F6364">}</span></code></pre></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">React Native support</span></div><div class="marginTop"><div class="has-text-centered is-size-5 pullUpMargin">Here are some screenshots of using <a target="_blank" class="tag is-rounded is-white has-text-link is-size-6" href="https://github.com/xpfw/xpfw/tree/master/packages/data-native">@xpfw/data-native</a>.</div><div class="columns marginTopBig"><div class="column is-one-third"><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"><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="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg></span><span class="is-size-3 has-text-info">Create</span><img src="ac49750c6836b91f467386eb30a24300.png" alt="Screenshot of @xpfw/data-native's create component"/><div class="tohoverover"></div></div></div></div><div class="column is-one-third"><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"><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="M464 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM128 120c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm0 96c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zm288-136v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12zm0 96v-32c0-6.627-5.373-12-12-12H204c-6.627 0-12 5.373-12 12v32c0 6.627 5.373 12 12 12h200c6.627 0 12-5.373 12-12z"></path></svg></span><span class="is-size-3 has-text-info">List</span><img src="b3401cfc26b253a6d64e70ef358c400f.png" alt="Screenshot of @xpfw/data-native's list component"/><div class="tohoverover"></div></div></div></div><div class="column is-one-third"><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"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M400 480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zM238.1 177.9L102.4 313.6l-6.3 57.1c-.8 7.6 5.6 14.1 13.3 13.3l57.1-6.3L302.2 242c2.3-2.3 2.3-6.1 0-8.5L246.7 178c-2.5-2.4-6.3-2.4-8.6-.1zM345 165.1L314.9 135c-9.4-9.4-24.6-9.4-33.9 0l-23.1 23.1c-2.3 2.3-2.3 6.1 0 8.5l55.5 55.5c2.3 2.3 6.1 2.3 8.5 0L345 199c9.3-9.3 9.3-24.5 0-33.9z"></path></svg></span><span class="is-size-3 has-text-info">Edit</span><img src="d6e871025bb57bedf16ec0be5e5924a1.png" alt="Screenshot of @xpfw/data-native's edit component"/><div class="tohoverover"></div></div></div></div></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>