@rainbow-oh/yee-c 0.2.0 → 0.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 (242) hide show
  1. package/dist/cjs/Button/button.js +2 -2
  2. package/dist/cjs/Button/style/index.less +23 -8
  3. package/dist/cjs/Card/demo/collapsible.js +2 -1
  4. package/dist/cjs/Carousel/demo/arrows.js +1 -1
  5. package/dist/cjs/Carousel/demo/autoplay.js +1 -1
  6. package/dist/cjs/Carousel/demo/effect.js +1 -1
  7. package/dist/cjs/Carousel/demo/position.js +1 -1
  8. package/dist/cjs/Config-Provider/interface.d.ts +4 -0
  9. package/dist/cjs/Form/Field.js +32 -10
  10. package/dist/cjs/Form/demo/basic.js +56 -81
  11. package/dist/cjs/Form/demo/form-table.js +68 -67
  12. package/dist/cjs/Form/interface.d.ts +17 -1
  13. package/dist/cjs/Menu/style/index.less +4 -2
  14. package/dist/cjs/Radio/demo/button.js +1 -0
  15. package/dist/cjs/Radio/interface.d.ts +4 -0
  16. package/dist/cjs/Radio/radio-group.js +28 -14
  17. package/dist/cjs/Radio/radio.js +3 -1
  18. package/dist/cjs/Radio/style/index.less +19 -5
  19. package/dist/cjs/Segmented/demo/basic.d.ts +3 -0
  20. package/dist/cjs/Segmented/demo/basic.js +51 -0
  21. package/dist/cjs/Segmented/demo/block.d.ts +3 -0
  22. package/dist/cjs/Segmented/demo/block.js +49 -0
  23. package/dist/cjs/Segmented/demo/disabled.d.ts +3 -0
  24. package/dist/cjs/Segmented/demo/disabled.js +47 -0
  25. package/dist/cjs/Segmented/demo/size.d.ts +3 -0
  26. package/dist/cjs/Segmented/demo/size.js +37 -0
  27. package/dist/cjs/Segmented/demo/variant.d.ts +3 -0
  28. package/dist/cjs/Segmented/demo/variant.js +50 -0
  29. package/dist/cjs/Segmented/index.d.ts +3 -0
  30. package/dist/cjs/Segmented/index.js +36 -0
  31. package/dist/cjs/Segmented/interface.d.ts +87 -0
  32. package/dist/cjs/Segmented/interface.js +17 -0
  33. package/dist/cjs/Segmented/segmented.d.ts +5 -0
  34. package/dist/cjs/Segmented/segmented.js +180 -0
  35. package/dist/cjs/Segmented/style/index.less +128 -0
  36. package/dist/cjs/Spin/spin.js +2 -1
  37. package/dist/cjs/Steps/step.js +1 -1
  38. package/dist/cjs/Steps/style/index.less +8 -2
  39. package/dist/cjs/Switch/demo/content.js +22 -1
  40. package/dist/cjs/Switch/style/index.less +16 -0
  41. package/dist/cjs/Switch/switch.js +9 -2
  42. package/dist/cjs/Table/interface.d.ts +5 -1
  43. package/dist/cjs/Table/theader/cell.js +4 -5
  44. package/dist/cjs/Tag/demo/size.js +1 -1
  45. package/dist/cjs/Tag/demo/variant.d.ts +3 -0
  46. package/dist/cjs/Tag/demo/variant.js +39 -0
  47. package/dist/cjs/Tag/interface.d.ts +5 -0
  48. package/dist/cjs/Tag/style/index.less +109 -25
  49. package/dist/cjs/Tag/tag.js +3 -0
  50. package/dist/cjs/Tour/demo/basic.d.ts +3 -0
  51. package/dist/cjs/Tour/demo/basic.js +69 -0
  52. package/dist/cjs/Tour/demo/indicators.d.ts +3 -0
  53. package/dist/cjs/Tour/demo/indicators.js +76 -0
  54. package/dist/cjs/Tour/demo/placement.d.ts +3 -0
  55. package/dist/cjs/Tour/demo/placement.js +80 -0
  56. package/dist/cjs/Tour/demo/scroll.d.ts +3 -0
  57. package/dist/cjs/Tour/demo/scroll.js +72 -0
  58. package/dist/cjs/Tour/index.d.ts +3 -0
  59. package/dist/cjs/Tour/index.js +36 -0
  60. package/dist/cjs/Tour/interface.d.ts +118 -0
  61. package/dist/cjs/Tour/interface.js +17 -0
  62. package/dist/cjs/Tour/style/index.less +103 -0
  63. package/dist/cjs/Tour/tour.d.ts +5 -0
  64. package/dist/cjs/Tour/tour.js +403 -0
  65. package/dist/cjs/Tree/demo/checkable.js +6 -6
  66. package/dist/cjs/index.d.ts +4 -0
  67. package/dist/cjs/index.js +6 -0
  68. package/dist/cjs/locale/interface.d.ts +7 -0
  69. package/dist/cjs/locale/lang/en_US.js +6 -0
  70. package/dist/cjs/locale/lang/ja_JP.js +6 -0
  71. package/dist/cjs/locale/lang/zh_CN.js +6 -0
  72. package/dist/cjs/locale/lang/zh_TW.js +6 -0
  73. package/dist/cjs/style/color.blue.css +1 -1
  74. package/dist/cjs/style/color.crimson.css +1 -1
  75. package/dist/cjs/style/color.css +21 -4
  76. package/dist/cjs/style/size.css +38 -0
  77. package/dist/cjs/style/themes.css +3 -3
  78. package/dist/cjs/style/variables.css +60 -5
  79. package/dist/cjs/version.d.ts +1 -1
  80. package/dist/cjs/version.js +1 -1
  81. package/dist/esm/Button/button.js +2 -2
  82. package/dist/esm/Button/style/index.less +23 -8
  83. package/dist/esm/Card/demo/collapsible.js +2 -1
  84. package/dist/esm/Carousel/demo/arrows.js +1 -1
  85. package/dist/esm/Carousel/demo/autoplay.js +1 -1
  86. package/dist/esm/Carousel/demo/effect.js +1 -1
  87. package/dist/esm/Carousel/demo/position.js +1 -1
  88. package/dist/esm/Config-Provider/interface.d.ts +4 -0
  89. package/dist/esm/Form/Field.js +11 -4
  90. package/dist/esm/Form/demo/basic.js +2 -18
  91. package/dist/esm/Form/demo/form-table.js +4 -10
  92. package/dist/esm/Form/interface.d.ts +17 -1
  93. package/dist/esm/Menu/style/index.less +4 -2
  94. package/dist/esm/Radio/demo/button.js +1 -0
  95. package/dist/esm/Radio/interface.d.ts +4 -0
  96. package/dist/esm/Radio/radio-group.js +9 -2
  97. package/dist/esm/Radio/radio.js +3 -1
  98. package/dist/esm/Radio/style/index.less +19 -5
  99. package/dist/esm/Segmented/demo/basic.d.ts +3 -0
  100. package/dist/esm/Segmented/demo/basic.js +33 -0
  101. package/dist/esm/Segmented/demo/block.d.ts +3 -0
  102. package/dist/esm/Segmented/demo/block.js +29 -0
  103. package/dist/esm/Segmented/demo/disabled.d.ts +3 -0
  104. package/dist/esm/Segmented/demo/disabled.js +22 -0
  105. package/dist/esm/Segmented/demo/size.d.ts +3 -0
  106. package/dist/esm/Segmented/demo/size.js +15 -0
  107. package/dist/esm/Segmented/demo/variant.d.ts +3 -0
  108. package/dist/esm/Segmented/demo/variant.js +49 -0
  109. package/dist/esm/Segmented/index.d.ts +3 -0
  110. package/dist/esm/Segmented/index.js +2 -0
  111. package/dist/esm/Segmented/interface.d.ts +87 -0
  112. package/dist/esm/Segmented/interface.js +1 -0
  113. package/dist/esm/Segmented/segmented.d.ts +5 -0
  114. package/dist/esm/Segmented/segmented.js +112 -0
  115. package/dist/esm/Segmented/style/index.less +128 -0
  116. package/dist/esm/Spin/spin.js +2 -1
  117. package/dist/esm/Steps/step.js +4 -1
  118. package/dist/esm/Steps/style/index.less +8 -2
  119. package/dist/esm/Switch/demo/content.js +12 -3
  120. package/dist/esm/Switch/style/index.less +16 -0
  121. package/dist/esm/Switch/switch.js +7 -5
  122. package/dist/esm/Table/interface.d.ts +5 -1
  123. package/dist/esm/Table/theader/cell.js +2 -3
  124. package/dist/esm/Tag/demo/size.js +6 -2
  125. package/dist/esm/Tag/demo/variant.d.ts +3 -0
  126. package/dist/esm/Tag/demo/variant.js +48 -0
  127. package/dist/esm/Tag/interface.d.ts +5 -0
  128. package/dist/esm/Tag/style/index.less +109 -25
  129. package/dist/esm/Tag/tag.js +4 -2
  130. package/dist/esm/Tour/demo/basic.d.ts +3 -0
  131. package/dist/esm/Tour/demo/basic.js +69 -0
  132. package/dist/esm/Tour/demo/indicators.d.ts +3 -0
  133. package/dist/esm/Tour/demo/indicators.js +73 -0
  134. package/dist/esm/Tour/demo/placement.d.ts +3 -0
  135. package/dist/esm/Tour/demo/placement.js +53 -0
  136. package/dist/esm/Tour/demo/scroll.d.ts +3 -0
  137. package/dist/esm/Tour/demo/scroll.js +58 -0
  138. package/dist/esm/Tour/index.d.ts +3 -0
  139. package/dist/esm/Tour/index.js +2 -0
  140. package/dist/esm/Tour/interface.d.ts +118 -0
  141. package/dist/esm/Tour/interface.js +1 -0
  142. package/dist/esm/Tour/style/index.less +103 -0
  143. package/dist/esm/Tour/tour.d.ts +5 -0
  144. package/dist/esm/Tour/tour.js +383 -0
  145. package/dist/esm/Tree/demo/checkable.js +6 -6
  146. package/dist/esm/index.d.ts +4 -0
  147. package/dist/esm/index.js +4 -0
  148. package/dist/esm/locale/interface.d.ts +7 -0
  149. package/dist/esm/locale/lang/en_US.js +6 -0
  150. package/dist/esm/locale/lang/ja_JP.js +6 -0
  151. package/dist/esm/locale/lang/zh_CN.js +6 -0
  152. package/dist/esm/locale/lang/zh_TW.js +6 -0
  153. package/dist/esm/style/color.blue.css +1 -1
  154. package/dist/esm/style/color.crimson.css +1 -1
  155. package/dist/esm/style/color.css +21 -4
  156. package/dist/esm/style/size.css +38 -0
  157. package/dist/esm/style/themes.css +3 -3
  158. package/dist/esm/style/variables.css +60 -5
  159. package/dist/esm/version.d.ts +1 -1
  160. package/dist/esm/version.js +1 -1
  161. package/dist/umd/yee-c.min.css +4 -4
  162. package/dist/umd/yee-c.min.js +1 -1
  163. package/package.json +1 -1
  164. package/src/Button/button.tsx +2 -2
  165. package/src/Button/style/index.less +23 -8
  166. package/src/Card/demo/collapsible.tsx +1 -0
  167. package/src/Carousel/demo/arrows.tsx +1 -1
  168. package/src/Carousel/demo/autoplay.tsx +1 -1
  169. package/src/Carousel/demo/effect.tsx +1 -1
  170. package/src/Carousel/demo/position.tsx +1 -1
  171. package/src/Config-Provider/index.en-US.md +2 -0
  172. package/src/Config-Provider/index.zh-CN.md +2 -0
  173. package/src/Config-Provider/interface.ts +4 -0
  174. package/src/Form/Field.tsx +30 -11
  175. package/src/Form/demo/basic.tsx +2 -24
  176. package/src/Form/demo/form-table.tsx +16 -13
  177. package/src/Form/index.en-US.md +4 -0
  178. package/src/Form/index.zh-CN.md +4 -0
  179. package/src/Form/interface.ts +17 -1
  180. package/src/Menu/style/index.less +4 -2
  181. package/src/Radio/demo/button.tsx +1 -0
  182. package/src/Radio/index.en-US.md +2 -0
  183. package/src/Radio/index.zh-CN.md +2 -0
  184. package/src/Radio/interface.ts +4 -0
  185. package/src/Radio/radio-group.tsx +9 -1
  186. package/src/Radio/radio.tsx +2 -1
  187. package/src/Radio/style/index.less +19 -5
  188. package/src/Segmented/demo/basic.tsx +24 -0
  189. package/src/Segmented/demo/block.tsx +17 -0
  190. package/src/Segmented/demo/disabled.tsx +18 -0
  191. package/src/Segmented/demo/size.tsx +10 -0
  192. package/src/Segmented/demo/variant.tsx +28 -0
  193. package/src/Segmented/index.en-US.md +49 -0
  194. package/src/Segmented/index.ts +12 -0
  195. package/src/Segmented/index.zh-CN.md +49 -0
  196. package/src/Segmented/interface.ts +92 -0
  197. package/src/Segmented/segmented.tsx +136 -0
  198. package/src/Segmented/style/index.less +128 -0
  199. package/src/Spin/spin.tsx +1 -0
  200. package/src/Steps/step.tsx +1 -1
  201. package/src/Steps/style/index.less +8 -2
  202. package/src/Switch/demo/content.tsx +15 -5
  203. package/src/Switch/style/index.less +16 -0
  204. package/src/Switch/switch.tsx +14 -6
  205. package/src/Table/index.en-US.md +1 -0
  206. package/src/Table/index.zh-CN.md +1 -0
  207. package/src/Table/interface.ts +5 -1
  208. package/src/Table/theader/cell.tsx +2 -9
  209. package/src/Tag/demo/size.tsx +2 -2
  210. package/src/Tag/demo/variant.tsx +47 -0
  211. package/src/Tag/index.en-US.md +2 -0
  212. package/src/Tag/index.zh-CN.md +2 -0
  213. package/src/Tag/interface.ts +5 -0
  214. package/src/Tag/style/index.less +109 -25
  215. package/src/Tag/tag.tsx +2 -0
  216. package/src/Tour/demo/basic.tsx +52 -0
  217. package/src/Tour/demo/indicators.tsx +63 -0
  218. package/src/Tour/demo/placement.tsx +55 -0
  219. package/src/Tour/demo/scroll.tsx +49 -0
  220. package/src/Tour/index.en-US.md +61 -0
  221. package/src/Tour/index.ts +10 -0
  222. package/src/Tour/index.zh-CN.md +61 -0
  223. package/src/Tour/interface.ts +126 -0
  224. package/src/Tour/style/index.less +103 -0
  225. package/src/Tour/tour.tsx +399 -0
  226. package/src/Tree/demo/checkable.tsx +6 -6
  227. package/src/index.ts +6 -0
  228. package/src/locale/interface.ts +9 -0
  229. package/src/locale/lang/en_US.ts +7 -0
  230. package/src/locale/lang/ja_JP.ts +7 -0
  231. package/src/locale/lang/zh_CN.ts +7 -0
  232. package/src/locale/lang/zh_TW.ts +7 -0
  233. package/src/style/color.blue.css +1 -1
  234. package/src/style/color.crimson.css +1 -1
  235. package/src/style/color.css +21 -4
  236. package/src/style/size.css +38 -0
  237. package/src/version.ts +1 -1
  238. package/dist/cjs/utils/x.d.ts +0 -11
  239. package/dist/cjs/utils/x.js +0 -51
  240. package/dist/esm/utils/x.d.ts +0 -11
  241. package/dist/esm/utils/x.js +0 -49
  242. package/src/utils/x.ts +0 -33
