完全跑通1.0版本

This commit is contained in:
2026-05-26 12:56:03 +08:00
parent 2ece5174a7
commit 93c714a93b
11557 changed files with 1648225 additions and 36 deletions

View File

@@ -0,0 +1,14 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import { TableColumnCtx } from "./src/table-column/defaults.js";
import { CellCls, CellStyle, ColumnCls, ColumnStyle, Filter, RenderRowData, Sort, SummaryMethod, Table, TableConfigContext, TableProps, TableRefs, TableTooltipData, TreeNode } from "./src/table/defaults.js";
import _default from "./src/table.vue.js";
import _default$1 from "./src/table-column/index.js";
//#region ../../packages/components/table/index.d.ts
declare const ElTable: SFCWithInstall<typeof _default> & {
TableColumn: typeof _default$1;
};
declare const ElTableColumn: SFCWithInstall<typeof _default$1>;
type TableInstance = InstanceType<typeof _default> & unknown;
type TableColumnInstance = InstanceType<typeof _default$1> & unknown;
//#endregion
export { type CellCls, type CellStyle, type ColumnCls, type ColumnStyle, ElTable, ElTable as default, ElTableColumn, type Filter, type RenderRowData, type Sort, type SummaryMethod, type Table, type TableColumnCtx, TableColumnInstance, type TableConfigContext, TableInstance, type TableProps, type TableRefs, type TableTooltipData, type TreeNode };

View File

@@ -0,0 +1,10 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import table_default from "./src/table.mjs";
import tableColumn_default from "./src/tableColumn.mjs";
//#region ../../packages/components/table/index.ts
const ElTable = withInstall(table_default, { TableColumn: tableColumn_default });
const ElTableColumn = withNoopInstall(tableColumn_default);
//#endregion
export { ElTable, ElTable as default, ElTableColumn };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Table","TableColumn"],"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 TableConfigContext,\n} from './src/table/defaults'\n"],"mappings":";;;;AAMA,MAAa,UAET,YAAYA,eAAO,EACrB,aAAA,qBACD,CAAC;AAEF,MAAa,gBACX,gBAAgBC,oBAAY"}

View File

@@ -0,0 +1,11 @@
import * as _$vue from "vue";
//#region ../../packages/components/table/src/composables/use-scrollbar.d.ts
declare const useScrollbar: () => {
scrollBarRef: _$vue.Ref<any, any>;
scrollTo: (options: ScrollToOptions | number, yCoord?: number) => void;
setScrollTop: (top?: number) => void;
setScrollLeft: (left?: number) => void;
};
//#endregion
export { useScrollbar };

View File

@@ -0,0 +1,26 @@
import { isNumber } from "../../../../utils/types.mjs";
import { ref } from "vue";
//#region ../../packages/components/table/src/composables/use-scrollbar.ts
const useScrollbar = () => {
const scrollBarRef = 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 && 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
};
};
//#endregion
export { useScrollbar };
//# sourceMappingURL=use-scrollbar.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"use-scrollbar.mjs","names":[],"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"],"mappings":";;;AAGA,MAAa,qBAAqB;CAChC,MAAM,eAAe,KAAK;CAE1B,MAAM,YAAY,SAAmC,WAAoB;EACvE,MAAM,YAAY,aAAa;EAC/B,IAAI,WACF,UAAU,SAAS,SAAS,OAAO;;CAIvC,MAAM,qBAAqB,UAA0B,WAAoB;EACvE,MAAM,YAAY,aAAa;EAC/B,IAAI,aAAa,SAAS,OAAO,IAAI,CAAC,OAAO,OAAO,CAAC,SAAS,SAAS,EACrE,UAAU,YAAY,YAAY,OAAO;;CAI7C,MAAM,gBAAgB,QAAiB,kBAAkB,OAAO,IAAI;CACpE,MAAM,iBAAiB,SAAkB,kBAAkB,QAAQ,KAAK;CAExE,OAAO;EACL;EACA;EACA;EACA;EACD"}

View File

@@ -0,0 +1,120 @@
import { TableColumnCtx } from "./table-column/defaults.js";
import { DefaultRow, TreeNode } from "./table/defaults.js";
import { Store } from "./store/index.js";
import * as _$vue from "vue";
import { VNode } from "vue";
//#region ../../packages/components/table/src/config.d.ts
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;
};
};
declare const getDefaultClassName: (type: string) => "table-column--selection" | "table__expand-column";
declare const cellForced: {
selection: {
renderHeader<T extends DefaultRow>({
store
}: {
store: Store<T>;
}): VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>;
renderCell<T extends DefaultRow>({
row,
column,
store,
$index
}: {
row: T;
column: TableColumnCtx<T>;
store: Store<T>;
$index: number;
}): VNode<_$vue.RendererNode, _$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<_$vue.RendererNode, _$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,
$index
}: {
column: TableColumnCtx<T>;
row: T;
store: Store<T>;
expanded: boolean;
$index: number;
}): VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>;
sortable: boolean;
resizable: boolean;
};
};
declare function defaultRenderCell<T extends DefaultRow>({
row,
column,
$index
}: {
row: T;
column: TableColumnCtx<T>;
$index: number;
}): any;
declare function treeCellPrefix<T extends DefaultRow>({
row,
treeNode,
store
}: {
row: T;
treeNode: TreeNode;
store: Store<T>;
}, createPlaceholder?: boolean): VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>[] | null;
//#endregion
export { cellForced, cellStarts, defaultRenderCell, getDefaultClassName, treeCellPrefix };

View File

