@empathyco/x-components
Version:
Empathy X Components
79 lines (76 loc) • 2.76 kB
JavaScript
import { useElementBounding, useElementVisibility, useScroll, useMutationObserver, whenever } from '@vueuse/core';
import { defineComponent, ref, computed } from 'vue';
/**
* This component allows for any other component or element inside it to be horizontally
* navigable. It also implements customizable buttons as well as other minor customizations to its
* general behavior.
*
* Additionally, this component exposes the following props to modify the classes of the
* elements: `buttonClass`.
*
* @public
*/
var _sfc_main = defineComponent({
name: 'SlidingPanel',
props: {
/**
* Scroll factor that will dictate how much the scroll moves when pressing a navigation button.
*/
scrollFactor: {
type: Number,
default: 0.7,
},
/** Would make the navigation buttons visible when they're needed or always hide them. */
showButtons: {
type: Boolean,
default: true,
},
/**
* When true, whenever the DOM content in the sliding panel slot changes, it will reset
* the scroll position to 0.
*/
resetOnContentChange: {
type: Boolean,
default: true,
},
buttonClass: { type: [String, Object, Array] },
scrollContainerClass: { type: [String, Object, Array] },
},
setup(props, { slots }) {
const scrollContainerRef = ref();
const { width: slotContainerWidth } = useElementBounding(scrollContainerRef);
const isVisible = useElementVisibility(scrollContainerRef);
const { x: xScroll, arrivedState, measure, } = useScroll(scrollContainerRef, {
behavior: 'smooth',
});
/** CSS classes to apply based on the scroll position. */
const cssClasses = computed(() => ({
'x-sliding-panel-at-start': arrivedState.left,
'x-sliding-panel-at-end': arrivedState.right,
}));
if (props.resetOnContentChange) {
useMutationObserver(scrollContainerRef, mutations => {
if (mutations.length > 0) {
xScroll.value = 0;
}
}, {
subtree: true,
childList: true,
attributes: false,
characterData: false,
});
}
//ensure positions are right calculated as soon as the sliding panel is shown
whenever(isVisible, measure);
return {
arrivedState,
cssClasses,
scrollContainerRef,
slotContainerWidth,
xScroll,
slots,
};
},
});
export { _sfc_main as default };
//# sourceMappingURL=sliding-panel.vue2.js.map