@mezzanine-ui/core 0.12.8 → 0.13.0

package/message/_message-styles.scss

@@ -22,7 +22,6 @@ $icon-size: 24px !default;
   background-color: palette.color(surface);
   border: 1px solid var(--#{$prefix}-color);
   flex-shrink: 0;
-  z-index: z-index.get(feedback);
   box-sizing: border-box;
 
   &__icon {
@@ -47,7 +46,8 @@ $icon-size: 24px !default;
     display: flex;
     flex-direction: column;
     align-items: center;
-    position: absolute;
+    position: fixed;
+    z-index: z-index.get(feedback);
     top: 0;
     left: 0;
     bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "0.12.8",
+  "version": "0.13.0",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -36,8 +36,8 @@
     }
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "^0.12.8",
-    "@mezzanine-ui/system": "^0.12.8",
+    "@mezzanine-ui/icons": "^0.13.0",
+    "@mezzanine-ui/system": "^0.13.0",
     "lodash": "^4.17.21",
     "tslib": "^2.4.1"
   }

package/table/_table-styles.scss

@@ -1,5 +1,8 @@
+/* stylelint-disable color-function-notation */
+/* stylelint-disable alpha-value-notation */
 @use '~@mezzanine-ui/system/palette';
 @use '~@mezzanine-ui/system/typography';
+@use '~@mezzanine-ui/system/transition';
 @use './table' as *;
 
 $table-header-height: 40px !default;
@@ -16,7 +19,7 @@ $table-refresh-vertical-padding: 8px !default;
   height: auto;
   min-height: $min-height;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: flex-start;
   border-bottom: 1px solid palette.color(border);
 }
@@ -54,17 +57,95 @@ $table-refresh-vertical-padding: 8px !default;
   font-size: typography.px-to-rem($size);
 }
 
-.#{$prefix} {
+@mixin with-scroll-box-shadow($colorName) {
+  &--fixed {
+    &:first-child {
+      position: sticky;
+      z-index: 2;
+      left: 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: palette.color(#{$colorName});
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 10px;
+      transform: translateX(100%);
+      transition: transition.standard(box-shadow);
+      content: '';
+      pointer-events: none;
+    }
+
+    &--stuck {
+      &::after {
+        box-shadow: inset 8px 0 8px -8px rgba(0, 0, 0, 0.25);
+      }
+    }
+  }
+}
+
+.#{$loading-prefix} {
+  z-index: 4;
+}
+
+.#{$container-prefix} {
+  width: 100%;
+  max-height: var(--table-scroll-y, 'unset');
   position: relative;
+  overflow: auto;
+  scrollbar-width: thin; /* firefox specific (firefox 只能先用原生的) */
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 0;
+
+    /* smartphones, touchscreens */
+    @media (hover: none) and (pointer: coarse) {
+      display: none;
+      height: 0;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: #6a6a6a;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f2f2f2;
+  }
+}
+
+.#{$prefix} {
   width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  align-items: flex-start;
-  justify-content: flex-start;
+  min-width: var(--table-scroll-x, '100%');
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
   box-sizing: border-box;
 
   @include text_color;
+  @include body_bg();
+}
+
+.#{$header-fixed-prefix} {
+  width: 100%;
+  min-width: var(--table-scroll-x, '100%');
+  position: sticky;
+  z-index: 3;
+  top: 0;
 }
 
 .#{$header-prefix} {
@@ -75,33 +156,48 @@ $table-refresh-vertical-padding: 8px !default;
 
   &__cellWrapper {
     @include flexible;
+
+    background-color: palette.color(divider);
+
+    @include with-scroll-box-shadow(divider);
   }
 }
 
 .#{$body-prefix} {
   position: relative;
   width: 100%;
-  flex: 1 0 0;
-  overflow: auto;
-  scrollbar-width: none; /* Firefox specific */
-
-  &::-webkit-scrollbar {
-    display: none;
-    -webkit-overflow-scrolling: touch;
-  }
+  min-width: var(--table-scroll-x, '100%');
 
   &__row {
     @include row(52px);
     @include body_content;
     @include body_bg;
 
+    position: relative;
+
     &:hover,
     &--highlight {
-      @include action_highlight_bg;
+      .#{$body-prefix} {
+        &__row {
+          &__cellWrapper {
+            @include action_highlight_bg;
+
+            &--fixed {
+              @include body_bg;
+
+              &::before {
+                @include action_highlight_bg;
+              }
+            }
+          }
+        }
+      }
     }
 
     &__cellWrapper {
       @include flexible;
+      @include body_bg;
+      @include with-scroll-box-shadow(surface);
     }
 
     &__expandedTableWrapper {
@@ -119,12 +215,15 @@ $table-refresh-vertical-padding: 8px !default;
 
   &__empty {
     @include body_bg;
+
+    min-height: calc(var(--table-scroll-y, '130px') - 12px - #{$table-header-height});
   }
 
   &__fetchMore {
     @include row(auto);
     @include body_bg;
 
+    justify-content: center;
     padding: $table-fetch-more-vertical-padding 0;
     border-bottom: none;
   }

package/table/_table.scss

@@ -1,6 +1,9 @@
 @use '~@mezzanine-ui/system/size';
 
+$loading-prefix: mzn-table-loading;
+$container-prefix: mzn-table-scroll-area;
 $prefix: mzn-table;
+$header-fixed-prefix: mzn-table__header-fixed;
 $header-prefix: mzn-table__header;
 $body-prefix: mzn-table__body;
 $cell-prefix: mzn-table__cell;

package/table/index.js

@@ -1 +1 @@
-export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix } from './table.js';
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderFixedPrefix, tableHeaderPrefix, tableLoadingPrefix, tablePrefix, tableScrollContainerPrefix } from './table.js';

