@autobest-ui/components 1.2.0 → 1.4.0

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 (137) hide show
  1. package/esm/carousel/index.d.ts +13 -21
  2. package/esm/carousel/index.js +44 -77
  3. package/esm/carousel/style/index.css +1 -1
  4. package/esm/carousel/style/index.scss +1 -7
  5. package/esm/date-picker/calendar/grid/index.css +1 -1
  6. package/esm/date-picker/calendar/grid/index.js +17 -27
  7. package/esm/date-picker/calendar/grid/index.scss +4 -0
  8. package/esm/date-picker/calendar/index.d.ts +4 -0
  9. package/esm/date-picker/calendar/index.js +1 -1
  10. package/esm/date-picker/index.d.ts +17 -6
  11. package/esm/date-picker/index.js +62 -17
  12. package/esm/date-picker/style/index.css +1 -1
  13. package/esm/date-picker/style/index.js +0 -2
  14. package/esm/date-picker/style/index.scss +6 -1
  15. package/esm/index.d.ts +3 -4
  16. package/esm/index.js +0 -1
  17. package/esm/input-number/index.d.ts +30 -17
  18. package/esm/input-number/index.js +116 -36
  19. package/esm/style.css +9 -24
  20. package/esm/table/body/BodyRow.d.ts +9 -3
  21. package/esm/table/body/BodyRow.js +6 -2
  22. package/esm/table/body/index.d.ts +2 -2
  23. package/esm/table/body/index.js +8 -7
  24. package/esm/table/header/HeaderCell.d.ts +2 -2
  25. package/esm/table/header/HeaderCell.js +15 -7
  26. package/esm/table/header/HeaderRow.d.ts +2 -2
  27. package/esm/table/index.d.ts +4 -4
  28. package/esm/table/index.js +3 -3
  29. package/esm/table/interface.d.ts +9 -3
  30. package/esm/table/style/index.css +1 -1
  31. package/esm/table/style/index.js +0 -2
  32. package/esm/table/style/index.scss +2 -0
  33. package/lib/carousel/index.d.ts +13 -21
  34. package/lib/carousel/index.js +45 -80
  35. package/lib/carousel/style/index.css +1 -1
  36. package/lib/carousel/style/index.scss +1 -7
  37. package/lib/date-picker/calendar/grid/index.css +1 -1
  38. package/lib/date-picker/calendar/grid/index.js +17 -28
  39. package/lib/date-picker/calendar/grid/index.scss +4 -0
  40. package/lib/date-picker/calendar/index.d.ts +4 -0
  41. package/lib/date-picker/calendar/index.js +1 -1
  42. package/lib/date-picker/index.d.ts +17 -6
  43. package/lib/date-picker/index.js +61 -17
  44. package/lib/date-picker/style/index.css +1 -1
  45. package/lib/date-picker/style/index.js +0 -2
  46. package/lib/date-picker/style/index.scss +6 -1
  47. package/lib/index.d.ts +3 -4
  48. package/lib/index.js +0 -8
  49. package/lib/input-number/index.d.ts +30 -17
  50. package/lib/input-number/index.js +116 -36
  51. package/lib/style.css +9 -24
  52. package/lib/table/body/BodyRow.d.ts +9 -3
  53. package/lib/table/body/BodyRow.js +6 -2
  54. package/lib/table/body/index.d.ts +2 -2
  55. package/lib/table/body/index.js +8 -7
  56. package/lib/table/header/HeaderCell.d.ts +2 -2
  57. package/lib/table/header/HeaderCell.js +15 -8
  58. package/lib/table/header/HeaderRow.d.ts +2 -2
  59. package/lib/table/index.d.ts +4 -4
  60. package/lib/table/index.js +3 -3
  61. package/lib/table/interface.d.ts +9 -3
  62. package/lib/table/style/index.css +1 -1
  63. package/lib/table/style/index.js +0 -2
  64. package/lib/table/style/index.scss +2 -0
  65. package/package.json +2 -2
  66. package/esm/accordion/__stories__/style.css +0 -1
  67. package/esm/accordion/__stories__/style.scss +0 -59
  68. package/esm/affix/__stories__/style.css +0 -1
  69. package/esm/affix/__stories__/style.scss +0 -13
  70. package/esm/carousel/__stories__/style.css +0 -1
  71. package/esm/carousel/__stories__/style.scss +0 -41
  72. package/esm/collapse/__stories__/style.css +0 -1
  73. package/esm/collapse/__stories__/style.scss +0 -19
  74. package/esm/guide/__stories__/style.css +0 -1
  75. package/esm/guide/__stories__/style.scss +0 -14
  76. package/esm/icon/__stories__/iconNames.d.ts +0 -2
  77. package/esm/icon/__stories__/iconNames.js +0 -1
  78. package/esm/icon/__stories__/style.css +0 -1
  79. package/esm/icon/__stories__/style.scss +0 -40
  80. package/esm/icon/index.d.ts +0 -43
  81. package/esm/icon/index.js +0 -94
  82. package/esm/icon/style/index.css +0 -1
  83. package/esm/icon/style/index.d.ts +0 -1
  84. package/esm/icon/style/index.js +0 -5
  85. package/esm/icon/style/index.scss +0 -7
  86. package/esm/lazy-image/__stories__/style.css +0 -1
  87. package/esm/lazy-image/__stories__/style.scss +0 -9
  88. package/esm/loading-container/__stories__/style.css +0 -1
  89. package/esm/loading-container/__stories__/style.scss +0 -6
  90. package/esm/move/__stories__/style.css +0 -1
  91. package/esm/move/__stories__/style.scss +0 -6
  92. package/esm/popover/__stories__/style.css +0 -1
  93. package/esm/popover/__stories__/style.scss +0 -16
  94. package/esm/select/__stories__/style.css +0 -1
  95. package/esm/select/__stories__/style.scss +0 -8
  96. package/esm/skeleton/__stories__/style.css +0 -1
  97. package/esm/skeleton/__stories__/style.scss +0 -3
  98. package/esm/table/__stories__/style.css +0 -1
  99. package/esm/table/__stories__/style.scss +0 -34
  100. package/esm/tabs/__stories__/style.css +0 -1
  101. package/esm/tabs/__stories__/style.scss +0 -8
  102. package/lib/accordion/__stories__/style.css +0 -1
  103. package/lib/accordion/__stories__/style.scss +0 -59
  104. package/lib/affix/__stories__/style.css +0 -1
  105. package/lib/affix/__stories__/style.scss +0 -13
  106. package/lib/carousel/__stories__/style.css +0 -1
  107. package/lib/carousel/__stories__/style.scss +0 -41
  108. package/lib/collapse/__stories__/style.css +0 -1
  109. package/lib/collapse/__stories__/style.scss +0 -19
  110. package/lib/guide/__stories__/style.css +0 -1
  111. package/lib/guide/__stories__/style.scss +0 -14
  112. package/lib/icon/__stories__/iconNames.d.ts +0 -2
  113. package/lib/icon/__stories__/iconNames.js +0 -8
  114. package/lib/icon/__stories__/style.css +0 -1
  115. package/lib/icon/__stories__/style.scss +0 -40
  116. package/lib/icon/index.d.ts +0 -43
  117. package/lib/icon/index.js +0 -111
  118. package/lib/icon/style/index.css +0 -1
  119. package/lib/icon/style/index.d.ts +0 -1
  120. package/lib/icon/style/index.js +0 -7
  121. package/lib/icon/style/index.scss +0 -7
  122. package/lib/lazy-image/__stories__/style.css +0 -1
  123. package/lib/lazy-image/__stories__/style.scss +0 -9
  124. package/lib/loading-container/__stories__/style.css +0 -1
  125. package/lib/loading-container/__stories__/style.scss +0 -6
  126. package/lib/move/__stories__/style.css +0 -1
  127. package/lib/move/__stories__/style.scss +0 -6
  128. package/lib/popover/__stories__/style.css +0 -1
  129. package/lib/popover/__stories__/style.scss +0 -16
  130. package/lib/select/__stories__/style.css +0 -1
  131. package/lib/select/__stories__/style.scss +0 -8
  132. package/lib/skeleton/__stories__/style.css +0 -1
  133. package/lib/skeleton/__stories__/style.scss +0 -3
  134. package/lib/table/__stories__/style.css +0 -1
  135. package/lib/table/__stories__/style.scss +0 -34
  136. package/lib/tabs/__stories__/style.css +0 -1
  137. package/lib/tabs/__stories__/style.scss +0 -8
