vuetify
Version:
Vue Material Component Framework
249 lines • 8.12 kB
JavaScript
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps } from "vue";
// Components
import { makeDataTableProps } from "./VDataTable.js";
import { VDataTableHeaders } from "./VDataTableHeaders.js";
import { VDataTableRow } from "./VDataTableRow.js";
import { VDataTableRows } from "./VDataTableRows.js";
import { VTable } from "../VTable/index.js";
import { VVirtualScrollItem } from "../VVirtualScroll/VVirtualScrollItem.js"; // Composables
import { provideExpanded } from "./composables/expand.js";
import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems } from "./composables/group.js";
import { createHeaders } from "./composables/headers.js";
import { useDataTableItems } from "./composables/items.js";
import { useOptions } from "./composables/options.js";
import { provideSelection } from "./composables/select.js";
import { createSort, provideSort, useSortedItems } from "./composables/sort.js";
import { provideDefaults } from "../../composables/defaults.js";
import { makeFilterProps, useFilter } from "../../composables/filter.js";
import { makeVirtualProps, useVirtual } from "../../composables/virtual.js"; // Utilities
import { computed, shallowRef, toRef, toRefs } from 'vue';
import { convertToUnit, genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
export const makeVDataTableVirtualProps = propsFactory({
...omit(makeDataTableProps(), ['hideDefaultFooter']),
...makeDataTableGroupProps(),
...makeVirtualProps(),
...makeFilterProps()
}, 'VDataTableVirtual');
export const VDataTableVirtual = genericComponent()({
name: 'VDataTableVirtual',
props: makeVDataTableVirtualProps(),
emits: {
'update:modelValue': value => true,
'update:sortBy': value => true,
'update:options': value => true,
'update:groupBy': value => true,
'update:expanded': value => true
},
setup(props, _ref) {
let {
attrs,
slots
} = _ref;
const {
groupBy
} = createGroupBy(props);
const {
sortBy,
multiSort,
mustSort
} = createSort(props);
const {
disableSort
} = toRefs(props);
const {
columns,
headers,
filterFunctions,
sortFunctions,
sortRawFunctions
} = 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
});
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 allItems = computed(() => extractRows(flatItems.value));
const {
isSelected,
select,
selectAll,
toggleSelect,
someSelected,
allSelected
} = provideSelection(props, {
allItems,
currentPage: allItems
});
const {
isExpanded,
toggleExpand
} = provideExpanded(props);
const {
containerRef,
markerRef,
paddingTop,
paddingBottom,
computedItems,
handleItemResize,
handleScroll,
handleScrollend,
calculateVisibleItems,
scrollToIndex
} = useVirtual(props, flatItems);
const displayItems = computed(() => computedItems.value.map(item => item.raw));
useOptions({
sortBy,
page: shallowRef(1),
itemsPerPage: shallowRef(-1),
groupBy,
search
});
provideDefaults({
VDataTableRows: {
hideNoData: toRef(() => props.hideNoData),
noDataText: toRef(() => props.noDataText),
loading: toRef(() => props.loading),
loadingText: toRef(() => props.loadingText)
}
});
const slotProps = computed(() => ({
sortBy: sortBy.value,
toggleSort,
someSelected: someSelected.value,
allSelected: allSelected.value,
isSelected,
select,
selectAll,
toggleSelect,
isExpanded,
toggleExpand,
isGroupOpen,
toggleGroup,
items: allItems.value.map(item => item.raw),
internalItems: allItems.value,
groupedItems: flatItems.value,
columns: columns.value,
headers: headers.value
}));
useRender(() => {
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, {
"fixedHeader": props.fixedHeader || props.sticky
}), {
top: () => slots.top?.(slotProps.value),
wrapper: () => _createElementVNode("div", {
"ref": containerRef,
"onScrollPassive": handleScroll,
"onScrollend": handleScrollend,
"class": "v-table__wrapper",
"style": _normalizeStyle({
height: convertToUnit(props.height)
})
}, [_createElementVNode("table", null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && _createElementVNode("thead", {
"key": "thead"
}, [_createVNode(VDataTableHeaders, dataTableHeadersProps, slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && _createElementVNode("tbody", {
"key": "tbody"
}, [_createElementVNode("tr", {
"ref": markerRef,
"style": _normalizeStyle({
height: convertToUnit(paddingTop.value),
border: 0
})
}, [_createElementVNode("td", {
"colspan": columns.value.length,
"style": {
height: 0,
border: 0
}
}, null)]), slots['body.prepend']?.(slotProps.value), _createVNode(VDataTableRows, _mergeProps(attrs, dataTableRowsProps, {
"items": displayItems.value
}), {
...slots,
item: itemSlotProps => _createVNode(VVirtualScrollItem, {
"key": itemSlotProps.internalItem.index,
"renderless": true,
"onUpdate:height": height => handleItemResize(itemSlotProps.internalItem.index, height)
}, {
default: _ref2 => {
let {
itemRef
} = _ref2;
return slots.item?.({
...itemSlotProps,
itemRef
}) ?? _createVNode(VDataTableRow, _mergeProps(itemSlotProps.props, {
"ref": itemRef,
"key": itemSlotProps.internalItem.index,
"index": itemSlotProps.internalItem.index
}), slots);
}
})
}), slots['body.append']?.(slotProps.value), _createElementVNode("tr", {
"style": _normalizeStyle({
height: convertToUnit(paddingBottom.value),
border: 0
})
}, [_createElementVNode("td", {
"colspan": columns.value.length,
"style": {
height: 0,
border: 0
}
}, null)])]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)])]),
bottom: () => slots.bottom?.(slotProps.value)
});
});
return {
calculateVisibleItems,
scrollToIndex
};
}
});
//# sourceMappingURL=VDataTableVirtual.js.map