@king-design/vue 3.5.2 → 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.
- package/components/datepicker/basepicker.d.ts +4 -2
- package/components/datepicker/basepicker.js +46 -13
- package/components/datepicker/calendar.d.ts +34 -6
- package/components/datepicker/calendar.js +4 -0
- package/components/datepicker/calendar.vdt.js +21 -5
- package/components/datepicker/dayjs.d.ts +13 -2
- package/components/datepicker/dayjs.js +6 -0
- package/components/datepicker/helpers.d.ts +5 -5
- package/components/datepicker/index.d.ts +17 -2
- package/components/datepicker/index.js +23 -5
- package/components/datepicker/index.spec.js +356 -355
- package/components/datepicker/index.vdt.js +25 -29
- package/components/datepicker/styles.d.ts +17 -0
- package/components/datepicker/styles.js +29 -2
- package/components/datepicker/useDisabled.d.ts +2 -2
- package/components/datepicker/useDisabled.js +1 -1
- package/components/datepicker/useFormats.js +3 -1
- package/components/datepicker/useMergeRange.d.ts +5 -0
- package/components/datepicker/useMergeRange.js +50 -0
- package/components/datepicker/usePosition.d.ts +10 -0
- package/components/datepicker/usePosition.js +166 -0
- package/components/datepicker/useQuarters.d.ts +15 -0
- package/components/datepicker/useQuarters.js +36 -0
- package/components/datepicker/useShowDate.d.ts +1 -1
- package/components/datepicker/useShowDate.js +42 -9
- package/components/datepicker/useStatus.d.ts +1 -1
- package/components/datepicker/useValue.d.ts +1 -0
- package/components/datepicker/useValue.js +26 -2
- package/components/datepicker/useWeeks.d.ts +19 -0
- package/components/datepicker/useWeeks.js +48 -0
- package/components/dialog/useFixBody.js +6 -58
- package/components/ellipsis/styles.js +1 -1
- package/components/form/styles.js +1 -1
- package/components/scrollSelect/index.spec.js +4 -6
- package/components/scrollSelect/useMouseEvents.js +21 -9
- package/components/select/base.vdt.js +4 -2
- package/components/select/index.spec.js +235 -62
- package/components/select/option.d.ts +1 -0
- package/components/select/option.js +9 -2
- package/components/select/select.d.ts +1 -0
- package/components/select/select.js +2 -1
- package/components/select/useFilterable.js +2 -1
- package/components/select/useInput.js +5 -2
- package/components/select/useSearchable.js +1 -0
- package/components/timepicker/panelPicker.d.ts +2 -1
- package/components/timepicker/panelPicker.vdt.js +12 -4
- package/components/timepicker/selectPicker.d.ts +1 -1
- package/components/timepicker/styles.js +1 -1
- package/components/timepicker/useDisabled.d.ts +1 -1
- package/components/timepicker/useValue.d.ts +1 -0
- package/components/tour/index.d.ts +2 -0
- package/components/tour/index.js +2 -0
- package/components/tour/index.spec.d.ts +1 -0
- package/components/tour/index.spec.js +356 -0
- package/components/tour/step.d.ts +23 -0
- package/components/tour/step.js +46 -0
- package/components/tour/step.vdt.js +74 -0
- package/components/tour/styles.d.ts +7 -0
- package/components/tour/styles.js +84 -0
- package/components/tour/tour.d.ts +73 -0
- package/components/tour/tour.js +70 -0
- package/components/tour/tour.vdt.js +66 -0
- package/components/tour/useArrow.d.ts +4 -0
- package/components/tour/useArrow.js +40 -0
- package/components/tour/useFixBody.d.ts +4 -0
- package/components/tour/useFixBody.js +17 -0
- package/components/tour/useHighlight.d.ts +4 -0
- package/components/tour/useHighlight.js +31 -0
- package/components/tour/useMaskClosable.d.ts +1 -0
- package/components/tour/useMaskClosable.js +25 -0
- package/components/tour/useNavigation.d.ts +5 -0
- package/components/tour/useNavigation.js +103 -0
- package/components/tour/usePosition.d.ts +6 -0
- package/components/tour/usePosition.js +93 -0
- package/components/tour/useSteps.d.ts +6 -0
- package/components/tour/useSteps.js +68 -0
- package/hooks/useFixBody.d.ts +11 -0
- package/hooks/useFixBody.js +72 -0
- package/index.d.ts +3 -2
- package/index.js +3 -2
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
2
|
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
|
|
3
3
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
|
|
4
|
+
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
|
|
4
5
|
import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
|
|
5
6
|
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
|
|
6
7
|
import BasicDemo from '~/components/select/demos/basic';
|
|
@@ -369,50 +370,159 @@ describe('Select', function () {
|
|
|
369
370
|
}
|
|
370
371
|
}, _callee8);
|
|
371
372
|
})));
|
|
372
|
-
it('
|
|
373
|
-
var
|
|
373
|
+
it('keepKeywords', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
|
|
374
|
+
var KeepKeywordsDemo, _mount10, instance, element, input, dropdown, mondayOption;
|
|
374
375
|
return _regeneratorRuntime.wrap(function _callee9$(_context11) {
|
|
375
376
|
while (1) switch (_context11.prev = _context11.next) {
|
|
376
377
|
case 0:
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
378
|
+
// 创建一个测试组件,包含keepKeywords功能
|
|
379
|
+
KeepKeywordsDemo = /*#__PURE__*/function (_Component2) {
|
|
380
|
+
_inheritsLoose(KeepKeywordsDemo, _Component2);
|
|
381
|
+
function KeepKeywordsDemo() {
|
|
380
382
|
var _context10;
|
|
381
383
|
var _this2;
|
|
382
384
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
383
385
|
args[_key2] = arguments[_key2];
|
|
384
386
|
}
|
|
385
387
|
_this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
|
|
386
|
-
_this2.Tooltip = Tooltip;
|
|
387
388
|
_this2.Select = Select;
|
|
388
389
|
_this2.Option = Option;
|
|
389
390
|
return _this2;
|
|
390
391
|
}
|
|
392
|
+
KeepKeywordsDemo.defaults = function defaults() {
|
|
393
|
+
return {
|
|
394
|
+
days: []
|
|
395
|
+
};
|
|
396
|
+
};
|
|
397
|
+
return KeepKeywordsDemo;
|
|
398
|
+
}(Component);
|
|
399
|
+
KeepKeywordsDemo.template = "\n const {Select, Option} = this;\n <div>\n <Select v-model=\"days\" filterable multiple creatable keepKeywords>\n <Option value=\"Monday\">\u661F\u671F\u4E00</Option>\n <Option value=\"Tuesday\">\u661F\u671F\u4E8C</Option>\n <Option value=\"Wednesday\">\u661F\u671F\u4E09</Option>\n </Select>\n </div>\n ";
|
|
400
|
+
_mount10 = mount(KeepKeywordsDemo), instance = _mount10[0], element = _mount10[1];
|
|
401
|
+
input = element.querySelector('.k-input-inner'); // 1. 输入自定义选项 "custom1"
|
|
402
|
+
input.click();
|
|
403
|
+
_context11.next = 7;
|
|
404
|
+
return wait();
|
|
405
|
+
case 7:
|
|
406
|
+
input.value = 'custom1';
|
|
407
|
+
dispatchEvent(input, 'input');
|
|
408
|
+
_context11.next = 11;
|
|
409
|
+
return wait();
|
|
410
|
+
case 11:
|
|
411
|
+
// 验证创建的选项出现在dropdown中
|
|
412
|
+
dropdown = getElement('.k-select-menu');
|
|
413
|
+
expect(dropdown.innerHTML).to.contain('custom1');
|
|
414
|
+
// 2. 按回车创建并选中
|
|
415
|
+
dispatchEvent(document, 'keydown', {
|
|
416
|
+
keyCode: 13
|
|
417
|
+
});
|
|
418
|
+
_context11.next = 16;
|
|
419
|
+
return wait();
|
|
420
|
+
case 16:
|
|
421
|
+
// 验证选项被选中,且输入框被清空
|
|
422
|
+
expect(instance.get('days')).to.eql(['custom1']);
|
|
423
|
+
expect(input.value).to.eql(''); // keepKeywords=true时应该清空输入框
|
|
424
|
+
// 3. 再次输入相同的选项 "custom1"
|
|
425
|
+
input.value = 'custom1';
|
|
426
|
+
dispatchEvent(input, 'input');
|
|
427
|
+
_context11.next = 22;
|
|
428
|
+
return wait();
|
|
429
|
+
case 22:
|
|
430
|
+
// 4. 再次按回车
|
|
431
|
+
dispatchEvent(document, 'keydown', {
|
|
432
|
+
keyCode: 13
|
|
433
|
+
});
|
|
434
|
+
_context11.next = 25;
|
|
435
|
+
return wait();
|
|
436
|
+
case 25:
|
|
437
|
+
// 验证选项仍然被选中(不会被取消选中),且输入框被清空
|
|
438
|
+
expect(instance.get('days')).to.eql(['custom1']); // 应该保持选中状态
|
|
439
|
+
expect(input.value).to.eql(''); // 输入框应该被清空
|
|
440
|
+
// 5. 输入另一个自定义选项 "custom2"
|
|
441
|
+
input.value = 'custom2';
|
|
442
|
+
dispatchEvent(input, 'input');
|
|
443
|
+
_context11.next = 31;
|
|
444
|
+
return wait();
|
|
445
|
+
case 31:
|
|
446
|
+
dispatchEvent(document, 'keydown', {
|
|
447
|
+
keyCode: 13
|
|
448
|
+
});
|
|
449
|
+
_context11.next = 34;
|
|
450
|
+
return wait();
|
|
451
|
+
case 34:
|
|
452
|
+
// 验证两个选项都被选中
|
|
453
|
+
expect(instance.get('days')).to.eql(['custom1', 'custom2']);
|
|
454
|
+
expect(input.value).to.eql('');
|
|
455
|
+
// 6. 测试原有选项的正常行为
|
|
456
|
+
input.click();
|
|
457
|
+
_context11.next = 39;
|
|
458
|
+
return wait();
|
|
459
|
+
case 39:
|
|
460
|
+
mondayOption = dropdown.querySelector('[data-value="Monday"]');
|
|
461
|
+
if (!mondayOption) {
|
|
462
|
+
_context11.next = 49;
|
|
463
|
+
break;
|
|
464
|
+
}
|
|
465
|
+
mondayOption.click();
|
|
466
|
+
_context11.next = 44;
|
|
467
|
+
return wait();
|
|
468
|
+
case 44:
|
|
469
|
+
expect(instance.get('days')).to.include('Monday');
|
|
470
|
+
// 再次点击应该能取消选中(原有选项不受keepKeywords影响)
|
|
471
|
+
mondayOption.click();
|
|
472
|
+
_context11.next = 48;
|
|
473
|
+
return wait();
|
|
474
|
+
case 48:
|
|
475
|
+
expect(instance.get('days')).to.not.include('Monday');
|
|
476
|
+
case 49:
|
|
477
|
+
case "end":
|
|
478
|
+
return _context11.stop();
|
|
479
|
+
}
|
|
480
|
+
}, _callee9);
|
|
481
|
+
})));
|
|
482
|
+
it('Tooltip with Select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
|
|
483
|
+
var Demo, _mount11, instance, element;
|
|
484
|
+
return _regeneratorRuntime.wrap(function _callee10$(_context13) {
|
|
485
|
+
while (1) switch (_context13.prev = _context13.next) {
|
|
486
|
+
case 0:
|
|
487
|
+
Demo = /*#__PURE__*/function (_Component3) {
|
|
488
|
+
_inheritsLoose(Demo, _Component3);
|
|
489
|
+
function Demo() {
|
|
490
|
+
var _context12;
|
|
491
|
+
var _this3;
|
|
492
|
+
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
493
|
+
args[_key3] = arguments[_key3];
|
|
494
|
+
}
|
|
495
|
+
_this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
|
|
496
|
+
_this3.Tooltip = Tooltip;
|
|
497
|
+
_this3.Select = Select;
|
|
498
|
+
_this3.Option = Option;
|
|
499
|
+
return _this3;
|
|
500
|
+
}
|
|
391
501
|
return Demo;
|
|
392
502
|
}(Component);
|
|
393
503
|
Demo.template = "\n const {Tooltip, Select, Option} = this;\n <Tooltip content=\"hello\">\n <Select><Option value=\"1\">option 1</Option></Select>\n </Tooltip>\n ";
|
|
394
|
-
|
|
504
|
+
_mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
|
|
395
505
|
element.click();
|
|
396
|
-
|
|
506
|
+
_context13.next = 6;
|
|
397
507
|
return wait();
|
|
398
508
|
case 6:
|
|
399
509
|
expect(getElement('.k-select-menu')).to.be.exist;
|
|
400
510
|
expect(getElement('.k-tooltip-content')).to.be.exist;
|
|
401
511
|
case 8:
|
|
402
512
|
case "end":
|
|
403
|
-
return
|
|
513
|
+
return _context13.stop();
|
|
404
514
|
}
|
|
405
|
-
},
|
|
515
|
+
}, _callee10);
|
|
406
516
|
})));
|
|
407
|
-
it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
408
|
-
var
|
|
409
|
-
return _regeneratorRuntime.wrap(function
|
|
410
|
-
while (1) switch (
|
|
517
|
+
it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
|
|
518
|
+
var _mount12, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
|
|
519
|
+
return _regeneratorRuntime.wrap(function _callee11$(_context14) {
|
|
520
|
+
while (1) switch (_context14.prev = _context14.next) {
|
|
411
521
|
case 0:
|
|
412
|
-
|
|
522
|
+
_mount12 = mount(SearchableDemo), instance = _mount12[0], element = _mount12[1];
|
|
413
523
|
_element$querySelecto6 = element.querySelectorAll('.k-select'), select = _element$querySelecto6[1];
|
|
414
524
|
select.click();
|
|
415
|
-
|
|
525
|
+
_context14.next = 5;
|
|
416
526
|
return wait();
|
|
417
527
|
case 5:
|
|
418
528
|
dropdown = getElement('.k-select-menu');
|
|
@@ -420,112 +530,175 @@ describe('Select', function () {
|
|
|
420
530
|
_dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect3[0], confirm = _dropdown$querySelect3[1]; // select all
|
|
421
531
|
selectAll.click();
|
|
422
532
|
confirm.click();
|
|
423
|
-
|
|
533
|
+
_context14.next = 12;
|
|
424
534
|
return wait();
|
|
425
535
|
case 12:
|
|
426
536
|
expect(instance.get('days')).have.length(6);
|
|
427
537
|
// unselect all
|
|
428
538
|
select.click();
|
|
429
|
-
|
|
539
|
+
_context14.next = 16;
|
|
430
540
|
return wait();
|
|
431
541
|
case 16:
|
|
432
542
|
unselectAll.click();
|
|
433
543
|
confirm.click();
|
|
434
|
-
|
|
544
|
+
_context14.next = 20;
|
|
435
545
|
return wait();
|
|
436
546
|
case 20:
|
|
437
547
|
expect(instance.get('days')).have.length(0);
|
|
438
548
|
// toggle select
|
|
439
549
|
select.click();
|
|
440
|
-
|
|
550
|
+
_context14.next = 24;
|
|
441
551
|
return wait();
|
|
442
552
|
case 24:
|
|
443
553
|
instance.set('days', ['Monday', 'Tuesday']);
|
|
444
|
-
|
|
554
|
+
_context14.next = 27;
|
|
445
555
|
return wait();
|
|
446
556
|
case 27:
|
|
447
557
|
input = dropdown.querySelector('.k-input-inner');
|
|
448
558
|
input.value = 's';
|
|
449
559
|
dispatchEvent(input, 'input');
|
|
450
|
-
|
|
560
|
+
_context14.next = 32;
|
|
451
561
|
return wait();
|
|
452
562
|
case 32:
|
|
453
563
|
toggleSelect.click();
|
|
454
564
|
confirm.click();
|
|
455
|
-
|
|
565
|
+
_context14.next = 36;
|
|
456
566
|
return wait();
|
|
457
567
|
case 36:
|
|
458
568
|
expect(instance.get('days')).have.length(5);
|
|
459
569
|
expect(instance.get('days')).include('Monday');
|
|
460
570
|
case 38:
|
|
461
571
|
case "end":
|
|
462
|
-
return
|
|
572
|
+
return _context14.stop();
|
|
463
573
|
}
|
|
464
|
-
},
|
|
574
|
+
}, _callee11);
|
|
465
575
|
})));
|
|
466
|
-
it('
|
|
467
|
-
var
|
|
468
|
-
return _regeneratorRuntime.wrap(function
|
|
469
|
-
while (1) switch (
|
|
576
|
+
it('Searchable with multiple should show correct initial checkbox state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
|
|
577
|
+
var _mount13, instance, element, _element$querySelecto7, select, dropdown, checkboxes, options, tuesdayCheckbox, tuesdayOption, _dropdown$querySelect4, cancel, dropdown2, checkboxes2, options2, tuesdayCheckbox2, tuesdayOption2;
|
|
578
|
+
return _regeneratorRuntime.wrap(function _callee12$(_context15) {
|
|
579
|
+
while (1) switch (_context15.prev = _context15.next) {
|
|
470
580
|
case 0:
|
|
471
|
-
|
|
581
|
+
_mount13 = mount(SearchableDemo), instance = _mount13[0], element = _mount13[1]; // 验证初始值
|
|
582
|
+
expect(instance.get('days')).to.eql(['Tuesday']);
|
|
583
|
+
// 第一次打开dropdown,检查初始状态
|
|
584
|
+
_element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
|
|
585
|
+
select.click();
|
|
586
|
+
_context15.next = 6;
|
|
587
|
+
return wait();
|
|
588
|
+
case 6:
|
|
589
|
+
dropdown = getElement('.k-select-menu');
|
|
590
|
+
checkboxes = dropdown.querySelectorAll('.k-checkbox input[type="checkbox"]');
|
|
591
|
+
options = dropdown.querySelectorAll('.k-select-option'); // 找到Tuesday选项对应的checkbox
|
|
592
|
+
tuesdayCheckbox = null;
|
|
593
|
+
tuesdayOption = null;
|
|
594
|
+
options.forEach(function (option, index) {
|
|
595
|
+
var _option$textContent;
|
|
596
|
+
if ((_option$textContent = option.textContent) != null && _includesInstanceProperty(_option$textContent).call(_option$textContent, '星期二')) {
|
|
597
|
+
tuesdayCheckbox = checkboxes[index];
|
|
598
|
+
tuesdayOption = option;
|
|
599
|
+
}
|
|
600
|
+
});
|
|
601
|
+
// 验证Tuesday的checkbox应该被选中
|
|
602
|
+
expect(tuesdayCheckbox).to.exist;
|
|
603
|
+
expect(tuesdayCheckbox.checked).to.be.true;
|
|
604
|
+
// 验证Tuesday选项应该有active样式
|
|
605
|
+
expect(tuesdayOption).to.exist;
|
|
606
|
+
expect(tuesdayOption.className).to.include('k-active');
|
|
607
|
+
// 关闭dropdown
|
|
608
|
+
_dropdown$querySelect4 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect4[0];
|
|
609
|
+
cancel.click();
|
|
610
|
+
_context15.next = 20;
|
|
611
|
+
return wait();
|
|
612
|
+
case 20:
|
|
613
|
+
// 再次打开dropdown,验证状态仍然正确
|
|
614
|
+
select.click();
|
|
615
|
+
_context15.next = 23;
|
|
616
|
+
return wait();
|
|
617
|
+
case 23:
|
|
618
|
+
dropdown2 = getElement('.k-select-menu');
|
|
619
|
+
checkboxes2 = dropdown2.querySelectorAll('.k-checkbox input[type="checkbox"]');
|
|
620
|
+
options2 = dropdown2.querySelectorAll('.k-select-option');
|
|
621
|
+
tuesdayCheckbox2 = null;
|
|
622
|
+
tuesdayOption2 = null;
|
|
623
|
+
options2.forEach(function (option, index) {
|
|
624
|
+
var _option$textContent2;
|
|
625
|
+
if ((_option$textContent2 = option.textContent) != null && _includesInstanceProperty(_option$textContent2).call(_option$textContent2, '星期二')) {
|
|
626
|
+
tuesdayCheckbox2 = checkboxes2[index];
|
|
627
|
+
tuesdayOption2 = option;
|
|
628
|
+
}
|
|
629
|
+
});
|
|
630
|
+
// 验证第二次打开时状态依然正确
|
|
631
|
+
expect(tuesdayCheckbox2.checked).to.be.true;
|
|
632
|
+
expect(tuesdayOption2.className).to.include('k-active');
|
|
633
|
+
case 31:
|
|
634
|
+
case "end":
|
|
635
|
+
return _context15.stop();
|
|
636
|
+
}
|
|
637
|
+
}, _callee12);
|
|
638
|
+
})));
|
|
639
|
+
it('disabled option does not allow clearable and close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
|
|
640
|
+
var _mount14, instance, element, _element$querySelecto8, clear1, _element$querySelecto9, tag1, _element$querySelecto10, clear2, _element$querySelecto11, clear3;
|
|
641
|
+
return _regeneratorRuntime.wrap(function _callee13$(_context16) {
|
|
642
|
+
while (1) switch (_context16.prev = _context16.next) {
|
|
643
|
+
case 0:
|
|
644
|
+
_mount14 = mount(ImmutableDemo), instance = _mount14[0], element = _mount14[1];
|
|
472
645
|
instance.set('days', ['Tuesday', 'Friday']);
|
|
473
|
-
|
|
646
|
+
_context16.next = 4;
|
|
474
647
|
return wait();
|
|
475
648
|
case 4:
|
|
476
649
|
expect(element.outerHTML).to.matchSnapshot();
|
|
477
|
-
_element$
|
|
650
|
+
_element$querySelecto8 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto8[0];
|
|
478
651
|
clear1.click();
|
|
479
|
-
|
|
652
|
+
_context16.next = 9;
|
|
480
653
|
return wait();
|
|
481
654
|
case 9:
|
|
482
|
-
_element$
|
|
655
|
+
_element$querySelecto9 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto9[0];
|
|
483
656
|
expect(tag1.className).not.contain("k-closable");
|
|
484
657
|
expect(instance.get('days')).to.eql(['Tuesday', 'Friday']);
|
|
485
658
|
instance.set('days', ['Monday', 'Tuesday']);
|
|
486
|
-
|
|
659
|
+
_context16.next = 15;
|
|
487
660
|
return wait();
|
|
488
661
|
case 15:
|
|
489
|
-
_element$
|
|
662
|
+
_element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto10[0];
|
|
490
663
|
clear2.click();
|
|
491
|
-
|
|
664
|
+
_context16.next = 19;
|
|
492
665
|
return wait();
|
|
493
666
|
case 19:
|
|
494
667
|
expect(instance.get('days')).to.eql(['Tuesday']);
|
|
495
668
|
instance.set('days', ['Monday', 'Wednesday']);
|
|
496
|
-
|
|
669
|
+
_context16.next = 23;
|
|
497
670
|
return wait();
|
|
498
671
|
case 23:
|
|
499
|
-
_element$
|
|
672
|
+
_element$querySelecto11 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto11[0];
|
|
500
673
|
clear3.click();
|
|
501
|
-
|
|
674
|
+
_context16.next = 27;
|
|
502
675
|
return wait();
|
|
503
676
|
case 27:
|
|
504
677
|
expect(instance.get('days')).to.eql([]);
|
|
505
678
|
// expect(clear).to.be.null;
|
|
506
679
|
case 28:
|
|
507
680
|
case "end":
|
|
508
|
-
return
|
|
681
|
+
return _context16.stop();
|
|
509
682
|
}
|
|
510
|
-
},
|
|
683
|
+
}, _callee13);
|
|
511
684
|
})));
|
|
512
|
-
it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
513
|
-
var Demo,
|
|
514
|
-
return _regeneratorRuntime.wrap(function
|
|
515
|
-
while (1) switch (
|
|
685
|
+
it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
|
|
686
|
+
var Demo, _mount15, instance, element, wrapper, phantom;
|
|
687
|
+
return _regeneratorRuntime.wrap(function _callee14$(_context18) {
|
|
688
|
+
while (1) switch (_context18.prev = _context18.next) {
|
|
516
689
|
case 0:
|
|
517
|
-
Demo = /*#__PURE__*/function (
|
|
518
|
-
_inheritsLoose(Demo,
|
|
690
|
+
Demo = /*#__PURE__*/function (_Component4) {
|
|
691
|
+
_inheritsLoose(Demo, _Component4);
|
|
519
692
|
function Demo() {
|
|
520
|
-
var
|
|
521
|
-
var
|
|
522
|
-
for (var
|
|
523
|
-
args[
|
|
693
|
+
var _context17;
|
|
694
|
+
var _this4;
|
|
695
|
+
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
696
|
+
args[_key4] = arguments[_key4];
|
|
524
697
|
}
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
return
|
|
698
|
+
_this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
|
|
699
|
+
_this4.Select = Select;
|
|
700
|
+
_this4.Option = Option;
|
|
701
|
+
return _this4;
|
|
529
702
|
}
|
|
530
703
|
Demo.defaults = function defaults() {
|
|
531
704
|
return {
|
|
@@ -535,8 +708,8 @@ describe('Select', function () {
|
|
|
535
708
|
return Demo;
|
|
536
709
|
}(Component);
|
|
537
710
|
Demo.template = "\n const {Select, Option} = this;\n <Select v-model=\"day\" virtual>\n <Option v-for={this.get('list')} value={$value}>\n {$value}\n </Option>\n </Select>\n ";
|
|
538
|
-
|
|
539
|
-
|
|
711
|
+
_mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
|
|
712
|
+
_context18.next = 5;
|
|
540
713
|
return wait();
|
|
541
714
|
case 5:
|
|
542
715
|
// simulate async data loading
|
|
@@ -545,11 +718,11 @@ describe('Select', function () {
|
|
|
545
718
|
}, function (_, i) {
|
|
546
719
|
return i;
|
|
547
720
|
}));
|
|
548
|
-
|
|
721
|
+
_context18.next = 8;
|
|
549
722
|
return wait(100);
|
|
550
723
|
case 8:
|
|
551
724
|
element.click();
|
|
552
|
-
|
|
725
|
+
_context18.next = 11;
|
|
553
726
|
return wait();
|
|
554
727
|
case 11:
|
|
555
728
|
wrapper = getElement('.k-virtual-wrapper');
|
|
@@ -558,9 +731,9 @@ describe('Select', function () {
|
|
|
558
731
|
expect(phantom.style.height).to.be.equal('3000px');
|
|
559
732
|
case 15:
|
|
560
733
|
case "end":
|
|
561
|
-
return
|
|
734
|
+
return _context18.stop();
|
|
562
735
|
}
|
|
563
|
-
},
|
|
736
|
+
}, _callee14);
|
|
564
737
|
})));
|
|
565
738
|
// it('should trigger change event correctly', async () => {
|
|
566
739
|
// const spy = sinon.spy();
|
|
@@ -12,7 +12,8 @@ var typeDefs = {
|
|
|
12
12
|
required: true
|
|
13
13
|
},
|
|
14
14
|
label: String,
|
|
15
|
-
disabled: Boolean
|
|
15
|
+
disabled: Boolean,
|
|
16
|
+
isCreated: Boolean
|
|
16
17
|
};
|
|
17
18
|
export var Option = /*#__PURE__*/function (_Component) {
|
|
18
19
|
_inheritsLoose(Option, _Component);
|
|
@@ -30,12 +31,18 @@ export var Option = /*#__PURE__*/function (_Component) {
|
|
|
30
31
|
var _proto = Option.prototype;
|
|
31
32
|
_proto.onSelect = function onSelect() {
|
|
32
33
|
var select = this.select;
|
|
33
|
-
var
|
|
34
|
+
var _select$get = select.get(),
|
|
35
|
+
multiple = _select$get.multiple,
|
|
36
|
+
keepKeywords = _select$get.keepKeywords;
|
|
34
37
|
var value = this.get('value');
|
|
38
|
+
var isCreated = this.get('isCreated');
|
|
35
39
|
if (!multiple) {
|
|
36
40
|
select.set('value', this.get('value'));
|
|
37
41
|
} else {
|
|
38
42
|
var values = select.get('value');
|
|
43
|
+
if (keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
39
46
|
values = toggleArray(values, value);
|
|
40
47
|
select.set('value', values);
|
|
41
48
|
}
|
|
@@ -18,7 +18,8 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
|
|
|
18
18
|
creatable: Boolean,
|
|
19
19
|
labelMap: _Map,
|
|
20
20
|
card: Boolean,
|
|
21
|
-
autoDisableArrow: Boolean
|
|
21
|
+
autoDisableArrow: Boolean,
|
|
22
|
+
keepKeywords: Boolean
|
|
22
23
|
});
|
|
23
24
|
var defaults = function defaults() {
|
|
24
25
|
return _extends({}, BaseSelect.defaults(), {
|
|
@@ -37,14 +37,17 @@ export function useInput(resetKeywords) {
|
|
|
37
37
|
component.on('$changed:value', function () {
|
|
38
38
|
var _component$get = component.get(),
|
|
39
39
|
multiple = _component$get.multiple,
|
|
40
|
-
filterable = _component$get.filterable
|
|
40
|
+
filterable = _component$get.filterable,
|
|
41
|
+
keepKeywords = _component$get.keepKeywords;
|
|
41
42
|
if (multiple && filterable) {
|
|
42
43
|
focusInput();
|
|
43
44
|
/**
|
|
44
45
|
* don't reset keywords on multiple mode for continue selection
|
|
45
46
|
* https://github.com/ksc-fe/kpc/issues/983
|
|
46
47
|
*/
|
|
47
|
-
|
|
48
|
+
if (keepKeywords) {
|
|
49
|
+
resetKeywords(keywords);
|
|
50
|
+
}
|
|
48
51
|
}
|
|
49
52
|
});
|
|
50
53
|
return {
|
|
@@ -16,7 +16,7 @@ export declare class PanelPicker<Multipe extends boolean = false, Range extends
|
|
|
16
16
|
getValueString: (value: dayjs.Dayjs) => string;
|
|
17
17
|
};
|
|
18
18
|
disabled: {
|
|
19
|
-
isDisabled: (value: dayjs.Dayjs, type?:
|
|
19
|
+
isDisabled: (value: dayjs.Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
|
|
20
20
|
isDisabledConfirm: () => boolean;
|
|
21
21
|
maxDate: State<dayjs.Dayjs | null>;
|
|
22
22
|
minDate: State<dayjs.Dayjs | null>;
|
|
@@ -37,6 +37,7 @@ export declare class PanelPicker<Multipe extends boolean = false, Range extends
|
|
|
37
37
|
onConfirm: () => void;
|
|
38
38
|
getTimeValue: (flag: import("../datepicker/usePanel").PanelFlags) => dayjs.Dayjs | null | undefined;
|
|
39
39
|
convertToDayjs: (v: import("../datepicker/basepicker").Value | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value] | import("../datepicker/basepicker").Value[] | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value][] | null | undefined) => import("../datepicker/basepicker").DayjsValue;
|
|
40
|
+
setMoment: () => void;
|
|
40
41
|
value: State<import("../datepicker/basepicker").StateValue>;
|
|
41
42
|
setValue: (v: import("../datepicker/basepicker").StateValueItem, fromInput: boolean) => void;
|
|
42
43
|
getDayjsValue: () => import("../datepicker/basepicker").DayjsValue;
|
|
@@ -16,13 +16,16 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
16
16
|
var _this$get = this.get(),
|
|
17
17
|
className = _this$get.className,
|
|
18
18
|
range = _this$get.range,
|
|
19
|
-
multiple = _this$get.multiple
|
|
19
|
+
multiple = _this$get.multiple,
|
|
20
|
+
min = _this$get.min,
|
|
21
|
+
max = _this$get.max;
|
|
20
22
|
var _this$value = this.value,
|
|
21
23
|
value = _this$value.value.value,
|
|
22
24
|
onConfirm = _this$value.onConfirm,
|
|
23
25
|
onChangeTime = _this$value.onChangeTime,
|
|
24
26
|
onChangeTimeByStep = _this$value.onChangeTimeByStep,
|
|
25
|
-
getTimeValue = _this$value.getTimeValue
|
|
27
|
+
getTimeValue = _this$value.getTimeValue,
|
|
28
|
+
setMoment = _this$value.setMoment;
|
|
26
29
|
var lastValue = last(value);
|
|
27
30
|
var k = this.config.k;
|
|
28
31
|
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-time-content"] = true, _classNameObj[k + "-range"] = range, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
|
|
@@ -63,13 +66,18 @@ export default function ($props, $blocks, $__proto__) {
|
|
|
63
66
|
return (_$blocks['base-menu'] = function ($super) {
|
|
64
67
|
return _$cc(DropdownMenu, {
|
|
65
68
|
'className': _$cn(classNameObj),
|
|
66
|
-
'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), _$ce(2, 'div', _$cc(Button, {
|
|
69
|
+
'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), _$ce(2, 'div', [!range && !multiple && !max && !min ? _$cc(Button, {
|
|
70
|
+
'type': 'link',
|
|
71
|
+
'size': 'small',
|
|
72
|
+
'ev-click': setMoment,
|
|
73
|
+
'children': _$('此刻')
|
|
74
|
+
}) : undefined, _$cc(Button, {
|
|
67
75
|
'type': 'primary',
|
|
68
76
|
'size': 'small',
|
|
69
77
|
'disabled': isDisabledConfirm(),
|
|
70
78
|
'ev-click': onConfirm,
|
|
71
79
|
'children': _$('确定')
|
|
72
|
-
}),
|
|
80
|
+
})], 0, _$cn(k + "-datepicker-footer"))], 4, _$cn(k + "-datepicker-wrapper"))
|
|
73
81
|
});
|
|
74
82
|
}, __$blocks['base-menu'] = function ($super, data) {
|
|
75
83
|
var block = $blocks['base-menu'];
|
|
@@ -12,7 +12,7 @@ export declare class SelectPicker extends Component<TimepickerProps, TimepickerE
|
|
|
12
12
|
getValueString: (value: import("dayjs").Dayjs) => string;
|
|
13
13
|
};
|
|
14
14
|
disabled: {
|
|
15
|
-
isDisabled: (value: import("dayjs").Dayjs, type?:
|
|
15
|
+
isDisabled: (value: import("dayjs").Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
|
|
16
16
|
isDisabledTime: (value: import("dayjs").Dayjs, flag: import("../datepicker/usePanel").PanelFlags) => boolean;
|
|
17
17
|
isDisabledConfirm: () => boolean;
|
|
18
18
|
maxDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
|
|
@@ -26,5 +26,5 @@ setDefault(function () {
|
|
|
26
26
|
makePanelStyles == null || makePanelStyles.clearCache();
|
|
27
27
|
});
|
|
28
28
|
export var makePanelStyles = cache(function makePanelStyles(k) {
|
|
29
|
-
return cx(makePanelStylesBase(k), /*#__PURE__*/css("&.", k, "-time-content{.", k, "-datepicker-time{padding:", timepicker.padding, ";}.", k, "-scroll-select{height:", timepicker.scrollHeight, ";}}&.", k, "-range{.", k, "-datepicker-time{width:auto;
|
|
29
|
+
return cx(makePanelStylesBase(k), /*#__PURE__*/css("&.", k, "-time-content{.", k, "-datepicker-time{padding:", timepicker.padding, ";}.", k, "-scroll-select{height:", timepicker.scrollHeight, ";}}&.", k, "-range{.", k, "-datepicker-time{width:auto;}.", k, "-scroll-select{height:", timepicker.range.scrollHeight, ";}.", k, "-datepicker-calendar-wrapper{padding:", timepicker.range.padding, ";width:", timepicker.range.width, ";border:none;}.", k, "-timepicker-title{text-align:center;margin-bottom:", timepicker.range.titleGap, ";}}"));
|
|
30
30
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { useFormats } from './useFormats';
|
|
2
2
|
import { PanelFlags } from '../datepicker/usePanel';
|
|
3
3
|
export declare function useDisabled(formats: ReturnType<typeof useFormats>): {
|
|
4
|
-
isDisabled: (value: import("dayjs").Dayjs, type?:
|
|
4
|
+
isDisabled: (value: import("dayjs").Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
|
|
5
5
|
isDisabledConfirm: () => boolean;
|
|
6
6
|
maxDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
|
|
7
7
|
minDate: import("../../hooks/useState").State<import("dayjs").Dayjs | null>;
|
|
@@ -8,6 +8,7 @@ export declare function useValue(formats: ReturnType<typeof useFormats>, disable
|
|
|
8
8
|
onConfirm: () => void;
|
|
9
9
|
getTimeValue: (flag: PanelFlags) => import("dayjs").Dayjs | null | undefined;
|
|
10
10
|
convertToDayjs: (v: import("../datepicker/basepicker").Value | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value] | import("../datepicker/basepicker").Value[] | [import("../datepicker/basepicker").Value, import("../datepicker/basepicker").Value][] | null | undefined) => import("../datepicker/basepicker").DayjsValue;
|
|
11
|
+
setMoment: () => void;
|
|
11
12
|
value: import("../../hooks/useState").State<import("../datepicker/basepicker").StateValue>;
|
|
12
13
|
setValue: (v: StateValueItem, fromInput: boolean) => void;
|
|
13
14
|
getDayjsValue: () => import("../datepicker/basepicker").DayjsValue;
|