@gravity-ui/dynamic-forms 4.15.0 → 4.16.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 (108) hide show
  1. package/build/cjs/lib/core/components/Form/hooks/useSearch/useSearch.css +21 -2
  2. package/build/cjs/lib/kit/components/AccordeonCard/AccordeonCard.css +28 -9
  3. package/build/cjs/lib/kit/components/Card/Card.css +30 -11
  4. package/build/cjs/lib/kit/components/CopyButton/CopyButton.css +19 -0
  5. package/build/cjs/lib/kit/components/ErrorWrapper/ErrorWrapper.css +21 -2
  6. package/build/cjs/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.css +20 -1
  7. package/build/cjs/lib/kit/components/GroupIndent/GroupIndent.css +23 -7
  8. package/build/cjs/lib/kit/components/Inputs/ArrayBase/ArrayBase.css +23 -5
  9. package/build/cjs/lib/kit/components/Inputs/Checkbox/Checkbox.css +20 -1
  10. package/build/cjs/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.css +23 -5
  11. package/build/cjs/lib/kit/components/Inputs/DateInput/DateInput.css +20 -1
  12. package/build/cjs/lib/kit/components/Inputs/FileInput/FileInput.css +21 -2
  13. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +21 -2
  14. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +20 -1
  15. package/build/cjs/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css +21 -2
  16. package/build/cjs/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.css +23 -4
  17. package/build/cjs/lib/kit/components/Inputs/MultiSelect/MultiSelect.css +20 -1
  18. package/build/cjs/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.css +21 -2
  19. package/build/cjs/lib/kit/components/Inputs/ObjectBase/ObjectBase.css +24 -6
  20. package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.css +27 -11
  21. package/build/cjs/lib/kit/components/Inputs/Select/Select.css +20 -1
  22. package/build/cjs/lib/kit/components/Inputs/Switch/Switch.css +20 -1
  23. package/build/cjs/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +25 -6
  24. package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.css +21 -2
  25. package/build/cjs/lib/kit/components/Inputs/TextContent/TextContent.js +10 -1
  26. package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css +19 -0
  27. package/build/cjs/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.css +20 -1
  28. package/build/cjs/lib/kit/components/Layouts/Column/Column.css +25 -6
  29. package/build/cjs/lib/kit/components/Layouts/Row/Row.css +31 -12
  30. package/build/cjs/lib/kit/components/Layouts/Section/Section.css +28 -9
  31. package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css +23 -4
  32. package/build/cjs/lib/kit/components/LongValue/LongValue.css +20 -1
  33. package/build/cjs/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css +28 -9
  34. package/build/cjs/lib/kit/components/TogglerCard/TogglerCard.css +24 -6
  35. package/build/cjs/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.css +43 -5
  36. package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css +50 -12
  37. package/build/cjs/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css +42 -4
  38. package/build/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css +42 -4
  39. package/build/cjs/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css +20 -1
  40. package/build/cjs/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css +24 -6
  41. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +20 -1
  42. package/build/cjs/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css +21 -2
  43. package/build/cjs/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.css +25 -6
  44. package/build/cjs/lib/kit/components/Views/MultiSelectView/MultiSelectView.css +22 -3
  45. package/build/cjs/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.css +21 -2
  46. package/build/cjs/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.css +22 -4
  47. package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.css +23 -4
  48. package/build/cjs/lib/kit/components/Views/TableArrayView/TableArrayView.css +23 -4
  49. package/build/cjs/lib/kit/components/Views/TextAreaView/TextAreaView.css +20 -1
  50. package/build/cjs/lib/kit/hooks/useOneOf/useOneOf.css +24 -5
  51. package/build/cjs/lib/kit/styles/mixins.css +19 -0
  52. package/build/cjs/lib/kit/styles/variables.css +19 -0
  53. package/build/cjs/lib/kit/utils/common.js +6 -2
  54. package/build/esm/lib/core/components/Form/hooks/useSearch/useSearch.css +21 -2
  55. package/build/esm/lib/core/types/specs.d.ts +3 -1
  56. package/build/esm/lib/kit/components/AccordeonCard/AccordeonCard.css +28 -9
  57. package/build/esm/lib/kit/components/Card/Card.css +30 -11
  58. package/build/esm/lib/kit/components/CopyButton/CopyButton.css +19 -0
  59. package/build/esm/lib/kit/components/ErrorWrapper/ErrorWrapper.css +21 -2
  60. package/build/esm/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.css +20 -1
  61. package/build/esm/lib/kit/components/GroupIndent/GroupIndent.css +23 -7
  62. package/build/esm/lib/kit/components/Inputs/ArrayBase/ArrayBase.css +23 -5
  63. package/build/esm/lib/kit/components/Inputs/Checkbox/Checkbox.css +20 -1
  64. package/build/esm/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.css +23 -5
  65. package/build/esm/lib/kit/components/Inputs/DateInput/DateInput.css +20 -1
  66. package/build/esm/lib/kit/components/Inputs/FileInput/FileInput.css +21 -2
  67. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoHeader.css +21 -2
  68. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.css +20 -1
  69. package/build/esm/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.css +21 -2
  70. package/build/esm/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.css +23 -4
  71. package/build/esm/lib/kit/components/Inputs/MultiSelect/MultiSelect.css +20 -1
  72. package/build/esm/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.css +21 -2
  73. package/build/esm/lib/kit/components/Inputs/ObjectBase/ObjectBase.css +24 -6
  74. package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.css +27 -11
  75. package/build/esm/lib/kit/components/Inputs/Select/Select.css +20 -1
  76. package/build/esm/lib/kit/components/Inputs/Switch/Switch.css +20 -1
  77. package/build/esm/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.css +25 -6
  78. package/build/esm/lib/kit/components/Inputs/TextContent/TextContent.css +21 -2
  79. package/build/esm/lib/kit/components/Inputs/TextContent/TextContent.js +11 -2
  80. package/build/esm/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css +19 -0
  81. package/build/esm/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.css +20 -1
  82. package/build/esm/lib/kit/components/Layouts/Column/Column.css +25 -6
  83. package/build/esm/lib/kit/components/Layouts/Row/Row.css +31 -12
  84. package/build/esm/lib/kit/components/Layouts/Section/Section.css +28 -9
  85. package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css +23 -4
  86. package/build/esm/lib/kit/components/LongValue/LongValue.css +20 -1
  87. package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css +28 -9
  88. package/build/esm/lib/kit/components/TogglerCard/TogglerCard.css +24 -6
  89. package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.css +43 -5
  90. package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css +50 -12
  91. package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css +42 -4
  92. package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css +42 -4
  93. package/build/esm/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.css +20 -1
  94. package/build/esm/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.css +24 -6
  95. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoBaseView.css +20 -1
  96. package/build/esm/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.css +21 -2
  97. package/build/esm/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.css +25 -6
  98. package/build/esm/lib/kit/components/Views/MultiSelectView/MultiSelectView.css +22 -3
  99. package/build/esm/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.css +21 -2
  100. package/build/esm/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.css +22 -4
  101. package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.css +23 -4
  102. package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.css +23 -4
  103. package/build/esm/lib/kit/components/Views/TextAreaView/TextAreaView.css +20 -1
  104. package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css +24 -5
  105. package/build/esm/lib/kit/styles/mixins.css +19 -0
  106. package/build/esm/lib/kit/styles/variables.css +19 -0
  107. package/build/esm/lib/kit/utils/common.js +6 -2
  108. package/package.json +1 -1
