@trebco/treb 28.3.6 → 28.5.1

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v28.3. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v28.4. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -278,6 +278,13 @@ export interface ICellAddress {
  */
 export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
+    /**
+     * convenience function returns the name of the active sheet. if the
+     * sheet name has spaces or other characters that require quoting, it
+     * will be quoted using single quotes.
+     */
+    get active_sheet(): string;
+
     /** document name (metadata) */
     get document_name(): string | undefined;
 
@@ -769,6 +776,12 @@ export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
      */
     About(): void;
 
+    /**
+     * scroll the given address into view. it could be at either side
+     * of the window. optionally use smooth scrolling.
+     */
+    ScrollIntoView(address: AddressReference, smooth?: boolean): void;
+
     /**
      * Scroll to the given address. In the current implementation this method
      * will not change sheets, although it probably should if the reference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "28.3.6",
+  "version": "28.5.1",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {

package/treb-embed/markup/layout.html

@@ -100,8 +100,10 @@
           </button>
   
           <!-- list of tabs for sheets -->
-          <ol class="treb-spreadsheet-tabs" role="tablist"></ol>
-  
+          <div class="treb-spreadsheet-tab-container">
+            <ol class="treb-spreadsheet-tabs" role="tablist"></ol>
+          </div>
+
           <!-- converted to button, more appropriate -->
           <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" title="Add sheet">+</button>
   

package/treb-embed/src/embedded-spreadsheet.ts

@@ -451,6 +451,18 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    */
   private last_selection?: string;
 
+  /**
+   * convenience function returns the name of the active sheet. if the 
+   * sheet name has spaces or other characters that require quoting, it
+   * will be quoted using single quotes.
+   */
+  public get active_sheet(): string {
+    const name = this.grid.active_sheet.name;
+    if (QuotedSheetNameRegex.test(name)) {
+      return `'${name}'`;
+    }
+    return name;
+  }
 
   /** 
    * this was added for riskamp.com; it doesn't track modified, really, because
@@ -3717,6 +3729,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     });
   }
 
+  /**
+   * scroll the given address into view. it could be at either side
+   * of the window. optionally use smooth scrolling.
+   */
+  public ScrollIntoView(address: AddressReference, smooth = false): void {
+
+    if (typeof address === 'string') {
+      const reference = this.model.ResolveAddress(address, this.grid.active_sheet);
+      address = IsCellAddress(reference) ? reference : reference.start;
+    }
+
+    this.grid.ScrollIntoView(address, smooth);
+
+  }
+
   /** 
    * Scroll to the given address. In the current implementation this method
    * will not change sheets, although it probably should if the reference

package/treb-embed/style/tab-bar.scss

@@ -29,6 +29,12 @@
 
     grid-area: 3/1/4/2;
 
+    .treb-spreadsheet-tab-container {
+      align-self: flex-start;
+      overflow: hidden;
+      height: 2.2em;
+    }
+
     &,
     .treb-spreadsheet-tabs {
       display: flex;
@@ -40,6 +46,14 @@
       list-style-type: none;
       padding-inline-start: 0;
     }
+  
+    .treb-spreadsheet-tabs {
+      height: auto;
+      margin-block-start: 0;
+      margin: 0;
+      overflow-x: scroll;
+      overflow-y: hidden;
+    }
 
     &[hidden] {
       display: none;
@@ -74,6 +88,12 @@
       border: 1px solid var(--treb-tab-bar-tab-border-color, var(--treb-ui-border-color, #ccc));
       border-top-width: 0px;
       z-index: 1;
+
+      // the negative margins here (plus some correction below) makes the
+      // active tab overlap just a little bit, very tab like. we have to
+      // stop at the last one or it causes problems for the containing node
+      // (forces a 2-pixel scroll which is infuriating)
+
       margin-right: -2px;
 
       &:active, &:focus {
@@ -81,7 +101,22 @@
       }
 
     }
+
+    & .treb-spreadsheet-tabs>li {
+      height: 2.2em;
+      overflow: visible;
+      overflow-x: visible;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+    }
     
+    & .treb-add-tab {
+      margin-left: -1px;
+    }
+
     /** don't overflow/ellipsis the add tab button */
 
     /**
@@ -93,7 +128,7 @@
      & .treb-spreadsheet-tabs>li {
 
       white-space: nowrap;
-      overflow-x: hidden;
+      // overflow-x: hidden;
 
       &[selected] {
         z-index: 2;
@@ -190,6 +225,8 @@
       margin-right: -2px;
       /* margin-right: 1em; */
 
+      min-width: 2.5em; 
+
       svg {
         width: 1em;
         height: 1em;
@@ -216,15 +253,9 @@
 
     .treb-stats-panel {
 
-      /** 
-       * instead of having a junk node with flex-grow to take up space,
-       * we can use margin:auto to consume all available space -- as long
-       * as this node is in the layout. 
-       *
-       * in the declarative layout, we always have this node, but if it's
-       * not used it will just be empty.
-       */
-      margin-left: auto;
+      flex: 1 1;
+
+      text-align: end;
 
       white-space: nowrap;
       overflow: hidden;

package/treb-grid/src/layout/base_layout.ts

@@ -1484,7 +1484,7 @@ export abstract class BaseLayout {
    * scroll address into view, at top-left or bottom-right depending on
    * target and current position. also offsets for frozen rows, columns.
    */
-  public ScrollIntoView(address: ICellAddress): void {
+  public ScrollIntoView(address: ICellAddress, smooth = false): void {
 
     const target_rect = this.CellAddressToRectangle(address);
 
@@ -1519,24 +1519,34 @@ export abstract class BaseLayout {
     // in two scroll events. however in practice this is called on key events,
     // so it's unlikely.
 
+    let options: ScrollToOptions = {
+      behavior: smooth ? 'smooth' : 'auto',
+    };
+
     if (address.row !== Infinity) {
       if (target_rect.top < viewport.top + offset.y && !lock.y) {
-        this.scroll_reference_node.scrollTop = target_rect.top - offset.y;
+        // this.scroll_reference_node.scrollTop = target_rect.top - offset.y;
+        options.top = target_rect.top - offset.y;
       }
       else if (target_rect.bottom > viewport.bottom) {
-        this.scroll_reference_node.scrollTop = target_rect.bottom - height;
+        // this.scroll_reference_node.scrollTop = target_rect.bottom - height;
+        options.top = target_rect.bottom - height;
       }
     }
 
     if (address.column !== Infinity) {
       if (target_rect.left < viewport.left + offset.x && !lock.x) {
-        this.scroll_reference_node.scrollLeft = target_rect.left - offset.x;
+        // this.scroll_reference_node.scrollLeft = target_rect.left - offset.x;
+        options.left = target_rect.left - offset.x;
       }
       else if (target_rect.right > viewport.right) {
-        this.scroll_reference_node.scrollLeft = target_rect.right - width;
+        // this.scroll_reference_node.scrollLeft = target_rect.right - width;
+        options.left = target_rect.right - width;
       }
     }
 
+    this.scroll_reference_node.scrollTo(options);
+
   }
 
   public UpdateTooltip(options: TooltipOptions = {}): void {

package/treb-grid/src/types/grid.ts

@@ -2087,9 +2087,9 @@ export class Grid extends GridBase {
    * FIXME: we need a way to do this without scrolling the containing
    * page, in the event we do a scroll-on-load. small problem.
    */
-  public ScrollIntoView(address: ICellAddress): void {
+  public ScrollIntoView(address: ICellAddress, smooth = false): void {
     if (this.options.scrollbars) {
-      this.layout.ScrollIntoView(address);
+      this.layout.ScrollIntoView(address, smooth);
     }
   }