rb-document-form-constructor 0.0.2 → 0.0.6

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

@@ -224,7 +224,17 @@ var baseConfig = {
   primitiveInputs: __clone(fcPrimitiveInputs),
   dictInputs: __clone(fcDictInputs),
   refInputs: __clone(fcRefInputs),
-  refInputConfigs: __clone(fcRefInputConfigs)
+  refInputConfigs: __clone(fcRefInputConfigs),
+  icons: {
+    iconExpandFacet: 'icon-chevron-up',
+    iconCollapseFacet: 'icon-chevron-down',
+    iconCloseFieldSidebar: 'icon-chevron-right',
+    iconOpenFieldSidebar: 'icon-chevron-left',
+    iconAdd: 'icon-add',
+    iconEdit: 'icon-edit',
+    iconDelete: 'icon-delete',
+    iconDrag: 'icon-reorder'
+  }
 };
 var UtFormConfig = {
   config: {},
@@ -251,6 +261,10 @@ var UtFormConfig = {
       if (formConfig.refInputConfigs) {
         this.config.refInputConfigs = formConfig.refInputConfigs;
       }
+
+      if (formConfig.icons) {
+        this.config.icons = _assign(this.config.icons, formConfig.icons);
+      }
     }
   },
   mergeInputInMapOfArrays: function mergeInputInMapOfArrays(inputs, formConfigInputs) {
@@ -367,7 +381,7 @@ var UtFormConfig = {
 //
 //
 //
-var script$3 = {
+var script$4 = {
   name: 'DocTemplateSectionModal',
   props: {
     section: Object,
@@ -492,10 +506,10 @@ var script$3 = {
     }
     return script;
 }/* script */
-var __vue_script__$3 = script$3;
+var __vue_script__$4 = script$4;
 /* template */
 
-var __vue_render__$3 = function __vue_render__() {
+var __vue_render__$4 = function __vue_render__() {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -543,31 +557,31 @@ var __vue_render__$3 = function __vue_render__() {
   })], 1)], 1)], 1)], 1)], 1);
 };
 
-var __vue_staticRenderFns__$3 = [];
+var __vue_staticRenderFns__$4 = [];
 /* style */
 
-var __vue_inject_styles__$3 = undefined;
+var __vue_inject_styles__$4 = undefined;
 /* scoped */
 
-var __vue_scope_id__$3 = undefined;
+var __vue_scope_id__$4 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$3 = "data-v-0dc54a8c";
+var __vue_module_identifier__$4 = "data-v-0dc54a8c";
 /* functional template */
 
-var __vue_is_functional_template__$3 = false;
+var __vue_is_functional_template__$4 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-var __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 __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);
 
-var DocTemplateSectionModal = __vue_component__$4;var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+var DocTemplateSectionModal = __vue_component__$6;var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
@@ -5949,7 +5963,7 @@ if (typeof window !== "undefined" && "Vue" in window) {
 /******/ })["default"];
 });
 
