@ctsy/layui-vue/es/splitPanel/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, onMounted, watch, provide, openBlock, createElementBlock, mergeProps, unref, toHandlers, renderSlot } from "vue";
var index = "";
const __default__ = {
  name: "laySplitPanel"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
  props: {
    vertical: { type: Boolean, default: false },
    minSize: { default: 50 }
  },
  setup(__props) {
    const props = __props;
    let domEvent = ref();
    let domStatus = ref(false);
    const target = ref();
    onMounted(() => {
      const boxWidth = target.value.offsetWidth;
      const boxHeight = target.value.offsetHeight;
      window.addEventListener("scroll", (event) => {
        console.log(event);
      });
      target.value.addEventListener("mousemove", (event) => {
        if (domStatus.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.width = (event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5) * otherWidthPercentage + "%";
            nextDom.style.width = (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.height = (event.layerY - prevDomTop) / (prevDomHeight + nextDomHeight + 5) * otherHeightPercentage + "%";
            nextDom.style.height = (boxHeight - (event.layerY - prevDomTop) - otherHeight) / (prevDomHeight + nextDomHeight + 5) * otherHeightPercentage + "%";
          }
        }
      });
    });
    const moveChange = (event, status) => {
      domEvent.value = event;
      domStatus.value = status;
    };
    const mouseup = () => {
      domStatus.value = false;
    };
    const steps = ref([]);
    watch(steps, () => {
      steps.value.forEach((instance, index2) => {
        instance.setIndex(index2);
      });
    });
    provide("laySplitPanel", {
      props,
      steps,
      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 })), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
}));
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };