@kdcloudjs/kdesign 1.1.3 → 1.2.2

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 (132) hide show
  1. package/CHANGELOG.md +79 -3
  2. package/dist/kdesign-complete.less +1006 -783
  3. package/dist/kdesign.css +358 -268
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +529 -262
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +4 -4
  8. package/dist/kdesign.min.js +8 -8
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/_utils/usePopper.js +33 -12
  11. package/es/anchor/anchor.js +0 -6
  12. package/es/anchor/style/index.css +5 -2
  13. package/es/anchor/style/index.less +6 -2
  14. package/es/anchor/style/token.less +2 -1
  15. package/es/button/button.d.ts +1 -1
  16. package/es/button/button.js +2 -2
  17. package/es/button/group.d.ts +21 -0
  18. package/es/button/group.js +130 -0
  19. package/es/button/index.d.ts +5 -1
  20. package/es/button/index.js +4 -1
  21. package/es/button/style/index.css +117 -21
  22. package/es/button/style/index.less +332 -192
  23. package/es/button/style/token.less +41 -25
  24. package/es/carousel/carousel.js +4 -0
  25. package/es/carousel/displayList.js +8 -4
  26. package/es/carousel/fadeList.js +9 -5
  27. package/es/carousel/slideList.js +6 -3
  28. package/es/carousel/style/index.css +65 -0
  29. package/es/carousel/style/index.less +66 -1
  30. package/es/collapse/panel.d.ts +1 -0
  31. package/es/collapse/panel.js +17 -5
  32. package/es/collapse/style/index.css +32 -6
  33. package/es/collapse/style/index.less +24 -1
  34. package/es/collapse/style/token.less +12 -10
  35. package/es/config-provider/compDefaultProps.d.ts +4 -0
  36. package/es/config-provider/compDefaultProps.js +4 -0
  37. package/es/drawer/drawer.d.ts +1 -0
  38. package/es/drawer/drawer.js +56 -21
  39. package/es/empty/defaultEmptyImg.js +5 -3
  40. package/es/empty/illustrationEmptyImg.js +6 -4
  41. package/es/icon/interface.js +1 -1
  42. package/es/image/preview.js +1 -1
  43. package/es/image/style/index.css +8 -8
  44. package/es/image/style/index.less +5 -5
  45. package/es/image/style/token.less +12 -25
  46. package/es/radio/radio.js +3 -1
  47. package/es/radio/style/index.css +51 -24
  48. package/es/radio/style/index.less +28 -2
  49. package/es/radio/style/token.less +4 -4
  50. package/es/rate/style/index.css +9 -9
  51. package/es/rate/style/token.less +6 -6
  52. package/es/select/option.js +1 -1
  53. package/es/select/style/index.css +14 -5
  54. package/es/select/style/index.less +374 -368
  55. package/es/select/style/token.less +2 -2
  56. package/es/stepper/style/index.css +1 -1
  57. package/es/stepper/style/token.less +1 -1
  58. package/es/steps/style/index.css +40 -32
  59. package/es/steps/style/index.less +23 -33
  60. package/es/steps/style/token.less +6 -9
  61. package/es/style/icon/kdicon.css +2 -1
  62. package/es/style/icon/kdicon.woff +0 -0
  63. package/es/switch/style/index.css +11 -11
  64. package/es/switch/style/index.less +2 -2
  65. package/es/switch/style/token.less +7 -10
  66. package/es/tabs/tabs.js +5 -1
  67. package/es/tag/style/index.css +2 -147
  68. package/es/tag/style/index.less +4 -24
  69. package/es/tag/style/mixin.less +0 -13
  70. package/es/tag/style/token.less +1 -1
  71. package/lib/_utils/usePopper.js +34 -12
  72. package/lib/anchor/anchor.js +0 -6
  73. package/lib/anchor/style/index.css +5 -2
  74. package/lib/anchor/style/index.less +6 -2
  75. package/lib/anchor/style/token.less +2 -1
  76. package/lib/button/button.d.ts +1 -1
  77. package/lib/button/button.js +2 -2
  78. package/lib/button/group.d.ts +21 -0
  79. package/lib/button/group.js +166 -0
  80. package/lib/button/index.d.ts +5 -1
  81. package/lib/button/index.js +5 -1
  82. package/lib/button/style/index.css +117 -21
  83. package/lib/button/style/index.less +332 -192
  84. package/lib/button/style/token.less +41 -25
  85. package/lib/carousel/carousel.js +4 -0
  86. package/lib/carousel/displayList.js +9 -4
  87. package/lib/carousel/fadeList.js +10 -5
  88. package/lib/carousel/slideList.js +6 -3
  89. package/lib/carousel/style/index.css +65 -0
  90. package/lib/carousel/style/index.less +66 -1
  91. package/lib/collapse/panel.d.ts +1 -0
  92. package/lib/collapse/panel.js +17 -5
  93. package/lib/collapse/style/index.css +32 -6
  94. package/lib/collapse/style/index.less +24 -1
  95. package/lib/collapse/style/token.less +12 -10
  96. package/lib/config-provider/compDefaultProps.d.ts +4 -0
  97. package/lib/config-provider/compDefaultProps.js +4 -0
  98. package/lib/drawer/drawer.d.ts +1 -0
  99. package/lib/drawer/drawer.js +61 -27
  100. package/lib/empty/defaultEmptyImg.js +6 -3
  101. package/lib/empty/illustrationEmptyImg.js +7 -4
  102. package/lib/icon/interface.js +1 -1
  103. package/lib/image/preview.js +1 -1
  104. package/lib/image/style/index.css +8 -8
  105. package/lib/image/style/index.less +5 -5
  106. package/lib/image/style/token.less +12 -25
  107. package/lib/radio/radio.js +3 -1
  108. package/lib/radio/style/index.css +51 -24
  109. package/lib/radio/style/index.less +28 -2
  110. package/lib/radio/style/token.less +4 -4
  111. package/lib/rate/style/index.css +9 -9
  112. package/lib/rate/style/token.less +6 -6
  113. package/lib/select/option.js +1 -1
  114. package/lib/select/style/index.css +14 -5
  115. package/lib/select/style/index.less +374 -368
  116. package/lib/select/style/token.less +2 -2
  117. package/lib/stepper/style/index.css +1 -1
  118. package/lib/stepper/style/token.less +1 -1
  119. package/lib/steps/style/index.css +40 -32
  120. package/lib/steps/style/index.less +23 -33
  121. package/lib/steps/style/token.less +6 -9
  122. package/lib/style/icon/kdicon.css +2 -1
  123. package/lib/style/icon/kdicon.woff +0 -0
  124. package/lib/switch/style/index.css +11 -11
  125. package/lib/switch/style/index.less +2 -2
  126. package/lib/switch/style/token.less +7 -10
  127. package/lib/tabs/tabs.js +6 -1
  128. package/lib/tag/style/index.css +2 -147
  129. package/lib/tag/style/index.less +4 -24
  130. package/lib/tag/style/mixin.less +0 -13
  131. package/lib/tag/style/token.less +1 -1
  132. package/package.json +1 -1
