@gravity-ui/dynamic-forms 5.7.0 → 5.8.0

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 (10) hide show
  1. package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +10 -0
  2. package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js +6 -6
  3. package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.css +7 -0
  4. package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.js +6 -6
  5. package/build/esm/lib/core/types/specs.d.ts +1 -0
  6. package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +10 -0
  7. package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js +6 -6
  8. package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.css +7 -0
  9. package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.js +6 -6
  10. package/package.json +1 -1
package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css CHANGED
@@ -23,6 +23,10 @@
23
23
  .df-table-array__table .g-table__cell {
24
24
  border-bottom: 0px transparent;
25
25
  }
26
+ .df-table-array__column-title {
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ }
26
30
  .df-table-array__row .g-table__cell {
27
31
  border-bottom: 0px transparent;
28
32
  border-top: 1px solid var(--g-color-line-generic);
@@ -62,6 +66,12 @@
62
66
  max-width: 50px;
63
67
  min-width: 50px;
64
68
  }
69
+ .df-table-array__cell-without-limit_arr, .df-table-array__cell-without-limit_obj {
70
+ padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
71
+ }
72
+ .df-table-array__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array__cell-without-limit_obj > .simple-vertical-accordeon {
73
+ margin-bottom: var(--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, var(--g-spacing-0));
74
+ }
65
75
  .df-table-array__idx {
66
76
  padding-top: var(--df-table-array-idx-padding-top, 6px);
67
77
  }
package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js CHANGED
@@ -47,12 +47,12 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
47
47
  template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
48
48
  react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))),
49
49
  };
50
- const columns = table.map(({ property, label, description }) => ({
50
+ const columns = table.map(({ property, label, description, width }) => ({
51
51
  id: property,
52
52
  name: !description
53
- ? label
54
- : () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
55
- label,
53
+ ? () => (react_1.default.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label))
54
+ : () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
55
+ react_1.default.createElement("div", { className: b('column-title') }, label),
56
56
  react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
57
57
  placement: common_1.COMMON_POPOVER_PLACEMENT,
58
58
  } },
@@ -64,11 +64,11 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
64
64
  return null;
65
65
  }
66
66
  const preparedEntitySpec = Object.assign(Object.assign({}, entitySpec), { viewSpec: Object.assign(Object.assign({}, entitySpec.viewSpec), { layoutTitle: table.map(({ label }) => label).join(` ${idx + 1} `) + ` ${idx + 1}` }) });
67
- return (react_1.default.createElement("div", { className: b('cell', {
67
+ return (react_1.default.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
68
68
  bool: (0, core_1.isBooleanSpec)(preparedEntitySpec),
69
69
  arr: (0, core_1.isArraySpec)(preparedEntitySpec),
70
70
  obj: (0, core_1.isObjectSpec)(preparedEntitySpec),
71
- }), key: `${name}.<${key}>.${property}` },
71
+ }), style: { minWidth: width, maxWidth: width }, key: `${name}.<${key}>.${property}` },
72
72
  react_1.default.createElement(core_1.Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: noop_1.default })));
73
73
  },
74
74
  }));
package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.css CHANGED
@@ -20,6 +20,10 @@
20
20
  .df-table-array-view__table {
21
21
  margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
22
22
  }
