clapton 0.0.24 → 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.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -113
  3. data/lib/clapton/javascripts/dist/c-for-test.js +108 -271
  4. data/lib/clapton/javascripts/dist/c.js +108 -271
  5. data/lib/clapton/javascripts/dist/components-for-test.js +69 -245
  6. data/lib/clapton/javascripts/dist/components.js +68 -241
  7. data/lib/clapton/javascripts/src/c-base.ts +45 -33
  8. data/lib/clapton/javascripts/src/components/{box.ts → base.ts} +6 -8
  9. data/lib/clapton/javascripts/src/components/block-quote.spec.ts +1 -1
  10. data/lib/clapton/javascripts/src/components/block-quote.ts +2 -14
  11. data/lib/clapton/javascripts/src/components/bold.ts +2 -14
  12. data/lib/clapton/javascripts/src/components/button.ts +2 -19
  13. data/lib/clapton/javascripts/src/components/code.ts +2 -14
  14. data/lib/clapton/javascripts/src/components/component.ts +2 -2
  15. data/lib/clapton/javascripts/src/components/{box.spec.ts → div.spec.ts} +8 -8
  16. data/lib/clapton/javascripts/src/components/div.ts +8 -0
  17. data/lib/clapton/javascripts/src/components/element.ts +3 -9
  18. data/lib/clapton/javascripts/src/components/emphasis.ts +2 -14
  19. data/lib/clapton/javascripts/src/components/form.ts +2 -14
  20. data/lib/clapton/javascripts/src/components/heading.ts +4 -10
  21. data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
  22. data/lib/clapton/javascripts/src/components/image.ts +3 -14
  23. data/lib/clapton/javascripts/src/components/input.spec.ts +16 -0
  24. data/lib/clapton/javascripts/src/components/{datetime-field.ts → input.ts} +9 -11
  25. data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
  26. data/lib/clapton/javascripts/src/components/link.ts +3 -16
  27. data/lib/clapton/javascripts/src/components/list-item.ts +2 -14
  28. data/lib/clapton/javascripts/src/components/list.ts +2 -14
  29. data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -14
  30. data/lib/clapton/javascripts/src/components/paragraph.ts +2 -14
  31. data/lib/clapton/javascripts/src/components/quote.ts +2 -14
  32. data/lib/clapton/javascripts/src/components/select.ts +3 -5
  33. data/lib/clapton/javascripts/src/components/span.ts +2 -14
  34. data/lib/clapton/javascripts/src/components/text-area.ts +4 -9
  35. data/lib/clapton/javascripts/src/components-for-test.ts +3 -6
  36. data/lib/clapton/javascripts/src/components.ts +3 -6
  37. data/lib/clapton/test_helper/base.rb +4 -4
  38. data/lib/clapton/version.rb +1 -1
  39. metadata +7 -14
  40. data/lib/clapton/javascripts/dist/c +0 -559
  41. data/lib/clapton/javascripts/dist/c-base.js +0 -589
  42. data/lib/clapton/javascripts/src/components/checkbox.spec.ts +0 -16
  43. data/lib/clapton/javascripts/src/components/checkbox.ts +0 -23
  44. data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +0 -16
  45. data/lib/clapton/javascripts/src/components/radio-button.spec.ts +0 -16
  46. data/lib/clapton/javascripts/src/components/radio-button.ts +0 -23
  47. data/lib/clapton/javascripts/src/components/text-field.spec.ts +0 -16
  48. data/lib/clapton/javascripts/src/components/text-field.ts +0 -23
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Bold {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Bold extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
14
7
  }
