This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.0.1
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.0
Committed At 2019-02-27 07:13:58 UTC

Modules

    README

    Build Status Latest Version

    elm-debug-controls

    This package helps you easily build interactive UIs for complex data structures. The resulting controls are not meant for building end-user UIs, but they are useful for quickly building debugging consoles, documentation, and style guides.

    Demo

    https://avh4.github.io/elm-debug-controls/

    Usage

    Suppose we have an Elm data structure like the following and want to create a simple debugging tool to experiment with different values:

    import Time
    
    type alias UploadRequest =
        { path : String
        , mode : WriteMode
        , autorename : Bool
        , clientModified : Maybe Time.Posix
        , mute : Bool
        , content : String
        }
    
    type WriteMode
        = Add
        | Overwrite
        | Update String
    

    Using elm-debug-controls, we can quickly create an interactive UI to create UploadRequest values:

    elm install avh4/elm-debug-controls
    
    import Debug.Control exposing (bool, choice, field, map, record, string, value)
    
    type alias Model =
        { ...
        , uploadRequest : Debug.Control.Control UploadRequest
        }
    
    init : Model
    init =
        { ...
        , uploadRequest =
            record UploadRequest
                |> field "path" (string "/demo.txt")
                |> field "mode"
                    (choice
                        [ ( "Add", value Add )
                        , ( "Overwrite", value Overwrite )
                        , ( "Update rev", map Update <| string "123abcdef" )
                        ]
                    )
                |> field "autorename" (bool False)
                |> field "clientModified"
                    (maybe False <| date Time.utc <| Time.millisToPosix 0)
                |> field "mute" (bool False)
                |> field "content" (string "HELLO.")
        }
    

    Now we can hook the control up to our view:

    type Msg
        = ...
        | ChangeUploadRequest (Debug.Control.Control UploadRequest)
    
    update : Msg -> Model -> Model
    update msg model =
        case msg of
            ...
            ChangeUploadRequest uploadRequest ->
                { model | uploadRequest = uploadRequest }
    
    view : Model -> Html Msg
    view model =
        ...
        Debug.Control.view ChangeUploadRequest model.uploadRequest
    

    We now have an interactive UI that looks like this:

    Screen capture of the interactive UI

    Finally, we can use the UploadResponse value elsewhere in our program with:

    Debug.Control.currentValue model.uploadRequest