clapton 0.0.5 → 0.0.6
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/lib/clapton/javascripts/dist/components.js +281 -37
- data/lib/clapton/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3ce2ec441c0e14b8a234cdb853bc55619bc4dc082f6b9a2fb790afef8348eaf0
|
4
|
+
data.tar.gz: 0c26377b8f1a160a87ce90ee12de22c11a59b49caffc4256765c4c7e79172897
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 36664ec11be13ad14254e1fcd0b71181f670f5e6dabcb1a9a2aa58cd9ca06d8edb76a0d63783c5da9c0db56a7dbda8d302438a9db5e3b6b2c57d9b4b633a0bf1
|
7
|
+
data.tar.gz: f6ab3acf8c0dc683ad42088013cd1e6394892a658a86c176e86a0f92eda88aeca8d9d0db3042c37d7e5d8fa2d8296097bc39a7fa5c8bbc0e15cb352e70c493ff
|
@@ -43,42 +43,53 @@ var Clapton = (function (exports) {
|
|
43
43
|
.replace(/'/g, "'");
|
44
44
|
};
|
45
45
|
|
46
|
-
class
|
46
|
+
class BlockQuote {
|
47
47
|
constructor(attributes = {}) {
|
48
48
|
this.children = [];
|
49
49
|
this.attributes = attributes;
|
50
50
|
}
|
51
|
+
get render() {
|
52
|
+
return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
|
53
|
+
}
|
51
54
|
add(child) {
|
52
55
|
this.children.push(child);
|
53
56
|
return this;
|
54
57
|
}
|
55
|
-
get render() {
|
56
|
-
return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
|
57
|
-
}
|
58
58
|
}
|
59
59
|
|
60
|
-
class
|
61
|
-
constructor(
|
62
|
-
this.
|
63
|
-
this.
|
64
|
-
|
65
|
-
|
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;
|
66
68
|
}
|
67
69
|
get render() {
|
68
|
-
return this.
|
70
|
+
return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
|
69
71
|
}
|
70
72
|
}
|
71
73
|
|
72
|
-
class
|
73
|
-
constructor(
|
74
|
-
this.
|
74
|
+
class Button {
|
75
|
+
constructor(attributes = {}) {
|
76
|
+
this.attributes = attributes;
|
77
|
+
this.children = [];
|
78
|
+
}
|
79
|
+
add(child) {
|
80
|
+
this.children.push(child);
|
81
|
+
return this;
|
75
82
|
}
|
76
83
|
get render() {
|
77
|
-
return this.
|
84
|
+
return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
|
85
|
+
}
|
86
|
+
add_action(event, klass, fn, options = {}) {
|
87
|
+
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
88
|
+
return this;
|
78
89
|
}
|
79
90
|
}
|
80
91
|
|
81
|
-
class
|
92
|
+
class Checkbox {
|
82
93
|
constructor(state, attribute, attributes = {}) {
|
83
94
|
this.state = state;
|
84
95
|
this.attributes = attributes;
|
@@ -86,7 +97,7 @@ var Clapton = (function (exports) {
|
|
86
97
|
this.attributes["data-attribute"] = attribute;
|
87
98
|
}
|
88
99
|
get render() {
|
89
|
-
return `<input type='
|
100
|
+
return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
|
90
101
|
}
|
91
102
|
add_action(event, klass, fn, options = {}) {
|
92
103
|
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
@@ -94,36 +105,18 @@ var Clapton = (function (exports) {
|
|
94
105
|
}
|
95
106
|
}
|
96
107
|
|
97
|
-
class
|
108
|
+
class Code {
|
98
109
|
constructor(attributes = {}) {
|
99
110
|
this.children = [];
|
100
111
|
this.attributes = attributes;
|
101
112
|
}
|
102
113
|
get render() {
|
103
|
-
return `<
|
104
|
-
}
|
105
|
-
add(child) {
|
106
|
-
this.children.push(child);
|
107
|
-
return this;
|
108
|
-
}
|
109
|
-
}
|
110
|
-
|
111
|
-
class Button {
|
112
|
-
constructor(attributes = {}) {
|
113
|
-
this.attributes = attributes;
|
114
|
-
this.children = [];
|
114
|
+
return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
|
115
115
|
}
|
116
116
|
add(child) {
|
117
117
|
this.children.push(child);
|
118
118
|
return this;
|
119
119
|
}
|
120
|
-
get render() {
|
121
|
-
return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
|
122
|
-
}
|
123
|
-
add_action(event, klass, fn, options = {}) {
|
124
|
-
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
125
|
-
return this;
|
126
|
-
}
|
127
120
|
}
|
128
121
|
|
129
122
|
class DateTimeField {
|
@@ -168,11 +161,262 @@ var Clapton = (function (exports) {
|
|
168
161
|
}
|
169
162
|
}
|
170
163
|
|
164
|
+
class Element {
|
165
|
+
constructor(type, attributes = {}) {
|
166
|
+
this.children = [];
|
167
|
+
this.type = type;
|
168
|
+
this.attributes = attributes;
|
169
|
+
}
|
170
|
+
get render() {
|
171
|
+
return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
|
172
|
+
}
|
173
|
+
add(child) {
|
174
|
+
this.children.push(child);
|
175
|
+
return this;
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
class Emphasis {
|
180
|
+
constructor(attributes = {}) {
|
181
|
+
this.children = [];
|
182
|
+
this.attributes = attributes;
|
183
|
+
}
|
184
|
+
get render() {
|
185
|
+
return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
|
186
|
+
}
|
187
|
+
add(child) {
|
188
|
+
this.children.push(child);
|
189
|
+
return this;
|
190
|
+
}
|
191
|
+
}
|
192
|
+
|
193
|
+
class Form {
|
194
|
+
constructor(attributes = {}) {
|
195
|
+
this.children = [];
|
196
|
+
this.attributes = attributes;
|
197
|
+
}
|
198
|
+
get render() {
|
199
|
+
return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
|
200
|
+
}
|
201
|
+
add(child) {
|
202
|
+
this.children.push(child);
|
203
|
+
return this;
|
204
|
+
}
|
205
|
+
}
|
206
|
+
|
207
|
+
class Heading {
|
208
|
+
constructor(level, attributes = {}) {
|
209
|
+
this.children = [];
|
210
|
+
this.level = level;
|
211
|
+
this.attributes = attributes;
|
212
|
+
}
|
213
|
+
get render() {
|
214
|
+
return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
|
215
|
+
}
|
216
|
+
add(child) {
|
217
|
+
this.children.push(child);
|
218
|
+
return this;
|
219
|
+
}
|
220
|
+
}
|
221
|
+
|
222
|
+
class Image {
|
223
|
+
constructor(src, alt, attributes = {}) {
|
224
|
+
this.children = [];
|
225
|
+
this.attributes = attributes;
|
226
|
+
this.src = src;
|
227
|
+
this.alt = alt;
|
228
|
+
}
|
229
|
+
get render() {
|
230
|
+
return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
|
231
|
+
}
|
232
|
+
}
|
233
|
+
|
234
|
+
class Link {
|
235
|
+
constructor(href, attributes = {}) {
|
236
|
+
this.children = [];
|
237
|
+
this.attributes = attributes;
|
238
|
+
this.href = href;
|
239
|
+
}
|
240
|
+
get render() {
|
241
|
+
return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
|
242
|
+
}
|
243
|
+
add(child) {
|
244
|
+
this.children.push(child);
|
245
|
+
return this;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
|
249
|
+
class ListItem {
|
250
|
+
constructor(attributes = {}) {
|
251
|
+
this.children = [];
|
252
|
+
this.attributes = attributes;
|
253
|
+
}
|
254
|
+
add(child) {
|
255
|
+
this.children.push(child);
|
256
|
+
return this;
|
257
|
+
}
|
258
|
+
get render() {
|
259
|
+
return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
|
260
|
+
}
|
261
|
+
}
|
262
|
+
|
263
|
+
class List {
|
264
|
+
constructor(attributes = {}) {
|
265
|
+
this.children = [];
|
266
|
+
this.attributes = attributes;
|
267
|
+
}
|
268
|
+
add(child) {
|
269
|
+
this.children.push(child);
|
270
|
+
return this;
|
271
|
+
}
|
272
|
+
get render() {
|
273
|
+
return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
|
274
|
+
}
|
275
|
+
}
|
276
|
+
|
277
|
+
class OrderedList {
|
278
|
+
constructor(attributes = {}) {
|
279
|
+
this.children = [];
|
280
|
+
this.attributes = attributes;
|
281
|
+
}
|
282
|
+
add(child) {
|
283
|
+
this.children.push(child);
|
284
|
+
return this;
|
285
|
+
}
|
286
|
+
get render() {
|
287
|
+
return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
|
288
|
+
}
|
289
|
+
}
|
290
|
+
|
291
|
+
class Paragraph {
|
292
|
+
constructor(attributes = {}) {
|
293
|
+
this.children = [];
|
294
|
+
this.attributes = attributes;
|
295
|
+
}
|
296
|
+
get render() {
|
297
|
+
return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
|
298
|
+
}
|
299
|
+
add(child) {
|
300
|
+
this.children.push(child);
|
301
|
+
return this;
|
302
|
+
}
|
303
|
+
}
|
304
|
+
|
305
|
+
class Quote {
|
306
|
+
constructor(attributes = {}) {
|
307
|
+
this.children = [];
|
308
|
+
this.attributes = attributes;
|
309
|
+
}
|
310
|
+
get render() {
|
311
|
+
return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
|
312
|
+
}
|
313
|
+
add(child) {
|
314
|
+
this.children.push(child);
|
315
|
+
return this;
|
316
|
+
}
|
317
|
+
}
|
318
|
+
|
319
|
+
class RadioButton {
|
320
|
+
constructor(state, attribute, attributes = {}) {
|
321
|
+
this.state = state;
|
322
|
+
this.attributes = attributes;
|
323
|
+
this.attribute = attribute;
|
324
|
+
this.attributes["data-attribute"] = attribute;
|
325
|
+
}
|
326
|
+
get render() {
|
327
|
+
return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
|
328
|
+
}
|
329
|
+
add_action(event, klass, fn, options = {}) {
|
330
|
+
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
331
|
+
return this;
|
332
|
+
}
|
333
|
+
}
|
334
|
+
|
335
|
+
class Select {
|
336
|
+
constructor(options = [], state, attribute, attributes = {}) {
|
337
|
+
this.children = [];
|
338
|
+
this.options = options;
|
339
|
+
this.state = state;
|
340
|
+
this.attribute = attribute;
|
341
|
+
this.attributes = attributes;
|
342
|
+
}
|
343
|
+
get render() {
|
344
|
+
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.render).join("")}</select>`;
|
345
|
+
}
|
346
|
+
}
|
347
|
+
|
348
|
+
class Span {
|
349
|
+
constructor(attributes = {}) {
|
350
|
+
this.children = [];
|
351
|
+
this.attributes = attributes;
|
352
|
+
}
|
353
|
+
get render() {
|
354
|
+
return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
|
355
|
+
}
|
356
|
+
add(child) {
|
357
|
+
this.children.push(child);
|
358
|
+
return this;
|
359
|
+
}
|
360
|
+
}
|
361
|
+
|
362
|
+
class Component {
|
363
|
+
constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
|
364
|
+
this._state = state;
|
365
|
+
this.id = id;
|
366
|
+
this._errors = errors;
|
367
|
+
this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
|
368
|
+
}
|
369
|
+
get render() {
|
370
|
+
return this._root.render;
|
371
|
+
}
|
372
|
+
}
|
373
|
+
|
374
|
+
class TextField {
|
375
|
+
constructor(state, attribute, attributes = {}) {
|
376
|
+
this.state = state;
|
377
|
+
this.attributes = attributes;
|
378
|
+
this.attribute = attribute;
|
379
|
+
this.attributes["data-attribute"] = attribute;
|
380
|
+
}
|
381
|
+
get render() {
|
382
|
+
return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
|
383
|
+
}
|
384
|
+
add_action(event, klass, fn, options = {}) {
|
385
|
+
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
|
386
|
+
return this;
|
387
|
+
}
|
388
|
+
}
|
389
|
+
|
390
|
+
class Text {
|
391
|
+
constructor(value) {
|
392
|
+
this.value = value;
|
393
|
+
}
|
394
|
+
get render() {
|
395
|
+
return this.value;
|
396
|
+
}
|
397
|
+
}
|
398
|
+
|
399
|
+
exports.BlockQuote = BlockQuote;
|
171
400
|
exports.Box = Box;
|
172
401
|
exports.Button = Button;
|
402
|
+
exports.Checkbox = Checkbox;
|
403
|
+
exports.Code = Code;
|
173
404
|
exports.Component = Component;
|
174
405
|
exports.DateTimeField = DateTimeField;
|
406
|
+
exports.Element = Element;
|
407
|
+
exports.Emphasis = Emphasis;
|
408
|
+
exports.Form = Form;
|
409
|
+
exports.Heading = Heading;
|
410
|
+
exports.Image = Image;
|
175
411
|
exports.Link = Link;
|
412
|
+
exports.List = List;
|
413
|
+
exports.ListItem = ListItem;
|
414
|
+
exports.OrderedList = OrderedList;
|
415
|
+
exports.Paragraph = Paragraph;
|
416
|
+
exports.Quote = Quote;
|
417
|
+
exports.RadioButton = RadioButton;
|
418
|
+
exports.Select = Select;
|
419
|
+
exports.Span = Span;
|
176
420
|
exports.Text = Text;
|
177
421
|
exports.TextField = TextField;
|
178
422
|
|
data/lib/clapton/version.rb
CHANGED