@ebscn/ui 1.0.3-beta.15 → 1.0.3-beta.17

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 (29) hide show
  1. package/cjs/components/checkbox/checkbox.css +8 -3
  2. package/cjs/components/header/header.css +7 -1
  3. package/cjs/components/header/header.js +4 -2
  4. package/cjs/components/infinite-scroll/infinite-scroll.js +1 -1
  5. package/cjs/components/picker-view/picker-view.css +3 -2
  6. package/cjs/components/selector/selector.css +1 -1
  7. package/cjs/components/skeleton/skeleton.css +3 -3
  8. package/cjs/components/squared-grid/squared-grid.css +1 -2
  9. package/cjs/components/squared-grid/squared-grid.d.ts +2 -1
  10. package/cjs/components/squared-grid/squared-grid.js +11 -2
  11. package/cjs/components/switch/switch.css +2 -3
  12. package/cjs/components/tabs/tabs.js +3 -3
  13. package/cjs/global/global.css +2 -2
  14. package/cjs/global/theme-default.css +2 -2
  15. package/es/components/checkbox/checkbox.css +8 -3
  16. package/es/components/header/header.css +7 -1
  17. package/es/components/header/header.js +4 -2
  18. package/es/components/infinite-scroll/infinite-scroll.js +1 -1
  19. package/es/components/picker-view/picker-view.css +3 -2
  20. package/es/components/selector/selector.css +1 -1
  21. package/es/components/skeleton/skeleton.css +3 -3
  22. package/es/components/squared-grid/squared-grid.css +1 -2
  23. package/es/components/squared-grid/squared-grid.d.ts +2 -1
  24. package/es/components/squared-grid/squared-grid.js +11 -2
  25. package/es/components/switch/switch.css +2 -3
  26. package/es/components/tabs/tabs.js +3 -3
  27. package/es/global/global.css +2 -2
  28. package/es/global/theme-default.css +2 -2
  29. package/package.json +1 -1
package/cjs/components/checkbox/checkbox.css CHANGED
@@ -1,11 +1,14 @@
1
1
  .ebscn-checkbox {
2
- --icon-size: 24px;
2
+ --icon-size: 20px;
3
+ --icon-wrap-size: 24px;
3
4
  --font-size: var(--ebscn-font-size-8);
4
5
  --gap: 12px;
5
6
  display: inline-flex;
6
7
  vertical-align: text-bottom;
7
8
  justify-content: flex-start;
8
9
  align-items: center;
10
+ min-width: var(--icon-wrap-size);
11
+ min-height: var(--icon-wrap-size);
9
12
  cursor: pointer;
10
13
  }
11
14
  .ebscn-checkbox input {
@@ -17,11 +20,14 @@
17
20
  --gap: 9px;
18
21
  }
19
22
  .ebscn-checkbox .ebscn-checkbox-icon {
23
+ margin: auto;
20
24
  flex: none;
21
25
  border-radius: var(--icon-size);
22
26
  border: 1px solid var(--ebscn-color-light);
23
27
  box-sizing: border-box;
24
- width: var(--icon-size);
28
+ width: 20px;
29
+ width: var(---icon-size);
30
+ height: 20px;
25
31
  height: var(--icon-size);
26
32
  color: var(--ebscn-color-text-light-solid);
27
33
  }
@@ -81,7 +87,6 @@
81
87
  }
82
88
  .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
83
89
  margin-right: 16px;
84
- height: 100%;
85
90
  border-color: transparent;
86
91
  }
