yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
207 lines (206 loc) • 7.1 kB
JavaScript
import { defineComponent, ref, watch, resolveComponent, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, createElementBlock, createCommentVNode, renderSlot, createVNode } from "vue";
import { ElIcon } from "element-plus";
import { ArrowUp, ArrowLeft } from "../icons";
import ReceiverView from "../ele-config-provider/components/receiver-view";
import { useResponsive } from "../ele-pro-layout/util";
import { splitPanelEmits, splitPanelProps } from "./props";
const _sfc_main = defineComponent({
name: "EleSplitPanel",
components: { ElIcon, ArrowLeft, ArrowUp, ReceiverView },
props: splitPanelProps,
emits: splitPanelEmits,
setup(props, { emit }) {
const isResponsive = useResponsive(props);
const rootRef = ref(null);
const wrapRef = ref(null);
const sideRef = ref(null);
const isCollapse = ref(false);
const resizedSize = ref(null);
const resizing = ref(false);
const toggleCollapse = (collapse) => {
isCollapse.value = typeof collapse === "boolean" ? collapse : !isCollapse.value;
emit("update:collapse", isCollapse.value);
};
const resetSize = () => {
resizedSize.value = null;
};
const getMaxSize = (el) => {
const size = props.vertical ? el.clientHeight : el.clientWidth;
if (!props.maxSize) {
return size;
}
if (props.maxSize < 0) {
return size + props.maxSize;
} else if (props.maxSize < 1) {
return Math.floor(size * props.maxSize);
}
return Math.min(props.maxSize, size);
};
const handleResize = (event) => {
var _a;
const rootEl = (_a = rootRef.value) == null ? void 0 : _a.$el;
const sideEl = sideRef.value;
if (!rootEl || !sideEl) {
return;
}
resizing.value = true;
const downX = event.clientX;
const downY = event.clientY;
const downW = sideEl.clientWidth;
const downH = sideEl.clientHeight;
const min = !props.minSize || props.minSize < 0 ? 0 : props.minSize;
const max = getMaxSize(rootEl);
const mousemoveFn = (e) => {
const size = props.vertical ? (props.reverse ? downY - e.clientY : e.clientY - downY) + downH : (props.reverse ? downX - e.clientX : e.clientX - downX) + downW;
resizedSize.value = `${size < min ? min : size > max ? max : size}px`;
};
const mouseupFn = () => {
resizing.value = false;
document.removeEventListener("mousemove", mousemoveFn);
document.removeEventListener("mouseup", mouseupFn);
};
document.addEventListener("mousemove", mousemoveFn);
document.addEventListener("mouseup", mouseupFn);
};
watch(
[() => props.collapse, () => props.allowCollapse],
() => {
if (!props.allowCollapse) {
isCollapse.value = false;
} else {
isCollapse.value = props.collapse;
}
},
{ immediate: true }
);
watch(
() => props.size,
() => {
resetSize();
}
);
watch(
() => props.minSize,
(minSize) => {
const min = !minSize || minSize < 0 ? 0 : minSize;
if (resizedSize.value && Number.parseInt(resizedSize.value) < min) {
resizedSize.value = min + "px";
}
}
);
watch(
() => props.maxSize,
() => {
var _a;
const rootEl = (_a = rootRef.value) == null ? void 0 : _a.$el;
if (resizedSize.value && rootEl) {
const max = getMaxSize(rootEl);
if (Number.parseInt(resizedSize.value) > max) {
resizedSize.value = max + "px";
}
}
}
);
return {
rootRef,
wrapRef,
sideRef,
isResponsive,
isCollapse,
resizedSize,
resizing,
toggleCollapse,
resetSize,
handleResize
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = {
ref: "wrapRef",
class: "ele-split-panel-wrap"
};
const _hoisted_2 = { class: "ele-split-panel-space" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ArrowUp = resolveComponent("ArrowUp");
const _component_ArrowLeft = resolveComponent("ArrowLeft");
const _component_ElIcon = resolveComponent("ElIcon");
const _component_ReceiverView = resolveComponent("ReceiverView");
return openBlock(), createBlock(_component_ReceiverView, {
ref: "rootRef",
class: normalizeClass([
"ele-split-panel",
{ "is-reverse": _ctx.reverse },
{ "is-vertical": _ctx.vertical },
{ "is-collapse": _ctx.isCollapse },
{ "is-resizing": _ctx.resizing },
{ "is-responsive": _ctx.isResponsive },
{ "is-flex-table": _ctx.flexTable }
]),
style: normalizeStyle({
"--ele-split-size": _ctx.resizedSize || _ctx.size,
"--ele-split-space": _ctx.space
})
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", {
ref: "sideRef",
class: "ele-split-panel-side",
style: normalizeStyle(_ctx.customStyle)
}, [
renderSlot(_ctx.$slots, "default")
], 4),
createElementVNode("div", _hoisted_2, [
_ctx.resizable ? (openBlock(), createElementBlock("div", {
key: 0,
class: "ele-split-resize-line",
onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleResize && _ctx.handleResize(...args))
}, null, 32)) : createCommentVNode("", true)
])
], 512),
createElementVNode("div", {
class: "ele-split-panel-body",
style: normalizeStyle(_ctx.bodyStyle)
}, [
renderSlot(_ctx.$slots, "body", { collapse: _ctx.isCollapse })
], 4),
_ctx.allowCollapse ? (openBlock(), createElementBlock("div", {
key: 0,
style: normalizeStyle(_ctx.collapseStyle),
class: "ele-split-collapse-button",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.toggleCollapse())
}, [
renderSlot(_ctx.$slots, "collapse", { collapse: _ctx.isCollapse }, () => [
createVNode(_component_ElIcon, { class: "ele-split-collapse-icon" }, {
default: withCtx(() => [
_ctx.vertical ? (openBlock(), createBlock(_component_ArrowUp, {
key: 0,
style: { "margin-top": "-1.25px" }
})) : (openBlock(), createBlock(_component_ArrowLeft, {
key: 1,
style: { "margin-left": "-1.25px" }
}))
]),
_: 1
})
])
], 4)) : createCommentVNode("", true),
createElementVNode("div", {
class: "ele-split-panel-mask",
onClick: _cache[2] || (_cache[2] = ($event) => _ctx.toggleCollapse())
})
]),
_: 3
}, 8, ["class", "style"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};