266 lines
8.5 KiB
JavaScript
266 lines
8.5 KiB
JavaScript
import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode } from "vue";
|
|
// Styles
|
|
import "./VDataTable.css";
|
|
|
|
// Components
|
|
import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.js";
|
|
import { makeVDataTableHeadersProps, VDataTableHeaders } from "./VDataTableHeaders.js";
|
|
import { makeVDataTableRowsProps, VDataTableRows } from "./VDataTableRows.js";
|
|
import { VDivider } from "../VDivider/index.js";
|
|
import { makeVTableProps, VTable } from "../VTable/VTable.js"; // Composables
|
|
import { makeDataTableExpandProps, provideExpanded } from "./composables/expand.js";
|
|
import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from "./composables/group.js";
|
|
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.js";
|
|
import { makeDataTableItemsProps, useDataTableItems } from "./composables/items.js";
|
|
import { useOptions } from "./composables/options.js";
|
|
import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedGroups, usePaginatedItems } from "./composables/paginate.js";
|
|
import { makeDataTableSelectProps, provideSelection } from "./composables/select.js";
|
|
import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from "./composables/sort.js";
|
|
import { provideDefaults } from "../../composables/defaults.js";
|
|
import { makeFilterProps, useFilter } from "../../composables/filter.js"; // Utilities
|
|
import { computed, toRef, toRefs, toValue } from 'vue';
|
|
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
|
export const makeDataTableProps = propsFactory({
|
|
...makeVDataTableRowsProps(),
|
|
hideDefaultBody: Boolean,
|
|
hideDefaultFooter: Boolean,
|
|
hideDefaultHeader: Boolean,
|
|
width: [String, Number],
|
|
search: String,
|
|
...makeDataTableExpandProps(),
|
|
...makeDataTableGroupProps(),
|
|
...makeDataTableHeaderProps(),
|
|
...makeDataTableItemsProps(),
|
|
...makeDataTableSelectProps(),
|
|
...makeDataTableSortProps(),
|
|
...omit(makeVDataTableHeadersProps(), ['multiSort', 'initialSortOrder']),
|
|
...makeVTableProps()
|
|
}, 'DataTable');
|
|
export const makeVDataTableProps = propsFactory({
|
|
...makeDataTablePaginateProps(),
|
|
...makeDataTableProps(),
|
|
...makeFilterProps(),
|
|
...makeVDataTableFooterProps()
|
|
}, 'VDataTable');
|
|
export const VDataTable = genericComponent()({
|
|
name: 'VDataTable',
|
|
props: makeVDataTableProps(),
|
|
emits: {
|
|
'update:modelValue': value => true,
|
|
'update:page': value => true,
|
|
'update:itemsPerPage': value => true,
|
|
'update:sortBy': value => true,
|
|
'update:options': value => true,
|
|
'update:groupBy': value => true,
|
|
'update:expanded': value => true,
|
|
'update:currentItems': value => true
|
|
},
|
|
setup(props, {
|
|
attrs,
|
|
slots
|
|
}) {
|
|
const {
|
|
groupBy
|
|
} = createGroupBy(props);
|
|
const {
|
|
initialSortOrder,
|
|
sortBy,
|
|
multiSort,
|
|
mustSort
|
|
} = createSort(props);
|
|
const {
|
|
page,
|
|
itemsPerPage
|
|
} = createPagination(props);
|
|
const {
|
|
disableSort
|
|
} = toRefs(props);
|
|
const {
|
|
columns,
|
|
headers,
|
|
sortFunctions,
|
|
sortRawFunctions,
|
|
filterFunctions
|
|
} = createHeaders(props, {
|
|
groupBy,
|
|
showSelect: toRef(() => props.showSelect),
|
|
showExpand: toRef(() => props.showExpand)
|
|
});
|
|
const {
|
|
items
|
|
} = useDataTableItems(props, columns);
|
|
const search = toRef(() => props.search);
|
|
const {
|
|
filteredItems
|
|
} = useFilter(props, items, search, {
|
|
transform: item => item.columns,
|
|
customKeyFilter: filterFunctions
|
|
});
|
|
const {
|
|
toggleSort
|
|
} = provideSort({
|
|
initialSortOrder,
|
|
sortBy,
|
|
multiSort,
|
|
mustSort,
|
|
page
|
|
});
|
|
const {
|
|
sortByWithGroups,
|
|
opened,
|
|
extractRows,
|
|
isGroupOpen,
|
|
toggleGroup
|
|
} = provideGroupBy({
|
|
groupBy,
|
|
sortBy,
|
|
disableSort
|
|
});
|
|
const {
|
|
sortedItems
|
|
} = useSortedItems(props, filteredItems, sortByWithGroups, {
|
|
transform: item => ({
|
|
...item.raw,
|
|
...item.columns
|
|
}),
|
|
sortFunctions,
|
|
sortRawFunctions
|
|
});
|
|
const pageBy = computed(() => {
|
|
if (props.pageBy === 'auto') {
|
|
return props.groupBy.length ? 'group' : 'item';
|
|
}
|
|
return props.pageBy;
|
|
});
|
|
const {
|
|
pageCount,
|
|
setItemsPerPage,
|
|
prevPage,
|
|
nextPage,
|
|
setPage,
|
|
paginatedItems
|
|
} = usePaginatedGroups({
|
|
pageBy,
|
|
sortedItems,
|
|
paginate: items => {
|
|
const itemsLength = computed(() => toValue(items).length);
|
|
const {
|
|
startIndex,
|
|
stopIndex,
|
|
pageCount,
|
|
setItemsPerPage,
|
|
prevPage,
|
|
nextPage,
|
|
setPage
|
|
} = providePagination({
|
|
page,
|
|
itemsPerPage,
|
|
itemsLength
|
|
});
|
|
const {
|
|
paginatedItems
|
|
} = usePaginatedItems({
|
|
items,
|
|
startIndex,
|
|
stopIndex,
|
|
itemsPerPage
|
|
});
|
|
return {
|
|
paginatedItems,
|
|
pageCount,
|
|
setItemsPerPage,
|
|
prevPage,
|
|
nextPage,
|
|
setPage
|
|
};
|
|
},
|
|
group: items => useGroupedItems(items, groupBy, opened, () => !!slots['group-summary'])
|
|
});
|
|
const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
|
|
const {
|
|
isSelected,
|
|
select,
|
|
selectAll,
|
|
toggleSelect,
|
|
someSelected,
|
|
allSelected
|
|
} = provideSelection(props, {
|
|
allItems: items,
|
|
currentPage: paginatedItemsWithoutGroups
|
|
});
|
|
const {
|
|
isExpanded,
|
|
toggleExpand
|
|
} = provideExpanded(props);
|
|
useOptions({
|
|
page,
|
|
itemsPerPage,
|
|
sortBy,
|
|
groupBy,
|
|
search
|
|
});
|
|
provideDefaults({
|
|
VDataTableRows: {
|
|
hideNoData: toRef(() => props.hideNoData),
|
|
noDataText: toRef(() => props.noDataText),
|
|
loading: toRef(() => props.loading),
|
|
loadingText: toRef(() => props.loadingText)
|
|
}
|
|
});
|
|
const slotProps = computed(() => ({
|
|
page: page.value,
|
|
itemsPerPage: itemsPerPage.value,
|
|
sortBy: sortBy.value,
|
|
pageCount: pageCount.value,
|
|
toggleSort,
|
|
setItemsPerPage,
|
|
prevPage,
|
|
nextPage,
|
|
setPage,
|
|
someSelected: someSelected.value,
|
|
allSelected: allSelected.value,
|
|
isSelected,
|
|
select,
|
|
selectAll,
|
|
toggleSelect,
|
|
isExpanded,
|
|
toggleExpand,
|
|
isGroupOpen,
|
|
toggleGroup,
|
|
items: paginatedItemsWithoutGroups.value.map(item => item.raw),
|
|
internalItems: paginatedItemsWithoutGroups.value,
|
|
groupedItems: paginatedItems.value,
|
|
columns: columns.value,
|
|
headers: headers.value
|
|
}));
|
|
useRender(() => {
|
|
const dataTableFooterProps = VDataTableFooter.filterProps(props);
|
|
const dataTableHeadersProps = VDataTableHeaders.filterProps(omit(props, ['multiSort']));
|
|
const dataTableRowsProps = VDataTableRows.filterProps(props);
|
|
const tableProps = VTable.filterProps(props);
|
|
return _createVNode(VTable, _mergeProps({
|
|
"class": ['v-data-table', {
|
|
'v-data-table--show-select': props.showSelect,
|
|
'v-data-table--loading': props.loading
|
|
}, props.class],
|
|
"style": props.style
|
|
}, tableProps, {
|
|
"fixedHeader": props.fixedHeader || props.sticky
|
|
}), {
|
|
top: () => slots.top?.(slotProps.value),
|
|
default: () => slots.default ? slots.default(slotProps.value) : _createElementVNode(_Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && _createElementVNode("thead", {
|
|
"key": "thead"
|
|
}, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
|
|
"multiSort": !!props.multiSort
|
|
}), slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && _createElementVNode("tbody", null, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : _createVNode(VDataTableRows, _mergeProps(attrs, dataTableRowsProps, {
|
|
"items": paginatedItems.value
|
|
}), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
|
|
bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && _createElementVNode(_Fragment, null, [_createVNode(VDivider, null, null), _createVNode(VDataTableFooter, dataTableFooterProps, {
|
|
prepend: slots['footer.prepend']
|
|
})])
|
|
});
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDataTable.js.map
|