funda-ui 4.7.335 → 4.7.445

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 (41) hide show
  1. package/CascadingSelect/index.css +88 -87
  2. package/CascadingSelect/index.d.ts +21 -4
  3. package/CascadingSelect/index.js +209 -53
  4. package/CascadingSelectE2E/index.css +88 -87
  5. package/CascadingSelectE2E/index.d.ts +22 -5
  6. package/CascadingSelectE2E/index.js +233 -69
  7. package/MultipleCheckboxes/index.js +71 -0
  8. package/MultipleSelect/index.js +71 -0
  9. package/Table/index.js +16 -1
  10. package/TagInput/index.js +71 -0
  11. package/Utils/extract.d.ts +39 -1
  12. package/Utils/extract.js +65 -0
  13. package/Utils/useDragDropPosition.d.ts +0 -3
  14. package/Utils/useDragDropPosition.js +0 -3
  15. package/lib/cjs/CascadingSelect/index.d.ts +21 -4
  16. package/lib/cjs/CascadingSelect/index.js +209 -53
  17. package/lib/cjs/CascadingSelectE2E/index.d.ts +22 -5
  18. package/lib/cjs/CascadingSelectE2E/index.js +233 -69
  19. package/lib/cjs/MultipleCheckboxes/index.js +71 -0
  20. package/lib/cjs/MultipleSelect/index.js +71 -0
  21. package/lib/cjs/Table/index.js +16 -1
  22. package/lib/cjs/TagInput/index.js +71 -0
  23. package/lib/cjs/Utils/extract.d.ts +39 -1
  24. package/lib/cjs/Utils/extract.js +65 -0
  25. package/lib/cjs/Utils/useDragDropPosition.d.ts +0 -3
  26. package/lib/cjs/Utils/useDragDropPosition.js +0 -3
  27. package/lib/css/CascadingSelect/index.css +88 -87
  28. package/lib/css/CascadingSelectE2E/index.css +88 -87
  29. package/lib/esm/CascadingSelect/Group.tsx +4 -3
  30. package/lib/esm/CascadingSelect/index.scss +69 -66
  31. package/lib/esm/CascadingSelect/index.tsx +201 -60
  32. package/lib/esm/CascadingSelectE2E/Group.tsx +3 -3
  33. package/lib/esm/CascadingSelectE2E/index.scss +69 -66
  34. package/lib/esm/CascadingSelectE2E/index.tsx +235 -79
  35. package/lib/esm/Table/Table.tsx +1 -0
  36. package/lib/esm/Table/TableCell.tsx +0 -1
  37. package/lib/esm/Table/utils/SortSprite.tsx +3 -0
  38. package/lib/esm/Table/utils/hooks/useTableSort.tsx +16 -1
  39. package/lib/esm/Utils/hooks/useDragDropPosition.tsx +0 -3
  40. package/lib/esm/Utils/libs/extract.ts +77 -3
  41. package/package.json +1 -1
package/lib/esm/CascadingSelectE2E/index.scss CHANGED
@@ -2,23 +2,23 @@
2
2
  <!-- Cascading Select End-to-end -->
3
3
  /* ====================================================== */
4
4
 
