element-pe 2.2.96 → 2.2.98

package/es/components/resizable-columns/src/resizable-column.mjs

@@ -1,150 +1,13 @@
-import '../../../hooks/index.mjs';
-import { resizableColumnProps } from './resizable-column2.mjs';
-import { defineComponent, getCurrentInstance, inject, computed, ref, reactive, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, withDirectives, createBlock, withCtx, createVNode, vShow, createCommentVNode } from 'vue';
 import '../../../utils/index.mjs';
-import { resizableColumnsRootContextKey } from './constants.mjs';
-import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
-import '../../config-provider/index.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
-import { throwError } from '../../../utils/error.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
 
-const _sfc_main = defineComponent({
-  name: "ElResizableColumn",
-  components: { ArrowLeft, ArrowRight },
-  props: resizableColumnProps,
-  setup(props, { slots }) {
-    const forEditor = useGlobalConfig("forEditor");
-    const instance = getCurrentInstance();
-    const columnsRoot = inject(resizableColumnsRootContextKey);
-    if (!columnsRoot)
-      throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
-    const collapsable = computed(() => props.collapsable || columnsRoot.props.collapsable);
-    const showCollapse = computed(() => props.showCollapse || columnsRoot.props.showCollapse);
-    const collapsed = ref(false);
-    const column = reactive({
-      uid: instance.uid,
-      slots,
-      props,
-      maxWidth: 0,
-      parentWidth: 0,
-      index: 0,
-      width: 0,
-      left: 0,
-      collapsable,
-      showCollapse,
-      collapsed
-    });
-    const columnStyle = 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 = 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` };
-      }
-    });
-    onMounted(() => {
-      columnsRoot.registerColumn(column);
-      columnsRoot.initColumnSize();
-    });
-    onUnmounted(() => {
-      columnsRoot.unregisterColumn(column.uid);
-      columnsRoot.initColumnSize();
-    });
-    const columnsCount = computed(() => columnsRoot.columns.value.length);
-    const ns = useNamespace("resizable-column");
-    const handleCollapse = () => {
-      if (forEditor.value) {
-        return;
-      }
-      columnsRoot.handleCollapse(column);
-    };
-    const handleExpand = () => {
-      if (forEditor.value) {
-        return;
-      }
-      columnsRoot.handleExpand(column);
-    };
-    return {
-      ns,
-      column,
-      columnsCount,
-      columnStyle,
-      resizerStyle,
-      handleCollapse,
-      handleExpand
-    };
-  }
+const resizableColumnProps = buildProps({
+  collapsable: Boolean,
+  showCollapse: Boolean,
+  widget: String,
+  maxWidth: String,
+  width: String
 });
-const _hoisted_1 = ["widget"];
-const _hoisted_2 = ["data-index"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ArrowLeft = resolveComponent("ArrowLeft");
-  const _component_el_icon = resolveComponent("el-icon");
-  const _component_el_button = resolveComponent("el-button");
-  const _component_ArrowRight = resolveComponent("ArrowRight");
-  return openBlock(), createElementBlock(Fragment, null, [
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.ns.b()),
-      widget: _ctx.widget,
-      style: normalizeStyle(_ctx.columnStyle)
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 14, _hoisted_1),
-    _ctx.column.index < _ctx.columnsCount - 1 ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(["resizer", { "collapsed": _ctx.column.collapsed }]),
-      style: normalizeStyle(_ctx.resizerStyle),
-      "data-index": _ctx.column.index
-    }, [
-      !_ctx.column.collapsed ? withDirectives((openBlock(), createBlock(_component_el_button, {
-        key: 0,
-        class: "left",
-        size: "small",
-        onClick: _ctx.handleCollapse,
-        disabled: !_ctx.column.collapsable
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(_component_ArrowLeft)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["onClick", "disabled"])), [
-        [vShow, _ctx.column.showCollapse]
-      ]) : withDirectives((openBlock(), createBlock(_component_el_button, {
-        key: 1,
-        class: "right",
-        size: "small",
-        onClick: _ctx.handleExpand,
-        disabled: !_ctx.column.collapsable
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(_component_ArrowRight)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 8, ["onClick", "disabled"])), [
-        [vShow, _ctx.column.showCollapse]
-      ])
-    ], 14, _hoisted_2)) : createCommentVNode("v-if", true)
-  ], 64);
-}
-var ResizableColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-column.vue"]]);
 
-export { ResizableColumn as default };
+export { resizableColumnProps };
 //# sourceMappingURL=resizable-column.mjs.map

package/es/components/resizable-columns/src/resizable-column.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-column.mjs","sources":["../../../../../../packages/components/resizable-columns/src/resizable-column.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"ns.b()\"\n    :widget=\"widget\"\n    :style=\"columnStyle\"\n  >\n    <slot />\n  </div>\n  <div v-if=\"column.index < columnsCount - 1\"\n       class=\"resizer\"\n       :class=\"{ 'collapsed': column.collapsed }\"\n       :style=\"resizerStyle\"\n       :data-index=\"column.index\">\n    <el-button v-if=\"!column.collapsed\"\n               class=\"left\" size=\"small\"\n               @click=\"handleCollapse\"\n               :disabled=\"!column.collapsable\"\n               v-show=\"column.showCollapse\"\n    ><el-icon><ArrowLeft /></el-icon></el-button>\n    <el-button v-else\n               class=\"right\" size=\"small\"\n               @click=\"handleExpand\"\n               :disabled=\"!column.collapsable\"\n               v-show=\"column.showCollapse\"\n    ><el-icon><ArrowRight /></el-icon></el-button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useNamespace } from '@element-plus/hooks'\nimport { resizableColumnProps } from './resizable-column'\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onMounted,\n  onUnmounted,\n  reactive,\n  ref\n} from 'vue'\nimport { throwError } from '../../../utils'\nimport { resizableColumnsRootContextKey } from './constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { useGlobalConfig } from '../../config-provider'\n\n\nexport default defineComponent({\n  name: 'ElResizableColumn',\n  components: { ArrowLeft, ArrowRight },\n  props: resizableColumnProps,\n  setup(props, { slots }) {\n    const forEditor = useGlobalConfig('forEditor')\n    const instance = getCurrentInstance()!\n\n    const columnsRoot = inject(resizableColumnsRootContextKey)\n    if (!columnsRoot)\n      throwError('ElResizableColumn', 'usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>')\n\n    const collapsable = computed(() => props.collapsable || columnsRoot.props.collapsable)\n    const showCollapse = computed(() => props.showCollapse || columnsRoot.props.showCollapse)\n    const collapsed = ref(false)\n\n    const column = reactive({\n      uid: instance.uid,\n      slots,\n      props,\n      maxWidth: 0,\n      parentWidth: 0,\n      index: 0,\n      width: 0,\n      left: 0,\n      collapsable,\n      showCollapse,\n      collapsed,\n    })\n\n    const columnStyle = computed(() => {\n      if (instance.parent && instance.parent.type.name === 'ElResizableColumns' && instance.parent.props.direction === 'vertical') {\n        return { height: `${column.width}px`, top: `${column.left}px`, display: column.collapsed ? 'none' : 'unset', width: '100%' }\n      } else {\n        return { width: `${column.width}px`, left: `${column.left}px`, display: column.collapsed ? 'none' : 'unset' }\n      }\n    })\n    const resizerStyle = computed(() => {\n      if (instance.parent && instance.parent.type.name === 'ElResizableColumns' && instance.parent.props.direction === 'vertical') {\n        return { top: `${column.left + (column.collapsed ? 0 : column.width)}px`, width: '100%' }\n      } else {\n        return { left: `${column.left + (column.collapsed ? 0 : column.width)}px` }\n      }\n    })\n\n    onMounted(() => {\n      columnsRoot.registerColumn(column)\n      columnsRoot.initColumnSize()\n    })\n\n    onUnmounted(() => {\n      columnsRoot.unregisterColumn(column.uid)\n      columnsRoot.initColumnSize()\n    })\n\n    const columnsCount = computed(() => columnsRoot.columns.value.length)\n\n    const ns = useNamespace('resizable-column')\n\n    const handleCollapse = () => {\n      if (forEditor.value) {\n        return\n      }\n      columnsRoot.handleCollapse(column)\n    }\n    const handleExpand = () => {\n      if (forEditor.value) {\n        return\n      }\n      columnsRoot.handleExpand(column)\n    }\n\n    return {\n      ns,\n      column,\n      columnsCount,\n      columnStyle,\n      resizerStyle,\n\n      handleCollapse,\n      handleExpand\n    }\n  }\n})\n</script>\n"],"names":["_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_openBlock","_createElementBlock","_createBlock","_createVNode","_withCtx","_vShow","_withDirectives"],"mappings":"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"}
+{"version":3,"file":"resizable-column.mjs","sources":["../../../../../../packages/components/resizable-columns/src/resizable-column.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type ResizableColumn from './resizable-column.vue'\n\nexport const resizableColumnProps = buildProps({\n  collapsable: Boolean,\n  showCollapse: Boolean,\n  widget: String,\n  maxWidth: String,\n  width: String\n} as const)\n\nexport type ResizableColumnProps = ExtractPropTypes<typeof resizableColumnProps>\n\nexport type ResizableColumnInstance = InstanceType<typeof ResizableColumn>\n"],"names":[],"mappings":";;;AACY,MAAC,oBAAoB,GAAG,UAAU,CAAC;AAC/C,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,YAAY,EAAE,OAAO;AACvB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,QAAQ,EAAE,MAAM;AAClB,EAAE,KAAK,EAAE,MAAM;AACf,CAAC;;;;"}

package/es/components/resizable-columns/src/resizable-column2.mjs

@@ -1,13 +1,150 @@
+import '../../../hooks/index.mjs';
+import { resizableColumnProps } from './resizable-column.mjs';
+import { defineComponent, getCurrentInstance, inject, computed, ref, reactive, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, withDirectives, createBlock, withCtx, createVNode, vShow, createCommentVNode } from 'vue';
 import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { resizableColumnsRootContextKey } from './constants.mjs';
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
+import '../../config-provider/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-const resizableColumnProps = buildProps({
-  collapsable: Boolean,
-  showCollapse: Boolean,
-  widget: String,
-  maxWidth: String,
-  width: String
+const _sfc_main = defineComponent({
+  name: "ElResizableColumn",
+  components: { ArrowLeft, ArrowRight },
+  props: resizableColumnProps,
+  setup(props, { slots }) {
+    const forEditor = useGlobalConfig("forEditor");
+    const instance = getCurrentInstance();
+    const columnsRoot = inject(resizableColumnsRootContextKey);
+    if (!columnsRoot)
+      throwError("ElResizableColumn", "usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>");
+    const collapsable = computed(() => props.collapsable || columnsRoot.props.collapsable);
+    const showCollapse = computed(() => props.showCollapse || columnsRoot.props.showCollapse);
+    const collapsed = ref(false);
+    const column = reactive({
+      uid: instance.uid,
+      slots,
+      props,
+      maxWidth: 0,
+      parentWidth: 0,
+      index: 0,
+      width: 0,
+      left: 0,
+      collapsable,
+      showCollapse,
+      collapsed
+    });
+    const columnStyle = 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 = 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` };
+      }
+    });
+    onMounted(() => {
+      columnsRoot.registerColumn(column);
+      columnsRoot.initColumnSize();
+    });
+    onUnmounted(() => {
+      columnsRoot.unregisterColumn(column.uid);
+      columnsRoot.initColumnSize();
+    });
+    const columnsCount = computed(() => columnsRoot.columns.value.length);
+    const ns = useNamespace("resizable-column");
+    const handleCollapse = () => {
+      if (forEditor.value) {
+        return;
+      }
+      columnsRoot.handleCollapse(column);
+    };
+    const handleExpand = () => {
+      if (forEditor.value) {
+        return;
+      }
+      columnsRoot.handleExpand(column);
+    };
+    return {
+      ns,
+      column,
+      columnsCount,
+      columnStyle,
+      resizerStyle,
+      handleCollapse,
+      handleExpand
+    };
+  }
 });
