@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-embed/src/toolbar-message.ts

@@ -0,0 +1,96 @@
+
+import type { Style } from 'treb-base-types';
+
+/* 
+ * this is an attempt to lock down toolbar commands, and better 
+ * manage type data along with those commands. data should always 
+ * be optional (not in practice, but in typings).
+ */
+
+export interface SetColorToolbarMessage {
+  command: 'fill-color'|'text-color'|'border-color';
+  color?: Style.Color
+}
+
+export interface CommentToolbarMessage {
+  command: 'update-comment'|'clear-comment';
+  comment?: string;
+}
+
+export interface BorderToolbarMessage {
+  command: 'border-top'|'border-bottom'|'border-left'|'border-right'|'border-all'|'border-outside'|'border-none'|'border-double-bottom';
+  color?: Style.Color;
+}
+
+export interface AnnotationToolbarMessage {
+  command: 'insert-image'|'insert-donut-chart'|'insert-line-chart'|'insert-column-chart'|'insert-bar-chart';
+}
+
+export interface LayoutToolbarMessage {
+  command: 'insert-row'|'delete-row'|'insert-column'|'delete-column'|'insert-sheet'|'delete-sheet';
+}
+
+export interface PrecisionToolbarMessage {
+  command: 'increase-precision'|'decrease-precision';
+}
+
+export interface IOToolbarMessage {
+  command: 'import-file'|'export-xlsx'|'save-json'|'save-csv';
+}
+
+export interface MergeToolbarMessage {
+  command: 'merge-cells'|'unmerge-cells';
+}
+
+export interface AlignToolbarMessage {
+  command: 'align-top'|'align-middle'|'align-bottom';
+}
+
+export interface JustifyToolbarMessage {
+  command: 'justify-left'|'justify-center'|'justify-right';
+}
+
+export interface FontScaleToolbarMessage {
+  command: 'font-scale';
+  scale?: number;
+}
+
+export interface NumberFormatToolbarMessage {
+  command: 'number-format';
+  format?: string;
+}
+
+export interface TableToolbarMessage {
+  command: 'insert-table'|'remove-table';
+}
+
+export interface CommandToolbarMessage {
+  command: 'reset'|'recalculate'|'freeze-panes'|'about'|'revert';
+}
+
+export interface StyleToolbarMessage {
+  command: 'wrap-text'|'lock-cells';
+}
+
+export interface UIToolbarMessage {
+  command: 'toggle-toolbar'|'show-toolbar'|'hide-toolbar'|'toggle-sidebar'|'show-sidebar'|'hide-sidebar';
+}
+
+export type ToolbarMessage 
+  = SetColorToolbarMessage 
+  | CommentToolbarMessage 
+  | IOToolbarMessage
+  | UIToolbarMessage
+  | MergeToolbarMessage
+  | BorderToolbarMessage
+  | LayoutToolbarMessage
+  | AnnotationToolbarMessage
+  | PrecisionToolbarMessage
+  | JustifyToolbarMessage
+  | AlignToolbarMessage
+  | TableToolbarMessage
+  | CommandToolbarMessage
+  | StyleToolbarMessage
+  | NumberFormatToolbarMessage
+  | FontScaleToolbarMessage
+  ;

package/treb-embed/src/types.ts

