@dtjoy/dt-design 1.0.5 → 1.0.7

package/lib/table/style/fixed.less

@@ -0,0 +1,88 @@
+@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();
+    }
+}

package/lib/table/style/index.js

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

package/lib/table/style/index.less

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

package/lib/table/style/selection.less

@@ -0,0 +1,90 @@
+@import '../../style/themes/index.less';
+@import '~antd/es/style/mixins/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@table-expand-icon-size: 17px;
+
+@{table-prefix-cls}-wrapper {
+  @{table-prefix-cls}-selection-col {
+    width: @table-selection-column-width;
+
+    &.@{table-prefix-cls}-selection-col-with-dropdown {
+      width: calc(@table-selection-column-width + @table-expand-icon-size + (@padding-md / 4));
+    }
+  }
+
+  @{table-prefix-cls}-bordered @{table-prefix-cls}-selection-col {
+    width: calc(@table-selection-column-width + (@padding-xs * 2));
+
+    &.@{table-prefix-cls}-selection-col-with-dropdown {
+      width: calc(
+        @table-selection-column-width + @table-expand-icon-size + (@padding-md / 4) +
+          (@padding-xs * 2)
+      );
+    }
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column,
+  table tr td.@{table-prefix-cls}-selection-column,
+  @{table-prefix-cls}-selection-column {
+    padding-right: @padding-xs;
+    padding-left: @padding-xs;
+    text-align: center;
+
+    .@{ant-prefix}-radio-wrapper {
+      margin-right: 0;
+    }
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column.@{table-prefix-cls}-cell-fix-left {
+    z-index: calc(@zindex-table-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 @motion-duration-slow;
+    margin-left: 100%;
+    padding-left: calc(@table-padding-horizontal / 4);
+
+    .@{iconfont-css-prefix} {
+      color: @table-header-bg;
+      font-size: @table-expand-icon-size;
+      vertical-align: baseline;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+
+  @{table-prefix-cls}-tbody {
+    @{table-prefix-cls}-row {
+      &.@{table-prefix-cls}-row-selected {
+        > @{table-prefix-cls}-cell {
+          background: @table-selected-row-bg;
+
+          &.@{table-prefix-cls}-cell-row-hover {
+            background: @table-selected-row-hover-bg;
+          }
+        }
+      }
+
+      > @{table-prefix-cls}-cell-row-hover {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+}

package/lib/table/style/sticky.less

@@ -0,0 +1,55 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+@table-scroll-thumb-bg: #c1c1c1;
+@table-scroll-thumb-bg-hover: #a8a8a8;
+@table-scroll-thumb-size: 6px;
+@table-scroll-bg: #fafafa;
+@sticky-scroll-bar-border-radius: @border-radius-base;
+@opacity-loading: 0.6;
+
+@motion-duration-slow: 0.3s;
+
+.@{table-prefix-cls}-wrapper {
+    .@{table-prefix-cls}-sticky {
+        &-holder {
+            position: sticky;
+
+            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
+            background: @background-color-base;
+        }
+
+        &-scroll {
+            position: sticky;
+            bottom: 0;
+
+            height: @table-scroll-thumb-size !important;
+            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
+            display: flex;
+            align-items: center;
+            background: @table-scroll-bg;
+            border-top: @border-width-base @border-style-base @border-color-base;
+            opacity: @opacity-loading;
+
+            &:hover {
+                transform-origin: center bottom;
+            }
+
+            &-bar {
+                height: @table-scroll-thumb-size;
+                background-color: @table-scroll-thumb-bg;
+                border-radius: @sticky-scroll-bar-border-radius;
+
+                transition: all @motion-duration-slow, transform 0s;
+                position: absolute;
+                bottom: 0;
+
+                &:hover,
+                &-active {
+                    background-color: @table-scroll-thumb-bg-hover;
+                }
+            }
+        }
+    }
+}

package/lib/table/style/virtual.less

@@ -0,0 +1,65 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+.@{table-prefix-cls}-wrapper {
+    .@{table-prefix-cls}-tbody-virtual {
+        .@{table-prefix-cls}-tbody-virtual-holder-inner {
+            & > .@{table-prefix-cls}-row,
+            & > div:not(.@{table-prefix-cls}-row) > .@{table-prefix-cls}-row {
+                display: flex;
+                box-sizing: border-box;
+                width: 100%;
+            }
+        }
+
+        .@{table-prefix-cls}-cell {
+            border-bottom: @border-width-base @border-style-base @border-color-base;
+            transition: background 0.2s;
+        }
+
+        .@{table-prefix-cls}-expanded-row {
+            .@{table-prefix-cls}-expanded-row-cell.@{table-prefix-cls}-expanded-row-cell-fixed {
+                position: sticky;
+                left: 0;
+                overflow: hidden;
+
+                width: calc(var(--virtual-width) - @border-width-base);
+                border-right: none;
+            }
+        }
+    }
+
+    .@{table-prefix-cls}-bordered {
+        .@{table-prefix-cls}-tbody-virtual {
+            &:after {
+                content: '';
+                left: 0;
+                right: 0;
+                bottom: 0;
+                border-bottom: @border-width-base @border-style-base @border-color-base;
+                position: absolute;
+            }
+
+            .@{table-prefix-cls}-cell {
+                border-right: @border-width-base @border-style-base @border-color-base;
+
+                &.@{table-prefix-cls}-cell-fix-right-first:before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: calc(-@border-width-base);
+                    border-left: @border-width-base @border-style-base @border-color-base;
+                }
+            }
+        }
+
+        &.@{table-prefix-cls}-virtual {
+            .@{table-prefix-cls}-placeholder .@{table-prefix-cls}-cell {
+                border-right: @border-width-base @border-style-base @border-color-base;
+                border-bottom: @border-width-base @border-style-base @border-color-base;
+            }
+        }
+    }
+}

package/lib/table/util.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnKey = void 0;
+exports.getColumnPos = getColumnPos;
+exports.safeColumnTitle = exports.renderColumnTitle = void 0;
+const getColumnKey = (column, defaultKey) => {
+  if ('key' in column && column.key !== undefined && column.key !== null) {
+    return column.key;
+  }
+  if (column.dataIndex) {
+    return Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex;
+  }
+  return defaultKey;
+};
+exports.getColumnKey = getColumnKey;
+function getColumnPos(index, pos) {
+  return pos ? `${pos}-${index}` : `${index}`;
+}
+const renderColumnTitle = (title, props) => {
+  if (typeof title === 'function') {
+    return title(props);
+  }
+  return title;
+};
+
+/**
+ * Safe get column title
+ *
+ * Should filter [object Object]
+ *
+ * @param title
+ */
+exports.renderColumnTitle = renderColumnTitle;
+const safeColumnTitle = (title, props) => {
+  const res = renderColumnTitle(title, props);
+  if (Object.prototype.toString.call(res) === '[object Object]') {
+    return '';
+  }
+  return res;
+};
+exports.safeColumnTitle = safeColumnTitle;