rb-document-form-constructor 0.1.5 → 0.1.9

package/dist/rb-document-form-constructor.esm.js

@@ -1,13 +1,98 @@
+import crypto from 'crypto';
+
+const UtFormConfig = {
+  findField(fieldName, formConfig) {
+    if (!formConfig || !formConfig.sections) {
+      return null;
+    }
+
+    let found = null;
+    formConfig.sections.every(r => {
+      if (r.columns) {
+        r.columns.every(c => {
+          c.fields.forEach(f => {
+            if (f.name === fieldName) {
+              found = f;
+            }
+          });
+
+          if (found) {
+            return false;
+          }
+        });
+      }
+
+      if (found) {
+        return false;
+      }
+    });
+    return found;
+  },
+
+  findRule(ruleId, formConfig) {
+    if (!formConfig || !formConfig.sections) {
+      return null;
+    }
+
+    let found = null;
+    formConfig.sections.every(s => {
+      if (s.columns) {
+        s.columns.every(c => {
+          c.fields.every(f => {
+            if (f.rules) {
+              f.rules.forEach(r => {
+                if (r.id === ruleId) {
+                  found = r;
+                }
+              });
+            }
+
+            if (found) {
+              return false;
+            }
+          });
+
+          if (found) {
+            return false;
+          }
+        });
+      }
+
+      if (found) {
+        return false;
+      }
+    });
+    return found;
+  },
+
+  getFields(formConfig) {
+    let fields = [];
+    formConfig.sections.forEach(s => {
+      if (s.columns) {
+        s.columns.forEach(c => {
+          if (c.fields) {
+            c.fields.forEach(f => {
+              fields.push(f);
+            });
+          }
+        });
+      }
+    });
+    return fields;
+  }
+
+};
+
 let __clone = function (data) {
   return JSON.parse(JSON.stringify(data));
 };
 
 let __assign = function () {
   __assign = Object.assign || function __assign(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
+    for (let s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
 
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      for (let p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
 
     return t;
@@ -16,6 +101,50 @@ let __assign = function () {
   return __assign.apply(this, arguments);
 };
 
+let __mergeInputInMapOfArrays = function (inputs, formConfigInputs) {
+  for (let dataType in formConfigInputs) {
+    let foundInputs = inputs[dataType];
+
+    if (foundInputs) {
+      __mergeInputsInArray(foundInputs, formConfigInputs[dataType]);
+    } else {
+      inputs[dataType] = formConfigInputs[dataType];
+    }
+  }
+};
+
+let __mergeInputsInMap = function (inputs, formConfigInputs) {
+  for (let name in formConfigInputs) {
+    inputs[name] = __assign(inputs[name] ? inputs[name] : {}, formConfigInputs[name] ? formConfigInputs[name] : {});
+  }
+};
+
+let __mergeInputsInArray = function (inputs, formConfigInputs) {
+  formConfigInputs.forEach(input => {
+    let index = inputs.findIndex(item => item.name === input.name);
+
+    if (index >= 0) {
+      inputs[index] = input;
+    } else {
+      inputs.push(input);
+    }
+  });
+};
+
+let __applyDefaultProps = function (input) {
+  for (let propName in input.props) {
+    input.propsData[propName] = input.props[propName].default;
+  }
+};
+
+let __applyRefProps = function (input, refConfig) {
+  if (refConfig !== null && refConfig !== void 0 && refConfig.propsData) {
+    for (let propName in refConfig.propsData) {
+      input.propsData[propName] = refConfig.propsData[propName];
+    }
+  }
+};
+
 let fcInputs = {
   text: {
     text: 'Текст',
@@ -113,6 +242,7 @@ let baseConfig = {
   dictInputs: __clone(fcDictInputs),
   refInputs: __clone(fcRefInputs),
   refInputConfigs: __clone(fcRefInputConfigs),
+  rules: [],
   icons: {
     iconExpandFacet: 'icon-chevron-up',
     iconCollapseFacet: 'icon-chevron-down',
@@ -122,9 +252,10 @@ let baseConfig = {
     iconEdit: 'icon-edit',
     iconDelete: 'icon-delete',
     iconDrag: 'icon-reorder'
-  }
+  },
+  ruleContext: {}
 };
-const UtFormConfig = {
+const UtFormConstructor = {
   config: {},
 
   init(formConfig) {
@@ -132,19 +263,19 @@ const UtFormConfig = {
 
     if (formConfig) {
       if (formConfig.inputs) {
-        this.mergeInputsInMap(this.config.inputs, formConfig.inputs);
+        __mergeInputsInMap(this.config.inputs, formConfig.inputs);
       }
 
       if (formConfig.primitiveInputs) {
-        this.mergeInputInMapOfArrays(this.config.primitiveInputs, formConfig.primitiveInputs);
+        __mergeInputInMapOfArrays(this.config.primitiveInputs, formConfig.primitiveInputs);
       }
 
       if (formConfig.dictInputs) {
-        this.mergeInputsInArray(this.config.dictInputs, formConfig.dictInputs);
+        __mergeInputsInArray(this.config.dictInputs, formConfig.dictInputs);
       }
 
       if (formConfig.refInputs) {
-        this.mergeInputInMapOfArrays(this.config.refInputs, formConfig.refInputs);
+        __mergeInputInMapOfArrays(this.config.refInputs, formConfig.refInputs);
       }
 
       if (formConfig.refInputConfigs) {
@@ -154,45 +285,15 @@ const UtFormConfig = {
       if (formConfig.icons) {
         this.config.icons = __assign(this.config.icons, formConfig.icons);
       }
-    }
-  },
 
-  mergeInputInMapOfArrays(inputs, formConfigInputs) {
-    for (let dataType in formConfigInputs) {
-      let foundInputs = inputs[dataType];
-
-      if (foundInputs) {
-        this.mergeInputsInArray(foundInputs, formConfigInputs[dataType]);
-      } else {
-        inputs[dataType] = formConfigInputs[dataType];
+      if (formConfig.rules) {
+        this.config.rules = formConfig.rules;
       }
-    }
-  },
 
-  mergeInputsInMap(inputs, formConfigInputs) {
-    for (let name in formConfigInputs) {
-      inputs[name] = __assign(inputs[name] ? inputs[name] : {}, formConfigInputs[name] ? formConfigInputs[name] : {});
-    }
-  },
-
-  mergeInputsInArray(inputs, formConfigInputs) {
-    formConfigInputs.forEach(input => {
-      let index = inputs.findIndex(item => item.name === input.name);
-
-      if (index >= 0) {
-        inputs[index] = input;
-      } else {
-        inputs.push(input);
+      if (formConfig.ruleContext) {
+        this.config.ruleContext = formConfig.ruleContext;
       }
-    });
-  },
-
-  getAllInputTypes() {
-    return this.config.inputs;
-  },
-
-  getAllDictInputs() {
-    return this.config.dictInputs;
+    }
   },
 
   getInputTypes(field) {
@@ -216,18 +317,21 @@ const UtFormConfig = {
 
     if (field.ref && this.config.refInputs[field.ref]) {
       input = __clone(this.config.refInputs[field.ref][0]);
-      this.applyDefaultProps(input);
+
+      __applyDefaultProps(input);
 
       if (this.config.refInputConfigs[field.ref] && this.config.refInputConfigs[field.ref][input.name]) {
-        this.applyRefProps(input, this.config.refInputConfigs[field.ref][input.name]);
+        __applyRefProps(input, this.config.refInputConfigs[field.ref][input.name]);
       }
     } else if (field.dict) {
       input = __clone(this.config.dictInputs[0]);
       input.props.dict.default = field.ref;
-      this.applyDefaultProps(input);
+
+      __applyDefaultProps(input);
     } else {
       input = __clone(this.config.primitiveInputs[field.type][0]);
-      this.applyDefaultProps(input);
+
+      __applyDefaultProps(input);
     }
 
     return input;
@@ -237,47 +341,47 @@ const UtFormConfig = {
     let input = JSON.parse(JSON.stringify(this.config.inputs[name]));
 
     if (field.ref && this.config.refInputs[field.ref]) {
-      this.applyDefaultProps(input);
+      __applyDefaultProps(input);
 
       if (this.config.refInputConfigs[field.ref] && this.config.refInputConfigs[field.ref][input.name]) {
-        this.applyRefProps(input, this.config.refInputConfigs[field.ref][input.name]);
+        __applyRefProps(input, this.config.refInputConfigs[field.ref][input.name]);
       }
     } else if (field.dict) {
       input.props.dict.default = field.ref;
-      this.applyDefaultProps(input);
+
+      __applyDefaultProps(input);
     } else {
-      this.applyDefaultProps(input);
+      __applyDefaultProps(input);
     }
 
+    input.propsData['ref'] = field.name;
     return input;
   },
 
-  applyDefaultProps(input) {
-    for (let propName in input.props) {
-      input.propsData[propName] = input.props[propName].default;
-    }
+  getAvailableFieldRules(field) {
+    return this.config.rules.filter(rule => {
+      return !rule.fields || rule.fields.length === 0 || rule.fields.indexOf(field.name) >= 0;
+    });
   },
 
-  applyRefProps(input, refConfig) {
-    if (refConfig !== null && refConfig !== void 0 && refConfig.propsData) {
-      for (let propName in refConfig.propsData) {
-        input.propsData[propName] = refConfig.propsData[propName];
-      }
-    }
+  getRuleContext() {
+    return this.config.ruleContext;
   },
 
-  parseFacets(formConfig) {
-    let facets = [];
-    formConfig.sections.every(section => {
-      section.columns.every(c => {
-        c.fields.forEach(f => {
-          if (!(facets.indexOf(f.facet) >= 0)) {
-            facets.push(f.facet);
-          }
-        });
-      });
-    });
-    return facets;
+  runRule(context, script) {
+    let appendScript = `
+            var doc = this.form.doc;
+            var form = this.form;
+            var event = this.event;
+            var eventName = this.eventName;
+            
+        `;
+
+    let func = function (script) {
+      return eval(script);
+    };
+
+    func.call(context, appendScript + script);
   }
 
 };
@@ -301,7 +405,7 @@ const UtFormConfig = {
 //
 //
 //
-var script$4 = {
+var script$5 = {
   name: 'DocTemplateSectionModal',
   props: {
     section: Object,
@@ -435,10 +539,10 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
 }
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$5 = script$5;
 /* template */
 
-var __vue_render__$4 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -486,19 +590,19 @@ var __vue_render__$4 = function () {
   })], 1)], 1)], 1)], 1)], 1);
 };
 
-var __vue_staticRenderFns__$4 = [];
+var __vue_staticRenderFns__$5 = [];
 /* style */
 
-const __vue_inject_styles__$4 = undefined;
+const __vue_inject_styles__$5 = undefined;
 /* scoped */
 
-const __vue_scope_id__$4 = undefined;
+const __vue_scope_id__$5 = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$4 = undefined;
+const __vue_module_identifier__$5 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$4 = false;
+const __vue_is_functional_template__$5 = false;
 /* style inject */
 
 /* style inject SSR */
@@ -506,9 +610,9 @@ const __vue_is_functional_template__$4 = false;
 /* style inject shadow dom */
 
 const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$4,
-  staticRenderFns: __vue_staticRenderFns__$4
-}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
+  render: __vue_render__$5,
+  staticRenderFns: __vue_staticRenderFns__$5
+}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, false, undefined, undefined, undefined);
 
 var DocTemplateSectionModal = __vue_component__$6;
 
@@ -5901,7 +6005,7 @@ if (typeof window !== "undefined" && "Vue" in window) {
 });
 
 //
-var script$3 = {
+var script$4 = {
   name: 'DocTemplateFacetList',
   components: {
     draggable: vuedraggable_umd
@@ -5923,11 +6027,11 @@ var script$3 = {
 
   computed: {
     iconExpandFacet() {
-      return UtFormConfig.config.icons.iconExpandFacet;
+      return UtFormConstructor.config.icons.iconExpandFacet;
     },
 
     iconCollapseFacet() {
-      return UtFormConfig.config.icons.iconCollapseFacet;
+      return UtFormConstructor.config.icons.iconCollapseFacet;
     }
 
   },
@@ -5944,7 +6048,7 @@ var script$3 = {
   methods: {
     onFieldCloned(cloneField) {
       let field = JSON.parse(JSON.stringify(cloneField));
-      field.input = UtFormConfig.getDefaultInput(field);
+      field.input = UtFormConstructor.getDefaultInput(field);
       return field;
     },
 
@@ -5993,10 +6097,10 @@ var script$3 = {
 };
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$4 = script$4;
 /* template */
 
-var __vue_render__$3 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6027,18 +6131,17 @@ var __vue_render__$3 = function () {
       key: facet.name,
       staticClass: "rb-facet"
     }, [_c('h6', {
-      staticClass: "rb-facet-label d-flex"
+      staticClass: "rb-facet-label d-flex cursor-pointer",
+      on: {
+        "click": function ($event) {
+          facet.expanded = !facet.expanded;
+        }
+      }
     }, [_c('rb-text', {
       staticClass: "flex-fill"
     }, [_vm._v(_vm._s(facet.labelRu))]), _vm._v(" "), _c('rb-icon', {
-      staticClass: "cursor-pointer",
       attrs: {
         "icon": facet.expanded ? _vm.iconCollapseFacet : _vm.iconExpandFacet
-      },
-      on: {
-        "click": function ($event) {
-          facet.expanded = !facet.expanded;
-        }
       }
     })], 1), _vm._v(" "), facet.expanded ? _c('b-list-group', [_c('draggable', {
       attrs: {
@@ -6072,19 +6175,19 @@ var __vue_render__$3 = function () {
   }), 0)], 1);
 };
 
-var __vue_staticRenderFns__$3 = [];
+var __vue_staticRenderFns__$4 = [];
 /* style */
 
-const __vue_inject_styles__$3 = undefined;
+const __vue_inject_styles__$4 = undefined;
 /* scoped */
 
-const __vue_scope_id__$3 = undefined;
+const __vue_scope_id__$4 = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$3 = undefined;
+const __vue_module_identifier__$4 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$3 = false;
+const __vue_is_functional_template__$4 = false;
 /* style inject */
 
 /* style inject SSR */
@@ -6092,123 +6195,820 @@ const __vue_is_functional_template__$3 = false;
 /* style inject shadow dom */
 
 const __vue_component__$5 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$3,
-  staticRenderFns: __vue_staticRenderFns__$3
-}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
+  render: __vue_render__$4,
+  staticRenderFns: __vue_staticRenderFns__$4
+}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, false, undefined, undefined, undefined);
 
 var DocTemplateFacetList = __vue_component__$5;
 
-//
-var script$2 = {
-  name: 'DocTemplateFieldSidebar',
-  props: {
-    value: {
-      type: Object,
-      default: null
-    },
-    visible: {
-      type: Boolean,
-      default: null
-    }
-  },
+const rnds8Pool = new Uint8Array(256); // # of random values to pre-allocate
 
-  data() {
-    return {
-      innerVisible: null,
-      field: null,
-      currentInputName: null
-    };
-  },
+let poolPtr = rnds8Pool.length;
+function rng() {
+  if (poolPtr > rnds8Pool.length - 16) {
+    crypto.randomFillSync(rnds8Pool);
+    poolPtr = 0;
+  }
 
-  computed: {
-    inputOptions() {
-      return this.field ? UtFormConfig.getInputTypes(this.field) : [];
-    },
+  return rnds8Pool.slice(poolPtr, poolPtr += 16);
+}
 
-    iconCloseSidebar() {
-      return UtFormConfig.config.icons.iconCloseFieldSidebar;
-    },
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
 
-    iconOpenSidebar() {
-      return UtFormConfig.config.icons.iconOpenFieldSidebar;
-    }
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
 
-  },
-  watch: {
-    visible() {
-      this.innerVisible = this.visible;
-    },
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
 
-    value() {
-      this.field = this.value;
+const byteToHex = [];
 
-      if (this.field && this.field.input) {
-        this.currentInputName = this.field.input.name;
-      }
-    },
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
 
-    field() {
-      this.$emit('input', this.field);
-      this.$emit('change', this.field);
-    },
+function stringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  const uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
 
-    currentInputName() {
-      this.field.input = UtFormConfig.getInputTypeByName(this.currentInputName, this.field);
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
     }
 
-  },
-  methods: {
-    hide() {
-      this.innerVisible = false;
-      this.$emit('hide');
-    },
+    return buf;
+  }
 
-    getPropInputType(prop, propName) {
-      if (prop.type === 'string') {
-        return 'b-form-input';
-      } else {
-        return 'rb-boolean-single-option-input';
-      }
-    },
+  return stringify(rnds);
+}
 
-    getPropInputPropData(prop, propName) {
-      if (prop.type === 'string') {
-        return {
-          type: 'text'
-        };
-      } else {
-        return {};
+//
+var script$3 = {
+  name: 'DocForm',
+  props: {
+    formConfig: Object,
+    applyDefaultValues: {
+      type: Boolean,
+      default: true
+    },
+    doc: {
+      type: Object,
+      default: () => ({})
+    },
+    validationState: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    onEventFired(eventName, event, field) {
+      if (field.rules) {
+        field.rules.forEach(rule => {
+          if (rule.event === eventName && rule.script) {
+            let ruleContext = UtFormConstructor.getRuleContext();
+            ruleContext.form = this;
+            ruleContext.event = event;
+            ruleContext.eventName = eventName;
+            UtFormConstructor.runRule(ruleContext, rule.script);
+          }
+        });
       }
     }
 
   },
 
   created() {
-    this.innerVisible = this.visible;
-    this.field = this.value;
-
-    if (this.field && this.field.input) {
-      this.currentInputName = this.field.input.name;
+    if (this.applyDefaultValues) {
+      this.formConfig.sections.forEach(r => {
+        r.columns.forEach(c => {
+          c.fields.forEach(f => {
+            this.$set(this.doc, f.name, f.defaultValue == null ? null : f.defaultValue);
+          });
+        });
+      });
     }
   }
 
 };
 
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$3 = script$3;
 /* template */
 
-var __vue_render__$2 = function () {
+var __vue_render__$3 = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
 
   var _c = _vm._self._c || _h;
 
-  return _c('b-sidebar', {
-    staticClass: "rb-doc-template-field-sidebar",
-    attrs: {
-      "right": "",
+  return _c('b-form', {
+    staticClass: "rb-doc-form"
+  }, _vm._l(_vm.formConfig.sections, function (section) {
+    return _c('div', {
+      key: section.labelRu,
+      staticClass: "rb-form-section"
+    }, [_c('h4', [_vm._v(_vm._s(section.labelRu))]), _vm._v(" "), _c('div', {
+      staticClass: "d-flex flex-row"
+    }, _vm._l(section.columns, function (column) {
+      return _c('div', {
+        key: column.index,
+        staticClass: "rb-form-column"
+      }, [_vm._l(column.fields, function (field) {
+        return [field.visible ? _c('b-form-row', {
+          key: field.name
+        }, [_c('b-col', {
+          attrs: {
+            "lg": "12"
+          }
+        }, [_c('b-form-group', {
+          ref: "inputContainer",
+          refInFor: true,
+          attrs: {
+            "label": field.labelRu
+          }
+        }, [_c(field.input.type, _vm._b({
+          ref: field.name,
+          refInFor: true,
+          tag: "component",
+          attrs: {
+            "disabled": !field.editable,
+            "state": _vm.validationState[field.name]
+          },
+          on: {
+            "input": function ($event) {
+              return _vm.onEventFired('input', $event, field);
+            },
+            "change": function ($event) {
+              return _vm.onEventFired('change', $event, field);
+            },
+            "click": function ($event) {
+              return _vm.onEventFired('click', $event, field);
+            }
+          },
+          model: {
+            value: _vm.doc[field.name],
+            callback: function ($$v) {
+              _vm.$set(_vm.doc, field.name, $$v);
+            },
+            expression: "doc[field.name]"
+          }
+        }, 'component', field.input.propsData, false))], 1)], 1)], 1) : _vm._e()];
+      })], 2);
+    }), 0)]);
+  }), 0);
+};
+
+var __vue_staticRenderFns__$3 = [];
+/* style */
+
+const __vue_inject_styles__$3 = undefined;
+/* scoped */
+
+const __vue_scope_id__$3 = undefined;
+/* module identifier */
+
+const __vue_module_identifier__$3 = undefined;
+/* functional template */
+
+const __vue_is_functional_template__$3 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$4 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$3,
+  staticRenderFns: __vue_staticRenderFns__$3
+}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);
+
+var DocForm = __vue_component__$4;
+
+//
+var script$2 = {
+  name: 'FieldRuleFormModal',
+  components: {
+    DocForm
+  },
+  props: {
+    field: Object,
+    rule: Object,
+    formConfig: Object,
+    mode: {
+      type: String,
+      default: 'ins'
+    },
+    onAfterOk: Function
+  },
+
+  data() {
+    return {
+      id: 'rb-field-rule-form-modal',
+      state: this.getDefaultState(),
+      innerFormConfig: null,
+      innerRule: null
+    };
+  },
+
+  computed: {
+    title() {
+      return this.mode === 'ins' ? 'Добавление правила' : 'Редактирование правила';
+    },
+
+    fields() {
+      return UtFormConfig.getFields(this.formConfig);
+    },
+
+    rulePresets() {
+      return UtFormConstructor.getAvailableFieldRules(this.field);
+    }
+
+  },
+  watch: {
+    formConfig() {
+      this.copyToInnerFormConfig();
+    },
+
+    rule() {
+      if (this.rule) {
+        this.innerRule = this.rule;
+      } else {
+        this.innerRule = this.getDefaultRule();
+      }
+    }
+
+  },
+  methods: {
+    validateFields(fieldName) {
+      let fields = fieldName ? [fieldName] : ['name', 'event', 'script'];
+      fields.forEach(field => {
+        if (!this.innerRule[field]) {
+          this.state[field] = false;
+          this.state[`${field}_feedback`] = 'Заполните название';
+        } else {
+          this.state[field] = true;
+          this.state[`${field}_feedback`] = null;
+        }
+      });
+    },
+
+    copyToInnerFormConfig() {
+      this.innerFormConfig = JSON.parse(JSON.stringify(this.formConfig));
+    },
+
+    applyRuleToInnerFormConfig() {
+      if (this.innerFormConfig) {
+        let foundRule = UtFormConfig.findRule(this.innerRule.id, this.innerFormConfig);
+
+        if (!foundRule) {
+          let foundField = UtFormConfig.findField(this.field.name, this.innerFormConfig);
+
+          if (foundField) {
+            foundField.rules = foundField.rules ? foundField.rules : [];
+            foundField.rules.push(this.rule);
+          }
+        } else {
+          Object.assign(foundRule, this.innerRule);
+        }
+      }
+    },
+
+    onActivateTab(index) {
+      if (index > 0) {
+        this.copyToInnerFormConfig();
+        this.applyRuleToInnerFormConfig();
+      }
+    },
+
+    getDefaultState() {
+      return {
+        name: null,
+        event: null,
+        script: null
+      };
+    },
+
+    getDefaultRule() {
+      return {
+        id: v4(),
+        name: null,
+        event: null,
+        script: null
+      };
+    },
+
+    resetModal() {
+      this.state = this.getDefaultState();
+      this.innerRule = null;
+    },
+
+    addVariableToScript(varName) {
+      let r = this.innerRule;
+      r.script = r.script ? r.script + varName : varName;
+    },
+
+    addSetVariableToScript(field) {
+      let r = this.innerRule;
+      let setVariableScript = `doc['${field.name}'] = Значение;`;
+      r.script = r.script ? r.script + setVariableScript : setVariableScript;
+    },
+
+    addCallInputFunction(field) {
+      let r = this.innerRule;
+      let setVariableScript = `form.$refs['${field.name}'].Название функции();`;
+      r.script = r.script ? r.script + setVariableScript : setVariableScript;
+    },
+
+    onRuleSelected(ruleName) {
+      let rule = this.rulePresets.find(rule => rule.name === ruleName);
+
+      if (rule) {
+        Object.assign(this.innerRule, rule);
+        this.innerRule.script = this.innerRule.script.trim();
+      }
+    },
+
+    onOk() {
+      this.validateFields();
+
+      if (this.state.name && this.state.script) {
+        if (this.onAfterOk) {
+          this.onAfterOk(this.innerRule);
+        }
+
+        this.$nextTick(() => {
+          this.resetModal();
+          this.$bvModal.hide(this.id);
+        });
+      }
+    }
+
+  },
+
+  created() {
+    this.copyToInnerFormConfig();
+  }
+
+};
+
+/* script */
+const __vue_script__$2 = script$2;
+/* template */
+
+var __vue_render__$2 = function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('b-modal', {
+    attrs: {
+      "id": _vm.id,
+      "title": _vm.title,
+      "modal-class": "rb-field-rule-form-modal",
+      "size": "lg",
+      "ok-title": "Сохранить правило",
+      "cancel-variant": "outline-gray",
+      "cancel-title": "Отмена"
+    },
+    on: {
+      "ok": function ($event) {
+        $event.preventDefault();
+        return _vm.onOk.apply(null, arguments);
+      }
+    }
+  }, [_c('b-card', {
+    attrs: {
+      "no-body": ""
+    }
+  }, [_c('b-tabs', {
+    attrs: {
+      "card": ""
+    },
+    on: {
+      "activate-tab": _vm.onActivateTab
+    }
+  }, [_c('b-tab', {
+    attrs: {
+      "title": "Правило",
+      "active": ""
+    }
+  }, [_vm.innerRule ? _c('b-form', [_c('b-form-row', [_c('b-col', {
+    attrs: {
+      "log": "12"
+    }
+  }, [_vm.rulePresets.length > 0 ? _c('b-form-group', {
+    attrs: {
+      "label": "Выбрать"
+    },
+    scopedSlots: _vm._u([{
+      key: "description",
+      fn: function () {
+        return [_vm._v("\n                                    Выберите готовое правило из списка и если нужно, измените\n                                ")];
+      },
+      proxy: true
+    }], null, false, 3419583775)
+  }, [_vm._v(" "), _c('b-form-select', {
+    on: {
+      "input": function ($event) {
+        return _vm.onRuleSelected($event);
+      }
+    }
+  }, _vm._l(_vm.rulePresets, function (r) {
+    return _c('b-form-select-option', {
+      key: r.name,
+      attrs: {
+        "value": r.name
+      }
+    }, [_vm._v("\n                                        " + _vm._s(r.name) + "\n                                    ")]);
+  }), 1)], 1) : _vm._e()], 1), _vm._v(" "), _c('b-col', {
+    attrs: {
+      "lg": "12"
+    }
+  }, [_c('b-form-group', {
+    attrs: {
+      "label": "Название"
+    },
+    scopedSlots: _vm._u([{
+      key: "description",
+      fn: function () {
+        return [_vm._v("\n                                    Задайте уникальное название, чтобы отличать правило в списке\n                                ")];
+      },
+      proxy: true
+    }], null, false, 3665649506)
+  }, [_vm._v(" "), _c('b-form-input', {
+    attrs: {
+      "state": _vm.state.name,
+      "invalid-feedback": _vm.state.name_feedback
+    },
+    model: {
+      value: _vm.innerRule.name,
+      callback: function ($$v) {
+        _vm.$set(_vm.innerRule, "name", $$v);
+      },
+      expression: "innerRule.name"
+    }
+  })], 1)], 1), _vm._v(" "), _c('b-col', {
+    attrs: {
+      "lg": "12"
+    }
+  }, [_c('b-form-group', {
+    attrs: {
+      "label": "Событие"
+    },
+    scopedSlots: _vm._u([{
+      key: "description",
+      fn: function () {
+        return [_vm._v("\n                                    При возникновении этого события будет выполняться правило\n                                ")];
+      },
+      proxy: true
+    }], null, false, 1461632685)
+  }, [_vm._v(" "), _c('b-form-select', {
+    attrs: {
+      "state": _vm.state.event,
+      "invalid-feedback": _vm.state.event_feedback
+    },
+    model: {
+      value: _vm.innerRule.event,
+      callback: function ($$v) {
+        _vm.$set(_vm.innerRule, "event", $$v);
+      },
+      expression: "innerRule.event"
+    }
+  }, [_c('b-form-select-option', {
+    attrs: {
+      "value": 'input'
+    }
+  }, [_vm._v("\n                                        Ввод значения\n                                    ")]), _vm._v(" "), _c('b-form-select-option', {
+    attrs: {
+      "value": 'change'
+    }
+  }, [_vm._v("\n                                        Изменение значения\n                                    ")]), _vm._v(" "), _c('b-form-select-option', {
+    attrs: {
+      "value": 'click'
+    }
+  }, [_vm._v("\n                                        Клик\n                                    ")])], 1)], 1)], 1), _vm._v(" "), _c('b-col', {
+    attrs: {
+      "lg": "12"
+    }
+  }, [_c('b-form-group', {
+    attrs: {
+      "label": "Скрипт"
+    },
+    scopedSlots: _vm._u([{
+      key: "description",
+      fn: function () {
+        return [_vm._v("\n                                    Здесь указывается скрипт правила. Скрипт должен быть написан на языке\n                                    javascript\n                                ")];
+      },
+      proxy: true
+    }], null, false, 2031959747)
+  }, [_vm._v(" "), _c('div', {
+    staticClass: "rb-script-input"
+  }, [_c('b-button-toolbar', [_c('b-dropdown', {
+    staticClass: "mx-1",
+    attrs: {
+      "text": "Переменные",
+      "variant": "outline-secondary",
+      "size": "sm"
+    }
+  }, [_c('b-dropdown-item', {
+    on: {
+      "click": function ($event) {
+        return _vm.addVariableToScript('doc');
+      }
+    }
+  }, [_vm._v("\n                                                Документ\n                                            ")]), _vm._v(" "), _c('b-dropdown-item', {
+    on: {
+      "click": function ($event) {
+        return _vm.addVariableToScript('form');
+      }
+    }
+  }, [_vm._v("\n                                                Форма\n                                            ")]), _vm._v(" "), _c('b-dropdown-item', {
+    on: {
+      "click": function ($event) {
+        return _vm.addVariableToScript('event');
+      }
+    }
+  }, [_vm._v("\n                                                Значение события\n                                            ")])], 1), _vm._v(" "), _c('b-dropdown', {
+    staticClass: "mx-1",
+    attrs: {
+      "text": "Задать значение",
+      "variant": "outline-secondary",
+      "size": "sm"
+    }
+  }, _vm._l(_vm.fields, function (f) {
+    return _vm.fields ? _c('b-dropdown-item', {
+      key: f.name,
+      on: {
+        "click": function ($event) {
+          return _vm.addSetVariableToScript(f);
+        }
+      }
+    }, [_vm._v("\n                                                " + _vm._s(f.name) + "\n                                            ")]) : _vm._e();
+  }), 1), _vm._v(" "), _c('b-dropdown', {
+    staticClass: "mx-1",
+    attrs: {
+      "text": "Вызвать функцию инпута",
+      "variant": "outline-secondary",
+      "size": "sm"
+    }
+  }, _vm._l(_vm.fields, function (f) {
+    return _vm.fields ? _c('b-dropdown-item', {
+      key: f.name,
+      on: {
+        "click": function ($event) {
+          return _vm.addCallInputFunction(f);
+        }
+      }
+    }, [_vm._v("\n                                                " + _vm._s(f.name) + "\n                                            ")]) : _vm._e();
+  }), 1)], 1), _vm._v(" "), _c('b-form-textarea', {
+    attrs: {
+      "state": _vm.state.script,
+      "invalid-feedback": _vm.state.script_feedback,
+      "rows": "8"
+    },
+    model: {
+      value: _vm.innerRule.script,
+      callback: function ($$v) {
+        _vm.$set(_vm.innerRule, "script", $$v);
+      },
+      expression: "innerRule.script"
+    }
+  })], 1)])], 1)], 1)], 1) : _vm._e()], 1), _vm._v(" "), _vm.innerFormConfig ? _c('b-tab', {
+    attrs: {
+      "title": "Протестировать правило"
+    }
+  }, [_c('doc-form', {
+    attrs: {
+      "form-config": _vm.innerFormConfig
+    }
+  })], 1) : _vm._e()], 1)], 1)], 1);
+};
+
+var __vue_staticRenderFns__$2 = [];
+/* style */
+
+const __vue_inject_styles__$2 = undefined;
+/* scoped */
+
+const __vue_scope_id__$2 = undefined;
+/* module identifier */
+
+const __vue_module_identifier__$2 = undefined;
+/* functional template */
+
+const __vue_is_functional_template__$2 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$3 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$2,
+  staticRenderFns: __vue_staticRenderFns__$2
+}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
+
+var FieldRuleFormModal = __vue_component__$3;
+
+//
+var script$1 = {
+  name: 'DocTemplateFieldSidebar',
+  components: {
+    FieldRuleFormModal
+  },
+  props: {
+    value: {
+      type: Object,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: null
+    },
+    formConfig: Object
+  },
+
+  data() {
+    return {
+      innerVisible: null,
+      field: null,
+      currentInputName: null,
+      modalId: 'rb-field-rule-form-modal',
+      ruleModalCfg: {
+        rule: {},
+        mode: 'ins'
+      },
+      rulesHash: v4()
+    };
+  },
+
+  computed: {
+    inputOptions() {
+      return this.field ? UtFormConstructor.getInputTypes(this.field) : [];
+    },
+
+    iconCloseSidebar() {
+      return UtFormConstructor.config.icons.iconCloseFieldSidebar;
+    },
+
+    iconOpenSidebar() {
+      return UtFormConstructor.config.icons.iconOpenFieldSidebar;
+    },
+
+    iconAdd() {
+      return UtFormConstructor.config.icons.iconAdd;
+    },
+
+    rules() {
+      return UtFormConstructor.getAvailableFieldRules(this.field);
+    }
+
+  },
+  watch: {
+    visible() {
+      this.innerVisible = this.visible;
+    },
+
+    value() {
+      this.field = this.value;
+
+      if (this.field && this.field.input) {
+        this.currentInputName = this.field.input.name;
+      }
+    },
+
+    field() {
+      this.$emit('input', this.field);
+      this.$emit('change', this.field);
+    },
+
+    currentInputName() {
+      this.field.input = UtFormConstructor.getInputTypeByName(this.currentInputName, this.field);
+    }
+
+  },
+  methods: {
+    hide() {
+      this.innerVisible = false;
+      this.$emit('hide');
+    },
+
+    getPropInputType(prop, propName) {
+      if (prop.type === 'string') {
+        return 'b-form-input';
+      } else {
+        return 'rb-boolean-single-option-input';
+      }
+    },
+
+    getPropInputPropData(prop, propName) {
+      if (prop.type === 'string') {
+        return {
+          type: 'text'
+        };
+      } else {
+        return {};
+      }
+    },
+
+    addRule() {
+      this.ruleModalCfg = {
+        mode: 'ins',
+        rule: {
+          name: null,
+          script: null
+        },
+        onAfterOk: rule => {
+          this.field.rules = this.field.rules ? this.field.rules : [];
+          this.field.rules.push({ ...rule
+          });
+          this.rulesHash = v4();
+        }
+      };
+      this.$bvModal.show(this.modalId);
+    },
+
+    editRule(rule, event) {
+      if (event.target.classList && event.target.classList.contains('rb-remove-rule')) {
+        return;
+      }
+
+      this.ruleModalCfg = {
+        mode: 'upd',
+        rule: { ...rule
+        },
+        onAfterOk: modalRule => {
+          Object.assign(rule, modalRule);
+        }
+      };
+      this.$bvModal.show(this.modalId);
+    },
+
+    removeRule(rule) {
+      let index = this.field.rules.findIndex(r => r.id === rule.id);
+
+      if (index >= 0) {
+        this.field.rules.splice(index, 1);
+      }
+
+      this.rulesHash = v4();
+    }
+
+  },
+
+  created() {
+    this.innerVisible = this.visible;
+    this.field = this.value;
+
+    if (this.field && this.field.input) {
+      this.currentInputName = this.field.input.name;
+    }
+  }
+
+};
+
+/* script */
+const __vue_script__$1 = script$1;
+/* template */
+
+var __vue_render__$1 = function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('b-sidebar', {
+    staticClass: "rb-doc-template-field-sidebar",
+    attrs: {
+      "right": "",
       "bg-variant": "white",
       "shadow": ""
     },
@@ -6389,7 +7189,7 @@ var __vue_render__$2 = function () {
     staticClass: "rb-form-section"
   }, [_c('div', {
     staticClass: "rb-title"
-  }, [_vm._v("\n                Значение по-умолчанию\n            ")]), _vm._v(" "), _c('b-form-row', [_c('b-col', {
+  }, [_vm._v("Значение по-умолчанию")]), _vm._v(" "), _c('b-form-row', [_c('b-col', {
     attrs: {
       "lg": "12"
     }
@@ -6407,37 +7207,85 @@ var __vue_render__$2 = function () {
       },
       expression: "field.defaultValue"
     }
-  }, 'component', _vm.field.input.propsData, false))], 1)], 1)], 1)], 1) : _vm._e()]) : _vm._e()], 1);
+  }, 'component', _vm.field.input.propsData, false))], 1)], 1)], 1)], 1) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "rb-form-section"
+  }, [_c('div', {
+    staticClass: "rb-title"
+  }, [_vm._v("Правила")]), _vm._v(" "), _c('b-list-group', {
+    attrs: {
+      "data-hash": _vm.rulesHash
+    }
+  }, [_vm._l(_vm.field.rules, function (rule) {
+    return _c('b-list-group-item', {
+      key: rule.id,
+      staticClass: "cursor-pointer d-flex justify-content-between align-items-center",
+      attrs: {
+        "data-hash": _vm.rulesHash
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.editRule(rule, $event);
+        }
+      }
+    }, [_c('rb-text', [_vm._v(_vm._s(rule.name))]), _vm._v(" "), _c('rb-icon', {
+      staticClass: "rb-remove-rule",
+      attrs: {
+        "icon": "icon-close"
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.removeRule(rule);
+        }
+      }
+    })], 1);
+  }), _vm._v(" "), _c('b-list-group-item', {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": _vm.addRule
+    }
+  }, [_c('rb-icon', {
+    attrs: {
+      "icon": _vm.iconAdd
+    }
+  }), _vm._v(" "), _c('rb-text', [_vm._v("Добавить правило ...")])], 1)], 2)], 1)]) : _vm._e(), _vm._v(" "), _c('field-rule-form-modal', {
+    attrs: {
+      "rule": _vm.ruleModalCfg.rule,
+      "form-config": _vm.formConfig,
+      "field": _vm.field,
+      "mode": _vm.ruleModalCfg.mode,
+      "on-after-ok": _vm.ruleModalCfg.onAfterOk
+    }
+  })], 1);
 };
 