@@ -1,3 +1,22 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-array-base-view__item-prefix {
2
- margin-bottom: 6px;
21
+ margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, 6px);
3
22
  }
@@ -1,27 +1,45 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-checkbox-group-view {
2
21
  display: flex;
3
22
  }
4
23
  .df-checkbox-group-view > *:not(:last-child) {
5
- margin-right: 6px;
24
+ margin-right: var(--df-checkbox-group-view-child-margin-right, 6px);
6
25
  }
7
26
  .df-checkbox-group-view_vertical {
8
27
  flex-direction: column;
9
28
  align-items: flex-start;
10
29
  }
11
30
  .df-checkbox-group-view_vertical > *:not(:last-child) {
12
- margin-right: 0px;
13
- margin-bottom: 6px;
31
+ margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
14
32
  }
15
33
  .df-checkbox-group-view__tooltip {
16
34
  overflow-wrap: break-word;
17
35
  }
18
36
  .df-checkbox-group-view__tooltip-container {
19
- max-width: 100%;
37
+ max-width: var(--df-tooltip-container-max-width, 100%);
20
38
  overflow: hidden;
21
39
  text-overflow: ellipsis;
22
40
  display: block;
23
- margin-bottom: 6px;
41
+ margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
24
42
  }
25
43
  .df-checkbox-group-view__tooltip-container:last-child {
26
- margin-bottom: 0;
44
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
27
45
  }
