185 lines
5.9 KiB
JavaScript
185 lines
5.9 KiB
JavaScript
import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
|
|
// Components
|
|
import { makeDataTableProps } from "./VDataTable.mjs";
|
|
import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.mjs";
|
|
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
|
|
import { VDataTableRows } from "./VDataTableRows.mjs";
|
|
import { VTable } from "../VTable/index.mjs"; // Composables
|
|
import { provideExpanded } from "./composables/expand.mjs";
|
|
import { createGroupBy, provideGroupBy, useGroupedItems } from "./composables/group.mjs";
|
|
import { createHeaders } from "./composables/headers.mjs";
|
|
import { useDataTableItems } from "./composables/items.mjs";
|
|
import { useOptions } from "./composables/options.mjs";
|
|
import { createPagination, makeDataTablePaginateProps, providePagination } from "./composables/paginate.mjs";
|
|
import { provideSelection } from "./composables/select.mjs";
|
|
import { createSort, provideSort } from "./composables/sort.mjs";
|
|
import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
|
|
import { computed, provide, toRef } from 'vue';
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVDataTableServerProps = propsFactory({
|
|
itemsLength: {
|
|
type: [Number, String],
|
|
required: true
|
|
},
|
|
...makeDataTablePaginateProps(),
|
|
...makeDataTableProps(),
|
|
...makeVDataTableFooterProps()
|
|
}, 'VDataTableServer');
|
|
export const VDataTableServer = genericComponent()({
|
|
name: 'VDataTableServer',
|
|
props: makeVDataTableServerProps(),
|
|
emits: {
|
|
'update:modelValue': value => true,
|
|
'update:page': page => true,
|
|
'update:itemsPerPage': page => true,
|
|
'update:sortBy': sortBy => true,
|
|
'update:options': options => true,
|
|
'update:expanded': options => true,
|
|
'update:groupBy': 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 itemsLength = computed(() => parseInt(props.itemsLength, 10));
|
|
const {
|
|
columns,
|
|
headers
|
|
} = createHeaders(props, {
|
|
groupBy,
|
|
showSelect: toRef(props, 'showSelect'),
|
|
showExpand: toRef(props, 'showExpand')
|
|
});
|
|
const {
|
|
items
|
|
} = useDataTableItems(props, columns);
|
|
const {
|
|
toggleSort
|
|
} = provideSort({
|
|
sortBy,
|
|
multiSort,
|
|
mustSort,
|
|
page
|
|
});
|
|
const {
|
|
opened,
|
|
isGroupOpen,
|
|
toggleGroup,
|
|
extractRows
|
|
} = provideGroupBy({
|
|
groupBy,
|
|
sortBy
|
|
});
|
|
const {
|
|
pageCount,
|
|
setItemsPerPage
|
|
} = providePagination({
|
|
page,
|
|
itemsPerPage,
|
|
itemsLength
|
|
});
|
|
const {
|
|
flatItems
|
|
} = useGroupedItems(items, groupBy, opened);
|
|
const {
|
|
isSelected,
|
|
select,
|
|
selectAll,
|
|
toggleSelect,
|
|
someSelected,
|
|
allSelected
|
|
} = provideSelection(props, {
|
|
allItems: items,
|
|
currentPage: items
|
|
});
|
|
const {
|
|
isExpanded,
|
|
toggleExpand
|
|
} = provideExpanded(props);
|
|
const itemsWithoutGroups = computed(() => extractRows(items.value));
|
|
useOptions({
|
|
page,
|
|
itemsPerPage,
|
|
sortBy,
|
|
groupBy,
|
|
search: toRef(props, 'search')
|
|
});
|
|
provide('v-data-table', {
|
|
toggleSort,
|
|
sortBy
|
|
});
|
|
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: itemsWithoutGroups.value.map(item => item.raw),
|
|
internalItems: itemsWithoutGroups.value,
|
|
groupedItems: flatItems.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--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), _createVNode("thead", {
|
|
"class": "v-data-table__thead",
|
|
"role": "rowgroup"
|
|
}, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
|
|
"sticky": props.fixedHeader
|
|
}), slots)]), slots.thead?.(slotProps.value), _createVNode("tbody", {
|
|
"class": "v-data-table__tbody",
|
|
"role": "rowgroup"
|
|
}, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : _createVNode(VDataTableRows, _mergeProps(attrs, dataTableRowsProps, {
|
|
"items": flatItems.value
|
|
}), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
|
|
bottom: () => slots.bottom ? slots.bottom(slotProps.value) : _createVNode(VDataTableFooter, dataTableFooterProps, {
|
|
prepend: slots['footer.prepend']
|
|
})
|
|
});
|
|
});
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDataTableServer.mjs.map
|