tav-ui
Version:
356 lines (351 loc) • 13.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var mitt = require('../../../utils/mitt2.js');
var useTooltip = require('../../../hooks/web/useTooltip2.js');
var useGlobalConfig = require('../../../hooks/global/useGlobalConfig2.js');
var onUnmountedOrOnDeactivated = require('../../../hooks/core/onUnmountedOrOnDeactivated2.js');
var onMountedOrActivated = require('../../../hooks/core/onMountedOrActivated2.js');
var index = require('./components/custom-action/index2.js');
var empty = require('./components/empty2.js');
var filterForm = require('./components/filter-form2.js');
var _const = require('./const2.js');
var useCellHover = require('./hooks/useCellHover2.js');
var useColumnApi = require('./hooks/useColumnApi2.js');
var useColums = require('./hooks/useColums2.js');
var useDataSource = require('./hooks/useDataSource2.js');
var useExtendInstance = require('./hooks/useExtendInstance2.js');
var useHeight = require('./hooks/useHeight2.js');
var useListeners = require('./hooks/useListeners2.js');
var useLoading = require('./hooks/useLoading2.js');
var useProps = require('./hooks/useProps2.js');
var useTableContext = require('./hooks/useTableContext2.js');
var useWatchDom = require('./hooks/useWatchDom2.js');
var setup = require('./setup2.js');
var types = require('./types2.js');
var useColumnAutoWidth = require('./hooks/useColumnAutoWidth2.js');
var useCheckboxCache = require('./hooks/useCheckboxCache2.js');
const _VXETable = setup.setupVxeTable();
const {
Grid
} = _VXETable;
const VXETable = _VXETable;
const ComponentPrefixCls = _const.CamelCaseToCls(_const.ComponentName);
const ComponentOperationsPrefixCls = _const.CamelCaseToCls(_const.ComponentOperationsName);
var TablePro = vue.defineComponent({
name: _const.ComponentName,
props: types.tableProProps,
emits: types.tableProEmits,
setup(props, {
slots,
attrs,
expose,
emit
}) {
const tableId = _const.buildTableId();
const tableColumns = vue.ref(props.columns);
const tableRef = vue.ref(null);
const filterRef = vue.ref(null);
const wrapperRef = vue.ref(null);
const operationRef = vue.ref(null);
const customActionRef = vue.ref(null);
const cacheActionWidths = vue.ref({});
const maxWidthForAction = vue.ref(0);
const currentPage = vue.ref(1);
const tableEmitter = mitt.mitt();
const isTableProRendered = vue.computed(() => {
return JSON.stringify(vue.unref(tableRef)?.getTableData().visibleData) && JSON.stringify(vue.unref(tableRef)?.getTableData().visibleData) !== "[]";
});
const _getProps = vue.computed(() => {
return {
...props
};
});
const getProps = useProps.useProps(types.tableProProps, _getProps, tableRef, emit, tableEmitter);
vue.watch(() => props.columns, async (curcolumns, precolumns) => {
if (JSON.stringify(curcolumns) !== JSON.stringify(precolumns)) {
tableColumns.value = curcolumns;
await vue.nextTick();
maxWidthForAction.value = 0;
await handleNotPersistentColumnActionWidth();
}
}, {
deep: true
});
const {
checkboxCaches,
isCheckboxCacheEnabled,
checkboxCacheList,
createCheckboxCache,
createAllCheckboxCache,
deleteCheckboxCache,
deleteAllCheckboxCache
} = useCheckboxCache.useCheckboxCache(tableRef, getProps, currentPage, tableEmitter);
const getColumns = vue.computed(() => {
const columns = useColums.useColumns(tableColumns.value, vue.unref(getProps).checkboxConfig, vue.unref(getProps).radioConfig, tableRef, emit, isCheckboxCacheEnabled, createCheckboxCache, createAllCheckboxCache, deleteCheckboxCache, deleteAllCheckboxCache);
return {
columns
};
});
const columnApiOptions = useColumnApi.useColumnApi(vue.unref(getProps).id ?? tableId, vue.unref(getProps).customActionConfig.column, useGlobalConfig.useGlobalConfig(), tableEmitter);
vue.watch(() => vue.unref(isTableProRendered), (isRendered) => {
if (isRendered) {
columnApiOptions?.useCachedColumnCoverCurrentColumns(getColumns, customActionRef);
}
});
const getAttrs = vue.computed(() => {
return {
...attrs
};
});
const getListeners = useListeners.useListeners(emit);
const {
loading,
setLoading
} = useLoading.useLoading(getProps);
const {
onCellMouseenter,
onCellMouseleave,
instances
} = useCellHover.useCellHover(getProps, emit);
useTooltip.useHideTooltips(instances);
const getBindValues = vue.computed(() => ({
...vue.unref(getProps),
...vue.unref(getColumns),
...vue.unref(getAttrs),
...vue.unref(getListeners),
onCellMouseenter,
onCellMouseleave,
loading: vue.unref(loading)
}));
useDataSource.useDataSource(getProps, tableRef);
useWatchDom.useWatchDom(tableRef, operationRef, customActionRef, tableEmitter);
const {
calcContent,
clearCalcContentCanvas
} = useColumnAutoWidth.useCanvasCalcContent();
const setCacheActionWidths = ({
key = "",
value = 0
}) => {
if (key) {
cacheActionWidths.value[key] = value;
}
};
async function handleNotPersistentColumnActionWidth() {
const tableData = vue.unref(tableRef)?.getTableData().tableData;
const maxWidth = Math.max(...Object.values(vue.unref(cacheActionWidths)));
if (tableData && isFinite(maxWidth) && maxWidth !== vue.unref(maxWidthForAction)) {
const currentColumns = vue.toRaw(tableColumns.value ?? []).map((d) => vue.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 (_const.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 vue.unref(tableRef)?.recalculate(true);
}
}
if (columnApiOptions && vue.unref(getBindValues).customActionConfig.column) {
tableEmitter.on("table-pro:column-covered", async () => {
await handleNotPersistentColumnActionWidth();
});
tableEmitter.on("table-pro:column-covered-no-data", async () => {
await handleNotPersistentColumnActionWidth();
});
}
vue.watch(() => JSON.stringify(cacheActionWidths.value), async () => {
await handleNotPersistentColumnActionWidth();
});
const {
getHeight,
setHeight
} = useHeight.useHeight(wrapperRef, operationRef);
useHeight.useFixHeight(tableRef, wrapperRef, setHeight, tableEmitter, getProps);
useTableContext.createTableContext({
tableRef,
tableEmitter,
tablePropsRef: getBindValues,
columnApiOptions,
setCacheActionWidths,
calcContent,
checkboxCaches,
isCheckboxCacheEnabled,
checkboxCacheList,
createAllCheckboxCache,
deleteCheckboxCache,
deleteAllCheckboxCache
});
expose({
...vue.toRefs(useExtendInstance.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 = vue.computed(() => {
const values = vue.unref(getBindValues);
return [
attrs.class,
`${ComponentPrefixCls}-wrapper`,
{
[`${ComponentPrefixCls}--fill-inner`]: values.fillInner
}
];
});
const statisticalShow = vue.ref(false);
const triggerStatistical = () => {
statisticalShow.value = !statisticalShow.value;
setTimeout(() => {
setHeight();
}, 0);
};
function createOperation() {
const values = vue.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) ? vue.createVNode("div", {
"class": ComponentOperationsPrefixCls,
"ref": operationRef
}, [vue.createVNode(filterForm["default"], {
"ref": filterRef,
"config": values.filterFormConfig,
"filterExclusion": props.filterExclusion,
"tableRef": tableRef,
"tableSlots": slots,
"filterModalClassName": values.filterModalClassName
}, null), vue.createVNode(index["default"], {
"ref": customActionRef,
"config": values.customActionConfig,
"tableRef": tableRef,
"tableSlots": slots,
"onTriggerStatistical": triggerStatistical
}, null), vue.withDirectives(vue.createVNode("div", {
"class": `${ComponentOperationsPrefixCls}-statistical`
}, [slots?.statisticalList?.()]), [[vue.vShow, statisticalShow.value]])]) : null;
}
function elementResizeObserverHandler() {
let elementResizeObserver = null;
let calcNum = 0;
function createElementResizeObserver2() {
const el = vue.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 && vue.unref(tableRef)?.recalculate && calcNum <= 3) {
requestAnimationFrame(() => {
vue.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();
vue.watch(() => getHeight.value, async (curheight, preheight) => {
if (curheight && curheight !== preheight) {
await vue.nextTick();
vue.unref(tableRef)?.recalculate?.(true);
}
});
onMountedOrActivated.onMountedOrActivated(() => {
createElementResizeObserver();
handleNotPersistentColumnActionWidth();
});
function clearCellTooltip() {
onCellMouseleave();
instances.clear();
}
function clearColumnAutoWidth() {
cacheActionWidths.value = {};
maxWidthForAction.value = 0;
clearCalcContentCanvas();
}
onUnmountedOrOnDeactivated.onUnmountedOrOnDeactivated(async () => {
clearCellTooltip();
clearColumnAutoWidth();
clearElementResizeObserver();
await deleteAllCheckboxCache({
deleteByPage: false
});
});
return () => {
return vue.createVNode("div", {
"class": vue.unref(getWrapperClass),
"ref": wrapperRef,
"id": vue.unref(getBindValues).id ?? tableId
}, [createOperation(), vue.createVNode("div", {
"class": `${ComponentPrefixCls}`,
"style": {
height: vue.unref(getHeight),
overflow: "hidden"
}
}, [vue.createVNode(Grid, vue.mergeProps({
"ref": tableRef
}, vue.unref(getBindValues), {
"onPageChange": (...args) => {
vue.unref(getBindValues).onPageChange?.(...args);
currentPage.value = args[0].currentPage ?? currentPage.value;
clearCellTooltip();
if (vue.unref(getBindValues).scrollTopActions.includes("paginate")) {
vue.nextTick(() => {
vue.unref(tableRef)?.scrollTo?.(0, 0);
});
}
},
"onSortChange": () => {
clearCellTooltip();
}
}), {
empty: () => vue.createVNode(empty["default"], null, null),
...slots
})])]);
};
}
});
exports.VXETable = VXETable;
exports["default"] = TablePro;
//# sourceMappingURL=table-pro2.js.map