clapton 0.0.4 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 178f8993e43a14b0d6044504949c36638ede05556f9c40e1ab46fec5f3e8d733
-  data.tar.gz: 640859ec516b79222eef4f0e98bbc35c3f576cae880afcd93fb4cd502a429a92
+  metadata.gz: 3ce2ec441c0e14b8a234cdb853bc55619bc4dc082f6b9a2fb790afef8348eaf0
+  data.tar.gz: 0c26377b8f1a160a87ce90ee12de22c11a59b49caffc4256765c4c7e79172897
 SHA512:
-  metadata.gz: 858a1110f40a65fae2efa4fb8d7e8500eb8304990176d800ed1a035124b3a6e725a15ff1f06ed7506b7ee3bd570c539adb543da998b0b5972116bed32802336e
-  data.tar.gz: bc244d6cb47e775c9f0a090d8f150903a25ff0ef52b1144fccbb06209763f86828ebefe6d37d951d54f7900148253c51280c8b722610643d7e69f8e6880bf0b3
+  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/javascripts/src/components.ts

@@ -1,9 +1,25 @@
+import { BlockQuote } from "./components/block-quote"
 import { Box } from "./components/box"
-import { Component } from "./components/component"
-import { Text } from "./components/text"
-import { TextField } from "./components/text-field"
-import { Link } from "./components/link"
 import { Button } from "./components/button"
+import { Checkbox } from "./components/checkbox"
+import { Code } from "./components/code"
 import { DateTimeField } from "./components/datetime-field"
+import { Element } from "./components/element"
+import { Emphasis } from "./components/emphasis"
+import { Form } from "./components/form"
+import { Heading } from "./components/heading"
+import { Image } from "./components/image"
+import { Link } from "./components/link"
+import { ListItem } from "./components/list-item"
+import { List } from "./components/list"
+import { OrderedList } from "./components/ordered-list"
+import { Paragraph } from "./components/paragraph"
+import { Quote } from "./components/quote"
+import { RadioButton } from "./components/radio-button"
+import { Select } from "./components/select"
+import { Span } from "./components/span"
+import { Component } from "./components/component"
+import { TextField } from "./components/text-field"
+import { Text } from "./components/text"
 
-export { Box, Component, Text, TextField, Link, Button, DateTimeField };
+export { Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span };

data/lib/clapton/version.rb

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

metadata

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