15
-
16
- add(child: any): Bold {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,25 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Button {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.attributes = attributes;
9
- this.children = [];
10
- }
11
-
12
- add(child: any): Button {
13
- this.children.push(child);
14
- return this;
15
- }
16
-
4
+ export class Button extends Base {
17
5
  get renderWrapper(): string {
18
6
  return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
19
7
  }
20
-
21
- add_action(event: string, klass: string, fn: string, options: Record<string, any> = {}): Button {
22
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
23
- return this;
24
- }
25
8
  }
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Code {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Code extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
14
7
  }
15
-
16
- add(child: any): Code {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,4 +1,4 @@
1
- import { Box } from "./box";
1
+ import { Div } from "./div";
2
2
 
3
3
  export class Component {
4
4
  id: string;
@@ -14,7 +14,7 @@ export class Component {
14
14
  }
15
15
 
16
16
  get render(): any {
17
- return new Box({});
17
+ return new Div({});
18
18
  }
19
19
 
20
20
  get renderWrapper(): string {
@@ -1,23 +1,23 @@
1
1
  import { describe, it, expect } from "vitest"
2
- import { Box } from "./box"
2
+ import { Div } from "./div"
3
3
  import { Text } from "./text"
4
4
 
5
- describe("Box", () => {
5
+ describe("Div", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Box().renderWrapper).toBe("<div ></div>")
7
+ expect(new Div().renderWrapper).toBe("<div ></div>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Box({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
11
+ expect(new Div({ id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Box({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
16
- expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
17
- expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
15
+ expect(new Div({ id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<div id='1' data-foo='bar'></div>`)
16
+ expect(new Div({ id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<div id='1' data-foo='bar' data-baz='qux'></div>`)
17
+ expect(new Div({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<div id='1' data-foo-baz='qux' data-foo-quux='corge'></div>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
- expect(new Box().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
21
+ expect(new Div().add(new Text("Hello, world!")).renderWrapper).toBe(`<div >Hello, world!</div>`)
22
22
  })
23
23
  })
@@ -0,0 +1,8 @@
1
+ import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
3
+
4
+ export class Div extends Base {
5
+ get renderWrapper(): string {
6
+ return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
7
+ }
8
+ }
@@ -1,22 +1,16 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Element {
4
- attributes: Record<string, any>;
5
- children: any[];
4
+ export class Element extends Base {
6
5
  type: string;
7
6
 
8
7
  constructor(type: string, attributes: Record<string, any> = {}) {
8
+ super(attributes)
9
9
  this.children = [];
10
10
  this.type = type;
11
- this.attributes = attributes;
12
11
  }
13
12
 
14
13
  get renderWrapper(): string {
15
14
  return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
16
15
  }
17
-
18
- add(child: any): Element {
19
- this.children.push(child);
20
- return this;
21
- }
22
16
  }
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Emphasis {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Emphasis extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
14
7
  }
15
-
16
- add(child: any): Emphasis {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Form {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Form extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
14
7
  }
15
-
16
- add(child: any): Form {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,21 +1,15 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Heading {
4
- attributes: Record<string, any>;
5
- children: any[];
4
+ export class Heading extends Base {
6
5
  level: number;
6
+
7
7
  constructor(level: number, attributes: Record<string, any> = {}) {
8
- this.children = [];
8
+ super(attributes)
9
9
  this.level = level;
10
- this.attributes = attributes;
11
10
  }
12
11
 
13
12
  get renderWrapper(): string {
14
13
  return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
15
14
  }
16
-
17
- add(child: any): Heading {
18
- this.children.push(child);
19
- return this;
20
- }
21
15
  }
@@ -3,10 +3,10 @@ import { Image } from "./image"
3
3
 
4
4
  describe("Image", () => {
5
5
  it("returns empty string if no params", () => {
6
- expect(new Image("https://example.com/image.png", "").renderWrapper).toBe("<img src='https://example.com/image.png' alt='' />")
6
+ expect(new Image({ src: "https://example.com/image.png", alt: "" }).renderWrapper).toBe("<img src='https://example.com/image.png' alt=''/>")
7
7
  })
8
8
 
9
9
  it("returns attributes and data attributes", () => {
10
- expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
10
+ expect(new Image({ src: "https://example.com/image.png", alt: "test", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<img src='https://example.com/image.png' alt='test' id='1' data-foo='bar'/>`)
11
11
  })
12
12
  })
@@ -1,19 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Image {
4
- attributes: Record<string, any>;
5
- children: any[];
6
- src: string;
7
- alt: string;
8
-
9
- constructor(src: string, alt: string, attributes: Record<string, any> = {}) {
10
- this.children = [];
11
- this.attributes = attributes;
12
- this.src = src;
13
- this.alt = alt;
14
- }
15
-
4
+ export class Image extends Base {
16
5
  get renderWrapper(): string {
17
- return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
6
+ return `<img ${htmlAttributes(this.attributes)}/>`;
18
7
  }
19
8
  }
@@ -0,0 +1,16 @@
1
+ import { describe, it, expect } from "vitest"
2
+ import { Input } from "./input"
3
+
4
+ describe("Input", () => {
5
+ it("returns empty string if no params", () => {
6
+ expect(new Input({}, "foo", { type: "text" }).renderWrapper).toBe("<input type='text' data-attribute='foo' value=''/>")
7
+ })
8
+
9
+ it("returns attributes and data attributes", () => {
10
+ expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", "data-foo": "bar" }).renderWrapper).toBe(`<input type='text' id='1' data-foo='bar' data-attribute='foo' value='bar'/>`)
11
+ })
12
+
13
+ it("returns attributes and data attributes with custom data attributes", () => {
14
+ expect(new Input({ foo: "bar" }, "foo", { type: "text", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<input type='text' id='1' data-attribute='foo' data-foo-baz='qux' data-foo-quux='corge' value='bar'/>`)
15
+ })
16
+ })
@@ -1,25 +1,23 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class DateTimeField {
4
+ export class Input extends Base {
4
5
  state: any;
5
6
  attribute: string;
6
- attributes: Record<string, any> = {};
7
7
 
8
8
  constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
9
- this.state = state;
9
+ super(attributes)
10
10
  this.attribute = attribute;
11
- this.attributes = attributes;
11
+ this.state = state
12
12
  this.attributes["data-attribute"] = attribute;
13
13
  }
14
14
 
15
15
  get renderWrapper(): string {
16
- const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
17
- return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
18
- }
19
-
20
- add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): DateTimeField {
21
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
22
- return this;
16
+ let value = this.state[this.attribute]
17
+ if (this.attributes.type === "datetime-local" && value) {
18
+ value = this.datetime_local_value(value)
19
+ }
20
+ return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
23
21
  }
24
22
 
25
23
  datetime_local_value(value: string): string {
@@ -4,20 +4,20 @@ import { Text } from "./text"
4
4
 
5
5
  describe("Link", () => {
6
6
  it("returns empty string if no params", () => {
7
- expect(new Link("").renderWrapper).toBe("<a href='' ></a>")
7
+ expect(new Link({ href: "" }).renderWrapper).toBe("<a href=''></a>")
8
8
  })
9
9
 
10
10
  it("returns attributes and data attributes", () => {
11
- expect(new Link("#").add(new Text("")).renderWrapper).toBe(`<a href='#' ></a>`)
11
+ expect(new Link({ href: "#" }).add(new Text("")).renderWrapper).toBe(`<a href='#'></a>`)
12
12
  })
13
13
 
14
14
  it("returns attributes and data attributes with custom data attributes", () => {
15
- expect(new Link("#", { id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
16
- expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
17
- expect(new Link("#", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
15
+ expect(new Link({ href: "#", id: "1", data: { foo: "bar" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar'></a>`)
16
+ expect(new Link({ href: "#", id: "1", data: { foo: "bar", baz: "qux" } }).renderWrapper).toBe(`<a href='#' id='1' data-foo='bar' data-baz='qux'></a>`)
17
+ expect(new Link({ href: "#", id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).renderWrapper).toBe(`<a href='#' id='1' data-foo-baz='qux' data-foo-quux='corge'></a>`)
18
18
  })
19
19
 
20
20
  it("adds children", () => {
21
- expect(new Link("#").add(new Text("Hello")).renderWrapper).toBe(`<a href='#' >Hello</a>`)
21
+ expect(new Link({ href: "#" }).add(new Text("Hello")).renderWrapper).toBe(`<a href='#'>Hello</a>`)
22
22
  })
23
23
  })
@@ -1,21 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Link {
4
- attributes: Record<string, any>;
5
- children: any[];
6
- href: string;
7
- constructor(href: string, attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- this.href = href;
11
- }
12
-
4
+ export class Link extends Base {
13
5
  get renderWrapper(): string {
14
- return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
15
- }
16
-
17
- add(child: any): Link {
18
- this.children.push(child);
19
- return this;
6
+ return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
20
7
  }
21
8
  }
@@ -1,19 +1,7 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class ListItem {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
12
- add(child: any): this {
13
- this.children.push(child);
14
- return this;
15
- }
16
-
4
+ export class ListItem extends Base {
17
5
  get renderWrapper(): string {
18
6
  return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
19
7
  }
@@ -1,19 +1,7 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class List {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
12
- add(child: any): this {
13
- this.children.push(child);
14
- return this;
15
- }
16
-
4
+ export class List extends Base {
17
5
  get renderWrapper(): string {
18
6
  return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
19
7
  }
@@ -1,19 +1,7 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class OrderedList {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
12
- add(child: any): this {
13
- this.children.push(child);
14
- return this;
15
- }
16
-
4
+ export class OrderedList extends Base {
17
5
  get renderWrapper(): string {
18
6
  return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
19
7
  }
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Paragraph {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Paragraph extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
14
7
  }
15
-
16
- add(child: any): Paragraph {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Quote {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Quote extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
14
7
  }
15
-
16
- add(child: any): Quote {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,23 +1,21 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
4
  type SelectOption = {
4
5
  value: string;
5
6
  text: string;
6
7
  };
7
8
 
8
- export class Select {
9
- attributes: Record<string, any>;
10
- children: any[];
9
+ export class Select extends Base {
11
10
  options: SelectOption[];
12
11
  state: any;
13
12
  attribute: string;
14
13
 
15
14
  constructor(options: SelectOption[] = [], state: any, attribute: string, attributes: Record<string, any> = {}) {
16
- this.children = [];
15
+ super(attributes)
17
16
  this.options = options;
18
17
  this.state = state;
19
18
  this.attribute = attribute;
20
- this.attributes = attributes;
21
19
  }
22
20
 
23
21
  get renderWrapper(): string {
@@ -1,20 +1,8 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class Span {
4
- attributes: Record<string, any>;
5
- children: any[];
6
-
7
- constructor(attributes: Record<string, any> = {}) {
8
- this.children = [];
9
- this.attributes = attributes;
10
- }
11
-
4
+ export class Span extends Base {
12
5
  get renderWrapper(): string {
13
6
  return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
14
7
  }
15
-
16
- add(child: any): Span {
17
- this.children.push(child);
18
- return this;
19
- }
20
8
  }
@@ -1,23 +1,18 @@
1
1
  import { htmlAttributes } from "../html/html-attributes";
2
+ import { Base } from "./base";
2
3
 
3
- export class TextArea {
4
+ export class TextArea extends Base {
4
5
  state: any;
5
6
  attribute: string;
6
- attributes: Record<string, any>;
7
7
 
8
8
  constructor(state: any, attribute: string, attributes: Record<string, any> = {}) {
9
- this.state = state;
10
- this.attributes = attributes;
9
+ super(attributes)
11
10
  this.attribute = attribute;
11
+ this.state = state
12
12
  this.attributes["data-attribute"] = attribute;
13
13
  }
14
14
 
15
15
  get renderWrapper(): string {
16
16
  return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
17
17
  }
18
-
19
- add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextArea {
20
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
21
- return this;
22
- }
23
18
  }
@@ -1,10 +1,8 @@
1
1
  import { BlockQuote } from "./components/block-quote"
2
- import { Box } from "./components/box"
2
+ import { Div } from "./components/div"
3
3
  import { Bold } from "./components/bold"
4
4
  import { Button } from "./components/button"
5
- import { Checkbox } from "./components/checkbox"
6
5
  import { Code } from "./components/code"
7
- import { DateTimeField } from "./components/datetime-field"
8
6
  import { Element } from "./components/element"
9
7
  import { Embed } from "./components/embed"
10
8
  import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
17
15
  import { OrderedList } from "./components/ordered-list"
18
16
  import { Paragraph } from "./components/paragraph"
19
17
  import { Quote } from "./components/quote"
20
- import { RadioButton } from "./components/radio-button"
21
18
  import { Select } from "./components/select"
22
19
  import { Span } from "./components/span"
23
20
  import { Component } from "./components/component"
24
- import { TextField } from "./components/text-field"
21
+ import { Input } from "./components/input"
25
22
  import { Text } from "./components/text"
26
23
  import { TextArea } from "./components/text-area"
27
24
 
28
25
  export {
29
- Component, Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
26
+ Component, Div, Text, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Input, Quote, Select, Span, Embed, Bold, TextArea
30
27
  };
@@ -1,10 +1,8 @@
1
1
  import { BlockQuote } from "./components/block-quote"
2
- import { Box } from "./components/box"
2
+ import { Div } from "./components/div"
3
3
  import { Button } from "./components/button"
4
4
  import { Bold } from "./components/bold"
5
- import { Checkbox } from "./components/checkbox"
6
5
  import { Code } from "./components/code"
7
- import { DateTimeField } from "./components/datetime-field"
8
6
  import { Element } from "./components/element"
9
7
  import { Embed } from "./components/embed"
10
8
  import { Emphasis } from "./components/emphasis"
@@ -17,14 +15,13 @@ import { List } from "./components/list"
17
15
  import { OrderedList } from "./components/ordered-list"
18
16
  import { Paragraph } from "./components/paragraph"
19
17
  import { Quote } from "./components/quote"
20
- import { RadioButton } from "./components/radio-button"
21
18
  import { Select } from "./components/select"
22
19
  import { Span } from "./components/span"
23
20
  import { Component } from "./components/component"
24
- import { TextField } from "./components/text-field"
21
+ import { Input } from "./components/input"
25
22
  import { Text } from "./components/text"
26
23
  import { TextArea } from "./components/text-area"
27
24
 
28
25
  export const Clapton = {
29
- Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
26
+ Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
30
27
  };
@@ -12,10 +12,10 @@ module Clapton
12
12
  js += "\n"
13
13
  end
14
14
  js = js.sub("const Clapton = {
15
- Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
16
- };", "const Clapton = {
17
- Box, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
18
- };")
15
+ Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
16
+ };", "const Clapton = {
17
+ Div, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
18
+ };")
19
19
  context = ExecJS.compile(js)
20
20
  html = context.eval("new #{component.name.camelize}(#{params.to_json}).renderWrapper")
21
21
  @page = Capybara.string(html)