lumen-plus 0.0.3 → 0.0.5

package/dist/theme-chalk/table.scss

@@ -0,0 +1,343 @@
+@use 'sass:color';
+@use './variables' as *;
+@use './mixins/bem' as *;
+
+@include b('table') {
+    --#{$namespace}-table-border-color: #{$border-color-lighter};
+    --#{$namespace}-table-header-bg: #fafafa;
+    --#{$namespace}-table-header-text-color: #{$color-text-primary};
+    --#{$namespace}-table-row-hover-bg: #f5f7fa;
+    --#{$namespace}-table-current-row-bg: #ecf5ff;
+    --#{$namespace}-table-text-color: #{$color-text-regular};
+    --#{$namespace}-table-cell-padding: 12px;
+    --#{$namespace}-table-font-size: #{$font-size-base};
+    
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    overflow-x: auto;
+    background-color: $bg-color;
+    font-size: var(--#{$namespace}-table-font-size);
+    color: var(--#{$namespace}-table-text-color);
+
+    // Sizes
+    @include m('large') {
+        --#{$namespace}-table-cell-padding: 16px;
+        --#{$namespace}-table-font-size: 16px;
+    }
+
+    @include m('small') {
+        --#{$namespace}-table-cell-padding: 8px;
+        --#{$namespace}-table-font-size: 12px;
+    }
+
+    // Border mode
+    @include m('border') {
+        border: 1px solid var(--#{$namespace}-table-border-color);
+        border-radius: $border-radius-base;
+
+        .#{$namespace}-table__header,
+        .#{$namespace}-table__body {
+            .#{$namespace}-table__cell {
+                border-right: 1px solid var(--#{$namespace}-table-border-color);
+
+                &:last-child {
+                    border-right: none;
+                }
+            }
+        }
+    }
+
+    // Striped
+    @include m('striped') {
+        .#{$namespace}-table__row--striped {
+            background-color: #fafafa;
+        }
+    }
+
+    // Fit - 当设置 fit 时表格撑满容器（默认行为）
+    // 不设置 fit 时表格按内容宽度，可出现滚动条
+
+    // Highlight current row
+    @include m('highlight-current-row') {
+        .#{$namespace}-table__row {
+            &.is-current {
+                background-color: var(--#{$namespace}-table-current-row-bg);
+            }
+        }
+    }
+
+    // Inner wrapper - 统一滚动容器
+    @include e('inner-wrapper') {
+        position: relative;
+        display: block;
+        height: 100%;
+        overflow: auto;
+    }
+
+    // 单表格结构
+    @include e('table') {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    // Header (thead) - 使用 sticky 固定
+    @include e('header') {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: var(--#{$namespace}-table-header-bg);
+
+        th {
+            background-color: var(--#{$namespace}-table-header-bg);
+        }
+    }
+
+    // Body (tbody)
+    @include e('body') {
+        // tbody 样式
+    }
+
+    // Rows
+    @include e('row') {
+        transition: background-color 0.25s ease;
+
+        &:hover {
+            background-color: var(--#{$namespace}-table-row-hover-bg);
+        }
+    }
+
+    // Cells
+    @include e('cell') {
+        padding: var(--#{$namespace}-table-cell-padding);
+        text-align: left;
+        vertical-align: middle;
+        border-bottom: 1px solid var(--#{$namespace}-table-border-color);
+        box-sizing: border-box;
+        overflow: hidden;
+
+        &.is-center {
+            text-align: center;
+
+            @include e('cell-wrapper') {
+                justify-content: center;
+            }
+        }
+
+        &.is-right {
+            text-align: right;
+        }
+    }
+
+    @include e('body') {
+        tr:last-child {
+            .#{$namespace}-table__cell {
+                border-bottom: none;
+            }
+        }
+    }
+
+    // Header cells
+    @include e('header-cell') {
+        background-color: var(--#{$namespace}-table-header-bg);
+        color: var(--#{$namespace}-table-header-text-color);
+        font-weight: $font-weight-primary;
+        user-select: none;
+
+        &.is-sortable {
+            cursor: pointer;
+
+            &:hover {
+                background-color: color.adjust(#fafafa, $lightness: -3%);
+            }
+        }
+
+        &.is-sorted-ascending,
+        &.is-sorted-descending {
+            color: $color-primary;
+        }
+    }
+
+    // Cell wrapper
+    @include e('cell-wrapper') {
+        display: flex;
+        align-items: center;
+        line-height: 1.5;
+
+        &.has-overflow-tooltip {
+            overflow: hidden;
+        }
+    }
+
+    // Cell text
+    @include e('cell-text') {
+        flex: 1;
+        min-width: 0;
+
+        &.is-ellipsis {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // Header text
+    @include e('header-text') {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // Sort caret
+    @include e('sort-caret') {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        margin-left: 4px;
+        vertical-align: middle;
+        gap: 2px;
+    }
+
+    @include e('sort-icon') {
+        color: #c0c4cc;
+        display: block;
+        flex: 0 0 auto;
+
+        &--asc {
+            margin-top: -1px;
+        }
+
+        &--desc {
+            margin-bottom: -1px;
+        }
+
+        &.is-active {
+            color: $color-primary;
+        }
+    }
+
+    // Empty state
+    @include e('empty') {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 0;
+        color: $color-text-secondary;
+    }
+
+    @include e('empty-text') {
+        font-size: $font-size-base;
+    }
+
+    @include e('empty-row') {
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
+    @include e('empty-cell') {
+        text-align: center !important;
+    }
+
+    // Loading
+    @include e('loading') {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(255, 255, 255, 0.9);
+    }
+
+    @include e('loading-spinner') {
+        width: 32px;
+        height: 32px;
+        border: 3px solid $border-color-light;
+        border-top-color: $color-primary;
+        border-radius: 50%;
+        animation: #{$namespace}-table-loading-spin 0.8s linear infinite;
+    }
+
+    // Tooltip (internal)
+    @include e('tooltip') {
+        position: absolute;
+        z-index: 2000;
+        transform: translateX(-50%) translateY(-100%);
+        pointer-events: none;
+        max-width: 300px;
+        word-break: break-word;
+        white-space: normal;
+    }
+}
+
+@keyframes #{$namespace}-table-loading-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Dark mode
+.dark {
+    .#{$namespace}-table {
+        --#{$namespace}-table-border-color: #363637;
+        --#{$namespace}-table-header-bg: #1d1d1d;
+        --#{$namespace}-table-header-text-color: #e5eaf3;
+        --#{$namespace}-table-row-hover-bg: #262727;
+        --#{$namespace}-table-current-row-bg: rgba(0, 98, 255, 0.2);
+        --#{$namespace}-table-text-color: #cfd3dc;
+
+        background-color: #141414;
+
+        .#{$namespace}-table__header-cell {
+            &.is-sortable {
+                &:hover {
+                    background-color: #262727;
+                }
+            }
+        }
+
+        @include m('striped') {
+            .#{$namespace}-table__row--striped {
+                background-color: #1d1d1d;
+            }
+        }
+
+        @include e('loading') {
+            background-color: rgba(20, 20, 20, 0.9);
+        }
+
+        @include e('loading-spinner') {
+            border-color: #363637;
+            border-top-color: $color-primary;
+        }
+
+        @include e('sort-icon') {
+            &--asc {
+                border-bottom-color: #5a5a5c;
+
+                &.is-active {
+                    border-bottom-color: $color-primary;
+                }
+            }
+
+            &--desc {
+                border-top-color: #5a5a5c;
+
+                &.is-active {
+                    border-top-color: $color-primary;
+                }
+            }
+        }
+    }
+}