@@ -0,0 +1,156 @@
import { isBoolean, isFunction, isNumber } from "../../../utils/types.mjs";
import { getProp } from "../../../utils/objects.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { ElCheckbox } from "../../checkbox/index.mjs";
import { ArrowRight, Loading } from "@element-plus/icons-vue";
import { h } from "vue";
//#region ../../packages/components/table/src/config.ts
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 }) {
function isDisabled() {
return store.states.data.value && store.states.data.value.length === 0;
}
return h(ElCheckbox, {
disabled: isDisabled(),
size: store.states.tableSize.value,
indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
"onUpdate:modelValue": store.toggleAllSelection ?? void 0,
modelValue: store.states.isAllSelected.value,
ariaLabel: store.t("el.table.selectAllLabel")
});
},
renderCell({ row, column, store, $index }) {
return h(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),
indeterminate: store.getRowIndeterminate(row),
ariaLabel: store.t("el.table.selectRowLabel")
});
},
sortable: false,
resizable: false
},
index: {
renderHeader({ column }) {
return column.label || "#";
},
renderCell({ column, $index }) {
let i = $index + 1;
const index = column.index;
if (isNumber(index)) i = $index + index;
else if (isFunction(index)) i = index($index);
return h("div", {}, [i]);
},
sortable: false
},
expand: {
renderHeader({ column }) {
return column.label || "";
},
renderCell({ column, row, store, expanded, $index }) {
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);
};
const isRowExpandable = store.states.rowExpandable.value?.(row, $index) ?? true;
if (!isRowExpandable) classes.push(ns.is("disabled"));
return h("button", {
type: "button",
disabled: !isRowExpandable,
"aria-label": store.t(expanded ? "el.table.collapseRowLabel" : "el.table.expandRowLabel"),
"aria-expanded": expanded,
class: classes,
onClick: callback
}, { default: () => {
if (column.renderExpand) return [column.renderExpand({
expanded,
expandable: isRowExpandable
})];
return [h(ElIcon, null, { default: () => {
return [h(ArrowRight)];
} })];
} });
},
sortable: false,
resizable: false
}
};
function defaultRenderCell({ row, column, $index }) {
const property = column.property;
const value = property && getProp(row, property).value;
if (column && column.formatter) return column.formatter(row, column, value, $index);
return value?.toString?.() || "";
}
function treeCellPrefix({ row, treeNode, store }, createPlaceholder = false) {
const { ns } = store;
if (!treeNode) {
if (createPlaceholder) return [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(h("span", {
class: ns.e("indent"),
style: { "padding-left": `${treeNode.indent}px` }
}));
if (isBoolean(treeNode.expanded) && !treeNode.noLazyChildren) {
const expandClasses = [ns.e("expand-icon"), treeNode.expanded ? ns.em("expand-icon", "expanded") : ""];
let icon = ArrowRight;
if (treeNode.loading) icon = Loading;
ele.push(h("button", {
type: "button",
"aria-label": store.t(treeNode.expanded ? "el.table.collapseRowLabel" : "el.table.expandRowLabel"),
"aria-expanded": treeNode.expanded,
class: expandClasses,
onClick: callback
}, { default: () => {
return [h(ElIcon, { class: ns.is("loading", treeNode.loading) }, { default: () => [h(icon)] })];
} }));
} else ele.push(h("span", { class: ns.e("placeholder") }));
return ele;
}
//#endregion
export { cellForced, cellStarts, defaultRenderCell, getDefaultClassName, treeCellPrefix };
//# sourceMappingURL=config.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,113 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import filter_panel_vue_vue_type_script_lang_default from "./filter-panel.vue_vue_type_script_lang.mjs";
import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, withCtx } from "vue";
//#region ../../packages/components/table/src/filter-panel.vue
const _hoisted_1 = ["disabled"];
const _hoisted_2 = ["tabindex", "aria-checked"];
const _hoisted_3 = [
"tabindex",
"aria-checked",
"onClick"
];
const _hoisted_4 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_el_checkbox = resolveComponent("el-checkbox");
const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _component_arrow_up = resolveComponent("arrow-up");
const _component_arrow_down = resolveComponent("arrow-down");
const _component_el_icon = resolveComponent("el-icon");
const _component_el_tooltip = resolveComponent("el-tooltip");
return openBlock(), createBlock(_component_el_tooltip, {
ref: "tooltipRef",
offset: 0,
placement: _ctx.placement,
"show-arrow": false,
trigger: "click",
role: "dialog",
teleported: "",
effect: "light",
pure: "",
loop: "",
"popper-class": _ctx.filterClassName,
persistent: "",
"append-to": _ctx.appendTo,
onShow: _ctx.handleShowTooltip,
onHide: _ctx.handleHideTooltip
}, {
content: withCtx(() => [_ctx.multiple ? (openBlock(), createElementBlock("div", {
key: 0,
ref: "rootRef",
tabindex: "-1",
class: normalizeClass(_ctx.ns.e("multiple"))
}, [createElementVNode("div", { class: normalizeClass(_ctx.ns.e("content")) }, [createVNode(_component_el_scrollbar, { "wrap-class": _ctx.ns.e("wrap") }, {
default: withCtx(() => [createVNode(_component_el_checkbox_group, {
modelValue: _ctx.filteredValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filteredValue = $event),
class: normalizeClass(_ctx.ns.e("checkbox-group"))
}, {
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
return openBlock(), createBlock(_component_el_checkbox, {
key: filter.value,
value: filter.value
}, {
default: withCtx(() => [createTextVNode(toDisplayString(filter.text), 1)]),
_: 2
}, 1032, ["value"]);
}), 128))]),
_: 1
}, 8, ["modelValue", "class"])]),
_: 1
}, 8, ["wrap-class"])], 2), createElementVNode("div", { class: normalizeClass(_ctx.ns.e("bottom")) }, [createElementVNode("button", {
class: normalizeClass(_ctx.ns.is("disabled", _ctx.filteredValue.length === 0)),
disabled: _ctx.filteredValue.length === 0,
type: "button",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleConfirm && _ctx.handleConfirm(...args))
}, toDisplayString(_ctx.t("el.table.confirmFilter")), 11, _hoisted_1), createElementVNode("button", {
type: "button",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
}, toDisplayString(_ctx.t("el.table.resetFilter")), 1)], 2)], 2)) : (openBlock(), createElementBlock("ul", {
key: 1,
ref: "rootRef",
tabindex: "-1",
role: "radiogroup",
class: normalizeClass(_ctx.ns.e("list")),
onKeydown: _cache[4] || (_cache[4] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
}, [createElementVNode("li", {
role: "radio",
class: normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isPropAbsent(_ctx.filterValue))]),
tabindex: _ctx.checkedIndex === 0 ? 0 : -1,
"aria-checked": _ctx.isPropAbsent(_ctx.filterValue),
onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleSelect(null, 0))
}, toDisplayString(_ctx.t("el.table.clearFilter")), 11, _hoisted_2), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter, idx) => {
return openBlock(), createElementBlock("li", {
key: filter.value,
role: "radio",
class: normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
tabindex: _ctx.checkedIndex === idx + 1 ? 0 : -1,
"aria-checked": _ctx.isActive(filter),
onClick: ($event) => _ctx.handleSelect(filter.value, idx + 1)
}, toDisplayString(filter.text), 11, _hoisted_3);
}), 128))], 34))]),
default: withCtx(() => [createElementVNode("button", {
type: "button",
class: normalizeClass(`${_ctx.ns.namespace.value}-table__column-filter-trigger`),
"aria-label": _ctx.t("el.table.filterLabel", { column: _ctx.column?.label || "" })
}, [createVNode(_component_el_icon, null, {
default: withCtx(() => [renderSlot(_ctx.$slots, "filter-icon", {}, () => [_ctx.column?.filterOpened ? (openBlock(), createBlock(_component_arrow_up, { key: 0 })) : (openBlock(), createBlock(_component_arrow_down, { key: 1 }))])]),
_: 3
})], 10, _hoisted_4)]),
_: 3
}, 8, [
"placement",
"popper-class",
"append-to",
"onShow",
"onHide"
]);
}
var filter_panel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(filter_panel_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { filter_panel_default as default };
//# sourceMappingURL=filter-panel.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,561 @@
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
import { Arrayable } from "../../../utils/typescript.js";
import { Translator } from "../../../hooks/use-locale/index.js";
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
import { Options, Placement } from "../../popper/index.js";
import { TooltipContentInstance } from "../../tooltip/src/content.js";
import { TooltipTriggerType } from "../../tooltip/src/trigger.js";
import { TooltipInstance, UseTooltipProps } from "../../tooltip/src/tooltip.js";
import { CheckboxProps, CheckboxValueType } from "../../checkbox/src/checkbox.js";
import _default$1 from "../../checkbox/src/checkbox-button.vue.js";
import { CheckboxGroupProps, CheckboxGroupValueType } from "../../checkbox/src/checkbox-group.js";
import _default$2 from "../../checkbox/src/checkbox-group.vue.js";
import { Filters, TableColumnCtx } from "./table-column/defaults.js";
import { DefaultRow } from "./table/defaults.js";
import { Store } from "./store/index.js";
import { IconProps } from "../../icon/src/icon.js";
import { ScrollbarDirection, ScrollbarProps } from "../../scrollbar/src/scrollbar.js";
import * as _$vue from "vue";
import { PropType, WritableComputedRef } from "vue";
//#region ../../packages/components/table/src/filter-panel.vue.d.ts
declare const _default: typeof __VLS_export;
declare const __VLS_export: _$vue.DefineComponent<_$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<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>, {
multiple: _$vue.ComputedRef<boolean>;
filterClassName: _$vue.ComputedRef<string>;
filteredValue: WritableComputedRef<string[], string[]>;
filterValue: WritableComputedRef<string, string | null | undefined>;
filters: _$vue.ComputedRef<Filters | undefined>;
handleConfirm: () => void;
handleReset: () => void;
handleSelect: (_filterValue: string | null, index: number) => void;
isPropAbsent: (prop: unknown) => prop is null | undefined;
isActive: (filter: {
value: string;
text: string;
}) => boolean;
t: Translator;
ns: {
namespace: _$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;
};
tooltipRef: _$vue.Ref<TooltipInstance | null, TooltipInstance | null>;
rootRef: _$vue.Ref<HTMLElement | null, HTMLElement | null>;
checkedIndex: _$vue.Ref<number, number>;
handleShowTooltip: () => void;
handleHideTooltip: () => void;
handleKeydown: (event: KeyboardEvent) => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$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<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>> & Readonly<{}>, {
placement: Placement;
}, {}, {
ElCheckbox: {
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, _$vue.PublicProps, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, string, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
}) & _$vue.ObjectPlugin & {
setPropsDefaults: (defaults: {
readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly indeterminate?: boolean | (() => boolean) | undefined;
readonly disabled?: boolean | (() => boolean) | undefined;
readonly checked?: boolean | (() => boolean) | undefined;
readonly name?: string | (() => string) | undefined;
readonly trueValue?: string | number | (() => string | number) | undefined;
readonly falseValue?: string | number | (() => string | number) | undefined;
readonly trueLabel?: string | number | (() => string | number) | undefined;
readonly falseLabel?: string | number | (() => string | number) | undefined;
readonly id?: string | (() => string) | undefined;
readonly border?: boolean | (() => boolean) | undefined;
readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
readonly tabindex?: string | number | (() => string | number) | undefined;
readonly validateEvent?: boolean | (() => boolean) | undefined;
readonly ariaLabel?: string | (() => string) | undefined;
readonly ariaControls?: string | (() => string) | undefined;
}) => void;
} & {
CheckboxButton: typeof _default$1;
CheckboxGroup: typeof _default$2;
};
ElCheckboxGroup: SFCWithInstall<{
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxGroupProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType[]) => void;
"update:modelValue": (val: CheckboxGroupValueType) => void;
}, _$vue.PublicProps, {
tag: string;
type: "checkbox" | "button";
disabled: boolean;
modelValue: CheckboxGroupValueType;
props: {
value?: string;
label?: string;
disabled?: string;
};
validateEvent: boolean;
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<CheckboxGroupProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
}>, {}, {}, {}, {}, {
tag: string;
type: "checkbox" | "button";
disabled: boolean;
modelValue: CheckboxGroupValueType;
props: {
value?: string;
label?: string;
disabled?: string;
};
validateEvent: boolean;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<CheckboxGroupProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType[]) => void;
"update:modelValue": (val: CheckboxGroupValueType) => void;
}, string, {
tag: string;
type: "checkbox" | "button";
disabled: boolean;
modelValue: CheckboxGroupValueType;
props: {
value?: string;
label?: string;
disabled?: string;
};
validateEvent: boolean;
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ElScrollbar: SFCWithInstall<{
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: _$vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, _$vue.PublicProps, {
tag: keyof HTMLElementTagNameMap | (string & {});
tabindex: number | string;
height: number | string;
maxHeight: number | string;
distance: number;
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
minSize: number;
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: _$vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, {
tag: keyof HTMLElementTagNameMap | (string & {});
tabindex: number | string;
height: number | string;
maxHeight: number | string;
distance: number;
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
minSize: number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
wrapRef: _$vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
update: () => void;
scrollTo: {
(xCord: number, yCord?: number): void;
(options: ScrollToOptions): void;
};
setScrollTop: (value: number) => void;
setScrollLeft: (value: number) => void;
handleScroll: () => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, string, {
tag: keyof HTMLElementTagNameMap | (string & {});
tabindex: number | string;
height: number | string;
maxHeight: number | string;
distance: number;
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
minSize: number;
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ElTooltip: SFCWithInstall<{
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: _$vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: _$vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, _$vue.PublicProps, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: _$vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: _$vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
onHide?: ((...args: any[]) => any) | undefined;
onShow?: ((...args: any[]) => any) | undefined;
onOpen?: ((...args: any[]) => any) | undefined;
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
"onBefore-show"?: ((...args: any[]) => any) | undefined;
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
}>, {
popperRef: _$vue.Ref<PopperInstance | undefined, PopperInstance | undefined>;
contentRef: _$vue.Ref<TooltipContentInstance | undefined, TooltipContentInstance | undefined>;
isFocusInsideContent: (event?: FocusEvent) => boolean | undefined;
updatePopper: () => void;
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
hide: (event?: Event) => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
close: (...args: any[]) => void;
hide: (...args: any[]) => void;
show: (...args: any[]) => void;
open: (...args: any[]) => void;
"update:visible": (...args: any[]) => void;
"before-show": (...args: any[]) => void;
"before-hide": (...args: any[]) => void;
}, string, {
offset: number;
teleported: boolean;
effect: PopperEffect;
visible: boolean | null;
content: string;
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
enterable: boolean;
pure: boolean;
focusOnShow: boolean;
trapping: boolean;
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
stopPopperMouseEvent: boolean;
virtualTriggering: boolean;
loop: boolean;
boundariesPadding: number;
gpuAcceleration: boolean;
placement: Placement;
popperOptions: Partial<Options>;
strategy: "fixed" | "absolute";
arrowOffset: number;
showArrow: boolean;
role: typeof roleTypes[number];
showAfter: number;
hideAfter: number;
autoClose: number;
trigger: Arrayable<TooltipTriggerType>;
triggerKeys: string[];
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
} & {
content?: (props: {}) => any;
};
})>;
ElIcon: SFCWithInstall<{
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
})>;
ArrowDown: _$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
ArrowUp: _$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default as default };

View File

@@ -0,0 +1,177 @@
import { EVENT_CODE } from "../../../constants/aria.mjs";
import { getEventCode } from "../../../utils/dom/event.mjs";
import { isPropAbsent } from "../../../utils/types.mjs";
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { useTooltipContentProps } from "../../tooltip/src/content.mjs";
import { ElTooltip } from "../../tooltip/index.mjs";
import { ElScrollbar } from "../../scrollbar/index.mjs";
import { ElCheckbox, ElCheckboxGroup } from "../../checkbox/index.mjs";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { computed, defineComponent, getCurrentInstance, ref } from "vue";
//#region ../../packages/components/table/src/filter-panel.vue?vue&type=script&lang.ts
var filter_panel_vue_vue_type_script_lang_default = defineComponent({
name: "ElTableFilterPanel",
components: {
ElCheckbox,
ElCheckboxGroup,
ElScrollbar,
ElTooltip,
ElIcon,
ArrowDown,
ArrowUp
},
props: {
placement: {
type: String,
default: "bottom-start"
},
store: { type: Object },
column: { type: Object },
upDataColumn: { type: Function },
appendTo: useTooltipContentProps.appendTo
},
setup(props) {
const instance = getCurrentInstance();
const { t } = useLocale();
const ns = useNamespace("table-filter");
const parent = instance?.parent;
if (props.column && !parent.filterPanels.value[props.column.id]) parent.filterPanels.value[props.column.id] = instance;
const tooltipRef = ref(null);
const rootRef = ref(null);
const checkedIndex = ref(0);
const filters = computed(() => {
return props.column && props.column.filters;
});
const filterClassName = computed(() => {
if (props.column && props.column.filterClassName) return `${ns.b()} ${props.column.filterClassName}`;
return ns.b();
});
const filterValue = computed({
get: () => (props.column?.filteredValue || [])[0],
set: (value) => {
if (filteredValue.value) if (!isPropAbsent(value)) filteredValue.value.splice(0, 1, value);
else filteredValue.value.splice(0, 1);
}
});
const filteredValue = computed({
get() {
if (props.column) return props.column.filteredValue || [];
return [];
},
set(value) {
if (props.column) props.upDataColumn?.("filteredValue", value);
}
});
const multiple = computed(() => {
if (props.column) return props.column.filterMultiple;
return true;
});
const isActive = (filter) => {
return filter.value === filterValue.value;
};
const hidden = () => {
tooltipRef.value?.onClose();
};
const handleConfirm = () => {
confirmFilter(filteredValue.value);
hidden();
};
const handleReset = () => {
filteredValue.value = [];
confirmFilter(filteredValue.value);
hidden();
};
const handleSelect = (_filterValue, index) => {
filterValue.value = _filterValue;
checkedIndex.value = index;
if (!isPropAbsent(_filterValue)) confirmFilter(filteredValue.value);
else confirmFilter([]);
hidden();
};
const confirmFilter = (filteredValue) => {
props.store?.commit("filterChange", {
column: props.column,
values: filteredValue
});
props.store?.updateAllSelected();
};
const handleShowTooltip = () => {
rootRef.value?.focus();
!multiple.value && initCheckedIndex();
if (props.column) props.upDataColumn?.("filterOpened", true);
};
const handleHideTooltip = () => {
if (props.column) props.upDataColumn?.("filterOpened", false);
};
const initCheckedIndex = () => {
if (isPropAbsent(filterValue)) {
checkedIndex.value = 0;
return;
}
const idx = (filters.value || []).findIndex((item) => {
return item.value === filterValue.value;
});
checkedIndex.value = idx >= 0 ? idx + 1 : 0;
};
const handleKeydown = (event) => {
const code = getEventCode(event);
const len = (filters.value ? filters.value.length : 0) + 1;
let index = checkedIndex.value;
let isPreventDefault = true;
switch (code) {
case EVENT_CODE.down:
case EVENT_CODE.right:
index = (index + 1) % len;
break;
case EVENT_CODE.up:
case EVENT_CODE.left:
index = (index - 1 + len) % len;
break;
case EVENT_CODE.tab:
hidden();
isPreventDefault = false;
break;
case EVENT_CODE.enter:
case EVENT_CODE.space:
if (index === 0) handleSelect(null, 0);
else {
const item = (filters.value || [])[index - 1];
item.value && handleSelect(item.value, index);
}
break;
default:
isPreventDefault = false;
break;
}
isPreventDefault && event.preventDefault();
checkedIndex.value = index;
rootRef.value?.querySelector(`.${ns.e("list-item")}:nth-child(${index + 1})`)?.focus();
};
return {
multiple,
filterClassName,
filteredValue,
filterValue,
filters,
handleConfirm,
handleReset,
handleSelect,
isPropAbsent,
isActive,
t,
ns,
tooltipRef,
rootRef,
checkedIndex,
handleShowTooltip,
handleHideTooltip,
handleKeydown
};
}
});
//#endregion
export { filter_panel_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=filter-panel.vue_vue_type_script_lang.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
import { TableColumnCtx } from "./table-column/defaults.js";
import { DefaultRow } from "./table/defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/h-helper.d.ts
type Props = {
tableLayout: 'fixed' | 'auto';
columns?: TableColumnCtx<DefaultRow>[];
};
declare function hColgroup(props: Props): _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>;
declare namespace hColgroup {
var props: string[];
}
//#endregion
export { hColgroup };

View File

@@ -0,0 +1,26 @@
import { isUndefined } from "../../../utils/types.mjs";
import { h } from "vue";
//#region ../../packages/components/table/src/h-helper.ts
function hColgroup(props) {
const isAuto = props.tableLayout === "auto";
let columns = props.columns || [];
if (isAuto) {
if (columns.every(({ width }) => 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 h("colgroup", {}, columns.map((column) => h("col", getPropsData(column))));
}
hColgroup.props = ["columns", "tableLayout"];
//#endregion
export { hColgroup };
//# sourceMappingURL=h-helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"h-helper.mjs","names":[],"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"],"mappings":";;;AAWA,SAAgB,UAAU,OAAc;CACtC,MAAM,SAAS,MAAM,gBAAgB;CACrC,IAAI,UAAU,MAAM,WAAW,EAAE;CACjC,IAAI;MACE,QAAQ,OAAO,EAAE,YAAY,YAAY,MAAM,CAAC,EAClD,UAAU,EAAE;;CAGhB,MAAM,gBAAgB,WAAuC;EAC3D,MAAM,YAAY;GAChB,KAAK,GAAG,MAAM,YAAY,GAAG,OAAO;GACpC,OAAO,EAAE;GACT,MAAM,KAAA;GACP;EACD,IAAI,QACF,UAAU,QAAQ,EAChB,OAAO,GAAG,OAAO,MAAM,KACxB;OAED,UAAU,OAAO,OAAO;EAE1B,OAAO;;CAGT,OAAO,EACL,YACA,EAAE,EACF,QAAQ,KAAK,WAAW,EAAE,OAAO,aAAa,OAAO,CAAC,CAAC,CACxD;;AAGH,UAAU,QAAQ,CAAC,WAAW,cAAc"}

View File

@@ -0,0 +1,11 @@
import TableLayout from "./table-layout.js";
import { DefaultRow, Table } from "./table/defaults.js";
//#region ../../packages/components/table/src/layout-observer.d.ts
declare function useLayoutObserver<T extends DefaultRow>(root: Table<T>): {
tableLayout: TableLayout<T>;
onColumnsChange: (layout: TableLayout<T>) => void;
onScrollableChange: (layout: TableLayout<T>) => void;
};
//#endregion
export { useLayoutObserver as default };

View File

@@ -0,0 +1,57 @@
import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, onUpdated } from "vue";
//#region ../../packages/components/table/src/layout-observer.ts
function useLayoutObserver(root) {
const instance = getCurrentInstance();
onBeforeMount(() => {
tableLayout.value.addObserver(instance);
});
onMounted(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
onUpdated(() => {
onColumnsChange(tableLayout.value);
onScrollableChange(tableLayout.value);
});
onUnmounted(() => {
tableLayout.value.removeObserver(instance);
});
const tableLayout = computed(() => {
const layout = root.layout;
if (!layout) throw new Error("Can not find table layout.");
return layout;
});
const onColumnsChange = (layout) => {
const cols = root.vnode.el?.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 column = columnsMap[col.getAttribute("name")];
if (column) col.setAttribute("width", column.realWidth || column.width);
}
};
const onScrollableChange = (layout) => {
const cols = root.vnode.el?.querySelectorAll("colgroup > col[name=gutter]") || [];
for (let i = 0, j = cols.length; i < j; i++) cols[i].setAttribute("width", layout.scrollY.value ? layout.gutterWidth : "0");
const ths = root.vnode.el?.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
};
}
//#endregion
export { useLayoutObserver as default };
//# sourceMappingURL=layout-observer.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"layout-observer.mjs","names":[],"sources":["../../../../../../packages/components/table/src/layout-observer.ts"],"sourcesContent":["import {\n computed,\n getCurrentInstance,\n onBeforeMount,\n onMounted,\n onUnmounted,\n onUpdated,\n} from 'vue'\n\nimport type { TableHeader } from './table-header'\nimport type TableLayout from './table-layout'\nimport type { DefaultRow, Table, TableColumnCtx } from './table/defaults'\n\nfunction useLayoutObserver<T extends DefaultRow>(root: Table<T>) {\n const instance = getCurrentInstance() as TableHeader\n onBeforeMount(() => {\n tableLayout.value.addObserver(instance)\n })\n onMounted(() => {\n onColumnsChange(tableLayout.value)\n onScrollableChange(tableLayout.value)\n })\n onUpdated(() => {\n onColumnsChange(tableLayout.value)\n onScrollableChange(tableLayout.value)\n })\n onUnmounted(() => {\n tableLayout.value.removeObserver(instance)\n })\n const tableLayout = computed(() => {\n const layout = root.layout as TableLayout<T>\n if (!layout) {\n throw new Error('Can not find table layout.')\n }\n return layout\n })\n const onColumnsChange = (layout: TableLayout<T>) => {\n const cols = root.vnode.el?.querySelectorAll('colgroup > col') || []\n if (!cols.length) return\n const flattenColumns = layout.getFlattenColumns()\n const columnsMap: Record<string, TableColumnCtx<T>> = {}\n flattenColumns.forEach((column) => {\n columnsMap[column.id] = column\n })\n for (let i = 0, j = cols.length; i < j; i++) {\n const col = cols[i]\n const name = col.getAttribute('name')\n const column = columnsMap[name]\n if (column) {\n col.setAttribute('width', column.realWidth || column.width)\n }\n }\n }\n\n const onScrollableChange = (layout: TableLayout<T>) => {\n const cols =\n root.vnode.el?.querySelectorAll('colgroup > col[name=gutter]') || []\n for (let i = 0, j = cols.length; i < j; i++) {\n const col = cols[i]\n col.setAttribute('width', layout.scrollY.value ? layout.gutterWidth : '0')\n }\n const ths = root.vnode.el?.querySelectorAll('th.gutter') || []\n for (let i = 0, j = ths.length; i < j; i++) {\n const th = ths[i]\n th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : '0'\n th.style.display = layout.scrollY.value ? '' : 'none'\n }\n }\n\n return {\n tableLayout: tableLayout.value,\n onColumnsChange,\n onScrollableChange,\n }\n}\n\nexport default useLayoutObserver\n"],"mappings":";;AAaA,SAAS,kBAAwC,MAAgB;CAC/D,MAAM,WAAW,oBAAoB;CACrC,oBAAoB;EAClB,YAAY,MAAM,YAAY,SAAS;GACvC;CACF,gBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,gBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,kBAAkB;EAChB,YAAY,MAAM,eAAe,SAAS;GAC1C;CACF,MAAM,cAAc,eAAe;EACjC,MAAM,SAAS,KAAK;EACpB,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,6BAA6B;EAE/C,OAAO;GACP;CACF,MAAM,mBAAmB,WAA2B;EAClD,MAAM,OAAO,KAAK,MAAM,IAAI,iBAAiB,iBAAiB,IAAI,EAAE;EACpE,IAAI,CAAC,KAAK,QAAQ;EAClB,MAAM,iBAAiB,OAAO,mBAAmB;EACjD,MAAM,aAAgD,EAAE;EACxD,eAAe,SAAS,WAAW;GACjC,WAAW,OAAO,MAAM;IACxB;EACF,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAAK;GAC3C,MAAM,MAAM,KAAK;GAEjB,MAAM,SAAS,WADF,IAAI,aAAa,OACA;GAC9B,IAAI,QACF,IAAI,aAAa,SAAS,OAAO,aAAa,OAAO,MAAM;;;CAKjE,MAAM,sBAAsB,WAA2B;EACrD,MAAM,OACJ,KAAK,MAAM,IAAI,iBAAiB,8BAA8B,IAAI,EAAE;EACtE,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAEtC,KADiB,GACb,aAAa,SAAS,OAAO,QAAQ,QAAQ,OAAO,cAAc,IAAI;EAE5E,MAAM,MAAM,KAAK,MAAM,IAAI,iBAAiB,YAAY,IAAI,EAAE;EAC9D,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAI,GAAG,KAAK;GAC1C,MAAM,KAAK,IAAI;GACf,GAAG,MAAM,QAAQ,OAAO,QAAQ,QAAQ,GAAG,OAAO,YAAY,MAAM;GACpE,GAAG,MAAM,UAAU,OAAO,QAAQ,QAAQ,KAAK;;;CAInD,OAAO;EACL,aAAa,YAAY;EACzB;EACA;EACD"}

View File

@@ -0,0 +1,18 @@
import { DefaultRow } from "../table/defaults.js";
import { WatcherPropsData } from "./index.js";
import { Ref } from "vue";
//#region ../../packages/components/table/src/store/current.d.ts
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, string | null>;
currentRow: Ref<T | null, T | null>;
};
};
//#endregion
export { useCurrent as default };

View File

@@ -0,0 +1,65 @@
import { getRowIdentity } from "../util.mjs";
import { getCurrentInstance, ref, unref } from "vue";
//#region ../../packages/components/table/src/store/current.ts
function useCurrent(watcherData) {
const instance = getCurrentInstance();
const _currentRowKey = ref(null);
const currentRow = ref(null);
const setCurrentRowKey = (key) => {
instance.store.assertRowKey();
_currentRowKey.value = key;
setCurrentRowByKey(key);
};
const restoreCurrentRowKey = () => {
_currentRowKey.value = null;
};
const setCurrentRowByKey = (key) => {
const { data, rowKey } = watcherData;
const oldCurrentRow = currentRow.value;
let _currentRow = null;
if (rowKey.value) _currentRow = (unref(data) || []).find((item) => getRowIdentity(item, rowKey.value) === key) ?? null;
currentRow.value = _currentRow ?? null;
instance.emit("current-change", currentRow.value, oldCurrentRow);
};
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) setCurrentRowByKey(getRowIdentity(oldCurrentRow, rowKey));
else {
currentRow.value = null;
instance.emit("current-change", null, oldCurrentRow);
}
else if (_currentRowKey.value) {
setCurrentRowByKey(_currentRowKey.value);
restoreCurrentRowKey();
}
};
return {
setCurrentRowKey,
restoreCurrentRowKey,
setCurrentRowByKey,
updateCurrentRow,
updateCurrentRowData,
states: {
_currentRowKey,
currentRow
}
};
}
//#endregion
export { useCurrent as default };
//# sourceMappingURL=current.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"current.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/store/current.ts"],"sourcesContent":["import { getCurrentInstance, ref, unref } from 'vue'\nimport { getRowIdentity } from '../util'\n\nimport type { Ref } from 'vue'\nimport type { DefaultRow, Table } from '../table/defaults'\nimport type { WatcherPropsData } from '.'\n\nfunction useCurrent<T extends DefaultRow>(watcherData: WatcherPropsData<T>) {\n const instance = getCurrentInstance() as Table<T>\n const _currentRowKey: Ref<string | null> = ref(null)\n const currentRow: Ref<T | null> = ref(null)\n\n const setCurrentRowKey = (key: string) => {\n instance.store.assertRowKey()\n _currentRowKey.value = key\n setCurrentRowByKey(key)\n }\n\n const restoreCurrentRowKey = () => {\n _currentRowKey.value = null\n }\n\n const setCurrentRowByKey = (key: string) => {\n const { data, rowKey } = watcherData\n const oldCurrentRow = currentRow.value\n let _currentRow: T | null = null\n if (rowKey.value) {\n _currentRow =\n (unref(data) || []).find(\n (item) => getRowIdentity(item, rowKey.value) === key\n ) ?? null\n }\n currentRow.value = _currentRow ?? null\n instance.emit('current-change', currentRow.value, oldCurrentRow)\n }\n\n const updateCurrentRow = (_currentRow: T) => {\n const oldCurrentRow = currentRow.value\n if (_currentRow && _currentRow !== oldCurrentRow) {\n currentRow.value = _currentRow\n instance.emit('current-change', currentRow.value, oldCurrentRow)\n return\n }\n if (!_currentRow && oldCurrentRow) {\n currentRow.value = null\n instance.emit('current-change', null, oldCurrentRow)\n }\n }\n\n const updateCurrentRowData = () => {\n const rowKey = watcherData.rowKey.value\n // data 为 null 时,解构时的默认值会被忽略\n const data = watcherData.data.value || []\n const oldCurrentRow = currentRow.value\n // 当 currentRow 不在 data 中时尝试更新数据\n if (oldCurrentRow && !data.includes(oldCurrentRow)) {\n if (rowKey) {\n const currentRowKey = getRowIdentity(oldCurrentRow, rowKey)\n setCurrentRowByKey(currentRowKey)\n } else {\n currentRow.value = null\n instance.emit('current-change', null, oldCurrentRow)\n }\n } else if (_currentRowKey.value) {\n // 把初始时下设置的 rowKey 转化成 rowData\n setCurrentRowByKey(_currentRowKey.value)\n restoreCurrentRowKey()\n }\n }\n\n return {\n setCurrentRowKey,\n restoreCurrentRowKey,\n setCurrentRowByKey,\n updateCurrentRow,\n updateCurrentRowData,\n states: {\n _currentRowKey,\n currentRow,\n },\n }\n}\n\nexport default useCurrent\n"],"mappings":";;;AAOA,SAAS,WAAiC,aAAkC;CAC1E,MAAM,WAAW,oBAAoB;CACrC,MAAM,iBAAqC,IAAI,KAAK;CACpD,MAAM,aAA4B,IAAI,KAAK;CAE3C,MAAM,oBAAoB,QAAgB;EACxC,SAAS,MAAM,cAAc;EAC7B,eAAe,QAAQ;EACvB,mBAAmB,IAAI;;CAGzB,MAAM,6BAA6B;EACjC,eAAe,QAAQ;;CAGzB,MAAM,sBAAsB,QAAgB;EAC1C,MAAM,EAAE,MAAM,WAAW;EACzB,MAAM,gBAAgB,WAAW;EACjC,IAAI,cAAwB;EAC5B,IAAI,OAAO,OACT,eACG,MAAM,KAAK,IAAI,EAAE,EAAE,MACjB,SAAS,eAAe,MAAM,OAAO,MAAM,KAAK,IAClD,IAAI;EAET,WAAW,QAAQ,eAAe;EAClC,SAAS,KAAK,kBAAkB,WAAW,OAAO,cAAc;;CAGlE,MAAM,oBAAoB,gBAAmB;EAC3C,MAAM,gBAAgB,WAAW;EACjC,IAAI,eAAe,gBAAgB,eAAe;GAChD,WAAW,QAAQ;GACnB,SAAS,KAAK,kBAAkB,WAAW,OAAO,cAAc;GAChE;;EAEF,IAAI,CAAC,eAAe,eAAe;GACjC,WAAW,QAAQ;GACnB,SAAS,KAAK,kBAAkB,MAAM,cAAc;;;CAIxD,MAAM,6BAA6B;EACjC,MAAM,SAAS,YAAY,OAAO;EAElC,MAAM,OAAO,YAAY,KAAK,SAAS,EAAE;EACzC,MAAM,gBAAgB,WAAW;EAEjC,IAAI,iBAAiB,CAAC,KAAK,SAAS,cAAc,EAChD,IAAI,QAEF,mBADsB,eAAe,eAAe,OACpB,CAAC;OAC5B;GACL,WAAW,QAAQ;GACnB,SAAS,KAAK,kBAAkB,MAAM,cAAc;;OAEjD,IAAI,eAAe,OAAO;GAE/B,mBAAmB,eAAe,MAAM;GACxC,sBAAsB;;;CAI1B,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN;GACA;GACD;EACF"}

