@kdcloudjs/kdesign 1.3.8 → 1.3.9

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/CHANGELOG.md CHANGED
@@ -1,3 +1,14 @@
1
+ ## [1.3.8](https://github.com/kdcloudone/kdesign/compare/v1.3.7...v1.3.8) (2022-07-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [anchor] 锚点组件类名调整 ([af0619e](https://github.com/kdcloudone/kdesign/commit/af0619e8b7fb7565ea4f96774433d63684ff331d))
7
+ * [anchor] 锚点组件取消监听事件调整 ([07740e1](https://github.com/kdcloudone/kdesign/commit/07740e1ca7d2d7198392300d641799109e9fcb8a))
8
+ * [switch] 解决开关文字垂直没对齐问题 ([df90939](https://github.com/kdcloudone/kdesign/commit/df90939f3d158cd8a1b9524e69741b10939b63df))
9
+
10
+
11
+
1
12
  ## [1.3.7](https://github.com/kdcloudone/kdesign/compare/v1.3.6...v1.3.7) (2022-06-30)
2
13
 
3
14
 
@@ -5713,6 +5713,8 @@ textarea {
5713
5713
  @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
5714
5714
  @menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
5715
5715
  @menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
5716
+ @menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
5717
+ @menu-inline-prefix-cls: ~'@{menu-prefix-cls}-inline';
5716
5718
  @menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
5717
5719
  @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
5718
5720
 
@@ -5722,56 +5724,17 @@ textarea {
5722
5724
  &-inline {
5723
5725
  .@{menuitem-prefix-cls} {
5724
5726
  .ellipsis();
5725
-
5726
- &-active {
5727
- color: @menu-inline-color-active;
5728
- }
5729
5727
  }
5730
5728
 
5731
5729
  .@{submenu-prefix-cls} {
5732
5730
  padding-right: 0;
5733
5731
  }
5734
-
5735
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
5736
- color: @menu-inline-color-active;
5737
- }
5738
5732
  }
5739
5733
 
5740
5734
  &-collapsed {
5741
5735
  width: 50px;
5742
5736
  min-width: auto;
5743
5737
  }
5744
-
5745
- &-vertical {
5746
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
5747
- .@{submenu-prefix-cls}-hover {
5748
- .hover();
5749
- }
5750
- }
5751
-
5752
- &-light {
5753
- .light()
5754
- }
5755
-
5756
- &-light&-vertical {
5757
- .@{submenu-prefix-cls}-sub {
5758
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
5759
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
5760
- }
5761
-
5762
- .@{menuitem-prefix-cls} {
5763
- &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
5764
- .light-hover();
5765
- border: none;
5766
- }
5767
-
5768
- &-active {
5769
- color: @menu-light-color-active;
5770
- background-color: @menu-light-color-background-active;
5771
- border: none !important;
5772
- }
5773
- }
5774
- }
5775
5738
  }
5776
5739
 
5777
5740
  .@{menuitem-prefix-cls} {
@@ -5780,10 +5743,6 @@ textarea {
5780
5743
  transition: color, background-color;
5781
5744
  transition-duration: calc(@menu-motion-duration - 0.1s);
5782
5745
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
5783
-
5784
- &:not(&-disabled):hover {
5785
- .hover();
5786
- }
5787
5746
  }
5788
5747
 
5789
5748
  .@{submenu-prefix-cls} {
@@ -5793,13 +5752,8 @@ textarea {
5793
5752
  transition-duration: calc(@menu-motion-duration - 0.1s);
5794
5753
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
5795
5754
 
5796
- &-hover {
5797
- .hover();
5798
- }
5799
-
5800
5755
  &-sub {
5801
5756
  line-height: @menu-item-height;
5802
- color: @menu-sub-color;
5803
5757
  }
5804
5758
 
5805
5759
  &-thrid {
@@ -5875,24 +5829,66 @@ textarea {
5875
5829
  }
5876
5830
  }
5877
5831
 
5832
+ // dark
5878
5833
  .@{menu-dark-prefix-cls} {
5834
+
5879
5835
  .@{submenu-prefix-cls}-sub {
5836
+ color: @menu-sub-color;
5880
5837
  background: @menu-sub-inline-color-background;
5881
5838
  }
5882
5839
 
5883
5840
  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
5884
5841
  background: @menu-sub-color-background;
5885
5842
  }
5843
+
5844
+ .@{menuitem-prefix-cls} {
5845
+ &:hover {
5846
+ .hover();
5847
+ }
5848
+
5849
+ &-active {
5850
+ .active()
5851
+ }
5852
+ }
5853
+
5854
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
5855
+ .active()
5856
+ }
5857
+
5858
+ .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
5859
+ .hover()
5860
+ }
5886
5861
  }
5887
5862
 
5863
+ .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
5864
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
5865
+ .@{submenu-prefix-cls}-title {
5866
+ .active-inline-title()
5867
+ }
5868
+ }
5869
+
5870
+ .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled) {
5871
+ > .@{submenu-prefix-cls}-title:hover {
5872
+ .active-inline-title()
5873
+ }
5874
+ }
5875
+ }
5876
+
5877
+ // light
5888
5878
  .@{menu-light-prefix-cls} {
5889
- .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
5890
- .light-active()
5879
+ .light();
5880
+ }
5881
+
5882
+ .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
5883
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
5884
+ .@{submenu-prefix-cls}-title {
5885
+ .light-active-inline-title()
5886
+ }
5891
5887
  }
