wunderbaum 0.0.4 → 0.0.5

package/README.md

@@ -9,6 +9,8 @@
 > Potential successor of [Fancytree](https://github.com/mar10/fancytree).<br>
 > **NOTE: Status _experimental_. Do not use in production!**
 
+[![Demo](docs/assets/teaser_1.png?raw=true)](https://mar10.github.io/wunderbaum/demo/)
+
 <!-- https://de.wikipedia.org/wiki/Wunderbaum -->
 
 Wunderbaum is a rewrite of the [Fancytree](https://github.com/mar10/fancytree)

package/dist/wunderbaum.css

@@ -2,4 +2,4 @@
  * Wunderbaum style sheet (generated from wunderbaum.scss)
  * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
- */div.wunderbaum{box-sizing:border-box;height:100%;background-color:#fff;margin:0;padding:0;font-family:Helvetica,sans-serif;font-size:14px;color:#56534c;border:2px solid #56534c;border-radius:4px;background-clip:content-box;overflow:hidden}div.wunderbaum:focus,div.wunderbaum:focus-within{border-color:#275dc5}div.wunderbaum div.wb-scroll-container{position:relative;overflow:auto;min-height:4px}div.wunderbaum div.wb-row{position:absolute;width:100%;height:22px;line-height:22px;border:1px solid transparent}div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active,div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected{background-color:#f0f0f0;border-color:#acacac}div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover{background-color:#eaeaea}div.wunderbaum div.wb-node-list div.wb-row:hover{background-color:#f7fcfe}div.wunderbaum div.wb-node-list div.wb-row.wb-active,div.wunderbaum div.wb-node-list div.wb-row.wb-selected{background-color:#e5f3fb}div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover{background-color:#dceff8}div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active){border-style:dotted;border-color:#70c0e7}div.wunderbaum div.wb-node-list div.wb-row.wb-active{border-style:solid;border-color:#70c0e7}div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover{border-color:#26a0da}div.wunderbaum div.wb-node-list div.wb-row.wb-loading{font-style:italic}div.wunderbaum div.wb-node-list div.wb-row.wb-dirty,div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-dirty{font-style:italic;background:repeating-linear-gradient(45deg, #f7fcfe, #f7fcfe 5px, #dedede 5px, #dedede 10px);animation:wb-dirty-animation 2s linear infinite}div.wunderbaum div.wb-node-list div.wb-row.wb-error,div.wunderbaum div.wb-node-list div.wb-row.wb-status-error{color:#b5373b}div.wunderbaum div.wb-header{position:relative;height:22px;border-bottom:1px solid #56534c;padding:0;background-color:#dedede}div.wunderbaum div.wb-header span.wb-col{font-weight:bold}div.wunderbaum span.wb-col{position:absolute;display:inline-block;height:20px;line-height:20px;padding:0 2px;border-right:1px solid #dedede;overflow:visible}div.wunderbaum span.wb-col:last-of-type{border-right:none}div.wunderbaum span.wb-col span.wb-col-title{width:100%;overflow:hidden;text-overflow:ellipsis}div.wunderbaum span.wb-col span.wb-col-resizer{position:absolute;top:0;right:-1px;width:3px;border:none;border-right:2px solid #56534c;height:100%;cursor:col-resize}div.wunderbaum span.wb-node{user-select:none}div.wunderbaum i.wb-checkbox,div.wunderbaum i.wb-expander,div.wunderbaum i.wb-icon,div.wunderbaum i.wb-indent{height:20px;width:20px;padding:2px 2px;display:inline-block}div.wunderbaum i.bi::before{vertical-align:baseline}div.wunderbaum img.wb-icon{width:16px;height:16px;padding:2px 2px}div.wunderbaum i.wb-indent::before{content:"\00a0"}div.wunderbaum i.wb-expander.wb-spin,div.wunderbaum i.wb-icon.wb-spin{height:unset;width:unset;padding:0 3px;animation:wb-spin-animation 2s linear infinite}div.wunderbaum span.wb-title{min-width:1em;display:inline-block;vertical-align:top;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover{background-color:#c5c5c5}div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active{background-color:#dceff8}div.wunderbaum.wb-grid div.wb-node-list div.wb-row{border-bottom-color:#dedede}div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected){background-color:#f7fcfe}div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active{border-bottom-color:#70c0e7}div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col{border-right:1px solid #dedede}div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="color"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="date"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="datetime"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="datetime-local"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="email"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="month"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="number"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="password"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="search"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="tel"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="text"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="time"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="url"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="week"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>select{width:100%}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row{background-color:#fff}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row span.wb-col.wb-active{background-color:#f7fcfe}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row.wb-active{background-color:#f7fcfe}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row.wb-active span.wb-col.wb-active{background-color:#26a0da}div.wunderbaum.wb-grid.wb-cell-mode.wb-cell-edit-mode div.wb-row.wb-active span.wb-col.wb-active{background-color:#b5373b}div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected){background-color:#fcfcfc}div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover{background-color:#f7fcfe}div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row,div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row{border-bottom-color:#dedede}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row{color:#dedede}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch{color:#868581}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match{color:#56534c}div.wunderbaum div.wb-row.wb-drag-source{opacity:0.5}div.wunderbaum div.wb-row.wb-drag-source .wb-node{background-color:#d3d2ce}div.wunderbaum div.wb-row.wb-drop-target{overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node{background-color:#d4ecf8;overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon{position:relative;overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after{position:absolute;z-index:1000;content:url(../docs/assets/drop_marker_16x32.png);left:0;top:3px}div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after{content:url(../docs/assets/drop_marker_insert_16x64.png);left:0;top:-8px}div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after{content:url(../docs/assets/drop_marker_insert_16x64.png);left:0;top:14px}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+1),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+1){background:#ffffe8}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+2),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+2){background:#f0fff0}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+3),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+3){background:#fff0ff}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+4),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+4){background:#eafdfd}div.wunderbaum.wb-fade-expander i.wb-expander{transition:color 1.5s;color:rgba(86,83,76,0)}div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander,div.wunderbaum.wb-fade-expander:hover i.wb-expander,div.wunderbaum.wb-fade-expander:focus i.wb-expander,div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,div.wunderbaum.wb-fade-expander [class*="wb-statusnode-"] i.wb-expander{transition:color 0.6s;color:#56534c}div.wunderbaum div.wb-row.wb-skeleton span.wb-title,div.wunderbaum div.wb-row.wb-skeleton i.wb-icon{animation:wb-skeleton-animation 1s linear infinite alternate;border-radius:0.25em;color:transparent;opacity:0.7}div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox{visibility:hidden}div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox{visibility:unset}div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox,div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox{visibility:unset}.wb-helper-center{text-align:center}.wb-helper-disabled{color:#8c877c}.wb-helper-hidden{display:none}.wb-helper-invalid{color:#b5373b}.wb-helper-lazy-expander{color:#26a0da}.wb-helper-link{cursor:pointer}.wb-helper-start{text-align:left}.wb-helper-end{text-align:right}.wb-rtl .wb-helper-start{text-align:right}.wb-rtl .wb-helper-end{text-align:left}.wb-col input[type="checkbox"]:indeterminate{color:#8c877c;background-color:red}.wb-col input:invalid{color:#b5373b;background-color:#f5ddde}@keyframes wb-spin-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wb-skeleton-animation{0%{background-color:#a3b8c2}100%{background-color:#f0f3f5}}@keyframes wb-dirty-animation{0%{background-position:0 0}100%{background-position:-70px 0}}
+ */div.wunderbaum{box-sizing:border-box;height:100%;background-color:#fff;margin:0;padding:0;font-family:Helvetica,sans-serif;font-size:14px;color:#56534c;border:2px solid #56534c;border-radius:4px;background-clip:content-box;overflow-x:auto;overflow-y:scroll}div.wunderbaum:focus,div.wunderbaum:focus-within{border-color:#275dc5}div.wunderbaum.wb-disabled{opacity:0.7;pointer-events:none}div.wunderbaum div.wb-scroll-container{position:relative;min-height:4px}div.wunderbaum div.wb-header{position:sticky;top:0;z-index:2}div.wunderbaum div.wb-header,div.wunderbaum div.wb-scroll-container{overflow:unset}div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type{background-color:#dedede}div.wunderbaum.wb-fixed-col span.wb-col:first-of-type{position:sticky;left:0;z-index:1;background-color:#fff}div.wunderbaum div.wb-row{position:absolute;width:100%;height:22px;line-height:22px;border:1px solid transparent}div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active,div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected{background-color:#f0f0f0;border-color:#acacac}div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover{background-color:#eaeaea}div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected){background-color:#f7f7f7}div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover{background-color:#f3f3f3}div.wunderbaum div.wb-node-list div.wb-row:hover{background-color:#f7fcfe}div.wunderbaum div.wb-node-list div.wb-row.wb-active,div.wunderbaum div.wb-node-list div.wb-row.wb-selected{background-color:#e5f3fb}div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover,div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover{background-color:#dceff8}div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active){border-style:dotted;border-color:#70c0e7}div.wunderbaum div.wb-node-list div.wb-row.wb-active{border-style:solid;border-color:#70c0e7}div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover{border-color:#26a0da}div.wunderbaum div.wb-node-list div.wb-row.wb-loading{font-style:italic}div.wunderbaum div.wb-node-list div.wb-row.wb-busy,div.wunderbaum div.wb-node-list div.wb-row i.wb-busy,div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-busy{font-style:italic;background:repeating-linear-gradient(45deg, transparent, transparent 3.88px, #dedede 3.88px, #dedede 7.78px);animation:wb-busy-animation 2s linear infinite}div.wunderbaum div.wb-node-list div.wb-row.wb-error,div.wunderbaum div.wb-node-list div.wb-row.wb-status-error{color:#b5373b}div.wunderbaum div.wb-header{position:sticky;height:22px;border-bottom:1px solid #56534c;padding:0;background-color:#dedede}div.wunderbaum div.wb-header span.wb-col{font-weight:bold}div.wunderbaum span.wb-col{position:absolute;display:inline-block;height:20px;line-height:20px;padding:0 2px;border-right:1px solid #dedede;overflow:visible}div.wunderbaum span.wb-col:last-of-type{border-right:none}div.wunderbaum span.wb-col span.wb-col-title{width:100%;overflow:hidden;text-overflow:ellipsis}div.wunderbaum span.wb-col span.wb-col-resizer{position:absolute;top:0;right:-1px;width:3px;border:none;border-right:2px solid #56534c;height:100%;cursor:col-resize}div.wunderbaum span.wb-node{user-select:none}div.wunderbaum i.wb-checkbox,div.wunderbaum i.wb-expander,div.wunderbaum i.wb-icon,div.wunderbaum i.wb-indent{height:20px;width:20px;padding:2px 2px;display:inline-block}div.wunderbaum i.bi::before{vertical-align:baseline}div.wunderbaum img.wb-icon{width:16px;height:16px;padding:2px 2px}div.wunderbaum i.wb-indent::before{content:"\00a0"}div.wunderbaum i.wb-expander.wb-spin,div.wunderbaum i.wb-icon.wb-spin{height:unset;width:unset;padding:0 3px;animation:wb-spin-animation 2s linear infinite}div.wunderbaum span.wb-title{min-width:1em;vertical-align:top;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover{background-color:#c5c5c5}div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active{background-color:#dceff8}div.wunderbaum.wb-grid div.wb-node-list div.wb-row{border-bottom-color:#dedede}div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected){background-color:#f7fcfe}div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active{border-bottom-color:#70c0e7}div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col{border-right:1px solid #dedede}div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="color"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="date"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="datetime"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="datetime-local"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="email"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="month"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="number"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="password"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="search"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="tel"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="text"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="time"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="url"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>input[type="week"],div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col>select{width:100%;max-height:20px}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row{background-color:#fff}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row span.wb-col.wb-active{background-color:#f7fcfe}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row.wb-active{background-color:#f7fcfe}div.wunderbaum.wb-grid.wb-cell-mode div.wb-row.wb-active span.wb-col.wb-active{background-color:#26a0da}div.wunderbaum.wb-grid.wb-cell-mode.wb-cell-edit-mode div.wb-row.wb-active span.wb-col.wb-active{background-color:#b5373b}div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected){background-color:#f7f7f7}div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover{background-color:#f3f3f3}div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row,div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row{border-bottom-color:#dedede}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row{color:#dedede}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch{color:#868581}div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match,div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match{color:#56534c}div.wunderbaum div.wb-row.wb-drag-source{opacity:0.5}div.wunderbaum div.wb-row.wb-drag-source .wb-node{background-color:#d3d2ce}div.wunderbaum div.wb-row.wb-drop-target{overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node{background-color:#d4ecf8;overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon{position:relative;overflow:visible}div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after{position:absolute;z-index:1000;content:url(../docs/assets/drop_marker_16x32.png);left:0;top:3px}div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after{content:url(../docs/assets/drop_marker_insert_16x64.png);left:0;top:-8px}div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after{content:url(../docs/assets/drop_marker_insert_16x64.png);left:0;top:14px}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+1),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+1){background:#ffffe8}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+2),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+2){background:#f0fff0}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+3),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+3){background:#fff0ff}div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+4),div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+4){background:#eafdfd}div.wunderbaum.wb-fade-expander i.wb-expander{transition:color 1.5s;color:rgba(86,83,76,0)}div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander,div.wunderbaum.wb-fade-expander:hover i.wb-expander,div.wunderbaum.wb-fade-expander:focus i.wb-expander,div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,div.wunderbaum.wb-fade-expander [class*="wb-statusnode-"] i.wb-expander{transition:color 0.6s;color:#56534c}div.wunderbaum div.wb-row.wb-skeleton span.wb-title,div.wunderbaum div.wb-row.wb-skeleton i.wb-icon{animation:wb-skeleton-animation 1s linear infinite alternate;border-radius:0.25em;color:transparent;opacity:0.7}div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox{visibility:hidden}div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox{visibility:unset}div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox,div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox{visibility:unset}.wb-helper-center{text-align:center}.wb-helper-disabled{color:#8c877c}.wb-helper-hidden{display:none}.wb-helper-invalid{color:#b5373b}.wb-helper-lazy-expander{color:#26a0da}.wb-helper-link{cursor:pointer}.wb-helper-start,.wb-helper-start>input{text-align:left}.wb-helper-end,.wb-helper-end>input{text-align:right}.wb-rtl .wb-helper-start,.wb-rtl .wb-helper-start>input{text-align:right}.wb-rtl .wb-helper-end,.wb-rtl .wb-helper-end>input{text-align:left}.wb-col input[type="checkbox"]:indeterminate{color:#8c877c;background-color:red}.wb-col input:invalid{color:#b5373b;background-color:#f5ddde}@keyframes wb-spin-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes wb-skeleton-animation{0%{background-color:#a3b8c2}100%{background-color:#f0f3f5}}@keyframes wb-busy-animation{0%{background-position:0 0}100%{background-position:0 22px}}

package/dist/wunderbaum.d.ts

@@ -63,7 +63,7 @@ declare module "util" {
      *
      * If a `<span class="wb-col">` is passed, the first child input is used.
      * Depending on the target element type, `value` is interpreted accordingly.
-     * For example for a checkbox, a value of true, false, or null is returned if the
+     * For example for a checkbox, a value of true, false, or null is returned if
      * the element is checked, unchecked, or indeterminate.
      * For datetime input control a numerical value is assumed, etc.
      *
@@ -198,7 +198,7 @@ declare module "util" {
     export function getOption(opts: any, name: string, defaultValue?: any): any;
     /** Convert an Array or space-separated string to a Set. */
     export function toSet(val: any): Set<string>;
-    /**Return a canonical string representation for an object's type (e.g. 'array', 'number', ...) */
+    /** Return a canonical string representation for an object's type (e.g. 'array', 'number', ...). */
     export function type(obj: any): string;
     /**
      * Return a function that can be called instead of `callback`, but guarantees
@@ -207,12 +207,12 @@ declare module "util" {
      * previous call.
      * Example:
      * ```js
-     * throttledFoo = util.addaptiveThrottle(foo.bind(this), {});
+     * throttledFoo = util.adaptiveThrottle(foo.bind(this), {});
      * throttledFoo();
      * throttledFoo();
      * ```
      */
-    export function addaptiveThrottle(this: unknown, callback: (...args: any[]) => void, options: any): (...args: any[]) => void;
+    export function adaptiveThrottle(this: unknown, callback: (...args: any[]) => void, options: any): (...args: any[]) => void;
 }
 declare module "deferred" {
     /*!
@@ -433,6 +433,39 @@ declare module "wb_options" {
         checkbox?: boolean | string;
         children?: Array<WbNodeData>;
     }
+    export interface ColumnDefinition {
+        /** Column ID (pass "*" for the main tree nodes column ) */
+        id: string;
+        /** Column header (defaults to id) */
+        title: string;
+        /** Column width or weight.
+         * Either an absolute pixel value (e.g. `"50px"`) or a relative weight (e.g. `1`)
+         * that is used to calculate the width  inside the remaining available space.
+         * Default: `"*"`, which is interpreted as `1`.
+         */
+        width?: string | number;
+        /** Only used for columns with a relative weight.
+         * Default: `4px`.
+         */
+        minWidth?: string | number;
+        /** Optional class names that are added to all `span.wb-col` elements of that column.*/
+        classes?: string;
+        /** Optional HTML content that is rendered into all `span.wb-col` elements of that column.*/
+        html: string;
+    }
+    export interface TypeDefinition {
+        /** En/disable checkbox for matching nodes.*/
+        checkbox?: boolean | BoolOptionResolver;
+        /** Optional class names that are added to all `div.wb-row` elements of matching nodes.*/
+        classes?: string;
+        /**Default icon for matching nodes.*/
+        icon?: boolean | string | BoolOptionResolver;
+        /**
+         * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
+         * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
+         */
+        _any: any;
+    }
     /**
      * Available options for [[Wunderbaum]].
      *
@@ -489,7 +522,9 @@ declare module "wb_options" {
          *
          * Default: `{}`.
          */
-        types?: any;
+        types?: {
+            [key: string]: TypeDefinition;
+        };
         /**
          * A list of maps that define column headers. If this option is set,
          * Wunderbaum becomes a treegrid control instead of a plain tree.
@@ -497,7 +532,7 @@ declare module "wb_options" {
          * response.
          * Default: `[]` meaning this is a plain tree.
          */
-        columns?: Array<any>;
+        columns?: Array<ColumnDefinition>;
         /**
          * If true, add a `wb-skeleton` class to all nodes, that will result in a
          * 'glow' effect. Typically used with initial dummy nodes, while loading the
@@ -516,7 +551,7 @@ declare module "wb_options" {
         debugLevel: number;
         /**
          * Number of levels that are forced to be expanded, and have no expander icon.
-         *  Default: 0
+         * Default: 0
          */
         minExpandLevel?: number;
         /**
@@ -534,6 +569,11 @@ declare module "wb_options" {
          * Default: false
          */
         autoCollapse?: boolean;
+        /**
+         * HTMLElement that receives the top nodes breadcrumb.
+         * Default: undefined
+         */
+        attachBreadcrumb?: HTMLElement;
         /**
          * Default:  NavigationModeOption.startRow
          */
@@ -554,11 +594,20 @@ declare module "wb_options" {
          * Default: 200
          */
         updateThrottleWait?: number;
+        /**
+         * Default: true
+         */
+        enabled?: boolean;
+        /**
+         * Default: false
+         */
+        fixedCol?: boolean;
         /**
          * Default: true
          */
         quicksearch?: boolean;
         dnd?: DndOptionsType;
+        edit: any;
         filter: any;
         grid: any;
         /**
@@ -716,8 +765,8 @@ declare module "wb_node" {
         type?: string;
         tooltip?: string;
         /** Additional classes added to `div.wb-row`.
-         * @see {@link addClass}, {@link removeClass}, {@link toggleClass}. */
-        extraClasses: Set<string>;
+         * @see {@link hasClass}, {@link setClass}. */
+        classes: Set<string> | null;
         /** Custom data that was passed to the constructor */
         data: any;
         statusNodeType?: string;
@@ -773,9 +822,15 @@ declare module "wb_node" {
          * @see {@link Wunderbaum.applyCommand}
          */
         applyCommand(cmd: ApplyCommandType, opts: any): any;
-        addClass(className: string | string[] | Set<string>): void;
-        removeClass(className: string | string[] | Set<string>): void;
-        toggleClass(className: string | string[] | Set<string>, flag: boolean): void;
+        /**
+         * Add/remove one or more classes to `<div class='wb-row'>`.
+         *
+         * This also maintains `node.classes`, so the class will survive a re-render.
+         *
+         * @param className one or more class names. Multiple classes can be passed
+         *     as space-separated string, array of strings, or set of strings.
+         */
+        setClass(className: string | string[] | Set<string>, flag?: boolean): void;
         /** */
         expandAll(flag?: boolean): Promise<void>;
         /**Find all nodes that match condition (excluding self).
@@ -832,6 +887,8 @@ declare module "wb_node" {
          * Return undefined if not sure, i.e. the node is lazy and not yet loaded.
          */
         hasChildren(): boolean;
+        /** Return true if node has className set. */
+        hasClass(className: string): boolean;
         /** Return true if this node is the currently active tree node. */
         isActive(): boolean;
         /** Return true if this node is a *direct* child of `other`.
@@ -1104,6 +1161,7 @@ declare module "common" {
     export type NodeFilterCallback = (node: WunderbaumNode) => NodeFilterResponse;
     export type AddNodeType = "before" | "after" | "prependChild" | "appendChild";
     export type DndModeType = "before" | "after" | "over";
+    /** Possible values for `setModified()`. */
     export enum ChangeType {
         /** Re-render the whole viewport, headers, and all rows. */
         any = "any",
@@ -1120,13 +1178,14 @@ declare module "common" {
         /** Update the 'top' property of all rows. */
         vscroll = "vscroll"
     }
+    /** Possible values for `setStatus()`. */
     export enum NodeStatusType {
         ok = "ok",
         loading = "loading",
         error = "error",
         noData = "noData"
     }
-    /**Define the subregion of a node, where an event occurred. */
+    /** Define the subregion of a node, where an event occurred. */
     export enum TargetType {
         unknown = "",
         checkbox = "checkbox",
@@ -1154,27 +1213,44 @@ declare module "common" {
         doc: string;
     };
     export const KEY_NODATA = "__not_found__";
+    /** Initial navigation mode and possible transition. */
     export enum NavigationModeOption {
         startRow = "startRow",
         cell = "cell",
         startCell = "startCell",
         row = "row"
     }
+    /** Tree's current navigation mode (see `tree.setNavigationMode()`). */
     export enum NavigationMode {
         row = "row",
         cellNav = "cellNav",
         cellEdit = "cellEdit"
     }
+    /** Define which keys are handled by embedded <input> control, and should
+     * *not* be passed to tree navigation handler in cell-edit mode. */
+    export const INPUT_KEYS: {
+        text: string[];
+        number: string[];
+        checkbox: any[];
+        link: any[];
+        radiobutton: string[];
+        "select-one": string[];
+        "select-multiple": string[];
+    };
+    /** Key codes that trigger grid navigation, even when inside an input element. */
+    export const NAVIGATE_IN_INPUT_KEYS: Set<string>;
+    /** Possible values for `node.setActive()`. */
     export type SetActiveOptions = {
         /** Generate (de)activate event, even if node already has this status. */
         retrigger?: boolean;
-        /** Don not generate (de)activate event. */
+        /** Do not generate (de)activate event. */
         noEvents?: boolean;
-        /** Optional original event that will be passed to the (de)activat handler. */
+        /** Optional original event that will be passed to the (de)activate handler. */
         event?: Event;
         /** Call {@link setColumn}. */
         colIdx?: number;
     };
+    /** Possible values for `node.setExpanded()`. */
     export type SetExpandedOptions = {
         /** Ignore {@link minExpandLevel}. @default false */
         force?: boolean;
@@ -1185,32 +1261,20 @@ declare module "common" {
         /** Scroll to bring expanded nodes into viewport. @default false */
         scrollIntoView?: boolean;
     };
+    /** Possible values for `node.setSelected()`. */
     export type SetSelectedOptions = {
         /** Ignore restrictions. @default false */
         force?: boolean;
         /** Do not send events. @default false */
         noEvents?: boolean;
     };
-    /** Define which keys are handled by embedded <input> control, and should
-     * *not* be passed to tree navigation handler in cell-edit mode: */
-    export const INPUT_KEYS: {
-        text: string[];
-        number: string[];
-        checkbox: any[];
-        link: any[];
-        radiobutton: string[];
-        "select-one": string[];
-        "select-multiple": string[];
-    };
-    /** Key codes that trigger grid navigation, even when inside an input element. */
-    export const NAVIGATE_IN_INPUT_KEYS: Set<string>;
     /** Map `KeyEvent.key` to navigation action. */
     export const KEY_TO_ACTION_DICT: {
         [key: string]: string;
     };
-    /** */
+    /** Return a callback that returns true if the node title contains a substring (case-insensitive). */
     export function makeNodeTitleMatcher(s: string): MatcherType;
-    /** */
+    /** Return a callback that returns true if the node title starts with a string (case-insensitive). */
     export function makeNodeTitleStartMatcher(s: string): MatcherType;
 }
 declare module "debounce" {
@@ -1356,6 +1420,7 @@ declare module "wb_ext_filter" {
         lastFilterArgs: IArguments | null;
         constructor(tree: Wunderbaum);
         init(): void;
+        setPluginOption(name: string, value: any): void;
         _applyFilterNoUpdate(filter: string | NodeFilterCallback, branchMode: boolean, _opts: any): void;
         _applyFilterImpl(filter: string | NodeFilterCallback, branchMode: boolean, _opts: any): number;
         /**
@@ -1385,6 +1450,7 @@ declare module "wb_ext_keynav" {
     import { WunderbaumExtension } from "wb_extension_base";
     export class KeynavExtension extends WunderbaumExtension {
         constructor(tree: Wunderbaum);
+        protected _getEmbeddedInputElem(elem: any, setFocus?: boolean): HTMLInputElement | null;
         onKeyEvent(data: any): boolean | undefined;
     }
 }
@@ -1511,18 +1577,19 @@ declare module "wunderbaum" {
     /*!
      * wunderbaum.ts
      *
-     * A tree control.
+     * A treegrid control.
      *
      * Copyright (c) 2021-2022, Martin Wendt (https://wwWendt.de).
-     * Released under the MIT license.
+     * https://github.com/mar10/wunderbaum
      *
+     * Released under the MIT license.
      * @version @VERSION
      * @date @DATE
      */
     import "./wunderbaum.scss";
     import * as util from "util";
     import { ExtensionsDict, WunderbaumExtension } from "wb_extension_base";
-    import { NavigationMode, ChangeType, FilterModeType, MatcherType, NodeStatusType, TargetType as NodeRegion, ApplyCommandType } from "common";
+    import { NavigationMode, ChangeType, FilterModeType, MatcherType, NodeStatusType, TargetType as NodeRegion, ApplyCommandType, SetActiveOptions } from "common";
     import { WunderbaumNode } from "wb_node";
     import { WunderbaumOptions } from "wb_options";
     /**
@@ -1532,6 +1599,7 @@ declare module "wunderbaum" {
      */
     export class Wunderbaum {
         protected static sequence: number;
+        protected enabled: boolean;
         /** Wunderbaum release version number "MAJOR.MINOR.PATCH". */
         static version: string;
         /** The invisible root node, that holds all visible top level nodes. */
@@ -1543,7 +1611,7 @@ declare module "wunderbaum" {
         /** The `div.wb-header` element if any. */
         readonly headerElement: HTMLDivElement | null;
         /** The `div.wb-scroll-container` element that contains the `nodeListElement`. */
-        readonly scrollContainer: HTMLDivElement;
+        readonly scrollContainerElement: HTMLDivElement;
         /** The `div.wb-node-list` element that contains all visible div.wb-row child elements. */
         readonly nodeListElement: HTMLDivElement;
         protected readonly _updateViewportThrottled: (...args: any) => void;
@@ -1670,7 +1738,7 @@ declare module "wunderbaum" {
          * Return `tree.option.NAME` (also resolving if this is a callback).
          *
          * See also {@link WunderbaumNode.getOption|WunderbaumNode.getOption()}
-         * to consider `node.NAME` setting and `tree.types[node.type].NAME`.
+         * to evaluate `node.NAME` setting and `tree.types[node.type].NAME`.
          *
          * @param name option name (use dot notation to access extension option, e.g.
          * `filter.mode`)
@@ -1688,6 +1756,8 @@ declare module "wunderbaum" {
         runWithoutUpdate(func: () => any, hint?: any): void;
         /** Recursively expand all expandable nodes (triggers lazy load id needed). */
         expandAll(flag?: boolean): Promise<void>;
+        /** Recursively select all nodes. */
+        selectAll(flag?: boolean): void;
         /** Return the number of nodes in the data model.*/
         count(visible?: boolean): number;
         /** @internal sanity check. */
@@ -1710,6 +1780,15 @@ declare module "wunderbaum" {
          *
          */
         findFirst(match: string | MatcherType): WunderbaumNode;
+        /**
+         * Find first node that matches condition.
+         *
+         * @param match title string to search for, or a
+         *     callback function that returns `true` if a node is matched.
+         * @see {@link WunderbaumNode.findFirst}
+         *
+         */
+        findKey(key: string): WunderbaumNode | undefined;
         /**
          * Find the next visible node that starts with `match`, starting at `startNode`
          * and wrap-around at the end.
@@ -1784,14 +1863,24 @@ declare module "wunderbaum" {
         /** Log to console if opts.debugLevel >= 2 */
         logWarn(...args: any[]): void;
         /**
-         * Make sure that this node is scrolled into the viewport.
+         * Make sure that this node is vertically scrolled into the viewport.
          *
-         * @param {boolean | PlainObject} [effects=false] animation options.
          * @param {object} [options=null] {topNode: null, effects: ..., parent: ...}
          *     this node will remain visible in
          *     any case, even if `this` is outside the scroll pane.
          */
         scrollTo(opts: any): void;
+        /**
+         * Make sure that this node is horizontally scrolled into the viewport.
+         *
+         * Used for `fixedCol` mode.
+         *
+         * @param {boolean | PlainObject} [effects=false] animation options.
+         * @param {object} [options=null] {topNode: null, effects: ..., parent: ...}
+         *     this node will remain visible in
+         *     any case, even if `this` is outside the scroll pane.
+         */
+        scrollToHorz(opts: any): void;
         /**
          * Set column #colIdx to 'active'.
          *
@@ -1800,15 +1889,27 @@ declare module "wunderbaum" {
          */
         setColumn(colIdx: number): void;
         /** Set or remove keybaord focus to the tree container. */
+        setActiveNode(key: string, flag?: boolean, options?: SetActiveOptions): void;
+        /** Set or remove keybaord focus to the tree container. */
         setFocus(flag?: boolean): void;
         /** Schedule an update request to reflect a tree change. */
         setModified(change: ChangeType, options?: any): void;
         /** Schedule an update request to reflect a single node modification. */
         setModified(change: ChangeType, node: WunderbaumNode, options?: any): void;
+        /** Get the tree's navigation mode. */
+        getNavigationMode(): NavigationMode;
         /** Set the tree's navigation mode. */
         setNavigationMode(mode: NavigationMode): void;
+        /** Disable mouse and keyboard interaction (return prev. state). */
+        setEnabled(flag?: boolean): boolean;
+        /** Return false if tree is disabled. */
+        isEnabled(): boolean;
+        /** Return true if tree has one or more data columns in addition to the plain nodes. */
+        isGrid(): boolean;
         /** Display tree status (ok, loading, error, noData) using styles and a dummy root node. */
         setStatus(status: NodeStatusType, message?: string, details?: string): WunderbaumNode | null;
+        /** Add or redefine node type definitions. */
+        setTypes(types: any, replace?: boolean): void;
         /** Update column headers and width. */
         updateColumns(opts?: any): void;
         /** Create/update header markup from `this.columns` definition.
@@ -1825,11 +1926,6 @@ declare module "wunderbaum" {
          * @internal
          */
         protected _updateViewport(): void;
-        /**
-         * Assert that TR order matches the natural node order
-         * @internal
-         */
-        protected _validateRows(): boolean;
         protected _updateRows(opts?: any): boolean;
         /**
          * Call callback(node) for all nodes in hierarchical order (depth-first).
@@ -1865,10 +1961,10 @@ declare module "wunderbaum" {
         /**
          * Reload the tree with a new source.
          *
-         * Previous data is cleared.
-         * Pass `options.columns` to define a header (may also be part of `source.columns`).
+         * Previous data is cleared. Note that also column- and type defintions may
+         * be passed with the `source` object.
          */
-        load(source: any, options?: any): Promise<void>;
+        load(source: any): Promise<void>;
         /**
          * Disable render requests during operations that would trigger many updates.
          *