View File

@@ -0,0 +1,17 @@
import { DefaultRow } from "../table/defaults.js";
import { WatcherPropsData } from "./index.js";
import { Ref } from "vue";
//#region ../../packages/components/table/src/store/expand.d.ts
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[], T[]>;
defaultExpandAll: Ref<boolean, boolean>;
};
};
//#endregion
export { useExpand as default };

View File

@@ -0,0 +1,58 @@
import { getKeysMap, getRowIdentity, toggleRowStatus } from "../util.mjs";
import { getCurrentInstance, ref } from "vue";
//#region ../../packages/components/table/src/store/expand.ts
function useExpand(watcherData) {
const instance = getCurrentInstance();
const defaultExpandAll = ref(false);
const expandRows = ref([]);
const canRowExpand = (row, index) => {
const expandableFn = instance.store.states.rowExpandable.value;
return expandableFn?.(row, index) ?? true;
};
const updateExpandRows = () => {
const data = watcherData.data.value || [];
const rowKey = watcherData.rowKey.value;
if (defaultExpandAll.value) expandRows.value = instance.store.states.rowExpandable.value ? data.filter(canRowExpand) : data.slice();
else if (rowKey) {
const expandRowsMap = getKeysMap(expandRows.value, rowKey);
expandRows.value = data.filter((row, index) => {
return !!expandRowsMap[getRowIdentity(row, rowKey)] && canRowExpand(row, index);
});
} else expandRows.value = [];
};
const toggleRowExpansion = (row, expanded) => {
const rowIndex = (watcherData.data.value || []).indexOf(row);
if (rowIndex > -1 && !canRowExpand(row, rowIndex)) return;
if (toggleRowStatus(expandRows.value, row, expanded, void 0, void 0, void 0, watcherData.rowKey.value)) 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 = getKeysMap(data, rowKey);
expandRows.value = rowKeys.reduce((prev, cur) => {
const info = keysMap[cur];
if (info && canRowExpand(info.row, info.index)) prev.push(info.row);
return prev;
}, []);
};
const isRowExpanded = (row) => {
const rowKey = watcherData.rowKey.value;
if (rowKey) return !!getKeysMap(expandRows.value, rowKey)[getRowIdentity(row, rowKey)];
return expandRows.value.includes(row);
};
return {
updateExpandRows,
toggleRowExpansion,
setExpandRowKeys,
isRowExpanded,
states: {
expandRows,
defaultExpandAll
}
};
}
//#endregion
export { useExpand as default };
//# sourceMappingURL=expand.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"expand.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/store/expand.ts"],"sourcesContent":["import { getCurrentInstance, ref } from 'vue'\nimport { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'\n\nimport type { Ref } from 'vue'\nimport type { WatcherPropsData } from '.'\nimport type { DefaultRow, Table } from '../table/defaults'\n\nfunction useExpand<T extends DefaultRow>(watcherData: WatcherPropsData<T>) {\n const instance = getCurrentInstance() as Table<T>\n const defaultExpandAll = ref(false)\n const expandRows: Ref<T[]> = ref([])\n\n const canRowExpand = (row: T, index: number) => {\n const expandableFn = instance.store.states.rowExpandable.value\n return expandableFn?.(row, index) ?? true\n }\n\n const updateExpandRows = () => {\n const data = watcherData.data.value || []\n const rowKey = watcherData.rowKey.value\n if (defaultExpandAll.value) {\n expandRows.value = instance.store.states.rowExpandable.value\n ? data.filter(canRowExpand)\n : data.slice()\n } else if (rowKey) {\n // TODO这里的代码可以优化\n const expandRowsMap = getKeysMap(expandRows.value, rowKey)\n expandRows.value = data.filter((row, index) => {\n const rowId = getRowIdentity(row, rowKey)\n return !!expandRowsMap[rowId] && canRowExpand(row, index)\n })\n } else {\n expandRows.value = []\n }\n }\n\n const toggleRowExpansion = (row: T, expanded?: boolean) => {\n const dataArr = watcherData.data.value || []\n const rowIndex = dataArr.indexOf(row)\n if (rowIndex > -1 && !canRowExpand(row, rowIndex)) return\n\n const changed = toggleRowStatus(\n expandRows.value,\n row,\n expanded,\n undefined,\n undefined,\n undefined,\n watcherData.rowKey.value\n )\n if (changed) {\n instance.emit('expand-change', row, expandRows.value.slice())\n }\n }\n\n const setExpandRowKeys = (rowKeys: (string | number)[]) => {\n instance.store.assertRowKey()\n // TODO这里的代码可以优化\n const data = watcherData.data.value || []\n const rowKey = watcherData.rowKey.value\n const keysMap = getKeysMap(data, rowKey)\n expandRows.value = rowKeys.reduce((prev: T[], cur) => {\n const info = keysMap[cur]\n if (info && canRowExpand(info.row, info.index)) {\n prev.push(info.row)\n }\n return prev\n }, [])\n }\n\n const isRowExpanded = (row: T): boolean => {\n const rowKey = watcherData.rowKey.value\n if (rowKey) {\n const expandMap = getKeysMap(expandRows.value, rowKey)\n return !!expandMap[getRowIdentity(row, rowKey)]\n }\n return expandRows.value.includes(row)\n }\n return {\n updateExpandRows,\n toggleRowExpansion,\n setExpandRowKeys,\n isRowExpanded,\n states: {\n expandRows,\n defaultExpandAll,\n },\n }\n}\n\nexport default useExpand\n"],"mappings":";;;AAOA,SAAS,UAAgC,aAAkC;CACzE,MAAM,WAAW,oBAAoB;CACrC,MAAM,mBAAmB,IAAI,MAAM;CACnC,MAAM,aAAuB,IAAI,EAAE,CAAC;CAEpC,MAAM,gBAAgB,KAAQ,UAAkB;EAC9C,MAAM,eAAe,SAAS,MAAM,OAAO,cAAc;EACzD,OAAO,eAAe,KAAK,MAAM,IAAI;;CAGvC,MAAM,yBAAyB;EAC7B,MAAM,OAAO,YAAY,KAAK,SAAS,EAAE;EACzC,MAAM,SAAS,YAAY,OAAO;EAClC,IAAI,iBAAiB,OACnB,WAAW,QAAQ,SAAS,MAAM,OAAO,cAAc,QACnD,KAAK,OAAO,aAAa,GACzB,KAAK,OAAO;OACX,IAAI,QAAQ;GAEjB,MAAM,gBAAgB,WAAW,WAAW,OAAO,OAAO;GAC1D,WAAW,QAAQ,KAAK,QAAQ,KAAK,UAAU;IAE7C,OAAO,CAAC,CAAC,cADK,eAAe,KAAK,OACN,KAAK,aAAa,KAAK,MAAM;KACzD;SAEF,WAAW,QAAQ,EAAE;;CAIzB,MAAM,sBAAsB,KAAQ,aAAuB;EAEzD,MAAM,YADU,YAAY,KAAK,SAAS,EAAE,EACnB,QAAQ,IAAI;EACrC,IAAI,WAAW,MAAM,CAAC,aAAa,KAAK,SAAS,EAAE;EAWnD,IATgB,gBACd,WAAW,OACX,KACA,UACA,KAAA,GACA,KAAA,GACA,KAAA,GACA,YAAY,OAAO,MAEV,EACT,SAAS,KAAK,iBAAiB,KAAK,WAAW,MAAM,OAAO,CAAC;;CAIjE,MAAM,oBAAoB,YAAiC;EACzD,SAAS,MAAM,cAAc;EAE7B,MAAM,OAAO,YAAY,KAAK,SAAS,EAAE;EACzC,MAAM,SAAS,YAAY,OAAO;EAClC,MAAM,UAAU,WAAW,MAAM,OAAO;EACxC,WAAW,QAAQ,QAAQ,QAAQ,MAAW,QAAQ;GACpD,MAAM,OAAO,QAAQ;GACrB,IAAI,QAAQ,aAAa,KAAK,KAAK,KAAK,MAAM,EAC5C,KAAK,KAAK,KAAK,IAAI;GAErB,OAAO;KACN,EAAE,CAAC;;CAGR,MAAM,iBAAiB,QAAoB;EACzC,MAAM,SAAS,YAAY,OAAO;EAClC,IAAI,QAEF,OAAO,CAAC,CADU,WAAW,WAAW,OAAO,OAC7B,CAAC,eAAe,KAAK,OAAO;EAEhD,OAAO,WAAW,MAAM,SAAS,IAAI;;CAEvC,OAAO;EACL;EACA;EACA;EACA;EACA,QAAQ;GACN;GACA;GACD;EACF"}

View File

