@dtjoy/dt-design 1.1.1 → 1.1.5

package/lib/table/shared/utils/legacyUtil.js

@@ -0,0 +1,38 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INTERNAL_COL_DEFINE = void 0;
+exports.getExpandableProps = getExpandableProps;
+var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
+var _excluded = ["expandable"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var INTERNAL_COL_DEFINE = exports.INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';
+function getExpandableProps(props) {
+  var expandable = props.expandable,
+    legacyExpandableConfig = _objectWithoutProperties(props, _excluded);
+  var config;
+  if ('expandable' in props) {
+    config = _objectSpread(_objectSpread({}, legacyExpandableConfig), expandable);
+  } else {
+    if (process.env.NODE_ENV !== 'production' && ['indentSize', 'expandedRowKeys', 'defaultExpandedRowKeys', 'defaultExpandAllRows', 'expandedRowRender', 'expandRowByClick', 'expandIcon', 'onExpand', 'onExpandedRowsChange', 'expandedRowClassName', 'expandIconColumnIndex', 'showExpandColumn', 'title'].some(function (prop) {
+      return prop in props;
+    })) {
+      (0, _warning.default)(false, 'expanded related props have been moved into `expandable`.');
+    }
+    config = legacyExpandableConfig;
+  }
+  if (config.showExpandColumn === false) {
+    config.expandIconColumnIndex = -1;
+  }
+  return config;
+}

package/lib/table/shared/utils/util.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnKey = void 0;
+exports.getColumnPos = getColumnPos;
+exports.safeColumnTitle = exports.renderColumnTitle = void 0;
+var _is = require("../../../_util/is");
+var getColumnKey = exports.getColumnKey = function getColumnKey(column, defaultKey) {
+  if ('key' in column && (0, _is.isNonNullable)(column.key)) {
+    return column.key;
+  }
+  if (column.dataIndex) {
+    return Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : column.dataIndex;
+  }
+  return defaultKey;
+};
+function getColumnPos(index, pos) {
+  return pos ? "".concat(pos, "-").concat(index) : "".concat(index);
+}
+var renderColumnTitle = exports.renderColumnTitle = function renderColumnTitle(title, props) {
+  if ((0, _is.isFunction)(title)) {
+    return title(props);
+  }
+  return title;
+};
+var safeColumnTitle = exports.safeColumnTitle = function safeColumnTitle(title, props) {
+  var result = renderColumnTitle(title, props);
+  if ((0, _is.isPlainObject)(result) || Array.isArray(result)) {
+    return '';
+  }
+  return result;
+};

package/lib/table/shared/utils/valueUtil.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnsKey = getColumnsKey;
+exports.validNumberValue = validNumberValue;
+exports.validateValue = validateValue;
+var INTERNAL_KEY_PREFIX = 'RC_TABLE_KEY';
+function toArray(arr) {
+  if (arr === undefined || arr === null) {
+    return [];
+  }
+  return Array.isArray(arr) ? arr : [arr];
+}
+function getColumnsKey(columns) {
+  var columnKeys = [];
+  var keys = {};
+  columns.forEach(function (column) {
+    var _ref = column || {},
+      key = _ref.key,
+      dataIndex = _ref.dataIndex;
+    var mergedKey = key || toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX;
+    while (keys[mergedKey]) {
+      mergedKey = "".concat(mergedKey, "_next");
+    }
+    keys[mergedKey] = true;
+    columnKeys.push(mergedKey);
+  });
+  return columnKeys;
+}
+function validateValue(val) {
+  return val !== null && val !== undefined;
+}
+function validNumberValue(value) {
+  return typeof value === 'number' && !Number.isNaN(value);
+}

package/lib/table/style/base.less

@@ -0,0 +1,164 @@
+@import './variables.less';
+
+// ============================================================
+// === index.ts: genTableStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  clear: both;
+  max-width: 100%;
+
+  --rc-virtual-list-scrollbar-bg: @table-scroll-bg;
+  --@{table-prefix-cls}-row-height: unit(@table-row-height, px);
+
+  &.@{table-prefix-cls}-middle {
+    --@{table-prefix-cls}-row-height: unit(@table-row-height-middle, px);
+  }
+
+  &.@{table-prefix-cls}-small {
+    --@{table-prefix-cls}-row-height: unit(@table-row-height-small, px);
+  }
+
+  // clearFix
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  // .dt-table (resetComponent)
+  .@{table-prefix-cls} {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: @table-color-text;
+    font-size: @table-font-size;
+    font-family: inherit;
+    line-height: 1.57142857;
+    list-style: none;
+
+    background: @table-bg;
+    border-radius: @table-radius @table-radius 0 0;
+    scrollbar-color: @table-scroll-thumb-bg @table-scroll-bg;
+  }
+
+  // table element
+  table {
+    width: 100%;
+    text-align: start;
+    border-radius: @table-radius @table-radius 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-text-color;
+      font-weight: @table-font-weight-strong;
+      text-align: start;
+      background: @table-header-bg;
+      border-bottom: @table-border;
+      transition: background-color @table-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%;
+        inset-inline-end: 0;
+        width: 1px;
+        height: 1.6em;
+        background-color: @table-header-cell-split-color;
+        transform: translateY(-50%);
+        transition: background-color @table-motion-duration-mid;
+        content: '';
+      }
+    }
+
+    > tr:not(:last-child) > th[colspan] {
+      border-bottom: 0;
+    }
+  }
+
+  // ============================ Body ============================
+  .@{table-prefix-cls}-tbody {
+    > tr {
+      > th,
+      > td {
+        border-bottom: @table-border;
+        transition: background-color @table-motion-duration-mid,
+          border-color @table-motion-duration-mid;
+      }
+
+      > th {
+        position: relative;
+        color: @table-header-text-color;
+        font-weight: @table-font-weight-strong;
+        text-align: start;
+        background: @table-header-bg;
+        border-bottom: @table-border;
+        transition: background-color @table-motion-duration-mid ease;
+      }
+
+      // measure cell styles
+      > .@{table-prefix-cls}-measure-cell {
+        padding-block: 0 !important;
+        border-block: 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-text-color;
+    background: @table-footer-bg;
+  }
+
+  // Header / Body scroll wrappers
+  .@{table-prefix-cls}-header {
+    overflow: hidden;
+    background: @table-header-bg;
+  }
+
+  .@{table-prefix-cls}-body {
+    overflow: auto;
+  }
+
+  .@{table-prefix-cls}-content {
+    overflow: auto;
+  }
+}

package/lib/table/style/bordered.less

@@ -1,141 +1,83 @@
-@import '../../style/themes/index.less';
-
-@table-prefix-cls: ~'@{ant-prefix}-table';
-
-.@{table-prefix-cls}-wrapper {
-  .@{table-prefix-cls}.@{table-prefix-cls}-bordered {
-    // ============================ Title 标题 =============================
-    > .@{table-prefix-cls}-title {
-      border: @border-width-base @border-style-base @border-color-base;
-      border-bottom: 0;
-    }
-
-    // ============================ Content 内容容器 ============================
-    > .@{table-prefix-cls}-container {
-      border-left: @border-width-base @border-style-base @border-color-base;
-      border-top: @border-width-base @border-style-base @border-color-base;
-
-      > .@{table-prefix-cls}-content,
-      > .@{table-prefix-cls}-header,
-      > .@{table-prefix-cls}-body,
-      > .@{table-prefix-cls}-summary {
-        > table {
-          // ============================= Cell 单元格 =============================
-          > thead > tr > th,
-          > thead > tr > td,
-          > tbody > tr > th,
-          > tbody > tr > td,
-          > tfoot > tr > th,
-          > tfoot > tr > td {
-            border-right: @border-width-base @border-style-base @border-color-base;
-          }
-
-          // ============================ Header 表头 ============================
-          > thead {
-            > tr:not(:last-child) > th {
-              border-bottom: @border-width-base @border-style-base @border-color-base;
-            }
-
-            > tr > th::before {
-              background-color: transparent !important;
-            }
-          }
-
-          > thead > tr,
-          > tbody > tr,
-          > tfoot > tr {
-            > .@{table-prefix-cls}-cell-fix-right-first::after {
-              border-right: @border-width-base @border-style-base @border-color-base;
-            }
-          }
-
-          // ========================== Expandable 展开行 ==========================
-          > tbody > tr > th,
-          > tbody > tr > td {
-            > .@{table-prefix-cls}-expanded-row-fixed {
-              // margin: calc(-@table-cell-padding-vertical)
-              //     calc(-(@table-cell-padding-horizontal + @border-width-base));
-              &::after {
-                position: absolute;
-                top: 0;
-                right: @border-width-base;
-                bottom: 0;
-                border-right: @border-width-base @border-style-base @border-color-base;
-                content: '';
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // ============================ Scroll 水平滚动 ============================
-    &.@{table-prefix-cls}-scroll-horizontal {
-      > .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
-        > table > tbody {
-          > tr.@{table-prefix-cls}-expanded-row,
-          > tr.@{table-prefix-cls}-placeholder {
-            > th,
-            > td {
-              border-right: 0;
-            }
-          }
-        }
-      }
-    }
-
-    // ============================ Size 尺寸样式（middle/small） ============================
-    &.@{table-prefix-cls}-middle {
-      > .@{table-prefix-cls}-container {
-        > .@{table-prefix-cls}-content,
-        > .@{table-prefix-cls}-body {
-          > table > tbody > tr > th,
-          > table > tbody > tr > td {
-            > .@{table-prefix-cls}-expanded-row-fixed {
-              // margin: calc(-@table-cell-padding-vertical-middle)
-              //     calc(-(@table-cell-padding-horizontal-middle + @border-width-base));
-            }
-          }
-        }
-      }
-    }
-
-    // small尺寸（对应原getSizeBorderStyle('small')）
-    &.@{table-prefix-cls}-small {
-      > .@{table-prefix-cls}-container {
-        > .@{table-prefix-cls}-content,
-        > .@{table-prefix-cls}-body {
-          > table > tbody > tr > th,
-          > table > tbody > tr > td {
-            > .@{table-prefix-cls}-expanded-row-fixed {
-              // margin: calc(-@table-cell-padding-vertical-small)
-              //     calc(-(@table-cell-padding-horizontal-small + @border-width-base));
-            }
-          }
-        }
-      }
-    }
-
-    // ============================ Footer 页脚 ============================
-    > .@{table-prefix-cls}-footer {
-      border: @border-width-base @border-style-base @border-color-base;
-      border-top: 0;
-    }
-  }
-
-  // ============================ Nested 嵌套表格 ============================
-  .@{table-prefix-cls}-cell {
-    > .@{table-prefix-cls}-container:first-child {
-      border-top: 0;
-    }
-
-    &-scrollbar:not([rowspan]) {
-      // box-shadow: 0 @border-width-base 0 @border-width-base @table-header-background;
-    }
-  }
-
-  // 边框表格滚动条右侧边框
-  .@{table-prefix-cls}-bordered .@{table-prefix-cls}-cell-scrollbar {
-    border-right: @border-width-base @border-style-base @border-color-base;
-  }
-}
+@import './variables.less';
+
+// ============================================================
+// === bordered.ts: genBorderedStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}.@{table-prefix-cls}-bordered {
+    // ============================ Title =============================
+    > .@{table-prefix-cls}-title {
+      border: @table-border;
+      border-bottom: 0;
+    }
+
+    // ============================ Content ============================
+    > .@{table-prefix-cls}-container {
+      border-inline-start: @table-border;
+      border-top: @table-border;
+
+      > .@{table-prefix-cls}-content,
+      > .@{table-prefix-cls}-header,
+      > .@{table-prefix-cls}-body,
+      > .@{table-prefix-cls}-summary {
+        > table {
+          > thead > tr > th,
+          > thead > tr > td,
+          > tbody > tr > th,
+          > tbody > tr > td,
+          > tfoot > tr > th,
+          > tfoot > tr > td {
+            border-inline-end: @table-border;
+          }
+
+          > thead {
+            > tr:not(:last-child) > th {
+              border-bottom: @table-border;
+            }
+
+            > tr > th::before {
+              background-color: transparent !important;
+            }
+          }
+
+          // Fixed right should provides additional border
+          > thead > tr,
+          > tbody > tr,
+          > tfoot > tr {
+            > .@{table-prefix-cls}-cell-fix-right-first:not(.@{table-prefix-cls}-cell-fix-right-last)::after {
+              border-inline-end: @table-border;
+            }
+          }
+        }
+      }
+    }
+
+    // ============================ Scroll ============================
+    &.@{table-prefix-cls}-scroll-horizontal {
+      > .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
+        > table > tbody {
+          > tr.@{table-prefix-cls}-expanded-row,
+          > tr.@{table-prefix-cls}-placeholder {
+            > th,
+            > td {
+              border-inline-end: 0;
+            }
+          }
+        }
+      }
+    }
+
+    // ============================ Footer ============================
+    > .@{table-prefix-cls}-footer {
+      border: @table-border;
+      border-top: 0;
+    }
+  }
+
+  // ============================ Nested ============================
+  .@{table-prefix-cls}-cell {
+    .@{table-prefix-cls}-container:first-child {
+      border-top: 0;
+    }
+  }
+}

package/lib/table/style/editable.less

@@ -0,0 +1,50 @@
+@import './variables.less';
+
+// ============================================================
+// === Editable Cell ===
+// ============================================================
+
+.@{table-prefix-cls}-editable-cell {
+  position: relative;
+  width: 100%;
+}
+
+.@{table-prefix-cls}-editable-cell-error {
+  .ant-input,
+  .ant-input-number,
+  .ant-select-selector,
+  .ant-picker {
+    border-color: #ff4d4f;
+  }
+}
+
+// Popover 挂载到表格滚动容器内，随表格滚动
+.@{table-prefix-cls}-editable-error-popover {
+  .ant-popover-inner {
+    padding: 0;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 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);
+  }
+
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+}
+
+.@{table-prefix-cls}-editable-error-content {
+  min-width: 100px;
+  padding: 9px 14px;
+}
+
+.@{table-prefix-cls}-editable-error-item {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  color: #ff4d4f;
+  font-weight: 500;
+  font-size: 13px;
+  white-space: nowrap;
+}

package/lib/table/style/ellipsis.less

@@ -0,0 +1,33 @@
+@import './variables.less';
+
+// ============================================================
+// === ellipsis.ts: genEllipsisStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-cell-ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+
+    // Fixed first or last should special process
+    &.@{table-prefix-cls}-cell-fix-start-shadow,
+    &.@{table-prefix-cls}-cell-fix-end-shadow {
+      overflow: visible;
+
+      .@{table-prefix-cls}-cell-content {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{table-prefix-cls}-column-title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+  }
+}

package/lib/table/style/empty.less

@@ -0,0 +1,16 @@
+@import './variables.less';
+
+// ============================================================
+// === empty.ts: genEmptyStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-tbody > tr.@{table-prefix-cls}-placeholder {
+    color: @table-color-text-disabled;
+    text-align: center;
+
+    &:hover > th,
+    &:hover > td {
+      background: @table-color-bg-container;
+    }
+  }
+}