87
92
  .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {
package/cjs/components/header/header.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --bgColor: #FFFFFF;
4
4
  --subTitleColor: #666666;
5
5
  --buttonColor: #666666;
6
+ --icon-size: 20px;
6
7
  display: flex;
7
8
  align-items: center;
8
9
  height: 44px;
@@ -15,7 +16,11 @@
15
16
  .ebscn-header-left,
16
17
  .ebscn-header-right {
17
18
  flex: 1;
18
- font-size: 28px;
19
+ font-size: 20px;
20
+ font-size: var(--icon-size);
21
+ }
22
+ .ebscn-header-left-back {
23
+ padding: 4px;
19
24
  }
20
25
  .ebscn-header-title {
21
26
  flex: auto;
@@ -54,6 +59,7 @@
54
59
  display: flex;
55
60
  justify-content: flex-end;
56
61
  align-items: center;
62
+ margin-right: 4px;
57
63
  }
58
64
  .ebscn-header-text-button {
59
65
  font-size: 15px;
package/cjs/components/header/header.js CHANGED
@@ -21,11 +21,13 @@ var Header = function (p) {
21
21
  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
22
22
  className: (0, _classnames.default)(classPrefix)
23
23
  }, _react.default.createElement("div", {
24
- className: "".concat(classPrefix, "-left"),
24
+ className: "".concat(classPrefix, "-left")
25
+ }, props.showLeftIcon && _react.default.createElement("div", {
26
+ className: "".concat(classPrefix, "-left-back"),
25
27
  onClick: function () {
26
28
  return props.onLeftClick();
27
29
  }
28
- }, props.showLeftIcon && _react.default.createElement(_backIcon.default, null), props.left), _react.default.createElement("div", {
30
+ }, _react.default.createElement(_backIcon.default, null), " "), props.left), _react.default.createElement("div", {
29
31
  className: "".concat(classPrefix, "-title")
30
32
  }, props.title && _react.default.createElement("div", null, props.title), props.subTitle && _react.default.createElement("div", {
31
33
  className: "".concat(classPrefix, "-subtitle")
package/cjs/components/infinite-scroll/infinite-scroll.js CHANGED
@@ -248,7 +248,7 @@ var InfiniteScroll = function (p) {
248
248
  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
249
249
  className: classPrefix,
250
250
  ref: elementRef
251
- }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry) : props.children));
251
+ }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry, props.NoMoreContent) : props.children));
252
252
  };
253
253
  exports.InfiniteScroll = InfiniteScroll;
254
254
  var InfiniteScrollContent = function (props) {
package/cjs/components/picker-view/picker-view.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .ebscn-picker-view {
2
2
  --height: 240px;
3
- --item-height: 34px;
3
+ --item-height: 33px;
4
4
  --item-font-size: var(--ebscn-font-size-8);
5
5
  height: var(--height);
6
6
  width: 100%;
@@ -97,9 +97,10 @@
97
97
  }
98
98
  .ebscn-picker-view-mask-middle {
99
99
  height: var(--item-height);
100
+ margin: 0 16px;
100
101
  box-sizing: border-box;
101
102
  flex: none;
102
- background-color: rgba(0, 0, 0, 0.05);
103
+ background-color: rgba(0, 0, 0, 0.04);
103
104
  z-index: 0;
104
105
  }
105
106
  .ebscn-picker-view-mask-top {
package/cjs/components/selector/selector.css CHANGED
@@ -12,7 +12,7 @@
12
12
  ---gap-horizontal: var(--gap-horizontal, var(--gap));
13
13
  ---gap-vertical: var(--gap-vertical, var(--gap));
14
14
  overflow: hidden;
15
- font-size: var(--ebscn-font-size-7);
15
+ font-size: var(--ebscn-font-size-6);
16
16
  line-height: 1.4;
17
17
  }
18
18
  .ebscn-selector .ebscn-space.ebscn-space {
package/cjs/components/skeleton/skeleton.css CHANGED
@@ -9,15 +9,15 @@
9
9
  display: block;
10
10
  }
11
11
  .ebscn-skeleton.ebscn-skeleton-animated {
12
- background: linear-gradient(90deg, #f8f9fc 25%, #f8f9fc 37%, #f8f9fc 63%);
12
+ background: linear-gradient(90deg, rgba(248, 249, 245) 25%, rgba(248, 249, 245, 0.3) 37%, rgba(248, 249, 245) 63%);
13
13
  background-size: 400% 100%;
14
14
  animation: ebscn-skeleton-loading 1.3s ease infinite;
15
15
  }
16
16
  .ebscn-skeleton.ebscn-skeleton-primary {
17
- background-color: rgba(232, 66, 37, 0.2);
17
+ background-color: rgba(255, 66, 37, 0.2);
18
18
  }
19
19
  .ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
20
- background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
20
+ background: linear-gradient(90deg, rgba(255, 216, 214) 25%, rgba(255, 216, 214, 0.3) 37%, rgba(255, 216, 214) 63%);
21
21
  background-size: 400% 100%;
22
22
  animation: ebscn-skeleton-loading 1.3s ease infinite;
23
23
  }
package/cjs/components/squared-grid/squared-grid.css CHANGED
@@ -12,7 +12,6 @@
12
12
  .ebscn-squared-grid-item {
13
13
  flex: 0 0 var(--flex-basic);
14
14
  display: flex;
15
- justify-content: center;
16
15
  align-items: center;
17
16
  flex-direction: var(--item-flex-direction);
18
17
  }
@@ -20,7 +19,7 @@
20
19
  width: var(--icon-size);
21
20
  height: var(--icon-size);
22
21
  font-size: var(--icon-size);
23
- margin: 5px;
22
+ padding: 6px;
24
23
  }
