78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<template>
|
|
<div class="card">
|
|
<header class="card-header has-background-grey-lighter is-unselectable">
|
|
<p class="card-header-title" @click="toggle">{{ header }}</p>
|
|
<p v-if="refreshable" class="card-header-icon px-0">
|
|
<button class="tag button icon is-info" @click="refresh">
|
|
<font-awesome-icon
|
|
icon="fa-solid fa-arrows-rotate"
|
|
:spin="is_open && !ready"
|
|
/>
|
|
</button>
|
|
</p>
|
|
<button class="card-header-icon" @click="toggle">
|
|
<span class="icon">
|
|
<font-awesome-icon
|
|
:icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
|
|
/>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
|
|
<template v-if="is_open">
|
|
<slot v-if="ready" name="default" />
|
|
<div v-else class="card-content">
|
|
<progress class="progress is-info" max="100" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
@Options({
|
|
props: {
|
|
header: {
|
|
type: String,
|
|
required: false,
|
|
default: "",
|
|
},
|
|
ready: Boolean,
|
|
refreshable: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: ["open"],
|
|
})
|
|
export default class extends Vue {
|
|
public header!: string;
|
|
public ready!: boolean;
|
|
public refreshable!: boolean;
|
|
|
|
public is_open = false;
|
|
|
|
public toggle() {
|
|
this.is_open = !this.is_open;
|
|
if (this.is_open) this.$emit("open");
|
|
}
|
|
|
|
public refresh() {
|
|
this.is_open = false;
|
|
this.toggle();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div.card {
|
|
&:not(:last-child) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
> .card-header {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|