funda-ui 4.7.517 → 4.7.533

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 (37) hide show
  1. package/CascadingSelect/index.css +105 -88
  2. package/CascadingSelect/index.js +25 -24
  3. package/CascadingSelectE2E/index.css +105 -88
  4. package/CascadingSelectE2E/index.js +26 -25
  5. package/Date/index.js +3 -1
  6. package/DropdownMenu/index.js +3 -1
  7. package/LiveSearch/index.js +2 -1
  8. package/Select/index.d.ts +1 -0
  9. package/Select/index.js +70 -14
  10. package/Tooltip/index.css +69 -68
  11. package/Tooltip/index.d.ts +15 -1
  12. package/Tooltip/index.js +153 -57
  13. package/lib/cjs/CascadingSelect/index.js +25 -24
  14. package/lib/cjs/CascadingSelectE2E/index.js +26 -25
  15. package/lib/cjs/Date/index.js +3 -1
  16. package/lib/cjs/DropdownMenu/index.js +3 -1
  17. package/lib/cjs/LiveSearch/index.js +2 -1
  18. package/lib/cjs/Select/index.d.ts +1 -0
  19. package/lib/cjs/Select/index.js +70 -14
  20. package/lib/cjs/Tooltip/index.d.ts +15 -1
  21. package/lib/cjs/Tooltip/index.js +153 -57
  22. package/lib/css/CascadingSelect/index.css +105 -88
  23. package/lib/css/CascadingSelectE2E/index.css +105 -88
  24. package/lib/css/Tooltip/index.css +69 -68
  25. package/lib/esm/CascadingSelect/Group.tsx +3 -5
  26. package/lib/esm/CascadingSelect/index.scss +89 -68
  27. package/lib/esm/CascadingSelect/index.tsx +23 -21
  28. package/lib/esm/CascadingSelectE2E/Group.tsx +4 -3
  29. package/lib/esm/CascadingSelectE2E/index.scss +83 -63
  30. package/lib/esm/CascadingSelectE2E/index.tsx +24 -22
  31. package/lib/esm/Date/index.tsx +4 -1
  32. package/lib/esm/DropdownMenu/index.tsx +2 -1
  33. package/lib/esm/LiveSearch/index.tsx +2 -1
  34. package/lib/esm/Select/index.tsx +75 -17
  35. package/lib/esm/Tooltip/index.scss +63 -60
  36. package/lib/esm/Tooltip/index.tsx +143 -44
  37. package/package.json +1 -1
package/lib/css/CascadingSelectE2E/index.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* ======================================================
2
2
  <!-- Cascading Select End-to-end -->
3
3
  /* ====================================================== */
