123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
- // Styles
- import "./VDataTableFooter.css";
- // Components
- import { VPagination } from "../VPagination/index.mjs";
- import { VSelect } from "../VSelect/index.mjs"; // Composables
- import { usePagination } from "./composables/paginate.mjs";
- import { IconValue } from "../../composables/icons.mjs";
- import { useLocale } from "../../composables/locale.mjs"; // Utilities
- import { computed } from 'vue';
- import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
- export const makeVDataTableFooterProps = propsFactory({
- prevIcon: {
- type: IconValue,
- default: '$prev'
- },
- nextIcon: {
- type: IconValue,
- default: '$next'
- },
- firstIcon: {
- type: IconValue,
- default: '$first'
- },
- lastIcon: {
- type: IconValue,
- default: '$last'
- },
- itemsPerPageText: {
- type: String,
- default: '$vuetify.dataFooter.itemsPerPageText'
- },
- pageText: {
- type: String,
- default: '$vuetify.dataFooter.pageText'
- },
- firstPageLabel: {
- type: String,
- default: '$vuetify.dataFooter.firstPage'
- },
- prevPageLabel: {
- type: String,
- default: '$vuetify.dataFooter.prevPage'
- },
- nextPageLabel: {
- type: String,
- default: '$vuetify.dataFooter.nextPage'
- },
- lastPageLabel: {
- type: String,
- default: '$vuetify.dataFooter.lastPage'
- },
- itemsPerPageOptions: {
- type: Array,
- default: () => [{
- value: 10,
- title: '10'
- }, {
- value: 25,
- title: '25'
- }, {
- value: 50,
- title: '50'
- }, {
- value: 100,
- title: '100'
- }, {
- value: -1,
- title: '$vuetify.dataFooter.itemsPerPageAll'
- }]
- },
- showCurrentPage: Boolean
- }, 'VDataTableFooter');
- export const VDataTableFooter = genericComponent()({
- name: 'VDataTableFooter',
- props: makeVDataTableFooterProps(),
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const {
- t
- } = useLocale();
- const {
- page,
- pageCount,
- startIndex,
- stopIndex,
- itemsLength,
- itemsPerPage,
- setItemsPerPage
- } = usePagination();
- const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => {
- if (typeof option === 'number') {
- return {
- value: option,
- title: option === -1 ? t('$vuetify.dataFooter.itemsPerPageAll') : String(option)
- };
- }
- return {
- ...option,
- title: !isNaN(Number(option.title)) ? option.title : t(option.title)
- };
- }));
- useRender(() => {
- const paginationProps = VPagination.filterProps(props);
- return _createVNode("div", {
- "class": "v-data-table-footer"
- }, [slots.prepend?.(), _createVNode("div", {
- "class": "v-data-table-footer__items-per-page"
- }, [_createVNode("span", null, [t(props.itemsPerPageText)]), _createVNode(VSelect, {
- "items": itemsPerPageOptions.value,
- "modelValue": itemsPerPage.value,
- "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
- "density": "compact",
- "variant": "outlined",
- "hide-details": true
- }, null)]), _createVNode("div", {
- "class": "v-data-table-footer__info"
- }, [_createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), _createVNode("div", {
- "class": "v-data-table-footer__pagination"
- }, [_createVNode(VPagination, _mergeProps({
- "modelValue": page.value,
- "onUpdate:modelValue": $event => page.value = $event,
- "density": "comfortable",
- "first-aria-label": props.firstPageLabel,
- "last-aria-label": props.lastPageLabel,
- "length": pageCount.value,
- "next-aria-label": props.nextPageLabel,
- "previous-aria-label": props.prevPageLabel,
- "rounded": true,
- "show-first-last-page": true,
- "total-visible": props.showCurrentPage ? 1 : 0,
- "variant": "plain"
- }, paginationProps), null)])]);
- });
- return {};
- }
- });
- //# sourceMappingURL=VDataTableFooter.mjs.map
|