@saltcorn/builder 0.0.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/.babelrc +3 -0
  2. package/CHANGELOG.md +8 -0
  3. package/dist/builder_bundle.js +80 -0
  4. package/package.json +47 -0
  5. package/src/components/Builder.js +477 -0
  6. package/src/components/Library.js +224 -0
  7. package/src/components/RenderNode.js +203 -0
  8. package/src/components/Toolbox.js +688 -0
  9. package/src/components/context.js +9 -0
  10. package/src/components/elements/Action.js +204 -0
  11. package/src/components/elements/Aggregation.js +179 -0
  12. package/src/components/elements/BoxModelEditor.js +398 -0
  13. package/src/components/elements/Card.js +152 -0
  14. package/src/components/elements/Column.js +63 -0
  15. package/src/components/elements/Columns.js +201 -0
  16. package/src/components/elements/Container.js +947 -0
  17. package/src/components/elements/DropDownFilter.js +154 -0
  18. package/src/components/elements/DropMenu.js +156 -0
  19. package/src/components/elements/Empty.js +30 -0
  20. package/src/components/elements/Field.js +239 -0
  21. package/src/components/elements/HTMLCode.js +61 -0
  22. package/src/components/elements/Image.js +320 -0
  23. package/src/components/elements/JoinField.js +206 -0
  24. package/src/components/elements/LineBreak.js +46 -0
  25. package/src/components/elements/Link.js +305 -0
  26. package/src/components/elements/SearchBar.js +141 -0
  27. package/src/components/elements/Tabs.js +347 -0
  28. package/src/components/elements/Text.js +330 -0
  29. package/src/components/elements/ToggleFilter.js +243 -0
  30. package/src/components/elements/View.js +189 -0
  31. package/src/components/elements/ViewLink.js +225 -0
  32. package/src/components/elements/boxmodel.html +253 -0
  33. package/src/components/elements/faicons.js +1643 -0
  34. package/src/components/elements/utils.js +1217 -0
  35. package/src/components/preview_context.js +9 -0
  36. package/src/components/storage.js +506 -0
  37. package/src/index.js +73 -0
  38. package/webpack.config.js +21 -0