@@ -54,7 +54,10 @@ var Step = function Step(props) {
54
54
  }
55
55
  return index < current ? /*#__PURE__*/React.createElement("span", {
56
56
  className: "".concat(prefixCls, "-item-serial ").concat(prefixCls, "-item-icon-check")
57
- }, /*#__PURE__*/React.createElement(Check, null)) : /*#__PURE__*/React.createElement("span", {
57
+ }, /*#__PURE__*/React.createElement(Check, {
58
+ size: 18,
59
+ strokeWidth: 3
60
+ })) : /*#__PURE__*/React.createElement("span", {
58
61
  className: "".concat(prefixCls, "-item-serial")
59
62
  }, index + 1);
60
63
  }, [icon, current, index, mergedStatus, dot, type, prefixCls]);
@@ -142,7 +142,7 @@
142
142
  background-color: var(--yee-steps-serial-done-bg-color, #fff);
143
143
  background-clip: padding-box;
144
144
  border-color: var(--yee-steps-serial-done-border-color, #1890ff);
145
- color: var(--yee-steps-serial-done-color, #1890ff);
145
+ color: var(--yee-steps-step-done-color);
146
146
  }
147
147
 
148
148
  @{pls}-item-title {
@@ -283,9 +283,15 @@
283
283
  margin-bottom: 8px;
284
284
  padding-left: 0;
285
285
 
286
+ &-title {
287
+ &::after {
288
+ display: none;
289
+ }
290
+ }
291
+
286
292
  &-content {
287
293
  align-items: flex-start;
288
- margin-left: 8px;
294
+ margin-left: 12px;
289
295
  }
290
296
 
291
297
  &-icon {
@@ -5,12 +5,21 @@ export default (function () {
5
5
  direction: "vertical"
6
6
  }, /*#__PURE__*/React.createElement(Switch, {
7
7
  checkedChildren: "ON",
8
- unCheckedChildren: "OFF"
8
+ unCheckedChildren: "OFF",
9
+ style: {
10
+ width: 60
11
+ }
9
12
  }), /*#__PURE__*/React.createElement(Switch, {
10
13
  checkedChildren: "On",
11
- unCheckedChildren: "Off"
14
+ unCheckedChildren: "OFF",
15
+ style: {
16
+ width: 60
17
+ }
12
18
  }), /*#__PURE__*/React.createElement(Switch, {
13
19
  checkedChildren: "\u2705",
14
- unCheckedChildren: "\u274C"
20
+ unCheckedChildren: "\u274C",
21
+ style: {
22
+ width: 48
23
+ }
15
24
  }));
16
25
  });
@@ -15,6 +15,10 @@
15
15
  cursor: pointer;
16
16
  transition: background 0.2s linear;
17
17
 
18
+ &-spin {
19
+ position: absolute;
20
+ }
21
+
18
22
  &-handle {
19
23
  position: absolute;
20
24
  top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
67
71
  var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
68
72
  );
69
73
  }
74
+
75
+ @{pls}-spin {
76
+ inset-inline-end: calc(
77
+ var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
78
+ );
79
+ }
70
80
  }
