@king-design/vue 3.5.1 → 3.6.0-beta.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 (90) hide show
  1. package/components/breadcrumb/index.vdt.js +2 -1
  2. package/components/breadcrumb/styles.js +5 -3
  3. package/components/datepicker/basepicker.d.ts +4 -2
  4. package/components/datepicker/basepicker.js +46 -13
  5. package/components/datepicker/calendar.d.ts +34 -6
  6. package/components/datepicker/calendar.js +4 -0
  7. package/components/datepicker/calendar.vdt.js +21 -5
  8. package/components/datepicker/dayjs.d.ts +13 -2
  9. package/components/datepicker/dayjs.js +6 -0
  10. package/components/datepicker/helpers.d.ts +5 -5
  11. package/components/datepicker/index.d.ts +17 -2
  12. package/components/datepicker/index.js +23 -5
  13. package/components/datepicker/index.spec.js +356 -355
  14. package/components/datepicker/index.vdt.js +25 -29
  15. package/components/datepicker/styles.d.ts +17 -0
  16. package/components/datepicker/styles.js +29 -2
  17. package/components/datepicker/useDisabled.d.ts +2 -2
  18. package/components/datepicker/useDisabled.js +1 -1
  19. package/components/datepicker/useFormats.js +3 -1
  20. package/components/datepicker/useMergeRange.d.ts +5 -0
  21. package/components/datepicker/useMergeRange.js +50 -0
  22. package/components/datepicker/usePosition.d.ts +10 -0
  23. package/components/datepicker/usePosition.js +166 -0
  24. package/components/datepicker/useQuarters.d.ts +15 -0
  25. package/components/datepicker/useQuarters.js +36 -0
  26. package/components/datepicker/useShowDate.d.ts +1 -1
  27. package/components/datepicker/useShowDate.js +42 -9
  28. package/components/datepicker/useStatus.d.ts +1 -1
  29. package/components/datepicker/useValue.d.ts +1 -0
  30. package/components/datepicker/useValue.js +26 -2
  31. package/components/datepicker/useWeeks.d.ts +19 -0
  32. package/components/datepicker/useWeeks.js +48 -0
  33. package/components/dialog/useFixBody.js +6 -58
  34. package/components/ellipsis/styles.js +1 -1
  35. package/components/form/styles.js +1 -1
  36. package/components/scrollSelect/index.spec.js +4 -6
  37. package/components/scrollSelect/useMouseEvents.js +21 -9
  38. package/components/select/base.vdt.js +4 -2
  39. package/components/select/index.spec.js +269 -42
  40. package/components/select/option.d.ts +1 -0
  41. package/components/select/option.js +9 -2
  42. package/components/select/select.d.ts +1 -0
  43. package/components/select/select.js +2 -1
  44. package/components/select/useFilterable.js +2 -1
  45. package/components/select/useInput.js +5 -2
  46. package/components/select/useSearchable.js +1 -0
  47. package/components/table/table.vdt.js +4 -2
  48. package/components/timepicker/panelPicker.d.ts +2 -1
  49. package/components/timepicker/panelPicker.vdt.js +12 -4
  50. package/components/timepicker/selectPicker.d.ts +1 -1
  51. package/components/timepicker/styles.js +1 -1
  52. package/components/timepicker/useDisabled.d.ts +1 -1
  53. package/components/timepicker/useValue.d.ts +1 -0
  54. package/components/tour/index.d.ts +2 -0
  55. package/components/tour/index.js +2 -0
  56. package/components/tour/index.spec.d.ts +1 -0
  57. package/components/tour/index.spec.js +356 -0
  58. package/components/tour/step.d.ts +23 -0
  59. package/components/tour/step.js +46 -0
  60. package/components/tour/step.vdt.js +74 -0
  61. package/components/tour/styles.d.ts +7 -0
  62. package/components/tour/styles.js +84 -0
  63. package/components/tour/tour.d.ts +73 -0
  64. package/components/tour/tour.js +70 -0
  65. package/components/tour/tour.vdt.js +66 -0
  66. package/components/tour/useArrow.d.ts +4 -0
  67. package/components/tour/useArrow.js +40 -0
  68. package/components/tour/useFixBody.d.ts +4 -0
  69. package/components/tour/useFixBody.js +17 -0
  70. package/components/tour/useHighlight.d.ts +4 -0
  71. package/components/tour/useHighlight.js +31 -0
  72. package/components/tour/useMaskClosable.d.ts +1 -0
  73. package/components/tour/useMaskClosable.js +25 -0
  74. package/components/tour/useNavigation.d.ts +5 -0
  75. package/components/tour/useNavigation.js +103 -0
  76. package/components/tour/usePosition.d.ts +6 -0
  77. package/components/tour/usePosition.js +93 -0
  78. package/components/tour/useSteps.d.ts +6 -0
  79. package/components/tour/useSteps.js +68 -0
  80. package/components/tree/useChecked.js +6 -4
  81. package/components/treeSelect/index.spec.js +20 -5
  82. package/components/virtualList/useVirtualRows.js +1 -1
  83. package/hooks/useDocumentClick.js +3 -3
  84. package/hooks/useFixBody.d.ts +11 -0
  85. package/hooks/useFixBody.js +72 -0
  86. package/index.d.ts +3 -2
  87. package/index.js +3 -2
  88. package/package.json +1 -1
  89. package/styles/fonts/iconfont.js +2 -1
  90. package/styles/global.js +2 -1