@@ -1,5 +1,6 @@
1
1
  import React, { useContext } from 'react';
2
2
  import ConfigContext from '../config-provider/ConfigContext';
3
+ import uniqueId from 'lodash/uniqueId';
3
4
 
4
5
  function DefaultEmptyImg() {
5
6
  var _useContext = useContext(ConfigContext),
@@ -7,6 +8,7 @@ function DefaultEmptyImg() {
7
8
  prefixCls = _useContext.prefixCls;
8
9
 
9
10
  var emptyPrefixCls = getPrefixCls(prefixCls, 'empty');
11
+ var linearGradientId = uniqueId(emptyPrefixCls + '-default-linearGradient');
10
12
  return /*#__PURE__*/React.createElement("svg", {
11
13
  className: "".concat(emptyPrefixCls, "-image"),
12
14
  width: "168px",
@@ -19,7 +21,7 @@ function DefaultEmptyImg() {
19
21
  y1: "0%",
20
22
  x2: "50%",
21
23
  y2: "100%",
22
- id: "linearGradient-1"
24
+ id: linearGradientId
23
25
  }, /*#__PURE__*/React.createElement("stop", {
24
26
  stopColor: "#D6DCE7",
25
27
  offset: "0%"
@@ -69,7 +71,7 @@ function DefaultEmptyImg() {
69
71
  height: "6"
70
72
  })), /*#__PURE__*/React.createElement("g", {
71
73
  transform: "translate(108.000000, 40.000000)",
72
- fill: "url(#linearGradient-1)",
74
+ fill: "url(#".concat(linearGradientId, ")"),
73
75
  id: "\u80CC\u666F/\u4E91",
74
76
  opacity: "0.300000012"
75
77
  }, /*#__PURE__*/React.createElement("g", {
@@ -78,7 +80,7 @@ function DefaultEmptyImg() {
78
80
  d: "M3,39 L3,24 C3,15.7157288 9.71572875,9 18,9 C25.4616776,9 31.6508469,14.4482558 32.8063948,21.5836543 C33.797875,21.2064779 34.8748247,21 36,21 C40.9705627,21 45,25.0294373 45,30 L45,39 L3,39 Z"
79
81
  }))), /*#__PURE__*/React.createElement("g", {
80
82
  transform: "translate(12.000000, 32.000000)",
81
- fill: "url(#linearGradient-1)",
83
+ fill: "url(#".concat(linearGradientId, ")"),
82
84
  id: "\u80CC\u666F/\u4E91",
83
85
  opacity: "0.300000012"
84
86
  }, /*#__PURE__*/React.createElement("g", {
@@ -1,5 +1,6 @@
1
1
  import React, { useContext } from 'react';
2
2
  import ConfigContext from '../config-provider/ConfigContext';
3
+ import uniqueId from 'lodash/uniqueId';
3
4
 
4
5
  function IllustrationEmptyImg() {
5
6
  var _useContext = useContext(ConfigContext),
@@ -7,6 +8,7 @@ function IllustrationEmptyImg() {
7
8
  prefixCls = _useContext.prefixCls;
8
9
 
9
10
  var emptyPrefixCls = getPrefixCls(prefixCls, 'empty');
11
+ var linearGradientId = uniqueId(emptyPrefixCls + '-illus-linearGradient-');
10
12
  return /*#__PURE__*/React.createElement("svg", {
11
13
  className: "".concat(emptyPrefixCls, "-image"),
12
14
  width: "200px",
@@ -25,7 +27,7 @@ function IllustrationEmptyImg() {
25
27
  y1: "0%",
26
28
  x2: "50%",
27
29
  y2: "100%",
28
- id: "linearGradient-3"
30
+ id: linearGradientId
29
31
  }, /*#__PURE__*/React.createElement("stop", {
30
32
  stopColor: "#F2F5FA",
31
33
  offset: "0%"
@@ -38,7 +40,7 @@ function IllustrationEmptyImg() {
38
40
  y1: "0%",
39
41
  x2: "50%",
40
42
  y2: "100%",
41
- id: "linearGradient-4"
43
+ id: "".concat(linearGradientId, "-1")
42
44
  }, /*#__PURE__*/React.createElement("stop", {
43
45
  stopColor: "#F2F5FA",
44
46
  offset: "0%"
@@ -92,7 +94,7 @@ function IllustrationEmptyImg() {
92
94
  transform: "translate(11.428571, 37.050000)"
93
95
  }, /*#__PURE__*/React.createElement("g", {
94
96
  transform: "translate(34.285714, 34.200000) scale(-1, 1) translate(-34.285714, -34.200000) ",
95
- fill: "url(#linearGradient-3)",
97
+ fill: "url(#".concat(linearGradientId, ")"),
96
98
  id: "\u5F62\u72B6\u7ED3\u5408"
97
99
  }, /*#__PURE__*/React.createElement("path", {
98
100
  d: "M4.28571429,55.575 L4.28571429,34.2535714 C4.28571429,22.4188982 13.8796125,12.825 25.7142857,12.825 C36.3598894,12.825 45.1923741,20.587885 46.8597669,30.7616821 C48.2786739,30.2207368 49.8190861,29.925 51.4285714,29.925 C58.5293754,29.925 64.2857143,35.6813389 64.2857143,42.7821429 L64.2857143,55.575 L4.28571429,55.575 Z"
@@ -101,7 +103,7 @@ function IllustrationEmptyImg() {
101
103
  id: "\u80CC\u666F/\u4E91"
102
104
  }, /*#__PURE__*/React.createElement("g", {
103
105
  transform: "translate(142.857143, 51.300000)",
104
- fill: "url(#linearGradient-4)",
106
+ fill: "url(#".concat(linearGradientId, "-1)"),
105
107
  id: "\u5F62\u72B6\u7ED3\u5408"
106
108
  }, /*#__PURE__*/React.createElement("path", {
107
109
  d: "M17.1428571,8.55 C24.2401777,8.55 30.1286667,13.7256234 31.2399627,20.508509 C32.186033,20.1471098 33.2128549,19.95 34.2857143,19.95 C39.0195836,19.95 42.8571429,23.7875593 42.8571429,28.5214286 L42.8571429,37.05 L31.4281429,37.049 L31.4285714,37.05 L2.85714286,37.05 L2.85714286,22.8357143 C2.85714286,14.9459321 9.253075,8.55 17.1428571,8.55 Z"
@@ -1,5 +1,5 @@
1
1
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
2
2
  import { tuple } from '../_utils/type';
3
- export var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'unfoldmenu', 'foldmenu', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'reset', 'preview-view', 'unfold', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'menu', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting', 'chart-display', 'date', 'more-item', 'international', 'little-k', 'bellOutlined'];
3
+ export var BaseIcon = ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'first', 'last', 'double-arrow-left', 'double-arrow-right', 'push-down', 'put-top', 'put-bottom', 'put-on', 'put-off', 'switch-up', 'switch-down', 'all-border', 'top-border', 'right-border', 'bottom-border', 'left-border', 'left-extension', 'right-extension', 'left-unfold', 'right-unfold', 'unfoldmenu', 'foldmenu', 'enlarge', 'expand', 'close-full-screen', 'split', 'back', 'arrow', 'no-border', 'border', 'rough-border', 'align-left', 'align-right', 'align-center', 'vertical-center', 'delete-indentation', 'equal', 'greater-equal', 'not-equal', 'male', 'female', 'copy', 'print', 'lock', 'scanning', 'like', 'project', 'user-info', 'shutdown', 'image', 'delete-line', 'add-line', 'job-info', 'detect', 'cancel', 'stop', 'cell', 'fixed-shrink', 'attachment', 'location', 'reduce', 'resign-report', 'forbid', 'education', 'unlock', 'contract', 'filter', 'more', 'operating-element', 'fail', 'edit', 'have-attachment', 'hide', 'preview', 'unfold-all', 'wrap', 'filter-switch', 'qualification-info', 'cn', 'en', 'git', 'reset', 'preview-view', 'unfold', 'comment', 'shoppingcart', 'add-child', 'save', 'detail', 'table-setting', 'edit-view', 'edit-border', 'hyperlink', 'code', 'import', 'address', 'analysis', 'share', 'chart', 'fixed-window', 'order', 'phone', 'classify', 'feedback', 'menu', 'voice', 'search-border', 'material', 'finish', 'more-info', 'fixed', 'change', 'copy-code', 'return', 'qrcode', 'counterclockwise', 'list', 'switch', 'task-process', 'add', 'delete', 'add-word', 'two-window', 'spin', 'ordered-list', 'cooperation', 'quit', 'shrink', 'zoom', 'graffiti', 'experience', 'medical-report', 'bankcard', 'yunzhijia', 'customize', 'refresh', 'search', 'loadding', 'loadding-circle', 'right', 'close', 'upload', 'download', 'upload-cloud', 'waiting', 'warning', 'exclamatory', 'tips', 'setting', 'chart-display', 'date', 'more-item', 'international', 'little-k', 'bellOutlined', 'sigma'];
4
4
  export var SolidIcon = ['arrow-up-solid', 'arrow-right-solid', 'arrow-down-solid', 'arrow-left-solid', 'left-unfold-solid', 'right-unfold-solid', 'unlock-solid', 'multiply', 'division-solid', 'title-solid', 'communication-solid', 'fixed-solid', 'more-info-solid', 'timezone-solid', 'mosaic-solid', 'strike-solid', 'lock-solid', 'filter-solid', 'person-solid', 'bold-solid', 'delete-solid', 'processing-solid', 'tips-solid', 'quote-solid', 'oblique-solid', 'sun-solid', 'underline-solid', 'font-background-solid', 'eliminate-solid', 'font-color-solid', 'fx', 'refresh-solid', 'right-solid', 'location-solid', 'add-solid', 'warning-solid', 'close-solid', 'right-bold', 'close-bold', 'workbench', 'star', 'notice'];
5
5
  export var IconTypes = tuple.apply(void 0, _concatInstanceProperty(BaseIcon).call(BaseIcon, SolidIcon));
@@ -172,7 +172,7 @@ var Preview = function Preview(props) {
172
172
  }, operations, /*#__PURE__*/React.createElement("span", {
173
173
  onClick: onClose
174
174
  }, /*#__PURE__*/React.createElement(Icon, {
175
- type: "close"
175
+ type: "close-solid"
176
176
  }), "\u5173\u95ED"))));
177
177
  return /*#__PURE__*/ReactDOM.createPortal(peviewContainer, document.body);
178
178
  };
@@ -137,8 +137,8 @@
137
137
  opacity: 0;
138
138
  -webkit-transform: translateY(100%);
139
139
  transform: translateY(100%);
140
- -webkit-transition: all var(--kd-c-image-action-transition, var(--kd-g-duration-quickly, 0.2s)) ease-out;
141
- transition: all var(--kd-c-image-action-transition, var(--kd-g-duration-quickly, 0.2s)) ease-out;
140
+ -webkit-transition: all 0.2s ease-out;
141
+ transition: all 0.2s ease-out;
142
142
  background-color: var(--kd-c-image-action-color-background, rgba(0, 0, 0, 0.5));
143
143
  }
144
144
  .kd-image-action > * {
@@ -151,7 +151,7 @@
151
151
  margin-left: 20px;
152
152
  }
153
153
  .kd-image-preview {
154
- z-index: var(--kd-c-image-z-index-masker, var(--kd-g-z-index-masker, 3000));
154
+ z-index: 3000;
155
155
  position: fixed;
156
156
  top: 0;
157
157
  right: 0;
@@ -161,8 +161,8 @@
161
161
  -webkit-transform: scale(0.15);
162
162
  transform: scale(0.15);
163
163
  visibility: hidden;
164
- -webkit-transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-in, cubic-bezier(0.4, 0, 1, 0.6)));
165
- transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-in, cubic-bezier(0.4, 0, 1, 0.6)));
164
+ -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
165
+ transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
166
166
  -webkit-overflow-scrolling: touch;
167
167
  }
168
168
  .kd-image-preview.show {
@@ -170,8 +170,8 @@
170
170
  -webkit-transform: scale(1);
171
171
  transform: scale(1);
172
172
  visibility: visible;
173
- -webkit-transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1)));
174
- transition: all calc(var(--kd-c-image-transition-duration, 0.3s) - 0.1s) var(--kd-c-image-motion-ease-out, var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1)));
173
+ -webkit-transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
174
+ transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
175
175
  }
176
176
  .kd-image-preview-mask {
177
177
  position: fixed;
@@ -255,7 +255,7 @@
255
255
  }
256
256
  .kd-image-preview-action i {
257
257
  color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
258
- font-size: var(--kd-c-image-icon-font-size, 27px);
258
+ font-size: var(--kd-c-image-icon-font-size, 26px);
259
259
  cursor: pointer;
260
260
  }
261
261
  .kd-image-preview-action i:hover,
@@ -41,7 +41,7 @@
41
41
  text-align: center;
42
42
  opacity: 0;
43
43
  transform: translateY(100%);
44
- transition: all @image-action-transition ease-out;
44
+ transition: all 0.2s ease-out;
45
45
  background-color: @image-action-background-color;
46
46
 
47
47
  >* {
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  .@{image-preview-prefix-cls} {
61
- z-index: @image-z-index-masker;
61
+ z-index: 3000;
62
62
  position: fixed;
63
63
  top: 0;
64
64
  right: 0;
@@ -67,14 +67,14 @@
67
67
  opacity: 0;
68
68
  transform: scale(0.15);
69
69
  visibility: hidden;
70
- transition: all calc(@image-transition-duration - 0.1s) @image-motion-ease-in;
70
+ transition: all 0.2s cubic-bezier(0.4,0,1,0.6);
71
71
  -webkit-overflow-scrolling: touch;
72
72
 
73
73
  &.show {
74
74
  opacity: 1;
75
75
  transform: scale(1);
76
76
  visibility: visible;
77
- transition: all calc(@image-transition-duration - 0.1s) @image-motion-ease-out;
77
+ transition: all 0.2s cubic-bezier(0,.4,.4,1);
78
78
  }
79
79
 
80
80
  &-mask {
@@ -104,7 +104,7 @@
104
104
 
105
105
  &:hover,
106
106
  &:active {
107
- color: @theme-color;
107
+ color: #5582f3;
108
108
  }
109
109
  }
110
110
 
@@ -2,31 +2,18 @@
2
2
 
3
3
  @image-prefix: '--@{kd-prefix}-c-image';
4
4
 
5
- @image-transition-duration: var(~'@{image-prefix}-transition-duration',@transition-duration);
6
- @image-motion-ease-out: var(~'@{image-prefix}-motion-ease-out',@motion-ease-out);
7
- @image-motion-ease-in: var(~'@{image-prefix}-motion-ease-out',@motion-ease-in);
8
- @image-z-index-masker: var(~'@{image-prefix}-z-index-masker',@z-index-masker);
9
- @image-border-radius: var(~'@{image-prefix}-radius-border',@radius-border);
10
- @image-action-transition: var(~'@{image-prefix}-action-transition',@duration-quickly);
11
-
12
-
13
-
14
-
15
5
  // color
16
- @image-icon-color: var(~'@{image-prefix}-icon-color',@color-white);//图片预览 图标颜色
17
- @image-close-color-background: var(~'@{image-prefix}-close-color-background',#666666);//删除图标 背景色
18
- @image-action-background-color: var(~'@{image-prefix}-action-color-background',rgba(0, 0, 0, 0.5));
19
-
20
-
6
+ @image-icon-color: var(~'@{image-prefix}-icon-color', @color-white); //图片预览 图标颜色
7
+ @image-close-color-background: var(~'@{image-prefix}-close-color-background', #666666); //删除图标 背景色
8
+ @image-action-background-color: var(~'@{image-prefix}-action-color-background', rgba(0, 0, 0, 0.5));
21
9
  // font
22
- @image-icon-font-size: var(~'@{image-prefix}-icon-font-size',27px);//图片预览 图标大小
23
- @image-preview-close-font-size: var(~'@{image-prefix}-preview-font-size',28px);
24
- @image-font-size-x-large: var(~'@{image-prefix}-font-size-x-large',@font-size-x-large);
25
-
10
+ @image-icon-font-size: var(~'@{image-prefix}-icon-font-size', 26px); //图片预览 图标大小
11
+ @image-preview-close-font-size: var(~'@{image-prefix}-preview-font-size', 28px);
12
+ @image-font-size-x-large: var(~'@{image-prefix}-font-size-x-large', @font-size-x-large);
13
+ // radius
14
+ @image-border-radius: var(~'@{image-prefix}-radius-border', @radius-border);
26
15
  // sizing
27
- @image-action-width: var(~'@{image-prefix}-action-sizing-width',100%);
28
- @image-preview-close-width: var(~'@{image-prefix}-preview-sizing-width',18px);
29
- @image-preview-close-height: var(~'@{image-prefix}-preview-sizing-height',18px);
30
- @image-action-height: var(~'@{image-prefix}-action-sizing-height',28px);
31
-
32
-
16
+ @image-action-width: var(~'@{image-prefix}-action-sizing-width', 100%);
17
+ @image-preview-close-width: var(~'@{image-prefix}-preview-sizing-width', 18px);
18
+ @image-preview-close-height: var(~'@{image-prefix}-preview-sizing-height', 18px);
19
+ @image-action-height: var(~'@{image-prefix}-action-sizing-height', 28px);
package/es/radio/radio.js CHANGED
@@ -104,7 +104,9 @@ var InternalRadio = function InternalRadio(props, ref) {
104
104
  }, /*#__PURE__*/React.createElement("input", _extends({
105
105
  type: "radio",
106
106
  className: "".concat(radioPrefixCls, "-input")
107
- }, radioProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", null, children) : null)
107
+ }, radioProps)), children !== undefined ? /*#__PURE__*/React.createElement("span", {
108
+ className: "".concat(radioPrefixCls, "-text")
109
+ }, children) : null)
108
110
  );
109
111
  };
110
112
 
@@ -115,9 +115,10 @@
115
115
  font-feature-settings: 'tnum';
116
116
  position: relative;
117
117
  display: inline-block;
118
- padding-left: var(--kd-c-radio-square-sizing-width-height, 13px);
118
+ padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
119
119
  margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
120
120
  white-space: nowrap;
121
+ text-overflow: ellipsis;
121
122
  cursor: pointer;
122
123
  vertical-align: middle;
123
124
  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
@@ -127,8 +128,8 @@
127
128
  position: absolute;
128
129
  top: 50%;
129
130
  left: 0;
130
- height: var(--kd-c-radio-square-sizing-width-height, 13px);
131
- width: var(--kd-c-radio-square-sizing-width-height, 13px);
131
+ height: var(--kd-c-radio-square-sizing-width-height, 14px);
132
+ width: var(--kd-c-radio-square-sizing-width-height, 14px);
132
133
  content: '';
133
134
  border-radius: 50%;
134
135
  -webkit-box-sizing: border-box;
@@ -146,8 +147,8 @@
146
147
  position: absolute;
147
148
  top: 50%;
148
149
  left: 2px;
149
- width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
150
- height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
150
+ width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
151
+ height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
151
152
  content: '';
152
153
  border-radius: 50%;
153
154
  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -165,7 +166,10 @@
165
166
  opacity: 0;
166
167
  }
167
168
  .kd-radio > span {
168
- padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 6px);
169
+ padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
170
+ }
171
+ .kd-radio:hover {
172
+ color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
169
173
  }
170
174
  .kd-radio:hover::before {
171
175
  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -174,15 +178,15 @@
174
178
  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
175
179
  }
176
180
  .kd-radio-checked:focus-within::before {
177
- -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
178
- box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
181
+ -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
182
+ box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
179
183
  }
180
184
  .kd-radio-checked::after {
181
185
  position: absolute;
182
186
  top: 50%;
183
187
  left: 2px;
184
- width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
185
- height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
188
+ width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
189
+ height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
186
190
  content: '';
187
191
  border-radius: 50%;
188
192
  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -213,6 +217,13 @@
213
217
  -webkit-animation: none;
214
218
  animation: none;
215
219
  }
220
+ .kd-radio-disabled.kd-radio-checked,
221
+ .kd-radio-disabled:hover.kd-radio-checked {
222
+ color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
223
+ }
224
+ .kd-radio-text {
225
+ line-height: 1.5;
226
+ }
216
227
  .kd-radio-square {
217
228
  -webkit-box-sizing: border-box;
218
229
  box-sizing: border-box;
@@ -222,15 +233,17 @@
222
233
  list-style: none;
223
234
  -webkit-font-feature-settings: 'tnum';
224
235
  font-feature-settings: 'tnum';
236
+ white-space: nowrap;
237
+ text-overflow: ellipsis;
225
238
  position: relative;
226
239
  display: inline-block;
227
240
  height: var(--kd-c-radio-square-sizing-height, 32px);
228
- padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
229
- padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
230
- padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
231
- padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
241
+ padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
242
+ padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
243
+ padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
244
+ padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
232
245
  margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
233
- line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
246
+ line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
234
247
  vertical-align: middle;
235
248
  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
236
249
  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -279,8 +292,8 @@
279
292
  border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
280
293
  }
281
294
  .kd-radio-square-checked:focus-within {
282
- -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
283
- box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
295
+ -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
296
+ box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
284
297
  }
285
298
  .kd-radio-square-checked::after {
286
299
  position: absolute;
@@ -314,6 +327,13 @@
314
327
  -webkit-animation: none;
315
328
  animation: none;
316
329
  }
330
+ .kd-radio-square-disabled.kd-radio-square-checked,
331
+ .kd-radio-square-disabled:hover.kd-radio-square-checked {
332
+ color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
333
+ }
334
+ .kd-radio-square-text {
335
+ line-height: 1.5;
336
+ }
317
337
  .kd-radio-button {
318
338
  -webkit-box-sizing: border-box;
319
339
  box-sizing: border-box;
@@ -326,11 +346,11 @@
326
346
  position: relative;
327
347
  display: inline-block;
328
348
  height: var(--kd-c-radio-square-sizing-height, 32px);
329
- padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
330
- padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
331
- padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
332
- padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
333
- line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
349
+ padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
350
+ padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
351
+ padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
352
+ padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
353
+ line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
334
354
  vertical-align: middle;
335
355
  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
336
356
  font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -381,8 +401,8 @@
381
401
  background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
382
402
  }
383
403
  .kd-radio-button-checked:focus-within {
384
- -webkit-box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
385
- box-shadow: 0 0 0 3px rgba(var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3)), 10%);
404
+ -webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
405
+ box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
386
406
  }
387
407
  .kd-radio-button-checked:hover {
388
408
  color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
@@ -411,3 +431,10 @@
411
431
  border-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
412
432
  cursor: not-allowed;
413
433
  }
434
+ .kd-radio-button-text {
435
+ white-space: nowrap;
436
+ overflow: hidden;
437
+ text-overflow: ellipsis;
438
+ display: block;
439
+ line-height: 1.5;
440
+ }
@@ -1,10 +1,11 @@
1
1
  @import '../../style/themes/index';
2
2
  @import 'token.less';
3
+ @import '../../style/mixins/index.less';
3
4
  @radio-prefix-cls: ~'@{kd-prefix}-radio';
4
5
  @radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
5
6
  @radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
6
7
  @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
7
- @radio-focus-shadow: 0 0 0 3px rgba(@radio-color-theme, 10%);
8
+ @radio-focus-shadow: 0 0 0 3px rgba(85, 130, 243, 10%);
8
9
 
9
10
  // 默认类型(单选项)
10
11
  .@{radio-prefix-cls} {
@@ -16,6 +17,7 @@
16
17
  padding-left: @radio-circle-size;
17
18
  margin-right: @radio-margin-right;
18
19
  white-space: nowrap;
20
+ text-overflow: ellipsis;
19
21
  cursor: pointer;
20
22
  vertical-align: middle;
21
23
  color: @radio-font-color;
@@ -64,7 +66,7 @@
64
66
  // 悬停状态
65
67
  &:hover {
66
68
 
67
- // color: @radio-color-theme;
69
+ color: @radio-color-theme;
68
70
  &::before {
69
71
  border-color: @radio-color-theme;
70
72
  }
@@ -113,6 +115,14 @@
113
115
  background-color: @radio-color-disabled;
114
116
  animation: none;
115
117
  }
118
+
119
+ &.@{radio-prefix-cls}-checked {
120
+ color: @radio-font-color;
121
+ }
122
+ }
123
+
124
+ &-text {
125
+ line-height: 1.5;
116
126
  }
117
127
  }
118
128
 
@@ -120,6 +130,8 @@
120
130
  .@{radio-square-prefix-cls} {
121
131
  .reset-component();
122
132
 
133
+ .ellipsis();
134
+
123
135
  // 默认状态
124
136
  position: relative;
125
137
  display: inline-block;
@@ -211,6 +223,14 @@
211
223
  background-color: @radio-color-disabled;
212
224
  animation: none;
213
225
  }
226
+
227
+ &.@{radio-square-prefix-cls}-checked {
228
+ color: @radio-font-color;
229
+ }
230
+ }
231
+
232
+ &-text {
233
+ line-height: 1.5;
214
234
  }
