routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+29
@@ -0,0 +1,29 @@
|
||||
@layer vuetify-components {
|
||||
.v-tooltip > .v-overlay__content {
|
||||
background: rgb(var(--v-theme-surface-variant));
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
border-radius: 4px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
display: inline-block;
|
||||
padding: 5px 16px;
|
||||
text-transform: initial;
|
||||
width: auto;
|
||||
opacity: 1;
|
||||
transition-property: opacity, transform;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@layer vuetify-overrides {
|
||||
.v-tooltip > .v-overlay__content[class*=enter-active] {
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.v-tooltip > .v-overlay__content[class*=leave-active] {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
transition-duration: 75ms;
|
||||
}
|
||||
}
|
||||
+2300
File diff suppressed because it is too large
Load Diff
+88
@@ -0,0 +1,88 @@
|
||||
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
|
||||
// Styles
|
||||
import "./VTooltip.css";
|
||||
|
||||
// Components
|
||||
import { VOverlay } from "../VOverlay/index.js";
|
||||
import { makeVOverlayProps } from "../VOverlay/VOverlay.js"; // Composables
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js";
|
||||
import { useScopeId } from "../../composables/scopeId.js"; // Utilities
|
||||
import { computed, mergeProps, ref, toRef, useId } from 'vue';
|
||||
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVTooltipProps = propsFactory({
|
||||
id: String,
|
||||
interactive: Boolean,
|
||||
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: null
|
||||
}), ['absolute', 'retainFocus', 'captureFocus', 'disableInitialFocus'])
|
||||
}, 'VTooltip');
|
||||
export const VTooltip = genericComponent()({
|
||||
name: 'VTooltip',
|
||||
props: makeVTooltipProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const isActive = useProxiedModel(props, 'modelValue');
|
||||
const {
|
||||
scopeId
|
||||
} = useScopeId();
|
||||
const uid = useId();
|
||||
const id = toRef(() => 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 = toRef(() => {
|
||||
if (props.transition != null) 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', {
|
||||
'v-tooltip--interactive': props.interactive
|
||||
}, 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,
|
||||
"role": "tooltip",
|
||||
"activatorProps": activatorProps.value,
|
||||
"_disableGlobalStack": true
|
||||
}, scopeId), {
|
||||
activator: slots.activator,
|
||||
default: (...args) => slots.default?.(...args) ?? props.text
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, overlay);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VTooltip.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+33
@@ -0,0 +1,33 @@
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-tooltip
|
||||
> .v-overlay__content
|
||||
background: $tooltip-background-color
|
||||
color: $tooltip-text-color
|
||||
border-radius: $tooltip-border-radius
|
||||
font-size: $tooltip-font-size
|
||||
line-height: $tooltip-line-height
|
||||
display: inline-block
|
||||
padding: $tooltip-padding
|
||||
text-transform: initial
|
||||
width: auto
|
||||
opacity: 1
|
||||
transition-property: opacity, transform
|
||||
overflow-wrap: $tooltip-overflow-wrap
|
||||
|
||||
&:not(.v-tooltip--interactive)
|
||||
> .v-overlay__content
|
||||
pointer-events: none
|
||||
|
||||
@include tools.layer('overrides')
|
||||
.v-tooltip > .v-overlay__content
|
||||
&[class*="enter-active"]
|
||||
transition-timing-function: settings.$decelerated-easing
|
||||
transition-duration: $tooltip-transition-enter-duration
|
||||
|
||||
&[class*="leave-active"]
|
||||
transition-timing-function: settings.$accelerated-easing
|
||||
transition-duration: $tooltip-transition-leave-duration
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VTooltip
|
||||
$tooltip-background-color: rgb(var(--v-theme-surface-variant)) !default;
|
||||
$tooltip-text-color: rgb(var(--v-theme-on-surface-variant)) !default;
|
||||
$tooltip-border-radius: settings.$border-radius-root !default;
|
||||
$tooltip-font-size: .875rem !default;
|
||||
$tooltip-line-height: 1.6 !default;
|
||||
$tooltip-transition-enter-duration: 150ms !default;
|
||||
$tooltip-transition-leave-duration: 75ms !default;
|
||||
$tooltip-padding: 5px 16px !default;
|
||||
$tooltip-overflow-wrap: break-word !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VTooltip } from './VTooltip.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VTooltip } from "./VTooltip.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VTooltip"],"sources":["../../../src/components/VTooltip/index.ts"],"sourcesContent":["export { VTooltip } from './VTooltip'\n"],"mappings":"SAASA,QAAQ","ignoreList":[]}
|
||||
Reference in New Issue
Block a user