@dtjoy/dt-design 1.1.2 → 1.1.5

package/lib/table/style/fixed.less

@@ -0,0 +1,85 @@
+@import './variables.less';
+
+// ============================================================
+// === fixed.ts: genFixedStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  // ====================== Cell ======================
+  .@{table-prefix-cls}-cell.@{table-prefix-cls}-cell-fix {
+    position: sticky;
+  }
+
+  .@{table-prefix-cls}-cell-fix {
+    z-index: calc(var(--z-offset-reverse) + @table-z-index-fixed);
+    background: @table-bg;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: -@table-line-width;
+      width: 30px;
+      transition: box-shadow @table-motion-duration-slow;
+      content: '';
+      pointer-events: none;
+    }
+
+    // Position
+    &-start::after {
+      inset-inline-start: 100%;
+    }
+
+    &-end::after {
+      inset-inline-end: 100%;
+    }
+
+    // visible shadow
+    &-start-shadow-show::after {
+      box-shadow: inset 10px 0 8px -8px @table-color-split;
+    }
+
+    &-end-shadow-show::after {
+      box-shadow: inset -10px 0 8px -8px @table-color-split;
+    }
+  }
+
+  // =================== Container ====================
+  .@{table-prefix-cls}-container {
+    position: relative;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: -@table-line-width;
+      z-index: calc(var(--columns-count) * 2 + @table-z-index-fixed + 1);
+      width: 30px;
+      transition: box-shadow @table-motion-duration-slow;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      inset-inline-start: 0;
+    }
+
+    &::after {
+      inset-inline-end: 0;
+    }
+  }
+
+  .@{table-prefix-cls}-has-fix-start .@{table-prefix-cls}-container::before {
+    display: none;
+  }
+
+  .@{table-prefix-cls}-has-fix-end .@{table-prefix-cls}-container::after {
+    display: none;
+  }
+
+  .@{table-prefix-cls}-fix-start-shadow-show .@{table-prefix-cls}-container::before {
+    box-shadow: inset 10px 0 8px -8px @table-color-split;
+  }
+
+  .@{table-prefix-cls}-fix-end-shadow-show .@{table-prefix-cls}-container::after {
+    box-shadow: inset -10px 0 8px -8px @table-color-split;
+  }
+}

package/lib/table/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");
+require("./virtual.less");

package/lib/table/style/index.less

@@ -0,0 +1,19 @@
+@import './variables.less';
+@import './base.less';
+@import './pagination.less';
+@import './summary.less';
+@import './sorter.less';
+@import './filter.less';
+@import './bordered.less';
+@import './radius.less';
+@import './expand.less';
+@import './empty.less';
+@import './selection.less';
+@import './fixed.less';
+@import './sticky.less';
+@import './ellipsis.less';
+@import './size.less';
+@import './rtl.less';
+@import './virtual.less';
+@import './resize.less';
+@import './editable.less';

package/lib/table/style/pagination.less

@@ -0,0 +1,29 @@
+@import './variables.less';
+
+// ============================================================
+// === pagination.ts: genPaginationStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: @table-padding-xs;
+    margin: @table-margin 0;
+
+    > * {
+      flex: none;
+    }
+
+    &-start {
+      justify-content: flex-start;
+    }
+
+    &-center {
+      justify-content: center;
+    }
+
+    &-end {
+      justify-content: flex-end;
+    }
+  }
+}

package/lib/table/style/radius.less

@@ -0,0 +1,64 @@
+@import './variables.less';
+
+// ============================================================
+// === radius.ts: genRadiusStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls} {
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-header {
+      border-radius: @table-radius @table-radius 0 0;
+    }
+
+    .@{table-prefix-cls}-title + .@{table-prefix-cls}-container {
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+
+      .@{table-prefix-cls}-header,
+      table {
+        border-radius: 0;
+      }
+
+      table > thead > tr:first-child {
+        th:first-child,
+        th:last-child,
+        td:first-child,
+        td:last-child {
+          border-radius: 0;
+        }
+      }
+    }
+
+    .@{table-prefix-cls}-container {
+      border-start-start-radius: @table-radius;
+      border-start-end-radius: @table-radius;
+
+      &::before {
+        border-start-start-radius: @table-radius;
+      }
+
+      &::after {
+        border-start-end-radius: @table-radius;
+      }
+
+      > .@{table-prefix-cls}-content {
+        border-start-start-radius: @table-radius;
+        border-start-end-radius: @table-radius;
+      }
+
+      table > thead > tr:first-child {
+        > *:first-child {
+          border-start-start-radius: @table-radius;
+        }
+
+        > *:last-child {
+          border-start-end-radius: @table-radius;
+        }
+      }
+    }
+
+    .@{table-prefix-cls}-footer {
+      border-radius: 0 0 @table-radius @table-radius;
+    }
+  }
+}

