@wfrog/vc-ui 1.2.0 → 1.3.0

package/dist/es/components/dual-pane/dual-pane.mjs

@@ -0,0 +1,855 @@
+import './index.css'
+import { c as buildProps, h as isString, N as NOOP, u as useNamespace, m as isObject, t as throwError } from '../../chunk/DO-mBaf5.mjs';
+import { shallowRef, defineComponent, h, triggerRef, onMounted, isVNode, ref, computed, watch, toRef, getCurrentInstance, provide, reactive, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createVNode, createCommentVNode, nextTick, createElementVNode, createBlock, resolveDynamicComponent, inject, toRefs, onBeforeUnmount, Fragment, mergeProps, withCtx, useCssVars } from 'vue';
+import { C as Component$1 } from '../scrollbar/scrollbar.mjs';
+import { _ as _export_sfc, w as withInstall, a as withNoopInstall } from '../../chunk/Dn-BFXcJ.mjs';
+import { useElementSize } from '@vueuse/core';
+import { f as flattedChildren } from '../../chunk/C_7t9blX.mjs';
+import { ArrowLeft, ArrowUp, ArrowRight, ArrowDown } from '@element-plus/icons-vue';
+import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
+
+const getOrderedChildren = (vm, childComponentName, children) => {
+  const nodes = flattedChildren(vm.subTree).filter(
+    (n) => {
+      var _a;
+      return isVNode(n) && ((_a = n.type) == null ? void 0 : _a.name) === childComponentName && !!n.component;
+    }
+  );
+  const uids = nodes.map((n) => n.component.uid);
+  return uids.map((uid) => children[uid]).filter((p) => !!p);
+};
+const useOrderedChildren = (vm, childComponentName) => {
+  const children = shallowRef({});
+  const orderedChildren = shallowRef([]);
+  const nodesMap = /* @__PURE__ */ new WeakMap();
+  const addChild = (child) => {
+    children.value[child.uid] = child;
+    triggerRef(children);
+    onMounted(() => {
+      const childNode = child.getVnode().el;
+      const parentNode = childNode.parentNode;
+      if (!nodesMap.has(parentNode)) {
+        nodesMap.set(parentNode, []);
+        const originalFn = parentNode.insertBefore.bind(parentNode);
+        parentNode.insertBefore = (node, anchor) => {
+          const shouldSortChildren = nodesMap.get(parentNode).some((el) => node === el || anchor === el);
+          if (shouldSortChildren)
+            triggerRef(children);
+          return originalFn(node, anchor);
+        };
+      }
+      nodesMap.get(parentNode).push(childNode);
+    });
+  };
+  const removeChild = (child) => {
+    delete children.value[child.uid];
+    triggerRef(children);
+    const childNode = child.getVnode().el;
+    const parentNode = childNode.parentNode;
+    const childNodes = nodesMap.get(parentNode);
+    const index = childNodes.indexOf(childNode);
+    childNodes.splice(index, 1);
+  };
+  const sortChildren = () => {
+    orderedChildren.value = getOrderedChildren(
+      vm,
+      childComponentName,
+      children.value
+    );
+  };
+  const IsolatedRenderer = (props) => {
+    return props.render();
+  };
+  const ChildrenSorter = defineComponent({
+    setup(_, { slots }) {
+      return () => {
+        sortChildren();
+        return slots.default ? h(IsolatedRenderer, {
+          render: slots.default
+        }) : null;
+      };
+    }
+  });
+  return {
+    children: orderedChildren,
+    addChild,
+    removeChild,
+    ChildrenSorter
+  };
+};
+
+const splitterProps = buildProps({
+  layout: {
+    type: String,
+    default: "horizontal",
+    values: ["horizontal", "vertical"]
+  },
+  lazy: Boolean
+});
+const splitterEmits = {
+  resizeStart: (index, sizes) => true,
+  resize: (index, sizes) => true,
+  resizeEnd: (index, sizes) => true,
+  collapse: (index, type, sizes) => true
+};
+
+const splitterRootContextKey = Symbol(
+  "splitterRootContextKey"
+);
+
+function useContainer(layout) {
+  const containerEl = ref();
+  const { width, height } = useElementSize(containerEl);
+  const containerSize = computed(() => {
+    return layout.value === "horizontal" ? width.value : height.value;
+  });
+  return { containerEl, containerSize };
+}
+
+function getPct(str) {
+  return Number(str.slice(0, -1)) / 100;
+}
+function getPx(str) {
+  return Number(str.slice(0, -2));
+}
+function isPct(itemSize) {
+  return isString(itemSize) && itemSize.endsWith("%");
+}
+function isPx(itemSize) {
+  return isString(itemSize) && itemSize.endsWith("px");
+}
+function useSize(panels, containerSize) {
+  const propSizes = computed(() => panels.value.map((i) => i.size));
+  const panelCounts = computed(() => panels.value.length);
+  const percentSizes = ref([]);
+  watch([propSizes, panelCounts, containerSize], () => {
+    var _a;
+    let ptgList = [];
+    let emptyCount = 0;
+    for (let i = 0; i < panelCounts.value; i += 1) {
+      const itemSize = (_a = panels.value[i]) == null ? void 0 : _a.size;
+      if (isPct(itemSize)) {
+        ptgList[i] = getPct(itemSize);
+      } else if (isPx(itemSize)) {
+        ptgList[i] = getPx(itemSize) / containerSize.value;
+      } else if (itemSize || itemSize === 0) {
+        const num = Number(itemSize);
+        if (!Number.isNaN(num)) {
+          ptgList[i] = num / containerSize.value;
+        }
+      } else {
+        emptyCount += 1;
+        ptgList[i] = void 0;
+      }
+    }
+    const totalPtg = ptgList.reduce((acc, ptg) => acc + (ptg || 0), 0);
+    if (totalPtg > 1 || !emptyCount) {
+      const scale = 1 / totalPtg;
+      ptgList = ptgList.map((ptg) => ptg === void 0 ? 0 : ptg * scale);
+    } else {
+      const avgRest = (1 - totalPtg) / emptyCount;
+      ptgList = ptgList.map((ptg) => ptg === void 0 ? avgRest : ptg);
+    }
+    percentSizes.value = ptgList;
+  });
+  const ptg2px = (ptg) => ptg * containerSize.value;
+  const pxSizes = computed(() => percentSizes.value.map(ptg2px));
+  return { percentSizes, pxSizes };
+}
+
+function useResize(panels, containerSize, pxSizes, lazy) {
+  const ptg2px = (ptg) => ptg * containerSize.value || 0;
+  function getLimitSize(str, defaultLimit) {
+    if (isPct(str)) {
+      return ptg2px(getPct(str));
+    } else if (isPx(str)) {
+      return getPx(str);
+    }
+    return str != null ? str : defaultLimit;
+  }
+  const lazyOffset = ref(0);
+  const movingIndex = ref(null);
+  let cachePxSizes = [];
+  let updatePanelSizes = NOOP;
+  const limitSizes = computed(
+    () => panels.value.map((item) => [item.min, item.max])
+  );
+  watch(lazy, () => {
+    if (lazyOffset.value) {
+      const mouseup = new MouseEvent("mouseup", { bubbles: true });
+      window.dispatchEvent(mouseup);
+    }
+  });
+  const onMoveStart = (index) => {
+    lazyOffset.value = 0;
+    movingIndex.value = { index, confirmed: false };
+    cachePxSizes = pxSizes.value;
+  };
+  const onMoving = (index, offset) => {
+    var _a, _b;
+    let confirmedIndex = null;
+    if ((!movingIndex.value || !movingIndex.value.confirmed) && offset !== 0) {
+      if (offset > 0) {
+        confirmedIndex = index;
+        movingIndex.value = { index, confirmed: true };
+      } else {
+        for (let i = index; i >= 0; i -= 1) {
+          if (cachePxSizes[i] > 0) {
+            confirmedIndex = i;
+            movingIndex.value = { index: i, confirmed: true };
+            break;
+          }
+        }
+      }
+    }
+    const mergedIndex = (_b = confirmedIndex != null ? confirmedIndex : (_a = movingIndex.value) == null ? void 0 : _a.index) != null ? _b : index;
+    const numSizes = [...cachePxSizes];
+    const nextIndex = mergedIndex + 1;
+    const startMinSize = getLimitSize(limitSizes.value[mergedIndex][0], 0);
+    const endMinSize = getLimitSize(limitSizes.value[nextIndex][0], 0);
+    const startMaxSize = getLimitSize(
+      limitSizes.value[mergedIndex][1],
+      containerSize.value || 0
+    );
+    const endMaxSize = getLimitSize(
+      limitSizes.value[nextIndex][1],
+      containerSize.value || 0
+    );
+    let mergedOffset = offset;
+    if (numSizes[mergedIndex] + mergedOffset < startMinSize) {
+      mergedOffset = startMinSize - numSizes[mergedIndex];
+    }
+    if (numSizes[nextIndex] - mergedOffset < endMinSize) {
+      mergedOffset = numSizes[nextIndex] - endMinSize;
+    }
+    if (numSizes[mergedIndex] + mergedOffset > startMaxSize) {
+      mergedOffset = startMaxSize - numSizes[mergedIndex];
+    }
+    if (numSizes[nextIndex] - mergedOffset > endMaxSize) {
+      mergedOffset = numSizes[nextIndex] - endMaxSize;
+    }
+    numSizes[mergedIndex] += mergedOffset;
+    numSizes[nextIndex] -= mergedOffset;
+    lazyOffset.value = mergedOffset;
+    updatePanelSizes = () => {
+      panels.value.forEach((panel, index2) => {
+        panel.size = numSizes[index2];
+      });
+      updatePanelSizes = NOOP;
+    };
+    if (!lazy.value) {
+      updatePanelSizes();
+    }
+  };
+  const onMoveEnd = () => {
+    if (lazy.value) {
+      updatePanelSizes();
+    }
+    lazyOffset.value = 0;
+    movingIndex.value = null;
+    cachePxSizes = [];
+  };
+  const cacheCollapsedSize = [];
+  const onCollapse = (index, type) => {
+    if (!cacheCollapsedSize.length) {
+      cacheCollapsedSize.push(...pxSizes.value);
+    }
+    const currentSizes = pxSizes.value;
+    const currentIndex = type === "start" ? index : index + 1;
+    const targetIndex = type === "start" ? index + 1 : index;
+    const currentSize = currentSizes[currentIndex];
+    const targetSize = currentSizes[targetIndex];
+    if (currentSize !== 0 && targetSize !== 0) {
+      currentSizes[currentIndex] = 0;
+      currentSizes[targetIndex] += currentSize;
+      cacheCollapsedSize[index] = currentSize;
+    } else {
+      const totalSize = currentSize + targetSize;
+      const targetCacheCollapsedSize = cacheCollapsedSize[index];
+      const currentCacheCollapsedSize = totalSize - targetCacheCollapsedSize;
+      currentSizes[targetIndex] = targetCacheCollapsedSize;
+      currentSizes[currentIndex] = currentCacheCollapsedSize;
+    }
+    panels.value.forEach((panel, index2) => {
+      panel.size = currentSizes[index2];
+    });
+  };
+  return {
+    lazyOffset,
+    onMoveStart,
+    onMoving,
+    onMoveEnd,
+    movingIndex,
+    onCollapse
+  };
+}
+
+const _sfc_main$3 = defineComponent({
+  ...{
+    name: "ElSplitter"
+  },
+  __name: "splitter",
+  props: splitterProps,
+  emits: splitterEmits,
+  setup(__props, { emit: __emit }) {
+    const ns = useNamespace("splitter");
+    const emits = __emit;
+    const props = __props;
+    const layout = toRef(props, "layout");
+    const lazy = toRef(props, "lazy");
+    const { containerEl, containerSize } = useContainer(layout);
+    const {
+      removeChild: unregisterPanel,
+      children: panels,
+      addChild: registerPanel,
+      ChildrenSorter: PanelsSorter
+    } = useOrderedChildren(getCurrentInstance(), "ElSplitterPanel");
+    watch(panels, () => {
+      movingIndex.value = null;
+      panels.value.forEach((instance, index) => {
+        instance.setIndex(index);
+      });
+    });
+    const { percentSizes, pxSizes } = useSize(panels, containerSize);
+    const {
+      lazyOffset,
+      movingIndex,
+      onMoveStart,
+      onMoving,
+      onMoveEnd,
+      onCollapse
+    } = useResize(panels, containerSize, pxSizes, lazy);
+    const splitterStyles = computed(() => {
+      return {
+        [ns.cssVarBlockName("bar-offset")]: lazy.value ? `${lazyOffset.value}px` : void 0
+      };
+    });
+    const onResizeStart = (index) => {
+      onMoveStart(index);
+      emits("resizeStart", index, pxSizes.value);
+    };
+    const onResize = (index, offset) => {
+      onMoving(index, offset);
+      if (!lazy.value) {
+        emits("resize", index, pxSizes.value);
+      }
+    };
+    const onResizeEnd = async (index) => {
+      onMoveEnd();
+      await nextTick();
+      emits("resizeEnd", index, pxSizes.value);
+    };
+    const onCollapsible = (index, type) => {
+      onCollapse(index, type);
+      emits("collapse", index, type, pxSizes.value);
+    };
+    provide(
+      splitterRootContextKey,
+      reactive({
+        panels,
+        percentSizes,
+        pxSizes,
+        layout,
+        lazy,
+        movingIndex,
+        containerSize,
+        onMoveStart: onResizeStart,
+        onMoving: onResize,
+        onMoveEnd: onResizeEnd,
+        onCollapse: onCollapsible,
+        registerPanel,
+        unregisterPanel
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "containerEl",
+          ref: containerEl,
+          class: normalizeClass([unref(ns).b(), unref(ns).e(layout.value)]),
+          style: normalizeStyle(splitterStyles.value)
+        },
+        [
+          renderSlot(_ctx.$slots, "default"),
+          createVNode(unref(PanelsSorter)),
+          createCommentVNode(" Prevent iframe touch events from breaking "),
+          unref(movingIndex) ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass([unref(ns).e("mask"), unref(ns).e(`mask-${layout.value}`)])
+            },
+            null,
+            2
+          )) : createCommentVNode("v-if", true)
+        ],
+        6
+      );
+    };
+  }
+});
+var Splitter = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/splitter/src/splitter.vue"]]);
+
+function getCollapsible(collapsible) {
+  if (collapsible && isObject(collapsible)) {
+    return collapsible;
+  }
+  return {
+    start: !!collapsible,
+    end: !!collapsible
+  };
+}
+function isCollapsible(panel, size, nextPanel, nextSize) {
+  if ((panel == null ? void 0 : panel.collapsible.end) && size > 0) {
+    return true;
+  }
+  if ((nextPanel == null ? void 0 : nextPanel.collapsible.start) && nextSize === 0 && size > 0) {
+    return true;
+  }
+  return false;
+}
+
+const _sfc_main$2 = defineComponent({
+  ...{
+    name: "ElSplitterBar"
+  },
+  __name: "split-bar",
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    layout: {
+      type: String,
+      values: ["horizontal", "vertical"],
+      default: "horizontal"
+    },
+    resizable: {
+      type: Boolean,
+      default: true
+    },
+    lazy: Boolean,
+    startCollapsible: Boolean,
+    endCollapsible: Boolean
+  },
+  emits: ["moveStart", "moving", "moveEnd", "collapse"],
+  setup(__props, { emit: __emit }) {
+    const ns = useNamespace("splitter-bar");
+    const props = __props;
+    const emit = __emit;
+    const isHorizontal = computed(() => props.layout === "horizontal");
+    const barWrapStyles = computed(() => {
+      if (isHorizontal.value) {
+        return { width: 0 };
+      }
+      return { height: 0 };
+    });
+    const draggerStyles = computed(() => {
+      return {
+        width: isHorizontal.value ? "16px" : "100%",
+        height: isHorizontal.value ? "100%" : "16px",
+        cursor: !props.resizable ? "auto" : isHorizontal.value ? "ew-resize" : "ns-resize",
+        touchAction: "none"
+      };
+    });
+    const draggerPseudoClass = computed(() => {
+      const prefix = ns.e("dragger");
+      return {
+        [`${prefix}-horizontal`]: isHorizontal.value,
+        [`${prefix}-vertical`]: !isHorizontal.value,
+        [`${prefix}-active`]: !!startPos.value
+      };
+    });
+    const startPos = ref(null);
+    const onMousedown = (e) => {
+      if (!props.resizable)
+        return;
+      startPos.value = [e.pageX, e.pageY];
+      emit("moveStart", props.index);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+    };
+    const onTouchStart = (e) => {
+      if (props.resizable && e.touches.length === 1) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        startPos.value = [touch.pageX, touch.pageY];
+        emit("moveStart", props.index);
+        window.addEventListener("touchend", onTouchEnd);
+        window.addEventListener("touchmove", onTouchMove);
+      }
+    };
+    const onMouseMove = (e) => {
+      const { pageX, pageY } = e;
+      const offsetX = pageX - startPos.value[0];
+      const offsetY = pageY - startPos.value[1];
+      const offset = isHorizontal.value ? offsetX : offsetY;
+      emit("moving", props.index, offset);
+    };
+    const onTouchMove = (e) => {
+      if (e.touches.length === 1) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const offsetX = touch.pageX - startPos.value[0];
+        const offsetY = touch.pageY - startPos.value[1];
+        const offset = isHorizontal.value ? offsetX : offsetY;
+        emit("moving", props.index, offset);
+      }
+    };
+    const onMouseUp = () => {
+      startPos.value = null;
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      emit("moveEnd", props.index);
+    };
+    const onTouchEnd = () => {
+      startPos.value = null;
+      window.removeEventListener("touchend", onTouchEnd);
+      window.removeEventListener("touchmove", onTouchMove);
+      emit("moveEnd", props.index);
+    };
+    const StartIcon = computed(() => isHorizontal.value ? ArrowLeft : ArrowUp);
+    const EndIcon = computed(() => isHorizontal.value ? ArrowRight : ArrowDown);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass([unref(ns).b()]),
+          style: normalizeStyle(barWrapStyles.value)
+        },
+        [
+          __props.startCollapsible ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass([unref(ns).e("collapse-icon"), unref(ns).e(`${__props.layout}-collapse-icon-start`)]),
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("collapse", __props.index, "start"))
+            },
+            [
+              renderSlot(_ctx.$slots, "start-collapsible", {}, () => [
+                (openBlock(), createBlock(resolveDynamicComponent(StartIcon.value), { style: { "width": "12px", "height": "12px" } }))
+              ])
+            ],
+            2
+          )) : createCommentVNode("v-if", true),
+          createElementVNode(
+            "div",
+            {
+              class: normalizeClass([
+                unref(ns).e("dragger"),
+                draggerPseudoClass.value,
+                unref(ns).is("disabled", !__props.resizable),
+                unref(ns).is("lazy", __props.resizable && __props.lazy)
+              ]),
+              style: normalizeStyle(draggerStyles.value),
+              onMousedown,
+              onTouchstart: onTouchStart
+            },
+            null,
+            38
+          ),
+          __props.endCollapsible ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 1,
+              class: normalizeClass([unref(ns).e("collapse-icon"), unref(ns).e(`${__props.layout}-collapse-icon-end`)]),
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("collapse", __props.index, "end"))
+            },
+            [
+              renderSlot(_ctx.$slots, "end-collapsible", {}, () => [
+                (openBlock(), createBlock(resolveDynamicComponent(EndIcon.value), { style: { "width": "12px", "height": "12px" } }))
+              ])
+            ],
+            2
+          )) : createCommentVNode("v-if", true)
+        ],
+        6
+      );
+    };
+  }
+});
+var SplitBar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/splitter/src/split-bar.vue"]]);
+
+const splitterPanelProps = buildProps({
+  min: {
+    type: [String, Number]
+  },
+  max: {
+    type: [String, Number]
+  },
+  size: {
+    type: [String, Number]
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  collapsible: Boolean
+});
+const splitterPanelEmits = {
+  "update:size": (value) => typeof value === "number" || typeof value === "string"
+};
+
+const COMPONENT_NAME = "ElSplitterPanel";
+const _sfc_main$1 = defineComponent({
+  ...{
+    name: COMPONENT_NAME
+  },
+  __name: "split-panel",
+  props: splitterPanelProps,
+  emits: splitterPanelEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("splitter-panel");
+    const props = __props;
+    const emits = __emit;
+    const splitterContext = inject(splitterRootContextKey);
+    if (!splitterContext)
+      throwError(
+        COMPONENT_NAME,
+        "usage: <el-splitter><el-splitter-panel /></el-splitter/>"
+      );
+    const { panels, layout, lazy, containerSize, pxSizes } = toRefs(splitterContext);
+    const {
+      registerPanel,
+      unregisterPanel,
+      onCollapse,
+      onMoveEnd,
+      onMoveStart,
+      onMoving
+    } = splitterContext;
+    const panelEl = ref();
+    const instance = getCurrentInstance();
+    const uid = instance.uid;
+    const index = ref(0);
+    const panel = computed(() => panels.value[index.value]);
+    const setIndex = (val) => {
+      index.value = val;
+    };
+    const panelSize = computed(() => {
+      var _a;
+      if (!panel.value)
+        return 0;
+      return (_a = pxSizes.value[index.value]) != null ? _a : 0;
+    });
+    const nextSize = computed(() => {
+      var _a;
+      if (!panel.value)
+        return 0;
+      return (_a = pxSizes.value[index.value + 1]) != null ? _a : 0;
+    });
+    const nextPanel = computed(() => {
+      if (panel.value) {
+        return panels.value[index.value + 1];
+      }
+      return null;
+    });
+    const isResizable = computed(() => {
+      var _a;
+      if (!nextPanel.value)
+        return false;
+      return props.resizable && ((_a = nextPanel.value) == null ? void 0 : _a.resizable) && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
+    });
+    const isShowBar = computed(() => {
+      if (!panel.value)
+        return false;
+      return index.value !== panels.value.length - 1;
+    });
+    const startCollapsible = computed(
+      () => isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value)
+    );
+    const endCollapsible = computed(
+      () => isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value)
+    );
+    function sizeToPx(str) {
+      if (isPct(str)) {
+        return getPct(str) * containerSize.value || 0;
+      } else if (isPx(str)) {
+        return getPx(str);
+      }
+      return str != null ? str : 0;
+    }
+    let isSizeUpdating = false;
+    watch(
+      () => props.size,
+      () => {
+        if (!isSizeUpdating && panel.value) {
+          if (!containerSize.value) {
+            panel.value.size = props.size;
+            return;
+          }
+          const size = sizeToPx(props.size);
+          const maxSize = sizeToPx(props.max);
+          const minSize = sizeToPx(props.min);
+          const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
+          if (finalSize !== size) {
+            emits("update:size", finalSize);
+          }
+          panel.value.size = finalSize;
+        }
+      }
+    );
+    watch(
+      () => {
+        var _a;
+        return (_a = panel.value) == null ? void 0 : _a.size;
+      },
+      (val) => {
+        if (val !== props.size) {
+          isSizeUpdating = true;
+          emits("update:size", val);
+          nextTick(() => isSizeUpdating = false);
+        }
+      }
+    );
+    watch(
+      () => props.resizable,
+      (val) => {
+        if (panel.value) {
+          panel.value.resizable = val;
+        }
+      }
+    );
+    const _panel = reactive({
+      el: panelEl.value,
+      uid,
+      getVnode: () => instance.vnode,
+      setIndex,
+      ...props,
+      collapsible: computed(() => getCollapsible(props.collapsible))
+    });
+    registerPanel(_panel);
+    onBeforeUnmount(() => unregisterPanel(_panel));
+    __expose({
+      splitterPanelRef: panelEl
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createElementVNode(
+            "div",
+            mergeProps({
+              ref_key: "panelEl",
+              ref: panelEl,
+              class: [unref(ns).b()],
+              style: { flexBasis: `${panelSize.value}px` }
+            }, _ctx.$attrs),
+            [
+              renderSlot(_ctx.$slots, "default")
+            ],
+            16
+          ),
+          isShowBar.value ? (openBlock(), createBlock(SplitBar, {
+            key: 0,
+            index: index.value,
+            layout: unref(layout),
+            lazy: unref(lazy),
+            resizable: isResizable.value,
+            "start-collapsible": startCollapsible.value,
+            "end-collapsible": endCollapsible.value,
+            onMoveStart: unref(onMoveStart),
+            onMoving: unref(onMoving),
+            onMoveEnd: unref(onMoveEnd),
+            onCollapse: unref(onCollapse)
+          }, {
+            "start-collapsible": withCtx(() => [
+              renderSlot(_ctx.$slots, "start-collapsible")
+            ]),
+            "end-collapsible": withCtx(() => [
+              renderSlot(_ctx.$slots, "end-collapsible")
+            ]),
+            _: 3
+          }, 8, ["index", "layout", "lazy", "resizable", "start-collapsible", "end-collapsible", "onMoveStart", "onMoving", "onMoveEnd", "onCollapse"])) : createCommentVNode("v-if", true)
+        ],
+        64
+      );
+    };
+  }
+});
+var SplitPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/splitter/src/split-panel.vue"]]);
+
+const ElSplitter = withInstall(Splitter, {
+  SplitPanel
+});
+const ElSplitterPanel = withNoopInstall(SplitPanel);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dual-pane",
+  props: {
+    layout: { default: "horizontal" },
+    lazy: { type: Boolean, default: true },
+    padding: { default: 8 },
+    props1: {},
+    props2: {}
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v1d983e20": `${_ctx.padding}px`
+    }));
+    return (_ctx, _cache) => {
+      const _component_el_splitter_panel = ElSplitterPanel;
+      const _component_el_splitter = ElSplitter;
+      return openBlock(), createBlock(_component_el_splitter, {
+        layout: __props.layout,
+        lazy: __props.lazy
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_splitter_panel, mergeProps(__props.props1, {
+            class: _ctx.$style.panel
+          }), {
+            default: withCtx(() => [
+              createVNode(Component$1, {
+                flex: "",
+                "view-class": _ctx.$style.container
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "panel1")
+                ]),
+                _: 3
+              }, 8, ["view-class"])
+            ]),
+            _: 3
+          }, 16, ["class"]),
+          createVNode(_component_el_splitter_panel, mergeProps(__props.props2, {
+            class: _ctx.$style.panel
+          }), {
+            default: withCtx(() => [
+              createVNode(Component$1, {
+                flex: "",
+                "view-class": _ctx.$style.container
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "panel2")
+                ]),
+                _: 3
+              }, 8, ["view-class"])
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      }, 8, ["layout", "lazy"]);
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const panel = "_panel_ixgp9_1";
+const container = "_container_ixgp9_6";
+const style0 = {
+	panel: panel,
+	container: container
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_16 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_16 as _ };