92 lines
5.1 KiB
JavaScript
92 lines
5.1 KiB
JavaScript
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 };
|