23
+ .df-table-array-view__column-title {
24
+ overflow: hidden;
25
+ text-overflow: ellipsis;
26
+ }
23
27
  .df-table-array-view__cell {
24
28
  max-width: var(--df-table-array-view-cell-min-width, 150px);
25
29
  min-width: var(--df-table-array-view-cell-max-width, 150px);
@@ -33,4 +37,7 @@
33
37
  .df-table-array-view__cell_bool {
34
38
  max-width: 50px;
35
39
  min-width: 50px;
40
+ }
41
+ .df-table-array-view__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array-view__cell-without-limit_obj > .simple-vertical-accordeon {
42
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
36
43
  }
package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.js CHANGED
@@ -22,27 +22,27 @@ const TableArrayView = ({ value = [], spec, name }) => {
22
22
  sticky: 'left',
23
23
  template: (__, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
24
24
  };
25
- const columns = table.map(({ property, label, description }) => ({
25
+ const columns = table.map(({ property, label, description, width }) => ({
26
26
  id: property,
27
27
  name: description && showLayoutDescription
28
- ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
29
- label,
28
+ ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
29
+ react_1.default.createElement("div", { className: b('column-title') }, label),
30
30
  react_1.default.createElement(uikit_1.HelpMark, { popoverProps: {
31
31
  placement: common_1.COMMON_POPOVER_PLACEMENT,
32
32
  } },
33
33
  react_1.default.createElement(HTMLContent_1.HTMLContent, { html: description }))))
34
- : label,
34
+ : () => (react_1.default.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label)),
35
35
  template: (_, idx) => {
36
36
  var _a;
37
37
  const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
38
38
  if (!entitySpec) {
39
39
  return null;
40
40
  }
41
- return (react_1.default.createElement("div", { className: b('cell', {
41
+ return (react_1.default.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
42
42
  bool: (0, core_1.isBooleanSpec)(entitySpec),
43
43
  arr: (0, core_1.isArraySpec)(entitySpec),
44
44
  obj: (0, core_1.isObjectSpec)(entitySpec),
45
- }), key: `${name}[${idx}].${property}` },
45
+ }), style: { minWidth: width, maxWidth: width }, key: `${name}[${idx}].${property}` },
46
46
  react_1.default.createElement(core_1.ViewController, { spec: entitySpec, name: `${name}[${idx}].${property}` })));
47
47
  },
48
48
  }));
package/build/esm/lib/core/types/specs.d.ts CHANGED
@@ -25,6 +25,7 @@ export interface ArraySpec<LinkType = any, InputComponentProps extends Record<st
25
25
  label: string;
26
26
  property: string;
27
27
  description?: string;
28
+ width?: number;
28
29
  }[];
29
30
  link?: LinkType;
30
31
  placeholder?: string;
package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css CHANGED
@@ -23,6 +23,10 @@
23
23
  .df-table-array__table .g-table__cell {
24
24
  border-bottom: 0px transparent;
25
25
  }
26
+ .df-table-array__column-title {
27
+ overflow: hidden;
28
+ text-overflow: ellipsis;
29
+ }
26
30
  .df-table-array__row .g-table__cell {
27
31
  border-bottom: 0px transparent;
28
32
  border-top: 1px solid var(--g-color-line-generic);
@@ -62,6 +66,12 @@
62
66
  max-width: 50px;
63
67
  min-width: 50px;
64
68
  }
69
+ .df-table-array__cell-without-limit_arr, .df-table-array__cell-without-limit_obj {
70
+ padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
71
+ }
72
+ .df-table-array__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array__cell-without-limit_obj > .simple-vertical-accordeon {
73
+ margin-bottom: var(--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, var(--g-spacing-0));
74
+ }
65
75
  .df-table-array__idx {
66
76
  padding-top: var(--df-table-array-idx-padding-top, 6px);
67
77
  }
package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.js CHANGED
@@ -44,12 +44,12 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
44
44
  template: ({ key }) => (React.createElement(Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
45
45
  React.createElement(Icon, { data: TrashBin, size: 16 }))),
46
46
  };
