plain-design 0.0.86 → 0.0.90

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "0.0.86",
3
+ "version": "0.0.90",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
@@ -21,7 +21,7 @@
21
21
  "author": "",
22
22
  "license": "ISC",
23
23
  "peerDependencies": {
24
- "plain-design-composition": "0.0.105",
24
+ "plain-design-composition": "0.0.109",
25
25
  "react": "^17.0.1",
26
26
  "react-dom": "^17.0.1"
27
27
  },
@@ -55,7 +55,6 @@
55
55
  "axios": "^0.21.1",
56
56
  "babel-plugin-import": "^1.13.3",
57
57
  "babel-plugin-syntax-jsx": "^6.18.0",
58
- "choerodon-ui": "0.8.77",
59
58
  "core-js": "^3.6.5",
60
59
  "cross-env": "^7.0.3",
61
60
  "css-loader": "^5.2.4",
@@ -66,7 +65,7 @@
66
65
  "fork-ts-checker-webpack-plugin": "^6.2.4",
67
66
  "mini-css-extract-plugin": "^1.6.2",
68
67
  "mockjs": "^1.1.0",
69
- "plain-design-composition": "0.0.105",
68
+ "plain-design-composition": "0.0.109",
70
69
  "postcss": "^8.2.13",
71
70
  "postcss-loader": "^4.2.0",
72
71
  "qs": "^6.10.1",
