config-driven-form 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +70 -7
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +70 -7
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +13 -4
package/dist/index.mjs CHANGED
@@ -32,6 +32,14 @@ var TextField = ({ name, schema, uiSchema, isRequired }) => {
32
32
  schema.title || name,
33
33
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
34
34
  ] }),
35
+ schema.description && /* @__PURE__ */ jsx(
36
+ "p",
37
+ {
38
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
39
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
40
+ children: schema.description
41
+ }
42
+ ),
35
43
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsx(
36
44
  "input",
37
45
  {
@@ -74,6 +82,14 @@ var PasswordField = ({
74
82
  schema.title || name,
75
83
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
76
84
  ] }),
85
+ schema.description && /* @__PURE__ */ jsx(
86
+ "p",
87
+ {
88
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
89
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
90
+ children: schema.description
91
+ }
92
+ ),
77
93
  /* @__PURE__ */ jsxs("div", { className: "cdf-input-wrapper", children: [
78
94
  /* @__PURE__ */ jsx(
79
95
  "input",
@@ -123,6 +139,14 @@ var NumberField = ({ name, schema, uiSchema, isRequired }) => {
123
139
  schema.title || name,
124
140
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
125
141
  ] }),
142
+ schema.description && /* @__PURE__ */ jsx(
143
+ "p",
144
+ {
145
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
146
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
147
+ children: schema.description
148
+ }
149
+ ),
126
150
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsx(
127
151
  "input",
128
152
  {
@@ -180,6 +204,14 @@ var RichTextField = ({
180
204
  schema.title || name,
181
205
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
182
206
  ] }),
207
+ schema.description && /* @__PURE__ */ jsx(
208
+ "p",
209
+ {
210
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
211
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
212
+ children: schema.description
213
+ }
214
+ ),
183
215
  /* @__PURE__ */ jsxs(
184
216
  "div",
185
217
  {
@@ -261,6 +293,14 @@ var SelectField = ({ name, schema, uiSchema, isRequired }) => {
261
293
  schema.title || name,
262
294
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
263
295
  ] }),
296
+ schema.description && /* @__PURE__ */ jsx(
297
+ "p",
298
+ {
299
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
300
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
301
+ children: schema.description
302
+ }
303
+ ),
264
304
  /* @__PURE__ */ jsx("div", { className: "cdf-input-wrapper", children: /* @__PURE__ */ jsxs(
265
305
  "select",
266
306
  {
@@ -316,6 +356,14 @@ var RadioField = ({ name, schema, uiSchema, isRequired }) => {
316
356
  schema.title || name,
317
357
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
318
358
  ] }),
359
+ schema.description && /* @__PURE__ */ jsx(
360
+ "p",
361
+ {
362
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
363
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
364
+ children: schema.description
365
+ }
366
+ ),
319
367
  /* @__PURE__ */ jsx("div", { className: cx("cdf-radio-group", globalClasses.radioGroup, localClasses.radioGroup), children: (_a = schema.enum) == null ? void 0 : _a.map((option) => /* @__PURE__ */ jsxs(
320
368
  "label",
321
369
  {
@@ -450,6 +498,14 @@ var CheckboxGroupField = ({
450
498
  schema.title || name,
451
499
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
452
500
  ] }),
501
+ schema.description && /* @__PURE__ */ jsx(
502
+ "p",
503
+ {
504
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
505
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
506
+ children: schema.description
507
+ }
508
+ ),
453
509
  /* @__PURE__ */ jsx(
454
510
  "div",
455
511
  {
@@ -538,6 +594,14 @@ var FileField = ({ name, schema, uiSchema, isRequired }) => {
538
594
  schema.title || name,
539
595
  isRequired && /* @__PURE__ */ jsx("span", { className: "cdf-required-mark", children: "*" })
540
596
  ] }),
597
+ schema.description && /* @__PURE__ */ jsx(
598
+ "p",
599
+ {
600
+ className: cx("cdf-description", globalClasses.description, localClasses.description),
601
+ style: { fontSize: "0.875rem", color: "#6b7280", margin: "-0.25rem 0 0.5rem 0" },
602
+ children: schema.description
603
+ }
604
+ ),
541
605
  /* @__PURE__ */ jsxs(
542
606
  "div",
543
607
  {
@@ -1117,10 +1181,7 @@ var Canvas = ({
1117
1181
  flex: 1,
1118
1182
  padding: "2rem",
1119
1183
  backgroundColor: "#f3f4f6",
1120
- overflowY: "auto",
1121
- display: "flex",
1122
- flexDirection: "column",
1123
- alignItems: "center"
1184
+ overflowY: "auto"
1124
1185
  },
1125
1186
  onClick: () => onSelectField(""),
1126
1187
  children: /* @__PURE__ */ jsx(
@@ -1128,6 +1189,8 @@ var Canvas = ({
1128
1189
  {
1129
1190
  ref: setNodeRef,
1130
1191
  style: {
1192
+ margin: "0 auto",
1193
+ height: "fit-content",
1131
1194
  width: "100%",
1132
1195
  maxWidth: "800px",
1133
1196
  minHeight: "400px",
@@ -2007,14 +2070,14 @@ var FormBuilder = ({
2007
2070
  style: {
2008
2071
  flex: 1,
2009
2072
  padding: "3rem",
2010
- overflowY: "auto",
2011
- display: "flex",
2012
- justifyContent: "center"
2073
+ overflowY: "auto"
2013
2074
  },
2014
2075
  children: /* @__PURE__ */ jsxs(
2015
2076
  "div",
2016
2077
  {
2017
2078
  style: {
2079
+ margin: "0 auto",
2080
+ height: "fit-content",
2018
2081
  width: "100%",
2019
2082
  maxWidth: "800px",
2020
2083
  backgroundColor: "white",