cnhis-design-vue 3.1.5-beta.16 → 3.1.5-beta.17

package/es/packages/form-render/src/hooks/useFieldList2Schema.js

@@ -1 +1,197 @@
-export { useFieldList2Schema } from './useFieldList2Schema2.js';
+import { pick } from 'lodash-es';
+import { arrayed, transformDateFormat } from '../utils/index.js';
+import { useFormValidator, useTypeNormalize } from '../../../../packages/form-render';
+import { isObject } from '@vueuse/core';
+
+function useFieldList2Schema(collector) {
+  const { createValidatorSchema } = useFormValidator();
+  const createStandardSchema = (item) => {
+    const result = {
+      name: item.val_key,
+      type: "string",
+      title: item.alias || item.name,
+      "x-decorator": "FORM_ITEM",
+      "x-decorator-props": { span: item.elem_width, showLabel: item.hide_title !== "1" },
+      "x-component": item.html_type,
+      "x-component-props": { placeholder: item.placeholder, clearable: item.is_empty === "1" },
+      "x-display": item.is_show === "0" ? "hidden" : "visible",
+      "x-pattern": item.is_edit === "0" ? "disabled" : "editable"
+    };
+    if (isObject(item.reactions)) {
+      result["x-reactions"] = item.reactions;
+    }
+    const rules = createValidatorSchema(item);
+    rules && (result["x-validator"] = rules);
+    item.is_null === "0" && (result.required = true);
+    return result;
+  };
+  const createInputSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      prefix: item.prefix,
+      suffix: item.suffix
+    });
+    return schema;
+  };
+  const createSelectSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      urlConfig: item.urlConfig,
+      options: item.option,
+      multiple: item.multi_select === "0",
+      maxTagCount: +item.multi_select_value
+    });
+    return schema;
+  };
+  const createRadioSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      options: item.option,
+      vertical: item.__vertical
+    });
+    return schema;
+  };
+  const createDateSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      valueFormat: item.date_format,
+      type: transformDateFormat(item.date_format),
+      validate: item.validate
+    });
+    return schema;
+  };
+  const createCascaderSchema = (item) => {
+    var _a;
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      urlConfig: item.urlConfig,
+      deep: (_a = item.wordbook) == null ? void 0 : _a.level_num,
+      options: item.option
+    });
+    return schema;
+  };
+  const createSwitchSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      openDescription: item.open,
+      closeDescription: item.close
+    });
+    return schema;
+  };
+  const createCombinationSchema = (item) => {
+    const schema = createStandardSchema(item);
+    schema["x-decorator-props"].showLabel = false;
+    Object.assign(schema["x-component-props"], {
+      title: item.alias || item.name,
+      properties: transform(item.children || [])
+    });
+    return schema;
+  };
+  const createInputNumberSchema = (item) => {
+    const schema = createStandardSchema(item);
+    const { decimal_length, validate } = item;
+    Object.assign(schema["x-component-props"], {
+      precision: decimal_length || (validate == null ? void 0 : validate.decimal_length),
+      max: validate == null ? void 0 : validate.max_value,
+      min: validate == null ? void 0 : validate.min_value
+    });
+    return schema;
+  };
+  const createSliderSchema = (item) => {
+    const schema = createStandardSchema(item);
+    Object.assign(schema["x-component-props"], {
+      step: item.step_length,
+      max: item.max_length,
+      min: item.min_length,
+      option: item.option
+    });
+    return schema;
+  };
+  const createCustomSchema = (item) => {
+    const schema = createStandardSchema(item);
+    item.fieldType && (schema.type = item.fieldType);
+    Object.assign(schema["x-component-props"], {
+      fieldItem: item
+    });
+    return schema;
+  };
+  const createLinebarSchema = (item) => {
+    return {
+      name: item.val_key,
+      type: "void",
+      title: item.alias || item.name,
+      "x-component": "LINEBAR",
+      "x-component-props": {
+        line: item.__line,
+        disabled: item.is_not_fold === "1",
+        id: item.val_key,
+        show: !!item.is_show
+      }
+    };
+  };
+  const createComplexSchema = (item) => {
+    const schema = createStandardSchema(item);
+    const properties = Array.isArray(item.properties) ? transform(item.properties) : {};
+    schema.type = item.fieldType || "void";
+    schema.properties = properties;
+    Object.assign(schema["x-decorator-props"], { showFeedback: false });
+    Object.assign(schema["x-component-props"], pick(item, ["wrapperStyle", "display"]));
+    return schema;
+  };
+  const creatorMap = /* @__PURE__ */ new Map([
+    ["LINEBAR", createLinebarSchema],
+    ["INPUT", createInputSchema],
+    ["INPUT_NUMBER", createInputNumberSchema],
+    ["SELECT", createSelectSchema],
+    ["DATE", createDateSchema],
+    ["SEARCH_CASCADE", createCascaderSchema],
+    ["COMBINATION", createCombinationSchema],
+    ["RADIO", createRadioSchema],
+    ["CHECKBOX", createRadioSchema],
+    ["SWITCH", createSwitchSchema],
+    ["SLIDER", createSliderSchema],
+    ["COMPLEX", createComplexSchema]
+  ]);
+  const createWidgetSchema = (item) => {
+    if (item.suffixConfig)
+      return createWidgetCombinationSchema(item);
+    const creator = creatorMap.get(item.html_type) || createCustomSchema;
+    return creator(item);
+  };
+  const createWidgetCombinationSchema = (item) => {
+    const suffixList = arrayed(item.suffixConfig);
+    const fieldList = [{ ...item, suffixConfig: void 0 }].concat(suffixList.map((suffix) => {
+      return { ...suffix, is_show: item.is_show, alias: " " };
+    }));
+    return {
+      type: "void",
+      title: item.alias || item.name,
+      "x-component": "INPUT_GROUP",
+      "x-component-props": { span: item.elem_width },
+      properties: transform(fieldList)
+    };
+  };
+  const { normalize } = useTypeNormalize();
+  function transform(fieldList) {
+    let prevLinebar = null;
+    return fieldList.reduce((fin, cur) => {
+      var _a;
+      normalize(cur);
+      const obj_type = (_a = cur.validate) == null ? void 0 : _a.obj_type;
+      obj_type && collector.collect(obj_type, cur.val_key);
+      if (cur.html_type === "LINEBAR") {
+        fin[cur.val_key] = createLinebarSchema(cur);
+        prevLinebar = fin[cur.val_key].properties = {};
+      } else if (prevLinebar) {
+        prevLinebar[cur.val_key] = createWidgetSchema(cur);
+      } else {
+        prevLinebar = null;
+        fin[cur.val_key] = createWidgetSchema(cur);
+      }
+      return fin;
+    }, {});
+  }
+  return { transform };
+}
+
+export { useFieldList2Schema };

