{"id":15059596,"url":"https://github.com/gribouille/elm-treeview","last_synced_at":"2025-04-10T05:41:00.581Z","repository":{"id":47720326,"uuid":"98577307","full_name":"gribouille/elm-treeview","owner":"gribouille","description":"ELM tree view component","archived":false,"fork":false,"pushed_at":"2021-09-07T13:57:19.000Z","size":367,"stargazers_count":20,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T06:54:37.277Z","etag":null,"topics":["elm","elm-lang","javascript","scss","treeview"],"latest_commit_sha":null,"homepage":"https://gribouille.github.io/demos/elm-treeview/latest/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gribouille.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-27T20:29:20.000Z","updated_at":"2021-09-07T13:56:45.000Z","dependencies_parsed_at":"2022-08-17T15:25:57.262Z","dependency_job_id":null,"html_url":"https://github.com/gribouille/elm-treeview","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gribouille%2Felm-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gribouille%2Felm-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gribouille%2Felm-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gribouille%2Felm-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gribouille","download_url":"https://codeload.github.com/gribouille/elm-treeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247828793,"owners_count":21002975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","elm-lang","javascript","scss","treeview"],"created_at":"2024-09-24T22:45:52.049Z","updated_at":"2025-04-10T05:41:00.563Z","avatar_url":"https://github.com/gribouille.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-treeview\n\n[![Build Status](https://travis-ci.org/gribouille/elm-treeview.svg?branch=master)](https://travis-ci.org/gribouille/elm-treeview)\n\nA customizable ELM treeview component.\n\n[DEMOS](https://gribouille.github.io/demos/elm-treeview/latest/)\n\n\n## Example\n\nBasic example with defaut options:\n\n```elm\nimport Html\nimport Treeview\n\nstyles : Styles\nstyles =\n  [ T.Style \"folder\" (\"folder yellow\", \"folder-open yellow\") \"\"\n  , T.Style \"archive\" (\"file-archive-o\", \"file-archive-o\") \"\"\n  , T.Style \"word\" (\"file-word-o\", \"file-word-o\") \"blue\"\n  , T.Style \"image\" (\"file-image-o\", \"file-image-o\") \"\"\n  , T.Style \"pdf\" (\"file-pdf-o\", \"file-pdf-o\") \"red\"\n  , T.Style \"powerpoint\" (\"file-powerpoint-o\", \"file-powerpoint-o\") \"orange\"\n  , T.Style \"excel\" (\"file-excel-o\", \"file-excel-o\") \"green\"\n  ]\n\nmodel : Model\nmodel =\n  [ T.node \"pA\" \"Project A\" \"folder\" False \u003c| Just [\n      T.node \"pAg1\" \"Report 1\" \"folder\" False \u003c| Just [\n        T.node \"pAg1f1\" \"report_1_revA.pdf\" \"pdf\" True Nothing,\n        T.node \"pAg1f2\" \"report_1_revB.pdf\" \"pdf\" True Nothing,\n        T.node \"pAg1f3\" \"report_1_revC.pdf\" \"pdf\" True Nothing\n      ],\n      T.node \"pAg2\" \"Report 2\" \"folder\" False \u003c| Just [\n        T.node \"pAg2f1\" \"report_2_revA.pdf\" \"pdf\" True Nothing,\n        T.node \"pAg2f2\" \"report_2_revB.pdf\" \"pdf\" True Nothing\n      ],\n      T.node \"pAf1\" \"lorem.doc\" \"word\" True Nothing,\n      T.node \"pAf2\" \"ipsum.xls\" \"excel\" True Nothing\n    ],\n    T.node \"pB\" \"Keynote\" \"folder\" False \u003c| Just [\n      T.node \"pBf1\" \"workshop_part1.ppt\" \"powerpoint\" True Nothing,\n      T.node \"pBf2\" \"workshop_part2.ppt\" \"powerpoint\" True Nothing,\n      T.node \"pBf3\" \"image1.png\" \"image\" True Nothing,\n      T.node \"pBf4\" \"image2.ppt\" \"image\" True Nothing,\n      T.node \"pBf5\" \"image3.ppt\" \"image\" True Nothing,\n      T.node \"pBf6\" \"image4.ppt\" \"image\" True Nothing\n    ]\n  ]\n\nconfig : T.Config\nconfig = T.default styles\n\n\nmain : Program Never T.Model T.Msg\nmain =\n  Html.beginnerProgram\n    { model = model\n    , view = T.view config\n    , update = T.update\n    }\n```\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./examples/ex1.png\" /\u003e\u003c/p\u003e\n\n\nWith search input:\n\n```elm\nconfig : T.Config\nconfig =\n  let\n    d = T.default styles\n  in\n    {d | search = { enable = True}}\n```\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./examples/ex2.png\" /\u003e\u003c/p\u003e\n\nWith checkbox selection:\n\n```elm\nconfig : T.Config\nconfig =\n  let\n    d = T.default styles\n  in\n    {d | checkbox = { enable = True, multiple = True, cascade = True}}\n```\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./examples/ex3.png\" /\u003e\u003c/p\u003e\n\n\n## Theme\n\nSee the `treeview.scss` file in the `styles` folder to customize the theme.\n\n## Options\n\n| Name                | Type       | Default | Description                                                                                 |\n| ------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------- |\n| `checkbox.enable`   | `Bool`     | `False` | Activate the checkbox selection for each node.                                              |\n| `checkbox.multiple` | `Bool`     | `False` | Multiple nodes can be selected.                                                             |\n| `checkbox.cascade`  | `Bool`     | `False` | Enable the cascading selection (the children node will selected if the parent is selected). |\n| `search.enable`     | `Bool`     | `False` | Activate the search toolbar.                                                                |\n| `sort`              | `Sort`     | `None`  | Sort the nodes: Asc = ascending, Desc = descending.                                         |\n| `look.theme`   | `String`   | `\"\"`    | Apply the theme.                                                                            |\n| `look.styles`  | `[Styles]` | `[]`    | Define the styles (CSS class and icons) for nodes.                                          |\n\n## Documentation\n\nSee documentation [here](http://package.elm-lang.org/packages/gribouille/elm-treeview/latest).\n\n## Usage\n\nTo run the examples:\n```shell\n$ cd examples\n$ npm i\n$ npm run dev\n```\nOpen [localhost:8080](http://localhost:8080).\n\n\n## TODO\n- [x] updated for ELM 0.19.x\n- [x] search toolbar\n- [x] checkbox\n- [ ] ajax\n- [ ] interface for JS\n- [ ] other themes\n- [ ] contextual menu\n- [ ] unit test\n\n## Contributing\n\nFeedback and contributions are very welcome.\n\n\n## License\n\nThis project is licensed under [Mozilla Public License Version 2.0](./LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgribouille%2Felm-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgribouille%2Felm-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgribouille%2Felm-treeview/lists"}