5892
5888
  }
5893
5889
 
5894
5890
  .@{menu-popper-prefix-cls} {
5895
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
5891
+ .@{submenu-prefix-cls}:hover,
5896
5892
  .@{submenu-prefix-cls}-hover {
5897
5893
  .hover();
5898
5894
  }
@@ -5911,12 +5907,15 @@ textarea {
5911
5907
  padding-right: 0;
5912
5908
 
5913
5909
  &-sub {
5910
+ color: @menu-sub-color;
5914
5911
  background: @menu-sub-inline-color-background;
5912
+ box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
5913
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05);
5915
5914
 
5916
5915
  .@{menuitem-prefix-cls} {
5917
5916
  &:hover,
5918
5917
  &-active {
5919
- color: @menu-sub-color-active;
5918
+ .hover()
5920
5919
  }
5921
5920
  }
5922
5921
 
@@ -5943,27 +5942,6 @@ textarea {
5943
5942
 
5944
5943
  &.light {
5945
5944
  .light();
5946
-
5947
- .@{submenu-prefix-cls}-sub {
5948
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
5949
- 0 9px 28px 8px rgba(0, 0, 0, 0.05);
5950
- }
5951
-
5952
- .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
5953
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
5954
- .light-hover();
5955
- border: none;
5956
- }
5957
-
5958
- .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
5959
- .light-hover();
5960
- border: none;
5961
- }
5962
-
5963
- .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
5964
- .light-active();
5965
- border: none;
5966
- }
5967
5945
  }
5968
5946
  }
5969
5947
 
@@ -5997,12 +5975,15 @@ textarea {
5997
5975
  cursor: pointer;
5998
5976
 
5999
5977
  &-title {
6000
- .menuItemTitle();
6001
- }
6002
-
6003
- &-title > span {
6004
- opacity: 1;
6005
- transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
5978
+ display: flex;
5979
+ align-items: center;
5980
+ height: 50px;
5981
+ .ellipsis();
5982
+ & > span {
5983
+ .ellipsis();
5984
+ opacity: 1;
5985
+ transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
5986
+ }
6006
5987
  }
6007
5988
 
6008
5989
  &-collapsed {
@@ -6019,7 +6000,7 @@ textarea {
6019
6000
 
6020
6001
  & > span {
6021
6002
  opacity: 0;
6022
- transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
6003
+ transition: opacity calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
6023
6004
  }
6024
6005
  }
6025
6006
  }
@@ -6031,80 +6012,94 @@ textarea {
6031
6012
 
6032
6013
  &-disabled {
6033
6014
  cursor: not-allowed;
6034
- color: @menu-color-disabled;
6035
- }
6036
-
6037
- &-active {
6038
- .hover();
6015
+ color: @menu-color-disabled !important;
6016
+ background-color: @menu-color-background !important;
6039
6017
  }
6040
6018
 
6041
6019
  &-arrow {
6042
6020
  margin-left: auto;
6043
6021
  font-size: 16px;
6022
+
6044
6023
  &-up {
6045
6024
  transform: rotate(180deg);
6046
- transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0,.4,.4,1);
6025
+ transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1);
6047
6026
  }
6048
6027
 
6049
6028
  &-down {
6050
6029
  transform: rotate(0deg);
6051
- transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
6030
+ transition: transform calc(@menu-motion-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
6052
6031
  }
6053
6032
  }
6054
6033
  }
