location.mjs 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. // Composables
  2. import { useRtl } from "./locale.mjs"; // Utilities
  3. import { computed } from 'vue';
  4. import { parseAnchor, propsFactory } from "../util/index.mjs"; // Types
  5. const oppositeMap = {
  6. center: 'center',
  7. top: 'bottom',
  8. bottom: 'top',
  9. left: 'right',
  10. right: 'left'
  11. };
  12. export const makeLocationProps = propsFactory({
  13. location: String
  14. }, 'location');
  15. export function useLocation(props) {
  16. let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  17. let offset = arguments.length > 2 ? arguments[2] : undefined;
  18. const {
  19. isRtl
  20. } = useRtl();
  21. const locationStyles = computed(() => {
  22. if (!props.location) return {};
  23. const {
  24. side,
  25. align
  26. } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
  27. function getOffset(side) {
  28. return offset ? offset(side) : 0;
  29. }
  30. const styles = {};
  31. if (side !== 'center') {
  32. if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
  33. }
  34. if (align !== 'center') {
  35. if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
  36. } else {
  37. if (side === 'center') styles.top = styles.left = '50%';else {
  38. styles[{
  39. top: 'left',
  40. bottom: 'left',
  41. left: 'top',
  42. right: 'top'
  43. }[side]] = '50%';
  44. }
  45. styles.transform = {
  46. top: 'translateX(-50%)',
  47. bottom: 'translateX(-50%)',
  48. left: 'translateY(-50%)',
  49. right: 'translateY(-50%)',
  50. center: 'translate(-50%, -50%)'
  51. }[side];
  52. }
  53. return styles;
  54. });
  55. return {
  56. locationStyles
  57. };
  58. }
  59. //# sourceMappingURL=location.mjs.map