rb-document-form-constructor 0.9.22 → 0.9.24

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 (18) hide show
  1. package/dist/rb-document-form-constructor.esm.js +130 -38
  2. package/dist/rb-document-form-constructor.min.js +1 -1
  3. package/dist/rb-document-form-constructor.ssr.js +129 -44
  4. package/dist/scss/_global.scss +3 -3
  5. package/dist/scss/_variables.scss +17 -17
  6. package/dist/scss/components/_doc-form.scss +36 -36
  7. package/dist/scss/components/_doc-template-constructor.scss +112 -112
  8. package/dist/scss/components/_doc-template-facet-list.scss +46 -46
  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 +61 -61
  13. package/src/components/DocForm.vue +408 -308
  14. package/src/components/DocTemplateConstructor.vue +262 -262
  15. package/src/components/DocTemplateFacetList.vue +127 -127
  16. package/src/components/DocTemplateFieldSidebar.vue +314 -314
  17. package/src/components/DocTemplateSectionModal.vue +63 -63
  18. package/src/components/FieldRuleFormModal.vue +287 -287
package/src/components/DocTemplateFieldSidebar.vue CHANGED
@@ -1,314 +1,314 @@
1
- <template>
2
- <b-sidebar right class="rb-doc-template-field-sidebar" bg-variant="white" shadow
3
- v-model="innerVisible">
4
- <template #header>
5
- <b-button class="rb-sidebar-close-btn" variant="secondary" @click="hide">
6
- <rb-icon :icon="innerVisible? iconCloseSidebar: iconOpenSidebar"></rb-icon>
7
- </b-button>
8
- <h4>Редактор свойств</h4>
9
- </template>
10
-
11
- <b-form v-if="field">
12
- <div class="rb-form-section">
13
- <b-form-row>
14
- <b-col lg="12">
15
- <b-form-group label="Название" class="rb-immutable">
16
- <rb-text>{{field.name}}</rb-text>
17
- </b-form-group>
18
- </b-col>
19
- </b-form-row>
20
- <b-form-row>
21
- <b-col lg="12">
22
- <b-form-group label="Тип" class="rb-immutable">
23
- <rb-text>{{field.type}}</rb-text>
24
- </b-form-group>
25
- </b-col>
26
- </b-form-row>
27
- <b-form-row>
28
- <b-col lg="12">
29
- <b-form-group label="Тэг для файла шаблона" class="rb-immutable">
30
- <rb-text>{{field.tag}}</rb-text>
31
- </b-form-group>
32
- </b-col>
33
- </b-form-row>
34
- <b-form-row>
35
- <b-col lg="12">
36
- <b-form-group label="Заголовок">
37
- <rb-multi-lang-input v-model="field" />
38
- </b-form-group>
39
- </b-col>
40
- </b-form-row>
41
- <!-- <b-form-row>-->
42
- <!-- <b-col lg="12">-->
43
- <!-- <b-checkbox size="lg" v-model="field.multiple" :disabled="!hasMultipleInputTypes">-->
44
- <!-- Множественное-->
45
- <!-- </b-checkbox>-->
46
- <!-- </b-col>-->
47
- <!-- </b-form-row>-->
48
- <b-form-row>
49
- <b-col lg="12">
50
- <b-checkbox size="lg" v-model="field.visible">Отображаемое</b-checkbox>
51
- </b-col>
52
- </b-form-row>
53
- <b-form-row>
54
- <b-col lg="12">
55
- <b-checkbox size="lg" v-model="field.editable">Редактируемое</b-checkbox>
56
- </b-col>
57
- </b-form-row>
58
- <b-form-row>
59
- <b-col lg="12">
60
- <b-checkbox size="lg" v-model="field.required">Обязательное</b-checkbox>
61
- </b-col>
62
- </b-form-row>
63
- </div>
64
- <div class="rb-form-section">
65
- <div class="rb-title">
66
- Настройки ввода
67
- </div>
68
-
69
- <b-form-row>
70
- <b-col lg="12">
71
- <b-form-group label="Тип инпута">
72
- <rb-dropdown-input v-model="currentInputName"
73
- :items="inputOptions"
74
- display-field="text"
75
- value-field="name"
76
- block>
77
- </rb-dropdown-input>
78
- </b-form-group>
79
-
80
- <template v-for="(prop, propName) in field.input.props">
81
- <b-form-group :label="prop.label" :key="propName" v-if="prop.visible">
82
- <component v-bind:is="getPropInputType(prop, propName)"
83
- v-model="field.input.propsData[propName]"
84
- v-bind="getPropInputPropData(prop, propName)"></component>
85
- </b-form-group>
86
- </template>
87
- </b-col>
88
- </b-form-row>
89
- </div>
90
-
91
- <div class="rb-form-section" v-if="field.input">
92
- <div class="rb-title">Значение по-умолчанию</div>
93
-
94
- <b-form-row>
95
- <b-col lg="12">
96
- <b-form-group :label="field.labelRu" ref="inputContainer">
97
- <component v-bind:is="field.input.type"
98
- v-model="field.defaultValue"
99
- v-bind="field.input.propsData"></component>
100
- </b-form-group>
101
- </b-col>
102
- </b-form-row>
103
- </div>
104
-
105
- <div class="rb-form-section" v-if="field.input">
106
- <div class="rb-title">Настройки для извлечения фактов из вложений</div>
107
-
108
- <b-form-row>
109
- <b-col lg="12">
110
- <b-form-group label="Промпт">
111
- <b-form-textarea v-model="field.prompt"/>
112
- </b-form-group>
113
- <b-form-group label="Тип данных">
114
- <b-form-input v-model="field.promptType"/>
115
- </b-form-group>
116
- </b-col>
117
- </b-form-row>
118
- </div>
119
-
120
- <div class="rb-form-section">
121
- <div class="rb-title">Правила</div>
122
-
123
- <b-list-group :data-hash="rulesHash">
124
- <b-list-group-item v-for="rule in field.rules"
125
- @click="editRule(rule, $event)"
126
- :key="rule.id"
127
- :data-hash="rulesHash"
128
- class="cursor-pointer d-flex justify-content-between align-items-center">
129
- <rb-text>{{rule.name}}</rb-text>
130
- <rb-icon icon="icon-close" class="rb-remove-rule" @click="removeRule(rule)"></rb-icon>
131
- </b-list-group-item>
132
- <b-list-group-item @click="addRule" class="cursor-pointer">
133
- <rb-icon :icon="iconAdd"></rb-icon>
134
- <rb-text>Добавить правило ...</rb-text>
135
- </b-list-group-item>
136
- </b-list-group>
137
- </div>
138
- </b-form>
139
-
140
- <field-rule-form-modal :rule="ruleModalCfg.rule"
141
- :form-config="formConfig"
142
- :field="field"
143
- :mode="ruleModalCfg.mode"
144
- :on-after-ok="ruleModalCfg.onAfterOk"
145
- ></field-rule-form-modal>
146
- </b-sidebar>
147
- </template>
148
-
149
- <script>
150
- import FieldRuleFormModal from "./FieldRuleFormModal";
151
- import {UtFormConstructor} from "../utils/UtFormConstructor";
152
- import {UtRandom} from "@/utils/UtRandom.js";
153
-
154
- export default {
155
- name: 'DocTemplateFieldSidebar',
156
- components: {FieldRuleFormModal},
157
- props: {
158
- value: {
159
- type: Object,
160
- default: null
161
- },
162
- visible: {
163
- type: Boolean,
164
- default: null,
165
- },
166
- formConfig: Object,
167
- },
168
- data() {
169
- return {
170
- innerVisible: null,
171
- field: null,
172
- currentInputName: null,
173
- modalId: 'rb-field-rule-form-modal',
174
- ruleModalCfg: {
175
- rule: {},
176
- mode: 'ins',
177
- },
178
- rulesHash: UtRandom.getRandomString(10),
179
- }
180
- },
181
- computed: {
182
- inputOptions() {
183
- return this.field ? UtFormConstructor.getInputTypes(this.field) : [];
184
- },
185
- iconCloseSidebar() {
186
- return UtFormConstructor.config.icons.iconCloseFieldSidebar;
187
- },
188
- iconOpenSidebar() {
189
- return UtFormConstructor.config.icons.iconOpenFieldSidebar;
190
- },
191
- iconAdd() {
192
- return UtFormConstructor.config.icons.iconAdd;
193
- },
194
- rules() {
195
- return UtFormConstructor.getAvailableFieldRules(this.field);
196
- },
197
- hasMultipleInputTypes() {
198
- return UtFormConstructor.hasMultipleInputTypes(this.field);
199
- },
200
- multiple() {
201
- return this.field && this.field.multiple;
202
- }
203
- },
204
- watch: {
205
- visible() {
206
- this.innerVisible = this.visible;
207
- },
208
- value() {
209
- this.field = this.value;
210
- if (this.field && this.field.input) {
211
- this.currentInputName = this.field.input.name;
212
- }
213
- },
214
- field: {
215
- handler() {
216
- this.$emit('input', this.field);
217
- this.$emit('change', this.field);
218
- },
219
- deep: true
220
- },
221
- currentInputName(val) {
222
- this.field.input = UtFormConstructor.getInputTypeByName(this.currentInputName, this.field);
223
- },
224
- multiple() {
225
- let input = UtFormConstructor.getDefaultInput(this.field);
226
- if (this.field.multiple) {
227
- this.currentInputName = input.name;
228
- }
229
- },
230
- },
231
- methods: {
232
- hide() {
233
- this.innerVisible = false;
234
- this.$emit('hide');
235
- },
236
- getPropInputType(prop, propName) {
237
- if (prop?.component) {
238
- return prop.component;
239
- }
240
- if (['string', 'number'].includes(prop.type)) {
241
- return 'b-form-input';
242
- } else if (['date'].includes(prop.type)){
243
- return 'rb-date-picker-input';
244
- } else {
245
- return 'rb-boolean-single-option-input';
246
- }
247
- },
248
- getPropInputPropData(prop, propName) {
249
- if (prop?.componentProps) {
250
- return prop.componentProps;
251
- }
252
- if (prop.type === 'string') {
253
- return {
254
- type: 'text',
255
- }
256
- } else if (prop.type === 'number'){
257
- return {
258
- type: 'number'
259
- }
260
- } else {
261
- return {}
262
- }
263
- },
264
- addRule() {
265
- this.ruleModalCfg = {
266
- mode: 'ins',
267
- rule: {
268
- name: null,
269
- script: null,
270
- },
271
- onAfterOk: (rule) => {
272
- this.field.rules = this.field.rules ? this.field.rules : [];
273
- this.field.rules.push({
274
- ...rule
275
- });
276
- this.rulesHash = UtRandom.getRandomString(10);
277
- }
278
- }
279
- this.$bvModal.show(this.modalId);
280
- },
281
- editRule(rule, event) {
282
- if (event.target.classList
283
- && event.target.classList.contains('rb-remove-rule')) {
284
- return;
285
- }
286
-
287
- this.ruleModalCfg = {
288
- mode: 'upd',
289
- rule: {...rule},
290
- onAfterOk: (modalRule) => {
291
- Object.assign(rule, modalRule)
292
- }
293
- }
294
- this.$bvModal.show(this.modalId);
295
- },
296
- removeRule(rule) {
297
- let index = this.field.rules.findIndex(r => r.id === rule.id);
298
- if (index >= 0) {
299
- this.field.rules.splice(index, 1);
300
- }
301
- this.rulesHash = UtRandom.getRandomString(10);
302
- }
303
- },
304
- created() {
305
- if (this.value) {
306
- this.innerVisible = this.visible;
307
- this.field = this.value;
308
- if (this.field && this.field.input) {
309
- this.currentInputName = this.field.input.name;
310
- }
311
- }
312
- }
313
- }
314
- </script>
1
+ <template>
2
+ <b-sidebar right class="rb-doc-template-field-sidebar" bg-variant="white" shadow
3
+ v-model="innerVisible">
4
+ <template #header>
5
+ <b-button class="rb-sidebar-close-btn" variant="secondary" @click="hide">
6
+ <rb-icon :icon="innerVisible? iconCloseSidebar: iconOpenSidebar"></rb-icon>
7
+ </b-button>
8
+ <h4>Редактор свойств</h4>
9
+ </template>
10
+
11
+ <b-form v-if="field">
12
+ <div class="rb-form-section">
13
+ <b-form-row>
14
+ <b-col lg="12">
15
+ <b-form-group label="Название" class="rb-immutable">
16
+ <rb-text>{{field.name}}</rb-text>
17
+ </b-form-group>
18
+ </b-col>
19
+ </b-form-row>
20
+ <b-form-row>
21
+ <b-col lg="12">
22
+ <b-form-group label="Тип" class="rb-immutable">
23
+ <rb-text>{{field.type}}</rb-text>
24
+ </b-form-group>
25
+ </b-col>
26
+ </b-form-row>
27
+ <b-form-row>
28
+ <b-col lg="12">
29
+ <b-form-group label="Тэг для файла шаблона" class="rb-immutable">
30
+ <rb-text>{{field.tag}}</rb-text>
31
+ </b-form-group>
32
+ </b-col>
33
+ </b-form-row>
34
+ <b-form-row>
35
+ <b-col lg="12">
36
+ <b-form-group label="Заголовок">
37
+ <rb-multi-lang-input v-model="field" />
38
+ </b-form-group>
39
+ </b-col>
40
+ </b-form-row>
41
+ <!-- <b-form-row>-->
42
+ <!-- <b-col lg="12">-->
43
+ <!-- <b-checkbox size="lg" v-model="field.multiple" :disabled="!hasMultipleInputTypes">-->
44
+ <!-- Множественное-->
45
+ <!-- </b-checkbox>-->
46
+ <!-- </b-col>-->
47
+ <!-- </b-form-row>-->
48
+ <b-form-row>
49
+ <b-col lg="12">
50
+ <b-checkbox size="lg" v-model="field.visible">Отображаемое</b-checkbox>
51
+ </b-col>
52
+ </b-form-row>
53
+ <b-form-row>
54
+ <b-col lg="12">
55
+ <b-checkbox size="lg" v-model="field.editable">Редактируемое</b-checkbox>
56
+ </b-col>
57
+ </b-form-row>
58
+ <b-form-row>
59
+ <b-col lg="12">
60
+ <b-checkbox size="lg" v-model="field.required">Обязательное</b-checkbox>
61
+ </b-col>
62
+ </b-form-row>
63
+ </div>
64
+ <div class="rb-form-section">
65
+ <div class="rb-title">
66
+ Настройки ввода
67
+ </div>
68
+
69
+ <b-form-row>
70
+ <b-col lg="12">
71
+ <b-form-group label="Тип инпута">
72
+ <rb-dropdown-input v-model="currentInputName"
73
+ :items="inputOptions"
74
+ display-field="text"
75
+ value-field="name"
76
+ block>
77
+ </rb-dropdown-input>
78
+ </b-form-group>
79
+
80
+ <template v-for="(prop, propName) in field.input.props">
81
+ <b-form-group :label="prop.label" :key="propName" v-if="prop.visible">
82
+ <component v-bind:is="getPropInputType(prop, propName)"
83
+ v-model="field.input.propsData[propName]"
84
+ v-bind="getPropInputPropData(prop, propName)"></component>
85
+ </b-form-group>
86
+ </template>
87
+ </b-col>
88
+ </b-form-row>
89
+ </div>
90
+
91
+ <div class="rb-form-section" v-if="field.input">
92
+ <div class="rb-title">Значение по-умолчанию</div>
93
+
94
+ <b-form-row>
95
+ <b-col lg="12">
96
+ <b-form-group :label="field.labelRu" ref="inputContainer">
97
+ <component v-bind:is="field.input.type"
98
+ v-model="field.defaultValue"
99
+ v-bind="field.input.propsData"></component>
100
+ </b-form-group>
101
+ </b-col>
102
+ </b-form-row>
103
+ </div>
104
+
105
+ <div class="rb-form-section" v-if="field.input">
106
+ <div class="rb-title">Настройки для извлечения фактов из вложений</div>
107
+
108
+ <b-form-row>
109
+ <b-col lg="12">
110
+ <b-form-group label="Промпт">
111
+ <b-form-textarea v-model="field.prompt"/>
112
+ </b-form-group>
113
+ <b-form-group label="Тип данных">
114
+ <b-form-input v-model="field.promptType"/>
115
+ </b-form-group>
116
+ </b-col>
117
+ </b-form-row>
118
+ </div>
119
+
120
+ <div class="rb-form-section">
121
+ <div class="rb-title">Правила</div>
122
+
123
+ <b-list-group :data-hash="rulesHash">
124
+ <b-list-group-item v-for="rule in field.rules"
125
+ @click="editRule(rule, $event)"
126
+ :key="rule.id"
127
+ :data-hash="rulesHash"
128
+ class="cursor-pointer d-flex justify-content-between align-items-center">
129
+ <rb-text>{{rule.name}}</rb-text>
130
+ <rb-icon icon="icon-close" class="rb-remove-rule" @click="removeRule(rule)"></rb-icon>
131
+ </b-list-group-item>
132
+ <b-list-group-item @click="addRule" class="cursor-pointer">
133
+ <rb-icon :icon="iconAdd"></rb-icon>
134
+ <rb-text>Добавить правило ...</rb-text>
135
+ </b-list-group-item>
136
+ </b-list-group>
137
+ </div>
138
+ </b-form>
139
+
140
+ <field-rule-form-modal :rule="ruleModalCfg.rule"
141
+ :form-config="formConfig"
142
+ :field="field"
143
+ :mode="ruleModalCfg.mode"
144
+ :on-after-ok="ruleModalCfg.onAfterOk"
145
+ ></field-rule-form-modal>
146
+ </b-sidebar>
147
+ </template>
148
+
149
+ <script>
150
+ import FieldRuleFormModal from "./FieldRuleFormModal";
151
+ import {UtFormConstructor} from "../utils/UtFormConstructor";
152
+ import {UtRandom} from "@/utils/UtRandom.js";
153
+
154
+ export default {
155
+ name: 'DocTemplateFieldSidebar',
156
+ components: {FieldRuleFormModal},
157
+ props: {
158
+ value: {
159
+ type: Object,
160
+ default: null
161
+ },
162
+ visible: {
163
+ type: Boolean,
164
+ default: null,
165
+ },
166
+ formConfig: Object,
167
+ },
168
+ data() {
169
+ return {
170
+ innerVisible: null,
171
+ field: null,
172
+ currentInputName: null,
173
+ modalId: 'rb-field-rule-form-modal',
174
+ ruleModalCfg: {
175
+ rule: {},
176
+ mode: 'ins',
177
+ },
178
+ rulesHash: UtRandom.getRandomString(10),
179
+ }
180
+ },
181
+ computed: {
182
+ inputOptions() {
183
+ return this.field ? UtFormConstructor.getInputTypes(this.field) : [];
184
+ },
185
+ iconCloseSidebar() {
186
+ return UtFormConstructor.config.icons.iconCloseFieldSidebar;
187
+ },
188
+ iconOpenSidebar() {
189
+ return UtFormConstructor.config.icons.iconOpenFieldSidebar;
190
+ },
191
+ iconAdd() {
192
+ return UtFormConstructor.config.icons.iconAdd;
193
+ },
194
+ rules() {
195
+ return UtFormConstructor.getAvailableFieldRules(this.field);
196
+ },
197
+ hasMultipleInputTypes() {
198
+ return UtFormConstructor.hasMultipleInputTypes(this.field);
199
+ },
200
+ multiple() {
201
+ return this.field && this.field.multiple;
202
+ }
203
+ },
204
+ watch: {
205
+ visible() {
206
+ this.innerVisible = this.visible;
207
+ },
208
+ value() {
209
+ this.field = this.value;
210
+ if (this.field && this.field.input) {
211
+ this.currentInputName = this.field.input.name;
212
+ }
213
+ },
214
+ field: {
215
+ handler() {
216
+ this.$emit('input', this.field);
217
+ this.$emit('change', this.field);
218
+ },
219
+ deep: true
220
+ },
221
+ currentInputName(val) {
222
+ this.field.input = UtFormConstructor.getInputTypeByName(this.currentInputName, this.field);
223
+ },
224
+ multiple() {
225
+ let input = UtFormConstructor.getDefaultInput(this.field);
226
+ if (this.field.multiple) {
227
+ this.currentInputName = input.name;
228
+ }
229
+ },
230
+ },
231
+ methods: {
232
+ hide() {
233
+ this.innerVisible = false;
234
+ this.$emit('hide');
235
+ },
236
+ getPropInputType(prop, propName) {
237
+ if (prop?.component) {
238
+ return prop.component;
239
+ }
240
+ if (['string', 'number'].includes(prop.type)) {
241
+ return 'b-form-input';
242
+ } else if (['date'].includes(prop.type)){
243
+ return 'rb-date-picker-input';
244
+ } else {
245
+ return 'rb-boolean-single-option-input';
246
+ }
247
+ },
248
+ getPropInputPropData(prop, propName) {
249
+ if (prop?.componentProps) {
250
+ return prop.componentProps;
251
+ }
252
+ if (prop.type === 'string') {
253
+ return {
254
+ type: 'text',
255
+ }
256
+ } else if (prop.type === 'number'){
257
+ return {
258
+ type: 'number'
259
+ }
260
+ } else {
261
+ return {}
262
+ }
263
+ },
264
+ addRule() {
265
+ this.ruleModalCfg = {
266
+ mode: 'ins',
267
+ rule: {
268
+ name: null,
269
+ script: null,
270
+ },
271
+ onAfterOk: (rule) => {
272
+ this.field.rules = this.field.rules ? this.field.rules : [];
273
+ this.field.rules.push({
274
+ ...rule
275
+ });
276
+ this.rulesHash = UtRandom.getRandomString(10);
277
+ }
278
+ }
279
+ this.$bvModal.show(this.modalId);
280
+ },
281
+ editRule(rule, event) {
282
+ if (event.target.classList
283
+ && event.target.classList.contains('rb-remove-rule')) {
284
+ return;
285
+ }
286
+
287
+ this.ruleModalCfg = {
288
+ mode: 'upd',
289
+ rule: {...rule},
290
+ onAfterOk: (modalRule) => {
291
+ Object.assign(rule, modalRule)
292
+ }
293
+ }
294
+ this.$bvModal.show(this.modalId);
295
+ },
296
+ removeRule(rule) {
297
+ let index = this.field.rules.findIndex(r => r.id === rule.id);
298
+ if (index >= 0) {
299
+ this.field.rules.splice(index, 1);
300
+ }
301
+ this.rulesHash = UtRandom.getRandomString(10);
302
+ }
303
+ },
304
+ created() {
305
+ if (this.value) {
306
+ this.innerVisible = this.visible;
307
+ this.field = this.value;
308
+ if (this.field && this.field.input) {
309
+ this.currentInputName = this.field.input.name;
310
+ }
311
+ }
312
+ }
313
+ }
314
+ </script>