element-pe 2.2.65 → 2.2.67

package/dist/index.full.js

@@ -49648,7 +49648,8 @@
   const _sfc_main$o = vue.defineComponent({
     name: "ElResizableColumns",
     props: resizableColumnsProps,
-    setup(props) {
+    emits: ["collapse", "expand"],
+    setup(props, { emit }) {
       const ns = useNamespace("resizable-columns");
       const MIN_WIDTH = props.minWidth > 0 ? props.minWidth : 50;
       const {
@@ -49656,13 +49657,47 @@
         addChild: registerColumn,
         removeChild: unregisterColumn
       } = useOrderedChildren(vue.getCurrentInstance(), "ElResizableColumn");
+      const handleCollapse = (column) => {
+        if (!column.collapsed) {
+          for (let rIndex = column.index + 1; rIndex < columns.value.length; rIndex++) {
+            const rColumn = columns.value[rIndex];
+            if (!rColumn.collapsed) {
+              rColumn.left = rColumn.left - column.width;
+              rColumn.width = rColumn.width + column.width;
+              break;
+            } else {
+              rColumn.left = rColumn.left - column.width;
+            }
+          }
+          column.collapsed = true;
+          emit("collapse", column.index);
+        }
+      };
+      const handleExpand = (column) => {
+        if (column.collapsed) {
+          column.collapsed = false;
+          const rightColumn = columns.value[column.index + 1];
+          rightColumn.left = rightColumn.left + column.width;
+          rightColumn.width = rightColumn.width > column.width + MIN_WIDTH ? rightColumn.width - column.width : MIN_WIDTH;
+          const allOtherColumns = columns.value.slice(column.index + 2);
+          const otherWidth = (column.parentWidth - rightColumn.left - rightColumn.width) / allOtherColumns.length;
+          allOtherColumns.forEach((item, index) => {
+            item.left = index * otherWidth + rightColumn.left + rightColumn.width;
+            item.width = otherWidth;
+          });
+          emit("expand", column.index);
+        }
+      };
       vue.provide(resizableColumnsRootContextKey, {
         props,
         columns,
         registerColumn,
-        unregisterColumn
+        unregisterColumn,
+        handleCollapse,
+        handleExpand
       });
       const columnsContainer = vue.ref(null);
+      const parentWidth = vue.ref(0);
       const resizeConfig = vue.reactive({
         last: {
           pos: 0,
@@ -49674,46 +49709,47 @@
           const resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
               const width = entry.contentRect.width;
+              parentWidth.value = width;
               initColumnSize(width);
             }
           });
           resizeObserver.observe(columnsContainer.value);
         }
       });
-      const initColumnSize = (parentWidth) => {
-        let remainWidth = parentWidth;
+      const initColumnSize = (parentWidth2) => {
+        let remainWidth = parentWidth2;
         columns.value.forEach((item, index) => {
           if (item.props.maxWidth) {
             if (item.props.maxWidth.endsWith("px")) {
-              item.maxWidth = parseInt(item.props.maxWidth.substring(0, item.props.maxWidth.length - 2));
+              item.maxWidth = Number.parseInt(item.props.maxWidth.slice(0, Math.max(0, item.props.maxWidth.length - 2)));
             } else if (item.props.maxWidth.endsWith("%")) {
-              item.maxWidth = parseInt(item.props.maxWidth.substring(0, item.props.maxWidth.length - 1)) / 100 * parentWidth;
+              item.maxWidth = Number.parseInt(item.props.maxWidth.slice(0, Math.max(0, item.props.maxWidth.length - 1))) / 100 * parentWidth2;
             }
           }
           if (item.props.width && item.props.width.endsWith("px")) {
-            item.width = parseInt(item.props.width.substring(0, item.props.width.length - 2));
+            item.width = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 2)));
           } else if (item.props.width && item.props.width.endsWith("%")) {
-            item.width = parseInt(item.props.width.substring(0, item.props.width.length - 1)) / 100 * parentWidth;
+            item.width = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 1))) / 100 * parentWidth2;
           } else {
             item.width = remainWidth / (columns.value.length - index);
           }
-          item.left = parentWidth - remainWidth;
+          item.left = parentWidth2 - remainWidth;
           remainWidth -= item.width;
