@trionesdev/antd-mobile-react 0.0.2-beta.18 → 0.0.2-beta.19

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 (68) hide show
  1. package/LICENSE +21 -21
  2. package/dist/ActionSheet/style.scss +52 -52
  3. package/dist/Avatar/demo/base.js +2 -2
  4. package/dist/Avatar/demo/style.scss +6 -6
  5. package/dist/Badge/demo/base.js +2 -2
  6. package/dist/Badge/demo/base.scss +6 -6
  7. package/dist/Button/demo/base.js +2 -2
  8. package/dist/Button/style.scss +234 -234
  9. package/dist/Calendar/style.scss +85 -85
  10. package/dist/Calendar/touchable-calendar-grid.js +9 -9
  11. package/dist/CalendarDatetimePicker/style.scss +54 -54
  12. package/dist/CalendarDatetimePickerCell/style.scss +10 -10
  13. package/dist/CalendarPicker/style.scss +31 -31
  14. package/dist/Card/demo/base.js +2 -2
  15. package/dist/Card/demo/base.scss +18 -18
  16. package/dist/CascaderPicker/style.scss +45 -45
  17. package/dist/CascaderPickerCell/style.scss +24 -24
  18. package/dist/Checkbox/demo/base.js +2 -2
  19. package/dist/ConfigProvider/demo/base.js +2 -2
  20. package/dist/DemoBlock/index.scss +20 -20
  21. package/dist/DemoDescription/index.scss +3 -3
  22. package/dist/Divider/demo/base.js +2 -2
  23. package/dist/Ellipsis/demo/base.js +2 -2
  24. package/dist/Empty/demo/base.js +2 -2
  25. package/dist/ErrorBlock/demo/base.js +2 -2
  26. package/dist/FloatButton/style.scss +123 -123
  27. package/dist/Footer/demo/base.js +2 -2
  28. package/dist/Form/style.scss +106 -106
  29. package/dist/Grid/demo/base.js +2 -2
  30. package/dist/Grid/demo/base.scss +7 -7
  31. package/dist/Icon/demo/base.js +2 -2
  32. package/dist/Image/demo/base.js +2 -2
  33. package/dist/Image/demo/base.scss +4 -4
  34. package/dist/Image/style.scss +30 -30
  35. package/dist/ImagesPreview/style.scss +34 -34
  36. package/dist/ImagesWall/style.scss +70 -70
  37. package/dist/Input/demo/base.js +2 -2
  38. package/dist/Input/index.scss +240 -240
  39. package/dist/NavBar/demo/base.scss +5 -5
  40. package/dist/NoticeBar/demo/base.js +2 -2
  41. package/dist/Overlay/style.scss +20 -20
  42. package/dist/PageIndicator/demo/base.js +2 -2
  43. package/dist/Picker/style.scss +44 -44
  44. package/dist/PickerView/style.scss +72 -72
  45. package/dist/Popup/demo/base.js +2 -2
  46. package/dist/Popup/style.scss +129 -129
  47. package/dist/Radio/demo/base.scss +4 -4
  48. package/dist/Result/demo/base.js +2 -2
  49. package/dist/SafeArea/demo/base.scss +18 -18
  50. package/dist/ScrollView/style.scss +19 -19
  51. package/dist/SideBar/side-bar.js +6 -6
  52. package/dist/SideBar/style.scss +85 -85
  53. package/dist/Space/demo/base.js +2 -2
  54. package/dist/Swiper/style.scss +54 -54
  55. package/dist/Switch/demo/base.js +2 -2
  56. package/dist/TabBar/demo/base.js +2 -2
  57. package/dist/Tag/demo/base.js +2 -2
  58. package/dist/Tag/demo/style.scss +8 -8
  59. package/dist/Toast/style.scss +63 -63
  60. package/dist/VerificationCodeInput/style.scss +20 -20
  61. package/dist/WaterMark/demo/demo1.js +2 -2
  62. package/dist/WaterMark/demo/demo1.scss +6 -6
  63. package/dist/WaterMark/demo/demo2.js +2 -2
  64. package/dist/style/variable.scss +1 -1
  65. package/dist/utils/type.js +36 -36
  66. package/dist/utils/with-default-props.js +4 -4
  67. package/package.json +4 -4
  68. package/readme.md +43 -43
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { QuestionCircleOutline } from "../../../../antd-mobile-icons-react";
5
5
  import { DemoBlock } from "../../DemoBlock";
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,123 +1,123 @@
1
- @use "../style/variable" as variable;
2
-
3
- $floatButtonCls: "triones-antm-float-button";
4
- $floatButtonGroupCls: "triones-antm-float-button-group";
5
-
6
- $floatButtonSize: 48Px;
7
- $floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
8
- 0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
9
-
10
- .#{$floatButtonCls} {
11
- position: fixed;
12
- display: inline-flex;
13
- flex-shrink: 0;
14
- box-sizing: border-box;
15
-
16
- &--embedded {
17
- position: relative;
18
- right: auto;
19
- bottom: auto;
20
- z-index: auto;
21
- }
22
-
23
- &-body {
24
- box-sizing: border-box;
25
- margin: 0;
26
- padding: 0;
27
- display: inline-flex;
28
- align-items: center;
29
- justify-content: center;
30
- gap: 8Px;
31
- min-width: $floatButtonSize;
32
- min-height: $floatButtonSize;
33
- border: none;
34
- border-radius: 50%;
35
- cursor: pointer;
36
- font-size: 20Px;
37
- line-height: 1;
38
- color: rgba(0, 0, 0, 0.88);
39
- background: #fff;
40
- box-shadow: $floatButtonShadow;
41
- transition: color 0.2s, background 0.2s, box-shadow 0.2s;
42
- -webkit-tap-highlight-color: transparent;
43
- text-decoration: none;
44
-
45
- &:active {
46
- filter: brightness(0.95);
47
- }
48
- }
49
-
50
- &--shape-square &-body {
51
- border-radius: variable.$trionesBorderRadius;
52
- }
53
-
54
- &--has-content &-body {
55
- min-height: $floatButtonSize;
56
- display: inline-flex;
57
- flex-direction: column;
58
- align-items: center;
59
- justify-content: center;
60
- }
61
-
62
- &--type-primary &-body {
63
- color: #fff;
64
- background: variable.$trionesColorPrimary;
65
- }
66
-
67
- &-icon {
68
- display: inline-flex;
69
- align-items: center;
70
- justify-content: center;
71
- }
72
-
73
- &-content {
74
- font-size: variable.$trionesFontSizeSm;
75
- font-weight: 500;
76
- white-space: nowrap;
77
- }
78
- }
79
-
80
- .#{$floatButtonGroupCls} {
81
- position: fixed;
82
- z-index: 100;
83
- bottom: calc(24Px + env(safe-area-inset-bottom, 0px));
84
- display: flex;
85
- gap: 12Px;
86
- align-items: flex-end;
87
- box-sizing: border-box;
88
-
89
- &--placement {
90
- &-top {
91
- flex-direction: column;
92
- }
93
- &-bottom {
94
- flex-direction: column;
95
- }
96
- &-left {
97
- flex-direction: row;
98
- }
99
- &-right {
100
- flex-direction: row;
101
- }
102
- }
103
-
104
- &--menu {
105
- align-items: center;
106
- }
107
-
108
- &-list {
109
- display: flex;
110
- flex-direction: column;
111
- gap: 12Px;
112
- align-items: flex-end;
113
-
114
- &--hidden {
115
- display: none;
116
- }
117
- }
118
-
119
- &--placement-left &-list,
120
- &--placement-right &-list {
121
- flex-direction: column;
122
- }
123
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $floatButtonCls: "triones-antm-float-button";
4
+ $floatButtonGroupCls: "triones-antm-float-button-group";
5
+
6
+ $floatButtonSize: 48Px;
7
+ $floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
8
+ 0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
9
+
10
+ .#{$floatButtonCls} {
11
+ position: fixed;
12
+ display: inline-flex;
13
+ flex-shrink: 0;
14
+ box-sizing: border-box;
15
+
16
+ &--embedded {
17
+ position: relative;
18
+ right: auto;
19
+ bottom: auto;
20
+ z-index: auto;
21
+ }
22
+
23
+ &-body {
24
+ box-sizing: border-box;
25
+ margin: 0;
26
+ padding: 0;
27
+ display: inline-flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ gap: 8Px;
31
+ min-width: $floatButtonSize;
32
+ min-height: $floatButtonSize;
33
+ border: none;
34
+ border-radius: 50%;
35
+ cursor: pointer;
36
+ font-size: 20Px;
37
+ line-height: 1;
38
+ color: rgba(0, 0, 0, 0.88);
39
+ background: #fff;
40
+ box-shadow: $floatButtonShadow;
41
+ transition: color 0.2s, background 0.2s, box-shadow 0.2s;
42
+ -webkit-tap-highlight-color: transparent;
43
+ text-decoration: none;
44
+
45
+ &:active {
46
+ filter: brightness(0.95);
47
+ }
48
+ }
49
+
50
+ &--shape-square &-body {
51
+ border-radius: variable.$trionesBorderRadius;
52
+ }
53
+
54
+ &--has-content &-body {
55
+ min-height: $floatButtonSize;
56
+ display: inline-flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ justify-content: center;
60
+ }
61
+
62
+ &--type-primary &-body {
63
+ color: #fff;
64
+ background: variable.$trionesColorPrimary;
65
+ }
66
+
67
+ &-icon {
68
+ display: inline-flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ }
72
+
73
+ &-content {
74
+ font-size: variable.$trionesFontSizeSm;
75
+ font-weight: 500;
76
+ white-space: nowrap;
77
+ }
78
+ }
79
+
80
+ .#{$floatButtonGroupCls} {
81
+ position: fixed;
82
+ z-index: 100;
83
+ bottom: calc(24Px + env(safe-area-inset-bottom, 0px));
84
+ display: flex;
85
+ gap: 12Px;
86
+ align-items: flex-end;
87
+ box-sizing: border-box;
88
+
89
+ &--placement {
90
+ &-top {
91
+ flex-direction: column;
92
+ }
93
+ &-bottom {
94
+ flex-direction: column;
95
+ }
96
+ &-left {
97
+ flex-direction: row;
98
+ }
99
+ &-right {
100
+ flex-direction: row;
101
+ }
102
+ }
103
+
104
+ &--menu {
105
+ align-items: center;
106
+ }
107
+
108
+ &-list {
109
+ display: flex;
110
+ flex-direction: column;
111
+ gap: 12Px;
112
+ align-items: flex-end;
113
+
114
+ &--hidden {
115
+ display: none;
116
+ }
117
+ }
118
+
119
+ &--placement-left &-list,
120
+ &--placement-right &-list {
121
+ flex-direction: column;
122
+ }
123
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from 'react';
5
5
  import { DemoBlock } from "../../DemoBlock";
