@dtjoy/dt-design 1.0.5 → 1.0.7

package/esm/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/esm/table/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/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/esm/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/esm/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/esm/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/esm/table/util.js

@@ -0,0 +1,33 @@
+export var getColumnKey = function 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;
+};
+export function getColumnPos(index, pos) {
+  return pos ? "".concat(pos, "-").concat(index) : "".concat(index);
+}
+export var renderColumnTitle = function renderColumnTitle(title, props) {
+  if (typeof title === 'function') {
+    return title(props);
+  }
+  return title;
+};
+
+/**
+ * Safe get column title
+ *
+ * Should filter [object Object]
+ *
+ * @param title
+ */
+export var safeColumnTitle = function safeColumnTitle(title, props) {
+  var res = renderColumnTitle(title, props);
+  if (Object.prototype.toString.call(res) === '[object Object]') {
+    return '';
+  }
+  return res;
+};

package/lib/_util/easings.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.easeInOutCubic = easeInOutCubic;
+function easeInOutCubic(t, b, c, d) {
+  const cc = c - b;
+  t /= d / 2;
+  if (t < 1) {
+    return cc / 2 * t * t * t + b;
+  }
+  // biome-ignore lint: it is a common easing function
+  return cc / 2 * ((t -= 2) * t * t + 2) + b;
+}

package/lib/_util/extendsObject.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function mergeProps(...items) {
+  const ret = {};
+  items.forEach(item => {
+    if (item) {
+      Object.keys(item).forEach(key => {
+        if (item[key] !== undefined) {
+          ret[key] = item[key];
+        }
+      });
+    }
+  });
+  return ret;
+}
+var _default = exports.default = mergeProps;

package/lib/_util/getScroll.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.isWindow = isWindow;
+var _isNonNullable = _interopRequireDefault(require("./isNonNullable"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function isWindow(obj) {
+  return (0, _isNonNullable.default)(obj) && obj === obj.window;
+}
+const getScroll = target => {
+  if (typeof window === 'undefined') {
+    /* istanbul ignore next */
+    return 0;
+  }
+  let result = 0;
+  if (isWindow(target)) {
+    result = target.pageYOffset;
+  } else if (target instanceof Document) {
+    result = target.documentElement.scrollTop;
+  } else if (target instanceof HTMLElement) {
+    result = target.scrollTop;
+  } else if (target) {
+    // According to the type inference, the `target` is `never` type.
+    // Since we configured the loose mode type checking, and supports mocking the target with such shape below::
+    //    `{ documentElement: { scrollLeft: 200, scrollTop: 400 } }`,
+    //    the program may falls into this branch.
+    // Check the corresponding tests for details. Don't sure what is the real scenario this happens.
+    /* biome-ignore lint/complexity/useLiteralKeys: target is a never type */ /* eslint-disable-next-line dot-notation */
+    result = target['scrollTop'];
+  }
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = (target.ownerDocument ?? target).documentElement?.scrollTop;
+  }
+  return result;
+};
+var _default = exports.default = getScroll;

package/lib/_util/hooks/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _useForceUpdate = require("./useForceUpdate");
+Object.keys(_useForceUpdate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useForceUpdate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useForceUpdate[key];
+    }
+  });
+});
 var _useOrientation = require("./useOrientation");
 Object.keys(_useOrientation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -13,4 +24,26 @@ Object.keys(_useOrientation).forEach(function (key) {
       return _useOrientation[key];
     }
   });
+});
+var _useProxyImperativeHandle = require("./useProxyImperativeHandle");
+Object.keys(_useProxyImperativeHandle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useProxyImperativeHandle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useProxyImperativeHandle[key];
+    }
+  });
+});
+var _useSyncState = require("./useSyncState");
+Object.keys(_useSyncState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSyncState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSyncState[key];
+    }
+  });
 });

package/lib/_util/hooks/useForceUpdate.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useForceUpdate = () => {
+  return _react.default.useReducer(ori => ori + 1, 0);
+};
+exports.useForceUpdate = useForceUpdate;

package/lib/_util/hooks/useProxyImperativeHandle.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProxyImperativeHandle = void 0;
+var _react = require("react");
+const fillProxy = (element, handler) => {
+  element._dtProxy = element._dtProxy || {};
+  Object.keys(handler).forEach(key => {
+    if (!(key in element._dtProxy)) {
+      const ori = element[key];
+      element._dtProxy[key] = ori;
+      element[key] = handler[key];
+    }
+  });
+  return element;
+};
+const useProxyImperativeHandle = (ref, init) => {
+  return (0, _react.useImperativeHandle)(ref, () => {
+    const refObj = init();
+    const {
+      nativeElement
+    } = refObj;
+    if (typeof Proxy !== 'undefined') {
+      return new Proxy(nativeElement, {
+        get(obj, prop) {
+          if (refObj[prop]) {
+            return refObj[prop];
+          }
+          return Reflect.get(obj, prop);
+        }
+      });
+    }
+
+    // Fallback of IE
+    return fillProxy(nativeElement, refObj);
+  });
+};
+exports.useProxyImperativeHandle = useProxyImperativeHandle;

package/lib/_util/hooks/useSyncState.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSyncState = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useForceUpdate = require("./useForceUpdate");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useSyncState = initialValue => {
+  const ref = React.useRef(initialValue);
+  const [, forceUpdate] = (0, _useForceUpdate.useForceUpdate)();
+  return [() => ref.current, newValue => {
+    ref.current = newValue;
+    forceUpdate();
+  }];
+};
+exports.useSyncState = useSyncState;