blob: 4ec5a3391b2db02cfce151ef9574e97b754ba0bd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<template>
<slot class="flex flex-row">
<div class="flex-1 px-4 mt-3">
<div v-if="!showEdit" class="">
<div class="flex justify-between p-4 pt-0">
<div class="w-[20rem]">
<h4>{{ $props.title }}</h4>
</div>
<div class="h-full">
<div :class="{'opacity-100':waiting}" class="opacity-0">
<fa-icon icon="spinner" class="animate-spin" />
</div>
</div>
<div class="mt-auto">
<div class="flex justify-center">
<nav aria-label="Pagination">
<ul class="inline-flex items-center space-x-1 text-sm rounded-md">
<li>
<button :disabled="isFirstPage" class="page-button" @click="prev">
<fa-icon icon="chevron-left" />
</button>
</li>
<li>
<span class="inline-flex items-center px-4 py-2 space-x-1">
Page
<b class="mx-1">
{{ currentPage }}
</b>
of
<b class="ml-1">
{{ pageCount }}
</b>
</span>
</li>
<li>
<button :disabled="isLastPage" class="page-button" @click="next">
<fa-icon icon="chevron-right" />
</button>
</li>
</ul>
</nav>
</div>
</div>
<div class="h-fit">
<button class="rounded btn primary sm" @click="openNew">
<fa-icon :icon="['fas', 'plus']" class="mr-2" />
New
</button>
</div>
</div>
<table class="edit-table">
<slot name="table" />
</table>
</div>
<div v-else class="">
<slot name="editor" />
</div>
</div>
</slot>
</template>
<script setup lang="ts">
import { toRefs } from 'vue';
import { useWait } from '@vnuge/vnlib.browser';
import { UseOffsetPaginationReturn } from '@vueuse/core';
const emit = defineEmits(['open-new'])
const props = defineProps<{
title: string,
showEdit: boolean,
pagination: UseOffsetPaginationReturn
}>()
const { showEdit } = toRefs(props)
const { waiting } = useWait()
//Get pagination
const { pageCount, next, prev, isLastPage, isFirstPage, currentPage } = props.pagination
const openNew = () => {
emit('open-new')
}
</script>
<style lang="scss">
button.page-button{
@apply inline-flex items-center px-2 py-1.5 space-x-2 font-medium;
@apply text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-50;
@apply dark:border-dark-300 dark:bg-transparent dark:text-gray-300 hover:dark:bg-dark-700;
}
</style>
|
