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) {
| # Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/models/todo.rb | |
| Todo = Struct.new(:task, :completed, :editing, keyword_init: true) do | |
| class << self | |
| attr_writer :all | |
| def all | |
| @all ||= [] | |
| end | |
| def active |
| # Source: https://github.com/AndyObtiva/glimmer-dsl-web/blob/master/lib/glimmer-dsl-web/samples/regular/todo_mvc/presenters/todo_presenter.rb | |
| require 'glimmer/data_binding/observer' | |
| require_relative '../models/todo' | |
| class TodoPresenter | |
| FILTER_ROUTE_REGEXP = /\#\/([^\/]*)$/ | |
| attr_accessor :todos, :can_clear_completed, :active_todo_count | |
| attr_reader :new_todo, :filter |
| # 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 { | |
| input(class: todo_input_class) { |edit_input| | |
| # Data-bind `input` `style` property unidirectionally to `todo` `editing` attribute, |
| # 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 | |
| markup { |
| # 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 | |
| markup { | |
| main(class: 'main') { |
| # 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 | |
| def todo_input_class | |
| 'todo-input' | |
| end | |
| def todo_input_styles |
| # 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 { | |
| input(class: todo_input_class, 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 |
| # 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') { |