for more information visit the package's GitHub page
Package contains the following modules:
This Elm package lets you create a dropdown/filters UI:
Criteria
and initialise the Criteria.State
in your modelimport 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
Msg
which will update the statetype Msg = UpdateCriteria Criteria.State
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateCriteria state ->
{ model | criteria = state }
Criteria.view
in your viewview : Model -> Html Msg
view model =
div []
[
Criteria.view criteriaConfig model.criteria filters
]
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 ,... } ```
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
To run the tests make sure to have installed the dependencies of the package with elm install
then run elm-test --verbose
:
| 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