yy-vue-easytable 2.27.2

package/packages/style/ve-select.less

@@ -0,0 +1,48 @@
+.ve-select {
+    .ve-select-input {
+        appearance: none;
+        background-color: #fff;
+        background-image: none;
+        border: 1px solid #fff;
+        box-sizing: border-box;
+        color: #1f2d3d;
+        display: inline-block;
+        font-size: inherit;
+        line-height: 1;
+        outline: none;
+        padding-left: 2px;
+        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        width: 80%;
+        text-align: left;
+    }
+
+    .ve-select-selected-span {
+        width: 80%;
+        display: block !important; /*修复会被别的样式覆盖的问题*/
+        text-align: center;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        padding-left: 2px;
+        color: @ve-select-text-color;
+    }
+
+    .ve-select-toggle-icon {
+        display: inline-flex;
+        position: absolute;
+        line-height: 32px;
+        top: 0;
+        right: 5px;
+        color: #999;
+        &::before {
+            transform: rotate(0deg);
+            transition: transform 0.3s;
+        }
+        &.ve-select-show {
+            &::before {
+                transform: rotate(180deg);
+                transition: transform 0.3s;
+            }
+        }
+    }
+}

package/packages/style/ve-table.less

@@ -0,0 +1,539 @@
+@ve-virtual-phantom-index: -1;
+
+@ve-normal-cell-selection-border-index: 0;
+@ve-normal-cell-selection-corner-index: 1;
+@ve-column-resizer-handler-index: 50;
+@ve-column-resizer-line-index: 50;
+
+.ve-table *,
+.ve-table *:before,
+.ve-table *:after {
+    box-sizing: border-box;
+    // margin: 0;
+    // padding: 0;
+}
+
+.ve-table {
+    position: relative;
+    overflow: hidden;
+
+    // table container
+    .ve-table-container {
+        position: relative;
+        overflow-y: auto;
+        height: 100%;
+        width: 100%;
+        // 修复嵌套表格外层开启单元格选择，子表格未开启单元格选择，导致默认文字无法选中的问题
+        user-select: text;
+
+        // table content wrapper
+        .ve-table-content-wrapper {
+            position: relative;
+            left: 0;
+            right: 0;
+            top: 0;
+
+            // table content
+            table.ve-table-content {
+                min-width: 100%;
+                table-layout: fixed;
+                border-collapse: separate;
+                border-spacing: 0;
+
+                // 表头（需要处理多表头情况）
+                thead.ve-table-header {
+                    tr.ve-table-header-tr {
+                        height: @ve-table-head-row-height;
+                        th.ve-table-header-th {
+                            background-color: @ve-table-header-background-color;
+                            padding: @ve-table-head-row-td-padding;
+                            font-weight: 500;
+                            color: @ve-table-head-text-color;
+                            font-size: @ve-table-head-text-font-size;
+                            // cell indicator
+                            &.ve-table-cell-indicator {
+                                background-color: @ve-table-header-cell-indicator-background-color;
+                            }
+                            // cell indicator active
+                            &.ve-table-cell-indicator-active {
+                                background-color: @ve-table-header-cell-indicator-active-background-color;
+                                color: @ve-table-head-indicator-active-text-color;
+                            }
+                        }
+                    }
+                    // 固定头
+                    &.ve-table-fixed-header {
+                        tr th {
+                            position: sticky;
+                            z-index: @ve-fixed-header-index;
+                        }
+                    }
+                    .ve-table-header-tr {
+                        .ve-table-header-th {
+                            // 固定左列、右列
+                            &.ve-table-fixed-left,
+                            &.ve-table-fixed-right {
+                                position: sticky;
+                                z-index: @ve-fixed-header-cell-index;
+                            }
+                            // checkbox
+                            .ve-table-checkbox-wrapper {
+                                width: 25px;
+                            }
+
+                            // sort
+                            .ve-table-sort {
+                                display: inline-block;
+                                position: relative;
+                                width: 16px;
+                                height: 16px;
+                                margin-left: 5px;
+                                color: @ve-table-sort-icon-default-color;
+                                pointer-events: none;
+                                .ve-table-sort-icon {
+                                    position: absolute;
+                                    display: block;
+                                    font-size: 14px;
+                                    &.ve-table-sort-icon-top {
+                                        top: 1px;
+                                    }
+
+                                    &.ve-table-sort-icon-bottom {
+                                        top: 9px;
+                                    }
+
+                                    &.active {
+                                        color: @ve-table-sort-icon-active-color;
+                                    }
+                                }
+                            }
+
+                            &.ve-table-sortable-column {
+                                cursor: pointer;
+                            }
+
+                            /* filter */
+                            .ve-table-filter {
+                                display: inline-block;
+                                position: relative;
+                                width: 0;
+                                height: 16px;
+                                cursor: pointer;
+                                .ve-table-filter-icon {
+                                    color: @ve-table-header-filter-icon-color;
+                                    position: absolute;
+                                    top: 0;
+                                    left: 5px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // tbody
+                tbody.ve-table-body {
+                    position: relative;
+                    tr.ve-table-body-tr,
+                    tr.ve-table-expand-tr {
+                        height: @ve-table-body-row-height;
+                        td.ve-table-body-td,
+                        td.ve-table-expand-td {
+                            background-color: @ve-table-body-background-color;
+                            color: @ve-table-body-text-color;
+                            // hack content fill td height
+                            //height: 1px;
+                            height: inherit;
+                            font-size: @ve-table-body-text-font-size;
+                            // 解决展开表格偶发抖动的问题
+                            overflow: hidden;
+                        }
+
+                        td.ve-table-body-td {
+                            padding: @ve-table-body-row-td-padding;
+                            white-space: pre-wrap;
+                            overflow: hidden;
+                        }
+
+                        td.ve-table-operation-col {
+                            background-color: @ve-table-td-operation-column-background-color;
+                            // cell indicator
+                            &.ve-table-cell-indicator {
+                                background-color: @ve-table-body-cell-indicator-background-color;
+                            }
+                            // cell indicator active
+                            &.ve-table-cell-indicator-active {
+                                background-color: @ve-table-body-cell-indicator-active-background-color;
+                                color: @ve-table-body-indicator-active-text-color;
+                            }
+                        }
+                    }
+
+                    // 展开行
+                    tr.ve-table-expand-tr {
+                        display: table-row;
+                    }
+
+                    // 滚动中效果
+                    tr.ve-table-body-row-scrolling {
+                        & > td {
+                            background-color: @ve-table-body-row-row-scrolling-background-color;
+                        }
+                    }
+
+                    // 斑马纹
+                    &.ve-table-stripe {
+                        tr.ve-table-body-tr:nth-child(2n + 1) td {
+                            background-color: @ve-table-body-row-stripe-background-color;
+                        }
+                    }
+
+                    // 行悬浮效果
+                    &.ve-table-row-hover {
+                        tr.ve-table-body-tr:hover td {
+                            background-color: @ve-table-body-row-hover-background-color;
+                        }
+                    }
+
+                    // 行点击高亮
+                    &.ve-table-row-highlight {
+                        tr.ve-table-body-tr {
+                            &.ve-table-tr-highlight {
+                                td {
+                                    background-color: @ve-table-body-row-highlight-background-color;
+                                }
+                            }
+                        }
+                    }
+
+                    .ve-table-body-tr {
+                        .ve-table-body-td {
+                            // 固定左列、右列
+                            &.ve-table-fixed-left,
+                            &.ve-table-fixed-right {
+                                position: sticky;
+                                z-index: @ve-fixed-body-cell-index;
+                            }
+
+                            // expand row icon
+                            .ve-table-row-expand-icon {
+                                cursor: pointer;
+                                display: inline-block;
+                                width: 20px;
+                                height: 20px;
+                                i {
+                                    display: inline-flex;
+                                    &::before {
+                                        transform: rotate(0deg);
+                                        transition: transform 0.3s;
+                                    }
+                                }
+                                &.ve-table-expand-icon-collapsed {
+                                    i::before {
+                                        transform: rotate(90deg);
+                                        transition: transform 0.3s;
+                                    }
+                                }
+                            }
+
+                            // checkbox
+                            .ve-table-checkbox-wrapper {
+                                width: 25px;
+                            }
+
+                            // ellipsis
+                            .ve-table-body-td-span-ellipsis {
+                                overflow: hidden;
+                                display: -webkit-box;
+                                text-overflow: ellipsis;
+                                /* -webkit-line-clamp: 1; */
+                                -webkit-box-orient: vertical;
+                            }
+                        }
+                    }
+
+                    // expand row
+                    .ve-table-expand-tr {
+                        .ve-table-expand-td-content {
+                            position: sticky;
+                            z-index: @ve-fixed-body-cell-index;
+                            left: 0px;
+                            padding: @ve-table-body-row-expand-content-padding;
+                        }
+                    }
+                }
+
+                //  tfooter
+                tfoot.ve-table-footer {
+                    position: relative;
+                    tr.ve-table-footer-tr {
+                        height: @ve-table-foot-row-height;
+                        td.ve-table-footer-td {
+                            background-color: @ve-table-foot-background-color;
+                            color: @ve-table-foot-text-color;
+                            padding: @ve-table-foot-row-td-padding;
+                            font-size: @ve-table-foot-text-font-size;
+                        }
+                    }
+                    // 固定footer
+                    &.ve-table-fixed-footer {
+                        tr td {
+                            position: sticky;
+                            z-index: @ve-fixed-foot-index;
+                        }
+                    }
+
+                    .ve-table-footer-tr {
+                        .ve-table-footer-td {
+                            // 固定左列、右列
+                            &.ve-table-fixed-left,
+                            &.ve-table-fixed-right {
+                                position: sticky;
+                                z-index: @ve-fixed-foot-cell-index;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // cell selection
+            .ve-table-selection-wrapper {
+                .ve-table-selection-fixed-left {
+                    .ve-table-selection-current,
+                    .ve-table-selection-normal-area,
+                    .ve-table-selection-autofill-area {
+                        .ve-table-selection-corner {
+                            position: absolute;
+                            z-index: @ve-fixed-cell-selection-corner-index;
+                        }
+                        .ve-table-selection-border {
+                            position: absolute;
+                            z-index: @ve-fixed-cell-selection-border-index;
+                        }
+                    }
+
+                    .ve-table-selection-normal-area-layer {
+                        position: absolute;
+                        z-index: @ve-fixed-cell-selection-border-index;
+                    }
+                }
+
+                .ve-table-selection-middle {
+                    .ve-table-selection-current,
+                    .ve-table-selection-normal-area,
+                    .ve-table-selection-autofill-area {
+                        .ve-table-selection-corner {
+                            position: absolute;
+                            z-index: @ve-normal-cell-selection-corner-index;
+                        }
+                        .ve-table-selection-border {
+                            position: absolute;
+                            z-index: @ve-normal-cell-selection-border-index;
+                        }
+                    }
+
+                    .ve-table-selection-normal-area-layer {
+                        position: absolute;
+                        z-index: @ve-normal-cell-selection-border-index;
+                    }
+                }
+
+                .ve-table-selection-fixed-right {
+                    .ve-table-selection-current,
+                    .ve-table-selection-normal-area,
+                    .ve-table-selection-autofill-area {
+                        .ve-table-selection-corner {
+                            position: absolute;
+                            z-index: @ve-fixed-cell-selection-corner-index;
+                        }
+                        .ve-table-selection-border {
+                            position: absolute;
+                            z-index: @ve-fixed-cell-selection-border-index;
+                        }
+                    }
+
+                    .ve-table-selection-normal-area-layer {
+                        position: absolute;
+                        z-index: @ve-fixed-cell-selection-border-index;
+                    }
+                }
+
+                // 浮层
+                .ve-table-selection-normal-area-layer {
+                    background-color: @ve-table-selection-area-layer-background-color;
+                    opacity: 0.1;
+                    pointer-events: none;
+                }
+
+                .ve-table-selection-current,
+                .ve-table-selection-normal-area {
+                    .ve-table-selection-corner {
+                        display: block;
+                        height: 8px;
+                        width: 8px;
+                        border-style: solid;
+                        border-color: @ve-table-selection-corner-border-color;
+                        background-color: @ve-table-selection-corner-background-color;
+                        cursor: crosshair;
+                    }
+
+                    .ve-table-selection-border {
+                        display: block;
+                        background-color: @ve-table-selection-border-color;
+                    }
+                }
+
+                .ve-table-selection-autofill-area {
+                    .ve-table-selection-border {
+                        display: block;
+                        background-color: @ve-table-selection-autofill-border-color;
+                    }
+                }
+
+                .ve-table-selection-border {
+                    pointer-events: none;
+                }
+            }
+        }
+
+        // virtual scroll phantom
+        .ve-table-virtual-phantom {
+            &.ve-table-virtual-scroll {
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                z-index: @ve-virtual-phantom-index;
+            }
+        }
+
+        // column fix effect
+        &.ve-table-container-left-scrolling {
+            .ve-table-last-left-fixed-column {
+                border-right-color: @ve-table-column-fixed-border-color;
+            }
+        }
+        &.ve-table-container-right-scrolling {
+            .ve-table-first-right-fixed-column {
+                border-left: 1px solid @ve-table-column-fixed-border-color;
+            }
+        }
+
+        // autofilling
+        &.ve-table-autofilling {
+            cursor: crosshair;
+        }
+
+        // enable cell selection
+        &.ve-table-enable-cell-selection {
+            user-select: none;
+        }
+
+        // border x
+        .ve-table-border-x {
+            th,
+            td {
+                border-bottom: 1px solid @ve-table-border-color;
+            }
+
+            tr:first-child > th,
+            // footer
+            tr.ve-table-footer-tr:first-child > td {
+                border-top: 1px solid @ve-table-border-color;
+            }
+        }
+        // border y
+        .ve-table-border-y {
+            th,
+            td {
+                border-right: 1px solid @ve-table-border-color;
+            }
+
+            th:first-child,
+            td:first-child {
+                border-left: 1px solid @ve-table-border-color;
+            }
+        }
+    }
+
+    // border around
+    &.ve-table-border-around {
+        border: 1px solid @ve-table-border-color;
+        .ve-table-container {
+            table.ve-table-content {
+                &.ve-table-border-x {
+                    tr:last-child > td {
+                        border-bottom: 0px;
+                    }
+                    tr:first-child > th {
+                        border-top: 0px;
+                    }
+                }
+
+                &.ve-table-border-y {
+                    th.ve-table-last-column,
+                    td:last-child {
+                        border-right: 0px;
+                    }
+
+                    th:first-child,
+                    td:first-child {
+                        border-left: 0px;
+                    }
+                }
+            }
+        }
+    }
+
+    // edit input
+    .ve-table-edit-input-container {
+        position: absolute;
+        right: auto;
+
+        .ve-table-edit-input {
+            resize: none;
+            overflow-y: visible;
+            border: none;
+            outline-width: 0;
+            margin: 0;
+            padding: 1px 5px 0;
+            font-family: inherit;
+            line-height: @ve-table-td-editing-line-height;
+            font-size: inherit;
+            border: 2px solid @ve-table-td-editing-border-color;
+            box-shadow: 1px 2px 5px 0 @ve-table-td-editing-box-shadow-color;
+            display: block;
+            color: @ve-table-td-editing-font-color;
+            border-radius: 0;
+            background-color: @ve-table-td-editing-background-color;
+        }
+    }
+
+    // column resizer
+    .ve-table-column-resizer {
+        &-handler {
+            position: absolute;
+            cursor: col-resize;
+            // left: 0;
+            top: 0;
+            bottom: 0;
+            width: 5px;
+            height: 40px;
+            z-index: @ve-column-resizer-handler-index;
+            &.active {
+                background-color: @ve-table-column-resizer-handler-background-color;
+            }
+        }
+
+        &-line {
+            position: absolute;
+            pointer-events: none;
+            // left: 0;
+            top: 0;
+            bottom: 0;
+            width: 0;
+            border-left: 1px solid
+                @ve-table-column-resizer-line-background-color;
+            z-index: @ve-column-resizer-line-index;
+        }
+    }
+}

package/packages/theme-dark/base.less

@@ -0,0 +1 @@
+@import "../font/iconfont.css";

package/packages/theme-dark/index.less

@@ -0,0 +1,12 @@
+// This file is auto gererated by build/build-entry.js
+        @import "./base.less";
+  @import "./ve-checkbox.less";
+  @import "./ve-contextmenu.less";
+  @import "./ve-dropdown.less";
+  @import "./ve-icon.less";
+  @import "./ve-loading.less";
+  @import "./ve-pagination.less";
+  @import "./ve-radio.less";
+  @import "./ve-select.less";
+  @import "./ve-table.less";
+