yy-vue-easytable 2.27.2

package/packages/ve-table/src/colgroup/index.jsx

@@ -0,0 +1,48 @@
+import { getValByUnit } from "../../../src/utils/index.js";
+import { COMPS_NAME } from "../util/constant";
+export default {
+    name: COMPS_NAME.VE_TABLE_COLGROUP,
+    props: {
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        enableColumnResize: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    methods: {
+        getValByUnit(item) {
+            const { enableColumnResize } = this;
+
+            let width;
+            // 开启 column resize
+            if (enableColumnResize) {
+                // 解决使用 _columnResizeWidth 在多表头下宽度计算异常的问题
+                width = item._columnResizeWidth
+                    ? item._columnResizeWidth
+                    : item.width;
+            } else {
+                width = item.width;
+            }
+            return getValByUnit(width);
+        },
+    },
+    render() {
+        return (
+            <colgroup>
+                {this.colgroups.map((item) => {
+                    return (
+                        <col
+                            key={item.key}
+                            style={{
+                                width: this.getValByUnit(item),
+                            }}
+                        />
+                    );
+                })}
+            </colgroup>
+        );
+    },
+};

package/packages/ve-table/src/column-resizer/index.jsx

@@ -0,0 +1,318 @@
+import { clsName } from "../util";
+import { COMPS_NAME, HOOKS_NAME } from "../util/constant";
+import { isNumber } from "../../../src/utils/index.js";
+
+export default {
+    name: COMPS_NAME.VE_TABLE_COLUMN_RESISZER,
+    props: {
+        parentRendered: {
+            type: Boolean,
+            required: true,
+        },
+        tableContainerEl: {
+            type: HTMLDivElement,
+            default: null,
+        },
+        hooks: {
+            type: Object,
+            required: true,
+        },
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        isColumnResizerHover: {
+            type: Boolean,
+            required: true,
+        },
+        isColumnResizing: {
+            type: Boolean,
+            required: true,
+        },
+        setIsColumnResizerHover: {
+            type: Function,
+            required: true,
+        },
+        setIsColumnResizing: {
+            type: Function,
+            required: true,
+        },
+        setColumnWidth: {
+            type: Function,
+            required: true,
+        },
+        // column width resize option
+        columnWidthResizeOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    data() {
+        return {
+            // column resizer start x
+            columnResizerStartX: 0,
+            // current resizing column
+            currentResizingColumn: null,
+            // column resizer handler width
+            columnResizerHandlerWidth: 5,
+            // column resizer rect
+            columnResizerRect: {
+                top: 0,
+                left: 0,
+                height: 0,
+            },
+        };
+    },
+    computed: {
+        // column min width
+        columnMinWidth() {
+            let result = 30;
+
+            const { columnWidthResizeOption } = this;
+
+            if (columnWidthResizeOption) {
+                const { minWidth } = columnWidthResizeOption;
+                if (isNumber(minWidth) && minWidth > 0) {
+                    result = minWidth;
+                }
+            }
+            return result;
+        },
+    },
+    watch: {
+        parentRendered: {
+            handler: function (val) {
+                if (val) {
+                    // header cell mousemove
+                    this.hooks.addHook(
+                        HOOKS_NAME.HEADER_CELL_MOUSEMOVE,
+                        ({ event, column }) => {
+                            if (column.disableResizing) return;
+                            this.initColumnResizerPosition({ event, column });
+                        },
+                    );
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // init column resizer position
+        initColumnResizerPosition({ event, column }) {
+            const { tableContainerEl, isColumnResizing } = this;
+
+            if (tableContainerEl && !isColumnResizing) {
+                const { left: tableContainerLeft, top: tableContainerTop } =
+                    tableContainerEl.getBoundingClientRect();
+
+                const col = this.colgroups.find((x) => x.key === column.key);
+
+                // 表头分组，不支持分组表头列宽拖动
+                if (!col) {
+                    return false;
+                }
+
+                if (col._realTimeWidth) {
+                    const target = event.target;
+                    const cellRect = target.getBoundingClientRect();
+                    const { height, left, top } = cellRect;
+
+                    this.columnResizerRect.left =
+                        left + col._realTimeWidth - tableContainerLeft;
+                    this.columnResizerRect.top = top - tableContainerTop;
+                    this.columnResizerRect.height = height;
+
+                    this.currentResizingColumn = col;
+                    this.columnResizerStartX = left + col._realTimeWidth;
+                } else {
+                    console.warn("Resizer column needs set column width");
+                }
+            }
+        },
+
+        // set column resizer position byu drag
+        setColumnResizerPositionByDrag(event) {
+            const {
+                tableContainerEl,
+                isColumnResizing,
+                currentResizingColumn,
+            } = this;
+
+            if (tableContainerEl && isColumnResizing) {
+                const { left: tableContainerLeft } =
+                    tableContainerEl.getBoundingClientRect();
+
+                if (isColumnResizing && currentResizingColumn) {
+                    const { columnResizerStartX, columnMinWidth } = this;
+
+                    // 不允许拖动小于列最小宽度
+                    if (
+                        currentResizingColumn._realTimeWidth +
+                            (event.clientX - columnResizerStartX) >
+                        columnMinWidth
+                    ) {
+                        this.columnResizerRect.left =
+                            event.clientX - tableContainerLeft;
+                    }
+                }
+            }
+        },
+
+        // column resizer handler mousedown
+        columnResizerHandlerMousedown({ event }) {
+            if (this.isColumnResizerHover) {
+                this.setIsColumnResizing(true);
+
+                // add document mousemove listener
+                document.addEventListener(
+                    "mousemove",
+                    this.setColumnResizerPositionByDrag,
+                );
+                // add document mouseup listener
+                document.addEventListener("mouseup", this.columnResizerMouseup);
+
+                // stop text select when reszing
+                document.onselectstart = function () {
+                    return false;
+                };
+                document.ondragstart = function () {
+                    return false;
+                };
+            }
+        },
+
+        // column resizer mouseup
+        columnResizerMouseup(event) {
+            const {
+                isColumnResizing,
+                currentResizingColumn,
+                columnResizerStartX,
+                setColumnWidth,
+                columnWidthResizeOption,
+                columnMinWidth,
+            } = this;
+
+            if (!isColumnResizing || !currentResizingColumn) {
+                return false;
+            }
+
+            let differWidth;
+            // 拖动小于列最小宽度
+            if (
+                currentResizingColumn._realTimeWidth +
+                    (event.clientX - columnResizerStartX) <
+                columnMinWidth
+            ) {
+                differWidth =
+                    columnMinWidth - currentResizingColumn._realTimeWidth;
+            } else {
+                differWidth = event.clientX - columnResizerStartX;
+            }
+            differWidth = Math.floor(differWidth);
+
+            // 偏差阈值，低于则不处理
+            if (Math.abs(differWidth) > 1) {
+                let nextColumnWidth = currentResizingColumn._realTimeWidth;
+                nextColumnWidth += differWidth;
+
+                // set column width
+                setColumnWidth({
+                    colKey: currentResizingColumn.key,
+                    width: nextColumnWidth,
+                });
+
+                if (columnWidthResizeOption) {
+                    const { sizeChange } = columnWidthResizeOption;
+                    sizeChange &&
+                        sizeChange({
+                            column: currentResizingColumn,
+                            differWidth,
+                            columnWidth: nextColumnWidth,
+                        });
+                }
+            }
+
+            this.clearColumnResizerStatus();
+            // add document mousemove listener
+            document.removeEventListener(
+                "mousemove",
+                this.setColumnResizerPositionByDrag,
+            );
+            // add document mouseup listener
+            document.removeEventListener("mouseup", this.columnResizerMouseup);
+        },
+
+        // clear column resizer status
+        clearColumnResizerStatus() {
+            this.currentResizingColumn = null;
+            this.columnResizerStartX = 0;
+            this.setIsColumnResizerHover(false);
+            this.setIsColumnResizing(false);
+
+            // enable text select when reszing
+            document.onselectstart = function () {
+                return true;
+            };
+            document.ondragstart = function () {
+                return true;
+            };
+        },
+    },
+
+    render() {
+        const {
+            isColumnResizerHover,
+            isColumnResizing,
+            columnResizerRect,
+            columnResizerHandlerWidth,
+        } = this;
+
+        const { left, top, height } = columnResizerRect;
+
+        const columnResizerHandlerProps = {
+            class: {
+                [clsName("column-resizer-handler")]: true,
+                ["active"]: isColumnResizerHover || isColumnResizing,
+            },
+            style: {
+                left: left - columnResizerHandlerWidth + "px",
+                top: top + "px",
+                height: height + "px",
+            },
+            on: {
+                click: () => {
+                    //
+                },
+                mousedown: (event) => {
+                    this.columnResizerHandlerMousedown({ event });
+                },
+                mouseenter: () => {
+                    this.setIsColumnResizerHover(true);
+                },
+                mouseleave: () => {
+                    this.setIsColumnResizerHover(false);
+                },
+                mouseup: (event) => {
+                    this.columnResizerMouseup(event);
+                },
+            },
+        };
+
+        const columnResizerLineProps = {
+            class: [clsName("column-resizer-line")],
+            style: {
+                display: isColumnResizing ? "block" : "none",
+                left: left + "px",
+            },
+        };
+
+        return (
+            <div class={clsName("column-resizer")}>
+                <div {...columnResizerHandlerProps} />
+                <div {...columnResizerLineProps} />
+            </div>
+        );
+    },
+};

package/packages/ve-table/src/editor/constant.js

@@ -0,0 +1,5 @@
+// instance methods
+export const INSTANCE_METHODS = {
+    TEXTAREA_ADD_NEW_LINE: "textareaAddNewLine",
+    TEXTAREA_SELECT: "textareaSelect",
+};