@apexcura/ui-components 0.0.12-Beta6 → 0.0.12-Beta60
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/dist/index.css +457 -0
- package/dist/index.d.mts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +154 -65
- package/dist/index.mjs +161 -72
- package/package.json +4 -1
- package/postcss.config.js +6 -0
- package/tailwind.config.js +13 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
/* src/Styles/index.css */
|
|
2
|
+
*,
|
|
3
|
+
::before,
|
|
4
|
+
::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
border-width: 0;
|
|
7
|
+
border-style: solid;
|
|
8
|
+
border-color: #e5e7eb;
|
|
9
|
+
}
|
|
10
|
+
::before,
|
|
11
|
+
::after {
|
|
12
|
+
--tw-content: "";
|
|
13
|
+
}
|
|
14
|
+
html,
|
|
15
|
+
:host {
|
|
16
|
+
line-height: 1.5;
|
|
17
|
+
-webkit-text-size-adjust: 100%;
|
|
18
|
+
-moz-tab-size: 4;
|
|
19
|
+
-o-tab-size: 4;
|
|
20
|
+
tab-size: 4;
|
|
21
|
+
font-family:
|
|
22
|
+
ui-sans-serif,
|
|
23
|
+
system-ui,
|
|
24
|
+
sans-serif,
|
|
25
|
+
"Apple Color Emoji",
|
|
26
|
+
"Segoe UI Emoji",
|
|
27
|
+
"Segoe UI Symbol",
|
|
28
|
+
"Noto Color Emoji";
|
|
29
|
+
font-feature-settings: normal;
|
|
30
|
+
font-variation-settings: normal;
|
|
31
|
+
-webkit-tap-highlight-color: transparent;
|
|
32
|
+
}
|
|
33
|
+
body {
|
|
34
|
+
margin: 0;
|
|
35
|
+
line-height: inherit;
|
|
36
|
+
}
|
|
37
|
+
hr {
|
|
38
|
+
height: 0;
|
|
39
|
+
color: inherit;
|
|
40
|
+
border-top-width: 1px;
|
|
41
|
+
}
|
|
42
|
+
abbr:where([title]) {
|
|
43
|
+
-webkit-text-decoration: underline dotted;
|
|
44
|
+
text-decoration: underline dotted;
|
|
45
|
+
}
|
|
46
|
+
h1,
|
|
47
|
+
h2,
|
|
48
|
+
h3,
|
|
49
|
+
h4,
|
|
50
|
+
h5,
|
|
51
|
+
h6 {
|
|
52
|
+
font-size: inherit;
|
|
53
|
+
font-weight: inherit;
|
|
54
|
+
}
|
|
55
|
+
a {
|
|
56
|
+
color: inherit;
|
|
57
|
+
text-decoration: inherit;
|
|
58
|
+
}
|
|
59
|
+
b,
|
|
60
|
+
strong {
|
|
61
|
+
font-weight: bolder;
|
|
62
|
+
}
|
|
63
|
+
code,
|
|
64
|
+
kbd,
|
|
65
|
+
samp,
|
|
66
|
+
pre {
|
|
67
|
+
font-family:
|
|
68
|
+
ui-monospace,
|
|
69
|
+
SFMono-Regular,
|
|
70
|
+
Menlo,
|
|
71
|
+
Monaco,
|
|
72
|
+
Consolas,
|
|
73
|
+
"Liberation Mono",
|
|
74
|
+
"Courier New",
|
|
75
|
+
monospace;
|
|
76
|
+
font-feature-settings: normal;
|
|
77
|
+
font-variation-settings: normal;
|
|
78
|
+
font-size: 1em;
|
|
79
|
+
}
|
|
80
|
+
small {
|
|
81
|
+
font-size: 80%;
|
|
82
|
+
}
|
|
83
|
+
sub,
|
|
84
|
+
sup {
|
|
85
|
+
font-size: 75%;
|
|
86
|
+
line-height: 0;
|
|
87
|
+
position: relative;
|
|
88
|
+
vertical-align: baseline;
|
|
89
|
+
}
|
|
90
|
+
sub {
|
|
91
|
+
bottom: -0.25em;
|
|
92
|
+
}
|
|
93
|
+
sup {
|
|
94
|
+
top: -0.5em;
|
|
95
|
+
}
|
|
96
|
+
table {
|
|
97
|
+
text-indent: 0;
|
|
98
|
+
border-color: inherit;
|
|
99
|
+
border-collapse: collapse;
|
|
100
|
+
}
|
|
101
|
+
button,
|
|
102
|
+
input,
|
|
103
|
+
optgroup,
|
|
104
|
+
select,
|
|
105
|
+
textarea {
|
|
106
|
+
font-family: inherit;
|
|
107
|
+
font-feature-settings: inherit;
|
|
108
|
+
font-variation-settings: inherit;
|
|
109
|
+
font-size: 100%;
|
|
110
|
+
font-weight: inherit;
|
|
111
|
+
line-height: inherit;
|
|
112
|
+
letter-spacing: inherit;
|
|
113
|
+
color: inherit;
|
|
114
|
+
margin: 0;
|
|
115
|
+
padding: 0;
|
|
116
|
+
}
|
|
117
|
+
button,
|
|
118
|
+
select {
|
|
119
|
+
text-transform: none;
|
|
120
|
+
}
|
|
121
|
+
button,
|
|
122
|
+
input:where([type=button]),
|
|
123
|
+
input:where([type=reset]),
|
|
124
|
+
input:where([type=submit]) {
|
|
125
|
+
-webkit-appearance: button;
|
|
126
|
+
background-color: transparent;
|
|
127
|
+
background-image: none;
|
|
128
|
+
}
|
|
129
|
+
:-moz-focusring {
|
|
130
|
+
outline: auto;
|
|
131
|
+
}
|
|
132
|
+
:-moz-ui-invalid {
|
|
133
|
+
box-shadow: none;
|
|
134
|
+
}
|
|
135
|
+
progress {
|
|
136
|
+
vertical-align: baseline;
|
|
137
|
+
}
|
|
138
|
+
::-webkit-inner-spin-button,
|
|
139
|
+
::-webkit-outer-spin-button {
|
|
140
|
+
height: auto;
|
|
141
|
+
}
|
|
142
|
+
[type=search] {
|
|
143
|
+
-webkit-appearance: textfield;
|
|
144
|
+
outline-offset: -2px;
|
|
145
|
+
}
|
|
146
|
+
::-webkit-search-decoration {
|
|
147
|
+
-webkit-appearance: none;
|
|
148
|
+
}
|
|
149
|
+
::-webkit-file-upload-button {
|
|
150
|
+
-webkit-appearance: button;
|
|
151
|
+
font: inherit;
|
|
152
|
+
}
|
|
153
|
+
summary {
|
|
154
|
+
display: list-item;
|
|
155
|
+
}
|
|
156
|
+
blockquote,
|
|
157
|
+
dl,
|
|
158
|
+
dd,
|
|
159
|
+
h1,
|
|
160
|
+
h2,
|
|
161
|
+
h3,
|
|
162
|
+
h4,
|
|
163
|
+
h5,
|
|
164
|
+
h6,
|
|
165
|
+
hr,
|
|
166
|
+
figure,
|
|
167
|
+
p,
|
|
168
|
+
pre {
|
|
169
|
+
margin: 0;
|
|
170
|
+
}
|
|
171
|
+
fieldset {
|
|
172
|
+
margin: 0;
|
|
173
|
+
padding: 0;
|
|
174
|
+
}
|
|
175
|
+
legend {
|
|
176
|
+
padding: 0;
|
|
177
|
+
}
|
|
178
|
+
ol,
|
|
179
|
+
ul,
|
|
180
|
+
menu {
|
|
181
|
+
list-style: none;
|
|
182
|
+
margin: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
}
|
|
185
|
+
dialog {
|
|
186
|
+
padding: 0;
|
|
187
|
+
}
|
|
188
|
+
textarea {
|
|
189
|
+
resize: vertical;
|
|
190
|
+
}
|
|
191
|
+
input::-moz-placeholder,
|
|
192
|
+
textarea::-moz-placeholder {
|
|
193
|
+
opacity: 1;
|
|
194
|
+
color: #9ca3af;
|
|
195
|
+
}
|
|
196
|
+
input::placeholder,
|
|
197
|
+
textarea::placeholder {
|
|
198
|
+
opacity: 1;
|
|
199
|
+
color: #9ca3af;
|
|
200
|
+
}
|
|
201
|
+
button,
|
|
202
|
+
[role=button] {
|
|
203
|
+
cursor: pointer;
|
|
204
|
+
}
|
|
205
|
+
:disabled {
|
|
206
|
+
cursor: default;
|
|
207
|
+
}
|
|
208
|
+
img,
|
|
209
|
+
svg,
|
|
210
|
+
video,
|
|
211
|
+
canvas,
|
|
212
|
+
audio,
|
|
213
|
+
iframe,
|
|
214
|
+
embed,
|
|
215
|
+
object {
|
|
216
|
+
display: block;
|
|
217
|
+
vertical-align: middle;
|
|
218
|
+
}
|
|
219
|
+
img,
|
|
220
|
+
video {
|
|
221
|
+
max-width: 100%;
|
|
222
|
+
height: auto;
|
|
223
|
+
}
|
|
224
|
+
[hidden] {
|
|
225
|
+
display: none;
|
|
226
|
+
}
|
|
227
|
+
*,
|
|
228
|
+
::before,
|
|
229
|
+
::after {
|
|
230
|
+
--tw-border-spacing-x: 0;
|
|
231
|
+
--tw-border-spacing-y: 0;
|
|
232
|
+
--tw-translate-x: 0;
|
|
233
|
+
--tw-translate-y: 0;
|
|
234
|
+
--tw-rotate: 0;
|
|
235
|
+
--tw-skew-x: 0;
|
|
236
|
+
--tw-skew-y: 0;
|
|
237
|
+
--tw-scale-x: 1;
|
|
238
|
+
--tw-scale-y: 1;
|
|
239
|
+
--tw-pan-x: ;
|
|
240
|
+
--tw-pan-y: ;
|
|
241
|
+
--tw-pinch-zoom: ;
|
|
242
|
+
--tw-scroll-snap-strictness: proximity;
|
|
243
|
+
--tw-gradient-from-position: ;
|
|
244
|
+
--tw-gradient-via-position: ;
|
|
245
|
+
--tw-gradient-to-position: ;
|
|
246
|
+
--tw-ordinal: ;
|
|
247
|
+
--tw-slashed-zero: ;
|
|
248
|
+
--tw-numeric-figure: ;
|
|
249
|
+
--tw-numeric-spacing: ;
|
|
250
|
+
--tw-numeric-fraction: ;
|
|
251
|
+
--tw-ring-inset: ;
|
|
252
|
+
--tw-ring-offset-width: 0px;
|
|
253
|
+
--tw-ring-offset-color: #fff;
|
|
254
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
255
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
256
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
257
|
+
--tw-shadow: 0 0 #0000;
|
|
258
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
259
|
+
--tw-blur: ;
|
|
260
|
+
--tw-brightness: ;
|
|
261
|
+
--tw-contrast: ;
|
|
262
|
+
--tw-grayscale: ;
|
|
263
|
+
--tw-hue-rotate: ;
|
|
264
|
+
--tw-invert: ;
|
|
265
|
+
--tw-saturate: ;
|
|
266
|
+
--tw-sepia: ;
|
|
267
|
+
--tw-drop-shadow: ;
|
|
268
|
+
--tw-backdrop-blur: ;
|
|
269
|
+
--tw-backdrop-brightness: ;
|
|
270
|
+
--tw-backdrop-contrast: ;
|
|
271
|
+
--tw-backdrop-grayscale: ;
|
|
272
|
+
--tw-backdrop-hue-rotate: ;
|
|
273
|
+
--tw-backdrop-invert: ;
|
|
274
|
+
--tw-backdrop-opacity: ;
|
|
275
|
+
--tw-backdrop-saturate: ;
|
|
276
|
+
--tw-backdrop-sepia: ;
|
|
277
|
+
--tw-contain-size: ;
|
|
278
|
+
--tw-contain-layout: ;
|
|
279
|
+
--tw-contain-paint: ;
|
|
280
|
+
--tw-contain-style: ;
|
|
281
|
+
}
|
|
282
|
+
::backdrop {
|
|
283
|
+
--tw-border-spacing-x: 0;
|
|
284
|
+
--tw-border-spacing-y: 0;
|
|
285
|
+
--tw-translate-x: 0;
|
|
286
|
+
--tw-translate-y: 0;
|
|
287
|
+
--tw-rotate: 0;
|
|
288
|
+
--tw-skew-x: 0;
|
|
289
|
+
--tw-skew-y: 0;
|
|
290
|
+
--tw-scale-x: 1;
|
|
291
|
+
--tw-scale-y: 1;
|
|
292
|
+
--tw-pan-x: ;
|
|
293
|
+
--tw-pan-y: ;
|
|
294
|
+
--tw-pinch-zoom: ;
|
|
295
|
+
--tw-scroll-snap-strictness: proximity;
|
|
296
|
+
--tw-gradient-from-position: ;
|
|
297
|
+
--tw-gradient-via-position: ;
|
|
298
|
+
--tw-gradient-to-position: ;
|
|
299
|
+
--tw-ordinal: ;
|
|
300
|
+
--tw-slashed-zero: ;
|
|
301
|
+
--tw-numeric-figure: ;
|
|
302
|
+
--tw-numeric-spacing: ;
|
|
303
|
+
--tw-numeric-fraction: ;
|
|
304
|
+
--tw-ring-inset: ;
|
|
305
|
+
--tw-ring-offset-width: 0px;
|
|
306
|
+
--tw-ring-offset-color: #fff;
|
|
307
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
308
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
309
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
310
|
+
--tw-shadow: 0 0 #0000;
|
|
311
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
312
|
+
--tw-blur: ;
|
|
313
|
+
--tw-brightness: ;
|
|
314
|
+
--tw-contrast: ;
|
|
315
|
+
--tw-grayscale: ;
|
|
316
|
+
--tw-hue-rotate: ;
|
|
317
|
+
--tw-invert: ;
|
|
318
|
+
--tw-saturate: ;
|
|
319
|
+
--tw-sepia: ;
|
|
320
|
+
--tw-drop-shadow: ;
|
|
321
|
+
--tw-backdrop-blur: ;
|
|
322
|
+
--tw-backdrop-brightness: ;
|
|
323
|
+
--tw-backdrop-contrast: ;
|
|
324
|
+
--tw-backdrop-grayscale: ;
|
|
325
|
+
--tw-backdrop-hue-rotate: ;
|
|
326
|
+
--tw-backdrop-invert: ;
|
|
327
|
+
--tw-backdrop-opacity: ;
|
|
328
|
+
--tw-backdrop-saturate: ;
|
|
329
|
+
--tw-backdrop-sepia: ;
|
|
330
|
+
--tw-contain-size: ;
|
|
331
|
+
--tw-contain-layout: ;
|
|
332
|
+
--tw-contain-paint: ;
|
|
333
|
+
--tw-contain-style: ;
|
|
334
|
+
}
|
|
335
|
+
.visible {
|
|
336
|
+
visibility: visible;
|
|
337
|
+
}
|
|
338
|
+
.\!m-\[10px\] {
|
|
339
|
+
margin: 10px !important;
|
|
340
|
+
}
|
|
341
|
+
.m-\[10px\] {
|
|
342
|
+
margin: 10px;
|
|
343
|
+
}
|
|
344
|
+
.table {
|
|
345
|
+
display: table;
|
|
346
|
+
}
|
|
347
|
+
.h-\[40px\] {
|
|
348
|
+
height: 40px;
|
|
349
|
+
}
|
|
350
|
+
.w-\[126px\] {
|
|
351
|
+
width: 126px;
|
|
352
|
+
}
|
|
353
|
+
.\!rounded-\[8px\] {
|
|
354
|
+
border-radius: 8px !important;
|
|
355
|
+
}
|
|
356
|
+
.rounded-\[8px\] {
|
|
357
|
+
border-radius: 8px;
|
|
358
|
+
}
|
|
359
|
+
.rounded-full {
|
|
360
|
+
border-radius: 9999px;
|
|
361
|
+
}
|
|
362
|
+
.\!border {
|
|
363
|
+
border-width: 1px !important;
|
|
364
|
+
}
|
|
365
|
+
.border {
|
|
366
|
+
border-width: 1px;
|
|
367
|
+
}
|
|
368
|
+
.border-none {
|
|
369
|
+
border-style: none;
|
|
370
|
+
}
|
|
371
|
+
.\!border-\[\#B8A4DE\] {
|
|
372
|
+
--tw-border-opacity: 1 !important;
|
|
373
|
+
border-color: rgb(184 164 222 / var(--tw-border-opacity)) !important;
|
|
374
|
+
}
|
|
375
|
+
.border-\[\#919191\] {
|
|
376
|
+
--tw-border-opacity: 1;
|
|
377
|
+
border-color: rgb(145 145 145 / var(--tw-border-opacity));
|
|
378
|
+
}
|
|
379
|
+
.\!bg-\[\#E2D6F8\] {
|
|
380
|
+
--tw-bg-opacity: 1 !important;
|
|
381
|
+
background-color: rgb(226 214 248 / var(--tw-bg-opacity)) !important;
|
|
382
|
+
}
|
|
383
|
+
.bg-\[\#F2F2F2\] {
|
|
384
|
+
--tw-bg-opacity: 1;
|
|
385
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
386
|
+
}
|
|
387
|
+
.bg-purple-800 {
|
|
388
|
+
--tw-bg-opacity: 1;
|
|
389
|
+
background-color: rgb(107 33 168 / var(--tw-bg-opacity));
|
|
390
|
+
}
|
|
391
|
+
.p-\[6px\] {
|
|
392
|
+
padding: 6px;
|
|
393
|
+
}
|
|
394
|
+
.\!text-center {
|
|
395
|
+
text-align: center !important;
|
|
396
|
+
}
|
|
397
|
+
.text-center {
|
|
398
|
+
text-align: center;
|
|
399
|
+
}
|
|
400
|
+
.italic {
|
|
401
|
+
font-style: italic;
|
|
402
|
+
}
|
|
403
|
+
.\!text-black {
|
|
404
|
+
--tw-text-opacity: 1 !important;
|
|
405
|
+
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
|
|
406
|
+
}
|
|
407
|
+
.text-white {
|
|
408
|
+
--tw-text-opacity: 1;
|
|
409
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
410
|
+
}
|
|
411
|
+
.\!shadow-\[0px_0px_1px_1px_\#919191\] {
|
|
412
|
+
--tw-shadow: 0px 0px 1px 1px #919191 !important;
|
|
413
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color) !important;
|
|
414
|
+
box-shadow:
|
|
415
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
416
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
417
|
+
var(--tw-shadow) !important;
|
|
418
|
+
}
|
|
419
|
+
.shadow-\[0px_0px_1px_1px_\#919191\] {
|
|
420
|
+
--tw-shadow: 0px 0px 1px 1px #919191;
|
|
421
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
422
|
+
box-shadow:
|
|
423
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
424
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
425
|
+
var(--tw-shadow);
|
|
426
|
+
}
|
|
427
|
+
.shadow-\[0px_0px_1px_1px_\#B8A4DE\] {
|
|
428
|
+
--tw-shadow: 0px 0px 1px 1px #B8A4DE;
|
|
429
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
430
|
+
box-shadow:
|
|
431
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
432
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
433
|
+
var(--tw-shadow);
|
|
434
|
+
}
|
|
435
|
+
.shadow-lg {
|
|
436
|
+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
437
|
+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
438
|
+
box-shadow:
|
|
439
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
440
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
441
|
+
var(--tw-shadow);
|
|
442
|
+
}
|
|
443
|
+
.filter {
|
|
444
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
445
|
+
}
|
|
446
|
+
.submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
|
|
447
|
+
color: #472D7A;
|
|
448
|
+
background-color: white;
|
|
449
|
+
border: solid 1px #472D7A;
|
|
450
|
+
}
|
|
451
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper {
|
|
452
|
+
border: 1px solid #919191;
|
|
453
|
+
}
|
|
454
|
+
.hover\:bg-\[\#F2F2F2\]:hover {
|
|
455
|
+
--tw-bg-opacity: 1;
|
|
456
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
457
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type ElementType = {
|
|
4
|
+
selectedStyle: boolean;
|
|
5
|
+
style: boolean;
|
|
6
|
+
className: string | undefined;
|
|
4
7
|
placeholder?: string;
|
|
5
8
|
addonBefore?: React.ReactNode;
|
|
6
9
|
defaultValue?: string;
|
|
7
10
|
disabled?: boolean;
|
|
8
11
|
prefix?: React.ReactNode;
|
|
9
12
|
type?: string;
|
|
10
|
-
value?: string | number | boolean | any[];
|
|
13
|
+
value?: string | number | boolean | any[] | null;
|
|
11
14
|
status?: "error" | "warning";
|
|
12
15
|
styles?: React.CSSProperties;
|
|
13
|
-
classNames?: string;
|
|
14
16
|
variant?: "outlined" | "borderless" | "filled";
|
|
15
17
|
label?: string;
|
|
16
18
|
name?: string;
|
|
17
19
|
suffix?: React.ReactNode;
|
|
18
20
|
maxLength?: number;
|
|
19
21
|
fieldNames?: any[];
|
|
22
|
+
options?: any[];
|
|
20
23
|
onChange?: (value: string | number | boolean | any[]) => void;
|
|
21
24
|
dropDownOptions?: any[];
|
|
22
25
|
id?: number;
|
|
23
26
|
thead?: any[];
|
|
24
27
|
tbody?: any[];
|
|
25
28
|
variable_data?: any[];
|
|
29
|
+
optionType?: string;
|
|
30
|
+
selectedClassName?: string;
|
|
31
|
+
action?: React.MouseEventHandler<HTMLElement> | string;
|
|
26
32
|
};
|
|
27
33
|
|
|
28
34
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
73
|
|
|
68
74
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
75
|
|
|
70
|
-
declare const ButtonElement:
|
|
76
|
+
declare const ButtonElement: React$1.FC<ElementType>;
|
|
71
77
|
|
|
72
78
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
79
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type ElementType = {
|
|
4
|
+
selectedStyle: boolean;
|
|
5
|
+
style: boolean;
|
|
6
|
+
className: string | undefined;
|
|
4
7
|
placeholder?: string;
|
|
5
8
|
addonBefore?: React.ReactNode;
|
|
6
9
|
defaultValue?: string;
|
|
7
10
|
disabled?: boolean;
|
|
8
11
|
prefix?: React.ReactNode;
|
|
9
12
|
type?: string;
|
|
10
|
-
value?: string | number | boolean | any[];
|
|
13
|
+
value?: string | number | boolean | any[] | null;
|
|
11
14
|
status?: "error" | "warning";
|
|
12
15
|
styles?: React.CSSProperties;
|
|
13
|
-
classNames?: string;
|
|
14
16
|
variant?: "outlined" | "borderless" | "filled";
|
|
15
17
|
label?: string;
|
|
16
18
|
name?: string;
|
|
17
19
|
suffix?: React.ReactNode;
|
|
18
20
|
maxLength?: number;
|
|
19
21
|
fieldNames?: any[];
|
|
22
|
+
options?: any[];
|
|
20
23
|
onChange?: (value: string | number | boolean | any[]) => void;
|
|
21
24
|
dropDownOptions?: any[];
|
|
22
25
|
id?: number;
|
|
23
26
|
thead?: any[];
|
|
24
27
|
tbody?: any[];
|
|
25
28
|
variable_data?: any[];
|
|
29
|
+
optionType?: string;
|
|
30
|
+
selectedClassName?: string;
|
|
31
|
+
action?: React.MouseEventHandler<HTMLElement> | string;
|
|
26
32
|
};
|
|
27
33
|
|
|
28
34
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
73
|
|
|
68
74
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
75
|
|
|
70
|
-
declare const ButtonElement:
|
|
76
|
+
declare const ButtonElement: React$1.FC<ElementType>;
|
|
71
77
|
|
|
72
78
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
79
|
|
package/dist/index.js
CHANGED
|
@@ -62,7 +62,7 @@ var TextElement = (props) => {
|
|
|
62
62
|
type: props.type,
|
|
63
63
|
status: props.status,
|
|
64
64
|
style: props.styles,
|
|
65
|
-
className: props.
|
|
65
|
+
className: props.className,
|
|
66
66
|
variant: props.variant,
|
|
67
67
|
name: props.name,
|
|
68
68
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -103,7 +103,7 @@ var NumberElement = (props) => {
|
|
|
103
103
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
104
104
|
props.onChange(newValue);
|
|
105
105
|
};
|
|
106
|
-
return /* @__PURE__ */ import_react3.default.createElement(
|
|
106
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
107
107
|
import_antd3.Input,
|
|
108
108
|
{
|
|
109
109
|
placeholder: props.placeholder,
|
|
@@ -115,13 +115,12 @@ var NumberElement = (props) => {
|
|
|
115
115
|
prefix: props.prefix,
|
|
116
116
|
type: props.type,
|
|
117
117
|
status: props.status,
|
|
118
|
-
|
|
119
|
-
className: props.classNames,
|
|
118
|
+
className: props.className,
|
|
120
119
|
variant: props.variant,
|
|
121
120
|
name: props.name,
|
|
122
121
|
onChange: handleInputChange
|
|
123
122
|
}
|
|
124
|
-
)
|
|
123
|
+
);
|
|
125
124
|
};
|
|
126
125
|
|
|
127
126
|
// src/Components/TextareaElement.tsx
|
|
@@ -129,7 +128,7 @@ var import_react4 = __toESM(require("react"));
|
|
|
129
128
|
var import_antd4 = require("antd");
|
|
130
129
|
var { TextArea } = import_antd4.Input;
|
|
131
130
|
var TextareaElement = (props) => {
|
|
132
|
-
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex,
|
|
131
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
133
132
|
TextArea,
|
|
134
133
|
{
|
|
135
134
|
placeholder: props.placeholder,
|
|
@@ -138,8 +137,7 @@ var TextareaElement = (props) => {
|
|
|
138
137
|
disabled: props.disabled,
|
|
139
138
|
id: props.name,
|
|
140
139
|
status: props.status,
|
|
141
|
-
|
|
142
|
-
className: props.classNames,
|
|
140
|
+
className: props.className,
|
|
143
141
|
variant: props.variant,
|
|
144
142
|
name: props.name,
|
|
145
143
|
showCount: true,
|
|
@@ -177,7 +175,7 @@ var SelectElement = (props) => {
|
|
|
177
175
|
id: props.name,
|
|
178
176
|
status: props.status,
|
|
179
177
|
style: props.styles,
|
|
180
|
-
className: props.
|
|
178
|
+
className: props.className,
|
|
181
179
|
variant: props.variant,
|
|
182
180
|
onChange: handleChange
|
|
183
181
|
}
|
|
@@ -187,15 +185,45 @@ var SelectElement = (props) => {
|
|
|
187
185
|
// src/Components/RadioElement.tsx
|
|
188
186
|
var import_react6 = __toESM(require("react"));
|
|
189
187
|
var import_antd6 = require("antd");
|
|
188
|
+
var containerClassName = " ";
|
|
189
|
+
var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
|
|
190
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
190
191
|
var RadioElement = (props) => {
|
|
192
|
+
const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
|
|
193
|
+
const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
|
|
194
|
+
const optionType = props.optionType === "button" ? "button" : void 0;
|
|
191
195
|
const handleChange = (e) => {
|
|
196
|
+
const selectedVal = e.target.value;
|
|
197
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
198
|
+
setSelectedValue(selectedVal);
|
|
199
|
+
setIsDisabled(true);
|
|
192
200
|
if (props.onChange) {
|
|
193
|
-
const selectedVal = e.target.value;
|
|
194
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
195
201
|
props.onChange(selectedOptions);
|
|
196
202
|
}
|
|
197
203
|
};
|
|
198
|
-
|
|
204
|
+
const getButtonStyle = (option) => {
|
|
205
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
206
|
+
};
|
|
207
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement(
|
|
208
|
+
import_antd6.Radio.Group,
|
|
209
|
+
{
|
|
210
|
+
onChange: handleChange,
|
|
211
|
+
optionType,
|
|
212
|
+
className: props.className,
|
|
213
|
+
value: selectedValue
|
|
214
|
+
},
|
|
215
|
+
props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
|
|
216
|
+
import_antd6.Radio,
|
|
217
|
+
{
|
|
218
|
+
key: option.value,
|
|
219
|
+
value: option.value,
|
|
220
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
221
|
+
className: getButtonStyle(option),
|
|
222
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
223
|
+
},
|
|
224
|
+
option.label
|
|
225
|
+
))
|
|
226
|
+
));
|
|
199
227
|
};
|
|
200
228
|
|
|
201
229
|
// src/Components/Checkbox.tsx
|
|
@@ -229,7 +257,7 @@ var CheckboxElement = (props) => {
|
|
|
229
257
|
disabled: props.disabled,
|
|
230
258
|
id: props.name,
|
|
231
259
|
style: props.styles,
|
|
232
|
-
className: props.
|
|
260
|
+
className: props.className,
|
|
233
261
|
onChange: onHandleAllChanges,
|
|
234
262
|
checked: checkAll
|
|
235
263
|
},
|
|
@@ -239,7 +267,7 @@ var CheckboxElement = (props) => {
|
|
|
239
267
|
{
|
|
240
268
|
disabled: props.disabled,
|
|
241
269
|
style: props.styles,
|
|
242
|
-
className: props.
|
|
270
|
+
className: props.className,
|
|
243
271
|
options: plainOptions,
|
|
244
272
|
value: checkedList,
|
|
245
273
|
onChange: handleChange
|
|
@@ -356,7 +384,20 @@ var MultipleSelectElement = (props) => {
|
|
|
356
384
|
// src/Components/Button.tsx
|
|
357
385
|
var import_react12 = __toESM(require("react"));
|
|
358
386
|
var import_antd10 = require("antd");
|
|
359
|
-
var
|
|
387
|
+
var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
388
|
+
var ButtonElement = (props) => {
|
|
389
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
390
|
+
console.log("Performing action:", props.action);
|
|
391
|
+
} : props.action;
|
|
392
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
393
|
+
import_antd10.Button,
|
|
394
|
+
{
|
|
395
|
+
onClick: handleClick,
|
|
396
|
+
className: `${defaultClassName} ${props.className ? props.className : ""}`
|
|
397
|
+
},
|
|
398
|
+
props.label
|
|
399
|
+
);
|
|
400
|
+
};
|
|
360
401
|
|
|
361
402
|
// src/Components/AddMoreTable.tsx
|
|
362
403
|
var import_react13 = __toESM(require("react"));
|
|
@@ -364,81 +405,129 @@ var import_antd11 = require("antd");
|
|
|
364
405
|
var import_icons2 = require("@ant-design/icons");
|
|
365
406
|
var AddMoreTable = (props) => {
|
|
366
407
|
const { thead, tbody } = props;
|
|
367
|
-
const [tableData, setTableData] = (0, import_react13.useState)({});
|
|
368
408
|
const [rows, setRows] = (0, import_react13.useState)(tbody || []);
|
|
369
|
-
function isColumnType(column) {
|
|
370
|
-
return column.dataIndex !== void 0;
|
|
371
|
-
}
|
|
372
|
-
const onHandleChange = (name, value) => {
|
|
373
|
-
setTableData((prev) => ({ ...prev, [name]: value }));
|
|
374
|
-
console.log(tableData);
|
|
375
|
-
};
|
|
376
409
|
const onHandleRows = () => {
|
|
377
|
-
const
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
410
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
411
|
+
let newRow = {
|
|
412
|
+
id: newId,
|
|
413
|
+
label: "Medicine",
|
|
414
|
+
name: "Medicine",
|
|
415
|
+
type: "text",
|
|
416
|
+
element: "single-select",
|
|
417
|
+
variable_data: [
|
|
418
|
+
{
|
|
419
|
+
id: 1,
|
|
420
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
421
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
422
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
423
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
424
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
425
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
426
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
427
|
+
}
|
|
428
|
+
]
|
|
382
429
|
};
|
|
383
430
|
setRows((prevData) => [...prevData, newRow]);
|
|
384
431
|
};
|
|
385
|
-
const onHandleDelete = (
|
|
386
|
-
|
|
387
|
-
setRows(remainingRows);
|
|
432
|
+
const onHandleDelete = (id) => {
|
|
433
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
388
434
|
};
|
|
389
|
-
const
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
435
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
436
|
+
setRows((prevRows) => {
|
|
437
|
+
return prevRows.map((row, index) => {
|
|
438
|
+
if (index === rowIndex) {
|
|
439
|
+
const newSubRow = {
|
|
440
|
+
id: row.variable_data.length + 1,
|
|
441
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
442
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
443
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
444
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
445
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
446
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
447
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
448
|
+
};
|
|
449
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
450
|
+
return {
|
|
451
|
+
...row,
|
|
452
|
+
variable_data: updatedVariableData
|
|
453
|
+
};
|
|
454
|
+
}
|
|
455
|
+
return row;
|
|
456
|
+
});
|
|
457
|
+
});
|
|
458
|
+
};
|
|
459
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
460
|
+
setRows((prevRows) => {
|
|
461
|
+
return prevRows.map((row, index) => {
|
|
462
|
+
if (index === rowIndex) {
|
|
463
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
464
|
+
return {
|
|
465
|
+
...row,
|
|
466
|
+
variable_data: updatedVariableData
|
|
467
|
+
};
|
|
468
|
+
}
|
|
469
|
+
return row;
|
|
470
|
+
});
|
|
471
|
+
});
|
|
472
|
+
};
|
|
473
|
+
(0, import_react13.useEffect)(() => {
|
|
474
|
+
console.log(rows);
|
|
475
|
+
}, [rows]);
|
|
476
|
+
const renderInputElement = (element, value) => {
|
|
477
|
+
if (!element)
|
|
478
|
+
return null;
|
|
395
479
|
const { element: type, label } = element;
|
|
396
|
-
console.log("type....", type);
|
|
397
480
|
if (type === "single-select") {
|
|
398
|
-
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (
|
|
481
|
+
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
399
482
|
} else if (type === "textarea") {
|
|
400
|
-
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (
|
|
483
|
+
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
401
484
|
} else {
|
|
402
485
|
return null;
|
|
403
486
|
}
|
|
404
487
|
};
|
|
405
|
-
const dataSource = rows.map((eachRow,
|
|
406
|
-
const
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
return acc;
|
|
414
|
-
}
|
|
415
|
-
acc[curr.label] = renderInputElement(curr);
|
|
416
|
-
return acc;
|
|
417
|
-
}, {}) : {};
|
|
418
|
-
return {
|
|
419
|
-
key: index.toString(),
|
|
420
|
-
"#": index + 1,
|
|
421
|
-
...eachRow,
|
|
422
|
-
...rowElements,
|
|
423
|
-
...variableData,
|
|
424
|
-
actions: /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("button", { onClick: () => onHandleDelete(index) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)))
|
|
488
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
489
|
+
const rowData = {
|
|
490
|
+
key: eachRow.id,
|
|
491
|
+
"#": rowIndex + 1,
|
|
492
|
+
"Medicine": renderInputElement({
|
|
493
|
+
element: eachRow.element,
|
|
494
|
+
label: eachRow.label
|
|
495
|
+
})
|
|
425
496
|
};
|
|
497
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
498
|
+
Object.keys(variable).forEach((key) => {
|
|
499
|
+
if (key === "SubRows") {
|
|
500
|
+
rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
|
|
501
|
+
} else {
|
|
502
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
503
|
+
}
|
|
504
|
+
});
|
|
505
|
+
});
|
|
506
|
+
rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
|
|
507
|
+
console.log("=====rowdata", rowData);
|
|
508
|
+
return rowData;
|
|
426
509
|
});
|
|
427
|
-
|
|
510
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
511
|
+
title: eachHeadEl.label,
|
|
512
|
+
dataIndex: eachHeadEl.name,
|
|
513
|
+
key: eachHeadEl.id
|
|
514
|
+
})) : [];
|
|
515
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
428
516
|
columns.push({
|
|
429
517
|
title: "Actions",
|
|
430
518
|
dataIndex: "actions",
|
|
431
519
|
key: "actions"
|
|
432
520
|
});
|
|
433
521
|
}
|
|
434
|
-
return /* @__PURE__ */ import_react13.default.createElement(
|
|
522
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
435
523
|
import_antd11.Table,
|
|
436
524
|
{
|
|
437
525
|
columns,
|
|
438
|
-
|
|
439
|
-
|
|
526
|
+
dataSource,
|
|
527
|
+
pagination: false,
|
|
528
|
+
bordered: true
|
|
440
529
|
}
|
|
441
|
-
)
|
|
530
|
+
);
|
|
442
531
|
};
|
|
443
532
|
// Annotate the CommonJS export names for ESM import in node:
|
|
444
533
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -15,7 +15,7 @@ var TextElement = (props) => {
|
|
|
15
15
|
type: props.type,
|
|
16
16
|
status: props.status,
|
|
17
17
|
style: props.styles,
|
|
18
|
-
className: props.
|
|
18
|
+
className: props.className,
|
|
19
19
|
variant: props.variant,
|
|
20
20
|
name: props.name,
|
|
21
21
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -56,7 +56,7 @@ var NumberElement = (props) => {
|
|
|
56
56
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
57
57
|
props.onChange(newValue);
|
|
58
58
|
};
|
|
59
|
-
return /* @__PURE__ */ React3.createElement(
|
|
59
|
+
return /* @__PURE__ */ React3.createElement(
|
|
60
60
|
AntInput2,
|
|
61
61
|
{
|
|
62
62
|
placeholder: props.placeholder,
|
|
@@ -68,13 +68,12 @@ var NumberElement = (props) => {
|
|
|
68
68
|
prefix: props.prefix,
|
|
69
69
|
type: props.type,
|
|
70
70
|
status: props.status,
|
|
71
|
-
|
|
72
|
-
className: props.classNames,
|
|
71
|
+
className: props.className,
|
|
73
72
|
variant: props.variant,
|
|
74
73
|
name: props.name,
|
|
75
74
|
onChange: handleInputChange
|
|
76
75
|
}
|
|
77
|
-
)
|
|
76
|
+
);
|
|
78
77
|
};
|
|
79
78
|
|
|
80
79
|
// src/Components/TextareaElement.tsx
|
|
@@ -82,7 +81,7 @@ import React4 from "react";
|
|
|
82
81
|
import { Flex, Input as Input2 } from "antd";
|
|
83
82
|
var { TextArea } = Input2;
|
|
84
83
|
var TextareaElement = (props) => {
|
|
85
|
-
return /* @__PURE__ */ React4.createElement(Flex,
|
|
84
|
+
return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
|
|
86
85
|
TextArea,
|
|
87
86
|
{
|
|
88
87
|
placeholder: props.placeholder,
|
|
@@ -91,8 +90,7 @@ var TextareaElement = (props) => {
|
|
|
91
90
|
disabled: props.disabled,
|
|
92
91
|
id: props.name,
|
|
93
92
|
status: props.status,
|
|
94
|
-
|
|
95
|
-
className: props.classNames,
|
|
93
|
+
className: props.className,
|
|
96
94
|
variant: props.variant,
|
|
97
95
|
name: props.name,
|
|
98
96
|
showCount: true,
|
|
@@ -130,7 +128,7 @@ var SelectElement = (props) => {
|
|
|
130
128
|
id: props.name,
|
|
131
129
|
status: props.status,
|
|
132
130
|
style: props.styles,
|
|
133
|
-
className: props.
|
|
131
|
+
className: props.className,
|
|
134
132
|
variant: props.variant,
|
|
135
133
|
onChange: handleChange
|
|
136
134
|
}
|
|
@@ -138,27 +136,57 @@ var SelectElement = (props) => {
|
|
|
138
136
|
};
|
|
139
137
|
|
|
140
138
|
// src/Components/RadioElement.tsx
|
|
141
|
-
import React6 from "react";
|
|
139
|
+
import React6, { useState as useState2 } from "react";
|
|
142
140
|
import { Radio } from "antd";
|
|
141
|
+
var containerClassName = " ";
|
|
142
|
+
var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
|
|
143
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] rounded-[8px] p-[6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
143
144
|
var RadioElement = (props) => {
|
|
145
|
+
const [isDisabled, setIsDisabled] = useState2(props.disabled);
|
|
146
|
+
const [selectedValue, setSelectedValue] = useState2(props.value);
|
|
147
|
+
const optionType = props.optionType === "button" ? "button" : void 0;
|
|
144
148
|
const handleChange = (e) => {
|
|
149
|
+
const selectedVal = e.target.value;
|
|
150
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
151
|
+
setSelectedValue(selectedVal);
|
|
152
|
+
setIsDisabled(true);
|
|
145
153
|
if (props.onChange) {
|
|
146
|
-
const selectedVal = e.target.value;
|
|
147
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
148
154
|
props.onChange(selectedOptions);
|
|
149
155
|
}
|
|
150
156
|
};
|
|
151
|
-
|
|
157
|
+
const getButtonStyle = (option) => {
|
|
158
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
159
|
+
};
|
|
160
|
+
return /* @__PURE__ */ React6.createElement("div", { className: containerClassName }, /* @__PURE__ */ React6.createElement(
|
|
161
|
+
Radio.Group,
|
|
162
|
+
{
|
|
163
|
+
onChange: handleChange,
|
|
164
|
+
optionType,
|
|
165
|
+
className: props.className,
|
|
166
|
+
value: selectedValue
|
|
167
|
+
},
|
|
168
|
+
props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
|
|
169
|
+
Radio,
|
|
170
|
+
{
|
|
171
|
+
key: option.value,
|
|
172
|
+
value: option.value,
|
|
173
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
174
|
+
className: getButtonStyle(option),
|
|
175
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
176
|
+
},
|
|
177
|
+
option.label
|
|
178
|
+
))
|
|
179
|
+
));
|
|
152
180
|
};
|
|
153
181
|
|
|
154
182
|
// src/Components/Checkbox.tsx
|
|
155
|
-
import React7, { useState as
|
|
183
|
+
import React7, { useState as useState3 } from "react";
|
|
156
184
|
import { Checkbox, Divider } from "antd";
|
|
157
185
|
var CheckboxGroup = Checkbox.Group;
|
|
158
186
|
var plainOptions = ["Apple", "Pear", "Orange"];
|
|
159
187
|
var defaultCheckedList = [];
|
|
160
188
|
var CheckboxElement = (props) => {
|
|
161
|
-
const [checkedList, setCheckedList] =
|
|
189
|
+
const [checkedList, setCheckedList] = useState3(defaultCheckedList);
|
|
162
190
|
const checkAll = plainOptions.length === checkedList.length;
|
|
163
191
|
const handleChange = (list) => {
|
|
164
192
|
setCheckedList(list);
|
|
@@ -182,7 +210,7 @@ var CheckboxElement = (props) => {
|
|
|
182
210
|
disabled: props.disabled,
|
|
183
211
|
id: props.name,
|
|
184
212
|
style: props.styles,
|
|
185
|
-
className: props.
|
|
213
|
+
className: props.className,
|
|
186
214
|
onChange: onHandleAllChanges,
|
|
187
215
|
checked: checkAll
|
|
188
216
|
},
|
|
@@ -192,7 +220,7 @@ var CheckboxElement = (props) => {
|
|
|
192
220
|
{
|
|
193
221
|
disabled: props.disabled,
|
|
194
222
|
style: props.styles,
|
|
195
|
-
className: props.
|
|
223
|
+
className: props.className,
|
|
196
224
|
options: plainOptions,
|
|
197
225
|
value: checkedList,
|
|
198
226
|
onChange: handleChange
|
|
@@ -308,90 +336,151 @@ var MultipleSelectElement = (props) => {
|
|
|
308
336
|
|
|
309
337
|
// src/Components/Button.tsx
|
|
310
338
|
import React11 from "react";
|
|
311
|
-
import { Button as Button2
|
|
312
|
-
var
|
|
339
|
+
import { Button as Button2 } from "antd";
|
|
340
|
+
var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
341
|
+
var ButtonElement = (props) => {
|
|
342
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
343
|
+
console.log("Performing action:", props.action);
|
|
344
|
+
} : props.action;
|
|
345
|
+
return /* @__PURE__ */ React11.createElement(
|
|
346
|
+
Button2,
|
|
347
|
+
{
|
|
348
|
+
onClick: handleClick,
|
|
349
|
+
className: `${defaultClassName} ${props.className ? props.className : ""}`
|
|
350
|
+
},
|
|
351
|
+
props.label
|
|
352
|
+
);
|
|
353
|
+
};
|
|
313
354
|
|
|
314
355
|
// src/Components/AddMoreTable.tsx
|
|
315
|
-
import React12, { useState as
|
|
316
|
-
import { Table } from "antd";
|
|
356
|
+
import React12, { useEffect, useState as useState4 } from "react";
|
|
357
|
+
import { Table, Button as Button3 } from "antd";
|
|
317
358
|
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
318
359
|
var AddMoreTable = (props) => {
|
|
319
360
|
const { thead, tbody } = props;
|
|
320
|
-
const [
|
|
321
|
-
const [rows, setRows] = useState3(tbody || []);
|
|
322
|
-
function isColumnType(column) {
|
|
323
|
-
return column.dataIndex !== void 0;
|
|
324
|
-
}
|
|
325
|
-
const onHandleChange = (name, value) => {
|
|
326
|
-
setTableData((prev) => ({ ...prev, [name]: value }));
|
|
327
|
-
console.log(tableData);
|
|
328
|
-
};
|
|
361
|
+
const [rows, setRows] = useState4(tbody || []);
|
|
329
362
|
const onHandleRows = () => {
|
|
330
|
-
const
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
363
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
364
|
+
let newRow = {
|
|
365
|
+
id: newId,
|
|
366
|
+
label: "Medicine",
|
|
367
|
+
name: "Medicine",
|
|
368
|
+
type: "text",
|
|
369
|
+
element: "single-select",
|
|
370
|
+
variable_data: [
|
|
371
|
+
{
|
|
372
|
+
id: 1,
|
|
373
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
374
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
375
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
376
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
377
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
378
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
379
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
380
|
+
}
|
|
381
|
+
]
|
|
335
382
|
};
|
|
336
383
|
setRows((prevData) => [...prevData, newRow]);
|
|
337
384
|
};
|
|
338
|
-
const onHandleDelete = (
|
|
339
|
-
|
|
340
|
-
setRows(remainingRows);
|
|
385
|
+
const onHandleDelete = (id) => {
|
|
386
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
341
387
|
};
|
|
342
|
-
const
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
388
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
389
|
+
setRows((prevRows) => {
|
|
390
|
+
return prevRows.map((row, index) => {
|
|
391
|
+
if (index === rowIndex) {
|
|
392
|
+
const newSubRow = {
|
|
393
|
+
id: row.variable_data.length + 1,
|
|
394
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
395
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
396
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
397
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
398
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
399
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
400
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
401
|
+
};
|
|
402
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
403
|
+
return {
|
|
404
|
+
...row,
|
|
405
|
+
variable_data: updatedVariableData
|
|
406
|
+
};
|
|
407
|
+
}
|
|
408
|
+
return row;
|
|
409
|
+
});
|
|
410
|
+
});
|
|
411
|
+
};
|
|
412
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
413
|
+
setRows((prevRows) => {
|
|
414
|
+
return prevRows.map((row, index) => {
|
|
415
|
+
if (index === rowIndex) {
|
|
416
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
417
|
+
return {
|
|
418
|
+
...row,
|
|
419
|
+
variable_data: updatedVariableData
|
|
420
|
+
};
|
|
421
|
+
}
|
|
422
|
+
return row;
|
|
423
|
+
});
|
|
424
|
+
});
|
|
425
|
+
};
|
|
426
|
+
useEffect(() => {
|
|
427
|
+
console.log(rows);
|
|
428
|
+
}, [rows]);
|
|
429
|
+
const renderInputElement = (element, value) => {
|
|
430
|
+
if (!element)
|
|
431
|
+
return null;
|
|
348
432
|
const { element: type, label } = element;
|
|
349
|
-
console.log("type....", type);
|
|
350
433
|
if (type === "single-select") {
|
|
351
|
-
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (
|
|
434
|
+
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
352
435
|
} else if (type === "textarea") {
|
|
353
|
-
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (
|
|
436
|
+
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
354
437
|
} else {
|
|
355
438
|
return null;
|
|
356
439
|
}
|
|
357
440
|
};
|
|
358
|
-
const dataSource = rows.map((eachRow,
|
|
359
|
-
const
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
return acc;
|
|
367
|
-
}
|
|
368
|
-
acc[curr.label] = renderInputElement(curr);
|
|
369
|
-
return acc;
|
|
370
|
-
}, {}) : {};
|
|
371
|
-
return {
|
|
372
|
-
key: index.toString(),
|
|
373
|
-
"#": index + 1,
|
|
374
|
-
...eachRow,
|
|
375
|
-
...rowElements,
|
|
376
|
-
...variableData,
|
|
377
|
-
actions: /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("button", { onClick: () => onHandleDelete(index) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), index === rows.length - 1 && /* @__PURE__ */ React12.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)))
|
|
441
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
442
|
+
const rowData = {
|
|
443
|
+
key: eachRow.id,
|
|
444
|
+
"#": rowIndex + 1,
|
|
445
|
+
"Medicine": renderInputElement({
|
|
446
|
+
element: eachRow.element,
|
|
447
|
+
label: eachRow.label
|
|
448
|
+
})
|
|
378
449
|
};
|
|
450
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
451
|
+
Object.keys(variable).forEach((key) => {
|
|
452
|
+
if (key === "SubRows") {
|
|
453
|
+
rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
|
|
454
|
+
} else {
|
|
455
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
});
|
|
459
|
+
rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
|
|
460
|
+
console.log("=====rowdata", rowData);
|
|
461
|
+
return rowData;
|
|
379
462
|
});
|
|
380
|
-
|
|
463
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
464
|
+
title: eachHeadEl.label,
|
|
465
|
+
dataIndex: eachHeadEl.name,
|
|
466
|
+
key: eachHeadEl.id
|
|
467
|
+
})) : [];
|
|
468
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
381
469
|
columns.push({
|
|
382
470
|
title: "Actions",
|
|
383
471
|
dataIndex: "actions",
|
|
384
472
|
key: "actions"
|
|
385
473
|
});
|
|
386
474
|
}
|
|
387
|
-
return /* @__PURE__ */ React12.createElement(
|
|
475
|
+
return /* @__PURE__ */ React12.createElement(
|
|
388
476
|
Table,
|
|
389
477
|
{
|
|
390
478
|
columns,
|
|
391
|
-
|
|
392
|
-
|
|
479
|
+
dataSource,
|
|
480
|
+
pagination: false,
|
|
481
|
+
bordered: true
|
|
393
482
|
}
|
|
394
|
-
)
|
|
483
|
+
);
|
|
395
484
|
};
|
|
396
485
|
export {
|
|
397
486
|
AddMoreTable,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apexcura/ui-components",
|
|
3
|
-
"version": "0.0.12-
|
|
3
|
+
"version": "0.0.12-Beta60",
|
|
4
4
|
"description": "Apex cura React components library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"apex cura",
|
|
@@ -36,10 +36,13 @@
|
|
|
36
36
|
"@types/react-global-configuration": "^1.3.3",
|
|
37
37
|
"@types/testing-library__react": "^10.2.0",
|
|
38
38
|
"antd": "^5.16.5",
|
|
39
|
+
"autoprefixer": "^10.4.19",
|
|
39
40
|
"jest": "^29.7.0",
|
|
40
41
|
"jest-environment-jsdom": "^29.7.0",
|
|
42
|
+
"postcss": "^8.4.38",
|
|
41
43
|
"react": "^18.3.1",
|
|
42
44
|
"react-dom": "^18.3.1",
|
|
45
|
+
"tailwindcss": "^3.4.3",
|
|
43
46
|
"ts-jest": "^29.1.2",
|
|
44
47
|
"tsup": "^8.0.2",
|
|
45
48
|
"typescript": "^5.4.5"
|