@@ -38,6 +38,7 @@ export function useValue(formats, disabled, panel) {
38
38
  multiple = _instance$get3.multiple,
39
39
  type = _instance$get3.type,
40
40
  range = _instance$get3.range;
41
+ var activePosition = instance.activePosition.position.value;
41
42
  var _value;
42
43
  if (range) {
43
44
  var oldValue = last(value.value);
@@ -48,9 +49,24 @@ export function useValue(formats, disabled, panel) {
48
49
  * #877
49
50
  */
50
51
  flag = PanelFlags.Start;
51
- _value = [fixDatetimeWithMinDate(v)];
52
+ if ((type === 'datetime' || type === 'date') && (oldValue == null ? void 0 : oldValue.length) === 2) {
53
+ // Use activePosition instead of Coordinate
54
+ _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMinDate(v)] : multiple ? [fixDatetimeWithMinDate(v)] : [fixDatetimeWithMinDate(v), oldValue[1]];
55
+ } else {
56
+ _value = [fixDatetimeWithMinDate(v)];
57
+ }
52
58
  } else {
53
- _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
59
+ if (type === 'datetime') {
60
+ if (oldValue.length === 1) {
61
+ // 如果只有开始日期,根据activePosition决定是替换开始日期还是设置结束日期
62
+ _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMaxDate(v)] : [fixDatetimeWithMaxDate(v)];
63
+ } else {
64
+ // oldValue.length === 2的情况
65
+ _value = activePosition === 'end' ? [oldValue[0], fixDatetimeWithMaxDate(v)] : multiple ? [fixDatetimeWithMaxDate(v)] : [fixDatetimeWithMaxDate(v), oldValue[1]];
66
+ }
67
+ } else {
68
+ _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
69
+ }
54
70
  _sortInstanceProperty(_value).call(_value, function (a, b) {
55
71
  return a.isAfter(b) ? 1 : -1;
56
72
  });
@@ -70,6 +86,14 @@ export function useValue(formats, disabled, panel) {
70
86
  } else {
71
87
  panel.changePanel(PanelTypes.Time, flag);
72
88
  }
89
+ } else if (type === 'week') {
90
+ _value = v.startOf('week');
91
+ setValue(_value, false);
92
+ instance.hide();
93
+ } else if (type === 'quarter') {
94
+ _value = v.startOf('quarter');
95
+ setValue(_value, false);
96
+ instance.hide();
73
97
  } else if (!multiple && (!range || _value.length === 2)) {
74
98
  instance.hide();
75
99
  }
