@king-design/vue 3.6.0-beta.0 → 3.6.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 (94) hide show
  1. package/__tests__/__snapshots__/Vue Next Demos.md +115 -51
  2. package/__tests__/components/editable.spec.ts +1 -1
  3. package/__tests__/components/misc.spec.ts +93 -0
  4. package/__tests__/components/table.spec.ts +1 -0
  5. package/components/cascader/index.spec.js +18 -19
  6. package/components/copy/index.spec.js +14 -31
  7. package/components/datepicker/basepicker.d.ts +6 -27
  8. package/components/datepicker/basepicker.js +23 -268
  9. package/components/datepicker/calendar.d.ts +4 -2
  10. package/components/datepicker/dayjs.d.ts +2 -13
  11. package/components/datepicker/helpers.d.ts +3 -2
  12. package/components/datepicker/helpers.js +2 -3
  13. package/components/datepicker/index.d.ts +21 -29
  14. package/components/datepicker/index.js +22 -32
  15. package/components/datepicker/index.spec.js +1277 -484
  16. package/components/datepicker/index.vdt.js +39 -38
  17. package/components/datepicker/shortcuts.d.ts +1 -1
  18. package/components/datepicker/styles.d.ts +7 -2
  19. package/components/datepicker/styles.js +10 -15
  20. package/components/datepicker/useConfirm.d.ts +6 -0
  21. package/components/datepicker/useConfirm.js +65 -0
  22. package/components/datepicker/useDisabled.d.ts +5 -3
  23. package/components/datepicker/useDisabled.js +22 -27
  24. package/components/datepicker/useFormats.d.ts +2 -2
  25. package/components/datepicker/useFormats.js +6 -2
  26. package/components/datepicker/useHighlight.d.ts +14 -0
  27. package/components/datepicker/useHighlight.js +60 -0
  28. package/components/datepicker/useKeyboards.js +2 -1
  29. package/components/datepicker/useMergeRange.d.ts +1 -1
  30. package/components/datepicker/useMergeRange.js +11 -16
  31. package/components/datepicker/useMonths.js +5 -3
  32. package/components/datepicker/usePanel.d.ts +1 -10
  33. package/components/datepicker/usePanel.js +19 -32
  34. package/components/datepicker/useShowDate.d.ts +1 -1
  35. package/components/datepicker/useShowDate.js +15 -40
  36. package/components/datepicker/useStatus.js +33 -16
  37. package/components/datepicker/useValue.d.ts +11 -6
  38. package/components/datepicker/useValue.js +49 -69
  39. package/components/datepicker/useValueBase.d.ts +28 -0
  40. package/components/datepicker/useValueBase.js +280 -0
  41. package/components/datepicker/useYears.js +6 -3
  42. package/components/dropdown/dropdown.d.ts +1 -0
  43. package/components/dropdown/dropdown.js +7 -4
  44. package/components/form/form.d.ts +1 -0
  45. package/components/form/form.js +7 -0
  46. package/components/form/index.spec.js +10 -8
  47. package/components/input/index.d.ts +2 -0
  48. package/components/input/index.js +6 -0
  49. package/components/input/index.spec.js +45 -0
  50. package/components/input/index.vdt.js +4 -3
  51. package/components/input/useAutoWidth.d.ts +2 -0
  52. package/components/input/useAutoWidth.js +19 -1
  53. package/components/menu/index.spec.js +28 -0
  54. package/components/menu/styles.js +2 -2
  55. package/components/scrollSelect/useMouseEvents.js +5 -4
  56. package/components/select/base.d.ts +1 -1
  57. package/components/select/base.js +3 -2
  58. package/components/select/base.vdt.js +4 -3
  59. package/components/select/index.spec.js +346 -218
  60. package/components/select/menu.js +1 -1
  61. package/components/select/option.js +2 -1
  62. package/components/select/select.js +2 -1
  63. package/components/select/styles.d.ts +79 -0
  64. package/components/select/styles.js +1 -0
  65. package/components/select/useCard.d.ts +4 -3
  66. package/components/select/useCard.js +15 -4
  67. package/components/select/useInput.d.ts +1 -1
  68. package/components/select/useInput.js +4 -4
  69. package/components/spinner/index.spec.js +82 -44
  70. package/components/spinner/useValue.js +2 -1
  71. package/components/table/index.spec.js +84 -6
  72. package/components/table/useStickyHeader.js +1 -1
  73. package/components/timepicker/index.spec.js +298 -128
  74. package/components/timepicker/panelPicker.d.ts +21 -16
  75. package/components/timepicker/panelPicker.js +7 -4
  76. package/components/timepicker/panelPicker.vdt.js +5 -9
  77. package/components/timepicker/selectPicker.d.ts +4 -3
  78. package/components/timepicker/styles.js +1 -1
  79. package/components/timepicker/useConfirm.d.ts +6 -0
  80. package/components/timepicker/useConfirm.js +19 -0
  81. package/components/timepicker/useDefaultValue.d.ts +4 -0
  82. package/components/timepicker/useDefaultValue.js +27 -0
  83. package/components/timepicker/useDisabled.d.ts +6 -3
  84. package/components/timepicker/useDisabled.js +13 -4
  85. package/components/timepicker/useFormats.d.ts +1 -1
  86. package/components/timepicker/useValue.d.ts +13 -8
  87. package/components/timepicker/useValue.js +14 -15
  88. package/components/tour/index.spec.js +1 -1
  89. package/index.d.ts +2 -2
  90. package/index.js +2 -2
  91. package/package.json +2 -2
  92. package/yarn-error.log +44 -43
  93. package/components/datepicker/usePosition.d.ts +0 -10
  94. package/components/datepicker/usePosition.js +0 -166