6055
6034
 
6035
+
6056
6036
  .hover {
6057
6037
  background-color: @menu-sub-color-background;
6058
6038
  color: @menu-sub-color-hover;
6059
6039
  }
6060
6040
 
6061
- .light-hover {
6062
- background-color: @menu-light-color-background-hover;
6063
- color: @menu-light-color-hover;
6064
- }
6065
-
6066
- .light-active {
6067
- background-color: @menu-light-color-background-active;
6068
- color: @menu-light-color-active;
6069
- }
6070
-
6071
- .light-default {
6072
- color: @menu-light-color;
6073
- background: #ffffff;
6041
+ .active {
6042
+ background-color: @menu-sub-color-background;
6043
+ color: @menu-sub-color-hover;
6074
6044
  }
6075
6045
 
6076
- .menuItemTitle() {
6077
- display: flex;
6078
- align-items: center;
6079
- height: 50px;
6080
- .ellipsis();
6081
- & > span {
6082
- .ellipsis();
6083
- }
6046
+ .active-inline-title {
6047
+ color: @menu-sub-color-hover !important;
6048
+ background: @menu-color-background !important;
6049
+ border: none;
6084
6050
  }
6085
6051
 
6086
6052
 
6087
6053
  .light {
6088
6054
  .light-default();
6089
6055
 
6090
- .@{submenu-prefix-cls}-hover,
6091
- .@{submenu-prefix-cls}-sub {
6092
- .light-default();
6056
+ .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
6057
+ background-color: #fff !important;
6093
6058
  }
6094
6059
 
6095
- .@{submenu-prefix-cls}-title:hover {
6096
- color: @menu-light-color-hover;
6060
+ .@{submenu-prefix-cls}-sub {
6061
+ color: @menu-light-color;
6062
+ background: #FAFAFA;
6097
6063
  }
6098
6064
 
6099
- .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
6065
+ .@{menuitem-prefix-cls}:hover {
6100
6066
  .light-hover();
6101
6067
  }
6102
6068
 
6103
- .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):hover {
6069
+ .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
6104
6070
  .light-hover();
6105
6071
  }
6072
+
6073
+ .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
6074
+ .light-active();
6075
+ }
6106
6076
  }
6107
6077
 
6078
+ .light-default {
6079
+ color: @menu-light-color;
6080
+ background: #ffffff;
6081
+ }
6082
+
6083
+ .light-hover {
6084
+ background-color: @menu-light-color-background-hover;
6085
+ color: @menu-light-color-hover;
6086
+ border: none;
6087
+ }
6088
+
6089
+ .light-active {
6090
+ background-color: @menu-light-color-background-active !important;
6091
+ color: @menu-light-color-active !important;
6092
+ border: none;
6093
+ }
6094
+
6095
+ .light-active-inline-title {
6096
+ color: @menu-light-color-active !important;
6097
+ background: #ffffff !important;
6098
+ border: none;
6099
+ }
6100
+
6101
+
6102
+
6108
6103
 
6109
6104
 
6110
6105
  @menu-prefix: '--@{kd-prefix}-c-menu';
@@ -13507,7 +13502,6 @@ template {
13507
13502
  pointer-events: none;
13508
13503
  }
13509
13504
  &-item {
13510
- height: @tree-node-height;
13511
13505
  display: flex;
13512
13506
  align-items: center;
13513
13507
  }
@@ -13528,7 +13522,7 @@ template {
13528
13522
  border-right: 10px;
13529
13523
  border-color: white;
13530
13524
  border-style: solid;
13531
- height: @tree-node-height;
13525
+ height: 100%;
13532
13526
  cursor: default;
13533
13527
  opacity: 0;
13534
13528
  }
@@ -13625,7 +13619,6 @@ template {
13625
13619
  @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
13626
13620
 
13627
13621
  // sizing
13628
- @tree-node-height: var(~'@{tree-prefix}-node-sizing-height', 32px);
13629
13622
  @tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);
13630
13623
  @tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 22px);
13631
13624
  @tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 20px);