package/table/table.d.ts

@@ -1,17 +1,27 @@
+export declare const tableScrollContainerPrefix = "mzn-table-scroll-area";
+export declare const tableLoadingPrefix = "mzn-table-loading";
 export declare const tablePrefix = "mzn-table";
+export declare const tableHeaderFixedPrefix: string;
 export declare const tableHeaderPrefix: string;
 export declare const tableBodyPrefix: string;
 export declare const tableCellPrefix: string;
 export declare const tableClasses: {
+    readonly loading: "mzn-table-loading";
+    readonly scrollContainer: "mzn-table-scroll-area";
     readonly host: "mzn-table";
+    readonly headerFixed: string;
     readonly header: string;
     readonly headerCellWrapper: `${string}__cellWrapper`;
+    readonly headerCellWrapperFixed: `${string}__cellWrapper--fixed`;
+    readonly headerCellWrapperFixedStuck: `${string}__cellWrapper--fixed--stuck`;
     readonly body: string;
     readonly bodyEmpty: `${string}__empty`;
     readonly bodyFetchMore: `${string}__fetchMore`;
     readonly bodyRow: `${string}__row`;
     readonly bodyRowHighlight: `${string}__row--highlight`;
     readonly bodyRowCellWrapper: `${string}__row__cellWrapper`;
+    readonly bodyRowCellWrapperFixed: `${string}__row__cellWrapper--fixed`;
+    readonly bodyRowCellWrapperFixedStuck: `${string}__row__cellWrapper--fixed--stuck`;
     readonly bodyRowExpandedTableWrapper: `${string}__row__expandedTableWrapper`;
     readonly bodyRowExpandedTable: `${string}__row__expandedTable`;
     readonly bodyRowExpandedTableRow: `${string}__row__expandedTableRow`;
@@ -122,6 +132,13 @@ export interface TableComponents {
         cell?: any;
     };
 }
+/** === Feature scrolling */
+export interface TableScrolling {
+    x?: number;
+    y?: number;
+    /** Only available when horizontal scrolling is enabled */
+    fixedFirstColumn?: boolean;
+}
 /** styling */
 export declare function getColumnStyle(column: TableColumn<TableRecord<unknown>>): {};
 export declare function getCellStyle(column: TableColumn<TableRecord<unknown>>): {};

package/table/table.js

@@ -1,17 +1,27 @@
+const tableScrollContainerPrefix = 'mzn-table-scroll-area';
+const tableLoadingPrefix = 'mzn-table-loading';
 const tablePrefix = 'mzn-table';
+const tableHeaderFixedPrefix = `${tablePrefix}__header-fixed`;
 const tableHeaderPrefix = `${tablePrefix}__header`;
 const tableBodyPrefix = `${tablePrefix}__body`;
 const tableCellPrefix = `${tablePrefix}__cell`;
 const tableClasses = {
+    loading: tableLoadingPrefix,
+    scrollContainer: tableScrollContainerPrefix,
     host: tablePrefix,
+    headerFixed: tableHeaderFixedPrefix,
     header: tableHeaderPrefix,
     headerCellWrapper: `${tableHeaderPrefix}__cellWrapper`,
+    headerCellWrapperFixed: `${tableHeaderPrefix}__cellWrapper--fixed`,
+    headerCellWrapperFixedStuck: `${tableHeaderPrefix}__cellWrapper--fixed--stuck`,
     body: tableBodyPrefix,
     bodyEmpty: `${tableBodyPrefix}__empty`,
     bodyFetchMore: `${tableBodyPrefix}__fetchMore`,
     bodyRow: `${tableBodyPrefix}__row`,
     bodyRowHighlight: `${tableBodyPrefix}__row--highlight`,
     bodyRowCellWrapper: `${tableBodyPrefix}__row__cellWrapper`,
+    bodyRowCellWrapperFixed: `${tableBodyPrefix}__row__cellWrapper--fixed`,
+    bodyRowCellWrapperFixedStuck: `${tableBodyPrefix}__row__cellWrapper--fixed--stuck`,
     bodyRowExpandedTableWrapper: `${tableBodyPrefix}__row__expandedTableWrapper`,
     bodyRowExpandedTable: `${tableBodyPrefix}__row__expandedTable`,
     bodyRowExpandedTableRow: `${tableBodyPrefix}__row__expandedTableRow`,
@@ -54,4 +64,4 @@ function getCellStyle(column) {
     return style;
 }
 
-export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix };
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderFixedPrefix, tableHeaderPrefix, tableLoadingPrefix, tablePrefix, tableScrollContainerPrefix };

package/tabs/_tabs-styles.scss

@@ -18,8 +18,19 @@ $tab-padding: 8px 0 !default;
     grid-auto-flow: column;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid palette.color(border);
     margin-bottom: $margin-bottom;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: palette.color(border);
+    }
   }
 
   &--overflow {
@@ -80,7 +91,17 @@ $tab-padding: 8px 0 !default;
 
     &--active {
       color: palette.color(primary);
-      border-bottom: 2px solid palette.color(primary);
+
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-color: palette.color(primary);
+      }
     }
 
     &:hover:enabled {