refactor

packages/frontend/src/components/MkLink.vue

@@ -42,7 +42,7 @@ if (isEnabledUrlPreview.value) {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
-			anchorEl: el.value instanceof HTMLElement ? el.value : el.value?.$el,
+			anchorElement: el.value instanceof HTMLElement ? el.value : el.value?.$el,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/MkMenu.child.vue

@@ -16,7 +16,7 @@ import type { MenuItem } from '@/types/menu.js';
 
 const props = defineProps<{
 	items: MenuItem[];
-	targetElement: HTMLElement;
+	anchorElement: HTMLElement;
 	rootElement: HTMLElement;
 	width?: number;
 }>();
@@ -36,10 +36,10 @@ const SCROLLBAR_THICKNESS = 16;
 function setPosition() {
 	if (el.value == null) return;
 	const rootRect = props.rootElement.getBoundingClientRect();
-	const parentRect = props.targetElement.getBoundingClientRect();
+	const parentRect = props.anchorElement.getBoundingClientRect();
 	const myRect = el.value.getBoundingClientRect();
 
-	let left = props.targetElement.offsetWidth;
+	let left = props.anchorElement.offsetWidth;
 	let top = (parentRect.top - rootRect.top) - 8;
 	if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
 		left = -myRect.width;
@@ -59,7 +59,7 @@ function onChildClosed(actioned?: boolean) {
 	}
 }
 
-watch(() => props.targetElement, () => {
+watch(() => props.anchorElement, () => {
 	setPosition();
 });
 

packages/frontend/src/components/MkMenu.vue

@@ -208,7 +208,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</span>
 	</div>
 	<div v-if="childMenu">
-		<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
+		<XChild ref="child" :items="childMenu" :anchorElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
 	</div>
 </div>
 </template>

packages/frontend/src/components/MkNote.vue

@@ -429,7 +429,7 @@ if (!props.mock) {
 			showing,
 			users,
 			count: appearNote.renoteCount,
-			targetElement: renoteButton.value,
+			anchorElement: renoteButton.value,
 		}, {
 			closed: () => dispose(),
 		});
@@ -452,7 +452,7 @@ if (!props.mock) {
 				reaction: '❤️',
 				users,
 				count: $appearNote.reactionCount,
-				targetElement: reactButton.value!,
+				anchorElement: reactButton.value!,
 			}, {
 				closed: () => dispose(),
 			});

packages/frontend/src/components/MkNoteDetailed.vue

@@ -405,7 +405,7 @@ useTooltip(renoteButton, async (showing) => {
 		showing,
 		users,
 		count: appearNote.renoteCount,
-		targetElement: renoteButton.value,
+		anchorElement: renoteButton.value,
 	}, {
 		closed: () => dispose(),
 	});
@@ -428,7 +428,7 @@ if (appearNote.reactionAcceptance === 'likeOnly') {
 			reaction: '❤️',
 			users,
 			count: $appearNote.reactionCount,
-			targetElement: reactButton.value!,
+			anchorElement: reactButton.value!,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/MkRange.vue

@@ -167,7 +167,7 @@ function onMouseenter() {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl.value ?? undefined,
+		anchorElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});
@@ -191,7 +191,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl.value ?? undefined,
+		anchorElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});

packages/frontend/src/components/MkReactionIcon.vue

