81 lines
2.4 KiB
JavaScript
Executable File
81 lines
2.4 KiB
JavaScript
Executable File
import "../../../src/components/sidebar/sidebar.sass";
|
|
import { useThemePropsDefinition, useTheme } from '../../composables/theme';
|
|
import { useWindowSize } from '../../composables/windowSize';
|
|
import { SlideRightTransition } from '../../transitions/slideRightTransition';
|
|
import { defineComponent, h, computed, watch, toRef, withDirectives, vShow } from 'vue';
|
|
import BOverlay from '../overlay/BOverlay';
|
|
import { useSidebarController } from './composables';
|
|
import { SidebarThemeMap } from './theme';
|
|
export const BSidebarPropsDefinition = { ...useThemePropsDefinition(SidebarThemeMap),
|
|
tag: {
|
|
type: String,
|
|
default: 'nav'
|
|
},
|
|
currentRoute: {
|
|
required: false
|
|
}
|
|
};
|
|
|
|
function generateDrawer(props, controller, themeClasses, context) {
|
|
return h(props.tag, {
|
|
class: ['b-sidebar', ...themeClasses]
|
|
}, context.slots.default && context.slots.default({
|
|
showSidebar: controller.show,
|
|
hideSidebar: controller.hide,
|
|
sidebarIsVisible: controller.isVisible.value,
|
|
toggleSidebar: controller.toggle
|
|
}));
|
|
}
|
|
|
|
function generateMobileDrawer(props, controller, themeClasses, context) {
|
|
return h(SlideRightTransition, undefined, () => withDirectives(h(BOverlay, {
|
|
class: 'is-left',
|
|
isActive: controller.isVisible.value,
|
|
onClick: controller.hide
|
|
}, () => generateDrawer(props, controller, themeClasses, context)), [[vShow, controller.isVisible.value]]));
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'b-sidebar',
|
|
props: BSidebarPropsDefinition,
|
|
|
|
setup(props, context) {
|
|
const controller = useSidebarController();
|
|
const windowSize = useWindowSize();
|
|
const {
|
|
themeClasses
|
|
} = useTheme(props);
|
|
const useSideDrawer = computed(() => {
|
|
return windowSize.value.isTouch || windowSize.value.isDesktop;
|
|
});
|
|
watch(useSideDrawer, (newValue, oldValue) => {
|
|
if (newValue === oldValue && oldValue !== undefined) {
|
|
return;
|
|
}
|
|
|
|
if (newValue) {
|
|
controller.hide();
|
|
} else {
|
|
controller.show();
|
|
}
|
|
}, {
|
|
immediate: true
|
|
});
|
|
watch(toRef(props, 'currentRoute'), () => {
|
|
if (useSideDrawer.value) {
|
|
controller.hide();
|
|
}
|
|
}, {
|
|
deep: false
|
|
});
|
|
return () => {
|
|
if (useSideDrawer.value) {
|
|
return generateMobileDrawer(props, controller, themeClasses.value, context);
|
|
} else {
|
|
return generateDrawer(props, controller, themeClasses.value, context);
|
|
}
|
|
};
|
|
}
|
|
|
|
});
|
|
//# sourceMappingURL=BSidebar.js.map
|