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.
docuseal/app/javascript/components/field.vue

82 lines
1.5 KiB

<template>
<div>
{{ field.type }}
<div v-if="field.type !== 'signature'">
<label>Name</label>
<input
v-model="field.name"
type="text"
required
>
</div>
<div>
<div
v-for="(option, index) in field.options"
:key="index"
class="flex"
>
<input
v-model="field.options[index]"
type="text"
required
>
<button @click="field.options.splice(index, 1)">
Remove
</button>
</div>
<button @click="field.options.push('')">
Add option
</button>
</div>
<div>
<div
v-for="(area, index) in areas"
:key="index"
>
{{ area }}
<button @click="removeArea(area)">
&times;
</button>
</div>
<button
class="block"
@click="$emit('set-draw', field)"
>
Draw area
</button>
</div>
<div>
<input
:id="`field_required_${field.uuid}`"
v-model="field.required"
type="checkbox"
required
>
<label :for="`field_required_${field.uuid}`">Required</label>
</div>
</div>
</template>
<script>
export default {
name: 'FlowField',
props: {
field: {
type: Object,
required: true
}
},
emits: ['set-draw'],
computed: {
areas () {
return this.field.areas || []
}
},
methods: {
removeArea (area) {
this.field.areas.splice(this.field.areas.indexOf(area), 1)
}
}
}
</script>