package/lib/table/style/resize.less

@@ -0,0 +1,78 @@
+@import './variables.less';
+
+// ============================================================
+// === Column Resize Handle ===
+// ============================================================
+
+// 表格容器需要 relative 定位，让竖线可以 absolute 定位
+.@{table-prefix-cls}-wrapper {
+  position: relative;
+}
+
+// 可调整列宽的 th 添加标记
+.@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-cell-resizable {
+  position: relative;
+  overflow: visible;
+}
+
+// 拖拽手柄（通过 transformResizableColumns 注入到 title 中）
+.@{table-prefix-cls}-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  cursor: col-resize;
+  user-select: none;
+
+  // 默认状态下不显示边框，只有 hover 时才高亮
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    bottom: 0;
+    width: 0;
+    background-color: transparent;
+    transition: width 0.15s ease, background-color 0.15s ease;
+    content: '';
+  }
+
+  // hover 时高亮 - 显示一条粗边框
+  &:hover::after {
+    width: 3px;
+    background-color: @table-color-primary;
+  }
+
+  // 最后一列的 handle 需要限制在单元格内
+  .@{table-prefix-cls}-thead > tr > th:last-child & {
+    right: 0;
+    width: 8px;
+
+    &:hover::after {
+      right: 0;
+    }
+  }
+}
+
+// 拖拽进行中时，通过 wrapper 级联隐藏所有 hover 高亮
+.@{table-prefix-cls}-wrapper-resizing {
+  .@{table-prefix-cls}-resize-handle::after,
+  .@{table-prefix-cls}-resize-handle:hover::after {
+    width: 0 !important;
+    background-color: transparent !important;
+  }
+}
+
+// 拖拽时的竖线指示器（绝对定位在表格容器内）
+.@{table-prefix-cls}-resize-line {
+  position: absolute;
+  top: 0;
+  z-index: 10;
+  display: none;
+  width: 2px;
+  margin-left: -1px;
+  background-color: @table-color-primary;
+  box-shadow: 0 0 6px rgba(22, 119, 255, 0.4);
+  pointer-events: none;
+}

package/lib/table/style/rtl.less

@@ -0,0 +1,52 @@
+@import './variables.less';
+
+// ============================================================
+// === rtl.ts: genRtlStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper-rtl {
+  direction: rtl;
+
+  table {
+    direction: rtl;
+  }
+
+  .@{table-prefix-cls}-row-expand-icon {
+    float: right;
+
+    &::after {
+      transform: rotate(-90deg);
+    }
+
+    &-collapsed::before {
+      transform: rotate(180deg);
+    }
+
+    &-collapsed::after {
+      transform: rotate(0deg);
+    }
+  }
+
+  .@{table-prefix-cls}-cell-fix {
+    &-start-shadow-show::after {
+      box-shadow: inset -10px 0 8px -8px @table-color-split;
+    }
+
+    &-end-shadow-show::after {
+      box-shadow: inset 10px 0 8px -8px @table-color-split;
+    }
+  }
+
+  .@{table-prefix-cls}-container {
+    .@{table-prefix-cls}-row-indent {
+      float: right;
+    }
+  }
+
+  .@{table-prefix-cls}-fix-start-shadow-show .@{table-prefix-cls}-container::before {
+    box-shadow: inset -10px 0 8px -8px @table-color-split;
+  }
+
+  .@{table-prefix-cls}-fix-end-shadow-show .@{table-prefix-cls}-container::after {
+    box-shadow: inset 10px 0 8px -8px @table-color-split;
+  }
+}

package/lib/table/style/selection.less

