clapton 0.0.23 → 0.0.25
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.
- checksums.yaml +4 -4
- data/README.md +23 -105
- data/lib/clapton/javascripts/dist/c-for-test.js +129 -271
- data/lib/clapton/javascripts/dist/c.js +129 -271
- data/lib/clapton/javascripts/dist/client.js +3 -0
- data/lib/clapton/javascripts/dist/components-for-test.js +90 -245
- data/lib/clapton/javascripts/dist/components.js +89 -241
- data/lib/clapton/javascripts/src/c-base.ts +45 -33
- data/lib/clapton/javascripts/src/channel/clapton-channel.js +1 -0
- data/lib/clapton/javascripts/src/client.ts +1 -0
- data/lib/clapton/javascripts/src/components/{box.ts → base.ts} +6 -8
- data/lib/clapton/javascripts/src/components/block-quote.spec.ts +1 -1
- data/lib/clapton/javascripts/src/components/block-quote.ts +2 -14
- data/lib/clapton/javascripts/src/components/bold.ts +2 -14
- data/lib/clapton/javascripts/src/components/button.ts +2 -19
- data/lib/clapton/javascripts/src/components/code.ts +2 -14
- data/lib/clapton/javascripts/src/components/component.ts +28 -2
- data/lib/clapton/javascripts/src/components/{box.spec.ts → div.spec.ts} +8 -8
- data/lib/clapton/javascripts/src/components/div.ts +8 -0
- data/lib/clapton/javascripts/src/components/element.ts +3 -9
- data/lib/clapton/javascripts/src/components/emphasis.ts +2 -14
- data/lib/clapton/javascripts/src/components/form.ts +2 -14
- data/lib/clapton/javascripts/src/components/heading.ts +4 -10
- data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
- data/lib/clapton/javascripts/src/components/image.ts +3 -14
- data/lib/clapton/javascripts/src/components/input.spec.ts +16 -0
- data/lib/clapton/javascripts/src/components/{datetime-field.ts → input.ts} +9 -11
- data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
- data/lib/clapton/javascripts/src/components/link.ts +3 -16
- data/lib/clapton/javascripts/src/components/list-item.ts +2 -14
- data/lib/clapton/javascripts/src/components/list.ts +2 -14
- data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -14
- data/lib/clapton/javascripts/src/components/paragraph.ts +2 -14
- data/lib/clapton/javascripts/src/components/quote.ts +2 -14
- data/lib/clapton/javascripts/src/components/select.ts +3 -5
- data/lib/clapton/javascripts/src/components/span.ts +2 -14
- data/lib/clapton/javascripts/src/components/text-area.ts +4 -9
- data/lib/clapton/javascripts/src/components-for-test.ts +3 -6
- data/lib/clapton/javascripts/src/components.ts +3 -6
- data/lib/clapton/javascripts/src/dom/update-component.ts +1 -0
- data/lib/clapton/test_helper/base.rb +4 -4
- data/lib/clapton/version.rb +1 -1
- metadata +7 -14
- data/lib/clapton/javascripts/dist/c +0 -559
- data/lib/clapton/javascripts/dist/c-base.js +0 -589
- data/lib/clapton/javascripts/src/components/checkbox.spec.ts +0 -16
- data/lib/clapton/javascripts/src/components/checkbox.ts +0 -23
- data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +0 -16
- data/lib/clapton/javascripts/src/components/radio-button.spec.ts +0 -16
- data/lib/clapton/javascripts/src/components/radio-button.ts +0 -23
- data/lib/clapton/javascripts/src/components/text-field.spec.ts +0 -16
- data/lib/clapton/javascripts/src/components/text-field.ts +0 -23
@@ -43,155 +43,63 @@ var c = (function () {
|
|
43
43
|
.replace(/'/g, "'");
|
44
44
|
};
|
45
45
|
|
46
|
-
class
|
46
|
+
class Base {
|
47
47
|
constructor(attributes = {}) {
|
48
48
|
this.children = [];
|
49
49
|
this.attributes = attributes;
|
50
50
|
}
|
51
|
-
get renderWrapper() {
|
52
|
-
return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
|
53
|
-
}
|
54
51
|
add(child) {
|
55
52
|
this.children.push(child);
|
56
53
|
return this;
|
57
54
|
}
|
58
|
-
}
|
59
|
-
|
60
|
-
class Box {
|
61
|
-
constructor(attributes = {}) {
|
62
|
-
this.children = [];
|
63
|
-
this.attributes = attributes;
|
64
|
-
}
|
65
|
-
add(child) {
|
66
|
-
this.children.push(child);
|
67
|
-
return this;
|
68
|
-
}
|
69
|
-
get renderWrapper() {
|
70
|
-
return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
|
71
|
-
}
|
72
55
|
add_action(eventType, stateName, fnName, options = {}) {
|
73
56
|
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
|
74
57
|
return this;
|
75
58
|
}
|
59
|
+
get renderWrapper() {
|
60
|
+
return "";
|
61
|
+
}
|
76
62
|
}
|
77
63
|
|
78
|
-
class
|
79
|
-
constructor(attributes = {}) {
|
80
|
-
this.attributes = attributes;
|
81
|
-
this.children = [];
|
82
|
-
}
|
83
|
-
add(child) {
|
84
|
-
this.children.push(child);
|
85
|
-
return this;
|
86
|
-
}
|
64
|
+
class BlockQuote extends Base {
|
87
65
|
get renderWrapper() {
|
88
|
-
return `<
|
89
|
-
}
|
90
|
-
add_action(event, klass, fn, options = {}) {
|
91
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
92
|
-
return this;
|
66
|
+
return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
|
93
67
|
}
|
94
68
|
}
|
95
69
|
|
96
|
-
class
|
97
|
-
constructor(attributes = {}) {
|
98
|
-
this.children = [];
|
99
|
-
this.attributes = attributes;
|
100
|
-
}
|
70
|
+
class Div extends Base {
|
101
71
|
get renderWrapper() {
|
102
|
-
return `<
|
103
|
-
}
|
104
|
-
add(child) {
|
105
|
-
this.children.push(child);
|
106
|
-
return this;
|
72
|
+
return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
|
107
73
|
}
|
108
74
|
}
|
109
75
|
|
110
|
-
class
|
111
|
-
constructor(state, attribute, attributes = {}) {
|
112
|
-
this.state = state;
|
113
|
-
this.attributes = attributes;
|
114
|
-
this.attribute = attribute;
|
115
|
-
this.attributes["data-attribute"] = attribute;
|
116
|
-
}
|
76
|
+
class Button extends Base {
|
117
77
|
get renderWrapper() {
|
118
|
-
return `<
|
119
|
-
}
|
120
|
-
add_action(event, klass, fn, options = {}) {
|
121
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
122
|
-
return this;
|
78
|
+
return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
|
123
79
|
}
|
124
80
|
}
|
125
81
|
|
126
|
-
class
|
127
|
-
constructor(attributes = {}) {
|
128
|
-
this.children = [];
|
129
|
-
this.attributes = attributes;
|
130
|
-
}
|
82
|
+
class Bold extends Base {
|
131
83
|
get renderWrapper() {
|
132
|
-
return `<
|
133
|
-
}
|
134
|
-
add(child) {
|
135
|
-
this.children.push(child);
|
136
|
-
return this;
|
84
|
+
return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
|
137
85
|
}
|
138
86
|
}
|
139
87
|
|
140
|
-
class
|
141
|
-
constructor(state, attribute, attributes = {}) {
|
142
|
-
this.attributes = {};
|
143
|
-
this.state = state;
|
144
|
-
this.attribute = attribute;
|
145
|
-
this.attributes = attributes;
|
146
|
-
this.attributes["data-attribute"] = attribute;
|
147
|
-
}
|
88
|
+
class Code extends Base {
|
148
89
|
get renderWrapper() {
|
149
|
-
|
150
|
-
return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
|
151
|
-
}
|
152
|
-
add_action(event, klass, fn, options = {}) {
|
153
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
154
|
-
return this;
|
155
|
-
}
|
156
|
-
datetime_local_value(value) {
|
157
|
-
if (!value) {
|
158
|
-
return "";
|
159
|
-
}
|
160
|
-
const date = new Date(value);
|
161
|
-
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
|
162
|
-
let month = date.getMonth() + 1;
|
163
|
-
let day = date.getDate();
|
164
|
-
let hours = date.getHours();
|
165
|
-
let minutes = date.getMinutes();
|
166
|
-
if (month < 10) {
|
167
|
-
month = `0${month}`;
|
168
|
-
}
|
169
|
-
if (day < 10) {
|
170
|
-
day = `0${day}`;
|
171
|
-
}
|
172
|
-
if (hours < 10) {
|
173
|
-
hours = `0${hours}`;
|
174
|
-
}
|
175
|
-
if (minutes < 10) {
|
176
|
-
minutes = `0${minutes}`;
|
177
|
-
}
|
178
|
-
return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
|
90
|
+
return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
|
179
91
|
}
|
180
92
|
}
|
181
93
|
|
182
|
-
class Element {
|
94
|
+
class Element extends Base {
|
183
95
|
constructor(type, attributes = {}) {
|
96
|
+
super(attributes);
|
184
97
|
this.children = [];
|
185
98
|
this.type = type;
|
186
|
-
this.attributes = attributes;
|
187
99
|
}
|
188
100
|
get renderWrapper() {
|
189
101
|
return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
|
190
102
|
}
|
191
|
-
add(child) {
|
192
|
-
this.children.push(child);
|
193
|
-
return this;
|
194
|
-
}
|
195
103
|
}
|
196
104
|
|
197
105
|
class Embed {
|
@@ -203,187 +111,86 @@ var c = (function () {
|
|
203
111
|
}
|
204
112
|
}
|
205
113
|
|
206
|
-
class Emphasis {
|
207
|
-
constructor(attributes = {}) {
|
208
|
-
this.children = [];
|
209
|
-
this.attributes = attributes;
|
210
|
-
}
|
114
|
+
class Emphasis extends Base {
|
211
115
|
get renderWrapper() {
|
212
116
|
return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
|
213
117
|
}
|
214
|
-
add(child) {
|
215
|
-
this.children.push(child);
|
216
|
-
return this;
|
217
|
-
}
|
218
118
|
}
|
219
119
|
|
220
|
-
class Form {
|
221
|
-
constructor(attributes = {}) {
|
222
|
-
this.children = [];
|
223
|
-
this.attributes = attributes;
|
224
|
-
}
|
120
|
+
class Form extends Base {
|
225
121
|
get renderWrapper() {
|
226
122
|
return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
|
227
123
|
}
|
228
|
-
add(child) {
|
229
|
-
this.children.push(child);
|
230
|
-
return this;
|
231
|
-
}
|
232
124
|
}
|
233
125
|
|
234
|
-
class Heading {
|
126
|
+
class Heading extends Base {
|
235
127
|
constructor(level, attributes = {}) {
|
236
|
-
|
128
|
+
super(attributes);
|
237
129
|
this.level = level;
|
238
|
-
this.attributes = attributes;
|
239
130
|
}
|
240
131
|
get renderWrapper() {
|
241
132
|
return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
|
242
133
|
}
|
243
|
-
add(child) {
|
244
|
-
this.children.push(child);
|
245
|
-
return this;
|
246
|
-
}
|
247
134
|
}
|
248
135
|
|
249
|
-
class Image {
|
250
|
-
constructor(src, alt, attributes = {}) {
|
251
|
-
this.children = [];
|
252
|
-
this.attributes = attributes;
|
253
|
-
this.src = src;
|
254
|
-
this.alt = alt;
|
255
|
-
}
|
136
|
+
class Image extends Base {
|
256
137
|
get renderWrapper() {
|
257
|
-
return `<img
|
138
|
+
return `<img ${htmlAttributes(this.attributes)}/>`;
|
258
139
|
}
|
259
140
|
}
|
260
141
|
|
261
|
-
class Link {
|
262
|
-
constructor(href, attributes = {}) {
|
263
|
-
this.children = [];
|
264
|
-
this.attributes = attributes;
|
265
|
-
this.href = href;
|
266
|
-
}
|
142
|
+
class Link extends Base {
|
267
143
|
get renderWrapper() {
|
268
|
-
return `<a
|
269
|
-
}
|
270
|
-
add(child) {
|
271
|
-
this.children.push(child);
|
272
|
-
return this;
|
144
|
+
return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
|
273
145
|
}
|
274
146
|
}
|
275
147
|
|
276
|
-
class ListItem {
|
277
|
-
constructor(attributes = {}) {
|
278
|
-
this.children = [];
|
279
|
-
this.attributes = attributes;
|
280
|
-
}
|
281
|
-
add(child) {
|
282
|
-
this.children.push(child);
|
283
|
-
return this;
|
284
|
-
}
|
148
|
+
class ListItem extends Base {
|
285
149
|
get renderWrapper() {
|
286
150
|
return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
|
287
151
|
}
|
288
152
|
}
|
289
153
|
|
290
|
-
class List {
|
291
|
-
constructor(attributes = {}) {
|
292
|
-
this.children = [];
|
293
|
-
this.attributes = attributes;
|
294
|
-
}
|
295
|
-
add(child) {
|
296
|
-
this.children.push(child);
|
297
|
-
return this;
|
298
|
-
}
|
154
|
+
class List extends Base {
|
299
155
|
get renderWrapper() {
|
300
156
|
return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
|
301
157
|
}
|
302
158
|
}
|
303
159
|
|
304
|
-
class OrderedList {
|
305
|
-
constructor(attributes = {}) {
|
306
|
-
this.children = [];
|
307
|
-
this.attributes = attributes;
|
308
|
-
}
|
309
|
-
add(child) {
|
310
|
-
this.children.push(child);
|
311
|
-
return this;
|
312
|
-
}
|
160
|
+
class OrderedList extends Base {
|
313
161
|
get renderWrapper() {
|
314
162
|
return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
|
315
163
|
}
|
316
164
|
}
|
317
165
|
|
318
|
-
class Paragraph {
|
319
|
-
constructor(attributes = {}) {
|
320
|
-
this.children = [];
|
321
|
-
this.attributes = attributes;
|
322
|
-
}
|
166
|
+
class Paragraph extends Base {
|
323
167
|
get renderWrapper() {
|
324
168
|
return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
|
325
169
|
}
|
326
|
-
add(child) {
|
327
|
-
this.children.push(child);
|
328
|
-
return this;
|
329
|
-
}
|
330
170
|
}
|
331
171
|
|
332
|
-
class Quote {
|
333
|
-
constructor(attributes = {}) {
|
334
|
-
this.children = [];
|
335
|
-
this.attributes = attributes;
|
336
|
-
}
|
172
|
+
class Quote extends Base {
|
337
173
|
get renderWrapper() {
|
338
174
|
return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
|
339
175
|
}
|
340
|
-
add(child) {
|
341
|
-
this.children.push(child);
|
342
|
-
return this;
|
343
|
-
}
|
344
176
|
}
|
345
177
|
|
346
|
-
class
|
347
|
-
constructor(state, attribute, attributes = {}) {
|
348
|
-
this.state = state;
|
349
|
-
this.attributes = attributes;
|
350
|
-
this.attribute = attribute;
|
351
|
-
this.attributes["data-attribute"] = attribute;
|
352
|
-
}
|
353
|
-
get renderWrapper() {
|
354
|
-
return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
|
355
|
-
}
|
356
|
-
add_action(event, klass, fn, options = {}) {
|
357
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
358
|
-
return this;
|
359
|
-
}
|
360
|
-
}
|
361
|
-
|
362
|
-
class Select {
|
178
|
+
class Select extends Base {
|
363
179
|
constructor(options = [], state, attribute, attributes = {}) {
|
364
|
-
|
180
|
+
super(attributes);
|
365
181
|
this.options = options;
|
366
182
|
this.state = state;
|
367
183
|
this.attribute = attribute;
|
368
|
-
this.attributes = attributes;
|
369
184
|
}
|
370
185
|
get renderWrapper() {
|
371
186
|
return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
|
372
187
|
}
|
373
188
|
}
|
374
189
|
|
375
|
-
class Span {
|
376
|
-
constructor(attributes = {}) {
|
377
|
-
this.children = [];
|
378
|
-
this.attributes = attributes;
|
379
|
-
}
|
190
|
+
class Span extends Base {
|
380
191
|
get renderWrapper() {
|
381
192
|
return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
|
382
193
|
}
|
383
|
-
add(child) {
|
384
|
-
this.children.push(child);
|
385
|
-
return this;
|
386
|
-
}
|
387
194
|
}
|
388
195
|
|
389
196
|
class Component {
|
@@ -393,7 +200,7 @@ var c = (function () {
|
|
393
200
|
this._errors = errors;
|
394
201
|
}
|
395
202
|
get render() {
|
396
|
-
return new
|
203
|
+
return new Div({});
|
397
204
|
}
|
398
205
|
get renderWrapper() {
|
399
206
|
const root = this.render;
|
@@ -405,21 +212,66 @@ var c = (function () {
|
|
405
212
|
}
|
406
213
|
return root.renderWrapper;
|
407
214
|
}
|
215
|
+
static effect(dependencies, callback) {
|
216
|
+
this._effects.push({ dependencies, callback });
|
217
|
+
}
|
218
|
+
get effects() {
|
219
|
+
return this.constructor._effects;
|
220
|
+
}
|
221
|
+
runEffects() {
|
222
|
+
this.effects.forEach((effect) => {
|
223
|
+
if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
|
224
|
+
effect.callback(this._state);
|
225
|
+
}
|
226
|
+
});
|
227
|
+
}
|
228
|
+
runEffectOnFirstRender() {
|
229
|
+
this.effects.forEach((effect) => {
|
230
|
+
if (effect.dependencies.length === 0) {
|
231
|
+
effect.callback(this._state);
|
232
|
+
}
|
233
|
+
});
|
234
|
+
}
|
408
235
|
}
|
236
|
+
Component._effects = [];
|
409
237
|
|
410
|
-
class
|
238
|
+
class Input extends Base {
|
411
239
|
constructor(state, attribute, attributes = {}) {
|
412
|
-
|
413
|
-
this.attributes = attributes;
|
240
|
+
super(attributes);
|
414
241
|
this.attribute = attribute;
|
242
|
+
this.state = state;
|
415
243
|
this.attributes["data-attribute"] = attribute;
|
416
244
|
}
|
417
245
|
get renderWrapper() {
|
418
|
-
|
246
|
+
let value = this.state[this.attribute];
|
247
|
+
if (this.attributes.type === "datetime-local" && value) {
|
248
|
+
value = this.datetime_local_value(value);
|
249
|
+
}
|
250
|
+
return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
|
419
251
|
}
|
420
|
-
|
421
|
-
|
422
|
-
|
252
|
+
datetime_local_value(value) {
|
253
|
+
if (!value) {
|
254
|
+
return "";
|
255
|
+
}
|
256
|
+
const date = new Date(value);
|
257
|
+
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
|
258
|
+
let month = date.getMonth() + 1;
|
259
|
+
let day = date.getDate();
|
260
|
+
let hours = date.getHours();
|
261
|
+
let minutes = date.getMinutes();
|
262
|
+
if (month < 10) {
|
263
|
+
month = `0${month}`;
|
264
|
+
}
|
265
|
+
if (day < 10) {
|
266
|
+
day = `0${day}`;
|
267
|
+
}
|
268
|
+
if (hours < 10) {
|
269
|
+
hours = `0${hours}`;
|
270
|
+
}
|
271
|
+
if (minutes < 10) {
|
272
|
+
minutes = `0${minutes}`;
|
273
|
+
}
|
274
|
+
return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
|
423
275
|
}
|
424
276
|
}
|
425
277
|
|
@@ -432,31 +284,27 @@ var c = (function () {
|
|
432
284
|
}
|
433
285
|
}
|
434
286
|
|
435
|
-
class TextArea {
|
287
|
+
class TextArea extends Base {
|
436
288
|
constructor(state, attribute, attributes = {}) {
|
437
|
-
|
438
|
-
this.attributes = attributes;
|
289
|
+
super(attributes);
|
439
290
|
this.attribute = attribute;
|
291
|
+
this.state = state;
|
440
292
|
this.attributes["data-attribute"] = attribute;
|
441
293
|
}
|
442
294
|
get renderWrapper() {
|
443
295
|
return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
|
444
296
|
}
|
445
|
-
add_action(event, klass, fn, options = {}) {
|
446
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
447
|
-
return this;
|
448
|
-
}
|
449
297
|
}
|
450
298
|
|
451
299
|
const Clapton = {
|
452
|
-
|
300
|
+
Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
|
453
301
|
};
|
454
302
|
|
455
|
-
const
|
303
|
+
const blockquote = (...props) => {
|
456
304
|
return new Clapton.BlockQuote(...props);
|
457
305
|
};
|
458
|
-
const
|
459
|
-
return new Clapton.
|
306
|
+
const div = (...props) => {
|
307
|
+
return new Clapton.Div(...props);
|
460
308
|
};
|
461
309
|
const b = (...props) => {
|
462
310
|
return new Clapton.Bold(...props);
|
@@ -464,15 +312,9 @@ var c = (function () {
|
|
464
312
|
const button = (...props) => {
|
465
313
|
return new Clapton.Button(...props);
|
466
314
|
};
|
467
|
-
const check = (...props) => {
|
468
|
-
return new Clapton.Checkbox(props[0], props[1], props[2]);
|
469
|
-
};
|
470
315
|
const code = (...props) => {
|
471
316
|
return new Clapton.Code(...props);
|
472
317
|
};
|
473
|
-
const datetime = (...props) => {
|
474
|
-
return new Clapton.DateTimeField(props[0], props[1], props[2]);
|
475
|
-
};
|
476
318
|
const el = (...props) => {
|
477
319
|
return new Clapton.Element(props[0], props[1]);
|
478
320
|
};
|
@@ -485,14 +327,29 @@ var c = (function () {
|
|
485
327
|
const form = (...props) => {
|
486
328
|
return new Clapton.Form(...props);
|
487
329
|
};
|
488
|
-
const
|
489
|
-
return new Clapton.Heading(
|
330
|
+
const h1 = (...props) => {
|
331
|
+
return new Clapton.Heading(1, props[1]);
|
332
|
+
};
|
333
|
+
const h2 = (...props) => {
|
334
|
+
return new Clapton.Heading(2, props[1]);
|
335
|
+
};
|
336
|
+
const h3 = (...props) => {
|
337
|
+
return new Clapton.Heading(3, props[1]);
|
338
|
+
};
|
339
|
+
const h4 = (...props) => {
|
340
|
+
return new Clapton.Heading(4, props[1]);
|
341
|
+
};
|
342
|
+
const h5 = (...props) => {
|
343
|
+
return new Clapton.Heading(5, props[1]);
|
344
|
+
};
|
345
|
+
const h6 = (...props) => {
|
346
|
+
return new Clapton.Heading(6, props[1]);
|
490
347
|
};
|
491
348
|
const img = (...props) => {
|
492
|
-
return new Clapton.Image(props[0]
|
349
|
+
return new Clapton.Image(props[0]);
|
493
350
|
};
|
494
351
|
const a = (...props) => {
|
495
|
-
return new Clapton.Link(props[0]
|
352
|
+
return new Clapton.Link(props[0]);
|
496
353
|
};
|
497
354
|
const li = (...props) => {
|
498
355
|
return new Clapton.ListItem(...props);
|
@@ -509,9 +366,6 @@ var c = (function () {
|
|
509
366
|
const q = (...props) => {
|
510
367
|
return new Clapton.Quote(...props);
|
511
368
|
};
|
512
|
-
const radio = (...props) => {
|
513
|
-
return new Clapton.RadioButton(props[0], props[1], props[2]);
|
514
|
-
};
|
515
369
|
const select = (...props) => {
|
516
370
|
return new Clapton.Select(props[0], props[1], props[2]);
|
517
371
|
};
|
@@ -522,27 +376,23 @@ var c = (function () {
|
|
522
376
|
return new Clapton.TextArea(props[0], props[1], props[2]);
|
523
377
|
};
|
524
378
|
const input = (...props) => {
|
525
|
-
return new Clapton.
|
379
|
+
return new Clapton.Input(props[0], props[1], props[2]);
|
526
380
|
};
|
527
381
|
const text = (...props) => {
|
528
382
|
return new Clapton.Text(props[0]);
|
529
383
|
};
|
530
384
|
const c = (name, ...props) => {
|
531
385
|
switch (name) {
|
532
|
-
case "
|
533
|
-
return
|
534
|
-
case "
|
535
|
-
return
|
386
|
+
case "blockquote":
|
387
|
+
return blockquote(...props);
|
388
|
+
case "div":
|
389
|
+
return div(...props);
|
536
390
|
case "b":
|
537
391
|
return b(...props);
|
538
392
|
case "button":
|
539
393
|
return button(...props);
|
540
|
-
case "check":
|
541
|
-
return check(...props);
|
542
394
|
case "code":
|
543
395
|
return code(...props);
|
544
|
-
case "datetime":
|
545
|
-
return datetime(...props);
|
546
396
|
case "el":
|
547
397
|
return el(...props);
|
548
398
|
case "embed":
|
@@ -551,8 +401,18 @@ var c = (function () {
|
|
551
401
|
return em(...props);
|
552
402
|
case "form":
|
553
403
|
return form(...props);
|
554
|
-
case "
|
555
|
-
return
|
404
|
+
case "h1":
|
405
|
+
return h1(...props);
|
406
|
+
case "h2":
|
407
|
+
return h2(...props);
|
408
|
+
case "h3":
|
409
|
+
return h3(...props);
|
410
|
+
case "h4":
|
411
|
+
return h4(...props);
|
412
|
+
case "h5":
|
413
|
+
return h5(...props);
|
414
|
+
case "h6":
|
415
|
+
return h6(...props);
|
556
416
|
case "img":
|
557
417
|
return img(...props);
|
558
418
|
case "a":
|
@@ -567,8 +427,6 @@ var c = (function () {
|
|
567
427
|
return p(...props);
|
568
428
|
case "q":
|
569
429
|
return q(...props);
|
570
|
-
case "radio":
|
571
|
-
return radio(...props);
|
572
430
|
case "select":
|
573
431
|
return select(...props);
|
574
432
|
case "span":
|
@@ -580,7 +438,7 @@ var c = (function () {
|
|
580
438
|
case "text":
|
581
439
|
return text(...props);
|
582
440
|
default:
|
583
|
-
return new Clapton.
|
441
|
+
return new Clapton.Element(name, ...props);
|
584
442
|
}
|
585
443
|
};
|
586
444
|
|