215
235
  }
216
236
 
@@ -324,4 +344,10 @@
324
344
  // background-color: @radio-color-background-disabled;
325
345
  cursor: not-allowed;
326
346
  }
347
+
348
+ &-text {
349
+ .ellipsis();
350
+ display: block;
351
+ line-height: 1.5;
352
+ }
327
353
  }
@@ -20,12 +20,12 @@
20
20
  @radio-border-width: var(~'@{radio-prefix}-radius-border-width',1px);
21
21
 
22
22
  // sizing
23
- @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
23
+ @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
24
24
  @radio-square-height: var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
25
25
 
26
26
  // spacing
27
27
  @radio-margin-right: var(~'@{radio-prefix}-spacing-margin-right',8px);
28
- @radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
29
- @radio-square-padding-horizontal: var(~'@{radio-prefix}-square-spacing-padding-horizontal',20px);//内间距 横向 /单选框 宽度
30
- @radio-padding-left: var(~'@{radio-prefix}-spacing-padding-left',6px);//图标与文字间距
28
+ @radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',6px); //内间距 纵向
29
+ @radio-square-padding-horizontal: var(~'@{radio-prefix}-square-spacing-padding-horizontal',12px);//内间距 横向 /单选框 宽度
30
+ @radio-padding-left: var(~'@{radio-prefix}-spacing-padding-left',4px);//图标与文字间距
31
31
 
