clapton 0.0.24 → 0.0.25

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

@@ -40,155 +40,63 @@ const escapeHtml = (unsafe) => {
         .replace(/'/g, "'");
 };
 
-class BlockQuote {
+class Base {
     constructor(attributes = {}) {
         this.children = [];
         this.attributes = attributes;
     }
-    get renderWrapper() {
-        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
-    }
     add(child) {
         this.children.push(child);
         return this;
     }
-}
-
-class Box {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
-    get renderWrapper() {
-        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-    }
     add_action(eventType, stateName, fnName, options = {}) {
         this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
         return this;
     }
+    get renderWrapper() {
+        return "";
+    }
 }
 
-class Button {
-    constructor(attributes = {}) {
-        this.attributes = attributes;
-        this.children = [];
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class BlockQuote extends Base {
     get renderWrapper() {
-        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+        return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
     }
 }
 
-class Bold {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Div extends Base {
     get renderWrapper() {
-        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
     }
 }
 
-class Checkbox {
-    constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
-        this.attribute = attribute;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Button extends Base {
     get renderWrapper() {
-        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}`;
-        return this;
+        return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
     }
 }
 
-class Code {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Bold extends Base {
     get renderWrapper() {
-        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
     }
 }
 
-class DateTimeField {
-    constructor(state, attribute, attributes = {}) {
-        this.attributes = {};
-        this.state = state;
-        this.attribute = attribute;
-        this.attributes = attributes;
-        this.attributes["data-attribute"] = attribute;
-    }
+class Code extends Base {
     get renderWrapper() {
-        const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
-        return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
-    }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
-    datetime_local_value(value) {
-        if (!value) {
-            return "";
-        }
-        const date = new Date(value);
-        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        if (month < 10) {
-            month = `0${month}`;
-        }
-        if (day < 10) {
-            day = `0${day}`;
-        }
-        if (hours < 10) {
-            hours = `0${hours}`;
-        }
-        if (minutes < 10) {
-            minutes = `0${minutes}`;
-        }
-        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+        return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
     }
 }
 
-class Element {
+class Element extends Base {
     constructor(type, attributes = {}) {
+        super(attributes);
         this.children = [];
         this.type = type;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Embed {
@@ -200,187 +108,86 @@ class Embed {
     }
 }
 
-class Emphasis {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Emphasis extends Base {
     get renderWrapper() {
         return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Form {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Form extends Base {
     get renderWrapper() {
         return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Heading {
+class Heading extends Base {
     constructor(level, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.level = level;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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;
-    }
+class Image extends Base {
     get renderWrapper() {
-        return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
+        return `<img ${htmlAttributes(this.attributes)}/>`;
     }
 }
 
-class Link {
-    constructor(href, attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-        this.href = href;
-    }
+class Link extends Base {
     get renderWrapper() {
-        return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
+        return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
     }
 }
 
-class ListItem {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class ListItem extends Base {
     get renderWrapper() {
         return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
     }
 }
 
-class List {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class List extends Base {
     get renderWrapper() {
         return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
     }
 }
 
-class OrderedList {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
+class OrderedList extends Base {
     get renderWrapper() {
         return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
     }
 }
 
-class Paragraph {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Paragraph extends Base {
     get renderWrapper() {
         return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
-class Quote {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Quote extends Base {
     get renderWrapper() {
         return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).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 renderWrapper() {
-        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 {
+class Select extends Base {
     constructor(options = [], state, attribute, attributes = {}) {
-        this.children = [];
+        super(attributes);
         this.options = options;
         this.state = state;
         this.attribute = attribute;
-        this.attributes = attributes;
     }
     get renderWrapper() {
         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.renderWrapper).join("")}</select>`;
     }
 }
 
-class Span {
-    constructor(attributes = {}) {
-        this.children = [];
-        this.attributes = attributes;
-    }
+class Span extends Base {
     get renderWrapper() {
         return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
     }
-    add(child) {
-        this.children.push(child);
-        return this;
-    }
 }
 
 class Component {
@@ -390,7 +197,7 @@ class Component {
         this._errors = errors;
     }
     get render() {
-        return new Box({});
+        return new Div({});
     }
     get renderWrapper() {
         const root = this.render;
@@ -425,19 +232,43 @@ class Component {
 }
 Component._effects = [];
 
-class TextField {
+class Input extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
-        return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        let value = this.state[this.attribute];
+        if (this.attributes.type === "datetime-local" && value) {
+            value = this.datetime_local_value(value);
+        }
+        return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
+    datetime_local_value(value) {
+        if (!value) {
+            return "";
+        }
+        const date = new Date(value);
+        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        if (month < 10) {
+            month = `0${month}`;
+        }
+        if (day < 10) {
+            day = `0${day}`;
+        }
+        if (hours < 10) {
+            hours = `0${hours}`;
+        }
+        if (minutes < 10) {
+            minutes = `0${minutes}`;
+        }
+        return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
     }
 }
 
@@ -450,24 +281,20 @@ class Text {
     }
 }
 
-class TextArea {
+class TextArea extends Base {
     constructor(state, attribute, attributes = {}) {
-        this.state = state;
-        this.attributes = attributes;
+        super(attributes);
         this.attribute = attribute;
+        this.state = state;
         this.attributes["data-attribute"] = attribute;
     }
     get renderWrapper() {
         return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
     }
-    add_action(event, klass, fn, options = {}) {
-        this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
-        return this;
-    }
 }
 
 const Clapton = {
-    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
+    Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
 };
 
 export { Clapton };

data/lib/clapton/javascripts/src/c-base.ts

@@ -1,11 +1,11 @@
 import { Clapton } from "components"
 
-const bq = (...props: any[]) => {
+const blockquote = (...props: any[]) => {
   return new Clapton.BlockQuote(...props)
 }
 
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
+const div = (...props: any[]) => {
+  return new Clapton.Div(...props)
 }
 
 const b = (...props: any[]) => {
@@ -16,18 +16,10 @@ const button = (...props: any[]) => {
   return new Clapton.Button(...props)
 }
 
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
 const code = (...props: any[]) => {
   return new Clapton.Code(...props)
 }
 
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
 const el = (...props: any[]) => {
   return new Clapton.Element(props[0], props[1])
 }
@@ -44,16 +36,36 @@ const form = (...props: any[]) => {
   return new Clapton.Form(...props)
 }
 
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
+const h1 = (...props: any[]) => {
+  return new Clapton.Heading(1, props[1])
+}
+
+const h2 = (...props: any[]) => {
+  return new Clapton.Heading(2, props[1])
+}
+
+const h3 = (...props: any[]) => {
+  return new Clapton.Heading(3, props[1])
+}
+
+const h4 = (...props: any[]) => {
+  return new Clapton.Heading(4, props[1])
+}
+
+const h5 = (...props: any[]) => {
+  return new Clapton.Heading(5, props[1])
+}
+
+const h6 = (...props: any[]) => {
+  return new Clapton.Heading(6, props[1])
 }
 
 const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
+  return new Clapton.Image(props[0])
 }
 
 const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
+  return new Clapton.Link(props[0])
 }
 
 const li = (...props: any[]) => {
@@ -76,10 +88,6 @@ const q = (...props: any[]) => {
   return new Clapton.Quote(...props)
 }
 
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
 const select = (...props: any[]) => {
   return new Clapton.Select(props[0], props[1], props[2])
 }
@@ -93,7 +101,7 @@ const textarea = (...props: any[]) => {
 }
 
 const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
+  return new Clapton.Input(props[0], props[1], props[2])
 }
 
 const text = (...props: any[]) => {
@@ -102,20 +110,16 @@ const text = (...props: any[]) => {
 
 const c = (name: string, ...props: any[]) => {
   switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
+    case "blockquote":
+      return blockquote(...props)
+    case "div":
+      return div(...props)
     case "b":
       return b(...props)
     case "button":
       return button(...props)
-    case "check":
-      return check(...props)
     case "code":
       return code(...props)
-    case "datetime":
-      return datetime(...props)
     case "el":
       return el(...props)
     case "embed":
@@ -124,8 +128,18 @@ const c = (name: string, ...props: any[]) => {
       return em(...props)
     case "form":
       return form(...props)
-    case "h":
-      return h(...props)
+    case "h1":
+      return h1(...props)
+    case "h2":
+      return h2(...props)
+    case "h3":
+      return h3(...props)
+    case "h4":
+      return h4(...props)
+    case "h5":
+      return h5(...props)
+    case "h6":
+      return h6(...props)
     case "img":
       return img(...props)
     case "a":
@@ -140,8 +154,6 @@ const c = (name: string, ...props: any[]) => {
       return p(...props)
     case "q":
       return q(...props)
-    case "radio":
-      return radio(...props)
     case "select":
       return select(...props)
     case "span":
@@ -153,7 +165,7 @@ const c = (name: string, ...props: any[]) => {
     case "text":
       return text(...props)
     default:
-      return new Clapton.Component(...props)
+      return new Clapton.Element(name, ...props)
   }
 }
 

data/lib/clapton/javascripts/src/components/{box.ts → base.ts}

@@ -1,6 +1,4 @@
-import { htmlAttributes } from "../html/html-attributes";
-
-export class Box {
+export class Base {
   attributes: Record<string, any>;
   children: any[];
 
@@ -9,17 +7,17 @@ export class Box {
     this.attributes = attributes;
   }
 
-  add(child: any): this {
+  add(child: any): Base {
     this.children.push(child);
     return this;
   }
 
-  get renderWrapper(): string {
-    return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
-  }
-
   add_action(eventType: string, stateName: string, fnName: string, options: Record<string, any> = {}): this {
     this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
     return this;
   }
+  
+  get renderWrapper() {
+    return "";
+  }
 }

data/lib/clapton/javascripts/src/components/block-quote.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest"
-import { BlockQuote } from "./block-quote"
+import { BlockQuote} from "./block-quote"
 import { Text } from "./text"
 
 describe("BlockQuote", () => {

data/lib/clapton/javascripts/src/components/block-quote.ts

@@ -1,20 +1,8 @@
 import { htmlAttributes } from "../html/html-attributes";
+import { Base } from "./base";
 
-export class BlockQuote {
-  attributes: Record<string, any>;
-  children: any[];
-
-  constructor(attributes: Record<string, any> = {}) {
-    this.children = [];
-    this.attributes = attributes;
-  }
-
+export class BlockQuote extends Base {
   get renderWrapper(): string {
     return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
   }
-
-  add(child: any): BlockQuote {
-    this.children.push(child);
-    return this;
-  }
 }