@trebco/treb 23.6.5 → 25.0.0-rc1

package/treb-embed/markup/layout.html

@@ -0,0 +1,137 @@
+
+<div class="treb-layout">
+  
+  <div class="treb-layout-header treb-animate">
+    <div class="treb-toolbar">
+
+      <!-- toolbar layout is in a separate file -->
+
+      <!-- 
+
+        should we have an include syntax? 
+        ...
+        actually I'd rather not, atm we use pure html and not
+        templates. if you want to use templates we should use
+        something that already exists, rather than reinventing
+        that particular wheel.
+
+      -->
+
+    </div>
+  </div>
+
+  <!-- 
+      dialog plus a mask... do we need the mask? it's used to 
+      center the dialog. we can use the grid to put the mask 
+      in the right place.
+    -->
+
+  <div class='treb-dialog-mask'>
+    <div data-bind='dialog' class='treb-embed-dialog'>
+      <div data-bind='left'>
+        <a href='https://treb.app' target='_blank'>
+          <div class='treb-icon-64'></div>
+        </a>
+      </div>
+      <div data-bind='middle'>
+        <div data-bind='title' class='treb-embed-dialog-title'></div>
+        <div data-bind='message' class='treb-embed-dialog-message'></div>
+        <div data-bind='about' class='treb-embed-dialog-body'></div>
+      </div>
+      <button type='button' title='Close dialog' data-bind='close' class='treb-close-box'>
+        <svg viewBox='0 0 16 16'>
+          <path d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/>
+          <path d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="treb-layout-spreadsheet treb-views">
+
+    <!-- I rather like <template/>. perhaps we could make more use of them. -->
+    
+    <!-- 
+      how about we move the view template (or raw html) into the spreadsheet class? 
+      as it stands now, if we have two spreadsheets on a page we'll have two templates
+      as well. seems unecessary.
+    -->
+
+    <template class="treb-view-template">
+      <div class="treb-view">
+
+        <div class="treb-formula-bar notranslate" hidden>
+          <div class="treb-address-label"><div></div></div>
+          <div class="treb-editor-container">
+            <div contenteditable="true"></div>
+          </div>
+        </div>
+
+        <!-- shouldn't grid be on the next one? which has a tabindex? -->
+        <div class="treb-spreadsheet-body" role="grid">
+          <div class="treb-grid" tabindex="-1">
+
+            <!-- 
+              this used to be dynamically created, but optionally; what
+              happens now if we _don't_ want the overlay editor? we should 
+              probably remove it, at least from flow.
+            -->
+
+            <div class="treb-overlay-container notranslate" translate="no">
+              <div class="treb-overlay-inset">
+                <div class="treb-overlay-editor" contenteditable tabindex="-1" spellcheck="true" role="gridcell"></div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="treb-spreadsheet-footer" hidden>
+
+          <!-- 
+            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>
+  
+          <!-- 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>
+  
+          <!-- 
+            we removed the junk node with "flex grow" to split the layout, in
+            favor of giving stats panel `margin-left:auto` which consumes all
+            available space. but that means you cannot remove this node from
+            layout, or it will get out of alignment. if this is empty it should
+            take up no space, so it should be harmless.
+          -->
+          
+          <div class="treb-stats-panel"></div>
+  
+          <div class="treb-scale-control" data-conditional="scale-control"></div>
+  
+        </div>
+
+        <div class="treb-layout-resize-handle" data-conditional="resize"></div>
+        
+      </div> <!-- /treb-view -->
+    </template>
+
+  </div>
+
+  <div class="treb-layout-sidebar treb-animate">
+    <button data-command="recalculate" title="Recalculate"></button>
+    <button data-command="toggle-toolbar" data-conditional="toolbar" title="Toggle toolbar"></button>
+    <button data-command="export-xlsx" data-conditional="export" title="Export as XLSX"></button>
+    <button data-command="revert" data-conditional="revert" title="Revert to original version"></button>
+    <button data-command="about" title="What's this?"></button>
+  </div>
+
+  <button class="treb-toggle-sidebar-button" title="Toggle sidebar"></button>
+
+</div>

package/treb-embed/markup/toolbar.html

