From cf9508245063a270106cf62e2b100dea56c4c442 Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Thu, 28 Mar 2024 21:23:16 +0900
Subject: [PATCH] =?UTF-8?q?CSS=20Module=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/grid/MkGrid.vue   |  6 ----
 .../custom-emojis-manager.local.list.vue      | 34 +++++++++----------
 .../custom-emojis-manager.local.register.vue  | 10 +++---
 .../admin/custom-emojis-manager.remote.vue    | 14 +++-----
 4 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index 7c0e12be30..3d8b313109 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -1269,12 +1269,6 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss">
-.hidden {
-	background-color: yellow;
-}
-</style>
-
 <style module lang="scss">
 $borderSetting: solid 0.5px var(--divider);
 $borderRadius: var(--radius);
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
index ac65198087..b119699cb2 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue
@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryName"
 					type="search"
 					autocapitalize="off"
-					class="col1 row1"
+					:class="[$style.col1, $style.row1]"
 					@enter="onSearchRequest"
 				>
 					<template #label>name</template>
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryCategory"
 					type="search"
 					autocapitalize="off"
-					class="col2 row1"
+					:class="[$style.col2, $style.row1]"
 					@enter="onSearchRequest"
 				>
 					<template #label>category</template>
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryAliases"
 					type="search"
 					autocapitalize="off"
-					class="col3 row1"
+					:class="[$style.col3, $style.row1]"
 					@enter="onSearchRequest"
 				>
 					<template #label>aliases</template>
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryType"
 					type="search"
 					autocapitalize="off"
-					class="col1 row2"
+					:class="[$style.col1, $style.row2]"
 					@enter="onSearchRequest"
 				>
 					<template #label>type</template>
@@ -55,14 +55,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryLicense"
 					type="search"
 					autocapitalize="off"
-					class="col2 row2"
+					:class="[$style.col2, $style.row2]"
 					@enter="onSearchRequest"
 				>
 					<template #label>license</template>
 				</MkInput>
 				<MkSelect
 					v-model="querySensitive"
-					class="col3 row2"
+					:class="[$style.col3, $style.row2]"
 				>
 					<template #label>sensitive</template>
 					<option :value="null">-</option>
@@ -72,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<MkSelect
 					v-model="queryLocalOnly"
-					class="col1 row3"
+					:class="[$style.col1, $style.row3]"
 				>
 					<template #label>localOnly</template>
 					<option :value="null">-</option>
@@ -83,7 +83,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryUpdatedAtFrom"
 					type="date"
 					autocapitalize="off"
-					class="col2 row3"
+					:class="[$style.col2, $style.row3]"
 					@enter="onSearchRequest"
 				>
 					<template #label>updatedAt(from)</template>
@@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-model="queryUpdatedAtTo"
 					type="date"
 					autocapitalize="off"
-					class="col3 row3"
+					:class="[$style.col3, $style.row3]"
 					@enter="onSearchRequest"
 				>
 					<template #label>updatedAt(to)</template>
@@ -103,7 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					type="text"
 					readonly
 					autocapitalize="off"
-					class="col1 row4"
+					:class="[$style.col1, $style.row4]"
 					@click="onQueryRolesEditClicked"
 				>
 					<template #label>role</template>
@@ -152,7 +152,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, useCssModule } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import {
@@ -199,6 +199,8 @@ type GridItem = {
 }
 
 function setupGrid(): GridSetting {
+	const $style = useCssModule();
+
 	const required = validators.required();
 	const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
 	const unique = validators.unique();
@@ -212,12 +214,12 @@ function setupGrid(): GridSetting {
 				{
 					// 初期値から変わっていたら背景色を変更
 					condition: ({ row }) => JSON.stringify(gridItems.value[row.index]) !== JSON.stringify(originGridItems.value[row.index]),
-					applyStyle: { className: 'changedRow' },
+					applyStyle: { className: $style.changedRow },
 				},
 				{
 					// バリデーションに引っかかっていたら背景色を変更
 					condition: ({ cells }) => cells.some(it => !it.violation.valid),
-					applyStyle: { className: 'violationRow' },
+					applyStyle: { className: $style.violationRow },
 				},
 			],
 			// 行のコンテキストメニュー設定
@@ -610,7 +612,7 @@ onMounted(async () => {
 
 </script>
 
-<style lang="scss">
+<style module lang="scss">
 .violationRow {
 	background-color: var(--infoWarnBg);
 }
@@ -618,9 +620,7 @@ onMounted(async () => {
 .changedRow {
 	background-color: var(--infoBg);
 }
-</style>
 
-<style lang="scss">
 .editedRow {
 	background-color: var(--infoBg);
 }
@@ -652,9 +652,7 @@ onMounted(async () => {
 .col3 {
 	grid-column: 3 / 4;
 }
-</style>
 
-<style module lang="scss">
 .searchArea {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
index cf84f6a7c3..5ced1348ea 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue
@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as Misskey from 'misskey-js';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, useCssModule } from 'vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import {
 	emptyStrToEmptyArray,
@@ -118,6 +118,8 @@ type GridItem = {
 }
 
 function setupGrid(): GridSetting {
+	const $style = useCssModule();
+
 	const required = validators.required();
 	const regex = validators.regex(/^[a-zA-Z0-9_]+$/);
 	const unique = validators.unique();
@@ -136,7 +138,7 @@ function setupGrid(): GridSetting {
 				{
 					// 1つでもバリデーションエラーがあれば行全体をエラー表示する
 					condition: ({ cells }) => cells.some(it => !it.violation.valid),
-					applyStyle: { className: 'violationRow' },
+					applyStyle: { className: $style.violationRow },
 				},
 			],
 			// 行のコンテキストメニュー設定
@@ -427,13 +429,11 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="scss">
+<style module lang="scss">
 .violationRow {
 	background-color: var(--infoWarnBg);
 }
-</style>
 
-<style module lang="scss">
 .uploadBox {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
index 4590f060c4..012ebfd358 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						v-model="queryName"
 						type="search"
 						autocapitalize="off"
-						class="col1 row1"
+						:class="[$style.col1, $style.row1]"
 						@enter="onSearchRequest"
 					>
 						<template #label>name</template>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						v-model="queryHost"
 						type="search"
 						autocapitalize="off"
-						class="col2 row1"
+						:class="[$style.col2, $style.row1]"
 						@enter="onSearchRequest"
 					>
 						<template #label>host</template>
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						v-model="queryUri"
 						type="search"
 						autocapitalize="off"
-						class="col1 row2"
+						:class="[$style.col1, $style.row2]"
 						@enter="onSearchRequest"
 					>
 						<template #label>uri</template>
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						v-model="queryPublicUrl"
 						type="search"
 						autocapitalize="off"
-						class="col2 row2"
+						:class="[$style.col2, $style.row2]"
 						@enter="onSearchRequest"
 					>
 						<template #label>publicUrl</template>
@@ -293,7 +293,7 @@ onMounted(async () => {
 });
 </script>
 
-<style lang="scss">
+<style module lang="scss">
 .row1 {
 	grid-row: 1 / 2;
 }
@@ -310,10 +310,6 @@ onMounted(async () => {
 	grid-column: 2 / 3;
 }
 
-</style>
-
-<style module lang="scss">
-
 .root {
 	--stickyTop: 0px;