@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/component/KgTable/KgTable.less

@@ -0,0 +1,912 @@
+.kg-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: hidden;
+
+    > .ant-table-wrapper {
+        flex: 1;
+        min-height: 0;
+        border-radius: 3px;
+    }
+
+    // 底部显示边框
+    &.kg-table--bottom-border {
+        > .ant-table-wrapper {
+            border-radius: 3px 3px 0 0;
+        }
+    }
+
+    .ant-empty-normal {
+        margin: 0;
+
+        .ant-empty-image {
+            display: none !important;
+        }
+
+        .ant-empty-description {
+            margin: 0 !important;
+        }
+    }
+
+    .ant-table-placeholder {
+        .ant-table-expanded-row-fixed {
+            height: 39px !important;
+            line-height: 39px !important;
+            padding: 0 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+    }
+
+    // 底部
+    .kg-table-bottom {
+        display: flex;
+        justify-content: space-between;
+        padding: 4px 0 0 0;
+
+        // 显示边框
+        &.kg-table-bottom--border {
+            border: 1px solid #d9d9d9;
+            border-top: none;
+            border-radius: 0 0 3px 3px;
+            background: #fff;
+            padding: 4px 4px 4px 6px;
+        }
+
+        .left {
+            flex: 1;
+        }
+
+        .right {
+            display: inline-flex;
+            justify-content: flex-end;
+        }
+    }
+
+    .ant-pagination {
+        &.ant-pagination-disabled {
+        }
+
+        .ant-pagination-item {
+            margin-right: 4px;
+        }
+
+        .ant-pagination-prev,
+        .ant-pagination-jump-prev,
+        .ant-pagination-jump-next {
+            margin-right: 4px;
+        }
+    }
+
+    thead.ant-table-thead {
+        & > tr {
+            &.dragging {
+                .ant-table-column-sorter {
+                    display: none !important;
+                }
+
+                .ant-table-resize-handle {
+                    display: none !important;
+                }
+            }
+
+            & > th.ant-table-cell {
+                &.dragging {
+                    background: rgba(0, 0, 0, 0.04);
+                    cursor: move;
+                }
+
+                &.dragover {
+                    &.dragover-right {
+                        border-right: 1px dashed #1890ff;
+                    }
+
+                    &.dragover-left {
+                        border-left: 1px dashed #1890ff;
+                        padding-left: 5px;
+                    }
+                }
+
+                // 启用排序,
+                .ant-table-column-sorters {
+                    align-items: stretch !important;
+                    min-height: 22px;
+                    line-height: 22px;
+
+                    & > .ant-table-column-title {
+                        width: calc(100% - 15px);
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+
+                // 启用过滤,
+                .ant-table-filter-column {
+                    min-height: 22px;
+                    line-height: 22px;
+
+                    & > .ant-table-column-title {
+                        width: calc(100% - 24px);
+                        display: flex;
+                        align-items: center;
+
+                        // 启用排序,
+                        & > .ant-table-column-sorters {
+                            width: 100%;
+                            align-items: stretch !important;
+                        }
+                    }
+                }
+
+                // 过滤按钮
+                .ant-table-filter-trigger {
+                    margin-right: 0px !important;
+                }
+
+                &:not(.ant-table-column-has-sorters) {
+                    .ant-table-filter-trigger {
+                    }
+                }
+
+                pre {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    margin: 0;
+                    padding: 0;
+                    font-size: inherit;
+                    font-family: inherit;
+                    overflow: hidden;
+                    white-space: pre;
+                    line-height: unset;
+                }
+            }
+        }
+    }
+
+    .ant-table-expanded-row > td {
+        padding: 0 0 0 28px !important;
+    }
+
+    .ant-table-expanded-row > td > .ant-table-expanded-row-fixed {
+        padding: 0px !important;
+        margin: 0px !important;
+        width: 100% !important;
+        border: 1px solid #d9d9d9;
+    }
+
+    .ant-table-expanded-row > td > .ant-table-expanded-row-fixed .ant-table {
+        margin: 0px !important;
+        border-radius: 0px !important;
+    }
+
+    .ant-table-expanded-row > td > .ant-table-expanded-row-fixed .ant-table table {
+        border-radius: 0px !important;
+    }
+
+    .ant-table-expanded-row > td > .ant-table-expanded-row-fixed .ant-table .ant-table-container {
+        border-radius: 0px !important;
+    }
+
+    .kg-table--body-cell--index {
+        padding: 1px !important;
+    }
+
+    th.kg-table--body-cell--index {
+        padding: 0 !important;
+        height: 1px !important;
+    }
+
+    // 不显示底部的内容
+    &.kg-table--no-bottom {
+        & > .ant-table-wrapper {
+            border-radius: 3px;
+        }
+    }
+
+    // 表格内的创建/更新/复制/删除
+    &.kg-table--submitting {
+        tr.ant-table-row-selected {
+            position: sticky;
+            top: 0px;
+            z-index: 3;
+
+            > td {
+                height: 1px;
+
+                &.submitting {
+                    padding: 1px 0.5px !important;
+
+                    .kg-table--body-cell.kg-table--body-cell--submitting {
+                        height: 100%;
+                        align-items: flex-start;
+
+                        .ant-form-item-control-input {
+                            align-items: center !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 行高:低
+    &.kg-table--row-low {
+        .kg-flex-table {
+            & .ant-spin-nested-loading {
+                & .ant-spin-container {
+                    .ant-table.ant-table-small .ant-table-tbody > tr > td {
+                        padding: 1.5px 6px;
+                    }
+                }
+            }
+        }
+    }
+
+    // 行高:中
+    &.kg-table--row-medium {
+        .kg-flex-table {
+            & .ant-spin-nested-loading {
+                & .ant-spin-container {
+                    .ant-table.ant-table-small .ant-table-tbody > tr > td {
+                        padding: 4.5px 6px;
+                    }
+                }
+            }
+        }
+    }
+
+    // 行高:高
+    &.kg-table--row-high {
+        .kg-flex-table {
+            & .ant-spin-nested-loading {
+                & .ant-spin-container {
+                    .ant-table.ant-table-small .ant-table-tbody > tr > td {
+                        padding: 8.5px 6px;
+                    }
+                }
+            }
+        }
+    }
+
+    // 按下 SHIFT 键时, 为了避免跟多选功能冲突, 禁用文本选中.
+    &.kg-table--is-shift-keydown {
+        user-select: none !important;
+    }
+}
+
+.kg-table.kg-table--invisible {
+    display: none;
+}
+
+// 表体的单元格
+.kg-table--body-cell {
+    display: flex;
+    align-items: stretch;
+    min-height: 22px !important;
+    line-height: 22px;
+
+    pre {
+        margin: 0px;
+        padding: 0px;
+        font-size: inherit;
+        font-family: inherit;
+        display: inline-block;
+        vertical-align: middle;
+        width: 100%;
+        overflow: hidden;
+        white-space: pre-wrap;
+        text-overflow: ellipsis;
+
+        &.empty {
+            color: #c9cdd4;
+        }
+
+        &.ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-break: keep-all;
+        }
+
+        &.kg-table--body-cell--update-link {
+            color: #1890ff;
+            cursor: pointer;
+            width: auto;
+
+            &:hover {
+                color: #40a9ff;
+                text-decoration: underline;
+            }
+        }
+    }
+
+    > .ant-form {
+        width: 100%;
+
+        .ant-form-item {
+            margin: 0 !important;
+
+            .ant-form-item-label {
+                display: none;
+            }
+        }
+    }
+
+    .kg-image {
+        margin-top: -3.5px;
+        margin-bottom: -3.5px;
+    }
+
+    &.kg-table--body-cell--center {
+        justify-content: center;
+        text-align: center;
+    }
+
+    &.kg-table--body-cell--right {
+        justify-content: flex-end;
+        text-align: right;
+    }
+
+    &.kg-table--body-cell--ellipsis {
+        pre {
+            white-space: pre;
+            height: 22px;
+        }
+    }
+}
+
+.kg-table--body-cell > .ant-form.ant-form-vertical .ant-form-item {
+    margin: 0 !important;
+}
+
+// 表头的单元格
+.kg-table--header-cell--context-menu {
+    > .ant-dropdown-content {
+        > .ant-dropdown-menu {
+            min-width: 120px;
+        }
+    }
+}
+
+// 表格左下勾选信息
+.kg-table-info {
+    display: flex;
+    align-items: center;
+    user-select: none;
+
+    .check {
+        display: inline-flex;
+        align-items: center;
+
+        .check-info {
+            display: inline-flex;
+            border-radius: 3px 0 0 3px;
+            padding: 4px 12px 4px 0px;
+            border: 1px solid transparent;
+            background: transparent;
+            margin-right: -1px;
+            align-items: center;
+
+            .iconify {
+                margin-right: 6px;
+                font-size: 14px;
+                color: #1890ff;
+            }
+
+            .text-primary {
+                margin: 0 4px;
+            }
+        }
+    }
+
+    .btn-clear-check {
+        margin: 0px 8px 0 0;
+        border-radius: 0;
+        border-color: transparent;
+        color: #1890ff;
+        padding: 0px !important;
+        box-shadow: none;
+        background: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: #096dd9;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus,
+        &[disabled]:active {
+            color: rgba(0, 0, 0, 0.25);
+            background: transparent !important;
+            border-color: transparent !important;
+        }
+    }
+
+    .btn-locate-check {
+        margin: 0px 8px 0 0;
+        border-radius: 0 3px 3px 0px;
+        border-color: transparent;
+        color: #1890ff;
+        padding: 0px !important;
+        box-shadow: none;
+        background: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: #096dd9;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus,
+        &[disabled]:active {
+            color: rgba(0, 0, 0, 0.25);
+            background: transparent !important;
+            border-color: transparent !important;
+        }
+    }
+
+    .btn-clear-table {
+        margin: 0px 8px 0 0;
+        border-color: transparent;
+        padding: 0px !important;
+        box-shadow: none;
+        background: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: transparent !important;
+            border-color: transparent !important;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus,
+        &[disabled]:active {
+            color: rgba(0, 0, 0, 0.25);
+            background: transparent !important;
+            border-color: transparent !important;
+        }
+    }
+}
+
+// 拖拽表头时跟随鼠标移动的元素
+span#__kg_table_header_drag_image__ {
+    position: absolute;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    background: #fafafa !important;
+    border: 1px solid #e5e7eb;
+    border-radius: 2px;
+    z-index: 999999999;
+
+    & > canvas {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+
+// 表格设置按钮
+.kg-table--setting {
+    width: 100%;
+    height: 100%;
+    min-height: 34px;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover:not([disabled='true']),
+    &:focus:not([disabled='true']) {
+        color: #40a9ff;
+    }
+
+    &[disabled='true'] {
+        cursor: not-allowed !important;
+    }
+}
+
+// 表格:设置
+.kg-table--setting--dropdown {
+    min-width: 120px !important;
+    user-select: none;
+
+    > .ant-dropdown-content {
+        > .ant-dropdown-menu {
+            > .ant-dropdown-menu-item {
+                > .ant-dropdown-menu-title-content {
+                    // 一级菜单的单选框
+                    > .ant-checkbox-wrapper {
+                        width: 100%;
+
+                        > span:nth-child(2) {
+                            flex: 1;
+                            min-width: 0;
+                            padding: 0;
+
+                            > div {
+                                padding-left: 8px;
+                                padding-right: 8px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .ant-dropdown-menu-submenu-title {
+        display: flex;
+        align-items: center;
+        padding-right: 5px !important;
+        justify-content: space-between;
+    }
+
+    .ant-dropdown-menu-item-icon {
+        margin-right: 6px;
+        font-size: 18px;
+    }
+}
+
+// 表格:设置--字段
+.kg-table--setting--submenu-popup--columns {
+    top: 0px !important;
+    border: none !important;
+    padding: 0px !important;
+    min-width: max-content;
+
+    & > ul.ant-dropdown-menu {
+        padding: 0px !important;
+        user-select: none;
+        margin-left: 1px !important;
+        margin-right: 0 !important;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+
+        & > div.columns {
+            border-radius: 5px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            min-width: 160px;
+
+            & > .ant-input-affix-wrapper {
+                border-radius: 5px 5px 0 0;
+                padding: 4.5px 8px;
+                border: 1px solid #e5e5e5;
+                margin: -1px -1px 0 -1px;
+                width: calc(100% + 2px);
+                box-shadow: none;
+                position: absolute;
+
+                &:hover,
+                &:focus {
+                    border-color: #40a9ff;
+                }
+
+                .anticon.anticon-close-circle {
+                    margin-right: 0px;
+                }
+            }
+
+            & > ul {
+                border: none !important;
+                margin: 32px 0px 0 !important;
+                box-shadow: none !important;
+                border-radius: 0px 0 5px 5px !important;
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding: 1px 1px 0 1px !important;
+
+                & > li {
+                    padding: 5px 8px !important;
+                    justify-content: space-between;
+                    margin-bottom: 1px !important;
+
+                    &.dragover-left:before {
+                        content: ' ';
+                        height: 1px;
+                        border-top: 1px dashed #1890ff;
+                        width: 100% !important;
+                        display: inline-block;
+                        position: absolute;
+                        top: -1px;
+                        left: 0px;
+                    }
+
+                    &.dragover-right:after {
+                        content: ' ';
+                        height: 1px;
+                        border-bottom: 1px dashed #1890ff;
+                        width: 100% !important;
+                        display: inline-block;
+                        position: absolute;
+                        bottom: -1px;
+                        left: 0px;
+                    }
+                }
+            }
+
+            .ant-checkbox-wrapper {
+                cursor: pointer;
+                align-items: center;
+
+                .ant-checkbox {
+                    top: 0px !important;
+                }
+
+                .ant-checkbox-disabled {
+                    cursor: inherit;
+                    border-color: inherit !important;
+                    background-color: inherit;
+
+                    & + span {
+                        color: inherit;
+                        cursor: inherit;
+                    }
+
+                    &.ant-checkbox-checked .ant-checkbox-inner {
+                        background-color: #1890ff;
+                        border-color: #1890ff !important;
+
+                        &:after {
+                            border-color: #fff;
+                        }
+                    }
+
+                    .ant-checkbox-inner {
+                        border-color: inherit !important;
+                        background-color: inherit;
+                    }
+                }
+            }
+
+            pre {
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                display: inline-block;
+                overflow: hidden;
+                font-size: inherit;
+                font-family: inherit;
+                vertical-align: middle;
+                white-space: pre;
+                line-height: 1.25;
+            }
+
+            > ul > li > span {
+                margin-left: 12px;
+                cursor: move !important;
+            }
+        }
+    }
+}
+
+// 表格:设置--视图
+.kg-table--setting--submenu-popup--var-grid-masters {
+    top: 0px !important;
+    border: none !important;
+    padding: 0px !important;
+    min-width: max-content;
+
+    & > ul.ant-dropdown-menu {
+        padding: 1px !important;
+        user-select: none;
+        margin-left: 1px !important;
+        margin-right: 0 !important;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+
+        .ant-dropdown-menu-item {
+            min-width: 120px;
+
+            &.selected {
+                color: #1890ff;
+                background-color: #e6f7ff;
+            }
+        }
+    }
+}
+
+// 表格:设置--行高
+.kg-table--setting--submenu-popup--row-height {
+    top: 0px !important;
+    border: none !important;
+    padding: 0px !important;
+    min-width: max-content;
+
+    & > ul.ant-dropdown-menu {
+        padding: 1px !important;
+        user-select: none;
+        margin-left: 1px !important;
+        margin-right: 0 !important;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+
+        .ant-dropdown-menu-item {
+            min-width: 120px;
+
+            &.selected {
+                color: #1890ff;
+                background-color: #e6f7ff;
+            }
+        }
+    }
+}
+
+// 表格:设置--其他
+.kg-table--setting--submenu-popup--other {
+    top: 0px !important;
+    border: none !important;
+    padding: 0px !important;
+    min-width: max-content;
+
+    & > ul.ant-dropdown-menu {
+        padding: 1px !important;
+        user-select: none;
+        margin-left: 1px !important;
+        margin-right: 0 !important;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+
+        .ant-dropdown-menu-item {
+            min-width: 120px;
+            padding: 0px !important;
+
+            > .ant-dropdown-menu-title-content {
+                > .ant-checkbox-wrapper {
+                    width: 100%;
+                    padding: 0 0 0 8px !important;
+
+                    > .ant-checkbox + span {
+                        padding: 0px !important;
+
+                        > div {
+                            padding: 5px 8px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 表头右键菜单
+.kg-table--header-cell--context-menu {
+    user-select: none;
+
+    > .ant-dropdown-content {
+        > .ant-dropdown-menu {
+            > .ant-dropdown-menu-item {
+                > .ant-dropdown-menu-title-content {
+                    display: flex;
+                    align-items: center;
+
+                    // 一级菜单的单选框
+                    > .ant-checkbox-wrapper {
+                        width: 100%;
+
+                        > span:nth-child(2) {
+                            flex: 1;
+                            min-width: 0;
+                            padding: 0;
+
+                            > div {
+                                padding-left: 8px;
+                                padding-right: 8px;
+                            }
+                        }
+                    }
+
+                    > .iconify {
+                        font-size: 16px;
+
+                        + span {
+                            padding-left: 8px;
+                        }
+                    }
+                }
+            }
+
+            > .ant-dropdown-menu-submenu {
+                > .ant-dropdown-menu-submenu-title {
+                    > .ant-dropdown-menu-title-content {
+                        display: flex;
+                        align-items: center;
+
+                        > .iconify {
+                            font-size: 16px;
+
+                            + span {
+                                padding-left: 8px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .ant-dropdown-menu-submenu-title {
+        display: flex;
+        align-items: center;
+        padding-right: 5px !important;
+        justify-content: space-between;
+    }
+
+    .ant-dropdown-menu-item-icon {
+        margin-right: 6px;
+        font-size: 18px;
+    }
+}
+
+.kg-table--body-cell--index .ant-table-row-indent + .ant-table-row-expand-icon {
+    margin-right: 4px;
+}
+
+.kg-table--body-cell--index .ant-table-row-indent {
+    padding-left: 0px !important;
+}
+
+.kg-table--body-cell--index:has(span.indent-level-1) + .ant-table-cell {
+    padding-left: 34px !important;
+}
+
+.kg-table--body-cell--index:has(span.indent-level-2) + .ant-table-cell {
+    padding-left: 62px !important;
+}
+
+// 表头右键菜单:对齐方式:二级菜单
+.kg-table--header-cell--context-menu--align--submenu-popup {
+    border: none !important;
+    padding: 0px !important;
+    min-width: max-content;
+
+    & > ul.ant-dropdown-menu {
+        padding: 1px !important;
+        user-select: none;
+        margin-left: 1px !important;
+        margin-right: 0 !important;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+
+        .ant-dropdown-menu-item {
+            min-width: 120px;
+
+            &.selected {
+                color: #1890ff;
+                background-color: #e6f7ff;
+            }
+        }
+    }
+}
+
+// 表格:设置--字段:拖拽时跟随鼠标移动的元素
+span#__kg_table__setting__columns__drag_image__ {
+    position: absolute;
+    border: 1px solid #e5e7eb;
+    border-radius: 2px;
+    display: inline-flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    z-index: 999999999;
+
+    & > canvas {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}