package/es/packages/form-render/src/hooks/useFieldVisitor.js

@@ -1 +1,38 @@
-export { useFieldVisitor } from './useFieldVisitor2.js';
+import { arrayed } from '../utils/index.js';
+import { isFunction } from '@vueuse/core';
+
+function useFieldVisitor() {
+  function traverse(fieldList, visitorMap, key = "val_key") {
+    if (!visitorMap)
+      return fieldList;
+    return fieldList.reduce((fin, field) => {
+      if (Array.isArray(field.children)) {
+        field.children = traverse(field.children, visitorMap, key);
+      }
+      if (field.suffixConfig) {
+        field.suffixConfig = traverse(arrayed(field.suffixConfig), visitorMap, key);
+      }
+      const visitor = visitorMap[field[key]];
+      let current = field;
+      const before = [];
+      const after = [];
+      isFunction(visitor) && visitor({
+        field,
+        replace(field2) {
+          current = field2;
+        },
+        insertBefore(field2) {
+          before.push(...arrayed(field2));
+        },
+        insertAfter(field2) {
+          after.push(...arrayed(field2));
+        }
+      });
+      fin.push(...before, current, ...after);
+      return fin;
+    }, []);
+  }
+  return { traverse };
+}
+
+export { useFieldVisitor };

package/es/packages/form-render/src/hooks/useFormContext.d.ts

