@kdcloudjs/kdesign 1.6.2 → 1.6.4

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 (16) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/kdesign-complete.less +6 -8
  3. package/dist/kdesign.css +41 -41
  4. package/dist/kdesign.css.map +1 -1
  5. package/dist/kdesign.js +9 -7
  6. package/dist/kdesign.js.map +1 -1
  7. package/dist/kdesign.min.css +2 -2
  8. package/dist/kdesign.min.js +3 -3
  9. package/dist/kdesign.min.js.map +1 -1
  10. package/es/date-picker/style/index.css +40 -40
  11. package/es/date-picker/style/index.less +3 -8
  12. package/es/date-picker/style/token.less +3 -0
  13. package/lib/date-picker/style/index.css +40 -40
  14. package/lib/date-picker/style/index.less +3 -8
  15. package/lib/date-picker/style/token.less +3 -0
  16. package/package.json +1 -1
package/es/date-picker/style/index.css CHANGED
@@ -105,7 +105,6 @@
105
105
  /* 单行显示省略号 */
106
106
  /** 浮层箭头样式 **/
107
107
  .kd-date-picker {
108
- width: var(--kd-c-date-picker-sizing-width, 230px);
109
108
  display: -webkit-inline-box;
110
109
  display: -ms-inline-flexbox;
111
110
  display: inline-flex;
@@ -114,6 +113,43 @@
114
113
  -webkit-box-sizing: border-box;
115
114
  box-sizing: border-box;
116
115
  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
116
+ width: var(--kd-c-date-picker-sizing-width, 230px);
117
+ }
118
+ .kd-date-picker-borderless {
119
+ border: 0;
120
+ }
121
+ .kd-date-picker-underline {
122
+ border: none;
123
+ border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
124
+ border-radius: 0;
125
+ padding-left: 0;
126
+ padding-right: 0;
127
+ }
128
+ .kd-date-picker-disabled {
129
+ background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
130
+ border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
131
+ color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
132
+ cursor: not-allowed !important;
133
+ }
134
+ .kd-date-picker-disabled input {
135
+ cursor: not-allowed !important;
136
+ }
137
+ .kd-date-picker-underline.kd-date-picker-disabled,
138
+ .kd-date-picker-borderless.kd-date-picker-disabled {
139
+ background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
140
+ border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
141
+ }
142
+ .kd-date-picker-focused {
143
+ -webkit-box-shadow: none;
144
+ box-shadow: none;
145
+ outline: none;
146
+ border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
147
+ }
148
+ .kd-date-picker:hover {
149
+ border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
150
+ }
151
+ .kd-date-picker:not(.kd-date-picker-disabled) input:focus {
152
+ color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
117
153
  }
118
154
  .kd-date-picker-small {
119
155
  height: var(--kd-c-date-picker-small-sizing-height, 20px);
@@ -160,42 +196,6 @@
160
196
  .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
161
197
  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
162
198
  }