@@ -1,41 +0,0 @@
1
- .demo-carousel {
2
- margin: auto;
3
- position: relative;
4
-
5
- p {
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- font-size: 32px;
10
- margin: 0;
11
- color: #F3F4F6;
12
- height: 225px;
13
- border-radius: 3px;
14
- }
15
- }
16
-
17
- .ab-carousel {
18
- position: relative;
19
- }
20
-
21
- .button-prev, .button-next {
22
- position: absolute;
23
- box-sizing: border-box;
24
- cursor: pointer;
25
- font-size: 32px;
26
- top: 50%;
27
- margin-top: -15px;
28
- width: 30px;
29
- height: 30px;
30
- color: #F3F4F6;
31
- }
32
-
33
- .button-prev {
34
- left: 5px;
35
- top: 50%;
36
- }
37
-
38
- .button-next {
39
- right: 5px;
40
- top: 50%;
41
- }
@@ -1 +0,0 @@
1
- .demo-collapse{min-height:200px;padding:.2rem}.title-wrap{width:1rem;height:.4rem;background-color:#3b82f6;color:#f3f4f6}.title-wrap>strong{display:block;width:1rem;height:.2rem;background-color:#10b981;cursor:pointer}
@@ -1,19 +0,0 @@
1
- .demo-collapse{
2
- min-height: 200px;
3
- padding: 0.2rem;
4
- }
5
-
6
- .title-wrap {
7
- width: 1rem;
8
- height: .4rem;
9
- background-color: #3B82F6;
10
- color: #F3F4F6;
11
-
12
- > strong {
13
- display: block;
14
- width: 1rem;
15
- height: .2rem;
16
- background-color: #10B981;
17
- cursor: pointer;
18
- }
19
- }
@@ -1 +0,0 @@
1
- .guide-demo .input{width:3rem}.guide-demo .btn{display:block;margin-top:.2rem;width:.8rem;height:.3rem;font-size:.16rem;text-align:center}
@@ -1,14 +0,0 @@
1
- .guide-demo {
2
- .input {
3
- width: 3rem;
4
- }
5
-
6
- .btn {
7
- display: block;
8
- margin-top: .2rem;
9
- width: .8rem;
10
- height: .3rem;
11
- font-size: .16rem;
12
- text-align: center;
13
- }
14
- }
@@ -1,2 +0,0 @@
1
- declare const _default: string[];
2
- export default _default;
@@ -1,8 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _default = ['about_us_catalog', 'about_us_delivery', 'about_us_oem', 'about_us_price', 'about_us_privacy', 'about_us_warranty', 'account', 'account_setting', 'angle', 'arrow', 'arrow_rect_right', 'audio', 'bed', 'calendar', 'caret', 'cargo', 'carriers', 'cart', 'cart_fill', 'chat', 'chat_fill', 'check_mark', 'chevron', 'close', 'contact_us', 'contact_us_fill', 'dashboard', 'delete', 'delivery', 'delivery_circle', 'delivery_white', 'driver', 'discontinued', 'edit', 'electronics', 'ellipsis', 'empty', 'exclamation_circle_blue', 'exclamation_circle_brown', 'exclamation_circle_red', 'exclamation_triangle_white', 'exclamation_triangle_yellow', 'exclamation_triangle_yellow_o', 'exterior', 'filter', 'five_stars', 'help', 'help_center_account', 'help_center_account_circle', 'help_center_chat', 'help_center_clock', 'help_center_email', 'help_center_ordering', 'help_center_orders_payment_circle', 'help_center_part_question', 'help_center_part_question_circle', 'help_center_payment', 'help_center_phone', 'help_center_prices', 'help_center_product', 'help_center_refund', 'help_center_returns', 'help_center_returns_refunds_circle', 'help_center_shipping', 'help_center_shipping_circle', 'help_center_webshop', 'hook', 'hook_circle', 'hook_circle_blue', 'hook_circle_green', 'interior', 'lifestyle', 'lighting', 'login', 'logo', 'logout', 'maximize', 'menu', 'menu_fill', 'merchandise', 'minimize', 'minus', 'minus_square_o', 'my_account_account_setting', 'my_account_dashboard', 'my_account_order_history', 'my_vehicle', 'nismo', 'order', 'order_history', 'pdf', 'performance', 'phone', 'phone_fill', 'play_btn', 'plus', 'plus_square_o', 'prices', 'prices_circle', 'prices_white', 'roof', 'safety', 'search', 'search_plus', 'security', 'search_minus', 'select_vehicle_tip', 'service', 'service_circle', 'service_white', 'six_dot', 'sort', 'tip', 'trailering', 'trd', 'truck', 'under', 'user', 'view_by_grid', 'view_by_list', 'wheels', 'word'];
8
- exports.default = _default;
@@ -1 +0,0 @@
1
- .demo-icon-list{padding:.2rem .1rem;font-size:.12rem;display:flex;width:100%;flex-wrap:wrap}.demo-icon-list>li{padding:.1rem;border:1px solid #e0e0e0;margin:.05rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f3f4f6;min-width:1.2rem;min-height:1.5rem}.demo-icon-list>li svg{max-width:.5rem;height:.5rem}.demo-icon-list>li p{padding:0 5px;text-align:center;width:1rem;word-break:break-all}.demo-icon-list>li:hover{background-color:#e5e7eb}.demo-icon-list .demo-icon-name{padding-top:.15rem}
@@ -1,40 +0,0 @@
1
- .demo-icon-list{
2
- padding: .2rem .1rem;
3
- font-size: .12rem;
4
- display: flex;
5
- width: 100%;
6
- flex-wrap: wrap;
7
-
8
- & > li {
9
- padding: .1rem;
10
- border: 1px solid #E0E0E0;
11
- margin: .05rem;
12
- display: flex;
13
- flex-direction: column;
14
- justify-content: center;
15
- align-items: center;
16
- background-color: #F3F4F6;
17
- min-width: 1.2rem;
18
- min-height: 1.5rem;
19
-
20
- svg {
21
- max-width: .5rem;
22
- height: .5rem;
23
- }
24
-
25
- p {
26
- padding: 0 5px;
27
- text-align: center;
28
- width: 1rem;
29
- word-break: break-all;
30
- }
31
-
32
- &:hover{
33
- background-color: #E5E7EB;
34
- }
35
- }
36
-
37
- .demo-icon-name{
38
- padding-top: .15rem;
39
- }
40
- }
@@ -1,43 +0,0 @@
1
- import React from 'react';
2
- export interface IconProps {
3
- /**
4
- * 图标名字
5
- */
6
- name: string;
7
- /**
8
- * 静态资源基础链接,这块是自定义资源使用的
9
- */
10
- assetBaseUrl?: string;
11
- /**
12
- * 图标组件外部嵌套的标签名
13
- */
14
- wrapper?: 'span' | 'div';
15
- /**
16
- * 图标宽度, 单位: rem
17
- */
18
- width?: number;
19
- /**
20
- * 图标高度, 单位: rem
21
- */
22
- height?: number;
23
- /**
24
- * 图标颜色值, svg 需要支持,如果已经有颜色,这个属性没有效果
25
- */
26
- color?: string;
27
- /**
28
- * 图标变换, 值是 css 的transform
29
- */
30
- transform?: string;
31
- className?: string;
32
- /**
33
- * 图标点击的回调函数
34
- */
35
- onClick?: () => void;
36
- onMouseDown?: () => void;
37
- onTouchStart?: () => void;
38
- onTouchEnd?: () => void;
39
- onMouseEnter?: () => void;
40
- onMouseLeave?: () => void;
41
- }
42
- declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>>>;
43
- export default _default;
package/lib/icon/index.js DELETED
@@ -1,111 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _classnames = _interopRequireDefault(require("classnames"));
13
-
14
- var _reactSvg = _interopRequireDefault(require("react-svg"));
15
-
16
- var _useConfig = _interopRequireDefault(require("../use-config"));
17
-
18
- var cls = 'ab-icon';
19
-
20
- var Icon = _react.default.forwardRef(function (props, ref) {
21
- var name = props.name,
22
- assetBaseUrl = props.assetBaseUrl,
23
- _a = props.wrapper,
24
- wrapper = _a === void 0 ? 'span' : _a,
25
- className = props.className,
26
- color = props.color,
27
- width = props.width,
28
- height = props.height,
29
- transform = props.transform,
30
- onClick = props.onClick,
31
- onMouseDown = props.onMouseDown,
32
- onTouchStart = props.onTouchStart,
33
- onTouchEnd = props.onTouchEnd,
34
- onMouseEnter = props.onMouseEnter,
35
- onMouseLeave = props.onMouseLeave;
36
- var baseUrl = assetBaseUrl || _useConfig.default.assetCommonUiUrl;
37
- var spanStyle = {};
38
-
39
- if (width) {
40
- spanStyle.width = width + "rem";
41
- spanStyle.minWidth = width + "rem";
42
- spanStyle.maxWidth = width + "rem";
43
- }
44
-
45
- if (height) {
46
- spanStyle.height = height + "rem";
47
- spanStyle.minHeight = height + "rem";
48
- spanStyle.maxHeight = height + "rem";
49
- } // transform 从 svgStyle 迁移到 spanStyle, 解决渲染时,重新创建后,动画不能执行的问题
50
-
51
-
52
- if (transform) {
53
- spanStyle.transform = transform;
54
- }
55
-
56
- var onIconClick = function onIconClick(ev) {
57
- // 阻止冒泡
58
- if (ev && onClick) {
59
- ev.stopPropagation();
60
- ev.preventDefault();
61
-
62
- if (ev.nativeEvent && ev.nativeEvent.stopImmediatePropagation) {
63
- ev.nativeEvent.stopImmediatePropagation();
64
- }
65
-
66
- onClick();
67
- }
68
- };
69
-
70
- var beforeInjection = function beforeInjection(svg) {
71
- // 设置svg样式
72
- var svgStyle = '';
73
-
74
- if (color) {
75
- svgStyle = "fill: " + color + "; color: " + color + ";";
76
- }
77
-
78
- if (width) {
79
- svgStyle += "width: " + width + "rem;";
80
- }
81
-
82
- if (height) {
83
- svgStyle += "height: " + height + "rem;";
84
- }
85
-
86
- if (svgStyle === '') {
87
- return;
88
- }
89
-
90
- svg.setAttribute('style', svgStyle);
91
- };
92
-
93
- return _react.default.createElement(_reactSvg.default, {
94
- ref: ref,
95
- style: spanStyle,
96
- beforeInjection: beforeInjection,
97
- src: baseUrl + "/svg/" + name + ".svg",
98
- wrapper: wrapper,
99
- className: (0, _classnames.default)(cls, className),
100
- onClick: onIconClick,
101
- onMouseDown: onMouseDown,
102
- onTouchStart: onTouchStart,
103
- onTouchEnd: onTouchEnd,
104
- onMouseEnter: onMouseEnter,
105
- onMouseLeave: onMouseLeave
106
- });
107
- });
108
-
109
- var _default = _react.default.memo(Icon);
110
-
111
- exports.default = _default;
@@ -1 +0,0 @@
1
- .ab-icon,.ab-icon div,.ab-icon span,.ab-icon svg{display:block}
@@ -1 +0,0 @@
1
- export {};
@@ -1,7 +0,0 @@
1
- "use strict";
2
-
3
- var _utils = require("@autobest-ui/utils");
4
-
5
- if (_utils.canUseDOM) {
6
- require('./index.scss');
7
- }
@@ -1,7 +0,0 @@
1
- $namespace: ab-icon;
2
-
3
- .#{$namespace}{
4
- &, span, div, svg{
5
- display: block;
6
- }
7
- }
@@ -1 +0,0 @@
1
- .lazy-image-demo{margin-top:200vh}.lazy-image-demo img{display:block;width:400px;margin:.2rem}
@@ -1,9 +0,0 @@
1
- .lazy-image-demo {
2
- margin-top: 200vh;
3
-
4
- img {
5
- display: block;
6
- width: 400px;
7
- margin: .2rem;
8
- }
9
- }
@@ -1 +0,0 @@
1
- .loading-container-demo{margin:1rem;width:2rem;height:2rem;background:#b0b0b0}
@@ -1,6 +0,0 @@
1
- .loading-container-demo {
2
- margin: 1rem;
3
- width: 2rem;
4
- height: 2rem;
5
- background: #b0b0b0;
6
- }
@@ -1 +0,0 @@
1
- .demo-move{margin:.2rem auto;width:500px;height:500px;border:5px solid #ccc}
@@ -1,6 +0,0 @@
1
- .demo-move{
2
- margin: 0.2rem auto;
3
- width: 500px;
4
- height: 500px;
5
- border: 5px solid #ccc;
6
- }
@@ -1 +0,0 @@
1
- .popover-demo{padding:80px 60px;width:465px;height:400px;margin:auto;position:relative}.popover-demo button{width:100px;display:inline-block}.popover-demo-tip{height:60px;width:100px}
@@ -1,16 +0,0 @@
1
- .popover-demo{
2
- padding: 80px 60px;
3
- width: 465px;
4
- height: 400px;
5
- margin: auto;
6
- position: relative;
7
-
8
- button {
9
- width: 100px;
10
- display: inline-block;
11
- }
12
- }
13
- .popover-demo-tip {
14
- height: 60px;
15
- width: 100px;
16
- }
@@ -1 +0,0 @@
1
- .select-demo{margin:10px auto;width:200px}.select-demo .select-group{width:1rem}
@@ -1,8 +0,0 @@
1
- .select-demo{
2
- margin: 10px auto;
3
- width: 200px;
4
-
5
- .select-group {
6
- width: 1rem;
7
- }
8
- }
@@ -1 +0,0 @@
1
- .skeleton-demo{padding:.2rem}
@@ -1,3 +0,0 @@
1
- .skeleton-demo {
2
- padding: .2rem;
3
- }
@@ -1 +0,0 @@
1
- .table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}
@@ -1,34 +0,0 @@
1
- .table-demo {
2
- thead {
3
- background-color: #2b5797;
4
- color: #fff;
5
- }
6
-
7
- tbody tr {
8
- &.ab-table-expand-row {
9
- background-color: #fafafa;
10
- }
11
-
12
- &:hover {
13
- background-color: #f3f3f3;
14
- }
15
- }
16
-
17
- th, td {
18
- padding: .16rem;
19
- border-bottom: 1px solid #D0D0D0;
20
-
21
- &.ab-table-checkbox {
22
- padding: .16rem 0;
23
- }
24
- }
25
-
26
- .merged-cell {
27
- border-left: 1px solid #D0D0D0;
28
- border-right: 1px solid #D0D0D0;
29
- }
30
- }
31
-
32
- .table-demo-expanded {
33
- font-size: .2rem;
34
- }
@@ -1 +0,0 @@
1
- .tabs-demo{width:500px;margin:20px auto}.tabs-demo .ab-tabs-item{padding:2px 6px}
@@ -1,8 +0,0 @@
1
- .tabs-demo {
2
- width: 500px;
3
- margin: 20px auto;
4
-
5
- .ab-tabs-item {
6
- padding: 2px 6px;
7
- }
8
- }