dwyl/elm-criteria - version: 2.2.1

for more information visit the package's GitHub page

Package contains the following modules:

elm-criteria

Build Status HitCount

This Elm package lets you create a dropdown/filters UI:

filters

Use elm-criteria

import Criteria

type alias Model =
    { criteria : Criteria.State }


init : Model
init =
    { criteria = Criteria.init [] }

To initiliase the state with some pre-selected filters, pass an array of the filters' id as a parameter to Criteria.init, for example:

init : Model
init =
    { criteria = Criteria.init ["filterId1", "filterId2"] }
criteriaConfig : Criteria.Config Msg Filter
criteriaConfig =
    Criteria.config
        { title = "My filters"
        , toMsg = UpdateCriteria
        , toId = getFilterId
        , toString = getFilterName
        , getSubFilters = getSubFilters
        }

title: The text displayed in the open/close button toMsg: The message in your application responsible for updating the new Criteria.State in your Model toId: A function which create a unique String representing a filter toString: A function which create the text displayed for a filter getSubFilters: A function which returns the list of sub filters for a specific filter

type Msg = UpdateCriteria Criteria.State

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateCriteria state ->
            { model | criteria = state }
view : Model -> Html Msg
view model =
    div []
        [
          Criteria.view criteriaConfig model.criteria filters
        ]

Customise and set attributes

elm-criteria expose a specific config function to define some html attributes to the main html element of the package.

criteriaConfig : Criteria.Config Msg Filter
criteriaConfig =
    let
        defaultCustomisations =
            Criteria.defaultCustomisations
    in
    Criteria.customConfig
        { title = "My Customed filters"
        , toMsg = UpdateCriteria
        , toId = getFilterId
        , toString = getFilterName
        , getSubFilters = getSubFilters
        , customisations =
            { defaultCustomisations
                | buttonAttrs = customButton
                , filterLabelAttrs = customFilter
            }
        }

The Criteria.defaultCustomisations function return a Criteria.Customisations filter msg type which is a type alias of a record defined as the following:

```type alias Customisations filter msg = { mainDivAttrs : List (Attribute msg) , buttonAttrs : State -> List (Attribute msg) , filtersDivAttrs : List (Attribute msg) , filterDivAttrs : filter -> State -> List (Attribute msg) , filterLabelAttrs : filter -> State -> List (Attribute msg) , subFilterDivAttrs : List (Attribute msg) , filterImgToggleAttrs : List (Attribute msg) }


This type alias is directly accessible and the default values can be redefined
as shown above, ie:

, customisations = { defaultCustomisations | buttonAttrs = customButton , filterLabelAttrs = customFilter ,... } ```

Examples

See the default live example and its code

See the customised example and its code

To run the exmple on your machine: - clone this repository git clone git@github.com:dwyl/elm-criteria.git && cd elm-criteria - move to the examples directory: cd examples - run elm reactor - visit localhost:8000 and select the example Elm file you want to run

Tests

To run the tests make sure to have installed the dependencies of the package with elm install then run elm-test --verbose:

tests

Releases

| Version | Notes | | ------- | ----- | | 2.2.0 | Expose openFilters closeFilters isOpen functions | 2.1.0 | Expose unselectFilter function | 2.0.0 | Update init: first parameter is list of selected filters | 1.1.0 | add API functions to define attributes to the main elements (ie button, label, divs) | 1.0.1 | add toggle for sub-filters | 1.0.0 | elm-criteria initial release