@@ -1,4 +1,23 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-monaco-base-view {
2
21
  border: 1px solid var(--g-color-line-generic);
3
- width: 550px;
22
+ width: var(--df-monaco-base-view-width, 550px);
4
23
  }
@@ -1,9 +1,28 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-monaco-view-dialog .g-dialog-footer {
2
- padding: 10px 32px 32px;
21
+ padding: var(--df-monaco-view-dialog-footer-padding, 10px var(--g-spacing-8) var(--g-spacing-8));
3
22
  }
4
23
  .df-monaco-view-dialog__container {
5
24
  border: 1px solid var(--g-color-line-generic);
6
25
  }
7
26
  .df-monaco-view-dialog__dialog-header {
8
- height: 48px;
27
+ height: var(--df-monaco-view-dialog-header-height, 48px);
9
28
  }
@@ -1,21 +1,40 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-multi-oneof-view__tooltip {
2
21
  overflow-wrap: break-word;
3
22
  }
4
23
  .df-multi-oneof-view__tooltip-container {
5
- max-width: 100%;
24
+ max-width: var(--df-tooltip-container-max-width, 100%);
6
25
  overflow: hidden;
7
26
  text-overflow: ellipsis;
8
27
  display: block;
9
- margin-bottom: 6px;
28
+ margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
10
29
  }
11
30
  .df-multi-oneof-view__tooltip-container:last-child {
12
- margin-bottom: 0;
31
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
13
32
  }
14
33
  .df-multi-oneof-view__content_multiple-values > .df-group-indent {
15
- padding-top: 0px;
34
+ padding-top: var(--df-multi-oneof-view-content-multiple-values-child-padding-top, var(--g-spacing-0));
16
35
  }
17
36
  .df-multi-oneof-view__content_flat > .df-group-indent {
18
- margin: 0 0 20px;
37
+ margin: var(--df-multi-oneof-view-content-flat-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
19
38
  border-left: none;
20
- padding: 0;
39
+ padding: var(--df-multi-oneof-view-content-flat-child-padding, var(--g-spacing-0));
21
40
  }
@@ -1,13 +1,32 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-multiselect-view__tooltip {
2
21
  overflow-wrap: break-word;
3
22
  }
4
23
  .df-multiselect-view__tooltip-container {
5
- max-width: 100%;
24
+ max-width: var(--df-tooltip-container-max-width, 100%);
6
25
  overflow: hidden;
7
26
  text-overflow: ellipsis;
8
27
  display: block;
9
- margin-bottom: 6px;
28
+ margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
10
29
  }
11
30
  .df-multiselect-view__tooltip-container:last-child {
12
- margin-bottom: 0;
31
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
13
32
  }
@@ -1,3 +1,22 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-number-with-scale-view {
2
21
  display: flex;
3
22
  }
@@ -8,8 +27,8 @@
8
27
  white-space: nowrap;
9
28
  overflow: hidden;
10
29
  text-overflow: ellipsis;
11
- max-width: 100%;
30
+ max-width: var(--df-tooltip-container-max-width, 100%);
12
31
  }
13
32
  .df-number-with-scale-view__size {
14
- margin-left: 2px;
33
+ margin-left: var(--df-number-with-scale-view-size-margin-left, var(--g-spacing-half));
15
34
  }
@@ -1,17 +1,35 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-object-base-view__content_inline {
2
21
  display: flex;
3
22
  }
4
23
  .df-object-base-view__content_inline > div {
5
24
  flex: auto;
6
- margin-right: 8px;
7
- margin-bottom: 0;
25
+ margin: var(--df-object-base-view-content-inline-margin, var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0));
8
26
  }
9
27
  .df-object-base-view__content_inline > div:last-child {
10
- margin-right: 0;
28
+ margin-right: var(--df-spacing-last-child, var(--g-spacing-0));
11
29
  }
12
30
  .df-object-base-view__delimiter {
13
31
  display: flex;
14
- margin-right: 8px;
32
+ margin-right: var(--df-object-base-view-delimiter-right, var(--g-spacing-2));
15
33
  align-items: center;
16
34
  white-space: nowrap;
17
35
  }
@@ -1,11 +1,30 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-oneof-view > .df-group-indent {
2
- margin-bottom: 20px;
21
+ margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
3
22
  }
4
23
  .df-oneof-view:last-child > .df-group-indent {
5
- margin-bottom: 0;
24
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
6
25
  }
