{
- this.$refs.defaultValue.focus()
-
- if (this.$refs.defaultValue.innerText.length) {
- window.getSelection().collapse(
- this.$refs.defaultValue.firstChild,
- this.$refs.defaultValue.innerText.length
- )
- }
- })
+ this.$nextTick(() => this.focusValueInput())
} else if (this.field.type === 'checkbox') {
this.field.readonly = !this.field.readonly
this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -503,6 +499,18 @@ export default {
this.save()
}
},
+ focusValueInput () {
+ if (this.$refs.defaultValue !== document.activeElement) {
+ this.$refs.defaultValue.focus()
+
+ if (this.$refs.defaultValue.innerText.length) {
+ window.getSelection().collapse(
+ this.$refs.defaultValue.firstChild,
+ this.$refs.defaultValue.innerText.length
+ )
+ }
+ }
+ },
formatNumber (number, format) {
if (format === 'comma') {
return new Intl.NumberFormat('en-US').format(number)
@@ -572,6 +580,10 @@ export default {
delete this.field.options
}
+ if (['heading'].includes(this.field.type)) {
+ this.field.readonly = true
+ }
+
if (['select', 'multiple', 'radio'].includes(this.field.type)) {
this.field.options ||= [{ value: '', uuid: v4() }]
}
@@ -633,7 +645,11 @@ export default {
this.save()
},
onDefaultValueEnter (e) {
- this.$refs.defaultValue.blur()
+ if (this.field.type !== 'heading') {
+ e.preventDefault()
+
+ this.$refs.defaultValue.blur()
+ }
},
onNameEnter (e) {
this.$refs.name.blur()
@@ -652,24 +668,8 @@ export default {
this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
}
},
- startDrag (e) {
- this.selectedAreaRef.value = this.area
-
- if (!this.editable) {
- return
- }
-
- const rect = e.target.getBoundingClientRect()
-
- this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
-
- this.$el.getRootNode().addEventListener('mousemove', this.drag)
- this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
-
- this.$emit('start-drag')
- },
startTouchDrag (e) {
- if (e.target !== this.$refs.touchTarget) {
+ if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
return
}
@@ -714,11 +714,13 @@ export default {
this.$emit('stop-drag')
},
startMouseMove (e) {
- if (e.target !== this.$refs.touchTarget) {
+ if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
return
}
- document.activeElement?.blur()
+ if (document.activeElement !== this.$refs.defaultValue) {
+ document.activeElement?.blur()
+ }
e.preventDefault()
@@ -728,6 +730,10 @@ export default {
this.selectedAreaRef.value = this.area
+ if (this.field.type === 'heading') {
+ this.$nextTick(() => this.focusValueInput())
+ }
+
this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 0e5d1d39..af1fe2f4 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -327,7 +327,7 @@
{{ t('cancel') }}
{
+ const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
+ const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
+
+ areaRef.focusValueInput()
+ })
+ }
},
addBlankPage () {
this.isLoadingBlankPage = true
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index f27c6abd..e0b1b234 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)
- const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
-
- return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
+ if (this.field.type === 'heading') {
+ return `${this.fieldNames[field.type]} ${typeIndex + 1}`
+ } else {
+ const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
+ return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
+ }
}
},
onNameFocus (e) {
@@ -417,6 +420,10 @@ export default {
this.field.options ||= [{ value: '', uuid: v4() }]
}
+ if (['heading'].includes(this.field.type)) {
+ this.field.readonly = true
+ }
+
(this.field.areas || []).forEach((area) => {
if (this.field.type === 'cells') {
area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index 17e8ae44..debd1448 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -51,7 +51,7 @@