@king-design/intact 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 (227) hide show
  1. package/components/breadcrumb/demos/separator.md +4 -4
  2. package/components/breadcrumb/index.vdt +1 -1
  3. package/components/breadcrumb/styles.ts +3 -2
  4. package/components/button/index.md +1 -0
  5. package/components/datepicker/basepicker.ts +60 -13
  6. package/components/datepicker/calendar.ts +5 -1
  7. package/components/datepicker/calendar.vdt +20 -6
  8. package/components/datepicker/dayjs.ts +22 -2
  9. package/components/datepicker/demos/multiple.md +0 -5
  10. package/components/datepicker/demos/nowrap.md +35 -0
  11. package/components/datepicker/demos/yearMonth.md +8 -2
  12. package/components/datepicker/helpers.ts +5 -5
  13. package/components/datepicker/index.md +3 -2
  14. package/components/datepicker/index.spec.ts +107 -90
  15. package/components/datepicker/index.ts +23 -5
  16. package/components/datepicker/index.vdt +34 -35
  17. package/components/datepicker/styles.ts +102 -3
  18. package/components/datepicker/useDisabled.ts +3 -3
  19. package/components/datepicker/useFormats.ts +2 -0
  20. package/components/datepicker/useMergeRange.ts +54 -0
  21. package/components/datepicker/usePosition.ts +169 -0
  22. package/components/datepicker/useQuarters.ts +47 -0
  23. package/components/datepicker/useShowDate.ts +42 -11
  24. package/components/datepicker/useValue.ts +35 -4
  25. package/components/datepicker/useWeeks.ts +58 -0
  26. package/components/dialog/useFixBody.ts +7 -64
  27. package/components/ellipsis/styles.ts +4 -0
  28. package/components/form/styles.ts +1 -0
  29. package/components/scrollSelect/index.spec.ts +3 -3
  30. package/components/scrollSelect/useMouseEvents.ts +23 -10
  31. package/components/select/base.vdt +2 -1
  32. package/components/select/demos/creatable.md +13 -0
  33. package/components/select/index.md +1 -0
  34. package/components/select/index.spec.ts +180 -0
  35. package/components/select/option.ts +9 -1
  36. package/components/select/select.ts +2 -0
  37. package/components/select/useFilterable.ts +1 -1
  38. package/components/select/useInput.ts +4 -2
  39. package/components/select/useSearchable.ts +2 -2
  40. package/components/table/table.vdt +3 -3
  41. package/components/timepicker/demos/step.md +1 -1
  42. package/components/timepicker/panelPicker.vdt +5 -1
  43. package/components/timepicker/styles.ts +0 -1
  44. package/components/tour/demos/basic.md +73 -0
  45. package/components/tour/demos/beforeChange.md +109 -0
  46. package/components/tour/demos/closable.md +70 -0
  47. package/components/tour/demos/custom.md +98 -0
  48. package/components/tour/demos/customText.md +94 -0
  49. package/components/tour/demos/declarative.md +72 -0
  50. package/components/tour/demos/events.md +101 -0
  51. package/components/tour/demos/maskClosable.md +76 -0
  52. package/components/tour/demos/notarget.md +59 -0
  53. package/components/tour/index.md +48 -0
  54. package/components/tour/index.spec.ts +259 -0
  55. package/components/tour/index.ts +2 -0
  56. package/components/tour/step.ts +55 -0
  57. package/components/tour/step.vdt +75 -0
  58. package/components/tour/styles.ts +283 -0
  59. package/components/tour/tour.ts +107 -0
  60. package/components/tour/tour.vdt +83 -0
  61. package/components/tour/useArrow.ts +46 -0
  62. package/components/tour/useFixBody.ts +22 -0
  63. package/components/tour/useHighlight.ts +36 -0
  64. package/components/tour/useMaskClosable.ts +26 -0
  65. package/components/tour/useNavigation.ts +46 -0
  66. package/components/tour/usePosition.ts +91 -0
  67. package/components/tour/useSteps.ts +80 -0
  68. package/components/tree/useChecked.ts +6 -4
  69. package/components/treeSelect/index.spec.ts +13 -1
  70. package/components/virtualList/useVirtualRows.ts +1 -1
  71. package/es/components/breadcrumb/index.vdt.js +2 -1
  72. package/es/components/breadcrumb/styles.js +5 -3
  73. package/es/components/datepicker/basepicker.d.ts +4 -2
  74. package/es/components/datepicker/basepicker.js +46 -13
  75. package/es/components/datepicker/calendar.d.ts +34 -6
  76. package/es/components/datepicker/calendar.js +4 -0
  77. package/es/components/datepicker/calendar.vdt.js +21 -5
  78. package/es/components/datepicker/dayjs.d.ts +13 -2
  79. package/es/components/datepicker/dayjs.js +6 -0
  80. package/es/components/datepicker/helpers.d.ts +5 -5
  81. package/es/components/datepicker/index.d.ts +17 -2
  82. package/es/components/datepicker/index.js +23 -5
  83. package/es/components/datepicker/index.spec.js +356 -355
  84. package/es/components/datepicker/index.vdt.js +25 -29
  85. package/es/components/datepicker/styles.d.ts +17 -0
  86. package/es/components/datepicker/styles.js +29 -2
  87. package/es/components/datepicker/useDisabled.d.ts +2 -2
  88. package/es/components/datepicker/useDisabled.js +1 -1
  89. package/es/components/datepicker/useFormats.js +3 -1
  90. package/es/components/datepicker/useMergeRange.d.ts +5 -0
  91. package/es/components/datepicker/useMergeRange.js +50 -0
  92. package/es/components/datepicker/usePosition.d.ts +10 -0
  93. package/es/components/datepicker/usePosition.js +166 -0
  94. package/es/components/datepicker/useQuarters.d.ts +15 -0
  95. package/es/components/datepicker/useQuarters.js +36 -0
  96. package/es/components/datepicker/useShowDate.d.ts +1 -1
  97. package/es/components/datepicker/useShowDate.js +42 -9
  98. package/es/components/datepicker/useStatus.d.ts +1 -1
  99. package/es/components/datepicker/useValue.d.ts +1 -0
  100. package/es/components/datepicker/useValue.js +26 -2
  101. package/es/components/datepicker/useWeeks.d.ts +19 -0
  102. package/es/components/datepicker/useWeeks.js +48 -0
  103. package/es/components/dialog/useFixBody.js +6 -58
  104. package/es/components/ellipsis/styles.js +1 -1
  105. package/es/components/form/styles.js +1 -1
  106. package/es/components/scrollSelect/index.spec.js +4 -6
  107. package/es/components/scrollSelect/useMouseEvents.js +21 -9
  108. package/es/components/select/base.vdt.js +4 -2
  109. package/es/components/select/index.spec.js +269 -42
  110. package/es/components/select/option.d.ts +1 -0
  111. package/es/components/select/option.js +9 -2
  112. package/es/components/select/select.d.ts +1 -0
  113. package/es/components/select/select.js +2 -1
  114. package/es/components/select/useFilterable.js +2 -1
  115. package/es/components/select/useInput.js +5 -2
  116. package/es/components/select/useSearchable.js +1 -0
  117. package/es/components/table/table.vdt.js +4 -2
  118. package/es/components/timepicker/panelPicker.d.ts +2 -1
  119. package/es/components/timepicker/panelPicker.vdt.js +12 -4
  120. package/es/components/timepicker/selectPicker.d.ts +1 -1
  121. package/es/components/timepicker/styles.js +1 -1
  122. package/es/components/timepicker/useDisabled.d.ts +1 -1
  123. package/es/components/timepicker/useValue.d.ts +1 -0
  124. package/es/components/tour/index.d.ts +2 -0
  125. package/es/components/tour/index.js +2 -0
  126. package/es/components/tour/index.spec.d.ts +1 -0
  127. package/es/components/tour/index.spec.js +356 -0
  128. package/es/components/tour/step.d.ts +23 -0
  129. package/es/components/tour/step.js +46 -0
  130. package/es/components/tour/step.vdt.js +74 -0
  131. package/es/components/tour/styles.d.ts +7 -0
  132. package/es/components/tour/styles.js +84 -0
  133. package/es/components/tour/tour.d.ts +73 -0
  134. package/es/components/tour/tour.js +70 -0
  135. package/es/components/tour/tour.vdt.js +66 -0
  136. package/es/components/tour/useArrow.d.ts +4 -0
  137. package/es/components/tour/useArrow.js +40 -0
  138. package/es/components/tour/useFixBody.d.ts +4 -0
  139. package/es/components/tour/useFixBody.js +17 -0
  140. package/es/components/tour/useHighlight.d.ts +4 -0
  141. package/es/components/tour/useHighlight.js +31 -0
  142. package/es/components/tour/useMaskClosable.d.ts +1 -0
  143. package/es/components/tour/useMaskClosable.js +25 -0
  144. package/es/components/tour/useNavigation.d.ts +5 -0
  145. package/es/components/tour/useNavigation.js +103 -0
  146. package/es/components/tour/usePosition.d.ts +6 -0
  147. package/es/components/tour/usePosition.js +93 -0
  148. package/es/components/tour/useSteps.d.ts +6 -0
  149. package/es/components/tour/useSteps.js +68 -0
  150. package/es/components/tree/useChecked.js +6 -4
  151. package/es/components/treeSelect/index.spec.js +20 -5
  152. package/es/components/virtualList/useVirtualRows.js +1 -1
  153. package/es/hooks/useDocumentClick.js +3 -3
  154. package/es/hooks/useFixBody.d.ts +11 -0
  155. package/es/hooks/useFixBody.js +72 -0
  156. package/es/index.d.ts +3 -2
  157. package/es/index.js +3 -2
  158. package/es/site/data/components/breadcrumb/demos/separator/react.js +7 -5
  159. package/es/site/data/components/datepicker/demos/multiple/index.d.ts +0 -1
  160. package/es/site/data/components/datepicker/demos/multiple/index.js +1 -2
  161. package/es/site/data/components/datepicker/demos/multiple/react.d.ts +0 -1
  162. package/es/site/data/components/datepicker/demos/multiple/react.js +2 -13
  163. package/es/site/data/components/datepicker/demos/nowrap/index.d.ts +10 -0
  164. package/es/site/data/components/datepicker/demos/nowrap/index.js +19 -0
  165. package/es/site/data/components/datepicker/demos/nowrap/react.d.ts +10 -0
  166. package/es/site/data/components/datepicker/demos/nowrap/react.js +49 -0
  167. package/es/site/data/components/datepicker/demos/yearMonth/index.d.ts +2 -0
  168. package/es/site/data/components/datepicker/demos/yearMonth/index.js +3 -1
  169. package/es/site/data/components/datepicker/demos/yearMonth/react.d.ts +2 -0
  170. package/es/site/data/components/datepicker/demos/yearMonth/react.js +21 -1
  171. package/es/site/data/components/select/demos/creatable/index.d.ts +1 -0
  172. package/es/site/data/components/select/demos/creatable/index.js +2 -1
  173. package/es/site/data/components/select/demos/creatable/react.d.ts +1 -0
  174. package/es/site/data/components/select/demos/creatable/react.js +31 -2
  175. package/es/site/data/components/select/demos/searchable/index.js +1 -1
  176. package/es/site/data/components/select/demos/searchable/react.js +1 -1
  177. package/es/site/data/components/tour/demos/basic/index.d.ts +17 -0
  178. package/es/site/data/components/tour/demos/basic/index.js +46 -0
  179. package/es/site/data/components/tour/demos/basic/react.d.ts +16 -0
  180. package/es/site/data/components/tour/demos/basic/react.js +82 -0
  181. package/es/site/data/components/tour/demos/beforeChange/index.d.ts +20 -0
  182. package/es/site/data/components/tour/demos/beforeChange/index.js +69 -0
  183. package/es/site/data/components/tour/demos/beforeChange/react.d.ts +19 -0
  184. package/es/site/data/components/tour/demos/beforeChange/react.js +129 -0
  185. package/es/site/data/components/tour/demos/closable/index.d.ts +18 -0
  186. package/es/site/data/components/tour/demos/closable/index.js +42 -0
  187. package/es/site/data/components/tour/demos/closable/react.d.ts +17 -0
  188. package/es/site/data/components/tour/demos/closable/react.js +85 -0
  189. package/es/site/data/components/tour/demos/custom/index.d.ts +11 -0
  190. package/es/site/data/components/tour/demos/custom/index.js +35 -0
  191. package/es/site/data/components/tour/demos/custom/react.d.ts +11 -0
  192. package/es/site/data/components/tour/demos/custom/react.js +108 -0
  193. package/es/site/data/components/tour/demos/customButtons/index.d.ts +33 -0
  194. package/es/site/data/components/tour/demos/customButtons/index.js +55 -0
  195. package/es/site/data/components/tour/demos/customButtons/react.d.ts +33 -0
  196. package/es/site/data/components/tour/demos/customButtons/react.js +99 -0
  197. package/es/site/data/components/tour/demos/customText/index.d.ts +20 -0
  198. package/es/site/data/components/tour/demos/customText/index.js +54 -0
  199. package/es/site/data/components/tour/demos/customText/react.d.ts +19 -0
  200. package/es/site/data/components/tour/demos/customText/react.js +95 -0
  201. package/es/site/data/components/tour/demos/declarative/index.d.ts +11 -0
  202. package/es/site/data/components/tour/demos/declarative/index.js +36 -0
  203. package/es/site/data/components/tour/demos/declarative/react.d.ts +10 -0
  204. package/es/site/data/components/tour/demos/declarative/react.js +80 -0
  205. package/es/site/data/components/tour/demos/events/index.d.ts +18 -0
  206. package/es/site/data/components/tour/demos/events/index.js +58 -0
  207. package/es/site/data/components/tour/demos/events/react.d.ts +18 -0
  208. package/es/site/data/components/tour/demos/events/react.js +101 -0
  209. package/es/site/data/components/tour/demos/maskClosable/index.d.ts +18 -0
  210. package/es/site/data/components/tour/demos/maskClosable/index.js +47 -0
  211. package/es/site/data/components/tour/demos/maskClosable/react.d.ts +17 -0
  212. package/es/site/data/components/tour/demos/maskClosable/react.js +95 -0
  213. package/es/site/data/components/tour/demos/notarget/index.d.ts +11 -0
  214. package/es/site/data/components/tour/demos/notarget/index.js +35 -0
  215. package/es/site/data/components/tour/demos/notarget/react.d.ts +10 -0
  216. package/es/site/data/components/tour/demos/notarget/react.js +61 -0
  217. package/es/site/data/components/tour/index.d.ts +57 -0
  218. package/es/site/data/components/tour/index.js +32 -0
  219. package/es/site/src/pages/resource/index.js +1 -1
  220. package/es/styles/fonts/iconfont.js +2 -1
  221. package/es/styles/global.js +2 -1
  222. package/hooks/useDocumentClick.ts +3 -3
  223. package/hooks/useFixBody.ts +87 -0
  224. package/index.ts +3 -2
  225. package/package.json +1 -1
  226. package/styles/fonts/iconfont.ts +2 -1
  227. package/styles/global.ts +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';
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';
3
- import { scrollbarWidth } from '../position';
1
+ import { useInstance } from 'intact';
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';
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) {