@ebscn/ui 1.0.3-beta.4 → 1.0.3-beta.6

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.
Files changed (17) hide show
  1. package/cjs/components/card/card.js +2 -2
  2. package/cjs/components/number-keyboard/number-keyboard.css +13 -20
  3. package/cjs/components/stock-count-keyboard/stock-count-keyboard.css +39 -38
  4. package/cjs/components/stock-count-keyboard/stock-count-keyboard.js +1 -1
  5. package/cjs/components/stock-keyboard/stock-keyboard.css +50 -52
  6. package/cjs/components/stock-keyboard/stock-keyboard.js +3 -3
  7. package/cjs/global/global.css +1 -1
  8. package/cjs/global/theme-dark.css +1 -1
  9. package/es/components/card/card.js +2 -2
  10. package/es/components/number-keyboard/number-keyboard.css +13 -20
  11. package/es/components/stock-count-keyboard/stock-count-keyboard.css +39 -38
  12. package/es/components/stock-count-keyboard/stock-count-keyboard.js +1 -1
  13. package/es/components/stock-keyboard/stock-keyboard.css +50 -52
  14. package/es/components/stock-keyboard/stock-keyboard.js +3 -3
  15. package/es/global/global.css +1 -1
  16. package/es/global/theme-dark.css +1 -1
  17. package/package.json +1 -1
package/cjs/components/card/card.js CHANGED
@@ -16,7 +16,7 @@ function Card(props) {
16
16
  return null;
17
17
  }