@@ -0,0 +1,556 @@
import { Translator } from "../../../../hooks/use-locale/index.js";
import { TableColumnCtx } from "../table-column/defaults.js";
import { DefaultRow, Filter, Sort, Table, TableProps, TableSortOrder } from "../table/defaults.js";
import { StoreFilter } from "./index.js";
import { TreeData } from "./tree.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/store/helper.d.ts
declare function createStore<T extends DefaultRow>(table: Table<T>, props: TableProps<T>): {
mutations: {
setData(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, data: T[]): void;
insertColumn(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, column: TableColumnCtx<T>, parent: TableColumnCtx<T>, updateColumnOrder: () => void): void;
updateColumnOrder(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, column: TableColumnCtx<T>): void;
removeColumn(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, column: TableColumnCtx<T>, parent: TableColumnCtx<T>, updateColumnOrder: () => void): void;
sort(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, options: Sort): void;
changeSortCondition(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, options: Sort): void;
filterChange(_states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, options: Filter<T>): void;
toggleAllSelection(): void;
rowSelectedChanged(_states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, row: T): void;
setHoverRow(states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
}, row: T): void;
setCurrentRow(_states: {
_currentRowKey: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, 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;
updateSelectionByChildren: (options?: {
emitChange?: boolean;
rowIndexMap?: Map<string, number>;
}) => void;
getRowIndeterminate: (row: T) => boolean;
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: _$vue.Ref<string | null, string | null>;
currentRow: _$vue.Ref<T | null, T | null>;
expandRowKeys: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
expandRows: _$vue.Ref<T[], T[]>;
defaultExpandAll: _$vue.Ref<boolean, boolean>;
tableSize: _$vue.Ref<any, any>;
rowKey: _$vue.Ref<string | null, string | null>;
data: _$vue.Ref<T[], T[]>;
_data: _$vue.Ref<T[], T[]>;
isComplex: _$vue.Ref<boolean, boolean>;
_columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: _$vue.Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: _$vue.Ref<number, number>;
fixedLeafColumnsLength: _$vue.Ref<number, number>;
rightFixedLeafColumnsLength: _$vue.Ref<number, number>;
isAllSelected: _$vue.Ref<boolean, boolean>;
selection: _$vue.Ref<T[], T[]>;
selectionIndeterminate: _$vue.Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: _$vue.Ref<boolean, boolean>;
selectOnIndeterminate: _$vue.Ref<boolean, boolean>;
selectable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: _$vue.Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: _$vue.Ref<StoreFilter, StoreFilter>;
filteredData: _$vue.Ref<T[] | null, T[] | null>;
sortingColumn: _$vue.Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: _$vue.Ref<string | null, string | null>;
sortOrder: _$vue.Ref<string | number | null, string | number | null>;
hoverRow: _$vue.Ref<T | null, T | null>;
};
ns: {
namespace: _$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;
};
t: Translator;
};
//#endregion
export { createStore };

View File

@@ -0,0 +1,65 @@
import { isObject } from "../../../../utils/types.mjs";
import useStore from "./index.mjs";
import { debounce } from "lodash-unified";
import { watch } from "vue";
//#region ../../packages/components/table/src/store/helper.ts
const InitialStateMap = {
rowKey: "rowKey",
defaultExpandAll: "defaultExpandAll",
rowExpandable: "rowExpandable",
selectOnIndeterminate: "selectOnIndeterminate",
indent: "indent",
lazy: "lazy",
["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 = useStore();
store.toggleAllSelection = 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) => {
watch(() => getArrKeysValue(props, key), (value) => {
handleValue(value, key, store);
});
});
}
function handleValue(value, propsKey, store) {
let newVal = value;
let storeKey = InitialStateMap[propsKey];
if (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];
}
//#endregion
export { createStore };
//# sourceMappingURL=helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"helper.mjs","names":[],"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 rowExpandable: 'rowExpandable',\n selectOnIndeterminate: 'selectOnIndeterminate',\n indent: 'indent',\n lazy: 'lazy',\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"],"mappings":";;;;;AAQA,MAAM,kBAAkB;CACtB,QAAQ;CACR,kBAAkB;CAClB,eAAe;CACf,uBAAuB;CACvB,QAAQ;CACR,MAAM;EACL,0BAA0B;EACzB,KAAK;EACL,SAAS;EACV;EACA,uBAAuB;EACtB,KAAK;EACL,SAAS;EACV;EACA,4BAA4B;EAC3B,KAAK;EACL,SAAS;EACV;CACF;AAED,SAAgB,YACd,OACA,OACA;CACA,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,qBAAqB;CAGvC,MAAM,QAAQ,UAAa;CAG3B,MAAM,qBAAqB,SAAS,MAAM,qBAAqB,GAAG;CAClE,OAAO,KAAK,gBAAgB,CAAC,SAAS,QAAQ;EAC5C,YAAY,gBAAgB,OAAO,IAAI,EAAE,KAAK,MAAM;GACpD;CACF,gBAAgB,OAAO,MAAM;CAC7B,OAAO;;AAGT,SAAS,gBACP,OACA,OACA;CACA,OAAO,KAAK,gBAAgB,CAAC,SAAS,QAAQ;EAC5C,YACQ,gBAAgB,OAAO,IAAI,GAChC,UAAU;GACT,YAAY,OAAO,KAAK,MAAM;IAEjC;GACD;;AAGJ,SAAS,YACP,OACA,UACA,OACA;CACA,IAAI,SAAS;CACb,IAAI,WAAW,gBAAgB;CAC/B,IAAI,SAAS,SAAS,EAAE;EACtB,SAAS,UAAU,SAAS;EAC5B,WAAW,SAAS;;CAErB,MAAQ,OAAe,UAAkB,QAAQ;;AAGpD,SAAS,gBACP,OACA,KACA;CACA,IAAK,IAA2B,SAAS,IAAI,EAAE;EAC7C,MAAM,UAAW,IAA2B,MAAM,IAAI;EACtD,IAAI,QAAsC;EAC1C,QAAQ,SAAS,MAAM;GACrB,QAAS,MAA8B;IACvC;EACF,OAAO;QAEP,OAAQ,MAAc"}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,159 @@
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import useWatcher from "./watcher.mjs";
import { isNull } from "lodash-unified";
import { getCurrentInstance, nextTick, unref } from "vue";
//#region ../../packages/components/table/src/store/index.ts
function replaceColumn(array, column) {
return array.map((item) => {
if (item.id === column.id) return column;
else if (item.children?.length) item.children = replaceColumn(item.children, column);
return item;
});
}
function sortColumn(array) {
array.forEach((item) => {
item.no = item.getColumnIndex?.();
if (item.children?.length) sortColumn(item.children);
});
array.sort((cur, pre) => cur.no - pre.no);
}
function useStore() {
const instance = getCurrentInstance();
const watcher = useWatcher();
const ns = useNamespace("table");
const { t } = useLocale();
const mutations = {
setData(states, data) {
const dataInstanceChanged = 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 (unref(states.reserveSelection)) instance.store.assertRowKey();
else if (dataInstanceChanged) instance.store.clearSelection();
else instance.store.cleanSelection();
instance.store.updateSelectionByChildren({ emitChange: false });
instance.store.updateAllSelected();
if (instance.$ready) instance.store.scheduleLayout();
},
insertColumn(states, column, parent, updateColumnOrder) {
const array = unref(states._columns);
let newColumns = [];
if (!parent) {
array.push(column);
newColumns = array;
} else {
if (parent && !parent.children) parent.children = [];
parent.children?.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) {
if (column.getColumnIndex?.() === column.no) return;
sortColumn(states._columns.value);
if (instance.$ready) instance.store.updateColumns();
},
removeColumn(states, column, parent, updateColumnOrder) {
const array = unref(states._columns) || [];
if (parent) {
parent.children?.splice(parent.children.findIndex((item) => item.id === column.id), 1);
nextTick(() => {
if (parent.children?.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 = unref(states.columns).find((column) => column.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 = unref(sortingColumn), propValue = unref(sortProp), orderValue = unref(sortOrder);
if (isNull(orderValue)) {
states.sortingColumn.value = null;
states.sortProp.value = null;
}
instance.store.execQuery({ filter: true });
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() {
instance.store.toggleAllSelection?.();
},
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 mutations = instance.store.mutations;
if (mutations[name]) mutations[name].apply(instance, [instance.store.states, ...args]);
else throw new Error(`Action not found: ${name}`);
};
const updateTableScrollY = function() {
nextTick(() => instance.layout.updateScrollY.apply(instance.layout));
};
return {
ns,
t,
...watcher,
mutations,
commit,
updateTableScrollY
};
}
//#endregion
export { useStore as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,31 @@
import { DefaultRow, TreeNode } from "../table/defaults.js";
import { WatcherPropsData } from "./index.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/store/tree.d.ts
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: _$vue.Ref<string[], string[]>;
treeData: _$vue.Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: _$vue.Ref<number, number>;
lazy: _$vue.Ref<boolean, boolean>;
lazyTreeNodeMap: _$vue.Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: _$vue.Ref<string, string>;
childrenColumnName: _$vue.Ref<string, string>;
checkStrictly: _$vue.Ref<boolean, boolean>;
};
};
//#endregion
export { TreeData, useTree as default };

View File

@@ -0,0 +1,193 @@
import { isArray, isUndefined } from "../../../../utils/types.mjs";
import { getRowIdentity, walkTreeNode } from "../util.mjs";
import { computed, getCurrentInstance, ref, unref, watch } from "vue";
//#region ../../packages/components/table/src/store/tree.ts
function useTree(watcherData) {
const expandRowKeys = ref([]);
const treeData = ref({});
const indent = ref(16);
const lazy = ref(false);
const lazyTreeNodeMap = ref({});
const lazyColumnIdentifier = ref("hasChildren");
const childrenColumnName = ref("children");
const checkStrictly = ref(false);
const instance = getCurrentInstance();
const normalizedData = computed(() => {
if (!watcherData.rowKey.value) return {};
return normalize(watcherData.data.value || []);
});
const normalizedLazyNode = 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 = 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 = {};
walkTreeNode(data, (parent, children, level) => {
const parentId = getRowIdentity(parent, rowKey);
if (isArray(children)) res[parentId] = {
children: children.map((row) => 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) => {
ifExpandAll ||= instance.store?.states.defaultExpandAll.value;
const nested = normalizedData.value;
const normalizedLazyNode_ = normalizedLazyNode.value;
const keys = Object.keys(nested);
const newTreeData = {};
if (keys.length) {
const oldTreeData = unref(treeData);
const rootLazyRowKeys = [];
const getExpanded = (oldValue, key) => {
if (ifChangeExpandRowKeys) if (expandRowKeys.value) return ifExpandAll || expandRowKeys.value.includes(key);
else return !!(ifExpandAll || oldValue?.expanded);
else {
const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key);
return !!(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) => {
const oldValue = oldTreeData[key];
const lazyNodeChildren = normalizedLazyNode_[key].children;
if (rootLazyRowKeys.includes(key)) {
if (newTreeData[key].children?.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;
instance.store?.updateTableScrollY();
};
watch(() => expandRowKeys.value, () => {
updateTreeData(true);
}, { deep: true });
watch(() => normalizedData.value, () => {
updateTreeData();
});
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 = getRowIdentity(row, rowKey);
const data = id && treeData.value[id];
if (id && data && "expanded" in data) {
const oldExpanded = data.expanded;
expanded = isUndefined(expanded) ? !data.expanded : expanded;
treeData.value[id].expanded = expanded;
if (oldExpanded !== expanded) instance.emit("expand-change", row, expanded);
expanded && isUseLazy(data) && loadData(row, id, data);
instance.store.updateTableScrollY();
}
};
const loadOrToggle = (row) => {
instance.store.assertRowKey();
const rowKey = watcherData.rowKey.value;
const id = 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 (!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 = {
...lazyTreeNodeMap.value,
[key]: data
};
instance.emit("expand-change", row, true);
});
}
};
const updateKeyChildren = (key, data) => {
const { lazy, rowKey } = instance.props;
if (!lazy) return;
if (!rowKey) throw new Error("[Table] rowKey is required in updateKeyChild");
if (lazyTreeNodeMap.value[key]) lazyTreeNodeMap.value = {
...lazyTreeNodeMap.value,
[key]: data
};
};
return {
loadData,
loadOrToggle,
toggleTreeExpansion,
updateTreeExpandKeys,
updateTreeData,
updateKeyChildren,
normalize,
states: {
expandRowKeys,
treeData,
indent,
lazy,
lazyTreeNodeMap,
lazyColumnIdentifier,
childrenColumnName,
checkStrictly
}
};
}
//#endregion
export { useTree as default };
//# sourceMappingURL=tree.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,91 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { DefaultRow, TableSortOrder } from "../table/defaults.js";
import { StoreFilter } from "./index.js";
import { TreeData } from "./tree.js";
import { Ref } from "vue";
//#region ../../packages/components/table/src/store/watcher.d.ts
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;
updateSelectionByChildren: (options?: {
emitChange?: boolean;
rowIndexMap?: Map<string, number>;
}) => void;
getRowIndeterminate: (row: T) => boolean;
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, string | null>;
currentRow: Ref<T | null, T | null>;
expandRowKeys: Ref<string[], string[]>;
treeData: Ref<Record<string, TreeData>, Record<string, TreeData>>;
indent: Ref<number, number>;
lazy: Ref<boolean, boolean>;
lazyTreeNodeMap: Ref<Record<string, T[]>, Record<string, T[]>>;
lazyColumnIdentifier: Ref<string, string>;
childrenColumnName: Ref<string, string>;
checkStrictly: Ref<boolean, boolean>;
expandRows: Ref<T[], T[]>;
defaultExpandAll: Ref<boolean, boolean>;
tableSize: Ref<any, any>;
rowKey: Ref<string | null, string | null>;
data: Ref<T[], T[]>;
_data: Ref<T[], T[]>;
isComplex: Ref<boolean, boolean>;
_columns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
originColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
columns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
leafColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
fixedLeafColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
rightFixedLeafColumns: Ref<TableColumnCtx<T>[], TableColumnCtx<T>[]>;
updateOrderFns: (() => void)[];
leafColumnsLength: Ref<number, number>;
fixedLeafColumnsLength: Ref<number, number>;
rightFixedLeafColumnsLength: Ref<number, number>;
isAllSelected: Ref<boolean, boolean>;
selection: Ref<T[], T[]>;
selectionIndeterminate: Ref<Record<string, boolean>, Record<string, boolean>>;
reserveSelection: Ref<boolean, boolean>;
selectOnIndeterminate: Ref<boolean, boolean>;
selectable: Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
rowExpandable: Ref<((row: T, index: number) => boolean) | null, ((row: T, index: number) => boolean) | null>;
filters: Ref<StoreFilter, StoreFilter>;
filteredData: Ref<T[] | null, T[] | null>;
sortingColumn: Ref<TableColumnCtx<T> | null, TableColumnCtx<T> | null>;
sortProp: Ref<string | null, string | null>;
sortOrder: Ref<string | number | null, string | number | null>;
hoverRow: Ref<T | null, T | null>;
};
};
//#endregion
export { useWatcher as default };

View File

@@ -0,0 +1,538 @@
import { isArray, isString } from "../../../../utils/types.mjs";
import { hasOwn } from "../../../../utils/objects.mjs";
import { ensureArray } from "../../../../utils/arrays.mjs";
import { getColumnById, getColumnByKey, getKeysMap, getRowIdentity, orderBy, toggleRowStatus } from "../util.mjs";
import useExpand from "./expand.mjs";
import useCurrent from "./current.mjs";
import useTree from "./tree.mjs";
import { computed, getCurrentInstance, ref, toRefs, unref, watch } from "vue";
//#region ../../packages/components/table/src/store/watcher.ts
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
if (!sortingColumn || isString(sortingColumn.sortable)) return data;
return 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() {
const instance = getCurrentInstance();
const { size: tableSize } = toRefs(instance.proxy?.$props);
const rowKey = ref(null);
const data = ref([]);
const _data = ref([]);
const isComplex = ref(false);
const _columns = ref([]);
const originColumns = ref([]);
const columns = ref([]);
const fixedColumns = ref([]);
const rightFixedColumns = ref([]);
const leafColumns = ref([]);
const fixedLeafColumns = ref([]);
const rightFixedLeafColumns = ref([]);
const updateOrderFns = [];
const leafColumnsLength = ref(0);
const fixedLeafColumnsLength = ref(0);
const rightFixedLeafColumnsLength = ref(0);
const isAllSelected = ref(false);
const selection = ref([]);
const selectionIndeterminate = ref({});
const reserveSelection = ref(false);
const selectOnIndeterminate = ref(false);
const selectable = ref(null);
const rowExpandable = ref(null);
const filters = ref({});
const filteredData = ref(null);
const sortingColumn = ref(null);
const sortProp = ref(null);
const sortOrder = ref(null);
const hoverRow = ref(null);
const selectedMap = computed(() => {
return rowKey.value ? getKeysMap(selection.value, rowKey.value) : void 0;
});
const getRowChildren = (row) => {
const { childrenColumnName, lazyTreeNodeMap } = instance.store.states;
const inlineChildren = row[childrenColumnName.value] ?? [];
if (!rowKey.value) return inlineChildren;
const id = getRowIdentity(row, rowKey.value);
return [...lazyTreeNodeMap.value?.[id] ?? [], ...inlineChildren];
};
watch(data, () => {
if (instance.state) {
scheduleLayout(false);
if (instance.props.tableLayout === "auto") instance.refs.tableHeaderRef?.updateFixedColumnStyle();
}
}, { deep: true });
const assertRowKey = () => {
if (!rowKey.value) throw new Error("[ElTable] prop row-key is required");
};
const updateChildFixed = (column) => {
column.children?.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)) {
if (_columns.value.indexOf(selectColumn) === 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 leafColumns = doFlattenColumns(notFixedColumns);
const fixedLeafColumns = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns.length;
fixedLeafColumnsLength.value = fixedLeafColumns.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length;
columns.value = Array.from(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
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[getRowIdentity(row, rowKey.value)];
else return selection.value.includes(row);
};
const rowIndexMap = computed(() => {
const map = /* @__PURE__ */ new Map();
if (!rowKey.value || !selectable.value) return map;
let index = 0;
const _traverse = (rows) => {
if (!isArray(rows)) return;
rows.forEach((row) => {
const id = getRowIdentity(row, rowKey.value);
map.set(id, index);
index += 1;
const children = getRowChildren(row);
if (children.length) _traverse(children);
});
};
_traverse(data.value || []);
return map;
});
const updateSelectionByChildren = (options = {}) => {
const { emitChange = true } = options;
if (treeStates.checkStrictly.value || !rowKey.value) {
selectionIndeterminate.value = {};
return;
}
const rowKeyValue = rowKey.value;
const rowIndexMapValue = options.rowIndexMap ?? rowIndexMap.value;
const selectableFn = selectable.value;
const rowIdCache = /* @__PURE__ */ new WeakMap();
const getCachedRowId = (row) => {
const cachedId = rowIdCache.get(row);
if (cachedId) return cachedId;
const id = getRowIdentity(row, rowKeyValue);
rowIdCache.set(row, id);
return id;
};
const indeterminateMap = {};
const selectedIdSet = new Set(selection.value.map((row) => getCachedRowId(row)));
const rowsToAdd = [];
let selectionChanged = false;
const _updateSelectionForRow = (row, id, selected) => {
const isRowSelected = selectedIdSet.has(id);
if (selected && !isRowSelected) {
rowsToAdd.push(row);
selectedIdSet.add(id);
selectionChanged = true;
} else if (!selected && isRowSelected) {
selectedIdSet.delete(id);
selectionChanged = true;
}
};
const _walk = (rows) => {
let selectedCount = 0;
let selectableCount = 0;
if (!isArray(rows)) return {
selectedCount,
selectableCount
};
rows.forEach((row) => {
const id = getCachedRowId(row);
const children = getRowChildren(row);
let childSelectedCount = 0;
let childSelectableCount = 0;
if (children.length) {
const childResult = _walk(children);
childSelectedCount = childResult.selectedCount;
childSelectableCount = childResult.selectableCount;
}
const rowSelectable = selectableFn ? selectableFn.call(null, row, rowIndexMapValue.get(id) ?? 0) : true;
if (rowSelectable) {
if (childSelectableCount > 0) {
const allSelected = childSelectedCount === childSelectableCount;
if (!allSelected && !(childSelectedCount === 0)) indeterminateMap[id] = true;
_updateSelectionForRow(row, id, allSelected);
}
}
if (rowSelectable) {
selectableCount += 1;
if (selectedIdSet.has(id)) selectedCount += 1;
}
selectedCount += childSelectedCount;
selectableCount += childSelectableCount;
});
return {
selectedCount,
selectableCount
};
};
_walk(data.value || []);
if (selectionChanged) {
const nextSelection = selection.value.filter((row) => selectedIdSet.has(getCachedRowId(row)));
rowsToAdd.forEach((row) => {
if (!selectedIdSet.has(getCachedRowId(row))) return;
nextSelection.push(row);
});
selection.value = nextSelection;
}
selectionIndeterminate.value = indeterminateMap;
if (selectionChanged && emitChange) instance.emit("selection-change", selection.value ? selection.value.slice() : []);
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
selection.value = [];
selectionIndeterminate.value = {};
if (oldSelection.length) instance.emit("selection-change", []);
};
const cleanSelection = () => {
let deleted;
if (rowKey.value) {
deleted = [];
const childrenKey = instance?.store?.states?.childrenColumnName.value;
const dataMap = getKeysMap(data.value, rowKey.value, true, childrenKey);
const { lazyTreeNodeMap } = instance.store.states;
if (lazyTreeNodeMap.value) Object.entries(lazyTreeNodeMap.value).forEach(([parentId, lazyRows]) => {
if (dataMap[parentId]) lazyRows.forEach((row) => {
const id = getRowIdentity(row, rowKey.value);
if (!dataMap[id]) dataMap[id] = {
row,
index: -1
};
});
});
for (const key in selectedMap.value) if (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;
updateSelectionByChildren({ emitChange: false });
instance.emit("selection-change", [...newSelection]);
}
};
const getSelectionRows = () => {
return (selection.value || []).slice();
};
const cascadeToLazyChildren = (row, selected, rowIndexMap) => {
if (!rowKey.value || treeStates.checkStrictly.value || !treeStates.lazy.value) return;
const { lazyTreeNodeMap, childrenColumnName } = instance.store.states;
const id = getRowIdentity(row, rowKey.value);
const lazyChildren = lazyTreeNodeMap.value?.[id] ?? [];
const inlineChildren = row[childrenColumnName.value] ?? [];
const treeProps = {
children: childrenColumnName.value,
checkStrictly: false
};
for (const child of lazyChildren) {
const childIndex = rowIndexMap.get(getRowIdentity(child, rowKey.value)) ?? 0;
toggleRowStatus(selection.value, child, selected, treeProps, selectable.value, childIndex, rowKey.value);
cascadeToLazyChildren(child, selected, rowIndexMap);
}
for (const child of inlineChildren) cascadeToLazyChildren(child, selected, rowIndexMap);
};
const toggleRowSelection = (row, selected, emitChange = true, ignoreSelectable = false) => {
const treeProps = {
children: instance?.store?.states?.childrenColumnName.value,
checkStrictly: instance?.store?.states?.checkStrictly.value
};
if (toggleRowStatus(selection.value, row, selected, treeProps, ignoreSelectable ? void 0 : selectable.value, data.value.indexOf(row), rowKey.value)) {
if (treeStates.lazy.value && !treeStates.checkStrictly.value) {
cascadeToLazyChildren(row, selected ?? isSelected(row), rowIndexMap.value);
updateSelectionByChildren({
emitChange: false,
rowIndexMap: rowIndexMap.value
});
} else updateSelectionByChildren({ emitChange: false });
const newSelection = (selection.value || []).slice();
if (emitChange) instance.emit("select", newSelection, row);
instance.emit("selection-change", newSelection);
}
};
const _toggleAllSelection = () => {
const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey = instance?.store?.states?.rowKey.value;
const { childrenColumnName } = instance.store.states;
const treeProps = {
children: childrenColumnName.value,
checkStrictly: false
};
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount;
if (toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex, rowKey)) selectionChanged = true;
childrenCount += getChildrenCount(getRowIdentity(row, rowKey));
});
const rowIndexMapVal = rowIndexMap.value;
if (treeStates.lazy.value && !treeStates.checkStrictly.value && rowKey) for (const lazyRows of Object.values(treeStates.lazyTreeNodeMap.value)) for (const child of lazyRows) {
const childIndex = rowIndexMapVal.get(getRowIdentity(child, rowKey)) ?? 0;
if (toggleRowStatus(selection.value, child, value, treeProps, selectable.value, childIndex, rowKey)) selectionChanged = true;
cascadeToLazyChildren(child, value, rowIndexMapVal);
}
updateSelectionByChildren({
emitChange: false,
rowIndexMap: rowIndexMapVal
});
if (selectionChanged) instance.emit("selection-change", selection.value ? [...selection.value] : []);
instance.emit("select-all", (selection.value || []).slice());
};
const updateAllSelected = () => {
if (data.value?.length === 0) {
isAllSelected.value = false;
return;
}
let rowIndex = 0;
let selectedCount = 0;
const checkSelectedStatus = (rows) => {
for (const row of rows) {
const isRowSelectable = selectable.value && selectable.value.call(null, row, rowIndex);
if (!isSelected(row)) {
if (!selectable.value || isRowSelectable) return false;
} else selectedCount++;
rowIndex++;
const children = getRowChildren(row);
if (children.length && !checkSelectedStatus(children)) return false;
}
return true;
};
const isAllSelected_ = checkSelectedStatus(data.value || []);
isAllSelected.value = selectedCount === 0 ? false : isAllSelected_;
};
const getRowIndeterminate = (row) => {
if (!rowKey.value) return false;
const id = getRowIdentity(row, rowKey.value);
return !!selectionIndeterminate.value[id];
};
const getChildrenCount = (rowKey) => {
if (!instance || !instance.store) return 0;
const { treeData } = instance.store.states;
let count = 0;
const children = treeData.value[rowKey]?.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const updateFilters = (column, values) => {
const filters_ = {};
ensureArray(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 = unref(_data);
Object.keys(filters.value).forEach((columnId) => {
const values = filters.value[columnId];
if (!values || values.length === 0) return;
const column = 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 = () => {
data.value = sortData(filteredData.value ?? [], {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value
});
};
const execQuery = (ignore = void 0) => {
if (!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 (isString(columnKeys)) columnKeys = [columnKeys];
if (isArray(columnKeys)) {
const columns_ = columnKeys.map((key) => 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 } = useExpand({
data,
rowKey
});
const { updateTreeExpandKeys, toggleTreeExpansion, updateTreeData, updateKeyChildren, loadOrToggle, states: treeStates } = useTree({
data,
rowKey
});
const { updateCurrentRowData, updateCurrentRow, setCurrentRowKey, states: currentData } = useCurrent({
data,
rowKey
});
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
if (columns.value.some(({ type }) => type === "expand")) toggleRowExpansion(row, expanded);
else toggleTreeExpansion(row, expanded);
};
watch(() => treeStates.checkStrictly.value, (value) => {
if (value) selectionIndeterminate.value = {};
else updateSelectionByChildren({ emitChange: false });
updateAllSelected();
});
watch(() => treeStates.lazyTreeNodeMap.value, () => {
if (!treeStates.lazy.value || treeStates.checkStrictly.value || !rowKey.value) return;
const rowIndexMapVal = rowIndexMap.value;
const prevLen = selection.value.length;
for (const parentId of Object.keys(treeStates.lazyTreeNodeMap.value)) {
if (!selectedMap.value?.[parentId]) continue;
cascadeToLazyChildren(selectedMap.value[parentId].row, true, rowIndexMapVal);
}
const cascadeChanged = selection.value.length !== prevLen;
updateSelectionByChildren({
emitChange: !cascadeChanged,
rowIndexMap: rowIndexMapVal
});
updateAllSelected();
if (cascadeChanged) instance.emit("selection-change", [...selection.value]);
});
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
getSelectionRows,
toggleRowSelection,
_toggleAllSelection,
toggleAllSelection: null,
updateAllSelected,
updateSelectionByChildren,
getRowIndeterminate,
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,
selectionIndeterminate,
reserveSelection,
selectOnIndeterminate,
selectable,
rowExpandable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow,
...expandStates,
...treeStates,
...currentData
}
};
}
//#endregion
export { useWatcher as default };
//# sourceMappingURL=watcher.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,41 @@
import { TableOverflowTooltipOptions } from "../util.js";
import { ColumnCls, ColumnStyle, DefaultRow, Table } from "../table/defaults.js";
import { Store } from "../store/index.js";
import { PropType } from "vue";
//#region ../../packages/components/table/src/table-body/defaults.d.ts
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;
};
//#endregion
export { TableBodyProps, defaultProps as default };

View File

@@ -0,0 +1,25 @@
//#region ../../packages/components/table/src/table-body/defaults.ts
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
};
//#endregion
export { defaultProps as default };
//# sourceMappingURL=defaults.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"defaults.mjs","names":[],"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"],"mappings":";AAsBA,MAAM,eAAe;CACnB,OAAO;EACL,UAAU;EACV,MAAM;EACP;CACD,QAAQ;CACR,eAAe;CACf,gBAAgB,EACd,MAAM,QACP;CACD,SAAS;EACP,gBAAgB,EAAE;EAClB,MAAM;EACP;CACD,cAAc,CAAC,QAAQ,SAAS;CAGhC,UAAU,CAAC,QAAQ,SAAS;CAC5B,OAAO;EACL,MAAM;EACN,SAAS;EACV;CACD,WAAW;CACZ"}

View File

@@ -0,0 +1,24 @@
import { TableOverflowTooltipOptions } from "../util.js";
import { DefaultRow } from "../table/defaults.js";
import { TableBodyProps } from "./defaults.js";
import * as _$vue from "vue";
import * as _$lodash_unified0 from "lodash-unified";
//#region ../../packages/components/table/src/table-body/events-helper.d.ts
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: _$lodash_unified0.DebouncedFunc<(index: number) => void>;
handleMouseLeave: _$lodash_unified0.DebouncedFunc<() => void>;
handleCellMouseEnter: (event: MouseEvent, row: T, tooltipOptions: TableOverflowTooltipOptions) => void;
handleCellMouseLeave: (event: MouseEvent) => void;
tooltipContent: _$vue.Ref<string, string>;
tooltipTrigger: _$vue.Ref<_$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>, _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>>;
};
//#endregion
export { useEvents as default };

View File

@@ -0,0 +1,119 @@
import { addClass, hasClass, removeClass } from "../../../../utils/dom/style.mjs";
import { isGreaterThan } from "../../../../utils/numbers.mjs";
import { createTablePopper, getCell, getColumnByCell, removePopper } from "../util.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { debounce } from "lodash-unified";
import { h, inject, ref } from "vue";
//#region ../../packages/components/table/src/table-body/events-helper.ts
function useEvents(props) {
const parent = inject(TABLE_INJECTION_KEY);
const tooltipContent = ref("");
const tooltipTrigger = ref(h("div"));
const handleEvent = (event, row, name) => {
const table = parent;
const cell = getCell(event);
let column = null;
const namespace = table?.vnode.el?.dataset.prefix;
if (cell) {
column = getColumnByCell({ columns: props.store?.states.columns.value ?? [] }, cell, namespace);
if (column) table?.emit(`cell-${name}`, row, column, cell, event);
}
table?.emit(`row-${name}`, row, column, event);
};
const handleDoubleClick = (event, row) => {
handleEvent(event, row, "dblclick");
};
const handleClick = (event, row) => {
props.store?.commit("setCurrentRow", row);
handleEvent(event, row, "click");
};
const handleContextMenu = (event, row) => {
handleEvent(event, row, "contextmenu");
};
const handleMouseEnter = debounce((index) => {
props.store?.commit("setHoverRow", index);
}, 30);
const handleMouseLeave = debounce(() => {
props.store?.commit("setHoverRow", null);
}, 30);
const getPadding = (el) => {
const style = window.getComputedStyle(el, null);
return {
left: Number.parseInt(style.paddingLeft, 10) || 0,
right: Number.parseInt(style.paddingRight, 10) || 0,
top: Number.parseInt(style.paddingTop, 10) || 0,
bottom: Number.parseInt(style.paddingBottom, 10) || 0
};
};
const toggleRowClassByCell = (rowSpan, event, toggle) => {
let node = (event?.target)?.parentNode;
while (rowSpan > 1) {
node = node?.nextSibling;
if (!node || node.nodeName !== "TR") break;
toggle(node, "hover-row hover-fixed-row");
rowSpan--;
}
};
const handleCellMouseEnter = (event, row, tooltipOptions) => {
if (!parent) return;
const table = parent;
const cell = getCell(event);
const namespace = table?.vnode.el?.dataset.prefix;
let column = null;
if (cell) {
column = getColumnByCell({ columns: props.store?.states.columns.value ?? [] }, cell, namespace);
if (!column) return;
if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, addClass);
const hoverState = table.hoverState = {
cell,
column,
row
};
table?.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
}
if (!tooltipOptions) {
if (removePopper?.trigger === cell) removePopper?.();
return;
}
const cellChild = event.target.querySelector(".cell");
if (!(hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length && cellChild.textContent?.trim())) return;
const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
/** detail: https://github.com/element-plus/element-plus/issues/10790
* What went wrong?
* UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above:
* - Expected: 188
* - Actual: 188.00000762939453
*/
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)) createTablePopper(tooltipOptions, (cell?.innerText || cell?.textContent) ?? "", row, column, cell, table);
else if (removePopper?.trigger === cell) removePopper?.();
};
const handleCellMouseLeave = (event) => {
const cell = getCell(event);
if (!cell) return;
if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, removeClass);
const oldHoverState = parent?.hoverState;
parent?.emit("cell-mouse-leave", oldHoverState?.row, oldHoverState?.column, oldHoverState?.cell, event);
};
return {
handleDoubleClick,
handleClick,
handleContextMenu,
handleMouseEnter,
handleMouseLeave,
handleCellMouseEnter,
handleCellMouseLeave,
tooltipContent,
tooltipTrigger
};
}
//#endregion
export { useEvents as default };
//# sourceMappingURL=events-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,91 @@
import TableLayout from "../table-layout.js";
import { DefaultRow, Table } from "../table/defaults.js";
import { TableBodyProps } from "./defaults.js";
import * as _$vue from "vue";
import { VNode } from "vue";
//#region ../../packages/components/table/src/table-body/index.d.ts
declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
store: {
required: boolean;
type: _$vue.PropType<TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: _$vue.PropType<TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: _$vue.PropType<TableBodyProps<any>["context"]>;
};
rowClassName: _$vue.PropType<TableBodyProps<any>["rowClassName"]>;
rowStyle: _$vue.PropType<TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}>, {
ns: {
namespace: _$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: TableLayout<DefaultRow>) => void;
onScrollableChange: (layout: TableLayout<DefaultRow>) => void;
wrappedRowRender: (row: any, $index: number) => VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}> | VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>[] | VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: _$vue.Ref<string, string>;
tooltipTrigger: _$vue.Ref<VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>, VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>>;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
store: {
required: boolean;
type: _$vue.PropType<TableBodyProps<any>["store"]>;
};
stripe: BooleanConstructor;
tooltipEffect: StringConstructor;
tooltipOptions: {
type: _$vue.PropType<TableBodyProps<any>["tooltipOptions"]>;
};
context: {
default: () => {};
type: _$vue.PropType<TableBodyProps<any>["context"]>;
};
rowClassName: _$vue.PropType<TableBodyProps<any>["rowClassName"]>;
rowStyle: _$vue.PropType<TableBodyProps<any>["rowStyle"]>;
fixed: {
type: StringConstructor;
default: string;
};
highlight: BooleanConstructor;
}>> & Readonly<{}>, {
fixed: string;
context: Table<any>;
stripe: boolean;
highlight: boolean;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default as default };

View File

@@ -0,0 +1,80 @@
import { isClient } from "../../../../utils/browser.mjs";
import { rAF } from "../../../../utils/raf.mjs";
import { addClass, removeClass } from "../../../../utils/dom/style.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { removePopper } from "../util.mjs";
import useLayoutObserver from "../layout-observer.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import useRender from "./render-helper.mjs";
import defaultProps from "./defaults.mjs";
import { defineComponent, getCurrentInstance, h, inject, onUnmounted, watch } from "vue";
//#region ../../packages/components/table/src/table-body/index.ts
var table_body_default = defineComponent({
name: "ElTableBody",
props: defaultProps,
setup(props) {
const instance = getCurrentInstance();
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender(props);
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
const hoveredCellList = [];
watch(props.store?.states.hoverRow, (newVal, oldVal) => {
const el = instance?.vnode.el;
const rows = Array.from(el?.children || []).filter((e) => e?.classList.contains(`${ns.e("row")}`));
let rowNum = newVal;
const childNodes = rows[rowNum]?.childNodes;
if (childNodes?.length) {
let control = 0;
Array.from(childNodes).reduce((acc, item, index) => {
if (childNodes[index]?.colSpan > 1) control = childNodes[index]?.colSpan;
if (item.nodeName !== "TD" && control === 0) acc.push(index);
control > 0 && control--;
return acc;
}, []).forEach((rowIndex) => {
rowNum = newVal;
while (rowNum > 0) {
const preChildNodes = rows[rowNum - 1]?.childNodes;
if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
addClass(preChildNodes[rowIndex], "hover-cell");
hoveredCellList.push(preChildNodes[rowIndex]);
break;
}
rowNum--;
}
});
} else {
hoveredCellList.forEach((item) => removeClass(item, "hover-cell"));
hoveredCellList.length = 0;
}
if (!props.store?.states.isComplex.value || !isClient) return;
rAF(() => {
const oldRow = rows[oldVal];
const newRow = rows[newVal];
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) removeClass(oldRow, "hover-row");
if (newRow) addClass(newRow, "hover-row");
});
});
onUnmounted(() => {
removePopper?.();
});
return {
ns,
onColumnsChange,
onScrollableChange,
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
},
render() {
const { wrappedRowRender, store } = this;
return h("tbody", { tabIndex: -1 }, [(store?.states.data.value || []).reduce((acc, row) => {
return acc.concat(wrappedRowRender(row, acc.length));
}, [])]);
}
});
//#endregion
export { table_body_default as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,22 @@
import { DefaultRow } from "../table/defaults.js";
import { TableBodyProps } from "./defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-body/render-helper.d.ts
declare function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
wrappedRowRender: (row: T, $index: number) => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}> | _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>[] | _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>[][];
tooltipContent: _$vue.Ref<string, string>;
tooltipTrigger: _$vue.Ref<_$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>, _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
[key: string]: any;
}>>;
};
//#endregion
export { useRender as default };

View File

@@ -0,0 +1,178 @@
import { isBoolean, isPropAbsent } from "../../../../utils/types.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { getRowIdentity } from "../util.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import useEvents from "./events-helper.mjs";
import useStyles from "./styles-helper.mjs";
import td_wrapper_default from "./td-wrapper.mjs";
import { merge } from "lodash-unified";
import { computed, h, inject } from "vue";
//#region ../../packages/components/table/src/table-body/render-helper.ts
function useRender(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const { handleDoubleClick, handleClick, handleContextMenu, handleMouseEnter, handleMouseLeave, handleCellMouseEnter, handleCellMouseLeave, tooltipContent, tooltipTrigger } = useEvents(props);
const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan, getColspanRealWidth } = useStyles(props);
let displayIndex = -1;
const firstDefaultColumnIndex = computed(() => {
return props.store?.states.columns.value.findIndex(({ type }) => type === "default");
});
const getKeyOfRow = (row, index) => {
const rowKey = (parent?.props)?.rowKey;
if (rowKey) return 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));
return h("tr", {
style: [display ? null : { display: "none" }, 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 (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 && merge({ effect: tooltipEffect }, tooltipOptions, column.showOverflowTooltip);
return h(td_wrapper_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;
if (columns.some(({ type }) => type === "expand")) {
const expanded = isRowExpanded(row);
const tr = rowRender(row, $index, void 0, expanded);
const renderExpanded = parent?.renderExpanded;
if (!renderExpanded) {
console.error("[Element Error]renderExpanded is required.");
return tr;
}
const rows = [[tr]];
if (parent.props.preserveExpandedContent || expanded) rows[0].push(h("tr", {
key: `expanded-row__${tr.key}`,
style: { display: expanded ? "" : "none" }
}, [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 = 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 (isBoolean(cur.lazy)) {
if (treeRowData && isBoolean(cur.loaded) && cur.loaded) treeRowData.noLazyChildren = !(cur.children && cur.children.length);
treeRowData.loading = cur.loading;
}
}
const tmp = [rowRender(row, $index, treeRowData ?? void 0)];
if (cur) {
let i = 0;
const traverse = (children, parent) => {
if (!(children && children.length && parent)) return;
children.forEach((node) => {
const innerTreeRowData = {
display: parent.display && parent.expanded,
level: parent.level + 1,
expanded: false,
noLazyChildren: false,
loading: false
};
const childKey = getRowIdentity(node, rowKey.value);
if (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 (isBoolean(cur.lazy)) {
if (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) traverse(lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value], cur);
});
};
cur.display = true;
traverse(lazyTreeNodeMap.value[key] || row[childrenColumnName.value], cur);
}
return tmp;
} else return rowRender(row, $index, void 0);
};
return {
wrappedRowRender,
tooltipContent,
tooltipTrigger
};
}
//#endregion
export { useRender as default };
//# sourceMappingURL=render-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,19 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { DefaultRow } from "../table/defaults.js";
import { TableBodyProps } from "./defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-body/styles-helper.d.ts
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>) => _$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;
};
//#endregion
export { useStyles as default };

View File

@@ -0,0 +1,104 @@
import { isArray, isFunction, isObject, isString } from "../../../../utils/types.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ensurePosition, getFixedColumnOffset, getFixedColumnsClass } from "../util.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { inject } from "vue";
//#region ../../packages/components/table/src/table-body/styles-helper.ts
function useStyles(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getRowStyle = (row, rowIndex) => {
const rowStyle = parent?.props.rowStyle;
if (isFunction(rowStyle)) return rowStyle.call(null, {
row,
rowIndex
});
return rowStyle || null;
};
const getRowClass = (row, rowIndex, displayIndex) => {
const classes = [ns.e("row")];
if (parent?.props.highlightCurrentRow && row === props.store?.states.currentRow.value) classes.push("current-row");
if (props.stripe && displayIndex % 2 === 1) classes.push(ns.em("row", "striped"));
const rowClassName = parent?.props.rowClassName;
if (isString(rowClassName)) classes.push(rowClassName);
else if (isFunction(rowClassName)) classes.push(rowClassName.call(null, {
row,
rowIndex
}));
return classes;
};
const getCellStyle = (rowIndex, columnIndex, row, column) => {
const cellStyle = parent?.props.cellStyle;
let cellStyles = cellStyle ?? {};
if (isFunction(cellStyle)) cellStyles = cellStyle.call(null, {
rowIndex,
columnIndex,
row,
column
});
const fixedStyle = getFixedColumnOffset(columnIndex, props?.fixed, props.store);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return Object.assign({}, cellStyles, fixedStyle);
};
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
const fixedClasses = getFixedColumnsClass(ns.b(), columnIndex, props?.fixed, props.store, void 0, offset);
const classes = [
column.id,
column.align,
column.className,
...fixedClasses
];
const cellClassName = parent?.props.cellClassName;
if (isString(cellClassName)) classes.push(cellClassName);
else if (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?.props.spanMethod;
if (isFunction(fn)) {
const result = fn({
row,
column,
rowIndex,
columnIndex
});
if (isArray(result)) {
rowspan = result[0];
colspan = result[1];
} else if (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
};
}
//#endregion
export { useStyles as default };
//# sourceMappingURL=styles-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,7 @@
import td_wrapper_vue_vue_type_script_setup_true_lang_default from "./td-wrapper.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/table/src/table-body/td-wrapper.vue
var td_wrapper_default = td_wrapper_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { td_wrapper_default as default };
//# sourceMappingURL=td-wrapper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"td-wrapper.mjs","names":[],"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"],"mappings":""}

View File

@@ -0,0 +1,38 @@
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-body/td-wrapper.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
colspan: {
type: NumberConstructor;
default: number;
};
rowspan: {
type: NumberConstructor;
default: number;
};
}>> & Readonly<{}>, {
rowspan: number;
colspan: number;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default as default };

View File

@@ -0,0 +1,29 @@
import { createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
//#region ../../packages/components/table/src/table-body/td-wrapper.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["colspan", "rowspan"];
var td_wrapper_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "TableTdWrapper",
__name: "td-wrapper",
props: {
colspan: {
type: Number,
default: 1
},
rowspan: {
type: Number,
default: 1
}
},
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createElementBlock("td", {
colspan: __props.colspan,
rowspan: __props.rowspan
}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
};
}
});
//#endregion
export { td_wrapper_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=td-wrapper.vue_vue_type_script_setup_true_lang.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"td-wrapper.vue_vue_type_script_setup_true_lang.mjs","names":[],"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"],"mappings":";;;;;;;;;;;;;;;;;;uBACE,mBAAuD,MAAA;IAAlD,SAAS,QAAA;IAAU,SAAS,QAAA;OAAS,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}

View File

@@ -0,0 +1,225 @@
import { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from "../util.js";
import { DefaultRow, Table, TableSortOrder } from "../table/defaults.js";
import { Store } from "../store/index.js";
import { ComponentInternalInstance, PropType, Ref, VNode } from "vue";
//#region ../../packages/components/table/src/table-column/defaults.d.ts
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>>>;
}
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: (StringConstructor | NumberConstructor)[];
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: (StringConstructor | NumberConstructor)[];
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;
};
};
//#endregion
export { type FilterMethods, type Filters, type TableColumn, type TableColumnCtx, type ValueOf, _default as default };

View File

@@ -0,0 +1,168 @@
//#region ../../packages/components/table/src/table-column/defaults.ts
var defaults_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: String,
default: "default"
},
/**
* @description column label
*/
label: String,
/**
* @description class name of cells in the column
*/
className: String,
/**
* @description class name of the label of this column
*/
labelClassName: String,
/**
* @description
*/
property: String,
/**
* @description field name. You can also use its alias: `property`
*/
prop: String,
/**
* @description column width
*/
width: {
type: [String, Number],
default: ""
},
/**
* @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: [String, Number],
default: ""
},
/**
* @description render function for table header of this column
*/
renderHeader: Function,
/**
* @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: [Boolean, String],
default: false
},
/**
* @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
*/
sortMethod: Function,
/**
* @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: [
String,
Function,
Array
],
/**
* @description whether column width can be resized, works when `border` of `el-table` is `true`
*/
resizable: {
type: Boolean,
default: true
},
/**
* @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: String,
/**
* @description alignment, the value should be 'left' \/ 'center' \/ 'right'
*/
align: String,
/**
* @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: String,
/**
* @description whether to hide extra content and show them in a tooltip when hovering on the cell
*/
showOverflowTooltip: {
type: [Boolean, Object],
default: void 0
},
/**
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
*/
tooltipFormatter: Function,
/**
* @description whether column is fixed at left / right. Will be fixed at left if `true`
*/
fixed: [Boolean, String],
/**
* @description function that formats cell content
*/
formatter: Function,
/**
* @description function that determines if a certain row can be selected, works when `type` is 'selection'
*/
selectable: Function,
/**
* @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
*/
reserveSelection: Boolean,
/**
* @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: Function,
/**
* @description filter value for selected data, might be useful when table header is rendered with `render-header`
*/
filteredValue: Array,
/**
* @description an array of data filtering options. For each element in this array, `text` and `value` are required
*/
filters: Array,
/**
* @description placement for the filter dropdown
*/
filterPlacement: String,
/**
* @description whether data filtering supports multiple options
*/
filterMultiple: {
type: Boolean,
default: true
},
/**
* @description className for the filter dropdown
*/
filterClassName: String,
/**
* @description customize indices for each row, works on columns with `type=index`
*/
index: [Number, Function],
/**
* @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: Array,
default: () => {
return [
"ascending",
"descending",
null
];
},
validator: (val) => {
return val.every((order) => [
"ascending",
"descending",
null
].includes(order));
}
}
};
//#endregion
export { defaults_default as default };
//# sourceMappingURL=defaults.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,227 @@
import { UseTooltipProps } from "../../../tooltip/src/tooltip.js";
import { CheckboxProps, CheckboxValueType } from "../../../checkbox/src/checkbox.js";
import _default$1 from "../../../checkbox/src/checkbox-button.vue.js";
import _default$2 from "../../../checkbox/src/checkbox-group.vue.js";
import { TableColumnCtx } from "./defaults.js";
import { TableSortOrder } from "../table/defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-column/index.d.ts
declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
type: {
type: StringConstructor;
default: string;
};
label: StringConstructor;
className: StringConstructor;
labelClassName: StringConstructor;
property: StringConstructor;
prop: StringConstructor;
width: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
minWidth: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
renderHeader: _$vue.PropType<TableColumnCtx<any>["renderHeader"]>;
sortable: {
type: (BooleanConstructor | StringConstructor)[];
default: boolean;
};
sortMethod: _$vue.PropType<TableColumnCtx<any>["sortMethod"]>;
sortBy: _$vue.PropType<TableColumnCtx<any>["sortBy"]>;
resizable: {
type: BooleanConstructor;
default: boolean;
};
columnKey: StringConstructor;
align: StringConstructor;
headerAlign: StringConstructor;
showOverflowTooltip: {
type: _$vue.PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
default: undefined;
};
tooltipFormatter: _$vue.PropType<TableColumnCtx<any>["tooltipFormatter"]>;
fixed: (BooleanConstructor | StringConstructor)[];
formatter: _$vue.PropType<TableColumnCtx<any>["formatter"]>;
selectable: _$vue.PropType<TableColumnCtx<any>["selectable"]>;
reserveSelection: BooleanConstructor;
filterMethod: _$vue.PropType<TableColumnCtx<any>["filterMethod"]>;
filteredValue: _$vue.PropType<TableColumnCtx<any>["filteredValue"]>;
filters: _$vue.PropType<TableColumnCtx<any>["filters"]>;
filterPlacement: StringConstructor;
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
filterClassName: StringConstructor;
index: _$vue.PropType<TableColumnCtx<any>["index"]>;
sortOrders: {
type: _$vue.PropType<TableColumnCtx<any>["sortOrders"]>;
default: () => (string | null)[];
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
};
}>, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
type: {
type: StringConstructor;
default: string;
};
label: StringConstructor;
className: StringConstructor;
labelClassName: StringConstructor;
property: StringConstructor;
prop: StringConstructor;
width: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
minWidth: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
renderHeader: _$vue.PropType<TableColumnCtx<any>["renderHeader"]>;
sortable: {
type: (BooleanConstructor | StringConstructor)[];
default: boolean;
};
sortMethod: _$vue.PropType<TableColumnCtx<any>["sortMethod"]>;
sortBy: _$vue.PropType<TableColumnCtx<any>["sortBy"]>;
resizable: {
type: BooleanConstructor;
default: boolean;
};
columnKey: StringConstructor;
align: StringConstructor;
headerAlign: StringConstructor;
showOverflowTooltip: {
type: _$vue.PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
default: undefined;
};
tooltipFormatter: _$vue.PropType<TableColumnCtx<any>["tooltipFormatter"]>;
fixed: (BooleanConstructor | StringConstructor)[];
formatter: _$vue.PropType<TableColumnCtx<any>["formatter"]>;
selectable: _$vue.PropType<TableColumnCtx<any>["selectable"]>;
reserveSelection: BooleanConstructor;
filterMethod: _$vue.PropType<TableColumnCtx<any>["filterMethod"]>;
filteredValue: _$vue.PropType<TableColumnCtx<any>["filteredValue"]>;
filters: _$vue.PropType<TableColumnCtx<any>["filters"]>;
filterPlacement: StringConstructor;
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
filterClassName: StringConstructor;
index: _$vue.PropType<TableColumnCtx<any>["index"]>;
sortOrders: {
type: _$vue.PropType<TableColumnCtx<any>["sortOrders"]>;
default: () => (string | null)[];
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
};
}>> & Readonly<{}>, {
type: string;
minWidth: string | number;
width: string | number;
resizable: boolean;
showOverflowTooltip: boolean | Partial<Pick<UseTooltipProps, "offset" | "appendTo" | "effect" | "enterable" | "popperClass" | "placement" | "popperOptions" | "showArrow" | "transition" | "showAfter" | "hideAfter">> | undefined;
sortOrders: (TableSortOrder | null)[];
sortable: string | boolean;
reserveSelection: boolean;
filterMultiple: boolean;
}, {}, {
ElCheckbox: {
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, _$vue.PublicProps, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, string, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
}) & _$vue.ObjectPlugin & {
setPropsDefaults: (defaults: {
readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly indeterminate?: boolean | (() => boolean) | undefined;
readonly disabled?: boolean | (() => boolean) | undefined;
readonly checked?: boolean | (() => boolean) | undefined;
readonly name?: string | (() => string) | undefined;
readonly trueValue?: string | number | (() => string | number) | undefined;
readonly falseValue?: string | number | (() => string | number) | undefined;
readonly trueLabel?: string | number | (() => string | number) | undefined;
readonly falseLabel?: string | number | (() => string | number) | undefined;
readonly id?: string | (() => string) | undefined;
readonly border?: boolean | (() => boolean) | undefined;
readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
readonly tabindex?: string | number | (() => string | number) | undefined;
readonly validateEvent?: boolean | (() => boolean) | undefined;
readonly ariaLabel?: string | (() => string) | undefined;
readonly ariaControls?: string | (() => string) | undefined;
}) => void;
} & {
CheckboxButton: typeof _default$1;
CheckboxGroup: typeof _default$2;
};
}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { _default as default };

View File

@@ -0,0 +1,121 @@
import { isArray, isString, isUndefined } from "../../../../utils/types.mjs";
import { useGlobalConfig } from "../../../config-provider/src/hooks/use-global-config.mjs";
import { ElCheckbox } from "../../../checkbox/index.mjs";
import { compose, mergeOptions } from "../util.mjs";
import { cellStarts } from "../config.mjs";
import useWatcher from "./watcher-helper.mjs";
import useRender from "./render-helper.mjs";
import defaults_default from "./defaults.mjs";
import { Fragment, computed, defineComponent, getCurrentInstance, h, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue";
//#region ../../packages/components/table/src/table-column/index.ts
let columnIdSeed = 1;
var table_column_default = defineComponent({
name: "ElTableColumn",
components: { ElCheckbox },
props: defaults_default,
setup(props, { slots }) {
const instance = getCurrentInstance();
const globalConfig = useGlobalConfig("table");
const columnConfig = ref({});
const owner = computed(() => {
let parent = instance.parent;
while (parent && !parent.tableId) parent = parent.parent;
return parent;
});
const { registerNormalWatchers, registerComplexWatchers } = useWatcher(owner, props);
const { columnId, isSubColumn, realHeaderAlign, columnOrTableParent, setColumnWidth, setColumnForcedProps, setColumnRenders, getPropsData, getColumnElIndex, realAlign, updateColumnOrder } = useRender(props, slots, owner);
const parent = columnOrTableParent.value;
columnId.value = `${"tableId" in parent && parent.tableId || "columnId" in parent && parent.columnId}_column_${columnIdSeed++}`;
onBeforeMount(() => {
isSubColumn.value = owner.value !== parent;
const type = props.type || "default";
const sortable = props.sortable === "" ? true : props.sortable;
const showOverflowTooltip = type === "selection" ? false : isUndefined(props.showOverflowTooltip) ? parent.props.showOverflowTooltip ?? globalConfig.value?.showOverflowTooltip : props.showOverflowTooltip;
const tooltipFormatter = isUndefined(props.tooltipFormatter) ? parent.props.tooltipFormatter ?? globalConfig.value?.tooltipFormatter : props.tooltipFormatter;
const defaults = {
...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
};
let column = getPropsData([
"columnKey",
"label",
"className",
"labelClassName",
"type",
"renderHeader",
"formatter",
"fixed",
"resizable"
], [
"sortMethod",
"sortBy",
"sortOrders"
], ["selectable", "reserveSelection"], [
"filterMethod",
"filters",
"filterMultiple",
"filterOpened",
"filteredValue",
"filterPlacement",
"filterClassName"
]);
column = mergeOptions(defaults, column);
column = compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
columnConfig.value = column;
registerNormalWatchers();
registerComplexWatchers();
});
onMounted(() => {
const parent = columnOrTableParent.value;
const children = isSubColumn.value ? parent.vnode.el?.children : parent.refs.hiddenColumns?.children;
const getColumnIndex = () => getColumnElIndex(children || [], instance.vnode.el);
columnConfig.value.getColumnIndex = getColumnIndex;
getColumnIndex() > -1 && owner.value.store.commit("insertColumn", columnConfig.value, isSubColumn.value ? "columnConfig" in parent && parent.columnConfig.value : null, updateColumnOrder);
});
onBeforeUnmount(() => {
const getColumnIndex = columnConfig.value.getColumnIndex;
(getColumnIndex ? getColumnIndex() : -1) > -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;
},
render() {
try {
const renderDefault = this.$slots.default?.({
row: {},
column: {},
$index: -1
});
const children = [];
if (isArray(renderDefault)) {
for (const childNode of renderDefault) if (childNode.type?.name === "ElTableColumn" || childNode.shapeFlag & 2) children.push(childNode);
else if (childNode.type === Fragment && isArray(childNode.children)) childNode.children.forEach((vnode) => {
if (vnode?.patchFlag !== 1024 && !isString(vnode?.children)) children.push(vnode);
});
}
return h("div", children);
} catch {
return h("div", []);
}
}
});
//#endregion
export { table_column_default as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,21 @@
import { TableColumn, TableColumnCtx } from "./defaults.js";
import { DefaultRow, Table } from "../table/defaults.js";
import * as _$vue from "vue";
import { ComputedRef, RendererNode, Slots } from "vue";
//#region ../../packages/components/table/src/table-column/render-helper.d.ts
declare function useRender<T extends DefaultRow>(props: TableColumnCtx<T>, slots: Slots, owner: ComputedRef<Table<T>>): {
columnId: _$vue.Ref<string, string>;
realAlign: _$vue.Ref<string | null | undefined, string | null | undefined>;
isSubColumn: _$vue.Ref<boolean, boolean>;
realHeaderAlign: _$vue.Ref<string | null | undefined, 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;
};
//#endregion
export { useRender as default };

View File

@@ -0,0 +1,144 @@
import { isArray, isUndefined } from "../../../../utils/types.mjs";
import { debugWarn } from "../../../../utils/error.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ensureValidVNode, parseMinWidth, parseWidth } from "../util.mjs";
import { cellForced, defaultRenderCell, getDefaultClassName, treeCellPrefix } from "../config.mjs";
import { Comment, Fragment, computed, createTextVNode, getCurrentInstance, h, ref, renderSlot, unref, watchEffect } from "vue";
//#region ../../packages/components/table/src/table-column/render-helper.ts
function useRender(props, slots, owner) {
const instance = getCurrentInstance();
const columnId = ref("");
const isSubColumn = ref(false);
const realAlign = ref();
const realHeaderAlign = ref();
const ns = useNamespace("table");
watchEffect(() => {
realAlign.value = props.align ? `is-${props.align}` : null;
realAlign.value;
});
watchEffect(() => {
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
realHeaderAlign.value;
});
const columnOrTableParent = computed(() => {
let parent = instance.vnode.vParent || instance.parent;
while (parent && !parent.tableId && !parent.columnId) parent = parent.vnode.vParent || parent.parent;
return parent;
});
const hasTreeColumn = 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 = ref(parseWidth(props.width));
const realMinWidth = ref(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(isUndefined(column.width) ? column.minWidth : column.width);
return column;
};
const setColumnForcedProps = (column) => {
const type = column.type;
const source = cellForced[type] || {};
Object.keys(source).forEach((prop) => {
const value = source[prop];
if (prop !== "className" && !isUndefined(value)) column[prop] = value;
});
const className = getDefaultClassName(type);
if (className) {
const forceClass = `${unref(ns.namespace)}-${className}`;
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
}
return column;
};
const checkSubColumn = (children) => {
if (isArray(children)) children.forEach((child) => check(child));
else check(children);
function check(item) {
if (item?.type?.name === "ElTableColumn") item.vParent = instance;
}
};
const setColumnRenders = (column) => {
if (props.renderHeader) debugWarn("TableColumn", "Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");
else if (column.type !== "selection") column.renderHeader = (scope) => {
instance.columnConfig.value["label"];
if (slots.header) {
const slotResult = slots.header(scope);
if (ensureValidVNode(slotResult)) return h(Fragment, slotResult);
}
return createTextVNode(column.label);
};
if (slots["filter-icon"]) column.renderFilterIcon = (scope) => {
return renderSlot(slots, "filter-icon", scope);
};
if (slots.expand) column.renderExpand = (scope) => {
return renderSlot(slots, "expand", scope);
};
let originRenderCell = column.renderCell;
if (column.type === "expand") {
column.renderCell = (data) => h("div", { class: "cell" }, [originRenderCell(data)]);
owner.value.renderExpanded = (row) => {
return slots.default ? slots.default(row) : slots.default;
};
} else {
originRenderCell = originRenderCell || defaultRenderCell;
column.renderCell = (data) => {
let children = null;
if (slots.default) {
const vnodes = slots.default(data);
children = vnodes.some((v) => v.type !== Comment) ? vnodes : originRenderCell(data);
} else children = originRenderCell(data);
const { columns } = owner.value.store.states;
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
const prefix = treeCellPrefix(data, hasTreeColumn.value && data.cellIndex === firstUserColumnIndex);
const props = {
class: "cell",
style: {}
};
if (column.showOverflowTooltip) {
props.class = `${props.class} ${unref(ns.namespace)}-tooltip`;
props.style = { width: `${(data.column.realWidth || Number(data.column.width)) - 1}px` };
}
checkSubColumn(children);
return h("div", props, [prefix, children]);
};
}
return column;
};
const getPropsData = (...propsKey) => {
return propsKey.reduce((prev, cur) => {
if (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
};
}
//#endregion
export { useRender as default };
//# sourceMappingURL=render-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,11 @@
import { TableColumnCtx } from "./defaults.js";
import { DefaultRow } from "../table/defaults.js";
import { ComputedRef } from "vue";
//#region ../../packages/components/table/src/table-column/watcher-helper.d.ts
declare function useWatcher<T extends DefaultRow>(owner: ComputedRef<any>, props_: Partial<TableColumnCtx<T>>): {
registerComplexWatchers: () => void;
registerNormalWatchers: () => void;
};
//#endregion
export { useWatcher as default };

View File

@@ -0,0 +1,87 @@
import { isUndefined } from "../../../../utils/types.mjs";
import { hasOwn } from "../../../../utils/objects.mjs";
import { useGlobalConfig } from "../../../config-provider/src/hooks/use-global-config.mjs";
import { parseMinWidth, parseWidth } from "../util.mjs";
import { getCurrentInstance, watch } from "vue";
//#region ../../packages/components/table/src/table-column/watcher-helper.ts
function getAllAliases(props, aliases) {
return props.reduce((prev, cur) => {
prev[cur] = cur;
return prev;
}, aliases);
}
function useWatcher(owner, props_) {
const instance = 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 (hasOwn(props_, columnKey)) watch(() => props_[columnKey], (newVal) => {
let value = newVal;
if (columnKey === "width" && key === "realWidth") value = parseWidth(newVal);
if (columnKey === "minWidth" && key === "realMinWidth") value = 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",
"resizable"
];
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 (hasOwn(props_, columnKey)) watch(() => props_[columnKey], (newVal) => {
instance.columnConfig.value[key] = newVal;
if (key === "filters" || key === "filterMethod") instance.columnConfig.value["filterable"] = !!(instance.columnConfig.value["filters"] || instance.columnConfig.value["filterMethod"]);
});
});
parentProps.forEach((key) => {
if (hasOwn(owner.value.props, key)) watch(() => owner.value.props[key], (newVal) => {
if (instance.columnConfig.value.type === "selection") return;
if (!isUndefined(props_[key])) return;
instance.columnConfig.value[key] = newVal;
});
});
const globalConfig = useGlobalConfig("table");
if (globalConfig.value && hasOwn(globalConfig.value, "showOverflowTooltip")) watch(() => globalConfig.value?.showOverflowTooltip, (newVal) => {
if (instance.columnConfig.value.type === "selection") return;
if (!isUndefined(props_.showOverflowTooltip) || !isUndefined(owner.value.props.showOverflowTooltip)) return;
instance.columnConfig.value.showOverflowTooltip = newVal;
});
};
return {
registerComplexWatchers,
registerNormalWatchers
};
}
//#endregion
export { useWatcher as default };
//# sourceMappingURL=watcher-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,85 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import TableLayout from "../table-layout.js";
import { DefaultRow, Sort, SummaryMethod } from "../table/defaults.js";
import { Store } from "../store/index.js";
import * as _$vue from "vue";
import { PropType } from "vue";
//#region ../../packages/components/table/src/table-footer/index.d.ts
interface TableFooter<T extends DefaultRow> {
fixed: string;
store: Store<T>;
summaryMethod: SummaryMethod<T>;
sumText: string;
border: boolean;
defaultSort: Sort;
}
declare const _default: _$vue.DefineComponent<_$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;
};
};
}>, {
ns: {
namespace: _$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: TableLayout<any>) => void;
onColumnsChange: (layout: TableLayout<any>) => void;
getCellClasses: (columns: TableColumnCtx<any>[], cellIndex: number) => string[];
getCellStyles: (column: TableColumnCtx<any>, cellIndex: number) => _$vue.CSSProperties | undefined;
columns: _$vue.ComputedRef<TableColumnCtx<DefaultRow>[]>;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$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;
};
};
}>> & Readonly<{}>, {
fixed: string;
border: boolean;
defaultSort: Sort;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { TableFooter, _default as default };

View File

@@ -0,0 +1,88 @@
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import useLayoutObserver from "../layout-observer.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import useStyle from "./style-helper.mjs";
import { defineComponent, h, inject } from "vue";
//#region ../../packages/components/table/src/table-footer/index.ts
var table_footer_default = 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 = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const { getCellClasses, getCellStyles, columns } = useStyle(props);
const { onScrollableChange, onColumnsChange } = useLayoutObserver(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 h(h("tfoot", [h("tr", {}, [...columns.map((column, cellIndex) => h("td", {
key: cellIndex,
colspan: column.colSpan,
rowspan: column.rowSpan,
class: getCellClasses(columns, cellIndex),
style: getCellStyles(column, cellIndex)
}, [h("div", { class: ["cell", column.labelClassName] }, [sums[cellIndex]])]))])]));
}
});
//#endregion
export { table_footer_default as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { DefaultRow } from "../table/defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-footer/mapState-helper.d.ts
declare function useMapState(): {
leftFixedLeafCount: _$vue.ComputedRef<number>;
rightFixedLeafCount: _$vue.ComputedRef<number>;
columnsCount: _$vue.ComputedRef<number>;
leftFixedCount: _$vue.ComputedRef<number>;
rightFixedCount: _$vue.ComputedRef<number>;
columns: _$vue.ComputedRef<TableColumnCtx<DefaultRow>[]>;
};
//#endregion
export { useMapState as default };

View File

@@ -0,0 +1,28 @@
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { computed, inject } from "vue";
//#region ../../packages/components/table/src/table-footer/mapState-helper.ts
function useMapState() {
const store = inject(TABLE_INJECTION_KEY)?.store;
return {
leftFixedLeafCount: computed(() => {
return store?.states.fixedLeafColumnsLength.value ?? 0;
}),
rightFixedLeafCount: computed(() => {
return store?.states.rightFixedColumns.value.length ?? 0;
}),
columnsCount: computed(() => {
return store?.states.columns.value.length ?? 0;
}),
leftFixedCount: computed(() => {
return store?.states.fixedColumns.value.length ?? 0;
}),
rightFixedCount: computed(() => {
return store?.states.rightFixedColumns.value.length ?? 0;
}),
columns: computed(() => store?.states.columns.value ?? [])
};
}
//#endregion
export { useMapState as default };
//# sourceMappingURL=mapState-helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"mapState-helper.mjs","names":[],"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"],"mappings":";;;AAGA,SAAS,cAAc;CAErB,MAAM,QADQ,OAAO,oBACF,EAAE;CAiBrB,OAAO;EACL,oBAjByB,eAAe;GACxC,OAAO,OAAO,OAAO,uBAAuB,SAAS;IAgBnC;EAClB,qBAf0B,eAAe;GACzC,OAAO,OAAO,OAAO,kBAAkB,MAAM,UAAU;IAcpC;EACnB,cAbmB,eAAe;GAClC,OAAO,OAAO,OAAO,QAAQ,MAAM,UAAU;IAYjC;EACZ,gBAXqB,eAAe;GACpC,OAAO,OAAO,OAAO,aAAa,MAAM,UAAU;IAUpC;EACd,iBATsB,eAAe;GACrC,OAAO,OAAO,OAAO,kBAAkB,MAAM,UAAU;IAQxC;EACf,SAAS,eAAe,OAAO,OAAO,QAAQ,SAAS,EAAE,CAAC;EAC3D"}

View File

@@ -0,0 +1,13 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { DefaultRow } from "../table/defaults.js";
import { TableFooter } from "./index.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-footer/style-helper.d.ts
declare function useStyle<T extends DefaultRow>(props: TableFooter<T>): {
getCellClasses: (columns: TableColumnCtx<T>[], cellIndex: number) => string[];
getCellStyles: (column: TableColumnCtx<T>, cellIndex: number) => _$vue.CSSProperties | undefined;
columns: _$vue.ComputedRef<TableColumnCtx<DefaultRow>[]>;
};
//#endregion
export { useStyle as default };

View File

@@ -0,0 +1,36 @@
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ensurePosition, getFixedColumnOffset, getFixedColumnsClass } from "../util.mjs";
import useMapState from "./mapState-helper.mjs";
//#region ../../packages/components/table/src/table-footer/style-helper.ts
function useStyle(props) {
const { columns } = useMapState();
const ns = useNamespace("table");
const getCellClasses = (columns, cellIndex) => {
const column = columns[cellIndex];
const classes = [
ns.e("cell"),
column.id,
column.align,
column.labelClassName,
...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 = getFixedColumnOffset(cellIndex, column.fixed, props.store);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return fixedStyle;
};
return {
getCellClasses,
getCellStyles,
columns
};
}
//#endregion
export { useStyle as default };
//# sourceMappingURL=style-helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"style-helper.mjs","names":[],"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"],"mappings":";;;;AAYA,SAAS,SAA+B,OAAuB;CAC7D,MAAM,EAAE,YAAY,aAAa;CACjC,MAAM,KAAK,aAAa,QAAQ;CAEhC,MAAM,kBAAkB,SAA8B,cAAsB;EAC1E,MAAM,SAAS,QAAQ;EACvB,MAAM,UAAU;GACd,GAAG,EAAE,OAAO;GACZ,OAAO;GACP,OAAO;GACP,OAAO;GACP,GAAG,qBAAqB,GAAG,GAAG,EAAE,WAAW,OAAO,OAAO,MAAM,MAAM;GACtE;EACD,IAAI,OAAO,WACT,QAAQ,KAAK,OAAO,UAAU;EAEhC,IAAI,CAAC,OAAO,UACV,QAAQ,KAAK,GAAG,GAAG,OAAO,CAAC;EAE7B,OAAO;;CAGT,MAAM,iBAAiB,QAA2B,cAAsB;EACtE,MAAM,aAAa,qBACjB,WACA,OAAO,OACP,MAAM,MACP;EACD,eAAe,YAAY,OAAO;EAClC,eAAe,YAAY,QAAQ;EACnC,OAAO;;CAGT,OAAO;EACL;EACA;EACA;EACD"}

View File

@@ -0,0 +1,17 @@
import { EmitFn } from "../../../../utils/vue/typescript.js";
import { TableColumnCtx } from "../table-column/defaults.js";
import { TableHeaderProps } from "./index.js";
import { DefaultRow, TableSortOrder } from "../table/defaults.js";
//#region ../../packages/components/table/src/table-header/event-helper.d.ts
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;
};
//#endregion
export { useEvent as default };

View File

@@ -0,0 +1,158 @@
import { isClient } from "../../../../utils/browser.mjs";
import { isElement } from "../../../../utils/types.mjs";
import { addClass, hasClass, removeClass } from "../../../../utils/dom/style.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { isNull } from "lodash-unified";
import { getCurrentInstance, inject, ref } from "vue";
//#region ../../packages/components/table/src/table-header/event-helper.ts
function useEvent(props, emit) {
const instance = getCurrentInstance();
const parent = inject(TABLE_INJECTION_KEY);
const handleFilterClick = (event) => {
event.stopPropagation();
};
const handleHeaderClick = (event, column) => {
if (!column.filters && column.sortable) handleSortClick(event, column, false);
else if (column.filterable && !column.sortable) handleFilterClick(event);
parent?.emit("header-click", column, event);
};
const handleHeaderContextMenu = (event, column) => {
parent?.emit("header-contextmenu", column, event);
};
const draggingColumn = ref(null);
const dragging = ref(false);
const dragState = ref();
const handleMouseDown = (event, column) => {
if (!isClient) return;
if (column.children && column.children.length > 0) return;
/* istanbul ignore if */
if (draggingColumn.value && props.border && draggingColumn.value.id === column.id) {
dragging.value = true;
const table = parent;
emit("set-drag-visible", true);
const tableLeft = (table?.vnode.el)?.getBoundingClientRect().left;
const columnEl = instance?.vnode?.el?.querySelector(`th.${column.id}`);
const columnRect = columnEl.getBoundingClientRect();
const minLeft = columnRect.left - tableLeft + 30;
addClass(columnEl, "noclick");
dragState.value = {
startMouseLeft: event.clientX,
startLeft: columnRect.right - tableLeft,
startColumnLeft: columnRect.left - tableLeft,
tableLeft
};
const resizeProxy = table?.refs.resizeProxy;
resizeProxy.style.left = `${dragState.value.startLeft}px`;
document.onselectstart = function() {
return false;
};
document.ondragstart = function() {
return false;
};
const handleMouseMove = (event) => {
const deltaLeft = event.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;
column.width = column.realWidth = Number.parseInt(resizeProxy.style.left, 10) - startColumnLeft;
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", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
document.onselectstart = null;
document.ondragstart = null;
setTimeout(() => {
removeClass(columnEl, "noclick");
}, 0);
};
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
}
};
const handleMouseMove = (event, column) => {
if (!props.border || column.children && column.children.length > 0) return;
const el = event.target;
const target = isElement(el) ? el.closest("th") : null;
if (!target) return;
const isSortable = hasClass(target, "is-sortable");
if (isSortable) {
const cursor = dragging.value ? "col-resize" : "";
target.style.cursor = cursor;
const caret = target.querySelector(".caret-wrapper");
if (caret) caret.style.cursor = cursor;
}
if (!column.resizable || dragging.value) {
draggingColumn.value = null;
return;
}
const rect = target.getBoundingClientRect();
const isLastTh = target.parentNode?.lastElementChild === target;
const allowDrag = props.allowDragLastColumn || !isLastTh;
const isResizeHandleActive = rect.width > 12 && rect.right - event.clientX < 8 && allowDrag;
const cursor = isResizeHandleActive ? "col-resize" : "";
document.body.style.cursor = cursor;
draggingColumn.value = isResizeHandleActive ? column : null;
if (isSortable) target.style.cursor = cursor;
};
const handleMouseOut = () => {
if (!isClient || dragging.value) 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) => {
event.stopPropagation();
const order = column.order === givenOrder ? null : givenOrder || toggleOrder(column);
const target = event.target?.closest("th");
if (target) {
if (hasClass(target, "noclick")) {
removeClass(target, "noclick");
return;
}
}
if (!column.sortable) return;
const clickTarget = event.currentTarget;
if (["ascending", "descending"].some((str) => 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 && 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?.store.commit("changeSortCondition");
};
return {
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick
};
}
//#endregion
export { useEvent as default };
//# sourceMappingURL=event-helper.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,214 @@
import { Translator } from "../../../../hooks/use-locale/index.js";
import { CheckboxProps, CheckboxValueType } from "../../../checkbox/src/checkbox.js";
import _default$1 from "../../../checkbox/src/checkbox-button.vue.js";
import _default$2 from "../../../checkbox/src/checkbox-group.vue.js";
import { TableColumnCtx } from "../table-column/defaults.js";
import TableLayout from "../table-layout.js";
import { DefaultRow, Sort, TableSortOrder } from "../table/defaults.js";
import { Store } from "../store/index.js";
import * as _$vue from "vue";
import { ComponentInternalInstance, PropType, Ref } from "vue";
//#region ../../packages/components/table/src/table-header/index.d.ts
interface TableHeader extends ComponentInternalInstance {
state: {
onColumnsChange: (layout: TableLayout<any>) => void;
onScrollableChange: (layout: TableLayout<any>) => void;
};
filterPanels: Ref<DefaultRow>;
}
interface TableHeaderProps<T extends DefaultRow> {
fixed: string;
store: Store<T>;
border: boolean;
defaultSort: Sort;
allowDragLastColumn: boolean;
}
declare const _default: _$vue.DefineComponent<_$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;
};
}>, {
ns: {
namespace: _$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;
};
t: Translator;
filterPanels: Ref<{}, {}>;
onColumnsChange: (layout: TableLayout<DefaultRow>) => void;
onScrollableChange: (layout: TableLayout<DefaultRow>) => void;
columnRows: _$vue.ComputedRef<TableColumnCtx<any>[][]>;
getHeaderRowClass: (rowIndex: number) => string;
getHeaderRowStyle: (rowIndex: number) => any;
getHeaderCellClass: (rowIndex: number, columnIndex: number, row: any, column: TableColumnCtx<any>) => string;
getHeaderCellStyle: (rowIndex: number, columnIndex: number, row: any, column: TableColumnCtx<any>) => _$vue.CSSProperties;
handleHeaderClick: (event: Event, column: TableColumnCtx<any>) => void;
handleHeaderContextMenu: (event: Event, column: TableColumnCtx<any>) => void;
handleMouseDown: (event: MouseEvent, column: TableColumnCtx<any>) => void;
handleMouseMove: (event: MouseEvent, column: TableColumnCtx<any>) => void;
handleMouseOut: () => void;
handleSortClick: (event: Event, column: TableColumnCtx<any>, givenOrder?: TableSortOrder | boolean) => void;
handleFilterClick: (event: Event) => void;
isGroup: _$vue.ComputedRef<boolean>;
toggleAllSelection: (event: Event) => void;
saveIndexSelection: _$vue.Reactive<Map<any, any>>;
isTableLayoutAuto: boolean;
theadRef: Ref<any, any>;
updateFixedColumnStyle: () => void;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$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;
};
}>> & Readonly<{}>, {
fixed: string;
border: boolean;
defaultSort: Sort;
allowDragLastColumn: boolean;
}, {}, {
ElCheckbox: {
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, _$vue.PublicProps, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
onChange?: ((val: CheckboxValueType) => any) | undefined;
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, string, {
name: string;
label: string | boolean | number | object;
disabled: boolean;
modelValue: number | string | boolean;
id: string;
validateEvent: boolean;
value: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
$slots: {
default?: (props: {}) => any;
};
}) & _$vue.ObjectPlugin & {
setPropsDefaults: (defaults: {
readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
readonly indeterminate?: boolean | (() => boolean) | undefined;
readonly disabled?: boolean | (() => boolean) | undefined;
readonly checked?: boolean | (() => boolean) | undefined;
readonly name?: string | (() => string) | undefined;
readonly trueValue?: string | number | (() => string | number) | undefined;
readonly falseValue?: string | number | (() => string | number) | undefined;
readonly trueLabel?: string | number | (() => string | number) | undefined;
readonly falseLabel?: string | number | (() => string | number) | undefined;
readonly id?: string | (() => string) | undefined;
readonly border?: boolean | (() => boolean) | undefined;
readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
readonly tabindex?: string | number | (() => string | number) | undefined;
readonly validateEvent?: boolean | (() => boolean) | undefined;
readonly ariaLabel?: string | (() => string) | undefined;
readonly ariaControls?: string | (() => string) | undefined;
}) => void;
} & {
CheckboxButton: typeof _default$1;
CheckboxGroup: typeof _default$2;
};
}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
//#endregion
export { TableHeader, TableHeaderProps, _default as default };

View File

@@ -0,0 +1,176 @@
import { useLocale } from "../../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ElCheckbox } from "../../../checkbox/index.mjs";
import filter_panel_default from "../filter-panel.mjs";
import useLayoutObserver from "../layout-observer.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import useEvent from "./event-helper.mjs";
import useStyle from "./style.helper.mjs";
import useUtils from "./utils-helper.mjs";
import { defineComponent, getCurrentInstance, h, inject, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
//#region ../../packages/components/table/src/table-header/index.ts
var table_header_default = defineComponent({
name: "ElTableHeader",
components: { 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 = getCurrentInstance();
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const filterPanels = ref({});
const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
const isTableLayoutAuto = parent?.props.tableLayout === "auto";
const saveIndexSelection = reactive(/* @__PURE__ */ new Map());
const theadRef = 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) column.width = el.getBoundingClientRect().width || column.width;
});
saveIndexSelection.clear();
}
});
};
watch(saveIndexSelection, updateFixedColumnStyle);
onBeforeUnmount(() => {
if (delayId) {
clearTimeout(delayId);
delayId = void 0;
}
});
onMounted(async () => {
await nextTick();
await nextTick();
const { prop, order } = props.defaultSort;
parent?.store.commit("sort", {
prop,
order,
init: true
});
updateFixedColumnStyle();
});
const { handleHeaderClick, handleHeaderContextMenu, handleMouseDown, handleMouseMove, handleMouseOut, handleSortClick, handleFilterClick } = useEvent(props, emit);
const { getHeaderRowStyle, getHeaderRowClass, getHeaderCellStyle, getHeaderCellClass } = useStyle(props);
const { isGroup, toggleAllSelection, columnRows } = useUtils(props);
const { t } = useLocale();
instance.state = {
onColumnsChange,
onScrollableChange
};
instance.filterPanels = filterPanels;
return {
ns,
t,
filterPanels,
onColumnsChange,
onScrollableChange,
columnRows,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
handleHeaderClick,
handleHeaderContextMenu,
handleMouseDown,
handleMouseMove,
handleMouseOut,
handleSortClick,
handleFilterClick,
isGroup,
toggleAllSelection,
saveIndexSelection,
isTableLayoutAuto,
theadRef,
updateFixedColumnStyle
};
},
render() {
const { ns, t, isGroup, columnRows, getHeaderCellStyle, getHeaderCellClass, getHeaderRowClass, getHeaderRowStyle, handleHeaderClick, handleHeaderContextMenu, handleMouseDown, handleMouseMove, handleSortClick, handleMouseOut, store, $parent, saveIndexSelection, isTableLayoutAuto } = this;
let rowSpan = 1;
return h("thead", {
ref: "theadRef",
class: ns.is("group", isGroup)
}, columnRows.map((subColumns, rowIndex) => 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 h("th", {
class: _class,
colspan: column.colSpan,
key: `${column.id}-thead`,
rowspan: column.rowSpan,
scope: column.colSpan > 1 ? "colgroup" : "col",
ariaSort: column.sortable ? column.order : void 0,
style: getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
onClick: ($event) => {
if ($event.currentTarget?.classList.contains("noclick")) return;
handleHeaderClick($event, column);
},
onContextmenu: ($event) => handleHeaderContextMenu($event, column),
onMousedown: ($event) => handleMouseDown($event, column),
onMousemove: ($event) => handleMouseMove($event, column),
onMouseout: handleMouseOut
}, [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 && h("button", {
type: "button",
class: "caret-wrapper",
"aria-label": t("el.table.sortLabel", { column: column.label || "" }),
onClick: ($event) => handleSortClick($event, column)
}, [h("i", {
onClick: ($event) => handleSortClick($event, column, "ascending"),
class: "sort-caret ascending"
}), h("i", {
onClick: ($event) => handleSortClick($event, column, "descending"),
class: "sort-caret descending"
})]),
column.filterable && h(filter_panel_default, {
store,
placement: column.filterPlacement || "bottom-start",
appendTo: $parent?.appendFilterPanelTo,
column,
upDataColumn: (key, value) => {
column[key] = value;
}
}, { "filter-icon": () => column.renderFilterIcon ? column.renderFilterIcon({ filterOpened: column.filterOpened }) : null })
])]);
}))));
}
});
//#endregion
export { table_header_default as default };
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { TableHeaderProps } from "./index.js";
import { DefaultRow } from "../table/defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-header/style.helper.d.ts
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>) => _$vue.CSSProperties;
getHeaderCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => string;
};
//#endregion
export { useStyle as default };

