diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 3bd800ce..aabda8bf 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -6,7 +6,7 @@
:class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars, 'cursor-default': !submittable, 'border border-red-100 bg-red-100 cursor-pointer': submittable, 'border border-red-100': !isActive && submittable, 'bg-opacity-80': !isActive && !isValueSet && submittable, 'field-area-active outline-red-500 outline-dashed outline-2 z-10': isActive && submittable, 'bg-opacity-40': (isActive || isValueSet) && submittable }"
>
-
+ {{ field.name }}
+
{{ modelValue.join(', ') }}
@@ -203,6 +208,11 @@ export default {
required: false,
default: '-80px'
},
+ withFieldPlaceholder: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
submittable: {
type: Boolean,
required: false,
@@ -364,7 +374,7 @@ export default {
modelValue () {
this.$nextTick(() => {
if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > `${this.modelValue}`.length)) {
- this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+ this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
}
})
}
@@ -372,7 +382,7 @@ export default {
mounted () {
this.$nextTick(() => {
if (['date', 'text', 'number'].includes(this.field.type) && this.$refs.textContainer) {
- this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue}`.length : 0
+ this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? `${this.modelValue || (this.withFieldPlaceholder ? this.field.name : '')}`.length : 0
}
})
},
diff --git a/app/javascript/submission_form/areas.vue b/app/javascript/submission_form/areas.vue
index 6ca70920..2c4ae3ea 100644
--- a/app/javascript/submission_form/areas.vue
+++ b/app/javascript/submission_form/areas.vue
@@ -23,8 +23,9 @@
:submittable="true"
:field-index="fieldIndex"
:scroll-padding="scrollPadding"
+ :with-field-placeholder="withFieldPlaceholder"
:is-active="currentStep === step"
- :with-label="withLabel"
+ :with-label="withLabel && !withFieldPlaceholder"
:is-value-set="step.some((f) => f.uuid in values)"
:attachments-index="attachmentsIndex"
@click="$emit('focus-step', step)"
@@ -54,6 +55,11 @@ export default {
required: false,
default: () => ({})
},
+ withFieldPlaceholder: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
scrollPadding: {
type: String,
required: false,
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 724f34b8..4fc6a947 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -3,6 +3,7 @@
ref="areas"
:steps="stepFields"
:values="values"
+ :with-field-placeholder="withFieldPlaceholder"
:attachments-index="attachmentsIndex"
:with-label="!isAnonymousChecboxes && showFieldNames"
:current-step="currentStepFields"
@@ -548,6 +549,11 @@ export default {
required: false,
default: () => []
},
+ withFieldPlaceholder: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
onComplete: {
type: Function,
required: false,