PackagesReroutesAboutlamdera.com

gribouille/elm-treeview/2.0.1

NOTE: the latest version is 2.0.2

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/gribouille/elm-treeview.

What we checked: Tag 2.0.1 is still on github.com/gribouille/elm-treeview; its commit a72594097d9d is from 2019-11-07 13:48 UTC, before the version was published (2019-11-07 13:51 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/gribouille/elm-treeview/zipball/2.0.1/

READMEAboutVersionsSourceModules

Treeview

A customizable ELM treeview component.

Usage example:

import Html
import Treeview exposing (..)


model : Model
model = ...     -- see Model documentation


styles : Styles
styles = ...    -- see Styles documentation


config : Config
config = default styles


main : Program Never Model Msg
main =
  Html.beginnerProgram
    { model = model
    , view = view config
    , update = update
    }

Model

type alias Config =
{ checkbox :
{ enable : Bool
, multiple : Bool
, cascade : Bool
}
, search : { enable : Bool }
, sort : Sort
, look :
{ theme : String
, styles : Styles
}
}

Configure the treeview component.

Options:

  • checkbox.enable: activate the checkbox selection for each node.
  • checkbox.multiple: multiple nodes can be selected.
  • checkbox.cascade: enable the cascading selection (the children node will selected if the parent is selected).
  • search.enable: activate the search toolbar.
  • sort: sort the nodes (see Sort for more details).
  • look.theme: apply the theme.
  • look.styles: define the styles (CSS class and icons) for nodes.

Use default to get a default configuration and set a specific options.

Example:

config : Config
config =
  let
    d = default styles
  in
    {d | search = {enable = True}}
type alias Model =
List Node

Model of treeview.

Example:

model : Model
model =
  [ T.node "pA" "Project A" "folder" False <| Just [
      T.node "pAg1" "Report 1" "folder" False <| Just [
        T.node "pAg1f1" "report_1_revA.pdf" "pdf" True Nothing,
        T.node "pAg1f2" "report_1_revB.pdf" "pdf" True Nothing,
        T.node "pAg1f3" "report_1_revC.pdf" "pdf" True Nothing
      ],
      T.node "pAg2" "Report 2" "folder" False <| Just [
        T.node "pAg2f1" "report_2_revA.pdf" "pdf" True Nothing,
        T.node "pAg2f2" "report_2_revB.pdf" "pdf" True Nothing
      ],
      T.node "pAf1" "lorem.doc" "word" True Nothing,
      T.node "pAf2" "ipsum.xls" "excel" True Nothing
    ],
    T.node "pB" "Keynote" "folder" False <| Just [
      T.node "pBf1" "workshop_part1.ppt" "powerpoint" True Nothing,
      T.node "pBf2" "workshop_part2.ppt" "powerpoint" True Nothing,
      T.node "pBf3" "image1.png" "image" True Nothing,
      T.node "pBf4" "image2.ppt" "image" True Nothing,
      T.node "pBf5" "image3.ppt" "image" True Nothing,
      T.node "pBf5" "image4.ppt" "image" True Nothing
    ]
  ]
type Node
= Node Key Title Options Children

Node is an item of treeview.

Each node has:

  • an unique key
  • a title
  • a list of options (see Options)
  • maybe list of children.
type alias Options =
{ style : StyleName
, selectable : Selectable
, opened : Opened
, disabled : Disabled
, visible : Visible
, checked : Checked
}

Define the option of current node.

Options:

  • style: node style defined in Config.look.styles
  • selectable: True if the node is clickable
  • opened: True if the children are visibles
  • disabled: to disable the node (children handle and node selection)
  • visible: to hide the node
  • checked: to select the node (required Config.checkbox.enable = true).
type alias Styles =
List Style

List of node's styles.

Example:

styles : Styles
styles =
  [ T.Style "folder" ("folder yellow", "folder-open yellow") ""
  , T.Style "archive" ("file-archive-o", "file-archive-o") ""
  , T.Style "word" ("file-word-o", "file-word-o") "blue"
  , T.Style "image" ("file-image-o", "file-image-o") ""
  , T.Style "pdf" ("file-pdf-o", "file-pdf-o") "red"
  , T.Style "powerpoint" ("file-powerpoint-o", "file-powerpoint-o") "orange"
  , T.Style "excel" ("file-excel-o", "file-excel-o") "green"
  ]
type alias Style =
{ name : StyleName
, icon : Icon
, class : Class
}

Define the style of node.

Options:

  • name: a unique id of style
  • icon: icon when the node is closed and when the node is opened
  • class: CSS class of node.

Note: the CSS class opened is added when the node is opened thus you can defined a custom style in function of node state:

.myNodeStyle {
  ...
  .opened {...}
}
type Sort
= None
| Asc
| Desc

Sort the node from the title:

  • None = no sort
  • Asc = ascending order
  • Desc = descending order
default : Styles -> Config

Create a default Config in function of list of styles.

node : Key -> Title -> StyleName -> Selectable -> Children -> Node

Shortcut to create a new Node.

nodeKey : Node -> Key

Get the node key.

nodeChildren : Node -> Children

Get the node children.

setNodeChildren : Children -> Node -> Node

Set the node children.

nodeTitle : Node -> Title

Get the node title.

Toggle the node opening.

setNodeVisible : Visible -> Node -> Node

Set the node visibility.

nodeVisible : Node -> Visible

Get the node visibility.

toggleAll : Model -> Model

Toggle all items.

toggle : Key -> Model -> Model

Toggle the opened options.

Messages

type Msg
= Toggle Key
| Select Key
| Search String
| ToggleCheck Bool Bool Key Bool

Messages of treeview:

  • Toggle Key: open / close a node
  • Select Key: click on the title of node
  • Search String: filter search
  • ToggleCheck Multiple Cascade Key Value: check/uncheck a node checkbox.
update : Msg -> Model -> Model

The treeview update function.

View

view : Config -> Model -> Html Msg

Tree treeview view function.

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera