@trebco/treb 25.7.3 → 25.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "25.7.3",
+  "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/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();