@@ -1,106 +1,106 @@
1
- @use "../style/variable" as variable;
2
-
3
- $cls-prefix-form: 'triones-antm-form';
4
- $cls-prefix-form-item: 'triones-antm-form-item';
5
-
6
- .#{$cls-prefix-form} {
7
- }
8
-
9
- .#{$cls-prefix-form-item} {
10
- line-height: 1.5;
11
-
12
- &-label {
13
- font-size: variable.$trionesFontSize;
14
- color: #6F6F6F;
15
-
16
-
17
- &-wrapper {
18
- height: 100%;
19
- // height: 1.47059em;
20
-
21
- //display: flex;
22
- //align-items: center;
23
- }
24
- &-required-mark {
25
- display: inline-block;
26
- color: variable.$trionesColorError;
27
- width: 8Px;
28
- margin-left: -8Px;
29
- }
30
- &-left {
31
- }
32
-
33
- &-right {
34
- text-align: right;
35
- }
36
-
37
- //&-required {
38
- // display: inline-block;
39
- // color: red;
40
- // width: 8Px;
41
- // margin-left: -8Px;
42
- //}
43
-
44
- }
45
-
46
- &-content {
47
- padding-block: 12Px;
48
-
49
- &-right {
50
- text-align: right;
51
- }
52
-
53
- .#{$cls-prefix-form-item} {
54
- &-error {
55
- font-size: variable.$trionesFontSizeSm;
56
- color: variable.$trionesColorError;
57
- }
58
- }
59
- }
60
-
61
- &-horizontal {
62
- display: flex;
63
- flex-direction: row;
64
- align-items: stretch;
65
-
66
- .#{$cls-prefix-form-item} {
67
- &-label {
68
- padding-block: 12Px;
69
- flex-shrink: 1;
70
- min-width: 0;
71
- }
72
-
73
- &-content {
74
- flex: auto 1;
75
- flex-shrink: 1;
76
- min-width: 0;
77
- }
78
- }
79
-
80
- &.#{$cls-prefix-form-item} {
81
- &-start {
82
- align-items: flex-start;
83
- }
84
-
85
- &-center {
86
- align-items: center;
87
- }
88
- }
89
- }
90
-
91
- &-vertical {
92
- .#{$cls-prefix-form-item} {
93
- &-label {
94
- margin-bottom: 4Px;
95
- }
96
- &-content {
97
- padding-block-end: 12Px;
98
- }
99
- }
100
-
101
- }
102
-
103
- &-hidden {
104
- display: none;
105
- }
106
- }
1
+ @use "../style/variable" as variable;
2
+
3
+ $cls-prefix-form: 'triones-antm-form';
4
+ $cls-prefix-form-item: 'triones-antm-form-item';
5
+
6
+ .#{$cls-prefix-form} {
7
+ }
8
+
9
+ .#{$cls-prefix-form-item} {
10
+ line-height: 1.5;
11
+
12
+ &-label {
13
+ font-size: variable.$trionesFontSize;
14
+ color: #6F6F6F;
15
+
16
+
17
+ &-wrapper {
18
+ height: 100%;
19
+ // height: 1.47059em;
20
+
21
+ //display: flex;
22
+ //align-items: center;
23
+ }
24
+ &-required-mark {
25
+ display: inline-block;
26
+ color: variable.$trionesColorError;
27
+ width: 8Px;
28
+ margin-left: -8Px;
29
+ }
30
+ &-left {
31
+ }
32
+
33
+ &-right {
34
+ text-align: right;
35
+ }
36
+
37
+ //&-required {
38
+ // display: inline-block;
39
+ // color: red;
40
+ // width: 8Px;
41
+ // margin-left: -8Px;
42
+ //}
43
+
44
+ }
45
+
46
+ &-content {
47
+ padding-block: 12Px;
48
+
49
+ &-right {
50
+ text-align: right;
51
+ }
52
+
53
+ .#{$cls-prefix-form-item} {
54
+ &-error {
55
+ font-size: variable.$trionesFontSizeSm;
56
+ color: variable.$trionesColorError;
57
+ }
58
+ }
59
+ }
60
+
61
+ &-horizontal {
62
+ display: flex;
63
+ flex-direction: row;
64
+ align-items: stretch;
65
+
66
+ .#{$cls-prefix-form-item} {
67
+ &-label {
68
+ padding-block: 12Px;
69
+ flex-shrink: 1;
70
+ min-width: 0;
71
+ }
72
+
73
+ &-content {
74
+ flex: auto 1;
75
+ flex-shrink: 1;
76
+ min-width: 0;
77
+ }
78
+ }
79
+
80
+ &.#{$cls-prefix-form-item} {
81
+ &-start {
82
+ align-items: flex-start;
83
+ }
84
+
85
+ &-center {
86
+ align-items: center;
87
+ }
88
+ }
89
+ }
90
+
91
+ &-vertical {
92
+ .#{$cls-prefix-form-item} {
93
+ &-label {
94
+ margin-bottom: 4Px;
95
+ }
96
+ &-content {
97
+ padding-block-end: 12Px;
98
+ }
99
+ }
100
+
101
+ }
102
+
103
+ &-hidden {
104
+ display: none;
105
+ }
106
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from 'react';
5
5
  import { DemoBlock } from "../../DemoBlock";