@@ -1,106 +1,107 @@
1
1
  @include theme {
2
- .pl-cascade-panel {
3
- display: inline-block;
4
- height: 200px;
5
- border: solid 1px $ibc;
6
- border-radius: $popperRadius;
7
- color: $itc;
8
-
9
- & > .pl-list {
10
- height: 100%;
11
- overflow: hidden;
12
- white-space: nowrap;
13
- }
2
+ .pl-cascade-panel {
3
+ display: inline-block;
4
+ height: 200px;
5
+ border: solid 1px $ibc;
6
+ border-radius: $popperRadius;
7
+ color: $itc;
14
8
 
15
- .pl-cascade-list {
16
- width: 180px;
17
- height: 100%;
18
- padding: 6px 0;
19
- font-size: 14px;
20
- display: inline-block;
21
- vertical-align: top;
22
- overflow: hidden;
23
- box-sizing: border-box;
24
-
25
- &:not(:last-child) {
26
- border-right: solid 1px $ibc;
27
- }
9
+ & > .pl-list {
10
+ height: 100%;
11
+ overflow: hidden;
12
+ white-space: nowrap;
13
+ }
28
14
 
29
- .pl-list {
30
- overflow: hidden;
31
- }
15
+ .pl-cascade-list {
16
+ width: 180px;
17
+ height: 100%;
18
+ padding: 6px 0;
19
+ font-size: 14px;
20
+ display: inline-block;
21
+ vertical-align: top;
22
+ overflow: hidden;
23
+ box-sizing: border-box;
32
24
 
33
- .pl-cascade-item {
34
- padding: 5px 0 5px 12px;
35
- font-weight: 400;
36
- font-size: 13px;
37
- color: $itc;
38
- background-color: white;
39
- transition: all 300ms $transition;
40
- cursor: pointer;
25
+ &:not(:last-child) {
26
+ border-right: solid 1px $ibc;
27
+ }
41
28
 
42
- .pl-cascade-content {
43
- padding-right: 30px;
44
- position: relative;
29
+ .pl-list {
30
+ overflow: hidden;
31
+ }
45
32
 
46
- .pl-cascade-arrow {
47
- position: absolute;
48
- top: 0;
49
- bottom: 0;
50
- right: 0;
51
- width: 30px;
52
- display: flex;
53
- align-items: center;
54
- justify-content: center;
55
- color: $icc;
56
- }
57
- }
33
+ .pl-cascade-item {
34
+ padding: 5px 0 5px 12px;
35
+ line-height: 22px;
36
+ font-weight: 400;
37
+ font-size: 13px;
38
+ color: $itc;
39
+ background-color: white;
40
+ transition: all 300ms $transition;
41
+ cursor: pointer;
58
42
 
59
- &.pl-cascade-item-expand, &:hover {
60
- color: $ihc;
61
- background-color: $disabled;
62
- }
43
+ .pl-cascade-content {
44
+ padding-right: 30px;
45
+ position: relative;
63
46
 
64
- &.pl-cascade-item-active {
65
- color: $colorPrimary;
66
- background-color: rgba($colorPrimary, 0.1);
67
- }
47
+ .pl-cascade-arrow {
48
+ position: absolute;
49
+ top: 0;
50
+ bottom: 0;
51
+ right: 0;
52
+ width: 30px;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ color: $icc;
57
+ }
58
+ }
68
59
 
69
- &.pl-cascade-empty {
70
- display: flex;
71
- flex-direction: column;
72
- align-items: center;
73
- justify-content: center;
60
+ &.pl-cascade-item-expand, &:hover {
61
+ color: $ihc;
62
+ background-color: $disabled;
63
+ }
74
64
 
75
- padding-left: 0;
76
- font-size: 12px;
77
- color: $disabledText;
78
- background-color: transparent;
79
- cursor: auto;
65
+ &.pl-cascade-item-active {
66
+ color: $colorPrimary;
67
+ background-color: rgba($colorPrimary, 0.1);
68
+ }
80
69
 
81
- .pl-icon {
82
- margin-bottom: 8px;
83
- font-size: 20px;
84
- }
85
- }
70
+ &.pl-cascade-empty {
71
+ display: flex;
72
+ flex-direction: column;
73
+ align-items: center;
74
+ justify-content: center;
86
75
 
87
- &.pl-cascade-item-disabled {
88
- background-color: transparent;
89
- color: $disabledText;
90
- cursor: not-allowed;
91
- }
92
- }
76
+ padding-left: 0;
77
+ font-size: 12px;
78
+ color: $disabledText;
79
+ background-color: transparent;
80
+ cursor: auto;
93
81
 
94
- &.pl-cascade-filter-list {
95
- width: 360px;
96
- }
82
+ .pl-icon {
83
+ margin-bottom: 8px;
84
+ font-size: 20px;
85
+ }
97
86
  }
98
87
 
99
- .pl-loading-mask {
100
- top: 1px;
101
- bottom: 1px;
102
- left: 1px;
103
- right: 1px;
88
+ &.pl-cascade-item-disabled {
89
+ background-color: transparent;
90
+ color: $disabledText;
91
+ cursor: not-allowed;
104
92
  }
93
+ }
94
+
95
+ &.pl-cascade-filter-list {
96
+ width: 360px;
97
+ }
98
+ }
99
+
100
+ .pl-loading-mask {
101
+ top: 1px;
102
+ bottom: 1px;
103
+ left: 1px;
104
+ right: 1px;
105
105
  }
106
- }
106
+ }
107
+ }
@@ -31,6 +31,7 @@
31
31
 
32
32
  .pl-input-custom-placeholder {
33
33
  color: $ipc;
34
+ margin-left: 6px;
34
35
  }
35
36
 
36
37
  input, textarea {
@@ -112,13 +112,6 @@
112
112
  }
113
113
  }
114
114
 
115
- .pl-scroll-disabled-y .pl-scroll, .pl-scroll.pl-scroll-disabled-y {
116
- .pl-scroll-wrapper {
117
- width: 100%;
118
- overflow-y: hidden;
119
- }
120
- }
121
-
122
115
  .pl-scroll-sticky {
123
116
  position: sticky;
124
117
 
@@ -52,6 +52,7 @@
52
52
  background-color: rgba(black, 0.8);
53
53
  color: white;
54
54
  padding: 3px 6px;
55
+ line-height: initial;
55
56
  position: absolute;
56
57
  left: 50%;
57
58
  transform: translateX(-50%);
@@ -172,4 +173,4 @@
172
173
  }
173
174
  }
174
175
  }
175
- }
176
+ }
@@ -1,7 +1,7 @@
1
1
  import {PltRow} from "./row";
2
2
  import {TableHoverPart} from "../utils/table.utils";
3
3
  import {TableNode} from "../use/useTableNode";
4
- import {designComponent, onMounted, useClasses, useRefs} from "plain-design-composition";
4
+ import {designComponent, onMounted, useRefs} from "plain-design-composition";
5
5
  import React from "react";
