From 2d947dc9682f28134ff10d5795a158f4b138bd31 Mon Sep 17 00:00:00 2001
From: XiNGRZ <hi@xingrz.me>
Date: Sat, 6 Apr 2024 18:27:33 +0800
Subject: [PATCH] Gather all styles of BSMap components into one SCSS module

It's much clear than split into individual SFCs
---
 src/components/BSMap.vue               |  9 +---
 src/components/BSMap/BSCell.vue        | 12 +----
 src/components/BSMap/BSIcon.vue        | 29 ++----------
 src/components/BSMap/BSRow.vue         | 25 ++---------
 src/components/BSMap/BSText.vue        | 20 +--------
 src/components/BSMap/style.module.scss | 62 ++++++++++++++++++++++++++
 6 files changed, 76 insertions(+), 81 deletions(-)
 create mode 100644 src/components/BSMap/style.module.scss

diff --git a/src/components/BSMap.vue b/src/components/BSMap.vue
index 62bea1b..8f1dc64 100644
--- a/src/components/BSMap.vue
+++ b/src/components/BSMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.map" :style="style">
+  <div :class="$bsMap.map" :style="style">
     <BSRow v-for="(row, index) in rows" :key="index" :src="row" :row="index" />
   </div>
 </template>
@@ -13,6 +13,7 @@ import {
 
 import { max } from 'radash';
 
+import $bsMap from './BSMap/style.module.scss';
 import BSRow from './BSMap/BSRow.vue';
 
 const props = defineProps<{
@@ -28,9 +29,3 @@ const style = computed(() => ({
   '--bs-map-cols': cols.value,
 }) as CSSProperties);
 </script>
-
-<style lang="scss" module>
-.map {
-  line-height: calc(var(--bs-map-size) * 1px);
-}
-</style>
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
index 2eb42fb..2ac9746 100644
--- a/src/components/BSMap/BSCell.vue
+++ b/src/components/BSMap/BSCell.vue
@@ -1,6 +1,6 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
-    <div :class="[selectable, $style.cell]" :title="props.src" @click="handleClick" :style="style">
+    <div :class="[selectable, $bsMap.cell]" :title="props.src" @click="handleClick" :style="style">
       <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :src="icon"
         @ratio="(ratio: number) => updateRatio(index, ratio)" />
     </div>
@@ -18,6 +18,7 @@ import {
 import { useEditorStore } from '@/stores/editor';
 import styleFromParams from '@/utils/styleFromParams';
 
+import $bsMap from './style.module.scss';
 import BSSelectable from './BSSelectable.vue';
 import BSIcon from './BSIcon.vue';
 
@@ -62,12 +63,3 @@ function updateRatio(layer: number, newRatio: number): void {
   }
 }
 </script>
-
-<style lang="scss" module>
-.cell {
-  position: relative;
-  cursor: pointer;
-  width: calc(var(--bs-map-size) * var(--bs-map-cell-ratio, 1) * 1px);
-  height: calc(var(--bs-map-size) * 1px);
-}
-</style>
diff --git a/src/components/BSMap/BSIcon.vue b/src/components/BSMap/BSIcon.vue
index d8fe71c..0f26589 100644
--- a/src/components/BSMap/BSIcon.vue
+++ b/src/components/BSMap/BSIcon.vue
@@ -1,8 +1,8 @@
 <template>
-  <div v-if="parts.type == 'text'" :class="$style.text" :style="style">
+  <div v-if="parts.type == 'text'" :class="$bsMap.text" :style="style">
     <span>{{ parts.data }}</span>
   </div>
-  <img v-else :class="$style.icon" :style="style" :src="parts.data" />
+  <img v-else :class="$bsMap.icon" :style="style" :src="parts.data" />
 </template>
 
 <script lang="ts" setup>
@@ -17,6 +17,8 @@ import {
 import { useIconStore } from '@/stores/icon';
 import styleFromParams from '@/utils/styleFromParams';
 
+import $bsMap from './style.module.scss';
+
 const props = defineProps<{
   src: string;
 }>();
@@ -76,26 +78,3 @@ function selectTextWidth(flag: string): number | undefined {
   }
 }
 </script>
-
-<style lang="scss" module>
-.icon,
-.text {
-  position: absolute;
-  user-select: none;
-
-  width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio, 1) * 1px);
-  height: calc(var(--bs-map-size) * 1px);
-}
-
-.text {
-  font-family: monospace;
-  font-size: calc(var(--bs-map-size) / 2 * 1px);
-  text-align: var(--bs-map-cell-halign, center);
-  z-index: 1; // texts are always stacked over icons
-
-  span {
-    line-height: 1;
-    vertical-align: var(--bs-map-cell-valign, middle);
-  }
-}
-</style>
diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
index 50799d7..af220db 100644
--- a/src/components/BSMap/BSRow.vue
+++ b/src/components/BSMap/BSRow.vue
@@ -1,9 +1,9 @@
 <template>
