@autobest-ui/components 2.1.1 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/input-number/ControlArrow.d.ts +7 -0
- package/esm/input-number/ControlArrow.js +34 -0
- package/esm/input-number/constants.d.ts +2 -0
- package/esm/input-number/constants.js +4 -0
- package/esm/input-number/index.d.ts +79 -96
- package/esm/input-number/index.js +221 -457
- package/esm/input-number/style/index.css +1 -1
- package/esm/input-number/style/index.scss +50 -67
- package/esm/style.css +1 -1
- package/lib/input-number/ControlArrow.d.ts +7 -0
- package/lib/input-number/ControlArrow.js +43 -0
- package/lib/input-number/constants.d.ts +2 -0
- package/lib/input-number/constants.js +12 -0
- package/lib/input-number/index.d.ts +79 -96
- package/lib/input-number/index.js +225 -458
- package/lib/input-number/style/index.css +1 -1
- package/lib/input-number/style/index.scss +50 -67
- package/lib/style.css +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
.ab-input-number{
|
|
1
|
+
.ab-input-number{position:relative;border:1px solid #ccc;overflow:hidden}.ab-input-number-control{-webkit-appearance:none;display:block;outline:0;border:none;width:100%;height:100%;padding:.06rem .06rem;background-color:transparent;font-size:.12rem}.ab-input-number-arrow{font-size:.08rem;position:absolute;right:0;top:0;width:.22rem;height:100%;background-color:#fff;display:none;flex-direction:column;border-left:1px solid #f1f1f1}.ab-input-number-down,.ab-input-number-up{cursor:pointer;width:100%;height:50%;display:flex;align-items:center;justify-content:center}.ab-input-number-down:hover,.ab-input-number-up:hover{background-color:#e2e2e2}.ab-input-number-down:active,.ab-input-number-up:active{background-color:#929292;color:#fff}.ab-input-number-up{border-bottom:1px solid #f1f1f1}.ab-input-number.ab-input-number-enter,.ab-input-number.ab-input-number-focus{border-color:#348fee}.ab-input-number.ab-input-number-enter .ab-input-number-arrow,.ab-input-number.ab-input-number-focus .ab-input-number-arrow{display:flex}.ab-input-number.ab-input-number-focus{box-shadow:0 0 4px #348fee}.ab-input-number.ab-input-number-disabled .ab-input-number-control{cursor:not-allowed}
|
|
@@ -1,87 +1,70 @@
|
|
|
1
1
|
$namespace: ab-input-number;
|
|
2
2
|
|
|
3
3
|
.#{$namespace} {
|
|
4
|
-
padding: .06rem .07rem;
|
|
5
|
-
-webkit-appearance: none;
|
|
6
|
-
outline: none;
|
|
7
|
-
width: 100%;
|
|
8
|
-
border: 1px solid #ccc;
|
|
9
|
-
border-radius: 2px;
|
|
10
|
-
resize: none;
|
|
11
|
-
font-size: .12rem;
|
|
12
|
-
transition: all .3s;
|
|
13
4
|
position: relative;
|
|
14
|
-
|
|
15
|
-
|
|
5
|
+
border: 1px solid #ccc;
|
|
6
|
+
overflow: hidden;
|
|
16
7
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
&-control {
|
|
9
|
+
-webkit-appearance: none;
|
|
10
|
+
display: block;
|
|
11
|
+
outline: none;
|
|
12
|
+
border: none;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
padding: .06rem .06rem;
|
|
16
|
+
background-color: transparent;
|
|
17
|
+
font-size: .12rem;
|
|
20
18
|
}
|
|
21
19
|
|
|
22
|
-
&-
|
|
23
|
-
|
|
20
|
+
&-arrow {
|
|
21
|
+
font-size: 0.08rem;
|
|
22
|
+
position: absolute;
|
|
23
|
+
right: 0;
|
|
24
|
+
top: 0;
|
|
25
|
+
width: 0.22rem;
|
|
26
|
+
height: 100%;
|
|
24
27
|
background-color: #fff;
|
|
25
|
-
display:
|
|
28
|
+
display: none;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
border-left: 1px solid #f1f1f1;
|
|
26
31
|
}
|
|
27
32
|
|
|
28
|
-
&-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
&-up, &-down {
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 50%;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
35
40
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
width: .16rem;
|
|
39
|
-
height: .1rem;
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
background-color: #f1f1f1;
|
|
42
|
-
&.#{$namespace}-hover {
|
|
43
|
-
background-color: #d0d0d0;
|
|
44
|
-
}
|
|
45
|
-
&.#{$namespace}-active {
|
|
46
|
-
background-color: #787878;
|
|
47
|
-
.#{$namespace}-add {
|
|
48
|
-
border-bottom-color: #fff;
|
|
49
|
-
}
|
|
50
|
-
.#{$namespace}-sub {
|
|
51
|
-
border-top-color: #fff;
|
|
52
|
-
}
|
|
41
|
+
&:hover {
|
|
42
|
+
background-color: #e2e2e2;
|
|
53
43
|
}
|
|
54
44
|
|
|
55
|
-
&:
|
|
56
|
-
|
|
45
|
+
&:active {
|
|
46
|
+
background-color: #929292;
|
|
47
|
+
color: #fff;
|
|
57
48
|
}
|
|
58
49
|
}
|
|
59
50
|
|
|
60
|
-
&-
|
|
61
|
-
|
|
62
|
-
top: -.01rem;
|
|
63
|
-
left: .04rem;
|
|
64
|
-
display: block;
|
|
65
|
-
border-top-color: transparent;
|
|
66
|
-
border-right-color: transparent;
|
|
67
|
-
border-bottom-color: #505050;
|
|
68
|
-
border-left-color: transparent;
|
|
69
|
-
border-width: .04rem;
|
|
70
|
-
border-style: solid;
|
|
71
|
-
width: 0;
|
|
72
|
-
height: 0;
|
|
51
|
+
&-up {
|
|
52
|
+
border-bottom: 1px solid #f1f1f1;
|
|
73
53
|
}
|
|
74
54
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
border-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
55
|
+
&.#{$namespace}-enter, &.#{$namespace}-focus {
|
|
56
|
+
.#{$namespace}-arrow {
|
|
57
|
+
display: flex;
|
|
58
|
+
}
|
|
59
|
+
border-color: #348FEE;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.#{$namespace}-focus {
|
|
63
|
+
box-shadow: 0 0 4px #348FEE;
|
|
64
|
+
}
|
|
65
|
+
&.#{$namespace}-disabled {
|
|
66
|
+
.#{$namespace}-control {
|
|
67
|
+
cursor: not-allowed;
|
|
68
|
+
}
|
|
86
69
|
}
|
|
87
70
|
}
|
package/lib/style.css
CHANGED
|
@@ -9,7 +9,7 @@ a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd
|
|
|
9
9
|
.ab-drawer{position:fixed;z-index:101;background-color:#fff;overflow:auto;transition:transform .3s cubic-bezier(.7,.3,.1,1)}.ab-drawer-times{position:absolute;right:.17rem;font-size:.16rem;color:#b0b0b0;cursor:pointer;top:.11rem}.ab-drawer-times:hover{color:#333}.ab-drawer-tf-top{transform:translate(0,-100%)}.ab-drawer-tf-bottom{transform:translate(0,100%)}.ab-drawer-tf-left{transform:translate(-100%,0)}.ab-drawer-tf-right{transform:translate(100%,0)}.ab-drawer-hidden.ab-drawer,.ab-drawer-hidden.ab-mask{display:none}
|
|
10
10
|
.ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
|
|
11
11
|
.ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
|
|
12
|
-
.ab-input-number{
|
|
12
|
+
.ab-input-number{position:relative;border:1px solid #ccc;overflow:hidden}.ab-input-number-control{-webkit-appearance:none;display:block;outline:0;border:none;width:100%;height:100%;padding:.06rem .06rem;background-color:transparent;font-size:.12rem}.ab-input-number-arrow{font-size:.08rem;position:absolute;right:0;top:0;width:.22rem;height:100%;background-color:#fff;display:none;flex-direction:column;border-left:1px solid #f1f1f1}.ab-input-number-down,.ab-input-number-up{cursor:pointer;width:100%;height:50%;display:flex;align-items:center;justify-content:center}.ab-input-number-down:hover,.ab-input-number-up:hover{background-color:#e2e2e2}.ab-input-number-down:active,.ab-input-number-up:active{background-color:#929292;color:#fff}.ab-input-number-up{border-bottom:1px solid #f1f1f1}.ab-input-number.ab-input-number-enter,.ab-input-number.ab-input-number-focus{border-color:#348fee}.ab-input-number.ab-input-number-enter .ab-input-number-arrow,.ab-input-number.ab-input-number-focus .ab-input-number-arrow{display:flex}.ab-input-number.ab-input-number-focus{box-shadow:0 0 4px #348fee}.ab-input-number.ab-input-number-disabled .ab-input-number-control{cursor:not-allowed}
|
|
13
13
|
.ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
|
|
14
14
|
.ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:">";position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
|
|
15
15
|
.ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@autobest-ui/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "components common ui for React",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
},
|
|
42
42
|
"homepage": "https://autobest.visualstudio.com/AutoBestChina/_git/AutobestFrontendCommon#readme",
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@autobest-ui/utils": ">=2.0.
|
|
44
|
+
"@autobest-ui/utils": ">=2.0.1",
|
|
45
45
|
"intersection-observer": ">=0.12.0",
|
|
46
46
|
"react": ">=16.8.6",
|
|
47
47
|
"react-transition-group": ">=4.2.2"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "72a9d2272257ec311b14d6ea6a2ba94b7c0f9f78"
|
|
50
50
|
}
|