4
- .casc-select-e2e__wrapper {
5
- --casc-select-e2e-arrow-fill: #a5a5a5;
6
- --casc-select-e2e-result-arrow-fill: #a5a5a5;
7
- --casc-select-e2e-result-font-size: 1rem;
8
- --casc-select-e2e-result-padding-x: 0.75rem;
9
- --casc-select-e2e-result-padding-y: 0.375rem;
10
- }
11
- .casc-select-e2e__wrapper .casc-select-e2e__result {
4
+ .casc-menu-e2e__wrapper {
5
+ --casc-menu-e2e-arrow-fill: #a5a5a5;
6
+ --casc-menu-e2e-result-arrow-fill: #a5a5a5;
7
+ --casc-menu-e2e-result-font-size: 1rem;
8
+ --casc-menu-e2e-result-padding-x: 0.75rem;
9
+ --casc-menu-e2e-result-padding-y: 0.375rem;
10
+ }
11
+ .casc-menu-e2e__wrapper .casc-menu-e2e__result {
12
12
  position: absolute;
13
13
  left: auto;
14
14
  z-index: 1;
15
15
  top: 0;
16
- padding: var(--casc-select-e2e-result-padding-y) var(--casc-select-e2e-result-padding-x);
17
- font-size: var(--casc-select-e2e-result-font-size);
16
+ padding: var(--casc-menu-e2e-result-padding-y) var(--casc-menu-e2e-result-padding-x);
17
+ font-size: var(--casc-menu-e2e-result-font-size);
18
18
  font-weight: 400;
19
19
  line-height: 1.5;
20
20
  color: inherit;
@@ -26,20 +26,20 @@
26
26
  /* required */
27
27
  display: flex;
28
28
  }
29
- .casc-select-e2e__wrapper .casc-select-e2e__result div {
29
+ .casc-menu-e2e__wrapper .casc-menu-e2e__result div {
30
30
  /* required */
31
31
  display: flex;
32
32
  }
33
- .casc-select-e2e__wrapper .casc-select-e2e__result span {
33
+ .casc-menu-e2e__wrapper .casc-menu-e2e__result span {
34
34
  padding: 3px;
35
35
  }
36
- .casc-select-e2e__wrapper .casc-select-e2e__result svg {
36
+ .casc-menu-e2e__wrapper .casc-menu-e2e__result svg {
37
37
  margin: 0 0.3rem;
38
38
  }
39
- .casc-select-e2e__wrapper .casc-select-e2e__result svg path {
40
- fill: var(--casc-select-e2e-result-arrow-fill);
39
+ .casc-menu-e2e__wrapper .casc-menu-e2e__result svg path {
40
+ fill: var(--casc-menu-e2e-result-arrow-fill);
41
41
  }
42
- .casc-select-e2e__wrapper .casc-select-e2e__closemask {
42
+ .casc-menu-e2e__wrapper .casc-menu-e2e__closemask {
43
43
  position: absolute;
44
44
  z-index: 1;
45
45
  top: 0;
@@ -49,77 +49,81 @@
49
49
  background: rgba(0, 0, 0, 0);
50
50
  user-select: none;
51
51
  }
52
- .casc-select-e2e__wrapper .casc-select-e2e__trigger {
52
+ .casc-menu-e2e__wrapper .casc-menu-e2e__trigger {
53
53
  position: relative;
54
54
  z-index: 0;
55
55
  }
56
- .casc-select-e2e__wrapper .casc-select-e2e__val {
56
+ .casc-menu-e2e__wrapper .casc-menu-e2e__val {
57
57
  position: relative;
58
58
  }
59
- .casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input {
59
+ .casc-menu-e2e__wrapper .casc-menu-e2e__val:not(.inputable) input {
60
60
  cursor: pointer;
61
61
  color: transparent !important;
62
62
  }
63
- .casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input:focus {
63
+ .casc-menu-e2e__wrapper .casc-menu-e2e__val:not(.inputable) input:focus {
64
64
  color: transparent !important;
65
65
  }
66
- .casc-select-e2e__wrapper .casc-select-e2e__val .arrow {
66
+ .casc-menu-e2e__wrapper .casc-menu-e2e__val .arrow {
67
67
  position: absolute;
68
68
  top: 50%;
69
69
  transform: translateY(-50%);
70
70
  right: 0.5rem;
71
71
  }
72
- .casc-select-e2e__wrapper .casc-select-e2e__val .arrow svg .arrow-fill-g {
73
- fill: var(--casc-select-e2e-arrow-fill);
72
+ .casc-menu-e2e__wrapper .casc-menu-e2e__val .arrow svg .arrow-fill-g {
73
+ fill: var(--casc-menu-e2e-arrow-fill);
74
74
  }
75
75
 
76
76
  /*------ List ------*/
77
- .casc-select-e2e__items-wrapper {
78
- --casc-select-e2e-opt-font-size: 0.875rem;
79
- --casc-select-e2e-opt-padding-x: .4rem;
80
- --casc-select-e2e-opt-padding-y: .3rem;
81
- --casc-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
82
- --casc-select-e2e-opt-header-text-color: #999;
83
- --casc-select-e2e-opt-hover-bg: #f7f7f7;
84
- --casc-select-e2e-opt-active-bg: #eeeeee;
85
- --casc-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
86
- --casc-select-e2e-items-bg: #fff;
87
- --casc-select-e2e-items-color: inherit;
88
- --casc-select-e2e-items-border-color: rgba(0, 0, 0, .1);
89
- --casc-select-e2e-items-li-border-color: #eee;
90
- --casc-select-e2e-loader-color: #000000;
91
- --casc-select-e2e-clean-btn-color: #b5b5b5;
92
- --casc-select-e2e-searchbox-border-color: #ddd;
93
- box-shadow: var(--casc-select-e2e-items-box-shadow);
77
+ .casc-menu-e2e__items-wrapper {
78
+ --casc-menu-e2e-scrollbar-color: rgba(0, 0, 0, 0.2);
79
+ --casc-menu-e2e-scrollbar-track: rgba(0, 0, 0, 0);
80
+ --casc-menu-e2e-scrollbar-h: 3px;
81
+ --casc-menu-e2e-scrollbar-w: 3px;
82
+ --casc-menu-e2e-per-col-maxheight: 300px;
83
+ --casc-menu-e2e-opt-font-size: 0.875rem;
84
+ --casc-menu-e2e-opt-padding-x: .4rem;
85
+ --casc-menu-e2e-opt-padding-y: .3rem;
86
+ --casc-menu-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
87
+ --casc-menu-e2e-opt-header-text-color: #999;
88
+ --casc-menu-e2e-opt-hover-bg: #f7f7f7;
89
+ --casc-menu-e2e-opt-active-bg: #eeeeee;
90
+ --casc-menu-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
91
+ --casc-menu-e2e-items-bg: #fff;
92
+ --casc-menu-e2e-items-color: inherit;
93
+ --casc-menu-e2e-items-border-color: rgba(0, 0, 0, .1);
94
+ --casc-menu-e2e-items-li-border-color: #eee;
95
+ --casc-menu-e2e-loader-color: #000000;
96
+ --casc-menu-e2e-clean-btn-color: #b5b5b5;
97
+ --casc-menu-e2e-searchbox-border-color: #ddd;
98
+ box-shadow: var(--casc-menu-e2e-items-box-shadow);
94
99
  position: absolute;
95
100
  left: auto;
96
- max-height: 300px;
97
- border: 1px solid var(--casc-select-e2e-items-border-color);
98
- background: var(--casc-select-e2e-items-bg);
101
+ border: 1px solid var(--casc-menu-e2e-items-border-color);
102
+ background: var(--casc-menu-e2e-items-bg);
99
103
  padding: 10px;
100
- overflow-y: auto;
101
104
  box-sizing: border-box;
102
105
  top: 2.3rem;
103
106
  border-radius: 5px;
104
107
  width: max-content;
105
108
  /* required -> the content will not wrap at all even if it causes overflows*/
106
- color: var(--casc-select-e2e-items-color);
109
+ color: var(--casc-menu-e2e-items-color);
107
110
  display: none;
108
111
  z-index: 1055; /* --bs-modal-zindex */
109
112
  /* each item */
113
+ /* Column */
110
114
  /* Searchbox */
111
115
  /* Options */
112
116
  }
113
- .casc-select-e2e__items-wrapper.active {
117
+ .casc-menu-e2e__items-wrapper.active {
114
118
  display: block !important;
115
119
  }
116
- .casc-select-e2e__items-wrapper ul,
117
- .casc-select-e2e__items-wrapper li {
120
+ .casc-menu-e2e__items-wrapper ul,
121
+ .casc-menu-e2e__items-wrapper li {
118
122
  list-style: none;
119
123
  margin: 0;
120
124
  padding: 0;
121
125
  }
122
- .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader {
126
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader {
123
127
  position: absolute;
124
128
  pointer-events: none;
125
129
  left: 0;
@@ -131,98 +135,111 @@
131
135
  text-align: center;
132
136
  transform-origin: center;
133
137
  transform: translate(2px, 5px) rotate(0);
134
- animation: 1s linear infinite casc-select-e2e__spinner;
138
+ animation: 1s linear infinite casc-menu-e2e__spinner;
135
139
  }
136
- .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg {
140
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader svg {
137
141
  vertical-align: top;
138
142
  }
139
- .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg path {
140
- fill: var(--casc-select-e2e-loader-color);
143
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-loader svg path {
144
+ fill: var(--casc-menu-e2e-loader-color);
141
145
  }
142
- @keyframes casc-select-e2e__spinner {
146
+ @keyframes casc-menu-e2e__spinner {
143
147
  to {
144
148
  transform: translate(2px, 5px) rotate(-360deg);
145
149
  }
146
150
  }
147
- .casc-select-e2e__items-wrapper .casc-select-e2e__close svg {
151
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__close svg {
148
152
  opacity: 0.4;
149
153
  }
150
- .casc-select-e2e__items-wrapper .casc-select-e2e__close:hover svg {
154
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__close:hover svg {
151
155
  transition: 0.2s ease-out;
152
156
  opacity: 0.7;
153
157
  }
154
- .casc-select-e2e__items-wrapper ul {
158
+ .casc-menu-e2e__items-wrapper ul {
155
159
  transition: 0.2s ease-out;
156
160
  min-width: 8px;
157
161
  min-height: 9px;
158
162
  }
159
- .casc-select-e2e__items-wrapper ul > li {
163
+ .casc-menu-e2e__items-wrapper ul > li {
160
164
  position: relative;
161
165
  cursor: pointer;
162
166
  float: left;
163
167
  padding: 0 10px;
164
168
  margin-right: 15px;
165
- border-right: 1px dotted var(--casc-select-e2e-items-li-border-color);
169
+ border-right: 1px dotted var(--casc-menu-e2e-items-li-border-color);
166
170
  transition: 0.2s ease-out;
167
171
  }
168
- .casc-select-e2e__items-wrapper ul > li.hide-col {
172
+ .casc-menu-e2e__items-wrapper ul > li.hide-col {
169
173
  display: none;
170
174
  }
171
- .casc-select-e2e__items-wrapper ul > li:last-child {
175
+ .casc-menu-e2e__items-wrapper ul > li:last-child {
172
176
  margin-right: 0;
173
177
  border-right: none;
174
178
  }
175
- .casc-select-e2e__items-wrapper .casc-select-e2e__items-col-searchbox input {
176
- border: 1px solid var(--casc-select-e2e-searchbox-border-color);
179
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col {
180
+ max-height: var(--casc-menu-e2e-per-col-maxheight);
181
+ overflow-y: auto;
182
+ }
183
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar {
184
+ width: var(--casc-menu-e2e-scrollbar-w);
185
+ }
186
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar-thumb {
187
+ background: var(--casc-menu-e2e-scrollbar-color);
188
+ }
189
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col::-webkit-scrollbar-track {
190
+ background: var(--casc-menu-e2e-scrollbar-track);
191
+ }
192
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__items-col-searchbox input {
193
+ border: 1px solid var(--casc-menu-e2e-searchbox-border-color);
177
194
  border-radius: 0.15rem;
178
195
  width: 100%;
179
196
  background: transparent;
180
197
  font-size: 0.75rem;
181
198
  }
182
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt {
183
- padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
184
- font-size: var(--casc-select-e2e-opt-font-size);
199
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt {
200
+ padding: var(--casc-menu-e2e-opt-padding-y) var(--casc-menu-e2e-opt-padding-x);
201
+ font-size: var(--casc-menu-e2e-opt-font-size);
185
202
  border-radius: 2px;
186
203
  }
187
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt:hover {
188
- background: var(--casc-select-e2e-opt-hover-bg);
204
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt:hover {
205
+ background: var(--casc-menu-e2e-opt-hover-bg);
189
206
  }
190
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt.active {
191
- background: var(--casc-select-e2e-opt-active-bg);
207
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt.active {
208
+ background: var(--casc-menu-e2e-opt-active-bg);
192
209
  }
193
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header {
194
- padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
195
- font-size: var(--casc-select-e2e-opt-font-size);
196
- border-bottom: 1px dotted var(--casc-select-e2e-opt-header-border-color);
210
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header {
211
+ padding: var(--casc-menu-e2e-opt-padding-y) var(--casc-menu-e2e-opt-padding-x);
212
+ font-size: var(--casc-menu-e2e-opt-font-size);
213
+ border-bottom: 1px dotted var(--casc-menu-e2e-opt-header-border-color);
197
214
  border-radius: 2px;
198
215
  position: sticky;
199
- top: calc(var(--casc-select-e2e-opt-font-size) * -1);
200
- background: var(--casc-select-e2e-items-bg);
201
- color: var(--casc-select-e2e-opt-header-text-color);
216
+ top: 0;
217
+ background: var(--casc-menu-e2e-items-bg);
218
+ color: var(--casc-menu-e2e-opt-header-text-color);
202
219
  display: flex;
203
220
  align-items: center;
204
221
  }
205
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header > span {
222
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header > span {
206
223
  cursor: default;
207
224
  }
208
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header:hover {
209
- background: var(--casc-select-e2e-opt-hover-bg);
225
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header:hover {
226
+ background: var(--casc-menu-e2e-opt-hover-bg);
210
227
  }
211
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header.active {
212
- background: var(--casc-select-e2e-opt-active-bg);
228
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header.active {
229
+ background: var(--casc-menu-e2e-opt-active-bg);
213
230
  }
214
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean {
231
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean {
215
232
  display: inline-block;
216
233
  margin-left: 0.2rem;
217
234
  padding: 0.1rem;
218
235
  }
219
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean:hover {
236
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean:hover {
220
237
  transform: scale(1.1);
221
238
  }
222
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg {
223
- border: 1px var(--casc-select-e2e-clean-btn-color) solid;
239
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean svg {
240
+ border: 1px var(--casc-menu-e2e-clean-btn-color) solid;
224
241
  border-radius: 50%;
225
242
  }
226
- .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg path {
227
- fill: var(--casc-select-e2e-clean-btn-color);
243
+ .casc-menu-e2e__items-wrapper .casc-menu-e2e__opt-header .casc-menu-e2e__opt-header__clean svg path {
244
+ fill: var(--casc-menu-e2e-clean-btn-color);
228
245
  }
package/lib/css/Tooltip/index.css CHANGED
@@ -13,20 +13,20 @@
13
13
  * 9. Position Modifiers - Right
14
14
  * 10. Size
15
15
  */
16
- .tooltip__wrapper {
17
- --tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
18
- --tooltip-content-bg: rgba(17, 17, 17, 0.9);
19
- --tooltip-content-color: #fff;
20
- --tooltip-content-font-size: 0.75em;
21
- --tooltip-content-padding-x: 1em;
22
- --tooltip-content-padding-y: .5em;
23
- --tooltip-content-line-height: 1.5;
24
- --tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
25
- --tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
26
- --tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
27
- --tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
28
- --tooltip-arrow-width: 18px;
29
- --tooltip-arrow-height: 6px;
16
+ .cus-tooltip__wrapper {
17
+ --cus-tooltip-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
18
+ --cus-tooltip-content-bg: rgba(17, 17, 17, 0.9);
19
+ --cus-tooltip-content-color: #fff;
20
+ --cus-tooltip-content-font-size: 0.75em;
21
+ --cus-tooltip-content-padding-x: 1em;
22
+ --cus-tooltip-content-padding-y: .5em;
23
+ --cus-tooltip-content-line-height: 1.5;
24
+ --cus-tooltip-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
25
+ --cus-tooltip-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
26
+ --cus-tooltip-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
27
+ --cus-tooltip-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
28
+ --cus-tooltip-arrow-width: 18px;
29
+ --cus-tooltip-arrow-height: 6px;
30
30
  position: absolute;
31
31
  z-index: 1055; /* --bs-modal-zindex */
32
32
  pointer-events: none;
@@ -73,125 +73,126 @@
73
73
  ---------------------------
74
74
  */
75
75
  }
76
- .tooltip__wrapper::before {
76
+ .cus-tooltip__wrapper::before {
77
77
  background-size: 100% auto !important;
78
78
  content: "";
79
79
  position: absolute;
80
80
  }
81
- .tooltip__wrapper.active {
81
+ .cus-tooltip__wrapper.active {
82
82
  display: block !important;
83
83
  }
84
- .tooltip__wrapper.active::before,
85
- .tooltip__wrapper.active > .tooltip__content {
84
+ .cus-tooltip__wrapper.active::before,
85
+ .cus-tooltip__wrapper.active > .cus-tooltip__content {
86
86
  opacity: 1;
87
87
  }
88
- .tooltip__wrapper:focus::before,
89
- .tooltip__wrapper:focus > .tooltip__content {
88
+ .cus-tooltip__wrapper:focus::before,
89
+ .cus-tooltip__wrapper:focus > .cus-tooltip__content {
90
90
  opacity: 1;
91
91
  }
92
- .tooltip__wrapper::before,
93
- .tooltip__wrapper > .tooltip__content {
92
+ .cus-tooltip__wrapper::before,
93
+ .cus-tooltip__wrapper > .cus-tooltip__content {
94
94
  backface-visibility: hidden;
95
95
  will-change: transform;
96
96
  opacity: 0;
97
97
  box-sizing: border-box;
98
98
  z-index: 10;
99
99
  transform-origin: top;
100
- box-shadow: var(--tooltip-box-shadow);
100
+ box-shadow: var(--cus-tooltip-box-shadow);
101
101
  transition: none !important; /* Don't use transition if position is outside window */
102
102
  }
103
- .tooltip__wrapper > .tooltip__content {
104
- background: var(--tooltip-content-bg);
103
+ .cus-tooltip__wrapper > .cus-tooltip__content {
104
+ pointer-events: auto;
105
+ background: var(--cus-tooltip-content-bg);
105
106
  border-radius: 4px;
106
- color: var(--tooltip-content-color);
107
+ color: var(--cus-tooltip-content-color);
107
108
  content: attr(aria-label);
108
- font-size: var(--tooltip-content-font-size);
109
+ font-size: var(--cus-tooltip-content-font-size);
109
110
  font-weight: normal;
110
111
  text-transform: none;
111
- padding: var(--tooltip-content-padding-y) var(--tooltip-content-padding-x);
112
+ padding: var(--cus-tooltip-content-padding-y) var(--cus-tooltip-content-padding-x);
112
113
  white-space: nowrap;
113
114
  box-sizing: content-box;
114
- line-height: var(--tooltip-content-line-height);
115
+ line-height: var(--cus-tooltip-content-line-height);
115
116
  }
116
- .tooltip__wrapper > .tooltip__content img {
117
+ .cus-tooltip__wrapper > .cus-tooltip__content img {
117
118
  height: auto !important;
118
119
  margin: 0.5rem 0;
119
120
  }
120
- .tooltip__wrapper[data-microtip-position|=top]::before {
121
- background: var(--tooltip-arrow-bg-top);
122
- height: var(--tooltip-arrow-height);
123
- width: var(--tooltip-arrow-width);
121
+ .cus-tooltip__wrapper[data-microtip-position|=top]::before {
122
+ background: var(--cus-tooltip-arrow-bg-top);
123
+ height: var(--cus-tooltip-arrow-height);
124
+ width: var(--cus-tooltip-arrow-width);
124
125
  }
125
- .tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
126
- margin-bottom: var(--tooltip-arrow-height);
126
+ .cus-tooltip__wrapper[data-microtip-position|=top] > .cus-tooltip__content {
127
+ margin-bottom: var(--cus-tooltip-arrow-height);
127
128
  }
128
- .tooltip__wrapper[data-microtip-position|=top]::before {
129
- top: calc(100% - var(--tooltip-arrow-height));
130
- left: calc(var(--tooltip-arrow-width) / 2 * -1);
129
+ .cus-tooltip__wrapper[data-microtip-position|=top]::before {
130
+ top: calc(100% - var(--cus-tooltip-arrow-height));
131
+ left: calc(var(--cus-tooltip-arrow-width) / 2 * -1);
131
132
  }
132
- .tooltip__wrapper[data-microtip-position|=top] > .tooltip__content {
133
- bottom: calc(100% + var(--tooltip-arrow-height));
133
+ .cus-tooltip__wrapper[data-microtip-position|=top] > .cus-tooltip__content {
134
+ bottom: calc(100% + var(--cus-tooltip-arrow-height));
134
135
  left: 50%;
135
136
  transform: translateX(-50%);
136
137
  }
137
- .tooltip__wrapper[data-microtip-position=top-left] > .tooltip__content {
138
- bottom: calc(100% + var(--tooltip-arrow-height));
138
+ .cus-tooltip__wrapper[data-microtip-position=top-left] > .cus-tooltip__content {
139
+ bottom: calc(100% + var(--cus-tooltip-arrow-height));
139
140
  left: 50%;
140
- transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
141
+ transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
141
142
  }
142
- .tooltip__wrapper[data-microtip-position=top-right] > .tooltip__content {
143
- bottom: calc(100% + var(--tooltip-arrow-height));
143
+ .cus-tooltip__wrapper[data-microtip-position=top-right] > .cus-tooltip__content {
144
+ bottom: calc(100% + var(--cus-tooltip-arrow-height));
144
145
  left: 50%;
145
- transform: translateX(calc(0% - var(--tooltip-arrow-width)));
146
+ transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
146
147
  }
147
- .tooltip__wrapper[data-microtip-position|=bottom]::before {
148
- background: var(--tooltip-arrow-bg-bottom);
149
- height: var(--tooltip-arrow-height);
150
- width: var(--tooltip-arrow-width);
148
+ .cus-tooltip__wrapper[data-microtip-position|=bottom]::before {
149
+ background: var(--cus-tooltip-arrow-bg-bottom);
150
+ height: var(--cus-tooltip-arrow-height);
151
+ width: var(--cus-tooltip-arrow-width);
151
152
  margin-top: 5px;
152
153
  margin-bottom: 0;
153
154
  }
154
- .tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
155
- margin-top: var(--tooltip-arrow-height);
155
+ .cus-tooltip__wrapper[data-microtip-position|=bottom] > .cus-tooltip__content {
156
+ margin-top: var(--cus-tooltip-arrow-height);
156
157
  }
157
- .tooltip__wrapper[data-microtip-position|=bottom]::before {
158
- bottom: calc(100% - var(--tooltip-arrow-height));
159
- left: calc(var(--tooltip-arrow-width) / 2 * -1);
158
+ .cus-tooltip__wrapper[data-microtip-position|=bottom]::before {
159
+ bottom: calc(100% - var(--cus-tooltip-arrow-height));
160
+ left: calc(var(--cus-tooltip-arrow-width) / 2 * -1);
160
161
  }
161
- .tooltip__wrapper[data-microtip-position|=bottom] > .tooltip__content {
162
+ .cus-tooltip__wrapper[data-microtip-position|=bottom] > .cus-tooltip__content {
162
163
  bottom: auto;
163
- top: calc(100% + var(--tooltip-arrow-height));
164
+ top: calc(100% + var(--cus-tooltip-arrow-height));
164
165
  left: 50%;
165
166
  transform: translateX(-50%);
166
167
  }
167
- .tooltip__wrapper[data-microtip-position=bottom-left] > .tooltip__content {
168
+ .cus-tooltip__wrapper[data-microtip-position=bottom-left] > .cus-tooltip__content {
168
169
  bottom: auto;
169
- top: calc(100% + var(--tooltip-arrow-height));
170
+ top: calc(100% + var(--cus-tooltip-arrow-height));
170
171
  left: 50%;
171
- transform: translateX(calc(-100% + var(--tooltip-arrow-width)));
172
+ transform: translateX(calc(-100% + var(--cus-tooltip-arrow-width)));
172
173
  }
173
- .tooltip__wrapper[data-microtip-position=bottom-right] > .tooltip__content {
174
+ .cus-tooltip__wrapper[data-microtip-position=bottom-right] > .cus-tooltip__content {
174
175
  bottom: auto;
175
- top: calc(100% + var(--tooltip-arrow-height));
176
+ top: calc(100% + var(--cus-tooltip-arrow-height));
176
177
  left: 50%;
177
- transform: translateX(calc(0% - var(--tooltip-arrow-width)));
178
+ transform: translateX(calc(0% - var(--cus-tooltip-arrow-width)));
178
179
  }
179
- .tooltip__wrapper[data-microtip-size=auto].tooltip__content {
180
+ .cus-tooltip__wrapper[data-microtip-size=auto].cus-tooltip__content {
180
181
  white-space: nowrap;
181
182
  width: auto;
182
183
  max-width: 530px;
183
184
  overflow: hidden;
184
185
  text-overflow: ellipsis;
185
186
  }
186
- .tooltip__wrapper[data-microtip-size=small].tooltip__content {
187
+ .cus-tooltip__wrapper[data-microtip-size=small].cus-tooltip__content {
187
188
  white-space: initial;
188
189
  width: 80px;
189
190
  }
190
- .tooltip__wrapper[data-microtip-size=medium].tooltip__content {
191
+ .cus-tooltip__wrapper[data-microtip-size=medium].cus-tooltip__content {
191
192
  white-space: initial;
192
193
  width: 150px;
193
194
  }
194
- .tooltip__wrapper[data-microtip-size=large].tooltip__content {
195
+ .cus-tooltip__wrapper[data-microtip-size=large].cus-tooltip__content {
195
196
  white-space: initial;
196
197
  width: 260px;
197
198
  }
package/lib/esm/CascadingSelect/Group.tsx CHANGED
@@ -2,8 +2,6 @@ import React from 'react';
2
2
 
3
3
  import { combinedCls } from 'funda-utils/dist/cjs/cls';
4
4
 
5
-
6
-
7
5
  export type GroupFnType = (arg1: any, arg2: any, arg3: number) => void;
8
6
 
9
7
  export type GroupProps = {
@@ -40,7 +38,7 @@ export default function Group(props: GroupProps) {
40
38
  data-value={JSON.stringify(item)}
41
39
  data-level={level}
42
40
  className={combinedCls(
43
- 'casc-select__opt',
41
+ 'casc-menu__opt',
44
42
  {
45
43
  'active': item.current
46
44
  }
@@ -53,12 +51,12 @@ export default function Group(props: GroupProps) {
53
51
  } else {
54
52
  return columnTitle[level] === '' || perColumnHeadersShow === false ? null : <h3
55
53
  key={index}
56
- className="casc-select__opt-header"
54
+ className="casc-menu__opt-header"
57
55
  >
58
56
  <span dangerouslySetInnerHTML={{
59
57
  __html: columnTitle[level]
60
58
  }}></span>
61
- <div className="casc-select__opt-header__clean">
59
+ <div className="casc-menu__opt-header__clean">
62
60
  <a
63
61
  tabIndex={-1}
64
62
  href="#"