@kdcloudjs/table 1.2.2-canary.3 → 1.2.2-canary.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +73 -23
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +6 -6
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/styles.js +2 -2
- package/es/table/interfaces.d.ts +4 -1
- package/es/table/pipeline/features/rowDrag.d.ts +2 -0
- package/es/table/pipeline/features/rowDrag.js +57 -19
- package/es/table/pipeline/features/treeMode.js +14 -2
- package/lib/table/base/styles.js +2 -2
- package/lib/table/interfaces.d.ts +4 -1
- package/lib/table/pipeline/features/rowDrag.d.ts +2 -0
- package/lib/table/pipeline/features/rowDrag.js +57 -19
- package/lib/table/pipeline/features/treeMode.js +14 -2
- package/package.json +1 -1
package/es/table/base/styles.js
CHANGED
|
@@ -110,7 +110,7 @@ var Z = {
|
|
|
110
110
|
scrollItem: 30,
|
|
111
111
|
loadingIndicator: 40
|
|
112
112
|
};
|
|
113
|
-
export var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n align-items:center;\n min-width:
|
|
113
|
+
export var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
|
|
114
114
|
var outerBorderStyleMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
|
|
115
115
|
export var defaultCSSVariables = {
|
|
116
116
|
'--row-height': '48px',
|
|
@@ -144,7 +144,7 @@ export var defaultCSSVariables = {
|
|
|
144
144
|
export var variableConst = getCssVariableText(defaultCSSVariables);
|
|
145
145
|
var notBorderedStyleMixin = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
|
|
146
146
|
var borderedStyleMixin = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n .", "::after{\n background-color: inherit;\n }\n"])), Classes.tableHeaderCellResize);
|
|
147
|
-
export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n .", " .", " >td{\n cursor:move;\n }\n\n .", " .", " >td{\n cursor:no-drop;\n }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndToTop, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
|
|
147
|
+
export var StyledArtTableWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndToTop, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
|
|
148
148
|
export var ButtonCSS = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
|
|
149
149
|
function getCssVariableText(obj) {
|
|
150
150
|
return _Object$keys(obj).reduce(function (acc, key) {
|
package/es/table/interfaces.d.ts
CHANGED
|
@@ -109,15 +109,18 @@ export interface RowDragEvent {
|
|
|
109
109
|
isFinished: boolean;
|
|
110
110
|
dragPosition: string;
|
|
111
111
|
startDropZoneTagret: Element;
|
|
112
|
+
startCommonParams: any;
|
|
113
|
+
commonParams?: any;
|
|
112
114
|
dropZoneTarget: Element;
|
|
113
115
|
event: MouseEvent;
|
|
114
|
-
source: string;
|
|
115
116
|
x: number;
|
|
116
117
|
y: number;
|
|
117
118
|
}
|
|
118
119
|
export interface DragEvent {
|
|
119
120
|
dragItem: any;
|
|
120
121
|
startDropZoneTagret: Element;
|
|
122
|
+
startCommonParams: any;
|
|
123
|
+
commonParams?: any;
|
|
121
124
|
dropZoneTarget: Element;
|
|
122
125
|
dropZoneTableParams?: RowDropZoneTableParams;
|
|
123
126
|
event: MouseEvent;
|
|
@@ -21,6 +21,8 @@ export interface RowDragFeatureOptions {
|
|
|
21
21
|
suppressScrollMove?: boolean;
|
|
22
22
|
/** 树型表格是否允许拖拽插入行 */
|
|
23
23
|
allowDragIntoRow?: boolean;
|
|
24
|
+
/** 公共参数,作为拖拽回调参数,可在此提供业务层取数接口 */
|
|
25
|
+
commonParams?: any;
|
|
24
26
|
}
|
|
25
27
|
export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
|
|
26
28
|
export declare const rowDragKey = "rowDragKey";
|
|
@@ -51,12 +51,13 @@ export function rowDrag(opt) {
|
|
|
51
51
|
if (!tableBody) return pipeline;
|
|
52
52
|
var dataSource = pipeline.getDataSource();
|
|
53
53
|
var getRowDragEvent = function getRowDragEvent(dropTargetEvent, isFinished) {
|
|
54
|
-
var source = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'targetTable';
|
|
55
54
|
var dragItem = dropTargetEvent.dragItem,
|
|
56
55
|
x = dropTargetEvent.x,
|
|
57
56
|
y = dropTargetEvent.y,
|
|
58
57
|
dropZoneTarget = dropTargetEvent.dropZoneTarget,
|
|
59
58
|
startDropZoneTagret = dropTargetEvent.startDropZoneTagret,
|
|
59
|
+
commonParams = dropTargetEvent.commonParams,
|
|
60
|
+
startCommonParams = dropTargetEvent.startCommonParams,
|
|
60
61
|
event = dropTargetEvent.event,
|
|
61
62
|
dropZoneTableParams = dropTargetEvent.dropZoneTableParams;
|
|
62
63
|
var getDataSource = dropZoneTableParams.getDataSource,
|
|
@@ -85,24 +86,25 @@ export function rowDrag(opt) {
|
|
|
85
86
|
endRowIndex: overIndex,
|
|
86
87
|
endRow: overRow,
|
|
87
88
|
startDropZoneTagret: startDropZoneTagret,
|
|
89
|
+
startCommonParams: startCommonParams,
|
|
90
|
+
commonParams: commonParams,
|
|
88
91
|
dropZoneTarget: dropZoneTarget,
|
|
89
92
|
event: event,
|
|
90
93
|
dragPosition: direction,
|
|
91
94
|
isFinished: isFinished,
|
|
92
|
-
source: source,
|
|
93
95
|
x: x,
|
|
94
96
|
y: y
|
|
95
97
|
};
|
|
96
98
|
};
|
|
97
99
|
var onDragging = function onDragging(event) {
|
|
98
100
|
var _a;
|
|
99
|
-
var rowDragEvent = getRowDragEvent(event, false
|
|
101
|
+
var rowDragEvent = getRowDragEvent(event, false);
|
|
100
102
|
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
|
|
101
103
|
pipeline.setStateAtKey(rowDragKey, rowDragEvent);
|
|
102
104
|
};
|
|
103
|
-
var onDragStop = function onDragStop(event
|
|
105
|
+
var onDragStop = function onDragStop(event) {
|
|
104
106
|
var _a;
|
|
105
|
-
var rowDragEvent = getRowDragEvent(event, true
|
|
107
|
+
var rowDragEvent = getRowDragEvent(event, true);
|
|
106
108
|
pipeline.setStateAtKey(rowDragKey, rowDragEvent);
|
|
107
109
|
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
|
|
108
110
|
};
|
|
@@ -161,6 +163,8 @@ export function rowDrag(opt) {
|
|
|
161
163
|
var lastDropTarget = null;
|
|
162
164
|
var timeoutId = null;
|
|
163
165
|
var intervalId = null;
|
|
166
|
+
var expandRowTimeoutId = null;
|
|
167
|
+
var expandRowCallBackList = [];
|
|
164
168
|
var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
|
|
165
169
|
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
166
170
|
if (timeoutId) {
|
|
@@ -188,10 +192,11 @@ export function rowDrag(opt) {
|
|
|
188
192
|
setDragText(dragElement, dragText); // 设置悬浮框显示文本
|
|
189
193
|
artTable.classList.add(cx(Classes.rowDragging));
|
|
190
194
|
rowDragApi.setDragStatus('start');
|
|
191
|
-
var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem,
|
|
195
|
+
var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
|
|
192
196
|
onDragStart(dragEvent);
|
|
193
197
|
};
|
|
194
198
|
var handleDragMove = function handleDragMove(mouseMoveEvent) {
|
|
199
|
+
var _a;
|
|
195
200
|
positionDragElemment(dragElement, mouseMoveEvent); // 更新拖拽悬浮框位置
|
|
196
201
|
rowDragApi.setDragStatus('dragging');
|
|
197
202
|
setDragElementIcon(dragElement, 'move');
|
|
@@ -206,7 +211,7 @@ export function rowDrag(opt) {
|
|
|
206
211
|
if (lastDropTarget.onDragLeave) {
|
|
207
212
|
setDragElementIcon(dragElement, 'notAllowed');
|
|
208
213
|
hiddenDragLine(dragLine);
|
|
209
|
-
var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem,
|
|
214
|
+
var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
210
215
|
lastDropTarget.onDragLeave(dragEvent);
|
|
211
216
|
}
|
|
212
217
|
}
|
|
@@ -217,7 +222,7 @@ export function rowDrag(opt) {
|
|
|
217
222
|
if (dropTarget.isTable) {
|
|
218
223
|
showDragLine(dragLine);
|
|
219
224
|
}
|
|
220
|
-
var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem,
|
|
225
|
+
var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
221
226
|
dropTarget.onDragEnter(_dragEvent);
|
|
222
227
|
}
|
|
223
228
|
}
|
|
@@ -233,8 +238,33 @@ export function rowDrag(opt) {
|
|
|
233
238
|
});
|
|
234
239
|
updateScrollPosition(dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
235
240
|
}
|
|
241
|
+
// 树形表格悬停1s展开对应行节点
|
|
242
|
+
if ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.tableParams) === null || _a === void 0 ? void 0 : _a.getTreeModeOptions()) {
|
|
243
|
+
if (expandRowTimeoutId) {
|
|
244
|
+
clearTimeout(expandRowTimeoutId);
|
|
245
|
+
}
|
|
246
|
+
expandRowTimeoutId = setTimeout(function () {
|
|
247
|
+
var treeModeOptions = dropTarget.tableParams.getTreeModeOptions();
|
|
248
|
+
var treeMetaKey = treeModeOptions.treeMetaKey,
|
|
249
|
+
onExpand = treeModeOptions.onExpand,
|
|
250
|
+
isExpanded = treeModeOptions.isExpanded,
|
|
251
|
+
onCollapse = treeModeOptions.onCollapse;
|
|
252
|
+
// 鼠标悬停所在的拖拽行信息
|
|
253
|
+
var dataSource = dropTarget.tableParams.getDataSource();
|
|
254
|
+
var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
|
|
255
|
+
if (!dragItem) return;
|
|
256
|
+
var row = dragItem.row;
|
|
257
|
+
var rowKey = row[treeMetaKey].rowKey;
|
|
258
|
+
if (!isExpanded(rowKey)) {
|
|
259
|
+
onExpand(rowKey);
|
|
260
|
+
expandRowCallBackList.push(function () {
|
|
261
|
+
return onCollapse(rowKey);
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
}, 1000);
|
|
265
|
+
}
|
|
236
266
|
if (dropTarget.onDragging) {
|
|
237
|
-
var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem,
|
|
267
|
+
var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
238
268
|
dropTarget.onDragging(_dragEvent2);
|
|
239
269
|
}
|
|
240
270
|
}
|
|
@@ -246,18 +276,19 @@ export function rowDrag(opt) {
|
|
|
246
276
|
rowDragApi.setDragStatus('finished');
|
|
247
277
|
clearTimeout(timeoutId);
|
|
248
278
|
clearInterval(intervalId);
|
|
279
|
+
clearTimeout(expandRowTimeoutId);
|
|
280
|
+
while (expandRowCallBackList.length > 0) {
|
|
281
|
+
var callback = expandRowCallBackList.pop();
|
|
282
|
+
callback();
|
|
283
|
+
}
|
|
249
284
|
var rowDropZones = rowDragApi.getRowDropZone();
|
|
250
285
|
var validDropZones = _concatInstanceProperty(rowDropZones).call(rowDropZones, currentDropZone);
|
|
251
286
|
var dropTarget = _findInstanceProperty(validDropZones).call(validDropZones, function (zone) {
|
|
252
287
|
return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
|
|
253
288
|
});
|
|
254
289
|
if (dropTarget && dropTarget.onDragStop) {
|
|
255
|
-
var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem,
|
|
290
|
+
var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
|
|
256
291
|
dropTarget.onDragStop(dragEvent);
|
|
257
|
-
// 原表也触发onDragStop, 方便上层调用
|
|
258
|
-
if (dropTarget !== currentDropZone) {
|
|
259
|
-
currentDropZone.onDragStop(dragEvent, 'startTable');
|
|
260
|
-
}
|
|
261
292
|
}
|
|
262
293
|
};
|
|
263
294
|
var mousemove$ = fromEvent(window, 'mousemove');
|
|
@@ -318,7 +349,7 @@ export function rowDrag(opt) {
|
|
|
318
349
|
return internals.safeGetRowKey(primaryKey, row, -1) === parentRowKey;
|
|
319
350
|
});
|
|
320
351
|
}
|
|
321
|
-
var className = cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Classes.rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), Classes.rowDragEnd, rowIndex === endRowIndex), Classes.rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex), Classes.rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
|
|
352
|
+
var className = cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Classes.rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), Classes.rowDragEnd, rowIndex === endRowIndex), Classes.rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex && dragPosition !== 'into'), Classes.rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
|
|
322
353
|
return {
|
|
323
354
|
className: className
|
|
324
355
|
};
|
|
@@ -578,21 +609,28 @@ function setDragText(element, dragText) {
|
|
|
578
609
|
function isMouseOnDropTarget(mouseEvent, target) {
|
|
579
610
|
return target.contains(mouseEvent.target);
|
|
580
611
|
}
|
|
581
|
-
function createDropTargetEvent(
|
|
582
|
-
var dropZoneTarget =
|
|
612
|
+
function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
|
|
613
|
+
var dropZoneTarget = dropZone.getContainer();
|
|
614
|
+
var startDropZoneTagret = startDropZone.getContainer();
|
|
583
615
|
var rect = dropZoneTarget.getBoundingClientRect();
|
|
584
616
|
var x = event.clientX - rect.left;
|
|
585
617
|
var y = event.clientY - rect.top;
|
|
618
|
+
var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
|
|
619
|
+
var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
|
|
586
620
|
var targetEvent = {
|
|
587
621
|
dragItem: dragItem,
|
|
588
622
|
startDropZoneTagret: startDropZoneTagret,
|
|
623
|
+
startCommonParams: startCommonParams,
|
|
589
624
|
dropZoneTarget: dropZoneTarget,
|
|
590
625
|
event: event,
|
|
591
626
|
x: x,
|
|
592
627
|
y: y
|
|
593
628
|
};
|
|
594
|
-
if (
|
|
595
|
-
|
|
629
|
+
if (dropZone.isTable) {
|
|
630
|
+
var dropZoneOptions = dropZone.tableParams.getRowDragOptions();
|
|
631
|
+
var commonParams = dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.commonParams;
|
|
632
|
+
targetEvent.dropZoneTableParams = dropZone.tableParams;
|
|
633
|
+
targetEvent.commonParams = commonParams;
|
|
596
634
|
}
|
|
597
635
|
return targetEvent;
|
|
598
636
|
}
|
|
@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
|
5
5
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
6
6
|
import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
|
|
7
7
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof _Symbol && _getIteratorMethod(r) || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
8
|
-
function _unsupportedIterableToArray(r, a) { if (r) { var
|
|
8
|
+
function _unsupportedIterableToArray(r, a) { if (r) { var _context3; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty(_context3 = {}.toString.call(r)).call(_context3, 8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
9
9
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
10
10
|
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
|
11
11
|
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
@@ -62,7 +62,19 @@ export function treeMode() {
|
|
|
62
62
|
iconIndent: iconIndent,
|
|
63
63
|
iconGap: iconGap,
|
|
64
64
|
indentSize: indentSize,
|
|
65
|
-
treeMetaKey: treeMetaKey
|
|
65
|
+
treeMetaKey: treeMetaKey,
|
|
66
|
+
isExpanded: function isExpanded(rowKey) {
|
|
67
|
+
return openKeySet.has(rowKey);
|
|
68
|
+
},
|
|
69
|
+
onExpand: function onExpand(rowKey) {
|
|
70
|
+
var _context2;
|
|
71
|
+
onChangeOpenKeys(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(openKeys), [rowKey]), rowKey, 'expand');
|
|
72
|
+
},
|
|
73
|
+
onCollapse: function onCollapse(rowKey) {
|
|
74
|
+
onChangeOpenKeys(_filterInstanceProperty(openKeys).call(openKeys, function (key) {
|
|
75
|
+
return key !== rowKey;
|
|
76
|
+
}), rowKey, 'collapse');
|
|
77
|
+
}
|
|
66
78
|
});
|
|
67
79
|
var Icon = opts.icon;
|
|
68
80
|
return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
|
package/lib/table/base/styles.js
CHANGED
|
@@ -122,7 +122,7 @@ var Z = {
|
|
|
122
122
|
scrollItem: 30,
|
|
123
123
|
loadingIndicator: 40
|
|
124
124
|
};
|
|
125
|
-
var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n align-items:center;\n min-width:
|
|
125
|
+
var GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9999;\n pointer-events:none;\n user-select: none;\n\n display:flex;\n opacity: 0.9;\n align-items:center;\n min-width:80px;\n padding: 0px 8px;\n border: 1px solid #d9d9d9;\n box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n border-radius: 2px;\n background: #fff;\n\n .", "{\n font-size:12px;\n overflow:hidden;\n text-overflow: ellipsis;\n white-space:nowrap;\n }\n \n }\n\n .", "{\n position: absolute;\n top:0;\n left:0;\n z-index: 9998;\n pointer-events:none;\n user-select: none;\n height: 2px;\n background: var(--primary-color);\n }\n .", ":before{\n content: \" \";\n position: absolute;\n width: 8px;\n height: 8px;\n top:-4px;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n background:#fff;\n }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
|
|
126
126
|
var outerBorderStyleMixin = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px solid #cccccc;\n border-right: 1px solid #cccccc;\n border-bottom: 1px solid #cccccc;\n border-left: 1px solid #cccccc;\n\n td.", ",\n th.", " {\n border-left: none;\n }\n td.", ",\n th.", " {\n border-right: none;\n }\n\n thead tr.", " th,\n tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tfoot tr.", " td {\n border-bottom: none;\n }\n &:not(.has-footer) tbody tr.", " td {\n border-bottom: none;\n }\n td.", ":not(.", "){\n border-left: var(---cell-border-vertical);\n }\n td.", ":not(.", "){\n border-right: var(---cell-border-vertical);\n }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
|
|
127
127
|
var defaultCSSVariables = exports.defaultCSSVariables = {
|
|
128
128
|
'--row-height': '48px',
|
|
@@ -156,7 +156,7 @@ var defaultCSSVariables = exports.defaultCSSVariables = {
|
|
|
156
156
|
var variableConst = exports.variableConst = getCssVariableText(defaultCSSVariables);
|
|
157
157
|
var notBorderedStyleMixin = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n --cell-border-vertical: none;\n --header-cell-border-vertical: none;\n"])));
|
|
158
158
|
var borderedStyleMixin = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n //th\u9690\u85CF\u5217\u5BBD\u62D6\u62FD\u7684\u80CC\u666F\u8272\uFF0C\u4F7F\u7528th\u7684\u53F3\u8FB9\u6846\u4EE3\u66FF\n .", "::after{\n background-color: inherit;\n }\n"])), Classes.tableHeaderCellResize);
|
|
159
|
-
var StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n .", " .", " >td{\n cursor:move;\n }\n\n .", " .", " >td{\n cursor:no-drop;\n }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndToTop, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
|
|
159
|
+
var StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n :root {\n ", "\n }\n ", "\n\n box-sizing: border-box;\n * {\n box-sizing: border-box;\n }\n cursor: default;\n color: var(--color);\n font-size: var(--font-size);\n line-height: var(--line-height);\n position: relative;\n\n // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n &.use-outer-border {\n ", ";\n }\n\n // \u8868\u683C\u4E0D\u542F\u7528\u8FB9\u6846\u7EBF\uFF0C\u9690\u85CFth\u3001td\u7684\u5355\u5143\u683C\u5DE6\u53F3\u8FB9\u6846\u7EBF\n &:not(.", ") {\n ", "\n }\n &.", "{\n ", "\n }\n\n .no-scrollbar {\n ::-webkit-scrollbar {\n display: none;\n }\n }\n\n .", " {\n overflow: auto;\n flex-shrink: 1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .", " {\n overflow: hidden;\n background: var(--header-bgcolor);\n display: flex;\n flex-shrink: 0;\n border-bottom: var(--header-cell-border-horizontal);\n }\n\n .", " {\n display: flex;\n // justify-content: flex-start;\n align-items: center;\n height: inherit;\n }\n\n .", " {\n overflow-x:auto;\n flex-shrink: 0;\n flex-grow: 0;\n scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n & {\n ::-webkit-scrollbar {\n display:none;\n }\n }\n }\n\n .", " {\n display: flex;\n flex: none;\n }\n .", ", .", " {\n background: var(--bgcolor);\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n position:relative;\n &.empty {\n position: relative;\n }\n }\n\n .", " {\n position: relative;\n }\n .", ", .", " {\n .", "{\n background-color: #e6effb !important;\n }\n .", "{\n border-top: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-left: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-bottom: 1px solid #0E5FD8 !important;\n }\n .", "{\n border-right: 1px solid #0E5FD8 !important;\n }\n }\n\n .", " {\n user-select:none;\n }\n\n .", " {\n user-select:none;\n // .", " .", " >td{\n // cursor:move;\n // }\n\n // .", " .", " >td{\n // cursor:no-drop;\n // }\n \n }\n\n .", "{\n opacity: 0.5;\n }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n \n }\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n \n }\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n \n }\n\n\n // .", " td{\n // border-top: 1px solid var(--primary-color) !important;\n // }\n\n .", " td{\n border-top: 1px solid var(--primary-color) !important;\n border-bottom: 1px solid var(--primary-color) !important;\n }\n\n .", " td:first-child{\n border-left: 1px solid var(--primary-color) !important;\n }\n\n .", " td:last-child{\n border-right: 1px solid var(--primary-color) !important;\n }\n\n // .", " td{\n // border-bottom: 1px solid var(--primary-color) !important;\n // }\n\n .", " {\n cursor:pointer;\n }\n\n\n &.sticky-header .", " {\n position: sticky;\n top: 0;\n z-index: ", ";\n }\n\n &.sticky-footer .", " {\n position: sticky;\n bottom: 0;\n z-index: ", ";\n }\n\n table {\n width: 0;\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 0;\n display: table;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n flex-grow: 0;\n position:relative;\n }\n\n // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n tr:not(.no-hover):hover > td {\n background: var(--hover-bgcolor);\n }\n // \u4F7F\u7528 js \u6DFB\u52A0\u60AC\u6D6E\u6548\u679C\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n tr:not(.no-highlight).highlight > td {\n background: var(--highlight-bgcolor);\n }\n\n th {\n font-weight: normal;\n text-align: left;\n padding: var(--cell-padding);\n height: var(--header-row-height);\n color: var(--header-color);\n background: var(--header-bgcolor);\n border:1px solid transparent;\n border-right: var(--header-cell-border-vertical);\n border-bottom: var(--header-cell-border-horizontal);\n position: relative;\n }\n\n th.resizeable{\n border-right: var(--header-cell-border-vertical)\n }\n\n th.", " {\n border-right: var(--header-cell-border-vertical);\n border-bottom: none;\n }\n\n tr.", " th {\n border-top: var(--header-cell-border-horizontal);\n }\n th.", " {\n border-left: var(--header-cell-border-vertical);\n }\n\n td {\n padding: var(--cell-padding);\n background: var(--bgcolor);\n height: var(--row-height);\n border:1px solid transparent;\n border-right: var(--cell-border-vertical);\n border-bottom: var(--cell-border-horizontal);\n word-break: break-all;\n }\n td.", " {\n border-left: var(--cell-border-vertical);\n }\n tr.", " td {\n border-top: var(--cell-border-horizontal);\n }\n &.has-header tbody tr.", " td {\n border-top: none;\n }\n &.has-footer tbody tr.", " td {\n border-bottom: none;\n }\n\n .", ",\n .", " {\n z-index: ", ";\n }\n\n //#region \u9501\u5217\u9634\u5F71\n .", " {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: ", ";\n pointer-events: none;\n overflow: hidden;\n\n .", " {\n height: 100%;\n }\n\n .", " {\n margin-right: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-right: var(--cell-border-vertical);\n }\n }\n\n .", " {\n margin-left: ", "px;\n box-shadow: none;\n\n &.show-shadow {\n box-shadow: var(--lock-shadow);\n border-left: var(--cell-border-vertical);\n }\n }\n }\n //#endregion\n\n //#region \u7A7A\u8868\u683C\u5C55\u73B0\n .", " {\n pointer-events: none;\n color: #99a3b3;\n font-size: 12px;\n text-align: center;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n\n .empty-image {\n width: 50px;\n height: 50px;\n }\n\n .empty-tips {\n margin-top: 16px;\n line-height: 1.5;\n }\n }\n //#endregion\n\n //#region sticky\u517C\u5BB9\n &.sticky-polyfill-wrapper{\n //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n .", " {\n overflow-x: hidden;\n }\n .", ", .", " {\n position:relative;\n }\n .", " {\n overflow: hidden;\n display: flex;\n }\n .", " {\n position: relative;\n }\n\n .", " {\n display: flex;\n overflow: auto;\n overflow-x: hidden;\n overflow-anchor: none;\n }\n\n .", ", .", "{\n position: absolute;\n z-index: ", ";\n top: 0;\n }\n .", "{\n left:0;\n }\n .", "{\n right:0;\n }\n\n .", "{\n .", "{\n position: absolute;\n top: 0;\n width: 100%;\n z-index: ", ";\n }\n }\n\n tr:not(.no-hover).row-hover > td {\n background: var(--hover-bgcolor);\n }\n }\n //#endregion sticky\u517C\u5BB9\n\n //#region \u7C98\u6027\u6EDA\u52A8\u6761\n .", "{\n display:flex;\n background: var(--bgcolor);\n }\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", "{\n height: 1px;\n flex-shrink: 0;\n border-top: 1px solid var(--border-color);\n }\n .", " {\n overflow-y: hidden;\n overflow-x: auto;\n z-index: ", ";\n flex-shrink: 1;\n flex-grow: 0;\n border-top: 1px solid var(--border-color);\n }\n\n .", " {\n // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n height: 1px;\n visibility: hidden;\n }\n //#endregion\n\n //#region \u52A0\u8F7D\u6837\u5F0F\n .", " {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n\n .", " {\n filter: none;\n width: 100%;\n height: 100%;\n overflow: hidden;//\u5217\u5168\u90E8\u56FA\u5B9A\u65F6\uFF0C\u5B58\u5728\u53CC\u6A2A\u5411\u6EDA\u52A8\u6761\n display: flex;\n position: relative;\n flex-direction: column;\n }\n\n .", " {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .", " {\n position: sticky;\n z-index: ", ";\n transform: translateY(-50%);\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u8FC7\u6EE4\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n padding: 6px 4px;\n &:hover{\n background-color: #e5e5e5;\n }\n &:focus {\n outline: none\n }\n }\n //#endregion\n\n //#region \u8868\u683C\u6392\u5E8F\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n .", " {\n color:var(--icon-color);\n &.active{\n color:var(--primary-color);\n }\n }\n //#endregion\n\n //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n .", " {\n visibility: hidden;\n flex-shrink: 0;\n }\n .", " .", " {\n border-top: var(--cell-border-horizontal);\n }\n //#endregion\n\n //#region \u62D6\u62FD\u5217\u5BBD\u5927\u5C0F\n .", "::after{\n background-color: var(--border-color);\n }\n //\u89E3\u51B3\u90E8\u5206\u6D4F\u89C8\u5668(chrome109)\u6700\u540E\u4E00\u4E2A\u5355\u5143\u683C\u7684\u5217\u5BBD\u62D6\u62FD\u533A\u57DF\u7EDD\u5BF9\u5B9A\u4F4D\u8D85\u51FA\u8868\u683C\uFF0C\u5BFC\u81F4\u8868\u683C\u7AD6\u5206\u5272\u7EBF\u65E0\u6CD5\u5BF9\u9F50\n .", " th.", " .", "{\n right: 0;\n width: 5px;\n &::after{\n left: 4px;\n }\n }\n //#endregion\n\n "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTableBordered, notBorderedStyleMixin, Classes.artTableBordered, borderedStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableFooter, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.rangeSelection, Classes.rowDragging, Classes.tableBody, Classes.tableRow, Classes.tableFooter, Classes.tableRow, Classes.rowDragStart, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndParent, Classes.rowDragEndToTop, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndInto, Classes.rowDragEndToBottom, Classes.rowDragCell, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.horizontalStickyScrollContainer, Classes.horizontalScrollLeftSpacer, Classes.horizontalScrollRightSpacer, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.tableExtendIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder, Classes.tableHeaderCellResize, Classes.tableHeaderRow, Classes.last, Classes.tableHeaderCellResize);
|
|
160
160
|
var ButtonCSS = exports.ButtonCSS = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n //#region \u6309\u94AE\n .", "{\n color: var(--color);\n background:#ffffff;\n border:1px solid var(--strong-border-color);\n border-radius: 2px;\n cursor: pointer;\n &:hover{\n color: var(--primary-color);\n border:1px solid var(--primary-color);\n }\n }\n .", " {\n color:#ffffff;\n background-color: var(--primary-color);\n border:none;\n &:hover{\n color:#ffffff;\n background-color: var(--primary-color-level2);\n border:none;\n }\n }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);
|
|
161
161
|
function getCssVariableText(obj) {
|
|
162
162
|
return (0, _keys.default)(obj).reduce(function (acc, key) {
|
|
@@ -109,15 +109,18 @@ export interface RowDragEvent {
|
|
|
109
109
|
isFinished: boolean;
|
|
110
110
|
dragPosition: string;
|
|
111
111
|
startDropZoneTagret: Element;
|
|
112
|
+
startCommonParams: any;
|
|
113
|
+
commonParams?: any;
|
|
112
114
|
dropZoneTarget: Element;
|
|
113
115
|
event: MouseEvent;
|
|
114
|
-
source: string;
|
|
115
116
|
x: number;
|
|
116
117
|
y: number;
|
|
117
118
|
}
|
|
118
119
|
export interface DragEvent {
|
|
119
120
|
dragItem: any;
|
|
120
121
|
startDropZoneTagret: Element;
|
|
122
|
+
startCommonParams: any;
|
|
123
|
+
commonParams?: any;
|
|
121
124
|
dropZoneTarget: Element;
|
|
122
125
|
dropZoneTableParams?: RowDropZoneTableParams;
|
|
123
126
|
event: MouseEvent;
|
|
@@ -21,6 +21,8 @@ export interface RowDragFeatureOptions {
|
|
|
21
21
|
suppressScrollMove?: boolean;
|
|
22
22
|
/** 树型表格是否允许拖拽插入行 */
|
|
23
23
|
allowDragIntoRow?: boolean;
|
|
24
|
+
/** 公共参数,作为拖拽回调参数,可在此提供业务层取数接口 */
|
|
25
|
+
commonParams?: any;
|
|
24
26
|
}
|
|
25
27
|
export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
|
|
26
28
|
export declare const rowDragKey = "rowDragKey";
|