163
- .kd-date-picker-borderless {
164
- border: 0;
165
- }
166
- .kd-date-picker-underline {
167
- border: none;
168
- border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
169
- border-radius: 0;
170
- padding-left: 0;
171
- padding-right: 0;
172
- }
173
- .kd-date-picker-disabled {
174
- background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
175
- border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
176
- color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
177
- cursor: not-allowed !important;
178
- }
179
- .kd-date-picker-disabled input {
180
- cursor: not-allowed !important;
181
- }
182
- .kd-date-picker-underline.kd-date-picker-disabled,
183
- .kd-date-picker-borderless.kd-date-picker-disabled {
184
- background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
185
- border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
186
- }
187
- .kd-date-picker-focused {
188
- -webkit-box-shadow: none;
189
- box-shadow: none;
190
- outline: none;
191
- border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
192
- }
193
- .kd-date-picker:hover {
194
- border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
195
- }
196
- .kd-date-picker:not(.kd-date-picker-disabled) input:focus {
197
- color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
198
- }
199
199
  .kd-date-picker-input {
200
200
  position: relative;
201
201
  display: -webkit-box;
@@ -299,10 +299,10 @@
299
299
  .kd-date-picker-suffix > * {
300
300
  vertical-align: top;
301
301
  }
302
- .kd-date-picker:hover .kd-date-picker-clear {
302
+ .kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
303
303
  opacity: 1;
304
304
  }
305
- .kd-date-picker:hover .kd-date-picker-suffix {
305
+ .kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-suffix {
306
306
  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
307
307
  }
308
308
  .kd-date-picker-clear {
@@ -331,7 +331,7 @@
331
331
  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
332
332
  background-color: #fff;
333
333
  text-align: center;
334
- z-index: 999;
334
+ z-index: var(--kd-c-date-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
335
335
  font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
336
336
  }
337
337
  .kd-date-picker-panel-range {
package/es/date-picker/style/index.less CHANGED
@@ -12,10 +12,7 @@
12
12
  @datePicker-calendar-height: 242px;
13
13
 
14
14
  .@{datePicker-prefix-cls} {
15
- // &-small {
16
- // height: @date-small-height;
17
- // line-height: @date-small-height - 4;
18
- // }
15
+ .input-wrapper;
19
16
  width: @date-width;
20
17
 
21
18
  &-small {
@@ -66,8 +63,6 @@
66
63
  }
67
64
  }
68
65
 
69
- .input-wrapper;
70
-
71
66
  &-input {
72
67
  position: relative;
73
68
  display: flex;
@@ -147,7 +142,7 @@
147
142
  }
148
143
  }
149
144
 
150
- &:hover {
145
+ &:not(.@{datePicker-prefix-cls}-disabled):hover {
151
146
  .@{datePicker-prefix-cls}-clear {
152
147
  opacity: 1;
153
148
  }
@@ -188,7 +183,7 @@
188
183
  border-radius: @date-panel-border-radius;
189
184
  background-color: #fff;
190
185
  text-align: center;
191
- z-index: 999;
186
+ z-index: @date-panel-z-index;
192
187
  font-size: @date-panel-font-size;
193
188
 
194
189
  &-range {
package/es/date-picker/style/token.less CHANGED
@@ -51,3 +51,6 @@
51
51
  // radius
52
52
  @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
53
53
  @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
54
+
55
+ // z-index
56
+ @date-panel-z-index: var(~'@{date-picker-custom-prefix}-panel-z-index', @z-index-popper);
package/lib/date-picker/style/index.css CHANGED
@@ -105,7 +105,6 @@
105
105
  /* 单行显示省略号 */
106
106
  /** 浮层箭头样式 **/
107
107
  .kd-date-picker {
108
- width: var(--kd-c-date-picker-sizing-width, 230px);
109
108
  display: -webkit-inline-box;
110
109
  display: -ms-inline-flexbox;
111
110
  display: inline-flex;
@@ -114,6 +113,43 @@
114
113
  -webkit-box-sizing: border-box;
115
114
  box-sizing: border-box;
116
115
  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
116
+ width: var(--kd-c-date-picker-sizing-width, 230px);
117
+ }
118
+ .kd-date-picker-borderless {
119
+ border: 0;
120
+ }
121
+ .kd-date-picker-underline {
122
+ border: none;
123
+ border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
124
+ border-radius: 0;
125
+ padding-left: 0;
126
+ padding-right: 0;
127
+ }
128
+ .kd-date-picker-disabled {
129
+ background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
130
+ border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
131
+ color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
132
+ cursor: not-allowed !important;
133
+ }
134
+ .kd-date-picker-disabled input {
135
+ cursor: not-allowed !important;
136
+ }
137
+ .kd-date-picker-underline.kd-date-picker-disabled,
138
+ .kd-date-picker-borderless.kd-date-picker-disabled {
139
+ background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
140
+ border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
141
+ }
142
+ .kd-date-picker-focused {
143
+ -webkit-box-shadow: none;
144
+ box-shadow: none;
145
+ outline: none;
146
+ border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
147
+ }
148
+ .kd-date-picker:hover {
149
+ border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
150
+ }
151
+ .kd-date-picker:not(.kd-date-picker-disabled) input:focus {
152
+ color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
117
153
  }
118
154
  .kd-date-picker-small {
119
155
  height: var(--kd-c-date-picker-small-sizing-height, 20px);
@@ -160,42 +196,6 @@
160
196
  .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
161
197
  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
162
198
  }
163
- .kd-date-picker-borderless {
164
- border: 0;
165
- }
166
- .kd-date-picker-underline {
167
- border: none;
168
- border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
169
- border-radius: 0;
170
- padding-left: 0;
171
- padding-right: 0;
172
- }
173
- .kd-date-picker-disabled {
174
- background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
175
- border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
176
- color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
177
- cursor: not-allowed !important;
178
- }
179
- .kd-date-picker-disabled input {
180
- cursor: not-allowed !important;
181
- }
182
- .kd-date-picker-underline.kd-date-picker-disabled,
183
- .kd-date-picker-borderless.kd-date-picker-disabled {
184
- background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
185
- border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
186
- }
187
- .kd-date-picker-focused {
188
- -webkit-box-shadow: none;
189
- box-shadow: none;
190
- outline: none;
191
- border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
192
- }
193
- .kd-date-picker:hover {
194
- border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
195
- }
196
- .kd-date-picker:not(.kd-date-picker-disabled) input:focus {
197
- color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
198
- }
199
199
  .kd-date-picker-input {
200
200
  position: relative;
201
201
  display: -webkit-box;
@@ -299,10 +299,10 @@
299
299
  .kd-date-picker-suffix > * {
300
300
  vertical-align: top;
301
301
  }
302
- .kd-date-picker:hover .kd-date-picker-clear {
302
+ .kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
303
303
  opacity: 1;
304
304
  }
305
- .kd-date-picker:hover .kd-date-picker-suffix {
305
+ .kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-suffix {
306
306
  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
307
307
  }
308
308
  .kd-date-picker-clear {
@@ -331,7 +331,7 @@
331
331
  border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
332
332
  background-color: #fff;
333
333
  text-align: center;
334
- z-index: 999;
334
+ z-index: var(--kd-c-date-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
335
335
  font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
336
336
  }
337
337
  .kd-date-picker-panel-range {
package/lib/date-picker/style/index.less CHANGED
@@ -12,10 +12,7 @@
12
12
  @datePicker-calendar-height: 242px;
13
13
 
14
14
  .@{datePicker-prefix-cls} {
15
- // &-small {
16
- // height: @date-small-height;
17
- // line-height: @date-small-height - 4;
18
- // }
15
+ .input-wrapper;
19
16
  width: @date-width;
20
17
 
21
18
  &-small {
@@ -66,8 +63,6 @@
66
63
  }
67
64
  }
68
65
 
69
- .input-wrapper;
70
-
71
66
  &-input {
72
67
  position: relative;
73
68
  display: flex;
@@ -147,7 +142,7 @@
147
142
  }
148
143
  }
149
144
 
150
- &:hover {
145
+ &:not(.@{datePicker-prefix-cls}-disabled):hover {
151
146
  .@{datePicker-prefix-cls}-clear {
152
147
  opacity: 1;
153
148
  }
@@ -188,7 +183,7 @@
188
183
  border-radius: @date-panel-border-radius;
189
184
  background-color: #fff;
190
185
  text-align: center;
191
- z-index: 999;
186
+ z-index: @date-panel-z-index;
192
187
  font-size: @date-panel-font-size;
193
188
 
194
189
  &-range {
package/lib/date-picker/style/token.less CHANGED
@@ -51,3 +51,6 @@
51
51
  // radius
52
52
  @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
53
53
  @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
54
+
55
+ // z-index
56
+ @date-panel-z-index: var(~'@{date-picker-custom-prefix}-panel-z-index', @z-index-popper);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/kdesign",
3
- "version": "1.6.2",
3
+ "version": "1.6.4",
4
4
  "description": "KDesign 金蝶前端react 组件库",
5
5
  "title": "kdesign",
6
6
  "keywords": [