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,