@worktile/theia 15.0.1 → 15.0.3

package/plugins/table/components/table.component.scss

@@ -19,41 +19,48 @@ $top-cell-z-index: 13;
 .slate-element-table {
     display: block;
     .the-table {
-        border-spacing: 0;
-        word-wrap: break-word;
         box-sizing: border-box;
-        border-collapse: unset;
+        width: calc(100% - 2px);
         margin: 13px 8px 0 0;
-        border-bottom: $controls-border;
-        table-layout: fixed;
-        overflow: visible;
-        margin-left: 0;
         margin-right: 0;
-        width: calc(100% - 2px);
+        margin-left: 0;
+        overflow: visible;
+        word-wrap: break-word;
+        table-layout: fixed;
+        border-bottom: $controls-border;
+        border-collapse: unset;
+        border-spacing: 0;
 
         td {
+            position: relative;
+            padding: 8px;
+            vertical-align: top;
             word-wrap: break-word;
             border-top: $controls-border;
             border-right: $controls-border;
-            vertical-align: top;
-            padding: 8px;
-            position: relative;
             cursor: text;
 
             &.the-sticky-cell {
-                &:after {
-                    @include mixins.cellInset;
-                    border: $controls-border;
+                &:not(.focused-cell):not(.selected-cell):after {
+                    position: absolute;
+                    top: 0;
+                    right: -1px;
+                    z-index: $top-cell-z-index;
+                    display: block;
+                    width: 1px;
+                    height: 100%;
+                    background: variables.$gray-300;
+                    content: '';
                 }
                 &.the-table-left-shadow {
                     z-index: 12;
                     @include mixins.tableLeftShadow;
                     &:before {
                         top: 0;
-                        left: unset;
                         right: -8px;
-                        height: 100%;
+                        left: unset;
                         z-index: 0;
+                        height: 100%;
                     }
                 }
                 &.the-table-left-shadow.focused-cell {
@@ -66,6 +73,9 @@ $top-cell-z-index: 13;
                 &::after {
                     @include mixins.cellInset;
                     z-index: -1;
+                    width: unset;
+                    height: unset;
+                    background: unset;
                     border: 1px solid variables.$primary;
                 }
             }
@@ -80,8 +90,8 @@ $top-cell-z-index: 13;
                 &::after {
                     @include mixins.cellInset;
                     z-index: 10;
-                    border: 1px solid variables.$danger;
                     background: rgba($color: variables.$danger, $alpha: 0.1);
+                    border: 1px solid variables.$danger;
                 }
             }
         }
@@ -92,8 +102,8 @@ $top-cell-z-index: 13;
         }
 
         .the-header-cell {
-            background: $header-cell-bg-color;
             margin-bottom: 0;
+            background: $header-cell-bg-color;
         }
 
         .the-sticky-cell {
@@ -119,22 +129,26 @@ $top-cell-z-index: 13;
         box-sizing: border-box;
         margin: 0 auto 16px;
         .the-table-wrapper {
-            padding-top: 10px;
-            margin-top: -10px;
-            z-index: 0;
             position: relative;
+            z-index: 0;
+            margin-top: -10px;
+            padding-top: 10px;
             overflow: auto;
         }
 
         .the-table-row-controls-wrapper {
             position: absolute;
-            left: -$control-width;
             top: 23px;
-            user-select: none;
+            left: -$control-width;
             z-index: 1;
+            user-select: none;
         }
     }
 
+    .header-row-shadow {
+        display: none;
+    }
+
     &:not(.the-table-with-sticky-column) {
         .the-table-container.the-table-right-shadow {
             @include mixins.tableRightShadow;
@@ -148,15 +162,15 @@ $top-cell-z-index: 13;
 
 .the-table-with-sticky-row {
     .the-sticky-row {
-        padding-top: 8px;
         position: fixed;
-        display: grid;
         z-index: 120;
+        display: grid;
         grid-auto-flow: column;
         box-sizing: content-box;
-        background: variables.$white;
+        padding-top: 8px;
         // border-bottom: $controls-border;
         overflow-x: hidden;
+        background: variables.$white;
         box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.1);
 
         td.the-header-cell.selected-cell,
@@ -167,14 +181,31 @@ $top-cell-z-index: 13;
         }
     }
 
+    .header-row-shadow {
+        position: fixed;
+        z-index: 121;
+        width: 8px;
+        background: -webkit-gradient(linear, left, right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+    }
+
+    .the-table-container.the-table-right-shadow {
+        .header-row-right-shadow {
+            background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+            display: block;
+        }
+    }
+    .the-table-container.the-table-left-shadow {
+        .header-row-left-shadow {
+            background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+            display: block;
+        }
+    }
+
     .the-table-col-controls-wrapper.the-sticky-row {
         display: none;
     }
 
     &:not(.the-table-with-controls) {
-        .the-table {
-            margin-top: 0;
-        }
         .the-table-numbered {
             .the-table {
                 margin-top: 13px;
@@ -182,23 +213,13 @@ $top-cell-z-index: 13;
         }
     }
 
-    .the-table-row-controls-inner {
-        .the-table-row-controls-button-wrap {
-            &:first-child {
-                position: fixed;
-                margin-top: 8px;
-                z-index: $top-cell-z-index;
-                box-shadow: 0px -8px var(--ds-surface, variables.$gray-80);
-            }
-        }
-    }
     .the-table-row-controls {
         top: 1px;
     }
     &.the-numberd-table {
         .the-table-row-controls {
-            left: 1px;
             top: 1px;
+            left: 1px;
         }
         .the-sticky-corner-controls,
         .the-table-row-controls-button-wrap {
@@ -206,13 +227,26 @@ $top-cell-z-index: 13;
         }
     }
 
-    .the-sticky-corner-controls {
-        width: 11px;
-        height: 11px;
-        position: fixed;
-        z-index: 12;
-        .the-table-corner-button {
+    // 聚焦时生效
+    &.the-table-with-controls {
+        .the-table-row-controls-inner {
+            .the-table-row-controls-button-wrap {
+                &:first-child {
+                    position: fixed;
+                    z-index: $top-cell-z-index;
+                    margin-top: 8px;
+                    box-shadow: 0px -8px var(--ds-surface, variables.$gray-80);
+                }
+            }
+        }
+        .the-sticky-corner-controls {
+            position: fixed;
+            z-index: 12;
+            width: 11px;
             height: 11px;
+            .the-table-corner-button {
+                height: 11px;
+            }
         }
     }
 }
@@ -255,9 +289,9 @@ $top-cell-z-index: 13;
 
     .the-table-col-controls-wrapper .the-table-col-controls {
         background: variables.$gray-100;
-        border-right: $controls-border;
-        border-top: $controls-border;
         background-clip: padding-box;
+        border-top: $controls-border;
+        border-right: $controls-border;
         cursor: pointer;
 
         &:first-child {
@@ -284,16 +318,16 @@ $top-cell-z-index: 13;
             }
         }
 
-        &.active,
+        &.control-active,
         &.dangerous {
             &::before,
             &::after {
-                content: '';
                 position: absolute;
+                top: -1px;
                 width: 1px;
                 height: 12px;
                 background: variables.$primary;
-                top: -1px;
+                content: '';
             }
 
             &::before {
@@ -305,7 +339,7 @@ $top-cell-z-index: 13;
             }
         }
 
-        &.active {
+        &.control-active {
             @include mixins.controlSelected;
             z-index: 11;
         }
@@ -320,21 +354,29 @@ $top-cell-z-index: 13;
             }
         }
 
-        &.the-sticky-cell {
-            &:after {
-                @include mixins.cellInset;
-                left: -2px;
-                border-right: $controls-border;
+        &.the-sticky-cell:not(.avtive) {
+            &:not(.active):not(.danger) {
+                &:after {
+                    position: absolute;
+                    top: 0;
+                    right: -1px;
+                    z-index: $top-cell-z-index;
+                    display: block;
+                    width: 1px;
+                    height: 100%;
+                    background: variables.$gray-300;
+                    content: '';
+                }
             }
             &.the-table-left-shadow {
                 z-index: $top-cell-z-index;
                 @include mixins.tableLeftShadow;
                 &:before {
                     top: 0;
-                    left: unset;
                     right: -8px;
-                    height: 100%;
+                    left: unset;
                     z-index: 0;
+                    height: 100%;
                 }
             }
         }
@@ -412,45 +454,45 @@ $top-cell-z-index: 13;
         .the-table-col-controls-wrapper.the-sticky-row,
         .the-sticky-corner-controls {
             padding-top: 25px;
-            box-shadow: none;
-            border: none;
             background: variables.$white;
+            border: none;
+            box-shadow: none;
         }
     }
 }
 
 .the-table-corner-controls {
+    position: relative;
     width: 100%;
     height: $control-corner-width;
-    position: relative;
     visibility: hidden;
 
     .the-table-corner-button {
         position: absolute;
         top: 0;
         left: 0;
+        box-sizing: border-box;
         width: 100%;
         height: 11px;
-        box-sizing: border-box;
-        border: $controls-border;
-        background: variables.$gray-100;
         padding: 0;
-        border-bottom: none;
+        background: variables.$gray-100;
+        border: $controls-border;
         border-right: none;
+        border-bottom: none;
         cursor: pointer;
     }
 
     .the-table-corner-controls-insert-row-marker .the-table-controls-insert-wrapper {
-        left: -$dot-size;
         top: 2px;
+        left: -$dot-size;
     }
 
     .the-table-corner-controls-insert-column-marker .the-table-controls-insert-wrapper {
-        left: 2px;
         top: -$dot-size;
+        left: 2px;
     }
 
-    &.active {
+    &.control-active {
         .the-table-corner-button {
             @include mixins.controlSelected;
         }
@@ -464,39 +506,39 @@ $top-cell-z-index: 13;
 }
 
 .the-table-controls-insert-wrapper {
-    width: $dot-size;
-    height: $dot-size;
     position: absolute;
-    cursor: pointer;
-    display: none;
     top: -19px;
     right: -10px;
+    display: none;
+    width: $dot-size;
+    height: $dot-size;
+    cursor: pointer;
 
     &::after,
     &::before {
-        content: '';
         position: absolute;
         transform: scale(0.16);
+        content: '';
     }
 
     &::before {
-        background-color: transparent;
-        height: $dot-size - $dot-padding-top * 2;
-        left: $dot-shadow-top;
         top: $dot-padding-top;
-        width: 1px;
+        left: $dot-shadow-top;
         z-index: 3;
+        width: 1px;
+        height: $dot-size - $dot-padding-top * 2;
+        background-color: transparent;
     }
 
     &::after {
+        top: 0;
+        left: 0;
+        width: $dot-size;
+        height: $dot-size;
         background-color: #d8d8d8;
         border-radius: math.div($dot-size + 1, 2);
         box-shadow: inset $dot-padding-top 0 0 0 #d8d8d8, inset (-$dot-padding-top) 0 0 0 #d8d8d8, inset 0 (-$dot-shadow-top) 0 0 #d8d8d8,
             inset 0 $dot-shadow-top 0 0 #d8d8d8;
-        height: $dot-size;
-        left: 0;
-        top: 0;
-        width: $dot-size;
     }
 
     &:not(.disabled) {
@@ -507,9 +549,9 @@ $top-cell-z-index: 13;
         }
 
         &:hover:after {
+            border-radius: 4px;
             box-shadow: inset $dot-padding-top 0 0 0 variables.$primary, inset (-$dot-padding-top) 0 0 0 variables.$primary,
                 inset 0 (-$dot-shadow-top) 0 0 variables.$primary, inset 0 $dot-shadow-top 0 0 variables.$primary !important;
-            border-radius: 4px;
         }
 
         &:hover:before {
@@ -519,29 +561,29 @@ $top-cell-z-index: 13;
 
     .the-table-controls-insert-line {
         position: absolute;
-        background-color: variables.$primary;
         z-index: $dot-zIndex;
+        background-color: variables.$primary;
 
         &[data-dot-type='column'] {
-            width: 1px;
             top: $dot-size;
             left: $dot-shadow-top;
+            width: 1px;
         }
 
         &[data-dot-type='row'] {
-            height: 1px;
             bottom: $dot-shadow-top;
             left: $dot-size;
+            height: 1px;
         }
     }
 }
 
 .the-table-row-controls {
-    width: $control-width;
-    box-sizing: border-box;
-    display: none;
-    z-index: 11;
     position: relative;
+    z-index: 11;
+    display: none;
+    box-sizing: border-box;
+    width: $control-width;
 
     .the-table-row-controls-inner {
         display: flex;
@@ -554,18 +596,18 @@ $top-cell-z-index: 13;
 
         .the-table-controls-button {
             display: block;
-            outline: none;
-            background-color: variables.$gray-100;
             box-sizing: border-box;
-            height: 42px;
             width: $control-width;
+            height: 42px;
+            padding: 0;
+            background-color: variables.$gray-100;
             border: 1px solid variables.$gray-300;
             border-right: none;
-            padding: 0;
+            outline: none;
             cursor: pointer;
         }
 
-        &.active {
+        &.control-active {
             z-index: 1;
 
             .the-table-controls-button,
@@ -585,21 +627,22 @@ $top-cell-z-index: 13;
     }
 
     .the-table-controls-insert-wrapper {
+        top: auto;
         bottom: -$dot-shadow-top;
         left: -$dot-size;
-        top: auto;
     }
 }
 
 .the-table-col-controls-wrapper {
+    overflow-y: hidden;
     height: $control-width;
     line-height: $control-width;
 
     .the-table-col-controls {
-        padding: 0;
+        position: relative;
         margin: 0;
+        padding: 0;
         border: 0;
-        position: relative;
         border-top: 1px solid transparent;
     }
 }
@@ -616,8 +659,8 @@ $top-cell-z-index: 13;
     }
 
     .the-table-row-controls {
-        display: block;
         top: 0px;
+        display: block;
         width: 45px;
         margin-left: 10px;
         cursor: pointer;
@@ -630,9 +673,9 @@ $top-cell-z-index: 13;
     }
 
     .row-number {
+        justify-content: center;
         float: right;
         width: 45px;
-        justify-content: center;
         height: 100%;
         margin: 0;
     }

package/plugins/table/components/td/td.component.d.ts

@@ -77,6 +77,7 @@ export declare class TheTdComponent extends TheBaseElementComponent<TableCellEle
     private _showHandleOverlay;
     private updateOverlayHandleSizeAndOffset;
     private updateOverlayHandleColumnSize;
+    private getIsStickyTopRow;
     private updateOverlayHandleRowSize;
     private applySize;
     private _createOverlayForHandle;

package/plugins/table/table.store.d.ts

@@ -3,7 +3,7 @@ import { Editor } from 'slate';
 import { TablePosition } from './utils';
 import { ColorType } from '../../constants/color-select';
 import { CellPosition, TheTableOptions } from './table.types';
-import { TableElement } from '../../custom-types';
+import { TableCellElement, TableElement } from '../../custom-types';
 import * as i0 from "@angular/core";
 export declare class TableStore {
     private selectedCells$;
@@ -27,13 +27,17 @@ export declare class TableStore {
     isRightClicking: boolean;
     pointerSelection: boolean;
     maxCol: number;
-    get selectedCells(): CellPosition[];
+    get selectedCellPositions(): CellPosition[];
     get dangerousCells(): CellPosition[];
     constructor();
     isSelectedAllCell: () => boolean;
     getTableEntry(): import("slate").NodeEntry<TableElement>;
     getTablePath(): import("slate").Path;
-    updateCellPositionRefs(row?: number, col?: number): void;
+    getSelectedCellPositions(): {
+        row: number;
+        col: number;
+    }[];
+    calculateSelectedColumnsAndRowIndex(): void;
     setSelectedCells(cells: CellPosition[], pos: TablePosition): void;
     initEditor(editor: Editor): void;
     /**
@@ -53,7 +57,7 @@ export declare class TableStore {
     getMinAndMaxCellIndex(maxRow: number, maxCol: number, minRow: number, minCol: number, table: TableElement): any;
     selectCell(cell: HTMLTableCellElement, editor: Editor): void;
     getCellPositionsBeforeMerge({ row, col }: CellPosition): CellPosition[];
-    selectedCellsChange(): Observable<CellPosition[]>;
+    selectedCellsChange(): Observable<TableCellElement[]>;
     cellsPositionChange(): Observable<void>;
     changeCells(): void;
     emitTableChange(): void;
@@ -67,7 +71,7 @@ export declare class TableStore {
     dangerousCellsChange(): Observable<CellPosition[]>;
     setDangerousCells(): void;
     clearDangerousCells(): void;
-    dangerousOrSelectedCellsChange(): Observable<CellPosition[]>;
+    dangerousOrSelectedCellsChange(): Observable<TableCellElement[] | CellPosition[]>;
     setDangerousRows(): void;
     setDangerousColumns(): void;
     setDangerousTable(): void;

package/plugins/table/table.types.d.ts

@@ -22,6 +22,11 @@ export interface TheTableComponentBase extends TheBaseElementComponent {
 export declare const BASE_CELL_HEIGHT = 41;
 export declare const BASE_FILL_HEIGHT: number;
 export declare const BASE_CELL_INNER_HEIGHT: number;
+export declare const TABLE_INSERT_MASK = 19;
+export declare const TABLE_BORDER = 1;
+export declare const TABLE_PADDING = 8;
+export declare const TABLE_CONTROL = 11;
+export declare const TableWithStickyRowClass = "the-table-with-sticky-row";
 export interface TheTableColumn {
     width: number;
 }

package/plugins/table/utils/set-menu-cell-invisibility.d.ts

@@ -1,7 +1,7 @@
 import { Editor } from 'slate';
 import { MenuEntity, CellPosition } from '../table.types';
 export declare function setCellMenuVisibility(editor: Editor, menuList: MenuEntity[], tableInfo: {
-    selectedCells: CellPosition[];
+    selectedCellPositions: CellPosition[];
     isFullscreen?: boolean;
     isSelectedTable?: boolean;
     selectedRowsIndex?: number[];

package/plugins/todo-item/todo-item.component.scss

@@ -1,16 +1,16 @@
 .the-check-item {
+    position: relative;
     height: auto;
-    line-height: 24px;
     padding-left: 2em;
-    position: relative;
+    line-height: 24px;
 
     .todo-item-status {
         user-select: none;
     }
     input[type='checkbox'] {
+        margin-top: 0;
         margin-right: 5px;
         margin-left: -1.5em;
         transform: translateY(3px);
-        margin-top: 0;
     }
 }