@@ -28,7 +28,7 @@ if (props.withTooltip) {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkReactionTooltip.vue')), {
 			showing,
 			reaction: props.reaction.replace(/^:(\w+):$/, ':$1@.:'),
-			targetElement: elRef.value.$el,
+			anchorElement: elRef.value.$el,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/MkReactionTooltip.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="340" @closed="emit('closed')">
 	<div :class="$style.root">
 		<MkReactionIcon :reaction="reaction" :class="$style.icon" :noStyle="true"/>
 		<div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
@@ -20,7 +20,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
 defineProps<{
 	showing: boolean;
 	reaction: string;
-	targetElement: HTMLElement;
+	anchorElement: HTMLElement;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="340" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="340" @closed="emit('closed')">
 	<div :class="$style.root">
 		<div :class="$style.reaction">
 			<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :noStyle="true"/>
@@ -33,7 +33,7 @@ defineProps<{
 	reaction: string;
 	users: Misskey.entities.UserLite[];
 	count: number;
-	targetElement: HTMLElement;
+	anchorElement: HTMLElement;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -231,7 +231,7 @@ if (!mock) {
 			reaction: props.reaction,
 			users,
 			count: props.count,
-			targetElement: buttonEl.value,
+			anchorElement: buttonEl.value,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/MkTooltip.vue

@@ -31,7 +31,7 @@ import { prefer } from '@/preferences.js';
 
 const props = withDefaults(defineProps<{
 	showing: boolean;
-	targetElement?: HTMLElement;
+	anchorElement?: HTMLElement;
 	x?: number;
 	y?: number;
 	text?: string;
@@ -58,7 +58,7 @@ const zIndex = os.claimZIndex('high');
 function setPosition() {
 	if (el.value == null) return;
 	const data = calcPopupPosition(el.value, {
-		anchorElement: props.targetElement,
+		anchorElement: props.anchorElement,
 		direction: props.direction,
 		align: 'center',
 		innerMargin: props.innerMargin,

packages/frontend/src/components/MkUrlPreviewPopup.vue

@@ -20,7 +20,7 @@ import { prefer } from '@/preferences.js';
 const props = defineProps<{
 	showing: boolean;
 	url: string;
-	anchorEl: HTMLElement;
+	anchorElement: HTMLElement;
 }>();
 
 const emit = defineEmits<{
@@ -32,9 +32,9 @@ const top = ref(0);
 const left = ref(0);
 
 onMounted(() => {
-	const rect = props.anchorEl.getBoundingClientRect();
-	const x = Math.max((rect.left + (props.anchorEl.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX;
-	const y = rect.top + props.anchorEl.offsetHeight + window.scrollY;
+	const rect = props.anchorElement.getBoundingClientRect();
+	const x = Math.max((rect.left + (props.anchorElement.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX;
+	const y = rect.top + props.anchorElement.offsetHeight + window.scrollY;
 
 	top.value = y;
 	left.value = x;

packages/frontend/src/components/MkUsersTooltip.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="250" @closed="emit('closed')">
 	<div :class="$style.root">
 		<div v-for="u in users" :key="u.id" :class="$style.user">
 			<MkAvatar :class="$style.avatar" :user="u"/>
@@ -23,7 +23,7 @@ defineProps<{
 	showing: boolean;
 	users: Misskey.entities.UserLite[];
 	count: number;
-	targetElement: HTMLElement;
+	anchorElement: HTMLElement;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/global/MkUrl.vue

@@ -62,7 +62,7 @@ if (props.showUrlPreview && isEnabledUrlPreview.value) {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 			showing,
 			url: props.url,
-			anchorEl: el.value instanceof HTMLElement ? el.value : el.value?.$el,
+			anchorElement: el.value instanceof HTMLElement ? el.value : el.value?.$el,
 		}, {
 			closed: () => dispose(),
 		});

packages/frontend/src/components/grid/MkCellTooltip.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :targetElement="targetElement" :maxWidth="250" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :anchorElement="anchorElement" :maxWidth="250" @closed="emit('closed')">
 	<div :class="$style.root">
 		{{ content }}
 	</div>
@@ -18,7 +18,7 @@ import MkTooltip from '@/components/MkTooltip.vue';
 defineProps<{
 	showing: boolean;
 	content: string;
-	targetElement: HTMLElement;
+	anchorElement: HTMLElement;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/grid/MkDataCell.vue

@@ -300,7 +300,7 @@ useTooltip(rootEl, (showing) => {
 	const result = os.popup(defineAsyncComponent(() => import('@/components/grid/MkCellTooltip.vue')), {
 		showing,
 		content,
-		targetElement: rootEl.value!,
+		anchorElement: rootEl.value!,
 	}, {
 		closed: () => {
 			result.dispose();

packages/frontend/src/directives/tooltip.ts

@@ -57,7 +57,7 @@ export default {
 				text: self.text,
 				asMfm: binding.modifiers.mfm,
 				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
-				targetElement: el,
+				anchorElement: el,
 			}, {
 				closed: () => dispose(),
 			});