tdesign-react 0.32.1 → 0.32.2-alpha.3

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

@@ -1,706 +0,0 @@
-@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;
-  }
-}