@@ -0,0 +1,63 @@
+@import './variables.less';
+
+// ============================================================
+// === selection.ts: genSelectionStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-selection-col {
+    width: @table-selection-column-width;
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column,
+  table tr td.@{table-prefix-cls}-selection-column,
+  .@{table-prefix-cls}-selection-column {
+    padding-inline-end: @table-padding-xs;
+    padding-inline-start: @table-padding-xs;
+    text-align: center;
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column.@{table-prefix-cls}-cell-fix-left {
+    z-index: @table-z-index-fixed + 1;
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column::after {
+    background-color: transparent !important;
+  }
+
+  .@{table-prefix-cls}-selection {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  .@{table-prefix-cls}-selection-extra {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    cursor: pointer;
+    transition: all @table-motion-duration-slow;
+    margin-inline-start: 100%;
+    padding-inline-start: calc(@table-padding-horizontal / 4);
+  }
+
+  // ============================= Rows =============================
+  .@{table-prefix-cls}-tbody {
+    .@{table-prefix-cls}-row {
+      // row selected
+      &.@{table-prefix-cls}-row-selected {
+        > .@{table-prefix-cls}-cell {
+          background: @table-selected-row-bg;
+
+          &-row-hover {
+            background: @table-selected-row-hover-bg;
+          }
+        }
+      }
+
+      // cell hover (cell-row-hover class on td)
+      > .@{table-prefix-cls}-cell-row-hover {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+}

package/lib/table/style/size.less

@@ -0,0 +1,54 @@
+@import './variables.less';
+
+// ============================================================
+// === size.ts: genSizeStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  // ---- middle (antd uses 'medium' class name) ----
+  .@{table-prefix-cls}.@{table-prefix-cls}-middle {
+    font-size: @table-font-size-middle;
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{table-prefix-cls}-cell,
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      padding: @table-padding-vertical-middle @table-padding-horizontal-middle;
+    }
+
+    .@{table-prefix-cls}-filter-trigger {
+      margin-inline-end: calc(-@table-padding-horizontal-middle / 2);
+    }
+
+    .@{table-prefix-cls}-expanded-row-fixed {
+      margin: -@table-padding-vertical-middle -@table-padding-horizontal-middle;
+    }
+  }
+
+  // ---- small ----
+  .@{table-prefix-cls}.@{table-prefix-cls}-small {
+    font-size: @table-font-size-small;
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{table-prefix-cls}-cell,
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      padding: @table-padding-vertical-small @table-padding-horizontal-small;
+    }
+
+    .@{table-prefix-cls}-filter-trigger {
+      margin-inline-end: calc(-@table-padding-horizontal-small / 2);
+    }
+
+    .@{table-prefix-cls}-expanded-row-fixed {
+      margin: -@table-padding-vertical-small -@table-padding-horizontal-small;
+    }
+  }
+}

package/lib/table/style/sorter.less

@@ -0,0 +1,99 @@
+@import './variables.less';
+
+// ============================================================
+// === sorter.ts: genSorterStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters {
+    outline: none;
+    cursor: pointer;
+    transition: all @table-motion-duration-slow, left 0s;
+
+    &:hover {
+      background: @table-header-sort-hover-bg;
+
+      &::before {
+        background-color: transparent !important;
+      }
+    }
+
+    &:focus-visible {
+      color: @table-color-primary;
+    }
+
+    &.@{table-prefix-cls}-cell-fix-left:hover,
+    &.@{table-prefix-cls}-cell-fix-right:hover {
+      background: @table-fixed-header-sort-active-bg;
+    }
+  }
+
+  .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-sort {
+    background: @table-header-sort-bg;
+
+    &::before {
+      background-color: transparent !important;
+    }
+  }
+
+  td.@{table-prefix-cls}-column-sort {
+    background: @table-body-sort-bg;
+  }
+
+  .@{table-prefix-cls}-column-title {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .@{table-prefix-cls}-column-sorters {
+    display: flex;
+    flex: auto;
+    align-items: center;
+    justify-content: space-between;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorters-tooltip-target-sorter {
+    &::after {
+      content: none;
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorter {
+    margin-inline-start: @table-margin-xxs;
+    color: @table-header-icon-color;
+    font-size: 0;
+    transition: color @table-motion-duration-slow;
+
+    &-inner {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &-up,
+    &-down {
+      font-size: @table-font-size-icon;
+
+      &.active {
+        color: @table-color-primary;
+      }
+    }
+
+    .@{table-prefix-cls}-column-sorter-up + .@{table-prefix-cls}-column-sorter-down {
+      margin-top: -0.3em;
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorters:hover .@{table-prefix-cls}-column-sorter {
+    color: @table-header-icon-hover-color;
+  }
+}

package/lib/table/style/sticky.less

@@ -0,0 +1,45 @@
+@import './variables.less';
+
+// ============================================================
+// === sticky.ts: genStickyStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-sticky {
+    &-holder {
+      position: sticky;
+      z-index: calc(var(--columns-count) * 2 + @table-z-index-fixed + 1);
+      background: @table-color-bg-container;
+    }
+
+    &-scroll {
+      position: sticky;
+      bottom: 0;
+      z-index: calc(var(--columns-count) * 2 + @table-z-index-fixed + 1);
+      display: flex;
+      align-items: center;
+      height: @table-scroll-thumb-size !important;
+      background: @table-scroll-bg;
+      border-top: @table-border;
+      opacity: @table-opacity-loading;
+
+      &:hover {
+        transform-origin: center bottom;
+      }
+
+      // fake scrollbar style of sticky
+      &-bar {
+        position: absolute;
+        bottom: 0;
+        height: @table-scroll-thumb-size;
+        background-color: @table-scroll-thumb-bg;
+        border-radius: @table-sticky-scrollbar-border-radius;
+        transition: all @table-motion-duration-slow, transform 0s;
+
+        &:hover,
+        &-active {
+          background-color: @table-scroll-thumb-bg-hover;
+        }
+      }
+    }
+  }
+}

package/lib/table/style/summary.less

@@ -0,0 +1,23 @@
+@import './variables.less';
+
+// ============================================================
+// === summary.ts: genSummaryStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-summary {
+    position: relative;
+    z-index: @table-z-index-fixed;
+    background: @table-bg;
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: @table-border;
+      }
+    }
+  }
+
+  div.@{table-prefix-cls}-summary {
+    box-shadow: 0 -1px 0 @table-border-color;
+  }
+}

package/lib/table/style/variables.less

@@ -0,0 +1,80 @@
+@import '../../style/themes/index.less';
+
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+// ---- Design Tokens (antd default theme computed values) ----
+@table-font-size: 14px;
+@table-font-size-middle: 14px;
+@table-font-size-small: 14px;
+@table-line-height: 1.57142857;
+@table-bg: #ffffff;
+@table-radius: 8px;
+@table-padding-vertical: 16px;
+@table-padding-horizontal: 16px;
+@table-padding-vertical-middle: 12px;
+@table-padding-horizontal-middle: 8px;
+@table-padding-vertical-small: 8px;
+@table-padding-horizontal-small: 8px;
+@table-border-color: #f0f0f0;
+@table-header-text-color: rgba(0, 0, 0, 0.88);
+@table-header-bg: #fafafa;
+@table-header-cell-split-color: #f0f0f0;
+@table-footer-text-color: rgba(0, 0, 0, 0.88);
+@table-footer-bg: #fafafa;
+@table-row-hover-bg: #fafafa;
+@table-expanded-row-bg: #fafafa;
+@table-selected-row-bg: #e6f4ff;
+@table-selected-row-hover-bg: #bae0ff;
+@table-header-sort-bg: #fafafa;
+@table-header-sort-hover-bg: #f5f5f5;
+@table-body-sort-bg: #fafafa;
+@table-fixed-header-sort-active-bg: #fafafa;
+@table-header-filter-active-bg: #f5f5f5;
+@table-filter-dropdown-bg: #ffffff;
+@table-filter-dropdown-menu-bg: #ffffff;
+@table-border: 1px solid @table-border-color;
+@table-line-width: 1px;
+@table-z-index-fixed: 2;
+@table-motion-duration-mid: 0.2s;
+@table-motion-duration-slow: 0.3s;
+@table-font-weight-strong: 600;
+@table-color-split: rgba(5, 5, 5, 0.06);
+@table-color-text: rgba(0, 0, 0, 0.88);
+@table-color-text-disabled: rgba(0, 0, 0, 0.25);
+@table-color-primary: #1677ff;
+@table-color-link: #1677ff;
+@table-color-link-hover: #69b1ff;
+@table-color-link-active: #0958d9;
+@table-color-bg-container: #ffffff;
+@table-expand-icon-bg: #ffffff;
+@table-expand-column-width: 48px;
+@table-selection-column-width: 32px;
+@table-expand-icon-size: 17px;
+@table-expand-icon-half-inner: 7px;
+@table-expand-icon-scale: 0.94117647;
+@table-expand-icon-margin-top: 2.5px;
+@table-expand-icon-line-offset: 3px;
+@table-header-icon-color: rgba(0, 0, 0, 0.29);
+@table-header-icon-hover-color: rgba(0, 0, 0, 0.57);
+@table-sticky-scrollbar-bg: rgba(0, 0, 0, 0.25);
+@table-sticky-scrollbar-border-radius: 100;
+@table-scroll-thumb-size: 8px;
+@table-scroll-thumb-bg: rgba(0, 0, 0, 0.25);
+@table-scroll-thumb-bg-hover: rgba(0, 0, 0, 0.88);
+@table-scroll-bg: rgba(5, 5, 5, 0.06);
+@table-border-radius: 6px;
+@table-font-size-icon: 12px;
+@table-padding-xxs: 4px;
+@table-padding-xs: 8px;
+@table-padding-sm: 12px;
+@table-margin-xxs: 4px;
+@table-margin: 16px;
+@table-font-size-sm: 12px;
+@table-opacity-loading: 0.35;
+@table-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+// Virtual scroll row height derived from padding + font height + border
+@table-row-height: (@table-padding-vertical * 2) + floor(@table-font-size * @table-line-height) + 1;
+@table-row-height-middle: (@table-padding-vertical-middle * 2) + floor(@table-font-size * @table-line-height) + 1;
+@table-row-height-small: (@table-padding-vertical-small * 2) + floor(@table-font-size * @table-line-height) + 1;