-});var script$2 = {
+});var script$3 = {
   name: 'DocTemplateFacetList',
   components: {
     draggable: vuedraggable_umd
@@ -5969,6 +5983,14 @@ if (typeof window !== "undefined" && "Vue" in window) {
       facetSearchStr: null
     };
   },
+  computed: {
+    iconExpandFacet: function iconExpandFacet() {
+      return UtFormConfig.config.icons.iconExpandFacet;
+    },
+    iconCollapseFacet: function iconCollapseFacet() {
+      return UtFormConfig.config.icons.iconCollapseFacet;
+    }
+  },
   watch: {
     facetSearchStr: function facetSearchStr() {
       this.findInFacets(this.facetSearchStr);
@@ -6023,10 +6045,10 @@ if (typeof window !== "undefined" && "Vue" in window) {
     this.handleFacetsProp();
   }
 };/* script */
-var __vue_script__$2 = script$2;
+var __vue_script__$3 = script$3;
 /* template */
 
-var __vue_render__$2 = function __vue_render__() {
+var __vue_render__$3 = function __vue_render__() {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6056,7 +6078,7 @@ var __vue_render__$2 = function __vue_render__() {
     }, [_vm._v(_vm._s(facet.labelRu))]), _vm._ssrNode(" "), _c('rb-icon', {
       staticClass: "cursor-pointer",
       attrs: {
-        "icon": "icon-chevron-" + (facet.expanded ? 'up' : 'down')
+        "icon": facet.expanded ? _vm.iconCollapseFacet : _vm.iconExpandFacet
       },
       on: {
         "click": function click($event) {
@@ -6095,32 +6117,32 @@ var __vue_render__$2 = function __vue_render__() {
   }), 0)], 2);
 };
 
-var __vue_staticRenderFns__$2 = [];
+var __vue_staticRenderFns__$3 = [];
 /* style */
 
-var __vue_inject_styles__$2 = undefined;
+var __vue_inject_styles__$3 = undefined;
 /* scoped */
 
-var __vue_scope_id__$2 = undefined;
+var __vue_scope_id__$3 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$2 = "data-v-148588d0";
+var __vue_module_identifier__$3 = "data-v-5594436b";
 /* functional template */
 
-var __vue_is_functional_template__$2 = false;
+var __vue_is_functional_template__$3 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-var __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 __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);
 
-var DocTemplateFacetList = __vue_component__$3;//
-var script$1 = {
+var DocTemplateFacetList = __vue_component__$5;//
+var script$2 = {
   name: 'DocTemplateFieldSidebar',
   props: {
     value: {
@@ -6142,6 +6164,12 @@ var script$1 = {
   computed: {
     inputOptions: function inputOptions() {
       return this.field ? UtFormConfig.getInputTypes(this.field) : [];
+    },
+    iconCloseSidebar: function iconCloseSidebar() {
+      return UtFormConfig.config.icons.iconCloseFieldSidebar;
+    },
+    iconOpenSidebar: function iconOpenSidebar() {
+      return UtFormConfig.config.icons.iconOpenFieldSidebar;
     }
   },
   watch: {
@@ -6194,10 +6222,10 @@ var script$1 = {
     }
   }
 };/* script */
-var __vue_script__$1 = script$1;
+var __vue_script__$2 = script$2;
 /* template */
 
-var __vue_render__$1 = function __vue_render__() {
+var __vue_render__$2 = function __vue_render__() {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6224,7 +6252,7 @@ var __vue_render__$1 = function __vue_render__() {
           }
         }, [_c('rb-icon', {
           attrs: {
-            "icon": _vm.innerVisible ? 'icon-chevron-right' : 'icon-chevron-left'
+            "icon": _vm.innerVisible ? _vm.iconCloseSidebar : _vm.iconOpenSidebar
           }
         })], 1), _vm._v(" "), _c('h4', [_vm._v("Редактор свойств")])];
       },
@@ -6409,31 +6437,31 @@ var __vue_render__$1 = function __vue_render__() {
   }, 'component', _vm.field.input.propsData, false))], 1)], 1)], 1)], 1) : _vm._e()]) : _vm._e()], 1);
 };
 
-var __vue_staticRenderFns__$1 = [];
+var __vue_staticRenderFns__$2 = [];
 /* style */
 
-var __vue_inject_styles__$1 = undefined;
+var __vue_inject_styles__$2 = undefined;
 /* scoped */
 
-var __vue_scope_id__$1 = undefined;
+var __vue_scope_id__$2 = undefined;
 /* module identifier */
 
-var __vue_module_identifier__$1 = "data-v-8fe1b46c";
+var __vue_module_identifier__$2 = "data-v-3dfc4527";
 /* functional template */
 
-var __vue_is_functional_template__$1 = false;
+var __vue_is_functional_template__$2 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-var __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__$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);
 
