This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,11 @@
import Table from './src/table.vue';
import TableColumn from './src/tableColumn';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElTable: SFCWithInstall<typeof Table> & {
TableColumn: typeof TableColumn;
};
export default ElTable;
export declare const ElTableColumn: SFCWithInstall<typeof TableColumn>;
export type TableInstance = InstanceType<typeof Table> & unknown;
export type TableColumnInstance = InstanceType<typeof TableColumn> & unknown;
export type { SummaryMethod, Table, TableProps, TableRefs, ColumnCls, ColumnStyle, CellCls, CellStyle, TreeNode, RenderRowData, Sort, Filter, TableColumnCtx, TableTooltipData, } from './src/table/defaults';

View File

@@ -0,0 +1,17 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var table = require('./src/table.js');
var index = require('./src/table-column/index.js');
var install = require('../../utils/vue/install.js');
const ElTable = install.withInstall(table["default"], {
TableColumn: index["default"]
});
const ElTableColumn = install.withNoopInstall(index["default"]);
exports.ElTable = ElTable;
exports.ElTableColumn = ElTableColumn;
exports["default"] = ElTable;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../../../../../packages/components/table/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Table from './src/table.vue'\nimport TableColumn from './src/tableColumn'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElTable: SFCWithInstall<typeof Table> & {\n TableColumn: typeof TableColumn\n} = withInstall(Table, {\n TableColumn,\n})\nexport default ElTable\nexport const ElTableColumn: SFCWithInstall<typeof TableColumn> =\n withNoopInstall(TableColumn)\n\nexport type TableInstance = InstanceType<typeof Table> & unknown\n\nexport type TableColumnInstance = InstanceType<typeof TableColumn> & unknown\n\nexport type {\n SummaryMethod,\n Table,\n TableProps,\n TableRefs,\n ColumnCls,\n ColumnStyle,\n CellCls,\n CellStyle,\n TreeNode,\n RenderRowData,\n Sort,\n Filter,\n TableColumnCtx,\n TableTooltipData,\n} from './src/table/defaults'\n"],"names":["withInstall","Table","TableColumn","withNoopInstall"],"mappings":";;;;;;;;AAGY,MAAC,OAAO,GAAGA,mBAAW,CAACC,gBAAK,EAAE;AAC1C,eAAEC,gBAAW;AACb,CAAC,EAAE;AAES,MAAC,aAAa,GAAGC,uBAAe,CAACD,gBAAW;;;;;;"}

View File

@@ -0,0 +1,6 @@
export declare const useScrollbar: () => {
scrollBarRef: import("vue").Ref<any>;
scrollTo: (options: ScrollToOptions | number, yCoord?: number) => void;
setScrollTop: (top?: number) => void;
setScrollLeft: (left?: number) => void;
};

View File