@@ -35,7 +35,7 @@ describe('Editable', () => {
35
35
  container.querySelector<HTMLDivElement>('.k-icon')!.click();
36
36
  await wait();
37
37
 
38
- const input = container.querySelector('.k-input textarea') as HTMLTextAreaElement;
38
+ const input = container.querySelector('.k-input-inner') as HTMLInputElement;
39
39
  expect(input.selectionStart).to.eql(0);
40
40
  expect(input.selectionEnd).to.eql(1);
41
41
 
@@ -0,0 +1,93 @@
1
+ import {createApp, render} from 'vue';
2
+ import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
3
+ import {Table, TableColumn, Input, Drawer, Button, Form, FormItem} from '../../';
4
+
5
+ describe('Misc', () => {
6
+ it('test', async () => {
7
+ const container = document.createElement('div');
8
+ document.body.appendChild(container);
9
+ const vue = createApp({
10
+ template: `
11
+ <div>
12
+ <h1>King Design Demo</h1>
13
+ <Button @click="handleCreate">新增</Button>
14
+ <Button @click="handleEdit">更新</Button>
15
+ <Button @click="handleView">查看</Button>
16
+
17
+ <Drawer v-model="state.showDrawer" :title="state.drawerTitle">
18
+ <Form labelWidth="200" starOnRequired>
19
+ <FormItem
20
+ label="需求名称:"
21
+ :value="brachItem.name"
22
+ :rules="{ required: true }"
23
+ >
24
+ <span v-if="state.mode === 'view'">{{ brachItem.name }}</span>
25
+ <Input v-else v-model="brachItem.name" />
26
+ </FormItem>
27
+ </Form>
28
+ <template v-slot:footer>
29
+ <div class="float-right" v-if="state.mode !== 'view'">
30
+ <Button type="primary" style="margin-right: 10px">确定</Button>
31
+ <Button @click="state.showDrawer = false">取消</Button>
32
+ </div>
33
+ <div class="float-right" v-else>
34
+ <Button type="primary" @click="state.showDrawer = false">确定</Button>
35
+ </div>
36
+ </template>
37
+ </Drawer>
38
+ </div>
39
+ `,
40
+ components: {
41
+ Button, Drawer, Input, Form, FormItem
42
+ },
43
+ data() {
44
+ return {
45
+ state: {
46
+ mode: 'create',
47
+ showDrawer: false,
48
+ drawerTitle: '新建需求',
49
+ },
50
+ brachItem: {}
51
+ }
52
+ },
53
+ methods: {
54
+ handleCreate() {
55
+ let item = {
56
+ name: 'add_item',
57
+ };
58
+
59
+ this.brachItem.value = { ...item };
60
+ const state = this.state;
61
+ state.mode = 'create';
62
+ state.drawerTitle = '新建需求';
63
+ state.showDrawer = true;
64
+ },
65
+ handleEdit() {
66
+ let item = {
67
+ name: 'edit_item',
68
+ };
69
+
70
+ this.brachItem.value = { ...item };
71
+ const state = this.state;
72
+ state.mode = 'edit';
73
+ state.drawerTitle = '编辑需求';
74
+ state.showDrawer = true;
75
+ },
76
+ handleView() {
77
+ let item = {
78
+ name: 'edit_item',
79
+ };
80
+
81
+ this.brachItem.value = { ...item };
82
+ const state = this.state;
83
+ state.mode = 'view';
84
+ state.drawerTitle = '查看需求';
85
+ state.showDrawer = true;
86
+ }
87
+ }
88
+ }).mount(container);
89
+
90
+ render(null, container);
91
+ document.body.removeChild(container);
92
+ });
93
+ });
@@ -43,6 +43,7 @@ describe('Table', () => {
43
43
  dispatchEvent(input, 'focus');
44
44
  input.value = 'a';
45
45
  dispatchEvent(input, 'input')
46
+ await wait();
46
47
  dispatchEvent(input, 'blur');
47
48
 
48
49
  await wait();
@@ -160,7 +160,7 @@ describe('Cascader', function () {
160
160
  }, _callee5);
161
161
  })));
