<template>
    <div class="perPageSelector">
        <div class="perPageSelector__autocomplete">
            <SingleSelect
                small
                v-model="perPage"
                :options="options"/>
            <div class="perPageSelector__text" v-if="perPagesText">
                {{ perPagesText }}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import SingleSelect from "../forms/selectComponent/SingleSelect.vue";
    import Vue from "vue";

    export default Vue.extend({
        name: "PerPageSelector",
        components: {
            SingleSelect,
        },
        props: {
            value: {
                type: Number,
                default: 10,
                validator: (value: number) => {
                    return value > 0;
                },
            },
            perPagesText: String,
        },
        data() {
            return {
                options: [
                    10,
                    30,
                    50,
                    100,
                ],
            };
        },
        computed: {
            perPage: {
                get(): number {
                    return this.value;
                },
                set(value: number): void {
                    this.$emit('input', value);
                },
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "perPageSelector";
</style>
