@king-design/react 3.2.2-beta.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/__tests__/__snapshots__/React Demos.md +61 -15
  2. package/components/breadcrumb/index.js +1 -1
  3. package/components/breadcrumb/index.vdt.js +6 -2
  4. package/components/button/index.vdt.js +3 -2
  5. package/components/cascader/index.js +2 -1
  6. package/components/cascader/index.spec.js +32 -0
  7. package/components/cascader/index.vdt.js +8 -3
  8. package/components/cascader/styles.js +1 -1
  9. package/components/cascader/useFilterable.d.ts +2 -1
  10. package/components/cascader/useFilterable.js +15 -4
  11. package/components/checkbox/index.vdt.js +4 -2
  12. package/components/config/index.d.ts +2 -0
  13. package/components/config/index.js +3 -0
  14. package/components/datepicker/index.d.ts +1 -0
  15. package/components/datepicker/index.js +2 -0
  16. package/components/dialog/base.d.ts +1 -0
  17. package/components/divider/index.d.ts +14 -0
  18. package/components/divider/index.js +38 -0
  19. package/components/divider/index.spec.d.ts +1 -0
  20. package/components/divider/index.spec.js +1 -0
  21. package/components/divider/index.vdt.js +31 -0
  22. package/components/divider/styles.d.ts +5 -0
  23. package/components/divider/styles.js +35 -0
  24. package/components/dropdown/dropdown.js +2 -2
  25. package/components/dropdown/menu.js +1 -1
  26. package/components/ellipsis/index.d.ts +16 -0
  27. package/components/ellipsis/index.js +36 -0
  28. package/components/ellipsis/index.spec.d.ts +1 -0
  29. package/components/ellipsis/index.spec.js +94 -0
  30. package/components/ellipsis/index.vdt.js +50 -0
  31. package/components/ellipsis/styles.d.ts +5 -0
  32. package/components/ellipsis/styles.js +10 -0
  33. package/components/ellipsis/useEllipsis.d.ts +4 -0
  34. package/components/ellipsis/useEllipsis.js +21 -0
  35. package/components/input/index.d.ts +1 -1
  36. package/components/input/index.js +1 -1
  37. package/components/input/index.vdt.js +4 -2
  38. package/components/menu/item.vdt.js +8 -3
  39. package/components/menu/styles.d.ts +1 -1
  40. package/components/menu/styles.js +8 -7
  41. package/components/menu/title.vdt.js +6 -2
  42. package/components/radio/index.vdt.js +4 -2
  43. package/components/select/base.d.ts +1 -0
  44. package/components/select/base.vdt.js +4 -2
  45. package/components/select/useInput.js +5 -1
  46. package/components/table/styles.js +3 -3
  47. package/components/table/table.vdt.js +1 -1
  48. package/components/tabs/index.d.ts +1 -0
  49. package/components/tag/index.spec.js +4 -2
  50. package/components/tag/tags.vdt.js +2 -1
  51. package/components/tooltip/styles.js +1 -1
  52. package/components/upload/index.vdt.js +4 -2
  53. package/components/upload/styles.js +1 -1
  54. package/components/view/index.d.ts +15 -0
  55. package/components/view/index.js +30 -0
  56. package/i18n/en-US.d.ts +1 -1
  57. package/i18n/en-US.js +1 -1
  58. package/index.d.ts +5 -2
  59. package/index.js +5 -2
  60. package/package.json +2 -2
  61. package/styles/theme.d.ts +8 -0
  62. package/styles/theme.js +8 -4
  63. package/yarn-error.log +0 -528
@@ -9,7 +9,7 @@ var typeDefs = {
9
9
  };
10
10
  var defaults = function defaults() {
11
11
  return {
12
- separator: '>'
12
+ separator: ''
13
13
  };
14
14
  };
