clapton 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ced6ec2a5091225623d714847395bbbe1a5aa58d8b655b8fd9ba427a3cad253a
-  data.tar.gz: 15d4b56faaa648195800818fae39753ebbf66b18551042397217f9913ffbdb7a
+  metadata.gz: 3ce2ec441c0e14b8a234cdb853bc55619bc4dc082f6b9a2fb790afef8348eaf0
+  data.tar.gz: 0c26377b8f1a160a87ce90ee12de22c11a59b49caffc4256765c4c7e79172897
 SHA512:
-  metadata.gz: 94e5dd398e4264ef1a8a4429fb34dbb9bfc80abf3e162712cf6fea236f0991209bbfc04e19a550590e0af739ccef393e1325bc19a0c1daa04b697d12b77436cd
-  data.tar.gz: faea93854fc326fa2933df5a191cc079296c751153a88cd5d93432db8cb4d0671d5c8a18a0b13534437f760996dfe1a2200162e3c3ce618389ef7a8c28075992
+  metadata.gz: 36664ec11be13ad14254e1fcd0b71181f670f5e6dabcb1a9a2aa58cd9ca06d8edb76a0d63783c5da9c0db56a7dbda8d302438a9db5e3b6b2c57d9b4b633a0bf1
+  data.tar.gz: f6ab3acf8c0dc683ad42088013cd1e6394892a658a86c176e86a0f92eda88aeca8d9d0db3042c37d7e5d8fa2d8296097bc39a7fa5c8bbc0e15cb352e70c493ff

data/lib/clapton/javascripts/dist/components.js

@@ -43,42 +43,53 @@ var Clapton = (function (exports) {
             .replace(/'/g, "'");
     };
 
-    class Box {
+    class BlockQuote {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
+        get render() {
+            return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+        }
         add(child) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
-        }
     }
 
-    class Component {
-        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
-            this._state = state;
-            this.id = id;
-            this._errors = errors;
-            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
+    class Box {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
         }
         get render() {
-            return this._root.render;
+            return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
         }
     }
 
-    class Text {
-        constructor(value) {
-            this.value = value;
+    class Button {
+        constructor(attributes = {}) {
+            this.attributes = attributes;
+            this.children = [];
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
         }
         get render() {
-            return this.value;
+            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
         }
     }
 
-    class TextField {
+    class Checkbox {
         constructor(state, attribute, attributes = {}) {
             this.state = state;
             this.attributes = attributes;
@@ -86,7 +97,7 @@ var Clapton = (function (exports) {
             this.attributes["data-attribute"] = attribute;
         }
         get render() {
-            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+            return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
         }
         add_action(event, klass, fn, options = {}) {
             this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
@@ -94,36 +105,18 @@ var Clapton = (function (exports) {
         }
     }
 
-    class Link {
+    class Code {
         constructor(attributes = {}) {
             this.children = [];
             this.attributes = attributes;
         }
         get render() {
-            return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
-        }
-        add(child) {
-            this.children.push(child);
-            return this;
-        }
-    }
-
-    class Button {
-        constructor(attributes = {}) {
-            this.attributes = attributes;
-            this.children = [];
+            return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
         }
         add(child) {
             this.children.push(child);
             return this;
         }
-        get render() {
-            return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
-        }
-        add_action(event, klass, fn, options = {}) {
-            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-            return this;
-        }
     }
 
     class DateTimeField {
@@ -168,11 +161,262 @@ var Clapton = (function (exports) {
         }
     }
 
+    class Element {
+        constructor(type, attributes = {}) {
+            this.children = [];
+            this.type = type;
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Emphasis {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Form {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Heading {
+        constructor(level, attributes = {}) {
+            this.children = [];
+            this.level = level;
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Image {
+        constructor(src, alt, attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+            this.src = src;
+            this.alt = alt;
+        }
+        get render() {
+            return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+        }
+    }
+
+    class Link {
+        constructor(href, attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+            this.href = href;
+        }
+        get render() {
+            return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class ListItem {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+        }
+    }
+
+    class List {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
+        }
+    }
+
+    class OrderedList {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+        get render() {
+            return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
+        }
+    }
+
+    class Paragraph {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Quote {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class RadioButton {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Select {
+        constructor(options = [], state, attribute, attributes = {}) {
+            this.children = [];
+            this.options = options;
+            this.state = state;
+            this.attribute = attribute;
+            this.attributes = attributes;
+        }
+        get render() {
+            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>`;
+        }
+    }
+
+    class Span {
+        constructor(attributes = {}) {
+            this.children = [];
+            this.attributes = attributes;
+        }
+        get render() {
+            return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
+        }
+        add(child) {
+            this.children.push(child);
+            return this;
+        }
+    }
+
+    class Component {
+        constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
+            this._state = state;
+            this.id = id;
+            this._errors = errors;
+            this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
+        }
+        get render() {
+            return this._root.render;
+        }
+    }
+
+    class TextField {
+        constructor(state, attribute, attributes = {}) {
+            this.state = state;
+            this.attributes = attributes;
+            this.attribute = attribute;
+            this.attributes["data-attribute"] = attribute;
+        }
+        get render() {
+            return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        }
+        add_action(event, klass, fn, options = {}) {
+            this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+            return this;
+        }
+    }
+
+    class Text {
+        constructor(value) {
+            this.value = value;
+        }
+        get render() {
+            return this.value;
+        }
+    }
+
+    exports.BlockQuote = BlockQuote;
     exports.Box = Box;
     exports.Button = Button;
+    exports.Checkbox = Checkbox;
+    exports.Code = Code;
     exports.Component = Component;
     exports.DateTimeField = DateTimeField;
+    exports.Element = Element;
+    exports.Emphasis = Emphasis;
+    exports.Form = Form;
+    exports.Heading = Heading;
+    exports.Image = Image;
     exports.Link = Link;
+    exports.List = List;
+    exports.ListItem = ListItem;
+    exports.OrderedList = OrderedList;
+    exports.Paragraph = Paragraph;
+    exports.Quote = Quote;
+    exports.RadioButton = RadioButton;
+    exports.Select = Select;
+    exports.Span = Span;
     exports.Text = Text;
     exports.TextField = TextField;
 

data/lib/clapton/version.rb

@@ -1,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.5'
+  VERSION = '0.0.6'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Moeki Kawakami