71
81
 
72
82
  &-unchecked {
@@ -77,6 +87,12 @@
77
87
  var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
78
88
  );
79
89
  }
90
+
91
+ @{pls}-spin {
92
+ padding-inline-start: calc(
93
+ var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
94
+ );
95
+ }
80
96
  }
81
97
 
82
98
  --m-switch-handle-size: var(--yee-switch-handle-size);
@@ -60,7 +60,7 @@ var Switch = function Switch(baseprops) {
60
60
  role: "switch",
61
61
  "aria-checked": mergedChecked,
62
62
  className: cls,
63
- disabled: disabled,
63
+ disabled: disabled || loading,
64
64
  onClick: onClick,
65
65
  style: style
66
66
  }), /*#__PURE__*/React.createElement(motion.span, {
@@ -71,11 +71,13 @@ var Switch = function Switch(baseprops) {
71
71
  visualDuration: 0.2,
72
72
  bounce: 0.2
73
73
  }
74
- }, loading ? /*#__PURE__*/React.createElement(Spin, {
75
- size: "small"
76
- }) : /*#__PURE__*/React.createElement("span", {
74
+ }, /*#__PURE__*/React.createElement("span", {
77
75
  className: clsx("".concat(prefixCls, "-handle-inner"))
78
- })), /*#__PURE__*/React.createElement("span", {
76
+ }, loading ? /*#__PURE__*/React.createElement(Spin, {
77
+ size: "small",
78
+ className: "".concat(prefixCls, "-spin"),
79
+ color: checked ? '#fff' : undefined
80
+ }) : null)), /*#__PURE__*/React.createElement("span", {
79
81
  className: clsx("".concat(prefixCls, "-inner"), classNames === null || classNames === void 0 ? void 0 : classNames.inner),
80
82
  style: styles === null || styles === void 0 ? void 0 : styles.inner
81
83
  }, mergedChecked ? /*#__PURE__*/React.createElement("span", {
@@ -240,7 +240,7 @@ export interface ColumnProps {
240
240
  /**
241
241
  * Custom render cell content
242
242
  */
243
- render?: (record: HeadCellProps | Record<string, unknown>, rowIndex: number) => React.ReactNode;
243
+ render?: (record: Record<string, unknown>, rowIndex: number) => React.ReactNode;
244
244
  }
245
245
  export interface WrapedColumnProps extends ColumnProps, ExpandableType, Omit<RowSelectionType, 'onCell'> {
246
246
  /**
@@ -420,6 +420,10 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
420
420
  * Locale text, including sort and empty data hints
421
421
  */
422
422
  locale?: Record<string, string>;
423
+ /**
424
+ * Content displayed when no data is available
425
+ * */
426
+ noData?: React.ReactNode;
423
427
  /**
424
428
  * Data
425
429
  */
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "onHeaderCell", "onSort", "onInternalFilter", "render"];
2
+ var _excluded = ["fixed", "isFixedLeftLast", "isFixedRightFirst", "align", "title", "dataIndex", "sorter", "filter", "sorters", "className", "styles", "classNames", "showSorterTooltip", "tableActionBarShowOnHover", "internalFilters", "style", "width", "onHeaderCell", "onSort", "onInternalFilter"];
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -37,7 +37,6 @@ var HeadCell = function HeadCell(props) {
37
37
  onHeaderCell = props.onHeaderCell,
38
38
  onSort = props.onSort,
39
39
  onInternalFilter = props.onInternalFilter,
40
- render = props.render,
41
40
  rest = _objectWithoutProperties(props, _excluded);
42
41
  var _useContext = useContext(TableCtx),
43
42
  prefixCls = _useContext.prefixCls;
@@ -111,7 +110,7 @@ var HeadCell = function HeadCell(props) {
111
110
  style: {
112
111
  justifyContent: align
113
112
  }
114
- }, render ? render(props, 0) : /*#__PURE__*/React.createElement(React.Fragment, null, renderTitle(), renderFilter()));
113
+ }, renderTitle(), renderFilter());
115
114
  };
