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

packages/frontend/src/components/MkTabs.vue

@@ -63,8 +63,7 @@ import { prefer } from '@/preferences.js';
 import { genId } from '@/utility/id.js';
 
 const cssAnchorSupported = CSS.supports('position-anchor', '--anchor-name');
-const tabsComponentId = genId();
+const tabAnchorName = `--${genId()}-currentTab`;
-const tabAnchorName = `--${tabsComponentId}-currentTab`;
 
 const props = withDefaults(defineProps<{
 	tabs?: T[];
@@ -260,7 +259,7 @@ onUnmounted(() => {
 	pointer-events: none;
 
 	&.animate {
-		transition: width 0.15s ease, left 0.15s ease;
+		transition: width 0.15s ease-in, left 0.15s ease-in;
 	}
 
 	&.tabHighlightUpper {

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"
+			v-for="t in tabs"
-			class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: prefer.s.animation }]"
+			:ref="(el) => tabRefs[t.key] = (el as HTMLElement)"
-			@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
+			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], () => {
+	if (!cssAnchorSupported) {
-		nextTick(() => {
+		watch([() => props.tab, () => props.tabs], () => {
-			if (entering) return;
+			nextTick(() => {
-			renderTab();
+				if (entering) return;
+				renderTab();
+			});
+		}, {
+			immediate: true,
 		});
-	}, {
-		immediate: true,
-	});
 
-	if (props.rootEl) {
+		if (props.rootEl) {
-		ro2 = new ResizeObserver((entries, observer) => {
+			ro2 = new ResizeObserver(() => {
-			if (window.document.body.contains(el.value as HTMLElement)) {
+				if (window.document.body.contains(el.value as HTMLElement)) {
-				nextTick(() => renderTab());
+					nextTick(() => renderTab());
-			}
+				}
-		});
+			});
-		ro2.observe(props.rootEl);
+			ro2.observe(props.rootEl);
+		}
 	}
 });
 
@@ -243,7 +270,14 @@ onUnmounted(() => {
 	pointer-events: none;
 
 	&.animate {
-		transition: width 0.15s ease, left 0.15s ease;
+		transition: width 0.15s ease-in, left 0.15s ease-in;
+	}
+}
+
+@supports (position-anchor: --anchor-name) {
+	.tabHighlight {
+		left: anchor(var(--tabAnchorName) start);
+		width: anchor-size(var(--tabAnchorName) width);
 	}
 }
 </style>