@apexcura/ui-components 0.0.12-Beta5 → 0.0.12-Beta50
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 +461 -0
- package/dist/index.d.mts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +150 -62
- package/dist/index.mjs +157 -69
- package/package.json +4 -1
- package/postcss.config.js +6 -0
- package/tailwind.config.js +10 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,461 @@
|
|
|
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
|
+
.left-\[146px\] {
|
|
339
|
+
left: 146px;
|
|
340
|
+
}
|
|
341
|
+
.top-\[218px\] {
|
|
342
|
+
top: 218px;
|
|
343
|
+
}
|
|
344
|
+
.m-\[10px\] {
|
|
345
|
+
margin: 10px;
|
|
346
|
+
}
|
|
347
|
+
.mt-\[15px\] {
|
|
348
|
+
margin-top: 15px;
|
|
349
|
+
}
|
|
350
|
+
.table {
|
|
351
|
+
display: table;
|
|
352
|
+
}
|
|
353
|
+
.h-\[192px\] {
|
|
354
|
+
height: 192px;
|
|
355
|
+
}
|
|
356
|
+
.h-\[42px\] {
|
|
357
|
+
height: 42px;
|
|
358
|
+
}
|
|
359
|
+
.w-\[183px\] {
|
|
360
|
+
width: 183px;
|
|
361
|
+
}
|
|
362
|
+
.w-\[224px\] {
|
|
363
|
+
width: 224px;
|
|
364
|
+
}
|
|
365
|
+
.gap-\[8px\] {
|
|
366
|
+
gap: 8px;
|
|
367
|
+
}
|
|
368
|
+
.rounded-\[8px\] {
|
|
369
|
+
border-radius: 8px;
|
|
370
|
+
}
|
|
371
|
+
.\!border {
|
|
372
|
+
border-width: 1px !important;
|
|
373
|
+
}
|
|
374
|
+
.border {
|
|
375
|
+
border-width: 1px;
|
|
376
|
+
}
|
|
377
|
+
.\!border-\[\#B8A4DE\] {
|
|
378
|
+
--tw-border-opacity: 1 !important;
|
|
379
|
+
border-color: rgb(184 164 222 / var(--tw-border-opacity)) !important;
|
|
380
|
+
}
|
|
381
|
+
.border-\[\#919191\] {
|
|
382
|
+
--tw-border-opacity: 1;
|
|
383
|
+
border-color: rgb(145 145 145 / var(--tw-border-opacity));
|
|
384
|
+
}
|
|
385
|
+
.\!bg-\[\#E2D6F8\] {
|
|
386
|
+
--tw-bg-opacity: 1 !important;
|
|
387
|
+
background-color: rgb(226 214 248 / var(--tw-bg-opacity)) !important;
|
|
388
|
+
}
|
|
389
|
+
.bg-\[\#F2F2F2\] {
|
|
390
|
+
--tw-bg-opacity: 1;
|
|
391
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
392
|
+
}
|
|
393
|
+
.p-\[6px_6px\] {
|
|
394
|
+
padding: 6px 6px;
|
|
395
|
+
}
|
|
396
|
+
.text-center {
|
|
397
|
+
text-align: center;
|
|
398
|
+
}
|
|
399
|
+
.italic {
|
|
400
|
+
font-style: italic;
|
|
401
|
+
}
|
|
402
|
+
.\!text-black {
|
|
403
|
+
--tw-text-opacity: 1 !important;
|
|
404
|
+
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
|
|
405
|
+
}
|
|
406
|
+
.shadow-\[0px_0px_1px_1px_\#919191\] {
|
|
407
|
+
--tw-shadow: 0px 0px 1px 1px #919191;
|
|
408
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
409
|
+
box-shadow:
|
|
410
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
411
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
412
|
+
var(--tw-shadow);
|
|
413
|
+
}
|
|
414
|
+
.shadow-\[0px_0px_1px_1px_\#B8A4DE\] {
|
|
415
|
+
--tw-shadow: 0px 0px 1px 1px #B8A4DE;
|
|
416
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
417
|
+
box-shadow:
|
|
418
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
419
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
420
|
+
var(--tw-shadow);
|
|
421
|
+
}
|
|
422
|
+
.filter {
|
|
423
|
+
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);
|
|
424
|
+
}
|
|
425
|
+
.submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
|
|
426
|
+
color: #472D7A;
|
|
427
|
+
background-color: white;
|
|
428
|
+
border: solid 1px #472D7A;
|
|
429
|
+
}
|
|
430
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
|
|
431
|
+
border: solid 1px #919191;
|
|
432
|
+
width: 275px;
|
|
433
|
+
height: 16px;
|
|
434
|
+
padding: 16px;
|
|
435
|
+
gap: 10px;
|
|
436
|
+
}
|
|
437
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
|
|
438
|
+
border: solid 1px #919191;
|
|
439
|
+
}
|
|
440
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
|
|
441
|
+
border: solid 1px #919191;
|
|
442
|
+
}
|
|
443
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
|
|
444
|
+
border: solid 1px #919191;
|
|
445
|
+
}
|
|
446
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
|
447
|
+
display: none;
|
|
448
|
+
}
|
|
449
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
|
|
450
|
+
display: none;
|
|
451
|
+
}
|
|
452
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
|
|
453
|
+
width: 0;
|
|
454
|
+
}
|
|
455
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
|
|
456
|
+
border-inline-start: 1px solid rgb(145 145 145);
|
|
457
|
+
}
|
|
458
|
+
.hover\:bg-\[\#F2F2F2\]:hover {
|
|
459
|
+
--tw-bg-opacity: 1;
|
|
460
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
461
|
+
}
|
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: () => React$1.JSX.Element;
|
|
76
|
+
declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
|
|
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: () => React$1.JSX.Element;
|
|
76
|
+
declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
|
|
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,48 @@ 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 = "w-[224px] h-[192px] top-[218px] left-[146px] gap-[8px] mt-[15px]";
|
|
189
|
+
var className = "bg-[#F2F2F2] border border-[#919191] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
190
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] w-[183px] h-[42px] rounded-[8px] p-[6px_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
|
+
let optionType;
|
|
195
|
+
if (props.optionType === "button") {
|
|
196
|
+
optionType = props.optionType;
|
|
197
|
+
}
|
|
191
198
|
const handleChange = (e) => {
|
|
199
|
+
const selectedVal = e.target.value;
|
|
200
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
201
|
+
setSelectedValue(selectedVal);
|
|
202
|
+
setIsDisabled(true);
|
|
192
203
|
if (props.onChange) {
|
|
193
|
-
const selectedVal = e.target.value;
|
|
194
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
195
204
|
props.onChange(selectedOptions);
|
|
196
205
|
}
|
|
197
206
|
};
|
|
198
|
-
|
|
207
|
+
const getButtonStyle = (option) => {
|
|
208
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
209
|
+
};
|
|
210
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(
|
|
211
|
+
import_antd6.Radio.Group,
|
|
212
|
+
{
|
|
213
|
+
onChange: handleChange,
|
|
214
|
+
optionType,
|
|
215
|
+
className: `${containerClassName} ${props.className && props.className}`,
|
|
216
|
+
value: selectedValue
|
|
217
|
+
},
|
|
218
|
+
props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
|
|
219
|
+
import_antd6.Radio,
|
|
220
|
+
{
|
|
221
|
+
key: option.value,
|
|
222
|
+
value: option.value,
|
|
223
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
224
|
+
className: getButtonStyle(option),
|
|
225
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
226
|
+
},
|
|
227
|
+
option.label
|
|
228
|
+
))
|
|
229
|
+
));
|
|
199
230
|
};
|
|
200
231
|
|
|
201
232
|
// src/Components/Checkbox.tsx
|
|
@@ -229,7 +260,7 @@ var CheckboxElement = (props) => {
|
|
|
229
260
|
disabled: props.disabled,
|
|
230
261
|
id: props.name,
|
|
231
262
|
style: props.styles,
|
|
232
|
-
className: props.
|
|
263
|
+
className: props.className,
|
|
233
264
|
onChange: onHandleAllChanges,
|
|
234
265
|
checked: checkAll
|
|
235
266
|
},
|
|
@@ -239,7 +270,7 @@ var CheckboxElement = (props) => {
|
|
|
239
270
|
{
|
|
240
271
|
disabled: props.disabled,
|
|
241
272
|
style: props.styles,
|
|
242
|
-
className: props.
|
|
273
|
+
className: props.className,
|
|
243
274
|
options: plainOptions,
|
|
244
275
|
value: checkedList,
|
|
245
276
|
onChange: handleChange
|
|
@@ -356,7 +387,12 @@ var MultipleSelectElement = (props) => {
|
|
|
356
387
|
// src/Components/Button.tsx
|
|
357
388
|
var import_react12 = __toESM(require("react"));
|
|
358
389
|
var import_antd10 = require("antd");
|
|
359
|
-
var ButtonElement = () =>
|
|
390
|
+
var ButtonElement = (props) => {
|
|
391
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
392
|
+
console.log("Performing action:", props.action);
|
|
393
|
+
} : props.action;
|
|
394
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, null, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: handleClick, className: props.className }, props.label));
|
|
395
|
+
};
|
|
360
396
|
|
|
361
397
|
// src/Components/AddMoreTable.tsx
|
|
362
398
|
var import_react13 = __toESM(require("react"));
|
|
@@ -364,77 +400,129 @@ var import_antd11 = require("antd");
|
|
|
364
400
|
var import_icons2 = require("@ant-design/icons");
|
|
365
401
|
var AddMoreTable = (props) => {
|
|
366
402
|
const { thead, tbody } = props;
|
|
367
|
-
const [tableData, setTableData] = (0, import_react13.useState)({});
|
|
368
403
|
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
404
|
const onHandleRows = () => {
|
|
377
|
-
const
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
405
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
406
|
+
let newRow = {
|
|
407
|
+
id: newId,
|
|
408
|
+
label: "Medicine",
|
|
409
|
+
name: "Medicine",
|
|
410
|
+
type: "text",
|
|
411
|
+
element: "single-select",
|
|
412
|
+
variable_data: [
|
|
413
|
+
{
|
|
414
|
+
id: 1,
|
|
415
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
416
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
417
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
418
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
419
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
420
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
421
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
422
|
+
}
|
|
423
|
+
]
|
|
382
424
|
};
|
|
383
425
|
setRows((prevData) => [...prevData, newRow]);
|
|
384
426
|
};
|
|
385
|
-
const
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
427
|
+
const onHandleDelete = (id) => {
|
|
428
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
429
|
+
};
|
|
430
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
431
|
+
setRows((prevRows) => {
|
|
432
|
+
return prevRows.map((row, index) => {
|
|
433
|
+
if (index === rowIndex) {
|
|
434
|
+
const newSubRow = {
|
|
435
|
+
id: row.variable_data.length + 1,
|
|
436
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
437
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
438
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
439
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
440
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
441
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
442
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
443
|
+
};
|
|
444
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
445
|
+
return {
|
|
446
|
+
...row,
|
|
447
|
+
variable_data: updatedVariableData
|
|
448
|
+
};
|
|
449
|
+
}
|
|
450
|
+
return row;
|
|
451
|
+
});
|
|
452
|
+
});
|
|
453
|
+
};
|
|
454
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
455
|
+
setRows((prevRows) => {
|
|
456
|
+
return prevRows.map((row, index) => {
|
|
457
|
+
if (index === rowIndex) {
|
|
458
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
459
|
+
return {
|
|
460
|
+
...row,
|
|
461
|
+
variable_data: updatedVariableData
|
|
462
|
+
};
|
|
463
|
+
}
|
|
464
|
+
return row;
|
|
465
|
+
});
|
|
466
|
+
});
|
|
467
|
+
};
|
|
468
|
+
(0, import_react13.useEffect)(() => {
|
|
469
|
+
console.log(rows);
|
|
470
|
+
}, [rows]);
|
|
471
|
+
const renderInputElement = (element, value) => {
|
|
472
|
+
if (!element)
|
|
473
|
+
return null;
|
|
391
474
|
const { element: type, label } = element;
|
|
392
|
-
console.log("type....", type);
|
|
393
475
|
if (type === "single-select") {
|
|
394
|
-
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (
|
|
476
|
+
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
395
477
|
} else if (type === "textarea") {
|
|
396
|
-
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (
|
|
478
|
+
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
397
479
|
} else {
|
|
398
480
|
return null;
|
|
399
481
|
}
|
|
400
482
|
};
|
|
401
|
-
const dataSource = rows.map((eachRow,
|
|
402
|
-
const
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
return acc;
|
|
410
|
-
}
|
|
411
|
-
acc[curr.label] = renderInputElement(curr);
|
|
412
|
-
return acc;
|
|
413
|
-
}, {}) : {};
|
|
414
|
-
return {
|
|
415
|
-
key: index.toString(),
|
|
416
|
-
"#": index + 1,
|
|
417
|
-
...eachRow,
|
|
418
|
-
...rowElements,
|
|
419
|
-
...variableData,
|
|
420
|
-
actions: index === rows.length - 1 ? /* @__PURE__ */ import_react13.default.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)) : null
|
|
483
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
484
|
+
const rowData = {
|
|
485
|
+
key: eachRow.id,
|
|
486
|
+
"#": rowIndex + 1,
|
|
487
|
+
"Medicine": renderInputElement({
|
|
488
|
+
element: eachRow.element,
|
|
489
|
+
label: eachRow.label
|
|
490
|
+
})
|
|
421
491
|
};
|
|
492
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
493
|
+
Object.keys(variable).forEach((key) => {
|
|
494
|
+
if (key === "SubRows") {
|
|
495
|
+
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)));
|
|
496
|
+
} else {
|
|
497
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
498
|
+
}
|
|
499
|
+
});
|
|
500
|
+
});
|
|
501
|
+
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)));
|
|
502
|
+
console.log("=====rowdata", rowData);
|
|
503
|
+
return rowData;
|
|
422
504
|
});
|
|
423
|
-
|
|
505
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
506
|
+
title: eachHeadEl.label,
|
|
507
|
+
dataIndex: eachHeadEl.name,
|
|
508
|
+
key: eachHeadEl.id
|
|
509
|
+
})) : [];
|
|
510
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
424
511
|
columns.push({
|
|
425
512
|
title: "Actions",
|
|
426
513
|
dataIndex: "actions",
|
|
427
514
|
key: "actions"
|
|
428
515
|
});
|
|
429
516
|
}
|
|
430
|
-
return /* @__PURE__ */ import_react13.default.createElement(
|
|
517
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
431
518
|
import_antd11.Table,
|
|
432
519
|
{
|
|
433
520
|
columns,
|
|
434
|
-
|
|
435
|
-
|
|
521
|
+
dataSource,
|
|
522
|
+
pagination: false,
|
|
523
|
+
bordered: true
|
|
436
524
|
}
|
|
437
|
-
)
|
|
525
|
+
);
|
|
438
526
|
};
|
|
439
527
|
// Annotate the CommonJS export names for ESM import in node:
|
|
440
528
|
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,60 @@ 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 = "w-[224px] h-[192px] top-[218px] left-[146px] gap-[8px] mt-[15px]";
|
|
142
|
+
var className = "bg-[#F2F2F2] border border-[#919191] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
143
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] w-[183px] h-[42px] rounded-[8px] p-[6px_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
|
+
let optionType;
|
|
148
|
+
if (props.optionType === "button") {
|
|
149
|
+
optionType = props.optionType;
|
|
150
|
+
}
|
|
144
151
|
const handleChange = (e) => {
|
|
152
|
+
const selectedVal = e.target.value;
|
|
153
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
154
|
+
setSelectedValue(selectedVal);
|
|
155
|
+
setIsDisabled(true);
|
|
145
156
|
if (props.onChange) {
|
|
146
|
-
const selectedVal = e.target.value;
|
|
147
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
148
157
|
props.onChange(selectedOptions);
|
|
149
158
|
}
|
|
150
159
|
};
|
|
151
|
-
|
|
160
|
+
const getButtonStyle = (option) => {
|
|
161
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
162
|
+
};
|
|
163
|
+
return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
|
|
164
|
+
Radio.Group,
|
|
165
|
+
{
|
|
166
|
+
onChange: handleChange,
|
|
167
|
+
optionType,
|
|
168
|
+
className: `${containerClassName} ${props.className && props.className}`,
|
|
169
|
+
value: selectedValue
|
|
170
|
+
},
|
|
171
|
+
props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
|
|
172
|
+
Radio,
|
|
173
|
+
{
|
|
174
|
+
key: option.value,
|
|
175
|
+
value: option.value,
|
|
176
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
177
|
+
className: getButtonStyle(option),
|
|
178
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
179
|
+
},
|
|
180
|
+
option.label
|
|
181
|
+
))
|
|
182
|
+
));
|
|
152
183
|
};
|
|
153
184
|
|
|
154
185
|
// src/Components/Checkbox.tsx
|
|
155
|
-
import React7, { useState as
|
|
186
|
+
import React7, { useState as useState3 } from "react";
|
|
156
187
|
import { Checkbox, Divider } from "antd";
|
|
157
188
|
var CheckboxGroup = Checkbox.Group;
|
|
158
189
|
var plainOptions = ["Apple", "Pear", "Orange"];
|
|
159
190
|
var defaultCheckedList = [];
|
|
160
191
|
var CheckboxElement = (props) => {
|
|
161
|
-
const [checkedList, setCheckedList] =
|
|
192
|
+
const [checkedList, setCheckedList] = useState3(defaultCheckedList);
|
|
162
193
|
const checkAll = plainOptions.length === checkedList.length;
|
|
163
194
|
const handleChange = (list) => {
|
|
164
195
|
setCheckedList(list);
|
|
@@ -182,7 +213,7 @@ var CheckboxElement = (props) => {
|
|
|
182
213
|
disabled: props.disabled,
|
|
183
214
|
id: props.name,
|
|
184
215
|
style: props.styles,
|
|
185
|
-
className: props.
|
|
216
|
+
className: props.className,
|
|
186
217
|
onChange: onHandleAllChanges,
|
|
187
218
|
checked: checkAll
|
|
188
219
|
},
|
|
@@ -192,7 +223,7 @@ var CheckboxElement = (props) => {
|
|
|
192
223
|
{
|
|
193
224
|
disabled: props.disabled,
|
|
194
225
|
style: props.styles,
|
|
195
|
-
className: props.
|
|
226
|
+
className: props.className,
|
|
196
227
|
options: plainOptions,
|
|
197
228
|
value: checkedList,
|
|
198
229
|
onChange: handleChange
|
|
@@ -309,85 +340,142 @@ var MultipleSelectElement = (props) => {
|
|
|
309
340
|
// src/Components/Button.tsx
|
|
310
341
|
import React11 from "react";
|
|
311
342
|
import { Button as Button2, Flex as Flex2 } from "antd";
|
|
312
|
-
var ButtonElement = () =>
|
|
343
|
+
var ButtonElement = (props) => {
|
|
344
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
345
|
+
console.log("Performing action:", props.action);
|
|
346
|
+
} : props.action;
|
|
347
|
+
return /* @__PURE__ */ React11.createElement(Flex2, null, /* @__PURE__ */ React11.createElement(Button2, { onClick: handleClick, className: props.className }, props.label));
|
|
348
|
+
};
|
|
313
349
|
|
|
314
350
|
// src/Components/AddMoreTable.tsx
|
|
315
|
-
import React12, { useState as
|
|
316
|
-
import { Table } from "antd";
|
|
317
|
-
import { PlusOutlined } from "@ant-design/icons";
|
|
351
|
+
import React12, { useEffect, useState as useState4 } from "react";
|
|
352
|
+
import { Table, Button as Button3 } from "antd";
|
|
353
|
+
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
318
354
|
var AddMoreTable = (props) => {
|
|
319
355
|
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
|
-
};
|
|
356
|
+
const [rows, setRows] = useState4(tbody || []);
|
|
329
357
|
const onHandleRows = () => {
|
|
330
|
-
const
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
358
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
359
|
+
let newRow = {
|
|
360
|
+
id: newId,
|
|
361
|
+
label: "Medicine",
|
|
362
|
+
name: "Medicine",
|
|
363
|
+
type: "text",
|
|
364
|
+
element: "single-select",
|
|
365
|
+
variable_data: [
|
|
366
|
+
{
|
|
367
|
+
id: 1,
|
|
368
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
369
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
370
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
371
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
372
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
373
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
374
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
375
|
+
}
|
|
376
|
+
]
|
|
335
377
|
};
|
|
336
378
|
setRows((prevData) => [...prevData, newRow]);
|
|
337
379
|
};
|
|
338
|
-
const
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
380
|
+
const onHandleDelete = (id) => {
|
|
381
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
382
|
+
};
|
|
383
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
384
|
+
setRows((prevRows) => {
|
|
385
|
+
return prevRows.map((row, index) => {
|
|
386
|
+
if (index === rowIndex) {
|
|
387
|
+
const newSubRow = {
|
|
388
|
+
id: row.variable_data.length + 1,
|
|
389
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
390
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
391
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
392
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
393
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
394
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
395
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
396
|
+
};
|
|
397
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
398
|
+
return {
|
|
399
|
+
...row,
|
|
400
|
+
variable_data: updatedVariableData
|
|
401
|
+
};
|
|
402
|
+
}
|
|
403
|
+
return row;
|
|
404
|
+
});
|
|
405
|
+
});
|
|
406
|
+
};
|
|
407
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
408
|
+
setRows((prevRows) => {
|
|
409
|
+
return prevRows.map((row, index) => {
|
|
410
|
+
if (index === rowIndex) {
|
|
411
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
412
|
+
return {
|
|
413
|
+
...row,
|
|
414
|
+
variable_data: updatedVariableData
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
return row;
|
|
418
|
+
});
|
|
419
|
+
});
|
|
420
|
+
};
|
|
421
|
+
useEffect(() => {
|
|
422
|
+
console.log(rows);
|
|
423
|
+
}, [rows]);
|
|
424
|
+
const renderInputElement = (element, value) => {
|
|
425
|
+
if (!element)
|
|
426
|
+
return null;
|
|
344
427
|
const { element: type, label } = element;
|
|
345
|
-
console.log("type....", type);
|
|
346
428
|
if (type === "single-select") {
|
|
347
|
-
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (
|
|
429
|
+
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
348
430
|
} else if (type === "textarea") {
|
|
349
|
-
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (
|
|
431
|
+
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
350
432
|
} else {
|
|
351
433
|
return null;
|
|
352
434
|
}
|
|
353
435
|
};
|
|
354
|
-
const dataSource = rows.map((eachRow,
|
|
355
|
-
const
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
return acc;
|
|
363
|
-
}
|
|
364
|
-
acc[curr.label] = renderInputElement(curr);
|
|
365
|
-
return acc;
|
|
366
|
-
}, {}) : {};
|
|
367
|
-
return {
|
|
368
|
-
key: index.toString(),
|
|
369
|
-
"#": index + 1,
|
|
370
|
-
...eachRow,
|
|
371
|
-
...rowElements,
|
|
372
|
-
...variableData,
|
|
373
|
-
actions: index === rows.length - 1 ? /* @__PURE__ */ React12.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)) : null
|
|
436
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
437
|
+
const rowData = {
|
|
438
|
+
key: eachRow.id,
|
|
439
|
+
"#": rowIndex + 1,
|
|
440
|
+
"Medicine": renderInputElement({
|
|
441
|
+
element: eachRow.element,
|
|
442
|
+
label: eachRow.label
|
|
443
|
+
})
|
|
374
444
|
};
|
|
445
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
446
|
+
Object.keys(variable).forEach((key) => {
|
|
447
|
+
if (key === "SubRows") {
|
|
448
|
+
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)));
|
|
449
|
+
} else {
|
|
450
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
451
|
+
}
|
|
452
|
+
});
|
|
453
|
+
});
|
|
454
|
+
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)));
|
|
455
|
+
console.log("=====rowdata", rowData);
|
|
456
|
+
return rowData;
|
|
375
457
|
});
|
|
376
|
-
|
|
458
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
459
|
+
title: eachHeadEl.label,
|
|
460
|
+
dataIndex: eachHeadEl.name,
|
|
461
|
+
key: eachHeadEl.id
|
|
462
|
+
})) : [];
|
|
463
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
377
464
|
columns.push({
|
|
378
465
|
title: "Actions",
|
|
379
466
|
dataIndex: "actions",
|
|
380
467
|
key: "actions"
|
|
381
468
|
});
|
|
382
469
|
}
|
|
383
|
-
return /* @__PURE__ */ React12.createElement(
|
|
470
|
+
return /* @__PURE__ */ React12.createElement(
|
|
384
471
|
Table,
|
|
385
472
|
{
|
|
386
473
|
columns,
|
|
387
|
-
|
|
388
|
-
|
|
474
|
+
dataSource,
|
|
475
|
+
pagination: false,
|
|
476
|
+
bordered: true
|
|
389
477
|
}
|
|
390
|
-
)
|
|
478
|
+
);
|
|
391
479
|
};
|
|
392
480
|
export {
|
|
393
481
|
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-Beta50",
|
|
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"
|