View File

@@ -0,0 +1,68 @@
import { isFunction, isString } from "../../../../utils/types.mjs";
import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
import { ensurePosition, getFixedColumnOffset, getFixedColumnsClass } from "../util.mjs";
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { inject } from "vue";
//#region ../../packages/components/table/src/table-header/style.helper.ts
function useStyle(props) {
const parent = inject(TABLE_INJECTION_KEY);
const ns = useNamespace("table");
const getHeaderRowStyle = (rowIndex) => {
const headerRowStyle = parent?.props.headerRowStyle;
if (isFunction(headerRowStyle)) return headerRowStyle.call(null, { rowIndex });
return headerRowStyle;
};
const getHeaderRowClass = (rowIndex) => {
const classes = [];
const headerRowClassName = parent?.props.headerRowClassName;
if (isString(headerRowClassName)) classes.push(headerRowClassName);
else if (isFunction(headerRowClassName)) classes.push(headerRowClassName.call(null, { rowIndex }));
return classes.join(" ");
};
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
let headerCellStyles = parent?.props.headerCellStyle ?? {};
if (isFunction(headerCellStyles)) headerCellStyles = headerCellStyles.call(null, {
rowIndex,
columnIndex,
row,
column
});
const fixedStyle = getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
ensurePosition(fixedStyle, "left");
ensurePosition(fixedStyle, "right");
return Object.assign({}, headerCellStyles, fixedStyle);
};
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
const fixedClasses = 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?.props.headerCellClassName;
if (isString(headerCellClassName)) classes.push(headerCellClassName);
else if (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
};
}
//#endregion
export { useStyle as default };
//# sourceMappingURL=style.helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"style.helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-header/style.helper.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString } from '@element-plus/utils'\nimport {\n ensurePosition,\n getFixedColumnOffset,\n getFixedColumnsClass,\n} from '../util'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { DefaultRow } from '../table/defaults'\nimport type { TableHeaderProps } from '.'\n\nfunction useStyle<T extends DefaultRow>(props: TableHeaderProps<T>) {\n const parent = inject(TABLE_INJECTION_KEY)\n const ns = useNamespace('table')\n\n const getHeaderRowStyle = (rowIndex: number) => {\n const headerRowStyle = parent?.props.headerRowStyle\n if (isFunction(headerRowStyle)) {\n return headerRowStyle.call(null, { rowIndex })\n }\n return headerRowStyle\n }\n\n const getHeaderRowClass = (rowIndex: number): string => {\n const classes: string[] = []\n const headerRowClassName = parent?.props.headerRowClassName\n if (isString(headerRowClassName)) {\n classes.push(headerRowClassName)\n } else if (isFunction(headerRowClassName)) {\n classes.push(headerRowClassName.call(null, { rowIndex }))\n }\n\n return classes.join(' ')\n }\n\n const getHeaderCellStyle = (\n rowIndex: number,\n columnIndex: number,\n row: T,\n column: TableColumnCtx<T>\n ) => {\n let headerCellStyles = parent?.props.headerCellStyle ?? {}\n if (isFunction(headerCellStyles)) {\n headerCellStyles = headerCellStyles.call(null, {\n rowIndex,\n columnIndex,\n row,\n column,\n })\n }\n const fixedStyle = getFixedColumnOffset<T>(\n columnIndex,\n column.fixed,\n props.store,\n row as unknown as TableColumnCtx<T>[]\n )\n ensurePosition(fixedStyle, 'left')\n ensurePosition(fixedStyle, 'right')\n return Object.assign({}, headerCellStyles, fixedStyle)\n }\n\n const getHeaderCellClass = (\n rowIndex: number,\n columnIndex: number,\n row: T,\n column: TableColumnCtx<T>\n ) => {\n const fixedClasses = getFixedColumnsClass<T>(\n ns.b(),\n columnIndex,\n column.fixed,\n props.store,\n row as unknown as TableColumnCtx<T>[]\n )\n const classes = [\n column.id,\n column.order,\n column.headerAlign,\n column.className,\n column.labelClassName,\n ...fixedClasses,\n ]\n\n if (!column.children) {\n classes.push('is-leaf')\n }\n\n if (column.sortable) {\n classes.push('is-sortable')\n }\n\n const headerCellClassName = parent?.props.headerCellClassName\n if (isString(headerCellClassName)) {\n classes.push(headerCellClassName)\n } else if (isFunction(headerCellClassName)) {\n classes.push(\n headerCellClassName.call(null, {\n rowIndex,\n columnIndex,\n row,\n column,\n })\n )\n }\n\n classes.push(ns.e('cell'))\n\n return classes.filter((className) => Boolean(className)).join(' ')\n }\n\n return {\n getHeaderRowStyle,\n getHeaderRowClass,\n getHeaderCellStyle,\n getHeaderCellClass,\n }\n}\n\nexport default useStyle\n"],"mappings":";;;;;;AAcA,SAAS,SAA+B,OAA4B;CAClE,MAAM,SAAS,OAAO,oBAAoB;CAC1C,MAAM,KAAK,aAAa,QAAQ;CAEhC,MAAM,qBAAqB,aAAqB;EAC9C,MAAM,iBAAiB,QAAQ,MAAM;EACrC,IAAI,WAAW,eAAe,EAC5B,OAAO,eAAe,KAAK,MAAM,EAAE,UAAU,CAAC;EAEhD,OAAO;;CAGT,MAAM,qBAAqB,aAA6B;EACtD,MAAM,UAAoB,EAAE;EAC5B,MAAM,qBAAqB,QAAQ,MAAM;EACzC,IAAI,SAAS,mBAAmB,EAC9B,QAAQ,KAAK,mBAAmB;OAC3B,IAAI,WAAW,mBAAmB,EACvC,QAAQ,KAAK,mBAAmB,KAAK,MAAM,EAAE,UAAU,CAAC,CAAC;EAG3D,OAAO,QAAQ,KAAK,IAAI;;CAG1B,MAAM,sBACJ,UACA,aACA,KACA,WACG;EACH,IAAI,mBAAmB,QAAQ,MAAM,mBAAmB,EAAE;EAC1D,IAAI,WAAW,iBAAiB,EAC9B,mBAAmB,iBAAiB,KAAK,MAAM;GAC7C;GACA;GACA;GACA;GACD,CAAC;EAEJ,MAAM,aAAa,qBACjB,aACA,OAAO,OACP,MAAM,OACN,IACD;EACD,eAAe,YAAY,OAAO;EAClC,eAAe,YAAY,QAAQ;EACnC,OAAO,OAAO,OAAO,EAAE,EAAE,kBAAkB,WAAW;;CAGxD,MAAM,sBACJ,UACA,aACA,KACA,WACG;EACH,MAAM,eAAe,qBACnB,GAAG,GAAG,EACN,aACA,OAAO,OACP,MAAM,OACN,IACD;EACD,MAAM,UAAU;GACd,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,GAAG;GACJ;EAED,IAAI,CAAC,OAAO,UACV,QAAQ,KAAK,UAAU;EAGzB,IAAI,OAAO,UACT,QAAQ,KAAK,cAAc;EAG7B,MAAM,sBAAsB,QAAQ,MAAM;EAC1C,IAAI,SAAS,oBAAoB,EAC/B,QAAQ,KAAK,oBAAoB;OAC5B,IAAI,WAAW,oBAAoB,EACxC,QAAQ,KACN,oBAAoB,KAAK,MAAM;GAC7B;GACA;GACA;GACA;GACD,CAAC,CACH;EAGH,QAAQ,KAAK,GAAG,EAAE,OAAO,CAAC;EAE1B,OAAO,QAAQ,QAAQ,cAAc,QAAQ,UAAU,CAAC,CAAC,KAAK,IAAI;;CAGpE,OAAO;EACL;EACA;EACA;EACA;EACD"}