+const _hoisted_1 = ["widget"];
+const _hoisted_2 = ["data-index"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowLeft = resolveComponent("ArrowLeft");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  return openBlock(), createElementBlock(Fragment, null, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.ns.b()),
+      widget: _ctx.widget,
+      style: normalizeStyle(_ctx.columnStyle)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 14, _hoisted_1),
+    _ctx.column.index < _ctx.columnsCount - 1 ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(["resizer", { "collapsed": _ctx.column.collapsed }]),
+      style: normalizeStyle(_ctx.resizerStyle),
+      "data-index": _ctx.column.index
+    }, [
+      !_ctx.column.collapsed ? withDirectives((openBlock(), createBlock(_component_el_button, {
+        key: 0,
+        class: "left",
+        size: "small",
+        onClick: _ctx.handleCollapse,
+        disabled: !_ctx.column.collapsable
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_ArrowLeft)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["onClick", "disabled"])), [
+        [vShow, _ctx.column.showCollapse]
+      ]) : withDirectives((openBlock(), createBlock(_component_el_button, {
+        key: 1,
+        class: "right",
+        size: "small",
+        onClick: _ctx.handleExpand,
+        disabled: !_ctx.column.collapsable
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_ArrowRight)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["onClick", "disabled"])), [
+        [vShow, _ctx.column.showCollapse]
+      ])
+    ], 14, _hoisted_2)) : createCommentVNode("v-if", true)
+  ], 64);
+}
+var ResizableColumn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-column.vue"]]);
 