@@ -0,0 +1,19 @@
1
+ import dayjs, { Dayjs } from 'dayjs';
2
+ import { State } from '../../hooks/useState';
3
+ import type { useStatus } from './useStatus';
4
+ export declare function useWeeks(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
5
+ getWeeks: (now: Dayjs) => {
6
+ week: number;
7
+ days: {
8
+ isExceed: boolean;
9
+ label: number;
10
+ value: dayjs.Dayjs;
11
+ isActive: boolean;
12
+ isToday: boolean;
13
+ isDisabled: boolean;
14
+ isHover: boolean;
15
+ isInRange: boolean;
16
+ }[];
17
+ }[];
18
+ onClick: (day: Dayjs) => void;
19
+ };
@@ -0,0 +1,48 @@
1
+ import { useInstance } from 'intact-vue-next';
2
+ export function useWeeks(showDate, status, focusDate) {
3
+ var instance = useInstance();
4
+ function getWeeks(now) {
5
+ var weeks = [];
6
+ // 从当前显示月份的月初开始,并调整到该周的开始
7
+ var startOfMonth = showDate.value.startOf('month');
8
+ var start = startOfMonth.startOf('week');
9
+ var current = start;
10
+ var currentMonth = showDate.value.month();
11
+ // 遍历6周,以覆盖整个月份
12
+ for (var weekIndex = 0; weekIndex < 6; weekIndex++) {
13
+ var weekNumber = current.week(); // 获取当前周的周数
14
+ var days = [];
15
+ // 遍历一周的7天
16
+ for (var i = 0; i < 7; i++) {
17
+ var day = current.add(i, 'day');
18
+ var isFirstOrLastDay = i === 0 || i === 6;
19
+ days.push({
20
+ isExceed: day.month() !== currentMonth,
21
+ label: day.date(),
22
+ value: day,
23
+ isActive: isFirstOrLastDay && status.isActive(day, 'week'),
24
+ isToday: day.isSame(now, 'week'),
25
+ isDisabled: status.isDisabled(day),
26
+ isHover: day.isSame(focusDate.value, 'week'),
27
+ isInRange: !isFirstOrLastDay && status.isActive(day, 'week')
28
+ });
29
+ }
30
+ // 每周的数据,包括周数和7天的信息
31
+ weeks.push({
32
+ week: weekNumber,
33
+ days: days
34
+ });
35
+ current = current.add(1, 'week'); // 移动到下一周的开始
36
+ }
37
+ return weeks;
38
+ }
39
+ function onClick(day) {
40
+ var weekStart = day.startOf('week');
41
+ showDate.set(weekStart); // 设置显示日期为周的开始
42
+ instance.triggerChange(weekStart); // 触发日期改变事件
43
+ }
44
+ return {
45
+ getWeeks: getWeeks,
46
+ onClick: onClick
47
+ };
48
+ }
@@ -1,72 +1,20 @@
1
- import _Set from "@babel/runtime-corejs3/core-js/set";
2
- import { useInstance, onBeforeUnmount } from 'intact-vue-next';
3
- import { scrollbarWidth } from '../position';
1
+ import { useInstance } from 'intact-vue-next';
2
+ import { useFixBody as useFixBodyHook, setHooks as setFixBodyHooks } from '../../hooks/useFixBody';
4
3
  import { SHOW } from './constants';
5
- var dialogs = new _Set();
6
- var originalStyle = null;
7
- var hooks = null;
8
4
  export function useFixBody(elementRef) {
9
5
  var instance = useInstance();
10
- var fixedBody = false;
6
+ var fixBodyHook = useFixBodyHook();
11
7
  instance.on(SHOW, onEnter);
12
8
  instance.on('afterClose', onAfterLeave);
13
- onBeforeUnmount(function () {
14
- // should also remove body style when dialog is removed, #805
15
- // if (fixedBody && instance.get('value')) {
16
- if (fixedBody) {
17
- // maybe HIDE event has not triggered
18
- onClosed(instance);
19
- }
20
- });
21
9
  function onEnter() {
22
10
  if (instance.get('overlay')) {
23
- fixedBody = true;
24
- onOpen(instance);
11
+ fixBodyHook.onOpen();
25
12
  }
26
13
  }
27
14
  function onAfterLeave() {
28
- if (fixedBody) {
29
- fixedBody = false;
30
- onClosed(instance);
31
- }
15
+ fixBodyHook.onClose();
32
16
  }
33
17
  }
