@kdcloudjs/kdesign 1.7.25 → 1.7.27

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 (70) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/dist/kdesign-complete.less +109 -45
  3. package/dist/kdesign.css +85 -40
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +266 -106
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +3 -3
  8. package/dist/kdesign.min.js +6 -6
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/anchor/style/index.css +1 -1
  11. package/es/anchor/style/index.less +1 -1
  12. package/es/anchor/style/token.less +1 -0
  13. package/es/cascader/cascader.js +64 -32
  14. package/es/cascader/style/index.css +42 -26
  15. package/es/cascader/style/index.less +51 -29
  16. package/es/cascader/style/token.less +5 -3
  17. package/es/city-picker/city-picker.js +104 -13
  18. package/es/city-picker/interface.d.ts +3 -0
  19. package/es/city-picker/option.js +15 -3
  20. package/es/city-picker/style/index.css +22 -10
  21. package/es/city-picker/style/index.less +24 -10
  22. package/es/collapse/panel.js +31 -18
  23. package/es/collapse/style/index.css +4 -1
  24. package/es/collapse/style/index.less +4 -1
  25. package/es/form/Field.d.ts +1 -0
  26. package/es/form/Field.js +5 -3
  27. package/es/form/FieldWrapper.d.ts +1 -0
  28. package/es/form/FieldWrapper.js +13 -5
  29. package/es/form/style/index.css +11 -1
  30. package/es/form/style/index.less +16 -1
  31. package/es/form/style/token.less +1 -0
  32. package/es/select/style/index.css +1 -0
  33. package/es/select/style/index.less +1 -0
  34. package/es/select/style/token.less +1 -0
  35. package/es/tabs/style/index.css +3 -0
  36. package/es/tabs/style/index.less +3 -0
  37. package/es/tabs/style/token.less +1 -0
  38. package/es/tag/tag.d.ts +1 -0
  39. package/es/tree-select/tree-select.js +2 -1
  40. package/lib/anchor/style/index.css +1 -1
  41. package/lib/anchor/style/index.less +1 -1
  42. package/lib/anchor/style/token.less +1 -0
  43. package/lib/cascader/cascader.js +63 -31
  44. package/lib/cascader/style/index.css +42 -26
  45. package/lib/cascader/style/index.less +51 -29
  46. package/lib/cascader/style/token.less +5 -3
  47. package/lib/city-picker/city-picker.js +103 -12
  48. package/lib/city-picker/interface.d.ts +3 -0
  49. package/lib/city-picker/option.js +15 -3
  50. package/lib/city-picker/style/index.css +22 -10
  51. package/lib/city-picker/style/index.less +24 -10
  52. package/lib/collapse/panel.js +32 -19
  53. package/lib/collapse/style/index.css +4 -1
  54. package/lib/collapse/style/index.less +4 -1
  55. package/lib/form/Field.d.ts +1 -0
  56. package/lib/form/Field.js +5 -3
  57. package/lib/form/FieldWrapper.d.ts +1 -0
  58. package/lib/form/FieldWrapper.js +13 -5
  59. package/lib/form/style/index.css +11 -1
  60. package/lib/form/style/index.less +16 -1
  61. package/lib/form/style/token.less +1 -0
  62. package/lib/select/style/index.css +1 -0
  63. package/lib/select/style/index.less +1 -0
  64. package/lib/select/style/token.less +1 -0
  65. package/lib/tabs/style/index.css +3 -0
  66. package/lib/tabs/style/index.less +3 -0
  67. package/lib/tabs/style/token.less +1 -0
  68. package/lib/tag/tag.d.ts +1 -0
  69. package/lib/tree-select/tree-select.js +2 -1
  70. package/package.json +1 -1
package/dist/kdesign.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  *
3
- * @kdcloudjs/kdesign v1.7.24
3
+ * @kdcloudjs/kdesign v1.7.26
4
4
  *
5
5
  * Copyright 2020-present, Kingdee, Inc.
6
6
  * All rights reserved.
@@ -2540,7 +2540,7 @@ template {
2540
2540
  }
