139 lines
5.1 KiB
JavaScript
139 lines
5.1 KiB
JavaScript
import { createVNode as _createVNode, Fragment as _Fragment, mergeProps as _mergeProps } from "vue";
|
|
// Components
|
|
import { VDataTableColumn } from "./VDataTableColumn.mjs";
|
|
import { VBtn } from "../VBtn/index.mjs";
|
|
import { VCheckboxBtn } from "../VCheckbox/index.mjs"; // Composables
|
|
import { useExpanded } from "./composables/expand.mjs";
|
|
import { useHeaders } from "./composables/headers.mjs";
|
|
import { useSelection } from "./composables/select.mjs";
|
|
import { useSort } from "./composables/sort.mjs";
|
|
import { makeDisplayProps, useDisplay } from "../../composables/display.mjs"; // Utilities
|
|
import { toDisplayString, withModifiers } from 'vue';
|
|
import { EventProp, genericComponent, getObjectValueByPath, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVDataTableRowProps = propsFactory({
|
|
index: Number,
|
|
item: Object,
|
|
cellProps: [Object, Function],
|
|
onClick: EventProp(),
|
|
onContextmenu: EventProp(),
|
|
onDblclick: EventProp(),
|
|
...makeDisplayProps()
|
|
}, 'VDataTableRow');
|
|
export const VDataTableRow = genericComponent()({
|
|
name: 'VDataTableRow',
|
|
props: makeVDataTableRowProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
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(() => _createVNode("tr", {
|
|
"class": ['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;
|
|
return _createVNode(VDataTableColumn, _mergeProps({
|
|
"align": column.align,
|
|
"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,
|
|
"lastFixed": column.lastFixed,
|
|
"maxWidth": !mobile.value ? column.maxWidth : undefined,
|
|
"noPadding": column.key === 'data-table-select' || column.key === 'data-table-expand',
|
|
"nowrap": column.nowrap,
|
|
"width": !mobile.value ? column.width : undefined
|
|
}, cellProps, columnCellProps), {
|
|
default: () => {
|
|
if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
|
|
if (column.key === 'data-table-select') {
|
|
return slots['item.data-table-select']?.(slotProps) ?? _createVNode(VCheckboxBtn, {
|
|
"disabled": !item.selectable,
|
|
"modelValue": isSelected([item]),
|
|
"onClick": withModifiers(() => toggleSelect(item), ['stop'])
|
|
}, null);
|
|
}
|
|
if (column.key === 'data-table-expand') {
|
|
return slots['item.data-table-expand']?.(slotProps) ?? _createVNode(VBtn, {
|
|
"icon": isExpanded(item) ? '$collapse' : '$expand',
|
|
"size": "small",
|
|
"variant": "text",
|
|
"onClick": withModifiers(() => toggleExpand(item), ['stop'])
|
|
}, null);
|
|
}
|
|
const displayValue = toDisplayString(slotProps.value);
|
|
return !mobile.value ? displayValue : _createVNode(_Fragment, null, [_createVNode("div", {
|
|
"class": "v-data-table__td-title"
|
|
}, [slots[headerSlotName]?.(columnSlotProps) ?? column.title]), _createVNode("div", {
|
|
"class": "v-data-table__td-value"
|
|
}, [slots[slotName]?.(slotProps) ?? displayValue])]);
|
|
}
|
|
});
|
|
})]));
|
|
}
|
|
});
|
|
//# sourceMappingURL=VDataTableRow.mjs.map
|