wunderbaum 0.10.0 → 0.11.0

package/src/wb_options.ts

@@ -20,6 +20,7 @@ import {
   NodeTypeDefinitionMap,
   SelectModeType,
   WbActivateEventType,
+  WbButtonClickEventType,
   WbCancelableEventResultType,
   WbChangeEventType,
   WbClickEventType,
@@ -217,11 +218,30 @@ export interface WunderbaumOptions {
    * Default: false
    */
   fixedCol?: boolean;
+  /**
+   * Default value for ColumnDefinition.filterable option.
+   * Default: false
+   * @since 0.11.0
+   */
+  columnsFilterable?: boolean;
+  /**
+   * Default value for ColumnDefinition.menu option.
+   * Default: false
+   * @since 0.11.0
+   */
+  columnsMenu?: boolean;
   /**
    * Default value for ColumnDefinition.resizable option.
    * Default: false
+   * @since 0.10.0
+   */
+  columnsResizable?: boolean;
+  /**
+   * Default value for ColumnDefinition.sortable option.
+   * Default: false
+   * @since 0.11.0
    */
-  resizableColumns?: boolean;
+  columnsSortable?: boolean;
 
   // --- Selection ---
   /**
@@ -271,11 +291,15 @@ export interface WunderbaumOptions {
    */
   beforeExpand?: (e: WbExpandEventType) => WbCancelableEventResultType;
   /**
-   *
    * Return `false` to prevent default handling, i.e. (de)selecting the node.
    * @category Callback
    */
   beforeSelect?: (e: WbSelectEventType) => WbCancelableEventResultType;
+  /**
+   * Return `false` to prevent default handling, i.e. (de)selecting the node.
+   * @category Callback
+   */
+  buttonClick?: (e: WbButtonClickEventType) => void;
   /**
    *
    * @category Callback

package/src/wunderbaum.scss

@@ -183,8 +183,8 @@ div.wunderbaum {
     position: sticky;
     top: 0;
     z-index: 2;
-    user-select: none;
     -webkit-user-select: none; /* Safari */
+    user-select: none;
   }
 
   div.wb-header,
@@ -386,13 +386,23 @@ div.wunderbaum {
       border: none;
       border-right: 2px solid var(--wb-border-color);
       height: 100%;
-      user-select: none;
       -webkit-user-select: none; // Safari
+      user-select: none;
       &.wb-col-resizer-active {
         cursor: col-resize;
         // border-right-color: red;
       }
     }
+
+    i.wb-col-icon {
+      float: inline-end;
+      padding-left: 2px;
+
+      &:hover {
+        cursor: pointer;
+        color: var(--wb-focus-border-color);
+      }
+    }
   }
 
   span.wb-col {
@@ -412,8 +422,8 @@ div.wunderbaum {
   }
 
   span.wb-node {
-    user-select: none;
     -webkit-user-select: none; // Safari
+    user-select: none;
     // &:first-of-type {
     //   margin-left: 8px; // leftmost icon gets a little margin
     // }
@@ -773,12 +783,12 @@ div.wunderbaum {
 }
 
 .wb-no-select {
-  user-select: none;
   -webkit-user-select: none; // Safari
+  user-select: none;
 
   span.wb-title {
-    user-select: contain;
     -webkit-user-select: contain; // Safari
+    user-select: contain;
   }
 }
 

package/src/wunderbaum.ts

@@ -47,6 +47,7 @@ import {
   SetActiveOptions,
   SetColumnOptions,
   SetStatusOptions,
+  SortByPropertyOptions,
   SortCallback,
   SourceType,
   UpdateOptions,
@@ -285,7 +286,7 @@ export class Wunderbaum {
     delete opts.types;
 
     // --- Create Markup
-    this.element = util.elemFromSelector(opts.element) as HTMLDivElement;
+    this.element = util.elemFromSelector<HTMLDivElement>(opts.element)!;
     util.assert(!!this.element, `Invalid 'element' option: ${opts.element}`);
 
     this.element.classList.add("wunderbaum");
@@ -298,9 +299,8 @@ export class Wunderbaum {
 
     // Create header markup, or take it from the existing html
 
-    this.headerElement = this.element.querySelector(
-      "div.wb-header"
-    ) as HTMLDivElement;
+    this.headerElement =
+      this.element.querySelector<HTMLDivElement>("div.wb-header")!;
 
     const wantHeader =
       opts.header == null ? this.columns.length > 1 : !!opts.header;
@@ -312,9 +312,8 @@ export class Wunderbaum {
         "`opts.columns` must not be set if markup already contains a header"
       );
       this.columns = [];
-      const rowElement = this.headerElement.querySelector(
-        "div.wb-row"
-      ) as HTMLDivElement;
+      const rowElement =
+        this.headerElement.querySelector<HTMLDivElement>("div.wb-row")!;
       for (const colDiv of rowElement.querySelectorAll("div")) {
         this.columns.push({
           id: colDiv.dataset.id || `col_${this.columns.length}`,
@@ -337,9 +336,7 @@ export class Wunderbaum {
         </div>`;
 
       if (!wantHeader) {
-        const he = this.element.querySelector(
-          "div.wb-header"
-        ) as HTMLDivElement;
+        const he = this.element.querySelector<HTMLDivElement>("div.wb-header")!;
         he.style.display = "none";
       }
     }
@@ -349,15 +346,15 @@ export class Wunderbaum {
       <div class="wb-list-container">
         <div class="wb-node-list"></div>
       </div>`;
-    this.listContainerElement = this.element.querySelector(
+    this.listContainerElement = this.element.querySelector<HTMLDivElement>(
       "div.wb-list-container"
-    ) as HTMLDivElement;
-    this.nodeListElement = this.listContainerElement.querySelector(
-      "div.wb-node-list"
-    ) as HTMLDivElement;
-    this.headerElement = this.element.querySelector(
-      "div.wb-header"
-    ) as HTMLDivElement;
+    )!;
+    this.nodeListElement =
+      this.listContainerElement.querySelector<HTMLDivElement>(
+        "div.wb-node-list"
+      )!;
+    this.headerElement =
+      this.element.querySelector<HTMLDivElement>("div.wb-header")!;
 
     this.element.classList.toggle("wb-grid", this.columns.length > 1);
 
@@ -418,6 +415,17 @@ export class Wunderbaum {
     });
     this.resizeObserver.observe(this.element);
 
+    util.onEvent(this.element, "click", ".wb-button,.wb-col-icon", (e) => {
+      const info = Wunderbaum.getEventInfo(e);
+      const command = (<HTMLElement>e.target)?.dataset?.command;
+
+      this._callEvent("buttonClick", {
+        event: e,
+        info: info,
+        command: command,
+      });
+    });
+
     util.onEvent(this.nodeListElement, "click", "div.wb-row", (e) => {
       const info = Wunderbaum.getEventInfo(e);
       const node = info.node;
@@ -1078,7 +1086,7 @@ export class Wunderbaum {
 
   /** Run code, but defer rendering of viewport until done.
    *
-   * ```
+   * ```js
    * tree.runWithDeferredUpdate(() => {
    *   return someFuncThatWouldUpdateManyNodes();
    * });
@@ -1602,7 +1610,7 @@ export class Wunderbaum {
     }
   }
 
-  /** Reset column widths to default. */
+  /** Reset column widths to default. @since 0.10.0 */
   resetColumns() {
     this.columns.forEach((col) => {
       delete col.customWidthPx;
@@ -1610,6 +1618,11 @@ export class Wunderbaum {
     this.update(ChangeType.colStructure);
   }
 
+  // /** Renumber nodes `_nativeIndex`. @see {@link WunderbaumNode.resetNativeChildOrder} */
+  // resetNativeChildOrder(options?: ResetOrderOptions) {
+  //   this.root.resetNativeChildOrder(options);
+  // }
+
   /**
    * Make sure that this node is vertically scrolled into the viewport.
    *
@@ -1790,15 +1803,15 @@ export class Wunderbaum {
    * The render operation is async and debounced unless the `immediate` option
    * is set.
    *
-   * Use {@link WunderbaumNode.update()} if only a single node has changed,
-   * or {@link WunderbaumNode._render()}) to pass special options.
+   * Use {@link WunderbaumNode.update} if only a single node has changed,
+   * or {@link WunderbaumNode._render}) to pass special options.
    */
   update(change: ChangeType, options?: UpdateOptions): void;
 
   /**
    * Update a row to reflect a single node's modification.
    *
-   * @see {@link WunderbaumNode.update()}, {@link WunderbaumNode._render()}
+   * @see {@link WunderbaumNode.update}, {@link WunderbaumNode._render}
    */
   update(
     change: ChangeType,
@@ -1988,6 +2001,15 @@ export class Wunderbaum {
     this.root.sortChildren(cmp, deep);
   }
 
+  /**
+   * Convenience method to implement column sorting.
+   * @see {@link WunderbaumNode.sortByProperty}.
+   * @since 0.11.0
+   */
+  sortByProperty(options: SortByPropertyOptions) {
+    this.root.sortByProperty(options);
+  }
+
   /** Convert tree to an array of plain objects.
    *
    * @param callback is called for every node, in order to allow
@@ -2109,6 +2131,12 @@ export class Wunderbaum {
     return modified;
   }
 
+  protected _insertIcon(icon: string, elem: HTMLElement) {
+    const iconElem = document.createElement("i");
+    iconElem.className = icon;
+    elem.appendChild(iconElem);
+  }
+
   /** Create/update header markup from `this.columns` definition.
    * @internal
    */
@@ -2119,6 +2147,7 @@ export class Wunderbaum {
     if (!wantHeader) {
       return;
     }
+    const iconMap = this.iconMap;
     const colCount = this.columns.length;
     const headerRow = this.headerElement.querySelector(".wb-row")!;
     util.assert(headerRow, "Expected a row in header element");
@@ -2139,22 +2168,55 @@ export class Wunderbaum {
         col.classes ? colElem.classList.add(...col.classes.split(" ")) : 0;
       }
 
-      const title = util.escapeHtml(col.title || col.id);
+      // Add tooltip to column title
       let tooltip = "";
       if (col.tooltip) {
         tooltip = util.escapeTooltip(col.tooltip);
         tooltip = ` title="${tooltip}"`;
       }
-      let resizer = "";
+      // Add column header icons
+      let addMarkup = "";
+      // NOTE: we use CSS float: right to align icons, so they must be added in
+      // reverse order
+      if (util.toBool(col.menu, this.options.columnsMenu, false)) {
+        const iconClass = "wb-col-icon-menu " + iconMap.colMenu;
+        const icon = `<i data-command=menu class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      if (util.toBool(col.sortable, this.options.columnsSortable, false)) {
+        let iconClass = "wb-col-icon-sort " + iconMap.colSortable;
+        if (col.sortOrder) {
+          iconClass += `wb-col-sort-${col.sortOrder}`;
+          iconClass +=
+            col.sortOrder === "asc" ? iconMap.colSortAsc : iconMap.colSortDesc;
+        }
+        const icon = `<i data-command=sort class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      if (util.toBool(col.filterable, this.options.columnsFilterable, false)) {
+        colElem.classList.toggle("wb-col-filter", !!col.filterActive);
+        let iconClass = "wb-col-icon-filter " + iconMap.colFilter;
+        if (col.filterActive) {
+          iconClass += iconMap.colFilterActive;
+        }
+        const icon = `<i data-command=filter class="wb-col-icon ${iconClass}"></i>`;
+        addMarkup += icon;
+      }
+      // Add resizer to all but the last column
       if (i < colCount - 1) {
-        if (util.toBool(col.resizable, this.options.resizableColumns, false)) {
-          resizer =
+        if (util.toBool(col.resizable, this.options.columnsResizable, false)) {
+          addMarkup +=
             '<span class="wb-col-resizer wb-col-resizer-active"></span>';
         } else {
-          resizer = '<span class="wb-col-resizer"></span>';
+          addMarkup += '<span class="wb-col-resizer"></span>';
         }
       }
-      colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${resizer}`;
+
+      // Create column header
+      const title = util.escapeHtml(col.title || col.id);
+      colElem.innerHTML = `<span class="wb-col-title"${tooltip}>${title}</span>${addMarkup}`;
+
+      // Highlight active column
       if (this.isCellNav()) {
         colElem.classList.toggle("wb-active", i === this.activeColIdx);
       }
@@ -2242,6 +2304,10 @@ export class Wunderbaum {
     }
 
     if (this.options.connectTopBreadcrumb) {
+      util.assert(
+        this.options.connectTopBreadcrumb.textContent != null,
+        `Invalid 'connectTopBreadcrumb' option (input element expected).`
+      );
       let path = this.getTopmostVpNode(true)?.getPath(false, "title", " > ");
       path = path ? path + " >" : "";
       this.options.connectTopBreadcrumb.textContent = path;
@@ -2629,6 +2695,7 @@ export class Wunderbaum {
   /**
    * Return the number of nodes that match the current filter.
    * @see {@link Wunderbaum.filterNodes}
+   * @since 0.9.0
    */
   countMatches(): number {
     return (this.extensions.filter as FilterExtension).countMatches();