import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, onMounted, watch, provide, openBlock, createElementBlock, mergeProps, unref, toHandlers, renderSlot } from "vue";
import { f as useMousePressed } from "../_chunks/@vueuse/index.js";
var index = /* @__PURE__ */ (() => '.lay-split-panel{height:100%;display:flex;position:relative}.lay-split-panel .lay-split-panel-item{height:100%;border:1px #eeeeee solid}.lay-split-panel .lay-split-panel-item-move{user-select:none;pointer-events:none;cursor:col-resize}.lay-split-panel .lay-split-panel-line{height:100%;width:3px;border:1px #eeeeee solid;background-color:var(--global-neutral-color-1);border-left:none;border-right:none;cursor:col-resize;display:flex;align-items:center}.lay-split-panel .lay-split-panel-line:before{content:"";height:6px;width:100%;border:2px solid #dcdee2;border-left:0;border-right:0}.lay-split-panel-vertical{flex-direction:column;position:relative}.lay-split-panel-vertical .lay-split-panel-item-move{user-select:none;pointer-events:none;cursor:row-resize}.lay-split-panel-vertical .lay-split-panel-line{display:flex;justify-content:center;width:100%;height:3px;cursor:row-resize;border:1px #eeeeee solid;background-color:var(--global-neutral-color-1);border-top:none;border-bottom:none}.lay-split-panel-vertical .lay-split-panel-line:before{content:"";height:100%;width:6px;border:2px solid #dcdee2;border-top:none;border-bottom:none}\n')();
const __default__ = {
  name: "LaySplitPanel"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    vertical: { type: Boolean, default: false },
    minSize: { default: 50 }
  },
  setup(__props) {
    const props = __props;
    const target = ref();
    const { pressed } = useMousePressed({ target });
    let domEvent = ref();
    let domStatus = ref(pressed);
    let parentVertical = ref();
    onMounted(() => {
      const boxWidth = target.value.offsetWidth;
      const boxHeight = target.value.offsetHeight;
      target.value.addEventListener(
        "mousemove",
        (event) => {
          if (domStatus.value && domEvent.value) {
            const prevDom = domEvent.value.target.previousElementSibling;
            const nextDom = domEvent.value.target.nextElementSibling;
            if (!props.vertical) {
              const prevDomLeft = domEvent.value.target.previousElementSibling.offsetLeft;
              const prevDomWidth = domEvent.value.target.previousElementSibling.offsetWidth;
              const nextDomWidth = domEvent.value.target.nextElementSibling.offsetWidth;
              const otherWidth = boxWidth - (prevDomWidth + nextDomWidth + 5);
              const otherWidthPercentage = (prevDomWidth + nextDomWidth + 5) / boxWidth * 100;
              if (event.layerX - prevDomLeft < props.minSize || boxWidth - (event.layerX - prevDomLeft) - otherWidth < props.minSize) {
                return false;
              }
              prevDom.style.flexBasis = (event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5) * otherWidthPercentage + "%";
              nextDom.style.flexBasis = (boxWidth - (event.layerX - prevDomLeft) - otherWidth) / (prevDomWidth + nextDomWidth + 5) * otherWidthPercentage + "%";
            } else {
              const prevDomTop = domEvent.value.target.previousElementSibling.offsetTop;
              const prevDomHeight = domEvent.value.target.previousElementSibling.offsetHeight;
              const nextDomHeight = domEvent.value.target.nextElementSibling.offsetHeight;
              const otherHeight = boxHeight - (prevDomHeight + nextDomHeight + 5);
              const otherHeightPercentage = (prevDomHeight + nextDomHeight + 5) / boxHeight * 100;
              if (event.layerY - prevDomTop < props.minSize || boxHeight - (event.layerY - prevDomTop) - otherHeight < props.minSize) {
                return false;
              }
              prevDom.style.flexBasis = (event.layerY - prevDomTop) / (prevDomHeight + nextDomHeight + 5) * otherHeightPercentage + "%";
              nextDom.style.flexBasis = (boxHeight - (event.layerY - prevDomTop) - otherHeight) / (prevDomHeight + nextDomHeight + 5) * otherHeightPercentage + "%";
            }
          }
        }
      );
    });
    const moveChange = (event, status, isVertical) => {
      domEvent.value = event;
      domStatus.value = status;
      parentVertical.value = isVertical;
    };
    const mouseup = () => {
      domStatus.value = false;
      domEvent.value = null;
      parentVertical.value = false;
    };
    const steps = ref([]);
    watch(steps, () => {
      steps.value.forEach(
        (instance, index2) => {
          instance.setIndex(index2);
        }
      );
    });
    provide("laySplitPanel", {
      props,
      steps,
      target,
      moveChange
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({
        ref_key: "target",
        ref: target,
        class: ["lay-split-panel", __props.vertical ? "lay-split-panel-vertical" : ""],
        style: {
          cursor: unref(domStatus) ? !__props.vertical ? "col-resize" : "row-resize" : ""
        }
      }, toHandlers({ mouseup }, true)), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };