frontend/src/components/misc/create-edit.vue

<template>
	<modal :overflow="true" :wide="wide" #default="{ onClose }">
		<card
			:title="title"
			:shadow="false"
			:padding="false"
			class="has-text-left"
			:has-close="true"
			@close="onClose"
			:loading="loading"
		>
			<div class="p-4">
				<slot :onClose="onClose" />
			</div>

			<template #footer>
				<slot name="footer" :onClose="onClose">
					<x-button
						v-if="tertiary !== ''"
						:shadow="false"
						variant="tertiary"
						@click="$emit('tertiary')"
					>
						{{ tertiary }}
					</x-button>
					<x-button
						variant="secondary"
						@click="onClose"
					>
						{{ $t('misc.cancel') }}
					</x-button>
					<x-button
						v-if="hasPrimaryAction"
						variant="primary"
						@click="primary(onClose)"
						:icon="primaryIcon"
						:disabled="primaryDisabled || loading"
						class="ml-2"
					>
						{{ primaryLabel || $t('misc.create') }}
					</x-button>
				</slot>
			</template>
		</card>
	</modal>
</template>

<script setup lang="ts">
import type {PropType} from 'vue'
import type {IconProp} from '@fortawesome/fontawesome-svg-core'

defineProps({
	title: {
		type: String,
		default: '',
	},
	primaryLabel: {
		type: String,
	},
	primaryIcon: {
		type: String as PropType<IconProp>,
		default: 'plus',
	},
	primaryDisabled: {
		type: Boolean,
		default: false,
	},
	hasPrimaryAction: {
		type: Boolean,
		default: true,
	},
	tertiary: {
		type: String,
		default: '',
	},
	wide: {
		type: Boolean,
		default: false,
	},
	loading: {
		type: Boolean,
		default: false,
	},
})

// 'close'
const emit = defineEmits(['create', 'primary', 'tertiary'])

function primary(onClose: () => void) {
	emit('create', onClose)
	emit('primary', onClose)
}
</script>