@@ -0,0 +1,8 @@
+import { AnyObject } from '../../../../../es/src/types';
+export declare function useFormContext(props: AnyObject): {
+    asyncQueue: import("../../../../../es/packages/form-render").FormAsyncQueue;
+    SchemaField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    businessCollector: import("../../../../../es/packages/form-render").BusinessCollector;
+    changeContextCollector: import("../../../../../es/packages/form-render").ContextCollector;
+    formItemDepsCollector: import("../../../../../es/packages/form-render").FormItemDepsCollector;
+};

package/es/packages/form-render/src/hooks/useFormContext.js

@@ -0,0 +1,26 @@
+import { provide } from 'vue';
+import { createSchemaField } from '@formily/vue';
+import { useAsyncQueue, useBusinessBinding, useChangeContext, useFormItemDeps } from '../../../../packages/form-render';
+import * as components from '../../../../packages/form-render/src/components/renderer';
+import { injectOrProvide } from '../../../../packages/form-render/src/utils';
+import { InjectAsyncQueue, InjectionSchemaField, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector } from '../../../../packages/form-render/src/constants';
+
+function useFormContext(props) {
+  const asyncQueue = injectOrProvide(InjectAsyncQueue, () => useAsyncQueue().create(props.parallelism));
+  const SchemaField = injectOrProvide(InjectionSchemaField, () => createSchemaField({
+    components: {
+      ...components,
+      ...props.components
+    },
+    scope: props.scope
+  }).SchemaField);
+  const businessCollector = useBusinessBinding().create();
+  provide(InjectionBusinessCollector, businessCollector);
+  const changeContextCollector = useChangeContext().create();
+  provide(InjectionChangeContextCollector, changeContextCollector);
+  const formItemDepsCollector = useFormItemDeps().create();
+  provide(InjectionFormItemDepsCollector, formItemDepsCollector);
+  return { asyncQueue, SchemaField, businessCollector, changeContextCollector, formItemDepsCollector };
+}
+
+export { useFormContext };

package/es/packages/form-render/src/hooks/useFormField.js

@@ -1 +1,13 @@
-export { useFormField } from './useFormField2.js';
+import { useField } from '@formily/vue';
+import { computed } from 'vue';
+
+function useFormField() {
+  const field = useField();
+  return {
+    field,
+    title: computed(() => field.value.title),
+    fieldKey: computed(() => field.value.props.name.toString())
+  };
+}
+
+export { useFormField };

package/es/packages/form-render/src/hooks/useFormItemDeps.d.ts

