@qyu/reactcmp-dropdown 1.0.0 → 1.1.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/build/bundle/entry/index.js +6 -6
- package/build/declaration/component/list-abs/element/view.d.ts +2 -0
- package/build/declaration/component/list-fix/element/view.d.ts +2 -0
- package/build/style/index.global.css +12 -32
- package/build/style/index.global.css.d.ts +0 -1
- package/build/style/index.module.css +12 -32
- package/build/style/index.module.css.d.ts +0 -1
- package/package.json +1 -1
|
@@ -404,7 +404,7 @@ const CmpListFix = r.memo(r.forwardRef((props, ref) => {
|
|
|
404
404
|
}
|
|
405
405
|
return null;
|
|
406
406
|
}, [nprop_lazy, visible, ctxstate.open, props.children]);
|
|
407
|
-
return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.listfix, ctxstate.open && nprop_style.listfix_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listfix_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listfix_align_start, nprop_align === "center" && nprop_style.listfix_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listfix_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listfix_justify_start, nprop_direction === "hor" && nprop_style.listfix_horizontal, nprop_direction === "ver" && nprop_style.listfix_vertical), style: {
|
|
407
|
+
return jsx("div", { ref: mref, tabIndex: props.tabIndex, className: cl("__qyuddn", props.className, nprop_style.listfix, ctxstate.open && nprop_style.listfix_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listfix_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listfix_align_start, nprop_align === "center" && nprop_style.listfix_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listfix_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listfix_justify_start, nprop_direction === "hor" && nprop_style.listfix_horizontal, nprop_direction === "ver" && nprop_style.listfix_vertical), style: {
|
|
408
408
|
["--gap"]: `${nprop_gap}px`,
|
|
409
409
|
top: top !== null ? `${top}px` : null,
|
|
410
410
|
left: left !== null ? `${left}px` : null,
|
|
@@ -413,11 +413,11 @@ const CmpListFix = r.memo(r.forwardRef((props, ref) => {
|
|
|
413
413
|
maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
|
|
414
414
|
maxHeight: maxheight === null ? undefined : `${maxheight}px`,
|
|
415
415
|
}, onTransitionStart: ev => {
|
|
416
|
-
if (ev.propertyName === "opacity" && ctxstate.open) {
|
|
416
|
+
if (ev.nativeEvent.propertyName === "opacity" && ctxstate.open) {
|
|
417
417
|
visible_set(true);
|
|
418
418
|
}
|
|
419
419
|
}, onTransitionEnd: ev => {
|
|
420
|
-
if (ev.propertyName === "opacity" && !ctxstate.open) {
|
|
420
|
+
if (ev.nativeEvent.propertyName === "opacity" && !ctxstate.open) {
|
|
421
421
|
revalign_set(false);
|
|
422
422
|
revjustify_set(false);
|
|
423
423
|
maxwidth_set(null);
|
|
@@ -610,16 +610,16 @@ const CmpListAbs = r.memo(r.forwardRef((props, ref) => {
|
|
|
610
610
|
}
|
|
611
611
|
return null;
|
|
612
612
|
}, [nprop_lazy, visible, ctxstate.open, props.children]);
|
|
613
|
-
return jsx("div", { ref: mref, className: cl("__qyuddn", props.className, nprop_style.listabs, ctxstate.open && nprop_style.listabs_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listabs_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listabs_align_start, nprop_align === "center" && nprop_style.listabs_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listabs_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listabs_justify_start, nprop_direction === "hor" && nprop_style.listabs_horizontal, nprop_direction === "ver" && nprop_style.listabs_vertical), style: {
|
|
613
|
+
return jsx("div", { ref: mref, tabIndex: props.tabIndex, className: cl("__qyuddn", props.className, nprop_style.listabs, ctxstate.open && nprop_style.listabs_open, ((nprop_align === "end" && !revalign) || (nprop_align === "start" && revalign)) && nprop_style.listabs_align_end, ((nprop_align === "start" && !revalign) || (nprop_align === "end" && revalign)) && nprop_style.listabs_align_start, nprop_align === "center" && nprop_style.listabs_align_center, ((nprop_justify === "end") !== revjustify) && nprop_style.listabs_justify_end, ((nprop_justify === "start") !== revjustify) && nprop_style.listabs_justify_start, nprop_direction === "hor" && nprop_style.listabs_horizontal, nprop_direction === "ver" && nprop_style.listabs_vertical), style: {
|
|
614
614
|
["--gap"]: `${nprop_gap}px`,
|
|
615
615
|
maxWidth: maxwidth === null ? undefined : `${maxwidth}px`,
|
|
616
616
|
maxHeight: maxheight === null ? undefined : `${maxheight}px`,
|
|
617
617
|
}, onTransitionStart: ev => {
|
|
618
|
-
if (ev.propertyName === "opacity" && ctxstate.open) {
|
|
618
|
+
if (ev.nativeEvent.propertyName === "opacity" && ctxstate.open) {
|
|
619
619
|
visible_set(true);
|
|
620
620
|
}
|
|
621
621
|
}, onTransitionEnd: ev => {
|
|
622
|
-
if (ev.propertyName === "opacity" && !ctxstate.open) {
|
|
622
|
+
if (ev.nativeEvent.propertyName === "opacity" && !ctxstate.open) {
|
|
623
623
|
revalign_set(false);
|
|
624
624
|
revjustify_set(false);
|
|
625
625
|
maxwidth_set(null);
|
|
@@ -18,6 +18,7 @@ export type CmpListAbs_Props = Readonly<{
|
|
|
18
18
|
gap?: number;
|
|
19
19
|
lazy?: boolean;
|
|
20
20
|
align?: AlignRaw;
|
|
21
|
+
tabIndex?: number;
|
|
21
22
|
justify?: JustifyRaw;
|
|
22
23
|
direction?: DirectionRaw;
|
|
23
24
|
className?: string;
|
|
@@ -28,6 +29,7 @@ export declare const CmpListAbs: r.NamedExoticComponent<Readonly<{
|
|
|
28
29
|
gap?: number;
|
|
29
30
|
lazy?: boolean;
|
|
30
31
|
align?: AlignRaw;
|
|
32
|
+
tabIndex?: number;
|
|
31
33
|
justify?: JustifyRaw;
|
|
32
34
|
direction?: DirectionRaw;
|
|
33
35
|
className?: string;
|
|
@@ -18,6 +18,7 @@ export type CmpListFix_Props = Readonly<{
|
|
|
18
18
|
gap?: number;
|
|
19
19
|
lazy?: boolean;
|
|
20
20
|
align?: AlignRaw;
|
|
21
|
+
tabIndex?: number;
|
|
21
22
|
justify?: JustifyRaw;
|
|
22
23
|
direction?: DirectionRaw;
|
|
23
24
|
className?: string;
|
|
@@ -28,6 +29,7 @@ export declare const CmpListFix: r.NamedExoticComponent<Readonly<{
|
|
|
28
29
|
gap?: number;
|
|
29
30
|
lazy?: boolean;
|
|
30
31
|
align?: AlignRaw;
|
|
32
|
+
tabIndex?: number;
|
|
31
33
|
justify?: JustifyRaw;
|
|
32
34
|
direction?: DirectionRaw;
|
|
33
35
|
className?: string;
|
|
@@ -20,20 +20,20 @@
|
|
|
20
20
|
transform-origin: center right;
|
|
21
21
|
}
|
|
22
22
|
.__qyuddn.listabs_justify_start.listabs_horizontal:not(.listabs_align_center) {
|
|
23
|
-
transform: scaleX(--scale)
|
|
23
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px)));
|
|
24
24
|
}
|
|
25
25
|
.__qyuddn.listabs_justify_start.listabs_horizontal.listabs_align_center {
|
|
26
|
-
transform: scaleX(--scale)
|
|
26
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
|
|
27
27
|
}
|
|
28
28
|
.__qyuddn.listabs_justify_start.listabs_vertical {
|
|
29
29
|
bottom: 100%;
|
|
30
30
|
transform-origin: bottom center;
|
|
31
31
|
}
|
|
32
32
|
.__qyuddn.listabs_justify_start.listabs_vertical:not(.listabs_align_center) {
|
|
33
|
-
transform: scaleY(--scale)
|
|
33
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px)));
|
|
34
34
|
}
|
|
35
35
|
.__qyuddn.listabs_justify_start.listabs_vertical.listabs_align_center {
|
|
36
|
-
transform: scaleY(--scale)
|
|
36
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.__qyuddn.listabs_justify_end.listabs_horizontal {
|
|
@@ -41,20 +41,20 @@
|
|
|
41
41
|
transform-origin: center left;
|
|
42
42
|
}
|
|
43
43
|
.__qyuddn.listabs_justify_end.listabs_horizontal:not(.listabs_align_center) {
|
|
44
|
-
transform: scaleX(--scale)
|
|
44
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px));
|
|
45
45
|
}
|
|
46
46
|
.__qyuddn.listabs_justify_end.listabs_horizontal.listabs_align_center {
|
|
47
|
-
transform: scaleX(--scale)
|
|
47
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px)) translateY(-50%);
|
|
48
48
|
}
|
|
49
49
|
.__qyuddn.listabs_justify_end.listabs_vertical {
|
|
50
50
|
top: 100%;
|
|
51
51
|
transform-origin: top center;
|
|
52
52
|
}
|
|
53
53
|
.__qyuddn.listabs_justify_end.listabs_vertical:not(.listabs_align_center) {
|
|
54
|
-
transform: scaleY(--scale)
|
|
54
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px));
|
|
55
55
|
}
|
|
56
56
|
.__qyuddn.listabs_justify_end.listabs_vertical.listabs_align_center {
|
|
57
|
-
transform: scaleY(--scale)
|
|
57
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px)) translateX(-50%);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.__qyuddn.listabs_align_start.listabs_horizontal {
|
|
@@ -93,38 +93,18 @@
|
|
|
93
93
|
|
|
94
94
|
.__qyuddn.listfix_justify_start.listfix_horizontal {
|
|
95
95
|
transform-origin: center right;
|
|
96
|
-
|
|
97
|
-
.__qyuddn.listfix_justify_start.listfix_horizontal:not(.listfix_align_center) {
|
|
98
|
-
transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
|
|
99
|
-
}
|
|
100
|
-
.__qyuddn.listfix_justify_start.listfix_horizontal.listfix_align_center {
|
|
101
|
-
transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
|
|
96
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px)));
|
|
102
97
|
}
|
|
103
98
|
.__qyuddn.listfix_justify_start.listfix_vertical {
|
|
104
99
|
transform-origin: bottom center;
|
|
105
|
-
|
|
106
|
-
.__qyuddn.listfix_justify_start.listfix_vertical:not(.listfix_align_center) {
|
|
107
|
-
transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
|
|
108
|
-
}
|
|
109
|
-
.__qyuddn.listfix_justify_start.listfix_vertical.listfix_align_center {
|
|
110
|
-
transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
|
|
100
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px)));
|
|
111
101
|
}
|
|
112
102
|
|
|
113
103
|
.__qyuddn.listfix_justify_end.listfix_horizontal {
|
|
114
104
|
transform-origin: center left;
|
|
115
|
-
|
|
116
|
-
.__qyuddn.listfix_justify_end.listfix_horizontal:not(.listfix_align_center) {
|
|
117
|
-
transform: scaleX(--scale), translateX(var(--gap, 0px));
|
|
118
|
-
}
|
|
119
|
-
.__qyuddn.listfix_justify_end.listfix_horizontal.listfix_align_center {
|
|
120
|
-
transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
|
|
105
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px));
|
|
121
106
|
}
|
|
122
107
|
.__qyuddn.listfix_justify_end.listfix_vertical {
|
|
123
108
|
transform-origin: top center;
|
|
124
|
-
|
|
125
|
-
.__qyuddn.listfix_justify_end.listfix_vertical:not(.listfix_align_center) {
|
|
126
|
-
transform: scaleY(--scale), translateY(var(--gap, 0px));
|
|
127
|
-
}
|
|
128
|
-
.__qyuddn.listfix_justify_end.listfix_vertical.listfix_align_center {
|
|
129
|
-
transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
|
|
109
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px));
|
|
130
110
|
}
|
|
@@ -11,7 +11,6 @@ declare const styles: {
|
|
|
11
11
|
readonly "listabs_open": string;
|
|
12
12
|
readonly "listabs_vertical": string;
|
|
13
13
|
readonly "listfix": string;
|
|
14
|
-
readonly "listfix_align_center": string;
|
|
15
14
|
readonly "listfix_horizontal": string;
|
|
16
15
|
readonly "listfix_justify_end": string;
|
|
17
16
|
readonly "listfix_justify_start": string;
|
|
@@ -20,20 +20,20 @@
|
|
|
20
20
|
transform-origin: center right;
|
|
21
21
|
}
|
|
22
22
|
.listabs_justify_start.listabs_horizontal:not(.listabs_align_center) {
|
|
23
|
-
transform: scaleX(--scale)
|
|
23
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px)));
|
|
24
24
|
}
|
|
25
25
|
.listabs_justify_start.listabs_horizontal.listabs_align_center {
|
|
26
|
-
transform: scaleX(--scale)
|
|
26
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
|
|
27
27
|
}
|
|
28
28
|
.listabs_justify_start.listabs_vertical {
|
|
29
29
|
bottom: 100%;
|
|
30
30
|
transform-origin: bottom center;
|
|
31
31
|
}
|
|
32
32
|
.listabs_justify_start.listabs_vertical:not(.listabs_align_center) {
|
|
33
|
-
transform: scaleY(--scale)
|
|
33
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px)));
|
|
34
34
|
}
|
|
35
35
|
.listabs_justify_start.listabs_vertical.listabs_align_center {
|
|
36
|
-
transform: scaleY(--scale)
|
|
36
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.listabs_justify_end.listabs_horizontal {
|
|
@@ -41,20 +41,20 @@
|
|
|
41
41
|
transform-origin: center left;
|
|
42
42
|
}
|
|
43
43
|
.listabs_justify_end.listabs_horizontal:not(.listabs_align_center) {
|
|
44
|
-
transform: scaleX(--scale)
|
|
44
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px));
|
|
45
45
|
}
|
|
46
46
|
.listabs_justify_end.listabs_horizontal.listabs_align_center {
|
|
47
|
-
transform: scaleX(--scale)
|
|
47
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px)) translateY(-50%);
|
|
48
48
|
}
|
|
49
49
|
.listabs_justify_end.listabs_vertical {
|
|
50
50
|
top: 100%;
|
|
51
51
|
transform-origin: top center;
|
|
52
52
|
}
|
|
53
53
|
.listabs_justify_end.listabs_vertical:not(.listabs_align_center) {
|
|
54
|
-
transform: scaleY(--scale)
|
|
54
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px));
|
|
55
55
|
}
|
|
56
56
|
.listabs_justify_end.listabs_vertical.listabs_align_center {
|
|
57
|
-
transform: scaleY(--scale)
|
|
57
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px)) translateX(-50%);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.listabs_align_start.listabs_horizontal {
|
|
@@ -93,38 +93,18 @@
|
|
|
93
93
|
|
|
94
94
|
.listfix_justify_start.listfix_horizontal {
|
|
95
95
|
transform-origin: center right;
|
|
96
|
-
|
|
97
|
-
.listfix_justify_start.listfix_horizontal:not(.listfix_align_center) {
|
|
98
|
-
transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px)));
|
|
99
|
-
}
|
|
100
|
-
.listfix_justify_start.listfix_horizontal.listfix_align_center {
|
|
101
|
-
transform: scaleX(--scale), translateX(calc(-1 * var(--gap, 0px))) translateY(-50%);
|
|
96
|
+
transform: scaleX(var(--scale)) translateX(calc(-1 * var(--gap, 0px)));
|
|
102
97
|
}
|
|
103
98
|
.listfix_justify_start.listfix_vertical {
|
|
104
99
|
transform-origin: bottom center;
|
|
105
|
-
|
|
106
|
-
.listfix_justify_start.listfix_vertical:not(.listfix_align_center) {
|
|
107
|
-
transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px)));
|
|
108
|
-
}
|
|
109
|
-
.listfix_justify_start.listfix_vertical.listfix_align_center {
|
|
110
|
-
transform: scaleY(--scale), translateY(calc(-1 * var(--gap, 0px))) translateX(-50%);
|
|
100
|
+
transform: scaleY(var(--scale)) translateY(calc(-1 * var(--gap, 0px)));
|
|
111
101
|
}
|
|
112
102
|
|
|
113
103
|
.listfix_justify_end.listfix_horizontal {
|
|
114
104
|
transform-origin: center left;
|
|
115
|
-
|
|
116
|
-
.listfix_justify_end.listfix_horizontal:not(.listfix_align_center) {
|
|
117
|
-
transform: scaleX(--scale), translateX(var(--gap, 0px));
|
|
118
|
-
}
|
|
119
|
-
.listfix_justify_end.listfix_horizontal.listfix_align_center {
|
|
120
|
-
transform: scaleX(--scale), translateX(var(--gap, 0px)) translateY(-50%);
|
|
105
|
+
transform: scaleX(var(--scale)) translateX(var(--gap, 0px));
|
|
121
106
|
}
|
|
122
107
|
.listfix_justify_end.listfix_vertical {
|
|
123
108
|
transform-origin: top center;
|
|
124
|
-
|
|
125
|
-
.listfix_justify_end.listfix_vertical:not(.listfix_align_center) {
|
|
126
|
-
transform: scaleY(--scale), translateY(var(--gap, 0px));
|
|
127
|
-
}
|
|
128
|
-
.listfix_justify_end.listfix_vertical.listfix_align_center {
|
|
129
|
-
transform: scaleY(--scale), translateY(var(--gap, 0px)) translateX(-50%);
|
|
109
|
+
transform: scaleY(var(--scale)) translateY(var(--gap, 0px));
|
|
130
110
|
}
|
|
@@ -10,7 +10,6 @@ declare const styles: {
|
|
|
10
10
|
readonly "listabs_open": string;
|
|
11
11
|
readonly "listabs_vertical": string;
|
|
12
12
|
readonly "listfix": string;
|
|
13
|
-
readonly "listfix_align_center": string;
|
|
14
13
|
readonly "listfix_horizontal": string;
|
|
15
14
|
readonly "listfix_justify_end": string;
|
|
16
15
|
readonly "listfix_justify_start": string;
|