@apexcura/ui-components 0.0.11-Beta11 → 0.0.11-Beta110
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 +485 -0
- package/dist/index.d.mts +19 -4
- package/dist/index.d.ts +19 -4
- package/dist/index.js +177 -42
- package/dist/index.mjs +182 -48
- package/package.json +4 -1
- package/postcss.config.js +6 -0
- package/tailwind.config.js +9 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,485 @@
|
|
|
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
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
|
|
455
|
+
border: solid 1px #919191;
|
|
456
|
+
width: 275px;
|
|
457
|
+
height: 16px;
|
|
458
|
+
padding: 16px;
|
|
459
|
+
gap: 10px;
|
|
460
|
+
}
|
|
461
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
|
|
462
|
+
border: solid 1px #919191;
|
|
463
|
+
}
|
|
464
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
|
|
465
|
+
border: solid 1px #919191;
|
|
466
|
+
}
|
|
467
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
|
|
468
|
+
border: solid 1px #919191;
|
|
469
|
+
}
|
|
470
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
|
471
|
+
display: none;
|
|
472
|
+
}
|
|
473
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
|
|
474
|
+
display: none;
|
|
475
|
+
}
|
|
476
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
|
|
477
|
+
width: 0;
|
|
478
|
+
}
|
|
479
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
|
|
480
|
+
border-inline-start: 1px solid rgb(145 145 145);
|
|
481
|
+
}
|
|
482
|
+
.hover\:bg-\[\#F2F2F2\]:hover {
|
|
483
|
+
--tw-bg-opacity: 1;
|
|
484
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
485
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,28 +1,41 @@
|
|
|
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;
|
|
32
|
+
listClassName?: string;
|
|
33
|
+
listItemClassName?: string;
|
|
34
|
+
img?: string;
|
|
35
|
+
items?: any[];
|
|
36
|
+
primaryText?: string;
|
|
37
|
+
secondaryText?: string;
|
|
38
|
+
count?: number;
|
|
26
39
|
};
|
|
27
40
|
|
|
28
41
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,8 +80,10 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
80
|
|
|
68
81
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
82
|
|
|
70
|
-
declare const ButtonElement:
|
|
83
|
+
declare const ButtonElement: React$1.FC<ElementType>;
|
|
71
84
|
|
|
72
85
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
86
|
|
|
74
|
-
|
|
87
|
+
declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
|
|
88
|
+
|
|
89
|
+
export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,28 +1,41 @@
|
|
|
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;
|
|
32
|
+
listClassName?: string;
|
|
33
|
+
listItemClassName?: string;
|
|
34
|
+
img?: string;
|
|
35
|
+
items?: any[];
|
|
36
|
+
primaryText?: string;
|
|
37
|
+
secondaryText?: string;
|
|
38
|
+
count?: number;
|
|
26
39
|
};
|
|
27
40
|
|
|
28
41
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,8 +80,10 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
80
|
|
|
68
81
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
82
|
|
|
70
|
-
declare const ButtonElement:
|
|
83
|
+
declare const ButtonElement: React$1.FC<ElementType>;
|
|
71
84
|
|
|
72
85
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
86
|
|
|
74
|
-
|
|
87
|
+
declare const Sidebar: (props: ElementType) => React$1.JSX.Element;
|
|
88
|
+
|
|
89
|
+
export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };
|
package/dist/index.js
CHANGED
|
@@ -39,6 +39,7 @@ __export(src_exports, {
|
|
|
39
39
|
PasswordElement: () => PasswordElement,
|
|
40
40
|
RadioElement: () => RadioElement,
|
|
41
41
|
SelectElement: () => SelectElement,
|
|
42
|
+
Sidebar: () => Sidebar,
|
|
42
43
|
SingleSelectElement: () => SingleSelectElement,
|
|
43
44
|
TextElement: () => TextElement,
|
|
44
45
|
TextareaElement: () => TextareaElement
|
|
@@ -62,7 +63,7 @@ var TextElement = (props) => {
|
|
|
62
63
|
type: props.type,
|
|
63
64
|
status: props.status,
|
|
64
65
|
style: props.styles,
|
|
65
|
-
className: props.
|
|
66
|
+
className: props.className,
|
|
66
67
|
variant: props.variant,
|
|
67
68
|
name: props.name,
|
|
68
69
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -103,7 +104,7 @@ var NumberElement = (props) => {
|
|
|
103
104
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
104
105
|
props.onChange(newValue);
|
|
105
106
|
};
|
|
106
|
-
return /* @__PURE__ */ import_react3.default.createElement(
|
|
107
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
107
108
|
import_antd3.Input,
|
|
108
109
|
{
|
|
109
110
|
placeholder: props.placeholder,
|
|
@@ -115,13 +116,12 @@ var NumberElement = (props) => {
|
|
|
115
116
|
prefix: props.prefix,
|
|
116
117
|
type: props.type,
|
|
117
118
|
status: props.status,
|
|
118
|
-
|
|
119
|
-
className: props.classNames,
|
|
119
|
+
className: props.className,
|
|
120
120
|
variant: props.variant,
|
|
121
121
|
name: props.name,
|
|
122
122
|
onChange: handleInputChange
|
|
123
123
|
}
|
|
124
|
-
)
|
|
124
|
+
);
|
|
125
125
|
};
|
|
126
126
|
|
|
127
127
|
// src/Components/TextareaElement.tsx
|
|
@@ -129,7 +129,7 @@ var import_react4 = __toESM(require("react"));
|
|
|
129
129
|
var import_antd4 = require("antd");
|
|
130
130
|
var { TextArea } = import_antd4.Input;
|
|
131
131
|
var TextareaElement = (props) => {
|
|
132
|
-
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex,
|
|
132
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
133
133
|
TextArea,
|
|
134
134
|
{
|
|
135
135
|
placeholder: props.placeholder,
|
|
@@ -138,8 +138,7 @@ var TextareaElement = (props) => {
|
|
|
138
138
|
disabled: props.disabled,
|
|
139
139
|
id: props.name,
|
|
140
140
|
status: props.status,
|
|
141
|
-
|
|
142
|
-
className: props.classNames,
|
|
141
|
+
className: props.className,
|
|
143
142
|
variant: props.variant,
|
|
144
143
|
name: props.name,
|
|
145
144
|
showCount: true,
|
|
@@ -177,7 +176,7 @@ var SelectElement = (props) => {
|
|
|
177
176
|
id: props.name,
|
|
178
177
|
status: props.status,
|
|
179
178
|
style: props.styles,
|
|
180
|
-
className: props.
|
|
179
|
+
className: props.className,
|
|
181
180
|
variant: props.variant,
|
|
182
181
|
onChange: handleChange
|
|
183
182
|
}
|
|
@@ -187,15 +186,45 @@ var SelectElement = (props) => {
|
|
|
187
186
|
// src/Components/RadioElement.tsx
|
|
188
187
|
var import_react6 = __toESM(require("react"));
|
|
189
188
|
var import_antd6 = require("antd");
|
|
189
|
+
var containerClassName = " ";
|
|
190
|
+
var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
|
|
191
|
+
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
192
|
var RadioElement = (props) => {
|
|
193
|
+
const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
|
|
194
|
+
const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
|
|
195
|
+
const optionType = props.optionType === "button" ? "button" : void 0;
|
|
191
196
|
const handleChange = (e) => {
|
|
197
|
+
const selectedVal = e.target.value;
|
|
198
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
199
|
+
setSelectedValue(selectedVal);
|
|
200
|
+
setIsDisabled(true);
|
|
192
201
|
if (props.onChange) {
|
|
193
|
-
const selectedVal = e.target.value;
|
|
194
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
195
202
|
props.onChange(selectedOptions);
|
|
196
203
|
}
|
|
197
204
|
};
|
|
198
|
-
|
|
205
|
+
const getButtonStyle = (option) => {
|
|
206
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
207
|
+
};
|
|
208
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement("p", null, props.label), /* @__PURE__ */ import_react6.default.createElement(
|
|
209
|
+
import_antd6.Radio.Group,
|
|
210
|
+
{
|
|
211
|
+
onChange: handleChange,
|
|
212
|
+
optionType,
|
|
213
|
+
className: props.className,
|
|
214
|
+
value: selectedValue
|
|
215
|
+
},
|
|
216
|
+
props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
|
|
217
|
+
import_antd6.Radio,
|
|
218
|
+
{
|
|
219
|
+
key: option.value,
|
|
220
|
+
value: option.value,
|
|
221
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
222
|
+
className: getButtonStyle(option),
|
|
223
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
224
|
+
},
|
|
225
|
+
option.label
|
|
226
|
+
))
|
|
227
|
+
));
|
|
199
228
|
};
|
|
200
229
|
|
|
201
230
|
// src/Components/Checkbox.tsx
|
|
@@ -229,7 +258,7 @@ var CheckboxElement = (props) => {
|
|
|
229
258
|
disabled: props.disabled,
|
|
230
259
|
id: props.name,
|
|
231
260
|
style: props.styles,
|
|
232
|
-
className: props.
|
|
261
|
+
className: props.className,
|
|
233
262
|
onChange: onHandleAllChanges,
|
|
234
263
|
checked: checkAll
|
|
235
264
|
},
|
|
@@ -239,7 +268,7 @@ var CheckboxElement = (props) => {
|
|
|
239
268
|
{
|
|
240
269
|
disabled: props.disabled,
|
|
241
270
|
style: props.styles,
|
|
242
|
-
className: props.
|
|
271
|
+
className: props.className,
|
|
243
272
|
options: plainOptions,
|
|
244
273
|
value: checkedList,
|
|
245
274
|
onChange: handleChange
|
|
@@ -356,53 +385,158 @@ var MultipleSelectElement = (props) => {
|
|
|
356
385
|
// src/Components/Button.tsx
|
|
357
386
|
var import_react12 = __toESM(require("react"));
|
|
358
387
|
var import_antd10 = require("antd");
|
|
359
|
-
var
|
|
388
|
+
var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
389
|
+
var ButtonElement = (props) => {
|
|
390
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
391
|
+
console.log("Performing action:", props.action);
|
|
392
|
+
} : props.action;
|
|
393
|
+
return /* @__PURE__ */ import_react12.default.createElement(
|
|
394
|
+
import_antd10.Button,
|
|
395
|
+
{
|
|
396
|
+
onClick: handleClick,
|
|
397
|
+
className: `${defaultClassName} ${props.className ? props.className : ""}`
|
|
398
|
+
},
|
|
399
|
+
props.label
|
|
400
|
+
);
|
|
401
|
+
};
|
|
360
402
|
|
|
361
403
|
// src/Components/AddMoreTable.tsx
|
|
362
404
|
var import_react13 = __toESM(require("react"));
|
|
363
405
|
var import_antd11 = require("antd");
|
|
406
|
+
var import_icons2 = require("@ant-design/icons");
|
|
364
407
|
var AddMoreTable = (props) => {
|
|
365
408
|
const { thead, tbody } = props;
|
|
366
|
-
const [
|
|
367
|
-
const
|
|
368
|
-
|
|
369
|
-
|
|
409
|
+
const [rows, setRows] = (0, import_react13.useState)(tbody || []);
|
|
410
|
+
const onHandleRows = () => {
|
|
411
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
412
|
+
let newRow = {
|
|
413
|
+
id: newId,
|
|
414
|
+
label: "Medicine",
|
|
415
|
+
name: "Medicine",
|
|
416
|
+
type: "text",
|
|
417
|
+
element: "single-select",
|
|
418
|
+
variable_data: [
|
|
419
|
+
{
|
|
420
|
+
id: 1,
|
|
421
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
422
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
423
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
424
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
425
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
426
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
427
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
428
|
+
}
|
|
429
|
+
]
|
|
430
|
+
};
|
|
431
|
+
setRows((prevData) => [...prevData, newRow]);
|
|
370
432
|
};
|
|
371
|
-
const
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
433
|
+
const onHandleDelete = (id) => {
|
|
434
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
435
|
+
};
|
|
436
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
437
|
+
setRows((prevRows) => {
|
|
438
|
+
return prevRows.map((row, index) => {
|
|
439
|
+
if (index === rowIndex) {
|
|
440
|
+
const newSubRow = {
|
|
441
|
+
id: row.variable_data.length + 1,
|
|
442
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
443
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
444
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
445
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
446
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
447
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
448
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
449
|
+
};
|
|
450
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
451
|
+
return {
|
|
452
|
+
...row,
|
|
453
|
+
variable_data: updatedVariableData
|
|
454
|
+
};
|
|
455
|
+
}
|
|
456
|
+
return row;
|
|
457
|
+
});
|
|
458
|
+
});
|
|
459
|
+
};
|
|
460
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
461
|
+
setRows((prevRows) => {
|
|
462
|
+
return prevRows.map((row, index) => {
|
|
463
|
+
if (index === rowIndex) {
|
|
464
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
465
|
+
return {
|
|
466
|
+
...row,
|
|
467
|
+
variable_data: updatedVariableData
|
|
468
|
+
};
|
|
469
|
+
}
|
|
470
|
+
return row;
|
|
471
|
+
});
|
|
472
|
+
});
|
|
473
|
+
};
|
|
474
|
+
(0, import_react13.useEffect)(() => {
|
|
475
|
+
console.log(rows);
|
|
476
|
+
}, [rows]);
|
|
477
|
+
const renderInputElement = (element, value) => {
|
|
478
|
+
if (!element)
|
|
479
|
+
return null;
|
|
377
480
|
const { element: type, label } = element;
|
|
378
481
|
if (type === "single-select") {
|
|
379
|
-
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (
|
|
482
|
+
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
380
483
|
} else if (type === "textarea") {
|
|
381
|
-
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (
|
|
484
|
+
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
382
485
|
} else {
|
|
383
486
|
return null;
|
|
384
487
|
}
|
|
385
488
|
};
|
|
386
|
-
const dataSource =
|
|
387
|
-
const
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
...variableData
|
|
489
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
490
|
+
const rowData = {
|
|
491
|
+
key: eachRow.id,
|
|
492
|
+
"#": rowIndex + 1,
|
|
493
|
+
"Medicine": renderInputElement({
|
|
494
|
+
element: eachRow.element,
|
|
495
|
+
label: eachRow.label
|
|
496
|
+
})
|
|
395
497
|
};
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
498
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
499
|
+
Object.keys(variable).forEach((key) => {
|
|
500
|
+
if (key === "SubRows") {
|
|
501
|
+
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)));
|
|
502
|
+
} else {
|
|
503
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
504
|
+
}
|
|
505
|
+
});
|
|
506
|
+
});
|
|
507
|
+
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)));
|
|
508
|
+
console.log("=====rowdata", rowData);
|
|
509
|
+
return rowData;
|
|
510
|
+
});
|
|
511
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
512
|
+
title: eachHeadEl.label,
|
|
513
|
+
dataIndex: eachHeadEl.name,
|
|
514
|
+
key: eachHeadEl.id
|
|
515
|
+
})) : [];
|
|
516
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
517
|
+
columns.push({
|
|
518
|
+
title: "Actions",
|
|
519
|
+
dataIndex: "actions",
|
|
520
|
+
key: "actions"
|
|
521
|
+
});
|
|
522
|
+
}
|
|
523
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
399
524
|
import_antd11.Table,
|
|
400
525
|
{
|
|
401
526
|
columns,
|
|
402
|
-
|
|
403
|
-
|
|
527
|
+
dataSource,
|
|
528
|
+
pagination: false,
|
|
529
|
+
bordered: true
|
|
404
530
|
}
|
|
405
|
-
)
|
|
531
|
+
);
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
// src/Components/Sidebar.tsx
|
|
535
|
+
var import_react14 = __toESM(require("react"));
|
|
536
|
+
var Sidebar = (props) => {
|
|
537
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ import_react14.default.createElement("p", null, props.name)), /* @__PURE__ */ import_react14.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
|
|
538
|
+
return /* @__PURE__ */ import_react14.default.createElement("li", { key: item.label, className: props.listItemClassName }, /* @__PURE__ */ import_react14.default.createElement("span", null, item.icon), /* @__PURE__ */ import_react14.default.createElement("span", null, item.label));
|
|
539
|
+
})));
|
|
406
540
|
};
|
|
407
541
|
// Annotate the CommonJS export names for ESM import in node:
|
|
408
542
|
0 && (module.exports = {
|
|
@@ -415,6 +549,7 @@ var AddMoreTable = (props) => {
|
|
|
415
549
|
PasswordElement,
|
|
416
550
|
RadioElement,
|
|
417
551
|
SelectElement,
|
|
552
|
+
Sidebar,
|
|
418
553
|
SingleSelectElement,
|
|
419
554
|
TextElement,
|
|
420
555
|
TextareaElement
|
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("p", null, props.label), /* @__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,54 +336,159 @@ 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";
|
|
358
|
+
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
317
359
|
var AddMoreTable = (props) => {
|
|
318
360
|
const { thead, tbody } = props;
|
|
319
|
-
const [
|
|
320
|
-
const
|
|
321
|
-
|
|
322
|
-
|
|
361
|
+
const [rows, setRows] = useState4(tbody || []);
|
|
362
|
+
const onHandleRows = () => {
|
|
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
|
+
]
|
|
382
|
+
};
|
|
383
|
+
setRows((prevData) => [...prevData, newRow]);
|
|
323
384
|
};
|
|
324
|
-
const
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
385
|
+
const onHandleDelete = (id) => {
|
|
386
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
387
|
+
};
|
|
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;
|
|
330
432
|
const { element: type, label } = element;
|
|
331
433
|
if (type === "single-select") {
|
|
332
|
-
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 });
|
|
333
435
|
} else if (type === "textarea") {
|
|
334
|
-
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 });
|
|
335
437
|
} else {
|
|
336
438
|
return null;
|
|
337
439
|
}
|
|
338
440
|
};
|
|
339
|
-
const dataSource =
|
|
340
|
-
const
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
...variableData
|
|
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
|
+
})
|
|
348
449
|
};
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
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;
|
|
462
|
+
});
|
|
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")) {
|
|
469
|
+
columns.push({
|
|
470
|
+
title: "Actions",
|
|
471
|
+
dataIndex: "actions",
|
|
472
|
+
key: "actions"
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
return /* @__PURE__ */ React12.createElement(
|
|
352
476
|
Table,
|
|
353
477
|
{
|
|
354
478
|
columns,
|
|
355
|
-
|
|
356
|
-
|
|
479
|
+
dataSource,
|
|
480
|
+
pagination: false,
|
|
481
|
+
bordered: true
|
|
357
482
|
}
|
|
358
|
-
)
|
|
483
|
+
);
|
|
484
|
+
};
|
|
485
|
+
|
|
486
|
+
// src/Components/Sidebar.tsx
|
|
487
|
+
import React13 from "react";
|
|
488
|
+
var Sidebar = (props) => {
|
|
489
|
+
return /* @__PURE__ */ React13.createElement("div", { className: props.className }, /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ React13.createElement("p", null, props.name)), /* @__PURE__ */ React13.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
|
|
490
|
+
return /* @__PURE__ */ React13.createElement("li", { key: item.label, className: props.listItemClassName }, /* @__PURE__ */ React13.createElement("span", null, item.icon), /* @__PURE__ */ React13.createElement("span", null, item.label));
|
|
491
|
+
})));
|
|
359
492
|
};
|
|
360
493
|
export {
|
|
361
494
|
AddMoreTable,
|
|
@@ -367,6 +500,7 @@ export {
|
|
|
367
500
|
PasswordElement,
|
|
368
501
|
RadioElement,
|
|
369
502
|
SelectElement,
|
|
503
|
+
Sidebar,
|
|
370
504
|
SingleSelectElement,
|
|
371
505
|
TextElement,
|
|
372
506
|
TextareaElement
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apexcura/ui-components",
|
|
3
|
-
"version": "0.0.11-
|
|
3
|
+
"version": "0.0.11-Beta110",
|
|
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"
|