wunderbaum 0.0.3 → 0.0.4

package/README.md

@@ -14,7 +14,7 @@
 Wunderbaum is a rewrite of the [Fancytree](https://github.com/mar10/fancytree)
 library. Major features include
 
-- **Tree-grid** control with emphasis on "tree".<br>
+- **Treegrid** control with emphasis on "tree".<br>
   Depending on the number of columns and nesting depth, Wunderbaum can also be
   used as a **plain tree**, **plain grid**, or a **simple list** control.
 - **Performant** and efficient handling of **big data structures**.

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%;margin:0;padding:0;font-family:Helvetica,sans-serif;font-size:14px;color:#56534c;border:1px solid #56534c;overflow:hidden}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:#fcfcfc}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: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}}

package/dist/wunderbaum.d.ts

@@ -165,7 +165,7 @@ declare module "util" {
       */
     export function overrideMethod(instance: any, methodName: string, handler: FunctionType, ctx?: any): void;
     /** Run function after ms milliseconds and return a promise that resolves when done. */
-    export function setTimeoutPromise(callback: (...args: any[]) => void, ms: number): Promise<unknown>;
+    export function setTimeoutPromise(this: unknown, callback: (...args: any[]) => void, ms: number): Promise<unknown>;
     /**
      * Wait `ms` microseconds.
      *
@@ -200,6 +200,19 @@ declare module "util" {
     export function toSet(val: any): Set<string>;
     /**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
+     * a limited execution rate.
+     * The execution rate is calculated based on the runtime duration of the
+     * previous call.
+     * Example:
+     * ```js
+     * throttledFoo = util.addaptiveThrottle(foo.bind(this), {});
+     * throttledFoo();
+     * throttledFoo();
+     * ```
+     */
+    export function addaptiveThrottle(this: unknown, callback: (...args: any[]) => void, options: any): (...args: any[]) => void;
 }
 declare module "deferred" {
     /*!
@@ -210,9 +223,19 @@ declare module "deferred" {
     type PromiseCallbackType = (val: any) => void;
     type finallyCallbackType = () => void;
     /**
-     * Deferred is a ES6 Promise, that exposes the resolve() and reject()` method.
+     * Implement a ES6 Promise, that exposes a resolve() and reject() method.
      *
-     * Loosely mimics [`jQuery.Deferred`](https://api.jquery.com/category/deferred-object/).
+     * Loosely mimics {@link https://api.jquery.com/category/deferred-object/ | jQuery.Deferred}.
+     * Example:
+     * ```js
+     * function foo() {
+     *   let dfd = new Deferred(),
+     *   ...
+     *   dfd.resolve('foo')
+     *   ...
+     *   return dfd.promise();
+     * }
+     * ```
      */
     export class Deferred {
         private _promise;
@@ -423,6 +446,21 @@ declare module "wb_options" {
      *   ...
      * });
      * ```
+     *
+     * Event handlers are also passed as callbacks
+     *
+     * ```js
+     * const tree = new mar10.Wunderbaum({
+     *   ...
+     *   init: (e) => {
+     *     console.log(`Tree ${e.tree} was initialized and loaded.`)
+     *   },
+     *   activate: (e) => {
+     *     console.log(`Node ${e.node} was activated.`)
+     *   },
+     *   ...
+     * });
+     * ```
      */
     export interface WunderbaumOptions {
         /**
@@ -524,21 +562,21 @@ declare module "wb_options" {
         filter: any;
         grid: any;
         /**
-         * Called after initial data was loaded and tree markup was rendered.
-         * Check `e.error` for status.
+         *
          * @category Callback
          */
-        init?: (e: WbTreeEventType) => void;
+        activate?: (e: WbNodeEventType) => void;
         /**
          *
          * @category Callback
          */
-        update?: (e: WbTreeEventType) => void;
+        change?: (e: WbNodeEventType) => void;
         /**
          *
+         * Return `false` to prevent default handling, e.g. activating the node.
          * @category Callback
          */
-        activate?: (e: WbNodeEventType) => void;
+        click?: (e: WbTreeEventType) => void;
         /**
          *
          * @category Callback
@@ -548,40 +586,47 @@ declare module "wb_options" {
          *
          * @category Callback
          */
-        change?: (e: WbNodeEventType) => void;
+        discard?: (e: WbNodeEventType) => void;
         /**
          *
          * @category Callback
          */
-        click?: (e: WbTreeEventType) => void;
+        enhanceTitle?: (e: WbNodeEventType) => void;
         /**
          *
          * @category Callback
          */
-        discard?: (e: WbNodeEventType) => void;
+        error?: (e: WbTreeEventType) => void;
         /**
          *
+         * Check `e.flag` for status.
          * @category Callback
          */
-        error?: (e: WbTreeEventType) => void;
+        focus?: (e: WbTreeEventType) => void;
         /**
-         *
+         * Fires when the tree markup was created and the initial source data was loaded.
+         * Typical use cases would be activating a node, setting focus, enabling other
+         * controls on the page, etc.<br>
+         * Check `e.error` for status.
          * @category Callback
          */
-        enhanceTitle?: (e: WbNodeEventType) => void;
+        init?: (e: WbTreeEventType) => void;
         /**
          *
-         * Check `e.flag` for status.
          * @category Callback
          */
-        focus?: (e: WbTreeEventType) => void;
+        keydown?: (e: WbNodeEventType) => void;
         /**
-         *
+         * Fires when a node that was marked 'lazy', is expanded for the first time.
+         * Typically we return an endpoint URL or the Promise of a fetch request that
+         * provides a (potentially nested) list of child nodes.
          * @category Callback
          */
-        keydown?: (e: WbNodeEventType) => void;
+        lazyLoad?: (e: WbNodeEventType) => void;
         /**
-         * Called after data was loaded from local storage.
+         * Fires when data was loaded (initial request, reload, or lazy loading),
+         * after the data is applied and rendered.
+         * @category Callback
          */
         load?: (e: WbNodeEventType) => void;
         /**
@@ -589,12 +634,19 @@ declare module "wb_options" {
          */
         modifyChild?: (e: WbNodeEventType) => void;
         /**
-         *
+         * Fires when data was fetched (initial request, reload, or lazy loading),
+         * but before the data is applied and rendered.
+         * Here we can modify and adjust the received data, for example to convert an
+         * external response to native Wunderbaum syntax.
          * @category Callback
          */
         receive?: (e: WbNodeEventType) => void;
         /**
-         *
+         * Fires when a node is about to be displayed.
+         * The default HTML markup is already created, but not yet added to the DOM.
+         * Now we can tweak the markup, create HTML elements in this node's column
+         * cells, etc.
+         * See also `Custom Rendering` for details.
          * @category Callback
          */
         render?: (e: WbNodeEventType) => void;
@@ -609,6 +661,11 @@ declare module "wb_options" {
          * @category Callback
          */
         select?: (e: WbNodeEventType) => void;
+        /**
+         * Fires when the viewport content was updated, after scroling, expanding etc.
+         * @category Callback
+         */
+        update?: (e: WbTreeEventType) => void;
     }
 }
 declare module "wb_node" {
@@ -689,7 +746,7 @@ declare module "wb_node" {
          * node._callEvent("edit.beforeEdit", {foo: 42})
          * ```
          */
-        _callEvent(name: string, extra?: any): any;
+        _callEvent(type: string, extra?: any): any;
         /**
          * Append (or insert) a list of child nodes.
          *
@@ -874,8 +931,34 @@ declare module "wb_node" {
             [key: string]: any;
         };
         protected _createIcon(parentElem: HTMLElement, replaceChild?: HTMLElement): HTMLElement | null;
-        /** Create HTML markup for this node, i.e. the whole row. */
-        render(opts?: any): void;
+        /**
+         * Create a whole new `<div class="wb-row">` element.
+         * @see {@link Wunderbaumode.render}
+         */
+        protected _render_markup(opts: any): void;
+        /**
+         * Render `node.title`, `.icon` into an existing row.
+         *
+         * @see {@link Wunderbaumode.render}
+         */
+        protected _render_data(opts: any): void;
+        /**
+         * Update row classes to reflect active, focuses, etc.
+         * @see {@link Wunderbaumode.render}
+         */
+        protected _render_status(opts: any): void;
+        /**
+         * Create or update node's markup.
+         *
+         * `options.change` defaults to ChangeType.data, which updates the title,
+         * icon, and status. It also triggers the `render` event, that lets the user
+         * create or update the content of embeded cell elements.<br>
+         *
+         * If only the status or other class-only modifications have changed,
+         * `options.change` should be set to ChangeType.status instead for best
+         * efficiency.
+         */
+        render(options?: any): void;
         /**
          * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
          * event is triggered on next expand.
@@ -930,7 +1013,13 @@ declare module "wb_node" {
         setIcon(): void;
         /** Change node's {@link key} and/or {@link refKey}.  */
         setKey(key: string | null, refKey: string | null): void;
-        /** Schedule a render, typically called to update after a status or data change. */
+        /**
+         * Schedule a render, typically called to update after a status or data change.
+         *
+         * `change` defaults to 'data', which handles modifcations of title, icon,
+         * and column content. It can be reduced to 'ChangeType.status' if only
+         * active/focus/selected state has changed.
+         */
         setModified(change?: ChangeType): void;
         /** Modify the check/uncheck state. */
         setSelected(flag?: boolean, options?: SetSelectedOptions): void;
@@ -999,7 +1088,7 @@ declare module "common" {
     export type NodeVisitResponse = "skip" | boolean | void;
     export type NodeVisitCallback = (node: WunderbaumNode) => NodeVisitResponse;
     export type WbTreeEventType = {
-        name: string;
+        type: string;
         event: Event;
         tree: Wunderbaum;
         [key: string]: unknown;
@@ -1016,12 +1105,20 @@ declare module "common" {
     export type AddNodeType = "before" | "after" | "prependChild" | "appendChild";
     export type DndModeType = "before" | "after" | "over";
     export enum ChangeType {
+        /** Re-render the whole viewport, headers, and all rows. */
         any = "any",
+        /** Update current row title, icon, columns, and status. */
+        data = "data",
+        /** Redraw the header and update the width of all row columns. */
+        header = "header",
+        /** Re-render the whole current row. */
         row = "row",
+        /** Alias for 'any'. */
         structure = "structure",
+        /** Update current row's classes, to reflect active, selected, ... */
         status = "status",
-        vscroll = "vscroll",
-        header = "header"
+        /** Update the 'top' property of all rows. */
+        vscroll = "vscroll"
     }
     export enum NodeStatusType {
         ok = "ok",
@@ -1427,7 +1524,6 @@ declare module "wunderbaum" {
     import { ExtensionsDict, WunderbaumExtension } from "wb_extension_base";
     import { NavigationMode, ChangeType, FilterModeType, MatcherType, NodeStatusType, TargetType as NodeRegion, ApplyCommandType } from "common";
     import { WunderbaumNode } from "wb_node";
-    import { DebouncedFunction } from "debounce";
     import { WunderbaumOptions } from "wb_options";
     /**
      * A persistent plain object or array.
@@ -1450,7 +1546,7 @@ declare module "wunderbaum" {
         readonly scrollContainer: HTMLDivElement;
         /** The `div.wb-node-list` element that contains all visible div.wb-row child elements. */
         readonly nodeListElement: HTMLDivElement;
-        protected readonly _updateViewportThrottled: DebouncedFunction<(...args: any) => void>;
+        protected readonly _updateViewportThrottled: (...args: any) => void;
         protected extensionList: WunderbaumExtension[];
         protected extensions: ExtensionsDict;
         /** Merged options from constructor args and tree- and extension defaults. */
@@ -1534,13 +1630,13 @@ declare module "wunderbaum" {
          * tree._callEvent("edit.beforeEdit", {foo: 42})
          * ```
          */
-        _callEvent(name: string, extra?: any): any;
+        _callEvent(type: string, extra?: any): any;
         /** Return the node for  given row index. */
         protected _getNodeByRowIdx(idx: number): WunderbaumNode | null;
         /** Return the topmost visible node in the viewport. */
-        protected _firstNodeInView(complete?: boolean): WunderbaumNode;
+        getTopmostVpNode(complete?: boolean): WunderbaumNode;
         /** Return the lowest visible node in the viewport. */
-        protected _lastNodeInView(complete?: boolean): WunderbaumNode;
+        getLowestVpNode(complete?: boolean): WunderbaumNode;
         /** Return preceeding visible node in the viewport. */
         protected _getPrevNodeInView(node?: WunderbaumNode, ofs?: number): WunderbaumNode;
         /** Return following visible node in the viewport. */
@@ -1781,7 +1877,7 @@ declare module "wunderbaum" {
          *   tree.enableUpdate(false);
          *   // ... (long running operation that would trigger many updates)
          *   foo();
-         *   // ... NOTE: make sure that async operations have finished
+         *   // ... NOTE: make sure that async operations have finished, e.g.
          *   await foo();
          * } finally {
          *   tree.enableUpdate(true);