2541
2541
  .kd-anchor-menu .kd-anchor-link-title {
2542
2542
  display: inline-block;
2543
- max-width: 96px;
2543
+ max-width: var(--kd-c-anchor-horizontal-link-sizing-max-width, 96px);
2544
2544
  overflow: hidden;
2545
2545
  white-space: nowrap;
2546
2546
  text-overflow: ellipsis;
@@ -4549,17 +4549,6 @@ template {
4549
4549
  cursor: pointer;
4550
4550
  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
4551
4551
  }
4552
- .kd-cascader-picker:focus > .kd-cascader-picker-input {
4553
- border-color: var(--kd-c-cascader-color-active, #999);
4554
- }
4555
- .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
4556
- .kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
4557
- color: var(--kd-c-cascader-color-active, #999);
4558
- }
4559
- .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
4560
- .kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
4561
- color: var(--kd-c-cascader-color-active, #999);
4562
- }
4563
4552
  .kd-cascader-picker.disabled .kd-cascader-picker-input {
4564
4553
  cursor: not-allowed;
4565
4554
  border-color: var(--kd-g-color-border-strong, #d9d9d9);
@@ -4585,7 +4574,7 @@ template {
4585
4574
  text-overflow: ellipsis;
4586
4575
  }
4587
4576
  .kd-cascader-picker-input {
4588
- background-color: transparent !important;
4577
+ background-color: transparent;
4589
4578
  -webkit-transition: all 0.2s;
4590
4579
  transition: all 0.2s;
4591
4580
  }
@@ -4593,11 +4582,7 @@ template {
4593
4582
  color: transparent !important;
4594
4583
  cursor: pointer;
4595
4584
  }
4596
- .kd-cascader-picker-input.expand {
4597
- border-color: var(--kd-c-cascader-color-active, #999);
4598
- }
4599
4585
  .kd-cascader-picker-input.expand i[class*='kdicon'] {
4600
- color: var(--kd-c-cascader-color-active, #999);
4601
4586
  -webkit-transform: rotate(180deg);
4602
4587
  transform: rotate(180deg);
4603
4588
  }
@@ -4627,7 +4612,7 @@ template {
4627
4612
  opacity: 0;
4628
4613
  cursor: pointer;
4629
4614
  visibility: hidden;
4630
- color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
4615
+ color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
4631
4616
  -webkit-transition: all 0.1s;
4632
4617
  transition: all 0.1s;
4633
4618
  -webkit-transform-origin: 50% 50%;
@@ -4636,7 +4621,7 @@ template {
4636
4621
  transform: scale(0.9) translateY(-50%);
4637
4622
  }
4638
4623
  .kd-cascader-picker-close:hover {
4639
- color: var(--kd-c-cascader-color-active, #999);
4624
+ color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
4640
4625
  }
4641
4626
  .kd-cascader-menus {
4642
4627
  -webkit-box-sizing: border-box;
@@ -4701,13 +4686,13 @@ template {
4701
4686
  background-color: var(--kd-c-cascader-color-background-selected, var(--kd-g-color-background-ongoing, #f2f9ff));
4702
4687
  }
4703
4688
  .kd-cascader-menus .kd-cascader-menu-item-label {
4704
- width: 72px;
4689
+ width: var(--kd-c-cascader-menu-item-label-sizing-width, 72px);
4705
4690
  white-space: nowrap;
4706
4691
  overflow: hidden;
4707
4692
  text-overflow: ellipsis;
4708
4693
  }
4709
4694
  .kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
4710
- width: 92px;
4695
+ width: calc(var(--kd-c-cascader-menu-item-label-sizing-width, 72px) + 20px);
4711
4696
  }
4712
4697
  .kd-cascader-menus .kd-cascader-menu-item .kd-cascader-checkbox {
4713
4698
  margin-right: 5px;
@@ -4749,6 +4734,10 @@ template {
4749
4734
  border-bottom: 1px solid #d9d9d9;
4750
4735
  background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
4751
4736
  }
4737
+ .kd-cascader-multiple:not(.kd-cascader-disabled):focus {
4738
+ border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
4739
+ outline: none;
4740
+ }
4752
4741
  .kd-cascader-multiple-wrapper {
4753
4742
  display: -webkit-box;
4754
4743
  display: -ms-flexbox;
@@ -4762,7 +4751,8 @@ template {
4762
4751
  }
4763
4752
  .kd-cascader-placeholder {
4764
4753
  position: absolute;
4765
- color: #999;
4754
+ font-size: 14px;
4755
+ color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
4766
4756
  overflow: hidden;
4767
4757
  white-space: nowrap;
4768
4758
  text-overflow: ellipsis;
@@ -4817,9 +4807,6 @@ template {
4817
4807
  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
4818
4808
  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
4819
4809
  }
4820
- .kd-cascader-icon-arrow-focus {
4821
- color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4822
- }
4823
4810
  .kd-cascader-icon-clear {
4824
4811
  opacity: 0;
4825
4812
  z-index: 1;
@@ -4827,7 +4814,7 @@ template {
4827
4814
  background: #fff;
4828
4815
  -webkit-transition: opacity 0.15s ease;
4829
4816
  transition: opacity 0.15s ease;
4830
- color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
4817
+ color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
4831
4818
  }
4832
4819
  .kd-cascader-icon-clear:hover {
4833
4820
  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
@@ -4849,7 +4836,6 @@ template {
4849
4836
  -webkit-box-align: center;
4850
4837
  -ms-flex-align: center;
4851
4838
  align-items: center;
4852
- vertical-align: middle;
4853
4839
  padding: 0 7px;
4854
4840
  overflow: hidden;
4855
4841
  white-space: nowrap;
@@ -4857,6 +4843,36 @@ template {
4857
4843
  border: 1px solid #ccc;
4858
4844
  color: #212121;
4859
4845
  }
4846
+ .kd-cascader-disabled {
4847
+ cursor: not-allowed;
4848
+ }
4849
+ .kd-cascader-disabled .kd-cascader-picker-label {
4850
+ color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
4851
+ }
4852
+ .kd-cascader-disabled .kd-cascader-picker-input {
4853
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4854
+ }
4855
+ .kd-cascader-disabled .kd-cascader-picker-input > input {
4856
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4857
+ }
4858
+ .kd-cascader-disabled.kd-cascader-multiple {
4859
+ background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
4860
+ }
4861
+ .kd-cascader-disabled .kd-cascader-suffix {
4862
+ color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
4863
+ }
4864
+ .kd-cascader-disabled .kd-cascader-tag-describe-content {
4865
+ color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
4866
+ border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
4867
+ }
4868
+ .kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
4869
+ .kd-cascader-expand .kd-input-wrapper {
4870
+ border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4871
+ }
4872
+ .kd-cascader-multiple:not(.kd-cascader-disabled):hover,
4873
+ .kd-cascader-expand {
4874
+ border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
4875
+ }
4860
4876
 
4861
4877
  /* ----------- color ——————---- start */
4862
4878
  /* ----------- color ——————---- end */
@@ -5384,6 +5400,9 @@ template {
5384
5400
  -ms-flex-direction: column;
5385
5401
  flex-direction: column;
5386
5402
  }
5403
+ .kd-city-picker-selector {
5404
+ width: 100%;
5405
+ }
5387
5406
  .kd-city-picker-selector:hover .kd-city-picker-icon-active {
5388
5407
  color: #3761ca;
5389
5408
  }
@@ -5572,6 +5591,15 @@ template {
5572
5591
  -ms-flex-pack: center;
5573
5592
  justify-content: center;
5574
5593
  }
5594
+ .kd-city-picker-dropdown.topLeft.hidden,
5595
+ .kd-city-picker-dropdown.bottomLeft.hidden,
5596
+ .kd-city-picker-dropdown.topRight.hidden,
5597
+ .kd-city-picker-dropdown.bottomRight.hidden {
5598
+ opacity: 0;
5599
+ visibility: hidden;
5600
+ -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
5601
+ transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
5602
+ }
5575
5603
  .kd-city-picker-list {
5576
5604
  padding: 8px 0;
5577
5605
  max-height: 320px;
@@ -5597,18 +5625,27 @@ template {
5597
5625
  color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
5598
5626
  white-space: nowrap;
5599
5627
  }
5600
- .kd-city-picker-list-item:hover {
5628
+ .kd-city-picker-list-item-active:not(.kd-city-picker-list-item-disabled) {
5601
5629
  background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
5602
5630
  }
5603
5631
  .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
5604
5632
  background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
5605
5633
  color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
5606
5634
  }
5635
+ .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
5636
+ color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
5637
+ }
5607
5638
  .kd-city-picker-list-item-disabled {
5608
5639
  color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
5609
5640
  cursor: not-allowed;
5610
5641
  background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
5611
5642
  }
5643
+ .kd-city-picker-list > .kd-city-picker-list-item-match {
5644
+ color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
5645
+ }
5646
+ .kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
5647
+ color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
5648
+ }
5612
5649
  .kd-city-picker-highlight {
5613
5650
  color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
5614
5651
  }
@@ -5709,15 +5746,6 @@ template {
5709
5746
  white-space: nowrap;
5710
5747
  text-overflow: ellipsis;
5711
5748
  }
5712
- .kd-city-picker.topLeft.hidden,
5713
- .kd-city-picker.bottomLeft.hidden,
5714
- .kd-city-picker.topRight.hidden,
5715
- .kd-city-picker.bottomRight.hidden {
5716
- opacity: 0;
5717
- visibility: hidden;
5718
- -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
5719
- transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
5720
- }
5721
5749
 
5722
5750
  /* ----------- color ——————---- start */
5723
5751
  /* ----------- color ——————---- end */
@@ -5837,9 +5865,12 @@ template {
5837
5865
  .kd-collapse-panel:last-child {
5838
5866
  border-top: none;
5839
5867
  }
5840
- .kd-collapse-panel:first-child {
5868
+ .kd-collapse-panel-border.kd-collapse-panel:first-child {
5841
5869
  border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
5842
5870
  }
5871
+ .kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
5872
+ border-top: none;
5873
+ }
5843
5874
  .kd-collapse-panel {
5844
5875
  display: -webkit-inline-box;
5845
5876
  display: -ms-inline-flexbox;
@@ -8421,6 +8452,9 @@ template {
8421
8452
  .kd-form-field-hidden {
8422
8453
  display: none !important;
8423
8454
  }
8455
+ .kd-form-field-extra {
8456
+ margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
8457
+ }
8424
8458
  .kd-form-field-label {
8425
8459
  font-size: var(--kd-c-form-field-label-font-size, 12px);
8426
8460
  line-height: var(--kd-c-form-field-label-line-height, 18px);
@@ -8447,7 +8481,8 @@ template {
8447
8481
  .kd-form-field-wrapper {
8448
8482
  position: relative;
8449
8483
  }
8450
- .kd-form-field-wrapper-message {
8484
+ .kd-form-field-wrapper-message,
8485
+ .kd-form-field-wrapper-extra {
8451
8486
  position: absolute;
8452
8487
  left: -7px;
8453
8488
  right: 0;
@@ -8460,6 +8495,12 @@ template {
8460
8495
  white-space: nowrap;
8461
8496
  text-overflow: ellipsis;
8462
8497
  }
8498
+ .kd-form-field-wrapper-extra-message {
8499
+ color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
8500
+ }
8501
+ .kd-form-field-wrapper-extra-text {
8502
+ color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
8503
+ }
8463
8504
 
8464
8505
  /* ----------- color ——————---- start */
8465
8506
  /* ----------- color ——————---- end */
@@ -15202,6 +15243,7 @@ textarea {
15202
15243
  min-width: 75px;
15203
15244
  }
15204
15245
  .kd-select-item-option-content {
15246
+ max-width: var(--kd-c-select-item-sizing-max-width);
15205
15247
  overflow: hidden;
15206
15248
  white-space: nowrap;
15207
15249
  text-overflow: ellipsis;
@@ -17816,6 +17858,9 @@ textarea {
17816
17858
  display: inline-block;
17817
17859
  -webkit-transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
17818
17860
  transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
17861
+ overflow: hidden;
17862
+ text-overflow: ellipsis;
17863
+ max-width: var(--kd-c-tabs-pane-text-sizing-max-width);
17819
17864
  }
17820
17865
  .kd-tab-pane-text-active,
17821
17866
  .kd-tab-pane-text:hover {