@@ -0,0 +1,33 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var types = require('../../../../utils/types.js');
const useScrollbar = () => {
const scrollBarRef = vue.ref();
const scrollTo = (options, yCoord) => {
const scrollbar = scrollBarRef.value;
if (scrollbar) {
scrollbar.scrollTo(options, yCoord);
}
};
const setScrollPosition = (position, offset) => {
const scrollbar = scrollBarRef.value;
if (scrollbar && types.isNumber(offset) && ["Top", "Left"].includes(position)) {
scrollbar[`setScroll${position}`](offset);
}
};
const setScrollTop = (top) => setScrollPosition("Top", top);
const setScrollLeft = (left) => setScrollPosition("Left", left);
return {
scrollBarRef,
scrollTo,
setScrollTop,
setScrollLeft
};
};
exports.useScrollbar = useScrollbar;
//# sourceMappingURL=use-scrollbar.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-scrollbar.js","sources":["../../../../../../../packages/components/table/src/composables/use-scrollbar.ts"],"sourcesContent":["import { ref } from 'vue'\nimport { isNumber } from '@element-plus/utils'\n\nexport const useScrollbar = () => {\n const scrollBarRef = ref()\n\n const scrollTo = (options: ScrollToOptions | number, yCoord?: number) => {\n const scrollbar = scrollBarRef.value\n if (scrollbar) {\n scrollbar.scrollTo(options, yCoord)\n }\n }\n\n const setScrollPosition = (position: 'Top' | 'Left', offset?: number) => {\n const scrollbar = scrollBarRef.value\n if (scrollbar && isNumber(offset) && ['Top', 'Left'].includes(position)) {\n scrollbar[`setScroll${position}`](offset)\n }\n }\n\n const setScrollTop = (top?: number) => setScrollPosition('Top', top)\n const setScrollLeft = (left?: number) => setScrollPosition('Left', left)\n\n return {\n scrollBarRef,\n scrollTo,\n setScrollTop,\n setScrollLeft,\n }\n}\n"],"names":["ref","isNumber"],"mappings":";;;;;;;AAEY,MAAC,YAAY,GAAG,MAAM;AAClC,EAAE,MAAM,YAAY,GAAGA,OAAG,EAAE,CAAC;AAC7B,EAAE,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK;AACxC,IAAI,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;AACzC,IAAI,IAAI,SAAS,EAAE;AACnB,MAAM,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC1C,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK;AAClD,IAAI,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC;AACzC,IAAI,IAAI,SAAS,IAAIC,cAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;AAC7E,MAAM,SAAS,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,MAAM,YAAY,GAAG,CAAC,GAAG,KAAK,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AAC9D,EAAE,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAClE,EAAE,OAAO;AACT,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,aAAa;AACjB,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,87 @@
import type { VNode } from 'vue';
import type { TableColumnCtx } from './table-column/defaults';
import type { Store } from './store';
import type { DefaultRow, TreeNode } from './table/defaults';
export declare const cellStarts: {
default: {
order: string;
};
selection: {
width: number;
minWidth: number;
realWidth: number;
order: string;
};
expand: {
width: number;
minWidth: number;
realWidth: number;
order: string;
};
index: {
width: number;
minWidth: number;
realWidth: number;
order: string;
};
};
export declare const getDefaultClassName: (type: string) => "table-column--selection" | "table__expand-column";
export declare const cellForced: {
selection: {
renderHeader<T extends DefaultRow>({ store, column, }: {
store: Store<T>;
column: TableColumnCtx<T>;
}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>;
renderCell<T extends DefaultRow>({ row, column, store, $index, }: {
row: T;
column: TableColumnCtx<T>;
store: Store<T>;
$index: number;
}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>;
sortable: boolean;
resizable: boolean;
};
index: {
renderHeader<T extends DefaultRow>({ column, }: {
column: TableColumnCtx<T>;
}): string;
renderCell<T extends DefaultRow>({ column, $index, }: {
column: TableColumnCtx<T>;
$index: number;
}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>;
sortable: boolean;
};
expand: {
renderHeader<T extends DefaultRow>({ column, }: {
column: TableColumnCtx<T>;
}): string;
renderCell<T extends DefaultRow>({ column, row, store, expanded, }: {
column: TableColumnCtx<T>;
row: T;
store: Store<T>;
expanded: boolean;
}): VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>;
sortable: boolean;
resizable: boolean;
};
};
export declare function defaultRenderCell<T extends DefaultRow>({ row, column, $index, }: {
row: T;
column: TableColumnCtx<T>;
$index: number;
}): any;
export declare function treeCellPrefix<T extends DefaultRow>({ row, treeNode, store, }: {
row: T;
treeNode: TreeNode;
store: Store<T>;
}, createPlaceholder?: boolean): VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | null;

View File

@@ -0,0 +1,227 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../checkbox/index.js');
var index$1 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var types = require('../../../utils/types.js');
var shared = require('@vue/shared');
var objects = require('../../../utils/objects.js');
const defaultClassNames = {
selection: "table-column--selection",
expand: "table__expand-column"
};
const cellStarts = {
default: {
order: ""
},
selection: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
},
expand: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
},
index: {
width: 48,
minWidth: 48,
realWidth: 48,
order: ""
}
};
const getDefaultClassName = (type) => {
return defaultClassNames[type] || "";
};
const cellForced = {
selection: {
renderHeader({
store,
column
}) {
var _a;
function isDisabled() {
return store.states.data.value && store.states.data.value.length === 0;
}
return vue.h(index.ElCheckbox, {
disabled: isDisabled(),
size: store.states.tableSize.value,
indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
"onUpdate:modelValue": (_a = store.toggleAllSelection) != null ? _a : void 0,
modelValue: store.states.isAllSelected.value,
ariaLabel: column.label
});
},
renderCell({
row,
column,
store,
$index
}) {
return vue.h(index.ElCheckbox, {
disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
size: store.states.tableSize.value,
onChange: () => {
store.commit("rowSelectedChanged", row);
},
onClick: (event) => event.stopPropagation(),
modelValue: store.isSelected(row),
ariaLabel: column.label
});
},
sortable: false,
resizable: false
},
index: {
renderHeader({
column
}) {
return column.label || "#";
},
renderCell({
column,
$index
}) {
let i = $index + 1;
const index = column.index;
if (types.isNumber(index)) {
i = $index + index;
} else if (shared.isFunction(index)) {
i = index($index);
}
return vue.h("div", {}, [i]);
},
sortable: false
},
expand: {
renderHeader({
column
}) {
return column.label || "";
},
renderCell({
column,
row,
store,
expanded
}) {
const { ns } = store;
const classes = [ns.e("expand-icon")];
if (!column.renderExpand && expanded) {
classes.push(ns.em("expand-icon", "expanded"));
}
const callback = function(e) {
e.stopPropagation();
store.toggleRowExpansion(row);
};
return vue.h("div", {
class: classes,
onClick: callback
}, {
default: () => {
if (column.renderExpand) {
return [
column.renderExpand({
expanded
})
];
}
return [
vue.h(index$1.ElIcon, null, {
default: () => {
return [vue.h(iconsVue.ArrowRight)];
}
})
];
}
});
},
sortable: false,
resizable: false
}
};
function defaultRenderCell({
row,
column,
$index
}) {
var _a;
const property = column.property;
const value = property && objects.getProp(row, property).value;
if (column && column.formatter) {
return column.formatter(row, column, value, $index);
}
return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
}
function treeCellPrefix({
row,
treeNode,
store
}, createPlaceholder = false) {
const { ns } = store;
if (!treeNode) {
if (createPlaceholder) {
return [
vue.h("span", {
class: ns.e("placeholder")
})
];
}
return null;
}
const ele = [];
const callback = function(e) {
e.stopPropagation();
if (treeNode.loading) {
return;
}
store.loadOrToggle(row);
};
if (treeNode.indent) {
ele.push(vue.h("span", {
class: ns.e("indent"),
style: { "padding-left": `${treeNode.indent}px` }
}));
}
if (types.isBoolean(treeNode.expanded) && !treeNode.noLazyChildren) {
const expandClasses = [
ns.e("expand-icon"),
treeNode.expanded ? ns.em("expand-icon", "expanded") : ""
];
let icon = iconsVue.ArrowRight;
if (treeNode.loading) {
icon = iconsVue.Loading;
}
ele.push(vue.h("div", {
class: expandClasses,
onClick: callback
}, {
default: () => {
return [
vue.h(index$1.ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
default: () => [vue.h(icon)]
})
];
}
}));
} else {
ele.push(vue.h("span", {
class: ns.e("placeholder")
}));
}
return ele;
}
exports.cellForced = cellForced;
exports.cellStarts = cellStarts;
exports.defaultRenderCell = defaultRenderCell;
exports.getDefaultClassName = getDefaultClassName;
exports.treeCellPrefix = treeCellPrefix;
//# sourceMappingURL=config.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,295 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../checkbox/index.js');
var index$3 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var index$2 = require('../../tooltip/index.js');
var index$1 = require('../../scrollbar/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index$4 = require('../../../directives/click-outside/index.js');
var content = require('../../tooltip/src/content.js');
var index$5 = require('../../../hooks/use-locale/index.js');
var index$6 = require('../../../hooks/use-namespace/index.js');
var types = require('../../../utils/types.js');
const { CheckboxGroup: ElCheckboxGroup } = index.ElCheckbox;
const _sfc_main = vue.defineComponent({
name: "ElTableFilterPanel",
components: {
ElCheckbox: index.ElCheckbox,
ElCheckboxGroup,
ElScrollbar: index$1.ElScrollbar,
ElTooltip: index$2.ElTooltip,
ElIcon: index$3.ElIcon,
ArrowDown: iconsVue.ArrowDown,
ArrowUp: iconsVue.ArrowUp
},
directives: { ClickOutside: index$4["default"] },
props: {
placement: {
type: String,
default: "bottom-start"
},
store: {
type: Object
},
column: {
type: Object
},
upDataColumn: {
type: Function
},
appendTo: content.useTooltipContentProps.appendTo
},
setup(props) {
const instance = vue.getCurrentInstance();
const { t } = index$5.useLocale();
const ns = index$6.useNamespace("table-filter");
const parent = instance == null ? void 0 : instance.parent;
if (props.column && !parent.filterPanels.value[props.column.id]) {
parent.filterPanels.value[props.column.id] = instance;
}
const tooltipVisible = vue.ref(false);
const tooltip = vue.ref(null);
const filters = vue.computed(() => {
return props.column && props.column.filters;
});
const filterClassName = vue.computed(() => {
if (props.column && props.column.filterClassName) {
return `${ns.b()} ${props.column.filterClassName}`;
}
return ns.b();
});
const filterValue = vue.computed({
get: () => {
var _a;
return (((_a = props.column) == null ? void 0 : _a.filteredValue) || [])[0];
},
set: (value) => {
if (filteredValue.value) {
if (!types.isPropAbsent(value)) {
filteredValue.value.splice(0, 1, value);
} else {
filteredValue.value.splice(0, 1);
}
}
}
});
const filteredValue = vue.computed({
get() {
if (props.column) {
return props.column.filteredValue || [];
}
return [];
},
set(value) {
var _a;
if (props.column) {
(_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filteredValue", value);
}
}
});
const multiple = vue.computed(() => {
if (props.column) {
return props.column.filterMultiple;
}
return true;
});
const isActive = (filter) => {
return filter.value === filterValue.value;
};
const hidden = () => {
tooltipVisible.value = false;
};
const showFilterPanel = (e) => {
e.stopPropagation();
tooltipVisible.value = !tooltipVisible.value;
};
const hideFilterPanel = () => {
tooltipVisible.value = false;
};
const handleConfirm = () => {
confirmFilter(filteredValue.value);
hidden();
};
const handleReset = () => {
filteredValue.value = [];
confirmFilter(filteredValue.value);
hidden();
};
const handleSelect = (_filterValue) => {
filterValue.value = _filterValue;
if (!types.isPropAbsent(_filterValue)) {
confirmFilter(filteredValue.value);
} else {
confirmFilter([]);
}
hidden();
};
const confirmFilter = (filteredValue2) => {
var _a, _b;
(_a = props.store) == null ? void 0 : _a.commit("filterChange", {
column: props.column,
values: filteredValue2
});
(_b = props.store) == null ? void 0 : _b.updateAllSelected();
};
vue.watch(tooltipVisible, (value) => {
var _a;
if (props.column) {
(_a = props.upDataColumn) == null ? void 0 : _a.call(props, "filterOpened", value);
}
}, {
immediate: true
});
const popperPaneRef = vue.computed(() => {
var _a, _b;
return (_b = (_a = tooltip.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
});
return {
tooltipVisible,
multiple,
filterClassName,
filteredValue,
filterValue,
filters,
handleConfirm,
handleReset,
handleSelect,
isPropAbsent: types.isPropAbsent,
isActive,
t,
ns,
showFilterPanel,
hideFilterPanel,
popperPaneRef,
tooltip
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = vue.resolveComponent("el-checkbox");
const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _component_arrow_up = vue.resolveComponent("arrow-up");
const _component_arrow_down = vue.resolveComponent("arrow-down");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _directive_click_outside = vue.resolveDirective("click-outside");
return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
ref: "tooltip",
visible: _ctx.tooltipVisible,
offset: 0,
placement: _ctx.placement,
"show-arrow": false,
"stop-popper-mouse-event": false,
teleported: "",
effect: "light",
pure: "",
"popper-class": _ctx.filterClassName,
persistent: "",
"append-to": _ctx.appendTo
}, {
content: vue.withCtx(() => [
_ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", { key: 0 }, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("content"))
}, [
vue.createVNode(_component_el_scrollbar, {
"wrap-class": _ctx.ns.e("wrap")
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_checkbox_group, {
modelValue: _ctx.filteredValue,
"onUpdate:modelValue": ($event) => _ctx.filteredValue = $event,
class: vue.normalizeClass(_ctx.ns.e("checkbox-group"))
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return vue.openBlock(), vue.createBlock(_component_el_checkbox, {
key: filter.value,
value: filter.value
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(filter.text), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 1
}, 8, ["modelValue", "onUpdate:modelValue", "class"])
]),
_: 1
}, 8, ["wrap-class"])
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("bottom"))
}, [
vue.createElementVNode("button", {
class: vue.normalizeClass({ [_ctx.ns.is("disabled")]: _ctx.filteredValue.length === 0 }),
disabled: _ctx.filteredValue.length === 0,
type: "button",
onClick: _ctx.handleConfirm
}, vue.toDisplayString(_ctx.t("el.table.confirmFilter")), 11, ["disabled", "onClick"]),
vue.createElementVNode("button", {
type: "button",
onClick: _ctx.handleReset
}, vue.toDisplayString(_ctx.t("el.table.resetFilter")), 9, ["onClick"])
], 2)
])) : (vue.openBlock(), vue.createElementBlock("ul", {
key: 1,
class: vue.normalizeClass(_ctx.ns.e("list"))
}, [
vue.createElementVNode("li", {
class: vue.normalizeClass([
_ctx.ns.e("list-item"),
{
[_ctx.ns.is("active")]: _ctx.isPropAbsent(_ctx.filterValue)
}
]),
onClick: ($event) => _ctx.handleSelect(null)
}, vue.toDisplayString(_ctx.t("el.table.clearFilter")), 11, ["onClick"]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.filters, (filter) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: filter.value,
class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
label: filter.value,
onClick: ($event) => _ctx.handleSelect(filter.value)
}, vue.toDisplayString(filter.text), 11, ["label", "onClick"]);
}), 128))
], 2))
]),
default: vue.withCtx(() => [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
class: vue.normalizeClass([
`${_ctx.ns.namespace.value}-table__column-filter-trigger`,
`${_ctx.ns.namespace.value}-none-outline`
]),
onClick: _ctx.showFilterPanel
}, [
vue.createVNode(_component_el_icon, null, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "filter-icon", {}, () => {
var _a;
return [
((_a = _ctx.column) == null ? void 0 : _a.filterOpened) ? (vue.openBlock(), vue.createBlock(_component_arrow_up, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_arrow_down, { key: 1 }))
];
})
]),
_: 3
})
], 10, ["onClick"])), [
[_directive_click_outside, _ctx.hideFilterPanel, _ctx.popperPaneRef]
])
]),
_: 3
}, 8, ["visible", "placement", "popper-class", "append-to"]);
}
var FilterPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "filter-panel.vue"]]);
exports["default"] = FilterPanel;
//# sourceMappingURL=filter-panel.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,88 @@
import type { DefaultRow } from './table/defaults';
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
import type { Placement } from 'element-plus/es/components/popper';
import type { PropType, WritableComputedRef } from 'vue';
import type { TableColumnCtx } from './table-column/defaults';
import type { Store } from './store';
declare const _default: import("vue").DefineComponent<{
placement: {
type: PropType<Placement>;
default: string;
};
store: {
type: PropType<Store<DefaultRow>>;
};
column: {
type: PropType<TableColumnCtx<DefaultRow>>;
};
upDataColumn: {
type: FunctionConstructor;
};
appendTo: {
readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
tooltipVisible: import("vue").Ref<boolean>;
multiple: import("vue").ComputedRef<boolean>;
filterClassName: import("vue").ComputedRef<string>;
filteredValue: WritableComputedRef<string[]>;
filterValue: WritableComputedRef<string>;
filters: import("vue").ComputedRef<import("./table-column/defaults").Filters | undefined>;
handleConfirm: () => void;
handleReset: () => void;
handleSelect: (_filterValue?: string | null) => void;
isPropAbsent: (prop: unknown) => prop is null | undefined;
isActive: (filter: {
value: string;
text: string;
}) => boolean;
t: import("element-plus/es/hooks").Translator;
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
showFilterPanel: (e: MouseEvent) => void;
hideFilterPanel: () => void;
popperPaneRef: import("vue").ComputedRef<HTMLElement | undefined>;
tooltip: import("vue").Ref<TooltipInstance | null>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
placement: {
type: PropType<Placement>;
default: string;
};
store: {
type: PropType<Store<DefaultRow>>;
};
column: {
type: PropType<TableColumnCtx<DefaultRow>>;
};
upDataColumn: {
type: FunctionConstructor;
};
appendTo: {
readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>) | ((new (...args: any[]) => string | HTMLElement) | (() => import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | ((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement))[], unknown, unknown>))[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>>, {
placement: Placement;
}>;
export default _default;

View File

@@ -0,0 +1,13 @@
import type { TableColumnCtx } from './table-column/defaults';
import type { DefaultRow } from './table/defaults';
type Props = {
tableLayout: 'fixed' | 'auto';
columns?: TableColumnCtx<DefaultRow>[];
};
export declare function hColgroup(props: Props): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>;
export declare namespace hColgroup {
var props: string[];
}
export {};

View File

@@ -0,0 +1,36 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var types = require('../../../utils/types.js');
function hColgroup(props) {
const isAuto = props.tableLayout === "auto";
let columns = props.columns || [];
if (isAuto) {
if (columns.every(({ width }) => types.isUndefined(width))) {
columns = [];
}
}
const getPropsData = (column) => {
const propsData = {
key: `${props.tableLayout}_${column.id}`,
style: {},
name: void 0
};
if (isAuto) {
propsData.style = {
width: `${column.width}px`
};
} else {
propsData.name = column.id;
}
return propsData;
};
return vue.h("colgroup", {}, columns.map((column) => vue.h("col", getPropsData(column))));
}
hColgroup.props = ["columns", "tableLayout"];
exports.hColgroup = hColgroup;
//# sourceMappingURL=h-helper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"h-helper.js","sources":["../../../../../../packages/components/table/src/h-helper.ts"],"sourcesContent":["import { h } from 'vue'\nimport { isUndefined } from '@element-plus/utils'\n\nimport type { TableColumnCtx } from './table-column/defaults'\nimport type { DefaultRow } from './table/defaults'\n\ntype Props = {\n tableLayout: 'fixed' | 'auto'\n columns?: TableColumnCtx<DefaultRow>[]\n}\n\nexport function hColgroup(props: Props) {\n const isAuto = props.tableLayout === 'auto'\n let columns = props.columns || []\n if (isAuto) {\n if (columns.every(({ width }) => isUndefined(width))) {\n columns = []\n }\n }\n const getPropsData = (column: TableColumnCtx<DefaultRow>) => {\n const propsData = {\n key: `${props.tableLayout}_${column.id}`,\n style: {},\n name: undefined as string | undefined,\n }\n if (isAuto) {\n propsData.style = {\n width: `${column.width}px`,\n }\n } else {\n propsData.name = column.id\n }\n return propsData\n }\n\n return h(\n 'colgroup',\n {},\n columns.map((column) => h('col', getPropsData(column)))\n )\n}\n\nhColgroup.props = ['columns', 'tableLayout']\n"],"names":["isUndefined","h"],"mappings":";;;;;;;AAEO,SAAS,SAAS,CAAC,KAAK,EAAE;AACjC,EAAE,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,KAAK,MAAM,CAAC;AAC9C,EAAE,IAAI,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;AACpC,EAAE,IAAI,MAAM,EAAE;AACd,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAKA,iBAAW,CAAC,KAAK,CAAC,CAAC,EAAE;AAC1D,MAAM,OAAO,GAAG,EAAE,CAAC;AACnB,KAAK;AACL,GAAG;AACH,EAAE,MAAM,YAAY,GAAG,CAAC,MAAM,KAAK;AACnC,IAAI,MAAM,SAAS,GAAG;AACtB,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;AAC9C,MAAM,KAAK,EAAE,EAAE;AACf,MAAM,IAAI,EAAE,KAAK,CAAC;AAClB,KAAK,CAAC;AACN,IAAI,IAAI,MAAM,EAAE;AAChB,MAAM,SAAS,CAAC,KAAK,GAAG;AACxB,QAAQ,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;AAClC,OAAO,CAAC;AACR,KAAK,MAAM;AACX,MAAM,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC;AACjC,KAAK;AACL,IAAI,OAAO,SAAS,CAAC;AACrB,GAAG,CAAC;AACJ,EAAE,OAAOC,KAAC,CAAC,UAAU,EAAE,EAAE,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAKA,KAAC,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACpF,CAAC;AACD,SAAS,CAAC,KAAK,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC;;;;"}

View File

@@ -0,0 +1,8 @@
import type TableLayout from './table-layout';
import type { DefaultRow, Table } from './table/defaults';
declare function useLayoutObserver<T extends DefaultRow>(root: Table<T>): {
tableLayout: TableLayout<T>;
onColumnsChange: (layout: TableLayout<T>) => void;
onScrollableChange: (layout: TableLayout<T>) => void;
};
export default useLayoutObserver;

View File

@@ -0,0 +1,71 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
function useLayoutObserver(root) {
const instance = vue.getCurrentInstance();
vue.onBeforeMount(() => {
tableLayout.value.addObserver(instance);
});
vue.onMounted(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUpdated(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
vue.onUnmounted(() => {
tableLayout.value.removeObserver(instance);
});
const tableLayout = vue.computed(() => {
const layout = root.layout;
if (!layout) {
throw new Error("Can not find table layout.");
}
return layout;
});
const onColumnsChange = (layout) => {
var _a;
const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col")) || [];
if (!cols.length)
return;
const flattenColumns = layout.getFlattenColumns();
const columnsMap = {};
flattenColumns.forEach((column) => {
columnsMap[column.id] = column;
});
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
const name = col.getAttribute("name");
const column = columnsMap[name];
if (column) {
col.setAttribute("width", column.realWidth || column.width);
}
}
};
const onScrollableChange = (layout) => {
var _a, _b;
const cols = ((_a = root.vnode.el) == null ? void 0 : _a.querySelectorAll("colgroup > col[name=gutter]")) || [];
for (let i = 0, j = cols.length; i < j; i++) {
const col = cols[i];
col.setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0");
}
const ths = ((_b = root.vnode.el) == null ? void 0 : _b.querySelectorAll("th.gutter")) || [];
for (let i = 0, j = ths.length; i < j; i++) {
const th = ths[i];
th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : "0";
th.style.display = layout.scrollY.value ? "" : "none";
}
};
return {
tableLayout: tableLayout.value,
onColumnsChange,
onScrollableChange
};
}
exports["default"] = useLayoutObserver;
//# sourceMappingURL=layout-observer.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import type { Ref } from 'vue';
import type { DefaultRow } from '../table/defaults';
import type { WatcherPropsData } from '.';
declare function useCurrent<T extends DefaultRow>(watcherData: WatcherPropsData<T>): {
setCurrentRowKey: (key: string) => void;
restoreCurrentRowKey: () => void;
setCurrentRowByKey: (key: string) => void;
updateCurrentRow: (_currentRow: T) => void;
updateCurrentRowData: () => void;
states: {
_currentRowKey: Ref<string | null>;
currentRow: Ref<T | null>;
};
};
export default useCurrent;

View File

@@ -0,0 +1,76 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var util = require('../util.js');
function useCurrent(watcherData) {
const instance = vue.getCurrentInstance();
const _currentRowKey = vue.ref(null);
const currentRow = vue.ref(null);
const setCurrentRowKey = (key) => {
instance.store.assertRowKey();
_currentRowKey.value = key;
setCurrentRowByKey(key);
};
const restoreCurrentRowKey = () => {
_currentRowKey.value = null;
};
const setCurrentRowByKey = (key) => {
var _a;
const { data, rowKey } = watcherData;
let _currentRow = null;
if (rowKey.value) {
_currentRow = (_a = (vue.unref(data) || []).find((item) => util.getRowIdentity(item, rowKey.value) === key)) != null ? _a : null;
}
currentRow.value = _currentRow != null ? _currentRow : null;
instance.emit("current-change", currentRow.value, null);
};
const updateCurrentRow = (_currentRow) => {
const oldCurrentRow = currentRow.value;
if (_currentRow && _currentRow !== oldCurrentRow) {
currentRow.value = _currentRow;
instance.emit("current-change", currentRow.value, oldCurrentRow);
return;
}
if (!_currentRow && oldCurrentRow) {
currentRow.value = null;
instance.emit("current-change", null, oldCurrentRow);
}
};
const updateCurrentRowData = () => {
const rowKey = watcherData.rowKey.value;
const data = watcherData.data.value || [];
const oldCurrentRow = currentRow.value;
if (oldCurrentRow && !data.includes(oldCurrentRow)) {
if (rowKey) {
const currentRowKey = util.getRowIdentity(oldCurrentRow, rowKey);
setCurrentRowByKey(currentRowKey);
} else {
currentRow.value = null;
}
if (lodashUnified.isNull(currentRow.value)) {
instance.emit("current-change", null, oldCurrentRow);
}
} else if (_currentRowKey.value) {
setCurrentRowByKey(_currentRowKey.value);
restoreCurrentRowKey();
}
};
return {
setCurrentRowKey,
restoreCurrentRowKey,
setCurrentRowByKey,
updateCurrentRow,
updateCurrentRowData,
states: {
_currentRowKey,
currentRow
}
};
}
exports["default"] = useCurrent;
//# sourceMappingURL=current.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
import type { Ref } from 'vue';
import type { WatcherPropsData } from '.';
import type { DefaultRow } from '../table/defaults';
declare function useExpand<T extends DefaultRow>(watcherData: WatcherPropsData<T>): {
updateExpandRows: () => void;
toggleRowExpansion: (row: T, expanded?: boolean) => void;
setExpandRowKeys: (rowKeys: (string | number)[]) => void;
isRowExpanded: (row: T) => boolean;
states: {
expandRows: Ref<T[]>;
defaultExpandAll: Ref<boolean>;
};
};
export default useExpand;

View File

@@ -0,0 +1,71 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
function useExpand(watcherData) {
const instance = vue.getCurrentInstance();
const defaultExpandAll = vue.ref(false);
const expandRows = vue.ref([]);
const updateExpandRows = () => {
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
if (defaultExpandAll.value) {
expandRows.value = data.slice();
} else if (rowKey) {
const expandRowsMap = util.getKeysMap(expandRows.value, rowKey);
expandRows.value = data.reduce((prev, row) => {
const rowId = util.getRowIdentity(row, rowKey);
const rowInfo = expandRowsMap[rowId];
if (rowInfo) {
prev.push(row);
}
return prev;
}, []);
} else {
expandRows.value = [];
}
};
const toggleRowExpansion = (row, expanded) => {
const changed = util.toggleRowStatus(expandRows.value, row, expanded, void 0, void 0, void 0, watcherData.rowKey.value);
if (changed) {
instance.emit("expand-change", row, expandRows.value.slice());
}
};
const setExpandRowKeys = (rowKeys) => {
instance.store.assertRowKey();
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
const keysMap = util.getKeysMap(data, rowKey);
expandRows.value = rowKeys.reduce((prev, cur) => {
const info = keysMap[cur];
if (info) {
prev.push(info.row);
}
return prev;
}, []);
};
const isRowExpanded = (row) => {
const rowKey = watcherData.rowKey.value;
if (rowKey) {
const expandMap = util.getKeysMap(expandRows.value, rowKey);
return !!expandMap[util.getRowIdentity(row, rowKey)];
}
return expandRows.value.includes(row);
};
return {
updateExpandRows,
toggleRowExpansion,
setExpandRowKeys,
isRowExpanded,
states: {
expandRows,
defaultExpandAll
}
};
}
exports["default"] = useExpand;
//# sourceMappingURL=expand.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,519 @@
import type { DefaultRow, Table, TableProps } from '../table/defaults';
export declare function createStore<T extends DefaultRow>(table: Table<T>, props: TableProps<T>): {
mutations: {
setData(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, data: T[]): void;
insertColumn(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, column: import("../table-column/defaults").TableColumnCtx<T>, parent: import("../table-column/defaults").TableColumnCtx<T>, updateColumnOrder: () => void): void;
updateColumnOrder(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, column: import("../table-column/defaults").TableColumnCtx<T>): void;
removeColumn(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, column: import("../table-column/defaults").TableColumnCtx<T>, parent: import("../table-column/defaults").TableColumnCtx<T>, updateColumnOrder: () => void): void;
sort(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, options: import("../table/defaults").Sort): void;
changeSortCondition(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, options: import("../table/defaults").Sort): void;
filterChange(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, options: import("../table/defaults").Filter<T>): void;
toggleAllSelection(): void;
rowSelectedChanged(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, row: T): void;
setHoverRow(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, row: T): void;
setCurrentRow(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
}, row: T): void;
};
commit: (name: "sort" | "setData" | "insertColumn" | "updateColumnOrder" | "removeColumn" | "changeSortCondition" | "filterChange" | "toggleAllSelection" | "rowSelectedChanged" | "setHoverRow" | "setCurrentRow", ...args: any[]) => void;
updateTableScrollY: () => void;
assertRowKey: () => void;
updateColumns: () => void;
scheduleLayout: (needUpdateColumns?: boolean, immediate?: boolean) => void;
isSelected: (row: T) => boolean;
clearSelection: () => void;
cleanSelection: () => void;
getSelectionRows: () => T[];
toggleRowSelection: (row: T, selected?: boolean, emitChange?: boolean, ignoreSelectable?: boolean) => void;
_toggleAllSelection: () => void;
toggleAllSelection: (() => void) | null;
updateAllSelected: () => void;
updateFilters: (column: import("../table-column/defaults").TableColumnCtx<T>, values: string[]) => Record<string, string[]>;
updateCurrentRow: (_currentRow: T) => void;
updateSort: (column: import("../table-column/defaults").TableColumnCtx<T> | null, prop: string | null, order: import("../table/defaults").TableSortOrder | null) => void;
execFilter: () => void;
execSort: () => void;
execQuery: (ignore?: {
filter: boolean;
} | undefined) => void;
clearFilter: (columnKeys?: string[] | string) => void;
clearSort: () => void;
toggleRowExpansion: (row: T, expanded?: boolean) => void;
setExpandRowKeysAdapter: (val: string[]) => void;
setCurrentRowKey: (key: string) => void;
toggleRowExpansionAdapter: (row: T, expanded?: boolean) => void;
isRowExpanded: (row: T) => boolean;
updateExpandRows: () => void;
updateCurrentRowData: () => void;
loadOrToggle: (row: T) => void;
updateTreeData: (ifChangeExpandRowKeys?: boolean, ifExpandAll?: boolean) => void;
updateKeyChildren: (key: string, data: T[]) => void;
states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<T | null>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<T[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<T[]>;
_data: import("vue").Ref<T[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
originColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
columns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
leafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
fixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
rightFixedLeafColumns: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<T[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: T, index: number) => boolean) | null>;
filters: import("vue").Ref<import(".").StoreFilter>;
filteredData: import("vue").Ref<T[] | null>;
sortingColumn: import("vue").Ref<import("../table-column/defaults").TableColumnCtx<T> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<T | null>;
};
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
};

View File

@@ -0,0 +1,72 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var index = require('./index.js');
var shared = require('@vue/shared');
const InitialStateMap = {
rowKey: "rowKey",
defaultExpandAll: "defaultExpandAll",
selectOnIndeterminate: "selectOnIndeterminate",
indent: "indent",
lazy: "lazy",
data: "data",
["treeProps.hasChildren"]: {
key: "lazyColumnIdentifier",
default: "hasChildren"
},
["treeProps.children"]: {
key: "childrenColumnName",
default: "children"
},
["treeProps.checkStrictly"]: {
key: "checkStrictly",
default: false
}
};
function createStore(table, props) {
if (!table) {
throw new Error("Table is required.");
}
const store = index["default"]();
store.toggleAllSelection = lodashUnified.debounce(store._toggleAllSelection, 10);
Object.keys(InitialStateMap).forEach((key) => {
handleValue(getArrKeysValue(props, key), key, store);
});
proxyTableProps(store, props);
return store;
}
function proxyTableProps(store, props) {
Object.keys(InitialStateMap).forEach((key) => {
vue.watch(() => getArrKeysValue(props, key), (value) => {
handleValue(value, key, store);
});
});
}
function handleValue(value, propsKey, store) {
let newVal = value;
let storeKey = InitialStateMap[propsKey];
if (shared.isObject(storeKey)) {
newVal = newVal || storeKey.default;
storeKey = storeKey.key;
}
store.states[storeKey].value = newVal;
}
function getArrKeysValue(props, key) {
if (key.includes(".")) {
const keyList = key.split(".");
let value = props;
keyList.forEach((k) => {
value = value[k];
});
return value;
} else {
return props[key];
}
}
exports.createStore = createStore;
//# sourceMappingURL=helper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"helper.js","sources":["../../../../../../../packages/components/table/src/store/helper.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { isObject } from '@element-plus/utils'\nimport useStore from '.'\n\nimport type { Store } from '.'\nimport type { DefaultRow, Table, TableProps } from '../table/defaults'\n\nconst InitialStateMap = {\n rowKey: 'rowKey',\n defaultExpandAll: 'defaultExpandAll',\n selectOnIndeterminate: 'selectOnIndeterminate',\n indent: 'indent',\n lazy: 'lazy',\n data: 'data',\n ['treeProps.hasChildren']: {\n key: 'lazyColumnIdentifier',\n default: 'hasChildren',\n },\n ['treeProps.children']: {\n key: 'childrenColumnName',\n default: 'children',\n },\n ['treeProps.checkStrictly']: {\n key: 'checkStrictly',\n default: false,\n },\n}\n\nexport function createStore<T extends DefaultRow>(\n table: Table<T>,\n props: TableProps<T>\n) {\n if (!table) {\n throw new Error('Table is required.')\n }\n\n const store = useStore<T>()\n // fix https://github.com/ElemeFE/element/issues/14075\n // related pr https://github.com/ElemeFE/element/pull/14146\n store.toggleAllSelection = debounce(store._toggleAllSelection, 10)\n Object.keys(InitialStateMap).forEach((key) => {\n handleValue(getArrKeysValue(props, key), key, store)\n })\n proxyTableProps(store, props)\n return store\n}\n\nfunction proxyTableProps<T extends DefaultRow>(\n store: Store<T>,\n props: TableProps<T>\n) {\n Object.keys(InitialStateMap).forEach((key) => {\n watch(\n () => getArrKeysValue(props, key),\n (value) => {\n handleValue(value, key, store)\n }\n )\n })\n}\n\nfunction handleValue<T extends DefaultRow>(\n value: string | boolean | Record<string, any>,\n propsKey: string,\n store: Store<T>\n) {\n let newVal = value\n let storeKey = InitialStateMap[propsKey as keyof typeof InitialStateMap]\n if (isObject(storeKey)) {\n newVal = newVal || storeKey.default\n storeKey = storeKey.key\n }\n ;((store.states as any)[storeKey] as any).value = newVal\n}\n\nfunction getArrKeysValue<T extends DefaultRow>(\n props: TableProps<T>,\n key: string\n) {\n if ((key as keyof typeof props).includes('.')) {\n const keyList = (key as keyof typeof props).split('.')\n let value: string | Record<string, any> = props\n keyList.forEach((k) => {\n value = (value as Record<string, any>)[k]\n })\n return value\n } else {\n return (props as any)[key] as boolean | string\n }\n}\n"],"names":["useStore","debounce","watch","isObject"],"mappings":";;;;;;;;;AAIA,MAAM,eAAe,GAAG;AACxB,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,gBAAgB,EAAE,kBAAkB;AACtC,EAAE,qBAAqB,EAAE,uBAAuB;AAChD,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,CAAC,uBAAuB,GAAG;AAC7B,IAAI,GAAG,EAAE,sBAAsB;AAC/B,IAAI,OAAO,EAAE,aAAa;AAC1B,GAAG;AACH,EAAE,CAAC,oBAAoB,GAAG;AAC1B,IAAI,GAAG,EAAE,oBAAoB;AAC7B,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,CAAC,yBAAyB,GAAG;AAC/B,IAAI,GAAG,EAAE,eAAe;AACxB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,CAAC;AACK,SAAS,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE;AAC1C,EAAE,IAAI,CAAC,KAAK,EAAE;AACd,IAAI,MAAM,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,MAAM,KAAK,GAAGA,gBAAQ,EAAE,CAAC;AAC3B,EAAE,KAAK,CAAC,kBAAkB,GAAGC,sBAAQ,CAAC,KAAK,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;AACrE,EAAE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK;AAChD,IAAI,WAAW,CAAC,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AACzD,GAAG,CAAC,CAAC;AACL,EAAE,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAChC,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE;AACvC,EAAE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAK;AAChD,IAAIC,SAAK,CAAC,MAAM,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,KAAK,KAAK;AACxD,MAAM,WAAW,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AACrC,KAAK,CAAC,CAAC;AACP,GAAG,CAAC,CAAC;AACL,CAAC;AACD,SAAS,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;AAC7C,EAAE,IAAI,MAAM,GAAG,KAAK,CAAC;AACrB,EAAE,IAAI,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAC3C,EAAE,IAAIC,eAAQ,CAAC,QAAQ,CAAC,EAAE;AAC1B,IAAI,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,OAAO,CAAC;AACxC,IAAI,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC;AAC5B,GAAG;AAEH,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC;AACxC,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE;AACrC,EAAE,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACzB,IAAI,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACnC,IAAI,IAAI,KAAK,GAAG,KAAK,CAAC;AACtB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;AAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AACvB,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG,MAAM;AACT,IAAI,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC;AACtB,GAAG;AACH;;;;"}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,197 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var watcher = require('./watcher.js');
var index = require('../../../../hooks/use-namespace/index.js');
function replaceColumn(array, column) {
return array.map((item) => {
var _a;
if (item.id === column.id) {
return column;
} else if ((_a = item.children) == null ? void 0 : _a.length) {
item.children = replaceColumn(item.children, column);
}
return item;
});
}
function sortColumn(array) {
array.forEach((item) => {
var _a, _b;
item.no = (_a = item.getColumnIndex) == null ? void 0 : _a.call(item);
if ((_b = item.children) == null ? void 0 : _b.length) {
sortColumn(item.children);
}
});
array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
const instance = vue.getCurrentInstance();
const watcher$1 = watcher["default"]();
const ns = index.useNamespace("table");
const mutations = {
setData(states, data) {
const dataInstanceChanged = vue.unref(states._data) !== data;
states.data.value = data;
states._data.value = data;
instance.store.execQuery();
instance.store.updateCurrentRowData();
instance.store.updateExpandRows();
instance.store.updateTreeData(instance.store.states.defaultExpandAll.value);
if (vue.unref(states.reserveSelection)) {
instance.store.assertRowKey();
} else {
if (dataInstanceChanged) {
instance.store.clearSelection();
} else {
instance.store.cleanSelection();
}
}
instance.store.updateAllSelected();
if (instance.$ready) {
instance.store.scheduleLayout();
}
},
insertColumn(states, column, parent, updateColumnOrder) {
var _a;
const array = vue.unref(states._columns);
let newColumns = [];
if (!parent) {
array.push(column);
newColumns = array;
} else {
if (parent && !parent.children) {
parent.children = [];
}
(_a = parent.children) == null ? void 0 : _a.push(column);
newColumns = replaceColumn(array, parent);
}
sortColumn(newColumns);
states._columns.value = newColumns;
states.updateOrderFns.push(updateColumnOrder);
if (column.type === "selection") {
states.selectable.value = column.selectable;
states.reserveSelection.value = column.reserveSelection;
}
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
updateColumnOrder(states, column) {
var _a;
const newColumnIndex = (_a = column.getColumnIndex) == null ? void 0 : _a.call(column);
if (newColumnIndex === column.no)
return;
sortColumn(states._columns.value);
if (instance.$ready) {
instance.store.updateColumns();
}
},
removeColumn(states, column, parent, updateColumnOrder) {
var _a;
const array = vue.unref(states._columns) || [];
if (parent) {
(_a = parent.children) == null ? void 0 : _a.splice(parent.children.findIndex((item) => item.id === column.id), 1);
vue.nextTick(() => {
var _a2;
if (((_a2 = parent.children) == null ? void 0 : _a2.length) === 0) {
delete parent.children;
}
});
states._columns.value = replaceColumn(array, parent);
} else {
const index = array.indexOf(column);
if (index > -1) {
array.splice(index, 1);
states._columns.value = array;
}
}
const updateFnIndex = states.updateOrderFns.indexOf(updateColumnOrder);
updateFnIndex > -1 && states.updateOrderFns.splice(updateFnIndex, 1);
if (instance.$ready) {
instance.store.updateColumns();
instance.store.scheduleLayout();
}
},
sort(states, options) {
const { prop, order, init } = options;
if (prop) {
const column = vue.unref(states.columns).find((column2) => column2.property === prop);
if (column) {
column.order = order;
instance.store.updateSort(column, prop, order);
instance.store.commit("changeSortCondition", { init });
}
}
},
changeSortCondition(states, options) {
const { sortingColumn, sortProp, sortOrder } = states;
const columnValue = vue.unref(sortingColumn), propValue = vue.unref(sortProp), orderValue = vue.unref(sortOrder);
if (lodashUnified.isNull(orderValue)) {
states.sortingColumn.value = null;
states.sortProp.value = null;
}
const ignore = { filter: true };
instance.store.execQuery(ignore);
if (!options || !(options.silent || options.init)) {
instance.emit("sort-change", {
column: columnValue,
prop: propValue,
order: orderValue
});
}
instance.store.updateTableScrollY();
},
filterChange(_states, options) {
const { column, values, silent } = options;
const newFilters = instance.store.updateFilters(column, values);
instance.store.execQuery();
if (!silent) {
instance.emit("filter-change", newFilters);
}
instance.store.updateTableScrollY();
},
toggleAllSelection() {
var _a, _b;
(_b = (_a = instance.store).toggleAllSelection) == null ? void 0 : _b.call(_a);
},
rowSelectedChanged(_states, row) {
instance.store.toggleRowSelection(row);
instance.store.updateAllSelected();
},
setHoverRow(states, row) {
states.hoverRow.value = row;
},
setCurrentRow(_states, row) {
instance.store.updateCurrentRow(row);
}
};
const commit = function(name, ...args) {
const mutations2 = instance.store.mutations;
if (mutations2[name]) {
mutations2[name].apply(instance, [
instance.store.states,
...args
]);
} else {
throw new Error(`Action not found: ${name}`);
}
};
const updateTableScrollY = function() {
vue.nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
};
return {
ns,
...watcher$1,
mutations,
commit,
updateTableScrollY
};
}
exports["default"] = useStore;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,27 @@
import type { WatcherPropsData } from '.';
import type { DefaultRow, TreeNode } from '../table/defaults';
export interface TreeData extends TreeNode {
children?: string[];
lazy?: boolean;
loaded?: boolean;
}
declare function useTree<T extends DefaultRow>(watcherData: WatcherPropsData<T>): {
loadData: (row: T, key: string, treeNode: TreeNode) => void;
loadOrToggle: (row: T) => void;
toggleTreeExpansion: (row: T, expanded?: boolean) => void;
updateTreeExpandKeys: (value: string[]) => void;
updateTreeData: (ifChangeExpandRowKeys?: boolean, ifExpandAll?: boolean) => void;
updateKeyChildren: (key: string, data: T[]) => void;
normalize: (data: T[]) => Record<string, TreeData>;
states: {
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, T[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
};
};
export default useTree;

View File

@@ -0,0 +1,222 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
var shared = require('@vue/shared');
var types = require('../../../../utils/types.js');
function useTree(watcherData) {
const expandRowKeys = vue.ref([]);
const treeData = vue.ref({});
const indent = vue.ref(16);
const lazy = vue.ref(false);
const lazyTreeNodeMap = vue.ref({});
const lazyColumnIdentifier = vue.ref("hasChildren");
const childrenColumnName = vue.ref("children");
const checkStrictly = vue.ref(false);
const instance = vue.getCurrentInstance();
const normalizedData = vue.computed(() => {
if (!watcherData.rowKey.value)
return {};
const data = watcherData.data.value || [];
return normalize(data);
});
const normalizedLazyNode = vue.computed(() => {
const rowKey = watcherData.rowKey.value;
const keys = Object.keys(lazyTreeNodeMap.value);
const res = {};
if (!keys.length)
return res;
keys.forEach((key) => {
if (lazyTreeNodeMap.value[key].length) {
const item = { children: [] };
lazyTreeNodeMap.value[key].forEach((row) => {
const currentRowKey = util.getRowIdentity(row, rowKey);
item.children.push(currentRowKey);
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
res[currentRowKey] = { children: [] };
}
});
res[key] = item;
}
});
return res;
});
const normalize = (data) => {
const rowKey = watcherData.rowKey.value;
const res = {};
util.walkTreeNode(data, (parent, children, level) => {
const parentId = util.getRowIdentity(parent, rowKey);
if (shared.isArray(children)) {
res[parentId] = {
children: children.map((row) => util.getRowIdentity(row, rowKey)),
level
};
} else if (lazy.value) {
res[parentId] = {
children: [],
lazy: true,
level
};
}
}, childrenColumnName.value, lazyColumnIdentifier.value, lazy.value);
return res;
};
const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll) => {
var _a, _b;
ifExpandAll || (ifExpandAll = (_a = instance.store) == null ? void 0 : _a.states.defaultExpandAll.value);
const nested = normalizedData.value;
const normalizedLazyNode_ = normalizedLazyNode.value;
const keys = Object.keys(nested);
const newTreeData = {};
if (keys.length) {
const oldTreeData = vue.unref(treeData);
const rootLazyRowKeys = [];
const getExpanded = (oldValue, key) => {
if (ifChangeExpandRowKeys) {
if (expandRowKeys.value) {
return ifExpandAll || expandRowKeys.value.includes(key);
} else {
return !!(ifExpandAll || (oldValue == null ? void 0 : oldValue.expanded));
}
} else {
const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key);
return !!((oldValue == null ? void 0 : oldValue.expanded) || included);
}
};
keys.forEach((key) => {
const oldValue = oldTreeData[key];
const newValue = { ...nested[key] };
newValue.expanded = getExpanded(oldValue, key);
if (newValue.lazy) {
const { loaded = false, loading = false } = oldValue || {};
newValue.loaded = !!loaded;
newValue.loading = !!loading;
rootLazyRowKeys.push(key);
}
newTreeData[key] = newValue;
});
const lazyKeys = Object.keys(normalizedLazyNode_);
if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
lazyKeys.forEach((key) => {
var _a2;
const oldValue = oldTreeData[key];
const lazyNodeChildren = normalizedLazyNode_[key].children;
if (rootLazyRowKeys.includes(key)) {
if (((_a2 = newTreeData[key].children) == null ? void 0 : _a2.length) !== 0) {
throw new Error("[ElTable]children must be an empty array.");
}
newTreeData[key].children = lazyNodeChildren;
} else {
const { loaded = false, loading = false } = oldValue || {};
newTreeData[key] = {
lazy: true,
loaded: !!loaded,
loading: !!loading,
expanded: getExpanded(oldValue, key),
children: lazyNodeChildren,
level: void 0
};
}
});
}
}
treeData.value = newTreeData;
(_b = instance.store) == null ? void 0 : _b.updateTableScrollY();
};
vue.watch(() => expandRowKeys.value, () => {
updateTreeData(true);
});
vue.watch(() => normalizedData.value, () => {
updateTreeData();
});
vue.watch(() => normalizedLazyNode.value, () => {
updateTreeData();
});
const updateTreeExpandKeys = (value) => {
expandRowKeys.value = value;
updateTreeData();
};
const isUseLazy = (data) => {
return lazy.value && data && "loaded" in data && !data.loaded;
};
const toggleTreeExpansion = (row, expanded) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = util.getRowIdentity(row, rowKey);
const data = id && treeData.value[id];
if (id && data && "expanded" in data) {
const oldExpanded = data.expanded;
expanded = types.isUndefined(expanded) ? !data.expanded : expanded;
treeData.value[id].expanded = expanded;
if (oldExpanded !== expanded) {
instance.emit("expand-change", row, expanded);
}
isUseLazy(data) && loadData(row, id, data);
instance.store.updateTableScrollY();
}
};
const loadOrToggle = (row) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = util.getRowIdentity(row, rowKey);
const data = treeData.value[id];
if (isUseLazy(data)) {
loadData(row, id, data);
} else {
toggleTreeExpansion(row, void 0);
}
};
const loadData = (row, key, treeNode) => {
const { load } = instance.props;
if (load && !treeData.value[key].loaded) {
treeData.value[key].loading = true;
load(row, treeNode, (data) => {
if (!shared.isArray(data)) {
throw new TypeError("[ElTable] data must be an array");
}
treeData.value[key].loading = false;
treeData.value[key].loaded = true;
treeData.value[key].expanded = true;
if (data.length) {
lazyTreeNodeMap.value[key] = data;
}
instance.emit("expand-change", row, true);
});
}
};
const updateKeyChildren = (key, data) => {
const { lazy: lazy2, rowKey } = instance.props;
if (!lazy2)
return;
if (!rowKey)
throw new Error("[Table] rowKey is required in updateKeyChild");
if (lazyTreeNodeMap.value[key]) {
lazyTreeNodeMap.value[key] = data;
}
};
return {
loadData,
loadOrToggle,
toggleTreeExpansion,
updateTreeExpandKeys,
updateTreeData,
updateKeyChildren,
normalize,
states: {
expandRowKeys,
treeData,
indent,
lazy,
lazyTreeNodeMap,
lazyColumnIdentifier,
childrenColumnName,
checkStrictly
}
};
}
exports["default"] = useTree;
//# sourceMappingURL=tree.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,80 @@
import type { Ref } from 'vue';
import type { TableColumnCtx } from '../table-column/defaults';
import type { DefaultRow, TableSortOrder } from '../table/defaults';
import type { StoreFilter } from '.';
declare function useWatcher<T extends DefaultRow>(): {
assertRowKey: () => void;
updateColumns: () => void;
scheduleLayout: (needUpdateColumns?: boolean, immediate?: boolean) => void;
isSelected: (row: T) => boolean;
clearSelection: () => void;
cleanSelection: () => void;
getSelectionRows: () => T[];
toggleRowSelection: (row: T, selected?: boolean, emitChange?: boolean, ignoreSelectable?: boolean) => void;
_toggleAllSelection: () => void;
toggleAllSelection: (() => void) | null;
updateAllSelected: () => void;
updateFilters: (column: TableColumnCtx<T>, values: string[]) => Record<string, string[]>;
updateCurrentRow: (_currentRow: T) => void;
updateSort: (column: TableColumnCtx<T> | null, prop: string | null, order: TableSortOrder | null) => void;
execFilter: () => void;
execSort: () => void;
execQuery: (ignore?: {
filter: boolean;
} | undefined) => void;
clearFilter: (columnKeys?: string[] | string) => void;
clearSort: () => void;
toggleRowExpansion: (row: T, expanded?: boolean) => void;
setExpandRowKeysAdapter: (val: string[]) => void;
setCurrentRowKey: (key: string) => void;
toggleRowExpansionAdapter: (row: T, expanded?: boolean) => void;
isRowExpanded: (row: T) => boolean;
updateExpandRows: () => void;
updateCurrentRowData: () => void;
loadOrToggle: (row: T) => void;
updateTreeData: (ifChangeExpandRowKeys?: boolean, ifExpandAll?: boolean) => void;
updateKeyChildren: (key: string, data: T[]) => void;
states: {
_currentRowKey: Ref<string | null>;
currentRow: Ref<T | null>;
expandRowKeys: Ref<string[]>;
treeData: Ref<Record<string, import("./tree").TreeData>>;
indent: Ref<number>;
lazy: Ref<boolean>;
lazyTreeNodeMap: Ref<Record<string, T[]>>;
lazyColumnIdentifier: Ref<string>;
childrenColumnName: Ref<string>;
checkStrictly: Ref<boolean>;
expandRows: Ref<T[]>;
defaultExpandAll: Ref<boolean>;
tableSize: Ref<any>;
rowKey: Ref<string | null>;
data: Ref<T[]>;
_data: Ref<T[]>;
isComplex: Ref<boolean>;
_columns: Ref<TableColumnCtx<T>[]>;
originColumns: Ref<TableColumnCtx<T>[]>;
columns: Ref<TableColumnCtx<T>[]>;
fixedColumns: Ref<TableColumnCtx<T>[]>;
rightFixedColumns: Ref<TableColumnCtx<T>[]>;
leafColumns: Ref<TableColumnCtx<T>[]>;
fixedLeafColumns: Ref<TableColumnCtx<T>[]>;
rightFixedLeafColumns: Ref<TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: Ref<number>;
fixedLeafColumnsLength: Ref<number>;
rightFixedLeafColumnsLength: Ref<number>;
isAllSelected: Ref<boolean>;
selection: Ref<T[]>;
reserveSelection: Ref<boolean>;
selectOnIndeterminate: Ref<boolean>;
selectable: Ref<((row: T, index: number) => boolean) | null>;
filters: Ref<StoreFilter>;
filteredData: Ref<T[] | null>;
sortingColumn: Ref<TableColumnCtx<T> | null>;
sortProp: Ref<string | null>;
sortOrder: Ref<string | number | null>;
hoverRow: Ref<T | null>;
};
};
export default useWatcher;

