refactor(client): use css modules

packages/frontend/src/ui/deck/column.vue

@@ -1,31 +1,28 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 <section
-	v-hotkey="keymap" class="dnpfarvg"
-	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
+	v-hotkey="keymap"
+	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.isStacked]: isStacked, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
 >
 	<header
-		:class="{ indicated }"
+		:class="[$style.header, { [$style.indicated]: indicated }]"
 		draggable="true"
 		@click="goTop"
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
 	>
-		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
+		<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
 			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
 			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
-		<div class="action">
-			<slot name="action"></slot>
-		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
+		<span :class="$style.title"><slot name="header"></slot></span>
+		<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
-	<div v-show="active" ref="body">
+	<div v-show="active" ref="body" :class="$style.body">
 		<slot></slot>
 	</div>
 </section>
@@ -245,8 +242,8 @@ function onDrop(ev) {
 }
 </script>
 
-<style lang="scss" scoped>
-.dnpfarvg {
+<style lang="scss" module>
+.root {
 	--root-margin: 10px;
 	--deckColumnHeaderHeight: 40px;
 
@@ -293,7 +290,7 @@ function onDrop(ev) {
 		flex-basis: var(--deckColumnHeaderHeight);
 		min-height: var(--deckColumnHeaderHeight);
 
-		> header.indicated {
+		> .header.indicated {
 			box-shadow: 4px 0px var(--accent) inset;
 		}
 	}
@@ -303,21 +300,19 @@ function onDrop(ev) {
 		-webkit-backdrop-filter: var(--blur, blur(10px));
 		backdrop-filter: var(--blur, blur(10px));
 
-		> header {
+		> .header {
 			background: transparent;
 			box-shadow: none;
-
-			> button {
 			color: var(--fg);
 		}
 	}
-	}
 
 	&.paged {
 		background: var(--bg) !important;
 	}
+}
 
-	> header {
+.header {
 	position: relative;
 	display: flex;
 	z-index: 2;
@@ -337,22 +332,19 @@ function onDrop(ev) {
 	&.indicated {
 		box-shadow: 0 3px 0 0 var(--accent);
 	}
+}
 
-		> .header {
+.title {
 	display: inline-block;
 	align-items: center;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-		}
-
-		> span:only-of-type {
 	width: 100%;
-		}
+}
 
-		> .toggleActive,
-		> .action > ::v-deep(*),
-		> .menu {
+.toggleActive,
+.menu {
 	z-index: 1;
 	width: var(--deckColumnHeaderHeight);
 	line-height: var(--deckColumnHeaderHeight);
@@ -365,27 +357,18 @@ function onDrop(ev) {
 	&:active {
 		color: var(--faceTextButtonActive);
 	}
-		}
+}
 
-		> .toggleActive, > .action {
+.toggleActive {
 	margin-left: -16px;
-		}
+}
 
-		> .action {
-			z-index: 1;
-		}
-
-		> .action:empty {
-			display: none;
-		}
-
-		> .menu {
+.menu {
 	margin-left: auto;
 	margin-right: -16px;
-		}
-	}
+}
 
-	> div {
+.body {
 	height: calc(100% - var(--deckColumnHeaderHeight));
 	overflow-y: auto;
 	overflow-x: hidden; // Safari does not supports clip
@@ -394,6 +377,5 @@ function onDrop(ev) {
 	box-sizing: border-box;
 	container-type: inline-size;
 	background-color: var(--bg);
-	}
 }
 </style>