yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
206 lines (205 loc) • 7.14 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const ReceiverView = require("../ele-config-provider/components/receiver-view");
const util = require("../ele-pro-layout/util");
const props = require("./props");
const _sfc_main = vue.defineComponent({
name: "EleSplitPanel",
components: { ElIcon: elementPlus.ElIcon, ArrowLeft: icons.ArrowLeft, ArrowUp: icons.ArrowUp, ReceiverView },
props: props.splitPanelProps,
emits: props.splitPanelEmits,
setup(props2, { emit }) {
const isResponsive = util.useResponsive(props2);
const rootRef = vue.ref(null);
const wrapRef = vue.ref(null);
const sideRef = vue.ref(null);
const isCollapse = vue.ref(false);
const resizedSize = vue.ref(null);
const resizing = vue.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 = props2.vertical ? el.clientHeight : el.clientWidth;
if (!props2.maxSize) {
return size;
}
if (props2.maxSize < 0) {
return size + props2.maxSize;
} else if (props2.maxSize < 1) {
return Math.floor(size * props2.maxSize);
}
return Math.min(props2.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 = !props2.minSize || props2.minSize < 0 ? 0 : props2.minSize;
const max = getMaxSize(rootEl);
const mousemoveFn = (e) => {
const size = props2.vertical ? (props2.reverse ? downY - e.clientY : e.clientY - downY) + downH : (props2.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);
};
vue.watch(
[() => props2.collapse, () => props2.allowCollapse],
() => {
if (!props2.allowCollapse) {
isCollapse.value = false;
} else {
isCollapse.value = props2.collapse;
}
},
{ immediate: true }
);
vue.watch(
() => props2.size,
() => {
resetSize();
}
);
vue.watch(
() => props2.minSize,
(minSize) => {
const min = !minSize || minSize < 0 ? 0 : minSize;
if (resizedSize.value && Number.parseInt(resizedSize.value) < min) {
resizedSize.value = min + "px";
}
}
);
vue.watch(
() => props2.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, props2) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props2) {
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 = vue.resolveComponent("ArrowUp");
const _component_ArrowLeft = vue.resolveComponent("ArrowLeft");
const _component_ElIcon = vue.resolveComponent("ElIcon");
const _component_ReceiverView = vue.resolveComponent("ReceiverView");
return vue.openBlock(), vue.createBlock(_component_ReceiverView, {
ref: "rootRef",
class: vue.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: vue.normalizeStyle({
"--ele-split-size": _ctx.resizedSize || _ctx.size,
"--ele-split-space": _ctx.space
})
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", {
ref: "sideRef",
class: "ele-split-panel-side",
style: vue.normalizeStyle(_ctx.customStyle)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 4),
vue.createElementVNode("div", _hoisted_2, [
_ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "ele-split-resize-line",
onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleResize && _ctx.handleResize(...args))
}, null, 32)) : vue.createCommentVNode("", true)
])
], 512),
vue.createElementVNode("div", {
class: "ele-split-panel-body",
style: vue.normalizeStyle(_ctx.bodyStyle)
}, [
vue.renderSlot(_ctx.$slots, "body", { collapse: _ctx.isCollapse })
], 4),
_ctx.allowCollapse ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
style: vue.normalizeStyle(_ctx.collapseStyle),
class: "ele-split-collapse-button",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.toggleCollapse())
}, [
vue.renderSlot(_ctx.$slots, "collapse", { collapse: _ctx.isCollapse }, () => [
vue.createVNode(_component_ElIcon, { class: "ele-split-collapse-icon" }, {
default: vue.withCtx(() => [
_ctx.vertical ? (vue.openBlock(), vue.createBlock(_component_ArrowUp, {
key: 0,
style: { "margin-top": "-1.25px" }
})) : (vue.openBlock(), vue.createBlock(_component_ArrowLeft, {
key: 1,
style: { "margin-left": "-1.25px" }
}))
]),
_: 1
})
])
], 4)) : vue.createCommentVNode("", true),
vue.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]]);
module.exports = index;