Blocks

[codewithkyle]

Blocks:

• sortable
• removeable
• expand/shrinkable
• labeled or unlabeled

Block data model:

{
  model: any,
  viewmodel: HTMLElement,
  expanded: true,
}

Button model:

{
  label: "Example",
  color: "white",
  kind: "solid",
  viewmodel: ExampleViewModel,
  model?: any,
}

When a button is clicked a new block is added. The HTML element to be rendered should look like:

class ExampleViewModel extends HTMLElement{
  constructor(block, model){
    super();
  }
}