@kdcloudjs/kdesign 1.7.48-usePopper.1 → 1.7.49

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.
@@ -1,356 +0,0 @@
1
- /* ----------- color ——————---- start */
2
- /* ----------- color ——————---- end */
3
- /* ----------- motion ——————---- start */
4
- /* ----------- motion ——————---- end */
5
- /* ----------- transition ——————---- start */
6
- /* ----------- transition ——————---- end */
7
- /* ----------- font ——————---- start */
8
- /* ----------- font ——————---- end */
9
- /* ----------- zIndex ——————---- start */
10
- /*
11
- 普通组件内部自身层级应设置在0-100间
12
- */
13
- /* ----------- zIndex ——————---- end */
14
- /* ----------- Button ——————---- start */
15
- /* ----------- Button ——————---- end */
16
- /* ----------- Collapse ——————---- start */
17
- /* ----------- Collapse ——————---- end */
18
- /* ----------- Card ——————---- start */
19
- /* ----------- Card ——————---- end */
20
- /* ----------- Carousel ——————---- start */
21
- /* ----------- Carousel ——————---- end */
22
- /* ----------- Cascader ——————---- start */
23
- /* ----------- Cascader ——————---- end */
24
- /* ----------- Switch ——————---- start */
25
- /* ----------- Switch ——————---- end */
26
- /* ----------- Input ——————---- start */
27
- /* ----------- Input ——————---- end */
28
- /* ----------- InputNumber ——————---- start */
29
- /* ----------- InputNumber ——————---- end */
30
- /* ----------- checkbox ——————---- start */
31
- /* ----------- checkbox ——————---- start */
32
- /* ----------- checkbox ——————---- end */
33
- /* ----------- Radio ——————---- start */
34
- /* ----------- Radio ——————---- end */
35
- /* ----------- icon ——————---- start */
36
- /* ----------- icon ——————---- end */
37
- /* ----------- Popconfirm ——————---- start */
38
- /* ----------- Popconfirm ——————---- end */
39
- /* ----------- Progress ——————---- start */
40
- /* ----------- Progress ——————---- end */
41
- /* ----------- Pagination ——————---- start */
42
- /* ----------- Pagination ——————---- end */
43
- /* ----------- Timeline ——————---- start */
44
- /* ----------- Timeline ——————---- end */
45
- /* ----------- Tabs ——————---- start */
46
- /* ----------- Tabs ——————---- end */
47
- /* ----------- Select ——————---- start */
48
- /* ----------- Select ——————---- end */
49
- /* ----------- Rate ——————---- start */
50
- /* ----------- Rate ——————---- end */
51
- /* ----------- Dropdown ——————---- start */
52
- /* ----------- Dropdown ——————---- end */
53
- /* ----------- Tooltip ——————---- start */
54
- /* ----------- Tooltip ——————---- end */
55
- /* ----------- Transfer ——————---- start */
56
- /* ----------- Transfer ——————---- end */
57
- /* ----------- DatePicker ——————---- start */
58
- /* ----------- DatePicker ——————---- end */
59
- /* ----------- ColorPicker ——————---- start */
60
- /* ----------- ColorPicker ——————---- end */
61
- /* ----------- Tree ——————---- start */
62
- /* ----------- Tree ——————---- end */
63
- /* ----------- Alert ——————---- start */
64
- /* ----------- Alert ——————---- end */
65
- /* ----------- Split-Panel ——————---- start */
66
- /* ----------- Split-Panel ——————---- end */
67
- /* ----------- Modal ——————---- start */
68
- /* ----------- Modal ——————---- end */
69
- /* ----------- Steps ——————---- start */
70
- /* ----------- Steps ——————---- end */
71
- /* ----------- Form ——————---- start */
72
- /* ----------- Form ——————---- end */
73
- /* ----------- Tag ——————---- start */
74
- /* ----------- Tag ——————---- end */
75
- /* ----------- Menu ——————---- start */
76
- /* ----------- Menu ——————---- end */
77
- /* ----------- notice ——————---- start */
78
- /* ----------- message ——————---- end */
79
- /* ----------- Spin ——————---- start */
80
- /* ----------- Spin ——————---- end */
81
- /* ----------- Spin ——————---- start */
82
- /* ----------- Spin ——————---- end */
83
- /* ----------- Layout ——————---- start */
84
- /* ----------- Layout ——————---- end */
85
- /* ----------- Typography ——————---- start */
86
- /* ----------- Typography ——————---- start */
87
- /* ----------- Search ——————---- start */
88
- /* ----------- Search ——————---- start */
89
- /* ----------- Badge ——————---- start */
90
- /* ----------- Badge ——————---- end */
91
- /* ----------- Anchor ——————---- start */
92
- /* ----------- Anchor ——————---- end */
93
- /* ----------- Avatar ——————---- start */
94
- /* ----------- Avatar ——————---- end */
95
- /* ----------- AdvancedSelector ——————---- start */
96
- /* ----------- AdvancedSelector ——————---- end */
97
- /* ----------- motion ——————---- start */
98
- /* ----------- motion ——————---- end */
99
- /* ----------- transition ——————---- start */
100
- /* ----------- transition ——————---- end */
101
- /* ----------- zIndex ——————---- start */
102
- /*
103
- 普通组件内部自身层级应设置在0-100间
104
- */
105
- /* ----------- zIndex ——————---- end */
106
- /* 多行显示省略号 */
107
- /* 单行显示省略号 */
108
- /** 浮层箭头样式 **/
109
- .kd-popper {
110
- opacity: 1;
111
- z-index: var(--kd-g-z-index-popper, 1050);
112
- visibility: visible;
113
- }
114
- .kd-popper.hidden {
115
- opacity: 0;
116
- visibility: hidden;
117
- -webkit-transition: all calc(0.3s - 0.1s);
118
- transition: all calc(0.3s - 0.1s);
119
- pointer-events: none;
120
- }
121
- .kd-popper-content .arrow {
122
- visibility: hidden;
123
- }
124
- .kd-popper-content .arrow::before {
125
- visibility: visible;
126
- position: absolute;
127
- border-style: solid;
128
- border-width: var(--arrowSize);
129
- content: '';
130
- -webkit-transform: rotate(45deg);
131
- transform: rotate(45deg);
132
- }
133
- .kd-popper[data-popper-placement^='top'] .arrow {
134
- bottom: var(--arrowSize);
135
- }
136
- .kd-popper[data-popper-placement^='top'] .arrow::before {
137
- left: calc(-1 * var(--arrowSize));
138
- border-top-color: transparent;
139
- border-left-color: transparent;
140
- }
141
- .kd-popper[data-popper-placement^='bottom'] .arrow {
142
- top: calc(-1 * var(--arrowSize));
143
- }
144
- .kd-popper[data-popper-placement^='bottom'] .arrow::before {
145
- left: calc(-1 * var(--arrowSize));
146
- border-bottom-color: transparent;
147
- border-right-color: transparent;
148
- }
149
- .kd-popper[data-popper-placement^='left'] .arrow {
150
- right: var(--arrowSize);
151
- }
152
- .kd-popper[data-popper-placement^='left'] .arrow::before {
153
- top: calc(-1 * var(--arrowSize));
154
- border-left-color: transparent;
155
- border-bottom-color: transparent;
156
- }
157
- .kd-popper[data-popper-placement^='right'] .arrow {
158
- left: calc(-1 * var(--arrowSize));
159
- }
160
- .kd-popper[data-popper-placement^='right'] .arrow::before {
161
- top: calc(-1 * var(--arrowSize));
162
- border-top-color: transparent;
163
- border-right-color: transparent;
164
- }
165
- .kd-popper-top {
166
- -webkit-animation-duration: calc(0.3s - 0.1s);
167
- animation-duration: calc(0.3s - 0.1s);
168
- }
169
- .kd-popper-top-in {
170
- -webkit-animation-name: kdZoomBottomIn;
171
- animation-name: kdZoomBottomIn;
172
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
173
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
174
- }
175
- .kd-popper-top-out {
176
- -webkit-animation-name: kdZoomBottomOut;
177
- animation-name: kdZoomBottomOut;
178
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
179
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
180
- }
181
- .kd-popper-left {
182
- -webkit-animation-duration: calc(0.3s - 0.1s);
183
- animation-duration: calc(0.3s - 0.1s);
184
- }
185
- .kd-popper-left-in {
186
- -webkit-animation-name: kdZoomRightIn;
187
- animation-name: kdZoomRightIn;
188
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
189
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
190
- }
191
- .kd-popper-left-out {
192
- -webkit-animation-name: kdZoomRightOut;
193
- animation-name: kdZoomRightOut;
194
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
195
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
196
- }
197
- .kd-popper-right {
198
- -webkit-animation-duration: calc(0.3s - 0.1s);
199
- animation-duration: calc(0.3s - 0.1s);
200
- }
201
- .kd-popper-right-in {
202
- -webkit-animation-name: kdZoomLeftIn;
203
- animation-name: kdZoomLeftIn;
204
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
205
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
206
- }
207
- .kd-popper-right-out {
208
- -webkit-animation-name: kdZoomLeftOut;
209
- animation-name: kdZoomLeftOut;
210
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
211
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
212
- }
213
- .kd-popper-bottom {
214
- -webkit-animation-duration: calc(0.3s - 0.1s);
215
- animation-duration: calc(0.3s - 0.1s);
216
- }
217
- .kd-popper-bottom-in {
218
- -webkit-animation-name: kdZoomTopIn;
219
- animation-name: kdZoomTopIn;
220
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
221
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
222
- }
223
- .kd-popper-bottom-out {
224
- -webkit-animation-name: kdZoomTopOut;
225
- animation-name: kdZoomTopOut;
226
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
227
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
228
- }
229
- .kd-popper-top-start {
230
- -webkit-animation-duration: calc(0.3s - 0.1s);
231
- animation-duration: calc(0.3s - 0.1s);
232
- }
233
- .kd-popper-top-start-in {
234
- -webkit-animation-name: kdZoomLeftBottomIn;
235
- animation-name: kdZoomLeftBottomIn;
236
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
237
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
238
- }
239
- .kd-popper-top-start-out {
240
- -webkit-animation-name: kdZoomLeftBottomOut;
241
- animation-name: kdZoomLeftBottomOut;
242
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
243
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
244
- }
245
- .kd-popper-rightBottom {
246
- -webkit-animation-duration: calc(0.3s - 0.1s);
247
- animation-duration: calc(0.3s - 0.1s);
248
- }
249
- .kd-popper-rightBottom-in {
250
- -webkit-animation-name: kdZoomLeftBottomIn;
251
- animation-name: kdZoomLeftBottomIn;
252
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
253
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
254
- }
255
- .kd-popper-rightBottom-out {
256
- -webkit-animation-name: kdZoomLeftBottomOut;
257
- animation-name: kdZoomLeftBottomOut;
258
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
259
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
260
- }
261
- .kd-popper-top-end {
262
- -webkit-animation-duration: calc(0.3s - 0.1s);
263
- animation-duration: calc(0.3s - 0.1s);
264
- }
265
- .kd-popper-top-end-in {
266
- -webkit-animation-name: kdZoomRightBottomIn;
267
- animation-name: kdZoomRightBottomIn;
268
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
269
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
270
- }
271
- .kd-popper-top-end-out {
272
- -webkit-animation-name: kdZoomRightBottomOut;
273
- animation-name: kdZoomRightBottomOut;
274
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
275
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
276
- }
277
- .kd-popper-left-end {
278
- -webkit-animation-duration: calc(0.3s - 0.1s);
279
- animation-duration: calc(0.3s - 0.1s);
280
- }
281
- .kd-popper-left-end-in {
282
- -webkit-animation-name: kdZoomRightBottomIn;
283
- animation-name: kdZoomRightBottomIn;
284
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
285
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
286
- }
287
- .kd-popper-left-end-out {
288
- -webkit-animation-name: kdZoomRightBottomOut;
289
- animation-name: kdZoomRightBottomOut;
290
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
291
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
292
- }
293
- .kd-popper-left-start {
294
- -webkit-animation-duration: calc(0.3s - 0.1s);
295
- animation-duration: calc(0.3s - 0.1s);
296
- }
297
- .kd-popper-left-start-in {
298
- -webkit-animation-name: kdZoomTopRightIn;
299
- animation-name: kdZoomTopRightIn;
300
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
301
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
302
- }
303
- .kd-popper-left-start-out {
304
- -webkit-animation-name: kdZoomTopRightOut;
305
- animation-name: kdZoomTopRightOut;
306
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
307
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
308
- }
309
- .kd-popper-bottom-end {
310
- -webkit-animation-duration: calc(0.3s - 0.1s);
311
- animation-duration: calc(0.3s - 0.1s);
312
- }
313
- .kd-popper-bottom-end-in {
314
- -webkit-animation-name: kdZoomTopRightIn;
315
- animation-name: kdZoomTopRightIn;
316
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
317
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
318
- }
319
- .kd-popper-bottom-end-out {
320
- -webkit-animation-name: kdZoomTopRightOut;
321
- animation-name: kdZoomTopRightOut;
322
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
323
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
324
- }
325
- .kd-popper-right-start {
326
- -webkit-animation-duration: calc(0.3s - 0.1s);
327
- animation-duration: calc(0.3s - 0.1s);
328
- }
329
- .kd-popper-right-start-in {
330
- -webkit-animation-name: kdZoomTopLeftIn;
331
- animation-name: kdZoomTopLeftIn;
332
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
333
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
334
- }
335
- .kd-popper-right-start-out {
336
- -webkit-animation-name: kdZoomTopLeftOut;
337
- animation-name: kdZoomTopLeftOut;
338
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
339
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
340
- }
341
- .kd-popper-bottom-start {
342
- -webkit-animation-duration: calc(0.3s - 0.1s);
343
- animation-duration: calc(0.3s - 0.1s);
344
- }
345
- .kd-popper-bottom-start-in {
346
- -webkit-animation-name: kdZoomTopLeftIn;
347
- animation-name: kdZoomTopLeftIn;
348
- -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
349
- animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
350
- }
351
- .kd-popper-bottom-start-out {
352
- -webkit-animation-name: kdZoomTopLeftOut;
353
- animation-name: kdZoomTopLeftOut;
354
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
355
- animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
356
- }
@@ -1,2 +0,0 @@
1
- import '../../style/index.less';
2
- import './index.less';
@@ -1,2 +0,0 @@
1
- import '../../style/index.less';
2
- import './index.less';
@@ -1,103 +0,0 @@
1
- @import '../../style/themes/index';
2
- @import '../../style/mixins/index';
3
- // @import './token.less';
4
-
5
- @popper-prefix-cls: ~'@{kd-prefix}-popper';
6
-
7
- .@{popper-prefix-cls} {
8
- opacity: 1;
9
- z-index: @z-index-popper;
10
- visibility: visible;
11
-
12
- &.hidden {
13
- opacity: 0;
14
- visibility: hidden;
15
- transition: all calc(@transition-duration - 0.1s);
16
- pointer-events: none;
17
- }
18
-
19
- &-content {
20
- .arrow {
21
- visibility: hidden;
22
-
23
- &::before {
24
- visibility: visible;
25
- position: absolute;
26
- border-style: solid;
27
- border-width: var(--arrowSize);
28
- content: '';
29
- transform: rotate(45deg);
30
- }
31
- }
32
- }
33
-
34
- &[data-popper-placement^='top'] .arrow {
35
- bottom: var(--arrowSize);
36
-
37
- &::before {
38
- left: calc(-1 * var(--arrowSize));
39
- border-top-color: transparent;
40
- border-left-color: transparent;
41
- }
42
- }
43
-
44
- &[data-popper-placement^='bottom'] .arrow {
45
- top: calc(-1 * var(--arrowSize));
46
-
47
- &::before {
48
- left: calc(-1 * var(--arrowSize));
49
- border-bottom-color: transparent;
50
- border-right-color: transparent;
51
- }
52
- }
53
-
54
- &[data-popper-placement^='left'] .arrow {
55
- right: var(--arrowSize);
56
-
57
- &::before {
58
- top: calc(-1 * var(--arrowSize));
59
- border-left-color: transparent;
60
- border-bottom-color: transparent;
61
- }
62
- }
63
-
64
- &[data-popper-placement^='right'] .arrow {
65
- left: calc(-1 * var(--arrowSize));
66
-
67
- &::before {
68
- top: calc(-1 * var(--arrowSize));
69
- border-top-color: transparent;
70
- border-right-color: transparent;
71
- }
72
- }
73
- }
74
-
75
- .popper-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
76
- .@{className} {
77
- animation-duration: @duration;
78
-
79
- &-in {
80
- animation-name: ~'@{keyframeName}In';
81
- animation-timing-function: @ease-out;
82
- }
83
-
84
- &-out {
85
- animation-name: ~'@{keyframeName}Out';
86
- animation-timing-function: @ease-in;
87
- }
88
- }
89
- }
90
-
91
- .popper-motion(~'@{popper-prefix-cls}-top', kdZoomBottom);
92
- .popper-motion(~'@{popper-prefix-cls}-left', kdZoomRight);
93
- .popper-motion(~'@{popper-prefix-cls}-right', kdZoomLeft);
94
- .popper-motion(~'@{popper-prefix-cls}-bottom', kdZoomTop);
95
- .popper-motion(~'@{popper-prefix-cls}-top-start', kdZoomLeftBottom);
96
- .popper-motion(~'@{popper-prefix-cls}-rightBottom', kdZoomLeftBottom);
97
- .popper-motion(~'@{popper-prefix-cls}-top-end', kdZoomRightBottom);
98
- .popper-motion(~'@{popper-prefix-cls}-left-end', kdZoomRightBottom);
99
- .popper-motion(~'@{popper-prefix-cls}-left-start', kdZoomTopRight);
100
- .popper-motion(~'@{popper-prefix-cls}-bottom-end', kdZoomTopRight);
101
- .popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
102
- .popper-motion(~'@{popper-prefix-cls}-bottom-start', kdZoomTopLeft);
103
-
@@ -1,51 +0,0 @@
1
- import React from 'react';
2
- export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "topRight", "bottomLeft", "bottomRight", "leftTop", "leftBottom", "rightTop", "rightBottom"];
3
- export declare type PlacementType = typeof Placements[number];
4
- export declare const Triggers: ["hover", "focus", "click", "contextMenu"];
5
- export declare type TriggerType = typeof Triggers[number];
6
- export declare type RenderFunction = () => React.ReactNode;
7
- export interface PopperProps {
8
- gap?: number;
9
- arrow?: boolean;
10
- visible?: boolean;
11
- prefixCls?: string;
12
- arrowSize?: number;
13
- disabled?: boolean;
14
- arrowOffset?: number;
15
- scrollHidden?: boolean;
16
- mouseEnterDelay?: number;
17
- mouseLeaveDelay?: number;
18
- defaultVisible?: boolean;
19
- autoPlacement?: boolean;
20
- className?: string;
21
- style?: React.CSSProperties;
22
- popperClassName?: string;
23
- popperStyle?: React.CSSProperties;
24
- placement?: PlacementType;
25
- tip?: any;
26
- trigger?: TriggerType | Array<TriggerType>;
27
- clickToClose?: boolean;
28
- onTrigger?: (trigger: TriggerType) => void;
29
- onVisibleChange?: (visible: boolean) => void;
30
- getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
31
- getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
32
- onTransitionEnd?: (e: React.TransitionEvent) => void;
33
- onAnimationEnd?: (e: React.AnimationEvent) => void;
34
- children?: React.ReactNode;
35
- }
36
- export declare const popperPlacementMap: {
37
- top: string;
38
- left: string;
39
- right: string;
40
- bottom: string;
41
- topLeft: string;
42
- topRight: string;
43
- bottomLeft: string;
44
- bottomRight: string;
45
- leftTop: string;
46
- leftBottom: string;
47
- rightTop: string;
48
- rightBottom: string;
49
- };
50
- export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
51
- export default Popper;