text input prototype

text-input.mjs

export default function InputText({ html, state, utils={} }) {
  const { attrs={} } = state
  const {
    description='',
    label='',
    name='',
    pattern='',
    placeholder='',
    value='',
    min='',
    max='',
    type='',
  } = attrs

  const booleanAttr = (attrs, attr) => Object.keys(attrs).includes(attr) ? attr : ''

  const autofocus = booleanAttr(attrs, 'autofocus')
  const disabled = booleanAttr(attrs, 'disabled')
  return html`
<label
  for="text"
  class="
   radius1
  "
>
  <p class="pb-2">
    ${label}
  </p>
  <input
    type="text"
    class="p-3 mb-2"
    name="${name}"
    value="${value}"
    ${autofocus}
    ${disabled}
   >
  <p>
   ${description}
  </p>
</label>
  `
}