162
162
  it('filter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
163
- var _mount5, instance, element, input, dropdown, dropdown1, _getElements2, _dropdown1, _dropdown2, _dropdown3;
163
+ var _mount5, instance, element, input, dropdown1, _getElements2, _dropdown1, _dropdown2, _dropdown3;
164
164
  return _regeneratorRuntime.wrap(function _callee6$(_context6) {
165
165
  while (1) switch (_context6.prev = _context6.next) {
166
166
  case 0:
@@ -170,53 +170,52 @@ describe('Cascader', function () {
170
170
  _context6.next = 5;
171
171
  return wait();
172
172
  case 5:
173
+ // FIXME: maybe we should show no-data layer
173
174
  // should show layer when input empty string
174
- input.value = ' ';
175
+ // input.value = ' ';
176
+ // dispatchEvent(input, 'input');
177
+ // await wait();
178
+ // const dropdown = getElement('.k-cascader-menu')!;
179
+ // expect(dropdown.innerHTML).to.matchSnapshot();
180
+ // expect(dropdown.innerText).to.eql('北京\n湖南');
181
+ input.value = '长沙';
175
182
  dispatchEvent(input, 'input');
176
183
  _context6.next = 9;
177
184
  return wait();
178
185
  case 9:
179
- dropdown = getElement('.k-cascader-menu');
180
- expect(dropdown.innerHTML).to.matchSnapshot();
181
- expect(dropdown.innerText).to.eql('北京\n湖南');
182
- input.value = '长沙';
183
- dispatchEvent(input, 'input');
184
- _context6.next = 16;
185
- return wait();
186
- case 16:
187
186
  dropdown1 = getElement('.k-cascader-filter');
188
187
  expect(dropdown1.innerHTML).to.matchSnapshot();
189
188
  expect(dropdown1.innerText).to.eql('湖南 / 长沙市 / 岳麓区');
190
189
  // should show no-data layer
191
190
  input.value = 'xxx';
192
191
  dispatchEvent(input, 'input');
193
- _context6.next = 23;
192
+ _context6.next = 16;
194
193
  return wait();
195
- case 23:
194
+ case 16:
196
195
  expect(dropdown1.innerHTML).to.matchSnapshot();
197
196
  expect(dropdown1.innerText).to.eql('无匹配数据');
198
197
  input.value = '岳阳';
199
198
  dispatchEvent(input, 'input');
200
- _context6.next = 29;
199
+ _context6.next = 22;
201
200
  return wait();
202
- case 29:
201
+ case 22:
203
202
  expect(dropdown1.innerHTML).to.matchSnapshot();
204
203
  expect(dropdown1.childElementCount).to.eql(2);
205
204
  dropdown1.querySelector('.k-dropdown-item').click();
206
- _context6.next = 34;
205
+ _context6.next = 27;
207
206
  return wait();
208
- case 34:
207
+ case 27:
209
208
  expect(instance.get('value')).to.eql(['hunan', 'yueyang', 'yueyanglou']);
210
209
  // show again to test the position
211
210
  input.click();
212
- _context6.next = 38;
211
+ _context6.next = 31;
213
212
  return wait();
214
- case 38:
213
+ case 31:
215
214
  _getElements2 = getElements('.k-cascader-menu'), _dropdown1 = _getElements2[0], _dropdown2 = _getElements2[1], _dropdown3 = _getElements2[2];
216
215
  expect(_dropdown1.style.top).not.eql('0px');
217
216
  expect(_dropdown2.style.top).not.eql('0px');
218
217
  expect(_dropdown3.style.top).not.eql('0px');
219
- case 42:
218
+ case 35:
220
219
  case "end":
221
220
  return _context6.stop();
222
221
  }
@@ -20,36 +20,30 @@ describe('Copy', function () {
20
20
  }, _callee);
21
21
  })));
22
22
  it('should copy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
23
- var _mount, instance, element, text;
23
+ var spy, _mount, instance, element;
24
24
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
25
25
  while (1) switch (_context2.prev = _context2.next) {
26
26
  case 0:
27
+ spy = sinon.spy(navigator.clipboard, 'writeText');
27
28
  _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
28
29
  element.click();
29
- _context2.prev = 2;
30
30
  _context2.next = 5;
31
- return navigator.clipboard.readText();
31
+ return wait();
32
32
  case 5:
33
- text = _context2.sent;
34
- expect(text).to.eql('Hello King Desgin!');
35
- _context2.next = 12;
36
- break;
37
- case 9:
38
- _context2.prev = 9;
39
- _context2.t0 = _context2["catch"](2);
40
- // Read permisson denied
41
- console.log(_context2.t0);
42
- case 12:
33
+ expect(spy.calledWith('Hello King Desgin!')).to.be.true;
34
+ spy.restore();
35
+ case 7:
43
36
  case "end":
44
37
  return _context2.stop();
45
38
  }
46
- }, _callee2, null, [[2, 9]]);
39
+ }, _callee2);
47
40
  })));