View File

@@ -0,0 +1,453 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
var expand = require('./expand.js');
var current = require('./current.js');
var tree = require('./tree.js');
var shared = require('@vue/shared');
var lodashUnified = require('lodash-unified');
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
if (!sortingColumn || shared.isString(sortingColumn.sortable)) {
return data;
}
return util.orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
};
const doFlattenColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children && column.children.length > 0) {
result.push.apply(result, doFlattenColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
function useWatcher() {
var _a;
const instance = vue.getCurrentInstance();
const { size: tableSize } = vue.toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
const rowKey = vue.ref(null);
const data = vue.ref([]);
const _data = vue.ref([]);
const isComplex = vue.ref(false);
const _columns = vue.ref([]);
const originColumns = vue.ref([]);
const columns = vue.ref([]);
const fixedColumns = vue.ref([]);
const rightFixedColumns = vue.ref([]);
const leafColumns = vue.ref([]);
const fixedLeafColumns = vue.ref([]);
const rightFixedLeafColumns = vue.ref([]);
const updateOrderFns = [];
const leafColumnsLength = vue.ref(0);
const fixedLeafColumnsLength = vue.ref(0);
const rightFixedLeafColumnsLength = vue.ref(0);
const isAllSelected = vue.ref(false);
const selection = vue.ref([]);
const reserveSelection = vue.ref(false);
const selectOnIndeterminate = vue.ref(false);
const selectable = vue.ref(null);
const filters = vue.ref({});
const filteredData = vue.ref(null);
const sortingColumn = vue.ref(null);
const sortProp = vue.ref(null);
const sortOrder = vue.ref(null);
const hoverRow = vue.ref(null);
const selectedMap = vue.computed(() => {
return rowKey.value ? util.getKeysMap(selection.value, rowKey.value) : void 0;
});
vue.watch(data, () => {
var _a2;
if (instance.state) {
scheduleLayout(false);
const needUpdateFixed = instance.props.tableLayout === "auto";
if (needUpdateFixed) {
(_a2 = instance.refs.tableHeaderRef) == null ? void 0 : _a2.updateFixedColumnStyle();
}
}
}, {
deep: true
});
const assertRowKey = () => {
if (!rowKey.value)
throw new Error("[ElTable] prop row-key is required");
};
const updateChildFixed = (column) => {
var _a2;
(_a2 = column.children) == null ? void 0 : _a2.forEach((childColumn) => {
childColumn.fixed = column.fixed;
updateChildFixed(childColumn);
});
};
const updateColumns = () => {
_columns.value.forEach((column) => {
updateChildFixed(column);
});
fixedColumns.value = _columns.value.filter((column) => [true, "left"].includes(column.fixed));
const selectColumn = _columns.value.find((column) => column.type === "selection");
let selectColFixLeft;
if (selectColumn && selectColumn.fixed !== "right" && !fixedColumns.value.includes(selectColumn)) {
const selectColumnIndex = _columns.value.indexOf(selectColumn);
if (selectColumnIndex === 0 && fixedColumns.value.length) {
fixedColumns.value.unshift(selectColumn);
selectColFixLeft = true;
}
}
rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
const notFixedColumns = _columns.value.filter((column) => (selectColFixLeft ? column.type !== "selection" : true) && !column.fixed);
originColumns.value = Array.from(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
const leafColumns2 = doFlattenColumns(notFixedColumns);
const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns2.length;
fixedLeafColumnsLength.value = fixedLeafColumns2.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
columns.value = Array.from(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2);
isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
instance.state.doLayout();
} else {
instance.state.debouncedUpdateLayout();
}
};
const isSelected = (row) => {
if (selectedMap.value) {
return !!selectedMap.value[util.getRowIdentity(row, rowKey.value)];
} else {
return selection.value.includes(row);
}
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
selection.value = [];
if (oldSelection.length) {
instance.emit("selection-change", []);
}
};
const cleanSelection = () => {
var _a2, _b;
let deleted;
if (rowKey.value) {
deleted = [];
const childrenKey = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value;
const dataMap = util.getKeysMap(data.value, rowKey.value, true, childrenKey);
for (const key in selectedMap.value) {
if (shared.hasOwn(selectedMap.value, key) && !dataMap[key]) {
deleted.push(selectedMap.value[key].row);
}
}
} else {
deleted = selection.value.filter((item) => !data.value.includes(item));
}
if (deleted.length) {
const newSelection = selection.value.filter((item) => !deleted.includes(item));
selection.value = newSelection;
instance.emit("selection-change", newSelection.slice());
}
};
const getSelectionRows = () => {
return (selection.value || []).slice();
};
const toggleRowSelection = (row, selected, emitChange = true, ignoreSelectable = false) => {
var _a2, _b, _c, _d;
const treeProps = {
children: (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.childrenColumnName.value,
checkStrictly: (_d = (_c = instance == null ? void 0 : instance.store) == null ? void 0 : _c.states) == null ? void 0 : _d.checkStrictly.value
};
const changed = util.toggleRowStatus(selection.value, row, selected, treeProps, ignoreSelectable ? void 0 : selectable.value, data.value.indexOf(row), rowKey.value);
if (changed) {
const newSelection = (selection.value || []).slice();
if (emitChange) {
instance.emit("select", newSelection, row);
}
instance.emit("selection-change", newSelection);
}
};
const _toggleAllSelection = () => {
var _a2, _b;
const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value;
const { childrenColumnName } = instance.store.states;
const treeProps = {
children: childrenColumnName.value,
checkStrictly: false
};
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount;
if (util.toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex, rowKey2)) {
selectionChanged = true;
}
childrenCount += getChildrenCount(util.getRowIdentity(row, rowKey2));
});
if (selectionChanged) {
instance.emit("selection-change", selection.value ? selection.value.slice() : []);
}
instance.emit("select-all", (selection.value || []).slice());
};
const updateAllSelected = () => {
var _a2;
if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
isAllSelected.value = false;
return;
}
const { childrenColumnName } = instance.store.states;
let rowIndex = 0;
let selectedCount = 0;
const checkSelectedStatus = (data2) => {
var _a3;
for (const row of data2) {
const isRowSelectable = selectable.value && selectable.value.call(null, row, rowIndex);
if (!isSelected(row)) {
if (!selectable.value || isRowSelectable) {
return false;
}
} else {
selectedCount++;
}
rowIndex++;
if (((_a3 = row[childrenColumnName.value]) == null ? void 0 : _a3.length) && !checkSelectedStatus(row[childrenColumnName.value])) {
return false;
}
}
return true;
};
const isAllSelected_ = checkSelectedStatus(data.value || []);
isAllSelected.value = selectedCount === 0 ? false : isAllSelected_;
};
const getChildrenCount = (rowKey2) => {
var _a2;
if (!instance || !instance.store)
return 0;
const { treeData } = instance.store.states;
let count = 0;
const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const updateFilters = (column, values) => {
const filters_ = {};
lodashUnified.castArray(column).forEach((col) => {
filters.value[col.id] = values;
filters_[col.columnKey || col.id] = values;
});
return filters_;
};
const updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const execFilter = () => {
let sourceData = vue.unref(_data);
Object.keys(filters.value).forEach((columnId) => {
const values = filters.value[columnId];
if (!values || values.length === 0)
return;
const column = util.getColumnById({
columns: columns.value
}, columnId);
if (column && column.filterMethod) {
sourceData = sourceData.filter((row) => {
return values.some((value) => column.filterMethod.call(null, value, row, column));
});
}
});
filteredData.value = sourceData;
};
const execSort = () => {
var _a2;
data.value = sortData((_a2 = filteredData.value) != null ? _a2 : [], {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value
});
};
const execQuery = (ignore = void 0) => {
if (!(ignore == null ? void 0 : ignore.filter)) {
execFilter();
}
execSort();
};
const clearFilter = (columnKeys) => {
const { tableHeaderRef } = instance.refs;
if (!tableHeaderRef)
return;
const panels = Object.assign({}, tableHeaderRef.filterPanels);
const keys = Object.keys(panels);
if (!keys.length)
return;
if (shared.isString(columnKeys)) {
columnKeys = [columnKeys];
}
if (shared.isArray(columnKeys)) {
const columns_ = columnKeys.map((key) => util.getColumnByKey({
columns: columns.value
}, key));
keys.forEach((key) => {
const column = columns_.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
instance.store.commit("filterChange", {
column: columns_,
values: [],
silent: true,
multi: true
});
} else {
keys.forEach((key) => {
const column = columns.value.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
instance.store.commit("filterChange", {
column: {},
values: [],
silent: true
});
}
};
const clearSort = () => {
if (!sortingColumn.value)
return;
updateSort(null, null, null);
instance.store.commit("changeSortCondition", {
silent: true
});
};
const {
setExpandRowKeys,
toggleRowExpansion,
updateExpandRows,
states: expandStates,
isRowExpanded
} = expand["default"]({
data,
rowKey
});
const {
updateTreeExpandKeys,
toggleTreeExpansion,
updateTreeData,
updateKeyChildren,
loadOrToggle,
states: treeStates
} = tree["default"]({
data,
rowKey
});
const {
updateCurrentRowData,
updateCurrentRow,
setCurrentRowKey,
states: currentData
} = current["default"]({
data,
rowKey
});
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
} else {
toggleTreeExpansion(row, expanded);
}
};
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
getSelectionRows,
toggleRowSelection,
_toggleAllSelection,
toggleAllSelection: null,
updateAllSelected,
updateFilters,
updateCurrentRow,
updateSort,
execFilter,
execSort,
execQuery,
clearFilter,
clearSort,
toggleRowExpansion,
setExpandRowKeysAdapter,
setCurrentRowKey,
toggleRowExpansionAdapter,
isRowExpanded,
updateExpandRows,
updateCurrentRowData,
loadOrToggle,
updateTreeData,
updateKeyChildren,
states: {
tableSize,
rowKey,
data,
_data,
isComplex,
_columns,
originColumns,
columns,
fixedColumns,
rightFixedColumns,
leafColumns,
fixedLeafColumns,
rightFixedLeafColumns,
updateOrderFns,
leafColumnsLength,
fixedLeafColumnsLength,
rightFixedLeafColumnsLength,
isAllSelected,
selection,
reserveSelection,
selectOnIndeterminate,
selectable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow,
...expandStates,
...treeStates,
...currentData
}
};
}
exports["default"] = useWatcher;
//# sourceMappingURL=watcher.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,39 @@
import type { PropType } from 'vue';
import type { Store } from '../store';
import type { ColumnCls, ColumnStyle, DefaultRow, Table } from '../table/defaults';
import type { TableOverflowTooltipOptions } from '../util';
interface TableBodyProps<T extends DefaultRow> {
store: Store<T>;
stripe?: boolean;
context: Table<T>;
rowClassName: ColumnCls<T>;
rowStyle: ColumnStyle<T>;
fixed: string;
highlight: boolean;
tooltipEffect?: string;
tooltipOptions?: TableOverflowTooltipOptions;
}
declare const defaultProps: {
store: {
required: boolean;
type: PropType<TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: PropType<TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: PropType<TableBodyProps<any>["context"]>;
};
rowClassName: PropType<TableBodyProps<any>["rowClassName"]>;
rowStyle: PropType<TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
};
export { TableBodyProps };
export default defaultProps;

View File

@@ -0,0 +1,29 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const defaultProps = {
store: {
required: true,
type: Object
},
stripe: Boolean,
tooltipEffect: String,
tooltipOptions: {
type: Object
},
context: {
default: () => ({}),
type: Object
},
rowClassName: [String, Function],
rowStyle: [Object, Function],
fixed: {
type: String,
default: ""
},
highlight: Boolean
};
exports["default"] = defaultProps;
//# sourceMappingURL=defaults.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"defaults.js","sources":["../../../../../../../packages/components/table/src/table-body/defaults.ts"],"sourcesContent":["import type { PropType } from 'vue'\nimport type { Store } from '../store'\nimport type {\n ColumnCls,\n ColumnStyle,\n DefaultRow,\n Table,\n} from '../table/defaults'\nimport type { TableOverflowTooltipOptions } from '../util'\n\ninterface TableBodyProps<T extends DefaultRow> {\n store: Store<T>\n stripe?: boolean\n context: Table<T>\n rowClassName: ColumnCls<T>\n rowStyle: ColumnStyle<T>\n fixed: string\n highlight: boolean\n tooltipEffect?: string\n tooltipOptions?: TableOverflowTooltipOptions\n}\n\nconst defaultProps = {\n store: {\n required: true,\n type: Object as PropType<TableBodyProps<any>['store']>,\n },\n stripe: Boolean,\n tooltipEffect: String,\n tooltipOptions: {\n type: Object as PropType<TableBodyProps<any>['tooltipOptions']>,\n },\n context: {\n default: () => ({}),\n type: Object as PropType<TableBodyProps<any>['context']>,\n },\n rowClassName: [String, Function] as PropType<\n TableBodyProps<any>['rowClassName']\n >,\n rowStyle: [Object, Function] as PropType<TableBodyProps<any>['rowStyle']>,\n fixed: {\n type: String,\n default: '',\n },\n highlight: Boolean,\n}\n\nexport { TableBodyProps }\nexport default defaultProps\n"],"names":[],"mappings":";;;;AAAK,MAAC,YAAY,GAAG;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,IAAI;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,aAAa,EAAE,MAAM;AACvB,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAClC,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB;;;;"}

View File

@@ -0,0 +1,17 @@
import type { TableBodyProps } from './defaults';
import type { TableOverflowTooltipOptions } from '../util';
import type { DefaultRow } from '../table/defaults';
declare function useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
handleDoubleClick: (event: Event, row: T) => void;
handleClick: (event: Event, row: T) => void;
handleContextMenu: (event: Event, row: T) => void;
handleMouseEnter: import("lodash").DebouncedFunc<(index: number) => void>;
handleMouseLeave: import("lodash").DebouncedFunc<() => void>;
handleCellMouseEnter: (event: MouseEvent, row: T, tooltipOptions: TableOverflowTooltipOptions) => void;
handleCellMouseLeave: (event: MouseEvent) => void;
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
export default useEvents;

View File

@@ -0,0 +1,150 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var util = require('../util.js');
var tokens = require('../tokens.js');
var style = require('../../../../utils/dom/style.js');
function isGreaterThan(a, b, epsilon = 0.03) {
return a - b > epsilon;
}
function useEvents(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const tooltipContent = vue.ref("");
const tooltipTrigger = vue.ref(vue.h("div"));
const handleEvent = (event, row, name) => {
var _a, _b, _c;
const table = parent;
const cell = util.getCell(event);
let column = null;
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
if (cell) {
column = util.getColumnByCell({
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
}, cell, namespace);
if (column) {
table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
}
}
table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, "dblclick");
};
const handleClick = (event, row) => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
handleEvent(event, row, "click");
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, "contextmenu");
};
const handleMouseEnter = lodashUnified.debounce((index) => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
}, 30);
const handleMouseLeave = lodashUnified.debounce(() => {
var _a;
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
}, 30);
const getPadding = (el) => {
const style = window.getComputedStyle(el, null);
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
return {
left: paddingLeft,
right: paddingRight,
top: paddingTop,
bottom: paddingBottom
};
};
const toggleRowClassByCell = (rowSpan, event, toggle) => {
var _a;
let node = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.parentNode;
while (rowSpan > 1) {
node = node == null ? void 0 : node.nextSibling;
if (!node || node.nodeName !== "TR")
break;
toggle(node, "hover-row hover-fixed-row");
rowSpan--;
}
};
const handleCellMouseEnter = (event, row, tooltipOptions) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (!parent)
return;
const table = parent;
const cell = util.getCell(event);
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
let column = null;
if (cell) {
column = util.getColumnByCell({
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
}, cell, namespace);
if (!column) {
return;
}
if (cell.rowSpan > 1) {
toggleRowClassByCell(cell.rowSpan, event, style.addClass);
}
const hoverState = table.hoverState = {
cell,
column,
row
};
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
}
if (!tooltipOptions) {
if (((_d = util.removePopper) == null ? void 0 : _d.trigger) === cell) {
(_e = util.removePopper) == null ? void 0 : _e();
}
return;
}
const cellChild = event.target.querySelector(".cell");
if (!(style.hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length)) {
return;
}
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
const { top, left, right, bottom } = getPadding(cellChild);
const horizontalPadding = left + right;
const verticalPadding = top + bottom;
if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
util.createTablePopper(tooltipOptions, (_f = (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent)) != null ? _f : "", row, column, cell, table);
} else if (((_g = util.removePopper) == null ? void 0 : _g.trigger) === cell) {
(_h = util.removePopper) == null ? void 0 : _h();
}
};
const handleCellMouseLeave = (event) => {
const cell = util.getCell(event);
if (!cell)
return;
if (cell.rowSpan > 1) {
toggleRowClassByCell(cell.rowSpan, event, style.removeClass);
}
const oldHoverState = parent == null ? void 0 : parent.hoverState;
parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
};
}
exports["default"] = useEvents;
//# sourceMappingURL=events-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
import type { VNode } from 'vue';
declare const _default: import("vue").DefineComponent<{
store: {
required: boolean;
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
};
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
onColumnsChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
onScrollableChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
wrappedRowRender: (row: any, $index: number) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
store: {
required: boolean;
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
};
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}>>, {
fixed: string;
highlight: boolean;
stripe: boolean;
context: import("element-plus").Table<any>;
}>;
export default _default;

