@apexcura/ui-components 0.0.11-Beta11 → 0.0.11-Beta111
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 +21 -4
- package/dist/index.d.ts +21 -4
- package/dist/index.js +185 -42
- package/dist/index.mjs +189 -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,12 @@ 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
|
+
declare const Navbar: (props: ElementType) => React$1.JSX.Element;
|
|
90
|
+
|
|
91
|
+
export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, Navbar, 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,12 @@ 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
|
+
declare const Navbar: (props: ElementType) => React$1.JSX.Element;
|
|
90
|
+
|
|
91
|
+
export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TextElement, TextareaElement };
|
package/dist/index.js
CHANGED
|
@@ -35,10 +35,12 @@ __export(src_exports, {
|
|
|
35
35
|
CheckboxElement: () => CheckboxElement,
|
|
36
36
|
CkEditor: () => CkEditor,
|
|
37
37
|
MultipleSelectElement: () => MultipleSelectElement,
|
|
38
|
+
Navbar: () => Navbar,
|
|
38
39
|
NumberElement: () => NumberElement,
|
|
39
40
|
PasswordElement: () => PasswordElement,
|
|
40
41
|
RadioElement: () => RadioElement,
|
|
41
42
|
SelectElement: () => SelectElement,
|
|
43
|
+
Sidebar: () => Sidebar,
|
|
42
44
|
SingleSelectElement: () => SingleSelectElement,
|
|
43
45
|
TextElement: () => TextElement,
|
|
44
46
|
TextareaElement: () => TextareaElement
|
|
@@ -62,7 +64,7 @@ var TextElement = (props) => {
|
|
|
62
64
|
type: props.type,
|
|
63
65
|
status: props.status,
|
|
64
66
|
style: props.styles,
|
|
65
|
-
className: props.
|
|
67
|
+
className: props.className,
|
|
66
68
|
variant: props.variant,
|
|
67
69
|
name: props.name,
|
|
68
70
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -103,7 +105,7 @@ var NumberElement = (props) => {
|
|
|
103
105
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
104
106
|
props.onChange(newValue);
|
|
105
107
|
};
|
|
106
|
-
return /* @__PURE__ */ import_react3.default.createElement(
|
|
108
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
107
109
|
import_antd3.Input,
|
|
108
110
|
{
|
|
109
111
|
placeholder: props.placeholder,
|
|
@@ -115,13 +117,12 @@ var NumberElement = (props) => {
|
|
|
115
117
|
prefix: props.prefix,
|
|
116
118
|
type: props.type,
|
|
117
119
|
status: props.status,
|
|
118
|
-
|
|
119
|
-
className: props.classNames,
|
|
120
|
+
className: props.className,
|
|
120
121
|
variant: props.variant,
|
|
121
122
|
name: props.name,
|
|
122
123
|
onChange: handleInputChange
|
|
123
124
|
}
|
|
124
|
-
)
|
|
125
|
+
);
|
|
125
126
|
};
|
|
126
127
|
|
|
127
128
|
// src/Components/TextareaElement.tsx
|
|
@@ -129,7 +130,7 @@ var import_react4 = __toESM(require("react"));
|
|
|
129
130
|
var import_antd4 = require("antd");
|
|
130
131
|
var { TextArea } = import_antd4.Input;
|
|
131
132
|
var TextareaElement = (props) => {
|
|
132
|
-
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex,
|
|
133
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
133
134
|
TextArea,
|
|
134
135
|
{
|
|
135
136
|
placeholder: props.placeholder,
|
|
@@ -138,8 +139,7 @@ var TextareaElement = (props) => {
|
|
|
138
139
|
disabled: props.disabled,
|
|
139
140
|
id: props.name,
|
|
140
141
|
status: props.status,
|
|
141
|
-
|
|
142
|
-
className: props.classNames,
|
|
142
|
+
className: props.className,
|
|
143
143
|
variant: props.variant,
|
|
144
144
|
name: props.name,
|
|
145
145
|
showCount: true,
|
|
@@ -177,7 +177,7 @@ var SelectElement = (props) => {
|
|
|
177
177
|
id: props.name,
|
|
178
178
|
status: props.status,
|
|
179
179
|
style: props.styles,
|
|
180
|
-
className: props.
|
|
180
|
+
className: props.className,
|
|
181
181
|
variant: props.variant,
|
|
182
182
|
onChange: handleChange
|
|
183
183
|
}
|
|
@@ -187,15 +187,45 @@ var SelectElement = (props) => {
|
|
|
187
187
|
// src/Components/RadioElement.tsx
|
|
188
188
|
var import_react6 = __toESM(require("react"));
|
|
189
189
|
var import_antd6 = require("antd");
|
|
190
|
+
var containerClassName = " ";
|
|
191
|
+
var className = "bg-[#F2F2F2] border border-[#919191] !rounded-[8px] !m-[10px] hover:bg-[#F2F2F2] !text-center !text-black !shadow-[0px_0px_1px_1px_#919191]";
|
|
192
|
+
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
193
|
var RadioElement = (props) => {
|
|
194
|
+
const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
|
|
195
|
+
const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
|
|
196
|
+
const optionType = props.optionType === "button" ? "button" : void 0;
|
|
191
197
|
const handleChange = (e) => {
|
|
198
|
+
const selectedVal = e.target.value;
|
|
199
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
200
|
+
setSelectedValue(selectedVal);
|
|
201
|
+
setIsDisabled(true);
|
|
192
202
|
if (props.onChange) {
|
|
193
|
-
const selectedVal = e.target.value;
|
|
194
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
195
203
|
props.onChange(selectedOptions);
|
|
196
204
|
}
|
|
197
205
|
};
|
|
198
|
-
|
|
206
|
+
const getButtonStyle = (option) => {
|
|
207
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
208
|
+
};
|
|
209
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { className: containerClassName }, /* @__PURE__ */ import_react6.default.createElement("p", null, props.label), /* @__PURE__ */ import_react6.default.createElement(
|
|
210
|
+
import_antd6.Radio.Group,
|
|
211
|
+
{
|
|
212
|
+
onChange: handleChange,
|
|
213
|
+
optionType,
|
|
214
|
+
className: props.className,
|
|
215
|
+
value: selectedValue
|
|
216
|
+
},
|
|
217
|
+
props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
|
|
218
|
+
import_antd6.Radio,
|
|
219
|
+
{
|
|
220
|
+
key: option.value,
|
|
221
|
+
value: option.value,
|
|
222
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
223
|
+
className: getButtonStyle(option),
|
|
224
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
225
|
+
},
|
|
226
|
+
option.label
|
|
227
|
+
))
|
|
228
|
+
));
|
|
199
229
|
};
|
|
200
230
|
|
|
201
231
|
// src/Components/Checkbox.tsx
|
|
@@ -229,7 +259,7 @@ var CheckboxElement = (props) => {
|
|
|
229
259
|
disabled: props.disabled,
|
|
230
260
|
id: props.name,
|
|
231
261
|
style: props.styles,
|
|
232
|
-
className: props.
|
|
262
|
+
className: props.className,
|
|
233
263
|
onChange: onHandleAllChanges,
|
|
234
264
|
checked: checkAll
|
|
235
265
|
},
|
|
@@ -239,7 +269,7 @@ var CheckboxElement = (props) => {
|
|
|
239
269
|
{
|
|
240
270
|
disabled: props.disabled,
|
|
241
271
|
style: props.styles,
|
|
242
|
-
className: props.
|
|
272
|
+
className: props.className,
|
|
243
273
|
options: plainOptions,
|
|
244
274
|
value: checkedList,
|
|
245
275
|
onChange: handleChange
|
|
@@ -356,53 +386,164 @@ var MultipleSelectElement = (props) => {
|
|
|
356
386
|
// src/Components/Button.tsx
|
|
357
387
|
var import_react12 = __toESM(require("react"));
|
|
358
388
|
var import_antd10 = require("antd");
|
|
359
|
-
var
|
|
389
|
+
var defaultClassName = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
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(
|
|
395
|
+
import_antd10.Button,
|
|
396
|
+
{
|
|
397
|
+
onClick: handleClick,
|
|
398
|
+
className: `${defaultClassName} ${props.className ? props.className : ""}`
|
|
399
|
+
},
|
|
400
|
+
props.label
|
|
401
|
+
);
|
|
402
|
+
};
|
|
360
403
|
|
|
361
404
|
// src/Components/AddMoreTable.tsx
|
|
362
405
|
var import_react13 = __toESM(require("react"));
|
|
363
406
|
var import_antd11 = require("antd");
|
|
407
|
+
var import_icons2 = require("@ant-design/icons");
|
|
364
408
|
var AddMoreTable = (props) => {
|
|
365
409
|
const { thead, tbody } = props;
|
|
366
|
-
const [
|
|
367
|
-
const
|
|
368
|
-
|
|
369
|
-
|
|
410
|
+
const [rows, setRows] = (0, import_react13.useState)(tbody || []);
|
|
411
|
+
const onHandleRows = () => {
|
|
412
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
413
|
+
let newRow = {
|
|
414
|
+
id: newId,
|
|
415
|
+
label: "Medicine",
|
|
416
|
+
name: "Medicine",
|
|
417
|
+
type: "text",
|
|
418
|
+
element: "single-select",
|
|
419
|
+
variable_data: [
|
|
420
|
+
{
|
|
421
|
+
id: 1,
|
|
422
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
423
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
424
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
425
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
426
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
427
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
428
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
429
|
+
}
|
|
430
|
+
]
|
|
431
|
+
};
|
|
432
|
+
setRows((prevData) => [...prevData, newRow]);
|
|
370
433
|
};
|
|
371
|
-
const
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
434
|
+
const onHandleDelete = (id) => {
|
|
435
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
436
|
+
};
|
|
437
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
438
|
+
setRows((prevRows) => {
|
|
439
|
+
return prevRows.map((row, index) => {
|
|
440
|
+
if (index === rowIndex) {
|
|
441
|
+
const newSubRow = {
|
|
442
|
+
id: row.variable_data.length + 1,
|
|
443
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
444
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
445
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
446
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
447
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
448
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
449
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
450
|
+
};
|
|
451
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
452
|
+
return {
|
|
453
|
+
...row,
|
|
454
|
+
variable_data: updatedVariableData
|
|
455
|
+
};
|
|
456
|
+
}
|
|
457
|
+
return row;
|
|
458
|
+
});
|
|
459
|
+
});
|
|
460
|
+
};
|
|
461
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
462
|
+
setRows((prevRows) => {
|
|
463
|
+
return prevRows.map((row, index) => {
|
|
464
|
+
if (index === rowIndex) {
|
|
465
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
466
|
+
return {
|
|
467
|
+
...row,
|
|
468
|
+
variable_data: updatedVariableData
|
|
469
|
+
};
|
|
470
|
+
}
|
|
471
|
+
return row;
|
|
472
|
+
});
|
|
473
|
+
});
|
|
474
|
+
};
|
|
475
|
+
(0, import_react13.useEffect)(() => {
|
|
476
|
+
console.log(rows);
|
|
477
|
+
}, [rows]);
|
|
478
|
+
const renderInputElement = (element, value) => {
|
|
479
|
+
if (!element)
|
|
480
|
+
return null;
|
|
377
481
|
const { element: type, label } = element;
|
|
378
482
|
if (type === "single-select") {
|
|
379
|
-
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (
|
|
483
|
+
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
380
484
|
} else if (type === "textarea") {
|
|
381
|
-
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (
|
|
485
|
+
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
382
486
|
} else {
|
|
383
487
|
return null;
|
|
384
488
|
}
|
|
385
489
|
};
|
|
386
|
-
const dataSource =
|
|
387
|
-
const
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
...variableData
|
|
490
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
491
|
+
const rowData = {
|
|
492
|
+
key: eachRow.id,
|
|
493
|
+
"#": rowIndex + 1,
|
|
494
|
+
"Medicine": renderInputElement({
|
|
495
|
+
element: eachRow.element,
|
|
496
|
+
label: eachRow.label
|
|
497
|
+
})
|
|
395
498
|
};
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
499
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
500
|
+
Object.keys(variable).forEach((key) => {
|
|
501
|
+
if (key === "SubRows") {
|
|
502
|
+
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)));
|
|
503
|
+
} else {
|
|
504
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
505
|
+
}
|
|
506
|
+
});
|
|
507
|
+
});
|
|
508
|
+
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)));
|
|
509
|
+
console.log("=====rowdata", rowData);
|
|
510
|
+
return rowData;
|
|
511
|
+
});
|
|
512
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
513
|
+
title: eachHeadEl.label,
|
|
514
|
+
dataIndex: eachHeadEl.name,
|
|
515
|
+
key: eachHeadEl.id
|
|
516
|
+
})) : [];
|
|
517
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
518
|
+
columns.push({
|
|
519
|
+
title: "Actions",
|
|
520
|
+
dataIndex: "actions",
|
|
521
|
+
key: "actions"
|
|
522
|
+
});
|
|
523
|
+
}
|
|
524
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
399
525
|
import_antd11.Table,
|
|
400
526
|
{
|
|
401
527
|
columns,
|
|
402
|
-
|
|
403
|
-
|
|
528
|
+
dataSource,
|
|
529
|
+
pagination: false,
|
|
530
|
+
bordered: true
|
|
404
531
|
}
|
|
405
|
-
)
|
|
532
|
+
);
|
|
533
|
+
};
|
|
534
|
+
|
|
535
|
+
// src/Components/Sidebar.tsx
|
|
536
|
+
var import_react14 = __toESM(require("react"));
|
|
537
|
+
var Sidebar = (props) => {
|
|
538
|
+
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("ul", { className: props.listClassName }, props.items?.map((item) => {
|
|
539
|
+
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));
|
|
540
|
+
})));
|
|
541
|
+
};
|
|
542
|
+
|
|
543
|
+
// src/Components/Navbar.tsx
|
|
544
|
+
var import_react15 = __toESM(require("react"));
|
|
545
|
+
var Navbar = (props) => {
|
|
546
|
+
return /* @__PURE__ */ import_react15.default.createElement("div", { className: props.className });
|
|
406
547
|
};
|
|
407
548
|
// Annotate the CommonJS export names for ESM import in node:
|
|
408
549
|
0 && (module.exports = {
|
|
@@ -411,10 +552,12 @@ var AddMoreTable = (props) => {
|
|
|
411
552
|
CheckboxElement,
|
|
412
553
|
CkEditor,
|
|
413
554
|
MultipleSelectElement,
|
|
555
|
+
Navbar,
|
|
414
556
|
NumberElement,
|
|
415
557
|
PasswordElement,
|
|
416
558
|
RadioElement,
|
|
417
559
|
SelectElement,
|
|
560
|
+
Sidebar,
|
|
418
561
|
SingleSelectElement,
|
|
419
562
|
TextElement,
|
|
420
563
|
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,165 @@ 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("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
|
+
})));
|
|
492
|
+
};
|
|
493
|
+
|
|
494
|
+
// src/Components/Navbar.tsx
|
|
495
|
+
import React14 from "react";
|
|
496
|
+
var Navbar = (props) => {
|
|
497
|
+
return /* @__PURE__ */ React14.createElement("div", { className: props.className });
|
|
359
498
|
};
|
|
360
499
|
export {
|
|
361
500
|
AddMoreTable,
|
|
@@ -363,10 +502,12 @@ export {
|
|
|
363
502
|
CheckboxElement,
|
|
364
503
|
CkEditor,
|
|
365
504
|
MultipleSelectElement,
|
|
505
|
+
Navbar,
|
|
366
506
|
NumberElement,
|
|
367
507
|
PasswordElement,
|
|
368
508
|
RadioElement,
|
|
369
509
|
SelectElement,
|
|
510
|
+
Sidebar,
|
|
370
511
|
SingleSelectElement,
|
|
371
512
|
TextElement,
|
|
372
513
|
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-Beta111",
|
|
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"
|