@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgTable/KgTable.less

@@ -1,912 +0,0 @@
-.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;
-    }
-}