@@ -1,7 +1,7 @@
1
- .grid-demo-item-block {
2
- border: solid 1px #999;
3
- background: #f5f5f5;
4
- text-align: center;
5
- color: #999;
6
- height: 100%;
7
- }
1
+ .grid-demo-item-block {
2
+ border: solid 1px #999;
3
+ background: #f5f5f5;
4
+ text-align: center;
5
+ color: #999;
6
+ height: 100%;
7
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from "react";
5
5
  import * as icons from "../../../../antd-mobile-icons-react";
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,4 +1,4 @@
1
- .imagesContainer {
2
- --triones-antm-image-width: 90px;
3
- --triones-antm-image-height: 60px;
4
- }
1
+ .imagesContainer {
2
+ --triones-antm-image-width: 90px;
3
+ --triones-antm-image-height: 60px;
4
+ }
@@ -1,30 +1,30 @@
1
- $class-prefix-image: 'triones-antm-image';
2
-
3
- .#{$class-prefix-image} {
4
- overflow: hidden;
5
- text-align: center;
6
- display: flex;
7
- justify-content: center;
8
- position: relative;
9
- &-img {
10
- height: 100%;
11
- width: 100%;
12
- object-fit: cover;
13
- }
14
- &-tip {
15
- position: relative;
16
- background-color: var(--triones-antm-color-fill-content);
17
- height: 100%;
18
- min-height: 24px;
19
- min-width: 24px;
20
- > svg {
21
- width: 24px;
22
- height: 24px;
23
- position: absolute;
24
- left: 50%;
25
- top: 50%;
26
- transform: translate(-50%, -50%);
27
- color: var(--triones-antm-color-weak);
28
- }
29
- }
30
- }
1
+ $class-prefix-image: 'triones-antm-image';
2
+
3
+ .#{$class-prefix-image} {
4
+ overflow: hidden;
5
+ text-align: center;
6
+ display: flex;
7
+ justify-content: center;
8
+ position: relative;
9
+ &-img {
10
+ height: 100%;
11
+ width: 100%;
12
+ object-fit: cover;
13
+ }
14
+ &-tip {
15
+ position: relative;
16
+ background-color: var(--triones-antm-color-fill-content);
17
+ height: 100%;
18
+ min-height: 24px;
19
+ min-width: 24px;
20
+ > svg {
21
+ width: 24px;
22
+ height: 24px;
23
+ position: absolute;
24
+ left: 50%;
25
+ top: 50%;
26
+ transform: translate(-50%, -50%);
27
+ color: var(--triones-antm-color-weak);
28
+ }
29
+ }
30
+ }
@@ -1,34 +1,34 @@
1
- $imagePreviewCls: 'triones-antm-image-preview';
2
-
3
- .#{$imagePreviewCls} {
4
- height: 100%;
5
- width: 100%;
6
- position: relative;
7
- background-color: rgba(0, 0, 0, 0.8);
8
-
9
- &-head {
10
- position: fixed;
11
- top: 50Px;
12
- left: 0;
13
- right: 0;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- color: white;
18
- font-size: 14Px;
19
- z-index: 1000;
20
- }
21
-
22
- &-content {
23
- height: 100%;
24
- width: 100%;
25
- :global{
26
- .triones-antm-image-img{
27
- height: auto!important;
28
- }
29
- }
30
- }
31
-
32
- &-foot {
33
- }
34
- }
1
+ $imagePreviewCls: 'triones-antm-image-preview';
2
+
3
+ .#{$imagePreviewCls} {
4
+ height: 100%;
5
+ width: 100%;
6
+ position: relative;
7
+ background-color: rgba(0, 0, 0, 0.8);
8
+
9
+ &-head {
10
+ position: fixed;
11
+ top: 50Px;
12
+ left: 0;
13
+ right: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ color: white;
18
+ font-size: 14Px;
19
+ z-index: 1000;
20
+ }
21
+
22
+ &-content {
23
+ height: 100%;
24
+ width: 100%;
25
+ :global{
26
+ .triones-antm-image-img{
27
+ height: auto!important;
28
+ }
29
+ }
30
+ }
31
+
32
+ &-foot {
33
+ }
34
+ }