-export { resizableColumnProps };
+export { ResizableColumn as default };
 //# sourceMappingURL=resizable-column2.mjs.map

package/es/components/resizable-columns/src/resizable-column2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-column2.mjs","sources":["../../../../../../packages/components/resizable-columns/src/resizable-column.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type ResizableColumn from './resizable-column.vue'\n\nexport const resizableColumnProps = buildProps({\n  collapsable: Boolean,\n  showCollapse: Boolean,\n  widget: String,\n  maxWidth: String,\n  width: String\n} as const)\n\nexport type ResizableColumnProps = ExtractPropTypes<typeof resizableColumnProps>\n\nexport type ResizableColumnInstance = InstanceType<typeof ResizableColumn>\n"],"names":[],"mappings":";;;AACY,MAAC,oBAAoB,GAAG,UAAU,CAAC;AAC/C,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,YAAY,EAAE,OAAO;AACvB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,QAAQ,EAAE,MAAM;AAClB,EAAE,KAAK,EAAE,MAAM;AACf,CAAC;;;;"}
+{"version":3,"file":"resizable-column2.mjs","sources":["../../../../../../packages/components/resizable-columns/src/resizable-column.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"ns.b()\"\n    :widget=\"widget\"\n    :style=\"columnStyle\"\n  >\n    <slot />\n  </div>\n  <div v-if=\"column.index < columnsCount - 1\"\n       class=\"resizer\"\n       :class=\"{ 'collapsed': column.collapsed }\"\n       :style=\"resizerStyle\"\n       :data-index=\"column.index\">\n    <el-button v-if=\"!column.collapsed\"\n               class=\"left\" size=\"small\"\n               @click=\"handleCollapse\"\n               :disabled=\"!column.collapsable\"\n               v-show=\"column.showCollapse\"\n    ><el-icon><ArrowLeft /></el-icon></el-button>\n    <el-button v-else\n               class=\"right\" size=\"small\"\n               @click=\"handleExpand\"\n               :disabled=\"!column.collapsable\"\n               v-show=\"column.showCollapse\"\n    ><el-icon><ArrowRight /></el-icon></el-button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { useNamespace } from '@element-plus/hooks'\nimport { resizableColumnProps } from './resizable-column'\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onMounted,\n  onUnmounted,\n  reactive,\n  ref\n} from 'vue'\nimport { throwError } from '../../../utils'\nimport { resizableColumnsRootContextKey } from './constants'\nimport { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'\nimport { useGlobalConfig } from '../../config-provider'\n\n\nexport default defineComponent({\n  name: 'ElResizableColumn',\n  components: { ArrowLeft, ArrowRight },\n  props: resizableColumnProps,\n  setup(props, { slots }) {\n    const forEditor = useGlobalConfig('forEditor')\n    const instance = getCurrentInstance()!\n\n    const columnsRoot = inject(resizableColumnsRootContextKey)\n    if (!columnsRoot)\n      throwError('ElResizableColumn', 'usage: <el-resizable-columns><el-resizable-column /></el-resizable-columns/>')\n\n    const collapsable = computed(() => props.collapsable || columnsRoot.props.collapsable)\n    const showCollapse = computed(() => props.showCollapse || columnsRoot.props.showCollapse)\n    const collapsed = ref(false)\n\n    const column = reactive({\n      uid: instance.uid,\n      slots,\n      props,\n      maxWidth: 0,\n      parentWidth: 0,\n      index: 0,\n      width: 0,\n      left: 0,\n      collapsable,\n      showCollapse,\n      collapsed,\n    })\n\n    const columnStyle = computed(() => {\n      if (instance.parent && instance.parent.type.name === 'ElResizableColumns' && instance.parent.props.direction === 'vertical') {\n        return { height: `${column.width}px`, top: `${column.left}px`, display: column.collapsed ? 'none' : 'unset', width: '100%' }\n      } else {\n        return { width: `${column.width}px`, left: `${column.left}px`, display: column.collapsed ? 'none' : 'unset' }\n      }\n    })\n    const resizerStyle = computed(() => {\n      if (instance.parent && instance.parent.type.name === 'ElResizableColumns' && instance.parent.props.direction === 'vertical') {\n        return { top: `${column.left + (column.collapsed ? 0 : column.width)}px`, width: '100%' }\n      } else {\n        return { left: `${column.left + (column.collapsed ? 0 : column.width)}px` }\n      }\n    })\n\n    onMounted(() => {\n      columnsRoot.registerColumn(column)\n      columnsRoot.initColumnSize()\n    })\n\n    onUnmounted(() => {\n      columnsRoot.unregisterColumn(column.uid)\n      columnsRoot.initColumnSize()\n    })\n\n    const columnsCount = computed(() => columnsRoot.columns.value.length)\n\n    const ns = useNamespace('resizable-column')\n\n    const handleCollapse = () => {\n      if (forEditor.value) {\n        return\n      }\n      columnsRoot.handleCollapse(column)\n    }\n    const handleExpand = () => {\n      if (forEditor.value) {\n        return\n      }\n      columnsRoot.handleExpand(column)\n    }\n\n    return {\n      ns,\n      column,\n      columnsCount,\n      columnStyle,\n      resizerStyle,\n\n      handleCollapse,\n      handleExpand\n    }\n  }\n})\n</script>\n"],"names":["_createElementVNode","_normalizeClass","_normalizeStyle","_renderSlot","_openBlock","_createElementBlock","_createBlock","_createVNode","_withCtx","_vShow","_withDirectives"],"mappings":"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"}

