@king-design/intact 2.1.0 → 2.1.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 (134) hide show
  1. package/components/dropdown/dropdown.ts +35 -70
  2. package/components/dropdown/index.spec.ts +53 -4
  3. package/components/dropdown/item.ts +15 -5
  4. package/components/dropdown/menu.ts +3 -3
  5. package/components/dropdown/usePosition.ts +3 -0
  6. package/components/form/index.spec.ts +22 -1
  7. package/components/menu/demos/collapse.md +1 -1
  8. package/components/menu/index.spec.ts +9 -1
  9. package/components/menu/item.ts +7 -0
  10. package/components/pagination/index.spec.ts +23 -0
  11. package/components/pagination/index.ts +3 -1
  12. package/components/tooltip/content.ts +15 -1
  13. package/components/tooltip/content.vdt +6 -1
  14. package/components/tooltip/index.spec.ts +87 -1
  15. package/components/tooltip/styles.ts +1 -1
  16. package/components/tooltip/tooltip.ts +11 -0
  17. package/components/virtual.ts +98 -0
  18. package/es/components/dropdown/dropdown.d.ts +6 -5
  19. package/es/components/dropdown/dropdown.js +42 -69
  20. package/es/components/dropdown/index.spec.js +96 -17
  21. package/es/components/dropdown/item.d.ts +1 -1
  22. package/es/components/dropdown/item.js +16 -4
  23. package/es/components/dropdown/usePosition.js +4 -2
  24. package/es/components/form/index.spec.js +49 -2
  25. package/es/components/menu/index.spec.js +26 -15
  26. package/es/components/menu/item.d.ts +2 -0
  27. package/es/components/menu/item.js +5 -0
  28. package/es/components/pagination/index.js +4 -1
  29. package/es/components/pagination/index.spec.js +49 -0
  30. package/es/components/tooltip/content.d.ts +1 -0
  31. package/es/components/tooltip/content.js +18 -1
  32. package/es/components/tooltip/content.vdt.js +3 -1
  33. package/es/components/tooltip/index.spec.js +165 -0
  34. package/es/components/tooltip/styles.d.ts +22 -0
  35. package/es/components/tooltip/styles.js +1 -1
  36. package/es/components/tooltip/tooltip.d.ts +1 -0
  37. package/es/components/tooltip/tooltip.js +16 -1
  38. package/es/components/virtual.d.ts +8 -0
  39. package/es/components/virtual.js +126 -0
  40. package/es/index.d.ts +2 -2
  41. package/es/index.js +2 -2
  42. package/es/site/data/components/copy/demos/basic/index.d.ts +5 -0
  43. package/es/site/data/components/copy/demos/basic/index.js +17 -0
  44. package/es/site/data/components/copy/demos/basic/react.d.ts +4 -0
  45. package/es/site/data/components/copy/demos/basic/react.js +23 -0
  46. package/es/site/data/components/copy/demos/children/index.d.ts +6 -0
  47. package/es/site/data/components/copy/demos/children/index.js +18 -0
  48. package/es/site/data/components/copy/demos/children/react.d.ts +5 -0
  49. package/es/site/data/components/copy/demos/children/react.js +44 -0
  50. package/es/site/data/components/copy/index.d.ts +57 -0
  51. package/es/site/data/components/copy/index.js +42 -0
  52. package/es/site/data/components/dialog/demos/basic/react.js +1 -4
  53. package/es/site/data/components/icon/demos/disabled/index.d.ts +6 -0
  54. package/es/site/data/components/icon/demos/disabled/index.js +18 -0
  55. package/es/site/data/components/icon/demos/disabled/react.d.ts +5 -0
  56. package/es/site/data/components/icon/demos/disabled/react.js +33 -0
  57. package/es/site/data/components/input/demos/flat/index.d.ts +5 -0
  58. package/es/site/data/components/input/demos/flat/index.js +17 -0
  59. package/es/site/data/components/input/demos/flat/react.d.ts +4 -0
  60. package/es/site/data/components/input/demos/flat/react.js +29 -0
  61. package/es/site/data/components/input/demos/showCount/index.d.ts +5 -0
  62. package/es/site/data/components/input/demos/showCount/index.js +17 -0
  63. package/es/site/data/components/input/demos/showCount/react.d.ts +4 -0
  64. package/es/site/data/components/input/demos/showCount/react.js +33 -0
  65. package/es/site/data/components/menu/demos/collapse/index.js +1 -1
  66. package/es/site/data/components/menu/demos/collapse/react.js +1 -1
  67. package/es/site/data/components/pagination/demos/flat/index.d.ts +6 -0
  68. package/es/site/data/components/pagination/demos/flat/index.js +18 -0
  69. package/es/site/data/components/pagination/demos/flat/react.d.ts +5 -0
  70. package/es/site/data/components/pagination/demos/flat/react.js +41 -0
  71. package/es/site/data/components/popover/demos/basic/index.d.ts +7 -0
  72. package/es/site/data/components/popover/demos/basic/index.js +28 -0
  73. package/es/site/data/components/popover/demos/basic/react.d.ts +8 -0
  74. package/es/site/data/components/popover/demos/basic/react.js +59 -0
  75. package/es/site/data/components/popover/demos/button/index.d.ts +8 -0
  76. package/es/site/data/components/popover/demos/button/index.js +42 -0
  77. package/es/site/data/components/popover/demos/button/react.d.ts +8 -0
  78. package/es/site/data/components/popover/demos/button/react.js +73 -0
  79. package/es/site/data/components/popover/demos/content/index.d.ts +7 -0
  80. package/es/site/data/components/popover/demos/content/index.js +28 -0
  81. package/es/site/data/components/popover/demos/content/react.d.ts +6 -0
  82. package/es/site/data/components/popover/demos/content/react.js +43 -0
  83. package/es/site/data/components/popover/demos/text/index.d.ts +7 -0
  84. package/es/site/data/components/popover/demos/text/index.js +28 -0
  85. package/es/site/data/components/popover/demos/text/react.d.ts +6 -0
  86. package/es/site/data/components/popover/demos/text/react.js +36 -0
  87. package/es/site/data/components/popover/demos/type/index.d.ts +11 -0
  88. package/es/site/data/components/popover/demos/type/index.js +34 -0
  89. package/es/site/data/components/popover/demos/type/react.d.ts +11 -0
  90. package/es/site/data/components/popover/demos/type/react.js +58 -0
  91. package/es/site/data/components/popover/index.d.ts +57 -0
  92. package/es/site/data/components/popover/index.js +42 -0
  93. package/es/site/data/components/progress/demos/circleSize/index.d.ts +14 -0
  94. package/es/site/data/components/progress/demos/circleSize/index.js +43 -0
  95. package/es/site/data/components/progress/demos/circleSize/react.d.ts +14 -0
  96. package/es/site/data/components/progress/demos/circleSize/react.js +98 -0
  97. package/es/site/data/components/select/demos/draggable/index.d.ts +10 -0
  98. package/es/site/data/components/select/demos/draggable/index.js +24 -0
  99. package/es/site/data/components/select/demos/draggable/react.d.ts +10 -0
  100. package/es/site/data/components/select/demos/draggable/react.js +85 -0
  101. package/es/site/data/components/select/demos/flat/index.d.ts +5 -0
  102. package/es/site/data/components/select/demos/flat/index.js +17 -0
  103. package/es/site/data/components/select/demos/flat/react.d.ts +4 -0
  104. package/es/site/data/components/select/demos/flat/react.js +73 -0
  105. package/es/site/data/components/select/demos/inline/index.d.ts +5 -0
  106. package/es/site/data/components/select/demos/inline/index.js +17 -0
  107. package/es/site/data/components/select/demos/inline/react.d.ts +4 -0
  108. package/es/site/data/components/select/demos/inline/react.js +27 -0
  109. package/es/site/data/components/select/demos/nowrap/index.d.ts +5 -0
  110. package/es/site/data/components/select/demos/nowrap/index.js +17 -0
  111. package/es/site/data/components/select/demos/nowrap/react.d.ts +4 -0
  112. package/es/site/data/components/select/demos/nowrap/react.js +41 -0
  113. package/es/site/data/components/steps/demos/vertical/index.d.ts +14 -0
  114. package/es/site/data/components/steps/demos/vertical/index.js +40 -0
  115. package/es/site/data/components/steps/demos/vertical/react.d.ts +14 -0
  116. package/es/site/data/components/steps/demos/vertical/react.js +124 -0
  117. package/es/site/data/components/switch/demos/disabled/index.d.ts +6 -0
  118. package/es/site/data/components/switch/demos/disabled/index.js +18 -0
  119. package/es/site/data/components/switch/demos/disabled/react.d.ts +5 -0
  120. package/es/site/data/components/switch/demos/disabled/react.js +27 -0
  121. package/es/site/data/components/tabs/demos/scroll/index.d.ts +18 -0
  122. package/es/site/data/components/tabs/demos/scroll/index.js +87 -0
  123. package/es/site/data/components/tabs/demos/scroll/react.d.ts +18 -0
  124. package/es/site/data/components/tabs/demos/scroll/react.js +166 -0
  125. package/es/site/data/components/tag/demos/draggable/index.d.ts +11 -0
  126. package/es/site/data/components/tag/demos/draggable/index.js +24 -0
  127. package/es/site/data/components/tag/demos/draggable/react.d.ts +11 -0
  128. package/es/site/data/components/tag/demos/draggable/react.js +62 -0
  129. package/es/site/data/components/tag/demos/tags/index.d.ts +12 -0
  130. package/es/site/data/components/tag/demos/tags/index.js +39 -0
  131. package/es/site/data/components/tag/demos/tags/react.d.ts +12 -0
  132. package/es/site/data/components/tag/demos/tags/react.js +83 -0
  133. package/index.ts +2 -2
  134. package/package.json +4 -3