@@ -1,7 +1,7 @@
 export declare class FormItemDepsCollector {
     private readonly collector;
     setDeps(key: string, dependKey: string | string[], callback: Function): void;
-    trigger(dependKey: string): void;
+    trigger(dependKey: string, payload?: any): void;
 }
 export declare function useFormItemDeps(): {
     create: () => FormItemDepsCollector;

package/es/packages/form-render/src/hooks/useFormItemDeps.js

@@ -1 +1,29 @@
-export { FormItemDepsCollector, useFormItemDeps } from './useFormItemDeps2.js';
+import { arrayed } from '../../../../packages/form-render/src/utils';
+
+class FormItemDepsCollector {
+  constructor() {
+    this.collector = /* @__PURE__ */ new Map();
+  }
+  setDeps(key, dependKey, callback) {
+    dependKey = arrayed(dependKey);
+    dependKey.forEach((dependKey2) => {
+      const map = this.collector.get(dependKey2) || /* @__PURE__ */ new Map();
+      map.set(key, callback);
+      this.collector.set(dependKey2, map);
+    });
+  }
+  trigger(dependKey, payload) {
+    const map = this.collector.get(dependKey);
+    map && map.forEach((cb) => {
+      typeof cb === "function" && cb(payload);
+    });
+  }
+}
+function useFormItemDeps() {
+  function create() {
+    return new FormItemDepsCollector();
+  }
+  return { create };
+}
+
+export { FormItemDepsCollector, useFormItemDeps };

package/es/packages/form-render/src/hooks/useFormRequest.js

@@ -1 +1,12 @@
-export { useFormRequest } from './useFormRequest2.js';
+let http = null;
+function useFormRequest() {
+  function getHttpInstance() {
+    return http;
+  }
+  function registGlobHttpInstance(instance) {
+    http = instance;
+  }
+  return { getHttpInstance, registGlobHttpInstance };
+}
+
+export { useFormRequest };

package/es/packages/form-render/src/hooks/useFormValidator.js

@@ -1 +1,48 @@
-export { useFormValidator } from './useFormValidator2.js';
+import { arrayed } from '../utils/index.js';
+import { isFunction } from '@vueuse/core';
+
+function useFormValidator() {
+  const validateMap = /* @__PURE__ */ new Map([
+    ["mobile", ({ validate }) => ({ format: "phone", message: validate == null ? void 0 : validate.message })],
+    ["integer", ({ validate }) => ({ format: "integer", message: validate == null ? void 0 : validate.message })],
+    ["number", ({ validate }) => ({ format: "number", message: validate == null ? void 0 : validate.message })],
+    [
+      "id_card",
+      ({ validate }) => ({
+        pattern: /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}))$/,
+        message: (validate == null ? void 0 : validate.message) || "\u8BF7\u8F93\u5165\u5408\u6CD5\u7684\u8EAB\u4EFD\u8BC1\u53F7"
+      })
+    ],
+    [
+      "regular",
+      (field) => {
+        const { validate, regular_expression, regular_error_tip } = field;
+        const pattern = regular_expression || (validate == null ? void 0 : validate.regular_expression) || "";
+        const message = regular_error_tip || (validate == null ? void 0 : validate.regular_error_tip) || (validate == null ? void 0 : validate.message) || "\u683C\u5F0F\u9519\u8BEF";
+        return { pattern, message };
+      }
+    ]
+  ]);
+  const commonValidateConfig = { triggerType: "onBlur" };
+  function createValidatorSchema(fieldItem) {
+    const rules = [];
+    const { validate: { vali_obj, max_length, message } = {}, validator } = fieldItem;
+    if (validator) {
+      const _validator = arrayed(validator);
+      _validator.forEach((f) => {
+        if (!isFunction(f))
+          return;
+        rules.push({ validator: (value) => f(value, fieldItem) });
+      });
+    }
+    if (max_length) {
+      rules.push({ max: max_length, message });
+    }
+    const ruleCreator = vali_obj && validateMap.get(vali_obj);
+    ruleCreator && rules.push(Object.assign({}, commonValidateConfig, ruleCreator(fieldItem)));
+    return rules;
+  }
+  return { createValidatorSchema };
+}
+
+export { useFormValidator };

package/es/packages/form-render/src/hooks/useInitialData.d.ts

@@ -0,0 +1,5 @@
+import { AnyObject } from '../../../../../es/src/types';
+import { FieldItem } from '../types';
+export declare function useInitialData(): {
+    assignInitialData: (initialData?: AnyObject, fieldList?: FieldItem[]) => AnyObject;
+};

package/es/packages/form-render/src/hooks/useInitialData.js

@@ -0,0 +1,11 @@
+function useInitialData() {
+  function assignInitialData(initialData, fieldList) {
+    return Object.assign({}, initialData, fieldList == null ? void 0 : fieldList.reduce((fin, cur) => {
+      cur.default_val && (fin[cur.val_key] = cur.default_val);
+      return fin;
+    }, {}));
+  }
+  return { assignInitialData };
+}
+
+export { useInitialData };

package/es/packages/form-render/src/hooks/useTypeNormalize.d.ts

@@ -1,4 +1,4 @@
-import { FieldItem } from "../types";
+import { FieldItem } from '../types';
 export declare function useTypeNormalize(): {
     normalize: (item: FieldItem) => void;
 };

package/es/packages/form-render/src/hooks/useTypeNormalize.js

