@dtjoy/dt-design 1.0.6 → 1.0.8

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.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { AnyObject } from '../_util/type';
+import type { ColumnTitle, ColumnTitleProps, ColumnType, Key } from './interface';
+export declare const getColumnKey: <RecordType extends AnyObject = AnyObject>(column: ColumnType<RecordType>, defaultKey: string) => Key;
+export declare function getColumnPos(index: number, pos?: string): string;
+export declare const renderColumnTitle: <RecordType extends AnyObject = AnyObject>(title: ColumnTitle<RecordType>, props: ColumnTitleProps<RecordType>) => import("react").ReactNode;
+/**
+ * Safe get column title
+ *
+ * Should filter [object Object]
+ *
+ * @param title
+ */
+export declare const safeColumnTitle: <RecordType extends AnyObject = AnyObject>(title: ColumnTitle<RecordType>, props: ColumnTitleProps<RecordType>) => import("react").ReactNode;

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;

package/package.json

@@ -1,85 +1,93 @@
 {
   "name": "@dtjoy/dt-design",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "react-component",
+  "author": {
+    "name": "夕颜",
+    "email": "wx-zhaog@dtjoy.com",
+    "url": "https://github.com/ZhaoFxxkSky/dt-design"
+  },
+  "license": "MIT",
   "repository": "https://github.com/ZhaoFxxkSky/dt-design",
+  "keywords": [
+    "react",
+    "react-component",
+    "ui-library",
+    "typescript",
+    "ant-design"
+  ],
+  "sideEffects": [
+    "esm/**/style/*",
+    "lib/**/style/*",
+    "**/style/*"
+  ],
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "esm/index.d.ts",
+  "files": [
+    "esm",
+    "lib"
+  ],
   "scripts": {
     "start": "npm run dev",
     "dev": "dumi dev",
     "build": "father build",
     "build:watch": "father dev",
+    "format": "biome format --write .",
+    "lint:script": "eslint . --cache",
+    "lint:biome": "biome lint",
+    "biome": "biome check --write",
     "test": "jest",
     "docs:build": "dumi build",
     "prepare": "husky install && dumi setup",
     "doctor": "father doctor",
-    "lint": "npm run lint:es && npm run lint:css",
-    "lint:es-fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\" --fix",
-    "lint:css-fix": "stylelint \"src/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\" --fix",
-    "lint:css": "stylelint \"src/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\"",
-    "lint:es": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "npm run tsc && npm run lint:script && npm run lint:biome",
+    "lint:es-fix": "eslint \"components/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:css-fix": "stylelint \"components/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\" --fix",
+    "lint:css": "stylelint \"components/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\"",
+    "lint:es": "eslint \"components/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\"",
     "prepublishOnly": "npm run build",
     "deploy": "npm run docs:build && gh-pages -d docs-dist",
-    "release": "./scripts/release.sh"
+    "release": "./scripts/release.sh",
+    "tsc": "tsc --noEmit",
+    "tsc:old": "tsc --noEmit -p tsconfig-old-react.json"
   },
-  "author": {
-    "name": "夕颜",
-    "email": "wx-zhaog@dtjoy.com",
-    "url": "https://github.com/ZhaoFxxkSky/dt-design"
-  },
-  "license": "MIT",
-  "files": [
-    "lib",
-    "esm"
-  ],
-  "sideEffects": [
-    "esm/**/style/*",
-    "lib/**/style/*",
-    "**/style/*"
-  ],
-  "keywords": [
-    "react",
-    "react-component",
-    "ui-library",
-    "typescript",
-    "ant-design"
-  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
     ]
   },
-  "lint-staged": {
-    "*.{md,json}": [
-      "prettier --write --no-error-on-unmatched-pattern"
-    ],
-    "*.{css,scss}": [
-      "stylelint --fix"
-    ],
-    "*.{js,jsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{ts,tsx}": [
-      "eslint --fix",
-      "prettier --parser=typescript --write"
-
-    ]
-  },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "antd": "^4.x",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0",
-    "antd": "^4.x"
+    "react-dom": ">=16.9.0"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.8.3",
+    "@dtinsight/dt-utils": "^1.3.1",
+    "@rc-component/table": "^1.9.1",
+    "@rc-component/util": "^1.7.0",
+    "clsx": "^2.1.1",
+    "immer": "~10.1.1",
+    "lodash-es": "^4.17.21",
+    "rc-drawer": "~5.1.0",
+    "rc-resize-observer": "^1.4.3",
+    "rc-util": "^5.44.4",
+    "rc-virtual-list": "^3.4.13"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^6.6.1",
+    "@biomejs/biome": "^2.3.10",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@eslint-react/eslint-plugin": "^2.5.0",
     "@faker-js/faker": "^7.6.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@npmcli/run-script": "^10.0.3",
