Build powerful form inputs/outputs with mithril and streams.
ui-widgets is a simple collection of mithril components for generating rich form inputs or displaying values. These widgets use mithril streams to simplify avoid state management "boilerplate" and allow form complex interactions and validation.
ui-widgets has several lightweight dependencies for building and styling widgets:
- mithril.js + streams
- Lodash
- Tachyons
- Luxon
- We suggest using Font Awesome for icons
- Signature drawing input requires Signature Pad
- Signature text/stamp input benefits from a custom font, we suggest Caveat
Register the GitHub Package Registry for @sdxmessaging in your .npmrc file:
@sdxmessaging:registry=https://npm.pkg.github.com
Add @sdxmessaging/ui-widgets to your package:
npm i @sdxmessaging/ui-widgetsA umd version of the library is available via jsDelivr:
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/gh/sdxmessaging/ui-widgets/umd/index.js"></script>A simple demonstration page is available from ui-widgets, open the example.html file:
npm run exampleThe example page shows how widgets read/write shared streams and file streams. The page source can be found in the umd folder.
All widgets accept a "field" configuration and a "value" stream, the streams contain either a simple property or a file list. Any input/display widget that supports the same "value" can share a common stream.
A property "value" consists of a stream of string, number, or boolean.
The SelectInput, RadioInput, and SelectText widgets require a list of options mapping the value to a label.
A file "value" consists of a stream of file objects. These objects are simple wrappers for standard browser files with extra fields:
- guid - Auto generated unique id
- name - The file name, may be modified by image inputs
- path - A path to the file, used by file display widgets
- dataUrl (optional) - Scaled image preview generated by image inputs