128 lines
5.9 KiB
JavaScript
128 lines
5.9 KiB
JavaScript
"use strict";
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.layoutInjectionKey = exports.layoutProps = void 0;
|
|
exports.createLayoutComponent = createLayoutComponent;
|
|
const vue_1 = require("vue");
|
|
const _internal_1 = require("../../_internal");
|
|
const _mixins_1 = require("../../_mixins");
|
|
const _utils_1 = require("../../_utils");
|
|
const styles_1 = require("../styles");
|
|
const interface_1 = require("./interface");
|
|
const layout_cssr_1 = __importDefault(require("./styles/layout.cssr"));
|
|
exports.layoutProps = {
|
|
embedded: Boolean,
|
|
position: interface_1.positionProp,
|
|
nativeScrollbar: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
scrollbarProps: Object,
|
|
onScroll: Function,
|
|
contentClass: String,
|
|
contentStyle: {
|
|
type: [String, Object],
|
|
default: ''
|
|
},
|
|
hasSider: Boolean,
|
|
siderPlacement: {
|
|
type: String,
|
|
default: 'left'
|
|
}
|
|
};
|
|
exports.layoutInjectionKey = (0, _utils_1.createInjectionKey)('n-layout');
|
|
function createLayoutComponent(isContent) {
|
|
return (0, vue_1.defineComponent)({
|
|
name: isContent ? 'LayoutContent' : 'Layout',
|
|
props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.layoutProps),
|
|
setup(props) {
|
|
const scrollableElRef = (0, vue_1.ref)(null);
|
|
const scrollbarInstRef = (0, vue_1.ref)(null);
|
|
const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
|
|
const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout', layout_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
|
|
function scrollTo(options, y) {
|
|
if (props.nativeScrollbar) {
|
|
const { value: scrollableEl } = scrollableElRef;
|
|
if (scrollableEl) {
|
|
if (y === undefined) {
|
|
scrollableEl.scrollTo(options);
|
|
}
|
|
else {
|
|
scrollableEl.scrollTo(options, y);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
const { value: scrollbarInst } = scrollbarInstRef;
|
|
if (scrollbarInst) {
|
|
scrollbarInst.scrollTo(options, y);
|
|
}
|
|
}
|
|
}
|
|
(0, vue_1.provide)(exports.layoutInjectionKey, props);
|
|
let scrollX = 0;
|
|
let scrollY = 0;
|
|
const handleNativeElScroll = (e) => {
|
|
var _a;
|
|
const target = e.target;
|
|
scrollX = target.scrollLeft;
|
|
scrollY = target.scrollTop;
|
|
(_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
};
|
|
(0, _utils_1.useReactivated)(() => {
|
|
if (props.nativeScrollbar) {
|
|
const el = scrollableElRef.value;
|
|
if (el) {
|
|
el.scrollTop = scrollY;
|
|
el.scrollLeft = scrollX;
|
|
}
|
|
}
|
|
});
|
|
const hasSiderStyle = {
|
|
display: 'flex',
|
|
flexWrap: 'nowrap',
|
|
width: '100%',
|
|
flexDirection: 'row'
|
|
};
|
|
const exposedMethods = {
|
|
scrollTo
|
|
};
|
|
const cssVarsRef = (0, vue_1.computed)(() => {
|
|
const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
|
|
return {
|
|
'--n-bezier': cubicBezierEaseInOut,
|
|
'--n-color': props.embedded ? self.colorEmbedded : self.color,
|
|
'--n-text-color': self.textColor
|
|
};
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled
|
|
? (0, _mixins_1.useThemeClass)('layout', (0, vue_1.computed)(() => {
|
|
return props.embedded ? 'e' : '';
|
|
}), cssVarsRef, props)
|
|
: undefined;
|
|
return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
|
|
scrollbarInstRef,
|
|
hasSiderStyle, mergedTheme: themeRef, handleNativeElScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
|
|
},
|
|
render() {
|
|
var _a;
|
|
const { mergedClsPrefix, hasSider } = this;
|
|
(_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined;
|
|
const layoutClass = [
|
|
this.themeClass,
|
|
isContent && `${mergedClsPrefix}-layout-content`,
|
|
`${mergedClsPrefix}-layout`,
|
|
`${mergedClsPrefix}-layout--${this.position}-positioned`
|
|
];
|
|
return ((0, vue_1.h)("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? ((0, vue_1.h)("div", { ref: "scrollableElRef", class: [
|
|
`${mergedClsPrefix}-layout-scroll-container`,
|
|
this.contentClass
|
|
], style: [this.contentStyle, hasSiderStyle], onScroll: this.handleNativeElScroll }, this.$slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentClass: this.contentClass, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
|
|
}
|
|
});
|
|
}
|
|
exports.default = createLayoutComponent(false);
|