naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
153 lines (152 loc) • 6.94 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.splitProps = void 0;
const vue_1 = require("vue");
const evtd_1 = require("evtd");
const _utils_1 = require("../../_utils");
const use_config_1 = __importDefault(require("../../_mixins/use-config"));
const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
const _mixins_1 = require("../../_mixins");
const styles_1 = require("../styles");
exports.splitProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { direction: {
type: String,
default: 'horizontal'
}, resizeTriggerSize: {
type: Number,
default: 3
}, disabled: Boolean, defaultSize: {
type: Number,
default: 0.5
}, min: {
type: Number,
default: 0
}, max: {
type: Number,
default: 1
}, onDragStart: Function, onDragMove: Function, onDragEnd: Function });
exports.default = (0, vue_1.defineComponent)({
name: 'Split',
props: exports.splitProps,
setup(props) {
const { mergedClsPrefixRef, inlineThemeDisabled } = (0, use_config_1.default)(props);
const themeRef = (0, _mixins_1.useTheme)('Split', '-split', index_cssr_1.default, styles_1.splitLight, props, mergedClsPrefixRef);
const cssVarsRef = (0, vue_1.computed)(() => {
const { self: { resizableTriggerColor, resizableTriggerColorHover } } = themeRef.value;
return {
'--n-resize-trigger-color': resizableTriggerColor,
'--n-resize-trigger-color-hover': resizableTriggerColorHover
};
});
const resizeTriggerElRef = (0, vue_1.ref)(null);
const isDraggingRef = (0, vue_1.ref)(false);
const currentSize = (0, vue_1.ref)(props.defaultSize);
const firstPaneStyle = (0, vue_1.computed)(() => {
const size = currentSize.value * 100;
return {
flex: `0 0 calc(${size}% - ${(props.resizeTriggerSize * size) / 100}px)`
};
});
const resizeTriggerStyle = (0, vue_1.computed)(() => {
return props.direction === 'horizontal'
? {
width: `${props.resizeTriggerSize}px`,
height: '100%'
}
: {
width: '100%',
height: `${props.resizeTriggerSize}px`
};
});
const resizeTriggerWrapperStyle = (0, vue_1.computed)(() => {
const horizontal = props.direction === 'horizontal';
return {
width: horizontal ? `${props.resizeTriggerSize}px` : '',
height: horizontal ? '' : `${props.resizeTriggerSize}px`,
cursor: props.direction === 'horizontal' ? 'col-resize' : 'row-resize'
};
});
let offset = 0;
const handleMouseDown = (e) => {
e.preventDefault();
isDraggingRef.value = true;
if (props.onDragStart)
props.onDragStart(e);
const mouseMoveEvent = 'mousemove';
const mouseUpEvent = 'mouseup';
const onMouseMove = (e) => {
updateSize(e);
if (props.onDragMove)
props.onDragMove(e);
};
const onMouseUp = () => {
(0, evtd_1.off)(mouseMoveEvent, document, onMouseMove);
(0, evtd_1.off)(mouseUpEvent, document, onMouseUp);
isDraggingRef.value = false;
if (props.onDragEnd)
props.onDragEnd(e);
document.body.style.cursor = '';
};
document.body.style.cursor = resizeTriggerWrapperStyle.value.cursor;
(0, evtd_1.on)(mouseMoveEvent, document, onMouseMove);
(0, evtd_1.on)(mouseUpEvent, document, onMouseUp);
const resizeTriggerEl = resizeTriggerElRef.value;
if (resizeTriggerEl) {
const elRect = resizeTriggerEl.getBoundingClientRect();
if (props.direction === 'horizontal') {
offset = e.clientX - elRect.left;
}
else {
offset = elRect.top - e.clientY;
}
}
updateSize(e);
};
const updateSize = (event) => {
var _a, _b;
const parentRect = (_b = (_a = resizeTriggerElRef.value) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
if (!parentRect)
return;
const newSize = props.direction === 'horizontal'
? (event.clientX - parentRect.left - offset) /
(parentRect.width - props.resizeTriggerSize)
: (event.clientY - parentRect.top + offset) /
(parentRect.height - props.resizeTriggerSize);
currentSize.value = newSize;
if (props.min) {
currentSize.value = Math.max(newSize, props.min);
}
if (props.max) {
currentSize.value = Math.min(currentSize.value, props.max);
}
};
return {
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
resizeTriggerElRef,
isDragging: isDraggingRef,
mergedClsPrefix: mergedClsPrefixRef,
resizeTriggerWrapperStyle,
resizeTriggerStyle,
handleMouseDown,
firstPaneStyle
};
},
render() {
var _a, _b, _c, _d;
return ((0, vue_1.h)("div", { class: [
`${this.mergedClsPrefix}-split`,
`${this.mergedClsPrefix}-split--${this.direction}`
], style: this.cssVars },
(0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-split-pane-1`, style: this.firstPaneStyle }, (_b = (_a = this.$slots)[1]) === null || _b === void 0 ? void 0 : _b.call(_a)),
!this.disabled && ((0, vue_1.h)("div", { ref: "resizeTriggerElRef", class: `${this.mergedClsPrefix}-split__resize-trigger-wrapper`, style: this.resizeTriggerWrapperStyle, onMousedown: this.handleMouseDown }, (0, _utils_1.resolveSlot)(this.$slots['resize-trigger'], () => [
(0, vue_1.h)("div", { style: this.resizeTriggerStyle, class: [
`${this.mergedClsPrefix}-split__resize-trigger`,
this.isDragging &&
`${this.mergedClsPrefix}-split__resize-trigger--hover`
] })
]))),
(0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-split-pane-2` }, (_d = (_c = this.$slots)[2]) === null || _d === void 0 ? void 0 : _d.call(_c))));
}
});