dashboard/shell/dialog/AddonConfigConfirmationDial...

102 lines
1.7 KiB
Vue

<script>
import AsyncButton from '@shell/components/AsyncButton';
import { Card } from '@components/Card';
export default {
emits: ['close'],
components: {
Card,
AsyncButton,
},
props: {
resources: {
type: Array,
required: true
},
registerBackgroundClosing: {
type: Function,
required: true
}
},
created() {
this.registerBackgroundClosing(this.closing);
},
methods: {
continue(value) {
if (this.resources[0]) {
this.resources[0](value);
delete this.resources[0];
this.$emit('close');
}
},
close() {
this.continue(false);
},
closing() {
this.continue(false);
},
apply(buttonDone) {
this.continue(true);
}
}
};
</script>
<template>
<Card
class="prompt-restore"
:show-highlight-border="false"
>
<template #title>
<h4 class="text-default-text">
{{ t('addonConfigConfirmation.title') }}
</h4>
</template>
<template #body>
<slot name="body">
{{ t('addonConfigConfirmation.body') }}
</slot>
</template>
<template #actions>
<div class="bottom">
<div class="buttons">
<button
type="button"
class="btn role-secondary mr-10"
@click="close"
>
{{ t('generic.cancel') }}
</button>
<AsyncButton
mode="continue"
@click="apply"
/>
</div>
</div>
</template>
</Card>
</template>
<style lang='scss' scoped>
.prompt-restore {
margin: 0;
}
.bottom {
display: flex;
flex-direction: column;
flex: 1;
.buttons {
display: flex;
justify-content: flex-end;
width: 100%;
}
}
</style>