View File

@@ -0,0 +1,101 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var layoutObserver = require('../layout-observer.js');
var util = require('../util.js');
var tokens = require('../tokens.js');
var renderHelper = require('./render-helper.js');
var defaults = require('./defaults.js');
var index = require('../../../../hooks/use-namespace/index.js');
var style = require('../../../../utils/dom/style.js');
var core = require('@vueuse/core');
var raf = require('../../../../utils/raf.js');
var TableBody = vue.defineComponent({
name: "ElTableBody",
props: defaults["default"],
setup(props) {
var _a;
const instance = vue.getCurrentInstance();
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index.useNamespace("table");
const { wrappedRowRender, tooltipContent, tooltipTrigger } = renderHelper["default"](props);
const { onColumnsChange, onScrollableChange } = layoutObserver["default"](parent);
const hoveredCellList = [];
vue.watch((_a = props.store) == null ? void 0 : _a.states.hoverRow, (newVal, oldVal) => {
var _a2, _b;
const el = instance == null ? void 0 : instance.vnode.el;
const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`));
let rowNum = newVal;
const childNodes = (_a2 = rows[rowNum]) == null ? void 0 : _a2.childNodes;
if (childNodes == null ? void 0 : childNodes.length) {
let control = 0;
const indexes = Array.from(childNodes).reduce((acc, item, index) => {
var _a3, _b2;
if (((_a3 = childNodes[index]) == null ? void 0 : _a3.colSpan) > 1) {
control = (_b2 = childNodes[index]) == null ? void 0 : _b2.colSpan;
}
if (item.nodeName !== "TD" && control === 0) {
acc.push(index);
}
control > 0 && control--;
return acc;
}, []);
indexes.forEach((rowIndex) => {
var _a3;
rowNum = newVal;
while (rowNum > 0) {
const preChildNodes = (_a3 = rows[rowNum - 1]) == null ? void 0 : _a3.childNodes;
if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
style.addClass(preChildNodes[rowIndex], "hover-cell");
hoveredCellList.push(preChildNodes[rowIndex]);
break;
}
rowNum--;
}
});
} else {
hoveredCellList.forEach((item) => style.removeClass(item, "hover-cell"));
hoveredCellList.length = 0;
}
if (!((_b = props.store) == null ? void 0 : _b.states.isComplex.value) || !core.isClient)
return;
raf.rAF(() => {
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) {
style.removeClass(oldRow, "hover-row");
}
if (newRow) {
style.addClass(newRow, "hover-row");
}
});
});
vue.onUnmounted(() => {
var _a2;
(_a2 = util.removePopper) == null ? void 0 : _a2();
});
return {
ns,
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
},
render() {
const { wrappedRowRender, store } = this;
const data = (store == null ? void 0 : store.states.data.value) || [];
return vue.h("tbody", { tabIndex: -1 }, [
data.reduce((acc, row) => {
return acc.concat(wrappedRowRender(row, acc.length));
}, [])
]);
}
});
exports["default"] = TableBody;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,16 @@
import type { TableBodyProps } from './defaults';
import type { DefaultRow } from '../table/defaults';
declare function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
wrappedRowRender: (row: T, $index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[] | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: import("vue").Ref<string>;
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
export default useRender;

View File

@@ -0,0 +1,230 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var util = require('../util.js');
var tokens = require('../tokens.js');
var eventsHelper = require('./events-helper.js');
var stylesHelper = require('./styles-helper.js');
var tdWrapper = require('./td-wrapper.js');
var index = require('../../../../hooks/use-namespace/index.js');
var types = require('../../../../utils/types.js');
function useRender(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index.useNamespace("table");
const {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
} = eventsHelper["default"](props);
const {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
} = stylesHelper["default"](props);
let displayIndex = -1;
const firstDefaultColumnIndex = vue.computed(() => {
var _a;
return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
});
const getKeyOfRow = (row, index) => {
var _a;
const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
if (rowKey) {
return util.getRowIdentity(row, rowKey);
}
return index;
};
const rowRender = (row, $index, treeRowData, expanded = false) => {
const { tooltipEffect, tooltipOptions, store } = props;
const { indent, columns } = store.states;
const rowClasses = [];
let display = true;
if (treeRowData) {
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
display = !!treeRowData.display;
}
if ($index === 0) {
displayIndex = -1;
}
if (props.stripe && display) {
displayIndex++;
}
rowClasses.push(...getRowClass(row, $index, displayIndex));
const displayStyle = display ? null : { display: "none" };
return vue.h("tr", {
style: [displayStyle, getRowStyle(row, $index)],
class: rowClasses,
key: getKeyOfRow(row, $index),
onDblclick: ($event) => handleDoubleClick($event, row),
onClick: ($event) => handleClick($event, row),
onContextmenu: ($event) => handleContextMenu($event, row),
onMouseenter: () => handleMouseEnter($index),
onMouseleave: handleMouseLeave
}, columns.value.map((column, cellIndex) => {
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
if (!rowspan || !colspan) {
return null;
}
const columnData = Object.assign({}, column);
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
const data = {
store,
_self: props.context || parent,
column: columnData,
row,
$index,
cellIndex,
expanded
};
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
data.treeNode = {
indent: treeRowData.level && treeRowData.level * indent.value,
level: treeRowData.level
};
if (types.isBoolean(treeRowData.expanded)) {
data.treeNode.expanded = treeRowData.expanded;
if ("loading" in treeRowData) {
data.treeNode.loading = treeRowData.loading;
}
if ("noLazyChildren" in treeRowData) {
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
}
}
}
const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
const mergedTooltipOptions = column.showOverflowTooltip && lodashUnified.merge({
effect: tooltipEffect
}, tooltipOptions, column.showOverflowTooltip);
return vue.h(tdWrapper["default"], {
style: getCellStyle($index, cellIndex, row, column),
class: getCellClass($index, cellIndex, row, column, colspan - 1),
key: `${patchKey}${baseKey}`,
rowspan,
colspan,
onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
onMouseleave: handleCellMouseLeave
}, {
default: () => cellChildren(cellIndex, column, data)
});
}));
};
const cellChildren = (_cellIndex, column, data) => {
return column.renderCell(data);
};
const wrappedRowRender = (row, $index) => {
const store = props.store;
const { isRowExpanded, assertRowKey } = store;
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
const columns = store.states.columns.value;
const hasExpandColumn = columns.some(({ type }) => type === "expand");
if (hasExpandColumn) {
const expanded = isRowExpanded(row);
const tr = rowRender(row, $index, void 0, expanded);
const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
if (!renderExpanded) {
console.error("[Element Error]renderExpanded is required.");
return tr;
}
const rows = [[tr]];
if (parent.props.preserveExpandedContent || expanded) {
rows[0].push(vue.h("tr", {
key: `expanded-row__${tr.key}`,
style: { display: expanded ? "" : "none" }
}, [
vue.h("td", {
colspan: columns.length,
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
}, [renderExpanded({ row, $index, store, expanded })])
]));
}
return rows;
} else if (Object.keys(treeData.value).length) {
assertRowKey();
const key = util.getRowIdentity(row, rowKey.value);
let cur = treeData.value[key];
let treeRowData = null;
if (cur) {
treeRowData = {
expanded: cur.expanded,
level: cur.level,
display: true,
noLazyChildren: void 0,
loading: void 0
};
if (types.isBoolean(cur.lazy)) {
if (treeRowData && types.isBoolean(cur.loaded) && cur.loaded) {
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
if (cur) {
let i = 0;
const traverse = (children, parent2) => {
if (!(children && children.length && parent2))
return;
children.forEach((node) => {
const innerTreeRowData = {
display: parent2.display && parent2.expanded,
level: parent2.level + 1,
expanded: false,
noLazyChildren: false,
loading: false
};
const childKey = util.getRowIdentity(node, rowKey.value);
if (types.isPropAbsent(childKey)) {
throw new Error("For nested data item, row-key is required.");
}
cur = { ...treeData.value[childKey] };
if (cur) {
innerTreeRowData.expanded = cur.expanded;
cur.level = cur.level || innerTreeRowData.level;
cur.display = !!(cur.expanded && innerTreeRowData.display);
if (types.isBoolean(cur.lazy)) {
if (types.isBoolean(cur.loaded) && cur.loaded) {
innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
}
innerTreeRowData.loading = cur.loading;
}
}
i++;
tmp.push(rowRender(node, $index + i, innerTreeRowData));
if (cur) {
const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
traverse(nodes2, cur);
}
});
};
cur.display = true;
const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
traverse(nodes, cur);
}
return tmp;
} else {
return rowRender(row, $index, void 0);
}
};
return {
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
}
exports["default"] = useRender;
//# sourceMappingURL=render-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import type { TableColumnCtx } from '../table-column/defaults';
import type { TableBodyProps } from './defaults';
import type { DefaultRow } from '../table/defaults';
declare function useStyles<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
getRowStyle: (row: T, rowIndex: number) => any;
getRowClass: (row: T, rowIndex: number, displayIndex: number) => string[];
getCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => import("vue").CSSProperties;
getCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>, offset: number) => string;
getSpan: (row: T, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number) => {
rowspan: number;
colspan: number;
};
getColspanRealWidth: (columns: TableColumnCtx<T>[], colspan: number, index: number) => number;
};
export default useStyles;

View File

@@ -0,0 +1,116 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
var tokens = require('../tokens.js');
var index = require('../../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
function useStyles(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index.useNamespace("table");
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent == null ? void 0 : parent.props.rowStyle;
if (shared.isFunction(rowStyle)) {
return rowStyle.call(null, {
row,
rowIndex
});
}
return rowStyle || null;
};
const getRowClass = (row, rowIndex, displayIndex) => {
var _a;
const classes = [ns.e("row")];
if ((parent == null ? void 0 : parent.props.highlightCurrentRow) && row === ((_a = props.store) == null ? void 0 : _a.states.currentRow.value)) {
classes.push("current-row");
}
if (props.stripe && displayIndex % 2 === 1) {
classes.push(ns.em("row", "striped"));
}
const rowClassName = parent == null ? void 0 : parent.props.rowClassName;
if (shared.isString(rowClassName)) {
classes.push(rowClassName);
} else if (shared.isFunction(rowClassName)) {
classes.push(rowClassName.call(null, {
row,
rowIndex
}));
}
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent == null ? void 0 : parent.props.cellStyle;
let cellStyles = cellStyle != null ? cellStyle : {};
if (shared.isFunction(cellStyle)) {
cellStyles = cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column
});
}
const fixedStyle = util.getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
util.ensurePosition(fixedStyle, "left");
util.ensurePosition(fixedStyle, "right");
return Object.assign({}, cellStyles, fixedStyle);
};
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
const fixedClasses = util.getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
const classes = [column.id, column.align, column.className, ...fixedClasses];
const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
if (shared.isString(cellClassName)) {
classes.push(cellClassName);
} else if (shared.isFunction(cellClassName)) {
classes.push(cellClassName.call(null, {
rowIndex,
columnIndex,
row,
column
}));
}
classes.push(ns.e("cell"));
return classes.filter((className) => Boolean(className)).join(" ");
};
const getSpan = (row, column, rowIndex, columnIndex) => {
let rowspan = 1;
let colspan = 1;
const fn = parent == null ? void 0 : parent.props.spanMethod;
if (shared.isFunction(fn)) {
const result = fn({
row,
column,
rowIndex,
columnIndex
});
if (shared.isArray(result)) {
rowspan = result[0];
colspan = result[1];
} else if (shared.isObject(result)) {
rowspan = result.rowspan;
colspan = result.colspan;
}
}
return { rowspan, colspan };
};
const getColspanRealWidth = (columns, colspan, index) => {
if (colspan < 1) {
return columns[index].realWidth;
}
const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
};
return {
getRowStyle,
getRowClass,
getCellStyle,
getCellClass,
getSpan,
getColspanRealWidth
};
}
exports["default"] = useStyles;
//# sourceMappingURL=styles-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,37 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
const __default__ = vue.defineComponent({
name: "TableTdWrapper"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
colspan: {
type: Number,
default: 1
},
rowspan: {
type: Number,
default: 1
}
},
setup(__props) {
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("td", {
colspan: __props.colspan,
rowspan: __props.rowspan
}, [
vue.renderSlot(_ctx.$slots, "default")
], 8, ["colspan", "rowspan"]);
};
}
});
var TdWrapper = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "td-wrapper.vue"]]);
exports["default"] = TdWrapper;
//# sourceMappingURL=td-wrapper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"td-wrapper.js","sources":["../../../../../../../packages/components/table/src/table-body/td-wrapper.vue"],"sourcesContent":["<template>\n <td :colspan=\"colspan\" :rowspan=\"rowspan\"><slot /></td>\n</template>\n\n<script setup lang=\"ts\">\ndefineOptions({\n name: 'TableTdWrapper',\n})\n\ndefineProps({\n colspan: {\n type: Number,\n default: 1,\n },\n rowspan: {\n type: Number,\n default: 1,\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;uCAKc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,32 @@
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}>>, {
rowspan: number;
colspan: number;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,223 @@
import type { ComponentInternalInstance, PropType, Ref, VNode } from 'vue';
import type { DefaultRow, Table, TableSortOrder } from '../table/defaults';
import type { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from '../util';
import type { Store } from '../store';
type CI<T extends DefaultRow> = {
column: TableColumnCtx<T>;
$index: number;
store: Store<T>;
_self: any;
};
type Filters = {
text: string;
value: string;
}[];
type FilterMethods<T extends DefaultRow> = (value: string, row: T, column: TableColumnCtx<T>) => void;
type ValueOf<T> = T[keyof T];
type TableColumnCtx<T extends DefaultRow = DefaultRow> = {
id: string;
realWidth: number | null;
type: string;
label: string;
className: string;
labelClassName: string;
property: string;
prop: string;
width?: string | number;
minWidth: string | number;
renderHeader: (data: CI<T>) => VNode;
sortable: boolean | string;
sortMethod: (a: T, b: T) => number;
sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[];
resizable: boolean;
columnKey: string;
rawColumnKey: string;
align: string;
headerAlign: string;
showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
tooltipFormatter?: TableOverflowTooltipFormatter<T>;
fixed: boolean | string;
formatter: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode | string;
selectable: (row: T, index: number) => boolean;
reserveSelection: boolean;
filterMethod: FilterMethods<T>;
filteredValue: string[];
filters: Filters;
filterPlacement: string;
filterMultiple: boolean;
filterClassName: string;
index: number | ((index: number) => number);
sortOrders: (TableSortOrder | null)[];
renderCell: (data: any) => VNode | VNode[];
colSpan: number;
rowSpan: number;
children?: TableColumnCtx<T>[];
level: number;
filterable: boolean | FilterMethods<T> | Filters;
order: TableSortOrder | null;
isColumnGroup: boolean;
isSubColumn: boolean;
columns: TableColumnCtx<T>[];
getColumnIndex: () => number;
no: number;
filterOpened?: boolean;
renderFilterIcon?: (scope: any) => VNode;
renderExpand?: (scope: any) => VNode;
};
interface TableColumn<T extends DefaultRow> extends ComponentInternalInstance {
vnode: {
vParent: TableColumn<T> | Table<T>;
} & VNode;
vParent: TableColumn<T> | Table<T>;
columnId: string;
columnConfig: Ref<Partial<TableColumnCtx<T>>>;
}
export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf };
declare const _default: {
/**
* @description type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon
*/
type: {
type: StringConstructor;
default: string;
};
/**
* @description column label
*/
label: StringConstructor;
/**
* @description class name of cells in the column
*/
className: StringConstructor;
/**
* @description class name of the label of this column
*/
labelClassName: StringConstructor;
/**
* @description
*/
property: StringConstructor;
/**
* @description field name. You can also use its alias: `property`
*/
prop: StringConstructor;
/**
* @description column width
*/
width: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
*/
minWidth: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* @description render function for table header of this column
*/
renderHeader: PropType<TableColumnCtx<any>["renderHeader"]>;
/**
* @description whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table
*/
sortable: {
type: (BooleanConstructor | StringConstructor)[];
default: boolean;
};
/**
* @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
*/
sortMethod: PropType<TableColumnCtx<any>["sortMethod"]>;
/**
* @description specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal
*/
sortBy: PropType<TableColumnCtx<any>["sortBy"]>;
/**
* @description whether column width can be resized, works when `border` of `el-table` is `true`
*/
resizable: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered
*/
columnKey: StringConstructor;
/**
* @description alignment, the value should be 'left' \/ 'center' \/ 'right'
*/
align: StringConstructor;
/**
* @description alignment of the table header. If omitted, the value of the above `align` attribute will be applied, the value should be 'left' \/ 'center' \/ 'right'
*/
headerAlign: StringConstructor;
/**
* @description whether to hide extra content and show them in a tooltip when hovering on the cell
*/
showOverflowTooltip: {
type: PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
default: undefined;
};
/**
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
*/
tooltipFormatter: PropType<TableColumnCtx<any>["tooltipFormatter"]>;
/**
* @description whether column is fixed at left / right. Will be fixed at left if `true`
*/
fixed: (BooleanConstructor | StringConstructor)[];
/**
* @description function that formats cell content
*/
formatter: PropType<TableColumnCtx<any>["formatter"]>;
/**
* @description function that determines if a certain row can be selected, works when `type` is 'selection'
*/
selectable: PropType<TableColumnCtx<any>["selectable"]>;
/**
* @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
*/
reserveSelection: BooleanConstructor;
/**
* @description data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`
*/
filterMethod: PropType<TableColumnCtx<any>["filterMethod"]>;
/**
* @description filter value for selected data, might be useful when table header is rendered with `render-header`
*/
filteredValue: PropType<TableColumnCtx<any>["filteredValue"]>;
/**
* @description an array of data filtering options. For each element in this array, `text` and `value` are required
*/
filters: PropType<TableColumnCtx<any>["filters"]>;
/**
* @description placement for the filter dropdown
*/
filterPlacement: StringConstructor;
/**
* @description whether data filtering supports multiple options
*/
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description className for the filter dropdown
*/
filterClassName: StringConstructor;
/**
* @description customize indices for each row, works on columns with `type=index`
*/
index: PropType<TableColumnCtx<any>["index"]>;
/**
* @description the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
*/
sortOrders: {
type: PropType<TableColumnCtx<any>["sortOrders"]>;
default: () => (string | null)[];
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
};
};
export default _default;

View File

@@ -0,0 +1,68 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var defaultProps = {
type: {
type: String,
default: "default"
},
label: String,
className: String,
labelClassName: String,
property: String,
prop: String,
width: {
type: [String, Number],
default: ""
},
minWidth: {
type: [String, Number],
default: ""
},
renderHeader: Function,
sortable: {
type: [Boolean, String],
default: false
},
sortMethod: Function,
sortBy: [String, Function, Array],
resizable: {
type: Boolean,
default: true
},
columnKey: String,
align: String,
headerAlign: String,
showOverflowTooltip: {
type: [Boolean, Object],
default: void 0
},
tooltipFormatter: Function,
fixed: [Boolean, String],
formatter: Function,
selectable: Function,
reserveSelection: Boolean,
filterMethod: Function,
filteredValue: Array,
filters: Array,
filterPlacement: String,
filterMultiple: {
type: Boolean,
default: true
},
filterClassName: String,
index: [Number, Function],
sortOrders: {
type: Array,
default: () => {
return ["ascending", "descending", null];
},
validator: (val) => {
return val.every((order) => ["ascending", "descending", null].includes(order));
}
}
};
exports["default"] = defaultProps;
//# sourceMappingURL=defaults.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,125 @@
import type { TableColumnCtx } from './defaults';
declare const _default: import("vue").DefineComponent<{
type: {
type: StringConstructor;
default: string;
};
label: StringConstructor;
className: StringConstructor;
labelClassName: StringConstructor;
property: StringConstructor;
prop: StringConstructor;
width: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
minWidth: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
renderHeader: import("vue").PropType<TableColumnCtx<any>["renderHeader"]>;
sortable: {
type: (BooleanConstructor | StringConstructor)[];
default: boolean;
};
sortMethod: import("vue").PropType<TableColumnCtx<any>["sortMethod"]>;
sortBy: import("vue").PropType<TableColumnCtx<any>["sortBy"]>;
resizable: {
type: BooleanConstructor;
default: boolean;
};
columnKey: StringConstructor;
align: StringConstructor;
headerAlign: StringConstructor;
showOverflowTooltip: {
type: import("vue").PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
default: undefined;
};
tooltipFormatter: import("vue").PropType<TableColumnCtx<any>["tooltipFormatter"]>;
fixed: (BooleanConstructor | StringConstructor)[];
formatter: import("vue").PropType<TableColumnCtx<any>["formatter"]>;
selectable: import("vue").PropType<TableColumnCtx<any>["selectable"]>;
reserveSelection: BooleanConstructor;
filterMethod: import("vue").PropType<TableColumnCtx<any>["filterMethod"]>;
filteredValue: import("vue").PropType<TableColumnCtx<any>["filteredValue"]>;
filters: import("vue").PropType<TableColumnCtx<any>["filters"]>;
filterPlacement: StringConstructor;
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
filterClassName: StringConstructor;
index: import("vue").PropType<TableColumnCtx<any>["index"]>;
sortOrders: {
type: import("vue").PropType<TableColumnCtx<any>["sortOrders"]>;
default: () => (string | null)[];
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
};
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
type: {
type: StringConstructor;
default: string;
};
label: StringConstructor;
className: StringConstructor;
labelClassName: StringConstructor;
property: StringConstructor;
prop: StringConstructor;
width: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
minWidth: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
renderHeader: import("vue").PropType<TableColumnCtx<any>["renderHeader"]>;
sortable: {
type: (BooleanConstructor | StringConstructor)[];
default: boolean;
};
sortMethod: import("vue").PropType<TableColumnCtx<any>["sortMethod"]>;
sortBy: import("vue").PropType<TableColumnCtx<any>["sortBy"]>;
resizable: {
type: BooleanConstructor;
default: boolean;
};
columnKey: StringConstructor;
align: StringConstructor;
headerAlign: StringConstructor;
showOverflowTooltip: {
type: import("vue").PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
default: undefined;
};
tooltipFormatter: import("vue").PropType<TableColumnCtx<any>["tooltipFormatter"]>;
fixed: (BooleanConstructor | StringConstructor)[];
formatter: import("vue").PropType<TableColumnCtx<any>["formatter"]>;
selectable: import("vue").PropType<TableColumnCtx<any>["selectable"]>;
reserveSelection: BooleanConstructor;
filterMethod: import("vue").PropType<TableColumnCtx<any>["filterMethod"]>;
filteredValue: import("vue").PropType<TableColumnCtx<any>["filteredValue"]>;
filters: import("vue").PropType<TableColumnCtx<any>["filters"]>;
filterPlacement: StringConstructor;
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
filterClassName: StringConstructor;
index: import("vue").PropType<TableColumnCtx<any>["index"]>;
sortOrders: {
type: import("vue").PropType<TableColumnCtx<any>["sortOrders"]>;
default: () => (string | null)[];
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
};
}>>, {
width: string | number;
minWidth: string | number;
type: string;
resizable: boolean;
showOverflowTooltip: boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "transition" | "placement" | "effect" | "showAfter" | "hideAfter" | "popperOptions" | "enterable" | "popperClass" | "appendTo" | "showArrow">> | undefined;
sortOrders: (import("../table/defaults").TableSortOrder | null)[];
sortable: string | boolean;
reserveSelection: boolean;
filterMultiple: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,153 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../../checkbox/index.js');
var config = require('../config.js');
var util = require('../util.js');
var watcherHelper = require('./watcher-helper.js');
var renderHelper = require('./render-helper.js');
var defaults = require('./defaults.js');
var types = require('../../../../utils/types.js');
var shared = require('@vue/shared');
let columnIdSeed = 1;
var ElTableColumn = vue.defineComponent({
name: "ElTableColumn",
components: {
ElCheckbox: index.ElCheckbox
},
props: defaults["default"],
setup(props, { slots }) {
const instance = vue.getCurrentInstance();
const columnConfig = vue.ref({});
const owner = vue.computed(() => {
let parent2 = instance.parent;
while (parent2 && !parent2.tableId) {
parent2 = parent2.parent;
}
return parent2;
});
const { registerNormalWatchers, registerComplexWatchers } = watcherHelper["default"](owner, props);
const {
columnId,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex,
realAlign,
updateColumnOrder
} = renderHelper["default"](props, slots, owner);
const parent = columnOrTableParent.value;
columnId.value = `${"tableId" in parent && parent.tableId || "columnId" in parent && parent.columnId}_column_${columnIdSeed++}`;
vue.onBeforeMount(() => {
isSubColumn.value = owner.value !== parent;
const type = props.type || "default";
const sortable = props.sortable === "" ? true : props.sortable;
const showOverflowTooltip = type === "selection" ? false : types.isUndefined(props.showOverflowTooltip) ? parent.props.showOverflowTooltip : props.showOverflowTooltip;
const tooltipFormatter = types.isUndefined(props.tooltipFormatter) ? parent.props.tooltipFormatter : props.tooltipFormatter;
const defaults = {
...config.cellStarts[type],
id: columnId.value,
type,
property: props.prop || props.property,
align: realAlign,
headerAlign: realHeaderAlign,
showOverflowTooltip,
tooltipFormatter,
filterable: props.filters || props.filterMethod,
filteredValue: [],
filterPlacement: "",
filterClassName: "",
isColumnGroup: false,
isSubColumn: false,
filterOpened: false,
sortable,
index: props.index,
rawColumnKey: instance.vnode.key
};
const basicProps = [
"columnKey",
"label",
"className",
"labelClassName",
"type",
"renderHeader",
"formatter",
"fixed",
"resizable"
];
const sortProps = ["sortMethod", "sortBy", "sortOrders"];
const selectProps = ["selectable", "reserveSelection"];
const filterProps = [
"filterMethod",
"filters",
"filterMultiple",
"filterOpened",
"filteredValue",
"filterPlacement",
"filterClassName"
];
let column = getPropsData(basicProps, sortProps, selectProps, filterProps);
column = util.mergeOptions(defaults, column);
const chains = util.compose(setColumnRenders, setColumnWidth, setColumnForcedProps);
column = chains(column);
columnConfig.value = column;
registerNormalWatchers();
registerComplexWatchers();
});
vue.onMounted(() => {
var _a, _b;
const parent2 = columnOrTableParent.value;
const children = isSubColumn.value ? (_a = parent2.vnode.el) == null ? void 0 : _a.children : (_b = parent2.refs.hiddenColumns) == null ? void 0 : _b.children;
const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
columnConfig.value.getColumnIndex = getColumnIndex;
const columnIndex = getColumnIndex();
columnIndex > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? "columnConfig" in parent2 && parent2.columnConfig.value : null, updateColumnOrder);
});
vue.onBeforeUnmount(() => {
const getColumnIndex = columnConfig.value.getColumnIndex;
const columnIndex = getColumnIndex ? getColumnIndex() : -1;
columnIndex > -1 && owner.value.store.commit("removeColumn", columnConfig.value, isSubColumn.value ? "columnConfig" in parent && parent.columnConfig.value : null, updateColumnOrder);
});
instance.columnId = columnId.value;
instance.columnConfig = columnConfig;
return;
},
render() {
var _a, _b, _c;
try {
const renderDefault = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a, {
row: {},
column: {},
$index: -1
});
const children = [];
if (shared.isArray(renderDefault)) {
for (const childNode of renderDefault) {
if (((_c = childNode.type) == null ? void 0 : _c.name) === "ElTableColumn" || childNode.shapeFlag & 2) {
children.push(childNode);
} else if (childNode.type === vue.Fragment && shared.isArray(childNode.children)) {
childNode.children.forEach((vnode2) => {
if ((vnode2 == null ? void 0 : vnode2.patchFlag) !== 1024 && !shared.isString(vnode2 == null ? void 0 : vnode2.children)) {
children.push(vnode2);
}
});
}
}
}
const vnode = vue.h("div", children);
return vnode;
} catch (e) {
return vue.h("div", []);
}
}
});
exports["default"] = ElTableColumn;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
import type { ComputedRef, RendererNode, Slots } from 'vue';
import type { TableColumn, TableColumnCtx } from './defaults';
import type { DefaultRow, Table } from '../table/defaults';
declare function useRender<T extends DefaultRow>(props: TableColumnCtx<T>, slots: Slots, owner: ComputedRef<Table<T>>): {
columnId: import("vue").Ref<string>;
realAlign: import("vue").Ref<string | null | undefined>;
isSubColumn: import("vue").Ref<boolean>;
realHeaderAlign: import("vue").Ref<string | null | undefined>;
columnOrTableParent: ComputedRef<Table<T> | TableColumn<T>>;
setColumnWidth: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
setColumnForcedProps: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
setColumnRenders: (column: TableColumnCtx<T>) => TableColumnCtx<T>;
getPropsData: (...propsKey: string[][]) => Record<string, any>;
getColumnElIndex: (children: T[], child: RendererNode | null) => number;
updateColumnOrder: () => void;
};
export default useRender;

View File

@@ -0,0 +1,175 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var config = require('../config.js');
var util = require('../util.js');
var index = require('../../../../hooks/use-namespace/index.js');
var types = require('../../../../utils/types.js');
var shared = require('@vue/shared');
function useRender(props, slots, owner) {
const instance = vue.getCurrentInstance();
const columnId = vue.ref("");
const isSubColumn = vue.ref(false);
const realAlign = vue.ref();
const realHeaderAlign = vue.ref();
const ns = index.useNamespace("table");
vue.watchEffect(() => {
realAlign.value = props.align ? `is-${props.align}` : null;
realAlign.value;
});
vue.watchEffect(() => {
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
realHeaderAlign.value;
});
const columnOrTableParent = vue.computed(() => {
let parent = instance.vnode.vParent || instance.parent;
while (parent && !parent.tableId && !parent.columnId) {
parent = parent.vnode.vParent || parent.parent;
}
return parent;
});
const hasTreeColumn = vue.computed(() => {
const { store } = instance.parent;
if (!store)
return false;
const { treeData } = store.states;
const treeDataValue = treeData.value;
return treeDataValue && Object.keys(treeDataValue).length > 0;
});
const realWidth = vue.ref(util.parseWidth(props.width));
const realMinWidth = vue.ref(util.parseMinWidth(props.minWidth));
const setColumnWidth = (column) => {
if (realWidth.value)
column.width = realWidth.value;
if (realMinWidth.value) {
column.minWidth = realMinWidth.value;
}
if (!realWidth.value && realMinWidth.value) {
column.width = void 0;
}
if (!column.minWidth) {
column.minWidth = 80;
}
column.realWidth = Number(types.isUndefined(column.width) ? column.minWidth : column.width);
return column;
};
const setColumnForcedProps = (column) => {
const type = column.type;
const source = config.cellForced[type] || {};
Object.keys(source).forEach((prop) => {
const value = source[prop];
if (prop !== "className" && !types.isUndefined(value)) {
column[prop] = value;
}
});
const className = config.getDefaultClassName(type);
if (className) {
const forceClass = `${vue.unref(ns.namespace)}-${className}`;
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
}
return column;
};
const checkSubColumn = (children) => {
if (shared.isArray(children)) {
children.forEach((child) => check(child));
} else {
check(children);
}
function check(item) {
var _a;
if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === "ElTableColumn") {
item.vParent = instance;
}
}
};
const setColumnRenders = (column) => {
if (props.renderHeader) ; else if (column.type !== "selection") {
column.renderHeader = (scope) => {
instance.columnConfig.value["label"];
return vue.renderSlot(slots, "header", scope, () => [column.label]);
};
}
if (slots["filter-icon"]) {
column.renderFilterIcon = (scope) => {
return vue.renderSlot(slots, "filter-icon", scope);
};
}
if (slots.expand) {
column.renderExpand = (scope) => {
return vue.renderSlot(slots, "expand", scope);
};
}
let originRenderCell = column.renderCell;
if (column.type === "expand") {
column.renderCell = (data) => vue.h("div", {
class: "cell"
}, [originRenderCell(data)]);
owner.value.renderExpanded = (row) => {
return slots.default ? slots.default(row) : slots.default;
};
} else {
originRenderCell = originRenderCell || config.defaultRenderCell;
column.renderCell = (data) => {
let children = null;
if (slots.default) {
const vnodes = slots.default(data);
children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data);
} else {
children = originRenderCell(data);
}
const { columns } = owner.value.store.states;
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === firstUserColumnIndex;
const prefix = config.treeCellPrefix(data, shouldCreatePlaceholder);
const props2 = {
class: "cell",
style: {}
};
if (column.showOverflowTooltip) {
props2.class = `${props2.class} ${vue.unref(ns.namespace)}-tooltip`;
props2.style = {
width: `${(data.column.realWidth || Number(data.column.width)) - 1}px`
};
}
checkSubColumn(children);
return vue.h("div", props2, [prefix, children]);
};
}
return column;
};
const getPropsData = (...propsKey) => {
return propsKey.reduce((prev, cur) => {
if (shared.isArray(cur)) {
cur.forEach((key) => {
prev[key] = props[key];
});
}
return prev;
}, {});
};
const getColumnElIndex = (children, child) => {
return Array.prototype.indexOf.call(children, child);
};
const updateColumnOrder = () => {
owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
};
return {
columnId,
realAlign,
isSubColumn,
realHeaderAlign,
columnOrTableParent,
setColumnWidth,
setColumnForcedProps,
setColumnRenders,
getPropsData,
getColumnElIndex,
updateColumnOrder
};
}
exports["default"] = useRender;
//# sourceMappingURL=render-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,8 @@
import type { ComputedRef } from 'vue';
import type { DefaultRow } from '../table/defaults';
import type { TableColumnCtx } from './defaults';
declare function useWatcher<T extends DefaultRow>(owner: ComputedRef<any>, props_: Partial<TableColumnCtx<T>>): {
registerComplexWatchers: () => void;
registerNormalWatchers: () => void;
};
export default useWatcher;

View File

@@ -0,0 +1,88 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
var shared = require('@vue/shared');
function getAllAliases(props, aliases) {
return props.reduce((prev, cur) => {
prev[cur] = cur;
return prev;
}, aliases);
}
function useWatcher(owner, props_) {
const instance = vue.getCurrentInstance();
const registerComplexWatchers = () => {
const props = ["fixed"];
const aliases = {
realWidth: "width",
realMinWidth: "minWidth"
};
const allAliases = getAllAliases(props, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (shared.hasOwn(props_, columnKey)) {
vue.watch(() => props_[columnKey], (newVal) => {
let value = newVal;
if (columnKey === "width" && key === "realWidth") {
value = util.parseWidth(newVal);
}
if (columnKey === "minWidth" && key === "realMinWidth") {
value = util.parseMinWidth(newVal);
}
instance.columnConfig.value[columnKey] = value;
instance.columnConfig.value[key] = value;
const updateColumns = columnKey === "fixed";
owner.value.store.scheduleLayout(updateColumns);
});
}
});
};
const registerNormalWatchers = () => {
const props = [
"label",
"filters",
"filterMultiple",
"filteredValue",
"sortable",
"index",
"formatter",
"className",
"labelClassName",
"filterClassName",
"showOverflowTooltip",
"tooltipFormatter"
];
const parentProps = ["showOverflowTooltip"];
const aliases = {
property: "prop",
align: "realAlign",
headerAlign: "realHeaderAlign"
};
const allAliases = getAllAliases(props, aliases);
Object.keys(allAliases).forEach((key) => {
const columnKey = aliases[key];
if (shared.hasOwn(props_, columnKey)) {
vue.watch(() => props_[columnKey], (newVal) => {
instance.columnConfig.value[key] = newVal;
});
}
});
parentProps.forEach((key) => {
if (shared.hasOwn(owner.value.props, key)) {
vue.watch(() => owner.value.props[key], (newVal) => {
instance.columnConfig.value[key] = newVal;
});
}
});
};
return {
registerComplexWatchers,
registerNormalWatchers
};
}
exports["default"] = useWatcher;
//# sourceMappingURL=watcher-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,79 @@
import type { Store } from '../store';
import type { PropType } from 'vue';
import type { DefaultRow, Sort, SummaryMethod } from '../table/defaults';
export interface TableFooter<T extends DefaultRow> {
fixed: string;
store: Store<T>;
summaryMethod: SummaryMethod<T>;
sumText: string;
border: boolean;
defaultSort: Sort;
}
declare const _default: import("vue").DefineComponent<{
fixed: {
type: StringConstructor;
default: string;
};
store: {
required: true;
type: PropType<TableFooter<any>["store"]>;
};
summaryMethod: PropType<TableFooter<any>["summaryMethod"]>;
sumText: StringConstructor;
border: BooleanConstructor;
defaultSort: {
type: PropType<TableFooter<any>["defaultSort"]>;
default: () => {
prop: string;
order: string;
};
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
onScrollableChange: (layout: import("../table-layout").default<any>) => void;
onColumnsChange: (layout: import("../table-layout").default<any>) => void;
getCellClasses: (columns: import("../table-column/defaults").TableColumnCtx<any>[], cellIndex: number) => string[];
getCellStyles: (column: import("../table-column/defaults").TableColumnCtx<any>, cellIndex: number) => import("vue").CSSProperties | undefined;
columns: import("vue").ComputedRef<import("../table-column/defaults").TableColumnCtx<DefaultRow>[]>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
fixed: {
type: StringConstructor;
default: string;
};
store: {
required: true;
type: PropType<TableFooter<any>["store"]>;
};
summaryMethod: PropType<TableFooter<any>["summaryMethod"]>;
sumText: StringConstructor;
border: BooleanConstructor;
defaultSort: {
type: PropType<TableFooter<any>["defaultSort"]>;
default: () => {
prop: string;
order: string;
};
};
}>>, {
fixed: string;
border: boolean;
defaultSort: Sort;
}>;
export default _default;

View File

@@ -0,0 +1,108 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var layoutObserver = require('../layout-observer.js');
var tokens = require('../tokens.js');
var styleHelper = require('./style-helper.js');
var index = require('../../../../hooks/use-namespace/index.js');
var TableFooter = vue.defineComponent({
name: "ElTableFooter",
props: {
fixed: {
type: String,
default: ""
},
store: {
required: true,
type: Object
},
summaryMethod: Function,
sumText: String,
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: ""
};
}
}
},
setup(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index.useNamespace("table");
const { getCellClasses, getCellStyles, columns } = styleHelper["default"](props);
const { onScrollableChange, onColumnsChange } = layoutObserver["default"](parent);
return {
ns,
onScrollableChange,
onColumnsChange,
getCellClasses,
getCellStyles,
columns
};
},
render() {
const { columns, getCellStyles, getCellClasses, summaryMethod, sumText } = this;
const data = this.store.states.data.value;
let sums = [];
if (summaryMethod) {
sums = summaryMethod({
columns,
data
});
} else {
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = sumText;
return;
}
const values = data.map((item) => Number(item[column.property]));
const precisions = [];
let notNumber = true;
values.forEach((value) => {
if (!Number.isNaN(+value)) {
notNumber = false;
const decimal = `${value}`.split(".")[1];
precisions.push(decimal ? decimal.length : 0);
}
});
const precision = Math.max.apply(null, precisions);
if (!notNumber) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!Number.isNaN(+value)) {
return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
} else {
return prev;
}
}, 0);
} else {
sums[index] = "";
}
});
}
return vue.h(vue.h("tfoot", [
vue.h("tr", {}, [
...columns.map((column, cellIndex) => vue.h("td", {
key: cellIndex,
colspan: column.colSpan,
rowspan: column.rowSpan,
class: getCellClasses(columns, cellIndex),
style: getCellStyles(column, cellIndex)
}, [
vue.h("div", {
class: ["cell", column.labelClassName]
}, [sums[cellIndex]])
]))
])
]));
}
});
exports["default"] = TableFooter;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,9 @@
declare function useMapState(): {
leftFixedLeafCount: import("vue").ComputedRef<number>;
rightFixedLeafCount: import("vue").ComputedRef<number>;
columnsCount: import("vue").ComputedRef<number>;
leftFixedCount: import("vue").ComputedRef<number>;
rightFixedCount: import("vue").ComputedRef<number>;
columns: import("vue").ComputedRef<import("element-plus").TableColumnCtx<import("../table/defaults").DefaultRow>[]>;
};
export default useMapState;

