Profectus-Demo/src/data/Changelog.vue

83 lines
1.6 KiB
Vue

<template>
<Modal v-model="isOpen">
<template v-slot:header>
<h2>Changelog</h2>
</template>
<template v-slot:body>
<details open>
<summary>v0.0 Initial Commit - <time>2021-09-04</time></summary>
This is the first release :D
<ul>
<li class="feature">Did everything</li>
<li class="fix">Had some fun</li>
<li class="breaking">Removed everything</li>
<li class="balancing">Created some bugs to fix later</li>
</ul>
</details>
</template>
</Modal>
</template>
<script setup lang="ts">
import Modal from "@/components/Modal.vue";
import { ref } from "vue";
const isOpen = ref(false);
defineExpose({
open() {
isOpen.value = true;
}
});
</script>
<style scoped>
details {
margin: 10px 0;
padding-left: 18px;
}
summary {
cursor: pointer;
margin-bottom: 10px;
margin-left: -18px;
}
ul {
margin: var(--feature-margin) 0;
background: var(--raised-background);
border: 2px solid rgba(0, 0, 0, 0.125);
padding: 5px 5px 5px 15px;
list-style: inside;
}
li {
margin: 8px 0;
}
li::before {
padding: 2px 8px;
margin-right: 8px;
border-radius: var(--border-radius);
}
.feature::before {
content: "Feature";
background: var(--accent1);
}
.fix::before {
content: "Fix";
background: var(--accent2);
}
.balancing::before {
content: "Balancing";
background: var(--accent3);
}
.breaking::before {
content: "Breaking";
background: var(--danger);
}
</style>