116
115
  var cls = clsx("".concat(prefixCls, "-cell"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-cell-fixed-").concat(fixed), fixed), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-last"), isFixedLeftLast), "".concat(prefixCls, "-cell-fixed-").concat(fixed, "-first"), isFixedRightFirst), "".concat(prefixCls, "-cell-operate-hover"), tableActionBarShowOnHover), className);
117
116
  var getThProps = function getThProps() {
@@ -3,13 +3,17 @@ import React from 'react';
3
3
  export default (function () {
4
4
  return /*#__PURE__*/React.createElement(Space, {
5
5
  direction: "vertical"
6
- }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Tag, {
6
+ }, /*#__PURE__*/React.createElement(Space, {
7
+ block: true
8
+ }, /*#__PURE__*/React.createElement(Tag, {
7
9
  size: "small"
8
10
  }, "Small"), /*#__PURE__*/React.createElement(Tag, {
9
11
  size: "default"
10
12
  }, "Default"), /*#__PURE__*/React.createElement(Tag, {
11
13
  size: "large"
12
- }, "Large")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Tag, {
14
+ }, "Large")), /*#__PURE__*/React.createElement(Space, {
15
+ block: true
16
+ }, /*#__PURE__*/React.createElement(Tag, {
13
17
  size: "small",
14
18
  status: "success"
15
19
  }, "Small Success"), /*#__PURE__*/React.createElement(Tag, {
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,48 @@
1
+ import { Space, Tag } from "../..";
2
+ import React from 'react';
3
+ export default (function () {
4
+ return /*#__PURE__*/React.createElement(Space, {
5
+ direction: "vertical"
6
+ }, /*#__PURE__*/React.createElement(Space, {
7
+ block: true
8
+ }, /*#__PURE__*/React.createElement(Tag, {
9
+ variant: "filled"
10
+ }, "Filled"), /*#__PURE__*/React.createElement(Tag, {
11
+ variant: "solid"
12
+ }, "Solid"), /*#__PURE__*/React.createElement(Tag, {
13
+ variant: "outlined"
14
+ }, "Outlined")), /*#__PURE__*/React.createElement(Space, {
15
+ block: true
16
+ }, /*#__PURE__*/React.createElement(Tag, {
17
+ variant: "filled",
18
+ status: "success"
19
+ }, "Success"), /*#__PURE__*/React.createElement(Tag, {
20
+ variant: "solid",
21
+ status: "success"
22
+ }, "Success"), /*#__PURE__*/React.createElement(Tag, {
23
+ variant: "outlined",
24
+ status: "success"
25
+ }, "Success")), /*#__PURE__*/React.createElement(Space, {
26
+ block: true
27
+ }, /*#__PURE__*/React.createElement(Tag, {
28
+ variant: "filled",
29
+ status: "warning"
30
+ }, "Warning"), /*#__PURE__*/React.createElement(Tag, {
31
+ variant: "solid",
32
+ status: "warning"
33
+ }, "Warning"), /*#__PURE__*/React.createElement(Tag, {
34
+ variant: "outlined",
35
+ status: "warning"
36
+ }, "Warning")), /*#__PURE__*/React.createElement(Space, {
37
+ block: true
38
+ }, /*#__PURE__*/React.createElement(Tag, {
39
+ variant: "filled",
40
+ status: "error"
41
+ }, "Error"), /*#__PURE__*/React.createElement(Tag, {
42
+ variant: "solid",
43
+ status: "error"
44
+ }, "Error"), /*#__PURE__*/React.createElement(Tag, {
45
+ variant: "outlined",
46
+ status: "error"
47
+ }, "Error")));
48
+ });
@@ -51,6 +51,11 @@ export interface TagProps extends DataAttributeProps {
51
51
  * Whether checkable
52
52
  */
53
53
  checkable?: boolean;
54
+ /**
55
+ * tag variant
56
+ * @default filled
57
+ * */
58
+ variant?: 'filled' | 'solid' | 'outlined';
54
59
  /**
55
60
  * Set checked state
56
61
  */
@@ -5,47 +5,131 @@
5
5
  align-items: center;
6
6
  box-sizing: content-box;
7
7
  max-width: 100%;
8
+ white-space: nowrap;
8
9
  height: var(--yee-tag-height);
9
10
  padding: var(--yee-tag-padding);
10
- color: var(--yee-tag-color);
11
11
  font-size: var(--yee-tag-font-size);
12
12
  line-height: var(--yee-tag-line-height);
13
- background-color: var(--yee-tag-item-bg-color);
14
13
  background-clip: padding-box;
15
14
  border: var(--yee-tag-border-width) solid var(--yee-tag-border-color);
16
15
  border-radius: var(--yee-tag-border-radius);
17
16
 
18
- &-info {
19
- color: var(--yee-tag-info-color);
20
- background-color: var(--yee-tag-info-bg-color);
21
- border-color: var(--yee-tag-info-border-color);
22
- }
17
+ // ============ 变体 variant ============
18
+ // filled:浅色底 + 彩色字(默认)
19
+ &-filled {
20
+ color: var(--yee-tag-color);
21
+ background-color: var(--yee-tag-item-bg-color);
22
+ border-color: var(--yee-tag-border-color);
23
23
 
24
- &-success {
25
- color: var(--yee-tag-success-color);
26
- background-color: var(--yee-tag-success-bg-color);
27
- border-color: var(--yee-tag-success-border-color);
28
- }
24
+ &@{pls}-info {
25
+ color: var(--yee-tag-info-color);
26
+ background-color: var(--yee-tag-info-bg-color);
27
+ border-color: var(--yee-tag-info-border-color);
28
+ }
29
+
30
+ &@{pls}-success {
31
+ color: var(--yee-tag-success-color);
32
+ background-color: var(--yee-tag-success-bg-color);
33
+ border-color: var(--yee-tag-success-border-color);
34
+ }
35
+
36
+ &@{pls}-warning {
37
+ color: var(--yee-tag-warning-color);
38
+ background-color: var(--yee-tag-warning-bg-color);
39
+ border-color: var(--yee-tag-warning-border-color);
40
+ }
29
41
 
30
- &-warning {
31
- color: var(--yee-tag-warning-color);
32
- background-color: var(--yee-tag-warning-bg-color);
33
- border-color: var(--yee-tag-warning-border-color);
42
+ &@{pls}-error {
43
+ color: var(--yee-tag-error-color);
44
+ background-color: var(--yee-tag-error-bg-color);
45
+ border-color: var(--yee-tag-error-border-color);
46
+ }
47
+
48
+ &@{pls}-disabled {
49
+ color: var(--yee-tag-disabled-color);
50
+ background-color: var(--yee-tag-disabled-bg-color);
51
+ border-color: var(--yee-tag-disabled-border-color);
52
+ cursor: not-allowed;
53
+ }
34
54
  }
35
55
 
36
- &-error {
37
- color: var(--yee-tag-error-color);
38
- background-color: var(--yee-tag-error-bg-color);
39
- border-color: var(--yee-tag-error-border-color);
56
+ // solid:纯色底 + 白字
57
+ &-solid {
58
+ color: var(--yee-tag-solid-color, #fff);
59
+ background-color: var(--yee-tag-color);
60
+ border-color: transparent;
61
+
62
+ &@{pls}-info {
63
+ color: var(--yee-tag-solid-color, #fff);
64
+ background-color: var(--yee-tag-info-color);
65
+ border-color: transparent;
66
+ }
67
+
68
+ &@{pls}-success {
69
+ color: var(--yee-tag-solid-color, #fff);
70
+ background-color: var(--yee-tag-success-color);
71
+ border-color: transparent;
72
+ }
73
+
74
+ &@{pls}-warning {
75
+ color: var(--yee-tag-solid-color, #fff);
76
+ background-color: var(--yee-tag-warning-color);
77
+ border-color: transparent;
78
+ }
79
+
80
+ &@{pls}-error {
81
+ color: var(--yee-tag-solid-color, #fff);
82
+ background-color: var(--yee-tag-error-color);
83
+ border-color: transparent;
84
+ }
85
+
86
+ &@{pls}-disabled {
87
+ color: var(--yee-tag-solid-color, #fff);
88
+ background-color: var(--yee-tag-disabled-color);
89
+ border-color: transparent;
90
+ cursor: not-allowed;
91
+ }
40
92
  }
41
93
 
42
- &-disabled {
43
- color: var(--yee-tag-disabled-color);
44
- background-color: var(--yee-tag-disabled-bg-color);
45
- border-color: var(--yee-tag-disabled-border-color);
46
- cursor: not-allowed;
94
+ // outlined:透明底 + 彩色字 + 彩色描边
95
+ &-outlined {
96
+ color: var(--yee-tag-color);
97
+ background-color: transparent;
98
+ border-color: var(--yee-tag-border-color);
99
+
100
+ &@{pls}-info {
101
+ color: var(--yee-tag-info-color);
102
+ background-color: transparent;
103
+ border-color: var(--yee-tag-info-color);
104
+ }
105
+
106
+ &@{pls}-success {
107
+ color: var(--yee-tag-success-color);
108
+ background-color: transparent;
109
+ border-color: var(--yee-tag-success-color);
110
+ }
111
+
112
+ &@{pls}-warning {
113
+ color: var(--yee-tag-warning-color);
114
+ background-color: transparent;
115
+ border-color: var(--yee-tag-warning-color);
116
+ }
117
+
118
+ &@{pls}-error {
119
+ color: var(--yee-tag-error-color);
120
+ background-color: transparent;
121
+ border-color: var(--yee-tag-error-color);
122
+ }
123
+
124
+ &@{pls}-disabled {
125
+ color: var(--yee-tag-disabled-color);
126
+ background-color: transparent;
127
+ border-color: var(--yee-tag-disabled-color);
128
+ cursor: not-allowed;
129
+ }
47
130
  }
48
131
 
132
+ // ============ 其他修饰 ============
49
133
  &-dashed {
50
134
  background-color: var(--yee-tag-item-dashed-bg-color);
51
135
  border-style: dashed;
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["prefixCls", "closable", "status", "dashed", "children", "size", "checked", "checkable", "className", "icon", "classNames", "styles", "onClose", "onChange"];
2
+ var _excluded = ["prefixCls", "closable", "status", "dashed", "children", "size", "checked", "checkable", "className", "icon", "classNames", "styles", "variant", "onClose", "onChange"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
@@ -30,6 +30,8 @@ var Tag = /*#__PURE__*/forwardRef(function (baseprops, ref) {
30
30
  icon = props.icon,
31
31
  classNames = props.classNames,
32
32
  styles = props.styles,
33
+ _props$variant = props.variant,
34
+ variant = _props$variant === void 0 ? 'filled' : _props$variant,
33
35
  onClose = props.onClose,
34
36
  onChange = props.onChange,
35
37
  rest = _objectWithoutProperties(props, _excluded);
@@ -38,7 +40,7 @@ var Tag = /*#__PURE__*/forwardRef(function (baseprops, ref) {
38
40
  onChange === null || onChange === void 0 || onChange(!checked);
39
41
  }
40
42
  };
41
- var cls = clsx(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(status), status), "".concat(prefixCls, "-dashed"), dashed), "".concat(prefixCls, "-checked"), checked), "".concat(prefixCls, "-").concat(size), size), "".concat(prefixCls, "-checkable"), checkable), className);
43
+ var cls = clsx(prefixCls, ["".concat(prefixCls, "-").concat(variant)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(status), status), "".concat(prefixCls, "-dashed"), dashed), "".concat(prefixCls, "-checked"), checked), "".concat(prefixCls, "-").concat(size), size), "".concat(prefixCls, "-checkable"), checkable), className);
42
44
  var renderClose = function renderClose() {
43
45
  return closable ? /*#__PURE__*/React.createElement(Button, {
44
46
  className: clsx("".concat(prefixCls, "-close"), classNames === null || classNames === void 0 ? void 0 : classNames.close),
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,69 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Button, Space, Tour } from "../..";
8
+ import React, { useRef, useState } from 'react';
9
+ export default (function () {
10
+ var _useState = useState(false),
11
+ _useState2 = _slicedToArray(_useState, 2),
12
+ open = _useState2[0],
13
+ setOpen = _useState2[1];
14
+ var startRef = useRef(null);
15
+ var midRef = useRef(null);
16
+ var endRef = useRef(null);
17
+ return /*#__PURE__*/React.createElement(Space, {
18
+ direction: "vertical"
19
+ }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("div", {
20
+ ref: startRef,
21
+ style: {
22
+ display: 'inline-block'
23
+ }
24
+ }, /*#__PURE__*/React.createElement(Button, {
25
+ type: "primary",
26
+ onClick: function onClick() {
27
+ return setOpen(true);
28
+ }
29
+ }, "\u5F00\u59CB\u5F15\u5BFC")), /*#__PURE__*/React.createElement("div", {
30
+ ref: midRef,
31
+ style: {
32
+ display: 'inline-block'
33
+ }
34
+ }, /*#__PURE__*/React.createElement(Button, null, "\u5BFC\u51FA")), /*#__PURE__*/React.createElement("div", {
35
+ ref: endRef,
36
+ style: {
37
+ display: 'inline-block'
38
+ }
39
+ }, /*#__PURE__*/React.createElement(Button, null, "\u8BBE\u7F6E"))), /*#__PURE__*/React.createElement(Tour, {
40
+ open: open,
41
+ onClose: function onClose() {
42
+ return setOpen(false);
43
+ },
44
+ onFinish: function onFinish() {
45
+ return setOpen(false);
46
+ },
47
+ steps: [{
48
+ target: function target() {
49
+ return startRef.current;
50
+ },
51
+ title: '欢迎使用',
52
+ description: '点击此处开始你的操作流程。'
53
+ }, {
54
+ target: function target() {
55
+ return midRef.current;
56
+ },
57
+ title: '导出数据',
58
+ description: '在这里可以将数据导出为文件。',
59
+ placement: 'bottom'
60
+ }, {
61
+ target: function target() {
62
+ return endRef.current;
63
+ },
64
+ title: '系统设置',
65
+ description: '配置系统参数。点击「完成」结束引导。',
66
+ placement: 'left'
67
+ }]
68
+ }));
69
+ });
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,73 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Button, Space, Tour } from "../..";
8
+ import React, { useRef, useState } from 'react';
9
+ export default (function () {
10
+ var _useState = useState(false),
11
+ _useState2 = _slicedToArray(_useState, 2),
12
+ open = _useState2[0],
13
+ setOpen = _useState2[1];
14
+ var aRef = useRef(null);
15
+ var bRef = useRef(null);
16
+ return /*#__PURE__*/React.createElement(Space, {
17
+ direction: "vertical"
18
+ }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("div", {
19
+ ref: aRef,
20
+ style: {
21
+ display: 'inline-block'
22
+ }
23
+ }, /*#__PURE__*/React.createElement(Button, null, "\u5BFC\u5165")), /*#__PURE__*/React.createElement("div", {
24
+ ref: bRef,
25
+ style: {
26
+ display: 'inline-block'
27
+ }
28
+ }, /*#__PURE__*/React.createElement(Button, null, "\u7B5B\u9009")), /*#__PURE__*/React.createElement(Button, {
29
+ type: "primary",
30
+ onClick: function onClick() {
31
+ return setOpen(true);
32
+ }
33
+ }, "\u5F00\u59CB")), /*#__PURE__*/React.createElement(Tour, {
34
+ open: open,
35
+ onClose: function onClose() {
36
+ return setOpen(false);
37
+ },
38
+ onFinish: function onFinish() {
39
+ return setOpen(false);
40
+ },
41
+ indicatorsRender: function indicatorsRender(current, total) {
42
+ return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from({
43
+ length: total
44
+ }).map(function (_, i) {
45
+ return /*#__PURE__*/React.createElement("span", {
46
+ key: i,
47
+ style: {
48
+ display: 'inline-block',
49
+ width: 8,
50
+ height: 8,
51
+ marginInlineEnd: 4,
52
+ borderRadius: '50%',
53
+ background: i === current ? 'var(--yee-primary-color)' : 'var(--yee-border-color)',
54
+ transition: 'background 0.2s'
55
+ }
56
+ });
57
+ }));
58
+ },
59
+ steps: [{
60
+ target: function target() {
61
+ return aRef.current;
62
+ },
63
+ title: '导入',
64
+ description: '点击此处导入数据文件。'
65
+ }, {
66
+ target: function target() {
67
+ return bRef.current;
68
+ },
69
+ title: '筛选',
70
+ description: '在这里筛选你需要的数据。'
71
+ }]
72
+ }));
73
+ });
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const _default: () => React.JSX.Element;
3
+ export default _default;
@@ -0,0 +1,53 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { Button, Space, Tour } from "../..";
8
+ import React, { useRef, useState } from 'react';
9
+ var placements = ['top', 'right', 'bottom', 'left'];
10
+ export default (function () {
11
+ var _useState = useState(false),
12
+ _useState2 = _slicedToArray(_useState, 2),
13
+ open = _useState2[0],
14
+ setOpen = _useState2[1];
15
+ var _useState3 = useState('top'),
16
+ _useState4 = _slicedToArray(_useState3, 2),
17
+ p = _useState4[0],
18
+ setP = _useState4[1];
19
+ var targetRef = useRef(null);
20
+ return /*#__PURE__*/React.createElement(Space, {
21
+ direction: "vertical"
22
+ }, /*#__PURE__*/React.createElement(Space, null, placements.map(function (pl) {
23
+ return /*#__PURE__*/React.createElement(Button, {
24
+ key: pl,
25
+ type: p === pl ? 'primary' : 'default',
26
+ onClick: function onClick() {
27
+ setP(pl);
28
+ setOpen(true);
29
+ }
30
+ }, pl);
31
+ })), /*#__PURE__*/React.createElement("div", {
32
+ ref: targetRef,
33
+ style: {
34
+ display: 'inline-block',
35
+ padding: '16px 24px',
36
+ border: '1px dashed var(--yee-border-color)',
37
+ borderRadius: 6
38
+ }
39
+ }, "\u76EE\u6807\u5143\u7D20"), /*#__PURE__*/React.createElement(Tour, {
40
+ open: open,
41
+ placement: p,
42
+ onClose: function onClose() {
43
+ return setOpen(false);
44
+ },
45
+ steps: [{
46
+ target: function target() {
47
+ return targetRef.current;
48
+ },
49
+ title: "placement: ".concat(p),
50
+ description: '气泡卡片相对目标元素的位置;靠近视口边缘时会自动翻转。'
51
+ }]
52
+ }));
53
+ });