7
26
  .df-oneof-view_flat > .df-group-indent {
8
- margin: 0 0 20px;
27
+ margin: var(--df-oneof-view-flat-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
9
28
  border-left: none;
10
- padding: 0;
29
+ padding: var(--df-oneof-view-flat-child-padding, var(--g-spacing-0));
11
30
  }
@@ -1,15 +1,34 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-table-array-view__table {
2
- margin-bottom: 10px;
21
+ margin-bottom: var(--df-table-array-view-table-margin-bottom, 10px);
3
22
  }
4
23
  .df-table-array-view__cell {
5
- max-width: 150px;
6
- min-width: 150px;
24
+ max-width: var(--df-table-array-view-cell-min-width, 150px);
25
+ min-width: var(--df-table-array-view-cell-max-width, 150px);
7
26
  }
8
27
  .df-table-array-view__cell_arr, .df-table-array-view__cell_obj {
9
28
  max-width: unset;
10
29
  }
11
30
  .df-table-array-view__cell_arr > .simple-vertical-accordeon, .df-table-array-view__cell_obj > .simple-vertical-accordeon {
12
- margin-bottom: 0;
31
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
13
32
  }
14
33
  .df-table-array-view__cell_bool {
15
34
  max-width: 50px;
@@ -1,3 +1,22 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-text-area-view {
2
21
  display: flex;
3
22
  }
@@ -5,7 +24,7 @@
5
24
  cursor: pointer;
6
25
  }
7
26
  .df-text-area-view__chevron {
8
- margin: 3px;
27
+ margin: var(--df-text-area-view-chevron-margin, 3px);
9
28
  }
10
29
  .df-text-area-view__chevron_open {
11
30
  transform: rotate(180deg);
@@ -1,22 +1,41 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
1
20
  .df-use-oneof__toggler_radio > .df-row {
2
21
  width: unset;
3
22
  max-width: unset;
4
23
  }
5
24
  .df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
6
- padding-top: 0px;
7
- margin-top: 15px;
25
+ padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0));
26
+ margin-top: var(--df-spacing-inputs, 15px);
8
27
  }
9
28
  .df-use-oneof__card {
10
29
  display: flex;
11
30
  }
12
31
  .df-use-oneof__card > * {
13
- margin-right: 8px;
32
+ margin-right: var(--df-use-oneof-card-margin-right, var(--g-spacing-2));
14
33
  }
15
34
  .df-use-oneof__card > :last-child {
16
- margin-right: 0;
35
+ margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
17
36
  }
18
37
  .df-use-oneof__checkbox {
19
- height: 28px;
38
+ height: var(--df-use-oneof-checkbox-height, 28px);
20
39
  display: flex;
21
40
  align-items: center;
22
41
  }
@@ -0,0 +1,19 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
@@ -0,0 +1,19 @@
1
+ /*
2
+ @mixin variables {
3
+ --g-spacing-base: 4px;
4
+
5
+ --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
6
+ --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
7
+ --g-spacing-1: var(--g-spacing-base); // 4px
8
+ --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
9
+ --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
10
+ --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
11
+ --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
12
+ --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
13
+ --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
14
+ --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
15
+ --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
16
+ --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
17
+ }
18
+ */
19
+ /* Border-radius */
@@ -37,7 +37,7 @@ export const isNotEmptyValue = (value, spec) => {
37
37
  return true;
38
38
  };
39
39
  export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
40
- var _a, _b, _c, _d, _e, _f, _g, _h;
40
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
41
41
  if (isObjectLike(spec)) {
42
42
  const result = cloneDeep(spec);
43
43
  if (isString(result.type)) {
@@ -49,7 +49,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
49
49
  try {
50
50
  _defaultValue = JSON.parse(result.defaultValue);
51
51
  }
52
- catch (_j) {
52
+ catch (_l) {
53
53
  _defaultValue = undefined;
54
54
  }
55
55
  }
@@ -80,6 +80,10 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
80
80
  result.viewSpec.textContentParams.themeLabel =
81
81
  result.viewSpec.textContentParams.themeLabel.toLowerCase();
82
82
  }
83
+ if (isString((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
84
+ result.viewSpec.textContentParams.themeAlert =
85
+ result.viewSpec.textContentParams.themeAlert.toLowerCase();
86
+ }
83
87
  if (isString(result.validator)) {
84
88
  result.validator = result.validator.toLowerCase();
85
89
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dynamic-forms",
3
- "version": "4.15.0",
3
+ "version": "4.16.0",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "main": "build/cjs/index.js",