View File

@@ -0,0 +1,45 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var tokens = require('../tokens.js');
function useMapState() {
const table = vue.inject(tokens.TABLE_INJECTION_KEY);
const store = table == null ? void 0 : table.store;
const leftFixedLeafCount = vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.fixedLeafColumnsLength.value) != null ? _a : 0;
});
const rightFixedLeafCount = vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.rightFixedColumns.value.length) != null ? _a : 0;
});
const columnsCount = vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.columns.value.length) != null ? _a : 0;
});
const leftFixedCount = vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.fixedColumns.value.length) != null ? _a : 0;
});
const rightFixedCount = vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.rightFixedColumns.value.length) != null ? _a : 0;
});
return {
leftFixedLeafCount,
rightFixedLeafCount,
columnsCount,
leftFixedCount,
rightFixedCount,
columns: vue.computed(() => {
var _a;
return (_a = store == null ? void 0 : store.states.columns.value) != null ? _a : [];
})
};
}
exports["default"] = useMapState;
//# sourceMappingURL=mapState-helper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mapState-helper.js","sources":["../../../../../../../packages/components/table/src/table-footer/mapState-helper.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nfunction useMapState() {\n const table = inject(TABLE_INJECTION_KEY)\n const store = table?.store\n const leftFixedLeafCount = computed(() => {\n return store?.states.fixedLeafColumnsLength.value ?? 0\n })\n const rightFixedLeafCount = computed(() => {\n return store?.states.rightFixedColumns.value.length ?? 0\n })\n const columnsCount = computed(() => {\n return store?.states.columns.value.length ?? 0\n })\n const leftFixedCount = computed(() => {\n return store?.states.fixedColumns.value.length ?? 0\n })\n const rightFixedCount = computed(() => {\n return store?.states.rightFixedColumns.value.length ?? 0\n })\n\n return {\n leftFixedLeafCount,\n rightFixedLeafCount,\n columnsCount,\n leftFixedCount,\n rightFixedCount,\n columns: computed(() => store?.states.columns.value ?? []),\n }\n}\n\nexport default useMapState\n"],"names":["inject","TABLE_INJECTION_KEY","computed"],"mappings":";;;;;;;AAEA,SAAS,WAAW,GAAG;AACvB,EAAE,MAAM,KAAK,GAAGA,UAAM,CAACC,0BAAmB,CAAC,CAAC;AAC5C,EAAE,MAAM,KAAK,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;AACrD,EAAE,MAAM,kBAAkB,GAAGC,YAAQ,CAAC,MAAM;AAC5C,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AACtG,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,mBAAmB,GAAGA,YAAQ,CAAC,MAAM;AAC7C,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AACxG,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAGA,YAAQ,CAAC,MAAM;AACtC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AAC9F,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,cAAc,GAAGA,YAAQ,CAAC,MAAM;AACxC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AACnG,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,eAAe,GAAGA,YAAQ,CAAC,MAAM;AACzC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,CAAC;AACxG,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,kBAAkB;AACtB,IAAI,mBAAmB;AACvB,IAAI,YAAY;AAChB,IAAI,cAAc;AAClB,IAAI,eAAe;AACnB,IAAI,OAAO,EAAEA,YAAQ,CAAC,MAAM;AAC5B,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;AAC1F,KAAK,CAAC;AACN,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,9 @@
import type { TableColumnCtx } from '../table-column/defaults';
import type { DefaultRow } from '../table/defaults';
import type { TableFooter } from '.';
declare function useStyle<T extends DefaultRow>(props: TableFooter<T>): {
getCellClasses: (columns: TableColumnCtx<T>[], cellIndex: number) => string[];
getCellStyles: (column: TableColumnCtx<T>, cellIndex: number) => import("vue").CSSProperties | undefined;
columns: import("vue").ComputedRef<TableColumnCtx<DefaultRow>[]>;
};
export default useStyle;

View File

