primevue-mirror/components/lib/paginator/JumpToPageDropdown.vue

56 lines
1.3 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
2024-04-18 14:28:41 +00:00
<JTPSelect
2023-05-30 13:39:08 +00:00
:modelValue="page"
:options="pageOptions"
optionLabel="label"
optionValue="value"
@update:modelValue="onChange($event)"
:class="cx('jumpToPageDropdown')"
2023-05-30 13:39:08 +00:00
:disabled="disabled"
:unstyled="unstyled"
2023-07-13 12:21:53 +00:00
:pt="ptm('jumpToPageDropdown')"
data-pc-group-section="pagedropdown"
>
<template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">
<component :is="templates['jumptopagedropdownicon']" :class="slotProps.class" />
</template>
2024-04-18 14:28:41 +00:00
</JTPSelect>
2022-09-06 12:03:37 +00:00
</template>
<script>
2023-05-08 09:35:25 +00:00
import BaseComponent from 'primevue/basecomponent';
2024-04-18 14:28:41 +00:00
import Select from 'primevue/select';
2022-09-06 12:03:37 +00:00
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,
templates: null
2022-09-06 12:03:37 +00:00
},
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: {
2024-04-18 14:28:41 +00:00
JTPSelect: Select
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>