View File

@@ -0,0 +1,14 @@
import { TableColumnCtx } from "../table-column/defaults.js";
import { TableHeaderProps } from "./index.js";
import { DefaultRow } from "../table/defaults.js";
import * as _$vue from "vue";
//#region ../../packages/components/table/src/table-header/utils-helper.d.ts
declare const convertToRows: <T extends DefaultRow>(originColumns: TableColumnCtx<T>[]) => TableColumnCtx<T>[][];
declare function useUtils<T extends DefaultRow>(props: TableHeaderProps<T>): {
isGroup: _$vue.ComputedRef<boolean>;
toggleAllSelection: (event: Event) => void;
columnRows: _$vue.ComputedRef<TableColumnCtx<T>[][]>;
};
//#endregion
export { convertToRows, useUtils as default };

View File

@@ -0,0 +1,69 @@
import { TABLE_INJECTION_KEY } from "../tokens.mjs";
import { computed, inject } from "vue";
//#region ../../packages/components/table/src/table-header/utils-helper.ts
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([]);
getAllColumns(originColumns).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 = inject(TABLE_INJECTION_KEY);
const columnRows = computed(() => {
return convertToRows(props.store.states.originColumns.value);
});
const isGroup = computed(() => {
const result = columnRows.value.length > 1;
if (result && parent) parent.state.isGroup.value = true;
return result;
});
const toggleAllSelection = (event) => {
event.stopPropagation();
parent?.store.commit("toggleAllSelection");
};
return {
isGroup,
toggleAllSelection,
columnRows
};
}
//#endregion
export { convertToRows, useUtils as default };
//# sourceMappingURL=utils-helper.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"utils-helper.mjs","names":[],"sources":["../../../../../../../packages/components/table/src/table-header/utils-helper.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { TABLE_INJECTION_KEY } from '../tokens'\n\nimport type { DefaultRow } from '../table/defaults'\nimport type { TableColumnCtx } from '../table-column/defaults'\nimport type { TableHeaderProps } from '.'\n\nconst getAllColumns = <T extends DefaultRow>(\n columns: TableColumnCtx<T>[]\n): TableColumnCtx<T>[] => {\n const result: TableColumnCtx<T>[] = []\n columns.forEach((column) => {\n if (column.children) {\n result.push(column)\n // eslint-disable-next-line prefer-spread\n result.push.apply(result, getAllColumns(column.children))\n } else {\n result.push(column)\n }\n })\n return result\n}\n\nexport const convertToRows = <T extends DefaultRow>(\n originColumns: TableColumnCtx<T>[]\n): TableColumnCtx<T>[][] => {\n let maxLevel = 1\n const traverse = (column: TableColumnCtx<T>, parent?: TableColumnCtx<T>) => {\n if (parent) {\n column.level = parent.level + 1\n if (maxLevel < column.level) {\n maxLevel = column.level\n }\n }\n if (column.children) {\n let colSpan = 0\n column.children.forEach((subColumn) => {\n traverse(subColumn, column)\n colSpan += subColumn.colSpan\n })\n column.colSpan = colSpan\n } else {\n column.colSpan = 1\n }\n }\n\n originColumns.forEach((column) => {\n column.level = 1\n traverse(column, undefined)\n })\n\n const rows: TableColumnCtx<T>[][] = []\n for (let i = 0; i < maxLevel; i++) {\n rows.push([])\n }\n\n const allColumns: TableColumnCtx<T>[] = getAllColumns(originColumns)\n\n allColumns.forEach((column) => {\n if (!column.children) {\n column.rowSpan = maxLevel - column.level + 1\n } else {\n column.rowSpan = 1\n column.children.forEach((col) => (col.isSubColumn = true))\n }\n rows[column.level - 1].push(column)\n })\n\n return rows\n}\n\nfunction useUtils<T extends DefaultRow>(props: TableHeaderProps<T>) {\n const parent = inject(TABLE_INJECTION_KEY)\n const columnRows = computed(() => {\n return convertToRows(props.store.states.originColumns.value)\n })\n const isGroup = computed(() => {\n const result = columnRows.value.length > 1\n if (result && parent) {\n parent.state.isGroup.value = true\n }\n return result\n })\n const toggleAllSelection = (event: Event) => {\n event.stopPropagation()\n parent?.store.commit('toggleAllSelection')\n }\n return {\n isGroup,\n toggleAllSelection,\n columnRows,\n }\n}\n\nexport default useUtils\n"],"mappings":";;;AAOA,MAAM,iBACJ,YACwB;CACxB,MAAM,SAA8B,EAAE;CACtC,QAAQ,SAAS,WAAW;EAC1B,IAAI,OAAO,UAAU;GACnB,OAAO,KAAK,OAAO;GAEnB,OAAO,KAAK,MAAM,QAAQ,cAAc,OAAO,SAAS,CAAC;SAEzD,OAAO,KAAK,OAAO;GAErB;CACF,OAAO;;AAGT,MAAa,iBACX,kBAC0B;CAC1B,IAAI,WAAW;CACf,MAAM,YAAY,QAA2B,WAA+B;EAC1E,IAAI,QAAQ;GACV,OAAO,QAAQ,OAAO,QAAQ;GAC9B,IAAI,WAAW,OAAO,OACpB,WAAW,OAAO;;EAGtB,IAAI,OAAO,UAAU;GACnB,IAAI,UAAU;GACd,OAAO,SAAS,SAAS,cAAc;IACrC,SAAS,WAAW,OAAO;IAC3B,WAAW,UAAU;KACrB;GACF,OAAO,UAAU;SAEjB,OAAO,UAAU;;CAIrB,cAAc,SAAS,WAAW;EAChC,OAAO,QAAQ;EACf,SAAS,QAAQ,KAAA,EAAU;GAC3B;CAEF,MAAM,OAA8B,EAAE;CACtC,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,KAC5B,KAAK,KAAK,EAAE,CAAC;CAKf,cAFsD,cAE5C,CAAC,SAAS,WAAW;EAC7B,IAAI,CAAC,OAAO,UACV,OAAO,UAAU,WAAW,OAAO,QAAQ;OACtC;GACL,OAAO,UAAU;GACjB,OAAO,SAAS,SAAS,QAAS,IAAI,cAAc,KAAM;;EAE5D,KAAK,OAAO,QAAQ,GAAG,KAAK,OAAO;GACnC;CAEF,OAAO;;AAGT,SAAS,SAA+B,OAA4B;CAClE,MAAM,SAAS,OAAO,oBAAoB;CAC1C,MAAM,aAAa,eAAe;EAChC,OAAO,cAAc,MAAM,MAAM,OAAO,cAAc,MAAM;GAC5D;CACF,MAAM,UAAU,eAAe;EAC7B,MAAM,SAAS,WAAW,MAAM,SAAS;EACzC,IAAI,UAAU,QACZ,OAAO,MAAM,QAAQ,QAAQ;EAE/B,OAAO;GACP;CACF,MAAM,sBAAsB,UAAiB;EAC3C,MAAM,iBAAiB;EACvB,QAAQ,MAAM,OAAO,qBAAqB;;CAE5C,OAAO;EACL;EACA;EACA;EACD"}

