@worktile/theia 15.0.2 → 15.0.4

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

@@ -19,48 +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 {
                 &:not(.focused-cell):not(.selected-cell):after {
-                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: -1px;
+                    z-index: $top-cell-z-index;
+                    display: block;
                     width: 1px;
                     height: 100%;
-                    right: -1px;
                     background: variables.$gray-300;
-                    top: 0;
-                    display: block;
-                    position: absolute;
-                    z-index: $top-cell-z-index;
+                    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 {
@@ -73,10 +73,10 @@ $top-cell-z-index: 13;
                 &::after {
                     @include mixins.cellInset;
                     z-index: -1;
-                    border: 1px solid variables.$primary;
                     width: unset;
                     height: unset;
                     background: unset;
+                    border: 1px solid variables.$primary;
                 }
             }
 
@@ -90,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;
                 }
             }
         }
@@ -102,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 {
@@ -129,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;
@@ -158,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,
@@ -177,6 +181,26 @@ $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;
     }
@@ -189,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 {
@@ -213,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;
+            }
         }
     }
 }
@@ -262,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 {
@@ -295,12 +322,12 @@ $top-cell-z-index: 13;
         &.dangerous {
             &::before,
             &::after {
-                content: '';
                 position: absolute;
+                top: -1px;
                 width: 1px;
                 height: 12px;
                 background: variables.$primary;
-                top: -1px;
+                content: '';
             }
 
             &::before {
@@ -328,17 +355,17 @@ $top-cell-z-index: 13;
         }
 
         &.the-sticky-cell:not(.avtive) {
-            &:not(.active):not(.danger){
-                &:after{
-                    content: '';
+            &:not(.active):not(.danger) {
+                &:after {
+                    position: absolute;
+                    top: 0;
+                    right: -1px;
+                    z-index: $top-cell-z-index;
+                    display: block;
                     width: 1px;
                     height: 100%;
-                    right: -1px;
                     background: variables.$gray-300;
-                    top: 0;
-                    display: block;
-                    position: absolute;
-                    z-index: $top-cell-z-index;
+                    content: '';
                 }
             }
             &.the-table-left-shadow {
@@ -346,10 +373,10 @@ $top-cell-z-index: 13;
                 @include mixins.tableLeftShadow;
                 &:before {
                     top: 0;
-                    left: unset;
                     right: -8px;
-                    height: 100%;
+                    left: unset;
                     z-index: 0;
+                    height: 100%;
                 }
             }
         }
@@ -427,42 +454,42 @@ $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;
     }
 
     &.control-active {
@@ -479,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) {
@@ -522,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 {
@@ -534,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;
@@ -569,14 +596,14 @@ $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;
         }
 
@@ -600,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;
     }
 }
@@ -631,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;
@@ -645,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/table.types.d.ts

@@ -22,6 +22,10 @@ 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/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;
     }
 }

package/styles/editor.scss

@@ -3,22 +3,22 @@
 @use './mixins.scss' as mixins;
 
 .the-editor {
+    position: relative;
     display: block;
+    max-width: 100%;
     border: 1px solid variables.$gray-200;
     border-radius: 3px;
-    position: relative;
-    max-width: 100%;
 
     &.the-editor-readonly {
         border: none;
 
         .the-editable-container {
-            padding: 0;
             margin: 0;
+            padding: 0;
 
             &.max-height {
-                overflow-y: auto;
                 overflow-x: hidden;
+                overflow-y: auto;
             }
 
             .the-editor-typo {
@@ -61,8 +61,8 @@
 
     .the-editable-container {
         position: relative;
-        padding-top: 41px;
         margin-top: -41px;
+        padding-top: 41px;
 
         &.max-height {
             overflow-y: scroll;
@@ -126,32 +126,32 @@
     [the-code-line] {
         margin: 0 4px;
         padding: 2px 3px;
-        border: 1px solid variables.$gray-300;
-        border-radius: 2px;
-        font-family: monospace;
+        color: variables.$gray-700;
         font-size: inherit;
-        background-color: rgba(243, 243, 243, 0.8);
+        font-family: monospace;
         line-height: inherit;
-        word-wrap: break-word;
         text-indent: 0;
-        color: variables.$gray-700;
+        word-wrap: break-word;
+        background-color: rgba(243, 243, 243, 0.8);
+        border: 1px solid variables.$gray-300;
+        border-radius: 2px;
     }
 
     .leaf-with-placeholder {
         &[data-slate-leaf='true'] {
-            width: auto;
             display: flow-root;
+            width: auto;
         }
     }
     [data-slate-placeholder] {
+        overflow: hidden;
         color: initial;
         font-weight: initial;
         font-style: initial;
+        white-space: nowrap;
         text-decoration: initial;
-        background-color: initial;
-        overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        background-color: initial;
     }
 
     .the-break-char {

package/styles/mixins.scss

@@ -42,8 +42,8 @@
 @mixin the-action-disabled {
     .thy-action {
         &.disabled {
-            cursor: not-allowed;
             color: variables.$gray-400;
+            cursor: not-allowed;
 
             &:hover {
                 background: transparent;