diff options
Diffstat (limited to 'front-end/src/views/Blog/components/EditorTable.vue')
| -rw-r--r-- | front-end/src/views/Blog/components/EditorTable.vue | 69 |
1 files changed, 32 insertions, 37 deletions
diff --git a/front-end/src/views/Blog/components/EditorTable.vue b/front-end/src/views/Blog/components/EditorTable.vue index 4ec5a33..a7f4f66 100644 --- a/front-end/src/views/Blog/components/EditorTable.vue +++ b/front-end/src/views/Blog/components/EditorTable.vue @@ -1,3 +1,25 @@ +<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> + <template> <slot class="flex flex-row"> <div class="flex-1 px-4 mt-3"> @@ -6,12 +28,12 @@ <div class="w-[20rem]"> <h4>{{ $props.title }}</h4> </div> - <div class="h-full"> - <div :class="{'opacity-100':waiting}" class="opacity-0"> + <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="mt-auto"> <div class="flex justify-center"> <nav aria-label="Pagination"> <ul class="inline-flex items-center space-x-1 text-sm rounded-md"> @@ -22,11 +44,11 @@ </li> <li> <span class="inline-flex items-center px-4 py-2 space-x-1"> - Page + Page <b class="mx-1"> {{ currentPage }} </b> - of + of <b class="ml-1"> {{ pageCount }} </b> @@ -41,16 +63,16 @@ </nav> </div> </div> - + <div class="h-fit"> - <button class="rounded btn primary sm" @click="openNew"> + <button class="rounded btn primary sm" id="new-btn" @click="openNew"> <fa-icon :icon="['fas', 'plus']" class="mr-2" /> New </button> </div> </div> <table class="edit-table"> - <slot name="table" /> + <slot name="table" /> </table> </div> <div v-else class=""> @@ -60,37 +82,10 @@ </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{ +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; + @apply dark:border-dark-300 dark:bg-transparent dark:text-gray-300 hover:dark:bg-dark-700; } - </style>
\ No newline at end of file |