Opaque type that holds the current state

type alias Model =
    { dropdownState : Dropdown.State
    }

Create a new state. You must pass a unique identifier for each dropdown component.

{
    ...
    dropdownState = Dropdown.init "country-dropdown"
}

Opaque type for the internal dropdown messages

Opaque type that holds the current config

dropdownConfig =
    Dropdown.basic
        { allItems = always [ "apples", "bananas", "oranges" ]
        , selectedItem = .selectedFruit
        , dropdownMsg = DropdownMsg
        , onSelectMsg = FruitPicked
        , itemToPrompt = Element.text
        , itemToElement = \selected -> \highlighted -> Element.text
        }

Create a basic configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected item from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemToPrompt - A function to get the Element to display from an item, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Create a filterable configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected item from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemToPrompt - A function to get the Element to display from an item, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown
- itemToText - A function to get the text representation from an item, to be used when filtering elements in the list

Create a multiselect configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected items from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemsToPrompt - A function to get the Element to display from the list of selected items, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Sets the container visual attributes, default is empty

Dropdown.withContainerAttributes [ width (px 300) ] config

Sets the content of the Select, default is "-- Select --"

Dropdown.withPromptElement (el [ Font.color (rgb255 123 123 123) ] <| text "Pick one") config

Sets the placeholder of the Filterable dropdown, default is "Filter values"

Dropdown.withFilterPlaceholder "Type here..." config

Sets the select visual attributes, default is empty

Dropdown.withSelectAttributes [ Border.width 1, Border.rounded 5, paddingXY 16 8 ] config

Sets the search visual attributes, default is empty

Dropdown.withSearchAttributes [ Border.width 0, padding 0 ] config

Sets the open and close buttons' visual attributes, default is empty

Dropdown.withOpenCloseButtons { openButton = text "+", closeButton = "-" } config

Sets the item list visual attributes, default is empty

Dropdown.withListAttributes [ Border.width 1, Border.rounded ] config

Update the component state

DropdownMsg subMsg ->
    let
        ( updated, cmd ) =
            Dropdown.update dropdownConfig subMsg model model.dropdownState model.items
    in
        ( { model | dropdownState = updated }, cmd )

Render the view

Dropdown.view dropdownConfig model model.dropdownState model.items

Serves as a subscription to know when the user has clicked outside a certain dropdown

- dropdownState: State of the dropdown we want to subscribe to
- dropdownMsg: The message to wrap all the internal messages of the dropdown


subscriptions : Model -> Sub Msg
subscriptions model =
    Dropdown.onOutsideClick model.dropdownState DropdownMsg

Allows tests with elm-program-test

Resolves Effect as Elm's Cmds. If you plan to implement this yourself, it looks like this:

performEffect : Effect msg -> Cmd msg
performEffect effect =
    case effect of
        Loopback msg ->
            Task.perform identity <| Task.succeed msg


        DomFocus msg id ->
            Task.attempt msg (Dom.focus id)

Same as update but returning a list of Effect.

Same as Cmd.map, but for an Effect.