@@ -0,0 +1,175 @@
+
+  <div class="treb-menu" title="File menu" file-menu>
+    <div>
+      <button data-command="reset">New document</button>
+      <div separator></div>
+      <button data-command="import-file">Open file...</button>
+      <button data-command="save-json">Save JSON</button>
+      <div separator></div>
+      <button data-command="export-xlsx">Export XLSX</button>
+    </div>
+    <button data-icon="file-menu"></button>
+  </div>
+
+  <div composite narrow>
+    <button data-command="justify-left" data-target="justify" title="Left-align text"></button>
+    <div class="treb-menu">
+      <div class="treb-icon-buttons" data-replace="justify">
+        <button data-command="justify-left" title="Left-align text"></button>
+        <button data-command="justify-center" title="Center-align text"></button>
+        <button data-command="justify-right" title="Right-align text"></button>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div composite narrow>
+    <button data-command="align-top" data-target="align" title="Align to top"></button>
+    <div class="treb-menu">
+      <div class="treb-icon-buttons" data-replace="align">
+        <button data-command="align-top" title="Align to top"></button>
+        <button data-command="align-middle" title="Align to middle"></button>
+        <button data-command="align-bottom" title="Align to bottom"></button>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div class="group" wide>
+    <button data-command="justify-left" title="Left-align text"></button>
+    <button data-command="justify-center" title="Center-align text"></button>
+    <button data-command="justify-right" title="Right-align text"></button>
+  </div>
+
+  <div class="group" wide>
+    <button data-command="align-top" title="Align to top"></button>
+    <button data-command="align-middle" title="Align to middle"></button>
+    <button data-command="align-bottom" title="Align to bottom"></button>
+  </div>
+
+  <div class="group">
+    <button data-command="wrap-text" title="Wrap text"></button>
+    <button data-command="merge-cells" data-id="merge" data-title="Merge cells" data-active-title="Unmerge cells"></button>
+    <button data-command="lock-cells" data-title="Lock cells" data-active-title="Unlock cells"></button>
+    <button data-command="freeze-panes" data-title="Freeze panes" data-active-title="Unfreeze panes" freeze-button></button>
+    <button data-command="insert-table" data-icon="table" data-title="Insert table" data-active-title="Remove table" table-button></button>
+    <div class="treb-menu">
+      <div class="treb-comment-box">
+        <textarea></textarea>
+        <div>
+          <button data-command="clear-comment">Clear</button>
+          <button data-command="update-comment">Save</button>
+        </div>
+      </div>
+      <button data-icon="comment" data-title="Comment" data-active-title="Update comment"></button>
+    </div>
+  </div>
+
+  <div composite>
+    <button data-command="fill-color" data-color-bar="fill" data-color="{}" title="Fill color"></button>
+    <div class="treb-menu treb-color-menu" data-color-command="fill-color" data-replace-color="fill" data-default-color-text="No fill">
+      <div class="treb-color-chooser">
+        <div class="treb-caption">Theme colors</div>
+        <div class="treb-swatches"></div>
+        <div class="treb-caption">Other colors</div>
+        <div class="treb-swatches"></div>
+        <div>
+          <input placeholder="New color" class="treb-color-input">
+          <button data-command="set-color" data-color="">
+            <!-- source: bootstrap-icons-1.8.3/check2.svg -->
+            <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'>
+              <path d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/> 
+            </svg>
+          </button>
+        </div>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div composite>
+    <button data-command="text-color" data-color-bar="text" data-color="{}" title="Text color"></button>
+    <div class="treb-menu treb-color-menu" data-color-command="text-color" data-replace-color="text" data-default-color-text="Default text color">
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div composite>
+    <button data-command="border-bottom" data-target="border" title="Bottom border"></button>
+    <div class="treb-menu">
+      <div class="treb-icon-buttons" data-replace="border">
+        <button data-command="border-top" title="Top border"></button>        
+        <button data-command="border-left" title="Left border"></button>        
+        <button data-command="border-right" title="Right border"></button>        
+        <button data-command="border-bottom" title="Bottom border"></button>        
+        <button data-command="border-double-bottom" title="Double bottom border"></button>        
+        <button data-command="border-outside" title="Outside borders"></button>        
+        <button data-command="border-all" title="All borders"></button>        
+        <button data-command="border-none" title="Clear borders"></button>        
+        <div separator></div>
+        <div class="treb-menu treb-color-menu treb-submenu" data-color-command="border-color" data-replace-color="border" title="Border color" data-default-color-text="Default border color">
+          <button data-icon="palette" data-color-bar="border" data-color="{}"></button>
+        </div>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div composite font-scale>
+    <input class="treb-font-scale" title="Font scale">
+    <div class="treb-menu">
+      <div>
+        <button data-command="font-scale" data-scale="0.8">0.80</button>
+        <button data-command="font-scale" data-scale="0.9">0.90</button>
+        <button data-command="font-scale" data-scale="1.0">1.00</button>
+        <button data-command="font-scale" data-scale="1.1">1.10</button>
+        <button data-command="font-scale" data-scale="1.2">1.20</button>
+        <button data-command="font-scale" data-scale="1.5">1.50</button>
+        <button data-command="font-scale" data-scale="2.0">2.00</button>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div class="treb-menu">
+    <div>
+      <button data-command="insert-row">Insert row</button>
+      <button data-command="insert-column">Insert column</button>
+      <button data-command="delete-row">Delete row</button>
+      <button data-command="delete-column">Delete column</button>
+      <div separator add-remove-sheet></div>
+      <button data-command="insert-sheet" add-remove-sheet>Add sheet</button>
+      <button data-command="delete-sheet" add-remove-sheet>Delete sheet</button>
+    </div>
+    <button data-icon="layout" title="Rows & columns"></button>
+  </div>
+
+  <div composite>
+    <input class="treb-number-format" title="Number format">
+    <div class="treb-menu">
+      <div class="treb-number-format-menu"></div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <div class="treb-split">
+    <button data-command="decrease-precision" title="Decrease precision"></button>
+    <button data-command="increase-precision" title="Increase precision"></button>
+  </div>
+
+  <div composite chart-menu>
+    <button data-command="insert-column-chart" data-target="annotation" title="Insert column chart"></button>
+    <div class="treb-menu">
+      <div class="treb-icon-buttons" data-replace="annotation">
+        <button data-command="insert-column-chart" title="Insert column chart"></button>
+        <button data-command="insert-donut-chart" title="Insert donut chart"></button>
+        <button data-command="insert-bar-chart" title="Insert bar chart"></button>
+        <button data-command="insert-line-chart" title="Insert line chart"></button>
+        <div separator></div>
+        <button data-command="insert-image" title="Insert image"></button>
+      </div>
+      <button dropdown></button>
+    </div>
+  </div>
+
+  <button data-command="recalculate" title="Recalculate" recalculate-button></button>

