Form element collections

I want to be able to define collections of input elements, which can be combined with set of properties.

Some possible input types

text
number
date
time
checkbox
- or group
radio buttons group
dropdown
- with autocomplete

Instead of setting every field definition individually, the user would import from a set of components and use with the FieldTemplates builder

import { datePicker, autocomplete } from '@lit-any/paper-elements';
import { FieldTemplates } from 'lit-any';

// simple rendering
FieldTemplates.default.when
  .fieldMatches(f => t.type === 'date')
  .renders(datePicker());

// a factory function could accept extra parameters for the control
FieldTemplates.default.when
  .fieldMatches(f => t.type === 'Person')
  .renders(autocomplete({
    suggestions: (text, field) => loadPeople(field.suggestionsUrl, text),
  }));

Default binding

A most common JS-native set of types could be used to define basic controls

string -> <input type=text>
number -> <input type=number>
boolean -> <input type=checkbox>
date -> <input type=date>

Common mappings would be defined simply by calling a method on the registry, which would do all default calls to set up individual controls to render for the default types.

import * as PaperElements from '@lit-any/paper-elements';

FieldTemplates.default
  .useCollection(PaperElements);

Binding to vocabulary

Finally a custom vocabulary could be set up to combine its terms with controls coming from collections.

import Schema from '@lit-html/vocabulary/schema.org';
import * as PaperElements from '@lit-any/paper-elements';

Schema(FieldTemplates.default)
  .useCollection(PaperElements);

Such call would do all the set up, as supported by PaperElements collections to pair schema.org types with controls. For example using <paper-checbox> for https://schema.org/Boolean

hypermedia-app / lit-any-forms