94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
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>
|