@@ -21,6 +21,6 @@ export declare class DropdownItem extends Component<DropdownItemProps, DropdownI
21
21
  private dropdownMenu;
22
22
  init(): void;
23
23
  select(): void;
24
- hasSubMenu(): Dropdown<any, any, any> | undefined;
24
+ hasSubMenu(): undefined;
25
25
  private onClick;
26
26
  }
@@ -5,8 +5,9 @@ import { Component, inject } from 'intact';
5
5
  import template from './item.vdt';
6
6
  import { bind } from '../utils';
7
7
  import { useItemKeyboard } from './useKeyboard';
8
- import { Dropdown, DROPDOWN } from './dropdown';
8
+ import { DROPDOWN } from './dropdown';
9
9
  import { DROPDOWN_MENU } from './menu';
10
+ import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
10
11
  var typeDefs = {
11
12
  disabled: Boolean,
12
13
  hideOnSelect: Boolean,
@@ -64,11 +65,22 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
64
65
  };
65
66
 
66
67
  _proto.hasSubMenu = function hasSubMenu() {
67
- // TODO: wrapped by Tooltip
68
+ // wrapped by Dropdown rather than DropdownMenu
68
69
  var parent = this.$senior;
69
70
 
70
- if (parent instanceof Dropdown) {
71
- return parent;
71
+ while (parent) {
72
+ // Tooltip extends Dropdown, it's also a instance of Dropdown
73
+ // so use constructor to detect
74
+ // if (parent instanceof DropdownMenu) {
75
+ if (parent.constructor === ExportDropdownMenu) {
76
+ return;
77
+ }
78
+
79
+ if (parent.constructor === ExportDropdown) {
80
+ return parent;
81
+ }
82
+
83
+ parent = parent.$senior;
72
84
  }
73
85
  };
74
86
 
@@ -17,7 +17,8 @@ export function usePosition() {
17
17
  ['of', 'position'].forEach(function (item) {
18
18
  instance.watch(item, function (newValue, oldValue) {
19
19
  // return if object is the same
20
- if (isObject(newValue) && isObject(oldValue) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
20
+ if (isObject(newValue) && isObject(oldValue) && // is not event object
21
+ !(newValue instanceof Event) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
21
22
  return;
22
23
  }
23
24
 
@@ -67,7 +68,8 @@ export function usePosition() {
67
68
 
68
69
  position(findDomFromVNode(instance.menuVNode, true), _extends({
69
70
  my: 'left top+8',
70
- at: 'left bottom'
71
+ at: 'left bottom',
72
+ collision: instance.get('collison')
71
73
  }, pos, {
72
74
  of: ofElement,
73
75
  using: function using(_feedback) {
@@ -8,10 +8,11 @@ import BasicDemo, { data as basicDemoData } from '~/components/form/demos/basic'
8
8
  import CustomDemo from '~/components/form/demos/custom';
9
9
  import VariableDemo from '~/components/form/demos/variable';
10
10
  import RemoteDemo from '~/components/form/demos/remote';
11
- import { mount, dispatchEvent, wait } from '../../test/utils';
11
+ import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
12
12
  import { Component } from 'intact';
13
13
  import { Form, FormItem } from './';
14
14
  import { Input } from '../input';
15
+ import { Select } from '../select';
15
16
 
16
17
  RemoteDemo.prototype.validateUserName = function (value) {
17
18
  // mock api
@@ -29,7 +30,9 @@ RemoteDemo.prototype.validateUserName = function (value) {
29
30
  };
30
31
 
31
32
  describe('Form', function () {
32
- // afterEach(() => unmount());
33
+ afterEach(function () {
34
+ return unmount();
35
+ });
33
36
  it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
34
37
  var _mount, instance, element, form, item, input;
35
38
 
@@ -1315,4 +1318,48 @@ describe('Form', function () {
1315
1318
  }
1316
1319
  }, _callee7);
1317
1320
  })));
1321
+ it('should not validate when select is disabled on init', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
1322
+ var Demo, _mount8, instance, element;
1323
+
1324
+ return _regeneratorRuntime.wrap(function _callee8$(_context11) {
1325
+ while (1) {
1326
+ switch (_context11.prev = _context11.next) {
1327
+ case 0:
1328
+ Demo = /*#__PURE__*/function (_Component3) {
1329
+ _inheritsLoose(Demo, _Component3);
1330
+
1331
+ function Demo() {
1332
+ var _context10;
1333
+
1334
+ var _this3;
1335
+
1336
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
1337
+ args[_key3] = arguments[_key3];
1338
+ }
1339
+
1340
+ _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
1341
+ _this3.Form = Form;
1342
+ _this3.FormItem = FormItem;
1343
+ _this3.Select = Select;
1344
+ return _this3;
1345
+ }
1346
+
1347
+ return Demo;
1348
+ }(Component);
1349
+
1350
+ Demo.template = "\n const {Form, FormItem, Select} = this;\n <Form ref=\"form\">\n <FormItem rules={{required: true}}>\n <Select disabled />\n </FormItem>\n </Form>\n ";
1351
+ _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
1352
+ _context11.next = 5;
1353
+ return wait(500);
1354
+
1355
+ case 5:
1356
+ expect(element.querySelector('.k-form-error')).to.be.null;
1357
+
1358
+ case 6:
1359
+ case "end":
1360
+ return _context11.stop();
1361
+ }
1362
+ }
1363
+ }, _callee8);
1364
+ })));
1318
1365
  });
@@ -4,6 +4,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
4
4
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
5
5
  import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
6
6
  import { Component } from 'intact';
7
+ import BasicDemo from '~/components/menu/demos/basic';
7
8
  import CollapseDemo from '~/components/menu/demos/collapse';
8
9
  import AccordionDemo from '~/components/menu/demos/accordion';
9
10
  import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
@@ -19,24 +20,29 @@ describe('Menu', function () {
19
20
  while (1) {
20
21
  switch (_context.prev = _context.next) {
21
22
  case 0:
22
- _mount = mount(CollapseDemo), instance = _mount[0], element = _mount[1];
23
+ _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
24
+ _context.next = 3;
25
+ return wait();
26
+
27
+ case 3:
28
+ // shrink
23
29
  title = element.querySelector('.k-expanded .k-menu-title');
24
30
  title.click();
25
- _context.next = 5;
31
+ _context.next = 7;
26
32
  return wait(500);
27
33
 
28
- case 5:
34
+ case 7:
29
35
  expect(element.outerHTML).to.matchSnapshot();
30
36
  expect(instance.get('expandedKeys')).to.eql([]);
31
37
  title.click();
32
- _context.next = 10;
38
+ _context.next = 12;
33
39
  return wait(500);
34
40
 
35
- case 10:
41
+ case 12:
36
42
  expect(element.outerHTML).to.matchSnapshot();
37
43
  expect(instance.get('expandedKeys')).to.eql(['3']);
38
44
 
39
- case 12:
45
+ case 14:
40
46
  case "end":
41
47
  return _context.stop();
42
48
  }
@@ -51,39 +57,44 @@ describe('Menu', function () {
51
57
  switch (_context2.prev = _context2.next) {
52
58
  case 0:
53
59
  _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
60
+ instance.set('collapse', false);
61
+ _context2.next = 4;
62
+ return wait();
63
+
64
+ case 4:
54
65
  expect(element.innerHTML).to.matchSnapshot();
55
66
  _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
56
67
  title.click();
57
- _context2.next = 6;
68
+ _context2.next = 9;
58
69
  return wait();
59
70
 
60
- case 6:
71
+ case 9:
61
72
  expect(element.outerHTML).to.matchSnapshot();
62
73
  expect(instance.get('selectedKey')).to.eql('1');
63
74
  disabledTitle.click();
64
- _context2.next = 11;
75
+ _context2.next = 14;
65
76
  return wait();
66
77
 
67
- case 11:
78
+ case 14:
68
79
  expect(element.outerHTML).to.matchSnapshot();
69
80
  expect(instance.get('selectedKey')).to.eql('1');
70
81
  subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
71
82
  subTitle.click();
72
- _context2.next = 17;
83
+ _context2.next = 20;
73
84
  return wait();
74
85
 
75
- case 17:
86
+ case 20:
76
87
  expect(element.outerHTML).to.matchSnapshot();
77
88
  expect(instance.get('selectedKey')).to.eql('3-1'); // clear
78
89
 
79
90
  instance.set('selectedKey', '');
80
- _context2.next = 22;
91
+ _context2.next = 25;
81
92
  return wait();
82
93
 
83
- case 22:
94
+ case 25:
84
95
  expect(element.querySelector('.k-highlighted')).to.be.null;
85
96
 
86
- case 23:
97
+ case 26:
87
98
  case "end":
88
99
  return _context2.stop();
89
100
  }
@@ -1,5 +1,6 @@
1
1
  import { Component, TypeDefs, Key } from 'intact';
2
2
  import { Menu } from './menu';
3
+ import { Events } from '../types';
3
4
  export interface MenuItemProps {
4
5
  key: Key;
5
6
  to?: string | object;
@@ -14,6 +15,7 @@ export declare const MENU_ITEM = "MenuItem";
14
15
  export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
15
16
  static template: string | import("intact").Template<any>;
16
17
  static typeDefs: Required<TypeDefs<MenuItemProps>>;
18
+ static events: Events<MenuItemEvents>;
17
19
  rootMenu: Menu<Key>;
18
20
  parentMenu: Menu<Key>;
19
21
  parentMenuItem: MenuItem | null;
@@ -19,6 +19,10 @@ var typeDefs = {
19
19
  dot: Boolean,
20
20
  disabled: Boolean
21
21
  };
22
+ var events = {
23
+ click: true,
24
+ select: true
25
+ };
22
26
  export var MENU_ITEM = 'MenuItem';
23
27
  export var MenuItem = /*#__PURE__*/function (_Component) {
24
28
  _inheritsLoose(MenuItem, _Component);
@@ -76,5 +80,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
76
80
  }(Component);
77
81
  MenuItem.template = template;
78
82
  MenuItem.typeDefs = typeDefs;
83
+ MenuItem.events = events;
79
84
 
80
85
  __decorate([bind], MenuItem.prototype, "onClick", null);
@@ -105,7 +105,10 @@ export var Pagination = /*#__PURE__*/function (_Component) {
105
105
 
106
106
  if (page > totalPages) {
107
107
  page = totalPages;
108
- } else if (page < 1) {
108
+ } // perhaps totalPages is 0
109
+
110
+
111
+ if (page < 1) {
109
112
  page = 1;
110
113
  }
111
114
 
@@ -1,10 +1,14 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
1
2
  import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
3
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
2
4
  import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
3
5
  import BasicDemo from '~/components/pagination/demos/basic';
4
6
  import GotoDemo from '~/components/pagination/demos/goto';
5
7
  import CurrentDemo from '~/components/pagination/demos/current';
6
8
  import DisableDemo from '~/components/pagination/demos/disable';
7
9
  import { mount, dispatchEvent, wait } from '../../test/utils';
10
+ import { Component } from 'intact';
11
+ import { Pagination } from '.';
8
12
  describe('Pagination', function () {
9
13
  // afterEach(() => unmount());
10
14
  it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -167,4 +171,49 @@ describe('Pagination', function () {
167
171
  }
168
172
  }, _callee4);
169
173
  })));
174
+ it('should not set value to 0 when total is 0 on intialization', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
175
+ var Demo, _mount5, instance;
176
+
177
+ return _regeneratorRuntime.wrap(function _callee5$(_context6) {
178
+ while (1) {
179
+ switch (_context6.prev = _context6.next) {
180
+ case 0:
181
+ Demo = /*#__PURE__*/function (_Component) {
182
+ _inheritsLoose(Demo, _Component);
183
+
184
+ function Demo() {
185
+ var _context5;
186
+
187
+ var _this;
188
+
189
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
190
+ args[_key] = arguments[_key];
191
+ }
192
+
193
+ _this = _Component.call.apply(_Component, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
194
+ _this.Pagination = Pagination;
195
+ return _this;
196
+ }
197
+
198
+ Demo.defaults = function defaults() {
199
+ return {
200
+ page: 1
201
+ };
202
+ };
203
+
204
+ return Demo;
205
+ }(Component);
206
+
207
+ Demo.template = "\n const { Pagination } = this;\n <Pagination total={0} v-model=\"page\" />\n ";
208
+ _mount5 = mount(Demo), instance = _mount5[0]; // await wait();
209
+
210
+ expect(instance.get('page')).to.eql(1);
211
+
212
+ case 4:
213
+ case "end":
214
+ return _context6.stop();
215
+ }
216
+ }
217
+ }, _callee5);
218
+ })));
170
219
  });
@@ -12,6 +12,7 @@ export declare class TooltipContent extends DropdownMenu<TooltipContentProps, To
12
12
  private arrow;
13
13
  init(): void;
14
14
  private onEnter;
15
+ private onAfterLeave;
15
16
  protected onMouseEnter(e: MouseEvent): void;
16
17
  private ok;
17
18
  private cancel;
@@ -5,6 +5,7 @@ import { DropdownMenu } from '../dropdown/menu';
5
5
  import template from './content.vdt';
6
6
  import { bind } from '../utils';
7
7
  import { useArrow } from './useArrow';
8
+ import { tooltip as tooltipTheme } from './styles';
8
9
  export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
9
10
  _inheritsLoose(TooltipContent, _DropdownMenu);
10
11
 
@@ -35,10 +36,24 @@ export var TooltipContent = /*#__PURE__*/function (_DropdownMenu) {
35
36
  });
36
37
  };
37
38
 
38
- _proto.onEnter = function onEnter() {
39
+ _proto.onEnter = function onEnter(elem) {
40
+ // fix the width, https://github.com/ksc-fe/kpc/issues/873
41
+ var maxWidth = parseInt(tooltipTheme.maxWidth);
42
+ var width = elem.offsetWidth;
43
+
44
+ if (width === maxWidth) {
45
+ elem.style.width = width + "px";
46
+ }
47
+
39
48
  this.dropdown.position();
40
49
  };
41
50
 
51
+ _proto.onAfterLeave = function onAfterLeave(elem) {
52
+ // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
53
+ var style = elem.style;
54
+ style.left = style.top = style.width = '';
55
+ };
56
+
42
57
  _proto.onMouseEnter = function onMouseEnter(e) {
43
58
  var dropdown = this.dropdown;
44
59
 
@@ -67,6 +82,8 @@ TooltipContent.template = template;
67
82
 
68
83
  __decorate([bind], TooltipContent.prototype, "onEnter", null);
69
84
 
85
+ __decorate([bind], TooltipContent.prototype, "onAfterLeave", null);
86
+
70
87
  __decorate([bind], TooltipContent.prototype, "onMouseEnter", null);
71
88
 
72
89
  __decorate([bind], TooltipContent.prototype, "ok", null);
@@ -38,7 +38,9 @@ export default function ($props, $blocks, $__proto__) {
38
38
  'value': !!value && !this.isEmptyChildren,
39
39
  'transition': {
40
40
  name: 'k-fade',
41
- onEnter: this.onEnter
41
+ onEnter: this.onEnter,
42
+ onAfterLeave: this.onAfterLeave,
43
+ onLeaveCancelled: this.onAfterLeave
42
44
  },
43
45
  'className': _$cn(classNameObj)
44
46
  }, function ($blocks) {
@@ -12,7 +12,10 @@ import ContentDemo from '~/components/tooltip/demos/content';
12
12
  import ConfirmDemo from '~/components/tooltip/demos/confirm';
13
13
  import AlwaysDemo from '~/components/tooltip/demos/always';
14
14
  import { Tooltip } from './';
15
+ import { Dialog } from '../dialog';
15
16
  import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
17
+ import { tooltip as tooltipTheme } from './styles';
18
+ import { Select, Option } from '../select';
16
19
  describe('Tooltip', function () {
17
20
  afterEach(function (done) {
18
21
  unmount();
@@ -577,4 +580,166 @@ describe('Tooltip', function () {
577
580
  }
578
581
  }, _callee9);
579
582
  })));
583
+ it('should add className', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
584
+ var Demo, _mount10, instance, element, trigger, dropdown;
585
+
586
+ return _regeneratorRuntime.wrap(function _callee10$(_context13) {
587
+ while (1) {
588
+ switch (_context13.prev = _context13.next) {
589
+ case 0:
590
+ Demo = /*#__PURE__*/function (_Component3) {
591
+ _inheritsLoose(Demo, _Component3);
592
+
593
+ function Demo() {
594
+ var _context12;
595
+
596
+ var _this3;
597
+
598
+ for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
599
+ args[_key3] = arguments[_key3];
600
+ }
601
+
602
+ _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
603
+ _this3.Tooltip = Tooltip;
604
+ return _this3;
605
+ }
606
+
607
+ return Demo;
608
+ }(Component);
609
+
610
+ Demo.template = "\n const Tooltip = this.Tooltip;\n <div>\n <Tooltip content=\"hello\" class=\"a\">\n <div ref=\"test\" class=\"b\">test</div>\n </Tooltip>\n </div>\n ";
611
+ _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
612
+ trigger = instance.refs.test;
613
+ expect(trigger.className).to.eql('b a');
614
+ dispatchEvent(trigger, 'mouseenter');
615
+ _context13.next = 8;
616
+ return wait();
617
+
618
+ case 8:
619
+ dropdown = getElement('.k-tooltip-content');
620
+ expect(dropdown.classList.contains('a')).to.be.true;
621
+
622
+ case 10:
623
+ case "end":
624
+ return _context13.stop();
625
+ }
626
+ }
627
+ }, _callee10);
628
+ })));
629
+ it('should fix the width in small container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
630
+ var Demo, _mount11, instance, element, trigger, expecedWidth, content, width, newWidth;
631
+
632
+ return _regeneratorRuntime.wrap(function _callee11$(_context15) {
633
+ while (1) {
634
+ switch (_context15.prev = _context15.next) {
635
+ case 0:
636
+ Demo = /*#__PURE__*/function (_Component4) {
637
+ _inheritsLoose(Demo, _Component4);
638
+
639
+ function Demo() {
640
+ var _context14;
641
+
642
+ var _this4;
643
+
644
+ for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
645
+ args[_key4] = arguments[_key4];
646
+ }
647
+
648
+ _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
649
+ _this4.Tooltip = Tooltip;
650
+ _this4.Dialog = Dialog;
651
+ return _this4;
652
+ }
653
+
654
+ return Demo;
655
+ }(Component);
656
+
657
+ Demo.template = "\n const {Tooltip, Dialog} = this;\n <div style=\"text-align: right; position: relative; width: 300px;\">\n <Tooltip content=\"\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\uFF0C\u8FD9\u662F\u4E00\u6BB5\u5F88\u957F\u7684\u63CF\u8FF0\u6587\u5B57\" container={dom => dom}>\n <span class=\"trigger\">test</span>\n </Tooltip>\n </div>\n ";
658
+ _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
659
+ trigger = element.querySelector('.trigger');
660
+ expecedWidth = parseInt(tooltipTheme.maxWidth);
661
+ dispatchEvent(trigger, 'mouseenter');
662
+ _context15.next = 8;
663
+ return wait();
664
+
665
+ case 8:
666
+ content = getElement('.k-tooltip-content');
667
+ width = content.offsetWidth;
668
+ expect(width).to.eql(expecedWidth);
669
+ dispatchEvent(trigger, 'mouseleave');
670
+ _context15.next = 14;
671
+ return wait();
672
+
673
+ case 14:
674
+ dispatchEvent(trigger, 'mouseenter');
675
+ _context15.next = 17;
676
+ return wait();
677
+
678
+ case 17:
679
+ newWidth = content.offsetWidth;
680
+ expect(newWidth).to.eql(width);
681
+
682
+ case 19:
683
+ case "end":
684
+ return _context15.stop();
685
+ }
686
+ }
687
+ }, _callee11);
688
+ })));
689
+ it('should not impact select when wrap select with tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
690
+ var Demo, _mount12, instance, element, menu;
691
+
692
+ return _regeneratorRuntime.wrap(function _callee12$(_context17) {
693
+ while (1) {
694
+ switch (_context17.prev = _context17.next) {
695
+ case 0:
696
+ Demo = /*#__PURE__*/function (_Component5) {
697
+ _inheritsLoose(Demo, _Component5);
698
+
699
+ function Demo() {
700
+ var _context16;
701
+
702
+ var _this5;
703
+
704
+ for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
705
+ args[_key5] = arguments[_key5];
706
+ }
707
+
708
+ _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context16 = [this]).call(_context16, args)) || this;
709
+ _this5.Tooltip = Tooltip;
710
+ _this5.Select = Select;
711
+ _this5.Option = Option;
712
+ return _this5;
713
+ }
714
+
715
+ return Demo;
716
+ }(Component);
717
+
718
+ Demo.template = "\n const {Tooltip, Select, Option} = this;\n <Tooltip>\n <Select>\n <Option value=\"1\">Option 1</Option>\n <Option value=\"2\">Option 2</Option>\n </Select>\n </Tooltip>\n ";
719
+ _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
720
+ dispatchEvent(element, 'mouseenter');
721
+ _context17.next = 6;
722
+ return wait();
723
+
724
+ case 6:
725
+ dispatchEvent(element, 'click');
726
+ _context17.next = 9;
727
+ return wait();
728
+
729
+ case 9:
730
+ menu = getElement(".k-select-menu");
731
+ dispatchEvent(element, 'mouseleave');
732
+ _context17.next = 13;
733
+ return wait(500);
734
+
735
+ case 13:
736
+ expect(menu.style.display).to.eql('');
737
+
738
+ case 14:
739
+ case "end":
740
+ return _context17.stop();
741
+ }
742
+ }
743
+ }, _callee12);
744
+ })));
580
745
  });