+    "@prettier/sync": "^0.6.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -88,6 +96,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.3.1",
     "@types/react": "^18.0.0",
+    "@types/react-dom": "18.0.0",
     "@types/react-resizable": "^3.0.8",
     "@types/react-syntax-highlighter": "~15.5.13",
     "@types/shortid": "^0.0.31",
@@ -96,10 +105,15 @@
     "ant-design-testing": "^1.1.0",
     "babel-plugin-import": "^1.13.8",
     "cz-conventional-changelog": "^3.3.0",
-    "dumi": "^2.2.12",
-    "eslint": "^8.23.0",
-    "father": "~4.1.0",
-    "gh-pages": "^4.0.0",
+    "dumi": "~2.4.21",
+    "eslint": "^9.39.2",
+    "eslint-plugin-compat": "^6.0.2",
+    "eslint-plugin-jest": "^29.12.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "father": "4.6.13",
+    "gh-pages": "^6.3.0",
     "husky": "^8.0.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
@@ -112,22 +126,15 @@
     "react-test-renderer": "^18.2.0",
     "resize-observer-polyfill": "^1.5.1",
     "standard-version": "^9.5.0",
-    "stylelint": "^14.9.1",
+    "stylelint": "^14.9.0",
+    "stylelint-config-prettier": "^9.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
+    "stylelint-order": "^5.0.0",
     "ts-jest": "^29.0.3",
-    "typescript": "~4.5.2"
+    "typescript": "~5.9.3"
   },
-  "dependencies": {
-    "@ant-design/icons": "^4.8.3",
-    "@dtinsight/dt-utils": "^1.3.1",
-    "rc-util": "^5.44.4",
-    "classnames": "^2.2.6",
-    "immer": "~10.1.1",
-    "lodash-es": "^4.17.21",
-    "rc-drawer": "~5.1.0",
-    "rc-resize-observer": "^1.4.3",
-    "rc-virtual-list": "^3.4.13"
-  },
-
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
@@ -135,5 +142,14 @@
   },
   "resolutions": {
     "rc-motion": "2.6.2"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,css,mjs,json}": [
+      "biome check --write --no-errors-on-unmatched",
+      "eslint"
+    ],
+    "*.{md,yml}": [
+      "prettier --ignore-unknown --write"
+    ]
   }
 }

package/esm/_util/convertToTooltipProps.d.ts

@@ -1,4 +0,0 @@
-import type { ReactNode } from 'react';
-import { TooltipProps } from 'antd';
-declare const convertToTooltipProps: <P extends TooltipProps>(tooltip: P | ReactNode) => P | null;
-export default convertToTooltipProps;

package/esm/_util/convertToTooltipProps.js

@@ -1,15 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import { isValidElement } from 'react';
-import isNonNullable from "./isNonNullable";
-var convertToTooltipProps = function convertToTooltipProps(tooltip) {
-  if (!isNonNullable(tooltip)) {
-    return null;
-  }
-  if (_typeof(tooltip) === 'object' && ! /*#__PURE__*/isValidElement(tooltip)) {
-    return tooltip;
-  }
-  return {
-    title: tooltip
-  };
-};
-export default convertToTooltipProps;

package/esm/_util/hooks/useZIndex.d.ts

@@ -1,8 +0,0 @@
-export declare type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour' | 'FloatButton';
-export declare type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu' | 'ImagePreview';
-export declare const CONTAINER_MAX_OFFSET: number;
-export declare const containerBaseZIndexOffset: Record<ZIndexContainer, number>;
-export declare const consumerBaseZIndexOffset: Record<ZIndexConsumer, number>;
-declare type ReturnResult = [zIndex: number | undefined, contextZIndex: number];
-export declare const useZIndex: (componentType: ZIndexContainer | ZIndexConsumer, customZIndex?: number) => ReturnResult;
-export {};