@trionesdev/antd-mobile-base-react 0.0.2-beta.15 → 0.0.2-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 (115) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +23 -23
  3. package/dist/Alert/style.scss +69 -69
  4. package/dist/Avatar/avatar.d.ts +2 -2
  5. package/dist/Avatar/avatar.js +1 -1
  6. package/dist/Avatar/style.scss +17 -17
  7. package/dist/Badge/style.scss +100 -100
  8. package/dist/Card/style.scss +35 -35
  9. package/dist/CascaderView/style.scss +22 -22
  10. package/dist/Cell/CellGroup.js +25 -8
  11. package/dist/Cell/cell.js +20 -37
  12. package/dist/Cell/context.d.ts +4 -2
  13. package/dist/Cell/styles.scss +81 -52
  14. package/dist/Cell/types.d.ts +6 -4
  15. package/dist/Checkbox/checkbox-group.js +1 -2
  16. package/dist/Checkbox/index.scss +165 -165
  17. package/dist/ConfigProvider/config-provider.d.ts +1 -0
  18. package/dist/DemoBlock/index.scss +20 -20
  19. package/dist/DemoDescription/index.scss +3 -3
  20. package/dist/Descriptions/style.scss +65 -65
  21. package/dist/Divider/divider.d.ts +1 -1
  22. package/dist/Divider/divider.js +5 -3
  23. package/dist/Divider/style.scss +62 -62
  24. package/dist/Ellipsis/style.scss +13 -13
  25. package/dist/Empty/style.scss +29 -29
  26. package/dist/ErrorBlock/demo/base.js +2 -2
  27. package/dist/ErrorBlock/style.scss +62 -62
  28. package/dist/Footer/style.scss +55 -55
  29. package/dist/Form/ErrorList.d.ts +4 -0
  30. package/dist/Form/ErrorList.js +9 -0
  31. package/dist/Form/context.d.ts +4 -2
  32. package/dist/Form/context.js +2 -1
  33. package/dist/Form/form.d.ts +24 -6
  34. package/dist/Form/form.js +22 -11
  35. package/dist/Form/hooks/useForm.js +1 -8
  36. package/dist/Form/hooks/useFormContext.js +1 -2
  37. package/dist/Form/index.d.ts +6 -3
  38. package/dist/Form/index.js +4 -1
  39. package/dist/Form/styles.scss +11 -0
  40. package/dist/Form/types.d.ts +2 -1
  41. package/dist/FormCell/FormCell.d.ts +21 -0
  42. package/dist/FormCell/FormCell.js +56 -0
  43. package/dist/FormCell/index.d.ts +4 -0
  44. package/dist/FormCell/index.js +3 -0
  45. package/dist/FormCell/styles.scss +103 -0
  46. package/dist/Grid/style.scss +17 -17
  47. package/dist/Icon/demo/base.js +2 -2
  48. package/dist/InputNumber/input-number.d.ts +2 -4
  49. package/dist/InputNumber/input-number.js +46 -28
  50. package/dist/InputNumber/style.scss +100 -63
  51. package/dist/Loading/DotLoading.d.ts +8 -0
  52. package/dist/Loading/DotLoading.js +33 -0
  53. package/dist/Loading/SpinLoading.js +70 -0
  54. package/dist/Loading/dot-loading.scss +72 -0
  55. package/dist/Loading/index.d.ts +5 -0
  56. package/dist/Loading/index.js +3 -0
  57. package/dist/{SpinLoading → Loading}/spin-loading.scss +39 -40
  58. package/dist/NavBar/style.scss +64 -64
  59. package/dist/NoticeBar/style.scss +130 -130
  60. package/dist/PageIndicator/style.scss +59 -59
  61. package/dist/Progress/Progress.js +1 -1
  62. package/dist/Progress/ProgressCircle.js +5 -2
  63. package/dist/Progress/ProgressLine.js +2 -2
  64. package/dist/Progress/style.scss +33 -33
  65. package/dist/Progress/types.d.ts +2 -2
  66. package/dist/Radio/style.scss +154 -141
  67. package/dist/Rate/style.scss +37 -37
  68. package/dist/Result/demo/base.js +2 -2
  69. package/dist/Result/style.scss +73 -73
  70. package/dist/SafeArea/style.scss +20 -20
  71. package/dist/Scaffold/style.scss +17 -17
  72. package/dist/Segmented/style.scss +75 -75
  73. package/dist/Skeleton/Skeleton.d.ts +80 -21
  74. package/dist/Skeleton/Skeleton.js +248 -57
  75. package/dist/Skeleton/index.d.ts +3 -1
  76. package/dist/Skeleton/index.js +2 -1
  77. package/dist/Skeleton/style.scss +215 -48
  78. package/dist/Space/space.js +12 -9
  79. package/dist/Space/style.scss +101 -80
  80. package/dist/Stepper/index.d.ts +3 -0
  81. package/dist/Stepper/index.js +2 -0
  82. package/dist/Stepper/stepper.d.ts +14 -0
  83. package/dist/Stepper/stepper.js +92 -0
  84. package/dist/Stepper/style.scss +100 -0
  85. package/dist/Steps/HorizontalSteps.js +5 -2
  86. package/dist/Steps/VerticalSteps.js +5 -2
  87. package/dist/Steps/style.scss +153 -153
  88. package/dist/Steps/types.d.ts +2 -0
  89. package/dist/Switch/style.scss +127 -128
  90. package/dist/Switch/switch.d.ts +2 -0
  91. package/dist/Switch/switch.js +6 -5
  92. package/dist/TabBar/demo/base.js +2 -2
  93. package/dist/TabBar/index.scss +37 -37
  94. package/dist/Tabs/style.scss +108 -108
  95. package/dist/Tag/style.scss +110 -109
  96. package/dist/Tag/tag.d.ts +1 -1
  97. package/dist/Tag/tag.js +1 -1
  98. package/dist/WaterMark/style.scss +17 -17
  99. package/dist/index.d.ts +11 -4
  100. package/dist/index.js +5 -2
  101. package/dist/style/css-variable.scss +6 -6
  102. package/dist/style/style.scss +52 -52
  103. package/dist/style/theme-dark.scss +24 -24
  104. package/dist/style/theme-default.scss +54 -54
  105. package/dist/style/variable.scss +180 -173
  106. package/dist/types.d.ts +6 -1
  107. package/dist/utils/type.js +36 -36
  108. package/dist/utils/with-default-props.js +4 -4
  109. package/package.json +4 -7
  110. package/dist/SpinLoading/index.d.ts +0 -3
  111. package/dist/SpinLoading/index.js +0 -2
  112. package/dist/SpinLoading/spin-loading.js +0 -59
  113. package/dist/Tabs/demo/base.d.ts +0 -3
  114. package/dist/Tabs/demo/base.js +0 -59
  115. /package/dist/{SpinLoading/spin-loading.d.ts → Loading/SpinLoading.d.ts} +0 -0
