vertcitron

import TextFieldButton from "./components/TextFieldButton"
import Viewer from "./components/Viewer"

const appElement = document.getElementById('app')

const instantViewer = new Viewer()
instantViewer.label = 'I react to input events:'

const validatedViewer = new Viewer()
validatedViewer.label = 'I react to change events:'

vertcitron

.viewer
  margin-top: 3rem
  display: flex
  flex-flow: row nowrap
  align-items: center
  label
    color: #999999
    font-style: italic
  p
    font-weight: bold

vertcitron

import Component from './Component'

export default class Viewer extends Component {
  readonly element: HTMLDivElement
  private _label: string = ''
  private _content: string = ''

  constructor () {
    super()
    this.element = document.createElement('div')

vertcitron

import TextFieldButton from "./components/TextFieldButton"

const appElement = document.getElementById('app')

const textFieldBtn = new TextFieldButton()
textFieldBtn.placeholder = 'Enter text here...'
textFieldBtn.value = ''
textFieldBtn.onInput = (value: string) => {
  console.log('Input event - value =', value)
}

vertcitron

.text-field-button
  display: flex
  flex-flow: row nowrap
  button
    margin-left: 1rem

vertcitron

import Component from './Component'
import Button from './Button'
import TextInput from './TextInput'

export default class TextFieldButton extends Component {
  readonly element: HTMLDivElement
  private textField: TextInput
  private button: Button

  public onInput: (text: string) => void = (text) => {

vertcitron

input[type=text]
  padding: 0.5rem 0.5rem 0.25rem
  border: none
  border-top-left-radius: 0.33rem
  border-top-right-radius: 0.33rem
  border-bottom: 1px solid #333355
  background-color: inherit
  width: 100%
  font-size: 1rem
  &:focus

vertcitron

import TextInput from "./components/TextInput"

const appElement = document.getElementById('app')

const textInput = new TextInput()
textInput.placeholder = 'Enter text here...'
textInput.value = ''
textInput.onInput = (value: string) => {
  console.log('Input event - value =', value)
}

vertcitron

import Component from './Component'

export default class TextInput extends Component {
  readonly element: HTMLInputElement

  public onInput: (text: string) => void = (text: string) => {
    throw new Error('The input handler has not been defined in a TextInput component.')
  }
  public onChange: (text: string) => void = (text: string) => {
    throw new Error('The change handler has not been defined in a TextInput component.')

vertcitron

import Button from "./components/Button"

const appElement = document.getElementById('app')

const alertButton = new Button('Alert Button')
alertButton.onClick = () => {
  alert('Alert button was clicked !')
}
const warningButton = new Button('Warning Button')
warningButton.onClick = () => {