funda-ui 4.7.335 → 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 (35) 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/TagInput/index.js +71 -0
  10. package/Utils/extract.d.ts +39 -1
  11. package/Utils/extract.js +65 -0
  12. package/Utils/useDragDropPosition.d.ts +0 -3
  13. package/Utils/useDragDropPosition.js +0 -3
  14. package/lib/cjs/CascadingSelect/index.d.ts +21 -4
  15. package/lib/cjs/CascadingSelect/index.js +209 -53
  16. package/lib/cjs/CascadingSelectE2E/index.d.ts +22 -5
  17. package/lib/cjs/CascadingSelectE2E/index.js +233 -69
  18. package/lib/cjs/MultipleCheckboxes/index.js +71 -0
  19. package/lib/cjs/MultipleSelect/index.js +71 -0
  20. package/lib/cjs/TagInput/index.js +71 -0
  21. package/lib/cjs/Utils/extract.d.ts +39 -1
  22. package/lib/cjs/Utils/extract.js +65 -0
  23. package/lib/cjs/Utils/useDragDropPosition.d.ts +0 -3
  24. package/lib/cjs/Utils/useDragDropPosition.js +0 -3
  25. package/lib/css/CascadingSelect/index.css +86 -86
  26. package/lib/css/CascadingSelectE2E/index.css +86 -86
  27. package/lib/esm/CascadingSelect/Group.tsx +4 -3
  28. package/lib/esm/CascadingSelect/index.scss +67 -65
  29. package/lib/esm/CascadingSelect/index.tsx +201 -60
  30. package/lib/esm/CascadingSelectE2E/Group.tsx +3 -3
  31. package/lib/esm/CascadingSelectE2E/index.scss +67 -65
  32. package/lib/esm/CascadingSelectE2E/index.tsx +235 -79
  33. package/lib/esm/Utils/hooks/useDragDropPosition.tsx +0 -3
  34. package/lib/esm/Utils/libs/extract.ts +77 -3
  35. package/package.json +1 -1
package/CascadingSelectE2E/index.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* ======================================================
2
2
  <!-- Cascading Select End-to-end -->
3
3
  /* ====================================================== */
