skouter/components/estimates.vue

<template>
<div class="page">
<h2>Estimates</h2>

<section class="form inputs">
<h3>Default Fees</h3>
<div v-for="(fee, indx) in fees"
:key="fee.name + indx" class="fee"
>
	<label @click="() => edit = fee">
	${{fee.amount}}{{fee.perc && ` (${fee.perc}%)`}} - {{fee.name}}<br>
	{{fee.type}}
	</label>
	<img width="21" height="21" src="/assets/image/icon/x-red.svg"
	@click="() => remove(indx, 1)">
</div>
<button @click="() => edit = {}">New Fee</button>
</section>

<Dialog v-if="edit" @close="() => edit = null">
<h3>hi</h3>
</Dialog>

<section class="inputs">
<h3>Saved Estimates</h3>

</section>

</div>
</template>

<script>
import Dialog from "./dialog.vue"

function newFee() {

}

function newType() {

}

function remove() {

}

	export default {
		props: [ 'user', 'fees' ],
		emits: [ 'deleteFee', 'update' ],
		components: { Dialog },
		methods: { newFee, newType, remove }, 
		data() {
			return {
				edit: null
			}
		},
	}
</script>