tdesign-react 0.28.0 → 0.30.0

package/esm/_common/style/web/components/table/_index_old.less

@@ -0,0 +1,706 @@
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "../../mixins/_text.less";
+
+@import "../../mixins/_scrollbar.less";
+
+@padding: @table-td-padding-vertical-top @table-td-padding-horizontal
+  @table-td-padding-vertical-bottom @table-td-padding-horizontal;
+
+.scrollbar {
+  .scrollbar();
+}
+
+.@{prefix}-table {
+  width: 100%;
+  font-size: @table-font-size;
+  color: @table--text-color;
+  background-color: @table-bg;
+
+  /** loading need to be top of fixed columns */
+  .@{prefix}-loading--full {
+    z-index: 1;
+  }
+
+  .bordered {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    border-left: 1px solid @table-border-color;
+    pointer-events: none;
+  }
+
+  &__top-content {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  &__content {
+    position: relative;
+    .scrollbar();
+  }
+
+  &__pagination {
+    padding: @table-padding-normal  @table-padding-horizontal;
+    box-sizing: border-box;
+  }
+
+  .@{prefix}-icon {
+    font-size: @font-size-l;
+  }
+
+  // table 标签基础样式
+  table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  .@{prefix}-text-ellipsis {
+    .text-ellipsis();
+  }
+
+  th,
+  td {
+    position: relative;
+    padding: @padding;
+    border-bottom: 1px solid @table-border-color;
+    line-height: @table-line-height;
+    vertical-align: middle;
+    font-weight: normal;
+    overflow-wrap: break-word;
+    background-color: inherit;
+
+    &:not([align]) {
+      text-align: left;
+    }
+  }
+
+  thead td,
+  th {
+    color: @table-head-text-color;
+  }
+
+  td[key="row-select"] {
+    padding: @table-td-padding-vertical-top 0 @table-td-padding-vertical-bottom @table-td-padding-horizontal;
+  }
+
+  td,
+  th {
+    &.@{prefix}-align-left {
+      text-align: left;
+    }
+
+    &.@{prefix}-align-right {
+      text-align: right;
+    }
+
+    &.@{prefix}-align-center {
+      text-align: center;
+    }
+  }
+
+  tr {
+    background-color: @table-bg;
+  }
+
+  // 紧凑型表格
+  &.@{prefix}-size-s {
+    th,
+    td {
+      padding: @table-padding-small;
+    }
+  }
+
+  // 宽松型表格
+  &.@{prefix}-size-l {
+    th,
+    td {
+      padding: @table-padding-large;
+    }
+  }
+
+  // 展开/收起列
+  .@{prefix}-table__expandable-icon-cell,
+  .@{prefix}-table__selection-cell {
+    padding: 0;
+  }
+
+  // @todo: 待优化
+  .@{prefix}-radio,
+  .@{prefix}-checkbox {
+    line-height: 1;
+    font-size: 0;
+    vertical-align: middle;
+  }
+
+  .@{prefix}-loading {
+    font-size: @table-loading-size;
+  }
+
+  // 边框线表格
+  &--bordered {
+    .@{prefix}-table__content {
+      border-left: 1px solid @table-border-color;
+    }
+    .@{prefix}-table__empty {
+      border-left: 1px  solid  @table-border-color;
+      border-right: 1px  solid  @table-border-color;
+    }
+    // 表格边框优化，适配固定列/固定表头场景
+    .@{prefix}-table__content {
+      border: 1px solid @table-border-color;
+      border-bottom: 0;
+      border-radius: @border-radius;
+
+      th {
+        border-left: 1px solid @table-border-color;
+        border-bottom: 1px solid @table-border-color;
+
+        &:first-child {
+          border-left: 0;
+
+          &::before {
+            border-left: 0;
+          }
+        }
+      }
+
+      td {
+        border-left: 1px solid @table-border-color;
+        border-bottom: 1px solid @table-border-color;
+
+        &.@{prefix}-table__cell--fixed-left-last {
+          & + td {
+            border-left-width: 0;
+          }
+
+          &::before {
+            border-right: 1px solid @table-border-color;
+          }
+        }
+
+        &.@{prefix}-table__cell--fixed-left,
+        &.@{prefix}-table__cell--fixed-right {
+          border-left: 0;
+
+          &::before {
+            .bordered();
+          }
+        }
+
+        &:first-child {
+          border-left-width: 0;
+
+          &::before {
+            border-left: 0;
+          }
+        }
+      }
+    }
+
+    .@{prefix}-table--loading {
+      border-bottom: 1px solid @table-border-color;
+    }
+
+    .@{prefix}-table__pagination {
+      border: 1px solid @table-border-color;
+      border-top: 0;
+    }
+
+    // 固定表头表格底部边框线显示优化
+    &.@{prefix}-table__header--fixed {
+
+      .@{prefix}-table__content {
+        border-bottom: 1px solid @table-border-color;
+
+        tr {
+          &:last-child {
+            td {
+              border-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .@{prefix}-table__cell--sort-trigger {
+      margin-left: auto;
+    }
+  }
+
+  // 斑马线表格
+  &--striped {
+
+    &.@{prefix}-table__header--fixed {
+      tbody tr:nth-of-type(even) {
+        background-color: @table-highlight-bg-color;
+      }
+    }
+
+    &:not(.@{prefix}-table__header--fixed) {
+      tbody tr:nth-of-type(odd) {
+        background-color: @table-highlight-bg-color;
+      }
+    }
+
+    &.@{prefix}-table--hoverable {
+
+      &.@{prefix}-table__header--fixed {
+        tbody tr:nth-of-type(even):hover {
+          background-color: @table-highlight-bg-color--hover;
+        }
+      }
+
+      &:not(.@{prefix}-table__header--fixed) {
+        tbody tr:nth-of-type(odd):hover {
+          background-color: @table-highlight-bg-color--hover;
+        }
+      }
+
+      tbody {
+        tr {
+          transition: background-color .3s ease-in;
+
+          &:hover {
+            background-color: @table-highlight-dark-bg-color;
+          }
+        }
+      }
+    }
+  }
+
+  // 可悬停表格
+  &--hoverable {
+    tbody {
+      tr {
+        transition: background-color .3s ease-in;
+
+        &:hover {
+          background-color: @table-highlight-dark-bg-color;
+        }
+      }
+    }
+  }
+
+  // 文本顶端对齐
+  &.@{prefix}-table--align-top {
+    tbody {
+      td {
+        vertical-align: top;
+      }
+    }
+  }
+
+  // column highlight
+  .@{prefix}-table__cell--highlight {
+    background-color: @table-highlight-bg-color;
+  }
+
+  // 20200728 优化表头固定和列固定
+  // 表头固定表格
+  &__header--fixed {
+    table {
+      table-layout: fixed;
+    }
+
+    th,
+    td {
+      overflow-wrap: break-word;
+    }
+
+    .@{prefix}-table__header {
+      width: fit-content;
+      position: relative;
+      z-index: 5;
+      background-color: @bg-color-secondarycontainer;
+
+      tr {
+        background-color: @bg-color-secondarycontainer;
+      }
+    }
+
+    .@{prefix}-table__header {
+      .scrollbar();
+    }
+
+    .@{prefix}-table__body {
+      overflow-y: auto;
+      width: fit-content;
+
+      .scrollbar();
+    }
+  }
+
+  &:not(&--bordered) &__cell {
+    &--selectable {
+      & + td {
+        padding-left: 0;
+      }
+    }
+  }
+
+  // 列固定表格
+  &__cell--fixed {
+
+    &.@{prefix}-table__header--fixed {
+
+      .@{prefix}-table__header {
+        overflow: hidden;
+        width: 100%;
+
+        .@{prefix}-table__cell--fixed-left,
+        .@{prefix}-table__cell--fixed-right {
+          &:last-child::after {
+            content: "";
+            position: absolute;
+            right: -6px;
+            width: 6px;
+            height: 100%;
+            top: 0;
+            background-color: @bg-color-secondarycontainer;
+          }
+        }
+      }
+
+      .@{prefix}-table__body {
+        overflow: auto scroll;
+      }
+    }
+
+    .@{prefix}-table__content {
+      overflow: auto hidden;
+    }
+
+    table {
+      table-layout: fixed;
+      min-width: 100%;
+      border-collapse: separate;
+    }
+
+    th,
+    td {
+      position: relative;
+    }
+
+    .@{prefix}-table__cell--fixed-left,
+    .@{prefix}-table__cell--fixed-right {
+      z-index: 100;
+    }
+
+    .@{prefix}-table__cell--fixed-left-last {
+      &::before {
+        z-index: -1;
+        background-color: inherit;
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        content: "";
+        width: @table-fixed-cell-box-shadow-width;
+        transition: box-shadow .3s;
+        pointer-events: none;
+        z-index: -2;
+        transform: translateX(100%);
+      }
+    }
+
+    .@{prefix}-table__cell--fixed-right-first {
+      &::before {
+        z-index: -1;
+        background-color: inherit;
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        content: "";
+        width: @table-fixed-cell-box-shadow-width;
+        transition: box-shadow .3s;
+        pointer-events: none;
+        z-index: -2;
+        transform: translateX(-100%);
+      }
+    }
+
+    &.@{prefix}-table--has-fixed {
+      // 可向左滚动时，左边显示固定列显示阴影，右边同理
+      .@{prefix}-table__content--scrollable-to-left {
+
+        .@{prefix}-table__cell--fixed-left-last::after {
+          box-shadow: inset 8px 0 8px -4px var(--td-table-shadow-color);
+        }
+      }
+
+      .@{prefix}-table__content--scrollable-to-right {
+
+        .@{prefix}-table__cell--fixed-right-first::after {
+          box-shadow: inset -8px 0 8px -4px var(--td-table-shadow-color);
+        }
+      }
+    }
+  }
+
+  // 列宽调整表头单元格
+  .@{prefix}-table__cell-resizable {
+    position: relative;
+
+    .@{prefix}-table__cell--resizer {
+      position: absolute;
+      top: 0;
+      right: -5px;
+      bottom: 0;
+      z-index: 10;
+      width: 10px;
+      cursor: col-resize;
+    }
+  }
+
+  // 数据行禁用
+  .@{prefix}-table__row--disabled {
+    color: @table-row-disabled-color;
+  }
+
+  // 复杂表头容器
+  .@{prefix}-table__cell--title {
+    display: flex;
+  }
+
+  // 表格行可以拖拽
+  &.@{prefix}-table__row--draggable {
+    tbody {
+      &.@{prefix}-table__body--dragging {
+        tr {
+          transition: transform .2s;
+          transform: translateY(0);
+        }
+      }
+      // 比如分页数据变化时，不需要过渡
+      tr {
+        &.v-leave-active {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__column-controller {
+    &-desc {
+      margin-bottom: 24px;
+    }
+
+    &-block {
+      padding: 10px 24px;
+      border: 1px solid @gray-color-3;
+
+      & + & {
+        border-top: 0;
+        padding-top: 8px;
+        padding-bottom: 24px;
+      }
+
+      .@{prefix}-checkbox {
+        &-group .@{prefix}-checkbox {
+          margin-top: 16px;
+        }
+      }
+    }
+
+    &--fixed {
+      .@{prefix}-checkbox {
+        width: 108px;
+      }
+    }
+  }
+}
+
+.@{prefix}-table__cell--sortable {
+  position: relative;
+
+  .@{prefix}-table__cell--title {
+    display: flex;
+
+    & > div:first-child {
+      flex: 1;
+      text-align: inherit;
+    }
+
+    .@{prefix}-table__cell--filter {
+      margin-left: 10px;
+      text-align: center;
+    }
+  }
+
+  .@{prefix}-table__cell--sort-trigger {
+    width: 20px;
+    text-align: center;
+  }
+}
+
+// 表格加载态
+.@{prefix}-table--loading {
+  position: relative;
+}
+
+.@{prefix}-table--loading-progressbar {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1px;
+  background-color: @brand-color;
+  animation: tTableProgressbar 2s ease-in-out;
+  animation-fill-mode: both;
+}
+
+.@{prefix}-table--loading-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  color: @text-color-disabled;
+}
+
+.@{prefix}-table__expanded-cell {
+  padding-left: 45px;
+}
+
+.@{prefix}-table__async-loading {
+  text-align: center;
+}
+
+.@{prefix}-table__async-loading.@{prefix}-is-load-more {
+  cursor: pointer;
+}
+
+// 默认空表格
+.@{prefix}-table__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  color: @table-color-empty;
+  border-bottom: 1px solid @table-border-color;
+}
+
+.@{prefix}-table__filter-icon,
+.@{prefix}-table__sort-icon {
+  margin-left: 8px;
+  background-color: transparent;
+  display: inline-block;
+  cursor: pointer;
+
+  &:hover {
+    color: @table-icon-active-color;
+  }
+}
+
+.@{prefix}-table__sort-icon {
+  position: absolute;
+}
+
+.@{prefix}-table__filter-pop {
+
+  .@{prefix}-table__filter-pop-content {
+    margin: -8px;
+
+    .@{prefix}-table__filter-pop-content-inner {
+      padding: 16px;
+    }
+
+    .@{prefix}-radio-group {
+      display: block;
+      height: auto;
+    }
+
+    .@{prefix}-checkbox,
+    .@{prefix}-radio {
+      display: block;
+      line-height: 34px;
+    }
+
+    .@{prefix}-table__filter-pop-content-button {
+      border-top: 1px solid @table-border-color;
+      padding: 16px;
+
+      .t-button + .t-button {
+        margin-left: @spacer-2;
+      }
+    }
+  }
+}
+
+.@{prefix}-table__sort-icon--active {
+  color: @table-icon-active-color;
+}
+
+.@{prefix}-table__double-icons {
+  display: inline-grid;
+  vertical-align: middle;
+  width: 14px;
+}
+
+.@{prefix}-table__expand-box {
+  padding: 10px 8px;
+  display: inline-grid;
+  vertical-align: middle;
+  color: @table-icon-default-color;
+  cursor: pointer;
+
+  &:hover {
+    color: @table-icon-active-color;
+  }
+}
+
+@keyframes tTableProgressbar {
+  0% {
+    width: 0;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+.@{prefix}-table-expandable-icon-cell + .@{prefix}-table__cell--selectable[key="row-select"] {
+  padding-left: 10px;
+}
+
+.@{prefix}-table__filter--bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px;
+  border-top: 1px solid @table-border-color;
+  > .@{prefix}-button + .@{prefix}-button {
+    margin-left: 8px;
+  }
+}
+
+.@{prefix}-table__row-filter-inner {
+  position: sticky;
+  left: 0;
+  text-align: center;
+}
+
+.@{prefix}-table__filter-result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > .@{prefix}-button {
+    margin-left: 8px;
+  }
+}