package/src/components/elements/boxmodel.html ADDED
@@ -0,0 +1,253 @@
1
+ <style>
2
+ .boxmodel-container {
3
+ display: inline-flex;
4
+ flex-direction: column;
5
+ flex-flow: column wrap;
6
+ font-family: "Consolas", "Monaco", monospace;
7
+ font-size: 12px;
8
+ position: relative;
9
+ }
10
+ .boxmodel-container .boxmodel-info {
11
+ font-size: 10px;
12
+ font-family: Verdana;
13
+ font-style: normal;
14
+ text-align: left;
15
+ line-height: 14px;
16
+ margin: 2px 0 0 0;
17
+ padding: 0px;
18
+ margin-top: 2px;
19
+ }
20
+ .boxmodel-container div:not(.flex-row) {
21
+ box-sizing: border-box;
22
+ display: flex;
23
+ flex-direction: row;
24
+ align-items: center;
25
+ align-content: space-between;
26
+ padding: 0;
27
+ margin: 0;
28
+ }
29
+ .boxmodel-container span.boxmodel-text {
30
+ font-size: 8.5px;
31
+ font-family: Verdana, Geneva, sans-serif;
32
+ display: inline-block;
33
+ user-select: none;
34
+ }
35
+ .boxmodel-container span.boxmodel-text.boxmodel-header {
36
+ position: absolute;
37
+ top: 2px;
38
+ left: 2px;
39
+ color: #777;
40
+ }
41
+ .boxmodel-container .boxmodel-margin {
42
+ background: #ffffff;
43
+ border: 1px dashed #aaa;
44
+ position: relative;
45
+ }
46
+ .boxmodel-container .boxmodel-border {
47
+ background: #ddd;
48
+ border: 2px solid #aaa;
49
+ position: relative;
50
+ }
51
+ .boxmodel-container .boxmodel-padding {
52
+ background: #eee;
53
+ border: 1px dashed #aaa;
54
+ position: relative;
55
+ }
56
+ .boxmodel-container .boxmodel-content {
57
+ background: #fff;
58
+ height: 30px;
59
+ margin: 0;
60
+ border: 1px solid #aaa;
61
+ position: relative;
62
+ font-family: Verdana, Geneva, sans-serif;
63
+ font-size: 10px;
64
+ }
65
+ .boxmodel-container .flex-row {
66
+ text-align: center;
67
+ }
68
+ .boxmodel-container .boxmodel-input-direction-top,
69
+ .boxmodel-container .boxmodel-input-direction-bottom {
70
+ display: block;
71
+ padding: 0;
72
+ margin: 0;
73
+ line-height: 0;
74
+ }
75
+ .boxmodel-container .boxmodel-input-direction-right,
76
+ .boxmodel-container .boxmodel-input-direction-left {
77
+ position: relative;
78
+ }
79
+ .boxmodel-container input,
80
+ .boxmodel-container input:focus,
81
+ .boxmodel-container input:active {
82
+ background: transparent;
83
+ color: black;
84
+ font-size: 9px;
85
+ font-family: Verdana, Geneva, sans-serif;
86
+ box-shadow: none;
87
+ border: 1px solid transparent;
88
+ outline: none;
89
+ user-select: none;
90
+ margin: 0px;
91
+ padding: 1px;
92
+ text-align: center;
93
+ }
94
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-margin {
95
+ background: #f9cc9d;
96
+ border: 1px dashed #222;
97
+ }
98
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-border {
99
+ background: #ffeebc;
100
+ border: 1px solid #000;
101
+ }
102
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-padding {
103
+ background: #c3deb7;
104
+ border: 1px dashed #808080;
105
+ }
106
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-content {
107
+ background: #a0c5e8;
108
+ border: 1px solid #808080;
109
+ }
110
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-text {
111
+ color: black;
112
+ }
113
+ .boxmodel-chrome-skin .boxmodel-container .boxmodel-text.boxmodel-header {
114
+ color: black;
115
+ }
116
+ </style>
117
+
118
+ <div class="boxmodel-container boxmodel-chrome-skin">
119
+ <div class="boxmodel-container">
120
+ <div class="boxmodel-margin">
121
+ <span class="boxmodel-text boxmodel-header">Margin</span
122
+ ><span class="boxmodel-input-container boxmodel-input-direction-left"
123
+ ><input
124
+ disabled
125
+ type="text"
126
+ autocomplete="off"
127
+ name="boxmodel-ex-1_left_margin"
128
+ size="3"
129
+ /></span>
130
+ <div class="flex-row">
131
+ <span class="boxmodel-input-container boxmodel-input-direction-top"
132
+ ><input
133
+ disabled
134
+ type="text"
135
+ autocomplete="off"
136
+ name="boxmodel-ex-1_top_margin"
137
+ size="3"
138
+ /></span>
139
+ <div class="boxmodel-border">
140
+ <span class="boxmodel-text boxmodel-header">Border</span
141
+ ><span class="boxmodel-input-container boxmodel-input-direction-left"
142
+ ><input
143
+ disabled
144
+ type="text"
145
+ autocomplete="off"
146
+ name="boxmodel-ex-1_left_border"
147
+ size="3"
148
+ /></span>
149
+ <div class="flex-row">
150
+ <span class="boxmodel-input-container boxmodel-input-direction-top"
151
+ ><input
152
+ disabled
153
+ type="text"
154
+ autocomplete="off"
155
+ name="boxmodel-ex-1_top_border"
156
+ size="3"
157
+ /></span>
158
+ <div class="boxmodel-padding">
159
+ <span class="boxmodel-text boxmodel-header">Padding</span
160
+ ><span
161
+ class="boxmodel-input-container boxmodel-input-direction-left"
162
+ ><input
163
+ disabled
164
+ type="text"
165
+ autocomplete="off"
166
+ name="boxmodel-ex-1_left_padding"
167
+ size="3"
168
+ class=""
169
+ /></span>
170
+ <div class="flex-row">
171
+ <span
172
+ class="boxmodel-input-container boxmodel-input-direction-top"
173
+ ><input
174
+ disabled
175
+ type="text"
176
+ autocomplete="off"
177
+ name="boxmodel-ex-1_top_padding"
178
+ size="3"
179
+ /></span>
180
+ <div class="boxmodel-content">
181
+ <input
182
+ disabled
183
+ type="text"
184
+ autocomplete="off"
185
+ name="boxmodel-ex-1_width"
186
+ size="3"
187
+ />x<input
188
+ disabled
189
+ type="text"
190
+ autocomplete="off"
191
+ name="boxmodel-ex-1_height"
192
+ size="3"
193
+ />
194
+ </div>
195
+ <span
196
+ class="boxmodel-input-container boxmodel-input-direction-bottom"
197
+ ><input
198
+ disabled
199
+ type="text"
200
+ autocomplete="off"
201
+ name="boxmodel-ex-1_bottom_padding"
202
+ size="3"
203
+ /></span>
204
+ </div>
205
+ <span
206
+ class="boxmodel-input-container boxmodel-input-direction-right"
207
+ ><input
208
+ disabled
209
+ type="text"
210
+ autocomplete="off"
211
+ name="boxmodel-ex-1_right_padding"
212
+ size="3"
213
+ /></span>
214
+ </div>
215
+ <span
216
+ class="boxmodel-input-container boxmodel-input-direction-bottom"
217
+ ><input
218
+ disabled
219
+ type="text"
220
+ autocomplete="off"
221
+ name="boxmodel-ex-1_bottom_border"
222
+ size="3"
223
+ /></span>
224
+ </div>
225
+ <span class="boxmodel-input-container boxmodel-input-direction-right"
226
+ ><input
227
+ disabled
228
+ type="text"
229
+ autocomplete="off"
230
+ name="boxmodel-ex-1_right_border"
231
+ size="3"
232
+ /></span>
233
+ </div>
234
+ <span class="boxmodel-input-container boxmodel-input-direction-bottom"
235
+ ><input
236
+ disabled
237
+ type="text"
238
+ autocomplete="off"
239
+ name="boxmodel-ex-1_bottom_margin"
240
+ size="3"
241
+ /></span>
242
+ </div>
243
+ <span class="boxmodel-input-container boxmodel-input-direction-right"
244
+ ><input
245
+ disabled
246
+ type="text"
247
+ autocomplete="off"
248
+ name="boxmodel-ex-1_right_margin"
249
+ size="3"
250
+ /></span>
251
+ </div>
252
+ </div>
253
+ </div>