From 07025caee95f8b21411fb8d6089f15b87f9265ec Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 15 Jan 2023 14:03:28 +0900
Subject: [PATCH] refactor(client): use css modules

---
 .../frontend/src/widgets/WidgetCalendar.vue   | 208 +++++++++---------
 .../src/widgets/WidgetDigitalClock.vue        |  20 +-
 packages/frontend/src/widgets/WidgetMemo.vue  |  74 +++----
 3 files changed, 152 insertions(+), 150 deletions(-)

diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index 1bd431259a..1edadb1871 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -1,31 +1,31 @@
 <template>
-<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
-	<div class="calendar" :class="{ isHoliday }">
-		<p class="month-and-year">
-			<span class="year">{{ $t('yearX', { year }) }}</span>
-			<span class="month">{{ $t('monthX', { month }) }}</span>
+<div :class="[$style.root, { _panel: !widgetProps.transparent }]">
+	<div :class="[$style.calendar, { [$style.isHoliday]: isHoliday }]">
+		<p :class="$style.monthAndYear">
+			<span :class="$style.year">{{ $t('yearX', { year }) }}</span>
+			<span :class="$style.month">{{ $t('monthX', { month }) }}</span>
 		</p>
 		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
-		<p class="week-day">{{ weekDay }}</p>
+		<p v-else :class="$style.day">{{ $t('dayX', { day }) }}</p>
+		<p :class="$style.weekDay">{{ weekDay }}</p>
 	</div>
-	<div class="info">
-		<div>
-			<p>{{ i18n.ts.today }}<b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
+	<div :class="$style.info">
+		<div :class="$style.infoSection">
+			<p :class="$style.infoText">{{ i18n.ts.today }}<b :class="$style.percentage">{{ dayP.toFixed(1) }}%</b></p>
+			<div :class="$style.meter">
+				<div :class="$style.meterVal" :style="{ width: `${dayP}%` }"></div>
 			</div>
 		</div>
-		<div>
-			<p>{{ i18n.ts.thisMonth }}<b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
+		<div :class="$style.infoSection">
+			<p :class="$style.infoText">{{ i18n.ts.thisMonth }}<b :class="$style.percentage">{{ monthP.toFixed(1) }}%</b></p>
+			<div :class="$style.meter">
+				<div :class="$style.meterVal" :style="{ width: `${monthP}%` }"></div>
 			</div>
 		</div>
-		<div>
-			<p>{{ i18n.ts.thisYear }}<b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
+		<div :class="$style.infoSection">
+			<p :class="$style.infoText">{{ i18n.ts.thisYear }}<b :class="$style.percentage">{{ yearP.toFixed(1) }}%</b></p>
+			<div :class="$style.meter">
+				<div :class="$style.meterVal" :style="{ width: `${yearP}%` }"></div>
 			</div>
 		</div>
 	</div>
