59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
// Composables
|
|
import { useRtl } from "./locale.mjs"; // Utilities
|
|
import { computed } from 'vue';
|
|
import { parseAnchor, propsFactory } from "../util/index.mjs"; // Types
|
|
const oppositeMap = {
|
|
center: 'center',
|
|
top: 'bottom',
|
|
bottom: 'top',
|
|
left: 'right',
|
|
right: 'left'
|
|
};
|
|
export const makeLocationProps = propsFactory({
|
|
location: String
|
|
}, 'location');
|
|
export function useLocation(props) {
|
|
let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
let offset = arguments.length > 2 ? arguments[2] : undefined;
|
|
const {
|
|
isRtl
|
|
} = useRtl();
|
|
const locationStyles = computed(() => {
|
|
if (!props.location) return {};
|
|
const {
|
|
side,
|
|
align
|
|
} = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
|
|
function getOffset(side) {
|
|
return offset ? offset(side) : 0;
|
|
}
|
|
const styles = {};
|
|
if (side !== 'center') {
|
|
if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
|
|
}
|
|
if (align !== 'center') {
|
|
if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
|
|
} else {
|
|
if (side === 'center') styles.top = styles.left = '50%';else {
|
|
styles[{
|
|
top: 'left',
|
|
bottom: 'left',
|
|
left: 'top',
|
|
right: 'top'
|
|
}[side]] = '50%';
|
|
}
|
|
styles.transform = {
|
|
top: 'translateX(-50%)',
|
|
bottom: 'translateX(-50%)',
|
|
left: 'translateY(-50%)',
|
|
right: 'translateY(-50%)',
|
|
center: 'translate(-50%, -50%)'
|
|
}[side];
|
|
}
|
|
return styles;
|
|
});
|
|
return {
|
|
locationStyles
|
|
};
|
|
}
|
|
//# sourceMappingURL=location.mjs.map
|