34
18
  export function setHooks(h) {
35
- hooks = h;
36
- }
37
- function onOpen(dialog) {
38
- var body = document.body;
39
- if (dialogs.size === 0) {
40
- var bodyStyle = body.style;
41
- originalStyle = body.getAttribute('style');
42
- bodyStyle.overflow = 'hidden';
43
- var scrollBarWidth = shouldFixBody();
44
- if (scrollBarWidth) {
45
- bodyStyle.paddingRight = scrollBarWidth + "px";
46
- }
47
- if (hooks && hooks.onStart) {
48
- hooks.onStart(scrollBarWidth);
49
- }
50
- }
51
- dialogs.add(dialog);
52
- }
53
- function onClosed(dialog) {
54
- var body = document.body;
55
- dialogs.delete(dialog);
56
- if (dialogs.size === 0) {
57
- if (originalStyle) {
58
- // console.log(originalStyle);
59
- body.setAttribute('style', originalStyle);
60
- } else {
61
- body.removeAttribute('style');
62
- }
63
- if (hooks && hooks.onEnd) {
64
- hooks.onEnd();
65
- }
66
- }
67
- }
68
- function shouldFixBody() {
69
- if (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) {
70
- return scrollbarWidth();
71
- }
19
+ setFixBodyHooks(h);
72
20
  }
@@ -6,5 +6,5 @@ setDefault(function () {
6
6
  makeStyles == null || makeStyles.clearCache();
7
7
  });
8
8
  export var makeStyles = cache(function makeStyles(k, maxLines) {
9
- return /*#__PURE__*/css("width:100%;&.", k, "-multiline{.k-ellipsis-wrapper{white-space:normal;display:-webkit-box;-webkit-line-clamp:", maxLines, ";-webkit-box-orient:vertical;}}");
9
+ return /*#__PURE__*/css("width:100%;&.", k, "-multiline{.k-ellipsis-wrapper{white-space:normal;display:-webkit-box;-webkit-line-clamp:", maxLines, ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-clamp:", maxLines, ";box-orient:vertical;}}");
10
10
  });
@@ -46,7 +46,7 @@ setDefault(function () {
46
46
  makeFormStyles == null || makeFormStyles.clearCache();
47
47
  });
48
48
  export var makeItemStyles = cache(function makeItemStyles(k) {
49
- return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
49
+ return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;min-width:0;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
50
50
  });
