@trebco/treb 25.7.1 → 25.7.5

package/dist/treb.d.ts

@@ -50,16 +50,21 @@ export interface EmbeddedSpreadsheetOptions {
 
     /**
      * key in localStorage for persisting document.
+     * @deprecated - this was renamed to local_storage for clarity. if both
+     * storage_key and local_storage are set we will use the value in local_storage.
+     */
+    storage_key?: string | boolean;
+
+    /**
+     * persist user changes to document in browser localStorage.
      *
-     * it's possible to set this to boolean `true`, in which case we will
-     * generate a storage key based on the page URI.
+     * if set to a string, the value is used as the storage key.
      *
-     * that can be convenient for quickly setting up a document, but don't
-     * use it if the page URI might change (the storage will get lost)
-     * or if there are multiple spreadsheets on the same page (they will
-     * overwrite each other).
+     * if set to `true`, we will generate a storage key based on the page URI.
+     * don't do that if you have multiple spreadsheets on a single page, or
+     * they will overwrite each other.
      */
-    storage_key?: string | boolean;
+    local_storage?: string | boolean;
 
     /** don't load immediately (?) */
     toll_initial_load?: boolean;
@@ -531,7 +536,7 @@ export declare class EmbeddedSpreadsheet {
     UnmergeCells(range?: RangeReference): void;
 
     /**
-     * revert to the network version of this document, if both `storage_key`
+     * revert to the network version of this document, if both `local_storage`
      * and `network_document` are set.
      */
     Revert(): void;

package/package.json

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

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

@@ -280,7 +280,7 @@ export class EmbeddedSpreadsheet {
    * 
    * @internal
    */
-  public options: EmbeddedSpreadsheetOptions & { storage_key: string|undefined };
+  public options: EmbeddedSpreadsheetOptions & { local_storage: string|undefined };
 
   /**
    * @internal
@@ -491,10 +491,16 @@ export class EmbeddedSpreadsheet {
 
     // super();
 
+    // we renamed this option, default to the new name
+
+    if (options.storage_key && !options.local_storage) {
+      options.local_storage = options.storage_key;
+    }
+
     // consolidate options w/ defaults. note that this does not
     // support nested options, for that you need a proper merge
 
-    this.options = { ...DefaultOptions, ...options, storage_key: this.ResolveStorageKey(options.storage_key, 'document') };
+    this.options = { ...DefaultOptions, ...options, local_storage: this.ResolveStorageKey(options.local_storage, 'document') };
 
     if (typeof this.options.imaginary_value === 'string') {
       NumberFormat.imaginary_character = this.options.imaginary_value;
@@ -521,8 +527,8 @@ export class EmbeddedSpreadsheet {
     // don't load if we're a split view. we can also skip the 
     // unload event, as parent will already have that set
 
-    if (this.options.storage_key && !this.options.toll_initial_load && !options.model) {
-      data = localStorage.getItem(this.options.storage_key) || undefined;
+    if (this.options.local_storage && !this.options.toll_initial_load && !options.model) {
+      data = localStorage.getItem(this.options.local_storage) || undefined;
       if (data) {
         source = LoadSource.LOCAL_STORAGE;
       }
@@ -539,10 +545,10 @@ export class EmbeddedSpreadsheet {
     // this one should not be done for a split view, but we should still
     // do it if the toll flag is set, and storage key is set. 
 
-    if (this.options.storage_key && !options.model ) {
+    if (this.options.local_storage && !options.model ) {
       window.addEventListener('beforeunload', () => {
-        if (this.options.storage_key) {
-          this.SaveLocalStorage(this.options.storage_key);
+        if (this.options.local_storage) {
+          this.SaveLocalStorage(this.options.local_storage);
         }
       });
     }
@@ -927,9 +933,9 @@ export class EmbeddedSpreadsheet {
     }
 
     // don't load if we are a split view
-    // UPDATE: don't load if we have a localStorage document. this is taking
-    // over the old alterante_document flow, because it doesn't make any sense
-    // otherwise. what would storage_key with document_name mean otherwise?
+    // UPDATE: don't load if we have a local_storage document. this is taking
+    // over the old alternate_document flow, because it doesn't make any sense
+    // otherwise. what would local_storage with document_name mean otherwise?
 
     if (network_document && !options.model && !data) {
       this.LoadNetworkDocument(network_document, this.options);
@@ -2319,16 +2325,16 @@ export class EmbeddedSpreadsheet {
   }
 
   /**
-   * revert to the network version of this document, if both `storage_key` 
+   * revert to the network version of this document, if both `local_storage` 
    * and `network_document` are set.
    */
   public Revert(): void {
 
     if (this.options.inline_document) {
       this.LoadDocument(this.options.inline_document);
-      if (this.options.storage_key) {
+      if (this.options.local_storage) {
         this.SaveLocalStorage('reverted_backup');
-        localStorage.removeItem(this.options.storage_key);
+        localStorage.removeItem(this.options.local_storage);
       }
       return;
     }
@@ -2351,9 +2357,9 @@ export class EmbeddedSpreadsheet {
       // flush storage? what about mistakes? maybe we should 
       // back it up somewhere? (...)
 
-      if (this.options.storage_key) {
+      if (this.options.local_storage) {
         this.SaveLocalStorage('reverted_backup');
-        localStorage.removeItem(this.options.storage_key);
+        localStorage.removeItem(this.options.local_storage);
       }
 
       return;
@@ -2514,7 +2520,7 @@ export class EmbeddedSpreadsheet {
     // FIXME: this is weird, why do we have a method for this, why
     // does it modify the key, and so on
 
-    this.options.storage_key = key;
+    this.options.local_storage = key;
     const json = localStorage.getItem(key);
 
     if (json) {
@@ -3243,7 +3249,7 @@ export class EmbeddedSpreadsheet {
    * @param key optional storage key. if omitted, the method will use
    * the key from local options (set at create time).
    */
-  public SaveLocalStorage(key = this.options.storage_key): void {
+  public SaveLocalStorage(key = this.options.local_storage): void {
 
     // API v1 OK
 
@@ -4761,8 +4767,8 @@ export class EmbeddedSpreadsheet {
 
       // console.info(json);
 
-      if (this.options.storage_key) {
-        localStorage.setItem(this.options.storage_key, json);
+      if (this.options.local_storage) {
+        localStorage.setItem(this.options.local_storage, json);
       }
       if (this.options.undo) {
         this.PushUndo(json, undo_selection, false);

package/treb-embed/src/options.ts

@@ -60,16 +60,21 @@ export interface EmbeddedSpreadsheetOptions {
 
   /** 
    * key in localStorage for persisting document. 
+   * @deprecated - this was renamed to local_storage for clarity. if both
+   * storage_key and local_storage are set we will use the value in local_storage.
+   */
+  storage_key?: string|boolean;
+
+  /**
+   * persist user changes to document in browser localStorage.
    * 
-   * it's possible to set this to boolean `true`, in which case we will 
-   * generate a storage key based on the page URI. 
+   * if set to a string, the value is used as the storage key.
    * 
-   * that can be convenient for quickly setting up a document, but don't 
-   * use it if the page URI might change (the storage will get lost)
-   * or if there are multiple spreadsheets on the same page (they will
-   * overwrite each other).
+   * if set to `true`, we will generate a storage key based on the page URI. 
+   * don't do that if you have multiple spreadsheets on a single page, or 
+   * they will overwrite each other.
    */
-  storage_key?: string|boolean;
+  local_storage?: string|boolean;
 
   /** don't load immediately (?) */
   toll_initial_load?: boolean;

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-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/grid.ts

@@ -2053,6 +2053,13 @@ export class Grid extends GridBase {
 
   }
 
+  protected RenameSheetInternal(target: Sheet, name: string) {
+    console.info("RIS");
+    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/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();