4
- .cas-select-e2e__wrapper {
5
- --cas-select-e2e-arrow-fill: #a5a5a5;
6
- --cas-select-e2e-result-arrow-fill: #a5a5a5;
7
- --cas-select-e2e-result-font-size: 1rem;
8
- --cas-select-e2e-result-padding-x: 0.75rem;
9
- --cas-select-e2e-result-padding-y: 0.375rem;
10
- }
11
- .cas-select-e2e__wrapper .cas-select-e2e__result {
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 {
12
12
  position: absolute;
13
13
  left: auto;
14
14
  z-index: 1;
15
15
  top: 0;
16
- padding: var(--cas-select-e2e-result-padding-y) var(--cas-select-e2e-result-padding-x);
17
- font-size: var(--cas-select-e2e-result-font-size);
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);
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
- .cas-select-e2e__wrapper .cas-select-e2e__result div {
29
+ .casc-select-e2e__wrapper .casc-select-e2e__result div {
30
30
  /* required */
31
31
  display: flex;
32
32
  }
33
- .cas-select-e2e__wrapper .cas-select-e2e__result span {
33
+ .casc-select-e2e__wrapper .casc-select-e2e__result span {
34
34
  padding: 3px;
35
35
  }
36
- .cas-select-e2e__wrapper .cas-select-e2e__result svg {
36
+ .casc-select-e2e__wrapper .casc-select-e2e__result svg {
37
37
  margin: 0 0.3rem;
38
38
  }
39
- .cas-select-e2e__wrapper .cas-select-e2e__result svg path {
40
- fill: var(--cas-select-e2e-result-arrow-fill);
39
+ .casc-select-e2e__wrapper .casc-select-e2e__result svg path {
40
+ fill: var(--casc-select-e2e-result-arrow-fill);
41
41
  }
42
- .cas-select-e2e__wrapper .cas-select-e2e__closemask {
42
+ .casc-select-e2e__wrapper .casc-select-e2e__closemask {
43
43
  position: absolute;
44
44
  z-index: 1;
45
45
  top: 0;
@@ -49,53 +49,53 @@
49
49
  background: rgba(0, 0, 0, 0);
50
50
  user-select: none;
51
51
  }
52
- .cas-select-e2e__wrapper .cas-select-e2e__trigger {
52
+ .casc-select-e2e__wrapper .casc-select-e2e__trigger {
53
53
  position: relative;
54
54
  z-index: 0;
55
55
  }
56
- .cas-select-e2e__wrapper .cas-select-e2e__val {
56
+ .casc-select-e2e__wrapper .casc-select-e2e__val {
57
57
  position: relative;
58
58
  }
59
- .cas-select-e2e__wrapper .cas-select-e2e__val input {
59
+ .casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input {
60
60
  cursor: pointer;
61
61
  color: transparent !important;
62
62
  }
63
- .cas-select-e2e__wrapper .cas-select-e2e__val input:focus {
63
+ .casc-select-e2e__wrapper .casc-select-e2e__val:not(.inputable) input:focus {
64
64
  color: transparent !important;
65
65
  }
66
- .cas-select-e2e__wrapper .cas-select-e2e__val .arrow {
66
+ .casc-select-e2e__wrapper .casc-select-e2e__val .arrow {
67
67
  position: absolute;
68
68
  top: 50%;
69
69
  transform: translateY(-50%);
70
70
  right: 0.5rem;
71
71
  }
72
- .cas-select-e2e__wrapper .cas-select-e2e__val .arrow svg .arrow-fill-g {
73
- fill: var(--cas-select-e2e-arrow-fill);
72
+ .casc-select-e2e__wrapper .casc-select-e2e__val .arrow svg .arrow-fill-g {
73
+ fill: var(--casc-select-e2e-arrow-fill);
74
74
  }
75
75
 
76
76
  /*------ List ------*/
77
- .cas-select-e2e__items-wrapper {
78
- --cas-select-e2e-opt-font-size: 0.875rem;
79
- --cas-select-e2e-opt-padding-x: .4rem;
80
- --cas-select-e2e-opt-padding-y: .3rem;
81
- --cas-select-e2e-opt-header-border-color: rgba(1, 1, 1, .2);
82
- --cas-select-e2e-opt-header-text-color: #999;
83
- --cas-select-e2e-opt-hover-bg: #f7f7f7;
84
- --cas-select-e2e-opt-active-bg: #eeeeee;
85
- --cas-select-e2e-items-box-shadow: 0 5px 15px 5px rgba(80, 102, 224, 0.08);
86
- --cas-select-e2e-items-bg: #fff;
87
- --cas-select-e2e-items-color: inherit;
88
- --cas-select-e2e-items-border-color: rgba(0, 0, 0, .1);
89
- --cas-select-e2e-items-li-border-color: #eee;
90
- --cas-select-e2e-loader-color: #000000;
91
- --cas-select-e2e-clean-btn-color: #b5b5b5;
92
- --cas-select-e2e-searchbox-border-color: #ddd;
93
- box-shadow: var(--cas-select-e2e-items-box-shadow);
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);
94
94
  position: absolute;
95
95
  left: auto;
96
96
  max-height: 300px;
97
- border: 1px solid var(--cas-select-e2e-items-border-color);
98
- background: var(--cas-select-e2e-items-bg);
97
+ border: 1px solid var(--casc-select-e2e-items-border-color);
98
+ background: var(--casc-select-e2e-items-bg);
99
99
  padding: 10px;
100
100
  overflow-y: auto;
101
101
  box-sizing: border-box;
@@ -103,23 +103,23 @@
103
103
  border-radius: 5px;
104
104
  width: max-content;
105
105
  /* required -> the content will not wrap at all even if it causes overflows*/
106
- color: var(--cas-select-e2e-items-color);
106
+ color: var(--casc-select-e2e-items-color);
107
107
  display: none;
108
108
  z-index: 1055; /* --bs-modal-zindex */
109
109
  /* each item */
110
110
  /* Searchbox */
111
111
  /* Options */
112
112
  }
113
- .cas-select-e2e__items-wrapper.active {
113
+ .casc-select-e2e__items-wrapper.active {
114
114
  display: block !important;
115
115
  }
116
- .cas-select-e2e__items-wrapper ul,
117
- .cas-select-e2e__items-wrapper li {
116
+ .casc-select-e2e__items-wrapper ul,
117
+ .casc-select-e2e__items-wrapper li {
118
118
  list-style: none;
119
119
  margin: 0;
120
120
  padding: 0;
121
121
  }
122
- .cas-select-e2e__items-wrapper .cas-select-e2e__items-loader {
122
+ .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader {
123
123
  position: absolute;
124
124
  pointer-events: none;
125
125
  left: 0;
@@ -131,97 +131,97 @@
131
131
  text-align: center;
132
132
  transform-origin: center;
133
133
  transform: translate(2px, 5px) rotate(0);
134
- animation: 1s linear infinite cas-select-e2e__spinner;
134
+ animation: 1s linear infinite casc-select-e2e__spinner;
135
135
  }
136
- .cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg {
136
+ .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg {
137
137
  vertical-align: top;
138
138
  }
139
- .cas-select-e2e__items-wrapper .cas-select-e2e__items-loader svg path {
140
- fill: var(--cas-select-e2e-loader-color);
139
+ .casc-select-e2e__items-wrapper .casc-select-e2e__items-loader svg path {
140
+ fill: var(--casc-select-e2e-loader-color);
141
141
  }
142
- @keyframes cas-select-e2e__spinner {
142
+ @keyframes casc-select-e2e__spinner {
143
143
  to {
144
144
  transform: translate(2px, 5px) rotate(-360deg);
145
145
  }
146
146
  }
147
- .cas-select-e2e__items-wrapper .cas-select-e2e__close svg {
147
+ .casc-select-e2e__items-wrapper .casc-select-e2e__close svg {
148
148
  opacity: 0.4;
149
149
  }
150
- .cas-select-e2e__items-wrapper .cas-select-e2e__close:hover svg {
150
+ .casc-select-e2e__items-wrapper .casc-select-e2e__close:hover svg {
151
151
  transition: 0.2s ease-out;
152
152
  opacity: 0.7;
153
153
  }
154
- .cas-select-e2e__items-wrapper ul {
154
+ .casc-select-e2e__items-wrapper ul {
155
155
  transition: 0.2s ease-out;
156
156
  min-width: 8px;
157
157
  min-height: 9px;
158
158
  }
159
- .cas-select-e2e__items-wrapper ul > li {
159
+ .casc-select-e2e__items-wrapper ul > li {
160
160
  position: relative;
161
161
  cursor: pointer;
162
162
  float: left;
163
163
  padding: 0 10px;
164
164
  margin-right: 15px;
165
- border-right: 1px dotted var(--cas-select-e2e-items-li-border-color);
165
+ border-right: 1px dotted var(--casc-select-e2e-items-li-border-color);
166
166
  transition: 0.2s ease-out;
167
167
  }
168
- .cas-select-e2e__items-wrapper ul > li.hide-col {
168
+ .casc-select-e2e__items-wrapper ul > li.hide-col {
169
169
  display: none;
170
170
  }
171
- .cas-select-e2e__items-wrapper ul > li:last-child {
171
+ .casc-select-e2e__items-wrapper ul > li:last-child {
172
172
  margin-right: 0;
173
173
  border-right: none;
174
174
  }
175
- .cas-select-e2e__items-wrapper .cas-select-e2e__items-col-searchbox input {
176
- border: 1px solid var(--cas-select-e2e-searchbox-border-color);
175
+ .casc-select-e2e__items-wrapper .casc-select-e2e__items-col-searchbox input {
176
+ border: 1px solid var(--casc-select-e2e-searchbox-border-color);
177
177
  border-radius: 0.35rem;
178
178
  background: transparent;
179
179
  font-size: 0.75rem;
180
180
  }
181
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt {
182
- padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
183
- font-size: var(--cas-select-e2e-opt-font-size);
181
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt {
182
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
183
+ font-size: var(--casc-select-e2e-opt-font-size);
184
184
  border-radius: 2px;
185
185
  }
186
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt:hover {
187
- background: var(--cas-select-e2e-opt-hover-bg);
186
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt:hover {
187
+ background: var(--casc-select-e2e-opt-hover-bg);
188
188
  }
189
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt.active {
190
- background: var(--cas-select-e2e-opt-active-bg);
189
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt.active {
190
+ background: var(--casc-select-e2e-opt-active-bg);
191
191
  }
192
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header {
193
- padding: var(--cas-select-e2e-opt-padding-y) var(--cas-select-e2e-opt-padding-x);
194
- font-size: var(--cas-select-e2e-opt-font-size);
195
- border-bottom: 1px dotted var(--cas-select-e2e-opt-header-border-color);
192
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header {
193
+ padding: var(--casc-select-e2e-opt-padding-y) var(--casc-select-e2e-opt-padding-x);
194
+ font-size: var(--casc-select-e2e-opt-font-size);
195
+ border-bottom: 1px dotted var(--casc-select-e2e-opt-header-border-color);
196
196
  border-radius: 2px;
197
197
  position: sticky;
198
- top: calc(var(--cas-select-e2e-opt-font-size) * -1);
199
- background: var(--cas-select-e2e-items-bg);
200
- color: var(--cas-select-e2e-opt-header-text-color);
198
+ top: calc(var(--casc-select-e2e-opt-font-size) * -1);
199
+ background: var(--casc-select-e2e-items-bg);
200
+ color: var(--casc-select-e2e-opt-header-text-color);
201
201
  display: flex;
202
202
  align-items: center;
203
203
  }
204
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header > span {
204
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header > span {
205
205
  cursor: default;
206
206
  }
207
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header:hover {
208
- background: var(--cas-select-e2e-opt-hover-bg);
207
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header:hover {
208
+ background: var(--casc-select-e2e-opt-hover-bg);
209
209
  }
210
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header.active {
211
- background: var(--cas-select-e2e-opt-active-bg);
210
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header.active {
211
+ background: var(--casc-select-e2e-opt-active-bg);
212
212
  }
213
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header .cas-select-e2e__opt-header__clean {
213
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean {
214
214
  display: inline-block;
215
215
  margin-left: 0.2rem;
216
216
  padding: 0.1rem;
217
217
  }
218
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header .cas-select-e2e__opt-header__clean:hover {
218
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean:hover {
219
219
  transform: scale(1.1);
220
220
  }
221
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header .cas-select-e2e__opt-header__clean svg {
222
- border: 1px var(--cas-select-e2e-clean-btn-color) solid;
221
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg {
222
+ border: 1px var(--casc-select-e2e-clean-btn-color) solid;
223
223
  border-radius: 50%;
224
224
  }
225
- .cas-select-e2e__items-wrapper .cas-select-e2e__opt-header .cas-select-e2e__opt-header__clean svg path {
226
- fill: var(--cas-select-e2e-clean-btn-color);
225
+ .casc-select-e2e__items-wrapper .casc-select-e2e__opt-header .casc-select-e2e__opt-header__clean svg path {
226
+ fill: var(--casc-select-e2e-clean-btn-color);
227
227
  }
package/CascadingSelectE2E/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export declare type CascadingSelectE2EOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: any, closeFunc: any) => void;
2
+ export declare type CascadingSelectE2EOptionChangeFnType = (input: any, currentData: any, index: any, depth: any, value: string, closeFunc: any) => void;
3
3
  export interface fetchArrayConfig {
4
4
  fetchFuncAsync?: any | undefined;
5
5
  fetchFuncMethod?: string | undefined;
@@ -14,6 +14,8 @@ export declare type CascadingSelectE2EProps = {
14
14
  wrapperClassName?: string;
15
15
  controlClassName?: string;
16
16
  controlExClassName?: string;
17
+ controlGroupWrapperClassName?: string;
18
+ controlGroupTextClassName?: string;
17
19
  searchable?: boolean;
18
20
  searchPlaceholder?: string;
19
21
  perColumnHeadersShow?: boolean;
@@ -22,11 +24,18 @@ export declare type CascadingSelectE2EProps = {
22
24
  label?: React.ReactNode | string;
23
25
  name?: string;
24
26
  placeholder?: string;
27
+ readOnly?: any;
25
28
  disabled?: any;
26
29
  required?: any;
30
+ requiredLabel?: React.ReactNode | string;
31
+ units?: React.ReactNode | string;
32
+ iconLeft?: React.ReactNode | string;
33
+ iconRight?: React.ReactNode | string;
34
+ minLength?: any;
35
+ maxLength?: any;
27
36
  /** Whether to use curly braces to save result and initialize default value */
28
37
  extractValueByBraces?: boolean;
29
- /** Instead of using `parent_id` of response to match child and parent data
38
+ /** Instead of using `queryId` of response to match child and parent data
30
39
  * (very useful for multiple fetch requests with no directly related fields),
31
40
  * this operation will directly use the click event to modify the result. */
32
41
  destroyParentIdMatch?: boolean;
@@ -44,8 +53,8 @@ export declare type CascadingSelectE2EProps = {
44
53
  /** Set a loader component to show while the component waits for the next load of data.
45
54
  * e.g. `<span>Loading...</span>` or any fancy loader element */
46
55
  loader?: React.ReactNode;
47
- /** Whether to show breadcrumb result */
48
- displayResult?: boolean;
56
+ /** Whether it can be modified in the input box */
57
+ inputable?: boolean;
49
58
  /** Set an arrow of breadcrumb result */
50
59
  displayResultArrow?: React.ReactNode;
51
60
  /** Set an arrow of control */
@@ -69,6 +78,14 @@ export declare type CascadingSelectE2EProps = {
69
78
  onChange?: CascadingSelectE2EOptionChangeFnType | null;
70
79
  onBlur?: (e: any) => void;
71
80
  onFocus?: (e: any) => void;
81
+ /**
82
+ * Customize the function of formatting the value of the input input box, and the parameters are labels, values, and queryIds
83
+ * Returns a string as the value of the input
84
+ */
85
+ formatInputResult?: (param: Array<{
86
+ label: string;
87
+ value: string | number;
88
+ }>) => string;
72
89
  };
73
- declare const CascadingSelectE2E: (props: CascadingSelectE2EProps) => JSX.Element;
90
+ declare const CascadingSelectE2E: React.ForwardRefExoticComponent<CascadingSelectE2EProps & React.RefAttributes<unknown>>;
74
91
  export default CascadingSelectE2E;