wunderbaum 0.0.1-0 → 0.0.3

package/src/wb_options.ts

@@ -7,8 +7,10 @@
 import {
   BoolOptionResolver,
   NavigationModeOption,
-  WbEventType,
+  WbNodeEventType,
+  WbTreeEventType,
 } from "./common";
+import { DndOptionsType } from "./wb_ext_dnd";
 
 export interface WbNodeData {
   title: string;
@@ -16,7 +18,7 @@ export interface WbNodeData {
   refKey?: string;
   expanded?: boolean;
   selected?: boolean;
-  checkbox?: boolean | "radio" | BoolOptionResolver;
+  checkbox?: boolean | string;
   children?: Array<WbNodeData>;
   // ...any?: Any;
 }
@@ -62,56 +64,167 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types: any; //[key: string]: any;
+  types?: any; //[key: string]: any;
   /**
    * A list of maps that define column headers. If this option is set,
-   * Wunderbaum becomes a tree-grid control instead of a plain tree.
+   * Wunderbaum becomes a treegrid control instead of a plain tree.
    * Column definitions can be passed as tree option, or be part of a `source`
    * response.
    * Default: `[]` meaning this is a plain tree.
    */
   columns?: Array<any>;
   /**
-   *
+   * 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
+   * real data.
    * Default: false.
    */
-  skeleton: false;
+  skeleton?: false;
   /**
-   *
-   * Default: false.
+   * Translation map for some system messages.
    */
-  strings: any; //[key: string] string;
+  strings?: any; //[key: string] string;
   /**
+   * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
+   * Default: 3 (4 in local debug environment)
    */
-  debugLevel: 3;
-  minExpandLevel: 0;
-  escapeTitles: true;
-  headerHeightPx: 22;
-  autoCollapse: false;
-  // --- Extensions ---
-  dnd: any; // = {};
-  filter: any; // = {};
+  debugLevel: number;
   /**
-   * A list of maps that define column headers. If this option is set,
-   * Wunderbaum becomes a tree grid control instead of a plain tree.
-   * Column definitions can be passed as tree option, or be part of a `source`
-   * response.
+   * Number of levels that are forced to be expanded, and have no expander icon.
+   *  Default: 0
+   */
+  minExpandLevel?: number;
+  // escapeTitles: boolean;
+  /**
+   * Height of the header row div.
+   * Default: 22
+   */
+  headerHeightPx: number;
+  /**
+   * Height of a node row div.
+   * Default: 22
+   */
+  rowHeightPx?: number;
+  /**
+   * Collapse siblings when a node is expanded.
+   * Default: false
+   */
+  autoCollapse?: boolean;
+  /**
+   * Default:  NavigationModeOption.startRow
    */
   navigationMode?: NavigationModeOption;
+  /**
+   * Show/hide header (pass bool or string)
+   */
+  header?: boolean | string | null;
+  /**
+   *
+   */
+  showSpinner?: boolean;
+  /**
+   * Default: true
+   */
+  checkbox?: boolean | "radio" | BoolOptionResolver;
+  /**
+   * Default: 200
+   */
+  updateThrottleWait?: number;
+  // --- KeyNav ---
+  /**
+   * Default: true
+   */
+  quicksearch?: boolean;
+
+  // --- Extensions ---
+  dnd?: DndOptionsType; // = {};
+  filter: any; // = {};
+  grid: any; // = {};
   // --- Events ---
   /**
    * Called after initial data was loaded and tree markup was rendered.
+   * Check `e.error` for status.
    * @category Callback
    */
-  init?: (e: WbEventType) => void;
+  init?: (e: WbTreeEventType) => void;
   /**
-   * Called after data was loaded from local storage.
+   *
+   * @category Callback
+   */
+  update?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  activate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  deactivate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  change?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  click?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  discard?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  error?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  enhanceTitle?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
    * @category Callback
    */
-  update?: (e: WbEventType) => void;
+  focus?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  keydown?: (e: WbNodeEventType) => void;
   /**
    * Called after data was loaded from local storage.
+   */
+  load?: (e: WbNodeEventType) => void;
+  /**
+   * @category Callback
+   */
+  modifyChild?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  receive?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  render?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  renderStatusNode?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
    * @category Callback
    */
-  modifyChild?: (e: WbEventType) => void;
+  select?: (e: WbNodeEventType) => void;
 }

package/src/wunderbaum.scss

@@ -177,7 +177,7 @@ div.wunderbaum {
   span.wb-col {
     position: absolute;
     display: inline-block;
-    text-overflow: ellipsis;
+    // text-overflow: ellipsis;
     height: $row-inner-height;
     line-height: $row-inner-height;
     padding: 0 $col-padding-x;
@@ -185,6 +185,25 @@ div.wunderbaum {
     &:last-of-type {
       border-right: none;
     }
+    overflow: visible; // allow resizer to overlap next col
+
+    span.wb-col-title {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    span.wb-col-resizer {
+      position: absolute;
+      top: 0;
+      // left: auto;
+      right: -1px;
+      width: 3px;
+      // float: right;
+      border: none;
+      border-right: 2px solid $border-color;
+      height: 100%;
+      cursor: col-resize;
+    }
   }
 
   span.wb-node {
@@ -373,6 +392,7 @@ div.wunderbaum {
 
   &.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);
       }
@@ -382,16 +402,19 @@ div.wunderbaum {
   /* Fade out expanders, when container is not hovered or active */
   &.wb-fade-expander {
     i.wb-expander {
-      transition: opacity 1.5s;
-      opacity: 0;
+      // only text-alpha is animated, since we want to keep the background color
+      // transition: opacity 1.5s;
+      // opacity: 0;
+      transition: color 1.5s;
+      color: rgba($node-text-color, 0);
     }
     div.wb-row.wb-loading i.wb-expander,
     &:hover i.wb-expander,
     &:focus i.wb-expander,
     &:focus-within i.wb-expander,
     [class*="wb-statusnode-"] i.wb-expander {
-      transition: opacity 0.6s;
-      opacity: 1;
+      transition: color 0.6s;
+      color: $node-text-color;
     }
   }