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

58 lines
1.3 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
<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-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
inheritAttrs: false,
emits: ['page-change'],
props: {
page: Number,
pageCount: Number,
disabled: Boolean
},
2023-01-10 07:57:30 +00:00
data() {
return {
d_page: this.page
2023-01-10 07:57:30 +00:00
};
},
watch: {
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>