AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_mvc_footer.rb
class TodoMvcFooter
  include Glimmer::Web::Component
  
  markup {
    footer(class: 'info') {
      p {
        "Double-click to edit a todo"
      }
      p {

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_filters.rb
class TodoFilters
  include Glimmer::Web::Component
  
  option :presenter
  
  markup {
    footer {
      # Data-bind `footer` `style` `display` unidirectionally to presenter todos,
      # and on read, convert todos based on whether they are empty to 'none' or 'block'

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/edit_todo_input.rb
require_relative 'todo_input'

class EditTodoInput < TodoInput
  option :presenter
  option :todo
  
  markup { # evaluated against instance as a smart default convention
    input { |edit_input|
      # Data-bind inclusion of `li` `class` `editing` unidirectionally to todo editing attribute,

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list_item.rb
require_relative 'edit_todo_input'

class TodoListItem
  include Glimmer::Web::Component
  
  option :presenter
  option :todo
  
  after_render do

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_list.rb
require_relative 'todo_list_item'

class TodoList
  include Glimmer::Web::Component
  
  option :presenter
  
  after_render do
    observe(presenter, :created_todo) do |todo|

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/todo_input.rb
# Superclass for NewTodoInput and EditTodoInput with common styles
class TodoInput
  include Glimmer::Web::Component
  
  class << self
    def todo_input_styles
      r(component_element_selector) {
        position :relative
        margin 0

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_input.rb
require_relative 'todo_input'

class NewTodoInput < TodoInput
  option :presenter
  
  markup { # evaluated against instance as a smart convention
    input(placeholder: "What needs to be done?", autofocus: "") {
      # Data-bind `input` `value` property bidirectionally to `presenter.new_todo` `task` attribute
      # meaning make any changes to the new todo task automatically update the input value

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/views/new_todo_form.rb
require_relative 'new_todo_input'

class NewTodoForm
  include Glimmer::Web::Component
  
  option :presenter
  
  markup {
    header(class: 'header') {

AndyObtiva

# Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc.rb
require 'glimmer-dsl-web'

require_relative 'todo_mvc/presenters/todo_presenter'

require_relative 'todo_mvc/views/new_todo_form'
require_relative 'todo_mvc/views/todo_list'
require_relative 'todo_mvc/views/todo_filters'
require_relative 'todo_mvc/views/todo_mvc_footer'

AndyObtiva

Class-Based Custom Control Slots

Component can have Component Slots inside layout container controls: vertical_box, horizontal_box, form, and grid.

Simply designate a layout container control as a Component Slot inside a Custom Control class body block by passing it a slot: slot_name option (in the example below, we have a :header slot and a :footer slot):

  body {
    vertical_box {
      vertical_box(slot: :header) {