funda-ui 4.7.333 → 4.7.345

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 (38) hide show
  1. package/CascadingSelect/index.css +86 -86
  2. package/CascadingSelect/index.d.ts +21 -4
  3. package/CascadingSelect/index.js +209 -53
  4. package/CascadingSelectE2E/index.css +86 -86
  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/Select/index.js +15 -10
  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/Select/index.js +15 -10
  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 +86 -86
  28. package/lib/css/CascadingSelectE2E/index.css +86 -86
  29. package/lib/esm/CascadingSelect/Group.tsx +4 -3
  30. package/lib/esm/CascadingSelect/index.scss +67 -65
  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 +67 -65
  34. package/lib/esm/CascadingSelectE2E/index.tsx +235 -79
  35. package/lib/esm/Select/index.tsx +8 -8
  36. package/lib/esm/Utils/hooks/useDragDropPosition.tsx +0 -3
  37. package/lib/esm/Utils/libs/extract.ts +77 -3
  38. 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,9 +236,9 @@
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);
241
+ border: 1px solid var(--casc-select-e2e-searchbox-border-color);
240
242
  border-radius: 0.35rem;
241
243
  background: transparent;
242
244
  font-size: 0.75rem;
@@ -245,29 +247,29 @@
245
247
 
246
248
 
247
249
  /* 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);
250
+ .casc-select-e2e__opt {
251
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
252
+ font-size: var(--casc-select-e2e-opt-font-size);
251
253
  border-radius: 2px;
252
254
 
253
255
  &:hover {
254
- background: var(--cas-select-e2e-opt-hover-bg);
256
+ background: var(--casc-select-e2e-opt-hover-bg);
255
257
  }
256
258
 
257
259
  &.active {
258
- background: var(--cas-select-e2e-opt-active-bg);
260
+ background: var(--casc-select-e2e-opt-active-bg);
259
261
  }
260
262
  }
261
263
 
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);
264
+ .casc-select-e2e__opt-header {
265
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
266
+ font-size: var(--casc-select-e2e-opt-font-size);
267
+ border-bottom: 1px dotted var(--casc-select-e2e-opt-header-border-color);
266
268
  border-radius: 2px;
267
269
  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);
270
+ top: calc(var(--casc-select-e2e-opt-font-size) * -1);
271
+ background: var(--casc-select-e2e-items-bg);
272
+ color: var(--casc-select-e2e-opt-header-text-color);
271
273
  display: flex;
272
274
  align-items: center;
273
275
 
@@ -277,14 +279,14 @@
277
279
 
278
280
 
279
281
  &:hover {
280
- background: var(--cas-select-e2e-opt-hover-bg);
282
+ background: var(--casc-select-e2e-opt-hover-bg);
281
283
  }
282
284
 
283
285
  &.active {
284
- background: var(--cas-select-e2e-opt-active-bg);
286
+ background: var(--casc-select-e2e-opt-active-bg);
285
287
  }
286
288
 
287
- .cas-select-e2e__opt-header__clean {
289
+ .casc-select-e2e__opt-header__clean {
288
290
  display: inline-block;
289
291
  margin-left: .2rem;
290
292
  padding: .1rem;
@@ -295,11 +297,11 @@
295
297
 
296
298
  svg {
297
299
 
298
- border: 1px var(--cas-select-e2e-clean-btn-color) solid;
300
+ border: 1px var(--casc-select-e2e-clean-btn-color) solid;
299
301
  border-radius: 50%;
300
302
 
301
303
  path {
302
- fill: var(--cas-select-e2e-clean-btn-color);
304
+ fill: var(--casc-select-e2e-clean-btn-color);
303
305
  }
304
306
  }
305
307
  }