25
24
  .ebscn-squared-grid-item-label {
26
25
  font-size: var(--ebscn-font-size-5);
package/cjs/components/squared-grid/squared-grid.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import type { FC, ReactNode } from 'react';
1
+ import type { CSSProperties, FC, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import { PageIndicatorProps } from '../page-indicator';
5
5
  export type SquaredGridProps = {
6
6
  maxColumns?: number;
7
7
  maxRow?: number;
8
+ justifyContent?: CSSProperties['justifyContent'];
8
9
  children?: ReactNode;
9
10
  indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
10
11
  } & NativeProps<'--row-gap' | '--icon-size'>;
package/cjs/components/squared-grid/squared-grid.js CHANGED
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.SquaredGridItem = exports.SquaredGrid = void 0;
7
- var _ = require("../..");
8
7
  var _classnames = _interopRequireDefault(require("classnames"));
9
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _ = require("../..");
10
10
  var _nativeProps = require("../../utils/native-props");
11
11
  var _withDefaultProps = require("../../utils/with-default-props");
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,8 +38,17 @@ var SquaredGrid = function (p) {
38
38
  var children = _react.default.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
39
39
  var pageSize = maxColumns * maxRow;
40
40
  var overPage = pageSize < children.length;
41
+ var justifyContent = props.justifyContent;
42
+ if (!justifyContent) {
43
+ if (children.length > maxColumns) {
44
+ justifyContent = 'flex-start';
45
+ } else {
46
+ justifyContent = 'space-around';
47
+ }
48
+ }
41
49
  var style = {
42
- '--flex': "".concat(100 / maxColumns, "%")
50
+ '--flex': "".concat(100 / maxColumns, "%"),
51
+ justifyContent: justifyContent
43
52
  };
44
53
  var renderSwiperItems = function () {
45
54
  var pages = chunkArray(children, pageSize);
package/cjs/components/switch/switch.css CHANGED
@@ -44,7 +44,7 @@
44
44
  height: calc(var(--height) - 2 * var(--border-width));
45
45
  border-radius: calc(var(--height) - 2 * var(--border-width));
46
46
  box-sizing: border-box;
47
- background: #E9E9EA;
47
+ background: #d8d8d8;
48
48
  z-index: 1;
49
49
  transition: all 200ms;
50
50
  transform: scale(1);
@@ -62,7 +62,6 @@
62
62
  top: var(--border-width);
63
63
  left: var(--border-width);
64
64
  transition: all 200ms;
65
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 11.5px 0 rgba(0, 0, 0, 0.08), -1px 2px 2px 0 rgba(0, 0, 0, 0.1);
66
65
  color: var(--ebscn-color-primary);
67
66
  }
68
67
  .ebscn-switch-inner {
@@ -95,7 +94,7 @@
95
94
  opacity: 0.4;
96
95
  }
97
96
  .ebscn-switch.ebscn-switch-disabled:before {
98
- background-color: #f4f4f4;
97
+ background-color: #e9e9ea;
99
98
  }
100
99
  .ebscn-switch-spin-icon {
101
100
  width: 14px;
package/cjs/components/tabs/tabs.js CHANGED
@@ -132,13 +132,13 @@ var Tabs = function (p) {
132
132
  var x = 0;
133
133
  var width = 0;
134
134
  if (props.activeLineMode === 'auto') {
135
- x = activeTabLeft;
135
+ x = activeTabLeft - 6;
136
136
  width = activeTabWidth;
137
137
  } else if (props.activeLineMode === 'full') {
138
- x = activeTabWrapperLeft;
138
+ x = activeTabWrapperLeft - 6;
139
139
  width = activeTabWrapperWidth;
140
140
  } else {
141
- x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
141
+ x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2 - 6;
142
142
  }
143
143
  if (isRTL) {
144
144
  /**
package/cjs/global/global.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --ebscn-color-warning: #ff8f1f;
22
22
  --ebscn-color-danger: #ff3141;
23
23
  --ebscn-color-yellow: #ff9f18;
24
- --ebscn-color-wathet: #FDECE9;
24
+ --ebscn-color-wathet: #fef4f2;
25
25
  --ebscn-color-text: #333333;
26
26
  --ebscn-color-text-secondary: #666666;
27
27
  --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
30
30
  --ebscn-color-background: #ffffff;
31
31
  --ebscn-color-highlight: var(--ebscn-color-danger);
32
32
  --ebscn-color-white: #ffffff;
33
- --ebscn-color-box: #f5f5f5;
33
+ --ebscn-color-box: #f8f9fc;
34
34
  --ebscn-color-text-light-solid: var(--ebscn-color-white);
35
35
  --ebscn-color-text-dark-solid: #000000;
36
36
  --ebscn-color-fill-content: var(--ebscn-color-box);
package/cjs/global/theme-default.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --ebscn-color-warning: #ff8f1f;
22
22
  --ebscn-color-danger: #ff3141;
23
23
  --ebscn-color-yellow: #ff9f18;
24
- --ebscn-color-wathet: #FDECE9;
24
+ --ebscn-color-wathet: #fef4f2;
25
25
  --ebscn-color-text: #333333;
26
26
  --ebscn-color-text-secondary: #666666;
27
27
  --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
30
30
  --ebscn-color-background: #ffffff;
31
31
  --ebscn-color-highlight: var(--ebscn-color-danger);
32
32
  --ebscn-color-white: #ffffff;
33
- --ebscn-color-box: #f5f5f5;
33
+ --ebscn-color-box: #f8f9fc;
34
34
  --ebscn-color-text-light-solid: var(--ebscn-color-white);
35
35
  --ebscn-color-text-dark-solid: #000000;
36
36
  --ebscn-color-fill-content: var(--ebscn-color-box);
package/es/components/checkbox/checkbox.css CHANGED
@@ -1,11 +1,14 @@
1
1
  .ebscn-checkbox {
2
- --icon-size: 24px;
2
+ --icon-size: 20px;
3
+ --icon-wrap-size: 24px;
3
4
  --font-size: var(--ebscn-font-size-8);
4
5
  --gap: 12px;
5
6
  display: inline-flex;
6
7
  vertical-align: text-bottom;
7
8
  justify-content: flex-start;
8
9
  align-items: center;
10
+ min-width: var(--icon-wrap-size);
11
+ min-height: var(--icon-wrap-size);
9
12
  cursor: pointer;
10
13
  }
11
14
  .ebscn-checkbox input {
@@ -17,11 +20,14 @@
17
20
  --gap: 9px;
18
21
  }
19
22
  .ebscn-checkbox .ebscn-checkbox-icon {
23
+ margin: auto;
20
24
  flex: none;
21
25
  border-radius: var(--icon-size);
22
26
  border: 1px solid var(--ebscn-color-light);
23
27
  box-sizing: border-box;
24
- width: var(--icon-size);
28
+ width: 20px;
29
+ width: var(---icon-size);
30
+ height: 20px;
25
31
  height: var(--icon-size);
26
32
  color: var(--ebscn-color-text-light-solid);
27
33
  }
@@ -81,7 +87,6 @@
81
87
  }
82
88
  .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
83
89
  margin-right: 16px;
84
- height: 100%;
85
90
  border-color: transparent;
86
91
  }
87
92
  .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {
package/es/components/header/header.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --bgColor: #FFFFFF;
4
4
  --subTitleColor: #666666;
5
5
  --buttonColor: #666666;
6
+ --icon-size: 20px;
6
7
  display: flex;
7
8
  align-items: center;
8
9
  height: 44px;
@@ -15,7 +16,11 @@
15
16
  .ebscn-header-left,
16
17
  .ebscn-header-right {
17
18
  flex: 1;
18
- font-size: 28px;
19
+ font-size: 20px;
20
+ font-size: var(--icon-size);
21
+ }
22
+ .ebscn-header-left-back {
23
+ padding: 4px;
19
24
  }
20
25
  .ebscn-header-title {
21
26
  flex: auto;
@@ -54,6 +59,7 @@
54
59
  display: flex;
55
60
  justify-content: flex-end;
56
61
  align-items: center;
62
+ margin-right: 4px;
57
63
  }
58
64
  .ebscn-header-text-button {
59
65
  font-size: 15px;
package/es/components/header/header.js CHANGED
@@ -14,11 +14,13 @@ var Header = function (p) {
14
14
  return withNativeProps(props, React.createElement("div", {
15
15
  className: classNames(classPrefix)
16
16
  }, React.createElement("div", {
17
- className: "".concat(classPrefix, "-left"),
17
+ className: "".concat(classPrefix, "-left")
18
+ }, props.showLeftIcon && React.createElement("div", {
19
+ className: "".concat(classPrefix, "-left-back"),
18
20
  onClick: function () {
19
21
  return props.onLeftClick();
20
22
  }
21
- }, props.showLeftIcon && React.createElement(BackIcon, null), props.left), React.createElement("div", {
23
+ }, React.createElement(BackIcon, null), " "), props.left), React.createElement("div", {
22
24
  className: "".concat(classPrefix, "-title")
23
25
  }, props.title && React.createElement("div", null, props.title), props.subTitle && React.createElement("div", {
24
26
  className: "".concat(classPrefix, "-subtitle")
package/es/components/infinite-scroll/infinite-scroll.js CHANGED
@@ -239,7 +239,7 @@ export var InfiniteScroll = function (p) {
239
239
  return withNativeProps(props, React.createElement("div", {
240
240
  className: classPrefix,
241
241
  ref: elementRef
242
- }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry) : props.children));
242
+ }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry, props.NoMoreContent) : props.children));
243
243
  };
244
244
  var InfiniteScrollContent = function (props) {
245
245
  var _a, _b;
package/es/components/picker-view/picker-view.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .ebscn-picker-view {
2
2
  --height: 240px;
3
- --item-height: 34px;
3
+ --item-height: 33px;
4
4
  --item-font-size: var(--ebscn-font-size-8);
5
5
  height: var(--height);
6
6
  width: 100%;
@@ -97,9 +97,10 @@
97
97
  }
98
98
  .ebscn-picker-view-mask-middle {
99
99
  height: var(--item-height);
100
+ margin: 0 16px;
100
101
  box-sizing: border-box;
101
102
  flex: none;
102
- background-color: rgba(0, 0, 0, 0.05);
103
+ background-color: rgba(0, 0, 0, 0.04);
103
104
  z-index: 0;
104
105
  }
105
106
  .ebscn-picker-view-mask-top {
package/es/components/selector/selector.css CHANGED
@@ -12,7 +12,7 @@
12
12
  ---gap-horizontal: var(--gap-horizontal, var(--gap));
13
13
  ---gap-vertical: var(--gap-vertical, var(--gap));
14
14
  overflow: hidden;
15
- font-size: var(--ebscn-font-size-7);
15
+ font-size: var(--ebscn-font-size-6);
16
16
  line-height: 1.4;
17
17
  }
18
18
  .ebscn-selector .ebscn-space.ebscn-space {
package/es/components/skeleton/skeleton.css CHANGED
@@ -9,15 +9,15 @@
9
9
  display: block;
10
10
  }
11
11
  .ebscn-skeleton.ebscn-skeleton-animated {
12
- background: linear-gradient(90deg, #f8f9fc 25%, #f8f9fc 37%, #f8f9fc 63%);
12
+ background: linear-gradient(90deg, rgba(248, 249, 245) 25%, rgba(248, 249, 245, 0.3) 37%, rgba(248, 249, 245) 63%);
13
13
  background-size: 400% 100%;
14
14
  animation: ebscn-skeleton-loading 1.3s ease infinite;
15
15
  }
16
16
  .ebscn-skeleton.ebscn-skeleton-primary {
17
- background-color: rgba(232, 66, 37, 0.2);
17
+ background-color: rgba(255, 66, 37, 0.2);
18
18
  }
19
19
  .ebscn-skeleton.ebscn-skeleton-primary.ebscn-skeleton.ebscn-skeleton-primary-animated {
20
- background: linear-gradient(90deg, rgba(232, 66, 37, 0.2) 25%, rgba(231, 44, 23, 0.24) 37%, rgba(232, 66, 37, 0.2) 63%);
20
+ background: linear-gradient(90deg, rgba(255, 216, 214) 25%, rgba(255, 216, 214, 0.3) 37%, rgba(255, 216, 214) 63%);
21
21
  background-size: 400% 100%;
22
22
  animation: ebscn-skeleton-loading 1.3s ease infinite;
23
23
  }
package/es/components/squared-grid/squared-grid.css CHANGED
@@ -12,7 +12,6 @@
12
12
  .ebscn-squared-grid-item {
13
13
  flex: 0 0 var(--flex-basic);
14
14
  display: flex;
15
- justify-content: center;
16
15
  align-items: center;
17
16
  flex-direction: var(--item-flex-direction);
18
17
  }
@@ -20,7 +19,7 @@
20
19
  width: var(--icon-size);
21
20
  height: var(--icon-size);
22
21
  font-size: var(--icon-size);
23
- margin: 5px;
22
+ padding: 6px;
24
23
  }
25
24
  .ebscn-squared-grid-item-label {
26
25
  font-size: var(--ebscn-font-size-5);
package/es/components/squared-grid/squared-grid.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import type { FC, ReactNode } from 'react';
1
+ import type { CSSProperties, FC, ReactNode } from 'react';
2
2
  import React from 'react';
3
3
  import { NativeProps } from '../../utils/native-props';
4
4
  import { PageIndicatorProps } from '../page-indicator';
5
5
  export type SquaredGridProps = {
6
6
  maxColumns?: number;
7
7
  maxRow?: number;
8
+ justifyContent?: CSSProperties['justifyContent'];
8
9
  children?: ReactNode;
9
10
  indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
10
11
  } & NativeProps<'--row-gap' | '--icon-size'>;
package/es/components/squared-grid/squared-grid.js CHANGED
@@ -1,6 +1,6 @@
1
- import { Swiper } from '../..';
2
1
  import classnames from 'classnames';
3
2
  import React from 'react';
3
+ import { Swiper } from '../..';
4
4
  import { withNativeProps } from '../../utils/native-props';
5
5
  import { mergeProps } from '../../utils/with-default-props';
6
6
  var classPrefix = "ebscn-squared-grid";
@@ -31,8 +31,17 @@ export var SquaredGrid = function (p) {
31
31
  var children = React.Children.toArray(props === null || props === void 0 ? void 0 : props.children);
32
32
  var pageSize = maxColumns * maxRow;
33
33
  var overPage = pageSize < children.length;
34
+ var justifyContent = props.justifyContent;
35
+ if (!justifyContent) {
36
+ if (children.length > maxColumns) {
37
+ justifyContent = 'flex-start';
38
+ } else {
39
+ justifyContent = 'space-around';
40
+ }
41
+ }
34
42
  var style = {
35
- '--flex': "".concat(100 / maxColumns, "%")
43
+ '--flex': "".concat(100 / maxColumns, "%"),
44
+ justifyContent: justifyContent
36
45
  };
37
46
  var renderSwiperItems = function () {
38
47
  var pages = chunkArray(children, pageSize);
package/es/components/switch/switch.css CHANGED
@@ -44,7 +44,7 @@
44
44
  height: calc(var(--height) - 2 * var(--border-width));
45
45
  border-radius: calc(var(--height) - 2 * var(--border-width));
46
46
  box-sizing: border-box;
47
- background: #E9E9EA;
47
+ background: #d8d8d8;
48
48
  z-index: 1;
49
49
  transition: all 200ms;
50
50
  transform: scale(1);
@@ -62,7 +62,6 @@
62
62
  top: var(--border-width);
63
63
  left: var(--border-width);
64
64
  transition: all 200ms;
65
- box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 11.5px 0 rgba(0, 0, 0, 0.08), -1px 2px 2px 0 rgba(0, 0, 0, 0.1);
66
65
  color: var(--ebscn-color-primary);
67
66
  }
68
67
  .ebscn-switch-inner {
@@ -95,7 +94,7 @@
95
94
  opacity: 0.4;
96
95
  }
97
96
  .ebscn-switch.ebscn-switch-disabled:before {
98
- background-color: #f4f4f4;
97
+ background-color: #e9e9ea;
99
98
  }
100
99
  .ebscn-switch-spin-icon {
101
100
  width: 14px;
package/es/components/tabs/tabs.js CHANGED
@@ -122,13 +122,13 @@ export var Tabs = function (p) {
122
122
  var x = 0;
123
123
  var width = 0;
124
124
  if (props.activeLineMode === 'auto') {
125
- x = activeTabLeft;
125
+ x = activeTabLeft - 6;
126
126
  width = activeTabWidth;
127
127
  } else if (props.activeLineMode === 'full') {
128
- x = activeTabWrapperLeft;
128
+ x = activeTabWrapperLeft - 6;
129
129
  width = activeTabWrapperWidth;
130
130
  } else {
131
- x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
131
+ x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2 - 6;
132
132
  }
133
133
  if (isRTL) {
134
134
  /**
package/es/global/global.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --ebscn-color-warning: #ff8f1f;
22
22
  --ebscn-color-danger: #ff3141;
23
23
  --ebscn-color-yellow: #ff9f18;
24
- --ebscn-color-wathet: #FDECE9;
24
+ --ebscn-color-wathet: #fef4f2;
25
25
  --ebscn-color-text: #333333;
26
26
  --ebscn-color-text-secondary: #666666;
27
27
  --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
30
30
  --ebscn-color-background: #ffffff;
31
31
  --ebscn-color-highlight: var(--ebscn-color-danger);
32
32
  --ebscn-color-white: #ffffff;
33
- --ebscn-color-box: #f5f5f5;
33
+ --ebscn-color-box: #f8f9fc;
34
34
  --ebscn-color-text-light-solid: var(--ebscn-color-white);
35
35
  --ebscn-color-text-dark-solid: #000000;
36
36
  --ebscn-color-fill-content: var(--ebscn-color-box);
package/es/global/theme-default.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --ebscn-color-warning: #ff8f1f;
22
22
  --ebscn-color-danger: #ff3141;
23
23
  --ebscn-color-yellow: #ff9f18;
24
- --ebscn-color-wathet: #FDECE9;
24
+ --ebscn-color-wathet: #fef4f2;
25
25
  --ebscn-color-text: #333333;
26
26
  --ebscn-color-text-secondary: #666666;
27
27
  --ebscn-color-weak: #999999;
@@ -30,7 +30,7 @@
30
30
  --ebscn-color-background: #ffffff;
31
31
  --ebscn-color-highlight: var(--ebscn-color-danger);
32
32
  --ebscn-color-white: #ffffff;
33
- --ebscn-color-box: #f5f5f5;
33
+ --ebscn-color-box: #f8f9fc;
34
34
  --ebscn-color-text-light-solid: var(--ebscn-color-white);
35
35
  --ebscn-color-text-dark-solid: #000000;
36
36
  --ebscn-color-fill-content: var(--ebscn-color-box);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebscn/ui",
3
- "version": "1.0.3-beta.15",
3
+ "version": "1.0.3-beta.17",
4
4
  "description": "ebscn react library",
5
5
  "module": "./es/index.js",
6
6
  "types": "./es/index.d.ts",