51
51
  export var makeFormStyles = cache(function makeFormStyles(k) {
52
52
  var _context;
@@ -3,14 +3,12 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
3
3
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
4
4
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
5
5
  import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
6
- import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
6
+ import { mount, dispatchEvent, wait } from '../../test/utils';
7
7
  import BasicDemo from '~/components/scrollSelect/demos/basic';
8
8
  import { ScrollSelect } from './';
9
9
  import { Component } from 'intact-vue-next';
10
10
  describe('ScrollSelect', function () {
11
- afterEach(function () {
12
- return unmount();
13
- });
11
+ // afterEach(() => unmount());
14
12
  it('should select by scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
15
13
  var _mount, instance, element;
16
14
  return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -18,14 +16,14 @@ describe('ScrollSelect', function () {
18
16
  case 0:
19
17
  _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1]; // scroll
20
18
  dispatchEvent(element.firstElementChild, 'wheel', {
21
- deltaY: 1
19
+ deltaY: 30
22
20
  });
23
21
  _context.next = 4;
24
22
  return wait(100);
25
23
  case 4:
26
24
  expect(instance.get('value')).to.eql(1);
27
25
  dispatchEvent(element.firstElementChild, 'wheel', {
28
- deltaY: -1
26
+ deltaY: -30
29
27
  });
30
28
  _context.next = 8;
31
29
  return wait(100);
@@ -21,11 +21,11 @@ export function useMouseEvents(translate, list) {
21
21
  deltaY = meta.deltaY;
22
22
  },
23
23
  onMove: function onMove(e) {
24
- var deltaY = e.clientY - y;
24
+ var deltaY = (e.clientY - y) * 0.8;
25
25
  dragged = !!deltaY;
26
26
  y = e.clientY;
27
27
  var _deltaY = y - initY;
28
- var offsetIndex = Math.floor(Math.abs(_deltaY) / itemHeight);
28
+ var offsetIndex = Math.floor(Math.abs(_deltaY) / itemHeight * 1.2);
29
29
  if (offsetIndex) {
30
30
  if (_deltaY < 0) {
31
31
  offsetIndex = -offsetIndex;
@@ -60,24 +60,36 @@ export function useMouseEvents(translate, list) {
60
60
  function onWheel(e) {
61
61
  e.preventDefault();
62
62
  itemHeight = getItemHeight();
63
- if (e.deltaY > 0) {
64
- // down
65
- setByRelativeIndex(1, null, true);
66
- } else {
67
- setByRelativeIndex(-1, null, true);
63
+ var threshold = itemHeight * 0.6;
64
+ deltaY = (deltaY || 0) + e.deltaY;
65
+ if (Math.abs(deltaY) >= threshold) {
66
+ if (deltaY > 0) {
67
+ setByRelativeIndex(1, null, true);
68
+ } else {
69
+ setByRelativeIndex(-1, null, true);
70
+ }
71
+ deltaY = 0;
68
72
  }
69
73
  }
70
74
  // throttle onWheel
71
- var _onWheel = throttle(onWheel, 0, function (e) {
75
+ var _onWheel = throttle(onWheel, 50, function (e) {
72
76
  return e.preventDefault();
73
77
  });
74
78
  function onClick(item, index) {
75
- // if _dragged, do not trigger click event, #123
79
+ var _context2;
80
+ // if dragged, do not trigger click event
76
81
  if (dragged) return;
77
82
  var _instance$get = instance.get(),
78
83
  count = _instance$get.count;
79
84
  var half = Math.floor(count / 2);
80
85
  var itemHeight = getItemHeight();
86
+ var currentIndex = _findIndexInstanceProperty(_context2 = list.data.value).call(_context2, function (v) {
87
+ return v.value === list.value.value;
88
+ });
89
+ var targetOffset = index - half;
90
+ if (currentIndex + targetOffset < 0 || currentIndex + targetOffset >= list.data.value.length) {
91
+ return;
92
+ }
81
93
  translate.set(translate.value - itemHeight * (index - half));
82
94
  marginTop.set(marginTop.value + itemHeight * (index - half));
83
95
  list.setValue(item.value, true);
@@ -44,7 +44,8 @@ export default function ($props, $blocks, $__proto__) {
44
44
  position = _this$get.position,
45
45
  flat = _flatInstanceProperty(_this$get),
46
46
  nowrap = _this$get.nowrap,
47
- draggable = _this$get.draggable;
47
+ draggable = _this$get.draggable,
48
+ range = _this$get.range;
48
49
  var k = this.config.k;
49
50
  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-nowrap"] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles(k)] = true, _classNameObj);
50
51
  var placeholder = this.getPlaceholder();
@@ -122,7 +123,8 @@ export default function ($props, $blocks, $__proto__) {
122
123
  'key': 'input',
123
124
  'readonly': !show,
124
125
  'waveDisabled': true,
125
- 'flat': flat
126
+ 'flat': flat,
127
+ 'ev-click': $props.onClick
126
128
  }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, _$cn(k + "-select-placeholder c-ellipsis"), null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
127
129
  return label;
128
130
  }, __$blocks['value'] = function ($super, data) {