diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue index 784818b6..2a2fd20e 100644 --- a/app/javascript/submission_form/area.vue +++ b/app/javascript/submission_form/area.vue @@ -219,6 +219,48 @@ > {{ formatNumber(modelValue, field.preferences?.format) }} + + + + + + + + + - - - + + + + diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index c786061a..d88475b3 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -10,7 +10,7 @@
+ + + + + + + +
+
@@ -397,6 +439,16 @@ export default { required: false, default: false }, + pageWidth: { + type: Number, + required: false, + default: 0 + }, + pageHeight: { + type: Number, + required: false, + default: 0 + }, defaultSubmitters: { type: Array, required: false, @@ -436,8 +488,33 @@ export default { fieldNames: FieldType.computed.fieldNames, fieldLabels: FieldType.computed.fieldLabels, fieldIcons: FieldType.computed.fieldIcons, + bgClasses () { + if (this.field.type === 'heading') { + return 'bg-gray-50' + } else if (this.field.type === 'strikethrough') { + return 'bg-transparent' + } else { + return this.bgColors[this.submitterIndex % this.bgColors.length] + } + }, + activeBorderClasses () { + if (this.field.type === 'heading') { + return '' + } else if (this.field.type === 'strikethrough') { + return 'border-dashed border-gray-300' + } else { + return this.borderColors[this.submitterIndex % this.borderColors.length] + } + }, isWFullType () { - return ['cells', 'checkbox', 'radio', 'multiple', 'select'].includes(this.field.type) + return ['cells', 'checkbox', 'radio', 'multiple', 'select', 'strikethrough'].includes(this.field.type) + }, + strikethroughWidth () { + if (this.isInlineSize) { + return '0.6cqmin' + } else { + return 'clamp(0px, 0.5vw, 6px)' + } }, fontStyle () { let fontSize = '' @@ -471,8 +548,11 @@ export default { lineHeight () { return 1.3 }, + basePageWidth () { + return 1040.0 + }, fontScale () { - return 1040 / 612.0 + return this.basePageWidth / 612.0 }, isDefaultValuePresent () { return this.field?.default_value || this.field?.default_value === 0 @@ -742,8 +822,13 @@ export default { delete this.field.options } - if (['heading'].includes(this.field.type)) { + if (this.field.type === 'heading') { + this.field.readonly = true + } + + if (this.field.type === 'strikethrough') { this.field.readonly = true + this.field.default_value = true } if (['select', 'multiple', 'radio'].includes(this.field.type)) { diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index a9f3709b..c679a37e 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -402,7 +402,10 @@ :style="{ backgroundColor }" >
-

+

+ {{ t('draw_strikethrough_the_document') }} +

+

{{ t('draw_field_on_the_document') }}

@@ -413,7 +416,7 @@ {{ t('cancel') }} { - if (f !== this.item && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) { + if (f !== this.item && !this.excludeTypes.includes(f.type) && (!f.conditions?.length || !f.conditions.find((c) => c.field_uuid === this.item.uuid))) { acc.push(f) } diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue index d8b6538e..f4a97212 100644 --- a/app/javascript/template_builder/field.vue +++ b/app/javascript/template_builder/field.vue @@ -14,7 +14,7 @@
f.type === field.type).indexOf(field) - if (field.type === 'heading') { + if (field.type === 'heading' || field.type === 'strikethrough') { return `${this.fieldNames[field.type]} ${typeIndex + 1}` } else { return `${this.fieldLabels[field.type]} ${typeIndex + 1}` @@ -485,8 +484,13 @@ export default { this.field.options ||= [{ value: '', uuid: v4() }] } - if (['heading'].includes(this.field.type)) { + if (this.field.type === 'heading') { + this.field.readonly = true + } + + if (this.field.type === 'strikethrough') { this.field.readonly = true + this.field.default_value = true } (this.field.areas || []).forEach((area) => { diff --git a/app/javascript/template_builder/field_settings.vue b/app/javascript/template_builder/field_settings.vue index f446bca7..d3e2e842 100644 --- a/app/javascript/template_builder/field_settings.vue +++ b/app/javascript/template_builder/field_settings.vue @@ -380,7 +380,7 @@
  • +