2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-05-30 13:39:08 +00:00
|
|
|
<JTPDropdown
|
|
|
|
:modelValue="page"
|
|
|
|
:options="pageOptions"
|
|
|
|
optionLabel="label"
|
|
|
|
optionValue="value"
|
|
|
|
@update:modelValue="onChange($event)"
|
2023-06-20 10:03:34 +00:00
|
|
|
:class="cx('jumpToPageDropdown')"
|
2023-05-30 13:39:08 +00:00
|
|
|
:disabled="disabled"
|
2023-06-05 08:10:25 +00:00
|
|
|
:unstyled="unstyled"
|
2023-07-13 12:21:53 +00:00
|
|
|
:pt="ptm('jumpToPageDropdown')"
|
2023-06-20 10:03:34 +00:00
|
|
|
data-pc-section="jumptopagedropdown"
|
2023-08-28 09:20:55 +00:00
|
|
|
data-pc-group-section="pagedropdown"
|
2023-05-30 13:39:08 +00:00
|
|
|
></JTPDropdown>
|
2022-09-06 12:03:37 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2023-05-08 09:35:25 +00:00
|
|
|
import BaseComponent from 'primevue/basecomponent';
|
2022-09-06 12:03:37 +00:00
|
|
|
import Dropdown from 'primevue/dropdown';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'JumpToPageDropdown',
|
2023-07-04 06:29:36 +00:00
|
|
|
hostName: 'Paginator',
|
2023-05-08 09:35:25 +00:00
|
|
|
extends: BaseComponent,
|
2022-09-06 12:03:37 +00:00
|
|
|
emits: ['page-change'],
|
|
|
|
props: {
|
|
|
|
page: Number,
|
|
|
|
pageCount: Number,
|
|
|
|
disabled: Boolean
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onChange(value) {
|
|
|
|
this.$emit('page-change', value);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
pageOptions() {
|
|
|
|
let opts = [];
|
2022-09-14 11:26:01 +00:00
|
|
|
|
|
|
|
for (let i = 0; i < this.pageCount; i++) {
|
|
|
|
opts.push({ label: String(i + 1), value: i });
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
|
2022-09-06 12:03:37 +00:00
|
|
|
return opts;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
2022-09-14 11:26:01 +00:00
|
|
|
JTPDropdown: Dropdown
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
</script>
|