input.js

var yo = require('yo-yo')
var xtend = require('xtend')
var types = {
  button: 0,
  checkbox: 0,
  color: 0,
  date: 1,
  'datetime-local': 1,
  email: 1,
  file: 0,
  hidden: 1,
  image: 0,
  month: 1,
  number: 1,
  password: 1,
  radio: 0,
  range: 1,
  reset: 0,
  search: 1,
  submit: 0,
  tel: 1,
  text: 1,
  time: 1,
  url: 1,
  week: 1
}

var attributes = {
  type: 1,
  accept: 0,
  accesskey: 0,
  autocomplete: 1,
  autofocus: 1,
  capture: 0,
  checked: 0, // if types.radio then 1
  'class': 1,
  disabled: 1,
  form: 0,
  formaction: 0,
  formenctype: 0,
  formmethod: 0,
  formnovalidate: 0,
  formtarget: 0,
  height: 0,
  id: 1,
  inputmode: 1,
  list: 1,
  max: 1,
  maxlength: 1,
  min: 1,
  minlength: 1,
  multiple: 1,
  name: 1,
  pattern: 1,
  placeholder: 1,
  readonly: 1,
  required: 1,
  selectionDirection: 1,
  selectionEnd: 1,
  selectionStart: 1,
  size: 0,
  spellcheck: 1,
  src: 0,
  step: 1,
  tabindex: 0,
  usemap: 0,
  value: 1,
  width: 0
}

// https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

module.exports = function input (opt) {
  var schema = xtend(opt.schema)
  var uiSchema = xtend(opt.uiSchema)
  var addEventListeners = xtend(opt.addEventListeners)
  var value = opt.value || ''
  var type = uiSchema['ui:wedget'] || 'text'
  if (schema.type === 'number' || schema.type === 'integer') type = 'number'
  if (schema.type === 'string' && schema.format) {
    if (schema.format === 'date') type = 'date'
    if (schema.format === 'date-time') type = 'date-time-local'
    if (schema.format === 'email') type = 'email'
//    if (schema.format === 'hostname') type = 'TYPE'
//    if (schema.format === 'ipv4') type = 'TYPE'
//    if (schema.format === 'ipv6') type = 'TYPE'
    if (schema.format === 'uri') type = 'url'
  }

  if (!types[type]) throw new Error(`not support type - "${type}"`)

  var inp = yo`<input
    type=${type}
    value=${value}
  />`

  Object.keys(attributes).filter(a => !!attributes[a]).forEach(attr => {
    var prop = uiSchema[`ui:${attr}`]
    if (prop != null) inp.setAttribute(attr, prop === true ? attr : prop)
  })
  schema.required && inp.setAttribute('required', 'required')
  schema.pattern && inp.setAttribute('pattern', schema.pattern)
  schema.maximum && inp.setAttribute('max', schema.maximum)
  schema.maxLaength && inp.setAttribute('maxlength', schema.maxLength)
  schema.minimum && inp.setAttribute('min', schema.minimum)
  schema.minLength && inp.setAttribute('minlength', schema.minLength)

  schema.type === 'integer' && inp.setAttribute('step', 1)

  Object.keys(addEventListeners).forEach(evname => {
    var name = evname.slice(0, 2) === 'on' ? evname.slice(2) : evname
    inp.addEventListener(name, e => {
      e.stopPropagation()
      addEventListeners[evname](e.target.value, e.target, e)
    }, true)
  })

  return inp
}