rb-document-form-constructor 0.5.8 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/rb-document-form-constructor.esm.js +6 -23
  2. package/dist/rb-document-form-constructor.min.js +2 -2
  3. package/dist/rb-document-form-constructor.ssr.js +33 -39
  4. package/dist/scss/_global.scss +3 -3
  5. package/dist/scss/_variables.scss +17 -16
  6. package/dist/scss/components/_doc-form.scss +36 -28
  7. package/dist/scss/components/_doc-template-constructor.scss +112 -112
  8. package/dist/scss/components/_doc-template-facet-list.scss +41 -41
  9. package/dist/scss/components/_doc-template-field-sidebar.scss +52 -52
  10. package/dist/scss/components/_field-rule-form-modal.scss +27 -27
  11. package/dist/scss/components.scss +7 -7
  12. package/package.json +63 -63
  13. package/src/assets/fontello/README.txt +75 -75
  14. package/src/components/DocForm.vue +177 -180
  15. package/src/components/DocTemplateConstructor.vue +250 -250
  16. package/src/components/DocTemplateFacetList.vue +119 -119
  17. package/src/components/DocTemplateFieldSidebar.vue +280 -280
  18. package/src/components/DocTemplateSectionModal.vue +63 -63
  19. package/src/components/FieldRuleFormModal.vue +269 -269
