@nolwenture/formik-jsonschema-form 1.0.0-beta.45 → 1.0.0-beta.47

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/cjs/FormView/components/Field.js +10 -1
  2. package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js +15 -3
  3. package/dist/esm/FormView/components/Field.js +10 -1
  4. package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js +15 -3
  5. package/package.json +1 -1
package/dist/cjs/FormView/components/Field.js CHANGED
@@ -13,12 +13,15 @@ exports.FieldWrapper = styled_components_1.default.div `
13
13
  font-family: ${(props) => props.theme.typography.fontFamily.base};
14
14
  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
15
15
  width: min(100%, 70rem);
16
+ -webkit-column-break-inside: avoid;
17
+ page-break-inside: avoid;
18
+ break-inside: avoid;
16
19
  `;
17
20
  exports.FieldTitle = styled_components_1.default.label `
18
21
  color: ${(props) => props.theme.color.text.default};
19
22
  display: inline-block;
20
23
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
21
- font-size: ${(props) => props.theme.typography.size.small};
24
+ font-size: ${(props) => props.theme.typography.size.base};
22
25
  font-weight: ${(props) => props.theme.typography.weight.bold};
23
26
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
24
27
  width: 100%;
@@ -96,6 +99,9 @@ exports.BooleanFieldWrapper = styled_components_1.default.div `
96
99
  font-family: ${(props) => props.theme.typography.fontFamily.base};
97
100
  font-size: ${(props) => props.theme.typography.size.small};
98
101
  padding-left: ${(props) => props.theme.spacing.l};
102
+ -webkit-column-break-inside: avoid;
103
+ page-break-inside: avoid;
104
+ break-inside: avoid;
99
105
  `;
100
106
  exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
101
107
  font-size: ${(props) => props.theme.typography.size.small};
@@ -103,6 +109,9 @@ exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
103
109
  align-items: start;
104
110
  }
105
111
  padding-left: ${(props) => props.theme.spacing.l};
112
+ -webkit-column-break-inside: avoid;
113
+ page-break-inside: avoid;
114
+ break-inside: avoid;
106
115
  `;
107
116
  const BooleanFieldValue = ({ name, className, value, label, }) => {
108
117
  return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -7,26 +7,38 @@ exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = expo
7
7
  exports.getComponents = getComponents;
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
9
  exports.ObjectFieldTemplateWrapper = styled_components_1.default.div `
10
+
10
11
  &[data-fjsf-level="1"] {
11
12
  margin-bottom: ${(props) => props.theme.spacing.xxl};
12
13
  }
14
+
15
+ &[data-fjsf-level="2"] {
16
+ -webkit-column-break-inside: avoid;
17
+ page-break-inside: avoid;
18
+ break-inside: avoid;
19
+ }
20
+
21
+ &[data-fjsf-level="3"] {
22
+ -webkit-column-break-inside: avoid;
23
+ page-break-inside: avoid;
24
+ break-inside: avoid;
25
+ }
26
+
13
27
  `;
14
28
  exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
15
29
  color: ${(props) => props.theme.color.text.default};
16
30
  font-family: ${(props) => props.theme.typography.fontFamily.base};
17
31
  font-size: ${(props) => props.theme.typography.size.base};
18
32
  font-weight: ${(props) => props.theme.typography.weight.medium};
19
- margin: ${(props) => `${props.theme.spacing.s} 0`};
33
+ margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
20
34
 
21
35
  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
22
36
  font-size: ${(props) => props.theme.typography.size.base};
23
-
24
37
  }
25
38
  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
26
39
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
27
40
  font-size: ${(props) => props.theme.typography.size.h2};
28
41
  font-weight: ${(props) => props.theme.typography.weight.bold};
29
- margin-bottom: ${(props) => props.theme.spacing.l};
30
42
  }
31
43
  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
32
44
  font-size: ${(props) => props.theme.typography.size.h4};
package/dist/esm/FormView/components/Field.js CHANGED
@@ -7,12 +7,15 @@ export const FieldWrapper = styled.div `
7
7
  font-family: ${(props) => props.theme.typography.fontFamily.base};
8
8
  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
9
9
  width: min(100%, 70rem);
10
+ -webkit-column-break-inside: avoid;
11
+ page-break-inside: avoid;
12
+ break-inside: avoid;
10
13
  `;
11
14
  export const FieldTitle = styled.label `
12
15
  color: ${(props) => props.theme.color.text.default};
13
16
  display: inline-block;
14
17
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
15
- font-size: ${(props) => props.theme.typography.size.small};
18
+ font-size: ${(props) => props.theme.typography.size.base};
16
19
  font-weight: ${(props) => props.theme.typography.weight.bold};
17
20
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
18
21
  width: 100%;
@@ -90,6 +93,9 @@ export const BooleanFieldWrapper = styled.div `
90
93
  font-family: ${(props) => props.theme.typography.fontFamily.base};
91
94
  font-size: ${(props) => props.theme.typography.size.small};
92
95
  padding-left: ${(props) => props.theme.spacing.l};
96
+ -webkit-column-break-inside: avoid;
97
+ page-break-inside: avoid;
98
+ break-inside: avoid;
93
99
  `;
94
100
  export const MultipleChoiceFieldWrapper = styled.div `
95
101
  font-size: ${(props) => props.theme.typography.size.small};
@@ -97,6 +103,9 @@ export const MultipleChoiceFieldWrapper = styled.div `
97
103
  align-items: start;
98
104
  }
99
105
  padding-left: ${(props) => props.theme.spacing.l};
106
+ -webkit-column-break-inside: avoid;
107
+ page-break-inside: avoid;
108
+ break-inside: avoid;
100
109
  `;
101
110
  export const BooleanFieldValue = ({ name, className, value, label, }) => {
102
111
  return (_jsx("div", { className: className, children: value === true ? (_jsxs("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { children: label !== undefined ? label : "Not selected" })] })) }));
package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -1,25 +1,37 @@
1
1
  import styled from "styled-components";
2
2
  export const ObjectFieldTemplateWrapper = styled.div `
3
+
3
4
  &[data-fjsf-level="1"] {
4
5
  margin-bottom: ${(props) => props.theme.spacing.xxl};
5
6
  }
7
+
8
+ &[data-fjsf-level="2"] {
9
+ -webkit-column-break-inside: avoid;
10
+ page-break-inside: avoid;
11
+ break-inside: avoid;
12
+ }
13
+
14
+ &[data-fjsf-level="3"] {
15
+ -webkit-column-break-inside: avoid;
16
+ page-break-inside: avoid;
17
+ break-inside: avoid;
18
+ }
19
+
6
20
  `;
7
21
  export const ObjectFieldTemplateTitle = styled.div `
8
22
  color: ${(props) => props.theme.color.text.default};
9
23
  font-family: ${(props) => props.theme.typography.fontFamily.base};
10
24
  font-size: ${(props) => props.theme.typography.size.base};
11
25
  font-weight: ${(props) => props.theme.typography.weight.medium};
12
- margin: ${(props) => `${props.theme.spacing.s} 0`};
26
+ margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
13
27
 
14
28
  ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
15
29
  font-size: ${(props) => props.theme.typography.size.base};
16
-
17
30
  }
18
31
  ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
19
32
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
20
33
  font-size: ${(props) => props.theme.typography.size.h2};
21
34
  font-weight: ${(props) => props.theme.typography.weight.bold};
22
- margin-bottom: ${(props) => props.theme.spacing.l};
23
35
  }
24
36
  ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
25
37
  font-size: ${(props) => props.theme.typography.size.h4};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.0-beta.45",
3
+ "version": "1.0.0-beta.47",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [