104 lines
3.6 KiB
JavaScript
Executable File
104 lines
3.6 KiB
JavaScript
Executable File
import "../../../src/sass/helpers/animations.sass";
|
|
import "../../../src/components/app/app.sass";
|
|
import { defineComponent, shallowRef, h, vShow, withDirectives } from 'vue';
|
|
import { provideNoticeController } from '../../composables/noticeController';
|
|
import { providePopupController } from '../../composables/popupController';
|
|
import { provideTheme, ProvideThemePropDefinitions } from '../../composables/theme';
|
|
import { formatTransition } from '../../composables/transition';
|
|
import { provideWindowSize, ProvideWindowSizePropsDefinition } from '../../composables/windowSize';
|
|
import BSidebar from '../sidebar/BSidebar';
|
|
import BNoticeContainer from '../notices/noticeContainer/BNoticeContainer';
|
|
import BPopupContainer from '../popupContainer/BPopupContainer';
|
|
import { provideSidebarController, ProvideSidebarControllerPropsDefinition } from '../sidebar/composables';
|
|
const DEFAULT_TRANSITION = {
|
|
name: 'fade'
|
|
};
|
|
|
|
function generateNoticeContainer(placement, ref) {
|
|
return h(BNoticeContainer, {
|
|
ref,
|
|
class: placement === 'top' ? 'notices-is-top' : 'notices-is-bottom'
|
|
});
|
|
}
|
|
|
|
function generatePopupContainer(ref) {
|
|
return h(BPopupContainer, {
|
|
ref
|
|
});
|
|
}
|
|
|
|
function generateSidebarSlot(slots, hasHeader, currentRoute, sidebar) {
|
|
return h(BSidebar, {
|
|
currentRoute,
|
|
isFullheight: true
|
|
}, () => slots.sidebar && slots.sidebar(sidebar));
|
|
}
|
|
|
|
function generateBodyContent(slots, hasNavigationDrawer, sidebar, currentRoute) {
|
|
const nodes = [];
|
|
|
|
if (slots.header) {
|
|
const header = slots.header(sidebar);
|
|
if (header) nodes.push(header);
|
|
}
|
|
|
|
nodes.push(h('div', {
|
|
class: 'b-app-body-content'
|
|
}, hasNavigationDrawer ? [withDirectives(generateSidebarSlot(slots, !!slots.header, currentRoute, sidebar), [[vShow, sidebar.isVisible.value]]), h('div', {
|
|
class: 'b-app-content'
|
|
}, slots.default && slots.default(sidebar))] : [h('div', {
|
|
class: 'b-app-content'
|
|
}, slots.default && slots.default(sidebar))]));
|
|
return nodes;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'b-app',
|
|
props: { ...ProvideThemePropDefinitions,
|
|
...ProvideWindowSizePropsDefinition,
|
|
...ProvideSidebarControllerPropsDefinition
|
|
},
|
|
|
|
setup(props, {
|
|
slots
|
|
}) {
|
|
const popup = shallowRef(null);
|
|
const top = shallowRef(null);
|
|
const bottom = shallowRef(null);
|
|
|
|
function showNotice(params) {
|
|
const options = { ...params,
|
|
transition: params.transition ? formatTransition(params.transition) : DEFAULT_TRANSITION
|
|
};
|
|
return params.placement === 'top' ? top.value.showNotice(options) : bottom.value.showNotice(options);
|
|
}
|
|
|
|
function showPopup(params) {
|
|
return popup.value.showPopup({
|
|
render: params.render,
|
|
transition: params.transition ? formatTransition(params.transition) : DEFAULT_TRANSITION
|
|
});
|
|
}
|
|
|
|
provideTheme(props);
|
|
provideNoticeController(showNotice);
|
|
providePopupController(showPopup);
|
|
provideWindowSize(props);
|
|
const sidebarController = provideSidebarController(props);
|
|
return () => {
|
|
const hasNavigationDrawer = !!slots['sidebar'];
|
|
const nodes = [generateNoticeContainer('top', top), generateNoticeContainer('bottom', bottom), generatePopupContainer(popup)];
|
|
nodes.push(h('div', {
|
|
class: ['b-app', {
|
|
'has-navigation-drawer': hasNavigationDrawer && sidebarController.isVisible.value,
|
|
'has-header': !!slots.header
|
|
}]
|
|
}, generateBodyContent(slots, hasNavigationDrawer, sidebarController, props.currentRoute)));
|
|
return h('div', {
|
|
class: 'b-notices-container'
|
|
}, nodes);
|
|
};
|
|
}
|
|
|
|
});
|
|
//# sourceMappingURL=BApp.js.map
|