package/treb-embed/modern.tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../tsproject.json",
+  "include": [
+    "../package.json",
+    "src/**/*.ts",
+    "../treb-utils/**/*.ts",
+    "../treb-grid/**/*.ts",
+    "../treb-charts/**/*.ts",
+    "../treb-format/**/*.ts",
+    "../treb-parser/**/*.ts",
+    "../treb-calculator/**/*.ts",
+    "../treb-base-types/**/*.ts"
+  ],
+  "exclude": [
+    "src/custom-element/global.d.ts",
+
+    "src/API/api-v1.ts",
+    "src/API/api-utils.ts",
+    "src/index-modern-mc.ts",
+    "src/index-module-mc.ts",
+    "../treb-parser/test/**/*.ts",
+    "../**/*.test.ts"
+  ]
+}
+

package/treb-embed/src/custom-element/content-types.d.ts

@@ -0,0 +1,18 @@
+
+/** imported html as text */
+declare module '*.html' {
+  const text: string;
+  export default text;
+}
+
+/** imported css as text */
+declare module '*.scss' {
+  const text: string;
+  export default text;
+}
+
+/** workers imported as text */
+declare module 'worker:*' {
+  const text: string;
+  export default text;
+}

package/treb-embed/src/custom-element/global.d.ts

@@ -0,0 +1,11 @@
+
+/**
+ * add our tag to the map
+ */
+declare global {
+  interface HTMLElementTagNameMap {
+    'treb-spreadsheet': HTMLElement & {
+      sheet: EmbeddedSpreadsheet|undefined;
+    };
+  }
+}