前端VUE重构
This commit is contained in:
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+28
@@ -0,0 +1,28 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/composables/use-scrollbar.ts
|
||||
const useScrollbar = () => {
|
||||
const scrollBarRef = (0, vue.ref)();
|
||||
const scrollTo = (options, yCoord) => {
|
||||
const scrollbar = scrollBarRef.value;
|
||||
if (scrollbar) scrollbar.scrollTo(options, yCoord);
|
||||
};
|
||||
const setScrollPosition = (position, offset) => {
|
||||
const scrollbar = scrollBarRef.value;
|
||||
if (scrollbar && require_types.isNumber(offset) && ["Top", "Left"].includes(position)) scrollbar[`setScroll${position}`](offset);
|
||||
};
|
||||
const setScrollTop = (top) => setScrollPosition("Top", top);
|
||||
const setScrollLeft = (left) => setScrollPosition("Left", left);
|
||||
return {
|
||||
scrollBarRef,
|
||||
scrollTo,
|
||||
setScrollTop,
|
||||
setScrollLeft
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useScrollbar = useScrollbar;
|
||||
|
||||
//# sourceMappingURL=use-scrollbar.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-scrollbar.js","names":["isNumber"],"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,gBAAA,GAAA,IAAA,MAAoB;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,aAAaA,cAAAA,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 };
|
||||
+163
@@ -0,0 +1,163 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../utils/types.js");
|
||||
const require_objects = require("../../../utils/objects.js");
|
||||
const require_index = require("../../icon/index.js");
|
||||
const require_index$1 = require("../../checkbox/index.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#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 (0, vue.h)(require_index$1.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 (0, vue.h)(require_index$1.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 (require_types.isNumber(index)) i = $index + index;
|
||||
else if ((0, _vue_shared.isFunction)(index)) i = index($index);
|
||||
return (0, vue.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 (0, vue.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 [(0, vue.h)(require_index.ElIcon, null, { default: () => {
|
||||
return [(0, vue.h)(_element_plus_icons_vue.ArrowRight)];
|
||||
} })];
|
||||
} });
|
||||
},
|
||||
sortable: false,
|
||||
resizable: false
|
||||
}
|
||||
};
|
||||
function defaultRenderCell({ row, column, $index }) {
|
||||
const property = column.property;
|
||||
const value = property && require_objects.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 [(0, vue.h)("span", { class: ns.e("placeholder") })];
|
||||
return null;
|
||||
}
|
||||
const ele = [];
|
||||
const callback = function(e) {
|
||||
e.stopPropagation();
|
||||
if (treeNode.loading) return;
|
||||
store.loadOrToggle(row);
|
||||
};
|
||||
if (treeNode.indent) ele.push((0, vue.h)("span", {
|
||||
class: ns.e("indent"),
|
||||
style: { "padding-left": `${treeNode.indent}px` }
|
||||
}));
|
||||
if (require_types.isBoolean(treeNode.expanded) && !treeNode.noLazyChildren) {
|
||||
const expandClasses = [ns.e("expand-icon"), treeNode.expanded ? ns.em("expand-icon", "expanded") : ""];
|
||||
let icon = _element_plus_icons_vue.ArrowRight;
|
||||
if (treeNode.loading) icon = _element_plus_icons_vue.Loading;
|
||||
ele.push((0, vue.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 [(0, vue.h)(require_index.ElIcon, { class: ns.is("loading", treeNode.loading) }, { default: () => [(0, vue.h)(icon)] })];
|
||||
} }));
|
||||
} else ele.push((0, vue.h)("span", { class: ns.e("placeholder") }));
|
||||
return ele;
|
||||
}
|
||||
//#endregion
|
||||
exports.cellForced = cellForced;
|
||||
exports.cellStarts = cellStarts;
|
||||
exports.defaultRenderCell = defaultRenderCell;
|
||||
exports.getDefaultClassName = getDefaultClassName;
|
||||
exports.treeCellPrefix = treeCellPrefix;
|
||||
|
||||
//# sourceMappingURL=config.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+118
@@ -0,0 +1,118 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require__plugin_vue_export_helper = require("../../../_virtual/_plugin-vue_export-helper.js");
|
||||
const require_filter_panel_vue_vue_type_script_lang = require("./filter-panel.vue_vue_type_script_lang.js");
|
||||
let vue = require("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 = (0, vue.resolveComponent)("el-checkbox");
|
||||
const _component_el_checkbox_group = (0, vue.resolveComponent)("el-checkbox-group");
|
||||
const _component_el_scrollbar = (0, vue.resolveComponent)("el-scrollbar");
|
||||
const _component_arrow_up = (0, vue.resolveComponent)("arrow-up");
|
||||
const _component_arrow_down = (0, vue.resolveComponent)("arrow-down");
|
||||
const _component_el_icon = (0, vue.resolveComponent)("el-icon");
|
||||
const _component_el_tooltip = (0, vue.resolveComponent)("el-tooltip");
|
||||
return (0, vue.openBlock)(), (0, vue.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: (0, vue.withCtx)(() => [_ctx.multiple ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
ref: "rootRef",
|
||||
tabindex: "-1",
|
||||
class: (0, vue.normalizeClass)(_ctx.ns.e("multiple"))
|
||||
}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.ns.e("content")) }, [(0, vue.createVNode)(_component_el_scrollbar, { "wrap-class": _ctx.ns.e("wrap") }, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_el_checkbox_group, {
|
||||
modelValue: _ctx.filteredValue,
|
||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.filteredValue = $event),
|
||||
class: (0, vue.normalizeClass)(_ctx.ns.e("checkbox-group"))
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.filters, (filter) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createBlock)(_component_el_checkbox, {
|
||||
key: filter.value,
|
||||
value: filter.value
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(filter.text), 1)]),
|
||||
_: 2
|
||||
}, 1032, ["value"]);
|
||||
}), 128))]),
|
||||
_: 1
|
||||
}, 8, ["modelValue", "class"])]),
|
||||
_: 1
|
||||
}, 8, ["wrap-class"])], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(_ctx.ns.e("bottom")) }, [(0, vue.createElementVNode)("button", {
|
||||
class: (0, vue.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))
|
||||
}, (0, vue.toDisplayString)(_ctx.t("el.table.confirmFilter")), 11, _hoisted_1), (0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
|
||||
}, (0, vue.toDisplayString)(_ctx.t("el.table.resetFilter")), 1)], 2)], 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", {
|
||||
key: 1,
|
||||
ref: "rootRef",
|
||||
tabindex: "-1",
|
||||
role: "radiogroup",
|
||||
class: (0, vue.normalizeClass)(_ctx.ns.e("list")),
|
||||
onKeydown: _cache[4] || (_cache[4] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
|
||||
}, [(0, vue.createElementVNode)("li", {
|
||||
role: "radio",
|
||||
class: (0, vue.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))
|
||||
}, (0, vue.toDisplayString)(_ctx.t("el.table.clearFilter")), 11, _hoisted_2), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.filters, (filter, idx) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
|
||||
key: filter.value,
|
||||
role: "radio",
|
||||
class: (0, vue.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)
|
||||
}, (0, vue.toDisplayString)(filter.text), 11, _hoisted_3);
|
||||
}), 128))], 34))]),
|
||||
default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
|
||||
type: "button",
|
||||
class: (0, vue.normalizeClass)(`${_ctx.ns.namespace.value}-table__column-filter-trigger`),
|
||||
"aria-label": _ctx.t("el.table.filterLabel", { column: _ctx.column?.label || "" })
|
||||
}, [(0, vue.createVNode)(_component_el_icon, null, {
|
||||
default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "filter-icon", {}, () => [_ctx.column?.filterOpened ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_arrow_up, { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_arrow_down, { key: 1 }))])]),
|
||||
_: 3
|
||||
})], 10, _hoisted_4)]),
|
||||
_: 3
|
||||
}, 8, [
|
||||
"placement",
|
||||
"popper-class",
|
||||
"append-to",
|
||||
"onShow",
|
||||
"onHide"
|
||||
]);
|
||||
}
|
||||
var filter_panel_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_filter_panel_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
|
||||
//#endregion
|
||||
exports.default = filter_panel_default;
|
||||
|
||||
//# sourceMappingURL=filter-panel.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+561
@@ -0,0 +1,561 @@
|
||||
import { SFCWithInstall } from "../../../utils/vue/typescript.js";
|
||||
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
|
||||
import { Arrayable } from "../../../utils/typescript.js";
|
||||
import { Translator } from "../../../hooks/use-locale/index.js";
|
||||
import { PopperEffect, PopperInstance, roleTypes } from "../../popper/src/popper.js";
|
||||
import { Options, Placement } from "../../popper/index.js";
|
||||
import { TooltipContentInstance } from "../../tooltip/src/content.js";
|
||||
import { TooltipTriggerType } from "../../tooltip/src/trigger.js";
|
||||
import { TooltipInstance, UseTooltipProps } from "../../tooltip/src/tooltip.js";
|
||||
import { CheckboxProps, CheckboxValueType } from "../../checkbox/src/checkbox.js";
|
||||
import _default$1 from "../../checkbox/src/checkbox-button.vue.js";
|
||||
import { CheckboxGroupProps, CheckboxGroupValueType } from "../../checkbox/src/checkbox-group.js";
|
||||
import _default$2 from "../../checkbox/src/checkbox-group.vue.js";
|
||||
import { Filters, TableColumnCtx } from "./table-column/defaults.js";
|
||||
import { 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<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
change: (val: CheckboxValueType) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<CheckboxProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
change: (val: CheckboxValueType) => void;
|
||||
}, string, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
};
|
||||
}) & _$vue.ObjectPlugin & {
|
||||
setPropsDefaults: (defaults: {
|
||||
readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
|
||||
readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
|
||||
readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
|
||||
readonly indeterminate?: boolean | (() => boolean) | undefined;
|
||||
readonly disabled?: boolean | (() => boolean) | undefined;
|
||||
readonly checked?: boolean | (() => boolean) | undefined;
|
||||
readonly name?: string | (() => string) | undefined;
|
||||
readonly trueValue?: string | number | (() => string | number) | undefined;
|
||||
readonly falseValue?: string | number | (() => string | number) | undefined;
|
||||
readonly trueLabel?: string | number | (() => string | number) | undefined;
|
||||
readonly falseLabel?: string | number | (() => string | number) | undefined;
|
||||
readonly id?: string | (() => string) | undefined;
|
||||
readonly border?: boolean | (() => boolean) | undefined;
|
||||
readonly size?: "" | "default" | "large" | "small" | (() => "" | "default" | "large" | "small") | undefined;
|
||||
readonly tabindex?: string | number | (() => string | number) | undefined;
|
||||
readonly validateEvent?: boolean | (() => boolean) | undefined;
|
||||
readonly ariaLabel?: string | (() => string) | undefined;
|
||||
readonly ariaControls?: string | (() => string) | undefined;
|
||||
}) => void;
|
||||
} & {
|
||||
CheckboxButton: typeof _default$1;
|
||||
CheckboxGroup: typeof _default$2;
|
||||
};
|
||||
ElCheckboxGroup: SFCWithInstall<{
|
||||
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<CheckboxGroupProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxGroupValueType) => void;
|
||||
change: (val: CheckboxValueType[]) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
type: "checkbox" | "button";
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
disabled: boolean;
|
||||
modelValue: CheckboxGroupValueType;
|
||||
validateEvent: boolean;
|
||||
tag: string;
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<CheckboxGroupProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
type: "checkbox" | "button";
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
disabled: boolean;
|
||||
modelValue: CheckboxGroupValueType;
|
||||
validateEvent: boolean;
|
||||
tag: string;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxGroupProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxGroupValueType) => void;
|
||||
change: (val: CheckboxValueType[]) => void;
|
||||
}, string, {
|
||||
type: "checkbox" | "button";
|
||||
props: {
|
||||
value?: string;
|
||||
label?: string;
|
||||
disabled?: string;
|
||||
};
|
||||
disabled: boolean;
|
||||
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, {
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | string[];
|
||||
viewClass: string | string[];
|
||||
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
minSize: number;
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<ScrollbarProps> & Readonly<{
|
||||
onScroll?: ((args_0: {
|
||||
scrollTop: number;
|
||||
scrollLeft: number;
|
||||
}) => any) | undefined;
|
||||
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
|
||||
}>, {
|
||||
wrapRef: _$vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
|
||||
update: () => void;
|
||||
scrollTo: {
|
||||
(xCord: number, yCord?: number): void;
|
||||
(options: ScrollToOptions): void;
|
||||
};
|
||||
setScrollTop: (value: number) => void;
|
||||
setScrollLeft: (value: number) => void;
|
||||
handleScroll: () => void;
|
||||
}, {}, {}, {}, {
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | string[];
|
||||
viewClass: string | string[];
|
||||
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
minSize: number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<ScrollbarProps> & Readonly<{
|
||||
onScroll?: ((args_0: {
|
||||
scrollTop: number;
|
||||
scrollLeft: number;
|
||||
}) => any) | undefined;
|
||||
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
|
||||
}>, {
|
||||
wrapRef: _$vue.Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
|
||||
update: () => void;
|
||||
scrollTo: {
|
||||
(xCord: number, yCord?: number): void;
|
||||
(options: ScrollToOptions): void;
|
||||
};
|
||||
setScrollTop: (value: number) => void;
|
||||
setScrollLeft: (value: number) => void;
|
||||
handleScroll: () => void;
|
||||
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
scroll: (args_0: {
|
||||
scrollTop: number;
|
||||
scrollLeft: number;
|
||||
}) => void;
|
||||
"end-reached": (direction: ScrollbarDirection) => void;
|
||||
}, string, {
|
||||
height: number | string;
|
||||
maxHeight: number | string;
|
||||
tabindex: number | string;
|
||||
tag: keyof HTMLElementTagNameMap | (string & {});
|
||||
distance: number;
|
||||
wrapStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
wrapClass: string | string[];
|
||||
viewClass: string | string[];
|
||||
viewStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
minSize: number;
|
||||
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
};
|
||||
})>;
|
||||
ElTooltip: SFCWithInstall<{
|
||||
new (...args: any[]): _$vue.CreateComponentPublicInstanceWithMixins<Readonly<UseTooltipProps> & Readonly<{
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onClose?: ((...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, {
|
||||
hide: (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
close: (...args: any[]) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
role: typeof roleTypes[number];
|
||||
visible: boolean | null;
|
||||
content: string;
|
||||
offset: number;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
placement: Placement;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "fixed" | "absolute";
|
||||
arrowOffset: number;
|
||||
effect: PopperEffect;
|
||||
enterable: boolean;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<UseTooltipProps> & Readonly<{
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onClose?: ((...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;
|
||||
}, {}, {}, {}, {
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
role: typeof roleTypes[number];
|
||||
visible: boolean | null;
|
||||
content: string;
|
||||
offset: number;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
placement: Placement;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "fixed" | "absolute";
|
||||
arrowOffset: number;
|
||||
effect: PopperEffect;
|
||||
enterable: boolean;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
trigger: Arrayable<TooltipTriggerType>;
|
||||
triggerKeys: string[];
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<UseTooltipProps> & Readonly<{
|
||||
onHide?: ((...args: any[]) => any) | undefined;
|
||||
onShow?: ((...args: any[]) => any) | undefined;
|
||||
onOpen?: ((...args: any[]) => any) | undefined;
|
||||
"onUpdate:visible"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-show"?: ((...args: any[]) => any) | undefined;
|
||||
"onBefore-hide"?: ((...args: any[]) => any) | undefined;
|
||||
onClose?: ((...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, {
|
||||
hide: (...args: any[]) => void;
|
||||
show: (...args: any[]) => void;
|
||||
open: (...args: any[]) => void;
|
||||
"update:visible": (...args: any[]) => void;
|
||||
"before-show": (...args: any[]) => void;
|
||||
"before-hide": (...args: any[]) => void;
|
||||
close: (...args: any[]) => void;
|
||||
}, string, {
|
||||
style: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
role: typeof roleTypes[number];
|
||||
visible: boolean | null;
|
||||
content: string;
|
||||
offset: number;
|
||||
showAfter: number;
|
||||
hideAfter: number;
|
||||
autoClose: number;
|
||||
boundariesPadding: number;
|
||||
gpuAcceleration: boolean;
|
||||
placement: Placement;
|
||||
popperOptions: Partial<Options>;
|
||||
strategy: "fixed" | "absolute";
|
||||
arrowOffset: number;
|
||||
effect: PopperEffect;
|
||||
enterable: boolean;
|
||||
popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
|
||||
stopPopperMouseEvent: boolean;
|
||||
loop: boolean;
|
||||
pure: boolean;
|
||||
focusOnShow: boolean;
|
||||
trapping: boolean;
|
||||
virtualTriggering: boolean;
|
||||
teleported: boolean;
|
||||
showArrow: boolean;
|
||||
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 };
|
||||
frontend/node_modules/element-plus/lib/components/table/src/filter-panel.vue_vue_type_script_lang.js
Generated
Vendored
+178
@@ -0,0 +1,178 @@
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_aria = require("../../../constants/aria.js");
|
||||
const require_event = require("../../../utils/dom/event.js");
|
||||
const require_types = require("../../../utils/types.js");
|
||||
const require_index = require("../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../hooks/use-namespace/index.js");
|
||||
const require_index$2 = require("../../icon/index.js");
|
||||
const require_content = require("../../tooltip/src/content.js");
|
||||
const require_index$3 = require("../../tooltip/index.js");
|
||||
const require_index$4 = require("../../scrollbar/index.js");
|
||||
const require_index$5 = require("../../checkbox/index.js");
|
||||
let _element_plus_icons_vue = require("@element-plus/icons-vue");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/filter-panel.vue?vue&type=script&lang.ts
|
||||
var filter_panel_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
|
||||
name: "ElTableFilterPanel",
|
||||
components: {
|
||||
ElCheckbox: require_index$5.ElCheckbox,
|
||||
ElCheckboxGroup: require_index$5.ElCheckboxGroup,
|
||||
ElScrollbar: require_index$4.ElScrollbar,
|
||||
ElTooltip: require_index$3.ElTooltip,
|
||||
ElIcon: require_index$2.ElIcon,
|
||||
ArrowDown: _element_plus_icons_vue.ArrowDown,
|
||||
ArrowUp: _element_plus_icons_vue.ArrowUp
|
||||
},
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: "bottom-start"
|
||||
},
|
||||
store: { type: Object },
|
||||
column: { type: Object },
|
||||
upDataColumn: { type: Function },
|
||||
appendTo: require_content.useTooltipContentProps.appendTo
|
||||
},
|
||||
setup(props) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const { t } = require_index.useLocale();
|
||||
const ns = require_index$1.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 = (0, vue.ref)(null);
|
||||
const rootRef = (0, vue.ref)(null);
|
||||
const checkedIndex = (0, vue.ref)(0);
|
||||
const filters = (0, vue.computed)(() => {
|
||||
return props.column && props.column.filters;
|
||||
});
|
||||
const filterClassName = (0, vue.computed)(() => {
|
||||
if (props.column && props.column.filterClassName) return `${ns.b()} ${props.column.filterClassName}`;
|
||||
return ns.b();
|
||||
});
|
||||
const filterValue = (0, vue.computed)({
|
||||
get: () => (props.column?.filteredValue || [])[0],
|
||||
set: (value) => {
|
||||
if (filteredValue.value) if (!require_types.isPropAbsent(value)) filteredValue.value.splice(0, 1, value);
|
||||
else filteredValue.value.splice(0, 1);
|
||||
}
|
||||
});
|
||||
const filteredValue = (0, vue.computed)({
|
||||
get() {
|
||||
if (props.column) return props.column.filteredValue || [];
|
||||
return [];
|
||||
},
|
||||
set(value) {
|
||||
if (props.column) props.upDataColumn?.("filteredValue", value);
|
||||
}
|
||||
});
|
||||
const multiple = (0, vue.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 (!require_types.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 (require_types.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 = require_event.getEventCode(event);
|
||||
const len = (filters.value ? filters.value.length : 0) + 1;
|
||||
let index = checkedIndex.value;
|
||||
let isPreventDefault = true;
|
||||
switch (code) {
|
||||
case require_aria.EVENT_CODE.down:
|
||||
case require_aria.EVENT_CODE.right:
|
||||
index = (index + 1) % len;
|
||||
break;
|
||||
case require_aria.EVENT_CODE.up:
|
||||
case require_aria.EVENT_CODE.left:
|
||||
index = (index - 1 + len) % len;
|
||||
break;
|
||||
case require_aria.EVENT_CODE.tab:
|
||||
hidden();
|
||||
isPreventDefault = false;
|
||||
break;
|
||||
case require_aria.EVENT_CODE.enter:
|
||||
case require_aria.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: require_types.isPropAbsent,
|
||||
isActive,
|
||||
t,
|
||||
ns,
|
||||
tooltipRef,
|
||||
rootRef,
|
||||
checkedIndex,
|
||||
handleShowTooltip,
|
||||
handleHideTooltip,
|
||||
handleKeydown
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = filter_panel_vue_vue_type_script_lang_default;
|
||||
|
||||
//# sourceMappingURL=filter-panel.vue_vue_type_script_lang.js.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 };
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../utils/types.js");
|
||||
let vue = require("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 }) => require_types.isUndefined(width))) columns = [];
|
||||
}
|
||||
const getPropsData = (column) => {
|
||||
const propsData = {
|
||||
key: `${props.tableLayout}_${column.id}`,
|
||||
style: {},
|
||||
name: void 0
|
||||
};
|
||||
if (isAuto) propsData.style = { width: `${column.width}px` };
|
||||
else propsData.name = column.id;
|
||||
return propsData;
|
||||
};
|
||||
return (0, vue.h)("colgroup", {}, columns.map((column) => (0, vue.h)("col", getPropsData(column))));
|
||||
}
|
||||
hColgroup.props = ["columns", "tableLayout"];
|
||||
//#endregion
|
||||
exports.hColgroup = hColgroup;
|
||||
|
||||
//# sourceMappingURL=h-helper.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"h-helper.js","names":["isUndefined"],"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,YAAYA,cAAAA,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,QAAA,GAAA,IAAA,GACE,YACA,EAAE,EACF,QAAQ,KAAK,YAAA,GAAA,IAAA,GAAa,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 };
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/layout-observer.ts
|
||||
function useLayoutObserver(root) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
(0, vue.onBeforeMount)(() => {
|
||||
tableLayout.value.addObserver(instance);
|
||||
});
|
||||
(0, vue.onMounted)(() => {
|
||||
onColumnsChange(tableLayout.value);
|
||||
onScrollableChange(tableLayout.value);
|
||||
});
|
||||
(0, vue.onUpdated)(() => {
|
||||
onColumnsChange(tableLayout.value);
|
||||
onScrollableChange(tableLayout.value);
|
||||
});
|
||||
(0, vue.onUnmounted)(() => {
|
||||
tableLayout.value.removeObserver(instance);
|
||||
});
|
||||
const tableLayout = (0, vue.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
|
||||
exports.default = useLayoutObserver;
|
||||
|
||||
//# sourceMappingURL=layout-observer.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"layout-observer.js","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,YAAA,GAAA,IAAA,qBAA+B;CACrC,CAAA,GAAA,IAAA,qBAAoB;EAClB,YAAY,MAAM,YAAY,SAAS;GACvC;CACF,CAAA,GAAA,IAAA,iBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,CAAA,GAAA,IAAA,iBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,CAAA,GAAA,IAAA,mBAAkB;EAChB,YAAY,MAAM,eAAe,SAAS;GAC1C;CACF,MAAM,eAAA,GAAA,IAAA,gBAA6B;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 };
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_util = require("../util.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/store/current.ts
|
||||
function useCurrent(watcherData) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const _currentRowKey = (0, vue.ref)(null);
|
||||
const currentRow = (0, vue.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 = ((0, vue.unref)(data) || []).find((item) => require_util.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(require_util.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
|
||||
exports.default = useCurrent;
|
||||
|
||||
//# sourceMappingURL=current.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"current.js","names":["getRowIdentity"],"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,YAAA,GAAA,IAAA,qBAA+B;CACrC,MAAM,kBAAA,GAAA,IAAA,KAAyC,KAAK;CACpD,MAAM,cAAA,GAAA,IAAA,KAAgC,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,gBAAA,GAAA,IAAA,OACS,KAAK,IAAI,EAAE,EAAE,MACjB,SAASA,aAAAA,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,mBADsBA,aAAAA,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 };
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_util = require("../util.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/store/expand.ts
|
||||
function useExpand(watcherData) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const defaultExpandAll = (0, vue.ref)(false);
|
||||
const expandRows = (0, vue.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 = require_util.getKeysMap(expandRows.value, rowKey);
|
||||
expandRows.value = data.filter((row, index) => {
|
||||
return !!expandRowsMap[require_util.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 (require_util.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 = require_util.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 !!require_util.getKeysMap(expandRows.value, rowKey)[require_util.getRowIdentity(row, rowKey)];
|
||||
return expandRows.value.includes(row);
|
||||
};
|
||||
return {
|
||||
updateExpandRows,
|
||||
toggleRowExpansion,
|
||||
setExpandRowKeys,
|
||||
isRowExpanded,
|
||||
states: {
|
||||
expandRows,
|
||||
defaultExpandAll
|
||||
}
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useExpand;
|
||||
|
||||
//# sourceMappingURL=expand.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"expand.js","names":["getKeysMap","getRowIdentity","toggleRowStatus"],"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,YAAA,GAAA,IAAA,qBAA+B;CACrC,MAAM,oBAAA,GAAA,IAAA,KAAuB,MAAM;CACnC,MAAM,cAAA,GAAA,IAAA,KAA2B,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,gBAAgBA,aAAAA,WAAW,WAAW,OAAO,OAAO;GAC1D,WAAW,QAAQ,KAAK,QAAQ,KAAK,UAAU;IAE7C,OAAO,CAAC,CAAC,cADKC,aAAAA,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,IATgBC,aAAAA,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,UAAUF,aAAAA,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,CADUA,aAAAA,WAAW,WAAW,OAAO,OAC7B,CAACC,aAAAA,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 };
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("./index.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#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 = require_index.default();
|
||||
store.toggleAllSelection = (0, lodash_unified.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) => {
|
||||
(0, vue.watch)(() => getArrKeysValue(props, key), (value) => {
|
||||
handleValue(value, key, store);
|
||||
});
|
||||
});
|
||||
}
|
||||
function handleValue(value, propsKey, store) {
|
||||
let newVal = value;
|
||||
let storeKey = InitialStateMap[propsKey];
|
||||
if ((0, _vue_shared.isObject)(storeKey)) {
|
||||
newVal = newVal || storeKey.default;
|
||||
storeKey = storeKey.key;
|
||||
}
|
||||
store.states[storeKey].value = newVal;
|
||||
}
|
||||
function getArrKeysValue(props, key) {
|
||||
if (key.includes(".")) {
|
||||
const keyList = key.split(".");
|
||||
let value = props;
|
||||
keyList.forEach((k) => {
|
||||
value = value[k];
|
||||
});
|
||||
return value;
|
||||
} else return props[key];
|
||||
}
|
||||
//#endregion
|
||||
exports.createStore = createStore;
|
||||
|
||||
//# sourceMappingURL=helper.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"helper.js","names":["useStore"],"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,QAAQA,cAAAA,SAAa;CAG3B,MAAM,sBAAA,GAAA,eAAA,UAA8B,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,CAAA,GAAA,IAAA,aACQ,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,KAAA,GAAA,YAAA,UAAa,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
+164
@@ -0,0 +1,164 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_watcher = require("./watcher.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("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 = (0, vue.getCurrentInstance)();
|
||||
const watcher = require_watcher.default();
|
||||
const ns = require_index$1.useNamespace("table");
|
||||
const { t } = require_index.useLocale();
|
||||
const mutations = {
|
||||
setData(states, data) {
|
||||
const dataInstanceChanged = (0, vue.unref)(states._data) !== data;
|
||||
states.data.value = data;
|
||||
states._data.value = data;
|
||||
instance.store.execQuery();
|
||||
instance.store.updateCurrentRowData();
|
||||
instance.store.updateExpandRows();
|
||||
instance.store.updateTreeData(instance.store.states.defaultExpandAll.value);
|
||||
if ((0, vue.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 = (0, vue.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 = (0, vue.unref)(states._columns) || [];
|
||||
if (parent) {
|
||||
parent.children?.splice(parent.children.findIndex((item) => item.id === column.id), 1);
|
||||
(0, vue.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 = (0, vue.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 = (0, vue.unref)(sortingColumn), propValue = (0, vue.unref)(sortProp), orderValue = (0, vue.unref)(sortOrder);
|
||||
if ((0, lodash_unified.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() {
|
||||
(0, vue.nextTick)(() => instance.layout.updateScrollY.apply(instance.layout));
|
||||
};
|
||||
return {
|
||||
ns,
|
||||
t,
|
||||
...watcher,
|
||||
mutations,
|
||||
commit,
|
||||
updateTableScrollY
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useStore;
|
||||
|
||||
//# sourceMappingURL=index.js.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 };
|
||||
+199
@@ -0,0 +1,199 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_util = require("../util.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/table/src/store/tree.ts
|
||||
function useTree(watcherData) {
|
||||
const expandRowKeys = (0, vue.ref)([]);
|
||||
const treeData = (0, vue.ref)({});
|
||||
const indent = (0, vue.ref)(16);
|
||||
const lazy = (0, vue.ref)(false);
|
||||
const lazyTreeNodeMap = (0, vue.ref)({});
|
||||
const lazyColumnIdentifier = (0, vue.ref)("hasChildren");
|
||||
const childrenColumnName = (0, vue.ref)("children");
|
||||
const checkStrictly = (0, vue.ref)(false);
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const normalizedData = (0, vue.computed)(() => {
|
||||
if (!watcherData.rowKey.value) return {};
|
||||
return normalize(watcherData.data.value || []);
|
||||
});
|
||||
const normalizedLazyNode = (0, vue.computed)(() => {
|
||||
const rowKey = watcherData.rowKey.value;
|
||||
const keys = Object.keys(lazyTreeNodeMap.value);
|
||||
const res = {};
|
||||
if (!keys.length) return res;
|
||||
keys.forEach((key) => {
|
||||
if (lazyTreeNodeMap.value[key].length) {
|
||||
const item = { children: [] };
|
||||
lazyTreeNodeMap.value[key].forEach((row) => {
|
||||
const currentRowKey = require_util.getRowIdentity(row, rowKey);
|
||||
item.children.push(currentRowKey);
|
||||
if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) res[currentRowKey] = { children: [] };
|
||||
});
|
||||
res[key] = item;
|
||||
}
|
||||
});
|
||||
return res;
|
||||
});
|
||||
const normalize = (data) => {
|
||||
const rowKey = watcherData.rowKey.value;
|
||||
const res = {};
|
||||
require_util.walkTreeNode(data, (parent, children, level) => {
|
||||
const parentId = require_util.getRowIdentity(parent, rowKey);
|
||||
if ((0, _vue_shared.isArray)(children)) res[parentId] = {
|
||||
children: children.map((row) => require_util.getRowIdentity(row, rowKey)),
|
||||
level
|
||||
};
|
||||
else if (lazy.value) res[parentId] = {
|
||||
children: [],
|
||||
lazy: true,
|
||||
level
|
||||
};
|
||||
}, childrenColumnName.value, lazyColumnIdentifier.value, lazy.value);
|
||||
return res;
|
||||
};
|
||||
const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll) => {
|
||||
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 = (0, vue.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();
|
||||
};
|
||||
(0, vue.watch)(() => expandRowKeys.value, () => {
|
||||
updateTreeData(true);
|
||||
}, { deep: true });
|
||||
(0, vue.watch)(() => normalizedData.value, () => {
|
||||
updateTreeData();
|
||||
});
|
||||
(0, vue.watch)(() => normalizedLazyNode.value, () => {
|
||||
updateTreeData();
|
||||
});
|
||||
const updateTreeExpandKeys = (value) => {
|
||||
expandRowKeys.value = value;
|
||||
updateTreeData();
|
||||
};
|
||||
const isUseLazy = (data) => {
|
||||
return lazy.value && data && "loaded" in data && !data.loaded;
|
||||
};
|
||||
const toggleTreeExpansion = (row, expanded) => {
|
||||
instance.store.assertRowKey();
|
||||
const rowKey = watcherData.rowKey.value;
|
||||
const id = require_util.getRowIdentity(row, rowKey);
|
||||
const data = id && treeData.value[id];
|
||||
if (id && data && "expanded" in data) {
|
||||
const oldExpanded = data.expanded;
|
||||
expanded = require_types.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 = require_util.getRowIdentity(row, rowKey);
|
||||
const data = treeData.value[id];
|
||||
if (isUseLazy(data)) loadData(row, id, data);
|
||||
else toggleTreeExpansion(row, void 0);
|
||||
};
|
||||
const loadData = (row, key, treeNode) => {
|
||||
const { load } = instance.props;
|
||||
if (load && !treeData.value[key].loaded) {
|
||||
treeData.value[key].loading = true;
|
||||
load(row, treeNode, (data) => {
|
||||
if (!(0, _vue_shared.isArray)(data)) throw new TypeError("[ElTable] data must be an array");
|
||||
treeData.value[key].loading = false;
|
||||
treeData.value[key].loaded = true;
|
||||
treeData.value[key].expanded = true;
|
||||
if (data.length) lazyTreeNodeMap.value = {
|
||||
...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
|
||||
exports.default = useTree;
|
||||
|
||||
//# sourceMappingURL=tree.js.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 };
|
||||
+556
@@ -0,0 +1,556 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_expand = require("./expand.js");
|
||||
const require_current = require("./current.js");
|
||||
const require_tree = require("./tree.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
//#region ../../packages/components/table/src/store/watcher.ts
|
||||
const sortData = (data, states) => {
|
||||
const sortingColumn = states.sortingColumn;
|
||||
if (!sortingColumn || (0, _vue_shared.isString)(sortingColumn.sortable)) return data;
|
||||
return require_util.orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
|
||||
};
|
||||
const doFlattenColumns = (columns) => {
|
||||
const result = [];
|
||||
columns.forEach((column) => {
|
||||
if (column.children && column.children.length > 0) result.push.apply(result, doFlattenColumns(column.children));
|
||||
else result.push(column);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
function useWatcher() {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const { size: tableSize } = (0, vue.toRefs)(instance.proxy?.$props);
|
||||
const rowKey = (0, vue.ref)(null);
|
||||
const data = (0, vue.ref)([]);
|
||||
const _data = (0, vue.ref)([]);
|
||||
const isComplex = (0, vue.ref)(false);
|
||||
const _columns = (0, vue.ref)([]);
|
||||
const originColumns = (0, vue.ref)([]);
|
||||
const columns = (0, vue.ref)([]);
|
||||
const fixedColumns = (0, vue.ref)([]);
|
||||
const rightFixedColumns = (0, vue.ref)([]);
|
||||
const leafColumns = (0, vue.ref)([]);
|
||||
const fixedLeafColumns = (0, vue.ref)([]);
|
||||
const rightFixedLeafColumns = (0, vue.ref)([]);
|
||||
const updateOrderFns = [];
|
||||
const leafColumnsLength = (0, vue.ref)(0);
|
||||
const fixedLeafColumnsLength = (0, vue.ref)(0);
|
||||
const rightFixedLeafColumnsLength = (0, vue.ref)(0);
|
||||
const isAllSelected = (0, vue.ref)(false);
|
||||
const selection = (0, vue.ref)([]);
|
||||
const selectionIndeterminate = (0, vue.ref)({});
|
||||
const reserveSelection = (0, vue.ref)(false);
|
||||
const selectOnIndeterminate = (0, vue.ref)(false);
|
||||
const selectable = (0, vue.ref)(null);
|
||||
const rowExpandable = (0, vue.ref)(null);
|
||||
const filters = (0, vue.ref)({});
|
||||
const filteredData = (0, vue.ref)(null);
|
||||
const sortingColumn = (0, vue.ref)(null);
|
||||
const sortProp = (0, vue.ref)(null);
|
||||
const sortOrder = (0, vue.ref)(null);
|
||||
const hoverRow = (0, vue.ref)(null);
|
||||
let halfSelection = [];
|
||||
const selectedMap = (0, vue.computed)(() => {
|
||||
return rowKey.value ? require_util.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 = require_util.getRowIdentity(row, rowKey.value);
|
||||
return [...lazyTreeNodeMap.value?.[id] ?? [], ...inlineChildren];
|
||||
};
|
||||
(0, vue.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[require_util.getRowIdentity(row, rowKey.value)];
|
||||
else return selection.value.includes(row);
|
||||
};
|
||||
const rowIndexMap = (0, vue.computed)(() => {
|
||||
const map = /* @__PURE__ */ new Map();
|
||||
if (!rowKey.value || !selectable.value) return map;
|
||||
let index = 0;
|
||||
const _traverse = (rows) => {
|
||||
if (!(0, _vue_shared.isArray)(rows)) return;
|
||||
rows.forEach((row) => {
|
||||
const id = require_util.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 = require_util.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 (!(0, _vue_shared.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 = require_util.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 = require_util.getRowIdentity(row, rowKey.value);
|
||||
if (!dataMap[id]) dataMap[id] = {
|
||||
row,
|
||||
index: -1
|
||||
};
|
||||
});
|
||||
});
|
||||
for (const key in selectedMap.value) if ((0, _vue_shared.hasOwn)(selectedMap.value, key) && !dataMap[key]) deleted.push(selectedMap.value[key].row);
|
||||
} else deleted = selection.value.filter((item) => !data.value.includes(item));
|
||||
if (deleted.length) {
|
||||
const newSelection = selection.value.filter((item) => !deleted.includes(item));
|
||||
selection.value = newSelection;
|
||||
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 = require_util.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(require_util.getRowIdentity(child, rowKey.value)) ?? 0;
|
||||
require_util.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 (require_util.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 (require_util.toggleRowStatus(selection.value, row, value, treeProps, selectable.value, rowIndex, rowKey)) selectionChanged = true;
|
||||
childrenCount += getChildrenCount(require_util.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(require_util.getRowIdentity(child, rowKey)) ?? 0;
|
||||
if (require_util.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 = require_util.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_ = {};
|
||||
(0, lodash_unified.castArray)(column).forEach((col) => {
|
||||
filters.value[col.id] = values;
|
||||
filters_[col.columnKey || col.id] = values;
|
||||
});
|
||||
return filters_;
|
||||
};
|
||||
const updateSort = (column, prop, order) => {
|
||||
if (sortingColumn.value && sortingColumn.value !== column) sortingColumn.value.order = null;
|
||||
sortingColumn.value = column;
|
||||
sortProp.value = prop;
|
||||
sortOrder.value = order;
|
||||
};
|
||||
const execFilter = () => {
|
||||
let sourceData = (0, vue.unref)(_data);
|
||||
Object.keys(filters.value).forEach((columnId) => {
|
||||
const values = filters.value[columnId];
|
||||
if (!values || values.length === 0) return;
|
||||
const column = require_util.getColumnById({ columns: columns.value }, columnId);
|
||||
if (column && column.filterMethod) sourceData = sourceData.filter((row) => {
|
||||
return values.some((value) => column.filterMethod.call(null, value, row, column));
|
||||
});
|
||||
});
|
||||
filteredData.value = sourceData;
|
||||
};
|
||||
const execSort = () => {
|
||||
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 ((0, _vue_shared.isString)(columnKeys)) columnKeys = [columnKeys];
|
||||
if ((0, _vue_shared.isArray)(columnKeys)) {
|
||||
const columns_ = columnKeys.map((key) => require_util.getColumnByKey({ columns: columns.value }, key));
|
||||
keys.forEach((key) => {
|
||||
const column = columns_.find((col) => col.id === key);
|
||||
if (column) column.filteredValue = [];
|
||||
});
|
||||
instance.store.commit("filterChange", {
|
||||
column: columns_,
|
||||
values: [],
|
||||
silent: true,
|
||||
multi: true
|
||||
});
|
||||
} else {
|
||||
keys.forEach((key) => {
|
||||
const column = columns.value.find((col) => col.id === key);
|
||||
if (column) column.filteredValue = [];
|
||||
});
|
||||
filters.value = {};
|
||||
instance.store.commit("filterChange", {
|
||||
column: {},
|
||||
values: [],
|
||||
silent: true
|
||||
});
|
||||
}
|
||||
};
|
||||
const clearSort = () => {
|
||||
if (!sortingColumn.value) return;
|
||||
updateSort(null, null, null);
|
||||
instance.store.commit("changeSortCondition", { silent: true });
|
||||
};
|
||||
const { setExpandRowKeys, toggleRowExpansion, updateExpandRows, states: expandStates, isRowExpanded } = require_expand.default({
|
||||
data,
|
||||
rowKey
|
||||
});
|
||||
const { updateTreeExpandKeys, toggleTreeExpansion, updateTreeData, updateKeyChildren, loadOrToggle, states: treeStates } = require_tree.default({
|
||||
data,
|
||||
rowKey
|
||||
});
|
||||
const { updateCurrentRowData, updateCurrentRow, setCurrentRowKey, states: currentData } = require_current.default({
|
||||
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);
|
||||
};
|
||||
(0, vue.watch)(() => treeStates.checkStrictly.value, (value) => {
|
||||
if (value) {
|
||||
selectionIndeterminate.value = {};
|
||||
halfSelection = [];
|
||||
} else updateSelectionByChildren({ emitChange: false });
|
||||
updateAllSelected();
|
||||
});
|
||||
(0, vue.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
|
||||
exports.default = useWatcher;
|
||||
|
||||
//# sourceMappingURL=watcher.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+29
@@ -0,0 +1,29 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#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
|
||||
exports.default = defaultProps;
|
||||
|
||||
//# sourceMappingURL=defaults.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"defaults.js","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"}
|
||||
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+124
@@ -0,0 +1,124 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_style = require("../../../../utils/dom/style.js");
|
||||
const require_numbers = require("../../../../utils/numbers.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table-body/events-helper.ts
|
||||
function useEvents(props) {
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const tooltipContent = (0, vue.ref)("");
|
||||
const tooltipTrigger = (0, vue.ref)((0, vue.h)("div"));
|
||||
const handleEvent = (event, row, name) => {
|
||||
const table = parent;
|
||||
const cell = require_util.getCell(event);
|
||||
let column = null;
|
||||
const namespace = table?.vnode.el?.dataset.prefix;
|
||||
if (cell) {
|
||||
column = require_util.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 = (0, lodash_unified.debounce)((index) => {
|
||||
props.store?.commit("setHoverRow", index);
|
||||
}, 30);
|
||||
const handleMouseLeave = (0, lodash_unified.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 = require_util.getCell(event);
|
||||
const namespace = table?.vnode.el?.dataset.prefix;
|
||||
let column = null;
|
||||
if (cell) {
|
||||
column = require_util.getColumnByCell({ columns: props.store?.states.columns.value ?? [] }, cell, namespace);
|
||||
if (!column) return;
|
||||
if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, require_style.addClass);
|
||||
const hoverState = table.hoverState = {
|
||||
cell,
|
||||
column,
|
||||
row
|
||||
};
|
||||
table?.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
|
||||
}
|
||||
if (!tooltipOptions) {
|
||||
if (require_util.removePopper?.trigger === cell) require_util.removePopper?.();
|
||||
return;
|
||||
}
|
||||
const cellChild = event.target.querySelector(".cell");
|
||||
if (!(require_style.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 (require_numbers.isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || require_numbers.isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || require_numbers.isGreaterThan(cellChild.scrollWidth, cellChildWidth)) require_util.createTablePopper(tooltipOptions, (cell?.innerText || cell?.textContent) ?? "", row, column, cell, table);
|
||||
else if (require_util.removePopper?.trigger === cell) require_util.removePopper?.();
|
||||
};
|
||||
const handleCellMouseLeave = (event) => {
|
||||
const cell = require_util.getCell(event);
|
||||
if (!cell) return;
|
||||
if (cell.rowSpan > 1) toggleRowClassByCell(cell.rowSpan, event, require_style.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
|
||||
exports.default = useEvents;
|
||||
|
||||
//# sourceMappingURL=events-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_raf = require("../../../../utils/raf.js");
|
||||
const require_style = require("../../../../utils/dom/style.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_layout_observer = require("../layout-observer.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
const require_render_helper = require("./render-helper.js");
|
||||
const require_defaults = require("./defaults.js");
|
||||
let vue = require("vue");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
//#region ../../packages/components/table/src/table-body/index.ts
|
||||
var table_body_default = (0, vue.defineComponent)({
|
||||
name: "ElTableBody",
|
||||
props: require_defaults.default,
|
||||
setup(props) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index.useNamespace("table");
|
||||
const { wrappedRowRender, tooltipContent, tooltipTrigger } = require_render_helper.default(props);
|
||||
const { onColumnsChange, onScrollableChange } = require_layout_observer.default(parent);
|
||||
const hoveredCellList = [];
|
||||
(0, vue.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) {
|
||||
require_style.addClass(preChildNodes[rowIndex], "hover-cell");
|
||||
hoveredCellList.push(preChildNodes[rowIndex]);
|
||||
break;
|
||||
}
|
||||
rowNum--;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hoveredCellList.forEach((item) => require_style.removeClass(item, "hover-cell"));
|
||||
hoveredCellList.length = 0;
|
||||
}
|
||||
if (!props.store?.states.isComplex.value || !_vueuse_core.isClient) return;
|
||||
require_raf.rAF(() => {
|
||||
const oldRow = rows[oldVal];
|
||||
const newRow = rows[newVal];
|
||||
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) require_style.removeClass(oldRow, "hover-row");
|
||||
if (newRow) require_style.addClass(newRow, "hover-row");
|
||||
});
|
||||
});
|
||||
(0, vue.onUnmounted)(() => {
|
||||
require_util.removePopper?.();
|
||||
});
|
||||
return {
|
||||
ns,
|
||||
onColumnsChange,
|
||||
onScrollableChange,
|
||||
wrappedRowRender,
|
||||
tooltipContent,
|
||||
tooltipTrigger
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { wrappedRowRender, store } = this;
|
||||
return (0, vue.h)("tbody", { tabIndex: -1 }, [(store?.states.data.value || []).reduce((acc, row) => {
|
||||
return acc.concat(wrappedRowRender(row, acc.length));
|
||||
}, [])]);
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = table_body_default;
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+183
@@ -0,0 +1,183 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
const require_events_helper = require("./events-helper.js");
|
||||
const require_styles_helper = require("./styles-helper.js");
|
||||
const require_td_wrapper = require("./td-wrapper.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table-body/render-helper.ts
|
||||
function useRender(props) {
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index.useNamespace("table");
|
||||
const { handleDoubleClick, handleClick, handleContextMenu, handleMouseEnter, handleMouseLeave, handleCellMouseEnter, handleCellMouseLeave, tooltipContent, tooltipTrigger } = require_events_helper.default(props);
|
||||
const { getRowStyle, getRowClass, getCellStyle, getCellClass, getSpan, getColspanRealWidth } = require_styles_helper.default(props);
|
||||
let displayIndex = -1;
|
||||
const firstDefaultColumnIndex = (0, vue.computed)(() => {
|
||||
return props.store?.states.columns.value.findIndex(({ type }) => type === "default");
|
||||
});
|
||||
const getKeyOfRow = (row, index) => {
|
||||
const rowKey = (parent?.props)?.rowKey;
|
||||
if (rowKey) return require_util.getRowIdentity(row, rowKey);
|
||||
return index;
|
||||
};
|
||||
const rowRender = (row, $index, treeRowData, expanded = false) => {
|
||||
const { tooltipEffect, tooltipOptions, store } = props;
|
||||
const { indent, columns } = store.states;
|
||||
const rowClasses = [];
|
||||
let display = true;
|
||||
if (treeRowData) {
|
||||
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
|
||||
display = !!treeRowData.display;
|
||||
}
|
||||
if ($index === 0) displayIndex = -1;
|
||||
if (props.stripe && display) displayIndex++;
|
||||
rowClasses.push(...getRowClass(row, $index, displayIndex));
|
||||
return (0, vue.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 (require_types.isBoolean(treeRowData.expanded)) {
|
||||
data.treeNode.expanded = treeRowData.expanded;
|
||||
if ("loading" in treeRowData) data.treeNode.loading = treeRowData.loading;
|
||||
if ("noLazyChildren" in treeRowData) data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
|
||||
}
|
||||
}
|
||||
const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
|
||||
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
|
||||
const mergedTooltipOptions = column.showOverflowTooltip && (0, lodash_unified.merge)({ effect: tooltipEffect }, tooltipOptions, column.showOverflowTooltip);
|
||||
return (0, vue.h)(require_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((0, vue.h)("tr", {
|
||||
key: `expanded-row__${tr.key}`,
|
||||
style: { display: expanded ? "" : "none" }
|
||||
}, [(0, vue.h)("td", {
|
||||
colspan: columns.length,
|
||||
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
|
||||
}, [renderExpanded({
|
||||
row,
|
||||
$index,
|
||||
store,
|
||||
expanded
|
||||
})])]));
|
||||
return rows;
|
||||
} else if (Object.keys(treeData.value).length) {
|
||||
assertRowKey();
|
||||
const key = require_util.getRowIdentity(row, rowKey.value);
|
||||
let cur = treeData.value[key];
|
||||
let treeRowData = null;
|
||||
if (cur) {
|
||||
treeRowData = {
|
||||
expanded: cur.expanded,
|
||||
level: cur.level,
|
||||
display: true,
|
||||
noLazyChildren: void 0,
|
||||
loading: void 0
|
||||
};
|
||||
if (require_types.isBoolean(cur.lazy)) {
|
||||
if (treeRowData && require_types.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 = require_util.getRowIdentity(node, rowKey.value);
|
||||
if (require_types.isPropAbsent(childKey)) throw new Error("For nested data item, row-key is required.");
|
||||
cur = { ...treeData.value[childKey] };
|
||||
if (cur) {
|
||||
innerTreeRowData.expanded = cur.expanded;
|
||||
cur.level = cur.level || innerTreeRowData.level;
|
||||
cur.display = !!(cur.expanded && innerTreeRowData.display);
|
||||
if (require_types.isBoolean(cur.lazy)) {
|
||||
if (require_types.isBoolean(cur.loaded) && cur.loaded) innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
|
||||
innerTreeRowData.loading = cur.loading;
|
||||
}
|
||||
}
|
||||
i++;
|
||||
tmp.push(rowRender(node, $index + i, innerTreeRowData));
|
||||
if (cur) 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
|
||||
exports.default = useRender;
|
||||
|
||||
//# sourceMappingURL=render-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+109
@@ -0,0 +1,109 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/table/src/table-body/styles-helper.ts
|
||||
function useStyles(props) {
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index.useNamespace("table");
|
||||
const getRowStyle = (row, rowIndex) => {
|
||||
const rowStyle = parent?.props.rowStyle;
|
||||
if ((0, _vue_shared.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 ((0, _vue_shared.isString)(rowClassName)) classes.push(rowClassName);
|
||||
else if ((0, _vue_shared.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 ((0, _vue_shared.isFunction)(cellStyle)) cellStyles = cellStyle.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
});
|
||||
const fixedStyle = require_util.getFixedColumnOffset(columnIndex, props?.fixed, props.store);
|
||||
require_util.ensurePosition(fixedStyle, "left");
|
||||
require_util.ensurePosition(fixedStyle, "right");
|
||||
return Object.assign({}, cellStyles, fixedStyle);
|
||||
};
|
||||
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
|
||||
const fixedClasses = require_util.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 ((0, _vue_shared.isString)(cellClassName)) classes.push(cellClassName);
|
||||
else if ((0, _vue_shared.isFunction)(cellClassName)) classes.push(cellClassName.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
}));
|
||||
classes.push(ns.e("cell"));
|
||||
return classes.filter((className) => Boolean(className)).join(" ");
|
||||
};
|
||||
const getSpan = (row, column, rowIndex, columnIndex) => {
|
||||
let rowspan = 1;
|
||||
let colspan = 1;
|
||||
const fn = parent?.props.spanMethod;
|
||||
if ((0, _vue_shared.isFunction)(fn)) {
|
||||
const result = fn({
|
||||
row,
|
||||
column,
|
||||
rowIndex,
|
||||
columnIndex
|
||||
});
|
||||
if ((0, _vue_shared.isArray)(result)) {
|
||||
rowspan = result[0];
|
||||
colspan = result[1];
|
||||
} else if ((0, _vue_shared.isObject)(result)) {
|
||||
rowspan = result.rowspan;
|
||||
colspan = result.colspan;
|
||||
}
|
||||
}
|
||||
return {
|
||||
rowspan,
|
||||
colspan
|
||||
};
|
||||
};
|
||||
const getColspanRealWidth = (columns, colspan, index) => {
|
||||
if (colspan < 1) return columns[index].realWidth;
|
||||
const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
|
||||
return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
|
||||
};
|
||||
return {
|
||||
getRowStyle,
|
||||
getRowClass,
|
||||
getCellStyle,
|
||||
getCellClass,
|
||||
getSpan,
|
||||
getColspanRealWidth
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useStyles;
|
||||
|
||||
//# sourceMappingURL=styles-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/table/src/table-body/td-wrapper.vue
|
||||
var td_wrapper_default = require("./td-wrapper.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = td_wrapper_default;
|
||||
|
||||
//# sourceMappingURL=td-wrapper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"td-wrapper.js","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":""}
|
||||
Generated
Vendored
+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
+30
@@ -0,0 +1,30 @@
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
let vue = require("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__ */ (0, vue.defineComponent)({
|
||||
name: "TableTdWrapper",
|
||||
__name: "td-wrapper",
|
||||
props: {
|
||||
colspan: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
rowspan: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("td", {
|
||||
colspan: __props.colspan,
|
||||
rowspan: __props.rowspan
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = td_wrapper_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=td-wrapper.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"td-wrapper.vue_vue_type_script_setup_true_lang.js","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":";;;;;;;;;;;;;;;;;;;4DACyD,MAAA;IAAlD,SAAS,QAAA;IAAU,SAAS,QAAA;2BAAiB,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}
|
||||
Generated
Vendored
+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: (BooleanConstructor | StringConstructor)[];
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
|
||||
*/
|
||||
sortMethod: PropType<TableColumnCtx<any>["sortMethod"]>;
|
||||
/**
|
||||
* @description specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal
|
||||
*/
|
||||
sortBy: PropType<TableColumnCtx<any>["sortBy"]>;
|
||||
/**
|
||||
* @description whether column width can be resized, works when `border` of `el-table` is `true`
|
||||
*/
|
||||
resizable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered
|
||||
*/
|
||||
columnKey: StringConstructor;
|
||||
/**
|
||||
* @description alignment, the value should be 'left' \/ 'center' \/ 'right'
|
||||
*/
|
||||
align: StringConstructor;
|
||||
/**
|
||||
* @description alignment of the table header. If omitted, the value of the above `align` attribute will be applied, the value should be 'left' \/ 'center' \/ 'right'
|
||||
*/
|
||||
headerAlign: StringConstructor;
|
||||
/**
|
||||
* @description whether to hide extra content and show them in a tooltip when hovering on the cell
|
||||
*/
|
||||
showOverflowTooltip: {
|
||||
type: PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
|
||||
default: undefined;
|
||||
};
|
||||
/**
|
||||
* @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
|
||||
*/
|
||||
tooltipFormatter: PropType<TableColumnCtx<any>["tooltipFormatter"]>;
|
||||
/**
|
||||
* @description whether column is fixed at left / right. Will be fixed at left if `true`
|
||||
*/
|
||||
fixed: (BooleanConstructor | StringConstructor)[];
|
||||
/**
|
||||
* @description function that formats cell content
|
||||
*/
|
||||
formatter: PropType<TableColumnCtx<any>["formatter"]>;
|
||||
/**
|
||||
* @description function that determines if a certain row can be selected, works when `type` is 'selection'
|
||||
*/
|
||||
selectable: PropType<TableColumnCtx<any>["selectable"]>;
|
||||
/**
|
||||
* @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
|
||||
*/
|
||||
reserveSelection: BooleanConstructor;
|
||||
/**
|
||||
* @description data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`
|
||||
*/
|
||||
filterMethod: PropType<TableColumnCtx<any>["filterMethod"]>;
|
||||
/**
|
||||
* @description filter value for selected data, might be useful when table header is rendered with `render-header`
|
||||
*/
|
||||
filteredValue: PropType<TableColumnCtx<any>["filteredValue"]>;
|
||||
/**
|
||||
* @description an array of data filtering options. For each element in this array, `text` and `value` are required
|
||||
*/
|
||||
filters: PropType<TableColumnCtx<any>["filters"]>;
|
||||
/**
|
||||
* @description placement for the filter dropdown
|
||||
*/
|
||||
filterPlacement: StringConstructor;
|
||||
/**
|
||||
* @description whether data filtering supports multiple options
|
||||
*/
|
||||
filterMultiple: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* @description className for the filter dropdown
|
||||
*/
|
||||
filterClassName: StringConstructor;
|
||||
/**
|
||||
* @description customize indices for each row, works on columns with `type=index`
|
||||
*/
|
||||
index: PropType<TableColumnCtx<any>["index"]>;
|
||||
/**
|
||||
* @description the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
|
||||
*/
|
||||
sortOrders: {
|
||||
type: PropType<TableColumnCtx<any>["sortOrders"]>;
|
||||
default: () => (string | null)[];
|
||||
validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
export { type FilterMethods, type Filters, type TableColumn, type TableColumnCtx, type TableColumnProps, type ValueOf, tableColumnProps as default, tableColumnProps };
|
||||
Generated
Vendored
+176
@@ -0,0 +1,176 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#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
|
||||
exports.default = tableColumnProps;
|
||||
exports.tableColumnProps = tableColumnProps;
|
||||
|
||||
//# sourceMappingURL=defaults.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
import _default from "./index.vue.js";
|
||||
export { _default as default };
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/table/src/table-column/index.ts
|
||||
var table_column_default = require("./index2.js").default;
|
||||
//#endregion
|
||||
exports.default = table_column_default;
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","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,6CAAeA,CAAAA"}
|
||||
Generated
Vendored
+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?: 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
+126
@@ -0,0 +1,126 @@
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_use_global_config = require("../../../config-provider/src/hooks/use-global-config.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_defaults = require("./defaults.js");
|
||||
const require_config = require("../config.js");
|
||||
const require_watcher_helper = require("./watcher-helper.js");
|
||||
const require_render_helper = require("./render-helper.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#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__ */ (0, vue.defineComponent)({
|
||||
name: "ElTableColumn",
|
||||
__name: "index",
|
||||
props: require_defaults.default,
|
||||
setup(__props) {
|
||||
const props = __props;
|
||||
const slots = (0, vue.useSlots)();
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const globalConfig = require_use_global_config.useGlobalConfig("table");
|
||||
const columnConfig = (0, vue.ref)({});
|
||||
const owner = (0, vue.computed)(() => {
|
||||
let parent = instance.parent;
|
||||
while (parent && !parent.tableId) parent = parent.parent;
|
||||
return parent;
|
||||
});
|
||||
const { registerNormalWatchers, registerComplexWatchers } = require_watcher_helper.default(owner, props);
|
||||
const { columnId, isSubColumn, realHeaderAlign, columnOrTableParent, setColumnWidth, setColumnForcedProps, setColumnRenders, getPropsData, getColumnElIndex, realAlign, updateColumnOrder } = require_render_helper.default(props, slots, owner);
|
||||
const parent = columnOrTableParent.value;
|
||||
columnId.value = require_util.createTableColumnId("tableId" in parent ? parent.tableId : parent.columnId);
|
||||
(0, vue.onBeforeMount)(() => {
|
||||
isSubColumn.value = owner.value !== parent;
|
||||
const type = props.type || "default";
|
||||
const sortable = props.sortable === "" ? true : props.sortable;
|
||||
const showOverflowTooltip = type === "selection" ? false : require_types.isUndefined(props.showOverflowTooltip) ? parent.props.showOverflowTooltip ?? globalConfig.value?.showOverflowTooltip : props.showOverflowTooltip;
|
||||
const tooltipFormatter = require_types.isUndefined(props.tooltipFormatter) ? parent.props.tooltipFormatter ?? globalConfig.value?.tooltipFormatter : props.tooltipFormatter;
|
||||
const defaults = {
|
||||
...require_config.cellStarts[type],
|
||||
id: columnId.value,
|
||||
type,
|
||||
property: props.prop || props.property,
|
||||
align: realAlign,
|
||||
headerAlign: realHeaderAlign,
|
||||
showOverflowTooltip,
|
||||
tooltipFormatter,
|
||||
filterable: props.filters || props.filterMethod,
|
||||
filteredValue: [],
|
||||
filterPlacement: "",
|
||||
filterClassName: "",
|
||||
isColumnGroup: false,
|
||||
isSubColumn: false,
|
||||
filterOpened: false,
|
||||
sortable,
|
||||
index: props.index,
|
||||
rawColumnKey: instance.vnode.key
|
||||
};
|
||||
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 = require_util.mergeOptions(defaults, column);
|
||||
column = require_util.compose(setColumnRenders, setColumnWidth, setColumnForcedProps)(column);
|
||||
columnConfig.value = column;
|
||||
registerNormalWatchers();
|
||||
registerComplexWatchers();
|
||||
});
|
||||
(0, vue.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);
|
||||
});
|
||||
(0, vue.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 ((0, _vue_shared.isArray)(renderDefault)) {
|
||||
for (const childNode of renderDefault) if (childNode.type?.name === "ElTableColumn" || childNode.shapeFlag & 2) children.push(childNode);
|
||||
else if (childNode.type === vue.Fragment && (0, _vue_shared.isArray)(childNode.children)) childNode.children.forEach((vnode) => {
|
||||
if (vnode?.patchFlag !== 1024 && !(0, _vue_shared.isString)(vnode?.children)) children.push(vnode);
|
||||
});
|
||||
}
|
||||
return (0, vue.h)("div", children);
|
||||
} catch {
|
||||
return (0, vue.h)("div", []);
|
||||
}
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createBlock)(TableColumnRenderer);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = index_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=index.vue_vue_type_script_setup_true_lang.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/table/src/table-column/index.vue
|
||||
var table_column_default = require("./index.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = table_column_default;
|
||||
|
||||
//# sourceMappingURL=index2.js.map
|
||||
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+150
@@ -0,0 +1,150 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_error = require("../../../../utils/error.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_config = require("../config.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/table/src/table-column/render-helper.ts
|
||||
function useRender(props, slots, owner) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const columnId = (0, vue.ref)("");
|
||||
const isSubColumn = (0, vue.ref)(false);
|
||||
const realAlign = (0, vue.ref)();
|
||||
const realHeaderAlign = (0, vue.ref)();
|
||||
const ns = require_index.useNamespace("table");
|
||||
(0, vue.watchEffect)(() => {
|
||||
realAlign.value = props.align ? `is-${props.align}` : null;
|
||||
realAlign.value;
|
||||
});
|
||||
(0, vue.watchEffect)(() => {
|
||||
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
|
||||
realHeaderAlign.value;
|
||||
});
|
||||
const columnOrTableParent = (0, vue.computed)(() => {
|
||||
let parent = instance.vnode.vParent || instance.parent;
|
||||
while (parent && !parent.tableId && !parent.columnId) parent = parent.vnode.vParent || parent.parent;
|
||||
return parent;
|
||||
});
|
||||
const hasTreeColumn = (0, vue.computed)(() => {
|
||||
const { store } = instance.parent;
|
||||
if (!store) return false;
|
||||
const { treeData } = store.states;
|
||||
const treeDataValue = treeData.value;
|
||||
return treeDataValue && Object.keys(treeDataValue).length > 0;
|
||||
});
|
||||
const realWidth = (0, vue.ref)(require_util.parseWidth(props.width));
|
||||
const realMinWidth = (0, vue.ref)(require_util.parseMinWidth(props.minWidth));
|
||||
const setColumnWidth = (column) => {
|
||||
if (realWidth.value) column.width = realWidth.value;
|
||||
if (realMinWidth.value) column.minWidth = realMinWidth.value;
|
||||
if (!realWidth.value && realMinWidth.value) column.width = void 0;
|
||||
if (!column.minWidth) column.minWidth = 80;
|
||||
column.realWidth = Number(require_types.isUndefined(column.width) ? column.minWidth : column.width);
|
||||
return column;
|
||||
};
|
||||
const setColumnForcedProps = (column) => {
|
||||
const type = column.type;
|
||||
const source = require_config.cellForced[type] || {};
|
||||
Object.keys(source).forEach((prop) => {
|
||||
const value = source[prop];
|
||||
if (prop !== "className" && !require_types.isUndefined(value)) column[prop] = value;
|
||||
});
|
||||
const className = require_config.getDefaultClassName(type);
|
||||
if (className) {
|
||||
const forceClass = `${(0, vue.unref)(ns.namespace)}-${className}`;
|
||||
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
|
||||
}
|
||||
return column;
|
||||
};
|
||||
const checkSubColumn = (children) => {
|
||||
if ((0, _vue_shared.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) require_error.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 (require_util.ensureValidVNode(slotResult)) return (0, vue.h)(vue.Fragment, slotResult);
|
||||
}
|
||||
return (0, vue.createTextVNode)(column.label);
|
||||
};
|
||||
if (slots["filter-icon"]) column.renderFilterIcon = (scope) => {
|
||||
return (0, vue.renderSlot)(slots, "filter-icon", scope);
|
||||
};
|
||||
if (slots.expand) column.renderExpand = (scope) => {
|
||||
return (0, vue.renderSlot)(slots, "expand", scope);
|
||||
};
|
||||
let originRenderCell = column.renderCell;
|
||||
if (column.type === "expand") {
|
||||
column.renderCell = (data) => (0, vue.h)("div", { class: "cell" }, [originRenderCell(data)]);
|
||||
owner.value.renderExpanded = (row) => {
|
||||
return slots.default ? slots.default(row) : slots.default;
|
||||
};
|
||||
} else {
|
||||
originRenderCell = originRenderCell || require_config.defaultRenderCell;
|
||||
column.renderCell = (data) => {
|
||||
let children = null;
|
||||
if (slots.default) {
|
||||
const vnodes = slots.default(data);
|
||||
children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data);
|
||||
} else children = originRenderCell(data);
|
||||
const { columns } = owner.value.store.states;
|
||||
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
|
||||
const prefix = require_config.treeCellPrefix(data, hasTreeColumn.value && data.cellIndex === firstUserColumnIndex);
|
||||
const props = {
|
||||
class: "cell",
|
||||
style: {}
|
||||
};
|
||||
if (column.showOverflowTooltip) {
|
||||
props.class = `${props.class} ${(0, vue.unref)(ns.namespace)}-tooltip`;
|
||||
props.style = { width: `${(data.column.realWidth || Number(data.column.width)) - 1}px` };
|
||||
}
|
||||
checkSubColumn(children);
|
||||
return (0, vue.h)("div", props, [prefix, children]);
|
||||
};
|
||||
}
|
||||
return column;
|
||||
};
|
||||
const getPropsData = (...propsKey) => {
|
||||
return propsKey.reduce((prev, cur) => {
|
||||
if ((0, _vue_shared.isArray)(cur)) cur.forEach((key) => {
|
||||
prev[key] = props[key];
|
||||
});
|
||||
return prev;
|
||||
}, {});
|
||||
};
|
||||
const getColumnElIndex = (children, child) => {
|
||||
return Array.prototype.indexOf.call(children, child);
|
||||
};
|
||||
const updateColumnOrder = () => {
|
||||
owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
|
||||
};
|
||||
return {
|
||||
columnId,
|
||||
realAlign,
|
||||
isSubColumn,
|
||||
realHeaderAlign,
|
||||
columnOrTableParent,
|
||||
setColumnWidth,
|
||||
setColumnForcedProps,
|
||||
setColumnRenders,
|
||||
getPropsData,
|
||||
getColumnElIndex,
|
||||
updateColumnOrder
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useRender;
|
||||
|
||||
//# sourceMappingURL=render-helper.js.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
+92
@@ -0,0 +1,92 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_use_global_config = require("../../../config-provider/src/hooks/use-global-config.js");
|
||||
const require_util = require("../util.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#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 = (0, vue.getCurrentInstance)();
|
||||
const registerComplexWatchers = () => {
|
||||
const props = ["fixed"];
|
||||
const aliases = {
|
||||
realWidth: "width",
|
||||
realMinWidth: "minWidth"
|
||||
};
|
||||
const allAliases = getAllAliases(props, aliases);
|
||||
Object.keys(allAliases).forEach((key) => {
|
||||
const columnKey = aliases[key];
|
||||
if ((0, _vue_shared.hasOwn)(props_, columnKey)) (0, vue.watch)(() => props_[columnKey], (newVal) => {
|
||||
let value = newVal;
|
||||
if (columnKey === "width" && key === "realWidth") value = require_util.parseWidth(newVal);
|
||||
if (columnKey === "minWidth" && key === "realMinWidth") value = require_util.parseMinWidth(newVal);
|
||||
instance.columnConfig.value[columnKey] = value;
|
||||
instance.columnConfig.value[key] = value;
|
||||
const updateColumns = columnKey === "fixed";
|
||||
owner.value.store.scheduleLayout(updateColumns);
|
||||
});
|
||||
});
|
||||
};
|
||||
const registerNormalWatchers = () => {
|
||||
const props = [
|
||||
"label",
|
||||
"filters",
|
||||
"filterMultiple",
|
||||
"filteredValue",
|
||||
"sortable",
|
||||
"index",
|
||||
"formatter",
|
||||
"className",
|
||||
"labelClassName",
|
||||
"filterClassName",
|
||||
"showOverflowTooltip",
|
||||
"tooltipFormatter",
|
||||
"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 ((0, _vue_shared.hasOwn)(props_, columnKey)) (0, vue.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 ((0, _vue_shared.hasOwn)(owner.value.props, key)) (0, vue.watch)(() => owner.value.props[key], (newVal) => {
|
||||
if (instance.columnConfig.value.type === "selection") return;
|
||||
if (!require_types.isUndefined(props_[key])) return;
|
||||
instance.columnConfig.value[key] = newVal;
|
||||
});
|
||||
});
|
||||
const globalConfig = require_use_global_config.useGlobalConfig("table");
|
||||
if (globalConfig.value && (0, _vue_shared.hasOwn)(globalConfig.value, "showOverflowTooltip")) (0, vue.watch)(() => globalConfig.value?.showOverflowTooltip, (newVal) => {
|
||||
if (instance.columnConfig.value.type === "selection") return;
|
||||
if (!require_types.isUndefined(props_.showOverflowTooltip) || !require_types.isUndefined(owner.value.props.showOverflowTooltip)) return;
|
||||
instance.columnConfig.value.showOverflowTooltip = newVal;
|
||||
});
|
||||
};
|
||||
return {
|
||||
registerComplexWatchers,
|
||||
registerNormalWatchers
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useWatcher;
|
||||
|
||||
//# sourceMappingURL=watcher-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+93
@@ -0,0 +1,93 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_layout_observer = require("../layout-observer.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
const require_style_helper = require("./style-helper.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table-footer/index.ts
|
||||
var table_footer_default = (0, vue.defineComponent)({
|
||||
name: "ElTableFooter",
|
||||
props: {
|
||||
fixed: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
store: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
summaryMethod: Function,
|
||||
sumText: String,
|
||||
border: Boolean,
|
||||
defaultSort: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
prop: "",
|
||||
order: ""
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index.useNamespace("table");
|
||||
const { getCellClasses, getCellStyles, columns } = require_style_helper.default(props);
|
||||
const { onScrollableChange, onColumnsChange } = require_layout_observer.default(parent);
|
||||
return {
|
||||
ns,
|
||||
onScrollableChange,
|
||||
onColumnsChange,
|
||||
getCellClasses,
|
||||
getCellStyles,
|
||||
columns
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { columns, getCellStyles, getCellClasses, summaryMethod, sumText } = this;
|
||||
const data = this.store.states.data.value;
|
||||
let sums = [];
|
||||
if (summaryMethod) sums = summaryMethod({
|
||||
columns,
|
||||
data
|
||||
});
|
||||
else columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = sumText;
|
||||
return;
|
||||
}
|
||||
const values = data.map((item) => Number(item[column.property]));
|
||||
const precisions = [];
|
||||
let notNumber = true;
|
||||
values.forEach((value) => {
|
||||
if (!Number.isNaN(+value)) {
|
||||
notNumber = false;
|
||||
const decimal = `${value}`.split(".")[1];
|
||||
precisions.push(decimal ? decimal.length : 0);
|
||||
}
|
||||
});
|
||||
const precision = Math.max.apply(null, precisions);
|
||||
if (!notNumber) sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!Number.isNaN(+value)) return Number.parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
|
||||
else return prev;
|
||||
}, 0);
|
||||
else sums[index] = "";
|
||||
});
|
||||
return (0, vue.h)((0, vue.h)("tfoot", [(0, vue.h)("tr", {}, [...columns.map((column, cellIndex) => (0, vue.h)("td", {
|
||||
key: cellIndex,
|
||||
colspan: column.colSpan,
|
||||
rowspan: column.rowSpan,
|
||||
class: getCellClasses(columns, cellIndex),
|
||||
style: getCellStyles(column, cellIndex)
|
||||
}, [(0, vue.h)("div", { class: ["cell", column.labelClassName] }, [sums[cellIndex]])]))])]));
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = table_footer_default;
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+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
+33
@@ -0,0 +1,33 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table-footer/mapState-helper.ts
|
||||
function useMapState() {
|
||||
const store = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY)?.store;
|
||||
return {
|
||||
leftFixedLeafCount: (0, vue.computed)(() => {
|
||||
return store?.states.fixedLeafColumnsLength.value ?? 0;
|
||||
}),
|
||||
rightFixedLeafCount: (0, vue.computed)(() => {
|
||||
return store?.states.rightFixedColumns.value.length ?? 0;
|
||||
}),
|
||||
columnsCount: (0, vue.computed)(() => {
|
||||
return store?.states.columns.value.length ?? 0;
|
||||
}),
|
||||
leftFixedCount: (0, vue.computed)(() => {
|
||||
return store?.states.fixedColumns.value.length ?? 0;
|
||||
}),
|
||||
rightFixedCount: (0, vue.computed)(() => {
|
||||
return store?.states.rightFixedColumns.value.length ?? 0;
|
||||
}),
|
||||
columns: (0, vue.computed)(() => store?.states.columns.value ?? [])
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useMapState;
|
||||
|
||||
//# sourceMappingURL=mapState-helper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"mapState-helper.js","names":["TABLE_INJECTION_KEY"],"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,SAAA,GAAA,IAAA,QADeA,eAAAA,oBACF,EAAE;CAiBrB,OAAO;EACL,qBAAA,GAAA,IAAA,gBAjBwC;GACxC,OAAO,OAAO,OAAO,uBAAuB,SAAS;IAgBnC;EAClB,sBAAA,GAAA,IAAA,gBAfyC;GACzC,OAAO,OAAO,OAAO,kBAAkB,MAAM,UAAU;IAcpC;EACnB,eAAA,GAAA,IAAA,gBAbkC;GAClC,OAAO,OAAO,OAAO,QAAQ,MAAM,UAAU;IAYjC;EACZ,iBAAA,GAAA,IAAA,gBAXoC;GACpC,OAAO,OAAO,OAAO,aAAa,MAAM,UAAU;IAUpC;EACd,kBAAA,GAAA,IAAA,gBATqC;GACrC,OAAO,OAAO,OAAO,kBAAkB,MAAM,UAAU;IAQxC;EACf,UAAA,GAAA,IAAA,gBAAwB,OAAO,OAAO,QAAQ,SAAS,EAAE,CAAC;EAC3D"}
|
||||
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+40
@@ -0,0 +1,40 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_mapState_helper = require("./mapState-helper.js");
|
||||
//#region ../../packages/components/table/src/table-footer/style-helper.ts
|
||||
function useStyle(props) {
|
||||
const { columns } = require_mapState_helper.default();
|
||||
const ns = require_index.useNamespace("table");
|
||||
const getCellClasses = (columns, cellIndex) => {
|
||||
const column = columns[cellIndex];
|
||||
const classes = [
|
||||
ns.e("cell"),
|
||||
column.id,
|
||||
column.align,
|
||||
column.labelClassName,
|
||||
...require_util.getFixedColumnsClass(ns.b(), cellIndex, column.fixed, props.store)
|
||||
];
|
||||
if (column.className) classes.push(column.className);
|
||||
if (!column.children) classes.push(ns.is("leaf"));
|
||||
return classes;
|
||||
};
|
||||
const getCellStyles = (column, cellIndex) => {
|
||||
const fixedStyle = require_util.getFixedColumnOffset(cellIndex, column.fixed, props.store);
|
||||
require_util.ensurePosition(fixedStyle, "left");
|
||||
require_util.ensurePosition(fixedStyle, "right");
|
||||
return fixedStyle;
|
||||
};
|
||||
return {
|
||||
getCellClasses,
|
||||
getCellStyles,
|
||||
columns
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useStyle;
|
||||
|
||||
//# sourceMappingURL=style-helper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"style-helper.js","names":["useMapState","useNamespace","getFixedColumnsClass","getFixedColumnOffset"],"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,YAAYA,wBAAAA,SAAa;CACjC,MAAM,KAAKC,cAAAA,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,GAAGC,aAAAA,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,aAAaC,aAAAA,qBACjB,WACA,OAAO,OACP,MAAM,MACP;EACD,aAAA,eAAe,YAAY,OAAO;EAClC,aAAA,eAAe,YAAY,QAAQ;EACnC,OAAO;;CAGT,OAAO;EACL;EACA;EACA;EACD"}
|
||||
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+163
@@ -0,0 +1,163 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_style = require("../../../../utils/dom/style.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
//#region ../../packages/components/table/src/table-header/event-helper.ts
|
||||
function useEvent(props, emit) {
|
||||
const instance = (0, vue.getCurrentInstance)();
|
||||
const parent = (0, vue.inject)(require_tokens.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 = (0, vue.ref)(null);
|
||||
const dragging = (0, vue.ref)(false);
|
||||
const dragState = (0, vue.ref)();
|
||||
const handleMouseDown = (event, column) => {
|
||||
if (!_vueuse_core.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;
|
||||
require_style.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(() => {
|
||||
require_style.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 = require_types.isElement(el) ? el.closest("th") : null;
|
||||
if (!target) return;
|
||||
const isSortable = require_style.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 (!_vueuse_core.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 (require_style.hasClass(target, "noclick")) {
|
||||
require_style.removeClass(target, "noclick");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!column.sortable) return;
|
||||
const clickTarget = event.currentTarget;
|
||||
if (["ascending", "descending"].some((str) => require_style.hasClass(clickTarget, str) && !column.sortOrders.includes(str))) return;
|
||||
const states = props.store.states;
|
||||
let sortProp = states.sortProp.value;
|
||||
let sortOrder;
|
||||
const sortingColumn = states.sortingColumn.value;
|
||||
if (sortingColumn !== column || sortingColumn === column && (0, lodash_unified.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
|
||||
exports.default = useEvent;
|
||||
|
||||
//# sourceMappingURL=event-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
change: (val: CheckboxValueType) => void;
|
||||
}, _$vue.PublicProps, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}, false, {}, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, {}, any, _$vue.ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, Readonly<CheckboxProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & _$vue.ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
|
||||
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
|
||||
onChange?: ((val: CheckboxValueType) => any) | undefined;
|
||||
}>, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
||||
"update:modelValue": (val: CheckboxValueType) => void;
|
||||
change: (val: CheckboxValueType) => void;
|
||||
}, string, {
|
||||
name: string;
|
||||
id: string;
|
||||
disabled: boolean;
|
||||
modelValue: number | string | boolean;
|
||||
validateEvent: boolean;
|
||||
value: string | boolean | number | object;
|
||||
label: string | boolean | number | object;
|
||||
trueValue: string | number;
|
||||
falseValue: string | number;
|
||||
trueLabel: string | number;
|
||||
falseLabel: string | number;
|
||||
}, {}, string, {}, _$vue.GlobalComponents, _$vue.GlobalDirectives, string, _$vue.ComponentProvideOptions> & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps & (new () => {
|
||||
$slots: {
|
||||
default?: (props: {}) => any;
|
||||
};
|
||||
}) & _$vue.ObjectPlugin & {
|
||||
setPropsDefaults: (defaults: {
|
||||
readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
|
||||
readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
|
||||
readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
|
||||
readonly indeterminate?: boolean | (() => boolean) | undefined;
|
||||
readonly disabled?: boolean | (() => boolean) | undefined;
|
||||
readonly checked?: boolean | (() => boolean) | undefined;
|
||||
readonly name?: string | (() => string) | undefined;
|
||||
readonly trueValue?: string | number | (() => string | number) | undefined;
|
||||
readonly falseValue?: string | number | (() => string | number) | undefined;
|
||||
readonly trueLabel?: string | number | (() => string | number) | undefined;
|
||||
readonly falseLabel?: string | number | (() => string | number) | undefined;
|
||||
readonly id?: string | (() => string) | undefined;
|
||||
readonly border?: boolean | (() => boolean) | undefined;
|
||||
readonly size?: "" | "default" | "large" | "small" | (() => "" | "default" | "large" | "small") | 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 };
|
||||
Generated
Vendored
+181
@@ -0,0 +1,181 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_index$2 = require("../../../checkbox/index.js");
|
||||
const require_filter_panel = require("../filter-panel.js");
|
||||
const require_layout_observer = require("../layout-observer.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
const require_event_helper = require("./event-helper.js");
|
||||
const require_style_helper = require("./style.helper.js");
|
||||
const require_utils_helper = require("./utils-helper.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table-header/index.ts
|
||||
var table_header_default = (0, vue.defineComponent)({
|
||||
name: "ElTableHeader",
|
||||
components: { ElCheckbox: require_index$2.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 = (0, vue.getCurrentInstance)();
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index$1.useNamespace("table");
|
||||
const filterPanels = (0, vue.ref)({});
|
||||
const { onColumnsChange, onScrollableChange } = require_layout_observer.default(parent);
|
||||
const isTableLayoutAuto = parent?.props.tableLayout === "auto";
|
||||
const saveIndexSelection = (0, vue.reactive)(/* @__PURE__ */ new Map());
|
||||
const theadRef = (0, vue.ref)();
|
||||
let delayId;
|
||||
const updateFixedColumnStyle = () => {
|
||||
delayId = setTimeout(() => {
|
||||
if (saveIndexSelection.size > 0) {
|
||||
saveIndexSelection.forEach((column, key) => {
|
||||
const el = theadRef.value.querySelector(`.${key.replace(/\s/g, ".")}`);
|
||||
if (el) column.width = el.getBoundingClientRect().width || column.width;
|
||||
});
|
||||
saveIndexSelection.clear();
|
||||
}
|
||||
});
|
||||
};
|
||||
(0, vue.watch)(saveIndexSelection, updateFixedColumnStyle);
|
||||
(0, vue.onBeforeUnmount)(() => {
|
||||
if (delayId) {
|
||||
clearTimeout(delayId);
|
||||
delayId = void 0;
|
||||
}
|
||||
});
|
||||
(0, vue.onMounted)(async () => {
|
||||
await (0, vue.nextTick)();
|
||||
await (0, vue.nextTick)();
|
||||
const { prop, order } = props.defaultSort;
|
||||
parent?.store.commit("sort", {
|
||||
prop,
|
||||
order,
|
||||
init: true
|
||||
});
|
||||
updateFixedColumnStyle();
|
||||
});
|
||||
const { handleHeaderClick, handleHeaderContextMenu, handleMouseDown, handleMouseMove, handleMouseOut, handleSortClick, handleFilterClick } = require_event_helper.default(props, emit);
|
||||
const { getHeaderRowStyle, getHeaderRowClass, getHeaderCellStyle, getHeaderCellClass } = require_style_helper.default(props);
|
||||
const { isGroup, toggleAllSelection, columnRows } = require_utils_helper.default(props);
|
||||
const { t } = require_index.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 (0, vue.h)("thead", {
|
||||
ref: "theadRef",
|
||||
class: ns.is("group", isGroup)
|
||||
}, columnRows.map((subColumns, rowIndex) => (0, vue.h)("tr", {
|
||||
class: getHeaderRowClass(rowIndex),
|
||||
key: rowIndex,
|
||||
style: getHeaderRowStyle(rowIndex)
|
||||
}, subColumns.map((column, cellIndex) => {
|
||||
if (column.rowSpan > rowSpan) rowSpan = column.rowSpan;
|
||||
const _class = getHeaderCellClass(rowIndex, cellIndex, subColumns, column);
|
||||
if (isTableLayoutAuto && column.fixed) saveIndexSelection.set(_class, column);
|
||||
return (0, vue.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
|
||||
}, [(0, vue.h)("div", { class: ["cell", column.filteredValue && column.filteredValue.length > 0 ? "highlight" : ""] }, [
|
||||
column.renderHeader ? column.renderHeader({
|
||||
column,
|
||||
$index: cellIndex,
|
||||
store,
|
||||
_self: $parent
|
||||
}) : column.label,
|
||||
column.sortable && (0, vue.h)("button", {
|
||||
type: "button",
|
||||
class: "caret-wrapper",
|
||||
"aria-label": t("el.table.sortLabel", { column: column.label || "" }),
|
||||
onClick: ($event) => handleSortClick($event, column)
|
||||
}, [(0, vue.h)("i", {
|
||||
onClick: ($event) => handleSortClick($event, column, "ascending"),
|
||||
class: "sort-caret ascending"
|
||||
}), (0, vue.h)("i", {
|
||||
onClick: ($event) => handleSortClick($event, column, "descending"),
|
||||
class: "sort-caret descending"
|
||||
})]),
|
||||
column.filterable && (0, vue.h)(require_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
|
||||
exports.default = table_header_default;
|
||||
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+73
@@ -0,0 +1,73 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../../hooks/use-namespace/index.js");
|
||||
const require_util = require("../util.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/table/src/table-header/style.helper.ts
|
||||
function useStyle(props) {
|
||||
const parent = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const ns = require_index.useNamespace("table");
|
||||
const getHeaderRowStyle = (rowIndex) => {
|
||||
const headerRowStyle = parent?.props.headerRowStyle;
|
||||
if ((0, _vue_shared.isFunction)(headerRowStyle)) return headerRowStyle.call(null, { rowIndex });
|
||||
return headerRowStyle;
|
||||
};
|
||||
const getHeaderRowClass = (rowIndex) => {
|
||||
const classes = [];
|
||||
const headerRowClassName = parent?.props.headerRowClassName;
|
||||
if ((0, _vue_shared.isString)(headerRowClassName)) classes.push(headerRowClassName);
|
||||
else if ((0, _vue_shared.isFunction)(headerRowClassName)) classes.push(headerRowClassName.call(null, { rowIndex }));
|
||||
return classes.join(" ");
|
||||
};
|
||||
const getHeaderCellStyle = (rowIndex, columnIndex, row, column) => {
|
||||
let headerCellStyles = parent?.props.headerCellStyle ?? {};
|
||||
if ((0, _vue_shared.isFunction)(headerCellStyles)) headerCellStyles = headerCellStyles.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
});
|
||||
const fixedStyle = require_util.getFixedColumnOffset(columnIndex, column.fixed, props.store, row);
|
||||
require_util.ensurePosition(fixedStyle, "left");
|
||||
require_util.ensurePosition(fixedStyle, "right");
|
||||
return Object.assign({}, headerCellStyles, fixedStyle);
|
||||
};
|
||||
const getHeaderCellClass = (rowIndex, columnIndex, row, column) => {
|
||||
const fixedClasses = require_util.getFixedColumnsClass(ns.b(), columnIndex, column.fixed, props.store, row);
|
||||
const classes = [
|
||||
column.id,
|
||||
column.order,
|
||||
column.headerAlign,
|
||||
column.className,
|
||||
column.labelClassName,
|
||||
...fixedClasses
|
||||
];
|
||||
if (!column.children) classes.push("is-leaf");
|
||||
if (column.sortable) classes.push("is-sortable");
|
||||
const headerCellClassName = parent?.props.headerCellClassName;
|
||||
if ((0, _vue_shared.isString)(headerCellClassName)) classes.push(headerCellClassName);
|
||||
else if ((0, _vue_shared.isFunction)(headerCellClassName)) classes.push(headerCellClassName.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
}));
|
||||
classes.push(ns.e("cell"));
|
||||
return classes.filter((className) => Boolean(className)).join(" ");
|
||||
};
|
||||
return {
|
||||
getHeaderRowStyle,
|
||||
getHeaderRowClass,
|
||||
getHeaderCellStyle,
|
||||
getHeaderCellClass
|
||||
};
|
||||
}
|
||||
//#endregion
|
||||
exports.default = useStyle;
|
||||
|
||||
//# sourceMappingURL=style.helper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"style.helper.js","names":["TABLE_INJECTION_KEY","useNamespace","getFixedColumnOffset","getFixedColumnsClass"],"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,UAAA,GAAA,IAAA,QAAgBA,eAAAA,oBAAoB;CAC1C,MAAM,KAAKC,cAAAA,aAAa,QAAQ;CAEhC,MAAM,qBAAqB,aAAqB;EAC9C,MAAM,iBAAiB,QAAQ,MAAM;EACrC,KAAA,GAAA,YAAA,YAAe,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,KAAA,GAAA,YAAA,UAAa,mBAAmB,EAC9B,QAAQ,KAAK,mBAAmB;OAC3B,KAAA,GAAA,YAAA,YAAe,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,KAAA,GAAA,YAAA,YAAe,iBAAiB,EAC9B,mBAAmB,iBAAiB,KAAK,MAAM;GAC7C;GACA;GACA;GACA;GACD,CAAC;EAEJ,MAAM,aAAaC,aAAAA,qBACjB,aACA,OAAO,OACP,MAAM,OACN,IACD;EACD,aAAA,eAAe,YAAY,OAAO;EAClC,aAAA,eAAe,YAAY,QAAQ;EACnC,OAAO,OAAO,OAAO,EAAE,EAAE,kBAAkB,WAAW;;CAGxD,MAAM,sBACJ,UACA,aACA,KACA,WACG;EACH,MAAM,eAAeC,aAAAA,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,KAAA,GAAA,YAAA,UAAa,oBAAoB,EAC/B,QAAQ,KAAK,oBAAoB;OAC5B,KAAA,GAAA,YAAA,YAAe,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"}
|
||||
Generated
Vendored
+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 };
|
||||
Generated
Vendored
+75
@@ -0,0 +1,75 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_tokens = require("../tokens.js");
|
||||
let vue = require("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 = (0, vue.inject)(require_tokens.TABLE_INJECTION_KEY);
|
||||
const columnRows = (0, vue.computed)(() => {
|
||||
return convertToRows(props.store.states.originColumns.value);
|
||||
});
|
||||
const isGroup = (0, vue.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
|
||||
exports.convertToRows = convertToRows;
|
||||
exports.default = useUtils;
|
||||
|
||||
//# sourceMappingURL=utils-helper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"utils-helper.js","names":["TABLE_INJECTION_KEY"],"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,UAAA,GAAA,IAAA,QAAgBA,eAAAA,oBAAoB;CAC1C,MAAM,cAAA,GAAA,IAAA,gBAA4B;EAChC,OAAO,cAAc,MAAM,MAAM,OAAO,cAAc,MAAM;GAC5D;CACF,MAAM,WAAA,GAAA,IAAA,gBAAyB;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 };
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../utils/types.js");
|
||||
const require_util = require("./util.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
let _vueuse_core = require("@vueuse/core");
|
||||
//#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 = (0, vue.ref)(null);
|
||||
this.scrollX = (0, vue.ref)(false);
|
||||
this.scrollY = (0, vue.ref)(false);
|
||||
this.bodyWidth = (0, vue.ref)(null);
|
||||
this.fixedWidth = (0, vue.ref)(null);
|
||||
this.rightFixedWidth = (0, vue.ref)(null);
|
||||
this.gutterWidth = 0;
|
||||
for (const name in options) if ((0, _vue_shared.hasOwn)(options, name)) if ((0, vue.isRef)(this[name])) this[name].value = options[name];
|
||||
else this[name] = options[name];
|
||||
if (!this.table) throw new Error("Table is required for Table Layout");
|
||||
if (!this.store) throw new Error("Store is required for Table Layout");
|
||||
}
|
||||
updateScrollY() {
|
||||
const height = this.height.value;
|
||||
/**
|
||||
* 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 ((0, lodash_unified.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 (!_vueuse_core.isClient) return;
|
||||
const el = this.table.vnode.el;
|
||||
value = require_util.parseHeight(value);
|
||||
this.height.value = Number(value);
|
||||
this.heightMap[prop] = value;
|
||||
if (!el && (value || value === 0)) {
|
||||
(0, vue.nextTick)(() => {
|
||||
if (this.heightMap[prop] === value) this.setHeight(value, prop);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (el && require_types.isNumber(value)) {
|
||||
el.style[prop] = `${value}px`;
|
||||
this.updateElsHeight();
|
||||
} else if (el && (0, _vue_shared.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 (!_vueuse_core.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) => !require_types.isNumber(column.width));
|
||||
flattenColumns.forEach((column) => {
|
||||
if (require_types.isNumber(column.width) && column.realWidth) column.realWidth = null;
|
||||
});
|
||||
if (flexColumns.length > 0 && fit) {
|
||||
flattenColumns.forEach((column) => {
|
||||
bodyMinWidth += Number(column.width || column.minWidth || 80);
|
||||
});
|
||||
if (bodyMinWidth <= bodyWidth) {
|
||||
this.scrollX.value = false;
|
||||
const totalFlexWidth = bodyWidth - bodyMinWidth;
|
||||
if (flexColumns.length === 1) flexColumns[0].realWidth = Number(flexColumns[0].minWidth || 80) + totalFlexWidth;
|
||||
else {
|
||||
const 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
|
||||
exports.default = TableLayout;
|
||||
|
||||
//# sourceMappingURL=table-layout.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+10
@@ -0,0 +1,10 @@
|
||||
Object.defineProperties(exports, {
|
||||
__esModule: { value: true },
|
||||
[Symbol.toStringTag]: { value: "Module" }
|
||||
});
|
||||
//#region ../../packages/components/table/src/table.vue
|
||||
var table_default = require("./table.vue_vue_type_script_setup_true_lang.js").default;
|
||||
//#endregion
|
||||
exports.default = table_default;
|
||||
|
||||
//# sourceMappingURL=table.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+745
@@ -0,0 +1,745 @@
|
||||
import { Translator } from "../../../hooks/use-locale/index.js";
|
||||
import { UseTooltipProps } from "../../tooltip/src/tooltip.js";
|
||||
import { TreeData } from "./store/tree.js";
|
||||
import { TableColumnCtx } from "./table-column/defaults.js";
|
||||
import { StoreFilter } from "./store/index.js";
|
||||
import TableLayout from "./table-layout.js";
|
||||
import { DefaultRow, Filter, RenderExpanded, Sort, Table, TableEmits, TableProps, TableSortOrder } from "./table/defaults.js";
|
||||
import * as _$vue from "vue";
|
||||
import * as _$lodash_unified0 from "lodash-unified";
|
||||
|
||||
//#region ../../packages/components/table/src/table.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<TableProps<T> & {
|
||||
onScroll?: ((data: {
|
||||
scrollLeft: number;
|
||||
scrollTop: number;
|
||||
}) => any) | undefined;
|
||||
"onSelect-all"?: ((selection: T[]) => any) | undefined;
|
||||
onSelect?: ((selection: T[], row: T) => any) | undefined;
|
||||
"onExpand-change"?: ((row: T, expanded: boolean) => any) | undefined;
|
||||
"onCurrent-change"?: ((currentRow: T | null, oldCurrentRow: T | null) => any) | undefined;
|
||||
"onSelection-change"?: ((newSelection: T[]) => any) | undefined;
|
||||
"onCell-mouse-enter"?: ((row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: MouseEvent) => any) | undefined;
|
||||
"onCell-mouse-leave"?: ((row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: MouseEvent) => any) | undefined;
|
||||
"onCell-dblclick"?: ((row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: MouseEvent) => any) | undefined;
|
||||
"onCell-contextmenu"?: ((row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: PointerEvent) => any) | undefined;
|
||||
"onCell-click"?: ((row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: PointerEvent) => any) | undefined;
|
||||
"onRow-dblclick"?: ((row: T, column: TableColumnCtx<T> | null, event: MouseEvent) => any) | undefined;
|
||||
"onRow-click"?: ((row: T, column: TableColumnCtx<T> | null, event: PointerEvent) => any) | undefined;
|
||||
"onRow-contextmenu"?: ((row: T, column: TableColumnCtx<T> | null, event: PointerEvent) => any) | undefined;
|
||||
"onHeader-click"?: ((column: TableColumnCtx<T>, event: PointerEvent) => any) | undefined;
|
||||
"onHeader-contextmenu"?: ((column: TableColumnCtx<T>, event: PointerEvent) => any) | undefined;
|
||||
"onSort-change"?: ((data: {
|
||||
column: TableColumnCtx<T>;
|
||||
prop: string | null;
|
||||
order: TableSortOrder | null;
|
||||
}) => any) | undefined;
|
||||
"onFilter-change"?: ((newFilters: Record<string, string[]>) => any) | undefined;
|
||||
"onHeader-dragend"?: ((newWidth: number, oldWidth: number, column: TableColumnCtx<T>, event: MouseEvent) => any) | undefined;
|
||||
}> & (typeof globalThis extends {
|
||||
__VLS_PROPS_FALLBACK: infer P;
|
||||
} ? P : {});
|
||||
expose: (exposed: _$vue.ShallowUnwrapRef<{
|
||||
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;
|
||||
};
|
||||
layout: TableLayout<T>;
|
||||
store: {
|
||||
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;
|
||||
};
|
||||
columns: _$vue.ComputedRef<TableColumnCtx<T>[]>;
|
||||
handleHeaderFooterMousewheel: (_event: WheelEvent, data: any) => void;
|
||||
handleMouseLeave: () => void;
|
||||
tableId: string;
|
||||
tableSize: _$vue.ComputedRef<"" | "default" | "large" | "small">;
|
||||
isHidden: _$vue.Ref<boolean, boolean>;
|
||||
isEmpty: _$vue.ComputedRef<boolean>;
|
||||
renderExpanded: _$vue.Ref<RenderExpanded<T> | null, RenderExpanded<T> | null>;
|
||||
resizeProxyVisible: _$vue.Ref<boolean, boolean>;
|
||||
resizeState: _$vue.Ref<{
|
||||
width: null | number;
|
||||
height: null | number;
|
||||
headerHeight: null | number;
|
||||
}, {
|
||||
width: null | number;
|
||||
height: null | number;
|
||||
headerHeight: null | number;
|
||||
} | {
|
||||
width: null | number;
|
||||
height: null | number;
|
||||
headerHeight: null | number;
|
||||
}>;
|
||||
isGroup: _$vue.Ref<boolean, boolean>;
|
||||
bodyWidth: _$vue.ComputedRef<string>;
|
||||
tableBodyStyles: _$vue.ComputedRef<{
|
||||
width: string;
|
||||
}>;
|
||||
emptyBlockStyle: _$vue.ComputedRef<{
|
||||
width: string;
|
||||
height: string;
|
||||
} | undefined>;
|
||||
debouncedUpdateLayout: _$lodash_unified0.DebouncedFunc<() => void>;
|
||||
/**
|
||||
* @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection
|
||||
*/
|
||||
setCurrentRow: (row?: T | undefined) => void;
|
||||
/**
|
||||
* @description returns the currently selected rows
|
||||
*/
|
||||
getSelectionRows: () => T[];
|
||||
/**
|
||||
* @description returns the currently half-selected rows
|
||||
*/
|
||||
getHalfSelectionRows: () => T[];
|
||||
/**
|
||||
* @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected
|
||||
*/
|
||||
toggleRowSelection: (row: T, selected?: boolean, ignoreSelectable?: boolean) => void;
|
||||
/**
|
||||
* @description used in multiple selection Table, clear user selection
|
||||
*/
|
||||
clearSelection: () => void;
|
||||
/**
|
||||
* @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters
|
||||
*/
|
||||
clearFilter: (columnKeys?: string[] | string) => void;
|
||||
/**
|
||||
* @description used in multiple selection Table, toggle select all and deselect all
|
||||
*/
|
||||
toggleAllSelection: () => void;
|
||||
/**
|
||||
* @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed
|
||||
*/
|
||||
toggleRowExpansion: (row: T, expanded?: boolean) => void;
|
||||
/**
|
||||
* @description clear sorting, restore data to the original order
|
||||
*/
|
||||
clearSort: () => void;
|
||||
/**
|
||||
* @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout
|
||||
*/
|
||||
doLayout: () => void;
|
||||
/**
|
||||
* @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order
|
||||
*/
|
||||
sort: (prop: string, order: string) => void;
|
||||
/**
|
||||
* @description used in lazy Table, must set `rowKey`, update key children
|
||||
*/
|
||||
updateKeyChildren: (key: string, data: T[]) => void;
|
||||
t: Translator;
|
||||
setDragVisible: (visible: boolean) => void;
|
||||
context: Table<T>;
|
||||
computedSumText: _$vue.ComputedRef<string>;
|
||||
computedEmptyText: _$vue.ComputedRef<string>;
|
||||
computedTooltipEffect: _$vue.ComputedRef<string | undefined>;
|
||||
computedTooltipOptions: _$vue.ComputedRef<Partial<Omit<UseTooltipProps, "visible" | "content" | "autoClose" | "referenceEl" | "triggerTargetEl" | "virtualTriggering" | "rawContent" | "persistent" | "virtualRef">> | undefined>;
|
||||
tableLayout: _$vue.ComputedRef<"fixed" | "auto">;
|
||||
scrollbarViewStyle: {
|
||||
display: string;
|
||||
verticalAlign: string;
|
||||
};
|
||||
scrollbarStyle: _$vue.ComputedRef<{
|
||||
height: string;
|
||||
maxHeight?: undefined;
|
||||
} | {
|
||||
maxHeight: string;
|
||||
height?: undefined;
|
||||
} | {
|
||||
height?: undefined;
|
||||
maxHeight?: undefined;
|
||||
}>;
|
||||
scrollBarRef: _$vue.Ref<any, any>;
|
||||
/**
|
||||
* @description scrolls to a particular set of coordinates
|
||||
*/
|
||||
scrollTo: (options: ScrollToOptions | number, yCoord?: number) => void;
|
||||
/**
|
||||
* @description set horizontal scroll position
|
||||
*/
|
||||
setScrollLeft: (left?: number) => void;
|
||||
/**
|
||||
* @description set vertical scroll position
|
||||
*/
|
||||
setScrollTop: (top?: number) => void;
|
||||
/**
|
||||
* @description whether to allow drag the last column
|
||||
*/
|
||||
allowDragLastColumn: boolean;
|
||||
}>) => void;
|
||||
attrs: any;
|
||||
slots: {
|
||||
default?: (props: {}) => any;
|
||||
} & {
|
||||
empty?: (props: {}) => any;
|
||||
} & {
|
||||
append?: (props: {}) => any;
|
||||
};
|
||||
emit: TableEmits<T>;
|
||||
}>) => _$vue.VNode & {
|
||||
__ctx?: 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
+397
@@ -0,0 +1,397 @@
|
||||
require("../../../_virtual/_rolldown/runtime.js");
|
||||
const require_index = require("../../../hooks/use-locale/index.js");
|
||||
const require_index$1 = require("../../../hooks/use-namespace/index.js");
|
||||
const require_index$2 = require("../../scrollbar/index.js");
|
||||
const require_use_global_config = require("../../config-provider/src/hooks/use-global-config.js");
|
||||
const require_index$3 = require("../../../directives/mousewheel/index.js");
|
||||
const require_defaults = require("./table/defaults.js");
|
||||
const require_util = require("./util.js");
|
||||
const require_helper = require("./store/helper.js");
|
||||
const require_table_layout = require("./table-layout.js");
|
||||
const require_tokens = require("./tokens.js");
|
||||
const require_utils_helper = require("./table-header/utils-helper.js");
|
||||
const require_index$4 = require("./table-header/index.js");
|
||||
const require_index$5 = require("./table-body/index.js");
|
||||
const require_index$6 = require("./table-footer/index.js");
|
||||
const require_utils_helper$1 = require("./table/utils-helper.js");
|
||||
const require_style_helper = require("./table/style-helper.js");
|
||||
const require_key_render_helper = require("./table/key-render-helper.js");
|
||||
const require_h_helper = require("./h-helper.js");
|
||||
const require_use_scrollbar = require("./composables/use-scrollbar.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/table/src/table.vue?vue&type=script&setup=true&lang.ts
|
||||
const _hoisted_1 = ["data-prefix"];
|
||||
const _hoisted_2 = {
|
||||
ref: "hiddenColumns",
|
||||
class: "hidden-columns"
|
||||
};
|
||||
var table_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
||||
name: "ElTable",
|
||||
__name: "table",
|
||||
props: require_defaults.default,
|
||||
emits: [
|
||||
"select",
|
||||
"select-all",
|
||||
"selection-change",
|
||||
"cell-mouse-enter",
|
||||
"cell-mouse-leave",
|
||||
"cell-dblclick",
|
||||
"cell-contextmenu",
|
||||
"cell-click",
|
||||
"row-dblclick",
|
||||
"row-click",
|
||||
"row-contextmenu",
|
||||
"header-click",
|
||||
"header-contextmenu",
|
||||
"sort-change",
|
||||
"filter-change",
|
||||
"current-change",
|
||||
"header-dragend",
|
||||
"expand-change",
|
||||
"scroll"
|
||||
],
|
||||
setup(__props, { expose: __expose }) {
|
||||
const props = __props;
|
||||
const { t } = require_index.useLocale();
|
||||
const ns = require_index$1.useNamespace("table");
|
||||
const globalConfig = require_use_global_config.useGlobalConfig("table");
|
||||
const table = (0, vue.getCurrentInstance)();
|
||||
(0, vue.provide)(require_tokens.TABLE_INJECTION_KEY, table);
|
||||
const store = require_helper.createStore(table, props);
|
||||
table.store = store;
|
||||
const layout = new require_table_layout.default({
|
||||
store: table.store,
|
||||
table,
|
||||
fit: props.fit,
|
||||
showHeader: props.showHeader
|
||||
});
|
||||
table.layout = layout;
|
||||
const isEmpty = (0, vue.computed)(() => (store.states.data.value || []).length === 0);
|
||||
/**
|
||||
* open functions
|
||||
*/
|
||||
const { setCurrentRow, getSelectionRows, getHalfSelectionRows, toggleRowSelection, clearSelection, clearFilter, toggleAllSelection, toggleRowExpansion, clearSort, sort, updateKeyChildren } = require_utils_helper$1.default(store);
|
||||
const { isHidden, renderExpanded, setDragVisible, isGroup, handleMouseLeave, handleHeaderFooterMousewheel, tableSize, emptyBlockStyle, resizeProxyVisible, bodyWidth, resizeState, doLayout, tableBodyStyles, tableLayout, scrollbarViewStyle, scrollbarStyle } = require_style_helper.default(props, layout, store, table);
|
||||
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = require_use_scrollbar.useScrollbar();
|
||||
const debouncedUpdateLayout = (0, lodash_unified.debounce)(doLayout, 50);
|
||||
const tableId = require_util.createTableId(ns.namespace.value);
|
||||
const context = table;
|
||||
table.tableId = tableId;
|
||||
table.state = {
|
||||
isGroup,
|
||||
resizeState,
|
||||
doLayout,
|
||||
debouncedUpdateLayout
|
||||
};
|
||||
const computedSumText = (0, vue.computed)(() => props.sumText ?? t("el.table.sumText"));
|
||||
const computedEmptyText = (0, vue.computed)(() => {
|
||||
return props.emptyText ?? t("el.table.emptyText");
|
||||
});
|
||||
const computedTooltipEffect = (0, vue.computed)(() => props.tooltipEffect ?? globalConfig.value?.tooltipEffect);
|
||||
const computedTooltipOptions = (0, vue.computed)(() => props.tooltipOptions ?? globalConfig.value?.tooltipOptions);
|
||||
const columns = (0, vue.computed)(() => {
|
||||
return require_utils_helper.convertToRows(store.states.originColumns.value)[0];
|
||||
});
|
||||
require_key_render_helper.default(table);
|
||||
(0, vue.onBeforeUnmount)(() => {
|
||||
debouncedUpdateLayout.cancel();
|
||||
});
|
||||
__expose({
|
||||
ns,
|
||||
layout,
|
||||
store,
|
||||
columns,
|
||||
handleHeaderFooterMousewheel,
|
||||
handleMouseLeave,
|
||||
tableId,
|
||||
tableSize,
|
||||
isHidden,
|
||||
isEmpty,
|
||||
renderExpanded,
|
||||
resizeProxyVisible,
|
||||
resizeState,
|
||||
isGroup,
|
||||
bodyWidth,
|
||||
tableBodyStyles,
|
||||
emptyBlockStyle,
|
||||
debouncedUpdateLayout,
|
||||
/**
|
||||
* @description used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection
|
||||
*/
|
||||
setCurrentRow,
|
||||
/**
|
||||
* @description returns the currently selected rows
|
||||
*/
|
||||
getSelectionRows,
|
||||
/**
|
||||
* @description returns the currently half-selected rows
|
||||
*/
|
||||
getHalfSelectionRows,
|
||||
/**
|
||||
* @description used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected
|
||||
*/
|
||||
toggleRowSelection,
|
||||
/**
|
||||
* @description used in multiple selection Table, clear user selection
|
||||
*/
|
||||
clearSelection,
|
||||
/**
|
||||
* @description clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters
|
||||
*/
|
||||
clearFilter,
|
||||
/**
|
||||
* @description used in multiple selection Table, toggle select all and deselect all
|
||||
*/
|
||||
toggleAllSelection,
|
||||
/**
|
||||
* @description used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed
|
||||
*/
|
||||
toggleRowExpansion,
|
||||
/**
|
||||
* @description clear sorting, restore data to the original order
|
||||
*/
|
||||
clearSort,
|
||||
/**
|
||||
* @description refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout
|
||||
*/
|
||||
doLayout,
|
||||
/**
|
||||
* @description sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order
|
||||
*/
|
||||
sort,
|
||||
/**
|
||||
* @description used in lazy Table, must set `rowKey`, update key children
|
||||
*/
|
||||
updateKeyChildren,
|
||||
t,
|
||||
setDragVisible,
|
||||
context,
|
||||
computedSumText,
|
||||
computedEmptyText,
|
||||
computedTooltipEffect,
|
||||
computedTooltipOptions,
|
||||
tableLayout,
|
||||
scrollbarViewStyle,
|
||||
scrollbarStyle,
|
||||
scrollBarRef,
|
||||
/**
|
||||
* @description scrolls to a particular set of coordinates
|
||||
*/
|
||||
scrollTo,
|
||||
/**
|
||||
* @description set horizontal scroll position
|
||||
*/
|
||||
setScrollLeft,
|
||||
/**
|
||||
* @description set vertical scroll position
|
||||
*/
|
||||
setScrollTop,
|
||||
/**
|
||||
* @description whether to allow drag the last column
|
||||
*/
|
||||
allowDragLastColumn: props.allowDragLastColumn
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
ref: "tableWrapper",
|
||||
class: (0, vue.normalizeClass)([
|
||||
{
|
||||
[(0, vue.unref)(ns).m("fit")]: __props.fit,
|
||||
[(0, vue.unref)(ns).m("striped")]: __props.stripe,
|
||||
[(0, vue.unref)(ns).m("border")]: __props.border || (0, vue.unref)(isGroup),
|
||||
[(0, vue.unref)(ns).m("hidden")]: (0, vue.unref)(isHidden),
|
||||
[(0, vue.unref)(ns).m("group")]: (0, vue.unref)(isGroup),
|
||||
[(0, vue.unref)(ns).m("fluid-height")]: __props.maxHeight,
|
||||
[(0, vue.unref)(ns).m("scrollable-x")]: (0, vue.unref)(layout).scrollX.value,
|
||||
[(0, vue.unref)(ns).m("scrollable-y")]: (0, vue.unref)(layout).scrollY.value,
|
||||
[(0, vue.unref)(ns).m("enable-row-hover")]: !(0, vue.unref)(store).states.isComplex.value,
|
||||
[(0, vue.unref)(ns).m("enable-row-transition")]: ((0, vue.unref)(store).states.data.value || []).length !== 0 && ((0, vue.unref)(store).states.data.value || []).length < 100,
|
||||
"has-footer": __props.showSummary
|
||||
},
|
||||
(0, vue.unref)(ns).m((0, vue.unref)(tableSize)),
|
||||
__props.className,
|
||||
(0, vue.unref)(ns).b(),
|
||||
(0, vue.unref)(ns).m(`layout-${(0, vue.unref)(tableLayout)}`)
|
||||
]),
|
||||
style: (0, vue.normalizeStyle)(__props.style),
|
||||
"data-prefix": (0, vue.unref)(ns).namespace.value,
|
||||
onMouseleave: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(handleMouseLeave) && (0, vue.unref)(handleMouseLeave)(...args))
|
||||
}, [(0, vue.createElementVNode)("div", {
|
||||
ref: "tableInnerWrapper",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("inner-wrapper"))
|
||||
}, [
|
||||
(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.renderSlot)(_ctx.$slots, "default")], 512),
|
||||
__props.showHeader && (0, vue.unref)(tableLayout) === "fixed" ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
ref: "headerWrapper",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("header-wrapper"))
|
||||
}, [(0, vue.createElementVNode)("table", {
|
||||
ref: "tableHeader",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("header")),
|
||||
style: (0, vue.normalizeStyle)((0, vue.unref)(tableBodyStyles)),
|
||||
border: "0",
|
||||
cellpadding: "0",
|
||||
cellspacing: "0"
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_h_helper.hColgroup), {
|
||||
columns: (0, vue.unref)(store).states.columns.value,
|
||||
"table-layout": (0, vue.unref)(tableLayout)
|
||||
}, null, 8, ["columns", "table-layout"]), (0, vue.createVNode)((0, vue.unref)(require_index$4.default), {
|
||||
ref: "tableHeaderRef",
|
||||
border: __props.border,
|
||||
"default-sort": __props.defaultSort,
|
||||
store: (0, vue.unref)(store),
|
||||
"append-filter-panel-to": __props.appendFilterPanelTo,
|
||||
"allow-drag-last-column": __props.allowDragLastColumn,
|
||||
onSetDragVisible: (0, vue.unref)(setDragVisible)
|
||||
}, null, 8, [
|
||||
"border",
|
||||
"default-sort",
|
||||
"store",
|
||||
"append-filter-panel-to",
|
||||
"allow-drag-last-column",
|
||||
"onSetDragVisible"
|
||||
])], 6)], 2)), [[(0, vue.unref)(require_index$3.default), (0, vue.unref)(handleHeaderFooterMousewheel)]]) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createElementVNode)("div", {
|
||||
ref: "bodyWrapper",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body-wrapper"))
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_index$2.ElScrollbar), {
|
||||
ref_key: "scrollBarRef",
|
||||
ref: scrollBarRef,
|
||||
"view-style": (0, vue.unref)(scrollbarViewStyle),
|
||||
"wrap-style": (0, vue.unref)(scrollbarStyle),
|
||||
always: __props.scrollbarAlwaysOn,
|
||||
tabindex: __props.scrollbarTabindex,
|
||||
native: __props.nativeScrollbar,
|
||||
onScroll: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("scroll", $event))
|
||||
}, {
|
||||
default: (0, vue.withCtx)(() => [
|
||||
(0, vue.createElementVNode)("table", {
|
||||
ref: "tableBody",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body")),
|
||||
cellspacing: "0",
|
||||
cellpadding: "0",
|
||||
border: "0",
|
||||
style: (0, vue.normalizeStyle)({
|
||||
width: (0, vue.unref)(bodyWidth),
|
||||
tableLayout: (0, vue.unref)(tableLayout)
|
||||
})
|
||||
}, [
|
||||
(0, vue.createVNode)((0, vue.unref)(require_h_helper.hColgroup), {
|
||||
columns: (0, vue.unref)(store).states.columns.value,
|
||||
"table-layout": (0, vue.unref)(tableLayout)
|
||||
}, null, 8, ["columns", "table-layout"]),
|
||||
__props.showHeader && (0, vue.unref)(tableLayout) === "auto" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$4.default), {
|
||||
key: 0,
|
||||
ref: "tableHeaderRef",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body-header")),
|
||||
border: __props.border,
|
||||
"default-sort": __props.defaultSort,
|
||||
store: (0, vue.unref)(store),
|
||||
"append-filter-panel-to": __props.appendFilterPanelTo,
|
||||
onSetDragVisible: (0, vue.unref)(setDragVisible)
|
||||
}, null, 8, [
|
||||
"class",
|
||||
"border",
|
||||
"default-sort",
|
||||
"store",
|
||||
"append-filter-panel-to",
|
||||
"onSetDragVisible"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true),
|
||||
(0, vue.createVNode)((0, vue.unref)(require_index$5.default), {
|
||||
context: (0, vue.unref)(context),
|
||||
highlight: __props.highlightCurrentRow,
|
||||
"row-class-name": __props.rowClassName,
|
||||
"tooltip-effect": computedTooltipEffect.value,
|
||||
"tooltip-options": computedTooltipOptions.value,
|
||||
"row-style": __props.rowStyle,
|
||||
store: (0, vue.unref)(store),
|
||||
stripe: __props.stripe
|
||||
}, null, 8, [
|
||||
"context",
|
||||
"highlight",
|
||||
"row-class-name",
|
||||
"tooltip-effect",
|
||||
"tooltip-options",
|
||||
"row-style",
|
||||
"store",
|
||||
"stripe"
|
||||
]),
|
||||
__props.showSummary && (0, vue.unref)(tableLayout) === "auto" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$6.default), {
|
||||
key: 1,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("body-footer")),
|
||||
border: __props.border,
|
||||
"default-sort": __props.defaultSort,
|
||||
store: (0, vue.unref)(store),
|
||||
"sum-text": computedSumText.value,
|
||||
"summary-method": __props.summaryMethod
|
||||
}, null, 8, [
|
||||
"class",
|
||||
"border",
|
||||
"default-sort",
|
||||
"store",
|
||||
"sum-text",
|
||||
"summary-method"
|
||||
])) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 6),
|
||||
isEmpty.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 0,
|
||||
ref: "emptyBlock",
|
||||
style: (0, vue.normalizeStyle)((0, vue.unref)(emptyBlockStyle)),
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("empty-block"))
|
||||
}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("empty-text")) }, [(0, vue.renderSlot)(_ctx.$slots, "empty", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(computedEmptyText.value), 1)])], 2)], 6)) : (0, vue.createCommentVNode)("v-if", true),
|
||||
_ctx.$slots.append ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 1,
|
||||
ref: "appendWrapper",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("append-wrapper"))
|
||||
}, [(0, vue.renderSlot)(_ctx.$slots, "append")], 2)) : (0, vue.createCommentVNode)("v-if", true)
|
||||
]),
|
||||
_: 3
|
||||
}, 8, [
|
||||
"view-style",
|
||||
"wrap-style",
|
||||
"always",
|
||||
"tabindex",
|
||||
"native"
|
||||
])], 2),
|
||||
__props.showSummary && (0, vue.unref)(tableLayout) === "fixed" ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 1,
|
||||
ref: "footerWrapper",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("footer-wrapper"))
|
||||
}, [(0, vue.createElementVNode)("table", {
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("footer")),
|
||||
cellspacing: "0",
|
||||
cellpadding: "0",
|
||||
border: "0",
|
||||
style: (0, vue.normalizeStyle)((0, vue.unref)(tableBodyStyles))
|
||||
}, [(0, vue.createVNode)((0, vue.unref)(require_h_helper.hColgroup), {
|
||||
columns: (0, vue.unref)(store).states.columns.value,
|
||||
"table-layout": (0, vue.unref)(tableLayout)
|
||||
}, null, 8, ["columns", "table-layout"]), (0, vue.createVNode)((0, vue.unref)(require_index$6.default), {
|
||||
border: __props.border,
|
||||
"default-sort": __props.defaultSort,
|
||||
store: (0, vue.unref)(store),
|
||||
"sum-text": computedSumText.value,
|
||||
"summary-method": __props.summaryMethod
|
||||
}, null, 8, [
|
||||
"border",
|
||||
"default-sort",
|
||||
"store",
|
||||
"sum-text",
|
||||
"summary-method"
|
||||
])], 6)], 2)), [[vue.vShow, !isEmpty.value], [(0, vue.unref)(require_index$3.default), (0, vue.unref)(handleHeaderFooterMousewheel)]]) : (0, vue.createCommentVNode)("v-if", true),
|
||||
__props.border || (0, vue.unref)(isGroup) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
||||
key: 2,
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("border-left-patch"))
|
||||
}, null, 2)) : (0, vue.createCommentVNode)("v-if", true)
|
||||
], 2), (0, vue.withDirectives)((0, vue.createElementVNode)("div", {
|
||||
ref: "resizeProxy",
|
||||
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("column-resize-proxy"))
|
||||
}, null, 2), [[vue.vShow, (0, vue.unref)(resizeProxyVisible)]])], 46, _hoisted_1);
|
||||
};
|
||||
}
|
||||
});
|
||||
//#endregion
|
||||
exports.default = table_vue_vue_type_script_setup_true_lang_default;
|
||||
|
||||
//# sourceMappingURL=table.vue_vue_type_script_setup_true_lang.js.map
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user