package/src/components/DocForm.vue CHANGED
@@ -1,180 +1,177 @@
1
- <template>
2
- <b-form v-if="formConfig" class="rb-doc-form">
3
- <b-container v-if="formConfig && formConfig.sections"
4
- v-for="(section) in formConfig.sections"
5
- :key="section.labelRu"
6
-
7
- class="rb-form-section">
8
- <b-row>
9
- <b-col lg="12">
10
- <h4>{{section.labelRu}}</h4>
11
- </b-col>
12
- <template v-for="column in section.columns">
13
- <b-col :key="column.index" :lg="getColumnSize(section)" :sm="12">
14
- <template v-for="field in column.fields">
15
- <b-form-row :key="field.name" v-if="field.visible">
16
- <b-col lg="12">
17
- <b-form-group :state="validationState[field.name]"
18
- :invalid-feedback="validationState[`${field.name}__feedback`]"
19
- ref="inputContainer">
20
- <component v-bind:is="field.input.type"
21
- v-model="doc[field.name]"
22
- :disabled="!editable || !field.editable"
23
- :id="field.name"
24
- :state="validationState[field.name]"
25
- :ref="field.name"
26
- @input="onEventFired('input', $event, field)"
27
- @change="onEventFired('change', $event, field)"
28
- @click="onEventFired('click', $event, field)"
29
- v-bind="field.input.propsData"></component>
30
- <template #label>
31
- {{field.labelRu}} <span v-if="showRequiredInLabel && field.required"
32
- class="text-danger">*</span>
33
- </template>
34
- </b-form-group>
35
- </b-col>
36
- </b-form-row>
37
- </template>
38
- </b-col>
39
-
40
- </template>
41
- </b-row>
42
- </b-container>
43
- </b-form>
44
- </template>
45
-
46
- <script>
47
- import Vue from 'vue';
48
- import {UtFormConstructor} from "../utils/UtFormConstructor";
49
- import typeOf from 'typeof';
50
-
51
- export default {
52
- name: 'DocForm',
53
- props: {
54
- formConfig: Object,
55
- applyDefaultValues: {type: Boolean, default: true},
56
- doc: {type: Object, default: () => ({})},
57
- refSuffix: {type: String, default: 'Id'},
58
- editable: {type: Boolean, default: true},
59
- showRequiredInLabel: {type: Boolean, default: true},
60
- },
61
- data() {
62
- return {
63
- validationState: {}
64
- }
65
- },
66
- watch: {
67
- formConfig() {
68
- this.validationState = {};
69
- this.execApplyDefaultValues();
70
- }
71
- },
72
- methods: {
73
- onEventFired(eventName, event, field) {
74
- if (eventName === 'input' && field.ref && !field.multiple) {
75
- let dataField = null;
76
- if (field.name.lastIndexOf(this.refSuffix) >= 0) {
77
- dataField = field.name.substring(0, field.name.lastIndexOf(this.refSuffix));
78
- }
79
-
80
- if (dataField && dataField.length > 0) {
81
- this.doc[dataField] = null;
82
- }
83
- }
84
-
85
- if (field.rules) {
86
- field.rules.forEach(rule => {
87
- if (rule.event === eventName && rule.script) {
88
- let ruleContext = UtFormConstructor.getRuleContext();
89
- ruleContext.form = this;
90
- ruleContext.doc = this.doc;
91
- ruleContext.event = event;
92
- ruleContext.eventName = eventName;
93
- UtFormConstructor.runRule(ruleContext, rule.script);
94
- }
95
- })
96
- }
97
- },
98
- isValueEmpty(fieldName) {
99
- if (this.doc[fieldName] == null) {
100
- return true;
101
- }
102
-
103
- if (typeOf(this.doc[fieldName] === 'string') && this.doc[fieldName] === '') {
104
- return true;
105
- }
106
-
107
- return false;
108
- },
109
- validate() {
110
- this.formConfig.sections.forEach(s => {
111
- s.columns.forEach(c => {
112
- c.fields.forEach(f => {
113
- if (f.required && this.isValueEmpty(f.name)) {
114
- Vue.set(this.validationState, f.name, false);
115
- Vue.set(this.validationState, `${f.name}__feedback`,
116
- `Поле "${f.labelRu} обязательно"`);
117
- } else {
118
- Vue.set(this.validationState, f.name, null);
119
- }
120
-
121
- this.onEventFired('validate', {
122
- validationState: this.validationState,
123
- doc: this.doc,
124
- }, f);
125
- })
126
- })
127
- });
128
-
129
- for (let fieldName in this.validationState) {
130
- if (this.validationState[fieldName] === false) {
131
- return false;
132
- }
133
- }
134
-
135
- return true;
136
- },
137
- getColumnSize(section) {
138
- const MAX_COLUMN_SIZE = 12;
139
- if (!section || !section.columnCount) {
140
- return MAX_COLUMN_SIZE;
141
- }
142
-
143
- let colSize = Math.floor(MAX_COLUMN_SIZE / section.columnCount);
144
- console.info("colSize", colSize);
145
- return colSize;
146
- },
147
- execApplyDefaultValues() {
148
- console.info("this.applyDefaultValues", this.applyDefaultValues);
149
- if (this.applyDefaultValues) {
150
- this.formConfig.sections.forEach(r => {
151
- r.columns.forEach(c => {
152
- c.fields.forEach(f => {
153
- console.info("f", f);
154
- let defValue;
155
- if (this.defaultValue && typeOf(f.defaultValue) === 'function') {
156
- defValue = f.defaultValue();
157
- } else {
158
- defValue = f.defaultValue == null ? null : f.defaultValue;
159
- }
160
- console.info("defValue", defValue);
161
-
162
- this.$set(
163
- this.doc,
164
- f.name,
165
- f.defaultValue = defValue
166
- );
167
- })
168
- });
169
- });
170
- }
171
- }
172
- },
173
- mounted() {
174
- this.execApplyDefaultValues();
175
- },
176
- activated() {
177
- this.execApplyDefaultValues();
178
- }
179
- }
180
- </script>
1
+ <template>
2
+ <b-form v-if="formConfig" class="rb-doc-form">
3
+ <b-container v-if="formConfig && formConfig.sections"
4
+ v-for="(section) in formConfig.sections"
5
+ :key="section.labelRu"
6
+
7
+ class="rb-form-section">
8
+ <b-row>
9
+ <b-col lg="12">
10
+ <h4>{{section.labelRu}}</h4>
11
+ </b-col>
12
+ <template v-for="column in section.columns">
13
+ <b-col :key="column.index" :lg="getColumnSize(section)" :sm="12">
14
+ <template v-for="field in column.fields">
15
+ <b-form-row :key="field.name" v-if="field.visible">
16
+ <b-col lg="12">
17
+ <b-form-group :state="validationState[field.name]"
18
+ :invalid-feedback="validationState[`${field.name}__feedback`]"
19
+ ref="inputContainer">
20
+ <component v-bind:is="field.input.type"
21
+ v-model="doc[field.name]"
22
+ :disabled="!editable || !field.editable"
23
+ :id="field.name"
24
+ :state="validationState[field.name]"
25
+ :ref="field.name"
26
+ @input="onEventFired('input', $event, field)"
27
+ @change="onEventFired('change', $event, field)"
28
+ @click="onEventFired('click', $event, field)"
29
+ v-bind="field.input.propsData"></component>
30
+ <template #label>
31
+ <span :title="field.labelRu">{{field.labelRu}}</span> <span
32
+ v-if="showRequiredInLabel && field.required"
33
+ class="text-danger">*</span>
34
+ </template>
35
+ </b-form-group>
36
+ </b-col>
37
+ </b-form-row>
38
+ </template>
39
+ </b-col>
40
+
41
+ </template>
42
+ </b-row>
43
+ </b-container>
44
+ </b-form>
45
+ </template>
46
+
47
+ <script>
48
+ import Vue from 'vue';
49
+ import {UtFormConstructor} from "../utils/UtFormConstructor";
50
+ import typeOf from 'typeof';
51
+
52
+ export default {
53
+ name: 'DocForm',
54
+ props: {
55
+ formConfig: Object,
56
+ applyDefaultValues: {type: Boolean, default: true},
57
+ doc: {type: Object, default: () => ({})},
58
+ refSuffix: {type: String, default: 'Id'},
59
+ editable: {type: Boolean, default: true},
60
+ showRequiredInLabel: {type: Boolean, default: true},
61
+ },
62
+ data() {
63
+ return {
64
+ validationState: {}
65
+ }
66
+ },
67
+ watch: {
68
+ formConfig() {
69
+ this.validationState = {};
70
+ this.execApplyDefaultValues();
71
+ }
72
+ },
73
+ methods: {
74
+ onEventFired(eventName, event, field) {
75
+ if (eventName === 'input' && field.ref && !field.multiple) {
76
+ let dataField = null;
77
+ if (field.name.lastIndexOf(this.refSuffix) >= 0) {
78
+ dataField = field.name.substring(0, field.name.lastIndexOf(this.refSuffix));
79
+ }
80
+
81
+ if (dataField && dataField.length > 0) {
82
+ this.doc[dataField] = null;
83
+ }
84
+ }
85
+
86
+ if (field.rules) {
87
+ field.rules.forEach(rule => {
88
+ if (rule.event === eventName && rule.script) {
89
+ let ruleContext = UtFormConstructor.getRuleContext();
90
+ ruleContext.form = this;
91
+ ruleContext.doc = this.doc;
92
+ ruleContext.event = event;
93
+ ruleContext.eventName = eventName;
94
+ UtFormConstructor.runRule(ruleContext, rule.script);
95
+ }
96
+ })
97
+ }
98
+ },
99
+ isValueEmpty(fieldName) {
100
+ if (this.doc[fieldName] == null) {
101
+ return true;
102
+ }
103
+
104
+ if (typeOf(this.doc[fieldName] === 'string') && this.doc[fieldName] === '') {
105
+ return true;
106
+ }
107
+
108
+ return false;
109
+ },
110
+ validate() {
111
+ this.formConfig.sections.forEach(s => {
112
+ s.columns.forEach(c => {
113
+ c.fields.forEach(f => {
114
+ if (f.required && this.isValueEmpty(f.name)) {
115
+ Vue.set(this.validationState, f.name, false);
116
+ Vue.set(this.validationState, `${f.name}__feedback`,
117
+ `Поле "${f.labelRu} обязательно"`);
118
+ } else {
119
+ Vue.set(this.validationState, f.name, null);
120
+ }
121
+
122
+ this.onEventFired('validate', {
123
+ validationState: this.validationState,
124
+ doc: this.doc,
125
+ }, f);
126
+ })
127
+ })
128
+ });
129
+
130
+ for (let fieldName in this.validationState) {
131
+ if (this.validationState[fieldName] === false) {
132
+ return false;
133
+ }
134
+ }
135
+
136
+ return true;
137
+ },
138
+ getColumnSize(section) {
139
+ const MAX_COLUMN_SIZE = 12;
140
+ if (!section || !section.columnCount) {
141
+ return MAX_COLUMN_SIZE;
142
+ }
143
+
144
+ let colSize = Math.floor(MAX_COLUMN_SIZE / section.columnCount);
145
+ return colSize;
146
+ },
147
+ execApplyDefaultValues() {
148
+ if (this.applyDefaultValues) {
149
+ this.formConfig.sections.forEach(r => {
150
+ r.columns.forEach(c => {
151
+ c.fields.forEach(f => {
152
+ let defValue;
153
+ if (this.defaultValue && typeOf(f.defaultValue) === 'function') {
154
+ defValue = f.defaultValue();
155
+ } else {
156
+ defValue = f.defaultValue == null ? null : f.defaultValue;
157
+ }
158
+
159
+ this.$set(
160
+ this.doc,
161
+ f.name,
162
+ f.defaultValue = defValue
163
+ );
164
+ })
165
+ });
166
+ });
167
+ }
168
+ }
169
+ },
170
+ mounted() {
171
+ this.execApplyDefaultValues();
172
+ },
173
+ activated() {
174
+ this.execApplyDefaultValues();
175
+ }
176
+ }
177
+ </script>