18
18
  return _react.default.createElement("div", {
19
- className: (0, _classnames.default)("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
19
+ className: (0, _classnames.default)("".concat(classPrefix, "-header"), "".concat(typeClassName, "-header"), props.headerClassName),
20
20
  style: props.headerStyle,
21
21
  onClick: props.onHeaderClick
22
22
  }, _react.default.createElement("div", {
@@ -28,7 +28,7 @@ function Card(props) {
28
28
  return null;
29
29
  }
30
30
  return _react.default.createElement("div", {
31
- className: (0, _classnames.default)("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
31
+ className: (0, _classnames.default)("".concat(classPrefix, "-body"), "".concat(typeClassName, "-body"), props.bodyClassName),
32
32
  style: props.bodyStyle,
33
33
  onClick: props.onBodyClick
34
34
  }, props.children);
package/cjs/components/number-keyboard/number-keyboard.css CHANGED
@@ -28,33 +28,34 @@ html[data-prefers-color-scheme='dark'] {
28
28
  }
29
29
  .ebscn-number-keyboard :last-child {
30
30
  background: var(--ebscn-color-primary);
31
- color: var(--ebscn-color-background);
31
+ color: #fff;
32
32
  }
33
- .ebscn-number-keyboard-key {
33
+ .ebscn-number-keyboard-key,
34
+ .ebscn-number-keyboard-confirmKey {
34
35
  width: calc(25% - 7.5px);
35
- height: 48px;
36
- line-height: 48px;
36
+ height: 48.5px;
37
+ line-height: 48.5px;
37
38
  border-radius: 4.17px;
38
39
  margin: 3px;
39
40
  text-align: center;
40
- font-size: 24px;
41
41
  font-weight: bold;
42
- color: var(--ebscn-color-text-dark-solid);
43
- font-weight: 300;
42
+ font-weight: 400;
43
+ }
44
+ .ebscn-number-keyboard-key {
45
+ font-size: 23px;
44
46
  color: var(--ebscn-color-text);
45
- box-shadow: 0 0 0 1px #cccccc;
46
47
  background: var(--ebscn-color-keyboard-key-bg);
47
48
  }
48
49
  .ebscn-number-keyboard-key:active {
49
50
  background: var(--ebscn-color-keyboard-active-background);
50
51
  }
51
52
  .ebscn-number-keyboard-option {
52
- font-size: var(--ebscn-font-size-11);
53
+ font-size: var(--ebscn-font-size-10);
53
54
  color: var(--ebscn-color-text);
54
55
  background-color: var(--ebscn-color-functionkey-background);
55
56
  }
56
57
  .ebscn-number-keyboard-option:active {
57
- font-size: var(--ebscn-font-size-11);
58
+ font-size: var(--ebscn-font-size-10);
58
59
  background-color: var(--ebscn-color-keyboard-active-background);
59
60
  }
60
61
  .ebscn-number-keyboard-delete {
@@ -67,16 +68,8 @@ html[data-prefers-color-scheme='dark'] {
67
68
  }
68
69
  .ebscn-number-keyboard-confirmKey {
69
70
  background-color: var(--ebscn-color-primary);
70
- width: calc(25% - 7.5px);
71
- height: 48px;
72
- line-height: 48px;
73
- text-align: center;
74
- border-radius: 4.17px;
75
- margin: 3px;
76
- font-size: var(--ebscn-font-size-11);
77
- color: var(--ebscn-color-text-dark-solid);
78
- font-weight: 300;
79
- box-shadow: 0 0 0 1px #cccccc;
71
+ width: calc(25% - 6px);
72
+ font-size: var(--ebscn-font-size-10);
80
73
  }
81
74
  .ebscn-number-keyboard-confirmKey:active {
82
75
  background-color: #D03B21;
package/cjs/components/stock-count-keyboard/stock-count-keyboard.css CHANGED
@@ -1,3 +1,15 @@
1
+ :root {
2
+ --ebscn-color-keyboard-bg: #d2d5d8;
3
+ --ebscn-color-keyboard-key-bg: #fff;
4
+ --ebscn-color-functionkey-background: #adb3bd;
5
+ --ebscn-color-keyboard-active-background: #E5E5E5;
6
+ }
7
+ html[data-prefers-color-scheme='dark'] {
8
+ --ebscn-color-keyboard-bg: #1a1a1a;
9
+ --ebscn-color-keyboard-key-bg: #474747;
10
+ --ebscn-color-functionkey-background: #292929;
11
+ --ebscn-color-keyboard-active-background: #323232;
12
+ }
1
13
  .ebscn-stock-count-keyboard {
2
14
  display: none;
3
15
  position: fixed;
@@ -6,69 +18,58 @@
6
18
  display: flex;
7
19
  flex-wrap: wrap;
8
20
  width: 100%;
9
- height: 216px;
21
+ height: 223px;
22
+ background-color: var(--ebscn-color-keyboard-bg);
23
+ padding: 3px;
10
24
  transition: all 0.5s;
11
25
  align-content: flex-start;
12
26
  }
13
- .ebscn-stock-count-keyboard :last-child {
14
- background: var(--ebscn-color-primary);
15
- color: var(--ebscn-color-background);
27
+ .ebscn-stock-count-keyboard-key,
28
+ .ebscn-stock-count-keyboard-confirmKey {
29
+ border-radius: 4.17px;
30
+ width: calc(20% - 7.5px);
31
+ margin: 3px;
32
+ height: 48px;
33
+ text-align: center;
34
+ line-height: 48px;
35
+ font-weight: 400;
16
36
  }
17
37
  .ebscn-stock-count-keyboard-key {
18
- width: 20%;
19
- height: 54px;
20
- text-align: center;
21
- line-height: 54px;
22
- font-size: 24px;
23
- color: var(--ebscn-color-text-dark-solid);
24
- font-weight: 300;
25
- box-shadow: 0 0 0 1px #cccccc;
26
- background: var(--ebscn-color-background);
38
+ font-size: 23px;
39
+ color: var(--ebscn-color-text);
40
+ background: var(--ebscn-color-keyboard-key-bg);
27
41
  }
28
42
  .ebscn-stock-count-keyboard-key:active {
29
- width: 20%;
30
- height: 54px;
31
- text-align: center;
32
- font-size: 24px;
33
- color: var(--ebscn-color-text-dark-solid);
34
- font-weight: 300;
35
- box-shadow: 0 0 0 1px #cccccc;
36
- background: var(--ebscn-color-border);
43
+ background: var(--ebscn-color-keyboard-active-background);
37
44
  }
38
45
  .ebscn-stock-count-keyboard-option {
39
- font-size: var(--ebscn-font-size-11);
40
- background: #e1e3e8;
46
+ font-size: var(--ebscn-font-size-10);
47
+ color: var(--ebscn-color-text);
48
+ background-color: var(--ebscn-color-functionkey-background);
41
49
  }
42
50
  .ebscn-stock-count-keyboard-option:active {
43
- font-size: var(--ebscn-font-size-11);
44
- background: #CACBD0;
51
+ font-size: var(--ebscn-font-size-10);
52
+ background-color: var(--ebscn-color-keyboard-active-background);
45
53
  }
46
54
  .ebscn-stock-count-keyboard-delete {
47
- background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
55
+ background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
48
56
  background-size: 24px 24px;
49
57
  }
50
58
  .ebscn-stock-count-keyboard-delete:active {
51
- background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
59
+ background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
52
60
  background-size: 24px 24px;
53
61
  }
54
62
  .ebscn-stock-count-keyboard-confirmKey {
55
63
  background-color: var(--ebscn-color-primary);
56
- width: 20%;
57
- height: 54px;
58
- line-height: 54px;
59
- text-align: center;
60
- font-size: var(--ebscn-font-size-11);
61
- color: var(--ebscn-color-text-dark-solid);
62
- font-weight: 300;
63
- box-shadow: 0 0 0 1px #cccccc;
64
+ font-size: var(--ebscn-font-size-10);
65
+ color: var(--ebscn-color-white);
64
66
  }
65
67
  .ebscn-stock-count-keyboard-confirmKey:active {
66
68
  background-color: #D03B21;
67
- color: var(--ebscn-color-background);
68
69
  }
69
70
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
70
71
  .ebscn-stock-count-keyboard {
71
- height: calc(216px + env(safe-area-inset-bottom));
72
- height: calc(216px + constant(safe-area-inset-bottom));
72
+ height: calc(223px + env(safe-area-inset-bottom));
73
+ height: calc(223px + constant(safe-area-inset-bottom));
73
74
  }
74
75
  }
package/cjs/components/stock-count-keyboard/stock-count-keyboard.js CHANGED
@@ -71,7 +71,7 @@ function StockCountKeyboard(p) {
71
71
  }, keys.map(function (item, index) {
72
72
  return _react.default.createElement("div", {
73
73
  key: item || index,
74
- className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
74
+ className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item !== '00' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
75
75
  onClick: function () {
76
76
  if (visible) {
77
77
  onKeyPress(item);
package/cjs/components/stock-keyboard/stock-keyboard.css CHANGED
@@ -1,3 +1,15 @@
1
+ :root {
2
+ --ebscn-color-keyboard-bg: #d2d5d8;
3
+ --ebscn-color-keyboard-key-bg: #fff;
4
+ --ebscn-color-functionkey-background: #adb3bd;
5
+ --ebscn-color-keyboard-active-background: #E5E5E5;
6
+ }
7
+ html[data-prefers-color-scheme='dark'] {
8
+ --ebscn-color-keyboard-bg: #1a1a1a;
9
+ --ebscn-color-keyboard-key-bg: #474747;
10
+ --ebscn-color-functionkey-background: #292929;
11
+ --ebscn-color-keyboard-active-background: #323232;
12
+ }
1
13
  .ebscn-stock-keyboard {
2
14
  transform: translateY(101%);
3
15
  display: flex;
@@ -5,107 +17,93 @@
5
17
  bottom: 0;
6
18
  flex-direction: row;
7
19
  width: 100%;
8
- height: 216px;
20
+ height: 223px;
9
21
  transition: all 0.5s;
10
22
  align-content: flex-start;
23
+ background-color: var(--ebscn-color-keyboard-bg);
11
24
  }
12
25
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right {
13
26
  display: flex;
14
27
  flex-wrap: wrap;
15
28
  width: 80%;
16
- height: 216px;
29
+ height: 223px;
17
30
  transition: all 0.5s;
18
31
  align-content: flex-start;
19
32
  }
20
33
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right :last-child {
21
34
  background: var(--ebscn-color-primary);
22
- color: var(--ebscn-color-white);
35
+ color: #fff;
23
36
  }
24
- .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
25
- width: 25%;
26
- height: 54px;
27
- line-height: 54px;
37
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key,
38
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
39
+ width: calc(25% - 7.5px);
40
+ margin: 6px 3px 0 3px;
41
+ border-radius: 4.17px;
42
+ height: 48px;
43
+ line-height: 48px;
28
44
  text-align: center;
29
- font-size: 24px;
30
- color: #000000;
31
- font-weight: 300;
32
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
45
+ font-weight: 400;
46
+ }
47
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
48
+ color: var(--ebscn-color-text);
49
+ font-size: 23px;
33
50
  background: var(--ebscn-color-white);
34
51
  }
35
52
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key:active {
36
- width: 25%;
37
- height: 54px;
38
- line-height: 54px;
39
- text-align: center;
40
- font-size: 24px;
41
- color: #000000;
42
- font-weight: 300;
43
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
44
- background: var(--ebscn-color-border);
53
+ background: var(--ebscn-color-keyboard-active-background);
45
54
  }
46
55
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-option {
47
- font-size: var(--ebscn-font-size-11);
48
- background: #e1e3e8;
56
+ font-size: var(--ebscn-font-size-10);
57
+ color: var(--ebscn-color-text);
58
+ background-color: var(--ebscn-color-functionkey-background);
49
59
  }
50
60
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
51
- font-size: var(--ebscn-font-size-11);
52
- background: #CACBD0;
61
+ font-size: var(--ebscn-font-size-10);
62
+ background-color: var(--ebscn-color-keyboard-active-background);
53
63
  }
54
64
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
55
- background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
65
+ background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
56
66
  background-size: 24px 24px;
57
67
  }
58
68
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
59
- background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
69
+ background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
60
70
  background-size: 24px 24px;
61
71
  }
62
- .ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
63
- padding-top: 24px;
64
- padding-bottom: 16px;
65
- font-size: var(--ebscn-font-size-10);
66
- color: #333333;
67
- text-align: center;
68
- font-weight: 500;
69
- }
70
72
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
73
+ font-size: var(--ebscn-font-size-10);
74
+ width: calc(25% - 7.5px);
71
75
  background-color: var(--ebscn-color-primary);
72
- width: 25%;
73
- height: 54px;
74
- line-height: 54px;
75
- text-align: center;
76
- font-size: var(--ebscn-font-size-11);
77
- color: #000000;
78
- font-weight: 300;
79
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
80
76
  }
81
77
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
82
78
  background-color: #D03B21;
83
79
  color: var(--ebscn-color-white);
84
80
  }
81
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-bottom-option {
82
+ font-size: var(--ebscn-font-size-10);
83
+ }
85
84
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left {
86
85
  width: 20%;
87
- height: 216px;
88
86
  }
89
87
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left-key {
90
88
  display: flex;
91
89
  align-items: center;
92
90
  justify-content: center;
93
- height: 20%;
91
+ border-radius: 4.17px;
92
+ height: 48px;
93
+ margin: 6px 3px 6px 6px;
94
94
  font-size: var(--ebscn-font-size-10);
95
95
  font-weight: 400;
96
96
  text-align: center;
97
- color: #333333;
98
- line-height: 25px;
99
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
100
- background: #e1e3e8;
97
+ color: var(--ebscn-color-text);
98
+ line-height: 48px;
99
+ background-color: var(--ebscn-color-functionkey-background);
101
100
  }
102
101
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
103
- font-size: 18px;
104
- background: #CACBD0;
102
+ background: var(--ebscn-color-keyboard-active-background);
105
103
  }
106
104
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
107
105
  .ebscn-stock-keyboard {
108
- height: calc(216px + env(safe-area-inset-bottom));
109
- height: calc(216px + constant(safe-area-inset-bottom));
106
+ height: calc(223px + env(safe-area-inset-bottom));
107
+ height: calc(223px + constant(safe-area-inset-bottom));
110
108
  }
111
109
  }
package/cjs/components/stock-keyboard/stock-keyboard.js CHANGED
@@ -25,8 +25,8 @@ function StockKeyboard(p) {
25
25
  onClean = props.onClean,
26
26
  onConfirm = props.onConfirm,
27
27
  onChangeKeyBoard = props.onChangeKeyBoard;
28
- var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '', '确定'];
29
- var leftKeys = ['600', '601', '000', '002', '300'];
28
+ var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '002', '确定'];
29
+ var leftKeys = ['600', '601', '000', '300'];
30
30
  var hideTimer = (0, _react.useRef)(null);
31
31
  var appearTimer = (0, _react.useRef)(null);
32
32
  var lastVisible = (0, _react.useRef)(null);
@@ -96,7 +96,7 @@ function StockKeyboard(p) {
96
96
  }, keys.map(function (item, index) {
97
97
  return _react.default.createElement("div", {
98
98
  key: item || index,
99
- className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
99
+ className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), item === 'ABC' || item === '002' ? "".concat(classPrefix, "-right-bottom-option") : '', typeof item !== 'number' && item !== 'ABC' && item !== '002' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
100
100
  onClick: function () {
101
101
  if (visible) {
102
102
  onKeyPress(item);
package/cjs/global/global.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --ebscn-color-split-line: #EBEBEB;
48
48
  }
49
49
  html[data-prefers-color-scheme='dark'] {
50
- --ebscn-color-primary: #3086ff;
50
+ --ebscn-color-blue: #4c7cf1;
51
51
  --ebscn-color-success: #34b368;
52
52
  --ebscn-color-warning: #ffa930;
53
53
  --ebscn-color-danger: #ff4a58;
package/cjs/global/theme-dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  html[data-prefers-color-scheme='dark'] {
2
- --ebscn-color-primary: #3086ff;
2
+ --ebscn-color-blue: #4c7cf1;
3
3
  --ebscn-color-success: #34b368;
4
4
  --ebscn-color-warning: #ffa930;
5
5
  --ebscn-color-danger: #ff4a58;
package/es/components/card/card.js CHANGED
@@ -9,7 +9,7 @@ export default function Card(props) {
9
9
  return null;
10
10
  }
11
11
  return React.createElement("div", {
12
- className: cns("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
12
+ className: cns("".concat(classPrefix, "-header"), "".concat(typeClassName, "-header"), props.headerClassName),
13
13
  style: props.headerStyle,
14
14
  onClick: props.onHeaderClick
15
15
  }, React.createElement("div", {
@@ -21,7 +21,7 @@ export default function Card(props) {
21
21
  return null;
22
22
  }
23
23
  return React.createElement("div", {
24
- className: cns("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
24
+ className: cns("".concat(classPrefix, "-body"), "".concat(typeClassName, "-body"), props.bodyClassName),
25
25
  style: props.bodyStyle,
26
26
  onClick: props.onBodyClick
27
27
  }, props.children);
package/es/components/number-keyboard/number-keyboard.css CHANGED
@@ -28,33 +28,34 @@ html[data-prefers-color-scheme='dark'] {
28
28
  }
29
29
  .ebscn-number-keyboard :last-child {
30
30
  background: var(--ebscn-color-primary);
31
- color: var(--ebscn-color-background);
31
+ color: #fff;
32
32
  }
33
- .ebscn-number-keyboard-key {
33
+ .ebscn-number-keyboard-key,
34
+ .ebscn-number-keyboard-confirmKey {
34
35
  width: calc(25% - 7.5px);
35
- height: 48px;
36
- line-height: 48px;
36
+ height: 48.5px;
37
+ line-height: 48.5px;
37
38
  border-radius: 4.17px;
38
39
  margin: 3px;
39
40
  text-align: center;
40
- font-size: 24px;
41
41
  font-weight: bold;
42
- color: var(--ebscn-color-text-dark-solid);
43
- font-weight: 300;
42
+ font-weight: 400;
43
+ }
44
+ .ebscn-number-keyboard-key {
45
+ font-size: 23px;
44
46
  color: var(--ebscn-color-text);
45
- box-shadow: 0 0 0 1px #cccccc;
46
47
  background: var(--ebscn-color-keyboard-key-bg);
47
48
  }
48
49
  .ebscn-number-keyboard-key:active {
49
50
  background: var(--ebscn-color-keyboard-active-background);
50
51
  }
51
52
  .ebscn-number-keyboard-option {
52
- font-size: var(--ebscn-font-size-11);
53
+ font-size: var(--ebscn-font-size-10);
53
54
  color: var(--ebscn-color-text);
54
55
  background-color: var(--ebscn-color-functionkey-background);
55
56
  }
56
57
  .ebscn-number-keyboard-option:active {
57
- font-size: var(--ebscn-font-size-11);
58
+ font-size: var(--ebscn-font-size-10);
58
59
  background-color: var(--ebscn-color-keyboard-active-background);
59
60
  }
60
61
  .ebscn-number-keyboard-delete {
@@ -67,16 +68,8 @@ html[data-prefers-color-scheme='dark'] {
67
68
  }
68
69
  .ebscn-number-keyboard-confirmKey {
69
70
  background-color: var(--ebscn-color-primary);
70
- width: calc(25% - 7.5px);
71
- height: 48px;
72
- line-height: 48px;
73
- text-align: center;
74
- border-radius: 4.17px;
75
- margin: 3px;
76
- font-size: var(--ebscn-font-size-11);
77
- color: var(--ebscn-color-text-dark-solid);
78
- font-weight: 300;
79
- box-shadow: 0 0 0 1px #cccccc;
71
+ width: calc(25% - 6px);
72
+ font-size: var(--ebscn-font-size-10);
80
73
  }
81
74
  .ebscn-number-keyboard-confirmKey:active {
82
75
  background-color: #D03B21;
package/es/components/stock-count-keyboard/stock-count-keyboard.css CHANGED
@@ -1,3 +1,15 @@
1
+ :root {
2
+ --ebscn-color-keyboard-bg: #d2d5d8;
3
+ --ebscn-color-keyboard-key-bg: #fff;
4
+ --ebscn-color-functionkey-background: #adb3bd;
5
+ --ebscn-color-keyboard-active-background: #E5E5E5;
6
+ }
7
+ html[data-prefers-color-scheme='dark'] {
8
+ --ebscn-color-keyboard-bg: #1a1a1a;
9
+ --ebscn-color-keyboard-key-bg: #474747;
10
+ --ebscn-color-functionkey-background: #292929;
11
+ --ebscn-color-keyboard-active-background: #323232;
12
+ }
1
13
  .ebscn-stock-count-keyboard {
2
14
  display: none;
3
15
  position: fixed;
@@ -6,69 +18,58 @@
6
18
  display: flex;
7
19
  flex-wrap: wrap;
8
20
  width: 100%;
9
- height: 216px;
21
+ height: 223px;
22
+ background-color: var(--ebscn-color-keyboard-bg);
23
+ padding: 3px;
10
24
  transition: all 0.5s;
11
25
  align-content: flex-start;
12
26
  }
13
- .ebscn-stock-count-keyboard :last-child {
14
- background: var(--ebscn-color-primary);
15
- color: var(--ebscn-color-background);
27
+ .ebscn-stock-count-keyboard-key,
28
+ .ebscn-stock-count-keyboard-confirmKey {
29
+ border-radius: 4.17px;
30
+ width: calc(20% - 7.5px);
31
+ margin: 3px;
32
+ height: 48px;
33
+ text-align: center;
34
+ line-height: 48px;
35
+ font-weight: 400;
16
36
  }
17
37
  .ebscn-stock-count-keyboard-key {
18
- width: 20%;
19
- height: 54px;
20
- text-align: center;
21
- line-height: 54px;
22
- font-size: 24px;
23
- color: var(--ebscn-color-text-dark-solid);
24
- font-weight: 300;
25
- box-shadow: 0 0 0 1px #cccccc;
26
- background: var(--ebscn-color-background);
38
+ font-size: 23px;
39
+ color: var(--ebscn-color-text);
40
+ background: var(--ebscn-color-keyboard-key-bg);
27
41
  }
28
42
  .ebscn-stock-count-keyboard-key:active {
29
- width: 20%;
30
- height: 54px;
31
- text-align: center;
32
- font-size: 24px;
33
- color: var(--ebscn-color-text-dark-solid);
34
- font-weight: 300;
35
- box-shadow: 0 0 0 1px #cccccc;
36
- background: var(--ebscn-color-border);
43
+ background: var(--ebscn-color-keyboard-active-background);
37
44
  }
38
45
  .ebscn-stock-count-keyboard-option {
39
- font-size: var(--ebscn-font-size-11);
40
- background: #e1e3e8;
46
+ font-size: var(--ebscn-font-size-10);
47
+ color: var(--ebscn-color-text);
48
+ background-color: var(--ebscn-color-functionkey-background);
41
49
  }
42
50
  .ebscn-stock-count-keyboard-option:active {
43
- font-size: var(--ebscn-font-size-11);
44
- background: #CACBD0;
51
+ font-size: var(--ebscn-font-size-10);
52
+ background-color: var(--ebscn-color-keyboard-active-background);
45
53
  }
46
54
  .ebscn-stock-count-keyboard-delete {
47
- background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
55
+ background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
48
56
  background-size: 24px 24px;
49
57
  }
50
58
  .ebscn-stock-count-keyboard-delete:active {
51
- background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
59
+ background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
52
60
  background-size: 24px 24px;
53
61
  }
54
62
  .ebscn-stock-count-keyboard-confirmKey {
55
63
  background-color: var(--ebscn-color-primary);
56
- width: 20%;
57
- height: 54px;
58
- line-height: 54px;
59
- text-align: center;
60
- font-size: var(--ebscn-font-size-11);
61
- color: var(--ebscn-color-text-dark-solid);
62
- font-weight: 300;
63
- box-shadow: 0 0 0 1px #cccccc;
64
+ font-size: var(--ebscn-font-size-10);
65
+ color: var(--ebscn-color-white);
64
66
  }
65
67
  .ebscn-stock-count-keyboard-confirmKey:active {
66
68
  background-color: #D03B21;
67
- color: var(--ebscn-color-background);
68
69
  }
69
70
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
70
71
  .ebscn-stock-count-keyboard {
71
- height: calc(216px + env(safe-area-inset-bottom));
72
- height: calc(216px + constant(safe-area-inset-bottom));
72
+ height: calc(223px + env(safe-area-inset-bottom));
73
+ height: calc(223px + constant(safe-area-inset-bottom));
73
74
  }
74
75
  }
package/es/components/stock-count-keyboard/stock-count-keyboard.js CHANGED
@@ -63,7 +63,7 @@ export function StockCountKeyboard(p) {
63
63
  }, keys.map(function (item, index) {
64
64
  return React.createElement("div", {
65
65
  key: item || index,
66
- className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
66
+ className: cns(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item !== '00' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
67
67
  onClick: function () {
68
68
  if (visible) {
69
69
  onKeyPress(item);
package/es/components/stock-keyboard/stock-keyboard.css CHANGED
@@ -1,3 +1,15 @@
1
+ :root {
2
+ --ebscn-color-keyboard-bg: #d2d5d8;
3
+ --ebscn-color-keyboard-key-bg: #fff;
4
+ --ebscn-color-functionkey-background: #adb3bd;
5
+ --ebscn-color-keyboard-active-background: #E5E5E5;
6
+ }
7
+ html[data-prefers-color-scheme='dark'] {
8
+ --ebscn-color-keyboard-bg: #1a1a1a;
9
+ --ebscn-color-keyboard-key-bg: #474747;
10
+ --ebscn-color-functionkey-background: #292929;
11
+ --ebscn-color-keyboard-active-background: #323232;
12
+ }
1
13
  .ebscn-stock-keyboard {
2
14
  transform: translateY(101%);
3
15
  display: flex;
@@ -5,107 +17,93 @@
5
17
  bottom: 0;
6
18
  flex-direction: row;
7
19
  width: 100%;
8
- height: 216px;
20
+ height: 223px;
9
21
  transition: all 0.5s;
10
22
  align-content: flex-start;
23
+ background-color: var(--ebscn-color-keyboard-bg);
11
24
  }
12
25
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right {
13
26
  display: flex;
14
27
  flex-wrap: wrap;
15
28
  width: 80%;
16
- height: 216px;
29
+ height: 223px;
17
30
  transition: all 0.5s;
18
31
  align-content: flex-start;
19
32
  }
20
33
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right :last-child {
21
34
  background: var(--ebscn-color-primary);
22
- color: var(--ebscn-color-white);
35
+ color: #fff;
23
36
  }
24
- .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
25
- width: 25%;
26
- height: 54px;
27
- line-height: 54px;
37
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key,
38
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
39
+ width: calc(25% - 7.5px);
40
+ margin: 6px 3px 0 3px;
41
+ border-radius: 4.17px;
42
+ height: 48px;
43
+ line-height: 48px;
28
44
  text-align: center;
29
- font-size: 24px;
30
- color: #000000;
31
- font-weight: 300;
32
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
45
+ font-weight: 400;
46
+ }
47
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
48
+ color: var(--ebscn-color-text);
49
+ font-size: 23px;
33
50
  background: var(--ebscn-color-white);
34
51
  }
35
52
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-key:active {
36
- width: 25%;
37
- height: 54px;
38
- line-height: 54px;
39
- text-align: center;
40
- font-size: 24px;
41
- color: #000000;
42
- font-weight: 300;
43
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
44
- background: var(--ebscn-color-border);
53
+ background: var(--ebscn-color-keyboard-active-background);
45
54
  }
46
55
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-option {
47
- font-size: var(--ebscn-font-size-11);
48
- background: #e1e3e8;
56
+ font-size: var(--ebscn-font-size-10);
57
+ color: var(--ebscn-color-text);
58
+ background-color: var(--ebscn-color-functionkey-background);
49
59
  }
50
60
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
51
- font-size: var(--ebscn-font-size-11);
52
- background: #CACBD0;
61
+ font-size: var(--ebscn-font-size-10);
62
+ background-color: var(--ebscn-color-keyboard-active-background);
53
63
  }
54
64
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
55
- background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
65
+ background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
56
66
  background-size: 24px 24px;
57
67
  }
58
68
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
59
- background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
69
+ background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
60
70
  background-size: 24px 24px;
61
71
  }
62
- .ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
63
- padding-top: 24px;
64
- padding-bottom: 16px;
65
- font-size: var(--ebscn-font-size-10);
66
- color: #333333;
67
- text-align: center;
68
- font-weight: 500;
69
- }
70
72
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
73
+ font-size: var(--ebscn-font-size-10);
74
+ width: calc(25% - 7.5px);
71
75
  background-color: var(--ebscn-color-primary);
72
- width: 25%;
73
- height: 54px;
74
- line-height: 54px;
75
- text-align: center;
76
- font-size: var(--ebscn-font-size-11);
77
- color: #000000;
78
- font-weight: 300;
79
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
80
76
  }
81
77
  .ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
82
78
  background-color: #D03B21;
83
79
  color: var(--ebscn-color-white);
84
80
  }
81
+ .ebscn-stock-keyboard .ebscn-stock-keyboard-right-bottom-option {
82
+ font-size: var(--ebscn-font-size-10);
83
+ }
85
84
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left {
86
85
  width: 20%;
87
- height: 216px;
88
86
  }
89
87
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left-key {
90
88
  display: flex;
91
89
  align-items: center;
92
90
  justify-content: center;
93
- height: 20%;
91
+ border-radius: 4.17px;
92
+ height: 48px;
93
+ margin: 6px 3px 6px 6px;
94
94
  font-size: var(--ebscn-font-size-10);
95
95
  font-weight: 400;
96
96
  text-align: center;
97
- color: #333333;
98
- line-height: 25px;
99
- box-shadow: 0 0 0 1px var(--ebscn-color-light);
100
- background: #e1e3e8;
97
+ color: var(--ebscn-color-text);
98
+ line-height: 48px;
99
+ background-color: var(--ebscn-color-functionkey-background);
101
100
  }
102
101
  .ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
103
- font-size: 18px;
104
- background: #CACBD0;
102
+ background: var(--ebscn-color-keyboard-active-background);
105
103
  }
106
104
  @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
107
105
  .ebscn-stock-keyboard {
108
- height: calc(216px + env(safe-area-inset-bottom));
109
- height: calc(216px + constant(safe-area-inset-bottom));
106
+ height: calc(223px + env(safe-area-inset-bottom));
107
+ height: calc(223px + constant(safe-area-inset-bottom));
110
108
  }
111
109
  }
package/es/components/stock-keyboard/stock-keyboard.js CHANGED
@@ -17,8 +17,8 @@ export function StockKeyboard(p) {
17
17
  onClean = props.onClean,
18
18
  onConfirm = props.onConfirm,
19
19
  onChangeKeyBoard = props.onChangeKeyBoard;
20
- var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '', '确定'];
21
- var leftKeys = ['600', '601', '000', '002', '300'];
20
+ var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '002', '确定'];
21
+ var leftKeys = ['600', '601', '000', '300'];
22
22
  var hideTimer = useRef(null);
23
23
  var appearTimer = useRef(null);
24
24
  var lastVisible = useRef(null);
@@ -88,7 +88,7 @@ export function StockKeyboard(p) {
88
88
  }, keys.map(function (item, index) {
89
89
  return React.createElement("div", {
90
90
  key: item || index,
91
- className: cns(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
91
+ className: cns(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), item === 'ABC' || item === '002' ? "".concat(classPrefix, "-right-bottom-option") : '', typeof item !== 'number' && item !== 'ABC' && item !== '002' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
92
92
  onClick: function () {
93
93
  if (visible) {
94
94
  onKeyPress(item);
package/es/global/global.css CHANGED
@@ -47,7 +47,7 @@
47
47
  --ebscn-color-split-line: #EBEBEB;
48
48
  }
49
49
  html[data-prefers-color-scheme='dark'] {
50
- --ebscn-color-primary: #3086ff;
50
+ --ebscn-color-blue: #4c7cf1;
51
51
  --ebscn-color-success: #34b368;
52
52
  --ebscn-color-warning: #ffa930;
53
53
  --ebscn-color-danger: #ff4a58;
package/es/global/theme-dark.css CHANGED
@@ -1,5 +1,5 @@
1
1
  html[data-prefers-color-scheme='dark'] {
2
- --ebscn-color-primary: #3086ff;
2
+ --ebscn-color-blue: #4c7cf1;
3
3
  --ebscn-color-success: #34b368;
4
4
  --ebscn-color-warning: #ffa930;
5
5
  --ebscn-color-danger: #ff4a58;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebscn/ui",
3
- "version": "1.0.3-beta.4",
3
+ "version": "1.0.3-beta.6",
4
4
  "description": "ebscn react library",
5
5
  "module": "./es/index.js",
6
6
  "types": "./es/index.d.ts",