1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
- // Styles
- import "./VTooltip.css";
- // Components
- import { VOverlay } from "../VOverlay/index.mjs";
- import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Composables
- import { forwardRefs } from "../../composables/forwardRefs.mjs";
- import { useProxiedModel } from "../../composables/proxiedModel.mjs";
- import { useScopeId } from "../../composables/scopeId.mjs"; // Utilities
- import { computed, mergeProps, ref } from 'vue';
- import { genericComponent, getUid, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
- export const makeVTooltipProps = propsFactory({
- id: String,
- text: String,
- ...omit(makeVOverlayProps({
- closeOnBack: false,
- location: 'end',
- locationStrategy: 'connected',
- eager: true,
- minWidth: 0,
- offset: 10,
- openOnClick: false,
- openOnHover: true,
- origin: 'auto',
- scrim: false,
- scrollStrategy: 'reposition',
- transition: false
- }), ['absolute', 'persistent'])
- }, 'VTooltip');
- export const VTooltip = genericComponent()({
- name: 'VTooltip',
- props: makeVTooltipProps(),
- emits: {
- 'update:modelValue': value => true
- },
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const isActive = useProxiedModel(props, 'modelValue');
- const {
- scopeId
- } = useScopeId();
- const uid = getUid();
- const id = computed(() => props.id || `v-tooltip-${uid}`);
- const overlay = ref();
- const location = computed(() => {
- return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
- });
- const origin = computed(() => {
- return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
- });
- const transition = computed(() => {
- if (props.transition) return props.transition;
- return isActive.value ? 'scale-transition' : 'fade-transition';
- });
- const activatorProps = computed(() => mergeProps({
- 'aria-describedby': id.value
- }, props.activatorProps));
- useRender(() => {
- const overlayProps = VOverlay.filterProps(props);
- return _createVNode(VOverlay, _mergeProps({
- "ref": overlay,
- "class": ['v-tooltip', props.class],
- "style": props.style,
- "id": id.value
- }, overlayProps, {
- "modelValue": isActive.value,
- "onUpdate:modelValue": $event => isActive.value = $event,
- "transition": transition.value,
- "absolute": true,
- "location": location.value,
- "origin": origin.value,
- "persistent": true,
- "role": "tooltip",
- "activatorProps": activatorProps.value,
- "_disableGlobalStack": true
- }, scopeId), {
- activator: slots.activator,
- default: function () {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- return slots.default?.(...args) ?? props.text;
- }
- });
- });
- return forwardRefs({}, overlay);
- }
- });
- //# sourceMappingURL=VTooltip.mjs.map
|