wunderbaum 0.11.1 → 0.12.1

package/src/wunderbaum.scss

@@ -1,9 +1,11 @@
 /*!
  * Wunderbaum style sheet (generated from wunderbaum.scss)
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 // @use "sass:meta";
+@use "sass:color";
+@use "sass:list";
 
 // ----------------------------------------------------------------------------
 // --- Define default colors and settings
@@ -22,26 +24,26 @@ $alternate-row-color-hover: #f3f3f3; //#f7fcfe;
 $focus-border-color: #275dc5;
 
 // derived
-$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%);
-$error-background-color: adjust-color($error-color, $lightness: 45%);
+$drop-source-color: color.adjust($node-text-color, $lightness: 50%);
+$drop-target-color: color.adjust($bg-highlight-color, $lightness: 40%);
+$dim-color: color.adjust($node-text-color, $lightness: 20%);
+$error-background-color: color.adjust($error-color, $lightness: 45%);
 // @debug $dim-color;
-$hover-color: adjust-color($bg-highlight-color, $lightness: 48%); // #f7f7f7;
+$hover-color: color.adjust($bg-highlight-color, $lightness: 48%); // #f7f7f7;
 $hover-border-color: $hover-color;
 $grid-color: #dedede;
 $active-color: #e5f3fb;
-$active-cell-color: adjust-color($bg-highlight-color, $lightness: 20%);
+$active-cell-color: color.adjust($bg-highlight-color, $lightness: 20%);
 $active-border-color: #70c0e7;
 $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);
+$active-header-column-color: color.adjust($header-color, $lightness: -10%);
+$active-color-grayscale: color.grayscale($active-color);
+$active-border-color-grayscale: color.grayscale($active-border-color);
+$active-hover-color-grayscale: color.grayscale($active-hover-color);
+$active-cell-color-grayscale: color.grayscale($active-cell-color);
+$grid-color-grayscale: color.grayscale($grid-color);
 // @debug $active-header-column-color;
 $filter-dim-color: #dedede;
 $filter-submatch-color: #868581;
@@ -67,8 +69,8 @@ $header-height: $row-outer-height;
 // $level-rainbow: rgba(255, 255, 64, 0.07), rgba(127, 255, 127, 0.07),
 //   rgba(255, 127, 255, 0.07), rgba(79, 236, 236, 0.07);
 // Slightly stronger*
-$level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
-  rgb(204, 250, 250);
+$level-rainbow:
+  rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254), rgb(204, 250, 250);
 
 // ----------------------------------------------------------------------------
 // --- Define CSS variables with calculated default values
@@ -696,10 +698,10 @@ div.wunderbaum {
 
   /* Colorize indentation levels. */
   &.wb-rainbow {
-    @for $i from 1 through length($level-rainbow) {
-      i.wb-expander:nth-child(#{length($level-rainbow)}n + #{$i}),
-      i.wb-indent:nth-child(#{length($level-rainbow)}n + #{$i}) {
-        background: nth($level-rainbow, $i);
+    @for $i from 1 through list.length($level-rainbow) {
+      i.wb-expander:nth-child(#{list.length($level-rainbow)}n + #{$i}),
+      i.wb-indent:nth-child(#{list.length($level-rainbow)}n + #{$i}) {
+        background: list.nth($level-rainbow, $i);
       }
     }
   }

package/src/wunderbaum.ts

@@ -3,7 +3,7 @@
  *
  * A treegrid control.
  *
- * Copyright (c) 2021-2024, Martin Wendt (https://wwWendt.de).
+ * Copyright (c) 2021-2025, Martin Wendt (https://wwWendt.de).
  * https://github.com/mar10/wunderbaum
  *
  * Released under the MIT license.
@@ -125,14 +125,14 @@ export class Wunderbaum {
   protected _focusNode: WunderbaumNode | null = null;
 
   /** Currently active node if any.
-   * Use @link {WunderbaumNode.setActive|setActive} to modify.
+   * Use {@link WunderbaumNode.setActive|setActive} to modify.
    */
   public get activeNode() {
     // Check for deleted node, i.e. node.tree === null
     return this._activeNode?.tree ? this._activeNode : null;
   }
   /** Current node hat has keyboard focus if any.
-   * Use @link {WunderbaumNode.setFocus|setFocus()} to modify.
+   * Use {@link WunderbaumNode.setFocus|setFocus()} to modify.
    */
   public get focusNode() {
     // Check for deleted node, i.e. node.tree === null
@@ -319,7 +319,7 @@ export class Wunderbaum {
       // User existing header markup to define `this.columns`
       util.assert(
         !this.columns,
-        "`opts.columns` must not be set if markup already contains a header"
+        "`opts.columns` must not be set if table markup already contains a header"
       );
       this.columns = [];
       const rowElement =
@@ -380,8 +380,7 @@ export class Wunderbaum {
     // --- Load initial data
     if (opts.source) {
       if (opts.showSpinner) {
-        this.nodeListElement.innerHTML =
-          "<progress class='spinner'>loading...</progress>";
+        this.nodeListElement.innerHTML = `<progress class='spinner'>${opts.strings.loading}</progress>`;
       }
       this.load(opts.source)
         .then(() => {
@@ -498,7 +497,12 @@ export class Wunderbaum {
       ) {
         return false;
       }
-      if (node && info.colIdx === 0 && node.isExpandable()) {
+      if (
+        node &&
+        info.colIdx === 0 &&
+        node.isExpandable() &&
+        info.region !== NodeRegion.expander
+      ) {
         this._callMethod("edit._stopEditTitle");
         node.setExpanded(!node.isExpanded());
       }
@@ -2395,8 +2399,9 @@ export class Wunderbaum {
     // this.debug("render", opts);
     const obsoleteNodes = new Set<WunderbaumNode>();
     this.nodeListElement.childNodes.forEach((elem) => {
-      const tr = elem as HTMLTableRowElement;
-      obsoleteNodes.add((<any>tr)._wb_node);
+      if ((<any>elem)._wb_node) {
+        obsoleteNodes.add((<any>elem)._wb_node);
+      }
     });
 
     let idx = 0;