Cleaned up tooltips

This commit is contained in:
thepaperpilot 2022-07-06 22:52:03 -05:00
parent 409b3bbac4
commit 0229c0130f
2 changed files with 16 additions and 16 deletions

View file

@ -34,10 +34,10 @@
</div>
</template>
<script lang="ts">
<script lang="tsx">
import themes from "data/themes";
import type { CoercableComponent, StyleValue } from "features/feature";
import { jsx } from "features/feature";
import type { CoercableComponent } from "features/feature";
import { jsx, StyleValue } from "features/feature";
import type { Persistent } from "game/persistence";
import settings from "game/settings";
import { Direction } from "util/common";
@ -46,15 +46,15 @@ import {
coerceComponent,
computeOptionalComponent,
processedPropType,
render,
renderJSX,
unwrapRef
} from "util/vue";
import type { Component, PropType } from "vue";
import { computed, defineComponent, ref, shallowRef, toRefs, unref, watchEffect } from "vue";
import { computed, defineComponent, ref, shallowRef, toRefs, unref } from "vue";
export default defineComponent({
props: {
element: processedPropType<VueFeature>(Object),
element: Object as PropType<VueFeature>,
display: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
@ -73,14 +73,14 @@ export default defineComponent({
const isShown = computed(() => (unwrapRef(pinned) || isHovered.value) && comp.value);
const comp = computeOptionalComponent(display);
const elementComp = shallowRef<Component | "" | null>(null);
watchEffect(() => {
const elementComp = shallowRef<Component | "" | null>(
coerceComponent(
jsx(() => {
const currComponent = unwrapRef(element);
elementComp.value =
currComponent == null
? null
: coerceComponent(jsx(() => render(currComponent) as JSX.Element));
});
return currComponent == null ? "" : renderJSX(currComponent);
})
)
);
function togglePinned(e: MouseEvent) {
const isPinned = pinned as unknown as Persistent<boolean> | undefined; // Vue typing :/

View file

@ -85,13 +85,13 @@ export function addTooltip<T extends TooltipOptions>(
const elementComponent = element[Component];
element[Component] = TooltipComponent;
const elementGratherProps = element[GatherProps].bind(element);
const elementGatherProps = element[GatherProps].bind(element);
element[GatherProps] = function gatherTooltipProps(this: GenericTooltip) {
const { display, classes, style, direction, xoffset, yoffset, pinned } = this;
return {
element: {
[Component]: elementComponent,
[GatherProps]: elementGratherProps
[GatherProps]: elementGatherProps
},
display,
classes,