47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
import {computed} from 'vue';
|
|
|
|
export default function (props) {
|
|
const visibleMobile = computed(() => {
|
|
return {
|
|
sm: 'flex sm:hidden',
|
|
md: 'flex md:hidden',
|
|
lg: 'flex lg:hidden',
|
|
xl: 'flex xl:hidden',
|
|
}[props.breakpoint];
|
|
});
|
|
|
|
const visibleDesktop = computed(() => {
|
|
return {
|
|
sm: 'hidden sm:flex',
|
|
md: 'hidden md:flex',
|
|
lg: 'hidden lg:flex',
|
|
xl: 'hidden xl:flex',
|
|
}[props.breakpoint];
|
|
});
|
|
|
|
const visibleMobileBlock = computed(() => {
|
|
return {
|
|
sm: 'block sm:hidden',
|
|
md: 'block md:hidden',
|
|
lg: 'block lg:hidden',
|
|
xl: 'block xl:hidden',
|
|
}[props.breakpoint];
|
|
});
|
|
|
|
const visibleDesktopBlock = computed(() => {
|
|
return {
|
|
sm: 'hidden sm:block',
|
|
md: 'hidden md:block',
|
|
lg: 'hidden lg:block',
|
|
xl: 'hidden xl:block',
|
|
}[props.breakpoint];
|
|
});
|
|
|
|
return {
|
|
visibleMobile,
|
|
visibleDesktop,
|
|
visibleDesktopBlock,
|
|
visibleMobileBlock,
|
|
};
|
|
}
|