purescript-sdom icon indicating copy to clipboard operation
purescript-sdom copied to clipboard

Add more input controls

Open paf31 opened this issue 6 years ago • 2 comments

  • [ ] color
  • [ ] hidden
  • [ ] image
  • [ ] number
  • [ ] password
  • [ ] radio
  • [ ] range
  • [ ] week
  • [ ] month
  • [ ] date
  • [ ] time

paf31 avatar Mar 11 '18 18:03 paf31

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
      ]
    ]

example

Let me know if this is on the right track or not and I'll happily carry on with the remaining inputs.

scott-christopher avatar Mar 31 '18 07:03 scott-christopher

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.

paf31 avatar Mar 31 '18 22:03 paf31