[ui] Vue 3 - Migrated Paginator component
</template>
<script lang="ts">
+ import { defineComponent } from 'vue';
+
import HueIcon from './HueIcon.vue';
import DropdownMenu from './dropdown/DropdownMenu.vue';
import DropdownMenuButton from './dropdown/DropdownMenuButton.vue';
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop, Watch } from 'vue-property-decorator';
const DEFAULT_LIMIT = 25;
const PRESET_LIMITS = [DEFAULT_LIMIT, 50, 100];
- @Component({
- components: { HueIcon, DropdownMenu, DropdownMenuButton }
- })
- export default class Paginator extends Vue {
- @Prop({ required: true })
- totalEntries!: number;
-
- currentPage = 1;
- limit = DEFAULT_LIMIT;
- presetLimits = PRESET_LIMITS;
-
- mounted(): void {
- this.notifyPageChanged();
- }
-
- get offset(): number {
+ export default defineComponent({
+ components: {
+ HueIcon,
+ DropdownMenu,
+ DropdownMenuButton
+ },
+
+ props: {
+ totalEntries: {
+ type: Number,
+ required: true
+ }
+ },
+
+ emits: ['page-changed'],
+
+ setup(): {
+ presetLimits: number[];
+ } {
+ return {
+ presetLimits: PRESET_LIMITS
+ };
+ },
+
+ data(): {
+ currentPage: number;
+ limit: number;
+ } {
+ return {
+ currentPage: 1,
+ limit: DEFAULT_LIMIT
+ };
+ },
+
+ computed: {
+ offset(): number {
return (this.currentPage - 1) * this.limit;
- }
+ },
- get lastDisplayedIndex(): number {
+ lastDisplayedIndex(): number {
return Math.min(this.offset + this.limit, this.totalEntries - 1);
- }
+ },
- get totalPages(): number {
+ totalPages(): number {
return Math.ceil(this.totalEntries / this.limit) || 1;
}
+ },
- @Watch('currentPage')
+ watch: {
+ currentPage(): void {
+ this.notifyPageChanged();
+ }
+ },
+
+ mounted(): void {
+ this.notifyPageChanged();
+ },
+
+ methods: {
notifyPageChanged(): void {
this.$emit('page-changed', {
offset: this.offset,
limit: this.limit
});
- }
+ },
gotoFirstPage(): void {
this.currentPage = 1;
- }
+ },
gotoPreviousPage(): void {
this.currentPage = Math.max(this.currentPage - 1, 1);
- }
+ },
gotoNextPage(): void {
this.currentPage = Math.min(this.currentPage + 1, this.totalPages);
- }
+ },
gotoLastPage(): void {
this.currentPage = this.totalPages;
- }
+ },
setLimit(limit: number): void {
if (limit === this.limit) {
}
}
}
+ });
</script>
<style lang="scss" scoped>
