@dtjoy/dt-design 1.1.1 → 1.1.5

package/lib/table/style/rtl.less

@@ -0,0 +1,52 @@
+@import './variables.less';
+
+// ============================================================
+// === rtl.ts: genRtlStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper-rtl {
+  direction: rtl;
+
+  table {
+    direction: rtl;
+  }
+
+  .@{table-prefix-cls}-row-expand-icon {
+    float: right;
+
+    &::after {
+      transform: rotate(-90deg);
+    }
+
+    &-collapsed::before {
+      transform: rotate(180deg);
+    }
+
+    &-collapsed::after {
+      transform: rotate(0deg);
+    }
+  }
+
+  .@{table-prefix-cls}-cell-fix {
+    &-start-shadow-show::after {
+      box-shadow: inset -10px 0 8px -8px @table-color-split;
+    }
+
+    &-end-shadow-show::after {
+      box-shadow: inset 10px 0 8px -8px @table-color-split;
+    }
+  }
+
+  .@{table-prefix-cls}-container {
+    .@{table-prefix-cls}-row-indent {
+      float: right;
+    }
+  }
+
+  .@{table-prefix-cls}-fix-start-shadow-show .@{table-prefix-cls}-container::before {
+    box-shadow: inset -10px 0 8px -8px @table-color-split;
+  }
+
+  .@{table-prefix-cls}-fix-end-shadow-show .@{table-prefix-cls}-container::after {
+    box-shadow: inset 10px 0 8px -8px @table-color-split;
+  }
+}

package/lib/table/style/selection.less

