element-pe 2.2.83 → 2.2.84

package/dist/index.full.js

@@ -49940,10 +49940,19 @@
       type: Boolean,
       default: true
     },
+    showCollapse: {
+      type: Boolean,
+      default: true
+    },
     widget: String,
     minWidth: {
       type: Number,
       default: 50
+    },
+    direction: {
+      type: String,
+      values: ["horizontal", "vertical"],
+      default: "horizontal"
     }
   });
 
@@ -49961,6 +49970,10 @@
         addChild: registerColumn,
         removeChild: unregisterColumn
       } = useOrderedChildren(vue.getCurrentInstance(), "ElResizableColumn");
+      const isVertical = vue.computed(() => props.direction === "vertical");
+      const columnsKls = vue.computed(() => {
+        return [ns.b(), props.direction === "vertical" ? "is-vertical" : "is-horizontal"];
+      });
       const handleCollapse = (column) => {
         if (!column.collapsed) {
           for (let rIndex = column.index + 1; rIndex < columns.value.length; rIndex++) {
@@ -50038,7 +50051,7 @@
         if (columnsContainer.value) {
           const resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
-              const width = entry.contentRect.width;
+              const width = props.direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height;
               parentWidth.value = width;
               initColumnSize();
             }
@@ -50054,7 +50067,7 @@
           }
           document.onselectstart = () => false;
           document.ondragstart = () => false;
-          resizeConfig.last.pos = e.clientX;
+          resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
           resizeConfig.last.index = Number.parseInt(index);
           document.addEventListener("mousemove", handleMousemove);
           document.addEventListener("mouseup", handleMouseup);
@@ -50062,7 +50075,7 @@
       };
       const handleMousemove = (e) => {
         const index = resizeConfig.last.index;
-        let offsetX = e.clientX - resizeConfig.last.pos;
+        let offsetX = (isVertical.value ? e.clientY : e.clientX) - resizeConfig.last.pos;
         let leftIndex = index;
         while (leftIndex >= 0 && columns.value[leftIndex].width <= MIN_WIDTH) {
           leftIndex--;
@@ -50095,7 +50108,7 @@
           }
           columns.value[index + 1].width = columns.value[index + 1].width - offsetX;
           columns.value[index + 1].left = columns.value[index + 1].left + offsetX;
-          resizeConfig.last.pos = e.clientX;
+          resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
         } else if (offsetX > 0) {
           const newRightWidth = columns.value[rightIndex].width - offsetX;
           const newLeftWidth = columns.value[rightIndex - 1].width + offsetX;
@@ -50113,7 +50126,7 @@
             columns.value[i].left = columns.value[i].left + offsetX;
           }
           columns.value[index].width = columns.value[index].width + offsetX;
-          resizeConfig.last.pos = e.clientX;
+          resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
         }
       };
       const handleMouseup = () => {
@@ -50160,6 +50173,7 @@
       return {
         ns,
         columnsContainer,
+        columnsKls,
         handleMousedown,
         setColumnWidth,
         toggleColumnCollapse
@@ -50170,7 +50184,7 @@
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("div", {
       ref: "columnsContainer",
-      class: vue.normalizeClass(_ctx.ns.b()),
+      class: vue.normalizeClass(_ctx.columnsKls),
       widget: _ctx.widget,
       onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
     }, [
@@ -50181,6 +50195,7 @@
 
   const resizableColumnProps = buildProps({
     collapsable: Boolean,
+    showCollapse: Boolean,
     widget: String,
     maxWidth: String,
     width: String
@@ -50196,6 +50211,7 @@
       if (!columnsRoot)
         throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
       const collapsable = vue.computed(() => props.collapsable || columnsRoot.props.collapsable);
+      const showCollapse = vue.computed(() => props.showCollapse || columnsRoot.props.showCollapse);
       const collapsed = vue.ref(false);
       const column = vue.reactive({
         uid: instance.uid,
@@ -50207,8 +50223,23 @@
         width: 0,
         left: 0,
         collapsable,
+        showCollapse,
         collapsed
       });
+      const columnStyle = vue.computed(() => {
+        if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
+          return { height: `${column.width}px`, top: `${column.left}px`, display: column.collapsed ? "none" : "unset", width: "100%" };
+        } else {
+          return { width: `${column.width}px`, left: `${column.left}px`, display: column.collapsed ? "none" : "unset" };
+        }
+      });
+      const resizerStyle = vue.computed(() => {
+        if (instance.parent && instance.parent.type.name === "ElResizableColumns" && instance.parent.props.direction === "vertical") {
+          return { top: `${column.left + (column.collapsed ? 0 : column.width)}px`, width: "100%" };
+        } else {
+          return { left: `${column.left + (column.collapsed ? 0 : column.width)}px` };
+        }
+      });
       vue.onMounted(() => {
         columnsRoot.registerColumn(column);
         columnsRoot.initColumnSize();
@@ -50229,6 +50260,8 @@
         ns,
         column,
         columnsCount,
+        columnStyle,
+        resizerStyle,
         handleCollapse,
         handleExpand
       };
@@ -50245,17 +50278,17 @@
       vue.createElementVNode("div", {
         class: vue.normalizeClass(_ctx.ns.b()),
         widget: _ctx.widget,
-        style: vue.normalizeStyle({ width: `${_ctx.column.width}px`, left: `${_ctx.column.left}px`, display: _ctx.column.collapsed ? "none" : "unset" })
+        style: vue.normalizeStyle(_ctx.columnStyle)
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 14, _hoisted_1$a),
       _ctx.column.index < _ctx.columnsCount - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: vue.normalizeClass(["resizer", { "collapsed": _ctx.column.collapsed }]),
-        style: vue.normalizeStyle({ left: `${_ctx.column.left + (_ctx.column.collapsed ? 0 : _ctx.column.width)}px` }),
+        style: vue.normalizeStyle(_ctx.resizerStyle),
         "data-index": _ctx.column.index
       }, [
-        !_ctx.column.collapsed ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+        !_ctx.column.collapsed ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
           key: 0,
           class: "left",
           size: "small",
@@ -50271,7 +50304,9 @@
             })
           ]),
           _: 1
-        }, 8, ["onClick", "disabled"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
+        }, 8, ["onClick", "disabled"])), [
+          [vue.vShow, _ctx.column.showCollapse]
+        ]) : vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_button, {
           key: 1,
           class: "right",
           size: "small",
@@ -50287,7 +50322,9 @@
             })
           ]),
           _: 1
-        }, 8, ["onClick", "disabled"]))
+        }, 8, ["onClick", "disabled"])), [
+          [vue.vShow, _ctx.column.showCollapse]
+        ])
       ], 14, _hoisted_2$7)) : vue.createCommentVNode("v-if", true)
     ], 64);
   }