@dtjoy/dt-design 1.1.2 → 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

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

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;
+    }
+  }
+}