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.
- checksums.yaml +4 -4
- data/README.md +7 -113
- data/lib/clapton/javascripts/dist/c-for-test.js +108 -271
- data/lib/clapton/javascripts/dist/c.js +108 -271
- data/lib/clapton/javascripts/dist/components-for-test.js +69 -245
- data/lib/clapton/javascripts/dist/components.js +68 -241
- data/lib/clapton/javascripts/src/c-base.ts +45 -33
- 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 +2 -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/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
@@ -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 {
|
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
|
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 {
|
2
|
+
import { Div } from "./div"
|
3
3
|
import { Text } from "./text"
|
4
4
|
|
5
|
-
describe("
|
5
|
+
describe("Div", () => {
|
6
6
|
it("returns empty string if no params", () => {
|
7
|
-
expect(new
|
7
|
+
expect(new Div().renderWrapper).toBe("<div ></div>")
|
8
8
|
})
|
9
9
|
|
10
10
|
it("returns attributes and data attributes", () => {
|
11
|
-
expect(new
|
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
|
16
|
-
expect(new
|
17
|
-
expect(new
|
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
|
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
|
-
|
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",
|
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
|
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
|
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
|
-
|
9
|
+
super(attributes)
|
10
10
|
this.attribute = attribute;
|
11
|
-
this.
|
11
|
+
this.state = state
|
12
12
|
this.attributes["data-attribute"] = attribute;
|
13
13
|
}
|
14
14
|
|
15
15
|
get renderWrapper(): string {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
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=''
|
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='#'
|
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("#",
|
16
|
-
expect(new Link("#",
|
17
|
-
expect(new Link("#",
|
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='#'
|
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
|
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
|
-
|
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
|
-
|
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 {
|
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 {
|
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,
|
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 {
|
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 {
|
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
|
-
|
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
|
-
|
16
|
-
|
17
|
-
|
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)
|