@@ -0,0 +1,167 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import type { IArea, Table, TableTheme } from 'treb-base-types';
+import type { MacroFunction, SerializedNamedExpression, SerializedSheet } from 'treb-grid';
+
+export enum SaveFileType {
+  json = 'json',
+  treb = 'treb',
+  trebjson = 'treb.json', 
+  csv = 'csv', 
+  tsv = 'tsv', 
+  xlsx = 'xlsx',
+}
+
+
+//
+// FIXME: bring back document_id, move dirty flag into this class;
+// support undoing into clean state based on document id, last save,
+// and so on
+//
+
+export interface TREBDocument {
+  app: string;
+  version: string;
+  revision?: number;
+  name?: string;
+  user_data?: any;
+  sheet_data?: SerializedSheet|SerializedSheet[]; // NOTE: support old version, but it would be nice to drop
+  decimal_mark?: '.' | ',';
+  active_sheet?: number;
+  rendered_values?: boolean;
+  named_ranges?: {[index: string]: IArea};
+  macro_functions?: MacroFunction[];
+  named_expressions?: SerializedNamedExpression[];
+  tables?: Table[];
+  shared_resources?: Record<string, string>;
+}
+
+export interface ResizeEvent {
+  type: 'resize';
+}
+
+export enum LoadSource {
+  DRAG_AND_DROP = 'drag-and-drop',
+  LOCAL_FILE = 'local-file',
+  NETWORK_FILE = 'network-file',
+  LOCAL_STORAGE = 'local-storage',
+  UNDO = 'undo',
+}
+
+export enum LoadType {
+  TREB = 'treb',
+  CSV = 'csv',
+  XLSX = 'xlsx',
+}
+
+/**
+ * This event is sent when a document is loaded, and also on undo. The 
+ * source field can help determine if it was triggered by an undo operation.
+ */
+export interface DocumentLoadEvent {
+  type: 'load';
+  source?: LoadSource;
+  file_type?: LoadType;
+}
+
+/**
+ * This event is sent when the document is reset.
+ * 
+ * @privateRemarks 
+ * we should remove this in favor of the Load event, plus a suitable load source.
+ */
+export interface DocumentResetEvent {
+  type: 'reset';
+}
+
+/**
+ * This event is sent when data in the spreadsheet changes, but there are
+ * no structural or cell changes. For example, the `RAND` function returns
+ * a new value on every calculation, but the function itself does not change.
+ */
+export interface DataChangeEvent {
+  type: 'data';
+}
+
+/**
+ * This event is sent when the value of a cell changes, or when the document
+ * structure chages. Structure changes might be inserting/deleting rows or 
+ * columns, or adding/removing a sheet.
+ */
+export interface DocumentChangeEvent {
+  type: 'document-change';
+}
+
+/**
+ * This event is sent when the spreadsheet selection changes. Use the 
+ * `GetSelection` method to get the address of the current selection.
+ */
+export interface SelectionEvent {
+  type: 'selection';
+}
+
+/**
+ * This event is sent when the focused view changes, if you have more
+ * than one view.
+ */
+export interface FocusViewEvent {
+  type: 'focus-view';
+}
+
+/**
+ * EmbeddedSheetEvent is a discriminated union. Switch on the `type` field
+ * of the event.
+ */
+export type EmbeddedSheetEvent 
+  = DocumentChangeEvent
+  | DocumentResetEvent
+  | DocumentLoadEvent
+  | DataChangeEvent
+  | FocusViewEvent
+  | SelectionEvent
+  | ResizeEvent
+  ;
+
+/**
+ * options when inserting a table into a sheet
+ */
+export interface InsertTableOptions {
+
+  /** 
+   * include a totals/summation row. this impacts the layout and styling:
+   * totals row have a unique style and are not included when sorting.
+   * defaults to true.
+   */
+  totals_row?: boolean;
+
+  /** 
+   * show a sort button in table headers. defaults to true.
+   */
+  sortable?: boolean;
+  
+  /**
+   * base theme color, or a set of styles for the table. useful values for
+   * theme color are accent colors 4 (the default), 5, 7 and 9.
+   */
+  theme?: number|TableTheme;
+
+}

package/treb-embed/style/autocomplete.scss

@@ -0,0 +1,103 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+/**
+ * this is getting attached to the document (why? b/c fixed pos?)
+ * so it inherits a lot. that's not good.
+ */
+
+   /* this is no longer attached to document, we can trim some of these */
+  /* also a lot of this should move to theme */
+
+.treb-layout {
+
+  .treb-autocomplete {
+
+
+    box-sizing: border-box;
+    * { box-sizing: border-box; }
+
+    position: fixed;
+    top: -1000px;
+    font-size: inherit;
+    font-weight: 400;
+    line-height: normal;
+    text-align: left;
+
+    max-height: 10em;
+    overflow-y: auto;
+    z-index: $z-index-autocomplete;
+
+    ul {
+
+      font-size: inherit;
+      font-weight: inherit;
+
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      li {
+        font-size: inherit;
+        font-weight: inherit;
+    
+        padding: 0;
+        margin: 0;
+
+        a {
+          font-size: inherit;
+          font-weight: inherit;
+          display: inline-block;
+          width: 100%;
+          padding: 3px 6px;
+          text-decoration: none;
+          cursor: default;
+          color: inherit;
+        }
+      }
+
+      /*
+      here we unwind the selected style if there's a hover,
+      unless you're hovering over the selection. and so on.
+      * /
+
+      &:hover li a.selected {
+        background: inherit;
+        color: inherit;
+
+        &:hover {
+          background: #339966;
+          color: #fff;
+        }
+
+      }
+      */
+
+    }
+  }
+
+  .treb-autocomplete-tooltip {
+    z-index: $z-index-autocomplete;
+    top: -1000px;
+    position: fixed;
+    white-space: pre;
+  }
+
+}

