mirror of https://github.com/docusealco/docuseal
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.5 KiB
100 lines
2.5 KiB
<template>
|
|
<div class="absolute text-center w-full bottom-0 pr-3 mb-4">
|
|
<span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
|
|
<div class="flex items-center space-x-2">
|
|
<component
|
|
:is="fieldIcons[drawField.type]"
|
|
:width="20"
|
|
:height="20"
|
|
class="inline"
|
|
:stroke-width="1.6"
|
|
/>
|
|
<span>{{ t('draw_field').replace('{field}', fieldNames[drawField.type]) }}</span>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="link block text-center"
|
|
@click.prevent="$emit('cancel')"
|
|
>
|
|
{{ t('cancel') }}
|
|
</a>
|
|
</span>
|
|
<FieldSubmitter
|
|
:model-value="selectedSubmitter.uuid"
|
|
:submitters="submitters"
|
|
:editable="editable"
|
|
:mobile-view="true"
|
|
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
|
|
@new-submitter="save"
|
|
@remove="removeSubmitter"
|
|
@name-change="save"
|
|
@update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Field from './field'
|
|
import FieldType from './field_type'
|
|
import FieldSubmitter from './field_submitter'
|
|
|
|
export default {
|
|
name: 'MobileDrawField',
|
|
components: {
|
|
Field,
|
|
FieldSubmitter
|
|
},
|
|
inject: ['save', 't', 'backgroundColor'],
|
|
props: {
|
|
drawField: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
},
|
|
submitters: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
fields: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
selectedSubmitter: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
emits: ['change-submitter', 'cancel'],
|
|
computed: {
|
|
fieldNames: FieldType.computed.fieldNames,
|
|
fieldIcons: FieldType.computed.fieldIcons
|
|
},
|
|
methods: {
|
|
removeSubmitter (submitter) {
|
|
[...this.fields].forEach((field) => {
|
|
if (field.submitter_uuid === submitter.uuid) {
|
|
this.removeField(field)
|
|
}
|
|
})
|
|
|
|
this.submitters.splice(this.submitters.indexOf(submitter), 1)
|
|
|
|
if (this.selectedSubmitter === submitter) {
|
|
this.$emit('change-submitter', this.submitters[0])
|
|
}
|
|
|
|
this.save()
|
|
},
|
|
removeField (field) {
|
|
this.fields.splice(this.fields.indexOf(field), 1)
|
|
|
|
this.save()
|
|
}
|
|
}
|
|
}
|
|
</script>
|