@dtjoy/dt-design 1.1.1 → 1.1.5

package/lib/table/style/expand.less

@@ -0,0 +1,123 @@
+@import './variables.less';
+
+// ============================================================
+// === expand.ts: genExpandStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-expand-icon-col {
+    width: @table-expand-column-width;
+  }
+
+  .@{table-prefix-cls}-row-expand-icon-cell {
+    text-align: center;
+
+    .@{table-prefix-cls}-row-expand-icon {
+      display: inline-flex;
+      float: none;
+      vertical-align: sub;
+    }
+  }
+
+  .@{table-prefix-cls}-row-indent {
+    float: left;
+    height: 1px;
+  }
+
+  // operationUnit + expand icon overrides
+  .@{table-prefix-cls}-row-expand-icon {
+    // expand icon specific
+    position: relative;
+    float: left;
+    width: @table-expand-icon-size;
+    height: @table-expand-icon-size;
+    padding: 0;
+    // operationUnit
+    color: @table-color-link;
+    color: inherit;
+    line-height: @table-expand-icon-size;
+    text-decoration: none;
+    background: none;
+    background: @table-expand-icon-bg;
+    border: 0;
+    border: @table-border;
+    border-radius: @table-border-radius;
+    outline: none;
+    transform: scale(@table-expand-icon-scale);
+    cursor: pointer;
+    transition: all @table-motion-duration-slow;
+    user-select: none;
+
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: currentcolor;
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      background: currentcolor;
+      transition: transform @table-motion-duration-slow ease-out;
+      content: '';
+    }
+
+    // horizontal line
+    &::before {
+      top: @table-expand-icon-half-inner;
+      height: @table-line-width;
+      inset-inline-end: @table-expand-icon-line-offset;
+      inset-inline-start: @table-expand-icon-line-offset;
+    }
+
+    // vertical line
+    &::after {
+      top: @table-expand-icon-line-offset;
+      bottom: @table-expand-icon-line-offset;
+      width: @table-line-width;
+      transform: rotate(90deg);
+      inset-inline-start: @table-expand-icon-half-inner;
+    }
+
+    // Motion effect
+    &-collapsed::before {
+      transform: rotate(-180deg);
+    }
+
+    &-collapsed::after {
+      transform: rotate(0deg);
+    }
+
+    // spaced (no icon)
+    &-spaced {
+      &::before,
+      &::after {
+        display: none;
+        content: none;
+      }
+      background: transparent;
+      border: 0;
+      visibility: hidden;
+    }
+  }
+
+  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
+    margin-top: @table-expand-icon-margin-top;
+    margin-inline-end: @table-padding-xs;
+  }
+
+  tr.@{table-prefix-cls}-expanded-row {
+    &,
+    &:hover {
+      > th,
+      > td {
+        background: @table-expanded-row-bg;
+      }
+    }
+  }
+
+  .@{table-prefix-cls}-expanded-row-fixed {
+    position: relative;
+    margin: -@table-padding-vertical -@table-padding-horizontal;
+    padding: @table-padding-vertical @table-padding-horizontal;
+  }
+}

package/lib/table/style/filter.less

@@ -0,0 +1,34 @@
+@import './variables.less';
+
+// ============================================================
+// === filter.ts: genFilterStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-filter-column {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .@{table-prefix-cls}-filter-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-block: -@table-padding-xxs;
+    margin-inline: @table-padding-xxs calc(-@table-padding-horizontal / 2);
+    padding: 0 @table-padding-xxs;
+    color: @table-header-icon-color;
+    font-size: @table-font-size-sm;
+    border-radius: @table-border-radius;
+    cursor: pointer;
+    transition: all @table-motion-duration-slow;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+      background: @table-header-filter-active-bg;
+    }
+
+    &.active {
+      color: @table-color-primary;
+    }
+  }
+}

package/lib/table/style/fixed.less