@@ -1,90 +1,63 @@
-@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;
-      }
-    }
-  }
-}
+@import './variables.less';
+
+// ============================================================
+// === selection.ts: genSelectionStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-selection-col {
+    width: @table-selection-column-width;
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column,
+  table tr td.@{table-prefix-cls}-selection-column,
+  .@{table-prefix-cls}-selection-column {
+    padding-inline-end: @table-padding-xs;
+    padding-inline-start: @table-padding-xs;
+    text-align: center;
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column.@{table-prefix-cls}-cell-fix-left {
+    z-index: @table-z-index-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 @table-motion-duration-slow;
+    margin-inline-start: 100%;
+    padding-inline-start: calc(@table-padding-horizontal / 4);
+  }
+
+  // ============================= Rows =============================
+  .@{table-prefix-cls}-tbody {
+    .@{table-prefix-cls}-row {
+      // row selected
+      &.@{table-prefix-cls}-row-selected {
+        > .@{table-prefix-cls}-cell {
+          background: @table-selected-row-bg;
+
+          &-row-hover {
+            background: @table-selected-row-hover-bg;
+          }
+        }
+      }
+
+      // cell hover (cell-row-hover class on td)
+      > .@{table-prefix-cls}-cell-row-hover {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+}

package/lib/table/style/size.less

@@ -0,0 +1,54 @@
+@import './variables.less';
+
+// ============================================================
+// === size.ts: genSizeStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  // ---- middle (antd uses 'medium' class name) ----
+  .@{table-prefix-cls}.@{table-prefix-cls}-middle {
+    font-size: @table-font-size-middle;
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{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 {
+      padding: @table-padding-vertical-middle @table-padding-horizontal-middle;
+    }
+
+    .@{table-prefix-cls}-filter-trigger {
+      margin-inline-end: calc(-@table-padding-horizontal-middle / 2);
+    }
+
+    .@{table-prefix-cls}-expanded-row-fixed {
+      margin: -@table-padding-vertical-middle -@table-padding-horizontal-middle;
+    }
+  }
+
+  // ---- small ----
+  .@{table-prefix-cls}.@{table-prefix-cls}-small {
+    font-size: @table-font-size-small;
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{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 {
+      padding: @table-padding-vertical-small @table-padding-horizontal-small;
+    }
+
+    .@{table-prefix-cls}-filter-trigger {
+      margin-inline-end: calc(-@table-padding-horizontal-small / 2);
+    }
+
+    .@{table-prefix-cls}-expanded-row-fixed {
+      margin: -@table-padding-vertical-small -@table-padding-horizontal-small;
+    }
+  }
+}

package/lib/table/style/sorter.less

@@ -0,0 +1,99 @@
+@import './variables.less';
+
+// ============================================================
+// === sorter.ts: genSorterStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters {
+    outline: none;
+    cursor: pointer;
+    transition: all @table-motion-duration-slow, left 0s;
+
+    &:hover {
+      background: @table-header-sort-hover-bg;
+
+      &::before {
+        background-color: transparent !important;
+      }
+    }
+
+    &:focus-visible {
+      color: @table-color-primary;
+    }
+
+    &.@{table-prefix-cls}-cell-fix-left:hover,
+    &.@{table-prefix-cls}-cell-fix-right:hover {
+      background: @table-fixed-header-sort-active-bg;
+    }
+  }
+
+  .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-sort {
+    background: @table-header-sort-bg;
+
+    &::before {
+      background-color: transparent !important;
+    }
+  }
+
+  td.@{table-prefix-cls}-column-sort {
+    background: @table-body-sort-bg;
+  }
+
+  .@{table-prefix-cls}-column-title {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .@{table-prefix-cls}-column-sorters {
+    display: flex;
+    flex: auto;
+    align-items: center;
+    justify-content: space-between;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      content: '';
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorters-tooltip-target-sorter {
+    &::after {
+      content: none;
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorter {
+    margin-inline-start: @table-margin-xxs;
+    color: @table-header-icon-color;
+    font-size: 0;
+    transition: color @table-motion-duration-slow;
+
+    &-inner {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &-up,
+    &-down {
+      font-size: @table-font-size-icon;
+
+      &.active {
+        color: @table-color-primary;
+      }
+    }
+
+    .@{table-prefix-cls}-column-sorter-up + .@{table-prefix-cls}-column-sorter-down {
+      margin-top: -0.3em;
+    }
+  }
+
+  .@{table-prefix-cls}-column-sorters:hover .@{table-prefix-cls}-column-sorter {
+    color: @table-header-icon-hover-color;
+  }
+}

package/lib/table/style/sticky.less

@@ -1,55 +1,45 @@
-@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;
-                }
-            }
-        }
-    }
-}
+@import './variables.less';
+
+// ============================================================
+// === sticky.ts: genStickyStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-sticky {
+    &-holder {
+      position: sticky;
+      z-index: calc(var(--columns-count) * 2 + @table-z-index-fixed + 1);
+      background: @table-color-bg-container;
+    }
+
+    &-scroll {
+      position: sticky;
+      bottom: 0;
+      z-index: calc(var(--columns-count) * 2 + @table-z-index-fixed + 1);
+      display: flex;
+      align-items: center;
+      height: @table-scroll-thumb-size !important;
+      background: @table-scroll-bg;
+      border-top: @table-border;
+      opacity: @table-opacity-loading;
+
+      &:hover {
+        transform-origin: center bottom;
+      }
+
+      // fake scrollbar style of sticky
+      &-bar {
+        position: absolute;
+        bottom: 0;
+        height: @table-scroll-thumb-size;
+        background-color: @table-scroll-thumb-bg;
+        border-radius: @table-sticky-scrollbar-border-radius;
+        transition: all @table-motion-duration-slow, transform 0s;
+
+        &:hover,
+        &-active {
+          background-color: @table-scroll-thumb-bg-hover;
+        }
+      }
+    }
+  }
+}

package/lib/table/style/summary.less

@@ -0,0 +1,23 @@
+@import './variables.less';
+
+// ============================================================
+// === summary.ts: genSummaryStyle ===
+// ============================================================
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}-summary {
+    position: relative;
+    z-index: @table-z-index-fixed;
+    background: @table-bg;
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: @table-border;
+      }
+    }
+  }
+
+  div.@{table-prefix-cls}-summary {
+    box-shadow: 0 -1px 0 @table-border-color;
+  }
+}

package/lib/table/style/variables.less

