rb-document-form-constructor 0.5.2 → 0.5.5

package/dist/scss/_global.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer;
+}

package/dist/scss/_variables.scss

@@ -0,0 +1,16 @@
+// DocTemplateFacetList
+$rb-facet-list-border-color: $border-color !default;
+
+// DocTemplateConstructor
+$rb-doc-template-constructor-title-color: #333 !default;
+$rb-doc-template-constructor-title-font-size: 16px !default;
+$rb-doc-template-section-bg: #E9EAEA !default;
+$rb-doc-template-constructor-form-column-border-color: #D5D5D6;
+
+// DocTemplateFieldSidebar
+$rb-doc-template-field-sidebar-font-size-lg: 1rem !default;
+$rb-doc-template-field-sidebar-top: 72px !default;
+$rb-doc-template-field-sidebar-close-button-left: -46px !default;
+
+// DocForm
+$rb-doc-form-font-size-lg: 1rem !default;

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

@@ -0,0 +1,28 @@
+.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;
+  }
+}

package/dist/scss/components/_doc-template-constructor.scss

@@ -0,0 +1,112 @@
+.rb-doc-template-constructor {
+  height: 100%;
+
+  h4 {
+    color: $rb-doc-template-constructor-title-color;
+    font-weight: bold;
+    font-size: $rb-doc-template-constructor-title-font-size;
+  }
+
+  .rb-form-constructor {
+    height: 100%;
+    overflow-y: auto;
+    background-color: white;
+  }
+
+  .rb-constructor-toolbar {
+    padding: 16px 16px 16px 16px;
+    background-color: white;
+    border-bottom: 1px solid $border-color;
+
+    h4 {
+      margin-bottom: 0;
+      line-height: 38px;
+      margin-right: 10px;
+    }
+
+    .btn {
+      margin-left: 10px;
+    }
+  }
+
+  .rb-constructor-body {
+    padding: 16px;
+
+    .card {
+      border-width: 2px;
+      border-style: dashed;
+      background-color: $rb-doc-template-section-bg;
+
+      .card-header, .card-body {
+        background-color: $rb-doc-template-section-bg;
+        border-color: $border-color;
+
+      }
+    }
+
+    .rb-form-card {
+      margin-bottom: 20px;
+
+      .rb-form-column {
+        flex: 1;
+      }
+
+      .card-header {
+        border-bottom-width: 0;
+        display: flex;
+        flex-direction: row;
+
+        .rb-text {
+          font-size: 16px;
+          line-height: 24px;
+          font-weight: bold;
+        }
+
+        .rb-icon {
+          line-height: 24px;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .rb-form-column {
+      .form-group:hover {
+        legend.col-form-label .rb-actions {
+          visibility: visible;
+        }
+      }
+
+      legend.col-form-label {
+        font-size: $font-size-base;
+        font-weight: bold;
+        margin-bottom: 12px;
+        display: flex;
+        flex-direction: row;
+        color: $rb-doc-template-constructor-title-color;
+
+        .rb-text {
+          flex: 1;
+        }
+
+        .rb-actions {
+          visibility: hidden;
+        }
+      }
+
+      .form-control:disabled,
+      .btn.disabled {
+        background-color: white;
+        opacity: 1;
+      }
+    }
+
+    .rb-form-column {
+      padding: 10px;
+      border: 2px dashed $rb-doc-template-constructor-form-column-border-color;
+    }
+
+    .rb-form-column:not(.rb-single-column) {
+      margin: 0 10px;
+    }
+  }
+}

package/dist/scss/components/_doc-template-facet-list.scss

@@ -0,0 +1,41 @@
+.rb-facets-sidebar {
+  height: 100%;
+  width: 264px;
+  overflow-y: auto;
+  background-color: white;
+  border-right: 1px solid $rb-facet-list-border-color;
+
+  h4 {
+    padding: 24px 16px 16px 16px;
+  }
+
+  h6 {
+    padding-left: 16px;
+    padding-right: 16px;
+    font-weight: 500;
+  }
+
+  form {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .rb-facet-label {
+    font-weight: bold;
+  }
+
+  .rb-facet-list {
+    .rb-facet {
+      padding: 10px 0;
+    }
+
+    & > .rb-facet:not(:last-child) {
+      border-bottom: 1px solid $rb-facet-list-border-color;
+    }
+
+    .list-group-item {
+      border-radius: 0;
+      border: none;
+    }
+  }
+}

package/dist/scss/components/_doc-template-field-sidebar.scss

@@ -0,0 +1,52 @@
+.rb-doc-template-field-sidebar {
+  .dropdown-menu.show {
+    max-width: 288px;
+  }
+
+  .b-sidebar {
+    top: $rb-doc-template-field-sidebar-top;
+    padding-bottom: $rb-doc-template-field-sidebar-top;
+  }
+
+  .rb-sidebar-close-btn {
+    opacity: 0.5;
+    position: absolute;
+    left: $rb-doc-template-field-sidebar-close-button-left;
+    border-radius: 0;
+    padding-left: 4px;
+    padding-right: 4px;
+    font-size: 16px;
+
+    .rb-icon {
+      font-size: 24px;
+      line-height: 24px;
+      vertical-align: middle;
+    }
+  }
+
+  form {
+    padding: 10px 16px;
+
+    .rb-form-section {
+      margin-bottom: 20px;
+
+      & > .rb-title {
+        font-size: $rb-doc-template-field-sidebar-font-size-lg;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  h4 {
+    margin-bottom: 0;
+  }
+
+  .form-group.rb-immutable .rb-text {
+    font-size: $rb-doc-template-field-sidebar-font-size-lg;
+  }
+
+  .custom-checkbox {
+    margin-bottom: 12px;
+  }
+}

package/dist/scss/components/_field-rule-form-modal.scss

@@ -0,0 +1,27 @@
+$rb-field-rule-btn-toolbar-bg: rgba(0, 0, 0, 0.03) !default;
+
+.rb-field-rule-form-modal {
+  .modal-body {
+    padding: 0;
+
+    & > .card {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .btn-toolbar {
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    background-color: $rb-field-rule-btn-toolbar-bg;
+    padding: 10px 10px;
+    border-top: 1px solid $border-color;
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+  }
+
+  textarea.form-control {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

package/dist/scss/components.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+@import 'global';
+@import 'components/doc-template-facet-list';
+@import 'components/doc-template-field-sidebar';
+@import 'components/doc-template-constructor';
+@import 'components/doc-form';
+@import 'components/field-rule-form-modal';

package/package.json

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

package/src/components/DocForm.vue

@@ -1,38 +1,45 @@
 <template>
     <b-form v-if="formConfig" class="rb-doc-form">
-        <div v-for="(section) in formConfig.sections" :key="section.labelRu" v-if="formConfig && formConfig.sections"
-             class="rb-form-section">
-            <h4>{{ section.labelRu }}</h4>
+        <b-container v-if="formConfig && formConfig.sections"
+                     v-for="(section) in formConfig.sections"
+                     :key="section.labelRu"
 
-            <div class="d-flex flex-row">
-                <div class="rb-form-column" v-for="column in section.columns" :key="column.index">
-                    <template v-for="field in column.fields">
-                        <b-form-row :key="field.name" v-if="field.visible">
-                            <b-col lg="12">
-                                <b-form-group :state="validationState[field.name]"
-                                              :invalid-feedback="validationState[`${field.name}__feedback`]"
-                                              ref="inputContainer">
-                                    <component v-bind:is="field.input.type"
-                                               v-model="doc[field.name]"
-                                               :disabled="!editable || !field.editable"
-                                               :id="field.name"
-                                               :state="validationState[field.name]"
-                                               :ref="field.name"
-                                               @input="onEventFired('input', $event, field)"
-                                               @change="onEventFired('change', $event, field)"
-                                               @click="onEventFired('click', $event, field)"
-                                               v-bind="field.input.propsData"></component>
-                                    <template #label>
-                                        {{ field.labelRu }} <span v-if="showRequiredInLabel && field.required"
-                                                                  class="text-danger">*</span>
-                                    </template>
-                                </b-form-group>
-                            </b-col>
-                        </b-form-row>
-                    </template>
-                </div>
-            </div>
-        </div>
+                     class="rb-form-section">
+            <b-row>
+                <b-col lg="12">
+                    <h4>{{section.labelRu}}</h4>
+                </b-col>
+                <template v-for="column in section.columns">
+                    <b-col :key="column.index" :lg="getColumnSize(section)" :sm="12">
+                        <template v-for="field in column.fields">
+                            <b-form-row :key="field.name" v-if="field.visible">
+                                <b-col lg="12">
+                                    <b-form-group :state="validationState[field.name]"
+                                                  :invalid-feedback="validationState[`${field.name}__feedback`]"
+                                                  ref="inputContainer">
+                                        <component v-bind:is="field.input.type"
+                                                   v-model="doc[field.name]"
+                                                   :disabled="!editable || !field.editable"
+                                                   :id="field.name"
+                                                   :state="validationState[field.name]"
+                                                   :ref="field.name"
+                                                   @input="onEventFired('input', $event, field)"
+                                                   @change="onEventFired('change', $event, field)"
+                                                   @click="onEventFired('click', $event, field)"
+                                                   v-bind="field.input.propsData"></component>
+                                        <template #label>
+                                            {{field.labelRu}} <span v-if="showRequiredInLabel && field.required"
+                                                                    class="text-danger">*</span>
+                                        </template>
+                                    </b-form-group>
+                                </b-col>
+                            </b-form-row>
+                        </template>
+                    </b-col>
+
+                </template>
+            </b-row>
+        </b-container>
     </b-form>
 </template>
 
@@ -88,19 +95,14 @@
                 }
             },
             isValueEmpty(fieldName) {
-                console.info('isValueEmpty', fieldName, this.doc[fieldName]);
-
                 if (this.doc[fieldName] == null) {
-                    console.info(`${fieldName} is empty`);
                     return true;
                 }
 
                 if (typeOf(this.doc[fieldName] === 'string') && this.doc[fieldName] === '') {
-                    console.info(`${fieldName} is empty`);
                     return true;
                 }
 
-                console.info(`${fieldName} is not empty`);
                 return false;
             },
             validate() {
@@ -130,18 +132,28 @@
                 }
 
                 return true;
-            }
+            },
+            getColumnSize(section) {
+                const MAX_COLUMN_SIZE = 12;
+                if (!section || !section.columnCount) {
+                    return MAX_COLUMN_SIZE;
+                }
+
+                let colSize = Math.floor(MAX_COLUMN_SIZE / section.columnCount);
+                console.info("colSize", colSize);
+                return colSize;
+            },
         },
         created() {
             if (this.applyDefaultValues) {
                 this.formConfig.sections.forEach(r => {
                     r.columns.forEach(c => {
                         c.fields.forEach(f => {
-                            let defValue = null;
+                            let defValue;
                             if (this.defaultValue && typeOf(f.defaultValue) === 'function') {
                                 defValue = f.defaultValue();
                             } else {
-                                defValue = this.defaultValue == null ? null : f.defaultValue;
+                                defValue = f.defaultValue == null ? null : f.defaultValue;
                             }
 
                             this.$set(

package/src/components/DocTemplateFieldSidebar.vue

@@ -206,7 +206,7 @@
             multiple() {
                 let input = UtFormConstructor.getDefaultInput(this.field);
                 this.currentInputName = input.name;
-            }
+            },
         },
         methods: {
             hide() {