yy-vue-easytable 2.27.2

package/packages/ve-table/src/body/body-tr.jsx

@@ -0,0 +1,383 @@
+import BodyTd from "./body-td";
+import { clsName } from "../util";
+import { COMPS_NAME, EMIT_EVENTS, COMPS_CUSTOM_ATTRS } from "../util/constant";
+import VueDomResizeObserver from "../../../src/comps/resize-observer";
+import emitter from "../../../src/mixins/emitter";
+import { isEmptyValue } from "../../../src/utils";
+export default {
+    name: COMPS_NAME.VE_TABLE_BODY_TR,
+    mixins: [emitter],
+    props: {
+        rowData: {
+            type: Object,
+            required: true,
+        },
+        rowIndex: {
+            type: Number,
+            required: true,
+        },
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        columnCollection: {
+            type: Array,
+            required: true,
+        },
+        rowKeyFieldName: {
+            type: String,
+            default: null,
+        },
+        allRowKeys: {
+            type: Array,
+            required: true,
+        },
+        /*
+        expand
+        */
+        // expand row option
+        expandOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // is expand row
+        isExpandRow: {
+            type: Boolean,
+            required: true,
+        },
+        // expanded row keys
+        expandedRowkeys: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        // expand row change
+        expandRowChange: {
+            type: Function,
+            default: null,
+        },
+
+        /*
+        checkbox
+        */
+        // checkbox option
+        checkboxOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        internalCheckboxSelectedRowKeys: {
+            type: Array,
+            default: function () {
+                return null;
+            },
+        },
+
+        /*
+        radio
+        */
+        radioOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        internalRadioSelectedRowKey: {
+            type: [String, Number],
+            default: null,
+        },
+        // is virtual scroll
+        isVirtualScroll: {
+            type: Boolean,
+            default: false,
+        },
+        // cell style option
+        cellStyleOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // highlight row key
+        highlightRowKey: {
+            type: [String, Number],
+            default: null,
+        },
+        // event custom option
+        eventCustomOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell selection data
+        cellSelectionData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell selection range data
+        cellSelectionRangeData: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        bodyIndicatorRowKeys: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // cell span option
+        cellSpanOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // edit opttion
+        editOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    computed: {
+        // current row key
+        currentRowKey() {
+            const { rowKeyFieldName } = this;
+            return rowKeyFieldName ? this.rowData[rowKeyFieldName] : null;
+        },
+        // tr class
+        trClass() {
+            let result = null;
+
+            const { highlightRowKey, currentRowKey } = this;
+
+            let isHighlight = false;
+
+            if (!isEmptyValue(highlightRowKey)) {
+                if (highlightRowKey === currentRowKey) {
+                    isHighlight = true;
+                }
+            }
+
+            result = {
+                [clsName("body-tr")]: true,
+                [clsName("tr-highlight")]: isHighlight,
+            };
+
+            return result;
+        },
+    },
+
+    methods: {
+        // click
+        rowClick(e, fn) {
+            fn && fn(e);
+
+            const { rowData, rowIndex } = this;
+
+            this.dispatch(
+                COMPS_NAME.VE_TABLE_BODY,
+                EMIT_EVENTS.BODY_ROW_CLICK,
+                {
+                    rowData,
+                    rowIndex,
+                },
+            );
+        },
+        // dblclick
+        rowDblclick(e, fn) {
+            fn && fn(e);
+        },
+        // contextmenu
+        rowContextmenu(e, fn) {
+            fn && fn(e);
+        },
+        // mouseenter
+        rowMouseenter(e, fn) {
+            fn && fn(e);
+        },
+        // mouseleave
+        rowMouseleave(e, fn) {
+            fn && fn(e);
+        },
+        // mousemove
+        rowMousemove(e, fn) {
+            fn && fn(e);
+        },
+        // mouseover
+        rowMouseover(e, fn) {
+            fn && fn(e);
+        },
+        // mousedown
+        rowMousedown(e, fn) {
+            fn && fn(e);
+        },
+        // mouseup
+        rowMouseup(e, fn) {
+            fn && fn(e);
+        },
+    },
+
+    render() {
+        const {
+            colgroups,
+            expandOption,
+            expandRowChange,
+            isExpandRow,
+            expandedRowkeys,
+            checkboxOption,
+            rowKeyFieldName,
+            rowIndex,
+            rowData,
+            internalCheckboxSelectedRowKeys,
+            internalRadioSelectedRowKey,
+            radioOption,
+            cellStyleOption,
+            eventCustomOption,
+        } = this;
+
+        // get td content
+        const getTdContent = () => {
+            return colgroups.map((column) => {
+                const tdProps = {
+                    key: column.key,
+                    props: {
+                        rowIndex,
+                        rowData,
+                        column,
+                        columnCollection: this.columnCollection,
+                        colgroups,
+                        expandOption,
+                        expandedRowkeys,
+                        checkboxOption,
+                        rowKeyFieldName,
+                        allRowKeys: this.allRowKeys,
+                        isExpandRow,
+                        internalCheckboxSelectedRowKeys,
+                        internalRadioSelectedRowKey,
+                        radioOption,
+                        cellStyleOption,
+                        cellSpanOption: this.cellSpanOption,
+                        eventCustomOption,
+                        cellSelectionData: this.cellSelectionData,
+                        cellSelectionRangeData: this.cellSelectionRangeData,
+                        bodyIndicatorRowKeys: this.bodyIndicatorRowKeys,
+                        editOption: this.editOption,
+                    },
+                    on: {
+                        [EMIT_EVENTS.EXPAND_ROW_CHANGE]: () =>
+                            expandRowChange(rowData, rowIndex),
+                    },
+                };
+                return <BodyTd {...tdProps} />;
+            });
+        };
+
+        let result = null;
+
+        // custom on row event
+        let customEvents = {};
+        if (eventCustomOption) {
+            const { bodyRowEvents } = eventCustomOption;
+            customEvents = bodyRowEvents
+                ? bodyRowEvents({ row: rowData, rowIndex })
+                : {};
+        }
+
+        const {
+            click,
+            dblclick,
+            contextmenu,
+            mouseenter,
+            mouseleave,
+            mousemove,
+            mouseover,
+            mousedown,
+            mouseup,
+        } = customEvents;
+
+        const events = {
+            click: (e) => {
+                this.rowClick(e, click);
+            },
+            dblclick: (e) => {
+                this.rowDblclick(e, dblclick);
+            },
+            contextmenu: (e) => {
+                this.rowContextmenu(e, contextmenu);
+            },
+            mouseenter: (e) => {
+                this.rowMouseenter(e, mouseenter);
+            },
+            mouseleave: (e) => {
+                this.rowMouseleave(e, mouseleave);
+            },
+            mousemove: (e) => {
+                this.rowMousemove(e, mousemove);
+            },
+            mouseover: (e) => {
+                this.rowMouseover(e, mouseover);
+            },
+            mousedown: (e) => {
+                this.rowMousedown(e, mousedown);
+            },
+            mouseup: (e) => {
+                this.rowMouseup(e, mouseup);
+            },
+        };
+
+        if (this.isVirtualScroll) {
+            const props = {
+                class: this.trClass,
+                props: {
+                    tagName: "tr",
+                    id: this.currentRowKey,
+                },
+                attrs: {
+                    [COMPS_CUSTOM_ATTRS.BODY_ROW_KEY]: this.currentRowKey,
+                },
+                on: {
+                    "on-dom-resize-change": ({ key, height }) => {
+                        this.dispatch(
+                            COMPS_NAME.VE_TABLE,
+                            EMIT_EVENTS.BODY_ROW_HEIGHT_CHANGE,
+                            {
+                                rowKey: key,
+                                height,
+                            },
+                        );
+                    },
+                },
+                nativeOn: events,
+            };
+
+            result = (
+                <VueDomResizeObserver {...props}>
+                    {getTdContent()}
+                </VueDomResizeObserver>
+            );
+        } else {
+            const props = {
+                class: this.trClass,
+                attrs: {
+                    [COMPS_CUSTOM_ATTRS.BODY_ROW_KEY]: this.currentRowKey,
+                },
+                on: events,
+            };
+
+            result = <tr {...props}>{getTdContent()}</tr>;
+        }
+
+        return result;
+    },
+};

package/packages/ve-table/src/body/expand-tr-icon.jsx

@@ -0,0 +1,80 @@
+import { clsName } from "../util";
+import { COMPS_NAME, COLUMN_TYPES } from "../util/constant";
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { ICON_NAMES } from "../../../src/utils/constant";
+
+export default {
+    name: COMPS_NAME.VE_TABLE_EXPAND_TR_ICON,
+    props: {
+        column: {
+            type: Object,
+            required: true,
+        },
+        // expand row option
+        expandOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        rowData: {
+            type: Object,
+            required: true,
+        },
+        // expanded row keys
+        expandedRowkeys: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        rowKeyFieldName: {
+            type: String,
+            default: null,
+        },
+        // row expand click event
+        cellClick: {
+            type: Function,
+            default: null,
+        },
+    },
+    computed: {
+        // is row expanded
+        isExpanded() {
+            let result = false;
+
+            const { column, rowData, expandedRowkeys, rowKeyFieldName } = this;
+
+            if (column.type === COLUMN_TYPES.EXPAND) {
+                const rowKey = rowData[rowKeyFieldName];
+                result = expandedRowkeys.includes(rowKey);
+            }
+
+            return result;
+        },
+        // expand row icon class
+        expandRowIconContainerClass() {
+            return {
+                [clsName("row-expand-icon")]: true,
+                [clsName("expand-icon-collapsed")]: this.isExpanded,
+            };
+        },
+    },
+    render() {
+        let content = null;
+
+        const { cellClick, column, expandRowIconContainerClass } = this;
+
+        if (column.type === COLUMN_TYPES.EXPAND) {
+            content = (
+                <span
+                    onClick={(e) => cellClick(e)}
+                    class={expandRowIconContainerClass}
+                >
+                    <VeIcon name={ICON_NAMES.RIGHT_ARROW} />
+                </span>
+            );
+        }
+        return content;
+    },
+};

package/packages/ve-table/src/body/expand-tr.jsx

@@ -0,0 +1,147 @@
+import { clsName } from "../util";
+import { COMPS_NAME } from "../util/constant";
+import emitter from "../../../src/mixins/emitter";
+
+export default {
+    name: COMPS_NAME.VE_TABLE_EXPAND_TR,
+    mixins: [emitter],
+    props: {
+        tableViewportWidth: {
+            type: Number,
+            default: 0,
+        },
+        // expand column
+        expandColumn: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        // expand row option
+        expandOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // expanded row keys
+        expandedRowkeys: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        rowData: {
+            type: Object,
+            required: true,
+        },
+        rowIndex: {
+            type: Number,
+            required: true,
+        },
+        rowKeyFieldName: {
+            type: String,
+            default: null,
+        },
+    },
+    computed: {
+        // get column count
+        columnCount() {
+            return this.colgroups.length;
+        },
+        // current row key
+        currentRowKey() {
+            return this.rowData[this.rowKeyFieldName];
+        },
+        // is row expanded
+        isRowExpanded() {
+            let result = false;
+
+            const { expandOption, expandedRowkeys, currentRowKey } = this;
+
+            // defalut expand all rows
+            if (expandOption.defaultExpandAllRows) {
+                result = true;
+            }
+            // defaultExpandedRowKeys includes currentRowKey
+            else if (expandedRowkeys.includes(currentRowKey)) {
+                result = true;
+            }
+
+            return result;
+        },
+        // expand row class
+        expanRowClass() {
+            let result = {
+                [clsName("expand-tr")]: true,
+            };
+            return result;
+        },
+
+        // has left fixed column
+        hasLeftFixedColumn() {
+            return this.colgroups.some((x) => x.fixed === "left");
+        },
+
+        // expand td content style
+        expandTdContentStyle() {
+            let result = {};
+
+            const { hasLeftFixedColumn, tableViewportWidth } = this;
+
+            if (hasLeftFixedColumn) {
+                // table width
+                if (tableViewportWidth) {
+                    result["width"] = tableViewportWidth + "px";
+                }
+            }
+
+            return result;
+        },
+    },
+    methods: {
+        // get expande row content
+        getExpandRowContent(h) {
+            const { expandOption } = this;
+            let result =
+                expandOption.render &&
+                expandOption.render(
+                    {
+                        row: this.rowData,
+                        column: this.expandColumn,
+                        rowIndex: this.rowIndex,
+                    },
+                    h,
+                );
+
+            return result;
+        },
+    },
+    render(h) {
+        const { isRowExpanded, columnCount, getExpandRowContent } = this;
+
+        let result = null;
+
+        if (isRowExpanded) {
+            let content = getExpandRowContent(h);
+            result = (
+                <tr class={this.expanRowClass}>
+                    <td class={clsName("expand-td")} colSpan={columnCount}>
+                        <div
+                            class={clsName("expand-td-content")}
+                            style={this.expandTdContentStyle}
+                        >
+                            {content}
+                        </div>
+                    </td>
+                </tr>
+            );
+        }
+
+        return result;
+    },
+};