clapton 0.0.24 → 0.0.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f15ceb3c247b4a620ea3508dc66511a2d7beb4f2e1bc32a24dd8e69bd0d70332
-  data.tar.gz: 329b1b8107968efdcce936a4f71deb904e5a609d846ca245d8c90cc7040ba144
+  metadata.gz: d7e101f28b9097e8229c855012c0c2649da46060207845c7d6f41c6a1e6c89b3
+  data.tar.gz: e1d8c859a3e5e675922a6a79a9783b0129c33fa2f30f56cf2819dac7802e85ea
 SHA512:
-  metadata.gz: 24846c65443543d58f3e8f6f6018b5ace3af64166be9b9e2bde2bd0aa5056c7bd2f148ba43b7171a7e43756d0eb485bebaad9fca5ad57a913b038bead70baf8e
-  data.tar.gz: 60aaeaae14b6277cd5323f5cf1e36201e94f2887e4c1655838ce37a13a58282de3b05c729e2a8212b2e1705f7e4e538f0b2f2b78e57b872f089d9956acc58b57
+  metadata.gz: 2f0a863288caa1f2ff959a14ae745c6043aaece8642ece8428ac91695a036f1601088bc81dc562c9bc3bf140101e8b210f47990b77ba26dbf2b07597225ec1c9
+  data.tar.gz: 75d7c625ce602ff727709bfe217e79e19f6c17a11ddceecbb4d8c5765ea353206a4763f4e182ffcb7081842d9485d13b21127d39536ae3270967d5362467cd0f

data/README.md

@@ -34,14 +34,14 @@ To use a Clapton component in your view:
 # app/components/task_list_component.rb
 class TaskListComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     @state.tasks.each do |task|
-      box.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
+      div.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
     end
     btn = c(:button)
     btn.add(c(:text, "Add Task"))
     btn.add_action(:click, :TaskListState, :add_task)
-    box.add(btn)
+    div.add(btn)
   end
 end
 
@@ -51,7 +51,7 @@ end
 # app/components/task_item_component.rb
 class TaskItemComponent < Clapton::Component
   def render
-    box = c(:box)
+    div = c(:div)
     btn = c(:button)
     btn.add(c(:text, @state.done ? "✅" : "🟩"))
     btn.add_action(:click, :TaskListState, :toggle_done)
@@ -62,7 +62,7 @@ class TaskItemComponent < Clapton::Component
     dt = c(:datetime, @state, :due)
     dt.add_action(:input, :TaskListState, :update_due)
 
-    box.add(btn).add(tf).add(dt)
+    div.add(btn).add(tf).add(dt)
   end
 end
 
@@ -171,8 +171,8 @@ The `render` event is a special event that is triggered when the component is re
 class TaskListComponent < Clapton::Component
   def render
     # ...
-    box = c(:box)
-    box.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
+    div = c(:div)
+    div.add_action(:render, :TaskListState, :add_empty_task, debounce: 500)
   end
 end
 ```
@@ -201,112 +201,6 @@ class VideoPlayerComponent < Clapton::Component
 end
 ```
 
-### Preset Components Classes
-
-```ruby
-block_quote = Clapton::BlockQuote.new
-block_quote.add(Clapton::Text.new("Hello"))
-
-box = Clapton::Box.new
-box.add(Clapton::Text.new("Hello"))
-
-button = Clapton::Button.new
-button.add(Clapton::Text.new("Click me"))
-button.add_action(:click, :TaskListState, :add_task)
-
-checkbox = Clapton::Checkbox.new(:ExampleState, :example_attribute, { id: "example-checkbox" })
-checkbox.add_action(:change, :ExampleState, :update_example_attribute)
-
-code = Clapton::Code.new
-code.add(Clapton::Text.new("Hello"))
-
-datetime_field = Clapton::DateTimeField.new(:ExampleState, :example_attribute, { id: "example-datetime-field" })
-
-element = Clapton::Element.new("div", { id: "example-element" })
-element.add(Clapton::Text.new("Hello"))
-
-embed = Clapton::Embed.new("<blockquote>This is a test</blockquote>")
-
-emphasis = Clapton::Emphasis.new
-emphasis.add(Clapton::Text.new("Hello"))
-
-form = Clapton::Form.new
-form.add(Clapton::Text.new("Hello"))
-
-heading = Clapton::Heading.new(1)
-heading.add(Clapton::Text.new("Hello"))
-
-image = Clapton::Image.new("https://example.com/image.png", "Example Image")
-
-link = Clapton::Link.new("https://example.com")
-link.add(Clapton::Text.new("Example Link"))
-
-list = Clapton::List.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  list.add(item)
-end
-
-ordered_list = Clapton::OrderedList.new
-(1..3).each do
-  item = Clapton::ListItem.new
-  item.add(Clapton::Text.new("Item #{i}"))
-  ordered_list.add(item)
-end
-
-paragraph = Clapton::Paragraph.new
-paragraph.add(Clapton::Text.new("Hello"))
-
-quote = Clapton::Quote.new
-quote.add(Clapton::Text.new("Hello"))
-
-radio_button = Clapton::RadioButton.new(:ExampleState, :example_attribute, { id: "example-radio-button" })
-radio_button.add_action(:change, :ExampleState, :update_example_attribute)
-
-select = Clapton::Select.new([{ value: "1", text: "One" }, { value: "2", text: "Two" }], :ExampleState, :example_attribute, { id: "example-select" })
-select.add_action(:change, :ExampleState, :update_example_attribute)
-
-span = Clapton::Span.new
-span.add(Clapton::Text.new("Hello"))
-
-text_area = Clapton::TextArea.new(:ExampleState, :example_attribute, { id: "example-text-area" })
-
-text_field = Clapton::TextField.new(:ExampleState, :example_attribute, { id: "example-text-field" })
-
-text = Clapton::Text.new("Hello")`
-```
-
-### Preset Component Methods
-
-```javascript
-c(:bq, ...props)
-c(:box, ...props)
-c(:b, ...props)
-c(:button, ...props)
-c(:check, ...props)
-c(:code, ...props)
-c(:datetime, ...props)
-c(:el, ...props)
-c(:embed, ...props)
-c(:em, ...props)
-c(:form, ...props)
-c(:h, ...props)
-c(:img, ...props)
-c(:a, ...props)
-c(:li, ...props)
-c(:ul, ...props)
-c(:ol, ...props)
-c(:p, ...props)
-c(:q, ...props)
-c(:radio, ...props)
-c(:select, ...props)
-c(:span, ...props)
-c(:textarea, ...props)
-c(:input, ...props)
-c(:text, ...props)
-```
-
 ### Streaming
 
 Clapton supports streaming.

data/app/channels/clapton/clapton_channel.rb

@@ -19,6 +19,7 @@ module Clapton
                 id: data["data"]["component"]["id"],
               },
               state: state.to_h,
+              focus: data["data"]["focus"] 
             }
           })
         end
@@ -32,6 +33,7 @@ module Clapton
                 id: data["data"]["component"]["id"],
               },
               state: state.to_h,
+              focus: data["data"]["focus"]
             }
           })
           return
@@ -47,6 +49,7 @@ module Clapton
               id: data["data"]["component"]["id"],
             },
             state: state.to_h,
+            focus: data["data"]["focus"]
           }
         })
       else
@@ -59,6 +62,7 @@ module Clapton
               id: data["data"]["component"]["id"],
             },
             state: state.to_h,
+            focus: data["data"]["focus"]
           }
         })
       end