1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- // 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
|