48
41
  it('wrap copy with tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
49
- var Demo, _mount2, instance, element, text;
42
+ var spy, Demo, _mount2, instance, element;
50
43
  return _regeneratorRuntime.wrap(function _callee3$(_context4) {
51
44
  while (1) switch (_context4.prev = _context4.next) {
52
45
  case 0:
46
+ spy = sinon.spy(navigator.clipboard, 'writeText');
53
47
  Demo = /*#__PURE__*/function (_Component) {
54
48
  _inheritsLoose(Demo, _Component);
55
49
  function Demo() {
@@ -68,26 +62,15 @@ describe('Copy', function () {
68
62
  Demo.template = "\n const { Tooltip, Copy } = this;\n <Tooltip content=\"test\">\n <Copy text=\"test\" />\n </Tooltip>\n ";
69
63
  _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
70
64
  element.click();
71
- _context4.next = 6;
65
+ _context4.next = 7;
72
66
  return wait();
73
- case 6:
74
- _context4.prev = 6;
75
- _context4.next = 9;
76
- return navigator.clipboard.readText();
67
+ case 7:
68
+ expect(spy.calledWith('test')).to.be.true;
69
+ spy.restore();
77
70
  case 9:
78
- text = _context4.sent;
79
- expect(text).to.eql('test');
80
- _context4.next = 16;
81
- break;
82
- case 13:
83
- _context4.prev = 13;
84
- _context4.t0 = _context4["catch"](6);
85
- // Read permisson denied
86
- console.log(_context4.t0);
87
- case 16:
88
71
  case "end":
89
72
  return _context4.stop();
90
73
  }
91
- }, _callee3, null, [[6, 13]]);
74
+ }, _callee3);
92
75
  })));
93
76
  });
@@ -2,20 +2,12 @@
2
2
  * The base hook for handling value of Datepicker and Timepicker
3
3
  */
4
4
  import { TypeDefs } from 'intact-vue-next';