@@ -0,0 +1,43 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var util = require('../util.js');
var mapStateHelper = require('./mapState-helper.js');
var index = require('../../../../hooks/use-namespace/index.js');
function useStyle(props) {
const { columns } = mapStateHelper["default"]();
const ns = index.useNamespace("table");
const getCellClasses = (columns2, cellIndex) => {
const column = columns2[cellIndex];
const classes = [
ns.e("cell"),
column.id,
column.align,
column.labelClassName,
...util.getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store)
];
if (column.className) {
classes.push(column.className);
}
if (!column.children) {
classes.push(ns.is("leaf"));
}
return classes;
};
const getCellStyles = (column, cellIndex) => {
const fixedStyle = util.getFixedColumnOffset(cellIndex, column.fixed, props.store);
util.ensurePosition(fixedStyle, "left");
util.ensurePosition(fixedStyle, "right");
return fixedStyle;
};
return {
getCellClasses,
getCellStyles,
columns
};
}
exports["default"] = useStyle;
//# sourceMappingURL=style-helper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"style-helper.js","sources":["../../../../../../../packages/components/table/src/table-footer/style-helper.ts"],"sourcesContent":["import { useNamespace } from '@element-plus/hooks'\nimport {\n ensurePosition,\n getFixedColumnOffset,\n getFixedColumnsClass,\n} from '../util'\nimport useMapState from './mapState-helper'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { DefaultRow } from '../table/defaults'\nimport type { TableFooter } from '.'\n\nfunction useStyle<T extends DefaultRow>(props: TableFooter<T>) {\n const { columns } = useMapState()\n const ns = useNamespace('table')\n\n const getCellClasses = (columns: TableColumnCtx<T>[], cellIndex: number) => {\n const column = columns[cellIndex]\n const classes = [\n ns.e('cell'),\n column.id,\n column.align,\n column.labelClassName,\n ...getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store),\n ]\n if (column.className) {\n classes.push(column.className)\n }\n if (!column.children) {\n classes.push(ns.is('leaf'))\n }\n return classes\n }\n\n const getCellStyles = (column: TableColumnCtx<T>, cellIndex: number) => {\n const fixedStyle = getFixedColumnOffset(\n cellIndex,\n column.fixed,\n props.store\n )\n ensurePosition(fixedStyle, 'left')\n ensurePosition(fixedStyle, 'right')\n return fixedStyle\n }\n\n return {\n getCellClasses,\n getCellStyles,\n columns,\n }\n}\n\nexport default useStyle\n"],"names":["useMapState","useNamespace","getFixedColumnsClass","getFixedColumnOffset","ensurePosition"],"mappings":";;;;;;;;AAOA,SAAS,QAAQ,CAAC,KAAK,EAAE;AACzB,EAAE,MAAM,EAAE,OAAO,EAAE,GAAGA,yBAAW,EAAE,CAAC;AACpC,EAAE,MAAM,EAAE,GAAGC,kBAAY,CAAC,OAAO,CAAC,CAAC;AACnC,EAAE,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,SAAS,KAAK;AAClD,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AACvC,IAAI,MAAM,OAAO,GAAG;AACpB,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;AAClB,MAAM,MAAM,CAAC,EAAE;AACf,MAAM,MAAM,CAAC,KAAK;AAClB,MAAM,MAAM,CAAC,cAAc;AAC3B,MAAM,GAAGC,yBAAoB,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;AAC3E,KAAK,CAAC;AACN,IAAI,IAAI,MAAM,CAAC,SAAS,EAAE;AAC1B,MAAM,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACrC,KAAK;AACL,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;AAC1B,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,OAAO,OAAO,CAAC;AACnB,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,SAAS,KAAK;AAC/C,IAAI,MAAM,UAAU,GAAGC,yBAAoB,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAClF,IAAIC,mBAAc,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AACvC,IAAIA,mBAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AACxC,IAAI,OAAO,UAAU,CAAC;AACtB,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,cAAc;AAClB,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}

View File

@@ -0,0 +1,14 @@
import type { EmitFn } from 'element-plus/es/utils';
import type { TableHeaderProps } from '.';
import type { TableColumnCtx } from '../table-column/defaults';
import type { DefaultRow, TableSortOrder } from '../table/defaults';
declare function useEvent<T extends DefaultRow>(props: TableHeaderProps<T>, emit: EmitFn<string[]>): {
handleHeaderClick: (event: Event, column: TableColumnCtx<T>) => void;
handleHeaderContextMenu: (event: Event, column: TableColumnCtx<T>) => void;
handleMouseDown: (event: MouseEvent, column: TableColumnCtx<T>) => void;
handleMouseMove: (event: MouseEvent, column: TableColumnCtx<T>) => void;
handleMouseOut: () => void;
handleSortClick: (event: Event, column: TableColumnCtx<T>, givenOrder?: TableSortOrder | boolean) => void;
handleFilterClick: (event: Event) => void;
};
export default useEvent;

View File

