123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- import { mergeProps as _mergeProps, createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
- // Styles
- import "./VDataTable.css";
- // Components
- import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.mjs";
- import { makeVDataTableHeadersProps, VDataTableHeaders } from "./VDataTableHeaders.mjs";
- import { makeVDataTableRowsProps, VDataTableRows } from "./VDataTableRows.mjs";
- import { VDivider } from "../VDivider/index.mjs";
- import { makeVTableProps, VTable } from "../VTable/VTable.mjs"; // Composables
- import { makeDataTableExpandProps, provideExpanded } from "./composables/expand.mjs";
- import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from "./composables/group.mjs";
- import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
- import { makeDataTableItemsProps, useDataTableItems } from "./composables/items.mjs";
- import { useOptions } from "./composables/options.mjs";
- import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from "./composables/paginate.mjs";
- import { makeDataTableSelectProps, provideSelection } from "./composables/select.mjs";
- import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from "./composables/sort.mjs";
- import { provideDefaults } from "../../composables/defaults.mjs";
- import { makeFilterProps, useFilter } from "../../composables/filter.mjs"; // Utilities
- import { computed, toRef, toRefs } from 'vue';
- import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
- export const makeDataTableProps = propsFactory({
- ...makeVDataTableRowsProps(),
- hideDefaultBody: Boolean,
- hideDefaultFooter: Boolean,
- hideDefaultHeader: Boolean,
- width: [String, Number],
- search: String,
- ...makeDataTableExpandProps(),
- ...makeDataTableGroupProps(),
- ...makeDataTableHeaderProps(),
- ...makeDataTableItemsProps(),
- ...makeDataTableSelectProps(),
- ...makeDataTableSortProps(),
- ...makeVDataTableHeadersProps(),
- ...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, _ref) {
- let {
- attrs,
- slots
- } = _ref;
- const {
- groupBy
- } = createGroupBy(props);
- const {
- 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({
- 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 {
- flatItems
- } = useGroupedItems(sortedItems, groupBy, opened);
- const itemsLength = computed(() => flatItems.value.length);
- const {
- startIndex,
- stopIndex,
- pageCount,
- setItemsPerPage
- } = providePagination({
- page,
- itemsPerPage,
- itemsLength
- });
- const {
- paginatedItems
- } = usePaginatedItems({
- items: flatItems,
- startIndex,
- stopIndex,
- itemsPerPage
- });
- 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,
- 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(props);
- 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), {
- top: () => slots.top?.(slotProps.value),
- default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && _createVNode("thead", {
- "key": "thead"
- }, [_createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && _createVNode("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 && _createVNode(_Fragment, null, [_createVNode(VDivider, null, null), _createVNode(VDataTableFooter, dataTableFooterProps, {
- prepend: slots['footer.prepend']
- })])
- });
- });
- return {};
- }
- });
- //# sourceMappingURL=VDataTable.mjs.map
|