-  <div :class="$style.row">
-    <div :class="$style.cells" :style="rowStyle">
+  <div :class="$bsMap.row">
+    <div :class="$bsMap.cells" :style="rowStyle">
       <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part" :row="row" :offset="offset" />
     </div>
-    <div :class="$style.texts">
+    <div :class="$bsMap.texts">
       <BSText v-for="({ part, offset, align }, index) in  texts" :key="index" :src="part" :align="align" :row="row"
         :offset="offset" />
     </div>
@@ -16,6 +16,7 @@ import { computed, defineProps } from 'vue';
 import splitWithOffset from '@/utils/splitWithOffset';
 import styleFromParams from '@/utils/styleFromParams';
 
+import $bsMap from './style.module.scss';
 import BSCell from './BSCell.vue';
 import BSText from './BSText.vue';
 
@@ -38,21 +39,3 @@ const texts = computed(() => parts.value.texts
 
 const rowStyle = computed(() => styleFromParams(parts.value.texts[4]?.part));
 </script>
-
-<style lang="scss" module>
-.row {
-  display: flex;
-  align-items: stretch;
-}
-
-.cells {
-  flex: 0 0 calc(var(--bs-map-size) * var(--bs-map-cols) * 1px);
-  display: flex;
-  justify-content: center;
-}
-
-.texts {
-  flex: 1 1 auto;
-  display: flex;
-}
-</style>
diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
index a1f6859..d3ad9c2 100644
--- a/src/components/BSMap/BSText.vue
+++ b/src/components/BSMap/BSText.vue
@@ -1,6 +1,6 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
-    <div :class="[selectable, $style.text]" :data-align="align" :title="props.src" @click="handleClick">
+    <div :class="[selectable, $bsMap.text]" :data-align="align" :title="props.src" @click="handleClick">
       {{ props.src }}
     </div>
   </BSSelectable>
@@ -11,6 +11,7 @@ import { defineProps } from 'vue';
 
 import { useEditorStore } from '@/stores/editor';
 
+import $bsMap from './style.module.scss';
 import BSSelectable from './BSSelectable.vue';
 
 const props = defineProps<{
@@ -31,20 +32,3 @@ function handleClick(): void {
   };
 }
 </script>
-
-<style lang="scss" module>
-.text {
-  user-select: none;
-  cursor: pointer;
-  margin: 0 5px;
-  font-family: monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &[data-align="4"] {
-    flex-grow: 1;
-    text-align: end;
-  }
-}
-</style>
diff --git a/src/components/BSMap/style.module.scss b/src/components/BSMap/style.module.scss
new file mode 100644
index 0000000..cc9bcce
--- /dev/null
+++ b/src/components/BSMap/style.module.scss
@@ -0,0 +1,62 @@
+.map {
+  line-height: calc(var(--bs-map-size) * 1px);
+
+  .row {
+    display: flex;
+    align-items: stretch;
+
+    .cells {
+      flex: 0 0 calc(var(--bs-map-size) * var(--bs-map-cols) * 1px);
+      display: flex;
+      justify-content: center;
+
+      .cell {
+        position: relative;
+        cursor: pointer;
+        width: calc(var(--bs-map-size) * var(--bs-map-cell-ratio, 1) * 1px);
+        height: calc(var(--bs-map-size) * 1px);
+
+        .icon,
+        .text {
+          position: absolute;
+          user-select: none;
+
+          width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio, 1) * 1px);
+          height: calc(var(--bs-map-size) * 1px);
+        }
+
+        .text {
+          font-family: monospace;
+          font-size: calc(var(--bs-map-size) / 2 * 1px);
+          text-align: var(--bs-map-cell-halign, center);
+          z-index: 1; // texts are always stacked over icons
+
+          span {
+            line-height: 1;
+            vertical-align: var(--bs-map-cell-valign, middle);
+          }
+        }
+      }
+    }
+
+    .texts {
+      flex: 1 1 auto;
+      display: flex;
+
+      .text {
+        user-select: none;
+        cursor: pointer;
+        margin: 0 5px;
+        font-family: monospace;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &[data-align="4"] {
+          flex-grow: 1;
+          text-align: end;
+        }
+      }
+    }
+  }
+}