5
- import { State } from '../../hooks/useState';
6
- import { Dayjs, OpUnitType, QUnitType } from './dayjs';
5
+ import { Dayjs } from './dayjs';
7
6
  import type { useFormats } from './useFormats';
8
- import type { useDisabled } from './useDisabled';
9
- import { PanelFlags, usePanel } from './usePanel';
7
+ import { usePanel } from './usePanel';
10
8
  import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
11
9
  import type { Events } from '../types';
12
- export type StateValueRange = [Dayjs, Dayjs?];
13
- export type StateValueItem = Dayjs | StateValueRange;
14
- export type StateValue = StateValueItem[];
15
- export type StringValue = string | string[] | [string, string] | [string, string][];
16
- export type DayjsValueRange = [Dayjs, Dayjs];
17
- export type DayjsValueItem = Dayjs | DayjsValueRange;
18
- export type DayjsValue = DayjsValueItem[];
10
+ import type { useValueBase, StateValueRange, Value } from './useValueBase';
19
11
  export interface BasePickerProps<V extends Value = Value, Multipe extends boolean = boolean, Range extends boolean = boolean> extends BaseSelectProps<V | [V, V], Multipe> {
20
12
  value?: Multipe extends true ? Range extends true ? [
21
13
  V,
@@ -33,29 +25,16 @@ export interface BasePickerProps<V extends Value = Value, Multipe extends boolea
33
25
  disabledDate?: (v: Dayjs) => boolean;
34
26
  }
35
27
  export interface BasePickerEvents extends BaseSelectEvents {
36
- selecting: [StateValueRange];
37
- togglePosition: [];
28
+ selecting: [StateValueRange, boolean];
38
29
  }
39
30
  export interface BasePickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> {
40
31
  }
41
- export type Value = string | Date | number | Dayjs;
42
32
  export declare abstract class BasePicker<T extends BasePickerProps = BasePickerProps, E extends BasePickerEvents = BasePickerEvents, B extends BasePickerBlocks<any> = BasePickerBlocks<any>> extends BaseSelect<T, E, B> {
43
33
  static typeDefs: Required<TypeDefs<BasePickerProps<Value, boolean, boolean>>>;
44
34
  static defaults: () => Partial<BasePickerProps<any, boolean, boolean>>;
45
35
  static events: Events<BasePickerEvents>;
46
- abstract value: ReturnType<typeof useValue>;
36
+ abstract value: ReturnType<typeof useValueBase>;
47
37
  abstract formats: ReturnType<typeof useFormats>;
48
38
  abstract panel: ReturnType<typeof usePanel>;
49
- resetKeywords(keywords: State<string>): void;
39
+ resetKeywords(silent?: boolean): void;
50
40
  }
51
- export declare function useValue({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType | QUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
52
- value: State<StateValue>;
53
- format: () => string | string[];
54
- onConfirm: () => void;
55
- onChangeTime: (date: Dayjs, flag: PanelFlags) => void;
56
- getTimeValue: (flag: PanelFlags) => Dayjs | null | undefined;
57
- setValue: (v: StateValueItem, fromInput: boolean) => void;
58
- convertToDayjs: (v: BasePickerProps<Value>['value']) => DayjsValue;
59
- getDayjsValue: () => DayjsValue;
60
- setMoment: () => void;
61
- };
@@ -1,18 +1,8 @@
1
1
  import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
2
  import _extends from "@babel/runtime-corejs3/helpers/extends";
3
- import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
4
- import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
5
- import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
6
- import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
7
3
  import { __decorate } from "tslib";
8
- /**
9
- * The base hook for handling value of Datepicker and Timepicker
10
- */
11
- import { useInstance } from 'intact-vue-next';
12
- import { useState, watchState } from '../../hooks/useState';
13
4
  import dayjs from './dayjs';
14
- import { findValueIndex } from './helpers';
15
- import { isEqualArray, last, bind } from '../utils';
5
+ import { last, bind } from '../utils';
16
6
  import { BaseSelect } from '../select/base';
17
7
  var typeDefs = _extends({}, BaseSelect.typeDefs, {
18
8
  value: [String, Array, Date, Number, dayjs],
@@ -30,8 +20,7 @@ var defaults = function defaults() {
30
20
  });
31
21
  };
32
22
  var events = _extends({}, BaseSelect.events, {
33
- selecting: true,
34
- togglePosition: true
23
+ selecting: true
35
24
  });
36
25
  export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
37
26
  _inheritsLoose(BasePicker, _BaseSelect);
@@ -39,264 +28,30 @@ export var BasePicker = /*#__PURE__*/function (_BaseSelect) {
39
28
  return _BaseSelect.apply(this, arguments) || this;
40
29
  }
41
30
  var _proto = BasePicker.prototype;
42
- _proto.resetKeywords = function resetKeywords(keywords) {
43
- var _this$get = this.get(),
44
- multiple = _this$get.multiple,
45
- range = _this$get.range;
46
- var dayjsValue = this.value.getDayjsValue();
47
- var getShowString = this.formats.getShowString;
48
- var value = last(dayjsValue);
49
- keywords.set(multiple ? '' : !range ? value ? getShowString(value) : '' : value ? [value[0] ? getShowString(value[0]) : '', value[1] ? getShowString(value[1]) : ''].join(' ~ ') : '');
31
+ _proto.resetKeywords = function resetKeywords(silent) {
32
+ if (silent === void 0) {
33
+ silent = false;
34
+ }
35
+ // const {multiple} = this.get();
36
+ // const dayjsValue = this.value.getDayjsValue();
37
+ var value = last(this.value.value.value);
38
+ var keywords = this.input.keywords;
39
+ var _keywords = '';
40
+ if (value && !this.value.allValuesUpdatedInMultipleMode()) {
41
+ _keywords = this.value.formatSingleValue(value);
42
+ }
43
+ if (!silent) {
44
+ keywords.set(_keywords);
45
+ } else {
46
+ // update keywords will update value, because it is been watched in useValueBase
47
+ // silent in this case to update keywords to show it in input
48
+ keywords.value = _keywords;
49
+ this.forceUpdate();
50
+ }
50
51
  };
51
52
  return BasePicker;
52
53
  }(BaseSelect);
53
54
  BasePicker.typeDefs = typeDefs;
54
55
  BasePicker.defaults = defaults;
55
56
  BasePicker.events = events;
56
- __decorate([bind], BasePicker.prototype, "resetKeywords", null);
57
- export function useValue(_ref, _ref2, panel, shouldUpdateValue, updateValueOnInput, getEqualType, updateStateValue) {
58
- var createDateByValueFormat = _ref.createDateByValueFormat,
59
- createDateByShowFormat = _ref.createDateByShowFormat,
60
- getShowString = _ref.getShowString,
61
- getValueString = _ref.getValueString;
62
- var isDisabled = _ref2.isDisabled,
63
- minDate = _ref2.minDate;
64
- // Normalize the value to multipe values, no matter it's multipe or not
65
- var value = useState([]);
66
- var instance = useInstance();
67
- var dayjsValue = [];
68
- instance.watch('value', function (newValue, oldValue) {
69
- if (isEqualArray(newValue, oldValue)) return;
70
- // 检查是否与当前 dayjsValue 对应的字符串相同,避免循环
71
- var currentValueStr = convertToValueString(dayjsValue);
72
- if (newValue === currentValueStr) {
73
- return;
74
- }
75
- // 只执行一次转换和更新逻辑
76
- var _value = convertToDayjs(newValue);
77
- dayjsValue = _value;
78
- updateStateValue(_value, value);
79
- instance.resetKeywords(instance.input.keywords);
80
- });
81
- watchState(instance.input.keywords, function (v) {
82
- var _instance$get = instance.get(),
83
- range = _instance$get.range,
84
- multiple = _instance$get.multiple;
85
- if (!multiple && v === '') return instance.set('value', null);
86
- if (range) {
87
- var _context;
88
- var _v$split$map = _mapInstanceProperty(_context = v.split(/\s*~\s*/)).call(_context, function (s) {
89
- return _trimInstanceProperty(s).call(s);
90
- }),
91
- start = _v$split$map[0],
92
- end = _v$split$map[1];
93
- if (start && end) {
94
- var startDate = createDateByShowFormat(start);
95
- if (!isValidDate(startDate)) {
96
- return;
97
- }
98
- var endDate = createDateByShowFormat(end);
99
- if (!isValidDate(endDate)) {
100
- return;
101
- }
102
- if (endDate.isAfter(startDate)) {
103
- updateValueOnInput([startDate, endDate]);
104
- } else {
105
- updateValueOnInput([endDate, startDate]);
106
- }
107
- }
108
- } else {
109
- var date = createDateByShowFormat(v);
110
- if (isValidDate(date)) {
111
- updateValueOnInput(date);
112
- }
113
- }
114
- });
115
- function convertToDayjs(v) {
116
- if (!v || Array.isArray(v) && !v.length) return [];
117
- var _instance$get2 = instance.get(),
118
- multiple = _instance$get2.multiple;
119
- if (!multiple) {
120
- v = [v];
121
- }
122
- return _mapInstanceProperty(v).call(v, function (value) {
123
- if (Array.isArray(value)) {
124
- // range
125
- return _mapInstanceProperty(value).call(value, createDateByValueFormat);
126
- }
127
- return createDateByValueFormat(value);
128
- });
129
- }
130
- function convertToValueString(v) {
131
- var results = _mapInstanceProperty(v).call(v, function (value) {
132
- if (Array.isArray(value)) {
133
- return _mapInstanceProperty(value).call(value, getValueString);
134
- }
135
- return getValueString(value);
136
- });
137
- if (!instance.get('multiple')) {
138
- return results[0] || null;
139
- }
140
- return results;
141
- }
142
- function format() {
143
- var results = _mapInstanceProperty(dayjsValue).call(dayjsValue, function (value) {
144
- if (Array.isArray(value)) {
145
- return _mapInstanceProperty(value).call(value, getShowString).join(' ~ ');
146
- }
147
- return getShowString(value);
148
- });
149
- if (!instance.get('multiple')) {
150
- return results[0];
151
- }
152
- return results;
153
- }
154
- function setSingleDate(v, fromInput) {
155
- value.set([v]);
156
- if (fromInput || shouldUpdateValue(v)) {
157
- updateValue();
158
- }
159
- }
160
- function addMultipeDate(v, fromInput) {
161
- var _instance$get3 = instance.get(),
162
- range = _instance$get3.range;
163
- var _value = value.value;
164
- _value = !_value ? [] : _sliceInstanceProperty(_value).call(_value);
165
- if (range && v.length === 2) {
166
- // pop the last value firstly, if it only has the start date
167
- var lastValue = last(_value);
168
- if (lastValue && lastValue.length < 2) {
169
- _value.pop();
170
- }
171
- }
172
- var _shouldUpdateValue = true;
173
- if (fromInput || shouldUpdateValue(v)) {
174
- // if select the date/year/month, then toggle the value.
175
- // if from input, treat the value as the final value
176
- var index = findValueIndex(_value, v, getEqualType());
177
- if (index > -1) {
178
- _spliceInstanceProperty(_value).call(_value, index, 1);
179
- } else {
180
- _value.push(v);
181
- }
182
- } else {
183
- // select the datetime, only push the value,
184
- // and unique the array on click confrim button
185
- _value.push(v);
186
- _shouldUpdateValue = false;
187
- }
188
- value.set(_value);
189
- if (_shouldUpdateValue) {
190
- updateValue();
191
- }
192
- }
193
- function setValue(v, fromInput) {
194
- var multiple = instance.get('multiple');
195
- if (multiple) {
196
- addMultipeDate(v, fromInput);
197
- } else {
198
- setSingleDate(v, fromInput);
199
- }
200
- }
201
- function updateValue() {
202
- var _value = value.value;
203
- var valueStr = convertToValueString(_value);
204
- // 检查是否需要更新,避免循环调用
205
- if (instance.get('value') === valueStr) {
206
- return;
207
- }
208
- // 在设置 value 之前先更新 dayjsValue
209
- dayjsValue = _value;
210
- instance.set('value', valueStr);
211
- instance.resetKeywords(instance.input.keywords);
212
- }
213
- function onConfirm() {
214
- var lastValue = last(instance.value.value.value);
215
- var _instance$get4 = instance.get(),
216
- multiple = _instance$get4.multiple,
217
- range = _instance$get4.range;
218
- if (!multiple) {
219
- if (range) {
220
- // 范围选择:需要开始和结束时间都选择完才关闭
221
- if (lastValue.length === 2) {
222
- instance.hide();
223
- }
224
- instance.trigger('togglePosition');
225
- } else {
226
- // 单选:选择完时间就关闭
227
- if (lastValue) {
228
- instance.hide();
229
- }
230
- }
231
- } else {
232
- unique();
233
- panel.reset();
234
- }
235
- updateValue();
236
- }
237
- function setMoment() {
238
- var now = dayjs();
239
- setValue(now, true);
240
- instance.hide();
241
- }
242
- function unique() {
243
- var _value = value.value;
244
- var map = {};
245
- var results = [];
246
- _value.forEach(function (value) {
247
- var key;
248
- if (Array.isArray(value)) {
249
- key = _mapInstanceProperty(value).call(value, getValueString).join(' ~ ');
250
- } else {
251
- key = getValueString(value);
252
- }
253
- if (!map[key]) {
254
- map[key] = true;
255
- results.push(value);
256
- }
257
- });
258
- value.set(results);
259
- }
260
- function isValidDate(date) {
261
- return date.isValid() && !isDisabled(date, getEqualType());
262
- }
263
- function onChangeTime(date, flag) {
264
- var _context2;
265
- var _instance$get5 = instance.get(),
266
- range = _instance$get5.range;
267
- var values = _sliceInstanceProperty(_context2 = value.value).call(_context2);
268
- var lastIndex = values.length - 1;
269
- var _value = date;
270
- if (range) {
271
- var _context3;
272
- _value = _sliceInstanceProperty(_context3 = values[lastIndex]).call(_context3);
273
- _value[flag] = date;
274
- instance.trigger('selecting', _value);
275
- }
276
- values[lastIndex] = _value;
277
- value.set(values);
278
- }
279
- function getTimeValue(flag) {
280
- var _value = value.value;
281
- if (!_value.length) return null;
282
- var _instance$get6 = instance.get(),
283
- range = _instance$get6.range,
284
- min = _instance$get6.min;
285
- var lastValue = last(_value);
286
- return range ? lastValue[flag] : lastValue;
287
- }
288
- function getDayjsValue() {
289
- return dayjsValue;
290
- }
291
- return {
292
- value: value,
293
- format: format,
294
- onConfirm: onConfirm,
295
- onChangeTime: onChangeTime,
296
- getTimeValue: getTimeValue,
297
- setValue: setValue,
298
- convertToDayjs: convertToDayjs,
299
- getDayjsValue: getDayjsValue,
300
- setMoment: setMoment
301
- };
302
- }
57
+ __decorate([bind], BasePicker.prototype, "resetKeywords", null);
@@ -1,12 +1,14 @@
1
1
  import { Component } from 'intact-vue-next';
2
2
  import { Dayjs } from 'dayjs';
3
3
  import type { Datepicker } from './index';
4
- import { StateValue } from './basepicker';
4
+ import type { StateValue } from './useValueBase';
5
5
  import { PanelFlags } from './usePanel';
6
+ import { Position } from './useHighlight';
6
7
  export interface DatepickerCalendarProps {
7
8
  value: StateValue;
8
9
  type?: 'date' | 'year' | 'month' | 'week' | 'quarter';
9
10
  flag: PanelFlags;
11
+ highlightPosition: Position;
10
12
  }
11
13
  export interface DatepickerCalendarEvents {
12
14
  change: [Dayjs, PanelFlags];
@@ -20,7 +22,7 @@ export declare class DatepickerCalendar extends Component<DatepickerCalendarProp
20
22
  date: import("../../hooks/useState").State<Dayjs>;
21
23
  getDateLabel: () => {
22
24
  value: string;
23
- onClick: (e: import("../../hooks/useDocumentClick").IgnoreClickEvent) => void;
25
+ onClick(e: import("../../hooks/useDocumentClick").IgnoreClickEvent): void;
24
26
  }[];
25
27
  prevMonth: () => void;
26
28
  nextMonth: () => void;