-          item.parentWidth = parentWidth, item.index = index;
+          item.parentWidth = parentWidth2, item.index = index;
           item.collapsed = false;
           item.length = columns.value.length;
         });
       };
       const handleMousedown = (e) => {
-        const index = e.target.getAttribute("data-index");
-        if (index !== null) {
+        const index = e.target.dataset.index;
+        if (index !== null && index !== void 0) {
           if (columns.value[index].collapsed) {
             return;
           }
           document.onselectstart = () => false;
           document.ondragstart = () => false;
           resizeConfig.last.pos = e.clientX;
-          resizeConfig.last.index = parseInt(index);
+          resizeConfig.last.index = Number.parseInt(index);
           document.addEventListener("mousemove", handleMousemove);
           document.addEventListener("mouseup", handleMouseup);
         }
@@ -49780,19 +49816,52 @@
         document.removeEventListener("mousemove", handleMousemove);
         document.removeEventListener("mousemove", handleMouseup);
       };
+      const setColumnWidth = (columnIndex, width) => {
+        let remainWidth = parentWidth.value;
+        columns.value.forEach((item, index) => {
+          if (columnIndex === index) {
+            if (width.endsWith("px")) {
+              item.width = Number.parseInt(width.slice(0, Math.max(0, width.length - 2)));
+            } else if (width && width.endsWith("%")) {
+              item.width = Number.parseInt(width.slice(0, Math.max(0, width.length - 1))) / 100 * parentWidth.value;
+            } else {
+              item.width = remainWidth / (columns.value.length - index);
+            }
+          } else {
+            item.width = remainWidth / (columns.value.length - index);
+          }
+          item.left = parentWidth.value - remainWidth;
+          remainWidth -= item.width;
+        });
+      };
+      const toggleColumnCollapse = (columnIndex, collapse) => {
+        if (columnIndex >= 0 && columnIndex < columns.value.length - 1) {
+          const column = columns.value[columnIndex];
+          if (column) {
+            const toCol = collapse !== void 0 ? collapse : !column.collapsed;
+            if (toCol) {
+              handleCollapse(column);
+            } else {
+              handleExpand(column);
+            }
+          }
+        }
+      };
       return {
         ns,
         columnsContainer,
-        handleMousedown
+        handleMousedown,
+        setColumnWidth,
+        toggleColumnCollapse
       };
     }
   });
   const _hoisted_1$b = ["widget"];
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
+      ref: "columnsContainer",
       class: vue.normalizeClass(_ctx.ns.b()),
       widget: _ctx.widget,
-      ref: "columnsContainer",
       onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
     }, [
       vue.renderSlot(_ctx.$slots, "default")
@@ -49811,13 +49880,11 @@
     name: "ElResizableColumn",
     components: { ArrowLeft: arrow_left_default, ArrowRight: arrow_right_default },
     props: resizableColumnProps,
-    emits: ["collapse", "expand"],
-    setup(props, { emit, slots, expose }) {
+    setup(props, { slots }) {
       const instance = vue.getCurrentInstance();
       const columnsRoot = vue.inject(resizableColumnsRootContextKey);
       if (!columnsRoot)
         throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
-      const MIN_WIDTH = columnsRoot.props.minWidth > 0 ? columnsRoot.props.minWidth : 50;
       const collapsable = vue.computed(() => props.collapsable || columnsRoot.props.collapsable);
       const collapsed = vue.ref(false);
       const column = vue.reactive({
@@ -49841,35 +49908,10 @@
       });
       const ns = useNamespace("resizable-column");
       const handleCollapse = () => {
-        if (!collapsed.value) {
-          for (let rIndex = column.index + 1; rIndex < columnsRoot.columns.value.length; rIndex++) {
-            const rColumn = columnsRoot.columns.value[rIndex];
-            if (!rColumn.collapsed) {
-              rColumn.left = rColumn.left - column.width;
-              rColumn.width = rColumn.width + column.width;
-              break;
-            } else {
-              rColumn.left = rColumn.left - column.width;
-            }
-          }
-          collapsed.value = true;
-          emit("collapse", column.index);
-        }
+        columnsRoot.handleCollapse(column);
       };
       const handleExpand = () => {
-        if (collapsed.value) {
-          collapsed.value = false;
-          const rightColumn = columnsRoot.columns.value[column.index + 1];
-          rightColumn.left = rightColumn.left + column.width;
-          rightColumn.width = rightColumn.width > column.width + MIN_WIDTH ? rightColumn.width - column.width : MIN_WIDTH;
-          const allOtherColumns = columnsRoot.columns.value.slice(column.index + 2);
-          const otherWidth = (column.parentWidth - rightColumn.left - rightColumn.width) / allOtherColumns.length;
-          allOtherColumns.forEach((item, index) => {
-            item.left = index * otherWidth + rightColumn.left + rightColumn.width;
-            item.width = otherWidth;
-          });
-          emit("expand", column.index);
-        }
+        columnsRoot.handleExpand(column);
       };
       return {
         ns,