routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+215
@@ -0,0 +1,215 @@
|
||||
@layer vuetify-components {
|
||||
.v-data-table {
|
||||
width: 100%;
|
||||
}
|
||||
.v-data-table__table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.v-data-table__tr--focus {
|
||||
border: 1px dotted black;
|
||||
}
|
||||
.v-data-table__tr--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end {
|
||||
text-align: end;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-end .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-end .v-data-table-header__content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--align-center .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--align-center .v-data-table-header__content {
|
||||
justify-content: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--no-padding,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--no-padding {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--empty,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--empty {
|
||||
padding: 0;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap {
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr th.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > td.v-data-table-column--nowrap .v-data-table-header__content,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr th.v-data-table-column--nowrap .v-data-table-header__content {
|
||||
display: contents;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th {
|
||||
align-items: center;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--fixed,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--fixed {
|
||||
position: sticky;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:hover,
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th.v-data-table__th--sortable:focus,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:hover,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th.v-data-table__th--sortable:focus {
|
||||
cursor: pointer;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted) .v-data-table-header__sort-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon, .v-data-table .v-table__wrapper > table > thead > tr > th:not(.v-data-table__th--sorted):focus-visible .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):hover .v-data-table-header__sort-icon,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr > th:not(.v-data-table__th--sorted):focus-visible .v-data-table-header__sort-icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.v-data-table .v-table__wrapper > table > thead > tr.v-data-table__tr--mobile > td,
|
||||
.v-data-table .v-table__wrapper > table tbody > tr.v-data-table__tr--mobile > td {
|
||||
height: fit-content;
|
||||
}
|
||||
.v-data-table-column--fixed,
|
||||
.v-data-table-column--fixed-end,
|
||||
.v-data-table__th--sticky {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
background-image: inherit;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-column--fixed,
|
||||
.v-data-table-column--fixed-end,
|
||||
.v-data-table__th--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table-column--fixed-end {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
.v-data-table-column--last-fixed {
|
||||
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-data-table-column--first-fixed-end {
|
||||
border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed,
|
||||
.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed-end {
|
||||
z-index: 2;
|
||||
}
|
||||
.v-data-table-group-header-row td {
|
||||
background: rgba(var(--v-theme-surface));
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
}
|
||||
.v-data-table-group-header-row td > span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.v-data-table--loading:not(.v-table--fixed-header) > .v-table__wrapper > table > thead > tr > .v-data-table__td:not(.v-data-table-column--fixed), .v-data-table--loading:not(.v-table--fixed-header) > .v-table__wrapper > table > thead > tr > .v-data-table__td:not(.v-data-table-column--fixed-end), .v-data-table--loading:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot > tr > .v-data-table__td:not(.v-data-table-column--fixed), .v-data-table--loading:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot > tr > .v-data-table__td:not(.v-data-table-column--fixed-end),
|
||||
.v-data-table--loading > .v-table__wrapper > table > tbody > tr > .v-data-table__td:not(.v-data-table-column--fixed),
|
||||
.v-data-table--loading > .v-table__wrapper > table > tbody > tr > .v-data-table__td:not(.v-data-table-column--fixed-end) {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-group-header-row__column {
|
||||
padding-inline-start: calc(var(--v-data-table-group-header-row-depth) * 16px);
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.v-data-table-header__sort-icon {
|
||||
margin-inline: 0px;
|
||||
}
|
||||
.v-data-table-header__sort-badge {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table-progress > th {
|
||||
border: none;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table-progress__loader {
|
||||
position: relative;
|
||||
}
|
||||
.v-data-table-rows-loading,
|
||||
.v-data-table-rows-no-data {
|
||||
text-align: center;
|
||||
}
|
||||
.v-data-table__tr--mobile > .v-data-table__td--expanded-row {
|
||||
grid-template-columns: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
.v-data-table__tr--mobile > .v-data-table__td--select-row {
|
||||
grid-template-columns: 0;
|
||||
justify-content: end;
|
||||
}
|
||||
.v-data-table__tr--mobile > td {
|
||||
align-items: center;
|
||||
column-gap: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
min-height: var(--v-table-row-height);
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-data-table__tr--mobile > td:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
@layer vuetify-components {
|
||||
.v-data-table__td-title {
|
||||
font-weight: 500;
|
||||
text-align: start;
|
||||
}
|
||||
.v-data-table__td-value {
|
||||
text-align: end;
|
||||
}
|
||||
.v-data-table__td-sort-icon {
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-disabled-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-data-table__td-sort-icon-active {
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
}
|
||||
}
|
||||
+2661
File diff suppressed because it is too large
Load Diff
+266
@@ -0,0 +1,266 @@
|
||||
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
|
||||
+1
File diff suppressed because one or more lines are too long
+200
@@ -0,0 +1,200 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use '../../components/VTable/variables' as *
|
||||
@use './variables' as *
|
||||
@use '../VTable/variables' as VTable
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-data-table
|
||||
width: 100%
|
||||
|
||||
.v-data-table__table
|
||||
width: 100%
|
||||
border-collapse: separate
|
||||
border-spacing: 0
|
||||
|
||||
.v-data-table__tr
|
||||
&--focus
|
||||
border: 1px dotted black
|
||||
|
||||
&--clickable
|
||||
cursor: pointer
|
||||
|
||||
.v-data-table
|
||||
.v-table__wrapper
|
||||
> table
|
||||
> thead,
|
||||
tbody
|
||||
> tr
|
||||
> td,
|
||||
th
|
||||
|
||||
&.v-data-table-column--align-end
|
||||
text-align: end
|
||||
|
||||
.v-data-table-header__content
|
||||
flex-direction: row-reverse
|
||||
|
||||
&.v-data-table-column--align-center
|
||||
text-align: center
|
||||
|
||||
.v-data-table-header__content
|
||||
justify-content: center
|
||||
|
||||
&.v-data-table-column--no-padding
|
||||
padding: 0 8px
|
||||
|
||||
&.v-data-table-column--empty
|
||||
padding: 0
|
||||
|
||||
&.v-data-table-column--nowrap
|
||||
text-overflow: ellipsis
|
||||
text-wrap: nowrap
|
||||
overflow: hidden
|
||||
|
||||
& .v-data-table-header__content
|
||||
display: contents
|
||||
|
||||
> th
|
||||
align-items: center
|
||||
|
||||
> th.v-data-table__th--fixed
|
||||
position: sticky
|
||||
|
||||
> th.v-data-table__th--sortable:hover,
|
||||
> th.v-data-table__th--sortable:focus
|
||||
cursor: pointer
|
||||
color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
|
||||
|
||||
> th:not(.v-data-table__th--sorted)
|
||||
.v-data-table-header__sort-icon
|
||||
opacity: $data-table-header-sort-icon-default-opacity
|
||||
|
||||
&:hover,
|
||||
&:focus-visible
|
||||
.v-data-table-header__sort-icon
|
||||
opacity: $data-table-header-sort-icon-hover-opacity
|
||||
|
||||
&.v-data-table__tr--mobile
|
||||
> td
|
||||
height: fit-content
|
||||
|
||||
.v-data-table-column--fixed,
|
||||
.v-data-table-column--fixed-end,
|
||||
.v-data-table__th--sticky
|
||||
background-color: $table-background
|
||||
background-image: inherit
|
||||
left: 0
|
||||
z-index: 1
|
||||
|
||||
@include tools.layer('overrides')
|
||||
// Beat out relative on table > tbody > tr > td
|
||||
// TODO: Use :where() for all those child combinators
|
||||
// @scope would probably be even better but
|
||||
// doesn't seem to be getting here any time soon
|
||||
position: sticky
|
||||
|
||||
.v-data-table-column--fixed-end
|
||||
left: unset
|
||||
right: 0
|
||||
|
||||
.v-data-table-column--last-fixed
|
||||
border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
|
||||
|
||||
.v-data-table-column--first-fixed-end
|
||||
border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
|
||||
|
||||
.v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr
|
||||
> th.v-data-table-column--fixed,
|
||||
> th.v-data-table-column--fixed-end
|
||||
z-index: 2
|
||||
|
||||
.v-data-table-group-header-row
|
||||
td
|
||||
background: rgba(var(--v-theme-surface))
|
||||
color: rgba(var(--v-theme-on-surface))
|
||||
|
||||
> span
|
||||
padding-left: 5px
|
||||
|
||||
.v-data-table--loading
|
||||
&:not(.v-table--fixed-header) > .v-table__wrapper > table > thead,
|
||||
&:not(.v-table--fixed-footer) > .v-table__wrapper > table > tfoot,
|
||||
> .v-table__wrapper > table > tbody
|
||||
> tr > .v-data-table__td
|
||||
&:not(.v-data-table-column--fixed),
|
||||
&:not(.v-data-table-column--fixed-end)
|
||||
opacity: $data-table-loading-opacity
|
||||
|
||||
@include tools.layer('overrides')
|
||||
// Again, needs to beat all the child combinators
|
||||
.v-data-table-group-header-row__column
|
||||
padding-inline-start: calc(var(--v-data-table-group-header-row-depth) * 16px)
|
||||
|
||||
.v-data-table-header__content
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.v-data-table-header__sort-icon
|
||||
margin-inline: $data-table-header-sort-icon-margin-inline
|
||||
|
||||
.v-data-table-header__sort-badge
|
||||
display: inline-flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
font-size: 0.875rem
|
||||
padding: 4px
|
||||
border-radius: 50%
|
||||
background: $data-table-header-sort-badge-color
|
||||
min-width: $data-table-header-sort-badge-size
|
||||
min-height: $data-table-header-sort-badge-size
|
||||
width: $data-table-header-sort-badge-size
|
||||
height: $data-table-header-sort-badge-size
|
||||
|
||||
@include tools.layer('overrides')
|
||||
.v-data-table-progress
|
||||
> th
|
||||
border: none
|
||||
height: auto
|
||||
padding: 0
|
||||
|
||||
.v-data-table-progress__loader
|
||||
position: relative
|
||||
|
||||
.v-data-table-rows-loading,
|
||||
.v-data-table-rows-no-data
|
||||
text-align: center
|
||||
|
||||
.v-data-table__tr--mobile
|
||||
> .v-data-table__td--expanded-row
|
||||
grid-template-columns: auto
|
||||
justify-content: center
|
||||
|
||||
> .v-data-table__td--select-row
|
||||
grid-template-columns: 0
|
||||
justify-content: end
|
||||
|
||||
> td
|
||||
align-items: center
|
||||
column-gap: 4px
|
||||
display: grid
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
min-height: var(--v-table-row-height)
|
||||
|
||||
@include tools.layer('overrides')
|
||||
&:not(:last-child)
|
||||
border-bottom: 0
|
||||
|
||||
.v-data-table__td-title
|
||||
font-weight: VTable.$table-header-font-weight
|
||||
text-align: start
|
||||
|
||||
.v-data-table__td-value
|
||||
text-align: end
|
||||
|
||||
.v-data-table__td
|
||||
&-sort-icon
|
||||
color: $data-table-header-mobile-chip-icon-color
|
||||
|
||||
&-active
|
||||
color: $data-table-header-mobile-chip-icon-color-active
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
import type { PropType } from 'vue';
|
||||
export declare const VDataTableColumn: import("vue").FunctionalComponent<Partial<{
|
||||
align: "center" | "end" | "start";
|
||||
fixed: "end" | "start" | boolean;
|
||||
lastFixed: boolean;
|
||||
firstFixedEnd: boolean;
|
||||
noPadding: boolean;
|
||||
empty: boolean;
|
||||
nowrap: boolean;
|
||||
}> & Omit<Readonly<import("vue").ExtractPropTypes<{
|
||||
align: {
|
||||
type: PropType<'start' | 'center' | 'end'>;
|
||||
default: string;
|
||||
};
|
||||
fixed: {
|
||||
type: PropType<boolean | 'start' | 'end'>;
|
||||
default: boolean;
|
||||
};
|
||||
fixedOffset: (NumberConstructor | StringConstructor)[];
|
||||
fixedEndOffset: (NumberConstructor | StringConstructor)[];
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
lastFixed: BooleanConstructor;
|
||||
firstFixedEnd: BooleanConstructor;
|
||||
noPadding: BooleanConstructor;
|
||||
indent: (NumberConstructor | StringConstructor)[];
|
||||
empty: BooleanConstructor;
|
||||
tag: StringConstructor;
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
nowrap: BooleanConstructor;
|
||||
}>>, "align" | "empty" | "firstFixedEnd" | "fixed" | "lastFixed" | "noPadding" | "nowrap">, {}, any, {}>;
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import { normalizeClass as _normalizeClass, createVNode as _createVNode } from "vue";
|
||||
// Utilities
|
||||
import { convertToUnit, defineFunctionalComponent } from "../../util/index.js"; // Types
|
||||
export const VDataTableColumn = defineFunctionalComponent({
|
||||
align: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
fixed: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
fixedOffset: [Number, String],
|
||||
fixedEndOffset: [Number, String],
|
||||
height: [Number, String],
|
||||
lastFixed: Boolean,
|
||||
firstFixedEnd: Boolean,
|
||||
noPadding: Boolean,
|
||||
indent: [Number, String],
|
||||
empty: Boolean,
|
||||
tag: String,
|
||||
width: [Number, String],
|
||||
maxWidth: [Number, String],
|
||||
nowrap: Boolean
|
||||
}, (props, {
|
||||
slots
|
||||
}) => {
|
||||
const Tag = props.tag ?? 'td';
|
||||
const fixedSide = typeof props.fixed === 'string' ? props.fixed : props.fixed ? 'start' : 'none';
|
||||
return _createVNode(Tag, {
|
||||
"class": _normalizeClass(['v-data-table__td', {
|
||||
'v-data-table-column--fixed': fixedSide === 'start',
|
||||
'v-data-table-column--fixed-end': fixedSide === 'end',
|
||||
'v-data-table-column--last-fixed': props.lastFixed,
|
||||
'v-data-table-column--first-fixed-end': props.firstFixedEnd,
|
||||
'v-data-table-column--no-padding': props.noPadding,
|
||||
'v-data-table-column--nowrap': props.nowrap,
|
||||
'v-data-table-column--empty': props.empty
|
||||
}, `v-data-table-column--align-${props.align}`]),
|
||||
"style": {
|
||||
height: convertToUnit(props.height),
|
||||
width: convertToUnit(props.width),
|
||||
maxWidth: convertToUnit(props.maxWidth),
|
||||
left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,
|
||||
right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined,
|
||||
paddingInlineStart: props.indent ? convertToUnit(props.indent) : undefined
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.default?.()]
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=VDataTableColumn.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VDataTableColumn.js","names":["convertToUnit","defineFunctionalComponent","VDataTableColumn","align","type","String","default","fixed","Boolean","fixedOffset","Number","fixedEndOffset","height","lastFixed","firstFixedEnd","noPadding","indent","empty","tag","width","maxWidth","nowrap","props","slots","Tag","fixedSide","_createVNode","_normalizeClass","left","undefined","right","paddingInlineStart"],"sources":["../../../src/components/VDataTable/VDataTableColumn.tsx"],"sourcesContent":["// Utilities\nimport { convertToUnit, defineFunctionalComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VDataTableColumn = defineFunctionalComponent({\n align: {\n type: String as PropType<'start' | 'center' | 'end'>,\n default: 'start',\n },\n fixed: {\n type: [Boolean, String] as PropType<boolean | 'start' | 'end'>,\n default: false,\n },\n fixedOffset: [Number, String],\n fixedEndOffset: [Number, String],\n height: [Number, String],\n lastFixed: Boolean,\n firstFixedEnd: Boolean,\n\n noPadding: Boolean,\n indent: [Number, String],\n empty: Boolean,\n\n tag: String,\n width: [Number, String],\n maxWidth: [Number, String],\n nowrap: Boolean,\n}, (props, { slots }) => {\n const Tag = props.tag ?? 'td'\n\n const fixedSide = typeof props.fixed === 'string' ? props.fixed\n : props.fixed ? 'start'\n : 'none'\n\n return (\n <Tag\n class={[\n 'v-data-table__td',\n {\n 'v-data-table-column--fixed': fixedSide === 'start',\n 'v-data-table-column--fixed-end': fixedSide === 'end',\n 'v-data-table-column--last-fixed': props.lastFixed,\n 'v-data-table-column--first-fixed-end': props.firstFixedEnd,\n 'v-data-table-column--no-padding': props.noPadding,\n 'v-data-table-column--nowrap': props.nowrap,\n 'v-data-table-column--empty': props.empty,\n },\n `v-data-table-column--align-${props.align}`,\n ]}\n style={{\n height: convertToUnit(props.height),\n width: convertToUnit(props.width),\n maxWidth: convertToUnit(props.maxWidth),\n left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,\n right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined,\n paddingInlineStart: props.indent ? convertToUnit(props.indent) : undefined,\n }}\n >\n { slots.default?.() }\n </Tag>\n )\n})\n"],"mappings":";AAAA;AAAA,SACSA,aAAa,EAAEC,yBAAyB,+BAEjD;AAGA,OAAO,MAAMC,gBAAgB,GAAGD,yBAAyB,CAAC;EACxDE,KAAK,EAAE;IACLC,IAAI,EAAEC,MAA8C;IACpDC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAE;IACLH,IAAI,EAAE,CAACI,OAAO,EAAEH,MAAM,CAAwC;IAC9DC,OAAO,EAAE;EACX,CAAC;EACDG,WAAW,EAAE,CAACC,MAAM,EAAEL,MAAM,CAAC;EAC7BM,cAAc,EAAE,CAACD,MAAM,EAAEL,MAAM,CAAC;EAChCO,MAAM,EAAE,CAACF,MAAM,EAAEL,MAAM,CAAC;EACxBQ,SAAS,EAAEL,OAAO;EAClBM,aAAa,EAAEN,OAAO;EAEtBO,SAAS,EAAEP,OAAO;EAClBQ,MAAM,EAAE,CAACN,MAAM,EAAEL,MAAM,CAAC;EACxBY,KAAK,EAAET,OAAO;EAEdU,GAAG,EAAEb,MAAM;EACXc,KAAK,EAAE,CAACT,MAAM,EAAEL,MAAM,CAAC;EACvBe,QAAQ,EAAE,CAACV,MAAM,EAAEL,MAAM,CAAC;EAC1BgB,MAAM,EAAEb;AACV,CAAC,EAAE,CAACc,KAAK,EAAE;EAAEC;AAAM,CAAC,KAAK;EACvB,MAAMC,GAAG,GAAGF,KAAK,CAACJ,GAAG,IAAI,IAAI;EAE7B,MAAMO,SAAS,GAAG,OAAOH,KAAK,CAACf,KAAK,KAAK,QAAQ,GAAGe,KAAK,CAACf,KAAK,GAC3De,KAAK,CAACf,KAAK,GAAG,OAAO,GACrB,MAAM;EAEV,OAAAmB,YAAA,CAAAF,GAAA;IAAA,SAAAG,eAAA,CAEW,CACL,kBAAkB,EAClB;MACE,4BAA4B,EAAEF,SAAS,KAAK,OAAO;MACnD,gCAAgC,EAAEA,SAAS,KAAK,KAAK;MACrD,iCAAiC,EAAEH,KAAK,CAACT,SAAS;MAClD,sCAAsC,EAAES,KAAK,CAACR,aAAa;MAC3D,iCAAiC,EAAEQ,KAAK,CAACP,SAAS;MAClD,6BAA6B,EAAEO,KAAK,CAACD,MAAM;MAC3C,4BAA4B,EAAEC,KAAK,CAACL;IACtC,CAAC,EACD,8BAA8BK,KAAK,CAACnB,KAAK,EAAE,CAC5C;IAAA,SACM;MACLS,MAAM,EAAEZ,aAAa,CAACsB,KAAK,CAACV,MAAM,CAAC;MACnCO,KAAK,EAAEnB,aAAa,CAACsB,KAAK,CAACH,KAAK,CAAC;MACjCC,QAAQ,EAAEpB,aAAa,CAACsB,KAAK,CAACF,QAAQ,CAAC;MACvCQ,IAAI,EAAEH,SAAS,KAAK,OAAO,GAAGzB,aAAa,CAACsB,KAAK,CAACb,WAAW,IAAI,IAAI,CAAC,GAAGoB,SAAS;MAClFC,KAAK,EAAEL,SAAS,KAAK,KAAK,GAAGzB,aAAa,CAACsB,KAAK,CAACX,cAAc,IAAI,IAAI,CAAC,GAAGkB,SAAS;MACpFE,kBAAkB,EAAET,KAAK,CAACN,MAAM,GAAGhB,aAAa,CAACsB,KAAK,CAACN,MAAM,CAAC,GAAGa;IACnE;EAAC;IAAAvB,OAAA,EAAAA,CAAA,MAECiB,KAAK,CAACjB,OAAO,GAAG,CAAC;EAAA;AAGzB,CAAC,CAAC","ignoreList":[]}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
@layer vuetify-components {
|
||||
.v-data-table-footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
.v-data-table-footer__items-per-page {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.v-data-table-footer__items-per-page > span {
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
.v-data-table-footer__items-per-page > .v-select {
|
||||
width: 90px;
|
||||
}
|
||||
.v-data-table-footer__info {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 116px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.v-data-table-footer__paginationz {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-data-table-footer__page {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
+424
@@ -0,0 +1,424 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
export declare const makeVDataTableFooterProps: <Defaults extends {
|
||||
color?: unknown;
|
||||
prevIcon?: unknown;
|
||||
nextIcon?: unknown;
|
||||
firstIcon?: unknown;
|
||||
lastIcon?: unknown;
|
||||
itemsPerPageText?: unknown;
|
||||
pageText?: unknown;
|
||||
firstPageLabel?: unknown;
|
||||
prevPageLabel?: unknown;
|
||||
nextPageLabel?: unknown;
|
||||
lastPageLabel?: unknown;
|
||||
itemsPerPageOptions?: unknown;
|
||||
showCurrentPage?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
prevIcon: unknown extends Defaults["prevIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prevIcon"] ? IconValue : Defaults["prevIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
nextIcon: unknown extends Defaults["nextIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["nextIcon"] ? IconValue : Defaults["nextIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
firstIcon: unknown extends Defaults["firstIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["firstIcon"] ? IconValue : Defaults["firstIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["firstIcon"] ? IconValue : Defaults["firstIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
lastIcon: unknown extends Defaults["lastIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["lastIcon"] ? IconValue : Defaults["lastIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["lastIcon"] ? IconValue : Defaults["lastIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
itemsPerPageText: unknown extends Defaults["itemsPerPageText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemsPerPageText"] ? string : string | Defaults["itemsPerPageText"]>;
|
||||
default: unknown extends Defaults["itemsPerPageText"] ? string : string | Defaults["itemsPerPageText"];
|
||||
};
|
||||
pageText: unknown extends Defaults["pageText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["pageText"] ? string : string | Defaults["pageText"]>;
|
||||
default: unknown extends Defaults["pageText"] ? string : string | Defaults["pageText"];
|
||||
};
|
||||
firstPageLabel: unknown extends Defaults["firstPageLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["firstPageLabel"] ? string : string | Defaults["firstPageLabel"]>;
|
||||
default: unknown extends Defaults["firstPageLabel"] ? string : string | Defaults["firstPageLabel"];
|
||||
};
|
||||
prevPageLabel: unknown extends Defaults["prevPageLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["prevPageLabel"] ? string : string | Defaults["prevPageLabel"]>;
|
||||
default: unknown extends Defaults["prevPageLabel"] ? string : string | Defaults["prevPageLabel"];
|
||||
};
|
||||
nextPageLabel: unknown extends Defaults["nextPageLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["nextPageLabel"] ? string : string | Defaults["nextPageLabel"]>;
|
||||
default: unknown extends Defaults["nextPageLabel"] ? string : string | Defaults["nextPageLabel"];
|
||||
};
|
||||
lastPageLabel: unknown extends Defaults["lastPageLabel"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["lastPageLabel"] ? string : string | Defaults["lastPageLabel"]>;
|
||||
default: unknown extends Defaults["lastPageLabel"] ? string : string | Defaults["lastPageLabel"];
|
||||
};
|
||||
itemsPerPageOptions: unknown extends Defaults["itemsPerPageOptions"] ? {
|
||||
type: PropType<readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[]>;
|
||||
default: () => {
|
||||
value: number;
|
||||
title: string;
|
||||
}[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[]>;
|
||||
default: () => {
|
||||
value: number;
|
||||
title: string;
|
||||
}[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemsPerPageOptions"] ? readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[] : readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[] | Defaults["itemsPerPageOptions"]>;
|
||||
default: unknown extends Defaults["itemsPerPageOptions"] ? readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[] : readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[] | Defaults["itemsPerPageOptions"];
|
||||
};
|
||||
showCurrentPage: unknown extends Defaults["showCurrentPage"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showCurrentPage"] ? boolean : boolean | Defaults["showCurrentPage"]>;
|
||||
default: unknown extends Defaults["showCurrentPage"] ? boolean : boolean | Defaults["showCurrentPage"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableFooter: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
} & {
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
} & {
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
} & {
|
||||
color?: string | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
prevIcon: IconValue;
|
||||
nextIcon: IconValue;
|
||||
firstIcon: IconValue;
|
||||
lastIcon: IconValue;
|
||||
itemsPerPageText: string;
|
||||
pageText: string;
|
||||
firstPageLabel: string;
|
||||
prevPageLabel: string;
|
||||
nextPageLabel: string;
|
||||
lastPageLabel: string;
|
||||
itemsPerPageOptions: readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[];
|
||||
showCurrentPage: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
color: StringConstructor;
|
||||
prevIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
firstIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
lastIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
itemsPerPageText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
pageText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
firstPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
prevPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
nextPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
lastPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
itemsPerPageOptions: {
|
||||
type: PropType<readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[]>;
|
||||
default: () => {
|
||||
value: number;
|
||||
title: string;
|
||||
}[];
|
||||
};
|
||||
showCurrentPage: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
color: StringConstructor;
|
||||
prevIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
nextIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
firstIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
lastIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
itemsPerPageText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
pageText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
firstPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
prevPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
nextPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
lastPageLabel: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
itemsPerPageOptions: {
|
||||
type: PropType<readonly (number | {
|
||||
title: string;
|
||||
value: number;
|
||||
})[]>;
|
||||
default: () => {
|
||||
value: number;
|
||||
title: string;
|
||||
}[];
|
||||
};
|
||||
showCurrentPage: BooleanConstructor;
|
||||
}>>;
|
||||
export type VDataTableFooter = InstanceType<typeof VDataTableFooter>;
|
||||
+143
@@ -0,0 +1,143 @@
|
||||
import { createElementVNode as _createElementVNode, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Styles
|
||||
import "./VDataTableFooter.css";
|
||||
|
||||
// Components
|
||||
import { VPagination } from "../VPagination/index.js";
|
||||
import { VSelect } from "../VSelect/index.js"; // Composables
|
||||
import { usePagination } from "./composables/paginate.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useLocale } from "../../composables/locale.js"; // Utilities
|
||||
import { computed } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVDataTableFooterProps = propsFactory({
|
||||
color: String,
|
||||
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, {
|
||||
slots
|
||||
}) {
|
||||
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 _createElementVNode("div", {
|
||||
"class": "v-data-table-footer"
|
||||
}, [slots.prepend?.(), _createElementVNode("div", {
|
||||
"class": "v-data-table-footer__items-per-page"
|
||||
}, [_createElementVNode("span", null, [t(props.itemsPerPageText)]), _createVNode(VSelect, {
|
||||
"items": itemsPerPageOptions.value,
|
||||
"itemColor": props.color,
|
||||
"modelValue": itemsPerPage.value,
|
||||
"onUpdate:modelValue": v => setItemsPerPage(Number(v)),
|
||||
"density": "compact",
|
||||
"variant": "outlined",
|
||||
"aria-label": t(props.itemsPerPageText),
|
||||
"hideDetails": true
|
||||
}, null)]), _createElementVNode("div", {
|
||||
"class": "v-data-table-footer__info"
|
||||
}, [_createElementVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), _createElementVNode("div", {
|
||||
"class": "v-data-table-footer__pagination"
|
||||
}, [_createVNode(VPagination, _mergeProps({
|
||||
"modelValue": page.value,
|
||||
"onUpdate:modelValue": $event => page.value = $event,
|
||||
"density": "comfortable",
|
||||
"firstAriaLabel": props.firstPageLabel,
|
||||
"lastAriaLabel": props.lastPageLabel,
|
||||
"length": pageCount.value,
|
||||
"nextAriaLabel": props.nextPageLabel,
|
||||
"previousAriaLabel": props.prevPageLabel,
|
||||
"rounded": true,
|
||||
"showFirstLastPage": true,
|
||||
"totalVisible": props.showCurrentPage ? 1 : 0,
|
||||
"variant": "plain"
|
||||
}, omit(paginationProps, ['color'])), null)])]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableFooter.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+36
@@ -0,0 +1,36 @@
|
||||
@forward './variables'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-data-table-footer
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
padding: $data-table-footer-padding
|
||||
|
||||
&__items-per-page
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
> span
|
||||
padding-inline-end: $data-table-footer-items-per-page-padding
|
||||
|
||||
> .v-select
|
||||
width: $data-table-footer-select-width
|
||||
|
||||
&__info
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
min-width: $data-table-footer-info-min-width
|
||||
padding: $data-table-footer-info-padding
|
||||
|
||||
&__paginationz
|
||||
align-items: center
|
||||
display: flex
|
||||
margin-inline-start: $data-table-footer-pagination-margin-inline-start
|
||||
|
||||
&__page
|
||||
padding: 0 8px
|
||||
Generated
Vendored
+260
@@ -0,0 +1,260 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { Group } from './composables/group.js';
|
||||
export type VDataTableGroupHeaderRowSlots = {
|
||||
'data-table-group': {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
};
|
||||
'data-table-select': {
|
||||
props: Record<string, unknown>;
|
||||
};
|
||||
};
|
||||
export declare const makeVDataTableGroupHeaderRowProps: <Defaults extends {
|
||||
density?: unknown;
|
||||
item?: unknown;
|
||||
groupCollapseIcon?: unknown;
|
||||
groupExpandIcon?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
item: unknown extends Defaults["item"] ? {
|
||||
type: PropType<Group>;
|
||||
required: true;
|
||||
} : Omit<{
|
||||
type: PropType<Group>;
|
||||
required: true;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["item"] ? Group<any> : Group<any> | Defaults["item"]>;
|
||||
default: unknown extends Defaults["item"] ? Group<any> : Group<any> | Defaults["item"];
|
||||
};
|
||||
groupCollapseIcon: unknown extends Defaults["groupCollapseIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["groupCollapseIcon"] ? IconValue : Defaults["groupCollapseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["groupCollapseIcon"] ? IconValue : Defaults["groupCollapseIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
groupExpandIcon: unknown extends Defaults["groupExpandIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["groupExpandIcon"] ? IconValue : Defaults["groupExpandIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["groupExpandIcon"] ? IconValue : Defaults["groupExpandIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
};
|
||||
export declare const VDataTableGroupHeaderRow: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
density: import("../../composables/density.js").Density;
|
||||
item: Group<any>;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
} & {} & {
|
||||
$children?: {
|
||||
'data-table-group'?: ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
'data-table-group'?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:data-table-group"?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:data-table-select"?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
'data-table-group': (arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-select': (arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
item: Group<any>;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
} & {} & {
|
||||
$children?: {
|
||||
'data-table-group'?: ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
'data-table-group'?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:data-table-group"?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:data-table-select"?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, {}, {}, {}, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
density: import("../../composables/density.js").Density;
|
||||
item: Group<any>;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
} & {} & {
|
||||
$children?: {
|
||||
'data-table-group'?: ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
'data-table-group'?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
'data-table-select'?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:data-table-group"?: false | ((arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:data-table-select"?: false | ((arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNodeChild) | undefined;
|
||||
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: IconValue;
|
||||
groupExpandIcon: IconValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
'data-table-group': (arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-select': (arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
item: {
|
||||
type: PropType<Group>;
|
||||
required: true;
|
||||
};
|
||||
groupCollapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
groupExpandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
item: {
|
||||
type: PropType<Group>;
|
||||
required: true;
|
||||
};
|
||||
groupCollapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
groupExpandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
}>>;
|
||||
Generated
Vendored
+106
@@ -0,0 +1,106 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode } from "vue";
|
||||
// Components
|
||||
import { VDataTableColumn } from "./VDataTableColumn.js";
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VCheckboxBtn } from "../VCheckbox/index.js"; // Composables
|
||||
import { useGroupBy } from "./composables/group.js";
|
||||
import { useHeaders } from "./composables/headers.js";
|
||||
import { useSelection } from "./composables/select.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { IconValue } from "../../composables/icons.js"; // Utilities
|
||||
import { computed, toRef } from 'vue';
|
||||
import { genericComponent, propsFactory } from "../../util/index.js"; // Types
|
||||
export const makeVDataTableGroupHeaderRowProps = propsFactory({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
groupCollapseIcon: {
|
||||
type: IconValue,
|
||||
default: '$tableGroupCollapse'
|
||||
},
|
||||
groupExpandIcon: {
|
||||
type: IconValue,
|
||||
default: '$tableGroupExpand'
|
||||
},
|
||||
...makeDensityProps()
|
||||
}, 'VDataTableGroupHeaderRow');
|
||||
export const VDataTableGroupHeaderRow = genericComponent()({
|
||||
name: 'VDataTableGroupHeaderRow',
|
||||
props: makeVDataTableGroupHeaderRowProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
isGroupOpen,
|
||||
toggleGroup,
|
||||
extractRows
|
||||
} = useGroupBy();
|
||||
const {
|
||||
isSelected,
|
||||
isSomeSelected,
|
||||
select
|
||||
} = useSelection();
|
||||
const {
|
||||
columns
|
||||
} = useHeaders();
|
||||
const rows = computed(() => {
|
||||
return extractRows([props.item]);
|
||||
});
|
||||
const colspan = toRef(() => columns.value.length - (columns.value.some(c => c.key === 'data-table-select') ? 1 : 0));
|
||||
return () => _createElementVNode("tr", {
|
||||
"class": "v-data-table-group-header-row",
|
||||
"style": {
|
||||
'--v-data-table-group-header-row-depth': props.item.depth
|
||||
}
|
||||
}, [columns.value.map(column => {
|
||||
if (column.key === 'data-table-group') {
|
||||
const icon = isGroupOpen(props.item) ? props.groupCollapseIcon : props.groupExpandIcon;
|
||||
const onClick = () => toggleGroup(props.item);
|
||||
return slots['data-table-group']?.({
|
||||
item: props.item,
|
||||
count: rows.value.length,
|
||||
props: {
|
||||
icon,
|
||||
onClick
|
||||
}
|
||||
}) ?? _createVNode(VDataTableColumn, {
|
||||
"class": "v-data-table-group-header-row__column",
|
||||
"colspan": colspan.value
|
||||
}, {
|
||||
default: () => [_createVNode(VBtn, {
|
||||
"size": "small",
|
||||
"variant": "text",
|
||||
"icon": icon,
|
||||
"onClick": onClick
|
||||
}, null), _createElementVNode("span", null, [props.item.value]), _createElementVNode("span", null, [_createTextVNode("("), rows.value.length, _createTextVNode(")")])]
|
||||
});
|
||||
} else if (column.key === 'data-table-select') {
|
||||
const selectableRows = rows.value.filter(x => x.selectable);
|
||||
const modelValue = selectableRows.length > 0 && isSelected(selectableRows);
|
||||
const indeterminate = isSomeSelected(selectableRows) && !modelValue;
|
||||
const selectGroup = v => select(selectableRows, v);
|
||||
return slots['data-table-select']?.({
|
||||
props: {
|
||||
modelValue,
|
||||
indeterminate,
|
||||
'onUpdate:modelValue': selectGroup
|
||||
}
|
||||
}) ?? _createVNode(VDataTableColumn, {
|
||||
"class": "v-data-table__td--select-row",
|
||||
"noPadding": true
|
||||
}, {
|
||||
default: () => [_createVNode(VCheckboxBtn, {
|
||||
"density": props.density,
|
||||
"disabled": selectableRows.length === 0,
|
||||
"modelValue": modelValue,
|
||||
"indeterminate": indeterminate,
|
||||
"onUpdate:modelValue": selectGroup
|
||||
}, null)]
|
||||
});
|
||||
}
|
||||
return '';
|
||||
})]);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableGroupHeaderRow.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+396
@@ -0,0 +1,396 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType, UnwrapRef } from 'vue';
|
||||
import type { provideSelection } from './composables/select.js';
|
||||
import type { provideSort } from './composables/sort.js';
|
||||
import type { InternalDataTableHeader } from './types.js';
|
||||
import type { LoaderSlotProps } from '../../composables/loader.js';
|
||||
export type HeadersSlotProps = {
|
||||
headers: InternalDataTableHeader[][];
|
||||
columns: InternalDataTableHeader[];
|
||||
sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>;
|
||||
someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>;
|
||||
allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>;
|
||||
toggleSort: ReturnType<typeof provideSort>['toggleSort'];
|
||||
selectAll: ReturnType<typeof provideSelection>['selectAll'];
|
||||
getSortIcon: (column: InternalDataTableHeader) => IconValue;
|
||||
isSorted: ReturnType<typeof provideSort>['isSorted'];
|
||||
};
|
||||
export type VDataTableHeaderCellColumnSlotProps = {
|
||||
column: InternalDataTableHeader;
|
||||
selectAll: ReturnType<typeof provideSelection>['selectAll'];
|
||||
isSorted: ReturnType<typeof provideSort>['isSorted'];
|
||||
toggleSort: ReturnType<typeof provideSort>['toggleSort'];
|
||||
sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>;
|
||||
someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>;
|
||||
allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>;
|
||||
getSortIcon: (column: InternalDataTableHeader) => IconValue;
|
||||
};
|
||||
export type VDataTableHeadersSlots = {
|
||||
headers: HeadersSlotProps;
|
||||
loader: LoaderSlotProps;
|
||||
'header.data-table-select': VDataTableHeaderCellColumnSlotProps;
|
||||
'header.data-table-expand': VDataTableHeaderCellColumnSlotProps;
|
||||
} & {
|
||||
[key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps;
|
||||
};
|
||||
export declare const makeVDataTableHeadersProps: <Defaults extends {
|
||||
mobile?: unknown;
|
||||
mobileBreakpoint?: unknown;
|
||||
density?: unknown;
|
||||
loading?: unknown;
|
||||
color?: unknown;
|
||||
disableSort?: unknown;
|
||||
fixedHeader?: unknown;
|
||||
multiSort?: unknown;
|
||||
initialSortOrder?: unknown;
|
||||
sortIcon?: unknown;
|
||||
sortAscIcon?: unknown;
|
||||
sortDescIcon?: unknown;
|
||||
headerProps?: unknown;
|
||||
sticky?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
mobile: unknown extends Defaults["mobile"] ? {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
|
||||
default: unknown extends Defaults["mobile"] ? boolean | null : Defaults["mobile"] | NonNullable<boolean | null>;
|
||||
};
|
||||
mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../types.js").DisplayBreakpoint> : {
|
||||
type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : number | Defaults["mobileBreakpoint"] | import("../../types.js").DisplayBreakpoint>;
|
||||
default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : Defaults["mobileBreakpoint"] | NonNullable<number | import("../../types.js").DisplayBreakpoint>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
disableSort: unknown extends Defaults["disableSort"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"]>;
|
||||
default: unknown extends Defaults["disableSort"] ? boolean : boolean | Defaults["disableSort"];
|
||||
};
|
||||
fixedHeader: unknown extends Defaults["fixedHeader"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"]>;
|
||||
default: unknown extends Defaults["fixedHeader"] ? boolean : boolean | Defaults["fixedHeader"];
|
||||
};
|
||||
multiSort: unknown extends Defaults["multiSort"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"]>;
|
||||
default: unknown extends Defaults["multiSort"] ? boolean : boolean | Defaults["multiSort"];
|
||||
};
|
||||
initialSortOrder: unknown extends Defaults["initialSortOrder"] ? PropType<"asc" | "desc"> : {
|
||||
type: PropType<unknown extends Defaults["initialSortOrder"] ? "asc" | "desc" : "asc" | "desc" | Defaults["initialSortOrder"]>;
|
||||
default: unknown extends Defaults["initialSortOrder"] ? "asc" | "desc" : Defaults["initialSortOrder"] | NonNullable<"asc" | "desc">;
|
||||
};
|
||||
sortIcon: unknown extends Defaults["sortIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["sortIcon"] ? IconValue : Defaults["sortIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["sortIcon"] ? IconValue : Defaults["sortIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
sortAscIcon: unknown extends Defaults["sortAscIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["sortAscIcon"] ? IconValue : Defaults["sortAscIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["sortAscIcon"] ? IconValue : Defaults["sortAscIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
sortDescIcon: unknown extends Defaults["sortDescIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["sortDescIcon"] ? IconValue : Defaults["sortDescIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["sortDescIcon"] ? IconValue : Defaults["sortDescIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
headerProps: unknown extends Defaults["headerProps"] ? {
|
||||
type: PropType<Record<string, any>>;
|
||||
} : Omit<{
|
||||
type: PropType<Record<string, any>>;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["headerProps"] ? Record<string, any> : Record<string, any> | Defaults["headerProps"]>;
|
||||
default: unknown extends Defaults["headerProps"] ? Record<string, any> : Record<string, any> | Defaults["headerProps"];
|
||||
};
|
||||
sticky: unknown extends Defaults["sticky"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"]>;
|
||||
default: unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableHeaders: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
initialSortOrder?: "asc" | "desc" | undefined;
|
||||
sortIcon?: IconValue | undefined;
|
||||
headerProps?: Record<string, any> | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
[x: `header.${string}`]: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
[x: `header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
[x: `v-slot:header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headers"?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
[x: `header.${string}`]: (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
headers: (arg: HeadersSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
initialSortOrder?: "asc" | "desc" | undefined;
|
||||
sortIcon?: IconValue | undefined;
|
||||
headerProps?: Record<string, any> | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
[x: `header.${string}`]: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
[x: `header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
[x: `v-slot:header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headers"?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
color?: string | undefined;
|
||||
initialSortOrder?: "asc" | "desc" | undefined;
|
||||
sortIcon?: IconValue | undefined;
|
||||
headerProps?: Record<string, any> | undefined;
|
||||
} & {
|
||||
$children?: {
|
||||
[x: `header.${string}`]: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | {} | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
[x: `header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
headers?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
loader?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-select'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
'header.data-table-expand'?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
[x: `v-slot:header.${string}`]: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-expand"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:header.data-table-select"?: false | ((arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:headers"?: false | ((arg: HeadersSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
"v-slot:loader"?: false | ((arg: LoaderSlotProps) => import("vue").VNodeChild) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
disableSort: boolean;
|
||||
fixedHeader: boolean;
|
||||
multiSort: boolean;
|
||||
sortAscIcon: IconValue;
|
||||
sortDescIcon: IconValue;
|
||||
sticky: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
[x: `header.${string}`]: (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
headers: (arg: HeadersSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
disableSort: BooleanConstructor;
|
||||
fixedHeader: BooleanConstructor;
|
||||
multiSort: BooleanConstructor;
|
||||
initialSortOrder: PropType<'asc' | 'desc'>;
|
||||
sortIcon: {
|
||||
type: PropType<IconValue>;
|
||||
};
|
||||
sortAscIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
sortDescIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
headerProps: {
|
||||
type: PropType<Record<string, any>>;
|
||||
};
|
||||
sticky: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
color: StringConstructor;
|
||||
disableSort: BooleanConstructor;
|
||||
fixedHeader: BooleanConstructor;
|
||||
multiSort: BooleanConstructor;
|
||||
initialSortOrder: PropType<'asc' | 'desc'>;
|
||||
sortIcon: {
|
||||
type: PropType<IconValue>;
|
||||
};
|
||||
sortAscIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
sortDescIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
headerProps: {
|
||||
type: PropType<Record<string, any>>;
|
||||
};
|
||||
sticky: BooleanConstructor;
|
||||
}>>;
|
||||
export type VDataTableHeaders = InstanceType<typeof VDataTableHeaders>;
|
||||
+283
@@ -0,0 +1,283 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
|
||||
// Components
|
||||
import { VDataTableColumn } from "./VDataTableColumn.js";
|
||||
import { VCheckboxBtn } from "../VCheckbox/index.js";
|
||||
import { VChip } from "../VChip/index.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { VSelect } from "../VSelect/index.js"; // Composables
|
||||
import { useHeaders } from "./composables/headers.js";
|
||||
import { useSelection } from "./composables/select.js";
|
||||
import { useSort } from "./composables/sort.js";
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { makeDisplayProps, useDisplay } from "../../composables/display.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.js";
|
||||
import { useLocale } from "../../composables/locale.js"; // Utilities
|
||||
import { computed, mergeProps, nextTick } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.js"; // Types
|
||||
export const makeVDataTableHeadersProps = propsFactory({
|
||||
color: String,
|
||||
disableSort: Boolean,
|
||||
fixedHeader: Boolean,
|
||||
multiSort: Boolean,
|
||||
initialSortOrder: String,
|
||||
sortIcon: {
|
||||
type: IconValue
|
||||
// default: '$sort', // maybe in v4
|
||||
},
|
||||
sortAscIcon: {
|
||||
type: IconValue,
|
||||
default: '$sortAsc'
|
||||
},
|
||||
sortDescIcon: {
|
||||
type: IconValue,
|
||||
default: '$sortDesc'
|
||||
},
|
||||
headerProps: {
|
||||
type: Object
|
||||
},
|
||||
/** @deprecated */
|
||||
sticky: Boolean,
|
||||
...makeDensityProps(),
|
||||
...makeDisplayProps(),
|
||||
...makeLoaderProps()
|
||||
}, 'VDataTableHeaders');
|
||||
export const VDataTableHeaders = genericComponent()({
|
||||
name: 'VDataTableHeaders',
|
||||
props: makeVDataTableHeadersProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
toggleSort,
|
||||
sortBy,
|
||||
isSorted
|
||||
} = useSort();
|
||||
const {
|
||||
someSelected,
|
||||
allSelected,
|
||||
selectAll,
|
||||
showSelectAll
|
||||
} = useSelection();
|
||||
const {
|
||||
columns,
|
||||
headers
|
||||
} = useHeaders();
|
||||
const {
|
||||
loaderClasses
|
||||
} = useLoader(props);
|
||||
function getFixedStyles(column, y) {
|
||||
if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined;
|
||||
const fixedSide = typeof column.fixed === 'string' ? column.fixed : column.fixed ? 'start' : 'none';
|
||||
return {
|
||||
position: 'sticky',
|
||||
left: fixedSide === 'start' ? convertToUnit(column.fixedOffset) : undefined,
|
||||
right: fixedSide === 'end' ? convertToUnit(column.fixedEndOffset) : undefined,
|
||||
top: props.sticky || props.fixedHeader ? `calc(var(--v-table-header-height) * ${y})` : undefined
|
||||
};
|
||||
}
|
||||
function handleEnterKeyPress(event, column) {
|
||||
if (event.key === 'Enter' && !props.disableSort) {
|
||||
toggleSort(column, event);
|
||||
}
|
||||
}
|
||||
function getSortIcon(column) {
|
||||
const item = sortBy.value.find(item => item.key === column.key);
|
||||
switch (item?.order) {
|
||||
case 'asc':
|
||||
return props.sortAscIcon;
|
||||
case 'desc':
|
||||
return props.sortDescIcon;
|
||||
default:
|
||||
return props.sortIcon || (props.initialSortOrder === 'asc' ? props.sortAscIcon : props.sortDescIcon);
|
||||
}
|
||||
}
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
displayClasses,
|
||||
mobile
|
||||
} = useDisplay(props);
|
||||
const slotProps = computed(() => ({
|
||||
headers: headers.value,
|
||||
columns: columns.value,
|
||||
toggleSort,
|
||||
isSorted,
|
||||
sortBy: sortBy.value,
|
||||
someSelected: someSelected.value,
|
||||
allSelected: allSelected.value,
|
||||
selectAll,
|
||||
getSortIcon
|
||||
}));
|
||||
const headerCellClasses = computed(() => ['v-data-table__th', {
|
||||
'v-data-table__th--sticky': props.sticky || props.fixedHeader
|
||||
}, displayClasses.value, loaderClasses.value]);
|
||||
const VDataTableHeaderCell = ({
|
||||
column,
|
||||
x,
|
||||
y
|
||||
}) => {
|
||||
const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
|
||||
const isEmpty = column.key === 'data-table-group' && column.width === 0 && !column.title;
|
||||
const headerProps = mergeProps(props.headerProps ?? {}, column.headerProps ?? {});
|
||||
const isSortable = column.sortable && !props.disableSort;
|
||||
return _createVNode(VDataTableColumn, _mergeProps({
|
||||
"tag": "th",
|
||||
"align": column.align,
|
||||
"class": [{
|
||||
'v-data-table__th--sortable': isSortable,
|
||||
'v-data-table__th--sorted': isSorted(column),
|
||||
'v-data-table__th--fixed': column.fixed
|
||||
}, ...headerCellClasses.value],
|
||||
"style": {
|
||||
width: convertToUnit(column.width),
|
||||
minWidth: convertToUnit(column.minWidth),
|
||||
maxWidth: convertToUnit(column.maxWidth),
|
||||
...getFixedStyles(column, y)
|
||||
},
|
||||
"colspan": column.colspan,
|
||||
"rowspan": column.rowspan,
|
||||
"fixed": column.fixed,
|
||||
"nowrap": column.nowrap,
|
||||
"lastFixed": column.lastFixed,
|
||||
"firstFixedEnd": column.firstFixedEnd,
|
||||
"noPadding": noPadding,
|
||||
"empty": isEmpty,
|
||||
"tabindex": isSortable ? 0 : undefined,
|
||||
"onClick": isSortable ? event => toggleSort(column, event) : undefined,
|
||||
"onKeydown": isSortable ? event => handleEnterKeyPress(event, column) : undefined
|
||||
}, headerProps), {
|
||||
default: () => {
|
||||
const columnSlotName = `header.${column.key}`;
|
||||
const columnSlotProps = {
|
||||
column,
|
||||
selectAll,
|
||||
isSorted,
|
||||
toggleSort,
|
||||
sortBy: sortBy.value,
|
||||
someSelected: someSelected.value,
|
||||
allSelected: allSelected.value,
|
||||
getSortIcon
|
||||
};
|
||||
if (slots[columnSlotName]) return slots[columnSlotName](columnSlotProps);
|
||||
if (isEmpty) return '';
|
||||
if (column.key === 'data-table-select') {
|
||||
return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && _createVNode(VCheckboxBtn, {
|
||||
"color": props.color,
|
||||
"density": props.density,
|
||||
"modelValue": allSelected.value,
|
||||
"indeterminate": someSelected.value && !allSelected.value,
|
||||
"onUpdate:modelValue": selectAll
|
||||
}, null));
|
||||
}
|
||||
return _createElementVNode("div", {
|
||||
"class": "v-data-table-header__content"
|
||||
}, [_createElementVNode("span", null, [column.title]), column.sortable && !props.disableSort && _createVNode(VIcon, {
|
||||
"key": "icon",
|
||||
"class": "v-data-table-header__sort-icon",
|
||||
"icon": getSortIcon(column)
|
||||
}, null), props.multiSort && isSorted(column) && _createElementVNode("div", {
|
||||
"key": "badge",
|
||||
"class": _normalizeClass(['v-data-table-header__sort-badge', ...backgroundColorClasses.value]),
|
||||
"style": _normalizeStyle(backgroundColorStyles.value)
|
||||
}, [sortBy.value.findIndex(x => x.key === column.key) + 1])]);
|
||||
}
|
||||
});
|
||||
};
|
||||
const VDataTableMobileHeaderCell = () => {
|
||||
const sortableColumns = computed(() => {
|
||||
return columns.value.filter(column => column?.sortable && !props.disableSort);
|
||||
});
|
||||
const showSelectColumn = columns.value.find(column => column.key === 'data-table-select');
|
||||
const sortingChips = computed({
|
||||
get: () => sortableColumns.value.filter(({
|
||||
key
|
||||
}) => sortBy.value.some(v => v.key === key)),
|
||||
set: val => {
|
||||
const sortedColumns = wrapInArray(val);
|
||||
const activeSortKeys = sortBy.value.map(v => v.key);
|
||||
const newColumnsToSort = sortedColumns.filter(({
|
||||
key
|
||||
}) => !activeSortKeys.includes(key));
|
||||
newColumnsToSort.forEach(column => toggleSort(column));
|
||||
// sortBy is proxied model, needs nextTick after toggleSort
|
||||
nextTick(() => sortBy.value = sortBy.value.filter(({
|
||||
key
|
||||
}) => sortedColumns.some(c => c.key === key)));
|
||||
}
|
||||
});
|
||||
return _createVNode(VDataTableColumn, _mergeProps({
|
||||
"tag": "th",
|
||||
"class": [...headerCellClasses.value],
|
||||
"colspan": headers.value.length + 1
|
||||
}, props.headerProps), {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-data-table-header__content"
|
||||
}, [_createVNode(VSelect, {
|
||||
"modelValue": sortingChips.value,
|
||||
"onUpdate:modelValue": $event => sortingChips.value = $event,
|
||||
"chips": true,
|
||||
"color": props.color,
|
||||
"class": "v-data-table__td-sort-select",
|
||||
"clearable": true,
|
||||
"density": "default",
|
||||
"items": sortableColumns.value,
|
||||
"label": t('$vuetify.dataTable.sortBy'),
|
||||
"multiple": props.multiSort,
|
||||
"variant": "underlined",
|
||||
"returnObject": true,
|
||||
"onClick:clear": () => sortBy.value = []
|
||||
}, {
|
||||
append: showSelectColumn ? () => _createVNode(VCheckboxBtn, {
|
||||
"color": props.color,
|
||||
"density": "compact",
|
||||
"modelValue": allSelected.value,
|
||||
"indeterminate": someSelected.value && !allSelected.value,
|
||||
"onUpdate:modelValue": () => selectAll(!allSelected.value)
|
||||
}, null) : undefined,
|
||||
chip: ({
|
||||
internalItem
|
||||
}) => _createVNode(VChip, {
|
||||
"onClick": internalItem.raw.sortable ? () => toggleSort(internalItem.raw, undefined, true) : undefined,
|
||||
"onMousedown": e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
}, {
|
||||
default: () => [internalItem.title, _createVNode(VIcon, {
|
||||
"class": _normalizeClass(['v-data-table__td-sort-icon', isSorted(internalItem.raw) && 'v-data-table__td-sort-icon-active']),
|
||||
"icon": getSortIcon(internalItem.raw),
|
||||
"size": "small"
|
||||
}, null)]
|
||||
})
|
||||
})])]
|
||||
});
|
||||
};
|
||||
useRender(() => {
|
||||
return mobile.value ? _createElementVNode("tr", null, [_createVNode(VDataTableMobileHeaderCell, null, null)]) : _createElementVNode(_Fragment, null, [slots.headers ? slots.headers(slotProps.value) : headers.value.map((row, y) => _createElementVNode("tr", null, [row.map((column, x) => _createVNode(VDataTableHeaderCell, {
|
||||
"column": column,
|
||||
"x": x,
|
||||
"y": y
|
||||
}, null))])), props.loading && _createElementVNode("tr", {
|
||||
"class": "v-data-table-progress"
|
||||
}, [_createElementVNode("th", {
|
||||
"colspan": columns.value.length
|
||||
}, [_createVNode(LoaderSlot, {
|
||||
"name": "v-data-table-progress",
|
||||
"absolute": true,
|
||||
"active": true,
|
||||
"color": typeof props.loading === 'boolean' || props.loading === 'true' ? props.color : props.loading,
|
||||
"indeterminate": true
|
||||
}, {
|
||||
default: slots.loader
|
||||
})])])]);
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableHeaders.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+264
@@ -0,0 +1,264 @@
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { PropType } from 'vue';
|
||||
import type { CellProps, DataTableItem, ItemKeySlot } from './types.js';
|
||||
import type { VDataTableHeaderCellColumnSlotProps } from './VDataTableHeaders.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type VDataTableItemCellColumnSlotProps<T> = Omit<ItemKeySlot<T>, 'value'> & {
|
||||
props: Record<string, unknown>;
|
||||
};
|
||||
export type VDataTableRowSlots<T> = {
|
||||
'item.data-table-select': VDataTableItemCellColumnSlotProps<T>;
|
||||
'item.data-table-expand': VDataTableItemCellColumnSlotProps<T>;
|
||||
'header.data-table-select': VDataTableHeaderCellColumnSlotProps;
|
||||
'header.data-table-expand': VDataTableHeaderCellColumnSlotProps;
|
||||
} & {
|
||||
[key: `item.${string}`]: ItemKeySlot<T>;
|
||||
[key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps;
|
||||
};
|
||||
export declare const makeVDataTableRowProps: <Defaults extends {
|
||||
mobile?: unknown;
|
||||
mobileBreakpoint?: unknown;
|
||||
density?: unknown;
|
||||
color?: unknown;
|
||||
index?: unknown;
|
||||
item?: unknown;
|
||||
cellProps?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
expandIcon?: unknown;
|
||||
onClick?: unknown;
|
||||
onContextmenu?: unknown;
|
||||
onDblclick?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
mobile: unknown extends Defaults["mobile"] ? {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
|
||||
default: unknown extends Defaults["mobile"] ? boolean | null : Defaults["mobile"] | NonNullable<boolean | null>;
|
||||
};
|
||||
mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../types.js").DisplayBreakpoint> : {
|
||||
type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : number | Defaults["mobileBreakpoint"] | import("../../types.js").DisplayBreakpoint>;
|
||||
default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : Defaults["mobileBreakpoint"] | NonNullable<number | import("../../types.js").DisplayBreakpoint>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
index: unknown extends Defaults["index"] ? NumberConstructor : {
|
||||
type: PropType<unknown extends Defaults["index"] ? number : number | Defaults["index"]>;
|
||||
default: unknown extends Defaults["index"] ? number : number | Defaults["index"];
|
||||
};
|
||||
item: unknown extends Defaults["item"] ? PropType<DataTableItem<any>> : {
|
||||
type: PropType<unknown extends Defaults["item"] ? DataTableItem<any> : DataTableItem<any> | Defaults["item"]>;
|
||||
default: unknown extends Defaults["item"] ? DataTableItem<any> : DataTableItem<any> | Defaults["item"];
|
||||
};
|
||||
cellProps: unknown extends Defaults["cellProps"] ? PropType<CellProps<any>> : {
|
||||
type: PropType<unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | CellProps<any>>;
|
||||
default: unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | NonNullable<CellProps<any>>;
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? IconValue : Defaults["collapseIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? IconValue : Defaults["expandIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
onClick: unknown extends Defaults["onClick"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick"]>;
|
||||
default: unknown extends Defaults["onClick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick"];
|
||||
};
|
||||
onContextmenu: unknown extends Defaults["onContextmenu"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onContextmenu"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onContextmenu"]>;
|
||||
default: unknown extends Defaults["onContextmenu"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onContextmenu"];
|
||||
};
|
||||
onDblclick: unknown extends Defaults["onDblclick"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onDblclick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onDblclick"]>;
|
||||
default: unknown extends Defaults["onDblclick"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onDblclick"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableRow: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
index?: number | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onDblclick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "cellProps" | "item" | "v-slots" | `v-slot:header.${string}` | `v-slot:item.${string}`>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
[x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `header.${string}`]: (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-select': (arg: VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-expand': (arg: VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
index?: number | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onDblclick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
index?: number | undefined;
|
||||
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onContextmenu?: ((args_0: MouseEvent) => void) | undefined;
|
||||
onDblclick?: ((args_0: MouseEvent) => void) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "cellProps" | "item" | "v-slots" | `v-slot:header.${string}` | `v-slot:item.${string}`>, string, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
collapseIcon: IconValue;
|
||||
expandIcon: IconValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
[x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `header.${string}`]: (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-select': (arg: VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-expand': (arg: VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
item?: DataTableItem<T>;
|
||||
cellProps?: CellProps<T>;
|
||||
}, slots: VDataTableRowSlots<T>) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
index: NumberConstructor;
|
||||
item: PropType<DataTableItem>;
|
||||
cellProps: PropType<CellProps<any>>;
|
||||
collapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
expandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||
onContextmenu: PropType<(args_0: MouseEvent) => void>;
|
||||
onDblclick: PropType<(args_0: MouseEvent) => void>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
color: StringConstructor;
|
||||
index: NumberConstructor;
|
||||
item: PropType<DataTableItem>;
|
||||
cellProps: PropType<CellProps<any>>;
|
||||
collapseIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
expandIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||
onContextmenu: PropType<(args_0: MouseEvent) => void>;
|
||||
onDblclick: PropType<(args_0: MouseEvent) => void>;
|
||||
}>>;
|
||||
export type VDataTableRow = InstanceType<typeof VDataTableRow>;
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
import { createVNode as _createVNode, Fragment as _Fragment, createElementVNode as _createElementVNode, mergeProps as _mergeProps, normalizeClass as _normalizeClass } from "vue";
|
||||
// Components
|
||||
import { VDataTableColumn } from "./VDataTableColumn.js";
|
||||
import { VBtn } from "../VBtn/index.js";
|
||||
import { VCheckboxBtn } from "../VCheckbox/index.js"; // Composables
|
||||
import { useExpanded } from "./composables/expand.js";
|
||||
import { useHeaders } from "./composables/headers.js";
|
||||
import { useSelection } from "./composables/select.js";
|
||||
import { useSort } from "./composables/sort.js";
|
||||
import { makeDensityProps } from "../../composables/density.js";
|
||||
import { makeDisplayProps, useDisplay } from "../../composables/display.js";
|
||||
import { IconValue } from "../../composables/icons.js"; // Utilities
|
||||
import { toDisplayString, withModifiers } from 'vue';
|
||||
import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVDataTableRowProps = propsFactory({
|
||||
color: String,
|
||||
index: Number,
|
||||
item: Object,
|
||||
cellProps: [Object, Function],
|
||||
collapseIcon: {
|
||||
type: IconValue,
|
||||
default: '$collapse'
|
||||
},
|
||||
expandIcon: {
|
||||
type: IconValue,
|
||||
default: '$expand'
|
||||
},
|
||||
onClick: EventProp(),
|
||||
onContextmenu: EventProp(),
|
||||
onDblclick: EventProp(),
|
||||
...makeDensityProps(),
|
||||
...makeDisplayProps()
|
||||
}, 'VDataTableRow');
|
||||
export const VDataTableRow = genericComponent()({
|
||||
name: 'VDataTableRow',
|
||||
props: makeVDataTableRowProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
displayClasses,
|
||||
mobile
|
||||
} = useDisplay(props, 'v-data-table__tr');
|
||||
const {
|
||||
isSelected,
|
||||
toggleSelect,
|
||||
someSelected,
|
||||
allSelected,
|
||||
selectAll
|
||||
} = useSelection();
|
||||
const {
|
||||
isExpanded,
|
||||
toggleExpand
|
||||
} = useExpanded();
|
||||
const {
|
||||
toggleSort,
|
||||
sortBy,
|
||||
isSorted
|
||||
} = useSort();
|
||||
const {
|
||||
columns
|
||||
} = useHeaders();
|
||||
useRender(() => _createElementVNode("tr", {
|
||||
"class": _normalizeClass(['v-data-table__tr', {
|
||||
'v-data-table__tr--clickable': !!(props.onClick || props.onContextmenu || props.onDblclick)
|
||||
}, displayClasses.value]),
|
||||
"onClick": props.onClick,
|
||||
"onContextmenu": props.onContextmenu,
|
||||
"onDblclick": props.onDblclick
|
||||
}, [props.item && columns.value.map((column, i) => {
|
||||
const item = props.item;
|
||||
const slotName = `item.${column.key}`;
|
||||
const headerSlotName = `header.${column.key}`;
|
||||
const slotProps = {
|
||||
index: props.index,
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
value: getObjectValueByPath(item.columns, column.key),
|
||||
column,
|
||||
isSelected,
|
||||
toggleSelect,
|
||||
isExpanded,
|
||||
toggleExpand
|
||||
};
|
||||
const columnSlotProps = {
|
||||
column,
|
||||
selectAll,
|
||||
isSorted,
|
||||
toggleSort,
|
||||
sortBy: sortBy.value,
|
||||
someSelected: someSelected.value,
|
||||
allSelected: allSelected.value,
|
||||
getSortIcon: () => ''
|
||||
};
|
||||
const cellProps = typeof props.cellProps === 'function' ? props.cellProps({
|
||||
index: slotProps.index,
|
||||
item: slotProps.item,
|
||||
internalItem: slotProps.internalItem,
|
||||
value: slotProps.value,
|
||||
column
|
||||
}) : props.cellProps;
|
||||
const columnCellProps = typeof column.cellProps === 'function' ? column.cellProps({
|
||||
index: slotProps.index,
|
||||
item: slotProps.item,
|
||||
internalItem: slotProps.internalItem,
|
||||
value: slotProps.value
|
||||
}) : column.cellProps;
|
||||
const noPadding = column.key === 'data-table-select' || column.key === 'data-table-expand';
|
||||
const isEmpty = column.key === 'data-table-group' && column.width === 0 && !column.title;
|
||||
return _createVNode(VDataTableColumn, _mergeProps({
|
||||
"align": column.align,
|
||||
"indent": column.indent,
|
||||
"class": {
|
||||
'v-data-table__td--expanded-row': column.key === 'data-table-expand',
|
||||
'v-data-table__td--select-row': column.key === 'data-table-select'
|
||||
},
|
||||
"fixed": column.fixed,
|
||||
"fixedOffset": column.fixedOffset,
|
||||
"fixedEndOffset": column.fixedEndOffset,
|
||||
"lastFixed": column.lastFixed,
|
||||
"firstFixedEnd": column.firstFixedEnd,
|
||||
"maxWidth": !mobile.value ? column.maxWidth : undefined,
|
||||
"noPadding": noPadding,
|
||||
"empty": isEmpty,
|
||||
"nowrap": column.nowrap,
|
||||
"width": !mobile.value ? column.width : undefined
|
||||
}, cellProps, columnCellProps), {
|
||||
default: () => {
|
||||
if (column.key === 'data-table-select') {
|
||||
return slots['item.data-table-select']?.({
|
||||
...slotProps,
|
||||
props: {
|
||||
color: props.color,
|
||||
disabled: !item.selectable,
|
||||
modelValue: isSelected([item]),
|
||||
onClick: withModifiers(() => toggleSelect(item), ['stop'])
|
||||
}
|
||||
}) ?? _createVNode(VCheckboxBtn, {
|
||||
"color": props.color,
|
||||
"disabled": !item.selectable,
|
||||
"density": props.density,
|
||||
"modelValue": isSelected([item]),
|
||||
"onClick": withModifiers(event => toggleSelect(item, props.index, event), ['stop'])
|
||||
}, null);
|
||||
}
|
||||
if (column.key === 'data-table-expand') {
|
||||
return slots['item.data-table-expand']?.({
|
||||
...slotProps,
|
||||
props: {
|
||||
icon: isExpanded(item) ? props.collapseIcon : props.expandIcon,
|
||||
size: 'small',
|
||||
variant: 'text',
|
||||
onClick: withModifiers(() => toggleExpand(item), ['stop'])
|
||||
}
|
||||
}) ?? _createVNode(VBtn, {
|
||||
"icon": isExpanded(item) ? props.collapseIcon : props.expandIcon,
|
||||
"size": "small",
|
||||
"variant": "text",
|
||||
"onClick": withModifiers(() => toggleExpand(item), ['stop'])
|
||||
}, null);
|
||||
}
|
||||
if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
|
||||
const displayValue = toDisplayString(slotProps.value);
|
||||
return !mobile.value ? displayValue : _createElementVNode(_Fragment, null, [_createElementVNode("div", {
|
||||
"class": "v-data-table__td-title"
|
||||
}, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), _createElementVNode("div", {
|
||||
"class": "v-data-table__td-value"
|
||||
}, [slots[slotName]?.(slotProps) ?? displayValue])]);
|
||||
}
|
||||
});
|
||||
})]));
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableRow.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+454
@@ -0,0 +1,454 @@
|
||||
import type { PropType } from 'vue';
|
||||
import type { Group, GroupSummary } from './composables/group.js';
|
||||
import type { CellProps, DataTableItem, GroupHeaderSlot, GroupSummarySlot, ItemSlot, RowProps } from './types.js';
|
||||
import type { VDataTableGroupHeaderRowSlots } from './VDataTableGroupHeaderRow.js';
|
||||
import type { VDataTableRowSlots } from './VDataTableRow.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableRowSlots<T> & {
|
||||
item: ItemSlot<T> & {
|
||||
props: Record<string, any>;
|
||||
};
|
||||
loading: never;
|
||||
'group-header': GroupHeaderSlot;
|
||||
'group-summary': GroupSummarySlot;
|
||||
'no-data': never;
|
||||
'expanded-row': ItemSlot<T>;
|
||||
};
|
||||
export declare const makeVDataTableRowsProps: <Defaults extends {
|
||||
mobile?: unknown;
|
||||
mobileBreakpoint?: unknown;
|
||||
density?: unknown;
|
||||
groupCollapseIcon?: unknown;
|
||||
groupExpandIcon?: unknown;
|
||||
collapseIcon?: unknown;
|
||||
expandIcon?: unknown;
|
||||
color?: unknown;
|
||||
loading?: unknown;
|
||||
loadingText?: unknown;
|
||||
hideNoData?: unknown;
|
||||
items?: unknown;
|
||||
noDataText?: unknown;
|
||||
rowProps?: unknown;
|
||||
cellProps?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
mobile: unknown extends Defaults["mobile"] ? {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["mobile"] ? boolean | null : boolean | Defaults["mobile"] | null>;
|
||||
default: unknown extends Defaults["mobile"] ? boolean | null : Defaults["mobile"] | NonNullable<boolean | null>;
|
||||
};
|
||||
mobileBreakpoint: unknown extends Defaults["mobileBreakpoint"] ? PropType<number | import("../../types.js").DisplayBreakpoint> : {
|
||||
type: PropType<unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : number | Defaults["mobileBreakpoint"] | import("../../types.js").DisplayBreakpoint>;
|
||||
default: unknown extends Defaults["mobileBreakpoint"] ? number | import("../../types.js").DisplayBreakpoint : Defaults["mobileBreakpoint"] | NonNullable<number | import("../../types.js").DisplayBreakpoint>;
|
||||
};
|
||||
density: unknown extends Defaults["density"] ? {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | import("../../composables/density.js").Density>;
|
||||
default: unknown extends Defaults["density"] ? import("../../composables/density.js").Density : Defaults["density"] | NonNullable<import("../../composables/density.js").Density>;
|
||||
};
|
||||
groupCollapseIcon: unknown extends Defaults["groupCollapseIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["groupCollapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["groupCollapseIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["groupCollapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["groupCollapseIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
groupExpandIcon: unknown extends Defaults["groupExpandIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["groupExpandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["groupExpandIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["groupExpandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["groupExpandIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
collapseIcon: unknown extends Defaults["collapseIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["collapseIcon"] ? import("../../composables/icons.js").IconValue : Defaults["collapseIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
expandIcon: unknown extends Defaults["expandIcon"] ? {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | import("../../composables/icons.js").IconValue>;
|
||||
default: unknown extends Defaults["expandIcon"] ? import("../../composables/icons.js").IconValue : Defaults["expandIcon"] | NonNullable<import("../../composables/icons.js").IconValue>;
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
loadingText: unknown extends Defaults["loadingText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"]>;
|
||||
default: unknown extends Defaults["loadingText"] ? string : string | Defaults["loadingText"];
|
||||
};
|
||||
hideNoData: unknown extends Defaults["hideNoData"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"]>;
|
||||
default: unknown extends Defaults["hideNoData"] ? boolean : boolean | Defaults["hideNoData"];
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<readonly (DataTableItem | Group | GroupSummary)[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly (DataTableItem | Group | GroupSummary)[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? readonly (DataTableItem<any> | Group<any> | GroupSummary<any>)[] : readonly (DataTableItem<any> | Group<any> | GroupSummary<any>)[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? readonly (DataTableItem<any> | Group<any> | GroupSummary<any>)[] : readonly (DataTableItem<any> | Group<any> | GroupSummary<any>)[] | Defaults["items"];
|
||||
};
|
||||
noDataText: unknown extends Defaults["noDataText"] ? {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["noDataText"] ? string : string | Defaults["noDataText"]>;
|
||||
default: unknown extends Defaults["noDataText"] ? string : string | Defaults["noDataText"];
|
||||
};
|
||||
rowProps: unknown extends Defaults["rowProps"] ? PropType<RowProps<any>> : {
|
||||
type: PropType<unknown extends Defaults["rowProps"] ? RowProps<any> : Defaults["rowProps"] | RowProps<any>>;
|
||||
default: unknown extends Defaults["rowProps"] ? RowProps<any> : Defaults["rowProps"] | NonNullable<RowProps<any>>;
|
||||
};
|
||||
cellProps: unknown extends Defaults["cellProps"] ? PropType<CellProps<any>> : {
|
||||
type: PropType<unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | CellProps<any>>;
|
||||
default: unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | NonNullable<CellProps<any>>;
|
||||
};
|
||||
};
|
||||
export declare const VDataTableRows: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
rowProps?: RowProps<any> | undefined;
|
||||
cellProps?: CellProps<any> | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:data-table-group" | "v-slot:data-table-select" | "v-slot:expanded-row" | "v-slot:group-header" | "v-slot:group-summary" | "v-slot:item" | "v-slot:loading" | "v-slot:no-data" | "v-slots" | `v-slot:header.${string}` | `v-slot:item.${string}`>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
[x: `item.${string}`]: (arg: import("./types.js").ItemKeySlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `header.${string}`]: (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-group': (arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-select': (arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-select': (arg: import("./VDataTableRow.js").VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-expand': (arg: import("./VDataTableRow.js").VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
index: number;
|
||||
item: unknown;
|
||||
internalItem: DataTableItem<unknown>;
|
||||
isExpanded: ReturnType<typeof import("./composables/expand.js").provideExpanded>['isExpanded'];
|
||||
toggleExpand: ReturnType<typeof import("./composables/expand.js").provideExpanded>['toggleExpand'];
|
||||
isSelected: ReturnType<typeof import("./composables/select.js").provideSelection>['isSelected'];
|
||||
toggleSelect: ReturnType<typeof import("./composables/select.js").provideSelection>['toggleSelect'];
|
||||
} & {
|
||||
columns: import("./types.js").InternalDataTableHeader[];
|
||||
} & {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loading: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'group-header': (arg: GroupHeaderSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'group-summary': (arg: GroupSummarySlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'no-data': () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'expanded-row': (arg: ItemSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
rowProps?: RowProps<any> | undefined;
|
||||
cellProps?: CellProps<any> | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
} & {
|
||||
mobileBreakpoint?: number | import("../../types.js").DisplayBreakpoint | undefined;
|
||||
color?: string | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
rowProps?: RowProps<any> | undefined;
|
||||
cellProps?: CellProps<any> | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "v-slot:data-table-group" | "v-slot:data-table-select" | "v-slot:expanded-row" | "v-slot:group-header" | "v-slot:group-summary" | "v-slot:item" | "v-slot:loading" | "v-slot:no-data" | "v-slots" | `v-slot:header.${string}` | `v-slot:item.${string}`>, string, {
|
||||
mobile: boolean | null;
|
||||
density: import("../../composables/density.js").Density;
|
||||
groupCollapseIcon: import("../../composables/icons.js").IconValue;
|
||||
groupExpandIcon: import("../../composables/icons.js").IconValue;
|
||||
collapseIcon: import("../../composables/icons.js").IconValue;
|
||||
expandIcon: import("../../composables/icons.js").IconValue;
|
||||
loadingText: string;
|
||||
hideNoData: boolean;
|
||||
noDataText: string;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
[x: `item.${string}`]: (arg: import("./types.js").ItemKeySlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
[x: `header.${string}`]: (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-group': (arg: {
|
||||
item: Group;
|
||||
count: number;
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'data-table-select': (arg: {
|
||||
props: Record<string, unknown>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-select': (arg: import("./VDataTableRow.js").VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'item.data-table-expand': (arg: import("./VDataTableRow.js").VDataTableItemCellColumnSlotProps<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-select': (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'header.data-table-expand': (arg: import("./VDataTableHeaders.js").VDataTableHeaderCellColumnSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
item: (arg: {
|
||||
index: number;
|
||||
item: unknown;
|
||||
internalItem: DataTableItem<unknown>;
|
||||
isExpanded: ReturnType<typeof import("./composables/expand.js").provideExpanded>['isExpanded'];
|
||||
toggleExpand: ReturnType<typeof import("./composables/expand.js").provideExpanded>['toggleExpand'];
|
||||
isSelected: ReturnType<typeof import("./composables/select.js").provideSelection>['isSelected'];
|
||||
toggleSelect: ReturnType<typeof import("./composables/select.js").provideSelection>['toggleSelect'];
|
||||
} & {
|
||||
columns: import("./types.js").InternalDataTableHeader[];
|
||||
} & {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loading: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'group-header': (arg: GroupHeaderSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'group-summary': (arg: GroupSummarySlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'no-data': () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'expanded-row': (arg: ItemSlot<unknown>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
items?: readonly (DataTableItem<T> | Group<T> | GroupSummary<T>)[];
|
||||
}, slots: VDataTableRowsSlots<T>) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
groupCollapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
groupExpandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
expandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
loadingText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
hideNoData: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<readonly (DataTableItem | Group | GroupSummary)[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
noDataText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
rowProps: PropType<RowProps<any>>;
|
||||
cellProps: PropType<CellProps<any>>;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
mobile: {
|
||||
type: PropType<boolean | null>;
|
||||
default: boolean;
|
||||
};
|
||||
mobileBreakpoint: PropType<number | import("../../types.js").DisplayBreakpoint>;
|
||||
density: {
|
||||
type: PropType<import("../../composables/density.js").Density>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
groupCollapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
groupExpandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
collapseIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
expandIcon: {
|
||||
type: PropType<import("../../composables/icons.js").IconValue>;
|
||||
default: string;
|
||||
};
|
||||
color: StringConstructor;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
loadingText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
hideNoData: BooleanConstructor;
|
||||
items: {
|
||||
type: PropType<readonly (DataTableItem | Group | GroupSummary)[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
noDataText: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
rowProps: PropType<RowProps<any>>;
|
||||
cellProps: PropType<CellProps<any>>;
|
||||
}>>;
|
||||
export type VDataTableRows = InstanceType<typeof VDataTableRows>;
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
import { createElementVNode as _createElementVNode, Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { makeVDataTableGroupHeaderRowProps, VDataTableGroupHeaderRow } from "./VDataTableGroupHeaderRow.js";
|
||||
import { makeVDataTableRowProps, VDataTableRow } from "./VDataTableRow.js"; // Composables
|
||||
import { useExpanded } from "./composables/expand.js";
|
||||
import { useGroupBy } from "./composables/group.js";
|
||||
import { useHeaders } from "./composables/headers.js";
|
||||
import { useSelection } from "./composables/select.js";
|
||||
import { makeDisplayProps, useDisplay } from "../../composables/display.js";
|
||||
import { useLocale } from "../../composables/locale.js"; // Utilities
|
||||
import { Fragment, mergeProps } from 'vue';
|
||||
import { genericComponent, getPrefixedEventHandlers, pick, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVDataTableRowsProps = propsFactory({
|
||||
color: String,
|
||||
loading: [Boolean, String],
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '$vuetify.dataIterator.loadingText'
|
||||
},
|
||||
hideNoData: Boolean,
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: '$vuetify.noDataText'
|
||||
},
|
||||
rowProps: [Object, Function],
|
||||
cellProps: [Object, Function],
|
||||
...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon', 'density']),
|
||||
...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon', 'density']),
|
||||
...makeDisplayProps()
|
||||
}, 'VDataTableRows');
|
||||
export const VDataTableRows = genericComponent()({
|
||||
name: 'VDataTableRows',
|
||||
inheritAttrs: false,
|
||||
props: makeVDataTableRowsProps(),
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
columns
|
||||
} = useHeaders();
|
||||
const {
|
||||
expandOnClick,
|
||||
toggleExpand,
|
||||
isExpanded
|
||||
} = useExpanded();
|
||||
const {
|
||||
isSelected,
|
||||
toggleSelect
|
||||
} = useSelection();
|
||||
const {
|
||||
toggleGroup,
|
||||
isGroupOpen
|
||||
} = useGroupBy();
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
const {
|
||||
mobile
|
||||
} = useDisplay(props);
|
||||
useRender(() => {
|
||||
const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon', 'density']);
|
||||
if (props.loading && (!props.items.length || slots.loading)) {
|
||||
return _createElementVNode("tr", {
|
||||
"class": "v-data-table-rows-loading",
|
||||
"key": "loading"
|
||||
}, [_createElementVNode("td", {
|
||||
"colspan": columns.value.length
|
||||
}, [slots.loading?.() ?? t(props.loadingText)])]);
|
||||
}
|
||||
if (!props.loading && !props.items.length && !props.hideNoData) {
|
||||
return _createElementVNode("tr", {
|
||||
"class": "v-data-table-rows-no-data",
|
||||
"key": "no-data"
|
||||
}, [_createElementVNode("td", {
|
||||
"colspan": columns.value.length
|
||||
}, [slots['no-data']?.() ?? t(props.noDataText)])]);
|
||||
}
|
||||
return _createElementVNode(_Fragment, null, [props.items.map((item, index) => {
|
||||
if (item.type === 'group') {
|
||||
const slotProps = {
|
||||
index,
|
||||
item,
|
||||
columns: columns.value,
|
||||
isExpanded,
|
||||
toggleExpand,
|
||||
isSelected,
|
||||
toggleSelect,
|
||||
toggleGroup,
|
||||
isGroupOpen
|
||||
};
|
||||
return slots['group-header'] ? slots['group-header'](slotProps) : _createVNode(VDataTableGroupHeaderRow, _mergeProps({
|
||||
"key": `group-header_${item.id}`,
|
||||
"item": item
|
||||
}, getPrefixedEventHandlers(attrs, ':groupHeader', () => slotProps), groupHeaderRowProps), slots);
|
||||
}
|
||||
if (item.type === 'group-summary') {
|
||||
const slotProps = {
|
||||
index,
|
||||
item,
|
||||
columns: columns.value,
|
||||
toggleGroup
|
||||
};
|
||||
return slots['group-summary']?.(slotProps) ?? '';
|
||||
}
|
||||
const slotProps = {
|
||||
index: item.virtualIndex ?? index,
|
||||
item: item.raw,
|
||||
internalItem: item,
|
||||
columns: columns.value,
|
||||
isExpanded,
|
||||
toggleExpand,
|
||||
isSelected,
|
||||
toggleSelect
|
||||
};
|
||||
const itemSlotProps = {
|
||||
...slotProps,
|
||||
props: mergeProps({
|
||||
key: `item_${item.key ?? item.index}`,
|
||||
onClick: expandOnClick.value ? () => {
|
||||
toggleExpand(item);
|
||||
} : undefined,
|
||||
index,
|
||||
item,
|
||||
color: props.color,
|
||||
cellProps: props.cellProps,
|
||||
collapseIcon: props.collapseIcon,
|
||||
expandIcon: props.expandIcon,
|
||||
density: props.density,
|
||||
mobile: mobile.value
|
||||
}, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
|
||||
item: slotProps.item,
|
||||
index: slotProps.index,
|
||||
internalItem: slotProps.internalItem
|
||||
}) : props.rowProps)
|
||||
};
|
||||
return _createElementVNode(_Fragment, {
|
||||
"key": itemSlotProps.props.key
|
||||
}, [slots.item ? slots.item(itemSlotProps) : _createVNode(VDataTableRow, itemSlotProps.props, slots), isExpanded(item) && slots['expanded-row']?.(slotProps)]);
|
||||
})]);
|
||||
});
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableRows.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+1931
File diff suppressed because it is too large
Load Diff
+200
@@ -0,0 +1,200 @@
|
||||
import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode } from "vue";
|
||||
// Components
|
||||
import { makeDataTableProps } from "./VDataTable.js";
|
||||
import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.js";
|
||||
import { VDataTableHeaders } from "./VDataTableHeaders.js";
|
||||
import { VDataTableRows } from "./VDataTableRows.js";
|
||||
import { VDivider } from "../VDivider/index.js";
|
||||
import { VTable } from "../VTable/index.js"; // Composables
|
||||
import { provideExpanded } from "./composables/expand.js";
|
||||
import { createGroupBy, 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 { createPagination, makeDataTablePaginateProps, providePagination } from "./composables/paginate.js";
|
||||
import { provideSelection } from "./composables/select.js";
|
||||
import { createSort, provideSort } from "./composables/sort.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js"; // Utilities
|
||||
import { computed, provide, toRef, toRefs } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // 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, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
groupBy
|
||||
} = createGroupBy(props);
|
||||
const {
|
||||
initialSortOrder,
|
||||
sortBy,
|
||||
multiSort,
|
||||
mustSort
|
||||
} = createSort(props);
|
||||
const {
|
||||
page,
|
||||
itemsPerPage
|
||||
} = createPagination(props);
|
||||
const {
|
||||
disableSort
|
||||
} = toRefs(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({
|
||||
initialSortOrder,
|
||||
sortBy,
|
||||
multiSort,
|
||||
mustSort,
|
||||
page
|
||||
});
|
||||
const {
|
||||
opened,
|
||||
isGroupOpen,
|
||||
toggleGroup,
|
||||
extractRows
|
||||
} = provideGroupBy({
|
||||
groupBy,
|
||||
sortBy,
|
||||
disableSort
|
||||
});
|
||||
const {
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage
|
||||
} = providePagination({
|
||||
page,
|
||||
itemsPerPage,
|
||||
itemsLength
|
||||
});
|
||||
const {
|
||||
flatItems
|
||||
} = useGroupedItems(items, groupBy, opened, () => !!slots['group-summary']);
|
||||
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,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage,
|
||||
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(omit(props, ['multiSort']));
|
||||
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),
|
||||
default: () => slots.default ? slots.default(slotProps.value) : _createElementVNode(_Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && _createElementVNode("thead", {
|
||||
"key": "thead",
|
||||
"class": "v-data-table__thead",
|
||||
"role": "rowgroup"
|
||||
}, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
|
||||
"multiSort": !!props.multiSort
|
||||
}), slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && _createElementVNode("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) : !props.hideDefaultFooter && _createElementVNode(_Fragment, null, [_createVNode(VDivider, null, null), _createVNode(VDataTableFooter, dataTableFooterProps, {
|
||||
prepend: slots['footer.prepend']
|
||||
})])
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VDataTableServer.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+1599
File diff suppressed because it is too large
Load Diff
+252
@@ -0,0 +1,252 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode } 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, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
groupBy
|
||||
} = createGroupBy(props);
|
||||
const {
|
||||
initialSortOrder,
|
||||
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({
|
||||
initialSortOrder,
|
||||
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, () => !!slots['group-summary']);
|
||||
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,
|
||||
virtualIndex: item.index
|
||||
})));
|
||||
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(omit(props, ['multiSort']));
|
||||
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": {
|
||||
height: convertToUnit(props.height)
|
||||
}
|
||||
}, [_createElementVNode("table", 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", {
|
||||
"key": "tbody"
|
||||
}, [_createElementVNode("tr", {
|
||||
"ref": markerRef,
|
||||
"style": {
|
||||
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: ({
|
||||
itemRef
|
||||
}) => slots.item?.({
|
||||
...itemSlotProps,
|
||||
itemRef
|
||||
}) ?? _createVNode(VDataTableRow, _mergeProps(itemSlotProps.props, {
|
||||
"ref": itemRef,
|
||||
"key": itemSlotProps.internalItem.index,
|
||||
"index": itemSlotProps.index
|
||||
}), slots)
|
||||
})
|
||||
}), slots['body.append']?.(slotProps.value), _createElementVNode("tr", {
|
||||
"style": {
|
||||
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
|
||||
+1
File diff suppressed because one or more lines are too long
+20
@@ -0,0 +1,20 @@
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
|
||||
$data-table-header-sort-badge-size: 20px !default;
|
||||
$data-table-header-sort-badge-color: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
|
||||
$data-table-header-sort-icon-default-opacity: .0 !default;
|
||||
$data-table-header-sort-icon-hover-opacity: .5 !default;
|
||||
$data-table-header-sort-icon-margin-inline: 0px !default;
|
||||
|
||||
$data-table-loading-opacity: var(--v-disabled-opacity) !default;
|
||||
|
||||
$data-table-footer-info-min-width: 116px !default;
|
||||
$data-table-footer-info-padding: 0 16px !default;
|
||||
$data-table-footer-padding: 8px 4px !default;
|
||||
$data-table-footer-pagination-margin-inline-start: 16px !default;
|
||||
$data-table-footer-select-width: 90px !default;
|
||||
$data-table-footer-items-per-page-padding: 8px !default;
|
||||
|
||||
$data-table-header-mobile-chip-icon-color: tools.theme-color('on-surface', var(--v-disabled-opacity)) !default;
|
||||
$data-table-header-mobile-chip-icon-color-active: rgba(var(--v-theme-on-surface)) !default;
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import type { InjectionKey, PropType, Ref } from 'vue';
|
||||
import type { DataTableItem } from '../types.js';
|
||||
export declare const makeDataTableExpandProps: <Defaults extends {
|
||||
expandOnClick?: unknown;
|
||||
showExpand?: unknown;
|
||||
expanded?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
expandOnClick: unknown extends Defaults["expandOnClick"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["expandOnClick"] ? boolean : boolean | Defaults["expandOnClick"]>;
|
||||
default: unknown extends Defaults["expandOnClick"] ? boolean : boolean | Defaults["expandOnClick"];
|
||||
};
|
||||
showExpand: unknown extends Defaults["showExpand"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showExpand"] ? boolean : boolean | Defaults["showExpand"]>;
|
||||
default: unknown extends Defaults["showExpand"] ? boolean : boolean | Defaults["showExpand"];
|
||||
};
|
||||
expanded: unknown extends Defaults["expanded"] ? {
|
||||
type: PropType<readonly string[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly string[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["expanded"] ? readonly string[] : readonly string[] | Defaults["expanded"]>;
|
||||
default: unknown extends Defaults["expanded"] ? readonly string[] : readonly string[] | Defaults["expanded"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableExpandedKey: InjectionKey<{
|
||||
expand: (item: DataTableItem, value: boolean) => void;
|
||||
expanded: Ref<Set<string>>;
|
||||
expandOnClick: Ref<boolean | undefined>;
|
||||
isExpanded: (item: DataTableItem) => boolean;
|
||||
toggleExpand: (item: DataTableItem) => void;
|
||||
}>;
|
||||
type ExpandProps = {
|
||||
expandOnClick: boolean;
|
||||
expanded: readonly string[];
|
||||
'onUpdate:expanded': ((value: any[]) => void) | undefined;
|
||||
};
|
||||
export declare function provideExpanded(props: ExpandProps): {
|
||||
expand: (item: DataTableItem, value: boolean) => void;
|
||||
expanded: Ref<Set<string>, Set<string>> & {
|
||||
readonly externalValue: readonly string[];
|
||||
};
|
||||
expandOnClick: Readonly<Ref<boolean, boolean>>;
|
||||
isExpanded: (item: DataTableItem) => boolean;
|
||||
toggleExpand: (item: DataTableItem) => void;
|
||||
};
|
||||
export declare function useExpanded(): {
|
||||
expand: (item: DataTableItem, value: boolean) => void;
|
||||
expanded: Ref<Set<string>>;
|
||||
expandOnClick: Ref<boolean | undefined>;
|
||||
isExpanded: (item: DataTableItem) => boolean;
|
||||
toggleExpand: (item: DataTableItem) => void;
|
||||
};
|
||||
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
// Composables
|
||||
import { useProxiedModel } from "../../../composables/proxiedModel.js"; // Utilities
|
||||
import { inject, provide, toRaw, toRef } from 'vue';
|
||||
import { propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeDataTableExpandProps = propsFactory({
|
||||
expandOnClick: Boolean,
|
||||
showExpand: Boolean,
|
||||
expanded: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}, 'DataTable-expand');
|
||||
export const VDataTableExpandedKey = Symbol.for('vuetify:datatable:expanded');
|
||||
export function provideExpanded(props) {
|
||||
const expandOnClick = toRef(() => props.expandOnClick);
|
||||
const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {
|
||||
return new Set(v);
|
||||
}, v => {
|
||||
return [...v.values()];
|
||||
});
|
||||
function expand(item, value) {
|
||||
const newExpanded = new Set(expanded.value);
|
||||
const rawValue = toRaw(item.value);
|
||||
if (!value) {
|
||||
const item = [...expanded.value].find(x => toRaw(x) === rawValue);
|
||||
newExpanded.delete(item);
|
||||
} else {
|
||||
newExpanded.add(item.value);
|
||||
}
|
||||
expanded.value = newExpanded;
|
||||
}
|
||||
function isExpanded(item) {
|
||||
const rawValue = toRaw(item.value);
|
||||
return [...expanded.value].some(x => toRaw(x) === rawValue);
|
||||
}
|
||||
function toggleExpand(item) {
|
||||
expand(item, !isExpanded(item));
|
||||
}
|
||||
const data = {
|
||||
expand,
|
||||
expanded,
|
||||
expandOnClick,
|
||||
isExpanded,
|
||||
toggleExpand
|
||||
};
|
||||
provide(VDataTableExpandedKey, data);
|
||||
return data;
|
||||
}
|
||||
export function useExpanded() {
|
||||
const data = inject(VDataTableExpandedKey);
|
||||
if (!data) throw new Error('foo');
|
||||
return data;
|
||||
}
|
||||
//# sourceMappingURL=expand.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"expand.js","names":["useProxiedModel","inject","provide","toRaw","toRef","propsFactory","makeDataTableExpandProps","expandOnClick","Boolean","showExpand","expanded","type","Array","default","VDataTableExpandedKey","Symbol","for","provideExpanded","props","v","Set","values","expand","item","value","newExpanded","rawValue","find","x","delete","add","isExpanded","some","toggleExpand","data","useExpanded","Error"],"sources":["../../../../src/components/VDataTable/composables/expand.ts"],"sourcesContent":["// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { inject, provide, toRaw, toRef } from 'vue'\nimport { propsFactory } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\nimport type { DataTableItem } from '../types'\n\nexport const makeDataTableExpandProps = propsFactory({\n expandOnClick: Boolean,\n showExpand: Boolean,\n expanded: {\n type: Array as PropType<readonly string[]>,\n default: () => ([]),\n },\n}, 'DataTable-expand')\n\nexport const VDataTableExpandedKey: InjectionKey<{\n expand: (item: DataTableItem, value: boolean) => void\n expanded: Ref<Set<string>>\n expandOnClick: Ref<boolean | undefined>\n isExpanded: (item: DataTableItem) => boolean\n toggleExpand: (item: DataTableItem) => void\n}> = Symbol.for('vuetify:datatable:expanded')\n\ntype ExpandProps = {\n expandOnClick: boolean\n expanded: readonly string[]\n 'onUpdate:expanded': ((value: any[]) => void) | undefined\n}\n\nexport function provideExpanded (props: ExpandProps) {\n const expandOnClick = toRef(() => props.expandOnClick)\n const expanded = useProxiedModel(props, 'expanded', props.expanded, v => {\n return new Set(v)\n }, v => {\n return [...v.values()]\n })\n\n function expand (item: DataTableItem, value: boolean) {\n const newExpanded = new Set(expanded.value)\n const rawValue = toRaw(item.value)\n\n if (!value) {\n const item = [...expanded.value].find(x => toRaw(x) === rawValue)!\n newExpanded.delete(item)\n } else {\n newExpanded.add(item.value)\n }\n\n expanded.value = newExpanded\n }\n\n function isExpanded (item: DataTableItem) {\n const rawValue = toRaw(item.value)\n return [...expanded.value].some(x => toRaw(x) === rawValue)\n }\n\n function toggleExpand (item: DataTableItem) {\n expand(item, !isExpanded(item))\n }\n\n const data = { expand, expanded, expandOnClick, isExpanded, toggleExpand }\n\n provide(VDataTableExpandedKey, data)\n\n return data\n}\n\nexport function useExpanded () {\n const data = inject(VDataTableExpandedKey)\n\n if (!data) throw new Error('foo')\n\n return data\n}\n"],"mappings":"AAAA;AAAA,SACSA,eAAe,gDAExB;AACA,SAASC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC1CC,YAAY,kCAErB;AAIA,OAAO,MAAMC,wBAAwB,GAAGD,YAAY,CAAC;EACnDE,aAAa,EAAEC,OAAO;EACtBC,UAAU,EAAED,OAAO;EACnBE,QAAQ,EAAE;IACRC,IAAI,EAAEC,KAAoC;IAC1CC,OAAO,EAAEA,CAAA,KAAO;EAClB;AACF,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMC,qBAMX,GAAGC,MAAM,CAACC,GAAG,CAAC,4BAA4B,CAAC;AAQ7C,OAAO,SAASC,eAAeA,CAAEC,KAAkB,EAAE;EACnD,MAAMX,aAAa,GAAGH,KAAK,CAAC,MAAMc,KAAK,CAACX,aAAa,CAAC;EACtD,MAAMG,QAAQ,GAAGV,eAAe,CAACkB,KAAK,EAAE,UAAU,EAAEA,KAAK,CAACR,QAAQ,EAAES,CAAC,IAAI;IACvE,OAAO,IAAIC,GAAG,CAACD,CAAC,CAAC;EACnB,CAAC,EAAEA,CAAC,IAAI;IACN,OAAO,CAAC,GAAGA,CAAC,CAACE,MAAM,CAAC,CAAC,CAAC;EACxB,CAAC,CAAC;EAEF,SAASC,MAAMA,CAAEC,IAAmB,EAAEC,KAAc,EAAE;IACpD,MAAMC,WAAW,GAAG,IAAIL,GAAG,CAACV,QAAQ,CAACc,KAAK,CAAC;IAC3C,MAAME,QAAQ,GAAGvB,KAAK,CAACoB,IAAI,CAACC,KAAK,CAAC;IAElC,IAAI,CAACA,KAAK,EAAE;MACV,MAAMD,IAAI,GAAG,CAAC,GAAGb,QAAQ,CAACc,KAAK,CAAC,CAACG,IAAI,CAACC,CAAC,IAAIzB,KAAK,CAACyB,CAAC,CAAC,KAAKF,QAAQ,CAAE;MAClED,WAAW,CAACI,MAAM,CAACN,IAAI,CAAC;IAC1B,CAAC,MAAM;MACLE,WAAW,CAACK,GAAG,CAACP,IAAI,CAACC,KAAK,CAAC;IAC7B;IAEAd,QAAQ,CAACc,KAAK,GAAGC,WAAW;EAC9B;EAEA,SAASM,UAAUA,CAAER,IAAmB,EAAE;IACxC,MAAMG,QAAQ,GAAGvB,KAAK,CAACoB,IAAI,CAACC,KAAK,CAAC;IAClC,OAAO,CAAC,GAAGd,QAAQ,CAACc,KAAK,CAAC,CAACQ,IAAI,CAACJ,CAAC,IAAIzB,KAAK,CAACyB,CAAC,CAAC,KAAKF,QAAQ,CAAC;EAC7D;EAEA,SAASO,YAAYA,CAAEV,IAAmB,EAAE;IAC1CD,MAAM,CAACC,IAAI,EAAE,CAACQ,UAAU,CAACR,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMW,IAAI,GAAG;IAAEZ,MAAM;IAAEZ,QAAQ;IAAEH,aAAa;IAAEwB,UAAU;IAAEE;EAAa,CAAC;EAE1E/B,OAAO,CAACY,qBAAqB,EAAEoB,IAAI,CAAC;EAEpC,OAAOA,IAAI;AACb;AAEA,OAAO,SAASC,WAAWA,CAAA,EAAI;EAC7B,MAAMD,IAAI,GAAGjC,MAAM,CAACa,qBAAqB,CAAC;EAE1C,IAAI,CAACoB,IAAI,EAAE,MAAM,IAAIE,KAAK,CAAC,KAAK,CAAC;EAEjC,OAAOF,IAAI;AACb","ignoreList":[]}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
import type { MaybeRefOrGetter, PropType, Ref } from 'vue';
|
||||
import type { SortItem } from './sort.js';
|
||||
import type { DataTableItem } from '../types.js';
|
||||
export interface GroupableItem<T = any> {
|
||||
type: 'item';
|
||||
raw: T;
|
||||
}
|
||||
export interface Group<T = any> {
|
||||
type: 'group';
|
||||
depth: number;
|
||||
id: string;
|
||||
key: string;
|
||||
value: any;
|
||||
items: readonly (T | Group<T> | GroupSummary<T>)[];
|
||||
}
|
||||
export interface GroupSummary<T = any> {
|
||||
type: 'group-summary';
|
||||
depth: number;
|
||||
id: string;
|
||||
key: string;
|
||||
value: any;
|
||||
items: readonly (T | Group<T> | GroupSummary<T>)[];
|
||||
}
|
||||
export declare const makeDataTableGroupProps: <Defaults extends {
|
||||
groupBy?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
groupBy: unknown extends Defaults["groupBy"] ? {
|
||||
type: PropType<readonly SortItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly SortItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["groupBy"] ? readonly SortItem[] : readonly SortItem[] | Defaults["groupBy"]>;
|
||||
default: unknown extends Defaults["groupBy"] ? readonly SortItem[] : readonly SortItem[] | Defaults["groupBy"];
|
||||
};
|
||||
};
|
||||
type GroupProps = {
|
||||
groupBy: readonly SortItem[];
|
||||
'onUpdate:groupBy': ((value: SortItem[]) => void) | undefined;
|
||||
};
|
||||
export declare function createGroupBy(props: GroupProps): {
|
||||
groupBy: Ref<readonly SortItem[], readonly SortItem[]> & {
|
||||
readonly externalValue: readonly SortItem[];
|
||||
};
|
||||
};
|
||||
export declare function provideGroupBy(options: {
|
||||
groupBy: Ref<readonly SortItem[]>;
|
||||
sortBy: Ref<readonly SortItem[]>;
|
||||
disableSort?: Ref<boolean>;
|
||||
}): {
|
||||
sortByWithGroups: import("vue").ComputedRef<SortItem[]>;
|
||||
toggleGroup: (group: Group) => void;
|
||||
opened: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
|
||||
groupBy: Ref<readonly SortItem[], readonly SortItem[]>;
|
||||
extractRows: <T extends GroupableItem>(items: readonly (T | Group<T> | GroupSummary<T>)[]) => T[];
|
||||
isGroupOpen: (group: Group) => boolean;
|
||||
};
|
||||
export declare function useGroupBy(): {
|
||||
opened: Ref<Set<string>>;
|
||||
toggleGroup: (group: Group) => void;
|
||||
isGroupOpen: (group: Group) => boolean;
|
||||
sortByWithGroups: Ref<SortItem[]>;
|
||||
groupBy: Ref<readonly SortItem[]>;
|
||||
extractRows: (items: (DataTableItem | Group<DataTableItem>)[]) => DataTableItem[];
|
||||
};
|
||||
export declare function useGroupedItems<T extends GroupableItem>(items: MaybeRefOrGetter<readonly T[]>, groupBy: Ref<readonly SortItem[]>, opened: Ref<Set<string>>, hasSummary: MaybeRefOrGetter<boolean>): {
|
||||
groups: import("vue").ComputedRef<Group<T>[]>;
|
||||
flatItems: import("vue").ComputedRef<readonly (T | Group<T> | GroupSummary<T>)[]>;
|
||||
};
|
||||
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
// Composables
|
||||
import { useProxiedModel } from "../../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, inject, provide, ref, toValue } from 'vue';
|
||||
import { getObjectValueByPath, propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeDataTableGroupProps = propsFactory({
|
||||
groupBy: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
}, 'DataTable-group');
|
||||
const VDataTableGroupSymbol = Symbol.for('vuetify:data-table-group');
|
||||
export function createGroupBy(props) {
|
||||
const groupBy = useProxiedModel(props, 'groupBy');
|
||||
return {
|
||||
groupBy
|
||||
};
|
||||
}
|
||||
export function provideGroupBy(options) {
|
||||
const {
|
||||
disableSort,
|
||||
groupBy,
|
||||
sortBy
|
||||
} = options;
|
||||
const opened = ref(new Set());
|
||||
const sortByWithGroups = computed(() => {
|
||||
return groupBy.value.map(val => ({
|
||||
...val,
|
||||
order: val.order ?? false
|
||||
})).concat(disableSort?.value ? [] : sortBy.value);
|
||||
});
|
||||
function isGroupOpen(group) {
|
||||
return opened.value.has(group.id);
|
||||
}
|
||||
function toggleGroup(group) {
|
||||
const newOpened = new Set(opened.value);
|
||||
if (!isGroupOpen(group)) newOpened.add(group.id);else newOpened.delete(group.id);
|
||||
opened.value = newOpened;
|
||||
}
|
||||
function extractRows(items) {
|
||||
function dive(group) {
|
||||
const arr = [];
|
||||
for (const item of group.items) {
|
||||
if ('type' in item && item.type === 'group') {
|
||||
arr.push(...dive(item));
|
||||
} else {
|
||||
arr.push(item);
|
||||
}
|
||||
}
|
||||
return [...new Set(arr)];
|
||||
}
|
||||
return dive({
|
||||
type: 'group',
|
||||
items,
|
||||
id: 'dummy',
|
||||
key: 'dummy',
|
||||
value: 'dummy',
|
||||
depth: 0
|
||||
});
|
||||
}
|
||||
|
||||
// onBeforeMount(() => {
|
||||
// for (const key of groupedItems.value.keys()) {
|
||||
// opened.value.add(key)
|
||||
// }
|
||||
// })
|
||||
|
||||
const data = {
|
||||
sortByWithGroups,
|
||||
toggleGroup,
|
||||
opened,
|
||||
groupBy,
|
||||
extractRows,
|
||||
isGroupOpen
|
||||
};
|
||||
provide(VDataTableGroupSymbol, data);
|
||||
return data;
|
||||
}
|
||||
export function useGroupBy() {
|
||||
const data = inject(VDataTableGroupSymbol);
|
||||
if (!data) throw new Error('Missing group!');
|
||||
return data;
|
||||
}
|
||||
function groupItemsByProperty(items, groupBy) {
|
||||
if (!items.length) return [];
|
||||
const groups = new Map();
|
||||
for (const item of items) {
|
||||
const value = getObjectValueByPath(item.raw, groupBy);
|
||||
if (!groups.has(value)) {
|
||||
groups.set(value, []);
|
||||
}
|
||||
groups.get(value).push(item);
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
function groupItems(items, groupBy, depth = 0, prefix = 'root') {
|
||||
if (!groupBy.length) return [];
|
||||
const groupedItems = groupItemsByProperty(items, groupBy[0]);
|
||||
const groups = [];
|
||||
const rest = groupBy.slice(1);
|
||||
groupedItems.forEach((items, value) => {
|
||||
const key = groupBy[0];
|
||||
const id = `${prefix}_${key}_${value}`;
|
||||
groups.push({
|
||||
depth,
|
||||
id,
|
||||
key,
|
||||
value,
|
||||
items: rest.length ? groupItems(items, rest, depth + 1, id) : items,
|
||||
type: 'group'
|
||||
});
|
||||
});
|
||||
return groups;
|
||||
}
|
||||
function flattenItems(items, opened, hasSummary) {
|
||||
const flatItems = [];
|
||||
for (const item of items) {
|
||||
// TODO: make this better
|
||||
if ('type' in item && item.type === 'group') {
|
||||
if (item.value != null) {
|
||||
flatItems.push(item);
|
||||
}
|
||||
if (opened.has(item.id) || item.value == null) {
|
||||
flatItems.push(...flattenItems(item.items, opened, hasSummary));
|
||||
if (hasSummary) {
|
||||
flatItems.push({
|
||||
...item,
|
||||
type: 'group-summary'
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
flatItems.push(item);
|
||||
}
|
||||
}
|
||||
return flatItems;
|
||||
}
|
||||
export function useGroupedItems(items, groupBy, opened, hasSummary) {
|
||||
const groups = computed(() => {
|
||||
if (!groupBy.value.length) return [];
|
||||
return groupItems(toValue(items), groupBy.value.map(item => item.key));
|
||||
});
|
||||
const flatItems = computed(() => {
|
||||
if (!groupBy.value.length) return toValue(items);
|
||||
return flattenItems(groups.value, opened.value, toValue(hasSummary));
|
||||
});
|
||||
return {
|
||||
groups,
|
||||
flatItems
|
||||
};
|
||||
}
|
||||
//# sourceMappingURL=group.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+352
@@ -0,0 +1,352 @@
|
||||
import type { DeepReadonly, InjectionKey, PropType, Ref } from 'vue';
|
||||
import type { SortItem } from './sort.js';
|
||||
import type { DataTableCompareFunction, DataTableHeader, InternalDataTableHeader } from '../types.js';
|
||||
import type { FilterKeyFunctions } from '../../../composables/filter.js';
|
||||
export declare const makeDataTableHeaderProps: <Defaults extends {
|
||||
headers?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
headers: unknown extends Defaults["headers"] ? PropType<readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly /*elided*/ any[] | undefined;
|
||||
}[] | undefined;
|
||||
}[]> : {
|
||||
type: PropType<unknown extends Defaults["headers"] ? readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly any[] | undefined;
|
||||
}[] | undefined;
|
||||
}[] : readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly any[] | undefined;
|
||||
}[] | undefined;
|
||||
}[] | Defaults["headers"]>;
|
||||
default: unknown extends Defaults["headers"] ? readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly any[] | undefined;
|
||||
}[] | undefined;
|
||||
}[] : readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly {
|
||||
readonly key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
readonly value?: import("../../../util/index.js").SelectItemKey<Record<string, any>>;
|
||||
readonly title?: string;
|
||||
readonly fixed?: boolean | 'start' | 'end';
|
||||
readonly align?: 'start' | 'end' | 'center';
|
||||
readonly width?: number | string;
|
||||
readonly minWidth?: number | string;
|
||||
readonly maxWidth?: number | string;
|
||||
readonly nowrap?: boolean;
|
||||
readonly indent?: number;
|
||||
readonly headerProps?: {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly cellProps?: import("../../../types.js").DataTableHeaderCellPropsFunction | {
|
||||
readonly [x: string]: any;
|
||||
} | undefined;
|
||||
readonly sortable?: boolean;
|
||||
readonly sort?: DataTableCompareFunction;
|
||||
readonly sortRaw?: DataTableCompareFunction;
|
||||
readonly filter?: import("../../../types.js").FilterFunction;
|
||||
readonly children?: readonly any[] | undefined;
|
||||
}[] | undefined;
|
||||
}[] | Defaults["headers"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableHeadersSymbol: InjectionKey<{
|
||||
headers: Ref<InternalDataTableHeader[][]>;
|
||||
columns: Ref<InternalDataTableHeader[]>;
|
||||
}>;
|
||||
type HeaderProps = {
|
||||
headers: DeepReadonly<DataTableHeader[]> | undefined;
|
||||
items: any[];
|
||||
};
|
||||
export declare function createHeaders(props: HeaderProps, options?: {
|
||||
groupBy?: Ref<readonly SortItem[]>;
|
||||
showSelect?: Ref<boolean>;
|
||||
showExpand?: Ref<boolean>;
|
||||
}): {
|
||||
headers: Ref<{
|
||||
title?: string;
|
||||
fixed?: boolean | 'start' | 'end';
|
||||
align?: 'start' | 'end' | 'center';
|
||||
width?: number | string;
|
||||
minWidth?: number | string;
|
||||
maxWidth?: number | string;
|
||||
nowrap?: boolean;
|
||||
indent?: number;
|
||||
headerProps?: Record<string, any>;
|
||||
cellProps?: import("../types.js").HeaderCellProps;
|
||||
sortable: boolean;
|
||||
sort?: DataTableCompareFunction;
|
||||
sortRaw?: DataTableCompareFunction;
|
||||
filter?: import("../../../types.js").FilterFunction;
|
||||
key: string | null;
|
||||
value: import("../../../util/index.js").SelectItemKey | null;
|
||||
fixedOffset?: number;
|
||||
fixedEndOffset?: number;
|
||||
lastFixed?: boolean;
|
||||
firstFixedEnd?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
children?: /*elided*/ any[] | undefined;
|
||||
}[][], {
|
||||
title?: string;
|
||||
fixed?: boolean | 'start' | 'end';
|
||||
align?: 'start' | 'end' | 'center';
|
||||
width?: number | string;
|
||||
minWidth?: number | string;
|
||||
maxWidth?: number | string;
|
||||
nowrap?: boolean;
|
||||
indent?: number;
|
||||
headerProps?: Record<string, any>;
|
||||
cellProps?: import("../types.js").HeaderCellProps;
|
||||
sortable: boolean;
|
||||
sort?: DataTableCompareFunction;
|
||||
sortRaw?: DataTableCompareFunction;
|
||||
filter?: import("../../../types.js").FilterFunction;
|
||||
key: string | null;
|
||||
value: import("../../../util/index.js").SelectItemKey | null;
|
||||
fixedOffset?: number;
|
||||
fixedEndOffset?: number;
|
||||
lastFixed?: boolean;
|
||||
firstFixedEnd?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
children?: any[] | undefined;
|
||||
}[][] | InternalDataTableHeader[][]>;
|
||||
columns: Ref<{
|
||||
title?: string;
|
||||
fixed?: boolean | 'start' | 'end';
|
||||
align?: 'start' | 'end' | 'center';
|
||||
width?: number | string;
|
||||
minWidth?: number | string;
|
||||
maxWidth?: number | string;
|
||||
nowrap?: boolean;
|
||||
indent?: number;
|
||||
headerProps?: Record<string, any>;
|
||||
cellProps?: import("../types.js").HeaderCellProps;
|
||||
sortable: boolean;
|
||||
sort?: DataTableCompareFunction;
|
||||
sortRaw?: DataTableCompareFunction;
|
||||
filter?: import("../../../types.js").FilterFunction;
|
||||
key: string | null;
|
||||
value: import("../../../util/index.js").SelectItemKey | null;
|
||||
fixedOffset?: number;
|
||||
fixedEndOffset?: number;
|
||||
lastFixed?: boolean;
|
||||
firstFixedEnd?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
children?: any[] | undefined;
|
||||
}[], {
|
||||
title?: string;
|
||||
fixed?: boolean | 'start' | 'end';
|
||||
align?: 'start' | 'end' | 'center';
|
||||
width?: number | string;
|
||||
minWidth?: number | string;
|
||||
maxWidth?: number | string;
|
||||
nowrap?: boolean;
|
||||
indent?: number;
|
||||
headerProps?: Record<string, any>;
|
||||
cellProps?: import("../types.js").HeaderCellProps;
|
||||
sortable: boolean;
|
||||
sort?: DataTableCompareFunction;
|
||||
sortRaw?: DataTableCompareFunction;
|
||||
filter?: import("../../../types.js").FilterFunction;
|
||||
key: string | null;
|
||||
value: import("../../../util/index.js").SelectItemKey | null;
|
||||
fixedOffset?: number;
|
||||
fixedEndOffset?: number;
|
||||
lastFixed?: boolean;
|
||||
firstFixedEnd?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
children?: any[] | undefined;
|
||||
}[] | InternalDataTableHeader[]>;
|
||||
sortFunctions: Ref<Record<string, DataTableCompareFunction>, Record<string, DataTableCompareFunction>>;
|
||||
sortRawFunctions: Ref<Record<string, DataTableCompareFunction>, Record<string, DataTableCompareFunction>>;
|
||||
filterFunctions: Ref<FilterKeyFunctions, FilterKeyFunctions>;
|
||||
};
|
||||
export declare function useHeaders(): {
|
||||
headers: Ref<InternalDataTableHeader[][]>;
|
||||
columns: Ref<InternalDataTableHeader[]>;
|
||||
};
|
||||
|
||||
+300
@@ -0,0 +1,300 @@
|
||||
// Utilities
|
||||
import { capitalize, inject, provide, ref, watchEffect } from 'vue';
|
||||
import { consoleError, propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeDataTableHeaderProps = propsFactory({
|
||||
headers: Array
|
||||
}, 'DataTable-header');
|
||||
export const VDataTableHeadersSymbol = Symbol.for('vuetify:data-table-headers');
|
||||
const defaultHeader = {
|
||||
title: '',
|
||||
sortable: false
|
||||
};
|
||||
const defaultActionHeader = {
|
||||
...defaultHeader,
|
||||
width: 48
|
||||
};
|
||||
function priorityQueue(arr = []) {
|
||||
const queue = arr.map(element => ({
|
||||
element,
|
||||
priority: 0
|
||||
}));
|
||||
return {
|
||||
enqueue: (element, priority) => {
|
||||
let added = false;
|
||||
for (let i = 0; i < queue.length; i++) {
|
||||
const item = queue[i];
|
||||
if (item.priority > priority) {
|
||||
queue.splice(i, 0, {
|
||||
element,
|
||||
priority
|
||||
});
|
||||
added = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!added) queue.push({
|
||||
element,
|
||||
priority
|
||||
});
|
||||
},
|
||||
size: () => queue.length,
|
||||
count: () => {
|
||||
let count = 0;
|
||||
if (!queue.length) return 0;
|
||||
const whole = Math.floor(queue[0].priority);
|
||||
for (let i = 0; i < queue.length; i++) {
|
||||
if (Math.floor(queue[i].priority) === whole) count += 1;
|
||||
}
|
||||
return count;
|
||||
},
|
||||
dequeue: () => {
|
||||
return queue.shift();
|
||||
}
|
||||
};
|
||||
}
|
||||
function extractLeaves(item, columns = []) {
|
||||
if (!item.children) {
|
||||
columns.push(item);
|
||||
} else {
|
||||
for (const child of item.children) {
|
||||
extractLeaves(child, columns);
|
||||
}
|
||||
}
|
||||
return columns;
|
||||
}
|
||||
function extractKeys(headers, keys = new Set()) {
|
||||
for (const item of headers) {
|
||||
if (item.key) keys.add(item.key);
|
||||
if (item.children) {
|
||||
extractKeys(item.children, keys);
|
||||
}
|
||||
}
|
||||
return keys;
|
||||
}
|
||||
function getDefaultItem(item) {
|
||||
if (!item.key) return undefined;
|
||||
if (item.key === 'data-table-group') return defaultHeader;
|
||||
if (['data-table-expand', 'data-table-select'].includes(item.key)) return defaultActionHeader;
|
||||
return undefined;
|
||||
}
|
||||
function getDepth(item, depth = 0) {
|
||||
if (!item.children) return depth;
|
||||
return Math.max(depth, ...item.children.map(child => getDepth(child, depth + 1)));
|
||||
}
|
||||
function parseFixedColumns(items) {
|
||||
let seenFixed = false;
|
||||
function setFixed(item, side, parentFixedSide = 'none') {
|
||||
if (!item) return;
|
||||
if (parentFixedSide !== 'none') {
|
||||
item.fixed = parentFixedSide;
|
||||
}
|
||||
|
||||
// normalize to simplify logic below
|
||||
if (item.fixed === true) {
|
||||
item.fixed = 'start';
|
||||
}
|
||||
if (item.fixed === side) {
|
||||
if (item.children) {
|
||||
if (side === 'start') {
|
||||
for (let i = item.children.length - 1; i >= 0; i--) {
|
||||
setFixed(item.children[i], side, side);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < item.children.length; i++) {
|
||||
setFixed(item.children[i], side, side);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!seenFixed && side === 'start') {
|
||||
item.lastFixed = true;
|
||||
} else if (!seenFixed && side === 'end') {
|
||||
item.firstFixedEnd = true;
|
||||
} else if (isNaN(Number(item.width))) {
|
||||
consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`);
|
||||
} else {
|
||||
item.minWidth = Math.max(Number(item.width) || 0, Number(item.minWidth) || 0);
|
||||
}
|
||||
seenFixed = true;
|
||||
}
|
||||
} else {
|
||||
if (item.children) {
|
||||
if (side === 'start') {
|
||||
for (let i = item.children.length - 1; i >= 0; i--) {
|
||||
setFixed(item.children[i], side);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < item.children.length; i++) {
|
||||
setFixed(item.children[i], side);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
seenFixed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = items.length - 1; i >= 0; i--) {
|
||||
setFixed(items[i], 'start');
|
||||
}
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
setFixed(items[i], 'end');
|
||||
}
|
||||
let fixedOffset = 0;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
fixedOffset = setFixedOffset(items[i], fixedOffset);
|
||||
}
|
||||
let fixedEndOffset = 0;
|
||||
for (let i = items.length - 1; i >= 0; i--) {
|
||||
fixedEndOffset = setFixedEndOffset(items[i], fixedEndOffset);
|
||||
}
|
||||
}
|
||||
function setFixedOffset(item, offset = 0) {
|
||||
if (!item) return offset;
|
||||
if (item.children) {
|
||||
item.fixedOffset = offset;
|
||||
for (const child of item.children) {
|
||||
offset = setFixedOffset(child, offset);
|
||||
}
|
||||
} else if (item.fixed && item.fixed !== 'end') {
|
||||
item.fixedOffset = offset;
|
||||
offset += parseFloat(item.width || '0') || 0;
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
function setFixedEndOffset(item, offset = 0) {
|
||||
if (!item) return offset;
|
||||
if (item.children) {
|
||||
item.fixedEndOffset = offset;
|
||||
for (const child of item.children) {
|
||||
offset = setFixedEndOffset(child, offset);
|
||||
}
|
||||
} else if (item.fixed === 'end') {
|
||||
item.fixedEndOffset = offset;
|
||||
offset += parseFloat(item.width || '0') || 0;
|
||||
}
|
||||
return offset;
|
||||
}
|
||||
function parse(items, maxDepth) {
|
||||
const headers = [];
|
||||
let currentDepth = 0;
|
||||
const queue = priorityQueue(items);
|
||||
while (queue.size() > 0) {
|
||||
let rowSize = queue.count();
|
||||
const row = [];
|
||||
let fraction = 1;
|
||||
while (rowSize > 0) {
|
||||
const {
|
||||
element: item,
|
||||
priority
|
||||
} = queue.dequeue();
|
||||
const diff = maxDepth - currentDepth - getDepth(item);
|
||||
row.push({
|
||||
...item,
|
||||
rowspan: diff ?? 1,
|
||||
colspan: item.children ? extractLeaves(item).length : 1
|
||||
});
|
||||
if (item.children) {
|
||||
for (const child of item.children) {
|
||||
// This internally sorts items that are on the same priority "row"
|
||||
const sort = priority % 1 + fraction / Math.pow(10, currentDepth + 2);
|
||||
queue.enqueue(child, currentDepth + diff + sort);
|
||||
}
|
||||
}
|
||||
fraction += 1;
|
||||
rowSize -= 1;
|
||||
}
|
||||
currentDepth += 1;
|
||||
headers.push(row);
|
||||
}
|
||||
const columns = items.map(item => extractLeaves(item)).flat();
|
||||
return {
|
||||
columns,
|
||||
headers
|
||||
};
|
||||
}
|
||||
function convertToInternalHeaders(items) {
|
||||
const internalHeaders = [];
|
||||
for (const item of items) {
|
||||
const defaultItem = {
|
||||
...getDefaultItem(item),
|
||||
...item
|
||||
};
|
||||
const key = defaultItem.key ?? (typeof defaultItem.value === 'string' ? defaultItem.value : null);
|
||||
const value = defaultItem.value ?? key ?? null;
|
||||
const internalItem = {
|
||||
...defaultItem,
|
||||
key,
|
||||
value,
|
||||
sortable: defaultItem.sortable ?? (defaultItem.key != null || !!defaultItem.sort),
|
||||
children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : undefined
|
||||
};
|
||||
internalHeaders.push(internalItem);
|
||||
}
|
||||
return internalHeaders;
|
||||
}
|
||||
export function createHeaders(props, options) {
|
||||
const headers = ref([]);
|
||||
const columns = ref([]);
|
||||
const sortFunctions = ref({});
|
||||
const sortRawFunctions = ref({});
|
||||
const filterFunctions = ref({});
|
||||
watchEffect(() => {
|
||||
const _headers = props.headers || Object.keys(props.items[0] ?? {}).map(key => ({
|
||||
key,
|
||||
title: capitalize(key)
|
||||
}));
|
||||
const items = _headers.slice();
|
||||
const keys = extractKeys(items);
|
||||
if (options?.groupBy?.value.length && !keys.has('data-table-group')) {
|
||||
items.unshift({
|
||||
key: 'data-table-group',
|
||||
title: 'Group'
|
||||
});
|
||||
}
|
||||
if (options?.showSelect?.value && !keys.has('data-table-select')) {
|
||||
items.unshift({
|
||||
key: 'data-table-select'
|
||||
});
|
||||
}
|
||||
if (options?.showExpand?.value && !keys.has('data-table-expand')) {
|
||||
items.push({
|
||||
key: 'data-table-expand'
|
||||
});
|
||||
}
|
||||
const internalHeaders = convertToInternalHeaders(items);
|
||||
parseFixedColumns(internalHeaders);
|
||||
const maxDepth = Math.max(...internalHeaders.map(item => getDepth(item))) + 1;
|
||||
const parsed = parse(internalHeaders, maxDepth);
|
||||
headers.value = parsed.headers;
|
||||
columns.value = parsed.columns;
|
||||
const flatHeaders = parsed.headers.flat(1);
|
||||
for (const header of flatHeaders) {
|
||||
if (!header.key) continue;
|
||||
if (header.sortable) {
|
||||
if (header.sort) {
|
||||
sortFunctions.value[header.key] = header.sort;
|
||||
}
|
||||
if (header.sortRaw) {
|
||||
sortRawFunctions.value[header.key] = header.sortRaw;
|
||||
}
|
||||
}
|
||||
if (header.filter) {
|
||||
filterFunctions.value[header.key] = header.filter;
|
||||
}
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
headers,
|
||||
columns,
|
||||
sortFunctions,
|
||||
sortRawFunctions,
|
||||
filterFunctions
|
||||
};
|
||||
provide(VDataTableHeadersSymbol, data);
|
||||
return data;
|
||||
}
|
||||
export function useHeaders() {
|
||||
const data = inject(VDataTableHeadersSymbol);
|
||||
if (!data) throw new Error('Missing headers!');
|
||||
return data;
|
||||
}
|
||||
//# sourceMappingURL=headers.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+65
@@ -0,0 +1,65 @@
|
||||
import type { PropType, Ref } from 'vue';
|
||||
import type { CellProps, DataTableItem, InternalDataTableHeader, RowProps } from '../types.js';
|
||||
import type { SelectItemKey } from '../../../util/index.js';
|
||||
export interface DataTableItemProps {
|
||||
items: any[];
|
||||
itemValue: SelectItemKey;
|
||||
itemSelectable: SelectItemKey;
|
||||
returnObject: boolean;
|
||||
}
|
||||
export declare const makeDataTableItemsProps: <Defaults extends {
|
||||
items?: unknown;
|
||||
itemValue?: unknown;
|
||||
itemSelectable?: unknown;
|
||||
rowProps?: unknown;
|
||||
cellProps?: unknown;
|
||||
returnObject?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<DataTableItemProps['items']>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<DataTableItemProps['items']>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? any[] : any[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? any[] : any[] | Defaults["items"];
|
||||
};
|
||||
itemValue: unknown extends Defaults["itemValue"] ? {
|
||||
type: PropType<SelectItemKey>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<SelectItemKey>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemValue"] ? SelectItemKey : Defaults["itemValue"] | SelectItemKey>;
|
||||
default: unknown extends Defaults["itemValue"] ? SelectItemKey : Defaults["itemValue"] | NonNullable<SelectItemKey>;
|
||||
};
|
||||
itemSelectable: unknown extends Defaults["itemSelectable"] ? {
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<SelectItemKey>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemSelectable"] ? SelectItemKey : Defaults["itemSelectable"] | SelectItemKey>;
|
||||
default: unknown extends Defaults["itemSelectable"] ? SelectItemKey : Defaults["itemSelectable"] | NonNullable<SelectItemKey>;
|
||||
};
|
||||
rowProps: unknown extends Defaults["rowProps"] ? PropType<RowProps<any>> : {
|
||||
type: PropType<unknown extends Defaults["rowProps"] ? RowProps<any> : Defaults["rowProps"] | RowProps<any>>;
|
||||
default: unknown extends Defaults["rowProps"] ? RowProps<any> : Defaults["rowProps"] | NonNullable<RowProps<any>>;
|
||||
};
|
||||
cellProps: unknown extends Defaults["cellProps"] ? PropType<CellProps<any>> : {
|
||||
type: PropType<unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | CellProps<any>>;
|
||||
default: unknown extends Defaults["cellProps"] ? CellProps<any> : Defaults["cellProps"] | NonNullable<CellProps<any>>;
|
||||
};
|
||||
returnObject: unknown extends Defaults["returnObject"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["returnObject"] ? boolean : boolean | Defaults["returnObject"]>;
|
||||
default: unknown extends Defaults["returnObject"] ? boolean : boolean | Defaults["returnObject"];
|
||||
};
|
||||
};
|
||||
export declare function transformItem(props: Omit<DataTableItemProps, 'items'>, item: any, index: number, columns: InternalDataTableHeader[]): DataTableItem;
|
||||
export declare function transformItems(props: Omit<DataTableItemProps, 'items'>, items: DataTableItemProps['items'], columns: InternalDataTableHeader[]): DataTableItem[];
|
||||
export declare function useDataTableItems(props: DataTableItemProps, columns: Ref<InternalDataTableHeader[]>): {
|
||||
items: import("vue").ComputedRef<DataTableItem<any>[]>;
|
||||
};
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
// Utilities
|
||||
import { computed } from 'vue';
|
||||
import { getPropertyFromItem, propsFactory } from "../../../util/index.js"; // Types
|
||||
// Composables
|
||||
export const makeDataTableItemsProps = propsFactory({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
itemValue: {
|
||||
type: [String, Array, Function],
|
||||
default: 'id'
|
||||
},
|
||||
itemSelectable: {
|
||||
type: [String, Array, Function],
|
||||
default: null
|
||||
},
|
||||
rowProps: [Object, Function],
|
||||
cellProps: [Object, Function],
|
||||
returnObject: Boolean
|
||||
}, 'DataTable-items');
|
||||
export function transformItem(props, item, index, columns) {
|
||||
const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue);
|
||||
const selectable = getPropertyFromItem(item, props.itemSelectable, true);
|
||||
const itemColumns = columns.reduce((obj, column) => {
|
||||
if (column.key != null) obj[column.key] = getPropertyFromItem(item, column.value);
|
||||
return obj;
|
||||
}, {});
|
||||
return {
|
||||
type: 'item',
|
||||
key: props.returnObject ? getPropertyFromItem(item, props.itemValue) : value,
|
||||
index,
|
||||
value,
|
||||
selectable,
|
||||
columns: itemColumns,
|
||||
raw: item
|
||||
};
|
||||
}
|
||||
export function transformItems(props, items, columns) {
|
||||
return items.map((item, index) => transformItem(props, item, index, columns));
|
||||
}
|
||||
export function useDataTableItems(props, columns) {
|
||||
const items = computed(() => transformItems(props, props.items, columns.value));
|
||||
return {
|
||||
items
|
||||
};
|
||||
}
|
||||
//# sourceMappingURL=items.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"items.js","names":["computed","getPropertyFromItem","propsFactory","makeDataTableItemsProps","items","type","Array","default","itemValue","String","Function","itemSelectable","rowProps","Object","cellProps","returnObject","Boolean","transformItem","props","item","index","columns","value","selectable","itemColumns","reduce","obj","column","key","raw","transformItems","map","useDataTableItems"],"sources":["../../../../src/components/VDataTable/composables/items.ts"],"sourcesContent":["// Utilities\nimport { computed } from 'vue'\nimport { getPropertyFromItem, propsFactory } from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { CellProps, DataTableItem, InternalDataTableHeader, RowProps } from '../types'\nimport type { SelectItemKey } from '@/util'\n\nexport interface DataTableItemProps {\n items: any[]\n itemValue: SelectItemKey\n itemSelectable: SelectItemKey\n returnObject: boolean\n}\n\n// Composables\nexport const makeDataTableItemsProps = propsFactory({\n items: {\n type: Array as PropType<DataTableItemProps['items']>,\n default: () => ([]),\n },\n itemValue: {\n type: [String, Array, Function] as PropType<SelectItemKey>,\n default: 'id',\n },\n itemSelectable: {\n type: [String, Array, Function] as PropType<SelectItemKey>,\n default: null,\n },\n rowProps: [Object, Function] as PropType<RowProps<any>>,\n cellProps: [Object, Function] as PropType<CellProps<any>>,\n returnObject: Boolean,\n}, 'DataTable-items')\n\nexport function transformItem (\n props: Omit<DataTableItemProps, 'items'>,\n item: any,\n index: number,\n columns: InternalDataTableHeader[]\n): DataTableItem {\n const value = props.returnObject ? item : getPropertyFromItem(item, props.itemValue)\n const selectable = getPropertyFromItem(item, props.itemSelectable, true)\n const itemColumns = columns.reduce((obj, column) => {\n if (column.key != null) obj[column.key] = getPropertyFromItem(item, column.value!)\n return obj\n }, {} as Record<string, unknown>)\n\n return {\n type: 'item',\n key: props.returnObject ? getPropertyFromItem(item, props.itemValue) : value,\n index,\n value,\n selectable,\n columns: itemColumns,\n raw: item,\n }\n}\n\nexport function transformItems (\n props: Omit<DataTableItemProps, 'items'>,\n items: DataTableItemProps['items'],\n columns: InternalDataTableHeader[]\n): DataTableItem[] {\n return items.map((item, index) => transformItem(props, item, index, columns))\n}\n\nexport function useDataTableItems (props: DataTableItemProps, columns: Ref<InternalDataTableHeader[]>) {\n const items = computed(() => transformItems(props, props.items, columns.value))\n\n return { items }\n}\n"],"mappings":"AAAA;AACA,SAASA,QAAQ,QAAQ,KAAK;AAAA,SACrBC,mBAAmB,EAAEC,YAAY,kCAE1C;AAYA;AACA,OAAO,MAAMC,uBAAuB,GAAGD,YAAY,CAAC;EAClDE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAA8C;IACpDC,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAA4B;IAC1DH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdN,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAA4B;IAC1DH,OAAO,EAAE;EACX,CAAC;EACDK,QAAQ,EAAE,CAACC,MAAM,EAAEH,QAAQ,CAA4B;EACvDI,SAAS,EAAE,CAACD,MAAM,EAAEH,QAAQ,CAA6B;EACzDK,YAAY,EAAEC;AAChB,CAAC,EAAE,iBAAiB,CAAC;AAErB,OAAO,SAASC,aAAaA,CAC3BC,KAAwC,EACxCC,IAAS,EACTC,KAAa,EACbC,OAAkC,EACnB;EACf,MAAMC,KAAK,GAAGJ,KAAK,CAACH,YAAY,GAAGI,IAAI,GAAGlB,mBAAmB,CAACkB,IAAI,EAAED,KAAK,CAACV,SAAS,CAAC;EACpF,MAAMe,UAAU,GAAGtB,mBAAmB,CAACkB,IAAI,EAAED,KAAK,CAACP,cAAc,EAAE,IAAI,CAAC;EACxE,MAAMa,WAAW,GAAGH,OAAO,CAACI,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;IAClD,IAAIA,MAAM,CAACC,GAAG,IAAI,IAAI,EAAEF,GAAG,CAACC,MAAM,CAACC,GAAG,CAAC,GAAG3B,mBAAmB,CAACkB,IAAI,EAAEQ,MAAM,CAACL,KAAM,CAAC;IAClF,OAAOI,GAAG;EACZ,CAAC,EAAE,CAAC,CAA4B,CAAC;EAEjC,OAAO;IACLrB,IAAI,EAAE,MAAM;IACZuB,GAAG,EAAEV,KAAK,CAACH,YAAY,GAAGd,mBAAmB,CAACkB,IAAI,EAAED,KAAK,CAACV,SAAS,CAAC,GAAGc,KAAK;IAC5EF,KAAK;IACLE,KAAK;IACLC,UAAU;IACVF,OAAO,EAAEG,WAAW;IACpBK,GAAG,EAAEV;EACP,CAAC;AACH;AAEA,OAAO,SAASW,cAAcA,CAC5BZ,KAAwC,EACxCd,KAAkC,EAClCiB,OAAkC,EACjB;EACjB,OAAOjB,KAAK,CAAC2B,GAAG,CAAC,CAACZ,IAAI,EAAEC,KAAK,KAAKH,aAAa,CAACC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;AAC/E;AAEA,OAAO,SAASW,iBAAiBA,CAAEd,KAAyB,EAAEG,OAAuC,EAAE;EACrG,MAAMjB,KAAK,GAAGJ,QAAQ,CAAC,MAAM8B,cAAc,CAACZ,KAAK,EAAEA,KAAK,CAACd,KAAK,EAAEiB,OAAO,CAACC,KAAK,CAAC,CAAC;EAE/E,OAAO;IAAElB;EAAM,CAAC;AAClB","ignoreList":[]}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import type { Ref } from 'vue';
|
||||
import type { SortItem } from './sort.js';
|
||||
export declare function useOptions({ page, itemsPerPage, sortBy, groupBy, search }: {
|
||||
page: Ref<number>;
|
||||
itemsPerPage: Ref<number>;
|
||||
sortBy: Ref<readonly SortItem[]>;
|
||||
groupBy: Ref<readonly SortItem[]>;
|
||||
search: Ref<string | undefined>;
|
||||
}): void;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
// Utilities
|
||||
import { watch } from 'vue';
|
||||
import { deepEqual, getCurrentInstance } from "../../../util/index.js"; // Types
|
||||
export function useOptions({
|
||||
page,
|
||||
itemsPerPage,
|
||||
sortBy,
|
||||
groupBy,
|
||||
search
|
||||
}) {
|
||||
const vm = getCurrentInstance('VDataTable');
|
||||
const options = () => ({
|
||||
page: page.value,
|
||||
itemsPerPage: itemsPerPage.value,
|
||||
sortBy: sortBy.value,
|
||||
groupBy: groupBy.value,
|
||||
search: search.value
|
||||
});
|
||||
let oldOptions = null;
|
||||
watch(options, value => {
|
||||
if (deepEqual(oldOptions, value)) return;
|
||||
|
||||
// Reset page when searching
|
||||
if (oldOptions && oldOptions.search !== value.search) {
|
||||
page.value = 1;
|
||||
}
|
||||
vm.emit('update:options', value);
|
||||
oldOptions = value;
|
||||
}, {
|
||||
deep: true,
|
||||
immediate: true
|
||||
});
|
||||
}
|
||||
//# sourceMappingURL=options.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"options.js","names":["watch","deepEqual","getCurrentInstance","useOptions","page","itemsPerPage","sortBy","groupBy","search","vm","options","value","oldOptions","emit","deep","immediate"],"sources":["../../../../src/components/VDataTable/composables/options.ts"],"sourcesContent":["// Utilities\nimport { watch } from 'vue'\nimport { deepEqual, getCurrentInstance } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\nimport type { SortItem } from './sort'\n\nexport function useOptions ({\n page,\n itemsPerPage,\n sortBy,\n groupBy,\n search,\n}: {\n page: Ref<number>\n itemsPerPage: Ref<number>\n sortBy: Ref<readonly SortItem[]>\n groupBy: Ref<readonly SortItem[]>\n search: Ref<string | undefined>\n}) {\n const vm = getCurrentInstance('VDataTable')\n\n const options = () => ({\n page: page.value,\n itemsPerPage: itemsPerPage.value,\n sortBy: sortBy.value,\n groupBy: groupBy.value,\n search: search.value,\n })\n\n let oldOptions: ReturnType<typeof options> | null = null\n watch(options, value => {\n if (deepEqual(oldOptions, value)) return\n\n // Reset page when searching\n if (oldOptions && oldOptions.search !== value.search) {\n page.value = 1\n }\n\n vm.emit('update:options', value)\n oldOptions = value\n }, { deep: true, immediate: true })\n}\n"],"mappings":"AAAA;AACA,SAASA,KAAK,QAAQ,KAAK;AAAA,SAClBC,SAAS,EAAEC,kBAAkB,kCAEtC;AAIA,OAAO,SAASC,UAAUA,CAAE;EAC1BC,IAAI;EACJC,YAAY;EACZC,MAAM;EACNC,OAAO;EACPC;AAOF,CAAC,EAAE;EACD,MAAMC,EAAE,GAAGP,kBAAkB,CAAC,YAAY,CAAC;EAE3C,MAAMQ,OAAO,GAAGA,CAAA,MAAO;IACrBN,IAAI,EAAEA,IAAI,CAACO,KAAK;IAChBN,YAAY,EAAEA,YAAY,CAACM,KAAK;IAChCL,MAAM,EAAEA,MAAM,CAACK,KAAK;IACpBJ,OAAO,EAAEA,OAAO,CAACI,KAAK;IACtBH,MAAM,EAAEA,MAAM,CAACG;EACjB,CAAC,CAAC;EAEF,IAAIC,UAA6C,GAAG,IAAI;EACxDZ,KAAK,CAACU,OAAO,EAAEC,KAAK,IAAI;IACtB,IAAIV,SAAS,CAACW,UAAU,EAAED,KAAK,CAAC,EAAE;;IAElC;IACA,IAAIC,UAAU,IAAIA,UAAU,CAACJ,MAAM,KAAKG,KAAK,CAACH,MAAM,EAAE;MACpDJ,IAAI,CAACO,KAAK,GAAG,CAAC;IAChB;IAEAF,EAAE,CAACI,IAAI,CAAC,gBAAgB,EAAEF,KAAK,CAAC;IAChCC,UAAU,GAAGD,KAAK;EACpB,CAAC,EAAE;IAAEG,IAAI,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAAC,CAAC;AACrC","ignoreList":[]}
|
||||
Generated
Vendored
+115
@@ -0,0 +1,115 @@
|
||||
import type { ComputedRef, MaybeRefOrGetter, PropType, Ref } from 'vue';
|
||||
import type { Group, GroupableItem, GroupSummary } from './group.js';
|
||||
import type { EventProp } from '../../../util/index.js';
|
||||
export declare const makeDataTablePaginateProps: <Defaults extends {
|
||||
page?: unknown;
|
||||
itemsPerPage?: unknown;
|
||||
pageBy?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
page: unknown extends Defaults["page"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["page"] ? string | number : string | number | Defaults["page"]>;
|
||||
default: unknown extends Defaults["page"] ? string | number : Defaults["page"] | NonNullable<string | number>;
|
||||
};
|
||||
itemsPerPage: unknown extends Defaults["itemsPerPage"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: number;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemsPerPage"] ? string | number : string | number | Defaults["itemsPerPage"]>;
|
||||
default: unknown extends Defaults["itemsPerPage"] ? string | number : Defaults["itemsPerPage"] | NonNullable<string | number>;
|
||||
};
|
||||
pageBy: unknown extends Defaults["pageBy"] ? {
|
||||
type: PropType<'item' | 'any' | 'auto'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'item' | 'any' | 'auto'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["pageBy"] ? "any" | "auto" | "item" : "any" | "auto" | "item" | Defaults["pageBy"]>;
|
||||
default: unknown extends Defaults["pageBy"] ? "any" | "auto" | "item" : Defaults["pageBy"] | NonNullable<"any" | "auto" | "item">;
|
||||
};
|
||||
};
|
||||
export type VDataTablePaginationInjectionData = {
|
||||
page: Ref<number>;
|
||||
itemsPerPage: Ref<number>;
|
||||
startIndex: Ref<number>;
|
||||
stopIndex: Ref<number>;
|
||||
pageCount: Ref<number>;
|
||||
itemsLength: Ref<number>;
|
||||
prevPage: () => void;
|
||||
nextPage: () => void;
|
||||
setPage: (value: number) => void;
|
||||
setItemsPerPage: (value: number) => void;
|
||||
};
|
||||
type PaginationProps = {
|
||||
page: number | string;
|
||||
'onUpdate:page': EventProp | undefined;
|
||||
itemsPerPage: number | string;
|
||||
'onUpdate:itemsPerPage': EventProp | undefined;
|
||||
itemsLength?: number | string;
|
||||
};
|
||||
export declare function createPagination(props: PaginationProps): {
|
||||
page: Ref<number, number> & {
|
||||
readonly externalValue: string | number;
|
||||
};
|
||||
itemsPerPage: Ref<number, number> & {
|
||||
readonly externalValue: string | number;
|
||||
};
|
||||
};
|
||||
export declare function providePagination(options: {
|
||||
page: Ref<number>;
|
||||
itemsPerPage: Ref<number>;
|
||||
itemsLength: Ref<number>;
|
||||
}): {
|
||||
page: Ref<number, number>;
|
||||
itemsPerPage: Ref<number, number>;
|
||||
startIndex: ComputedRef<number>;
|
||||
stopIndex: ComputedRef<number>;
|
||||
pageCount: ComputedRef<number>;
|
||||
itemsLength: Ref<number, number>;
|
||||
nextPage: () => void;
|
||||
prevPage: () => void;
|
||||
setPage: (value: number) => void;
|
||||
setItemsPerPage: (value: number) => void;
|
||||
};
|
||||
export declare function usePagination(): VDataTablePaginationInjectionData;
|
||||
export declare function usePaginatedItems<T>(options: {
|
||||
items: MaybeRefOrGetter<readonly T[]>;
|
||||
startIndex: Ref<number>;
|
||||
stopIndex: Ref<number>;
|
||||
itemsPerPage: Ref<number>;
|
||||
}): {
|
||||
paginatedItems: ComputedRef<readonly T[]>;
|
||||
};
|
||||
export declare function usePaginatedGroups<T extends GroupableItem>(options: {
|
||||
pageBy: ComputedRef<'item' | 'group' | 'any'>;
|
||||
sortedItems: Ref<readonly T[]>;
|
||||
paginate: <TItem>(items: MaybeRefOrGetter<readonly TItem[]>) => {
|
||||
paginatedItems: ComputedRef<readonly TItem[]>;
|
||||
pageCount: ComputedRef<number>;
|
||||
setItemsPerPage: (value: number) => void;
|
||||
prevPage: () => void;
|
||||
nextPage: () => void;
|
||||
setPage: (value: number) => void;
|
||||
};
|
||||
group: (items: MaybeRefOrGetter<readonly T[]>) => {
|
||||
flatItems: ComputedRef<readonly (T | Group<T> | GroupSummary<T>)[]>;
|
||||
groups: ComputedRef<readonly Group<T>[]>;
|
||||
};
|
||||
}): {
|
||||
pageCount: ComputedRef<number>;
|
||||
setItemsPerPage: (value: number) => void;
|
||||
prevPage: () => void;
|
||||
nextPage: () => void;
|
||||
setPage: (value: number) => void;
|
||||
paginatedItems: ComputedRef<readonly (T | Group<T> | GroupSummary<T>)[]>;
|
||||
};
|
||||
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
// Composables
|
||||
import { useProxiedModel } from "../../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, inject, provide, toValue, watch } from 'vue';
|
||||
import { clamp, getCurrentInstance, propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeDataTablePaginateProps = propsFactory({
|
||||
page: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
itemsPerPage: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
pageBy: {
|
||||
type: String,
|
||||
default: 'any'
|
||||
}
|
||||
}, 'DataTable-paginate');
|
||||
const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
|
||||
export function createPagination(props) {
|
||||
const page = useProxiedModel(props, 'page', undefined, value => Number(value ?? 1));
|
||||
const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => Number(value ?? 10));
|
||||
return {
|
||||
page,
|
||||
itemsPerPage
|
||||
};
|
||||
}
|
||||
export function providePagination(options) {
|
||||
const {
|
||||
page,
|
||||
itemsPerPage,
|
||||
itemsLength
|
||||
} = options;
|
||||
const startIndex = computed(() => {
|
||||
if (itemsPerPage.value === -1) return 0;
|
||||
return itemsPerPage.value * (page.value - 1);
|
||||
});
|
||||
const stopIndex = computed(() => {
|
||||
if (itemsPerPage.value === -1) return itemsLength.value;
|
||||
return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
|
||||
});
|
||||
const pageCount = computed(() => {
|
||||
if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
|
||||
return Math.ceil(itemsLength.value / itemsPerPage.value);
|
||||
});
|
||||
|
||||
// Don't run immediately, items may not have been loaded yet: #17966
|
||||
watch([page, pageCount], () => {
|
||||
if (page.value > pageCount.value) {
|
||||
page.value = pageCount.value;
|
||||
}
|
||||
});
|
||||
function setItemsPerPage(value) {
|
||||
itemsPerPage.value = value;
|
||||
page.value = 1;
|
||||
}
|
||||
function nextPage() {
|
||||
page.value = clamp(page.value + 1, 1, pageCount.value);
|
||||
}
|
||||
function prevPage() {
|
||||
page.value = clamp(page.value - 1, 1, pageCount.value);
|
||||
}
|
||||
function setPage(value) {
|
||||
page.value = clamp(value, 1, pageCount.value);
|
||||
}
|
||||
const data = {
|
||||
page,
|
||||
itemsPerPage,
|
||||
startIndex,
|
||||
stopIndex,
|
||||
pageCount,
|
||||
itemsLength,
|
||||
nextPage,
|
||||
prevPage,
|
||||
setPage,
|
||||
setItemsPerPage
|
||||
};
|
||||
provide(VDataTablePaginationSymbol, data);
|
||||
return data;
|
||||
}
|
||||
export function usePagination() {
|
||||
const data = inject(VDataTablePaginationSymbol);
|
||||
if (!data) throw new Error('Missing pagination!');
|
||||
return data;
|
||||
}
|
||||
export function usePaginatedItems(options) {
|
||||
const vm = getCurrentInstance('usePaginatedItems');
|
||||
const {
|
||||
items,
|
||||
startIndex,
|
||||
stopIndex,
|
||||
itemsPerPage
|
||||
} = options;
|
||||
const paginatedItems = computed(() => {
|
||||
if (itemsPerPage.value <= 0) return toValue(items);
|
||||
return toValue(items).slice(startIndex.value, stopIndex.value);
|
||||
});
|
||||
watch(paginatedItems, val => {
|
||||
vm.emit('update:currentItems', val);
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
return {
|
||||
paginatedItems
|
||||
};
|
||||
}
|
||||
export function usePaginatedGroups(options) {
|
||||
const {
|
||||
sortedItems,
|
||||
paginate,
|
||||
group
|
||||
} = options;
|
||||
const pageBy = toValue(options.pageBy); // TODO: make reactive
|
||||
|
||||
if (pageBy === 'item') {
|
||||
const {
|
||||
paginatedItems,
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage
|
||||
} = paginate(sortedItems);
|
||||
const {
|
||||
flatItems: paginatedItemsWithGroups
|
||||
} = group(paginatedItems);
|
||||
return {
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage,
|
||||
paginatedItems: paginatedItemsWithGroups
|
||||
};
|
||||
}
|
||||
if (pageBy === 'group') {
|
||||
const {
|
||||
flatItems,
|
||||
groups
|
||||
} = group(sortedItems);
|
||||
const {
|
||||
paginatedItems: paginatedGroups,
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage
|
||||
} = paginate(groups);
|
||||
const paginatedItemsWithGroups = computed(() => {
|
||||
if (!paginatedGroups.value.length) return [];
|
||||
const firstGroupId = paginatedGroups.value.at(0).id;
|
||||
const lastGroupId = paginatedGroups.value.at(-1).id;
|
||||
const start = flatItems.value.findIndex(item => item.type === 'group' && item.id === firstGroupId);
|
||||
const lastGroupIndex = flatItems.value.findIndex(item => item.type === 'group' && item.id === lastGroupId);
|
||||
const stop = flatItems.value.findIndex((item, i) => i > lastGroupIndex && item.type === 'group' && item.depth === 0);
|
||||
return flatItems.value.slice(start, stop === -1 ? undefined : stop);
|
||||
});
|
||||
return {
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage,
|
||||
paginatedItems: paginatedItemsWithGroups
|
||||
};
|
||||
}
|
||||
if (pageBy === 'any') {
|
||||
const {
|
||||
flatItems
|
||||
} = group(sortedItems);
|
||||
const {
|
||||
paginatedItems: paginatedItemsWithGroups,
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage
|
||||
} = paginate(flatItems);
|
||||
return {
|
||||
pageCount,
|
||||
setItemsPerPage,
|
||||
prevPage,
|
||||
nextPage,
|
||||
setPage,
|
||||
paginatedItems: paginatedItemsWithGroups
|
||||
};
|
||||
}
|
||||
throw new Error(`Unrecognized pagination target ${pageBy}`);
|
||||
}
|
||||
//# sourceMappingURL=paginate.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+95
@@ -0,0 +1,95 @@
|
||||
import type { InjectionKey, MaybeRefOrGetter, PropType, Ref } from 'vue';
|
||||
import type { DataTableItemProps } from './items.js';
|
||||
import type { EventProp, ValueComparator } from '../../../util/index.js';
|
||||
export interface SelectableItem {
|
||||
value: any;
|
||||
selectable: boolean;
|
||||
}
|
||||
export interface DataTableSelectStrategy {
|
||||
showSelectAll: boolean;
|
||||
allSelected: (data: {
|
||||
allItems: SelectableItem[];
|
||||
currentPage: SelectableItem[];
|
||||
}) => SelectableItem[];
|
||||
select: (data: {
|
||||
items: SelectableItem[];
|
||||
value: boolean;
|
||||
selected: Set<unknown>;
|
||||
}) => Set<unknown>;
|
||||
selectAll: (data: {
|
||||
value: boolean;
|
||||
allItems: SelectableItem[];
|
||||
currentPage: SelectableItem[];
|
||||
selected: Set<unknown>;
|
||||
}) => Set<unknown>;
|
||||
}
|
||||
type SelectionProps = Pick<DataTableItemProps, 'itemValue'> & {
|
||||
modelValue: readonly any[];
|
||||
selectStrategy: 'single' | 'page' | 'all';
|
||||
valueComparator?: ValueComparator;
|
||||
'onUpdate:modelValue': EventProp<[any[]]> | undefined;
|
||||
};
|
||||
export declare const makeDataTableSelectProps: <Defaults extends {
|
||||
showSelect?: unknown;
|
||||
selectStrategy?: unknown;
|
||||
modelValue?: unknown;
|
||||
valueComparator?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
showSelect: unknown extends Defaults["showSelect"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["showSelect"] ? boolean : boolean | Defaults["showSelect"]>;
|
||||
default: unknown extends Defaults["showSelect"] ? boolean : boolean | Defaults["showSelect"];
|
||||
};
|
||||
selectStrategy: unknown extends Defaults["selectStrategy"] ? {
|
||||
type: PropType<'single' | 'page' | 'all'>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<'single' | 'page' | 'all'>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["selectStrategy"] ? "all" | "page" | "single" : "all" | "page" | "single" | Defaults["selectStrategy"]>;
|
||||
default: unknown extends Defaults["selectStrategy"] ? "all" | "page" | "single" : Defaults["selectStrategy"] | NonNullable<"all" | "page" | "single">;
|
||||
};
|
||||
modelValue: unknown extends Defaults["modelValue"] ? {
|
||||
type: PropType<readonly any[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly any[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["modelValue"] ? readonly any[] : readonly any[] | Defaults["modelValue"]>;
|
||||
default: unknown extends Defaults["modelValue"] ? readonly any[] : readonly any[] | Defaults["modelValue"];
|
||||
};
|
||||
valueComparator: unknown extends Defaults["valueComparator"] ? PropType<ValueComparator> : {
|
||||
type: PropType<unknown extends Defaults["valueComparator"] ? ValueComparator : ValueComparator | Defaults["valueComparator"]>;
|
||||
default: unknown extends Defaults["valueComparator"] ? ValueComparator : ValueComparator | Defaults["valueComparator"];
|
||||
};
|
||||
};
|
||||
export declare const VDataTableSelectionSymbol: InjectionKey<ReturnType<typeof provideSelection>>;
|
||||
export declare function provideSelection(props: SelectionProps, { allItems, currentPage }: {
|
||||
allItems: Ref<SelectableItem[]>;
|
||||
currentPage: MaybeRefOrGetter<readonly SelectableItem[]>;
|
||||
}): {
|
||||
toggleSelect: (item: SelectableItem, index?: number, event?: MouseEvent) => void;
|
||||
select: (items: SelectableItem[], value: boolean) => void;
|
||||
selectAll: (value: boolean) => void;
|
||||
isSelected: (items: SelectableItem | SelectableItem[]) => boolean;
|
||||
isSomeSelected: (items: SelectableItem | SelectableItem[]) => boolean;
|
||||
someSelected: import("vue").ComputedRef<boolean>;
|
||||
allSelected: import("vue").ComputedRef<boolean>;
|
||||
showSelectAll: Readonly<Ref<boolean, boolean>>;
|
||||
lastSelectedIndex: import("vue").ShallowRef<number | null, number | null>;
|
||||
selectStrategy: import("vue").ComputedRef<DataTableSelectStrategy>;
|
||||
};
|
||||
export declare function useSelection(): {
|
||||
toggleSelect: (item: SelectableItem, index?: number, event?: MouseEvent) => void;
|
||||
select: (items: SelectableItem[], value: boolean) => void;
|
||||
selectAll: (value: boolean) => void;
|
||||
isSelected: (items: SelectableItem | SelectableItem[]) => boolean;
|
||||
isSomeSelected: (items: SelectableItem | SelectableItem[]) => boolean;
|
||||
someSelected: import("vue").ComputedRef<boolean>;
|
||||
allSelected: import("vue").ComputedRef<boolean>;
|
||||
showSelectAll: Readonly<Ref<boolean, boolean>>;
|
||||
lastSelectedIndex: import("vue").ShallowRef<number | null, number | null>;
|
||||
selectStrategy: import("vue").ComputedRef<DataTableSelectStrategy>;
|
||||
};
|
||||
|
||||
+175
@@ -0,0 +1,175 @@
|
||||
// Composables
|
||||
import { useProxiedModel } from "../../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, inject, provide, shallowRef, toRef, toValue } from 'vue';
|
||||
import { deepEqual, isPrimitive, propsFactory, wrapInArray } from "../../../util/index.js"; // Types
|
||||
const singleSelectStrategy = {
|
||||
showSelectAll: false,
|
||||
allSelected: () => [],
|
||||
select: ({
|
||||
items,
|
||||
value
|
||||
}) => {
|
||||
return new Set(value ? [items[0]?.value] : []);
|
||||
},
|
||||
selectAll: ({
|
||||
selected
|
||||
}) => selected
|
||||
};
|
||||
const pageSelectStrategy = {
|
||||
showSelectAll: true,
|
||||
allSelected: ({
|
||||
currentPage
|
||||
}) => currentPage,
|
||||
select: ({
|
||||
items,
|
||||
value,
|
||||
selected
|
||||
}) => {
|
||||
for (const item of items) {
|
||||
if (value) selected.add(item.value);else selected.delete(item.value);
|
||||
}
|
||||
return selected;
|
||||
},
|
||||
selectAll: ({
|
||||
value,
|
||||
currentPage,
|
||||
selected
|
||||
}) => pageSelectStrategy.select({
|
||||
items: currentPage,
|
||||
value,
|
||||
selected
|
||||
})
|
||||
};
|
||||
const allSelectStrategy = {
|
||||
showSelectAll: true,
|
||||
allSelected: ({
|
||||
allItems
|
||||
}) => allItems,
|
||||
select: ({
|
||||
items,
|
||||
value,
|
||||
selected
|
||||
}) => {
|
||||
for (const item of items) {
|
||||
if (value) selected.add(item.value);else selected.delete(item.value);
|
||||
}
|
||||
return selected;
|
||||
},
|
||||
selectAll: ({
|
||||
value,
|
||||
allItems
|
||||
}) => {
|
||||
return new Set(value ? allItems.map(item => item.value) : []);
|
||||
}
|
||||
};
|
||||
export const makeDataTableSelectProps = propsFactory({
|
||||
showSelect: Boolean,
|
||||
selectStrategy: {
|
||||
type: [String, Object],
|
||||
default: 'page'
|
||||
},
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
valueComparator: Function
|
||||
}, 'DataTable-select');
|
||||
export const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
|
||||
export function provideSelection(props, {
|
||||
allItems,
|
||||
currentPage
|
||||
}) {
|
||||
const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
|
||||
const customComparator = props.valueComparator;
|
||||
if (customComparator) {
|
||||
return new Set(wrapInArray(v).map(v => {
|
||||
return allItems.value.find(item => customComparator(v, item.value))?.value ?? v;
|
||||
}));
|
||||
}
|
||||
return new Set(wrapInArray(v).map(v => {
|
||||
return isPrimitive(v) ? allItems.value.find(item => v === item.value)?.value ?? v : allItems.value.find(item => deepEqual(v, item.value))?.value ?? v;
|
||||
}));
|
||||
}, v => {
|
||||
return [...v.values()];
|
||||
});
|
||||
const allSelectable = computed(() => allItems.value.filter(item => item.selectable));
|
||||
const currentPageSelectable = computed(() => toValue(currentPage).filter(item => item.selectable));
|
||||
const selectStrategy = computed(() => {
|
||||
if (typeof props.selectStrategy === 'object') return props.selectStrategy;
|
||||
switch (props.selectStrategy) {
|
||||
case 'single':
|
||||
return singleSelectStrategy;
|
||||
case 'all':
|
||||
return allSelectStrategy;
|
||||
case 'page':
|
||||
default:
|
||||
return pageSelectStrategy;
|
||||
}
|
||||
});
|
||||
const lastSelectedIndex = shallowRef(null);
|
||||
function isSelected(items) {
|
||||
return wrapInArray(items).every(item => selected.value.has(item.value));
|
||||
}
|
||||
function isSomeSelected(items) {
|
||||
return wrapInArray(items).some(item => selected.value.has(item.value));
|
||||
}
|
||||
function select(items, value) {
|
||||
const newSelected = selectStrategy.value.select({
|
||||
items,
|
||||
value,
|
||||
selected: new Set(selected.value)
|
||||
});
|
||||
selected.value = newSelected;
|
||||
}
|
||||
function toggleSelect(item, index, event) {
|
||||
const items = [];
|
||||
const pageItems = toValue(currentPage);
|
||||
index = index ?? pageItems.findIndex(i => i.value === item.value);
|
||||
if (props.selectStrategy !== 'single' && event?.shiftKey && lastSelectedIndex.value !== null) {
|
||||
const [start, end] = [lastSelectedIndex.value, index].sort((a, b) => a - b);
|
||||
items.push(...pageItems.slice(start, end + 1).filter(item => item.selectable));
|
||||
} else {
|
||||
items.push(item);
|
||||
lastSelectedIndex.value = index;
|
||||
}
|
||||
select(items, !isSelected([item]));
|
||||
}
|
||||
function selectAll(value) {
|
||||
const newSelected = selectStrategy.value.selectAll({
|
||||
value,
|
||||
allItems: allSelectable.value,
|
||||
currentPage: currentPageSelectable.value,
|
||||
selected: new Set(selected.value)
|
||||
});
|
||||
selected.value = newSelected;
|
||||
}
|
||||
const someSelected = computed(() => selected.value.size > 0);
|
||||
const allSelected = computed(() => {
|
||||
const items = selectStrategy.value.allSelected({
|
||||
allItems: allSelectable.value,
|
||||
currentPage: currentPageSelectable.value
|
||||
});
|
||||
return !!items.length && isSelected(items);
|
||||
});
|
||||
const showSelectAll = toRef(() => selectStrategy.value.showSelectAll);
|
||||
const data = {
|
||||
toggleSelect,
|
||||
select,
|
||||
selectAll,
|
||||
isSelected,
|
||||
isSomeSelected,
|
||||
someSelected,
|
||||
allSelected,
|
||||
showSelectAll,
|
||||
lastSelectedIndex,
|
||||
selectStrategy
|
||||
};
|
||||
provide(VDataTableSelectionSymbol, data);
|
||||
return data;
|
||||
}
|
||||
export function useSelection() {
|
||||
const data = inject(VDataTableSelectionSymbol);
|
||||
if (!data) throw new Error('Missing selection!');
|
||||
return data;
|
||||
}
|
||||
//# sourceMappingURL=select.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+107
@@ -0,0 +1,107 @@
|
||||
import type { PropType, Ref } from 'vue';
|
||||
import type { DataTableCompareFunction, InternalDataTableHeader } from '../types.js';
|
||||
import type { InternalItem } from '../../../composables/filter.js';
|
||||
export declare const makeDataTableSortProps: <Defaults extends {
|
||||
initialSortOrder?: unknown;
|
||||
sortBy?: unknown;
|
||||
customKeySort?: unknown;
|
||||
multiSort?: unknown;
|
||||
mustSort?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
initialSortOrder: unknown extends Defaults["initialSortOrder"] ? {
|
||||
type: PropType<'asc' | 'desc'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<'asc' | 'desc'>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["initialSortOrder"] ? "asc" | "desc" : "asc" | "desc" | Defaults["initialSortOrder"]>;
|
||||
default: unknown extends Defaults["initialSortOrder"] ? "asc" | "desc" : Defaults["initialSortOrder"] | NonNullable<"asc" | "desc">;
|
||||
};
|
||||
sortBy: unknown extends Defaults["sortBy"] ? {
|
||||
type: PropType<readonly SortItem[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly SortItem[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["sortBy"] ? readonly SortItem[] : readonly SortItem[] | Defaults["sortBy"]>;
|
||||
default: unknown extends Defaults["sortBy"] ? readonly SortItem[] : readonly SortItem[] | Defaults["sortBy"];
|
||||
};
|
||||
customKeySort: unknown extends Defaults["customKeySort"] ? PropType<Record<string, DataTableCompareFunction>> : {
|
||||
type: PropType<unknown extends Defaults["customKeySort"] ? Record<string, DataTableCompareFunction> : Record<string, DataTableCompareFunction> | Defaults["customKeySort"]>;
|
||||
default: unknown extends Defaults["customKeySort"] ? Record<string, DataTableCompareFunction> : Record<string, DataTableCompareFunction> | Defaults["customKeySort"];
|
||||
};
|
||||
multiSort: unknown extends Defaults["multiSort"] ? {
|
||||
type: PropType<boolean | MultiSortProps>;
|
||||
default: boolean;
|
||||
} : Omit<{
|
||||
type: PropType<boolean | MultiSortProps>;
|
||||
default: boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["multiSort"] ? boolean | MultiSortProps : boolean | MultiSortProps | Defaults["multiSort"]>;
|
||||
default: unknown extends Defaults["multiSort"] ? boolean | MultiSortProps : Defaults["multiSort"] | NonNullable<boolean | MultiSortProps>;
|
||||
};
|
||||
mustSort: unknown extends Defaults["mustSort"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["mustSort"] ? boolean : boolean | Defaults["mustSort"]>;
|
||||
default: unknown extends Defaults["mustSort"] ? boolean : boolean | Defaults["mustSort"];
|
||||
};
|
||||
};
|
||||
export type SortItem = {
|
||||
key: string;
|
||||
order?: boolean | 'asc' | 'desc';
|
||||
};
|
||||
export type MultiSortProps = {
|
||||
key?: 'ctrl';
|
||||
mode?: MultiSortMode;
|
||||
modifier?: 'alt' | 'shift';
|
||||
};
|
||||
export type MultiSortMode = 'append' | 'prepend';
|
||||
type SortProps = {
|
||||
initialSortOrder: 'asc' | 'desc';
|
||||
sortBy: readonly SortItem[];
|
||||
'onUpdate:sortBy': ((value: any) => void) | undefined;
|
||||
multiSort: boolean | MultiSortProps;
|
||||
mustSort: boolean;
|
||||
};
|
||||
export declare function createSort(props: SortProps): {
|
||||
initialSortOrder: Readonly<Ref<"asc" | "desc", "asc" | "desc">>;
|
||||
sortBy: Ref<readonly SortItem[], readonly SortItem[]> & {
|
||||
readonly externalValue: readonly SortItem[];
|
||||
};
|
||||
multiSort: Readonly<Ref<boolean | MultiSortProps, boolean | MultiSortProps>>;
|
||||
mustSort: Readonly<Ref<boolean, boolean>>;
|
||||
};
|
||||
export declare function provideSort(options: {
|
||||
initialSortOrder: Ref<'asc' | 'desc'>;
|
||||
sortBy: Ref<readonly SortItem[]>;
|
||||
multiSort: Ref<boolean | MultiSortProps>;
|
||||
mustSort: Ref<boolean>;
|
||||
page?: Ref<number>;
|
||||
}): {
|
||||
sortBy: Ref<readonly SortItem[], readonly SortItem[]>;
|
||||
toggleSort: (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent, mandatory?: boolean) => void;
|
||||
isSorted: (column: InternalDataTableHeader) => boolean;
|
||||
};
|
||||
export declare function useSort(): {
|
||||
sortBy: Ref<readonly SortItem[]>;
|
||||
toggleSort: (column: InternalDataTableHeader, event?: KeyboardEvent | PointerEvent, mandatory?: boolean) => void;
|
||||
isSorted: (column: InternalDataTableHeader) => boolean;
|
||||
};
|
||||
export declare function useSortedItems<T extends InternalItem>(props: {
|
||||
customKeySort: Record<string, DataTableCompareFunction> | undefined;
|
||||
}, items: Ref<T[]>, sortBy: Ref<readonly SortItem[]>, options?: {
|
||||
transform?: (item: T) => {};
|
||||
sortFunctions?: Ref<Record<string, DataTableCompareFunction> | undefined>;
|
||||
sortRawFunctions?: Ref<Record<string, DataTableCompareFunction> | undefined>;
|
||||
}): {
|
||||
sortedItems: import("vue").ComputedRef<T[]>;
|
||||
};
|
||||
export declare function sortItems<T extends InternalItem>(items: T[], sortByItems: readonly SortItem[], locale: string, options?: {
|
||||
transform?: (item: T) => Record<string, any>;
|
||||
sortFunctions?: Record<string, DataTableCompareFunction>;
|
||||
sortRawFunctions?: Record<string, DataTableCompareFunction>;
|
||||
}): T[];
|
||||
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
// Composables
|
||||
import { useLocale } from "../../../composables/locale.js";
|
||||
import { useProxiedModel } from "../../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, inject, provide, toRef } from 'vue';
|
||||
import { getObjectValueByPath, isEmpty, isObject, propsFactory } from "../../../util/index.js"; // Types
|
||||
export const makeDataTableSortProps = propsFactory({
|
||||
initialSortOrder: {
|
||||
type: String,
|
||||
default: 'asc',
|
||||
validator: v => !v || ['asc', 'desc'].includes(v)
|
||||
},
|
||||
sortBy: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
customKeySort: Object,
|
||||
multiSort: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
mustSort: Boolean
|
||||
}, 'DataTable-sort');
|
||||
const VDataTableSortSymbol = Symbol.for('vuetify:data-table-sort');
|
||||
export function createSort(props) {
|
||||
const initialSortOrder = toRef(() => props.initialSortOrder);
|
||||
const sortBy = useProxiedModel(props, 'sortBy');
|
||||
const mustSort = toRef(() => props.mustSort);
|
||||
const multiSort = toRef(() => props.multiSort);
|
||||
return {
|
||||
initialSortOrder,
|
||||
sortBy,
|
||||
multiSort,
|
||||
mustSort
|
||||
};
|
||||
}
|
||||
function resolveMultiSort(multiSort, event) {
|
||||
if (!isObject(multiSort)) {
|
||||
return {
|
||||
active: !!multiSort
|
||||
};
|
||||
}
|
||||
const {
|
||||
key,
|
||||
mode,
|
||||
modifier
|
||||
} = multiSort;
|
||||
const reverseMode = modifier === 'alt' && event?.altKey || modifier === 'shift' && event?.shiftKey;
|
||||
return {
|
||||
active: !key || event?.ctrlKey || event?.metaKey || false,
|
||||
mode: reverseMode ? mode === 'append' ? 'prepend' : 'append' : mode
|
||||
};
|
||||
}
|
||||
export function provideSort(options) {
|
||||
const {
|
||||
initialSortOrder,
|
||||
sortBy,
|
||||
mustSort,
|
||||
multiSort,
|
||||
page
|
||||
} = options;
|
||||
const toggleSort = (column, event, mandatory = false) => {
|
||||
if (column.key == null) return;
|
||||
let newSortBy = sortBy.value.map(x => ({
|
||||
...x
|
||||
})) ?? [];
|
||||
const item = newSortBy.find(x => x.key === column.key);
|
||||
const initialOrder = initialSortOrder.value;
|
||||
const secondaryOrder = initialSortOrder.value === 'desc' ? 'asc' : 'desc';
|
||||
if (!item) {
|
||||
const {
|
||||
active,
|
||||
mode
|
||||
} = resolveMultiSort(multiSort.value, event);
|
||||
if (active) {
|
||||
if (mode === 'prepend') {
|
||||
newSortBy.unshift({
|
||||
key: column.key,
|
||||
order: initialOrder
|
||||
});
|
||||
} else {
|
||||
newSortBy.push({
|
||||
key: column.key,
|
||||
order: initialOrder
|
||||
});
|
||||
}
|
||||
} else {
|
||||
newSortBy = [{
|
||||
key: column.key,
|
||||
order: initialOrder
|
||||
}];
|
||||
}
|
||||
} else if (item.order === secondaryOrder) {
|
||||
if (mandatory || mustSort.value && newSortBy.length === 1) {
|
||||
item.order = initialSortOrder.value;
|
||||
} else {
|
||||
newSortBy = newSortBy.filter(x => x.key !== column.key);
|
||||
}
|
||||
} else {
|
||||
item.order = secondaryOrder;
|
||||
}
|
||||
sortBy.value = newSortBy;
|
||||
if (page) page.value = 1;
|
||||
};
|
||||
function isSorted(column) {
|
||||
return !!sortBy.value.find(item => item.key === column.key);
|
||||
}
|
||||
const data = {
|
||||
sortBy,
|
||||
toggleSort,
|
||||
isSorted
|
||||
};
|
||||
provide(VDataTableSortSymbol, data);
|
||||
return data;
|
||||
}
|
||||
export function useSort() {
|
||||
const data = inject(VDataTableSortSymbol);
|
||||
if (!data) throw new Error('Missing sort!');
|
||||
return data;
|
||||
}
|
||||
|
||||
// TODO: abstract into project composable
|
||||
export function useSortedItems(props, items, sortBy, options) {
|
||||
const locale = useLocale();
|
||||
const sortedItems = computed(() => {
|
||||
if (!sortBy.value.length) return items.value;
|
||||
return sortItems(items.value, sortBy.value, locale.current.value, {
|
||||
transform: options?.transform,
|
||||
sortFunctions: {
|
||||
...props.customKeySort,
|
||||
...options?.sortFunctions?.value
|
||||
},
|
||||
sortRawFunctions: options?.sortRawFunctions?.value
|
||||
});
|
||||
});
|
||||
return {
|
||||
sortedItems
|
||||
};
|
||||
}
|
||||
export function sortItems(items, sortByItems, locale, options) {
|
||||
const stringCollator = new Intl.Collator(locale, {
|
||||
sensitivity: 'accent',
|
||||
usage: 'sort'
|
||||
});
|
||||
const transformedItems = items.map(item => [item, options?.transform ? options.transform(item) : item]);
|
||||
return transformedItems.sort((a, b) => {
|
||||
for (let i = 0; i < sortByItems.length; i++) {
|
||||
let hasCustomResult = false;
|
||||
const sortKey = sortByItems[i].key;
|
||||
const sortOrder = sortByItems[i].order ?? 'asc';
|
||||
if (sortOrder === false) continue;
|
||||
let sortA = getObjectValueByPath(a[1], sortKey);
|
||||
let sortB = getObjectValueByPath(b[1], sortKey);
|
||||
let sortARaw = a[0].raw;
|
||||
let sortBRaw = b[0].raw;
|
||||
if (sortOrder === 'desc') {
|
||||
[sortA, sortB] = [sortB, sortA];
|
||||
[sortARaw, sortBRaw] = [sortBRaw, sortARaw];
|
||||
}
|
||||
if (options?.sortRawFunctions?.[sortKey]) {
|
||||
const customResult = options.sortRawFunctions[sortKey](sortARaw, sortBRaw);
|
||||
if (customResult == null) continue;
|
||||
hasCustomResult = true;
|
||||
if (customResult) return customResult;
|
||||
}
|
||||
if (options?.sortFunctions?.[sortKey]) {
|
||||
const customResult = options.sortFunctions[sortKey](sortA, sortB);
|
||||
if (customResult == null) continue;
|
||||
hasCustomResult = true;
|
||||
if (customResult) return customResult;
|
||||
}
|
||||
if (hasCustomResult) continue;
|
||||
|
||||
// Dates should be compared numerically
|
||||
if (sortA instanceof Date && sortB instanceof Date) {
|
||||
sortA = sortA.getTime();
|
||||
sortB = sortB.getTime();
|
||||
}
|
||||
[sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s);
|
||||
if (sortA !== sortB) {
|
||||
if (isEmpty(sortA) && isEmpty(sortB)) return 0;
|
||||
if (isEmpty(sortA)) return -1;
|
||||
if (isEmpty(sortB)) return 1;
|
||||
if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
|
||||
return stringCollator.compare(sortA, sortB);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}).map(([item]) => item);
|
||||
}
|
||||
//# sourceMappingURL=sort.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
export { VDataTable } from './VDataTable.js';
|
||||
export { VDataTableHeaders } from './VDataTableHeaders.js';
|
||||
export { VDataTableFooter } from './VDataTableFooter.js';
|
||||
export { VDataTableRows } from './VDataTableRows.js';
|
||||
export { VDataTableRow } from './VDataTableRow.js';
|
||||
export { VDataTableVirtual } from './VDataTableVirtual.js';
|
||||
export { VDataTableServer } from './VDataTableServer.js';
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
export { VDataTable } from "./VDataTable.js";
|
||||
export { VDataTableHeaders } from "./VDataTableHeaders.js";
|
||||
export { VDataTableFooter } from "./VDataTableFooter.js";
|
||||
export { VDataTableRows } from "./VDataTableRows.js";
|
||||
export { VDataTableRow } from "./VDataTableRow.js";
|
||||
export { VDataTableVirtual } from "./VDataTableVirtual.js";
|
||||
export { VDataTableServer } from "./VDataTableServer.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VDataTable","VDataTableHeaders","VDataTableFooter","VDataTableRows","VDataTableRow","VDataTableVirtual","VDataTableServer"],"sources":["../../../src/components/VDataTable/index.ts"],"sourcesContent":["export { VDataTable } from './VDataTable'\nexport { VDataTableHeaders } from './VDataTableHeaders'\nexport { VDataTableFooter } from './VDataTableFooter'\nexport { VDataTableRows } from './VDataTableRows'\nexport { VDataTableRow } from './VDataTableRow'\nexport { VDataTableVirtual } from './VDataTableVirtual'\nexport { VDataTableServer } from './VDataTableServer'\n"],"mappings":"SAASA,UAAU;AAAA,SACVC,iBAAiB;AAAA,SACjBC,gBAAgB;AAAA,SAChBC,cAAc;AAAA,SACdC,aAAa;AAAA,SACbC,iBAAiB;AAAA,SACjBC,gBAAgB","ignoreList":[]}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
import type { provideExpanded } from './composables/expand.js';
|
||||
import type { Group, GroupableItem, GroupSummary, provideGroupBy } from './composables/group.js';
|
||||
import type { provideSelection, SelectableItem } from './composables/select.js';
|
||||
import type { FilterFunction, InternalItem } from '../../composables/filter.js';
|
||||
import type { SelectItemKey } from '../../util/index.js';
|
||||
export type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null;
|
||||
export type DataTableHeader<T = Record<string, any>> = {
|
||||
key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {});
|
||||
value?: SelectItemKey<T>;
|
||||
title?: string;
|
||||
fixed?: boolean | 'start' | 'end';
|
||||
align?: 'start' | 'end' | 'center';
|
||||
width?: number | string;
|
||||
minWidth?: number | string;
|
||||
maxWidth?: number | string;
|
||||
nowrap?: boolean;
|
||||
indent?: number;
|
||||
headerProps?: Record<string, any>;
|
||||
cellProps?: HeaderCellProps;
|
||||
sortable?: boolean;
|
||||
sort?: DataTableCompareFunction;
|
||||
sortRaw?: DataTableCompareFunction;
|
||||
filter?: FilterFunction;
|
||||
children?: DataTableHeader<T>[];
|
||||
};
|
||||
export type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {
|
||||
key: string | null;
|
||||
value: SelectItemKey | null;
|
||||
sortable: boolean;
|
||||
fixedOffset?: number;
|
||||
fixedEndOffset?: number;
|
||||
lastFixed?: boolean;
|
||||
firstFixedEnd?: boolean;
|
||||
nowrap?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
children?: InternalDataTableHeader[];
|
||||
};
|
||||
export interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {
|
||||
key: any;
|
||||
index: number;
|
||||
virtualIndex?: number;
|
||||
columns: {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
export type GroupHeaderSlot = {
|
||||
index: number;
|
||||
item: Group;
|
||||
columns: InternalDataTableHeader[];
|
||||
isExpanded: ReturnType<typeof provideExpanded>['isExpanded'];
|
||||
toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand'];
|
||||
isSelected: ReturnType<typeof provideSelection>['isSelected'];
|
||||
toggleSelect: ReturnType<typeof provideSelection>['toggleSelect'];
|
||||
toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup'];
|
||||
isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen'];
|
||||
};
|
||||
export type GroupSummarySlot = {
|
||||
index: number;
|
||||
item: GroupSummary;
|
||||
columns: InternalDataTableHeader[];
|
||||
toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup'];
|
||||
};
|
||||
type ItemSlotBase<T> = {
|
||||
index: number;
|
||||
item: T;
|
||||
internalItem: DataTableItem<T>;
|
||||
isExpanded: ReturnType<typeof provideExpanded>['isExpanded'];
|
||||
toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand'];
|
||||
isSelected: ReturnType<typeof provideSelection>['isSelected'];
|
||||
toggleSelect: ReturnType<typeof provideSelection>['toggleSelect'];
|
||||
};
|
||||
export type ItemSlot<T> = ItemSlotBase<T> & {
|
||||
columns: InternalDataTableHeader[];
|
||||
};
|
||||
export type ItemKeySlot<T> = ItemSlotBase<T> & {
|
||||
value: any;
|
||||
column: InternalDataTableHeader;
|
||||
};
|
||||
export type RowProps<T> = Record<string, any> | RowPropsFunction<T>;
|
||||
export type RowPropsFunction<T> = (data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>) => Record<string, any>;
|
||||
export type CellProps<T> = Record<string, any> | CellPropsFunction<T>;
|
||||
export type CellPropsFunction<T> = (data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>) => Record<string, any>;
|
||||
export type HeaderCellProps = Record<string, any> | HeaderCellPropsFunction;
|
||||
export type HeaderCellPropsFunction = (data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>) => Record<string, any>;
|
||||
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export {};
|
||||
//# sourceMappingURL=types.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/VDataTable/types.ts"],"sourcesContent":["// Types\nimport type { provideExpanded } from './composables/expand'\nimport type { Group, GroupableItem, GroupSummary, provideGroupBy } from './composables/group'\nimport type { provideSelection, SelectableItem } from './composables/select'\nimport type { FilterFunction, InternalItem } from '@/composables/filter'\nimport type { SelectItemKey } from '@/util'\n\nexport type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null\n\nexport type DataTableHeader<T = Record<string, any>> = {\n key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})\n value?: SelectItemKey<T>\n title?: string\n\n fixed?: boolean | 'start' | 'end'\n align?: 'start' | 'end' | 'center'\n\n width?: number | string\n minWidth?: number | string\n maxWidth?: number | string\n nowrap?: boolean\n indent?: number\n\n headerProps?: Record<string, any>\n cellProps?: HeaderCellProps\n\n sortable?: boolean\n sort?: DataTableCompareFunction\n sortRaw?: DataTableCompareFunction\n filter?: FilterFunction\n\n children?: DataTableHeader<T>[]\n}\n\nexport type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & {\n key: string | null\n value: SelectItemKey | null\n sortable: boolean\n fixedOffset?: number\n fixedEndOffset?: number\n lastFixed?: boolean\n firstFixedEnd?: boolean\n nowrap?: boolean\n colspan?: number\n rowspan?: number\n children?: InternalDataTableHeader[]\n}\n\nexport interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {\n key: any\n index: number\n virtualIndex?: number\n columns: {\n [key: string]: any\n }\n}\n\nexport type GroupHeaderSlot = {\n index: number\n item: Group\n columns: InternalDataTableHeader[]\n isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n isSelected: ReturnType<typeof provideSelection>['isSelected']\n toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n}\n\nexport type GroupSummarySlot = {\n index: number\n item: GroupSummary\n columns: InternalDataTableHeader[]\n toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n}\n\ntype ItemSlotBase<T> = {\n index: number\n item: T\n internalItem: DataTableItem<T>\n isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n isSelected: ReturnType<typeof provideSelection>['isSelected']\n toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n}\n\nexport type ItemSlot<T> = ItemSlotBase<T> & {\n columns: InternalDataTableHeader[]\n}\n\nexport type ItemKeySlot<T> = ItemSlotBase<T> & {\n value: any\n column: InternalDataTableHeader\n}\n\nexport type RowProps<T> = Record<string, any> | RowPropsFunction<T>\nexport type RowPropsFunction<T> = (\n data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>\n) => Record<string, any>\n\nexport type CellProps<T> = Record<string, any> | CellPropsFunction<T>\nexport type CellPropsFunction<T> = (\n data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>\n) => Record<string, any>\n\nexport type HeaderCellProps = Record<string, any> | HeaderCellPropsFunction\nexport type HeaderCellPropsFunction = (\n data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>\n) => Record<string, any>\n"],"mappings":"","ignoreList":[]}
|
||||
Reference in New Issue
Block a user