View File

@@ -0,0 +1,40 @@
import { TableColumnCtx } from "./table-column/defaults.js";
import { TableHeader } from "./table-header/index.js";
import { DefaultRow, Table } from "./table/defaults.js";
import { Store } from "./store/index.js";
import { Ref } from "vue";
//#region ../../packages/components/table/src/table-layout.d.ts
declare class TableLayout<T extends DefaultRow> {
observers: TableHeader[];
table: Table<T>;
store: Store<T>;
columns: TableColumnCtx<T>[];
fit: boolean;
showHeader: boolean;
heightMap: Record<string, string | number | null>;
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;
}
//#endregion
export { TableLayout as default };

View File

@@ -0,0 +1,178 @@
import { isClient } from "../../../utils/browser.mjs";
import { isNumber, isString } from "../../../utils/types.mjs";
import { hasOwn } from "../../../utils/objects.mjs";
import { parseHeight } from "./util.mjs";
import { isNull } from "lodash-unified";
import { isRef, nextTick, ref } from "vue";
//#region ../../packages/components/table/src/table-layout.ts
var TableLayout = class {
constructor(options) {
this.observers = [];
this.table = null;
this.store = null;
this.columns = [];
this.fit = true;
this.showHeader = true;
this.heightMap = {};
this.height = ref(null);
this.scrollX = ref(false);
this.scrollY = ref(false);
this.bodyWidth = ref(null);
this.fixedWidth = ref(null);
this.rightFixedWidth = ref(null);
this.gutterWidth = 0;
for (const name in options) if (hasOwn(options, name)) if (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;
/**
* When the height is not initialized, it is null.
* After the table is initialized, when the height is not configured, the height is 0.
*/
if (isNull(height)) return false;
const scrollBarRef = this.table.refs.scrollBarRef;
if (this.table.vnode.el && 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 (!isClient) return;
const el = this.table.vnode.el;
value = parseHeight(value);
this.height.value = Number(value);
this.heightMap[prop] = value;
if (!el && (value || value === 0)) {
nextTick(() => {
if (this.heightMap[prop] === value) this.setHeight(value, prop);
});
return;
}
if (el && isNumber(value)) {
el.style[prop] = `${value}px`;
this.updateElsHeight();
} else if (el && isString(value)) {
el.style[prop] = value;
this.updateElsHeight();
}
}
setMaxHeight(value) {
this.setHeight(value, "max-height");
}
getFlattenColumns() {
const flattenColumns = [];
this.table.store.states.columns.value.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() {
if (!isClient) return;
const fit = this.fit;
const bodyWidth = this.table.vnode.el?.clientWidth;
let bodyMinWidth = 0;
const flattenColumns = this.getFlattenColumns();
const flexColumns = flattenColumns.filter((column) => !isNumber(column.width));
flattenColumns.forEach((column) => {
if (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 flexWidthPerPixel = totalFlexWidth / flexColumns.reduce((prev, column) => prev + Number(column.minWidth || 80), 0);
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) {
this.observers.forEach((observer) => {
switch (event) {
case "columns":
observer.state?.onColumnsChange(this);
break;
case "scrollable":
observer.state?.onScrollableChange(this);
break;
default: throw new Error(`Table Layout don't have event ${event}.`);
}
});
}
};
//#endregion
export { TableLayout as default };
//# sourceMappingURL=table-layout.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,216 @@
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
import table_vue_vue_type_script_lang_default from "./table.vue_vue_type_script_lang.mjs";
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, resolveDirective, toDisplayString, vShow, withCtx, withDirectives } from "vue";
//#region ../../packages/components/table/src/table.vue
const _hoisted_1 = ["data-prefix"];
const _hoisted_2 = {
ref: "hiddenColumns",
class: "hidden-columns"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hColgroup = resolveComponent("hColgroup");
const _component_table_header = resolveComponent("table-header");
const _component_table_body = resolveComponent("table-body");
const _component_table_footer = resolveComponent("table-footer");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
const _directive_mousewheel = resolveDirective("mousewheel");
return openBlock(), createElementBlock("div", {
ref: "tableWrapper",
class: 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: normalizeStyle(_ctx.style),
"data-prefix": _ctx.ns.namespace.value,
onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseLeave && _ctx.handleMouseLeave(...args))
}, [createElementVNode("div", {
ref: "tableInnerWrapper",
class: normalizeClass(_ctx.ns.e("inner-wrapper"))
}, [
createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")], 512),
_ctx.showHeader && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
key: 0,
ref: "headerWrapper",
class: normalizeClass(_ctx.ns.e("header-wrapper"))
}, [createElementVNode("table", {
ref: "tableHeader",
class: normalizeClass(_ctx.ns.e("header")),
style: normalizeStyle(_ctx.tableBodyStyles),
border: "0",
cellpadding: "0",
cellspacing: "0"
}, [createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]), 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]]) : createCommentVNode("v-if", true),
createElementVNode("div", {
ref: "bodyWrapper",
class: normalizeClass(_ctx.ns.e("body-wrapper"))
}, [createVNode(_component_el_scrollbar, {
ref: "scrollBarRef",
"view-style": _ctx.scrollbarViewStyle,
"wrap-style": _ctx.scrollbarStyle,
always: _ctx.scrollbarAlwaysOn,
tabindex: _ctx.scrollbarTabindex,
native: _ctx.nativeScrollbar,
onScroll: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("scroll", $event))
}, {
default: withCtx(() => [
createElementVNode("table", {
ref: "tableBody",
class: normalizeClass(_ctx.ns.e("body")),
cellspacing: "0",
cellpadding: "0",
border: "0",
style: normalizeStyle({
width: _ctx.bodyWidth,
tableLayout: _ctx.tableLayout
})
}, [
createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]),
_ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
key: 0,
ref: "tableHeaderRef",
class: 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"
])) : createCommentVNode("v-if", true),
createVNode(_component_table_body, {
context: _ctx.context,
highlight: _ctx.highlightCurrentRow,
"row-class-name": _ctx.rowClassName,
"tooltip-effect": _ctx.computedTooltipEffect,
"tooltip-options": _ctx.computedTooltipOptions,
"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" ? (openBlock(), createBlock(_component_table_footer, {
key: 1,
class: 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"
])) : createCommentVNode("v-if", true)
], 6),
_ctx.isEmpty ? (openBlock(), createElementBlock("div", {
key: 0,
ref: "emptyBlock",
style: normalizeStyle(_ctx.emptyBlockStyle),
class: normalizeClass(_ctx.ns.e("empty-block"))
}, [createElementVNode("span", { class: normalizeClass(_ctx.ns.e("empty-text")) }, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)])], 2)], 6)) : createCommentVNode("v-if", true),
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
key: 1,
ref: "appendWrapper",
class: normalizeClass(_ctx.ns.e("append-wrapper"))
}, [renderSlot(_ctx.$slots, "append")], 2)) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, [
"view-style",
"wrap-style",
"always",
"tabindex",
"native"
])], 2),
_ctx.showSummary && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
key: 1,
ref: "footerWrapper",
class: normalizeClass(_ctx.ns.e("footer-wrapper"))
}, [createElementVNode("table", {
class: normalizeClass(_ctx.ns.e("footer")),
cellspacing: "0",
cellpadding: "0",
border: "0",
style: normalizeStyle(_ctx.tableBodyStyles)
}, [createVNode(_component_hColgroup, {
columns: _ctx.store.states.columns.value,
"table-layout": _ctx.tableLayout
}, null, 8, ["columns", "table-layout"]), 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)), [[vShow, !_ctx.isEmpty], [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]]) : createCommentVNode("v-if", true),
_ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass(_ctx.ns.e("border-left-patch"))
}, null, 2)) : createCommentVNode("v-if", true)
], 2), withDirectives(createElementVNode("div", {
ref: "resizeProxy",
class: normalizeClass(_ctx.ns.e("column-resize-proxy"))
}, null, 2), [[vShow, _ctx.resizeProxyVisible]])], 46, _hoisted_1);
}
var table_default = /* @__PURE__ */ _plugin_vue_export_helper_default(table_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
//#endregion
export { table_default as default };
//# sourceMappingURL=table.mjs.map

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,195 @@
import { useLocale } from "../../../hooks/use-locale/index.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElScrollbar } from "../../scrollbar/index.mjs";
import { useGlobalConfig } from "../../config-provider/src/hooks/use-global-config.mjs";
import Mousewheel from "../../../directives/mousewheel/index.mjs";
import { createStore } from "./store/helper.mjs";
import TableLayout from "./table-layout.mjs";
import { TABLE_INJECTION_KEY } from "./tokens.mjs";
import { convertToRows } from "./table-header/utils-helper.mjs";
import table_header_default from "./table-header/index.mjs";
import table_body_default from "./table-body/index.mjs";
import table_footer_default from "./table-footer/index.mjs";
import useUtils from "./table/utils-helper.mjs";
import useStyle from "./table/style-helper.mjs";
import useKeyRender from "./table/key-render-helper.mjs";
import defaults_default from "./table/defaults.mjs";
import { hColgroup } from "./h-helper.mjs";
import { useScrollbar } from "./composables/use-scrollbar.mjs";
import { debounce } from "lodash-unified";
import { computed, defineComponent, getCurrentInstance, onBeforeUnmount, provide } from "vue";
//#region ../../packages/components/table/src/table.vue?vue&type=script&lang.ts
let tableIdSeed = 1;
var table_vue_vue_type_script_lang_default = defineComponent({
name: "ElTable",
directives: { Mousewheel },
components: {
TableHeader: table_header_default,
TableBody: table_body_default,
TableFooter: table_footer_default,
ElScrollbar,
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 } = useLocale();
const ns = useNamespace("table");
const globalConfig = useGlobalConfig("table");
const table = getCurrentInstance();
provide(TABLE_INJECTION_KEY, table);
const store = createStore(table, props);
table.store = store;
const layout = new TableLayout({
store: table.store,
table,
fit: props.fit,
showHeader: props.showHeader
});
table.layout = layout;
const isEmpty = computed(() => (store.states.data.value || []).length === 0);
/**
* open functions
*/
const { setCurrentRow, getSelectionRows, toggleRowSelection, clearSelection, clearFilter, toggleAllSelection, toggleRowExpansion, clearSort, sort, updateKeyChildren } = useUtils(store);
const { isHidden, renderExpanded, setDragVisible, isGroup, handleMouseLeave, handleHeaderFooterMousewheel, tableSize, emptyBlockStyle, resizeProxyVisible, bodyWidth, resizeState, doLayout, tableBodyStyles, tableLayout, scrollbarViewStyle, scrollbarStyle } = useStyle(props, layout, store, table);
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar();
const debouncedUpdateLayout = debounce(doLayout, 50);
const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
table.tableId = tableId;
table.state = {
isGroup,
resizeState,
doLayout,
debouncedUpdateLayout
};
const computedSumText = computed(() => props.sumText ?? t("el.table.sumText"));
const computedEmptyText = computed(() => {
return props.emptyText ?? t("el.table.emptyText");
});
const computedTooltipEffect = computed(() => props.tooltipEffect ?? globalConfig.value?.tooltipEffect);
const computedTooltipOptions = computed(() => props.tooltipOptions ?? globalConfig.value?.tooltipOptions);
const columns = computed(() => {
return convertToRows(store.states.originColumns.value)[0];
});
useKeyRender(table);
onBeforeUnmount(() => {
debouncedUpdateLayout.cancel();
});
return {
ns,
layout,
store,
columns,
handleHeaderFooterMousewheel,
handleMouseLeave,
tableId,
tableSize,
isHidden,
isEmpty,
renderExpanded,
resizeProxyVisible,
resizeState,
isGroup,
bodyWidth,
tableBodyStyles,
emptyBlockStyle,
debouncedUpdateLayout,
/**
* @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection
*/
setCurrentRow,
/**
* @description returns the currently selected rows
*/
getSelectionRows,
/**
* @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,
/**
* @description used in multiple selection Table, clear user selection
*/
clearSelection,
/**
* @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters
*/
clearFilter,
/**
* @description used in multiple selection Table, toggle select all and deselect all
*/
toggleAllSelection,
/**
* @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,
/**
* @description clear sorting, restore data to the original order
*/
clearSort,
/**
* @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,
/**
* @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order
*/
sort,
/**
* @description used in lazy Table, must set `rowKey`, update key children
*/
updateKeyChildren,
t,
setDragVisible,
context: table,
computedSumText,
computedEmptyText,
computedTooltipEffect,
computedTooltipOptions,
tableLayout,
scrollbarViewStyle,
scrollbarStyle,
scrollBarRef,
/**
* @description scrolls to a particular set of coordinates
*/
scrollTo,
/**
* @description set horizontal scroll position
*/
setScrollLeft,
/**
* @description set vertical scroll position
*/
setScrollTop,
/**
* @description whether to allow drag the last column
*/
allowDragLastColumn: props.allowDragLastColumn
};
}
});
//#endregion
export { table_vue_vue_type_script_lang_default as default };
//# sourceMappingURL=table.vue_vue_type_script_lang.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,409 @@
import { EpPropMergeType } from "../../../../utils/vue/props/types.js";
import { ComponentSize } from "../../../../constants/size.js";
import { Nullable } from "../../../../utils/typescript.js";
import { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from "../util.js";
import { TableColumnCtx } from "../table-column/defaults.js";
import TableLayout from "../table-layout.js";
import { Store } from "../store/index.js";
import { CSSProperties, ComponentInternalInstance, PropType, Ref, StyleValue, VNode } from "vue";
//#region ../../packages/components/table/src/table/defaults.d.ts
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;
rowExpandable?: (row: T, index: number) => 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?: StyleValue;
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;
}
interface TableConfigContext {
showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
tooltipEffect?: string;
tooltipOptions?: TableOverflowTooltipOptions;
tooltipFormatter?: TableOverflowTooltipFormatter<any>;
}
declare const _default: {
/**
* @description table data
*/
data: {
type: PropType<any[]>;
default: () => never[];
};
/**
* @description size of Table
*/
size: {
readonly type: PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
width: (StringConstructor | NumberConstructor)[];
/**
* @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: (StringConstructor | NumberConstructor)[];
/**
* @description table's max-height. The legal value is a number or the height in px
*/
maxHeight: (StringConstructor | NumberConstructor)[];
/**
* @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: (StringConstructor | NumberConstructor)[];
/**
* @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 enable expandable rows, works when the table has a column type="expand"
*/
rowExpandable: {
type: PropType<TableProps<any>["rowExpandable"]>;
};
/**
* @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<TableProps<any>["style"]>;
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: {
type: PropType<TableProps<any>["showOverflowTooltip"]>;
default: undefined;
};
/**
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
*/
tooltipFormatter: PropType<TableProps<any>["tooltipFormatter"]>;
appendFilterPanelTo: StringConstructor;
scrollbarTabindex: {
type: (StringConstructor | NumberConstructor)[];
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;
};
//#endregion
export { type CellCls, type CellStyle, type ColumnCls, type ColumnStyle, type DefaultRow, type Filter, type RenderExpanded, type RenderRowData, type Sort, type SummaryMethod, type Table, type TableColumnCtx, type TableConfigContext, type TableProps, type TableRefs, type TableSortOrder, type TableTooltipData, type TreeNode, type TreeProps, _default as default };

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