@@ -115,8 +115,8 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.mkw-calendar {
+<style lang="scss" module>
+.root {
 	padding: 16px 0;
 
 	&:after {
@@ -124,91 +124,93 @@ defineExpose<WidgetComponentExpose>({
 		display: block;
 		clear: both;
 	}
+}
 
-	> .calendar {
-		float: left;
-		width: 60%;
-		text-align: center;
-
-		&.isHoliday {
-			> .day {
-				color: #ef95a0;
-			}
-		}
-
-		> .month-and-year, > .week-day {
-			margin: 0;
-			line-height: 18px;
-			font-size: 0.9em;
-
-			> .year, > .month {
-				margin: 0 4px;
-			}
-		}
+.calendar {
+	float: left;
+	width: 60%;
+	text-align: center;
 
+	&.isHoliday {
 		> .day {
-			margin: 10px 0;
-			line-height: 32px;
-			font-size: 1.75em;
-		}
-	}
-
-	> .info {
-		display: block;
-		float: left;
-		width: 40%;
-		padding: 0 16px 0 0;
-		box-sizing: border-box;
-
-		> div {
-			margin-bottom: 8px;
-
-			&:last-child {
-				margin-bottom: 4px;
-			}
-
-			> p {
-				display: flex;
-				margin: 0 0 2px 0;
-				font-size: 0.75em;
-				line-height: 18px;
-				opacity: 0.8;
-
-				> b {
-					margin-left: auto;
-				}
-			}
-
-			> .meter {
-				width: 100%;
-				overflow: hidden;
-				background: var(--X11);
-				border-radius: 8px;
-
-				> .val {
-					height: 4px;
-					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
-				}
-			}
-
-			&:nth-child(1) {
-				> .meter > .val {
-					background: #f7796c;
-				}
-			}
-
-			&:nth-child(2) {
-				> .meter > .val {
-					background: #a1de41;
-				}
-			}
-
-			&:nth-child(3) {
-				> .meter > .val {
-					background: #41ddde;
-				}
-			}
+			color: #ef95a0;
 		}
 	}
 }
+
+.monthAndYear,
+.weekDay {
+	margin: 0;
+	line-height: 18px;
+	font-size: 0.9em;
+}
+
+.year,
+.month {
+	margin: 0 4px;
+}
+
+.day {
+	margin: 10px 0;
+	line-height: 32px;
+	font-size: 1.75em;
+}
+
+.info {
+	display: block;
+	float: left;
+	width: 40%;
+	padding: 0 16px 0 0;
+	box-sizing: border-box;
+}
+
+.infoSection {
+	margin-bottom: 8px;
+
+	&:last-child {
+		margin-bottom: 4px;
+	}
+
+	&:nth-child(1) {
+		> .meter > .meterVal {
+			background: #f7796c;
+		}
+	}
+
+	&:nth-child(2) {
+		> .meter > .meterVal {
+			background: #a1de41;
+		}
+	}
+
+	&:nth-child(3) {
+		> .meter > .meterVal {
+			background: #41ddde;
+		}
+	}
+}
+
+.infoText {
+	display: flex;
+	margin: 0 0 2px 0;
+	font-size: 0.75em;
+	line-height: 18px;
+	opacity: 0.8;
+}
+
+.percentage {
+	margin-left: auto;
+}
+
+.meter {
+	width: 100%;
+	overflow: hidden;
+	background: var(--X11);
+	border-radius: 8px;
+}
+
+.meterVal {
+	height: 4px;
+	transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
+}
 </style>
diff --git a/packages/frontend/src/widgets/WidgetDigitalClock.vue b/packages/frontend/src/widgets/WidgetDigitalClock.vue
index d2bfd523f3..b70b2767b3 100644
--- a/packages/frontend/src/widgets/WidgetDigitalClock.vue
+++ b/packages/frontend/src/widgets/WidgetDigitalClock.vue
@@ -1,10 +1,10 @@
 <template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
+<div class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div>
+	<div>
 		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
+	<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div>
 </div>
 </template>
 
@@ -79,14 +79,14 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.mkw-digitalClock {
+<style lang="scss" module>
+.root {
 	padding: 16px 0;
 	text-align: center;
+}
 
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
+.label {
+	font-size: 65%;
+	opacity: 0.7;
 }
 </style>
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index d5d96165c7..8523aee544 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -3,9 +3,9 @@
 	<template #icon><i class="ti ti-note"></i></template>
 	<template #header>{{ i18n.ts._widgets.memo }}</template>
 
-	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
+	<div :class="$style.root">
+		<textarea v-model="text" :class="$style.textarea" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
+		<button :class="$style.save" :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
 	</div>
 </MkContainer>
 </template>
@@ -68,45 +68,45 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-.otgbylcu {
+<style lang="scss" module>
+.root {
 	padding-bottom: 28px + 16px;
+}
 
-	> textarea {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		padding: 16px;
-		color: var(--fg);
-		background: transparent;
-		border: none;
-		border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-sizing: border-box;
-		font: inherit;
-		font-size: 0.9em;
+.textarea {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	min-width: 100%;
+	padding: 16px;
+	color: var(--fg);
+	background: transparent;
+	border: none;
+	border-bottom: solid 0.5px var(--divider);
+	border-radius: 0;
+	box-sizing: border-box;
+	font: inherit;
+	font-size: 0.9em;
 
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	> button {
-		display: block;
-		position: absolute;
-		bottom: 8px;
-		right: 8px;
-		margin: 0;
-		padding: 0 10px;
-		height: 28px;
+	&:focus-visible {
 		outline: none;
-		border-radius: 4px;
+	}
+}
 
-		&:disabled {
-			opacity: 0.7;
-			cursor: default;
-		}
+.save {
+	display: block;
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	margin: 0;
+	padding: 0 10px;
+	height: 28px;
+	outline: none;
+	border-radius: 4px;
+
+	&:disabled {
+		opacity: 0.7;
+		cursor: default;
 	}
 }
 </style>