@@ -1,88 +1,85 @@
-@import '../../style/themes/index.less';
-
-@table-prefix-cls: ~'@{ant-prefix}-table';
-@cell-cls: ~'@{table-prefix-cls}-cell';
-@fix-cell-cls: ~'@{table-prefix-cls}-cell-fix';
-
-.shadow-left-style() {
-    box-shadow: inset 10px 0 8px -8px @border-color-split;
-}
-
-.shadow-right-style() {
-    box-shadow: inset -10px 0 8px -8px @border-color-split;
-}
-
-.shared-shadow-style() {
-    position: absolute;
-    top: 0;
-    bottom: calc(-@border-width-base);
-    width: 30px;
-    transition: box-shadow @motion-duration-slow;
-    content: '';
-    pointer-events: none;
-}
-
-.@{table-prefix-cls}-wrapper {
-    .@{cell-cls}.@{fix-cell-cls} {
-        position: sticky;
-    }
-
-    .@{fix-cell-cls} {
-        z-index: calc(var(--z-offset-reverse) + @zindex-table-fixed);
-        background: @table-bg;
-
-        &:after {
-            .shared-shadow-style();
-        }
-
-        &-start:after {
-            left: 100%;
-        }
-
-        &-end:after {
-            right: 100%;
-        }
-
-        &-start-shadow-show:after {
-            .shadow-left-style();
-        }
-
-        &-end-shadow-show:after {
-            .shadow-right-style();
-        }
-    }
-
-    .@{table-prefix-cls}-container {
-        position: relative;
-
-        &:before,
-        &:after {
-            .shared-shadow-style();
-            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
-        }
-
-        &:before {
-            left: 0;
-        }
-
-        &:after {
-            right: 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 {
-        .shadow-left-style();
-    }
-
-    .@{table-prefix-cls}-fix-end-shadow-show .@{table-prefix-cls}-container:after {
-        .shadow-right-style();
-    }
-}
+@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

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

package/lib/table/style/index.less

@@ -1,150 +1,19 @@
-@import '../../style/themes/index.less';
-@import '~antd/es/style/mixins/index.less';
-
-@table-prefix-cls: ~'@{ant-prefix}-table';
-
-@table-expand-column-width: 48px;
-
-@import './bordered.less';
-@import './virtual.less';
-@import './sticky.less';
-@import './fixed.less';
-@import './selection.less';
-
-.@{table-prefix-cls}-wrapper {
-    clear: both;
-    max-width: 100%;
-    --rc-virtual-list-scrollbar-bg: @border-color-split;
-    .clearfix();
-
-    .@{table-prefix-cls} {
-        .reset-component();
-        font-size: @font-size-base;
-        border-radius: @border-radius-base @border-radius-base 0 0;
-        scrollbar-color: @table-sticky-scroll-bar-bg @border-color-split;
-    }
-
-    table {
-        width: 100%;
-        text-align: left;
-        border-radius: @border-radius-base @border-radius-base 0 0;
-        border-collapse: separate;
-        border-spacing: 0;
-    }
-
-    // ============================= Cell ==============================
-    .@{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 {
-        position: relative;
-        padding: @table-padding-vertical @table-padding-horizontal;
-        overflow-wrap: break-word;
-    }
-
-    // ============================ Title 表格标题 =============================
-    .@{table-prefix-cls}-title {
-        padding: @table-padding-vertical @table-padding-horizontal;
-    }
-
-    // ============================ Header 表头 ============================
-    .@{table-prefix-cls}-thead {
-        > tr > th,
-        > tr > td {
-            position: relative;
-            color: @table-header-color;
-            font-weight: 500;
-            text-align: start;
-            background: @table-header-bg;
-            border-bottom: @border-width-base @border-style-base @border-color-base;
-            transition: background @motion-duration-mid ease;
-
-            // 跨列单元格居中对齐
-            &[colspan]:not([colspan='1']) {
-                text-align: center;
-            }
-
-            &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(
-                    .@{table-prefix-cls}-row-expand-icon-cell
-                ):not([colspan])::before {
-                position: absolute;
-                top: 50%;
-                right: 0;
-                width: 1px;
-                height: 1.6em;
-                background-color: @border-color-base;
-                transform: translateY(-50%);
-                transition: background-color @motion-duration-mid;
-                content: '';
-            }
-        }
-
-        // 跨列表头去除底部边框（非最后一行）
-        > tr:not(:last-child) > th[colspan] {
-            border-bottom: 0;
-        }
-    }
-
-    // ============================ Body 表体 ============================
-    .@{table-prefix-cls}-tbody {
-        > tr {
-            > th,
-            > td {
-                transition: background @motion-duration-mid, border-color @motion-duration-mid;
-                border-bottom: @border-width-base @border-style-base @border-color-base;
-
-                // ========================= Nest Table 嵌套表格 ===========================
-                > .@{table-prefix-cls}-wrapper:only-child,
-                > .@{table-prefix-cls}-expanded-row-fixed
-                    > .@{table-prefix-cls}-wrapper:only-child {
-                    .@{table-prefix-cls} {
-                        margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical
-                            (@table-expand-column-width - @table-padding-horizontal);
-
-                        .@{table-prefix-cls}-tbody > tr:last-child > td {
-                            border-bottom-width: 0;
-                            &:first-child,
-                            &:last-child {
-                                border-radius: 0;
-                            }
-                        }
-                    }
-                }
-            }
-
-            // 表体中的表头单元格样式（特殊场景）
-            > th {
-                position: relative;
-                color: @table-header-color;
-                font-weight: 500;
-                text-align: left;
-                background: @table-header-bg;
-                border-bottom: @border-width-base @border-style-base @table-border-color;
-                transition: background 0.3s ease;
-            }
-
-            // 测量单元格样式
-            & > .@{table-prefix-cls}-measure-cell {
-                padding-top: 0 !important;
-                padding-bottom: 0 !important;
-                border-top: 0 !important;
-                border-bottom: 0 !important;
-
-                .@{table-prefix-cls}-measure-cell-content {
-                    height: 0;
-                    overflow: hidden;
-                    pointer-events: none;
-                }
-            }
-        }
-    }
-
-    // ============================ Footer 表脚 ============================
-    .@{table-prefix-cls}-footer {
-        padding: @table-padding-vertical @table-padding-horizontal;
-        color: @table-footer-color;
-        background: @table-footer-bg;
-    }
-}
+@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;
+}