package/treb-embed/style/dark-theme.scss

@@ -0,0 +1,114 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+/**
+ * we'll add dark theme, and auto support, but not automatically.
+ */
+
+@mixin dark {
+
+  --treb-autocomplete-background: #333;
+	--treb-autocomplete-border-color: #fff;
+	--treb-autocomplete-entry-color: #fff;
+	--treb-autocomplete-selected-entry-background: darkred;
+	--treb-autocomplete-tooltip-background: darkred;
+	--treb-autocomplete-tooltip-border-color: #fff;
+	--treb-autocomplete-tooltip-color: #fff;
+	--treb-chart-background: #000;
+	--treb-chart-grid-color: #976;
+	--treb-chart-text-color: #fff;
+	--treb-dialog-background: #000;
+	--treb-dialog-border-color: #fff;
+	--treb-dialog-color: #fff;
+	--treb-dropdown-background: #000;
+	--treb-dropdown-border-color: #fff;
+	--treb-dropdown-caret-active-background: darkred;
+	--treb-dropdown-caret-background: #444;
+	--treb-dropdown-caret-border-color: #fff;
+	--treb-dropdown-caret-color: #fff;
+	--treb-dropdown-color: #fff;
+	--treb-dropdown-selected-background: darkred;
+	--treb-grid-background: #000;
+	--treb-grid-default-color: #fff;
+	--treb-grid-grid-color: #444;
+	--treb-grid-header-background: #444;
+	--treb-grid-header-grid-color: #000;
+	--treb-note-background: #333;
+	--treb-note-border-color: #fff;
+	--treb-note-color: #fff;
+	--treb-note-marker-color: pink;
+	--treb-resize-tooltip-background: #fff;
+	--treb-resize-tooltip-color: #000;
+	--treb-scale-slider-accent-color: #fff;
+	--treb-scale-slider-background: #333;
+	--treb-scale-slider-border-color: #fff;
+	--treb-selection-color: yellow;
+	--treb-selection-fill-opacity: .2;
+	--treb-sidebar-button-background: #000;
+	--treb-sidebar-button-border-color: #888;
+	--treb-stats-value-background: #223;
+	--treb-tab-bar-active-tab-background: #444;
+	--treb-tab-bar-tab-background: #000;
+	--treb-tab-bar-tab-color: #fff;
+  --treb-theme-color-1: #222;
+  --treb-theme-color-2: #ddd;
+	--treb-toolbar-active-button-background: #555;
+	--treb-toolbar-button-background: #000;
+	--treb-toolbar-hover-button-background: #444;
+	--treb-ui-border-color: #666;
+	--treb-ui-color: #fff;
+
+	--treb-table-header-background: #334; // DarkSlateGray;
+	--treb-table-odd-background: #122;
+	--treb-table-header-font-weight: 700;
+
+	--treb-table-header-border-top: #889;
+	--treb-table-header-border-bottom: #889;
+	--treb-table-footer-border-bottom: #889;
+	--treb-table-odd-border-top: #889;
+	--treb-table-odd-border-bottom: #889;
+	--treb-table-even-border-top: #889;
+	--treb-table-even-border-bottom: #889;
+
+	--treb-table-total-border-top: #889;
+	--treb-table-total-border-bottom: #889;
+	
+	--treb-table-total-background: #334;
+	--treb-table-total-font-weight: 700;
+
+	// ---
+
+	--treb-color-scheme: dark;
+	--treb-resize-handle-color: lightblue;
+	--treb-resize-frame-color: lightblue;
+	--treb-formula-bar-locked-background: #234;
+
+}
+
+.treb-dark-theme {
+  @include dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  .treb-light-dark-theme { 
+    @include dark;
+  }
+}

package/treb-embed/style/defaults.scss

@@ -0,0 +1,36 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+/* shadow for tooltip and (...) */
+
+$default-box-shadow: 0px 1px 4px 2px rgba(109,109,109,0.2);
+
+$tooltip-arrow-size: 4px;
+
+$font-stack: // "-apple-system",
+  "BlinkMacSystemFont",
+  "Segoe UI",
+  "Roboto",
+  "Oxygen-Sans",
+  "Ubuntu",
+  "Cantarell",
+  "Helvetica Neue",
+  "sans-serif";

package/treb-embed/style/dialog.scss

