@gravity-ui/dynamic-forms 4.14.3 → 4.16.0

package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.css

@@ -1,11 +1,30 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-oneof-view > .df-group-indent {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-oneof-view:last-child > .df-group-indent {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-oneof-view_flat > .df-group-indent {
-  margin: 0 0 20px;
+  margin: var(--df-oneof-view-flat-child-margin, var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5));
   border-left: none;
-  padding: 0;
+  padding: var(--df-oneof-view-flat-child-padding, var(--g-spacing-0));
 }

package/build/esm/lib/kit/components/Views/TableArrayView/TableArrayView.css

@@ -1,15 +1,34 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-table-array-view__table {
-  margin-bottom: 10px;
+  margin-bottom: var(--df-table-array-view-table-margin-bottom, 10px);
 }
 .df-table-array-view__cell {
-  max-width: 150px;
-  min-width: 150px;
+  max-width: var(--df-table-array-view-cell-min-width, 150px);
+  min-width: var(--df-table-array-view-cell-max-width, 150px);
 }
 .df-table-array-view__cell_arr, .df-table-array-view__cell_obj {
   max-width: unset;
 }
 .df-table-array-view__cell_arr > .simple-vertical-accordeon, .df-table-array-view__cell_obj > .simple-vertical-accordeon {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-table-array-view__cell_bool {
   max-width: 50px;

package/build/esm/lib/kit/components/Views/TextAreaView/TextAreaView.css

@@ -1,3 +1,22 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-text-area-view {
   display: flex;
 }
@@ -5,7 +24,7 @@
   cursor: pointer;
 }
 .df-text-area-view__chevron {
-  margin: 3px;
+  margin: var(--df-text-area-view-chevron-margin, 3px);
 }
 .df-text-area-view__chevron_open {
   transform: rotate(180deg);

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -11,6 +11,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -34,6 +35,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -48,6 +50,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
         },
@@ -72,6 +75,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             accordeon: Accordeon,
             section: Section,
             section2: Section2,
@@ -101,6 +105,7 @@ export const dynamicConfig = {
         layouts: {
             row: Row,
             row_verbose: RowVerbose,
+            column: Column,
             table_item: TableCell,
             transparent: Transparent,
             section: Section,
@@ -126,6 +131,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -146,6 +152,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -157,6 +164,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
         },
@@ -178,6 +186,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             accordeon: ViewAccordeon,
             section: ViewSection,
             section2: ViewSection2,
@@ -204,6 +213,7 @@ export const dynamicViewConfig = {
         layouts: {
             row: ViewRow,
             row_verbose: ViewRow,
+            column: ViewColumn,
             table_item: ViewTableCell,
             transparent: ViewTransparent,
             section: ViewSection,

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css

@@ -1,22 +1,41 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
 .df-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
 }
 .df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
-  padding-top: 0px;
-  margin-top: 15px;
+  padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0));
+  margin-top: var(--df-spacing-inputs, 15px);
 }
 .df-use-oneof__card {
   display: flex;
 }
 .df-use-oneof__card > * {
-  margin-right: 8px;
+  margin-right: var(--df-use-oneof-card-margin-right, var(--g-spacing-2));
 }
 .df-use-oneof__card > :last-child {
-  margin-right: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-use-oneof__checkbox {
-  height: 28px;
+  height: var(--df-use-oneof-checkbox-height, 28px);
   display: flex;
   align-items: center;
 }

package/build/esm/lib/kit/styles/mixins.css

@@ -0,0 +1,19 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */

package/build/esm/lib/kit/styles/variables.css

@@ -0,0 +1,19 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */

package/build/esm/lib/kit/utils/common.js

@@ -37,7 +37,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if (isObjectLike(spec)) {
         const result = cloneDeep(spec);
         if (isString(result.type)) {
@@ -49,7 +49,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_j) {
+                catch (_l) {
                     _defaultValue = undefined;
                 }
             }
@@ -80,6 +80,10 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
+        if (isString((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
+            result.viewSpec.textContentParams.themeAlert =
+                result.viewSpec.textContentParams.themeAlert.toLowerCase();
+        }
         if (isString(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.14.3",
+  "version": "4.16.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",