clapton 0.0.24 → 0.0.26

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,47 @@ 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;
+        this.attributes["data-id"] = Math.random().toString(36).substring(2, 10);
     }
     get renderWrapper() {
-        return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
+        let value = this.state[this.attribute];
+        if (!this.attributes.type) {
+            this.attributes.type = "text";
+        }
+        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 +285,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/actions/handle-action.ts

@@ -12,7 +12,7 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
   const attribute = target.dataset.attribute;
   if (attribute) {  
     const state = JSON.parse(component.dataset.state || "{}");
-    if (target.tagName === "INPUT") {
+    if (target.dataset.attribute) {
       state[attribute] = (target as HTMLInputElement).value;
       component.dataset.state = JSON.stringify(state);
     }
@@ -30,7 +30,8 @@ export const handleAction = async (target: HTMLElement, stateName: string, fn: s
           action: fn,
           attributes: JSON.parse(targetComponent.dataset.state || "{}"),
         },
-        params: JSON.parse(component.dataset.state || "{}")
+        params: JSON.parse(component.dataset.state || "{}"),
+        focus: target.dataset.id,
       }
     }
   );

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[]) => {
@@ -103,19 +111,19 @@ const text = (...props: any[]) => {
 const c = (name: string, ...props: any[]) => {
   switch (name) {
     case "bq":
-      return bq(...props)
+      return blockquote(...props)
     case "box":
-      return box(...props)
+      return div(...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":
@@ -125,7 +133,19 @@ const c = (name: string, ...props: any[]) => {
     case "form":
       return form(...props)
     case "h":
-      return h(...props)
+      return h1(...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 +160,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":
@@ -152,8 +170,17 @@ const c = (name: string, ...props: any[]) => {
       return input(...props)
     case "text":
       return text(...props)
+    case "radio":
+      props[3].type = "radio"
+      return input(...props)
+    case "datetime":
+      props[3].type = "datetime-local"
+      return input(...props)
+    case "check":
+      props[3].type = "checkbox"
+      return input(...props)
     default:
-      return new Clapton.Component(...props)
+      return new Clapton.Element(name, ...props)
   }
 }
 

data/lib/clapton/javascripts/src/channel/clapton-channel.js

@@ -1,7 +1,6 @@
 import morphdom from "morphdom"
 import { createConsumer } from "@rails/actioncable"
 import { initializeActions } from "../actions/initialize-actions.ts"
-import { initializeInputs } from "../inputs/initialize-inputs.ts"
 const consumer = createConsumer()
 
 export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
@@ -18,12 +17,14 @@ export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonCha
     const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.renderWrapper, {
       onBeforeElUpdated: (_fromEl, toEl) => {
+        if (_fromEl.dataset.id === data.focus) {
+          return false;
+        }
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
       }
     });
 
-    initializeInputs();
     initializeActions();
     instance.runEffects();
   }

data/lib/clapton/javascripts/src/client.ts

@@ -1,5 +1,4 @@
 import { initializeActions } from "actions/initialize-actions";
-import { initializeInputs } from "inputs/initialize-inputs";
 
 interface ComponentDefinition {
   component: string;
@@ -42,7 +41,6 @@ const createAndAppendComponent = async (component: ComponentDefinition, element:
 document.addEventListener("DOMContentLoaded", async () => {
   await initializeComponents();
   initializeActions();
-  initializeInputs();
   const event = new Event('clapton:render');
   document.dispatchEvent(event);
 });
@@ -50,7 +48,6 @@ document.addEventListener("DOMContentLoaded", async () => {
 document.addEventListener("turbo:render", async () => {
   await initializeComponents();
   initializeActions();
-  initializeInputs();
   const event = new Event('clapton:render');
   document.dispatchEvent(event);
 });