增加admin管理帐号和项目的界面--初步实现
This commit is contained in:
Cheng Zhou
Generated
Vendored
+39
@@ -0,0 +1,39 @@
|
||||
import type { PropType } from 'vue';
|
||||
import type { Store } from '../store';
|
||||
import type { ColumnCls, ColumnStyle, DefaultRow, Table } from '../table/defaults';
|
||||
import type { TableOverflowTooltipOptions } from '../util';
|
||||
interface TableBodyProps<T extends DefaultRow> {
|
||||
store: Store<T>;
|
||||
stripe?: boolean;
|
||||
context: Table<T>;
|
||||
rowClassName: ColumnCls<T>;
|
||||
rowStyle: ColumnStyle<T>;
|
||||
fixed: string;
|
||||
highlight: boolean;
|
||||
tooltipEffect?: string;
|
||||
tooltipOptions?: TableOverflowTooltipOptions;
|
||||
}
|
||||
declare const defaultProps: {
|
||||
store: {
|
||||
required: boolean;
|
||||
type: PropType<TableBodyProps<any>["store"]>;
|
||||
};
|
||||
stripe: BooleanConstructor;
|
||||
tooltipEffect: StringConstructor;
|
||||
tooltipOptions: {
|
||||
type: PropType<TableBodyProps<any>["tooltipOptions"]>;
|
||||
};
|
||||
context: {
|
||||
default: () => {};
|
||||
type: PropType<TableBodyProps<any>["context"]>;
|
||||
};
|
||||
rowClassName: PropType<TableBodyProps<any>["rowClassName"]>;
|
||||
rowStyle: PropType<TableBodyProps<any>["rowStyle"]>;
|
||||
fixed: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
highlight: BooleanConstructor;
|
||||
};
|
||||
export { TableBodyProps };
|
||||
export default defaultProps;
|
||||
Generated
Vendored
+29
@@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
const defaultProps = {
|
||||
store: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
stripe: Boolean,
|
||||
tooltipEffect: String,
|
||||
tooltipOptions: {
|
||||
type: Object
|
||||
},
|
||||
context: {
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
rowClassName: [String, Function],
|
||||
rowStyle: [Object, Function],
|
||||
fixed: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
highlight: Boolean
|
||||
};
|
||||
|
||||
exports["default"] = defaultProps;
|
||||
//# sourceMappingURL=defaults.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"defaults.js","sources":["../../../../../../../packages/components/table/src/table-body/defaults.ts"],"sourcesContent":["import type { PropType } from 'vue'\nimport type { Store } from '../store'\nimport type {\n ColumnCls,\n ColumnStyle,\n DefaultRow,\n Table,\n} from '../table/defaults'\nimport type { TableOverflowTooltipOptions } from '../util'\n\ninterface TableBodyProps<T extends DefaultRow> {\n store: Store<T>\n stripe?: boolean\n context: Table<T>\n rowClassName: ColumnCls<T>\n rowStyle: ColumnStyle<T>\n fixed: string\n highlight: boolean\n tooltipEffect?: string\n tooltipOptions?: TableOverflowTooltipOptions\n}\n\nconst defaultProps = {\n store: {\n required: true,\n type: Object as PropType<TableBodyProps<any>['store']>,\n },\n stripe: Boolean,\n tooltipEffect: String,\n tooltipOptions: {\n type: Object as PropType<TableBodyProps<any>['tooltipOptions']>,\n },\n context: {\n default: () => ({}),\n type: Object as PropType<TableBodyProps<any>['context']>,\n },\n rowClassName: [String, Function] as PropType<\n TableBodyProps<any>['rowClassName']\n >,\n rowStyle: [Object, Function] as PropType<TableBodyProps<any>['rowStyle']>,\n fixed: {\n type: String,\n default: '',\n },\n highlight: Boolean,\n}\n\nexport { TableBodyProps }\nexport default defaultProps\n"],"names":[],"mappings":";;;;AAAK,MAAC,YAAY,GAAG;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,IAAI;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,aAAa,EAAE,MAAM;AACvB,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAClC,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;AAC9B,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB;;;;"}
|
||||
Generated
Vendored
+17
@@ -0,0 +1,17 @@
|
||||
import type { TableBodyProps } from './defaults';
|
||||
import type { TableOverflowTooltipOptions } from '../util';
|
||||
import type { DefaultRow } from '../table/defaults';
|
||||
declare function useEvents<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
|
||||
handleDoubleClick: (event: Event, row: T) => void;
|
||||
handleClick: (event: Event, row: T) => void;
|
||||
handleContextMenu: (event: Event, row: T) => void;
|
||||
handleMouseEnter: import("lodash").DebouncedFunc<(index: number) => void>;
|
||||
handleMouseLeave: import("lodash").DebouncedFunc<() => void>;
|
||||
handleCellMouseEnter: (event: MouseEvent, row: T, tooltipOptions: TableOverflowTooltipOptions) => void;
|
||||
handleCellMouseLeave: (event: MouseEvent) => void;
|
||||
tooltipContent: import("vue").Ref<string>;
|
||||
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>>;
|
||||
};
|
||||
export default useEvents;
|
||||
Generated
Vendored
+150
@@ -0,0 +1,150 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var lodashUnified = require('lodash-unified');
|
||||
var util = require('../util.js');
|
||||
var tokens = require('../tokens.js');
|
||||
var style = require('../../../../utils/dom/style.js');
|
||||
|
||||
function isGreaterThan(a, b, epsilon = 0.03) {
|
||||
return a - b > epsilon;
|
||||
}
|
||||
function useEvents(props) {
|
||||
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
||||
const tooltipContent = vue.ref("");
|
||||
const tooltipTrigger = vue.ref(vue.h("div"));
|
||||
const handleEvent = (event, row, name) => {
|
||||
var _a, _b, _c;
|
||||
const table = parent;
|
||||
const cell = util.getCell(event);
|
||||
let column = null;
|
||||
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
|
||||
if (cell) {
|
||||
column = util.getColumnByCell({
|
||||
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
|
||||
}, cell, namespace);
|
||||
if (column) {
|
||||
table == null ? void 0 : table.emit(`cell-${name}`, row, column, cell, event);
|
||||
}
|
||||
}
|
||||
table == null ? void 0 : table.emit(`row-${name}`, row, column, event);
|
||||
};
|
||||
const handleDoubleClick = (event, row) => {
|
||||
handleEvent(event, row, "dblclick");
|
||||
};
|
||||
const handleClick = (event, row) => {
|
||||
var _a;
|
||||
(_a = props.store) == null ? void 0 : _a.commit("setCurrentRow", row);
|
||||
handleEvent(event, row, "click");
|
||||
};
|
||||
const handleContextMenu = (event, row) => {
|
||||
handleEvent(event, row, "contextmenu");
|
||||
};
|
||||
const handleMouseEnter = lodashUnified.debounce((index) => {
|
||||
var _a;
|
||||
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", index);
|
||||
}, 30);
|
||||
const handleMouseLeave = lodashUnified.debounce(() => {
|
||||
var _a;
|
||||
(_a = props.store) == null ? void 0 : _a.commit("setHoverRow", null);
|
||||
}, 30);
|
||||
const getPadding = (el) => {
|
||||
const style = window.getComputedStyle(el, null);
|
||||
const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
|
||||
const paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
|
||||
const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
|
||||
const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
|
||||
return {
|
||||
left: paddingLeft,
|
||||
right: paddingRight,
|
||||
top: paddingTop,
|
||||
bottom: paddingBottom
|
||||
};
|
||||
};
|
||||
const toggleRowClassByCell = (rowSpan, event, toggle) => {
|
||||
var _a;
|
||||
let node = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.parentNode;
|
||||
while (rowSpan > 1) {
|
||||
node = node == null ? void 0 : node.nextSibling;
|
||||
if (!node || node.nodeName !== "TR")
|
||||
break;
|
||||
toggle(node, "hover-row hover-fixed-row");
|
||||
rowSpan--;
|
||||
}
|
||||
};
|
||||
const handleCellMouseEnter = (event, row, tooltipOptions) => {
|
||||
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
||||
if (!parent)
|
||||
return;
|
||||
const table = parent;
|
||||
const cell = util.getCell(event);
|
||||
const namespace = (_a = table == null ? void 0 : table.vnode.el) == null ? void 0 : _a.dataset.prefix;
|
||||
let column = null;
|
||||
if (cell) {
|
||||
column = util.getColumnByCell({
|
||||
columns: (_c = (_b = props.store) == null ? void 0 : _b.states.columns.value) != null ? _c : []
|
||||
}, cell, namespace);
|
||||
if (!column) {
|
||||
return;
|
||||
}
|
||||
if (cell.rowSpan > 1) {
|
||||
toggleRowClassByCell(cell.rowSpan, event, style.addClass);
|
||||
}
|
||||
const hoverState = table.hoverState = {
|
||||
cell,
|
||||
column,
|
||||
row
|
||||
};
|
||||
table == null ? void 0 : table.emit("cell-mouse-enter", hoverState.row, hoverState.column, hoverState.cell, event);
|
||||
}
|
||||
if (!tooltipOptions) {
|
||||
if (((_d = util.removePopper) == null ? void 0 : _d.trigger) === cell) {
|
||||
(_e = util.removePopper) == null ? void 0 : _e();
|
||||
}
|
||||
return;
|
||||
}
|
||||
const cellChild = event.target.querySelector(".cell");
|
||||
if (!(style.hasClass(cellChild, `${namespace}-tooltip`) && cellChild.childNodes.length && ((_f = cellChild.textContent) == null ? void 0 : _f.trim()))) {
|
||||
return;
|
||||
}
|
||||
const range = document.createRange();
|
||||
range.setStart(cellChild, 0);
|
||||
range.setEnd(cellChild, cellChild.childNodes.length);
|
||||
const { width: rangeWidth, height: rangeHeight } = range.getBoundingClientRect();
|
||||
const { width: cellChildWidth, height: cellChildHeight } = cellChild.getBoundingClientRect();
|
||||
const { top, left, right, bottom } = getPadding(cellChild);
|
||||
const horizontalPadding = left + right;
|
||||
const verticalPadding = top + bottom;
|
||||
if (isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) || isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) || isGreaterThan(cellChild.scrollWidth, cellChildWidth)) {
|
||||
util.createTablePopper(tooltipOptions, (_g = (cell == null ? void 0 : cell.innerText) || (cell == null ? void 0 : cell.textContent)) != null ? _g : "", row, column, cell, table);
|
||||
} else if (((_h = util.removePopper) == null ? void 0 : _h.trigger) === cell) {
|
||||
(_i = util.removePopper) == null ? void 0 : _i();
|
||||
}
|
||||
};
|
||||
const handleCellMouseLeave = (event) => {
|
||||
const cell = util.getCell(event);
|
||||
if (!cell)
|
||||
return;
|
||||
if (cell.rowSpan > 1) {
|
||||
toggleRowClassByCell(cell.rowSpan, event, style.removeClass);
|
||||
}
|
||||
const oldHoverState = parent == null ? void 0 : parent.hoverState;
|
||||
parent == null ? void 0 : parent.emit("cell-mouse-leave", oldHoverState == null ? void 0 : oldHoverState.row, oldHoverState == null ? void 0 : oldHoverState.column, oldHoverState == null ? void 0 : oldHoverState.cell, event);
|
||||
};
|
||||
return {
|
||||
handleDoubleClick,
|
||||
handleClick,
|
||||
handleContextMenu,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
handleCellMouseEnter,
|
||||
handleCellMouseLeave,
|
||||
tooltipContent,
|
||||
tooltipTrigger
|
||||
};
|
||||
}
|
||||
|
||||
exports["default"] = useEvents;
|
||||
//# sourceMappingURL=events-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+82
@@ -0,0 +1,82 @@
|
||||
import type { VNode } from 'vue';
|
||||
declare const _default: import("vue").DefineComponent<{
|
||||
store: {
|
||||
required: boolean;
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
|
||||
};
|
||||
stripe: BooleanConstructor;
|
||||
tooltipEffect: StringConstructor;
|
||||
tooltipOptions: {
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
|
||||
};
|
||||
context: {
|
||||
default: () => {};
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
|
||||
};
|
||||
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
|
||||
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
|
||||
fixed: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
highlight: BooleanConstructor;
|
||||
}, {
|
||||
ns: {
|
||||
namespace: import("vue").ComputedRef<string>;
|
||||
b: (blockSuffix?: string) => string;
|
||||
e: (element?: string) => string;
|
||||
m: (modifier?: string) => string;
|
||||
be: (blockSuffix?: string, element?: string) => string;
|
||||
em: (element?: string, modifier?: string) => string;
|
||||
bm: (blockSuffix?: string, modifier?: string) => string;
|
||||
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
|
||||
is: {
|
||||
(name: string, state: boolean | undefined): string;
|
||||
(name: string): string;
|
||||
};
|
||||
cssVar: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarName: (name: string) => string;
|
||||
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
|
||||
cssVarBlockName: (name: string) => string;
|
||||
};
|
||||
onColumnsChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
|
||||
onScrollableChange: (layout: import("../table-layout").default<import("../table/defaults").DefaultRow>) => void;
|
||||
wrappedRowRender: (row: any, $index: number) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[][];
|
||||
tooltipContent: import("vue").Ref<string>;
|
||||
tooltipTrigger: import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
store: {
|
||||
required: boolean;
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["store"]>;
|
||||
};
|
||||
stripe: BooleanConstructor;
|
||||
tooltipEffect: StringConstructor;
|
||||
tooltipOptions: {
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["tooltipOptions"]>;
|
||||
};
|
||||
context: {
|
||||
default: () => {};
|
||||
type: import("vue").PropType<import("./defaults").TableBodyProps<any>["context"]>;
|
||||
};
|
||||
rowClassName: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowClassName"]>;
|
||||
rowStyle: import("vue").PropType<import("./defaults").TableBodyProps<any>["rowStyle"]>;
|
||||
fixed: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
highlight: BooleanConstructor;
|
||||
}>>, {
|
||||
fixed: string;
|
||||
highlight: boolean;
|
||||
stripe: boolean;
|
||||
context: import("element-plus").Table<any>;
|
||||
}>;
|
||||
export default _default;
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var layoutObserver = require('../layout-observer.js');
|
||||
var util = require('../util.js');
|
||||
var tokens = require('../tokens.js');
|
||||
var renderHelper = require('./render-helper.js');
|
||||
var defaults = require('./defaults.js');
|
||||
var index = require('../../../../hooks/use-namespace/index.js');
|
||||
var style = require('../../../../utils/dom/style.js');
|
||||
var core = require('@vueuse/core');
|
||||
var raf = require('../../../../utils/raf.js');
|
||||
|
||||
var TableBody = vue.defineComponent({
|
||||
name: "ElTableBody",
|
||||
props: defaults["default"],
|
||||
setup(props) {
|
||||
var _a;
|
||||
const instance = vue.getCurrentInstance();
|
||||
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
||||
const ns = index.useNamespace("table");
|
||||
const { wrappedRowRender, tooltipContent, tooltipTrigger } = renderHelper["default"](props);
|
||||
const { onColumnsChange, onScrollableChange } = layoutObserver["default"](parent);
|
||||
const hoveredCellList = [];
|
||||
vue.watch((_a = props.store) == null ? void 0 : _a.states.hoverRow, (newVal, oldVal) => {
|
||||
var _a2, _b;
|
||||
const el = instance == null ? void 0 : instance.vnode.el;
|
||||
const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`));
|
||||
let rowNum = newVal;
|
||||
const childNodes = (_a2 = rows[rowNum]) == null ? void 0 : _a2.childNodes;
|
||||
if (childNodes == null ? void 0 : childNodes.length) {
|
||||
let control = 0;
|
||||
const indexes = Array.from(childNodes).reduce((acc, item, index) => {
|
||||
var _a3, _b2;
|
||||
if (((_a3 = childNodes[index]) == null ? void 0 : _a3.colSpan) > 1) {
|
||||
control = (_b2 = childNodes[index]) == null ? void 0 : _b2.colSpan;
|
||||
}
|
||||
if (item.nodeName !== "TD" && control === 0) {
|
||||
acc.push(index);
|
||||
}
|
||||
control > 0 && control--;
|
||||
return acc;
|
||||
}, []);
|
||||
indexes.forEach((rowIndex) => {
|
||||
var _a3;
|
||||
rowNum = newVal;
|
||||
while (rowNum > 0) {
|
||||
const preChildNodes = (_a3 = rows[rowNum - 1]) == null ? void 0 : _a3.childNodes;
|
||||
if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
|
||||
style.addClass(preChildNodes[rowIndex], "hover-cell");
|
||||
hoveredCellList.push(preChildNodes[rowIndex]);
|
||||
break;
|
||||
}
|
||||
rowNum--;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
hoveredCellList.forEach((item) => style.removeClass(item, "hover-cell"));
|
||||
hoveredCellList.length = 0;
|
||||
}
|
||||
if (!((_b = props.store) == null ? void 0 : _b.states.isComplex.value) || !core.isClient)
|
||||
return;
|
||||
raf.rAF(() => {
|
||||
const oldRow = rows[oldVal];
|
||||
const newRow = rows[newVal];
|
||||
if (oldRow && !oldRow.classList.contains("hover-fixed-row")) {
|
||||
style.removeClass(oldRow, "hover-row");
|
||||
}
|
||||
if (newRow) {
|
||||
style.addClass(newRow, "hover-row");
|
||||
}
|
||||
});
|
||||
});
|
||||
vue.onUnmounted(() => {
|
||||
var _a2;
|
||||
(_a2 = util.removePopper) == null ? void 0 : _a2();
|
||||
});
|
||||
return {
|
||||
ns,
|
||||
onColumnsChange,
|
||||
onScrollableChange,
|
||||
wrappedRowRender,
|
||||
tooltipContent,
|
||||
tooltipTrigger
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { wrappedRowRender, store } = this;
|
||||
const data = (store == null ? void 0 : store.states.data.value) || [];
|
||||
return vue.h("tbody", { tabIndex: -1 }, [
|
||||
data.reduce((acc, row) => {
|
||||
return acc.concat(wrappedRowRender(row, acc.length));
|
||||
}, [])
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
exports["default"] = TableBody;
|
||||
//# sourceMappingURL=index.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
import type { TableBodyProps } from './defaults';
|
||||
import type { DefaultRow } from '../table/defaults';
|
||||
declare function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
|
||||
wrappedRowRender: (row: T, $index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[] | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[][];
|
||||
tooltipContent: import("vue").Ref<string>;
|
||||
tooltipTrigger: import("vue").Ref<import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>>;
|
||||
};
|
||||
export default useRender;
|
||||
Generated
Vendored
+230
@@ -0,0 +1,230 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var lodashUnified = require('lodash-unified');
|
||||
var util = require('../util.js');
|
||||
var tokens = require('../tokens.js');
|
||||
var eventsHelper = require('./events-helper.js');
|
||||
var stylesHelper = require('./styles-helper.js');
|
||||
var tdWrapper = require('./td-wrapper.js');
|
||||
var index = require('../../../../hooks/use-namespace/index.js');
|
||||
var types = require('../../../../utils/types.js');
|
||||
|
||||
function useRender(props) {
|
||||
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
||||
const ns = index.useNamespace("table");
|
||||
const {
|
||||
handleDoubleClick,
|
||||
handleClick,
|
||||
handleContextMenu,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
handleCellMouseEnter,
|
||||
handleCellMouseLeave,
|
||||
tooltipContent,
|
||||
tooltipTrigger
|
||||
} = eventsHelper["default"](props);
|
||||
const {
|
||||
getRowStyle,
|
||||
getRowClass,
|
||||
getCellStyle,
|
||||
getCellClass,
|
||||
getSpan,
|
||||
getColspanRealWidth
|
||||
} = stylesHelper["default"](props);
|
||||
let displayIndex = -1;
|
||||
const firstDefaultColumnIndex = vue.computed(() => {
|
||||
var _a;
|
||||
return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
|
||||
});
|
||||
const getKeyOfRow = (row, index) => {
|
||||
var _a;
|
||||
const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
|
||||
if (rowKey) {
|
||||
return util.getRowIdentity(row, rowKey);
|
||||
}
|
||||
return index;
|
||||
};
|
||||
const rowRender = (row, $index, treeRowData, expanded = false) => {
|
||||
const { tooltipEffect, tooltipOptions, store } = props;
|
||||
const { indent, columns } = store.states;
|
||||
const rowClasses = [];
|
||||
let display = true;
|
||||
if (treeRowData) {
|
||||
rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
|
||||
display = !!treeRowData.display;
|
||||
}
|
||||
if ($index === 0) {
|
||||
displayIndex = -1;
|
||||
}
|
||||
if (props.stripe && display) {
|
||||
displayIndex++;
|
||||
}
|
||||
rowClasses.push(...getRowClass(row, $index, displayIndex));
|
||||
const displayStyle = display ? null : { display: "none" };
|
||||
return vue.h("tr", {
|
||||
style: [displayStyle, getRowStyle(row, $index)],
|
||||
class: rowClasses,
|
||||
key: getKeyOfRow(row, $index),
|
||||
onDblclick: ($event) => handleDoubleClick($event, row),
|
||||
onClick: ($event) => handleClick($event, row),
|
||||
onContextmenu: ($event) => handleContextMenu($event, row),
|
||||
onMouseenter: () => handleMouseEnter($index),
|
||||
onMouseleave: handleMouseLeave
|
||||
}, columns.value.map((column, cellIndex) => {
|
||||
const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
|
||||
if (!rowspan || !colspan) {
|
||||
return null;
|
||||
}
|
||||
const columnData = Object.assign({}, column);
|
||||
columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
|
||||
const data = {
|
||||
store,
|
||||
_self: props.context || parent,
|
||||
column: columnData,
|
||||
row,
|
||||
$index,
|
||||
cellIndex,
|
||||
expanded
|
||||
};
|
||||
if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
|
||||
data.treeNode = {
|
||||
indent: treeRowData.level && treeRowData.level * indent.value,
|
||||
level: treeRowData.level
|
||||
};
|
||||
if (types.isBoolean(treeRowData.expanded)) {
|
||||
data.treeNode.expanded = treeRowData.expanded;
|
||||
if ("loading" in treeRowData) {
|
||||
data.treeNode.loading = treeRowData.loading;
|
||||
}
|
||||
if ("noLazyChildren" in treeRowData) {
|
||||
data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
|
||||
}
|
||||
}
|
||||
}
|
||||
const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
|
||||
const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
|
||||
const mergedTooltipOptions = column.showOverflowTooltip && lodashUnified.merge({
|
||||
effect: tooltipEffect
|
||||
}, tooltipOptions, column.showOverflowTooltip);
|
||||
return vue.h(tdWrapper["default"], {
|
||||
style: getCellStyle($index, cellIndex, row, column),
|
||||
class: getCellClass($index, cellIndex, row, column, colspan - 1),
|
||||
key: `${patchKey}${baseKey}`,
|
||||
rowspan,
|
||||
colspan,
|
||||
onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
|
||||
onMouseleave: handleCellMouseLeave
|
||||
}, {
|
||||
default: () => cellChildren(cellIndex, column, data)
|
||||
});
|
||||
}));
|
||||
};
|
||||
const cellChildren = (_cellIndex, column, data) => {
|
||||
return column.renderCell(data);
|
||||
};
|
||||
const wrappedRowRender = (row, $index) => {
|
||||
const store = props.store;
|
||||
const { isRowExpanded, assertRowKey } = store;
|
||||
const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
|
||||
const columns = store.states.columns.value;
|
||||
const hasExpandColumn = columns.some(({ type }) => type === "expand");
|
||||
if (hasExpandColumn) {
|
||||
const expanded = isRowExpanded(row);
|
||||
const tr = rowRender(row, $index, void 0, expanded);
|
||||
const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
|
||||
if (!renderExpanded) {
|
||||
console.error("[Element Error]renderExpanded is required.");
|
||||
return tr;
|
||||
}
|
||||
const rows = [[tr]];
|
||||
if (parent.props.preserveExpandedContent || expanded) {
|
||||
rows[0].push(vue.h("tr", {
|
||||
key: `expanded-row__${tr.key}`,
|
||||
style: { display: expanded ? "" : "none" }
|
||||
}, [
|
||||
vue.h("td", {
|
||||
colspan: columns.length,
|
||||
class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
|
||||
}, [renderExpanded({ row, $index, store, expanded })])
|
||||
]));
|
||||
}
|
||||
return rows;
|
||||
} else if (Object.keys(treeData.value).length) {
|
||||
assertRowKey();
|
||||
const key = util.getRowIdentity(row, rowKey.value);
|
||||
let cur = treeData.value[key];
|
||||
let treeRowData = null;
|
||||
if (cur) {
|
||||
treeRowData = {
|
||||
expanded: cur.expanded,
|
||||
level: cur.level,
|
||||
display: true,
|
||||
noLazyChildren: void 0,
|
||||
loading: void 0
|
||||
};
|
||||
if (types.isBoolean(cur.lazy)) {
|
||||
if (treeRowData && types.isBoolean(cur.loaded) && cur.loaded) {
|
||||
treeRowData.noLazyChildren = !(cur.children && cur.children.length);
|
||||
}
|
||||
treeRowData.loading = cur.loading;
|
||||
}
|
||||
}
|
||||
const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
|
||||
if (cur) {
|
||||
let i = 0;
|
||||
const traverse = (children, parent2) => {
|
||||
if (!(children && children.length && parent2))
|
||||
return;
|
||||
children.forEach((node) => {
|
||||
const innerTreeRowData = {
|
||||
display: parent2.display && parent2.expanded,
|
||||
level: parent2.level + 1,
|
||||
expanded: false,
|
||||
noLazyChildren: false,
|
||||
loading: false
|
||||
};
|
||||
const childKey = util.getRowIdentity(node, rowKey.value);
|
||||
if (types.isPropAbsent(childKey)) {
|
||||
throw new Error("For nested data item, row-key is required.");
|
||||
}
|
||||
cur = { ...treeData.value[childKey] };
|
||||
if (cur) {
|
||||
innerTreeRowData.expanded = cur.expanded;
|
||||
cur.level = cur.level || innerTreeRowData.level;
|
||||
cur.display = !!(cur.expanded && innerTreeRowData.display);
|
||||
if (types.isBoolean(cur.lazy)) {
|
||||
if (types.isBoolean(cur.loaded) && cur.loaded) {
|
||||
innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
|
||||
}
|
||||
innerTreeRowData.loading = cur.loading;
|
||||
}
|
||||
}
|
||||
i++;
|
||||
tmp.push(rowRender(node, $index + i, innerTreeRowData));
|
||||
if (cur) {
|
||||
const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
|
||||
traverse(nodes2, cur);
|
||||
}
|
||||
});
|
||||
};
|
||||
cur.display = true;
|
||||
const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
|
||||
traverse(nodes, cur);
|
||||
}
|
||||
return tmp;
|
||||
} else {
|
||||
return rowRender(row, $index, void 0);
|
||||
}
|
||||
};
|
||||
return {
|
||||
wrappedRowRender,
|
||||
tooltipContent,
|
||||
tooltipTrigger
|
||||
};
|
||||
}
|
||||
|
||||
exports["default"] = useRender;
|
||||
//# sourceMappingURL=render-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+15
@@ -0,0 +1,15 @@
|
||||
import type { TableColumnCtx } from '../table-column/defaults';
|
||||
import type { TableBodyProps } from './defaults';
|
||||
import type { DefaultRow } from '../table/defaults';
|
||||
declare function useStyles<T extends DefaultRow>(props: Partial<TableBodyProps<T>>): {
|
||||
getRowStyle: (row: T, rowIndex: number) => any;
|
||||
getRowClass: (row: T, rowIndex: number, displayIndex: number) => string[];
|
||||
getCellStyle: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>) => import("vue").CSSProperties;
|
||||
getCellClass: (rowIndex: number, columnIndex: number, row: T, column: TableColumnCtx<T>, offset: number) => string;
|
||||
getSpan: (row: T, column: TableColumnCtx<T>, rowIndex: number, columnIndex: number) => {
|
||||
rowspan: number;
|
||||
colspan: number;
|
||||
};
|
||||
getColspanRealWidth: (columns: TableColumnCtx<T>[], colspan: number, index: number) => number;
|
||||
};
|
||||
export default useStyles;
|
||||
Generated
Vendored
+116
@@ -0,0 +1,116 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var util = require('../util.js');
|
||||
var tokens = require('../tokens.js');
|
||||
var index = require('../../../../hooks/use-namespace/index.js');
|
||||
var shared = require('@vue/shared');
|
||||
|
||||
function useStyles(props) {
|
||||
const parent = vue.inject(tokens.TABLE_INJECTION_KEY);
|
||||
const ns = index.useNamespace("table");
|
||||
const getRowStyle = (row, rowIndex) => {
|
||||
const rowStyle = parent == null ? void 0 : parent.props.rowStyle;
|
||||
if (shared.isFunction(rowStyle)) {
|
||||
return rowStyle.call(null, {
|
||||
row,
|
||||
rowIndex
|
||||
});
|
||||
}
|
||||
return rowStyle || null;
|
||||
};
|
||||
const getRowClass = (row, rowIndex, displayIndex) => {
|
||||
var _a;
|
||||
const classes = [ns.e("row")];
|
||||
if ((parent == null ? void 0 : parent.props.highlightCurrentRow) && row === ((_a = props.store) == null ? void 0 : _a.states.currentRow.value)) {
|
||||
classes.push("current-row");
|
||||
}
|
||||
if (props.stripe && displayIndex % 2 === 1) {
|
||||
classes.push(ns.em("row", "striped"));
|
||||
}
|
||||
const rowClassName = parent == null ? void 0 : parent.props.rowClassName;
|
||||
if (shared.isString(rowClassName)) {
|
||||
classes.push(rowClassName);
|
||||
} else if (shared.isFunction(rowClassName)) {
|
||||
classes.push(rowClassName.call(null, {
|
||||
row,
|
||||
rowIndex
|
||||
}));
|
||||
}
|
||||
return classes;
|
||||
};
|
||||
const getCellStyle = (rowIndex, columnIndex, row, column) => {
|
||||
const cellStyle = parent == null ? void 0 : parent.props.cellStyle;
|
||||
let cellStyles = cellStyle != null ? cellStyle : {};
|
||||
if (shared.isFunction(cellStyle)) {
|
||||
cellStyles = cellStyle.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
});
|
||||
}
|
||||
const fixedStyle = util.getFixedColumnOffset(columnIndex, props == null ? void 0 : props.fixed, props.store);
|
||||
util.ensurePosition(fixedStyle, "left");
|
||||
util.ensurePosition(fixedStyle, "right");
|
||||
return Object.assign({}, cellStyles, fixedStyle);
|
||||
};
|
||||
const getCellClass = (rowIndex, columnIndex, row, column, offset) => {
|
||||
const fixedClasses = util.getFixedColumnsClass(ns.b(), columnIndex, props == null ? void 0 : props.fixed, props.store, void 0, offset);
|
||||
const classes = [column.id, column.align, column.className, ...fixedClasses];
|
||||
const cellClassName = parent == null ? void 0 : parent.props.cellClassName;
|
||||
if (shared.isString(cellClassName)) {
|
||||
classes.push(cellClassName);
|
||||
} else if (shared.isFunction(cellClassName)) {
|
||||
classes.push(cellClassName.call(null, {
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
row,
|
||||
column
|
||||
}));
|
||||
}
|
||||
classes.push(ns.e("cell"));
|
||||
return classes.filter((className) => Boolean(className)).join(" ");
|
||||
};
|
||||
const getSpan = (row, column, rowIndex, columnIndex) => {
|
||||
let rowspan = 1;
|
||||
let colspan = 1;
|
||||
const fn = parent == null ? void 0 : parent.props.spanMethod;
|
||||
if (shared.isFunction(fn)) {
|
||||
const result = fn({
|
||||
row,
|
||||
column,
|
||||
rowIndex,
|
||||
columnIndex
|
||||
});
|
||||
if (shared.isArray(result)) {
|
||||
rowspan = result[0];
|
||||
colspan = result[1];
|
||||
} else if (shared.isObject(result)) {
|
||||
rowspan = result.rowspan;
|
||||
colspan = result.colspan;
|
||||
}
|
||||
}
|
||||
return { rowspan, colspan };
|
||||
};
|
||||
const getColspanRealWidth = (columns, colspan, index) => {
|
||||
if (colspan < 1) {
|
||||
return columns[index].realWidth;
|
||||
}
|
||||
const widthArr = columns.map(({ realWidth, width }) => realWidth || width).slice(index, index + colspan);
|
||||
return Number(widthArr.reduce((acc, width) => Number(acc) + Number(width), -1));
|
||||
};
|
||||
return {
|
||||
getRowStyle,
|
||||
getRowClass,
|
||||
getCellStyle,
|
||||
getCellClass,
|
||||
getSpan,
|
||||
getColspanRealWidth
|
||||
};
|
||||
}
|
||||
|
||||
exports["default"] = useStyles;
|
||||
//# sourceMappingURL=styles-helper.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+37
@@ -0,0 +1,37 @@
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
var vue = require('vue');
|
||||
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
|
||||
|
||||
const __default__ = vue.defineComponent({
|
||||
name: "TableTdWrapper"
|
||||
});
|
||||
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
colspan: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
rowspan: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return vue.openBlock(), vue.createElementBlock("td", {
|
||||
colspan: __props.colspan,
|
||||
rowspan: __props.rowspan
|
||||
}, [
|
||||
vue.renderSlot(_ctx.$slots, "default")
|
||||
], 8, ["colspan", "rowspan"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
var TdWrapper = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "td-wrapper.vue"]]);
|
||||
|
||||
exports["default"] = TdWrapper;
|
||||
//# sourceMappingURL=td-wrapper.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"td-wrapper.js","sources":["../../../../../../../packages/components/table/src/table-body/td-wrapper.vue"],"sourcesContent":["<template>\n <td :colspan=\"colspan\" :rowspan=\"rowspan\"><slot /></td>\n</template>\n\n<script setup lang=\"ts\">\ndefineOptions({\n name: 'TableTdWrapper',\n})\n\ndefineProps({\n colspan: {\n type: Number,\n default: 1,\n },\n rowspan: {\n type: Number,\n default: 1,\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;uCAKc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
||||
Generated
Vendored
+32
@@ -0,0 +1,32 @@
|
||||
declare function __VLS_template(): {
|
||||
default?(_: {}): any;
|
||||
};
|
||||
declare const __VLS_component: import("vue").DefineComponent<{
|
||||
colspan: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
rowspan: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
colspan: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
rowspan: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
}>>, {
|
||||
rowspan: number;
|
||||
colspan: number;
|
||||
}>;
|
||||
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
||||
export default _default;
|
||||
type __VLS_WithTemplateSlots<T, S> = T & {
|
||||
new (): {
|
||||
$slots: S;
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user