tav-ui
Version:
351 lines (348 loc) • 13.3 kB
JavaScript
import { defineComponent, ref, computed, unref, watch, nextTick, toRaw, toRefs, createVNode, withDirectives, vShow, mergeProps } from 'vue';
import { mitt } from '../../../utils/mitt2.mjs';
import { useHideTooltips } from '../../../hooks/web/useTooltip2.mjs';
import { useGlobalConfig } from '../../../hooks/global/useGlobalConfig2.mjs';
import { onUnmountedOrOnDeactivated } from '../../../hooks/core/onUnmountedOrOnDeactivated2.mjs';
import { onMountedOrActivated } from '../../../hooks/core/onMountedOrActivated2.mjs';
import ComponentCustomAction from './components/custom-action/index2.mjs';
import ComponentEmpty from './components/empty2.mjs';
import ComponentFilterForm from './components/filter-form2.mjs';
import { CamelCaseToCls, ComponentName, ComponentOperationsName, buildTableId, ACTION_COLUMNS } from './const2.mjs';
import { useCellHover } from './hooks/useCellHover2.mjs';
import { useColumnApi } from './hooks/useColumnApi2.mjs';
import { useColumns } from './hooks/useColums2.mjs';
import { useDataSource } from './hooks/useDataSource2.mjs';
import { useExtendInstance } from './hooks/useExtendInstance2.mjs';
import { useHeight, useFixHeight } from './hooks/useHeight2.mjs';
import { useListeners } from './hooks/useListeners2.mjs';
import { useLoading } from './hooks/useLoading2.mjs';
import { useProps } from './hooks/useProps2.mjs';
import { createTableContext } from './hooks/useTableContext2.mjs';
import { useWatchDom } from './hooks/useWatchDom2.mjs';
import { setupVxeTable } from './setup2.mjs';
import { tableProProps, tableProEmits } from './types2.mjs';
import { useCanvasCalcContent } from './hooks/useColumnAutoWidth2.mjs';
import { useCheckboxCache } from './hooks/useCheckboxCache2.mjs';
const _VXETable = setupVxeTable();
const {
Grid
} = _VXETable;
const VXETable = _VXETable;
const ComponentPrefixCls = CamelCaseToCls(ComponentName);
const ComponentOperationsPrefixCls = CamelCaseToCls(ComponentOperationsName);
var TablePro = defineComponent({
name: ComponentName,
props: tableProProps,
emits: tableProEmits,
setup(props, {
slots,
attrs,
expose,
emit
}) {
const tableId = buildTableId();
const tableColumns = ref(props.columns);
const tableRef = ref(null);
const filterRef = ref(null);
const wrapperRef = ref(null);
const operationRef = ref(null);
const customActionRef = ref(null);
const cacheActionWidths = ref({});
const maxWidthForAction = ref(0);
const currentPage = ref(1);
const tableEmitter = mitt();
const isTableProRendered = computed(() => {
return JSON.stringify(unref(tableRef)?.getTableData().visibleData) && JSON.stringify(unref(tableRef)?.getTableData().visibleData) !== "[]";
});
const _getProps = computed(() => {
return {
...props
};
});
const getProps = useProps(tableProProps, _getProps, tableRef, emit, tableEmitter);
watch(() => props.columns, async (curcolumns, precolumns) => {
if (JSON.stringify(curcolumns) !== JSON.stringify(precolumns)) {
tableColumns.value = curcolumns;
await nextTick();
maxWidthForAction.value = 0;
await handleNotPersistentColumnActionWidth();
}
}, {
deep: true
});
const {
checkboxCaches,
isCheckboxCacheEnabled,
checkboxCacheList,
createCheckboxCache,
createAllCheckboxCache,
deleteCheckboxCache,
deleteAllCheckboxCache
} = useCheckboxCache(tableRef, getProps, currentPage, tableEmitter);
const getColumns = computed(() => {
const columns = useColumns(tableColumns.value, unref(getProps).checkboxConfig, unref(getProps).radioConfig, tableRef, emit, isCheckboxCacheEnabled, createCheckboxCache, createAllCheckboxCache, deleteCheckboxCache, deleteAllCheckboxCache);
return {
columns
};
});
const columnApiOptions = useColumnApi(unref(getProps).id ?? tableId, unref(getProps).customActionConfig.column, useGlobalConfig(), tableEmitter);
watch(() => unref(isTableProRendered), (isRendered) => {
if (isRendered) {
columnApiOptions?.useCachedColumnCoverCurrentColumns(getColumns, customActionRef);
}
});
const getAttrs = computed(() => {
return {
...attrs
};
});
const getListeners = useListeners(emit);
const {
loading,
setLoading
} = useLoading(getProps);
const {
onCellMouseenter,
onCellMouseleave,
instances
} = useCellHover(getProps, emit);
useHideTooltips(instances);
const getBindValues = computed(() => ({
...unref(getProps),
...unref(getColumns),
...unref(getAttrs),
...unref(getListeners),
onCellMouseenter,
onCellMouseleave,
loading: unref(loading)
}));
useDataSource(getProps, tableRef);
useWatchDom(tableRef, operationRef, customActionRef, tableEmitter);
const {
calcContent,
clearCalcContentCanvas
} = useCanvasCalcContent();
const setCacheActionWidths = ({
key = "",
value = 0
}) => {
if (key) {
cacheActionWidths.value[key] = value;
}
};
async function handleNotPersistentColumnActionWidth() {
const tableData = unref(tableRef)?.getTableData().tableData;
const maxWidth = Math.max(...Object.values(unref(cacheActionWidths)));
if (tableData && isFinite(maxWidth) && maxWidth !== unref(maxWidthForAction)) {
const currentColumns = toRaw(tableColumns.value ?? []).map((d) => toRaw(d));
const isSomeColumnSetWidth = currentColumns.some((column) => !!column.width);
let actionPrevColumnHandled = false;
for (let i = currentColumns.length - 1; i >= 0; i--) {
const _column = currentColumns[i];
if (_column.field) {
if (ACTION_COLUMNS.includes(_column.field)) {
_column.width = Math.ceil(maxWidth);
_column.minWidth = Math.ceil(maxWidth);
} else if (_column.visible && !_column.fixed && !actionPrevColumnHandled && !isSomeColumnSetWidth) {
if (_column.width) {
_column.minWidth = _column.width;
}
_column.width = void 0;
_column.maxWidth = void 0;
actionPrevColumnHandled = true;
}
}
}
maxWidthForAction.value = maxWidth;
tableColumns.value = currentColumns;
await unref(tableRef)?.recalculate(true);
}
}
if (columnApiOptions && unref(getBindValues).customActionConfig.column) {
tableEmitter.on("table-pro:column-covered", async () => {
await handleNotPersistentColumnActionWidth();
});
tableEmitter.on("table-pro:column-covered-no-data", async () => {
await handleNotPersistentColumnActionWidth();
});
}
watch(() => JSON.stringify(cacheActionWidths.value), async () => {
await handleNotPersistentColumnActionWidth();
});
const {
getHeight,
setHeight
} = useHeight(wrapperRef, operationRef);
useFixHeight(tableRef, wrapperRef, setHeight, tableEmitter, getProps);
createTableContext({
tableRef,
tableEmitter,
tablePropsRef: getBindValues,
columnApiOptions,
setCacheActionWidths,
calcContent,
checkboxCaches,
isCheckboxCacheEnabled,
checkboxCacheList,
createAllCheckboxCache,
deleteCheckboxCache,
deleteAllCheckboxCache
});
expose({
...toRefs(useExtendInstance(tableRef, getProps, {
setLoading,
resetFilterInput: () => filterRef.value.resetFilterInput(),
resizeTableHeight: setHeight,
showExportModal: () => {
customActionRef.value?.showExportModal();
},
showColumnsModa: () => {
customActionRef.value?.showColumnsModa();
},
clearCellTooltip
}, filterRef, isCheckboxCacheEnabled, checkboxCacheList, deleteCheckboxCache, deleteAllCheckboxCache, currentPage))
});
const getWrapperClass = computed(() => {
const values = unref(getBindValues);
return [
attrs.class,
`${ComponentPrefixCls}-wrapper`,
{
[`${ComponentPrefixCls}--fill-inner`]: values.fillInner
}
];
});
const statisticalShow = ref(false);
const triggerStatistical = () => {
statisticalShow.value = !statisticalShow.value;
setTimeout(() => {
setHeight();
}, 0);
};
function createOperation() {
const values = unref(getBindValues);
const isFilterFormHasContent = values.filterFormConfig.inputForm || values.filterFormConfig.pannelForm;
const isCustomActionHasContent = values.customActionConfig.add || values.customActionConfig.delete || values.customActionConfig.export || values.customActionConfig.import || values.customActionConfig.refresh || slots.customAction;
return values.showOperations && (isFilterFormHasContent || isCustomActionHasContent) ? createVNode("div", {
"class": ComponentOperationsPrefixCls,
"ref": operationRef
}, [createVNode(ComponentFilterForm, {
"ref": filterRef,
"config": values.filterFormConfig,
"filterExclusion": props.filterExclusion,
"tableRef": tableRef,
"tableSlots": slots,
"filterModalClassName": values.filterModalClassName
}, null), createVNode(ComponentCustomAction, {
"ref": customActionRef,
"config": values.customActionConfig,
"tableRef": tableRef,
"tableSlots": slots,
"onTriggerStatistical": triggerStatistical
}, null), withDirectives(createVNode("div", {
"class": `${ComponentOperationsPrefixCls}-statistical`
}, [slots?.statisticalList?.()]), [[vShow, statisticalShow.value]])]) : null;
}
function elementResizeObserverHandler() {
let elementResizeObserver = null;
let calcNum = 0;
function createElementResizeObserver2() {
const el = unref(tableRef)?.$el;
const parentEl = el.parentElement;
if (el && parentEl) {
elementResizeObserver = new window.ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
if (contentBoxSize.inlineSize > 0 && contentBoxSize.blockSize > 0 && unref(tableRef)?.recalculate && calcNum <= 3) {
requestAnimationFrame(() => {
unref(tableRef)?.recalculate(true).then(() => {
calcNum++;
});
});
}
if (contentBoxSize.inlineSize === 0 && contentBoxSize.blockSize === 0) {
calcNum = 0;
}
}
}
});
elementResizeObserver.observe(el);
elementResizeObserver.observe(parentEl);
}
}
function clearElementResizeObserver2() {
elementResizeObserver?.disconnect();
}
return {
createElementResizeObserver: createElementResizeObserver2,
clearElementResizeObserver: clearElementResizeObserver2
};
}
const {
createElementResizeObserver,
clearElementResizeObserver
} = elementResizeObserverHandler();
watch(() => getHeight.value, async (curheight, preheight) => {
if (curheight && curheight !== preheight) {
await nextTick();
unref(tableRef)?.recalculate?.(true);
}
});
onMountedOrActivated(() => {
createElementResizeObserver();
handleNotPersistentColumnActionWidth();
});
function clearCellTooltip() {
onCellMouseleave();
instances.clear();
}
function clearColumnAutoWidth() {
cacheActionWidths.value = {};
maxWidthForAction.value = 0;
clearCalcContentCanvas();
}
onUnmountedOrOnDeactivated(async () => {
clearCellTooltip();
clearColumnAutoWidth();
clearElementResizeObserver();
await deleteAllCheckboxCache({
deleteByPage: false
});
});
return () => {
return createVNode("div", {
"class": unref(getWrapperClass),
"ref": wrapperRef,
"id": unref(getBindValues).id ?? tableId
}, [createOperation(), createVNode("div", {
"class": `${ComponentPrefixCls}`,
"style": {
height: unref(getHeight),
overflow: "hidden"
}
}, [createVNode(Grid, mergeProps({
"ref": tableRef
}, unref(getBindValues), {
"onPageChange": (...args) => {
unref(getBindValues).onPageChange?.(...args);
currentPage.value = args[0].currentPage ?? currentPage.value;
clearCellTooltip();
if (unref(getBindValues).scrollTopActions.includes("paginate")) {
nextTick(() => {
unref(tableRef)?.scrollTo?.(0, 0);
});
}
},
"onSortChange": () => {
clearCellTooltip();
}
}), {
empty: () => createVNode(ComponentEmpty, null, null),
...slots
})])]);
};
}
});
export { VXETable, TablePro as default };
//# sourceMappingURL=table-pro2.mjs.map