2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-06-20 10:03:34 +00:00
|
|
|
<JTPInput
|
|
|
|
ref="jtpInput"
|
|
|
|
:modelValue="d_page"
|
|
|
|
:class="cx('jumpToPageInput')"
|
|
|
|
:aria-label="inputArialabel"
|
|
|
|
:disabled="disabled"
|
|
|
|
@update:modelValue="onChange"
|
|
|
|
:unstyled="unstyled"
|
|
|
|
:pt="ptm('jumpToPageInput')"
|
|
|
|
data-pc-section="jumptopageinput"
|
|
|
|
></JTPInput>
|
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 InputNumber from 'primevue/inputnumber';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'JumpToPageInput',
|
2023-05-08 09:35:25 +00:00
|
|
|
extends: BaseComponent,
|
2022-09-06 12:03:37 +00:00
|
|
|
inheritAttrs: false,
|
|
|
|
emits: ['page-change'],
|
|
|
|
props: {
|
|
|
|
page: Number,
|
|
|
|
pageCount: Number,
|
|
|
|
disabled: Boolean
|
|
|
|
},
|
2023-01-10 07:57:30 +00:00
|
|
|
data() {
|
|
|
|
return {
|
2023-01-16 11:51:32 +00:00
|
|
|
d_page: this.page
|
2023-01-10 07:57:30 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
watch: {
|
2023-01-16 11:51:32 +00:00
|
|
|
page(newValue) {
|
|
|
|
this.d_page = newValue;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
2023-01-16 12:22:22 +00:00
|
|
|
methods: {
|
|
|
|
onChange(value) {
|
|
|
|
if (value !== this.page) {
|
|
|
|
this.d_page = value;
|
|
|
|
this.$emit('page-change', value - 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2022-12-08 11:04:25 +00:00
|
|
|
computed: {
|
|
|
|
inputArialabel() {
|
|
|
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;
|
|
|
|
}
|
|
|
|
},
|
2022-09-06 12:03:37 +00:00
|
|
|
components: {
|
2022-09-14 11:26:01 +00:00
|
|
|
JTPInput: InputNumber
|
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>
|