pixelfed/resources/assets/components/admin/partial/AdminSettingsTabHeader.vue

64 lines
1.6 KiB
Vue

<template>
<div>
<div class="d-flex justify-content-between align-items-center">
<div style="width:100px;"></div>
<div>
<h2 class="display-4 mb-0" style="font-weight: 800;">{{ title }}</h2>
</div>
<div>
<button
class="btn btn-primary rounded-pill font-weight-bold px-5"
:disabled="isSaving || saved"
@click.prevent="save">
<template v-if="isSaving === true"><b-spinner small class="mx-2" /></template>
<template v-else>{{ buttonLabel }}</template>
</button>
</div>
</div>
<hr class="mt-3">
</div>
</template>
<script>
export default {
props: {
title: {
type: String
},
saving: {
type: Boolean
},
saved: {
type: Boolean
}
},
computed: {
buttonLabel: {
get() {
if(this.saved) {
return 'Saved';
}
if(this.saving) {
return 'Saving';
}
return 'Save';
}
},
isSaving: {
get() {
return this.saving;
}
}
},
methods: {
save($event) {
$event.currentTarget?.blur();
this.$emit('save');
}
}
}
</script>