Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rework ward skins

Browse Source
This commit is contained in:
BlossomiShymae
2024-10-10 00:32:42 -05:00
parent d576a55a60
commit edd8c8a95e
4 changed files with 80 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/Pagination.vue
View File

@@ -1,30 +1,4 @@
<template>
<div class="btn-group">
<a :class="`btn btn-outline-dark`"
@click="onFirst()">
<MaterialIcon name="chevron-double-left" :size="32" />
</a>
<a :class="`btn btn-outline-dark ${hasPrevCss}`"
@click="onPrev()">
<MaterialIcon name="chevron-left" :size="32" />
</a>
<a :class="`btn btn-outline-dark text-light`">
<span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
</a>
<a :class="`btn btn-outline-dark ${hasNextCss}`"
@click="onNext()">
<MaterialIcon name="chevron-right" :size="32" />
</a>
<a :class="`btn btn-outline-dark `"
@click="onLast()">
<MaterialIcon name="chevron-double-right" :size="32" />
</a>
</div>
</template>
<script setup lang="ts">
import MaterialIcon from './MaterialIcon.vue';
const props = defineProps<{
index: number,
pages: Array<any>,
@@ -39,6 +13,26 @@ const hasPrevCss = computed(() => { return !(props.index > 0) ? "disabled" : "";
const hasNextCss = computed(() => { return !(props.index < props.count - 1) ? "disabled" : "";})
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="btn-group app-background">
<a :class="`btn btn-outline-secondary border-light border-opacity-25`"
@click="onFirst()">
<MaterialIcon name="chevron-double-left" :size="32" />
</a>
<a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasPrevCss}`"
@click="onPrev()">
<MaterialIcon name="chevron-left" :size="32" />
</a>
<a :class="`btn btn-outline-secondary border-light border-opacity-25 text-light`">
<span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
</a>
<a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasNextCss}`"
@click="onNext()">
<MaterialIcon name="chevron-right" :size="32" />
</a>
<a :class="`btn btn-outline-secondary border-light border-opacity-25`"
@click="onLast()">
<MaterialIcon name="chevron-double-right" :size="32" />
</a>
</div>
</template>