purescript-sdom
purescript-sdom copied to clipboard
Add more input controls
- [ ] color
- [ ] hidden
- [ ] image
- [ ] number
- [ ] password
- [ ] radio
- [ ] range
- [ ] week
- [ ] month
- [ ] date
- [ ] time
I started chipping away at a few of these but soon realised that I didn't know whether these inputs should be treated as elements or components and whether they should only accept a specific set of attributes associated with the input type or allow the user to pass arbitrary attributes through.
I've pushed up what I've done so far here: https://github.com/paf31/purescript-sdom/compare/master...scott-christopher:inputs
purescript-colors has been included as a dependency for the <input type="color">
to add some sugar around interacting with representations of colors, though this can be removed if simply passing through hex encoded strings is preferred.
Below is an example of the rendering of the color input I've got so far:
color
:: forall channel context
. SDOM channel context Color Color
color =
E.div_
[ E.h1_ [ text_ "Color Triad" ]
, E.p_
[ text_ "Choose a color: "
, Components.colorInput
id
\_ col -> col
, Components.colorInput
(rotateHue 120.0)
\_ col -> (rotateHue (-120.0)) col
, Components.colorInput
(rotateHue (-120.0))
\_ col -> (rotateHue 120.0) col
]
]
Let me know if this is on the right track or not and I'll happily carry on with the remaining inputs.
This looks great! I think Components
is the right place to put them, and we can start by supporting some basic attributes and then think about passing others through later.