@@ -0,0 +1,181 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  --treb-icon-svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='153.073px' height='133.742px' viewBox='0.673 4.629 153.073 133.742' enable-background='new 0.673 4.629 153.073 133.742' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='0.6729' y1='71.5' x2='153.7461' y2='71.5'%3E%3Cstop offset='0' style='stop-color:%235CB5FF'/%3E%3Cstop offset='1' style='stop-color:%230059B9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M91.656,28.313c-4.989,0-17.266,6.249-21.305,8.504c-2.344-2.473-2.603-6.162-3.036-10.933 c-2.344,2.429-0.824,9.806,0,12.496c-10.238,7.635-18.83,15.531-27.597,24.471c-2.992-4.729-5.031-8.593-5.726-17.183 c-3.038,6.509,0.867,15.057,3.121,19.784c-9.674,12.193-19.263,25.297-27.03,37.834C-25.405,28.313,82.936-16.248,153.746,14.431 C109.879,43.63,98.554,135.784,21.498,111.274c-5.423,7.809-9.069,18.006-13.538,27.072c-3.73,0.263-6.334-1.646-7.288-3.12 c7.506-18.181,17.183-34.192,27.075-49.984c10.718,0.306,21.346,0.478,30.198-1.04c-7.681-2.038-16.877-0.78-26.032-3.123 c5.597-10.718,13.754-18.876,21.867-27.075c8.808,0.782,17.746,3.21,27.074,1.041c-8.111-1.431-15.966-1.952-22.909-4.165 C65.539,42.502,80.722,33.389,91.656,28.313z'/%3E%3C/svg%3E%0A");
+  
+  .treb-icon-64 {
+    width: 64px;
+    height: 64px;
+    background: no-repeat center/100% var(--treb-icon-svg);
+  }
+
+  .treb-dialog-mask {
+    
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+
+    // background: rgba(255, 0, 0, .5); // dev
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity .2s;
+    pointer-events: none;
+
+  }
+
+  .treb-embed-dialog {
+
+    line-height: 1.6em;
+
+    border: 1px solid var(--treb-dialog-border-color, var(--treb-ui-border-color, #999));
+
+    border-top-width: 3px;
+    border-top-color: rgb(0, 157, 255);
+    border-top-color: rgb(158, 175, 185);
+    border-top-color: #999;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+
+    padding: 1em;
+    background: var(--treb-dialog-background, #fff);
+    color: var(--treb-dialog-color, #000);
+
+    text-align: left;
+    border-radius: 3px;
+
+    & > * {
+      display: none;
+    }
+
+    & > div {
+      position: relative;
+    }
+
+    /* middle: title, message and (maybe) progress bar */
+    &>*:nth-child(2) {
+      flex-grow: 1;
+      display: block;
+      padding: 2px 12px;
+      padding-right: 20px;
+    }
+
+    &>.treb-close-box {
+
+      position: absolute;
+      top: 0;
+      right: 0px;
+      padding: 0;
+      background: transparent;
+      border: 0;
+
+      &>svg {
+
+        fill: rgb(115, 130, 140);
+        width: 20px;
+        height: 20px;
+        cursor: default;
+
+        &:hover,
+        &:active {
+          fill: rgb(4, 156, 251);
+        }
+      }
+
+      padding: 4px;
+
+    }
+
+    small {
+      font-size: .9em;
+      display: block;
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      &:hover,
+      &:active {
+        color: rgb(4, 156, 251);
+      }
+    }
+
+    &.dialog-type-success {
+      border-top-width: 3px;
+      border-top-color: rgb(68, 217, 38);
+    }
+
+    &.dialog-type-about {
+      border-top-width: 3px;
+      border-top-color: rgb(0, 157, 255);
+    }
+
+    &.dialog-type-error {
+      border-top-width: 3px;
+      border-top-color: rgb(249, 47, 6);
+    }
+
+    &.dialog-type-info {
+      border-top-width: 3px;
+      border-top-color: rgb(0, 157, 255);
+    }
+
+    .treb-embed-dialog-title {
+      white-space: pre;
+    }
+
+    .treb-embed-dialog-message {
+      white-space: pre;
+    }
+
+    .treb-embed-progress-container {
+      position: relative;
+      border: 1px solid red;
+      width: 100%;
+      height: 6px;
+      border: 1px solid #ddd;
+      margin: auto;
+      margin-top: 1em;
+      margin-bottom: .5em;
+    }
+
+    .treb-embed-progress-bar {
+      position: relative;
+      background: #52880b;
+      top: 0px;
+      left: 0px;
+      height: 100%;
+    }
+
+  }
+
+}