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.
89 lines
1.7 KiB
89 lines
1.7 KiB
<template>
|
|
<div
|
|
class="flex cursor-pointer bg-red-100 bg-opacity-60 absolute"
|
|
:style="computedStyle"
|
|
>
|
|
<img
|
|
v-if="field.type === 'image' && image"
|
|
class="object-contain"
|
|
:src="image.url"
|
|
>
|
|
<img
|
|
v-else-if="field.type === 'signature' && signature"
|
|
class="object-contain"
|
|
:src="signature.url"
|
|
>
|
|
<div v-else-if="field.type === 'attachment'">
|
|
<a
|
|
v-for="(attachment, index) in attachments"
|
|
:key="index"
|
|
:href="attachment.url"
|
|
>
|
|
{{ attachment.filename }}
|
|
</a>
|
|
</div>
|
|
<span v-else>
|
|
{{ value }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FieldArea',
|
|
props: {
|
|
field: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: [Array, String, Number, Object],
|
|
required: false,
|
|
default: ''
|
|
},
|
|
attachmentsIndex: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({})
|
|
},
|
|
area: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
image () {
|
|
if (this.field.type === 'image') {
|
|
return this.attachmentsIndex[this.value]
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
signature () {
|
|
if (this.field.type === 'signature') {
|
|
return this.attachmentsIndex[this.value]
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
attachments () {
|
|
if (this.field.type === 'attachment') {
|
|
return (this.value || []).map((uuid) => this.attachmentsIndex[uuid])
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
computedStyle () {
|
|
const { x, y, w, h } = this.area
|
|
|
|
return {
|
|
top: y * 100 + '%',
|
|
left: x * 100 + '%',
|
|
width: w * 100 + '%',
|
|
height: h * 100 + '%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|