rb-document-form-constructor 0.1.2 → 0.1.6

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

@@ -4,3 +4,4 @@
 @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.1.2",
+  "version": "0.1.6",
   "description": "",
   "main": "dist/rb-document-form-constructor.ssr.js",
   "browser": "dist/rb-document-form-constructor.esm.js",
@@ -17,7 +17,7 @@
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
-    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
+    "build:unpkg": "cross-env kNODE_ENV=production rollup --config build/rollup.config.js --format iife"
   },
   "dependencies": {
     "bootstrap": "^4.5.0",
@@ -26,6 +26,7 @@
     "jquery": "^3.6.0",
     "sass": "^1.32.0",
     "sass-loader": "^10.1.0",
+    "uuid": "^8.3.2",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
@@ -40,15 +41,16 @@
     "@vue/cli-service": "^4.5.13",
     "cross-env": "^7.0.3",
     "minimist": "^1.2.5",
+    "rb-bv-components": "^1.4.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.52.8",
     "rollup-plugin-copy-assets": "^2.0.3",
     "rollup-plugin-sass": "^1.2.6",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^5.1.9",
+    "rubles": "^0.2.0",
     "vue": "^2.6.14",
-    "vue-template-compiler": "^2.6.14",
-    "rb-bv-components": "^1.4.1"
+    "vue-template-compiler": "^2.6.14"
   },
   "peerDependencies": {
     "vue": "^2.6.14"

package/src/assets/fontello/README.txt

@@ -0,0 +1,75 @@
+This webfont is generated by https://fontello.com open source project.
+
+
+================================================================================
+Please, note, that you should obey original font licenses, used to make this
+webfont pack. Details available in LICENSE.txt file.
+
+- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
+  site in "About" section.
+
+- If your project is open-source, usually, it will be ok to make LICENSE.txt
+  file publicly available in your repository.
+
+- Fonts, used in Fontello, don't require a clickable link on your site.
+  But any kind of additional authors crediting is welcome.
+================================================================================
+
+
+Comments on archive content
+---------------------------
+
+- /font/* - fonts in different formats
+
+- /css/*  - different kinds of css, for all situations. Should be ok with 
+  twitter bootstrap. Also, you can skip <i> style and assign icon classes
+  directly to text elements, if you don't mind about IE7.
+
+- demo.html - demo file, to show your webfont content
+
+- LICENSE.txt - license info about source fonts, used to build your one.
+
+- config.json - keeps your settings. You can import it back into fontello
+  anytime, to continue your work
+
+
+Why so many CSS files ?
+-----------------------
+
+Because we like to fit all your needs :)
+
+- basic file, <your_font_name>.css - is usually enough, it contains @font-face
+  and character code definitions
+
+- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
+  directly into html
+
+- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
+  rules, but still wish to benefit from css generation. That can be very
+  convenient for automated asset build systems. When you need to update font -
+  no need to manually edit files, just override old version with archive
+  content. See fontello source code for examples.
+
+- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
+  CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
+  We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
+  server headers. But if you ok with dirty hack - this file is for you. Note,
+  that data url moved to separate @font-face to avoid problems with <IE9, when
+  string is too long.
+
+- animate.css - use it to get ideas about spinner rotation animation.
+
+
+Attention for server setup
+--------------------------
+
+You MUST setup server to reply with proper `mime-types` for font files -
+otherwise some browsers will fail to show fonts.
+
+Usually, `apache` already has necessary settings, but `nginx` and other
+webservers should be tuned. Here is list of mime types for our file extensions:
+
+- `application/vnd.ms-fontobject` - eot
+- `application/x-font-woff` - woff
+- `application/x-font-ttf` - ttf
+- `image/svg+xml` - svg

package/src/components/DocForm.vue

@@ -5,18 +5,24 @@
             <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 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 :label="field.labelRu" ref="inputContainer">
+                                    <component v-bind:is="field.input.type"
+                                               v-model="doc[field.name]"
+                                               :disabled="!field.editable"
+                                               :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>
+                                </b-form-group>
+                            </b-col>
+                        </b-form-row>
+                    </template>
                 </div>
             </div>
         </div>
@@ -24,20 +30,45 @@
 </template>
 
 <script>
+    import {UtFormConstructor} from "../utils/UtFormConstructor";
+
     export default {
         name: 'DocForm',
         props: {
             formConfig: Object,
-            doc: {type: Object, default: () => ({})}
+            applyDefaultValues: {type: Boolean, default: true},
+            doc: {type: Object, default: () => ({})},
+            validationState: {type: Object, default: () => ({})}
         },
-        created() {
-            this.formConfig.sections.forEach(r => {
-                r.columns.forEach(c => {
-                    c.fields.forEach(f => {
-                        this.doc[f.name] = f.defaultValue;
+        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() {
+            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>

package/src/components/DocTemplateConstructor.vue

@@ -4,18 +4,18 @@
 
         <div class="rb-form-constructor flex-fill">
             <div class="rb-constructor-toolbar d-flex flex-row">
-                <h4>Верстка документа</h4>
+                <h4>Добавить секцию: </h4>
                 <div class="rb-layout-buttons">
                     <b-button pill variant="outline-gray" @click="addSection(1)">
-                        <rb-text>1 колонка</rb-text>
+                        <rb-text>Секция с 1 колонкой</rb-text>
                         <rb-icon :icon="iconAdd"></rb-icon>
                     </b-button>
                     <b-button pill variant="outline-gray" @click="addSection(2)">
-                        <rb-text>2 колонки</rb-text>
+                        <rb-text>Секция с 2 колонками</rb-text>
                         <rb-icon :icon="iconAdd"></rb-icon>
                     </b-button>
                     <b-button pill variant="outline-gray" @click="addSection(3)">
-                        <rb-text>3 колонки</rb-text>
+                        <rb-text>Секция с 3 колонками</rb-text>
                         <rb-icon :icon="iconAdd"></rb-icon>
                     </b-button>
                 </div>
@@ -56,13 +56,13 @@
                                        ghost-class="rb-moving-item"
                                        handle=".rb-field-drag-handle">
                                 <b-form-row v-for="field in column.fields" :key="field.name"
-                                            class="cursor-pointer" @click="showProperties(field)">
+                                            class="cursor-pointer" @click="showProperties(field, $event)">
                                     <b-col lg="12">
                                         <b-form-group :label="field.labelRu">
                                             <template #label>
                                                 <rb-icon :icon="iconDrag" class="rb-field-drag-handle"></rb-icon>
                                                 <rb-text>{{field.labelRu}}</rb-text>
-                                                <rb-icon :icon="iconDelete"
+                                                <rb-icon :icon="iconDelete" class="rb-remove-field"
                                                          @click.prevent="onRemoveField($event, field, column)">
                                                 </rb-icon>
                                             </template>
@@ -81,13 +81,16 @@
                 </draggable>
             </div>
 
-            <doc-template-field-sidebar v-model="sidebarField" :visible="sidebarVisible"
+            <doc-template-field-sidebar v-model="sidebarField"
+                                        :visible="sidebarVisible"
+                                        :form-config="formConfig"
                                         @hide="sidebarVisible=false">
             </doc-template-field-sidebar>
 
             <doc-template-section-modal :mode="sectionModalCfg.mode"
                                         :section="sectionModalCfg.section"
-                                        :on-after-ok="sectionModalCfg.onAfterOk"></doc-template-section-modal>
+                                        :on-after-ok="sectionModalCfg.onAfterOk">
+            </doc-template-section-modal>
         </div>
     </div>
 </template>
@@ -98,6 +101,7 @@
     import DocTemplateSectionModal from "@/components/DocTemplateSectionModal";
     import draggable from 'vuedraggable';
     import {UtFormConfig} from "../utils/UtFormConfig";
+    import {UtFormConstructor} from "../utils/UtFormConstructor";
 
     export default {
         name: 'DocTemplateConstructor',
@@ -127,20 +131,25 @@
         },
         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;
             },
@@ -164,7 +173,8 @@
             editSection(section) {
                 this.sectionModalCfg.mode = 'update';
                 this.sectionModalCfg.section = section;
-                this.sectionModalCfg.onAfterOk = () => {}
+                this.sectionModalCfg.onAfterOk = () => {
+                }
                 this.$bvModal.show(this.sectionModalCfg.id);
             },
             removeSection(section, index) {
@@ -200,12 +210,7 @@
                 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) {

package/src/components/DocTemplateFacetList.vue

@@ -13,10 +13,9 @@
         </b-form>
         <div class="rb-facet-list">
             <div class="rb-facet" v-for="facet in innerFacets" :key="facet.name">
-                <h6 class="rb-facet-label d-flex">
+                <h6 class="rb-facet-label d-flex cursor-pointer" @click="facet.expanded = !facet.expanded">
                     <rb-text class="flex-fill">{{facet.labelRu}}</rb-text>
-                    <rb-icon :icon="facet.expanded? iconCollapseFacet: iconExpandFacet" class="cursor-pointer"
-                             @click="facet.expanded = !facet.expanded"></rb-icon>
+                    <rb-icon :icon="facet.expanded? iconCollapseFacet: iconExpandFacet"></rb-icon>
                 </h6>
 
                 <b-list-group v-if="facet.expanded">
@@ -40,6 +39,7 @@
 <script>
     import draggable from "vuedraggable";
     import {UtFormConfig} from "@/utils/UtFormConfig";
+    import {UtFormConstructor} from "../utils/UtFormConstructor";
 
     export default {
         name: 'DocTemplateFacetList',
@@ -56,10 +56,10 @@
         },
         computed: {
             iconExpandFacet() {
-                return UtFormConfig.config.icons.iconExpandFacet;
+                return UtFormConstructor.config.icons.iconExpandFacet;
             },
             iconCollapseFacet() {
-                return UtFormConfig.config.icons.iconCollapseFacet;
+                return UtFormConstructor.config.icons.iconCollapseFacet;
             },
         },
         watch: {
@@ -73,7 +73,7 @@
         methods: {
             onFieldCloned(cloneField) {
                 let field = JSON.parse(JSON.stringify(cloneField));
-                field.input = UtFormConfig.getDefaultInput(field);
+                field.input = UtFormConstructor.getDefaultInput(field);
                 return field;
             },
             onFieldMoveEnd(event) {

package/src/components/DocTemplateFieldSidebar.vue

@@ -82,15 +82,12 @@
                                            v-bind="getPropInputPropData(prop, propName)"></component>
                             </b-form-group>
                         </template>
-
                     </b-col>
                 </b-form-row>
             </div>
 
             <div class="rb-form-section" v-if="field.input">
-                <div class="rb-title">
-                    Значение по-умолчанию
-                </div>
+                <div class="rb-title">Значение по-умолчанию</div>
 
                 <b-form-row>
                     <b-col lg="12">
@@ -102,15 +99,45 @@
                     </b-col>
                 </b-form-row>
             </div>
+
+            <div class="rb-form-section">
+                <div class="rb-title">Правила</div>
+
+                <b-list-group :data-hash="rulesHash">
+                    <b-list-group-item v-for="rule in field.rules"
+                                       @click="editRule(rule, $event)"
+                                       :key="rule.id"
+                                       :data-hash="rulesHash"
+                                       class="cursor-pointer d-flex justify-content-between align-items-center">
+                        <rb-text>{{rule.name}}</rb-text>
+                        <rb-icon icon="icon-close" class="rb-remove-rule" @click="removeRule(rule)"></rb-icon>
+                    </b-list-group-item>
+                    <b-list-group-item @click="addRule" class="cursor-pointer">
+                        <rb-icon :icon="iconAdd"></rb-icon>
+                        <rb-text>Добавить правило ...</rb-text>
+                    </b-list-group-item>
+                </b-list-group>
+            </div>
         </b-form>
+
+        <field-rule-form-modal :rule="ruleModalCfg.rule"
+                               :form-config="formConfig"
+                               :field="field"
+                               :mode="ruleModalCfg.mode"
+                               :on-after-ok="ruleModalCfg.onAfterOk"
+        ></field-rule-form-modal>
     </b-sidebar>
 </template>
 
 <script>
     import {UtFormConfig} from "@/utils/UtFormConfig";
+    import FieldRuleFormModal from "./FieldRuleFormModal";
+    import {v4 as uuidv4} from 'uuid';
+    import {UtFormConstructor} from "../utils/UtFormConstructor";
 
     export default {
         name: 'DocTemplateFieldSidebar',
+        components: {FieldRuleFormModal},
         props: {
             value: {
                 type: Object,
@@ -119,25 +146,38 @@
             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: uuidv4(),
             }
         },
         computed: {
             inputOptions() {
-                return this.field ? UtFormConfig.getInputTypes(this.field) : [];
+                return this.field ? UtFormConstructor.getInputTypes(this.field) : [];
             },
             iconCloseSidebar() {
-                return UtFormConfig.config.icons.iconCloseFieldSidebar;
+                return UtFormConstructor.config.icons.iconCloseFieldSidebar;
             },
             iconOpenSidebar() {
-                return UtFormConfig.config.icons.iconOpenFieldSidebar;
+                return UtFormConstructor.config.icons.iconOpenFieldSidebar;
+            },
+            iconAdd() {
+                return UtFormConstructor.config.icons.iconAdd;
             },
+            rules() {
+                return UtFormConstructor.getAvailableFieldRules(this.field);
+            }
         },
         watch: {
             visible() {
@@ -154,7 +194,7 @@
                 this.$emit('change', this.field);
             },
             currentInputName() {
-                this.field.input = UtFormConfig.getInputTypeByName(this.currentInputName, this.field);
+                this.field.input = UtFormConstructor.getInputTypeByName(this.currentInputName, this.field);
             },
         },
         methods: {
@@ -177,6 +217,45 @@
                 } 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 = uuidv4();
+                    }
+                }
+                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 = uuidv4();
             }
         },
         created() {