-var __vue_staticRenderFns__$2 = [];
+var __vue_staticRenderFns__$1 = [];
 /* style */
 
-const __vue_inject_styles__$2 = undefined;
+const __vue_inject_styles__$1 = undefined;
 /* scoped */
 
-const __vue_scope_id__$2 = undefined;
+const __vue_scope_id__$1 = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$2 = undefined;
+const __vue_module_identifier__$1 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$2 = false;
+const __vue_is_functional_template__$1 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$4 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$2,
-  staticRenderFns: __vue_staticRenderFns__$2
-}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);
+const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
 
-var DocTemplateFieldSidebar = __vue_component__$4;
+var DocTemplateFieldSidebar = __vue_component__$2;
 
 //
-var script$1 = {
+var script = {
   name: 'DocTemplateConstructor',
   components: {
     DocTemplateFacetList,
@@ -6479,24 +7327,28 @@ var script$1 = {
 
   computed: {
     iconAdd() {
-      return UtFormConfig.config.icons.iconAdd;
+      return UtFormConstructor.config.icons.iconAdd;
     },
 
     iconEdit() {
-      return UtFormConfig.config.icons.iconEdit;
+      return UtFormConstructor.config.icons.iconEdit;
     },
 
     iconDelete() {
-      return UtFormConfig.config.icons.iconDelete;
+      return UtFormConstructor.config.icons.iconDelete;
     },
 
     iconDrag() {
-      return UtFormConfig.config.icons.iconDrag;
+      return UtFormConstructor.config.icons.iconDrag;
     }
 
   },
   methods: {
-    showProperties(field) {
+    showProperties(field, event) {
+      if (event.target.classList && event.target.classList.contains('rb-remove-field')) {
+        return;
+      }
+
       this.sidebarVisible = true;
       this.sidebarField = field;
     },
@@ -6570,12 +7422,7 @@ var script$1 = {
       let index = newIndex != null ? newIndex : -1;
 
       if (index < 0) {
-        column.fields.every((f, i) => {
-          if (field.name === f.name) {
-            index = i;
-            return false;
-          }
-        });
+        index = column.fields.findIndex(f => field.name === f.name);
       }
 
       if (index >= 0) {
@@ -6632,10 +7479,10 @@ var script$1 = {
 };
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__ = script;
 /* template */
 
-var __vue_render__$1 = function () {
+var __vue_render__ = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6655,7 +7502,7 @@ var __vue_render__$1 = function () {
     staticClass: "rb-form-constructor flex-fill"
   }, [_c('div', {
     staticClass: "rb-constructor-toolbar d-flex flex-row"
-  }, [_c('h4', [_vm._v("Верстка документа")]), _vm._v(" "), _c('div', {
+  }, [_c('h4', [_vm._v("Добавить секцию: ")]), _vm._v(" "), _c('div', {
     staticClass: "rb-layout-buttons"
   }, [_c('b-button', {
     attrs: {
@@ -6667,7 +7514,7 @@ var __vue_render__$1 = function () {
         return _vm.addSection(1);
       }
     }
-  }, [_c('rb-text', [_vm._v("1 колонка")]), _vm._v(" "), _c('rb-icon', {
+  }, [_c('rb-text', [_vm._v("Секция с 1 колонкой")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
       "icon": _vm.iconAdd
     }
@@ -6681,7 +7528,7 @@ var __vue_render__$1 = function () {
         return _vm.addSection(2);
       }
     }
-  }, [_c('rb-text', [_vm._v("2 колонки")]), _vm._v(" "), _c('rb-icon', {
+  }, [_c('rb-text', [_vm._v("Секция с 2 колонками")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
       "icon": _vm.iconAdd
     }
@@ -6695,7 +7542,7 @@ var __vue_render__$1 = function () {
         return _vm.addSection(3);
       }
     }
-  }, [_c('rb-text', [_vm._v("3 колонки")]), _vm._v(" "), _c('rb-icon', {
+  }, [_c('rb-text', [_vm._v("Секция с 3 колонками")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
       "icon": _vm.iconAdd
     }
@@ -6797,7 +7644,7 @@ var __vue_render__$1 = function () {
           staticClass: "cursor-pointer",
           on: {
             "click": function ($event) {
-              return _vm.showProperties(field);
+              return _vm.showProperties(field, $event);
             }
           }
         }, [_c('b-col', {
@@ -6817,6 +7664,7 @@ var __vue_render__$1 = function () {
                   "icon": _vm.iconDrag
                 }
               }), _vm._v(" "), _c('rb-text', [_vm._v(_vm._s(field.labelRu))]), _vm._v(" "), _c('rb-icon', {
+                staticClass: "rb-remove-field",
                 attrs: {
                   "icon": _vm.iconDelete
                 },
@@ -6841,7 +7689,8 @@ var __vue_render__$1 = function () {
     }), 1)]);
   }), 1)], 1), _vm._v(" "), _c('doc-template-field-sidebar', {
     attrs: {
-      "visible": _vm.sidebarVisible
+      "visible": _vm.sidebarVisible,
+      "form-config": _vm.formConfig
     },
     on: {
       "hide": function ($event) {
@@ -6864,139 +7713,6 @@ var __vue_render__$1 = function () {
   })], 1)], 1);
 };
 
-var __vue_staticRenderFns__$1 = [];
-/* style */
-
-const __vue_inject_styles__$1 = undefined;
-/* scoped */
-
-const __vue_scope_id__$1 = undefined;
-/* module identifier */
-
-const __vue_module_identifier__$1 = undefined;
-/* functional template */
-
-const __vue_is_functional_template__$1 = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$1,
-  staticRenderFns: __vue_staticRenderFns__$1
-}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
-
-var __vue_component__$3 = __vue_component__$2;
-
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-var script = {
-  name: 'DocForm',
-  props: {
-    formConfig: Object
-  },
-
-  data() {
-    return {
-      doc: {
-        type: Object,
-        default: () => ({})
-      }
-    };
-  },
-
-  created() {
-    this.formConfig.sections.forEach(r => {
-      r.columns.forEach(c => {
-        c.fields.forEach(f => {
-          this.$set(this.doc, f.name, f.defaultValue == null ? null : f.defaultValue);
-        });
-      });
-    });
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-/* template */
-
-var __vue_render__ = function () {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('b-form', {
-    staticClass: "rb-doc-form"
-  }, _vm._l(_vm.formConfig.sections, function (section) {
-    return _c('div', {
-      key: section.labelRu,
-      staticClass: "rb-form-section"
-    }, [_c('h4', [_vm._v(_vm._s(section.labelRu))]), _vm._v(" "), _c('div', {
-      staticClass: "d-flex flex-row"
-    }, _vm._l(section.columns, function (column) {
-      return _c('div', {
-        key: column.index,
-        staticClass: "rb-form-column",
-        class: {
-          'rb-single-column': section.columnCount === 1
-        }
-      }, _vm._l(column.fields, function (field) {
-        return _c('b-form-row', {
-          key: field.name,
-          staticClass: "cursor-pointer"
-        }, [_c('b-col', {
-          attrs: {
-            "lg": "12"
-          }
-        }, [_c('b-form-group', {
-          ref: "inputContainer",
-          refInFor: true,
-          attrs: {
-            "label": field.labelRu
-          }
-        }, [_c(field.input.type, _vm._b({
-          tag: "component",
-          model: {
-            value: _vm.doc[field.name],
-            callback: function ($$v) {
-              _vm.$set(_vm.doc, field.name, $$v);
-            },
-            expression: "doc[field.name]"
-          }
-        }, 'component', field.input.propsData, false))], 1)], 1)], 1);
-      }), 1);
-    }), 0)]);
-  }), 0);
-};
-
 var __vue_staticRenderFns__ = [];
 /* style */
 
@@ -7028,11 +7744,13 @@ var __vue_component__$1 = __vue_component__;
 var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     UtFormConfig: UtFormConfig,
+    UtFormConstructor: UtFormConstructor,
     DocTemplateSectionModal: DocTemplateSectionModal,
     DocTemplateFacetList: DocTemplateFacetList,
     DocTemplateFieldSidebar: DocTemplateFieldSidebar,
-    DocTemplateConstructor: __vue_component__$3,
-    DocForm: __vue_component__$1
+    DocTemplateConstructor: __vue_component__$1,
+    FieldRuleFormModal: FieldRuleFormModal,
+    DocForm: DocForm
 });
 
 // Import vue components
@@ -7044,4 +7762,4 @@ const install = function installRbDocumentFormConstructor(Vue) {
   });
 }; // Create module definition for Vue.use()
 
-export { __vue_component__$1 as DocForm, __vue_component__$3 as DocTemplateConstructor, DocTemplateFacetList, DocTemplateFieldSidebar, DocTemplateSectionModal, UtFormConfig, install as default };
+export { DocForm, __vue_component__$1 as DocTemplateConstructor, DocTemplateFacetList, DocTemplateFieldSidebar, DocTemplateSectionModal, FieldRuleFormModal, UtFormConfig, UtFormConstructor, install as default };