fix(#10923): avoid computed class name

packages/frontend/src/components/MkAchievements.vue

@@ -3,7 +3,14 @@
 	<div v-if="achievements" :class="$style.root">
 		<div v-for="achievement in achievements" :key="achievement" :class="$style.achievement" class="_panel">
 			<div :class="$style.icon">
-				<div :class="[$style.iconFrame, $style['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
+				<div
+					:class="[$style.iconFrame, {
+						[$style.iconFrame_bronze]: ACHIEVEMENT_BADGES[achievement.name].frame === 'bronze',
+						[$style.iconFrame_silver]: ACHIEVEMENT_BADGES[achievement.name].frame === 'silver',
+						[$style.iconFrame_gold]: ACHIEVEMENT_BADGES[achievement.name].frame === 'gold',
+						[$style.iconFrame_platinum]: ACHIEVEMENT_BADGES[achievement.name].frame === 'platinum',
+					}]"
+				>
 					<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
 						<img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
 					</div>

packages/frontend/src/components/MkDialog.vue

@@ -4,7 +4,15 @@
 		<div v-if="icon" :class="$style.icon">
 			<i :class="icon"></i>
 		</div>
-		<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
+		<div
+			v-else-if="!input && !select"
+			:class="[$style.icon, {
+				[$style.type_success]: type === 'success',
+				[$style.type_error]: type === 'error',
+				[$style.type_warning]: type === 'warning',
+				[$style.type_info]: type === 'info',
+			}]"
+		>
 			<i v-if="type === 'success'" :class="$style.iconInner" class="ti ti-check"></i>
 			<i v-else-if="type === 'error'" :class="$style.iconInner" class="ti ti-circle-x"></i>
 			<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ti ti-alert-triangle"></i>

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -3,7 +3,7 @@
 	<TransitionGroup
 		:duration="defaultStore.state.animation && props.transition?.duration || undefined"
 		:enterActiveClass="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
-		:leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || undefined"
+		:leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
 		:enterFromClass="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
 		:leaveToClass="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
 		:enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined"

packages/frontend/src/components/MkMediaList.vue

@@ -6,8 +6,11 @@
 			ref="gallery"
 			:class="[
 				$style.medias,
-				count <= 4 ? $style['n' + count] : $style.nMany,
-				$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
+				count === 1 ? [$style.n1, {
+					[$style.n116_9]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '16_9',
+					[$style.n1_1]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '1_1',
+					[$style.n12_3]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '2_3',
+				}] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
 			]"
 		>
 			<template v-for="media in mediaList.filter(media => previewable(media))">

packages/frontend/src/components/MkModal.vue

@@ -1,10 +1,30 @@
 <template>
 <Transition
 	:name="transitionName"
-	:enterActiveClass="$style['transition_' + transitionName + '_enterActive']"
-	:leaveActiveClass="$style['transition_' + transitionName + '_leaveActive']"
-	:enterFromClass="$style['transition_' + transitionName + '_enterFrom']"
-	:leaveToClass="$style['transition_' + transitionName + '_leaveTo']"
+	:enterActiveClass="{
+		[$style.transition_modalDrawer_enterActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterActive]: transitionName === 'modal',
+		[$style.transition_send_enterActive]: transitionName === 'send',
+	}"
+	:leaveActiveClass="{
+		[$style.transition_modalDrawer_leaveActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_leaveActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveActive]: transitionName === 'modal',
+		[$style.transition_send_leaveActive]: transitionName === 'send',
+	}"
+	:enterFromClass="{
+		[$style.transition_modalDrawer_enterFrom]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterFrom]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterFrom]: transitionName === 'modal',
+		[$style.transition_send_enterFrom]: transitionName === 'send',
+	}"
+	:leaveToClass="{
+		[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
+		[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveTo]: transitionName === 'modal',
+		[$style.transition_send_leaveTo]: transitionName === 'send',
+	}"
 	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
@@ -339,8 +359,8 @@ defineExpose({
 	}
 }
 