@@ -1,130 +1,130 @@
1
- $class-prefix-notice-bar: 'triones-antm-notice-bar';
2
- /* prettier-ignore */
3
- .#{$class-prefix-notice-bar} {
4
- --background-color: var(--triones-antm-color-weak);
5
- --border-color: var(--triones-antm-color-weak);
6
- --text-color: var(--triones-antm-color-text-light-solid);
7
- --font-size: var(--triones-antm-font-size-7);
8
- --icon-font-size: var(--triones-antm-font-size-10);
9
- --height: 40PX;
10
- --triones-antm-notice-bar-border-radius: 4PX;
11
- --triones-antm-notice-bar-border-width: 1PX;
12
-
13
- flex: 1 auto;
14
- height: var(--height);
15
- box-sizing: border-box;
16
- font-size: var(--font-size);
17
- padding: 0 12PX;
18
- display: flex;
19
- align-items: center;
20
- justify-content: space-between;
21
-
22
- border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
23
- border-left-width: 0;
24
- border-right-width: 0;
25
- background-color: var(--background-color);
26
- color: var(--text-color);
27
- & > span[role='img'] {
28
- color: var(--text-color);
29
- }
30
-
31
- &.#{$class-prefix-notice-bar}-alert {
32
- --background-color: #fff9ed;
33
- --border-color: #fff3e9;
34
- --text-color: var(--triones-antm-color-orange);
35
- }
36
- &.#{$class-prefix-notice-bar}-error {
37
- --background-color: #d9281e;
38
- --border-color: #d9281e;
39
- --text-color: #fff;
40
- }
41
- &.#{$class-prefix-notice-bar}-info {
42
- --background-color: #d0e4ff;
43
- --border-color: #bcd8ff;
44
- --text-color: var(--triones-antm-color-primary);
45
- }
46
- &.#{$class-prefix-notice-bar}-success {
47
- --background-color: #d1fff0;
48
- --border-color: #a8f0d8;
49
- --text-color: var(--triones-antm-color-success);
50
- }
51
-
52
- & .#{$class-prefix-notice-bar}-left {
53
- flex-shrink: 0;
54
- margin-right: 8PX;
55
- font-size: var(--icon-font-size);
56
- }
57
- & .#{$class-prefix-notice-bar}-content {
58
- flex: 1;
59
- overflow: hidden;
60
- position: relative;
61
- height: 100%;
62
- display: flex;
63
- align-items: center;
64
-
65
- & .#{$class-prefix-notice-bar}-content-inner {
66
- width: auto;
67
- transition-timing-function: linear;
68
- white-space: nowrap;
69
- }
70
- }
71
-
72
- & .#{$class-prefix-notice-bar}-right {
73
- display: flex;
74
- align-items: center;
75
- flex-shrink: 0;
76
- margin-left: 12PX;
77
- }
78
-
79
- &-close {
80
- width: 24PX;
81
- height: 24PX;
82
- margin-right: -3PX;
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- font-size: var(--triones-antm-font-size-10);
87
- }
88
-
89
- &-wrap {
90
- height: auto;
91
- align-items: flex-start;
92
- padding-top: 8PX;
93
- padding-bottom: 8PX;
94
- line-height: 22PX;
95
- }
96
-
97
- &-neutral {
98
- border-radius: var(--triones-antm-notice-bar-border-radius);
99
- -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
100
- -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
101
- -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
102
- -o-border-radius: var(--triones-antm-notice-bar-border-radius);
103
- }
104
-
105
- &-rounded {
106
- border-radius: 1000PX;
107
- -webkit-border-radius: 1000PX;
108
- -moz-border-radius: 1000PX;
109
- -ms-border-radius: 1000PX;
110
- -o-border-radius: 1000PX;
111
- }
112
-
113
- &-bordered {
114
- border-left-width: var(--triones-antm-notice-bar-border-width);
115
- border-right-width: var(--triones-antm-notice-bar-border-width);
116
- }
117
-
118
- &-without-border {
119
- border-top-width: 0;
120
- border-bottom-width: 0;
121
- }
122
- }
123
-
124
- .#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
125
- .#{$class-prefix-notice-bar}-content {
126
- .#{$class-prefix-notice-bar}-content-inner {
127
- white-space: normal;
128
- }
129
- }
130
- }
1
+ $class-prefix-notice-bar: 'triones-antm-notice-bar';
2
+ /* prettier-ignore */
3
+ .#{$class-prefix-notice-bar} {
4
+ --background-color: var(--triones-antm-color-weak);
5
+ --border-color: var(--triones-antm-color-weak);
6
+ --text-color: var(--triones-antm-color-text-light-solid);
7
+ --font-size: var(--triones-antm-font-size-7);
8
+ --icon-font-size: var(--triones-antm-font-size-10);
9
+ --height: 40PX;
10
+ --triones-antm-notice-bar-border-radius: 4PX;
11
+ --triones-antm-notice-bar-border-width: 1PX;
12
+
13
+ flex: 1 auto;
14
+ height: var(--height);
15
+ box-sizing: border-box;
16
+ font-size: var(--font-size);
17
+ padding: 0 12PX;
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+
22
+ border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
23
+ border-left-width: 0;
24
+ border-right-width: 0;
25
+ background-color: var(--background-color);
26
+ color: var(--text-color);
27
+ & > span[role='img'] {
28
+ color: var(--text-color);
29
+ }
30
+
31
+ &.#{$class-prefix-notice-bar}-alert {
32
+ --background-color: #fff9ed;
33
+ --border-color: #fff3e9;
34
+ --text-color: var(--triones-antm-color-orange);
35
+ }
36
+ &.#{$class-prefix-notice-bar}-error {
37
+ --background-color: #d9281e;
38
+ --border-color: #d9281e;
39
+ --text-color: #fff;
40
+ }
41
+ &.#{$class-prefix-notice-bar}-info {
42
+ --background-color: #d0e4ff;
43
+ --border-color: #bcd8ff;
44
+ --text-color: var(--triones-antm-color-primary);
45
+ }
46
+ &.#{$class-prefix-notice-bar}-success {
47
+ --background-color: #d1fff0;
48
+ --border-color: #a8f0d8;
49
+ --text-color: var(--triones-antm-color-success);
50
+ }
51
+
52
+ & .#{$class-prefix-notice-bar}-left {
53
+ flex-shrink: 0;
54
+ margin-right: 8PX;
55
+ font-size: var(--icon-font-size);
56
+ }
57
+ & .#{$class-prefix-notice-bar}-content {
58
+ flex: 1;
59
+ overflow: hidden;
60
+ position: relative;
61
+ height: 100%;
62
+ display: flex;
63
+ align-items: center;
64
+
65
+ & .#{$class-prefix-notice-bar}-content-inner {
66
+ width: auto;
67
+ transition-timing-function: linear;
68
+ white-space: nowrap;
69
+ }
70
+ }
71
+
72
+ & .#{$class-prefix-notice-bar}-right {
73
+ display: flex;
74
+ align-items: center;
75
+ flex-shrink: 0;
76
+ margin-left: 12PX;
77
+ }
78
+
79
+ &-close {
80
+ width: 24PX;
81
+ height: 24PX;
82
+ margin-right: -3PX;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ font-size: var(--triones-antm-font-size-10);
87
+ }
88
+
89
+ &-wrap {
90
+ height: auto;
91
+ align-items: flex-start;
92
+ padding-top: 8PX;
93
+ padding-bottom: 8PX;
94
+ line-height: 22PX;
95
+ }
96
+
97
+ &-neutral {
98
+ border-radius: var(--triones-antm-notice-bar-border-radius);
99
+ -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
100
+ -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
101
+ -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
102
+ -o-border-radius: var(--triones-antm-notice-bar-border-radius);
103
+ }
104
+
105
+ &-rounded {
106
+ border-radius: 1000PX;
107
+ -webkit-border-radius: 1000PX;
108
+ -moz-border-radius: 1000PX;
109
+ -ms-border-radius: 1000PX;
110
+ -o-border-radius: 1000PX;
111
+ }
112
+
113
+ &-bordered {
114
+ border-left-width: var(--triones-antm-notice-bar-border-width);
115
+ border-right-width: var(--triones-antm-notice-bar-border-width);
116
+ }
117
+
118
+ &-without-border {
119
+ border-top-width: 0;
120
+ border-bottom-width: 0;
121
+ }
122
+ }
123
+
124
+ .#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
125
+ .#{$class-prefix-notice-bar}-content {
126
+ .#{$class-prefix-notice-bar}-content-inner {
127
+ white-space: normal;
128
+ }
129
+ }
130
+ }
@@ -1,59 +1,59 @@
1
- /* prettier-ignore */
2
- .triones-antm-page-indicator {
3
- display: flex;
4
- width: auto;
5
-
6
- --dot-color: #ccc;
7
- --active-dot-color: #1677ff;
8
- --dot-size: 3PX;
9
- --active-dot-size: 13PX;
10
- --dot-border-radius: 1PX;
11
- --active-dot-border-radius: var(--dot-border-radius);
12
- --dot-spacing: 3PX;
13
-
14
- &-dot {
15
- display: block;
16
- width: var(--dot-size);
17
- height: var(--dot-size);
18
- border-radius: var(--dot-border-radius);
19
- background: var(--dot-color);
20
-
21
- &:last-child {
22
- margin-right: 0;
23
- }
24
-
25
- &-active {
26
- border-radius: var(--active-dot-border-radius);
27
- background: var(--active-dot-color);
28
- }
29
- }
30
-
31
- &-color-white {
32
- --dot-color: rgba(255, 255, 255, 50%);
33
- --active-dot-color: #fff;
34
- }
35
-
36
- &-horizontal {
37
- flex-direction: row;
38
-
39
- .triones-antm-page-indicator-dot {
40
- margin-right: var(--dot-spacing);
41
-
42
- &-active {
43
- width: var(--active-dot-size);
44
- }
45
- }
46
- }
47
-
48
- &-vertical {
49
- flex-direction: column;
50
-
51
- .triones-antm-page-indicator-dot {
52
- margin-bottom: var(--dot-spacing);
53
-
54
- &-active {
55
- height: var(--active-dot-size);
56
- }
57
- }
58
- }
59
- }
1
+ /* prettier-ignore */
2
+ .triones-antm-page-indicator {
3
+ display: flex;
4
+ width: auto;
5
+
6
+ --dot-color: #ccc;
7
+ --active-dot-color: #1677ff;
8
+ --dot-size: 3PX;
9
+ --active-dot-size: 13PX;
10
+ --dot-border-radius: 1PX;
11
+ --active-dot-border-radius: var(--dot-border-radius);
12
+ --dot-spacing: 3PX;
13
+
14
+ &-dot {
15
+ display: block;
16
+ width: var(--dot-size);
17
+ height: var(--dot-size);
18
+ border-radius: var(--dot-border-radius);
19
+ background: var(--dot-color);
20
+
21
+ &:last-child {
22
+ margin-right: 0;
23
+ }
24
+
25
+ &-active {
26
+ border-radius: var(--active-dot-border-radius);
27
+ background: var(--active-dot-color);
28
+ }
29
+ }
30
+
31
+ &-color-white {
32
+ --dot-color: rgba(255, 255, 255, 50%);
33
+ --active-dot-color: #fff;
34
+ }
35
+
36
+ &-horizontal {
37
+ flex-direction: row;
38
+
39
+ .triones-antm-page-indicator-dot {
40
+ margin-right: var(--dot-spacing);
41
+
42
+ &-active {
43
+ width: var(--active-dot-size);
44
+ }
45
+ }
46
+ }
47
+
48
+ &-vertical {
49
+ flex-direction: column;
50
+
51
+ .triones-antm-page-indicator-dot {
52
+ margin-bottom: var(--dot-spacing);
53
+
54
+ &-active {
55
+ height: var(--active-dot-size);
56
+ }
57
+ }
58
+ }
59
+ }
@@ -11,7 +11,7 @@ export var Progress = function Progress(_ref) {
11
11
  _ref$percent = _ref.percent,
12
12
  percent = _ref$percent === void 0 ? 0 : _ref$percent,
13
13
  _ref$size = _ref.size,
14
- size = _ref$size === void 0 ? 'middle' : _ref$size,
14
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
15
15
  _ref$showInfo = _ref.showInfo,
16
16
  showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
17
17
  _ref$railColor = _ref.railColor,
@@ -30,12 +30,15 @@ export var ProgressCircle = /*#__PURE__*/memo(function (_ref) {
30
30
  switch (size) {
31
31
  case 'small':
32
32
  return 50;
33
- case 'middle':
33
+ case 'medium':
34
34
  return 100;
35
35
  case 'large':
36
36
  return 150;
37
37
  default:
38
- return size || 50;
38
+ if (typeof size === 'number') {
39
+ return size;
40
+ }
41
+ return 50;
39
42
  }
40
43
  }, [size]);
41
44
  var style = {
@@ -7,7 +7,7 @@ export var ProgressLine = function ProgressLine(_ref) {
7
7
  _ref$percent = _ref.percent,
8
8
  percent = _ref$percent === void 0 ? 0 : _ref$percent,
9
9
  _ref$size = _ref.size,
10
- size = _ref$size === void 0 ? 'middle' : _ref$size,
10
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
11
11
  _ref$showInfo = _ref.showInfo,
12
12
  showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
13
13
  _ref$railColor = _ref.railColor,
@@ -22,7 +22,7 @@ export var ProgressLine = function ProgressLine(_ref) {
22
22
  switch (size) {
23
23
  case 'small':
24
24
  return 6;
25
- case 'middle':
25
+ case 'medium':
26
26
  return 8;
27
27
  case 'large':
28
28
  return 12;
@@ -1,33 +1,33 @@
1
- $progressLineCls: 'triones-antm-progress-line';
2
- $progressCircleCls: 'triones-antm-progress-circle';
3
-
4
- .#{$progressLineCls}{
5
- width: 100%;
6
- display: flex;
7
- align-items: center;
8
- gap: 4Px;
9
- &-rail{
10
- flex: 1 auto;
11
- border-radius: 90Px;
12
- }
13
- &-track{
14
- border-radius: 90Px;
15
- }
16
- &-indicator{}
17
- }
18
-
19
- .#{$progressCircleCls} {
20
- position: relative;
21
- &-indicator {
22
- position: absolute;
23
- inset-block-start: 50%;
24
- inset-inline-start: 0;
25
- width: 100%;
26
- margin: 0;
27
- padding: 0;
28
- line-height: 1;
29
- white-space: normal;
30
- text-align: center;
31
- transform: translatey(-50%);
32
- }
33
- }
1
+ $progressLineCls: 'triones-antm-progress-line';
2
+ $progressCircleCls: 'triones-antm-progress-circle';
3
+
4
+ .#{$progressLineCls}{
5
+ width: 100%;
6
+ display: flex;
7
+ align-items: center;
8
+ gap: 4Px;
9
+ &-rail{
10
+ flex: 1 auto;
11
+ border-radius: 90Px;
12
+ }
13
+ &-track{
14
+ border-radius: 90Px;
15
+ }
16
+ &-indicator{}
17
+ }
18
+
19
+ .#{$progressCircleCls} {
20
+ position: relative;
21
+ &-indicator {
22
+ position: absolute;
23
+ inset-block-start: 50%;
24
+ inset-inline-start: 0;
25
+ width: 100%;
26
+ margin: 0;
27
+ padding: 0;
28
+ line-height: 1;
29
+ white-space: normal;
30
+ text-align: center;
31
+ transform: translatey(-50%);
32
+ }
33
+ }
@@ -1,5 +1,5 @@
1
- import { SizeType } from "..";
2
- export type Size = SizeType | number;
1
+ import { AntSize } from "..";
2
+ export type Size = AntSize | number;
3
3
  export type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
4
4
  export type PercentPositionAlign = 'start' | 'end';
5
5
  export declare const successColor = "#53C31B";