-var DocTemplateFieldSidebar = __vue_component__$2;var script = {
+var DocTemplateFieldSidebar = __vue_component__$4;var script$1 = {
   name: 'DocTemplateConstructor',
   components: {
     DocTemplateFacetList: DocTemplateFacetList,
@@ -6471,6 +6499,20 @@ var DocTemplateFieldSidebar = __vue_component__$2;var script = {
       }
     };
   },
+  computed: {
+    iconAdd: function iconAdd() {
+      return UtFormConfig.config.icons.iconAdd;
+    },
+    iconEdit: function iconEdit() {
+      return UtFormConfig.config.icons.iconEdit;
+    },
+    iconDelete: function iconDelete() {
+      return UtFormConfig.config.icons.iconDelete;
+    },
+    iconDrag: function iconDrag() {
+      return UtFormConfig.config.icons.iconDrag;
+    }
+  },
   methods: {
     showProperties: function showProperties(field) {
       this.sidebarVisible = true;
@@ -6595,10 +6637,10 @@ var DocTemplateFieldSidebar = __vue_component__$2;var script = {
     }
   }
 };/* script */
-var __vue_script__ = script;
+var __vue_script__$1 = script$1;
 /* template */
 
-var __vue_render__ = function __vue_render__() {
+var __vue_render__$1 = function __vue_render__() {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6626,7 +6668,7 @@ var __vue_render__ = function __vue_render__() {
     }
   }, [_c('rb-text', [_vm._v("1 колонка")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
-      "icon": "icon-add"
+      "icon": _vm.iconAdd
     }
   })], 1), _vm._ssrNode(" "), _c('b-button', {
     attrs: {
@@ -6640,7 +6682,7 @@ var __vue_render__ = function __vue_render__() {
     }
   }, [_c('rb-text', [_vm._v("2 колонки")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
-      "icon": "icon-add"
+      "icon": _vm.iconAdd
     }
   })], 1), _vm._ssrNode(" "), _c('b-button', {
     attrs: {
@@ -6654,7 +6696,7 @@ var __vue_render__ = function __vue_render__() {
     }
   }, [_c('rb-text', [_vm._v("3 колонки")]), _vm._v(" "), _c('rb-icon', {
     attrs: {
-      "icon": "icon-add"
+      "icon": _vm.iconAdd
     }
   })], 1)], 2)], 2), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"rb-constructor-body\">", "</div>", [_c('draggable', {
     attrs: {
@@ -6683,7 +6725,7 @@ var __vue_render__ = function __vue_render__() {
           return [_c('rb-icon', {
             staticClass: "cursor-pointer rb-row-drag-handle",
             attrs: {
-              "icon": "icon-reorder"
+              "icon": _vm.iconDrag
             }
           }), _vm._v(" "), _c('rb-text', {
             staticClass: "flex-fill",
@@ -6697,7 +6739,7 @@ var __vue_render__ = function __vue_render__() {
           }, [_c('rb-icon', {
             staticClass: "cursor-pointer",
             attrs: {
-              "icon": "icon-edit"
+              "icon": _vm.iconEdit
             },
             on: {
               "click": function click($event) {
@@ -6707,7 +6749,7 @@ var __vue_render__ = function __vue_render__() {
           }), _vm._v(" "), _c('rb-icon', {
             staticClass: "cursor-pointer",
             attrs: {
-              "icon": "icon-delete"
+              "icon": _vm.iconDelete
             },
             on: {
               "click": function click($event) {
@@ -6732,7 +6774,7 @@ var __vue_render__ = function __vue_render__() {
           "animation": 200,
           "group": "fields",
           "ghost-class": "rb-moving-item",
-          "handle": ".icon-reorder"
+          "handle": ".rb-field-drag-handle"
         },
         on: {
           "add": function add($event) {
@@ -6767,12 +6809,13 @@ var __vue_render__ = function __vue_render__() {
             key: "label",
             fn: function fn() {
               return [_c('rb-icon', {
+                staticClass: "rb-field-drag-handle",
                 attrs: {
-                  "icon": "icon-reorder"
+                  "icon": _vm.iconDrag
                 }
               }), _vm._v(" "), _c('rb-text', [_vm._v(_vm._s(field.labelRu))]), _vm._v(" "), _c('rb-icon', {
                 attrs: {
-                  "icon": "icon-delete"
+                  "icon": _vm.iconDelete
                 },
                 on: {
                   "click": function click($event) {
@@ -6818,6 +6861,132 @@ var __vue_render__ = function __vue_render__() {
   })], 2)], 2);
 };
 
+var __vue_staticRenderFns__$1 = [];
+/* style */
+
+var __vue_inject_styles__$1 = undefined;
+/* scoped */
+
+var __vue_scope_id__$1 = undefined;
+/* module identifier */
+
+var __vue_module_identifier__$1 = "data-v-36f384ca";
+/* functional template */
+
+var __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+var __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,
+    doc: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  created: function created() {
+    var _this = this;
+
+    this.formConfig.sections.forEach(function (r) {
+      r.columns.forEach(function (c) {
+        c.fields.forEach(function (f) {
+          _this.doc[f.name] = f.defaultValue;
+        });
+      });
+    });
+  }
+};/* script */
+var __vue_script__ = script;
+/* template */
+
+var __vue_render__ = function __vue_render__() {
+  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 callback($$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 */
 
@@ -6827,7 +6996,7 @@ var __vue_inject_styles__ = undefined;
 var __vue_scope_id__ = undefined;
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-f3c3d068";
+var __vue_module_identifier__ = "data-v-14c7e96e";
 /* functional template */
 
 var __vue_is_functional_template__ = false;
@@ -6842,7 +7011,7 @@ var __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-var __vue_component__$1 = __vue_component__;/* eslint-disable import/prefer-default-export */var components$1=/*#__PURE__*/Object.freeze({__proto__:null,UtFormConfig:UtFormConfig,DocTemplateSectionModal:DocTemplateSectionModal,DocTemplateFacetList:DocTemplateFacetList,DocTemplateFieldSidebar:DocTemplateFieldSidebar,DocTemplateConstructor:__vue_component__$1});var install = function installRbDocumentFormConstructor(Vue) {
+var __vue_component__$1 = __vue_component__;/* eslint-disable import/prefer-default-export */var components$1=/*#__PURE__*/Object.freeze({__proto__:null,UtFormConfig:UtFormConfig,DocTemplateSectionModal:DocTemplateSectionModal,DocTemplateFacetList:DocTemplateFacetList,DocTemplateFieldSidebar:DocTemplateFieldSidebar,DocTemplateConstructor:__vue_component__$3,DocForm:__vue_component__$1});var install = function installRbDocumentFormConstructor(Vue) {
   Object.entries(components$1).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         componentName = _ref2[0],
@@ -6851,7 +7020,7 @@ var __vue_component__$1 = __vue_component__;/* eslint-disable import/prefer-defa
     Vue.component(componentName, component);
   });
 }; // Create module definition for Vue.use()
-var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,UtFormConfig:UtFormConfig,DocTemplateSectionModal:DocTemplateSectionModal,DocTemplateFacetList:DocTemplateFacetList,DocTemplateFieldSidebar:DocTemplateFieldSidebar,DocTemplateConstructor:__vue_component__$1});// only expose one global var, with component exports exposed as properties of
+var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':install,UtFormConfig:UtFormConfig,DocTemplateSectionModal:DocTemplateSectionModal,DocTemplateFacetList:DocTemplateFacetList,DocTemplateFieldSidebar:DocTemplateFieldSidebar,DocTemplateConstructor:__vue_component__$3,DocForm:__vue_component__$1});// only expose one global var, with component exports exposed as properties of
 // that global var (eg. plugin.component)
 
 Object.entries(components).forEach(function (_ref) {

package/dist/scss/_variables.scss

@@ -5,3 +5,5 @@ $rb-doc-template-constructor-title-font-size: 16px;
 $rb-doc-template-section-bg: #E9EAEA;
 
 $rb-doc-template-field-sidebar-font-size-lg: 1rem;
+
+$rb-doc-form-font-size-lg: 1rem;

package/dist/scss/components/_doc-form.scss

@@ -0,0 +1,32 @@
+.rb-doc-form {
+  h4 {
+    font-weight: bold;
+    font-size: $rb-doc-form-font-size-lg;
+  }
+
+  .rb-form-section {
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+
+  .rb-form-column {
+    flex: 1;
+  }
+
+  .rb-form-column:first-child {
+    margin-left: 0;
+  }
+
+  .rb-form-column:last-child {
+    margin-right: 0;
+  }
+
+  .rb-form-column {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .form-control:disabled {
+    background-color: white;
+  }
+}

package/dist/scss/components.scss

@@ -1,2 +1,5 @@
 @import 'variables';
 @import 'components/doc-template-facet-list';
+@import 'components/doc-template-field-sidebar';
+@import 'components/doc-template-constructor';
+@import 'components/doc-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rb-document-form-constructor",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "description": "",
   "main": "dist/rb-document-form-constructor.ssr.js",
   "browser": "dist/rb-document-form-constructor.esm.js",

package/src/components/DocForm.vue

@@ -0,0 +1,43 @@
+<template>
+    <b-form class="rb-doc-form">
+        <div v-for="(section) in formConfig.sections" :key="section.labelRu"
+             class="rb-form-section">
+            <h4>{{section.labelRu}}</h4>
+
+            <div class="d-flex flex-row">
+                <div class="rb-form-column" v-for="column in section.columns"
+                     :key="column.index" :class="{'rb-single-column': section.columnCount === 1}">
+                    <b-form-row v-for="field in column.fields" :key="field.name"
+                                class="cursor-pointer">
+                        <b-col lg="12">
+                            <b-form-group :label="field.labelRu" ref="inputContainer">
+                                <component v-bind:is="field.input.type"
+                                           v-model="doc[field.name]"
+                                           v-bind="field.input.propsData"></component>
+                            </b-form-group>
+                        </b-col>
+                    </b-form-row>
+                </div>
+            </div>
+        </div>
+    </b-form>
+</template>
+
+<script>
+    export default {
+        name: 'DocForm',
+        props: {
+            formConfig: Object,
+            doc: {type: Object, default: () => ({})}
+        },
+        created() {
+            this.formConfig.sections.forEach(r => {
+                r.columns.forEach(c => {
+                    c.fields.forEach(f => {
+                        this.doc[f.name] = f.defaultValue;
+                    })
+                });
+            });
+        }
+    }
+</script>