VTooltip.mjs 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  2. // Styles
  3. import "./VTooltip.css";
  4. // Components
  5. import { VOverlay } from "../VOverlay/index.mjs";
  6. import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Composables
  7. import { forwardRefs } from "../../composables/forwardRefs.mjs";
  8. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  9. import { useScopeId } from "../../composables/scopeId.mjs"; // Utilities
  10. import { computed, mergeProps, ref } from 'vue';
  11. import { genericComponent, getUid, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  12. export const makeVTooltipProps = propsFactory({
  13. id: String,
  14. text: String,
  15. ...omit(makeVOverlayProps({
  16. closeOnBack: false,
  17. location: 'end',
  18. locationStrategy: 'connected',
  19. eager: true,
  20. minWidth: 0,
  21. offset: 10,
  22. openOnClick: false,
  23. openOnHover: true,
  24. origin: 'auto',
  25. scrim: false,
  26. scrollStrategy: 'reposition',
  27. transition: false
  28. }), ['absolute', 'persistent'])
  29. }, 'VTooltip');
  30. export const VTooltip = genericComponent()({
  31. name: 'VTooltip',
  32. props: makeVTooltipProps(),
  33. emits: {
  34. 'update:modelValue': value => true
  35. },
  36. setup(props, _ref) {
  37. let {
  38. slots
  39. } = _ref;
  40. const isActive = useProxiedModel(props, 'modelValue');
  41. const {
  42. scopeId
  43. } = useScopeId();
  44. const uid = getUid();
  45. const id = computed(() => props.id || `v-tooltip-${uid}`);
  46. const overlay = ref();
  47. const location = computed(() => {
  48. return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
  49. });
  50. const origin = computed(() => {
  51. return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
  52. });
  53. const transition = computed(() => {
  54. if (props.transition) return props.transition;
  55. return isActive.value ? 'scale-transition' : 'fade-transition';
  56. });
  57. const activatorProps = computed(() => mergeProps({
  58. 'aria-describedby': id.value
  59. }, props.activatorProps));
  60. useRender(() => {
  61. const overlayProps = VOverlay.filterProps(props);
  62. return _createVNode(VOverlay, _mergeProps({
  63. "ref": overlay,
  64. "class": ['v-tooltip', props.class],
  65. "style": props.style,
  66. "id": id.value
  67. }, overlayProps, {
  68. "modelValue": isActive.value,
  69. "onUpdate:modelValue": $event => isActive.value = $event,
  70. "transition": transition.value,
  71. "absolute": true,
  72. "location": location.value,
  73. "origin": origin.value,
  74. "persistent": true,
  75. "role": "tooltip",
  76. "activatorProps": activatorProps.value,
  77. "_disableGlobalStack": true
  78. }, scopeId), {
  79. activator: slots.activator,
  80. default: function () {
  81. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  82. args[_key] = arguments[_key];
  83. }
  84. return slots.default?.(...args) ?? props.text;
  85. }
  86. });
  87. });
  88. return forwardRefs({}, overlay);
  89. }
  90. });
  91. //# sourceMappingURL=VTooltip.mjs.map