92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
|
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
|