5
- .cas-select-e2e__wrapper {
5
+ .casc-select-e2e__wrapper {
6
6
 
7
- --cas-select-e2e-arrow-fill: #a5a5a5;
8
- --cas-select-e2e-result-arrow-fill: #a5a5a5;
7
+ --casc-select-e2e-arrow-fill: #a5a5a5;
8
+ --casc-select-e2e-result-arrow-fill: #a5a5a5;
9
9
 
10
- --cas-select-e2e-result-font-size: 1rem;
11
- --cas-select-e2e-result-padding-x: 0.75rem;
12
- --cas-select-e2e-result-padding-y: 0.375rem;
10
+ --casc-select-e2e-result-font-size: 1rem;
11
+ --casc-select-e2e-result-padding-x: 0.75rem;
12
+ --casc-select-e2e-result-padding-y: 0.375rem;
13
13
 
14
14
 
15
- .cas-select-e2e__result {
15
+ .casc-select-e2e__result {
16
16
  position: absolute;
17
17
  left: auto;
18
18
  z-index: 1;
19
19
  top: 0;
20
- padding: var(--cas-select-e2e-result-padding-y) var(--cas-select-e2e-result-padding-x);
21
- font-size: var(--cas-select-e2e-result-font-size);
20
+ padding: var(--casc-select-e2e-result-padding-y) var(--casc-select-e2e-result-padding-x);
21
+ font-size: var(--casc-select-e2e-result-font-size);
22
22
  font-weight: 400;
23
23
  line-height: 1.5;
24
24
  color: inherit;
@@ -45,7 +45,7 @@
45
45
  margin: 0 0.3rem;
46
46
 
47
47
  path {
48
- fill: var(--cas-select-e2e-result-arrow-fill);
48
+ fill: var(--casc-select-e2e-result-arrow-fill);
49
49
  }
50
50
 
51
51
  }
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
 
56
- .cas-select-e2e__closemask {
56
+ .casc-select-e2e__closemask {
57
57
  position: absolute;
58
58
  z-index: 1;
59
59
  top: 0;
@@ -65,22 +65,24 @@
65
65
  }
66
66
 
67
67
 
68
- .cas-select-e2e__trigger {
68
+ .casc-select-e2e__trigger {
69
69
  position: relative;
70
70
  z-index: 0;
71
71
  }
72
72
 
73
73
 
74
- .cas-select-e2e__val {
74
+ .casc-select-e2e__val {
75
75
  position: relative;
76
76
 
77
77
 
78
- input {
79
- cursor: pointer;
80
- color: transparent !important;
81
-
82
- &:focus {
78
+ &:not(.inputable) {
79
+ input {
80
+ cursor: pointer;
83
81
  color: transparent !important;
82
+
83
+ &:focus {
84
+ color: transparent !important;
85
+ }
84
86
  }
85
87
  }
86
88
 
@@ -93,7 +95,7 @@
93
95
 
94
96
  svg {
95
97
  .arrow-fill-g {
96
- fill: var(--cas-select-e2e-arrow-fill);
98
+ fill: var(--casc-select-e2e-arrow-fill);
97
99
  }
98
100
  }
99
101
  }
@@ -104,37 +106,37 @@
104
106
  }
105
107
 
106
108
  /*------ List ------*/
107
- .cas-select-e2e__items-wrapper {
109
+ .casc-select-e2e__items-wrapper {
108
110
 
109
111
 
110
112
 
111
- --cas-select-e2e-opt-font-size: 0.875rem;
112
- --cas-select-e2e-opt-padding-x: .4rem;
113
- --cas-select-e2e-opt-padding-y: .3rem;
113
+ --casc-select-e2e-opt-font-size: 0.875rem;
114
+ --casc-select-e2e-opt-padding-x: .4rem;
115
+ --casc-select-e2e-opt-padding-y: .3rem;
114
116
 
115
- --cas-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
116
- --cas-select-e2e-opt-header-text-color: #999;
117
- --cas-select-e2e-opt-hover-bg: #f7f7f7;
118
- --cas-select-e2e-opt-active-bg: #eeeeee;
117
+ --casc-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
118
+ --casc-select-e2e-opt-header-text-color: #999;
119
+ --casc-select-e2e-opt-hover-bg: #f7f7f7;
120
+ --casc-select-e2e-opt-active-bg: #eeeeee;
119
121
 
120
122
 
121
- --cas-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
122
- --cas-select-e2e-items-bg: #fff;
123
- --cas-select-e2e-items-color: inherit;
124
- --cas-select-e2e-items-border-color: rgba(0, 0, 0, .1);
125
- --cas-select-e2e-items-li-border-color: #eee;
123
+ --casc-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
124
+ --casc-select-e2e-items-bg: #fff;
125
+ --casc-select-e2e-items-color: inherit;
126
+ --casc-select-e2e-items-border-color: rgba(0, 0, 0, .1);
127
+ --casc-select-e2e-items-li-border-color: #eee;
126
128
 
127
- --cas-select-e2e-loader-color: #000000;
128
- --cas-select-e2e-clean-btn-color: #b5b5b5;
129
+ --casc-select-e2e-loader-color: #000000;
130
+ --casc-select-e2e-clean-btn-color: #b5b5b5;
129
131
 
130
- --cas-select-e2e-searchbox-border-color: #ddd;
132
+ --casc-select-e2e-searchbox-border-color: #ddd;
131
133
 
132
- box-shadow: var(--cas-select-e2e-items-box-shadow);
134
+ box-shadow: var(--casc-select-e2e-items-box-shadow);
133
135
  position: absolute;
134
136
  left: auto;
135
137
  max-height: 300px;
136
- border: 1px solid var(--cas-select-e2e-items-border-color);
137
- background: var(--cas-select-e2e-items-bg);
138
+ border: 1px solid var(--casc-select-e2e-items-border-color);
139
+ background: var(--casc-select-e2e-items-bg);
138
140
  padding: 10px;
139
141
  overflow-y: auto;
140
142
  box-sizing: border-box;
@@ -142,7 +144,7 @@
142
144
  border-radius: 5px;
143
145
  width: max-content;
144
146
  /* required -> the content will not wrap at all even if it causes overflows*/
145
- color: var(--cas-select-e2e-items-color);
147
+ color: var(--casc-select-e2e-items-color);
146
148
 
147
149
 
148
150
  display: none;
@@ -162,7 +164,7 @@
162
164
  }
163
165
 
164
166
 
165
- .cas-select-e2e__items-loader {
167
+ .casc-select-e2e__items-loader {
166
168
  position: absolute;
167
169
  pointer-events: none;
168
170
  left: 0;
@@ -174,30 +176,30 @@
174
176
  text-align: center;
175
177
  transform-origin: center;
176
178
  transform: translate(2px, 5px) rotate(0);
177
- animation: 1s linear infinite cas-select-e2e__spinner;
179
+ animation: 1s linear infinite casc-select-e2e__spinner;
178
180
 
179
181
  svg {
180
182
  vertical-align: top;
181
183
 
182
184
  path {
183
- fill: var(--cas-select-e2e-loader-color);
185
+ fill: var(--casc-select-e2e-loader-color);
184
186
  }
185
187
  }
186
188
  }
187
189
 
188
- @keyframes cas-select-e2e__spinner {
190
+ @keyframes casc-select-e2e__spinner {
189
191
  to {
190
192
  transform: translate(2px, 5px) rotate(-360deg);
191
193
  }
192
194
  }
193
195
 
194
- .cas-select-e2e__close {
196
+ .casc-select-e2e__close {
195
197
  svg {
196
198
  opacity: .4;
197
199
  }
198
200
  }
199
201
 
200
- .cas-select-e2e__close:hover {
202
+ .casc-select-e2e__close:hover {
201
203
  svg {
202
204
  transition: .2s ease-out;
203
205
  opacity: .7;
@@ -216,7 +218,7 @@
216
218
  float: left;
217
219
  padding: 0 10px;
218
220
  margin-right: 15px;
219
- border-right: 1px dotted var(--cas-select-e2e-items-li-border-color);
221
+ border-right: 1px dotted var(--casc-select-e2e-items-li-border-color);
220
222
  transition: .2s ease-out;
221
223
 
222
224
  &.hide-col {
@@ -234,10 +236,11 @@
234
236
 
235
237
 
236
238
  /* Searchbox */
237
- .cas-select-e2e__items-col-searchbox {
239
+ .casc-select-e2e__items-col-searchbox {
238
240
  input {
239
- border: 1px solid var(--cas-select-e2e-searchbox-border-color);
240
- border-radius: 0.35rem;
241
+ border: 1px solid var(--casc-select-e2e-searchbox-border-color);
242
+ border-radius: 0.15rem;
243
+ width: 100%;
241
244
  background: transparent;
242
245
  font-size: 0.75rem;
243
246
  }
@@ -245,29 +248,29 @@
245
248
 
246
249
 
247
250
  /* Options */
248
- .cas-select-e2e__opt {
249
- padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
250
- font-size: var(--cas-select-e2e-opt-font-size);
251
+ .casc-select-e2e__opt {
252
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
253
+ font-size: var(--casc-select-e2e-opt-font-size);
251
254
  border-radius: 2px;
252
255
 
253
256
  &:hover {
254
- background: var(--cas-select-e2e-opt-hover-bg);
257
+ background: var(--casc-select-e2e-opt-hover-bg);
255
258
  }
256
259
 
257
260
  &.active {
258
- background: var(--cas-select-e2e-opt-active-bg);
261
+ background: var(--casc-select-e2e-opt-active-bg);
259
262
  }
260
263
  }
261
264
 
262
- .cas-select-e2e__opt-header {
263
- padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
264
- font-size: var(--cas-select-e2e-opt-font-size);
265
- border-bottom: 1px dotted var(--cas-select-e2e-opt-header-border-color);
265
+ .casc-select-e2e__opt-header {
266
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
267
+ font-size: var(--casc-select-e2e-opt-font-size);
268
+ border-bottom: 1px dotted var(--casc-select-e2e-opt-header-border-color);
266
269
  border-radius: 2px;
267
270
  position: sticky;
268
- top: calc(var(--cas-select-e2e-opt-font-size) * -1);
269
- background: var(--cas-select-e2e-items-bg);
270
- color: var(--cas-select-e2e-opt-header-text-color);
271
+ top: calc(var(--casc-select-e2e-opt-font-size) * -1);
272
+ background: var(--casc-select-e2e-items-bg);
273
+ color: var(--casc-select-e2e-opt-header-text-color);
271
274
  display: flex;
272
275
  align-items: center;
273
276
 
@@ -277,14 +280,14 @@
277
280
 
278
281
 
279
282
  &:hover {
280
- background: var(--cas-select-e2e-opt-hover-bg);
283
+ background: var(--casc-select-e2e-opt-hover-bg);
281
284
  }
282
285
 
283
286
  &.active {
284
- background: var(--cas-select-e2e-opt-active-bg);
287
+ background: var(--casc-select-e2e-opt-active-bg);
285
288
  }
286
289
 
287
- .cas-select-e2e__opt-header__clean {
290
+ .casc-select-e2e__opt-header__clean {
288
291
  display: inline-block;
289
292
  margin-left: .2rem;
290
293
  padding: .1rem;
@@ -295,11 +298,11 @@
295
298
 
296
299
  svg {
297
300
 
298
- border: 1px var(--cas-select-e2e-clean-btn-color) solid;
301
+ border: 1px var(--casc-select-e2e-clean-btn-color) solid;
299
302
  border-radius: 50%;
300
303
 
301
304
  path {
302
- fill: var(--cas-select-e2e-clean-btn-color);
305
+ fill: var(--casc-select-e2e-clean-btn-color);
303
306
  }
304
307
  }
305
308
  }