@@ -1 +1,42 @@
-export { useTypeNormalize } from './useTypeNormalize2.js';
+function useTypeNormalize() {
+  function normalizeAgeField(item) {
+    item.html_type = "INPUT";
+    item.suffixConfig = [
+      {
+        val_key: item.val_key_unit,
+        html_type: "SELECT",
+        option: item.option
+      }
+    ];
+  }
+  const types = [
+    [["SEARCH", "PHONE_TYPE", "IDCARD_TYPE"], "SELECT"],
+    ["DIGITAL", "INPUT_NUMBER"],
+    ["CHECKBOX_BLOCK", "CHECKBOX"],
+    ["RADIO_BLOCK", "RADIO"],
+    [["DATE-INPUT", "DATETIME-INPUT"], "DATE"],
+    ["SWITCH_COMPONENT", "SWITCH"],
+    ["SLIDER_COMPONENT", "SLIDER"],
+    ["LINE_BREAKS", "LINEBAR"]
+  ];
+  function normalize(item) {
+    const type = item.html_type;
+    if (["CHECK_BLOCK", "RADIO_BLOCK"].includes(type)) {
+      item.__vertical = true;
+    }
+    if (["LINE_BREAKS"].includes(type)) {
+      item.__line = true;
+      item.is_show = "1";
+    }
+    if (item.html_type === "AGE") {
+      normalizeAgeField(item);
+    }
+    types.some(([rule, target]) => {
+      const match = Array.isArray(rule) ? rule.includes(type) : rule === type;
+      return match && (item.html_type = target);
+    });
+  }
+  return { normalize };
+}
+
+export { useTypeNormalize };

package/es/packages/form-render/src/types/index.d.ts