47
- const columns = table.map(({ property, label, description }) => ({
47
+ const columns = table.map(({ property, label, description, width }) => ({
48
48
  id: property,
49
49
  name: !description
50
- ? label
51
- : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
52
- label,
50
+ ? () => (React.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label))
51
+ : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
52
+ React.createElement("div", { className: b('column-title') }, label),
53
53
  React.createElement(HelpMark, { popoverProps: {
54
54
  placement: COMMON_POPOVER_PLACEMENT,
55
55
  } },
@@ -61,11 +61,11 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
61
61
  return null;
62
62
  }
63
63
  const preparedEntitySpec = Object.assign(Object.assign({}, entitySpec), { viewSpec: Object.assign(Object.assign({}, entitySpec.viewSpec), { layoutTitle: table.map(({ label }) => label).join(` ${idx + 1} `) + ` ${idx + 1}` }) });
64
- return (React.createElement("div", { className: b('cell', {
64
+ return (React.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
65
65
  bool: isBooleanSpec(preparedEntitySpec),
66
66
  arr: isArraySpec(preparedEntitySpec),
67
67
  obj: isObjectSpec(preparedEntitySpec),
68
- }), key: `${name}.<${key}>.${property}` },
68
+ }), style: { minWidth: width, maxWidth: width }, key: `${name}.<${key}>.${property}` },
69
69
  React.createElement(Controller, { value: (_c = (_b = input.value) === null || _b === void 0 ? void 0 : _b[`<${key}>`]) === null || _c === void 0 ? void 0 : _c[property], spec: preparedEntitySpec, name: `${name}.<${key}>.${property}`, parentOnChange: parentOnChange, parentOnUnmount: noop })));
70
70
  },
71
71
  }));
package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.css CHANGED
@@ -20,6 +20,10 @@
20
20
  .df-table-array-view__table {
21
21
  margin-bottom: var(--df-table-array-view-table-margin-bottom, var(--g-spacing-3));
22
22
  }
23
+ .df-table-array-view__column-title {
24
+ overflow: hidden;
25
+ text-overflow: ellipsis;
26
+ }
23
27
  .df-table-array-view__cell {
24
28
  max-width: var(--df-table-array-view-cell-min-width, 150px);
25
29
  min-width: var(--df-table-array-view-cell-max-width, 150px);
@@ -33,4 +37,7 @@
33
37
  .df-table-array-view__cell_bool {
34
38
  max-width: 50px;
35
39
  min-width: 50px;
40
+ }
41
+ .df-table-array-view__cell-without-limit_arr > .simple-vertical-accordeon, .df-table-array-view__cell-without-limit_obj > .simple-vertical-accordeon {
42
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
36
43
  }
package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.js CHANGED
@@ -19,27 +19,27 @@ export const TableArrayView = ({ value = [], spec, name }) => {
19
19
  sticky: 'left',
20
20
  template: (__, idx) => (React.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
21
21
  };
22
- const columns = table.map(({ property, label, description }) => ({
22
+ const columns = table.map(({ property, label, description, width }) => ({
23
23
  id: property,
24
24
  name: description && showLayoutDescription
25
- ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
26
- label,
25
+ ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center", style: { minWidth: width, maxWidth: width } },
26
+ React.createElement("div", { className: b('column-title') }, label),
27
27
  React.createElement(HelpMark, { popoverProps: {
28
28
  placement: COMMON_POPOVER_PLACEMENT,
29
29
  } },
30
30
  React.createElement(HTMLContent, { html: description }))))
31
- : label,
31
+ : () => (React.createElement("div", { className: b('column-title'), style: { minWidth: width, maxWidth: width } }, label)),
32
32
  template: (_, idx) => {
33
33
  var _a;
34
34
  const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
35
35
  if (!entitySpec) {
36
36
  return null;
37
37
  }
38
- return (React.createElement("div", { className: b('cell', {
38
+ return (React.createElement("div", { className: b(width ? 'cell-without-limit' : 'cell', {
39
39
  bool: isBooleanSpec(entitySpec),
40
40
  arr: isArraySpec(entitySpec),
41
41
  obj: isObjectSpec(entitySpec),
42
- }), key: `${name}[${idx}].${property}` },
42
+ }), style: { minWidth: width, maxWidth: width }, key: `${name}[${idx}].${property}` },
43
43
  React.createElement(ViewController, { spec: entitySpec, name: `${name}[${idx}].${property}` })));
44
44
  },
45
45
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "5.7.0",
3
+ "version": "5.8.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",