package/es/components/resizable-columns/src/resizable-columns.mjs

@@ -1,26 +1,269 @@
-import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, ref, getCurrentInstance, computed, provide, reactive, onMounted, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import '../../../hooks/index.mjs';
+import { resizableColumnsRootContextKey } from './constants.mjs';
+import { resizableColumnsProps } from './resizable-columns2.mjs';
+import '../../config-provider/index.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useGlobalConfig } from '../../config-provider/src/hooks/use-global-config.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useOrderedChildren } from '../../../hooks/use-ordered-children/index.mjs';
 
-const resizableColumnsProps = buildProps({
-  collapsable: {
-    type: Boolean,
-    default: true
-  },
-  showCollapse: {
-    type: Boolean,
-    default: true
-  },
-  widget: String,
-  minWidth: {
-    type: Number,
-    default: 50
-  },
-  direction: {
-    type: String,
-    values: ["horizontal", "vertical"],
-    default: "horizontal"
+const _sfc_main = defineComponent({
+  name: "ElResizableColumns",
+  props: resizableColumnsProps,
+  emits: ["collapse", "expand"],
+  setup(props, { emit }) {
+    const forEditor = useGlobalConfig("forEditor");
+    const ns = useNamespace("resizable-columns");
+    const MIN_WIDTH = props.minWidth > 0 ? props.minWidth : 50;
+    const columnsContainer = ref(null);
+    const parentWidth = ref(0);
+    const {
+      children: columns,
+      addChild: registerColumn,
+      removeChild: unregisterColumn
+    } = useOrderedChildren(getCurrentInstance(), "ElResizableColumn");
+    const isVertical = computed(() => props.direction === "vertical");
+    const columnsKls = 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++) {
+          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 = (parentWidth.value - 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);
+      }
+    };
+    const initColumnSize = () => {
+      let remainWidth = parentWidth.value;
+      const usedWidth = {};
+      columns.value.forEach((item, index) => {
+        if (item.props.width && !forEditor.value) {
+          let uWidth;
+          if (item.props.width.endsWith("px")) {
+            uWidth = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 2)));
+          } else if (item.props.width.endsWith("%")) {
+            uWidth = Number.parseInt(item.props.width.slice(0, Math.max(0, item.props.width.length - 1))) / 100 * parentWidth.value;
+          }
+          if (uWidth > 0) {
+            usedWidth[String(index)] = uWidth;
+            remainWidth -= uWidth;
+          }
+        }
+      });
+      let passedWidth = 0;
+      columns.value.forEach((item, index) => {
+        if (item.props.maxWidth) {
+          if (item.props.maxWidth.endsWith("px")) {
+            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 = Number.parseInt(item.props.maxWidth.slice(0, Math.max(0, item.props.maxWidth.length - 1))) / 100 * parentWidth.value;
+          }
+        }
+        item.left = passedWidth;
+        if (columns.value.length === 1) {
+          item.width = parentWidth.value;
+        } else {
+          if (usedWidth[String(index)]) {
+            item.width = usedWidth[String(index)];
+          } else {
+            item.width = remainWidth / (columns.value.length - Object.keys(usedWidth).length);
+            usedWidth[String(index)] = item.width;
+            remainWidth -= item.width;
+          }
+        }
+        passedWidth += item.width;
+        item.index = index;
+        item.collapsed = false;
+      });
+    };
+    provide(resizableColumnsRootContextKey, {
+      props,
+      columns,
+      registerColumn,
+      unregisterColumn,
+      handleCollapse,
+      handleExpand,
+      initColumnSize
+    });
+    const resizeConfig = reactive({
+      last: {
+        pos: 0,
+        index: 0
+      }
+    });
+    onMounted(() => {
+      if (columnsContainer.value) {
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            const width = props.direction === "horizontal" ? entry.contentRect.width : entry.contentRect.height;
+            parentWidth.value = width;
+            initColumnSize();
+          }
+        });
+        resizeObserver.observe(columnsContainer.value);
+      }
+    });
+    const handleMousedown = (e) => {
+      if (forEditor.value) {
+        return;
+      }
+      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 = isVertical.value ? e.clientY : e.clientX;
+        resizeConfig.last.index = Number.parseInt(index);
+        document.addEventListener("mousemove", handleMousemove);
+        document.addEventListener("mouseup", handleMouseup);
+      }
+    };
+    const handleMousemove = (e) => {
+      const index = resizeConfig.last.index;
+      let offsetX = (isVertical.value ? e.clientY : e.clientX) - resizeConfig.last.pos;
+      let leftIndex = index;
+      while (leftIndex >= 0 && columns.value[leftIndex].width <= MIN_WIDTH) {
+        leftIndex--;
+      }
+      let rightIndex = index + 1;
+      while (rightIndex < columns.value.length && columns.value[rightIndex].width <= MIN_WIDTH) {
+        rightIndex++;
+      }
+      if (leftIndex < 0 && offsetX < 0) {
+        return;
+      }
+      if (rightIndex >= columns.value.length && offsetX > 0) {
+        return;
+      }
+      if (offsetX < 0) {
+        const newLeftWidth = columns.value[leftIndex].width + offsetX;
+        const newRightWidth = columns.value[leftIndex + 1].width - offsetX;
+        const rightMaxWidth = columns.value[leftIndex + 1].maxWidth;
+        if (newLeftWidth <= MIN_WIDTH) {
+          offsetX = MIN_WIDTH - columns.value[leftIndex].width;
+          columns.value[leftIndex].width = MIN_WIDTH;
+        } else if (rightMaxWidth > 0 && newRightWidth > rightMaxWidth) {
+          offsetX = rightMaxWidth - columns.value[leftIndex + 1].width;
+          columns.value[leftIndex].width = columns.value[leftIndex].width + offsetX;
+        } else {
+          columns.value[leftIndex].width = newLeftWidth;
+        }
+        for (let i = index; i > leftIndex; i--) {
+          columns.value[i].left = columns.value[i].left + offsetX;
+        }
+        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 = 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;
+        const leftMaxWidth = columns.value[rightIndex - 1].maxWidth;
+        if (newRightWidth <= MIN_WIDTH) {
+          offsetX = columns.value[rightIndex].width - MIN_WIDTH;
+          columns.value[rightIndex].width = MIN_WIDTH;
+        } else if (leftMaxWidth > 0 && newLeftWidth > leftMaxWidth) {
+          offsetX = leftMaxWidth - columns.value[rightIndex - 1].width;
+          columns.value[rightIndex].width = columns.value[rightIndex].width - offsetX;
+        } else {
+          columns.value[rightIndex].width = newRightWidth;
+        }
+        for (let i = index + 1; i <= rightIndex; i++) {
+          columns.value[i].left = columns.value[i].left + offsetX;
+        }
+        columns.value[index].width = columns.value[index].width + offsetX;
+        resizeConfig.last.pos = isVertical.value ? e.clientY : e.clientX;
+      }
+    };
+    const handleMouseup = () => {
+      document.onselectstart = null;
+      document.ondragstart = null;
+      document.removeEventListener("mousemove", handleMousemove);
+      document.removeEventListener("mousemove", handleMouseup);
+    };
+    const setColumnWidth = (columnIndex, width) => {
+      setTimeout(() => {
+        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) => {
+      setTimeout(() => {
+        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,
+      columnsKls,
+      handleMousedown,
+      setColumnWidth,
+      toggleColumnCollapse
+    };
   }
 });
+const _hoisted_1 = ["widget"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "columnsContainer",
+    class: normalizeClass(_ctx.columnsKls),
+    widget: _ctx.widget,
+    onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 42, _hoisted_1);
+}
+var ResizableColumns = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\workspace\\element-pe\\packages\\components\\resizable-columns\\src\\resizable-columns.vue"]]);
 
-export { resizableColumnsProps };
+export { ResizableColumns as default };
 //# sourceMappingURL=resizable-columns.mjs.map