@trebco/treb 25.7.3 → 25.7.7

package/package.json

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

package/treb-base-types/src/import.ts

@@ -66,6 +66,9 @@ export interface ImportedSheetData {
   // new
   annotations?: AnchoredAnnotation[];
 
+  // new
+  outline?: number[];
+
   hidden?: boolean;
 
 }

package/treb-embed/markup/layout.html

@@ -94,16 +94,16 @@
             add/remove tab should both be buttons, or at least have tabindexes 
           -->
   
-          <!-- why is this a div (...and see below) -->
-          <div class="treb-delete-tab" title="Delete current sheet" data-command="delete-tab" data-conditional="delete-tab">
-            <svg viewbox='0 0 16 16'><path d='M4,4 L12,12 M12,4 L4,12'/></svg>
-          </div>
+          <!-- converted to button, more appropriate -->
+          <button class="treb-delete-tab" title="Delete current sheet" data-command="delete-tab" data-conditional="delete-tab">
+            <svg tabindex="-1" viewbox='0 0 16 16'><path d='M4,4 L12,12 M12,4 L4,12'/></svg>
+          </button>
   
           <!-- list of tabs for sheets -->
           <ol class="treb-spreadsheet-tabs" role="tablist"></ol>
   
-          <!-- ...and why is this an anchor? -->
-          <a class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" title="Add sheet">+</a>
+          <!-- converted to button, more appropriate -->
+          <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" title="Add sheet">+</button>
   
           <!-- 
             we removed the junk node with "flex grow" to split the layout, in

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -282,7 +282,9 @@ export class SpreadsheetConstructor {
           if (element instanceof HTMLScriptElement) {
             if (element.type === 'application/json') {
               const name = element.getAttribute('name') || '';
-              if (name === inline_name) {
+
+              // add special case for aggressive clients/wrappers
+              if (name === inline_name || !name && inline_name === 'true') {
                 const content = element.textContent;
                 if (content) {
                   try {

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

@@ -228,6 +228,9 @@ export class EmbeddedSpreadsheet {
   /** @internal */
   public static enable_formatter = false;
 
+  /** @internal */
+  public static one_time_warnings: Record<string, boolean> = {};
+
   /**
    * this flag will be set on LoadDocument. the intent is to be able to
    * know if you have loaded a network document, which may happen before you
@@ -865,7 +868,10 @@ export class EmbeddedSpreadsheet {
 
     }
     else {
-      console.info('not initializing grid; don\'t call UI functions');
+      if (!EmbeddedSpreadsheet.one_time_warnings.headless) {
+        EmbeddedSpreadsheet.one_time_warnings.headless = true;
+        console.info('not initializing grid; don\'t call UI functions');
+      }
       this.grid.headless = true; // ensure
     }
 

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

@@ -33,7 +33,7 @@
     .treb-spreadsheet-tabs {
       display: flex;
       flex-direction: row;
-      z-index: 1;
+      z-index: 2;
       max-width: 100%;
       height: 2.2em;
       color: var(--treb-ui-color, inherit);
@@ -53,7 +53,8 @@
     }
 
     & .treb-spreadsheet-tabs>li,
-    & .treb-add-tab {
+    & .treb-add-tab,
+    & .treb-delete-tab {
 
       font-size: inherit;
       padding: .25em .75em;
@@ -75,6 +76,29 @@
       z-index: 1;
       margin-right: -2px;
 
+      &:active, &:focus {
+        z-index: 3;
+      }
+
+    }
+    
+    /** don't overflow/ellipsis the add tab button */
+
+    /**
+     * for ellipsis to work, it seems like it has to be inside
+     * a span in the tab. since we are not using it atm I removed
+     * that span, but if we want ellpisis it will need to come back.
+     */
+
+     & .treb-spreadsheet-tabs>li {
+
+      white-space: nowrap;
+      overflow-x: hidden;
+
+      &[selected] {
+        z-index: 2;
+      }
+
     }
 
     & .treb-scale-control {
@@ -143,6 +167,13 @@
 
     & .treb-delete-tab {
 
+      // was a div, now a button, so needs some adjustments
+      // why double focus?
+
+      border: none;
+      background: transparent;
+      color: currentColor;
+
       font-size: inherit;
       padding: .25em .75em;
       cursor: default;
@@ -177,6 +208,10 @@
         stroke-linecap: round;
       }
 
+      &:active, &:focus {
+        z-index: 3;
+      }
+
     }
 
     .treb-stats-panel {
@@ -208,24 +243,6 @@
       }
     }
 
-    /** don't overflow/ellipsis the add tab button */
-
-    /**
-     * for ellipsis to work, it seems like it has to be inside
-     * a span in the tab. since we are not using it atm I removed
-     * that span, but if we want ellpisis it will need to come back.
-     */
-
-    & .treb-spreadsheet-tabs>li {
-
-      white-space: nowrap;
-      overflow-x: hidden;
-
-      &[selected] {
-        z-index: 2;
-      }
-
-    }
 
   }
 

package/treb-export/src/import2.ts

@@ -478,6 +478,7 @@ export class Importer {
     // data (and row heights)
 
     const row_heights: number[] = [];
+    const outline: number[] = [];
 
     const rows = FindAll('worksheet/sheetData/row');
 
@@ -491,6 +492,12 @@ export class Importer {
           height = Math.round(num * 4 / 3); // seems to be the excel unit -> pixel ratio
         }
       }
+      if (row.a$?.outlineLevel) {
+        const num = Number(row.a$.outlineLevel);
+        if (!isNaN(num)) {
+          outline[row_index - 1] = num;
+        }
+      }
 
       // if there's a height which is not === default height, but 
       // the customHeight attribute is not set, then it's been auto-sized.
@@ -867,6 +874,10 @@ export class Importer {
       styles: this.workbook?.style_cache?.CellXfToStyles() || [],
     };
 
+    if (outline.length) {
+      result.outline = outline;
+    }
+
     if (sheet.visible_state === VisibleState.hidden || sheet.visible_state === VisibleState.very_hidden) {
       result.hidden = true;
     }

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

@@ -354,7 +354,7 @@ export abstract class BaseLayout {
 
     this.sort_button = DOMUtilities.Create<HTMLButtonElement>(
       'button', 
-      'treb-sort-button', undefined, undefined, { title: 'Sort table'});
+      'treb-sort-button', undefined, undefined, { title: 'Sort table', tabindex: '-1'});
 
     this.HideNote();
 
@@ -451,6 +451,7 @@ export abstract class BaseLayout {
   public HideTableSortButton() {
     this.sort_button.style.opacity = '0';
     this.sort_button.style.pointerEvents = 'none';
+    this.sort_button.setAttribute('tabindex', '-1');
   }
 
   public ShowTableSortButton(table: Table, column: number, address: ICellAddress): void {
@@ -469,6 +470,7 @@ export abstract class BaseLayout {
       }
     }
     
+    this.sort_button.setAttribute('tabindex', '0  ');
     this.sort_button.style.opacity = '1';
     this.sort_button.style.pointerEvents = 'initial';
     this.sort_button.classList.remove('asc', 'desc');

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

@@ -81,7 +81,13 @@ export interface ViewData {
 
 export interface ImageAnnotationData {
   src: string;
-  scale: string;
+
+  /**
+   * @privateRemarks
+   * why is this a string?
+   */
+  scale: string; 
+  
   original_size: { 
     width: number; 
     height: number;

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

@@ -2053,6 +2053,12 @@ export class Grid extends GridBase {
 
   }
 
+  protected RenameSheetInternal(target: Sheet, name: string) {
+    super.RenameSheetInternal(target, name);
+    this.tab_bar?.Update();
+
+  }
+
   /**
    * translate function from common (english) -> local language. this could
    * be inlined (assuming it's only called in one place), but we are breaking

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

@@ -148,6 +148,13 @@ export class Sheet {
     return this._image;
   }
 
+  /**
+   * @internal
+   * 
+   * testing, not serialized atm
+   */
+  public outline: number[] | undefined;
+
   /** internal ID */
   // tslint:disable-next-line: variable-name
   private id_: number;
@@ -2686,6 +2693,10 @@ export class Sheet {
 
     const styles = data.styles;
 
+    if (data.outline) {
+      this.outline = data.outline;
+    }
+
     // adding sheet style...
 
     // 0 is implicitly just a general style

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

@@ -453,6 +453,7 @@ export class TabBar extends EventSource<TabEvent> {
       const index = tabs.length;
       // const tab = document.createElement('div');
       const tab = document.createElement('li');
+      tab.setAttribute('tabindex', '0');
 
       // tab.classList.add('tab');
       tab.style.order = (index * 2).toString();