@@ -1,4 +1,26 @@
1
1
  import '../../styles/global';
2
+ declare const defaults: {
3
+ padding: string;
4
+ readonly color: string;
5
+ bgColor: string;
6
+ lineHeight: number;
7
+ maxWidth: string;
8
+ arrow: {
9
+ borderColor: string;
10
+ width: string;
11
+ };
12
+ confirm: {
13
+ gaps: string;
14
+ };
15
+ dark: {
16
+ readonly bgColor: string;
17
+ color: string;
18
+ readonly arrowBorderColor: string;
19
+ };
20
+ smallPadding: string;
21
+ };
22
+ export declare let tooltip: typeof defaults;
2
23
  export declare type Theme = 'dark' | 'light';
3
24
  export declare const themes: Theme[];
4
25
  export default function makeStyles(): string;
26
+ export {};
@@ -38,7 +38,7 @@ var defaults = {
38
38
  },
39
39
  smallPadding: '4px'
40
40
  };
41
- var tooltip;
41
+ export var tooltip;
42
42
  setDefault(function () {
43
43
  tooltip = deepDefaults(theme, {
44
44
  tooltip: defaults
@@ -23,5 +23,6 @@ export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends To
23
23
  static typeDefs: Required<TypeDefs<TooltipProps>>;
24
24
  static defaults: () => Partial<TooltipProps>;
25
25
  static events: Events<TooltipEvents>;
26
+ show(shouldFocus?: boolean): void;
26
27
  hide(immediately: boolean): void;
27
28
  }
@@ -25,6 +25,7 @@ var defaults = function defaults() {
25
25
  at: 'center top',
26
26
  collision: 'flipfit'
27
27
  },
28
+ collison: 'flipfit',
28
29
  hoverable: false,
29
30
  always: false,
30
31
  confirm: false,
@@ -48,12 +49,26 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
48
49
 
49
50
  var _proto = Tooltip.prototype;
50
51
 
52
+ _proto.show = function show(shouldFocus) {
53
+ if (shouldFocus === void 0) {
54
+ shouldFocus = false;
55
+ }
56
+
57
+ if (this.get('disabled')) return;
58
+ clearTimeout(this.timer);
59
+ this.set('value', true);
60
+ };
61
+
51
62
  _proto.hide = function hide(immediately) {
52
63
  if (this.get('always')) return;
53
64
 
54
65
  if (this.get('hoverable')) {
55
66
  return _Dropdown.prototype.hide.call(this, immediately);
56
- }
67
+ } // tooltip can show any number sub-tooltips, we should not close the showed tooltip
68
+ // #885
69
+
70
+
71
+ this.showedDropdown = null;
57
72
 
58
73
  _Dropdown.prototype.hide.call(this, true);
59
74
  };