@@ -20,9 +20,10 @@ export interface FormAsyncQueueItem {
 export declare type FormAsyncQueue = AsyncQueue<FormAsyncQueueItem, any, AnyObject[]>;
 export declare type IdCardParseInfo = Record<'sex' | 'birthday', string> & Record<'age' | 'day' | 'month' | 'year', number>;
 export declare type FormRenderExpose = {
-    validate(): Promise<unknown>;
+    validate(): Promise<void>;
     getFormValues(): AnyObject;
     setFieldState(path: string, setter: (field: Field) => void): void;
+    resetFields(path?: string): void;
 };
 export declare type FormChangeContext = Partial<{
     currentOption: AnyObject;

package/es/packages/form-render/src/utils/index.d.ts

@@ -1,4 +1,5 @@
 import { AnyObject } from '../../../../../es/src/types';
+import { ISchema } from '@formily/json-schema/esm/types';
 import { GeneralField } from '@formily/core';
 import { InjectionKey } from 'vue';
 import { IdCardParseInfo } from '../types';
@@ -12,3 +13,4 @@ export declare function isIdCard(idCardNo: string): boolean;
 export declare function parseIdCard(idCardNo: string): IdCardParseInfo;
 export declare function injectOrProvide<T>(key: InjectionKey<T>, creator: () => T): T;
 export declare function generateUrlParams(field: GeneralField, dependKeys?: string | string[]): AnyObject;
+export declare function traverseSchema(schema: ISchema, handler: (_s: ISchema) => void): void;

package/es/packages/form-render/src/utils/index.js

@@ -1 +1,80 @@
-export { arrayed, assignUpdateValue, formRenderLog, generateUrlParams, injectOrProvide, isIdCard, parseIdCard, transformDateFormat } from './index2.js';
+import { isObject } from 'lodash-es';
+import { FIELD_SEX_VALUE } from '../constants/index.js';
+import { isField } from '@formily/core';
+import differenceInDays from '../../../../node_modules/date-fns/esm/differenceInDays/index.js';
+import differenceInMonths from '../../../../node_modules/date-fns/esm/differenceInMonths/index.js';
+import { inject, provide } from 'vue';
+
+function formRenderLog(message, type = "log") {
+  console[type](`[FormRender]: ${message}`);
+}
+function arrayed(maybeArray) {
+  if (Array.isArray(maybeArray))
+    return maybeArray;
+  return [maybeArray];
+}
+function assignUpdateValue(props, field) {
+  const _props = { ...props };
+  if (isField(field)) {
+    Object.assign(_props, {
+      "onUpdate:value"(value) {
+        field.setValue(value);
+      }
+    });
+  }
+  return _props;
+}
+function transformDateFormat(format) {
+  return format.includes("HH") ? "datetime" : "date";
+}
+function isIdCard(idCardNo) {
+  return /^\d{6}(((19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|x|X))|(\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}))$/.test(idCardNo);
+}
+function parseIdCard(idCardNo) {
+  const parseInner = (certificateNo, idxSexStart, birthYearSpan) => {
+    const res = {};
+    const idxSex = 1 - certificateNo.substr(idxSexStart, 1) % 2;
+    res.sex = idxSex === 1 ? FIELD_SEX_VALUE.FEMALE : FIELD_SEX_VALUE.MALE;
+    const year = (birthYearSpan == 2 ? "19" : "") + certificateNo.substr(6, birthYearSpan);
+    const month = certificateNo.substr(6 + birthYearSpan, 2);
+    const day = certificateNo.substr(8 + birthYearSpan, 2);
+    res.birthday = year + "-" + month + "-" + day;
+    const d = new Date();
+    const monthFloor = d.getMonth() + 1 < parseInt(month, 10) || d.getMonth() + 1 == parseInt(month, 10) && d.getDate() < parseInt(day, 10) ? 1 : 0;
+    res.age = res.year = d.getFullYear() - parseInt(year, 10) - monthFloor;
+    res.day = differenceInDays(d, new Date(res.birthday));
+    res.month = differenceInMonths(d, new Date(res.birthday));
+    return res;
+  };
+  return parseInner(idCardNo, idCardNo.length == 15 ? 14 : 16, idCardNo.length == 15 ? 2 : 4);
+}
+function injectOrProvide(key, creator) {
+  let injected = inject(key, null);
+  if (!injected) {
+    injected = creator();
+    provide(key, injected);
+  }
+  return injected;
+}
+function generateUrlParams(field, dependKeys) {
+  const result = {};
+  if (dependKeys) {
+    arrayed(dependKeys).forEach((dependKey) => {
+      const _field = field.query(dependKey).take();
+      if (isField(_field)) {
+        result[dependKey] = _field.value;
+      }
+    });
+  }
+  return result;
+}
+function traverseSchema(schema, handler) {
+  handler(schema);
+  if (isObject(schema.properties)) {
+    Object.values(schema.properties).forEach((_s) => {
+      traverseSchema(_s, handler);
+    });
+  }
+}
+
+export { arrayed, assignUpdateValue, formRenderLog, generateUrlParams, injectOrProvide, isIdCard, parseIdCard, transformDateFormat, traverseSchema };

package/es/packages/form-render/style/index.css

@@ -2,6 +2,9 @@
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
   gap: 0 8px;
+  max-height: var(--form-height);
+  overflow-y: auto;
+  position: relative;
 }
 .form-render__formItem {
   grid-column: span var(--form-item-column) / span var(--form-item-column);
@@ -9,10 +12,10 @@
 .form-render__formItem .n-date-picker {
   width: 100%;
 }
-.form-render__collapse {
+.form-render__linebar {
   grid-column: span var(--column) / span var(--column);
 }
-.form-render__collapseHeader {
+.form-render__linebarHeader {
   cursor: pointer;
   display: flex;
   background: #fafafa;
@@ -22,7 +25,7 @@
   margin-bottom: 8px;
   border: 1px solid #d9d9d9;
 }
-.form-render__collapseItem {
+.form-render__linebarItem {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
   gap: 0 8px;
@@ -30,7 +33,7 @@
 .form-render__inputGroup {
   grid-column: span var(--column) / span var(--column);
   display: flex;
-  align-items: flex-end;
+  align-items: flex-start;
 }
 .form-render__inputGroup > div {
   flex: 1;
@@ -85,8 +88,12 @@
 .form-render__complex {
   width: 100%;
 }
-.form-render__complexContent {
+.form-render__complexContent--grid {
   display: grid !important;
   grid-template-columns: repeat(var(--column), minmax(0px, 1fr));
   gap: 0 8px;
 }
+.form-render__complexContent--flex {
+  display: flex !important;
+  gap: 0 8px;
+}