docs.json

[{"name":"Autocomplete","comment":" Autocomplete contains the main logic to handle auto-complete.\nThe state and logic of Autocomplete should reside within your model.\nPlease refer to our examples to see how it all linked up.\n\nTo render the Autocomplete, please refer to `Autocomplete.View` or `Autocomplete.Styled`.\n\n\n# Types\n\n@docs Autocomplete, Msg, Choices, ViewState, ViewStatus\n\n\n# State Management\n\n@docs init, update\n\n\n# Helpers\n\n@docs reset, selectedValue\n\n\n# Accessors\n\n@docs viewState, query, choices, selectedIndex, isSelected\n\n","unions":[{"name":"Autocomplete","comment":" Opaque type of Autocomplete state\n","args":["a"],"cases":[]},{"name":"ViewStatus","comment":" A useful union type for rendering the correct view for each state of Autocomplete\n","args":[],"cases":[["NotFetched",[]],["Fetching",[]],["Error",["String.String"]],["FetchedChoices",[]]]}],"aliases":[{"name":"Choices","comment":" Record to hold the query and choices for your fetcher function.\n\n    type alias Choices a =\n        { query : String\n        , choices : List a\n        , ignoreList : List a\n        }\n\n    fetcher : Autocomplete.Choices String -> Task String (Autocomplete.Choices String)\n    fetcher lastChoices =\n        let\n            dogs =\n                [ \"Hunter\"\n                , \"Polo\"\n                , \"Loki\"\n                , \"Angel\"\n                , \"Scout\"\n                , \"Lexi\"\n                , \"Zara\"\n                , \"Maya\"\n                , \"Baby\"\n                , \"Bud\"\n                , \"Ella\"\n                , \"Ace\"\n                , \"Kahlua\"\n                , \"Jake\"\n                , \"Apollo\"\n                , \"Sammy\"\n                , \"Puppy\"\n                , \"Gucci\"\n                , \"Mac\"\n                , \"Belle\"\n                ]\n\n            insensitiveStringContains : String -> String -> Bool\n            insensitiveStringContains a b =\n                String.contains (String.toLower a) (String.toLower b)\n\n            choiceList : List String\n            choiceList =\n                if String.length lastChoices.query == 0 then\n                    []\n\n                else\n                    List.filter (insensitiveStringContains lastChoices.query) dogs\n        in\n        Task.succeed { lastChoices | choices = choiceList }\n\n","args":["a"],"type":"Internal.Choices a"},{"name":"Msg","comment":" Opaque type of Autocomplete internal msg\n","args":["a"],"type":"Internal.Msg a"},{"name":"ViewState","comment":" Record to expose common values of Autocomplete to be used for display\n","args":["a"],"type":"{ query : String.String, choices : List.List a, ignoreList : List.List a, selectedIndex : Maybe.Maybe Basics.Int, status : Autocomplete.ViewStatus }"}],"values":[{"name":"choices","comment":" Returns the current list of choices\n","type":"Autocomplete.Autocomplete a -> List.List a"},{"name":"init","comment":" Initialize the Autocomplete state with your fetcher function\n\n    init : ( Model, Cmd Msg )\n    init =\n        ( { -- Initialize the Autocomplete state\n            autocompleteState = Autocomplete.init { query = \"\", choices = [], ignoreList = [] } fetcher\n          , selectedValue = Nothing\n          }\n        , Cmd.none\n        )\n\n    fetcher : Autocomplete.Choices String -> Task String (Autocomplete.Choices String)\n    fetcher lastChoices =\n        let\n            dogs =\n                [ \"Hunter\"\n                , \"Polo\"\n                , \"Loki\"\n                , \"Angel\"\n                , \"Scout\"\n                , \"Lexi\"\n                , \"Zara\"\n                , \"Maya\"\n                , \"Baby\"\n                , \"Bud\"\n                , \"Ella\"\n                , \"Ace\"\n                , \"Kahlua\"\n                , \"Jake\"\n                , \"Apollo\"\n                , \"Sammy\"\n                , \"Puppy\"\n                , \"Gucci\"\n                , \"Mac\"\n                , \"Belle\"\n                ]\n\n            insensitiveStringContains : String -> String -> Bool\n            insensitiveStringContains a b =\n                String.contains (String.toLower a) (String.toLower b)\n\n            choiceList : List String\n            choiceList =\n                if String.length lastChoices.query == 0 then\n                    []\n\n                else\n                    List.filter (insensitiveStringContains lastChoices.query) dogs\n        in\n        Task.succeed { lastChoices | choices = choiceList }\n\n","type":"Autocomplete.Choices a -> (Autocomplete.Choices a -> Task.Task String.String (Autocomplete.Choices a)) -> Autocomplete.Autocomplete a"},{"name":"isSelected","comment":" Helper function to calculate if an index is selected\n\n    renderChoice : (Int -> List (Attribute Msg)) -> Maybe Int -> Int -> String -> Html Msg\n    renderChoice events selectedIndex index s =\n        Html.div\n            (if Autocomplete.isSelected selectedIndex index then\n                Html.Attributes.style \"backgroundColor\" \"#EEE\" :: events index\n\n             else\n                Html.Attributes.style \"backgroundColor\" \"#FFF\" :: events index\n            )\n            [ Html.text s ]\n\n","type":"Maybe.Maybe Basics.Int -> Basics.Int -> Basics.Bool"},{"name":"query","comment":" Returns the query of the Autocomplete\n","type":"Autocomplete.Autocomplete a -> String.String"},{"name":"reset","comment":" Reset the Autocomplete State\n\nThere are many scenarios Autocomplete can handle using the `reset`.\n\nOn selected value, display selectedValue but remove all choices:\n\n    Autocomplete.reset\n        { query = Maybe.withDefault query selectedValue\n        , choices = []\n        , ignoreList = []\n        }\n        autocompleteState\n\nOn selected multiple values, ignore selected values but still display the choices:\n\n    Autocomplete.reset\n        { query = \"\"\n        , choices = Autocomplete.choices autocompleteState\n        , ignoreList = selectedValueList\n        }\n        autocompleteState\n\n","type":"Autocomplete.Choices a -> Autocomplete.Autocomplete a -> Autocomplete.Autocomplete a"},{"name":"selectedIndex","comment":" Returns the selected index of the Autocomplete\n","type":"Autocomplete.Autocomplete a -> Maybe.Maybe Basics.Int"},{"name":"selectedValue","comment":" Returns the selectedValue\n","type":"Autocomplete.Autocomplete a -> Maybe.Maybe a"},{"name":"update","comment":" Updates the Autocomplete state\n\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            -- This is the main wire-up to pass Autocomplete Msg to Autocomplete state\n            OnAutocomplete autocompleteMsg ->\n                let\n                    ( newAutocompleteState, autoCompleteCmd ) =\n                        Autocomplete.update autocompleteMsg model.autocompleteState\n                in\n                ( { model | autocompleteState = newAutocompleteState }\n                , Cmd.map OnAutocomplete autoCompleteCmd\n                )\n\n    -- ...\n\n","type":"Autocomplete.Msg a -> Autocomplete.Autocomplete a -> ( Autocomplete.Autocomplete a, Platform.Cmd.Cmd (Autocomplete.Msg a) )"},{"name":"viewState","comment":" Returns the ViewState of the Autocomplete to render the view.\nRemember to attach Autocomplete events to your view!\nSee [Autocomplete.View](Autocomplete.View#events)\n","type":"Autocomplete.Autocomplete a -> Autocomplete.ViewState a"}],"binops":[]},{"name":"Autocomplete.Styled","comment":" Autocomplete.Styled exposes [HTML.Styled](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css) events to be attached for input and every autocomplete choice.\n\n\n# Type\n\n@docs Events, EventMapper\n\n\n# Attributes\n\n@docs events\n\n","unions":[],"aliases":[{"name":"EventMapper","comment":" Map Autocomplete Msg into your app's msg and also the msg to send when user selects a choice\n","args":["a","msg"],"type":"{ onSelect : msg, mapHtml : Internal.Msg a -> msg }"},{"name":"Events","comment":" Record to hold the events to be attached for input and every autocomplete choice\n","args":["msg"],"type":"{ inputEvents : List.List (Html.Styled.Attribute msg), choiceEvents : Basics.Int -> List.List (Html.Styled.Attribute msg) }"}],"values":[{"name":"events","comment":" Returns the events to be attached for input and every autocomplete choice\n","type":"Autocomplete.Styled.EventMapper a msg -> Autocomplete.Styled.Events msg"}],"binops":[]},{"name":"Autocomplete.View","comment":" Autocomplete.View exposes HTML events to be attached for input and every autocomplete choice.\n\n    view : Model -> Html Msg\n    view model =\n        let\n            { selectedValue, autocompleteState } =\n                model\n\n            -- Get view-related state from the Autocomplete State\n            { query, choices, selectedIndex, status } =\n                Autocomplete.viewState autocompleteState\n\n            -- Important! We need to attach input and choice events to our view\n            { inputEvents, choiceEvents } =\n                AutocompleteView.events\n                    { onSelect = OnAutocompleteSelect\n                    , mapHtml = OnAutocomplete\n                    }\n        in\n        Html.div []\n            [ Html.div [] [ Html.text <| \"Selected Value: \" ++ Maybe.withDefault \"Nothing\" selectedValue ]\n\n            -- Our simple input view with the inputEvents from AutocompleteView.events\n            -- which handles keydown/input events\n            -- We add our own custom onBlur event to close the Autocomplete when focus is lost\n            , Html.input\n                (inputEvents\n                    ++ [ Html.Attributes.value query, Html.Events.onBlur OnAutocompleteBlur ]\n                )\n                []\n\n            -- The container for our choices\n            , Html.div [] <|\n                -- Autocomplete.viewState provides a fetching status type\n                -- We can use this to render our choices\n                case status of\n                    Autocomplete.NotFetched ->\n                        [ Html.text \"\" ]\n\n                    Autocomplete.Fetching ->\n                        [ Html.text \"Fetching...\" ]\n\n                    Autocomplete.Error s ->\n                        [ Html.text s ]\n\n                    Autocomplete.FetchedChoices ->\n                        if String.length query > 0 then\n                            -- Our simple div view for each choice with choiceEvent\n                            -- from AutocompleteView.events which handles mouse click events\n                            List.indexedMap (renderChoice choiceEvents selectedIndex) choices\n\n                        else\n                            [ Html.text \"\" ]\n            ]\n\n    renderChoice : (Int -> List (Attribute Msg)) -> Maybe Int -> Int -> String -> Html Msg\n    renderChoice events selectedIndex index s =\n        Html.div\n            (if Autocomplete.isSelected selectedIndex index then\n                Html.Attributes.style \"backgroundColor\" \"#EEE\" :: events index\n\n             else\n                Html.Attributes.style \"backgroundColor\" \"#FFF\" :: events index\n            )\n            [ Html.text s ]\n\n\n# Type\n\n@docs Events, EventMapper\n\n\n# Attributes\n\n@docs events\n\n","unions":[],"aliases":[{"name":"EventMapper","comment":" Map Autocomplete Msg into your app's msg and also the msg to send when user selects a choice\n","args":["a","msg"],"type":"{ onSelect : msg, mapHtml : Internal.Msg a -> msg }"},{"name":"Events","comment":" Record to hold the events to be attached for input and every autocomplete choice\n","args":["msg"],"type":"{ inputEvents : List.List (Html.Attribute msg), choiceEvents : Basics.Int -> List.List (Html.Attribute msg) }"}],"values":[{"name":"events","comment":" Returns the events to be attached for input and every autocomplete choice\n","type":"Autocomplete.View.EventMapper a msg -> Autocomplete.View.Events msg"}],"binops":[]}]