wunderbaum 0.3.3 → 0.3.5

package/src/wb_node.ts

@@ -31,6 +31,8 @@ import {
   SetSelectedOptions,
   SetStatusOptions,
   SortCallback,
+  NodeToDictCallback,
+  WbNodeData,
 } from "./types";
 import {
   iconMap,
@@ -45,7 +47,6 @@ import {
   nodeTitleSorter,
 } from "./common";
 import { Deferred } from "./deferred";
-import { WbNodeData } from "./wb_options";
 
 /** Top-level properties that can be passed with `data`. */
 const NODE_PROPS = new Set<string>([
@@ -330,7 +331,7 @@ export class WunderbaumNode {
    *
    * This a convenience function that calls addChildren()
    *
-   * @param {NodeData} node node definition
+   * @param nodeData node definition
    * @param [mode=child] 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child')
    * @returns new node
    */
@@ -1857,9 +1858,9 @@ export class WunderbaumNode {
    *     modifications.
    *     Return `false` to ignore this node or `"skip"` to include this node
    *     without its children.
-   * @returns {NodeData}
+   * @see {@link Wunderbaum.toDictArray}.
    */
-  toDict(recursive = false, callback?: any): any {
+  toDict(recursive = false, callback?: NodeToDictCallback): WbNodeData {
     const dict: any = {};
 
     NODE_ATTRS.forEach((propName: string) => {
@@ -1883,7 +1884,8 @@ export class WunderbaumNode {
     if (callback) {
       const res = callback(dict, this);
       if (res === false) {
-        return false; // Don't include this node nor its children
+        // Note: a return value of `false` is only used internally
+        return <any>false; // Don't include this node nor its children
       }
       if (res === "skip") {
         recursive = false; // Include this node, but not the children
@@ -1895,7 +1897,8 @@ export class WunderbaumNode {
         for (let i = 0, l = this.children!.length; i < l; i++) {
           const node = this.children![i];
           if (!node.isStatusNode()) {
-            const res = node.toDict(true, callback);
+            // Note: a return value of `false` is only used internally
+            const res = <any>node.toDict(true, callback);
             if (res !== false) {
               dict.children.push(res);
             }

package/src/wb_options.ts

@@ -18,24 +18,13 @@ import {
   WbErrorEventType,
   WbInitEventType,
   WbKeydownEventType,
+  WbNodeData,
   WbNodeEventType,
   WbReceiveEventType,
   WbRenderEventType,
   WbTreeEventType,
 } from "./types";
 
-export interface WbNodeData {
-  title: string;
-  key?: string;
-  refKey?: string;
-  expanded?: boolean;
-  selected?: boolean;
-  checkbox?: boolean | string;
-  colspan?: boolean;
-  children?: Array<WbNodeData>;
-  // ...any?: Any;
-}
-
 /**
  * Available options for [[Wunderbaum]].
  *

package/src/wunderbaum.scss

@@ -3,21 +3,25 @@
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
+// @use "sass:meta";
+
+// ----------------------------------------------------------------------------
+// --- Define default colors and settings
 
 $font-stack: Helvetica, sans-serif;
 
 // Basic Theme Colors
 $error-color: #b5373b;
 $node-text-color: #56534c;
+$border-color: $node-text-color;
 $bg-highlight-color: #26a0da;
 $header-color: #dedede;
-$background-color: white;
+$background-color: #ffffff;
 $alternate-row-color: #f7f7f7; // #fcfcfc;
 $alternate-row-color-hover: #f3f3f3; //#f7fcfe;
 $focus-border-color: #275dc5;
 
 // derived
-$border-color: $node-text-color;
 $drop-source-color: adjust-color($node-text-color, $lightness: 50%);
 $drop-target-color: adjust-color($bg-highlight-color, $lightness: 40%);
 $dim-color: adjust-color($node-text-color, $lightness: 20%);
@@ -33,6 +37,11 @@ $active-hover-color: #dceff8;
 $active-hover-border-color: $bg-highlight-color;
 $active-column-color: $hover-color;
 $active-header-column-color: adjust-color($header-color, $lightness: -10%);
+$active-color-grayscale: grayscale($active-color);
+$active-border-color-grayscale: grayscale($active-border-color);
+$active-hover-color-grayscale: grayscale($active-hover-color);
+$active-cell-color-grayscale: grayscale($active-cell-color);
+$grid-color-grayscale: grayscale($grid-color);
 // @debug $active-header-column-color;
 $filter-dim-color: #dedede;
 $filter-submatch-color: #868581;
@@ -61,19 +70,82 @@ $header-height: $row-outer-height;
 $level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
   rgb(204, 250, 250);
 
-div.wunderbaum {
+// ----------------------------------------------------------------------------
+// --- Define CSS variables with calculated default values
+
+:root {
+  // TODO: do we need to use 'meta.inspect' in case a font name contains spaces?
+  // --wb-font-stack: #{meta.inspect($font-stack)};
+  --wb-font-stack: #{$font-stack};
+
+  // Basic Theme Colors
+  --wb-error-color: #{$error-color};
+  --wb-node-text-color: #{$node-text-color};
+  --wb-border-color: #{$border-color};
+  --wb-bg-highlight-color: #{$bg-highlight-color};
+  --wb-header-color: #{$header-color};
+  --wb-background-color: #{$background-color};
+  --wb-alternate-row-color: #{$alternate-row-color};
+  --wb-alternate-row-color-hover: #{$alternate-row-color-hover};
+  --wb-focus-border-color: #{$focus-border-color};
+
+  // derived
+  --wb-drop-source-color: #{$drop-source-color};
+  --wb-drop-target-color: #{$drop-target-color};
+  --wb-dim-color: #{$dim-color};
+  --wb-error-background-color: #{$error-background-color};
+  --wb-hover-color: #{$hover-color};
+  --wb-hover-border-color: #{$hover-border-color};
+  --wb-grid-color: #{$grid-color};
+  --wb-active-color: #{$active-color};
+  --wb-active-cell-color: #{$active-cell-color};
+  --wb-active-border-color: #{$active-border-color};
+  --wb-active-hover-color: #{$active-hover-color};
+  --wb-active-hover-border-color: #{$active-hover-border-color};
+  --wb-active-column-color: #{$active-column-color};
+  --wb-active-header-column-color: #{$active-header-column-color};
+  --wb-active-color-grayscale: #{$active-color-grayscale};
+  --wb-active-border-color-grayscale: #{$active-border-color-grayscale};
+  --wb-active-hover-color-grayscale: #{$active-hover-color-grayscale};
+  --wb-active-cell-color-grayscale: #{$active-cell-color-grayscale};
+  --wb-grid-color-grayscale: #{$grid-color-grayscale};
+
+  --wb-filter-dim-color: #{$filter-dim-color};
+  --wb-filter-submatch-color: #{$filter-submatch-color};
+
+  --wb-row-outer-height: #{$row-outer-height};
+  --wb-row-inner-height: #{$row-inner-height};
+  --wb-row-padding-y: #{$row-padding-y};
+  --wb-col-padding-x: #{$col-padding-x};
+
+  --wb-icon-outer-height: #{$icon-outer-height};
+  --wb-icon-outer-width: #{$icon-outer-width};
+  --wb-icon-height: #{$icon-height};
+  --wb-icon-width: #{$icon-width};
+  --wb-icon-padding-y: #{$icon-padding-y};
+  --wb-icon-padding-x: #{$icon-padding-x};
+
+  --wb-header-height: #{$header-height};
+}
+
+// ----------------------------------------------------------------------------
+// --- SCSS Rules
+
+div.wunderbaum * {
   box-sizing: border-box;
+}
+div.wunderbaum {
   height: 100%; // fill parent container
   min-height: 4px;
-  background-color: $background-color;
+  background-color: var(--wb-background-color);
   margin: 0;
   padding: 0;
 
-  font-family: $font-stack;
+  font-family: var(--wb-font-stack);
   font-size: 14px;
 
-  color: $node-text-color;
-  border: 2px solid $border-color;
+  color: var(--wb-node-text-color);
+  border: 2px solid var(--wb-border-color);
   border-radius: 4px;
   background-clip: content-box; // Keep bg color outside rounded borders?
   overflow-x: auto;
@@ -85,7 +157,7 @@ div.wunderbaum {
   // Focus border is generated by the browsers per default:
   &:focus,
   &:focus-within {
-    border-color: $focus-border-color;
+    border-color: var(--wb-focus-border-color);
     // outline-style: none;
   }
 
@@ -119,8 +191,8 @@ div.wunderbaum {
   div.wb-row {
     position: absolute;
     width: 100%;
-    height: $row-outer-height;
-    line-height: $row-outer-height;
+    height: var(--wb-row-outer-height);
+    line-height: var(--wb-row-outer-height);
     border: 1px solid transparent;
   }
 
@@ -131,25 +203,25 @@ div.wunderbaum {
       position: sticky;
       left: 0;
       z-index: 1;
-      background-color: $background-color;
+      background-color: var(--wb-background-color);
     }
 
     div.wb-header {
       span.wb-col:first-of-type {
-        background-color: $header-color;
+        background-color: var(--wb-header-color);
       }
     }
     div.wb-node-list div.wb-row {
       &.wb-active span.wb-col:first-of-type,
       &.wb-selected span.wb-col:first-of-type {
-        background-color: $active-color;
+        background-color: var(--wb-active-color);
       }
       &.wb-active:hover span.wb-col:first-of-type,
       &.wb-selected:hover span.wb-col:first-of-type {
-        background-color: $active-hover-color;
+        background-color: var(--wb-active-hover-color);
       }
       &:hover span.wb-col:first-of-type {
-        background-color: $hover-color;
+        background-color: var(--wb-hover-color);
       }
     }
 
@@ -158,10 +230,10 @@ div.wunderbaum {
       div.wb-node-list div.wb-row {
         &.wb-active span.wb-col:first-of-type,
         &.wb-selected span.wb-col:first-of-type {
-          background-color: grayscale($active-color);
-          border-color: grayscale($active-border-color);
+          background-color: var(--wb-active-color-grayscale);
+          border-color: var(--wb-active-border-color-grayscale);
           &:hover span.wb-col:first-of-type {
-            background-color: grayscale($active-hover-color);
+            background-color: var(--wb-active-hover-color-grayscale);
           }
         }
       }
@@ -176,11 +248,11 @@ div.wunderbaum {
     div.wb-node-list div.wb-row {
       &.wb-active,
       &.wb-selected {
-        background-color: grayscale($active-color);
-        border-color: grayscale($active-border-color);
+        background-color: var(--wb-active-color-grayscale);
+        border-color: var(--wb-active-border-color-grayscale);
 
         &:hover {
-          background-color: grayscale($active-hover-color);
+          background-color: var(--wb-active-hover-color-grayscale);
         }
       }
     }
@@ -188,10 +260,10 @@ div.wunderbaum {
 
   &.wb-alternate div.wb-node-list {
     div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
-      background-color: $alternate-row-color;
+      background-color: var(--wb-alternate-row-color);
 
       &:hover {
-        background-color: $alternate-row-color-hover;
+        background-color: var(--wb-alternate-row-color-hover);
       }
     }
   }
@@ -199,33 +271,33 @@ div.wunderbaum {
   div.wb-node-list {
     div.wb-row {
       &:hover {
-        background-color: $hover-color;
+        background-color: var(--wb-hover-color);
       }
 
       &.wb-active,
       &.wb-selected {
-        background-color: $active-color;
+        background-color: var(--wb-active-color);
 
-        // border-color: $active-border-color;
+        // border-color: var(--wb-active-border-color);
         &:hover {
-          background-color: $active-hover-color;
-          // border-color: $active-hover-border-color;
+          background-color: var(--wb-active-hover-color);
+          // border-color: var(--wb-active-hover-border-color);
         }
       }
 
       &.wb-focus:not(.wb-active) {
         border-style: dotted;
-        border-color: $active-border-color;
+        border-color: var(--wb-active-border-color);
       }
 
       &.wb-active {
-        // background-color: $active-hover-color;
+        // background-color: var(--wb-active-hover-color);
         border-style: solid;
-        border-color: $active-border-color;
+        border-color: var(--wb-active-border-color);
 
         &:hover {
-          // background-color: $active-hover-color;
-          border-color: $active-hover-border-color;
+          // background-color: var(--wb-active-hover-color);
+          border-color: var(--wb-active-hover-border-color);
         }
       }
 
@@ -264,7 +336,7 @@ div.wunderbaum {
 
       &.wb-error,
       &.wb-status-error {
-        color: $error-color;
+        color: var(--wb-error-color);
       }
     }
   }
@@ -273,10 +345,10 @@ div.wunderbaum {
 
   div.wb-header {
     position: sticky;
-    height: $header-height;
-    border-bottom: 1px solid $border-color;
+    height: var(--wb-header-height);
+    border-bottom: 1px solid var(--wb-border-color);
     padding: 0;
-    background-color: $header-color;
+    background-color: var(--wb-header-color);
 
     span.wb-col {
       font-weight: bold;
@@ -302,7 +374,7 @@ div.wunderbaum {
       width: 3px;
       // float: right;
       border: none;
-      border-right: 2px solid $border-color;
+      border-right: 2px solid var(--wb-border-color);
       height: 100%;
       cursor: col-resize;
     }
@@ -313,8 +385,8 @@ div.wunderbaum {
     display: inline-block;
     // text-overflow: ellipsis;
     overflow: hidden;
-    height: $row-inner-height;
-    line-height: $row-inner-height;
+    height: var(--wb-row-inner-height);
+    line-height: var(--wb-row-inner-height);
     padding: 0 $col-padding-x;
     border-right: 1px solid $grid-color;
     white-space: nowrap;
@@ -334,9 +406,9 @@ div.wunderbaum {
     i.wb-expander,
     i.wb-icon,
     i.wb-indent {
-      height: $icon-outer-height;
-      width: $icon-outer-width;
-      padding: $icon-padding-y $icon-padding-x;
+      height: var(--wb-icon-outer-height);
+      width: var(--wb-icon-outer-width);
+      padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
       display: inline-block;
     }
 
@@ -346,10 +418,10 @@ div.wunderbaum {
     }
 
     img.wb-icon {
-      width: $icon-width;
-      height: $icon-height;
-      padding: $icon-padding-y $icon-padding-x;
-      // margin-top: $icon-padding-y;
+      width: var(--wb-icon-width);
+      height: var(--wb-icon-height);
+      padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
+      // margin-top: var(--wb-icon-padding-y);
     }
 
     i.wb-indent {
@@ -385,7 +457,7 @@ div.wunderbaum {
       div.wb-row {
         span.wb-col {
           &:hover {
-            background-color: $active-header-column-color;
+            background-color: var(--wb-active-header-column-color);
           }
         }
       }
@@ -393,20 +465,20 @@ div.wunderbaum {
 
     &.wb-cell-mode div.wb-header div.wb-row span.wb-col {
       &.wb-active {
-        background-color: $active-hover-color;
+        background-color: var(--wb-active-hover-color);
       }
     }
 
     div.wb-node-list div.wb-row {
-      border-bottom-color: $grid-color;
+      border-bottom-color: var(--wb-grid-color);
 
       &:hover:not(.wb-active):not(.wb-selected) {
-        background-color: $hover-color;
-        // border-color: $hover-border-color;
+        background-color: var(--wb-hover-color);
+        // border-color: var(--wb-hover-border-color);
       }
 
       &.wb-active {
-        border-bottom-color: $active-border-color;
+        border-bottom-color: var(--wb-active-border-color);
       }
 
       span.wb-col {
@@ -429,7 +501,7 @@ div.wunderbaum {
         > input[type="week"],
         > select {
           width: 100%;
-          max-height: $row-inner-height;
+          max-height: var(--wb-row-inner-height);
           border: none;
         }
 
@@ -450,7 +522,7 @@ div.wunderbaum {
       div.wb-row:not(.wb-colspan) {
         &.wb-active {
           span.wb-col.wb-active {
-            background-color: grayscale($active-cell-color);
+            background-color: var(--wb-active-cell-color-grayscale);
           }
         }
       }
@@ -458,17 +530,17 @@ div.wunderbaum {
     &.wb-cell-mode:focus-within,
     &.wb-cell-mode:focus {
       div.wb-row:not(.wb-colspan):not(.wb-selected) {
-        // background-color: $background-color;
+        // background-color: var(--wb-background-color);
 
         span.wb-col.wb-active {
-          background-color: $active-column-color;
+          background-color: var(--wb-active-column-color);
         }
 
         &.wb-active {
-          background-color: $active-column-color;
+          background-color: var(--wb-active-column-color);
 
           span.wb-col.wb-active {
-            background-color: $active-cell-color;
+            background-color: var(--wb-active-cell-color);
           }
         }
       }
@@ -476,10 +548,10 @@ div.wunderbaum {
 
     &.wb-alternate div.wb-node-list {
       div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
-        background-color: $alternate-row-color;
+        background-color: var(--wb-alternate-row-color);
 
         &:hover {
-          background-color: $alternate-row-color-hover;
+          background-color: var(--wb-alternate-row-color-hover);
         }
       }
     }
@@ -488,7 +560,7 @@ div.wunderbaum {
     &:not(:focus-within),
     &:not(:focus) {
       div.wb-node-list div.wb-row {
-        border-bottom-color: grayscale($grid-color);
+        border-bottom-color: var(--wb-grid-color-grayscale);
       }
     }
   }
@@ -498,14 +570,14 @@ div.wunderbaum {
   &.wb-ext-filter-dim,
   &.wb-ext-filter-hide {
     div.wb-node-list div.wb-row {
-      color: $filter-dim-color;
+      color: var(--wb-filter-dim-color);
 
       &.wb-submatch {
-        color: $filter-submatch-color;
+        color: var(--wb-filter-submatch-color);
       }
 
       &.wb-match {
-        color: $node-text-color;
+        color: var(--wb-node-text-color);
       }
     }
   }
@@ -523,7 +595,7 @@ div.wunderbaum {
     opacity: 0.5;
 
     .wb-node {
-      background-color: $drop-source-color;
+      background-color: var(--wb-drop-source-color);
     }
   }
 
@@ -531,7 +603,7 @@ div.wunderbaum {
     overflow: visible;
 
     .wb-node {
-      background-color: $drop-target-color;
+      background-color: var(--wb-drop-target-color);
       overflow: visible;
 
       // z-index: 1000;
@@ -601,7 +673,7 @@ div.wunderbaum {
     &:focus-within i.wb-expander,
     [class*="wb-statusnode-"] i.wb-expander {
       transition: color 0.6s;
-      color: $node-text-color;
+      color: var(--wb-node-text-color);
     }
   }
 
@@ -644,7 +716,7 @@ div.wunderbaum {
 }
 
 .wb-helper-disabled {
-  color: $dim-color;
+  color: var(--wb-dim-color);
 }
 
 .wb-helper-hidden {
@@ -652,11 +724,11 @@ div.wunderbaum {
 }
 
 .wb-helper-invalid {
-  color: $error-color;
+  color: var(--wb-error-color);
 }
 
 .wb-helper-lazy-expander {
-  color: $bg-highlight-color;
+  color: var(--wb-bg-highlight-color);
 }
 
 .wb-helper-link {
@@ -707,14 +779,14 @@ div.wunderbaum {
 // }
 // tri-state checkbox in indeterminate state
 .wb-col input[type="checkbox"]:indeterminate {
-  color: $dim-color;
+  color: var(--wb-dim-color);
   background-color: red;
 }
 
 .wb-col input:invalid {
-  // border-color: $error-color;
-  color: $error-color;
-  background-color: $error-background-color;
+  // border-color: var(--wb-error-color);
+  color: var(--wb-error-color);
+  background-color: var(--wb-error-background-color);
 }
 
 @keyframes wb-spin-animation {

package/src/wunderbaum.ts

@@ -44,6 +44,8 @@ import {
   RenderFlag,
   NodeVisitCallback,
   SortCallback,
+  NodeToDictCallback,
+  WbNodeData,
 } from "./types";
 import {
   DEFAULT_DEBUGLEVEL,
@@ -1772,6 +1774,19 @@ export class Wunderbaum {
     this.root.sortChildren(cmp, deep);
   }
 
+  /** Convert tree to an array of plain objects.
+   *
+   * @param callback(dict, node) is called for every node, in order to allow
+   *     modifications.
+   *     Return `false` to ignore this node or `"skip"` to include this node
+   *     without its children.
+   * @see {@link WunderbaumNode.toDict}.
+   */
+  toDictArray(callback?: NodeToDictCallback): Array<WbNodeData> {
+    const res = this.root.toDict(true, callback);
+    return res.children ?? [];
+  }
+
   /**
    * Update column headers and column width.
    * Return true if at least one column width changed.
@@ -1900,6 +1915,14 @@ export class Wunderbaum {
 
       colElem.style.left = col._ofsPx + "px";
       colElem.style.width = col._widthPx + "px";
+      // Add classes from `columns` definition to `<div.wb-col>` cells
+      if (typeof col.headerClasses === "string") {
+        col.headerClasses
+          ? colElem.classList.add(...col.headerClasses.split(" "))
+          : 0;
+      } else {
+        col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
+      }
 
       const title = util.escapeHtml(col.title || col.id);
       let tooltip = "";