From eae9af73c28dbfcc8681a46a07dc497215f1b283 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 5 Oct 2025 18:53:28 +0900
Subject: enhance(frontend): MkTabs, MkPageHeader.tabsにてタブハイライトのCSS
 Anchor Positioningに対応 (#16595)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): modalの中でtabsを使用する際にハイライトが変な位置に出る問題を修正

* fix lint

* Revert "fix(frontend): modalの中でtabsを使用する際にハイライトが変な位置に出る問題を修正"

This reverts commit 3b0ec46990d9ac9ae7f22140dfed5f8b80a4190c.

* fix

* fix

* enhance(frontend): MkTabsのタブハイライト切り替えをCSS anchor positioningに対応させる

* enhance(frontend): MkPageHeader.tabsのタブハイライト切り替えをCSS anchor positioningに対応させる

* :art:
---
 .../src/components/global/MkPageHeader.tabs.vue    | 70 ++++++++++++++++------
 1 file changed, 52 insertions(+), 18 deletions(-)

(limited to 'packages/frontend/src/components/global')

diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index a1b57f30d9..1ef75281fd 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -4,12 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
+<div ref="el" :class="$style.tabs" :style="{ '--tabAnchorName': tabAnchorName }" @wheel="onTabWheel">
 	<div :class="$style.tabsInner">
 		<button
-			v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
-			class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
-			@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
+			v-for="t in tabs"
+			:ref="(el) => tabRefs[t.key] = (el as HTMLElement)"
+			v-tooltip.noDelay="t.title"
+			class="_button"
+			:class="[$style.tab, {
+				[$style.active]: t.key != null && t.key === props.tab,
+				[$style.animate]: prefer.s.animation
+			}]"
+			:style="getTabStyle(t)"
+			@mousedown="(ev) => onTabMousedown(t, ev)"
+			@click="(ev) => onTabClick(t, ev)"
 		>
 			<div :class="$style.tabInner">
 				<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
@@ -48,6 +56,10 @@ export type Tab = {
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 import { prefer } from '@/preferences.js';
+import { genId } from '@/utility/id.js';
+
+const cssAnchorSupported = CSS.supports('position-anchor', '--anchor-name');
+const tabAnchorName = `--${genId()}-currentTab`;
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
@@ -66,6 +78,17 @@ const el = useTemplateRef('el');
 const tabHighlightEl = useTemplateRef('tabHighlightEl');
 const tabRefs: Record<string, HTMLElement | null> = {};
 
+function getTabStyle(t: Tab) {
+	if (!cssAnchorSupported) return {};
+	if (t.key === props.tab) {
+		return {
+			anchorName: tabAnchorName,
+		};
+	} else {
+		return {};
+	}
+}
+
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
@@ -88,6 +111,8 @@ function onTabClick(t: Tab, ev: MouseEvent): void {
 }
 
 function renderTab() {
+	if (cssAnchorSupported) return;
+
 	const tabEl = props.tab ? tabRefs[props.tab] : undefined;
 	if (tabEl && tabHighlightEl.value && tabHighlightEl.value.parentElement) {
 		// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
@@ -152,22 +177,24 @@ function afterLeave(el: Element) {
 let ro2: ResizeObserver | null;
 
 onMounted(() => {
-	watch([() => props.tab, () => props.tabs], () => {
-		nextTick(() => {
-			if (entering) return;
-			renderTab();
+	if (!cssAnchorSupported) {
+		watch([() => props.tab, () => props.tabs], () => {
+			nextTick(() => {
+				if (entering) return;
+				renderTab();
+			});
+		}, {
+			immediate: true,
 		});
-	}, {
-		immediate: true,
-	});
 
-	if (props.rootEl) {
-		ro2 = new ResizeObserver((entries, observer) => {
-			if (window.document.body.contains(el.value as HTMLElement)) {
-				nextTick(() => renderTab());
-			}
-		});
-		ro2.observe(props.rootEl);
+		if (props.rootEl) {
+			ro2 = new ResizeObserver(() => {
+				if (window.document.body.contains(el.value as HTMLElement)) {
+					nextTick(() => renderTab());
+				}
+			});
+			ro2.observe(props.rootEl);
+		}
 	}
 });
 
@@ -246,4 +273,11 @@ onUnmounted(() => {
 		transition: width 0.15s ease, left 0.15s ease;
 	}
 }
+
+@supports (position-anchor: --anchor-name) {
+	.tabHighlight {
+		left: anchor(var(--tabAnchorName) start);
+		width: anchor-size(var(--tabAnchorName) width);
+	}
+}
 </style>
-- 
cgit v1.2.3-freya