前端初始化
This commit is contained in:
“hsc”
+17
@@ -0,0 +1,17 @@
|
||||
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, TableEmits, TableProps, TableRefs, TableTooltipData, TreeNode } from "./src/table/defaults.js";
|
||||
import _default from "./src/table.vue.js";
|
||||
import _default$1 from "./src/table-column/index.vue.js";
|
||||
import { ComponentInstance } from "vue";
|
||||
import { ComponentExposed } from "vue-component-type-helpers";
|
||||
|
||||
//#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 = ComponentInstance<typeof _default> & ComponentExposed<typeof _default>;
|
||||
type TableColumnInstance = ComponentInstance<typeof _default$1> & ComponentExposed<typeof _default$1>;
|
||||
//#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, type TableEmits, TableInstance, type TableProps, type TableRefs, type TableTooltipData, type TreeNode };
|
||||
+10
@@ -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
|
||||
+1
@@ -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 { ComponentInstance } from 'vue'\nimport type { ComponentExposed } from 'vue-component-type-helpers'\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 = ComponentInstance<typeof Table> &\n ComponentExposed<typeof Table>\n\nexport type TableColumnInstance = ComponentInstance<typeof TableColumn> &\n ComponentExposed<typeof TableColumn>\n\nexport type {\n SummaryMethod,\n Table,\n TableEmits,\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":";;;;AAQA,MAAa,UAET,YAAYA,eAAO,EACrB,aAAA,qBACD,CAAC;AAEF,MAAa,gBACX,gBAAgBC,oBAAY"}
|
||||
+11
@@ -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 };
|
||||
+26
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import { TableColumnCtx } from "./table-column/defaults.js";
|
||||
import { Store } from "./store/index.js";
|
||||
import { DefaultRow, TreeNode } from "./table/defaults.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 };
|
||||
+156
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+113
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+564
@@ -0,0 +1,564 @@
|
||||
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
|
||||
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Arrayable, ClassValue } 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 { Store } from "./store/index.js";
|
||||
import { DefaultRow } from "./table/defaults.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<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType) => void;
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
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<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType) => void;
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
}, string, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
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<{
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType[]) => void;
|
||||
"update:modelValue": (val: CheckboxGroupValueType) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
type: "checkbox" | "button";
|
||||
disabled: boolean;
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
modelValue: CheckboxGroupValueType;
|
||||
validateEvent: boolean;
|
||||
tag: string;
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<CheckboxGroupProps> & Readonly<{
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
type: "checkbox" | "button";
|
||||
disabled: boolean;
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
modelValue: CheckboxGroupValueType;
|
||||
validateEvent: boolean;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxGroupProps> & Readonly<{
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType[]) => void;
|
||||
"update:modelValue": (val: CheckboxGroupValueType) => void;
|
||||
}, string, {
|
||||
type: "checkbox" | "button";
|
||||
disabled: boolean;
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
modelValue: CheckboxGroupValueType;
|
||||
validateEvent: boolean;
|
||||
tag: string;
|
||||
}, {}, 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, {
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
viewClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
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;
|
||||
}, {}, {}, {}, {
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
viewClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
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, {
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
viewClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
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;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...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;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
hide: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
effect: PopperEffect;
|
||||
popperClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
popperOptions: Partial<Options>;
|
||||
placement: Placement;
|
||||
strategy: "fixed" | "absolute";
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
arrowOffset: number;
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
visible: boolean | null;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
content: string;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[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;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...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;
|
||||
}, {}, {}, {}, {
|
||||
effect: PopperEffect;
|
||||
popperClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
popperOptions: Partial<Options>;
|
||||
placement: Placement;
|
||||
strategy: "fixed" | "absolute";
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
arrowOffset: number;
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
visible: boolean | null;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
content: string;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[number];
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
|
||||
onClose?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...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;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
hide: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
}, string, {
|
||||
effect: PopperEffect;
|
||||
popperClass: string | false | Record<string, any> | ClassValue[] | null;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
popperOptions: Partial<Options>;
|
||||
placement: Placement;
|
||||
strategy: "fixed" | "absolute";
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
offset: number;
|
||||
arrowOffset: number;
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
enterable: boolean;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
visible: boolean | null;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
content: string;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
role: typeof roleTypes[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 };
|
||||
Generated
Vendored
+181
@@ -0,0 +1,181 @@
|
||||
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 (props.column) {
|
||||
const arr = [...props.column.filteredValue ?? []];
|
||||
if (!isPropAbsent(value)) arr.splice(0, 1, value);
|
||||
else arr.splice(0, 1);
|
||||
props.upDataColumn?.("filteredValue", arr);
|
||||
}
|
||||
}
|
||||
});
|
||||
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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+17
@@ -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 };
|
||||
+26
@@ -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
|
||||
+1
@@ -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"}
|
||||
+11
@@ -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 };
|
||||
+57
@@ -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
|
||||
+1
@@ -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"}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { WatcherPropsData } from "./index.js";
|
||||
import { DefaultRow } from "../table/defaults.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 };
|
||||
+65
@@ -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
|
||||
+1
@@ -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"}
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import { WatcherPropsData } from "./index.js";
|
||||
import { DefaultRow } from "../table/defaults.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 };
|
||||
+58
@@ -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
|
||||
+1
@@ -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"}
|
||||
+557
@@ -0,0 +1,557 @@
|
||||
import { Translator } from "../../../../hooks/use-locale/index.js";
|
||||
import { TreeData } from "./tree.js";
|
||||
import { TableColumnCtx } from "../table-column/defaults.js";
|
||||
import { StoreFilter } from "./index.js";
|
||||
import { DefaultRow, Filter, Sort, Table, TableProps, TableSortOrder } from "../table/defaults.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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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<TableSortOrder | null, TableSortOrder | 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[];
|
||||
getHalfSelectionRows: () => 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<TableSortOrder | null, TableSortOrder | 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 };
|
||||
+65
@@ -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
|
||||
+1
@@ -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"}
|
||||
+1112
File diff suppressed because it is too large
Load Diff
+159
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+31
@@ -0,0 +1,31 @@
|
||||
import { WatcherPropsData } from "./index.js";
|
||||
import { DefaultRow, TreeNode } from "../table/defaults.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 };
|
||||
+193
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+92
@@ -0,0 +1,92 @@
|
||||
import { TreeData } from "./tree.js";
|
||||
import { TableColumnCtx } from "../table-column/defaults.js";
|
||||
import { StoreFilter } from "./index.js";
|
||||
import { DefaultRow, TableSortOrder } from "../table/defaults.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[];
|
||||
getHalfSelectionRows: () => 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<TableSortOrder | null, TableSortOrder | null>;
|
||||
hoverRow: Ref<T | null, T | null>;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { useWatcher as default };
|
||||
+552
@@ -0,0 +1,552 @@
|
||||
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);
|
||||
let halfSelection = [];
|
||||
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 = {};
|
||||
halfSelection = [];
|
||||
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 nextHalfSelection = [];
|
||||
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;
|
||||
nextHalfSelection.push(row);
|
||||
}
|
||||
_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;
|
||||
halfSelection = nextHalfSelection;
|
||||
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 = {};
|
||||
halfSelection = [];
|
||||
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 getHalfSelectionRows = () => {
|
||||
return halfSelection.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 = {};
|
||||
halfSelection = [];
|
||||
} 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,
|
||||
getHalfSelectionRows,
|
||||
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
|
||||
+1
File diff suppressed because one or more lines are too long
+41
@@ -0,0 +1,41 @@
|
||||
import { TableOverflowTooltipOptions } from "../util.js";
|
||||
import { Store } from "../store/index.js";
|
||||
import { ColumnCls, ColumnStyle, DefaultRow, Table } from "../table/defaults.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 };
|
||||
+25
@@ -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
|
||||
+1
@@ -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"}
|
||||
+24
@@ -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: MouseEvent, row: T) => void;
|
||||
handleClick: (event: PointerEvent, row: T) => void;
|
||||
handleContextMenu: (event: PointerEvent, 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 };
|
||||
+119
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+91
@@ -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;
|
||||
stripe: boolean;
|
||||
context: Table<any>;
|
||||
highlight: boolean;
|
||||
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
+80
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+22
@@ -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 };
|
||||
+178
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+19
@@ -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 };
|
||||
+104
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -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
|
||||
+1
@@ -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":""}
|
||||
+38
@@ -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 };
|
||||
Generated
Vendored
+29
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+350
@@ -0,0 +1,350 @@
|
||||
import { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from "../util.js";
|
||||
import { Store } from "../store/index.js";
|
||||
import { DefaultRow, Table, TableSortOrder } from "../table/defaults.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>>>;
|
||||
}
|
||||
interface TableColumnProps<T extends DefaultRow = DefaultRow> {
|
||||
/**
|
||||
* @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?: string;
|
||||
/**
|
||||
* @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?: string | number;
|
||||
/**
|
||||
* @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?: string | number;
|
||||
/**
|
||||
* @description render function for table header of this column
|
||||
*/
|
||||
renderHeader?: TableColumnCtx<T>['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?: boolean | string;
|
||||
/**
|
||||
* @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
|
||||
*/
|
||||
sortMethod?: TableColumnCtx<T>['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?: TableColumnCtx<T>['sortBy'];
|
||||
/**
|
||||
* @description whether column width can be resized, works when `border` of `el-table` is `true`
|
||||
*/
|
||||
resizable?: 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?: 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?: TableColumnCtx<T>['showOverflowTooltip'];
|
||||
/**
|
||||
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
|
||||
*/
|
||||
tooltipFormatter?: TableColumnCtx<T>['tooltipFormatter'];
|
||||
/**
|
||||
* @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?: TableColumnCtx<T>['formatter'];
|
||||
/**
|
||||
* @description function that determines if a certain row can be selected, works when `type` is 'selection'
|
||||
*/
|
||||
selectable?: TableColumnCtx<T>['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?: 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?: TableColumnCtx<T>['filterMethod'];
|
||||
/**
|
||||
* @description filter value for selected data, might be useful when table header is rendered with `render-header`
|
||||
*/
|
||||
filteredValue?: TableColumnCtx<T>['filteredValue'];
|
||||
/**
|
||||
* @description an array of data filtering options. For each element in this array, `text` and `value` are required
|
||||
*/
|
||||
filters?: TableColumnCtx<T>['filters'];
|
||||
/**
|
||||
* @description placement for the filter dropdown
|
||||
*/
|
||||
filterPlacement?: string;
|
||||
/**
|
||||
* @description whether data filtering supports multiple options
|
||||
*/
|
||||
filterMultiple?: boolean;
|
||||
/**
|
||||
* @description className for the filter dropdown
|
||||
*/
|
||||
filterClassName?: string;
|
||||
/**
|
||||
* @description customize indices for each row, works on columns with `type=index`
|
||||
*/
|
||||
index?: TableColumnCtx<T>['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?: TableColumnCtx<T>['sortOrders'];
|
||||
}
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `TableColumnProps` instead.
|
||||
*/
|
||||
declare const tableColumnProps: {
|
||||
/**
|
||||
* @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: (StringConstructor | BooleanConstructor)[];
|
||||
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: (StringConstructor | BooleanConstructor)[];
|
||||
/**
|
||||
* @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 TableColumnProps, type ValueOf, tableColumnProps as default, tableColumnProps };
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
//#region ../../packages/components/table/src/table-column/defaults.ts
|
||||
/**
|
||||
* @deprecated Removed after 3.0.0, Use `TableColumnProps` instead.
|
||||
*/
|
||||
const tableColumnProps = {
|
||||
/**
|
||||
* @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 { tableColumnProps as default, tableColumnProps };
|
||||
|
||||
//# sourceMappingURL=defaults.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
||||
import _default from "./index.vue.js";
|
||||
export { _default as default };
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import table_column_default$1 from "./index2.mjs";
|
||||
//#region ../../packages/components/table/src/table-column/index.ts
|
||||
var table_column_default = table_column_default$1;
|
||||
//#endregion
|
||||
export { table_column_default as default };
|
||||
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","names":["ElTableColumn"],"sources":["../../../../../../../packages/components/table/src/table-column/index.ts"],"sourcesContent":["import ElTableColumn from './index.vue'\n\nexport default ElTableColumn\n"],"mappings":";;AAEA,IAAA,uBAAeA"}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import { TableColumnCtx, TableColumnProps } from "./defaults.js";
|
||||
import { DefaultRow } from "../table/defaults.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/table/src/table-column/index.vue.d.ts
|
||||
declare const __VLS_export: <T extends DefaultRow = DefaultRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
||||
props: _$vue.PublicProps & __VLS_PrettifyLocal<TableColumnProps<T>> & (typeof globalThis extends {
|
||||
__VLS_PROPS_FALLBACK: infer P;
|
||||
} ? P : {});
|
||||
expose: (exposed: {}) => void;
|
||||
attrs: any;
|
||||
slots: {
|
||||
default?: (props: {
|
||||
row: T;
|
||||
column: TableColumnCtx<T>;
|
||||
$index: number;
|
||||
}) => any;
|
||||
header?: (props: {
|
||||
column: TableColumnCtx<T>;
|
||||
$index: number;
|
||||
}) => any;
|
||||
expand?: (props: {
|
||||
expanded: boolean;
|
||||
expandable: boolean;
|
||||
}) => any;
|
||||
'filter-icon'?: (props: {
|
||||
filterOpened: boolean;
|
||||
}) => any;
|
||||
};
|
||||
emit: {};
|
||||
}>) => _$vue.VNode & {
|
||||
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
||||
};
|
||||
declare const _default: typeof __VLS_export;
|
||||
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
|
||||
//#endregion
|
||||
export { _default as default };
|
||||
Generated
Vendored
+124
@@ -0,0 +1,124 @@
|
||||
import { isArray, isString, isUndefined } from "../../../../utils/types.mjs";
|
||||
import { useGlobalConfig } from "../../../config-provider/src/hooks/use-global-config.mjs";
|
||||
import { compose, createTableColumnId, mergeOptions } from "../util.mjs";
|
||||
import tableColumnProps from "./defaults.mjs";
|
||||
import { cellStarts } from "../config.mjs";
|
||||
import useWatcher from "./watcher-helper.mjs";
|
||||
import useRender from "./render-helper.mjs";
|
||||
import { Fragment, computed, createBlock, defineComponent, getCurrentInstance, h, onBeforeMount, onBeforeUnmount, onMounted, openBlock, ref, useSlots } from "vue";
|
||||
//#region ../../packages/components/table/src/table-column/index.vue?vue&type=script&setup=true&lang.ts
|
||||
var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
||||
name: "ElTableColumn",
|
||||
__name: "index",
|
||||
props: tableColumnProps,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const slots = useSlots();
|
||||
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 = createTableColumnId("tableId" in parent ? parent.tableId : parent.columnId);
|
||||
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;
|
||||
const TableColumnRenderer = () => {
|
||||
try {
|
||||
const renderDefault = 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", []);
|
||||
}
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createBlock(TableColumnRenderer);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
export { index_vue_vue_type_script_setup_true_lang_default as default };
|
||||
|
||||
//# sourceMappingURL=index.vue_vue_type_script_setup_true_lang.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import index_vue_vue_type_script_setup_true_lang_default from "./index.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/table/src/table-column/index.vue
|
||||
var table_column_default = index_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { table_column_default as default };
|
||||
|
||||
//# sourceMappingURL=index2.mjs.map
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+21
@@ -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 };
|
||||
+144
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+11
@@ -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 };
|
||||
Generated
Vendored
+87
@@ -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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+85
@@ -0,0 +1,85 @@
|
||||
import { TableColumnCtx } from "../table-column/defaults.js";
|
||||
import { Store } from "../store/index.js";
|
||||
import TableLayout from "../table-layout.js";
|
||||
import { DefaultRow, Sort, SummaryMethod } from "../table/defaults.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 };
|
||||
+88
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+15
@@ -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 };
|
||||
Generated
Vendored
+28
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+13
@@ -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 };
|
||||
+36
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+17
@@ -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: PointerEvent, column: TableColumnCtx<T>) => void;
|
||||
handleHeaderContextMenu: (event: PointerEvent, 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 };
|
||||
+158
@@ -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 ?? null;
|
||||
}
|
||||
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
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+214
@@ -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 { Store } from "../store/index.js";
|
||||
import TableLayout from "../table-layout.js";
|
||||
import { DefaultRow, Sort, TableSortOrder } from "../table/defaults.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: PointerEvent, column: TableColumnCtx<any>) => void;
|
||||
handleHeaderContextMenu: (event: PointerEvent, 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<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType) => void;
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
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<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
change: (val: CheckboxValueType) => void;
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
}, string, {
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
disabled: boolean;
|
||||
name: string;
|
||||
id: string;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
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 };
|
||||
+182
@@ -0,0 +1,182 @@
|
||||
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 = () => {
|
||||
if (delayId) {
|
||||
clearTimeout(delayId);
|
||||
delayId = void 0;
|
||||
}
|
||||
delayId = setTimeout(() => {
|
||||
delayId = void 0;
|
||||
const thead = theadRef.value;
|
||||
if (thead && saveIndexSelection.size > 0) {
|
||||
saveIndexSelection.forEach((column, key) => {
|
||||
const el = thead.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
|
||||
+1
File diff suppressed because one or more lines are too long
+14
@@ -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 };
|
||||
+68
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+14
@@ -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 };
|
||||
+69
@@ -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
|
||||
Generated
Vendored
+1
@@ -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"}
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
import { TableColumnCtx } from "./table-column/defaults.js";
|
||||
import { Store } from "./store/index.js";
|
||||
import { TableHeader } from "./table-header/index.js";
|
||||
import { DefaultRow, Table } from "./table/defaults.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 };
|
||||
+178
@@ -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
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
import table_vue_vue_type_script_setup_true_lang_default from "./table.vue_vue_type_script_setup_true_lang.mjs";
|
||||
//#region ../../packages/components/table/src/table.vue
|
||||
var table_default = table_vue_vue_type_script_setup_true_lang_default;
|
||||
//#endregion
|
||||
export { table_default as default };
|
||||
|
||||
//# sourceMappingURL=table.mjs.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user