6
6
  import {PlainTable} from "../../index";
7
7
  import {renderColgroup} from "../../plc/utils/renderColgroup";
@@ -43,17 +43,12 @@ export const PltBody = designComponent({
43
43
  refs.virtual!.refs.scroll!.refs.wrapper!.addEventListener('wheel', handler.onWheel)
44
44
  })
45
45
 
46
- const classes = useClasses(() => [
47
- 'plt-body',
48
- {'pl-scroll-disabled-y': props.table.props.showRows >= (props.table.props.data || []).length}
49
- ])
50
-
51
46
  return {
52
47
  render: () => {
53
48
  // console.log('props.table.disabledVirtual.value', props.table.disabledVirtual.value)
54
49
  return (
55
50
  <PlVirtualTable
56
- className={classes.value}
51
+ className="plt-body"
57
52
  ref={onRef.virtual}
58
53
  key={props.table.plcData.value!.plcKeyString}
59
54
  width={props.table.plcData.value!.targetTableWidth!}
@@ -19,6 +19,10 @@
19
19
  min-width: 100%;
20
20
  }
21
21
 
22
+ .pl-scroll-wrapper {
23
+ height: calc(100% + 20px);
24
+ }
25
+
22
26
  .pl-vertical-scrollbar-wrapper, .pl-horizontal-scrollbar-wrapper {
23
27
  z-index: 10;
24
28
  }
@@ -220,6 +220,10 @@ export function useTableOptionButtons({hooks, methods, command, setting, config,
220
220
 
221
221
  command.on('esc', () => methods.editMethods.cancel())
222
222
  command.on('alt+s', () => methods.editMethods.save())
223
+ command.on('up', () => methods.pageMethods.selectPrevRow())
224
+ command.on('down', () => methods.pageMethods.selectNextRow())
225
+ command.on('left', () => methods.pageMethods.prev())
226
+ command.on('right', () => methods.pageMethods.next())
223
227
 
224
228
  const outerButtons = computed(() => {
225
229
  return [...Object.values(standardButtons), ...config.buttons || []]
@@ -1,4 +1,4 @@
1
- import {eTableProEditType, iTableProDefaultConfig, iTableSortData, iTableOptionState, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
1
+ import {eTableProEditType, iTableOptionState, iTableProDefaultConfig, iTableSortData, tTableOptionConfig, tUrlConfig} from "../createUseTableOption.utils";
2
2
  import {tTablePagination} from "./use.paginaiton";
3
3
  import {tTableOptionHooks} from "./use.hooks";
4
4
  import $$notice from "../../$$notice";
@@ -155,7 +155,36 @@ export function useTableOptionMethods({tableState, config, pagination, hooks, cu
155
155
  }
156
156
  }
157
157
 
158
- return {load, reload, queryCount, next, prev, jump,}
158
+ /*选中下一条数据*/
159
+ const selectNextRow = async () => {
160
+ const {list, currentKey} = tableState
161
+ if (list.length === 0 || !currentKey) {return}
162
+ const index = list.findIndex(i => i[config.keyField] === currentKey)
163
+ if (index === list.length - 1) {
164
+ // 当前应是选中当前页的最后一条数据了
165
+ if (pagination.pageState.hasNext) {
166
+ pageMethods.next()
167
+ }
168
+ } else {
169
+ editMethods.selectCurrent(list[index + 1][config.keyField])
170
+ }
171
+ }
172
+ /*选中上一条数据*/
173
+ const selectPrevRow = async () => {
174
+ const {list, currentKey} = tableState
175
+ if (list.length === 0 || !currentKey) {return}
176
+ const index = list.findIndex(i => i[config.keyField] === currentKey)
177
+ if (index === 0) {
178
+ // 当前应是选中当前页的第一条数据了
179
+ if (pagination.pageState.page > 0) {
180
+ pageMethods.prev()
181
+ }
182
+ } else {
183
+ editMethods.selectCurrent(list[index - 1][config.keyField])
184
+ }
185
+ }
186
+
187
+ return {load, reload, queryCount, next, prev, jump, selectNextRow, selectPrevRow}
159
188
  })())
160
189
 
161
190
  const editMethods = (() => {