15
15
  export var Breadcrumb = /*#__PURE__*/function (_Component) {
@@ -1,9 +1,13 @@
1
1
  import _extends from "@babel/runtime-corejs3/helpers/extends";
2
2
  import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
3
- import { createElementVNode as _$ce, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact-react';
3
+ import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact-react';
4
4
  import { getRestProps, mapChildren } from '../utils';
5
5
  import { BreadcrumbItem } from './item';
6
6
  import { makeStyles } from './styles';
7
+ import { Icon } from '../icon';
8
+ var _$tmp0 = {
9
+ 'className': 'k-icon-right'
10
+ };
7
11
  export default function ($props, $blocks, $__proto__) {
8
12
  var _classNameObj;
9
13
  $blocks || ($blocks = {});
@@ -17,7 +21,7 @@ export default function ($props, $blocks, $__proto__) {
17
21
  className = _this$get.className;
18
22
  var k = this.config.k;
19
23
  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-breadcrumb"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
20
- var separatorVNode = _$ce(2, 'span', (_$blocks['separator'] = function ($super) {
24
+ var separatorVNode = _$ce(2, 'span', !$blocks.separator && !separator ? _$cc(Icon, _$tmp0) : (_$blocks['separator'] = function ($super) {
21
25
  return separator;
22
26
  }, __$blocks['separator'] = function ($super, data) {
23
27
  var block = $blocks['separator'];
@@ -30,7 +30,8 @@ export default function ($props, $blocks, $__proto__) {
30
30
  ghost = _this$get.ghost;
31
31
  var _this$config = this.config,
32
32
  cls = _this$config.cls,
33
- k = _this$config.k;
33
+ k = _this$config.k,
34
+ disableWave = _this$config.disableWave;
34
35
  var checked = this.isChecked();
35
36
  var isIcon = function isIcon(child) {
36
37
  return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;
@@ -66,7 +67,7 @@ export default function ($props, $blocks, $__proto__) {
66
67
  var typeStyles = theme[type];
67
68
  var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
68
69
  return _$cc(Wave, {
69
- 'disabled': loading || disabled || type === 'none' || type === 'link',
70
+ 'disabled': loading || disabled || type === 'none' || type === 'link' || disableWave,
70
71
  'inset': type === 'flat' ? '-1px' : '-2px',
71
72
  'color': waveColor,
72
73
  'children': _$cc(DynamicButton, _extends({
@@ -1,6 +1,7 @@
1
1
  import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
2
  import _extends from "@babel/runtime-corejs3/helpers/extends";
3
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
4
+ import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
4
5
  import template from './index.vdt';
5
6
  import { BaseSelect } from '../select/base';
6
7
  import { _$ } from '../../i18n';
@@ -41,7 +42,7 @@ export var Cascader = /*#__PURE__*/function (_BaseSelect) {
41
42
  _this.value = useValue();
42
43
  _this.label = useLabel(_this.fields);
43
44
  _this.load = useLoad(_this.fields);
44
- _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue, _this.fields);
45
+ _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue, _this.fields, _valuesInstanceProperty(_this.value));
45
46
  _this.positionObj = {
46
47
  my: 'left top',
47
48
  at: 'right top',
@@ -433,4 +433,36 @@ describe('Cascader', function () {
433
433
  }
434
434
  }, _callee10);
435
435
  })));
436
+ it('should only show submenu while the root menu will show', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
437
+ var _mount10, instance, element, _element$querySelecto2, dom, input;
438
+ return _regeneratorRuntime.wrap(function _callee11$(_context14) {
439
+ while (1) switch (_context14.prev = _context14.next) {
440
+ case 0:
441
+ _mount10 = mount(FilterDemo), instance = _mount10[0], element = _mount10[1];
442
+ instance.set('values', [['beijing', 'haidian']]);
443
+ _context14.next = 4;
444
+ return wait();
445
+ case 4:
446
+ _element$querySelecto2 = element.querySelectorAll('.k-cascader'), dom = _element$querySelecto2[1];
447
+ dispatchEvent(dom, 'click');
448
+ _context14.next = 8;
449
+ return wait();
450
+ case 8:
451
+ input = dom.querySelector('.k-input-inner'); // should show layer when input empty string
452
+ input.value = 's';
453
+ dispatchEvent(input, 'input');
454
+ _context14.next = 13;
455
+ return wait();
456
+ case 13:
457
+ document.body.click();
458
+ _context14.next = 16;
459
+ return wait();
460
+ case 16:
461
+ expect(getElement('.k-cascader-menu')).to.not.exist;
462
+ case 17:
463
+ case "end":
464
+ return _context14.stop();
465
+ }
466
+ }, _callee11);
467
+ })));
436
468
  });
@@ -17,7 +17,8 @@ export default function ($props, $blocks, $__proto__) {
17
17
  trigger = _this$get.trigger,
18
18
  filterable = _this$get.filterable,
19
19
  fields = _this$get.fields,
20
- multiple = _this$get.multiple;
20
+ multiple = _this$get.multiple,
21
+ show = _this$get.show;
21
22
  var k = this.config.k;
22
23
  var baseMenuStyles = makeMenuStyles(k);
23
24
  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-cascader-menu"] = true, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
@@ -41,7 +42,7 @@ export default function ($props, $blocks, $__proto__) {
41
42
  }
42
43
  return _mapInstanceProperty(data).call(data, function (item, index) {
43
44
  var value = getField(item, 'value');
44
- var showed = isShowed(value, level);
45
+ var showed = show && isShowed(value, level);
45
46
  var selected = parentSelected && isSelected(value, level);
46
47
  var children = getField(item, 'children');
47
48
  var Item = function Item() {
@@ -74,7 +75,8 @@ export default function ($props, $blocks, $__proto__) {
74
75
  var _this$filterable = this.filterable,
75
76
  filter = _filterInstanceProperty(_this$filterable),
76
77
  keywords = _this$filterable.keywords.value,
77
- selectByFilter = _this$filterable.selectByFilter;
78
+ selectByFilter = _this$filterable.selectByFilter,
79
+ isSelectedItem = _this$filterable.isSelectedItem;
78
80
  return _$su.call($this, {
79
81
  'className': _$cn(k + "-cascader")
80
82
  }, function ($blocks) {
@@ -93,9 +95,12 @@ export default function ($props, $blocks, $__proto__) {
93
95
  var items = filter();
94
96
  if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, _$cn(k + "-cascader-empty"));
95
97
  return _$ma(items, function ($value, $key) {
98
+ var _$cn4;
96
99
  return _$cc(DropdownItem, {
97
100
  'ev-select': selectByFilter.bind(null, $value),
98
101
  'disabled': $value.disabled,
102
+ 'hideOnSelect': !multiple,
103
+ 'className': _$cn((_$cn4 = {}, _$cn4[k + "-selected"] = isSelectedItem($value), _$cn4)),
99
104
  'children': function () {
100
105
  // highlight keywords
101
106
  var label = _mapInstanceProperty($value).call($value, function (item) {
@@ -43,5 +43,5 @@ export var makeMenuStyles = cache(function makeMenuStyles(k) {
43
43
  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.", k, "-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.", k, "-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.", k, "-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.", k, "-cascader-option{&.", k, "-selected{color:", cascader.selectedColor, ";}&.", k, "-active{background:", cascader.activeBgColor, ";}}");
44
44
  });
45
45
  export var makeFilterMenuStyles = cache(function makeFilterMenuStyles(k) {
46
- return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");
46
+ return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}.", k, "-dropdown-item.", k, "-selected{color:", cascader.selectedColor, ";}");
47
47
  });
@@ -2,8 +2,9 @@ import type { CascaderData } from './';
2
2
  import { State } from '../../hooks/useState';
3
3
  import type { Value } from './useValue';
4
4
  import type { useFields } from './useFields';
5
- export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void, getField: ReturnType<typeof useFields>): {
5
+ export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void, getField: ReturnType<typeof useFields>, values: State<Value[]>): {
6
6
  filter: () => CascaderData<any>[][];
7
7
  selectByFilter: (data: CascaderData<any>[]) => void;
8
8
  keywords: State<string>;
9
+ isSelectedItem: (data: CascaderData<any>[]) => boolean;
9
10
  };
@@ -1,9 +1,11 @@
1
1
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
2
2
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
3
3
  import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
4
+ import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
4
5
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
5
6
  import { useInstance } from 'intact-react';
6
- export function useFilterable(keywords, setValue, getField) {
7
+ import { isEqualArray } from '../utils';
8
+ export function useFilterable(keywords, setValue, getField, values) {
7
9
  var instance = useInstance();
8
10
  function filter() {
9
11
  var ret = [];
@@ -44,14 +46,23 @@ export function useFilterable(keywords, setValue, getField) {
44
46
  return ret;
45
47
  }
46
48
  function selectByFilter(data) {
47
- var value = _mapInstanceProperty(data).call(data, function (item) {
49
+ setValue(getValue(data));
50
+ }
51
+ function isSelectedItem(data) {
52
+ var _context2;
53
+ return !!_findInstanceProperty(_context2 = values.value).call(_context2, function (value) {
54
+ return isEqualArray(value, getValue(data));
55
+ });
56
+ }
57
+ function getValue(data) {
58
+ return _mapInstanceProperty(data).call(data, function (item) {
48
59
  return getField(item, 'value');
49
60
  });
50
- setValue(value);
51
61
  }
52
62
  return {
53
63
  filter: filter,
54
64
  selectByFilter: selectByFilter,
55
- keywords: keywords
65
+ keywords: keywords,
66
+ isSelectedItem: isSelectedItem
56
67
  };
57
68
  }
@@ -22,7 +22,9 @@ export default function ($props, $blocks, $__proto__) {
22
22
  title = _this$get.title,
23
23
  rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
24
24
  var isChecked = this.isChecked();
25
- var k = this.config.k;
25
+ var _this$config = this.config,
26
+ k = _this$config.k,
27
+ disableWave = _this$config.disableWave;
26
28
  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-checkbox"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = isChecked, _classNameObj[k + "-indeterminate"] = indeterminate, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
27
29
  var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
28
30
  if (rest[name]) {
@@ -45,7 +47,7 @@ export default function ($props, $blocks, $__proto__) {
45
47
  'ev-click': this.onClick,
46
48
  'ev-keypress': this.onKeypress
47
49
  }, events), [_$cc(Wave, {
48
- 'disabled': disabled,
50
+ 'disabled': disabled || disableWave,
49
51
  'inset': '-2px',
50
52
  'children': _$ce(2, 'span', _$cv('input', _extends({
51
53
  'type': 'checkbox',
@@ -2,11 +2,13 @@ import { ProviderProps } from '../context';
2
2
  import { Component } from 'intact-react';
3
3
  export interface ConfigProps {
4
4
  classNamePrefix?: string;
5
+ disableWave?: boolean;
5
6
  }
6
7
  declare const ConfigConsumer: import('intact-react').ComponentConstructor<Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
7
8
  declare function useConfigContext(): {
8
9
  cls: (name: string) => string;
9
10
  readonly k: string;
11
+ readonly disableWave: boolean;
10
12
  };
11
13
  /**
12
14
  * for vue/react type checking
@@ -12,6 +12,9 @@ function useConfigContext() {
12
12
  },
13
13
  get k() {
14
14
  return config.value.classNamePrefix || 'k';
15
+ },
16
+ get disableWave() {
17
+ return config.value.disableWave || false;
15
18
  }
16
19
  };
17
20
  }
@@ -4,6 +4,7 @@ import { State } from '../../hooks/useState';
4
4
  import { Shortcut } from './shortcuts';
5
5
  import { BasePicker, BasePickerProps, BasePickerEvents, BasePickerBlocks, Value } from './basepicker';
6
6
  export * as shortcuts from './shortcuts';
7
+ export { dayjs };
7
8
  export interface DatepickerProps<V extends Value = Value, M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<V extends string ? V : V | string, M, R> {
8
9
  type?: 'date' | 'datetime' | 'year' | 'month';
9
10
  shortcuts?: Shortcut[];
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
5
5
  import { provide } from 'intact-react';
6
6
  import template from './index.vdt';
7
7
  import { DATEPICKER } from './constants';
8
+ import dayjs from './dayjs';
8
9
  import { useValue } from './useValue';
9
10
  import { isNullOrUndefined } from 'intact-shared';
10
11
  import { _$ } from '../../i18n';
@@ -17,6 +18,7 @@ import { useKeyboards } from './useKeyboards';
17
18
  import { BasePicker } from './basepicker';
18
19
  import * as _shortcuts from './shortcuts';
19
20
  export { _shortcuts as shortcuts };
21
+ export { dayjs };
20
22
  var typeDefs = _extends({}, BasePicker.typeDefs, {
21
23
  type: ['date', 'datetime', 'year', 'month'],
22
24
  shortcuts: Array
@@ -52,6 +52,7 @@ export declare class BaseDialog<T extends BaseDialogProps = BaseDialogProps, E e
52
52
  protected config: {
53
53
  cls: (name: string) => string;
54
54
  readonly k: string;
55
+ readonly disableWave: boolean;
55
56
  };
56
57
  init(): void;
57
58
  show(props?: T): void;
@@ -0,0 +1,14 @@
1
+ import { Component, TypeDefs } from 'intact-react';
2
+ export interface DividerProps {
3
+ borderType?: 'solid' | 'dashed' | 'dotted' | 'double';
4
+ position?: 'left' | 'right' | 'center';
5
+ type?: 'vertical' | 'horizontal';
6
+ theme?: 'light' | 'dark';
7
+ margin?: 'large' | 'default' | 'small' | 'none' | number;
8
+ }
9
+ export declare class Divider extends Component<DividerProps> {
10
+ static template: string | import('intact-react').Template<any>;
11
+ static typeDefs: Required<TypeDefs<DividerProps>>;
12
+ static defaults: () => Partial<DividerProps>;
13
+ private config;
14
+ }
@@ -0,0 +1,38 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
3
+ import { Component } from 'intact-react';
4
+ import template from './index.vdt';
5
+ import { useConfigContext } from '../config';
6
+ var typeDefs = {
7
+ borderType: ['solid', 'dashed', 'dotted', 'double'],
8
+ position: ['left', 'right', 'center'],
9
+ type: ['vertical', 'horizontal'],
10
+ theme: ['light', 'dark'],
11
+ margin: ['large', 'default', 'small', 'none', Number]
12
+ };
13
+ var defaults = function defaults() {
14
+ return {
15
+ borderType: 'solid',
16
+ position: 'center',
17
+ type: 'horizontal',
18
+ theme: 'light',
19
+ margin: 'default'
20
+ };
21
+ };
22
+ export var Divider = /*#__PURE__*/function (_Component) {
23
+ _inheritsLoose(Divider, _Component);
24
+ function Divider() {
25
+ var _context;
26
+ var _this;
27
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
28
+ args[_key] = arguments[_key];
29
+ }
30
+ _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
31
+ _this.config = useConfigContext();
32
+ return _this;
33
+ }
34
+ return Divider;
35
+ }(Component);
36
+ Divider.template = template;
37
+ Divider.typeDefs = typeDefs;
38
+ Divider.defaults = defaults;
@@ -0,0 +1 @@
1
+
@@ -0,0 +1 @@
1
+ "use strict";
@@ -0,0 +1,31 @@
1
+ import _extends from "@babel/runtime-corejs3/helpers/extends";
2
+ import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
3
+ import { makeStyles } from './styles';
4
+ import { getRestProps, addStyle } from '../utils';
5
+ export default function ($props, $blocks, $__proto__) {
6
+ var _classNameObj;
7
+ $blocks || ($blocks = {});
8
+ $props || ($props = {});
9
+ var $this = this;
10
+ var _this$get = this.get(),
11
+ children = _this$get.children,
12
+ className = _this$get.className,
13
+ borderType = _this$get.borderType,
14
+ position = _this$get.position,
15
+ type = _this$get.type,
16
+ theme = _this$get.theme,
17
+ margin = _this$get.margin,
18
+ style = _this$get.style;
19
+ var k = this.config.k;
20
+ var _style = {};
21
+ if (typeof margin === 'number') {
22
+ var _margin = type === 'vertical' ? "0 " + margin + "px" : margin + "px 0";
23
+ _style.margin = _margin;
24
+ }
25
+ var classNameObj = (_classNameObj = {}, _classNameObj[k + "-divider"] = true, _classNameObj[k + "-" + (theme === 'dark' ? 'dark' : 'light')] = theme, _classNameObj[k + "-" + type] = type, _classNameObj[k + "-" + margin] = margin && typeof margin !== 'number', _classNameObj[k + "-with-text"] = children && type === 'horizontal', _classNameObj[k + "-" + position] = position !== 'center', _classNameObj[makeStyles(k, borderType)] = true, _classNameObj[className] = className, _classNameObj);
26
+ return _$cv('div', _extends({}, getRestProps(this), {
27
+ 'className': _$cn(classNameObj),
28
+ 'style': addStyle(style, _style)
29
+ }), children && type === 'horizontal' ? _$ce(2, 'div', children, 0, _$cn(k + "-divider-text")) : undefined);
30
+ }
31
+ ;
@@ -0,0 +1,5 @@
1
+ import '../../styles/global';
2
+ export declare const makeStyles: {
3
+ (k: string, borderType: string): string;
4
+ clearCache(): {};
5
+ };
@@ -0,0 +1,35 @@
1
+ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
2
+ import { css } from '@emotion/css';
3
+ import { theme, setDefault } from '../../styles/theme';
4
+ import { deepDefaults } from '../../styles/utils';
5
+ import '../../styles/global';
6
+ import { cache } from '../utils';
7
+ var sizes = ['large', 'default', 'small'];
8
+ var defaults = {
9
+ positionOffset: '5%',
10
+ get borderColor() {
11
+ return theme.color.darkBorder;
12
+ },
13
+ light: {
14
+ get borderColor() {
15
+ return theme.color.disabledBg;
16
+ }
17
+ },
18
+ large: {
19
+ get margin() {
20
+ return theme.large.padding;
21
+ }
22
+ }
23
+ };
24
+ var divider;
25
+ setDefault(function () {
26
+ divider = deepDefaults(theme, {
27
+ divider: defaults
28
+ }).divider;
29
+ makeStyles == null || makeStyles.clearCache();
30
+ });
31
+ export var makeStyles = cache(function makeStyles(k, borderType) {
32
+ return /*#__PURE__*/css("&.", k, "-divider{padding:0;border-top:1px ", borderType, " ", divider.borderColor, ";}&.", k, "-light{border-top-color:", divider.light.borderColor, ";&.", k, "-with-text{&::before,&::after{border-top-color:", divider.light.borderColor, ";}}&.", k, "-vertical{border-right-color:", divider.light.borderColor, ";}}&.", k, "-vertical{border-top:0;display:inline-block;height:100%;border-right:1px solid ", divider.borderColor, ";vertical-align:middle;}&.", k, "-horizontal{width:100%;min-width:100%;}&.", k, "-with-text{border-top:0;display:flex;align-items:center;white-space:nowrap;text-align:center;&::before,&::after{width:50%;content:'';transform:translateY(50%);border-top:1px solid ", divider.borderColor, ";}}.", k, "-divider-text{padding:0 16px;}&.", k, "-left{&::before{width:", divider.positionOffset, ";}&::after{width:calc(100% - ", divider.positionOffset, ");}}&.", k, "-right{&::before{width:calc(100% - ", divider.positionOffset, ");}&::after{width:", divider.positionOffset, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
33
+ return /*#__PURE__*/css("&.", k, "-", size, "{margin:", theme[size].margin, " 0;&.", k, "-vertical{margin:0 ", theme[size].margin, ";}}");
34
+ }), ";");
35
+ });
@@ -177,8 +177,8 @@ Dropdown.template = function () {
177
177
  if (this.$isVue || this.$isVueNext) {
178
178
  if (Array.isArray(children)) {
179
179
  children = _filterInstanceProperty(children).call(children, function (child) {
180
- return child !== ' ';
181
- });
180
+ return child !== ' ' && child;
181
+ } /* comment is null in vue3 */);
182
182
  }
183
183
  }
184
184
  if (process.env.NODE_ENV !== 'production') {
@@ -75,7 +75,7 @@ function useKeyboardForDropdownMenu(dropdown) {
75
75
  return focusByIndex(0);
76
76
  };
77
77
  // In Cascader the menu may have been replaced by another menu, in this case,
78
- // if the dropdown has showed while we mounted the menu, add keydown listener
78
+ // if the dropdown has showed while we mounted the menu, add the keydown listener
79
79
  if (dropdown.get('value')) {
80
80
  onShow();
81
81
  }
@@ -0,0 +1,16 @@
1
+ import { Component, TypeDefs } from 'intact-react';
2
+ import { Options } from '../position';
3
+ export type Position = Options;
4
+ export interface EllipsisProps {
5
+ maxLines?: number;
6
+ disabled?: boolean;
7
+ position?: Position | 'left' | 'bottom' | 'right' | 'top';
8
+ theme?: 'light' | 'dark';
9
+ }
10
+ export declare class Ellipsis extends Component<EllipsisProps> {
11
+ static template: string | import('intact-react').Template<any>;
12
+ static typeDefs: Required<TypeDefs<EllipsisProps>>;
13
+ static defaults: () => Partial<EllipsisProps>;
14
+ private ellipsis;
15
+ private config;
16
+ }
@@ -0,0 +1,36 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
3
+ import { Component } from 'intact-react';
4
+ import template from './index.vdt';
5
+ import { useEllipsis } from './useEllipsis';
6
+ import { useConfigContext } from '../config';
7
+ var typeDefs = {
8
+ maxLines: Number,
9
+ disabled: Boolean,
10
+ position: [Object, 'left', 'bottom', 'right', 'top'],
11
+ theme: ['light', 'dark']
12
+ };
13
+ var defaults = function defaults() {
14
+ return {
15
+ disabled: false,
16
+ theme: 'light'
17
+ };
18
+ };
19
+ export var Ellipsis = /*#__PURE__*/function (_Component) {
20
+ _inheritsLoose(Ellipsis, _Component);
21
+ function Ellipsis() {
22
+ var _context;
23
+ var _this;
24
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
25
+ args[_key] = arguments[_key];
26
+ }
27
+ _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
28
+ _this.ellipsis = useEllipsis();
29
+ _this.config = useConfigContext();
30
+ return _this;
31
+ }
32
+ return Ellipsis;
33
+ }(Component);
34
+ Ellipsis.template = template;
35
+ Ellipsis.typeDefs = typeDefs;
36
+ Ellipsis.defaults = defaults;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,94 @@
1
+ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
2
+ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
3
+ import BasicDemo from '~/components/ellipsis/demos/basic';
4
+ import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
5
+ describe('Ellipsis', function () {
6
+ afterEach(function () {
7
+ return unmount();
8
+ });
9
+ it('should support drag Ellipsis', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
10
+ var _mount, instance, element, _element$querySelecto, ellipsis1, ellipsis2, dragLine, children1, content1, children2, content2;
11
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
12
+ while (1) switch (_context.prev = _context.next) {
13
+ case 0:
14
+ _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
15
+ _element$querySelecto = element.querySelectorAll('.k-ellipsis'), ellipsis1 = _element$querySelecto[0], ellipsis2 = _element$querySelecto[1];
16
+ dragLine = element.querySelector('.k-split-line-wrapper'); // There is no tooltip content by default
17
+ expect(getElement('.k-tooltip-content')).to.be.undefined;
18
+ // mouse move
19
+ dispatchEvent(dragLine, 'mousedown', {
20
+ which: 1,
21
+ clientX: 200,
22
+ clientY: 0
23
+ });
24
+ dispatchEvent(document, 'mousemove', {
25
+ clientX: 100,
26
+ clientY: 0
27
+ });
28
+ dispatchEvent(dragLine, 'mouseup');
29
+ _context.next = 9;
30
+ return wait(200);
31
+ case 9:
32
+ expect(element.outerHTML).to.matchSnapshot();
33
+ // mouseenter ellipsis dom
34
+ children1 = ellipsis1.firstElementChild;
35
+ dispatchEvent(children1, 'mouseenter');
36
+ _context.next = 14;
37
+ return wait(0);
38
+ case 14:
39
+ expect(children1.classList.contains('k-dropdown-open')).to.be.true;
40
+ content1 = getElement('.k-tooltip-content');
41
+ expect(content1.textContent).eql('测试测试测试测试测试测试');
42
+ children2 = ellipsis2.firstElementChild;
43
+ dispatchEvent(children2, 'mouseenter');
44
+ _context.next = 21;
45
+ return wait(0);
46
+ case 21:
47
+ content2 = getElement('.k-tooltip-content');
48
+ expect(content2.textContent).eql('最大几行忽略最大几行忽略最大几行忽略');
49
+ case 23:
50
+ case "end":
51
+ return _context.stop();
52
+ }
53
+ }, _callee);
54
+ })));
55
+ it('should disabled tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
56
+ var _mount2, instance, element, ellipsis3, dragLine, children3;
57
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
58
+ while (1) switch (_context2.prev = _context2.next) {
59
+ case 0:
60
+ _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
61
+ ellipsis3 = element.querySelectorAll('.k-ellipsis')[2];
62
+ dragLine = element.querySelector('.k-split-line-wrapper');
63
+ dispatchEvent(dragLine, 'mousedown', {
64
+ which: 1,
65
+ clientX: 200,
66
+ clientY: 0
67
+ });
68
+ dispatchEvent(document, 'mousemove', {
69
+ clientX: 300,
70
+ clientY: 0
71
+ });
72
+ dispatchEvent(dragLine, 'mouseup');
73
+ _context2.next = 8;
74
+ return wait(200);
75
+ case 8:
76
+ // disabled close tooltip
77
+ expect(ellipsis3.firstElementChild.classList.contains('k-dropdown-open')).to.be.false;
78
+ instance.set('disabled', false);
79
+ _context2.next = 12;
80
+ return wait();
81
+ case 12:
82
+ children3 = ellipsis3.firstElementChild;
83
+ dispatchEvent(children3, 'mouseenter');
84
+ _context2.next = 16;
85
+ return wait();
86
+ case 16:
87
+ expect(children3.classList.contains('k-dropdown-open')).to.be.true;
88
+ case 17:
89
+ case "end":
90
+ return _context2.stop();
91
+ }
92
+ }, _callee2);
93
+ })));
94
+ });