@@ -121,13 +121,13 @@
121
121
  justify-content: flex-start;
122
122
  }
123
123
  .kd-rate-size-large {
124
- font-size: var(--kd-c-rate-font-size-large, var(--kd-g-font-size-large, 16px));
124
+ font-size: var(--kd-c-rate-font-size-large, 20px);
125
125
  }
126
126
  .kd-rate-size-middle {
127
- font-size: var(--kd-c-rate-font-size-middle, var(--kd-g-font-size-middle, 14px));
127
+ font-size: var(--kd-c-rate-font-size-middle, 16px);
128
128
  }
129
129
  .kd-rate-size-small {
130
- font-size: var(--kd-c-rate-font-size-small, var(--kd-g-font-size-small, 12px));
130
+ font-size: var(--kd-c-rate-font-size-small, 12px);
131
131
  }
132
132
  .kd-rate-item {
133
133
  display: -webkit-inline-box;
@@ -141,7 +141,7 @@
141
141
  -ms-flex-align: center;
142
142
  align-items: center;
143
143
  line-height: 100%;
144
- margin-right: var(--kd-c-rate-spacing-margin-right, 10px);
144
+ margin-right: var(--kd-c-rate-spacing-margin-right, 8px);
145
145
  }
146
146
  .kd-rate-item .kd-rate-icon-view {
147
147
  position: relative;
@@ -171,20 +171,20 @@
171
171
  left: 0;
172
172
  width: 50%;
173
173
  overflow: hidden;
174
- color: var(--kd-c-rate-color-text-not-selected, #d9d9d9);
174
+ color: var(--kd-c-rate-color-text-not-selected, #E5E5E5);
175
175
  opacity: 1;
176
176
  cursor: pointer;
177
177
  -webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
178
178
  transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
179
179
  }
180
180
  .kd-rate-item .kd-rate-icon-first:hover {
181
- color: var(--kd-c-rate-color-text-selected, #fdc200);
181
+ color: var(--kd-c-rate-color-text-selected, #FEC104);
182
182
  }
183
183
  .kd-rate-item .kd-rate-icon-second {
184
184
  display: -webkit-inline-box;
185
185
  display: -ms-inline-flexbox;
186
186
  display: inline-flex;
187
- color: var(--kd-c-rate-color-text-not-selected, #d9d9d9);
187
+ color: var(--kd-c-rate-color-text-not-selected, #E5E5E5);
188
188
  opacity: 1;
189
189
  cursor: pointer;
190
190
  -webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
@@ -196,10 +196,10 @@
196
196
  display: inline-flex;
197
197
  }
198
198
  .kd-rate-item .kd-rate-icon-second:hover {
199
- color: var(--kd-c-rate-color-text-selected, #fdc200);
199
+ color: var(--kd-c-rate-color-text-selected, #FEC104);
200
200
  }
201
201
  .kd-rate-item .kd-rate-icon-selected {
202
- color: var(--kd-c-rate-color-text-selected, #fdc200);
202
+ color: var(--kd-c-rate-color-text-selected, #FEC104);
203
203
  opacity: 1;
204
204
  }
205
205
  .kd-rate-item:last-child {
@@ -3,16 +3,16 @@
3
3
  @rate-prefix: '--@{kd-prefix}-c-rate';
4
4
 
5
5
  // color
6
- @rate-selected-color: var(~'@{rate-prefix}-color-text-selected', #fdc200);
7
- @rate-not-selected-color: var(~'@{rate-prefix}-color-text-not-selected', #d9d9d9);
6
+ @rate-selected-color: var(~'@{rate-prefix}-color-text-selected', #FEC104);
7
+ @rate-not-selected-color: var(~'@{rate-prefix}-color-text-not-selected', #E5E5E5);
8
8
 
9
9
  // font
10
- @rate-small-font-size: var(~'@{rate-prefix}-font-size-small', @font-size-small);
11
- @rate-middle-font-size: var(~'@{rate-prefix}-font-size-middle', @font-size-middle);
12
- @rate-large-font-size: var(~'@{rate-prefix}-font-size-large', @font-size-large);
10
+ @rate-small-font-size: var(~'@{rate-prefix}-font-size-small', 12px);
11
+ @rate-middle-font-size: var(~'@{rate-prefix}-font-size-middle', 16px);
12
+ @rate-large-font-size: var(~'@{rate-prefix}-font-size-large', 20px);
13
13
 
14
14
  // motion
15
15
  @rate-transition-duration: var(~'@{rate-prefix}-motion-duration', @duration-promptly);
16
16
 
17
17
  // spacing
18
- @rate-icon-margin: var(~'@{rate-prefix}-spacing-margin-right', 10px);
18
+ @rate-icon-margin: var(~'@{rate-prefix}-spacing-margin-right', 8px);
@@ -57,7 +57,7 @@ var InternalOption = function InternalOption(props, ref) {
57
57
 
58
58
  var titleText = _typeof(children) !== 'object' ? children : null;
59
59
  var checkStyle = {
60
- height: '30px',
60
+ height: '22px',
61
61
  background: 'none'
62
62
  };
63
63
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {