forked from mirror/pixelfed
64 lines
1.6 KiB
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>
|