@@ -0,0 +1,80 @@
+@import '../../style/themes/index.less';
+
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+// ---- Design Tokens (antd default theme computed values) ----
+@table-font-size: 14px;
+@table-font-size-middle: 14px;
+@table-font-size-small: 14px;
+@table-line-height: 1.57142857;
+@table-bg: #ffffff;
+@table-radius: 8px;
+@table-padding-vertical: 16px;
+@table-padding-horizontal: 16px;
+@table-padding-vertical-middle: 12px;
+@table-padding-horizontal-middle: 8px;
+@table-padding-vertical-small: 8px;
+@table-padding-horizontal-small: 8px;
+@table-border-color: #f0f0f0;
+@table-header-text-color: rgba(0, 0, 0, 0.88);
+@table-header-bg: #fafafa;
+@table-header-cell-split-color: #f0f0f0;
+@table-footer-text-color: rgba(0, 0, 0, 0.88);
+@table-footer-bg: #fafafa;
+@table-row-hover-bg: #fafafa;
+@table-expanded-row-bg: #fafafa;
+@table-selected-row-bg: #e6f4ff;
+@table-selected-row-hover-bg: #bae0ff;
+@table-header-sort-bg: #fafafa;
+@table-header-sort-hover-bg: #f5f5f5;
+@table-body-sort-bg: #fafafa;
+@table-fixed-header-sort-active-bg: #fafafa;
+@table-header-filter-active-bg: #f5f5f5;
+@table-filter-dropdown-bg: #ffffff;
+@table-filter-dropdown-menu-bg: #ffffff;
+@table-border: 1px solid @table-border-color;
+@table-line-width: 1px;
+@table-z-index-fixed: 2;
+@table-motion-duration-mid: 0.2s;
+@table-motion-duration-slow: 0.3s;
+@table-font-weight-strong: 600;
+@table-color-split: rgba(5, 5, 5, 0.06);
+@table-color-text: rgba(0, 0, 0, 0.88);
+@table-color-text-disabled: rgba(0, 0, 0, 0.25);
+@table-color-primary: #1677ff;
+@table-color-link: #1677ff;
+@table-color-link-hover: #69b1ff;
+@table-color-link-active: #0958d9;
+@table-color-bg-container: #ffffff;
+@table-expand-icon-bg: #ffffff;
+@table-expand-column-width: 48px;
+@table-selection-column-width: 32px;
+@table-expand-icon-size: 17px;
+@table-expand-icon-half-inner: 7px;
+@table-expand-icon-scale: 0.94117647;
+@table-expand-icon-margin-top: 2.5px;
+@table-expand-icon-line-offset: 3px;
+@table-header-icon-color: rgba(0, 0, 0, 0.29);
+@table-header-icon-hover-color: rgba(0, 0, 0, 0.57);
+@table-sticky-scrollbar-bg: rgba(0, 0, 0, 0.25);
+@table-sticky-scrollbar-border-radius: 100;
+@table-scroll-thumb-size: 8px;
+@table-scroll-thumb-bg: rgba(0, 0, 0, 0.25);
+@table-scroll-thumb-bg-hover: rgba(0, 0, 0, 0.88);
+@table-scroll-bg: rgba(5, 5, 5, 0.06);
+@table-border-radius: 6px;
+@table-font-size-icon: 12px;
+@table-padding-xxs: 4px;
+@table-padding-xs: 8px;
+@table-padding-sm: 12px;
+@table-margin-xxs: 4px;
+@table-margin: 16px;
+@table-font-size-sm: 12px;
+@table-opacity-loading: 0.35;
+@table-box-shadow-secondary: 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);
+
+// Virtual scroll row height derived from padding + font height + border
+@table-row-height: (@table-padding-vertical * 2) + floor(@table-font-size * @table-line-height) + 1;
+@table-row-height-middle: (@table-padding-vertical-middle * 2) + floor(@table-font-size * @table-line-height) + 1;
+@table-row-height-small: (@table-padding-vertical-small * 2) + floor(@table-font-size * @table-line-height) + 1;