-.transition_modal-popup_enterActive,
-.transition_modal-popup_leaveActive {
+.transition_modalPopup_enterActive,
+.transition_modalPopup_leaveActive {
 	> .bg {
 		transition: opacity 0.1s !important;
 	}
@@ -350,8 +370,8 @@ defineExpose({
 		transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
-.transition_modal-popup_enterFrom,
-.transition_modal-popup_leaveTo {
+.transition_modalPopup_enterFrom,
+.transition_modalPopup_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -364,7 +384,7 @@ defineExpose({
 	}
 }
 
-.transition_modal-drawer_enterActive {
+.transition_modalDrawer_enterActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -373,7 +393,7 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.transition_modal-drawer_leaveActive {
+.transition_modalDrawer_leaveActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}

packages/frontend/src/components/MkNotification.vue

@@ -5,7 +5,19 @@
 		<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
-		<div :class="[$style.subIcon, $style['t_' + notification.type]]">
+		<div
+			:class="[$style.subIcon, {
+				[$style.t_follow]: notification.type === 'follow',
+				[$style.t_followRequestAccepted]: notification.type === 'followRequestAccepted',
+				[$style.t_receiveFollowRequest]: notification.type === 'receiveFollowRequest',
+				[$style.t_renote]: notification.type === 'renote',
+				[$style.t_reply]: notification.type === 'reply',
+				[$style.t_mention]: notification.type === 'mention',
+				[$style.t_quote]: notification.type === 'quote',
+				[$style.t_pollEnded]: notification.type === 'pollEnded',
+				[$style.t_achievementEarned]: notification.type === 'achievementEarned',
+			}]"
+		>
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
 			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>

packages/frontend/src/components/MkUserOnlineIndicator.vue

@@ -1,5 +1,13 @@
 <template>
-<div v-tooltip="text" :class="[$style.root, $style['status_' + user.onlineStatus]]"></div>
+<div
+	v-tooltip="text"
+	:class="[$style.root, {
+		[$style.status_online]: user.onlineStatus === 'online',
+		[$style.status_active]: user.onlineStatus === 'active',
+		[$style.status_offline]: user.onlineStatus === 'offline',
+		[$style.status_unknown]: user.onlineStatus === 'unknown',
+	}]"
+></div>
 </template>
 
 <script lang="ts" setup>

packages/frontend/src/components/MkWidgets.vue

@@ -1,7 +1,7 @@
 <template>
 <div :class="$style.root">
 	<template v-if="edit">
-		<header :class="$style['edit-header']">
+		<header :class="$style.editHeader">
 			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
@@ -15,15 +15,15 @@
 			handle=".handle"
 			:animation="150"
 			:group="{ name: 'SortableMkWidgets' }"
-			:class="$style['edit-editing']"
+			:class="$style.editEditing"
 			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
-				<div :class="[$style.widget, $style['customize-container']]" data-cy-customize-container>
-					<button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
-					<button :class="$style['customize-container-remove']" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
+				<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
+					<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
+					<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
 					<div class="handle">
-						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
+						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
 					</div>
 				</div>
 			</template>
@@ -130,7 +130,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 }
 
 .edit {
-	&-header {
+	&Header {
 		margin: 16px 0;
 
 		> * {
@@ -139,17 +139,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		}
 	}
 
-	&-editing {
+	&Editing {
 		min-height: 100px;
 	}
 }
 
-.customize-container {
+.customizeContainer {
 	position: relative;
 	cursor: move;
 
-	&-config,
-	&-remove {
+	&Config,
+	&Remove {
 		position: absolute;
 		z-index: 10000;
 		top: 8px;
@@ -160,17 +160,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		border-radius: 4px;
 	}
 
-	&-config {
+	&Config {
 		right: 8px + 8px + 32px;
 	}
 
-	&-remove {
+	&Remove {
 		right: 8px;
 	}
 
-	&-handle {
+	&Handle {
 
-		&-widget {
+		&Widget {
 			pointer-events: none;
 		}
 	}

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

@@ -1,6 +1,14 @@
 <template>
 <div v-if="chosen && !shouldHide" :class="$style.root">
-	<div v-if="!showMenu" :class="[$style.main, $style['form_' + chosen.place]]">
+	<div
+		v-if="!showMenu"
+		:class="[$style.main, {
+			[$style.form_square]: chosen.place === 'square',
+			[$style.form_horizontal]: chosen.place === 'horizontal',
+			[$style.form_horizontalBig]: chosen.place === 'horizontal-big',
+			[$style.form_vertical]: chosen.place === 'vertical',
+		}]"
+	>
 		<a :href="chosen.url" target="_blank" :class="$style.link">
 			<img :src="chosen.imageUrl" :class="$style.img">
 			<button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button>
@@ -122,7 +130,7 @@ function reduceFrequency(): void {
 		}
 	}
 
-	&.form_horizontal-big {
+	&.form_horizontalBig {
 		padding: 8px;
 
 		> .link,

packages/frontend/src/components/page/page.section.vue

@@ -1,6 +1,15 @@
 <template>
 <section>
-	<component :is="'h' + h" :class="h < 5 ? $style['h' + h] : null">{{ block.title }}</component>
+	<component
+		:is="'h' + h"
+		:class="{
+			'h2': h === 2,
+			'h3': h === 3,
+			'h4': h === 4,
+		}"
+	>
+		{{ block.title }}
+	</component>
 
 	<div class="_gaps">
 		<XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/>

packages/frontend/src/ui/_common_/common.vue

@@ -10,7 +10,15 @@
 <XUpload v-if="uploads.length > 0"/>
 
 <TransitionGroup
-	tag="div" :class="[$style.notifications, $style[`notificationsPosition-${defaultStore.state.notificationPosition}`], $style[`notificationsStackAxis-${defaultStore.state.notificationStackAxis}`]]"
+	tag="div"
+	:class="[$style.notifications, {
+		[$style.notificationsPosition_leftTop]: defaultStore.state.notificationPosition === 'leftTop',
+		[$style.notificationsPosition_leftBottom]: defaultStore.state.notificationPosition === 'leftBottom',
+		[$style.notificationsPosition_rightTop]: defaultStore.state.notificationPosition === 'rightTop',
+		[$style.notificationsPosition_rightBottom]: defaultStore.state.notificationPosition === 'rightBottom',
+		[$style.notificationsStackAxis_vertical]: defaultStore.state.notificationStackAxis === 'vertical',
+		[$style.notificationsStackAxis_horizontal]: defaultStore.state.notificationStackAxis === 'horizontal',
+	}]"
 	:moveClass="defaultStore.state.animation ? $style.transition_notification_move : ''"
 	:enterActiveClass="defaultStore.state.animation ? $style.transition_notification_enterActive : ''"
 	:leaveActiveClass="defaultStore.state.animation ? $style.transition_notification_leaveActive : ''"
@@ -103,31 +111,31 @@ if ($i) {
 	pointer-events: none;
 	display: flex;
 
-	&.notificationsPosition-leftTop {
+	&.notificationsPosition_leftTop {
 		top: var(--margin);
 		left: 0;
 	}
 
-	&.notificationsPosition-rightTop {
+	&.notificationsPosition_rightTop {
 		top: var(--margin);
 		right: 0;
 	}
 
-	&.notificationsPosition-leftBottom {
+	&.notificationsPosition_leftBottom {
 		bottom: calc(var(--minBottomSpacing) + var(--margin));
 		left: 0;
 	}
 
-	&.notificationsPosition-rightBottom {
+	&.notificationsPosition_rightBottom {
 		bottom: calc(var(--minBottomSpacing) + var(--margin));
 		right: 0;
 	}
 
-	&.notificationsStackAxis-vertical {
+	&.notificationsStackAxis_vertical {
 		width: 250px;
 
-		&.notificationsPosition-leftTop,
-		&.notificationsPosition-rightTop {
+		&.notificationsPosition_leftTop,
+		&.notificationsPosition_rightTop {
 			flex-direction: column;
 
 			.notification {
@@ -137,8 +145,8 @@ if ($i) {
 			}
 		}
 
-		&.notificationsPosition-leftBottom,
-		&.notificationsPosition-rightBottom {
+		&.notificationsPosition_leftBottom,
+		&.notificationsPosition_rightBottom {
 			flex-direction: column-reverse;
 
 			.notification {
@@ -149,11 +157,11 @@ if ($i) {
 		}
 	}
 
-	&.notificationsStackAxis-horizontal {
+	&.notificationsStackAxis_horizontal {
 		width: 100%;
 
-		&.notificationsPosition-leftTop,
-		&.notificationsPosition-leftBottom {
+		&.notificationsPosition_leftTop,
+		&.notificationsPosition_leftBottom {
 			flex-direction: row;
 
 			.notification {
@@ -163,8 +171,8 @@ if ($i) {
 			}
 		}
 
-		&.notificationsPosition-rightTop,
-		&.notificationsPosition-rightBottom {
+		&.notificationsPosition_rightTop,
+		&.notificationsPosition_rightBottom {
 			flex-direction: row-reverse;
 
 			.notification {

packages/frontend/src/widgets/WidgetClock.vue

@@ -1,6 +1,12 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock>
-	<div :class="[$style.root, $style[widgetProps.size]]">
+	<div
+		:class="[$style.root, {
+			[$style.small]: widgetProps.size === 'small',
+			[$style.medium]: widgetProps.size === 'medium',
+			[$style.large]: widgetProps.size === 'large',
+		}]"
+	>
 		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace" :class="[$style.label, $style.a]">{{ tzAbbrev }}</div>
 		<MkAnalogClock
 			:class="$style.clock"