@@ -0,0 +1,187 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var tokens = require('../tokens.js');
var core = require('@vueuse/core');
var style = require('../../../../utils/dom/style.js');
var types = require('../../../../utils/types.js');
function useEvent(props, emit) {
const instance = vue.getCurrentInstance();
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const handleFilterClick = (event) => {
event.stopPropagation();
return;
};
const handleHeaderClick = (event, column) => {
if (!column.filters && column.sortable) {
handleSortClick(event, column, false);
} else if (column.filterable && !column.sortable) {
handleFilterClick(event);
}
parent == null ? void 0 : parent.emit("header-click", column, event);
};
const handleHeaderContextMenu = (event, column) => {
parent == null ? void 0 : parent.emit("header-contextmenu", column, event);
};
const draggingColumn = vue.ref(null);
const dragging = vue.ref(false);
const dragState = vue.ref();
const handleMouseDown = (event, column) => {
var _a, _b;
if (!core.isClient)
return;
if (column.children && column.children.length > 0)
return;
if (draggingColumn.value && props.border) {
dragging.value = true;
const table = parent;
emit("set-drag-visible", true);
const tableEl = table == null ? void 0 : table.vnode.el;
const tableLeft = tableEl == null ? void 0 : tableEl.getBoundingClientRect().left;
const columnEl = (_b = (_a = instance == null ? void 0 : instance.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.querySelector(`th.${column.id}`);
const columnRect = columnEl.getBoundingClientRect();
const minLeft = columnRect.left - tableLeft + 30;
style.addClass(columnEl, "noclick");
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft
};
const resizeProxy = table == null ? void 0 : table.refs.resizeProxy;
resizeProxy.style.left = `${dragState.value.startLeft}px`;
document.onselectstart = function() {
return false;
};
document.ondragstart = function() {
return false;
};
const handleMouseMove2 = (event2) => {
const deltaLeft = event2.clientX - dragState.value.startMouseLeft;
const proxyLeft = dragState.value.startLeft + deltaLeft;
resizeProxy.style.left = `${Math.max(minLeft, proxyLeft)}px`;
};
const handleMouseUp = () => {
if (dragging.value) {
const { startColumnLeft, startLeft } = dragState.value;
const finalLeft = Number.parseInt(resizeProxy.style.left, 10);
const columnWidth = finalLeft - startColumnLeft;
column.width = column.realWidth = columnWidth;
table == null ? void 0 : table.emit("header-dragend", column.width, startLeft - startColumnLeft, column, event);
requestAnimationFrame(() => {
props.store.scheduleLayout(false, true);
});
document.body.style.cursor = "";
dragging.value = false;
draggingColumn.value = null;
dragState.value = void 0;
emit("set-drag-visible", false);
}
document.removeEventListener("mousemove", handleMouseMove2);
document.removeEventListener("mouseup", handleMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(() => {
style.removeClass(columnEl, "noclick");
}, 0);
};
document.addEventListener("mousemove", handleMouseMove2);
document.addEventListener("mouseup", handleMouseUp);
}
};
const handleMouseMove = (event, column) => {
var _a;
if (column.children && column.children.length > 0)
return;
const el = event.target;
if (!types.isElement(el)) {
return;
}
const target = el == null ? void 0 : el.closest("th");
if (!column || !column.resizable || !target)
return;
if (!dragging.value && props.border) {
const rect = target.getBoundingClientRect();
const bodyStyle = document.body.style;
const isLastTh = ((_a = target.parentNode) == null ? void 0 : _a.lastElementChild) === target;
const allowDarg = props.allowDragLastColumn || !isLastTh;
if (rect.width > 12 && rect.right - event.clientX < 8 && allowDarg) {
bodyStyle.cursor = "col-resize";
if (style.hasClass(target, "is-sortable")) {
target.style.cursor = "col-resize";
}
draggingColumn.value = column;
} else if (!dragging.value) {
bodyStyle.cursor = "";
if (style.hasClass(target, "is-sortable")) {
target.style.cursor = "pointer";
}
draggingColumn.value = null;
}
}
};
const handleMouseOut = () => {
if (!core.isClient)
return;
document.body.style.cursor = "";
};
const toggleOrder = ({ order, sortOrders }) => {
if (order === "")
return sortOrders[0];
const index = sortOrders.indexOf(order || null);
return sortOrders[index > sortOrders.length - 2 ? 0 : index + 1];
};
const handleSortClick = (event, column, givenOrder) => {
var _a;
event.stopPropagation();
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
const target = (_a = event.target) == null ? void 0 : _a.closest("th");
if (target) {
if (style.hasClass(target, "noclick")) {
style.removeClass(target, "noclick");
return;
}
}
if (!column.sortable)
return;
const clickTarget = event.currentTarget;
if (["ascending", "descending"].some((str) => style.hasClass(clickTarget, str) && !column.sortOrders.includes(str))) {
return;
}
const states = props.store.states;
let sortProp = states.sortProp.value;
let sortOrder;
const sortingColumn = states.sortingColumn.value;
if (sortingColumn !== column || sortingColumn === column && lodashUnified.isNull(sortingColumn.order)) {
if (sortingColumn) {
sortingColumn.order = null;
}
states.sortingColumn.value = column;
sortProp = column.property;
}
if (!order) {
sortOrder = column.order = null;
} else {
sortOrder = column.order = order;
}
states.sortProp.value = sortProp;
states.sortOrder.value = sortOrder;
parent == null ? void 0 : parent.store.commit("changeSortCondition");
};
return {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick
};
}
exports["default"] = useEvent;
//# sourceMappingURL=event-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,111 @@
import type TableLayout from '../table-layout';
import type { ComponentInternalInstance, PropType, Ref } from 'vue';
import type { DefaultRow, Sort } from '../table/defaults';
import type { Store } from '../store';
export interface TableHeader extends ComponentInternalInstance {
state: {
onColumnsChange: (layout: TableLayout<any>) => void;
onScrollableChange: (layout: TableLayout<any>) => void;
};
filterPanels: Ref<DefaultRow>;
}
export interface TableHeaderProps<T extends DefaultRow> {
fixed: string;
store: Store<T>;
border: boolean;
defaultSort: Sort;
allowDragLastColumn: boolean;
}
declare const _default: import("vue").DefineComponent<{
fixed: {
type: StringConstructor;
default: string;
};
store: {
required: true;
type: PropType<TableHeaderProps<any>["store"]>;
};
border: BooleanConstructor;
defaultSort: {
type: PropType<TableHeaderProps<any>["defaultSort"]>;
default: () => {
prop: string;
order: string;
};
};
appendFilterPanelTo: {
type: StringConstructor;
};
allowDragLastColumn: {
type: BooleanConstructor;
};
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
filterPanels: Ref<{}>;
onColumnsChange: (layout: TableLayout<DefaultRow>) => void;
onScrollableChange: (layout: TableLayout<DefaultRow>) => void;
columnRows: import("vue").ComputedRef<import("../table-column/defaults.js").TableColumnCtx<any>[][]>;
getHeaderRowClass: (rowIndex: number) => string;
getHeaderRowStyle: (rowIndex: number) => any;
getHeaderCellClass: (rowIndex: number, columnIndex: number, row: any, column: import("../table-column/defaults.js").TableColumnCtx<any>) => string;
getHeaderCellStyle: (rowIndex: number, columnIndex: number, row: any, column: import("../table-column/defaults.js").TableColumnCtx<any>) => import("vue").CSSProperties;
handleHeaderClick: (event: Event, column: import("../table-column/defaults.js").TableColumnCtx<any>) => void;
handleHeaderContextMenu: (event: Event, column: import("../table-column/defaults.js").TableColumnCtx<any>) => void;
handleMouseDown: (event: MouseEvent, column: import("../table-column/defaults.js").TableColumnCtx<any>) => void;
handleMouseMove: (event: MouseEvent, column: import("../table-column/defaults.js").TableColumnCtx<any>) => void;
handleMouseOut: () => void;
handleSortClick: (event: Event, column: import("../table-column/defaults.js").TableColumnCtx<any>, givenOrder?: import("../table/defaults").TableSortOrder | boolean) => void;
handleFilterClick: (event: Event) => void;
isGroup: import("vue").ComputedRef<boolean>;
toggleAllSelection: (event: Event) => void;
saveIndexSelection: Map<any, any>;
isTableLayoutAuto: boolean;
theadRef: Ref<any>;
updateFixedColumnStyle: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
fixed: {
type: StringConstructor;
default: string;
};
store: {
required: true;
type: PropType<TableHeaderProps<any>["store"]>;
};
border: BooleanConstructor;
defaultSort: {
type: PropType<TableHeaderProps<any>["defaultSort"]>;
default: () => {
prop: string;
order: string;
};
};
appendFilterPanelTo: {
type: StringConstructor;
};
allowDragLastColumn: {
type: BooleanConstructor;
};
}>>, {
fixed: string;
border: boolean;
defaultSort: Sort;
allowDragLastColumn: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,229 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index = require('../../../checkbox/index.js');
var filterPanel = require('../filter-panel.js');
var layoutObserver = require('../layout-observer.js');
var tokens = require('../tokens.js');
var eventHelper = require('./event-helper.js');
var style_helper = require('./style.helper.js');
var utilsHelper = require('./utils-helper.js');
var index$1 = require('../../../../hooks/use-namespace/index.js');
var TableHeader = vue.defineComponent({
name: "ElTableHeader",
components: {
ElCheckbox: index.ElCheckbox
},
props: {
fixed: {
type: String,
default: ""
},
store: {
required: true,
type: Object
},
border: Boolean,
defaultSort: {
type: Object,
default: () => {
return {
prop: "",
order: ""
};
}
},
appendFilterPanelTo: {
type: String
},
allowDragLastColumn: {
type: Boolean
}
},
setup(props, { emit }) {
const instance = vue.getCurrentInstance();
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index$1.useNamespace("table");
const filterPanels = vue.ref({});
const { onColumnsChange, onScrollableChange } = layoutObserver["default"](parent);
const isTableLayoutAuto = (parent == null ? void 0 : parent.props.tableLayout) === "auto";
const saveIndexSelection = vue.reactive(/* @__PURE__ */ new Map());
const theadRef = vue.ref();
let delayId;
const updateFixedColumnStyle = () => {
delayId = setTimeout(() => {
if (saveIndexSelection.size > 0) {
saveIndexSelection.forEach((column, key) => {
const el = theadRef.value.querySelector(`.${key.replace(/\s/g, ".")}`);
if (el) {
const width = el.getBoundingClientRect().width;
column.width = width || column.width;
}
});
saveIndexSelection.clear();
}
});
};
vue.watch(saveIndexSelection, updateFixedColumnStyle);
vue.onBeforeUnmount(() => {
if (delayId) {
clearTimeout(delayId);
delayId = void 0;
}
});
vue.onMounted(async () => {
await vue.nextTick();
await vue.nextTick();
const { prop, order } = props.defaultSort;
parent == null ? void 0 : parent.store.commit("sort", { prop, order, init: true });
updateFixedColumnStyle();
});
const {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick
} = eventHelper["default"](props, emit);
const {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass
} = style_helper["default"](props);
const { isGroup, toggleAllSelection, columnRows } = utilsHelper["default"](props);
instance.state = {
onColumnsChange,
onScrollableChange
};
instance.filterPanels = filterPanels;
return {
ns,
filterPanels,
onColumnsChange,
onScrollableChange,
columnRows,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
isGroup,
toggleAllSelection,
saveIndexSelection,
isTableLayoutAuto,
theadRef,
updateFixedColumnStyle
};
},
render() {
const {
ns,
isGroup,
columnRows,
getHeaderCellStyle,
getHeaderCellClass,
getHeaderRowClass,
getHeaderRowStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleSortClick,
handleMouseOut,
store,
$parent,
saveIndexSelection,
isTableLayoutAuto
} = this;
let rowSpan = 1;
return vue.h("thead", {
ref: "theadRef",
class: { [ns.is("group")]: isGroup }
}, columnRows.map((subColumns, rowIndex) => vue.h("tr", {
class: getHeaderRowClass(rowIndex),
key: rowIndex,
style: getHeaderRowStyle(rowIndex)
}, subColumns.map((column, cellIndex) => {
if (column.rowSpan > rowSpan) {
rowSpan = column.rowSpan;
}
const _class = getHeaderCellClass(rowIndex, cellIndex, subColumns, column);
if (isTableLayoutAuto && column.fixed) {
saveIndexSelection.set(_class, column);
}
return vue.h("th", {
class: _class,
colspan: column.colSpan,
key: `${column.id}-thead`,
rowspan: column.rowSpan,
style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
onClick: ($event) => {
var _a;
if ((_a = $event.currentTarget) == null ? void 0 : _a.classList.contains("noclick")) {
return;
}
handleHeaderClick($event, column);
},
onContextmenu: ($event) => handleHeaderContextMenu($event, column),
onMousedown: ($event) => handleMouseDown($event, column),
onMousemove: ($event) => handleMouseMove($event, column),
onMouseout: handleMouseOut
}, [
vue.h("div", {
class: [
"cell",
column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""
]
}, [
column.renderHeader ? column.renderHeader({
column,
$index: cellIndex,
store,
_self: $parent
}) : column.label,
column.sortable && vue.h("span", {
onClick: ($event) => handleSortClick($event, column),
class: "caret-wrapper"
}, [
vue.h("i", {
onClick: ($event) => handleSortClick($event, column, "ascending"),
class: "sort-caret ascending"
}),
vue.h("i", {
onClick: ($event) => handleSortClick($event, column, "descending"),
class: "sort-caret descending"
})
]),
column.filterable && vue.h(filterPanel["default"], {
store,
placement: column.filterPlacement || "bottom-start",
appendTo: $parent == null ? void 0 : $parent.appendFilterPanelTo,
column,
upDataColumn: (key, value) => {
column[key] = value;
}
}, {
"filter-icon": () => column.renderFilterIcon ? column.renderFilterIcon({
filterOpened: column.filterOpened
}) : null
})
])
]);
}))));
}
});
exports["default"] = TableHeader;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
import type { TableColumnCtx } from '../table-column/defaults';
import type { DefaultRow } from '../table/defaults';
import type { TableHeaderProps } from '.';
declare function useStyle<T extends DefaultRow>(props: TableHeaderProps<T>): {
getHeaderRowStyle: (rowIndex: number) => any;
getHeaderRowClass: (rowIndex: number) => string;
getHeaderCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => import("vue").CSSProperties;
getHeaderCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => string;
};
export default useStyle;

View File

@@ -0,0 +1,86 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('../util.js');
var tokens = require('../tokens.js');
var index = require('../../../../hooks/use-namespace/index.js');
var shared = require('@vue/shared');
function useStyle(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const ns = index.useNamespace("table");
const getHeaderRowStyle = (rowIndex) => {
const headerRowStyle = parent == null ? void 0 : parent.props.headerRowStyle;
if (shared.isFunction(headerRowStyle)) {
return headerRowStyle.call(null, { rowIndex });
}
return headerRowStyle;
};
const getHeaderRowClass = (rowIndex) => {
const classes = [];
const headerRowClassName = parent == null ? void 0 : parent.props.headerRowClassName;
if (shared.isString(headerRowClassName)) {
classes.push(headerRowClassName);
} else if (shared.isFunction(headerRowClassName)) {
classes.push(headerRowClassName.call(null, { rowIndex }));
}
return classes.join(" ");
};
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
var _a;
let headerCellStyles = (_a = parent == null ? void 0 : parent.props.headerCellStyle) != null ? _a : {};
if (shared.isFunction(headerCellStyles)) {
headerCellStyles = headerCellStyles.call(null, {
rowIndex,
columnIndex,
row,
column
});
}
const fixedStyle = util.getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
util.ensurePosition(fixedStyle, "left");
util.ensurePosition(fixedStyle, "right");
return Object.assign({}, headerCellStyles, fixedStyle);
};
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
const fixedClasses = util.getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
const classes = [
column.id,
column.order,
column.headerAlign,
column.className,
column.labelClassName,
...fixedClasses
];
if (!column.children) {
classes.push("is-leaf");
}
if (column.sortable) {
classes.push("is-sortable");
}
const headerCellClassName = parent == null ? void 0 : parent.props.headerCellClassName;
if (shared.isString(headerCellClassName)) {
classes.push(headerCellClassName);
} else if (shared.isFunction(headerCellClassName)) {
classes.push(headerCellClassName.call(null, {
rowIndex,
columnIndex,
row,
column
}));
}
classes.push(ns.e("cell"));
return classes.filter((className) => Boolean(className)).join(" ");
};
return {
getHeaderRowStyle,
getHeaderRowClass,
getHeaderCellStyle,
getHeaderCellClass
};
}
exports["default"] = useStyle;
//# sourceMappingURL=style.helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
import type { DefaultRow } from '../table/defaults';
import type { TableColumnCtx } from '../table-column/defaults';
import type { TableHeaderProps } from '.';
export declare const convertToRows: <T extends DefaultRow>(originColumns: TableColumnCtx<T>[]) => TableColumnCtx<T>[][];
declare function useUtils<T extends DefaultRow>(props: TableHeaderProps<T>): {
isGroup: import("vue").ComputedRef<boolean>;
toggleAllSelection: (event: Event) => void;
columnRows: import("vue").ComputedRef<TableColumnCtx<T>[][]>;
};
export default useUtils;

View File

@@ -0,0 +1,85 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var tokens = require('../tokens.js');
const getAllColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push(column);
result.push.apply(result, getAllColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
const convertToRows = (originColumns) => {
let maxLevel = 1;
const traverse = (column, parent) => {
if (parent) {
column.level = parent.level + 1;
if (maxLevel < column.level) {
maxLevel = column.level;
}
}
if (column.children) {
let colSpan = 0;
column.children.forEach((subColumn) => {
traverse(subColumn, column);
colSpan += subColumn.colSpan;
});
column.colSpan = colSpan;
} else {
column.colSpan = 1;
}
};
originColumns.forEach((column) => {
column.level = 1;
traverse(column, void 0);
});
const rows = [];
for (let i = 0; i < maxLevel; i++) {
rows.push([]);
}
const allColumns = getAllColumns(originColumns);
allColumns.forEach((column) => {
if (!column.children) {
column.rowSpan = maxLevel - column.level + 1;
} else {
column.rowSpan = 1;
column.children.forEach((col) => col.isSubColumn = true);
}
rows[column.level - 1].push(column);
});
return rows;
};
function useUtils(props) {
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
const columnRows = vue.computed(() => {
return convertToRows(props.store.states.originColumns.value);
});
const isGroup = vue.computed(() => {
const result = columnRows.value.length > 1;
if (result && parent) {
parent.state.isGroup.value = true;
}
return result;
});
const toggleAllSelection = (event) => {
event.stopPropagation();
parent == null ? void 0 : parent.store.commit("toggleAllSelection");
};
return {
isGroup,
toggleAllSelection,
columnRows
};
}
exports.convertToRows = convertToRows;
exports["default"] = useUtils;
//# sourceMappingURL=utils-helper.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,36 @@
import type { Ref } from 'vue';
import type { TableColumnCtx } from './table-column/defaults';
import type { TableHeader } from './table-header';
import type { DefaultRow, Table } from './table/defaults';
import type { Store } from './store';
declare class TableLayout<T extends DefaultRow> {
observers: TableHeader[];
table: Table<T>;
store: Store<T>;
columns: TableColumnCtx<T>[];
fit: boolean;
showHeader: boolean;
height: Ref<null | number>;
scrollX: Ref<boolean>;
scrollY: Ref<boolean>;
bodyWidth: Ref<null | number>;
fixedWidth: Ref<null | number>;
rightFixedWidth: Ref<null | number>;
tableHeight: Ref<null | number>;
headerHeight: Ref<null | number>;
appendHeight: Ref<null | number>;
footerHeight: Ref<null | number>;
gutterWidth: number;
constructor(options: Record<string, any>);
updateScrollY(): boolean;
setHeight(value: string | number | null, prop?: string): void;
setMaxHeight(value: string | number | null): void;
getFlattenColumns(): TableColumnCtx<T>[];
updateElsHeight(): void;
headerDisplayNone(elm: HTMLElement): boolean;
updateColumnsWidth(): void;
addObserver(observer: TableHeader): void;
removeObserver(observer: TableHeader): void;
notifyObservers(event: string): void;
}
export default TableLayout;

View File

@@ -0,0 +1,207 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var util = require('./util.js');
var shared = require('@vue/shared');
var core = require('@vueuse/core');
var types = require('../../../utils/types.js');
class TableLayout {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = [];
this.fit = true;
this.showHeader = true;
this.height = vue.ref(null);
this.scrollX = vue.ref(false);
this.scrollY = vue.ref(false);
this.bodyWidth = vue.ref(null);
this.fixedWidth = vue.ref(null);
this.rightFixedWidth = vue.ref(null);
this.gutterWidth = 0;
for (const name in options) {
if (shared.hasOwn(options, name)) {
if (vue.isRef(this[name])) {
this[name].value = options[name];
} else {
this[name] = options[name];
}
}
}
if (!this.table) {
throw new Error("Table is required for Table Layout");
}
if (!this.store) {
throw new Error("Store is required for Table Layout");
}
}
updateScrollY() {
const height = this.height.value;
if (lodashUnified.isNull(height))
return false;
const scrollBarRef = this.table.refs.scrollBarRef;
if (this.table.vnode.el && (scrollBarRef == null ? void 0 : scrollBarRef.wrapRef)) {
let scrollY = true;
const prevScrollY = this.scrollY.value;
scrollY = scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight;
this.scrollY.value = scrollY;
return prevScrollY !== scrollY;
}
return false;
}
setHeight(value, prop = "height") {
if (!core.isClient)
return;
const el = this.table.vnode.el;
value = util.parseHeight(value);
this.height.value = Number(value);
if (!el && (value || value === 0)) {
vue.nextTick(() => this.setHeight(value, prop));
return;
}
if (el && types.isNumber(value)) {
el.style[prop] = `${value}px`;
this.updateElsHeight();
} else if (el && shared.isString(value)) {
el.style[prop] = value;
this.updateElsHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, "max-height");
}
getFlattenColumns() {
const flattenColumns = [];
const columns = this.table.store.states.columns.value;
columns.forEach((column) => {
if (column.isColumnGroup) {
flattenColumns.push.apply(flattenColumns, column.columns);
} else {
flattenColumns.push(column);
}
});
return flattenColumns;
}
updateElsHeight() {
this.updateScrollY();
this.notifyObservers("scrollable");
}
headerDisplayNone(elm) {
if (!elm)
return true;
let headerChild = elm;
while (headerChild.tagName !== "DIV") {
if (getComputedStyle(headerChild).display === "none") {
return true;
}
headerChild = headerChild.parentElement;
}
return false;
}
updateColumnsWidth() {
var _a;
if (!core.isClient)
return;
const fit = this.fit;
const bodyWidth = (_a = this.table.vnode.el) == null ? void 0 : _a.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter((column) => !types.isNumber(column.width));
flattenColumns.forEach((column) => {
if (types.isNumber(column.width) && column.realWidth)
column.realWidth = null;
});
if (flexColumns.length > 0 && fit) {
flattenColumns.forEach((column) => {
bodyMinWidth += Number(column.width || column.minWidth || 80);
});
if (bodyMinWidth <= bodyWidth) {
this.scrollX.value = false;
const totalFlexWidth = bodyWidth - bodyMinWidth;
if (flexColumns.length === 1) {
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
} else {
const allColumnsWidth = flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
const flexWidthPerPixel = totalFlexWidth / allColumnsWidth;
let noneFirstWidth = 0;
flexColumns.forEach((column, index) => {
if (index === 0)
return;
const flexWidth = Math.floor(Number(column.minWidth || 80) * flexWidthPerPixel);
noneFirstWidth += flexWidth;
column.realWidth = Number(column.minWidth || 80) + flexWidth;
});
flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth - noneFirstWidth;
}
} else {
this.scrollX.value = true;
flexColumns.forEach((column) => {
column.realWidth = Number(column.minWidth);
});
}
this.bodyWidth.value = Math.max(bodyMinWidth, bodyWidth);
this.table.state.resizeState.value.width = this.bodyWidth.value;
} else {
flattenColumns.forEach((column) => {
if (!column.width && !column.minWidth) {
column.realWidth = 80;
} else {
column.realWidth = Number(column.width || column.minWidth);
}
bodyMinWidth += column.realWidth;
});
this.scrollX.value = bodyMinWidth > bodyWidth;
this.bodyWidth.value = bodyMinWidth;
}
const fixedColumns = this.store.states.fixedColumns.value;
if (fixedColumns.length > 0) {
let fixedWidth = 0;
fixedColumns.forEach((column) => {
fixedWidth += Number(column.realWidth || column.width);
});
this.fixedWidth.value = fixedWidth;
}
const rightFixedColumns = this.store.states.rightFixedColumns.value;
if (rightFixedColumns.length > 0) {
let rightFixedWidth = 0;
rightFixedColumns.forEach((column) => {
rightFixedWidth += Number(column.realWidth || column.width);
});
this.rightFixedWidth.value = rightFixedWidth;
}
this.notifyObservers("columns");
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
const index = this.observers.indexOf(observer);
if (index !== -1) {
this.observers.splice(index, 1);
}
}
notifyObservers(event) {
const observers = this.observers;
observers.forEach((observer) => {
var _a, _b;
switch (event) {
case "columns":
(_a = observer.state) == null ? void 0 : _a.onColumnsChange(this);
break;
case "scrollable":
(_b = observer.state) == null ? void 0 : _b.onScrollableChange(this);
break;
default:
throw new Error(`Table Layout don't have event ${event}.`);
}
});
}
}
exports["default"] = TableLayout;
//# sourceMappingURL=table-layout.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,376 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var index$4 = require('../../scrollbar/index.js');
var helper = require('./store/helper.js');
var tableLayout = require('./table-layout.js');
var index$1 = require('./table-header/index.js');
var index$2 = require('./table-body/index.js');
var index$3 = require('./table-footer/index.js');
var utilsHelper$1 = require('./table/utils-helper.js');
var utilsHelper = require('./table-header/utils-helper.js');
var styleHelper = require('./table/style-helper.js');
var keyRenderHelper = require('./table/key-render-helper.js');
var defaults = require('./table/defaults.js');
var tokens = require('./tokens.js');
var hHelper = require('./h-helper.js');
var useScrollbar = require('./composables/use-scrollbar.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../directives/mousewheel/index.js');
var index$5 = require('../../../hooks/use-locale/index.js');
var index$6 = require('../../../hooks/use-namespace/index.js');
let tableIdSeed = 1;
const _sfc_main = vue.defineComponent({
name: "ElTable",
directives: {
Mousewheel: index["default"]
},
components: {
TableHeader: index$1["default"],
TableBody: index$2["default"],
TableFooter: index$3["default"],
ElScrollbar: index$4.ElScrollbar,
hColgroup: hHelper.hColgroup
},
props: defaults["default"],
emits: [
"select",
"select-all",
"selection-change",
"cell-mouse-enter",
"cell-mouse-leave",
"cell-contextmenu",
"cell-click",
"cell-dblclick",
"row-click",
"row-contextmenu",
"row-dblclick",
"header-click",
"header-contextmenu",
"sort-change",
"filter-change",
"current-change",
"header-dragend",
"expand-change",
"scroll"
],
setup(props) {
const { t } = index$5.useLocale();
const ns = index$6.useNamespace("table");
const table = vue.getCurrentInstance();
vue.provide(tokens.TABLE_INJECTION_KEY, table);
const store = helper.createStore(table, props);
table.store = store;
const layout = new tableLayout["default"]({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader
});
table.layout = layout;
const isEmpty = vue.computed(() => (store.states.data.value || []).length === 0);
const {
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
sort,
updateKeyChildren
} = utilsHelper$1["default"](store);
const {
isHidden,
renderExpanded,
setDragVisible,
isGroup,
handleMouseLeave,
handleHeaderFooterMousewheel,
tableSize,
emptyBlockStyle,
resizeProxyVisible,
bodyWidth,
resizeState,
doLayout,
tableBodyStyles,
tableLayout: tableLayout$1,
scrollbarViewStyle,
scrollbarStyle
} = styleHelper["default"](props, layout, store, table);
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar.useScrollbar();
const debouncedUpdateLayout = lodashUnified.debounce(doLayout, 50);
const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout
};
const computedSumText = vue.computed(() => {
var _a;
return (_a = props.sumText) != null ? _a : t("el.table.sumText");
});
const computedEmptyText = vue.computed(() => {
var _a;
return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
});
const columns = vue.computed(() => {
return utilsHelper.convertToRows(store.states.originColumns.value)[0];
});
keyRenderHelper["default"](table);
vue.onBeforeUnmount(() => {
debouncedUpdateLayout.cancel();
});
return {
ns,
layout,
store,
columns,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
isEmpty,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
tableBodyStyles,
emptyBlockStyle,
debouncedUpdateLayout,
setCurrentRow,
getSelectionRows,
toggleRowSelection,
clearSelection,
clearFilter,
toggleAllSelection,
toggleRowExpansion,
clearSort,
doLayout,
sort,
updateKeyChildren,
t,
setDragVisible,
context: table,
computedSumText,
computedEmptyText,
tableLayout: tableLayout$1,
scrollbarViewStyle,
scrollbarStyle,
scrollBarRef,
scrollTo,
setScrollLeft,
setScrollTop,
allowDragLastColumn: props.allowDragLastColumn
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hColgroup = vue.resolveComponent("hColgroup");
const _component_table_header = vue.resolveComponent("table-header");
const _component_table_body = vue.resolveComponent("table-body");
const _component_table_footer = vue.resolveComponent("table-footer");
const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
const _directive_mousewheel = vue.resolveDirective("mousewheel");
return vue.openBlock(), vue.createElementBlock("div", {
ref: "tableWrapper",
class: vue.normalizeClass([
{
[_ctx.ns.m("fit")]: _ctx.fit,
[_ctx.ns.m("striped")]: _ctx.stripe,
[_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
[_ctx.ns.m("hidden")]: _ctx.isHidden,
[_ctx.ns.m("group")]: _ctx.isGroup,
[_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
[_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
[_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
[_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
[_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
"has-footer": _ctx.showSummary
},
_ctx.ns.m(_ctx.tableSize),
_ctx.className,
_ctx.ns.b(),
_ctx.ns.m(`layout-${_ctx.tableLayout}`)
]),
style: vue.normalizeStyle(_ctx.style),
"data-prefix": _ctx.ns.namespace.value,
onMouseleave: _ctx.handleMouseLeave
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(_ctx.ns.e("inner-wrapper"))
}, [
vue.createElementVNode("div", {
ref: "hiddenColumns",
class: "hidden-columns"
}, [
vue.renderSlot(_ctx.$slots, "default")
], 512),
_ctx.showHeader && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "headerWrapper",
class: vue.normalizeClass(_ctx.ns.e("header-wrapper"))
}, [
vue.createElementVNode("table", {
ref: "tableHeader",
class: vue.normalizeClass(_ctx.ns.e("header")),
style: vue.normalizeStyle(_ctx.tableBodyStyles),
border: "0",
cellpadding: "0",
cellspacing: "0"
}, [
vue.createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
vue.createVNode(_component_table_header, {
ref: "tableHeaderRef",
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
"append-filter-panel-to": _ctx.appendFilterPanelTo,
"allow-drag-last-column": _ctx.allowDragLastColumn,
onSetDragVisible: _ctx.setDragVisible
}, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "allow-drag-last-column", "onSetDragVisible"])
], 6)
], 2)), [
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
]) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
ref: "bodyWrapper",
class: vue.normalizeClass(_ctx.ns.e("body-wrapper"))
}, [
vue.createVNode(_component_el_scrollbar, {
ref: "scrollBarRef",
"view-style": _ctx.scrollbarViewStyle,
"wrap-style": _ctx.scrollbarStyle,
always: _ctx.scrollbarAlwaysOn,
tabindex: _ctx.scrollbarTabindex,
native: _ctx.nativeScrollbar,
onScroll: ($event) => _ctx.$emit("scroll", $event)
}, {
default: vue.withCtx(() => [
vue.createElementVNode("table", {
ref: "tableBody",
class: vue.normalizeClass(_ctx.ns.e("body")),
cellspacing: "0",
cellpadding: "0",
border: "0",
style: vue.normalizeStyle({
width: _ctx.bodyWidth,
tableLayout: _ctx.tableLayout
})
}, [
vue.createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
_ctx.showHeader && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_header, {
key: 0,
ref: "tableHeaderRef",
class: vue.normalizeClass(_ctx.ns.e("body-header")),
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
"append-filter-panel-to": _ctx.appendFilterPanelTo,
onSetDragVisible: _ctx.setDragVisible
}, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(_component_table_body, {
context: _ctx.context,
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.tooltipEffect,
"tooltip-options": _ctx.tooltipOptions,
"row-style": _ctx.rowStyle,
store: _ctx.store,
stripe: _ctx.stripe
}, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]),
_ctx.showSummary && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_footer, {
key: 1,
class: vue.normalizeClass(_ctx.ns.e("body-footer")),
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
"sum-text": _ctx.computedSumText,
"summary-method": _ctx.summaryMethod
}, null, 8, ["class", "border", "default-sort", "store", "sum-text", "summary-method"])) : vue.createCommentVNode("v-if", true)
], 6),
_ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "emptyBlock",
style: vue.normalizeStyle(_ctx.emptyBlockStyle),
class: vue.normalizeClass(_ctx.ns.e("empty-block"))
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(_ctx.ns.e("empty-text"))
}, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
])
], 2)
], 6)) : vue.createCommentVNode("v-if", true),
_ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref: "appendWrapper",
class: vue.normalizeClass(_ctx.ns.e("append-wrapper"))
}, [
vue.renderSlot(_ctx.$slots, "append")
], 2)) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["view-style", "wrap-style", "always", "tabindex", "native", "onScroll"])
], 2),
_ctx.showSummary && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref: "footerWrapper",
class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
}, [
vue.createElementVNode("table", {
class: vue.normalizeClass(_ctx.ns.e("footer")),
cellspacing: "0",
cellpadding: "0",
border: "0",
style: vue.normalizeStyle(_ctx.tableBodyStyles)
}, [
vue.createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
vue.createVNode(_component_table_footer, {
border: _ctx.border,
"default-sort": _ctx.defaultSort,
store: _ctx.store,
"sum-text": _ctx.computedSumText,
"summary-method": _ctx.summaryMethod
}, null, 8, ["border", "default-sort", "store", "sum-text", "summary-method"])
], 6)
], 2)), [
[vue.vShow, !_ctx.isEmpty],
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
]) : vue.createCommentVNode("v-if", true),
_ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: vue.normalizeClass(_ctx.ns.e("border-left-patch"))
}, null, 2)) : vue.createCommentVNode("v-if", true)
], 2),
vue.withDirectives(vue.createElementVNode("div", {
ref: "resizeProxy",
class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy"))
}, null, 2), [
[vue.vShow, _ctx.resizeProxyVisible]
])
], 46, ["data-prefix", "onMouseleave"]);
}
var Table = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "table.vue"]]);
exports["default"] = Table;
//# sourceMappingURL=table.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,869 @@
import TableLayout from './table-layout';
import type { Table } from './table/defaults';
declare const _default: import("vue").DefineComponent<{
data: {
type: import("vue").PropType<any[]>;
default: () => never[];
};
size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
fit: {
type: BooleanConstructor;
default: boolean;
};
stripe: BooleanConstructor;
border: BooleanConstructor;
rowKey: import("vue").PropType<import("./table/defaults").TableProps<any>["rowKey"]>;
showHeader: {
type: BooleanConstructor;
default: boolean;
};
showSummary: BooleanConstructor;
sumText: StringConstructor;
summaryMethod: import("vue").PropType<import("./table/defaults").TableProps<any>["summaryMethod"]>;
rowClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["rowStyle"]>;
cellClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["cellClassName"]>;
cellStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["cellStyle"]>;
headerRowClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["headerRowClassName"]>;
headerRowStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["headerRowStyle"]>;
headerCellClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["headerCellClassName"]>;
headerCellStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["headerCellStyle"]>;
highlightCurrentRow: BooleanConstructor;
currentRowKey: (NumberConstructor | StringConstructor)[];
emptyText: StringConstructor;
expandRowKeys: import("vue").PropType<import("./table/defaults").TableProps<any>["expandRowKeys"]>;
defaultExpandAll: BooleanConstructor;
defaultSort: import("vue").PropType<import("./table/defaults").TableProps<any>["defaultSort"]>;
tooltipEffect: StringConstructor;
tooltipOptions: import("vue").PropType<import("./table/defaults").TableProps<any>["tooltipOptions"]>;
spanMethod: import("vue").PropType<import("./table/defaults").TableProps<any>["spanMethod"]>;
selectOnIndeterminate: {
type: BooleanConstructor;
default: boolean;
};
indent: {
type: NumberConstructor;
default: number;
};
treeProps: {
type: import("vue").PropType<import("./table/defaults").TableProps<any>["treeProps"]>;
default: () => {
hasChildren: string;
children: string;
checkStrictly: boolean;
};
};
lazy: BooleanConstructor;
load: import("vue").PropType<import("./table/defaults").TableProps<any>["load"]>;
style: {
type: import("vue").PropType<import("vue").CSSProperties>;
default: () => {};
};
className: {
type: StringConstructor;
default: string;
};
tableLayout: {
type: import("vue").PropType<"fixed" | "auto">;
default: string;
};
scrollbarAlwaysOn: BooleanConstructor;
flexible: BooleanConstructor;
showOverflowTooltip: import("vue").PropType<import("./table/defaults").TableProps<any>["showOverflowTooltip"]>;
tooltipFormatter: import("vue").PropType<import("./table/defaults").TableProps<any>["tooltipFormatter"]>;
appendFilterPanelTo: StringConstructor;
scrollbarTabindex: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
allowDragLastColumn: {
type: BooleanConstructor;
default: boolean;
};
preserveExpandedContent: BooleanConstructor;
nativeScrollbar: BooleanConstructor;
}, {
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
layout: TableLayout<any>;
store: {
mutations: {
setData(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, data: any[]): void;
insertColumn(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, column: import("./table-column/defaults").TableColumnCtx<any>, parent: import("./table-column/defaults").TableColumnCtx<any>, updateColumnOrder: () => void): void;
updateColumnOrder(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, column: import("./table-column/defaults").TableColumnCtx<any>): void;
removeColumn(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, column: import("./table-column/defaults").TableColumnCtx<any>, parent: import("./table-column/defaults").TableColumnCtx<any>, updateColumnOrder: () => void): void;
sort(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, options: import("./table/defaults").Sort): void;
changeSortCondition(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, options: import("./table/defaults").Sort): void;
filterChange(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, options: import("./table/defaults").Filter<any>): void;
toggleAllSelection(): void;
rowSelectedChanged(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, row: any): void;
setHoverRow(states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, row: any): void;
setCurrentRow(_states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
}, row: any): void;
};
commit: (name: "sort" | "setData" | "insertColumn" | "updateColumnOrder" | "removeColumn" | "changeSortCondition" | "filterChange" | "toggleAllSelection" | "rowSelectedChanged" | "setHoverRow" | "setCurrentRow", ...args: any[]) => void;
updateTableScrollY: () => void;
assertRowKey: () => void;
updateColumns: () => void;
scheduleLayout: (needUpdateColumns?: boolean, immediate?: boolean) => void;
isSelected: (row: any) => boolean;
clearSelection: () => void;
cleanSelection: () => void;
getSelectionRows: () => any[];
toggleRowSelection: (row: any, selected?: boolean, emitChange?: boolean, ignoreSelectable?: boolean) => void;
_toggleAllSelection: () => void;
toggleAllSelection: (() => void) | null;
updateAllSelected: () => void;
updateFilters: (column: import("./table-column/defaults").TableColumnCtx<any>, values: string[]) => Record<string, string[]>;
updateCurrentRow: (_currentRow: any) => void;
updateSort: (column: import("./table-column/defaults").TableColumnCtx<any> | null, prop: string | null, order: import("./table/defaults").TableSortOrder | null) => void;
execFilter: () => void;
execSort: () => void;
execQuery: (ignore?: {
filter: boolean;
} | undefined) => void;
clearFilter: (columnKeys?: string[] | string) => void;
clearSort: () => void;
toggleRowExpansion: (row: any, expanded?: boolean) => void;
setExpandRowKeysAdapter: (val: string[]) => void;
setCurrentRowKey: (key: string) => void;
toggleRowExpansionAdapter: (row: any, expanded?: boolean) => void;
isRowExpanded: (row: any) => boolean;
updateExpandRows: () => void;
updateCurrentRowData: () => void;
loadOrToggle: (row: any) => void;
updateTreeData: (ifChangeExpandRowKeys?: boolean, ifExpandAll?: boolean) => void;
updateKeyChildren: (key: string, data: any[]) => void;
states: {
_currentRowKey: import("vue").Ref<string | null>;
currentRow: import("vue").Ref<any>;
expandRowKeys: import("vue").Ref<string[]>;
treeData: import("vue").Ref<Record<string, import("./store/tree").TreeData>>;
indent: import("vue").Ref<number>;
lazy: import("vue").Ref<boolean>;
lazyTreeNodeMap: import("vue").Ref<Record<string, any[]>>;
lazyColumnIdentifier: import("vue").Ref<string>;
childrenColumnName: import("vue").Ref<string>;
checkStrictly: import("vue").Ref<boolean>;
expandRows: import("vue").Ref<any[]>;
defaultExpandAll: import("vue").Ref<boolean>;
tableSize: import("vue").Ref<any>;
rowKey: import("vue").Ref<string | null>;
data: import("vue").Ref<any[]>;
_data: import("vue").Ref<any[]>;
isComplex: import("vue").Ref<boolean>;
_columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
originColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
columns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
leafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
fixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
rightFixedLeafColumns: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: import("vue").Ref<number>;
fixedLeafColumnsLength: import("vue").Ref<number>;
rightFixedLeafColumnsLength: import("vue").Ref<number>;
isAllSelected: import("vue").Ref<boolean>;
selection: import("vue").Ref<any[]>;
reserveSelection: import("vue").Ref<boolean>;
selectOnIndeterminate: import("vue").Ref<boolean>;
selectable: import("vue").Ref<((row: any, index: number) => boolean) | null>;
filters: import("vue").Ref<import("./store").StoreFilter>;
filteredData: import("vue").Ref<any[] | null>;
sortingColumn: import("vue").Ref<import("./table-column/defaults").TableColumnCtx<any> | null>;
sortProp: import("vue").Ref<string | null>;
sortOrder: import("vue").Ref<string | number | null>;
hoverRow: import("vue").Ref<any>;
};
ns: {
namespace: import("vue").ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
};
columns: import("vue").ComputedRef<import("./table-column/defaults").TableColumnCtx<any>[]>;
handleHeaderFooterMousewheel: (_event: WheelEvent, data: any) => void;
handleMouseLeave: () => void;
tableId: string;
tableSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
isHidden: import("vue").Ref<boolean>;
isEmpty: import("vue").ComputedRef<boolean>;
renderExpanded: import("vue").Ref<import("./table/defaults").RenderExpanded<any> | null>;
resizeProxyVisible: import("vue").Ref<boolean>;
resizeState: import("vue").Ref<{
width: null | number;
height: null | number;
headerHeight: null | number;
}>;
isGroup: import("vue").Ref<boolean>;
bodyWidth: import("vue").ComputedRef<string>;
tableBodyStyles: import("vue").ComputedRef<{
width: string;
}>;
emptyBlockStyle: import("vue").ComputedRef<{
width: string;
height: string;
} | undefined>;
debouncedUpdateLayout: import("lodash").DebouncedFunc<() => void>;
/**
* @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection
*/
setCurrentRow: (row: any) => void;
/**
* @description returns the currently selected rows
*/
getSelectionRows: () => any[];
/**
* @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected
*/
toggleRowSelection: (row: any, selected?: boolean, ignoreSelectable?: boolean) => void;
/**
* @description used in multiple selection Table, clear user selection
*/
clearSelection: () => void;
/**
* @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters
*/
clearFilter: (columnKeys?: string[] | string) => void;
/**
* @description used in multiple selection Table, toggle select all and deselect all
*/
toggleAllSelection: () => void;
/**
* @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed
*/
toggleRowExpansion: (row: any, expanded?: boolean) => void;
/**
* @description clear sorting, restore data to the original order
*/
clearSort: () => void;
/**
* @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout
*/
doLayout: () => void;
/**
* @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order
*/
sort: (prop: string, order: string) => void;
/**
* @description used in lazy Table, must set `rowKey`, update key children
*/
updateKeyChildren: (key: string, data: any[]) => void;
t: import("element-plus/es/hooks").Translator;
setDragVisible: (visible: boolean) => void;
context: Table<any>;
computedSumText: import("vue").ComputedRef<string>;
computedEmptyText: import("vue").ComputedRef<string>;
tableLayout: import("vue").ComputedRef<("fixed" | "auto") | undefined>;
scrollbarViewStyle: {
display: string;
verticalAlign: string;
};
scrollbarStyle: import("vue").ComputedRef<{
height: string;
maxHeight?: undefined;
} | {
maxHeight: string;
height?: undefined;
} | {
height?: undefined;
maxHeight?: undefined;
}>;
scrollBarRef: import("vue").Ref<any>;
/**
* @description scrolls to a particular set of coordinates
*/
scrollTo: (options: ScrollToOptions | number, yCoord?: number) => void;
/**
* @description set horizontal scroll position
*/
setScrollLeft: (left?: number) => void;
/**
* @description set vertical scroll position
*/
setScrollTop: (top?: number) => void;
/**
* @description whether to allow drag the last column
*/
allowDragLastColumn: boolean;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "scroll" | "select-all" | "expand-change" | "current-change" | "header-click" | "header-contextmenu" | "header-dragend" | "selection-change" | "sort-change" | "filter-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick")[], "select" | "scroll" | "select-all" | "expand-change" | "current-change" | "header-click" | "header-contextmenu" | "header-dragend" | "selection-change" | "sort-change" | "filter-change" | "cell-mouse-enter" | "cell-mouse-leave" | "cell-contextmenu" | "cell-click" | "cell-dblclick" | "row-click" | "row-contextmenu" | "row-dblclick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
data: {
type: import("vue").PropType<any[]>;
default: () => never[];
};
size: {
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
width: (NumberConstructor | StringConstructor)[];
height: (NumberConstructor | StringConstructor)[];
maxHeight: (NumberConstructor | StringConstructor)[];
fit: {
type: BooleanConstructor;
default: boolean;
};
stripe: BooleanConstructor;
border: BooleanConstructor;
rowKey: import("vue").PropType<import("./table/defaults").TableProps<any>["rowKey"]>;
showHeader: {
type: BooleanConstructor;
default: boolean;
};
showSummary: BooleanConstructor;
sumText: StringConstructor;
summaryMethod: import("vue").PropType<import("./table/defaults").TableProps<any>["summaryMethod"]>;
rowClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["rowClassName"]>;
rowStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["rowStyle"]>;
cellClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["cellClassName"]>;
cellStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["cellStyle"]>;
headerRowClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["headerRowClassName"]>;
headerRowStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["headerRowStyle"]>;
headerCellClassName: import("vue").PropType<import("./table/defaults").TableProps<any>["headerCellClassName"]>;
headerCellStyle: import("vue").PropType<import("./table/defaults").TableProps<any>["headerCellStyle"]>;
highlightCurrentRow: BooleanConstructor;
currentRowKey: (NumberConstructor | StringConstructor)[];
emptyText: StringConstructor;
expandRowKeys: import("vue").PropType<import("./table/defaults").TableProps<any>["expandRowKeys"]>;
defaultExpandAll: BooleanConstructor;
defaultSort: import("vue").PropType<import("./table/defaults").TableProps<any>["defaultSort"]>;
tooltipEffect: StringConstructor;
tooltipOptions: import("vue").PropType<import("./table/defaults").TableProps<any>["tooltipOptions"]>;
spanMethod: import("vue").PropType<import("./table/defaults").TableProps<any>["spanMethod"]>;
selectOnIndeterminate: {
type: BooleanConstructor;
default: boolean;
};
indent: {
type: NumberConstructor;
default: number;
};
treeProps: {
type: import("vue").PropType<import("./table/defaults").TableProps<any>["treeProps"]>;
default: () => {
hasChildren: string;
children: string;
checkStrictly: boolean;
};
};
lazy: BooleanConstructor;
load: import("vue").PropType<import("./table/defaults").TableProps<any>["load"]>;
style: {
type: import("vue").PropType<import("vue").CSSProperties>;
default: () => {};
};
className: {
type: StringConstructor;
default: string;
};
tableLayout: {
type: import("vue").PropType<"fixed" | "auto">;
default: string;
};
scrollbarAlwaysOn: BooleanConstructor;
flexible: BooleanConstructor;
showOverflowTooltip: import("vue").PropType<import("./table/defaults").TableProps<any>["showOverflowTooltip"]>;
tooltipFormatter: import("vue").PropType<import("./table/defaults").TableProps<any>["tooltipFormatter"]>;
appendFilterPanelTo: StringConstructor;
scrollbarTabindex: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
allowDragLastColumn: {
type: BooleanConstructor;
default: boolean;
};
preserveExpandedContent: BooleanConstructor;
nativeScrollbar: BooleanConstructor;
}>> & {
onScroll?: ((...args: any[]) => any) | undefined;
onSelect?: ((...args: any[]) => any) | undefined;
"onExpand-change"?: ((...args: any[]) => any) | undefined;
"onCurrent-change"?: ((...args: any[]) => any) | undefined;
"onSelect-all"?: ((...args: any[]) => any) | undefined;
"onHeader-click"?: ((...args: any[]) => any) | undefined;
"onHeader-contextmenu"?: ((...args: any[]) => any) | undefined;
"onHeader-dragend"?: ((...args: any[]) => any) | undefined;
"onSelection-change"?: ((...args: any[]) => any) | undefined;
"onSort-change"?: ((...args: any[]) => any) | undefined;
"onFilter-change"?: ((...args: any[]) => any) | undefined;
"onCell-mouse-enter"?: ((...args: any[]) => any) | undefined;
"onCell-mouse-leave"?: ((...args: any[]) => any) | undefined;
"onCell-contextmenu"?: ((...args: any[]) => any) | undefined;
"onCell-click"?: ((...args: any[]) => any) | undefined;
"onCell-dblclick"?: ((...args: any[]) => any) | undefined;
"onRow-click"?: ((...args: any[]) => any) | undefined;
"onRow-contextmenu"?: ((...args: any[]) => any) | undefined;
"onRow-dblclick"?: ((...args: any[]) => any) | undefined;
}, {
data: any[];
style: import("vue").CSSProperties;
tableLayout: "fixed" | "auto";
border: boolean;
className: string;
fit: boolean;
lazy: boolean;
scrollbarAlwaysOn: boolean;
allowDragLastColumn: boolean;
treeProps: import("./table/defaults").TreeProps | undefined;
defaultExpandAll: boolean;
selectOnIndeterminate: boolean;
indent: number;
stripe: boolean;
showHeader: boolean;
showSummary: boolean;
highlightCurrentRow: boolean;
flexible: boolean;
scrollbarTabindex: string | number;
nativeScrollbar: boolean;
preserveExpandedContent: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,385 @@
import type { CSSProperties, ComponentInternalInstance, PropType, Ref, VNode } from 'vue';
import type { ComponentSize } from 'element-plus/es/constants';
import type { Nullable } from 'element-plus/es/utils';
import type { Store } from '../store';
import type { TableColumnCtx } from '../table-column/defaults';
import type TableLayout from '../table-layout';
import type { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from '../util';
type DefaultRow = Record<PropertyKey, any>;
interface TableRefs {
tableWrapper: HTMLElement;
headerWrapper: HTMLElement;
footerWrapper: HTMLElement;
fixedBodyWrapper: HTMLElement;
rightFixedBodyWrapper: HTMLElement;
bodyWrapper: HTMLElement;
appendWrapper: HTMLElement;
[key: string]: any;
}
interface TableState {
isGroup: Ref<boolean>;
resizeState: Ref<{
width: any;
height: any;
}>;
doLayout: () => void;
debouncedUpdateLayout: () => void;
}
interface TreeProps {
hasChildren?: string;
children?: string;
checkStrictly?: boolean;
}
type HoverState<T extends DefaultRow> = Nullable<{
cell: HTMLElement;
column: TableColumnCtx<T>;
row: T;
}>;
type RIS<T extends DefaultRow> = {
row: T;
$index: number;
store: Store<T>;
expanded: boolean;
};
type RenderExpanded<T extends DefaultRow> = ({ row, $index, store, expanded, }: RIS<T>) => VNode[] | undefined;
type SummaryMethod<T extends DefaultRow> = (data: {
columns: TableColumnCtx<T>[];
data: T[];
}) => (string | VNode)[];
interface Table<T extends DefaultRow = any> extends ComponentInternalInstance {
$ready: boolean;
hoverState?: HoverState<T> | null;
renderExpanded: RenderExpanded<T>;
store: Store<T>;
layout: TableLayout<T>;
refs: TableRefs;
tableId: string;
state: TableState;
}
type ColumnCls<T> = string | ((data: {
row: T;
rowIndex: number;
}) => string);
type ColumnStyle<T> = CSSProperties | ((data: {
row: T;
rowIndex: number;
}) => CSSProperties);
type CellCls<T extends DefaultRow> = string | ((data: {
row: T;
rowIndex: number;
column: TableColumnCtx<T>;
columnIndex: number;
}) => string);
type CellStyle<T extends DefaultRow> = CSSProperties | ((data: {
row: T;
rowIndex: number;
column: TableColumnCtx<T>;
columnIndex: number;
}) => CSSProperties);
type Layout = 'fixed' | 'auto';
interface TableProps<T extends DefaultRow> {
data: T[];
size?: ComponentSize;
width?: string | number;
height?: string | number;
maxHeight?: string | number;
fit?: boolean;
stripe?: boolean;
border?: boolean;
rowKey?: string | ((row: T) => string);
context?: Table<T>;
showHeader?: boolean;
showSummary?: boolean;
sumText?: string;
summaryMethod?: SummaryMethod<T>;
rowClassName?: ColumnCls<T>;
rowStyle?: ColumnStyle<T>;
cellClassName?: CellCls<T>;
cellStyle?: CellStyle<T>;
headerRowClassName?: ColumnCls<T>;
headerRowStyle?: ColumnStyle<T>;
headerCellClassName?: CellCls<T>;
headerCellStyle?: CellStyle<T>;
highlightCurrentRow?: boolean;
currentRowKey?: string | number;
emptyText?: string;
expandRowKeys?: Array<string>;
defaultExpandAll?: boolean;
defaultSort?: Sort;
tooltipEffect?: string;
tooltipOptions?: TableOverflowTooltipOptions;
spanMethod?: (data: {
row: T;
rowIndex: number;
column: TableColumnCtx<T>;
columnIndex: number;
}) => number[] | {
rowspan: number;
colspan: number;
} | undefined;
selectOnIndeterminate?: boolean;
indent?: number;
treeProps?: TreeProps;
lazy?: boolean;
load?: (row: T, treeNode: TreeNode, resolve: (data: T[]) => void) => void;
className?: string;
style?: CSSProperties;
tableLayout?: Layout;
scrollbarAlwaysOn?: boolean;
flexible?: boolean;
showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
tooltipFormatter?: TableOverflowTooltipFormatter<T>;
appendFilterPanelTo?: string;
scrollbarTabindex?: number | string;
nativeScrollbar?: boolean;
}
type TableTooltipData<T extends DefaultRow> = Parameters<TableOverflowTooltipFormatter<T>>[0];
type TableSortOrder = 'ascending' | 'descending';
interface Sort {
prop: string;
order: TableSortOrder;
init?: any;
silent?: any;
}
interface Filter<T extends DefaultRow> {
column: TableColumnCtx<T>;
values: string[];
silent: any;
}
interface TreeNode {
expanded?: boolean;
loading?: boolean;
noLazyChildren?: boolean;
indent?: number;
level?: number;
display?: boolean;
}
interface RenderRowData<T extends DefaultRow> {
store: Store<T>;
_self: Table<T>;
column: TableColumnCtx<T>;
row: T;
$index: number;
cellIndex: number;
treeNode?: TreeNode;
expanded: boolean;
}
declare const _default: {
/**
* @description table data
*/
data: {
type: PropType<any[]>;
default: () => never[];
};
/**
* @description size of Table
*/
size: {
readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
width: (NumberConstructor | StringConstructor)[];
/**
* @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
*/
height: (NumberConstructor | StringConstructor)[];
/**
* @description table's max-height. The legal value is a number or the height in px
*/
maxHeight: (NumberConstructor | StringConstructor)[];
/**
* @description whether width of column automatically fits its container
*/
fit: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description whether Table is striped
*/
stripe: BooleanConstructor;
/**
* @description whether Table has vertical border
*/
border: BooleanConstructor;
/**
* @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used
*/
rowKey: PropType<TableProps<any>["rowKey"]>;
/**
* @description whether Table header is visible
*/
showHeader: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description whether to display a summary row
*/
showSummary: BooleanConstructor;
/**
* @description displayed text for the first column of summary row
*/
sumText: StringConstructor;
/**
* @description custom summary method
*/
summaryMethod: PropType<TableProps<any>["summaryMethod"]>;
/**
* @description function that returns custom class names for a row, or a string assigning class names for every row
*/
rowClassName: PropType<TableProps<any>["rowClassName"]>;
/**
* @description function that returns custom style for a row, or an object assigning custom style for every row
*/
rowStyle: PropType<TableProps<any>["rowStyle"]>;
/**
* @description function that returns custom class names for a cell, or a string assigning class names for every cell
*/
cellClassName: PropType<TableProps<any>["cellClassName"]>;
/**
* @description function that returns custom style for a cell, or an object assigning custom style for every cell
*/
cellStyle: PropType<TableProps<any>["cellStyle"]>;
/**
* @description function that returns custom class names for a row in table header, or a string assigning class names for every row in table header
*/
headerRowClassName: PropType<TableProps<any>["headerRowClassName"]>;
/**
* @description function that returns custom style for a row in table header, or an object assigning custom style for every row in table header
*/
headerRowStyle: PropType<TableProps<any>["headerRowStyle"]>;
/**
* @description function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header
*/
headerCellClassName: PropType<TableProps<any>["headerCellClassName"]>;
/**
* @description function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header
*/
headerCellStyle: PropType<TableProps<any>["headerCellStyle"]>;
/**
* @description whether current row is highlighted
*/
highlightCurrentRow: BooleanConstructor;
/**
* @description key of current row, a set only prop
*/
currentRowKey: (NumberConstructor | StringConstructor)[];
/**
* @description displayed text when data is empty. You can customize this area with `#empty`
*/
emptyText: StringConstructor;
/**
* @description set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop
*/
expandRowKeys: PropType<TableProps<any>["expandRowKeys"]>;
/**
* @description whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data
*/
defaultExpandAll: BooleanConstructor;
/**
* @description set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order
*/
defaultSort: PropType<TableProps<any>["defaultSort"]>;
/**
* @description the `effect` of the overflow tooltip
*/
tooltipEffect: StringConstructor;
/**
* @description the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes)
*/
tooltipOptions: PropType<TableProps<any>["tooltipOptions"]>;
/**
* @description method that returns rowspan and colspan
*/
spanMethod: PropType<TableProps<any>["spanMethod"]>;
/**
* @description controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected
*/
selectOnIndeterminate: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description horizontal indentation of tree data
*/
indent: {
type: NumberConstructor;
default: number;
};
/**
* @description configuration for rendering nested data
*/
treeProps: {
type: PropType<TableProps<any>["treeProps"]>;
default: () => {
hasChildren: string;
children: string;
checkStrictly: boolean;
};
};
/**
* @description whether to lazy loading data
*/
lazy: BooleanConstructor;
/**
* @description method for loading child row data, only works when `lazy` is true
*/
load: PropType<TableProps<any>["load"]>;
style: {
type: PropType<CSSProperties>;
default: () => {};
};
className: {
type: StringConstructor;
default: string;
};
/**
* @description sets the algorithm used to lay out table cells, rows, and columns
*/
tableLayout: {
type: PropType<Layout>;
default: string;
};
/**
* @description always show scrollbar
*/
scrollbarAlwaysOn: BooleanConstructor;
/**
* @description ensure main axis minimum-size doesn't follow the content
*/
flexible: BooleanConstructor;
/**
* @description whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns
*/
showOverflowTooltip: PropType<TableProps<any>["showOverflowTooltip"]>;
/**
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
*/
tooltipFormatter: PropType<TableProps<any>["tooltipFormatter"]>;
appendFilterPanelTo: StringConstructor;
scrollbarTabindex: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description whether to allow drag the last column
*/
allowDragLastColumn: {
type: BooleanConstructor;
default: boolean;
};
/**
* @description whether to preserve expanded row content in DOM when collapsed
*/
preserveExpandedContent: BooleanConstructor;
/**
* @description whether to use native scrollbars
*/
nativeScrollbar: BooleanConstructor;
};
export default _default;
export type { SummaryMethod, Table, TableProps, TableRefs, ColumnCls, ColumnStyle, CellCls, CellStyle, DefaultRow, TreeNode, RenderRowData, Sort, Filter, TableColumnCtx, TreeProps, TableTooltipData, TableSortOrder, RenderExpanded, };

View File

@@ -0,0 +1,97 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('../../../../hooks/use-size/index.js');
var defaultProps = {
data: {
type: Array,
default: () => []
},
size: index.useSizeProp,
width: [String, Number],
height: [String, Number],
maxHeight: [String, Number],
fit: {
type: Boolean,
default: true
},
stripe: Boolean,
border: Boolean,
rowKey: [String, Function],
showHeader: {
type: Boolean,
default: true
},
showSummary: Boolean,
sumText: String,
summaryMethod: Function,
rowClassName: [String, Function],
rowStyle: [Object, Function],
cellClassName: [String, Function],
cellStyle: [Object, Function],
headerRowClassName: [String, Function],
headerRowStyle: [Object, Function],
headerCellClassName: [String, Function],
headerCellStyle: [Object, Function],
highlightCurrentRow: Boolean,
currentRowKey: [String, Number],
emptyText: String,
expandRowKeys: Array,
defaultExpandAll: Boolean,
defaultSort: Object,
tooltipEffect: String,
tooltipOptions: Object,
spanMethod: Function,
selectOnIndeterminate: {
type: Boolean,
default: true
},
indent: {
type: Number,
default: 16
},
treeProps: {
type: Object,
default: () => {
return {
hasChildren: "hasChildren",
children: "children",
checkStrictly: false
};
}
},
lazy: Boolean,
load: Function,
style: {
type: Object,
default: () => ({})
},
className: {
type: String,
default: ""
},
tableLayout: {
type: String,
default: "fixed"
},
scrollbarAlwaysOn: Boolean,
flexible: Boolean,
showOverflowTooltip: [Boolean, Object],
tooltipFormatter: Function,
appendFilterPanelTo: String,
scrollbarTabindex: {
type: [Number, String],
default: void 0
},
allowDragLastColumn: {
type: Boolean,
default: true
},
preserveExpandedContent: Boolean,
nativeScrollbar: Boolean
};
exports["default"] = defaultProps;
//# sourceMappingURL=defaults.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
import type { Table } from './defaults';
export default function useKeyRender(table: Table<[]>): void;

View File

@@ -0,0 +1,29 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
function useKeyRender(table) {
const observer = vue.ref();
const initWatchDom = () => {
const el = table.vnode.el;
const columnsWrapper = el.querySelector(".hidden-columns");
const config = { childList: true, subtree: true };
const updateOrderFns = table.store.states.updateOrderFns;
observer.value = new MutationObserver(() => {
updateOrderFns.forEach((fn) => fn());
});
observer.value.observe(columnsWrapper, config);
};
vue.onMounted(() => {
initWatchDom();
});
vue.onUnmounted(() => {
var _a;
(_a = observer.value) == null ? void 0 : _a.disconnect();
});
}
exports["default"] = useKeyRender;
//# sourceMappingURL=key-render-helper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"key-render-helper.js","sources":["../../../../../../../packages/components/table/src/table/key-render-helper.ts"],"sourcesContent":["import { onMounted, onUnmounted, ref } from 'vue'\n\nimport type { Table } from './defaults'\n\nexport default function useKeyRender(table: Table<[]>) {\n const observer = ref<MutationObserver>()\n\n const initWatchDom = () => {\n const el = table.vnode.el\n const columnsWrapper = (el as HTMLElement).querySelector('.hidden-columns')\n const config = { childList: true, subtree: true }\n const updateOrderFns = table.store.states.updateOrderFns\n observer.value = new MutationObserver(() => {\n updateOrderFns.forEach((fn: () => void) => fn())\n })\n\n observer.value.observe(columnsWrapper!, config)\n }\n\n onMounted(() => {\n // fix https://github.com/element-plus/element-plus/issues/8528\n initWatchDom()\n })\n\n onUnmounted(() => {\n observer.value?.disconnect()\n })\n}\n"],"names":["ref","onMounted","onUnmounted"],"mappings":";;;;;;AACe,SAAS,YAAY,CAAC,KAAK,EAAE;AAC5C,EAAE,MAAM,QAAQ,GAAGA,OAAG,EAAE,CAAC;AACzB,EAAE,MAAM,YAAY,GAAG,MAAM;AAC7B,IAAI,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AAC9B,IAAI,MAAM,cAAc,GAAG,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC/D,IAAI,MAAM,MAAM,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACtD,IAAI,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;AAC7D,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,gBAAgB,CAAC,MAAM;AAChD,MAAM,cAAc,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;AAC3C,KAAK,CAAC,CAAC;AACP,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACnD,GAAG,CAAC;AACJ,EAAEC,aAAS,CAAC,MAAM;AAClB,IAAI,YAAY,EAAE,CAAC;AACnB,GAAG,CAAC,CAAC;AACL,EAAEC,eAAW,CAAC,MAAM;AACpB,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC;AAC7D,GAAG,CAAC,CAAC;AACL;;;;"}

View File

@@ -0,0 +1,43 @@
import type { DefaultRow, RenderExpanded, Table, TableProps } from './defaults';
import type { Store } from '../store';
import type TableLayout from '../table-layout';
declare function useStyle<T extends DefaultRow>(props: TableProps<T>, layout: TableLayout<T>, store: Store<T>, table: Table<T>): {
isHidden: import("vue").Ref<boolean>;
renderExpanded: import("vue").Ref<RenderExpanded<T> | null>;
setDragVisible: (visible: boolean) => void;
isGroup: import("vue").Ref<boolean>;
handleMouseLeave: () => void;
handleHeaderFooterMousewheel: (_event: WheelEvent, data: any) => void;
tableSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
emptyBlockStyle: import("vue").ComputedRef<{
width: string;
height: string;
} | undefined>;
resizeProxyVisible: import("vue").Ref<boolean>;
bodyWidth: import("vue").ComputedRef<string>;
resizeState: import("vue").Ref<{
width: null | number;
height: null | number;
headerHeight: null | number;
}>;
doLayout: () => void;
tableBodyStyles: import("vue").ComputedRef<{
width: string;
}>;
tableLayout: import("vue").ComputedRef<("fixed" | "auto") | undefined>;
scrollbarViewStyle: {
display: string;
verticalAlign: string;
};
scrollbarStyle: import("vue").ComputedRef<{
height: string;
maxHeight?: undefined;
} | {
maxHeight: string;
height?: undefined;
} | {
height?: undefined;
maxHeight?: undefined;
}>;
};
export default useStyle;

Some files were not shown because too many files have changed in this diff Show More